@charset "utf-8";
/* ==========================================================================
   site.css — 全ページ統一の共通スタイル（B案トーン・2026-07-22 新設）

   index-wsj-b.html（採用確定のB案トップ）のインラインCSSから共通部を抽出し、
   下層ページ用の部品と旧構成クラスの互換スタイルを加えたもの。
   デザイントークン・数値は B案（可読性改修 2026-07-18 後）をそのまま継承する。
   設計: docs/unify-design.md ／ 適用: scripts/unify_pages.py
   注意: B案トップ自体は当面インラインCSSのまま（このファイルは下層ページ用）。
   ========================================================================== */

/* 深緑（--deep-green）は colors.css の 1 行で決める（第152次）。@import は他の規則より前に置く */
@import url("colors.css");

/* --- リセット --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; }

/* --- 変数（B案と同一） --- */
:root {
  --ink:       #111111;
  --paper:     #fdfdfb;
  --text:      #222;
  --muted:     #6b6b6b;
  --rule:      #d8d8d4;
  --rule-dark: #111111;
  --accent:    #1a7a3c;
  --bg-light:  #f4f4f0;
  --serif:     'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --sans:      'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

body {
  font-family: var(--serif);
  background: var(--paper);
  color: var(--text);
  font-size: 16px;      /* 可読性改修(2026-07-18)の数値を継承 */
  line-height: 1.75;
  font-feature-settings: "palt";
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }
a:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

/* スキップリンク */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px 16px;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

.page-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px;
}

/* ① ユーティリティバー（B案と同一。背景は第152次 AP1 で黒から深緑に） ----- */
.utility-bar {
  background: var(--deep-green);
  color: #eee;
  font-family: var(--sans);
  font-size: 12px;
}
.utility-bar .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.utility-bar a { color: #eee; }
.utility-bar a:hover { color: #fff; text-decoration: underline; }
.utility-links { display: flex; gap: 14px; align-items: center; }
.btn-member {
  display: inline-block;
  background: #fff;
  color: var(--ink) !important;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 2px;
}
.btn-member:hover { background: var(--accent); color: #fff !important; text-decoration: none !important; }
/* 「ログイン」（2026-09-22 第70次）: 会員のご案内と同じ様式で色は反転（枠線ボタン） */
.btn-login {
  display: inline-block;
  background: transparent;
  color: #fff !important;
  font-weight: 700;
  padding: 4px 11px;
  border: 1px solid #fff;
  border-radius: 2px;
}
.btn-login:hover { background: #fff; color: var(--ink) !important; text-decoration: none !important; }
/* ログイン中の表示「ログイン中: ○○さま」（2026-09-21 第75次）: 共通フッターの JS が
   members/status.php の応答で差し込む。長い組織名は省略記号で切り、バーの高さを変えない */
.login-state {
  display: inline-block;
  max-width: 14em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
/* スマホ幅（480px 以下）は名前を省き「ログイン中」だけを出す（第141次）。差し込む JS（unify・templates/ と共通）は変えず、
   名前を含む文字の大きさを 0 にして ::before で「ログイン中」を出す。481px 以上の見た目は変わらない */
@media (max-width: 480px) {
  .login-state { font-size: 0; max-width: none; }
  .login-state::before { content: "ログイン中"; font-size: 12px; }
}

/* ② 題字（B案と同一。下層は h1 を使わないため .masthead-logo も同扱い） */
.masthead {
  text-align: center;
  padding: 16px 14px 10px;
  border-bottom: 1px solid var(--rule);
}
.masthead h1, .masthead .masthead-logo { font-size: 0; line-height: 0; }
.masthead a { border-bottom: none; }
.masthead img { max-height: 76px; width: auto; }
.masthead-meta {
  /* キャッチコピー: 12px→15px（第152次 AP3）。語の途中では割らず（keep-all）、行を均す（balance）。
     広い幅では「コメ価格・コメ市場の専門情報 ｜ Keizai Express Corp.」の 1 行 */
  font-family: var(--sans);
  font-size: 15px;
  word-break: keep-all;
  text-wrap: balance;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
/* スマホ幅（480px 以下）は区切りの「｜」を出さず、社名を独立した 2 行目にする（第153次 AP1）。
   1 行に置くと 388px で、画面幅 419px 以下では折り返して 2 行目が「｜」から始まっていた */
@media (max-width: 480px) {
  .masthead-meta .mm-sep { display: none; }
  .masthead-meta .mm-tagline, .masthead-meta .mm-org { display: block; }
}

/* ③ ナビバー（B案と同一） --------------------------------------------- */
.topnav {
  border-top: 2px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  background: var(--paper);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.topnav ul {
  display: flex;
  list-style: none;
  width: fit-content;
  max-width: 1100px;
  margin: 0 auto;
  white-space: nowrap;
}
.topnav li { flex-shrink: 0; }
.topnav li a {
  display: block;
  padding: 11px 13px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.topnav li a:hover {
  color: var(--accent);
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--accent);
}
/* 現在地の明示（unify_pages.py が aria-current="page" を付与） */
.topnav li a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ink); }

/* ③' スレッド帯（テーマ別スレッド・2026-09-20 第62次） --------------------
   ナビ直下の1段。unify_pages.py の build_thread_band が生成し、現在ページの
   テーマには aria-current="page" が付く。トップ（index.html）は独自 <style> に
   同じ規則を持つ。 */
.thread-band {
  display: flex;
  align-items: center;
  background: var(--bg-light);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  padding: 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.thread-band ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  align-items: center;
}
/* 中央寄せは auto マージンで行う（justify-content:center だと横あふれ時に左端が切れる）。
   「テーマ別スレッド」の見出しの表記（.thread-label）は 2026-10-03 第151次 AP7 で外し、並びそのものを中央に置く */
.thread-band ul { margin-left: auto; margin-right: auto; }
.thread-band li { flex-shrink: 0; }
.thread-band li a {
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 3px solid transparent;
}
.thread-band li a:hover {
  color: var(--accent);
  text-decoration: none;
  border-bottom-color: var(--accent);
}
.thread-band li a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* 右端の「今月の予定」（2026-09-29 第130次）: テーマの並びとは縦の区切り線で分ける。
   リンクの書式は上の .thread-band li a のまま */
.thread-band li.thread-cal {
  display: flex;
  align-items: center;
}
.thread-band li.thread-cal::before {
  content: "";
  width: 1px;
  height: 16px;
  margin: 0 6px;
  background: var(--muted);
}
/* 帯が横スクロールになる幅では「今月の予定」を帯の右端に貼り付ける（2026-09-29 第131次）。
   背景は帯と同色・右の余白（帯の padding 14px）も box-shadow で塗り、下に流れるテーマの項目を隠す。
   境目は区切り線と、左側の 12px のぼかし（::after・下の 3px は下線を残すため空ける）。
   帯がスクロールにならない幅では sticky は動かず、塗りもぼかしも帯と同色なので見た目は変わらない */
.thread-band li.thread-cal {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--bg-light);
  box-shadow: 14px 0 0 var(--bg-light);
}
.thread-band li.thread-cal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 3px;
  right: 100%;
  width: 12px;
  background: linear-gradient(to right, transparent, var(--bg-light));
  pointer-events: none;
}

/* テーマ札（短報の日付横・記事一覧のチップ）とテーマページ */
.theme-tag, .news-theme {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78em;
  line-height: 1.6;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 0.5em;
  white-space: nowrap;
  vertical-align: 0.1em;
}
.theme-tag { margin-left: 0.9em; font-size: 11.5px; }
.news-theme { margin-right: 0.5em; }
.theme-tag:hover, .news-theme:hover { background: var(--accent); color: #fff; text-decoration: none; }
.theme-desc {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--muted);
  margin: -6px 0 16px;
}
.theme-data {
  font-family: var(--sans);
  font-size: 14px;
  background: var(--bg-light);
  border: 1px solid var(--rule);
  padding: 10px 14px;
  margin: 0 0 8px;
}
.theme-data .theme-data-label { font-weight: 700; margin-right: 0.6em; }
.theme-data .theme-data-status { color: var(--accent); font-weight: 700; }
.theme-data ul { list-style: none; margin: 4px 0 0; padding: 0; }
.theme-data li { padding: 2px 0; }
.theme-data li a { text-decoration: underline; }
.theme-featured { margin-bottom: 16px; }   /* 「主な記事」（第63次） */
/* 輸入米の3表（第64次・build_import_tables.py の断片） */
.import-tables { margin: 8px 0 24px; }
.import-tables h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.import-tables .table-scroll { overflow-x: auto; }
.import-tables table.import-table { border-collapse: collapse; font-size: 0.92rem; min-width: 320px; }
.import-tables table.import-table th, .import-tables table.import-table td { border-bottom: 1px solid #ddd; padding: 4px 10px; text-align: left; vertical-align: top; }
.import-tables table.import-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.import-tables table.import-table tr.subtotal td { font-weight: 700; background: #f4f6f4; }
.import-tables .table-source { font-size: 0.82rem; color: #555; margin: 6px 0 0; }
.import-tables .table-note { font-size: 0.82rem; color: #555; margin: 6px 0 0; }
.import-tables .import-chart figcaption small { font-weight: 400; color: #555; }
.import-tables .import-chart { margin: 16px 0; } .import-tables .import-chart svg { width: 100%; max-width: 640px; height: auto; }
.import-tables .import-chart figcaption { font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; }

.theme-empty { color: var(--muted); font-family: var(--sans); font-size: 14.5px; margin: 10px 0 20px; }

/* news.html のテーマタブ（news_list.py 生成・JS 不要のリンク） */
.theme-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 8px 0 6px;
  padding: 0;
  font-family: var(--sans);
}
.theme-tabs li a {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  color: var(--ink);
}
.theme-tabs li a:hover { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.theme-tabs li a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ④ 広告帯（B案と同一・当面は下層ページ未使用=要判断） ------------------ */
.ad-leaderboard {
  min-height: 90px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-leaderboard ins { display: block; width: 100%; }

/* ⑤ 下層ページ本文 ----------------------------------------------------- */
.page-head {
  padding: 26px 0 14px;
  border-bottom: 1px solid var(--rule-dark);
  margin-bottom: 22px;
  text-align: center;
}
.page-head h1 {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-wrap: balance;
}
.article-body {
  max-width: 760px;      /* 記事系の可読幅（B案 hero-hed と同じ幅感） */
  margin: 0 auto;
  padding-bottom: 30px;
}
.article-wide { max-width: none; }   /* データページ等・表が主役のページ用 */

/* 節の見出しは文字と下線を深緑に（第152次 AP2・トップの .col-head と同じ扱い） */
.article-body h2, .article-wide h2, .sec-head {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--deep-green);
  border-bottom: 2px solid var(--deep-green);
  padding-bottom: 5px;
  margin: 26px 0 12px;
}
.article-body h3, .article-wide h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  margin: 18px 0 8px;
}
.article-body p, .article-wide p { margin-bottom: 1em; }
.article-body ul, .article-body ol,
.article-wide ul, .article-wide ol { margin: 0 0 1em 1.6em; }
.article-body li, .article-wide li { padding: 2px 0; }
.article-body hr, .article-wide hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 22px 0;
}
.article-body blockquote, .article-wide blockquote {
  border-left: 3px solid var(--rule-dark);
  background: var(--bg-light);
  padding: 10px 14px;
  margin: 0 0 1em;
}
/* 本文中リンクは常時下線（可読性改修 2026-07-18 の方針を下層本文へ適用） */
.article-body a, .article-wide a { text-decoration: underline; }
.article-body a:hover, .article-wide a:hover { color: var(--accent); }

/* 汎用表（B案 price-tbl の罫線ルールを一般化） */
.table-wrapper { overflow-x: auto; margin-bottom: 1em; }
.article-body table, .article-wide table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13px;
}
.article-body th, .article-wide th {
  border-top: 2px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  color: var(--ink);
  padding: 5px 6px;
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
  background: none;
}
.article-body td, .article-wide td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

/* 短報の表（scripts/tanpo_build.py の table.data-table・第152次 AP4）。
   375px では列の見出し（1 行のまま）に幅を取られ、行の名前などのセルが 1〜2 字幅まで細って 4〜5 行に折り返していた。
   データ型の表はセルを 1 行にし（データ集の表と同じ扱い）、はみ出す分は .table-wrapper の中で横に送る。
   .table-wrapper で包まれていない表（8/31 の旧い生成器の短報）は 1 行にするとページが横にはみ出すので対象にしない。 */
.article-body .table-wrapper table.data-table td { white-space: nowrap; }
/* 横に送る案内（第153次 AP2・scripts/tanpo_build.py の DATA_OPEN）。データ型の表は .tw-fit に包み、その先頭に
   p.table-scroll-hint「表は左右に動かせます」を置く。.tw-fit の幅は表の幅（fit-content・枠より狭ければ枠いっぱい）。
   案内の下の余白を「.tw-fit の幅（100%）− 枠の幅（100cqw）」の 1000 倍（上限 1.8em）にするので、表が枠に収まると
   余白 0＝高さ 0 で見えず、枠を超えたときだけ 1 行分の高さが付いて見える（JS は使わない。コンテナ単位の無い古いブラウザでは出ない）。
   案内は sticky で枠の左に留まり、表を横に送っても画面に残る */
.article-body .table-wrapper { container-type: inline-size; }
.article-body .tw-fit { width: -webkit-fit-content; width: fit-content; min-width: 100%; }
.article-body .table-scroll-hint {
  position: sticky;
  left: 0;
  width: 100cqw;
  box-sizing: border-box;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 2px clamp(0px, calc((100% - 100cqw) * 1000), 1.8em);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 480px) {
  /* スマホ幅ではデータ型の表の文字を 13px→12px、セルの左右の余白を 6px→3px に詰め、列の見出しは括弧「（」の前で
     折り返してよいことにする（語の途中では割らない＝keep-all）。375px の枠 347px に、在庫の表（3 列・前は 372px）と
     集荷の表（5 列・前は 527px）が収まる */
  .article-body .table-wrapper table.data-table:not(.kv) { font-size: 12px; }
  .article-body .table-wrapper table.data-table:not(.kv) th { white-space: normal; word-break: keep-all; }
  .article-body .table-wrapper table.data-table:not(.kv) th,
  .article-body .table-wrapper table.data-table:not(.kv) td { padding-left: 3px; padding-right: 3px; }
}
/* 「項目｜内容」の表（class kv・告知型）は内容が文なので折り返す。行の名前の列は 8em を確保する */
.article-body table.data-table.kv td { white-space: normal; }
.article-body table.data-table.kv td:first-child { min-width: 8em; }
@media (max-width: 480px) {
  /* スマホ幅では行ごとに「名前（太字）→内容」の縦並びにする。列の見出し（項目・内容）は読み上げ用に残して画面から隠す */
  .article-body table.data-table.kv,
  .article-body table.data-table.kv tbody,
  .article-body table.data-table.kv tr,
  .article-body table.data-table.kv td { display: block; }
  .article-body table.data-table.kv thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .article-body table.data-table.kv tbody { border-top: 2px solid var(--rule-dark); }
  .article-body table.data-table.kv td:first-child {
    min-width: 0;
    font-weight: 700;
    padding: 8px 2px 0;
    border-bottom: none;
  }
  .article-body table.data-table.kv td + td { padding: 2px 2px 8px; }
}

/* ⑥ 会員募集バナー帯・フッター（B案と同一） ----------------------------- */
.member-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-light);
  text-align: center;
  padding: 18px 14px;
}
.member-strip h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
  border: none;
  padding: 0;
}
.member-strip p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}
.member-strip .btn-join {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 10px 24px;
  border-radius: 2px;
  text-decoration: none;
}
.member-strip .btn-join:hover {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}

.site-footer {
  text-align: center;
  padding: 16px 14px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--muted);
}
.site-footer p { margin-bottom: 4px; }
.site-footer a {
  display: inline-block;
  padding: 4px 2px;
  text-decoration: underline;
}

/* ⑦ 旧構成クラスの互換スタイル（B案トーンへ置換） ------------------------
   マークアップ不変で見た目だけ統一するための互換当て。
   news.html の AUTO-NEWS 生成物（news_list.py）と、trade 系・本文の
   旧クラスをカバーする。旧 main.css の灰色角丸・緑 #4cad35 は使わない。 */

/* 新着記事見出し（news_list.py 生成・.title_trade）。文字と下線は深緑（第152次 AP2） */
.title_trade, .title_trade2 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--deep-green);
  border-bottom: 2px solid var(--deep-green);
  padding-bottom: 5px;
  margin: 26px 0 8px;
  background: none;
  border-radius: 0;
  width: auto;
}

/* 記事リスト（news_list.py 生成・ul.topnews） */
ul.topnews {
  list-style: none;
  margin: 0 0 1em 0;
  padding: 0;
  font-size: 15px;
}
ul.topnews li {
  border-top: none;
  border-bottom: 1px solid var(--rule);
  padding: 9px 0;
}
ul.topnews li:first-child { padding-top: 0; }
ul.topnews li:last-child { border-bottom: 1px solid var(--rule); margin-bottom: 1em; }
a.topnews { color: var(--ink); text-decoration: none; }
a.topnews:hover { color: var(--accent); }

/* 深読みマーク（news_list.py 生成・元々 #1a7a3c のため色は不変） */
.news-lock {
  display: inline-block;
  font-size: 0.72em;
  line-height: 1.6;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 0.4em;
  margin-right: 0.5em;
  white-space: nowrap;
  vertical-align: 0.1em;
}

/* 注記ボックス（.trade_box: ドラフト注記・免責の枠） */
.trade_box {
  border-left: 3px solid var(--rule-dark);
  background: var(--bg-light);
  margin-bottom: 1.5em;
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 14px;
}

/* データページのナビ（.datamonth / li.dnav / .data_nav） */
.datamonth {
  background: none;
  border: none;
  border-top: 2px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  padding: 8px 0;
  margin: 0 0 0.5em 0;
}
ul li.dnav { display: inline-block; margin: 0 0.5em 0 0; padding: 2px 0; }
.data_nav, a.data_nav { color: var(--ink); }
a.data_nav:hover { color: var(--accent); }

/* 章見出し（header.chapter） */
header.chapter {
  background: none;
  border: none;
  color: var(--deep-green);   /* 第152次 AP2 */
  border-bottom: 2px solid var(--deep-green);
  border-radius: 0;
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  padding-bottom: 5px;
  margin: 26px 0 12px;
}

/* リスト装飾 */
ul.maru li { list-style: disc; margin-left: 2em; padding: 2px 0; }
ul.sq { list-style: square; padding-left: 2em; margin-bottom: 1em; }
ul.sq li { padding: 0.3em 0 0.5em 0; border-bottom: 1px solid var(--rule); }
ul.sq li:last-child { border-bottom: none; }
ul.contact { list-style: none; margin-left: 0; }
ul.contact li { padding: 2px 0; font-family: var(--sans); }
/* 旧 FontAwesome アイコンの軽量代替（外部フォント非依存） */
ul.contact li.fa-envelope::before { content: "✉ "; color: var(--muted); }

/* 小さめ注記・中央寄せ */
p.small_center { margin: 0 0 1.3em; font-size: 13px; color: var(--muted); text-align: center; font-family: var(--sans); }
p.small_left   { margin: 0 0 1.3em; font-size: 13px; color: var(--muted); font-family: var(--sans); }
.center { text-align: center; }

/* 旧テーマのボタン（.button / .actions）→ B案 .btn-more 相当 */
ul.actions { list-style: none; margin: 0 0 1em 0; display: flex; gap: 10px; flex-wrap: wrap; }
ul.actions li { padding: 0; }
.button, a.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid var(--ink);
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 16px;
  line-height: 1.6;
  text-decoration: none;
}
.button:hover, a.button:hover {
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

/* ⑧ 記事ページ（knews/kcolumn・templates/ 生成記事。Phase 3 2026-07-24） ----
   見出し部はB案 hero（hero-label/hero-hed/hero-date）のトーンを記事用に転用。
   ペイウォール系は main.css の同名クラス（2026-07-19 実装）をB案トークンで
   置き換えた互換当て（クラス名・マークアップは templates/ 側で不変）。 */

.article-head { padding: 26px 0 16px; }
.article-kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 8px;
}
.article-head h1 {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-wrap: balance;
  margin-bottom: 8px;
}
.article-date {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}

/* 記事中央寄せ画像（旧 main.css の img.center 相当） */
img.center { display: block; margin: 0.5em auto; }

/* YouTube 埋め込み（convert_articles.py の .video-embed 出力用） */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 1em;
  background: var(--bg-light);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 記事末尾の戻りリンク */
.article-back { margin: 26px 0 0; font-family: var(--sans); font-size: 14px; }

/* 会員ペイウォール（深読み記事） */
.paywall-tag {
  display: inline-block;
  font-size: 0.85em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 0.4em;
  white-space: nowrap;
}
.paywall-lead--teaser {
  position: relative;
  overflow: hidden;
}
.paywall-lead--teaser::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5.5em;
  background: linear-gradient(rgba(253, 253, 251, 0), var(--paper) 85%);
  pointer-events: none;
}
.paywall-cta {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  background: var(--bg-light);
  padding: 1.6em 1.2em;
  margin: 0 0 2.5em 0;
  text-align: center;
}
.paywall-cta-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.1em;
  margin: 0 0 0.4em 0;
}
.paywall-cta-text { margin: 0 0 1.2em 0; }
.paywall-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8em;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.paywall-cta-actions li { padding: 0; margin: 0; }
.paywall-cta .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.paywall-cta .button.primary:hover { background: var(--ink); border-color: var(--ink); }
/* CTA内リンクはボタン形のため下線を持たせない（.article-body a の下線より優先） */
.article-body .paywall-cta a.button { text-decoration: none; }
.paywall-loginbar {
  font-family: var(--sans);
  font-size: 0.85em;
  color: var(--muted);
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 0.4em;
  margin-bottom: 1em;
}

/* B案トップ由来の共通部品（下層でも使えるように収録） */
.btn-more {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 8px 16px;
  line-height: 1.6;
  text-decoration: none;
}
.btn-more:hover { background: var(--ink); color: #fff; text-decoration: none; }
.tbl-source {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* ⑨ 入会申込フォーム（apply.php・2026-07-25） --------------------------
   .apply-form 配下にスコープした追加のみ。既存ページの見た目には影響しない */
.apply-form { font-family: var(--sans); max-width: 640px; margin: 18px 0 8px; }
.apply-field { margin: 0 0 16px; }
.apply-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.apply-field .req {
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 2px;
  vertical-align: 1px;
}
.apply-field .opt {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  margin-left: 6px;
}
.apply-field input[type="text"],
.apply-field input[type="email"],
.apply-field input[type="tel"],
.apply-field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px; /* 16px未満だとiOS Safariがフォーカス時に自動ズームする */
  line-height: 1.6;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 9px 10px;
}
.apply-field input:focus,
.apply-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.apply-field textarea { min-height: 140px; resize: vertical; }
.apply-note {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}
.apply-errors {
  font-family: var(--sans);
  font-size: 13.5px;
  color: #7a1a1a;
  background: #faf1f0;
  border: 1px solid #a02222;
  padding: 12px 14px;
  margin: 0 0 18px;
}
.apply-errors ul { margin: 6px 0 0 1.4em; }
.apply-done {
  font-family: var(--sans);
  background: var(--bg-light);
  border: 1px solid var(--rule);
  padding: 20px 18px;
  margin: 18px 0;
}
.apply-done h2 { font-family: var(--serif); font-size: 20px; margin-bottom: 8px; }
.apply-submit { margin: 20px 0 8px; }
.apply-submit button {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 11px 34px;
  cursor: pointer;
}
.apply-submit button:hover { background: var(--ink); border-color: var(--ink); }
.apply-submit button[disabled] { opacity: 0.6; cursor: default; }
/* honeypot（スパム対策のダミー欄）は画面外へ。この指定が消えると人間に見えてしまう */
.apply-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 用語集（glossary.html・scripts/glossary_page.py が生成・第161次） ---------- */
.glossary .gl-lead { font-family: var(--sans); font-size: 14.5px; color: var(--muted); }
.glossary .gl-index h2 { margin-top: 20px; }
.glossary .gl-jump, .glossary .gl-terms, .glossary .gl-cats {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  font-family: var(--sans); font-size: 14px;
}
.glossary .gl-jump li, .glossary .gl-terms li, .glossary .gl-cats li { padding: 0; min-width: 0; }
.glossary .gl-jump a, .glossary .gl-cats a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  justify-content: center; padding: 0 12px;
  border: 1px solid var(--rule); background: var(--bg-light); text-decoration: none;
}
.glossary .gl-terms a { display: inline-block; padding: 6px 2px; overflow-wrap: anywhere; }
.glossary .gl-to { color: var(--muted); font-size: 12.5px; }
.glossary .gl-n { color: var(--muted); font-size: 12px; margin-left: 6px; }
.glossary .gl-row-h {
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--deep-green);
  margin: 12px 0 4px; scroll-margin-top: 12px;
}
.glossary .gl-cat-h { scroll-margin-top: 12px; margin-top: 36px; }
.glossary .gl-term { padding: 4px 0 6px; border-bottom: 1px solid var(--rule); scroll-margin-top: 12px; }
.glossary .gl-term h3 { margin-top: 16px; overflow-wrap: anywhere; }
.glossary .gl-yomi { font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: var(--muted); margin-left: 10px; }
.glossary .gl-desc { overflow-wrap: anywhere; }
.glossary .gl-aka, .glossary .gl-src, .glossary .gl-rel, .glossary .gl-pages {
  font-family: var(--sans); font-size: 13.5px; margin-bottom: 0.5em; overflow-wrap: anywhere;
}
.glossary .gl-src-h {
  display: inline-block; font-size: 12px; color: var(--muted);
  border: 1px solid var(--rule); padding: 0 6px; margin-right: 8px; line-height: 1.6;
}
.glossary .gl-ed { background: var(--bg-light); }
.glossary .gl-ed-tag, .glossary .gl-ed-src { font-family: var(--sans); font-size: 12.5px; color: var(--deep-green); font-weight: 700; }
.glossary .gl-back { font-family: var(--sans); font-size: 13px; text-align: right; margin-bottom: 0.5em; }
.glossary .gl-about p { font-family: var(--sans); font-size: 14px; }

/* レスポンシブ ---------------------------------------------------------- */
@media (max-width: 768px) {
  .topnav li a { padding: 11px 10px; font-size: 13px; }
  .page-head h1 { font-size: 22px; }
  .article-head h1 { font-size: 22px; }
}
@media (max-width: 480px) {
  .topnav li a { padding: 11px 8px; font-size: 12px; }
  .page-head h1 { font-size: 20px; }
  .article-head h1 { font-size: 20px; }
}

/* 印刷 ------------------------------------------------------------------ */
@media print {
  body { background: #fff; font-size: 11pt; }
  .utility-bar, .ad-leaderboard, .topnav, .thread-band, .theme-tabs, .member-strip, .skip-link { display: none; }
  .page-head { border-bottom: 1pt solid #000; }
  a { color: #000; text-decoration: none; }
  .masthead img { max-height: 60pt; }
  .article-body th, .article-wide th { border-top-color: #000; border-bottom-color: #000; }
}