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



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


.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: hidden;
    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: hidden;
      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: hidden;
      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;
}
.cover{width: 100vw;
height: 100vh;
display: grid;
justify-content: center;
place-items: center;
position: fixed;
z-index: 1000;
animation: cover 1s 1 2s;
animation-fill-mode: forwards;
opacity: 1;
background-color: white;
display: none;

}

.cover img{width: 30%;}

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

}

100%{visibility: hidden;
  opacity: 0;

}


}



.yokoni{animation: yokoni 1 1s 3s;
  animation-fill-mode: forwards;
  mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	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: hidden;
	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;


  }

}

    .migi{   mask-image: none;
      mask-size: 0% 0%;
      overflow: hidden;
      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: hidden;
      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;
    transition-delay: 0.5s;

      }

      .ue{   mask-image: none;
      mask-size: 0% 0%;
      overflow: hidden;
      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: hidden;
	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: hidden;
	clip-path: circle(0%);
	line-height: 0;
}

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

	clip-path: circle(100%);
}


.flip{

	rotate: y 180deg;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	}

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


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

}


.yure2{animation: yure2 infinite 8s;}

.yure3{animation: yure3 infinite 8s;}

.yure4{animation: yure4 infinite 10s;}

.yure5{animation: yure5 infinite 8s;}

.yure6{animation: yure6 infinite 8s;}

.anidelay1{animation-delay: 0.2s!important;}
.anidelay2{animation-delay: 0.4s!important;}
.anidelay3{animation-delay: 0.6s!important;}
.anidelay4{animation-delay: 0.8s!important;}
.anidelay5{animation-delay: 1s!important;}

@keyframes yure2{
0%{rotate: 3deg;}
45%{rotate: 0deg;}
50%{rotate: 3deg;}
65%{rotate: 0deg;}
100%{rotate: 3deg;}

}


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

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

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

.jump1{animation: jump1 infinite 3s;}

.jump2{animation: jump2 infinite 3s;}

.jump3{animation: jump1 infinite 1s;}

@keyframes jump1{
0%{transform: translateY(0);}
50%{transform: translateY(10%);}
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;}



#viewer1{

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

   z-index:0;

   top: 0;
   left: 0;


  }





@keyframes asb{

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

@keyframes asb2{

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


@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 0s;

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




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

li{margin: 0;
    padding: 0;}
a{text-decoration: none;}



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

}

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


  }



  .slideshow {
	display: flex;
	padding: 0;
	margin: 0;
  }
  .content {
	width: 295vw;

	list-style: none;
margin-right: 0.5%;
  }





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

  .cv .slideshow {
    display: flex;
    animation: loop-slide 15s 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 ;
  }

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

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



#pc{display: none;}

/* Ensure that each section has different heights */

.zzz{line-height: 0;}



/****************** sp ******************/

.sl2{	animation: loop-slide2 25s infinite linear  both;}

.sl2 .content{margin-right: 0;
height: 100vh;
width: auto;}
.sl2 .content img{height: 100%!important;
width: auto!important;}


.sl3{	animation: loop-slide 10s infinite linear  both;}

.sl3 .content{margin-right: 0;
height: 100vh;
width: auto;}
.sl3 .content img{height: 100%!important;
width: auto!important;}



.pl1_1{margin: auto;
width: 68.2vw;
}

.pl1_2{position: relative;
width: 100vw;
margin: auto;
aspect-ratio: 1 / 0.526;}

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

.nock1{animation: nock1 infinite 1.5s;}

.nock2{animation: nock2 infinite 1.5s;
opacity: 0;}

@keyframes nock1{

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

  50%,99%{opacity: 0;}
}

@keyframes nock2{

  0%,49%,100%{opacity: 0;}

  50%,99%{opacity: 1;}
}

.top{position: relative;
width: 100vw;
height: 100dvh;}

.les1{position: absolute;

top: 0;
left: 0;}

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

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

.wonder3{display: flex;
justify-content: space-between;
width: 61.8%;
margin: auto;
}
.ww2{margin-bottom: 11.5vw;}


.w3{width: 27vw;}

.g3{justify-content: center;}

.w3_1{margin-left: 7.1svw;}

.w3_3{margin-right: 7.1svw;}

.lineup{padding-bottom: 17vw;
background-color: #F7F6F4;}

.wrap{overflow: clip;
width: 100vw;}




.tex1{font-size: 14px;
line-height: 23px;
letter-spacing: 0.3px;
color: #FF454C;
width: 85.4%;
margin: auto;
text-align: justify;
font-family:YakuHanJP, "Zen Kaku Gothic New", sans-serif;
font-weight: 600;
font-style: normal;
}
.tex1 p{color: #0D0D0D;
margin: 0;}

.pep1{margin-bottom: 10%!important;}

.peppa{margin-top: -9.3%!important;
position: relative;
z-index: 2;}

.rec1{width: 100%;
margin: auto;}

.reco{background-color: #F8FABD;
border-radius: 20px 20px 0 0;
margin-top: 9.7%;
padding-bottom: 13.8%;
}


.x1{width: 62.8%;
margin-left: 7.4%;
margin-top: 10%;
position: relative;
z-index: 1;
}

.x2{width: 80.8%;
margin: auto;
margin-right: 0;
margin-top: -8%;}

.x3{width: 41.8%;
  margin-bottom: 2%;
margin-left: 46.4%;
margin-top: 10.5%;
}
.x4{width: 100%;
margin-top: -5%;
}

.x5{width: 45.6%;
margin-left: 6.4%;
margin-top: 9.5%;}

.x6{width: 92.8%;
margin-left: 0;
margin-top: -6%;
}

.tpl{width: 72.8%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.chan{padding-bottom: 0!important;}


.meka{margin-top: -9.2%;}

#sec3 .meka{margin-top: -9.5%;}

#sec4 .reco{background-color: #FFEB83;}

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

#sec2 .reco{background-color: #D9CBFD;}

#sec3 .reco{background-color: #EBEBD2;}

#sec2 .peppa{margin-top: -9.6%!important;}
.cv{width: 90%;
margin: auto;
margin-top: 9.2%;
position: relative;
aspect-ratio:  0.9 / 0.749;
display: grid;
place-items: center;
justify-content: center;
overflow: clip;
}

.cvv{position: absolute;
  overflow: clip;
  pointer-events: none;
top: 0;
left: 0;}

.cv .content{width: 35.6vw;
margin-right: 2%;}
.cv .vin{overflow: clip;
width: 90vw;}



.y1{width: 45.6%;
margin: auto;
margin-top: 12%;}

.y2{width: 85.4%;
margin: auto;
margin-top: 4.4%;
}

.y3{width:50.5%;
margin: auto;
margin-left: 12.8%;
margin-top: 13.3%;}

.y5{width: 46.5%;
margin-left: 46%;
margin-top: 0%;}
.y6{width: 87.7%;
margin-left: 0;
margin-top: -8%;
margin-bottom: 10.5%;
}

#sec2 .cv{margin-top: 0;}

.z1{width: 39.2%;
margin-left: 52.6%;
margin-top: 11.3%;
position: relative;
z-index: 2;
}
.z2{width: 84.6%;
  margin-left: 0;
  margin-top: -10%;}
  .z3{width:40% ;
    margin-left: 31.5%;
    margin-top: 10.5%;
  position: relative;
  z-index: 2;
  }
    .z4{width: 100%;
      margin-left:0 ;
   }
      .z5{width:78.2% ;
        margin-left: auto;
        margin-right: 0;
       }
        .z6{width:44.9% ;
          margin-left: 12.8%;
     margin-top: -30.5%;
     margin-bottom: 26.7%;
    position: relative;
    z-index: 1;
    }

          .lz{line-height: 0;}

          #sec3 .cv{margin-top: 15.9%;}

          .big1{opacity: 0;
          transform: scale(0);
        transition: all 0.2s;}

        .big1x{opacity: 1;
          transform: scale(1);
 }


          html {
            scroll-behavior: smooth;
          }
.zama{display: flex;
z-index: 3;}
          .zama1{width: 40vw;
          margin-right: 2.6vw;}
          .zama1 a {
            display: grid;
            place-content: center;
            width: 100%;
            height: 100%;
            background-color: #000;
            border-radius: 45vw;
            color: #fff;
            letter-spacing: 0.04em;
            font-size: 3.2vw;
          }
          .zama2{width: 9vw;}

          .zamax {
            position: absolute; /* 初期は絶対配置 */
            bottom: auto;
            opacity: 0;
            transition: all 1s;
          }

          .zamax.fixed {
            position: fixed;
            bottom: 5vw;
opacity: 1;
            right: 5vw;
            z-index: 100;
          }

          .tpb{position: absolute;
          left: 0;
        right: 0;
        margin: auto;
      bottom: 7.7vw;
      width: 85.6%;
      }

      .sizee{width: 85.6%;
      margin: auto;
    margin-top: 5%;
    }
/****************** sp ******************/

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

  .vd{width: ;}

  .uke1{margin-bottom: 30px;
  margin-top: 20px;}

  .asi{background-color: #F7F6F4;}

  .tpl{width: 262px;}

.tpb{width: 334px;
bottom: 30px;}
  .sticky-div {
    position: sticky;
    top: 0px; /* 任意 */
    width: 40vw;
    height: 100vh;
    margin-top: -100vh;
    overflow: clip;
  }

  .sticky-div img {
  height: 100%;
  object-fit: cover;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
  }

  .cv .vin{width: 100%;}
  .kaku1:hover .igai{animation: hope infinite 1s;
}

@keyframes hope{
  0%,49%,100%{transform: scale(1);}

  50%,99%{transform: scale(-1, 1);}


}

  .zama{display: flex;
    margin-left: 5px;
    right: unset;
    left: 2vw;
    bottom: 2vw;
}

.zamax.fixed{bottom: 2vw;}
  .zama1{width:160px ;
    margin-right: 10px;}
  .zama1 a {
        display: grid;
        place-content: center;
        width: 100%;
        height: 100%;
        background-color: #000;
        border-radius: 35px;
        color: #fff;
        letter-spacing: 0.04em;
        font-size: 12px;
  }
  .zama2{width:35px ;}

  .uke{width: 94px;
margin-bottom: 64px;
}

  .kaku{margin-bottom: 20px;}

  .ike{position: sticky;
    z-index: 2;
    margin: auto;
    margin-right: 0;
height: 100vh;
  top: 0;
right: 0;
width: 242px;
}
.asi{display: grid;
  place-items: center;
height: 100%;}

  #sec1{border-top: none;}

  .sec1{padding-bottom: 0;}

  .cv .content{width: 139px;}
.chage{width: 390px;
  margin-left: calc(40vw + (60vw - 632px)/2);
padding-bottom: 50px;
}
.aska{width:40vw;
  height: 100vh;
position: sticky;
top: 0;}
.aska img{object-fit: cover;
height: 100%;}
/****************** new ******************/


.pl1_1{width: 267px;}
.les1{height: 100%;}

.pl1_2{
  width: 390px;
  aspect-ratio: unset;
height: 206px}

.blue{width: ;}

.blue .content{width:131vw;
  display: grid;
place-content: center;}
/****************** new ******************/



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



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

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


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


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


.wrapperz{width: 100%;
margin-top: -100vh;
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;}



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

.gedan{width: 100vw;

position: relative;}

.logo{width: 287px;
  position: fixed;
  display: block;
  left: 20px;
  top: 30px;
  height: 100%;
}
.bt2x{top:18%;}

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



/*========= レイアウトのための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{
width: 100%;
}

.vib2{width: 43.4%;
margin: auto;}

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;
}
.circle{
	mask-size: 110% 110%;
	transition: all 1.5s;

	clip-path: circle(100%);
}


}