@charset "UTF-8";   /* サーバーが文字コードなしで返すため、CSSをUTF-8として読ませる（設計意図SSOT §26） */
/* ─── CSS変数（トークン） ───
   レポートのページ（styles.css の前に読み込む）と、OG画像のひな形（_tools/og-card.php）が使う。変数の決まりはこのファイルにまとめる（設計意図SSOT §34） */
:root {
  --navy: #1E1B19;
  --hero-img: url('sample-facility.png'); /* テーマ写真のフォールバック。各要素の style 属性で上書き */
  --slate: #5C4F47;
  --light: #F8F7F5;
  --white: #FFFFFF;
  --border: #E5DDD6;
  --accent: #E9450A;
  --accent-dark: #C23709;
  --red: #B91C1C;
  --brand: #594F46;
  --brand-dark: #3D342D;
  --brand-light: #FAF8F5;
  --green: #16a34a;

  --shell-acc:   #E9450A;
  --shell-blu:   #1E4A9E;
  --shell-beige: #F7F2E8;
  --shell-g:     linear-gradient(90deg,  var(--shell-acc) 0%, var(--shell-acc) 40%, var(--shell-blu) 100%);
  --shell-g135:  linear-gradient(135deg, var(--shell-acc) 0%, var(--shell-acc) 40%, var(--shell-blu) 100%);
  --mu:          #888888;
  --mu-light:    #CFC6BE; /* 薄いグレーの文字。飾りの大きな英字など（設計意図SSOT §23） */
  --bd:          rgba(0,0,0,0.07);
  --muted:       #94A3B8;
  --warning:     #92400e;
  --warning-bg:  #fffbeb;
  --warning-bdr: #fde68a;
  --sem-danger:  #dc2626;
  --sem-warn:    #f59e0b;
  --sem-ok:      #16a34a;
  --sem-danger-bg: #fee2e2;
  --sem-ok-bg:   #f0fdf4;
  --sem-ok-mid:  #dcfce7;
  --sem-ok-bdr:  #bbf7d0;

  --lnav-w:    164px;
  --layout-max: 1200px; /* 上段バー・フッターの中身の最大幅。本文の中身の最大幅（--content-max）の基準 */
  --logo-h:    30px;  /* ロゴ（横組み）の高さ。ヘッダー（設計意図SSOT §29） */
  --logo-h-sm: 24px;  /* ロゴの高さ（小）。スマホ幅のヘッダーとフッター（§29） */
  --main-gutter: 40px;  /* 本文エリアの左右の余白。帯（背景つきセクション）はこの分だけ左右に背景を広げる */
  --content-max: calc(var(--layout-max) - var(--lnav-w) - var(--main-gutter) * 2); /* 本文の中身の最大幅（956px）。左寄せ */
  --band-pad-end-min: var(--main-gutter); /* 帯の右余白の下限。右端の固定目次があるページでは目次ぶん広げる */
  --aside-nav-w: 140px; /* 右端に固定表示される目次（.report-aside-nav）の幅 */
  --highlight-marker: #FDE047;

  /* ─── 角丸スケール（2026-09-13統一。個別に生値を書かずここを参照する） ─── */
  --radius-xs:     4px;   /* 小バッジ・細い枠線・タグ */
  --radius-sm:     8px;   /* カード・ボックス標準 */
  --radius-md:     12px;  /* 大きめのカード・サムネイル */
  --radius-lg:     20px;  /* ヒーロー級の大型カード */
  --radius-pill:   9999px; /* 横長のピル・カプセル型バッジ */
  --radius-circle: 50%;   /* 正方形要素を円形にする（アイコン・アバター等） */

  /* ─── 文字サイズの基本スケール（2026-09-24。数値を直接書かずここを参照する。役割の定義は設計意図SSOT §13） ─── */
  --text-xs:   12px; /* 最小。補足・メタ情報・バッジ・ナビ・番号バッジ */
  --text-sm:   14px; /* 中間のテキスト（フォーム等） */
  --text-base: 16px; /* 標準本文（body）。説明文・カード本文・リスト項目の名前 */
  --text-lg:   18px; /* 小見出し */
  --text-xl:   20px; /* 中見出し */

  /* コクヨ「マガジン」参考：見出しと本文の差を明確に付ける比率（H1≒本文の3倍、H2≒2倍） */
  --text-h1: 36px;
  --text-h2: 24px;
  --text-display: 56px; /* 表示用の大きな字（Hubの節の英字など、飾りの文字。設計意図SSOT §23） */
  --text-claim: 30px; /* 各節の見出し（グラフの横に置く主張。.graphic-right h4。設計意図SSOT §24 ルール1） */
  --text-h1-sp: 28px; /* スマホ幅（640px以下）のH1。H1を1段小さくする（設計意図SSOT §24 ルール3） */
  --text-meter: clamp(var(--text-lg), 6.5vw, var(--text-h1)); /* ⑤試算の結果の金額（メーター）。幅が狭いほど小さくして、9桁まで1行に収める（設計意図SSOT §78 ルール6） */

  /* ─── 書体（2026-09-26。書体は Noto Sans JP だけ。数字も同じ書体。ルールB RULE 03・設計意図SSOT §27 追記2） ─── */
  --font-body: 'Noto Sans JP', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;

  /* ─── 余白の基本スケール（2026-09-25。診断ツールの作り直しで追加。新しく書く余白はここを参照する。設計意図SSOT「⑥診断コンポーネント」画面の部品） ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;   /* ここから下は、大きな帯・節の余白（2026-09-26。今使っている大きさだけ。設計意図SSOT §41） */
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─── 動きの時間と速さの変化（2026-09-25。transition・animation はここを参照する。設計意図SSOT §24） ─── */
  --dur-instant:  .1s;  /* 押したときの反応 */
  --dur-fast:     .15s; /* ホバーの色・背景 */
  --dur-base:     .2s;  /* 浮き上がり・影・小さな移動 */
  --dur-moderate: .3s;
  --dur-slow:     .4s;  /* 表示の切り替え（フェード） */
  --dur-slower:   .6s;  /* 大きな表示の切り替え */
  --dur-bar:      .9s;  /* グラフの棒が伸びる */
  --dur-blink:    .7s;  /* 文字入力のカーソルの点滅 */
  --dur-reduced:  .01ms; /* 「動きを減らす」設定のときの時間（0 にしない。動きの終わりを合図にする処理が動くように。設計意図SSOT §38） */
  --dur-spin:     .8s;  /* 読み込み中の回転 */
  --ease-default:  ease;
  --ease-in-out:   ease-in-out;
  --ease-linear:   linear;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── 半透明の黒と白（2026-09-26。影・線・暗い背景の上の文字に使う。rgba() を直接書かずここを参照する。設計意図SSOT §26） ─── */
  --black-a05: rgba(0, 0, 0, .05);
  --black-a10: rgba(0, 0, 0, .1);
  --black-a15: rgba(0, 0, 0, .15);
  --black-a45: rgba(0, 0, 0, .45);   /* 写真の上の大きな数字の影（OG画像のひな形。設計意図SSOT §34） */
  --white-a00: rgba(255, 255, 255, 0);   /* 白へ消えるグラデーションの端 */
  --white-a08: rgba(255, 255, 255, .08);
  --white-a15: rgba(255, 255, 255, .15);
  --white-a25: rgba(255, 255, 255, .25);
  --white-a30: rgba(255, 255, 255, .3);
  --white-a50: rgba(255, 255, 255, .5);
  --white-a70: rgba(255, 255, 255, .7);
  --white-a85: rgba(255, 255, 255, .85);
  --white-a90: rgba(255, 255, 255, .9);
}

/* 768px以下は、本文の左右の余白と帯を広げる量を同じ16pxにする（旧：余白0・帯は40px広げて右にはみ出していた。設計意図SSOT §26） */
@media (max-width: 768px) {
  :root { --main-gutter: var(--space-4); }
}