/* ========================================
   場面9 けんかの原因を、仕組みで消す（71.5秒・20の字幕）
   ----------------------------------------
   🚨 3つを順番に見せると紙芝居になるので、左から点灯させ、点いたものは消さずに残す
     cue-1  同じものさしと、同じ大きさのますで  → ばらばらのものさしが1本にそろう
     cue-2  ますというのは、お米をはかる入れもの → ますにお米が入り、すり切りでならす
     cue-4  日本じゅう同じ数え方にそろえた      → マスに数字が入る
     cue-7  つぎに、刀狩です                  → 刀が中央へ集まる
     cue-10 集めた刀は、大仏さまの釘に          → 釘
     cue-13 村の武器がぜんぶなくなった…じつは   → 「ゼロになっていません」
     cue-17 戦う人と、作る人を分ける           → 横一列の3つの丸と、あいだの壁
     cue-19 いくつ消えたでしょうか             → 最後の問い
   🚨 4段ピラミッド（士農工商）は絶対に描かない
   ======================================== */

.scene-09 {
  padding: 16px 40px 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}

.scene-09 .head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.scene-09 .kicker { animation: rise 0.5s var(--ease-out) var(--cue-0) both; }
.scene-09 .title {
  font-size: 36px;
  animation: slide-right 0.6s var(--ease-out) var(--cue-0) both;
}

.scene-09 .three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}
.scene-09 .col {
  padding: 14px 14px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: 14px;
}
.scene-09 .c-kenchi { animation: light-on 0.7s var(--ease-out) var(--cue-1) both; }
.scene-09 .c-katana { animation: light-on 0.7s var(--ease-out) var(--cue-7) both; }
.scene-09 .c-mibun { animation: light-on 0.7s var(--ease-out) var(--cue-17) both; }
@keyframes light-on {
  from { opacity: 0.12; translate: 0 16px; border-color: var(--line); }
  to { opacity: 1; translate: 0 0; border-color: var(--ink); }
}
.scene-09 .col-ttl {
  font-family: var(--font-mincho);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}
.scene-09 .col-ttl small {
  display: block;
  color: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
}
.scene-09 .fig {
  width: 100%;
  max-width: 330px;
  height: 232px;
}
.scene-09 .col-note {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55em;
  text-align: center;
}
.scene-09 .col-note small {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
}
.scene-09 .col-note.keep {
  color: var(--war);
}

/* ── 左：検地 ───────────────────────────── */

.scene-09 .ru { color: var(--ink); }
/* ばらばらの3本 → 同じ1本 */
.scene-09 .r1, .scene-09 .r2, .scene-09 .r3 {
  animation: fade-out 0.6s ease calc(var(--cue-1) + 1.2s) forwards;
}
.scene-09 .same {
  opacity: 0;
  color: var(--hideyoshi);
  animation: pop 0.6s var(--ease-pop) calc(var(--cue-1) + 1.5s) both;
}
.scene-09 .fd rect {
  fill: var(--paper-deep);
  stroke: var(--ink-soft);
  stroke-width: 2.5;
}
.scene-09 .fd text {
  fill: var(--ink);
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 800;
  opacity: 0;
  animation: fade 0.4s ease both;
}
.scene-09 .f1 text { animation-delay: calc(var(--cue-4) + 0.1s); }
.scene-09 .f2 text { animation-delay: calc(var(--cue-4) + 0.25s); }
.scene-09 .f3 text { animation-delay: calc(var(--cue-4) + 0.4s); }
.scene-09 .f4 text { animation-delay: calc(var(--cue-4) + 0.55s); }
.scene-09 .f5 text { animation-delay: calc(var(--cue-4) + 0.7s); }
.scene-09 .f6 text { animation-delay: calc(var(--cue-4) + 0.85s); }
/* 🚨 ますは置くだけにせず、お米が入って、すり切りでならす動きを必ず入れる */
.scene-09 .masu-set use { color: var(--ink); }
.scene-09 .kome {
  fill: var(--rice);
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: fill-masu 0.9s var(--ease-out) var(--cue-2) both;
}
@keyframes fill-masu {
  from { scale: 1 0; }
  to { scale: 1 1; }
}
.scene-09 .suri {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  animation: level-off 1.4s var(--ease-out) calc(var(--cue-2) + 1s) both;
}
@keyframes level-off {
  0% { opacity: 0; translate: -46px 0; }
  20% { opacity: 1; }
  100% { opacity: 1; translate: 40px 0; }
}

/* ── 中：刀狩 ───────────────────────────── */

.scene-09 .kt {
  color: var(--ink);
  animation: gather 1.6s var(--ease-out) both;
}
.scene-09 .k1 { --gx: 60px; --gy: 74px; animation-delay: calc(var(--cue-8) + 0.1s); }
.scene-09 .k2 { --gx: -106px; --gy: 82px; animation-delay: calc(var(--cue-8) + 0.3s); }
.scene-09 .k3 { --gx: 52px; --gy: 28px; animation-delay: calc(var(--cue-8) + 0.5s); }
.scene-09 .k4 { --gx: -100px; --gy: 22px; animation-delay: calc(var(--cue-8) + 0.7s); }
.scene-09 .k5 { --gx: -18px; --gy: 52px; animation-delay: calc(var(--cue-8) + 0.9s); }
@keyframes gather {
  from { translate: 0 0; scale: 1; }
  to { translate: var(--gx) var(--gy); scale: 0.66; }
}
.scene-09 .to-kugi {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.7s ease var(--cue-10) forwards;
}
.scene-09 .kugi {
  color: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: top center;
  animation: pop 0.6s var(--ease-pop) calc(var(--cue-10) + 0.5s) both;
}
.scene-09 .kugi-t {
  fill: var(--ink);
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 700;
  opacity: 0;
  animation: fade 0.5s ease calc(var(--cue-10) + 0.9s) both;
}

/* ── 右：戦う人と作る人を分ける ───────────── */

.scene-09 .ball circle {
  fill: var(--paper-deep);
  stroke: var(--ink);
  stroke-width: 3;
}
.scene-09 .ball text {
  fill: var(--ink);
  font-family: var(--font-jp);
  font-size: 21px;
  font-weight: 800;
}
.scene-09 .b1 use { color: var(--nobunaga); }
.scene-09 .b2 use { color: var(--peace); }
.scene-09 .b3 use { color: var(--hideyoshi); }
/* 結論の声のあいだは、武士と百姓の2つだけを強める（絵の3つと取り違えさせない） */
.scene-09 .b1,
.scene-09 .b2 {
  animation: stand-out 1s ease calc(var(--cue-17) + 2.4s) both;
}
@keyframes stand-out {
  from { scale: 1; }
  to { scale: 1.06; }
}
.scene-09 .wall {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 4;
  stroke-dasharray: 9 8;
  stroke-dashoffset: 1;
  animation: draw 0.8s ease calc(var(--cue-17) + 0.6s) forwards;
}
.scene-09 .w2 { animation-delay: calc(var(--cue-17) + 0.9s); }
/* 移ろうとした点が、壁でコツンと止まる */
.scene-09 .stopper {
  fill: var(--peace);
  opacity: 0;
  animation: bump 1.6s var(--ease-out) calc(var(--cue-17) + 1.5s) both;
}
@keyframes bump {
  0% { opacity: 0; translate: 26px 0; }
  30% { opacity: 1; translate: 0 0; }
  45% { translate: 6px 0; }
  60% { translate: 0 0; }
  100% { opacity: 1; translate: 4px 0; }
}

.scene-09 .ask-last {
  justify-self: center;
  padding: 7px 26px;
  background: var(--ink);
  color: var(--paper);
  font-size: 25px;
  font-weight: 700;
  border-radius: 999px;
  animation: rise 0.6s var(--ease-pop) var(--cue-19) both;
}
.scene-09 .ask-last em {
  color: var(--marker);
  font-style: normal;
}