/* ============================================================
   style.css — EMiU / さんとら 10th ANNIVERSARY 企画書
   設計方針:
   - 各 .page = A4横(297:210)。container-type:inline-size を持ち、
     内部の文字・余白はすべて cqw(ページ幅の%) で指定。
     → 画面でも印刷(A4横)でもレイアウト比率が完全に一致する。
   - ベースは san-tora.jp v2 を継承したモノクローム
     （Oswald の極太コンデンス大文字 × Noto Sans JP）。
   - 差し色は EMiU ロゴの正値 #167FB8（logo.ai のベクター塗り値）。
   - 会そのものが 第一部＝静／第二部＝動 の二部構成なので、
     資料も第一部の章はあたたかい白い面、第二部の章は黒＋ブルーで組む。
   ============================================================ */

:root {
  --ink:      #0a0a0a;
  --ink-2:    #3d3d3d;
  --ink-3:    #6f6f6f;
  --ink-4:    #9b9b9b;
  --ink-5:    #c4c4c4;
  --line:     #e0e0e0;
  --line-2:   #efefef;
  --paper:    #ffffff;
  --paper-2:  #f6f6f5;
  --paper-3:  #ededec;
  --black:    #0a0a0a;

  /* EMiU ブルー（logo.ai のベクター塗り値 0.088/0.4996/0.7224） */
  --emiu:      #167FB8;
  --emiu-d:    #0E6C9F;   /* 極小文字の背景用（白文字で 5.3:1） */
  --emiu-l:    #57ABDD;   /* 黒面の上で使う明るい方 */
  --emiu-pale: #E9F3FA;

  /* 第一部＝あたたかい低照度のイメージ */
  --warm:      #A8722F;
  --warm-pale: #F8F2E9;
  --warm-line: #E8DCC8;

  --en:     'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --num:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sans:   'Noto Sans JP', -apple-system, BlinkMacSystemFont,
            'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;

  --page-max: 1160px;
}

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

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

/* ============================ 画面UI ============================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 52px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  padding: 0 18px;
  background: rgba(10,10,10,.94);
  color: #fff;
  backdrop-filter: saturate(160%) blur(8px);
}
.tb-title { font-size: 12.5px; letter-spacing: .04em; }
.tb-title b { font-weight: 700; }
.tb-title .sep { opacity: .4; margin: 0 .5em; }
.tb-right { display: flex; align-items: center; gap: 14px; }
.tb-pos { font-family: var(--num); font-size: 12px; letter-spacing: .1em; color: #b9b9b7; }
.btn {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 7px 14px; border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff;
}
.btn.primary { background: #fff; color: #0a0a0a; border-color: #fff; }
.progress {
  position: fixed; top: 52px; left: 0; height: 2px; width: 0;
  background: var(--emiu-l); z-index: 51;
}

/* ============================ ページ枠 ============================ */
.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(0,0,0,.18);
}

.pad {
  position: absolute; inset: 0;
  padding: 4.6cqw 5.4cqw 4.2cqw;
  display: flex; flex-direction: column;
}
.pad.wide { padding-left: 4.0cqw; padding-right: 4.0cqw; }
.pad.flush { padding: 4.6cqw 0 4.2cqw; }

/* 縦の余りを埋めるための伸長ブロック（li を flex にしないこと） */
.grow { flex: 1 1 auto; min-height: 0; }

/* ============================ 見出し ============================ */
.phead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2cqw; padding-bottom: 1.1cqw;
  border-bottom: .16cqw solid var(--ink);
  margin-bottom: 2.2cqw;
}
.ek {
  font-family: var(--en); font-weight: 500;
  font-size: 1.05cqw; letter-spacing: .34em; text-transform: uppercase;
  color: var(--emiu-d); margin-bottom: .5cqw;
}
.phead h2 {
  margin: 0; font-size: 2.45cqw; font-weight: 700;
  letter-spacing: .01em; line-height: 1.24;
}
.phead .lead {
  font-size: 1.12cqw; line-height: 1.75; color: var(--ink-2);
  max-width: 34cqw; text-align: right; font-weight: 400;
}

/* 第一部の章＝あたたかい面／第二部の章＝黒面 */
.page.act1 { background: #FDFBF7; }
.page.act1 .ek { color: var(--warm); }
.page.act1 .phead { border-bottom-color: var(--warm); }

/* ============================ 表紙 ============================ */
/* EMiU ブルー全面。巨大な 10 を白の透かしとして敷き、文字はすべて白抜き。 */
.page.cover { background: var(--emiu); color: #fff; }
.page.cover .pad { z-index: 1; }

.cov-wm {
  position: absolute; z-index: 0;
  right: -4.5cqw; top: 8.5cqw;
  font-family: var(--en); font-weight: 700;
  font-size: 42cqw; line-height: .75; letter-spacing: -.045em;
  color: rgba(255,255,255,.14);
  pointer-events: none; user-select: none;
}

.cov-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  border-bottom: .12cqw solid rgba(255,255,255,.4); padding-bottom: 1.4cqw;
}
.cov-logo { display: block; height: 7cqw; width: auto; }
.cov-brand span {
  display: block; font-family: var(--sans); font-weight: 400;
  font-size: .95cqw; letter-spacing: .16em; color: rgba(255,255,255,.8);
  margin-top: .7cqw;
}
.cov-date { text-align: right; font-family: var(--num); font-size: 1cqw;
  letter-spacing: .16em; color: rgba(255,255,255,.85); line-height: 1.9; }

.cov-mid { flex: 1 1 auto; display: flex; align-items: center; }
.cov-copy { flex: 1 1 auto; }
.cov-copy .kicker {
  font-family: var(--en); font-weight: 500; font-size: 1.4cqw;
  letter-spacing: .24em; color: #fff; margin-bottom: 1.2cqw;
}
.cov-copy h1 {
  margin: 0; font-size: 3.9cqw; font-weight: 700; line-height: 1.38;
  letter-spacing: .01em; color: #fff;
}
.cov-rule { width: 6cqw; height: .2cqw; background: #fff; margin: 1.6cqw 0 1.3cqw; }
.cov-copy p {
  margin: 0; font-size: 1.1cqw; line-height: 1.9; color: rgba(255,255,255,.88);
  max-width: 44cqw;
}

.cov-bot {
  display: flex; gap: 0; border-top: .12cqw solid rgba(255,255,255,.4);
  padding-top: 1.4cqw;
}
.cov-bot div { flex: 1 1 0; padding-right: 2cqw; }
.cov-bot dt {
  font-family: var(--en); font-size: .88cqw; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: .45cqw;
}
.cov-bot dd { margin: 0; font-size: 1.05cqw; line-height: 1.6; font-weight: 500; color: #fff; }
.cov-bot dd small { display: block; font-size: .85cqw; font-weight: 400;
  color: rgba(255,255,255,.75); margin-top: .25cqw; }

/* ============================ 黒面 ============================ */
.page.dark { background: var(--black); color: #fff; }
.page.dark .phead { border-bottom-color: rgba(255,255,255,.3); }
.page.dark .ek { color: var(--emiu-l); }
.page.dark .phead .lead { color: rgba(255,255,255,.7); }

/* ============================ 汎用パーツ ============================ */
.cols { display: flex; gap: 2.2cqw; }
.cols > * { flex: 1 1 0; min-width: 0; }
.cols.compact .card { padding: 1.0cqw 1.1cqw; }
.cols.compact .card h3 { font-size: 1.14cqw; margin-bottom: .45cqw; }
.cols.compact .card p { font-size: .88cqw; line-height: 1.68; }
.cols.compact .ul li { font-size: .88cqw; line-height: 1.68; }

.card {
  border: .1cqw solid var(--line); padding: 1.5cqw 1.6cqw;
  display: flex; flex-direction: column;
}
.card.solid { background: var(--black); color: #fff; border-color: var(--black); }
.card.blue  { background: var(--emiu); color: #fff; border-color: var(--emiu); }
.card.tint  { background: var(--paper-2); border-color: var(--paper-3); }
.card.warm  { background: var(--warm-pale); border-color: var(--warm-line); }
.card h3 { margin: 0 0 .7cqw; font-size: 1.32cqw; font-weight: 700; line-height: 1.4; }
.card p { margin: 0; font-size: 1.02cqw; line-height: 1.8; color: var(--ink-2); }
.card.solid p, .card.blue p { color: rgba(255,255,255,.78); }
.card.solid h3, .card.blue h3 { color: #fff; }
.card .no {
  font-family: var(--en); font-weight: 700; font-size: 1.5cqw;
  letter-spacing: .1em; color: var(--ink-4); margin-bottom: .5cqw;
}
.card.solid .no, .card.blue .no { color: rgba(255,255,255,.55); }
.page.dark .card { border-color: rgba(255,255,255,.25); }

.ul { margin: 0; padding-left: 1.2em; }
.ul li { font-size: 1.0cqw; line-height: 1.85; color: var(--ink-2); margin-bottom: .18cqw; }
.ul li b { color: var(--ink); font-weight: 700; }
.page.dark .ul li, .card.solid .ul li, .card.blue .ul li { color: rgba(255,255,255,.8); }
.page.dark .ul li b, .card.solid .ul li b, .card.blue .ul li b { color: #fff; }

.note { font-size: .9cqw; line-height: 1.75; color: var(--ink-3); }
.page.dark .note { color: rgba(255,255,255,.55); }

/* ★未確定チップ */
.tbd {
  display: inline-block; background: var(--emiu-d); color: #fff;
  font-size: .78cqw; font-weight: 500; letter-spacing: .06em;
  padding: .12em .5em .18em; border-radius: 1px; vertical-align: .08em;
  white-space: nowrap;
}
.page.dark .tbd, .card.solid .tbd { background: var(--emiu-l); color: #06222F; }
.card.blue .tbd { background: #fff; color: var(--emiu-d); }

/* ============================ 表 ============================ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
  font-size: .98cqw; line-height: 1.6; text-align: left;
  padding: .62cqw .8cqw; border-bottom: .07cqw solid var(--line);
  vertical-align: top;
}
.tbl thead th {
  font-size: .88cqw; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--emiu-d); border-bottom: none;
  padding: .5cqw .8cqw;
}
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--num);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr.sub td { background: var(--emiu-pale); font-weight: 700; }
.tbl tbody tr.total td {
  background: var(--emiu); color: #fff; font-weight: 700;
  border-bottom: none; font-size: 1.16cqw;
}
.tbl tbody tr.total.blk td { background: var(--black); }
.tbl td small { display: block; font-size: .84cqw; color: var(--ink-3); line-height: 1.55; margin-top: .12cqw; }
.tbl tbody tr.total td small { color: rgba(255,255,255,.75); }

/* 行数が多いとき／数字を読ませたいとき */
.tbl.tight th, .tbl.tight td { padding: .42cqw .7cqw; font-size: .92cqw; line-height: 1.5; }
.tbl.tight thead th { font-size: .82cqw; padding: .4cqw .7cqw; }
.tbl.tight td small { font-size: .78cqw; line-height: 1.45; }
.tbl.loose th, .tbl.loose td { padding: .76cqw .9cqw; font-size: 1.08cqw; }
.tbl.loose thead th { font-size: .94cqw; padding: .6cqw .9cqw; }
.tbl.loose td small { font-size: .92cqw; }
.tbl.loose tbody tr.total td { font-size: 1.3cqw; }

/* 黒面の表 */
.page.dark .tbl th, .page.dark .tbl td {
  color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.2);
}
.page.dark .tbl td b { color: #fff; }
.page.dark .tbl td small { color: rgba(255,255,255,.55); }
.page.dark .tbl tbody tr.sub td { background: rgba(87,171,221,.18); color: #fff; }

/* ============================ タイムライン ============================ */
.tl { display: flex; flex-direction: column; }
.tl-row {
  display: flex; gap: 1.2cqw; align-items: stretch;
  border-top: .07cqw solid var(--line);
  padding: .34cqw 0;
}
.tl-row:last-child { border-bottom: .07cqw solid var(--line); }
.tl-row.warm { background: var(--warm-pale); }
.tl-row.hi { background: var(--paper-2); }
.tl-row.key { background: var(--emiu); color: #fff; border-top-color: var(--emiu); }
.tl-row.amber { background: var(--warm); color: #fff; border-top-color: var(--warm); }
.tl-row.blk { background: var(--black); color: #fff; border-top-color: var(--black); }
.tl-time {
  flex: 0 0 9.2cqw; font-family: var(--num); font-size: .95cqw;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; font-weight: 500;
  padding-left: .7cqw;
}
.tl-ph {
  flex: 0 0 6.0cqw; font-family: var(--en); font-size: .76cqw;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4);
  padding-top: .2cqw;
}
.tl-row.key .tl-ph, .tl-row.blk .tl-ph, .tl-row.amber .tl-ph { color: rgba(255,255,255,.68); }
.tl-body { flex: 1 1 auto; min-width: 0; }
.tl-body b { font-size: .97cqw; font-weight: 700; display: block; line-height: 1.45; }
.tl-body span { font-size: .82cqw; color: var(--ink-3); line-height: 1.5; display: block; }
.tl-row.key .tl-body span, .tl-row.blk .tl-body span,
.tl-row.amber .tl-body span { color: rgba(255,255,255,.75); }
.tl-mark {
  flex: 0 0 7.4cqw; font-size: .78cqw; color: var(--ink-3);
  text-align: right; padding-right: .7cqw; line-height: 1.5;
}
.tl-row.key .tl-mark, .tl-row.blk .tl-mark, .tl-row.amber .tl-mark { color: rgba(255,255,255,.8); }

/* ============================ フロア図 ============================ */
.fmap {
  border: .12cqw solid var(--ink); position: relative;
  background: var(--paper-2); display: flex; flex: 1 1 auto; min-height: 0;
}
.fmap.night { background: #14181b; border-color: #14181b; }
.fzone { position: relative; border-right: .1cqw dashed var(--ink-4); padding: .85cqw; }
.fmap.night .fzone { border-right-color: rgba(255,255,255,.3); }
.fzone:last-child { border-right: none; }
.fzone .fz-lab {
  font-family: var(--en); font-size: .76cqw; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.fmap.night .fz-lab { color: rgba(255,255,255,.5); }
.fzone .fz-name { font-size: .95cqw; font-weight: 700; margin-top: .15cqw; }
.fmap.night .fz-name { color: #fff; }
.fitem {
  position: absolute; border: .08cqw solid var(--ink-2); background: #fff;
  font-size: .8cqw; line-height: 1.3; text-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: .2cqw; font-weight: 500;
}
.fitem.k { background: var(--emiu); color: #fff; border-color: var(--emiu); }
.fitem.w { background: var(--warm); color: #fff; border-color: var(--warm); }
.fitem.ghost { background: transparent; border-style: dashed; color: var(--ink-3); }
.fmap.night .fitem { background: #232a2f; border-color: rgba(255,255,255,.4); color: #fff; }
.fmap.night .fitem.k { background: var(--emiu); border-color: var(--emiu); }
.fmap.night .fitem.ghost { background: transparent; border-style: dashed; color: rgba(255,255,255,.5); }

/* ============================ 二部の対比 ============================ */
.vs { display: flex; gap: 0; flex: 1 1 auto; min-height: 0; }
.vs-col { flex: 1 1 0; display: flex; flex-direction: column; }
.vs-col.a { background: var(--warm-pale); }
.vs-col.b { background: var(--black); color: #fff; }
.vs-head { padding: 1.5cqw 1.8cqw 1.2cqw; }
.vs-head .vs-no {
  font-family: var(--en); font-size: 1.0cqw; letter-spacing: .26em;
  text-transform: uppercase; color: var(--warm);
}
.vs-col.b .vs-head .vs-no { color: var(--emiu-l); }
.vs-head h3 { margin: .35cqw 0 .4cqw; font-size: 2.0cqw; font-weight: 700; line-height: 1.28; }
.vs-head .vs-sub { font-size: 1.0cqw; color: var(--ink-2); line-height: 1.6; }
.vs-col.b .vs-head .vs-sub { color: rgba(255,255,255,.72); }
.vs-rows { flex: 1 1 auto; }
.vs-row {
  display: flex; gap: 1.0cqw; padding: .55cqw 1.8cqw;
  border-top: .07cqw solid rgba(0,0,0,.1);
}
.vs-col.b .vs-row { border-top-color: rgba(255,255,255,.16); }
.vs-row .vk {
  flex: 0 0 6.0cqw; font-size: .8cqw; color: var(--ink-3);
  font-family: var(--en); letter-spacing: .12em; text-transform: uppercase;
  padding-top: .16cqw;
}
.vs-col.b .vs-row .vk { color: rgba(255,255,255,.5); }
.vs-row .vv { flex: 1 1 auto; font-size: .95cqw; line-height: 1.6; }
.vs-row .vv b { font-weight: 700; }

/* ============================ ステップ ============================ */
.steps { display: flex; gap: 0; }
.step { flex: 1 1 0; border-top: .16cqw solid var(--ink); padding: .9cqw 1.1cqw 0 0; }
.page.dark .step { border-top-color: #fff; }
.page.act1 .step { border-top-color: var(--warm); }
.step .st-no {
  font-family: var(--en); font-weight: 700; font-size: 1.15cqw;
  letter-spacing: .12em; color: var(--ink-4);
}
.page.dark .step .st-no { color: var(--emiu-l); }
.page.act1 .step .st-no { color: var(--warm); }
.step h4 { margin: .3cqw 0 .45cqw; font-size: 1.18cqw; font-weight: 700; line-height: 1.4; }
.step p { margin: 0; font-size: .94cqw; line-height: 1.75; color: var(--ink-2); }
.page.dark .step p { color: rgba(255,255,255,.75); }

/* ============================ ガント ============================ */
.gantt { width: 100%; border-collapse: collapse; }
.gantt th {
  font-size: .82cqw; font-weight: 500; color: var(--ink-3);
  padding: 0 0 .5cqw; text-align: center; font-family: var(--num);
  letter-spacing: .04em;
}
.gantt th:first-child { text-align: left; }
.gantt td {
  padding: .22cqw .1cqw; border-top: .07cqw solid var(--line-2);
  font-size: .88cqw; vertical-align: middle;
}
.gantt td:first-child { padding-left: 0; padding-right: .8cqw; width: 26%; }
.gantt td:first-child b { font-weight: 700; }
.gantt td:first-child small { display: block; font-size: .75cqw; color: var(--ink-3); }
.bar { height: .92cqw; background: var(--ink-5); border-radius: 1px; }
.bar.on { background: var(--emiu); }
.bar.mid { background: var(--emiu-l); }

/* ============================ 大きい数字 ============================ */
.figs { display: flex; gap: 1.6cqw; }
.fig { flex: 1 1 0; border-top: .16cqw solid var(--ink); padding-top: .9cqw; }
.page.dark .fig { border-top-color: #fff; }
.fig .fv {
  font-family: var(--num); font-weight: 600; font-size: 2.6cqw;
  letter-spacing: -.02em; line-height: 1;
}
.fig .fv small { font-family: var(--sans); font-size: 1.0cqw; font-weight: 500; margin-left: .2em; }
.fig .fl { font-size: .92cqw; color: var(--ink-3); margin-top: .5cqw; line-height: 1.6; }
.page.dark .fig .fl { color: rgba(255,255,255,.6); }

/* ============================ 出演クレジット ============================ */
.credits { display: flex; flex-wrap: wrap; gap: .6cqw 1.0cqw; margin-top: .6cqw; }
.credit { border: .08cqw solid var(--line); padding: .5cqw .8cqw; min-width: 8.4cqw; }
.page.dark .credit { border-color: rgba(255,255,255,.28); }
.card.blue .credit { border-color: rgba(255,255,255,.42); }
.credit .cr-role {
  font-family: var(--en); font-size: .76cqw; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.page.dark .credit .cr-role { color: rgba(255,255,255,.5); }
.card.blue .credit .cr-role { color: rgba(255,255,255,.75); }
.credit .cr-name { font-size: 1.06cqw; font-weight: 700; margin-top: .14cqw; line-height: 1.35; }
.credit .cr-note {
  display: block; font-size: .84cqw; font-weight: 400; margin-top: .2cqw;
  color: var(--ink-3); line-height: 1.5;
}
.page.dark .credit .cr-note { color: rgba(255,255,255,.62); }
.card.blue .credit .cr-note { color: rgba(255,255,255,.82); }

/* ============================ ノンブル ============================ */
.folio {
  position: absolute; left: 5.4cqw; right: 5.4cqw; bottom: 1.9cqw;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--num); font-size: .82cqw; letter-spacing: .14em;
  color: var(--ink-4); pointer-events: none;
}
.page.dark .folio { color: rgba(255,255,255,.4); }
.page.cover .folio { display: none; }

/* ============================ レスポンシブ（画面） ============================ */
@media (max-width: 760px) {
  .sheet { padding: 66px 8px 40px; gap: 12px; }
  .tb-title { font-size: 11px; }
  .tb-title .sep, .tb-title .sub { display: none; }
}

/* 行数の多いタイムラインを1ページに収める */
.tl.tight .tl-row { padding: .26cqw 0; }
.tl.tight .tl-body b { font-size: .94cqw; line-height: 1.4; }
.tl.tight .tl-body span { font-size: .79cqw; line-height: 1.45; }
.tl.tight .tl-time { font-size: .92cqw; }
.tl.tight .tl-ph, .tl.tight .tl-mark { font-size: .74cqw; }

/* 行数の多いガント用 */
.gantt.tight td { padding: .13cqw .1cqw; font-size: .81cqw; line-height: 1.4; }
.gantt.tight td:first-child small { font-size: .7cqw; line-height: 1.35; }
.gantt.tight .bar { height: .76cqw; }
.gantt.tight th { font-size: .78cqw; padding-bottom: .4cqw; }