@charset "utf-8";
/* CSS Document */

.kura_wrap{
  position: relative;
  background: url("../img/il_dot_bg.png") left top repeat;
  background-color: #1DA1F2;
  overflow: hidden;
}

.kura_head{
  position: relative;
  height: 1080px;
  background-image: url("../img/il_top_right.png"), url("../img/il_top_left.png"), url("../img/ph_topbg_stu2023.png") , url("../img/il_topbg01.png");
  background-repeat: no-repeat;
  background-position: center top, center top, center 464px , center top;
}

/*head部のabsolute画像*/
.kura_head img{position: absolute;}

.kura_img01{
  top: 497px;
  left: calc(50% - 670px);
  animation: img1 0.5s linear infinite;
}
.kura_img02{
  top: 670px;
  left: calc(50% + 622px);
  animation: img2 0.25s linear infinite;
}
.kura_img03{
  top: 99px;
  left: calc(50% + 792px);
  animation: img3 2s linear 0.2s infinite;
}
.kura_img04{
  top: 334px;
  left: calc(50% - 955px);
  animation: img4 0.25s linear infinite;
}
.kura_img05{
  top: 662px;
  left: calc(50% + 475px);
  z-index: 10;
  animation: img5 1s linear infinite;
}
.kura_img06{
  top: 685px;
  left: calc(50% - 500px);
  animation: img6 4s linear infinite;
}


.kura_imgoa_not{
  width: 350px;
  top: 348px;
  left: calc(50% - 440px);
}
.kura_imgoa_bg{
  top: 368px;
  left: calc(50% - 293px);
}
.kura_clkhr1{
  width: 200px;
  top: 553px;
  left: calc(50% - 571px);
  border-radius: 20px;
  background-color: rgba(255,255,255,0.75);
  box-shadow: 0 0 15px #FFFFFF;
}
.kura_clkhr2{
  width: 200px;
  top: 545px;
  left: calc(50% + 306px);
  border-radius: 20px;
  background-color: rgba(255,255,255,0.75);
  box-shadow: 0 0 15px #FFFFFF;
}

.kura_imgkato{
  position: absolute;
  top: 582px;
  left: calc(50% + 253px);
  width:326px;
}
.kura_imgkato.clk{
  left: calc(50% + 140px);
  width:576px;
}
.kura_imgkato img{max-width: 100%;}
.kura_imgnakashi{
  position: absolute;
  top: 582px;
  left: calc(50% - 619px);
  width:310px;
}
.kura_imgnakashi.clk{
  top: 602px;
  left: calc(50% - 819px);
  width:650px;
}
.kura_imgnakashi img{max-width: 100%;}

.kura_head p img:last-of-type{display: none;}
.kura_head p.clk img:first-of-type{display: none;}
.kura_head p.clk img:last-of-type{display: inline;}

.kura_head audio{height: 0;width: 0;}

.kura_month10{
  width: 46px;
  top: 349px;
  left: calc(50% - 384px);
}
.kura_month{
  width: 46px;
  top: 349px;
  left: calc(50% - 344px);
}
.kura_date10{
  width: 46px;
  top: 346px;
  left: calc(50% - 248px);
}
.kura_date1{
  width: 40px;
  top: 349px;
  left: calc(50% - 202px);
}
.kura_hour1{
  width: 24px;
  top: 424px;
  left: calc(50% - 177px);
}
.kura_min10{
  width: 24px;
  top: 424px;
  left: calc(50% - 127px);
}
.kura_min1{
  width: 24px;
  top: 424px;
  left: calc(50% - 107px);
}

.kura_caution{
  top: 426px;
  left: calc(50% - 410px);
}


@keyframes img1{
  0%{transform: translate(5px, -4px);}
  25%{transform: translate(5px, 0);}
  50%{transform: translate(0, 0);}
  75%{transform: translate(0, -4px);}
  100%{transform: translate(5px, -4px);}
}
@keyframes img2{
  0%{transform: translate(0px)}
  50%{transform: translate(5px)}
  100%{transform: translate(0px)}
}
@keyframes img3 {
  0% {transform: scale(1.0, 1.0) translate(0%, 0%);}
  2% {transform: scale(1.1, 0.9) translate(0%, 5%);}
  8% {transform: scale(1.2, 0.8) translate(0%, 10%);}
  16% {transform: scale(1.0, 1.0) translate(0%, 0%);}
  24% {transform: scale(0.9, 1.2) translate(0%, -20%);}
  32% {transform: scale(0.9, 1.1) translate(0%, -10%);}
  40% {transform: scale(1.1, 0.9) translate(0%, 10%);}
  48% {transform: scale(1.0, 1.0) translate(0%, 0%);}
  100% {transform: scale(1.0, 1.0) translate(0%, 0%);}
}
@keyframes img5{
  0%{transform: rotate(15deg);}
  25%{transform: rotate(0);}
  50%{transform: rotate(-15deg);}
  75%{transform: rotate(0);}
  100%{transform: rotate(15deg);}
}
@keyframes img6 {
  0% {transform: rotate(0) translate(0, 0);}
  25% {transform: rotate(10deg) translate(-15px, 0);}
  50% {transform: rotate(0) translate(0, 0);}
  75% {transform: rotate(-10deg) translate(18px, -5px);}
  100% {transform: rotate(0) translate(0, 0);}
}

/*head画像ここまで*/

.kura_navi{
  position: relative;
  max-width: 1318px;
  height: 258px;
  margin: -300px auto 0;
  padding: 20px 180px 0;
  background: url("../img/il_navibg.png") center center no-repeat;
  z-index: 200;
}
.kura_navi ul{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 50px;
  height: 100%;
}
.kura_navi ul a{display: block;}
.kura_navi ul a img{max-width: 100%;}
.kura_navi a:hover{opacity: 0.7;}
.kura_noevt{
  pointer-events: none;
  opacity: 0.3;
}




/*body横のabsolute画像*/
.kura_imagebox img{position: absolute;}
.kura_bodyimg01{/*リス*/
  top: 983px;
  left: 110%;
  animation: bodyimg01 4s linear infinite;
}
.kura_bodyimg01_2{/*バーガー*/
  top: 1215px;
  left: calc(50% - 907px);
}
.kura_bodyimg02{/*ギター女*/
  top: 1379px;
  left: calc(50% - 789px);
  animation: bodyimg02 2s linear infinite;
}
.kura_bodyimg03{/*ギターぼうず*/
  top: 1734px;
  left: calc(50% - 917px);
}
.kura_bodyimg04{/*トマト*/
  top: 1996px;
  left: calc(50% - 760px);
  animation: bodyimg04 1.5s linear infinite;
}
.kura_bodyimg05{/*女子高生*/
  top: 2148px;
  left: calc(50% - 795px);
  animation: bodyimg05 4s linear infinite;
}
.kura_bodyimg06{/*犬*/
  top: 2472px;
  left: calc(50% - 893px);
}

.kura_bodyimg07{/*ソフトクリーム*/
  top: 983px;
  left: calc(50% + 623px);
  animation: bodyimg07 3s linear infinite;
}
.kura_bodyimg08{/*インコと男*/
  top: 966px;
  left: calc(50% + 772px);
}
.kura_bodyimg09{/*バーガー*/
  top: 1234px;
  left: calc(50% + 588px);
}
.kura_bodyimg10{/*レスラー*/
  top: 1248px;
  left: calc(50% + 820px);
}
.kura_bodyimg11{/*DJ*/
  top: 1449px;
  left: calc(50% + 633px);
}
.kura_bodyimg12{/*パイナップル男*/
  top: 1700px;
  left: calc(50% + 468px);
  animation: bodyimg12 2.5s linear infinite;
}
.kura_bodyimg13{/*雲男*/
  top: 1832px;
  left: calc(50% + 723px);
}
.kura_bodyimg14{/*いちご*/
  top: 2125px;
  left: calc(50% + 658px);
}
.kura_bodyimg15{/*パンダ*/
  top: 2061px;
  left: calc(50% + 820px);
}
.kura_bodyimg16{/*女子高生*/
  top: 2273px;
  left: calc(50% + 418px);
  animation: bodyimg16 4s linear infinite;
}
.kura_bodyimg17{/*目隠し*/
  top: 2493px;
  left: calc(50% + 669px);
}

@keyframes bodyimg01{
  0%{
    top: 983px;
    left: 110%;
  }
  50%{
    top: 1040px;
    left: 57px;
  }
  69%{
    top: 1040px;
    left: 57px;
  }
  70%{
    top: 1040px;
    left: -270px;
  }
  100%{
    top: 1080px;
    left: -270px;
  }
}
@keyframes bodyimg02{
  0%{transform: rotate(0);}
  50%{transform: rotate(5deg);}
  100%{transform: rotate(0);}
}
@keyframes bodyimg04{
  0%{transform: scale(1);}
  50%{transform: scale(1.1);}
  100%{transform: scale(1);}
}
@keyframes bodyimg05{
  0%{
    top: 2148px;
    left: calc(50% - 795px);
  }
  12.5%{
    top: 2128px;
    left: calc(50% - 805px);
  }
  25%{
    top: 2148px;
    left: calc(50% - 815px);
  }
  37.5%{
    top: 2128px;
    left: calc(50% - 825px);
  }
  50%{
    top: 2148px;
    left: calc(50% - 835px);
    transform: rotateY(0);
  }
  51%{
    top: 2148px;
    left: calc(50% - 835px);
    transform: rotateY(180deg);
  }
  62.5%{
    top: 2128px;
    left: calc(50% - 825px);
    transform: rotateY(180deg);
  }
  75%{
    top: 2148px;
    left: calc(50% - 815px);
    transform: rotateY(180deg);
  }
  87.5%{
    top: 2128px;
    left: calc(50% - 805px);
    transform: rotateY(180deg);
  }
  100%{
    top: 2148px;
    left: calc(50% - 795px);
    transform: rotateY(180deg);
  }
}
@keyframes bodyimg07{
  0%{transform: rotate(0);}
  25%{transform: rotate(1080deg);}
  100%{transform: rotate(1080deg);}
}
@keyframes bodyimg12{
  0%{
    left: calc(50% + 188px);
    transform: rotate(0);
  }
  25%{
    left: calc(50% + 468px);
  }
  49%{
    left: calc(50% + 468px);
    transform: rotate(0);
  }
  50%{
    left: calc(50% + 468px);
    transform: rotate(5deg);
  }
  75%{
    left: calc(50% + 468px);
    transform: rotate(5deg);
  }
  100%{
    left: calc(50% + 188px);
    transform: rotate(0);
  }
}
@keyframes bodyimg16{
  0%{
    top: 2273px;
    left: calc(50% + 418px);
  }
  25%{
    top: 2323px;
    left: calc(50% + 468px);
  }
  50%{
    top: 2273px;
    left: calc(50% + 518px);
    transform: rotateY(0);
  }
  51%{
    top: 2273px;
    left: calc(50% + 518px);
    transform: rotateY(-180deg);
  }
  75%{
    top: 2223px;
    left: calc(50% + 468px);
    transform: rotateY(-180deg);
  }
  100%{
    top: 2273px;
    left: calc(50% + 418px);
    transform: rotateY(-180deg);
  }
}

/*body画像ここまで*/





.kura_contentswrap{
  position: relative;
  max-width: 1080px;
  margin: -180px auto 0;
  padding: 200px 24px 64px;
  background: url("../img/il_dot_bg2.png") center center repeat;
  background-color: #FFFFFF;
  z-index: 100;
}
.kura_contentswrap.kura_nobg{
  margin-top: auto;
  padding: 20px 24px 142px;
  background: #FFFFFF;
}

.kura_prevwrap{
  position: relative;
  padding: 20px;
  margin: 0 auto 166px;
  text-align: center;
}
.kura_frame{max-width: 100%;}
.kura_adv{
  position: absolute;
  display: block;
  width: 640px;
  max-width: 100%;
  left: calc(50% - 320px);
  top: 172px;
}
.kura_adv>div{aspect-ratio: 16/9;}
.kura_adv iframe{
  width: 100%;
  height: 100%;
  object-fit: contain;
}


h2{
  margin-bottom: 20px;
  text-align: center;
}
h2 img{max-width:100%;}


.kura_twwrap{
  position: relative;
  background: url("../img/il_cloud_bg.png") center top repeat;
}
.kura_twr{
  width: 700px;
  height: 677px;
  margin: 0 auto 45px;
  overflow-y: scroll;
}
.kura_door_cls{
  position: absolute;
  top: 72px;
  left: calc(50% - 351px);
  text-align: center;
}
.kura_door_cls img{max-width: 100%;}
.kura_door_cls.ani{
  animation: clsdoor 0.5s linear forwards;
  pointer-events: none;
}
.kura_door_opn{
  position: absolute;
  top: 7px;
  left: calc(50% - 382px);
  text-align: center;
  opacity: 0;
}
.kura_door_opn img{max-width: 100%;}
.kura_door_opn.ani{
  animation: opndoor 1s linear 0.25s forwards;
  pointer-events: none;
}

@keyframes clsdoor{
  0%{
    transform: scale(1);
    opacity: 1;
  }
  10%{
    transform: scale(0.9);
    opacity: 1;
  }
  55%{
    transform: scale(1);
    opacity:1;
  }
  100%{
    transform: scale(1.1);
    opacity:0;
  }
}
@keyframes opndoor{
  0%{
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(1.05);
    opacity:0;
  }
}


.kura_actcaution{
  margin-top:-130px;
  margin-bottom:114px;
  padding-left:20px;
}

.kura_actor{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 114px;
}
.kura_actor li{
  width: 22.67%;
  margin-right: 3.1%;
  margin-bottom: 40px;
}
.kura_actor li:nth-of-type(4n){margin-right: 0;}
.kura_moviebox2{
  cursor: pointer;
  text-align: center;
}
.kura_moviebox2:hover{opacity: 0.7;}
.kura_moviebox img{width: 100%;}
.kura_moviebox p{
  width: 68.37%;
  margin: 10px auto 0;
  padding: 6px 0;
  text-align: center;
  background-color: #1da1f2;
  box-shadow: 2px 2px 4px 0 rgb(0 0 0 / 16%);
  border-radius: 8px;
}
.kura_moviebox p img{width: 78%;}


.kura_bnr{
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
  justify-content: center;
  gap: 10%;
}
.kura_bnr li{
  width: 31%;
  margin-bottom: 20px;
}
.kura_bnr li img{width: 100%;}
.kura_bnr li a:hover{opacity: 0.7;}

/*-- 202104 --*/

.kura_fodbnr{
  text-align:center;
  margin-bottom:24px;
}
.kura_fodbnr a{display: block;}
.kura_fodbnr a img{max-width: 100%;}

.modaal-content-container{text-align: center;}
.modaal-content-container *{height: 530px;}


.tss_footer{
  padding: 14px 0 0;
  background: url("../img/il_footer.png") center top repeat-x;
  background-color: transparent !important;
  margin-top: -10px;
  z-index: 100;
  position: relative;
}
.tss_footer p{
  padding: 1em 0;
  background-color: #FFFFFF;
}
.tss_footer a{color: #000000;}

.kura_bn_ans{
  margin:auto;
  padding-bottom:48px;
  width:90%;
  max-width:420px;
}
.kura_bn_ans img{width:100%;}
.kura_bn_ans img:hover{
  opacity:0.8;
}






@media screen and (max-width:1318px){/*デザイン依存*/
  .kura_imgkato{
    left: auto;
    right: 31px;
  }
  .kura_imgkato.clk{
    left: auto;
    right: -168px;
  }
  .kura_imgnakashi{left: 31px;}
  .kura_imgnakashi.clk{left: -168px;}
  .kura_clkhr1{left: 76px;}
  .kura_clkhr2{
    left: auto;
    right: 107px;
  }
  
  .kura_navi{
    padding: 20px 13.6vw 0;
    background-size: 100% auto;
  }
  .kura_navi ul{gap: 0 3.8vw;}
}
@media screen and (max-width:1032px){/*コンテンツ幅*/
  .kura_twr{
    width: 67.83vw;
    height: 65.6vw;
  }
  .kura_door_cls{
    width: 67.83vw;
    top: 6.97vw;
    left: calc(50% - 34.01vw);
  }
  .kura_door_opn{
    width: 74.03vw;
    top: 0.67vw;
    left: calc(50% - 37.01vw);
  }

  .kura_prevwrap{margin-bottom: 80px;}
  #tss_gototop{
    right: 0;
    bottom: 96px;
  }
}
@media screen and (max-width:953px){/*デザイン依存*/
  .kura_head{
    height: 113.32vw;
    background-size: auto, auto, 42.6vw auto, auto 100%;
    background-position: center top, center top, center 48.68vw, center top;
  }
  .kura_imgoa_bg{
    width: 23.92vw;
    top: 38.61vw;
    left: calc(50% - 30.74vw);
  }
  .kura_imgoa_not{
    width: 36.72vw;
    top: 36.51vw;
    left: calc(50% - 46.16vw);
  }
  .kura_month10{
    width: 4.82vw;
    top: 36.62vw;
    left: calc(50% - 40.29vw);
  }
  .kura_month{
    width: 4.82vw;
    top: 36.62vw;
    left: calc(50% - 36.1vw);
  }
  .kura_date10{
    width: 4.82vw;
    top: 36.3vw;
    left: calc(50% - 26.02vw);
  }
  .kura_date1{
    width: 4.19vw;
    top: 36.62vw;
    left: calc(50% - 21.19vw);
  }
  .kura_hour1{
    width: 2.51vw;
    top: 44.49vw;
    left: calc(50% - 18.57vw);
  }
  .kura_min10{
    width: 2.51vw;
    top: 44.49vw;
    left: calc(50% - 13.32vw);
  }
  .kura_min1{
    width: 2.51vw;
    top: 44.49vw;
    left: calc(50% - 11.22vw);
  }
  .kura_imgkato{
    top: 61.07vw;
    right: 3.25vw;
    width: 34.2vw;
  }
  .kura_imgkato.clk{
    right: -17.62vw;
    width: 60.44vw;
  }
  .kura_imgnakashi{
    top: 61.07vw;
    left: 3.25vw;
    width: 32.52vw;
  }
  .kura_imgnakashi.clk{
    top: 63.16vw;
    left: -17.62vw;
    width: 68.2vw;
  }
  .kura_clkhr1{
    width: 20.98vw;
    top: 58.02vw;
    left: 7.97vw;
  }
  .kura_clkhr2{
    width: 20.98vw;
    top: 57.18vw;
    right: 11.22vw;
  }
  .kura_caution{
    top: 44.7vw;
    left: calc(50% - 43.02vw);
    width: 16.78vw;
  }


  .kura_adv{
    width: 67.15vw;
    left: calc(50% - 33.6vw);
    top: 18vw;
  }
}