/* ============================================================
   Educare レビューページ 共通デザイン（正本）
   2026-07-23 制定。敏指示「基本デザインは全ページで合わせる」

   骨格・タイポグラフィ・部品は加藤ゼミ shukugakai-forecast-20260722 の
   デザイン文法に揃えている。**色だけは揃えない** — #4652A1 は加藤ゼミの
   ブランド色であり、Educare 資料に載せるのは帰属混入（事業部サイロ違反）。
   Educare は educarelog.net と同じ青系で通す。

   使い方:
     <link rel="stylesheet" href="/_assets/review.css">
   ページ固有の追加は、この link の**後ろ**に <style> を置いて書く。
   ここにある部品（callout / card / table / pill / issue / toc）は
   再発明せず、そのまま使うこと。
   ============================================================ */

:root{
  --primary:#2563eb; --primary-dark:#1e40af; --primary-light:#60a5fa;
  --accent:#b45309; --danger:#b91c1c; --success:#0e8a5f;
  --primary-pale:#eaf1fe; --accent-pale:#fdf3e3; --danger-pale:#fdecec; --success-pale:#e7f6ef;
  --text:#1a2333; --sub:#4b5872; --muted:#8a8f9e;
  --border:#dde3ee; --bg:#ffffff; --bg-sub:#f7f9fc; --surface:#fff;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium","Meiryo",sans-serif;
  font-size:16px; line-height:1.9; letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden; /* 全幅ヘッダーの負マージンが生むスクロールバー幅の横揺れを抑える */
}
.wrap{max-width:960px; margin:0 auto; padding:0 24px 96px}

/* ── ヘッダー ─────────────────────────────────
   加藤ゼミ版と同じ「全幅ぶち抜き＋中身は本文と同じ器で左揃え」に統一する。
   角丸カード型・ピル型タグは廃止（2026-07-23 敏指示「装飾も完全に揃える」）。

   受ける書き方は2通り:
     A) <header> … </header> を .wrap の外に置く（加藤版と同じ形）
     B) <header class="hero"> … </header> を .wrap の中に置く（Educare旧来の形）
   B は親が中央寄せである性質を使い、負マージンで画面端まで引き伸ばす。 */
header{background:linear-gradient(160deg,#1e3a8a 0%,#2563eb 58%,#3b82f6 100%); color:#fff;
  padding:56px 0 48px; margin-bottom:56px; border-radius:0}
header .wrap{padding-bottom:0}
/* 内側に .wrap を持たないヘッダーでも、本文と左端が揃うように直接の子を同じ器に入れる。 */
header > :not(.wrap){display:block; box-sizing:border-box; width:100%; max-width:960px;
  margin-left:auto !important; margin-right:auto !important; padding-left:24px !important; padding-right:24px !important}
/* ↑ !important の理由（2026-09-06 敏「Educare の企画書が全部ずれている」）: 後続の header .kicker{margin:0…} と、
   各ページが見出しに直書きする style="margin:0 …" が margin-left/right:auto を打ち消し、kicker は全ページ・h1/p は9ページで
   左端に貼り付いていた。ページ側を全部直すより、器の中央寄せをここで勝たせる方が確実（ページ固有の上下 margin は保持）。 */

/* B) .wrap の内側にあるヘッダーを画面端まで引き伸ばす。
   .hero(数値ヒーロー)にも一致してしまうため、背景・文字色をここで明示して詳細度で勝たせる。
   中身の左端を本文と揃えるのは padding で行う（子要素への margin:auto は
   header.hero h1 等の個別指定に詳細度で負けるため使わない）。 */
header.hero{background:linear-gradient(160deg,#1e3a8a 0%,#2563eb 58%,#3b82f6 100%);
  color:#fff; border:0; border-radius:0;
  margin:0 calc(-50vw + 50%) 56px;
  padding:56px max(24px, calc(50vw - 456px)) 48px}
header.hero .label,header.hero .range,header.hero .note{color:rgba(255,255,255,.9)}

/* 見出し・前置き・脚注（加藤版の寸法に合わせる） */
header h1,header.hero h1{font-size:32px; line-height:1.5; margin:0 0 18px; font-weight:700;
  letter-spacing:.01em; color:#fff}
header .lead,header.hero .lead{font-size:15px; line-height:1.9; opacity:.93; margin:0; max-width:44em;
  color:#fff; font-weight:400}
header .lead b,header.hero .lead b{font-weight:700}
header .meta,header.hero .meta{margin-top:24px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.22); font-size:13px; opacity:.8}
/* 冠ラベルは加藤版と同じ「素の文字」。ピル（背景・枠・角丸）にはしない。 */
header .eyebrow,header .tag,header .kicker,header.hero .eyebrow,header.hero .tag,header.hero .kicker{
  display:block; font-size:13px; letter-spacing:.18em; opacity:.85; font-weight:400; color:#fff;
  margin:0 0 14px; background:none; border:0; border-radius:0; padding:0}
/* 濃色ヘッダーの中では、本文用の淡色指定（.sub/.src 等）が読めなくなる。白側へ寄せる。 */
header .sub,header .src,header .muted,header .note,header .label,header .hero-sub,
header .hero-meta,header .conf,header small{color:rgba(255,255,255,.85)}
/* 濃色ヘッダー上の <code> は、明るい既定背景のままだと白文字が沈んで読めない。 */
header code,header pre{background:rgba(255,255,255,.18); color:#fff}
header a{color:#fff}

/* ── 見出し・本文 ───────────────────────────── */
h2{font-size:22px; font-weight:700; margin:56px 0 20px; padding:0 0 12px;
  border-bottom:2px solid var(--primary); border-left:0; letter-spacing:.01em; line-height:1.5}
h3{font-size:17px; font-weight:700; margin:36px 0 12px; color:var(--primary-dark)}
h4{font-size:15px; font-weight:700; margin:24px 0 8px; color:var(--text)}
p{margin:0 0 16px}
.sub,.src{color:var(--sub); font-size:14.5px}
.src{font-size:13px; color:var(--muted); margin-top:4px}
.kicker{font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--primary); margin-bottom:6px}
.lead{font-size:15px; line-height:1.95}
.num{font-variant-numeric:tabular-nums}
.big{font-size:26px; font-weight:700; color:var(--primary-dark)}
ul,ol{margin:0 0 16px; padding-left:1.5em}
li{margin-bottom:9px}
strong,b{font-weight:700}
a{color:var(--primary-dark)}

/* ── 数値ヒーロー（結論を1枚で見せる） ─────────── */
.hero{background:var(--bg-sub); border:1px solid var(--border); border-radius:14px;
  padding:36px 32px; margin:0 0 48px; color:var(--text)}
.hero .label{font-size:13px; color:var(--sub); letter-spacing:.08em; margin:0 0 8px}
.hero .num{font-size:52px; font-weight:700; line-height:1.15; color:var(--primary);
  letter-spacing:.01em; margin:0}
.hero .num .unit{font-size:22px; font-weight:500; margin-left:4px}
.hero .range{font-size:14px; color:var(--sub); margin:10px 0 0}
.hero .note{font-size:14px; color:var(--sub); margin:18px 0 0; padding-top:16px;
  border-top:1px dashed var(--border)}

/* ── 表 ───────────────────────────────────── */
table{width:100%; border-collapse:collapse; margin:20px 0 8px; font-size:14.5px;
  font-feature-settings:"palt" 1; background:#fff}
/* Educare のレビュー資料は文章主体の表が多いので既定は左寄せ。
   数値列だけ .num を付けて右寄せにする（加藤ゼミ版は数値表主体なので既定が右寄せ）。 */
th,td{padding:11px 12px; border:0; border-bottom:1px solid var(--border); text-align:left;
  vertical-align:top; line-height:1.8}
th.num,td.num,th.r,td.r{text-align:right}
thead th,tr:first-child th{background:var(--bg-sub); color:var(--sub); font-weight:700; font-size:13px;
  border-bottom:2px solid var(--border); text-align:left}
tbody tr:hover{background:#fafbff}
tr:nth-child(even) td{background:transparent}
tr.hl td{background:var(--primary-pale); font-weight:700}
td.num{font-variant-numeric:tabular-nums}
.tblwrap,.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
caption{caption-side:bottom; font-size:13px; color:var(--muted); text-align:left; padding-top:10px}

/* ── コールアウト ─────────────────────────────
   kato系(warn/danger) と educare系(blue/green/amber/red) の両方を受ける。 */
.callout{border-left:4px solid var(--primary); background:var(--bg-sub);
  padding:18px 22px; margin:24px 0; border-radius:0 8px 8px 0; font-size:14.5px}
.callout p:last-child,.callout ul:last-child,.callout ol:last-child{margin-bottom:0}
.callout .t,.callout b.title{display:block; font-weight:700; margin:0 0 8px; font-size:15px}
.callout.blue{border-left-color:var(--primary); background:var(--primary-pale)}
.callout.warn,.callout.amber{border-left-color:var(--accent); background:var(--accent-pale)}
.callout.danger,.callout.red{border-left-color:var(--danger); background:var(--danger-pale)}
.callout.green{border-left-color:var(--success); background:var(--success-pale)}

/* ── カード ───────────────────────────────── */
.card{border:1px solid var(--border); border-radius:12px; padding:20px 22px; background:var(--surface);
  margin:18px 0}
.card .k{font-size:13px; color:var(--sub); margin:0 0 6px; letter-spacing:.04em}
.card .v{font-size:28px; font-weight:700; color:var(--primary); margin:0; font-variant-numeric:tabular-nums}
.card .d{font-size:13.5px; color:var(--sub); margin:8px 0 0; line-height:1.75}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:22px 0}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:22px 0}

/* ── ラベル（fact / inference / unknown を峻別する軍律の可視化） ── */
.tag,.pill{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:99px;
  letter-spacing:.06em; vertical-align:1px; margin-right:6px; white-space:nowrap}
.tag.fact,.pill.fact{background:var(--success-pale); color:#1f6b41}
.tag.inf,.pill.inf{background:var(--accent-pale); color:#8a5808}
.tag.unk,.pill.unk{background:#f0f0f3; color:#6a6a72}
.tag.gap,.pill.gap{background:var(--danger-pale); color:var(--danger)}

/* ── 課題ブロック ─────────────────────────── */
.issue{background:#fff; border:1px solid var(--border); border-left:4px solid var(--danger);
  border-radius:0 8px 8px 0; padding:20px 22px; margin:20px 0}
.issue.mid{border-left-color:var(--accent)}
.issue.low{border-left-color:#94a3b8}
.issue h4{margin:0 0 8px; font-size:15.5px; font-weight:700; color:var(--text)}
.issue .lv{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:#fff;
  background:var(--danger); border-radius:5px; padding:1px 8px; margin-right:8px; vertical-align:2px}
.issue.mid .lv{background:var(--accent)}
.issue.low .lv{background:#94a3b8}
.issue p{margin:0 0 8px; font-size:14px}
.issue .fix{background:var(--primary-pale); border-radius:8px; padding:10px 14px; font-size:13.5px; margin-top:10px}

/* ── 目次 ─────────────────────────────────── */
.toc{background:var(--bg-sub); border:1px solid var(--border); border-radius:12px;
  padding:22px 26px; font-size:14px; margin:24px 0}
.toc a{color:var(--primary-dark); text-decoration:none; font-weight:500}
.toc a:hover{text-decoration:underline}
.toc ol{margin:0 0 0 20px}
.toc li{margin-bottom:4px}

/* ── コード ───────────────────────────────── */
pre{background:#0f172a; color:#e2e8f0; border-radius:12px; padding:20px 22px; overflow-x:auto;
  font-size:12.5px; line-height:1.75; margin:16px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:0}
code{background:var(--primary-pale); padding:1px 6px; border-radius:4px; font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:0}
pre code{background:none; padding:0; color:inherit; font-size:12.5px}

/* ── 図版 ─────────────────────────────────── */
svg,img{display:block; max-width:100%; height:auto}
.legend{display:flex; flex-wrap:wrap; gap:20px; margin:0 0 16px; font-size:13.5px; color:var(--sub)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:12px; height:12px; border-radius:3px; display:inline-block}
.bars{margin:20px 0}
.bar-row{display:grid; grid-template-columns:132px 1fr 62px; align-items:center; gap:12px;
  margin-bottom:9px; font-size:14px}
.bar-row .track{background:var(--bg-sub); border-radius:4px; height:22px; overflow:hidden}
.bar-row .fill{height:100%; border-radius:0 4px 4px 0; background:var(--primary)}
.bar-row .v{text-align:right; font-variant-numeric:tabular-nums; color:var(--sub)}

footer{margin-top:72px; padding-top:24px; border-top:1px solid var(--border);
  font-size:13px; color:var(--muted); line-height:2}
footer a{color:var(--primary); text-decoration:none; word-break:break-all}

@media(max-width:640px){
  body{font-size:15px}
  header{padding:40px 0 34px; margin-bottom:40px}
  header.hero{padding:32px 24px}
  header h1{font-size:24px}
  h2{font-size:19px; margin:44px 0 16px}
  .hero{padding:26px 20px}
  .hero .num{font-size:40px}
  .bar-row{grid-template-columns:96px 1fr 54px; font-size:13px}
  .wrap{padding:0 18px 72px}
}