/* fixed position header */
        /* *{outline: 1px solid #f00;} */

        #base_header{
            position: fixed; 
            /* background-color: rgba(255,255,255,0);
            transition: all 0.35s ease;  */
            /* pointer-events: none; */
            transition: all .1s ease .1s;
        }
        #base_header:hover{
            background: rgba(255, 255, 255, 1) !important;   
            border-bottom: 1px solid var(--sg-light-gray);
        }

        header.visible 
        {
            background: rgba(255, 255, 255, 1) !important;   
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            backdrop-filter: blur(8px);          
            pointer-events: auto;
        } 
        .base_header{
            border: none;
        }
        #logo_src{
            background-image: url("../img/logo-white.svg");
            background-position: center center;
            background-size: auto 100%;
            background-repeat: no-repeat;
        }
    
        .nav_link{
            color: #fff;
        }
        #base_header:hover .nav_link{
            color: #808080 !important;
        }
        #base_header .nav_link:hover {
            color: var(--sg-pink) !important;
        }
        #base_header:hover #logo_src{
           background-image: url("../img/logo-black.svg") !important;
        }
        .py-4-5{
            padding: 4.5rem 0 !important;
        }

        /* ─── Hero ─────────────────────────────────────────────── */
    .hero {
      position: relative;
      display: grid;
      place-items: center;
      text-align: center;
      margin: 0;
      height: 100vh !important;
      display: flex;
      justify-content: center;
    }
    .base_main .base{
        float: none;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.25) 70%,
        rgba(0,0,0,0.55) 100%
      );
      z-index: 2;
      pointer-events: none;
    }

    .video-bg {
      /* position: absolute; */
      /* inset: 0; */
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 1;
    }
.tal-scroll-downs{
    position: absolute;
    width: 34px;
    height: 55px;
    left: unset;
    top: unset;
    bottom: 4rem;
    right: 2rem;
    z-index: 9;
}
.mousey {
    width: 3px;
    padding: 10px 15px;
    height: 35px;
    border: 2px solid #fff;
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
}
.scroller {
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15, .41, .69, .94);
    animation-iteration-count: infinite;
}
@keyframes scroll {
  0%{
    opacity: 1;
    transform: translateY(0px);
}
  100%{opacity: 0.0;
    transform: translateY(10px);
}
}

   .so-product-group a{
    flex: 0 0  20%;
   }
   #so001-box,
   #so002-box{
    display: none;
   }
   .bottom-group{
    position: absolute;
    top: -5rem;
    right: 0rem;
    display: flex;
    width: 40%;
    justify-content: flex-end;
   }

   .show-case.active{
    display: flex !important}
    .small-light{
        color: var(--sg-pink);
    }
    .light-pink-bg{
        background-color: rgba(250,145,169,0.1);
    }

    .about-items-case{
        min-height: fit-content;
    }
    .about-items-case h4{
        margin-bottom: 0;
    }
    .about-img-box {
        background-size: cover; 
        background-position: center;
        height: 250px;
    }
    .about-img-box.vision{
        background-image: url('../img/contents/adlibrary/int/ad-cover-jp-3.jpg'); 
    }
    .about-img-box.founder{
         background-image: url('../img/contents/about/contents-foundersstory-hero.jpg');
    }
    .about-img-box.history{
         background-image: url('../img/contents/about/contents-history-1991.jpg');
    }

    .sagami-quality{
        min-height: 480px;
        height: fit-content;
        background-image: url('../img/contents/learnmore/contents-publictest-hanging.jpg');
        background-color: rgba(250,145,169,0.1);
        background-size: 50% auto;
        background-position: center right;
        background-repeat: no-repeat;
    }

    button.so_btn,
    a button.more_btn {
        box-sizing: border-box;
        width: fit-content;
        height: 60px;
        min-width: 8%;
        padding: 10px 20px;
        border-radius: 50px;
        background-color: transparent;
        border: 1px solid #F173AC;
        color: #F173AC;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4px;               /* ← space between icon/text if you have both */
        transition: all 0.4s linear;   /* slightly longer feels nicer */
        cursor: pointer;
    }
    button.so_btn{
        margin-right: 1rem;
        width: 50%;
    }
        button.so_btn.active{
             color: #Fff;

 background: #F173AC;            }
    button.so_btn p{
        cursor: pointer;
    }
    a.page-link{
        background-color: transparent;
        border: none;
    }
    a.page-link:hover{
        background-color: transparent !important;
        border: none;
    }
    a button.more_btn p {
        margin: 0;
        padding: 0;
        /* Use max-width instead of width for smooth animation */
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;          /* prevents text wrapping during animation */
        transition: max-width 0.5s linear;   /* 0.8s–1.2s usually feels best */
        cursor: pointer;

    }
    a button.so_btn svg path,
    a button.more_btn svg path{
        fill: #F173AC;
        transition: max-width 0.5s linear; 

    }
    /* On hover → reveal the text */
    a button.more_btn:hover p {
        max-width: 200px;   /* ← pick a value larger than your longest expected text */
        /* OR even better: */
        /* max-width: 300px;  (or any safe large number) */
    }
    a button.so_btn:hover svg path,
    a button.more_btn:hover svg path{
        fill: #fff;
    }
    .sagami-workshop .swiper-wrapper,
    .sagami-workshop .swiper-wrapper .swiper-silde{
        height: fit-content;
    }


@media screen and (min-width: 1081px) {/* Essential */
	
}
@media screen and (max-width: 1080px) {
	
}
@media screen and (min-width: 992px) {
	
}
@media screen and (max-width: 959px) {
    .sagami-quality{
        background-image:none;
    }
    .nav_link{
        color: #808080 !important
    }
    
    .page-link{
        padding: 0;
    }


    #base_header:hover .base_nav.main > li.expand > a{
        color: #fff !important;
    }
}
@media screen and (max-width: 767px) {
    h2{
        font-size: 1.725em;
    }
    h2 img{width: 26px;
    }
    a button.more_btn p{
        max-width: 100%;
    }
    a.page-link,
    button.so_btn,
    a button.more_btn {width: 100%;}
    
}