/* ============================================================
 * 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);
}

/* カードは影なし・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; }
.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;
}

/* ── 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: 1.15cqw 1.4cqw; display: flex; flex-direction: column; gap: 0.3cqw;
  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: 2.05cqw; 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: '→'; }

/* ── 所感・コメントカード ── */
.bz-comment { background: var(--buzz-pale); border-left: 0.45cqw solid var(--buzz-sky); padding: 1.4cqw 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); }

/* ── 表の微調整（数値は等幅・行はややコンパクトに） ── */
.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 .sec-row td:first-child { color: var(--c-on-brand); }
.o-table .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; }

/* 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); }

/* ── ゴール進捗バー（目標・実績・達成率＋バー） ── */
.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: var(--card-border); padding: 1cqw; display: flex; flex-direction: column; gap: 0.55cqw; min-width: 0; }
.bz-shot img { width: 100%; height: var(--shot-h, 14cqw); object-fit: contain; background: var(--buzz-pale); }
.bz-shot .s-label { font-size: 1.08cqw; font-weight: 700; color: var(--buzz-navy); }
.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; }