@charset "UTF-8";

/* 記事詳細専用（single.php のときだけ読み込む。Figma「下層 / 記事詳細」PC 2041:2114 / SP 2041:3713、オーナー紹介は PC 2041:10584 / SP 2041:10814 など）。記事カード・CTA は page.css */

/*
 * 記事の頭（single.php の .article-top）。HTML はパンくず → 見出し（カテゴリー・日付・タイトル）→ アイキャッチの順（リードは目次の下。2026-11-12 Figma 版）。
 * SP は、order で アイキャッチ → パンくず → 見出し の順に並べる（.article-fv は display: contents）。
 * PC は、アイキャッチのある記事（オーナー紹介の記事も）はパンくずの下に見出しとアイキャッチを横に並べる（.article-top--split。下の @media）
 */
.article-top {
    display: flex;
    flex-direction: column;
}

.article-top .breadcrumb {
    order: 2;
}

.article-fv {
    display: contents;
}

/* アイキャッチ（Figma「01 EYECATCH」）。SP は画面幅いっぱい、PC は 1140px で上に 48px 空ける */
.article-eyecatch {
    order: 1;
}

.article-eyecatch img {
    width: 100%;
    height: auto;
    aspect-ratio: 375 / 234;
    object-fit: cover;
}

/*
 * 見出し（カテゴリー・日付・タイトル）とリード。タイトルの下に区切り線（Figma「Divider」）を引き、上下の間隔をそろえる（SP 24px / PC 32px）
 */
.article__header {
    display: flex;
    order: 3;
    flex-direction: column;
    gap: 12px;
    width: min(100% - 40px, 800px);
    margin-inline: auto;
    padding-top: 28px;
    color: #333;
}

/*
 * 記事（Figma「02 ARTICLE」）。幅 800px の列に、目次・本文・タグ・前後の記事を同じ間隔（SP 24px / PC 32px）で並べる
 */
.article {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(100% - 40px, 800px);
    margin-inline: auto;
    padding: 24px 0 72px;
    color: #333;
}

/* カテゴリーと日付はお役立ち情報一覧のカードと共通の .post-meta / .post-category（components.css）。
   目次の見出し・タグ・前後の記事の 1 行の文字は、Figma の文字の高さ「normal」に合わせる（既定の 1.5 だと 3〜4px ずつ高くなる） */

.article__title {
    padding-bottom: 24px;
    border-bottom: 1px solid #dde5df;
    font-size: 1.4375rem; /* 23px */
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 36px;
}

/*
 * リード文（目次の下。Figma 2026-11-12 版「Lead（リード文）」2365:314: PC 17px / 34px）。共通の .lead（components.css）を、SP は 16px / 32px、PC は 17px / 34px にする。
 * 目次・本文との間は .article の gap（SP 24px / PC 32px）
 */
@media (max-width: 1023px) {
    .article__lead {
        font-size: 1rem; /* 16px */
        line-height: 32px;
    }
}

/* 目次（Figma「TOC（目次）」） */
.toc {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 20px;
    background-color: var(--color-pale);
}

.toc__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    /* 行の高さは左の線（SP 22px / PC 24px）で決まるようにする（Figma「TOC / Head」） */
    line-height: 19px;
}

.toc__title::before {
    width: 4px;
    height: 22px;
    background-color: var(--color-green);
    content: "";
}

.toc__list,
.toc__sub-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toc__sub-list {
    margin-top: 8px;
}

.toc__link,
.toc__sub-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    line-height: 26px;
}

.toc__link {
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
}

.toc__number {
    flex-shrink: 0;
    width: 26px;
    padding-top: 4px;
    color: var(--color-green);
    font-family: var(--font-en);
    font-size: 0.8125rem; /* 13px */
    font-weight: 800;
    letter-spacing: 2px;
    line-height: normal;
}

.toc__sub-link {
    padding-left: 36px;
    color: #666;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
}

.toc__sub-link::before {
    flex-shrink: 0;
    width: 8px;
    height: 2px;
    margin-top: 12px;
    background-color: rgb(47 107 86 / 0.5);
    content: "";
}

@media (hover: hover) {
    .toc__link:hover,
    .toc__sub-link:hover {
        text-decoration: underline;
    }
}

/*
 * 本文（Figma の H2・H3・Body・Figure・List / UL・Table A）。管理画面のブロックエディターの出力に合わせる
 * 段落・見出し・画像・リスト・表の間は記事と同じ間隔。h2 はさらに上に 24px（PC 32px）空ける
 */
.article__content {
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    line-height: 28px;
}

.article__content > * + * {
    margin-top: 24px;
}

.article__content h2 {
    padding-top: 24px;
    padding-bottom: 14px;
    background:
        linear-gradient(var(--color-green), var(--color-green)) left bottom / 48px 2px no-repeat,
        linear-gradient(#dde5df, #dde5df) left bottom / 100% 2px no-repeat;
    font-size: 1.3125rem; /* 21px */
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 32px;
}

/* 左の緑の線は 1 行目の高さ（Figma「Accent」） */
.article__content h3 {
    padding: 4px 0 0 14px;
    background: linear-gradient(var(--color-green), var(--color-green)) left 4px / 4px 28px no-repeat;
    font-size: 1.125rem; /* 18px */
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 28px;
}

.article__content a {
    color: var(--color-green);
    text-decoration: underline;
}

.article__content strong {
    font-weight: 700;
}

.article__content img {
    width: 100%;
    height: auto;
}

.article__content figcaption {
    margin-top: 8px;
    color: #666;
    font-size: 0.75rem; /* 12px */
    font-weight: 400;
    line-height: 20px;
}

/*
 * 動画のサムネイル（Figma 2026-11-12 版「Video / YouTubeサムネ」2369:314。本文の画像ブロックに class「article-video」を付け、リンク先は動画の文のリンクと同じ）。
 * 16:9 に切り抜き、真ん中に再生ボタン（黒 60% の丸 72px に、右向きの白い三角。三角の重心を丸の中心に置く）
 */
.article-video a {
    position: relative;
    display: block;
}

.article-video img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article-video a::before,
.article-video a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    pointer-events: none;
}

.article-video a::before {
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    background-color: rgb(0 0 0 / 0.6);
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.article-video a::after {
    width: 20px;
    height: 23px;
    margin: -11.5px 0 0 -7px;
    background-color: var(--color-white);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (hover: hover) {
    .article-video a:hover::before {
        background-color: rgb(0 0 0 / 0.8);
    }
}

/* 箇条書きの点は緑の丸（Figma「Marker」SP 7px / PC 8px） */
.article__content ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    list-style: none;
}

.article__content ul > li {
    position: relative;
    padding-left: 17px;
}

.article__content ul > li::before {
    position: absolute;
    top: 10px;
    left: 0;
    width: 7px;
    height: 7px;
    background-color: var(--color-green);
    border-radius: 50%;
    content: "";
}

.article__content ol {
    padding-left: 1.5em;
    list-style: decimal;
}

.article__content ol > li::marker {
    color: var(--color-green);
    font-family: var(--font-en);
    font-weight: 800;
}

/* 表（Figma「Table A」）。1 行目（thead）は緑、行の見出し（th）は薄い緑。狭い画面で収まらない表は横にスクロールする */
.article__content .wp-block-table {
    overflow-x: auto;
}

.article__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem; /* 13px */
    line-height: 20px;
}

.article__content th,
.article__content td {
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #dde5df;
}

.article__content tbody th {
    width: 28%;
    background-color: var(--color-pale);
    font-weight: 700;
}

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

.article__content thead th {
    color: var(--color-white);
    background-color: var(--color-green);
    border-bottom: 0;
    font-weight: 700;
}

/*
 * 紹介した車種（Figma Page 1「Article CTA / 紹介車種（TOPのカード型）」PC 2211:314 / SP 2210:1335）。[hirabo_model] のショートコード（inc/article.php）。
 * TOP の SP の車種カード（top.css の .lineup-card）と同じ緑のカード（白い枠 3px・影。地色は車種ごと）。上に「この記事で紹介した車種」（間 SP 10px / PC 12px）。
 * SP は写真（枠の内側 329 × 187px の比率）の下に文字、タブレット・PC（768px〜）は左に写真、右に文字を半分ずつ
 */
.model-card {
    --card-bg: var(--color-green);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.model-card__label {
    color: var(--color-accent);
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    letter-spacing: 1px;
    /* 「normal」はフォントで変わる（本文のフォントでは 17px）ので、Figma の高さ（SP 17px / PC 19px）を指定する */
    line-height: 17px;
}

.model-card__card {
    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);
}

/* 写真（Figma SP: 枠の内側 329 × 187px の比率）。写真は枠いっぱいに切り抜く（本文の画像 .article__content img より優先する） */
.model-card__photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 329 / 187;
    background-color: #e3e9e4;
}

.article__content .model-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

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

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

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

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

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

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

.model-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;
}

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

/*
 * 「〜を見る」ボタン。形は共通の .label-button（白いラベル + 右端の緑の矢印の欄）で、TOP の SP の車種カードと同じ
 * （高さ 52px・白い枠 2px・文字は太字で字間なし・ラベルの下線なし）。価格との間は Figma の 6px の空き + 前後の間隔 4px × 2 = 14px。
 * 文字は 16px（共通の .label-button の PC の 18px にはしない）。375px より狭い画面は、1 行に収まるよう 13px まで縮める。
 * 本文のリンク（.article__content a）の下線は付けない
 */
.article__content .model-card__button {
    width: 100%;
    height: 52px;
    margin-top: 10px;
    border: 2px solid var(--color-white);
    font-size: clamp(0.8125rem, 4.35vw, 1rem); /* 13〜16px */
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
}

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

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

/* 前後の記事（Figma「Prev / Next」）。SP は前・次・一覧へ戻るの順に縦に並べる */
.post-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid #dde5df;
    border-bottom: 1px solid #dde5df;
}

.post-nav__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #333;
    font-weight: 500;
    text-decoration: none;
}

.post-nav__link:empty {
    display: none;
}

/* 「次の記事 ›」のラベルは右端。タイトルは前の記事と同じく幅いっぱいで左揃え（Figma 784:310 の min-w-full。2026-11-12 ユーザー指示） */
.post-nav__link--next {
    align-items: flex-end;
}

.post-nav__link--next .post-nav__title {
    align-self: stretch;
}

.post-nav__label {
    color: var(--color-accent);
    font-size: 0.75rem; /* 12px */
    letter-spacing: 1px;
    line-height: 14px;
}

.post-nav__link--prev .post-nav__label::before {
    content: "‹ ";
}

.post-nav__link--next .post-nav__label::after {
    content: " ›";
}

.post-nav__title {
    font-size: 0.875rem; /* 14px */
    line-height: 24px;
}

/* 「お知らせ・ブログ一覧へ戻る」。形は共通の .outline-button（components.css）。SP は前後の記事の下に置く */
.post-nav__back {
    order: 1;
}

@media (hover: hover) {
    .post-nav__link:hover .post-nav__title {
        text-decoration: underline;
    }
}

/*
 * 関連記事（Figma「03 RELATED」）。カードは一覧と同じ column-card（page.css）。
 * SP は見出しを左寄せにする（下層の SP の見出しの決まり）ため、見出しの箱を中央に寄せるのは 1024px 以上だけ
 */
.related {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 64px 20px 72px;
    background-color: var(--color-pale);
}

.related__list {
    display: grid;
    gap: 28px;
    width: min(100%, 1140px);
}

/* フッターの山は、CTA の下の余白に重ねる（お役立ち情報一覧と同じ） */
.site-footer {
    margin-top: 0;
}

@media (min-width: 768px) {
    /*
     * PC（Figma 2211:518: 800 × 260px）: 左に写真、右に文字を半分ずつ（枠の内側 397px ずつ）。文字は上下中央、左 36px（右は枠の 3px を含めて 36px）。
     * ボタンは幅 320px。タブレットも同じ並び（記事の列が広く、縦に積むと写真が大きくなりすぎる）
     */
    .model-card__card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 260px;
    }

    /* 写真の高さはカードの高さ（文字の高さ・最小 260px）に合わせる */
    .model-card__photo {
        aspect-ratio: auto;
    }

    .article__content .model-card__image {
        object-position: center top;
    }

    .model-card__body {
        justify-content: center;
        padding: 28px 33px 28px 36px;
    }

    .article__content .model-card__button {
        width: min(100%, 320px);
    }

    .related__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }
}

@media (min-width: 1024px) {
    .article-eyecatch {
        width: min(100% - 140px, 1140px);
        margin-inline: auto;
        padding-top: 48px;
    }

    .article-eyecatch img {
        aspect-ratio: 2 / 1;
    }

    .article {
        gap: 32px;
        padding: 32px 0 120px;
    }

    .article__header {
        gap: 16px;
        padding-top: 56px;
    }

    /* PC はタイトルの下の線を引かない（Figma 2026-11-12 版で「_旧 Divider」として非表示。リードを目次の下へ移したため） */
    .article__title {
        padding-bottom: 0;
        border-bottom: 0;
        font-size: 2.125rem; /* 34px */
        letter-spacing: 1px;
        line-height: 52px;
    }

    .article__lead {
        font-size: 1.0625rem; /* 17px */
        line-height: 34px;
    }

    /*
     * アイキャッチのある記事の PC（Figma Page 1「01 FV（タイトル＋アイキャッチ）」2149:314。オーナー紹介の記事も同じ）: パンくずの下、上 32px・下 16px の中に、
     * 左に見出し（524px。カテゴリー・日付 → タイトルを 20px 間隔）、56px あけて右にアイキャッチ（560px。高さ 442px 以上で見出しの高さに合わせる）。
     * 本文の列（目次）はその 32px 下から（.article の上の余白のまま。2026-11-10 Chatwork で目次の上を 96 → 48px に縮めた）
     */
    .article-top--split .breadcrumb {
        order: 0;
    }

    .article-top--split .article-fv {
        display: grid;
        grid-template-columns: minmax(0, 524fr) minmax(0, 560fr);
        align-items: center;
        column-gap: 56px;
        width: min(100% - 140px, 1140px);
        margin-inline: auto;
        padding: 32px 0 16px;
    }

    /* グリッドでも order が効くので、HTML の順（見出し → アイキャッチ）に戻す */
    .article-top--split .article__header,
    .article-top--split .article-eyecatch {
        order: 0;
    }

    .article-top--split .article__header {
        gap: 20px;
        width: auto;
        margin: 0;
        padding-top: 0;
    }

    .article-top--split .article-eyecatch {
        width: auto;
        margin: 0;
        padding-top: 0;
    }

    /* 見出しがタイトルだけになったので、アイキャッチは見出しの高さに合わせず Figma の 560 × 442 の比率で出す（2026-11-12 版） */
    .article-top--split .article-eyecatch img {
        aspect-ratio: 560 / 442;
    }

    .toc {
        gap: 18px;
        padding: 32px 40px 36px;
    }

    .toc__title {
        gap: 12px;
        font-size: 1.125rem; /* 18px */
        line-height: 22px;
    }

    .toc__title::before {
        height: 24px;
    }

    .toc__list,
    .toc__sub-list {
        gap: 10px;
    }

    .toc__sub-list {
        margin-top: 10px;
    }

    .toc__link,
    .toc__sub-link {
        gap: 12px;
        line-height: 28px;
    }

    .toc__link {
        font-size: 1rem; /* 16px */
    }

    .toc__number {
        width: 32px;
        font-size: 0.875rem; /* 14px */
    }

    .toc__sub-link {
        padding-left: 44px;
        font-size: 0.9375rem; /* 15px */
    }

    .toc__sub-link::before {
        margin-top: 13px;
    }

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

    .article__content > * + * {
        margin-top: 32px;
    }

    .article__content h2 {
        padding-top: 32px;
        padding-bottom: 18px;
        background-size: 60px 2px, 100% 2px;
        font-size: 1.75rem; /* 28px */
        line-height: 40px;
    }

    .article__content h3 {
        padding: 8px 0 0 16px;
        background-position: left 8px;
        background-size: 4px 34px;
        font-size: 1.375rem; /* 22px */
        line-height: 34px;
    }

    .article__content figcaption {
        margin-top: 10px;
        font-size: 0.8125rem; /* 13px */
        line-height: 22px;
    }

    .article__content ul {
        gap: 8px;
    }

    .article__content ul > li {
        padding-left: 20px;
    }

    .article__content ul > li::before {
        top: 12px;
        width: 8px;
        height: 8px;
    }

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

    .article__content th,
    .article__content td {
        padding: 16px 24px;
    }

    .article__content tbody th {
        width: 25%;
    }

    .model-card {
        gap: 12px;
    }

    .model-card__label {
        font-size: 0.8125rem; /* 13px */
        line-height: 19px;
    }

    .post-nav {
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 32px 0;
    }

    .post-nav__link {
        flex: 1;
        min-width: 0;
        gap: 6px;
    }

    .post-nav__link:empty {
        display: flex;
    }

    .post-nav__label {
        font-size: 0.8125rem; /* 13px */
        line-height: 16px;
    }

    .post-nav__title {
        font-size: 0.9375rem; /* 15px */
        line-height: 26px;
    }

    .post-nav__back {
        order: 0;
        flex-shrink: 0;
    }

    .related {
        align-items: center;
        gap: 56px;
        padding: 100px 70px 120px;
    }

    .related__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}