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



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





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

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

.html{font-family: "Suisse"}


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

}

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

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

position: relative;
margin-top: -25px;}


.shoes2 img{width:80%;
  margin-top:0px;
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.5s;}
  
  .shoes2{width:75%;
  height:120px;
  background-color:;
  position: relative;
  margin-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 img{position: relative;
  z-index: 0;}
  
      
  .middlep{
    width: 600px;
    height     :916px;
    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;
margin-top: 0px;}



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


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

.en{z-index: 100;
  width:200px;
  height     :200px;
background-color:white;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom:-85px;
border-radius: 50%;
transform: translateY(120px);
transition: all 0.5s;
}

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

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

.en4{z-index: 100;
  width:30% ;
  height     :calc(100vw * 0.3);
background-color:white;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom:-60px;
margin-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{margin-top: 300px;}


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

.ugoki3{background-color:rgb(124, 123, 123);}

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

.sen{margin-top:160px;
  margin-bottom:160px;
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(100vw * 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:600px;
      height     :916px;
          /* サンプルは中央寄せの背景：白 */
      background-color :rgb(120, 117, 117);
     
      padding-top:0px;
   margin-left: auto;
   margin-right: auto;
    z-index: 1;
    }
     
     /*=== 画像の設定 ======================================= */
    .slide3p img {
        
      display    : block;
      position   : absolute;
                          /* 画像のサイズを表示エリアに合せる */
      width      : inherit;
      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 }
    }


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




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


.typo2 img{height: auto;
  margin-right: 0px;
width: 100%;
margin-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%;
  margin-top: -10px;
    z-index: 100;
    
    
  }




  .typo4{
    overflow: hidden;
    width:35% ;
    height: 100%;
    background-color: ;
    
  }
    
    
    .typo4 img{height: auto;
      margin-right: 0px;
    width: 100%;
    margin-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;
  margin-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;
        margin-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%;
        }

      

      .dada{width: 50%;
        height: 300px;
      background-color: lawngreen;
   
    }
      .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%;
              margin-top: 150px;}

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

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


          .pikk2x{margin-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{margin-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 }
}



.num img{width: 13%;
  margin-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);
    margin-top: 80px;
    margin-bottom: 0px;
    transition: all 0.7s;}

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

      .volxx{height:100px ;}

      .volx img{display:none;}
      


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


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


 
  


    .shumo9 img{height     :calc(100vw * 0.023);
    width:auto;
  margin-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(100vw * 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);
        
          margin-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(100vw * 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{margin-top: 20px;}
      
      .pikk23x{margin-top: 100px;}
      
     
        .pikk23x img{opacity : 0;
          transform: translateX(30px);
          transition: all 0.5s;
          margin-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;
  margin-top: 0px;
  
  
} 

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

.mid3x{margin-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;
margin-top: 0px;
}




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

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

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

.mid3x img{}


.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;
  margin-top: 20px;
    z-index: 100;
    margin-left: 30px;
    
    
  }

.pikk2{margin-top: 0px;}

  .pikk2 img{
    position : relative;
  margin-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;}

.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%;
margin-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%;
    margin-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%;
    margin-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%;
        margin-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%;
            margin-top: 440px;}
            .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%;
            margin-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%;
            margin-top: 0px;}
            .nagai8h{width: 30%;
              height: 0px;
            margin-bottom: 0px;
            position: relative;
            z-index:0;
            margin-left: 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;
margin-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;
margin-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;
margin-top: 300px;
position: relative;
z-index:0;
margin-right: auto;

}

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


.nagai7q img{width: 100%;}
.nagai7q{width: 65%;
margin-bottom: 0px;
margin-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;
margin-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: 68.6%;
margin-bottom: 0px;
margin-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;
  margin-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;
      margin-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;
        margin-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;
        margin-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:1388px;
}


.midpyh{width: 800px;
  height:1100px;
  margin-top: -207px;
}

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



.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{margin-top: -650px;
  margin-right:250px;
z-index:100;
position: relative;
}
.pyon img{width: 80%;
margin-bottom:0px;
z-index:100;}

.pon1 img{margin-right: 0px;}


.tonton{height:609px}



.don1{margin-top: -150px;
  margin-left:390px;
z-index:100;
position: relative;
}
.don1 img{height:45px;
margin-bottom:45px;
z-index:100;
margin-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(30px);
        transition: all 0.5s;}

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

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

          .pon{width: 100%;}

.pon 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%; 
    margin-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;
    margin-top: 0px;
    }
    
    
    .shumoji img{margin-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{margin-top: 0px;}