@charset "UTF-8";

/*
 * 車種のページ（page-model.php）: 価格・仕様／納期・購入の流れ／オーナー様の動画／品質／よくあるご質問／ほかの車種
 * Figma「SUZY｜PCデザイン（1280）」92:2 の 09〜14、「SUZY｜SPデザイン（375）」439:14 の 09〜14。
 * top.css の後に読み込む（functions.php）。TOP と共通の部品（オーナー様の動画・品質）の調整は .model-page の中だけに当てる。
 *
 * 背景色の並び（Figma）: 価格（白）→ 山 → 納期（薄い緑）→ オーナー（薄い緑）→ 山 → 品質（白）→ よくあるご質問（白）→ 山 → ほかの車種（薄い緑）
 * 境目の山は TOP のラインナップの境目の山（top.css .lineup-model__divider。1280×114）と同じ形を型抜き（mask）にし、色は次のセクションの背景色にする。
 * SP の Figma には山が無いが、先方指示で SP も PC と同じく山を入れる（2026-10-20。下の余白は TOP の SP と同じ 88px）
 */

/* 中身の幅（1140px）。左右の余白は SP 20px / PC 70px */
.model-price__inner,
.model-delivery__inner,
.model-faq__inner,
.model-lineup__inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-width);
    margin: 0 auto;
}

/* 白い枠のボタン（Figma「Button / よくあるご質問をすべて見る」: 白地・緑の線 SP 1px / PC 1.5px）。形と矢印は共通の .button */
/* ------------------------------------------------------------
 * 価格・仕様（Figma PC 09 PRICE 96:215 / SP 443:14）
 * ------------------------------------------------------------ */
.model-price {
    --divider-color: var(--color-pale);
    position: relative;
    overflow: hidden;
    padding: 56px 20px 88px;
    background-color: var(--color-white);
}

.model-price__head {
    margin-bottom: 32px;
}

/*
 * 仕様の表。SP も PC と同じ 3 列（項目名 108px + 2WD・4WD）。PC は外枠が無く、行・見出しの下と 2WD・4WD の間に緑 20% の線（SP の線と地の色は下の @media）
 */
.model-spec {
    width: 100%;
    color: #333;
    border-collapse: collapse;
}

.model-spec tbody tr {
    border-bottom: 1px solid rgb(47 107 86 / 0.2);
}

.model-spec thead th,
.model-spec thead td {
    padding: 12px 10px;
    color: var(--color-white);
    background-color: var(--color-green);
    border-bottom: 1px solid rgb(47 107 86 / 0.2);
    font-family: var(--font-en);
    font-size: 0.8125rem; /* 13px */
    font-weight: 800;
    line-height: normal;
    text-align: center;
}

/* 項目名の列（Figma SP: 375px 幅で 108px。320px 幅では同じ割合で狭める） */
.model-spec thead td {
    width: 32.24%;
}

.model-spec tbody th {
    padding: 12px 10px;
    background-color: #e9efe9;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    line-height: 18px;
    text-align: left;
    vertical-align: middle;
}

.model-spec td {
    padding: 12px 10px;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    line-height: 20px;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

.model-spec td[data-drive] {
    text-align: center;
}

.model-spec td[data-drive] + td[data-drive] {
    border-left: 1px solid rgb(47 107 86 / 0.2);
}

.model-spec__price-row td {
    padding-right: 4px;
    padding-left: 4px;
    color: var(--color-green);
    white-space: nowrap;
}

/* SP は Figma の SP（443:20）どおり、外枠と行の線を薄い緑（#bbcec5）、値のマスを白にする（2WD・4WD の間に線は無い） */
@media (max-width: 1023px) {
    .model-spec {
        border: 1px solid #bbcec5;
    }

    .model-spec tbody tr,
    .model-spec thead th,
    .model-spec thead td {
        border-bottom-color: #bbcec5;
    }

    .model-spec td {
        background-color: var(--color-white);
    }

    .model-spec td[data-drive] + td[data-drive] {
        border-left: 0;
    }
}

/* 数字は Oswald 17px（Figma の SP）。「円」は PC と同じく本文の書体（大きさは数字との比を PC に近づける） */
.model-spec__price {
    font-family: var(--font-num);
    font-size: 1.0625rem; /* 17px */
    font-weight: 600;
    line-height: normal;
}

.model-spec__yen {
    margin-left: 2px;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
}

/* 価格が未定の車種の「確認中」（今は無い。原稿の price_pending）。Figma PC 418:650 は本文の書体 22px。SP はデザインが無いので、SP の数字（17px）より少し小さく */
.model-spec__price-pending {
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    line-height: normal;
}

/* 注記の文字は共通の .note（components.css。SP 13px / 22px・PC 14px / 24px・#666） */
.model-price__note {
    margin-top: 32px;
    text-align: right;
}

/* ------------------------------------------------------------
 * 納期・購入の流れ（Figma PC 10 DELIVERY 97:2 / SP 443:93）
 * ------------------------------------------------------------ */
.model-delivery {
    padding: 56px 20px 64px;
    background-color: var(--color-pale);
}

/* SP は見出し・納期の目安・注記を縦に並べる（見出しは components.css の共通ルールで左寄せ） */
.model-delivery__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
}

/* 納期の目安（白地・緑の枠 2px。SP は横幅いっぱいで中身を中央に） */
.model-delivery__lead-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 20px;
    background-color: var(--color-white);
    border: 2px solid var(--color-green);
    white-space: nowrap;
}

.model-delivery__lead-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: normal;
}

.model-delivery__lead-caption {
    color: var(--color-accent);
    font-size: 0.6875rem; /* 11px */
    font-weight: 500;
}

.model-delivery__lead-from {
    color: #333;
    font-family: var(--font-serif);
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
    letter-spacing: 0.02em;
}

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

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

/* 色は PC と同じ（数字と同じ緑） */
.model-delivery__lead-unit {
    font-family: var(--font-serif);
    font-size: 0.9375rem; /* 15px */
    font-weight: 600;
}

/* 納期が未定の車種の「確認中」（今は無い。原稿の delivery_pending）。Figma PC 418:727 は本文の書体 32px（SUZY の数字 56px との比で SP は 24px） */
.model-delivery__lead-pending {
    color: var(--color-green);
    font-size: 1.5rem; /* 24px */
    font-weight: 500;
    line-height: normal;
}

/* 注記の文字は共通の .note（components.css）。SP は左寄せ（2026-11-10 Chatwork「SP の文章は基本的に左寄せ」）、PC は右寄せ（下の @media） */
.model-delivery__note {
    margin-top: 28px;
}

/*
 * ステップ。SP は縦に並べ、丸の番号の下から次のステップまで縦の線でつなぐ。PC は横に 6 列で、丸の右から横の線
 */
.model-flow {
    margin-top: 28px;
}

.model-flow-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 52px;
    padding: 12px 0 24px 68px;
}

.model-flow-step__marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 52px;
}

/* 次のステップへの線（最後のステップには付けない） */
.model-flow-step:not(:last-child) .model-flow-step__marker::after {
    flex: 1;
    width: 1px;
    background-color: rgb(47 107 86 / 0.3);
    content: "";
}

.model-flow-step__num {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--color-white);
    background-color: var(--color-green);
    border-radius: 50%;
    font-family: var(--font-num);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 22px;
}

.model-flow-step--accent .model-flow-step__num {
    background-color: var(--color-accent);
}

.model-flow-step__num-label {
    font-family: var(--font-en);
    font-size: 0.4375rem; /* 7px */
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 10px;
}

.model-flow-step__title {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.0625rem; /* 17px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: normal;
}

.model-flow-step__text {
    color: #333;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    line-height: 22px;
}

/* 見出しは文節の途中で折り返さない（Figma の改行位置）。説明文は SP では幅いっぱいで折り返す（Figma SP） */
.model-flow-step__title > span {
    display: inline-block;
}

/*
 * アフターサポート（Figma Page 1「Delivery / アフター（案3）」SUZY 1433:8 / BOUKEN 1433:22。template-parts/model/delivery.php）。
 * 濃い緑の帯。PC は左に写真（420×240）・右に文字。SP は写真を上に置く
 */
.model-after {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    color: var(--color-white);
    background-color: var(--color-green);
}

/* 写真は「平野オートボディーについて」へのリンクで包む（ホバーで拡大。拡大した分はリンクの枠で切る） */
.model-after__photo-link {
    display: block;
    overflow: hidden;
}

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

/* SP: Figma SP 1433:36（余白 24px 20px・間 4px） */
.model-after__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 24px 20px;
}

.model-after__eyebrow {
    color: var(--color-accent-light);
    font-family: var(--font-en);
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    letter-spacing: 0.2em;
}

.model-after__title {
    font-family: var(--font-serif);
    /* Figma SP は 21px で「クルマのことはお任せください。」（15 文字）が 1 行。狭い画面では右の余白までに収まる大きさに縮める */
    font-size: min(1.3125rem, (100vw - 60px) / 15);
    font-weight: 600;
    line-height: 1.5;
}

/* SP は「納車後も、」のあとで改行し、2 行目は折り返さない。PC は 1 行 */
.model-after__title > span {
    display: block;
    white-space: nowrap;
}

.model-after__text {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.7;
}

/* 文節（span）の切れ目で折り返す。PC は「が、」のあとの改行（br.model-pc-only）で 2 行にする */
.model-after__text > span {
    display: inline-block;
}

/* 札（Figma「Chip」: 白 60% の枠・余白 4px 14px・太字 16px）。SP は説明から 4 + 8px・間 8px、PC は 6 + 10px・間 10px */
.model-after__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.model-after__tags > li {
    padding: 4px 14px;
    border: 1px solid rgb(255 255 255 / 0.6);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 1.5;
}

/*
 * 「平野オートボディーについて詳しく見る ›」（Figma Page 1 1526:14: 白の太字 16px・下線、右に矢印。札の下 6 + 18px、行の高さは矢印の 26px）。
 * SP は説明・札の間隔（4px）に合わせて札の下 4 + 18px。文字（18 字）と矢印が帯の文字の幅（画面 - 80px）に 1 行で収まるよう、狭い画面は 16px より小さくする
 */
.model-after__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: var(--color-white);
    font-size: min(1rem, (100vw - 97px) / 18); /* 375px で 15.4px */
    white-space: nowrap;
    font-weight: 700;
    line-height: 26px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.model-after__link::after {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    content: "";
}

@media (hover: hover) {
    .model-after__link:hover {
        text-decoration: none;
    }
}

/* ------------------------------------------------------------
 * オーナー様の動画（Figma 11 OWNERS 97:69。TOP と共通の部品 top/owners.php。見た目は top.css）
 * 余白などは TOP のまま。TOP は下に緑の帯（ご相談の窓口）が続くので山は無いが、車種のページは下に品質（白）が続き背景色が変わるので、
 * 下端に白い山（上の境目の山）を置く。TOP の下の余白（SP 120px / PC 184px）は山（最大 114px）+ 60px より広いので、そのまま使う
 * ------------------------------------------------------------ */
.model-page .owners {
    --divider-color: var(--color-white);
}

/* ------------------------------------------------------------
 * よくあるご質問（Figma 13 FAQ 97:120）。ご質問の部品は /faq/ と同じ .faq-item（faq.css を車種のページでも読み込む）。
 * ここではセクション・見出し・一覧の幅（/faq/ と同じ 960px）・ボタンの位置だけを組む
 * ------------------------------------------------------------ */
/* 下端の山の色は次のほかの車種の背景色（SP は TOP と共通のスライダーに合わせた #e9efe9、PC は薄い緑） */
.model-faq {
    --divider-color: #e9efe9;
    position: relative;
    overflow: hidden;
    padding: 56px 20px 88px;
    background-color: var(--color-white);
}

.model-faq__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
}

.model-faq__head {
    margin-bottom: 28px;
}

/* ご質問の並び（幅は /faq/ の .faq-category__items と同じ 960px。間隔は SP 10px（Figma SP）/ PC 16px） */
.model-faq__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(100%, 960px);
    color: #333;
}

/* 背景は白（共通の .button--outline のまま。2026-11-10 Chatwork「ボタンを白色に」。Figma は薄い緑）。マウスを乗せたら薄い緑（共通の部品） */
.model-faq__button {
    margin-top: 28px;
}

/* ------------------------------------------------------------
 * ほかの車種（Figma SUZY PC 99:2・SP 443:434 / BOUKEN PC 418:906・SP 1533:2740）
 * 車種ごとのカード（.model-lineup-card。このファイルの末尾の「ほかの車種のカード」）を、SP・タブレットは縦に、PC は 2 列に並べる。
 * 見出しとカードの間は Figma SP の Head の下 24px + Block の上 20px = 44px
 * ------------------------------------------------------------ */
.model-lineup {
    padding-top: 56px;
    background-color: #e9efe9;
}

.model-lineup__inner {
    padding: 0 20px;
}

.model-lineup__head {
    margin-bottom: 44px;
}

/* 境目の山（セクションの下端に置く。色は --divider-color）。形・幅・位置は TOP の .lineup-model__divider と同じ（SP も PC も） */
.model-price::after,
.model-page .owners::after,
.model-faq::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: max(640px, 100%);
    aspect-ratio: 1280 / 114;
    /* 1280px より広い画面では横にだけ伸ばし、高さは 114px で止める（2026-10 先方指示） */
    max-height: 114px;
    background-color: var(--divider-color);
    -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: "";
}

/* ============================================================
 * PC（1024px 以上）
 * ============================================================ */
@media (min-width: 1024px) {
    /* 下の余白は山（最大 114px）+ 中身との間 60px（先方指示）。Figma（120px）より広げ、ボタンなどが山にかからないようにする */
    .model-price,
    .model-faq {
        padding: 100px 70px 174px;
    }

    .model-faq {
        --divider-color: var(--color-pale);
    }

    .model-delivery,
    .model-lineup {
        padding: 100px 70px 120px;
    }

    /* 価格・仕様 */
    .model-price__head {
        margin-bottom: 56px;
    }

    .model-spec thead th,
    .model-spec thead td {
        padding: 20px 28px;
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.08em;
        line-height: 22px;
    }

    .model-spec thead td {
        width: 320px;
    }

    .model-spec tbody th {
        width: 320px;
        padding: 20px 28px;
        font-size: 0.9375rem; /* 15px */
        letter-spacing: 0.03em;
        line-height: 22px;
    }

    .model-spec td {
        padding: 20px 28px;
        font-size: 1rem; /* 16px */
        letter-spacing: 0.02em;
        line-height: 23px;
    }

    .model-spec__price-row td {
        padding-right: 28px;
        padding-left: 28px;
        white-space: normal;
    }

    .model-spec__price-row th,
    .model-spec__price-row td {
        height: 85px;
    }

    .model-spec__price {
        font-size: 2.5rem; /* 40px */
        line-height: 44px;
    }

    /* PC の「円」は本文の書体（Figma） */
    .model-spec__yen {
        margin-left: 4px;
        font-size: 1rem; /* 16px */
    }

    .model-spec__price-pending {
        font-size: 1.375rem; /* 22px */
        line-height: 44px;
    }

    .model-price__note {
        margin-top: 56px;
    }

    /* 納期・購入の流れ */
    .model-delivery__head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* PC はこの見出しだけ左揃え（Figma） */
    .model-delivery__heading {
        align-items: flex-start;
        text-align: left;
    }

    .model-delivery__lead-time {
        gap: 16px;
        padding: 16px 28px;
    }

    .model-delivery__lead-label {
        gap: 3px;
        font-size: 0.75rem; /* 12px */
        line-height: 17px;
    }

    .model-delivery__lead-caption {
        font-size: inherit;
        letter-spacing: 0.06em;
    }

    .model-delivery__lead-from {
        font-size: inherit;
        letter-spacing: 0.11em;
    }

    .model-delivery__lead-num {
        font-size: 3.5rem; /* 56px */
        line-height: 60px;
    }

    .model-delivery__lead-unit {
        color: inherit;
        font-size: 1rem; /* 16px */
        letter-spacing: 0.08em;
    }

    .model-delivery__lead-pending {
        font-size: 2rem; /* 32px */
        line-height: 60px;
    }

    .model-delivery__note {
        margin-top: 40px;
        text-align: right;
    }

    .model-flow {
        display: flex;
        margin-top: 40px;
    }

    .model-flow-step {
        flex: 1;
        gap: 14px;
        min-width: 0;
        min-height: 0;
        padding: 0 14px 0 0;
    }

    .model-flow-step__marker {
        position: static;
        flex-direction: row;
        width: 100%;
    }

    .model-flow-step:not(:last-child) .model-flow-step__marker::after {
        width: auto;
        height: 2px;
        background-color: rgb(47 107 86 / 0.3);
    }

    .model-flow-step__num {
        width: 56px;
        height: 56px;
    }

    .model-flow-step__num-label {
        font-size: 0.5rem; /* 8px */
        letter-spacing: 0.1em;
    }

    .model-flow-step__title {
        letter-spacing: 0.12em;
        line-height: 26px;
    }

    .model-flow-step__text {
        font-size: 0.875rem; /* 14px */
        letter-spacing: 0.02em;
        line-height: 24px;
    }

    /* PC は説明文も文節の途中で折り返さない（Figma PC の改行位置） */
    .model-flow-step__text > span {
        display: inline-block;
    }

    /* PC: ステップの 40px 下。写真は帯の高さいっぱい（Figma は帯 302px。2026-11-10 にリンクが増えて 252 → 302px） */
    .model-after {
        flex-direction: row;
        margin-top: 40px;
    }

    /* PC: リンク（写真の枠）が帯の左 420 / 1140 の幅・帯の高さいっぱい。写真は枠いっぱいに切り抜く */
    .model-after__photo-link {
        position: relative;
        flex-shrink: 0;
        width: calc(420 / 1140 * 100%);
        min-height: 240px;
    }

    .model-after__photo {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }

    .model-after__body {
        flex: 1;
        gap: 6px;
        min-width: 0;
        padding: 36px 48px;
    }

    .model-after__title {
        font-size: 1.625rem; /* 26px */
    }

    .model-after__title > span {
        display: inline;
    }

    .model-after__tags {
        gap: 10px;
        margin-top: 10px;
    }

    .model-after__text {
        font-size: 1.0625rem; /* 17px */
    }

    /* よくあるご質問 */
    .model-faq__head {
        margin-bottom: 48px;
    }

    .model-faq__list {
        gap: 16px;
    }

    .model-faq__button {
        margin-top: 56px;
    }

    /* ほかの車種 */
    .model-lineup__head {
        margin-bottom: 56px;
    }

    .model-lineup {
        background-color: var(--color-pale);
    }

    .model-lineup__inner {
        padding: 0;
    }
}

/*
 * 1024〜1279px はステップの列が狭く（1 列 約 130〜150px）、Figma の改行位置の文節が 1 行に収まらないものがあるので、
 * 文字を少し小さくし、文節の途中でも折り返す
 */
@media (min-width: 1024px) and (max-width: 1279px) {
    .model-flow-step {
        padding-right: 10px;
    }

    /* 車種のページの 18px（下の .model-page の指定）より強くするため、.model-flow-step を足す */
    .model-flow-step__title,
    .model-page .model-flow-step .model-flow-step__title {
        font-size: 1rem; /* 16px */
        letter-spacing: 0.06em;
    }

    .model-flow-step__text {
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 0;
    }

    .model-flow-step__title > span,
    .model-flow-step__text > span {
        display: inline;
    }
}

/* ============================================================
 * 11/6 のデザイン（SUZY｜PCデザイン 1271:1159 / SPデザイン 1271:5406）。SUZY・BOUKEN 共通。山の形は model-intro.css の .model-mtn と同じ
 * ============================================================ */
.model-page .model-price::after,
.model-page .model-delivery::after,
.model-page .quality::after,
.model-page .model-faq::after,
.model-page .model-lineup::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-page .model-price::after,
    .model-page .model-delivery::after,
    .model-page .quality::after,
    .model-page .model-faq::after,
    .model-page .model-lineup::after {
        height: auto;
        aspect-ratio: 1280 / var(--mtn-pc, 165);
        max-height: calc(var(--mtn-pc, 165) * 1px);
    }
}

/* 価格・仕様（Figma「09 PRICE」PC 1271:3181 / SP 1271:7164） */
.model-page .model-price {
    --mtn-sp: 38px;
    --mtn-color: var(--color-pale);
    padding: 56px 20px 64px;
    background-color: var(--color-white);
}

.model-pamphlet {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 56px;
    padding: 32px 40px;
    color: var(--color-white);
    background-color: var(--color-green);
}

/* 表紙はカタログ一覧へのリンクで包む（ホバーで拡大。拡大した分はリンクの枠で切るので、影もリンクに付ける） */
.model-pamphlet__cover-link {
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    width: 132px;
    height: 187px;
    box-shadow: 0 6px 14px rgb(0 0 0 / 0.18);
}

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

.model-pamphlet__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.model-pamphlet__title {
    font-family: var(--font-sans);
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    line-height: 35px;
}

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

/* Figma は灰色（#5a5a5a）で緑の地の上だと読めないので白にする（確認事項） */
.model-pamphlet__meta {
    font-size: 1rem; /* 16px */
    line-height: 23px;
}

.model-pamphlet__actions {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.model-pamphlet__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 64px;
    color: var(--color-green);
    background-color: var(--color-white);
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/* Figma は緑の地に緑の文字で読めないので白にする（確認事項） */
.model-pamphlet__more {
    color: var(--color-white);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 23px;
    text-decoration: underline;
}

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

    .model-pamphlet__more:hover {
        text-decoration: none;
    }
}

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

    .model-page .model-price__head {
        margin-bottom: 56px;
    }

    .model-page .model-price__note {
        margin-top: 56px;
    }
}

/* 納期・購入の流れ（Figma「10 DELIVERY」PC 1271:3278 / SP 1271:7244） */
.model-page .model-delivery {
    --mtn-sp: 50px;
    --mtn-color: var(--color-pale);
    position: relative;
    padding: 56px 20px 64px;
    background-color: var(--color-pale);
}

@media (min-width: 1024px) {
    .model-page .model-delivery {
        --mtn-color: var(--color-white);
        --mtn-flip: -1;
        padding: 70px 70px 225px;
    }
}

/* 品質（Figma「12 QUALITY」PC 1271:3348 / SP 1271:7448）。TOP と共通の部品（top/quality）の車種のページだけの調整 */
.model-page .quality {
    --mtn-sp: 37px;
    --mtn-color: var(--color-pale);
    padding: 56px 20px 64px;
}

@media (min-width: 1024px) {
    .model-page .quality {
        padding: 70px 70px 232px;
    }

    /*
     * Figma（SUZY 1271:3348 / BOUKEN 1271:4844）: 文字 560px・間隔 110px・写真 460×620 を枠の右から 10px に置き、
     * 写真は文字より 10px 上から。TOP（文字 560px・間隔 60px・写真 423px・右に 24px）と違う。
     * gap の % は枠の中身（1130px = 1140 - 右の 10px）に対する割合
     */
    .model-page .quality__inner {
        grid-template-columns: minmax(0, 560fr) minmax(0, 460fr);
        column-gap: calc(110 / 1130 * 100%);
        padding-right: calc(10 / 1140 * 100%);
    }

    .model-page .quality__head {
        padding-top: 0;
    }

    .model-page .quality__media {
        min-height: 620px;
        margin-top: -10px;
        padding-top: 0;
    }

    /* 幅を固定にして枠（justify-self: end で中身の幅になる）を 460px に広げる。狭い画面では列の幅まで縮む */
    .model-page .quality__media img {
        width: 460px;
        max-width: 100%;
        aspect-ratio: 460 / 620;
        object-fit: cover;
    }

    .model-page .quality .sns-banners {
        margin-top: 90px;
    }

    .model-page .quality .sns-banners {
        gap: 60px;
    }
}

/* よくあるご質問（Figma「13 FAQ」PC 1271:3366 / SP 1271:7626）。部品は /faq/ と共通の .faq-item。SUZY は線の枠で、Q と A は四角の無い Oswald */
.model-page .model-faq {
    --mtn-sp: 43px;
    --mtn-color: var(--color-white);
    padding: 56px 20px 64px;
    background-color: var(--color-pale);
}

/* 閉じているご質問も白地（2026-11-10 Chatwork「質問アコーディオンを白色に」。Figma は地の薄い緑のまま） */
.model-page .faq-item {
    background-color: var(--color-white);
    border: 1px solid rgb(47 107 86 / 0.2);
    box-shadow: none;
}

.model-page .faq-item[open] {
    background-color: var(--color-white);
    border-color: rgb(47 107 86 / 0.6);
}

.model-page .faq-item__question {
    align-items: center;
    padding: 16px;
}

.model-page .faq-item__mark {
    width: auto;
    height: auto;
    color: var(--color-green);
    background: none;
    font-family: var(--font-num);
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    line-height: 33px;
}

.model-page .faq-item__mark--answer {
    color: var(--color-accent);
}

.model-page .faq-item__question-text {
    font-weight: 500;
    letter-spacing: 0;
}

/*
 * 「A」は「Q」と同じ列、答えの文は質問の文と同じ列にそろえる（Figma PC 1271:3389 / 3390。/faq/ の回答の左右の余白 SP 16px・PC 32px は使わない。
 * 2026-11-09 の見比べで PC 32px・SP 16px 右にずれていた）
 */
.model-page .faq-item__answer {
    margin-inline: 0;
    padding: 0 16px 18px;
    border-top: 0;
}

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

@media (min-width: 1024px) {
    .model-page .model-faq {
        --mtn-flip: -1;
        padding: 70px 70px 225px;
    }

    .model-page .model-faq__list {
        width: min(100%, 1000px);
        gap: 14px;
    }

    .model-page .faq-item__question {
        gap: 20px;
        padding: 24px 28px;
    }

    .model-page .faq-item__mark {
        font-size: 1.625rem; /* 26px */
        line-height: 30px;
    }

    /* 開け閉めの「＋」は 20 × 20px の中に長さ 20px・太さ 2px の線（Figma PC 1271:3379。/faq/ は 14px・2.5px） */
    .model-page .faq-item__question::after {
        --icon-line: 20px;
        --icon-weight: 2px;
    }

    .model-page .faq-item__question-text {
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.54px;
        line-height: 30px;
    }

    .model-page .faq-item__answer {
        gap: 20px;
        padding: 0 28px 28px;
    }

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

/*
 * ほかの車種（Figma「14 LINEUP」PC 1271:3425）。白地・下に薄い緑の山。ボタンは薄い緑の地に枠。
 * 下端の山（::after）の位置の基準にするため、SP でも position: relative にする（前は PC だけで、SP は山がページの
 * 1 画面目の下端に出て、画面の高さが 667px のときに FV の文章に重なっていた。2026-11-10 Chatwork）
 */
.model-page .model-lineup {
    --mtn-sp: 40px;
    --mtn-color: var(--color-pale);
    position: relative;
}

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

/*
 * SP の調整（Figma の SP は背景の交互が PC と違う: 価格 = 薄い緑・納期 = 白・品質 = 白・よくあるご質問 = 薄い緑）
 */
@media (max-width: 1023px) {
    .model-page .model-price {
        --mtn-color: var(--color-white);
        background-color: var(--color-pale);
    }

    .model-page .model-spec td {
        font-size: 1rem; /* 16px */
        line-height: 25px;
    }

    .model-page .model-delivery {
        background-color: var(--color-white);
    }

    .model-page .model-delivery__lead-time {
        background-color: var(--color-pale);
    }

    .model-page .model-flow-step__title {
        font-size: 1.0625rem; /* 17px */
        line-height: 24px;
    }

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

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

    /* STEP の文字は 13px（Figma SP 1271:7262） */
    .model-page .model-flow-step__num-label {
        font-size: 0.8125rem; /* 13px */
        line-height: normal;
    }

    /* 丸の下の線は丸から 20px だけ（Figma SP 1271:7260: 高さ 72px の中に丸 52px と線。色 #bbcec5） */
    .model-page .model-flow-step__marker {
        bottom: auto;
        height: 72px;
    }

    .model-page .model-flow-step:not(:last-child) .model-flow-step__marker::after {
        background-color: #bbcec5;
    }

    /* 「納期は状況により…」は本文と同じ色（Figma SP 1271:7257。PC は 75% の薄さ 1271:3294） */
    .model-page .model-delivery__note {
        color: #333;
    }

    /* よくあるご質問の答えは、SP では段落を続けて 1 つの文にする（Figma SP 1271:7645。PC は段落ごとに改行 1271:3390） */
    .model-page .faq-item__body p {
        display: inline;
    }

    /* 品質: 見出し → 写真（335×451）→ 本文 → ボタン → バナーの順（TOP と同じ HTML の順。Figma SP 443:377・1533:2680。2026-11-10 夕方の更新） */
    .model-page .quality__media img {
        width: 100%;
        height: auto;
        aspect-ratio: 335 / 451;
        object-fit: cover;
    }

    /* よくあるご質問: SP は枠の無い白いカード */
    .model-page .model-faq {
        --mtn-color: #e9efe9;
    }

    .model-page .faq-item,
    .model-page .faq-item[open] {
        background-color: var(--color-white);
        border: 0;
    }

    .model-page .faq-item__question-text {
        font-size: 0.9375rem; /* 15px */
        font-weight: 700;
        line-height: 25px;
    }

    .model-page .faq-item__body {
        font-size: 0.9375rem; /* 15px */
    }
}

/* 品質・よくあるご質問は TOP と共通の overflow: hidden で下端の山の 1px の重なりが切れ、半端な倍率で境目に線が出るので、縦は切らない */
.model-page .quality,
.model-page .model-faq {
    overflow: visible;
    overflow-x: clip;
}

/* オーナー様の車両紹介: 11/6 の PC は白地で下に薄い緑の山（TOP と共通の部品） */
.model-page .owners {
    --mtn-sp: 35px;
    /* SP の次は標準装備の薄い緑。PC の次は 3つのモードの薄い緑 */
    --mtn-color: var(--color-pale);
    background-color: var(--color-white);
}

.model-page .owners::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: var(--mtn-sp);
    max-height: none;
    aspect-ratio: auto;
    background-color: var(--mtn-color);
    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;
    content: "";
}

@media (min-width: 1024px) {
    /*
     * Figma（SUZY 1271:1752）: 見出しは上から 70px、見出しと文の間 28px、カードの上 48px、ボタンの上 64px、ボタンの下 225px。
     * 山のスケッチは下端から 102px（TOP は 27px）。BOUKEN は上下の余白とスケッチの位置だけ下で変える
     */
    .model-page .owners {
        --mtn-color: var(--color-pale);
        --mtn-flip: -1;
        padding: 70px 70px 225px;
    }

    .model-page .owners::before {
        bottom: 102px;
    }

    .model-page .owners__inner {
        gap: 28px;
    }

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

    .model-page .owners__button {
        margin-top: 36px;
    }

    .model-page .owners::after {
        height: auto;
        aspect-ratio: 1280 / var(--mtn-pc, 165);
        max-height: calc(var(--mtn-pc, 165) * 1px);
    }
}

/* BOUKEN（Figma 1271:3611）の余白と山の違い。表の価格は「223 万円〜」 */
.model-spec__price-unit {
    margin-left: 4px;
    font-size: 0.8125rem; /* 13px */
}

@media (min-width: 1024px) {
    .model-spec__price-unit {
        font-size: 1rem; /* 16px */
    }

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

    .model-page--bouken .model-delivery {
        --mtn-pc: 98;
        --mtn-flip: 1;
        padding: 70px 70px 158px;
    }

    /* Figma: 文字は上から 100px、写真は 90px、バナーの下 156px */
    .model-page--bouken .quality {
        --mtn-pc: 112;
        --mtn-flip: -1;
        padding: 100px 70px 156px;
    }

    .model-page--bouken .model-faq {
        --mtn-pc: 112;
        --mtn-flip: 1;
        padding: 70px 70px 172px;
    }

    .model-page--bouken .model-lineup {
        --mtn-pc: 100;
        --mtn-flip: -1;
        padding: 70px 70px 160px;
    }

    .model-page--bouken .owners {
        --mtn-pc: 96;
        --mtn-flip: 1;
        padding: 70px 70px 156px;
    }

    /* 見出し・カード・ボタンの間隔は SUZY と同じ（上の .model-page .owners__inner など）。山のスケッチは下から 30px（Figma Page 1） */
    .model-page--bouken .owners::before {
        bottom: 30px;
    }

    /*
     * BOUKEN の PC のセクションの色（Figma Page 1 418:2。2026-11-10 Chatwork「交互の色を振り直した」）。上から
     * 〇〇について 薄い緑 → 旅と使い方 白 → 3つのポイント 薄い緑 → 数字 白 → 4つのモード 薄い緑 → カスタマイズ 白 →
     * オーナー様の車両紹介 薄い緑 → 標準装備 白 →（ここから下は SUZY と同じ）。下端の山は次のセクションの色で、全部のセクションに出す。
     * SUZY と共通の色の決まりをここで上書きする（この CSS は model-intro・features より後に読む）
     */
    .model-page--bouken .model-style {
        --mtn-color: var(--color-pale);
    }

    .model-page--bouken .model-reasons {
        --mtn-color: var(--color-white);
        background-color: var(--color-pale);
    }

    .model-page--bouken .model-numbers {
        --mtn-color: var(--color-pale);
        background-color: var(--color-white);
    }

    .model-page--bouken .model-modes {
        --mtn-color: var(--color-white);
    }

    .model-page--bouken .model-customize {
        --mtn-color: var(--color-pale);
        background-color: var(--color-white);
    }

    .model-page--bouken .owners {
        --mtn-color: var(--color-white);
        background-color: var(--color-pale);
    }

    /* 白い地になった数字・カスタマイズの中のカード（定員・標準で選べるもの）は薄い緑（Figma 1017:266・1031:55） */
    .model-page--bouken .model-numbers__seats,
    .model-page--bouken .model-swatch-card {
        background-color: var(--color-pale);
    }

    /* 価格の注記は本文の大きさ（Figma: 16px。1280px で 2 行） */
    .model-page--bouken .model-price__note {
        font-size: 1rem; /* 16px */
        letter-spacing: 0.32px;
        line-height: 1.45;
    }

    /* 納期: STEP は 13px・説明は 16px / 27px・注記は 16px（Figma SUZY 1271:3299・3303・3294 / BOUKEN 1271:4793） */
    .model-page .model-flow-step__num-label {
        font-size: 0.8125rem; /* 13px */
        line-height: normal;
    }

    /*
     * Figma Page 1（SUZY 97:19 / BOUKEN 418:731）: 丸 → 12px → 見出し（緑 18px・2 行分の 52px）→ 12px → オレンジの線（24×2px）→ 12px → 説明。
     * 見出しが 1 行のステップも、説明の上端はほかのステップとそろう
     */
    .model-page .model-flow-step {
        gap: 12px;
    }

    .model-page .model-flow-step__title {
        min-height: 52px;
        color: var(--color-green);
        font-size: 1.125rem; /* 18px */
        letter-spacing: 2px;
        line-height: 26px;
    }

    .model-page .model-flow-step__text::before {
        display: block;
        width: 24px;
        height: 2px;
        margin-bottom: 12px;
        background-color: var(--color-accent);
        content: "";
    }

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

    .model-page .model-delivery__note {
        font-size: 1rem; /* 16px */
    }
}

/*
 * SUZY の SP のセクションの背景と下端の山の色（Figma Page 1 SP 439:14。2026-11-10 Chatwork「SUZY の SP を再度反映」）。
 * SP も PC と同じ並びになったので、交互の色も PC と同じ（〇〇について 薄い緑 → 旅と使い方 白 → 数字 薄い緑 → 選ばれる理由 白 →
 * カスタマイズ 薄い緑 → オーナー 白 → 3つのモード 薄い緑 → 標準装備 白 → オプション 薄い緑 → 価格 白 → 納期 薄い緑 → 品質 白 →
 * よくあるご質問 薄い緑 → ほかの車種 #e9efe9）。前の SP の並びの色の決まり（model-intro・features）をここで上書きする
 */
@media (max-width: 1023px) {
    .model-page--suzy .model-style,
    .model-page--bouken .model-style {
        --mtn-color: var(--color-pale);
        background-color: var(--color-white);
    }

    .model-page--suzy .model-modes,
    .model-page--bouken .model-modes {
        --mtn-color: var(--color-white);
        background-color: var(--color-pale);
    }

    .model-page--suzy .model-equip,
    .model-page--bouken .model-equip {
        --mtn-color: var(--color-pale);
        background-color: var(--color-white);
    }

    .model-page--suzy .model-options,
    .model-page--bouken .model-options {
        --mtn-color: var(--color-white);
        background-color: var(--color-pale);
    }

    .model-page--suzy .model-price,
    .model-page--bouken .model-price {
        --mtn-color: var(--color-pale);
        background-color: var(--color-white);
    }

    .model-page--suzy .model-delivery,
    .model-page--bouken .model-delivery {
        --mtn-color: var(--color-white);
        background-color: var(--color-pale);
    }
}

/*
 * BOUKEN の SP のセクションの色（Figma Page 1 の SP 1533:14。2026-11-10 ユーザー指示「BOUKEN の SP はこれと全く一緒に」）。
 * 並びは PC と同じなので、色も PC と同じ交互（上の SUZY と共通の指定 + ここ）。下端の山は次のセクションの色
 */
@media (max-width: 1023px) {
    .model-page--bouken .model-reasons {
        --mtn-color: var(--color-white);
        background-color: var(--color-pale);
    }

    .model-page--bouken .model-numbers {
        --mtn-color: var(--color-pale);
        background-color: var(--color-white);
    }

    .model-page--bouken .model-customize {
        --mtn-color: var(--color-pale);
        background-color: var(--color-white);
    }

    .model-page--bouken .owners {
        --mtn-color: var(--color-white);
        background-color: var(--color-pale);
    }

    .model-page--bouken .model-numbers__seats,
    .model-page--bouken .model-swatch-card {
        background-color: var(--color-pale);
    }

    /* 下の余白（山を含む）: オプションはボタンの下から 61px（1533:1606）、納期は 74px（1533:2378） */
    .model-page--bouken .model-options {
        padding-bottom: 61px;
    }

    .model-page--bouken .model-delivery {
        padding-bottom: 74px;
    }
}

/*
 * SP の細部（Figma Page 1 の SUZY の SP 439:14 との見比べ。2026-11-10 Chatwork「SUZY・BOUKEN の SP を再度反映」）。
 * パンフレットとほかの車種は SUZY・BOUKEN 共通の部品なので両方に効く。それ以外は SUZY だけ（BOUKEN の SP の Figma が届いたら見直す）
 */
@media (max-width: 1023px) {
    /*
     * 価格・仕様のパンフレット（Figma SP 1532:293）: 緑の箱の上に題、その下の左に表紙（88px）と「A4・6ページ」、右に文、下にボタン。
     * 本文の箱（__body）を解いて、題・文・ページ数をグリッドに並べる。「ほかの車種のパンフレットも見る」は SP では出さない（2026-11-10 18:32 Chatwork）
     */
    .model-pamphlet {
        display: grid;
        grid-template-areas:
            "title title"
            "cover text"
            "meta text"
            "actions actions";
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 0 16px;
        align-items: start;
        margin-top: 32px;
        padding: 24px 20px;
    }

    .model-pamphlet__body {
        display: contents;
    }

    .model-pamphlet__title {
        grid-area: title;
        margin-bottom: 20px;
        font-size: 1.25rem; /* 20px */
        line-height: 29px;
    }

    .model-pamphlet__cover-link {
        grid-area: cover;
        width: 88px;
        height: auto;
        aspect-ratio: 132 / 187;
        box-shadow: 0 4px 9.333px rgb(0 0 0 / 0.18);
    }

    .model-pamphlet__text {
        grid-area: text;
    }

    .model-pamphlet__meta {
        grid-area: meta;
        margin-top: 8px;
        font-size: 0.8125rem; /* 13px */
        line-height: 19px;
        text-align: center;
    }

    .model-pamphlet__actions {
        grid-area: actions;
        align-items: stretch;
        margin-top: 20px;
        text-align: center;
    }

    .model-pamphlet__button {
        width: 100%;
    }

    .model-pamphlet__more {
        display: none;
    }

    /* オプション: 分類へのボタンは出さない（Figma SP 442:14 に無い） */
    .model-page--suzy .model-options__nav,
    .model-page--bouken .model-options__nav {
        display: none;
    }

    /* 「ワンちゃん連れにおすすめ」の札（Figma SP 770:24・標準装備 774:23）: 角丸・13px・犬のアイコン 19px。どれも写真の左上（排気ファンも。Figma SP 713:64・2026-11-10 18:30 Chatwork） */
    .model-page--suzy .model-point__badge,
    .model-page--bouken .model-point__badge {
        padding: 1px 7px 1px 5px;
        border-radius: 999px;
        font-size: 0.8125rem; /* 13px */
    }

    .model-page--suzy .model-point__badge img,
    .model-page--bouken .model-point__badge img {
        width: 19px;
        height: 19px;
    }

    /*
     * オプションの写真カード（幅 160px）の札は幅 146px で「ワンちゃん連れに／おすすめ」の 2 行、行の高さ 16px（Figma SP 770:26。高さ 34px。
     * 2026-11-10 18:28・19:19 Chatwork）。全幅のカード（クーラー）は 1 行（770:24。191×21px。19:18 Chatwork）
     */
    .model-page--suzy .model-option-card .model-point__badge,
    .model-page--bouken .model-option-card .model-point__badge {
        max-width: 146px;
        line-height: 16px;
    }

    .model-page--suzy .model-option-card--wide .model-point__badge,
    .model-page--bouken .model-option-card--wide .model-point__badge {
        max-width: none;
    }

    .model-page--suzy .model-option-card .model-point__badge--bottom {
        top: auto;
        bottom: 6px;
    }

    /* クーラーの写真は 335×209（Figma SP 713:26） */
    .model-page--suzy .model-option-card--wide .model-option-card__photo {
        aspect-ratio: 335 / 209;
    }

    /* 名前の補足は 12px。カーテンの「（6面）」だけ名前と同じ行（Figma SP 713:247） */
    .model-page--suzy .model-option-card__sub,
    .model-page--bouken .model-option-card__sub {
        font-size: 0.75rem; /* 12px */
    }

    .model-page--suzy .model-option-card__sub--inline,
    .model-page--bouken .model-option-card__sub--inline {
        display: inline;
    }

    /* 内訳の箱は余白 4px 10px・行の間 2px（Figma SP 713:137） */
    .model-page--suzy .model-option-card__prices--table {
        padding: 4px 10px;
    }

    .model-page--suzy .model-option-card__prices--table .model-option-card__price--labeled {
        padding-block: 1px;
    }

    /* 下の注記は本文の色で 16px（Figma SP 442:211） */
    .model-page--suzy .model-options__note,
    .model-page--bouken .model-options__note {
        color: #333;
        font-size: 1rem; /* 16px */
        line-height: 26px;
    }

    /* 価格・仕様: 表の項目名 13px（Figma SP 443:29）、「円」は数字と同じ Oswald 17px（443:31）、「価格は税込です。」は本文の色（443:92） */
    .model-page--suzy .model-spec tbody th,
    .model-page--bouken .model-spec tbody th {
        font-size: 0.8125rem; /* 13px */
        line-height: 20px;
    }

    .model-page--suzy .model-spec__yen,
    .model-page--bouken .model-spec__yen {
        margin-left: 0;
        font-size: inherit;
        font-weight: inherit;
    }

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

    /* 納期: 「納期目安」13px（Figma SP 443:101）、「か月」は本文の色（443:105） */
    .model-page--suzy .model-delivery__lead-caption,
    .model-page--bouken .model-delivery__lead-caption {
        font-size: 0.8125rem; /* 13px */
    }

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

    /* よくあるご質問: 見出しは左端から（Figma SP 443:392 は x=20）。「SUZYについて」「よくあるご質問」の 2 行（443:394）は model-intro.css の SP の見出しの指定 */
    .model-page--suzy .model-faq__head,
    .model-page--bouken .model-faq__head {
        align-self: stretch;
    }

    /* オーナー様の車両紹介: ボタンの下から下端まで 59px（Figma SP 443:163。山 35px を含む。TOP は 120px） */
    .model-page--suzy .owners,
    .model-page--bouken .owners {
        padding-bottom: 59px;
    }

    /* 3つのモード: 一言は 16px・行の高さ 30px（Figma SP 441:20）。動画のカードは影なしで節と同じ地（441:33）、下端まで 82px */
    .model-page--suzy .model-modes,
    .model-page--bouken .model-modes {
        padding-bottom: 82px;
    }

    .model-page--suzy .model-modes__lead,
    .model-page--bouken .model-modes__lead {
        font-size: 1rem; /* 16px */
        line-height: 30px;
    }

    /*
     * 動画のカード（Figma SP 441:33）: 白地・影なし。「MOVIE」13px・字間 1.56px、題 20px・字間 0.8px（SP の h3 の 18px より Figma を優先。
     * 2026-11-10 18:14 Chatwork で 441:33 を指定）、ボタンは 14px・字間なし・上下 16px 左右 20px
     */
    .model-page--suzy .model-movie {
        background-color: var(--color-white);
        box-shadow: none;
    }

    .model-page--suzy .model-movie__eyebrow,
    .model-page--bouken .model-movie__eyebrow {
        font-size: 0.8125rem; /* 13px */
    }

    .model-page--suzy .model-movie__title {
        font-size: 1.25rem; /* 20px */
        letter-spacing: 0.8px;
        line-height: 1.45;
    }

    .model-page--suzy .model-movie__button {
        min-height: 0;
        padding: 16px 20px;
        font-size: 0.875rem; /* 14px */
        font-weight: 700;
        letter-spacing: 0;
    }

    /* 標準装備: 下端まで 58px（Figma SP 441:45）。3 つの枠の見出しは 22px・行の高さ 34px（758:277 など） */
    .model-page--suzy .model-equip,
    .model-page--bouken .model-equip {
        padding-bottom: 58px;
    }

    .model-page--suzy .model-equip__panel-title {
        font-size: 1.375rem; /* 22px */
        line-height: 34px;
    }

    /* そのほかの水まわり: 上に 1px の線と 20px の余白（Figma SP 752:219） */
    .model-page--suzy .model-equip__others--border {
        padding-top: 20px;
        border-top: 1px solid #bbcec5;
    }

    /* 写真カードの名前の補足（「（左側下部収納庫）」「（12L）」など）は 12px・行の高さ 18px（Figma SP 1243:18・1564:9） */
    .model-page--suzy .model-equip-card__sub,
    .model-page--bouken .model-equip-card__sub {
        font-size: 0.75rem; /* 12px */
        line-height: 1.5;
    }

    /* 名前と同じ行に置く補足は 12px（Figma SP 712:55「（右側収納庫）」） */
    .model-equip-card__sub--inline {
        display: inline;
        font-size: 0.75rem; /* 12px */
    }
}

/* ============================================================
 * ほかの車種のカード（SP・タブレット: Figma SUZY 443:434 の 1568:42・1569:17 / BOUKEN 1533:2740 の 1569:52・1569:69。2026-11-10 夕方にデザイナーが作り直したもの。
 * PC: SUZY 99:2 の 1568:25・1569:8 / BOUKEN 418:906。2026-11-11 Chatwork「デザイン反映して」で SP と同じ形に）。
 * 上に写真（SP 335×190 / PC 555×340）、下に車種の色の地で一言・車種名・価格と定員・ボタン。
 * TOP の SP のカード（top.css の .lineup-card）と形は近いが、白い枠・余白・ボタンの矢印の幅・定員の色が違うので、ここで別に組む。PC の指定はこの最後の @media
 * ============================================================ */
@media (max-width: 1023px) {
    /*
     * 最後のカードの下 40px（Figma）。SP は下端の山を出さない（すぐ下の「ご相談の窓口」の緑の帯の真上の山。Figma SP 443:434・443:508 に無い。
     * 2026-11-10 19:21 Chatwork「このセクションの真上につけている山ははずして」）
     */
    .model-page .model-lineup {
        padding-bottom: 40px;
    }

    .model-page .model-lineup::after {
        content: none;
    }

    /* BOUKEN のページは白地（Figma 1533:2740）。上のよくあるご質問の下端の山も同じ白にする */
    .model-page--bouken .model-lineup {
        background-color: var(--color-white);
    }

    .model-page--bouken .model-faq {
        --mtn-color: var(--color-white);
    }

    /*
     * カードの間: Figma の BOUKEN のページ（1533:2747）は 20px。SUZY のページ（443:441）は枠の高さが 439px に固定されていて 36px 空くので、ページごとに合わせる。
     * タブレットは TOP の SP のカードと同じく 480px まで広げて中央に置く（Figma は 375px だけ）
     */
    .model-lineup__cards {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: min(100%, 480px);
        margin-inline: auto;
    }

    .model-page--suzy .model-lineup__cards {
        gap: 36px;
    }
}

.model-lineup-card {
    --card-bg: var(--color-green);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-white);
    background-color: var(--card-bg);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
}

.model-lineup-card--bouken {
    --card-bg: #24574a;
}

.model-lineup-card--suzy-mini {
    --card-bg: #7e9a8c;
}

/* 写真（Figma: 335 × 190px）。SUZY mini のシルエットは #e3e9e4 の地に、717×440 の SVG を枠いっぱいに置く（上下が少し切れる。Figma と同じ） */
.model-lineup-card__photo {
    overflow: hidden; /* 中の画像（717×440）の高さで枠が伸びないようにする（aspect-ratio の自動の最小の高さを外す） */
    aspect-ratio: 335 / 190;
    background-color: #e3e9e4;
}

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

/* 文字（Figma: 上 14px・左右 20px・下 18px、行の間 4px） */
.model-lineup-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 20px 18px;
}

/* 車種名の上の一言（だれ向けか・ベース車） */
.model-lineup-card__lead {
    color: #e8c3a8;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 1.5;
}

.model-lineup-card__name {
    font-family: var(--font-en);
    font-size: 2.375rem; /* 38px */
    font-weight: 800;
    line-height: 1.1;
}

.model-lineup-card--suzy-mini .model-lineup-card__name {
    font-size: 2rem; /* 32px */
}

/*
 * 価格と、縦線（白 50%・高さ 14px）をはさんで乗車・就寝の人数。線の左右 12px、上下中央。
 * 狭い画面（320px）では人数を次の行へ折り返す。そのとき行頭に線だけが残らないよう、線は人数の左の外（-13px）に置き、行の左端の外は切る
 */
.model-lineup-card__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 25px; /* 12px + 線 1px + 12px */
    overflow-x: clip;
}

/* 「2WD」14px・数字 Oswald 30px・「万円〜」15px を下端（ベースライン）でそろえる。行の高さは Figma の normal（数字で 44px） */
.model-lineup-card__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.9375rem; /* 15px（「万円〜」） */
    font-weight: 700;
    line-height: normal;
}

.model-lineup-card__drive {
    font-size: 0.875rem; /* 14px */
}

.model-lineup-card__price-num {
    font-family: var(--font-num);
    font-size: 1.875rem; /* 30px */
    font-weight: 600;
}

.model-lineup-card__seats {
    position: relative;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: normal;
}

.model-lineup-card__seats::before {
    position: absolute;
    top: 50%;
    left: -13px;
    width: 1px;
    height: 14px;
    background-color: rgb(255 255 255 / 0.5);
    translate: 0 -50%;
    content: "";
}

.model-lineup-card__soon {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.6;
}

/*
 * 「〜の仕様を見る」ボタン。形は共通の .label-button（白いラベル + 右端の緑の矢印の欄）。
 * Figma: 高さ 52px・白い枠 2px・文字は太字 16px で字間なし・左 24px、矢印の欄は 52px、ラベルの下線なし。
 * 価格の行との間は Figma の 4px + 空き 6px + 4px = 14px（gap の 4px に 10px を足す）。
 * 360px 未満（320px でボタンの幅 240px）は「BOUKEN号の仕様を見る」が 2 行になるので、文字を 15px・左 16px・矢印の欄 44px に詰める。
 * Figma の値は画面の幅 336px 以上で 1 行に入るので、多い 360px の端末から Figma どおりにする（components.css の 375px ではなく 360px）
 */
.model-lineup-card__button {
    width: 100%;
    height: 52px;
    margin-top: 10px;
    border: 2px solid var(--color-white);
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    letter-spacing: 0;
}

.model-lineup-card__button span {
    padding-left: 16px;
    border-bottom: 0;
}

/* 矢印は Figma の「›」（20px の文字）の大きさに小さくする（TOP の SP のカードと同じ） */
.model-lineup-card__button::after {
    width: 44px;
    background-size: 7px 11px;
}

@media (min-width: 360px) {
    .model-lineup-card__button {
        font-size: 1rem; /* 16px */
    }

    .model-lineup-card__button span {
        padding-left: 24px;
    }

    .model-lineup-card__button::after {
        width: 52px;
    }
}

/*
 * PC（1024px〜。Figma SUZY 99:2 / BOUKEN 418:906）: 2 列（555px・間 30px）。地はどのカードも緑、写真は 555×340（SUZY mini は #eef2ec の地）。
 * 文字は 上 24px・左右 36px・下 28px。SUZY mini の「Coming Soon...」は数字の書体 30px で、縦線をはさんで「近日公開」。ボタンは幅 360px。
 * カードのどこを押しても車種のページへ行けるようにする（2026-10-21 先方指示）。リンクは「〇〇の仕様を見る」のまま押せる範囲（::before）をカード全体に広げ、
 * ボタンにマウスを乗せると写真を少し大きくする（SUZY mini はリンクが無いので押せない）
 */
@media (min-width: 1024px) {
    .model-lineup__cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 30px;
    }

    .model-lineup-card {
        position: relative;
    }

    .model-lineup-card--bouken,
    .model-lineup-card--suzy-mini {
        --card-bg: var(--color-green);
    }

    .model-lineup-card__photo {
        aspect-ratio: 555 / 340;
    }

    .model-lineup-card--suzy-mini .model-lineup-card__photo {
        background-color: #eef2ec;
    }

    .model-lineup-card__photo img {
        transition: transform 0.4s ease;
    }

    .model-lineup-card__body {
        padding: 24px 36px 28px;
    }

    .model-lineup-card--suzy-mini .model-lineup-card__name {
        font-size: 2.375rem; /* 38px */
    }

    .model-lineup-card__soon {
        font-family: var(--font-num);
        font-size: 1.875rem; /* 30px */
        font-weight: 600;
        line-height: normal;
    }

    .model-lineup-card__button {
        width: 360px;
    }

    .model-lineup-card__button::before {
        position: absolute;
        inset: 0;
        content: "";
    }
}

@media (hover: hover) and (min-width: 1024px) {
    .model-lineup-card:has(.model-lineup-card__button:hover) .model-lineup-card__photo img {
        transform: scale(1.04);
    }
}