/* ========================================
   場面3〜12（まだ画面を作っていない場面）
   見本では場面1・2だけを見てもらう。声と字幕は全場面そろっているので、
   ここは「どの章を話しているか」だけが分かる仮の画面。
   ⚠️ 画面を作ったら、その場面の CSS を scenes/ に足して、この仮画面から外す。
   ======================================== */

.scene-todo {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
}

.scene-todo .todo {
  padding: 28px 44px;
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-family: var(--font-mincho);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.4em;
  text-align: center;
  border: 3px dashed var(--line);
  border-radius: 16px;
  animation: fade 0.6s ease both;
}

.scene-todo .todo span {
  padding: 5px 16px;
  background: var(--line);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.16em;
  border-radius: 4px;
}

.scene-todo .todo::after {
  content: "この章の画面は、これから作ります";
  color: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
}