@charset "UTF-8";

/*
 * 車種のページ（SUZY・BOUKEN）: 〇つのモード・標準装備・カスタマイズ（Figma「SUZY｜PCデザイン（1280）」92:2 の 06〜08、「BOUKEN｜PCデザイン（1280）」418:2 の 06〜08）。
 * BOUKEN の SP のデザインは無いので、SUZY の SP と同じ組み方にする。
 * template-parts/model/modes.php・equipment.php・custom.php。SP（1023px 以下）は Figma「SUZY｜SPデザイン（375）」439:14 の 06〜08（441:14・441:45・442:14）。
 * SP の値を基本に書き、PC（1024px〜）で Figma の PC の値に戻す。
 * 背景は 3つのモード（薄い緑）→ 標準装備（白）→ カスタマイズ（薄い緑）と交互で、境目に山を置く（Figma どおり）。
 */

/* ------------------------------------------------------------
 * 3 セクション共通
 * ------------------------------------------------------------ */

.model-modes,
.model-equipment,
.model-custom {
    position: relative;
    /* SP で横にはみ出す山（幅 640px）を切る */
    overflow-x: clip;
    /* 上は Figma の SP どおり 56px。下は境目の山（TOP の SP の境目の山と同じ。640px 幅より小さくしない）の分を含めて 88px */
    padding: 56px 20px 88px;
}

.model-modes,
.model-custom {
    background-color: var(--color-pale);
}

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

.model-modes__inner,
.model-equipment__inner,
.model-custom__inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-width);
    margin-inline: auto;
}

/*
 * 境目の山（形は TOP のラインナップ・HIRABOについてと同じ SVG のマスク、色は次のセクションの背景色）。
 * 3つのモードとカスタマイズの山は Figma で左右反転して置かれている。
 * 山の下端は小数のピクセルになり、下の背景が細い線のように透けるので、接する側へ 1px 重ねる（top.css と同じ）
 */
.model-modes::after,
.model-equipment::after,
.model-custom::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    /* SP は TOP のラインナップの山と同じく 640px 幅（高さ 57px）より小さくしない */
    width: max(640px, 100%);
    aspect-ratio: 1280 / 114;
    /* 1280px より広い画面では横にだけ伸ばし、高さは Figma の 114px で止める（大きくなりすぎて中身にかからないように） */
    max-height: 114px;
    background-color: var(--model-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: "";
}

.model-modes::after,
.model-custom::after {
    transform: scaleX(-1);
}


.model-modes {
    --model-divider-color: var(--color-white);
}

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

.model-custom {
    --model-divider-color: var(--color-white);
}

/*
 * 見出しの下の一言（Figma PC 18px）。SP は Figma の SP どおり左寄せ。大きさは Figma の SP（14px・行の高さ 26px）ではなく、
 * TOP・HIRABOについての一言（共通の .lead）と同じ 15px・行の高さ 30px のままにする。文節（span）単位で折り返す
 */
.model-modes__lead,
.model-equipment__lead,
.model-custom__lead {
    align-self: stretch;
    color: #333;
    font-size: 0.9375rem; /* 15px */
    line-height: 2;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.model-modes__lead > span,
.model-custom__lead-line > span {
    display: inline-block;
}

.model-modes__intro,
.model-custom__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* SP は見出しを左寄せにするので、見出しの枠を左端から置く（中央に置くと見出しの左に余白ができる） */
@media (max-width: 1023px) {
    .model-modes__intro,
    .model-custom__intro {
        align-items: stretch;
    }
}

/* 見出しと一言の間（Figma の SP: 3つのモード 32px、カスタマイズ 20px） */
.model-modes__intro {
    gap: 32px;
}

.model-custom__intro {
    gap: 20px;
}

/* 価格（数字は var(--font-num)。Oswald） */
.model-yen {
    display: flex;
    flex-shrink: 0;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    font-size: 0.75rem; /* 12px */
    white-space: nowrap;
}

.model-yen__num {
    font-family: var(--font-num);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: 0.02em;
    /* Figma の行の高さ 26px */
    line-height: 1.3;
}

/* ------------------------------------------------------------
 * 3つのモード（Figma「06 MODES」95:3）
 * ------------------------------------------------------------ */

.model-modes__list {
    display: grid;
    gap: 32px;
    max-width: 560px;
    margin: 32px auto 0;
}

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

/* Figma の SP は 335×220 */
.model-mode__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 220;
    object-fit: cover;
}

/* Figma の SP: 20px・字間 0.8px・行の高さ normal */
.model-mode__title {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

/* Figma の SP: 14px・行の高さ 26px */
.model-mode__text {
    color: #333;
    font-size: 0.875rem; /* 14px */
    line-height: 1.625rem; /* 26px */
}

/* 動画の案内（白いカード。SP は写真が上） */
.model-movie {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    background-color: var(--color-white);
    box-shadow: 0 8px 16px rgb(0 0 0 / 8%);
}

.model-movie__thumb {
    position: relative;
    display: block;
    overflow: hidden;
}

.model-movie__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 338;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* 再生ボタン（Figma「Icon / Play」84px。白い丸に緑の三角）。SP は 64px */
.model-movie__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 95%);
    transform: translate(-50%, -50%);
}

.model-movie__play::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    height: 28%;
    background-color: var(--color-green);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    /* 三角の重心を丸の中心に合わせる（Figma どおり少し右へ） */
    transform: translate(-38%, -50%);
    content: "";
}

.model-movie__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 20px 28px;
}

/* Figma の SP: 11px・字間 1.32px */
.model-movie__eyebrow {
    color: var(--color-green);
    font-family: var(--font-en);
    font-size: 0.6875rem; /* 11px */
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
}

/* Figma の SP: 20px・字間 0.8px */
.model-movie__title {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.6;
    word-break: keep-all;
}

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

/* Figma の SP: 14px・行の高さ 26px */
.model-movie__text {
    color: #333;
    font-size: 0.875rem; /* 14px */
    line-height: 1.625rem; /* 26px */
}

/* BOUKEN の寸法のカード（動画の案内と同じ形でリンクは無い）。寸法は 1 項目ずつ改行する */
.model-movie--size .model-movie__text > span {
    display: block;
}

/* 寸法の注記（Figma の PC: 13px・不透明度 80%）。SP は 12px */
.model-movie__note {
    color: #333;
    font-size: 0.75rem; /* 12px */
    letter-spacing: 0.02em;
    line-height: 1.7;
    opacity: 0.8;
}

/* 「動画を見る」。形・大きさは共通の .button のまま（ほかのページのボタンとそろえる）。SP は上の文との間 10px（Figma） */
.model-movie__button {
    margin-top: 0;
}

/* ------------------------------------------------------------
 * 標準装備（Figma「07 EQUIPMENT」95:44）
 * ------------------------------------------------------------ */

/* SP は見出し・一言は左寄せ（見出しは components.css の共通ルール）、合計の点数は一言の下に中央（Figma の SP） */
.model-equipment__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.model-equipment__intro {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 合計の点数（標準装備 23 点） */
.model-equipment__total {
    display: flex;
    align-self: center;
    align-items: baseline;
    gap: 6px;
    color: var(--color-green);
    white-space: nowrap;
}

.model-equipment__total-label {
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* 行の高さは Figma の SP（441:55）の 71px（Oswald 48px の normal）。上下の余白がこの高さで決まる */
.model-equipment__total-num {
    font-family: var(--font-num);
    font-size: 3rem; /* 48px */
    font-weight: 600;
    line-height: 71px;
}

.model-equipment__total-unit {
    font-family: var(--font-serif);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    letter-spacing: 0.125rem; /* 2px */
}

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

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

.model-equip__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 540 / 320;
    object-fit: cover;
    /*
     * Figma は写真を枠より 8% 大きくして中央で切り抜いている。枠の大きさは変えずに 1.08 倍に拡大し、
     * 拡大前の内側 3.7%（(1 - 1/1.08) / 2）で切り抜くと、拡大後にちょうど元の枠に収まる
     */
    clip-path: inset(3.7%);
    scale: 1.08;
}

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

/* 分類名と点数（下に緑の線）。Figma の SP: 20px・字間 0.8px、線 1px */
.model-equip__title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-green);
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

.model-equip__count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.6875rem; /* 11px */
    font-weight: 500;
    letter-spacing: 0;
}

.model-equip__count-num {
    font-family: var(--font-num);
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
}

/* 装備の一覧（2 列。行頭は緑の四角）。Figma の SP: 13px・行の高さ 20px、四角 5px */
.model-equip__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.model-equip__item {
    position: relative;
    padding-left: 13px;
    color: #333;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.02em;
    line-height: 1.25rem; /* 20px */
}

.model-equip__item::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: var(--color-green);
    content: "";
}

/* 電気はどれくらい使える？（薄い緑の箱） */
.model-power {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
    padding: 24px 20px;
    background-color: #e9efe9;
}

.model-power__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.model-power__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--color-white);
    background-color: var(--color-green);
}

.model-power__icon svg {
    width: 100%;
    height: 100%;
}

/* Figma の SP: 18px・字間 0.36px */
.model-power__title {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    word-break: keep-all;
}

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

/* Figma の SP: 14px・行の高さ 26px */
.model-power__text {
    color: #333;
    font-size: 0.875rem; /* 14px */
    line-height: 1.625rem; /* 26px */
}

/* ------------------------------------------------------------
 * カスタマイズ（Figma「08 CUSTOM」96:2）
 * ------------------------------------------------------------ */

.model-custom__block {
    margin-top: 40px;
}

/* 小見出し（左に緑の縦線、右にタグ）。Figma の SP: 18px・字間 0.72px、線 4×24px、間 10px */
.model-custom__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding-left: 14px;
    position: relative;
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.model-custom__sub::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 24px;
    background-color: var(--color-green);
    transform: translateY(-50%);
    content: "";
}

/* タグ（標準・オプション）。大きさは Figma の SP（11px・上下 3px 左右 8px）、色・太さは PC と同じ（「標準」もオレンジ） */
.model-custom__tag {
    padding: 3px 8px;
    color: var(--color-white);
    background-color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.6875rem; /* 11px */
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.42;
}

/* 標準で選べるもの（白いカードに色見本 4 つ）。小見出しとの間は Figma の SP どおり 16px */
.model-custom__standard {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

/* SP は名前が上、色見本が下（Figma の SP） */
.model-standard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background-color: var(--color-white);
}

/* Figma の SP: 見本 46.2px・間 7px */
.model-standard__swatches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 46px));
    gap: 7px;
}

.model-standard__swatch {
    aspect-ratio: 1;
}

.model-standard__name {
    order: -1;
    color: #333;
    font-family: var(--font-serif);
    font-size: 1rem; /* 16px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* ボディカラー（写真・名前・価格）。SP は 2 列（Figma の SP: 縦の間 16px・横の間 11px） */
.model-custom__paints {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 11px;
    margin-top: 16px;
}

.model-paint {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Figma の SP は 162×110 */
.model-paint__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 162 / 110;
    object-fit: cover;
}

/* SP は名前の下に価格（Figma の SP） */
.model-paint__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.model-paint__name {
    color: #333;
    font-family: var(--font-serif);
    font-size: 0.9375rem; /* 15px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* Figma の SP: 数字 22px・「円」11px。色は PC と同じ（「円」も緑） */
.model-yen--paint {
    gap: 2px;
    color: var(--color-green);
    font-size: 0.6875rem; /* 11px */
}

.model-yen--paint .model-yen__num {
    font-size: 1.375rem; /* 22px */
    /* Figma の行の高さ 36px */
    line-height: 1.2;
}

/* BOUKEN の標準で選べるもの（写真・名前・選べる範囲）の選べる範囲。SP は名前の下（ボディカラーの価格と同じ置き方） */
.model-paint__detail {
    color: var(--color-green);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    /* SP の 2 列で折り返すときは「・」の後で折り返す（「3段/階」のように語の途中で切らない） */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* オプション一覧（白いカードに項目と価格の行） */
.model-custom__options {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.model-option {
    padding: 18px 18px 8px;
    background-color: var(--color-white);
}

/* Figma の SP: 17px・字間 0.34px */
.model-option__title {
    color: var(--color-green);
    font-family: var(--font-serif);
    font-size: 1.0625rem; /* 17px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* SP は行の下に線（最後の行は無し）。線の色は PC と同じ */
.model-option__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 12px;
    border-bottom: 1px solid rgb(47 107 86 / 15%);
    color: #333;
}

.model-option__row:last-child {
    border-bottom: 0;
}

/* Figma の SP: 13px・行の高さ 20px */
.model-option__name {
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.02em;
    line-height: 1.25rem; /* 20px */
}

/* Figma の SP: 数字 17px・「円」10px */
.model-option .model-yen {
    font-size: 0.625rem; /* 10px */
}

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

/* 価格が決まっていないもの（BOUKEN の「確認中」）。SP は項目名と同じ 13px */
.model-option__pending {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.25rem; /* 20px */
    white-space: nowrap;
}

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

.model-custom__cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* 相談のボタン（オレンジ。色は TOP の「見学・試乗を予約」と同じ）。形・大きさは共通の .button のまま */
.model-custom__button {
    background-color: var(--color-accent);
}

@media (hover: hover) {
    .model-movie__thumb:hover .model-movie__photo {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .model-movie__photo {
        transition: none;
    }
}

/* ------------------------------------------------------------
 * タブレット（768px〜）: 横に並べられるものを並べる
 * ------------------------------------------------------------ */

@media (min-width: 768px) {
    /*
     * Figma の改行どおりに 1 行ずつ出す説明（行の span をブロックにする）。
     * 767px 以下は 1 行に入りきらず「を、」だけが次の行に落ちるなどするので、続けて流し込む
     */
    .model-mode__text > span {
        display: block;
    }

    .model-custom__standard,
    .model-custom__paints {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .model-custom__options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .model-movie {
        flex-direction: row;
        align-items: center;
    }

    .model-movie__thumb {
        flex: 0 0 52.63%; /* 600 / 1140 */
    }

    .model-movie__body {
        flex: 1;
        min-width: 0;
        padding: 28px 32px;
    }

    .model-power {
        flex-direction: row;
        align-items: center;
        gap: 32px;
        padding: 32px;
    }

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

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

/* ------------------------------------------------------------
 * PC（1024px〜）。1280px で Figma どおり
 * ------------------------------------------------------------ */

@media (min-width: 1024px) {
    /* 動画の案内・電気の説明は横に並べると幅が狭いので、1 行ずつ出すのは PC だけ */
    .model-movie__text > span,
    .model-power__text > span {
        display: block;
    }

    .model-modes,
    .model-equipment,
    .model-custom {
        /* 下の余白は山（最大 114px）+ 中身との間 60px。Figma（120px）より広げ、ボタンなどが山にかからないようにする */
        padding: 100px 70px 174px;
    }

    .model-modes__intro,
    .model-custom__intro {
        gap: 28px;
    }

    /* 一言は TOP・HIRABOについての一言と同じ 18px・行の高さ 40px */
    .model-modes__lead,
    .model-equipment__lead,
    .model-custom__lead {
        font-size: 1.125rem; /* 18px */
        line-height: 40px;
    }

    /* 3つのモード・カスタマイズの一言は中央（標準装備は左寄せのまま） */
    .model-modes__lead,
    .model-custom__lead {
        text-align: center;
    }

    /* カスタマイズの一言は 2 行 */
    .model-custom__lead-line {
        display: block;
    }

    /* 3つのモード: 3 列。真ん中だけ 40px 下げる（Figma どおり） */
    .model-modes__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
        max-width: none;
        margin-top: 60px;
    }

    .model-mode {
        gap: 20px;
    }

    /*
     * 4つのモード（BOUKEN）: 4 列で間 24px。2・4 番目を 40px 下げる（Figma どおり）。
     * 3つのモード（SUZY）は Figma Page 1（95:3）で 3 つとも上端をそろえたので下げない
     */
    .model-modes__list--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .model-modes__list--4 .model-mode:nth-child(2),
    .model-modes__list--4 .model-mode:nth-child(4) {
        padding-top: 40px;
    }

    .model-mode__photo {
        aspect-ratio: 360 / 250;
    }

    .model-mode__title {
        font-size: 1.375rem; /* 22px */
        letter-spacing: 0.125rem; /* 2px */
        /* Figma の箱の高さ 35px（22px の行の高さ normal） */
        line-height: 1.6;
    }

    /* Figma の行の高さ 28px */
    .model-mode__text,
    .model-movie__text,
    .model-power__text {
        font-size: 0.9375rem; /* 15px */
        letter-spacing: 0.02em;
        line-height: 1.87;
    }

    .model-movie {
        margin-top: 60px;
    }

    .model-movie__body {
        gap: 18px;
        padding: 0 56px;
    }

    .model-movie__play {
        width: 84px;
        height: 84px;
    }

    .model-movie__eyebrow {
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 0.16em;
    }

    .model-movie__title {
        font-size: 1.625rem; /* 26px */
        letter-spacing: 0.125rem; /* 2px */
        line-height: 1.6;
    }

    .model-movie__button {
        margin-top: 8px;
    }

    /* Figma の行の高さ 28px */
    .model-movie__note {
        font-size: 0.8125rem; /* 13px */
        line-height: 2.15;
    }

    /* 標準装備: 見出しの右下に合計の点数 */
    .model-equipment__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
    }

    .model-equipment__intro {
        gap: 28px;
    }

    .model-equipment__total {
        align-self: auto;
        gap: 8px;
    }

    .model-equipment__total-label {
        font-size: 1rem; /* 16px */
    }

    .model-equipment__total-num {
        font-size: 3.75rem; /* 60px */
        /* Figma の行の高さ 64px */
        line-height: 1.07;
    }

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

    .model-equipment__groups {
        gap: 56px;
        margin-top: 56px;
    }

    /* 写真 540px と一覧を横に並べ、2 段目（水まわり）だけ写真を右にする */
    .model-equip {
        flex-direction: row;
        align-items: flex-start;
        gap: 56px;
    }

    .model-equip__photo {
        flex: 0 0 47.37%; /* 540 / 1140 */
        width: 47.37%;
    }

    .model-equip:nth-child(even) .model-equip__photo {
        order: 1;
    }

    .model-equip__body {
        flex: 1;
        min-width: 0;
        gap: 24px;
    }

    .model-equip__title {
        gap: 10px;
        padding-bottom: 14px;
        border-bottom-width: 2px;
        font-size: 1.375rem; /* 22px */
        letter-spacing: 0.125rem; /* 2px */
    }

    .model-equip__count {
        gap: 10px;
        font-size: 0.875rem; /* 14px */
    }

    .model-equip__count-num {
        font-size: 1.75rem; /* 28px */
    }

    .model-equip__list {
        gap: 14px 24px;
    }

    .model-equip__item {
        padding-left: 16px;
        font-size: 0.9375rem; /* 15px */
        /* Figma の行の高さ 26px */
        line-height: 1.73;
    }

    .model-equip__item::before {
        top: 10px;
        width: 6px;
        height: 6px;
    }

    .model-power {
        gap: 48px;
        margin-top: 56px;
        padding: 36px 48px;
    }

    .model-power__head {
        gap: 16px;
    }

    .model-power__icon {
        width: 56px;
        height: 56px;
    }

    .model-power__title {
        font-size: 1.375rem; /* 22px */
        letter-spacing: 0.125rem; /* 2px */
        /* Figma の行の高さ 32px */
        line-height: 1.45;
    }

    /* カスタマイズ */
    .model-custom__block {
        margin-top: 64px;
    }

    .model-custom__sub {
        gap: 8px 14px;
        padding-left: 18px;
        font-size: 1.5rem; /* 24px */
        letter-spacing: 0.125rem; /* 2px */
        /* Figma の箱の高さ 38px */
        line-height: 1.58;
    }

    .model-custom__sub::before {
        height: 28px;
    }

    /* タグ。Figma の箱の高さ 23px（12px + 上下 3px） */
    .model-custom__tag {
        padding: 3px 10px;
        font-size: 0.75rem; /* 12px */
    }

    .model-custom__standard,
    .model-custom__paints,
    .model-custom__options {
        margin-top: 28px;
    }

    .model-custom__standard,
    .model-custom__paints {
        gap: 30px;
    }

    /* PC は色見本が上、名前が下 */
    .model-standard {
        gap: 20px;
        padding: 28px;
    }

    .model-standard__swatches {
        grid-template-columns: repeat(4, minmax(0, 66px));
        gap: 10px;
    }

    .model-standard__name,
    .model-paint__name {
        font-size: 1.25rem; /* 20px */
        letter-spacing: 0.125rem; /* 2px */
        line-height: 1.6;
    }

    .model-standard__name {
        order: 0;
    }

    .model-paint {
        gap: 16px;
    }

    .model-paint__photo {
        aspect-ratio: 360 / 230;
    }

    /* PC は名前と価格を 1 行に */
    .model-paint__row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 12px;
    }

    .model-yen--paint {
        gap: 3px;
        color: var(--color-green);
        font-size: 0.9375rem; /* 15px */
    }

    .model-yen--paint .model-yen__num {
        font-size: 1.875rem; /* 30px */
    }

    /* Figma の PC: 15px・行の高さ 36px */
    .model-paint__detail {
        font-size: 0.9375rem; /* 15px */
        line-height: 2.4;
    }

    .model-custom__options {
        gap: 30px;
    }

    .model-option {
        padding: 28px 32px 20px;
    }

    .model-option__title {
        padding-bottom: 16px;
        font-size: 1.1875rem; /* 19px */
        letter-spacing: 0.125rem; /* 2px */
        /* Figma の箱の高さ 30px（19px） */
        line-height: 1.58;
    }

    /* PC は行の上に線 */
    .model-option__row {
        border-top: 1px solid rgb(47 107 86 / 15%);
        border-bottom: 0;
    }

    /* 行と行の間は 4px（Figma のカードの縦並びの間隔） */
    .model-option__row + .model-option__row {
        margin-top: 4px;
    }

    .model-option__name {
        font-size: 0.9375rem; /* 15px */
        /* Figma の行の高さ 24px */
        line-height: 1.6;
    }

    .model-option .model-yen {
        font-size: 0.75rem; /* 12px */
    }

    .model-option .model-yen__num {
        font-size: 1.25rem; /* 20px */
    }

    /* Figma の PC: 15px・行の高さ 26px */
    .model-option__pending {
        font-size: 0.9375rem; /* 15px */
        line-height: 1.73;
    }

    .model-custom__note {
        margin-top: 28px;
    }

    .model-custom__cta {
        margin-top: 64px;
    }
}

/* ============================================================
 * 11/6 のデザイン（SUZY｜PCデザイン 1271:1159 / SPデザイン 1271:5406）。SUZY・BOUKEN 共通
 * ============================================================ */

/*
 * カスタマイズ（Figma「06.5 CUSTOM」PC 1271:1675 / SP 1271:5678）。
 * SP はカードの中が 名前 → 色見本 → 説明、PC は 色見本 → 名前 → 説明（order）
 */
.model-customize {
    --mtn-sp: 42px;
    --mtn-color: var(--color-white);
    position: relative;
    padding: 56px 20px 64px;
    background-color: var(--color-pale);
}

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

.model-customize__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.model-customize__block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 小見出し（左に緑の縦線）。PC は線 28px・文字 24px */
.model-customize__sub {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding-left: 14px;
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    letter-spacing: 0.75px;
    line-height: 26px;
}

.model-customize__sub::before {
    position: absolute;
    top: 1px;
    left: 0;
    width: 4px;
    height: 24px;
    background-color: var(--color-green);
    content: "";
}

.model-customize__tag {
    padding: 3px 8px;
    color: var(--color-white);
    background-color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 0.52px;
    line-height: 19px;
}

.model-customize__standard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.model-swatch-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background-color: var(--color-white);
}

.model-swatch-card__swatches {
    display: flex;
    order: 1;
    gap: 7px;
}

.model-swatch-card__swatch {
    width: 46.2px;
    height: 46.2px;
}

.model-swatch-card__name {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1rem; /* 16px */
    font-weight: 600;
    letter-spacing: 0.32px;
    line-height: 23px;
}

.model-swatch-card__text {
    order: 2;
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 28px;
}

/* SP は 1 列（Figma Page 1 の SP 709:734: 写真 335×200・カードの間 28px） */
.model-customize__paints {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.model-paint-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 写真は背景を切り抜いた車（Figma Page 1 1467:19 など）。枠に収めて全体を見せる */
.model-paint-card__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 200;
    object-fit: contain;
}

.model-paint-card__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.model-paint-card__name {
    color: #333;
    font-family: var(--font-serif);
    font-size: 0.9375rem; /* 15px */
    font-weight: 600;
    line-height: 22px;
}

.model-paint-card__price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--color-green);
    font-size: 0.8125rem; /* 13px */
    line-height: 19px;
}

.model-paint-card__num {
    font-family: var(--font-num);
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    line-height: 33px;
}

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

    .model-customize__inner {
        gap: 64px;
    }

    .model-customize__head {
        gap: 28px;
    }

    .model-customize__lead {
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.54px;
        line-height: 40px;
        text-align: center;
    }

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

    .model-customize__block {
        gap: 28px;
    }

    .model-customize__sub {
        gap: 14px;
        padding-left: 18px;
        font-size: 1.5rem; /* 24px */
        letter-spacing: 2px;
        line-height: 38px;
    }

    .model-customize__sub::before {
        top: 5px;
        height: 28px;
    }

    .model-customize__tag {
        padding: 3px 10px;
    }

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

    .model-swatch-card {
        gap: 20px;
        padding: 28px;
    }

    .model-swatch-card__swatches {
        order: 0;
        gap: 10px;
    }

    .model-swatch-card__swatch {
        width: 66px;
        height: 66px;
    }

    .model-swatch-card__name {
        font-size: 1.25rem; /* 20px */
        letter-spacing: 2px;
        line-height: 32px;
    }

    .model-swatch-card__text {
        order: 0;
    }

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

    .model-paint-card {
        gap: 16px;
    }

    .model-paint-card__photo {
        aspect-ratio: 360 / 270;
    }

    .model-paint-card__row {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }

    .model-paint-card__name {
        font-size: 1.25rem; /* 20px */
        letter-spacing: 2px;
        line-height: 30px;
    }

    .model-paint-card__price {
        gap: 3px;
        font-size: 0.9375rem; /* 15px */
    }

    .model-paint-card__num {
        font-size: 1.875rem; /* 30px */
        line-height: 36px;
    }
}

/* 3つのモード（Figma「06 MODES」PC 1271:1808 / SP 1271:5646）。上から見た配置の図は PC だけ */
.model-page .model-modes {
    --mtn-sp: 58px;
    --mtn-color: var(--color-pale);
    padding: 56px 20px 64px;
    background-color: var(--color-pale);
}

.model-page .model-modes::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: "";
}

.model-page .model-modes__list {
    gap: 32px;
}

.model-page .model-mode {
    gap: 12px;
}

.model-page .model-mode__photo {
    aspect-ratio: 335 / 220;
}

.model-page .model-mode__title {
    font-size: 1.25rem; /* 20px */
    line-height: 29px;
}

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

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

.model-mode__media {
    position: relative;
}

/*
 * 「上から見た配置」の札（Figma Page 1 694:14 など。SUZY の PC）: 写真の右下（右・下 12px）に重ねる緑の札。
 * 左に白地の図（78×37）、右に「上から見た配置」と「タップで拡大 ⤢」。押すと図を大きくしてモーダルで見せる（main.js）
 */
.model-mode__layout {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    color: var(--color-white);
    background-color: rgb(47 107 86 / 0.94);
    border: 1px solid rgb(255 255 255 / 0.35);
    box-shadow: 0 6px 8px rgb(0 0 0 / 0.22);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.model-mode__layout[hidden] {
    display: none;
}

@media (hover: hover) {
    .model-mode__layout:hover {
        background-color: var(--color-green);
    }
}

/*
 * 図の白い枠（78×37）。札にホバーしたら、札はそのまま、図だけを枠の中で拡大する（2026-11-12 ユーザー指示。Figma 694:18）。
 * 写真のホバー（.hover-zoom の 1.04 倍）だと小さい図では動きが見えないので 1.1 倍にする
 */
.model-mode__layout-frame {
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    width: 78px;
    height: 37px;
    background-color: var(--color-white);
}

.model-mode__layout-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .model-mode__layout:hover .model-mode__layout-thumb {
        transform: scale(1.1);
    }
}

.model-mode__layout-text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.model-mode__layout-caption {
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    letter-spacing: 0.52px;
}

.model-mode__layout-hint {
    color: rgb(255 255 255 / 0.78);
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
}

/* 配置の図のモーダル（形は動画のモーダル .video-modal と共通）。白地に図を大きく出す */
.layout-modal {
    width: min(100% - 40px, 720px);
}

.layout-modal__image {
    display: block;
    width: 100%;
    height: auto;
    padding: 24px;
    background-color: var(--color-white);
    object-fit: contain;
}

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

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

    .model-page .model-modes__inner {
        gap: 60px;
    }

    .model-page .model-modes__intro {
        gap: 28px;
        margin-bottom: 0;
    }

    .model-page .model-modes__lead {
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.54px;
    }

    .model-page .model-modes__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
    }

    .model-page .model-mode {
        gap: 20px;
    }

    .model-page .model-mode__photo {
        aspect-ratio: 360 / 250;
    }

    .model-page .model-mode__title {
        font-size: 1.375rem; /* 22px */
        letter-spacing: 2px;
        line-height: 35px;
    }

    .model-page .model-mode__text {
        letter-spacing: 0.32px;
    }

    .model-page .model-movie {
        align-items: center;
        background-color: var(--color-pale);
        box-shadow: 0 8px 16px rgb(0 0 0 / 0.08);
    }

    .model-page .model-movie__thumb {
        flex: 0 0 calc(600 / 1140 * 100%);
    }

    .model-page .model-movie__body {
        gap: 18px;
        padding: 0 56px;
    }

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

    .model-page .model-movie__text {
        letter-spacing: 0.32px;
    }

    .model-page .model-movie__button {
        min-width: 240px;
        min-height: 60px;
        margin-top: 8px;
        padding: 0 28px;
        font-size: 1rem; /* 16px */
        letter-spacing: 0.32px;
    }
}

/*
 * 標準装備（Figma「07 EQUIPMENT」PC 1271:1864 / SP 1271:5797）。
 * 分類 → 緑がかった枠のポイント → そのほかの写真カード。SP のポイントは 番号 → 写真 → 見出し → 説明の順（.model-point__body を display: contents にして order で並べる）
 */
.model-equip {
    --mtn-sp: 34px;
    --mtn-color: var(--color-pale);
    position: relative;
    padding: 56px 20px 72px;
    background-color: var(--color-white);
}

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

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

.model-equip__lead {
    width: 100%;
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 30px;
}

.model-equip__count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-green);
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
}

.model-equip__count-num {
    font-family: var(--font-num);
    font-size: 3rem; /* 48px */
    font-weight: 600;
    line-height: 71px;
}

.model-equip__count-unit {
    font-family: var(--font-serif);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
}

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

.model-equip__nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    color: var(--color-green);
    background-color: var(--color-pale);
    border: 1px solid var(--color-green);
    border-radius: 3px;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
}

.model-equip__nav-num {
    color: var(--color-accent);
    font-family: var(--font-num);
    font-size: 1.0625rem; /* 17px */
    font-weight: 600;
}

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

.model-equip__group-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 10px;
    color: #333;
    border-bottom: 1px solid var(--color-green);
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
}

.model-equip__group-num {
    color: var(--color-accent);
    font-family: var(--font-num);
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
}

.model-equip__group-unit {
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
}

.model-equip__panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px 20px;
    background-color: #eef2ec;
}

.model-equip__panel-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.model-equip__panel-for {
    color: var(--color-accent);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 25px;
}

.model-equip__panel-title {
    color: var(--color-green);
    font-family: var(--font-serif);
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 34px;
}

/* SP は文節ごとに 1 行（Figma の改行） */
.model-equip-line {
    display: block;
}

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

.model-point + .model-point {
    padding-top: 24px;
    border-top: 1px solid #bbcec5;
}

.model-point__media {
    position: relative;
    order: 1;
}

.model-point__media--many {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 13px;
    align-items: start;
}

.model-point__photo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.model-point__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 295 / 196;
    object-fit: cover;
}

.model-point__media--many .model-point__photo img {
    aspect-ratio: 1;
}

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

/* 「ワンちゃん連れにおすすめ」の札。両端は丸く（Figma 774:14・770:15 の rounded 999px。2026-11-12 Chatwork で PC も） */
.model-point__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 6px;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: 999px;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    line-height: 21px;
}

.model-point__badge img {
    display: block;
    width: 18px;
    height: 18px;
}

/* SP は本文の箱を解いて、番号 → 写真 → 見出しの順に並べる */
.model-point__body {
    display: contents;
}

.model-point__label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    order: 0;
    color: #5d655f;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    line-height: 20px;
}

.model-point__no {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--color-accent);
    font-family: var(--font-num);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: 18px;
}

.model-point__no-num {
    font-size: 1.625rem; /* 26px */
    line-height: 30px;
}

.model-point__title {
    order: 2;
    color: var(--color-green);
    font-family: var(--font-serif);
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    line-height: 34px;
}

.model-point__text {
    order: 3;
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 28px;
}

.model-point__checks {
    display: flex;
    flex-direction: column;
    order: 4;
    gap: 12px;
}

/* Figma は文字の左に緑の「・」があるが、2026-11-12 Chatwork（赤嶺さん）で外した。文字は上の説明と左をそろえる */
.model-point__check {
    display: flex;
    flex-direction: column;
    color: #333;
}

.model-point__check-name {
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    line-height: 26px;
}

.model-point__check-text {
    font-size: 1rem; /* 16px */
    line-height: 28px;
}

.model-equip__note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 20px;
    color: #333;
    border-top: 1px solid #bbcec5;
    font-size: 1rem; /* 16px */
    line-height: 28px;
}

/* 注記の下の小見出し（「もっと長く電気を使いたい方へ」）。上を少しあけて太字にする */
.model-equip__note-title {
    margin-top: 10px;
    font-weight: 700;
}

.model-equip__others {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.model-equip__others-title {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.0625rem; /* 17px */
    font-weight: 600;
    line-height: 28px;
}

.model-equip__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 15px;
}

.model-equip-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.model-equip-card__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.model-equip-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.model-equip-card__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.model-equip-card__name {
    color: var(--color-green);
    font-family: var(--font-sans);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 24px;
}

.model-equip-card__sub {
    display: block;
    color: #808080;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    line-height: 1.5;
}

.model-equip-card__tag {
    padding: 0 7px;
    color: var(--color-green);
    border: 1px solid #bbcec5;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    line-height: 22px;
}

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

/* SP の行の形（水まわり）: 80px の写真の右に文字 */
@media (max-width: 1023px) {
    .model-equip__others--rows .model-equip__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .model-equip__others--rows .model-equip-card {
        flex-direction: row;
        gap: 12px;
    }

    .model-equip__others--rows .model-equip-card__photo {
        flex-shrink: 0;
        width: 80px;
        border-radius: 3px;
    }

    .model-equip__others--rows .model-equip-card__body {
        gap: 2px;
    }

    .model-equip__others--rows .model-equip-card__name {
        font-size: 0.875rem; /* 14px */
        line-height: 22px;
    }

    .model-equip__others--rows .model-equip-card__sub {
        display: inline;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .model-equip__others--rows .model-equip-card__text {
        line-height: 28px;
    }
}

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

    .model-equip__inner {
        gap: 56px;
    }

    .model-equip__group {
        gap: 32px;
    }

    .model-equip__group-title {
        gap: 8px;
        padding-bottom: 12px;
        font-size: 1.375rem; /* 22px */
    }

    .model-equip__group-num {
        font-size: 1.75rem; /* 28px */
    }

    .model-equip__panel {
        gap: 32px;
        padding: 40px;
        border-radius: 3px;
    }

    .model-equip__panel-head {
        gap: 6px;
    }

    .model-equip__panel-for {
        line-height: 24px;
    }

    .model-equip__panel-title {
        font-size: 1.75rem; /* 28px */
        line-height: 40px;
    }

    .model-equip-line {
        display: inline;
    }

    .model-point {
        flex-direction: row;
        gap: 40px;
    }

    .model-point + .model-point {
        padding-top: 32px;
    }

    .model-point__media {
        flex: 0 0 calc(500 / 1060 * 100%);
        order: 0;
    }

    .model-point__media--many {
        display: flex;
        gap: 20px;
    }

    .model-point__media--many .model-point__photo {
        flex: 1 1 0;
        min-width: 0;
        gap: 8px;
    }

    .model-point__photo img {
        aspect-ratio: 500 / 333;
        border-radius: 3px;
    }

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

    .model-point__badge {
        top: 12px;
        left: 12px;
        gap: 6px;
        padding: 3px 12px 3px 10px;
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 0.52px;
        line-height: 26px;
    }

    .model-point__badge img {
        width: 26px;
        height: 26px;
    }

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

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

    .model-point__title {
        font-size: 1.625rem; /* 26px */
        line-height: 38px;
    }

    .model-point__checks {
        gap: 14px;
    }

    .model-point__check-name {
        font-size: 1.1875rem; /* 19px */
        line-height: 28px;
    }

    .model-equip__note {
        padding-top: 24px;
    }

    .model-equip__others-title {
        font-size: 1.125rem; /* 18px */
    }

    .model-equip__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 40px 24px;
    }

    .model-equip-card {
        gap: 10px;
    }

    .model-equip-card__body {
        gap: 0;
    }

    /* 札は名前のすぐ右（Figma: 間 8px。SUZY 1271:2051 / BOUKEN 1271:4472）。入らなければ次の行へ */
    .model-equip-card__head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
    }

    .model-equip-card__name {
        font-size: 1.0625rem; /* 17px */
        line-height: 26px;
    }

    .model-equip-card__sub {
        display: inline;
        font-size: 0.75rem; /* 12px */
        line-height: 26px;
    }

    .model-equip-card__tag {
        padding: 2px 8px;
        line-height: 20px;
    }

    /*
     * 補足と札の両方がある名前（SUZY「リア家具（左側上部収納庫）」＋「色を選べる」。Figma 1242:9）は札まで 1 行に収める（2026-11-12 Chatwork）。
     * カードが 267px（1280px）で名前 176px + 札 83px がちょうど入る幅なので、それより狭い画面（1024〜1279px・スクロールバーのある 1280px）は
     * カードの幅に合わせて文字と札を小さくする（cqi は名前の行の幅に対する割合。17 / 267 ≒ 6.37% など）。下限まで小さくしても入らない幅（約 1080px 未満）は札が次の行へ
     */
    .model-equip-card__head--fit {
        justify-content: space-between;
        column-gap: 4px;
        container-type: inline-size;
    }

    .model-equip-card__head--fit .model-equip-card__name {
        font-size: clamp(0.875rem, 6.37cqi, 1.0625rem); /* 14〜17px */
        white-space: nowrap;
    }

    .model-equip-card__head--fit .model-equip-card__sub {
        font-size: clamp(0.625rem, 4.49cqi, 0.75rem); /* 10〜12px */
    }

    .model-equip-card__head--fit .model-equip-card__tag {
        padding-inline: clamp(6px, 3cqi, 8px);
        font-size: clamp(0.6875rem, 4.87cqi, 0.8125rem); /* 11〜13px */
    }
}

/*
 * オプション一覧（Figma「08 OPTIONS」PC 1271:2640 / SP 1271:6590）。
 * 写真カードは SP 2 列・PC 4 列。クーラーだけ 2 列分の幅。小見出し・分類のボタン・分類の見出しは標準装備・カスタマイズと共通
 */
.model-options {
    --mtn-sp: 42px;
    --mtn-color: var(--color-white);
    position: relative;
    padding: 56px 20px 88px;
    background-color: var(--color-pale);
}

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

.model-options__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.model-options__hints {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.model-options__hints-title {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    line-height: 1.5;
}

.model-options__hints-lead,
.model-options__hint dd {
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 1.7;
}

.model-options__hint {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block: 18px;
    border-top: 1px solid #dde6df;
}

.model-options__hint dt {
    color: var(--color-green);
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    line-height: 1.5;
}

.model-options__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

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

.model-options__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 15px;
}

.model-option-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.model-option-card--wide {
    grid-column: span 2;
}

.model-option-card__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 3px;
    object-fit: cover;
}

.model-option-card--wide .model-option-card__photo {
    aspect-ratio: 558 / 372;
}

.model-option-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.model-option-card__name {
    color: var(--color-green);
    font-family: var(--font-sans);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 24px;
}

.model-option-card--wide .model-option-card__name {
    font-size: 1.1875rem; /* 19px */
    line-height: 28px;
}

.model-option-card__sub {
    display: block;
    color: #808080;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    line-height: 1.5;
}

.model-option-card__prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-option-card__price dd {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: #333;
    font-size: 0.8125rem; /* 13px */
    line-height: 30px;
    white-space: nowrap;
}

.model-option-card__num {
    font-family: var(--font-num);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
}

.model-option-card--wide .model-option-card__num {
    font-size: 1.625rem; /* 26px */
}

/* 価格が複数ある項目: ラベルと価格を 1 行に、下に罫線 */
.model-option-card__price--labeled {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #bbcec5;
}

.model-option-card__price--labeled dt {
    color: #5d655f;
    font-size: 0.8125rem; /* 13px */
    line-height: 20px;
}

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

/* 最安値（価格が複数ある項目。Figma Page 1 1305:8 など: 数字 22px・「円〜」13px） */
.model-option-card__from {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: #333;
    font-size: 0.8125rem; /* 13px */
    line-height: 30px;
}

/* 内訳の箱（Figma Page 1: 地 #ebf1ec・余白 6px 14px、行の下に #d3dfd7 の線。最後の行は線なし） */
.model-option-card__prices--table {
    gap: 0;
    padding: 6px 14px;
    background-color: #ebf1ec;
}

.model-option-card__prices--table .model-option-card__price--labeled {
    padding-block: 4px;
    border-bottom-color: #d3dfd7;
}

.model-option-card__prices--table .model-option-card__price--labeled:last-child {
    border-bottom: 0;
}

.model-option-card__note {
    color: var(--color-green);
    font-size: 1rem; /* 16px */
    line-height: 28.8px;
}

.model-options__note {
    color: rgb(51 51 51 / 0.75);
    font-size: 0.875rem; /* 14px */
    line-height: 1.6;
}

/* 相談のボタン（Figma: 400×72px・アクセント色。SP は横幅いっぱい） */
.model-options__cta {
    background-color: var(--color-accent);
}

/*
 * 家電の表（Figma SP 769:29 / PC 769:19。原稿の power）。PC にも出すかは power.public（SUZY は 2026-11-11 から PC にも出す）。
 * 上の余白は Figma の外枠の 28px と中の上 8px を足した 36px
 */
.model-power-table {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 36px 12px 28px;
    background-color: #eef2ec;
}

.model-power-table__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.model-power-table__eyebrow {
    color: var(--color-accent);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 24px;
}

.model-power-table__title {
    color: var(--color-green);
    font-family: var(--font-sans);
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    line-height: 1.5;
}

/* Figma SP の文の幅は 295px（枠の 311px より 16px 狭い）なので、右を空けて同じ所で折り返す */
.model-power-table__lead {
    padding-right: 16px;
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 28px;
}

/* 数値が確認中であることを示す赤い札（Figma SP 764:108） */
.model-power-table__tag {
    padding: 4px 10px;
    color: var(--color-white);
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    line-height: normal;
    background-color: #cc2929;
}

/*
 * Figma SP どおり、白い枠（311px）の中に 3 列の合計 295px の表を置き、右に 16px の白を残す（表の幅を 16px 狭め、右に白の影を足す）。
 * 列幅は 2・3 列目が 80px・92px（295px に対する割合）、1 列目は残り（375px で 123px）。
 * 1.25 倍・2.625 倍などでは列の境目に下の色が線になって出るので、表に白地を敷き、
 * 見出しの緑は右に 1px の影を重ねて境目をふさぐ（最後の列は表の外にはみ出すので付けない）
 */
.model-power-table table {
    width: calc(100% - 16px);
    table-layout: fixed;
    border-collapse: collapse;
    background-color: var(--color-white);
    box-shadow: 16px 0 0 var(--color-white);
}

.model-power-table thead th:not(:last-child) {
    box-shadow: 1px 0 0 var(--color-green);
}

.model-power-table thead th:nth-child(2) {
    width: calc(80 / 295 * 100%);
}

.model-power-table thead th:nth-child(3) {
    width: calc(92 / 295 * 100%);
}

.model-power-table th,
.model-power-table td {
    padding: 12px 4px;
    font-size: 1rem; /* 16px */
    line-height: 24px;
    text-align: center;
    background-color: var(--color-white);
    border-bottom: 1px solid #d5dfd9;
}

.model-power-table tr > :first-child {
    padding-left: 10px;
    text-align: left;
}

.model-power-table thead th {
    color: var(--color-white);
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    background-color: var(--color-green);
    border-bottom: 0;
}

/* 「標準／バッテリー」は幅が足りないときだけこの区切りで折り返す（SP の 375px で Figma どおり 2 行、広い画面は 1 行） */
.model-power-table thead th > span {
    display: inline-block;
}

.model-power-table tbody th {
    color: #333;
    font-weight: 700;
}

.model-power-table tbody td {
    color: var(--color-green);
    font-weight: 500;
}

/* 最後の行は下線なし（Figma SP 764:176） */
.model-power-table tbody tr:last-child > * {
    border-bottom: 0;
}

.model-power-table__note,
.model-power-table__more {
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 27px;
}

.model-power-table__more-title {
    font-weight: 700;
}

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

    .model-options__inner {
        gap: 64px;
    }

    .model-options__head {
        gap: 28px;
    }

    .model-options__lead {
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.54px;
        line-height: 40px;
        text-align: center;
    }

    .model-options__list {
        gap: 48px;
    }

    .model-options__group {
        gap: 32px;
    }

    .model-options__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 40px 24px;
    }

    .model-option-card {
        gap: 10px;
    }

    .model-option-card__body {
        gap: 10px;
    }

    .model-option-card__name {
        font-size: 1.0625rem; /* 17px */
        line-height: 26px;
    }

    .model-option-card--wide .model-option-card__name {
        font-size: 1.375rem; /* 22px */
        line-height: 32px;
    }

    /*
     * 名前の補足（例「（鉛100Ah）」）は名前のすぐ後ろに同じ行で続け、12px・灰色（Figma Page 1 SUZY 715:92 / BOUKEN 1031:314）。
     * 補足の途中では折り返さず、入りきらないときは補足ごと次の行へ（Figma のリチウムイオンバッテリーと同じ）
     */
    .model-option-card__sub {
        display: inline;
        font-size: 0.75rem; /* 12px */
        white-space: nowrap;
    }

    .model-option-card__num {
        font-size: 1.375rem; /* 22px */
    }

    /* 価格の行の右端の補足（リチウムイオンバッテリーの「（125Ah×2個＝250Ah）」。Figma 715:100: 12px・灰色・行の高さ 25px）。入らない幅は次の行の右端へ */
    .model-option-card__price dd:has(.model-option-card__spec) {
        flex-wrap: wrap;
    }

    .model-option-card__spec {
        margin-left: auto;
        color: #808080;
        font-size: 0.75rem; /* 12px */
        font-weight: 500;
        line-height: 25px;
    }

    .model-option-card--wide .model-option-card__num {
        font-size: 1.875rem; /* 30px */
    }

    .model-option-card__price--labeled dt {
        font-size: 0.875rem; /* 14px */
        line-height: 22px;
    }

    .model-option-card__note {
        line-height: 33px;
    }

    .model-options__note {
        font-size: 1rem; /* 16px */
        letter-spacing: 0.32px;
    }

    .model-options__cta {
        align-self: center;
        width: 400px;
        min-height: 72px;
        letter-spacing: 0.11em;
    }

    /* Figma PC 769:19: 枠の内側 40px（上は中の 16px を足して 56px）、見出し・表・注記の間 24px */
    .model-power-table {
        gap: 24px;
        padding: 56px 40px 40px;
    }

    .model-power-table__title {
        font-size: 1.5rem; /* 24px */
        line-height: 36px;
    }

    /* 札は文字の幅（Figma PC 764:16。SP は枠の幅いっぱい） */
    .model-power-table__tag {
        align-self: flex-start;
        font-size: 0.8125rem; /* 13px */
    }

    /* PC の表は枠の幅いっぱい（SP の右の 16px の白は付けない）。列は 500・260・300px（1060px に対する割合） */
    .model-power-table table {
        width: 100%;
        box-shadow: none;
    }

    .model-power-table th,
    .model-power-table td {
        padding: 16px 24px;
        font-size: 1rem; /* 16px */
        line-height: 26px;
    }

    .model-power-table tr > :first-child {
        padding-left: 24px;
    }

    .model-power-table thead th {
        font-size: 0.9375rem; /* 15px */
    }

    .model-power-table table th:first-child {
        width: calc(500 / 1060 * 100%);
    }

    .model-power-table thead th:nth-child(2) {
        width: calc(260 / 1060 * 100%);
    }

    .model-power-table thead th:nth-child(3) {
        width: calc(300 / 1060 * 100%);
    }
}

/* 下の余白: SP の山の高さの分（オプションの次は価格の白・標準装備の次はオプションの薄い緑） */
@media (min-width: 1024px) {
    .model-page .model-use__contact-text > span {
        display: block;
    }
}

/* SP のセクションの背景と山の色（Figma の SP は PC と順が違うので、交互の色も違う） */
@media (max-width: 1023px) {
    .model-page .model-modes {
        --mtn-color: var(--color-pale);
        background-color: var(--color-white);
    }

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

    .model-page .model-movie__button {
        min-height: 52px;
    }

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

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

    /*
     * オーナーのカードは TOP の SP と同じ 2 列 × 2 段（共通の .owners__cards。文字の大きさは top.css）。
     * Figma「Owners / Cards（横スクロール）」1271:5756 の横スクロールから、2026-11-09 赤嶺さんの依頼で変えた
     */
}

/* ============================================================
 * BOUKEN（Figma 1271:3611）の違い
 * ============================================================ */

/* ベッドの高さの図（Figma「Bed / 高さ3段階」1271:4289）。棒の下端をそろえる。SP は色見本と同じく名前の下へ（order） */
/*
 * ベッド下の高さの図（Figma Page 1「Bed / 高さ3段階」1424:8）: 幅 66px の箱（高さと色はテンプレートの style）の中に、ラベル（12px）と高さ（Oswald 17px + cm 11px）。
 * 箱の間 10px、下でそろえる
 */
.model-bed-heights {
    display: flex;
    order: 1;
    align-items: flex-end;
    gap: 10px;
}

.model-bed-heights__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 66px;
    line-height: 1.3;
    white-space: nowrap;
}

.model-bed-heights__label {
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
}

.model-bed-heights__value {
    font-size: 0.6875rem; /* 11px（cm） */
    font-weight: 500;
}

.model-bed-heights__num {
    font-family: var(--font-num);
    font-size: 1.0625rem; /* 17px */
    font-weight: 600;
}

/* 説明の下の札（Figma Page 1「Tag / 注文時に選択」1424:19）: オレンジの枠と文字 */
.model-swatch-card__tag {
    order: 3;
    align-self: flex-start;
    padding: 2px 8px;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    line-height: normal;
}

.model-swatch-card__note {
    order: 3;
    color: #333;
    font-size: 0.875rem; /* 14px */
    line-height: 1.45;
}

.model-swatch-card__note > span {
    display: block;
}

/* 寸法の図（Figma「Size / Photo」1271:4236）: 写真の上に線と数字を重ねる。位置は写真に対する % */
.model-movie__thumb {
    position: relative;
}

.model-movie__dims {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.model-movie__dim-label {
    position: absolute;
    padding: 2px 5px;
    color: var(--color-white);
    background-color: #2e5445;
    border-radius: 3px;
    font-size: 0.625rem; /* 10px */
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

.model-movie__dim-note {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 5px;
    color: #2e5445;
    background-color: rgb(247 249 244 / 0.92);
    border-radius: 3px;
    font-size: 0.625rem; /* 10px */
    font-weight: 700;
    line-height: 1.45;
}

/* 標準装備の分類の並び。BOUKEN は写真カードだけで、PC は 2 分類を横に並べ、電源は全幅で右に説明（SUZY は縦に積むだけ） */
.model-equip__groups {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

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

.model-equip__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 20px;
    background-color: #e9efe9;
}

.model-equip__info-title {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 32px;
}

.model-equip__info-title img {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

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

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

/* オプション: 写真が届いていない項目の灰色の枠（Figma「写真なし・先方提供が必要」） */
.model-option-card__photo--none {
    display: block;
    background-color: #d9ded6;
}

/* 1 列（SP の幅の広いもの）に写真がはみ出さないよう、BOUKEN の 4 つのモードの SP は SUZY の SP と同じ大きさ */
.model-page--bouken .model-mode__text > span {
    display: inline;
}

/* 寸法の写真は上に線と数字を重ねるので、比率を固定する（SP も同じ） */
.model-page--bouken .model-movie__thumb {
    aspect-ratio: 600 / 421;
}

.model-page--bouken .model-movie__photo {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.model-page--bouken .model-equip-card__head {
    justify-content: flex-start;
}

.model-equip-card__sub--below {
    display: block;
    margin-top: 2px;
    color: #808080;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
}

@media (min-width: 1024px) {
    /* BOUKEN の余白は Figma Page 1（2026-11-10）: 上 70px・下は山の高さ + 60px */
    .model-page--bouken .model-modes {
        --mtn-pc: 117;
        --mtn-flip: 1;
        padding: 70px 70px 177px;
    }

    .model-page--bouken .model-modes__lead {
        line-height: 26px;
    }

    .model-page--bouken .model-modes__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .model-page--bouken .model-mode__photo {
        aspect-ratio: 267 / 185;
    }

    .model-page--bouken .model-mode__title {
        line-height: 32px;
    }

    .model-page--bouken .model-mode__text {
        line-height: 30px;
    }

    /* 寸法のカード: 白地で、写真の右に文字（上下の余白 48px） */
    .model-page--bouken .model-movie {
        align-items: flex-start;
        background-color: var(--color-white);
    }

    /* 文字の幅は Figma の 470px（右の余白は 14px） */
    .model-page--bouken .model-movie__body {
        padding: 48px 14px 48px 56px;
    }

    .model-page--bouken .model-movie__thumb {
        align-self: flex-start;
    }

    .model-page--bouken .model-movie__note {
        margin-top: 0;
        font-size: 1rem; /* 16px */
        letter-spacing: 0.32px;
        line-height: 34px;
    }

    .model-movie__dim-label {
        padding: 4px 10px;
        font-size: 1rem; /* 16px */
    }

    .model-movie__dim-note {
        top: 12px;
        left: 12px;
        padding: 5px 10px;
        font-size: 0.875rem; /* 14px */
    }

    .model-page--bouken .model-customize {
        --mtn-pc: 103;
        padding: 70px 70px 163px;
    }

    .model-bed-heights,
    .model-swatch-card__tag {
        order: 0;
    }

    .model-swatch-card__note {
        order: 0;
    }

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

    .model-equip--simple .model-equip__intro {
        margin-top: -28px;
    }

    .model-equip--simple .model-equip__lead {
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.54px;
        line-height: 26px;
        text-align: center;
    }

    .model-equip__groups {
        gap: 56px;
    }

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

    .model-equip__group--wide {
        grid-column: 1 / -1;
    }

    .model-equip--simple .model-equip__group {
        gap: 24px;
    }

    .model-equip--simple .model-equip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .model-equip__group--wide .model-equip__row {
        flex-direction: row;
        align-items: flex-start;
    }

    .model-equip__group--wide .model-equip__grid {
        flex: 0 0 calc(267 / 1140 * 100%);
        grid-template-columns: minmax(0, 1fr);
    }

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

    .model-equip__info-title {
        font-size: 1.375rem; /* 22px */
    }

    .model-equip__info-title img {
        width: 56px;
        height: 56px;
    }

    .model-equip__info-text {
        letter-spacing: 0.32px;
    }

    /* 名前の補足は 12px・灰色（Figma Page 1 1243:13 など。SUZY と同じ） */
    .model-page--bouken .model-equip-card__sub {
        font-size: 0.75rem; /* 12px */
    }

    .model-page--bouken .model-equip-card__body {
        gap: 10px;
    }

    .model-equip-card__sub--below {
        margin-top: 0;
        font-size: 0.75rem; /* 12px（Figma Page 1 1242:15） */
    }

    .model-page--bouken .model-options {
        --mtn-pc: 110;
        --mtn-flip: 1;
        padding-bottom: 170px;
    }

    .model-page--bouken .model-option-card--wide {
        grid-column: span 2;
    }

}

/* 4 つのモードの説明は 1280px から Figma の改行どおり（狭い PC は行の途中で折り返すので続けて流し込む） */
@media (min-width: 1280px) {
    .model-page--bouken .model-mode__text > span {
        display: block;
    }
}

/* ============================================================
 * BOUKEN の SP（Figma Page 1 の BOUKEN の SP 1533:14。2026-11-10 にデザイナーが修正）
 * 〜1023px だけ。PC（1024px〜）は変えない
 * ============================================================ */
@media (max-width: 1023px) {
    /* 4 つのモードは モード名 → 写真 → 説明 の順（Figma SP 1533:541。2026-11-11 ユーザー指示「タイトル写真文章の順に」）。寸法のカードは写真が上のまま */
    .model-page--bouken .model-mode__title {
        order: -1;
    }

    /* 寸法のカード（Figma SP 1533:557）: 白地・影 0 8px 16px（SP 共通の .model-page .model-movie は薄い緑の地） */
    .model-page--bouken .model-movie {
        background-color: var(--color-white);
        box-shadow: 0 8px 16px rgb(0 0 0 / 0.08);
    }

    /* 注記は本文の色で 14px・行の高さ 30px（Figma SP 1533:586。不透明度と字間の指定は無い） */
    .model-page--bouken .model-movie__note {
        font-size: 0.875rem; /* 14px */
        letter-spacing: 0;
        line-height: 30px;
        opacity: 1;
    }

    /*
     * 標準装備の写真カード（Figma SP 1533:777・782・796・806・817）: 1 列で、写真 335×220 の下に名前（17px・行の高さ 26px）と説明。
     * 分類の見出しと品目の間・品目の間は 24px、写真・名前・説明の間は 10px
     */
    .model-page--bouken .model-equip__group {
        gap: 24px;
    }

    .model-page--bouken .model-equip__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .model-page--bouken .model-equip-card,
    .model-page--bouken .model-equip-card__body {
        gap: 10px;
    }

    .model-page--bouken .model-equip-card__photo {
        aspect-ratio: 335 / 220;
    }

    /* 名前と札は横に並べる（Figma SP 1533:784・799。間 8px） */
    .model-page--bouken .model-equip-card__head {
        flex-direction: row;
        align-items: center;
    }

    .model-page--bouken .model-equip-card__name {
        font-size: 1.0625rem; /* 17px */
        line-height: 26px;
    }

    /* 札は行の高さ 20px・余白 2px 8px（Figma SP 1533:788） */
    .model-page--bouken .model-equip-card__tag {
        padding: 2px 8px;
        line-height: 20px;
    }

    /* 名前の下の補足（リア家具・ポータブル電源の置き場）は 12px。名前の行との間は 2px なので、本文との間の 10px（gap）から 8px 詰める（Figma SP 1533:798） */
    .model-page--bouken .model-equip-card__sub--below {
        margin-top: -8px;
        font-size: 0.75rem; /* 12px */
    }

    /* ポータブル電源の置き場（全幅の分類）の補足は名前と同じ段落の 2 行目で、間をあけず行の高さ 26px（Figma SP 1533:821） */
    .model-page--bouken .model-equip__group--wide .model-equip-card__sub--below {
        margin-top: -10px;
        line-height: 26px;
    }

    /* 電気はどう使う？（Figma SP 1533:823）: 余白 20px、アイコン 56px（1533:825） */
    .model-page--bouken .model-equip__info {
        padding: 20px;
    }

    .model-page--bouken .model-equip__info-title img {
        width: 56px;
        height: 56px;
    }

    /*
     * オプションのポータブルクーラー（Figma SP 1533:2283）: PC は全幅（--wide）だが、SP はほかと同じ半幅で写真 160×160。
     * 名前は 22px・行の高さ 32px、価格は 30px（行の高さは Oswald の normal で約 44px）
     */
    .model-page--bouken .model-option-card--wide {
        grid-column: auto;
    }

    .model-page--bouken .model-option-card--wide .model-option-card__photo {
        aspect-ratio: 1;
    }

    .model-page--bouken .model-option-card--wide .model-option-card__name {
        font-size: 1.375rem; /* 22px */
        line-height: 32px;
    }

    .model-page--bouken .model-option-card--wide .model-option-card__num {
        font-size: 1.875rem; /* 30px */
    }

    .model-page--bouken .model-option-card--wide .model-option-card__price dd {
        line-height: normal;
    }
}

/*
 * 標準装備の緑の枠のポイント（SUZY の家具・水まわり・電装の 3 つ）: SP は ラベル → 見出し → 写真 → 文 → できること の順
 * （Figma Page 1 の SP 758:279 など。2026-11-10 18:53 Chatwork「タイトル、画像、文章の順に」）。間はどれも 14px（.model-point の gap）
 */
@media (max-width: 1023px) {
    .model-point__title {
        order: 1;
    }

    .model-point__media {
        order: 2;
    }
}