/* ============================================================
   style.css — CONVERSE 2FACED LAUNCH EVENT 企画提案書
   設計方針:
   - 各 .page = A4横(297:210)。container-type:inline-size を持ち、
     内部の文字・余白はすべて cqw(ページ幅の%) で指定。
     → 画面でも印刷(A4横)でもレイアウト比率が完全に一致する。
   - 商品の「2つの顔」を版面に落とす: 黒 と グリーン の二分割。
   - 色は 黒 / 白 / グリーン(実物採色) / クリーム の4色のみ。
   ============================================================ */

:root {
  /* 墨と紙 */
  --ink:      #0b0d0c;
  --ink-2:    #4a4f4c;
  --ink-3:    #868b88;
  --ink-4:    #b9bdba;
  --line:     #e0e2e0;
  --line-2:   #f0f1f0;
  --paper:    #ffffff;
  --paper-2:  #f5f5f3;

  /* 2FACED の2色（実物写真から採色） */
  --green:      #23694c;
  --green-lite: #408b6c;
  --green-deep: #12382a;
  --green-pale: #eef4f1;
  --cream:      #e8e3d4;

  /* 書体 */
  --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: 1180px;
}

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

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

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

.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 40px rgba(0, 0, 0, .18);
}

.pad {
  position: absolute;
  inset: 0;
  padding: 4.2cqw 5.2cqw 3.8cqw;
  display: flex;
  flex-direction: column;
}
.pad.wide  { padding-left: 3.8cqw; padding-right: 3.8cqw; }
.pad.tight { padding-top: 3.4cqw; }

/* ------------------------ ページ見出し ------------------------ */
.phead {
  display: flex;
  align-items: flex-end;
  gap: 1.4cqw;
  padding-bottom: 1cqw;
  border-bottom: .18cqw solid var(--ink);
  flex: 0 0 auto;
}
.phead .pnum {
  font-family: var(--en);
  font-weight: 700;
  font-size: 1.35cqw;
  letter-spacing: .08em;
  color: var(--green);
  line-height: 1;
  padding-bottom: .12cqw;
}
.phead .peng {
  font-family: var(--en);
  font-weight: 800;
  font-size: 2.05cqw;
  letter-spacing: -.005em;
  line-height: 1;
  text-transform: uppercase;
}
.phead .ptitle {
  font-size: 1.28cqw;
  font-weight: 500;
  letter-spacing: .07em;
  color: var(--ink-2);
  line-height: 1;
  padding-bottom: .12cqw;
}
.phead .pright {
  margin-left: auto;
  font-family: var(--en);
  font-size: 1.02cqw;
  letter-spacing: .13em;
  color: var(--ink-3);
  line-height: 1;
  padding-bottom: .16cqw;
  text-transform: uppercase;
}

.folio {
  position: absolute;
  right: 3.2cqw;
  bottom: 1.8cqw;
  font-family: var(--en);
  font-size: .95cqw;
  letter-spacing: .18em;
  color: var(--ink-4);
  z-index: 4;
}

/* リード文 */
.lead {
  font-size: 1.34cqw;
  line-height: 1.9;
  color: var(--ink-2);
  letter-spacing: .02em;
  margin: 1.5cqw 0 0;
  max-width: 62cqw;
}
.lead b { color: var(--ink); font-weight: 700; }
.lead .g { color: var(--green); font-weight: 700; }

/* 汎用 */
.grow { flex: 1 1 auto; min-height: 0; }
.mt1 { margin-top: 1cqw; } .mt2 { margin-top: 2cqw; } .mt3 { margin-top: 3cqw; }
.en  { font-family: var(--en); }
.g   { color: var(--green); }

/* ============================ 表紙 ============================ */
.page.cover { background: var(--ink); color: #fff; }
.cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .72;
}
.cover .scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(11,13,12,.94) 0%, rgba(11,13,12,.78) 38%, rgba(11,13,12,.12) 70%),
    linear-gradient(0deg, rgba(11,13,12,.7) 0%, rgba(11,13,12,0) 45%);
}
/* 表紙の斜め二分割（＝2つの顔） */
.cover .split {
  position: absolute; inset: 0; z-index: 2;
  clip-path: polygon(0 0, 30.5% 0, 20.5% 100%, 0 100%);
  background: var(--green);
  mix-blend-mode: multiply;
  opacity: .92;
}
.cover-body {
  position: absolute; inset: 0; z-index: 3;
  padding: 4.6cqw 5.2cqw 4.2cqw;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cover-top { display: flex; align-items: flex-start; justify-content: space-between; }
.cover-logo { height: 1.55cqw; width: auto; display: block; }
.cover-date {
  font-family: var(--en); font-size: 1cqw; letter-spacing: .2em;
  color: rgba(255,255,255,.62);
}
.cover h1 {
  font-family: var(--en);
  font-weight: 900;
  font-size: 8.6cqw;
  line-height: .88;
  letter-spacing: -.028em;
  margin: 0;
  text-transform: uppercase;
}
.cover h1 .thin { font-weight: 300; letter-spacing: -.01em; }
.cover .sub {
  font-size: 1.5cqw; font-weight: 500; letter-spacing: .13em;
  margin-top: 1.5cqw; color: rgba(255,255,255,.9);
}
.cover .crule {
  width: 9cqw; height: .3cqw; background: var(--green-lite);
  margin: 2cqw 0 1.5cqw;
}
.cover .venue {
  font-family: var(--en); font-size: 1.22cqw; letter-spacing: .16em;
  color: rgba(255,255,255,.78); text-transform: uppercase;
}
.cover .venue-jp {
  font-size: 1.02cqw; letter-spacing: .1em; color: rgba(255,255,255,.55);
  margin-top: .5cqw;
}
.cover-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.2cqw;
}
.cover-foot .by {
  font-size: .95cqw; letter-spacing: .1em; color: rgba(255,255,255,.55);
}
.cover-foot .tag {
  font-family: var(--en); font-size: .88cqw; letter-spacing: .22em;
  color: rgba(255,255,255,.4); text-transform: uppercase;
}

/* ============================ 黒面 ============================ */
.page.dark { background: var(--ink); color: #fff; }
.page.dark .phead { border-bottom-color: rgba(255,255,255,.32); }
.page.dark .phead .ptitle { color: rgba(255,255,255,.62); }
.page.dark .phead .pright { color: rgba(255,255,255,.38); }
.page.dark .phead .pnum   { color: var(--green-lite); }
.page.dark .lead { color: rgba(255,255,255,.76); }
.page.dark .lead b { color: #fff; }
.page.dark .lead .g { color: var(--green-lite); }
.page.dark .folio { color: rgba(255,255,255,.34); }

/* ============================ 汎用パーツ ============================ */

/* 小見出し */
.kicker {
  font-family: var(--en); font-size: .95cqw; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--green);
}
.dark .kicker { color: var(--green-lite); }
.h2 {
  font-size: 2.05cqw; font-weight: 700; letter-spacing: .03em;
  line-height: 1.35; margin: .7cqw 0 0;
}
.h3 {
  font-size: 1.4cqw; font-weight: 700; letter-spacing: .04em;
  line-height: 1.45; margin: 0;
}
.body {
  font-size: 1.14cqw; line-height: 1.95; color: var(--ink-2);
  letter-spacing: .015em;
}
.dark .body { color: rgba(255,255,255,.72); }
.body b { color: var(--ink); font-weight: 700; }
.dark .body b { color: #fff; }
.small {
  font-size: .96cqw; line-height: 1.8; color: var(--ink-3); letter-spacing: .01em;
}
.dark .small { color: rgba(255,255,255,.5); }

/* 注釈バー */
.note {
  font-size: .94cqw; line-height: 1.75; color: var(--ink-3);
  border-left: .2cqw solid var(--line); padding-left: .9cqw;
}
.note.warn { border-left-color: var(--green); color: var(--ink-2); }
.dark .note { border-left-color: rgba(255,255,255,.25); color: rgba(255,255,255,.55); }

/* 未確定マーク */
.tbd {
  display: inline-block;
  font-family: var(--en); font-size: .72cqw; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--green);
  padding: .12cqw .5cqw; border-radius: .15cqw;
  vertical-align: .12em; margin-left: .4cqw;
}

/* カラム */
.cols { display: grid; gap: 2cqw; }
.c2 { grid-template-columns: 1fr 1fr; }
.c3 { grid-template-columns: repeat(3, 1fr); }
.c4 { grid-template-columns: repeat(4, 1fr); }
.c-5-7 { grid-template-columns: 5fr 7fr; }
.c-7-5 { grid-template-columns: 7fr 5fr; }
.c-4-8 { grid-template-columns: 4fr 8fr; }
.c-6-6 { grid-template-columns: 1fr 1fr; }

/* カード */
.card {
  border: 1px solid var(--line);
  padding: 1.3cqw 1.4cqw;
  display: flex; flex-direction: column; gap: .55cqw;
}
.card .cnum {
  font-family: var(--en); font-size: 1.05cqw; font-weight: 800;
  letter-spacing: .06em; color: var(--green);
}
.card .ctitle { font-size: 1.2cqw; font-weight: 700; letter-spacing: .04em; }
.card .ctext  { font-size: .98cqw; line-height: 1.8; color: var(--ink-2); }
.card.fill { background: var(--paper-2); border-color: transparent; }
.card.ink  { background: var(--ink); border-color: var(--ink); color: #fff; }
.card.ink .ctext { color: rgba(255,255,255,.72); }
.card.ink .cnum  { color: var(--green-lite); }
.card.gr   { background: var(--green); border-color: var(--green); color: #fff; }
.card.gr .ctext { color: rgba(255,255,255,.82); }
.card.gr .cnum  { color: rgba(255,255,255,.62); }

/* 表 */
.tbl { width: 100%; border-collapse: collapse; font-size: 1.02cqw; }
.tbl th, .tbl td {
  text-align: left; padding: .62cqw .8cqw;
  border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6;
}
.tbl thead th {
  font-size: .88cqw; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-3); border-bottom: .16cqw solid var(--ink);
  text-transform: uppercase; white-space: nowrap;
}
.tbl td.num, .tbl th.num {
  text-align: right; font-family: var(--en); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .tot td { border-top: .16cqw solid var(--ink); border-bottom: none; font-weight: 700; }
.tbl .tot td.num { color: var(--green); }
.dark .tbl th, .dark .tbl td { border-bottom-color: rgba(255,255,255,.16); }
.dark .tbl thead th { color: rgba(255,255,255,.5); border-bottom-color: rgba(255,255,255,.5); }
.dark .tbl td { color: rgba(255,255,255,.82); }

/* ============================ 02 サマリー ============================ */
.sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 1.6cqw; flex: 1 1 auto; }
.sum-cell { padding: 1.6cqw 1.5cqw 1.5cqw 0; border-top: .18cqw solid var(--ink); display: flex; flex-direction: column; }
.sum-cell + .sum-cell { padding-left: 1.5cqw; }
.sum-cell .sk {
  font-family: var(--en); font-size: .88cqw; font-weight: 700;
  letter-spacing: .18em; color: var(--green); text-transform: uppercase;
}
.sum-cell .sv { font-size: 1.45cqw; font-weight: 700; margin-top: .7cqw; line-height: 1.5; }
.sum-cell .sd { font-size: .95cqw; line-height: 1.8; color: var(--ink-2); margin-top: auto; padding-top: 1.2cqw; }

.bigstate {
  background: var(--ink); color: #fff;
  padding: 2.6cqw 2.6cqw; margin-top: 2cqw;
  display: flex; align-items: center; gap: 2.6cqw;
}
.bigstate .bs-l {
  font-family: var(--en); font-weight: 900; font-size: 4cqw;
  line-height: .95; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
}
.bigstate .bs-l em { font-style: normal; color: var(--green-lite); }
.bigstate .bs-r { font-size: 1.16cqw; line-height: 2; color: rgba(255,255,255,.78); }
.bigstate .bs-r b { color: #fff; }

/* ============================ 写真 ============================ */
.ph { position: relative; overflow: hidden; background: var(--paper-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph .cap {
  position: absolute; left: 0; bottom: 0;
  background: rgba(11,13,12,.78); color: #fff;
  font-size: .76cqw; letter-spacing: .06em; padding: .35cqw .7cqw;
}
.figcap { font-size: .88cqw; color: var(--ink-3); margin-top: .45cqw; letter-spacing: .03em; }

/* ============================ 03 プロダクト ============================ */
.spec { display: grid; grid-template-columns: auto 1fr; gap: .95cqw 1.4cqw; font-size: 1.04cqw; }
.spec dt {
  font-family: var(--en); font-size: .86cqw; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-3); text-transform: uppercase; padding-top: .22cqw; white-space: nowrap;
}
.spec dd { margin: 0; line-height: 1.7; }
.dark .spec dt { color: rgba(255,255,255,.45); }

.quote {
  border-left: .26cqw solid var(--green);
  padding: .3cqw 0 .3cqw 1.2cqw;
  font-size: 1.2cqw; line-height: 1.85; letter-spacing: .02em;
}
.quote .src { display: block; font-size: .8cqw; color: var(--ink-3); margin-top: .6cqw; letter-spacing: .06em; }
.dark .quote { border-left-color: var(--green-lite); }
.dark .quote .src { color: rgba(255,255,255,.45); }

/* 2色スウォッチ */
.sw-row { display: flex; gap: 1cqw; }
.sw { flex: 1; }
.sw .chip { height: 3.2cqw; }
.sw .chip.gr { background: var(--green); }
.sw .chip.bk { background: var(--ink); }
.sw .nm { font-family: var(--en); font-size: .8cqw; font-weight: 700; letter-spacing: .12em; margin-top: .45cqw; }
.sw .hx { font-family: var(--en); font-size: .72cqw; color: var(--ink-3); letter-spacing: .08em; }

/* ============================ 04 課題 ============================ */
.walls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; flex: 1 1 auto; }
.wall {
  border-top: .22cqw solid var(--ink); padding-top: 1.2cqw;
  display: flex; flex-direction: column; gap: .8cqw;
}
.wall .wn {
  font-family: var(--en); font-size: 4.2cqw; font-weight: 900;
  line-height: .9; letter-spacing: -.02em; color: var(--line);
}
.wall .wt { font-size: 1.34cqw; font-weight: 700; line-height: 1.5; letter-spacing: .03em; }
.wall .wb { font-size: 1.02cqw; line-height: 1.95; color: var(--ink-2); }
.dark .wall { border-top-color: rgba(255,255,255,.5); }
.dark .wall .wn { color: rgba(255,255,255,.2); }
.dark .wall .wb { color: rgba(255,255,255,.7); }

.answer {
  margin-top: 2cqw; background: var(--green); color: #fff;
  padding: 2cqw 2.2cqw; display: flex; align-items: baseline; gap: 1.4cqw;
}
.answer .al {
  font-family: var(--en); font-size: .82cqw; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.65); white-space: nowrap;
}
.answer .ar { font-size: 1.55cqw; font-weight: 700; line-height: 1.6; letter-spacing: .04em; }

/* ============================ 05 コンセプト ============================ */
.page.concept { background: var(--ink); color: #fff; }
.cc-split {
  position: absolute; inset: 0; z-index: 0;
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 40% 100%);
  background: var(--green);
}
.cc-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.cc-title {
  font-family: var(--en); font-weight: 900; font-size: 7.6cqw;
  line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin: 0;
}
.cc-jp { font-size: 1.85cqw; font-weight: 500; letter-spacing: .1em; margin-top: 1.6cqw; line-height: 1.7; }
.cc-lead { font-size: 1.2cqw; line-height: 2; color: rgba(255,255,255,.78); margin-top: 1.4cqw; max-width: 40cqw; }
.cc-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqw; margin-top: 3.4cqw; max-width: 56cqw; }
.cc-face { border-top: .18cqw solid rgba(255,255,255,.5); padding-top: .9cqw; }
.cc-face .fn { font-family: var(--en); font-size: .82cqw; font-weight: 700; letter-spacing: .2em; color: rgba(255,255,255,.6); }
.cc-face .ft { font-family: var(--en); font-size: 2.1cqw; font-weight: 800; letter-spacing: -.005em; margin-top: .35cqw; }
.cc-face .fb { font-size: 1cqw; line-height: 1.9; color: rgba(255,255,255,.72); margin-top: .55cqw; }

/* ============================ 06 会場 ============================ */
.floors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.floor {
  border: 1px solid var(--line); display: flex; flex-direction: column;
}
.floor .fh {
  background: var(--ink); color: #fff; padding: .75cqw 1cqw;
  display: flex; align-items: baseline; gap: .7cqw;
}
.floor .fh .lv { font-family: var(--en); font-size: 1.75cqw; font-weight: 900; letter-spacing: -.01em; }
.floor .fh .th { font-family: var(--en); font-size: .88cqw; font-weight: 700; letter-spacing: .18em; color: var(--green-lite); }
.floor .fb { padding: 1.2cqw; display: flex; flex-direction: column; gap: .75cqw; flex: 1 1 auto; }
.floor .fr { display: flex; justify-content: space-between; font-size: .96cqw; line-height: 1.55; }
.floor .fr .k { color: var(--ink-3); }
.floor .fr .v { font-family: var(--en); font-variant-numeric: tabular-nums; font-weight: 500; }
.floor .fd { font-size: .95cqw; line-height: 1.85; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: .6cqw; margin-top: .2cqw; }

.stack { display: flex; flex-direction: column; gap: .3cqw; }
.stack .lvl {
  display: flex; align-items: center; gap: .8cqw;
  border: 1px solid var(--line); padding: .85cqw .9cqw; font-size: .98cqw;
}
.stack .lvl .b { font-family: var(--en); font-weight: 800; font-size: 1cqw; width: 3.2cqw; }
.stack .lvl.on { background: var(--green); border-color: var(--green); color: #fff; }
.stack .lvl.on .k { color: rgba(255,255,255,.7); }

/* ============================ 07-09 ゾーニング ============================ */
.zone-wrap { display: grid; grid-template-columns: 6.6fr 5.4fr; gap: 2.4cqw; }
.plan {
  position: relative; border: 1px solid var(--line); background: #fff;
  overflow: hidden; align-self: start;
}
.plan img { width: 100%; display: block; }
.pin {
  position: absolute;
  width: 2cqw; height: 2cqw;
  margin: -1cqw 0 0 -1cqw;
  border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--en); font-weight: 800; font-size: 1cqw;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .15cqw .5cqw rgba(0,0,0,.3);
  border: .14cqw solid #fff;
}
.pin.bk { background: var(--ink); }
.zlist { display: flex; flex-direction: column; gap: 1.05cqw; }
.zitem { display: grid; grid-template-columns: 2cqw 1fr; gap: .9cqw; align-items: start; }
.zitem .zn {
  width: 2cqw; height: 2cqw; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--en); font-weight: 800; font-size: 1.02cqw;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.zitem.bk .zn { background: var(--ink); }
.zitem .zt { font-size: 1.14cqw; font-weight: 700; letter-spacing: .03em; line-height: 1.4; }
.zitem .zb { font-size: .95cqw; line-height: 1.85; color: var(--ink-2); margin-top: .22cqw; }

.zmeta {
  display: flex; gap: 1.6cqw; margin-top: 1cqw; padding-top: .9cqw;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.zmeta div { font-size: .9cqw; color: var(--ink-3); }
.zmeta div b { display: block; font-family: var(--en); font-size: 1.2cqw; color: var(--ink); font-weight: 700; margin-top: .15cqw; }

/* ゾーニング下部の帯（造作 / 既存活用 / 運用の要点） */
.zband {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 1.8cqw; flex: 1 1 auto;
}
.zband > div { padding: 1.3cqw 1.6cqw 0 0; border-top: .18cqw solid var(--ink); }
.zband > div + div { padding-left: 1.6cqw; }
.zband .bt {
  font-family: var(--en); font-size: .84cqw; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--green);
}
.zband .bj { font-size: 1.05cqw; font-weight: 700; letter-spacing: .04em; margin-top: .4cqw; }
.zband .bb { font-size: .95cqw; line-height: 1.9; color: var(--ink-2); margin-top: .6cqw; }
.zband .bb b { color: var(--ink); font-weight: 700; }

/* ============================ 10 ジャーニー ============================ */
.jrny { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin-top: 2.2cqw; flex: 1 1 auto; align-content: center; }
.jstep { position: relative; padding: 0 1cqw 0 0; display: flex; flex-direction: column; }
.jstep .jbar { height: .34cqw; background: var(--line); position: relative; }
.jstep.on .jbar { background: var(--green); }
.jstep .jbar::after {
  content: ''; position: absolute; left: 0; top: -.42cqw;
  width: 1.1cqw; height: 1.1cqw; border-radius: 50%;
  background: var(--paper); border: .26cqw solid var(--line);
}
.jstep.on .jbar::after { border-color: var(--green); background: var(--green); }
.jstep .jn { font-family: var(--en); font-size: .86cqw; font-weight: 700; letter-spacing: .16em; color: var(--ink-3); margin-top: 1.1cqw; }
.jstep.on .jn { color: var(--green); }
.jstep .jt { font-size: 1.08cqw; font-weight: 700; line-height: 1.45; margin-top: .35cqw; letter-spacing: .02em; }
.jstep .jb { font-size: .9cqw; line-height: 1.85; color: var(--ink-2); margin-top: .5cqw; }
.jstep .jf {
  font-family: var(--en); font-size: .7cqw; font-weight: 700; letter-spacing: .14em;
  color: #fff; background: var(--ink); display: inline-block; align-self: flex-start;
  padding: .18cqw .55cqw; margin-top: .8cqw;
}
.jstep.on .jf { background: var(--green); }

.goal {
  margin-top: 2cqw; border: .18cqw solid var(--ink); padding: 1.7cqw 2cqw;
  display: flex; align-items: center; gap: 2cqw;
}
.goal .gl {
  font-family: var(--en); font-size: .82cqw; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green); white-space: nowrap;
}
.goal .gr2 { font-size: 1.42cqw; font-weight: 700; line-height: 1.6; letter-spacing: .03em; }

/* ============================ 11 コンテンツ ============================ */
.conts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; flex: 1 1 auto; grid-auto-rows: 1fr; }
.cont {
  border: 1px solid var(--line); display: flex; flex-direction: column;
}
.cont .ch {
  padding: .8cqw 1cqw .7cqw; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .6cqw;
}
.cont .ch .cn { font-family: var(--en); font-size: 1.1cqw; font-weight: 900; color: var(--green); }
.cont .ch .cf {
  margin-left: auto; font-family: var(--en); font-size: .7cqw; font-weight: 700;
  letter-spacing: .12em; color: #fff; background: var(--ink); padding: .1cqw .45cqw;
}
.cont .cb { padding: 1.2cqw 1.3cqw 1.3cqw; display: flex; flex-direction: column; gap: .7cqw; flex: 1 1 auto; }
.cont .ct { font-family: var(--en); font-size: 1.32cqw; font-weight: 800; letter-spacing: -.005em; }
.cont .cj { font-size: 1cqw; font-weight: 700; letter-spacing: .03em; }
.cont .cd { font-size: .94cqw; line-height: 1.9; color: var(--ink-2); }

/* ============================ 13 タイムテーブル ============================ */
.tt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; flex: 1 1 auto; }
.day { display: flex; flex-direction: column; }
.day .dh {
  background: var(--ink); color: #fff; padding: .9cqw 1cqw;
  display: flex; align-items: baseline; gap: .7cqw;
}
.day.d2 .dh { background: var(--green); }
.day .dh .dn { font-family: var(--en); font-size: 1.15cqw; font-weight: 900; letter-spacing: .04em; }
.day .dh .dd { font-size: .82cqw; color: rgba(255,255,255,.7); margin-left: auto; }
.day .dl { border: 1px solid var(--line); border-top: none; flex: 1 1 auto; display: flex; flex-direction: column; }
.day .dr { display: grid; grid-template-columns: 4.6cqw 1fr; gap: .8cqw; padding: .7cqw 1cqw; border-bottom: 1px solid var(--line-2); flex: 1 1 auto; align-content: center; }
.day .dr:last-child { border-bottom: none; }
.day .dr .tm { font-family: var(--en); font-size: .92cqw; font-weight: 700; color: var(--green); letter-spacing: .02em; }
.day .dr .ev { font-size: .92cqw; line-height: 1.6; }
.day .dr.hi { background: var(--green-pale); }

/* ============================ 15 PR ============================ */
.phase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; flex: 1 1 auto; }
.phase > div { padding: 1.6cqw 1.6cqw 1.3cqw 0; border-top: .18cqw solid var(--ink); }
.phase > div + div { padding-left: 1.4cqw; }
.phase .pn { font-family: var(--en); font-size: .8cqw; font-weight: 700; letter-spacing: .18em; color: var(--green); }
.phase .pt { font-size: 1.34cqw; font-weight: 700; margin-top: .5cqw; letter-spacing: .03em; }
.phase ul { margin: 1cqw 0 0; padding-left: 1.1cqw; }
.phase li { font-size: .98cqw; line-height: 1.95; color: var(--ink-2); margin-bottom: .18cqw; }

/* ============================ 16 KPI ============================ */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.kpi { border-top: .22cqw solid var(--ink); padding-top: 1.1cqw; }
.kpi .kk { font-size: 1cqw; font-weight: 700; letter-spacing: .03em; }
.kpi .kv {
  font-family: var(--en); font-size: 2.9cqw; font-weight: 900;
  letter-spacing: -.02em; color: var(--green); line-height: 1.1; margin-top: .4cqw;
}
.kpi .kv small { font-size: .95cqw; font-weight: 700; letter-spacing: .02em; }
.kpi .kd { font-size: .92cqw; line-height: 1.85; color: var(--ink-2); margin-top: .35cqw; }

/* ============================ 17 進行 ============================ */
.gantt { width: 100%; border-collapse: collapse; font-size: .96cqw; }
.gantt th, .gantt td { border: 1px solid var(--line); padding: 1.05cqw .7cqw; }
.gantt thead th {
  font-family: var(--en); font-size: .84cqw; letter-spacing: .08em;
  color: var(--ink-3); background: var(--paper-2); text-align: center; font-weight: 700;
}
.gantt td.lb { text-align: left; width: 22%; font-weight: 500; }
.gantt td.bar { padding: 0; }
.gantt td.bar span { display: block; height: 2.7cqw; }
.gantt td.bar span.on { background: var(--green); }
.gantt td.bar span.on2 { background: var(--green-lite); }
.gantt td.bar span.on3 { background: var(--ink); }

/* ============================ 19 ネクスト ============================ */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqw 2.6cqw; }
.check { display: grid; grid-template-columns: 1.35cqw 1fr; gap: .75cqw; align-items: start; }
.check .cb2 {
  width: 1.35cqw; height: 1.35cqw; border: .16cqw solid var(--ink);
  flex: 0 0 auto; margin-top: .1cqw;
}
.dark .check .cb2 { border-color: rgba(255,255,255,.7); }
.check .ck { font-size: 1.1cqw; font-weight: 700; letter-spacing: .03em; line-height: 1.4; }
.check .cv2 { font-size: .94cqw; line-height: 1.8; color: var(--ink-2); margin-top: .15cqw; }
.dark .check .cv2 { color: rgba(255,255,255,.62); }

.closing-title {
  font-family: var(--en); font-weight: 900; font-size: 6cqw;
  line-height: .95; letter-spacing: -.03em; text-transform: uppercase;
}

/* ============================ 画面用 UI ============================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 100;
  background: rgba(11,13,12,.94); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; color: #fff;
}
.tb-title { font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.8); }
.tb-title b { color: #fff; font-weight: 700; }
.tb-right { display: flex; align-items: center; gap: 14px; }
.tb-pos { font-family: var(--en); font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,.5); }
.btn {
  font-family: var(--jp); font-size: 12px; letter-spacing: .06em;
  padding: 8px 16px; border: 1px solid rgba(255,255,255,.3);
  background: transparent; color: #fff; cursor: pointer; border-radius: 2px;
}
.btn.primary { background: var(--green); border-color: var(--green); font-weight: 700; }
.btn:hover { opacity: .85; }
.progress { position: fixed; top: 54px; left: 0; height: 2px; background: var(--green-lite); z-index: 101; width: 0; }

@media (max-width: 640px) {
  .sheet { padding: 66px 8px 40px; }
  .tb-title { font-size: 11px; }
  .tb-pos { display: none; }
}

/* ---- 04 各壁に対する打ち手 ---- */
.wall .wa {
  margin-top: auto; padding-top: 1cqw;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: .7cqw;
  align-items: start;
}
.wall .wa .al2 {
  font-family: var(--en); font-size: .82cqw; font-weight: 700;
  letter-spacing: .14em; color: var(--green); padding-top: .18cqw;
}
.wall .wa .ab { font-size: 1cqw; line-height: 1.75; font-weight: 700; letter-spacing: .02em; }

/* ---- 11 コンテンツカードの実施条件 ---- */
.cont .cmeta {
  margin-top: auto; padding-top: 1cqw;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5cqw;
}
.cont .cmeta div { font-size: .78cqw; color: var(--ink-3); line-height: 1.5; }
.cont .cmeta div b {
  display: block; font-size: .92cqw; color: var(--ink);
  font-weight: 700; margin-top: .18cqw; letter-spacing: .01em;
}

/* ---- 15 PR: 各フェーズの狙い ---- */
.phase .paim {
  margin-top: auto; padding-top: 1cqw; margin-right: 1.6cqw;
  border-top: 1px solid var(--line);
  font-size: .92cqw; line-height: 1.75; color: var(--ink-2);
}
.phase .paim b { color: var(--green); font-weight: 700; display: block; margin-bottom: .25cqw; }
.phase > div { display: flex; flex-direction: column; }

/* 縦いっぱいに伸ばすグリッド（写真カラムを本文の高さに合わせる） */
.cols.grow { grid-auto-rows: minmax(0, 1fr); }