@charset "UTF-8";


/*───────────────────────────
  TOPページ CSS
───────────────────────────*/


/*スライダー*/
#main-slider {
   position: relative;
   padding: 0!important;
}


.bg-slider{
   position: relative;
   width: 100%;
   height: 100svh;
   background-color: #000;
   overflow: hidden;
   background-position:center center;
   background-size: cover;
   display: flex;
   align-items: center;
   justify-content: center;
}

#main_slide_wrapper{
   position: absolute;
   inset: 0;
   z-index: 0;
}

.bg-slider .bg-frame{
   position: absolute; inset: 0;
   background-size: cover; background-position: center; background-repeat: no-repeat;
   opacity: 0;
   display: flex;
   transition: opacity 2000ms linear; /* ← フェード時間（JSと一致） */
   will-change: opacity, transform;
   transform: translate3d(0, var(--py, 0px), 0);
   z-index: 1;
}
.bg-slider .bg-frame.is-active{ opacity: 1; }


#sec-mainlogo img {
   width: 80%;
   max-width: 450px;
   margin: 0 auto;
   filter: drop-shadow(5px 5px 5px #666);
   position: absolute;
   top: 55%;
   left: 0;
   right: 0;
   z-index: 20;
   transform: translateY(-50%); /* 垂直中央なら追加 */
}

/*SC down（前面へ）*/
.scroll-down {
   position: absolute;
   bottom: 10px;
   left: 0;
   right: 0;
   z-index: 20;
}
.scroll-down p {
   margin-bottom: 5px;
   text-align: center;
   font-size: 15px;
   color: #fff;
}
.scroll-down4{
   width: 1px;
   height: 50px;
   background: #fff;
   animation: scrollDown4 2s ease infinite;
   margin: 0 auto;
}

@keyframes scrollDown4{
   0%{
      transform-origin: top;
      transform: scaleY(0);
   }
   45%{
      transform-origin: top;
      transform: scaleY(1);
   }
   55%{
      transform-origin: bottom;
      transform: scaleY(1);
   }
   100%{
      transform-origin: bottom;
      transform: scaleY(0);
   }
}




#concept {
   text-align: center;
   color: #fff;

}

#concept img {
   display: inline-block;
   width: 160px;
   margin-bottom: 25px;
   padding-top: 30px;
}

.notice {
   padding: 0 15px 20px;

}

/*PRODUCT*/
#product {
   background-color: #e5e4e6;
}

#product-container h4 {
   font-family: "Mynerve", cursive;
   line-height: 21px;
   color: #adadad;
}

.product-inner {
   padding: 5px;
   padding-bottom: 50px;
   position: relative;
}

.product-notice {
   padding: 10px 0 10px;
   text-align: justify;
}

.tag-container {
   margin-bottom: 20px;
}

.tags {
   display: inline-block;
   padding: 3px 7px;
   font-size: 11px;
   background-color: rgba(255, 236, 71, .7);
   margin-right: 3px;
}

.viewMore {
   border-bottom: 1px solid #666;
   width: fit-content;
   font-size: 14.5px;
   margin: 0 20px 20px auto;
}

.viewMore a::after {
   content: ">";
   margin-left: 20px;
}



/*ABOUT*/
#about {
   background-color: #f7fcfe;
   color: #524e4d;
}

#about .notice {
   padding: 20px 10px 20px;
}

.about-innerR {
   position: relative;
}

.mypic {
   width: 95%;
   margin: 0 auto;
}

.about-innerR .myname {
   width: 200px;
   position: absolute;
   bottom: -30px;
   right: -5px;
}

/*ridge line*/
.ridgeline {
   width: 100%;
   height: 150px;
   background-image: url(../img/ridgelineImg.webp);
   background-size: 150%;
   background-repeat: no-repeat;
   background-position: center center;
}
.parallax-bg {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 85px 0;
   background-attachment: scroll;
   background-position: bottom;
   background-repeat: no-repeat;
}

/*SNS*/
#sns {
   height: 600px;
   background-color: #2b2b2b;
}






@media screen and (min-width: 679px) {

/*スライダー*/
   #sec-mainlogo img {
      max-width: 500px;

   }

   .scroll-down p {
      font-size: 21px;
   }

   .scroll-down4 {
      height: 80px;
   }

/*コンセプト*/
   #concept-wraper {
      width: 80%;
      margin: 0 auto;
   }

   #concept img {
      padding-top: 50px;
      width: 180px;
   }

   .notice {
      letter-spacing: 0.2em;
   }



/*PRODUCT*/
   #product-container {
      width: 85%;
      margin: 0 auto;
   }

   .product-notice {
      padding: 20px 0 10px;

   }

   .tags {
      margin-bottom: 10px;
      font-size: 13.5px;
   }

/*ABOUT*/

   #about-container {
      width: 85%;
      margin: 0 auto;
   }

   #about .notice {
      width: 100%;
      padding: 20px 15px 20px;
      margin: 0 auto;
   }

   .about-innerR .myname {
      right: -5px;
   }

/*ridge line*/
   .ridgeline {
      height: 230px;     
   }






}

@media screen and (min-width: 1023px) {

   h2 {
      width: 100%;
      max-width: 1270px;
      margin: 0 auto;

   }


   #concept-wraper {
      width: 70%;
      max-width: 880px;
   }

   #concept {
      padding-bottom: 80px;
   }

   .notice {
      letter-spacing: 0.2em;
   }


/*PRODUCTS*/
   #product-container {
      width: 100%;
      max-width: 1190px;
   }

   .product-inner {
      width: 46%;
      height: 420px;
      margin-bottom: 30px;
      float: left;
   }
   .product-inner:nth-child(odd){
      margin-right: 4%;
   }

   .tag-container {
      margin-bottom: 20px;

   }
   .tags {
      font-size: 13px; 
   }

/*ABOUT*/
   #about-container {
      width: 100%;
      max-width: 1190px;
      margin: 0 auto 80px;
   }
   .about-innerR {
      width: 52%;
      margin-top: 20px;
      float: right;

   }

   .about-innerL {
      width: 46%;
      float: left;

   }
   .mypic {
      width: 90%;
   }
   .about-innerR .myname {
      right: -5px;
   }
/*ridge line*/
   .ridgeline {
      height: 350px;     
   }













}