.pru1{position: absolute;
bottom: 25vh;
z-index: 1;
width: 100%;

}

.ex13{display: flex;
  margin-top: -6%;
  width: 130%;}

  .iida{
  width: 100%;
position: fixed;
bottom: 0;
z-index:3;

}

.yoda{width: 90.7%;
aspect-ratio: 0.9 / 0.736;
background-color: #D5D5D5;
position: absolute;
right: 0;
left: 0;
margin: auto;
top: -95%;
display: none;
z-index: 100;
pointer-events: all;
box-sizing: border-box;
border-radius: 10px;
}

.lemons{width: 100%;
box-sizing: border-box;
}
.mao{margin-bottom: 0!important;}

.yoda.is-active {
  display: block;
  transition: all 0s!important;
}

.kokusi{width: 7%;
position: absolute;
bottom: -7%;
right: 13%;}

.kou{display: flex;
  flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;}

.lemon{width: 86.9%;
margin: auto;
margin-bottom: 3%;}

.tpp{position: absolute;
top: 0;
width: 100%;
z-index: 2;}

.sleep1{position: relative;
z-index: 2;}

.sleep2{margin-top: -3.5%;}

.sleep3{width: 100%;
aspect-ratio: 1 / 0.974;
position: relative;
margin-top: -1%;
}

.sleep4{width: 100%;
  aspect-ratio: 1 / 0.626;
  position: relative;

  }

  .sleep4 img{position: absolute;
  left: 0;
top: 0;}

.sleep3 img{position: absolute;
left: 0;
top: 0;}

.sleep11xx{margin-top:-10%;
position:relative;
z-index:2;
}

.sleep5{position: relative;
width: 100%;
aspect-ratio: 1 / 0.23;}

.sleep5 img{position: absolute;
left: 0;
top: 0;}

.sleep6{position: relative;
width: 100%;
aspect-ratio: 1 / 0.44;}

.sleep6 img{position: absolute;
left:0 ;
top: 0;}

.sleep7{width: 100%;
aspect-ratio: 1 / 0.332;
position: relative;
}

.sleep7 img{position: absolute;
left: 0;
top: 0;}

.sleep8{width: 69.9%;
margin: auto;
margin-right: -5.8%;
margin-top: -33.2%;}

.sleep9{width: 31%;
margin-left: 4%;
margin-top: -13.6%;}

.sleep10{position: relative;
width: 100%;
aspect-ratio: 1 / 0.493;
margin-top: -17.5%;}


.sleep10 img{position: absolute;
  left: 0;
  top: 0;}

  .sleep11{width: 23.4%;
  margin: auto;
margin-right: 6.5%;
margin-top: -12%;
}

.sleep11x{margin-top:-5%;
position:relative;}

.sleep12{width: 100%;
aspect-ratio: 1 / 0.367;
position: relative;
margin-top: -21.3%;
}

.sleep12 img{position: absolute;
left: 0;
top: 0;}

.sleep13{width: 31%;
margin-top: -32.5%;
margin-left: 9.3%;}

.sleep14{width: 31%;
margin-top: -39%;
margin-left: 54%;}

.sleep15{width: 100%;
  aspect-ratio: 1 / 0.353;
  position: relative;
  margin-top: 7.9%;
  z-index: 2;
}

.mess{overflow: hidden;}

.gray{filter: grayscale(1);
transition: all 1s;}

.grayx{filter: grayscale(0);}

.mess1{transform: scale(1.2);
transition: all 1s;
filter: blur(50px);
}

.poi{transform: rotate(30deg);
transition: all 1s;
}

.poix{transform: rotate(0deg);}

.pero1{transform: translateX(-30%);
opacity: 0;
transition: all 0.5s;}

.pero1x{transform: translateX(0%);
  opacity: 1;
}

.pero2{transform: translateX(30%);
  opacity: 0;
  transition: all 0.5s;}

  .pero2x{transform: translateX(0%);
    opacity: 1;
  }

.mess1x{transform: scale(1);
  filter: blur(0px);}

.sleep15 img{position: absolute;
left: 0;
top: 0;
}

.sleep16{margin-top: -35.3%;}

.sleep17{width: 100%;
aspect-ratio: 1 / 1.061;
position: relative;
}

.sleep17 img{position: absolute;
left: 0;
top: 0;}

.sleep18{width: 100%;
aspect-ratio: 1 / 0.612;
position: relative;}

.sleep20{width: 100%;
aspect-ratio:1 / 0.621 ;
position: relative;
}

.sleep20 img{position: absolute;
left: 0;
top: 0;
}

.sleep22{margin-top: -2%;}

.sleep21{display: flex;
justify-content: center;}

.sleep21 div:nth-child(1){margin-right: 3.3%;}
.sleep21 div:nth-child(3){margin-left: 3.3%;}
.sl21{width: 27.3%;
aspect-ratio: 1 /1;
position: relative;}

.sleep27{width:100%;
  aspect-ratio: 1 /0.43;
  position: relative;}
  .sleep28{width:100%;
    aspect-ratio: 1 /0.311;
    position: relative;}
    .sleep29{width:100%;
      aspect-ratio: 1 /0.388;
      margin-top:-3%;
      position: relative;}


      .sleep27 img, .sleep28 img, .sleep29 img{position: absolute;
        left: 0;
        top: 0;}

.sleep23{width: 100%;
position: relative;
aspect-ratio: 1 / 0.827;}

.sleep25{position: relative;
width: 100%;
aspect-ratio: 1 / 2.5;}

.sleep26{position: absolute;
  width: 100%;
left: 0;
top: 0;}

.sleep24{position: absolute;
left: 0;
top: 0;}

.sl21 img{position: absolute;
left: 0;
top: 0;}

.block1{position: relative;
margin-top: -10%;
position: sticky;
top: -20vh;}

.sleep18{position: sticky;
top: 0;}

.sleep19{width: 100%;
  overflow: clip;
aspect-ratio: 1 / 1.456;
position: sticky;
top: 0;
}

.age{margin-top: -5%;}

.mizu{background-color: #ADDBF0;
overflow: clip;
}

.sleep19 img{position: absolute;
left: 0;
top: 0;}

.sleep18 img{position: absolute;
left: 0;
top: 0;}

.block2{position: relative;
z-index: 2;
margin-top: -10%;
}



#sec3{position: relative;
width: 100%;
padding-bottom: 15%;
}

.yott1{bottom: 30vh;
top: unset;}

.jou{mix-blend-mode: multiply;}

.iida1{position: absolute;
bottom: 0;
left: 0;}

#sec2{z-index: 3;
  position: relative;
  background-color: white;}



  #sec9{z-index: 2;
    position: relative;
    background-color: white;}


    #sec11{z-index: 2;
      position: relative;
      background-color: white;}


#sec4{
position: relative;
width: 100%;
z-index: 2;
background-color: white;
}

#sec6{z-index: 2;
  position: relative;
  background-color: white;}

.mt5{position: absolute;
left: 0;
top: 0;}

.suzu{  transition: all 1s;
transition-delay: 1.5s;}

.suzux{  background-color: #043DB9;}

.mt6{position: relative;
  place-content: center;
width: 100%;
aspect-ratio: 1 / 0.285;
margin-top: 7.9%;}

.mt7{position: absolute;
z-index: 1;
top: 0;}

.mt9{position: relative;
width: 100%;
aspect-ratio: 1 / 1.463;}

.mt10{position: absolute;
top: 0;}
.mt11{position: relative;
width: 100%;
aspect-ratio: 1 / 0.301;}
.mt13{position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.456;}

  .mt14{position: absolute;
  top: 0;
width: 100%;}



  .mt15{position: relative;
  width: 100%;
aspect-ratio: 1 / 0.439;}

.mt15 div{position: absolute;
top: 0;}

.mt16{position: relative;
  width: 100%;
aspect-ratio: 1 / 0.238;}

.mt16 div{position: absolute;
top: 0;}

.mt17{position: relative;
  width: 100%;
aspect-ratio: 1 / 0.192;}

.mt17 div{position: absolute;
top: 0;}

.mt11 div{position: absolute;
top: 0;}

.mt12{position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.236;}

  .mt12 div{position: absolute;
  top: 0;}

  .mt20{position: absolute;
    top: 0;
  width: 100%;}


.mt8{background-color: #043DB9;
  transition: all 1s;
  width: 4.5%;
  margin: auto;
  height: 15%;
border-radius: 50%;}

.mt8x{  width: 89.5%;
  margin: auto;
  height: 100%;
border-radius: 15% / 50%;}

.mt19{margin-top: -10.5%;
position: relative;
}

.mt18{width: 100%;
aspect-ratio: 1 / 1.43;
position: relative;
}

.mt21{position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.21;}

  .mt21 div{position: absolute;
  top: 0;}

  .mt22{position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.456;}

    .mt22 div{position: absolute;
    top: 0;}

    .mt24{width: 100%;
    aspect-ratio: 1 / 1.362;
  position: relative;}

.mt31 .content{margin-right: 0;}
  .mt25{position: absolute;
  top: 0;
width: 100%;}

.mt26{display: flex;
  position: relative;
  z-index: 1;
justify-content: space-between;}

.mt27{position: relative;
width: 33.2%;
aspect-ratio:  0.332 / 1.171;
}

.mt27 div{position: absolute;
top:0;}

.mt28{width: 67.1%;}
    .blue2{width: 100%;
      display: grid;
      place-items: center;
    background-color: #043DB9;
  aspect-ratio: 1 / 0.182;}

  .blue2 .content{width:1365px ;}

  .blue2 .slideshow{	animation: loop-slide 55s infinite linear  both;}

  .mt29{width: 81.3%;
  margin: auto;
margin-top: -44.9%;}
.mt30{position: relative;
width: 100%;
aspect-ratio: 1 / 0.495;
margin-top: -17.5%;}

.mt30 div{position: absolute;
top: 0;}

.mt31{width: 100%;
aspect-ratio: 1 / 0.7;}

  .mt23{display: flex;
  justify-content: space-between;}

.blue{background-color: #A871D1;
  display:grid ;
  place-items: center;
width: 100%;
overflow: clip;
place-content: center;
aspect-ratio: 1 / 0.072;}

.mt1{width: 22.4%;
animation: circle infinite 3s linear;
margin-left: 75%;
margin-top: 4.9%;
margin-bottom: -7%;}

@keyframes circle {

0%{rotate: 0deg;}

100%{rotate: 360deg;}

}

.mt2{position: relative;
width: 100%;
aspect-ratio: 1 / 0.855;}

.mt2 div{position: absolute;
left: 0;
top: 0;}

.mt3{width: 100%;
position: relative;
aspect-ratio: 1 / 1.825;}

.mt4{position: absolute;
left: 0;
top: 0;}
.beta{margin-bottom: -2%;}

.mt32{position: relative;
width: 100%;
aspect-ratio: 1 / 3.1;
overflow: clip;}
.mt33{position: absolute;
top: 0;}

.mt34{display: flex;
justify-content: center;}
.kepo{
transform: translateX(-150%);

}


.kepox{animation: kepo 1 2s;
animation-fill-mode: forwards;
}

.kepox img{animation: san 1 2s;
  rotate: -360deg;
animation-fill-mode: forwards;}

@keyframes san{
  0%{rotate: -360deg;}

  100%{rotate: 0deg;}
}



@keyframes kepo{
  0%{
    transform: translateX(-150%);}

  100%{
    transform: translateX(0);
  }
}



.space{width: 100%;
aspect-ratio: 1 / 0.66;}
.kouon{width: 17.1%;
margin-left: 10%;
animation: kouon infinite 2s;}

@keyframes kouon{
0%{rotate: 0deg;}

50%{rotate: 30deg;}

100%{rotate: 0deg;}

}

.mt35{position: relative;
width: 100%;
aspect-ratio: 1 / 0.409;
margin-top: -22%;}

.mt35 div{position: absolute;
top: 0;}

.man{margin-left: 3%;
margin-right: 3%;}

.mun{margin-right: 1.5%;}

.mun2{margin-left: 1.5%;}

.try{margin-top: -1%;}


  .road1{animation: yokohe1 infinite 26s  linear;}
  .road2{animation: mawaru1 infinite 26s linear;}
  .road3{animation: yokohe2 infinite 26s  linear;}
  .road4{animation: mawaru2 infinite 26s linear;}
  .road5{animation: yokohe3 infinite 26s  linear;}
  .road6{animation: mawaru3 infinite 26s linear;}
  .road7{animation: yokohe4 infinite 26s  linear;}
  .road8{animation: mawaru4 infinite 26s linear;}
  .road9{animation: derun infinite 26s linear;}


  .purin{width: 75.6%;
  position: relative;
  margin: auto;
  margin-top: -2.5%;
  opacity: 0;
  line-height: 0;
  }

  #puron4{border-color: #FF7600;
  color: #C9531F;
  }


  .ami4 div{width: 0%;
    overflow: clip;
  transition: all 0.5s;}

  .ami3{animation: asb 3s infinite;}

  .ami4 div:nth-child(2){transition-delay: 0.2s;}
  .ami4 div:nth-child(3){transition-delay: 0.4s;}
  .ami4 div:nth-child(4){transition-delay: 0.6s;}
  .ami4 div:nth-child(5){transition-delay: 0.8s;}
  .ami4 div:nth-child(6){transition-delay: 1s;}

  .sailogo{padding-bottom: 40%;}

  .check{overflow: clip;
  width: 0%;
transition: all 1s;}

.check img{width: 100vw;}

.biyou1{width: 0%;
overflow: clip;
transition: all 1s;}

.biyou1 img{width: 100vw;}

#check1{transition-delay: 0.1s;}
#check2{transition-delay: 0.3s;}
#check3{transition-delay: 0.5s;}
#check4{transition-delay: 0.7s;}
#check5{transition-delay: 0.9s;}

#st4a div:nth-child(2){opacity: 0;
transform: translateX(-10%);
transition: all 1s;
}

#st4b div:nth-child(2){opacity: 0;
  transform: translateX(10%);
  transition: all 1s;
  }

  #st4c div:nth-child(2){opacity: 0;
    transform: translateX(-10%);
    transition: all 1s;
    }

  .ami8{
  overflow: clip;
transition: all 1s;
}

.biyou2{opacity: 0;
transform: translateY(10%);
transition: all 1s;
}

.point4{overflow: clip;}

.point4 div:nth-child(1){transform: translateY(30%);
opacity: 0;
transition: all 1s;}

.point4 div:nth-child(2){overflow: clip;
width: 0%;
transition: all 1s;
transition-delay: 0.7s;}

.point4 div:nth-child(2) img{width: 100vw;}

.ami8 img{width: 100vw;}

  .ami4 img{width: 90vw;}

  .ami5{animation: asb2 infinite 2s;}


  #puron5{border-color: #FF48AB;
    color: #F08B83;
    margin-bottom: 10%;
    }


    #puron6{border-color: #00D8FF;
      color: #009ED8;
      }

  @keyframes derun {
    0%{opacity: 0;
    }
    5%{opacity: 0;
    transform: translateY(-3%);}
    7%{opacity: 1;
      transform: translateY(0%);}

    92%{opacity: 1;
      transform: translateY(0%);}

    93%{opacity: 0;
      transform: translateY(-3%);}

    98%{opacity: 0;}

    100%{opacity: 0;}
  }
  @keyframes mawaru1 {
    0%{rotate:0deg;
    }
    5%{rotate:-415deg;}

    93%{rotate:-415deg;}

    98%{rotate:-800deg;}

    100%{rotate:-800deg;}
  }



  #bebe1{transform: translateX(250%);}
  @keyframes yokohe1{
    0%{transform: translateX(250%);}
    5%{transform: translateX(-35%);}
    93%{transform: translateX(-35%);}

    98%{transform:translateX(-600%); }

    100%{transform:translateX(-600%); }
  }

  @keyframes mawaru2 {
    0%{rotate:0deg;
    }
    5%{rotate:-330deg;}

    93%{rotate:-330deg;}

    98%{rotate:-800deg;}

    100%{rotate:-800deg;}
  }

  #bebe2{transform: translateX(400%);}
  @keyframes yokohe2{
    0%{transform: translateX(400%);}
    5%{transform: translateX(-38%);}
    93%{transform: translateX(-38%);}

    98%{transform:translateX(-550%); }

    100%{transform:translateX(-550%); }
  }
  @keyframes mawaru3 {
    0%{rotate:0deg;
    }
    5%{rotate:-330deg;}

    93%{rotate:-330deg;}

    98%{rotate:-800deg;}

    100%{rotate:-800deg;}
  }

  #bebe3{transform: translateX(450%);}
  @keyframes yokohe3{
    0%{transform: translateX(450%);}
    5%{transform: translateX(-38%);}
    93%{transform: translateX(-38%);}

    98%{transform:translateX(-525%); }

    100%{transform:translateX(-525%); }
  }
  @keyframes mawaru4 {
    0%{rotate:0deg;
    }
    5%{rotate:-380deg;}

    93%{rotate:-380deg;}

    98%{rotate:-800deg;}

    100%{rotate:-800deg;}
  }

  #bebe4{transform: translateX(500%);}
  @keyframes yokohe4{
    0%{transform: translateX(500%);}
    5%{transform: translateX(-36%);}
    93%{transform: translateX(-36%);}

    98%{transform:translateX(-500%); }

    100%{transform:translateX(-500%); }
  }

  .ex14{width: 36.2%;}

  .puron{background-color: white;

  border-radius: 20px;
  padding: 30px;
  font-size: 14px;
  line-height: 21px;
  color: #5C5C5C;
  border: 2.5px solid #D2D0C4;
  margin-top: -0.8%;
  text-align: justify;
  }

  .puron p{margin: 0;}

  .dump{width: 100%;
  aspect-ratio: 1/1.02;
position: relative;
}

.dump div{position: absolute;}


.block {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;


  top: 0;
}

.butty{position: relative;
  opacity: 1!important;
}

.osu{position: relative;
	z-index: 6;}

.huga{position: fixed!important;
  background-color: ;
height: 100vh;
width: 100%;
margin-top: 0;
overflow: scroll;}

.mob{position: relative!important;}
.long{overflow: clip;}
.block-one {

  color: #fff;
  z-index: 1;
  margin-top: calc(448vw - 100vh);
  margin-top: 0;
}
.block-two {
  margin-top:210vw;
  margin-top: 0;
  z-index: 2;
}
.block-three {
  margin-top:50vw;
 margin-top: 0;
  color: #fff;
  z-index: 3;
}

#nada{margin-top: 0;}
.block-four {
height: auto;
  z-index: 4;
}
.block-five {

  z-index: 5;
}


.block-six {

  z-index: 6;

  position: relative;
}

.block-seven {

  z-index: 7;

}

.block-eight {

  z-index: 6;

  position: relative;
}
/****************** new ******************/

.tetete{width: 100%;
height:66vw ;
position: relative;}

.tetete div{position: absolute;
top: 0;
left: 0;}
.zes1{padding-bottom:0vw;
  margin-top:calc(100vh - 426vw);
  padding-bottom: 40vw;
  height: 430vw;
margin-top: 0;
height: auto;
padding-bottom: 0;
padding-bottom: 8%;


}
  .zes2{

  height: 190vw;
  height: auto;
padding-bottom: 100vw;
padding-bottom: 0;
    z-index: 2;
  width: 100vw;}

  .zes1{
    height: 100%;
  width: 100%;}

  .zes2{overflow: clip;
  width: 100%;}

  .zes3{overflow: clip;
    width: 100%;}

    .masao{opacity: 0;
    transition: all 0.5s;}

.tetete div{opacity: 0;
transition: all 0.5s;
transform: translateX(-20px);}


.nom4 img{width: 71.3vw;
max-width: 71.3vw;}
.nom4 div:nth-child(1){overflow: clip;
  z-index: 3;
  width:0%;
animation: nobi 4s infinite;}

.nom4 div:nth-child(2){z-index: 2;}
.nom4 div:nth-child(3){z-index: 1!important;
  animation: opa 4s infinite;
opacity: 0;}

 @keyframes nobi{

  0%{width: 0%;}

  25%{width: 100%;}

  50%{width: 100%;}

  75%{width: 100%;}

  100%{width: 100%;}
 }


 @keyframes opa{

  0%{opacity: 0;}

  25%{opacity: 0;}

  50%{opacity: 1;}

  75%{opacity: 1;}

  100%{opacity: 1;}
 }
.tetete div:nth-child(3){transition-delay: 0.5s}

.tetete div:nth-child(1){transition-delay: 1s}

  .zes3 .zes2a{padding-bottom: 10vw;}

.ltt11{width: 100%;
  z-index: 2;
height: 107vw;
position: relative;

}

.jon li{opacity: 0;
  transition: all 0.3s;
transform: rotate(30deg);}

.jon li:nth-child(2){transition-delay: 0.5s;}

.jon li:nth-child(3){transition-delay: 0.8s;}

.ltt11 div{position: absolute;
left: 0;
top: 0;
transition: all 0.3s;
}
.ltt11 div:nth-child(3){opacity: 0;  transition: all 0.3s;
transition-delay: 0.6s;
animation: jump 2s infinite;
}
.ltt11 div:nth-child(2) {overflow: clip;}
.ltt11 div:nth-child(2) img{transform: translateX(-40vw);
  transition: all 0.3s;}

  .ltt12 div{opacity: 0;
    transition: all 1s;
  }


.marui1{opacity: 0;
  transform: scale(0.9);
  transition: all 1s;}

 .marui2 {opacity: 0;
    transform: scale(0.9);
    transition: all 1s;}

.yori{overflow: clip;}
#yori1 img{transition: all 2s;
transform: scale(1.05);}

.run{width: 86vw;
  display: flex;
margin: auto;
margin-bottom: 2vw;
opacity: 0;
transition: all 0.5s;
}

.run1{width: 4.7vw;
  margin-top: 0.8vw;
  line-height: 0;
flex-shrink: 0;}

#gobo{margin-bottom: 0;}

.run2{font-size: 12px;
  letter-spacing: -0.2px;
text-align: justify;
transform: unset!important;
opacity: 1!important;
margin-top: 0!important;}

.ltt12{padding-bottom: 11vw;}

.mob{width: 86vw;
margin: auto;
line-height: 0;
margin-top: 6.3vw;
margin-bottom: 10vw;
}

.clip {
bottom: -45%; /* ヘッダーの高さ分隠す */
}

.ltt12 .run{width: 90vw;}

p{font-family: YakuHanJP,"DM Sans", 'Zen Kaku Gothic New', sans-serif;}
#fixed-header {
  transition: all 0.5s;
  display: none;
  position: fixed;
bottom: 0;
 right: 0;
  width: 100%;

line-height: 0;
  text-align: center;
  color: #fff;

  box-sizing: border-box;
  transition: .5s;
  z-index: 100;
}

.kakure{background-color: #80766F;
  width: 100%;
  height: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
.mob li{margin-bottom: 4.7vw;}
.kakure2{
  width: 100%;
  height: 100%;
left: 0;
top: 0;
backdrop-filter: blur(12px);
}

.run,.run1,.run2{position:relative!important;
line-height: normal;}

.run1{line-height: 0;}

.osu{
  display: none;
}
.kuririn{
  animation: sitani 1 2.5s 1.5s;
animation-fill-mode: forwards;
mask-image: none;
mask-size: 0% 0%;
overflow: clip;
clip-path: circle(0%);
line-height: 0;
}

.fadeinni{animation: fadeinni 1 2s;
animation-delay: 3s;
animation-fill-mode: forwards;
opacity: 0
}

@keyframes fadeinni{

  0%{opacity: 0;}
  100%{opacity: 1;}

}

.meta{position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%,-50%);
width: 10%;}

.muta{width: 20.6%;
position: absolute;
left: 0%;
right: 0%;
margin: auto;
bottom: 5%;
}


.dere3{animation-duration: 3s!important;
animation-delay: 2s!important;
}

.dere4{animation-duration: 3s!important;
  animation-delay: 2.5s!important;
  }
.dere{animation-duration: 2s!important;}

@keyframes kuri{

0%{

    mask-image: none;
    mask-size: 0% 0%;
    overflow: clip;
    clip-path: circle(0%);
    line-height: 0;
  }

 100%{
    mask-size: 110% 110%;
    transition: all 1.5s;

    clip-path: circle(100%);
  }

}

.sitani{animation: sitani 1 2s 1s;
animation-fill-mode: forwards;
mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
      line-height: 0;
      clip-path: inset(0% 0% 100% 0%);
      mask-position: right center;
}

@keyframes sitani {      0%{   mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
      line-height: 0;
      clip-path: inset(0% 0% 100% 0%);
      mask-position: right center;

    }

     100% {
      clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
      mask-size: 110% 110%;
      transition-duration: 1s ;
      transition-timing-function:ease-in-out;
    transition-delay: 0.5s;

      }}

#fixed-header.is-show {
  bottom: 0;
}
.lt6a{animation: rotate 1s infinite;}

.lt6b{animation: rotate2 1.5s infinite;}


.bye{position: absolute;
height: 100px;
top: 0;
width: 100%;
background-color: ;}



.lt6e{overflow: clip;
transition: all 1s;
transition-delay: 0.5s;
height: 0;}

.lt6f{overflow: clip;
  transition: all 1s;
  transition-delay: 0.8s;
  height: 0;}

.ltt9 div,.ltt10 div{opacity: 0;
transition: all 0.5s;}

.ltt9 div:nth-child(1){opacity: 1;}

.ltt9 div:nth-child(2){transition-delay: 0.2s;}
.ltt9 div:nth-child(3){transition-delay: 0.4s;}
.ltt9 div:nth-child(4){transition-delay: 0.6s;}
.ltt9 div:nth-child(5){transition-delay: 0.8s;}
.ltt9 div:nth-child(6){transition-delay: 1s;}
.ltt9 div:nth-child(7){transition-delay: 1.2s;}


.ltt1{width: 100%;
height:24.8vw ;}

.ltt1 div{width: 100%;
position: absolute;
left: 0;
top: 0;}



.ltt2{display: flex;
margin: auto;
justify-content: center;
position: relative;
z-index: 2;
}

.lt5a{overflow: clip;
width: 0%;
transition: all 1s;
}

#sec3 .run{width: 80.6vw;
}

#sec4 .run{width: 80.6vw;
}

.ltt8 div{opacity: 0;
  transition: all 1s;}

.ltt6{opacity: 0;
transition: all 1s;}

.kero{overflow: clip;
  height: 92.5vw;
  width: 100%;
  position: relative;
line-height: 0;}

.kero div{position: absolute;
left: 0;
top: 0;}

.jomo{width: 100%;
height: 100%;
background-color: #B6EEF5;
transition: all 0.5s;

}

.ltt7 div{opacity: 0;
transition: all .5s;
position: absolute;
left: 0;
top: 0;
}








.masao{width: 90.7%;
  font-size: 18px;
margin: auto;
margin-top: 7vw;
margin-bottom: 5%;
}

.sv{margin-bottom: 5%;}

.ningen{width: 21.3%;
flex-shrink: 0;}

.kotoba{width: 79.9%;
flex-shrink: 0;}
.zes2a .run{width: 90.7vw;
padding-bottom: 10vw;}

#mezo ul{width: 61.2%;}

.kotoba1{margin-left: -7%;
margin-top: -5%;}

.nin1{margin-left: 6%;}

.nin2{
  margin: auto;
  margin-left: -9%;}

#ten{line-height: 0;}

.ramen{margin-bottom: 4%;}



.jon{line-height: 0;}
.jon ul {display: flex;
  justify-content: space-between;
width: 93%;
margin: auto;}

.jon li{width:29.4vw ;
height:29.4vw;
background-color: white;
border-radius: 50%;}

.huji1{margin-left: 4.6%;
margin-right: 2.4%;}

.kotoba3{
  margin: auto;
  margin-left: -7%;
margin-top: -4%;}



.zes2a{  background-color: #ECF081;}

.ltt7 div:nth-child(2){transform: translateX(50px);}

.ltt7 div:nth-child(3){transform: translateX(50px);
transition-delay: 0.5s;}

.kero img{transform: scale(1.2);
transition: all 1s;}

.ltt5 img{width: 100vw;}

.medama{width: 24.5vw;
height: 24.5vw;
background-color: white;
border-radius: 50%;
}

.ko{position: absolute;
left: 0;
top: 0;
}

.math{justify-content: unset!important;}

.huji{width: 40.7%;}

.aoki{aspect-ratio: 1 / 0.853;}

.chiri{aspect-ratio: 1/ 1.381;
margin-top: -18%;
z-index: 3;
}
.bonta{aspect-ratio: 1/ 1.472;
margin-top: -36%;}
.bonta img{position: unset!important;}

.minowa{border-top: 1px solid #FD005B;}

.hika2{justify-content: center!important;}

.hika2 div:nth-child(1){margin-right: 1.2%;}

.hika2 div:nth-child(2){margin-left: 1.2%;}
.hika{justify-content: center!important;}

.hika1{margin-bottom: 1.2%;}
.hika1 div:nth-child(1){margin-right: 2.4%;}

.hika1 div:nth-child(3){margin-left: 2.4%;}

.first{
}

@keyframes first {
0%{transform: scale(1.1);
  filter: blur(20px);
  opacity: 0;
}

100%{transform: scale(1);
  filter: blur(0px);
  opacity: 1;
}

}

.cover{width: 100vw;
height: 100vh;
display: grid;
justify-content: center;
place-items: center;
position: fixed;
z-index: 1000;
animation: cover 0.8s 1 2s;
animation-fill-mode: forwards;
opacity: 1;
background-color: white;



}

.cover img{width: 100%;}

.cover div{position: absolute}

@keyframes cover {
0%{visibility: visible;
  opacity: 1;

}

100%{visibility: clip;
  opacity: 0;
z-index: -1;
}


}

.wah{width: 30%;
animation: wah 1 3s;
animation-fill-mode: forwards;
}

@keyframes wah {
0%{rotate: 0deg;
opacity: 0;
}
10%{rotate: 0deg;
opacity: 1;}
20%{rotate: 0deg;}
30%{rotate: 0deg;}
40%{rotate: -4deg;}
50%{rotate: 8deg;}
55%{rotate: -8deg;}
60%{rotate: 9deg;}
60%{rotate: -6deg;}
70%{rotate: 9deg;}
75%{rotate: -4deg;}
80%{rotate: 8deg;}
85%{rotate: -5deg;}
90%{rotate: 8deg;}
95%{rotate: -5deg;}
100%{rotate: 0deg;}



}

.yoko{animation: yoko infinite 2s;}

.yokoni{animation: yokoni 1 1s 3s;
  animation-fill-mode: forwards;
  mask-image: none;
	mask-size: 0% 0%;
	overflow: clip;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;}

@keyframes yokoni {



0%{   mask-image: none;
	mask-size: 0% 0%;
	overflow: clip;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;

}
100% {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;


  }

}

.sasa{width: 30.8%;}

.ltt5{position: relative;
width: 100%;
height: 69.2vw;}

.ltt5 div{position: absolute;
top: 0;
left: 0;}

.ltt7{background-color: #ECF081;
  width: 100%;
  height: 33.9vw;

  position: relative;}


.ltt6{position: relative;
  width: 100%;
  height: 128.6vw;
margin-top: -20vw;
}

  .ltt6 div{position: absolute;
  top: 0;
  left: 0;}

  .ltt9{position: relative;
    width: 100%;
    height: 134vw;
  }

    .ltt9 div{position: absolute;
    top: 0;
    left: 0;}


    .migi{   mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
      line-height: 0;
      clip-path: inset(0% 0% 0% 100%);

      mask-position: right center;}

      .migix {
      clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
      mask-size: 110% 110%;
      transition-duration: 1s ;
      transition-timing-function:ease-in-out;
      }

      .sita{   mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
      line-height: 0;
      clip-path: inset(0% 0% 100% 0%);
      mask-position: right center;

    }

      .sitax {
      clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
      mask-size: 110% 110%;
      transition-duration: 1s ;
      transition-timing-function:ease-in-out;


      }

      .pos{opacity: 0;
        transform: scale(0);
        filter: blur(100px);}

      .posx{animation: pos 1 1s 0s forwards;}

      @keyframes pos {

0%{opacity: 0;
transform: scale(0);
filter: blur(100px);}

100%{opacity: 1;
  transform: scale(1);
  filter: blur(0px);}


      }

      .ue{   mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
      line-height: 0;
      clip-path: inset(100% 0% 0% 0%);
      mask-position: right center;

    }

      .uex {
      clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
      mask-size: 110% 110%;
      transition-duration: 1s ;
      transition-timing-function:ease-in-out;
    transition-delay: 0.5s;

      }


.hidari{   mask-image: none;
	mask-size: 0% 0%;
	overflow: clip;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;

}
  .hidarix {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;


  }

  .circle{

	mask-image: none;
	mask-size: 0% 0%;
	overflow: clip;
	clip-path: circle(0%);
	line-height: 0;
}

.circlex{
	mask-size: 110% 110%;
	transition: all 1.5s;

	clip-path: circle(100%);
}


.flip{
opacity: 0;
	rotate: y 180deg;
	-webkit-backface-visibility: clip;
	backface-visibility: clip;
	}

	.flipx{    transition: .7s ease .7s;
		rotate: y 0deg;
  opacity: 1;}


    .osome1{transition: all 1s!important;}
    .osome2{transition: all 2s!important;}
    .osome3{transition: all 3s!important;}

.yurero{animation: yurero infinite 3s;}

@keyframes yurero{
0%{rotate: 0deg;}
50%{rotate: 3deg;}
100%{rotate: 0deg;}

}

.yure1{animation: yure1 infinite 3s;}

@keyframes yure1{
0%{rotate: 3deg;}
50%{rotate: 0deg;}
100%{rotate: 3deg;}

}
@keyframes yure2{
  0%{rotate: 0deg;}
  50%{rotate: 1deg;}
  100%{rotate: 0deg;}

  }

.bunka{position: relative;
z-index: 2;}
.yure2{animation: yure2 infinite 2.1s;}

.yure3{animation: yure2 infinite 1.5s;}

.yure4{animation: yure2 infinite 1.6s;}

.yure5{animation: yure2 infinite 8s;}

.yure6{animation: yure2 infinite 8s;}
.anidelay0xxx{animation-delay: 0s!important;}
.anidelay0xx{animation-delay: 0.5s!important;}
.anidelay0x{animation-delay: 0.8s!important;}
.anidelay0{animation-delay: 2.1s!important;}
.anidelay1{animation-delay: 2.2s!important;}
.anidelay2{animation-delay: 2.4s!important;}
.anidelay3{animation-delay: 2.6s!important;}
.anidelay4{animation-delay: 3.6s!important;}
.anidelay5{animation-delay: 3.8s!important;}
.anidelay6{animation-delay: 4s!important;}
.anidelay7{animation-delay: 4.2s!important;}
.anidelay8{animation-delay: 4.4s!important;}
.anidelay9{animation-delay: 4.6s!important;}
.anidelay10{animation-delay: 4.8s!important;}
.anidelay11{animation-delay: 5s!important;}
.anidelay12{animation-delay: 5.2s!important;}
.anidelay13{animation-delay: 5.4s!important;}
.anidelay14{animation-delay: 9.5s!important;}
.anidelay15{animation-delay: 9.7s!important;}
.anidelay16{animation-delay: 6s!important;}






@keyframes yure3{
  0%{rotate: 1deg;}
  45%{rotate: 0deg;}
  50%{rotate: 1deg;}
  65%{rotate: 0deg;}
  100%{rotate: 1deg;}

  }


@keyframes yure4{
  0%{rotate: 1deg;}
  45%{rotate: 0deg;}
  50%{rotate: 0.5deg;}
  65%{rotate: 0deg;}
  100%{rotate: 1deg;}

  }

  @keyframes yure5{
    0%{rotate: 0deg;}
    5%{rotate: 15deg;}
    25%{rotate: -15deg;}
    40%{rotate: 15deg;}
    65%{rotate: -15deg;}

    100%{rotate: 0deg;}

    }


  @keyframes yure6{
    0%{rotate: 0deg;}
    5%{rotate: 5deg;}
    25%{rotate: -5deg;}
    40%{rotate: 7deg;}
    65%{rotate: -7deg;}

    100%{rotate: 0deg;}

    }

.fadein{opacity: 0;
transition: all 1s;}

.fadeinx{opacity: 1;
  }

  .pon{opacity: 0;
    transition: all 0s;}

    .ponx{opacity: 1;
      }

  .fadeinrot{opacity: 0;
    rotate: 180deg;
    transition: all 1s;}

    .fadeinrotx{opacity: 1;
      rotate: 0deg;
      }

      .powa1{opacity: 0;
      transform: translateX(30%);
      transition: all 1s;
      }

      .powa1x{opacity: 1;
        transform: translateX(0%);
        }

        .powa2{opacity: 0;
          transform: translateX(-30%);
          transition: all 1s;
          }

          .powa2x{opacity: 1;
            transform: translateX(0%);
            }


.jump1{animation: jump1 infinite 3s;}

.jump2{animation: jump2 infinite 3s;}

.jump3{animation: jump1 infinite 1s;}

@keyframes jump1{
0%{transform: translateY(0);}
50%{transform: translateY(3%);}
100%{transform: translateY(0);}

}

@keyframes jump2{
  0%{transform: translateY(0);}
  50%{transform: translateY(1%);}
  100%{transform: translateY(0);}

  }
.delay1{transition-delay: 0.2s!important;}
.delay2{transition-delay: 0.4s!important;}
.delay3{transition-delay: 0.6s!important;}
.delay4{transition-delay: 0.8s!important;}
.delay5{transition-delay: 1s!important;}
.delay6{transition-delay: 1.2s!important;}
.delay7{transition-delay: 1.4s!important;}
.delay8{transition-delay: 1.6s!important;}

.ltt3{
width: 100%;
height: 100vh;
position: relative;
}

.lk{position: absolute;
width: 100%;
top: 0;
left: 0;}

#lk3{mix-blend-mode: multiply;}

.ltt4{line-height: 0;}

#viewer1{

	position   : relative;
	overflow   : clip;
					  /* 画像のサイズに合わせて変更ください */
	width      : 100%;
height: calc(100vh - 27px);
		 /* サンプルは中央寄せの背景：白 */
   padding: 0px;
   margin: auto;

   z-index:0;

   top: 0;
   left: 0;


  }


  #yamaoka {

    position: absolute;
    /* 画像のサイズを表示エリアに合せる */
    height: 100%;
    width: 100%;
    right: 0;
    left: 0;

    opacity: 0;
    transition: all 2s;
    object-fit: cover;
  }

  #viewer4 {

    transition: all 0.5s;
    position: relative;

    /* 画像のサイズに合わせて変更ください */
    width: 100%;
    aspect-ratio: 1 / 0.598;
    /* サンプルは中央寄せの背景：白 */
    padding: 0px;

    margin: auto;




    }

    /*=== 画像の設定 ======================================= */
    #yamaoka2 {

    position: absolute;
    /* 画像のサイズを表示エリアに合せる */
    height: 100%;
    width: 100%;
    right: 0;
    left: 0;

    opacity: 0;
    transition: all 2s;
    object-fit: cover;
    }


    .chan{position: absolute;
    top: 0;}

.show {
    opacity: 1!important;
  }


  #lk1{overflow: clip;
    animation: tate 1 .5s;
    animation-delay: 1.8s;
animation-fill-mode: forwards;
  height: 0;}


  #lk2{overflow: clip;
    animation: tate 1 .5s;
    animation-delay: 1.5s;
animation-fill-mode: forwards;
  height: 0;}


  #lk4{overflow: clip;
    animation: fadein 1 1s;
    animation-delay: 2s;
animation-fill-mode: forwards;
opacity:  0;}

#lk4x{overflow: clip;
  animation: fadein 1 1s;
  animation-delay: 2s;
animation-fill-mode: forwards;
opacity:  0;}


#lk4x img{animation: asb 2s infinite;
  filter: drop-shadow(0px 2px 2px #aaa);
}

@keyframes asb{

  0%{rotate: 0deg;}
  50%{rotate: 1deg;}
  100%{rotate: 0deg;}
}

@keyframes asb2{

  0%{rotate: 0deg;}
  50%{rotate: 3deg;}
  100%{rotate: 0deg;}
}


#lk5{overflow: clip;
  animation: fadein 1 1s;
  animation-delay: 2s;
animation-fill-mode: forwards;
opacity:  0;}


#lk6{overflow: clip;
  animation: fadein 1 1s;
  animation-delay: 2s;
animation-fill-mode: forwards;
opacity:  0;}

.ltt4 div{opacity: 0;
transition: all 0.5s;}


  .ltt2 div{animation: fade1 1 1s;
    rotate: 10deg;
    opacity: 0;
    animation-fill-mode: forwards}

  .ltt1 div{overflow: clip;
  width: 0%;
animation: yoko 1 1s;
animation-fill-mode: forwards;}

.ltt1 div:nth-child(1){animation-delay: 0.5s;}
.ltt1 div:nth-child(3){animation-delay: 0.8s;}


.ltt2 div:nth-child(1){animation-delay: 1s;}
.ltt2 div:nth-child(2){animation-delay: 1.2s;}
.ltt2 div:nth-child(3){animation-delay: 1.4s;}

.ltt1 img{width: 100vw;}
@keyframes fadein{
  0%{opacity: 0;
}

  100%{opacity: 1;

  }
}
@keyframes fade1{
  0%{opacity: 0;
  rotate: 10deg;}

  100%{opacity: 1;
  rotate:0deg;
  }
}
@keyframes tate{
  0%{height: 0%;}

  100%{height: 100%;}
}
  @keyframes yoko{

    0%{transform: translateX(0);}

    50%{transform: translateX(2%);}

    100%{transform: translateX(0);}
  }




  #viewer3{

    position   : relative;
    overflow   : clip;
              /* 画像のサイズに合わせて変更ください */
    width      : 100%;
aspect-ratio: 1 / 0.666;
       /* サンプルは中央寄せの背景：白 */
     padding: 0px;
     margin: auto;

     z-index:0;


    }


  #viewer3 img {

    position   : absolute;
              /* 画像のサイズを表示エリアに合せる */

              height     :100%;
    right: 0;
    left: 0;
    margin: auto;
    opacity: 0;
    transition: all 2s;

    object-fit: cover;

  }

  #viewer3 img.show {
    opacity: 1;
    }



/****************** new ******************/



#jou{width: 73.5%;
margin: auto;}

#saigo2{padding-bottom: 50px;}
body{margin: 0;
}
.wrap2{line-height: 0;}
.wrapper{width: 100vw;
height: auto;
position: relative;
overflow: clip;
background-color: white;
}

.gazo{width: 8%;
height: 50px;}
.sec1{width: 100%;
}
.hane3 li:hover{opacity: 0.6;}

#sarada1{width: 198px;
margin: 0;
margin-left: auto;
margin-right: auto;}

.buy .hane3 li{display: flex;
justify-content: space-between;}

.buy .hane3 li:nth-child(6){margin-bottom: 0;}

.buy .hane2{padding-top: 10px;
padding-bottom: 10px;
padding: 10px;}

.buy p{   display: table-cell;
  vertical-align: middle;
margin-top: 2%; }

.dam{margin-bottom: 0!important;}

.modo{margin-top: 13px;}

#jajaja{background-color: #B4A398;
border-radius: 40px;
padding: 20px;
padding-top: 10px;
padding-bottom: 10px;
margin: auto;
margin-top: 30px;
color: white;
font-weight: bold;
text-align: center;
width: 40%;}

#jajaja p{color: white;
font-size: 18px;}

#sarada2{width: 90%;
  margin: 0;
margin-left: auto;
margin-right: 0;}

.hane{position: relative;
  width: 160%;
  margin-left: -30%;
z-index: 3;}

#ruga2 .hane{    position: relative;
  width: 500%;
  margin-left: -380%;
  z-index: 3;
  margin-top: -620%;}

  #ruga1 .hane{    position: relative;
    width: 600%;
    margin-left: -370%;
    z-index: 3;
    margin-top: -1180%;}



.hane1{width: 40%;
margin: auto;
margin-bottom: -3%;}
.hane2{background-color: #ECF081;
border-radius: 10px;
width: 70%;
margin: auto;
padding: 20px;
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, .3);}

.hane3 li{background-color: white;
border-radius: 10px;
margin-bottom: 10px;
text-align: center;
padding: 18px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
}





.lz14{padding-bottom: 0;}

.hane{display: none;}
.lz14:hover .hane{display: block;}

.hane3 li:nth-child(3){margin-bottom: 0;}

.buy li:nth-child(3){margin-bottom: 10px;}

.buy li:nth-child(6){margin-bottom: 0px;}

.chaka{font-size: 10px;}

#soi{transition: all 1s;
opacity: 1;}

.chon{opacity: 0;
transition: all 1s;}

.lz39{line-height: 0;}

.lz10 li span{font-size: 12px;
line-height: normal;}

#q201{display: none;}
#q202{display: none;}
.gou{width: 174px;
height: 104px;
display: grid;
place-content: center;
justify-content: center;}


.zes3 .zes2a{padding-bottom: 40px;}

.jan{display: block;}

.kyon{line-height: normal;
font-size: 12px;}

.nyon{background-color: white;}

/* スクロールしてターゲットが画面上部（初期設定）から75%（初期設定）の位置にきた際 .started が設定されます。*/

p{margin: 0;
color: #5C5C5C;}
#sec1{

  line-height: 0;
height: 100vh;
  overflow: clip;
width: 100%;
z-index: 5;
position: relative;}
.ei{
  height: auto;


z-index: 5;
display: grid;
place-items: center;
width: 100%;

}

.bt1{display: flex;
justify-content: space-between;}

.botans{position: absolute;
  width: 65.4%;
  right: 5%;
}

.bt1 div{width: 48.2%;}

.bt1{margin-bottom: 4%;}

.butty{background-color: #EBE9E0;}

.kawa{width: 100%;
height: 99vw;
position: relative;}

.kawa img{position: absolute;}

ul{list-style: none;
margin: 0;
padding: 0;}

li{margin: 0;
    padding: 0;}
a{text-decoration: none;}
.lz17{opacity: 0;
transition: all 1s;}

.lz19{opacity: 0;
    transition: all 1s;}


img{width: 100%;}
.lz8{opacity: 0;
transition: all 1s;}
.lz1{margin: auto;
width: 100%;
padding-top: 5vw;

overflow: clip;
height: 0px;
animation: hai 1s 1;
animation-fill-mode: forwards;}

.lz1 img{height: 22.7vw;}
#chokk{margin-top: -5px;}
.lz1x{width: 34.6%;
height: 22.7vw;
margin: auto;
margin-bottom: 25px;}
#saisai{position: relative;
z-index: 1;}

.saigon{width: 100%;

left: 0;
right: 0;
opacity: 0;
margin: auto;

position: absolute;}

.saigon img{opacity: 0;}

#saigo1:hover .saigon img{opacity: 1!important;}

#saigo1{position: relative;
width: 100%;
height: 24vw;}

.lz2 div{opacity: 0;
animation: fadein 1 1s;
animation-fill-mode: forwards;}

#mm1{animation-delay: 1s;}
#mm2{animation-delay: 1.9s;}
#mm3{animation-delay: 1.3s;}
#mm4{animation-delay: 1.6s;}

#mm5{animation-delay: 1.8s;}
#mm6{animation-delay: 1.8s;}
#mm7{animation-delay: 2.1s;}
#mm8{animation-delay: 2.1s;
margin-top: -10px;}

#jump1{animation: jump 3s infinite;}

#jump2{animation: jump 4s infinite;}

#rotate1{animation: rotate 3s infinite;}



#rotate2{animation: rotate 4s infinite;}

#rotate3{animation: rotate2 4s infinite;}

#rotate4{animation: rotate3 3s infinite;}

@keyframes jump {
    0%{transform:translateY(0px);}
    50%{transform:translateY(0px);}
    60%{transform:translateY(2px);}
    70%{transform:translateY(0px);}
100%{transform:translateY(0px);}

    }

    @keyframes rotate {
        0%{transform:translateY(0px);}
        50%{transform:translateY(0px);}
        60%{transform:rotate(2deg);}
        70%{transform:translateY(0px);}
    100%{transform:translateY(0px);}

        }

        @keyframes rotate2 {
          0%{transform:translateY(0px);}
          50%{transform:translateY(0px);}
          60%{transform:rotate(-1deg);}
          70%{transform:translateY(0px);}
      100%{transform:translateY(0px);}

          }

          @keyframes rotate3 {
            0%{transform:translateY(0px);}
            50%{transform:translateY(0px);}
            60%{transform:rotate(-1deg);}
            70%{transform:translateY(0px);}
        100%{transform:translateY(0px);}

            }


@keyframes hai {
    0%{height: 0;}
    100%{height: 100%;}

    }


@keyframes fadein {
0%{opacity: 0;}
100%{opacity: 1;}

}

.lz2{position: relative;
width: 100vw;
height: calc(100vw*1.05);
margin: auto;
}

.lz2 div{position: absolute;
top: 0;
left: 0;}

.lz3{
    width: 100vw;
margin: auto;}

    .lz3 img{
opacity: 0;
animation: fadein 1 1s;
animation-fill-mode: forwards;}

.jaga{line-height: 0;
margin-top: -5vw;
margin-bottom: -5vw;
position: relative;
z-index: 2;}

#bb1{animation-delay: 1.5s;}
#bb2{animation-delay: 1.7s;}
#bb3{animation-delay: 1.9s;}
#bb4{animation-delay: 2.1s;}
#bb5{animation-delay: 2.3s;}
#bb6{animation-delay: 2.5s;}
#bb7{animation-delay: 2.7s;}
#bb8{animation-delay: 2.9s;}
#bb9{animation-delay: 3.1s;}

    .buy{width: 28%;
    height: 28vw;
position: fixed;
right: 0;
bottom: 0;
z-index: 100;
}

.jag{display: flex;
width: 100%;
position: absolute;
top: 0;
justify-content: space-between;}
.ruga{width: 50%;}

.buy img{position: absolute;
top: 0;
left: 0;
position: unset;}

.scroll{width: 14%;
    position: fixed;
    z-index: 2;
bottom:-10%;
left: 0;
animation: pyon infinite 1s;}

#buy2{
animation: jyon infinite 1s;
}






.doyou{width: 72%;}


.lz4{width: 100%;
height:43vw ;
position: relative;}

.lz6{width: 100%;
height: 28vw;
position: relative;}
.lz6 img{position: absolute;}

.lz4x{width: 0%;
    height:43vw ;
    position: absolute;
overflow: clip;
transition: all 0.5s;}

    .lz4x img{width: 100vw;
        height:43vw ;}

        .lz4xx{width: 0%;
            height:43vw ;
            position: absolute;
        overflow: clip;
        transition: all .5s;
    transition-delay: .5s;}

            .lz4xx img{width: 100vw;
                height:43vw ;}

.lz4 img{position: absolute;}

#kuru{animation: kuru infinite 2s;}

#kuru2{animation: kuru2 infinite 3.5s;}
.lz5{opacity: 0;
transition: all 1s;}

#yori1{width: 100%;
height:190vw ;
position: relative;}


#yori2{width: 100%;
  height:160vw ;
  position: relative;}

.yori div{position: absolute;
left: 0;
top: 0;}

.nom1{margin-top: -65vw;
position: relative;
z-index: 2;}
.lz8{width: 100%;
height: 178vw;
position: relative;}

.lz8 div{position: absolute;}

.lz21{
animation: pyon infinite 1.5s;}


.nom4{height: 16.4vw;
position: relative;

}




.nom3{padding-bottom: 10vw;}

.nom4 div{position: absolute;
left: 0;
top: 0;}

.nom3{background-color: #ECF081;}
#tohoho{position: absolute;
bottom: 0;}



.lz23{width: 100%;
height: 35.5vw;
position: relative;}

.nom4{width: 71.3%;
margin: auto;}

.lz23 div{position: absolute;}

.lz24{width: 0%;
    height: 35.5vw;
    overflow: clip;
    transition: all 1s;
   }

   .lz24 img{width: 100vw;
    height: 35.5vw;
   }

   .choko{animation: kuru infinite 1s;}



.ltt12{background-color: #ECF081;
}



.ltt12 div:nth-child(2){margin-top: -11.4vw;}

.neon1{line-height: 0;
height: 100%;
position: relative;
aspect-ratio: 1/1.425;
}

#suke{opacity: 0.6;}

.neon1 img{object-fit: cover;
width: 100%;}

.neon1 div{position: absolute;}

.wee1{animation: kuru2 infinite 2s;
width: 100%;}

.wee2{animation: kuru infinite 2.5s;
    width: 100%;}

.zy1{z-index: 2;}

.lz25{display: flex;
margin-top: 30px;
padding-bottom: 50px;}
.zz1{width: 40%;}
.zz2{width: 60%;}

.dd2{position: relative;
width: 100%;
height: 215vw;
}

.dd2 div{position: absolute;}

.zz2 li{width: 100%;
height: 46vw;
position: relative;}

.zz2 li div{position: absolute;}

.zy1 img{width: 60vw;}

.zy1{width: 0%;
transition: all 1s;
overflow: clip;
}

.lz26{animation: jump 2s infinite;}

.dd1{animation: jump infinite 1s;}

.didy{width: 100%;
height: 0;
overflow: clip;
transition: all 1s;
transition-delay: 1s;
}

.didy img{width: 40vw;
height: 215vw;}

.zy2{opacity: 0;
transition: all 1s;
transition-delay: 0.5s;}
#lolo{margin-top: 0;}
.lz29{position: relative;
width: 100%;
height: 100vw;
margin-top: -60px;}

.wup1{width: 100%;
height: 0;
overflow: clip;
transition: all 1s;}

#wup2{transition-delay: 1s;}
#wup1{transition-delay: 1.5s;}

.lz29 div{position: absolute;}


.lz27{width: 100%;
height: 72vw;
position: relative;}

.lz28{width: 100%;
    height: 0;
 overflow: clip;
transition: all .5s;
transition-delay: 1s;}

    .lz28 img{width: 100%;
        height: 72vw;
      }

.lz27 div{position: absolute;}

.iro{
    background-color: #F0ECE9;
    padding-top: 50px;
    margin-top: -5vw;
    position: relative;
    z-index: 1;
}

.lz31{width: 100%;
    height: 0;
    overflow: clip;
    transition: all 1s;
    transition-delay: .5s;
}

.lz33{position: relative;
width: 100%;
height: 93vw;}

.lz33 div{position: absolute;}

.hop{width: 0%;
overflow: clip;
transition: all 0.5s;}

.hop img{width: 100vw;
height:93vw ;}

.lz30{animation:  jump infinite 1s;
background-color: white;}

.lz32 div{opacity: 0;
transition: all 1s;}
.lz32x{display: flex;}

.lz32x div{opacity: 0;
  transition: all 1s;}
.lz31x{height: 93vw;
width: 100%;}

.lz31 img{width: 100%;
height: 93vw;
}
.zaza2 img{opacity: 0;
transition: all 1s;}

#hop1{transition-delay: 0.5s;}
#hop2{transition-delay: 0.8s;}
#hop3{transition-delay: 1.1s;}
#hop4{transition-delay: 1.4s;}

#pipi1{transition-delay: 0.2s!important;}
#pipi2{transition-delay: 0.5s!important;}
#pipi3{transition-delay: 0.8s!important;}

.wrap {
	display: flex;
	align-items: center;
  height: auto;
  overflow: clip;


  }

#sec7{background-color: white;
position: relative;
}

#sec8{background-color: white;
  position: relative;
  }

  .slideshow {
	display: flex;
	padding: 0;
	margin: 0;
  }
  .content {
	width: 450px;
display: grid;
place-items: center;
	list-style: none;
margin-right: 0.5%;
  }





  .slideshow {
	display: flex;
	animation: loop-slide 25s infinite linear  both;
  }

  .wrap2 {
	display: flex;
	align-items: center;
  height: auto;
  overflow: clip;
  margin-top: 0px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
background-color:#F0ECE9 ;
  }



  .slideshow2 {
	display: flex;
	padding: 0;
	margin: 0;
  }
  .content2 {
	width: 200vw;

	list-style: none;

  }

  .ila{animation: kuru2 3s infinite;}

.huki{background-color: #ECF081;
padding: 20px;
font-size: 15px;
line-height: 24px;
font-weight: 500;
text-align: justify;
position: relative;
z-index: 1;}

.huki2{width: 80%;}

#muki{margin-left: 15%;}

#huki1{border-radius: 10px 10px 10px 10px;
width: 67%;
margin-left: 13%;
margin-right: auto;}

#huki2{border-radius: 10px 10px 10px 10px;
    width: 67%;
    margin-left:auto;
    margin-right: 13%;}

    .hk{animation:  jump 4s infinite;}
    #hk2{animation:  jump 2s infinite;}
    #hk3{animation:  jump 3s infinite;}
  .slideshow2{
	display: flex;

  }
  @keyframes loop-slide {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }

  #deco{margin-bottom: 0;
height: 4.2vw;}

  .wrap2{opacity: 1;}

  .wrap2 div{opacity: 1;}

  .bt1x{width: 10.3%;}
  .bt2x{width: 10.3%;}



.lz21{opacity: 0;
transition: all 1s;}
.lz37{z-index: 2;}

.lz38{opacity: 1;}


.dandan{opacity: 1;}

.toma{opacity: 0;
transition: all 1s;}

  .slide-paused:hover .slideshow {
	animation-play-state: paused;
  }

/* 数字を消す */
.slick-dots li button {
	font-size: 0;
}

/* 丸を表示 */
.slick-dots li button:before {
	font-size: 10px;
	color: #aaa;
	opacity: 1;
}

.slick-dots li.slick-active button:before {
	color: #5C5C5C;
}

.slick-dots li:nth-child(2){margin-left: 20px;
margin-right: 20px;}


.slick-dots{display: flex;
  justify-content: center;
margin: auto;
margin-top: 20px;
}
.dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #CECECE;
}

.slick-active .dot {
	background: #5C5C5C;
}


  .chi{width: 70%!important;
margin: auto;}


  .prev-arrow {width: 35px;
position: absolute;
left: 0;
top: 30vw;
z-index: 1;}
  .next-arrow {width: 35px;
    position: absolute;
   right: 0;
   z-index: 1;
top: 30vw;}

  .lz40{position: relative;
width: 100%;
height:104vw ;}

.gog{width: 0%;
height: 100%;
overflow: clip;
transition: all .5s!important;
}

.gog img{width: 100vw;
height: 56.3vw;}

#gog1{transition-delay: .5s!important;}
#gog2{transition-delay: .8s!important;}
#gog3{transition-delay: 1.1s!important;}
#gog4{transition-delay: 1.4s!important;}



.lz41{position: relative;
    width: 100%;
    height:60vw ;
  margin-bottom: 30px;
  }
    .lz41 div{position: absolute;}

.lz40 div{position: absolute;}

  .ila2{display: flex;
    overflow: clip;}

  .ila2 img{width: 50%;}

  .lz34{position: relative;
z-index: 1;
animation: kuru2 2s infinite;}

.lz35{width: 100%;
height: 33vw;
position: relative;
}

#tomi1{animation: kuru infinite 3.5s;}

#tomi2{animation: kuru2 infinite 2s;}

.lz35 div{position: absolute;}

.lz36{width: 0%;
    height: 33vw;
    overflow: clip;
    transition: all 0.5s;
    }
    #joe1{transition-delay: 0.5s;}
    #joe2{transition-delay: 1s;}

    .lz36 img{width: 100vw;
        height: 33vw;
        }

        .dandan{background-color: #ECF081;}

        .lz37{position: relative;}
        .lz38{margin-top: -8vw;}


@keyframes kuru {

    0%{transform: rotate(0deg);}
    30%{transform: rotate(0deg);}
    50%{transform: rotate(0deg);}
    80%{transform: rotate(5deg);}
    100%{transform: rotate(0deg);}
}

@keyframes kuru2 {

    0%{transform: rotate(0deg);}
    30%{transform: rotate(0deg);}
    50%{transform: rotate(0deg);}
    80%{transform: rotate(-5deg);}
    100%{transform: rotate(0deg);}
}
@keyframes pyon {

    0%{transform: translateY(5px);}

    50%{transform: translateY(0px);}

    100%{transform: translateY(5px);}
}

@keyframes jyon {

    0%{transform: translateY(0px);}


    50%{transform: translateY(0px);}

    70%{transform: translateY(2px);}

    100%{transform: translateY(0px);}
}

.open {
	cursor:pointer;
}
#pop-up {
	display: none;
}
.overlay {
	display: none;
}
#pop-up:checked + .overlay {
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);
}
.window {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90vw;
overflow: scroll;
	height: 80vh;
	background-color: #ECF081;
	border-radius: 4px;
	align-items: center;
	transform: translate(-50%, -50%);
    padding-bottom: 50px;
}
.close {
	position: absolute;


    width: 60px;

	cursor:pointer;
    z-index: 2;

    opacity: 0.6;
}



.lz9{width: 100%;
height:127vw ;
position: relative;}

.lz9 div{position: absolute;}


    .lz10 ul{display: flex;
    border-top: solid #5C5C5C 1px;
    border-bottom: solid #5C5C5C 1px;
    border-left: solid #5C5C5C 1px;
    width: 70vw;
    margin: auto;
}

.maz{background-color: #ECF081;}

.noz{display: flex;
padding-bottom: 100px;}
.donga{font-size: 12px!important;
line-height: 19px;
margin-top: 20px;}

.don{border-bottom: none!important;}
.don1{border-bottom: none!important;}

    .lz10 li{border-right: 1px solid #5C5C5C;
    width: 50%;
    text-align: center;
height: 21vw;
display: grid;
justify-content: space-between;
place-content: center;
color: #5C5C5C;
font-size: 18px;
font-weight: 500;
}


.option {
    cursor: pointer;
  }
  .optionBox {
    display: none;

  }

  .optionBox2 {
    display: none;

  }
  .optionBox p {

  }

  .lz12{position: relative;
width: 100%;
height: 113vw;}
.lz12 div{position: absolute;}

.lz13{width: 63vw;
margin: auto;
font-weight: 400;}

.jajaja{font-size: 16px;
  line-height: 28px;}

.optionbox3{display: none;}
.optionbox4{display: none;}

.lz14{width: 46vw;
  margin: auto;
margin-top: 40px;
padding-bottom: 50px;}

.jaru1{width: 0%;
overflow: clip;
transition: all 1s;
transition-delay: 0.5s;
position: absolute;
}

.jaru2{position: absolute;}

.jaru1 img{width: 100vw;}

.lz16{display: flex;
}
.lz16 a{width: 50%;}

.lz13x{background-color: white;}

.lz18{display: flex;

}

#kunrun{margin-bottom: 8%!important;}
.lzy{width: 50%;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
border-right: 1px solid #707070;
border-radius: 5px 5px 0px 0px;
background-color: white;}

#lzy2{background-color: #F0ECE9;}

.lz19{width: 86.4%;
margin: auto;}

#miz2{display: none;}

.lz20{background-color: white;
    border-bottom: 1px solid #707070;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
}

    .nana{width: 73.5%;
        padding-top: 30px;
    margin: auto;}

    .zaza{margin-top: -50px;
        margin-left: 25px;
width: 100%;
animation: rotate 3s infinite;
}

.zaza3{font-size: 16px;
line-height: 28px;
font-weight: 400;}

.dom{background-color: #F0ECE9!important;}

.dom2{background-color: white!important;}

.noz1:hover .hane{display: block;}

.noz2:hover .hane{display: block;}

.buy:hover .hane{display: block;}

.noz1 .huga{margin-top: -45%;
margin-left: 30%;}

#ruga2 .hane1{margin-top: -2%;
margin-right: -1%;}

#ruga1 .hane1{margin-top: -2%;
  margin-right: 2%;}

  #fixed-header .run{opacity: 1;}
.noz1 .hane1{margin-left: 14%;}

.noz2 .huga{margin-top: -45%;
  margin-left: -30%;}

  .noz2 .hane1{margin-right: 14%;}
  .buy span{font-size: 14px;}

#pc{display: none;}
#jama{border-bottom: solid #5C5C5C 1px!important;}

.lzkan{animation: fadein 1s 1;
  animation-fill-mode: forwards;
  animation-delay: 0.7s;
opacity: 0;}

#bera{padding-bottom: 5vw;}

.lz{line-height: 0;}

.rep{padding-bottom: 15vw;

background-color: #D0B958;}

.joy{aspect-ratio: 1 / 1.357;}


.gyou{width: 100%;}
.gyou div{width: 29.4%;}

.gyou div:nth-child(1){margin-left: 4.4%;}

.gyou div:nth-child(3){margin-right: 4.4%;}
.bero{display: block;}

.peco{width: 100%;
aspect-ratio: 1 /1.72;
position: relative;}

.peco1{position: absolute;
top: 0;
left: 0;}

.nanba{width: 31.1%;
margin-left: -4.9%;}

.nan2{margin-top: 6.8%;}

.cka{position: absolute;
left: 0;
top: 0;}

.dis{display: flex;
justify-content: space-between;
}

.sikaku{aspect-ratio: 1 / 1;}

.oya{width: 100%;
position: relative;}

.basta{aspect-ratio: 1/0.371;
margin-top: -16.4%;
}

.basta2{aspect-ratio: 1/0.626;

  }

  .menta{aspect-ratio: 1/ 0.4;}

  .basta3{aspect-ratio: 1/0.479;

  }

  .night{position: relative;
    margin-top: -30%;
    padding-bottom: 140%;
  z-index: 1;}
.fight{position: sticky;
  overflow: clip;
top: 0;}

.awa3{position: relative;
width: 100%;
aspect-ratio: 1 / 0.343;}

.awa3 img{position: absolute;
top: 0;
left: 0;}

.deru{position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.484;
margin-bottom: 10.3%;
}

.mazui{aspect-ratio: 1 / 1.516;}

  .deru img{position: absolute;
    top: 0;
    left: 0;}




.awa{position: relative;
z-index: 2;
margin-top: -23%;}

.lastt{
width:25%;
margin:auto;
margin-top:20%;
padding-bottom:50%;}

.saku{aspect-ratio: 1/0.652;}

.awa2{position: relative;
  mix-blend-mode: multiply;
  z-index: 2;
  margin-top: -27%;}

.uru{width: 30%;
position: absolute;
left:5%;
top: 40%;
animation: infinite asb2 1.5s;
}

.product{position: absolute;
  bottom: 0;
width: 100%;
height: 100%;

}

.sukeyoko{width: 0%;
overflow: clip;
transition: all 1s;
transition-delay: 1s;}

.sukeyoko img{width: 100vw;}

.nl3_4 div:nth-child(2){width: 0;
  transition: all 1s;
  transition-delay: 0.5s;
overflow: clip;}

.nl3_4 div:nth-child(2) img{width: 100vw;}

.product div{position: absolute;}




.top-ttl{
  width: 100%;
  height: 100vh;
  display: flex;



  position: absolute;
  top: 50px;
  z-index: 2;
}

.container {
  width: 130%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:28%;

}

.headline {
  text-align: center;
  width: 100%;
}

.text {
  display: flex;

  opacity: 0; /* 初期状態を透明に */
}

.text2 {
  display: flex;

  opacity: 0; /* 初期状態を透明に */
}

#baba{transform: unset;
transition-delay: 0.9s!important;
transition: all 1s;}

.char {
  display: inline-block;
  transform: translateY(30%);
  opacity: 0; /* 初期状態を透明に */
  transition: transform .4s cubic-bezier(0,1.69,.9,1.55), opacity .4s cubic-bezier(0,1.69,.9,1.55);
  transition-delay: calc(0.1s * var(--char-index)); /* 各画像のアニメーション遅延 */
  margin: 0;

}


.char2 {
  display: inline-block;
  transform: translateY(30%);
  opacity: 0; /* 初期状態を透明に */
  transition: transform .4s cubic-bezier(0,1.69,.9,1.55), opacity .4s cubic-bezier(0,1.69,.9,1.55);
  transition-delay: calc(0.1s * var(--char2-index)); /* 各画像のアニメーション遅延 */
  margin: 0;

}


.text.is-active {
  opacity: 1; /* 全体の不透明化 */
}

.text2.is-active {
  opacity: 1; /* 全体の不透明化 */
}

.text.is-active .char {
  transform: translateY(0);
  opacity: 1; /* 各キャラクターの不透明化 */
}


.char:nth-child(1){width: 9.6%;
margin-left: 3%;
}
.char:nth-child(2){width: 7.9%;}
.char:nth-child(3){width: 7.2%;}
.char:nth-child(4){width: 4.9%;}
.char:nth-child(5){width: 6.8%;}
.char:nth-child(6){width: 5.6%;}
.char:nth-child(7){width: 8.2%;}
.char:nth-child(8){width: 8.2%;
margin-left: -1.5%;
}
.char:nth-child(9):nth-child(9){width: 12.1%;}

.text2.is-active .char2 {
  transform: translateY(0);
  opacity: 1; /* 各キャラクターの不透明化 */
}


.char2:nth-child(1){width: 9.6%;
margin-left: 3%;
}
.char2:nth-child(2){width: 7.9%;}
.char2:nth-child(3){width: 7.2%;}
.char2:nth-child(4){width: 4.9%;}
.char2:nth-child(5){width: 6.8%;}
.char2:nth-child(6){width: 5.6%;}
.char2:nth-child(7){width: 8.2%;}
.char2:nth-child(8){width: 8.2%;
margin-left: -1.5%;
}
.char2:nth-child(9){width: 12.1%;}


.dump div:nth-child(1){overflow: clip;
width: 0%;
transition: all 1s;
transition-delay: 1s;
}

.dump div:nth-child(1) img{width: 100vw;}

.nl3_1{width: 375px;
animation: fadein 1s 1;
animation-fill-mode: forwards;
opacity: 0;
position: absolute;
top: 0;
}

#hm2{animation-delay: 1.5s;}

.homies{width: 375px;
margin: auto;
position: absolute;
height: 200px;

left: 0;
right: 0;
top: 0;}

#moge{overflow: clip;
width: 0%;
animation: yokoni 1s 1;
opacity: 1;
animation-fill-mode: forwards;
animation-delay: 1s;}

#moge img{width:375px;
max-width: 375px;}




.nl3_2{width: 0;
overflow: clip;
transform-origin: right;
transition: all 1s;
}

.nl3_2 img{width: 100vw;}


.nl3_3{position: relative;
width: 100%;
height: 57vw;

margin-top: -20vw;
z-index: 3;
}

.nl3_3 div{position: absolute;
height: 0;
overflow: clip;
transition: all 1s;
}

.suketate{overflow: clip;
transition: all 1s;
transition-delay: 1s;
height: 0%;}

.suketate img{
  width: 100%;
  aspect-ratio: 1 / 1.425;
}

.nl3_3 div:nth-child(1){transition-delay: 1s;}

.nl3_4{
  line-height: 0;
overflow: clip;
position: relative;
width: 100%;
aspect-ratio: 1/1.168;
}

.nl3_4 div{position: absolute;}



#niban{height: 65vw;}


#hand{margin-top: -47vw;}

.nl3_5{width: 26.6%;

margin-left: auto;
margin-right: 0;
position: relative;
z-index: 2;
margin-top: -10%;
}

.nl3_5 img{animation: kaiten 4s infinite;
}

@keyframes kaiten{


  0%{transform: rotate(0);}


  100%{transform: rotate(360deg);}

}





.nl3_6{width: 100%;
aspect-ratio: 1/0.668;
position: relative;
margin-top: -19%;
z-index: 2;
}

.nl3_6 div{position: absolute;}


.nl3_6 div:nth-child(2){opacity: 0;
transform: translate(1vw,1vw);
transition: all 1s;
transition-delay: 1s;
}

.nl3_6 div:nth-child(4){width: 0%;
overflow: clip;
transition: all 1s;
transition-delay: 1s;
}

.nl3_6 div img{width: 100vw;}


.nl3_7{width: 100%;
aspect-ratio: 1/1.35;
  position: relative;

  }

  .nl3_7 div{position: absolute;}



.nl3_7 div:nth-child(1){

  animation: asb infinite 2s;
}

.nl3_7 div:nth-child(2){

  animation: asb2 infinite 1s;
}


.nl3_7 div:nth-child(3){height: 0;
overflow: clip;
transition: all 1s;
transition-delay: 1s;}

.nl3_7 div:nth-child(5){height: 0;
  overflow: clip;
  transition: all 1s;
  transition-delay: 0.5s;}




  .nl3_9{position: relative;
    margin-top: 80vw;
    height: 100vh;
    display: grid;
    place-items: center;
  z-index: 2;}

  .nl3_10{position: relative;
    margin-top: 80vw;
    height: 100vh;
    display: grid;
    place-items: center;
  z-index: 2;}

  .text_red {
    color: red;
  }

  #momoko.active{overflow: scroll;
  height: 100vh;}


.ami1{position: relative;}

.ami4{position: relative;
width: 100%;
aspect-ratio: 1/0.684;}



.ami4 div{position: absolute;}

.ami3{padding-top: 40%;}

.ami5{width:42% ;
margin: auto;
padding-bottom: 20%;
}


.point5{width: 100%;
aspect-ratio: 1/0.886;
position: relative;
}
.slider {
  width: 100%;
  margin: 0 auto;
  position: relative;
  aspect-ratio: 1/1.4;
  padding-top: 30%;
  overflow:hidden;
}

.bt1x{position: absolute;
top: 40%;
left: 7%;
z-index: 2;}

.slcen{width: 55%;

margin: auto;
margin-bottom: -23%;
padding-top: 10%;
}

.bt2x{position: absolute;
  top: 40%;
right: 7%;}

.slider img {
  width: 100%;
  height: auto;
  border-radius: 10px;

}

.staff{line-height: 0;}


/* Custom arrows */
.line{margin-bottom: -25%;}



.staff2{background-color: #EBE9E0;}

.point8{margin-top: -35%;}

.point5 div{position: absolute;}

.point4{position: relative;
width: 100%;
aspect-ratio: 1/0.576;
z-index: 2;
}

.staff{position: relative;
z-index: 2;}



.biyou{margin-top: -3%;
  position: relative;
aspect-ratio: 1/1.755;}

.biyou1{position: absolute;
  top: 0;
z-index: 2;}

.biyou2{position: absolute;
bottom: 0;
z-index: 2;}

.staff4{position: relative;
width: 100%;}

.staff4 div{position: absolute;}

#st4a{aspect-ratio: 1/0.43;}

#st4b{aspect-ratio: 1/0.41;}


#st4c{aspect-ratio: 1/0.376;}

.point4 div{position: absolute;}

.ami8{width: 0%;
margin-left: -5%;}
.ami6{width: 64.3%;
margin: auto;
margin-top: 10%;
}

.ami7{background-color: white;
border-radius: 50%;
width: 90%;
aspect-ratio: 1/1;
margin: auto;}

html{overflow: visible;}

.ami{ background-image: url(pic/nl3_92.webp);
  background-size:  cover;
width: 100%;
height: 380%;

}

.ami2{background-color: white;
width: 90%;
height: 213%;
border-radius: 9999px;
margin: auto;
margin-top: -35%;
}


.containerx {
  position: relative;
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}

.scroll-section {
  position: relative;
}



.even-section {
  background: transparent;
  color: black;
  padding: 20px;
  box-sizing: border-box;
}

.odd-section {
  color: white;
}

#section1 {
  background-color: red;
  z-index: 1;
  height: 100vh;
}

#section1 img{object-fit: cover;
height: 100%;}

#section2 {
position: relative;
  z-index: 2;
}

#section3 {
  background-color: blue;
  z-index: 3;
  height: 100vh;
}



#section3 img{object-fit: cover;
  height: 100%;}
  #section5 img{object-fit: cover;
    height: 100%;}
    #section7 img{object-fit: cover;
      height: 100%;}

      .aga{margin-top: 5%;}


#section4 {




}

#section5 {
  background-color: green;
  z-index: 5;
  height: 100vh;
}

#section6 {

  z-index: 6;
}

#section7 {
  background-color: orange;
  z-index: 7;
  height: 100vh;
}

#section8 {

  z-index: 8;
}

.text-content {
  max-width: 90%;
  text-align: center;
}

.rukawa{width: 100%;
position: absolute;
bottom: 0;
mix-blend-mode: multiply;
animation: fadein 1s 1 3s;
animation-fill-mode: forwards;
opacity: 0;
}

.pata{margin-top: 12%;}

.logo{display: none;}

/* Ensure that each section has different heights */

.zzz{line-height: 0;}



.lav1{position: relative;
aspect-ratio: 1 / 0.355;}

.lav1 div{position: absolute;
left: 0;
top: 0;}



.lav4{position: relative;
width: 100%;
aspect-ratio: 1 / 0.563;}

.lav4 img{position: absolute;}

.lav5{width: 100%;
position: relative;
aspect-ratio: 1 / 0.192;}

.lav5 img{position: absolute;}

.lav5x{margin-top: -2.6%;}

#sec5{

  position: relative;
}

#sec5-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  background-image: url("pic1/lav28.webp");
  background-size: cover;
  background-position: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 表示中 */
#sec5-bg.is-active{
  opacity: 1;
}


#sec6{
  min-height: 100vh;
  background-image: url("pic1/lav64.webp");
  background-repeat: repeat-y;      /* 縦だけ繰り返す */
  background-size: 100% auto;       /* 横100%、縦は元サイズ */
  background-position: center top;
  background-attachment: fixed;
}



  .lav6{position: relative;
  width: 100%;
aspect-ratio: 1 / 0.895;}

.lav6 img{position: absolute;}

.lav7{margin-top: -4%;}

.lav8{position: relative;
width: 100%;
aspect-ratio: 1 / 0.486;}

.lav8 img{position: absolute;}

.lav9{position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.984;}

  .lav9 img{position: absolute;}

  .lav10{margin-top: -10%;}

  .lav11{position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.666;}

    .lav11 img{position: absolute;}

    .lav12{margin-top: -4%;}

    .lav13{position: relative;
      width: 100%;
      aspect-ratio: 1 / 1.311;}

      .lav13 img{position: absolute;}

      .lav14{margin-top: -3.3%;}

      .lav15{margin-top: -4%;}

      .lav16{position: relative;
      width: 100%;
    aspect-ratio: 1 / 0.565;}

    .lav16 img{position: absolute;}

    .lav17{
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 0.271;}

      .lav17 img{position: absolute;}

      .lav18{position: relative;
      aspect-ratio: 1 / 1.126;}

      .lav18 div{position: absolute;}

      .lav19{position: relative;
      width: 100%;
    aspect-ratio: 1 / 0.152;}

    .lav19 img{position: absolute;}

    .lav19x{margin-top: 6.3%;}

    .lav20{position: relative;
      width: 100%;
    aspect-ratio: 1 / 0.52;
  margin-top: -12.6%;}

    .lav20 img{position: absolute;}

    .lav21{position: relative;
      width: 100%;
    aspect-ratio: 1 / 1.089;
  margin-top: -2.8%;}

    .lav21 img{position: absolute;}

    .lav22{position: relative;
      width: 100%;
    aspect-ratio: 1 / 0.381;
}

    .lav22 img{position: absolute;}

    .lav23{display: flex;
      width: 94.6%;
      margin: auto;
    justify-content: space-between;}

    .lav24{width: 31.6%;}

    .lav23x{margin-top: 5.6%;
    padding-bottom: 9.8%;}

    .lav25{position: relative;
    width: 100%;
  aspect-ratio: 1 / 1.502;}

  .lav25 img{position: absolute;}

  .lav26{margin-top: -32.3%;
  position: relative;}



  .lav27{background-color: #DDDBD4;}

  #sec9{padding-bottom: 25px;}



    #fixed-bg{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;

      background-size: cover;
      background-position: center;

      opacity: 0;
      transition: opacity 1s ease;
      pointer-events: none;

    }

    /* 表示中 */
    #fixed-bg.is-active{
      opacity: 1;
      transition:
      opacity 1s ease;
    }

    /* セクション共通 */
    #sec5,
    #sec10{
      min-height: 100vh;
      position: relative;
    }

    .lav28{position: relative;
    width: 100%;
  aspect-ratio: 1 / 0.442;}

  .lav28 img{position: absolute;}

  .lav28x{margin-top: -11.4%;}

  .logon{margin-top: -20%;}

  .lav29{position: absolute;
  z-index: 100;
top: 0;}

.lav30{width: 100%;
margin: auto;
display: flex;
}

.lav30x{justify-content: center;
margin-top: -7%;
position: relative;
z-index: 2;}
.lav30zz{margin-top: 0%;
position: relative;
z-index: 2;}
.lav30z{margin-top: 6%;}
.lav30zx{margin-top: -10%;}
.lav31{width: 52.6%;}

  .kuri{position: absolute;
    z-index: 2;
    width: 100vw;
    aspect-ratio: 1 / 0.432;
}

  .kuri1{width: 100%;
  aspect-ratio: 1 / 0.432;
  top: 50%;
  transform: translateY(-50%);
}

.kuri div{position: absolute;
}

  .kuri2{  top: 52%;
    transform: translateY(-50%);

  }

  .kuri3{top: 10%;}

  .popup {
    display: none;      /* ← 初期状態は必ず none */
    position: fixed;
    inset: 0;

    justify-content: center;

    z-index: 100;
  line-height: 0;
    overflow: scroll;

  }

  .moon1{
    position: absolute;
  width: 100%;
}
.close {
  position: absolute;

  width: 22%;

  background: transparent;
  border: none;
  cursor: pointer;
}


#close{position: absolute;
bottom: 2.5%;
right: 5%;
z-index: 100;}

  .popup p {
    background: #fff;
    padding: 20px;
  }

  body.no-scroll {
    overflow: hidden;
  }

  .moon2{position: absolute;
    height: 100vh;
  top: 0%;}

  .moon1{height: 100vh;

    overflow: hidden;}
    .moon1 img{height: 100%;
      object-fit: cover;
      object-position: top;
    }



.iida img{pointer-events: none;}

.iida{ pointer-events: none;}

.oi{display: inline-block;
  height: 40%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  pointer-events: auto;   /* 子だけクリック可能 */
  cursor: pointer;
  z-index: 5;}




  .slider3 {
    width: 80%;
    margin: 50px auto;
    overflow: hidden;
  }

  .slider3 img {
    width: 100%;
    display: block;
  }

  .waka{position: relative;
  width: 100%;
}

.waka img{position: absolute;}
.waka1{aspect-ratio: 1 / 0.325;}
.waka2{aspect-ratio: 1 / 0.355;}
.waka3{aspect-ratio: 1 / 0.521;}
.waka4{aspect-ratio: 1 / 0.418;}
.waka5{aspect-ratio: 1 / 0.421;}

.yari{animation: infinite yari 2s;}

.lav31{flex-shrink: 0;}

.lv31_1{margin-left: 5%;}

.lv31_2{margin-top: 15%;
margin-left: -13%;
}

.lv31_3{margin-left: 6%;}

.lv31_4{margin-left: -20%;
margin-top: 25%;}

@keyframes yari {

  0%{opacity: 0;
  transform: translateX(-3%);}

  50%{opacity: 1;
    transform: translateX(0);}

    100%{opacity: 0;
      transform: translateX(3%);}

}

.tyla{width: 100%;
aspect-ratio: 1 / 1.85;
position: relative;}

.tyla2{position: absolute;
top: 0;
left: 0;}

.tyla2x{top: 3%;
transform: scaleY(1.1);}

.cleft{transform: rotate(30deg);
transform-origin: left top;
transition: all 1s;
opacity: 0;
}

.cright{transform: rotate(-30deg);
  transform-origin: right top;
  transition: all 1s;
  opacity: 0;
}

.cleftx{transform: rotate(0deg);
  opacity: 1;}

.crightx{transform: rotate(0deg);
  opacity: 1;}

  .concon{width: 95%;
  margin: auto;}


.yoda2{top: -300%;}

.amazo{position: relative;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width:100%;
  aspect-ratio: 0.235 / 0.054;
  z-index: 5;
  }

  .amazo img{position: absolute;}

  .yoda img {
    height: auto !important;
    object-fit: unset !important;
  position: unset!important;}

  .is-hidden {
    z-index: -1!important;
    }

/****************** pc ******************/
@media (min-width: 1100px) {

  .popup{width: 500px;
  left: 50%;}

  .close{}

  #sec10 {
    background-attachment: scroll;
  }

  #sec5 {
    min-height: 70vh;
  }

  #sec6 {
    background-attachment: scroll;
  }



.blue1 .content{width:669px ;
  display: grid;
place-content: center;}

.baga{position: absolute;
top: 0;
z-index: 2;
width: 17.5%;
left: 50%;
transform: translateX(-100%);}

.baga2{position: absolute;
bottom: 0;
  z-index: 2;
  aspect-ratio: 0.175 / 0.331;
  width: 17.5%;
  left: 50%;
  transform: translateX(-100%);}

  .baga2 img{position: absolute;
  top: 0;}


.blue1{place-content: center;}

  .blue{position: absolute;
  top: 0;
  z-index: 2;
aspect-ratio: unset;
height: 31px;}

.dere4{animation-duration: 1s!important;
  animation-delay: 4s!important;
animation-fill-mode: forwards;}
  .sitani{animation: sitani 1 1s 1s;
  animation-fill-mode: forwards;}

  .homies{width: 30%;
    height: unset;
  aspect-ratio: 1/0.5;
  top: 38%;}

  .nl3_1{width: 100%;}

  #moge img{width:29vw ;
    max-width: unset;
    height: auto;
}
  .nl3_6 div img{width: 500px;}
    .lz27 {  height: calc(500px*0.72);}
    .lz28 img{  height: calc(500px*0.72);}
    .buy{width:  calc(500px*0.28);
        height: calc(500px*0.28);
        position: fixed;
    right: 0;
    bottom: 0;
    z-index: 2;
    left: 50%;
    transform: translateX(330px);

    }

    .rep{padding-bottom: 30px;}

   #bera{padding-bottom: 20px;}



.app1 div{overflow: clip;}
    .app1 div:nth-child(1){animation: masu 1 1s;
      height: 0%;
    animation-delay: 0.5s;
  animation-fill-mode: forwards;}

    .app1 div:nth-child(2){animation: masu 1 1s;
      height: 0%;
      animation-delay: 0.8s;
      animation-fill-mode: forwards;}




    .app2{animation: fadein 1 1s;
      animation-fill-mode: forwards;
      animation-delay: 1s;
    opacity: 0;
    }

    .sukeyoko img{width: 500px;}


.staff1{line-height: 0;}
    @keyframes masu {
      0%{height:0%}

      100%{height: 100%;}

    }

    .desu2 img{object-fit: cover;
    height: 100%;}

    .mob{margin-top: 30px;
    margin-bottom: 40px;}



    .zes2a .run{padding-bottom: 0;}
    #mezo{margin-bottom: 40px;}




    .zes2{padding-bottom: 0;
    height: 1140px;}

    .nom3{padding-bottom: 40px;}
.nom4{height: 81px;}
    .nom4 img{width:357px;}

    .nom1{margin-top: -321px;
  }

  .biyou{margin-top: -5%;}


    #yori1{height: 956px;}

    #yori2{height: 804px;}





    .zes3, .zes2a{padding-bottom: 40px;}
.masao{margin-top: 0;}

    .tetete{height: 334px;}

    .jon li{width: 150px;
    height: 150px;}
    .block-one{margin-top: 0px;}


    .block-two{margin-top: 0;}

    .huga{width: 500px;
      left: 50vw!important;
    }

    .mob li{margin-bottom: 20px;}

    .mob{width: 86%;}

    .rep{width: 500px;}


    .ltt12{padding-bottom: 40px;}

    .ltt12 div:nth-child(2){margin-top: -70px;}



    #sec3 .run{width: 80%;}
    #sec4 .run{width: 80%;}

    .kero{height: 464px;}

    .ltt7{height: 170px;}
    .ltt11{height: 528px;}

    .long .run{width: 90%;}
    .ltt5 img{width: 500px;}

    .ltt5{height: 264px;}

    .ltt6{height: 643px;
    margin-top: -10px;}

    .point4 div:nth-child(2) img{width: 500px;}

    #sec5 .run{width: 80%;}

    #fixed-header{width: 500px;
    height: 191px;}

    .ltt9{height: 679px;}

    .run{width: 100%;
    margin-bottom: 5px;}

    .run1{width: 5%;
      margin-top: 0;
    }

    #viewer2{

      position   : absolute;
      overflow   : clip;
                /* 画像のサイズに合わせて変更ください */
      width      : 50vw;
      height     :100vh;
         /* サンプルは中央寄せの背景：白 */
       padding: 0px;
       margin: auto;

       z-index:0;

       top: 0;
       left: 0;


      }

.app1{position: absolute;
right: 0;
top:0;
height: 100vh;
width: 20vh;
}


.ami4 img{width: 450px;}
.app3{width: 60%;}

.app3 .run{opacity: 1;}

.desu2{width: 50vw;
height: 100vh;
position: absolute;

overflow: clip;
right: 0;
top: 0;
}



.app1 div{position: absolute;
left:0;
top:0;}

.remon img{mix-blend-mode: multiply;}

.app1 img{width: auto;
height: 100vh;}


.app2{position: absolute;
bottom: 1.8vw;
width:31%;
left: 1.8vw;
}
    #viewer div {

      position   : absolute;
                /* 画像のサイズを表示エリアに合せる */
                width      :100%;
                height     :100%;

      right: 0;
      left: 0;
      margin: auto;
      opacity: 0;
      transition: 1s;

    }

    .nl3_4 div:nth-child(2) img{width: 500px;}
    #viewer2 img{ 	position   : absolute;
      /* 画像のサイズを表示エリアに合せる */

      height     :100%;
right: 0;
left: 0;
margin: auto;
opacity: 0;
transition: all 2s;
transition-delay: 1s;
object-fit: cover;
}

    #viewer2 .show {
      opacity: 1;
      }


    .desu1{width: 50vw;
      position: relative;
      overflow: clip;
    height: 100vh;}

    .desu1 img{height: 100%;
    object-fit: cover;}

    .gazo{width: 10.5%;
    height: 68px;}

    .buy span{font-size: 14px;}

    #ruga2 .hane{margin-top:-520% ;}
    #ruga1 .hane{margin-top:-1100% ;
      margin-left: -270%;
    width: 470%;}

    .buy p{margin-top: 4.5%;}

    #jajaja{background-color: #B4A398;
      border-radius: 40px;
      padding: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
      margin: auto;
      margin-top: 40px;
      color: white;
      font-weight: bold;
      text-align: center;
      width: 40%;}

      #jajaja p{color: white;
      font-size: 24px;}


    .lzkan{width: 60%;
    margin: auto;
    margin-bottom: 30px;
  }
    .ronron{width: 70%;
    margin: auto;}

    .jaga{margin-top: -80px;
      margin-bottom: -30px;
    }




    .lz10 li:hover{background-color: rgba(255, 254, 254, 0.8);}

    .top{position: relative;
    z-index: 100;}


.long{position: relative;

}

    .iro{margin-top: calc(500px*-0.05);}
    .lz13{width: calc(500px*0.63);}
    .lz12{height: calc(500px*1.28);}
    .lz10 li{height: calc(500px*0.21);}
    .lz10 ul{width: calc(500px*0.7);}
    .lz9{height: calc(500px*1.45);}
    .window{width: 500px;}
    #huki2{margin-right: 18%;}
    #huki1{margin-left: 18%;}
    .gog img{width: 500px;
    height: 286px;}
    .lz41{width: 500px;
      height: 300px;}

      .check img{width: 500px;}

    .jaru1 img{width: 500px;}
    .kawa{height: calc(500px*0.99);}
.lz33{height: calc(500px*0.93);}
    .hop img{height: calc(500px*0.93);
    width: 500px;}
    .lz40{height: calc(500px*1.04);}
    .lz36{height: calc(500px*0.33);}
    .lz35{height: calc(500px*0.33);}
    .lz36 img{height:  calc(500px*0.33);
    width: 500px;}

    #saigo1{height: calc(500px*0.24);}
    .lz31 img{height: calc(500px*0.86);}
    .content2{width: 1000px;}
    .lz31x{height: calc(500px*0.86);}
    #deco{height: 20px;}
    .lz29{height: 470px;}
    .iro{padding-bottom: 50px;}

    .dd2{    height: calc(500px*2.15);
    overflow: clip;}

    .didy img{width:  calc(500px*0.4);
        height: calc(500px*2.15);}

        .didy {
            height: calc(500px*2.15);}

    .zz2 li{height:calc(500px*0.46);}

    .zy1 img{width:  calc(500px*0.6);}

    .lz23{ height: calc(500px*0.355);}

    .lz24 img{width: 500px;
        height: calc(500px*0.355);}

    .lz14{width: calc(500px*0.46);;}

    .lz4{height: calc(500px*0.43);}

    .lz6{height: calc(500px*0.28);}

    .lz8{height: calc(500px*1.78);}


    .ronron{animation: fadein 1 1s;
        opacity: 0;
        animation-delay: 0.5s;
    animation-fill-mode: forwards;}

    .jonjon div{animation: fadein 1 1s;
        opacity: 0;
    animation-fill-mode: forwards;}

    #jon1{animation-delay: 0.8s;}
    #jon2{animation-delay: 1.1s;}
    #jon3{animation-delay: 1.4s;}
    #sp{display: none;}
.lz2 {width: 100%;
height: 500px;}
  .jaja{width: 50%;
height: auto;}
#pc{display: block;}
.roll{width: 100vw;
  overflow-x: hidden;
  overflow: clip;
margin:auto ;
display: flex;}
.wrapper{width: 500px;



margin-left: 0;}


.lz4xx{height: 214px;
width: 100%;}
.lz4xx img{height: 214px;
width: 100%;}
.lz4x{height: 214px;
    width: 100%;}
.lz4x img{height: 214px;
width: 100%;}

.jonjon{width: 80%;
  margin: auto;
height: 400px;
position: relative;}


.ei{display: none;}
#sec1{display: none;}
.top{width: 100%;
    height: 100vh;
    z-index: 5;
    position: relative;
}
.topnaka{
    display: flex;
    min-width: 1100px;
    max-width: 1300px;
    width: 80%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) ;
height: 42vw;
min-height:582px ;
max-height: 687px;
}

.dump div:nth-child(1) img{width: 500px;}

.lev{width: 60%;
  animation: fadein 1s 1;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  min-width: 800px;
  max-width: 900px;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 5%;}
.job{width: 500px;
margin-left: auto;
margin-right: 0;
line-height: 0;}

.biyou1 img{width: 500px;}

.broke {
  position: relative;
z-index: 100;}
.roll{

position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}

.gedan{width: 100%;
height: 100vh;
position: relative;

position: sticky;
top: 0;
}

#yamaoka3{position: relative;
  width: 100%;
  height: 100%;
opacity: 1;}

.tango{object-fit: cover;
height: 100%;}

.logo{width: 287px;
  position: fixed;
  display: block;
  left: 20px;
  top: 30px;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 0;
}

.cover div{width: 50%;}

.kuri2{top: 70%;}



.logo.show{opacity: 1;}


  .vibes {width: 18.9vw;
  display: flex;}

  .moji{font-size: 14px;}

  #ja{margin-top: -40px;}

  #jo{position: relative;
  z-index: 2;}
  #jig:hover{opacity: 0.6;
  transition: all 0.5s;}



  .rza{width: 173px;
top: 60%;
transform: translateY(-50%);
position: absolute;
right: -780px;}

  .wu{display: flex;
  margin-bottom: 20px;}

  .en{border: 1px solid black;
  border-radius: 50%;
width:13px ;
height: 13px;
margin-left: 30px;
margin-top: 3px;
flex-shrink: 0;
}

.moji{margin-left: 10px;}





#header{
  position: fixed;/*header固定*/
  height: 70px;/*Headerの高さ設定*/
  width:50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#333;
  color:#fff;
  text-align: center;
  padding: 20px;
  z-index: 100;
  padding-top: 100px;
  padding-bottom: 100px;
}

/*========= レイアウトのためのCSS ===============*/

h1{
  font-size:1.2rem;
}

h2{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 30px 0;
}



small{
  background:#333;
  color:#fff;
  display: block;
  text-align: center;
  padding:20px;
}
.zozo{position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 2.5vw;
width: 27.9vw;}


.zozo3{position: absolute;

  right: 0.7vw;

  bottom: 2.5vw;
  width: 11vw;}

.zozo2{position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
  width: 30vw;}

.uru{width: 7%;
left: 9%;
top: 38%;}


nav ul li a{
  display: block;
  text-decoration: none;
  color: #666;
  transition:all 0.3s;
}

nav ul li.current a,
nav ul li a:hover{
  color:#fff;
}

.vib1{
width: 100%;
}

.vib2{width: 43.4%;
  aspect-ratio: 1 / 0.7;
  position: relative;
margin: auto;}

.vib2 img{position: absolute;
left: 0;
top: 0;}

.cry{position: absolute;
  width: 100%;
  mix-blend-mode: multiply;
bottom: 0;}

nav ul li.current .en{background-color: black;}


.noz{padding-bottom: 150px;}


.scroll{width: 70px;
bottom: -70px;
left: unset;
right: 50px;
position: absolute;
}

.byon{position: sticky;
  top: 0;
place-items: center;
display: grid;
height: 100vh;
}

.botans{width: 100%;
position: unset;}

.ami8 img{width: 500px;}

#mini320{display: none;}

.hidarino{position: sticky
  ;
  width: 50vw;
  height: 100vh;
left: 0;
top: 0;
object-fit: cover;
}

.amazo{position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
width:47%;
aspect-ratio: 0.235 / 0.054;
z-index: 5;
}

.amazo img{position: absolute;}

.hidarino img{height: 100%;
object-fit: cover;}

#fixed-bg{
  width: 500px;
  left: 50%;

}

#fixed-bg{
  height: 100vh;
  background-size: cover;   /* ← 歪まない */
  background-position: center;
}

.logo img{width: 100%;
  height: auto!important;}

  .migino{position: absolute;
  left: calc(100% + 500px );
top: 0;
height: 100%;
width: calc(50vw - 500px);}
.migino img{object-fit: cover;
height: 100vh;}

.contentboss{width:33vw;
height: calc( 100vh - 32px);
}

.blue{height: 32px;}

.kuri{width: 100%;}
.boss{padding-top: 32px;}

.anidelay12{animation-delay: 2.7s!important;}
.anidelay13{animation-delay: 2.8s!important;}
.anidelay14{animation-delay: 2.9s!important;}
.anidelay15{animation-delay: 3s!important;}
.anidelay16{animation-delay: 3.1s!important;}

#mini320{display: none;}

.yoda{top: -300%;}

.yoda img{height: auto!important;

object-fit: unset!important;}

.kou{aspect-ratio: 0.9 / 0.736;
  position: relative;
  width: 100%;
height: unset;}

.lemon{width: 86.9%;
aspect-ratio: 0.869 / 0.15;}



.amu{position: relative;
width: 100%;
}

.amu .kokusi{bottom: -5%;}


}


@media (max-width: 1099px) {

.hane.dos{display: block;}
}

@media (max-width: 374px) {

  .yott1{width: 80%;
  right: 0;
bottom: 25dvh;}

  .iida1{width: 70%;
  margin: auto;
left: 0;
right:0;}

  .iida{aspect-ratio: 1 /0.27;
  }



}