body{margin: 0;}
.exwrap img{width: 100%;}

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

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



.mokuji{width: 100%;}
.topbox{
margin: auto;
margin-top: 4.6%;

position: relative;
width: 100%;
aspect-ratio: 1/1.4;
}

.sh2{overflow: hidden;
    width: 100%;
aspect-ratio: 1/0.95;}

.logo{width: 60%;
    left: 0%;
    right: 0%;
opacity: 0;
	animation: fadein 1 1s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
margin: auto;
top: 34%;
filter: invert(1);

position: absolute;
}

.mktop{margin-top: 15%;}

.tpp{display: flex;
	justify-content: center;
margin: auto;}
.logo2{width: 40%;
margin: auto;
position: absolute;
top: 69%;
left: 0;
right: 0;
margin: auto;
opacity: 0;
	animation: fadein 1 1s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.logo3{width: 71.3%;
margin: auto;
margin-bottom: 3.8%;
margin-top: 10%;}

.logo4{width: 85%;
margin: auto;
margin-bottom: 7.9%;
}


.tpbun{width:86.9%;
margin: auto;
font-family: "dnp-shuei-gothic-kin-std", sans-serif;
font-weight: 600;
font-style: normal;
font-size: 15px;
line-height: 25px;
}

.mk{position: relative;
width: 100%;
aspect-ratio: 1/0.262;
margin-bottom: 2.6%;
}
.mk img{position: absolute;}

#ugo{animation: infinite 2s asb;}

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

    50%{rotate: 1deg;}

    100%{rotate: 0deg;}
}

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

    50%{rotate: -1.5deg;}

    100%{rotate: 0deg;}
}

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

    50%{rotate: 1deg;}

    100%{rotate: 0deg;}
}

#ugo2{animation: infinite 3s asb;}

#ugo3{animation: infinite 4s asb;}


.down{position: relative;
width: 100%;
aspect-ratio: 1/0.256;
}

.down img{position: absolute;
opacity: 0;
animation: infinite fadein 1.5s;}

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

60%{opacity: 0;}

    100%{opacity: 1;}
}
.scene{padding-bottom: 10%;}
#d2{animation-delay: 0.5s;}

#d3{animation-delay: 1s;}

.sctop{width: 100%;
position: relative;
aspect-ratio: 1/0.623;
}
.gop{background-color: #96E6BE;
    font-size: 10px;
    line-height: 15px;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
padding: 1.5%;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
#gop1 {
    top: 25%;
    left: 10%;
}

#gop2 {
    top: 16%;
    left: 52%;
}

#gop3 {
    top: 23%;
    left: 84%;
}

#gop4 {
    top: 40%;
    left: 82%;
}

#gop5 {
    top: 60%;
    left: 82%;
}

#gop6 {
    top: 55%;
    left: 37%;
}

#gop7 {
    top: 53%;
    left: 4%;
}

#gop8 {
    top: 68%;
    left: 6%;
}

#gop9 {
    top: 83%;
    left: 10%;
}

#gop10 {
    top: 84%;
    left: 70%;
}

#sc2 #gop1 {
    top: 34%;
    left: 7%;
}

#sc1{padding-bottom: 20%;}

#sc2 #gop2 {
    top: 16%;
    left: 52%;
}

#sc2 #gop3 {
    top: 30%;
    left: 68%;
}

#sc2 #gop4 {
    top: 45%;
    left: 52%;
}

#sc2 #gop5 {
    top: 62%;
    left: 75%;
}

#sc2 #gop6 {
    top: 42%;
    left: 5%;
}

#sc2 #gop7 {
    top: 62%;
    left: 3%;
}

#sc2 #gop8 {
    top: 68%;
    left: 31%;
}

#sc2 #gop9 {
    top: 88%;
    left: 10%;
}

#sc2 #gop10 {
    top: 92%;
    left: 65%;
}

#sc3 #gop1 {
    top: 32%;
    left: 7%;
}

#sc3 #gop2 {
    top: 16%;
    left: 10%;
}

#sc3 #gop3 {
    top: 36%;
    left: 75%;
}

#sc3 #gop4 {
    top: 48%;
    left: 72%;
}

#sc3 #gop5 {
    top: 65%;
    left: 70%;
}

#sc3 #gop6 {
    top: 40%;
    left: 5%;
}

#sc3 #gop7 {
    top: 53%;
    left: 4%;
}

#sc3 #gop8 {
    top: 66%;
    left: 18%;
}

#sc3 #gop9 {
    top: 90%;
    left: 10%;
}

#sc3 #gop10 {
    top: 84%;
    left: 70%;
}

#sc4 #gop1 {
    top: 35%;
    left: 7%;
}

#sc4 #gop2 {
    top: 20%;
    left: 60%;
}

#sc4 #gop3 {
    top: 33%;
    left: 56%;
}

#sc4 #gop4 {
    top: 45%;
    left: 62%;
}

#sc4 #gop5 {
    top: 70%;
    left: 83%;
}

#sc4 #gop6 {
    top: 47%;
    left: 37%;
}

#sc4 #gop7 {
    top: 51%;
    left: 4%;
}

#sc4 #gop8 {
    top: 60%;
    left: 20%;
}

#sc4 #gop9 {
    top: 90%;
    left: 15%;
}

#sc4 #gop10 {
    top: 91%;
    left: 65%;
}

#sc4 #gop11 {
    top: 72%;
    left: 40%;
}

#sc4 #gop12 {
    top: 59%;
    left: 53%;
}

#sc5 #gop1 {
    top: 23%;
    left: 9%;
}

#sc5 #gop2 {
    top: 22%;
    left: 76%;
}

#sc5 #gop3 {
    top: 35%;
    left: 75%;
}

#sc5 #gop4 {
    top: 47%;
    left: 67%;
}

#sc5 #gop5 {
    top: 60%;
    left: 82%;
}

#sc5 #gop6 {
    top: 62%;
    left: 46%;
}

#sc5 #gop7 {
    top: 35%;
    left: 5%;
}

#sc5 #gop8 {
    top: 47%;
    left: 9%;
}

#sc5 #gop9 {
    top: 92.5%;
    left: 7%;
}

#sc5 #gop10 {
    top: 92%;
    left: 70%;
}


#sc5 #gop11 {
    top: 63%;
    left: 10%;
}

.kao1{margin-top: -13%;}

#kao{animation: kao infinite 3s; }

#kao2{animation: kao2 infinite 3s; }

.kao2{margin-top: -17%;
    margin-bottom: -15%;
position: relative;
z-index: 2;}

@keyframes kao{

    0%{rotate: 0deg;}

    50%{rotate: 7deg;}


    100%{rotate: 0deg;}
}

@keyframes kao2{

    0%{rotate: 0deg;}

    50%{rotate: 3deg;}


    100%{rotate: 0deg;}
}
.star1{width: 34.9%;
animation: yura 2s infinite;
left: 3%;}

.star2{width: 0%;
transition: all 1s;
transition-delay:0.5s!important ;
opacity: 1!important;
overflow: hidden;
}

.ou{padding-left: 7.7%;
padding-right: 7.7%;
border-radius: 20px;
padding-bottom: 40%;
position: sticky;
}

#ou4{padding-bottom: 20%;}

#ou1{background-color: #FCE4E4;
top: -180%;}

#ou2{background-color: #E4FCFB;
margin-top: -9%;
top: -180%;}

#ou3{top: -180%;}
#ou4{top: -180%;}

.balls{display: flex;
line-height: 0;
margin-bottom: 5%;
}

.ball1{width: 35.5%;
aspect-ratio: 0.355/0.3;
position: relative;}

.ball1 img {position: absolute;}

.ball2{width: 64.8%;}

.tais{display: flex;
margin-top: 10%;}

.tais1{width:42% ;}

.tais2{width: 57.9%;}

.outa{width: 100%;
aspect-ratio: 1/0.836;
position: relative;
}

#ou3{background-color:#F7FCE4 ;
margin-top: -9%;}

#ou4{background-color:#FCEFE4 ;
    margin-top: -9%;}



.buy1{width: 27.6%;
    top: 7%;
    right: 7%;
animation: infinite 2s buy1;
rotate: -18deg;}

#check{margin-top: 12%;
margin-bottom: 5%;}

#ou2 .buy1{right: unset;
left: 5%;}

#ou2 .buy2{left: unset;
right: 15%;
rotate: -10deg;
bottom: 1%;}

#ou2 .kao1{margin-top: -15%;}


.buy2{width: 23.3%;
rotate: 15deg;
left: 15%;
bottom: 6%;}

@keyframes buy1 {
    0%{rotate: -18deg;}

50%{rotate: 18deg;}

100%{rotate:-18deg;}

}

a {
    -webkit-tap-highlight-color: transparent; /* 強調をなくす */
  }

.outa div{position: absolute;}

.way {
    cursor: pointer;}


#sec2 .sctop{aspect-ratio: 1/0.75;}

#sec2{margin-top: 15%;}

.rza {
	right: -685px;
}


#sec3 .sctop{aspect-ratio: 1/0.66;}

#sec3{background-color: #FEFEFA;
margin-top: -9%;
position: relative;
z-index: 2;
}
.gop a{color: white;
text-decoration: none;}
.sctop div{position: absolute;
top: 0;
left: 0;}

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

.sctop div:nth-child(2){overflow: hidden;
	transition: all 1.5s;
	transition-delay: 0.6s!important;
width: 0%;}
.sctop div:nth-child(2) img{width: 100vw;}

#con1{width: 46%;
margin-right: 3%;
line-height: 0;
padding-top: 0.5%;
padding-bottom: 0.5%;
}

.star{width: 100%;
aspect-ratio: 1/0.254;
position: relative;}

.star div{position: absolute;}

#wrap1{width: 600%;
    height: 10%;
margin-top: 0;
background-color:#97E6BF ;}

body{   font-family: "dnp-shuei-gothic-kin-std", sans-serif;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}

.sct{width: 81.3%;
    text-align: justify;
    font-size: 15px;
    line-height: 25px;
    font-family: "dnp-shuei-gothic-kin-std", sans-serif;
font-weight: 600;
font-style: normal;
margin: auto;
margin-bottom: 9.2%;
}

.sc1_1{position: relative;
width: 100%;
aspect-ratio: 1/1.4444;}

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


.shops{width: 81.8%;
margin: auto;
display: flex;
margin-top: 8%;}

.shop{width: 50%;
text-align: center;
}

#sc1 .shop{color: #318376;}

.item{position: relative;
}

.item div{position:absolute;}

#item1{width: 60.8%;
aspect-ratio: 0.608/0.585;
margin: auto;
margin-right: 0;
margin-top: 10%;}

#item1 .item1_3{width: 53.2%;
top: 5%;}
#item2 .item1_3{width: 58.1%;
    top: 0%;
left: 15%;}


.item {

    cursor: pointer;
}

/* オーバーレイ */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.yohaku{margin-bottom: 2%;
display: inline-block;}

.bigpim{width: 242px;
margin-bottom: 68px;
transform: translateX(-35px);}

#sec3 #wrap1{background-color: #D4EF63}

#sec3 #con1{margin-right: 1%;}

.bye{width: 43%;
margin: auto;
animation: asb infinite 2s;
}

.online{width: 70%;
margin: auto;
margin-top: 5%;
margin-bottom: 10%;
}

.cre{margin: auto;
width: 41%;}

.lan{top: -13%;}

/* ポップアップのスタイル */
.popup-box {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    padding:5%;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    text-align: justify;
    border: 3px solid #D4EF63;
    font-size: 14px;
    line-height: 23px;
    font-weight: 300;
}

#sec3 #vin2{margin-top: 10%;
margin-bottom: 10%;}

/* 閉じるボタン */
.close-btn {

    color: white;
    cursor: pointer;
    margin: auto;
    margin-right: 0%;
    margin-top: 0%;
    width: 8%;
}

.close-btn img{width: 100%;}

#item3 .item1_3{width: 44.1%;
 bottom: 0%;
right:5%;}

#item2{width: 55.6%;
    margin-top: -40%;
aspect-ratio: 0.556/0.523;}

.popup-box img{width: 100%;}

#item3{width: 80.3%;
margin: auto;
margin-right: 0;
margin-top: -28%;
aspect-ratio: 0.803/0.551;}

.sh1{width:43.8% ;
margin: auto;
margin-bottom: -12%;
}

#sh1{animation: infinite 2s yura;}

#sh2{animation: infinite 2s yura2;}

.moji{width: 165px;}

.bigen{border-radius: 50%;
background-color: white;
width: 16px;
height: 16px;
display: grid;
justify-content: center;
place-items: center;
border: 1px solid #AAAAAA;
flex-shrink: 0;
position: relative;
z-index: 2;
}

#sc2 .shop{color: #833141;}

#sc3 .shop{color: #C47F3A;}

#sc4 .shop{color: #AAAAAA;}

#sc5 .shop{color: #865B29;}



.jayz{width: 180px;
transform: translateX(-35px);
}



#item6{width: 75.6%;
margin: auto;}

.girl{position: relative;
width: 100%;
aspect-ratio: 1/0.636;
margin-top: 10%;
}

.girl img{position: absolute;}

.boy{position: relative;
    width: 100%;
    aspect-ratio: 1/0.749;
    margin-top: -20%;
    }

    .boy img{position: absolute;}


.sh3{font-size: 15px;
line-height: 22px;
margin-bottom: 1.5%;}

.sh4{font-size: 12px;
margin-bottom:3%;}


.sh5{font-size: 15px;

    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
margin-bottom: 12.5%;}
.sh6{width: 70%;
margin: auto;}

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


    100%{rotate: 360deg;}
}


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


    100%{rotate: -360deg;}
}
#vin2{margin-top: -7%;
position: relative;
z-index: 2;}

.wrap {
	display: flex;
	align-items: center;
width: 500%;
  height: auto;
  overflow: hidden;
  margin-top: 10%;

  }
  .slideshow {
	display: flex;
	padding: 0;
	margin: 0;
    overflow: hidden;
  }
  .content {

	list-style: none;
	width: 67.9%;


  }

  #sc2 #wrap1{background-color:#FC9BD3 ;
width: 750%;}

#sc3 #wrap1{background-color:#FAFA33 ;
width: 700%;}
#sc4 #wrap1{background-color:#AAFCFF ;
width: 780%;
}

#sc3 #con1{margin-right: 0.5%;}

#sc4 #con1{margin-right: 0.5%;}

#sc5 #wrap1{background-color:#FFC37E;
width: 700%;}

#sc5 #con1{margin-right: 1%;}

#sc2 #con1{margin-right: 1%;}

#vin3{rotate: -5deg;
margin-left: -10%;
margin-bottom: 5%;}

#wrap2{width: 600%;
margin-bottom: 10%;
}

.reco{margin-bottom: -5%;}


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


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

  #sc2 .contentC{border-color: #FC9BD3;}
#sc2 .gop{background-color: #FC9BD3;}

#sc3 .contentC{border-color: #FAFA33;}
#sc3 .gop{background-color: #FAFA33;
    color: black;}

    #sc3 .gop a{color: black;}

#sc4 .contentC{border-color: #AAFCFF;}

#sc4 .gop a{color: black;}
#sc4 .gop{background-color: #AAFCFF;
color: black;
}

#sc5 .contentC{border-color: #FFC37E;}
#sc5 .gop a{color: black;}
#sc5 .gop{background-color: #FFC37E;
    color: black;
}

  #viewer1{

animation: fadein 1 1s;
animation-fill-mode: forwards;
	   transition: all 0.5s;
position: relative;
	overflow   : hidden;
					  /* 画像のサイズに合わせて変更ください */
	width      :100%;
aspect-ratio: 1/1.444;
		 /* サンプルは中央寄せの背景：白 */
   padding: 0px;

   margin: auto;



  }


   /*=== 画像の設定 ======================================= */
   #viewer1 img {

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

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

}

#viewer1 img.show {
	opacity: 1;
  }

  #viewer2{

    animation: fadein 1 1s;
    animation-fill-mode: forwards;
           transition: all 0.5s;
    position: relative;
        overflow   : hidden;
                          /* 画像のサイズに合わせて変更ください */
        width      :100%;
    aspect-ratio: 1/1.372;
             /* サンプルは中央寄せの背景：白 */
       padding: 0px;

       margin: auto;
       margin-top: 10%;



      }


       /*=== 画像の設定 ======================================= */
       #viewer2 img {

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

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

    }

    #viewer2 img.show {
        opacity: 1;
      }


      #viewer3{

        animation: fadein 1 1s;
        animation-fill-mode: forwards;
               transition: all 0.5s;
        position: relative;
            overflow   : hidden;
                              /* 画像のサイズに合わせて変更ください */
            width      :100%;
        aspect-ratio: 1/1.444;
                 /* サンプルは中央寄せの背景：白 */
           padding: 0px;

           margin: auto;
           margin-top: 10%;



          }


           /*=== 画像の設定 ======================================= */
           #viewer3 img {

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

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

        }

        #viewer3 img.show {
            opacity: 1;
          }



          #viewer4{

            animation: fadein 1 1s;
            animation-fill-mode: forwards;
                   transition: all 0.5s;
            position: relative;
                overflow   : hidden;
                                  /* 画像のサイズに合わせて変更ください */
                width      :100%;
            aspect-ratio: 1/1.297;
                     /* サンプルは中央寄せの背景：白 */
               padding: 0px;

               margin: auto;
               margin-top: 10%;
margin-bottom: 10%;


              }


               /*=== 画像の設定 ======================================= */
               #viewer4 img {

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

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

            }

            #viewer4 img.show {
                opacity: 1;
              }



              #viewer5{

                animation: fadein 1 1s;
                animation-fill-mode: forwards;
                       transition: all 0.5s;
                position: relative;
                    overflow   : hidden;
                                      /* 画像のサイズに合わせて変更ください */
                    width      :100%;
                aspect-ratio: 1/1.444;
                         /* サンプルは中央寄せの背景：白 */
                   padding: 0px;

                   margin: auto;
                   margin-top: 10%;



                  }


                   /*=== 画像の設定 ======================================= */
                   #viewer5 img {

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

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

                }

                #viewer5 img.show {
                    opacity: 1;
                  }


				  #viewer6{

					animation: fadein 1 1s;
					animation-fill-mode: forwards;
						   transition: all 0.5s;
					position: relative;
						overflow   : hidden;
										  /* 画像のサイズに合わせて変更ください */
						width      :100%;
					aspect-ratio: 1/0.91;
							 /* サンプルは中央寄せの背景：白 */
					   padding: 0px;

					   margin: auto;
					   margin-top: 10%;



					  }


					   /*=== 画像の設定 ======================================= */
					   #viewer6 img {

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

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

					}

					#viewer6 img.show {
						opacity: 1;
					  }

					  #viewer7{

						animation: fadein 1 1s;
						animation-fill-mode: forwards;
							   transition: all 0.5s;
						position: relative;
							overflow   : hidden;
											  /* 画像のサイズに合わせて変更ください */
							width      :100%;
						aspect-ratio: 1/0.91;
								 /* サンプルは中央寄せの背景：白 */
						   padding: 0px;

						   margin: auto;
						   margin-top: 10%;



						  }


						   /*=== 画像の設定 ======================================= */
						   #viewer7 img {

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

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

						}

						#viewer7 img.show {
							opacity: 1;
						  }

						  #viewer8{

							animation: fadein 1 1s;
							animation-fill-mode: forwards;
								   transition: all 0.5s;
							position: relative;
								overflow   : hidden;
												  /* 画像のサイズに合わせて変更ください */
								width      :100%;
							aspect-ratio: 1/1.444;
									 /* サンプルは中央寄せの背景：白 */
							   padding: 0px;

							   margin: auto;
							   margin-top: 10%;



							  }


							   /*=== 画像の設定 ======================================= */
							   #viewer8 img {

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

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

							}

							#viewer8 img.show {
								opacity: 1;
							  }

                              #viewer9{

                                animation: fadein 1 1s;
                                animation-fill-mode: forwards;
                                       transition: all 0.5s;
                                position: relative;
                                    overflow   : hidden;
                                                      /* 画像のサイズに合わせて変更ください */
                                    width      :100%;
                                aspect-ratio: 1/1.11;
                                         /* サンプルは中央寄せの背景：白 */
                                   padding: 0px;

                                   margin: auto;
                                   margin-top: 10%;



                                  }


                                   /*=== 画像の設定 ======================================= */
                                   #viewer9 img {

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

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

                                }

                                #viewer9 img.show {
                                    opacity: 1;
                                  }

                                  #viewer10{

                                    animation: fadein 1 1s;
                                    animation-fill-mode: forwards;
                                           transition: all 0.5s;
                                    position: relative;
                                        overflow   : hidden;
                                                          /* 画像のサイズに合わせて変更ください */
                                        width      :100%;
                                    aspect-ratio: 1/0.91;
                                             /* サンプルは中央寄せの背景：白 */
                                       padding: 0px;

                                       margin: auto;
                                       margin-top: 5%;



                                      }


                                       /*=== 画像の設定 ======================================= */
                                       #viewer10 img {

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

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

                                    }

                                    #viewer10 img.show {
                                        opacity: 1;
                                      }

                                      #viewer11{

                                        animation: fadein 1 1s;
                                        animation-fill-mode: forwards;
                                               transition: all 0.5s;
                                        position: relative;
                                            overflow   : hidden;
                                                              /* 画像のサイズに合わせて変更ください */
                                            width      :100%;
                                        aspect-ratio: 1/0.91;
                                                 /* サンプルは中央寄せの背景：白 */
                                           padding: 0px;

                                           margin: auto;
                                           margin-top: 5%;




                                          }


                                           /*=== 画像の設定 ======================================= */
                                           #viewer11 img {

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

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

                                        }

                                        #viewer11 img.show {
                                            opacity: 1;
                                          }


										  #viewer12{

											animation: fadein 1 1s;
											animation-fill-mode: forwards;
												   transition: all 0.5s;
											position: relative;
												overflow   : hidden;
																  /* 画像のサイズに合わせて変更ください */
												width      :100%;
											aspect-ratio: 1/0.915;
													 /* サンプルは中央寄せの背景：白 */
											   padding: 0px;

											   margin: auto;
											   margin-top: 5%;




											  }


											   /*=== 画像の設定 ======================================= */
											   #viewer12 img {

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

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

											}

											#viewer12 img.show {
												opacity: 1;
											  }



										  #viewer13{

											animation: fadein 1 1s;
											animation-fill-mode: forwards;
												   transition: all 0.5s;
											position: relative;
												overflow   : hidden;
																  /* 画像のサイズに合わせて変更ください */
												width      :100%;
											aspect-ratio: 1/0.915;
													 /* サンプルは中央寄せの背景：白 */
											   padding: 0px;

											   margin: auto;
											   margin-top: 5%;




											  }


											   /*=== 画像の設定 ======================================= */
											   #viewer13 img {

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

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

											}

											#viewer13 img.show {
												opacity: 1;
											  }


										  #viewer14, #viewer15, #viewer16{

											animation: fadein 1 1s;
											animation-fill-mode: forwards;
												   transition: all 0.5s;
											position: relative;
												overflow   : hidden;
																  /* 画像のサイズに合わせて変更ください */
												width      :103%;
											aspect-ratio: 1/1.46;
													 /* サンプルは中央寄せの背景：白 */
											   padding: 0px;

											   margin: auto;
                                               margin-left: -1.5%;



background-color: green;

											  }



                                              #duff2{position: relative;
                                                margin-left: -0.5%;
                                            z-index: 2;}

                                              #sc1 #vin1 .slideshow{aspect-ratio: 1/0.49;}

                                              #ou3 .buy2{left: 0%;
                                         top: 10%;}

                                            #ou4 .buy2{left: 10%;
                                                bottom: -3%;}

                                                .cap1{width: 40%;
                                                position: relative;
                                            z-index: 2;
                                        margin-top: -58%;
                                        margin-left: 30%;
                                    }

                                    .cap2{width: 47.9%;
                                        position: relative;
                                        z-index: 2;
                                    margin-left: 40%;
                                margin-top: -40%;
                                }

                                #item5 div{position: relative;
                                z-index: 2;}



                                .cap3{width: 44.1%;
                                margin-top: -50%;
                            margin-left: 14%;}

                                .cap4{width: 42.1%;
                                margin-left: 21%;
                            margin-top: -3%;}

                                .cap5{width: 55.1%;
                                    margin-top: 2%;
                                margin-left: 6%;}


											   /*=== 画像の設定 ======================================= */
											   #viewer14 img, #viewer15 img, #viewer16 img {

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

												right: 0;
												left: -2.5%;
												margin: auto;
												opacity: 0;
												transition: 0s;

											}

											#viewer14 img.show {
												opacity: 1;
											  }

                                              #viewer15 img.show {
												opacity: 1;
											  }

                                              #viewer16 img.show {
												opacity: 1;
											  }




                                              #viewer17,#viewer18,#viewer19,#viewer20{

                                                animation: fadein 1 1s;
                                                animation-fill-mode: forwards;
                                                       transition: all 0.5s;
                                                position: relative;

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

                                                   margin: auto;





                                                  }

                                                  #viewer19{top: 13vw;
                                                width: 90%;}


                                                   /*=== 画像の設定 ======================================= */
                                                   #viewer17 img,#viewer18 img,#viewer19 img,#viewer20 img {

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

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

                                                }

                                                #viewer17 img.show {
                                                    opacity: 1;
                                                  }
                                                  #viewer18 img.show {
                                                    opacity: 1;
                                                  }
                                                  #viewer19 img.show {
                                                    opacity: 1;
                                                  }

                                                  #viewer20 img.show {
                                                    opacity: 1;
                                                  }



										  #viewerx1{

											animation: fadein 1 1s;
											animation-fill-mode: forwards;
												   transition: all 0.5s;
											position: relative;
												overflow   : hidden;
																  /* 画像のサイズに合わせて変更ください */
												width      :30.3%;
											aspect-ratio: 0.303/0.456;
													 /* サンプルは中央寄せの背景：白 */
											   padding: 0px;

											   margin: 0;



											  }


											   /*=== 画像の設定 ======================================= */
											   #viewerx1 img {

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

												right: 0;
												left: 0;
												margin: auto;
												opacity: 0;
												transition: all 0.5s;
																	transition-delay: 0.4s;

											}

											#viewerx1 img.show {
												opacity: 1;
											  }


											  #viewerx2{

												animation: fadein 1 1s;
												animation-fill-mode: forwards;
													   transition: all 0.5s;
												position: relative;
													overflow   : hidden;
																	  /* 画像のサイズに合わせて変更ください */
													width      :30.3%;
												aspect-ratio: 0.303/0.456;
														 /* サンプルは中央寄せの背景：白 */
												   padding: 0px;

												   margin:0;



												  }


												   /*=== 画像の設定 ======================================= */
												   #viewerx2 img {

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

													right: 0;
													left: 0;
													margin: auto;
													opacity: 0;
													transition: all 0.5s;
																	transition-delay: 0.34s;

												}

												#viewerx2 img.show {
													opacity: 1;
												  }

												  #viewerx3{

													animation: fadein 1 1s;
													animation-fill-mode: forwards;
														   transition: all 0.5s;
													position: relative;
														overflow   : hidden;
																		  /* 画像のサイズに合わせて変更ください */
														width      :30.3%;
													aspect-ratio: 0.303/0.456;
															 /* サンプルは中央寄せの背景：白 */
													   padding: 0px;

													   margin: 0;



													  }


													   /*=== 画像の設定 ======================================= */
													   #viewerx3 img {

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

														right: 0;
														left: 0;
														margin: auto;
														opacity: 0;
														transition: all 0.5s;
														transition-delay: 0.2s;

													}

													#viewerx3 img.show {
														opacity: 1;
													  }

													  #viewerx4{

														animation: fadein 1 1s;
														animation-fill-mode: forwards;
															   transition: all 0.5s;
														position: relative;
															overflow   : hidden;
																			  /* 画像のサイズに合わせて変更ください */
															width      :30.3%;
														aspect-ratio: 0.303/0.456;
																 /* サンプルは中央寄せの背景：白 */
														   padding: 0px;

														   margin: 0;



														  }


														   /*=== 画像の設定 ======================================= */
														   #viewerx4 img {

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

															right: 0;
															left: 0;
															margin: auto;
															opacity: 0;
															transition: all 0.5s;
															transition-delay: 0.4s;

														}

														#viewerx4 img.show {
															opacity: 1;
														  }

														  #viewerx5{

															animation: fadein 1 1s;
															animation-fill-mode: forwards;
																   transition: all 0.5s;
															position: relative;
																overflow   : hidden;
																				  /* 画像のサイズに合わせて変更ください */
																width      :30.3%;
															aspect-ratio: 0.303/0.456;
																	 /* サンプルは中央寄せの背景：白 */
															   padding: 0px;

															   margin: 0;



															  }


															   /*=== 画像の設定 ======================================= */
															   #viewerx5 img {

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

																right: 0;
																left: 0;
																margin: auto;
																opacity: 0;
																transition: all 0.5s;
																transition-delay: 0.3s;

															}

															#viewerx5 img.show {
																opacity: 1;
															  }

															  #viewerx6{

																animation: fadein 1 1s;
																animation-fill-mode: forwards;
																	   transition: all 0.5s;
																position: relative;
																	overflow   : hidden;
																					  /* 画像のサイズに合わせて変更ください */
																	width      :30.3%;
																aspect-ratio: 0.303/0.456;
																		 /* サンプルは中央寄せの背景：白 */
																   padding: 0px;

																   margin: 0;



																  }


																   /*=== 画像の設定 ======================================= */
																   #viewerx6 img {

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

																	right: 0;
																	left: 0;
																	margin: auto;
																	opacity: 0;
																	transition: all 0.5s;
																	transition-delay: 0.35s;

																}

																#viewerx6 img.show {
																	opacity: 1;
																  }

																  #viewerx7{

																	animation: fadein 1 1s;
																	animation-fill-mode: forwards;
																		   transition: all 0.5s;
																	position: relative;
																		overflow   : hidden;
																						  /* 画像のサイズに合わせて変更ください */
																		width      :30.3%;
																	aspect-ratio: 0.303/0.456;
																			 /* サンプルは中央寄せの背景：白 */
																	   padding: 0px;

																	   margin: 0;



																	  }


																	   /*=== 画像の設定 ======================================= */
																	   #viewerx7 img {

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

																		right: 0;
																		left: 0;
																		margin: auto;
																		opacity: 0;
																		transition: all 0.5s;
																		transition-delay: 0.5s;

																	}

																	#viewerx7 img.show {
																		opacity: 1;
																	  }


																	  #viewerx8{

																		animation: fadein 1 1s;
																		animation-fill-mode: forwards;
																			   transition: all 0.5s;
																		position: relative;
																			overflow   : hidden;
																							  /* 画像のサイズに合わせて変更ください */
																			width      :30.3%;
																		aspect-ratio: 0.303/0.456;
																				 /* サンプルは中央寄せの背景：白 */
																		   padding: 0px;

																		   margin: 0;



																		  }


																		   /*=== 画像の設定 ======================================= */
																		   #viewerx8 img {

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

																			right: 0;
																			left: 0;
																			margin: auto;
																			opacity: 0;
																			transition: all 0.5s;
																			transition-delay: 0.3s;

																		}

																		#viewerx8 img.show {
																			opacity: 1;
																		  }

																		  #viewerx9{

																			animation: fadein 1 1s;
																			animation-fill-mode: forwards;
																				   transition: all 0.5s;
																			position: relative;
																				overflow   : hidden;
																								  /* 画像のサイズに合わせて変更ください */
																				width      :30.3%;
																			aspect-ratio: 0.303/0.456;
																					 /* サンプルは中央寄せの背景：白 */
																			   padding: 0px;

																			   margin: 0;



																			  }


																			   /*=== 画像の設定 ======================================= */
																			   #viewerx9 img {

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

																				right: 0;
																				left: 0;
																				margin: auto;
																				opacity: 0;
																				transition: all 0.5s;
																				transition-delay: 0.2s;

																			}

																			#viewerx9 img.show {
																				opacity: 1;
																			  }





										  #viewerxx1{

											animation: fadein 1 1s;
											animation-fill-mode: forwards;
												   transition: all 0.5s;
											position: absolute;
												overflow   : hidden;
																  /* 画像のサイズに合わせて変更ください */
												width      :100%;
											height: 100%;
													 /* サンプルは中央寄せの背景：白 */
											   padding: 0px;
											left: 0;
											right: 0;
											top: 50%;
											transform: translateY(-50%);
											   margin: 0;



											  }



											   /*=== 画像の設定 ======================================= */
											   #viewerxx1 img {

												position   : absolute;
																	/* 画像のサイズを表示エリアに合せる */
																	width      : 100%;
																	height: 100%;
											object-fit: cover;
												right: 0;
												left: 0;
												margin: auto;
												opacity: 0;
												transition: all 0.5s;
																	transition-delay: 0.2s;

											}

											#viewerxx1 img.show {
												opacity: 1;
											  }



                                              .star2 img{width: 100vw;
                                            opacity: 1;}


                                            .m-container {
                                                display: flex;
                                                justify-content: center;

                                              }
                                              .m-slideshow {
                                                position: relative;
                                                width: 30.3%;
                                                aspect-ratio: 0.303 / 0.456;
                                                overflow: hidden;
                                                perspective: 1000px;
                                              }
                                              .m-slide {
                                                position: absolute;
                                                width: 100%;
                                                height: 100%;
                                                top: 0;
                                                left: 0;
                                                backface-visibility: hidden;
                                                transform-style: preserve-3d;
                                                display: none;
                                                background-color: transparent!important;
                                              }

                                              .m-slide img{width: 100%;}
                                              .m-slide:first-child {
                                                display: block;
                                              }



                                              .contentC {
												width: 90%;
												position: relative;
											padding-bottom: 25%;
												margin: auto;
												overflow: hidden;

												margin-top: -7%;

												border-radius: 15px;


												padding-left: 0;
												padding-right: 0;

											}


                                            #sc4 .sh2{aspect-ratio: 1/1.05;}


/* ------------ PC ---------------*/
@media (min-width: 1024px) {



.logo{width: 70%;
    top: 38%;
left: 10%;}

.logo2{filter: invert(1);}

.logo2{width: 75.4%;
    margin: auto;
    position: absolute;
    top: 56%;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
        animation: fadein 1 1s;
        animation-fill-mode: forwards;
        animation-delay: 1s;
    }

    .star2 img{width: 390px;}
.exwrap{width: 390px;}

.paso{position: relative;}

.topbox{position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);}




.sctop div:nth-child(2) img{width: 390px;}

.popmania{width: 390px;
height: 100vh;
position: fixed;
display: none;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: 2000;}

.popup-box{position: absolute;}

.long {
	width: 390px;
}

.rza {
	right: -685px;
}

.m-slideshow{width: 33.3%;
}

#viewer19{top: 15%;}

}

@media (min-width: 1400px) {

	.broke{width: 65vw;}
    .star2 img{width: 500px;}
	.rza{right: -750px;}

	.long{width: 500px;}

	.exwrap{width: 500px;}

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

	.gop{font-size: 12px;}


}