.ex13{display: flex;
  margin-top: -6%;
  width: 130%;}
  
  
  
  
  
  .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: hidden;
  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: hidden;
  width: 0%;
transition: all 1s;}

.check img{width: 100vw;}

.biyou1{width: 0%;
overflow: hidden;
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: hidden;
transition: all 1s;
}

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

.point4{overflow: hidden;}

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

.point4 div:nth-child(2){overflow: hidden;
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: hidden;
  width: 100%;}

  .zes3{overflow: hidden;
    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: hidden;
  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: hidden;}
.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: hidden;}
#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;
}

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

.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%;
aspect-ratio: 1/0.322;
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;
}



#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: hidden;
transition: all 1s;
transition-delay: 0.5s;
height: 0;}

.lt6f{overflow: hidden;
  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: hidden;
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: hidden;
  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;
}

#sec7{background-color: white;
overflow: hidden;
width: 100%;
padding-bottom: 10vw;}

#sec7 div:nth-child(2){opacity: 0;
transform: translateX(30px);
transition: all 1s;}

#sec7 div:nth-child(3){opacity: 0;
  transform: translateX(-30px);
  transition: all 1s;}

  #sec7 div:nth-child(4){opacity: 0;
    transform: translateX(30px);
    transition: all 1s;}

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

#sec6{width: 100%;
margin-bottom: 10vw;
}

.zes2a .run{width: 90.7vw;
padding-bottom: 10vw;}

#mezo ul{width: 61.2%;}

#ten{line-height: 0;}

.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%;}



.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%;
}


#sec5{background-color: #EBE9E0;}

#sec5 .run{width: 78.7%;}

.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{margin-right: 2.3vw;}

.ltt3{ 
width: 100%;
aspect-ratio: 1/2.16;
position: relative;
}

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

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

.ltt4{line-height: 0;}

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

   z-index:0;

   top: 0;
   left: 0;


  }




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


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


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

#lk4x{overflow: hidden;
  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: hidden;
  animation: fadein 1 1s;
  animation-delay: 2s;
animation-fill-mode: forwards;
opacity:  0;}


#lk6{overflow: hidden;
  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: hidden;
  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%{width: 0%;}

    100%{width: 100%;}
  }
   
   /*=== 画像の設定 ======================================= */
   #viewer1 img {
	
	position   : absolute;
						/* 画像のサイズを表示エリアに合せる */

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

  object-fit: cover;

}

#viewer1 img.show {
	opacity: 1;
  }

  #viewer3{
  
    position   : absolute;
    overflow   : hidden;
              /* 画像のサイズに合わせて変更ください */
    width      : 100vw;
    height     :100vh;
       /* サンプルは中央寄せの背景：白 */
     padding: 0px;
     margin: auto;
  
     z-index:0;
  
     top: 0;
     left: 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;
}

.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;
  aspect-ratio: 1/2.16;
width: 100%;
z-index: 5;
position: relative;}
.ei{
  height: auto;
position: relative;
background-color: #EBE9E0;
z-index: 5;
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 1/0.322;
}

.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: hidden;
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: hidden;
transition: all 0.5s;}

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

        .lz4xx{width: 0%;
            height:43vw ;
            position: absolute;
        overflow: hidden;
        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;}

#sec8 div{line-height: 0;}
.nom4{height: 16.4vw;
position: relative;

}

#sec8{padding-bottom: 45vw;
  background-color: #ECF081;
}


.nom3{padding-bottom: 10vw;}

.nom4 div{position: absolute;
left: 0;
top: 0;}
#sec7 div:nth-child(3){margin-top: -15vw;}
#sec7 div:nth-child(4){margin-top: -11vw;}
.nom3{background-color: #ECF081;}
#tohoho{position: absolute;
bottom: 0;}

#sec8 div:nth-child(3){position: relative;
z-index: 2;}
#sec8 div:nth-child(4){margin-top: -28.5vw;}

.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: hidden;
    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: hidden;
}

.lz26{animation: jump 2s infinite;}

.dd1{animation: jump infinite 1s;}

.didy{width: 100%;
height: 0;
overflow: hidden;
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: hidden;
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: hidden;
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: hidden;
    transition: all 1s;
    transition-delay: .5s;
}

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

.lz33 div{position: absolute;}

.hop{width: 0%;
overflow: hidden;
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: hidden;
  margin-top: -30px;

  }



  .slideshow {
	display: flex;
	padding: 0;
	margin: 0;
  }
  .content {
	width: 160vw;
	
	list-style: none;
	
  }



	  

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

  .wrap2 {
	display: flex;
	align-items: center;
  height: auto;
  overflow: hidden;
  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;}
  #sec9 div{opacity: 0;
transition: all 1s;}

.dandan{opacity: 1;}

.toma{opacity: 0;
transition: all 1s;}
  
  .slide-paused:hover .slideshow {
	animation-play-state: paused;
  }

  #sec10{padding-bottom: 100px;
display: none;}

  .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: hidden;
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: hidden;}

  .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: hidden;
    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;
	top: 4px;
	right: 4px;
    width: 60px;
    height:90px;
	cursor:pointer;
    z-index: 2;
  
    opacity: 0.6;
}



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

.lz9 div{position: absolute;}


body.fixed {
    width: 100%;
    height: 100%;
    position: fixed;
    }

    .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: hidden;
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;}

.rep{padding-bottom: 15vw;

background-color: #D0B958;}


.bero{display: block;}


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

.product{position: absolute;
  bottom: 0;
width: 100%;
aspect-ratio: 1/0.944;
transition: all 1s;
opacity: 0;
}

.sukeyoko{width: 0%;
overflow: hidden;
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: hidden;}

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

.product div{position: absolute;}

.product div:nth-child(3){animation: asb2 3s infinite;}


.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: hidden;
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: hidden;
width: 0%;
animation: yokoni 1s 1;
opacity: 1;
animation-fill-mode: forwards;
animation-delay: 1s;}

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

@keyframes yokoni{
0%{width: 0%;}

100%{width: 100%;}

}


.nl3_2{width: 0;
overflow: hidden;
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: hidden;
transition: all 1s;
}

.suketate{overflow: hidden;
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: hidden;
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: hidden;
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: hidden;
transition: all 1s;
transition-delay: 1s;}

.nl3_7 div:nth-child(5){height: 0;
  overflow: hidden;
  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/0.75;
  padding-top: 30%;
  padding-bottom: 20%;
}

.bt1x{position: absolute;
top: 15%;
left: 7%;}

.slcen{width: 55%;

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

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

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

}

.staff{line-height: 0;}


/* Custom arrows */



/* 両端のスライドを半分表示するためのカスタマイズ */
.slick-slide {
  transition: transform 0.3s ease;
}
.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%;}
  

#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;
}

/* Ensure that each section has different heights */

.zzz{line-height: 0;}

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

  .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;}

    #sec8{padding-bottom: 200px;}

.app1 div{overflow: hidden;}
    .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;}

    #sec7{position: relative;
      margin-top: 50px;
    z-index: 3;}


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



    #sec6{margin-bottom: 0;}

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

    .nom3{padding-bottom: 40px;}
.nom4{height: 81px;}
    .nom4 img{width:357px;}
    #sec8 div:nth-child(4){margin-top: -152px;}

    .nom1{margin-top: -321px;
  }
  
  .biyou{margin-top: -5%;}


    #yori1{height: 956px;}

    #yori2{height: 804px;}

    #sec7 div:nth-child(3){
      margin-top: -72px;
    }

    #sec7{padding-bottom: 40px;}

    #sec7 div:nth-child(4){margin-top: -56px;}
    .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   : hidden;
                /* 画像のサイズに合わせて変更ください */
      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: hidden;
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;
}
    #viewer2 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{ object-fit: cover;
    
    height: 100%;}
    
    #viewer2 div.show {
      opacity: 1;
      }
    

    .desu1{width: 50vw;
      position: relative;
      overflow: hidden;
    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;}

    .close{width: 100px;
    height: 100px;}
.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;}
    .content{width: calc(500px*1.6);}
    #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: hidden;}

    .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: 1000px;
margin:auto ;
display: flex;}
.wrapper{width: 500px;
  

margin-right: 0;
margin-left: auto;}

.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: 100vw;
    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{
justify-content: space-between;

}

.logo{width: 287px;
  margin-left: -50px;
  height: 13vh;
  overflow: hidden;
}
.bt2x{top:18%;}

.bt1x{top:18%;}
  .vibes {width: 297px;
  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;}

  #gog{margin-top: 5vh;}

  .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;
}


.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{position: relative;
width: 297px;
aspect-ratio: 1/1.136;}

.vib1 img{position: absolute;}

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;
padding-top: 10vh;
}

.botans{width: 100%;
position: unset;}

.ami8 img{width: 500px;}

#mini320{display: none;}

}
#viewer3{display: none;}
#mini320{display: none;}
@media (max-width: 1099px) {

.hane.dos{display: block;}
}

@media (max-width: 374px) {
#viewer1{display: none;}

#viewer3{display: block;}

  #sec1{height: 100vh;}
.ei{height:auto;}
  .nl3_1{width: 320px;}
  .homies{width: 320px;
  top: -18px;}
#moge img{width: 320px;}
.char img{height: 30px!important;}
.container{top: 95px;}



}