/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;
    width:100%;
    height:98svh;
    min-height:820px;
    overflow:hidden;
    background:var(--color-bg);

}




/* ==========================================================
   Slider
========================================================== */

.hero__slider{

    position:absolute;
    inset:0;

    overflow:hidden;

}


/* ==========================================================
   Images
========================================================== */

.hero__image{

    position:absolute;

    inset:0;

    opacity:0;

    transition:
    opacity 3s ease;


}

.hero__image img{

    width:100%;
    height:100%;

    object-fit:center;

    display:block;

    transform:scale(1.02);

    will-change:transform;

}



.hero__image.is-active{

    opacity:1;

}

/* 写真本体 */

.hero__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    

    display:block;

    will-change:transform;

}


/* ==========================================================
   Individual Motion
========================================================== */

/* ==========================================================
   左
========================================================== */

.hero--left.is-active img{

    animation:
    kenburnLeft 9s ease-out forwards;

}

@keyframes kenburnLeft{
    from{ transform: translateX(3%) scale(1.08); }
    to{   transform: translateX(-3%) scale(1.08); }
}


/* ==========================================================
  右方向
========================================================== */

.hero--right.is-active img{

    animation:
    kenburnRight 9s ease-out forwards;

}


/* 右 */
@keyframes kenburnRight{
    from{ transform: translateX(-3%) scale(1.08); }
    to{   transform: translateX(3%) scale(1.08); }
}



/* ==========================================================
 上方向
========================================================== */
.hero--up.is-active img{

    animation:
    kenburnUp 9s ease-out forwards;

}


/* 上(下から上へ) */
@keyframes kenburnUp{
    from{ transform: translateY(3%) scale(1.08); }
    to{   transform: translateY(-3%) scale(1.08); }
}






/* ==========================================================
   下
========================================================== */

.hero--down.is-active img{

    animation:
    kenburnDown 9s ease-out forwards;

}

@keyframes kenburnDown{
    from{ transform: translateY(-3%) scale(1.08); }
    to{   transform: translateY(3%) scale(1.08); }
}


/* ==========================================================
  ズームアウト
========================================================== */

.hero--zoomout.is-active img{

    animation:
    kenburnZoomOut 9s ease-out forwards;

}


/* ズームアウト(手前から奥へ) */
@keyframes kenburnZoomOut{
    from{ transform: scale(1.12); }
    to{   transform: scale(1); }
}


/* ==========================================================
  ズーム
========================================================== */

.hero--zoom.is-active img{

    animation:
    kenburnZoom 9s ease-out forwards;

}


 /*ズーム(奥から手前へ) */
@keyframes kenburnZoom{
    from{ transform: scale(1); }
    to{   transform: scale(1.12); }
}


/* ==========================================================
   斜め右上
========================================================== */

.hero--diagonal-up-right.is-active img{

    animation:
    kenburnDiagonalUpRight 9s ease-out forwards;

}

@keyframes kenburnDiagonalUpRight{

    from{
        transform:
        translateX(-2%)
        translateY(3%)
        scale(1.08);
    }

    to{
        transform:
        translateX(2%)
        translateY(-3%)
        scale(1.08);
    }

}


/* ==========================================================
   斜め左上
========================================================== */

.hero--diagonal-up-left.is-active img{

    animation:
    kenburnDiagonalUpLeft 9s ease-out forwards;

}

@keyframes kenburnDiagonalUpLeft{

    from{
        transform:
        translateX(2%)
        translateY(3%)
        scale(1.08);
    }

    to{
        transform:
        translateX(-2%)
        translateY(-3%)
        scale(1.08);
    }

}


/* ==========================================================
   Warm Overlay
========================================================== */

.hero::before{

    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    background:

    linear-gradient(

        90deg,

        rgba(55,46,38,.28) 0%,

        rgba(55,46,38,.14) 28%,

        rgba(55,46,38,.05) 48%,

        rgba(55,46,38,0) 65%

    );

}

/* ==========================================================
   Hero Content
========================================================== */

.hero__content{

    position:absolute;

    left:8%;
    bottom:9%;

    z-index:3;

    width:min(560px,86%);

}


/* ==========================================================
   Concept
========================================================== */

.hero__concept{

    margin:0 0 1.6rem;

    font-size:.72rem;

    letter-spacing:.45em;

    font-weight:500;

    text-transform:uppercase;

    color:rgba(248,246,240,.72);

}


/* ==========================================================
   Title
========================================================== */

.hero__title{

    display:flex;

    flex-direction:column;

    gap:.72em;

    margin:0 0 2.6rem;

    font-family:var(--font-title);

    font-weight:400;

    font-size:clamp(2.1rem,3vw,3.5rem);

    line-height:1.12;

    letter-spacing:.12em;

    color:#f8f6f0;

    text-shadow:

        0 8px 28px rgba(0,0,0,.45);

}

.hero__title span{

    display:block;

}


/* ==========================================================
   Lead
========================================================== */

.hero__lead{

    margin:0;

    font-size:clamp(1rem,1vw + .75rem,1.15rem);

    line-height:2.05;

    letter-spacing:.08em;

    color:#f8f6f0;

    text-shadow:

        0 6px 18px rgba(0,0,0,.35);

}


/* ==========================================================
   Scroll
========================================================== */

.hero__scroll{

    position:absolute;

    right:4%;

    bottom:48px;

    z-index:3;

}

.hero__scroll span{

    display:block;

    width:1px;

    height:96px;

    background:rgba(248,246,240,.55);

    animation:heroScroll 2.8s ease-in-out infinite;

}


/* ==========================================================
   Scroll Animation
========================================================== */

@keyframes heroScroll{

    0%{

        transform:scaleY(.45);

        transform-origin:top;

        opacity:.35;

    }

    50%{

        transform:scaleY(1);

        opacity:1;

    }

    100%{

        transform:scaleY(.45);

        transform-origin:bottom;

        opacity:.35;

    }

}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

.hero{

    min-height:680px;

}

.hero__content{

    left:7%;
    right:7%;
    bottom:11%;

    width:auto;

}

.hero__concept{

    font-size:.62rem;

    letter-spacing:.32em;

}

.hero__title{

    font-size:clamp(1.9rem,8vw,2.7rem);

    gap:.62em;

}

.hero__lead{

    font-size:.95rem;

    line-height:1.9;

}

.hero__scroll{

    display:none;

}

}


/* ==========================================================
   Accessibility
========================================================== */

@media (prefers-reduced-motion:reduce){

.hero__image{

    transition:none;

    transform:none !important;

}

.hero__scroll span{

    animation:none;

}

}

@media(max-width:768px){

    .hero__image img{

        object-position:center center;

    }

      .hero{

        height:80svh;
        min-height:560px;

    }


    .hero__title{

        font-size:2rem;

    }


    .philosophy{

        padding:4rem 0;

    }

}