.top{
   width: 100%;
   top: 0;
   left: 0;
   z-index: 10000;
   position: fixed;
}
.headerbox {

      position: relative;


   }

#logo{
      width: 300px;
      transition: 0.5s;


}   
#logo path.scroll{
   fill: #fff;
}

.header_logo #logo{
   position: absolute;
   top: 18px;
   left: 20px;

  
}

#logo.scroll-nav {
   color: #fff;
}


.meinimg{
   
   width: 100%;
   height:70vh;
   object-fit: cover;
}


.scroll-txst{
   display: inline-block;
   padding-top: 70px;
   position: relative;
   top:50%;
   left:50%;
   transform: translate(-50%, -50%);
   margin-bottom: 20px;
 }
 .scroll-txst::before {
   animation: scroll 3.5s infinite;
   border: solid #000;
   border-width: 0 0 1px 1px;
   content: "";
   display: inline-block;
   margin: auto;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   transform: rotate(-45deg);
   width: 20px;
   height: 20px;
 }
 @keyframes scroll {
   0% {
     transform: rotate(-45deg) translate(0, 0);
   }
   80% {
     transform: rotate(-45deg) translate(-30px, 30px);
   }
   0%, 80%, 100% {
     opacity: 0;
   }
   40% {
     opacity: 1;
   }
 }


.mainvisu_header{

display: flex;
align-items: center;
padding: 0 0 0 16rem;
height: 6em;
}


.mainvisu_header-ja{
   font-size: 16px;
   letter-spacing:5px;

   
}

.mainvisu_header-ja span{
font-size: 0.7em;
font-family: "Hannari"; 

}

.mainvisu_header-en{
   margin-left: 2em;
}

.mainvisu_base{
  
   border-bottom:solid 2px ;
   border-top:solid 2px ;
}
.mainvisu_inner{
   padding: 1em;

}


.main_nav{
   margin-top: 3rem;
   padding-bottom: 5rem;
   margin-right:30px ;
}


.main_nav ul{
   display: flex;
   justify-content: flex-end;
   padding: 0;
   

}
.main_nav-li{
   position: relative;
   color: #252a3e;

  
   margin-left: 3rem;
   border-bottom: #484f69 solid;
   padding-bottom: 1rem;

}
.main_nav-li::after{
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   height: 0%;
   border-left: solid #162a81 5px;
;
   transition-duration: 0.5s;
}
.main_nav-li:hover::after{
   height: 100%;

}

.main_nav-li a,.concept_txst a,.profile_txst1 a{
   padding-left: 20px;
   padding: 20px;
   color: #162a81;
}

.main_nav-li a:hover,.concept_txst a:hover,.profile_txst1 a:hover{
   color: #8791bc;
   
}



#concept-sectionbox{
   border-top: solid 1px;
   background-color:#c5c5bf;
   }

.img-basu{
   position: absolute;
 
   background-color:#c5c5bf;
   border: #252a3e solid 1px;


}

.p-img-basu{

   margin: 1rem;
   background-color:#c5c5bf;
   border: #252a3e solid 1px;


}

.s-img-basu{
   border: solid 1px;
   margin: 6px;
   color: #c5c5bf;
}

.t-img-basu{
  background-color:#c5c5bf;
   border: #252a3e solid 1px;
   margin: 3rem;
}
.a-img-basu{
   background-color:#c5c5bf;
    border: #252a3e solid 1px;
    margin: 3rem;
 }
.sh-img-basu{
   background-color:#c5c5bf;
    border: #252a3e solid 1px;
    margin: 1rem;
 }
#img-basu-concept1{
   top: 9rem;
   left: 3rem;
}


#img-basu-concept2{
   right: 3rem;
   bottom: 3rem;
}


#concept_img1,#concept_img2,.shop_img,.technique_img,.SHOP_img{
padding: 8px;
}

.fadeInLeft
   {
      animation: zoomIn 0.5s ease 0s 1 normal;
  }
  /* fadeInLeft */
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(-30px);
    }
    100% {
      opacity: 1;
    }
  }


  .fadeInRight
  {
     animation: zoomIn 0.5s ease 0s 1 normal;
 }
 /* fadeInLeft */
 @keyframes fadeInRight {
   0% {
     opacity: 0;
     transform: translateX(-30px);
   }
   100% {
     opacity: 1;
   }
 }

.concept_txst { 
   position: absolute;
   top: 8%;
   right: 15%;
   margin: auto;
   padding-top: 20px;
   max-width: 30rem;
   padding: 0;
   
}
.concept-h2{
   margin: 0;
   line-height: 0.6;
   letter-spacing: .08em;
}
#concept-h2-sub{
   font-size: 15px;
   margin: 2rem;
   margin-left: 0;
   border-bottom: 1px solid black;

}

.scroll .cls-2,.scroll circle{
   fill: #fff;
   
   }

.concept_txst a{
   z-index: 999;
}


#concept-h2-sub-box{
   display: flex;
   align-items: flex-end;
   flex-direction: column;
}

.concept_txst2{
   background-color: #252a3e;
   padding-left: 1rem;
   padding-right: 1rem;
   text-align: center;
   color: #c5c5bf;
   position: absolute;
   bottom: 0;
   left: 7rem;
   display: flex;
   flex-direction: column

}
.concept_txst2 h3{
   margin: 0 ;
   left: 1rem;
   font-size:5em;
   letter-spacing: 0.19em;
}
.concept-h3-sub{
   margin-bottom: 2rem;
}






.shop_img img {
   height: 210px;
}


.shop{
   background-color: #252a3e;
}
#shop-sectionbox{
   display: flex;
   align-items: flex-end
}
#shop-sectionbox a{
margin-bottom: 90px;
color: #c5c5bf;
}
#shop-sectionbox a:hover{
   color: #fff;
}

.shop_txst1-mein{
   display: flex;
   color: #c5c5bf;
}

.shop-mein{
   position: relative;

   max-width: 50rem;
   margin: auto;
   display: flex;

}
.shop_img-main{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly
}
.shop-mein li{
   list-style: none;
   
}

.shop_txst1{
   line-height: 0.04;
   letter-spacing: .08em;
   -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  

}

.shop_txst1-sub{
   padding: 1rem;
   padding-top: 0;
   -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  border-right: solid 1px #c5c5bf;
  

}
.loopSlide {
  

   ul {
       padding: 0;
       width: 100vw;
       display: flex;
       flex-shrink: 0;

       &:first-child {
           animation: slide1 60s -30s linear infinite;
       }

       &:last-child {
           animation: slide2 60s linear infinite;
       }

       li {
           display: inline-block;
           width: 100%;
           min-width: 150px;
           margin-right: 20px;
           list-style: none;
           text-align: center;

           img {
               display: block;
               width: 100%;
               height: auto;
           }

       }

   }
    
  &:hover {
       ul {
           animation-play-state: paused;
       }
   }
}

@keyframes slide1 {
   0% {
       transform: translateX(100%);
   }

   to {
       transform: translateX(-100%);
   }
}

@keyframes slide2 {
   0% {
       transform: translateX(0);
   }

   to {
       transform: translateX(-200%);
   }
}


#profile_img1,#profile_img2{
   padding: 8px;
}

.profile_txst1{
   margin: auto;
   max-width: 70%;
}
#profile-h2-sub{
   font-size: 15px;
   margin: 2rem;
   margin-left: 0;
   margin-right: 0;
   border-bottom: 1px solid black;
   padding-bottom: 1rem ;

}
.profile_img{
   margin-top: 4rem;
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
}

.profile_txst1 p{
  padding: 1rem;
}
.technique-h2,.artisan-h2,.SHOP-h2{
   margin: 0;
   padding: 10px;
}
.technique-mein-text,.artisan-mein-text,.SHOP-mein-text{
display: flex;
flex-direction: column;
max-width: 80%;
margin: auto;

}
.technique-h2-sub,.artisan-h2-sub,.SHOP-h2-sub{
   font-size: 15px;
   margin: 2rem;
   margin-left: 0;
   border-bottom: 1px solid black;

}
.technique_img-box,.artisan_img-box{
   display: flex;
   justify-content: space-around
}


.technique_img.fadein.is-animated {
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.SHOP_img-box{
   display: flex;
   justify-content: center;
   align-items: center;

}

.SHOP-h2-sub2{
   text-align: center;
}













#mainvisu_header{
   border-bottom:solid #000 2px;
}

p{margin: 0;}



html{
   font-size: 16px;
}







.sectionbox{
   position: relative;
   width: 90%;
   height: 100vh;

   margin: auto;
}




.imagebox img {
   height: 300px;
   width: auto; /* 讓ｪ蟷�ｒ閾ｪ蜍戊ｪｿ謨ｴ */
   max-width: 100%; /* 隕ｪ隕∫ｴ�縺ｫ蜿弱∪繧九ｈ縺�↓縺吶ｋ */
}










body{
   margin: 0;
   background-color: #c5c5bf;}







.openbtn { float: right;
}    



.navbox{
   
   color: aliceblue;
}
.navbox-ul{
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   max-width: 60%;
   margin: auto;
   padding: 0;
   
}
.navbox-ul li{
   border: #c5c5bf solid 1px;
   width: 120px;
   text-align: center;
   margin: 2rem;
}

.navbox li a{

   color: #c5c5bf;
}
.navbox li a:hover{
   color: #fff;
}

.navbox-img{
   border-top:solid #c5c5bf 2px ;
   margin-top: 8rem;
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
.navbox-img img{
   margin-left: 2rem;
}



.navframe{
position: fixed;
top:0px;
left: -100vw;
width: 100vw;
height: 100vh;
background-color: rgb(95, 84, 84);
z-index: 2000; 
}

.nav{
position: absolute;
top: calc((100vh - 550px)/2.0);
left: calc((100vw - 1000px)/2.0);
width: 1000px;
height: 550px;

}



.kakudaiimg1{
   position: fixed;
   top:0px;
   left: -100vw;
   width: 100vw;
   height: 100vh;
   background-color: rgb(95, 84, 84);
   z-index: 2000; 
   }



  
 #SHOP-mein-text-5214,#SHOP-mein-text-5215,#SHOP-mein-text-5217,#SHOP-mein-text-5219{
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      justify-content: center;

  }
#SHOP-mein-text-5214 p,#SHOP-mein-text-5215 p,#SHOP-mein-text-5217 p,#SHOP-mein-text-5219 p{
      margin:  20px;
   }

#SHOP-mein-text-5214 img,#SHOP-mein-text-5215 img,#SHOP-mein-text-5217 img,#SHOP-mein-text-5219 img{ 
   height: 20%;
   width: 20%;
   border: #252a3e solid 1px;
   padding: 10px;



}













li{
   list-style: none;
}
a{
   text-decoration: none;
}
#nav {
   opacity: 1;
}

.close {
   position: absolute;
   right: 50%;
   bottom: 20%;
   color: white;
   cursor: pointer;
}
div{display: block;}

img{
   vertical-align: top;
}


.profile-h2,.shop_txst1,.concept-h2,.technique-h2,.artisan-h2,.SHOP-h2{
   font-size: 68px;
}



.smooth {
   clip-path: inset(0 100% 0 0);
   display: inline-block;
   transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
   transition-property: clip-path;
   line-height: 1;


 }
 .smooth.is-animated {
   clip-path: inset(0);
 }
  

 .smooth2 {
   clip-path: inset(0 0 100% 0);
   display: inline-block;
   transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
   transition-property: clip-path;
   line-height: 1;


 }
 .smooth2.is-animated {
   clip-path: inset(0);
 }
  

 .shop.fadein.is-animated {
   animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
 }
 .artisan_img.fadein.is-animated {
   animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
 }
  
 @keyframes fadeIn {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
  




.mainvisu_header-ja ,.mainvisu_header-en,.main_nav,.shop_txst1-mein,.profile_txst1,#concept-h2-sub,#concept-h2-sub-text,#concept-h2-sub-box,.concept-h3-sub,.concept-h2,.profile-h2,.technique-mein-text,.artisan-mein-text,.SHOP-mein-text
{font-family: 'Hina Mincho', serif;}



.concept_txst2
{font-family: 'Noto Sans JP', sans-serif;}




.photoframe {
   position: fixed;
   top:0px;
   left:-100vw;
   width: 100vw;
   height: 100vh;
   background-color: rgb(37, 37, 37);
   z-index: 2000;
   display: flex;
   justify-content: center;
   }

   .photoframe2 {
      position: fixed;
      top:0px;
      left:-100vw;
      width: 100vw;
      height: 100vh;
      background-color: rgb(37, 37, 37);
      z-index: 2000;
      display: flex;
      justify-content: center;
      }

      .urimonoimg{
         img {
            max-height: 200px; /* 荳企剞繧�200px縺ｫ險ｭ螳� */
            width: auto; /* 閾ｪ蜍戊ｪｿ謨ｴ */
            object-fit: contain; /* 逕ｻ蜒上�豈皮紫繧剃ｿ昴▽ */
        }
      }

.works{

   display: flex;
   flex-direction: column-reverse;
   align-items: flex-start;
   color: #c5c5bf;
   padding-bottom: 5%;
}
#works1{
   opacity: 0;
}
#works2{
   opacity: 0;
}
#works3{
   opacity: 0;
}
#works4{
   opacity: 0;
}


.close2{
   position: absolute;
   right: 20%;
   bottom: 10%;
   color: white;
   cursor: pointer;
}

.headerbox,
#profile .sectionbox, 
#shop .sectionbox,
#concept .sectionbox { 
    background-attachment: fixed;
}