/* ============================================================
 * media.css — トレカプロメディア (/media/)
 *
 * Markdown 変換器 (src/Markdown.php) が出力する .article-* 系
 * クラスと、一覧ページの .media-* 系クラスのスタイル。
 *
 * 値はすべて tokens.semantic.css の var(--ds-*) 経由で参照する
 * （生hex / 生px 禁止）。例外は @media の breakpoint のみ。
 * MediaController が extraCss として読み込む。
 * ============================================================ */

/* ============================================================
 * 一覧（メディアトップ）— オーバーレイ・ヒーロー Pickup レイアウト
 * 左: 特集1件（画像全面＋下部スクリムに白抜きタイトル）/
 * 右: 縦積み2件（同型の小カード）。
 * モノクロ基調。ホロ・グラデーションは限定アクセントのみ。
 * 和文見出し Noto Sans JP Black / 欧文ラベル Space Grotesk。
 * アイキャッチは radius-lg(12px) で角丸。
 * ============================================================ */

.media-home { max-width: 100%; margin: 0; }

/* PC はコンテナ幅をワイドに（r25 を参考） */
.main > .container:has(.media-home) { max-width: var(--ds-container-wide); }

/* SEO/読み上げ用の非表示見出し */
.media-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 欧文ラベル共通（Space Grotesk） */
.media-pickup-head__title,
.media-pickup-head__tag,
.media-card__cat,
.media-cover__badge,
.media-meta,
.media-byline,
.media-pitch__kicker {
    font-family: "Space Grotesk", "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ===== Pickup ヒーロー（オーバーレイ型） =====
 * 1024px 以上: 左=大1件(3:2) / 右=縦積み2件が左の高さに揃う。
 * 560〜1023px: 大1件の下にサブ2件が横並び。559px 以下: 縦1列。
 */
.media-hero { margin-bottom: var(--ds-space-stack-xl); }
.media-hero__grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--ds-space-stack-sm);
}
.media-hero__side {
    display: grid; grid-template-columns: 1fr;
    gap: var(--ds-space-stack-sm);
}
@media (min-width: 560px) and (max-width: 1023px) {
    .media-hero__side { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .media-hero__grid { grid-template-columns: 2fr 1fr; }
    .media-hero__side { grid-template-rows: 1fr 1fr; }
}
.media-hero__cell--sub { display: flex; }
.media-hero__card {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-color-bg-inverse);
    text-decoration: none; color: inherit;
    transition: box-shadow 0.15s ease;
}
.media-hero__card:hover { box-shadow: var(--ds-shadow-popover); }
.media-hero__card--main { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
    .media-hero__card--main { aspect-ratio: 3 / 2; }
}
.media-hero__card--sub { aspect-ratio: 16 / 9; flex: 1; }
@media (min-width: 1024px) {
    .media-hero__card--sub { aspect-ratio: auto; }
}
.media-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
/* cover_image が無い記事のフォールバック（ブランド地＋キャッチ） */
.media-hero__fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    padding: var(--ds-space-stack-md);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: var(--ds-text-h3-size);
    font-weight: var(--ds-text-h2-weight);
    color: var(--ds-color-text-inverse);
}
.media-hero__shade {
    position: absolute; inset: 0;
    background: var(--ds-color-scrim-gradient);
}
.media-hero__body {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: block;
    padding: var(--ds-space-stack-md);
}
.media-hero__card--sub .media-hero__body { padding: var(--ds-space-stack-sm); }
.media-hero__title {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: var(--ds-text-h2-size); line-height: var(--ds-text-h2-lh);
    font-weight: var(--ds-text-display-weight);
    color: var(--ds-color-text-inverse);
}
@media (min-width: 1024px) {
    .media-hero__card--main .media-hero__title { font-size: var(--ds-text-h1-size); line-height: var(--ds-text-h1-lh); }
}
.media-hero__card--sub .media-hero__title {
    font-size: var(--ds-text-h3-size); line-height: var(--ds-text-h3-lh);
    -webkit-line-clamp: 2;
}
.media-hero__ext {
    font-weight: var(--ds-text-body-weight);
    font-size: var(--ds-text-caption-size);
    color: var(--ds-color-text-inverse);
}

/* ===== Pickup 見出し（ブランド準拠：黒ワードマーク＋ホロの限定アクセント）=====
 * トレカプロのブランドは「黒のワードマーク＋ホログラフィックのマーク」。
 * ホロのパステルは文字色にすると白地で読めないため、テキストは Ink Black、
 * 直下にホロ・グラデーションの下線を“限定アクセント”として敷く。
 */
.media-pickup-head {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: var(--ds-space-inline-sm);
    margin-bottom: var(--ds-space-stack-md);
}
.media-pickup-head__title {
    font-size: var(--ds-text-display-size); /* 40px の特大見出し */
    font-weight: var(--ds-text-display-weight);
    line-height: var(--ds-text-h1-lh);
    letter-spacing: 0.005em;
    color: var(--ds-color-text); /* Ink Black（ブランドのワードマークは黒）*/
    margin: 0;
}
.media-pickup-head__title::after {
    content: "";
    display: block;
    height: var(--ds-space-inline-xs);
    margin-top: var(--ds-space-inline-xs);
    border-radius: var(--ds-radius-chip);
    background: var(--ds-color-accent-gradient); /* 135° ホロ・グラデーション（限定アクセント）*/
}
.media-pickup-head__tag {
    font-size: var(--ds-text-body-size);
    font-weight: var(--ds-text-h2-weight);
    color: var(--ds-color-text);
}
/* 記事一覧などの通常セクション見出し（特大・ホロ下線にはしない）*/
.media-pickup-head--section .media-pickup-head__title { font-size: var(--ds-text-h2-size); }
.media-pickup-head--section .media-pickup-head__title::after { display: none; }

/* ===== 共通: メタ / カテゴリ ===== */
.media-meta {
    display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-md);
    font-size: var(--ds-text-caption-size);
    color: var(--ds-color-text-subtle); margin: 0;
}
.media-byline { color: var(--ds-color-text-subtle); }

/* 記事一覧サンプル(デモ)グリッド */
.media-samples { margin-bottom: var(--ds-space-stack-xl); }
.media-samples__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--ds-space-stack-lg);
}
@media (min-width: 560px) { .media-samples__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .media-samples__grid { grid-template-columns: 1fr 1fr 1fr; } }
.media-card__link { display: block; text-decoration: none; color: inherit; }
/* アイキャッチ（記事ごとのキャッチ＋ブランド配色で生成）*/
.media-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    display: flex; align-items: center;
    padding: var(--ds-space-stack-md);
    border: var(--ds-border-width) solid var(--ds-color-border);
    margin-bottom: var(--ds-space-stack-sm);
    transition: box-shadow 0.15s ease;
}
.media-card__link:hover .media-cover { box-shadow: var(--ds-shadow-popover); }
.media-cover--paper { background: var(--ds-color-bg-paper); }
.media-cover--ink   { background: var(--ds-color-bg-inverse); border: none; }
.media-cover--holo  { background: var(--ds-color-accent-gradient); border: none; } /* ページ内で唯一のホロ */
/* 実画像アイキャッチ（記事ごとに用意した場合）*/
.media-cover--image { padding: 0; border: none; background: var(--ds-color-bg-paper); }
.media-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ロゴ・アイキャッチ（サンプル/プレースホルダ用。ブランドカラー地+ロゴ）*/
.media-cover--logo {
    background: var(--ds-color-accent-gradient);
    border: none;
    justify-content: center;
}
.media-cover__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-inline-sm);
}
.media-cover__logo-mark {
    width: var(--ds-space-stack-md);
    height: var(--ds-space-stack-md);
    background: var(--ds-color-text);
    border-radius: var(--ds-radius-input);
    transform: rotate(45deg);
}
.media-cover__logo-text {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 900;
    font-size: var(--ds-text-h2-size);
    letter-spacing: 0.04em;
    color: var(--ds-color-text);
}
.media-cover__catch {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 900;
    font-size: var(--ds-text-h2-size);
    line-height: var(--ds-text-h1-lh);
    letter-spacing: 0.01em;
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.media-cover--paper .media-cover__catch,
.media-cover--holo .media-cover__catch { color: var(--ds-color-text); }
.media-cover--ink .media-cover__catch { color: var(--ds-color-text-inverse); }
.media-cover__stamp {
    position: absolute; right: var(--ds-space-stack-sm); bottom: var(--ds-space-stack-sm);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 900;
    font-size: var(--ds-text-micro-size);
    letter-spacing: 0.06em;
    opacity: 0.55;
}
.media-cover--ink .media-cover__stamp { color: var(--ds-color-text-inverse); }
.media-cover--paper .media-cover__stamp,
.media-cover--holo .media-cover__stamp { color: var(--ds-color-text); }
.media-cover__badge {
    position: absolute; top: var(--ds-space-stack-sm); left: var(--ds-space-stack-sm);
    font-size: var(--ds-text-micro-size); letter-spacing: 0.16em;
    color: var(--ds-color-text-inverse); background: var(--ds-color-bg-inverse);
    border-radius: var(--ds-radius-chip);
    padding: var(--ds-space-inline-xs) var(--ds-space-inline-md);
}
/* 外部サイト（自社運営ツール）pickup の識別バッジ：ホロ地＋黒文字（ブランド準拠）*/
.media-cover__badge--site {
    background: var(--ds-color-accent-gradient);
    color: var(--ds-color-text);
}
/* タイトル横の外部リンク記号 */
.media-card__ext {
    font-weight: var(--ds-text-body-weight);
    font-size: var(--ds-text-caption-size);
    color: var(--ds-color-text-subtle);
}
.media-card__cat {
    display: block;
    font-size: var(--ds-text-micro-size);
    letter-spacing: 0.1em;
    color: var(--ds-color-text-subtle);
    margin-bottom: var(--ds-space-stack-xs);
}
.media-card__title {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: var(--ds-text-h3-size);
    line-height: var(--ds-text-h3-lh);
    font-weight: var(--ds-text-h2-weight);
    color: var(--ds-color-text);
    margin: 0 0 var(--ds-space-stack-xs);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* 記事一覧グリッドのタイトルは小さめ（R25 の一覧カード相当）*/
.media-samples__grid .media-card__title { font-size: var(--ds-text-body-size); }

.media-empty {
    max-width: var(--ds-container-article);
    margin: var(--ds-space-stack-lg) auto;
    color: var(--ds-color-text-muted);
}

/* ===== 掲載・取材募集バンド（パートナー向け）===== */
.media-pitch {
    margin-top: var(--ds-space-stack-xl);
    background: var(--ds-color-bg-inverse);
    border-radius: var(--ds-radius-card);
    color: var(--ds-color-text-inverse);
}
.media-pitch__inner {
    max-width: var(--ds-container-article);
    margin: 0 auto;
    padding: var(--ds-space-stack-lg) var(--ds-space-stack-md);
    text-align: center;
}
.media-pitch__kicker {
    font-size: var(--ds-text-micro-size);
    letter-spacing: 0.22em;
    color: var(--ds-color-text-disabled);
    margin: 0 0 var(--ds-space-stack-xs);
}
.media-pitch__title {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 900;
    font-size: var(--ds-text-h2-size);
    line-height: var(--ds-text-h2-lh);
    color: var(--ds-color-text-inverse);
    margin: 0 0 var(--ds-space-stack-sm);
}
.media-pitch__lead {
    font-size: var(--ds-text-body-sm-size);
    line-height: var(--ds-text-body-lh);
    color: var(--ds-color-bg-subtle);
    margin: 0 auto var(--ds-space-stack-md);
}
.media-pitch__actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--ds-space-inline-md);
    margin-bottom: var(--ds-space-stack-sm);
}
.media-pitch__btn {
    display: inline-flex; align-items: center;
    min-height: var(--ds-touch-target-min);
    padding: var(--ds-space-stack-xs) var(--ds-space-stack-lg);
    border: var(--ds-border-width) solid var(--ds-color-border-inverse);
    border-radius: var(--ds-radius-button);
    color: var(--ds-color-text-inverse);
    text-decoration: none;
    font-size: var(--ds-text-body-sm-size);
}
.media-pitch__btn--primary {
    background: var(--ds-color-text-inverse);
    color: var(--ds-color-text);
    border-color: var(--ds-color-text-inverse);
}
.media-pitch__note {
    font-size: var(--ds-text-micro-size);
    color: var(--ds-color-text-disabled);
    margin: 0;
}

/* ===== 記事: ラッパ ===== */
/* /oripa/ 配下のメディア記事は背景を白に戻す
 * （oripa.css の body.oripa-scope が Paper 背景を当てるが、media.css は後に
 *   読まれるため上書きできる。media.css を読むのはメディア記事のみなので
 *   ピラー/地域ページの Paper 背景には影響しない）。*/
body.oripa-scope { background: var(--ds-color-bg); }

.media-article {
    max-width: var(--ds-container-article);
    margin: var(--ds-space-stack-md) auto 0;
}

/* ===== 記事: ヘッダー ===== */
.media-article .article__header {
    /* header自体の下線は廃止。区切り線は 監修/編集 とパンくずの間の1本のみ（.breadcrumb の border-top）にする */
    margin-bottom: var(--ds-space-stack-md);
}
.media-article .article__category {
    display: inline-block;
    font-size: var(--ds-text-micro-size);
    font-weight: var(--ds-text-micro-weight);
    color: var(--ds-color-text-muted);
    background: var(--ds-color-bg-paper);
    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-chip);
    padding: var(--ds-space-inline-xs) var(--ds-space-inline-md);
    margin-bottom: var(--ds-space-stack-sm);
}
.media-article .article__title {
    font-size: var(--ds-text-h2-size);
    line-height: var(--ds-text-h2-lh);
    font-weight: var(--ds-text-h1-weight);
    color: var(--ds-color-text);
    margin: 0 0 var(--ds-space-stack-sm);
}
/* FVのパンくずは 監修/編集 の下・区切り線の下に表示する（show.php 側で article__header 内に描画） */
.media-article .article__header .breadcrumb {
    margin: var(--ds-space-stack-sm) 0 0;
    padding-top: var(--ds-space-stack-sm);
    border-top: var(--ds-border-width) solid var(--ds-color-border);
}
.media-article .article__meta {
    font-size: var(--ds-text-caption-size);
    color: var(--ds-color-text-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-inline-md);
    margin-bottom: var(--ds-space-stack-sm);
}
.media-article .article__byline {
    font-size: var(--ds-text-body-sm-size);
    color: var(--ds-color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-inline-md);
}
.media-article .article__byline a { color: var(--ds-color-text-link); }
.media-article .article__byline .article__pr-tag {
    color: var(--ds-color-text-secondary);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.media-article .article__disclosure {
    font-size: var(--ds-text-caption-size);
    line-height: var(--ds-text-caption-lh);
    color: var(--ds-color-text-subtle);
    background: var(--ds-color-bg-subtle);
    border-radius: var(--ds-radius-input);
    padding: var(--ds-space-stack-sm);
    margin-top: var(--ds-space-stack-md);
}

/* ===== 記事: 本文タイポグラフィ ===== */
.article__body {
    font-size: var(--ds-text-body-size);
    line-height: 1.9;   /* --ds-text-body-lh(1.8) よりさらに行間を広げて読みやすくする */
    color: var(--ds-color-text);
}
/* h2 は装飾なし・太字・黒のプレーンテキスト。上下 20px の余白で区切る（BUSINESS INSIDER 風） */
.article__body > h2 {
    font-size: var(--ds-text-h2-size);
    line-height: var(--ds-text-h2-lh);
    font-weight: var(--ds-text-h2-weight);
    color: var(--ds-color-text);
    margin: var(--ds-space-stack-heading) 0;
}
/* 「出典」見出しは他のh2と違い記事の主要トピックではないため、プレーンな小さいテキストに落とす */
.article__body > h2#sec-出典 {
    font-size: var(--ds-text-body-sm-size);
    line-height: var(--ds-text-body-sm-lh);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text-muted);
    margin: var(--ds-space-stack-md) 0 var(--ds-space-stack-xs);
    /* .oripa-scope の見出しバナー（背景・padding・下線）を打ち消してプレーンテキストに戻す */
    background: transparent;
    padding: 0;
    border-bottom: 0;
}
.article__body > h2#sec-出典 + ul {
    font-size: var(--ds-text-body-sm-size);
    color: var(--ds-color-text-muted);
}
/* h3 はグレーの左バー付き（バーは文字高に揃えてスッキリ見せる） */
.article__body > h3 {
    position: relative;
    font-size: var(--ds-text-h3-size);
    line-height: var(--ds-text-h3-lh);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
    margin: var(--ds-space-stack-md) 0 var(--ds-space-stack-sm);
    padding-left: var(--ds-space-inline-md);
}
.article__body > h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    height: 1.05em;
    width: var(--ds-border-width-divider);
    background: var(--ds-color-border-strong);
}
.article__body > h4 {
    font-size: var(--ds-text-body-size);
    line-height: var(--ds-text-h3-lh);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
    margin: var(--ds-space-stack-md) 0 var(--ds-space-stack-sm);
}
.article__body p {
    margin: 0 0 var(--ds-space-stack-md);   /* 段落間を2行分ほど広めにあける */
    overflow-wrap: anywhere;   /* 長い英数字・URL の行はみ出しを防ぐ */
    word-break: normal;        /* 句点以外は画面幅ギリギリまで使い、文字単位で自然折り返し（文節単位の早い改行を無効化） */
}
/* 句点ベースの改行スペーサー（Markdown.php が空の <span class="sbr"> を挿入）。
   空ブロックなので改行を作り、margin で空行を作る（<br> と違い margin が確実に効く）。
   SP・PC とも: 1文ごとに改行＋1行空け（改行時はかならず1行あける） */
.article__body .sbr { display: block; margin-top: var(--ds-space-stack-md); }
/* SPは画面が狭く文の塊が詰まって見えやすいので、段落・文の区切りをさらに広げる（目安1.5行分） */
@media (max-width: 639px) {
    .article__body p { margin-bottom: var(--ds-space-stack-1_5line-sp); }
    .article__body .sbr { margin-top: var(--ds-space-stack-1_5line-sp); }
}
/* 地の文に置く「⇒ …」のインラインCTA（Markdown.php が <span class="article-cta-inline"> で包む）。
   本文と地続きに見えないよう必ず改行して右に寄せる。文の途中に置いても、段落まるごとでも同じ見た目になる。
   空け量は .sbr（文の区切り）と揃え、段落のリズムを崩さない */
.article__body .article-cta-inline {
    display: block;
    text-align: right;
    /* SPで折り返すとき、最後の行に1文字だけ残るのを避けて2行を均す（未対応ブラウザは通常の折り返し） */
    text-wrap: balance;
    margin-top: var(--ds-space-stack-md);
}
/* 段落まるごとがCTAのときは、段落の margin だけで足りるので上の空けを足さない */
.article__body .article-cta-inline--solo { margin-top: 0; }
@media (max-width: 639px) {
    .article__body .article-cta-inline { margin-top: var(--ds-space-stack-1_5line-sp); }
}
.article__body a {
    color: var(--ds-color-text-link-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.article__body strong { font-weight: var(--ds-text-h3-weight); }
.article__body ul,
.article__body ol {
    margin: 0 0 var(--ds-space-stack-sm);
    padding-left: var(--ds-space-stack-md);
}
.article__body li { margin-bottom: var(--ds-space-stack-xs); }
.article__body hr {
    border: none;
    border-top: var(--ds-border-width) solid var(--ds-color-border);
    margin: var(--ds-space-stack-lg) 0;
}
/* blockquote は .article-quote（大型クォートマーク型）として blog-parts.css で定義 */

/* ===== 目次 ===== */
.article-toc {
    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    background: var(--ds-color-bg-elevated);
    padding: var(--ds-space-stack-md);
    margin: 0 0 var(--ds-space-stack-lg);
}
.article-toc__head {
    display: flex;
    align-items: center;
    gap: var(--ds-space-inline-sm);
    padding-bottom: var(--ds-space-stack-sm);
    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
    margin-bottom: var(--ds-space-stack-xs);
}
.article-toc__icon { display: inline-flex; color: var(--ds-color-text); }
.article-toc__heading {
    font-weight: var(--ds-text-h3-weight);
    font-size: var(--ds-text-body-size);
    color: var(--ds-color-text);
}
/* .article__body のリスト余白を打ち消して目次をキュッと詰める */
.article-toc__list,
.article__body .article-toc__list { list-style: none; margin: 0; padding: 0; }
.article-toc__item,
.article__body .article-toc__item { margin: 0; }
.article-toc__item a {
    display: flex;
    gap: var(--ds-space-inline-sm);
    align-items: baseline;
    padding: var(--ds-space-inline-xs) 0;
    color: var(--ds-color-text);
    text-decoration: none;
    line-height: var(--ds-text-body-lh);
}
.article-toc__item a:hover .article-toc__label { text-decoration: underline; }
/* 番号は幅を固定して右寄せ。2桁（10以降）になったときに見出し文字列の
   開始位置がずれるのを防ぐ（tabular-nums だけでは桁数の差は吸収できない）。 */
.article-toc__num {
    flex: none;
    min-width: 1.5em;
    text-align: right;
    color: var(--ds-color-text-subtle);
    font-variant-numeric: tabular-nums;
}
.article-toc__num::after {
    content: "｜";
    margin-left: var(--ds-space-inline-xs);
    color: var(--ds-color-border-strong);
}
.article-toc__item--h3 { padding-left: var(--ds-space-stack-md); }
.article-toc__item--h3 a {
    color: var(--ds-color-text-muted);
    font-size: var(--ds-text-body-sm-size);
}
/* 「もっと見る」ピル＋下側フェードは blog-parts.css（.article-toc__more*）で定義 */
.article-toc__more-btn {
    list-style: none;
    cursor: pointer;
}
.article-toc__more-btn::-webkit-details-marker { display: none; }
/* 展開後は「もっと見る」を消し、目次を連続表示にする（ボタンが中央に残る崩れを防止） */
.article-toc__more[open] > .article-toc__more-btn { display: none; }
.article-toc__more[open] > .article-toc__list--rest { margin-top: 0; }

/* ===== 装飾ボックス (box / memo / alert) ===== */
/* 外枠（外線）は付けず、背景色の塗りだけで囲みを表現する */
.article-box {
    border-radius: var(--ds-radius-card);
    background: var(--ds-color-bg-paper);
    padding: var(--ds-space-stack-md);
    margin: 0 0 var(--ds-space-stack-md);
}
.article-box__title {
    display: flex;
    align-items: center;
    gap: var(--ds-space-inline-xs);
    font-size: var(--ds-text-body-sm-size);
    line-height: var(--ds-text-body-sm-lh);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
    margin-bottom: var(--ds-space-stack-xs);
}
.article-box__title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.article-box__icon { flex: none; display: inline-flex; }
.article-box__body > :last-child { margin-bottom: 0; }
.article-box--memo {
    background: var(--ds-color-state-info-bg);
    border-left: 4px solid var(--ds-color-state-info-border);
}
.article-box--memo .article-box__title,
.article-box--memo .article-box__icon {
    color: var(--ds-color-state-info-text);
}
/* alert: 薄いピンク地の全面塗り＋丸アイコン（枠線なし）。
   タイトルは中身を一言でまとめた要約、本文で詳細を続ける想定。 */
.article-box--alert {
    background: var(--ds-color-state-danger-bg);
}
/* タイトルは本文と同じサイズ。要約が長くなっても切らずに折り返す
   （既定の nowrap + ellipsis だと要約の後半が読めなくなるため）。 */
.article-box--alert .article-box__title {
    align-items: flex-start;
    color: var(--ds-color-danger);
    font-size: var(--ds-text-body-size);
    line-height: var(--ds-text-body-lh);
}
.article-box--alert .article-box__title-text {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.article-box--alert .article-box__icon {
    color: var(--ds-color-danger);
    border-radius: 50%;
}
/* 本文は黒（グレーだと地のピンクに沈んで読みづらい） */
.article-box--alert .article-box__body {
    color: var(--ds-color-text);
}
/* 出典・免責などの注記（本文より少し小さく・控えめ） */
.article-box--note .article-box__body {
    font-size: var(--ds-text-body-sm-size);
    color: var(--ds-color-text-muted);
}

/* ===== メリデメ比較 ===== */
.article-proscons {
    margin: 0 0 var(--ds-space-stack-md);
}
.article-proscons__title {
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
    margin-bottom: var(--ds-space-stack-sm);
}
.article-proscons__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-stack-sm);
}
@media (min-width: 640px) {
    .article-proscons__grid { grid-template-columns: 1fr 1fr; }
}
/* 外枠（外線）は付けず、背景色の塗りだけで pros/cons を区別する */
.article-proscons__col {
    border-radius: var(--ds-radius-card);
    padding: var(--ds-space-stack-sm) var(--ds-space-stack-md);
}
.article-proscons__col--pros {
    background: var(--ds-color-state-positive-bg);
}
.article-proscons__col--cons {
    background: var(--ds-color-state-danger-bg);
}
.article-proscons__label {
    font-weight: var(--ds-text-h3-weight);
    margin-bottom: var(--ds-space-stack-xs);
}
.article-proscons__label--pros { color: var(--ds-color-state-positive-text); }
.article-proscons__label--cons { color: var(--ds-color-state-danger-text); }
.article-proscons__col ul { margin: 0; padding-left: var(--ds-space-stack-md); list-style: disc; }
.article-proscons__col li { margin-bottom: var(--ds-space-stack-xs); list-style: disc; }

/* FAQ アコーディオン（.article-faq）は shop 詳細とも共通のため blog-parts.css で定義 */

/* ===== CTA ボタン ===== */
.article-btn-wrap {
    text-align: center;
    margin: var(--ds-space-stack-md) 0;
}
/* 立体ボタン: 底面(--btn-depth)を 4px ぶん下に敷き、上辺に薄いハイライトを重ねる。
   hover で 1px・押下で 4px 沈む。色変種は --btn-depth を差し替えるだけでよい */
.article-btn {
    --btn-depth: var(--ds-color-cta-depth);
    display: inline-block;
    min-height: var(--ds-touch-target-min);
    padding: var(--ds-space-stack-sm) var(--ds-space-stack-lg);
    background: var(--ds-color-bg-inverse);
    color: var(--ds-color-text-inverse);
    font-weight: var(--ds-text-h3-weight);
    text-decoration: none;
    border-radius: var(--ds-radius-button);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
    box-shadow: 0 4px 0 var(--btn-depth), var(--ds-shadow-popover);
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.article-btn:hover,
.article__body a.article-btn:hover {
    transform: translateY(1px);
    box-shadow: 0 3px 0 var(--btn-depth), var(--ds-shadow-card);
}
.article-btn:active,
.article__body a.article-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--btn-depth);
}
/* ボタン直下のマイクロコピー（[btn ...](url){sub=...}） */
.article-btn-sub {
    display: block;
    margin: var(--ds-space-inline-xs) 0 0;
    font-size: var(--ds-text-micro-size);
    line-height: 1.7;
    color: var(--ds-color-text-subtle);
}
/* .article__body a（黒文字+下線）の詳細度に勝たせる。黒地に黒文字で潰れるのを防ぐ */
.article__body a.article-btn {
    color: var(--ds-color-text-inverse);
    text-decoration: none;
}
/* style.css の `a:hover { opacity: .65 }` がCTAボタンにも効いて、
   ホバー/タップ時に地色ごと透けて見える（＝押せなくなったように見える）のを打ち消す。
   ボタンのホバー表現は各変種の background で行う。 */
.article-btn:hover,
.article-btn:focus-visible,
.article__body a.article-btn:hover,
.article__body a.article-btn:focus-visible {
    opacity: 1;
}
.article-btn:hover,
.article__body a.article-btn:hover {
    background-color: var(--c-gray-800);
}
/* [btn-cta] — 目立たせたいCTA用のオレンジ変種 */
.article-btn--cta,
.article__body a.article-btn--cta {
    --btn-depth: var(--ds-color-cta-orange-depth);
    background-color: var(--ds-color-cta-bg);
}
.article-btn--cta:hover,
.article__body a.article-btn--cta:hover {
    background-color: var(--ds-color-cta-bg-hover);
}
/* [btn-blue] — 青のCTA変種。オレンジ([btn-cta])ほど押しが強くない導線や、
   1記事にCTAが複数あるときの色分けに使う */
.article-btn--blue,
.article__body a.article-btn--blue {
    --btn-depth: var(--ds-color-cta-blue-depth);
    background-color: var(--ds-color-cta-blue-bg);
}
.article-btn--blue:hover,
.article__body a.article-btn--blue:hover {
    background-color: var(--ds-color-cta-blue-bg-hover);
}
/* [btn-line] — LINE公式色の変種。LINE友だち追加・LINE相談への導線にだけ使う */
.article-btn--line,
.article__body a.article-btn--line {
    --btn-depth: var(--ds-color-cta-line-depth);
    background-color: var(--ds-color-cta-line-bg);
}
.article-btn--line:hover,
.article__body a.article-btn--line:hover {
    background-color: var(--ds-color-cta-line-bg-hover);
}

/* ===== サンプル画像 / 図版 ===== */
.article-samples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-stack-xs);
    margin: 0 0 var(--ds-space-stack-md);
}
@media (min-width: 640px) {
    .article-samples { grid-template-columns: 1fr 1fr 1fr; }
}
.article-samples img,
.article-figure img {
    width: auto;
    max-width: 100%;
    max-height: 560px;
    display: block;
    margin-inline: auto;
    border-radius: var(--ds-radius-card);
    border: var(--ds-border-width) solid var(--ds-color-border);
}
.article-figure { margin: 0 0 var(--ds-space-stack-md); }
/* {sp=...} で SP 用の縦長画像に差し替えた図版（= <picture> になる）は、
   上の max-height:560px で潰すと文字が読めなくなるので横幅いっぱいに出す。
   max-height は PC の横長図版が縦に伸びすぎないための保険なので、SP では外してよい。 */
@media (max-width: 600px) {
    .article-figure picture > img {
        max-height: none;
        width: 100%;
    }
}
/* 連続2枚の図版は、PC/SPともに1画面1枚のカルーセル（左右ボタンでめくる）にする。 */
.article-carousel {
    position: relative;
    margin: 0 0 var(--ds-space-stack-md);
}
.article-carousel__viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.article-carousel__viewport::-webkit-scrollbar { display: none; }
.article-carousel__viewport > .article-figure {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}
.article-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ds-radius-avatar);
    background: var(--c-gray-600);
    color: var(--ds-color-text-inverse);
    box-shadow: var(--ds-shadow-popover);
    cursor: pointer;
    padding: 0;
}
.article-carousel__btn--prev { left: 6px; }
.article-carousel__btn--next { right: 6px; }
.article-carousel__btn:disabled { opacity: 0.35; cursor: default; }
.article-carousel__count {
    display: block;
    margin: var(--ds-space-stack-xs) 0 0;
    text-align: center;
    font-size: var(--ds-text-micro-size);
    color: var(--ds-color-text-muted);
}
/* 旧クラス（2カラム）は後方互換のため残す */
.article-figure-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-stack-sm);
    align-items: start;
    margin: 0 0 var(--ds-space-stack-md);
}
.article-figure-pair .article-figure { margin: 0; }
.article-figure__link { display: block; }
/* キャプションは 14px。SP で1行に収める前提で書く（本文の内容幅は viewport - 40px なので、
   360px 端末で 320px。全角なら約22文字が上限）。長くなる説明は本文側に書くこと。 */
.article-figure figcaption {
    font-size: var(--ds-text-body-sm-size);
    line-height: var(--ds-text-body-sm-lh);
    color: var(--ds-color-text-muted);
    text-align: center;
    margin-top: var(--ds-space-stack-xs);
}
.article-figure figcaption a {
    color: var(--ds-color-text-link-accent); /* 本文リンクと同じGoogleブルーに統一 */
    text-decoration: underline;
}
.article-inline-img { border-radius: var(--ds-radius-card); }

/* ===== 画像の拡大表示（クリック/タップでポップアップ。app.js が組み立てる） =====
   対象は本文中のカード画像（表の中の !img / :::samples）と、単体図版（.article-figure）。
   出典リンク付きの図版（figure > a > img）はリンク遷移が優先されるため除外している。 */
.article-table-wrap .article-inline-img,
.article-samples img,
.article-figure > img,
.article-figure > picture > img {
    cursor: zoom-in;
}
/* 画像の拡大表示（.img-lightbox）は public/css/lightbox.css に切り出し済み。
   media.css を読むページは lightbox.css も一緒に読むこと（MediaController の extraCss）。 */


/* ===== 動画埋め込み（縦動画。preload=none で軽量） ===== */
.article-video {
    margin: 0 0 var(--ds-space-stack-md);
    text-align: center;
}
.article-video__el {
    width: auto;
    max-width: 100%;
    max-height: 70vh;          /* 縦動画が画面を占有しすぎないよう制限 */
    display: block;
    margin-inline: auto;
    border-radius: var(--ds-radius-card);
    background: var(--ds-color-bg-paper);
}
.article-video figcaption {
    font-size: var(--ds-text-body-sm-size);
    line-height: var(--ds-text-body-sm-lh);
    color: var(--ds-color-text-muted);
    text-align: center;
    margin-top: var(--ds-space-stack-xs);
}

/* ===== Xポスト カルーセル（当選報告など） ===== */
.article-tweet-carousel {
    display: flex;
    gap: var(--ds-space-stack-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--ds-space-stack-xs);
    margin: 0 0 var(--ds-space-stack-md);
    scrollbar-width: thin;
}
.article-tweet-carousel__item {
    flex: 0 0 auto;
    width: min(88%, 340px);
    scroll-snap-align: start;
}
/* Twitter埋め込みのデフォルトmarginを詰めて高さを揃える */
.article-tweet-carousel__item .twitter-tweet {
    margin: 0 !important;
    width: 100% !important;
}

/* ===== マーカー / 注釈 ===== */
.article-marker {
    background: var(--ds-color-badge-bg-cream);
    font-weight: var(--ds-text-h3-weight);
    padding: 0 var(--ds-space-inline-xs);
}
.article-marker--red {
    background: transparent;
    color: var(--ds-color-danger);
    font-weight: var(--ds-text-h3-weight);
    padding: 0;
}
/* セルの中身がマーカーだけの列は「○ 未開封有利」のような短い判定ラベルなので、
   列が細ると「○」だけ孤立して2〜4行に割れる。塊で折り返させる（列幅が足りない分は
   .article-table-wrap の横スクロールで見せる）。本文中の長い強調は :only-child に
   ならないので影響しない。 */
.article-table-wrap td > .article-marker:only-child { white-space: nowrap; }
/* 読者の声・引用したセリフ。色は「強調」ではなく「誰の発話か」のラベルとして使う */
.article-marker--blue {
    background: transparent;
    color: var(--ds-color-link);
    font-weight: var(--ds-text-h3-weight);
    padding: 0;
}
.article-note {
    font-size: var(--ds-text-caption-size);
    color: var(--ds-color-text-subtle);
    margin: 0 0 var(--ds-space-stack-sm);
}

/* ===== テーブル ===== */
/* 外枠は結論（:::point / .article-point）と同じ黒の太枠＋大きめ角丸で、表を本文から独立した
   ブロックとして見せる。枠は table ではなく wrap 側に置く（SPの横スクロール時も枠が動かない）。
   角丸は wrap の overflow で切るので、table 側には持たせない。 */
.article-table-wrap {
    overflow-x: auto;
    border: 4px solid var(--ds-color-bg-inverse);
    border-radius: var(--ds-radius-lg);
    margin: 0 0 var(--ds-space-stack-md);
}
/* 表の直後に続くトグル（「6位〜20位を開く」など）は表の続きなので、外枠をつないで
   ひとつのブロックに見せる。表は下辺と下の角丸を落とし、トグル側が下辺を引き継ぐ。 */
.article-table-wrap:has(+ .article-accordion) {
    border-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    margin-bottom: 0;
}
.article-table-wrap + .article-accordion {
    border: 4px solid var(--ds-color-bg-inverse);
    border-top: 0;
    border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg);
}
/* つないだトグルの中の表は、枠が二重に見えるので外枠を持たせない */
.article-table-wrap + .article-accordion .article-table-wrap {
    border: 0;
    border-radius: 0;
}

/* 縦罫は持たず、行区切りの横罫だけで構成する。行の区切りは余白でも支える。 */
.article-table-wrap table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ds-text-body-sm-size);
}
.article-table-wrap th,
.article-table-wrap td {
    border: 0;
    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
    padding: var(--ds-space-table-cell-y) var(--ds-space-stack-sm);
    text-align: left;
    vertical-align: middle;
}
/* 最終行の横罫は出さない（角丸の内側に線が残って見えるのを防ぐ） */
.article-table-wrap tr:last-child th,
.article-table-wrap tr:last-child td {
    border-bottom: 0;
}
/* 見出し行は白地＋黒文字。本文セルと地色が同じになるので、見出しと1行目の境だけ
   太めの罫線を引いて「ここまでが見出し」を残す（行間の細い横罫との差で区別する）。 */
.article-table-wrap th {
    background: var(--ds-color-bg);
    color: var(--ds-color-text);
    border-bottom: var(--ds-border-width-heading-accent) solid var(--ds-color-border-strong);
    font-weight: var(--ds-text-h3-weight);
    white-space: nowrap;
    text-align: center;
}
/* 「項目」列（本文1列目）が短いラベルで折り返さないよう最小幅を確保＋中央揃え */
.article-table-wrap td:first-child {
    min-width: 7em;
}
.article-table-wrap th:first-child,
.article-table-wrap td:first-child {
    text-align: center;
}
/* 「順位」始まりの表は1列目が数字だけなので、最小幅・左右パディングを詰める */
.article-table--rank th:first-child,
.article-table--rank td:first-child {
    min-width: 0;
    width: 1%;
    padding-inline: var(--ds-space-inline-xs);
    white-space: nowrap;
}
/* 順位の数字は表のインデックスとして真っ先に目で追う要素なので、
   本文より一回り大きく・太くして、カード名や価格から見分けられるようにする。
   等幅数字にしないと 1 と 10 で列幅がぶれる。 */
.article-table--rank td:first-child {
    font-size: 1.25em;
    font-weight: var(--ds-text-h3-weight);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
/* 5列以上の順位表（順位/画像/カード/価格/封入率 など）を SP の画面幅に押し込むと
   カード名が数行に折り返し、サムネイルも潰れて読めなくなる。列幅を確保したうえで
   .article-table-wrap（overflow-x: auto）に横スクロールさせる。
   順位表以外でも「画像」列を持つ5列以上の表（商品比較表など）は同じ扱いにする。
   nth-child による列幅の割り当てだけは「順位｜画像｜名前｜値｜値」前提なので
   .article-table--rank との複合セレクタに限定する。 */
@media (max-width: 639px) {
    /* 表の中の商品画像は、列が細るとセル幅に合わせて 20px 台まで潰れ、何の商品か
       判別できなくなる。表示サイズを固定して、はみ出す分は .article-table-wrap の
       横スクロールで見せる（順位表 .article-table--wide は下で 52px に上書き）。 */
    .article-table-wrap td .article-inline-img {
        width: 96px;
        max-width: none;
        height: auto;
    }
    /* 順位表以外（商品比較表など）は列が多く1セルあたりの文字数も多いので、
       440px では「7,200」「円」のように数値が途中で折り返す。従来値の 560px を使う。 */
    .article-table--wide {
        min-width: 560px;
    }
    .article-table--rank.article-table--wide {
        min-width: 440px;
    }
    /* 横スクロールせずに4列目（価格）まで見せるため、左右の詰めを共通値より狭く */
    .article-table--wide th,
    .article-table--wide td {
        padding-inline: 6px;
    }
    .article-table--wide td .article-inline-img {
        width: 52px;
        max-width: none;
    }
    /* 順位表は「順位｜画像｜名前｜値｜値」の形で固定なので、名前列を最小幅まで詰めて
       価格列に幅を回す（価格が「約60.2／万円」と折り返さない幅を確保する）。
       375px 幅で 順位37+画像65+名前144+価格84=330 となり、画面内に価格まで収まる。 */
    .article-table--rank.article-table--wide th:nth-child(3),
    .article-table--rank.article-table--wide td:nth-child(3) {
        width: 143px;
    }
    .article-table--rank.article-table--wide th:nth-child(4),
    .article-table--rank.article-table--wide td:nth-child(4) {
        width: 84px;
    }
    /* 見出しの nowrap（共通ルール）が列の最小幅を押し上げるので、ここでは折り返す */
    .article-table--wide th {
        white-space: normal;
    }
    /* 横スクロール中も順位が見えるよう1列目を固定。border-collapse では枠線が
       追従しないので box-shadow で代用（早見表マトリクスと同じ手法）。 */
    .article-table--wide th:first-child,
    .article-table--wide td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: 1px 0 0 var(--ds-color-border);
    }
    .article-table--wide td:first-child {
        background: var(--ds-color-bg);
    }

    /* 順位表（順位｜画像｜価格｜カード名）を SP の画面幅に収める。横スクロールは
       .article-table-wrap に残したうえで、カード画像と買取価格が同時に見えない
       状態にならないよう各列を詰める。
       - 見出しの nowrap（共通ルール）が「買取予想レンジ」の分だけ列幅を押し上げるので折り返す
       - 括弧グループ（型番・商品名）は本文より1段小さくして幅を稼ぐ
       - カード画像は行の高さを決めるので、幅を決め打ちして列がぶれないようにする */
    .article-table--rank th {
        white-space: normal;
    }
    .article-table--rank th:nth-child(2),
    .article-table--rank td:nth-child(2) {
        width: 68px;
        min-width: 68px;
    }
    .article-table--rank td:nth-child(2) .article-inline-img {
        width: 60px;
        max-width: none;
    }
    .article-table--rank .article-table__sub {
        font-size: 0.82em;
    }
}
/* {nowrap} 指定の表：セル内で折り返さず、はみ出す分は .article-table-wrap の
   横スクロール（スワイプ）で見せる。「9月15日(火)23:59」のような短い値が
   途中で折り返して読みにくくなる表に使う。 */
.article-table--nowrap th,
.article-table--nowrap td {
    white-space: nowrap;
}

/* 「7,200円」「30,000〜40,000円」のように数値と単位だけのセルは、
   「7,200」と「円」が別の行に割れると読めないので折り返さない。
   どのセルが該当するかは Markdown.php の isNumericCell() が判定する。 */
.article-table-wrap td.article-table__num {
    white-space: nowrap;
}

/* 表のセルの「カード名(レアリティ・型番)」を、名前と括弧グループで別の行に分ける。
   名前は途中で折り返さず（「ミュウツ／ー／ex」を防ぐ）、括弧だけを次の行に落とす。
   はみ出す分は .article-table-wrap の横スクロール（スワイプ）で見せる。 */
/* 本文側で [br] を入れて明示的に行を割ったセル（1列目の商品名など）は、その行の中では
   折り返さない。auto レイアウトの表は1セルの max-content が縮むと列幅の取り分も減るので、
   放っておくと「拡張パック／BOX／(シュリンクな／し)」のように割った行がさらに割れる。
   nowrap は <br> の改行は止めないので、指定した位置だけで折れる。
   2列目以降の [br]（会社概要の連絡先など）は長いので対象にしない。 */
.article-table-wrap td:first-child:has(br) {
    white-space: nowrap;
}

.article-table__name {
    white-space: nowrap;
}
.article-table__sub {
    display: block;
    white-space: nowrap;
}

/* キーバリュー表（項目/内容）は縦ヘッダー：1列目の見出しセルの幅を確保 */
/* KV表は見出しが「行」ではなく「列」（左端）にある。通常表の見出し行（白地＋下罫線）を
   そのまま縦に使うと値の列と見分けが付かないので、淡いグレー地の見出し列にする。 */
.article-table--kv th {
    width: 30%;
    min-width: 8em;
    background: var(--ds-color-table-kv-head-bg);
    color: var(--ds-color-table-kv-head-text);
    /* ラベルが長いと nowrap では列幅を押し広げてしまうので折り返す */
    white-space: normal;
}

/* 吹き出し（:::say）は「左アバター+しっぽ吹き出し」として blog-parts.css で定義 */

/* ===== 掲載企業向け CTA ===== */
.article-relations {
    max-width: var(--ds-container-article);
    margin: var(--ds-space-stack-lg) auto 0;
    padding: var(--ds-space-stack-md);
    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    background: var(--ds-color-bg-paper);
}
.article-relations__title {
    font-size: var(--ds-text-h3-size);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
    margin: 0 0 var(--ds-space-stack-sm);
}
.article-relations__lead {
    font-size: var(--ds-text-body-sm-size);
    line-height: var(--ds-text-body-sm-lh);
    color: var(--ds-color-text-muted);
    margin: 0 0 var(--ds-space-stack-sm);
}
.article-relations__url {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-inline-sm);
    margin-bottom: var(--ds-space-stack-sm);
}
.article-relations__url-label {
    font-size: var(--ds-text-micro-size);
    color: var(--ds-color-text-subtle);
}
.article-relations__url-value {
    font-size: var(--ds-text-body-sm-size);
    background: var(--ds-color-bg-subtle);
    border-radius: var(--ds-radius-input);
    padding: var(--ds-space-inline-xs) var(--ds-space-inline-md);
    word-break: break-all;
}
.article-relations__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-inline-md);
    margin-bottom: var(--ds-space-stack-sm);
}
.article-relations__btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--ds-touch-target-min);
    padding: var(--ds-space-stack-xs) var(--ds-space-stack-md);
    border: var(--ds-border-width) solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-button);
    color: var(--ds-color-text);
    text-decoration: none;
    font-size: var(--ds-text-body-sm-size);
}
.article-relations__btn--primary {
    background: var(--ds-color-bg-inverse);
    color: var(--ds-color-text-inverse);
    border-color: var(--ds-color-bg-inverse);
}
.article-relations__note {
    font-size: var(--ds-text-micro-size);
    color: var(--ds-color-text-subtle);
    margin: 0;
}

/* ===== お問い合わせ窓口（記事下部・全媒体共通）===== */
.article-inquiry {
    max-width: var(--ds-container-article);
    margin: var(--ds-space-stack-lg) auto 0;
    padding: var(--ds-space-stack-md);
    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    background: var(--ds-color-bg-subtle);
}
.article-inquiry__title {
    font-size: var(--ds-text-h3-size);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
    margin: 0 0 var(--ds-space-stack-sm);
}
.article-inquiry__lead {
    font-size: var(--ds-text-body-sm-size);
    line-height: var(--ds-text-body-lh);
    color: var(--ds-color-text-muted);
    margin: 0 0 var(--ds-space-stack-md);
}
.article-inquiry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-inline-sm);
}
.article-inquiry__btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--ds-touch-target-min);
    padding: var(--ds-space-stack-sm) var(--ds-space-stack-lg);
    border-radius: var(--ds-radius-button);
    font-size: var(--ds-text-body-sm-size);
    font-weight: var(--ds-text-h3-weight);
    text-decoration: none;
    border: var(--ds-border-width) solid var(--ds-color-border-strong);
    background: var(--ds-color-bg-paper);
    color: var(--ds-color-text);
}
.article-inquiry__btn--primary {
    background: var(--ds-color-bg-inverse);
    color: var(--ds-color-text-inverse);
    border-color: var(--ds-color-bg-inverse);
}

/* ===== 記事末尾: SNSシェア（この記事にコメントする） ===== */
.article-share {
    max-width: var(--ds-container-article);
    margin: var(--ds-space-stack-lg) auto 0;
    padding: var(--ds-space-stack-md);
    background: var(--ds-color-bg-subtle);
    border-radius: var(--ds-radius-card);
    text-align: center;
}
.article-share__lead {
    margin: 0;
    font-size: var(--ds-text-h3-size);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
}
.article-share__sub {
    margin: var(--ds-space-stack-xs) 0 0;
    font-size: var(--ds-text-caption-size);
    color: var(--ds-color-text-muted);
}
.article-share__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-space-stack-sm);
    margin-top: var(--ds-space-stack-sm);
}
.article-share__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-stack-xs);
    padding: 10px 20px;
    border-radius: var(--ds-radius-chip);
    font-size: var(--ds-text-caption-size);
    font-weight: 700;
    color: var(--ds-color-text-inverse);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.article-share__btn:hover { opacity: 0.85; }
.article-share__btn--x        { background: var(--ds-color-sns-x); }
.article-share__btn--line     { background: var(--ds-color-sns-line); }
.article-share__btn--facebook { background: var(--ds-color-sns-facebook); }
@media (max-width: 640px) {
    .article-share__buttons { flex-direction: column; align-items: stretch; }
    .article-share__btn { justify-content: center; }
}

/* ===== 関連記事 ===== */
.media-related {
    max-width: var(--ds-container-article);
    margin: var(--ds-space-stack-lg) auto 0;
}
.media-related__title {
    font-size: var(--ds-text-h3-size);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
    margin: 0 0 var(--ds-space-stack-md);
    padding-bottom: var(--ds-space-stack-xs);
    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
}

/* 記事個別ページのカバー画像（cover_image があれば本文上部に表示） */
.media-article__cover {
    margin: 0 0 var(--ds-space-stack-lg);
    aspect-ratio: 16 / 9;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    border: var(--ds-border-width) solid var(--ds-color-border);
}
/* タイトルと監修（byline）の間に置くアイキャッチ（frontmatter cover_in_header: true） */
.media-article__cover--in-header {
    margin: var(--ds-space-stack-md) 0;
}
.media-article__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* SEO記事のアイキャッチ: 画面上は非表示にしつつ DOM には残す（OG/構造化データ・クロール用） */
.media-article__cover--seo-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* 監修者プロフィール（コンパクト・詳細は構造化データへ分離） */
.article-supervisor {
    max-width: var(--ds-container-article);
    margin: var(--ds-space-stack-lg) auto;
    padding: var(--ds-space-stack-lg);
    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-color-bg-elevated);
    box-shadow: var(--ds-shadow-popover);
}
.article-supervisor__head {
    display: flex;
    align-items: center;
    gap: var(--ds-space-inline-md);
}
.article-supervisor__photo {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: var(--ds-radius-avatar);
    object-fit: cover;
}
/* 顔写真がプロフィールページへのリンクのとき（中の <img> で枠を埋める） */
a.article-supervisor__photo { display: block; overflow: hidden; }
a.article-supervisor__photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-supervisor__id { min-width: 0; }
.article-supervisor__kicker {
    display: inline-block;
    font-size: var(--ds-text-caption-size);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-state-positive-text);
}
.article-supervisor__name {
    margin: var(--ds-space-inline-xs) 0 0;
    font-size: var(--ds-text-h3-size);
    font-weight: var(--ds-text-h3-weight);
    line-height: var(--ds-text-h3-lh);
    color: var(--ds-color-text);
}
.article-supervisor__meta {
    margin: var(--ds-space-inline-xs) 0 0;
    font-size: var(--ds-text-body-sm-size);
    color: var(--ds-color-text-subtle);
}
.article-supervisor__org-link {
    color: var(--ds-color-text-link);
    text-decoration: underline;
}
.article-supervisor__spec {
    margin: var(--ds-space-inline-xs) 0 0;
    font-size: var(--ds-text-body-sm-size);
    color: var(--ds-color-text-subtle);
}
.article-supervisor__bio {
    margin: var(--ds-space-stack-sm) 0 0;
    font-size: var(--ds-text-body-sm-size);
    line-height: var(--ds-text-body-lh);
    color: var(--ds-color-text);
}
/* 経歴の続き（長い bio を先頭1文＋トグルに畳む）。開閉アニメは :::accordion と同方式。
   開閉ボタンは先頭文の直後にインラインで置くため、先頭文ごと summary に入れている。 */
.article-supervisor__more {
    margin: var(--ds-space-stack-sm) 0 0;
}
.article-supervisor__more-summary {
    list-style: none;
    cursor: pointer;
}
.article-supervisor__more-summary::-webkit-details-marker { display: none; }
.article-supervisor__more-summary .article-supervisor__bio { margin: 0; }
/* 先頭文の「すぐ右」に出る小さめのアウトラインボタン。行末で折り返しても崩れないよう inline-flex */
.article-supervisor__more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-inline-xs);
    margin-left: var(--ds-space-inline-xs);
    padding: var(--ds-space-inline-xs) var(--ds-space-inline-sm);
    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-chip);
    font-size: var(--ds-text-caption-size);
    line-height: 1;
    color: var(--ds-color-text-subtle);
    white-space: nowrap;
    vertical-align: baseline;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.article-supervisor__more-summary:hover .article-supervisor__more-btn {
    border-color: var(--ds-color-border-strong);
    color: var(--ds-color-text);
}
/* 開いたらボタンごと消す。続きが既に見えている状態でコントロールを文中に残すと、
   経歴が途中で分断されて読みづらいため。畳み直す導線は用意しない（続きは
   2文程度で、閉じ直す動機がないため）。 */
.article-supervisor__more[open] .article-supervisor__more-btn { display: none; }
/* フォーカスリングは summary 全体ではなく開閉ボタンだけに出す。
   summary は先頭文を丸ごと含む数行のブロックなので、そこに outline を掛けると
   展開後の続き（.article-supervisor__bio--rest）の1行目に枠が重なって読めなくなる。 */
.article-supervisor__more-summary:focus-visible { outline: none; }
.article-supervisor__more-summary:focus-visible .article-supervisor__more-btn {
    outline: var(--ds-border-width-divider) solid var(--ds-color-text);
    outline-offset: var(--ds-border-width);
}
.article-supervisor__chev {
    flex: none;
    transition: transform 0.2s ease;
}
.article-supervisor__more[open] .article-supervisor__chev { transform: rotate(180deg); }
/* 開いた時点で開閉ボタンは消えるので、続きは先頭文の次の行としてそのまま読ませる。
   段落間の余白を入れると1つの経歴が2段落に割れて見えるため 0 にしている。 */
.article-supervisor__bio--rest {
    margin-top: 0;
}
/* 監修者名から詳細プロフィールへのリンク。下線は hover 時のみで氏名の見出しらしさを保つ。
   セレクタを2クラスにしているのは .article__body a（黒文字+下線）の詳細度に勝たせるため */
.article-supervisor .article-supervisor__name-link {
    color: inherit;
    text-decoration: none;
}
.article-supervisor .article-supervisor__name-link:hover,
.article-supervisor .article-supervisor__name-link:focus-visible { text-decoration: underline; }
@supports (interpolate-size: allow-keywords) {
    .article-supervisor__more { interpolate-size: allow-keywords; }
    .article-supervisor__more::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
    }
    .article-supervisor__more[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .article-supervisor__chev { transition: none; }
    .article-supervisor__more::details-content { transition: none; }
}

.article-supervisor__links {
    margin: var(--ds-space-stack-sm) 0 0;
}
.article-supervisor__links a {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-inline-xs);
    font-size: var(--ds-text-body-sm-size);
    color: var(--ds-color-text);
    text-decoration: underline;
}

/* 監修者一覧ページ（/media/kanshu/）: 既存の article-supervisor カードを縦に並べる */
.media-supervisors {
    max-width: var(--ds-container-article);
    margin: 0 auto;
}
.media-supervisors .article-supervisor {
    margin-top: var(--ds-space-stack-lg);
    margin-bottom: var(--ds-space-stack-lg);
}
.article-supervisor__photo--mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-color-border);
    color: var(--ds-color-text);
    font-size: var(--ds-text-h3-size);
    font-weight: var(--ds-text-h3-weight);
    line-height: 1;
}
/* 活動写真ギャラリー（〜639px = SP）: 横スクロールのカルーセル。
   SP は1列しか並ばず縦積みだと枚数分ページが伸びて本文が分断されるため、1行に固定して横に流す。
   スナップ＋次カットの見切れで「横に続く」ことを示す（JS なし・スワイプ/キーボードで操作可）。
   PC（640px〜）は横幅に複数枚並ぶので、下の @media で従来の折返しグリッドに戻す */
.article-supervisor__gallery {
    display: flex;
    gap: var(--ds-space-inline-xs);
    margin-top: var(--ds-space-stack-sm);
    padding-bottom: var(--ds-space-inline-xs);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.article-supervisor__gallery-photo {
    flex: 0 0 auto;
    width: min(240px, 72%);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ds-radius-card);
    scroll-snap-align: start;
}
/* PC は一覧性優先で折返しグリッド（スクロール操作なしで全枚数が見える） */
@media (min-width: 640px) {
    .article-supervisor__gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        padding-bottom: 0;
        overflow-x: visible;
        overscroll-behavior-x: auto;
        scroll-snap-type: none;
    }
    .article-supervisor__gallery-photo {
        width: 100%;
        scroll-snap-align: none;
    }
}
/* プロフィールページへの導線。テキストリンクだと見落とされるためアウトラインボタンに */
.article-supervisor__profile-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-inline-xs);
    min-height: var(--ds-touch-target-min);
    margin-top: var(--ds-space-stack-sm);
    padding: var(--ds-space-stack-xs) var(--ds-space-stack-md);
    border: var(--ds-border-width) solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-button);
    color: var(--ds-color-text);
    font-size: var(--ds-text-body-size);
    text-decoration: none;
}
.article-supervisor__profile-btn-arrow {
    line-height: 1;
}
.article-supervisor__links-label {
    margin-right: var(--ds-space-inline-xs);
    font-size: var(--ds-text-body-sm-size);
    color: var(--ds-color-text-subtle);
}
/* 監修記事は1行1本の縦積み。中黒区切りだと折返し時に「・」だけが行頭に残るため使わない */
.article-supervisor__articles {
    margin: 0;
    padding: 0;
    list-style: none;
}
.article-supervisor__articles > li + li {
    margin-top: var(--ds-space-inline-xs);
}

/* ===== 本文既定の打ち消し（blog-parts.css と同方針） =====
   監修者カードの氏名・所属・専門・経歴はすべて <p> なので、.article__body p
   （詳細度 0-1-1／PC 24px・SP 48px の margin-bottom）がカード内部にも効いて
   1項目ごとに1.5行分の空きができ、カードだけで1画面近く縦に伸びる。
   .article__body を前置した高詳細度で打ち消し、間隔は各要素の margin-top に戻す。 */
.article__body .article-supervisor p { margin-bottom: 0; }

/* ===== 監修者ブロックの SP レイアウト（〜639px） =====
   PC と同じ「写真｜肩書・氏名・所属・専門」の2カラムを SP でそのまま出すと、
   右のテキスト列が 180px 前後まで細って所属も専門も2〜3行ずつ折り返し、
   写真の上下に死んだ余白が縦に伸びる（導入文と目次の間で1画面近く占有する）。
   SP では写真の横に置くのを肩書＋氏名だけに絞り、所属・専門はカード幅いっぱいの
   行に落として、折り返しと縦の伸びを同時に止める。 */
@media (max-width: 639px) {
    .article-supervisor {
        margin: var(--ds-space-stack-md) auto;
        padding: var(--ds-space-stack-md);
    }
    .article-supervisor__head {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "photo kicker"
            "photo name"
            "meta  meta"
            "spec  spec";
        column-gap: var(--ds-space-inline-sm);
        align-items: start;
    }
    /* __id は箱としては消して、中の4要素を __head の grid に直接並べる */
    .article-supervisor__id { display: contents; }
    /* 写真が無い記事（supervisor_image 未設定）では左カラムを作らない */
    .article-supervisor__head:not(:has(.article-supervisor__photo)) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "kicker" "name" "meta" "spec";
    }
    .article-supervisor__photo {
        grid-area: photo;
        align-self: center;
        width: 56px;
        height: 56px;
    }
    .article-supervisor__kicker { grid-area: kicker; align-self: end; }
    .article-supervisor__name   { grid-area: name; margin-top: 2px; }
    .article-supervisor__meta   { grid-area: meta; margin-top: var(--ds-space-inline-xs); }
    .article-supervisor__spec   { grid-area: spec; margin-top: 2px; }
    .article-supervisor__bio    { margin-top: var(--ds-space-stack-xs); }
}

/* ===== SP フォントサイズ上書き — /media/ 配下のみ (〜639px) ===== */
@media (max-width: 639px) {
    .media-article {
        --ds-text-h1-size:   var(--fs-24);
        --ds-text-h2-size:   var(--fs-21);
        --ds-text-h3-size:   var(--fs-19);
        --ds-text-body-size: var(--fs-17);
    }
}

/* ── オーバーレイ・ヒーロー（hero_style: overlay・2026-07-07） ──
   画像全面 + 下部グラデ + 白抜きタイトル。グラデはこのページ唯一の使用（可読性スクリム） */
.article__hero-overlay {
    position: relative;
    margin: 0 0 var(--ds-space-stack-md);
    border-radius: var(--ds-radius-card);
    overflow: hidden;
    background: var(--ds-color-bg-inverse);
}
.article__hero-overlay-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.article__hero-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 15, 15, 0) 55%, rgba(15, 15, 15, 0.45) 100%);
}
.article__hero-overlay-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 16px 24px 14px;
    /* 画像内の白文字と衝突しないよう、すりガラスの帯でタイトルの可読性を担保 */
    background: rgba(15, 15, 15, 0.66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.media-article .article__hero-overlay .article__title--onimage {
    color: var(--ds-color-text-inverse);
    font-size: clamp(17px, 2.4vw, 25px);
    line-height: 1.5;
    margin: 0 0 8px;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(15, 15, 15, 0.4);
}
.media-article .article__hero-overlay .article__byline--onimage,
.media-article .article__hero-overlay .article__byline--onimage strong,
.media-article .article__hero-overlay .article__byline--onimage a {
    color: var(--ds-color-text-inverse);
}
.media-article .article__hero-overlay .article__byline--onimage {
    opacity: 0.88;
}
@media (max-width: 600px) {
    /* SPは帯が画像を覆いすぎるため、画像の下にタイトル帯を積むレイアウトに切替 */
    .article__hero-overlay::after { content: none; }
    .article__hero-overlay-body {
        position: static;
        padding: 12px 14px 12px;
        background: var(--ds-color-bg-inverse);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .media-article .article__hero-overlay .article__title--onimage { font-size: 17px; margin-bottom: 6px; }
    .media-article .article__hero-overlay .article__byline--onimage { font-size: 11px; }
}

/* =====================================================================
   記事別スコープ: /media/moriya-kazumasa/（森谷和正インタビュー）
   スマホでの可読性向上のための、この記事だけの上書き（body.media-slug-moriya-kazumasa）
   ===================================================================== */
@media (max-width: 639px) {
    /* --- ① 吹き出しを r25 風に: アバター+氏名を上のヘッダー行に置き、吹き出しを全幅に --- */
    /* 吹き出しのSPレイアウトは blog-parts.css の全記事共通ルールに統合済み */

    /* --- ② 連続画像（.article-samples）を横スクロールのカルーセルに --- */
    .media-slug-moriya-kazumasa .article-samples {
        display: flex;
        grid-template-columns: none;
        gap: var(--ds-space-inline-sm);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: 0;
        /* スクロールバーは細く目立たせない */
        scrollbar-width: thin;
    }
    .media-slug-moriya-kazumasa .article-samples img {
        flex: 0 0 86%;
        width: 86%;
        max-height: none;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        scroll-snap-align: center;
    }

    /* --- ③ 監修者（お話を伺った方）ブロックの余白を詰める --- */
    .media-slug-moriya-kazumasa .article-supervisor {
        margin: var(--ds-space-stack-md) auto;
        padding: var(--ds-space-stack-md);
    }
    .media-slug-moriya-kazumasa .article-supervisor__name { margin-top: 2px; }
    .media-slug-moriya-kazumasa .article-supervisor__meta,
    .media-slug-moriya-kazumasa .article-supervisor__spec { margin-top: 2px; }
    .media-slug-moriya-kazumasa .article-supervisor__bio { margin-top: var(--ds-space-stack-xs); }
}

/* ===== /oripa/ 記事下部のハブ導線（柱ページへの内部リンク）
   ---------------------------------------------------------------- */
.oripa-hub-links {
  margin-top: var(--ds-space-stack-lg);
  padding: var(--ds-space-stack-md);
  background: var(--ds-color-bg-subtle);
  border-radius: var(--ds-radius-card);
}
.oripa-hub-links__title {
  margin: 0 0 var(--ds-space-stack-sm);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-lh);
  font-weight: 700;
  color: var(--ds-color-text);
}
.oripa-hub-links__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-inline-xs);
  margin: 0;
  padding: 0;
}
.oripa-hub-links__list a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--ds-radius-chip);
  background: var(--ds-color-bg);
  border: var(--ds-border-width) solid var(--ds-color-border);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-lh);
  color: var(--ds-color-text);
  text-decoration: none;
}
.oripa-hub-links__list a:hover {
  border-color: var(--ds-color-border-strong);
  color: var(--ds-color-text-link);
}
/* ===== /ハブ導線 end ===== */