/* ========================================
   場面3〜7（静的のデザイン自由／WPは画面から／シンプルに／SEO／選び方）
   ----------------------------------------
   🚨 字幕は「動画の中」に入れる設定なので、下に var(--caption-space) を先に空けてから組む。
      場面の padding のショートハンドで下を 0 にしない（字幕と重なる）。
   ======================================== */

/* ── 共通：見出し ───────────────────────── */

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

/* ══════ 場面3 そのかわり、デザインは自由 ══════ */

.scene-static-design {
  padding: 26px 56px var(--caption-space);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.scene-static-design .body {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  align-items: center;
  gap: 36px;
}
.scene-static-design .mock {
  width: 560px;
  height: 330px;
  animation: pop 0.7s var(--ease-pop) var(--cue-3) both;
}
.scene-static-design .page { fill: #fff; stroke: var(--st); stroke-width: 3; }
.scene-static-design .band { fill: var(--st-soft); }
.scene-static-design .slash { fill: var(--st); opacity: 0.18; }
.scene-static-design .big { fill: var(--st); }
.scene-static-design .big.sm { opacity: 0.5; }
.scene-static-design .ph { fill: var(--st); opacity: 0.32; }
.scene-static-design .card { fill: var(--paper-deep); stroke: var(--st); stroke-width: 2.5; }
.scene-static-design .c1 { animation: rise 0.5s var(--ease-out) calc(var(--cue-3) + 0.4s) both; }
.scene-static-design .c2 { animation: rise 0.5s var(--ease-out) calc(var(--cue-3) + 0.6s) both; }
.scene-static-design .c3 { animation: rise 0.5s var(--ease-out) calc(var(--cue-3) + 0.8s) both; }

.scene-static-design .side-notes {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.scene-static-design .q {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6em;
  animation: fade 0.6s ease var(--cue-1) both;
}
.scene-static-design .q em {
  padding: 2px 10px;
  background: var(--paper-deep);
  font-style: normal;
  border-radius: 999px;
}
.scene-static-design .a {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.55em;
  animation: rise 0.6s var(--ease-out) var(--cue-3) both;
}
.scene-static-design .pages {
  display: grid;
  gap: 8px;
}
.scene-static-design .pg {
  padding: 8px 18px;
  background: var(--st-soft);
  color: var(--st);
  font-size: 22px;
  font-weight: 800;
  border-radius: 8px;
}
.scene-static-design .p1 { animation: slide-right 0.5s var(--ease-out) var(--cue-5) both; }
.scene-static-design .p2 { animation: slide-right 0.5s var(--ease-out) calc(var(--cue-5) + 0.5s) both; }
.scene-static-design .p3 { animation: slide-right 0.5s var(--ease-out) calc(var(--cue-5) + 1s) both; }
.scene-static-design .last {
  color: var(--ink-soft);
  font-size: 21px;
  font-weight: 700;
  animation: fade 0.6s ease var(--cue-6) both;
}

/* ══════ 場面4 WordPressは、画面から直せる ══════ */

.scene-wp-edit {
  padding: 26px 56px var(--caption-space);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.scene-wp-edit .body {
  display: grid;
  grid-template-columns: 640px minmax(0, 1fr);
  align-items: center;
  gap: 32px;
}
.scene-wp-edit .admin {
  width: 640px;
  height: 340px;
  animation: pop 0.7s var(--ease-pop) var(--cue-1) both;
}
.scene-wp-edit .win { fill: #fff; stroke: var(--wp); stroke-width: 3; }
.scene-wp-edit .top { fill: var(--wp); }
.scene-wp-edit .menu { fill: var(--wp-soft); }
.scene-wp-edit .mi { fill: var(--wp); opacity: 0.4; }
.scene-wp-edit .mi.on { opacity: 0.85; }
.scene-wp-edit .field { fill: #fff; stroke: var(--line); stroke-width: 2.5; }
.scene-wp-edit .typed {
  fill: var(--ink);
  opacity: 0.72;
  transform-box: fill-box;
  transform-origin: left center;
  scale: 0 1;
  animation: draw-x 0.5s var(--ease-out) both;
}
.scene-wp-edit .t1 { animation-delay: calc(var(--cue-1) + 0.6s); }
.scene-wp-edit .t2 { animation-delay: calc(var(--cue-1) + 1.1s); }
.scene-wp-edit .t3 { animation-delay: calc(var(--cue-1) + 1.5s); }
.scene-wp-edit .t4 { animation-delay: calc(var(--cue-1) + 1.9s); }
.scene-wp-edit .cursor {
  fill: none;
  stroke: var(--wp);
  stroke-width: 3;
  animation: blink 1.1s step-end infinite;
}

.scene-wp-edit .side-notes {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.scene-wp-edit .a {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.55em;
  animation: rise 0.6s var(--ease-out) var(--cue-1) both;
}
.scene-wp-edit .tagline {
  font-size: 24px;
  font-weight: 700;
  animation: rise 0.6s var(--ease-out) var(--cue-3) both;
}
.scene-wp-edit .tag {
  margin-right: 10px;
  padding: 4px 14px;
  background: var(--key-soft);
  color: var(--key);
  font-size: 20px;
  border-radius: 999px;
}
.scene-wp-edit .pages {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
}
.scene-wp-edit .pg {
  padding: 8px 16px;
  background: var(--wp-soft);
  color: var(--wp);
  font-size: 21px;
  font-weight: 800;
  border-radius: 8px;
  animation: pop 0.45s var(--ease-pop) both;
}
.scene-wp-edit .p1 { animation-delay: var(--cue-4); }
.scene-wp-edit .p2 { animation-delay: calc(var(--cue-4) + 0.3s); }
.scene-wp-edit .p3 { animation-delay: calc(var(--cue-4) + 0.6s); }
.scene-wp-edit .last {
  color: var(--ink-soft);
  font-size: 21px;
  font-weight: 700;
  animation: fade 0.6s ease var(--cue-5) both;
}

/* ══════ 場面5 ただし、デザインはシンプルに ══════ */

.scene-wp-simple {
  padding: 20px 56px var(--caption-space);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.scene-wp-simple .versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
}
.scene-wp-simple .col {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.scene-wp-simple .col svg {
  width: 100%;
  max-width: 400px;
  height: 172px;
}
.scene-wp-simple .col-ttl {
  font-size: 22px;
  font-weight: 800;
}
.scene-wp-simple .bad { animation: rise 0.6s var(--ease-out) var(--cue-3) both; }
.scene-wp-simple .good { animation: rise 0.6s var(--ease-out) var(--cue-2) both; }
.scene-wp-simple .pg { fill: #fff; stroke: var(--line); stroke-width: 2.5; }
.scene-wp-simple .bad .deco { fill: var(--warn); opacity: 0.32; }
.scene-wp-simple .bad .deco.sq { opacity: 0.2; }
.scene-wp-simple .good .ln { fill: var(--key); opacity: 0.8; }
.scene-wp-simple .good .ln.sm { opacity: 0.38; }
.scene-wp-simple .verdict {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 12px;
  font-size: 21px;
  font-weight: 800;
}

.scene-wp-simple .notes {
  display: grid;
  gap: 4px;
  justify-items: center;
  font-size: 22px;
  font-weight: 700;
}
.scene-wp-simple .n1 { animation: fade 0.5s ease var(--cue-5) both; }
.scene-wp-simple .n1 em {
  padding: 2px 10px;
  background: var(--paper-deep);
  font-style: normal;
  border-radius: 999px;
}
.scene-wp-simple .n2 {
  font-size: 25px;
  animation: rise 0.6s var(--ease-pop) var(--cue-6) both;
}
.scene-wp-simple .warnline {
  padding: 3px 14px;
  display: inline-block;
  background: var(--warn);
  color: #fff;
  font-style: normal;
  border-radius: 8px;
}

/* ══════ 場面6 検索は、見た目の問題ではない ══════ */

.scene-seo {
  padding: 22px 56px var(--caption-space);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.scene-seo .myth {
  justify-self: center;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 14px;
  font-size: 26px;
  font-weight: 700;
  animation: fade 0.6s ease var(--cue-2) both;
}
.scene-seo .myth-text {
  grid-row: 1;
  grid-column: 1;
  color: var(--ink-soft);
}
.scene-seo .myth-strike {
  grid-row: 1;
  grid-column: 1;
  height: 4px;
  align-self: center;
  background: var(--warn);
  scale: 0 1;
  transform-origin: left;
  animation: draw-x 0.6s var(--ease-out) var(--cue-3) forwards;
}
.scene-seo .myth-no {
  padding: 4px 14px;
  background: var(--warn);
  color: #fff;
  font-size: 22px;
  border-radius: 999px;
  animation: pop 0.5s var(--ease-pop) calc(var(--cue-3) + 0.2s) both;
}

.scene-seo .points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
}
.scene-seo .pt {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  background: var(--key-soft);
  border-radius: 14px;
}
.scene-seo .pt-1 { animation: rise 0.6s var(--ease-out) var(--cue-6) both; }
.scene-seo .pt-2 { animation: rise 0.6s var(--ease-out) var(--cue-8) both; }
.scene-seo .pt .no {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--key);
  color: #fff;
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 800;
  border-radius: 50%;
}
.scene-seo .pt-ttl {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.45em;
}
.scene-seo .pt-pic {
  margin-top: 8px;
  width: 100%;
  max-width: 200px;
  height: 90px;
}
.scene-seo .pt-pic .ln { fill: var(--ink); opacity: 0.3; }
.scene-seo .pt-pic .ln.hit { fill: var(--key); opacity: 0.75; }
.scene-seo .pt-pic .pen { fill: var(--key); }
.scene-seo .firsts {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
.scene-seo .fs {
  padding: 5px 14px;
  background: #fff;
  color: var(--key);
  font-size: 20px;
  font-weight: 800;
  border-radius: 8px;
  animation: slide-right 0.45s var(--ease-out) both;
}
.scene-seo .f1 { animation-delay: var(--cue-9); }
.scene-seo .f2 { animation-delay: calc(var(--cue-9) + 0.45s); }
.scene-seo .f3 { animation-delay: calc(var(--cue-9) + 0.9s); }

.scene-seo .conclusion {
  justify-self: center;
  padding: 10px 26px;
  background: var(--ink);
  color: var(--paper);
  font-size: 28px;
  font-weight: 700;
  border-radius: 12px;
  animation: rise 0.6s var(--ease-pop) var(--cue-11) both;
}
.scene-seo .conclusion em {
  color: var(--marker);
  font-style: normal;
}

/* ══════ 場面7 選び方は、ひとつだけ ══════ */

.scene-choose {
  padding: 22px 56px var(--caption-space);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}
.scene-choose .theq {
  justify-self: center;
  padding: 8px 24px;
  background: var(--paper-deep);
  font-size: 28px;
  font-weight: 800;
  border-radius: 999px;
  animation: pop 0.6s var(--ease-pop) var(--cue-1) both;
}
.scene-choose .theq em {
  color: var(--key);
  font-style: normal;
}

.scene-choose .answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 28px;
}
.scene-choose .ans {
  padding: 14px 20px 16px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  background: var(--side-soft);
  border: 3px solid var(--side);
  border-radius: 14px;
}
.scene-choose .is-st { animation: slide-left 0.6s var(--ease-out) var(--cue-2) both; }
.scene-choose .is-wp { animation: slide-right 0.6s var(--ease-out) var(--cue-4) both; }
.scene-choose .ans-if {
  padding: 3px 14px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 19px;
  font-weight: 700;
  border-radius: 999px;
}
.scene-choose .ans-name {
  color: var(--side);
  font-size: 30px;
  font-weight: 900;
}
.scene-choose .ans-why {
  color: var(--ink-soft);
  font-size: 19px;
  font-weight: 700;
}

.scene-choose .mix {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 4px;
  animation: fade 0.6s ease var(--cue-6) both;
}
.scene-choose .mix-ttl {
  font-size: 22px;
  font-weight: 700;
}
.scene-choose .mix-ex {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 800;
  animation: fade 0.5s ease var(--cue-7) both;
}
.scene-choose .ex-st {
  padding: 5px 14px;
  background: var(--st-soft);
  color: var(--st);
  border-radius: 8px;
}
.scene-choose .ex-wp {
  padding: 5px 14px;
  background: var(--wp-soft);
  color: var(--wp);
  border-radius: 8px;
}
.scene-choose .plus { color: var(--ink-soft); }

.scene-choose .closing {
  justify-self: center;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
  animation: rise 0.7s var(--ease-pop) var(--cue-9) both;
}