/*
 * 蓄電池総研（chikudensoken.jp） 自治体LP サブテーマ
 * version: 1.0.0 | 2026-07-06
 *
 * 【位置づけ】design-system.css（共有エンジン）の上に読み込む自治体向けサブテーマ。
 *   戦略の正本 → marketing/knowledge/design_strategy.md 「9. 自治体LP（chikyuu-ga-matterun-da）サブテーマ」
 *   判断ロジック：投資家向けDS v2.0の「冷たさ＝中立の証明」はこのペルソナ（自治体職員・田中さん）には
 *   逆効果。ヘッダー/フッター/タイポグラフィ/部品アーキテクチャ（.ds-table等）はDSを継承しつつ、
 *   ①行政文脈で信頼記号になる二次アクセント（--gov-blue）②稟議・印刷を見据えた部品③
 *   人格的トーンを保つコピー、の3点だけをこのファイルで足す。
 *
 * 読み込み順序（必須）: design-system.css → chikyuu-theme.css
 * このファイルは自治体LP配下（chikyuu-ga-matterun-da/*）のページにのみ読み込む。
 * 本体LP・記事には絶対にリンクしない（投資家向けDSへの影響ゼロを担保）。
 *
 * 構成:
 *   1. Tokens              — 二次アクセント（行政ブルー）
 *   2. Hero Buttons Grid    — トップの4ボタン
 *   3. Pattern Cards        — 補助金活用パターン3枚
 *   4. Diff Badge / Sit Tag — 難易度・状況バッジ
 *   5. Subsidy Table Tags   — 補助金マップのタグ色
 *   6. Calendar             — 補助金カレンダー
 *   7. Download Card        — 資料DLカード
 *   8. Contact Form (Light) — 自治体LP用の明るいフォーム
 *   9. Case Page            — 事例ページ（hero/結果バー/タイムライン/引用/表）
 *  10. Glossary             — 用語解説ボックス
 *  11. Deadline Cell        — 表内の締切強調
 *  12. Guide Document       — 印刷用ガイド
 *  13. QA (static)          — 印刷向けQ&A（アコーディオンなし）
 */

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

:root {
  /* 行政ブルー：主役の深緑を置き換えない二次アクセント。
     補助金カテゴリタグ・カレンダー・統計バーなど「識別」用途に限定使用する。
     .go.jp/.lg.jp系サイトで信頼記号として定着している彩度域を踏襲。 */
  --gov-blue:      #2f5fa8;
  --gov-blue-soft: #eaf1fa;
  --gov-blue-line: #cfe0f2;
  --gov-blue-hover:#274f8c;
}


/* ================================================================
   2. HERO BUTTONS GRID（トップページ・4ボタン）
   ================================================================ */

.jichitai-hero-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  max-width: 560px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .jichitai-hero-buttons { grid-template-columns: 1fr; max-width: 320px; }
}
.jichitai-hero-buttons .btn-primary,
.jichitai-hero-buttons .btn-outline {
  display: block;
  text-align: center;
  padding: 14px var(--sp-4);
  font-size: var(--text-sm);
}


/* ================================================================
   3. PATTERN CARDS（補助金活用パターン3枚）
   ================================================================ */

.pattern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }

.pattern-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px var(--sp-6); display: flex; flex-direction: column;
}
.pattern-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-3); }
.pattern-num { font-size: var(--text-2xs); letter-spacing: 0.2em; color: var(--muted); font-weight: 700; font-family: var(--font-num); }
.pattern-card h3 { font-size: var(--text-lg); font-weight: 700; color: var(--forest); margin-bottom: var(--sp-2); line-height: 1.4; }
.pattern-facility { font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--sp-4); }
.pattern-stats { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.pattern-stats .stat-item { text-align: center; }
.pattern-stats .stat-num { font-size: 22px; font-weight: 700; color: var(--forest); line-height: 1.2; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.pattern-stats .stat-label { font-size: var(--text-2xs); color: var(--muted); }
.pattern-card > p { font-size: var(--text-sm); color: var(--muted); line-height: 1.85; flex: 1; margin-bottom: var(--sp-5); }
.pattern-point { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 10px 14px; font-size: var(--text-xs); color: var(--text); line-height: 1.7; margin-bottom: var(--sp-5); }
.pattern-point strong { color: var(--forest); }
.pattern-link {
  display: block; text-align: center; border: 1px solid var(--green); color: var(--green);
  padding: 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700;
  text-decoration: none; transition: background var(--transition), color var(--transition); margin-top: auto;
}
.pattern-link:hover { background: var(--green); color: var(--white); }


/* ================================================================
   4. DIFF BADGE / SIT TAG（難易度・状況バッジ）
   セマンティック色（DS §1 Status Colors）を流用し、色相の系統をDSと統一する。
   ================================================================ */

.diff-badge {
  font-size: var(--text-2xs); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill);
  white-space: nowrap; flex-shrink: 0;
}
.diff-easy { background: var(--green-soft); color: var(--color-success); }
.diff-mid  { background: #fbf3e4;          color: var(--color-warning); }
.diff-hard { background: var(--danger-soft, #f7ece4); color: var(--color-danger); }

.sit-tag {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; padding: 3px 10px;
  border-radius: var(--radius-pill); display: inline-block; margin-bottom: var(--sp-3); white-space: nowrap;
}
.sit-selected   { background: var(--green-soft);    color: var(--color-success); }
.sit-unselected { background: var(--gov-blue-soft); color: var(--gov-blue); }
.sit-renovation { background: #fbf3e4;              color: var(--color-warning); }
.sit-planning   { background: var(--brass-soft);    color: #6f5828; }
.sit-pioneer    { background: var(--gov-blue-soft); color: var(--gov-blue); }


/* ================================================================
   5. SUBSIDY TABLE TAGS（補助金マップのタグ色）
   ================================================================ */

.tag-bcp    { background: #fbf3e4;          color: var(--color-warning); font-size: var(--text-2xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.tag-carbon { background: var(--green-soft); color: var(--color-success); font-size: var(--text-2xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.tag-cost   { background: var(--gov-blue-soft); color: var(--gov-blue); font-size: var(--text-2xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.rate-high  { color: var(--color-success); font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums; }


/* ================================================================
   6. CALENDAR（補助金カレンダー）
   ================================================================ */

.cal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-6); }
@media (max-width: 640px) { .cal-grid { grid-template-columns: repeat(2, 1fr); } }
.cal-month { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3); }
.cal-month-sept { border: 2px solid var(--color-warning); }
.cal-month-label { font-size: var(--text-xs); font-weight: 700; color: var(--forest); margin-bottom: 6px; font-family: var(--font-num); }
.cal-event { font-size: var(--text-2xs); color: var(--muted); line-height: 1.6; padding: 3px 6px; border-radius: var(--radius-sm); margin-bottom: 3px; }
.cal-event.highlight { background: #fbf3e4; color: var(--color-warning); font-weight: 700; }
.cal-event.blue  { background: var(--gov-blue-soft); color: var(--gov-blue); }
.cal-event.green { background: var(--green-soft); color: var(--color-success); }
.cal-note { font-size: var(--text-xs); color: var(--muted); line-height: 1.9; }
.cal-note strong { color: var(--forest); }


/* ================================================================
   7. DOWNLOAD CARD（資料DLカード）
   ================================================================ */

.dl-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg);
  padding: 36px 40px; display: flex; align-items: flex-start; gap: var(--sp-10);
}
@media (max-width: 680px) { .dl-card { flex-direction: column; gap: var(--sp-6); padding: 28px 24px; } }
.dl-cover {
  flex-shrink: 0; width: 120px; height: 160px;
  background: linear-gradient(135deg, var(--forest-2), var(--forest));
  border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-4); text-align: center;
}
.dl-cover-title { font-size: var(--text-2xs); font-weight: 700; color: var(--white); line-height: 1.5; }
.dl-cover-sub { font-size: 10px; color: rgba(255,255,255,0.6); margin-top: var(--sp-2); }
.dl-body { flex: 1; }
.dl-body h3 { font-size: var(--text-xl); font-weight: 700; color: var(--white); margin-bottom: var(--sp-3); line-height: 1.4; }
.dl-body > p { font-size: var(--text-sm); color: rgba(255,255,255,0.7); line-height: 1.85; margin-bottom: var(--sp-5); }
.dl-contents { margin-bottom: var(--sp-6); list-style: none; padding-left: 0; }
.dl-contents li { font-size: var(--text-sm); color: rgba(255,255,255,0.75); line-height: 1.7; padding-left: 20px; position: relative; margin-bottom: 4px; }
.dl-contents li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.dl-note { font-size: var(--text-xs); color: rgba(255,255,255,0.38); margin-top: 10px; }
.btn-dl {
  display: inline-block; background: var(--gold); color: var(--forest); padding: 13px 34px;
  border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 700; text-decoration: none;
  transition: background var(--transition);
}
.btn-dl:hover { background: var(--gold-hover); }


/* ================================================================
   8. CONTACT FORM（自治体LP用・明るいフォーム）
   本体LPの#contactは深緑の暗い面（投資家向けの分析機関トーン）だが、
   自治体LPは「役所の申請フォーム」に近い明るい面のほうが記入の心理的ハードルが低い。
   ================================================================ */

.jichitai-form-box {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px 40px;
}
@media (max-width: 640px) { .jichitai-form-box { padding: 24px 20px; } }
.jichitai-form-box .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .jichitai-form-box .form-row { grid-template-columns: 1fr; } }
.jichitai-form-box .form-group label { color: var(--muted); }
.jichitai-form-box .form-group input,
.jichitai-form-box .form-group select,
.jichitai-form-box .form-group textarea {
  background: var(--white); border: 1px solid var(--border); color: var(--text);
  -webkit-appearance: none; appearance: none;
}
.jichitai-form-box .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235e6b63' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.jichitai-form-box .form-group input:focus,
.jichitai-form-box .form-group select:focus,
.jichitai-form-box .form-group textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); background: var(--white);
}
.jichitai-form-box .form-note { color: var(--muted); }
.jichitai-form-box .form-success { background: var(--green-soft); border: 1px solid var(--green-line); }
.jichitai-form-box .form-success p { color: var(--forest); }


/* ================================================================
   8.5 CTA CARDS（記事末尾の2択CTA：Step1無料相談／Step2詳細）
   DS の .cta-section（フォーム内蔵の単票型）とは別に、自治体記事は
   「無料相談」「詳しく聞く」の2枚カードを使う頻度が高いためここに集約する。
   ================================================================ */

.cta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .cta-cards { grid-template-columns: 1fr; } }
.cta-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px var(--sp-6); text-align: left; display: flex; flex-direction: column; }
.cta-card-label { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.cta-card-label.low  { color: var(--color-success); }
.cta-card-label.high { color: var(--gov-blue); }
.cta-card h3 { font-size: var(--text-md); font-weight: 700; color: var(--forest); margin-bottom: var(--sp-3); line-height: 1.5; }
.cta-card p { font-size: var(--text-sm); color: var(--muted); line-height: 1.75; margin-bottom: var(--sp-5); }
.cta-btn {
  display: block; text-align: center; padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: opacity var(--transition);
  margin-top: auto;
}
.cta-btn.green { background: var(--green); color: var(--white); }
.cta-btn.blue  { background: var(--gov-blue); color: var(--white); }
.cta-btn:hover { opacity: 0.85; }


/* ================================================================
   9. CASE PAGE（事例ページ：hero・結果バー・タイムライン・引用・表）
   ================================================================ */

.case-hero {
  background: linear-gradient(135deg, var(--forest) 0%, #1f5540 100%);
  color: var(--white); padding: 64px var(--sp-6) 56px;
}
.case-hero-inner { max-width: 800px; margin: 0 auto; }
.pattern-meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.pattern-tag { font-size: var(--text-2xs); letter-spacing: 0.2em; color: var(--green-pale); font-weight: 700; }
.case-hero h1 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; line-height: 1.4; margin-bottom: var(--sp-4); }
.case-hero-lead { font-size: var(--text-base); color: rgba(255,255,255,0.78); line-height: 1.9; max-width: 600px; }

.results-bar { background: var(--green); padding: 28px var(--sp-6); }
.results-bar-inner { max-width: 800px; margin: 0 auto; display: flex; gap: var(--sp-10); flex-wrap: wrap; }
.result-item { text-align: center; }
.result-num { font-size: 32px; font-weight: 700; color: var(--white); line-height: 1.1; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.result-unit { font-size: var(--text-sm); color: rgba(255,255,255,0.75); margin-top: 4px; }

.case-body { max-width: 800px; margin: 0 auto; padding: var(--sp-18) var(--sp-6); }
.case-section { margin-bottom: 52px; }
.case-section h2 { font-size: var(--text-xl); font-weight: 700; color: var(--forest); border-left: 4px solid var(--green); padding-left: 14px; margin-bottom: var(--sp-5); }
.case-section p { font-size: var(--text-base); color: var(--text); line-height: 2; margin-bottom: var(--sp-3); }
.case-section p:last-child { margin-bottom: 0; }

.timeline { position: relative; padding-left: var(--sp-6); border-left: 2px solid var(--border); }
.timeline-item { position: relative; margin-bottom: var(--sp-6); }
.timeline-item::before {
  content: ''; position: absolute; left: -31px; top: 6px; width: 12px; height: 12px; border-radius: var(--radius-circle);
  background: var(--green); border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--green);
}
.timeline-month { font-size: var(--text-xs); color: var(--muted); font-weight: 700; margin-bottom: 4px; font-family: var(--font-num); }
.timeline-event { font-size: var(--text-sm); color: var(--text); line-height: 1.7; }
.timeline-note { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }

.quote-box { background: var(--bg-soft); border-radius: var(--radius-lg); padding: 24px 28px; margin: var(--sp-6) 0; position: relative; }
.quote-box::before {
  content: '\201C'; font-size: 60px; color: var(--brass); opacity: 0.28; position: absolute; top: 8px; left: 16px;
  line-height: 1; font-family: Georgia, serif;
}
.quote-box p { font-size: var(--text-base); line-height: 2; color: var(--text); padding-left: var(--sp-6); margin-bottom: var(--sp-2); font-style: italic; }
.quote-attr { font-size: var(--text-xs); color: var(--muted); padding-left: var(--sp-6); }

.points-list { list-style: none; padding: 0; }
.points-list li { font-size: var(--text-sm); line-height: 1.85; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--border); position: relative; color: var(--text); }
.points-list li:last-child { border-bottom: none; }
.points-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; font-size: var(--text-md); }

.facility-item { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--text-xs); color: var(--text); line-height: 1.6; }
.facility-item .fac-name { font-weight: 700; color: var(--forest); display: block; margin-bottom: 2px; }
.facility-item .fac-spec { color: var(--muted); }

/* 実際の自治体事例・参考情報カード（案件別の一次情報リンク） */
.evidence-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; }
.evidence-card.is-example { border-left: 3px solid var(--green); }
.evidence-card .evidence-source { font-size: var(--text-2xs); color: var(--muted); margin-bottom: 6px; }
.evidence-card .evidence-title { font-weight: 700; color: var(--forest); margin-bottom: 6px; font-size: var(--text-base); }
.evidence-card .evidence-desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.8; margin-bottom: 10px; }
.evidence-card a { color: var(--green); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.evidence-card a:hover { text-decoration: underline; }

.btn-back { display: inline-block; color: rgba(255,255,255,0.55); font-size: var(--text-sm); text-decoration: none; margin-top: var(--sp-5); }
.btn-back:hover { color: var(--white); }


/* ================================================================
   10. GLOSSARY（用語解説ボックス）
   ================================================================ */

.glossary { margin-top: var(--sp-10); padding: 24px 28px; background: var(--green-soft); border-radius: var(--radius-lg); border: 1px solid var(--green-line); }
.glossary h4 { font-size: var(--text-sm); color: var(--forest); margin-bottom: var(--sp-4); font-weight: 700; letter-spacing: 0.08em; }
.glossary dl { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--sp-4); }
.glossary dt { font-size: var(--text-sm); font-weight: 700; color: var(--forest); white-space: nowrap; padding-top: 2px; }
.glossary dd { font-size: var(--text-sm); color: #2d3a34; line-height: 1.75; margin: 0; }
@media (max-width: 560px) { .glossary dl { grid-template-columns: 1fr; } .glossary dt { padding-bottom: 0; } }


/* ================================================================
   11. DEADLINE / MILESTONE CELL（表内の締切・達成強調）
   ================================================================ */

.deadline  { color: var(--color-warning); font-weight: 700; }
.milestone { color: var(--color-success); font-weight: 700; }


/* ================================================================
   12. GUIDE DOCUMENT（印刷用ガイド・guide.html専用）
   ================================================================ */

@media screen {
  .print-bar { background: var(--forest); padding: var(--sp-4) var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); position: sticky; top: 0; z-index: 100; }
  .print-bar-left { display: flex; align-items: center; gap: var(--sp-4); }
  .print-bar a { color: rgba(255,255,255,0.6); font-size: var(--text-sm); text-decoration: none; }
  .print-bar a:hover { color: var(--white); }
  .print-bar span { color: rgba(255,255,255,0.4); font-size: var(--text-xs); }
  .btn-print { background: var(--gold); color: var(--forest); border: none; padding: 10px 24px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; cursor: pointer; font-family: inherit; transition: background var(--transition); white-space: nowrap; }
  .btn-print:hover { background: var(--gold-hover); }
  .guide-wrap { max-width: 800px; margin: 32px auto; padding: 0 16px 60px; }
}

.guide-doc { background: var(--white); border-radius: var(--radius-sm); box-shadow: 0 2px 20px rgba(20,53,42,0.1); }
.guide-cover { background: linear-gradient(135deg, var(--forest) 0%, #1f5540 100%); color: var(--white); padding: 56px 56px 48px; border-radius: 4px 4px 0 0; }
.guide-cover-label { font-size: var(--text-2xs); letter-spacing: 0.3em; color: var(--green-pale); margin-bottom: var(--sp-4); }
.guide-cover h1 { font-size: 28px; font-weight: 700; line-height: 1.4; margin-bottom: var(--sp-5); }
.guide-cover-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.7); line-height: 1.9; margin-bottom: var(--sp-8); max-width: 540px; }
.cover-meta { display: flex; gap: var(--sp-6); font-size: var(--text-xs); color: rgba(255,255,255,0.5); flex-wrap: wrap; }
.cover-contents { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,0.15); }
.cover-contents h3 { font-size: var(--text-2xs); letter-spacing: 0.2em; color: var(--green-pale); margin-bottom: var(--sp-3); }
.cover-toc { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--sp-6); }
.cover-toc li { font-size: var(--text-sm); color: rgba(255,255,255,0.75); padding-left: 16px; position: relative; }
.cover-toc li::before { content: '▸'; position: absolute; left: 0; color: var(--gold); font-size: 10px; top: 3px; }

.guide-content { padding: 0 56px 56px; }
@media (max-width: 600px) {
  .guide-cover { padding: 40px 28px 36px; }
  .guide-content { padding: 0 28px 40px; }
  .cover-toc { grid-template-columns: 1fr; }
}

.guide-section { padding: var(--sp-12) 0; border-bottom: 1px solid var(--border); }
.guide-section:last-child { border-bottom: none; }
.guide-section .section-num { font-size: var(--text-2xs); letter-spacing: 0.2em; color: var(--green); font-weight: 700; margin-bottom: var(--sp-2); }
.guide-section h2 { font-size: var(--text-2xl); font-weight: 700; color: var(--forest); margin-bottom: var(--sp-2); line-height: 1.4; }
.guide-section .section-desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.9; margin-bottom: var(--sp-8); }
.guide-section p { font-size: var(--text-sm); line-height: 2; color: var(--text); margin-bottom: var(--sp-3); }

.check-box { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: var(--radius-sm); display: inline-block; vertical-align: middle; }
.check-note { font-size: var(--text-2xs); color: var(--muted); margin-top: 3px; }

.guide-footer { background: var(--forest); padding: var(--sp-8) 56px; border-radius: 0 0 4px 4px; color: rgba(255,255,255,0.55); font-size: var(--text-xs); line-height: 2; }
@media (max-width: 600px) { .guide-footer { padding: 28px 28px; } }
.guide-footer a { color: rgba(255,255,255,0.55); text-decoration: none; }
.guide-footer a:hover { color: var(--white); }

@media print {
  body { background: var(--white); font-size: 11pt; }
  .print-bar, header, .cookie-banner-wrap { display: none !important; }
  .guide-wrap { max-width: 100%; margin: 0; padding: 0; }
  .guide-doc { box-shadow: none; border-radius: 0; }
  .guide-cover { border-radius: 0; page-break-after: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .guide-section { page-break-inside: avoid; }
  @page { margin: 18mm 15mm; size: A4; }
  a { color: var(--text) !important; text-decoration: none !important; }
  .check-box { border: 1.5pt solid #999 !important; }
}


/* ================================================================
   13. QA（印刷向け・アコーディオンなしの静的Q&A）
   DS の .faq-item（アコーディオン）と視覚言語は揃えつつ、<details>を使わない静的版。
   印刷時に閉じた質問の中身が消えるのを防ぐ。
   ================================================================ */

.qa-item { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--sp-3); overflow: hidden; }
.qa-q { background: var(--bg-soft); padding: 14px 18px; font-size: var(--text-md); font-weight: 700; color: var(--forest); display: flex; gap: var(--sp-3); }
.qa-q::before { content: 'Q'; color: var(--green); font-size: var(--text-lg); font-weight: 700; flex-shrink: 0; }
.qa-a { padding: 14px 18px; font-size: var(--text-md); line-height: 1.9; color: var(--text); display: flex; gap: var(--sp-3); }
.qa-a::before { content: 'A'; color: var(--brass); font-size: var(--text-lg); font-weight: 700; flex-shrink: 0; }