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

/* ============================================================
 * 一覧（メディアトップ）— 新R25風 二段組 Pickup レイアウト
 * 左: 大カード2枚 / 右: コンパクト縦リスト。
 * モノクロ基調。ホロ・グラデーションは特集アイキャッチ1箇所のみ
 * （ページ内で唯一）。和文見出し 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-list__cat,
.media-meta,
.media-byline,
.media-pitch__kicker {
    font-family: "Space Grotesk", "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ===== 二段組 ===== */
.media-cols {
    display: grid; grid-template-columns: 1fr;
    gap: var(--ds-space-stack-xl);
    margin-bottom: var(--ds-space-stack-xl);
}
@media (min-width: 1024px) {
    .media-cols { grid-template-columns: 2fr 1fr; gap: var(--ds-space-stack-lg); align-items: start; }
}

/* ===== 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-bigcards {
    display: grid; grid-template-columns: 1fr; gap: var(--ds-space-stack-lg);
}
@media (min-width: 560px) {
    .media-bigcards { grid-template-columns: 1fr 1fr; }
}
/* 記事一覧サンプル(デモ)グリッド */
.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,
.media-list__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-cover--sm {
    flex: 0 0 38%;
    padding: var(--ds-space-stack-sm);
    border-radius: var(--ds-radius-card);
    margin-bottom: 0;
}
.media-cover--sm .media-cover__catch {
    font-size: var(--ds-text-caption-size);
    line-height: var(--ds-text-caption-lh);
}
.media-cover--sm .media-cover__stamp { display: none; }
.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-bigcards .media-card__title { font-size: var(--ds-text-h2-size); }
/* 記事一覧グリッドのタイトルは小さめ（R25 の一覧カード相当）*/
.media-samples__grid .media-card__title { font-size: var(--ds-text-body-size); }

/* ===== 右: コンパクト縦リスト ===== */
.media-list { list-style: none; margin: 0; padding: 0; }
.media-list__item { border-top: var(--ds-border-width) solid var(--ds-color-border); }
.media-list__item:first-child { border-top: none; }
.media-list__link {
    display: flex; gap: var(--ds-space-stack-sm);
    align-items: flex-start; /* サムネを縦伸びさせない(16:9維持) */
    padding: var(--ds-space-stack-md) 0;
    text-decoration: none; color: inherit;
}
/* 右リストのサムネは .media-cover--sm を使用 */
.media-list__body { min-width: 0; align-self: center; }
.media-list__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-inline-xs);
}
.media-list__title {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: var(--ds-text-body-size);
    line-height: var(--ds-text-h3-lh);
    font-weight: var(--ds-text-h2-weight);
    color: var(--ds-color-text);
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

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

/* ===== 記事: ラッパ ===== */
.media-article {
    max-width: var(--ds-container-article);
    margin: 0 auto;
}

/* ===== 記事: ヘッダー ===== */
.media-article .article__header {
    padding-bottom: var(--ds-space-stack-md);
    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
    margin-bottom: var(--ds-space-stack-lg);
}
.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-h1-size);
    line-height: var(--ds-text-h1-lh);
    font-weight: var(--ds-text-h1-weight);
    color: var(--ds-color-text);
    margin: 0 0 var(--ds-space-stack-sm);
}
.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__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: var(--ds-text-body-lh);
    color: var(--ds-color-text);
}
.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-lg) 0 var(--ds-space-stack-sm);
    padding-bottom: var(--ds-space-stack-xs);
    border-bottom: var(--ds-border-width-divider) solid var(--ds-color-text);
}
.article__body > h3 {
    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);
    border-left: var(--ds-border-width-divider) solid var(--ds-color-border-strong);
}
.article__body p { margin: 0 0 var(--ds-space-stack-sm); }
.article__body a {
    color: var(--ds-color-text-link);
    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;
}
.article__body blockquote {
    margin: 0 0 var(--ds-space-stack-sm);
    padding: var(--ds-space-stack-sm) var(--ds-space-stack-md);
    border-left: var(--ds-border-width-divider) solid var(--ds-color-border-strong);
    background: var(--ds-color-bg-paper);
    color: var(--ds-color-text-muted);
}

/* ===== 目次 ===== */
.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; }
.article-toc__num {
    flex: none;
    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);
}
.article-toc__more-btn {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: var(--ds-touch-target-min);
    margin: var(--ds-space-stack-sm) auto 0;
    padding: var(--ds-space-stack-xs) var(--ds-space-stack-lg);
    border: var(--ds-border-width) solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-chip);
    font-size: var(--ds-text-body-sm-size);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
}
.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: var(--ds-border-width) solid var(--ds-color-border);
    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 {
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
    margin-bottom: var(--ds-space-stack-xs);
}
.article-box__body > :last-child { margin-bottom: 0; }
.article-box--memo {
    background: var(--ds-color-state-info-bg);
    border-color: var(--ds-color-state-info-border);
}
.article-box--alert {
    background: var(--ds-color-state-warning-bg);
    border-color: var(--ds-color-state-warning-border);
}

/* ===== メリデメ比較 ===== */
.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; }
}
.article-proscons__col {
    border: var(--ds-border-width) solid var(--ds-color-border);
    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);
    border-color: var(--ds-color-state-positive-border);
}
.article-proscons__col--cons {
    background: var(--ds-color-state-danger-bg);
    border-color: var(--ds-color-state-danger-border);
}
.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); }
.article-proscons__col li { margin-bottom: var(--ds-space-stack-xs); }

/* ===== FAQ アコーディオン ===== */
.article-faq {
    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    margin: 0 0 var(--ds-space-stack-sm);
    background: var(--ds-color-bg-elevated);
}
.article-faq__question {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-inline-sm);
    padding: var(--ds-space-stack-sm) var(--ds-space-stack-md);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
}
.article-faq__question::-webkit-details-marker { display: none; }
.article-faq__q {
    flex: none;
    color: var(--ds-color-text-inverse);
    background: var(--ds-color-bg-inverse);
    border-radius: var(--ds-radius-chip);
    width: var(--ds-touch-target-min);
    min-width: var(--ds-touch-target-min);
    text-align: center;
    font-size: var(--ds-text-body-sm-size);
}
.article-faq__answer {
    padding: 0 var(--ds-space-stack-md) var(--ds-space-stack-sm);
    color: var(--ds-color-text-muted);
}
.article-faq__answer > :last-child { margin-bottom: 0; }

/* ===== CTA ボタン ===== */
.article-btn-wrap {
    text-align: center;
    margin: var(--ds-space-stack-md) 0;
}
.article-btn {
    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);
}
/* .article__body a（黒文字+下線）の詳細度に勝たせる。黒地に黒文字で潰れるのを防ぐ */
.article__body a.article-btn {
    color: var(--ds-color-text-inverse);
    text-decoration: none;
}

/* ===== サンプル画像 / 図版 ===== */
.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: 100%;
    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); }
.article-inline-img { border-radius: var(--ds-radius-card); }

/* ===== マーカー / 注釈 ===== */
.article-marker {
    background: var(--ds-color-badge-bg-cream);
    padding: 0 var(--ds-space-inline-xs);
}
.article-marker--red {
    background: var(--ds-color-state-danger-bg);
    color: var(--ds-color-state-danger-text);
}
.article-note {
    font-size: var(--ds-text-caption-size);
    color: var(--ds-color-text-subtle);
    margin: 0 0 var(--ds-space-stack-sm);
}

/* ===== テーブル ===== */
.article-table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--ds-space-stack-md);
}
.article-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-text-body-sm-size);
}
.article-table-wrap th,
.article-table-wrap td {
    border: var(--ds-border-width) solid var(--ds-color-border);
    padding: var(--ds-space-stack-xs) var(--ds-space-stack-sm);
    text-align: left;
    vertical-align: top;
}
.article-table-wrap th {
    background: var(--ds-color-bg-paper);
    font-weight: var(--ds-text-h3-weight);
    white-space: nowrap;
}

/* ===== 吹き出し（監修者コメント） ===== */
.article-say {
    margin: 0 0 var(--ds-space-stack-md);
}
.article-say__head {
    display: flex;
    align-items: center;
    gap: var(--ds-space-inline-sm);
    margin-bottom: var(--ds-space-stack-xs);
}
.article-say__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-avatar);
    object-fit: cover;
}
.article-say__who {
    display: flex;
    flex-direction: column;
    line-height: var(--ds-text-body-sm-lh);
}
.article-say__role {
    font-size: var(--ds-text-body-sm-size);
    color: var(--ds-color-text-subtle);
}
.article-say__person {
    font-size: var(--ds-text-body-size);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
}
.article-say__name {
    display: flex;
    align-items: center;
    gap: var(--ds-space-inline-sm);
    margin: 0 0 var(--ds-space-stack-xs);
    font-size: var(--ds-text-body-sm-size);
    font-weight: var(--ds-text-h3-weight);
    color: var(--ds-color-text);
}
.article-say__bubble {
    background: var(--ds-color-bg-subtle);
    border-radius: var(--ds-radius-card);
    padding: var(--ds-space-stack-md);
}
.article-say__bubble > :last-child { margin-bottom: 0; }

/* ===== 掲載企業向け 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);
}

/* ===== 関連記事 ===== */
.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);
}
.media-article__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 監修者プロフィール（コンパクト・詳細は構造化データへ分離） */
.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;
}
.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);
}
.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;
}
.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);
}