#migi{transform: translateX(calc(600px*0.07));
  opacity: 0;
  transition: all 1s;}

  #migi2{transform: translateX(calc(600px*0.03));
  opacity: 0;
  transition: all 1s;
  transition-delay: 0.8s;}
#hidari{transform: translateX(calc(600px*-0.07));
  opacity: 0;
  transition: all 1s;}


  #ue,.vvv,.go1{transform: translateY(calc(600px*0.005));
  opacity: 0;
  transition: all 0.5s;}

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




  .wrapper div{line-height: 0;}

.wrapper{width: 600px;
margin: auto;
overflow: hidden;}

 .wrapper img{width: 100%;}
.top{background-color: #DBBEB6;
  padding-bottom:calc(600px*0.17); }
.bigtitle{position: relative;
width:100% ;
height: calc(600px*0.2);}

.bt1{position: absolute;
z-index: 2;
animation:  kyuin 1s 1;
overflow: hidden;
animation-fill-mode: forwards;
animation-delay: 1.8s;
width: 0%;
}

@keyframes kyuin{

  0%{width: 0%;}

  100%{width: 100%;}
}
.bt1 img{width: 600px;
max-width: 600px;}


.bt2{position: absolute;}

.sc1_2{margin-top: calc(600px*-0.1); 
margin-bottom: calc(600px*-0.1);
}
.sc1_2 img{
animation: 2s kuru infinite; 
animation-fill-mode: forwards;}
 



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

.sc1_3 img{
  left: 0;
  top: 0;}
  

.go1{position: relative;
width: 100%;
height: calc(600px*0.1);}

.yaji1{position: absolute;
top:calc(600px*0.048);
left: calc(600px*0.303);
width: calc(600px*0.014);

}

.sc4_1{padding-top: calc(600px*0.198);}

.go1:hover .yaji1{animation: 0.5s 1 yaji1;
animation-fill-mode: forwards;}

@keyframes yaji1{

0%{opacity: 1;
margin-top: calc(600px*0);}

50%{opacity: 0;
  margin-top: calc(600px*0.02);}

  55%{opacity: 0;
  margin-top: calc(600px*-0.02);}

  100%{opacity: 1;
margin-top: calc(600px*0);}
}


.en1{position: absolute;
width: calc(600px*0.07);
height: calc(600px*0.07);
background-color: black;
mix-blend-mode: multiply;
left:calc(600px*0.275);
top: calc(600px*0.02);
border-radius: 50%;
opacity: 0.3;
}

.sen{height: 1px;
background-color: #43341F;
position: absolute;
left:calc(600px*0.38);
top: calc(600px*0.088);
width: 0px;
transition: all 1s;}

.go1:hover #sen1{width: calc(600px*0.26);}

.go1:hover #sen2{width: calc(600px*0.32);}

.go1:hover #sen3{width: calc(600px*0.4);}

.go1:hover #sen4{width: calc(600px*0.28);}

.wrap {
display: flex;
align-items: center;
　height: auto;
　overflow: hidden;
}
.slideshow {
display: flex;
}
.content {
width: calc(600px*1);
height:auto;
}



.slideshow {
display: flex;
animation: loop-slide 10s infinite linear 1s both;
}
@keyframes loop-slide {
from {
  transform: translateX(0);
}
to {
  
  transform: translateX(-100%);
}
}

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

.sc1_4{width: 100%;
height: calc(600px*1.413);
overflow: hidden;
margin-top: calc(600px*0.04);}

.sc1_5{width: calc(600px*0.814);
margin: auto;
}

.sc1_6{width: calc(600px*0.709);
margin-left:  0;
margin-top: calc(600px*0.079);
position: relative;
z-index: 2;
}


#sec02{padding-top:calc(600px*0.198);
  padding-bottom:calc(600px*0.198);
  margin-bottom:calc(600px*0.198);
  border-top: #AE5D33 solid 1px;
border-bottom: #AE5D33 solid 1px;}
.sc1_7{width: calc(600px*0.678);
  margin-left: auto;
margin-right: 0;

margin-top: calc(600px*0.031);
}

.sc1_7x{width: calc(600px*0.93);
  margin-top: calc(600px*-0.112);
}

.vvv{width: calc(600px*0.214);
}

#v1{margin-left:calc(600px*0.495);}
#v2{margin-left:calc(600px*0.135) ;}
#v3{margin-left:calc(600px*0.19) ;}
#v6{margin-left:calc(600px*0.142) ;
  margin-bottom:calc(600px*0.129) ;
}
#v7{margin-left:calc(600px*0.4) ;

}

#v8{margin-left:calc(600px*0.1) ;

}
#v8 img{width: 100%;}

#v9{margin-left:calc(600px*0.464) ;}

.vivi img{width: 100%!important;}

.yaji1 img{width: 100%!important;}
.sc1_9{margin-top: calc(600px*0.1);
text-align: center;
background-color: #FAECE8;
padding-top: calc(600px*0.219);
padding-bottom: calc(600px*0.219);
}

.sc1_9 img{width: calc(600px*0.722);
margin: auto;}

#sec01{padding-bottom: calc(600px*0.198);}

.sc2_1{position: relative;
z-index: 2;}
.sc2_2{margin-top: calc(600px*-0.16);
margin-bottom:  calc(600px*-0.35);}
.sc2_3{animation: 2s kuru infinite; 
animation-fill-mode: forwards;}
.sc2_4{margin-top:calc(600px*-0.21);}

.sc2_5{margin-bottom: calc(600px*0.28);}

.sc2_6{
  margin: auto;
  margin-right: 0;
  margin-top: calc(600px*0.142);
width:calc(600px*0.808);
}

.sc2_8{
  margin-top: calc(600px*0.097);
width:calc(600px*1);
}

.sc2_9{
  margin-top: calc(600px*-0.347);

}

.sc2_11{
  margin-top: calc(600px*-0.347);

}
.sc2_10{background-color: #EBD9CA;
padding-top: calc(600px*0.165);
margin-top: calc(600px*0.083);
padding-bottom: calc(600px*0.345);
text-align: center;} 

.sc2_10 img{
 
  width:calc(600px*0.716);
}


#v4{margin-right: calc(600px*0.18);}

.vbox1{display: flex;
width: calc(600px*0.61);
margin-left: calc(600px*0.167);}

.sc3_2{
  position: relative;
  margin:auto;
width:calc(600px*1);
height:calc(600px*2.066) ;
margin-top: calc(600px*-0.135);
margin-bottom: calc(600px*-0.27);
}

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

.sc3_5{margin-top: calc(600px*-0.01);
margin-bottom: calc(600px*0.3);}

.sc3_3{
  margin-top: calc(600px*-0.028);
  animation: 2s kuru infinite; 
animation-fill-mode: forwards;
margin-bottom:calc(600px*-0.305);

}

.discover.delighter {
  transition: all 0.8s ease-in;
  right:calc(600px * -0.3);
  opacity: 1;
 }

/* スタート時のスタイル */
.discover.delighter.started {
  right:calc(1100px * -0.3);
  opacity: 1;
 }

/* エンド時のスタイル */
.discover.delighter.started.ended {
  right:calc(1100px * 0.8);
  opacity: 1;
 }


.sc3_4{
  margin-top: calc(600px*-0.065);

}

.discover{width: calc(600px*1.442);
margin-top:calc(600px*-0.078);
margin-left: calc(600px*0.2);}

.sc3_6{
  margin-top: calc(600px*0.066);
width: calc(600px*0.884);
}

.sc3_7{
  width: calc(600px*0.797);
  margin-top: calc(600px*0.114);
  margin-left: auto;
margin-right: 0;

}

.sc3_8{




}

.sc3_9{

  width: calc(600px*1);
  margin-left:0;
  margin-top: calc(600px*0.138);


}


.sc5_1{
margin-bottom: calc(600px*-0.12);}

#other{  padding-top: calc(600px*0.233);
  padding-bottom: calc(600px*0.2);}

.sc3_1{position: relative;
z-index: 2;}
.sc3_10{
margin-top: calc(600px*0.097);
width: 100%;
  background-color:#D3CEBD ;
padding-bottom: calc(600px*0.17);
text-align: left;
}

.sc3_10 img{

width: calc(600px*0.721);
margin-right:auto;
margin-left:0;


}

.sc3_11 img{width: 100%;}

.sc4_3{margin-top: calc(600px*-0.056);
  animation: 2s kuru infinite; 
animation-fill-mode: forwards;
}
.sc4_4{margin-top: calc(600px*-0.062);
}

.sc4_6{width: calc(600px*0.837);
}

.sc4_8{width: calc(600px*1.465);
  margin-top: calc(600px*-0.102);

}

.saigo{padding-bottom: calc(600px*0.1);}



.sc5_2{

  padding-bottom: calc(600px*0.125);
}

.sc5_3{
  margin-top: calc(600px*-1.37);
padding-top: calc(600px*0.3);
}

.sc5_5{
  padding-bottom: calc(600px*0.131);

}

.sc5_6{
  margin-top: calc(600px*-0.348);

}


.sc5_7{
  margin-top: calc(600px*-1.06);

}


#viewer400{
       
       position   : relative;
       overflow   : hidden;
                         /* 画像のサイズに合わせて変更ください */
       width      : 600px;
  
            /* サンプルは中央寄せの背景：白 */
      padding: 0px;
      margin: auto;
     height:  calc(600px * 1.588);
     margin-top: calc(600px * 0.131);
      z-index:0;
   
     }
      
      /*=== 画像の設定 ======================================= */
      #viewer400 img {
       display    : block;
       position   : absolute;
                           /* 画像のサイズを表示エリアに合せる */
       width      : 100%;
       height     :100%;
   
      
     }


     #v10{margin: auto;}

     #v11{margin-top: calc(600px*-0.075);
    margin-left: calc(600px*0.35);}

    #v11 #en2{background-color: #C4BFB9;}

    #v11 #sen5{display: none;}

     #en2{position: relative;
     margin-left: 0;
     left: 0;
     top: 0;
  background-color: #AD5D5E;
opacity: 1;}




     .go1:hover #yaji2{animation: yaji2 1 0.5s;}

     .sc1_8 img{width: 100%!important;}
     .go1:hover #sen5{width: 100%;}

     #yaji2{left: 0;
      right: 0;
      margin: auto;
     top:calc(600px*0.028);
     width: calc(600px*0.022);}

     @keyframes yaji2{

0%{opacity: 1;
}

50%{opacity: 0;
  left: calc(600px*0.08);}

  55%{opacity: 0;
left: calc(600px*-0.08);}

  100%{opacity: 1;
left: calc(600px*0);}
}

#aha{display: flex;

height:calc(600px*0.07);
}
.vbox{flex-direction: column;}

#sen5{position: relative;
top:calc(600px*0.005);
left: 0;
background-color: #AD5D5E;}



.vbox{width: calc(600px*0.116);
position: absolute;
right: 0;
top:calc(600px*0.024);}

#jiwa0{animation: 1s 1 jiwa;
animation-fill-mode: forwards;
animation-delay: 0.3s;
opacity: 0;}
#jiwa{animation: 2s 1 jiwa;
animation-fill-mode: forwards;
animation-delay: 0.5s;
opacity: 0;}

#jiwa2{animation: 2s 1 jiwa;
  animation-fill-mode: forwards;
  animation-delay: 1.2s;
  opacity: 0;}

  #jiwa3{animation: 2s 1 jiwa;
    animation-fill-mode: forwards;
    animation-delay: 2.5s;
    opacity: 0;}

@keyframes jiwa{

  0%{opacity: 0;}

  100%{opacity: 1;}
}