.sec_fv {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    color: var(--color-white);

    .image {
        position: absolute;
        inset: 0;

        &::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(20, 24, 21, .55) 0%, rgba(20, 24, 21, .13) 48%, rgba(20, 24, 21, .04) 100%);
            content: "";

            @media (max-width: 900px) {
                background: linear-gradient(90deg, rgba(20, 24, 21, .63), rgba(20, 24, 21, .08));
            }
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            animation: fvIn 1.8s cubic-bezier(.2, .7, .2, 1) both;

            @media (max-width: 900px) {
                object-position: 62% center;
            }
        }
    }

    .text_in {
        position: relative;
        z-index: 2;
        padding: 25vh 0 15vh 8vw;
        max-width: min(680px, 90vw);

        @media (max-width: 900px) {
            padding: 27vh 22px 14vh;
        }
        @media (max-width: 360px) {
            padding-inline: 20px;
        }
    }

    .ttl {
        font-family: var(--font-serif);
        font-size: clamp(54px, 7.2vw, 106px);
        font-weight: 400;
        line-height: 1.3em;
        letter-spacing: .08em;

        @media (max-width: 900px) {
            font-size: clamp(42px, 12.5vw, 72px);
            letter-spacing: .035em;
        }
        @media (max-width: 360px) {
            font-size: 36px;
            letter-spacing: 0;
        }
    }

    .lead {
        margin-top: 36px;
        font-family: var(--font-serif);
        font-size: clamp(14px, 1.25vw, 18px);
        line-height: 2em;
    }

    .store {
        margin: 21px 0 11px;
        font-size: 11px;
        line-height: 1.45em;
        letter-spacing: .16em;
    }

    .scroll {
        position: absolute;
        right: 4vw;
        bottom: 32px;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 9px;
        line-height: 1.35em;
        letter-spacing: .22em;
        transform: rotate(90deg);
        transform-origin: right bottom;

        @media (max-width: 900px) {
            display: none;
        }

        i {
            width: 55px;
            height: 1px;
            display: block;
            background: currentColor;
        }
    }
}

.sec_services {
    background: var(--color-paper);

    .wrap {
        padding: var(--pad-block) var(--pad-section);
    }

    .head {
        margin-bottom: 72px;
        max-width: 650px;

        @media (max-width: 900px) {
            margin-bottom: 48px;
        }
    }

    .list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;

        @media (max-width: 900px) {
            grid-template-columns: 1fr;
        }
    }

    .item {
        display: grid;
        grid-template-rows: auto auto;
        overflow: hidden;
        background: var(--color-white);

        @media (max-width: 900px) {
            min-height: 610px;
        }

        &.type_scalp .image img {
            object-position: center 27%;
        }
    }

    .image {
        display: grid;
        overflow: hidden;

        &::after {
            grid-area: 1 / 1;
            background: linear-gradient(to bottom, rgba(26, 28, 25, .02), rgba(26, 28, 25, .16));
            content: "";
        }

        img {
            width: 100%;
            height: auto;
            grid-area: 1 / 1;
            aspect-ratio: 4 / 5;
            object-fit: cover;
            object-position: center 24%;
        }
    }

    .text_in {
        padding: 38px 42px 44px;

        @media (max-width: 900px) {
            padding: 30px 26px 35px;
        }
    }

    .no {
        margin-bottom: 26px;
        font-size: 9px;
        line-height: 1.35em;
        letter-spacing: .25em;
    }

    .ttl {
        font-family: var(--font-serif);
        font-size: 34px;
        font-weight: 400;
        line-height: 1.7em;

        @media (max-width: 1500px) {
            font-size: 32px;
        }
        @media (max-width: 1400px) {
            font-size: 30px;
        }
        @media (max-width: 1300px) {
            font-size: 28px;
        }
        @media (max-width: 1150px) {
            font-size: 26px;
        }
        @media (max-width: 1024px) {
            font-size: 24px;
        }
        @media (max-width: 900px) {
            font-size: 28px;
            letter-spacing: .015em;
        }
        @media (max-width: 470px) {
            font-size: 26px;
        }
        @media (max-width: 440px) {
            font-size: 24px;
        }
        @media (max-width: 400px) {
            font-size: 22px;
        }
        @media (max-width: 360px) {
            font-size: 18px;
            letter-spacing: 0;
        }
    }


    .name {
        margin: 27px 0 30px;
        color: var(--color-text-sub);
        font-size: 13px;
        line-height: 1.45em;
    }
}

.sec_moments {
    background: var(--color-paper-dark);

    .wrap {
        padding: var(--pad-block) var(--pad-section);
    }

    .head {
        margin: 0 0 85px auto;
        max-width: 700px;

        @media (max-width: 900px) {
            margin-left: 0;
        }

        .txt {
            margin-top: 25px;
            color: var(--color-text-sub);
            font-size: 14px;
            line-height: 2em;
        }
    }

    .list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: var(--pad-narrow);

        @media (max-width: 900px) {
            grid-template-columns: 1fr;
            gap: 60px;
        }
    }

    .image {
        display: grid;
        place-items: center;
        overflow: hidden;
        color: rgba(255, 255, 255, .76);

        img {
            width: 100%;
            height: auto;
            grid-area: 1 / 1;
            aspect-ratio: 4 / 5;
            object-fit: cover;
        }

        &.type_salon::after {
            width: 100%;
            height: 100%;
            grid-area: 1 / 1;
            background: linear-gradient(rgba(34, 40, 35, .12), rgba(34, 40, 35, .34));
            content: "";
        }

        &.type_counseling img {
            object-position: center 65%;
        }

        .en {
            z-index: 1;
            grid-area: 1 / 1;
            font-size: 11px;
            line-height: 1.3em;
            letter-spacing: .27em;
        }
    }

    .meta {
        padding: 20px 0;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 30px;
        border-bottom: 1px solid rgba(29, 33, 30, .26);

        .en {
            font-size: 9px;
            line-height: 1.35em;
            letter-spacing: .18em;
        }

        .txt {
            font-family: var(--font-serif);
            font-size: 15px;
            line-height: 1.4em;
        }
    }
}

.sec_philosophy {
    position: relative;
    overflow: hidden;
    background: var(--color-moss);
    color: var(--color-white);
    --color-link-line: rgba(255, 255, 255, .28);

    .wrap {
        padding: 60px var(--pad-section);
        min-height: 430px;
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        align-items: center;
        gap: var(--pad-section);

        @media (max-width: 900px) {
            padding: 95px var(--pad-section);
            min-height: 760px;
            display: block;
        }
    }

    .number {
        position: absolute;
        top: 50%;
        left: -2vw;
        color: rgba(255, 255, 255, .035);
        font-family: var(--font-serif);
        font-size: 58vw;
        line-height: .7em;
        translate: 0 -50%;

        @media (max-width: 900px) {
            top: 18%;
            font-size: 95vw;
        }
    }

    .text_in {
        position: relative;
        z-index: 1;
        max-width: 660px;
        grid-column: 2;

        @media (max-width: 900px) {
            margin-top: 160px;
        }
    }

    .ttl_ptn_1 {
        @media (max-width: 900px) {
            font-size: 36px;
        }
        @media (max-width: 560px) {
            font-size: 32px;
        }
        @media (max-width: 480px) {
            font-size: 28px;
        }
        @media (max-width: 400px) {
            font-size: 24px;
        }
        @media (max-width: 360px) {
            font-size: 22px;
        }
    }


    .txt {
        margin: 20px 0 28px;
        max-width: 560px;
        color: var(--color-text-on-dark);
        font-size: 12px;
        line-height: 2em;
    }

    .caption {
        position: relative;
        z-index: 1;
        align-self: end;
        font-size: 12px;
        line-height: 2em;
        letter-spacing: .25em;

        @media (max-width: 900px) {
            margin-top: 80px;
        }

        small {
            color: #aeb5ae;
            font-size: 10px;
            line-height: 2em;
            letter-spacing: .04em;
        }
    }
}

.sec_journal {
    background: var(--color-white);

    .wrap {
        padding: var(--pad-block) var(--pad-section);
    }

    .head {
        margin-bottom: 60px;
        display: flex;
        align-items: end;
        justify-content: space-between;

        @media (max-width: 900px) {
            display: block;
        }

        .link_ptn_1 {
            width: 180px;

            @media (max-width: 900px) {
                margin-top: 35px;
                width: 100%;
            }
        }
    }

    .list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;

        @media (max-width: 900px) {
            grid-template-columns: 1fr;
            gap: 52px;
        }
    }
}