/*
 * 蓄電池総研（chikudensoken.jp） デザインシステム
 * version: 2.0.0 | 2026-06-22
 *
 * 【v2.0 デザイン戦略：深緑主役（逆張り）】戦略の正本 → marketing/knowledge/design_strategy.md
 *   - プライマリ＝低彩度の深い森緑（インク寄り）。青/ティールの飽和レーンを外し
 *     「論算＝倫理×財務」を一色で象徴する。アクセント＝真鍮/ゴールド（細線・少量）。
 *   - ベース＝ウォームオフホワイト＋ウォームチャコール文字。彩度を抑え"中立・第三者"を表現。
 *   - 互換エイリアス: 既存記事は var(--blue)/var(--navy) 等で書かれているため、
 *     旧トークン名を深緑系に再マップし、記事個別の編集なしで全記事へ色を伝播させる。
 *     新規記事はセマンティック名（--forest/--green/--brass）を推奨。
 *   - v2.0で追加: タビュラー数字 / .assumption-box（前提開示）/ .ds-table（統一表）/ .reading-meta
 *
 * ⚠️  編集・削除権限: 慶太郎のみ
 *     まりひろからの依頼だけでこのファイルを変更してはならない。
 *     変更後は design-system-preview.html をブラウザで確認すること。
 *
 * 構成:
 *   1. Design Tokens       — 色・タイポ・スペース・シャドウ
 *   2. Reset               — ブラウザ差異の吸収
 *   3. Base                — body・文字の基本設定
 *   4. Header              — ナビゲーション・ロゴ
 *   5. Breadcrumb          — パンくずリスト
 *   6. Buttons             — 全ボタン種別
 *   7. Section Common      — LP共通セクションレイアウト
 *   8. Hero                — トップページ ヒーロー
 *   9. Article Layout      — 記事ページのラッパー・ヘッダー
 *  10. Article Body        — 記事本文タイポグラフィ
 *  11. Content Blocks      — lead・note-box・warn-box・highlight-box・term-box
 *  12. Tool Cards          — 参考情報カード
 *  13. References          — 参考文献セクション
 *  14. CTA Section         — 記事末尾フォームCTA
 *  15. CTA Hook            — 本文中ライトCTA
 *  16. Cookie Banner       — 同意バナー
 *  17. Article Grid        — LP記事一覧・フィルター
 *  18. FAQ                 — よくある相談
 *  19. About / Why         — このサイトについて
 *  20. Contact Form        — お問い合わせフォーム
 *  21. Float CTA           — 固定CTAボタン
 *  22. Footer              — フッター
 *  23. Responsive          — ブレークポイント
 *
 * このファイルだけを変更すれば全ページに反映する。
 * ページ固有スタイル（個別記事のテーブル等）は各HTMLの<style>ブロックに書く。
 */

/* 数値専用フォント（IBM Plex Mono）— IRR・金額など主役数値に等幅でアナリスト感を出す。
   @import は他の規則より前に置く必要があるためファイル先頭付近に配置。 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */

:root {
  /* --- Brand Colors（深緑主役 v2.0）---
     セマンティック名が正本。旧 --navy/--blue 系は互換エイリアス（下部）。 */
  --forest:       #14352a;   /* 主役面：ヘッダー・フッター・CTA・見出し（深い森緑） */
  --forest-2:     #0e271e;   /* 主役面 濃：グラデ末端・dark hover */
  --green:        #1d6b49;   /* 反応色：リンク・主要ボタン（白上で可読） */
  --green-hover:  #18583c;   /* 反応色 ホバー */
  --green-soft:   #eef3f0;   /* 淡緑：lead・highlight・term-box 背景 */
  --green-line:   #cde0d5;   /* 淡緑 罫：ボックス枠線 */
  --green-pale:   #a8c9b8;   /* dark緑背景上のリード文・ラベル */

  /* --- Accent（真鍮/ゴールド・細線少量・"算盤＝金"）--- */
  --brass:        #9c7a3c;   /* 細線・ラベル・権威アクセント */
  --brass-soft:   #f3ecdb;   /* 前提開示ボックス等の淡い地 */
  --brass-line:   #e3d4ad;   /* 真鍮系 罫 */
  --brass-light:  #cdb079;   /* dark背景上の "総研" ロゴ span */
  --gold:         #c9a24e;   /* dark緑面に乗せるCTAの地（暗緑文字と合わせる・行動の"金") */
  --gold-hover:   #d8b463;   /* CTAホバー：暗緑文字のAAを保つため明るく振る（暗くしない） */

  /* --- Neutral Colors（ウォーム）--- */
  --white:        #ffffff;
  --bg-soft:      #f7f6f1;   /* 記事背景・セクション背景（ウォームオフホワイト） */
  --text:         #1c2420;   /* 本文テキスト（ウォームチャコール） */
  --muted:        #5e6b63;   /* 補足テキスト（ウォームグレー） */
  --border:       #e4e6e1;   /* ボーダー */

  /* --- Status Colors --- */
  --color-success: #1f7a52;  /* IRR 楽観・良好（低彩度のフォレスト寄り・煽らない） */
  --color-warning: #b07a17;  /* IRR 中立 */
  --color-danger:  #b4492f;  /* IRR 悲観・リスク（煽らない抑えた赤） */
  --color-line:    #06c755;  /* LINE ボタン */

  /* --- 互換エイリアス（既存記事の var(--blue)/var(--navy) を深緑系へ再マップ）---
     ⚠️ 新規コードでは使わず、上のセマンティック名（--forest/--green/--brass）を使うこと。 */
  --navy:         var(--forest);
  --blue:         var(--green);
  --blue-mid:     var(--green-hover);
  --blue-light:   var(--green-soft);
  --blue-accent:  var(--brass-light);
  --blue-pale:    var(--green-pale);

  /* --- Typography Scale --- */
  --font-base:    'Noto Sans JP', sans-serif;
  --font-num:     'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;  /* 数値専用 */
  --text-2xs:     11px;
  --text-xs:      12px;
  --text-sm:      13px;
  --text-base:    15px;
  --text-md:      16px;
  --text-lg:      17px;
  --text-xl:      21px;
  --text-2xl:     clamp(20px, 3vw, 26px);
  --text-3xl:     clamp(22px, 3.5vw, 30px);
  --text-hero:    clamp(34px, 6vw, 56px);

  /* --- Line Heights --- */
  --leading-tight:  1.5;
  --leading-base:   1.8;
  --leading-relaxed: 1.9;
  --leading-loose:  2.0;

  /* --- Spacing Scale --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-24: 96px;

  /* --- Border Radius --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 20px;
  --radius-circle: 50%;

  /* --- Shadows（深緑トーン）--- */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 6px 20px rgba(20, 53, 42, 0.14);
  --shadow-float: 0 4px 24px rgba(20, 53, 42, 0.42);

  /* --- Transitions --- */
  --transition: 0.2s;
  --transition-slow: 0.3s;

  /* --- Layout --- 横幅を広く使う（左右マージン圧縮・記事の縦長解消） */
  --max-content: 1200px;
  --max-wide: 1200px;
}


/* ================================================================
   2. RESET
   ================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ================================================================
   3. BASE
   ================================================================ */

body {
  font-family: var(--font-base);
  font-size: var(--text-md);
  color: var(--text);
  background: var(--bg-soft);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   見出しの改行ルール（必読・恒久対策・2026-06-23 更新）
   日本語の見出しは「不自然な改行をしない」かつ「画面内で必ず折り返す」。
   - word-break: auto-phrase ＝ 文節（自然な区切り）で折り返す。
     文節途中の不自然な改行を避けつつ、狭い画面でもきちんと折り返す。
   ⚠️ 旧 word-break: keep-all は日本語（空白が無い）だと一切折り返せず、
      スマホで見出しがはみ出して横スクロールが必要になっていたため廃止。
   ⚠️ 旧 text-wrap: balance も日本語で不自然な改行位置を生むため使わない。
   - overflow-wrap: anywhere ＝ 長い英数字・URLだけ最終手段で折る。
   - 意図的に複数行にしたい時は HTML に <br> を入れる。
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  transition: color var(--transition);
}


/* ================================================================
   3b. LOGO IMAGES
   ロゴ画像アセット使い分けガイド:

   【ヘッダー】テキストロゴ「蓄電池総研」を使用（SEO目的で固定・画像ロゴ不可）

   【フッター・CTA・About（信頼感を出したいセクション）】
     bsri-horz-inv-white.svg → dark背景（フッター・CTAセクション）横型 ★推奨
     bsri-horz-navy.svg      → light背景（About・資料）横型
     bsri-stack-inv-white.svg → dark背景 縦型（正方形スペース）
     bsri-stack-navy.svg     → light背景 縦型（Aboutサイドバー等）
     bsri-solo-inv-white.svg → dark背景 アイコン単体
     bsri-solo-navy.svg      → light背景 アイコン単体

   SVGを優先使用（スケーラブルで任意のサイズに対応）
   パスベース: /assets/img/logos/（記事は ../assets/img/logos/）
   ================================================================ */

/* 横型ロゴ（フッター・CTA・About の横長スペース）
   viewBox 238×70 → height 36px で width≈122px */
.logo-img {
  display: block;
  height: 36px;
  width: auto;
}

/* 縦型ロゴ（About・広告など正方形スペース）
   viewBox 141×108 → height 72px で width≈94px */
.logo-img-stack {
  display: block;
  height: 72px;
  width: auto;
}

/* ソロマーク（小スペース・アイコン用途）
   viewBox 141×70 → height 36px で width≈72px */
.logo-img-solo {
  display: block;
  height: 36px;
  width: auto;
}

/* サイズ修飾子 */
.logo-img-sm { height: 24px !important; }
.logo-img-lg { height: 48px !important; }

/* フッター専用（暗地・横型・真鍮I）
   ロゴはアウトライン済み（フォント非依存）なのでSVGを直接使う。地は透明でフッターに馴染む。
   <img src="/assets/img/logos/bsri-horz-inv-brass.svg" class="footer-logo" alt="BSRI"> */
/* ※ .footer-logo は下の section 22 で定義 */

/* CTAセクション専用（フォームカード上部・信頼感補強・暗地・真鍮I）
   <img src="/assets/img/logos/bsri-horz-inv-brass.svg" class="cta-logo" alt="BSRI"> */
.cta-logo {
  height: 24px;
  width: auto;
  display: block;
  margin: 0 auto var(--sp-5);
  opacity: 0.9;
}

/* Aboutセクション専用（light背景・横型・真鍮I＝主ロゴ）
   <img src="/assets/img/logos/bsri-horz-brass.svg" class="about-logo" alt="BSRI"> */
.about-logo {
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: var(--sp-5);
  opacity: 0.85;
}


/* ================================================================
   4. HEADER
   ================================================================ */

header {
  position: sticky;
  top: 0;
  background: var(--navy);
  z-index: 100;
  padding: 0 var(--sp-6);
}

.header-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--sp-16);
}

/* ロゴ（テキスト版）
   使い分け:
   - <a href="/" class="logo">蓄電池<span>総研</span></a>
   - span内の文字色が --blue-accent になる */
.logo {
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.logo span {
  color: var(--blue-accent);
}

/* ナビゲーション */
nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

nav a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* ヘッダーCTAは深緑面に乗るため、緑ではなくゴールド地＋暗緑文字でコントラストを出す */
.nav-cta {
  background: var(--gold) !important;
  color: var(--forest) !important;
  font-weight: 700;
  margin-left: var(--sp-2);
}

.nav-cta:hover {
  background: var(--gold-hover) !important;
}

/* 記事ページのヘッダーCTAボタン（ナビなし版） */
.header-cta {
  background: var(--gold);
  color: var(--forest);
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition);
}

.header-cta:hover {
  background: var(--gold-hover);
}


/* ================================================================
   5. BREADCRUMB
   ================================================================ */

.breadcrumb {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px var(--sp-6);
  font-size: var(--text-xs);
  color: var(--muted);
}

.breadcrumb a {
  color: var(--blue);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}


/* ================================================================
   6. BUTTONS
   ================================================================ */

/* Primary — 濃い青・塗りつぶし */
.btn-primary {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  padding: 13px 34px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition);
  font-family: inherit;
}

.btn-primary:hover {
  background: var(--blue-mid);
}

/* Outline — dark背景上の白ボーダー */
.btn-outline {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
  padding: 12px 30px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.btn-outline:hover {
  border-color: var(--white);
  color: var(--white);
}

/* LINE — LINE公式グリーン */
.btn-line {
  display: inline-block;
  background: var(--color-line);
  color: var(--white);
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--transition);
}

.btn-line:hover {
  opacity: 0.88;
}

/* Ghost — 青ボーダー・light背景上 */
.btn-ghost {
  display: inline-block;
  border: 1px solid var(--blue);
  color: var(--blue);
  padding: 9px 22px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.btn-ghost:hover {
  background: var(--blue);
  color: var(--white);
}


/* ================================================================
   7. SECTION COMMON（LP用）
   ================================================================ */

section {
  padding: var(--sp-18) var(--sp-6);
}

.section-inner {
  max-width: var(--max-content);
  margin: 0 auto;
}

/* 英文アッパーラベル（例: "Articles"） */
.section-label {
  font-size: var(--text-2xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: var(--sp-3);
}

.section-lead {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-10);
  max-width: 680px;
  word-break: auto-phrase;
}


/* ================================================================
   8. HERO（LP トップのみ）
   ================================================================ */

#hero {
  background: linear-gradient(135deg, var(--forest) 0%, #1f5540 100%);
  color: var(--white);
  padding: var(--sp-24) var(--sp-6) 80px;
  text-align: center;
}

.hero-label {
  font-size: var(--text-2xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-pale);
  margin-bottom: var(--sp-5);
}

.hero-catch {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--sp-6);
  letter-spacing: 0.02em;
  /* 【例外】LP TOPのキャッチコピーのみ意図的に複数行へバランス配置する。
     ここ以外の見出しは上の h1〜h6 ルール（keep-all）で不自然な改行を禁止。 */
  text-wrap: balance;
  word-break: normal;
}

.hero-sub {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin: 0 auto var(--sp-10);
}

.hero-buttons {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ヒーロー内のタグチップ（カテゴリバッジ） */
.hero-chip {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}

/* 深緑ヒーロー上の主要ボタンはゴールド地＋暗緑文字でコントラストを確保 */
#hero .btn-primary {
  background: var(--gold);
  color: var(--forest);
}

#hero .btn-primary:hover {
  background: var(--gold-hover);
}


/* ================================================================
   9. ARTICLE LAYOUT
   ================================================================ */

/* 記事ページの中央揃えラッパー */
.article-wrap {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-12);
}

/* カテゴリタグ（記事ヘッダー内） */
.article-tag {
  display: inline-block;
  background: var(--blue-light);
  color: var(--blue);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}

/* 記事タイトル */
.article-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: var(--sp-4);
  color: var(--navy);
}

/* 投稿日・更新日 */
.article-meta {
  font-size: var(--text-sm);
  color: var(--muted);
  padding-bottom: 28px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 36px;
}

/* 記事本文ホワイトカード */
.article-body {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--sp-10) var(--sp-10);
  margin-bottom: var(--sp-12);
}


/* ================================================================
   10. ARTICLE BODY（本文タイポグラフィ）
   ================================================================ */

.article-body p {
  margin-bottom: var(--sp-5);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.article-body h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 44px 0 var(--sp-4);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  color: var(--navy);
}

.article-body h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 28px 0 10px;
  color: var(--navy);
}

.article-body h4 {
  font-size: var(--text-md);
  font-weight: 700;
  margin: var(--sp-5) 0 var(--sp-2);
  color: var(--navy);
}

.article-body strong {
  font-weight: 700;
}

.article-body ul,
.article-body ol {
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.article-body li {
  margin-bottom: var(--sp-2);
  font-size: var(--text-md);
  line-height: var(--leading-base);
}

/* ============================================================
   記事本文の表・基本スタイル（DS標準・2026-06-23 集約）
   記事ごとに .compare-table/.market-table/.result-table 等で再実装していた
   基本書式を統一。article-body 内の素の <table> がこの見た目になる
   （独自テーブルクラスは不要。新規記事はクラス無しの <table> でよい）。
   ※狭い画面の横スクロールは後段の @media で対応済み。
   ============================================================ */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 20px 0 28px;
  font-variant-numeric: tabular-nums;
}
.article-body table th {
  background: var(--forest);
  color: var(--white);
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
}
.article-body table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.7;
}
.article-body table tr:nth-child(even) td { background: var(--bg-soft); }

/* 強調列の見出しセル（旧・各記事 .col-head を集約）。table th より高specificityで勝たせる */
.article-body .col-head { background: var(--green-soft); color: var(--forest); font-weight: 700; }
/* 強調行（合計・前提など）。各記事の tr.total/.key-row/最終行強調をこの1クラスに寄せる */
.article-body table tr.row-emph td { background: var(--green-soft); font-weight: 700; color: var(--forest); }
/* セル内の良し悪し・増減のインライン強調 */
.article-body .good { color: var(--green); font-weight: 700; }
.article-body .bad  { color: #c0392b; font-weight: 700; }
/* 数値列の右寄せ（任意付与） */
.article-body table .num-col,
.article-body table td.num,
.article-body table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* インライン引用番号 */
.cite {
  color: var(--blue);
  font-size: var(--text-xs);
  vertical-align: super;
  text-decoration: none;
  font-weight: 700;
  margin-left: 1px;
}

/* セクション区切り線 */
hr.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-10) 0;
}


/* ================================================================
   11. CONTENT BLOCKS
   ================================================================ */

/* リード文（冒頭青ボーダー） */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: #2d3748;
  padding: var(--sp-5) var(--sp-6);
  border-left: 4px solid var(--blue);
  background: var(--blue-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--sp-8) !important;
}

/* 補足メモ（グレー背景） */
.note-box {
  background: #f8f8f8;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: var(--text-sm);
  color: #4a5568;
  margin: -8px 0 var(--sp-5);
  line-height: 1.7;
}

/* 警告・注意（抑えたオーカー・煽らない） */
.warn-box {
  background: #faf6ec;
  border: 1px solid #e7d9b6;
  border-left: 4px solid #b07a17;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  font-size: var(--text-sm);
  margin: 0 0 var(--sp-5);
  line-height: 1.7;
}

.warn-box strong {
  color: #7a531a;
}

/* ハイライト（青ボーダー・強調ブロック） */
.highlight-box {
  background: var(--blue-light);
  border-left: 4px solid var(--blue);
  padding: var(--sp-5) var(--sp-6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--sp-6) 0;
}

.highlight-box p {
  margin-bottom: 0 !important;
  color: var(--navy);
}

/* 用語定義ボックス
   使い方: 略称・専門用語の初出直後に配置。内部にリンク禁止。
   例: <div class="term-box"><p><strong>アグリゲーター(Ag)</strong>とは…</p></div> */
.term-box {
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: var(--text-sm);
  line-height: 1.75;
  margin: -8px 0 var(--sp-5);
}

.term-box p {
  margin-bottom: 0;
  color: #24433a;
}

.term-box strong {
  color: var(--navy);
}

/* ============================================================
   ラベル付きコールアウト（DS標準・2026-06-23 集約）
   記事ごとの example-box/calc-box/sample-box/pattern-box/action-box/
   data-box/point-box/prereq-box を集約。ラベル＋本文の小ボックス。
   変種: .is-good(緑)/.is-warn(橙)/.is-dark(濃緑) ・ ラベル .is-badge(バッジ型)
   ============================================================ */
.callout {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 20px; margin: 18px 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout-label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--green); margin-bottom: 6px;
}
.callout-label.is-badge {
  display: inline-block; background: var(--green); color: var(--white);
  font-size: 12px; letter-spacing: normal; padding: 2px 10px;
  border-radius: 4px; margin-bottom: 10px;
}
.callout.is-good { background: var(--green-soft); border-color: #bbe6cf; }
.callout.is-warn { background: #fffbeb; border-color: #fde68a; }
.callout.is-warn .callout-label { color: #b45309; }
.callout.is-dark { background: var(--forest); border-color: var(--forest); }
.callout.is-dark, .callout.is-dark p { color: rgba(255,255,255,0.92); }
.callout.is-dark strong { color: var(--gold); }

/* ステータスバッジ（表・カード内で使用） */
.badge-success { background: #dcfce7; color: #166534; font-size: var(--text-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill); }
.badge-warning { background: #fef9c3; color: #713f12; font-size: var(--text-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill); }
.badge-danger  { background: #fee2e2; color: #7f1d1d; font-size: var(--text-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill); }

/* IRR値の色分け（表内）— 等幅数値フォントでアナリスト感を出す */
.irr-opt  { color: var(--color-success); font-weight: 700; font-size: var(--text-base); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.irr-mid  { color: var(--color-warning); font-weight: 700; font-size: var(--text-base); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.irr-pess { color: var(--color-danger);  font-weight: 700; font-size: var(--text-base); font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* 数値強調ユーティリティ（コスト・容量・金額など桁を揃えたい数字に付与） */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }


/* ================================================================
   12. TOOL CARDS（参考情報）
   ================================================================ */

.tool-section-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-3);
}

.tool-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
}

/* === 本文(.article-wrap)の外に置かれた 関連記事/参考情報/参考文献 を
   本文と同じコンテンツ幅に揃える（全ページ共通・full-bleedの無限幅を解消）===
   多くの記事で 関連記事 が article-wrap の後ろ＝body直下に置かれており、
   幅制約が無いため画面全幅に広がっていた。ここで本文幅に中央寄せ＋左右余白を付ける。 */
body > .tool-section-label,
body > .tool-list,
body > .references {
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

/* ============================================================
   ステップ／手順コンポーネント（DS標準・2026-06-23 集約）
   記事ごとに独自実装されていた step-* を1箇所に集約。4つの使い方を吸収:
   A) .step-block                       … ソフトボックス（番号バッジ＋任意タイトル＋本文）
   B) ul.step-list > li                 … 番号付きフレックス・リスト
   C) .step-list > .step-item           … 番号＋本文のフレックス行
   D) .step-card(.step-head/.step-body) … 枠付きカード（本文に表も入る）
   ※色はv2.0トークン。記事の<style>に step-* を再定義しないこと。
   ============================================================ */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--white);
  font-size: 13px; font-weight: 700; line-height: 1.4;
  padding: 3px 11px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.step-title { font-size: 16px; font-weight: 700; color: var(--forest); }

/* A) ソフトボックス */
.step-block {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-left: 4px solid var(--green); border-radius: 0 8px 8px 0;
  padding: 20px 24px; margin: 20px 0;
}
.step-block .step-num { margin-bottom: 10px; }
.step-block .step-title { margin-bottom: 8px; }

/* B/C) 番号付きリスト・フレックス行 */
.step-list { list-style: none; padding-left: 0; margin: 20px 0; }
.step-list > li,
.step-list > .step-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  font-size: 15px; line-height: 1.8;
}
.step-list > li:last-child,
.step-list > .step-item:last-child { border-bottom: none; }
.step-list .step-body,
.step-list > .step-item .step-body { flex: 1; }
.step-list .step-body strong,
.step-list > .step-item .step-body strong { display: block; color: var(--forest); margin-bottom: 4px; }

/* D) 枠付きカード */
.step-card {
  border: 1px solid var(--border); border-radius: 8px;
  margin: 20px 0; overflow: hidden;
}
.step-card .step-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--bg-soft); padding: 13px 20px;
  border-bottom: 1px solid var(--border);
}
.step-card .step-body { padding: 20px 24px; font-size: 15px; line-height: 1.9; }
.step-card .step-body p { margin-bottom: 12px; }
.step-card .step-body p:last-child { margin-bottom: 0; }

.tool-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px var(--sp-5);
  background: var(--white);
}

.tool-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

/* ツールバッジ（「無料 / 公的機関」など） */
.tool-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-soft);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.tool-name a {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.tool-name a:hover {
  text-decoration: underline;
}

.tool-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}


/* ================================================================
   13. REFERENCES（参考文献）
   ================================================================ */

.references {
  margin-top: var(--sp-10);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--blue);
}

/* ヘッダー行：「参考文献」h4 + 「↑ 本文に戻る」ボタン */
.references-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.references-header h4 {
  font-size: var(--text-xs);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

/* 「↑ 本文に戻る」ボタン
   リンク先: #article-top（<body id="article-top">に対応） */
.references-back {
  font-size: var(--text-xs);
  color: var(--blue);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid var(--blue-light);
  border-radius: var(--radius-pill);
  transition: background var(--transition);
  white-space: nowrap;
}

.references-back:hover {
  background: var(--blue-light);
}

.references ol {
  padding-left: 1.5em;
}

.references li {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-loose);
}

.references a {
  color: var(--blue);
  text-decoration: none;
  word-break: break-all;
}

.references a:hover {
  text-decoration: underline;
}


/* ================================================================
   14. CTA SECTION（記事末尾フォーム）
   ================================================================ */

.cta-section {
  background: var(--navy);
  padding: 60px var(--sp-6);
  text-align: center;
}

.cta-inner {
  max-width: 640px;
  margin: 0 auto;
}

.cta-section h2 {
  color: var(--white);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.cta-section .cta-inner > p {
  color: var(--blue-pale);
  font-size: var(--text-base);
  margin-bottom: var(--sp-8);
  line-height: var(--leading-base);
}

/* フォームホワイトカード */
.cta-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  text-align: left;
}

.cta-form input,
.cta-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: var(--text-base);
  font-family: inherit;
  margin-bottom: var(--sp-3);
  transition: border-color var(--transition);
}

.cta-form input:focus,
.cta-form textarea:focus {
  outline: none;
  border-color: var(--blue);
}

.cta-form textarea {
  height: 120px;
  resize: vertical;
}

.cta-form button {
  width: 100%;
  background: var(--blue);
  color: var(--white);
  font-size: var(--text-md);
  font-weight: 700;
  padding: 14px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
  font-family: inherit;
}

.cta-form button:hover {
  background: var(--blue-mid);
}

.cta-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cta-note {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 10px;
  text-align: center;
}


/* ================================================================
   15. CTA HOOK（本文中ライトCTA）
   ================================================================ */

/* 配置場所: まとめ段落の後・参考文献の前 */
.cta-hook {
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  text-align: center;
  margin: var(--sp-8) 0;
}

.cta-hook-heading {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-4);
  line-height: var(--leading-tight);
}

.cta-hook-btn {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  padding: 11px 28px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition);
  margin-bottom: var(--sp-3);
}

.cta-hook-btn:hover {
  background: var(--blue-mid);
}

.cta-hook-sub {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}


/* ================================================================
   16. COOKIE BANNER
   ================================================================ */

/* 配置場所: </body> 直前
   localStorage キー: bsri_cookie_consent_v1 */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  z-index: 1000;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-sm);
}

#cookie-banner.hidden {
  display: none;
}

.cookie-text {
  flex: 1;
  line-height: 1.6;
  margin: 0;
}

.cookie-text a {
  color: var(--blue-pale);
  text-decoration: underline;
}

.cookie-btn-accept {
  background: var(--blue);
  color: var(--white);
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background var(--transition);
}

.cookie-btn-accept:hover {
  background: var(--blue-mid);
}


/* ================================================================
   17. ARTICLE GRID（LP記事一覧）
   ================================================================ */

#articles {
  background: var(--bg-soft);
}

/* フィルタータブ */
.filter-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.filter-btn {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}

.filter-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.filter-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  font-weight: 700;
}

/* 記事カードグリッド */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-10);
}

.article-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: var(--sp-6);
  text-decoration: none;
  color: var(--text);
  display: block;
  transition: box-shadow var(--transition), transform var(--transition);
}

@media (hover: hover) {
  .article-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
  }
}

.article-card.hidden {
  display: none;
}

.article-card h3 {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 10px;
}

.article-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* 記事一覧下のCTAバナー */
.articles-cta {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--sp-6) 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.articles-cta p {
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}

.articles-cta p em {
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
}


/* ================================================================
   18. FAQ
   ================================================================ */

#faq {
  background: var(--white);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-q {
  background: var(--bg-soft);
  padding: 18px var(--sp-6);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.faq-q::before {
  content: "Q";
  background: var(--blue);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  min-width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  flex-shrink: 0;
}

.faq-q::after {
  content: "▼";
  font-size: var(--text-2xs);
  color: var(--muted);
  margin-left: auto;
  padding-left: var(--sp-4);
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform var(--transition);
}

details[open] .faq-q::after {
  transform: rotate(180deg);
}

.faq-a {
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.faq-a::before {
  content: "A";
  background: var(--border);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  min-width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  flex-shrink: 0;
}

.faq-a p {
  flex: 1;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
  margin: 0;
}


/* ================================================================
   19. ABOUT / WHY（このサイトについて）
   ================================================================ */

#about {
  background: var(--bg-soft);
}

.about-lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  padding: 28px var(--sp-8);
  background: var(--white);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-bottom: 36px;
}

.about-lead strong {
  color: var(--navy);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.why-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px var(--sp-6);
  border-top: 3px solid var(--blue);
}

/* 大きい数字（"01" "02" 等） */
.why-num {
  font-size: 30px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
  margin-bottom: var(--sp-3);
  font-family: Georgia, serif;
}

.why-card h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: 10px;
}

.why-card p {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-base);
}

.about-cta {
  text-align: center;
  padding-top: var(--sp-2);
}


/* ================================================================
   20. CONTACT FORM（お問い合わせ・LP）
   ================================================================ */

#contact {
  background: var(--navy);
}

#contact .section-label {
  color: var(--blue-pale);
}

#contact .section-title {
  color: var(--white);
}

#contact .section-lead {
  color: rgba(255, 255, 255, 0.72);
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-12);
  align-items: start;
}

.contact-form-box h3,
.contact-line-box h3 {
  color: var(--white);
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--sp-5);
}

/* フォームグループ（ラベル + インプット） */
.form-group {
  margin-bottom: var(--sp-4);
}

.form-group label {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: var(--text-base);
  color: var(--white);
  font-family: inherit;
  transition: border-color var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue-accent);
  background: rgba(255, 255, 255, 0.12);
}

.form-group textarea {
  height: 130px;
  resize: vertical;
}

.form-note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.42);
  margin-top: 10px;
}

.form-success {
  display: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  text-align: center;
}

.form-success p {
  color: var(--white);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.form-error {
  display: none;
  font-size: var(--text-sm);
  color: #fca5a5;
  margin-top: 10px;
}

/* LINEカード */
.line-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 28px var(--sp-6);
  text-align: center;
}

.line-icon {
  font-size: 36px;
  margin-bottom: var(--sp-4);
}

.line-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.68);
  line-height: var(--leading-base);
  margin-bottom: var(--sp-5);
}


/* ================================================================
   21. FLOAT CTA（固定ボタン）
   ================================================================ */

.float-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--blue);
  color: var(--white);
  padding: 14px var(--sp-6);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-float);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition-slow), transform var(--transition-slow), background var(--transition);
}

.float-cta.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.float-cta:hover {
  background: var(--blue-mid);
}


/* ================================================================
   22. FOOTER
   ================================================================ */

footer {
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
}

/* フッター内ロゴ（横型白SVG推奨）
   viewBox 238×70 → height 32px で width≈109px
   <img src="/assets/img/logos/bsri-horz-inv-white.svg" class="footer-logo" alt="BSRI"> */
.footer-logo {
  height: 32px;
  width: auto;
  opacity: 0.75;
  margin: 0 auto var(--sp-4);
  display: block;
  transition: opacity var(--transition);
}

.footer-logo:hover {
  opacity: 1;
}

footer a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

footer a:hover {
  color: var(--white);
}


/* ================================================================
   23. RESPONSIVE
   ================================================================ */

@media (max-width: 640px) {
  /* Section */
  section { padding: var(--sp-10) var(--sp-5); }

  /* Hero */
  #hero { padding: 52px var(--sp-5) 44px; }
  .hero-catch { margin-bottom: var(--sp-4); }
  .hero-sub { font-size: var(--text-base); line-height: 1.85; margin-bottom: 28px; }
  .hero-buttons { gap: 10px; }

  /* Article body */
  .article-body { padding: 28px var(--sp-5); }
  .article-wrap { padding: var(--sp-6) var(--sp-4) var(--sp-8); }

  /* Article grid */
  .article-card { padding: 18px; }
  .section-lead { margin-bottom: var(--sp-6); font-size: 14px; }

  /* FAQ */
  .faq-list { gap: 10px; }

  /* About */
  .about-lead { padding: var(--sp-5) var(--sp-5); }
  .why-grid { gap: 14px; }

  /* Nav */
  nav a:not(.nav-cta) { display: none; }

  /* Float CTA */
  .float-cta { bottom: var(--sp-4); right: var(--sp-4); padding: 12px 18px; font-size: var(--text-sm); }

  /* Cookie Banner */
  #cookie-banner { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

@media (max-width: 720px) {
  .contact-wrapper { grid-template-columns: 1fr; }
}


/* ================================================================
   24. SIGNATURE COMPONENTS（v2.0・BSRIの差別化要素）
   「計算の透明性」をUIで証明するための専用部品。
   ================================================================ */

/* --- 24a. 読了メタ（記事冒頭の「読了◯分 / 更新日」行）---
   配置: .article-meta の直後、本文カードの前後どちらでも可。
   <p class="reading-meta"><span>読了 約5分</span><span>2026-06-22 更新</span></p> */
.reading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--sp-5);
  font-variant-numeric: tabular-nums;
}

.reading-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.reading-meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: var(--radius-circle);
  background: var(--border);
  margin-right: 5px;
}

/* --- 24b. 前提開示ボックス（シグネチャー）---
   計上コスト・劣化モデル・IRR種別・時点を固定書式で開示する。
   ブランド思想「透明性が戦略」「論算＝倫理×財務」のUI実装。試算記事に常設を目指す。
   <div class="assumption-box">
     <p class="assumption-label">前提・計算条件</p>
     <ul>
       <li>計上コスト：Agg費・O&M・固定資産税・保険・廃棄費を反映</li>
       <li>劣化モデル：線形（LFP）</li>
       <li>指標：プロジェクトIRR（エクイティIRRではない）</li>
       <li>時点：2026年6月。制度・単価は変動する</li>
     </ul>
   </div> */
.assumption-box {
  background: var(--brass-soft);
  border: 1px solid var(--brass-line);
  border-left: 4px solid var(--brass);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-6) 0;
  font-size: var(--text-sm);
}

.assumption-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f5828;   /* 淡地#f3ecdb上でAAを満たすよう濃いめの真鍮 */
  margin-bottom: var(--sp-3) !important;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.assumption-label::before {
  content: "◆";
  font-size: 9px;
}

.assumption-box ul {
  margin: 0 !important;
  padding-left: 1.2em;
}

.assumption-box li {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-base);
  color: #4d463a;
  margin-bottom: 6px !important;
}

.assumption-box li:last-child { margin-bottom: 0 !important; }

.assumption-box li strong { color: #6b5a33; }

/* --- 24c. 統一比較表（製品・手法・IRRシナリオを毎回同じ書式で）---
   一貫した書式そのものが「中立な評価機関」の記号になる。
   <div class="ds-table-wrap"><table class="ds-table">...</table></div>
   横スクロール対応のため必ず .ds-table-wrap で囲む。 */
.ds-table-wrap {
  overflow-x: auto;
  margin: var(--sp-6) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.ds-table thead th {
  background: var(--forest);
  color: var(--white);
  font-weight: 700;
  text-align: left;
  padding: 12px var(--sp-4);
  white-space: nowrap;
}

.ds-table th[scope="row"] {
  text-align: left;
  font-weight: 700;
  color: var(--navy);
  background: var(--green-soft);
  white-space: nowrap;
}

.ds-table td,
.ds-table tbody th {
  padding: 11px var(--sp-4);
  border-top: 1px solid var(--border);
  line-height: var(--leading-tight);
  vertical-align: top;
}

.ds-table tbody tr:nth-child(even) td {
  background: #faf9f5;
}

/* 数値列は右寄せにしたい場合 .num-col を th/td に付与（等幅数値フォント） */
.ds-table .num-col { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ds-table { font-size: var(--text-xs); }
  .ds-table thead th,
  .ds-table td { padding: 9px 10px; }
}


/* ================================================================
   25. レスポンシブ補助（フロー図・2列レイアウト）
   横並びが狭い画面で「2段」に割れて読みにくくなるのを防ぐ。
   新規はここの .flow-chain / .ds-cols-2 を使い、記事個別に再定義しない。
   ================================================================ */

/* --- フロー図（例：開発者 → 売買 → 投資家）---
   <div class="flow-chain">
     <div><div class="flow-node">開発者（SIer）</div><div class="flow-label">建設・系統連系</div></div>
     <div class="flow-arrow">→</div>
     <div><div class="flow-node highlight">売買</div><div class="flow-label">完成渡し</div></div>
     <div class="flow-arrow">→</div>
     <div><div class="flow-node buyer">投資家（買主）</div><div class="flow-label">運用・収益受取</div></div>
   </div> */
.flow-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: var(--sp-6) 0; }
.flow-node  { background: var(--forest); color: var(--white); padding: 10px 16px; font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-sm); text-align: center; }
.flow-node.highlight { background: var(--green); }
.flow-node.buyer     { background: var(--color-danger); }
.flow-arrow { color: var(--muted); font-size: 18px; padding: 0 var(--sp-2); flex-shrink: 0; }
.flow-label { font-size: var(--text-2xs); color: var(--muted); text-align: center; margin-top: 4px; }

/* --- レスポンシブ列ユーティリティ（中身が不均衡でも崩れない・幅に応じて自動で列数が減る）---
   auto-fit なのでブレークポイント不要・あらゆる幅で破綻しない。新規はこれを使い、
   記事個別にグリッドCSSや @media を書かない（規格化）。 */
.ds-cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-5); margin: var(--sp-6) 0; }
.ds-cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-4); margin: var(--sp-6) 0; }

/* --- 表のモバイル規格化（全テーブル共通・記事個別の対応を不要にする）---
   狭い画面では表を「横スクロールできるブロック」にし、列が潰れて読めなくなる/はみ出すのを防ぐ。
   記事側で表ごとに wrapper や @media を書かなくても、ここで全テーブルが自動対応する（再発防止）。
   GitHub等で実績のある手法（display:block + width:max-content + overflow-x）。 */
@media (max-width: 640px) {
  .article-body table {
    display: block;
    width: auto;            /* max-contentにするとブロックごと画面幅を超えてページが横スクロールするため auto */
    max-width: 100%;        /* ブロックは画面内に収め、はみ出す表は内部で横スクロール */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;    /* セルを潰して2文字改行させない */
  }

  /* フロー：縦並び＋矢印を下向きに（→の前で改行されたように縦可変・2段割れ解消） */
  .flow-chain { flex-direction: column !important; align-items: stretch !important; gap: var(--sp-1) !important; }
  .flow-node  { width: 100%; }
  .flow-arrow { transform: rotate(90deg); padding: var(--sp-1) 0 !important; }

  /* 既存記事の2列・多列グリッドを狭い画面で1列に縦積み（不均衡崩れ・横詰まり解消）。
     新規は .ds-cols-* を使うが、過去のクラス名も安全網として一括対応する。 */
  .ds-cols-2, .ds-cols-3,
  .criteria-grid, .strategy-grid, .pros-cons, .pattern-grid, .region-grid,
  .model-grid, .data-row, .compare-grid, .two-col { grid-template-columns: 1fr !important; }
}

/* ユーティリティ：.sp-br はPCでは非表示（スマホ専用の <br class="sp-br"> 用） */
.sp-br { display: none; }
@media (max-width: 600px) { .sp-br { display: inline; } }
/* ユーティリティ：.pc-br はスマホでは非表示（PC専用の <br class="pc-br"> 用） */
.pc-br { display: inline; }
@media (max-width: 600px) { .pc-br { display: none; } }
/* ユーティリティ：.sp-center はスマホでのみ中央揃え（<p class="sp-center"> 等・iPhone中央揃え用） */
@media (max-width: 600px) { .sp-center { text-align: center; } }