/* ============================================================
 * custom.css — ファネル月初報告（BUZZ紺×ブルー / Canva月初資料の雰囲気を再現）
 * theme.css（trust）のトークンを上書きし、Canva資料の
 * 「白地＋紺・水色の斜めストライプ＋紺ヘッダーバー」を実装する。
 * 案件固有の調整はすべてこのファイルだけに書く。
 * ============================================================ */

:root {
  /* BUZZ月初資料パレット */
  --buzz-navy:      #1B2A5E;
  --buzz-navy-deep: #131F49;
  --buzz-blue:      #1F7AE0;
  --buzz-sky:       #29ABE2;
  --buzz-pale:      #EAF3FB;

  /* テーマ上書き（trustの赤アクセント→BUZZブルー系へ） */
  --c-on-bg:      #182448;
  --c-heading:    var(--buzz-navy);
  --c-text:       #1F2A4E;
  --c-muted:      #5A688C;
  --c-surface:    #F4F8FC;
  --c-section:    var(--buzz-navy);
  --c-on-section: #FFFFFF;
  --c-accent:     var(--buzz-blue);
  --c-brand:      var(--buzz-navy);
  --c-brand-deep: var(--buzz-navy);
  --c-on-brand:   #FFFFFF;
  --c-emph-hl:    #8FD0F5;
  --c-border:     #D5E1F0;
  --card-border:  1px solid #D5E1F0;
  --accent-line-color: var(--buzz-blue);

  /* レターボックス（スライド外側）は淡ブルーグレー。白スライドと同化させない */
  --stage-bg: #DEE6F2;
}

/* スライド本体を白カードとして浮かせる（ステージ側のクロームなので影OK） */
.slide-canvas {
  box-shadow: 0 10px 44px rgba(19, 31, 73, 0.18), 0 0 0 1px rgba(19, 31, 73, 0.06);
}

/* カードは影なし・1px枠のフラット（Canvaのフラット感） */
.card, .o-item, .o-table, .stat-box, .metric, .ba-col, .vs-col,
.vstep-card, .checklist, .barchart {
  border: var(--card-border);
}

/* ── 斜めストライプ装飾（表紙・扉の四隅） ──
   45度の帯を束で置く。色は 紺 / ブルー / 水色 の3色。 */
.bz-deco { position: absolute; width: 30cqw; height: 30cqw; overflow: hidden; pointer-events: none; }
.bz-deco i { position: absolute; display: block; height: 2.1cqw; width: 46cqw; transform: rotate(45deg); }
.bz-deco.tr { top: 0; right: 0; }
.bz-deco.bl { bottom: 0; left: 0; transform: rotate(180deg); }
.bz-deco i:nth-child(1) { background: var(--buzz-sky);  top: -2cqw;   right: -16cqw; }
.bz-deco i:nth-child(2) { background: var(--buzz-navy); top: 2.4cqw;  right: -22cqw; }
.bz-deco i:nth-child(3) { background: var(--buzz-blue); top: 6.8cqw;  right: -30cqw; width: 34cqw; }
.bz-deco i:nth-child(4) { background: var(--buzz-navy-deep); top: 11.2cqw; right: -38cqw; width: 24cqw; height: 1.4cqw; }
.bz-deco.sm { width: 18cqw; height: 18cqw; }
.bz-deco.sm i { height: 1.4cqw; }
.bz-deco.sm i:nth-child(1) { top: -1.4cqw; right: -26cqw; }
.bz-deco.sm i:nth-child(2) { top: 1.6cqw;  right: -30cqw; }
.bz-deco.sm i:nth-child(3) { top: 4.6cqw;  right: -34cqw; }
.bz-deco.sm i:nth-child(4) { display: none; }

/* 装飾は出現アニメの対象外（transform上書きでrotateが消えるのを防ぐ＋静止させる） */
body.anim .slide > .bz-deco,
body.anim .slide > .bz-circle { opacity: 1 !important; transform: none !important; transition: none !important; }
body.anim .slide > .bz-deco.bl { transform: rotate(180deg) !important; }
/* 装飾の上にコンテンツを重ねる */
.slide.cover > :not(.bz-deco):not(.bz-circle),
.slide.section > :not(.bz-deco):not(.bz-circle) { position: relative; z-index: 1; }

/* ── 表紙 ── */
.slide.cover.bz-cover { align-items: center; justify-content: center; text-align: center; padding: 5cqw 7cqw; }
.bz-cover .cover-org { font-size: 1.35cqw; font-weight: 700; letter-spacing: 0.28em; color: var(--c-muted); }
.bz-cover .cover-title { font-size: 6cqw; font-weight: 900; letter-spacing: 0.12em; color: var(--buzz-navy); line-height: 1.3; }
.bz-cover .cover-sub { font-size: 1.5cqw; letter-spacing: 0.14em; color: var(--c-on-bg); font-weight: 500; }
.bz-cover .cover-note { font-size: 1.05cqw; color: var(--c-muted); letter-spacing: 0.04em; }

/* ── セクション扉（紺の全幅バンド＋水色の番号ブロック） ── */
.slide.section.bz-sec { gap: 2.6cqw; overflow: hidden; } /* サークル装飾のはみ出しでスクロールバーを出さない */
.slide.cover.bz-cover { overflow: hidden; }
.bz-secband {
  display: flex; align-items: stretch; width: 100%; text-align: left;
}
.bz-secband .num {
  background: var(--buzz-sky); color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 3.4cqw;
  display: flex; align-items: center; justify-content: center;
  padding: 1.6cqw 0; width: 11cqw; flex-shrink: 0;
}
.bz-secband .ttl {
  background: var(--buzz-navy); color: #fff;
  font-size: 3.1cqw; font-weight: 700; letter-spacing: 0.06em;
  display: flex; align-items: center; padding: 1.6cqw 3.4cqw; flex: 1;
}
.bz-sec .section-sub { font-size: 1.5cqw; color: var(--c-muted); max-width: none; }
/* 扉の淡色サークル装飾 */
.bz-circle { position: absolute; border-radius: 50%; background: var(--buzz-pale); pointer-events: none; }
.bz-circle.c1 { width: 26cqw; height: 26cqw; top: -10cqw; right: -8cqw; }
.bz-circle.c2 { width: 12cqw; height: 12cqw; bottom: -4cqw; left: 12cqw; }

/* ── コンテンツスライドのヘッダーバー（Canvaのタイトル帯） ── */
.bz-head { display: flex; align-items: stretch; width: 100%; flex-shrink: 0; }
.bz-head .num {
  background: var(--buzz-sky); color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.55cqw;
  display: flex; align-items: center; justify-content: center;
  padding: 0 1.5cqw; flex-shrink: 0;
}
.bz-head .ttl {
  background: var(--buzz-navy); color: #fff;
  font-size: 2.05cqw; font-weight: 700; letter-spacing: 0.07em; line-height: 1.5;
  padding: 0.85cqw 3.4cqw 0.85cqw 2.4cqw;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.6cqw) 100%, 0 100%);
}
.bz-head .tag {
  align-self: center; margin-left: auto;
  font-size: 1.05cqw; font-weight: 700; color: var(--buzz-blue);
  border: 1px solid var(--c-border); background: #fff; padding: 0.4cqw 1.2cqw;
}
/* 「最終報告」バッジ＝見出し帯（紺）の中・右端に、番号ブロックと同じスカイブルーの丸型で（daisuke 2026-09-18・赤の外置きは不採用） */
.bz-head .ttl { display: flex; align-items: center; gap: 1.5cqw; }
.bz-head .ttl-badge {
  background: var(--buzz-sky); color: #fff;
  font-size: 1.05cqw; font-weight: 700; letter-spacing: 0.12em; line-height: 1;
  padding: 0.45cqw 1.1cqw 0.4cqw; border-radius: 999px; white-space: nowrap; margin-left: 0.3cqw;
}
/* 計測履歴（「9/18 時点・9/4 報告から…」「計測終了 9/14」）は左下に小さく（daisuke 2026-09-18） */
.bz-foot .note .hist { font-size: 0.95cqw; color: var(--c-muted); opacity: 0.85; margin-top: 0.2cqw; }

/* ── KPIタイル ── */
.bz-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1cqw; width: 100%; }
.bz-kpis.c3 { grid-template-columns: repeat(3, 1fr); }
.bz-kpis.c5 { grid-template-columns: repeat(5, 1fr); }
.bz-kpis.c6 { grid-template-columns: repeat(6, 1fr); }
.bz-kpi {
  background: #fff; border: var(--card-border);
  padding: 1cqw 1.3cqw; display: flex; flex-direction: column; gap: 0.28cqw;
  min-width: 0;
}
.bz-kpi .k-label { font-size: 1cqw; font-weight: 700; color: var(--buzz-blue); letter-spacing: 0.02em; }
.bz-kpi .k-val { font-family: var(--font-mono); font-size: 1.95cqw; font-weight: 700; color: var(--buzz-navy); line-height: 1.15; white-space: nowrap; }
.bz-kpi .k-sub { font-size: 0.92cqw; color: var(--c-muted); line-height: 1.4; }
.bz-kpi.hero { background: var(--buzz-navy); border-color: var(--buzz-navy); }
.bz-kpi.hero .k-label { color: #9CC8F5; }
.bz-kpi.hero .k-val { color: #fff; }
.bz-kpi.hero .k-sub { color: #B9C6E4; }
.bz-kpi.good .k-val { color: var(--c-pos); }
.bz-kpi.bad .k-val { color: var(--c-neg); }

/* ── 横ファネル（ステージ→ステージ） ── */
.bz-funnel { display: flex; align-items: stretch; gap: 0.55cqw; width: 100%; }
.bz-fstage {
  flex: 1; background: #fff; border: var(--card-border);
  padding: 0.95cqw 0.6cqw; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.25cqw; min-width: 0;
}
.bz-fstage .f-name { font-size: 0.95cqw; font-weight: 700; color: var(--c-muted); white-space: nowrap; }
.bz-fstage .f-num { font-family: var(--font-mono); font-size: 1.75cqw; font-weight: 700; color: var(--buzz-navy); white-space: nowrap; }
.bz-fstage .f-rate { font-size: 0.88cqw; color: var(--buzz-blue); font-weight: 700; white-space: nowrap; }
.bz-fstage.last { background: var(--buzz-navy); border-color: var(--buzz-navy); }
.bz-fstage.last .f-name { color: #9CC8F5; }
.bz-fstage.last .f-num { color: #fff; }
.bz-fstage.last .f-rate { color: #8FD0F5; }
.bz-farrow { align-self: center; color: #A9B8D6; font-weight: 900; font-size: 1.3cqw; flex-shrink: 0; }

/* ── 出典フッター（左=注記・右=ボードへのリンク） ──
   ページ送りの透明クリック領域（.click-next/prev z-index:100）が画面端を覆うため、
   リンクを押せるようフッターを前面に出す */
.bz-foot { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; width: 100%; flex-shrink: 0; position: relative; z-index: 150; }
/* ページ送りの透明帯はスライド内容より常に手前（.slide-canvasのcontainがスタッキング文脈を
   作るためz-indexでは勝てない）。帯を細くして右下の出典リンクを露出させる */
.click-prev, .click-next { width: 6%; }
.bz-foot .note { font-size: 1cqw; color: var(--c-muted); line-height: 1.5; }
.bz-link {
  display: inline-flex; align-items: center; gap: 0.5cqw; flex-shrink: 0;
  font-size: 1cqw; font-weight: 700; color: var(--buzz-blue);
  border: 1px solid var(--c-border); background: #fff;
  padding: 0.4cqw 1.1cqw; text-decoration: none; white-space: nowrap;
}
.bz-link::after { content: '→'; }

/* ── コメントカード（本文は文字列 or 箇条書き） ── */
.bz-comment { background: var(--buzz-pale); border-left: 0.45cqw solid var(--buzz-sky); padding: 1.2cqw 1.9cqw; width: 100%; }
.bz-comment .c-tag { font-size: 1cqw; font-weight: 700; color: var(--buzz-blue); margin-bottom: 0.4cqw; }
.bz-comment .c-body { font-size: 1.32cqw; line-height: 1.7; color: var(--c-text); }
.bz-comment .c-list { margin: 0; padding-left: 1.7cqw; display: flex; flex-direction: column; gap: 0.55cqw; }   /* 1行1事実・行間ゆったり（daisuke 2026-09-18） */
.bz-comment .c-list li { font-size: 1.3cqw; line-height: 1.55; color: var(--c-text); }
.bz-comment .c-list li::marker { color: var(--buzz-sky); }

/* ── 導線ストリップ（テキスト型のステップ表示） ── */
.route-label { font-size: 1.15cqw; font-weight: 700; color: var(--buzz-blue); margin-bottom: 0.5cqw; }
.bz-route .f-name { color: var(--buzz-blue); }
.bz-route .f-num { font-family: var(--font-body); font-size: 1.22cqw; font-weight: 700; white-space: normal; line-height: 1.45; text-align: center; }

/* ── 表の微調整（数値は等幅・行はややコンパクトに） ── */
.o-table th, .o-table td { padding: 0.72cqw 1.3cqw; font-size: 1.28cqw; }
.o-table thead th { font-size: 1.12cqw; }
.o-table td.num, .o-table th.num { font-family: var(--font-mono); text-align: right; }
.o-table.dense th, .o-table.dense td { padding: 0.5cqw 1.2cqw; font-size: 1.2cqw; }
.o-table.dense thead th { font-size: 1.05cqw; }
.o-table.nowrap th, .o-table.nowrap td { white-space: nowrap; }   /* 列が多い表（スレッズ キャラ別）用 */
.o-table .sec-row td:first-child { color: var(--c-on-brand); }
/* 数値ファネル表（ボードのmatrix流用・列が多いので最小サイズ） */
.o-table.mx th, .o-table.mx td { padding: 0.4cqw 0.6cqw; font-size: 0.98cqw; white-space: nowrap; }
.o-table.mx thead th { font-size: 0.92cqw; }
.o-table.mx td:first-child, .o-table.mx th:first-child { width: 8.5cqw; }
.o-table.mx { margin-bottom: 0; flex-shrink: 0; }
/* 比較表（3〜4列・行数多め）用のコンパクト設定 */
.o-table.cmp { flex-shrink: 0; }
.o-table.cmp th, .o-table.cmp td { padding: 0.42cqw 1.2cqw; font-size: 1.1cqw; }
.o-table.cmp thead th { font-size: 1cqw; }
.o-table.cmp-tight th, .o-table.cmp-tight td { padding: 0.2cqw 1.1cqw; font-size: 1cqw; }   /* 3本比較（18行）用 */
.o-table.cmp-tight thead th .sub { font-size: 0.82cqw; font-weight: 400; opacity: 0.85; }
/* レター比較（ボードの比較画面と同じ表）: あきほん列を薄く強調 */
.o-table.lc th, .o-table.lc td { padding: 0.3cqw 1.2cqw; font-size: 1.05cqw; }
.o-table.lc thead th .sub { font-size: 0.85cqw; font-weight: 400; opacity: 0.85; }
.o-table.lc td.hl { background: color-mix(in srgb, var(--buzz-sky) 10%, #fff); }
.o-table.lc thead th.hl { background: var(--buzz-blue); }
.bz-route .bz-fstage { padding: 0.7cqw 0.5cqw; }
.route-line {
  background: #fff; border: var(--card-border);
  padding: 0.65cqw 1.5cqw; font-size: 1.25cqw; font-weight: 700; color: var(--c-text);
  width: 100%;
}
.route-line .rl-tag { color: var(--buzz-blue); margin-right: 1cqw; }
.route-line .rl-ar { color: var(--buzz-sky); font-weight: 900; margin: 0 0.5cqw; }
.o-table .pill-ok, .harness-card .pill-ok { display: inline-block; background: color-mix(in srgb, var(--c-pos) 12%, transparent); color: var(--c-pos); font-family: var(--font-mono); font-weight: 700; font-size: 1.15cqw; padding: 0.1cqw 0.8cqw; border-radius: 999px; }
.o-table .pill-ng  { display: inline-block; background: color-mix(in srgb, var(--c-neg) 10%, transparent); color: var(--c-neg); font-family: var(--font-mono); font-weight: 700; font-size: 1.15cqw; padding: 0.1cqw 0.8cqw; border-radius: 999px; }
.o-table .pill-wip, .harness-card .pill-wip { display: inline-block; background: color-mix(in srgb, var(--buzz-blue) 10%, transparent); color: var(--buzz-blue); font-family: var(--font-mono); font-weight: 700; font-size: 1.15cqw; padding: 0.1cqw 0.8cqw; border-radius: 999px; }   /* 進行中（ハーネス移行の進捗） */

/* 9月計画テーブルの進捗チップ */
.bz-chip { display: inline-block; font-size: 1.05cqw; font-weight: 700; padding: 0.18cqw 0.9cqw; border-radius: 999px; white-space: nowrap; }
.bz-chip.on   { background: color-mix(in srgb, var(--buzz-blue) 14%, transparent); color: var(--buzz-blue); }
.bz-chip.plan { background: color-mix(in srgb, var(--c-muted) 14%, transparent); color: var(--c-muted); }
/* 計画表の状態バッジ（daisuke 2026-09-17）: 完了＝赤（.em と同じ #d0342c）／作業中・進行中＝緑（--c-pos）／作業前＝グレー(.plan)のまま。.on（青）は施策サマリーの「計測中」用に残す */
.bz-chip.done  { background: color-mix(in srgb, #d0342c 12%, transparent); color: #d0342c; }
.bz-chip.doing { background: color-mix(in srgb, var(--c-pos) 14%, transparent); color: var(--c-pos); }

/* ── ゴール進捗バー（目標・実績・達成率＋バー） ── */
.bz-progress { background: #fff; border: var(--card-border); padding: 1.6cqw 2.2cqw 1.7cqw; width: 100%; }
.bz-progress .p-stats { display: flex; gap: 5cqw; margin-bottom: 1.3cqw; }
.bz-progress .p-label { font-size: 1.05cqw; font-weight: 700; color: var(--buzz-blue); margin-bottom: 0.3cqw; }
.bz-progress .p-val { font-family: var(--font-mono); font-size: 2.5cqw; font-weight: 700; color: var(--buzz-navy); line-height: 1.1; white-space: nowrap; }
.bz-progress .p-stat.good .p-val { color: var(--c-pos); }
.bz-progress .p-bar { position: relative; height: 1.6cqw; background: var(--buzz-pale); border-radius: 999px; overflow: hidden; }
.bz-progress .p-fill { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, var(--buzz-sky), var(--buzz-navy)); border-radius: 999px; }
.bz-progress .p-fill.over { background: linear-gradient(90deg, #35A56B, var(--c-pos)); }
.bz-progress .p-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.95cqw; color: var(--c-muted); margin-top: 0.55cqw; }

/* ── 訴求クリエイティブ（画像カード） ── */
.bz-shots { display: grid; gap: 1.4cqw; width: 100%; }
.bz-shot { background: #fff; border: 1px solid #e4e7ee; padding: 0.7cqw; display: flex; flex-direction: column; gap: 0.5cqw; min-width: 0; }
.bz-shot img { width: 100%; height: var(--shot-h, 14cqw); object-fit: contain; background: #fff; }
.bz-shot .s-label { font-size: 1.02cqw; font-weight: 700; color: var(--c-muted); }
.bz-shot .s-cap { font-size: 0.95cqw; color: var(--c-muted); line-height: 1.45; }

/* まとめの3枚看板 */
.bz-billboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; width: 100%; }
.bz-bill { background: #fff; border: var(--card-border); border-top: 0.5cqw solid var(--buzz-sky); padding: 1.8cqw 2cqw; display: flex; flex-direction: column; gap: 0.6cqw; }
.bz-bill .b-tag { font-size: 1.05cqw; font-weight: 700; color: var(--buzz-blue); }
.bz-bill .b-val { font-family: var(--font-mono); font-size: 2.7cqw; font-weight: 700; color: var(--buzz-navy); line-height: 1.1; }
.bz-bill .b-sub { font-size: 1.1cqw; color: var(--c-muted); line-height: 1.55; }

/* ── 目次最下部: トップへ戻るリンク ── */
.sidebar-home { text-decoration: none; border-top: 1px solid var(--c-border); margin-top: 8px; padding-top: 12px; }
.sidebar-home .sidebar-item-label { color: var(--buzz-blue); font-weight: 700; }

/* ── 属性分布（5カテゴリ横並びのミニ棒グラフ） ── */
.attr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1cqw; width: 100%; align-items: start; margin-top: 0.6cqw; }
.attr-card { background: #fff; border: var(--card-border); padding: 0.9cqw 1.1cqw; min-width: 0; }
.attr-card .at-title { font-size: 1.05cqw; font-weight: 700; color: var(--buzz-blue); margin-bottom: 0.55cqw; }
.at-row { margin-bottom: 0.42cqw; }
.at-row:last-child { margin-bottom: 0; }
.at-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6cqw; margin-bottom: 0.15cqw; }
.at-label { font-size: 0.9cqw; font-weight: 600; color: var(--c-text); line-height: 1.25; }
.at-n { font-family: var(--font-mono); font-size: 0.9cqw; font-weight: 700; color: var(--c-muted); white-space: nowrap; }
.at-bar { height: 0.42cqw; background: var(--buzz-pale); border-radius: 99px; overflow: hidden; }
.at-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--buzz-sky), var(--buzz-blue)); border-radius: 99px; }
.at-row.top .at-label { color: var(--buzz-navy); font-weight: 800; }
.at-row.top .at-bar i { background: linear-gradient(90deg, var(--buzz-blue), var(--buzz-navy)); }

/* ── 修正前/修正後カードはコンパクトに（比較表と同居するため） ── */
.ba-col { padding: 1.2cqw 1.7cqw; }
.ba-chip { font-size: 0.95cqw; margin-bottom: 0.55cqw; }
.ba-body { font-size: 1.18cqw; line-height: 1.55; }

/* ── タイムラインの丸を線の中央に乗せる（components の .tl-line は top 3.3cqw で丸より下に描かれる・daisuke指摘 2026-09-14） ──
   丸の中心 = .tl の padding-top 2.2cqw + 丸半径 0.65cqw = 2.85cqw。線の高さ 0.25cqw ぶんを引いて 2.725cqw。幅も丸の並びに合わせる */
.tl-line { top: 2.725cqw; left: calc(1.5cqw + 3cqw - 0.65cqw); right: calc(1.5cqw + 3cqw - 0.65cqw); }

/* ── 強調（daisuke 2026-09-14・報告会デッキ共通）: 強調＝赤太字 .em／マイナス＝青太字 .em-neg／下線 .u ── */
.em { color: #d0342c; font-weight: 700; }
.em-neg { color: var(--buzz-blue); font-weight: 700; }
.u { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.12em; }

/* ── 率の色分け（売上分析ポータルと同じ色・正本 build.py の PHASE_BANDS）── */
.rate { color: var(--c-muted); font-size: 0.85em; }
.band-1 { color: #4C9A52; }
.band-2 { color: #2F7A36; font-weight: 700; }
.band-3 { color: #A04C2A; font-weight: 800; }
.band-warn { color: #2F6DA8; font-weight: 700; }
/* 前回差（±・pp）の色＝売上分析ポータルの delta-up/down/flat と同じ（daisuke 2026-09-18） */
.o-table .delta-up { color: #2f6b35; font-weight: 700; }
.o-table .delta-down { color: #b03a2e; font-weight: 700; }
.o-table .delta-flat { color: var(--c-muted); font-weight: 600; }
/* 9月施策サマリー（ボード案件一覧と同じ項目・2段セル） */
.o-table.ms th, .o-table.ms td { padding: 0.45cqw 0.8cqw; font-size: 1.1cqw; line-height: 1.3; }
.o-table.ms thead th { font-size: 0.98cqw; }
.o-table.ms td .sub { font-size: 0.9cqw; color: var(--c-muted); }
/* 施策サマリーのバッジ＝売上分析ポータルと同じ色（タイプ「新規稼働」＝薄紫／進捗「計測中」＝オレンジ／「完了」＝緑） */
.bz-chip.mtype { background: #EDE7F6; color: #5E35B1; }
.bz-chip.active { background: #FDEBD7; color: #C2410C; }
.bz-chip.done { background: #E4F0E4; color: #2F7A36; }
.bz-chip.item { background: #E4F0E4; color: #2F7A36; }   /* 広告分析の「項目」OA 等（ボードと同色） */
.bz-chip.tier { background: #FDEBD7; color: #C2410C; }   /* 広告分析の Tier */
.o-table.ms thead th .sub { font-size: 0.85cqw; font-weight: 400; opacity: 0.85; }
/* 横スクロール表（ボード広告分析の行そのまま・daisuke 2026-09-18）: 先頭列固定・細いスクロールバー */
.o-table.xscroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.o-table.xscroll table { table-layout: auto; width: max-content; min-width: 100%; }
.o-table.xscroll th, .o-table.xscroll td { white-space: nowrap; }
.o-table.xscroll th:first-child, .o-table.xscroll td:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 0.3cqw 0 0.6cqw -0.3cqw rgba(27,42,94,0.18); }
.o-table.xscroll thead th:first-child { background: var(--c-section); }
.o-table.xscroll tbody td:first-child { background: var(--c-surface); }
.o-table.xscroll tbody tr:nth-child(even) td:first-child { background: color-mix(in srgb, var(--c-surface) 96%, var(--buzz-navy)); }
.o-table.ms td[class*="band-"] .sub { color: inherit; opacity: 0.85; }   /* 帯色のセルは率も同色 */
.o-table.ms th, .o-table.ms td { padding: 0.45cqw 0.55cqw; }

/* ── 縦フロー部品（Slideland「フロー（縦型）」の型を参考に 2026-09-14）──
   .vflow  = 番号丸＋縦線＋右にラベル・補足（型: unname／COTEN）
   .vsteps = 段の帯（左に段名・右に出口）。最後の段だけ塗りで強調（型: KitchHike の STEP5） */
.vflow { display: flex; flex-direction: column; width: 100%; }
.vf-step { display: grid; grid-template-columns: 3.2cqw 1fr; column-gap: 1.4cqw; align-items: start; position: relative; padding-bottom: 1.6cqw; }
.vf-step::before { content: ''; position: absolute; left: 1.5cqw; top: 3.2cqw; bottom: 0; width: 0.2cqw; background: var(--buzz-sky); }
.vf-step:last-child::before { display: none; }
.vf-num { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--buzz-navy); color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 1.25cqw; display: flex; align-items: center; justify-content: center; }
.vf-body { padding-top: 0.25cqw; }
.vf-time { font-family: var(--font-mono); font-weight: 700; font-size: 1.05cqw; color: var(--buzz-blue); letter-spacing: 0.04em; }
.vf-label { font-size: 1.45cqw; font-weight: 700; color: var(--buzz-navy); line-height: 1.35; }
.vf-desc { font-size: 1.12cqw; color: var(--c-muted); line-height: 1.45; margin-top: 0.15cqw; }
.vsteps { display: flex; flex-direction: column; gap: 0.7cqw; width: 100%; }
.vs { display: grid; grid-template-columns: 9.5cqw 1fr; align-items: stretch; border: var(--card-border); background: #fff; }
.vs-lead { background: var(--buzz-pale); color: var(--buzz-navy); font-family: var(--font-mono); font-weight: 700; font-size: 1.15cqw; display: flex; align-items: center; justify-content: center; padding: 0.8cqw 0.6cqw; }
.vs-body { padding: 0.55cqw 1.3cqw; display: flex; flex-direction: column; justify-content: center; gap: 0.1cqw; }
.vs-out { font-size: 1.35cqw; font-weight: 700; color: var(--buzz-navy); }
.vs-note { font-size: 1.02cqw; color: var(--c-muted); }
.vs.last { background: var(--buzz-navy); border-color: var(--buzz-navy); }
.vs.last .vs-lead { background: var(--buzz-sky); color: #fff; }
.vs.last .vs-out, .vs.last .vs-note { color: #fff; }

/* ── ヘッダー直下の最低余白（内容が高さぎりぎりでも本文がヘッダーに密着しない・daisuke指摘 2026-09-14） ── */
.bz-head { margin-bottom: 0.9cqw; }

/* ── アジェンダ（目次型・Slideland「目次」の型を参考 2026-09-14）: 番号を大きく薄色・項目名を太字・1行ずつ下線 ── */
.toc { display: flex; flex-direction: column; width: 100%; max-width: 64cqw; }
.toc-row { display: grid; grid-template-columns: 8cqw 1fr; align-items: baseline; padding: 1.05cqw 0.6cqw; border-bottom: 1px solid var(--c-border); }
.toc-num { font-family: var(--font-mono); font-weight: 700; font-size: 2.3cqw; color: var(--buzz-sky); letter-spacing: 0.04em; }
.toc-label { font-size: 2.05cqw; font-weight: 700; color: var(--buzz-navy); letter-spacing: 0.04em; }

/* ── 判定の色点（絵文字の代わり・ボードと同じ色） ── */
.dot { display: inline-block; width: 0.85cqw; height: 0.85cqw; border-radius: 50%; margin-right: 0.5cqw; vertical-align: 0.05cqw; }
.dot.red { background: #d0342c; } .dot.green { background: #2F7A36; } .dot.yellow { background: #e0a800; } .dot.gray { background: #b8bec9; }
.at-row { margin-bottom: 0.36cqw; }

/* ── 属性分布の列見出し（META-1/2/3 をパッと見で分かるように・daisuke指摘 2026-09-14） ── */
.attr-col { background: #fff; border: 1px solid #e4e7ee; display: flex; flex-direction: column; min-width: 0; }
.attr-colhead { background: var(--buzz-navy); color: #fff; font-weight: 700; font-size: 1.4cqw; letter-spacing: 0.04em; padding: 0.6cqw 1.1cqw; }
.attr-colhead span { font-weight: 400; font-size: 1.02cqw; opacity: 0.85; margin-left: 0.8cqw; }
.attr-col .attr-card { border: 0; padding: 0.9cqw 1.1cqw 0.8cqw; }
.attr-col .attr-card + .attr-card { border-top: 1px solid #eceff4; }

/* ページ送りのアニメーション無し（daisuke 2026-09-17）: 出現アニメは index.html の body から class="anim" を外して停止。
   ここでは shell.css の .slide のクロスフェード（opacity 0.2s）も止めて即切替にする */
.slide { transition: none !important; }

/* ── 売上分析ポータル紹介（daisuke 2026-09-17）: 画像・カードをタップするとボードが開く ── */
.bz-imglink { display: block; width: 100%; color: inherit; text-decoration: none; }
.bz-imglink.half { flex: 1; min-width: 0; }
.bz-shot-link { cursor: pointer; }
.bz-shot-link:hover { border-color: var(--buzz-sky); }
.bz-whatgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; width: 100%; }
.bz-what { display: block; background: #fff; border: 1px solid #e4e7ee; border-top: 0.4cqw solid var(--buzz-blue); padding: 1.3cqw 1.6cqw; color: inherit; text-decoration: none; min-height: 12cqw; }
.bz-what:hover { border-color: var(--buzz-sky); border-top-color: var(--buzz-sky); }
.bz-what .w-ttl { font-size: 1.6cqw; font-weight: 800; color: var(--buzz-blue); margin-bottom: 0.6cqw; display: flex; justify-content: space-between; align-items: center; }
.bz-what .w-ar { font-size: 1.2cqw; color: var(--buzz-sky); }
.bz-what .w-body { font-size: 1.25cqw; line-height: 1.6; color: var(--c-text); }
/* 計画表の備考内リンク（診断LP → デッキ内スライド） */
.bz-inlink { color: var(--buzz-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25cqw; }

/* 右上の章ラベル＋☰ と右下のページ番号をスライド枠（16:9・中央寄せ）の内側に収める。
   shell.css は画面幅いっぱいに固定していて、ワイド画面ではスライドの端をまたいで外の余白にはみ出していた（daisuke指摘 2026-09-17「かぶってる」） */
.nav-bar { left: 50%; right: auto; transform: translateX(-50%); width: min(100vw, calc(100vh * 16 / 9)); }
.slide-counter { right: calc((100vw - min(100vw, calc(100vh * 16 / 9))) / 2 + 22px); }

/* みほ改修 ASP別の前後比較＝売上分析ポータル「前後比較」と同じ見え方（明るい見出し・ゆったりした行。1枚2本まで。daisuke 2026-09-30） */
.o-table.cmpw { border: 1px solid #E3E9F1; border-radius: 0.6cqw; overflow: hidden; background: #fff; }
.o-table.cmpw th, .o-table.cmpw td { font-size: 0.76cqw; padding: 0.75cqw 0.45cqw; white-space: nowrap; border-bottom: 1px solid #EDF1F6; }
.o-table.cmpw thead th { background: #F4F7FB; color: #1B2A5E; font-weight: 700; border-bottom: 1px solid #DDE5EF; padding: 0.6cqw 0.45cqw; font-size: 0.74cqw; letter-spacing: 0; }
.o-table.cmpw thead th .sub { font-size: 0.64cqw; font-weight: 400; color: var(--c-muted); }
.o-table.cmpw tbody tr, .o-table.cmpw tbody tr:nth-child(even) { background: #fff; }
.o-table.cmpw td { font-weight: 400; }
.o-table.cmpw td .sub { font-size: 0.68cqw; color: var(--c-muted); line-height: 1.3; }
.o-table.cmpw tr.cmp-asp th { background: #EAF2FB; color: #1B2A5E; font-weight: 800; text-align: left; font-size: 0.88cqw; padding: 0.55cqw 0.6cqw; }
.o-table.cmpw tr.cmp-after td { background: #F7FBFE; }
.o-table.cmpw tr.cmp-total td { font-weight: 700; }
.o-table.cmpw .cmp-d { font-size: 0.68cqw; font-weight: 700; line-height: 1.3; }
.o-table.cmpw .cmp-note { font-weight: 400; font-size: 0.78cqw; color: var(--c-muted); margin-left: 0.8cqw; }

/* 今後の施策｜新規SLの方向性カード（しんじ・daisuke 2026-09-30） */
.prep-copy { flex: 1; min-width: 0; background: #fff; border: 1px solid #E3E9F1; border-radius: 0.6cqw; padding: 1.4cqw 1.8cqw; }
.prep-copy .pc-label { font-size: 0.95cqw; font-weight: 700; color: var(--buzz-blue, #29ABE2); margin-bottom: 0.8cqw; }
.prep-copy .pc-body { font-size: 1.5cqw; font-weight: 700; color: #1B2A5E; line-height: 1.6; }
.prep-copy.prep-info { padding: 1cqw 1.8cqw; }
.prep-copy.prep-info .pc-body { font-size: 1.2cqw; font-weight: 500; line-height: 1.55; }
/* LINEハーネス移行の進捗（19枚目）: 3枚のカード（daisuke 2026-10-02） */
.harness-card { display: flex; flex-direction: column; gap: 1.4cqw; padding: 2.4cqw 2.2cqw; min-height: 13cqw; }
.harness-card .pill-ok, .harness-card .pill-wip { font-size: 1.3cqw; padding: 0.2cqw 1cqw; }
/* LINEハーネス｜Lステップとの違い（比較表・daisuke 2026-10-02） */
.o-table.harness-vs th, .o-table.harness-vs td { padding: 1cqw 1.6cqw; font-size: 1.45cqw; line-height: 1.55; vertical-align: middle; }
.o-table.harness-vs thead th { font-size: 1.3cqw; }
/* みほ エバー改修｜改修前後の比較（全体）のリッチ版（daisuke 2026-10-02） */
.o-table.cmp tr.grp-start td { border-top: 0.18cqw solid #1B2A5E33; }
.o-table.cmp tr.grp-funnel td:first-child { color: #1B2A5E; }
.o-table.cmp td .delta-up, .o-table.cmp td .delta-down, .o-table.cmp td .delta-flat { display: inline-block; padding: 0.05cqw 0.6cqw; border-radius: 999px; font-family: var(--font-mono); }
.o-table.cmp td .delta-up { background: #2f6b3517; }
.o-table.cmp td .delta-down { background: #b03a2e14; }
.mc-side { display: flex; flex-direction: column; gap: 1.1cqw; }
.mc-head { font-size: 1.75cqw; font-weight: 700; color: #1B2A5E; }
.mc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9cqw; }
.mc-kpi { background: #fff; border: 1px solid #E3E9F1; border-radius: 0.7cqw; padding: 1cqw 1.1cqw; box-shadow: 0 0.25cqw 0.9cqw rgba(27,42,94,0.07); }
.mc-k-l { font-size: 1cqw; font-weight: 700; color: var(--c-muted); }
.mc-k-v { font-family: var(--font-mono); font-size: 2.5cqw; font-weight: 800; line-height: 1.15; margin-top: 0.3cqw; color: #2f6b35; }
.mc-kpi.down .mc-k-v { color: #b03a2e; }
.mc-k-v small { font-size: 1.1cqw; margin-left: 0.15cqw; }
.mc-k-s { font-family: var(--font-mono); font-size: 0.95cqw; color: var(--c-muted); margin-top: 0.3cqw; }
.mc-k-s b { color: #1B2A5E; }
.mc-chart { background: #F4F7FB; border-radius: 0.7cqw; padding: 1.1cqw 1.4cqw; display: flex; flex-direction: column; gap: 0.55cqw; }
.mc-c-h { display: flex; justify-content: space-between; font-size: 1cqw; font-weight: 700; color: #1B2A5E; margin-bottom: 0.2cqw; }
.mc-lg { font-weight: 500; color: var(--c-muted); display: flex; align-items: center; gap: 0.4cqw; }
.mc-lg i { display: inline-block; width: 1.4cqw; height: 0.7cqw; border-radius: 0.2cqw; margin-left: 0.6cqw; }
.mc-lg i.bf, .mc-bar i.bf { background: #C9D3E3; }
.mc-lg i.af, .mc-bar i.af { background: linear-gradient(90deg, #29ABE2, #1B6FB5); }
.mc-bar { display: grid; grid-template-columns: 6.2cqw 1fr 4.2cqw 5cqw; align-items: center; gap: 0.8cqw; font-size: 1.05cqw; }
.mc-b-l { font-weight: 700; color: #1B2A5E; }
.mc-b-t { position: relative; height: 1.5cqw; }
.mc-b-t i { position: absolute; left: 0; border-radius: 0.3cqw; }
.mc-b-t i.bf { top: 0; height: 0.6cqw; }
.mc-b-t i.af { top: 0.75cqw; height: 0.75cqw; }
.mc-b-v { font-family: var(--font-mono); font-weight: 700; text-align: right; color: #1B2A5E; }
.mc-b-d { font-family: var(--font-mono); text-align: right; }
.mc-b-d .delta-up { color: #2f6b35; font-weight: 700; }
.mc-b-d .delta-down { color: #b03a2e; font-weight: 700; }
.mc-bar.young { opacity: 0.55; }
.mc-note { font-size: 1.05cqw; color: var(--c-muted); line-height: 1.55; }
.mc-note b { color: #1B2A5E; }
.o-table.cmp-tight.mc-table th, .o-table.cmp-tight.mc-table td { padding-top: 0.12cqw; padding-bottom: 0.12cqw; }