/* ============================================================
   style.css — 2FACED LAUNCH DAY 09.11 / OPERATION MANUAL
   -----------------------------------------------------------
   これは「読む資料」ではなく「9/11 の現場で使う資料」。
   設計の前提を4つ、崩さないこと。

   1) 各 .page = A4縦(210:297)。container-type:inline-size を持ち、
      内部の文字・余白はすべて cqw(ページ幅の%)で書く。
      → 画面でも印刷(A4縦)でも比率が完全に一致する。
      1cqw = 2.10mm。本文 1.5cqw ≒ 9pt が下限。px と mm は書かない。
   2) 色は BLACK / WHITE / SILVER のみ。
      情報の重みは「色」ではなく 太さ・大きさ・面の反転 で付ける。
      未確定は .tbc（黒ベタ＋白抜き）で必ず目立たせる。
   3) 数字（時刻・番号・寸法）は必ず欧文 Archivo。大きく、太く。
      現場は暗くて急いでいる。数字だけは離れて読めること。
   4) .page は overflow:hidden。溢れても画面では分からないので、
      js/main.js の溢れ検知（右上「収まりOK / 溢れ ○ページ」）を必ず見る。
   ============================================================ */

:root {
  --paper:   #ffffff;
  --ink:     #0b0b0b;   /* BLACK */
  --ink-2:   #1a1a1c;

  --fg:      #0b0b0b;
  --fg-2:    #5a5c60;
  --fg-3:    #8e9095;   /* SILVER 系の文字 */

  --silver:  #a8a9ad;   /* SILVER */
  --line:    #d5d6d8;
  --line-2:  #e8e9ea;
  --fill:    #f3f3f4;   /* 薄いグレー面 */
  --fill-2:  #e4e5e7;

  /* 反転面（黒地）の文字 */
  --dfg:     #ffffff;
  --dfg-2:   #b9babd;
  --dfg-3:   #77797d;
  --dline:   rgba(255,255,255,.26);
  --dline-2: rgba(255,255,255,.12);

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

  --page-max: 860px;
}

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

body {
  font-family: var(--jp);
  color: var(--fg);
  background: #6e7075;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ======================== ページ枠 ======================== */
.sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 74px 16px 88px;
}

.page {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  aspect-ratio: 210 / 297;
  background: var(--paper);
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 14px 44px rgba(0,0,0,.34);
}

/* 黒い面。章扉と緊急時の章で使う */
.page.dark {
  background: var(--ink);
  --fg: var(--dfg);
  --fg-2: var(--dfg-2);
  --fg-3: var(--dfg-3);
  --line: var(--dline);
  --line-2: var(--dline-2);
  --paper: var(--ink);
  --fill: #1c1c1e;
  --fill-2: #262629;
  color: var(--dfg);
}

.pad {
  position: absolute;
  inset: 0;
  padding: 5.2cqw 5.9cqw 4.4cqw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.body {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 2.2cqw;
  display: flex;
  flex-direction: column;
  gap: 2cqw;
}

/* ==================== ページヘッダ ==================== */
.phead {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 1.4cqw;
  padding-bottom: 1cqw;
  border-bottom: .36cqw solid var(--fg);
}
.phead .pnum {
  font-family: var(--en);
  font-weight: 800;
  font-size: 1.7cqw;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--fg-3);
  padding-bottom: .24cqw;
}
.phead .peng {
  font-family: var(--en);
  font-weight: 900;
  font-size: 3.2cqw;
  letter-spacing: -.025em;
  line-height: .84;
  text-transform: uppercase;
}
.phead .ptitle {
  font-size: 1.62cqw;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--fg-2);
  line-height: 1;
  padding-bottom: .28cqw;
}
.phead .pright {
  margin-left: auto;
  font-family: var(--en);
  font-size: 1.2cqw;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--fg-3);
  line-height: 1;
  padding-bottom: .3cqw;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==================== ページフッタ ==================== */
.pfoot {
  flex: 0 0 auto;
  margin-top: 1.7cqw;
  padding-top: .85cqw;
  border-top: .1cqw solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 1.1cqw;
  font-size: 1.04cqw;
  color: var(--fg-3);
  letter-spacing: .04em;
}
.pfoot .ver { font-family: var(--en); font-weight: 700; letter-spacing: .12em; }
.pfoot .folio {
  margin-left: auto;
  font-family: var(--en);
  font-weight: 900;
  font-size: 1.6cqw;
  letter-spacing: .04em;
  color: var(--fg);
}

/* ============ 章タブ（束ねたとき小口で章が分かる） ============ */
.ptab {
  position: absolute;
  right: 0;
  top: calc(10cqw + var(--tabi, 0) * 12.4cqw);
  width: 3.2cqw;
  height: 11.6cqw;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.ptab span {
  font-family: var(--en);
  font-weight: 800;
  font-size: 1.02cqw;
  letter-spacing: .14em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  white-space: nowrap;
}
.page.dark .ptab { background: #fff; color: var(--ink); }

/* ==================== 見出し ==================== */
.h2 {
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.3;
  margin: 0 0 1cqw;
  padding-left: 1.1cqw;
  border-left: .52cqw solid var(--fg);
  display: flex;
  align-items: baseline;
  gap: .9cqw;
}
.h2 .en {
  font-family: var(--en);
  font-weight: 800;
  font-size: 1.12cqw;
  letter-spacing: .16em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.h3 { font-size: 1.56cqw; font-weight: 700; letter-spacing: .03em; line-height: 1.35; margin: 0 0 .6cqw; }
.h4 {
  font-family: var(--en);
  font-weight: 800;
  font-size: 1.02cqw;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 .55cqw;
  display: flex;
  align-items: baseline;
  gap: .7cqw;
}
.h4 .jp { font-family: var(--jp); font-weight: 700; letter-spacing: .04em; font-size: 1.16cqw; color: var(--fg-2); }

/* ==================== 本文 ==================== */
p, li { line-height: 1.7; }
.txt  { font-size: 1.46cqw; margin: 0 0 .9cqw; }
.txt:last-child { margin-bottom: 0; }
.lead { font-size: 1.62cqw; line-height: 1.68; margin: 0; color: var(--fg-2); }
.lead b { color: var(--fg); font-weight: 700; }
.sm { font-size: 1.24cqw; color: var(--fg-2); line-height: 1.58; }
.xs { font-size: 1.06cqw; color: var(--fg-3); line-height: 1.5; }
b  { font-weight: 700; }
.mono { font-family: var(--en); font-weight: 700; letter-spacing: .02em; }

ul.list { margin: 0; padding: 0; list-style: none; }
ul.list > li {
  font-size: 1.42cqw; padding-left: 1.5cqw; position: relative; margin-bottom: .34cqw; line-height: 1.62;
}
ul.list > li::before {
  content: ""; position: absolute; left: .2cqw; top: .92cqw;
  width: .58cqw; height: .58cqw; background: var(--fg);
}

ul.checks { margin: 0; padding: 0; list-style: none; }
ul.checks > li {
  font-size: 1.4cqw; padding-left: 2.7cqw; position: relative; margin-bottom: .55cqw; line-height: 1.55;
}
ul.checks > li::before {
  content: ""; position: absolute; left: 0; top: .3cqw;
  width: 1.7cqw; height: 1.7cqw; border: .17cqw solid var(--fg-3); background: #fff;
}

ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: st; }
ol.steps > li {
  counter-increment: st; position: relative; padding-left: 3.3cqw;
  margin-bottom: .8cqw; font-size: 1.44cqw; line-height: 1.62;
}
ol.steps > li:last-child { margin-bottom: 0; }
ol.steps > li::before {
  content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: .1cqw;
  width: 2.4cqw; height: 2.4cqw;
  background: var(--fg); color: var(--paper);
  font-family: var(--en); font-weight: 800; font-size: 1.1cqw;
  display: flex; align-items: center; justify-content: center;
}
ol.steps > li b { display: block; }

/* ==================== 表 ==================== */
table.tbl { width: 100%; border-collapse: collapse; font-size: 1.3cqw; line-height: 1.45; }
table.tbl th, table.tbl td {
  border: .1cqw solid var(--line); padding: .7cqw .8cqw; vertical-align: top; text-align: left;
}
table.tbl thead th {
  background: var(--ink); color: #fff; font-weight: 700; font-size: 1.16cqw;
  letter-spacing: .08em; white-space: nowrap; border-color: var(--ink);
}
table.tbl tbody th { background: var(--fill); font-weight: 700; white-space: nowrap; }
table.tbl td.num, table.tbl th.num { font-family: var(--en); font-weight: 700; white-space: nowrap; text-align: right; }
table.tbl td.c, table.tbl th.c { text-align: center; }
table.tbl tr.hl td, table.tbl tr.hl th { background: var(--fill); }
table.tbl.zebra tbody tr:nth-child(even) td { background: #fafafa; }
table.tbl.stretch { height: 100%; }
table.tbl.stretch td, table.tbl.stretch th { vertical-align: middle; }
/* 制作物一覧のような列数の多い表 */
table.tbl.dense { font-size: 1.02cqw; }
table.tbl.dense th, table.tbl.dense td { padding: .42cqw .38cqw; }
table.tbl.dense thead th { font-size: .96cqw; letter-spacing: .04em; }

/* ==================== 状態チップ ==================== */
.tbc, .chk, .wait {
  display: inline-block; font-family: var(--jp); font-size: 1.02cqw; font-weight: 700;
  letter-spacing: .06em; padding: .12cqw .5cqw; white-space: nowrap; line-height: 1.45;
}
.tbc  { background: var(--ink); color: #fff; }                       /* TBC = 未確定 */
.chk  { border: .1cqw solid var(--fg); color: var(--fg); }           /* 確認中 */
.wait { background: var(--fill-2); color: var(--fg-2); }             /* 素材待ち・サイズ確認中 */
.page.dark .tbc { background: #fff; color: var(--ink); }
.page.dark .chk { border-color: #fff; color: #fff; }

/* 制作 STATUS。塗りの濃さで進み具合を示す（色は使わない） */
.st {
  display: inline-block; font-family: var(--en); font-weight: 800; font-size: .92cqw;
  letter-spacing: .1em; padding: .16cqw .46cqw; white-space: nowrap; line-height: 1.4;
  border: .1cqw solid var(--fg-3); color: var(--fg-2); background: #fff;
}
.st.s1 { }                                                    /* NOT STARTED */
.st.s2 { background: var(--fill); }                           /* CHECKING */
.st.s3 { background: var(--fill-2); color: var(--fg); }       /* DESIGN */
.st.s4 { background: var(--silver); color: #fff; border-color: var(--silver); }  /* APPROVAL */
.st.s5 { background: var(--fg-2); color: #fff; border-color: var(--fg-2); }      /* PRINTING */
.st.s6 { background: var(--ink); color: #fff; border-color: var(--ink); }        /* DONE */

/* ==================== 注意・囲み ==================== */
.note {
  border: .1cqw solid var(--line);
  border-left: .6cqw solid var(--fg);
  padding: .95cqw 1.15cqw;
  font-size: 1.34cqw;
  line-height: 1.6;
  background: #fff;
}
.note .nt {
  font-family: var(--en); font-weight: 800; font-size: .98cqw; letter-spacing: .18em;
  text-transform: uppercase; display: block; margin-bottom: .26cqw; color: var(--fg-2);
}
.note.point { background: var(--fill); border-left-color: var(--fg-2); }
.note.stop  { background: var(--ink); color: #fff; border-left-color: #fff; border-color: var(--ink); }
.note.stop .nt { color: #fff; }
.note.stop b { color: #fff; }

.box { border: .1cqw solid var(--line); padding: 1cqw 1.15cqw; min-height: 0; }
.box.fill { background: var(--fill); border-color: transparent; }
.box.ink  { background: var(--ink); color: #fff; border-color: var(--ink); }
.box.ink .h4 { color: var(--dfg-2); }
.rule { height: .1cqw; background: var(--line); }

/* 反転バンド。そのページの結論を1つだけ置く */
.state {
  background: var(--ink); color: #fff; padding: 1.5cqw 1.7cqw;
  display: flex; gap: 1.6cqw; align-items: baseline;
}
.state .sl {
  font-family: var(--en); font-weight: 900; font-size: 1.4cqw; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; color: #fff;
}
.state .sr { font-size: 1.36cqw; line-height: 1.6; color: var(--dfg-2); }
.state .sr b { color: #fff; }

/* ==================== 大きい数字 ==================== */
.big {
  font-family: var(--en); font-weight: 900; letter-spacing: -.03em; line-height: .86;
}
.kpi { display: flex; flex-direction: column; gap: .2cqw; }
.kpi .k { font-family: var(--en); font-weight: 800; font-size: .98cqw; letter-spacing: .18em; color: var(--fg-3); text-transform: uppercase; }
.kpi .v { font-family: var(--en); font-weight: 900; font-size: 3.4cqw; letter-spacing: -.03em; line-height: 1; }
.kpi .u { font-size: 1.14cqw; color: var(--fg-2); font-family: var(--jp); font-weight: 500; }

/* ==================== 時刻つき進行 ==================== */
.tl { display: flex; flex-direction: column; }
.tl .row { display: grid; grid-template-columns: 11cqw 1.6cqw 1fr; align-items: start; gap: 0 1cqw; }
.tl .time {
  font-family: var(--en); font-weight: 900; font-size: 1.9cqw; letter-spacing: -.01em;
  padding-top: .05cqw; white-space: nowrap;
}
.tl .time.tbd { font-size: 1.5cqw; color: var(--fg-3); }
.tl .rail { position: relative; height: 100%; }
.tl .rail::before {
  content: ""; position: absolute; left: 50%; top: 1.1cqw; bottom: -.3cqw;
  width: .16cqw; background: var(--line); transform: translateX(-50%);
}
.tl .row:last-child .rail::before { display: none; }
.tl .rail::after {
  content: ""; position: absolute; left: 50%; top: .58cqw;
  width: .9cqw; height: .9cqw; background: var(--fg); transform: translateX(-50%);
}
.tl .row.key .rail::after { width: 1.4cqw; height: 1.4cqw; top: .35cqw; }
.tl .what { font-size: 1.38cqw; padding-bottom: .95cqw; line-height: 1.5; }
.tl .what b { display: block; font-size: 1.5cqw; }
.tl .what .sub { color: var(--fg-2); font-size: 1.14cqw; }

/* ==================== マスタースケジュール（ガント） ==================== */
.gantt { width: 100%; font-family: var(--en); }
.gantt .grow2 {
  display: grid;
  grid-template-columns: 13cqw repeat(var(--cols, 18), 1fr);
  align-items: stretch;
}
.gantt .hd {
  font-weight: 800; font-size: .96cqw; letter-spacing: .02em; color: var(--fg-2);
  border-left: .1cqw solid var(--line); padding: .3cqw 0 .5cqw .25cqw;
}
.gantt .hd.lbl { border-left: 0; }
.gantt .lane {
  font-family: var(--jp); font-weight: 700; font-size: 1.16cqw; letter-spacing: .04em;
  display: flex; align-items: center; padding-right: .6cqw;
  border-top: .1cqw solid var(--line);
}
.gantt .cellrow {
  position: relative; grid-column: 2 / -1; border-top: .1cqw solid var(--line);
  min-height: 4.3cqw;
  background: repeating-linear-gradient(to right,
    var(--line) 0 .1cqw, transparent .1cqw calc(100% / var(--cols, 18)));
}
.gantt .bar {
  position: absolute; top: .55cqw; height: 1.7cqw;
  display: flex; align-items: center; padding: 0 .4cqw;
  font-family: var(--jp); font-weight: 700; font-size: .96cqw; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden;
}
.gantt .bar.b2 { top: 2.45cqw; }
.gantt .bar.solid { background: var(--ink); color: #fff; }
.gantt .bar.mid   { background: var(--silver); color: #fff; }
.gantt .bar.soft  { background: var(--fill-2); color: var(--fg); }
.gantt .bar.line  { border: .12cqw solid var(--fg); color: var(--fg); }
.gantt .bar.hatch {
  background: repeating-linear-gradient(135deg, var(--fill-2) 0 .5cqw, #fff .5cqw 1cqw);
  border: .1cqw solid var(--line); color: var(--fg);
}
.gantt .now { position: absolute; top: 0; bottom: 0; width: .16cqw; background: var(--fg); }

/* ==================== 平面図 ==================== */
.plan { position: relative; width: 100%; border: .1cqw solid var(--line); background: #fff; }
.plan img { width: 100%; height: auto; display: block; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 2.5cqw; height: 2.5cqw; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--en); font-weight: 800; font-size: 1.16cqw;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 .26cqw #fff;
}
.pin.o { background: #fff; color: var(--ink); box-shadow: 0 0 0 .22cqw var(--ink), 0 0 0 .44cqw #fff; }
.legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3cqw 1.6cqw; }
.legend .li { display: flex; align-items: baseline; gap: .6cqw; font-size: 1.14cqw; line-height: 1.5; }
.legend .li .n {
  font-family: var(--en); font-weight: 800; font-size: 1cqw; min-width: 2.1cqw;
  height: 1.7cqw; padding: 0 .3cqw; background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.legend .li.tbdrow .n { background: #fff; color: var(--ink); border: .12cqw solid var(--ink); }
.legend .li .t { flex: 1 1 auto; }

/* 動線の凡例 */
.flowkey { display: flex; gap: 1.6cqw; flex-wrap: wrap; font-size: 1.1cqw; }
.flowkey .fk { display: flex; align-items: center; gap: .5cqw; }
.flowkey .fk i { display: block; width: 3.4cqw; height: .3cqw; background: var(--ink); }
.flowkey .fk.guest i { background: var(--ink); }
.flowkey .fk.cast  i { background: repeating-linear-gradient(to right, var(--fg-2) 0 .6cqw, transparent .6cqw 1.1cqw); height: .3cqw; }
.flowkey .fk.staff i { background: var(--silver); }

/* 導線ステップ（→ でつなぐ） */
.flow { display: flex; align-items: stretch; gap: .5cqw; }
.flow .fs {
  flex: 1 1 0; background: var(--fill); padding: .8cqw .7cqw; min-width: 0;
  display: flex; flex-direction: column; gap: .2cqw;
}
.flow .fs .n { font-family: var(--en); font-weight: 800; font-size: .94cqw; letter-spacing: .14em; color: var(--fg-3); }
.flow .fs .t { font-size: 1.24cqw; font-weight: 700; line-height: 1.4; }
.flow .fs .s { font-size: 1.02cqw; color: var(--fg-2); line-height: 1.4; }
.flow .ar { display: flex; align-items: center; font-family: var(--en); font-weight: 900; font-size: 1.5cqw; color: var(--fg-3); }
.flow .fs.on { background: var(--ink); color: #fff; }
.flow .fs.on .n { color: var(--dfg-3); }
.flow .fs.on .s { color: var(--dfg-2); }

/* ==================== 写真 ==================== */
.ph { position: relative; overflow: hidden; background: var(--fill); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph .cap {
  position: absolute; left: 0; bottom: 0; background: var(--ink); color: #fff;
  font-size: .98cqw; letter-spacing: .04em; padding: .3cqw .6cqw; font-weight: 700;
}
.phcap { font-size: 1.02cqw; color: var(--fg-3); margin: .35cqw 0 0; line-height: 1.45; }

/* 素材が来ていない枠。空白で置かず、何が入るかを書く */
.slot {
  border: .12cqw dashed var(--fg-3);
  background: repeating-linear-gradient(135deg, transparent 0 .5cqw, var(--fill) .5cqw 1cqw);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--fg-2); font-size: 1.1cqw; letter-spacing: .04em;
  gap: .3cqw; padding: .8cqw; min-height: 0;
}
.slot .sn { font-family: var(--en); font-weight: 800; font-size: .96cqw; letter-spacing: .18em; color: var(--fg-3); }

/* 装飾カード（現場写真＋完成イメージ＋仕様） */
.deco { display: flex; flex-direction: column; border: .1cqw solid var(--line); min-height: 0; }
.deco .dh {
  display: flex; align-items: baseline; gap: .6cqw; padding: .5cqw .7cqw;
  background: var(--ink); color: #fff;
}
.deco .dh .no { font-family: var(--en); font-weight: 800; font-size: 1.04cqw; letter-spacing: .1em; }
.deco .dh .nm { font-size: 1.16cqw; font-weight: 700; letter-spacing: .04em; }
.deco .dh .rt { margin-left: auto; font-family: var(--en); font-weight: 700; font-size: .94cqw; color: var(--dfg-2); letter-spacing: .08em; }
.deco .dimg { display: grid; grid-template-columns: 1fr 1fr; gap: .1cqw; background: var(--line); }
.deco .dimg .ph, .deco .dimg .slot { aspect-ratio: 4 / 3; }
.deco .dspec { padding: .5cqw .7cqw; font-size: 1.02cqw; line-height: 1.5; color: var(--fg-2); }
.deco .dspec b { color: var(--fg); }

/* ==================== スタッフポジション ==================== */
.pos { border: .1cqw solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.pos .ph2 {
  background: var(--fill); padding: .5cqw .7cqw; display: flex; align-items: baseline; gap: .6cqw;
  border-bottom: .1cqw solid var(--line);
}
.pos .ph2 .no { font-family: var(--en); font-weight: 800; font-size: 1cqw; letter-spacing: .1em; color: var(--fg-3); }
.pos .ph2 .nm { font-size: 1.24cqw; font-weight: 700; }
.pos .ph2 .tm { margin-left: auto; font-family: var(--en); font-weight: 800; font-size: 1.16cqw; }
.pos .pb { padding: .55cqw .7cqw; font-size: 1.06cqw; line-height: 1.5; color: var(--fg-2); }
.pos .pb .who { font-size: 1.1cqw; color: var(--fg); font-weight: 700; display: block; margin-bottom: .18cqw; }
.pos .pb .cau { display: block; margin-top: .22cqw; color: var(--fg); }

/* ==================== 組織図 ==================== */
.org { display: flex; flex-direction: column; gap: .9cqw; }
.org .tier { display: flex; gap: .8cqw; align-items: stretch; }
.org .oc {
  flex: 1 1 0; border: .12cqw solid var(--fg); padding: .6cqw .7cqw; min-width: 0;
  display: flex; flex-direction: column; gap: .12cqw; background: #fff;
}
.org .oc.top { background: var(--ink); color: #fff; }
.org .oc.top .r { color: var(--dfg-3); }
.org .oc .r { font-family: var(--en); font-weight: 800; font-size: .9cqw; letter-spacing: .14em; color: var(--fg-3); text-transform: uppercase; }
.org .oc .n { font-size: 1.2cqw; font-weight: 700; line-height: 1.3; }
.org .oc .p { font-size: 1cqw; color: var(--fg-2); line-height: 1.4; }
.org .oc .tel { font-family: var(--en); font-weight: 800; font-size: 1.1cqw; letter-spacing: .02em; }
.org .oc.sub { border-color: var(--line); }
.org .conn { height: 1.1cqw; border-left: .12cqw solid var(--fg-3); margin-left: 4cqw; }

/* ==================== レイアウト補助 ==================== */
.grow { flex: 1 1 auto; min-height: 0; }
.g2  { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqw; min-height: 0; }
.g3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3cqw; min-height: 0; }
.g4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1cqw; min-height: 0; }
.g21 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5cqw; min-height: 0; }
.g12 { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5cqw; min-height: 0; }
.g32 { display: grid; grid-template-columns: 3fr 2fr; gap: 1.5cqw; min-height: 0; }
.rows1 { grid-template-rows: minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 1.1cqw; min-height: 0; }
.stack.spread { justify-content: space-between; }
.stack.tight { gap: .6cqw; }

/* ==================== 表紙 ==================== */
.page.cover { background: var(--ink); color: #fff; }
.cover-body { position: absolute; inset: 0; z-index: 2; padding: 8cqw 5.9cqw 5cqw; display: flex; flex-direction: column; }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.62); z-index: 0; }
.cover .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,11,.86) 0%, rgba(11,11,11,.62) 40%, rgba(11,11,11,.94) 100%);
}
.cover-top { display: flex; align-items: flex-start; justify-content: space-between; flex: 0 0 auto; }
.cover-logo { width: 22cqw; height: auto; display: block; }
.cover-brand { font-family: var(--en); font-weight: 800; font-size: 1.16cqw; letter-spacing: .3em; color: var(--silver); text-align: right; line-height: 1.9; }
.cover-mid { margin-top: auto; flex: 0 0 auto; }
.cover h1 {
  font-family: var(--en); font-weight: 900; font-size: 15cqw; line-height: .82;
  letter-spacing: -.045em; margin: 0; color: #fff; text-transform: uppercase;
}
.cover h1 .l2 { display: block; font-weight: 300; color: var(--silver); letter-spacing: -.03em; }
.cover .cdate {
  font-family: var(--en); font-weight: 900; font-size: 4.6cqw; letter-spacing: -.01em;
  margin-top: 3cqw; color: #fff; line-height: 1;
}
.cover .cdate .dw { font-size: 1.7cqw; letter-spacing: .24em; color: var(--silver); margin-left: 1cqw; }
.cover .crule { height: .18cqw; background: rgba(255,255,255,.5); margin: 2.6cqw 0 2cqw; }
.cover .cven { display: flex; gap: 4cqw; }
.cover .cven .v { }
.cover .cven .v .t { font-family: var(--en); font-weight: 800; font-size: .98cqw; letter-spacing: .24em; color: var(--silver); }
.cover .cven .v .n { font-family: var(--en); font-weight: 800; font-size: 2.1cqw; letter-spacing: .01em; line-height: 1.3; color: #fff; }
.cover-foot {
  margin-top: 0; padding-top: 5cqw; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2cqw; flex: 0 0 auto;
}
.cover-foot .meta { font-family: var(--en); font-weight: 700; font-size: 1.1cqw; letter-spacing: .14em; color: var(--silver); line-height: 1.9; }
.cover-foot .meta b { color: #fff; }
.cover-foot .note2 { font-size: 1.06cqw; color: var(--dfg-2); line-height: 1.6; max-width: 46cqw; text-align: right; }

/* ==================== 章扉 ==================== */
.divider-body { position: absolute; inset: 0; padding: 12cqw 5.9cqw 5cqw; display: flex; flex-direction: column; }
.divider-body .dnum {
  font-family: var(--en); font-weight: 900; font-size: 24cqw; line-height: .78;
  letter-spacing: -.05em; color: rgba(255,255,255,.14);
}
.divider-body .den {
  font-family: var(--en); font-weight: 900; font-size: 7cqw; line-height: .95;
  letter-spacing: -.03em; color: #fff; text-transform: uppercase; margin-top: -3.4cqw;
}
.divider-body .djp { font-size: 2.2cqw; font-weight: 500; letter-spacing: .14em; color: var(--silver); margin-top: 1.2cqw; }
.divider-body .dtoc { display: flex; flex-direction: column; gap: .75cqw; margin-top: auto; }
.divider-body .dtoc .it { display: flex; gap: 1.2cqw; align-items: baseline; font-size: 1.44cqw; color: var(--dfg-2); }
.divider-body .dtoc .it .n { font-family: var(--en); font-weight: 800; font-size: 1.14cqw; letter-spacing: .1em; color: #fff; min-width: 3.4cqw; }
.divider-body .dfoot {
  margin-top: 3.2cqw; padding-top: 1cqw; border-top: .1cqw solid rgba(255,255,255,.24);
  display: flex; align-items: baseline;
  font-family: var(--en); font-weight: 700; font-size: 1.1cqw; letter-spacing: .18em;
  color: var(--dfg-3); text-transform: uppercase;
}
.divider-body .dfoot .folio { margin-left: auto; font-size: 1.6cqw; font-weight: 900; letter-spacing: .04em; color: #fff; }

/* ==================== ツールバー（印刷されない） ==================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 100;
  background: rgba(11,11,11,.97); backdrop-filter: blur(8px); color: #fff;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.tb-title { font-size: 13px; letter-spacing: .04em; color: #b9babd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-title b { color: #fff; font-weight: 700; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-pos { font-family: var(--en); font-weight: 700; font-size: 13px; letter-spacing: .1em; color: #a8a9ad; }
.btn {
  font-family: var(--jp); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.45);
  padding: 7px 13px; cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap;
}
.btn:hover { background: rgba(255,255,255,.14); }
.btn.primary { background: #fff; color: #0b0b0b; border-color: #fff; }
.progress { position: fixed; top: 54px; left: 0; height: 2px; background: #fff; width: 0; z-index: 101; }
.ovf {
  position: absolute; top: 0; left: 0; z-index: 50; background: #0b0b0b; color: #fff;
  font-family: var(--en); font-weight: 800; font-size: 11px; letter-spacing: .1em; padding: 5px 9px;
  outline: 2px solid #fff;
}
.tb-fit { font-size: 12px; letter-spacing: .06em; color: #a8a9ad; }
.tb-fit.ng { color: #fff; font-weight: 700; background: #b3251a; padding: 3px 7px; }

/* ==================== 画面が狭いとき（スマホ） ====================
   A4の版面はそのまま。縮めると読めないので、最低幅を確保して
   横スクロール＋ピンチズームで見てもらう。iPad は等倍で収まる。 */
@media (max-width: 780px) {
  .sheet { align-items: flex-start; padding: 64px 10px 64px; }
  .page { min-width: 720px; }
  .tb-title { font-size: 11px; }
}

/* 凡例を3列にする（プロット項目が多い平面図用） */
.legend.c3 { grid-template-columns: repeat(3, 1fr); gap: .26cqw 1.2cqw; }
.legend.c3 .li { font-size: 1.04cqw; }
.legend.c3 .li .n { font-size: .92cqw; min-width: 1.9cqw; height: 1.5cqw; }

/* 出演者スケジュール表のように行が多い表 */
table.tbl.tight th, table.tbl.tight td { padding: .5cqw .55cqw; }
table.tbl.tight { font-size: 1.14cqw; }

/* 装飾カードの派生 */
.deco.one .dimg { grid-template-columns: 1fr; }
.deco.three .dimg { grid-template-columns: repeat(3, 1fr); }
.deco.slim .dimg .ph, .deco.slim .dimg .slot { aspect-ratio: 3 / 2; }

/* 表紙は黒地なので、TBC チップは白抜きに反転させる */
.page.cover .tbc { background: #fff; color: var(--ink); }

/* ---- ガント微調整 ---- */
.gantt .lane {
  flex-direction: column; align-items: flex-start; justify-content: center;
  line-height: 1.25; padding: .3cqw .6cqw .3cqw 0;
}
.gantt .cellrow { min-height: 6.4cqw; }
.gantt .bar { top: 12%; height: 34%; }
.gantt .bar.b2 { top: 54%; }
/* 幅の狭い帯はラベルを右にはみ出させて読ませる（隣に帯が無い段だけ） */
.gantt .bar.out { overflow: visible; }


/* カードを自然な高さのまま、行間に余りを均等配分する（写真を潰さないため） */
.gspread { align-content: space-between; }

/* 縦積みの中身を等分に伸ばす（緊急連絡先のように「大きく読ませたい」面で使う） */
.stack.even > * { flex: 1 1 0; min-height: 0; }
.box.vc { display: flex; flex-direction: column; justify-content: center; }

/* 体制図がページの高さいっぱいを使うとき。各段を等分に伸ばし、
   氏名・TEL を後から書き込める余白をカード内に確保する */
.org.grow .tier { flex: 1 1 0; min-height: 0; }
.org.grow .conn { flex: 0 0 auto; }
.org.grow .oc { justify-content: center; }

/* 進行（.tl）をページの高さいっぱいに伸ばす。行を等分にするので
   時刻の間隔が空き、現場で追いやすくなる（レールの線も途切れない） */
.tl.fill { height: 100%; }
.tl.fill .row { flex: 1 1 0; min-height: 0; }