@charset "utf-8";
/* CSS Document */
#adminBox, .acms-admin-box,
.tss_comprehensiveHead{
  position: relative;
  z-index: 100;
}


.tss_body{background-color: #363636;}
.syy_video{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.syy_video video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
.syy_body{
  position: relative;
  padding: 72px 16px 64px;
  z-index: 100;
  background-color: rgb(0 0 0 / 53%);
}
.syy_top{
  margin-bottom: 32px;
  text-align: center;
  opacity: 0;
  transition: all 1s linear;
}
.syy_top.inView{opacity: 1;}
.syy_top h1{
  max-width: 964px;
  margin: auto;
  aspect-ratio: 35/12;
}
.syy_top h1 img{max-width: 100%;}
.syy_top p{
  line-height: 1.5;
  margin-bottom: 16px;
  font-size: 1.875rem;
  font-weight: bold;
  color: #FFFFFF;
}
.syy_top p::before,
.syy_top p::after{
  content: "";
  display: inline-block;
  margin: 0 0.5em;
  font-size: 1.875rem;
  font-weight: bold;
  color: #FFFFFF;
}
.syy_top p span{margin-left: 0.5em;}
.syy_top div{
  width: 100%;
  max-width: 400px;
  height: 56px;
  padding: 12px 8px;
  margin: 0 auto 8px;
  text-align: center;
  font-size: 1.625rem;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 28px;
  background-color: #02BA8F;
}
.syy_top div span{font-size: 2.25rem;}
.syy_top > span{
  font-size: 0.875rem;
  color: #FFFFFF;
}



.syy_description{
  position: relative;
  line-height: 1.5;
  margin-bottom: 56px;
  text-align: center;
}
.syy_description > span{
  content: "";
  position: absolute;
  display: block;
  width: 1920px;
  height: 245px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/il_bgdeco.png) center bottom no-repeat;
  z-index: 2;
  opacity: 0;
  transition: all 1s linear;
}
.syy_description > span.inView{opacity: 1;}
.syy_description div{
  position: relative;
  max-width: 744px;
  margin: auto;
  z-index: 30;
}
.syy_description div h2{
  margin-bottom: 14px;
  font-weight: bold;
  font-size: 2.5rem;
  color: #FFC60C;
  text-shadow: 0px 0px 6px #000000;
  opacity: 0;
  transition: all 1s linear;
}
.syy_description div h2.inView{opacity: 1;}
.syy_description div p{
  font-size: 1.125rem;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0px 0px 6px #000000;
  opacity: 0;
  transition: all 1s linear;
}
.syy_description div p.inView{opacity: 1;}
.syy_description div p:nth-last-of-type(n+2){margin-bottom: 14px;}
.syy_description div p span{display: block;}
.syy_description div h3{
  margin: 32px 0 16px;
  font-size: 1.875rem;
  font-weight: bold;
  color: #B1FEEC;
  text-shadow: 0px 0px 6px #000000;
  opacity: 0;
  transition: all 1s linear;
}
.syy_description div h3.inView{opacity: 1;}



.syy_program{
  max-width: 1420px;
  margin: 0 auto 88px;
}
.syy_program ul{
  display: flex;
  justify-content: space-between;
  gap: 0 4px;
  margin-bottom: 56px;
}
.syy_program ul li{
  width: 340px;
  opacity: 0;
  transition: all 1s linear;
}
.syy_program ul li:nth-of-type(2){transition-delay: 0.2s;}
.syy_program ul li:nth-of-type(3){transition-delay: 0.4s;}
.syy_program ul li:nth-of-type(4){transition-delay: 0.6s;}
.syy_program ul.inView li{opacity: 1;}
.syy_program ul li picture{
  display: block;
  aspect-ratio: 16/9;
}
.syy_program ul li picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.syy_program ul li p{
  height: 48px;
  padding: 16px 8px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: bold;
  background-color: rgba(67,68,113,0.85);
}
.syy_program ul li:nth-of-type(1) p{color: #02BCFF;}
.syy_program ul li:nth-of-type(2) p{color: #FF9A24;}
.syy_program ul li:nth-of-type(3) p{color: #72E7CC;}
.syy_program ul li:nth-of-type(4) p{color: #F3AFE8;}


.syy_livebox{
  padding: 0 48px;
  width: 100%;
  margin: 0 auto 64px;
  max-width: 640px;
  background:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 84%, rgba(0, 0, 0, 0) 100%);
}
.syy_livebox > div{
  background-image:url(../img/boder_live.png),url(../img/boder_live.png);
  background-position:top left,bottom left;
  background-repeat:no-repeat,no-repeat;
  background-size:100% auto,100% auto;
  padding-bottom:24px;
}
.syy_livebox img{
  width:100%;
}
.syy_livebox p{
  color:#DCD6B8;
  font-size:0.875em;
  text-align:left;
  line-height:1.5;
  font-weight:normal;
  padding:0 2em;
}
.syy_livebox p span{
  font-weight:bold;
  color:#DCD6B8;
}


.syy_oekaki{
  max-width: 600px;
  margin: 0 auto 32px;
  text-align: center;
  opacity: 0;
  transition: all 1s linear;
}
.syy_oekaki.inView{opacity: 1;}
.syy_oekaki h2{
  position: relative;
  height: 48px;
  border-radius: 50px 50px 0px 0px;
  background: radial-gradient(#003C6C 0%, #000E2B 100%);
}
.syy_oekaki h2 picture{
  position: absolute;
  display: block;
  width: 100%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.syy_oekaki h2 img{max-width: 100%;}
.syy_oekaki > div{
  padding: 12px 8px 24px;
  border-radius: 0px 0px 20px 20px;
  background-color: #001526;
}
.syy_oekakitxt{
  margin-bottom: 16px;
  font-size: clamp(0.75rem, 0.605rem + 0.54vw, 0.875rem);/*12-14 430-800*/
  line-height: 1.375;
  color: #FFFFFF;
}
.syy_oekaki > div div{margin-bottom: 16px;}
.syy_oekaki > div div a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 266px;
  height: 40px;
  margin: auto;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: bold;
  color: #FFF57D;
  text-shadow: 0px 0px 2px #00256E;
  border-radius: 20px;
  background-color: #0099DB;
  border: 1px solid #000000;
  box-shadow: 0px 2px 0px #000000;
}
.syy_oekaki > div p a{
  font-size: clamp(0.875rem, 0.584rem + 1.08vw, 1.125rem);/*14-18 430-800*/
  font-weight: bold;
  color: #FFD1F7;
}

.syy_comson{text-align: center;}
.syy_comson p{
  font-size: 1.875rem;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0px 0px 6px #000000;
}
.syy_comson span{
  font-size: 0.875rem;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0px 0px 6px #000000;
}


.syy_schedule{
  position: relative;
  margin-bottom: 80px;
  opacity: 0;
  transition: all 1s linear;
}
.syy_schedule.inView{opacity: 1;}
.syy_schedule h2{
  position: absolute;
  top: -24px;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #B1FEEC;
  text-shadow: 0px 0px 4px #000000;
  z-index: 1;
}
.syy_schedule h2::before,
.syy_schedule h2::after{
  content: "";
  display: inline-block;
  width: 38px;
  height: 26px;
}
.syy_schedule h2::before{background: url(../img/il_decottl1_lt.svg) center center no-repeat;}
.syy_schedule h2::after{background: url(../img/il_decottl1_rt.svg) center center no-repeat;}
.syy_schedule div{
  max-width: 400px;
  margin: 0 auto 8px;
  padding: 40px 16px 24px;
  background-color: rgba(46, 77, 70, 0.5);
  border: 2px solid #65AE9D;
  backdrop-filter: blur(5px);
}
.syy_schedule div dl{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-between;
  max-width: 296px;
  margin: auto;
}
.syy_schedule div dl dt{
  width: 96px;
  font-size: 0.875rem;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0px 0px 6px #000000;
}
.syy_schedule div dl dd{
  width: calc(100% - 96px);
  font-size: 1rem;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0px 0px 6px #000000;
}
.syy_schedule div dl dt:nth-last-of-type(n+2),
.syy_schedule div dl dd:nth-last-of-type(n+2){margin-bottom: 24px;}
.syy_schedule div dl dt::after{
  content: "";
  display: inline-block;
  width: 24px;
  height: 16px;
  margin-left: 4px;
  vertical-align: bottom;
}
.syy_schedule div dl dt:nth-of-type(1):after{background: url(../img/il_scheduledeco_saturn.svg) center center no-repeat;}
/*.syy_schedule div dl dt:nth-of-type(2):after{background: url(../img/il_scheduledeco_starbl.svg) center center no-repeat;}*/
.syy_schedule div dl dt:nth-of-type(3):after{background: url(../img/il_scheduledeco_starog.svg) center center no-repeat;}
.syy_schedule div dl dt:nth-of-type(4):after{background: url(../img/il_scheduledeco_note.svg) center center no-repeat;}
.syy_schedule div dl dt:nth-of-type(5):after{background: url(../img/il_scheduledeco_starbl.svg) center center no-repeat;}
.syy_schedule div dl dt:nth-of-type(7):after{background: url(../img/il_scheduledeco_starog.svg) center center no-repeat;}
.syy_schedule div dl dt:nth-of-type(6):after{background: url(../img/il_scheduledeco_saturn.svg) center center no-repeat;}
.syy_schedule div dl dt:nth-of-type(8):after{background: url(../img/il_scheduledeco_starbl.svg) center center no-repeat;}
.syy_schedule p{
  text-align: center;
  font-size: 0.875rem;
  color: #DEDEDE;
  text-shadow: 0px 0px 6px #000000;
}



.syy_ticket{
  position: relative;
  margin-bottom: 88px;
  opacity: 0;
  transition: all 1s linear;
}
.syy_ticket.inView{opacity: 1;}
.syy_ticket h2{
  position: absolute;
  top: -34px;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #B1FEEC;
  text-shadow: 0px 0px 4px #000000;
  z-index: 1;
}
.syy_ticket h2::before,
.syy_ticket h2::after{
  content: "";
  display: inline-block;
  width: 64px;
  height: 56px;
  vertical-align: middle;
}
.syy_ticket h2::before{
  background: url(../img/il_decottl2_lt.svg) center center no-repeat;
  background-size: contain;
}
.syy_ticket h2::after{
  background: url(../img/il_decottl2_rt.svg) center center no-repeat;
  background-size: contain;
}
.syy_ticket > div{
  max-width:640px;
  width:100%;
  background: rgba(0, 0, 0, 0.5);
  margin:auto;
  color:#FFF;
  padding:36px 24px 16px;
}
.syy_ticket > div > p{
  font-weight:bold;
  text-align:center;
  padding-bottom: 0.5em;
}
.syy_ticket > div > p::after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin: 16px auto 0;
  background: linear-gradient(to left, #FF9A24 0%, #EEFF00 27.62%, #B1FEEC 66.11%, #FFD107 100%);
}
.syy_feelist{margin-bottom: 16px;}
.syy_feelist li:not(:last-of-type){
  display:flex;
  flex-wrap: wrap;
  padding:12px 0;
  border-bottom:solid 1px #707070;
  justify-content: space-between;
}
.syy_feelist li div{
  display:flex;
  justify-content:space-between;
  align-items: center;
  width:100%;
}
.syy_feelist li:not(:last-of-type) div:first-of-type{
  font-weight:bold;
  width:42%;
  align-items: center;
}
.syy_tisyy_feelistcket li div:first-of-type p:last-of-type{
  font-weight:normal;
}
.syy_feelist li div:first-of-type p:last-of-type span{
  font-size:1.875em;
}
.syy_feelist li div:nth-of-type(2){
  align-items: center;
  width:55%;
  font-size:0.875em;
  line-height:1.125;
}
.syy_ticket > p{
  text-align:center;
  color:#FFF;
  padding-top:1em;
}
.syy_busticket{
  display:flex;
  flex-wrap:wrap;
  padding: 12px 0;
}
.syy_busticket div p{
  font-size:0.875em;
}
.syy_busticket div p:first-of-type{
  font-weight:bold;
  min-width: 6em;
  font-size: 1em;
}
.syy_busticket div p span{
  font-size:1.875rem;
}
.syy_busticket div p{
  margin-top:auto;
}
.syy_busticket > p{
  width:100%;
  color:#EFEAA6;
  font-size:0.875em;
  padding-top: 1em;
}



.syy_notes{
  position: relative;
  max-width:640px;
  width: 100%;
  line-height: 1.5;
  margin: 0 auto 160px;
  padding: 64px 24px 24px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 1s linear;
}
.syy_notes.inView{opacity: 1;}
.syy_notes h2{
  position: absolute;
  top: -16px;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #B1FEEC;
  text-shadow: 0px 0px 4px #000000;
  z-index: 1;
}
.syy_notes h2 span{
  display: block;
  font-size: 0.583em;
}
.syy_notes li{
  padding-left: 1em;
  text-indent: -1em;
  font-size: 0.75rem;
  color: #FFFFFF;
}



.syy_detail{
  position: relative;
  margin-bottom: 88px;
  opacity: 0;
  transition: all 1s linear;
}
.syy_detail.inView{opacity: 1;}
.syy_detail h2{
  position: absolute;
  top: -18px;
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0px 0px 6px #000000;
  z-index: 1;
}
.syy_detail h2::before,
.syy_detail h2::after{
  content: "";
  display: inline-block;
  width: 54px;
  height: 24px;
  vertical-align: middle;
  background: url(../img/il_decottl_both.svg) center center no-repeat;
  background-size: contain;
}
.syy_detail div{
  max-width: 600px;
  margin: auto;
  padding: 24px 16px 16px;
  background-color: rgba(185, 246, 255, 0.73);
  border: 1px solid #D3D7EF;
  backdrop-filter: blur(5px);
}
.syy_detail div dl{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-between;
  gap: 0 16px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.syy_detail div dl dt{
  width: 5em;
  text-align: center;
  font-size: 0.875rem;
  font-weight: bold;
  color: #00505D;
}
.syy_detail div dl dd{
  width: calc(100% - 5em - 16px);
  font-size: 0.875rem;
}
.syy_detail div dl dt:nth-last-of-type(n+2),
.syy_detail div dl dd:nth-last-of-type(n+2){margin-bottom: 12px;}
.syy_detail p{
  line-height: 1.5;
  font-size: clamp(0.75rem, 0.605rem + 0.54vw, 0.875rem);/*12-14 430-800*/
  color: #000000;
}


.syy_bnr{
  opacity: 0;
  transition: all 1s linear;
}
.syy_bnr.inView{opacity: 1;}
.syy_bnr ul{
  display: flex;
  align-items: center;
  justify-content: center;
}
.syy_bnr ul li:first-of-type{
  width: calc(50% + 29px);
  max-width: 418px;
}
.syy_bnr ul li:nth-of-type(2){
  width: calc(50% - 29px);
  max-width: 360px;
}
.syy_bnr ul li:first-of-type::after{
  content: "×";
  display: inline-block;
  margin: 0 12px;
  text-align: center;
  vertical-align: middle;
  font-family: Meiryo;
  font-size: 2.5rem;
  font-weight: bold;
  color: #FFFFFF;
}
.syy_bnr ul li:first-of-type img{width: calc(100% - 59px);}
.syy_bnr ul li img{max-width: 100%;}



.modaal-container{background: none;}
.modaal-content-container{
  position: relative;
  max-width: 960px;
  padding: 0;
}
.syy_mdl_mainblock{background-color: #000000;}
.syy_mdl_mainblock::after{
  content: "";
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  width: 427px;
  height: 73px;
  background: url(../img/modal/txt_profile.svg) center center no-repeat;
}
.syy_mdl_mainblock>div{display: none;}
.syy_mdl_mainblock>div.active{display: block;}
.syy_profilebox{display: flex;}
.syy_profilebox div:first-of-type{width: 37.5%;}
.syy_profilebox div:last-of-type{
  width: 62.5%;
  padding: 96px 24px 0;
}
.syy_profilebox div:last-of-type h4{margin-bottom: 24px;}
.syy_profilebox div:last-of-type p{
  line-height: 2;
  font-size: 16px;
  color: #DCD6B8;
}
.syy_mdl_thumb{
  position: absolute;
  right: 27px;
  bottom: 32px;
}
.syy_mdl_thumb ul{display: flex;}
.syy_mdl_thumb ul li{
  position: relative;
  width: 136px;
  aspect-ratio: 1;
  overflow: hidden;
}
.syy_mdl_thumb ul li.active::after{
  content: "";
  position: absolute;
  display: block;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  left: 0;
  top: 0;
  border: 6px solid rgba(191, 154, 80, 0.65);
}
.syy_mdl_thumb ul li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.syy_mdl_thumb ul li.active img{transform: scale(1.2);}




.syy_uniquefooter{
  position: relative;
  line-height: 1.5;
  padding: 8px;
  text-align: center;
  background-color: #000000;
  z-index: 90;
}
.syy_uniquefooter P{
  font-size: 0.75rem;
  color: #8D8D8D;
  text-shadow: 0px 0px 6px #000;
}
.tss_footer{display: none;}
.dsp_sp{display: none;}









@media screen and (width > 800px){
  .syy_oekaki > div div a:hover{
    border: 1px solid #0099DB;
    background-color: #00256E;
  }
  .syy_oekaki > div p a:hover{text-decoration: none;}
}


@media screen and (width < 1470px){
  .syy_program ul li p{
    height: 3.26vw;
    padding: 1.08vw 8px;
    font-size: max(1.22vw, 0.625rem);
  }
}
@media screen and (width <= 960px){
  .syy_livebox > div div{padding: 0 10%;}
}
@media screen and (width <= 800px){
  .syy_body{padding-bottom: calc(17.5vw + 120px);}

  .syy_top p{font-size: max(3.75vw, 1.125rem);}
  .syy_top p::before,
  .syy_top p::after{content: none;}
  .syy_top p span{display: block;}
  .syy_top div{
    width: max(50vw, 296px);
    height: max(7vw, 40px);
    padding: max(1.5vw, 8px) 8px;
    font-size: max(3.25vw, 1.125rem);
  }
  .syy_top div span{font-size: max(4.5vw, 1.5rem);}

  
  .syy_description div h2{font-size: max(5vw, 1rem);}
  .syy_description div p{font-size: max(2.25vw, 0.75rem);}
  .syy_description div h3{font-size: max(3.75vw, 0.875rem);}

  .syy_program ul{
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 8px;
  }
  .syy_program ul li{
    width: 42.5%;
    max-width: 340px;
    min-width: 240px;
  }
  .syy_program ul li p{
    height: max(4vw, 28px);
    padding: 10px;
    font-size: max(1.75vw, 0.625rem);
  }


  .syy_oekakitxt span{display: block;}


  .syy_comson p{font-size: max(3.75vw, 0.875rem);}
  .syy_comson span{font-size: max(1.75vw, 0.625rem);}


  .syy_schedule h2{font-size: max(3vw, 1.125rem);}


  .syy_ticket h2{
    top: -26px;
    font-size: max(3vw, 1.125rem);
  }
  .syy_ticket h2::before,
  .syy_ticket h2::after{
    width: max(8vw, 40px);
    height: max(7vw, 36px);
  }


  .syy_notes h2{font-size: max(3vw, 1.125rem);}


  .syy_detail h2{font-size: max(3vw, 1.125rem);}
  .syy_detail h2::before,
  .syy_detail h2::after{
    width: max(6.75vw, 40px);
    height: max(3vw, 16px);
  }
}
@media screen and (max-width:640px) {
  .syy_ticket li:not(:last-of-type) div:first-of-type{width:100%;}
  .syy_ticket li div:nth-of-type(2){
    width:100%;
    padding-top: 0.5em;
  }
  .syy_ticket li br{display:none;}
  .syy_busticket > div{
    flex-wrap:wrap;
    gap: 4px;
  }
  .syy_busticket div p{
    width:100%;
  }
  .syy_busticket div p:first-of-type{
    text-align:left;
  }
  .syy_busticket > p{line-height:1.375;}


  .syy_notes{padding: 40px 24px 24px;}

}
@media screen and (min-width:431px) and (max-width:640px) {
  .syy_ticket > div{
    min-width: 400px;
    width: 70%;
  }
}
@media screen and (width <= 430px){
  .syy_description div p{text-align: left;}
  .syy_description div p span{display: inline;}


  .syy_schedule div dl dd{font-size: 0.875rem;}
  .syy_schedule p{font-size: 0.75rem;}
  .syy_livebox{
    padding:0 24px;
    background: #000000;
  }
  .syy_livebox > div div{padding: 0 16px;}
  .syy_livebox p{padding: 0;}


  .syy_detail div dl{flex-wrap: wrap;}
  .syy_detail div dl dt{text-align: left;}
  .syy_detail div dl dt:nth-last-of-type(n+2){margin-bottom: 0;}
  .syy_detail div dl dd{width: 100%;}


  .syy_bnr ul li:first-of-type::after{
    margin: 0 4px;
    font-size: 1.5rem;
  }
  .syy_bnr ul li:first-of-type{width: calc(50% + 16px);}
  .syy_bnr ul li:nth-of-type(2){width: calc(50% - 16px);}
  .syy_bnr ul li:first-of-type img{width: calc(100% - 32px);}
}