.video{width: 100%;
  height: auto;
  position: absolute;
  z-index: 2;}
  
  .video video{width: 100%;
  height: auto;
  opacity: 0;
  display: none;
  transition: all 1s;}
  
  
  
  
  .secm1{position: relative;
  width: 100%;
  height: calc(800px * 1.778);
overflow: hidden;
}
  
  .v1{width: 100%;
    height: calc(800px * 1.778);
  z-index:1;
  position: absolute;
  opacity: 1;}
  
  .v1 img{width: 100%;
  height: auto;}


  .video2{width: 101%;
    height: auto;
    position: absolute;
    z-index: 2;}
    
    .video2 video{width: 100%;
    height: auto;
  }
    



  .secm2{position: relative;
    width: 90%;
    height: calc(800px * 0.9);
    overflow: hidden;
    background-color: ;
   }


    .secm2 video{width: 100%;
      height: calc(800px * 0.9);
    }
    
    .v2{width: 100%;
      height: calc(800px * 0.9);
    z-index:1;
    position: absolute;
    opacity: 1;}
    
    .v2 img{width: 100%;
    height: auto;}
  


.diana{width: 40%;
  height: auto;
margin-left: auto;
margin-right: auto;
margin-top:calc(800px * 0.05);
margin-bottom: calc(800px * 0.05);
}
  
  .diana img{width: 100%;
  height: auto;

 
 }



.toplogo{width: auto;
  height: calc(800px * 0.033);
margin-left: auto;
margin-right: auto;
margin-top: calc(800px * 0.05);
margin-bottom: calc(800px * 0.05);
}
  
  .toplogo img{height: 100%;
  width: auto;


}







.toplogo2{width: auto;
  height: calc(800px * 0.033);
margin-left: auto;
margin-right: auto;
margin-top: calc(800px * 0.05);
margin-bottom: calc(800px * 0.1);

}
  
  .toplogo2 img{height: 100%;
  width: auto;

 
}
  
.toplogo img  {
  animation: side 1.5s 1;
}


.diana img  {
  animation: side 0.5s 1;
}


.toplogo2 img  {
  animation: side 1.8s 1;
}

@keyframes side {
  0% {
    opacity : 0;
    transform: translateX( calc(800px * 0.4));
  }

  100% {
    opacity : 1;
    transform: translateX( calc(800px * 0));
}}


@keyframes side1 {
  0% {
    opacity : 0;
    transform: translateX( calc(800px * 1));
  }

  100% {
    opacity : 1;
    transform: translateX( calc(800px * 0));
}}

@keyframes side2 {
  0% {
    opacity : 0;
    transform: translateX( calc(800px * -1));
  }

  100% {
    opacity : 1;
    transform: translateX( calc(800px * 0));
}}




  #s1x{
    display    : block;
    margin-left: auto;
    position   : absolute;
    overflow   : hidden;
                      /* 画像のサイズに合わせて変更ください */
    width      : 800px;
    height     :calc(800px * 1.5);
    top:0px;
         /* サンプルは中央寄せの背景：白 */}

         #s1x img{width: 100%;
        height: auto;}


        #viewer3{
         
         position   : absolute;
         overflow   : hidden;
                           /* 画像のサイズに合わせて変更ください */
         width      : 800px;
         height     :calc(800px * 1);
              /* サンプルは中央寄せの背景：白 */
        padding: 0px;
        margin: auto;
        top:calc(800px * 3.725);
        z-index:1;
       }
        
        /*=== 画像の設定 ======================================= */
        #viewer3 img {
         display    : block;
         position   : absolute;
                             /* 画像のサイズを表示エリアに合せる */
         width      : 100%;
         height     : 100%;
        
        
       }
       #viewer4{
         
        position   : absolute;
        overflow   : hidden;
                          /* 画像のサイズに合わせて変更ください */
                          width      : 800px;
                          height     :calc(800px * 1.5);
             /* サンプルは中央寄せの背景：白 */
       padding: 0px;
       margin: auto;
       top:0;
       z-index:1;
       right: 0;
      }
       
       /*=== 画像の設定 ======================================= */
       #viewer4 img {
        display    : block;
        position   : absolute;
                            /* 画像のサイズを表示エリアに合せる */
        width      : 100%;
        height     : inherit;
    
       
      }
        /*=== スライドのアニメーションを段差で開始する ========= */
       .slidez1x img:nth-of-type(1) { animation-delay: 0s }
       .slidez1x img:nth-of-type(2) { animation-delay: 1.5s }
       .slidez1x img:nth-of-type(3) { animation-delay: 3s }
        
        /*=== スライドのアニメーション ========================= */
       @keyframes slideAnimex{
         0% { opacity: 0.5 }
         16% { opacity: 0.7 }
        33% { opacity:  0.9}
        49% { opacity: 0.7 }
       100% { opacity: 0.5 }
        }

        .slidez1xg {
         
          position   : absolute;
          overflow   : hidden;
                            /* 画像のサイズに合わせて変更ください */
          width      : 800px;
          height     :calc(800px * 1.5);
               /* サンプルは中央寄せの背景：白 */
         padding: 0px;
         margin: auto;
         top: calc(800px * 2.02);
         z-index:1;
        }
         
         /*=== 画像の設定 ======================================= */
        .slidez1xg img {
          display    : block;
          position   : absolute;
                              /* 画像のサイズを表示エリアに合せる */
          width      : 100%;
          height     : inherit;
          opacity    : 1;
        
        }
         
         /*=== スライドのアニメーションを段差で開始する ========= */
        .slidez1xg img:nth-of-type(1) { animation-delay: 0s }
        .slidez1xg img:nth-of-type(2) { animation-delay: 1s }
        .slidez1xg img:nth-of-type(3) { animation-delay: 3s }
         
         /*=== スライドのアニメーション ========================= */
        @keyframes slideAnimex{
          0% { opacity: 0.5 }
          16% { opacity: 0.7 }
         33% { opacity:  0.9}
         49% { opacity: 0.7 }
        100% { opacity: 0.5 }
         }
 
         #viewer10{
         
          position   : absolute;
          overflow   : hidden;
                            /* 画像のサイズに合わせて変更ください */
          width      : 800px;
          height     :calc(800px * 1.275);
               /* サンプルは中央寄せの背景：白 */
         padding: 0px;
         margin: auto;
         top:calc(800px * 1.698);
         z-index:2;
        
         background-color: ;
        }
         
         /*=== 画像の設定 ======================================= */
       #viewer10 img {
          display    : block;
          position   : absolute;
                              /* 画像のサイズを表示エリアに合せる */
          width      : 100%;
          height     : inherit;
     
         
          mix-blend-mode: multiply;
        }


       #viewer9{
         
          position   : relative;
          overflow   : hidden;
                            /* 画像のサイズに合わせて変更ください */
          width      : 800px;
          height     :calc(800px * 0.701);
               /* サンプルは中央寄せの背景：白 */
         padding: 0px;
         margin: auto;
        
         z-index:2;
        
         background-color: ;
        }
         
         /*=== 画像の設定 ======================================= */
       #viewer9 img {
          display    : block;
          position   : absolute;
                              /* 画像のサイズを表示エリアに合せる */
          width      : 100%;
          height     : inherit;
     
         
          mix-blend-mode: multiply;
        }
         
         /*=== スライドのアニメーションを段差で開始する ========= */
        .slidez1xx img:nth-of-type(1) { animation-delay: 0s }
        .slidez1xx img:nth-of-type(2) { animation-delay: 2s }
        .slidez1xx img:nth-of-type(3) { animation-delay: 4s }
         
         /*=== スライドのアニメーション ========================= */
        @keyframes slideAnimex{
          0% { opacity: 0 }
          16% { opacity: 0.6 }
          25% { opacity: 1 }
         33% { opacity: 1 }
         49% { opacity: 1 }
         70% { opacity: 1 }
         80% { opacity: 1}
         90% { opacity: 0.6 }
        100% { opacity: 0 }
         }


         .s1z {
         opacity: 0.3;
          position   : absolute;
          overflow   : hidden;
                            /* 画像のサイズに合わせて変更ください */
          width      : 78.5%;
          height     :calc(800px * 0.673);
               /* サンプルは中央寄せの背景：白 */
         padding: 0px;
         margin: auto;
         right: 0%;
         left: 0%;
         top: calc(800px * 3.8);
         z-index:1;
        }

        .s1z img {width: 100%;
        height:auto;}

        .slidez1z {
   
          position   : absolute;
          overflow   : hidden;
                            /* 画像のサイズに合わせて変更ください */
          width      : 78.5%;
          height     :calc(800px * 0.673);
               /* サンプルは中央寄せの背景：白 */
         padding: 0px;
         margin: auto;
         right: 0%;
         left: 0%;
         top: calc(800px * 3.8);
         z-index:2;
        }
         
         /*=== 画像の設定 ======================================= */
        .slidez1z img {
          display    : block;
          position   : absolute;
                              /* 画像のサイズを表示エリアに合せる */
          width      : 100%;
          height     : inherit;
       
          animation  : slideAnimexxx  3.6s ease infinite;
          mix-blend-mode: multiply;
        }
         
         /*=== スライドのアニメーションを段差で開始する ========= */
        .slidez1z img:nth-of-type(1) { animation-delay: 0s }
        .slidez1z img:nth-of-type(2) { animation-delay: 1.2s }
        .slidez1z img:nth-of-type(3) { animation-delay: 2.4s }
         
         /*=== スライドのアニメーション ========================= */
        @keyframes slideAnimexxx{
          0% { opacity: 0.1 }
          16% { opacity: 0.4 }
         33% { opacity: 0.9 }
         49% { opacity: 0.5 }
        100% { opacity: 0.1 }
         }
       







.s1{margin-left: auto;
  position   : absolute;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 800px;
  height     :calc(800px * 1.5);
       /* サンプルは中央寄せの背景：白 */}

  .slidez1 {
    margin-left: auto;
   position   : absolute;
   overflow   : hidden;
                     /* 画像のサイズに合わせて変更ください */
   width      : 800px;
   height     :calc(800px * 1.5);
        /* サンプルは中央寄せの背景：白 */
  
   
 }

 #viewer  img {
  width: 100%;
  height     :calc(800px * 1.5);
  position: absolute;
  z-index:-2;
  right: 0px;
  left:0px;

}


 .s1 img{width: 100%;
height: auto;}
  
  /*=== 画像の設定 ======================================= */
 .slidez1 img {
   display    : block;
   position   : absolute;
                       /* 画像のサイズを表示エリアに合せる */
   width      : 100%;
   height     : inherit;
   opacity    : 0;
   animation  : slideAnime5 4.5s ease infinite;
 }
  
  /*=== スライドのアニメーションを段差で開始する ========= */
 .slidez1 img:nth-of-type(1) { animation-delay: 0s }
 .slidez1 img:nth-of-type(2) { animation-delay: 1.5s }
 .slidez1 img:nth-of-type(3) { animation-delay: 3s }
  
  /*=== スライドのアニメーション ========================= */
 @keyframes slideAnime5{
   0% { opacity: 0.2 }
   20% { opacity: 1 }
  33% { opacity: 1 }
  49% { opacity: 0.4 }
 100% { opacity: 0 }
  }

  .kz1v{width: 100%;
    height     : auto;
right: 0px;
left: 0px;
margin: auto;
z-index: 2;
position: absolute;
top:calc(800px * 2.8);}

  .kz1v img{width: 100%;
  height: auto;

}


.kz2v{width: 84%;
  height     : auto;
left: 0px;
right: 0;
margin: auto;
z-index: 2;
position: absolute;
top: calc(800px * 4.522);}

.kz2v img{width: 100%;
height: auto;

}

  .kzx{width: 70.6%;
    height: auto;
  right: 0px;
  z-index: 6;
  position: absolute;
  top: calc(800px * 0.75);}
  
    .kzx img{width: 100%;
    height: auto;
    opacity : 0;
    transform: translateX( calc(800px * -0.4));
    transition: all 1s;}
  


  .kz1c{width: 58%;
    height: auto;
  right: calc(800px * 0.07);
  z-index: 2;
  position: absolute;
  top: calc(800px * 3.475);}
  
    .kz1c img{width: 100%;
    height: auto;
  }

  .kz6x{width:100%;
    height: auto;

    margin: auto;
 }
  
    .kz6x img{width: 100%;
    height: auto;
  }

  .copy1d,.copy1a, .copy1b,.copy1c{width: 100%;
  height: auto;
  z-index: 3;
  position: absolute;}


  .copy1a img, .copy1b img, .copy1c img, .copy1d img{width: 100%;
    height: auto;}

    .copy1c img,.copy1a img,.copy2b img,.copy3 img,.copy4va img,.copy5va img,.copy6vb img,.copy7vb img,.copy3va img,.kh8 img{opacity : 0;
      transform: translateX( calc(800px * 0.1));
      transition: all 0.4s;
    }

    .copy1d img,.copy1b img,.copy2a img ,.copy3b img ,.copy4vb img ,.copy5vb img,.copy6va img,.copy7va img,.copy3vb img, .kz1c img, .kh9 img {opacity : 0;
      transform: translateX( calc(800px * -0.1));
      transition: all 0.4s;
    }


  
    .copy1a{top: calc(800px * 0.417); 
    }
    .copy1b{top:calc(800px * 0.568);}

    .copy1c{top:calc(800px * 0.723);}

    .copy1d{top:calc(800px * 0.875);}

    .sec1x{width: 100%;
    height: calc(800px * 6.532);
  position: relative;
  background-color:;



  }





  .sec0{width: 100%;
    height     :calc(800px * 1.5);
  position: relative;
}


  .bc2v{width: 36%;
  height: calc(800px * 6.07);
background-color: #f9f8f6;
left:0px;
top: calc(800px * 0);
position: absolute;}

.bc1v,.bc2,.bc3v,.bc4,.bc5v,.bc6v,.bc7{opacity : 0;
  transform: translateY(calc(800px * 0.4));
  transition: all 1s;
}


.bc2v,.bc5v,.bc6v,.bc7{opacity : 0;
  transform: translateX(calc(800px * -0.4));
  transition: all 2s;
}


.bc3v,.bc6v,.bc7v{opacity : 0;
  transform: translateX(calc(800px * 0.4));
  transition: all 1s;
}


.bc5v{opacity : 0;
  transform: translateX(calc(800px * -2.5));
  transition: all 3s;
}

.bc4v{opacity : 0;
  transform: translateX(calc(800px * 2.5));
  transition: all 3s;
}



.bun1v{height: calc(800px * 0.029);
  width: auto;
  z-index: 100;
  position: absolute;
 
  left: 0;
  right: 0;
  margin: auto;
  top: calc(800px * 4.65);
}


.bun0v{height: calc(800px * 0.029);
  width: auto;
  z-index: 100;
  position: absolute;
 
  left: 0;
  right: 0;
  margin: auto;
  top: calc(800px * 5.155);
}



.bun1v img,.bun0v img,.bun2v img,.bun3 img,.bun4 img,.bun5v img,.bun6 img,.bun7 img,.bun8 img{height: 100%;
    width: auto;
    opacity : 0;
    transform: translateX(calc(800px * 0.2));
    transition: all 1s;
  }


    .s2{position   : absolute;
                        
      /* 画像のサイズに合わせて変更ください */
      width:100%;
    height     : calc(800px * 1.5);
    margin     : auto;      /* サンプルは中央寄せの背景：白 */
    
    
    padding-top:0px;
    left:0px;
    z-index: 1;
    top: calc(800px * 1.625);
 }
    
    .s2 img{width: 100%;
    height: auto;}


    
    .sc1,.sc2 {
      position   : absolute;
      
        
                          /* 画像のサイズに合わせて変更ください */
                          width:100%;
                          height     :calc(800px * 1.4);
        margin     : auto;      /* サンプルは中央寄せの背景：白 */
    
       
        padding-top:0px;
      left:0px;
      z-index: 2;
      top: calc(800px * 1.625);
      }

.sc1 img,.sc2 img{width: 100%;
height: auto;}
      
       

.sc1 img,.sc2 img{opacity:0;}



.sc1 img{
transform: translateX(calc(800px * 0.4));
transition: all 1s;
}

.sc2 img{
  transform: translateX(calc(800px * -0.4));
  transition: all 1s;
  }


  .slidez2{
   
    transition: all 3s;
    }
  

   #viewer2x {
      position   : absolute;
      
        
                          /* 画像のサイズに合わせて変更ください */
                          width:100%;
                          height     :calc(800px * 1.5);
        margin     : auto;      /* サンプルは中央寄せの背景：白 */
    
        opacity    : 1;
        padding-top:0px;
      left:0px;
      z-index: 2;
      top: 0px;
      display: none;
      }
       
       /*=== 画像の設定 ======================================= */
      #viewer2x img {
          
        display    : block;
        position   : absolute;
                            /* 画像のサイズを表示エリアに合せる */
        width      : 100%;
        height     : inherit;
       
     
        z-index: 2;
      }
       
       /*=== スライドのアニメーションを段差で開始する ========= */
      .slidez2 img:nth-of-type(1) { animation-delay: 0s }
      .slidez2 img:nth-of-type(2) { animation-delay: 2s }
       
       /*=== スライドのアニメーション ========================= */
      @keyframes slideAnimeww{
        0% { opacity: 0 }
        25% { opacity: 1 }
       50% { opacity: 1 }
       75% { opacity: 0 }
      100% { opacity: 0 }
      }


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



        #viewer4x {
          position   : absolute;
          
            
                              /* 画像のサイズに合わせて変更ください */
                              width:100%;
                              height     :calc(800px * 0.627);
            margin     : auto;      /* サンプルは中央寄せの背景：白 */
        
            opacity    : 1;
            padding-top:0px;
          left:0px;
          z-index: 2;
          top: 0px;
          }
           
           /*=== 画像の設定 ======================================= */
          #viewer4x img {
              
            display    : block;
            position   : absolute;
                                /* 画像のサイズを表示エリアに合せる */
            width      : 100%;
            height     : inherit;
           
         
            z-index: 2;
          }
           
         /*=== スライドのアニメーションを段差で開始する ========= */
        .slidez2 img:nth-of-type(1) { animation-delay: 0s }
        .slidez2 img:nth-of-type(2) { animation-delay: 2s }
         
         /*=== スライドのアニメーション ========================= */
        @keyframes slideAnimeww{
          0% { opacity: 0 }
          25% { opacity: 1 }
         50% { opacity: 1 }
         75% { opacity: 0 }
        100% { opacity: 0 }
        }
  
  

      .crebox1v{  
        margin: auto;
        top: calc(800px * 5.197);
      position: absolute;
      z-index: 100;
      background-color: ;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }

      .crebox2v{  
        margin: auto;
        top: calc(800px *6.302);
      position: absolute;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
   
      
      }


      .set1v{width: 100%;
        height: calc(800px * 0.658);
      position: absolute;
      top: calc(800px *3.47);}

      .crebox3v{  
        margin: auto;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    position: relative;
    top: calc(800px * 4.23 );
      
      }


      .crebox4v{  
        margin: auto;
        top: calc(800px * 5.25);
      position: absolute;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }



      .crebox5v{  
        margin: auto;
        position: relative;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
      }


      .crebox6v{  
        margin: auto;
        position: relative;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.22);
    
      
      }


      .crebox7v{  
        margin: auto;
        top: calc(800px * 4.08);
        position: absolute;
      position: relative;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }

      
      
      .crebox8v{  
        margin: auto;
        top: calc(800px * 5.45);
      position: absolute;
      z-index: 100;
      background-color:;
      opacity:01;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }

      .crebox9v{  
        margin: auto;
        top: calc(800px * 3.95);
      position: absolute;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }
      .crebox10v{  
        margin: auto;
        top: calc(800px * 5.143);
      position: absolute;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }
      
      .crebox11v{  
        margin: auto;
        top: calc(800px * 3.62);
      position: absolute;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }

      .crebox12v{  
        margin: auto;
        top: calc(800px * 2.47);
      position: absolute;
      z-index: 100;
      background-color:;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }

      .crebox13v{  
        margin: auto;
        top: calc(800px * 3.4);
      position: absolute;
      z-index: 100;
      background-color;
      opacity:1;
      left: 0;
      right: 0;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }

      .crebox14v{  
        margin: auto;
    position: relative;
      z-index: 100;
      background-color:;
      opacity:1;
     background-color: ;
      width: 75%;
      height: calc(800px * 0.29);
    
      
      }
      
      
      .creza img{height:100%;
        width: auto;
        opacity : 0;
        transform: translateY(calc(800px * 0.2));
        transition: all 1s;
      
      
      
      }
      
      .creza {height: calc(800px * 0.054);
        width: auto;
      left:calc(800px * -0.001);
      top: calc(800px* 0.054);
      
      
        position:absolute;
        background-color:  ;
        
        }
      
        .crezb img{height:100%;
          width: auto;
          opacity : 0;
          transform: translateY(calc(800px* 0.2));
          transition: all 1s;
        
        
        
        }
        
        .crezb {height: calc(800px * 0.054);
          width: auto;
        left:calc(800px * -0.001);
        top:calc(800px * 0.118);
        
        
          position:absolute;
          background-color:   ;
          }
      
      
          .crezc img{height:100%;
            width: auto;
            opacity : 0;
            transform: translateY(calc(800px * 0.2));
            transition: all 1s;
          
          }
          
          .crezc {height: calc(800px * 0.054);
            width: auto;
          left:calc(800px * -0.001);
          top:calc(800px * 0.182);
          
        
          
          
            position:absolute;
            background-color:   ;
            }

            .creze img{height:100%;
              width: auto;
              opacity : 0;
              transform: translateY(calc(800px * 0.2));
              transition: all 1s;
            
            }
            
            .creze {height: calc(800px * 0.054);
              width: auto;
            left:calc(800px * -0.001);
            top:calc(800px * 0.230);
            
          
            
            
              position:absolute;
              background-color:   ;
              }


              .crezf img{height:100%;
                width: auto;
                opacity : 0;
                transform: translateY(calc(800px * 0.2));
                transition: all 1s;
              
              }
              
              .crezf {height: calc(800px * 0.054);
                width: auto;
              left:calc(800px * -0.001);
              top:calc(800px * 0.24);
              
            
              
              
                position:absolute;
                background-color:   ;
                }
            .crezc1 img{height:100%;
              width: auto;
              opacity : 0;
              transform: translateY(calc(800px * 0.2));
              transition: all 1s;
            
            
            
            }
            
            .crezc1 {height: calc(800px * 0.054);
              width: auto;
            left:calc(800px * -0.001);
            top:calc(800px * 0.182);
            
            
              position:absolute;
              background-color:   ;
              }
           
      
      
            .crezd img{height:100%;
              width:100%;
              opacity : 0;
              transform: translateY(calc(800px * 0.2));
              transition: all 1s;
            
            
            
            }
            
            .crezd {height: calc(800px * 0.054);
              width: calc(800px * 0.216);
            right:0px;
            top: calc(800px * 0.054);
            
            
              position:absolute;
              background-color:   ;
              }
            
              .creza1 img{height:100%;
                width: auto;
                opacity : 0;
                transform: translateY(calc(800px * 0.2));
                transition: all 1s;
              
              
              
              }
              
              .creza1 {height: calc(800px * 0.054);
                width: auto;
              left:calc(800px * -0.001);
              top: calc(800px* 0);
              
              
                position:absolute;
                background-color:  ;
                
                }
              
                .crezb1 img{height:100%;
                  width: auto;
                  opacity : 0;
                  transform: translateY(calc(800px* 0.2));
                  transition: all 1s;
                
                
                
                }
                
                .crezb1 {height: calc(800px * 0.054);
                  width: auto;
                left:calc(800px * -0.001);
                top:calc(800px * 0.064);
                
                
                  position:absolute;
                  background-color:   ;
                  }
              
              
                  .crezc2 img{height:100%;
                    width: auto;
                    opacity : 0;
                    transform: translateY(calc(800px * 0.2));
                    transition: all 1s;
                  
                  }
                  
                  .crezc2 {height: calc(800px * 0.054);
                    width: auto;
                  left:calc(800px * -0.001);
                  top:calc(800px * 0.128);
                  
                
                  
                  
                    position:absolute;
                    background-color:   ;
                    }
                    
              
              
                    .crezd1 img{height:100%;
                      width:100%;
                      opacity : 0;
                      transform: translateY(calc(800px * 0.2));
                      transition: all 1s;
                    
                    
                    
                    }
                    
                    .crezd1 {height: calc(800px * 0.054);
                      width: calc(800px * 0.216);
                    left:0px;
                    top: calc(800px * 0.205);
                    
                    
                      position:absolute;
                      background-color:   ;
                      }



.crez{
width: auto;
height: auto;
background-color: ;}






#color{margin-bottom: 0px;}




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

    z-index: 1;
  }
   
   /*=== スライドのアニメーションを段差で開始する ========= */
  .slidez3 img:nth-of-type(1) { animation-delay: 0s }
  .slidez3 img:nth-of-type(2) { animation-delay: 2s }
   
   /*=== スライドのアニメーション ========================= */
  @keyframes slideAnimeww{
    0% { opacity: 0 }
    25% { opacity: 1 }
   50% { opacity: 1 }
   75% { opacity: 0.8 }
  100% { opacity: 0.5 }
  }



  #viewer6 {
  position   : absolute;
    
                      /* 画像のサイズに合わせて変更ください */
                      width:84%;
    height     : calc(800px * 0.56);
    margin     : auto;      /* サンプルは中央寄せの背景：白 */
   
   right:0px;
    padding-top:0px;
 
  z-index: 2;
  top:calc(800px * 3.67);
  }
   
   /*=== 画像の設定 ======================================= */
   #viewer6 img {
      
    display    : block;
    position   : absolute;
                        /* 画像のサイズを表示エリアに合せる */
    width      : 100%;
    height     : inherit;
   
    z-index: 1;
  }
   
   /*=== スライドのアニメーションを段差で開始する ========= */
  .slidez3c img:nth-of-type(1) { animation-delay: 0s }
  .slidez3c img:nth-of-type(2) { animation-delay: 2s }
   
   /*=== スライドのアニメーション ========================= */
  @keyframes slideAnimeww{
    0% { opacity: 0 }
    25% { opacity: 1 }
   50% { opacity: 1 }
   75% { opacity: 0 }
  100% { opacity: 0 }
  }


  .sec2x{width: 100%;
    margin-top: calc(800px * 0);
    height: calc(800px * 5.47);
  position: relative;
background-color:r;}


.set2{width: 100%;
  height:calc(800px * 0.746);
position: absolute;
z-index: 5;
top: calc(800px * 2);}

 .kh8{width: 50%;
    height: auto;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
  left:0px;
  position: absolute;
  }

.kh9{width: 50%;
    height: auto;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
  right:0px;
  position: absolute;
  }

  .kh8 img, .kh9 img{width: 100%;
  height: auto;}



  .bun2v{height: calc(800px * 0.029);
    width: auto;
    z-index: 3;
    position: absolute;


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

   top: calc(800px * 1.87);
  }
  
  .guide1{height: calc(800px * 0.09);
    width: auto;
    z-index: 3;
    position: absolute;
background-color: red;
opacity: 0.8;
    left: 0;
    right: 0;
    margin: auto;
   top: calc(800px * 1.74);
  }
  

  .dada{width: 100%;
  height: auto;
  margin-top: calc(800px * 0.2);}

  .dada img{width: 100%;
  height: auto;
 }
  
    .bun2v img{height: 100%;
      width: auto;}


      .obi1{height: auto;
        width: calc(800px * 0.123);
        z-index: 3;
        position: absolute;
       
        left: calc(800px * -0.004);
  
        margin: auto;
       top: calc(800px * 0.037);
      }
      
      
        .obi1 img{width: 100%;
          height: auto;}


          .secm2{width: 90%;
            height: calc(800px * 0.9);
     left: 0px;
     right: 0px;
          z-index: 3;
          margin: auto;
          position: absolute;
          top: calc(800px * 1.964);
        overflow: hidden;
        filter: drop-shadow(0px 0px #000);
      }
          
            .secm2 video{width: 100%;
            height: auto;
          }

          .kz3v{width:80%;
            height: auto;
        right:0px;
        left: 0;
        margin: auto;
          z-index: 1;
          position: absolute;
          top: calc(800px * 5.512)}
          
            .kz3v img{width: 100%;
            height: auto;
          }


          .kz4v{width: 84%;
            margin: auto;
            height: auto;
            right: 0px;
           left: 0;
          z-index: 2;
          position: absolute;
          top: calc(800px * 5.665);}
          
            .kz4v img{width: 100%;
            height: auto;
          }


          .kz5v{width:100%;
            margin: auto;
            height: auto;
            right: 0px;
            left: 0px;
          z-index: 2;
          position: absolute;
          top: calc(800px * 0);}
          
            .kz5v img{width: 100%;
            height: auto;
          }

          .crebox2{  
            margin: auto;
            top: calc(800px * 2.75);
          position: absolute;
          z-index: 100;
          opacity:1;
          background-color:;
     
          left: 0;
          right: 0;
          width: auto;
          overflow: hidden;
          padding: calc(800px * 0.063);
          }

          .secm3{width:75%;
            height: calc(800px * 1.032);
            left: 0;
          
            margin: auto;
          z-index: 7;
          position: absolute;
          top: calc(800px * 1.958);
        overflow: hidden;
      
        filter: drop-shadow(0px 0px #000);
      }
          
            .secm3 video{width: 105%;
            height: auto;
          }


          .kz6v{width:77.5%;
            height: auto;
           position: absolute;
           right: 0;
            margin: auto;
          z-index: 5;
          top: calc(800px * 2.02);
        
     }
          
            .kz6v img{width: 100%;
            height: auto;
          }


          .crebox3{  
            margin: auto;
            top: calc(800px * 4.11);
          position: absolute;
          z-index: 100;
          opacity: 1;
          background-color: ;
    
          left: 0;
          right: 0;
          width: auto;
          overflow: hidden;
          padding: calc(800px * 0.063);
          }

          .bc1v{width: 30%;
            height: calc(800px * 4.23);
          background-color: #ead4c9;
       left:0px;
          position: absolute;
        z-index: 0;
        top: calc(800px * 0)}


        .kz6{width:100%;
          height: auto;

          margin: auto;
          margin-right:calc(800px * 0.12) ; }
        
          .kz6 img{width: 100%;
          height: auto;
        }

        .crebox4{  
          margin: auto;
 
    
        z-index: 100;
        background-color: ;

        left: 0;
        right: 0;
        width: auto;
        overflow: hidden;
        padding: calc(800px * 0.063);
        }

        .crebox4x{  
          margin: auto;
 
    
        z-index: 100;
        background-color: ;

        left: 0;
        right: 0;
        width: auto;
        overflow: hidden;
        padding: calc(800px * 0.063);
        padding-bottom: 0px;
        }

        .crebox5{  
          margin: auto;
 
    
        z-index: 100;
        background-color: ;

        left: 0;
        right: 0;
        width: auto;
        overflow: hidden;
        padding: calc(800px * 0.063);
        padding-top: 0px;
 
        }

        .crebox5gt{  
          margin: auto;
 
    
        z-index: 100;
        background-color: ;

        left: 0;
        right: 0;
        width: auto;
        overflow: hidden;
        padding: calc(800px * 0.063);
        padding-top: 0px;
        padding-bottom: 0px;
 
        }

        .sec3{width: 100%;
          height: calc(800px * 5);
        position: relative;
      background-color: red;
      margin-top: calc(800px * 0);

   }


      .kz7v{width:100%;
        height: auto;
    right: 0;
       left: 0;
        margin: auto;
      z-index: 5;
      position: absolute;
      top: calc(800px *  2.825);}
      
        .kz7v img{width: 100%;
        height: auto;
      }

      .kz8v{width:100%;
        height: auto;
   right: 0;
   left: 0;
        margin: auto;
      z-index: 1;
      position: absolute;
      top: calc(800px *  4.55);}
      
        .kz8v img{width: 100%;
        height: auto;
      }

      .kz9v{width:84%;
        height: auto;
   position: absolute;
        margin: auto;
      z-index: 5;
  
      top: calc(800px * 2.686)}
      
        .kz9v img{width: 100%;
        height: auto;
      }


      .crebox6{  
        margin: auto;
        top: calc(800px * 6.48);
      position: absolute;
      z-index: 100;
      background-color: ;
opacity: 1;
      left: 0;
      right: 0;
      width: auto;
      overflow: hidden;
      padding: calc(800px * 0.063);
      }

    .s4{ position   : absolute;
          
      /* 画像のサイズに合わせて変更ください */
      width:88.6%;
height     : calc(800px * 0.562);
margin     : auto;   
padding-top:0px;
left:0px;
z-index: 6;
top: calc(800px * 2.65);}

.s4 img{width: 100%;
height: auto;}


      .slidez4 {
        position   : absolute;
          
                            /* 画像のサイズに合わせて変更ください */
                            width:88.6%;
          height     : calc(800px * 0.562);
          margin     : auto;   
        
         
          padding-top:0px;
        left:0px;
        z-index: 7;
        top: calc(800px * 2.17);
        }
         
         /*=== 画像の設定 ======================================= */
        .slidez4 img {
            
          display    : block;
          position   : absolute;
                              /* 画像のサイズを表示エリアに合せる */
          width      : 100%;
          height     : inherit;
          opacity    : 1;
   
          z-index: 1;
        }
         
         /*=== スライドのアニメーションを段差で開始する ========= */
        .slidez4 img:nth-of-type(1) { animation-delay: 0s }
        .slidez4 img:nth-of-type(2) { animation-delay: 2s }
         
         /*=== スライドのアニメーション ========================= */
        @keyframes slideAnimeww{
          0% { opacity: 0}
          25% { opacity: 1 }
         50% { opacity: 1 }
         75% { opacity: 0 }
        100% { opacity: 0 }
        }
      
        .copy2a, .copy2b{width: 100%;
          height: auto;
          z-index: 10;
          position: absolute;}
        
        
          .copy2a img, .copy2b img{width: 100%;
            height: auto;}
          
            .copy2a{top: calc(800px * 4.252); 
            }
            .copy2b{top:calc(800px * 4.405);}



            .bun3v{height: calc(800px * 0.029);
              width: auto;
              z-index: 6;
              position: absolute;
             
              left: 0;
              right: 0;
              margin: auto;
              top: calc(800px * 0);
            }
            
            
              .bun3v img{height: 100%;
                width: auto;}

                .bun4v{height: calc(800px * 0.029);
                  width: auto;
                  z-index: 6;
                  position: absolute;
                 
                  left: 0;
                  right: 0;
                  margin: auto;
                  top: calc(800px * 1.86);
                }
                
                
                  .bun4v img{height: 100%;
                    width: auto;}



                    .s3{position   : absolute;
                        
                      /* 画像のサイズに合わせて変更ください */
                      width:100%;
                    height     : calc(800px * 1.5);
                    margin     : auto;      /* サンプルは中央寄せの背景：白 */
                    
                    
                    padding-top:0px;
                    left:0px;
                    z-index: 1;
                 }
                    
                    .s3 img{width: 100%;
                    height: auto;}

.s3x{position   : absolute;
                        
  /* 画像のサイズに合わせて変更ください */
  width:100%;
height     : calc(800px * 1.5);
margin     : auto;      /* サンプルは中央寄せの背景：白 */


padding-top:0px;
left:0px;
z-index: 1;
top: calc(800px * 4.65)}

.s3x img{width: 100%;
height: auto;}
                    #viewer5 {
                      position   : absolute;
                        
                                          /* 画像のサイズに合わせて変更ください */
                                          width:100%;
                        height     : calc(800px * 1);
                        margin     : auto;      /* サンプルは中央寄せの背景：白 */
                   
                       
                        padding-top:0px;
                      left:0px;
                      z-index: 2;
                      top: calc(800px * 1.65)
                      }
                       
                       /*=== 画像の設定 ======================================= */
                       #viewer5 img {
                          
                        display    : block;
                        position   : absolute;
                                            /* 画像のサイズを表示エリアに合せる */
                        width      : 100%;
                        height     : inherit;
               
                     
                        z-index: 1;
                      }
                       
                       /*=== スライドのアニメーションを段差で開始する ========= */
                      .slidez3x img:nth-of-type(1) { animation-delay: 0s }
                      .slidez3x img:nth-of-type(2) { animation-delay: 2s }
                       
                       /*=== スライドのアニメーション ========================= */
                      @keyframes slideAnimeww{
                        0% { opacity: 0 }
                        25% { opacity: 1 }
                       50% { opacity: 1 }
                       75% { opacity: 0 }
                      100% { opacity: 0 }
                      }



      .crebox7{  
        margin: auto;
        top: calc(800px *4.25);
      position: absolute;
      z-index: 100;
      background-color:;
opacity: 1;
      left: 0;
      right: 0;
      width: auto;
      overflow: hidden;
      padding: calc(800px * 0.063);
      }



 
                    





     
  .sec4x{width: 100%;
        height: calc(800px * 5.38);
      position: relative;
    background-color:;}

    .bc4v{width: 30%;
      height: calc(800px * 4.8);
    background-color: #c4b7b4;
    top: 0;
    right: 0px;
    position: absolute;
  z-index: -1;}


.s5{margin-left: auto;
  position   : absolute;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100%;
  height     :calc(800px * 1);
       /* サンプルは中央寄せの背景：白 */
       top: calc(800px * 2.05);

       z-index:1;
}

.s5 img{width: 100%;
  height: auto;}


#viewer8 {
    margin-left: auto;
   position   : absolute;
   overflow   : hidden;
                     /* 画像のサイズに合わせて変更ください */
   width      : 100%;
   height     :calc(800px * 0.66);
   top: calc(800px * 2.01);
        /* サンプルは中央寄せの背景：白 */
 
     
        z-index:2;
 }
  
  /*=== 画像の設定 ======================================= */
  #viewer8  img {
   display    : block;
   position   : absolute;
                       /* 画像のサイズを表示エリアに合せる */
   width      : 100%;
   height     : inherit;
 
 }
  
  /*=== スライドのアニメーションを段差で開始する ========= */
 .slidez5 img:nth-of-type(1) { animation-delay: 0s }
 .slidez5 img:nth-of-type(2) { animation-delay: 1.5s }
 .slidez5 img:nth-of-type(3) { animation-delay: 3s }
  
  /*=== スライドのアニメーション ========================= */
 @keyframes slideAnimec{
   0% { opacity: 0.1 }
   16% { opacity: 0.8 }
  33% { opacity: 1 }
  49% { opacity: 0.3 }
 100% { opacity: 0 }
  }


  .copy3a, .copy3b{width: 100%;
    height: auto;
    z-index: 6;
    position: absolute;}
  
  
    .copy3a img, .copy3b img{width: 100%;
      height: auto;}
    
      .copy3a{top: calc(800px * 1.466); 
      }
      .copy3b{top:calc(800px * 1.622);}



      .bun5v{height: calc(800px * 0.029);
        width: auto;
        z-index: 6;
        position: absolute;
       
        left: 0;
        right: 0;
        margin: auto;
       top: calc(800px * 1.827);
      }
      
      
        .bun5v img{height: 100%;
          width: auto;}


          .kz10v{width:100%;
            height: auto;
           left: 0px;
            right:0;
            margin: auto;
          z-index: 5;
          position: absolute;
          top:calc(800px * 1.88);
        
        }
          
            .kz10v img{width: 100%;
            height: auto;
          }

      


          .crebox8{  
            margin: auto;
           top: calc(800px * 1.65);
          position: absolute;
          z-index: 100;
          background-color:;
    opacity: 1;
          left: 0;
          right: 0;
          width: auto;
          overflow: hidden;
          padding: calc(800px * 0.063);
          }
    
          .crebox9{  
            margin: auto;
           top: calc(800px * 5.005);
          position: absolute;
          z-index: 100;
          background-color:;
    opacity: 1;
          left: 0;
          right: 0;
          width: auto;
          overflow: hidden;
          padding: calc(800px * 0.063);
          }
    
















    .sec5x{width: 100%;
      height: calc(800px * 4.75);
    position: relative;
  background-color:;}

  .bc5v{width: 36%;
    height: calc(800px * 4.2);
    right: 0px;
  background-color: #dce3f4;
  top: 0px;
  position: absolute;
z-index: 0;}


.kz11v{width:84%;
  height: auto;
 
  right: 0;
  margin: auto;
z-index: 5;

}

  .kz11v img{width: 100%;
  height: auto;
}






.kz12v{width:100%;
  height: auto;
  left: 0;
  right: 0;
  margin: auto;

  opacity: 1;
z-index: 5;


}

  .kz12v img{width: 100%;
  height: auto;
}


.kz13v{width:84%;
  height: auto;
position: absolute;
  right: 0;
  left: 0;
  margin: auto;
z-index: 7;
top: calc(800px *2.845);
}

  .kz13v img{width: 100%;
  height: auto;
}


.copy4va, .copy4vb{width: 100%;
  height: auto;
  z-index: 6;
  position: absolute;}


  .copy4va img, .copy4vb img{width: 100%;
    height: auto;}
  
    .copy4va{top: calc(800px * 1.606); 
    }
    .copy4vb{top:calc(800px *1.761);}


    .bun6{height: calc(800px * 0.029);
      width: auto;
      z-index: 6;
      position: absolute;
     
      left: 0;
      right: 0;
      margin: auto;
     top: calc(800px * 1.84);
    }
    
    
      .bun6 img{height: 100%;
        width: auto;}



        .crebox10{  
          margin: auto;
         top: calc(800px * 2.91);
        position: absolute;
        z-index: 100;
        background-color:;
  opacity: 1;
        left: 0;
        right: 0;
        width: auto;
        overflow: hidden;
        padding: calc(800px * 0.063);
        }
  

        .crebox11{  
          margin: auto;
         top: calc(800px * 0.99);
        position: absolute;
        z-index: 100;
        background-color:;
  opacity: 1;
        left: 0;
        right: 0;
        width: auto;
        overflow: hidden;
        padding: calc(800px * 0.063);
        }
  




















  .sec3x{width: 100%;
    height: calc(800px * 5.68);
  position: relative;
background-color:;
margin-top: calc(800px * -0.15);}

.bc6v{width: 40%;
  height: calc(800px * 2.435);
background-color: #eae5dd;
top: calc(800px * 1);
left: 0px;
position: absolute;
z-index: 0;}

.bc3v{width: 36%;
  height: calc(800px * 5.3);
background-color: #f1eae3;
top: calc(800px * 0.15);
right: 0;
position: absolute;
z-index: 0;}


.kz14v{width:92%;
  height: auto;
 position:absolute;
 right: 0;
 left: 0;
 top: calc(800px * 3.52);
  margin: auto;
z-index: 5;

}

  .kz14v img{width: 100%;
  height: auto;
}

.kz15v{width:70%;
  height: auto;
  left: 0;

  margin: auto;
z-index: 5;
top: calc(800px * 4.45);
position: absolute;
}

  .kz15v img{width: 100%;
  height: auto;
}

.obi2{height: auto;
  width: calc(800px * 0.123);
  z-index: 8;
  position: absolute;
 
  left: calc(800px * -0.004);

  margin: auto;
 top: calc(800px * 0.975);
}


  .obi2 img{width: 100%;
    height: auto;}
    
    
    .bun7{height: calc(800px * 0.029);
      width: auto;
      z-index: 7;
      position: absolute;
     
      left: 0;
      right: 0;
      margin: auto;
     top: calc(800px * 1.74);
    }
    
    
      .bun7 img{height: 100%;
        width: auto;}


        .slidez6 {
          margin-left: auto;
         position   : absolute;
         overflow   : hidden;
                           /* 画像のサイズに合わせて変更ください */
         width      : 88.1%;
         height     :calc(800px * 0.59);
              /* サンプルは中央寄せの背景：白 */
       
              top: calc(800px * 2.95);
              z-index:6;
       }
        
        /*=== 画像の設定 ======================================= */
       .slidez6 img {
         display    : block;
         position   : absolute;
                             /* 画像のサイズを表示エリアに合せる */
         width      : 100%;
         height     : inherit;
         opacity    : 0;
         animation  : slideAnimex 4.5s ease infinite;
       }
        
        /*=== スライドのアニメーションを段差で開始する ========= */
       .slidez6 img:nth-of-type(1) { animation-delay: 0s }
       .slidez6 img:nth-of-type(2) { animation-delay: 1.5s }
       .slidez6 img:nth-of-type(3) { animation-delay: 3s }
        
        /*=== スライドのアニメーション ========================= */
       @keyframes slideAnimex{
         0% { opacity: 0 }
         16% { opacity: 1 }
        33% { opacity: 1 }
        49% { opacity: 0 }
       100% { opacity: 0 }
        }
      



        .crebox13{  
          margin: auto;
         top: calc(800px * 4.39);
        position: absolute;
        z-index: 100;
        background-color:;
  opacity:1;
        left: 0;
        right: 0;
        width: auto;
        overflow: hidden;
        padding: calc(800px * 0.063);
        }
  







.sec6x{width: 100%;
  height: calc(800px * 3.85);
position: relative;
background-color:}

.sec7x{width: 100%;
  height: calc(800px *   3.63);
position: relative;
background-color: ;}

.bc7v{width: 40.1%;
  height: calc(800px * 3.169);
background-color: #e7e1e6;
top: 0px;
position: absolute;
z-index: 0;}


.kz16v{width:100%;
  height: auto;
left:0px;
 
  margin: auto;
  top: calc(800px * 0);
position: absolute;
z-index: 5;

}

  .kz16v img{width: 100%;
  height: auto;
}


.kz17v{width:90%;
  height: auto;
  left: 0;
right: 0;
  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px * 2.82);}

  .kz17v img{width: 100%;
  height: auto;
}

.kzz1{width:100%;
  height: auto;
  left: 0;

  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px * 2.55);}

  .kzz1 img{width: 100%;
  height: auto;
}

.kzz2{width:100%;
  height: auto;
 right: 0;

  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px * 0.9);}

  .kzz2 img{width: 100%;
  height: auto;
}



.kz18v{width:84%;
  height: auto;
left: 0px;
  right: 0;
  margin: auto;
z-index: 3;
position: absolute;
top: calc(800px * 4.3);}

  .kz18v img{width: 100%;
  height: auto;
}

.kz19v{width:37.7%;
  height: auto;
  left:calc(800px * 0.25);

  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px * 3.85);}

  .kz19v img{width: 100%;
  height: auto;
}


.kz20v{width:50%;
  height: auto;

  right: 0;
  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px * 3.231);}

  .kz20v img{width: 100%;
  height: auto;
}

.kz21v{width:100%;
  height: auto;

  right: 0;
  margin: auto;
z-index: 5;
position: absolute;
top: 0;}

  .kz21v img{width: 100%;
  height: auto;
}


.kz22v{width:90%;
  height: auto;
  left: 0;
  right: 0;
  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px * 1.98);}

  .kz22v img{width: 100%;
  height: auto;
}


.kz23v{width:75%;
  height: auto;
  left: 0;
  
  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px * 2.909);}

  .kz23v img{width: 100%;
  height: auto;
}

.kz24v{width:90%;
  height: auto;
  left: 0;
  right: 0;
  margin: auto;
  
  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px * 0.047);}

  .kz24v img{width: 100%;
  height: auto;
}


.kz25v{width:100%;
  height: auto;
  left: 0;
  right: 0;
  margin: auto;
  
  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px * 1.87);}

  .kz25v img{width: 100%;
  height: auto;
}

.kz26v{width:60%;
  height: auto;
  left: 0;
  right: 0;
  margin: auto;
  
  margin: auto;
z-index: 5;
position: absolute;
top: calc(800px *  2.798);}

  .kz26v img{width: 100%;
  height: auto;
}

.kz27v{width:90%;
  height: auto;

  
  margin: auto;
z-index: 5;
}

  .kz27v img{width: 100%;
  height: auto;
}






.crebox14{  
  margin: auto;
 top: calc(800px * 5.06);
position: absolute;
z-index: 100;
background-color:;
opacity: 1;
left: 0;
right: 0;
width: auto;
overflow: hidden;
padding: calc(800px * 0.063);
}

.copy5va, .copy5vb{width: 100%;
  height: auto;
  z-index: 6;
  position: absolute;}


  .copy5va img, .copy5vb img{width: 100%;
    height: auto;}
  
    .copy5va{top: calc(800px * 1.466); 
    }
    .copy5vb{top:calc(800px * 1.621);}



.copy6va, .copy6vb{width: 100%;
  height: auto;
  z-index: 6;
  position: absolute;}


  .copy6va img, .copy6vb img{width: 100%;
    height: auto;}
  
    .copy6va{top: calc(800px * 1.443); 
    }
    .copy6vb{top:calc(800px * 1.598);}

    .copy7va, .copy7vb{width: 100%;
      height: auto;
      z-index: 6;
      position: absolute;}
    
    
      .copy7va img, .copy7vb img{width: 100%;
        height: auto;}
      
        .copy7va{top: calc(800px * 1.357); 
        }
        .copy7vb{top:calc(800px * 1.511);}
    

    .copy3va, .copy3vb{width: 100%;
      height: auto;
      z-index: 10;
      position: absolute;}
    
    
      .copy3va img, .copy3vb img{width: 100%;
        height: auto;}
      
        .copy3va{top: calc(800px * 1.469); 
        }
        .copy3vb{top:calc(800px * 1.621);
        background-color;}



    .bun8{height: calc(800px * 0.029);
      width: auto;
      z-index: 7;
      position: absolute;
     
      left: 0;.
      right: 0;
      margin: auto;
     top: calc(800px * 2.38);
    }
    
    
      .bun8 img{height: 100%;
        width: auto;}










        .obi1 img,.obi2 img{opacity : 0;
          transform: translateY(calc(800px * 0.5));
          transition: all 1s;
        }

        .kz6v img,.kz11x img{opacity : 0;
          transform: translateY(calc(800px * -0.5));
          transition: all 1s;
        }

        .kz17v img,.kz2v img,.kz13v img,.kz6v img,.kz12v img,.kz1v img,.copy3a img,.kz11v img,  .kz26v img, .kz24v img,  .kz23v img, .kz19v img, .slidez4,.s4 img,.slidez6,.s6 img,#viewer10,.kz14v img{opacity : 0;
          transform: translateX(calc(800px * 0.5));
          transition: all 1s;
        }

        .kz18v img,.kz16v img,.kz3v img,.kz9v img,.kz8v img, .kz7v img,.kz4v img,.kz21v img,.kz27v img,.kz25v img,.kz5v img, .kz22v img, .kz20v img,.kz6x img,.kz10v img,.kz15v img {opacity : 0;
          transform: translateX(calc(800px * -0.5));
          transition: all 1s;
        }


        #a{opacity: 0.7;}

        #b{opacity: 0.88;}
        #c{opacity: 0.79;}

#popo{margin-bottom:calc(800px * 0.15);
  }

        
---------------------------------------------------------------------------------------------------









.shoes3 img{width:90%;
  top:0px;
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.5s;}
  
  .shoes3{width:80%;
  height:208px;
  background-color:;
  position: relative;
  top: 50px;
margin-bottom: 0px;
margin-left:auto;
margin-right:auto;}



.shoes4 img{width:90%;
  top:0px;
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.5s;}
  
  .shoes4{width:75%;
  height:208px;
  background-color:;
  position: relative;
  top: 210px;
margin-bottom: 0px;
}


.shoes5 img{width:90%;
  top:0px;
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.5s;}
  
  .shoes5{width:65%;
  height:208px;
  background-color:;
  position: relative;
  top: 50px;
margin-bottom: 0px;
margin-left:auto;
}

.shoes6 img{width:90%;
  top:0px;
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.5s;}
  
  .shoes6{width:75%;
  height:208px;
  background-color:;
  position: relative;
  top: 50px;
margin-bottom: 0px;
margin-left:auto;
}





.logod img{width:40%;
  margin-bottom: 0px;}



.wrapper{width:800px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color:;
overflow:hidden;
margin-bottom:350px;
margin-top:50px;
z-index: 0;}

.headerx img{width:80%;
margin-bottom:100px ;}

.html{font-family: "Suisse"}


.ugoki{width:100%;
    position: relative;

}

.shoes img{width:80%;
top:0px;
opacity : 0;
transform: translateY(30px);
transition: all 0.5s;}

.shoes{width:100%;
height:auto;

position: relative;
top: -25px;}


.shoes2 img{width:80%;
  top:0px;
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.5s;}
  
  .shoes2{width:75%;
  height:120px;
  background-color:;
  position: relative;
  top: 70px;
margin-bottom: 70px;
margin-left: auto;
margin-right:auto;}


    
    


.middle img{position: relative;
z-index: 0;}

    
.middle{
  height     :1193px;
  overflow: hidden;
background-color;
position: relative;
z-index: 0;
margin-bottom: 0px;
}


  
      
  .middlep{
    width: 544px;
    height     :1010px;
    overflow: hidden;
  background-color;
  position: relative;
  z-index: 0;
  margin-bottom: 0px;
  margin-left: auto;
  position: relative;
  
  }

  .middlep2{
    width: 528px;
    height     :871px;
    overflow: hidden;
  background-color;
  position: relative;
  z-index: 0;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  }
  
  



.middle300{
  height     :1312px;
  overflow: hidden;
background-color;
position: relative;
z-index: 0;
margin-bottom: 0px;
}

.do{width: 70%;
height: auto;}

.storex{text-align: right;
margin-right: 0px;}
.storex img{height     :40px;
width:auto;
top: 0px;}



.storexz img{height:20px;
  width:auto;
  margin-left: px;}


.middle2 img{width:630px;
    top:260px;
margin-left: -40px;}
    
.middle2{height:1300px;
background-color:#dfdbdd ;}

.en{z-index: 100;
  width:200px;
  height     :200px;
background-color:white;
left: 0px;
right: 0px;

margin-left: auto;
margin-right: auto;
margin-bottom:-85px;
border-radius: 50%;
position: absolute;

}

.en2{z-index: 100;
  width:30% ;
  height     :calc(800px * 0.3);
background-color:white;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom:-60px;
top: 100px;
border-radius: 50%;
transform: translateY(50px);
transition: all 1s;
}

.en3{z-index: 100;
  width:30% ;
  height     :calc(800px * 0.3);
background-color:white;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom:-60px;
top: 100px;
border-radius: 50%;
transform: translateY(50px);
transition: all 1s;
}

.en4{z-index: 100;
  width:30% ;
  height     :calc(800px * 0.3);
background-color:white;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom:-60px;
top: 50px;
border-radius: 50%;
transform: translateY(50px);
transition: all 1s;
}

.en4 img{width:100%;
  margin-bottom:0px;
  
  transform: translateY(5px);
  transition: all 1s;
  z-index: 100;}


.en img{width:100%;
margin-bottom:50px;

transform: translateY(5px);
transition: all 1s;
z-index: 100;}

.en2 img{width:100%;
  margin-bottom:0px;
  
  transform: translateY(10px);
  transition: all 1s;
  z-index: 100;}

  .en3 img{width:100%;
    margin-bottom:0px;
    
    transform: translateY(5px);
    transition: all 1s;
    z-index: 100;}

.moji1 img{width:130px;
margin-bottom: 5px;
opacity : 0;
transform: translateY(-30px);
transition: all 0.5s;}

.moji2 img{width:130px;
    opacity : 0;
    transform: translateY(30px);
    transition: all 0.5s;}


    .enB img{width:250px;
        margin-bottom:-131px;
        opacity : 0;
        transform: translateY(30px);
        transition: all 0.5s;}
        
        .moji1B img{width:130px;
        margin-bottom: 5px;
        opacity : 0;
        transform: translateY(-30px);
        transition: all 0.5s;}
        
        .moji2B img{width:130px;
            opacity : 0;
            transform: translateY(30px);
            transition: all 0.5s;}


.title2{top: 300px;}


.ugoki2{background-color:rgb(190, 189, 189);}



.ugoki{background-color:;
  z-index: 100;
width:100% ;
height: ;
position: relative;}

.sen{margin-top:calc(800px * 0.2);
  margin-bottom:calc(800px * 0.2);
width: 80%;
margin-left: auto;
margin-right: auto;}


.sen2{margin-top:40px;
  margin-bottom:15px;
width: 80%;
margin-left: auto;
margin-right: auto;}



.slide {z-index: 100;
    position   : relative;
    overflow   : hidden;
                      /* 画像のサイズに合わせて変更ください */
    width      : 100%;
    height     :calc(800px * 0.591);
    margin     : auto;      /* サンプルは中央寄せの背景：白 */
    background :;
    margin-left: auto;
margin-right: auto;
text-align: center;
  }   
   /*=== 画像の設定 ======================================= */
  .slide img {
    display    : block;
    position   : absolute;
                        /* 画像のサイズを表示エリアに合せる */
    width      : inherit;
    height     : inherit;
    opacity    : 0;
    animation  : slideAnime5 10s ease infinite;
  }

   
   /*=== スライドのアニメーションを段差で開始する ========= */
   .slide img:nth-of-type(1) { animation-delay: 0s }
   .slide img:nth-of-type(2) { animation-delay: 2s }
   .slide img:nth-of-type(3) { animation-delay: 4s }
   .slide img:nth-of-type(4) { animation-delay: 6s }
   .slide img:nth-of-type(5) { animation-delay: 8s }
   
   /*=== スライドのアニメーション ========================= */
  @keyframes slideAnime5{
    0% { opacity: 0 }
    10% { opacity: 1 }
   20% { opacity: 1 }
   30% { opacity: 0 }
  100% { opacity: 0 }
  }

 /*=== 画像の表示エリア ================================= */
 .slide3 {
  position   : absolute;
    
                      /* 画像のサイズに合わせて変更ください */
                      width:100%;
    height     :1193px;
    margin     : auto;      /* サンプルは中央寄せの背景：白 */
    background-color :rgb(120, 117, 117);
   
    padding-top:0px;
  left:0px;
  z-index: 1;
  }
   
   /*=== 画像の設定 ======================================= */
  .slide3 img {
      
    display    : block;
    position   : absolute;
                        /* 画像のサイズを表示エリアに合せる */
    width      : inherit;
    height     : inherit;
    opacity    : 0;
    animation  : slideAnimeww 6s ease infinite;
    z-index: 1;
  }
   
   /*=== スライドのアニメーションを段差で開始する ========= */
  .slide3 img:nth-of-type(1) { animation-delay: 0s }
  .slide3 img:nth-of-type(2) { animation-delay: 3s }
   
   /*=== スライドのアニメーション ========================= */
  @keyframes slideAnimeww{
    0% { opacity: 0 }
    25% { opacity: 1 }
   50% { opacity: 1 }
   75% { opacity: 0 }
  100% { opacity: 0 }
  }


  .slide3p {
    position   : absolute;
      
                        /* 画像のサイズに合わせて変更ください */
                        width:544px;
      height     :1010px;
          /* サンプルは中央寄せの背景：白 */
      background-color :rgb(120, 117, 117);
     
      padding-top:0px;
   margin-left: auto;
   
    z-index: 1;
    }
     
     /*=== 画像の設定 ======================================= */
    .slide3p img {
        
      display    : block;
      position   : absolute;
                          /* 画像のサイズを表示エリアに合せる */
      width      : 100%;
      height     : inherit;
      opacity    : 0;
      animation  : slideAnimeww 6s ease infinite;
      z-index: 1;
    }
     
     /*=== スライドのアニメーションを段差で開始する ========= */
    .slide3p img:nth-of-type(1) { animation-delay: 0s }
    .slide3p img:nth-of-type(2) { animation-delay: 3s }
     
     /*=== スライドのアニメーション ========================= */
    @keyframes slideAnimeww{
      0% { opacity: 0 }
      25% { opacity: 1 }
     50% { opacity: 1 }
     75% { opacity: 0 }
    100% { opacity: 0 }
    }


    .slide3pp {
      position   : absolute;
        
                          /* 画像のサイズに合わせて変更ください */
                          width:528px;
        height     :871px;
            /* サンプルは中央寄せの背景：白 */
        background-color :rgb(120, 117, 117);
       
        padding-top:0px;
     margin-left: auto;
     margin-right: auto;
      z-index: 1;
      }
       
       /*=== 画像の設定 ======================================= */
      .slide3pp img {
          
        display    : block;
        position   : absolute;
                            /* 画像のサイズを表示エリアに合せる */
        width      : inherit;
        height     : inherit;
        opacity    : 0;
        animation  : slideAnimeww 6s ease infinite;
        z-index: 1;
      }
       
       /*=== スライドのアニメーションを段差で開始する ========= */
      .slide3pp img:nth-of-type(1) { animation-delay: 0s }
      .slide3pp img:nth-of-type(2) { animation-delay: 3s }
       
       /*=== スライドのアニメーション ========================= */
      @keyframes slideAnimeww{
        0% { opacity: 0 }
        25% { opacity: 1 }
       50% { opacity: 1 }
       75% { opacity: 0 }
      100% { opacity: 0 }
      }


      .slide300 {
        position   : absolute;
          
                            /* 画像のサイズに合わせて変更ください */
                            width:800px;
          height     :934px;
          margin     : auto;      /* サンプルは中央寄せの背景：白 */
          
         
          padding-top:0px;
          margin-left: auto;
          margin-right: auto;
        z-index: 1;
        }
         
         /*=== 画像の設定 ======================================= */
        .slide300 img {
            
          display    : block;
          position   : absolute;
                              /* 画像のサイズを表示エリアに合せる */
          width      : inherit;
          height     : inherit;
          opacity    : 0;
          animation  : slideAnimeww 6s ease infinite;
          z-index: 1;
        }
         
         /*=== スライドのアニメーションを段差で開始する ========= */
        .slide300 img:nth-of-type(1) { animation-delay: 0s }
        .slide300 img:nth-of-type(2) { animation-delay: 3s }
         
         /*=== スライドのアニメーション ========================= */
        @keyframes slideAnimeww{
          0% { opacity: 0 }
          25% { opacity: 1 }
         50% { opacity: 1 }
         75% { opacity: 0 }
        100% { opacity: 0 }
        }
    

   /*=== 画像の表示エリア ================================= */
 .slide4 {
    position   : relative;
    
                      /* 画像のサイズに合わせて変更ください */
                      width:595px;
    height     : 897px;
    margin     : auto;      /* サンプルは中央寄せの背景：白 */
    background : ;
    padding-top:50px;

  }
   
   /*=== 画像の設定 ======================================= */
  .slide4 img {
      
    display    : block;
    position   : absolute;
                        /* 画像のサイズを表示エリアに合せる */
    width      : inherit;
    height     : inherit;
    opacity    : 0;
    animation  : slideAnime 10s ease infinite;
  }
   
   /*=== スライドのアニメーションを段差で開始する ========= */
  .slide4 img:nth-of-type(1) { animation-delay: 0s }
  .slide4 img:nth-of-type(2) { animation-delay: 3s }
   
   /*=== スライドのアニメーション ========================= */
  @keyframes slideAnime{
     0% { opacity: 1 }
     2% { opacity: 1 }
    50% { opacity: 1 }
    52% { opacity: 0 }
   100% { opacity: 0 }
  }


  .moji1s{display:none;}
  .moji2s{display:none;}
  .moji1Bs{display:none;}
  .moji2Bs{display:none;}
  .ens{display:none;}
  .enBs{display:none;}
  .shoess{display:none;}
  .shoes2s{display:none;}
  .shumojis{display:none;}
  .shumoji2s{display:none;}
  .moji1pad{display:none;}
  .moji2pad{display:none;}
  .enpad{display:none;}


  .mid2 img{float:left;
  width: 50%;
  
  z-index: 101;
　　　　　　　　　　　}

.mid2x img{float:left;
  width: 50%;
  position : relative;
  z-index: 101;
　　　　　　　　　　　}


.mid3 img{float:left; 
  width: 50%;
  position : relative;
  z-index: 101;
  
}
}

.mid2{ overflow: hidden;
  
  width: 100%;
  height     :612px;
  margin-bottom: 0px;
float: left;
background-color: brown;}

.mid2x{ overflow: hidden;
  position   : absolute;
  width: 50%;
  height: auto;
  margin-bottom: 0px;
float: left;}

.kari{color: white;
}
.kari p{font-size: 1px;}



 .shumojix1 img{top: 0px;}

.mid3{ position : relative;
  margin-bottom: 0px;
  
  z-index: 100;
  overflow: hidden;
  width: 100%;
  height: auto;
background-color;
}

.mid3x{ position : relative;

  
  display: flex;
  z-index: 100;
  overflow: hidden;
  width: 100%;
  height: 610px;
background-color:;
margin-bottom: 00px;
top: 0px;
}




.mid300x{ position : relative;

  
  display: flex;
  z-index: 100;
  overflow: hidden;
  width: 100%;
  height: 610px;
background-color:;
margin-bottom: 00px;
margin-left: auto;
margin-right:auto;
}

.mid30x{ position : relative;

  
  display: flex;
  z-index: 100;
  overflow: hidden;
  width: 100%;
  height: 610px;
background-color:;
margin-bottom: 00px;
top: 0px;
}




.typo2{
overflow: hidden;
width:50% ;
height: 100%;
background-color: ;}


.typo2 img{height: auto;
  margin-right: 0px;
width: 100%;
top: 0px;
  z-index: 100;
  margin-left: 0px;
  
}



  

.typo3{
  overflow: hidden;
  width:50% ;
 height: auto;
  background-color: ;
  position: relative;
  
}
  
  
  .typo3 img{height: auto;
    margin-right: 0px;
  width: 100%;
  top: -10px;
    z-index: 100;
    
    
  }




  .typo4{
    overflow: hidden;
    width:35% ;
    height: 100%;
    background-color: ;
    
  }
    
    
    .typo4 img{height: auto;
      margin-right: 0px;
    width: 100%;
    top: 0px;
      z-index: 100;
      margin-left: ;
      
    }
  

.typo1{
overflow: ;
width:40% ;
height: 100%;
background-color: ;}


.typo30{margin-left: 0px;
  overflow: hidden;
  width:50% ;
  height: 100%;
  background-color: ;}

  .typo30 img {width: 100%;}

  



.pikk2x img{opacity : 0;
  transform: translateX(30px);
  transition: all 0.5s;
  top: -20px;
}

  .pikk3x img{opacity : 0;
    transform: translateX(30px);
    transition: all 0.5s;}

    .pikk4x img{opacity : 0;
      transform: translateX(30px);
      transition: all 0.5s;}
      .pikk5x img{opacity : 0;
        transform: translateX(30px);
        transition: all 0.5s;}


        .pikk2xz img{opacity : 0;
          transform: translateX(30px);
          transition: all 0.5s;
        top: 0px;}
        
          .pikk3xz img{opacity : 0;
            transform: translateX(30px);
            transition: all 0.5s;}
        
            .pikk4xz img{opacity : 0;
              transform: translateX(30px);
              transition: all 0.5s;}
              .pikk5xz img{opacity : 0;
                transform: translateX(30px);
                transition: all 0.5s;}
    
      .pik2x img{position: relative;}

    .pikk1 img{opacity : 0;
      transform: translatex(30px);
      transition: all 0.5s;
      width: 50%;
      }

      .pikk1xx img{opacity : 0;
        transform: translateX(30px);
        transition: all 0.5s;
        width: 65%;
        }

      


      .pikky img{
        
        width: 100%;
        height: auto;
        padding-bottom: 0px;
       }

       .pikky3000 img{
        
        width: 100%;
        height: auto;
        padding-bottom: 0px;
       }

       .pikky5 img{
        
        width: 100%;
        height: auto;
        padding-bottom: 0px;
       }

       .pikkyp img{
        
        width: 100%;
        height: auto;
        padding-bottom: 0px;
       }

       .pikky30 img{
        
        width: 100%;
        height: auto;
        padding-bottom: 0px;
       }

       .pikk3x{margin-left: ;}

       .pikk4x{margin-left: }

       .pikk5x{margin-left: }
      

       .pikk3xz{margin-left: px;}

       .pikk4xz{margin-left: ;}

       .pikk5xz{margin-left:;}

       .pikky{width:50%;
        height: 280px;
      background-color: ;
     margin-bottom: 0px;}

     .pikky3000{width:62%;
      height: 280px;
    background-color: ;
   margin-bottom: 0px;}

     .pikky5{width:62%;
      height: 280px;
    background-color: ;
   margin-bottom: 0px;}

  
  
     .pikky30{width:62%;
      height: 280px;
    background-color: ;
   margin-bottom: 0px;}

      .pikk3 img{
        opacity : 0;
        transform: translateX(-30px);
        transition: all 0.5s;
      
     }

      .pikk4 img{
        opacity : 0;
        transform: translateX(30px);
        transition: all 0.5s;}
      .pikk5 img{
        opacity : 0;
        transform: translateX(30px);
        transition: all 0.5s;
       }

        .pikk2 img{
          opacity : 0;
          transform: translateX(-30px);
          transition: all 0.5s;}

          .middy2 img{width:100%;
          margin-bottom: 0px;}

          .middy3 img{width:100%;
            margin-bottom: 0px;}

            .middy3{height     :800px;}

            .middy33 img{width:100%;
              margin-bottom: 0px;}
            .middy33{height     :888px;}

            .middy33x img{width:100%;
              margin-bottom: 0px;
              opacity : 0;
              transform: translateX(-30px);
              transition: all 0.5s;}
            .middy33x{height     :auto;}

            .middy4 img{width:75%;
              top: 150px;}

          .middy img{width:100%;
            margin-bottom: 25px;}

          .mid2 img{margin-bottom: 0px;}


          .pikk2x{top: -20px;}

          .pik1x {
            position   : relative;
            overflow   : hidden;
                              /* 画像のサイズに合わせて変更ください */
            width      : 50%;
            height     : 300px;
            margin     : auto;      /* サンプルは中央寄せの背景：白 */
            background : ;
            float: left;
            margin-bottom: 50px;
          }
           
           /*=== 画像の設定 ======================================= */
          .pik1x img {
            display    : block;
            position   : absolute;
                                /* 画像のサイズを表示エリアに合せる */
            width      : 100%;
            height     : inherit;
            opacity    : 0;
            animation  : slideAnime3 7s ease infinite;
          }
           
           /*=== スライドのアニメーションを段差で開始する ========= */
          .pik1x img:nth-of-type(1) { animation-delay: 0s }
          .pik1x img:nth-of-type(2) { animation-delay: 3.5s }
           
           /*=== スライドのアニメーション ========================= */
          @keyframes slideAnime3{
             0% { opacity: 1 }
             25% { opacity: 1 }
            50% { opacity: 1 }
            75% { opacity: 0 }
           100% { opacity: 0 }
          }

          .pik2x {
            position   : relative;
            overflow   : hidden;
                              /* 画像のサイズに合わせて変更ください */
            width      : 50%;
            height     : 300px;
            margin     : auto;      /* サンプルは中央寄せの背景：白 */
            background : #fff;
            float: left;
            margin-bottom: 50px;
          }
           
           /*=== 画像の設定 ======================================= */
          .pik2x img {
            display    : block;
            position   : absolute;
                                /* 画像のサイズを表示エリアに合せる */
            width      : 100%;
            height     : inherit;
            opacity    : 0;
            animation  : slideAnime3 12s ease infinite;
          }
           
           /*=== スライドのアニメーションを段差で開始する ========= */
          .pik2x img:nth-of-type(1) { animation-delay: 0s }
          .pik2x img:nth-of-type(2) { animation-delay: 6s }
           
           /*=== スライドのアニメーション ========================= */
          @keyframes slideAnime3{
             0% { opacity: 1 }
             25% { opacity: 1 }
            50% { opacity: 1 }
            75% { opacity: 0 }
           100% { opacity: 0 }
          }
      
      

          .typo{top: -300px;}

          .slidea {
            position   : relative;
            overflow   : hidden;
                              /* 画像のサイズに合わせて変更ください */
            width      : 75%;
            height     :600px;
            margin     : auto;      /* サンプルは中央寄せの背景：白 */
            background : #fff;
            margin-bottom: 25px;
          }
           
           /*=== 画像の設定 ======================================= */
          .slidea img {
            display    : block;
            position   : absolute;
                                /* 画像のサイズを表示エリアに合せる */
            width      : 100%;
            height     : inherit;
            opacity    : 0;
            animation  : slideAnimex 6s ease infinite;
          }
           
           /*=== スライドのアニメーションを段差で開始する ========= */
          .slidea img:nth-of-type(1) { animation-delay: 0s }
          .slidea img:nth-of-type(2) { animation-delay: 2s }
          .slidea img:nth-of-type(3) { animation-delay: 4s }
           
           /*=== スライドのアニメーション ========================= */
          @keyframes slideAnimex{
            0% { opacity: 0 }
            16% { opacity: 1 }
           33% { opacity: 1 }
           49% { opacity: 0 }
          100% { opacity: 0 }
           }


           .slideabc {
             margin-left: auto;
            position   : relative;
            overflow   : hidden;
                              /* 画像のサイズに合わせて変更ください */
            width      : 697px;
            height     :748px;
                 /* サンプルは中央寄せの背景：白 */
            background : rgb(167, 155, 127);
            margin-bottom: 25px;
          }
           
           /*=== 画像の設定 ======================================= */
          .slideabc img {
            display    : block;
            position   : absolute;
                                /* 画像のサイズを表示エリアに合せる */
            width      : 100%;
            height     : inherit;
            opacity    : 0;
            animation  : slideAnimex 6s ease infinite;
          }
           
           /*=== スライドのアニメーションを段差で開始する ========= */
          .slideabc img:nth-of-type(1) { animation-delay: 0s }
          .slideabc img:nth-of-type(2) { animation-delay: 2s }
          .slideabc img:nth-of-type(3) { animation-delay: 4s }
           
           /*=== スライドのアニメーション ========================= */
          @keyframes slideAnimex{
            0% { opacity: 0 }
            16% { opacity: 1 }
           33% { opacity: 1 }
           49% { opacity: 0 }
          100% { opacity: 0 }
           }


           .slidea30 {
            position   : relative;
            overflow   : hidden;
                              /* 画像のサイズに合わせて変更ください */
            width      : 75%;
            height     :600px;
            margin     : auto;      /* サンプルは中央寄せの背景：白 */
            background : #fff;
            margin-bottom: 25px;
          }
           
           /*=== 画像の設定 ======================================= */
          .slidea30 img {
            display    : block;
            position   : absolute;
                                /* 画像のサイズを表示エリアに合せる */
            width      : 100%;
            height     : inherit;
            opacity    : 0;
            animation  : slideAnimex 6s ease infinite;
          }
           
           /*=== スライドのアニメーションを段差で開始する ========= */
          .slidea30 img:nth-of-type(1) { animation-delay: 0s }
          .slidea30 img:nth-of-type(2) { animation-delay: 2s }
          .slidea30 img:nth-of-type(3) { animation-delay: 4s }
           
           /*=== スライドのアニメーション ========================= */
          @keyframes slideAnimex{
            0% { opacity: 0 }
            16% { opacity: 1 }
           33% { opacity: 1 }
           49% { opacity: 0 }
          100% { opacity: 0 }
           }


          

        /*=== 画像の表示エリア ================================= */
 .slide3x {
  position   : reative;
    
                      /* 画像のサイズに合わせて変更ください */
                      width:800px;
                      height     :630px;
    margin     : auto;      /* サンプルは中央寄せの背景：白 */
    background : rgb(172, 170, 170);
   
    padding-top:0px;
  left:0px;
  z-index: 1;
  }
   
   /*=== 画像の設定 ======================================= */
  .slide3x img {
      
    display    : block;
    position   : absolute;
                        /* 画像のサイズを表示エリアに合せる */
    width      : inherit;
    height     : inherit;
    opacity    : 0;
    animation  : slideAnime3x 9s ease infinite;
    z-index: ;
  }
   
   /*=== スライドのアニメーションを段差で開始する ========= */
   .slide3x img:nth-of-type(1) { animation-delay: 0s }
   .slide3x img:nth-of-type(2) { animation-delay: 3s }
   .slide3x img:nth-of-type(3) { animation-delay: 6s }
   
   /*=== スライドのアニメーション ========================= */
  @keyframes slideAnime3x{
    0% { opacity: 0 }
   16% { opacity: 1 }
  33% { opacity: 1 }
  49% { opacity: 0 }
 100% { opacity: 0 }
  }


.slided {z-index: 100;
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100%;
  height     :473px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background-color :rgb(198, 192, 192);
  margin-left: auto;
margin-right: auto;
text-align: center;
}   
 /*=== 画像の設定 ======================================= */
.slided img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnimed 4.5s ease infinite;
}

 
 /*=== スライドのアニメーションを段差で開始する ========= */
 .slided img:nth-of-type(1) { animation-delay: 0s }
 .slided img:nth-of-type(2) { animation-delay: 1.5s }
 .slided img:nth-of-type(3) { animation-delay: 3s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnimed{
  0% { opacity: 0 }
  16% { opacity: 1 }
 33% { opacity: 1 }
 49% { opacity: 0 }
100% { opacity: 0 }
}


.slidedry {z-index: 100;
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 640px;
  height     :914px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background-color :rgb(198, 192, 192);
  margin-left: auto;
margin-right: auto;
text-align: center;
}   
 /*=== 画像の設定 ======================================= */
.slidedry img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnimed 4.5s ease infinite;
}

 
 /*=== スライドのアニメーションを段差で開始する ========= */
 .slidedry img:nth-of-type(1) { animation-delay: 0s }
 .slidedry img:nth-of-type(2) { animation-delay: 1.5s }
 .slidedry img:nth-of-type(3) { animation-delay: 3s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnimed{
  0% { opacity: 0 }
  16% { opacity: 1 }
 33% { opacity: 1 }
 49% { opacity: 0 }
100% { opacity: 0 }
}


.num img{width: 13%;
  top: 40px;
margin-bottom: 60px;
transition: all 1s;
opacity : 0.2;
transform: translateY(30px);}

.aw img {width:85%;
  margin-bottom: 10px;
  transition: all 1s;
  opacity : 0.2;
  transform: translateY(30px);
  
}


  

  .vol img{width:35%;
    opacity : 0;
      transform: translateX(-30px);
    top: 80px;
    margin-bottom: 0px;
    transition: all 0.7s;}

    .volxx img{width:auto;
      opacity : 0;
      height: 0px;
      top: 0px;
      margin-bottom: 0px;
      transition: all 0.5s;}

      .volxx{height:100px ;}

      .volx img{display:none;}
      


    .vol1 img{width:35%;
      top: 80px;
      margin-bottom: 0px;}
  
    .vol2 img{width:35%;
      top: 20px;
      margin-bottom: 0px;}


    .shumo9{width: 50%;
     
    overflow: hidden;
  background-color:;
  height: calc(800px * 0.764);
  position: relative;
  }


 
  


    .shumo9 img{height     :calc(800px * 0.023);
    width:auto;
  top: 0px;
  margin-bottom: 10px;
  margin-left:20px;
  
}

.storex1 img{height:20px;
  bottom: 0;
  padding: 0;
  
   }

  .storex1{bottom: 0; 
    height: auto;
  position:absolute;
background-color: ;
overflow: hidden;
height:20px;}

.mido{width: 100%;
height:286px;
float: left;
display: flex;
margin-bottom: 0px;
background-color: ;}

.pik1c {width: 50%;
overflow:hidden;
height     :488px;}
.pik1c img{
  margin-left:12px;
  width: 80%;
  opacity : 0;
      transform: translateX(30px);
      transition: all 0.5s;
 }

 .pik1c2 {width: 50%;
  overflow:hidden;
  height     :calc(800px * 0.611);}
  .pik1c2 img{
    margin-left:12px;
    width: 80%;
    opacity : 0;
        transform: translateX(-50px);
        transition: all 0.5s;
   }

   .pik2c2 {width: 50%;
    overflow:hidden;
    height     :488px;}
  
    .pik2c2 img{
      margin-right:12px;
      width: 80%;
      opacity : 0;
        transform: translateX(-30px);
        transition: all 0.5s;
     }


.pik2c {width: 50%;
  overflow:hidden;
  height     :488px;}

  .pik2c img{
    margin-right:12px;
    width: 80%;
    opacity : 0;
      transform: translateX(50px);
      transition: all 0.5s;
   }

    .pikky img{opacity : 0;
      transform: translateX(-100px);
      transition: all 1s;}

      .pikky3000 img{opacity : 0;
        transform: translateX(30px);
        transition: all 0.5s;}

      .pikky5 img{opacity : 0;
        transform: translateX(30px);
        transition: all 0.5s;}


    .pikkyp img{opacity : 0;
      transform: translateX(30px);
      transition: all 0.5s;}

      

      .pikky30 img{opacity : 0;
        transform: translateX(30px);
        transition: all 0.5s;}


        .slideb {
          position   : relative;
          overflow   : hidden;
                            /* 画像のサイズに合わせて変更ください */
          width      : 100%;
          height     :1200px;
          margin     : auto;      /* サンプルは中央寄せの背景：白 */
          background : rgb(175, 174, 174);
        
          top: 25px;
        }
         
         /*=== 画像の設定 ======================================= */
        .slideb img {
          display    : block;
          position   : absolute;
                              /* 画像のサイズを表示エリアに合せる */
          width      : 100%;
          height     : inherit;
          opacity    : 0;
          animation  : slideAnimeww  6s ease infinite;
        }
         
         /*=== スライドのアニメーションを段差で開始する ========= */
         .slideb img:nth-of-type(1) { animation-delay: 0s }
         .slideb img:nth-of-type(2) { animation-delay: 3s }
         
         
         /*=== スライドのアニメーション ========================= */
        @keyframes slideAnimexx{
          0% { opacity: 0 }
          16% { opacity: 1 }
         33% { opacity: 1 }
         49% { opacity: 0 }
        100% { opacity: 0 }
        }

      .middy11 img{width: 100%;}
      

      .middy11 {height: 560px;
        overflow: hidden;
        background-color:;
      margin-bottom: 25px; }


      .slideq {z-index: 100;
        position   : relative;
        overflow   : hidden;
                          /* 画像のサイズに合わせて変更ください */
        width      : 100%;
        height     :calc(800px * 0.591);
        margin     : auto;      /* サンプルは中央寄せの背景：白 */
        background :;
        margin-left: auto;
    margin-right: auto;
    text-align: center;
      }   
       /*=== 画像の設定 ======================================= */
      .slideq img {
        display    : block;
        position   : absolute;
                            /* 画像のサイズを表示エリアに合せる */
        width      : inherit;
        height     : inherit;
        opacity    : 0;
        animation  : slideAnimeq 8s ease infinite;
      }
    
       
       /*=== スライドのアニメーションを段差で開始する ========= */
       .slideq img:nth-of-type(1) { animation-delay: 0s }
       .slideq img:nth-of-type(2) { animation-delay: 2s }
       .slideq img:nth-of-type(3) { animation-delay: 4s }
       .slideq img:nth-of-type(4) { animation-delay: 6s }
       
       /*=== スライドのアニメーション ========================= */
      @keyframes slideAnimeq{
        0% { opacity: 0 }
        12% { opacity: 1 }
       25% { opacity: 1 }
       37% { opacity: 0 }
      100% { opacity: 0 }
      }

     
      
        
        
      
      
      .pik1 img{
        opacity : 0;
      transform: translateX(30px);
      transition: all 0.5s;
        
      width: 100%;}
      
      .pik1{width: 50%;}

      
      
        .pik2 img{opacity : 0;
          transform: translateX(50px);
          transition: all 0.5s;
         }

            
      .pik1b img{
        opacity : 0;
      transform: translateY(-100px);
      transition: all 1s;
        
      width: 100%;}
      
      .pik1b{width: 50%;}

      
      
        .pik2b img{opacity : 0;
          transform: translateY(100px);
          transition: all 1s;
         }




      .pikk2x{top: 20px;}
      
      .pikk23x{top: 100px;}
      
     
        .pikk23x img{opacity : 0;
          transform: translateX(30px);
          transition: all 0.5s;
          top:0px ;
      
     }
        
        .pikk24x img{opacity : 0;
          transform: translateX(30px);
          transition: all 0.5s;
         
         }
        .pikk25x img{opacity : 0;
          transform: translateX(30px);
          transition: all 0.5s;
          
         }
        .pikk26x img{opacity : 0;
          transform: translateX(30px);
          transition: all 0.5s;
         
        }
        .pikk27x img{opacity : 0;
          transform: translateX(30px);
          transition: all 0.5s;
         
         }
          
          .typo1 img{

position : relative;
  z-index: 100;
  top: 0px;
  
  
} 

.mido{margin-bottom: 60px;
background-color: ;
height     :488px;}

.mid3x{top: 0px;
overflow: hidden;
height     :944px;
}


.mid3xp{ position : relative;

  
  display: flex;
  z-index: 100;
  overflow: hidden;
  width: 100%;
  height: 610px;
background-color:;
margin-bottom: 00px;
top: 0px;
}




.mid3xp{top: 0px;
  overflow: hidden;
  height     :auto;
  }
  

.mid300x{top: 0px;
  overflow: hidden;
  height     :566px;
  }

.mid30x{top: 0px;
  overflow: hidden;
  height     :1016px;
  }




.pikky{
  width: 50%;
  height     :auto;

}

.pikkyp{
  width: 100%;
  height     :auto;

}

.pikkyp img{opacity : 0;
  transform: translateX(-100px);
  transition: all 1s;}


.pikky img{
        
  width: 100%;
  height: auto;
  padding-bottom: 0px;
 }

.pikky3000{
  width: 60%;
  height     :auto;
}



.pikky5{
  width: 60%;
  height     :auto;
}




.pikky30{
  width: 50%;
  height     :auto;
}




.middy11{ height     :1193px;
  margin-bottom: 100px;
}

.slidea{background-color: darkgray;}


.shumo9 img{ opacity : 0;
  transform: translateX(50px);
  transition: all 0.5s;}


  .middy12 img{width: 100%;
    opacity : 0;
    transform: translateY(-30px);
    transition: all 0.5s;}

  .middy12{ height     :525px;
    margin-bottom: 100px;
  }

  .middy125 img{width: 100%;
    opacity : 0;
    transform: translateX(-30px);
    transition: all 0.5s;}

  .middy125{ height     :525px;
    margin-bottom: 100px;
  }

  .middy12p img{width: 100%;
    opacity : 0;
    transform: translateY(30px);
    transition: all 0.5s;}


  .middy12p{ height     :523px;
    margin-bottom: 0px;
  }


  .typo1 img{height: 50px;
    margin-right: 0px;
  width: auto;
  top: 20px;
    z-index: 100;
    margin-left: 30px;
    
    
  }

.pikk2{top: 0px;}

  .pikk2 img{
    position : relative;
  top: 0px;
margin-right: 0px;}

  .blank{width: 100%;
  height: 60px;
background-color:;}


.nagai img{width: 75%;}
.nagai{width: 100%;}

.nagai img{
  opacity : 0;
  transform: translateY(150px);
  transition: all 1s;}


  .nagaip img{width: 100%;
    }
.nagaip{width: 75%;
  margin-left: auto;
}

.nagaip img{
  opacity : 0;
  transform: translateY(150px);
  transition: all 1s;}

.nagaiki img{
  opacity : 0;
  transform: translateY(150px);
  transition: all 1s;}


.nagaiki img{width: 75%;}
.nagaiki{width: 100%;}

.nagai2 img{width:  100%;}
.nagai2{width: 77%;
  height: 0px;
margin-bottom: 0px;
position: relative;
z-index:0;
margin-left: auto;
}

.nagai2 img{
  opacity : 0;
  transform: translateX(-150px);
  transition: all 1s;}

  .nagai3 img{
    opacity : 0;
    transform: translateX(150px);
    transition: all 1s;}


.nagai3 img{width: 100%;}
.nagai3{width: 61%;
margin-bottom: 0px;
position: relative;
z-index:100;
margin-right: auto;

}

.nagai4 img{width:  100%;
top: 150px;}
.nagai4{width: 78%;
  height: 0px;
margin-bottom: 0px;
position: relative;
z-index:0;
margin-left: auto;
}

.nagai4 img{
  opacity : 0;
  transform: translateX(-150px);
  transition: all 1s;}


  .nagai8 img{width:  100%;
    top: 210px;}
    .nagai8{width: 50%;
      height: 0px;
    margin-bottom: 0px;
    position: relative;
    z-index:0;
    margin-right: auto;
    }
    
    .nagai8 img{
      opacity : 0;
      transform: translateX(150px);
      transition: all 1s;}


  .nagai8m img{width:  100%;
    top: 500px;}
    .nagai8m{width: 63%;
      height: 0px;
    margin-bottom: 0px;
    position: relative;
    z-index:0;
    margin-right: auto;
    }
    
    .nagai8m img{
      opacity : 0;
      transform: translateX(150px);
      transition: all 1s;}

      .nagai8n img{width:  100%;
        top: 375px;}
        .nagai8n{width: 50%;
          height: 0px;
        margin-bottom: 0px;
        position: relative;
        z-index:0;
        margin-left: auto;
        }
        
        .nagai8n img{
          opacity : 0;
          transform: translateX(-150px);
          transition: all 1s;}

          .nagai8ny img{width:  100%;
            top: 375px;}
            .nagai8ny{width: 79.2%;
              height: 0px;
            margin-bottom: 0px;
            position: relative;
            z-index:0;
            margin-left: auto;
            }
            
            .nagai8ny img{
              opacity : 0;
              transform: translateX(-150px);
              transition: all 1s;}


          .nagai8q img{width:  100%;
            top: 320px;}
            .nagai8q{width: 54%;
              height: 0px;
            margin-bottom: 0px;
            position: relative;
            z-index:0;
            margin-left: auto;
            }
            
            .nagai8q img{
              opacity : 0;
              transform: translateX(-150px);
              transition: all 1s;}

          .nagai8h img{width:  100%;
            top: 0px;}
            .nagai8h{width: 53.8%;
              height: 0px;
            margin-bottom: 0px;
            position: relative;
            z-index:100;
            margin-right: auto;
            }
            
            .nagai8h img{
              opacity : 0;
              transform: translateX(150px);
              transition: all 1s;}
    

  .nagai5 img{
    opacity : 0;
    transform: translateX(150px);
    transition: all 1s;}


.nagai5 img{width: 100%;}
.nagai5{width: 61%;
margin-bottom: 0px;
position: relative;
z-index:100;
margin-right: auto;

}

.nagai7 img{
  opacity : 0;
  transform: translateX(-150px);
  transition: all 2s;}


.nagai7 img{width: 100%;}
.nagai7{width: 68%;
margin-bottom: 0px;
top: 0px;
position: relative;
z-index:0;
margin-left: auto;

}

.nagai7m img{
  opacity : 0;
  transform: translateX(-150px);
  transition: all 2s;}


.nagai7m img{width: 100%;}
.nagai7m{width: 69%;
margin-bottom: 0px;
top: 0px;
position: relative;
z-index:0;
margin-left: auto;

}

.slide3000{
  opacity : 0;
  transform: translateX(150px);
  transition: all 2s;}


.nagai7h img{width: 100%;}
.nagai7h{width: 70%;
margin-bottom: 0px;
top: 180px;
position: relative;
z-index:0;
margin-left: auto;

}

.nagai7h{
  opacity : 0;
  transform: translateX(-150px);
  transition: all 1s;}


.nagai7q img{
  opacity : 0;
  transform: translateX(150px);
  transition: all 2s;}


.nagai7q img{width: 100%;}
.nagai7q{width: 65%;
margin-bottom: 0px;
top: 0px;
position: relative;
z-index:0;
margin-right: auto;

}

.nagai7n img{
  opacity : 0;
  transform: translateX(150px);
  transition: all 2s;}


.nagai7n img{width: 100%;}
.nagai7n{width: 65.5%;
margin-bottom: 0px;
top: 0px;
position: relative;
z-index:100;
margin-right: auto;

}

.nagai7ny img{
  opacity : 0;
  transform: translateX(150px);
  transition: all 2s;}


.nagai7ny img{width: 100%;}
.nagai7ny{width: 53.8%;
margin-bottom: 0px;
top: 0px;
position: relative;
z-index:100;
margin-right: auto;

}



.nagai6 img{width: 100%;}
.nagai6{width: 61%;
margin-bottom: 0px;
position: relative;
z-index:100;
margin-right: auto;

}

.nagai6 img{
  opacity : 0;
  transform: translateX(-150px);
  transition: all 1s;}

  .nagai9 img{width: 100%;}
.nagai9{width: 68%;
margin-bottom: 0px;
position: relative;
z-index:100;
margin-left: auto;

}

.nagai9m img{
  opacity : 0;
  transform: translateX(-150px);
  transition: all 1s;}

  .nagai9m img{width: 100%;}
  .nagai9m{width: 37.4%;
  bottom: 0px;
  position: relative;
  z-index:100;
  margin-left: auto;
  top: 505px;
  
  }
  
  .nagai9 img{
    opacity : 0;
    transform: translateX(-150px);
    transition: all 1s;}

    .nagai9n img{
      opacity : 0;
      transform: translateX(-150px);
      transition: all 1s;}
    
      .nagai9n img{width: 100%;}
      .nagai9n{width: 50%;
      bottom: 0px;
      position: relative;
      z-index:100;
      margin-right: auto;
      top: -10px;
      
      }

      .nagai9ny img{
        opacity : 0;
        transform: translateX(-150px);
        transition: all 1s;}
      
        .nagai9ny img{width: 100%;}
        .nagai9ny{width: 68.5%;
        bottom: 0px;
        position: relative;
        z-index:100;
        margin-right: auto;
        top: -10px;
        
        }
  
      .nagai9q img{
        opacity : 0;
        transform: translateX(-150px);
        transition: all 1s;}
      
        .nagai9q img{width: 100%;}
        .nagai9q{width: 65%;
        bottom: 0px;
        position: relative;
        z-index:100;
        margin-right: auto;
        top: -10px;
        
        }
    


.midp{width: 800px;
  height:1030px;
position:relative;}

.midpp{width: 800px;
  height:1160px;
}

.midpy{width: 800px;
  height:990px;
}

.midpym{width: 800px;
  height:1420px;
}

.midpyn{width: 800px;
  height:1033px;
}

.midpyny{width: 800px;
  height:1325px;
}


.midpyh{width: 800px;
  height:1190px;
  top: 0px;
}

.midpyq{width: 800px;
  height:1200px;
}

.dawn{width:800px;
  height:934px;
margin-left: auto;
margin-right: auto;}



.sum{width: 100%;
  height:612px;}
  

.guruguru {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 50%;
  height     :609px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
  margin: 0 0 0 auto;
}
 
 /*=== 画像の設定 ======================================= */
.guruguru img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      :100%;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnimex 6s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.guruguru img:nth-of-type(1) { animation-delay: 0s }
.guruguru img:nth-of-type(2) { animation-delay: 2s }
.guruguru img:nth-of-type(3) { animation-delay: 4s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnimex{
  0% { opacity: 0 }
  16% { opacity: 1 }
 33% { opacity: 1 }
 49% { opacity: 0 }
100% { opacity: 0 }
 }


 .pyon{top: -650px;
  margin-right:250px;
z-index:100;
position: relative;
}
.pyon img{width: 80%;
margin-bottom:0px;
z-index:100;}


.pon1{width:69.1%;
  margin-left: auto;
line-height: 0px;}
.pon1 img{
width: 100%;}


.tonton{height:609px}



.don1{top: -150px;
  margin-left:390px;
z-index:100;
position: relative;
}
.don1 img{height:45px;
margin-bottom:45px;
z-index:100;
top: 0px;}

.kankan{height:734px ;
width:auto;}

.don1 img{
  opacity : 0;
  transform: translateX(30px);
  transition: all 0.5s;}

  .pan1 img{opacity : 0;
    transform: translateX(30px);
    transition: all 0.5s;}

    .pan2 img{opacity : 0;
      transform: translateX(30px);
      transition: all 0.5s;}


      .pon1 img{opacity : 0;
        transform: translateY(100px);
        transition: all 0.5s;}

        .pon2 img{opacity : 0;
          transform: translateX(100px);
          transition: all 0.5s;}

          .pon3 img{opacity : 0;
            transform: translateX(-100px);
            transition: all 1s;}

          .slidea30{ border-radius: 50%;
          background-color: #8d7461;}

          .pon{width: 100%;}

.pon img{width: 100%;}


.pon2{width: 100%;
  line-height: 0px;}

.pon2 img{width: 100%;}

.pon3{width: 100%;}

.pon3 img{width: 100%;}

.middle3000{
  height     :915px;
  overflow: hidden;
background-color;
position: relative;
z-index: 0;
margin-bottom: 25px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 75%;
}


.slide3000 {
  position   : absolute;
    
                      /* 画像のサイズに合わせて変更ください */
                      width:560px;
    height     :800px;
    margin     : auto;      /* サンプルは中央寄せの背景：白 */
    
   margin-left: auto;
   margin-right: auto;
    padding-top:0px;

  z-index: 1;
  }
   
   /*=== 画像の設定 ======================================= */
  .slide3000 img {
      
    display    : block;
    position   : absolute;
                        /* 画像のサイズを表示エリアに合せる */
    width      : 100%;
    height     : inherit;
    opacity    : 0;
    animation  : slideAnimeww 6s ease infinite;
    z-index: 1;
  }
   
   /*=== スライドのアニメーションを段差で開始する ========= */
  .slide3000 img:nth-of-type(1) { animation-delay: 0s }
  .slide3000 img:nth-of-type(2) { animation-delay: 3s }
   
   /*=== スライドのアニメーション ========================= */
  @keyframes slideAnimeww{
    0% { opacity: 0 }
    25% { opacity: 1 }
   50% { opacity: 1 }
   75% { opacity: 0 }
  100% { opacity: 0 }
  }

  .blanksp{width: 100%;
    height: 70px;
  background-color:;}
  


  .middy12x img{width: 100%; 
    opacity : 0;
    transform: translateY(100px);
    transition: all 1s;}

  .middy12x{ height     :auto;
    margin-bottom: 0px;
    
  }

  .middy12xp img{width: 100%; 
    top: 260px;
    opacity : 0;
    transform: translateY(100px);
    transition: all 1s;}

  .middy12xp{ height     :auto;
    margin-bottom: 0px;
    width: auto;
    
  }

  .pepper{width: 30%;}

  .shumoji{width: 50%;
    height: auto;
    margin-left: 0px;
    top: 0px;
    }
    
    
    .shumoji img{top: 25px;
      
      height     :25px;
    width: auto;
    opacity : 0;
    float: left;
    transform: translateY(30px);
    transition: all 0.5s;
    }

    .storex2{text-align:　left;
      margin-right: 0px;
      position: absolute;
      bottom:0px;}
      .storex2 img{height     :40px;
      width:auto;
     }
    
     .shumojix1 img{top: 0px;}