/* ============================================================
   style.css — ANCHOR / JMAM × さんとら 共同サービス提案
   設計方針:
   - 各 .page = A4横(297:210)。container-type:inline-size を持ち、
     内部の文字・余白はすべて cqw(ページ幅の%) で指定。
     → 画面でも印刷(A4横)でもレイアウト比率が完全に一致する。
   - BtoB／コンサルティングファーム調。図解中心・余白主役・線は細く。
   - 色は 墨 + 紺(構造/学び) + 橙(体験/熱) の2アクセントのみ。
   ============================================================ */

:root {
  /* 紙と墨 */
  --paper: #fdfdfc;
  --paper-2: #f5f6f7;
  --paper-3: #eef0f2;
  --ink: #12161c;
  --ink-2: #4c545e;
  --ink-3: #8b939c;
  --ink-4: #bcc2c8;
  --line: #e3e6e9;
  --line-2: #eef0f2;

  /* アクセント1：紺（研修・構造・ロジック） */
  --navy: #16345e;
  --navy-2: #2a568c;
  --navy-pale: #eaeff6;

  /* アクセント2：橙（体験・交流・熱量） */
  --amber: #c2712a;
  --amber-2: #d99247;
  --amber-pale: #fbf1e6;

  /* 目的タグ4色 */
  --t-rel: #2a568c;   /* 関係構築 */
  --t-und: #3d7a6a;   /* 相互理解 */
  --t-cre: #c2712a;   /* 発散・創造 */
  --t-fix: #7a4a86;   /* 学びの定着 */

  /* 書体 */
  --mincho: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
          'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --en: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --page-max: 1160px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: #d5d8dc;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ============================ 画面用ツールバー ============================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 52px; display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  background: rgba(18, 22, 28, .94);
  color: #fff;
  backdrop-filter: saturate(1.2) blur(6px);
}
.tb-title { font-size: 12.5px; letter-spacing: .06em; color: #cdd3da; }
.tb-title b { color: #fff; font-weight: 500; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-pos { font-family: var(--en); font-size: 12px; letter-spacing: .14em; color: #98a1ab; }
.btn {
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em;
  color: #e9edf1; background: transparent;
  border: 1px solid rgba(255,255,255,.28); border-radius: 2px;
  padding: 7px 13px; cursor: pointer;
}
.btn:hover { background: rgba(255,255,255,.09); }
.btn.primary { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn.primary:hover { background: #d0803a; }
.progress {
  position: fixed; top: 52px; left: 0; z-index: 50;
  height: 2px; width: 0; background: var(--amber);
}

/* ============================ ページ枠 ============================ */
.sheet {
  display: flex; flex-direction: column; align-items: center;
  gap: 22px; padding: 78px 16px 90px;
}
.page {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  aspect-ratio: 297 / 210;
  background: var(--paper);
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 14px 44px rgba(18, 22, 28, .16);
}
.pad {
  position: absolute; inset: 0;
  padding: 4.2cqw 5.4cqw 4.0cqw;
  display: flex; flex-direction: column;
}
.pad.wide { padding-left: 4.0cqw; padding-right: 4.0cqw; }

/* ページ見出し */
.phead {
  display: flex; align-items: baseline; gap: 1.4cqw;
  padding-bottom: 1.0cqw;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.phead .pnum {
  font-family: var(--en); font-weight: 500; font-size: 1.4cqw;
  letter-spacing: .1em; color: var(--amber);
}
.phead .ptitle {
  font-weight: 500; font-size: 1.75cqw; letter-spacing: .1em;
}
.phead .peng {
  font-family: var(--en); font-weight: 400; font-size: .92cqw;
  letter-spacing: .2em; color: var(--ink-3);
  text-transform: uppercase; margin-left: auto;
}

/* 汎用テキスト */
.eyebrow {
  font-family: var(--en); font-size: .85cqw; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-3);
}
.label-jp { font-size: 1.0cqw; letter-spacing: .14em; color: var(--navy); font-weight: 500; }
.statement {
  font-family: var(--mincho); font-weight: 300;
  font-size: 3.3cqw; line-height: 1.55; letter-spacing: .03em;
}
.statement em { font-style: normal; color: var(--navy); font-weight: 500; }
.statement .am { font-style: normal; color: var(--amber); font-weight: 500; }
.statement .thin { color: var(--ink-3); }
.lead {
  font-size: 1.2cqw; line-height: 1.95; color: var(--ink-2);
  letter-spacing: .02em; font-weight: 300;
}
.lead b { font-weight: 500; color: var(--ink); }
.note { font-size: .9cqw; line-height: 1.8; color: var(--ink-3); letter-spacing: .02em; }
.note b { color: var(--ink-2); font-weight: 500; }
.tiny { font-family: var(--en); font-size: .78cqw; letter-spacing: .16em; color: var(--ink-3); }
.hl { background: linear-gradient(transparent 62%, var(--amber-pale) 62%); }

/* フォリオ（下部の柱） */
.folio {
  position: absolute; left: 5.4cqw; right: 5.4cqw; bottom: 1.9cqw;
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--en); font-size: .72cqw; letter-spacing: .14em;
  color: var(--ink-4);
}
.folio .pgno { font-size: .95cqw; letter-spacing: .1em; color: var(--ink-3); }

/* ============================ 表紙 ============================ */
.page.cover { background: #0d1420; color: #fff; }
.cover-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 3.6cqw 3.6cqw;
}
.cover-glow {
  position: absolute; right: -12cqw; top: -14cqw;
  width: 52cqw; height: 52cqw; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,113,42,.34), rgba(194,113,42,0) 66%);
}
.cover-glow.b {
  left: -16cqw; right: auto; top: auto; bottom: -20cqw;
  background: radial-gradient(circle, rgba(42,86,140,.42), rgba(42,86,140,0) 66%);
}
.cover-body {
  position: absolute; inset: 0;
  padding: 5.0cqw 5.6cqw 4.4cqw;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ctop { display: flex; align-items: baseline; justify-content: space-between; }
.cmark {
  font-family: var(--en); font-size: .88cqw; letter-spacing: .3em;
  color: rgba(255,255,255,.62); text-transform: uppercase;
}
.cover h1 {
  margin: 0; font-family: var(--en); font-weight: 300;
  font-size: 8.6cqw; letter-spacing: .16em; line-height: 1;
}
.cover .c-jp {
  margin-top: 1.4cqw; font-size: 1.55cqw; letter-spacing: .22em;
  font-weight: 300; color: rgba(255,255,255,.86);
}
.crule { width: 8cqw; height: 2px; background: var(--amber); margin: 2.4cqw 0 2.0cqw; }
.csub {
  font-family: var(--mincho); font-weight: 200;
  font-size: 3.0cqw; line-height: 1.5; letter-spacing: .05em;
  color: #fff;
}
.cmeta {
  display: flex; gap: 3.0cqw; font-size: .95cqw; letter-spacing: .1em;
  color: rgba(255,255,255,.66); font-weight: 300;
}
.cmeta b { color: #fff; font-weight: 500; }

/* ============================ 目次 ============================ */
.toc-grid {
  flex: 1; display: grid; grid-template-columns: 1.35fr .85fr .85fr;
  gap: 3.0cqw; padding-top: 2.0cqw; align-items: center;
}
.toc-item {
  display: flex; align-items: baseline; gap: .8cqw;
  padding: .78cqw 0; border-bottom: 1px solid var(--line-2);
  font-size: 1.0cqw; letter-spacing: .04em;
}
.toc-item .tn {
  font-family: var(--en); font-size: .82cqw; color: var(--amber);
  width: 1.8cqw; flex: 0 0 auto;
}
.toc-item .tt { color: var(--ink-2); }
.toc-item.lead-item .tt { color: var(--ink); font-weight: 500; }
.toc-item .tp { margin-left: auto; font-family: var(--en); font-size: .82cqw; color: var(--ink-4); }
.toc-note {
  margin-top: 1.6cqw; padding: 1.1cqw 1.3cqw;
  background: var(--paper-2); border-left: 2px solid var(--navy);
}
.toc-note .tnl {
  display: block; font-size: .82cqw; letter-spacing: .18em;
  color: var(--navy); margin-bottom: .5cqw; font-weight: 500;
}
.toc-note p { margin: 0; font-size: .82cqw; line-height: 1.85; color: var(--ink-2); }

/* ============================ 汎用グリッド ============================ */
.body { flex: 1; display: flex; flex-direction: column; padding-top: 1.9cqw; min-height: 0; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3cqw; }
.g5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1cqw; }
.gap-s { gap: 1.0cqw; }
.fill { flex: 1; min-height: 0; }

/* ============================ カード ============================ */
.card {
  border: 1px solid var(--line); background: #fff;
  padding: 1.3cqw 1.4cqw; display: flex; flex-direction: column;
}
.card .cn {
  font-family: var(--en); font-size: 1.5cqw; font-weight: 300;
  color: var(--amber); line-height: 1; margin-bottom: .7cqw;
}
.card h4 {
  margin: 0 0 .55cqw; font-size: 1.15cqw; font-weight: 500;
  letter-spacing: .05em; line-height: 1.45;
}
.card p { margin: 0; font-size: .85cqw; line-height: 1.8; color: var(--ink-2); }
.card.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.card.navy h4 { color: #fff; }
.card.navy p { color: rgba(255,255,255,.78); }
.card.navy .cn { color: var(--amber-2); }
.card.pale { background: var(--paper-2); border-color: transparent; }
.card.amber { background: var(--amber-pale); border-color: #efdcc4; }
.card.amber .cn { color: var(--amber); }

/* 見出しつき小節 */
.sechead {
  display: flex; align-items: baseline; gap: .8cqw;
  padding-bottom: .55cqw; margin-bottom: .95cqw;
  border-bottom: 1px solid var(--line);
}
.sechead .sn {
  font-family: var(--en); font-size: .82cqw; letter-spacing: .18em; color: var(--amber);
}
.sechead .st { font-size: 1.15cqw; font-weight: 500; letter-spacing: .07em; }
.sechead .se { margin-left: auto; font-family: var(--en); font-size: .75cqw; letter-spacing: .16em; color: var(--ink-4); }

/* ============================ 表 ============================ */
.tbl { width: 100%; border-collapse: collapse; font-size: .92cqw; }
.tbl th, .tbl td {
  text-align: left; padding: .78cqw .9cqw;
  border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.7;
}
.tbl thead th {
  font-size: .82cqw; font-weight: 500; letter-spacing: .12em;
  color: var(--navy); border-bottom: 1.5px solid var(--navy);
  background: transparent;
}
.tbl td.k { color: var(--ink); font-weight: 500; width: 22%; }
.tbl td .sub { display: block; font-size: .8cqw; color: var(--ink-3); margin-top: .2cqw; line-height: 1.7; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl.compact th, .tbl.compact td { padding: .58cqw .7cqw; font-size: .86cqw; }

/* Before / After 表 */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.ba-col { padding: 1.2cqw 1.5cqw; }
.ba-col.before { background: var(--paper-2); }
.ba-col.after { background: var(--navy); color: #fff; }
.ba-h {
  font-size: .85cqw; letter-spacing: .2em; margin-bottom: .9cqw;
  color: var(--ink-3); font-family: var(--en); text-transform: uppercase;
}
.ba-col.after .ba-h { color: var(--amber-2); }
.ba-row { font-size: .95cqw; line-height: 1.6; padding: .62cqw 0; border-bottom: 1px dashed var(--line); }
.ba-col.after .ba-row { border-bottom-color: rgba(255,255,255,.16); }
.ba-row:last-child { border-bottom: none; }
.ba-arrow {
  display: flex; align-items: center; padding: 0 1.0cqw;
  font-family: var(--en); color: var(--amber); font-size: 1.6cqw;
}

/* ============================ フロー / ステップ ============================ */
.flow { display: grid; gap: .55cqw; }
.step {
  display: grid; grid-template-columns: 3.4cqw 1fr; gap: 1.1cqw;
  align-items: center; padding: .78cqw 1.0cqw;
  background: #fff; border: 1px solid var(--line);
}
.step .sn {
  font-family: var(--en); font-size: 1.25cqw; font-weight: 300;
  color: #fff; background: var(--navy);
  width: 3.4cqw; height: 3.4cqw; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.step.on .sn { background: var(--amber); }
.step h5 { margin: 0 0 .2cqw; font-size: 1.02cqw; font-weight: 500; letter-spacing: .05em; }
.step p { margin: 0; font-size: .82cqw; line-height: 1.7; color: var(--ink-2); }
.step .who {
  margin-left: auto; font-size: .72cqw; letter-spacing: .1em;
  color: var(--ink-3); white-space: nowrap;
}
.step .srow { display: flex; align-items: baseline; gap: .8cqw; }

/* 断絶図（研修→空白→職場） */
.gapdiag { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; gap: 0; }
.gd-box {
  border: 1px solid var(--line); background: #fff;
  padding: 1.4cqw 1.4cqw; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.gd-box .gl { font-family: var(--en); font-size: .78cqw; letter-spacing: .2em; color: var(--ink-3); }
.gd-box .gt { font-size: 1.45cqw; font-weight: 500; letter-spacing: .08em; margin-top: .5cqw; }
.gd-box .gs { font-size: .82cqw; color: var(--ink-3); margin-top: .45cqw; line-height: 1.7; }
.gd-gap {
  background: repeating-linear-gradient(45deg, #f6f1ea, #f6f1ea 6px, #fbf7f1 6px, #fbf7f1 12px);
  border: 1px dashed var(--amber); border-left: none; border-right: none;
  padding: 1.4cqw 1.2cqw; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.gd-gap .gt { font-size: 1.45cqw; font-weight: 500; color: var(--amber); letter-spacing: .08em; }
.gd-gap .gs { font-size: .84cqw; color: var(--ink-2); margin-top: .5cqw; line-height: 1.75; }

/* 3レイヤー図 */
.layer {
  display: grid; grid-template-columns: 12cqw 1fr; gap: 1.4cqw;
  align-items: center; padding: 1.15cqw 1.3cqw;
  border: 1px solid var(--line); background: #fff; margin-bottom: .6cqw;
}
.layer .lh { border-right: 1px solid var(--line-2); padding-right: 1.2cqw; }
.layer .le { font-family: var(--en); font-size: .72cqw; letter-spacing: .2em; color: var(--ink-3); }
.layer .lt { font-size: 1.3cqw; font-weight: 500; letter-spacing: .08em; margin-top: .25cqw; }
.layer .ld { font-size: .88cqw; line-height: 1.8; color: var(--ink-2); }
.layer .ld b { font-weight: 500; color: var(--ink); }
.layer.a1 { border-left: 3px solid var(--navy); }
.layer.a2 { border-left: 3px solid var(--t-und); }
.layer.a3 { border-left: 3px solid var(--amber); }

/* ============================ タグ・チップ ============================ */
.tag {
  display: inline-block; font-size: .68cqw; letter-spacing: .1em;
  padding: .16cqw .5cqw; border-radius: 1px; color: #fff; white-space: nowrap;
}
.tag.rel { background: var(--t-rel); }
.tag.und { background: var(--t-und); }
.tag.cre { background: var(--t-cre); }
.tag.fix { background: var(--t-fix); }
.tag.gray { background: var(--ink-3); }
.chip {
  display: inline-block; font-size: .72cqw; letter-spacing: .08em;
  padding: .2cqw .6cqw; border: 1px solid var(--line);
  color: var(--ink-2); background: #fff; white-space: nowrap;
}

/* ============================ コンテンツ例カタログ ============================ */
.cat-col { display: flex; flex-direction: column; min-height: 0; }
.cat-h {
  display: flex; align-items: baseline; gap: .6cqw;
  padding-bottom: .5cqw; margin-bottom: .3cqw;
  border-bottom: 1.5px solid var(--ink); flex: 0 0 auto;
}
.cat-h .cj { font-size: 1.22cqw; font-weight: 500; letter-spacing: .1em; }
.cat-h .ce { font-family: var(--en); font-size: .7cqw; letter-spacing: .16em; color: var(--ink-4); margin-left: auto; white-space: nowrap; }
.cat-h .cj { white-space: nowrap; }
.item {
  padding: .58cqw 0; border-bottom: 1px dotted var(--line);
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.item:last-child { border-bottom: none; }
.item .ih { display: flex; align-items: baseline; gap: .45cqw; }
.item .inum { font-family: var(--en); font-size: .8cqw; color: var(--amber); flex: 0 0 auto; }
.item .it { font-size: 1.1cqw; font-weight: 500; letter-spacing: .03em; line-height: 1.4; }
.item .id { margin: .4cqw 0 .5cqw; font-size: .86cqw; line-height: 1.75; color: var(--ink-2); }
.item .im { display: flex; gap: .45cqw; align-items: center; }
.item .imn { font-family: var(--en); font-size: .74cqw; color: var(--ink-4); letter-spacing: .06em; }

/* ============================ 料金プラン ============================ */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5cqw; }
.plan {
  border: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column;
}
.plan.reco { border: 1.5px solid var(--amber); box-shadow: 0 .4cqw 1.4cqw rgba(194,113,42,.12); }
.plan-h { padding: 1.2cqw 1.3cqw 1.0cqw; border-bottom: 1px solid var(--line); position: relative; }
.plan.reco .plan-h { background: var(--amber-pale); }
.plan .pjp { font-family: var(--mincho); font-size: 2.0cqw; font-weight: 400; letter-spacing: .1em; }
.plan .pen { font-family: var(--en); font-size: .78cqw; letter-spacing: .22em; color: var(--ink-3); margin-top: .2cqw; }
.plan .pprice { font-family: var(--en); font-size: 1.7cqw; font-weight: 400; color: var(--navy); margin-top: .7cqw; letter-spacing: .02em; }
.plan .pprice small { font-family: var(--sans); font-size: .78cqw; color: var(--ink-3); letter-spacing: .06em; margin-left: .3cqw; }
.plan .pscale { font-size: .8cqw; color: var(--ink-3); margin-top: .25cqw; }
.plan-b { padding: 1.0cqw 1.3cqw 1.2cqw; flex: 1; }
.plan-b ul { margin: 0; padding: 0; list-style: none; }
.plan-b li {
  font-size: .82cqw; line-height: 1.62; color: var(--ink-2);
  padding: .38cqw 0 .38cqw 1.15cqw; position: relative;
  border-bottom: 1px dotted var(--line-2);
}
.plan-b li:last-child { border-bottom: none; }
.plan-b li::before {
  content: ""; position: absolute; left: 0; top: .78cqw;
  width: .42cqw; height: .42cqw; background: var(--amber); border-radius: 50%;
}
.plan-b li.off { color: var(--ink-4); }
.plan-b li.off::before { background: var(--ink-4); opacity: .45; }
.reco-badge {
  position: absolute; top: -.9cqw; right: 1.0cqw;
  background: var(--amber); color: #fff;
  font-size: .7cqw; letter-spacing: .14em; padding: .22cqw .7cqw;
}

/* ============================ 役割分担 ============================ */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.role-col { padding: 1.4cqw 1.6cqw; }
.role-col.jmam { background: var(--navy-pale); border-top: 3px solid var(--navy); }
.role-col.san { background: var(--amber-pale); border-top: 3px solid var(--amber); }
.role-col .rn { font-size: 1.35cqw; font-weight: 500; letter-spacing: .08em; }
.role-col .re { font-family: var(--en); font-size: .72cqw; letter-spacing: .2em; color: var(--ink-3); margin-top: .2cqw; }
.role-col ul { margin: 1.0cqw 0 0; padding: 0; list-style: none; }
.role-col li {
  font-size: .88cqw; line-height: 1.55; padding: .42cqw 0 .42cqw 1.1cqw;
  position: relative; color: var(--ink-2); border-bottom: 1px solid rgba(0,0,0,.055);
}
.role-col li::before {
  content: ""; position: absolute; left: 0; top: .82cqw;
  width: .4cqw; height: 1px; background: var(--ink-3);
}
.role-shared {
  margin-top: 1.2cqw; padding: 1.0cqw 1.4cqw;
  background: var(--ink); color: #fff;
}
.role-shared .rsl { font-size: .78cqw; letter-spacing: .18em; color: var(--amber-2); }
.role-shared p { margin: .35cqw 0 0; font-size: .88cqw; line-height: 1.75; color: rgba(255,255,255,.82); }

/* ============================ ロードマップ ============================ */
.rm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.rm-col { padding: 1.4cqw 1.5cqw; border-right: 1px solid var(--line); }
.rm-col:last-child { border-right: none; }
.rm-col .ph { font-family: var(--en); font-size: .8cqw; letter-spacing: .2em; color: var(--amber); }
.rm-col .pt { font-size: 1.25cqw; font-weight: 500; letter-spacing: .06em; margin-top: .35cqw; }
.rm-col .pp { font-size: .78cqw; color: var(--ink-3); margin-top: .2cqw; }
.rm-col ul { margin: .9cqw 0 0; padding: 0; list-style: none; }
.rm-col li { font-size: .84cqw; line-height: 1.7; color: var(--ink-2); padding: .3cqw 0 .3cqw .9cqw; position: relative; }
.rm-col li::before { content: "—"; position: absolute; left: 0; color: var(--ink-4); }
.rm-bar { display: grid; grid-template-columns: repeat(3, 1fr); height: .5cqw; margin-bottom: 1.2cqw; }
.rm-bar span { display: block; }
.rm-bar .b1 { background: var(--navy); }
.rm-bar .b2 { background: var(--navy-2); }
.rm-bar .b3 { background: var(--amber); }

/* ============================ 濃色ページ ============================ */
.page.dark { background: #101722; color: #fff; }
.page.dark .phead { border-bottom-color: rgba(255,255,255,.16); }
.page.dark .phead .ptitle { color: #fff; }
.page.dark .lead { color: rgba(255,255,255,.76); }
.page.dark .lead b { color: #fff; }
.page.dark .note { color: rgba(255,255,255,.5); }
.page.dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.page.dark .card h4 { color: #fff; }
.page.dark .card p { color: rgba(255,255,255,.7); }
.page.dark .folio { color: rgba(255,255,255,.34); }
.page.dark .folio .pgno { color: rgba(255,255,255,.5); }
.page.dark .sechead { border-bottom-color: rgba(255,255,255,.16); }

.page.closing { background: #0d1420; color: #fff; }
.closing .pad { justify-content: center; }

/* ============================ 数値・KPIブロック ============================ */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3cqw; }
.fact { border-top: 2px solid var(--navy); padding: .9cqw 0 0; }
.fact .fn {
  font-family: var(--en); font-size: 2.5cqw; font-weight: 300;
  line-height: 1; color: var(--navy); letter-spacing: -.01em;
}
.fact .fn small { font-size: 1.0cqw; letter-spacing: .04em; margin-left: .2cqw; }
.fact .ft { font-size: .88cqw; font-weight: 500; margin-top: .6cqw; letter-spacing: .04em; }
.fact .fd { font-size: .76cqw; line-height: 1.7; color: var(--ink-3); margin-top: .28cqw; }
.fact.am { border-top-color: var(--amber); }
.fact.am .fn { color: var(--amber); }

/* 引用（現場の声） */
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3cqw; }
.voice {
  background: var(--paper-2); padding: 1.1cqw 1.2cqw;
  border-left: 2px solid var(--ink-4);
}
.voice p {
  margin: 0; font-family: var(--mincho); font-size: 1.0cqw;
  line-height: 1.85; color: var(--ink);
}
.voice .vw { display: block; margin-top: .6cqw; font-family: var(--sans); font-size: .74cqw; color: var(--ink-3); letter-spacing: .08em; }

/* マトリクス */
.mx { width: 100%; border-collapse: collapse; font-size: .84cqw; }
.mx th, .mx td { border: 1px solid var(--line); padding: .6cqw .7cqw; vertical-align: top; line-height: 1.65; }
.mx thead th {
  background: var(--navy); color: #fff; font-weight: 500;
  font-size: .8cqw; letter-spacing: .08em; border-color: var(--navy);
}
.mx td.scene { background: var(--paper-2); font-weight: 500; color: var(--ink); width: 15%; }
.mx td.scene .ss { display: block; font-weight: 400; font-size: .74cqw; color: var(--ink-3); margin-top: .2cqw; }
.mx td .num { font-family: var(--en); color: var(--amber); font-size: .74cqw; }

/* 注記バー */
.disc {
  margin-top: auto; padding-top: .9cqw; border-top: 1px solid var(--line);
  font-size: .76cqw; line-height: 1.75; color: var(--ink-3);
}
.disc b { color: var(--ink-2); font-weight: 500; }
.chk {
  display: inline-block; font-size: .68cqw; letter-spacing: .08em;
  color: var(--amber); border: 1px solid var(--amber);
  padding: .06cqw .38cqw; margin-left: .4cqw; white-space: nowrap;
}

/* 次アクション */
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.act { border-top: 2px solid var(--amber); padding: 1.0cqw 0 0; }
.act .an { font-family: var(--en); font-size: .8cqw; letter-spacing: .2em; color: var(--amber); }
.act .at { font-size: 1.15cqw; font-weight: 500; margin-top: .5cqw; letter-spacing: .05em; }
.act .ad { font-size: .82cqw; line-height: 1.8; color: rgba(255,255,255,.68); margin-top: .4cqw; }

/* スクロール演出 */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* 画面が狭いとき */
@media (max-width: 760px) {
  .sheet { padding: 66px 8px 60px; gap: 14px; }
  .tb-title { display: none; }
}

/* 表でページ下部まで埋める（行を均等に伸ばす） */
.tbl.fillh { flex: 1 1 auto; height: 100%; }
.mx.fillh { flex: 1 1 auto; height: 100%; }

/* 縦方向に要素を散らしてページ下部まで使う */
.body.spread { justify-content: space-between; }