:root {
    --color-ink: #1d211e;
    --color-text-body: #4f544e;
    --color-text-sub: #62675f;
    --color-text-faint: #777b74;
    --color-text-brown: #665e53;
    --color-text-on-dark: #c7cdc6;
    --color-paper: #f3f0e9;
    --color-paper-deep: #e7e1d7;
    --color-paper-dark: #ded7ca;
    --color-placeholder: #d8d1c5;
    --color-olive: #596451;
    --color-moss: #313a31;
    --color-dark: #1b201c;
    --color-darkest: #141815;
    --color-white: #fbfaf6;
    --color-line: rgba(29, 33, 30, .18);
    --font-sans: "DM Sans", "Noto Sans JP", sans-serif;
    --font-serif: "Noto Serif JP", serif;
    --pad-block: 140px;
    --pad-section: 154px;
    --pad-narrow: calc(var(--pad-section) * .75);

    @media (max-width: 1800px) {
        --pad-section: 144px;
    }
    @media (max-width: 1600px) {
        --pad-section: 128px;
    }
    @media (max-width: 1400px) {
        --pad-section: 110px;
    }
    @media (max-width: 1200px) {
        --pad-section: 96px;
    }
    @media (max-width: 1024px) {
        --pad-section: 80px;
    }
    @media (max-width: 900px) {
        --pad-block: 95px;
        --pad-section: 22px;
        --pad-narrow: 22px;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: .03em;
}

a {
    color: inherit;
    word-break: normal;
}

img {
    display: block;
    max-width: 100%;
}

/* 小さな英字の見出し */
.label_ptn_1 {
    margin-bottom: 24px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3em;
    letter-spacing: .3em;
}

/* セクションの見出し */
.ttl_ptn_1 {
    font-family: var(--font-serif);
    font-size: 66px;
    font-weight: 400;
    line-height: 1.45em;
    letter-spacing: .055em;
    text-wrap: balance;

    @media (max-width: 1500px) {
        font-size: 62px;
    }
    @media (max-width: 1400px) {
        font-size: 58px;
    }
    @media (max-width: 1300px) {
        font-size: 54px;
    }
    @media (max-width: 1200px) {
        font-size: 50px;
    }
    @media (max-width: 1100px) {
        font-size: 46px;
    }
    @media (max-width: 1000px) {
        font-size: 42px;
    }
    @media (max-width: 900px) {
        line-height: 1.55em;
        letter-spacing: .025em;
    }
    @media (max-width: 580px) {
        font-size: 38px;
    }
    @media (max-width: 500px) {
        font-size: 34px;
    }
    @media (max-width: 440px) {
        font-size: 30px;
    }
    @media (max-width: 400px) {
        font-size: 28px;
    }
    @media (max-width: 360px) {
        font-size: 24px;
        line-height: 1.6em;
        letter-spacing: 0;
    }
}

/* 小さめのセクションの見出し */
.ttl_ptn_2 {
    font-family: var(--font-serif);
    font-size: 52px;
    font-weight: 400;
    line-height: 1.45em;
    letter-spacing: .055em;
    text-wrap: balance;

    @media (max-width: 1400px) {
        font-size: 48px;
    }
    @media (max-width: 1200px) {
        font-size: 44px;
    }
    @media (max-width: 1024px) {
        font-size: 40px;
    }
    @media (max-width: 900px) {
        line-height: 1.55em;
        letter-spacing: .025em;
    }
    @media (max-width: 580px) {
        font-size: 38px;
    }
    @media (max-width: 500px) {
        font-size: 34px;
    }
    @media (max-width: 440px) {
        font-size: 30px;
    }
    @media (max-width: 400px) {
        font-size: 28px;
    }
    @media (max-width: 360px) {
        font-size: 24px;
        line-height: 1.6em;
        letter-spacing: 0;
    }
}

/* 上に線がある文字リンク */
.link_ptn_1 {
    padding-top: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    line-height: 1.5em;
    border-top: 1px solid var(--color-link-line, var(--color-line));

    i {
        font-size: 18px;
        font-style: normal;
        line-height: 1.5em;
    }
}

/* ブログのカード */
.card_ptn_1 {
    a {
        display: block;
        line-height: 1.3em;
    }

    .image {
        margin-bottom: 21px;
        overflow: hidden;
        aspect-ratio: 1.25;
        background: #c7bcab;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &.type_one {
            background: radial-gradient(circle at 70% 25%, #e4ddd0 0 11%, transparent 12%), linear-gradient(145deg, #80715d, #d9d0c2);
        }

        &.type_two {
            background: radial-gradient(circle, #bfc8b8 0 9%, #536050 10% 29%, #273028 30%);
        }

        &.type_three {
            background: repeating-linear-gradient(135deg, #d5cbbb 0 12px, #b9ac99 12px 24px);
        }
    }

    span {
        line-height: 1.5em;
    }

    time {
        color: var(--color-text-faint);
        font-size: 9px;
        line-height: 1.35em;
        letter-spacing: .12em;
    }

    .ttl {
        margin: 13px 0 20px;
        min-height: 55px;
        font-family: var(--font-serif);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.7em;
    }
}

/* 本文へ移動 */
.skip_link {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 99;
    padding: 12px 18px;
    background: #fff;
    line-height: 1.5em;

    &:focus {
        top: 12px;
    }
}

.header_ptn_1 {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    color: var(--color-white);
    transition: background .35s, color .35s;

    .wrap {
        padding: 0 calc(var(--pad-section) / 2);
        height: 84px;
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 34px;
        transition: height .35s;

        @media (max-width: 1000px) {
            gap: 20px;
        }
        @media (max-width: 900px) {
            padding: 0 20px;
            height: 68px;
            gap: 14px;
        }
        @media (max-width: 390px) {
            padding: 0 14px;
            gap: 10px;
        }
    }

    &.scrolled {
        background: rgba(243, 240, 233, .94);
        color: var(--color-ink);
        border-bottom: 1px solid var(--color-line);
        backdrop-filter: blur(14px);

        .wrap {
            height: 69px;
        }

        .logo img {
            filter: none;
        }
    }

    .logo {
        width: max-content;
        display: inline-flex;
        align-items: center;
        gap: 6px;

        img {
            width: 122px;
            height: auto;
            filter: brightness(0) invert(1);

            @media (max-width: 900px) {
                width: 116px;
            }
            @media (max-width: 390px) {
                width: 108px;
            }
        }

        .sub {
            font-size: 8px;
            line-height: 1em;
            letter-spacing: .28em;
            white-space: nowrap;

            @media (max-width: 900px) {
                font-size: 7px;
            }
            @media (max-width: 390px) {
                letter-spacing: .19em;
            }
            @media (max-width: 340px) {
                display: none;
            }
        }
    }

    .menu {
        display: none;

        @media (max-width: 900px) {
            padding: 6px 0 0;
            width: 30px;
            height: 35px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            background: none;
            color: inherit;
            border: 0;
        }

        span {
            width: 22px;
            height: 1px;
            background: currentColor;
        }

        b {
            font-size: 7px;
            font-weight: 400;
            line-height: 1em;
        }
    }

    .nav {
        display: flex;
        gap: 28px;
        font-size: 12px;

        @media (max-width: 1000px) {
            gap: 14px;
        }
        @media (max-width: 900px) {
            position: fixed;
            inset: 68px 0 auto;
            padding: 25px 22px 35px;
            /* 画面の低いスマホでも最後の項目まで届くよう、メニューの中だけスクロールさせる */
            max-height: calc(100vh - 68px);
            max-height: calc(100dvh - 68px);
            display: none;
            flex-direction: column;
            gap: 18px;
            overflow-y: auto;
            background: rgba(243, 240, 233, .98);
            color: var(--color-ink);
            border-bottom: 1px solid var(--color-line);

            &.open {
                display: flex;
            }
        }

        a {
            position: relative;
            padding: 10px 0;
            line-height: 1.5em;
            white-space: nowrap;

            &::after {
                position: absolute;
                right: 100%;
                bottom: 4px;
                left: 0;
                height: 1px;
                background: currentColor;
                content: "";
                transition: right .25s;
            }

            @media (hover: hover) {
                &:hover::after {
                    right: 0;
                }
            }
        }
    }

    .cta {
        padding: 13px 23px;
        font-size: 12px;
        line-height: 1.5em;
        white-space: nowrap;
        border: 1px solid currentColor;
        transition: background .25s, color .25s, border-color .25s;

        @media (max-width: 900px) {
            padding: 11px 14px;
        }
        @media (max-width: 390px) {
            padding: 10px 11px;
            font-size: 10px;
        }
        @media (hover: hover) {
            &:hover {
                background: var(--color-ink);
                color: var(--color-paper);
                border-color: var(--color-ink);
            }
        }
    }

    /* トップは上のメニューの項目が多い（2026-11-03 に「5つのこだわり」「リクルート」を足した）。
       901〜1200px は飾りの TOKYO / MIZUE を出さず、すき間を詰めて1行に収める。
       スマホのメニュー（900px 以下）の決まりを上書きしないよう、幅は両端を決めて書く */
    &.type_top {
        .wrap {
            @media (min-width: 901px) and (max-width: 1000px) {
                padding: 0 20px;
                gap: 14px;
            }
        }

        .logo .sub {
            @media (min-width: 901px) and (max-width: 1200px) {
                display: none;
            }
        }

        .nav {
            @media (min-width: 1001px) and (max-width: 1200px) {
                gap: 16px;
            }
            @media (min-width: 901px) and (max-width: 1000px) {
                gap: 10px;
            }
        }
    }
}

.footer_ptn_1 {
    background: linear-gradient(90deg, rgba(246, 241, 232, .94), rgba(246, 241, 232, .8)), url("../images/salon-exterior-detail.jpg") center 48% / cover no-repeat;
    color: var(--color-ink);

    &.type_site {
        background: linear-gradient(90deg, rgba(246, 241, 232, .94), rgba(246, 241, 232, .74)), url("../images/salon-exterior-detail.jpg") center 48% / cover no-repeat;
    }

    &.type_page {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: linear-gradient(90deg, rgba(246, 241, 232, .94), rgba(246, 241, 232, .74)), url("../images/salon-exterior-detail.jpg") center 48% / cover no-repeat;

        &::after {
            position: absolute;
            inset: auto -7% -34% auto;
            z-index: -1;
            width: 48%;
            aspect-ratio: 1;
            border: 1px solid rgba(85, 69, 51, .12);
            border-radius: 50%;
            content: "";
        }
    }

    &.type_dark {
        background: var(--color-darkest);
        color: var(--color-white);

        .brand {
            img {
                filter: brightness(0) invert(1);
            }

            p {
                color: #818981;
            }
        }

        .nav {
            border-color: rgba(255, 255, 255, .16);
        }

        .copyright {
            color: #747b74;
        }
    }

    .wrap {
        padding: 80px var(--pad-section) 35px;
    }

    .brand {
        margin-bottom: 70px;

        img {
            width: 190px;
            height: auto;
        }

        p {
            margin: 8px 0;
            color: var(--color-text-brown);
            font-size: 8px;
            line-height: 1.25em;
            letter-spacing: .22em;
        }
    }

    .nav {
        padding: 28px 0;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 35px;
        font-size: 11px;
        line-height: 1.45em;
        border-top: 1px solid rgba(52, 45, 37, .2);
        border-bottom: 1px solid rgba(52, 45, 37, .2);
    }

    .partner {
        margin-top: 42px;
        padding: 20px 0 12px;
        display: grid;
        grid-template-columns: 240px 190px;
        align-items: center;
        justify-content: end;
        gap: 24px;
        border-top: 2px dotted rgba(69, 59, 49, .3);
        border-bottom: 1px solid rgba(69, 59, 49, .16);

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

        .ttl {
            margin-bottom: 7px;
            font-family: var(--font-serif);
            font-size: 27px;
            font-weight: 400;
            line-height: 1.4em;

            @media (max-width: 1200px) {
                font-size: 24px;
            }
            @media (max-width: 1100px) {
                font-size: 22px;
            }
            @media (max-width: 1024px) {
                font-size: 20px;
            }
        }

        .txt {
            max-width: 390px;
            color: var(--color-text-brown);
            font-size: 10px;
            line-height: 1.7em;
        }

        a {
            display: block;
        }

        img {
            margin-left: auto;
            width: 100%;
            max-width: 190px;
            height: auto;
        }

        .more {
            margin-top: 5px;
            display: block;
            font-size: 9px;
            line-height: 1.35em;
            letter-spacing: .06em;
            text-align: right;
        }
    }

    .copyright {
        margin-top: 30px;
        color: var(--color-text-brown);
        font-size: 8px;
        line-height: 1.4em;
        letter-spacing: .15em;
    }
}

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

    .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);
            grid-template-columns: 1fr;
            gap: 40px;
        }
    }

    .map {
        min-height: 640px;
        background: var(--color-placeholder);

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

        iframe {
            width: 100%;
            height: 100%;
            min-height: 640px;
            display: block;
            border: 0;
            filter: saturate(.65) contrast(.92);

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

    .text_in {
        align-self: center;

        @media (max-width: 900px) {
            padding-top: 15px;
        }
    }

    .image {
        margin-bottom: 38px;

        img {
            width: 100%;
            height: auto;
            max-height: 330px;
            object-fit: cover;
            object-position: center;
        }
    }

    .list {
        margin: 55px 0;

        div {
            padding: 17px 0;
            display: grid;
            grid-template-columns: 110px 1fr;
            gap: 20px;
            border-bottom: 1px solid var(--color-line);
        }

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

        dd {
            font-size: 13px;
            line-height: 1.8em;
        }
    }
}

.sec_choose {
    background: var(--color-dark);
    color: var(--color-white);

    .wrap {
        padding: 65px var(--pad-section) 70px;

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

    .head {
        margin-bottom: 30px;
    }

    .list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: rgba(255, 255, 255, .18);

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

    .item {
        padding: 25px 30px;
        min-height: 145px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-content: space-between;
        background: #2f3430;
        transition: background .25s;

        &.type_olive {
            background: #566051;
        }

        @media (hover: hover) {
            &:hover {
                background: #414941;
            }
        }

        .en {
            grid-column: 1 / -1;
            font-size: 11px;
            line-height: 1.3em;
            letter-spacing: .08em;
        }

        .ttl {
            max-width: 340px;
            font-family: var(--font-serif);
            font-size: 30px;
            font-weight: 400;
            line-height: 1.45em;

            @media (max-width: 1500px) {
                font-size: 28px;
            }
            @media (max-width: 1300px) {
                font-size: 26px;
            }
            @media (max-width: 1200px) {
                font-size: 24px;
            }
            @media (max-width: 1100px) {
                font-size: 22px;
            }
        }

        i {
            margin: 0 -2px -1px 0;
            align-self: end;
            font-size: 23px;
            font-style: normal;
            line-height: 1.5em;
        }
    }
}

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

    .wrap {
        padding: 180px var(--pad-section) 100px;

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

    .ttl {
        font-family: var(--font-serif);
        font-size: clamp(44px, 7vw, 92px);
        font-weight: 400;
        line-height: 1.35em;

        span {
            display: inline-block;
        }
    }

    .txt {
        margin: 28px 0 14px;
        max-width: 760px;
        color: var(--color-text-sub);
        font-size: 14px;
        line-height: 2em;
    }
}

/* パンくず */
.breadcrumb_ptn_1 {
    margin-bottom: 28px;
    color: var(--color-text-sub);
    font-size: 11px;
    line-height: 1.8em;

    ol {
        display: flex;
        flex-wrap: wrap;
        gap: 0 10px;
        list-style: none;
    }

    li + li::before {
        margin-right: 10px;
        content: "/";
        opacity: .5;
    }

    a {
        text-decoration: underline;
    }
}

.sec_page_final {
    background: var(--color-dark);
    color: var(--color-white);

    .wrap {
        padding: 120px var(--pad-section);

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

    .ttl {
        margin-bottom: 55px;
        font-family: var(--font-serif);
        font-size: 54px;
        font-weight: 400;
        line-height: 1.45em;

        @media (max-width: 1300px) {
            font-size: 50px;
        }
        @media (max-width: 1100px) {
            font-size: 46px;
        }
        @media (max-width: 1000px) {
            font-size: 42px;
        }
        @media (max-width: 900px) {
            font-size: 38px;
        }
        @media (max-width: 800px) {
            font-size: 34px;
        }
        @media (max-width: 700px) {
            font-size: 30px;
        }
        @media (max-width: 600px) {
            font-size: 26px;
        }
    }

    .link {
        padding: 22px 0;
        max-width: 520px;
        display: flex;
        justify-content: space-between;
        line-height: 1.5em;
        border-top: 1px solid rgba(255, 255, 255, .4);
        border-bottom: 1px solid rgba(255, 255, 255, .4);
    }
}

/* 下層ページの見出しのまとまり */
.head_ptn_1 {
    margin-bottom: 72px;
    max-width: 650px;

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

    &.type_compact {
        margin-bottom: 52px;
    }
}