@charset "UTF-8";

/* TOP ページ専用（front-page.php のときだけ読み込む）。下層ページでも使う部品（見出し・記事カード・スライダー・動画モーダル・SNS バナー）は components.css */

/*
 * KV（Figma「Hero」PC 2041:5362 / SP 2041:5947 = FV + Intro）
 * 背景動画を画面に固定し、その上を FV → Intro が透過したままスクロールする。
 * 次のセクションは背景色で動画を覆う。KV が画面外に出たら main.js が is-offscreen を付けて動画を止める。
 */
.hero {
    position: relative;
    color: var(--color-white);
}

.hero__bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--color-ink);
}

.hero.is-offscreen .hero__bg {
    visibility: hidden;
}

.hero__poster img,
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 動画は再生が始まってから見せる（それまでは下の静止画。読み込み中や動画の切り替え中に黒い枠を出さない）。main.js が is-playing を付ける */
.hero__video {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero__video.is-playing {
    opacity: 1;
}

/*
 * SP（〜1023px）は Figma の SP、1024px 以上は PC の値（文字の大きさは画面の幅で変えず、この 2 段階にする。2026-10-19 ユーザー指示）
 * 改行位置を文節で制御する（span ごとに折り返す）
 */
.hero__catch,
.hero__lead,
.hero__intro-title {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/*
 * FV のキャッチとサブコピーは、〜767px は Figma の SP どおり必ず 2 行・3 行、768px 以上は PC どおり 1 行にする。
 * 幅に任せると、キャッチだけ 2 行・サブコピーは 1 行になる幅（480〜700px 前後）や、キャッチが 1 行で画面の端まで届く幅ができる
 */
.hero__catch > span,
.hero__lead > span {
    display: block;
}

@media (min-width: 768px) {
    .hero__catch > span,
    .hero__lead > span {
        display: inline-block;
    }
}

.hero__fv {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 20px;
    text-align: center;
    background-color: rgb(10 13 10 / 0.2);
}

/* Figma: SP 34px / PC 35px */
.hero__catch {
    font-family: var(--font-serif);
    font-size: 2.125rem; /* 34px */
    font-weight: 600;
    letter-spacing: 5px;
    line-height: 50px;
}

.hero__lead {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 27px;
    opacity: 0.7;
}

/* SP は画面下の固定ボタン（56px）のすぐ上に置く */
.hero__scroll {
    position: absolute;
    bottom: var(--cta-bar-height);
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-family: var(--font-serif);
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    letter-spacing: 0.125rem; /* 2px */
    line-height: 1.2;
    transform: translateX(-50%);
}

.hero__scroll::after {
    width: 2px;
    height: 56px;
    background-color: currentColor;
    content: "";
}

@media (prefers-reduced-motion: no-preference) {
    .hero__scroll::after {
        animation: hero-scroll-line 2.4s ease-in-out infinite;
    }
}

@keyframes hero-scroll-line {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }

    51% {
        transform: scaleY(1);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

.hero__intro {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 72px 20px 104px;
    background-color: rgb(10 13 10 / 0.6);
    overflow-x: clip;
}

/* 〜599px は Figma の SP の幅（335px）で中央に置き、Figma の SP と同じ位置で改行する。600px 以上は 560px（PC と同じ） */
.hero__intro-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(100%, 335px);
}

.hero__intro-title {
    font-family: var(--font-serif);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 28px;
}

/* 改行を入れず幅に任せて流す（Figma SP 866:1435。2026-11-12 に 1 段落に変更） */
.hero__intro-text {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 32px;
}

@media (min-width: 600px) {
    .hero__intro-body {
        width: min(100%, 560px);
    }

    /* Figma の行の高さ 40px */
    .hero__intro-text {
        font-size: 1.125rem; /* 18px */
        line-height: 40px;
    }
}

/* 右下の山。大きさは共通の飾りの山（.deco-mountain。layout.css） */
/*
 * 山の下端は小数のピクセルになり、下の背景が細い線のように透けるので、接する側へ 1px 重ねる（重なる先は同じ色）。
 * そのため .hero__intro は横だけ切る（縦も切ると重ねた 1px が切られ、境目の 1 列を山が塗りきらない）
 */
.hero__mountain {
    bottom: -1px;
}

@media (min-width: 1024px) {
    .hero__fv {
        gap: 16px;
    }

    .hero__catch {
        font-size: 2.1875rem; /* 35px */
        letter-spacing: 2px;
        line-height: 60px;
    }

    .hero__lead {
        font-size: 1.25rem; /* 20px */
        line-height: normal;
    }

    .hero__scroll {
        bottom: -32px;
        gap: 24px;
        font-size: 1rem; /* 16px */
        letter-spacing: 0.125em;
    }

    .hero__scroll::after {
        height: 89px;
    }

    .hero__intro {
        gap: 48px;
        padding: 136px 20px 160px;
    }

    /* Figma「TOP_PC」: 本文の幅 800px（2026-10-19 の更新で 560px から広がった）、見出しは中央寄せ */
    .hero__intro-body {
        gap: 32px;
        width: min(100%, 800px);
    }

    .hero__intro-title {
        font-size: 2.1875rem; /* 35px */
        line-height: 60px;
        text-align: center;
    }
}

/*
 * イベント・お知らせ・SNS（Figma「Info」PC 2041:5714 / SP 2041:6299）
 * 見出し → 2 列 → SNS バナーの順に置く。背景は白。
 * SP（〜1023px）はイベント → 区切り線 → お知らせの順に縦に積み、PC は左右に並べて間に縦の区切り線を入れる（間隔 40 + 線 2 + 間隔 40）。
 */
/* 上の余白は Figma Page 1（2026-11-10）で SP 48 → 64px・PC 60 → 88px（品質の下端に山が付いた） */
.info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 64px 20px 56px;
    background-color: var(--color-white);
}

.info__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
}

/* SP は左寄せ（2026-11-11 Chatwork「全ページの SP のタイトルを左寄せに」）、PC は中央寄せ（下の @media） */
.info__eyebrow,
.info__heading {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 2px;
}

.info__eyebrow {
    color: var(--color-accent);
    font-size: 0.8125rem; /* 13px */
}

.info__heading {
    color: #333;
    font-size: 1.25rem; /* 20px */
}

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

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

/* Figma SP: 上 24px・下 32px、PC: 上 48px・下 60px（.info の余白とは別） */
.info .sns-banners {
    padding: 24px 0 32px;
}

.info__column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.info__column + .info__column {
    padding-top: 32px;
    border-top: 1px solid rgb(47 107 86 / 0.2);
}

/* 見出しと「一覧で見る」は両端に寄せる（狭い画面で収まらないときだけ折り返す） */
.info__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.info__title {
    display: flex;
    gap: 9px;
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.0625rem; /* 17px */
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 26px;
}

/* 見出しの左の縦線 */
.info__title::before {
    flex-shrink: 0;
    width: 3px;
    background-color: var(--color-green);
    content: "";
}

/* 「一覧で見る」は共通の矢印付きの文字リンク（components.css の .more-link） */

/* お知らせのリスト: 間隔 16px + 線 1px */
.info__list {
    display: grid;
    gap: 16px;
}

.info__item + .info__item {
    padding-top: 16px;
    border-top: 1px solid rgb(47 107 86 / 0.2);
}

.info__empty {
    color: #333;
}

/*
 * イベントの 1 件（写真が上、カテゴリー｜日付・タイトルが下）。写真は Figma: SP 335×182 / PC 529×287（同じ比率）
 * お知らせの 1 件（写真が左）は components.css の news-item
 */
.info-pickup {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.info-pickup:has(.info-pickup__link:focus-visible) {
    outline: 2px solid var(--color-green);
    outline-offset: 4px;
}

@supports not selector(:has(*)) {
    .info-pickup:focus-within {
        outline: 2px solid var(--color-green);
        outline-offset: 4px;
    }
}

.info-pickup__thumb {
    aspect-ratio: 529 / 287;
    overflow: hidden;
    background-color: #e9efe9;
}

.info-pickup__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.info-pickup__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-pickup__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--color-green);
    font-size: 1rem; /* 16px */
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 24px;
}

/* カテゴリーと日付の間の区切り線（Figma の「｜」） */
.info-pickup__category::after {
    display: inline-block;
    width: 1px;
    height: 12px;
    margin-left: 8px;
    background-color: currentColor;
    opacity: 0.4;
    vertical-align: -1px;
    content: "";
}

.info-pickup__title {
    color: #333;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 25px;
    word-break: auto-phrase;
}

.info-pickup__link {
    color: inherit;
    text-decoration: none;
}

.info-pickup__link:focus-visible {
    outline: none;
}

/* カード全体を押せるようにする */
.info-pickup__link::after {
    position: absolute;
    inset: 0;
    content: "";
}

@media (hover: hover) {
    .info-pickup:hover .info-pickup__thumb img {
        transform: scale(1.05);
    }

    .info-pickup:hover .info-pickup__link {
        text-decoration: underline;
    }
}

/* お知らせの 1 件の文字の大きさ（カードの形は components.css の news-item。TOP でしか使っていない） */
.info .news-item__meta {
    font-size: 1rem; /* 16px */
    line-height: 24px;
}

.info .news-item__title {
    font-size: 1rem; /* 16px */
    line-height: 25px;
}

@media (min-width: 1024px) {
    .info {
        gap: 40px;
        padding: 88px 70px 60px;
    }

    .info__intro {
        gap: 12px;
        padding-bottom: 16px;
    }

    .info__eyebrow {
        font-size: 1.125rem; /* 18px */
    }

    .info__eyebrow,
    .info__heading {
        text-align: center;
    }

    .info__heading {
        font-size: 2.1875rem; /* 35px */
    }

    .info__lead {
        display: none;
    }

    .info__columns {
        flex-direction: row;
        gap: 0;
    }

    .info .sns-banners {
        padding: 48px 0 60px;
    }

    .info .news-item__meta {
        line-height: 25px;
    }

    .info .news-item__title {
        font-size: 1.125rem; /* 18px */
        line-height: 30px;
    }

    .info__column {
        flex: 1;
        gap: 20px;
        max-width: calc((var(--content-width) - 82px) / 2);
    }

    /* 列の間は Figma: 間隔 40 + 線 2 + 間隔 40。1140px より広い画面では 2 列を中央に寄せる */
    .info__column--event {
        margin-left: auto;
    }

    .info__column--news {
        margin-right: auto;
    }

    /* 区切り線と左の余白（40 + 2px）の分だけ広げ、中身の幅をイベントの列と同じ 529px にする */
    .info__column + .info__column {
        max-width: calc((var(--content-width) - 82px) / 2 + 42px);
        margin-left: 40px;
        padding-top: 0;
        padding-left: 40px;
        border-top: 0;
        border-left: 2px solid rgb(47 107 86 / 0.2);
    }

    .info__title {
        gap: 12px;
        font-size: 1.375rem; /* 22px */
        letter-spacing: 1px;
        line-height: 34px;
    }

    .info__title::before {
        width: 4px;
    }

    .info__list {
        gap: 20px;
    }

    .info__item + .info__item {
        padding-top: 20px;
    }

    .info-pickup {
        gap: 16px;
    }

    .info-pickup__body {
        gap: 8px;
    }

    .info-pickup__meta {
        line-height: 25px;
    }

    .info-pickup__title {
        font-size: 1.125rem; /* 18px */
        line-height: 30px;
    }
}

/*
 * ラインナップ（Figma「Lineup」500:419）
 * 車種ごとのブロックを交互に左右反転し、ブロックの境目に山のシルエット（次のブロックの背景色）を置く。
 */
/*
 * SP の山（幅 640px）とスケッチ（右に 60px）は横にはみ出すので、横方向だけ切る（下の山はオーナー紹介の後ろへ出し、その背景で隠す）。
 * 上へ 1px、自分の背景色を塗る（影）: 画面の倍率が半端（拡大率 110%・125%、一部の Android の 2.625 倍など）だと、
 * KV の山との境目の 1 列をどちらも塗りきらず、すき間から後ろに固定した KV が線のように透けるため
 */
.lineup {
    overflow-x: clip;
    padding-top: 56px;
    background-color: var(--color-pale);
    box-shadow: 0 -1px 0 var(--color-pale);
}

/* 見出しは共通の .section-head。全幅のブロックの中なので左右に余白を取る */
.lineup .lineup__head {
    margin: 0 0 32px;
    padding: 0 20px;
}

.lineup-model {
    --block-bg: var(--color-pale);
    position: relative;
    padding-bottom: 88px;
    background-color: var(--block-bg);
}

/* 背景のスケッチ（透明度 30%）。SUZY 系は右、BOUKEN は左。SP は Figma どおりブロックの下端から 70px */
.lineup-model::before {
    position: absolute;
    right: -60px;
    bottom: 70px;
    width: 306px;
    height: 182px;
    background: url("../img/lineup/sketch-right.webp") center / cover no-repeat;
    opacity: 0.3;
    pointer-events: none;
    content: "";
}

.lineup-model--bouken::before {
    right: auto;
    left: -60px;
    background-image: url("../img/lineup/sketch-center.webp");
}

/* 写真のスライド（Figma: 717 × 440） */
.lineup .slider__slide {
    aspect-ratio: 717 / 440;
    background-color: #e7eee9;
}

/* SUZY mini（近日公開）はシルエットのイラスト（SVG）なので、写真の読み込み中の下地を敷かずセクションの背景に置く（Figma 771:182） */
.lineup-model--suzy-mini .slider__slide {
    background-color: transparent;
}

/* SP は写真とドットの間を 14px（Figma） */
.lineup-model .slider__controls {
    margin-top: 14px;
}

.lineup-model + .lineup-model {
    padding-top: 20px;
}

.lineup-model--bouken {
    --block-bg: #e9efe9;
}

.lineup-model__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.lineup-model__media {
    position: relative;
}

/* バッジ（写真の左上に重ねる） */
.lineup-model__badges {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    letter-spacing: 0.125rem; /* 2px */
    line-height: 26px;
    pointer-events: none;
}

.lineup-model__badges span {
    padding: 1px 10px 1px 8px;
    color: var(--color-green);
    background-color: var(--color-white);
}

.lineup-model__badges span + span {
    padding-right: 12px;
    color: var(--color-white);
    background-color: var(--color-green);
}

/* 写真の下の方に置くバッジ（写真の上側に被写体があるもの。Figma の BOUKEN 3 枚目） */
.lineup-model__badges--bottom {
    top: auto;
    bottom: 16px;
}

.lineup-model__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 20px 0;
}

.lineup-model__catch {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1rem; /* 16px */
    font-weight: 600;
    letter-spacing: 0.125em;
    line-height: 1.75;
}

.lineup-model__catch span {
    display: block;
    /* 対応ブラウザ（Chrome 等）では文節で改行する */
    word-break: auto-phrase;
}

.lineup-model__name {
    color: var(--color-green);
    font-family: var(--font-en);
    font-size: 3rem; /* 48px */
    font-weight: 800;
    letter-spacing: 0.0625rem; /* 1px */
    line-height: 1.2;
}

.lineup-model__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 16px;
}

.lineup-model__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.lineup-model__price dt {
    color: rgb(46 52 48 / 0.5);
    font-size: 1rem; /* 16px */
    font-weight: 700;
}

.lineup-model__price dd {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    color: #2e3430;
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
}

.lineup-model__price-num {
    color: #333;
    font-family: var(--font-num);
    font-size: 2.5rem; /* 40px */
    font-weight: 600;
    line-height: 1.2;
}

.lineup-model__delivery {
    color: #333;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    letter-spacing: 0.03125rem; /* 0.5px */
    line-height: 1.6;
}

.lineup-model__soon {
    color: #333;
    font-family: var(--font-num);
    font-size: 2.5rem; /* 40px */
    font-weight: 600;
    line-height: 1.2;
}

/* 「〜を見る」ボタン。形は共通の .label-button（components.css）。ここでは上の余白だけを決める */
.lineup-model__button {
    margin-top: 12px;
}

/*
 * 矢印・ドットの間隔は Figma の SP でも PC と同じ。4 枚なので 375px 以上なら停止ボタンを含めて 358px で収まる
 * （375px 未満は components.css の詰めた間隔のまま）
 */
@media (min-width: 375px) {
    .lineup .slider__controls {
        gap: 28px;
    }

    .lineup .slider__dots {
        gap: 18px;
    }
}

/* 境目の山（形は SVG のマスク、色は次のブロックの背景色）。山の下端は小数のピクセルになり、高解像度の画面では下の背景が細い線のように透けるので、接する側へ 1px 重ねる（重なる先は同じ色） */
.lineup-model__divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: max(640px, 100%);
    aspect-ratio: 1280 / 114;
    background-color: var(--divider-color, transparent);
    -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;
}

.lineup-model--suzy {
    --divider-color: #e9efe9;
}

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

/*
 * SUZY mini の下（次のセクションへ）は 2 色の山。Figma では左右反転して配置している。
 * SP はセクションの下端に揃え、PC は下のセクションに重ねる（下の @media）
 */
.lineup-model--suzy-mini .lineup-model__divider {
    z-index: 2;
    background: url("../img/lineup/divider-mountain-mini.svg?v=2") center bottom / 100% 100% no-repeat;
    -webkit-mask: none;
    mask: none;
    transform: scaleX(-1);
}


/*
 * SP・タブレット（〜1023px）は車種ごとのカード（Figma Page 1「提案｜TOP_SP ラインナップ（コンパクト版）」2137:2187。2026-11-09 Chatwork）。
 * 車種ごとのブロック（.lineup-model）の代わりにカードを縦に並べる。PC はカードを出さない。
 * Figma の上下の緑の線（4px）は、2026-11-10 Chatwork の指示で引かない。
 * タブレットはカードを 480px まで広げて中央に置く（Figma は SP 375px だけ）
 */
.lineup-cards {
    display: none;
}

/*
 * 車種のページの「ほかの車種」も .lineup・.lineup-model を使うので、ここの指定は TOP（.top）だけに絞る
 * （2026-11-10 に、車種のページの SP で中身が消えていたのを直した）。
 * セクションの下端には、PC と同じ SUZY mini の 2 色の山を置き、次の「HIRABOと楽しむカーライフ」へつなぐ（2026-11-10 Chatwork の指示）。
 * 山は幅 max(640px, 100%)・高さ 1280:114（375px で 57px）なので、カードの下の 40px にその高さを足す
 */
@media (max-width: 1023px) {
    .top .lineup {
        position: relative;
        padding: 52px 20px calc(44px + max(640px, 100vw) * 114 / 1280);
    }

    .top .lineup::after {
        position: absolute;
        bottom: -1px;
        left: 0;
        width: max(640px, 100%);
        aspect-ratio: 1280 / 114;
        background: url("../img/lineup/divider-mountain-mini.svg?v=2") center bottom / 100% 100% no-repeat;
        transform: scaleX(-1);
        pointer-events: none;
        content: "";
    }

    .top .lineup .lineup__head {
        margin-bottom: 20px;
        padding: 0;
    }

    .top .lineup-model {
        display: none;
    }

    .lineup-cards {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: min(100%, 480px);
        margin-inline: auto;
    }
}

/* カード（Figma: 白い枠 3px・影。地色は車種ごと） */
.lineup-card {
    --card-bg: var(--color-green);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-white);
    background-color: var(--card-bg);
    border: 3px solid var(--color-white);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
}

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

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

/* 写真（Figma: 白い枠の内側 329 × 187px。2026-11-10 に 167 → 187px） */
.lineup-card__photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 329 / 187;
    background-color: #e3e9e4;
}

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

/* SUZY mini のシルエット（Figma: 241 × 180px を左右中央に、写真の枠の上端から 1px 上に置く） */
.lineup-card__photo .lineup-card__illust {
    position: absolute;
    top: calc(-1 / 187 * 100%);
    left: 50%;
    width: calc(241 / 329 * 100%);
    height: auto;
    translate: -50% 0;
}

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

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

/* 価格と、縦線（白 50%・高さ 14px）をはさんで乗車・就寝の人数（白の 85%）。間 12px、上下中央 */
.lineup-card__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.lineup-card__seats {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgb(255 255 255 / 0.85);
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: normal;
}

.lineup-card__seats::before {
    flex-shrink: 0;
    width: 1px;
    height: 14px;
    background-color: rgb(255 255 255 / 0.5);
    content: "";
}

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

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

.lineup-card__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.9375rem; /* 15px（「万円〜」） */
    font-weight: 700;
    line-height: normal;
}

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

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

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

/*
 * 「〜を見る」ボタン。形は共通の .label-button（白いラベル + 右端の緑の矢印の欄）。
 * Figma のカードでは高さ 52px・白い枠 2px・文字は太字で字間なし、ラベルの下線なし（Figma の 6px の空きの分だけ上をあける）
 */
.lineup-card__button {
    width: 100%;
    height: 52px;
    margin-top: 6px;
    border: 2px solid var(--color-white);
    font-weight: 700;
    letter-spacing: 0;
}

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

/* 矢印は Figma の「›」（20px の文字）の大きさに小さくする */
.lineup-card__button::after {
    background-size: 7px 11px;
}

@media (min-width: 1024px) {
    .lineup {
        padding-top: 88px;
    }

    .lineup-model__name {
        font-size: 4rem; /* 64px */
    }

    .lineup .lineup__head {
        margin-bottom: 68px;
    }

    .lineup-model {
        padding-bottom: 176px;
    }

    /* PC のスケッチは写真の高さに合わせて上から置く（SP の指定を上書き）。1920px を超える画面では段（1920px）の端に合わせる */
    .lineup-model::before {
        top: 188px;
        right: max(0px, (100% - var(--layout-max-width)) / 2);
        bottom: auto;
        width: 612px;
        height: 364px;
    }

    .lineup-model--suzy::before {
        top: 176px;
    }

    .lineup-model--bouken::before {
        right: auto;
        left: max(0px, (100% - var(--layout-max-width)) / 2);
    }

    .lineup-model .slider__controls {
        margin-top: 20px;
    }

    /* 写真と文字の段は 1920px で止めて中央に置く（境目の山と背景は画面いっぱい） */
    .lineup-model__inner {
        flex-direction: row;
        align-items: flex-start;
        max-width: var(--layout-max-width);
        margin-inline: auto;
    }

    .lineup-model--bouken .lineup-model__inner {
        flex-direction: row-reverse;
    }

    .lineup-model__media {
        flex-shrink: 0;
        width: 56.02%;
    }

    .lineup-model__badges {
        top: 44px;
        left: 32px;
        font-size: 1.25rem; /* 20px */
        line-height: 35px;
    }

    .lineup-model__badges--bottom {
        top: auto;
        bottom: 36px;
    }

    .lineup-model__info {
        flex: 1;
        gap: 12px;
        min-width: 0;
        padding: 56px 40px 0;
    }

    .lineup-model--suzy-mini .lineup-model__info {
        align-self: center;
        padding-top: 0;
    }

    /* Figma の PC: 1280 幅で 39px 下（品質のセクション）に重ねる。translate の % は自分の高さ（1280 幅で 114px）に対する割合 */
    .lineup-model--suzy-mini .lineup-model__divider {
        translate: 0 calc(39 / 114 * 100%);
    }

    .lineup-model__catch {
        font-size: 1.3125rem; /* 21px */
        letter-spacing: 0.095em;
        line-height: 40px;
    }

    .lineup-model__delivery {
        font-size: 0.9375rem; /* 15px */
        letter-spacing: 0.03em;
    }
}

@media (min-width: 1280px) {
    .lineup-model__info {
        padding: 56px 72px 0;
    }

    /* Figma: SUZY mini の名前は写真の上端から 180px（1024〜1279px は写真が小さいので上下中央のまま） */
    .lineup-model--suzy-mini .lineup-model__info {
        align-self: flex-start;
        padding-top: 180px;
    }
}

/*
 * 品質（Figma「Quality」PC 2041:5540 / SP 2041:6125）。template-parts/top/quality.php（車種のページも同じ部品）
 * 右上の等高線の模様は SVG（表示範囲だけを切り取ったもの）。
 * TOP は背景が薄い緑（次の写真の帯・上のセクションとつながる）。車種のページの背景は #11892 で確認するので白のまま
 */
.quality {
    position: relative;
    z-index: 3;
    overflow: hidden;
    padding: 64px 20px;
    background-color: var(--color-white);
}

/* 上へ 1px、自分の背景色を塗る（影）: 倍率が半端な画面（2.625 倍など）では、同じ色の写真の帯との境目の 1 列が薄く明るくなるため */
.top .quality {
    padding-bottom: 88px;
    background-color: var(--color-pale);
    box-shadow: 0 -1px 0 var(--color-pale);
}

/*
 * TOP の品質の下端の山（Figma Page 1「Deco / Mountain (bottom)｜イベント・お知らせ・SNSとの区切り」PC 2157:350 / SP 2157:352。2026-11-10）。
 * 白い山で、次のイベント・お知らせ・SNS（白）につなげる。SP は幅 640px（高さ 57px）で左端に合わせ、PC は幅いっぱい（1280 で 114px）。
 * 下端の線が透けないよう 1px 重ねる
 */
.top .quality::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: max(640px, 100%);
    aspect-ratio: 1280 / 114;
    background: url("../img/top/deco-mountain-info.svg?v=2") center bottom / 100% 100% no-repeat;
    pointer-events: none;
    content: "";
}

/* 等高線の模様（SP は右端に約 55px だけ見せる） */
.quality::before {
    position: absolute;
    top: 24px;
    right: -30px;
    width: 85px;
    height: 487px;
    background: url("../img/top/deco-topo.svg") left top / auto 100% no-repeat;
    pointer-events: none;
    content: "";
}

/* SP: 見出し → 写真 → 本文 → ボタン */
.quality__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: var(--content-width);
    margin: 0 auto;
}

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

.quality__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

/* Figma の字間（0.15em）だと SP の 375px 幅で 6px はみ出して 2 行になる（Figma でも枠からはみ出している）ため少し詰める */
.quality__eyebrow {
    color: var(--color-accent);
    font-size: 0.8125rem; /* 13px */
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 2px;
    word-break: keep-all;
}

.quality__eyebrow > span {
    display: inline-block;
}

/*
 * Figma SP は 1 行（文字の枠 343px が 335px の欄から少しはみ出している）。Windows の游明朝では字の幅がわずかに広く 2 行になるため、
 * 375px 以上の幅では折り返さず、Figma と同じく右へ少しはみ出させる（画面の右端の 20px の余白の中に収まる）。375px 未満は文節で折り返す
 */
@media (min-width: 375px) and (max-width: 1023px) {
    .quality__eyebrow {
        white-space: nowrap;
    }
}

/* 2 行に固定する（span ごとに改行） */
.quality__title {
    color: #333;
    font-size: 1.25rem; /* 20px */
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 29px;
}

.quality__title > span {
    display: block;
}

.quality__body {
    color: #333;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 32px;
}

/* SP は横幅いっぱい。タブレット幅で大きくなりすぎないよう 560px で止める */
.quality__media img {
    width: min(100%, 560px);
    height: auto;
}

/* 車種のページだけ品質の下に SNS バナーを置く。等高線の模様（::before）より手前に描く */
.quality .sns-banners {
    position: relative;
    margin-top: 36px;
}

@media (min-width: 1024px) {
    .quality {
        padding: 93px 70px 136px;
    }

    /* Figma Page 1: 上 93px、下は山の上まで 62px + 山 114px */
    .top .quality {
        padding-bottom: 176px;
    }

    /* 1920px を超える画面では、中身から離れないよう 1920px の幅の右端に付ける */
    .quality::before {
        top: 36px;
        right: max(0px, (100% - var(--layout-max-width)) / 2);
        width: 484px;
        height: 624px;
        background-size: 100% auto;
    }

    /*
     * Figma: 文字 560px・間隔 60px・写真の枠 496px（写真 423×569 を右寄せ、上に 15px）。
     * 合計 1116px で、1140px の枠の右に 24px 余る（padding の % は親の幅に対する割合）
     */
    .quality__inner {
        display: grid;
        grid-template-columns: minmax(0, 560fr) minmax(0, 496fr);
        grid-template-rows: auto 1fr;
        gap: 28px 60px;
        padding-right: calc(24 / 1140 * 100%);
    }

    .quality__head {
        gap: 40px;
        padding-top: 28px;
    }

    .quality__media {
        grid-row: 1 / span 2;
        grid-column: 2;
        justify-self: end;
        min-height: 628px;
        padding-top: 15px;
    }

    .quality__content {
        gap: 40px;
    }

    .quality__eyebrow {
        font-size: 1.125rem; /* 18px */
    }

    .quality__title {
        font-size: 2.1875rem; /* 35px */
        line-height: 56px;
    }

    /* Figma の行の高さ 40px */
    .quality__body {
        font-size: 1.125rem; /* 18px */
        line-height: 40px;
    }

    .quality__media img {
        width: min(100%, 423px);
    }

    .quality .sns-banners {
        margin-top: 80px;
    }
}

/*
 * 写真（Figma「Visual」PC 2041:5536 / SP 2041:6121）
 * 写真を左に寄せ、右に余白を残す。下側に薄い緑の帯（次のセクションの背景色）を敷く。
 */
.visual {
    position: relative;
    padding-right: 20px;
}

.visual::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    background-color: var(--color-pale);
    content: "";
}

.visual__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 355 / 220;
    object-fit: cover;
}

@media (min-width: 1024px) {
    /*
     * Figma: 写真 1192×558（1280 幅のとき右に 88px の余白）、帯の高さ 136px。
     * 1920px を超える画面では、写真を 1920px の幅の中に置く（左の端と右の余白を 1920px のときで止め、下の帯は画面いっぱい）
     */
    .visual {
        padding-right: calc(max(0px, (100% - var(--layout-max-width)) / 2) + min(6.875%, var(--layout-max-width) * 0.06875));
        padding-left: max(0px, (100% - var(--layout-max-width)) / 2);
    }

    .visual::before {
        height: 136px;
    }

    .visual__photo {
        aspect-ratio: 1192 / 558;
    }
}


/*
 * オーナー様の動画（Figma「Owners」PC 2041:5484 / SP 2041:6069）
 * 2026-10-19 の更新で 4 枚になり、日付と「詳細を見る」が付き、写真の再生ボタンと暗い重ね色がなくなった。
 * カードは SP（〜767px）で横スクロール、768px 以上で 2 列、1024px 以上で 4 列。下側に山のスケッチ（形は画像のマスク、色は CSS）。
 */
.owners {
    position: relative;
    overflow: hidden;
    padding: 64px 20px 120px;
    background-color: var(--color-pale);
}

/*
 * TOP は背景が白。PC で上に 39px 重なる SUZY mini の山（z-index: 2）より手前に描き、Figma どおり重なった部分を背景で隠す
 * （ラインナップの側で切ると、倍率が半端な画面で境目に薄い線が出る）
 */
.top .owners {
    z-index: 3;
    background-color: var(--color-white);
}

/* カードの文章が折り返して高さが変わってもボタンの下に揃うよう、下端を基準に置く（Figma の SP: 下端から 56px） */
.owners::before {
    position: absolute;
    bottom: 56px;
    left: -110px;
    width: 587px;
    aspect-ratio: 1305 / 332;
    background-color: #e9efe9;
    -webkit-mask: url("../img/top/deco-sketch.webp") center / 100% 100% no-repeat;
    mask: url("../img/top/deco-sketch.webp") center / 100% 100% no-repeat;
    pointer-events: none;
    content: "";
}

/* 左右の余白に 10px ずつはみ出してよい（Figma の SP でも「HIRABOと楽しむカーライフ」は 375 幅で余白にはみ出して 1 行） */
.owners .section-head {
    margin-inline: -10px;
}

/* SP は見出しを左寄せにするので、左は本文と同じ位置にそろえ、右だけはみ出す */
@media (max-width: 1023px) {
    .owners .section-head {
        margin-left: 0;
    }
}


.owners__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: var(--content-width);
    margin: 0 auto;
}

/* リード文の文字は共通の .lead（components.css）。ここは PC の中央寄せだけ */
/*
 * 横スクロールは画面の端まで広げ、1 枚目の左端は本文に揃える。
 * 上下にも 8px の余白を取り、その分を margin で戻す（横スクロールの領域は上下もはみ出しを切るため、
 * カードのフォーカス枠（outline-offset 4px + 太さ 2px）が切れないように）
 */
/* SP は横スクロールではなく 2 列 × 2 段で並べる（2026-10-21 先方指示）。PC は 4 列 */
.owners__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 15px;
}

.owner-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #333;
    text-decoration: none;
}

.owner-card:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 4px;
}

/* 写真は Figma: SP 280×171 / PC 262.5×160（同じ比率）。読み込み前は暗い色（#3c3f38） */
.owner-card__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 280 / 171;
    background-color: #3c3f38;
}

.owner-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .owner-card:hover .owner-card__thumb img {
        transform: scale(1.04);
    }
}

.owner-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.owner-card__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.owner-card__date {
    color: var(--color-green);
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 18px;
}

.owner-card__text {
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    line-height: 1.6;
}

/* 「詳細を見る」は共通の矢印付きの文字リンク（components.css の .more-link）。カード全体がリンクなので、カードに乗ったら下線を出す */
@media (hover: hover) {
    .owner-card:hover .more-link {
        text-decoration: underline;
    }
}

/* 上の要素との間隔: SP 40px（20 + 20）、PC 72px（30 + 42） */
.owners__button {
    align-self: center;
    margin-top: 20px;
}


/*
 * TOP の SP（Figma SP 2041:6069）: 見出しは 17px で 1 行、文字はカードの中も含めて本文の大きさ。山のスケッチは 2 段目のカードの後ろ。
 * 車種のページの「オーナー様の車両紹介」の SP も、見出し以外は TOP と同じにする（2026-11-09 赤嶺さんの依頼。Figma SUZY SP は横スクロール）
 */
@media (max-width: 1023px) {
    .top .owners::before,
    .model-page .owners::before {
        top: 567px;
        bottom: auto;
    }

    .top .owners .section-head__title {
        font-size: 1.0625rem; /* 17px */
        letter-spacing: 2px;
        line-height: normal;
    }

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

    .top .owner-card,
    .model-page .owner-card {
        gap: 12px;
    }

    .top .owner-card__body,
    .model-page .owner-card__body {
        gap: 10px;
    }

    .top .owner-card__date,
    .model-page .owner-card__date {
        font-size: 0.8125rem; /* 13px */
        line-height: 20px;
    }

    .top .owner-card__text,
    .model-page .owner-card__text {
        font-size: 1rem; /* 16px */
        line-height: 27px;
    }
}

@media (min-width: 1024px) {
    .owners {
        padding: 88px 70px 184px;
    }

    /*
     * Figma: 1280 幅で幅 1305px（右に 25px はみ出す）、下端から 27px（ボタンの後ろ）。広い画面では横幅いっぱいに広げ、
     * 高くなりすぎて見出しにかからないよう 1920px で止めて中央に置く
     */
    .owners::before {
        bottom: 27px;
        left: max(0px, (100% - 1920px) / 2);
        width: clamp(1305px, 100%, 1920px);
    }

    .owners__inner {
        gap: 30px;
    }

    .owners__lead {
        text-align: center;
    }

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

    .owner-card {
        gap: 32px;
    }

    .owner-card__body {
        gap: 24px;
        padding-left: 20px;
    }

    .owner-card__meta {
        gap: 8px;
    }

    .owner-card__date {
        font-size: 0.8125rem; /* 13px */
        line-height: 20px;
    }

    .owner-card__text {
        font-size: 1.125rem; /* 18px */
        line-height: 1.6667;
    }

    .owners__button {
        margin-top: 42px;
    }
}


/*
 * ご相談の窓口（Figma「Contact」PC 2041:5769 / SP 2041:6354）
 * 緑の帯（見出し + スタッフ紹介。contact-band.css）に、白いカード（資料請求・見学・電話）を 36px 重ねる。
 * 2026-10-19 の更新でお役立ち情報のセクションがなくなり、TOP の最後のセクションになった。下の余白（SP 110px / PC 180px）にフッターの山が重なる。
 * SP〜タブレット（〜1023px）は縦に積み、PC はスタッフを左・見出しを右に並べる。
 */
.contact {
    position: relative;
    overflow: hidden;
    padding-bottom: 110px;
    background-color: var(--color-pale);
}

/*
 * 白いカード（template-parts/contact-channels.php。見た目は components.css）。帯に 36px 重ねるので、帯より手前に描く。
 * TOP は section の左右に余白が無いので、カードの左右に SP 20px・PC 70px の余白を取る
 */
.contact__channels {
    position: relative;
    z-index: 1;
    width: min(100% - 40px, 335px);
    margin-top: -36px;
}

/*
 * 下端の薄い山（Figma SP 866:1782: 幅 640px を左端に置き、左右反転。下端はセクションの下から 17px はみ出す＝ section の overflow: hidden で切れる）。
 * 手前のフッターの緑の山（layout.css .site-footer__mountain）の後ろに、白と薄い緑の峰が見える。画面が 640px より広いときは幅いっぱいに広げる
 */
.contact__mountain {
    position: absolute;
    bottom: -17px;
    left: 0;
    width: max(640px, 100%);
    max-width: none;
    height: auto;
    transform: scaleX(-1);
    pointer-events: none;
}

@media (min-width: 1024px) {
    /* PC の Figma（845:1083）はこの山がセクションの下端より下にあり、フッターに隠れて見えない */
    .contact__mountain {
        display: none;
    }

    .contact__channels {
        width: min(1140px, 100% - 140px);
    }

    /* Figma: 白いカードの下端からセクションの下端まで 180px */
    .contact {
        padding-bottom: 180px;
    }
}

/* フッターの山は、最後のセクション（ご相談の窓口）の下の余白に重ねる（Figma: PC 94px・SP 48px 重なる） */
.site-footer {
    margin-top: 0;
}

/*
 * TOP の SP（Figma TOP_SP 2041:5946）: ご相談の窓口の見出しは 18px。
 * セクションの見出しは Figma の中央寄せにしていたが、2026-11-11 11:50 Chatwork「全ページの SP のタイトルを左寄せに」で全ページ共通の左寄せ（components.css）にした
 */
@media (max-width: 1023px) {
    .top .contact__title {
        font-size: 1.125rem; /* 18px */
        letter-spacing: 2px;
        line-height: 27px;
    }
}