/* ========================================
   場面2 税金の「形」が違う（30.3秒・8つの字幕）
   ----------------------------------------
     cue-0  まず、税金の計算の形が違います        → 目盛りだけ出る
     cue-1  個人事業主は、階段です                → 階段の線を描く
     cue-3  いちばん低くて5パーセント             → 左端に 5％
     cue-4  いちばん高くて45パーセント            → 右端に 45％
     cue-5  法人は、ほぼ平らです                  → 平らな線を描く
     cue-6  利益800万円までが15パーセント         → 15％ と 800万円の目印
     cue-7  それを超えた分が23.2パーセント        → 23.2％
   ======================================== */

.scene-zeiritsu {
  padding: 22px 56px var(--caption-space);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.scene-zeiritsu .head {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 16px;
}
.scene-zeiritsu .kicker { animation: rise 0.5s var(--ease-out) var(--cue-0) both; }
.scene-zeiritsu .title {
  font-size: 38px;
  animation: slide-right 0.6s var(--ease-out) var(--cue-0) both;
}

/* ── 図 ─────────────────────────────────── */
.scene-zeiritsu .chart-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}
.scene-zeiritsu .chart { width: 100%; height: auto; }

.scene-zeiritsu .axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  animation: fade 0.5s ease var(--cue-0) both;
}
.scene-zeiritsu .grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  animation: fade 0.5s ease calc(var(--cue-0) + 0.2s) both;
}
.scene-zeiritsu .ax,
.scene-zeiritsu .ax-unit {
  fill: var(--ink-soft);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  animation: fade 0.5s ease calc(var(--cue-0) + 0.2s) both;
}
.scene-zeiritsu .ax-unit { font-family: var(--font-jp); font-size: 14px; }

/* 個人事業主＝階段。cue-1 から 2.4 秒かけて右へ伸びる */
.scene-zeiritsu .step-line {
  fill: none;
  stroke: var(--kojin);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: draw 2.4s var(--ease-out) var(--cue-1) both;
}

/* 法人＝ほぼ平ら */
.scene-zeiritsu .flat-line {
  fill: none;
  stroke: var(--hojin);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: draw 1.4s var(--ease-out) var(--cue-5) both;
}

/* 数字の札 */
.scene-zeiritsu .tag rect {
  fill: #fff;
  stroke-width: 2.5;
}
.scene-zeiritsu .tag text {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 800;
}
.scene-zeiritsu .tag-low rect,
.scene-zeiritsu .tag-high rect { stroke: var(--kojin); }
.scene-zeiritsu .tag-low text,
.scene-zeiritsu .tag-high text { fill: var(--kojin); }
.scene-zeiritsu .tag-15 rect,
.scene-zeiritsu .tag-232 rect { stroke: var(--hojin); }
.scene-zeiritsu .tag-15 text,
.scene-zeiritsu .tag-232 text { fill: var(--hojin); }

/* 🚨 SVG の中を拡大するので、軸は図形の中心に置く（既定だと画面中心を軸に飛ぶ） */
.scene-zeiritsu .tag {
  transform-box: fill-box;
  transform-origin: center;
}
.scene-zeiritsu .tag-low { animation: pop 0.5s var(--ease-pop) var(--cue-3) both; }
.scene-zeiritsu .tag-high { animation: pop 0.5s var(--ease-pop) var(--cue-4) both; }
.scene-zeiritsu .tag-15 { animation: pop 0.5s var(--ease-pop) var(--cue-6) both; }
.scene-zeiritsu .tag-232 { animation: pop 0.5s var(--ease-pop) var(--cue-7) both; }

/* 800万円の目印 */
.scene-zeiritsu .mark800 {
  fill: none;
  stroke: var(--hojin);
  stroke-width: 2.5;
  stroke-dasharray: 6 6;
  animation: fade 0.5s ease var(--cue-6) both;
}
.scene-zeiritsu .mark800-t {
  fill: var(--hojin);
  font-size: 16px;
  font-weight: 800;
  animation: fade 0.5s ease calc(var(--cue-6) + 0.15s) both;
}

/* ── 凡例 ───────────────────────────────── */
.scene-zeiritsu .legend {
  display: grid;
  gap: 14px;
  align-content: center;
}
.scene-zeiritsu .lg {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 800;
  white-space: nowrap;
}
.scene-zeiritsu .lg em {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
}
.scene-zeiritsu .lg .sw {
  grid-row: 1 / 3;
  width: 26px;
  height: 6px;
  border-radius: 3px;
}
.scene-zeiritsu .lg-kojin {
  color: var(--kojin);
  animation: slide-left 0.5s var(--ease-out) var(--cue-1) both;
}
.scene-zeiritsu .lg-kojin .sw { background: var(--kojin); }
.scene-zeiritsu .lg-hojin {
  color: var(--hojin);
  animation: slide-left 0.5s var(--ease-out) var(--cue-5) both;
}
.scene-zeiritsu .lg-hojin .sw { background: var(--hojin); }

.scene-zeiritsu .src {
  justify-self: end;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  animation: fade 0.6s ease var(--cue-7) both;
}