@charset "shift_jis";
/* Updated 2025/09/08.T */

/*-----------------------
common
------------------------*/
@font-face {
  font-family: "noto-sans-black";
  src: url("/kojin/special/fonts/NotoSansJP-Black.woff") format("woff");
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  min-width: auto;
}
#main-area {
  overflow: hidden;
}
#footer-content {
  margin-top: 0;
}
#footer-fixed .panel>.inner {
  padding: 10px 20px!important;
}
#footer-fixed .panel{
  background: rgba(255, 255, 255, .4);
}
#footer-area.footer-fixed:not(.-close) #footer-content .footer-logo {
  padding-bottom: 80px;
}
.section-main {
  position: relative;
  margin: 0 auto;
  overflow: visible;
  z-index: 1;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
.bg-content01 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100vh;
  background: #000 url(/kojin/special/campaign/yokin/usj_ticket/imgs/index_bg_01.jpg) no-repeat 0 bottom / 100%;
}
.content-wrap{
  max-width: 536px;
  margin: 0 auto;
  padding: 0 18px 56px;
}
.content-wrap sup{
  font-size: 0.6em;
}
._t-orange01{
  color: #F68213!important;
}
.btn-type01.-orange01 {
  background: #FF5F04;
  box-shadow: 0 6px 8px 0 rgba(193, 93, 0, 0.3);
}
.list-num02>.item>.mark {
  background: #E0D6FD;
}
.list-num02>.item>.mark>span{
  font-size: 0.8em;
  line-height: 1;
}
.list-circle01>.item::before{
  background: #56635F;
}
.btn-type01[href^="#"]{
  position: relative;
  padding: 3px 40px;
}
.btn-type01[href^="#"]::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 13px);
  left: 20px;
  width: 26px;
  height: 26px;
  background: url(/kojin/cmn/imgs/ico_arrow_right_01.svg) no-repeat 0 0 / 100%;
  transform: rotate(90deg);
}
.toggle-block01.card-normal01:not(.-red01)>.inner>.header[role=tab]>.title {
  color: #141D1D;
}
.toggle-block01.card-normal01>.inner>.header[role=tab]::after{
  top: calc(50% - 13px);
  right: 14px;
  width: 26px;
  height:26px;
}
/*-----------------------
kv-area01
------------------------*/
.kv-area01>.inner{
  max-width: 1920px;
  margin: 0 auto;
  padding: 28px 0 0;
  background: url(/kojin/special/campaign/yokin/usj_ticket/imgs/index_img_kv02.png) no-repeat right 20px / 48%;
}
.kv-area01>.inner>h1{
  max-width: 46.83%;
  margin-left: 4.16%;
}
.kv-txt01{
  max-width: 502px;
  margin: 70px auto 0;
  padding: 0 10px;
}
.btn-list01.-kv01{
  padding: 0 16px;
  max-width: 702px;
  margin: 12px auto 0;
}
.btn-type01.-kv01{
  width: 100%;
  background: #FF5F04;
}
.btn-type01.-kv01>.inner{
  min-height: 54px;
  font-size: 2.4rem;
  color: #fff;
}
.kv-link01,
.kv-link01:visited{
  display: inline-block;
  position: relative;
  padding-right: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
}
.kv-link01::after{
  display: inline-block;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 24px;
  background: url(/kojin/special/campaign/yokin/usj_ticket/imgs/index_ico_01.svg) no-repeat 0 0 / 100%;
}
.kv-linkWrap01{
  margin: 8px 0 0;
  text-align: center;
  padding: 0 18px;
}
/*-----------------------
scroll
------------------------*/
.scroll{
  display: block;
  margin: 0 auto;
  max-width: 162px;
  padding-bottom: 52px;
  text-align: center;
}
.scroll .arrow{
  position: relative;
  z-index: 2;
  margin: 0;
}
.scroll .arrow>img{
  position: absolute;
  top: 0;
  left: calc(50% - 76px);
  animation: arrow 1.6s 0s ease-out infinite;
}
/*-----------------------
content-area01
------------------------*/
.content-area01{
  padding: 27px 15px 37px;
  border-radius: 14px;
  border: 3px solid #FFFFFF;
  background: #170F1D;
}
/*-----------------------
ttl-img01
------------------------*/
.ttl-img01{
  margin: 30px 0 0;
  text-align: center;
}
h2.ttl-img01{
  margin-top: 80px;
}
/*-----------------------
card-wrap01
------------------------*/
.card-wrap01{
  margin: 28px 0 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 0px 10px 0px rgba(255, 225, 146, 1);
}
.card-wrap01>.header {
  padding: 10px 18px;
  background: #FDB700;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1;
  color: #010001;
  font-family: roboto;
}
.card-wrap01>.header .num {
  margin-left: 9px;
  font-size: 2.8rem;
}
.card-wrap01>.body {
  padding: 20px 16px 32px;
  background: #fff;
}
.card-wrap01.-type02{
  box-shadow: 0px 0px 10px 0px #9780DA99;
}
.card-wrap01.-type02>.header {
  background: #563E9B;
  font-size: 2.4rem;
  color: #fff;
}
.icon-arrow01 + .card-wrap01{
  margin-top: 26px;
}
.card-wrap01>.body>.text01{
  margin: 24px 0 0;
  padding: 20px 16px;
  border-radius: 8px;
  background: #E0D6FD;
  text-align: center;
  font-weight: bold;font-size: 1.6rem;
}
/*-----------------------
cv-area01
------------------------*/
.cv-area01{
  width: 85%;
  margin: 0 auto;
}
.cv-area01 .text01{
  margin: 24px 0 0;
  background: #F7EAC6;
  text-align: center;
  font-weight: bold;
  color: #141D1D;
  font-size: 1.4rem;
}
/*-----------------------
card-ttl01
------------------------*/
.card-ttl01{
  padding: 20px 10px;
  margin: 32px -16px 0;
  background: #F7EAC6;
  font-size: 2rem;
  color: #004831;
  font-weight: bold;
  text-align: center;
}
.card-ttl01>em{
  font-size: 2.4rem;
  font-weight: bold;
}
/*-----------------------
table
------------------------*/
.table-radius01 {
  padding: 1px;
  margin: 16px 0 0;
  background: #563E9B;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
}
.table-radius01>table {
  border-collapse: separate;
  border-spacing: 1px;
  border-radius: 9px;
  overflow: hidden;
}
.table-radius01>table th,
.table-radius01>table td {
  font-weight: bold;
  padding: 3px 6px;
}
.table-radius01>table>thead th {
  text-align: center;
  padding: 9px 4px;
  vertical-align: middle;
}
.table-radius01>table>thead>tr>* {
  background: #E0D6FD;
  color: #170F1D;
  line-height: 1.3;
}
.table-radius01>table>thead>tr>.header {
  font-size: 1.8rem;
}
.table-radius01>table>tbody>tr>* {
  background: #fff;
  vertical-align: middle;
}
/*-----------------------
ttl-num01
------------------------*/
.ttl-num01{
  position: relative;
  margin: 24px 0 0;
  padding: 0 0 0 32px;
  font-size: 2rem;
  font-weight: bold;
}
.ttl-num01>.icon{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left:0;
  top: 0.3em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding-top: 0.1em;
  background: #563E9B;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: bold;
  color: #fff;
  font-family: roboto;
}
/*-----------------------
ttl-btn01
------------------------*/
.ttl-btn01{
  margin: 16px 0 0;
  font-size: 1.4rem;
  text-align: center;
  font-weight: bold;
  color: #563E9B;
}
.ttl-btn01 em{
  font-size: 2rem;
  font-weight: bold;
}
.ttl-btn01::before,
.ttl-btn01::after{
  display: inline-block;
  content: '';
  width: 10px;
  height: 14px;
  vertical-align: -0.1em;
  background: url(/kojin/special/campaign/yokin/usj_ticket/imgs/index_ico_04.svg) no-repeat 0 0 / contain;
}
.ttl-btn01::before{
  margin-right: 5px;
}
.ttl-btn01::after{
  margin-left: 5px;
  transform: scale(-1,1);
}
/*-----------------------
ttl-bnr01
------------------------*/
.ttl-bnr01{
  margin: 43px 0 0;
  font-size: 1.8rem;
  text-align: center;
  font-weight: bold;
  color: #E0D6FD;
}
.ttl-bnr01 em{
  font-size: 2.4rem;
  font-weight: bold;
}
.ttl-bnr01::before,
.ttl-bnr01::after{
  display: inline-block;
  content: '';
  width: 13px;
  height: 19px;
  vertical-align: -0.1em;
  background: url(/kojin/special/campaign/yokin/usj_ticket/imgs/index_ico_05.svg) no-repeat 0 0 / contain;
}
.ttl-bnr01::before{
  margin-right: 5px;
}
.ttl-bnr01::after{
  margin-left: 5px;
  transform: scale(-1,1);
}
/*-----------------------
t-white01
------------------------*/
._t-white01{
  color: #fff;
}
/*-----------------------
step-wrap01
------------------------*/
.step-wrap01{
  margin: 18px -18px 0;
}
.step-wrap01 .item01{
  max-width: 270px;
  margin: 0 8px;
  border-radius: 8px;
  padding: 24px 14px;
  height: auto;
  background: #fff;
}
.step-wrap01 .img01{
  margin: 16px -14px 0;
}
.step-wrap01 .step-ttl01{
  border-radius: 4px;
  background: #E0D6FD;
  color: #170F1D;
  font-size: 1.8rem;
  text-align: center;
  font-weight: bold;
}
.step-wrap01 .slick-track{
  display: flex;
}
.step-wrap01 .slick-arrow{
  top: calc(50% - ((50px + 32px) / 2));
  width: 40px;
  height: 40px;
  transition: background-color .3s ease-out;
  background: #c4d700;
  border-radius: 50%;
  box-shadow: 0 9px 16px 0 rgba(212, 232, 4, .63);
  z-index: 1;
}
.step-wrap01 .slick-arrow::before{
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - (1.375em / 2));
  left: calc(50% - (1.375em / 2));
  width: 1.375em;
  height: 1.375em;
  background: url(/kojin/cmn/imgs/ico_arrow_right_01.svg) 0 0 / cover no-repeat;
}
.step-wrap01 .slick-arrow.slick-prev{
  left: calc(50%  - 160px);
  transform: scale(-1,1);
}
.step-wrap01 .slick-arrow.slick-next{
  right: calc(50%  - 160px);
}
.step-wrap01 .slick-arrow.slick-disabled{
  display: none!important;
}
.step-wrap01 .slick-dots{
  display: flex;
  justify-content: center;
  position: static;
  margin: 16px 0 0;
}
.step-wrap01 .slick-dots li{
  margin: 0 4px;
}
.step-wrap01 .slick-dots li button {
  display: block;
  width: 10px;
  height: 10px;
  background: #D5DEDB;
  border-radius: 50%;
}
.step-wrap01 .slick-dots li.slick-active button {
  background: #FDB700;
}
/*-----------------------
step-wrap01
------------------------*/
.btn-type01.-large02 {
  width: 100%;
}
.btn-type01.-large02>.inner {
  min-height: 80px;
  font-size: 2rem;
  line-height: 1.5;
}
/*-----------------------
img-bnr01
------------------------*/
.img-bnr01{
  margin: 4px 0 0;
}
/*-----------------------
table-radius02
------------------------*/
.table-radius02{
  border-radius: 14px;
  margin: 24px 0 0;
  overflow: hidden;
}
.table-radius02>dl{
  background: #fff;
}
.table-radius02>dl>dt{
  padding: 16px;
  background: #FDB700;
  font-weight: bold;
}
.table-radius02>dl>dd{
  padding: 16px;
}
/*-----------------------
icon-arrow01
------------------------*/
.icon-arrow01{
  display: block;
  position: relative;
  margin: 26px auto;
  height: 40px;
  border: none;
  overflow: initial;
}
.icon-arrow01::before,
.icon-arrow01::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width:80px;
  height: 40px;
}
.icon-arrow01::before {
  -webkit-clip-path: polygon(0 0, 50.2% 55%, 50.2% 100%, 0 45%);
  clip-path: polygon(0 0, 50.2% 55%, 50.2% 100%, 0 45%);
  background-color: #FDB700;
}
.icon-arrow01::after {
  -webkit-clip-path: polygon(100% 0, 100% 45%, 49.2% 100%, 49.2% 55%);
  clip-path: polygon(100% 0, 100% 45%, 49.2% 100%, 49.2% 55%);
  background-color: #FDB700;
}
/*-----------------------
bnr-wrap01
------------------------*/
.bnr-wrap01{
  margin: 80px 0 0;
  text-align: center;
  color: #fff;
}
.bnr-wrap01 em{
  font-weight: bold;
  color: #FDB700;
}
/*-----------------------
fix-wrap01
------------------------*/
.fix-wrap01,
.fix-wrap02{
  display: none;
}
.fix-wrap01{
  position: fixed;
  z-index: 1;
  top: calc(50% - 167px);
  left: 0;
  right: calc(50% + 250px);
}
.fix-wrap01 .img01{
  margin: 0 auto 0;
  padding: 0 10px;
  text-align: center;
}
/*-----------------------
fix-wrap02
------------------------*/
.fix-wrap02{
  position: fixed;
  z-index: 1;
  top: calc(50% - 242px);
  right: 0;
  left:  calc(50% + 250px);
  text-align: center;
}
.fix-wrap02 .menu01{
  display: block;
  width: 426px;
  height: 485px;
  margin: 12px auto 0;
  text-align: left;
}
.fix-wrap02 .menu01>li{
  position: relative;
  margin: 16px 0 0;
  padding-left: 54px;
}
.fix-wrap02 .menu01>li:first-child{
  margin: 0;
}
.fix-wrap02 .menu01 a{
  text-decoration: none;
  color: #C2BDE9;
  font-weight: bold;
  font-size: 2.4rem;
  text-shadow: 0 0 10px #EB08B8;
}
.fix-wrap02 .menu01 .-active::before{
  display: block;
  content: '';
  position: absolute;
  left: 12px;
  top: 0.6em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.fix-wrap02 .menu01 .-active>a{
  color: #fff;
}
/*-----------------------
copy-area01
------------------------*/
.copy-area01 {
  position: relative;
  background: #006444;
  color: #ffffff;
  font-size: 1.2rem;
  z-index: 2;
}
.copy-area01 > .inner {
  margin: 0 auto;
  padding: 18px;
  max-width: 500px;
}
@media screen and (max-width: 1400px) {
  .fix-wrap01,
  .fix-wrap02{
    display: none!important;
  }
}
@media screen and (min-width: 768px) {
  .btn-type01.-kv01:not(:disabled):not([aria-disabled=true]):hover{
    background: rgb(238, 120, 0);
  }
  .kv-link01:hover{
    color: #fff;
  }
}
@media screen and (max-width: 767px) {
  .bg-content01 {
    display: none;
  }
  .content-wrap{
    margin-top: -16px;
  }
  .section-main {
    background: url(/kojin/special/campaign/yokin/usj_ticket/imgs/index_bg_02.jpg) repeat-y 0 0 /100%;
  }
  /*-----------------------
  kv-area01
  ------------------------*/
  .kv-area01>.inner{
    padding: 0 0 70px;
    background: #000 url(/kojin/special/campaign/yokin/usj_ticket/imgs/index_bg_01_sp.png) no-repeat 0 bottom / 100%;
  }
  .kv-area01>.inner>h1{
    max-width: 100%;
    margin-left: 0;
    padding: 0 0 82.13%;
    background: url(/kojin/special/campaign/yokin/usj_ticket/imgs/index_img_kv02_sp.png) no-repeat center bottom / 98%;
  }
  .kv-txt01{
    margin: 10px auto 0;
  }
  .btn-type01.-kv01>.inner{
    min-height: 45px;
    font-size: 2.0rem;
  }
  .kv-link01{
    font-size: 1.4rem;
  }
  .kv-link01::after{
    width: 7px;
  }
  /*-----------------------
  scroll
  ------------------------*/
  .scroll{
    display: none;
  }
  /*-----------------------
  content-area01
  ------------------------*/
  .content-area01{
    margin: 0 -18px;
  }
}
@media screen and (min-width: 500px) {
  /*-----------------------
  step-wrap01
  ------------------------*/
  .step-wrap01{
    margin: 18px 0 0;
  }
}
/*anime*/
@keyframes arrow {
  0%{
    opacity: 0;
    margin-top: -100px;
  }
  20%{
    opacity: 1;
  }
  40%{
    opacity: 1;
    margin-top: -70px;
  }
  100%{
    opacity: 0;
    margin-top: -70px;
  }
}
/*-----------------------
modal
------------------------*/
.modal-block01.-teiki01 {
  max-width: 960px;
  width: 100%;
  background-color: #2b2b2b;
  border-radius: 0;
}
.modal-block01.-teiki01>.inner>.header {
  padding: 30px 40px;
}
.modal-block01.-teiki01>.inner>.header>.title>.inner {
  color: #fff;
}
.modal-block01.-teiki01>.inner>.body {
  padding: 50px 4% 50px 4%;
  background-color: #fff;
}
.modal-block01.-teiki01>.inner>.body:not(:first-child) {
  margin: 0 40px 40px;
}
.modal-block01.-teiki01>.inner>.body>.txtWrap01 {
  font-size: 2rem;
  text-align: center;
}
.modal-block01.-teiki01>.inner>.body>.btnWrap01 {
  max-width: 488px;
  margin: 16px auto 0;
}
.modal-block01.-teiki01>.inner>.header>.btn {
  top: 20px;
  right: 24px;
}
.modal-block01.-teiki01>.inner>.header>.btn:focus {
  outline: none;
}
.modal-list01 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}
.modal-list01>.item {
  position: relative;
  text-align: center;
}
.modal-list01>.item:not(:first-child) {
  margin-left: 138px;
}
.modal-list01>.item:not(:last-child)::after {
  position: absolute;
  top: 40%;
  right: -90px;
  display: block;
  width: 42px;
  height: 42px;
  background-color: #2b2b2b;
  content: "";
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  transform: rotate(-90deg);
}
@media screen and (max-width: 767px) {
  .modal-block01.-teiki01>.inner>.header {
    padding: 24px;
  }
  .modal-block01.-teiki01>.inner>.body:not(:first-child) {
    margin: 0 24px 24px;
  }
  .modal-block01.-teiki01>.inner>.body {
    padding: 40px 20px;
  }
  .modal-block01.-teiki01>.inner>.body>.txtWrap01 {
    font-size: 1.4rem;
    text-align: left;
  }
  .modal-block01>.inner>.header>.title>.inner {
    font-size: 1.6rem;
  }
}
/* SMALL STYLES */
@media screen and (max-width: 374px) {
  .modal-block01.-teiki01 .teiki-btn01 {
    font-size: 1.4rem;
  }
}
/*---------------------------------------------
card
---------------------------------------------*/
.card-normal {
  border-radius: 8px;
  overflow: hidden;
}
.card-normal>.header {
  font-family: roboto;
  padding: 12px;
  min-height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 2.0rem;
  background: #faedb3;
  color: #004831;
}
.card-normal>.header .num {
  margin-left: 9px;
}
.card-normal>.body {
  padding: 20px 16px 32px;
  background: #fff;
}
.card-normal.-green01>.body {
  padding: 9px 19px 17px;
  background: #f5f9e6;
}
.card-normal .text-border {
  display: inline;
  line-height: 2.2;
  border-bottom: 8px solid #a0c81e;
}
.card-normal ._t-black{
  font-family: "noto-sans-black";
}