/* ========================================
   場面1 どちらがお得ですか？（20.4秒・6つの字幕）
   ----------------------------------------
     cue-0  個人事業主のままか、法人にするか      → 二人を左右に出す
     cue-3  もうかったら法人がとく、ではありません → 思い込みに打ち消し線
     cue-4  得になる人と、損になる人がいます      → 得／損 の言い分け
     cue-5  分かれ目は、税金だけではありません    → この動画の問い
   ======================================== */

.scene-open {
  padding: 26px 64px var(--caption-space);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: 10px;
  justify-items: center;
}

.scene-open .head {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.scene-open .kicker {
  justify-self: center;
  animation: rise 0.5s var(--ease-out) var(--cue-0) both;
}
.scene-open .title {
  font-size: 46px;
  animation: rise 0.6s var(--ease-out) var(--cue-0) both;
}

/* ── 二人を左右に ───────────────────────── */
.scene-open .two {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.scene-open .side {
  padding: 14px 20px 16px;
}
.scene-open .side .pic { width: 130px; height: 98px; }
.scene-open .side-name { font-size: 28px; }

.scene-open .is-kojin {
  animation: slide-left 0.7s var(--ease-out) calc(var(--cue-0) + 0.2s) both;
}
.scene-open .is-hojin {
  animation: slide-right 0.7s var(--ease-out) calc(var(--cue-0) + 0.4s) both;
}

/* 人の絵（個人事業主） */
.scene-open .head-c { fill: var(--kojin); }
.scene-open .body-p { fill: var(--kojin); }
.scene-open .pen { fill: #fff; stroke: var(--kojin); stroke-width: 4; stroke-linejoin: round; }

/* 建物の絵（法人） */
.scene-open .bldg { fill: var(--hojin); }
.scene-open .win2 { fill: #fff; opacity: 0.86; }
.scene-open .door { fill: #fff; opacity: 0.6; }

/* まん中の「？」。答えは見た目では決まらない、の合図 */
.scene-open .mid { display: grid; place-items: center; }
.scene-open .qmark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  background: var(--night);
  color: #fff;
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 900;
  border-radius: 50%;
  animation: pop 0.6s var(--ease-pop) calc(var(--cue-0) + 0.7s) both;
}

/* ── 下の3行 ────────────────────────────── */
.scene-open .says {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

/* 思い込み → cue-3 で打ち消す */
.scene-open .myth {
  position: relative;
  padding: 2px 10px;
  color: var(--ink-soft);
  font-size: 27px;
  font-weight: 700;
  animation: rise 0.5s var(--ease-out) var(--cue-0) both;
}
.scene-open .myth-strike {
  position: absolute;
  left: 0;
  top: 52%;
  width: 100%;
  height: 4px;
  background: var(--warn);
  border-radius: 2px;
  transform-origin: left center;
  scale: 0 1;
  animation: draw-x 0.5s var(--ease-out) var(--cue-3) both;
}

.scene-open .s2 {
  font-size: 29px;
  font-weight: 800;
  animation: rise 0.6s var(--ease-out) var(--cue-4) both;
}
.scene-open .s2 { display: flex; justify-content: center; gap: 14px; }
.scene-open .s2 em {
  padding: 2px 16px;
  color: #fff;
  font-style: normal;
  border-radius: 999px;
}
.scene-open .s2 .win { background: var(--key); }
.scene-open .s2 .lose { background: var(--warn); }

.scene-open .s3 {
  font-size: 29px;
  font-weight: 800;
  animation: rise 0.7s var(--ease-pop) var(--cue-5) both;
}