/* 測る省エネ（メディア側）の CSS。drafts/homepage-v2/column/column.css を土台にしたもの（メディア側のサイトだけで読む）
   - base.css（トークン・土台・部品・ヘッダー・フッターの骨組み・.de-sr・.de-pager・.de-prose）→ このファイルの順に読む
   - WP: base.css と同じ定義（.de-sr・.de-pager・.de-prose の基本）は、モックアップの column.css から外して base.css にまとめた
   - WP: ブロックエディターで書いた本文（.de-prose の中の表ブロック・画像ブロック・グループ）を、モックアップの部品と同じ見た目にする（7 章）
   - WP: 404（10 章）はモックアップにないので新規
   目次: 1 補助 / 2 ヘッダー / 3 誘導カード / 4 メディアのトップ・一覧 / 5 サイドバー / 6 記事ページ（見出し・本文）
         7 記事の本文の部品（目次・表・図・囲み・誘導） / 8 記事の末尾 / 9 フッター / 10 404 */

/* ==== 1 補助 ==== */
.de-layout { display: grid; gap: 48px; padding-block: 32px 64px; }
@media (min-width: 768px) { .de-layout { padding-block: 48px 80px; } }

/* ==== 2 ヘッダー ==== */
/* 塗りの主ボタンは誘導カード（各ページに必ずある）に一本化する。ヘッダーのボタンは全ページで線にする。
   style.css の .de-home と同じ見た目。WordPress では body.de-column（メディア側のサイトだけ）に読み替える */
.de-column .de-header__cta { background: var(--paper); border-color: var(--blue); color: var(--blue); }
.de-column .de-header__cta:hover { background: var(--blue-soft); }
.de-column .de-header__cta:active { background: #d3def0; }

/* 左: ロゴ（トップの新着欄と同じ文字組み＋定規の目盛り）と、小さく「運営：DesignEng」。
   スマホは縦に積み（主ボタンとメニューボタンを1行に収めるため）、768px 以上は横に並べる */
.de-brand { order: 0; margin-right: auto; display: flex; flex-direction: column; align-items: flex-start; padding-block: 8px; }
.de-brand__logo { text-decoration: none; }
.de-brand__logo:hover { text-decoration: none; }
.de-brand .de-media__name { font-size: 20px; }
.de-brand .de-media__scale { height: 8px; max-width: none; }
.de-brand__operator { padding-block: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
@media (max-width: 389px) {
  .de-brand .de-media__name { font-size: 18px; }
}
@media (max-width: 359px) {
  .de-brand .de-media__name { font-size: 16px; }
  .de-brand__operator { font-size: 14px; }
}
@media (min-width: 768px) {
  .de-brand { flex-direction: row; align-items: baseline; gap: 16px; }
}
@media (min-width: 1120px) {
  .de-brand { margin-right: 0; }
  .de-brand .de-media__name { font-size: 24px; }
  .de-brand .de-media__scale { height: 10px; }
}

/* ==== 3 誘導カード（メディアの全ページで使う共通部品。サイドバーにも記事の末尾にも同じものを置く） ==== */
.de-guide {
  display: grid; gap: 12px; justify-items: start;
  padding: 24px; background: var(--blue-soft); border: 1px solid var(--rule-strong); border-radius: 4px;
}
.de-guide__title { font-size: 20px; line-height: 1.5; }
.de-guide__text { margin: 0; }
.de-guide .de-btn { width: 100%; margin-top: 4px; }

/* ==== 4 メディアのトップ（index.html） ==== */
.de-intro { padding-block: 24px; background: var(--tint); border-bottom: 1px solid var(--rule); }   /* 低く抑える */
.de-intro__title { font-size: 28px; line-height: 1.4; }
.de-intro__lead { margin-top: 8px; max-width: 40em; }
@media (min-width: 768px) {
  .de-intro__title { font-size: 36px; }
  .de-intro__lead { max-width: 52em; font-size: 18px; }   /* 短い説明文なので、2行に収まる幅にして高さを抑える */
}
@media (min-width: 1024px) { .de-intro__title { font-size: 40px; } }

/* 記事一覧: サムネイルなし。.de-card（style.css）を読み物向けに大きくした版 */
.de-layout--index { align-items: start; }
.de-postlist__head { margin-bottom: 24px; }
.de-postlist { display: grid; gap: 16px; }
.de-card--post { gap: 8px; padding: 20px 24px 24px; }
.de-card--post:hover { background: var(--tint); }
.de-card--post .de-card__title { font-size: 18px; line-height: 1.5; }
.de-card__excerpt { margin: 0; }
@media (min-width: 768px) { .de-card--post .de-card__title { font-size: 20px; } }

/* WP: カテゴリーなどの一覧は、ページ見出し（パンくず・名前・説明）の直下に一覧が続く。見出しの下の余白と重ねない */
.de-pagehead + .de-layout { padding-top: 0; }

/* ==== 5 サイドバー ==== */
.de-sidebar { display: grid; gap: 32px; align-content: start; }
.de-side__title { padding-bottom: 8px; font-size: 18px; line-height: 1.5; border-bottom: 1px solid var(--rule-strong); }
.de-catlist li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; border-bottom: 1px solid var(--rule); }
.de-catlist a { display: inline-block; padding-block: 8px; }
.de-catlist__count { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.de-catlist a[aria-current="page"] { font-weight: 700; }   /* WP: いま見ているカテゴリー（nav の aria-current と同じ扱い） */
.de-about__text { margin-top: 12px; }
.de-about .de-link { margin-top: 4px; }
@media (min-width: 768px) and (max-width: 1023px) {   /* 幅が中くらいのときは、誘導カードを上に広げ、残りを2列にする */
  .de-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .de-sidebar .de-guide { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .de-layout--index { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 48px; }
}

/* ==== 6 記事ページ（article.html） ==== */
.de-layout--article > .de-sidebar { display: none; }   /* スマホ・タブレットではサイドバーを出さない（末尾の誘導カードがある） */
.de-article { min-width: 0; max-width: 680px; }   /* 1列のときも、本文は全角40字前後（680px）を超えない */
.de-articlehead { display: grid; gap: 12px; margin-bottom: 32px; }
.de-articlehead__title { font-size: 28px; line-height: 1.45; }
.de-articlehead__dates { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 14px; color: var(--ink-2); }
@media (min-width: 768px) {
  .de-articlehead { margin-bottom: 40px; }
  .de-articlehead__title { font-size: 32px; }
}
@media (min-width: 1024px) {
  /* 本文の列は 680px（本文 17px × 全角40字）。サイドバーは右端。狭い画面では本文の列が縮む */
  .de-layout--article { grid-template-columns: minmax(0, 680px) 320px; column-gap: 48px; justify-content: space-between; }
  /* サイドバー: 誘導カードは本文の最後まで追ってくる。カテゴリーはその下（列の底）に置く */
  .de-layout--article > .de-sidebar { display: flex; flex-direction: column; gap: 32px; }
  .de-sidebar__follow { flex: 1 1 auto; }
  .de-sidebar__follow .de-guide { position: sticky; top: 16px; }
}

/* ==== 7 記事の本文の部品（.de-prose の中。.de-prose の基本の見た目は base.css 5c）==== */
/* 「モックアップ用の下書きです」 */
.de-draftnote { margin: 0 0 16px; }

/* 目次（WP: 子テーマが出す。inc/column.php の de_column_toc。見出しは h2 のみ。DADS は <ol> を使わない） */
.de-toc { margin-top: 32px; padding: 16px 24px 8px; background: var(--tint); border: 1px solid var(--rule-strong); border-radius: 4px; }
/* 目次は .de-prose の中に入るので、本文用の見出し・箇条書きのルールを打ち消す */
.de-prose .de-toc__title { margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 1.5; }
.de-prose .de-toc__list { margin-top: 8px; padding-left: 0; list-style: none; }
.de-prose .de-toc__list li + li { margin-top: 0; }
.de-toc__list li { padding-block: 4px; border-top: 1px solid var(--rule); }
.de-toc__list li:first-child { border-top: 0; }
.de-toc__list a { display: inline-block; padding-block: 4px; }

/* 表（DADS: 外周と区切りは罫線で。数値は右寄せ） */
.de-tablewrap { margin-top: 24px; overflow-x: auto; }   /* 通常は収まる。万一はみ出しても、ページ全体は横に動かさない */
.de-tablewrap:focus-visible { outline-offset: -4px; }
.de-datatable { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.6; }
.de-datatable caption { padding-bottom: 8px; text-align: left; font-weight: 700; }
.de-datatable th, .de-datatable td { padding: 12px 8px; border: 1px solid var(--rule-strong); text-align: right; vertical-align: top; }
.de-datatable th { background: var(--tint); font-weight: 700; }
.de-datatable th:first-child { text-align: left; }
@media (min-width: 768px) { .de-datatable th, .de-datatable td { padding: 12px 16px; } }
.de-tablenote { margin-top: 8px; }

/* WP: ブロックエディターの「テーブル」ブロック（figure.wp-block-table）も、上の .de-datatable と同じ見た目にする。
   表のキャプション（figcaption）は、モックアップの <caption> と同じく表の上に太字で出す（HTML の順は表のあと）。
   WordPress のブロックの CSS（層に入っていない）に勝つため、.de-prose を前に付けて詳細度を上げている */
.de-prose .wp-block-table { display: flex; flex-direction: column-reverse; margin-bottom: 0; overflow-x: auto; }
.de-prose .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.6; }
.de-prose .wp-block-table thead, .de-prose .wp-block-table tfoot { border: 0; }
.de-prose .wp-block-table th, .de-prose .wp-block-table td { padding: 12px 8px; border: 1px solid var(--rule-strong); text-align: left; vertical-align: top; }
.de-prose .wp-block-table th { background: var(--tint); font-weight: 700; }
/* 表は既定で左寄せ（文章の表が多いため）。数値の表は、ブロックのスタイル「数値の表」（is-style-de-numeric。inc/blocks.php）で
   2 列目から右寄せにする（モックアップの .de-datatable と同じ） */
.de-prose .wp-block-table.is-style-de-numeric :is(th, td) { text-align: right; }
.de-prose .wp-block-table.is-style-de-numeric th:first-child { text-align: left; }
.de-prose .wp-block-table figcaption { margin: 0 0 8px; padding: 0; font-size: 16px; line-height: 1.6; color: inherit; text-align: left; font-weight: 700; }   /* 表（.de-datatable）の <caption> と同じ文字の大きさ・行の高さ */
@media (min-width: 768px) { .de-prose .wp-block-table th, .de-prose .wp-block-table td { padding: 12px 16px; } }

/* 図（インライン SVG）。線の色は style.css のトークン＝シミュレーターと同じ値 */
.de-figure { margin-top: 32px; }
.de-figure figcaption { margin-top: 8px; }
.de-chart { display: block; width: 100%; max-width: 440px; height: auto; }
.de-chart text { font-family: var(--font); font-size: 16px; fill: var(--ink-2); }   /* 図（幅 380 の座標）は 343px のとき約0.9倍に縮む。16 → 約14.4px。PC（440px）では約18.5px */
.de-chart .de-chart__grid { stroke: var(--rule); stroke-width: 1; }
.de-chart .de-chart__axis { stroke: var(--rule-strong); stroke-width: 1.5; }
.de-chart .de-chart__area { fill: var(--blue-soft); }
.de-chart .de-chart__line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.de-chart .de-chart__line--lu { stroke: var(--ink-2); stroke-width: 2.5; }
.de-chart .de-chart__line--inv { stroke: var(--blue); stroke-width: 3; }
.de-chart .de-chart__label { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.de-chart .de-chart__label--lu { fill: var(--ink-2); }
.de-chart .de-chart__label--inv { fill: var(--blue); font-weight: 700; }
.de-chart .de-chart__label--gain { fill: var(--blue); font-weight: 700; stroke: var(--blue-soft); }
.de-chart .de-chart__axislabel { fill: var(--ink); }

/* WP: 「画像」ブロックの図（.de-figure と同じ間隔・注記の見た目） */
.de-prose .wp-block-image { margin: 32px 0 0; }
.de-prose .wp-block-image img { display: block; max-width: 100%; height: auto; }
.de-prose .wp-block-image figcaption { margin: 8px 0 0; padding: 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); text-align: left; }

/* 補足の囲み */
.de-callout { margin-top: 24px; padding: 16px 24px; background: var(--tint); border: 1px solid var(--rule-strong); border-radius: 4px; }
.de-callout__label { margin: 0 0 4px; font-weight: 700; }
.de-callout p:not(.de-callout__label) { margin: 0; }

/* 本文中の、シミュレーターへの小さな誘導（線のボタン。主ボタンは誘導カードに一本化） */
.de-inline-cta { display: grid; gap: 12px; align-items: center; margin-top: 32px; padding: 16px 24px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper); }
.de-inline-cta p { margin: 0; font-weight: 700; }
.de-inline-cta .de-btn { width: 100%; }
@media (min-width: 768px) {
  .de-inline-cta { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  .de-inline-cta .de-btn { width: auto; }
}
/* WP: ブロックパターン「シミュレーターへの誘導」（グループ＋段落＋ボタンブロック）。スマホはボタンを横幅いっぱいに */
@media (max-width: 767px) {
  .de-inline-cta .wp-block-buttons, .de-inline-cta .wp-block-button { display: block; }
  .de-inline-cta .wp-block-button__link { display: flex; width: 100%; }
}

/* ==== 8 記事の末尾 ==== */
.de-article__end { display: grid; gap: 48px; margin-top: 64px; }
.de-endsec__title { font-size: 20px; line-height: 1.5; }
.de-articleabout { padding-top: 24px; border-top: 1px solid var(--rule-strong); }   /* 「この記事について」（サイドバーの .de-about とは別） */
.de-articleabout__body { margin-top: 8px; }
.de-related__list { display: grid; gap: 16px; margin-top: 16px; }   /* 一覧と同じカードの小さい版（抜粋なし） */
/* 1024px 以上は、サイドバーの誘導カードが本文の最後まで見えているので、末尾の誘導カードは出さない
   （塗りの主ボタンが同じ画面に2つ並ばないように）。スマホ・タブレットでは出る */
@media (min-width: 1024px) { .de-article__end .de-guide { display: none; } }

/* ==== 9 フッター（骨組みは style.css の .de-footer。中身をメディア用に） ==== */
.de-footer__brand { display: grid; gap: 8px; justify-items: start; }
.de-footer .de-media__logo, .de-footer .de-media__name, .de-footer .de-media__scale { color: #fff; }   /* 暗い地では白（青だと 2:1 台） */
.de-footer .de-media__logo { text-decoration: none; }
.de-footer .de-media__name { font-size: 28px; }
.de-footer .de-media__scale { max-width: 140px; height: 10px; }
.de-footer__tag { font-weight: 700; }
.de-footer__op { margin-top: 24px; }
.de-footer__oplabel { font-size: 14px; color: #c9ced8; }
.de-footer__op .de-footer__name a { display: inline-block; padding-block: 4px; }

/* ==== 10 404（新規。モックアップにはない。ページ見出しは de_page_head、中身はコーポレートの 404 と同じ作り） ==== */
.de-notfound { padding-block: 0 64px; }
.de-notfound p { max-width: 40em; }
.de-notfound__links { margin-top: 16px; }