.sec_hair_fv {
    .wrap {
        padding: 170px var(--pad-section) 110px;
        min-height: 78svh;
        display: grid;
        align-items: center;

        @media (max-width: 900px) {
            padding: 120px var(--pad-section) 70px;
        }
    }

    .text_in {
        max-width: 940px;
    }

    .ttl {
        font-family: var(--font-serif);
        font-size: clamp(48px, 6.5vw, 94px);
        font-weight: 400;
        line-height: 1.35em;
        letter-spacing: .04em;

        @media (max-width: 520px) {
            font-size: clamp(32px, 11vw, 42px);
            letter-spacing: .02em;
        }

        span {
            display: block;
            white-space: nowrap;
        }
    }

    .txt {
        margin: 34px 0 14px;
        color: var(--color-text-sub);
        font-size: 14px;
        line-height: 2.2em;
    }
}

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

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

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

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

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

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

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

    .photos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;

        figure {
            display: grid;
            overflow: hidden;
            background: var(--color-placeholder);
        }

        img {
            width: 100%;
            height: auto;
            grid-area: 1 / 1;
        }

        span {
            margin: 0 0 8px 8px;
            padding: 5px 7px;
            z-index: 1;
            grid-area: 1 / 1;
            align-self: end;
            justify-self: start;
            background: rgba(29, 33, 30, .68);
            color: #fff;
            font-size: 8px;
            line-height: 1.25em;
            letter-spacing: .14em;
        }
    }

    .item .txt {
        margin-top: 18px;
        font-family: var(--font-serif);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.8em;

        strong {
            display: block;
        }

        .details {
            margin-top: 8px;
            display: block;
            color: var(--color-text-sub);
            font-family: var(--font-sans);
            font-size: 10px;
            line-height: 1.8em;
            letter-spacing: .04em;
        }
    }
}

.sec_hair_reason {
    background: var(--color-moss);
    color: var(--color-white);

    .wrap {
        padding: var(--pad-block) var(--pad-section);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--pad-section);

        @media (max-width: 900px) {
            padding: 95px var(--pad-section);
            gap: 40px;
            grid-template-columns: 1fr;
        }
    }

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

        @media (max-width: 1400px) {
            font-size: 56px;
        }
        @media (max-width: 1300px) {
            font-size: 52px;
        }
        @media (max-width: 1200px) {
            font-size: 48px;
        }
        @media (max-width: 1100px) {
            font-size: 44px;
        }
        @media (max-width: 1024px) {
            font-size: 40px;
        }
        @media (max-width: 950px) {
            font-size: 38px;
        }
        @media (max-width: 900px) {
            font-size: 36px;
        }
        @media (max-width: 640px) {
            font-size: 32px;
        }
        @media (max-width: 520px) {
            font-size: 30px;
            line-height: 1.65em;
            letter-spacing: 0;
        }
        @media (max-width: 360px) {
            font-size: 28px;
        }
        @media (max-width: 320px) {
            font-size: 26px;
        }

        span {
            display: block;
            white-space: nowrap;
        }
    }


    .txt {
        margin: 14px 0;
        align-self: end;
        color: var(--color-text-on-dark);
        font-size: 14px;
        line-height: 2.3em;
    }
}

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

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

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

    .list {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 24px;
        list-style: none;

        @media (max-width: 1000px) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 20px;
        }
        @media (max-width: 620px) {
            grid-template-columns: minmax(0, 1fr);
            gap: 16px;
        }
    }

    .item {
        padding: 30px 28px;
        min-width: 0;
        grid-column: span 2;
        background: var(--color-white);
        line-height: 1.3em;
        border: 1px solid var(--color-line);

        @media (max-width: 620px) {
            padding: 26px 22px;
            grid-column: 1;
        }

        &:nth-child(4) {
            grid-column: 2 / span 2;

            @media (max-width: 1000px) {
                grid-column: span 2;
            }
            @media (max-width: 620px) {
                grid-column: 1;
            }
        }

        &:nth-child(5) {
            grid-column: 4 / span 2;

            @media (max-width: 1000px) {
                grid-column: 2 / span 2;
            }
            @media (max-width: 620px) {
                grid-column: 1;
            }
        }
    }

    .no {
        font-size: 10px;
        line-height: 1.3em;
        letter-spacing: .2em;
    }

    .ttl {
        margin: 30px 0 20px;
        min-height: 3.2em;
        display: block;
        font-family: var(--font-serif);
        font-size: 22px;
        font-weight: 400;
        line-height: 1.6em;
        letter-spacing: 0;

        span {
            display: block;
            white-space: nowrap;
        }
    }

    .txt {
        color: var(--color-text-sub);
        font-size: 15px;
        line-height: 1.9em;
    }
}

.sec_hair_menu {
    background: var(--color-paper-deep);

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

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

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

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

    .list {
        border-top: 1px solid var(--color-line);
    }

    .row {
        padding: 24px 0;
        display: grid;
        grid-template-columns: 1fr 150px 150px;
        align-items: center;
        gap: 20px;
        border-bottom: 1px solid var(--color-line);

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

        strong {
            font-family: var(--font-serif);
            font-size: 18px;
            font-weight: 400;
            line-height: 1.45em;

            @media (max-width: 520px) {
                font-size: 15px;
            }
        }

        span {
            font-size: 13px;
            line-height: 1.45em;

            @media (max-width: 900px) {
                grid-column: 1;
            }
        }

        b {
            font-size: 13px;
            font-weight: 400;
            line-height: 1.45em;

            @media (max-width: 900px) {
                grid-column: 2;
                grid-row: 1 / 3;
            }
        }
    }

    .btn {
        margin: 55px 0 0 auto;
        padding: 22px 25px;
        max-width: 420px;
        display: flex;
        justify-content: space-between;
        background: var(--color-moss);
        color: var(--color-white);
        line-height: 1.5em;
    }
}

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

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

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

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

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

    .item {
        position: relative;
        isolation: isolate;
        padding: 36px;
        min-height: 360px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: var(--color-white);
        text-align: center;

        @media (max-width: 520px) {
            min-height: 280px;
        }

        &.type_staff {
            background: linear-gradient(rgba(43, 53, 45, .5), rgba(43, 53, 45, .5)), url("../images/staff-group.webp") center 38% / cover no-repeat;
        }

        &.type_voice {
            background: linear-gradient(145deg, rgba(250, 247, 241, .78), rgba(218, 205, 186, .88)), linear-gradient(135deg, #eee6da, #cfc0aa);
            color: #453b31;

            &::before,
            &::after {
                position: absolute;
                z-index: -1;
                color: rgba(105, 88, 67, .13);
                font: 400 220px / 1 Georgia, serif;
            }

            &::before {
                top: -42px;
                left: 18px;
                content: "“";
            }

            &::after {
                right: 20px;
                bottom: -122px;
                content: "”";
            }
        }

        .en {
            position: relative;
            z-index: 2;
            line-height: 1.3em;
        }

        .ttl {
            position: relative;
            z-index: 2;
            margin: 18px 0 5px;
            font-family: var(--font-serif);
            font-size: 22px;
            font-weight: 400;
            line-height: 1.4em;
            letter-spacing: .04em;
        }

        small {
            position: relative;
            z-index: 2;
            margin-top: 12px;
            display: block;
            font-size: 13.333px;
            line-height: 1.45em;
            letter-spacing: .08em;
        }

        i {
            position: absolute;
            right: 30px;
            bottom: 28px;
            z-index: 2;
            font-size: 22px;
            font-style: normal;
            line-height: 1.5em;
        }
    }

    .illust {
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: .68;
        transform: rotate(-3deg);
        pointer-events: none;

        b {
            position: absolute;
            top: 18%;
            left: 10%;
            padding: 20px 22px 52px;
            width: 46%;
            background: rgba(255, 255, 255, .86);
            color: #b28b55;
            font: 400 13px / 1 sans-serif;
            letter-spacing: .14em;
            border-radius: 5px;
            box-shadow: 0 12px 30px rgba(43, 36, 28, .15);
        }

        em {
            position: absolute;
            height: 7px;
            display: block;
            background: rgba(101, 88, 72, .2);
            border-radius: 10px;

            &:nth-of-type(1) {
                top: 31%;
                left: 14%;
                width: 34%;
            }

            &:nth-of-type(2) {
                top: 36%;
                left: 14%;
                width: 27%;
            }

            &:nth-of-type(3) {
                right: 7%;
                bottom: 15%;
                width: 45%;
                height: 92px;
                background: rgba(255, 255, 255, .78);
                border-radius: 5px;
                box-shadow: 0 12px 30px rgba(43, 36, 28, .12);
                transform: rotate(7deg);
            }
        }
    }
}

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

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

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

    details {
        padding: 25px 0;
        border-top: 1px solid var(--color-line);

        &:last-child {
            border-bottom: 1px solid var(--color-line);
        }

        p {
            margin: 13px 0;
            color: var(--color-text-sub);
            font-size: 13px;
            line-height: 2em;
        }
    }

    summary {
        font-family: var(--font-serif);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.5em;
        cursor: pointer;
    }
}