/* ========================================
   場面1 どちらがいいですか？（24.6秒・7つの字幕）
   ----------------------------------------
     cue-0  WordPressと、静的なホームページ     → 二つを左右に出す
     cue-3  見た目は、どちらでも同じものが作れます → 「同じ」を先に言い切る
     cue-4  違うのは、できあがったあとです       → ？が消え、話が移る
     cue-5  あとから、だれが、どうやって直すのか  → この動画の問い
   ======================================== */

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

.scene-open .head {
  display: grid;
  gap: 12px;
  justify-items: center;
}
.scene-open .kicker {
  justify-self: center;
  font-family: var(--font-en);
  animation: rise 0.5s var(--ease-out) var(--cue-0) both;
}
.scene-open .title {
  font-size: 44px;
  text-align: center;
  animation: rise 0.6s var(--ease-out) var(--cue-0) both;
}
.scene-open .title .thin {
  font-style: normal;
  font-weight: 500;
}

/* ── 二つを左右に並べる ───────────────────── */

.scene-open .two {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 32px;
}
.scene-open .side {
  width: 100%;
  max-width: 420px;
}
.scene-open .is-wp {
  animation: slide-left 0.7s var(--ease-out) calc(var(--cue-0) + 0.2s) both;
}
.scene-open .is-st {
  animation: slide-right 0.7s var(--ease-out) calc(var(--cue-0) + 0.4s) both;
}
.scene-open .pic {
  width: 186px;
  height: 140px;
}
.scene-open .win,
.scene-open .doc {
  fill: #fff;
  stroke: var(--side);
  stroke-width: 4;
}
.scene-open .bar,
.scene-open .fold {
  fill: none;
  stroke: var(--side);
  stroke-width: 4;
}
.scene-open .dot { fill: var(--side); opacity: 0.55; }
.scene-open .ln { fill: var(--side); opacity: 0.42; }

/* 「?」は cue-2 で消える（答えは見た目ではない、と分かった合図） */
.scene-open .vs {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--marker);
  font-family: var(--font-en);
  font-size: 54px;
  font-weight: 900;
  border-radius: 50%;
  animation:
    pop 0.6s var(--ease-pop) calc(var(--cue-0) + 0.7s) both,
    vanish 0.8s var(--ease-out) var(--cue-4) forwards;
}
@keyframes vanish {
  from { opacity: 1; scale: 1; rotate: 0deg; }
  to { opacity: 0; scale: 0.4; rotate: -24deg; }
}

/* ── 下の3行。順に出して、最後の問いを残す ───── */

.scene-open .says {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 27px;
  font-weight: 700;
}
.scene-open .s1 {
  animation: rise 0.6s var(--ease-out) var(--cue-3) both;
}
.scene-open .s2 {
  animation: rise 0.6s var(--ease-out) var(--cue-4) both;
}
.scene-open .s2 strong {
  padding: 2px 12px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
}
.scene-open .s3 {
  padding: 9px 24px;
  background: var(--key-soft);
  color: var(--ink);
  font-size: 29px;
  border: 3px solid var(--key);
  border-radius: 12px;
  animation: rise 0.7s var(--ease-pop) var(--cue-5) both;
}
.scene-open .s3 em {
  color: var(--key);
  font-style: normal;
}