@charset "UTF-8";

/*
 * 車種のページ（page-model.php）の前半: KV・ページ内リンク・SUZYについて・旅と使い方
 * （Figma「SUZY｜PCデザイン（1280）」92:2 の 01 KV / 02 Page Nav / 04 ABOUT / 05 STYLE）。
 * PC のデザインだけなので、SP は TOP・HIRABOについてと同じ作り方（縦に積む・左右 20px）で組む。
 * 書体は「フォント変更」のルール: 見出し・キャッチは明朝 600、本文はゴシック 500、短い強調は 700、数字は var(--font-num)（Oswald）、英字は var(--font-en)
 */

/*
 * ページ内リンクで飛んだとき、ヘッダーの下に止まるページ内リンクの帯（SP 56px / PC 48px）に見出しが隠れないようにする。
 * ヘッダーの高さの分は html の scroll-padding-top が空けるので、ここでは帯の高さ + 16px だけ足す
 */
.model-page [id] {
    scroll-margin-top: calc(var(--scroll-toc-height) + 16px);
}

/*
 * SP のセクションの見出しは Figma SP（SUZY 439:14・BOUKEN 1533:14）の位置で改行する（原稿の span が 1 行）。
 * 2026-11-11 ユーザー指示「行頭に「。」や行末に数字が残らないよう改行位置を指定」（11-06 の「改行せずに流し込む」から変更）。
 * 行の中を文節の span に分けた見出し（SUZY・BOUKENについて）は br の位置で改行し、1 行の見出し（オーナー様の車両紹介・SUZY の 3つのモード）は span を続けて並べる。
 * 続けて並べる span は句読点と span の切れ目でだけ折り返す（word-break: keep-all は共通の .section-head__title。切れ目は幅 0 の空白）。
 * 1 行が画面に入りきらないときだけ、行の途中で折り返す。PC は Figma の改行位置のまま。
 * 寄せ方はすべて左寄せ（2026-11-11 11:24 Chatwork「SP に関して、タイトルはすべて左寄せに」。同日朝の 1 行の見出しを真ん中に寄せる指定は取り消し）
 */
@media (max-width: 1023px) {
    .model-page .section-head__title {
        overflow-wrap: anywhere;
    }

    .model-page .section-head__title > span {
        display: block;
    }

    .model-page .section-head__title br {
        display: none;
    }

    .model-page .model-about .section-head__title > span,
    .model-page .owners .section-head__title > span,
    .model-page--suzy .model-modes .section-head__title > span {
        display: inline;
    }

    .model-page .model-about .section-head__title > span::after,
    .model-page .owners .section-head__title > span::after,
    .model-page--suzy .model-modes .section-head__title > span::after {
        content: "\200B";
    }

    /* SUZY・BOUKENについての行の切れ目と、選ばれる理由の SP の見出し（原稿の title_sp）の「、」のあとの改行 */
    .model-page .model-about .section-head__title br,
    .model-page .model-reasons .section-head__title br {
        display: inline;
    }
}

/* 左寄せ・複数行の見出しは、HIRABOについてと共通の section-head--left / section-head--multiline（components.css） */

/*
 * KV の形は下層ページ共通の部品（assets/css/kv.css・template-parts/kv.php。HIRABOについてと同じ）。
 * ここは KV の帯の下に出す価格（PC: Figma「01 KV」92:5 / SP: 「SUZY｜SPデザイン（375）」の「01 KV」439:15）
 */
.model-kv__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
}

.model-kv__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 18px;
}

.model-kv__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* 色・太さは PC と同じ（文字・色は PC に合わせる） */
.model-kv__price-drive,
.model-kv__tax {
    color: rgb(51 51 51 / 0.6);
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    line-height: 1.45;
}

.model-kv__tax {
    font-size: 0.6875rem; /* 11px */
}

.model-kv__price-num {
    color: var(--color-green);
    font-family: var(--font-num);
    font-size: 2.5rem; /* 40px */
    font-weight: 600;
    line-height: 1.2;
}

.model-kv__price-unit {
    color: #333;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 1.45;
}

.model-kv__base {
    margin-top: 4px;
    color: #333;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.03em;
    line-height: 1.6;
}

.model-kv__base > span {
    display: inline-block;
}

@media (min-width: 1024px) {
    .model-kv__price-row {
        gap: 0 4px;
    }

    .model-kv__prices {
        gap: 0 18px;
    }

    .model-kv__price {
        gap: 4px;
    }

    .model-kv__price-drive,
    .model-kv__tax {
        color: rgb(51 51 51 / 0.6);
        font-weight: 500;
    }

    .model-kv__price-drive {
        font-size: 1rem; /* 16px */
    }

    .model-kv__tax {
        font-size: 0.8125rem; /* 13px */
    }

    .model-kv__price-num {
        font-size: 3.375rem; /* 54px */
        line-height: 64px;
    }

    .model-kv__price-unit {
        font-size: 1.25rem; /* 20px */
    }

    .model-kv__base {
        margin-top: 18px;
        font-size: 0.9375rem; /* 15px */
        letter-spacing: 0.45px;
        line-height: 22px;
    }
}

/*
 * ページ内リンク（PC: Figma「02 Page Nav（スクロールでヘッダー下に追従）」92:56。帯の高さは 48px。2026-11-12 Chatwork で 64px から縮めた）。
 * 白い帯をスクロールしても固定ヘッダーのすぐ下に止める（position: sticky）。帯の上の余白（PC 20px）はヘッダーの裏に隠れる位置で止め、
 * 帯の下の余白は次のセクション（SUZYについて）を下に潜らせて、その上の余白として取る（負の margin-bottom）。
 * 帯の左右の透明な部分は下のリンクを押せるよう pointer-events を外す。
 * SP（1023px まで）は 3 列のボタンにして追従させない（スクロール中はヘッダーの下の帯。components.css の .scroll-toc）
 */
.model-nav {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height) - 12px);
    z-index: 50;
    margin-bottom: -60px;
    padding: 12px 20px 0;
    pointer-events: none;
}

.model-nav__list {
    display: flex;
    align-items: center;
    gap: 24px;
    width: min(100%, var(--content-width));
    height: 48px;
    margin-inline: auto;
    padding: 0 20px;
    overflow-x: auto;
    background-color: var(--color-white);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.08);
    white-space: nowrap;
    pointer-events: auto;
    scrollbar-width: none;
}

.model-nav__list::-webkit-scrollbar {
    display: none;
}

.model-nav__item {
    flex-shrink: 0;
}

/* 押せる範囲を帯の高さいっぱいにする（文字 20px + 上下 14px = 48px） */
.model-nav__link {
    display: block;
    padding-block: 14px;
    color: #333;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.02em;
    line-height: 20px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.model-nav__link--name {
    color: var(--color-green);
    font-family: var(--font-en);
    font-size: 1rem; /* 16px */
    font-weight: 800;
    letter-spacing: 0.04em;
}

@media (hover: hover) {
    .model-nav__link:hover {
        color: var(--color-green);
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

@media (min-width: 1024px) {
    .model-page [id] {
        scroll-margin-top: 64px;
    }

    .model-nav {
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height) - 20px);
        margin-bottom: -68px;
        padding: 20px 70px 0;
    }

    /* 1024〜1279px は項目の間を詰めて 1 行に収める（1280px 以上は Figma どおり両端そろえ・左右 36px） */
    .model-nav__list {
        justify-content: space-between;
        gap: 12px;
        height: 48px;
        padding: 0 20px;
    }

    /* 押せる範囲を帯の高さいっぱいにする（文字 22px + 上下 13px = 48px） */
    .model-nav__link {
        padding-block: 13px;
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 0.27px;
        line-height: 22px;
    }

    .model-nav__link--name {
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.72px;
    }
}

@media (min-width: 1280px) {
    .model-nav__list {
        gap: 16px;
        padding: 0 36px;
    }

    .model-nav__link {
        font-size: 0.84375rem; /* 13.5px */
    }

    .model-nav__link--name {
        font-size: 1.125rem; /* 18px */
    }
}

/* 先頭の項目名: PC は車種名「SUZY」、SP は「SUZYについて」 */
.model-nav__name-sp {
    display: none;
}

/*
 * SP のページ内リンク（「SUZY｜SPデザイン（375）」の「02 Page Nav」439:33）。
 * 9 項目を 3 列の枠付きのボタンで並べ、項目名の下に下向きの矢印。帯は追従させず、下の余白 40px の後に SUZYについて が続く。
 * 項目名は 11〜12px（画面の幅に合わせる）で、375px では「オーナー様の車両紹介」だけが区切り（span）で 2 行になる（320px は「納期・購入の流れ」も折り返す）。
 * ボタンは全部同じ高さ（11/6 の Figma 1271:5428 の 56px）で、項目名と矢印は上下中央（2026-10-20 ユーザー指示）。
 * 項目名は Figma の 13px だと「納期・購入の流れ」がボタンに収まらないので、11〜12px のまま
 */
@media (max-width: 1023px) {
    .model-nav {
        position: static;
        margin-bottom: 0;
        padding: 8px 20px 40px;
        background-color: var(--color-pale);
        pointer-events: auto;
    }

    .model-nav__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* 全部の段を同じ高さ 56px（Figma SP 1271:5430。2 行の「オーナー様の車両紹介」も 56px の中に収まる） */
        grid-auto-rows: 56px;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        height: auto;
        padding: 0;
        overflow: visible;
        background-color: transparent;
        box-shadow: none;
        white-space: normal;
    }

    /* ボタンを段の高さいっぱいに伸ばす */
    .model-nav__item {
        display: flex;
    }

    .model-nav__link,
    .model-nav__link--name {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        /*
         * 項目名と矢印はボタンの上下中央（2 行の項目も 56px の中に収まる）。
         * ボタンの中の間隔（gap）は付けない（2026-10-20 ユーザー指示）
         */
        justify-content: center;
        gap: 0;
        min-width: 0;
        padding: 0 2px;
        color: var(--color-green);
        background-color: var(--color-white);
        border: 1px solid rgb(47 107 86 / 0.35);
        font-family: inherit;
        font-size: clamp(0.6875rem, 3.2vw, 0.75rem); /* 11〜12px */
        font-weight: 700;
        letter-spacing: 0;
        line-height: 16px;
        text-align: center;
        transition: opacity 0.2s ease;
    }

    /* 1 行に入らないときは区切り（span）で折り返す */
    .model-nav__part {
        display: inline-block;
    }

    /* 下向きの矢印（Figma SP 1271:5432: 幅 9px・線 2px、文字のすぐ下）。描き方は base.css の山形の矢印と同じ */
    .model-nav__link::after {
        flex-shrink: 0;
        width: 6.5px;
        height: 6.5px;
        margin-top: 0;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(135deg);
        content: "";
    }

    .model-nav__name-pc {
        display: none;
    }

    .model-nav__name-sp {
        display: block;
    }
}

@media (max-width: 1023px) and (hover: hover) {
    .model-nav__link:hover {
        color: var(--color-green);
        text-decoration: none;
        opacity: 0.85;
    }
}

/*
 * SUZYについて（Figma「04 ABOUT（SUZYについて）」93:2）。
 * 上の余白は、潜り込んでいるページ内リンクの帯の分（SP 60px / PC 68px）+ 帯の下の余白（PC 20px）+ Figma の余白（SP 40px / PC 60px）。
 * PC は左に文章、右に写真（1280px で x = 680px から画面の右端まで。Figma は 660px 幅で右が画面の外に出るので左寄せで切り抜く）、下に車両の詳細。
 * 下端の白い山は次のセクション（旅と使い方）の背景色
 */
.model-about {
    position: relative;
    padding: 100px 20px 80px;
    background-color: var(--color-pale);
}

/* ページ内リンク（#about）で飛んだとき、見出しが帯の下 40px（PC 60px）に来るようにする（帯の分だけ上の余白が大きいため） */
.model-page .model-about {
    scroll-margin-top: -12px;
}

.model-about__row,
.model-about__spec {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.model-about__text {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.model-about__body {
    color: #333;
    font-size: 0.9375rem; /* 15px */
    line-height: 2;
}

.model-about__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}

/* 数字の下に項目名（dt は意味の順で先に書き、見た目は下に回す） */
.model-about__number {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 上の線は項目名の文字の幅だけ（Figma どおり） */
.model-about__number-label {
    order: 1;
    align-self: flex-start;
    padding-top: 6px;
    color: #333;
    border-top: 1px solid rgb(47 107 86 / 0.3);
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.04em;
    line-height: 1.45;
}

.model-about__number-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--color-green);
}

.model-about__number-pre {
    font-size: 1rem; /* 16px */
    line-height: 1.45;
}

.model-about__number-num {
    font-family: var(--font-num);
    font-size: 3.5rem; /* 56px */
    font-weight: 600;
    line-height: 64px;
}

.model-about__number-unit {
    font-family: var(--font-num);
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 1.2;
}

.model-about__photo {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 32px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.model-about__spec {
    margin-top: 32px;
}

/* SP は 2 列。項目の上に罫線 */
.model-about__spec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.model-about__spec-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid rgb(47 107 86 / 0.25);
}

.model-about__spec-term {
    color: var(--color-green);
    font-size: 0.75rem; /* 12px */
    letter-spacing: 0.06em;
    line-height: 1.45;
}

.model-about__spec-value {
    color: #333;
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.02em;
    line-height: 1.7;
}

.model-about__spec-value > span {
    display: block;
}

/* 注記の文字は共通の .note（components.css） */
.model-about__spec-note {
    margin-top: 12px;
}

/* 下端の山（「旅と使い方」の白。Figma は 1280 × 145px の山を、TOP の KV と同じ形の SVG を引き伸ばして使っている） */
.model-about::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1280 / 145;
    /* 1280px より広い画面では横にだけ伸ばし、高さは Figma の 145px で止める */
    max-height: 145px;
    background-color: var(--color-white);
    -webkit-mask: var(--mtn-shape, url("../img/deco-mountain.svg?v=2")) center bottom / 100% 100% no-repeat;
    mask: var(--mtn-shape, url("../img/deco-mountain.svg?v=2")) center bottom / 100% 100% no-repeat;
    pointer-events: none;
    content: "";
}

@media (min-width: 1024px) {
    .model-about {
        /* 下の余白は注記の下 136px（Figma どおり） */
        padding: 148px 70px 136px;
    }

    .model-page .model-about {
        scroll-margin-top: -40px;
    }

    /* Figma は山（1280px で 145px）の下 35px を次の「旅と使い方」にはみ出させている（35 / 145 ≒ 24.14%。translate の % は山自身の高さに対する割合） */
    .model-about::after {
        z-index: 1;
        transform: translateY(24.14%);
    }

    /* 1280px で 540px。狭い PC は写真（右半分）に重ならないよう縮める */
    .model-about__text {
        gap: 36px;
        width: calc(50% - 30px);
    }

    .model-about__body {
        font-size: 1.125rem; /* 18px */
        line-height: 40px;
    }

    .model-about__numbers {
        gap: 48px;
        padding-top: 8px;
    }

    .model-about__number-pre {
        font-size: 1.125rem; /* 18px */
    }

    .model-about__number-num {
        font-size: 4.5rem; /* 72px */
        line-height: 80px;
    }

    .model-about__number-unit {
        font-size: 1.75rem; /* 28px */
    }

    /*
     * セクションを基準に置く: 文章の上端（上の余白 164px）から 36px 下、x = 680px（画面の中央 + 40px）から右端まで。
     * KV の動画と同じく、画面の幅が 1920px までは画面の右端まで伸ばし、それより広い画面では 1920px のときの幅 920px で止める
     */
    .model-about__photo {
        position: absolute;
        top: 200px;
        left: calc(50% + 40px);
        /* img は left と right を両方指定しても幅が決まらないので、幅で右端を決める */
        width: min(50% - 40px, 920px);
        height: 440px;
        margin-top: 0;
        aspect-ratio: auto;
        object-position: left center;
    }

    /* 写真の下端（文章の上端から 476px）より下から詳細を始める */
    .model-about__row {
        min-height: 476px;
    }

    .model-about__spec {
        margin-top: 32px;
    }

    /* PC は 6 列を縦の罫線で区切る */
    .model-about__spec-list {
        display: flex;
        gap: 0;
    }

    .model-about__spec-item {
        flex: 1 1 0;
        min-width: 0;
        gap: 10px;
        padding: 6px 20px 6px 28px;
        border-top: 0;
        border-left: 1px solid rgb(47 107 86 / 0.25);
    }

    .model-about__spec-item:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .model-about__spec-term {
        letter-spacing: 0.72px;
    }

    .model-about__spec-value {
        font-size: 1rem; /* 16px */
        letter-spacing: 0.32px;
        line-height: 26px;
    }

    .model-about__spec-note {
        margin-top: 20px;
        text-align: right;
    }
}

/*
 * SP の SUZYについて（「SUZY｜SPデザイン（375）」の「04 ABOUT」439:80）。
 * ページ内リンクは潜り込まない（3 列のボタン）ので、上の余白は Figma どおり 56px。見出し → 本文 → 写真 → 数字 → 詳細 → 注記を 24px 間隔で縦に積む
 * （数字は HTML では本文の後ろにあるので、.model-about__text を display: contents にして写真の後ろへ並べ替える）。
 * 詳細は 2 列の白い枠を罫線で区切る。下端の山は PC と同じく入れ、形と大きさは TOP の SP の境目の山（top.css の .lineup-model__divider: 640px 幅より小さくしない・下の余白 88px）と同じ
 */
@media (max-width: 1023px) {
    .model-about {
        overflow-x: clip;
        padding: 56px 20px 88px;
    }

    /* ページ内リンクで飛んだとき、セクションの上端がスクロール中の帯（56px。--scroll-toc-height）のすぐ下に来るようにする */
    .model-page .model-about {
        scroll-margin-top: var(--scroll-toc-height);
    }

    .model-about::after {
        bottom: -1px;
        width: max(640px, 100%);
        aspect-ratio: 1280 / 114;
        -webkit-mask-image: url("../img/lineup/divider-mountain.svg?v=2");
        mask-image: url("../img/lineup/divider-mountain.svg?v=2");
    }

    .model-about__row {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .model-about__text {
        display: contents;
    }

    /* 見出し → 写真 → 本文 → 数字の順（SUZY 439:80・BOUKEN 1533:65。2026-11-10 19:11 Chatwork「タイトル > 画像、文章の順に」） */
    .model-about__body {
        order: 1;
    }

    .model-about__numbers {
        order: 2;
        gap: 16px 32px;
    }

    .model-about__photo {
        margin-top: 0;
    }

    .model-about__number {
        gap: 4px;
    }

    /* 上の線は PC と同じ（線の色は PC に合わせる） */
    .model-about__number-label {
        font-size: 0.75rem; /* 12px */
        letter-spacing: 0;
    }

    .model-about__number-value {
        gap: 2px;
    }

    .model-about__number-pre {
        font-size: 0.875rem; /* 14px */
    }

    .model-about__number-num {
        font-size: 3rem; /* 48px */
        line-height: 71px;
    }

    .model-about__number-unit {
        font-size: 1.375rem; /* 22px */
    }

    .model-about__spec {
        margin-top: 24px;
    }

    /* Figma の SP どおり白い箱を薄い緑の罫線（#bbcec5）で区切る */
    .model-about__spec-list {
        gap: 1px;
        background-color: #bbcec5;
        border: 1px solid #bbcec5;
    }

    .model-about__spec-item {
        min-height: 96px;
        padding: 14px;
        background-color: var(--color-white);
        border-top: 0;
    }

    .model-about__spec-term {
        font-size: 0.6875rem; /* 11px */
        letter-spacing: 0;
    }

    /* Figma の SP どおり 15px（太さは PC と同じ） */
    .model-about__spec-value {
        font-size: 0.9375rem; /* 15px */
        letter-spacing: 0;
        line-height: 22px;
    }

    .model-about__spec-note {
        margin-top: 24px;
    }
}

/*
 * 旅と使い方（Figma「05 STYLE（旅と使い方 #dog #couple）」93:27）。
 * 愛犬と旅する（#dog）・夫婦で出かける（#couple）の 2 つのブロック（.model-use）と、BOUKEN へのリンク。
 * 下端の山は次のセクション（3つのモード）の背景色 #f7f9f4
 */
.model-style {
    position: relative;
    /* SP で横にはみ出す山（幅 640px）を切る */
    overflow-x: clip;
    padding: 64px 20px 96px;
    background-color: var(--color-white);
}

.model-style__inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

/*
 * 境目の山は TOP のラインナップと同じ形（top.css の .lineup-model__divider。SP は 640px 幅より小さくしない）。
 * 下端の小数のピクセルで下の背景が細い線のように透けないよう、1px 下へ重ねる
 */
.model-style::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: max(640px, 100%);
    aspect-ratio: 1280 / 114;
    /* 1280px より広い画面では横にだけ伸ばし、高さは 114px で止める */
    max-height: 114px;
    background-color: var(--color-pale);
    -webkit-mask: url("../img/lineup/divider-mountain.svg?v=2") center bottom / 100% 100% no-repeat;
    mask: url("../img/lineup/divider-mountain.svg?v=2") center bottom / 100% 100% no-repeat;
    pointer-events: none;
    content: "";
}

.model-use {
    display: flex;
    flex-direction: column;
}

.model-use__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* ラベル（Figma: 薄い緑の地に和文 + 緑の地に英字） */
.model-use__label {
    display: flex;
}

.model-use__label-ja {
    padding: 6px 14px;
    color: #333;
    background-color: #e9efe9;
    font-family: var(--font-serif);
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 32px;
}

.model-use__label-en {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--color-white);
    background-color: var(--color-green);
    font-family: var(--font-en);
    font-size: 0.8125rem; /* 13px */
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.2;
}

/* ラベルの横の一言はキャッチなので明朝（Figma はゴシック。「フォント変更」のルールを優先） */
.model-use__lead {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1rem; /* 16px */
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* 横長の写真。SP は 3:2 で、犬・夫婦の写っている所を中心に切り抜く */
.model-use__photo {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 20px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.model-use__photo--dog {
    object-position: 70% center;
}

.model-use__photo--couple {
    object-position: 60% center;
}

.model-use__body {
    margin-top: 16px;
    color: #333;
    font-size: 0.9375rem; /* 15px */
    line-height: 2;
}

.model-use__day {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

/* 「1日の流れ」の右に短い線 */
.model-use__day-title {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.1875rem; /* 19px */
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.6;
}

.model-use__day-title::after {
    width: 80px;
    height: 1px;
    background-color: rgb(47 107 86 / 0.4);
    content: "";
}

.model-use__steps {
    display: grid;
    gap: 32px;
}

.model-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 左にオレンジの縦線、和文の後ろに英字 */
.model-step__title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.1875rem; /* 19px */
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.6;
}

.model-step__title::before {
    flex-shrink: 0;
    width: 4px;
    height: 24px;
    margin-right: -4px;
    background-color: var(--color-accent);
    content: "";
}

.model-step__en {
    color: var(--color-green);
    font-family: var(--font-en);
    font-size: 0.75rem; /* 12px */
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
}

.model-step__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 556 / 330;
    object-fit: cover;
}

.model-step__text {
    color: #333;
    font-size: 0.9375rem; /* 15px */
    letter-spacing: 0.02em;
    line-height: 1.8;
}

/* ペット同乗のお問い合わせ案内（犬のブロックだけ） */
/* 来店チケット（SUZY の「愛犬と旅する」。形は components.css の .visit-ticket）。STYLE の背景は白なので、切り取り線の半円も白 */
.model-use__ticket {
    margin-top: 40px;
}

.model-use__ticket .visit-ticket {
    --visit-ticket-notch: var(--color-white);
}

.model-use__contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
    padding: 24px 20px;
    background-color: #e9efe9;
}

.model-use__contact-text {
    color: #333;
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.02em;
    line-height: 1.8;
}

/* お問い合わせのボタン。形・大きさは共通の .button（SP は横幅いっぱい、PC は最小 398×66px）のまま */
.model-use__contact-link {
    flex-shrink: 0;
}

/* 矢印（Figma: 幅 5px × 高さ 10px の「>」） */
.model-use__more::after {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    content: "";
}

/* この使い方に役立つ装備 */
.model-use__equipment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 32px;
}

.model-use__equipment-label {
    color: rgb(51 51 51 / 0.8);
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.42px;
    line-height: 20px;
}

.model-use__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Figma のチップの高さ 35px（文字 19px + 上下 7px + 枠 1px） */
.model-use__chip {
    padding: 7px 14px;
    color: var(--color-green);
    background-color: var(--color-pale);
    border: 1px solid rgb(47 107 86 / 0.5);
    border-radius: 2px;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.26px;
    line-height: 19px;
}

.model-use__more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-green);
    font-size: 0.9375rem; /* 15px */
    letter-spacing: 0.45px;
    line-height: 22px;
    text-decoration: none;
}

.model-use__more::after {
    width: 6px;
    height: 6px;
}

/* BOUKEN の旅と使い方へのリンク（緑の帯の左に写真、右端に白い四角の矢印） */
.model-style__other {
    display: flex;
    flex-direction: column;
    color: var(--color-white);
    background-color: var(--color-green);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.model-style__other-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 380 / 214;
    object-fit: cover;
}

.model-style__other-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
}

.model-style__other-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.model-style__other-sub {
    color: #e7c2ae;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.04em;
    line-height: 1.45;
}

.model-style__other-title {
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.45;
}

.model-style__other-text::after {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%232f6b56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 14px no-repeat;
    content: "";
}

@media (hover: hover) {
    .model-style__other:hover {
        opacity: 0.85;
    }

    .model-use__more:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

@media (min-width: 768px) {
    .model-use__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 28px;
    }

    /* 1日の流れは 1.走る → 2.楽しむ、3.過ごす → 4.泊まる の順に 1 つずつ出す（同じ段の右を 0.6 秒遅らせる。2026-10-21 先方指示） */
    .model-step:nth-child(even) {
        --fade-delay: 0.6s;
    }

    .model-style__other {
        flex-direction: row;
    }

    .model-style__other-photo {
        flex-shrink: 0;
        width: 38%;
        max-width: 380px;
    }

    .model-style__other-text {
        flex: 1;
        min-width: 0;
        padding: 20px 32px;
    }
}

@media (min-width: 1024px) {
    /* 下の余白は山（最大 114px）+ BOUKEN の帯との間 60px。Figma（120px）より広げ、帯が山にかからないようにする */
    .model-style {
        padding: 90px 70px 174px;
    }

    .model-style__inner {
        gap: 72px;
    }

    .model-use__head {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    .model-use__label-ja {
        padding: 8px 20px;
        font-size: 2rem; /* 32px */
        line-height: 44px;
    }

    .model-use__label-en {
        padding: 0 20px;
        font-size: 1.25rem; /* 20px */
        letter-spacing: 2px;
    }

    /* 左の縦線（Figma: 高さ 40px・ラベルとの間 24px） */
    .model-use__lead {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding-left: 24px;
        border-left: 1px solid rgb(47 107 86 / 0.35);
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.72px;
        line-height: 28px;
    }

    /* PC は Figma の 1140 × 310px の切り抜き（書き出した写真の中の位置） */
    .model-use__photo {
        margin-top: 32px;
        aspect-ratio: 1140 / 310;
    }

    .model-use__photo--dog {
        object-position: center 61%;
    }

    .model-use__photo--couple {
        object-position: center 49%;
    }

    .model-use__body {
        margin-top: 20px;
        font-size: 1.125rem; /* 18px */
        line-height: 40px;
    }

    .model-use__day {
        gap: 24px;
        margin-top: 40px;
    }

    .model-use__day-title,
    .model-step__title {
        font-size: 1.375rem; /* 22px */
        line-height: 35px;
    }

    .model-step {
        gap: 14px;
    }

    .model-step__en {
        letter-spacing: 1.92px;
    }

    .model-step__text {
        letter-spacing: 0.3px;
        line-height: 27px;
    }

    /* PC は文章の右にボタン（共通の .button は 1023px までは横幅いっぱいなので、横に並べるのは PC だけ） */
    .model-use__ticket {
        margin-top: 56px;
    }

    .model-use__contact {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-top: 56px;
        padding: 28px 40px;
    }

    .model-use__contact-text {
        font-size: 1rem; /* 16px */
        letter-spacing: 0.32px;
        line-height: 28px;
    }

    .model-use__contact-text > span {
        display: block;
    }

    /* 項目名とチップは左、「詳しく見る」は右端。狭い PC はチップが折り返す */
    .model-use__equipment {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
        margin-top: 56px;
    }

    .model-use__more {
        margin-left: auto;
    }

    .model-style__other-photo {
        width: 380px;
        height: 214px;
        aspect-ratio: auto;
    }

    .model-style__other-text {
        padding: 0 48px;
    }

    .model-style__other-copy {
        gap: 8px;
    }

    .model-style__other-sub {
        font-size: 0.9375rem; /* 15px */
        letter-spacing: 0.6px;
    }

    .model-style__other-title {
        font-size: 1.625rem; /* 26px */
        letter-spacing: 2px;
    }

    .model-style__other-text::after {
        width: 56px;
        height: 56px;
    }
}

/*
 * SP の旅と使い方（「SUZY｜SPデザイン（375）」の「05 STYLE」440:14）。
 * 上下の余白 56px / 88px（下は境目の山の分を含む）、見出し・2 つの使い方・BOUKEN へのリンクの間 48px、使い方の中は 20px 間隔。
 * ラベル・チップは SP の Figma どおり（地の無い明朝の和文 + 緑の地の英字のタグ、白地の角丸のチップ）。下端の山は PC と同じく入れる（TOP の SP の境目の山と同じ）
 */
@media (max-width: 1023px) {
    .model-style {
        padding: 56px 20px 88px;
    }

    .model-style__inner {
        gap: 48px;
    }

    .model-use__head {
        gap: 10px;
    }

    /* Figma の SP（440:21）: 和文は地の無い 24px の明朝、右に 10px あけて緑の地の英字のタグ */
    .model-use__label {
        align-items: center;
        gap: 10px;
    }

    .model-use__label-ja {
        padding: 0;
        background-color: transparent;
        font-size: 1.5rem; /* 24px */
        letter-spacing: 0.04em;
        line-height: 34px;
    }

    .model-use__label-en {
        padding: 4px 8px;
        font-size: 0.625rem; /* 10px */
        letter-spacing: 1px;
        line-height: 12px;
    }

    .model-use__photo {
        aspect-ratio: 335 / 200;
    }

    .model-use__body {
        margin-top: 20px;
        font-size: 0.875rem; /* 14px */
        line-height: 28px;
    }

    .model-use__day {
        gap: 28px;
        margin-top: 32px;
    }

    .model-use__day-title {
        gap: 14px;
        font-size: 1.25rem; /* 20px */
        letter-spacing: 0.04em;
        line-height: 29px;
    }

    .model-use__day-title::after {
        width: 60px;
    }

    .model-use__steps {
        gap: 28px;
    }

    .model-step__title {
        gap: 10px;
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.04em;
        line-height: 20px;
    }

    .model-step__title::before {
        height: 20px;
        margin-right: 0;
    }

    .model-step__en {
        font-size: 0.6875rem; /* 11px */
        letter-spacing: 0.1em;
    }

    .model-step__photo {
        aspect-ratio: 335 / 200;
    }

    .model-step__text {
        font-size: 0.875rem; /* 14px */
        letter-spacing: 0;
        line-height: 26px;
    }

    .model-use__contact {
        margin-top: 20px;
    }

    .model-use__contact-text {
        letter-spacing: 0;
        line-height: 26px;
    }

    /* Figma のボタンは高さ 52px（共通の .button の SP は 60px） */
    .model-use__contact-link {
        min-height: 52px;
        font-size: 0.875rem; /* 14px */
    }

    /* 矢印は Figma の 6 × 9px に合わせて小さくする */
    .model-use__contact-link::after {
        --chevron-size: 6px;
    }

    .model-use__equipment {
        margin-top: 20px;
    }

    .model-use__equipment-label {
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 0;
        line-height: 19px;
    }

    /* Figma の SP（440:68）: 白地・角丸・枠は緑の 40% */
    .model-use__chip {
        padding: 6px 12px;
        background-color: var(--color-white);
        border-color: rgb(47 107 86 / 0.4);
        border-radius: 999px;
        font-size: 0.75rem; /* 12px */
        letter-spacing: 0;
        line-height: 17px;
    }

    .model-use__more {
        gap: 10px;
        font-size: 0.875rem; /* 14px */
        letter-spacing: 0;
        line-height: 20px;
    }
}

/* BOUKEN へのリンク（写真が上の縦並びのときだけ。768px からは写真が左の横並び） */
@media (max-width: 767px) {
    .model-style__other-photo {
        aspect-ratio: 335 / 170;
    }

    /* 文字と矢印の間 8px（Figma: 375px で見出しが 1 行に収まる幅） */
    .model-style__other-text {
        gap: 8px;
        padding: 18px 20px;
    }

    .model-style__other-sub {
        font-size: 0.75rem; /* 12px */
        letter-spacing: 0;
    }

    .model-style__other-title {
        font-size: 1.0625rem; /* 17px */
        letter-spacing: 0;
    }

    .model-style__other-text::after {
        width: 36px;
        height: 36px;
        background-size: 6px 10px;
    }
}

/* 1280px 以上（Figma の幅）だけ Figma どおりの改行・1 行の項目名にする（1024〜1279px は文章の幅が狭く行の途中で折り返すので、続けて流し込む） */
@media (min-width: 1280px) {
    .model-about__body > span {
        display: block;
    }

    .model-about__spec-term {
        white-space: nowrap;
    }
}

/* 使い方のラベルを文節（span）に分けたときは、span の中では折り返さない（BOUKEN の「釣り・キャンプで使う」） */
.model-use__label-part {
    display: inline-block;
}

/*
 * 〇〇について: 見出し → 本文 → 写真の順に出す。写真は文章と一緒に出さず、文章が出たあとに出す
 * （本文を 0.3 秒、写真を SP 0.8 秒・PC 1.2 秒遅らせる。2026-10-21 先方指示）
 */
.model-about__body {
    --fade-delay: 0.3s;
}

.model-about__photo {
    --fade-delay: 0.8s;
}

@media (min-width: 1024px) {
    .model-about__photo {
        --fade-delay: 1.2s;
    }
}


/* ============================================================
 * 11/6 のデザイン（SUZY｜PCデザイン 1271:1159 / SPデザイン 1271:5406）。SUZY・BOUKEN 共通。BOUKEN だけの違いは .model-page--bouken
 * ============================================================ */

/* PC と SP で Figma の文言が違う所・片方にしか無いもの（display: none なので読み上げも片方だけ） */
@media (max-width: 1023px) {
    .model-pc-only {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .model-sp-only {
        display: none !important;
    }
}

/*
 * SP のセクションの順は SUZY・BOUKEN とも PC と同じ HTML の順（Figma Page 1 SP 439:14・1533:14。2026-11-10）。
 * ページ内リンクの並べ替え（--sp-order。原稿の nav_sp）は、nav_sp を書いた車種だけ効く（今はどちらも書いていない）
 */
@media (max-width: 1023px) {
    .model-page {
        display: flex;
        flex-direction: column;
    }

    /* 3 列のボタンの並び（項目ごとの --sp-order。template-parts/model/page-nav.php） */
    .model-nav__item {
        order: var(--sp-order, 0);
    }
}

/*
 * セクションの下端の山（Figma「Deco / Mountain」PC 1280×165・SP は幅いっぱいで高さ 34〜58px）。色は次のセクションの背景。
 * --mtn-color（色）・--mtn-sp（SP の高さ）・--mtn-flip（左右反転は -1）をセクションごとに決める。下端の線が透けないよう 1px 重ねる。
 * 山の SVG は preserveAspectRatio="none" で箱いっぱいに引き伸ばす（無いと SP の横長の箱では縦横比を保って中央に縮み、下に隙間が出る。
 * 2026-11-10 Chatwork「山の区切りの線」）。SVG を直したときは、ブラウザに残った古い SVG を読み直させるため url() の ?v= を上げる
 */
.model-mtn::after,
.model-page .model-about::after,
.model-page .model-style::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: var(--mtn-sp, 40px);
    max-height: none;
    aspect-ratio: auto;
    background-color: var(--mtn-color, var(--color-white));
    transform: scaleX(var(--mtn-flip, 1));
    -webkit-mask: var(--mtn-shape, url("../img/deco-mountain.svg?v=2")) center bottom / 100% 100% no-repeat;
    mask: var(--mtn-shape, url("../img/deco-mountain.svg?v=2")) center bottom / 100% 100% no-repeat;
    pointer-events: none;
    content: "";
}

@media (min-width: 1024px) {
    .model-mtn::after,
    .model-page .model-about::after,
    .model-page .model-style::after {
        height: auto;
        aspect-ratio: 1280 / var(--mtn-pc, 165);
        max-height: calc(var(--mtn-pc, 165) * 1px);
    }
}

/* KV: ベース車の 2 行（SP の補足は 3 行目）。PC 16px・字間 0.48px、SP 16px */
.kv--logo .model-kv__base {
    font-size: 1rem; /* 16px */
    line-height: 23px;
    letter-spacing: 0;
}

.kv--logo .model-kv__base > span {
    display: block;
}

.kv--logo .model-kv__base--sp {
    margin-top: 4px;
}

@media (min-width: 1024px) {
    .kv--logo .model-kv__base {
        letter-spacing: 0.48px;
    }
}

/* SUZYについて: 11/6 は見出し・本文と写真だけ。下に山 */
.model-page .model-about {
    --mtn-color: var(--color-white);
    --mtn-flip: -1;
    --mtn-sp: 37px;
    padding: 56px 20px 64px;
}

.model-page .model-about__body {
    font-size: 1rem; /* 16px */
    line-height: 32px;
}

.model-page .model-about__photo {
    aspect-ratio: 335 / 224;
}

@media (min-width: 1024px) {
    /* 上の余白は、潜り込むページ内リンクの帯 68px + 帯の下 20px + Figma の 30px */
    .model-page .model-about {
        padding: 118px 70px 225px;
    }

    .model-page .model-about__body {
        font-size: 1.125rem; /* 18px */
        line-height: 40px;
    }

    .model-page .model-about__photo {
        top: 170px;
        aspect-ratio: auto;
    }

    .model-page .model-about__row {
        min-height: 476px;
    }
}

/* 旅と使い方 */
.model-page .model-style {
    --mtn-sp: 58px;
    /* SP の次のセクションは品質（白） */
    --mtn-color: var(--color-white);
    background-color: var(--color-pale);
    padding: 56px 20px 88px;
}

.model-page .model-use__lead {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0;
}

.model-page .model-use__body {
    font-size: 1rem; /* 16px */
    line-height: 1.8;
}

.model-page .model-step__text {
    font-size: 1rem; /* 16px */
    line-height: 1.8;
}

.model-page .model-use__contact-text {
    font-size: 1rem; /* 16px */
    line-height: 30px;
}

.model-page .model-use__chip {
    padding: 7px 13px;
    font-size: 0.8125rem; /* 13px */
}

@media (min-width: 1024px) {
    .model-page .model-style {
        --mtn-color: var(--color-pale);
        background-color: var(--color-white);
        padding: 70px 70px 225px;
    }

    .model-page .model-use__lead {
        letter-spacing: 0.72px;
    }

    /* 犬: 18px / 40px（2 段落）。夫婦は 18px / 1.8（Figma どおり） */
    .model-page .model-use__body {
        font-size: 1.125rem; /* 18px */
        line-height: 40px;
    }

    .model-page .model-use--couple .model-use__body {
        line-height: 1.8;
    }

    .model-page .model-use--couple .model-use__day {
        margin-top: 56px;
    }

    .model-page .model-use__steps {
        gap: 36px 28px;
    }

    .model-page .model-step__en {
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 2.08px;
    }

    .model-page .model-step__text {
        letter-spacing: 0.32px;
        line-height: 1.8;
    }

    .model-page .model-use__contact-text {
        line-height: 28px;
    }

    /* お問い合わせのボタン（Figma: 260×56px・文字 15px） */
    .model-page .model-use__contact-link {
        min-width: 260px;
        min-height: 56px;
        padding: 0 24px;
        font-size: 0.9375rem; /* 15px */
        letter-spacing: 0.3px;
    }

    .model-page .model-use__contact-link::after {
        margin-right: 0;
    }

    .model-page .model-use__equipment {
        flex-wrap: nowrap;
    }

    .model-page .model-use__chip {
        padding: 7px 14px;
        background-color: var(--color-white);
    }

    .model-page .model-use--couple .model-use__equipment {
        margin-top: 72px;
    }
}

/*
 * 数字で見るSUZY（Figma「04.2 NUMBERS」PC 1271:1447 / SP 1271:5525）。
 * 数字の書体は Figma も Oswald（--font-num）。SP は大きさ → 価格 → 定員の順に積む
 */
.model-numbers {
    position: relative;
    padding: 56px 0 88px;
    background-color: var(--color-pale);
}

.model-numbers__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: min(100% - 40px, var(--content-width));
    margin-inline: auto;
}

.model-numbers__top {
    display: flex;
    flex-direction: column;
    gap: 32px;
    order: 2;
}

.model-numbers__facts {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.model-numbers__label {
    color: var(--color-green);
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    letter-spacing: 0.56px;
    line-height: 20px;
}

.model-numbers__price {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.model-numbers__prices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.model-numbers__price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #333;
}

.model-numbers__drive {
    color: #6b736e;
    font-family: var(--font-num);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    line-height: 27px;
}

.model-numbers__price-num {
    font-family: var(--font-num);
    font-size: 3.5rem; /* 56px */
    font-weight: 600;
    line-height: 83px;
}

.model-numbers__price-unit {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    line-height: 29px;
}

.model-numbers__price-row + .model-numbers__price-row .model-numbers__price-num {
    font-size: 2.5rem; /* 40px */
    line-height: 59px;
}

.model-numbers__price-row + .model-numbers__price-row .model-numbers__price-unit {
    font-size: 1rem; /* 16px */
    line-height: 23px;
}

.model-numbers__note {
    color: #6b736e;
    font-size: 0.8125rem; /* 13px */
    line-height: 19px;
}

.model-numbers__base {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid #bbcec5;
}

.model-numbers__base-name {
    color: #333;
    font-size: 1.125rem; /* 18px。375px で Figma の 22px は 1 行に入らない（確認事項） */
    font-weight: 700;
    line-height: 34px;
}

.model-numbers__drive-text {
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 23px;
}

.model-numbers__lead-time {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid #bbcec5;
}

.model-numbers__lead-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #333;
}

.model-numbers__lead-pre {
    font-size: 1rem; /* 16px */
    line-height: 23px;
}

.model-numbers__lead-num,
.model-numbers__seat-num {
    font-family: var(--font-num);
    font-size: 2.75rem; /* 44px */
    font-weight: 600;
    line-height: 65px;
}

.model-numbers__lead-unit {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    line-height: 26px;
}

/* 定員の白いカード */
.model-numbers__seats {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px 20px;
    background-color: var(--color-white);
    border-radius: 4px;
}

.model-numbers__seat {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.model-numbers__icons {
    display: flex;
    gap: 8px;
}

.model-numbers__icons img {
    display: block;
}

.model-numbers__seat-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.model-numbers__seat-num {
    color: var(--color-green);
}

.model-numbers__seat--bed .model-numbers__seat-num {
    color: var(--color-accent);
}

.model-numbers__seat-unit {
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 23px;
}

/* 大きさ。SP は写真の幅に合わせて寸法線ごと縮む（横 335×185・正面 200×208） */
.model-numbers__size-row {
    display: flex;
    flex-direction: column;
    gap: 32px;
    order: 1;
}

.model-numbers__fig {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.model-numbers__fig--side .model-numbers__photo {
    aspect-ratio: 470 / 260;
}

.model-numbers__fig--front {
    width: 200px;
}

.model-numbers__fig--front .model-numbers__photo {
    aspect-ratio: 250 / 260;
}

.model-numbers__photo {
    position: relative;
    overflow: hidden;
}

.model-numbers__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-numbers__dim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--color-white);
    stroke-width: 2px;
}

.model-numbers__dim path {
    vector-effect: non-scaling-stroke;
}

.model-numbers__sizes {
    display: flex;
    gap: 32px;
}

.model-numbers__size {
    display: flex;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
}

.model-numbers__size dt {
    color: var(--color-green);
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
}

.model-numbers__size dd {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: #333;
}

.model-numbers__size-num {
    font-family: var(--font-num);
    font-size: 1.625rem; /* 26px */
    font-weight: 600;
    line-height: 39px;
}

.model-numbers__size-unit {
    font-size: 0.9375rem; /* 15px */
    line-height: 22px;
}

.model-numbers__size-text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.model-numbers__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 18px;
    border-top: 2px solid #bbcec5;
}

.model-numbers__item-label {
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    letter-spacing: 0.52px;
    line-height: 19px;
}

.model-numbers__item-title {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 30px;
}

.model-numbers__item-title > span {
    display: block;
}

.model-numbers__item-text {
    color: #6b736e;
    font-size: 1rem; /* 16px */
    line-height: 28px;
}

.model-numbers__turning {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.model-numbers__turning-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--color-green);
    font-family: var(--font-num);
    font-weight: 600;
}

.model-numbers__turning-num {
    font-size: 3.25rem; /* 52px */
    line-height: 50px;
}

.model-numbers__turning-unit {
    font-size: 1.625rem; /* 26px */
    line-height: 39px;
}

.model-numbers__turning-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #333;
    font-size: 0.875rem; /* 14px */
    line-height: 20px;
}

.model-numbers__turning-note > span + span {
    color: #6b736e;
}

@media (min-width: 1024px) {
    .model-numbers {
        padding: 34px 0 225px;
    }

    /* 見出し → 価格の行 → 大きさの行の間は 32px、大きさの行から平日・週末の写真までは 48px（Figma Page 1 894:8・1017:188） */
    .model-numbers__inner {
        gap: 32px;
        margin-bottom: 48px;
    }

    .model-numbers .section-head__eyebrow {
        letter-spacing: 1.08px;
    }

    .model-numbers .section-head__title {
        letter-spacing: 0;
        line-height: 56px;
    }

    /* Figma Page 1（894:59）: 見出しの中の間 10px、価格の欄は行の間 6px、納期目安は線の下 16px・間 4px */
    .model-numbers .section-head {
        gap: 10px;
    }

    .model-numbers__price,
    .model-numbers__prices {
        gap: 6px;
    }

    .model-numbers__lead-time {
        gap: 4px;
        padding-top: 16px;
    }

    .model-numbers__top {
        flex-direction: row;
        gap: 40px;
        order: 0;
    }

    .model-numbers__facts {
        flex-direction: row;
        gap: 32px;
        width: calc(640 / 1140 * 100%);
    }

    /* 大きな数字（価格・納期・定員）は行の高さを文字の大きさと同じにする（Figma Page 1 は leading-none） */
    .model-numbers__price-num {
        font-size: 4rem; /* 64px */
        line-height: 1;
    }

    .model-numbers__price-row + .model-numbers__price-row .model-numbers__price-num,
    .model-numbers__lead-num,
    .model-numbers__seat-num {
        line-height: 1;
    }

    .model-numbers__base {
        flex: 1;
        padding-left: 32px;
    }

    .model-numbers__base-name {
        font-size: 1.375rem; /* 22px */
    }

    .model-numbers__seats {
        flex: 1;
        flex-flow: row wrap;
        gap: 24px 48px;
        min-height: 187px;
        padding: 28px 40px;
    }

    .model-numbers__size-row {
        flex-direction: row;
        gap: 40px;
        order: 0;
    }

    .model-numbers__fig--side {
        width: calc(470 / 1140 * 100%);
    }

    .model-numbers__fig--front {
        width: calc(250 / 1140 * 100%);
    }

    .model-numbers__size-num {
        font-size: 1.875rem; /* 30px */
        line-height: 44px;
    }

    /* 右のひとこと（Figma Page 1）: 項目の間 14px・線の下 10px・項目の中 6px */
    .model-numbers__size-text {
        flex: 1;
        gap: 14px;
        min-width: 0;
    }

    .model-numbers__item {
        gap: 6px;
        padding-top: 10px;
    }

    .model-numbers__turning-num {
        font-size: 4rem; /* 64px */
        line-height: 60px;
    }
}

/* 平日と週末（PC だけ）。写真は幅の半分ずつ・高さ 480px（Figma Page 1）、間に丸い札（写真の上下中央） */
.model-week {
    position: relative;
}

.model-week__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-week__photo {
    position: relative;
    height: 480px;
    overflow: hidden;
    color: var(--color-white);
}

.model-week__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文字の下を暗くする（Figma「Scrim」: 下 320px を透明から黒 65% へ） */
.model-week__photo::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 320px;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.65));
    content: "";
}

.model-week__over {
    position: absolute;
    bottom: 44px;
    left: 48px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.model-week__day {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.model-week__day-ja {
    font-family: var(--font-serif);
    font-size: 4rem; /* 64px */
    font-weight: 600;
    line-height: 92px;
}

.model-week__day-en {
    font-family: var(--font-en);
    font-size: 0.875rem; /* 14px */
    font-weight: 800;
    letter-spacing: 2.24px;
}

.model-week__title {
    font-family: var(--font-serif);
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 36px;
}

.model-week__item {
    display: flex;
    flex-direction: column;
}

/*
 * 写真の下の説明（Figma Page 1「Captions（写真の下）」SUZY 1111:8 / BOUKEN 1124:35）: 濃い緑の帯に白い文字。
 * 2 つの説明の高さは長いほうにそろい（グリッドの行）、間に白 25% の縦線を引く。
 * Figma の左の白い「・」は 2026-11-12 Chatwork（赤嶺さん）で外した（文字は左 48px）
 */
.model-week__caption {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 24px 48px;
    color: var(--color-white);
    background-color: var(--color-green);
}

.model-week__item + .model-week__item .model-week__caption {
    border-left: 1px solid rgb(255 255 255 / 0.25);
}

.model-week__name {
    font-family: var(--font-sans);
    font-size: 1.1875rem; /* 19px */
    font-weight: 700;
    line-height: 26px;
}

.model-week__text {
    font-size: 1rem; /* 16px */
    line-height: 24px;
}

.model-week__badge {
    position: absolute;
    top: 174px;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    margin-left: -66px;
    color: var(--color-green);
    background-color: var(--color-pale);
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 1.45;
}

/*
 * 選ばれる理由（Figma「04.5 REASONS」PC 1271:1651 / SP 1271:5500）
 */
.model-reasons {
    position: relative;
    padding: 56px 20px 64px;
    background-color: var(--color-white);
}

.model-reasons__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.model-reasons__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.model-reasons__note {
    color: #333;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.52px;
    line-height: 19px;
}

.model-reasons__list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.model-reason {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 2px solid #bbcec5;
}

.model-reason__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 353 / 236;
    border-radius: 4px;
    object-fit: cover;
}

.model-reason__num {
    color: var(--color-accent);
    font-family: var(--font-num);
    font-size: 1.875rem; /* 30px */
    font-weight: 600;
    line-height: 24px;
}

.model-reason__title {
    color: var(--color-green);
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 30px;
}

.model-reason__title-line {
    display: block;
}

.model-reason__text {
    color: #333;
    font-size: 1rem; /* 16px */
    letter-spacing: 0.32px;
    line-height: 28px;
}

@media (min-width: 1024px) {
    .model-reasons {
        padding: 70px 70px 225px;
    }

    .model-reasons__inner {
        gap: 36px;
    }

    .model-reasons .section-head__eyebrow {
        letter-spacing: 1.08px;
    }

    .model-reasons .section-head__title {
        letter-spacing: 0;
        line-height: 56px;
    }

    .model-reasons__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
    }

    .model-reason__title {
        font-size: 1.3125rem; /* 21px */
        line-height: 32px;
    }
}

/* 山の色（次のセクションの背景）。SP と PC で次のセクションが違う */
.model-numbers {
    --mtn-sp: 52px;
    --mtn-color: var(--color-white);
}

.model-reasons {
    --mtn-sp: 56px;
    --mtn-color: var(--color-pale);
}

@media (min-width: 1024px) {
    .model-numbers {
        --mtn-color: var(--color-white);
        --mtn-flip: -1;
    }

    .model-reasons {
        --mtn-flip: -1;
    }
}

/* KV の価格の行: SP の Figma は（税込）まで 1 行（1271:5415）。375px で収まるよう間を詰める。320px など狭い画面は折り返す */
@media (min-width: 375px) and (max-width: 1023px) {
    .kv--logo .model-kv__price-row,
    .kv--logo .model-kv__prices {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .kv--logo .model-kv__price-row {
        gap: 0 2px;
    }

    .kv--logo .model-kv__prices {
        gap: 0 8px;
    }

    .kv--logo .model-kv__price {
        gap: 4px;
    }
}

/*
 * SUZY の SP の細部（Figma Page 1 の SP 439:14 との見比べ。2026-11-10 Chatwork「SUZY・BOUKEN の SP を再度反映」）。
 * BOUKEN の SP は Figma（1533:14）を見比べてから合わせる
 */
@media (max-width: 1023px) {
    /* KV の価格（Figma SP 439:21）: 2WD・4WD は #333 の太字、（税込）も #333。数字の行の高さ 59px、ベース車との間 7px（439:30） */
    .model-page--suzy .model-kv__price-drive,
    .model-page--bouken .model-kv__price-drive {
        color: #333;
        font-weight: 700;
    }

    .model-page--suzy .model-kv__tax,
    .model-page--bouken .model-kv__tax {
        color: #333;
    }

    .model-page--suzy .model-kv__price-num,
    .model-page--bouken .model-kv__price-num {
        line-height: 59px;
    }

    .model-page--suzy .kv--logo .model-kv__base,
    .model-page--bouken .kv--logo .model-kv__base {
        margin-top: 7px;
    }

    /* KV の下端（パンくずの上）まで 47px（Figma SP 439:31 は y695。ベース車の下端 648 から） */
    .model-page--suzy .kv--logo .kv__info,
    .model-page--bouken .kv--logo .kv__info {
        padding-bottom: 47px;
    }

    /* 旅と使い方（Figma SP 440:14）: ラベルの横の一言は明朝 16px・字間 0.64px（440:26・440:88。PC はゴシック） */
    .model-page--suzy .model-use__lead {
        font-family: var(--font-serif);
        font-weight: 600;
        letter-spacing: 0.04em;
    }

    /* 英字の札（WITH DOG など）は 13px・字間 1.3px・高さ 24px */
    .model-page--suzy .model-use__label-en {
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 1.3px;
        line-height: 16px;
    }

    /*
     * 1日の流れ: 見出しの行の高さ 20px（Figma は文字の上下を詰めた 20px。大きさは SP の h3 の 18px のまま）、英字 13px・字間 1.3px。
     * 最後のステップと来店チケットの間 20px
     */
    .model-page--suzy .model-step__title {
        line-height: 20px;
    }

    .model-page--suzy .model-step__en {
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 1.3px;
    }

    .model-page--suzy .model-use__ticket {
        margin-top: 20px;
    }

    /* 標準装備の札: 薄い緑の地・角丸なし・枠は緑の 40%（Figma SP 440:68） */
    .model-page--suzy .model-use__chip {
        background-color: var(--color-pale);
        border-radius: 0;
    }
}

/* SUZY の SP の選ばれる理由（Figma Page 1 の SP 856:9）: 上 80px（56px + 24px）・下 80px（山 56px を含む）、写真は角丸なし */
@media (max-width: 1023px) {
    .model-page--suzy .model-reasons,
    .model-page--bouken .model-reasons {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .model-page--suzy .model-reason__photo,
    .model-page--bouken .model-reason__photo {
        border-radius: 0;
    }

    /* 題 → 写真 → 説明の順（Figma SP 856:9・1533:389。2026-11-11 ユーザー指示「タイトル > 写真 > 文章の順に」） */
    .model-page--suzy .model-reason__title,
    .model-page--bouken .model-reason__title {
        order: -1;
    }
}

/*
 * SUZY の SP のページ内リンク（Figma Page 1 の SP 439:33。2026-11-10 夕方の更新）: ボタンは高さ 72px、項目名は 15px・行の高さ 20px で
 * 区切り（span）ごとに改行（「オーナー様の／車両紹介」「納期・／購入の流れ」「よくある／ご質問」）。上 10px・下 8px、矢印との間 4px。
 * BOUKEN の SP は今の 11〜12px のまま（BOUKEN の SP の Figma を見比べてから合わせる）
 */
@media (max-width: 1023px) {
    .model-page--suzy .model-nav__list,
    .model-page--bouken .model-nav__list {
        grid-auto-rows: 72px;
    }

    .model-page--suzy .model-nav__link,
    .model-page--bouken .model-nav__link {
        gap: 4px;
        padding: 10px 4px 8px;
        /* 375px 未満は画面の幅に合わせて小さくする（320px で「カスタマイズ」がボタンに入る 12.8px） */
        font-size: min(0.9375rem, 4vw); /* 〜15px */
        line-height: 20px;
    }

    .model-page--suzy .model-nav__part,
    .model-page--bouken .model-nav__part {
        display: block;
    }

    /* 下向きの矢印（Figma: 幅 11.25px・線 2.5px。枠を含めた 9.5px の四角を 135° 回して幅 13px ほどの山形にする） */
    .model-page--suzy .model-nav__link::after,
    .model-page--bouken .model-nav__link::after {
        width: 9.5px;
        height: 9.5px;
        margin-top: -4px;
        border-width: 2.5px 2.5px 0 0;
    }
}

/*
 * 数字で見るSUZY の SP（Figma Page 1 の SP 963:8）: 見出し → 価格・ベース車・納期 → 定員 → 大きさ → 平日と週末の順（BOUKEN の SP は大きさが先のまま）。
 * 平日と週末は PC と同じ HTML を、SP だけグリッドで「写真の上に札、写真の下に 36px 重ねた枠付きのカード」に組み替える
 */
@media (max-width: 1023px) {
    .model-page--suzy .model-numbers__top,
    .model-page--bouken .model-numbers__top,
    .model-page--suzy .model-numbers__size-row,
    .model-page--bouken .model-numbers__size-row {
        order: 0;
    }

    .model-page--suzy .model-numbers__facts,
    .model-page--bouken .model-numbers__facts {
        gap: 20px;
    }

    /* 価格（963:65）: 2WD・4WD を横に並べて同じ大きさ。2WD 15px・数字 42px・万円〜 15px で間 5px、2 つの間 18px */
    .model-page--suzy .model-numbers__prices,
    .model-page--bouken .model-numbers__prices {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0 18px;
    }

    .model-page--suzy .model-numbers__price-row,
    .model-page--bouken .model-numbers__price-row {
        gap: 5px;
    }

    .model-page--suzy .model-numbers__drive,
    .model-page--bouken .model-numbers__drive {
        font-size: 0.9375rem; /* 15px */
        line-height: 22px;
    }

    .model-page--suzy .model-numbers__price-num,
    .model-page--bouken .model-numbers__price-num,
    .model-page--suzy .model-numbers__price-row + .model-numbers__price-row .model-numbers__price-num,
    .model-page--bouken .model-numbers__price-row + .model-numbers__price-row .model-numbers__price-num {
        font-size: 2.625rem; /* 42px */
        line-height: 62px;
    }

    .model-page--suzy .model-numbers__price-unit,
    .model-page--bouken .model-numbers__price-unit,
    .model-page--suzy .model-numbers__price-row + .model-numbers__price-row .model-numbers__price-unit,
    .model-page--bouken .model-numbers__price-row + .model-numbers__price-row .model-numbers__price-unit {
        font-size: 0.9375rem; /* 15px */
        line-height: 22px;
    }

    /* ベース車（963:76）: 行の間 6px。納期目安は線の下 14px・間 4px、「6」の行の高さ 44px */
    .model-page--suzy .model-numbers__base,
    .model-page--bouken .model-numbers__base {
        gap: 6px;
    }

    .model-page--suzy .model-numbers__lead-time,
    .model-page--bouken .model-numbers__lead-time {
        gap: 4px;
        padding-top: 14px;
    }

    .model-page--suzy .model-numbers__lead-num,
    .model-page--bouken .model-numbers__lead-num {
        line-height: 44px;
    }

    /* 定員（963:86）: 乗るとき・泊まるときを横に並べる（間 20px。320px など入らない画面は折り返す）。アイコンは高さ 30px・間 4px */
    .model-page--suzy .model-numbers__seats,
    .model-page--bouken .model-numbers__seats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px 20px;
    }

    .model-page--suzy .model-numbers__icons,
    .model-page--bouken .model-numbers__icons {
        gap: 4px;
    }

    .model-page--suzy .model-numbers__icons img,
    .model-page--bouken .model-numbers__icons img {
        width: auto;
        height: 30px;
    }

    /* 平日と週末（1538:143） */
    .model-week {
        width: min(100% - 40px, var(--content-width));
        margin: 40px auto 0;
    }

    .model-week__head {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 24px;
    }

    .model-week__eyebrow {
        color: var(--color-accent);
        font-family: var(--font-serif);
        font-size: 0.8125rem; /* 13px */
        font-weight: 600;
        letter-spacing: 1.56px;
        line-height: 1.5;
    }

    .model-week__lead {
        color: #333;
        font-family: var(--font-serif);
        font-size: 1.375rem; /* 22px */
        font-weight: 600;
        line-height: 1.55;
    }

    .model-week__lead > span {
        display: block;
    }

    /* 見出しの下の線（緑 30px + 薄い緑 30px） */
    .model-week__head::after {
        width: 60px;
        height: 4px;
        background: linear-gradient(to right, var(--color-green) 50%, #bfd3c7 50%);
        content: "";
    }

    .model-week__list {
        display: flex;
        flex-direction: column;
        gap: 36px;
    }

    /* 平日はカードが左（幅 303px = 全体 - 32px）で緑、週末は右でオレンジ */
    .model-week__item {
        --week-color: var(--color-green);
        display: grid;
        grid-template-columns: minmax(0, 1fr) 32px;
    }

    .model-week__item--weekend {
        --week-color: var(--color-accent);
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .model-week__photo,
    .model-week__over {
        display: contents;
    }

    .model-week__photo::after,
    .model-week__badge {
        display: none;
    }

    .model-week__photo img {
        grid-row: 1;
        grid-column: 1 / -1;
        height: auto;
        aspect-ratio: 335 / 251;
        margin-bottom: -36px;
    }

    /* 写真の角の札: 英字（10px）の下に曜日（18px） */
    .model-week__day {
        z-index: 2;
        grid-row: 1;
        grid-column: 1 / -1;
        flex-direction: column-reverse;
        align-items: flex-start;
        align-self: start;
        justify-self: end;
        gap: 0;
        margin: 12px 12px 0;
        padding: 6px 12px;
        color: var(--color-white);
        background-color: var(--week-color);
    }

    .model-week__item--weekend .model-week__day {
        justify-self: start;
    }

    .model-week__day-ja {
        font-family: var(--font-sans);
        font-size: 1.125rem; /* 18px */
        font-weight: 700;
        line-height: 1.3;
    }

    .model-week__day-en {
        font-size: 0.625rem; /* 10px */
        font-weight: 600;
        letter-spacing: 1.6px;
        line-height: 1.4;
    }

    /* カードの地と枠（2px）。写真の下端に 36px 重ねる */
    .model-week__item::before {
        z-index: 1;
        grid-row: 2 / 4;
        grid-column: 1;
        background-color: var(--color-white);
        border: 2px solid var(--week-color);
        content: "";
    }

    .model-week__item--weekend::before,
    .model-week__item--weekend .model-week__title,
    .model-week__item--weekend .model-week__caption {
        grid-column: 2;
    }

    /* カードの中は左右 16px（+ 枠 2px）、上 16px・下 6px */
    .model-week__title {
        z-index: 2;
        grid-row: 2;
        grid-column: 1;
        margin: 18px 18px 0;
        color: #333;
        font-size: 1.25rem; /* 20px */
        line-height: 1.6;
    }

    .model-week__title > span,
    .model-week__name > span {
        display: block;
    }

    /* 線の下に、アイコン（40px）と小見出し・文 */
    .model-week__caption {
        z-index: 2;
        display: grid;
        grid-row: 3;
        grid-column: 1;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 4px 12px;
        margin: 0 18px 8px;
        padding: 14px 0;
        color: #333;
        background-color: transparent;
        border-top: 1px solid #d3dfd7;
    }

    .model-week__item + .model-week__item .model-week__caption {
        border-left: 0;
    }

    .model-week__icon {
        display: block;
        grid-row: 1 / 3;
        width: 40px;
        height: 40px;
    }

    .model-week__name {
        grid-column: 2;
        color: var(--week-color);
        font-size: 1.125rem; /* 18px */
        line-height: 1.5;
    }

    .model-week__text {
        grid-column: 2;
        font-size: 1.0625rem; /* 17px */
        line-height: 1.9;
    }
}

/* SP のカードのアイコンは PC では出さない（PC は「・」） */
@media (min-width: 1024px) {
    .model-week__icon {
        display: none;
    }
}

/*
 * BOUKEN の SP の上半分（Figma Page 1 の SP 1533:14。KV・ページ内リンク・選ばれる理由・数字で見るは上の SUZY と共通の指定）。
 * ここは BOUKEN だけの違い: 山の向き、BOUKENについての文の改行、数字で見るの小見出し、平日と週末の間
 */
@media (max-width: 1023px) {
    /* 山の向き（Figma SP 1533:65 は頂きが右、1533:108・1533:388 は頂きが左） */
    .model-page--bouken .model-about {
        --mtn-flip: 1;
    }

    .model-page--bouken .model-style,
    .model-page--bouken .model-reasons {
        --mtn-flip: -1;
    }

    /* BOUKENについて: 4 つの文の頭で改行する（Figma SP 1533:71。PC と同じ） */
    .model-page--bouken .model-about__body > span {
        display: block;
    }

    /* 数字で見る: 小見出し（h3）は 18px・行の高さ 30px（Figma SP 1533:455） */
    .model-page--bouken .model-numbers__item-title {
        font-size: 1.125rem; /* 18px */
        line-height: 30px;
    }

    /*
     * 平日と週末（Figma SP 1540:60）: 見出しは無く、2 枚の間は 41px。
     * 「同じ1台で」の札は出さない（2026-11-11 ユーザー指示「同じ一台での要素をとって」。Figma SP の 1540:71 も空。札は SP 共通の指定で非表示）
     */
    .model-page--bouken .model-week__list {
        gap: 41px;
    }
}

/*
 * KV の価格の行の間（Figma SP 439:21）: 中は 6px、2WD と 4WD の間 18px。
 * この間だと行の幅が 357px になり、Figma でも 375px の画面の右端を 4px はみ出している。
 * 左右の余白 20px に収まる 400px 以上だけ Figma の間にし、それより狭い画面は上の詰めた間のままにする
 */
@media (min-width: 400px) and (max-width: 1023px) {
    .model-page--suzy .kv--logo .model-kv__price-row,
    .model-page--bouken .kv--logo .model-kv__price-row,
    .model-page--suzy .kv--logo .model-kv__price,
    .model-page--bouken .kv--logo .model-kv__price {
        gap: 6px;
    }

    .model-page--suzy .kv--logo .model-kv__prices,
    .model-page--bouken .kv--logo .model-kv__prices {
        gap: 0 18px;
    }
}

/* ============================================================
 * BOUKEN（Figma「BOUKEN｜PCデザイン（1280）」1271:3611）。形は SUZY と同じ部品で、余白・山の高さと向き・文字の大きさの違いをここに書く。
 * SP のデザインは無いので、SP は SUZY の SP のルールのまま（ここでは 1 行に入らない所だけ変える）
 * ============================================================ */

/* KV: ロゴは幅 300px（SUZY 350px）。キャッチは 1 行 18 文字なので、SP は 2 行に収まる大きさにする */
.model-page--bouken .kv__logo {
    width: 154px;
}

.model-page--bouken .kv__catch {
    font-size: clamp(0.875rem, 4.6vw, 1.125rem); /* 14〜18px */
}

@media (min-width: 1024px) {
    /* PC の山は Figma の BOUKEN の形（SUZY より横に広くなだらか。1280×110 を各セクションの高さに伸ばす） */
    .model-page--bouken {
        --mtn-shape: url("../img/model/deco-mountain-bouken.svg");
    }

    .model-page--bouken .kv--logo {
        height: 605px;
    }

    .model-page--bouken .kv--logo .kv__band {
        height: 445px;
        padding-top: 32px;
    }

    .model-page--bouken .kv__logo {
        width: 300px;
    }

    .model-page--bouken .kv--logo .kv__catch {
        padding-top: 4px;
        font-size: 1.375rem; /* 22px */
    }

    .model-page--bouken .kv--logo .kv__media {
        height: 605px;
    }

    /* 下の余白・山: 〇〇について */
    .model-page--bouken .model-about {
        --mtn-flip: 1;
        --mtn-pc: 110;
        padding: 148px 70px 200px;
    }

    .model-page--bouken .model-about__photo {
        top: 200px;
    }

    /* BOUKEN の余白は Figma Page 1（2026-11-10）: 上 70px・下は山の高さ + 60px */
    .model-page--bouken .model-style {
        --mtn-flip: -1;
        --mtn-pc: 99;
        padding: 70px 70px 159px;
    }

    .model-page--bouken .model-reasons {
        --mtn-flip: 1;
        --mtn-pc: 110;
        /* 下の余白は Figma Page 1（1002:14）で 200 → 170px */
        padding: 70px 70px 170px;
    }

    .model-page--bouken .model-numbers {
        --mtn-pc: 110;
        padding: 34px 0 200px;
    }

    .model-page--bouken .model-numbers__top {
        align-items: flex-start;
    }

    /* 注記が長いので価格の欄の幅を固定する（Figma: 214px） */
    .model-page--bouken .model-numbers__price {
        flex-shrink: 0;
        width: 214px;
    }
}

/*
 * 旅と使い方（シーンの形。Figma「05 STYLE」1271:3696・template-parts/model/style-scenes.php）。
 * PC は全幅のシーンと、写真と文を左右交互に並べた 1 行のシーン（下の @media）。シーン名は PC は写真の左上の内側、SP は写真の左下に少しはみ出して重ねる。
 * SP は 1 列で、写真は SUZY の SP と同じ 335×200
 */
.model-scenes__intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.model-scenes__lead {
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 1.8;
}

.model-scenes__index {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 追従するシーンへのリンクは BOUKEN の SP だけ（下の BOUKEN の SP の指定） */
.model-scenes__float {
    display: none;
}

.model-scenes__index-link {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    color: var(--color-green);
    background-color: var(--color-pale);
    border: 1px solid var(--color-green);
    /* 角は丸めない（2026-11-10 Chatwork「角を四角に」。Figma は角丸 3px） */
    font-size: 1rem; /* 16px */
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.model-scenes__index-en {
    color: var(--color-accent);
    font-family: var(--font-en);
    font-size: 0.8125rem; /* 13px */
    font-weight: 800;
    letter-spacing: 1.82px;
}

@media (hover: hover) {
    .model-scenes__index-link:hover {
        opacity: 0.85;
    }
}

.model-scenes {
    display: grid;
    gap: 48px;
}

.model-scene {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.model-scene__head {
    position: relative;
    padding-bottom: 32px;
}

.model-scene__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 200;
    object-fit: cover;
}

.model-scene__label {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px 12px 18px;
    color: var(--color-white);
    background-color: var(--color-green);
    font-family: var(--font-serif);
    font-size: 1.75rem; /* 28px */
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 40px;
}

.model-scene__label-en {
    color: #f2d3bf;
    font-family: var(--font-en);
    font-size: 0.8125rem; /* 13px */
    font-weight: 800;
    letter-spacing: 2.08px;
}

.model-scene__intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 語の途中で折り返さない（句読点と <wbr> の切れ目だけ。見出しと同じ）。原稿の 1 要素ごとに改行する */
.model-scene__copy {
    padding-left: 18px;
    color: #333;
    border-left: 4px solid var(--color-accent);
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 32px;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.model-scene__copy > span {
    display: block;
}

.model-scene__text {
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 29px;
}

.model-scene__facts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.model-scene__fact {
    display: flex;
    flex-direction: column;
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 29px;
}

.model-scene__fact dt {
    flex-shrink: 0;
    color: var(--color-green);
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    letter-spacing: 0.84px;
}

.model-scene__why {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.model-scene__why li {
    position: relative;
    padding-left: 17px;
}

.model-scene__why li::before {
    position: absolute;
    top: 11px;
    left: 0;
    width: 7px;
    height: 7px;
    background-color: var(--color-accent);
    content: "";
}

.model-scene__why strong {
    font-weight: 700;
}

.model-scenes__more {
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 1024px) {
    .model-scenes__intro {
        gap: 28px;
    }

    .model-scenes__lead {
        font-size: 1.125rem; /* 18px */
        line-height: 36px;
    }

    /*
     * Figma Page 1（2026-11-10。BOUKEN 608:29）: 全幅のシーン（キャンプ・仕事）と、1 行に 1 シーンずつのシーン（登山・釣り・スキー・ゴルフ）を縦に並べる。
     * 1 行のシーンは写真（546×400）と文（コピー・説明・積むもの…）を 52px あけて横に並べ、登山・スキーは写真が左、釣り・ゴルフは写真が右。
     * シーンの間は 96px、続けて並ぶ 1 行のシーンの間（登山→釣り・スキー→ゴルフ）は 80px
     */
    .model-scenes {
        gap: 96px;
    }

    .model-scene:not(.model-scene--wide) {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: calc(546 / 1140 * 100%) minmax(0, 1fr);
        gap: 24px 52px;
        align-items: start;
    }

    .model-scene:not(.model-scene--wide) .model-scene__head {
        grid-row: 1 / span 2;
        grid-column: 1;
    }

    .model-scene:not(.model-scene--wide) .model-scene__intro,
    .model-scene:not(.model-scene--wide) .model-scene__facts {
        grid-column: 2;
    }

    /* 1 行のシーンが続くとき、2 つ目（釣り・ゴルフ）は写真を右にする */
    .model-scene:not(.model-scene--wide) + .model-scene:not(.model-scene--wide) {
        grid-template-columns: minmax(0, 1fr) calc(546 / 1140 * 100%);
        margin-top: -16px;
    }

    .model-scene:not(.model-scene--wide) + .model-scene:not(.model-scene--wide) .model-scene__head {
        grid-column: 2;
    }

    .model-scene:not(.model-scene--wide) + .model-scene:not(.model-scene--wide) .model-scene__intro,
    .model-scene:not(.model-scene--wide) + .model-scene:not(.model-scene--wide) .model-scene__facts {
        grid-column: 1;
    }

    .model-scene__photo {
        aspect-ratio: 546 / 400;
    }

    .model-scene--wide .model-scene__photo {
        aspect-ratio: 1140 / 390;
    }

    /* シーン名の札は写真の左上の内側（上・左 10px）。全幅のシーンも同じ大きさ */
    .model-scene__head {
        padding-bottom: 0;
    }

    .model-scene__label {
        top: 10px;
        bottom: auto;
        left: 10px;
    }

    .model-scene__copy {
        font-size: 1.5rem; /* 24px */
        line-height: 40px;
    }

    .model-scene__fact {
        flex-direction: row;
        gap: 12px;
    }

    .model-scene__fact dt {
        width: 92px;
    }

    .model-scene__fact dd {
        flex: 1;
        min-width: 0;
    }
}

/*
 * BOUKEN の SP の旅と使い方（Figma 1533:108。シーンへのリンク 1533:115、シーン 1533:137・155・173・191・209・227、リンク 1533:245）。
 * 「BOUKEN の SP は Figma と全く一緒に」（ユーザーの指示）なので、上の旅と使い方（シーンの形）の SP の形をここで上書きする。PC（1024px 以上）は上のまま。
 * 説明文の下にシーンへのリンク（3 列 × 2 段の枠）。シーンの中は コピー → 写真（左下にシーン名の札を重ねる）→ 説明 → 積むもの・寝かた・効く仕様の枠 を 14px 間隔で縦に並べる
 * （2026-11-11 ユーザー指示「キャンプなどの文字は写真の上ではなく写真の中に」「カテゴリー要素の追加」）。
 * HTML は 写真・シーン名 → コピー・説明 の順なので、コピーと説明の箱を解いて（display: contents）、コピーだけ order で先頭に出す
 */
@media (max-width: 1023px) {
    /* 下の余白は 82px（境目の山 58px を含む。Figma 1533:108） */
    .model-page--bouken .model-style {
        padding-bottom: 82px;
    }

    /* 説明文 → シーンへのリンク → シーンの間は 48px（Figma: 説明 261〜348・リンク 396〜518・シーン 566〜） */
    .model-page--bouken .model-scenes__intro {
        gap: 48px;
    }

    /* シーンへのリンク（1533:115）: 3 列・間 8px。白地・緑の線 1px・上下 8px で、英字（11px）の下に和文（16px の太字）を真ん中に */
    .model-page--bouken .model-scenes__index {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .model-page--bouken .model-scenes__index-link {
        flex-direction: column;
        justify-content: center;
        gap: 0;
        height: auto;
        padding: 8px 4px;
        background-color: var(--color-white);
        line-height: 1.5;
        text-align: center;
    }

    /* Figma は Montserrat SemiBold。読み込んでいるのは 800 だけ（functions.php の hirabo-fonts）なので、今は 800 で表示される */
    .model-page--bouken .model-scenes__index-en {
        font-size: 0.6875rem; /* 11px */
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.4;
    }

    /*
     * 追従するシーンへのリンク（main.js が is-visible を付ける）。上のリンクが目次の帯の裏まで上がってから、シーンの最後まで、
     * 目次の帯のすぐ下に、目次の帯と同じ幅（画面の幅いっぱい）・高さ（56px）で 6 つを 1 列に並べる
     * （2026-11-11 Chatwork「スクロールから見切れる前までは Figma どおり。過ぎた後にそのデザインで追従」「目次と同じ幅・1 行分の高さに」）。
     * 白地に、区切りと下端は薄い緑の線。英字（10px・オレンジ）の下に和文（緑の太字。320px でも 1 行に入るよう画面の幅に合わせて 13px まで）。
     * 出し方は目次の帯（components.css の .scroll-toc）と同じ。目次の帯（z-index: 95）の目次を開いたときは、その後ろに隠れる
     */
    .model-page--bouken .model-scenes__float {
        position: fixed;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height) + var(--scroll-toc-height));
        right: 0;
        left: 0;
        z-index: 94;
        display: block;
        background-color: var(--color-white);
        border-top: 1px solid rgb(47 107 86 / 0.2);
        border-bottom: 1px solid rgb(47 107 86 / 0.2);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .model-page--bouken .model-scenes__float.is-visible {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }

    .model-page--bouken .model-scenes__float-list {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .model-page--bouken .model-scenes__float-list > li + li {
        border-left: 1px solid rgb(47 107 86 / 0.2);
    }

    .model-page--bouken .model-scenes__float-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: calc(var(--scroll-toc-height) - 2px);
        padding: 0 2px;
        color: var(--color-green);
        font-size: min(0.8125rem, 3.6vw); /* 〜13px */
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }

    .model-page--bouken .model-scenes__float-en {
        color: var(--color-accent);
        font-family: var(--font-en);
        font-size: 0.625rem; /* 10px */
        font-weight: 600;
        line-height: 1.2;
    }

    /* シーンへ飛んだとき、シーンの上端が追従するリンク（56px）の 16px 下に来るようにする（ヘッダーの分は base.css の scroll-padding-top） */
    .model-page--bouken .model-scene {
        scroll-margin-top: calc(var(--scroll-toc-height) * 2 + 16px);
    }

    @media (prefers-reduced-motion: reduce) {
        .model-page--bouken .model-scenes__float,
        .model-page--bouken .model-scenes__float.is-visible {
            transform: none;
            transition: none;
        }
    }

    .model-page--bouken .model-scene {
        gap: 14px;
    }

    .model-page--bouken .model-scene__intro {
        display: contents;
    }

    /*
     * コピー（1533:142）: 左にオレンジの線 4px・線との間 14px・字間 0。
     * 原稿の 1 要素ごとに改行し、要素の中は句読点と <wbr> の切れ目でだけ折り返す（上の共通の指定。Figma は語の途中で折り返しているが、
     * 2026-11-11 のユーザー指示「改行位置を指定」に合わせる）
     */
    .model-page--bouken .model-scene__copy {
        order: -1;
        padding-left: 14px;
        letter-spacing: 0;
    }

    /* 写真は 335×224（1533:141）。写真の下の 10px は説明との間（1578:8 の下の余白） */
    .model-page--bouken .model-scene__head {
        padding-bottom: 10px;
    }

    .model-page--bouken .model-scene__photo {
        aspect-ratio: 335 / 224;
    }

    /*
     * シーン名の札（1582:8）: 写真の左下の内側に重ねる。緑の地・上下 8px・左 14px・右 18px。
     * 英字 11px（#f2d3bf・字間 1.76px）と、10px あけて和文（明朝 20px・白・字間 0.4px・行の高さ 1.4）。
     * シーン名は h3 だが、SP の h3 を 18px にそろえる決まり（components.css）より Figma の 20px を優先する（「Figma と全く一緒に」）
     */
    .model-page--bouken .model-scene__label {
        bottom: 10px;
        gap: 10px;
        padding: 8px 18px 8px 14px;
        font-size: 1.25rem; /* 20px */
        letter-spacing: 0.4px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .model-page--bouken .model-scene__label-en {
        font-size: 0.6875rem; /* 11px */
        letter-spacing: 1.76px;
        line-height: normal;
    }

    /* 積むもの・寝かた・効く仕様の枠（1533:144）: 地 #f0f4ee・内側 18px・行の間 14px */
    .model-page--bouken .model-scene__facts {
        gap: 14px;
        padding: 18px;
        background-color: #f0f4ee;
    }

    /* 項目名 14px・行 21px、4px あけて中身 16px・行 27px */
    .model-page--bouken .model-scene__fact {
        gap: 4px;
        line-height: 27px;
    }

    .model-page--bouken .model-scene__fact dt {
        letter-spacing: 0;
        line-height: 21px;
    }

    /* 効く仕様（1538:14）: 行 29px・行の間 8px。四角（7px）と文の間 8px */
    .model-page--bouken .model-scene__why {
        gap: 8px;
        line-height: 29px;
    }

    .model-page--bouken .model-scene__why li {
        padding-left: 15px;
    }

    /* 装備・オプションを詳しく見る（1533:245）: 左寄せ・16px 太字・下線。矢印は Figma どおり文字の「›」で、下線も矢印まで引く */
    .model-page--bouken .model-scenes__more {
        justify-content: flex-start;
    }

    .model-page--bouken .model-scenes__more .model-use__more {
        display: block;
        font-size: 1rem; /* 16px */
        font-weight: 700;
        line-height: 1.5;
        text-decoration: underline;
        text-decoration-thickness: from-font;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

    .model-page--bouken .model-scenes__more .model-use__more::after {
        width: auto;
        height: auto;
        margin: 0;
        border: 0;
        transform: none;
        content: " \203A";
    }
}