@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のまま（このファイルは下層ページ用）。
   ========================================================================== */

/* --- リセット --- */
*, *::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案と同一） ----------------------------------- */
.utility-bar {
  background: var(--ink);
  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; }

/* ② 題字（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 {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ③ ナビバー（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); }

/* ④ 広告帯（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; }   /* データページ等・表が主役のページ用 */

.article-body h2, .article-wide h2, .sec-head {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 2px solid var(--rule-dark);
  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;
}

/* ⑥ 会員募集バナー帯・フッター（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） */
.title_trade, .title_trade2 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  border-bottom: 2px solid var(--rule-dark);
  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;
  border-bottom: 2px solid var(--rule-dark);
  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;
}

/* レスポンシブ ---------------------------------------------------------- */
@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, .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; }
}