html {
  font-size: 62.5%;
  overflow-y: scroll;
}

@media screen and (max-width:1920px) {
  html {
    font-size: calc((10 * (100vw / 1920)));
  }
}

body {
  background: #FFFFFF;
	font-family: var(--baseFont);
	font-weight: 400;
  color: #000000;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


a{
  transition: var(--hoverTransition);
}


@media (hover: hover) {
  a:hover{opacity: var(--hoverOpacity);}
}


/**************************************
loading
**************************************/
#loading{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 100vw;
  height: 100vh;
  /*background-color: #00BCFF;*/
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
}

#loadingText{
  width: 40%;
  fill: #FFFFFF;
}

@keyframes loadingText {
  0% {transform: scaleY(1); fill: #FFFFFF;}
  25% {transform: scaleY(0.6);}
  50% {transform: scaleY(1.2); fill: #FFF1AC;}
  100% {transform: scaleY(1); fill: #FFFFFF;}
}

#loadingText path{
  transform: scaleY(0.8);
  animation: loadingText 1.6s ease infinite;
  transform-origin: center center;
}

#loadingText path:nth-of-type(1){animation-delay: calc(0.06s * 1);}
#loadingText path:nth-of-type(2){animation-delay: calc(0.06s * 2);}
#loadingText path:nth-of-type(3){animation-delay: calc(0.06s * 3);}
#loadingText path:nth-of-type(4){animation-delay: calc(0.06s * 4);}
#loadingText path:nth-of-type(5){animation-delay: calc(0.06s * 5);}
#loadingText path:nth-of-type(6){animation-delay: calc(0.06s * 6);}
#loadingText path:nth-of-type(7){animation-delay: calc(0.06s * 7);}
#loadingText path:nth-of-type(8){animation-delay: calc(0.06s * 8);}
#loadingText path:nth-of-type(9){animation-delay: calc(0.06s * 9);}
#loadingText path:nth-of-type(10){animation-delay: calc(0.06s * 10);}


#loading.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


#loading.remove{display: none;}


/**************************************
wrap
**************************************/
#wrap{
	width: 100%;
  height: 100vh;
	margin: 0 auto;
  opacity: 1;
  overflow: hidden;
  transition: opacity .3s ease;
}

#wrap::before,
#wrap::after{
  content: '';
  display: block;
  width: 50%;
  height: 200vh;
  position: fixed;
  transform: translate(0,-50%);
  transition: transform .4s ease,opacity .6s ease;
  z-index: 10000;
  pointer-events: none;
}

#wrap::before{ background: #A2FFFF; left: 0; top: 0;}
#wrap::after{ background: #03BDFF; right: 0; top: 0;}

#wrap.start{}

#wrap.start::before{ transform: translate(-100%,-50%); opacity: 0;}
#wrap.start::after{ transform: translate(100%,-50%); opacity: 0;}


#wrap.active{
  height: auto;
  opacity: 1;
}

#wrap.active::before{ display: none;}
#wrap.active::after{ display: none;}


#wrap.lock,
#wrap.pcLock{
	position: fixed;
	overflow: hidden;
	top: 0;
}



/**************************************
btn
**************************************/
.btnNext > a,
.btnNext > button,
.btnNext > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 2rem;
  width: 100%;
  height: 10rem;
  background: #F291BB;
  border-radius: 6.9rem;
  padding: 0 0 0 0;
  font-weight: 700;
  font-size: 4.2rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  cursor: pointer;
  transition: var(--hoverTransition);
}

.btnNext > a::after,
.btnNext > button::after,
.btnNext > span::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6.9rem;
  border: 1px solid #EC3785;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(.6rem,.6rem);
  transition: transform .3s ease;
  pointer-events: none;
}

.btnNext > a > em,
.btnNext > button > em,
.btnNext > span > em{
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background: url("../img/icon_arrow_white.svg") center center no-repeat;
  background-size: auto 100%;
  position: relative;
}

.btnNext > a > em::after,
.btnNext > button > em::after,
.btnNext > span > em::after{
  content: '';
  display: block;
  width: calc(100% + 0.4rem);
  height: calc(100% + 0.4rem);
  background: url("../img/icon_arrow_red.svg") center center no-repeat;
  background-size: auto 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-0.8rem,-0.4rem);
  transition: transform .3s ease;
}


@media (hover: hover) {
  .btnNext > a:hover,
  .btnNext > button:hover,
  .btnNext > span:hover{opacity: var(--hoverOpacity);}
  
  .btnNext > a:hover::after,
  .btnNext > button:hover::after,
  .btnNext > span:hover::after{
    transform: translate(0,0);
  }

  .btnNext > a:hover > em::after,
  .btnNext > button:hover > em::after,
  .btnNext > span:hover > em::after{
    transform: translate(-0.2rem,-0.2rem);
  }
  
}



/**************************************
#header
**************************************/
#header{
	display: block;
	width: 100%;
  height: 6rem;
  background-color: transparent;
  padding: 0 4rem;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  transition: background .6s ease,opacity .4s ease;
}

#wrap:not(.active) #header{
  opacity: 0;
}

#header.move{
  background-color: rgba(0, 183, 255, 0.8);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); 
}


#header > .inner{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0 4rem;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}


#header .headTTL{
  display: block;
  width: 16rem;
  position: absolute;
  left: 0;
  top: 0.5rem;
}

#header .headTTL > a,
#header .headTTL > a > img{
  display: block;
  width: 100%;
  height: auto;
}

#header .headLogo{
  display: block;
  width: 8.5rem;
  padding-top: 0.6rem;
}

#header .headLogo > a{
  display: block;
  width: 100%;
}

#header .headLogo img{
  display: block;
  width: 100%;
  height: auto;
}

/** headNav **************/
#headNav{
  display: block;
  height: 100%;
}

#headNav > .openBtn{
  display: none;
}


/** .navBox ****************/
#headNav > .navBox{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 50px;
  height: 100%;
}



#headNav > .navBox > ul.contentsNav{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 4rem;
}

#headNav > .navBox > ul.contentsNav > li{}

#headNav > .navBox > ul.contentsNav > li > a{
  font-family: var(--titleFont);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.12;
  font-weight: 400;
  text-align: right;
  text-decoration: none;
  color: #FFFFFF;
}

#headNav > .navBox > ul.contentsNav > li > a:hover{
  opacity: 1;
}


#headNav > .navBox > ul.contentsNav > li > a > span{
  display: inline-block;
}

@keyframes navHover {
  0% {transform: scaleY(1); color: #FFFFFF;}
  15% {transform: scaleY(0.6);}
  50% {transform: scaleY(1.6);}
  100% {transform: scaleY(1); color: #FFF1AC;}
}


#headNav > .navBox > ul.contentsNav > li > a:hover > span{
  animation: navHover 0.48s ease-out;
  animation-fill-mode: forwards;
}

#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(1){animation-delay: calc(0.06s * 1);}
#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(2){animation-delay: calc(0.06s * 2);}
#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(3){animation-delay: calc(0.06s * 3);}
#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(4){animation-delay: calc(0.06s * 4);}
#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(5){animation-delay: calc(0.06s * 5);}
#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(6){animation-delay: calc(0.06s * 6);}
#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(7){animation-delay: calc(0.06s * 7);}
#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(8){animation-delay: calc(0.06s * 8);}
#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(9){animation-delay: calc(0.06s * 9);}
#headNav > .navBox > ul.contentsNav > li > a:hover > span:nth-of-type(10){animation-delay: calc(0.06s * 10);}




#headNav > .navBox > ul.snsLinks{
  display: none;
}

#headNav > .navBox > ul.snsLinks > li{
}

#headNav > .navBox > ul.snsLinks > li  > a{
  display: block;
  height: 100%;
}

#headNav > .navBox > ul.snsLinks > li  > a > img{
  display: block;
  width: auto;
  height: 100%;
}

#headNav > .navBox > .whiteLogo{
  display: none;
}




/**************************************
footer
**************************************/
#footer{
	display: block;
	width: 100%;
	padding: 7rem 4rem 10rem;
  background: #00BCFF;
	position: relative; 
}


#footer .footLogo{
  display: block;
  width: 39.4rem;
  margin: 0 auto 3.6rem;
}
#footer .footLogo > a{
  width: 100%;
  text-decoration: none;
}

#footer .footLogo img{
  display: block;
  width: 100%;
  margin: 0 auto 2.4rem;
}

#footer .footLogo > a > span{
  display: block;
  text-align: center;
  line-height: 1;
  color: #FFFFFF;
  font-size: 3.2rem;
  font-weight: 500;
}

#footer ul.snsLinks{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 2.8rem;
  margin: 0 auto 3rem;
}

#footer ul.snsLinks > li{
  width: 10rem;
  height: 10rem;
}

#footer ul.snsLinks > li > a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 0.4rem solid #FFFFFF;
  border-radius: 50%;
}

#footer ul.snsLinks > li > a > img{
  display: block;
}

#footer ul.snsLinks > li > a > img[alt="X"]{
  width: 5.6rem;
}
#footer ul.snsLinks > li > a > img[alt="youtube"]{
  width: 6.4rem;
}


#footer .footCopy{
  font-size: 3.2rem;
  line-height: 2;
  color: #FFFFFF;
  font-weight: 500;
  text-align: center;
}



/**************************************
main
**************************************/
#main{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 14rem;
  overflow: hidden;
  background: #FFFFFF;
}

.secTTL{
  display: block;
  font-family: var(--titleFont);
  font-size: 12rem;
  color: #000000;
  line-height: 1;
  text-align: center;
}


/**************************************
MV
**************************************/
#mainVisual{
  display: block;
  width: 100%;
  padding-top: 8rem;
  padding-bottom: 6rem;
  position: relative;
  z-index: 1;
}

#mainVisual .cha{
  display: block;
  width: 100%;
  max-width: 1628px;
  max-height: 110vh;
  aspect-ratio: 1920 / 1478;
  margin: 0 auto 0;
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

#wrap:not(.active) #mainVisual .cha{
  height: 100vh;
}


#mainVisual .cha > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0px 0px 8px #FFFFFF);
  transition: transform .6s ease,opacity .6s ease;
}


#wrap:not(.active) #mainVisual .cha > img{
  opacity: 0;
  transform: translateY(6rem);
}


#mainVisual .bg{
  display: block;
  width: 100%;
  height: 108rem;
  max-height: 80vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#mainVisual .bgImg{
  display: block;
  width: 100%;
  height: 100%;
  max-height: 80vh;
  clip-path: inset(0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: height .4s ease;
}

#wrap:not(.active) #mainVisual .bgImg{
  max-height: 100vh;
  height: 100vh;
}

#mainVisual .bgImg::after {
  content: '';
  display: block;
  width: 100%;
  height: calc(80vh - 1rem);
  background: url("../img/mv_bg.jpg") center top no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transition: height .4s ease;
}

#wrap:not(.active) #mainVisual .bgImg::after{
  height: 100vh;
}

#mainVisual .bgImg::before {
  content: '';
  display: block;
  width: 100%;
  height: 18rem;
  background: url("../img/partition.svg") center bottom no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  transition: height .4s ease;
}

#wrap:not(.active) #mainVisual .bgImg::before{
  height: 0;
}

#mainVisual .bg::after{
  content: '';
  display: block;
  width: 100%;
  height: 1rem;
  background: #FFFFFF;
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  z-index: 2;
  transition: opacity .6s ease;
}

#wrap:not(.active) #mainVisual .bg::after{
  opacity: 0;
}



#mainVisual .text{
  display: block;
  width: 100%;
  padding-top: clamp(2rem, 64vh - 6rem, 84rem);
  position: relative;
  z-index: 4;
}


#mainVisual .mvTTL{
  display: block;
  max-width: 96rem;
  max-height: 32vh;
  aspect-ratio: 960 / 320;
  margin: 0 auto;
  transform: translateY(0) scale(1);
  transition: transform .6s ease;
}

#wrap:not(.start) #mainVisual .mvTTL{
  transform:  translateY(var(--mvTTLstartPosi)) scale(1.2);
}

#wrap:not(.active) #mainVisual .mvTTL{
  transform: translateY(var(--mvTTLstartPosi)) scale(1.2);
}


#mainVisual .mvTTL img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.9);
  }
}

#wrap.start:not(.active) #mainVisual .mvTTL img{
  animation: poyopoyo 1.8s ease-out infinite;
}


#mainVisual .text .date{
  display: block;
  margin-top: -1rem;
  transition: opacity .4s ease;
}

#wrap:not(.active) #mainVisual .date{
  opacity: 0;
}


#mainVisual .onStage{
  display: block;
  margin-bottom: 2rem;
  font-family: var(--titleFont);
  font-size: 14rem;
  line-height: 1;
  letter-spacing: -0.06em;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  color: #FC8596;
  -webkit-text-stroke-width: 3.4rem;
  -webkit-text-stroke-color: #FFFFFF;
  paint-order: stroke;
}

#mainVisual .onStage > span{
  display: block;
  font-size: 9rem;
}

#mainVisual .stage{
  display: block;
  margin-bottom: 1.5rem;
  line-height: 1;
  font-size: 9rem;
  font-weight: 800;
  text-align: center;
  color: #00BCFF;
  -webkit-text-stroke-width: 1.6rem;
  -webkit-text-stroke-color: #FFFFFF;
  paint-order: stroke;
}

#mainVisual .lede{
  display: block;
  line-height: 1;
  font-size: 4rem;
  font-weight: 800;
  text-align: center;
  color: #00BCFF;
  -webkit-text-stroke-width: 1rem;
  -webkit-text-stroke-color: #FFFFFF;
  paint-order: stroke;
}


#mainVisual .star{
  display: block;
}

#mainVisual .star > img{
  display: block;
  height: auto;
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

#mainVisual .star > img:nth-of-type(1){
  width: 19.7rem;
  transform: rotate(34deg);
  bottom: 16rem;
  right: calc(50% - 60rem);
}

#mainVisual .star > img:nth-of-type(2){
  width: 9.8rem;
  transform: rotate(-28deg);
  bottom: 8rem;
  right: calc(50% - 45rem);
}

#mainVisual .star > img:nth-of-type(3){
  width: 19.7rem;
  transform: rotate(15deg);
  bottom: 8rem;
  left: calc(50% - 56rem);
}

#mainVisual .star > img:nth-of-type(4){
  width: 9.8rem;
  transform: rotate(-28deg);
  bottom: 24rem;
  left: calc(50% - 58rem);
}


/**************************************
NEWS
**************************************/
#NEWS{
  display: block;
  width: 100%;
  margin-top: 6rem;
  position: relative;
  z-index: 1;
}

#NEWS::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #00BCFF;
  mask-image: url("../img/partition_wave.svg"),linear-gradient(#000, #000);
  mask-size: auto 5.8rem,100% calc(100% - 5rem);
  mask-position: 0 0,0 5rem,center bottom;
  mask-composite: add;
  mask-repeat: repeat-x,no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s ease;
}

#NEWS:not(.active)::after{
  clip-path: inset(0 100% 0 0);
}



#NEWS::before{
  content: '';
  display: block;
  width: 100%;
  height: 5.8rem;
  background: url("../img/partition_wave_white.svg") center bottom repeat-x;
  background-size: auto 100%;
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  z-index: 1;
}



/*inner************/
#NEWS .newsInner{
  padding-top: 7rem;
  padding-bottom: 20rem;
  mask-image: url("../img/partition_wave.svg"),linear-gradient(#000, #000);
  mask-size: auto 5.8rem,100% calc(100% - 5rem);
  mask-position: 0 0,0 5rem;
  mask-composite: add;
  mask-repeat: repeat-x,no-repeat;
  position: relative;
  z-index: 2;
  opacity: 1;
  transition: opacity .4s ease .2s;
}

#NEWS:not(.active) .newsInner{
  opacity: 0;
}


#NEWS .secTTL{
  margin-bottom: 8rem;
  color: #FFFFFF;
  position: relative;
  z-index: 3;
}


/* slider *****/
#newsSlider{
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

#newsSlider .container{
  width: 85rem;
  margin: 0 auto;
  overflow: visible;
}

#newsSlider .swiper-slide{
  display: block;
  width: 85rem;
  padding: 0 2.5rem;
}

#newsSlider .newsOutline{
  display: block;
  width: 100%;
  padding: 4rem;
  border: 4px dashed #FFFFFF;
  border-radius: 4rem;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); 
}

#newsSlider .newsOutline[data-modalset]{
  cursor: pointer;
  transition: var(--hoverTransition);
}


@media (hover: hover) {
  #newsSlider .newsOutline[data-modalset]:hover{opacity: var(--hoverOpacity);}
}


#newsSlider .newsOutline > picture{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 3rem;
  border-radius: 4rem;
  overflow: hidden;
}

#newsSlider .newsOutline > picture > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#newsSlider .newsOutline .text{
  display: block;
}

#newsSlider .newsOutline .text > time{
  display: block;
  line-height: 1;
  margin-bottom: 1rem;
  font-family: var(--titleFont);
  font-size: 2.8rem;
  font-weight: 400;
  text-align: left;
}


#newsSlider .newsOutline .text > p{
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  text-align: left;
  color: #333333;
  transform: rotate(0.03deg);
}


#newsSlider .controll{
  display: none;
}

#newsSlider ul.pager{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0 2rem;
  margin-top: 5rem;
}

#newsSlider ul.pager > li{
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0;
  opacity: 1;
  border-radius: 50%;
  background: #FFFFFF;
  transition: background .3s ease;
}

#newsSlider ul.pager > li.swiper-pagination-bullet-active{
  background: #F8B8B7;
}


/*bg**********/
@keyframes awa1 {
  0% {opacity: 0.8; transform: scale(0); }
  100% {opacity:0; transform: scale(40);}
}

@keyframes awa2 {
  0% {opacity: 0.8; transform: scale(0); }
  100% {opacity:0; transform: scale(60);}
}


#NEWS .newsBg{
  display: block;
  width: 100%;
  height: 100%;
  /*overflow: hidden;*/
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

#NEWS.active .newsBg > div{
  position: absolute;
}


#NEWS.active .newsBg > div.view::before{
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform-origin: center center;
  animation: awa1 8s linear infinite;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#NEWS.active .newsBg > div.view::after{
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform-origin: center center;
  animation: awa1 8s linear infinite;
  animation-delay: 0.5s;
  background: #00BCFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#NEWS .newsBg > div:nth-of-type(1){
  left: 30rem;
  top: 20rem;
}

#NEWS .newsBg > div:nth-of-type(2){
  right: 30rem;
  bottom: 20rem;
}

#NEWS .newsBg > div:nth-of-type(3){
  right: 50rem;
  bottom: 40rem;
}

#NEWS .newsBg > div:nth-of-type(4){
  left: 50rem;
  bottom: 30rem;
}

#NEWS .newsBg > div:nth-of-type(5){
  right: 20rem;
  top: 30rem;
}

#NEWS .newsBg > div:nth-of-type(6){
  right: 50rem;
  top: 20rem;
}


/**************************************
ABOUT
**************************************/
#ABOUT{
  display: block;
  width: 100%;
  padding: 12rem 4rem 12rem;
  position: relative;
  z-index: 3;
}


#ABOUT > .inner{
  display: block;
  width: 1000px;
  max-width: 140rem;
  margin: 0 auto;
  padding: 7rem 7rem 8rem;
  background: rgba(255,255,255,.4);
  border: 4px dotted #3B6FD8;
  border-radius: 4rem;
  position: relative;
  z-index: 2;  
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); 
  transition: opacity .4s ease,transform .4s ease;
}



#ABOUT:not(.active) > .inner{
  opacity: 0;
  transform: translateY(10rem);
}


#ABOUT .secTTL{
  margin-bottom: 4rem;
  color: #00AFEA;
  position: relative;
  z-index: 3;
  
  -webkit-text-stroke-width: 2rem;
  -webkit-text-stroke-color: #FFFFFF;
  paint-order: stroke;
}

#ABOUT .aboutDetail{text-align: center;}

#ABOUT .aboutDetail .catch{
  margin-bottom: 1rem;
  font-size: clamp(24px, 4rem, 40px);
  font-weight: 900;
  line-height: 1.4;
  color: #FC85C4;
  position: relative;
  transform: rotate(0.03deg);
  
  -webkit-text-stroke-width: 1rem;
  -webkit-text-stroke-color: #FFFFFF;
  paint-order: stroke;
}


#ABOUT .aboutDetail > p + .catch{
  margin-top: 4rem;
  padding-top: 4rem;
}

#ABOUT .aboutDetail > p + .catch::before{
  content: '';
  display: block;
  width: 80%;
  height: 4px;
  border-top: 4px dotted #C8F1FF;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

#ABOUT .aboutDetail > p{
  color: #333333;
  font-size: clamp(16px, 2.8rem, 28px);
  line-height: 2;
  font-weight: 500;
  transform: rotate(0.03deg);
  
  -webkit-text-stroke-width: 0.4rem;
  -webkit-text-stroke-color: #FFFFFF;
  paint-order: stroke;

}

#ABOUT .aboutDetail > p.last{
  margin-top: 2rem;
  font-size: clamp(24px, 4rem, 40px);
  font-weight: 800;
  color: #00AFEA;
  transform: rotate(0.03deg);
}

/*bg ************/
#ABOUT .aboutBg{
  display: block;
  width: 100%;
  height: calc(100% + 6rem + 100dvh);

  mask-image: url("../img/partition_wave_white.svg"), linear-gradient(#000, #000);
  mask-size: auto 5.8rem, 100% calc(100% - 6rem);
  mask-repeat: repeat-x,no-repeat;
  mask-position: center 0, 0 5rem;
  mask-composite: add;
  
  overflow: hidden;
  position: absolute;
  left: 0;
  top: -5.6rem;
  z-index: 1;
  pointer-events: none;
  transition: opacity .4s ease;
}



#ABOUT:not(.active) .aboutBg{
  opacity: 0;
}

#ABOUT{
  --aboutImgHeight: 16.9rem;
}

#ABOUT .aboutBg > .bgWrap{
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

#ABOUT .aboutBg > .bgWrap > img{
  display: block;
  width: 40rem;
  height: auto;
  aspect-ratio: 16 / 9;
  position: absolute;
  opacity: 0;
  left: 0;
}

#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(odd){
  animation: photoMove 20s linear infinite;
}
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(even){
  animation: photoMove 20s linear infinite reverse;
}


@keyframes photoMove {
  0% {transform: translate(-100%,0) rotateY(0deg); opacity: 0;}
  10% {transform: translate(calc(10vw - 80%),0) rotateY(0deg); opacity: 1;}
  20% {transform: translate(calc(20vw - 60%),0) rotateY(0deg); opacity: 1;}
  30% {transform: translate(calc(30vw - 40%),0) rotateY(0deg); opacity: 1;}
  40% {transform: translate(calc(40vw - 20%),0) rotateY(0deg); opacity: 1;}
  50% {transform: translate(calc(50vw - 0),0) rotateY(0deg); opacity: 1;}
  60% {transform: translate(calc(60vw + 20%),0) rotateY(0deg); opacity: 1;}
  70% {transform: translate(calc(70vw + 40%),0) rotateY(0deg); opacity: 1;}
  80% {transform: translate(calc(80vw + 60%),0) rotateY(0deg); opacity: 1;}
  90% {transform: translate(calc(90vw + 80%),0) rotateY(0deg); opacity: 1;}
  100% {transform: translate(calc(100vw + 100%),0) rotateY(0deg); opacity: 0;}
}



#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(1){
  width: 50rem;
  top: calc(50% - (var(--aboutImgHeight) / 2));
  z-index: 4;
}
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(2){
  width: 50rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) + var(--aboutImgHeight) * 1);
  animation-delay: 2s;
  z-index: 4;
}
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(3){
  width: 50rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) + var(--aboutImgHeight) * 1.8);
  animation-delay: 2.4s;
  z-index: 4;
}
/**/
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(4){
  width: 40rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) - var(--aboutImgHeight) * 1);
  animation-delay: 0.1s;
  z-index: 3;
}
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(5){
  width: 40rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) - var(--aboutImgHeight) * 2);
  animation-delay: 1.5s;
  z-index: 3;
}
/**/
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(6){
  width: 40rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) + var(--aboutImgHeight) * 3);
  animation-delay: 3.6s;
  z-index: 3;
}
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(7){
  width: 40rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) + var(--aboutImgHeight) * 0.5);
  animation-delay: 6.8s;
  z-index: 3;
}
/**/
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(8){
  width: 30rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) - var(--aboutImgHeight) * 2);
  animation-delay: 1.7s;
  z-index: 2;
}
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(9){
  width: 30rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) - var(--aboutImgHeight) * 2.4);
  animation-delay: 6s;
  z-index: 2;
}
/**/
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(10){
  width: 30rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) + var(--aboutImgHeight) * 1.6);
  animation-delay: 8s;
  z-index: 2;
}
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(11){
  width: 30rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) + var(--aboutImgHeight) * 2.3);
  animation-delay: 12s;
  z-index: 2;
}
/**/
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(12){  
  width: 20rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) - var(--aboutImgHeight) * 0.5);
  animation-delay: 3.3s;
  z-index: 1;
}
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(13){
  width: 20rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) - var(--aboutImgHeight) * 2.5);
  animation-delay: 10s;
  z-index: 1;
}
/**/
#ABOUT.active .aboutBg > .bgWrap > img:nth-of-type(14){
  width: 20rem;
  top: calc(50% - (var(--aboutImgHeight) / 2) - var(--aboutImgHeight) * 1.5);
  animation-delay: 5.8s;
  z-index: 1;
}







/**************************************
CAST
**************************************/
#CAST{
  display: block;
  width: 100%;
  padding-top: 7rem;
  padding-bottom: 20rem;
  position: relative;
  z-index: 4;
  background: #00BCFF;
  mask-image: url("../img/partition_wave.svg"),linear-gradient(#000, #000);
  mask-size: auto 5.8rem,100% calc(100% - 5rem);
  mask-position: 0 0,0 5.8rem,center bottom;
  mask-composite: add;
  mask-repeat: repeat-x,no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s ease;
}

#CAST:not(.active){
  clip-path: inset(0 0 0 100%);
}


#CAST::after{
  content: '';
  display: block;
  width: 100%;
  height: 5.583rem;
  background: url("../img/partition_wave_white.svg") right top repeat-x;
  background-size: auto 100%;
  position: absolute;
  bottom: -0.5rem;
  left: 0;
}

#CAST .secTTL{
  margin-bottom: 10rem;
  color: #FFFFFF;
  position: relative;
  z-index: 3;
}


#castList{
  display: block;
  width: 100%;
  max-width: calc(1460px + 8rem);
  padding: 0 8rem;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

#castList > ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 6rem 0;
}

#castList > ul > li{
  display: block;
  width: 33.333333333333333%;
  padding: 0 0;
  transition: opacity 0.3s ease 0.6s, transform 0.3s ease 0.6s;
}

#castList > ul > li:nth-of-type(2){ transition-delay: calc(0.6s + 0.2s * 1);}
#castList > ul > li:nth-of-type(3){ transition-delay: calc(0.6s + 0.2s * 2);}
#castList > ul > li:nth-of-type(4){ transition-delay: calc(0.6s + 0.2s * 3);}
#castList > ul > li:nth-of-type(5){ transition-delay: calc(0.6s + 0.2s * 4);}
#castList > ul > li:nth-of-type(6){ transition-delay: calc(0.6s + 0.2s * 5);}
#castList > ul > li:nth-of-type(7){ transition-delay: calc(0.6s + 0.2s * 6);}
#castList > ul > li:nth-of-type(8){ transition-delay: calc(0.6s + 0.2s * 7);}
#castList > ul > li:nth-of-type(9){ transition-delay: calc(0.6s + 0.2s * 8);}
#castList > ul > li:nth-of-type(10){ transition-delay: calc(0.6s + 0.2s * 9);}


#CAST:not(.active) #castList > ul > li{
  opacity: 0;
  transform: rotate(3deg) translate(0,-6rem);
}


#castList > ul > li:nth-of-type(4),
#castList > ul > li:nth-of-type(5),
#castList > ul > li:nth-of-type(9),
#castList > ul > li:nth-of-type(10){
  width: 50%;
  padding: 0 0;
}

#castList > ul > li > .outer{
  display: block;
  width: 87%;
  margin: 0 auto;
  padding: 1rem 1rem 2.8rem;
  background: #FFFFFF;
  box-shadow: 2rem 2rem 1rem rgba(0,0,0,.16);
  cursor: pointer;
  position: relative;
  transition: transform .3s ease;
}

#castList > ul > li:nth-of-type(4) > .outer,
#castList > ul > li:nth-of-type(5) > .outer,
#castList > ul > li:nth-of-type(9) > .outer,
#castList > ul > li:nth-of-type(10) > .outer{
  width: 58%;
}


#castList > ul > li:nth-of-type(4) > .outer,
#castList > ul > li:nth-of-type(9) > .outer{
  margin-left: auto;
  margin-right: 4.34782608695652%;
}

#castList > ul > li:nth-of-type(5) > .outer,
#castList > ul > li:nth-of-type(10) > .outer{
  margin-left: 4.34782608695652%;
  margin-right: auto;
}


#castList > ul > li:nth-of-type(1) > .outer{transform: rotate(-10deg);}
#castList > ul > li:nth-of-type(2) > .outer{transform: rotate(3deg);}
#castList > ul > li:nth-of-type(3) > .outer{transform: rotate(-6deg);}
#castList > ul > li:nth-of-type(4) > .outer{transform: rotate(7deg);}
#castList > ul > li:nth-of-type(5) > .outer{transform: rotate(-6deg);}
#castList > ul > li:nth-of-type(6) > .outer{transform: rotate(6deg);}
#castList > ul > li:nth-of-type(7) > .outer{transform: rotate(4deg);}
#castList > ul > li:nth-of-type(8) > .outer{transform: rotate(-8deg);}
#castList > ul > li:nth-of-type(9) > .outer{transform: rotate(-12deg);}
#castList > ul > li:nth-of-type(10) > .outer{transform: rotate(12deg);}

#castList > ul > li > .outer.active,
#castList > ul > li > .outer:hover{
  transform: rotate(0) scale(1.2);
  z-index: 3;
}

#castList > ul > li > .outer::before{
  content: '';
  display: block;
  width: calc(100% - 2rem);
  aspect-ratio: 1 / 1;
  background: url("../img/cha/bg_cha.jpg") center center no-repeat;
  background-size: cover;
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
}

#castList > ul > li > .outer > figure{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  transition: transform 0.6s ease,opacity 0.6s ease;
}

#castList > ul > li > .outer > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#castList > ul > li > .outer > figure:nth-of-type(2){
  opacity: 0;
  width: calc(100% - 2rem);
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
}

#castList > ul > li > .outer:hover{
  opacity: 1;
}

#castList > ul > li > .outer.active > figure:nth-of-type(1),
#castList > ul > li > .outer:hover > figure:nth-of-type(1){opacity: 0; transform: rotateY(360deg);}
#castList > ul > li > .outer.active > figure:nth-of-type(2),
#castList > ul > li > .outer:hover > figure:nth-of-type(2){opacity: 1; transform: rotateY(360deg);}


#castList > ul > li > .outer > p{
  text-align: center;
  font-size: 2.6rem;
  font-weight: 700;
  color: #FC85C4;
  transform: rotate(0.03deg);
}




#CAST .castbg{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}


#CAST .castbg .bgImg{
  display: block;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#CAST .castbg .bgImg::after {
  content: '';
  display: block;
  width: 100%;
  height: 100vh;
  opacity: .4;
  background: url("../img/bg_wave.svg") center top no-repeat;
  background-size: 200%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

#CAST .castbg::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(#00BCFF, rgba(0,188,255, 0));
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}


#CAST .castAwa{
  display: block;
  width: 100%;
  height: 100%;
  /*overflow: hidden;*/
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

#CAST .castAwa > div{
  position: absolute;
}


#CAST .castAwa > div.view::before{
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform-origin: center center;
  animation: awa1 8s linear infinite;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#CAST .castAwa > div.view::after{
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform-origin: center center;
  animation: awa1 8s linear infinite;
  animation-delay: 0.5s;
  background: #00BCFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#CAST .castAwa > div:nth-of-type(1){
  left: 30rem;
  top: 20rem;
}

#CAST .castAwa > div:nth-of-type(2){
  right: 30rem;
  bottom: 20rem;
}

#CAST .castAwa > div:nth-of-type(3){
  right: 50rem;
  bottom: 100rem;
}

#CAST .castAwa > div:nth-of-type(4){
  left: 50rem;
  bottom: 30rem;
}

#CAST .castAwa > div:nth-of-type(5){
  right: 20rem;
  top: 30rem;
}

#CAST .castAwa > div:nth-of-type(6){
  right: 50rem;
  top: 20rem;
}

#CAST .castAwa > div:nth-of-type(7){
  right: 10rem;
  bottom: 60rem;
}

#CAST .castAwa > div:nth-of-type(8){
  right: 30rem;
  bottom: 80rem;
}

#CAST .castAwa > div:nth-of-type(9){
  left: 10rem;
  bottom: 40rem;
}

#CAST .castAwa > div:nth-of-type(10){
  right: 10rem;
  top: 40rem;
}

#CAST .castAwa > div:nth-of-type(11){
  left: 14rem;
  top: 50%;
}

#CAST .castAwa > div:nth-of-type(12){
  right: 12rem;
  top: 38%;
}

#CAST .castAwa > div:nth-of-type(13){
  left: 20rem;
  top: 36%;
}

#CAST .castAwa > div:nth-of-type(14){
  right: 22rem;
  top: 24%;
}




/**************************************
TICKET
**************************************/
#TICKET{
  display: block;
  width: 100%;
  min-height: 90rem;
  padding: 15rem 8rem 10rem;
  position: relative;
  z-index: 6;
  transition: transform .4s ease,opacity .4s ease;
}

#TICKET:not(.active){
  opacity: 0;
  transform: translateY(6rem);
}


#TICKET .secTTL{
  margin-bottom: 6rem;
  color: #00AFEA;
  position: relative;
  z-index: 3;
}


#TICKET .ticketList{
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

#TICKET .ticketList > picture,
#TICKET .ticketList> picture img{
  display: block;
  width: 100%;
  max-width: 1400px;
  height: auto;
  margin: 0 auto;
}

#TICKET .ticketList > picture{
  border-radius: 4rem;
  overflow: hidden;
}

#TICKET .ticketList > picture + picture{
  margin-top: 3rem;
}


#TICKET .ticketList > ul{
  display: block;
}

#TICKET .ticketList > ul > li{
  width: 100%;
  position: relative;
  z-index: 1;
}

#TICKET .ticketList > ul > li + li{
  margin-top: 3rem;
}

#TICKET .ticketList > ul > li > .outer{
  display: block;
  width: 100%;
  aspect-raito: 16 / 9;
  overflow: hidden;
}

#TICKET .ticketList > ul > li > .outer > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#TICKET .ticketList > ul > li.soldOut::before{
  content: 'SOLD OUT';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  font-family: var(--titleFont);
  font-size: 6rem;
  letter-spacing: -0.09em;
  font-weight: 400;
  text-align: center;
  color: #FFFFFF;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}


#TICKET .btnNext{
  width: 56rem;
  margin: 8rem auto;
}





/**************************************
GOODS
**************************************/
#GOODS{
  display: block;
  width: 100%;
  padding: 7rem 8rem 10rem;
  margin-top: 10rem;
  position: relative;
  z-index: 1;
}

#GOODS::before{
  content: '';
  display: block;
  width: 100%;
  height: 5.583rem;
  background: url("../img/partition_wave_yellow.svg") left top repeat-x;
  background-size: auto 100%;
  position: absolute;
  top: -5rem;
  left: 0;
  transition: transform .4s ease,opacity .4s ease;
}

#GOODS:not(.active)::before{
  opacity: 0;
  transform: translateY(6rem);
}


#GOODS .secTTL{
  margin-bottom: 6rem;
  color: #FFB205;
  position: relative;
  z-index: 3;
  transition: transform .4s ease .4s,opacity .4s ease .4s;
}

#GOODS:not(.active) .secTTL{
  opacity: 0;
  transform: translateY(6rem);
}


#goodsList{
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  transition: transform .4s ease .4s,opacity .4s ease .4s;
}

#GOODS:not(.active) #goodsList{
  opacity: 0;
  transform: translateY(6rem);
}

#goodsList > picture,
#goodsList > picture img{
  display: block;
  width: 100%;
  max-width: 1400px;
  height: auto;
  margin: 0 auto;
}

#goodsList > picture{
  border-radius: 4rem;
  overflow: hidden;
}

#goodsList > picture + picture{
  margin-top: 3rem;
}

#goodsList > ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 6rem 6rem;
}

#goodsList > ul > li{
  width: calc((100% - 12rem) / 3);
}

#goodsList > ul > li > .outer{
  display: block;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  color: #FFFFFF;
  font-size: 4.2rem;
  box-shadow: 2rem 2rem 1rem rgba(0,0,0,.16);
}

#goodsList > ul > li > .outer[data-modalset]{
  cursor: pointer;
}


#goodsList > ul > li > .outer > figure{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 1rem;
}
#goodsList > ul > li > .outer > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#goodsList > ul > li > .outer > p{
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  text-align: center;
  color: #333333;
  transform: rotate(0.03deg);
}


#GOODS .goodsBG{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: transform .4s ease,opacity .4s ease;
}

#GOODS:not(.active) .goodsBG{
  opacity: 0;
  transform: translateY(6rem);
}

#GOODS .goodsBG .bgImg{
  display: block;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#GOODS .goodsBG .bgImg::after {
  content: '';
  display: block;
  width: 100%;
  height: 100vh;
  opacity: .4;
  background: url("../img/bg_goods.jpg") center top no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

#GOODS .goodsBG::before{
  content: '';
  display: block;
  width: 100%;
  height: 29rem;
  background: linear-gradient(#F6E6CF, rgba(246,230,207, 0));
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

#GOODS .btnNext{
  width: 56rem;
  margin: 8rem auto;
  position: relative;
  z-index: 2;
}


/**************************************
ATTENTION
**************************************/
#ATTENTION{
  display: block;
  width: 100%;
  padding: 12rem 8rem 8rem;
  position: relative;
  z-index: 1;
  transition: transform .4s ease,opacity .4s ease;
}

#ATTENTION:not(.active){
  opacity: 0;
  transform: translateY(6rem);
}


#ATTENTION > .inner{
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 7rem 7rem 8rem;
  background: rgba(255,255,255,.1);
  border: 4px dotted #F291BB;
  border-radius: 4rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); 
  transition: opacity .4s ease,transform .4s ease;
}



#ATTENTION .secTTL{
  font-size: 6rem;
  margin-bottom: 6rem;
  color: #F291BB;
  position: relative;
  z-index: 3;
}

#ATTENTION .attentionTxt{
  display: block;
}

#ATTENTION .attentionTxt > dl{
  display: block;
}

#ATTENTION .attentionTxt > dl + dl{
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: 1px solid #666666;
  text-align: left;
}

#ATTENTION .attentionTxt > dl > dt{
  margin-bottom: 2rem;
  font-size: clamp(18px, 2.8rem, 28px);
  font-weight: 700;
  transform: rotate(0.03deg);
}

#ATTENTION .attentionTxt > dl > dd{
  padding-left: calc(1em + 1rem);
  font-size: clamp(14px, 2.4rem, 24px);
  line-height: 1.8;
  font-weight: 400;
  position: relative;
  transform: rotate(0.03deg);
}

#ATTENTION .attentionTxt > dl > dd::before{
  content: '●';
  position: absolute;
  left: 0;
  top: 0;
}

#ATTENTION .attentionTxt > dl > dd + dd{
  margin-top: 1em;
}

#ATTENTION .attentionTxt > dl > dd .dotList{
  text-indent: -1em;
  padding-left: 1em;
}


/**************************************
fixedBtn
**************************************/
#fixedBtn{
  display: block;
  position: relative;
  z-index: 100;
}


#fixedBtn > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 34rem;
  height: 8rem;
  background: linear-gradient(to right,#f83600,#f9d423);
  background-size: 200% auto;
  background-position: 100% center;
  border-radius: 6.9rem;
  padding: 0 0 0 0;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: fixed;
  right: 4rem;
  bottom: 4rem;
  cursor: pointer;
  transition: background .3s ease,border .3s ease,transform .4s ease,opacity .4s ease;
}

#wrap:not(.active) #fixedBtn > a{transform: translateY(100%); opacity: 0;}

#fixedBtn > a::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6.9rem;
  border: 1px solid #EC3785;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(.4rem,.4rem);
  transition: transform .3s ease;
  pointer-events: none;
}

#fixedBtn > a > em{
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background: url("../img/icon_arrow_white.svg") center center no-repeat;
  background-size: auto 100%;
  position: relative;
}

#fixedBtn > a > em::after{
  content: '';
  display: block;
  width: calc(100% + 0.2rem);
  height: calc(100% + 0.2rem);
  background: url("../img/icon_arrow_red.svg") center center no-repeat;
  background-size: auto 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-0.4rem,-0.4rem);
  transition: transform .3s ease;
}


@media (hover: hover) {
  #fixedBtn > a:hover{
    opacity: 1;
    background-position: 0 center;
  }
  #fixedBtn > a:hover::after{
    transform: translate(0,0);
  }

  #fixedBtn > a:hover > em::after{
    transform: translate(-0.1rem,-0.1rem);
  }
  
}


/**************************************
modal
**************************************/

#main [data-modaldetail]{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem 0;
  height: 100dvh;
  width: 100vw;
  max-width: calc(900px + 8rem);
  padding: 0 4rem;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: -1;
  transition: opacity 0.2s ease;
  transform: translate(100%,0);
  backface-visibility: hidden;
  pointer-events: none;
}

#main [data-modaldetail].open{
  z-index: 1004;
  opacity: 1;
  transform: translate(-50%,0);
}


#main [data-modaldetail] > .inner{
  order: 2;
  display: block;
  width: 100%;
  max-height: calc(90vh - 4rem - 3rem);
  margin: 0 auto 4rem;
  padding: 4rem 4rem 6rem;
  border-radius: 2rem;
  background: #FFFFFF;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  pointer-events: auto;
}


#main [data-modaldetail] > .inner > picture{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 2rem;
}
#main [data-modaldetail] > .inner > picture > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#main [data-modaldetail] > .inner > .text{
  display: block;
}

#main [data-modaldetail] > .inner > .text > time{
  display: block;
  line-height: 1;
  margin-bottom: 1rem;
  font-family: var(--titleFont);
  font-size: clamp(18px, 2.8rem, 28px);
  font-weight: 900;
  text-align: left;
}

#main [data-modaldetail] > .inner > .text > .ttl{
  display: block;
  font-size: clamp(18px, 2.8rem, 28px);
  font-weight: 800;
  margin-bottom: 1.2rem;
  text-align: left;
  color: #333333;
  transform: rotate(0.03deg);
}



#main [data-modaldetail] > .inner > .text > .detail{
  display: block;
  font-size: clamp(16px, 2.4rem, 24px);
  font-weight: 400;
  text-align: left;
  color: #333333;
  transform: rotate(0.03deg);
}

#main [data-modaldetail] > .inner > .text > .detail > .subttl{
  display: block;
  font-size: clamp(16px, 2.4rem, 24px);
  font-weight: 800;
  margin-bottom: 1.2rem;
  text-align: left;
  color: #333333;
  transform: rotate(0.03deg);
}
#main [data-modaldetail] > .inner > .text > .detail > p + .subttl{
  margin-top: 3rem;
}

#main [data-modaldetail] > .inner > .text > .detail > .newsInPic{
  display: block;
  width: 100%;
  height: auto;
  margin: 2rem auto 4rem;
}

#main [data-modaldetail] > .inner > .text > .detail > .newsInPic > img{
  display: block;
  width: 100%;
  height: auto;
}
#main [data-modaldetail] > .inner > .text > .detail > .newsInPic > img + img{
  margin-top: 1rem;
}

#main [data-modaldetail] > .inner > .text > .detail > ul.newsCautionList{
  display: block;
}
#main [data-modaldetail] > .inner > .text > .detail > ul.newsCautionList > li{
  display: block;
  font-size: clamp(14px, 2rem, 20px);
  text-align: left;
  padding-left: 1em;
  text-indent: -1em;
  color: #333333;
  transform: rotate(0.03deg);
}
#main [data-modaldetail] > .inner > .text > .detail > ul.newsCautionList > li + li{
  margin-top: 0.5em;
}
#main [data-modaldetail] > .inner > .text > .detail > ul.newsCautionList > li > .caution{
  display: block;
  margin-top: 0.2em;
  font-size: 80%;
  text-align: left;
  padding-left: 1em;
  text-indent: -1em;
}

#main [data-modaldetail] > .inner > .text > .detail > p + p,
#main [data-modaldetail] > .inner > .text > .detail > .newsCautionList + p,
#main [data-modaldetail] > .inner > .text > .detail > p + .newsCautionList{
  margin-top: 1em;
}

#main [data-modaldetail] > .inner > .text > .detail > .btnNext + p{
  margin-top: 2em;
}



#main [data-modaldetail] .btnNext{
  margin: 4rem auto 0;
  max-width: 80%;
}


#main [data-modaldetail] .closeBtn{
  order: 1;
  display: block;
  width: 2rem;
  height: 2rem;
  background: url("../img/icon_close.svg") center center no-repeat;
  background-size: 100% auto;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/*cast *******/
#main #castDetailList [data-modaldetail] > .inner{
  padding: 4rem 6rem 4rem 0;
}

#main [data-modaldetail] .castText{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 80rem;
  padding-left: 40rem;
  background-size: 60rem auto;
  background-repeat: no-repeat;
  background-position: -10rem center;
}


#main [data-modaldetail="nonochi"] .castText{ background-image: url("../img/cha/cha_nonochi_more.png");}
#main [data-modaldetail="nina"] .castText{ background-image: url("../img/cha/cha_nina_more.png");}
#main [data-modaldetail="ahiru"] .castText{ background-image: url("../img/cha/cha_ahiru_more.png");}
#main [data-modaldetail="serena"] .castText{ background-image: url("../img/cha/cha_serena_more.png");}
#main [data-modaldetail="remu"] .castText{ background-image: url("../img/cha/cha_remu_more.png");}
#main [data-modaldetail="oto"] .castText{ background-image: url("../img/cha/cha_oto_more.png");}
#main [data-modaldetail="sui"] .castText{ background-image: url("../img/cha/cha_sui_more.png");}
#main [data-modaldetail="ume"] .castText{ background-image: url("../img/cha/cha_ume_more.png");}
#main [data-modaldetail="morufu"] .castText{ background-image: url("../img/cha/cha_morufu_more.png");}
#main [data-modaldetail="raimu"] .castText{ background-image: url("../img/cha/cha_raimu_more.png");}


#main [data-modaldetail] .castTTL{
  display: block;
  margin-bottom: 4rem;
  font-size: clamp(32px, 6rem, 60px);
  font-weight: 700;
  line-height: 1.2;
  color: #FC85C4;
  transform: rotate(0.03deg);
}

#main [data-modaldetail] .castLede{
  display: block;
  font-size: clamp(16px, 2.4rem, 24px);
  font-weight: 400;
  line-height: 1.6;
  color: #333333;
  transform: rotate(0.03deg);
}

#main [data-modaldetail] ul.castLinks{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 0 2.8rem;
  margin: 4rem 0;
}

#main [data-modaldetail] ul.castLinks > li{
  width: 10rem;
  height: 10rem;
}

#main [data-modaldetail] ul.castLinks > li > a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #FC85C4;
  border-radius: 50%;
}

#main [data-modaldetail] ul.castLinks > li > a > img{
  display: block;
}

#main [data-modaldetail] ul.castLinks > li > a > img[alt="X"]{
  width: 5.6rem;
}
#main [data-modaldetail] ul.castLinks > li > a > img[alt="youtube"]{
  width: 6.4rem;
}



/* modal BG*****/
#modalBG{
  display: block;
  width: 100%;
  height: 100dvh;
  width: 100vw;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  transition: backdrop-filter 0.3s ease,opacity 0.2s ease;
  transform: translate(100%,0);
  backface-visibility: hidden;
  pointer-events: none;
}

#modalBG.open{
  z-index: 1003;
  opacity: 1;
  transform: translate(0,0);
  pointer-events: auto;
}


/**************************************
lineBlock
**************************************/
.lineBlock{
  /*
  height: 1rem;
  background: #333333;
  */
  position: relative;
  pointer-events: none;
  z-index: 1;
}

.lineBlock .left,
.lineBlock .right{
  position: absolute;
  width: 0;
  width: 200vw;
  overflow: hidden;
  transition: clip-path 2s ease;
}

.lineBlock .left{
  transform-origin: top left;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  top: 0;
  left: 0;
}


.lineBlock .right{
  transform-origin: 100% 0%;
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
  top: 0;
  right: 0;
}


#wrap.active .lineBlock .left.view,
#wrap.active .lineBlock .right.view{
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

.line01{
  z-index: 1;
  transform: translate(0,-40rem);
}
.line01 .left{
  width: 234rem;
  height: 3rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%238AE0FF' /%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 6rem 3rem;
  transform: rotate(42deg);
}

.line02{
  z-index: 1;
  transform: translate(0,-140rem);
}
.line02 .right{
  height: 5rem;
  border-top: 2rem solid #8AE0FF;
  border-bottom: 1rem solid #CBF1FF;
  transform: rotate(-33deg);
}

.line03{
  z-index: 1;
  transform: translate(0,0);
}
.line03 .left{
  padding-top: 0.6rem;
  height: 8.5rem;
  border-top: 2rem solid #8AE0FF;
  border-bottom: 0.8rem solid #8AE0FF;
  transform: rotate(28deg);
}
.line03 .left > span{
  display: block;
  height: 0.5rem;
  background: #CBF1FF;
}

.line04{
  z-index: 2;
  transform: translate(0,50rem);
}
.line04 .right{
  height: 3rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%238AE0FF' /%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 6rem 3rem;
  transform: rotate(-22deg);
}

.line05{
  z-index: 1;
  transform: translate(0,-170rem);
}
.line05 .left{
  height: 13rem;
  border-top: 8rem solid rgba(255,255,255,.9);
  border-bottom: 1rem solid rgba(255,255,255,.7);
  transform: rotate(31deg);
}

.line06{
  z-index: 1;
  transform: translate(0,-120rem);
}
.line06 .right{
  height: 9rem;
  border-top: 1rem solid rgba(255,255,255,.3);
  border-bottom: 4rem solid rgba(255,255,255,.6);
  transform: rotate(-28deg);
}


.line07{
  z-index: 5;
  transform: translate(60%,-3rem);
}

.line07 .left{
  height: 3rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%238AE0FF' /%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 6rem 3rem;
  transform: rotate(44deg);
}


.line08{
  z-index: 2;
  transform: translate(0, 40rem);
}
.line08 .right{
  height: 5rem;
  border-top: 2rem solid #8AE0FF;
  border-bottom: 1rem solid #CBF1FF;
  transform: rotate(-27deg);
}


.line09{
  z-index: 1;
  transform: translate(-8rem, -50rem);
}
.line09 .left{
  height: 6rem;
  border-top: 2.3rem solid #FFE19C;
  border-bottom: 1.1rem solid #FFF9EC;
  transform: rotate(46deg);
}


.line10{
  z-index: 1;
  transform: translate(8rem, 10rem);
}

.line10 .right{
  height: 5rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23FFC267' /%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 10rem 5rem;
  transform: rotate(-36deg);
}



/**************************************
orverRide
**************************************/
.spView{display: none!important;}