@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* =========================================================
   さわってうごく理科教材 デザインルール ―「楽しさ全開」
   ・シールのようなカード：太い線（2.5px）と、ずらした影
   ・分野ごとのはっきりした色、丸く太い見出し（Dela Gothic One）
   ・トップの絵は「理科の小さな星」（4つの分野の景色がのった星）
   ・読みやすさは守る：本文16px、コントラスト比4.5:1以上、黄と黒のフォーカス枠、44px以上
   ========================================================= */

/* ---------- 1. デザイントークン ---------- */
:root {
  /* 色 */
  --ink: #1b1b2f;            /* 文字・線・影 */
  --ink-sub: #4a4a5e;        /* 補足の文字 */
  --paper: #ffffff;          /* カード */
  --bg: #f4f7ff;             /* 画面の地（水玉を敷く） */
  --bg-dot: #d9e1f7;
  --link: #2446d8;           /* リンク・テキストボタン */
  --sun: #ffd23f;            /* いちばん大事なボタン・印 */
  --sun-soft: #fff3c4;
  --pink: #ff5fa2;
  --sky: #bfe3ff;

  /* 分野の色：fill は面、soft はうすい面、text は文字 */
  --physics-fill: #3d7bff;   --physics-soft: #dde8ff;   --physics-text: #1d4fc4;
  --chemistry-fill: #b65cff; --chemistry-soft: #f1e3ff; --chemistry-text: #7a2bb8;
  --biology-fill: #2ec66a;   --biology-soft: #d9f7e5;   --biology-text: #157a3a;
  --earth-fill: #ff8a2a;     --earth-soft: #ffe7d1;     --earth-text: #a14d00;
  /* べんりツール（ピンク）と、ストップウォッチの「止まった」色（赤） */
  --tool-fill: #ff5fa2;      --tool-soft: #ffe1ef;      --tool-text: #b0185f;
  --stop-fill: #ff5a4e;      --stop-soft: #ffe0dc;      --stop-text: #b3261e;

  --focus-inner: #ffd23f;
  --focus-outer: #000000;

  /* 文字 */
  --font-body: "Noto Sans JP", sans-serif;
  --font-display: "Dela Gothic One", "Noto Sans JP", sans-serif;
  --text-caption: 0.875rem;  /* 14px（これより小さくしない） */
  --text-body: 1rem;         /* 16px */
  --text-lead: 1.125rem;     /* 18px */
  --text-h3: 1.25rem;        /* 20px */
  --text-h2: 1.625rem;       /* 26px */
  --text-h1: clamp(1.875rem, 5vw, 2.5rem);
  --text-hero: clamp(2.5rem, 8vw, 4.25rem);
  --line-body: 1.75;
  --line-heading: 1.35;

  /* 余白 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --gutter: 16px;

  /* 形 */
  --line: 2.5px solid var(--ink);
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-full: 999px;
  --pop: 5px 5px 0 var(--ink);        /* シールの影 */
  --pop-hover: 7px 7px 0 var(--ink);
  --pop-small: 3px 3px 0 var(--ink);

  --appbar-height: 60px;
  --tabbar-height: 68px;
  --target-min: 44px;
  --duration: 120ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-appbar: 10;
  --z-tabbar: 20;
  --z-skip: 100;
}

/* スクロールで動く演出の設定（--sd-tl：どのスクロールに合わせるか、--sd-range：どこからどこまでで動くか、
   --sd-name：名前を付けたスクロールの区画）。スクロールに合わせて動かせないブラウザ（古い iPhone など）では、
   ページの中のスクリプトがこの設定を読んで、同じように動かす。子の要素には受けつがない */
@property --sd-tl { syntax: "*"; inherits: false; }
@property --sd-range { syntax: "*"; inherits: false; }
@property --sd-name { syntax: "*"; inherits: false; }

/* スクリプトが動かすときは、動きを止めておいて、スクロールした割合の場面をスクリプトが選ぶ */
html.sdpoly .sd-run,
html.sdpoly .sd-run-b::before,
html.sdpoly .sd-run-a::after {
  animation-duration: 1s !important;
  animation-play-state: paused !important;
  animation-delay: 0s !important;
}

/* ---------- 2. 基本 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* ページの中のリンクで飛んだとき、行き先が上のバーにかくれないように */
  scroll-padding-top: calc(var(--appbar-height) + var(--space-6));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-body);
  letter-spacing: 0.02em;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 1.5px, transparent 1.8px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
  /* 日本語は、文節（ことばのまとまり）で改行する。行の最後の1文字だけが次の行に行かないように */
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  line-height: var(--line-heading);
  text-wrap: balance;
}

p, li, dd, summary, caption, .m-desc, .notice, .btn, .btn-choice {
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* フォーカス枠：黄と黒の二重。消さない */
:focus-visible {
  outline: 4px solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
}

svg {
  flex: none;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  font-weight: 700;
  color: var(--ink);
  background-color: var(--sun);
  border: var(--line);
  border-radius: var(--radius-full);
}

.skip-link:focus {
  top: var(--space-2);
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.prose {
  max-width: 40em;
}

/* トップの「このサイトについて」：横はばいっぱいまで使って折り返す */
.about p {
  text-wrap: wrap;
  word-break: normal;
}

/* トップの「たくさんの人に使ってほしい！」：黄色いカードで目立たせる */
.share-card {
  padding: var(--space-5);
  background-color: var(--sun-soft);
  border: var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--pop);
}

.share-card .section-title {
  margin-top: 0;
}

.share-card .app-actions {
  margin-top: var(--space-2);
}

@media (max-width: 767px) {
  .share-card .app-actions .btn {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .share-card .app-actions .btn {
    width: 100%;
  }
}

.share-card .about-mail {
  margin: var(--space-3) 0 0;
}

.share-card .app-status {
  margin-bottom: 0;
}

.share-card .app-status:empty {
  min-height: 0;
  margin: 0;
}

/* トップの「このサイトについて」の小見出し */
.about-head {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
}

.about-mail {
  overflow-wrap: anywhere;
}

/* トップの「アプリとして使う」 */
.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.app-status {
  min-height: 1.75em;
  margin: var(--space-3) 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---------- 3. 上のバー ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-appbar);
  background-color: var(--paper);
  border-bottom: var(--line);
}

.appbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 1080px;
  height: var(--appbar-height);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.appbar-back {
  display: grid;
  place-items: center;
  width: var(--target-min);
  height: var(--target-min);
  color: var(--ink);
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--pop-small);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.appbar-back:hover {
  color: var(--ink);
  background-color: var(--sun-soft);
}

.appbar-back:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(3px, 3px);
}

.logo {
  margin: 0 0 0 var(--space-1);
}

.logo a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- 4. 学年ナビ（パソコンは上、スマホは下） ---------- */
.tabbar {
  margin-left: auto;
}

.tabbar ul {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabbar a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target-min);
  padding: 0 var(--space-4);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border: 2.5px solid transparent;
  border-radius: var(--radius-full);
  transition: background-color var(--duration) var(--ease-out);
}

.tabbar a:hover {
  color: var(--ink);
  background-color: var(--sun-soft);
}

.tabbar a[aria-current] {
  background-color: var(--sun);
  border-color: var(--ink);
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  }

  .tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-tabbar);
    margin: 0;
    padding: 0 var(--space-2) env(safe-area-inset-bottom);
    background-color: var(--paper);
    border-top: var(--line);
  }

  .tabbar ul {
    gap: 0;
  }

  .tabbar li {
    flex: 1;
  }

  .tabbar a {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: var(--tabbar-height);
    padding: 0;
    font-size: var(--text-caption);
    line-height: 1;
    border: 0;
    border-radius: 0;
  }

  .tabbar a:hover,
  .tabbar a[aria-current] {
    background-color: transparent;
  }

  /* 選んでいる学年は、アイコンの後ろに黄色の丸 */
  .tabbar a svg {
    box-sizing: content-box;
    padding: 3px 14px;
    border: 2.5px solid transparent;
    border-radius: var(--radius-full);
  }

  .tabbar a[aria-current] svg {
    background-color: var(--sun);
    border-color: var(--ink);
  }
}

/* ---------- 5. ページの頭 ---------- */
.breadcrumb {
  padding-top: var(--space-4);
  font-size: var(--text-caption);
  font-weight: 500;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--ink-sub);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink-sub);
}

.page-head {
  padding: var(--space-5) 0;
}

/* 教材ページでは、図と操作を早く見せるために、頭の上下を少しつめる */
.page-head:has(+ .sim-layout) {
  padding: var(--space-4) 0 var(--space-5);
}

.page-title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.chips + .page-title {
  margin-top: var(--space-3);
}

.lead {
  max-width: 40em;
  margin: var(--space-3) 0 0;
  font-size: var(--text-lead);
  line-height: 1.65;
  color: var(--ink-sub);
}

/* ---------- 6. トップのヒーロー ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-7) 0 var(--space-5);
}

/* 題名の大きさを、文字の入る はば から決められるようにする。
   文字は、大きくなっていく星の絵より手前に出す */
.hero > div:first-child {
  position: relative;
  z-index: 2;
  container-type: inline-size;
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  /* せまい画面でも、いちばん長い「うごかして、」（6文字）が1行に入る大きさにする */
  font-size: min(var(--text-hero), calc(100cqi / 6.6));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.hero-title > span {
  display: block;
  /* 「さわって、」などの1行は、とちゅうで折り返さない */
  white-space: nowrap;
}

/* 1文字ずつに分けた文字（トップのページの中で分ける）は、行の中にならべる */
.hero-title .ch {
  display: inline-block;
}

.hero-lead {
  margin: var(--space-5) 0 var(--space-6);
  /* 横はばいっぱいまで使って、1文字ずつ詰めて折り返す */
  text-wrap: wrap;
  word-break: normal;
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--ink-sub);
}

.hero-scene {
  position: relative;
  z-index: 1;               /* 星が大きくなるとき、次の区画の上に重ねる */
  display: block;
  overflow: visible;
  pointer-events: none;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-left: auto;
}

/* トップの絵：理科の小さな星。4つの分野の景色（灯台・ビーカー・木とイカ・火山）が星の上にのっていて、星はゆっくり回る。
   灯台の光は首をふり、ばねはのび縮みし、ビーカーからはあわ、火山からはけむりが出る。
   スクロールすると星はさらに回り、ぐんぐん大きくなって、星に吸いこまれるように消えていく。
   （動きを減らす設定のときは、止まったまま見せる） */
.hero-scene .planet-zoom,
.hero-scene .planet-spin,
.hero-scene .planet-turn {
  transform-box: view-box;
  transform-origin: 220px 170px;
}

.hero-scene .bubbles circle,
.hero-scene .puffs circle {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene .bubbles circle:nth-child(3),
  .hero-scene .puffs circle:nth-child(2) {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-scene .planet-turn {
    animation: planet-turn 80s linear infinite;
  }

  .hero-scene .beam {
    transform-box: view-box;
    transform-origin: 0 -57px;
    animation: beam-sweep 3.2s ease-in-out infinite alternate;
  }

  .hero-scene .bob {
    animation: bob 1.6s ease-in-out infinite alternate;
  }

  .hero-scene .bubbles circle {
    animation: bubble-up 2.4s ease-in infinite;
  }

  .hero-scene .bubbles circle:nth-child(2) { animation-delay: 0.8s; }
  .hero-scene .bubbles circle:nth-child(3) { animation-delay: 1.6s; }

  .hero-scene .puffs circle {
    animation: puff-up 3s ease-out infinite;
  }

  .hero-scene .puffs circle:nth-child(2) { animation-delay: 1s; }
  .hero-scene .puffs circle:nth-child(3) { animation-delay: 2s; }

  .hero-scene .leaves {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sway 2.8s ease-in-out infinite alternate;
  }

  .hero-scene .squid {
    animation: bob 1.2s ease-in-out infinite alternate;
  }

  .hero-scene .stars path {
    transform-box: fill-box;
    transform-origin: center;
    animation: twinkle 2.4s ease-in-out infinite alternate;
  }

  .hero-scene .stars path:nth-child(2) { animation-delay: 0.6s; }
  .hero-scene .stars path:nth-child(3) { animation-delay: 1.2s; }
  .hero-scene .stars path:nth-child(4) { animation-delay: 1.8s; }

  .hero-scene .moon {
    transform-box: fill-box;
    transform-origin: center;
    animation: twinkle 1.8s ease-in-out infinite alternate;
  }
}

@keyframes planet-turn { to { transform: rotate(-360deg); } }
@keyframes beam-sweep {
  from { transform: rotate(-18deg); }
  to   { transform: rotate(18deg); }
}
@keyframes bob { to { transform: translateY(5px); } }
@keyframes bubble-up {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.1); }
}
@keyframes puff-up {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(10px, -40px) scale(1.5); }
}
@keyframes sway {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg); }
}
@keyframes twinkle {
  from { transform: scale(0.75); }
  to   { transform: scale(1.15); }
}

/* ---------- 7. 見出し・区画 ---------- */
.section {
  margin-top: var(--space-8);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* 学年の見出しは、黄色のマーカーを引く */
.section-head .section-title {
  padding: 0 6px;
  background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%);
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-4);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--pop-small);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.section-link::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
}

.section-link:hover {
  color: var(--ink);
  background-color: var(--sun-soft);
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.section-link:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(3px, 3px);
}

/* 分野の見出し：分野の色のラベル */
.field-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  background-color: var(--field-soft);
  border: var(--line);
  border-radius: var(--radius-full);
}

.field-title::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: var(--field-fill);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-full);
}

.field-section + .field-section {
  margin-top: var(--space-7);
}

/* ---------- 8. 分野の色をまとめて切り替える ---------- */
.field-physics   { --field-fill: var(--physics-fill);   --field-soft: var(--physics-soft);   --field-text: var(--physics-text); }
.field-chemistry { --field-fill: var(--chemistry-fill); --field-soft: var(--chemistry-soft); --field-text: var(--chemistry-text); }
.field-biology   { --field-fill: var(--biology-fill);   --field-soft: var(--biology-soft);   --field-text: var(--biology-text); }
.field-earth     { --field-fill: var(--earth-fill);     --field-soft: var(--earth-soft);     --field-text: var(--earth-text); }
.field-tool      { --field-fill: var(--tool-fill);      --field-soft: var(--tool-soft);      --field-text: var(--tool-text); }

/* ---------- 9. ラベル（チップ） ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-3);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
}

.chip.field-physics,
.chip.field-chemistry,
.chip.field-biology,
.chip.field-earth,
.chip.field-tool {
  color: var(--field-text);
  background-color: var(--field-soft);
}

/* ---------- 10. 教材カード（シール） ---------- */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* トップの教材カード：横にならべて、スワイプやボタンで送るカルーセル */
.carousel {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: min(300px, 82%);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-2);
  /* カードの影と、マウスを重ねたときに浮く動きが切れないように、まわりをあける */
  margin: calc(var(--space-3) * -1) calc(var(--space-2) * -1) 0;
  padding: var(--space-3) var(--space-2) var(--space-4);
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel > li {
  scroll-snap-align: start;
}

.carousel-nav {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.carousel-nav[hidden] {
  display: none;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
  color: var(--ink);
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--pop-small);
  cursor: pointer;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}

.carousel-btn:hover {
  background-color: var(--sun-soft);
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.carousel-btn:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(3px, 3px);
}

/* いま何枚目あたりを見ているかの点 */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.carousel-dots[hidden] {
  display: none;
}

.carousel-dots li {
  width: 10px;
  height: 10px;
  background-color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  transition: width 200ms var(--ease-spring), background-color 200ms;
}

.carousel-dots li.is-on {
  width: 26px;
  background-color: var(--sun);
}

.m-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--pop);
  transition: transform 180ms var(--ease-spring), box-shadow 180ms var(--ease-spring);
}

.m-card:hover {
  color: var(--ink);
  box-shadow: var(--pop-hover);
  transform: translate(-2px, -2px) rotate(-0.6deg);
}

.m-card:active {
  box-shadow: 1px 1px 0 var(--ink);
  transform: translate(4px, 4px);
  transition-duration: 60ms;
}

/* カードの上の絵：分野の色の面に、白い線で大きく */
.m-icon {
  display: grid;
  place-items: center;
  height: 132px;
  color: #ffffff;
  background-color: var(--field-fill);
  background-image: radial-gradient(rgba(255, 255, 255, 0.25) 2px, transparent 2.4px);
  background-size: 18px 18px;
  border-bottom: var(--line);
}

.m-icon svg {
  width: 88px;
  height: 88px;
  filter: drop-shadow(3px 3px 0 rgba(27, 27, 47, 0.35));
  transition: transform 220ms var(--ease-spring);
}

.m-card:hover .m-icon svg {
  transform: scale(1.12) rotate(3deg);
}

.m-card > span:last-child {
  display: block;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.m-title {
  display: block;
  font-size: var(--text-h3);
  font-weight: 900;
  line-height: 1.45;
}

.m-card:hover .m-title {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--field-fill);
  text-underline-offset: 0.25em;
}

.m-desc {
  display: block;
  margin-top: var(--space-2);
  line-height: 1.65;
  color: var(--ink-sub);
}

.m-card .chips {
  margin-top: var(--space-4);
}

/* 教材がまだない分野 */
.empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font-weight: 500;
  color: var(--ink-sub);
  background-color: rgba(255, 255, 255, 0.7);
  border: 2.5px dashed var(--ink-sub);
  border-radius: var(--radius-m);
}

.empty::before {
  content: "もうすぐ";
  flex: none;
  padding: 0 var(--space-3);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.8;
  color: var(--ink);
  background-color: var(--sun);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  transform: rotate(-4deg);
}

/* ---------- 11. ボタン（押すと沈む） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  font: inherit;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--pop-small);
  cursor: pointer;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}

.btn:hover {
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: translate(-2px, -2px);
}

.btn:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(3px, 3px);
  transition-duration: 50ms;
}

.btn-block {
  width: 100%;
}

/* 塗り：その画面でいちばん大事な操作に1つだけ（黄色） */
.btn-primary {
  background-color: var(--sun);
}

.btn-primary:hover {
  background-color: #ffdc66;
}

/* 枠線：ほかの操作（同じ場所に3つまで） */
.btn-secondary:hover {
  background-color: var(--sun-soft);
}

/* テキスト：もとに戻す・消すなど、控えめな操作 */
.btn-tertiary {
  min-height: var(--target-min);
  font-weight: 700;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.btn-tertiary:hover {
  color: var(--link);
  text-decoration-thickness: 2px;
  background-color: rgba(36, 70, 216, 0.08);
  box-shadow: none;
  transform: none;
}

.btn-tertiary:active {
  transform: none;
}

/* 選ぶボタン：選んだら黄色くなり、右にチェックがつく */
.btn-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: var(--space-2) 48px var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 900;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-s);
  box-shadow: var(--pop-small);
  cursor: pointer;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}

.btn-choice small {
  margin-top: 2px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--ink-sub);
}

.btn-choice:hover {
  background-color: var(--sun-soft);
}

.btn-choice:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(3px, 3px);
}

.btn-choice[aria-pressed="true"] {
  background-color: var(--sun);
}

.btn-choice[aria-pressed="true"] small {
  color: var(--ink);
}

.btn-choice[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 16px;
  margin-top: -10px;
  border-right: 3.5px solid var(--ink);
  border-bottom: 3.5px solid var(--ink);
  transform: rotate(45deg);
  animation: pop-in 260ms var(--ease-spring);
}

@keyframes pop-in {
  from { opacity: 0; transform: rotate(45deg) scale(0.2); }
  to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* ---------- 12. シミュレーションの画面 ---------- */
.sim-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: var(--space-5);
  align-items: start;
}

/* 操作の多い教材は、パネルを広くする */
.sim-layout.wide-panel {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.card {
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--pop);
}

.sim-stage {
  position: relative;
  overflow: hidden;
  padding: var(--space-3);
}

/* ふきだしが変わったら、ぽんと出る */
.notice.pop {
  animation: bubble-pop 320ms var(--ease-spring);
}

@keyframes bubble-pop {
  from { transform: scale(0.92); }
  to   { transform: none; }
}

/* 学習のゴールに届いたら、ふきだしが黄色く光って、ぴょんとはねる（次のことばが出るまで黄色のまま） */
.notice.cheer {
  background-color: var(--sun-soft);
  animation: cheer 800ms var(--ease-spring);
}

@keyframes cheer {
  0%   { transform: none; background-color: var(--sun); }
  25%  { transform: translateY(-10px) scale(1.03); }
  50%  { transform: translateY(0) scale(0.99); }
  75%  { transform: translateY(-4px); }
  100% { transform: none; background-color: var(--sun-soft); }
}

/* スライダーの下のひとこと */
.control-hint {
  min-height: 1.5em;
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--ink-sub);
}

.sim-canvas {
  display: block;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-s);
}

.sim-canvas.is-draw {
  touch-action: none;   /* 線を引くときに、ページがスクロールしないように */
  cursor: crosshair;
}

/* 図の中のものを指でつまんで動かす教材：動かしているあいだ、ページがスクロールしないように */
.sim-canvas.is-drag {
  touch-action: none;
  cursor: grab;
}

/* 数値の表示（時間・高さなど） */
.readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.readout > div {
  padding: var(--space-2) var(--space-3);
  background-color: var(--sun-soft);
  border: 2px solid var(--ink);
  border-radius: var(--radius-s);
}

.readout dt {
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--ink-sub);
}

.readout dd {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ふきだし */
.guide {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ふきだしを図の上に置く版（図とふきだしを一画面に収める）。文の長さで図が上下しないように、3行分の高さをとる */
.guide-top {
  margin: 0 0 var(--space-3);
}

.guide-top .notice {
  min-height: calc(1.65em * 3 + var(--space-3) * 2 + 5px);
}

.choice-list + .control {
  margin-top: var(--space-4);
}

/* 図の大きさを、画面の高さに合わせて小さくする（ふきだし・図・数値・道具が1画面に収まるように）。
   --ar は図の縦横の比、--stage-room は図のほかの部分（ふきだし・数値・道具）の高さ。どちらもページの中で測って入れる。
   ただし、高さがとても低い画面（スマホの横向き・小さくした窓）では1画面に収めきれないので、はば 320px より小さくはしない */
.sim-canvas.fit-height {
  width: min(100%, max(320px, calc((100svh - var(--appbar-height) - var(--space-4) * 2 - var(--stage-room, 260px)) * var(--ar, 1.25))));
  margin-inline: auto;
}

/* 図とふきだしを、操作しているあいだ画面の上に残す。
   残すのは、操作パネルが終わるところまで（「使い方」などの説明まで来たら、いっしょに流れていく）。
   画面の高さが低いときは、操作する場所がなくなるので残さない */
@media (min-height: 640px) {
  .sim-stage.keep-visible {
    position: sticky;
    top: calc(var(--appbar-height) + var(--space-4));
    z-index: 2;
  }
}

/* せまい画面（スマホ・たてのタブレット）では、上のバーのすぐ下に残し、その下で操作パネルを動かす */
@media (max-width: 899px) and (min-height: 640px) {
  .sim-stage.keep-visible {
    top: var(--appbar-height);
  }

  /* 図は画面の高さの4割くらいまで（横はばいっぱいが基本） */
  .sim-stage.keep-visible .sim-canvas.fit-height {
    width: min(100%, calc(42svh * var(--ar, 1.25)));
  }

  .sim-stage.keep-visible .guide-top {
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  /* 上に残す部分を細くする：ふきだしは2行ぶんから、数値の表示はうすく */
  .sim-stage.keep-visible .guide-top .notice {
    min-height: calc(1.65em * 2 + var(--space-2) * 2 + 5px);
    padding: var(--space-2) var(--space-3);
  }

  .sim-stage.keep-visible .readout {
    margin-top: var(--space-2);
  }

  .sim-stage.keep-visible .readout > div {
    padding: 2px var(--space-2);
  }

  .sim-stage.keep-visible .readout dd {
    font-size: 1.125rem;
  }

  .sim-stage.keep-visible .tool-list .btn-choice {
    min-height: 60px;
  }

  /* それでも高すぎて、下の操作パネルが見えなくなるときは残さない（is-tall はページの中で付ける） */
  .sim-stage.keep-visible.is-tall {
    position: relative;
    top: auto;
  }

  /* キーボードで動いたときなどに、ボタンが残した図のうしろにかくれないように（--stage-h はページの中で入れる） */
  html:has(.sim-stage.keep-visible:not(.is-tall)) {
    scroll-padding-top: calc(var(--appbar-height) + var(--stage-h, 0px) + var(--space-2));
    scroll-padding-bottom: calc(var(--tabbar-height) + var(--space-2));
  }
}

/* 操作パネルの小見出し（ボタンの組の上に付ける短い名前） */
.row-label {
  margin: 0 0 var(--space-2);
  font-weight: 900;
}

* + .row-label {
  margin-top: var(--space-4);
}

/* 選ぶボタンを横にならべる。文字の長いボタンは広くし、入りきらないときは次の行へ */
.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choice-row .btn-choice {
  flex: 1 1 0;
  align-items: center;
  width: auto;
  min-width: max-content;
  min-height: 52px;
  padding: var(--space-2);
  letter-spacing: 0;
  text-align: center;
}

/* 選んだ印は、ボタンの右上に小さく付ける */
.choice-row .btn-choice[aria-pressed="true"]::after {
  top: 6px;
  right: 8px;
  width: 6px;
  height: 11px;
  margin-top: 0;
  border-right-width: 3px;
  border-bottom-width: 3px;
}

.predict-box {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background-color: var(--sun-soft);
  border: 2px solid var(--ink);
  border-radius: var(--radius-s);
}

.predict-box .panel-title {
  margin-top: 0;
}

/* 記録の表 */
.data-table {
  width: 100%;
  margin-top: var(--space-4);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table caption {
  margin-bottom: var(--space-2);
  font-weight: 900;
  text-align: left;
}

.data-table th,
.data-table td {
  padding: var(--space-1) var(--space-2);
  line-height: 1.4;
  text-align: center;
  border: 2px solid var(--ink);
}

.data-table thead th {
  font-size: var(--text-caption);
  background-color: var(--physics-soft);
}

.data-table thead small {
  display: block;
  font-size: inherit;   /* 14px より小さくしない */
  font-weight: 500;
}

.data-table tbody th {
  font-size: var(--text-caption);
  text-align: left;
}

.data-table td {
  font-weight: 900;
  white-space: nowrap;
}

.data-table tr.is-here {
  background-color: var(--sun-soft);
}

/* いまいる場所の行には、色のほかに印も付ける */
.data-table tr.is-here > :first-child::before {
  content: "▶ " / "";
}

.notice {
  position: relative;
  flex: 1;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  line-height: 1.65;
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--pop-small);
}

/* 操作パネル */
.panel {
  position: sticky;
  top: calc(var(--appbar-height) + var(--space-4));
  padding: var(--space-5);
}

.panel-title {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 0 4px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  background: linear-gradient(transparent 60%, var(--sun) 60%, var(--sun) 94%, transparent 94%);
}

.panel-title:not(:first-child) {
  margin-top: var(--space-5);
}

.panel-actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.panel-title + .panel-actions {
  margin-top: 0;
}

.panel-note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  font-size: var(--text-caption);
  color: var(--ink-sub);
  border-top: 2px dashed var(--bg-dot);
}

.panel-note p {
  margin: 0;
}

.panel-note strong {
  color: var(--ink);
}

.choice-list {
  display: grid;
  gap: var(--space-3);
}

.control + .control {
  margin-top: var(--space-3);
}

.control-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: 700;
}

.control-value {
  padding: 0 var(--space-2);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background-color: var(--sun-soft);
  border-radius: 6px;
}

/* スライダー：太い線と、黄色い大きなつまみ */
input[type="range"] {
  display: block;
  width: 100%;
  height: var(--target-min);
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  background-color: var(--physics-soft);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-full);
}

input[type="range"]::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -11px;
  background-color: var(--sun);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-full);
  box-shadow: 2px 2px 0 var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--duration) var(--ease-spring);
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

input[type="range"]::-moz-range-track {
  height: 8px;
  background-color: var(--physics-soft);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-full);
}

input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background-color: var(--sun);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-full);
  box-shadow: 2px 2px 0 var(--ink);
}

/* 道具をえらぶボタン（解剖の教材など）。絵と名前をたてにならべる */
.tool-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.tool-list .btn-choice {
  align-items: center;
  min-height: 76px;
  padding: var(--space-2) var(--space-1);
  font-size: var(--text-caption);
  text-align: center;
}

.tool-list .btn-choice svg {
  margin-bottom: 2px;
}

.tool-list .btn-choice[aria-pressed="true"]::after {
  top: 8px;
  right: 8px;
  width: 6px;
  height: 11px;
  margin-top: 0;
  border-right-width: 3px;
  border-bottom-width: 3px;
}

@media (max-width: 480px) {
  .tool-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tool-list .btn-choice {
    min-height: 60px;
  }
}

/* 見つけたものの記録（解剖の教材など）。見つけると黄色になり、チェックが付く */
.panel-sub {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-caption);
  font-weight: 900;
  color: var(--ink);
}

.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  padding: 2px var(--space-3);
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--ink-sub);
  background-color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
}

.check-list li.is-found {
  color: var(--ink);
  background-color: var(--sun);
}

.check-list li.is-found::before {
  content: "✓ ";
}

/* 画面には出さず、読み上げだけで伝える文字 */
.sr-state {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 13. 開いて読む説明（アコーディオン） ---------- */
.info {
  margin-top: var(--space-7);
}

.accordion {
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--pop-small);
}

.accordion + .accordion {
  margin-top: var(--space-4);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-m);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-right: var(--space-1);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 200ms var(--ease-spring);
}

.accordion[open] summary::after {
  transform: translateY(3px) rotate(-135deg);
}

.accordion summary:hover {
  background-color: var(--sun-soft);
}

.accordion-body {
  padding: 0 var(--space-5) var(--space-5);
}

.accordion-body > :first-child {
  margin-top: 0;
}

.accordion-body > :last-child {
  margin-bottom: 0;
}

/* 手順：番号を黄色い丸で（順番のある手順だけ） */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-left: 48px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: 1;
  background-color: var(--sun);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-full);
}

.steps li + li {
  margin-top: var(--space-4);
}

.steps + p {
  margin-top: var(--space-4);
}

/* ---------- 14. フッター ---------- */
.site-footer {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--gutter);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--ink-sub);
  text-align: center;
}

.site-footer p {
  margin: 0;
}

/* ---------- 15. 画面の幅による切り替え ---------- */
@media (min-width: 768px) {
  .page {
    padding: 0 var(--space-5);
  }

  .appbar-inner {
    padding: 0 var(--space-4);
  }
}

@media (max-width: 767px) {
  .breadcrumb {
    display: none;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-6);
  }

  .hero-scene {
    max-width: 340px;
    margin: 0 auto;
  }

  .hero .btn {
    width: 100%;
  }

  /* 学年の見出しの行：見出しと「＜」「＞」を1行に、「すべて見る」はその下に */
  .section-head .carousel-nav {
    order: 2;
  }

  .section-head .section-link {
    order: 3;
  }

  /* 図のまわりの余白を少しへらして、図を大きく見せる */
  .sim-stage {
    padding: var(--space-2);
  }
}

@media (max-width: 899px) {
  .sim-layout,
  .sim-layout.wide-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel {
    position: static;
  }

  .choice-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ---------- 17. べんりツール：ストップウォッチ ---------- */
/* 文字盤とボタンは、いつも1画面に収める。記録はグラフにして横（せまい画面では下）に出す */
.sw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.sw-watch {
  position: sticky;
  top: var(--appbar-height);
  height: calc(100svh - var(--appbar-height) - var(--space-2));   /* 上のバーの線のぶんも引く */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-4);
}

.sw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.sw-head .breadcrumb {
  flex-basis: 100%;
  padding-top: 0;
}

.sw-head .page-title {
  margin: 0;
  font-size: var(--text-h2);
}

/* 文字盤の大きさは、あいている高さに合わせる */
.sw-dialbox {
  position: relative;
  container-type: size;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
}

/* 文字盤のうしろを流れる大きな文字（はかっているときだけ流れる） */
.sw-marquee {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  align-content: space-evenly;
  pointer-events: none;
}

.sw-mrow {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(56px, 18cqh, 140px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--bg-dot);
  transition: opacity 300ms, transform 300ms;
}

.sw-mrow span {
  display: inline-block;
}

.sw-mrow.swap {
  opacity: 0;
  transform: translateY(30%);
}

.is-running .sw-mrow {
  -webkit-text-stroke-color: var(--biology-soft);
}

.is-stopped .sw-mrow {
  -webkit-text-stroke-color: var(--stop-soft);
}

.sw-dial {
  position: relative;
  width: calc(min(100cqw, 100cqh) - 24px);
  aspect-ratio: 1;
  container-type: inline-size;
  background-color: var(--paper);
  border: var(--line);
  border-radius: 50%;
  box-shadow: var(--pop);
  transition: box-shadow 400ms;
}

.is-running .sw-dial {
  box-shadow: 0 0 0 8px var(--biology-soft), var(--pop);
}

.is-stopped .sw-dial {
  box-shadow: 0 0 0 8px var(--stop-soft), var(--pop);
}

.sw-dial svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sw-tick { stroke: var(--bg-dot); stroke-width: 2; stroke-linecap: round; }
.sw-tick.big { stroke: var(--ink-sub); stroke-width: 3.5; }
.sw-tick.lit { stroke: var(--biology-fill); }
.is-stopped .sw-tick.lit { stroke: var(--stop-fill); }
.sw-track { fill: none; stroke: var(--bg); stroke-width: 14; }
.sw-arc { fill: none; stroke: var(--biology-fill); stroke-width: 14; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 200px 200px; }
.is-stopped .sw-arc { stroke: var(--stop-fill); }
.sw-arc.rewind { transition: stroke-dashoffset 600ms cubic-bezier(0.6, 0, 0.2, 1); }
.sw-orbit { transform-origin: 200px 200px; }
.sw-orbit circle { fill: var(--ink); }
.is-running .sw-orbit circle { fill: var(--biology-fill); stroke: var(--ink); stroke-width: 2.5; }
.sw-orbit.rewind { transition: transform 600ms cubic-bezier(0.6, 0, 0.2, 1); }
.sw-spin { transform-origin: 200px 200px; }
.sw-ringtext { font: 700 14px var(--font-body); letter-spacing: 2px; fill: var(--ink-sub); }
.is-running .sw-ringtext { fill: var(--biology-text); }

/* 記録した時間の印（1分で1周の位置） */
.sw-mark circle { fill: var(--sun); stroke: var(--ink); stroke-width: 2.5; }
.sw-mark text { font: 900 14px var(--font-body); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.sw-mark { transform-box: fill-box; transform-origin: center; }
.sw-mark.new { animation: sw-mark-in 600ms var(--ease-spring); }
@keyframes sw-mark-in { from { transform: scale(0); } 60% { transform: scale(1.5); } to { transform: scale(1); } }

.sw-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.2cqi;
  text-align: center;
}

.sw-state {
  padding: 0.1em 0.9em;
  font-size: clamp(14px, 4.4cqi, 20px);
  font-weight: 900;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--ink);
  background-color: var(--bg);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
}

.is-running .sw-state { color: var(--biology-text); background-color: var(--biology-soft); }
.is-stopped .sw-state { color: var(--stop-text); background-color: var(--stop-soft); }

/* 1文字ずつ、ばらばらに飛び出してくる文字 */
.sw-kin { display: inline-block; white-space: pre; }
.sw-kin.go { animation: sw-kin-in 550ms var(--ease-spring) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes sw-kin-in {
  from { transform: translateY(80%) rotate(calc(var(--r) * 1deg)) scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.sw-digits {
  display: flex;
  align-items: baseline;
  font-size: calc(var(--fs, 22) * 1cqi);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: font-size 400ms var(--ease-spring);
}

.sw-digits .frac { font-size: 0.62em; color: var(--ink-sub); }
.is-running .sw-digits .frac { color: var(--biology-text); }

/* 秒の数字は、くるっと下から上へ入れかわる */
.sw-slot { display: inline-block; position: relative; overflow: hidden; height: 1.1em; line-height: 1.1; vertical-align: bottom; }
.sw-slot .ch { display: block; }
.sw-slot .ch.in { animation: sw-ch-in 420ms var(--ease-spring); }
.sw-slot .ch.out { position: absolute; left: 0; top: 0; animation: sw-ch-out 300ms ease-in forwards; }
@keyframes sw-ch-in { from { transform: translateY(100%) skewY(8deg); } to { transform: none; } }
@keyframes sw-ch-out { to { transform: translateY(-100%) skewY(-8deg); opacity: 0; } }

.sw-unit { font-size: clamp(14px, 4cqi, 20px); font-weight: 700; color: var(--ink-sub); }
.sw-digits.pop { animation: sw-pop 450ms var(--ease-spring); }
@keyframes sw-pop { 40% { transform: scale(1.1, 0.92); } }

/* 切りかえたときに、うしろで大きくはじける文字 */
.sw-burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 22cqi;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px var(--biology-fill);
  opacity: 0;
  pointer-events: none;
}

.sw-burst.halt { -webkit-text-stroke-color: var(--stop-fill); }
.sw-burst.idle { -webkit-text-stroke-color: var(--ink-sub); }
.sw-burst.play { animation: sw-burst 900ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes sw-burst {
  0% { opacity: 0; transform: scale(0.5); }
  25% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); letter-spacing: 0.2em; }
}

/* ボタン */
.sw-controls {
  display: grid;
  gap: var(--space-3);
  width: min(100%, 520px);
  justify-self: center;
}

.sw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.sw-row .btn {
  padding-inline: var(--space-3);
  white-space: nowrap;
}

.sw-main {
  min-height: clamp(72px, 12svh, 104px);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  box-shadow: var(--pop);
}

.sw-main:hover { box-shadow: var(--pop-hover); }
.sw-main:active { box-shadow: 0 0 0 var(--ink); transform: translate(5px, 5px); }
.sw-main.is-on { background-color: var(--stop-fill); }
.sw-main.is-on:hover { background-color: var(--stop-fill); }

.sw-main .ico { position: relative; width: 1em; height: 1em; }
.sw-main .ico svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 450ms var(--ease-spring), opacity 250ms; }
.sw-main .ico .pause { opacity: 0; transform: rotate(-90deg) scale(0.4); }
.sw-main.is-on .ico .play { opacity: 0; transform: rotate(90deg) scale(0.4); }
.sw-main.is-on .ico .pause { opacity: 1; transform: none; }

.sw-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.9em;
  height: 1.9em;
  padding: 0 0.4em;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  background-color: var(--sun);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
}

.sw-num.bump { animation: sw-pop 500ms var(--ease-spring); }
.sw-reset svg { transition: transform 600ms var(--ease-spring); }
.sw-reset.spin svg { transform: rotate(-360deg); }
.sw-reset.nope { animation: sw-nope 400ms; }
@keyframes sw-nope { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.sw-note {
  min-height: 1.5em;
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-sub);
}

/* 記録（インフォグラフィック） */
.sw-records {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-5);
  margin-top: var(--space-4);
}

.sw-records-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.sw-records-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
}

.sw-records-head p {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--ink-sub);
}

.sw-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.sw-kpi {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  background-color: var(--sun-soft);
  border: 2px solid var(--ink);
  border-radius: var(--radius-s);
}

.sw-kpi::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background-color: var(--c, var(--ink));
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
  transition: transform 800ms var(--ease-spring);
}

.sw-kpi.count { --c: var(--biology-fill); }
.sw-kpi.avg { --c: var(--physics-fill); background-color: var(--physics-soft); }
.sw-kpi.spread { --c: var(--stop-fill); }
.sw-kpi .k { font-size: var(--text-caption); font-weight: 700; color: var(--ink-sub); }
.sw-kpi .v { font-size: clamp(1.25rem, 3.2vw, 1.625rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.sw-kpi .v small { margin-left: 2px; font-size: var(--text-caption); color: var(--ink-sub); }
.sw-kpi.bump .v { animation: sw-pop 500ms var(--ease-spring); }

.sw-chart {
  position: relative;
  --pl: 66px;
  --pr: 68px;
  padding-top: 30px;
}

/* 平均の線：すべての棒の上に、点線で引く */
.sw-avgline {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  left: calc(var(--pl) + (100% - var(--pl) - var(--pr)) * var(--r, 0));
  border-left: 2.5px dashed var(--ink);
  pointer-events: none;
  transition: left 800ms var(--ease-spring);
}

.sw-avgline span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 var(--space-3);
  font-size: var(--text-caption);
  font-weight: 900;
  line-height: 1.6;
  white-space: nowrap;
  background-color: var(--sun);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
}

.sw-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sw-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 10px;
  background-color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-s);
}

.sw-item .badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-weight: 900;
  background-color: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 10px;
}

.sw-item .mid { display: grid; gap: 6px; min-width: 0; }
.sw-item .top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.sw-item .t { font-size: 1.375rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sw-item .diff { font-size: var(--text-caption); color: var(--ink-sub); }
.sw-item .tag { padding: 0 var(--space-2); font-size: var(--text-caption); font-weight: 900; line-height: 1.5; border-radius: var(--radius-full); }
.sw-item .tag.min { color: var(--biology-text); background-color: var(--biology-soft); }
.sw-item .tag.max { color: var(--stop-text); background-color: var(--stop-soft); }
.sw-bar-track { height: 12px; overflow: hidden; background-color: var(--bg); border: 1.5px solid var(--ink); border-radius: var(--radius-full); }
.sw-bar { width: 0; height: 100%; background-color: var(--physics-fill); transition: width 800ms var(--ease-spring), background-color 400ms; }
.sw-item.is-min .sw-bar { background-color: var(--biology-fill); }
.sw-item.is-max .sw-bar { background-color: var(--stop-fill); }
.sw-item.new { animation: sw-drop 600ms var(--ease-spring); }
.sw-item.new .badge { animation: sw-flash 1200ms ease-out; }
@keyframes sw-drop { from { transform: translateX(-24px) scale(0.94); opacity: 0; } }
@keyframes sw-flash { from { background-color: var(--sun); } }
.sw-item.leaving { animation: sw-leave 380ms ease-in forwards; }
@keyframes sw-leave { to { transform: translateX(40px) scale(0.9); opacity: 0; } }

.sw-del {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
  background-color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
}

.sw-del:hover { color: var(--stop-text); background-color: var(--stop-soft); }
.sw-del svg { width: 20px; height: 20px; }

.sw-empty {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  line-height: 1.75;
  text-align: center;
  color: var(--ink-sub);
  border: 2.5px dashed var(--ink-sub);
  border-radius: var(--radius-m);
}

.sw-empty .bob { display: inline-block; font-size: 1.75rem; animation: sw-bob 2400ms ease-in-out infinite; }
@keyframes sw-bob { 50% { transform: translateY(-6px); } }

/* 記録したとき、時間が記録の欄へ飛んでいく */
.sw-flyer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-skip);
  padding: var(--space-1) var(--space-4);
  font-size: 1.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  background-color: var(--sun);
  border: var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--pop-small);
}

@media (max-width: 899px) {
  .sw-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sw-watch {
    position: relative;
    top: auto;
  }
}

@media (max-width: 767px) {
  .sw-watch {
    height: calc(100svh - var(--appbar-height) - var(--tabbar-height) - env(safe-area-inset-bottom) - var(--space-2));
  }

  .sw-records {
    padding: var(--space-4);
  }
}

/* 横長で低い画面（スマホの横向きなど）は、時計とボタンを横にならべる。
   ただし、はばの広い画面では記録が右にならぶので、時計の列がせまい。そのときは時計の下にボタンを置いたままにする */
@media (max-width: 899px) and (max-height: 560px) and (orientation: landscape) {
  .sw-watch {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sw-head {
    grid-column: 1 / -1;
  }

  .sw-controls {
    align-self: center;
  }
}

/* ---------- 18. 動きの演出（開いたとき・見えてきたとき・押したときに、1回だけ動く） ----------
   動き続けるのはトップの絵と、教材の中で意味のある動きだけ。ここにあるのは、どれも1回で止まる動き。
   動きを減らす設定の人には、どれも出さない */

/* トップの「教材の数」（インフォグラフィック） */
.stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-5);
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--pop);
}

.stats-total {
  display: grid;
  justify-items: center;
  padding: var(--space-3) var(--space-5);
  background-color: var(--sun);
  border: var(--line);
  border-radius: var(--radius-m);
  transform: rotate(-3deg);
}

.stats-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 4.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stats-unit {
  font-weight: 900;
}

.stats-bars {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-bars li {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr) 3.5em;
  align-items: center;
  gap: var(--space-3);
  font-weight: 900;
}

.stats-bar {
  display: flex;
  width: calc(var(--w, 1) * 100%);
  min-width: 34px;
  height: 30px;
  overflow: hidden;
  border: var(--line);
  border-radius: var(--radius-full);
}

.stats-bar i {
  flex-grow: var(--n);
  background-color: var(--field-fill);
}

.stats-bar i + i {
  border-left: 2.5px solid var(--ink);
}

.stats-val {
  font-variant-numeric: tabular-nums;
}

.stats-legend {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  list-style: none;
}

.stats-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.stats-legend li::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--field-fill);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
}

@media (max-width: 767px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .stats-total {
    justify-self: center;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* ページの移りかわり：ふわっと切りかわる。上のバーと学年ナビは、そのまま残る */
  @view-transition {
  navigation: auto;
  }

  .appbar {
  view-transition-name: appbar;
  }

  /* カードが教材に変身する：押した教材カードの絵が、広がりながら教材の図（ストップウォッチは時計）に変わる。
   押したカードにはフォーカスが残るので、そのカードの絵にだけ名前を付ける */
  .m-card:focus .m-icon,
  .sim-stage,
  .sw-watch {
  view-transition-name: m-morph;
  }

  /* 教材ページの「ほかの教材」のカードを押したときは、いまの図ではなくカードの絵から変身させる */
  body:has(.m-card:focus) .sim-stage,
  body:has(.m-card:focus) .sw-watch {
  view-transition-name: none;
  }

  ::view-transition-group(m-morph) {
  animation-duration: 520ms;
  animation-timing-function: var(--ease-spring);
  }

  ::view-transition-old(m-morph),
  ::view-transition-new(m-morph) {
  height: 100%;
  animation-duration: 520ms;
  }

  ::view-transition-old(root) {
  animation: vt-out 180ms var(--ease-out) both;
  }

  ::view-transition-new(root) {
  animation: vt-in 320ms var(--ease-out) both;
  }

  /* 文字の動き：トップの大きな題名は1文字ずつ飛び出す（.ch はトップのページの中で付ける） */
  .hero-title .ch {
  animation: char-in 600ms var(--ease-spring) both;
  animation-delay: calc(var(--i) * 45ms);
  }

  .hero-lead {
  animation: fade-up 600ms var(--ease-out) 800ms both;
  }

  .hero .btn-primary {
  animation: pop-up 500ms var(--ease-spring) 1100ms both;
  }

  .hero-scene {
  animation: scene-in 800ms var(--ease-spring) 200ms both;
  }

  /* 各ページの題名は、左からすっと現れる。チップはぽんと出る */
  .page-title {
  animation: title-in 700ms var(--ease-out) both;
  }

  .page-head .chip,
  .sw-head .chip {
  animation: pop-up 450ms var(--ease-spring) 150ms both;
  }

  .lead {
  animation: fade-up 600ms var(--ease-out) 300ms both;
  }

  /* いまの学年のアイコンがぽんと出る（押せる大きさは変えない） */
  .tabbar a[aria-current] svg {
  animation: pop-up 500ms var(--ease-spring) 250ms both;
  }

  /* 「教材の数」：見えてきたら、数字が数え上がり（ページの中で）、棒がのびる */
  .stats-bar {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-spring);
  }

  .stats-bars li:nth-child(2) .stats-bar { transition-delay: 120ms; }
  .stats-bars li:nth-child(3) .stats-bar { transition-delay: 240ms; }

  .stats.is-shown .stats-bar {
  transform: none;
  }

  .stats-total {
  transition: transform 600ms var(--ease-spring);
  transform: rotate(-12deg) scale(0.7);
  }

  .stats.is-shown .stats-total {
  transform: rotate(-3deg);
  }

  /* 「使い方」などを開くと、なめらかに広がる */
  :root {
  interpolate-size: allow-keywords;
  }

  .accordion::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 350ms var(--ease-out), content-visibility 350ms allow-discrete;
  }

  .accordion[open]::details-content {
  block-size: auto;
  }

  /* いちばん大事なボタンに、マウスを重ねると光が走る */
  .btn-primary {
  position: relative;
  overflow: hidden;
  }

  .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
  }

  .btn-primary:hover::after {
  transform: translateX(120%);
  transition: transform 650ms var(--ease-out);
  }

  /* スクロールで見えてきたら、下からふわっと。見出しの黄色いマーカーは左から引かれる */
  .sd .section,
  .sd .field-section,
  .sd .info .accordion,
  .sd .sw-records {
    animation: rise linear both;
    animation-timeline: view(); --sd-tl: view();
    animation-range: entry 0% entry 45%; --sd-range: entry 0% entry 45%;
  }

  .sd .section-head .section-title {
    background-repeat: no-repeat;
    animation: marker linear both;
    animation-timeline: view(); --sd-tl: view();
    animation-range: entry 20% cover 35%; --sd-range: entry 20% cover 35%;
  }
}

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes char-in {
  from { opacity: 0; transform: translateY(0.6em) rotate(calc(var(--r, 8) * 1deg)) scale(0.5); }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop-up { from { opacity: 0; transform: scale(0.6); } }
@keyframes scene-in { from { opacity: 0; transform: translateY(24px) rotate(4deg) scale(0.92); } }
@keyframes title-in { from { clip-path: inset(0 100% 0 0); transform: translateX(-16px); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes marker { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* ===== トップ：メッセージと「スクロールして、のぞいてみよう」 =====
   動かないとき（動きを減らす設定・古いブラウザ）は、ふつうにならべて見せる。
   動かせるときだけ、スクロールに合わせて動く */
.sp-only {
  display: none;
}

@media (max-width: 767px) {
  .sp-only {
    display: inline;
  }
}

.statement {
  margin-top: var(--space-7);
}

.statement-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 6.4vw, 3.5rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-wrap: wrap;
  word-break: normal;
}

.statement-line:nth-child(2) {
  color: var(--physics-text);
}

.statement-line:nth-child(4) {
  color: var(--tool-text);
}

.story {
  margin-top: var(--space-7);
}

.story-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
}

.story-dots {
  display: none;
}

.story-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5);
  background-color: var(--paper);
  border: var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--pop);
}

.story-panel + .story-panel {
  margin-top: var(--space-5);
}

.story-art {
  display: block;
  width: 100%;
  height: auto;
}

.story-kicker {
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

.story-text h3 {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 400;
  line-height: 1.3;
}

.story-text p:not(.story-kicker) {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--text-lead);
  line-height: 1.7;
}

.story-panel .st-image {
  opacity: 0.85;
}

/* ならべて見せるときは、黄色のボタンが1画面に2つ出ないように、枠線のボタンの見た目にする */
.story-panel .btn-primary {
  background-color: var(--paper);
}

/* 動かないときの、ボールと赤血球の場所 */
.story-panel .st-ball {
  transform: translate(290px, 232px);
}

.story-panel .st-cell {
  transform: translate(340px, 150px);
}

@media (max-width: 767px) {
  .story-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .story-text p:not(.story-kicker) {
    font-size: var(--text-body);
    margin-bottom: var(--space-4);
  }

  .story-text .btn {
    width: 100%;
  }
}

/* スクロールに合わせて動かせるとき */
@media (prefers-reduced-motion: no-preference) {
  /* メッセージ：画面のまん中に止まったまま、スクロールするたびに1行ずつ色がつく */
  .sd .statement {
    height: 360svh;
    view-timeline-name: --statement; --sd-name: --statement;
  }

  .sd .statement-inner {
    position: sticky;
    top: var(--appbar-height);
    display: grid;
    align-content: center;
    height: calc(100svh - var(--appbar-height));
  }

  .sd .statement-line {
    color: transparent;
    background-image: linear-gradient(90deg, var(--line-color, var(--ink)) 50%, var(--bg-dot) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: line-fill linear both;
    animation-timeline: --statement; --sd-tl: --statement;
  }

  .sd .statement-line:nth-child(2) { color: transparent; --line-color: var(--physics-text); }
  .sd .statement-line:nth-child(4) { color: transparent; --line-color: var(--tool-text); }
  .sd .statement-line:nth-child(1) { animation-range: contain 0% contain 22%; --sd-range: contain 0% contain 22%; }
  .sd .statement-line:nth-child(2) { animation-range: contain 22% contain 44%; --sd-range: contain 22% contain 44%; }
  .sd .statement-line:nth-child(3) { animation-range: contain 44% contain 66%; --sd-range: contain 44% contain 66%; }
  .sd .statement-line:nth-child(4) { animation-range: contain 66% contain 88%; --sd-range: contain 66% contain 88%; }

  /* 教材のぞき：画面に止めたまま、スクロールで4つの教材が順に出てきて、中身が動く */
  .sd .story {
    height: 720svh;
    view-timeline-name: --story; --sd-name: --story;
  }

  .sd .story-sticky {
    position: sticky;
    top: var(--appbar-height);
    height: calc(100svh - var(--appbar-height));
  }

  .sd .story-panel {
    position: absolute;
    inset: var(--space-4) var(--space-5) var(--space-6) 0;
    margin: 0;
    animation: panel-mid linear both;
    animation-timeline: --story; --sd-tl: --story;
  }

  .sd .story-panel + .story-panel {
    margin-top: 0;
  }

  /* 絵は、パネルの残りの高さに収まる大きさにする（窓の高さが低くても、パネルからはみ出さない） */
  .sd .story-panel {
    grid-template-rows: minmax(0, 1fr);
  }

  .sd .story-art {
    height: 100%;
  }

  /* 1つずつ見せるときは、いちばん大事なボタンなので黄色にもどす */
  .sd .story-panel .btn-primary {
    background-color: var(--sun);
  }

  .sd .story-panel:nth-of-type(1) { animation-name: panel-first; animation-range: contain 0% contain 25%; --sd-range: contain 0% contain 25%; }
  .sd .story-panel:nth-of-type(2) { animation-range: contain 25% contain 50%; --sd-range: contain 25% contain 50%; }
  .sd .story-panel:nth-of-type(3) { animation-range: contain 50% contain 75%; --sd-range: contain 50% contain 75%; }
  .sd .story-panel:nth-of-type(4) { animation-name: panel-last; animation-range: contain 75% contain 100%; --sd-range: contain 75% contain 100%; }

  /* 右はしの点：いま何番目か */
  .sd .story-dots {
    position: absolute;
    top: 50%;
    right: 0;
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateY(-50%);
  }

  .sd .story-dots li {
    width: 12px;
    height: 12px;
    background-color: var(--paper);
    border: 2px solid var(--ink);
    border-radius: var(--radius-full);
    animation: dot-on linear both;
    animation-timeline: --story; --sd-tl: --story;
  }

  .sd .story-dots li:nth-child(1) { animation-range: contain 0% contain 25%; --sd-range: contain 0% contain 25%; }
  .sd .story-dots li:nth-child(2) { animation-range: contain 25% contain 50%; --sd-range: contain 25% contain 50%; }
  .sd .story-dots li:nth-child(3) { animation-range: contain 50% contain 75%; --sd-range: contain 50% contain 75%; }
  .sd .story-dots li:nth-child(4) { animation-range: contain 75% contain 100%; --sd-range: contain 75% contain 100%; }

  .sd .story-art * {
    animation-timeline: --story; --sd-tl: --story;
    animation-fill-mode: both;
    animation-timing-function: linear;
  }

  /* 1：目から鏡へ光の道すじが引かれ、鏡の中に像があらわれる */
  .sd .st-ray { stroke-dasharray: 260; animation-name: draw; }
  .sd .st-ray-1 { animation-range: contain 2% contain 11%; --sd-range: contain 2% contain 11%; }
  .sd .st-ray-2 { animation-range: contain 13% contain 19%; --sd-range: contain 13% contain 19%; }
  .sd .st-image { animation-name: appear; animation-range: contain 9% contain 14%; --sd-range: contain 9% contain 14%; }

  /* 2：おもりが下がってばねがのび、グラフに点が1つずつならび、直線が引かれる */
  .sd .st-spring { transform-box: fill-box; transform-origin: 50% 0; animation-name: spring-stretch; animation-range: contain 27% contain 44%; --sd-range: contain 27% contain 44%; }
  .sd .st-weight { animation-name: weight-down; animation-range: contain 27% contain 44%; --sd-range: contain 27% contain 44%; }
  .sd .st-pt { transform-box: fill-box; transform-origin: center; animation-name: pop-pt; }
  .sd .st-pt-1 { animation-range: contain 29% contain 32%; --sd-range: contain 29% contain 32%; }
  .sd .st-pt-2 { animation-range: contain 33% contain 36%; --sd-range: contain 33% contain 36%; }
  .sd .st-pt-3 { animation-range: contain 37% contain 40%; --sd-range: contain 37% contain 40%; }
  .sd .st-pt-4 { animation-range: contain 41% contain 44%; --sd-range: contain 41% contain 44%; }
  .sd .st-fit { stroke-dasharray: 260; animation-name: draw; animation-range: contain 44% contain 48%; --sd-range: contain 44% contain 48%; }

  /* 3：ボールが弾むたびに低くなり、高さのグラフがかかれていく */
  .sd .st-ball { animation-name: ball-bounce; animation-range: contain 51% contain 71%; --sd-range: contain 51% contain 71%; }
  .sd .st-trace { stroke-dasharray: 900; stroke-dashoffset: 900; animation-name: trace; animation-range: contain 51% contain 71%; --sd-range: contain 51% contain 71%; }

  /* 4：赤血球が体をめぐり、全身を通ると色が変わる */
  .sd .st-cell {
    animation-name: circulate;
    animation-range: contain 76% contain 98%; --sd-range: contain 76% contain 98%;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .sd .statement-inner,
  .sd .story-sticky {
    height: calc(100svh - var(--appbar-height) - var(--tabbar-height));
  }
}

@keyframes line-fill { to { background-position: 0 0; } }
@keyframes panel-first {
  0%, 80% { opacity: 1; transform: none; visibility: visible; }
  100%    { opacity: 0; transform: translateY(-30px) scale(0.97); visibility: hidden; }
}
@keyframes panel-mid {
  0%       { opacity: 0; transform: translateY(40px) scale(0.97); visibility: hidden; }
  18%, 82% { opacity: 1; transform: none; visibility: visible; }
  100%     { opacity: 0; transform: translateY(-30px) scale(0.97); visibility: hidden; }
}
@keyframes panel-last {
  0%        { opacity: 0; transform: translateY(40px) scale(0.97); visibility: hidden; }
  18%, 100% { opacity: 1; transform: none; visibility: visible; }
}
@keyframes dot-on {
  0%, 100% { background-color: var(--paper); height: 12px; }
  3%, 97%  { background-color: var(--sun); height: 28px; }
}
@keyframes draw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes appear { from { opacity: 0; transform: translateX(-12px); } to { opacity: 0.85; } }
@keyframes spring-stretch { from { transform: scaleY(1); } to { transform: scaleY(1.7); } }
@keyframes weight-down { from { transform: translateY(0); } to { transform: translateY(49px); } }
@keyframes pop-pt { from { opacity: 0; transform: scale(0); } 70% { transform: scale(1.4); } to { opacity: 1; transform: scale(1); } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes ball-bounce {
  0%   { transform: translate(290px, 42px);  animation-timing-function: ease-in; }
  30%  { transform: translate(290px, 232px); animation-timing-function: ease-out; }
  46%  { transform: translate(290px, 122px); animation-timing-function: ease-in; }
  62%  { transform: translate(290px, 232px); animation-timing-function: ease-out; }
  73%  { transform: translate(290px, 162px); animation-timing-function: ease-in; }
  84%  { transform: translate(290px, 232px); animation-timing-function: ease-out; }
  91%  { transform: translate(290px, 192px); animation-timing-function: ease-in; }
  100% { transform: translate(290px, 232px); }
}
@keyframes circulate {
  0.0% { transform: translate(200px, 40px); fill: #e8343a; }
  8.33% { transform: translate(270px, 55px); fill: #e8343a; }
  16.67% { transform: translate(321px, 95px); fill: #e8343a; }
  25.0% { transform: translate(340px, 150px); fill: #e8343a; }
  33.33% { transform: translate(321px, 205px); fill: #e8343a; }
  41.67% { transform: translate(270px, 245px); fill: #e8343a; }
  50.0% { transform: translate(200px, 260px); fill: #4a63d8; }
  58.33% { transform: translate(130px, 245px); fill: #4a63d8; }
  66.67% { transform: translate(79px, 205px); fill: #4a63d8; }
  75.0% { transform: translate(60px, 150px); fill: #4a63d8; }
  83.33% { transform: translate(79px, 95px); fill: #4a63d8; }
  91.67% { transform: translate(130px, 55px); fill: #4a63d8; }
  100.0% { transform: translate(200px, 40px); fill: #e8343a; }
}

/* ===== 大きな英語の文字（かざり）・クイックリンク・ほかの教材・ページの下 =====
   英語の文字は読み上げない（content の「/ ""」）。動かないときは、止まったまま見せる */
.page-head,
.section-head,
.field-section {
  position: relative;
  isolation: isolate;
}

.page-head,
.section-head,
.field-section {
  overflow-x: clip;
  overflow-clip-margin: var(--space-2);   /* ボタンやカードの影は切らない */
}

.page-head::before,
.section-head::before,
.field-section::before {
  position: absolute;
  z-index: -1;
  font-family: var(--font-display);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px var(--bg-dot);
  pointer-events: none;
}

/* 学年ページ・教材ページの題名のうしろ */
.page-head::before {
  right: 0;
  bottom: var(--space-2);
  font-size: clamp(4rem, 13vw, 9.5rem);
}

body:has(.tabbar a[href="grade1.html"][aria-current="page"]) .page-head::before { content: "GRADE 1" / ""; }
body:has(.tabbar a[href="grade2.html"][aria-current="page"]) .page-head::before { content: "GRADE 2" / ""; }
body:has(.tabbar a[href="grade3.html"][aria-current="page"]) .page-head::before { content: "GRADE 3" / ""; }
.page-head:has(.chip.field-physics)::before   { content: "PHYSICS" / ""; -webkit-text-stroke-color: var(--physics-soft); }
.page-head:has(.chip.field-chemistry)::before { content: "CHEMISTRY" / ""; -webkit-text-stroke-color: var(--chemistry-soft); }
.page-head:has(.chip.field-biology)::before   { content: "BIOLOGY" / ""; -webkit-text-stroke-color: var(--biology-soft); }
.page-head:has(.chip.field-earth)::before     { content: "EARTH" / ""; -webkit-text-stroke-color: var(--earth-soft); }

/* トップの学年の見出しのうしろ */
.section-head::before {
  left: 0;
  top: 50%;
  font-size: clamp(3rem, 8vw, 5.5rem);
  transform: translateY(-55%);
}

.section-head:has(#g1)::before { content: "GRADE 1" / ""; }
.section-head:has(#g2)::before { content: "GRADE 2" / ""; }
.section-head:has(#g3)::before { content: "GRADE 3" / ""; }
.section-head:has(#tools)::before { content: "TOOLS" / ""; }

/* 学年ページの分野の見出しの右 */
.field-section::before {
  top: -0.35em;
  right: 0;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  -webkit-text-stroke-color: var(--field-soft);
}

.field-section.field-physics::before   { content: "Physics" / ""; }
.field-section.field-chemistry::before { content: "Chemistry" / ""; }
.field-section.field-biology::before   { content: "Biology" / ""; }
.field-section.field-earth::before     { content: "Earth" / ""; }

/* 学年ページのクイックリンク（分野へすぐ飛ぶ） */
.quick-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.quick-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-2) 0 var(--space-4);
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
  background-color: var(--field-soft);
  border: var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--pop-small);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.quick-links a:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.quick-links a:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(3px, 3px);
}

.ql-n {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--space-1);
  font-variant-numeric: tabular-nums;
  background-color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
}

/* 教材ページの下：ほかの教材 */
.more {
  margin-top: var(--space-8);
}

.more-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
}

/* ページの下：大きなサイト名と「ページの上にもどる」 */
.site-footer {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  container-type: inline-size;   /* サイト名の大きさを、ページの下のはばから決める */
}

/* サイト名は「さわってうごく」「理科教材」のかたまりの間でだけ折り返す（パソコンは1行、せまい画面は2行）。
   はばがせまいときやスマホの文字が大きい設定のときは、長いほうのかたまり（7文字）がはばに入る大きさまで小さくする。
   1行目は、はばを基準にした大きさ（cqi）を使えない古いブラウザ用 */
.footer-mark {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 8vw, 5.5rem);
  font-size: min(clamp(2.25rem, 8vw, 5.5rem), calc(100cqi / 7.6));
  line-height: 1.15;
  color: var(--ink);
}

.footer-mark span {
  display: inline-block;
  white-space: nowrap;
}

.footer-mark + .to-top {
  margin-bottom: var(--space-2);
}

@media (prefers-reduced-motion: no-preference) {
  /* 英語の文字は、スクロールに合わせてゆっくり横に流れる */
  .sd .page-head::before {
    animation: ghost-slide linear both;
    animation-timeline: view(); --sd-tl: view();
    animation-range: cover 0% cover 100%; --sd-range: cover 0% cover 100%;
  }

  .sd .section-head::before,
  .sd .field-section::before {
    animation: ghost-in linear both;
    animation-timeline: view(); --sd-tl: view();
    animation-range: entry 0% cover 50%; --sd-range: entry 0% cover 50%;
  }

  /* クイックリンクは、順にぽんと出る */
  .sd .quick-links li {
    animation: pop-up 450ms var(--ease-spring) both;
  }

  .sd .quick-links li:nth-child(1) { animation-delay: 250ms; }
  .sd .quick-links li:nth-child(2) { animation-delay: 320ms; }
  .sd .quick-links li:nth-child(3) { animation-delay: 390ms; }
  .sd .quick-links li:nth-child(4) { animation-delay: 460ms; }

  /* ほかの教材のカードは、1枚ずつ出てくる */
  .sd .more .card-list > li {
    animation: rise linear both;
    animation-timeline: view(); --sd-tl: view();
    animation-range: entry 0% entry 60%; --sd-range: entry 0% entry 60%;
  }

  /* ページの下のサイト名は、左から現れる */
  .sd .footer-mark {
    animation: mark-wipe linear both;
    animation-timeline: view(); --sd-tl: view();
    animation-range: entry 0% entry 100%; --sd-range: entry 0% entry 100%;
  }
}

@keyframes ghost-slide { from { transform: translateX(8%); } to { transform: translateX(-6%); } }
@keyframes ghost-in { from { opacity: 0; transform: translateX(15%); } }
@keyframes mark-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ===== トップ：4つの分野をめぐろう（横スクロール）・パララックス・紙芝居・ついてくるボタン =====
   動かないときは、分野のパネルを2列（スマホは1列）にならべて見せる */
.fields {
  margin-top: var(--space-8);
}

.fields-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
}

.fields-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  background-color: var(--field-soft);
  border: var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--pop);
}

.field-art {
  width: 88px;
  height: 88px;
  padding: var(--space-3);
  color: #ffffff;
  background-color: var(--field-fill);
  border: var(--line);
  border-radius: var(--radius-m);
}

.field-en {
  position: absolute;
  top: var(--space-2);
  right: var(--space-4);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--field-fill);
  opacity: 0.45;
}

.field-card h3 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  color: var(--field-text);
}

.field-desc {
  margin: 0;
}

.field-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.field-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-4);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background-color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  box-shadow: var(--pop-small);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.field-links a:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.field-soon {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-4);
  font-weight: 700;
  color: var(--ink-sub);
  border: 2px dashed var(--ink-sub);
  border-radius: var(--radius-full);
}

.story-snap {
  display: none;
}

.float-cta {
  display: none;
}

.float-cta svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 767px) {
  .fields-track {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* 横スクロール：区画が画面に止まっているあいだ、パネルが右から左へ流れていく。背景の色も分野の色に変わる */
  .sd .fields {
    height: 500svh;
    view-timeline-name: --fields; --sd-name: --fields;
  }

  .sd .fields-sticky {
    position: sticky;
    top: var(--appbar-height);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    height: calc(100svh - var(--appbar-height));
    padding: var(--space-5);
    overflow: hidden;
    border: var(--line);
    border-radius: var(--radius-m);
    animation: fields-bg linear both;
    animation-timeline: --fields; --sd-tl: --fields;
    animation-range: contain 0% contain 100%; --sd-range: contain 0% contain 100%;
  }

  .sd .fields-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: fields-slide linear both;
    animation-timeline: --fields; --sd-tl: --fields;
    animation-range: contain 5% contain 95%; --sd-range: contain 5% contain 95%;
  }

  .sd .field-card {
    width: min(78vw, 640px);
  }


  /* 紙芝居：「のぞいてみよう」では、近くの教材のところで止まる */
  html.sd:has(.story) {
    scroll-snap-type: y proximity;
  }

  .sd .story-snap {
    display: block;
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    scroll-snap-align: start;
  }

  .sd .story-snap:nth-of-type(1) { top: calc((100% - 100svh + var(--appbar-height)) * 0.125); }
  .sd .story-snap:nth-of-type(2) { top: calc((100% - 100svh + var(--appbar-height)) * 0.375); }
  .sd .story-snap:nth-of-type(3) { top: calc((100% - 100svh + var(--appbar-height)) * 0.625); }
  .sd .story-snap:nth-of-type(4) { top: calc((100% - 100svh + var(--appbar-height)) * 0.875); }

  .sd .story {
    position: relative;
  }


  /* パララックス：スクロールすると、トップの絵の太陽・粒・文字が、それぞれちがう速さで動く */
  .sd .hero-scene .planet-spin {
    animation: planet-spin linear both;
    animation-timeline: scroll(root); --sd-tl: scroll(root);
    animation-range: 0px 1600px; --sd-range: 0px 1600px;
  }

  /* 星に吸いこまれる：上へスクロールしていくと、星が画面いっぱいまで大きくなって消える */
  .sd .hero-scene .planet-zoom {
    animation: planet-zoom ease-in both;
    animation-timeline: scroll(root); --sd-tl: scroll(root);
    animation-range: 0px 70vh; --sd-range: 0px 70vh;
  }

  .sd .hero > div {
    animation: para-text linear both;
    animation-timeline: scroll(root); --sd-tl: scroll(root);
    animation-range: 0px 1600px; --sd-range: 0px 1600px;
  }

  /* ついてくるボタン：トップの絵を過ぎたら、右下に「教材をえらぶ」が出てくる */
  .sd .float-cta {
    position: fixed;
    right: var(--gutter);
    bottom: var(--space-5);
    z-index: var(--z-appbar);
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    color: var(--ink);
    text-decoration: none;
    background-color: var(--paper);   /* 黄色のボタンが1画面に2つにならないように、白にする */
    border: var(--line);
    border-radius: var(--radius-full);
    box-shadow: var(--pop);
    animation: float-in linear both;
    animation-timeline: scroll(root); --sd-tl: scroll(root);
    animation-range: 500px 700px; --sd-range: 500px 700px;
  }

  .sd .float-cta:active {
    box-shadow: 0 0 0 var(--ink);
    transform: translate(4px, 4px);
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .sd .fields-sticky {
    height: calc(100svh - var(--appbar-height) - var(--tabbar-height));
    padding: var(--space-4);
  }

  .sd .field-card {
    width: 82vw;
  }

  /* スマホでは、絵が上・文が下。絵は残りの高さに収まる大きさにする */
  .sd .story-panel {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  /* スマホには下の学年ナビがあるので、ついてくるボタンは出さない */
  .float-cta {
  display: none !important;
  }
}

/* 横長で高さの低い画面（スマホの横向き・小さくした窓）では、絵が小さくなりすぎないように、絵と文を横にならべる */
@media (prefers-reduced-motion: no-preference) and (min-width: 480px) and (max-width: 767px) and (max-height: 620px) {
  .sd .story-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

/* 高さの低い画面では、分野のカードの絵を小さくして題名の横に置き、教材のボタンまでカードに収める */
@media (prefers-reduced-motion: no-preference) and (max-height: 720px) {
  .sd .field-card {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
  }

  .sd .field-art {
    width: 64px;
    height: 64px;
    padding: var(--space-2);
  }

  .sd .field-card h3 {
    align-self: center;
    margin: 0;
  }

  .sd .field-desc,
  .sd .field-links {
    grid-column: 1 / -1;
  }
}

/* もっと低い画面（小さいスマホなど）では、分野の説明の文を省いて、教材のボタンを優先する */
@media (prefers-reduced-motion: no-preference) and (max-height: 600px) {
  .sd .field-desc {
    display: none;
  }

  .sd .fields-title {
    margin-bottom: var(--space-3);
  }

  .sd .field-card {
    padding: var(--space-4);
  }

  /* 題名と重ならないように、うしろの英語の飾り文字も省く */
  .sd .field-en {
    display: none;
  }
}

@keyframes fields-bg {
  0%   { background-color: var(--physics-soft); }
  33%  { background-color: var(--chemistry-soft); }
  66%  { background-color: var(--biology-soft); }
  100% { background-color: var(--earth-soft); }
}
@keyframes fields-slide { from { transform: translateX(0); } to { transform: translateX(calc(-100% + min(78vw, 640px))); } }
@keyframes planet-spin { to { transform: rotate(-240deg); } }
@keyframes planet-zoom {
  60%  { opacity: 1; }
  100% { opacity: 0; transform: scale(3.4); }
}
@keyframes para-text { to { transform: translateY(-60px); } }
@keyframes float-in {
  from { opacity: 0; transform: translateY(30px) scale(0.8); visibility: hidden; }
  to   { opacity: 1; transform: none; visibility: visible; }
}

/* ---------- 19. 動きを減らす設定の人には、動きを出さない ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* スマホでは、指でのスクロールが短いので、スクロールで動く区画を短くして速く進むようにする */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .sd .statement { height: 240svh; }
  .sd .story { height: 480svh; }
  .sd .fields { height: 340svh; }
}

/* ===== トップのビーカー：4つの分野の液が注がれて色が変わり、教材カードがあふれ出す =====
   動かないとき（動きを減らす設定・スクロールで動かせないブラウザ）は、注ぎ終わってカードがあふれた絵で止まる */
.pour {
  margin-block: var(--space-7);
}

.pour-sticky {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.pour-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
}

.pour-scene {
  display: block;
  width: min(100%, 560px);
  height: auto;
  overflow: visible;
}

.pour-lead {
  max-width: 32em;
  margin: 0;
  color: var(--ink-sub);
}

.pour-scene .liquid {
  fill: var(--sun);
}

.pour-scene .spill {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--tx), var(--ty)) rotate(var(--r));
}

.pour-scene .stream {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}

/* 試験管は、口のところを中心に回る。止まった絵では、注ぎ終わって空になった試験管を傾けておく */
.pour-scene .tube {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: rotate(var(--tilt));
}

.pour-scene .tube-liquid {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .sd .pour {
    height: 300svh;
    margin-block: 0;
    view-timeline-name: --pour; --sd-name: --pour;
  }

  /* 画面の高さに収める：題名と文は上と下に置き、ビーカーの絵は残りの高さに合わせて縮む（題名が上のバーにかくれないように） */
  .sd .pour-sticky {
    position: sticky;
    top: var(--appbar-height);
    height: calc(100svh - var(--appbar-height));
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    padding-block: var(--space-5);
  }

  .sd .pour-scene {
    width: 100%;
    max-width: 560px;
    height: 100%;
    min-height: 0;
  }

  /* 1本ずつ、試験管を傾ける → 口から液が流れ出る → 試験管の液がなくなる。
     そのあいだにビーカーに液がたまって色が変わり、最後にカードがあふれ出す */
  .sd .pour-scene .tube {
    animation: tube-tilt linear both;
    animation-timeline: --pour; --sd-tl: --pour;
  }

  .sd .pour-scene .tube-liquid {
    opacity: 1;
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: tube-drain linear both;
    animation-timeline: --pour; --sd-tl: --pour;
  }

  .sd .pour-scene .stream {
    animation: pour-stream linear both;
    animation-timeline: --pour; --sd-tl: --pour;
  }

  .sd .pour-scene .t1,
  .sd .pour-scene .t1 .tube-liquid,
  .sd .pour-scene .stream:nth-child(1) { animation-range: contain 0% contain 30%; --sd-range: contain 0% contain 30%; }
  .sd .pour-scene .t2,
  .sd .pour-scene .t2 .tube-liquid,
  .sd .pour-scene .stream:nth-child(2) { animation-range: contain 10% contain 40%; --sd-range: contain 10% contain 40%; }
  .sd .pour-scene .t3,
  .sd .pour-scene .t3 .tube-liquid,
  .sd .pour-scene .stream:nth-child(3) { animation-range: contain 20% contain 50%; --sd-range: contain 20% contain 50%; }
  .sd .pour-scene .t4,
  .sd .pour-scene .t4 .tube-liquid,
  .sd .pour-scene .stream:nth-child(4) { animation-range: contain 30% contain 60%; --sd-range: contain 30% contain 60%; }

  .sd .pour-scene .liquid {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: pour-fill linear both;
    animation-timeline: --pour; --sd-tl: --pour;
    animation-range: contain 11% contain 64%; --sd-range: contain 11% contain 64%;
  }

  .sd .pour-scene .pour-bubbles circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: pour-bubble linear both;
    animation-timeline: --pour; --sd-tl: --pour;
    animation-range: contain 20% contain 70%; --sd-range: contain 20% contain 70%;
  }

  .sd .pour-scene .spill {
    animation: pour-spill var(--ease-spring) both;
    animation-timeline: --pour; --sd-tl: --pour;
    animation-range: contain 58% contain 92%; --sd-range: contain 58% contain 92%;
  }

  .sd .pour-scene .spill:nth-child(2n) { animation-range: contain 62% contain 95%; --sd-range: contain 62% contain 95%; }

  .sd .pour-title {
    animation: fade-up linear both;
    animation-timeline: --pour; --sd-tl: --pour;
    animation-range: contain 0% contain 10%; --sd-range: contain 0% contain 10%;
  }
}

@keyframes tube-tilt {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(var(--tilt)); }
  100% { transform: rotate(var(--tilt)); }
}

@keyframes tube-drain {
  0%   { transform: none; }
  25%  { transform: translateY(-18px); }
  92%  { transform: translateY(-18px) scaleY(0); }
  100% { transform: translateY(-18px) scaleY(0); }
}

@keyframes pour-stream {
  0%, 22% { stroke-dashoffset: 320; }
  36%     { stroke-dashoffset: 0; }
  86%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: -320; }
}

@keyframes pour-fill {
  0%   { transform: scaleY(0.04); fill: var(--physics-fill); }
  30%  { fill: var(--chemistry-fill); }
  55%  { fill: var(--biology-fill); }
  80%  { fill: var(--earth-fill); }
  100% { transform: scaleY(1); fill: var(--sun); }
}

@keyframes pour-bubble {
  from { transform: translateY(40px) scale(0.4); opacity: 0; }
  50%  { opacity: 1; }
  to   { transform: translateY(-120px) scale(1.2); opacity: 0; }
}

@keyframes pour-spill {
  from { transform: translate(0, 40px) scale(0.3) rotate(0deg); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: translate(var(--tx), var(--ty)) rotate(var(--r)); opacity: 1; }
}

/* ===== 学年ページ：分野ごとに、うしろの景色が変わる（物理＝光線、化学＝あわ、生物＝細胞、地学＝地層）
   スクロールすると景色が少しずつ動く。動きを減らす設定のときは止まったまま ===== */
.field-section::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-4) * -1) calc(var(--space-2) * -1);
  z-index: -2;
  border-radius: var(--radius-m);
  pointer-events: none;
}

.field-section.field-physics::after {
  background-image:
    repeating-linear-gradient(118deg, transparent 0 56px, var(--physics-soft) 56px 64px, transparent 64px 120px),
    repeating-linear-gradient(62deg, transparent 0 90px, var(--physics-soft) 90px 94px, transparent 94px 160px);
}

.field-section.field-chemistry::after {
  background-image:
    radial-gradient(circle at 30% 40%, var(--chemistry-soft) 0 10px, transparent 11px),
    radial-gradient(circle at 70% 70%, var(--chemistry-soft) 0 16px, transparent 17px),
    radial-gradient(circle at 50% 20%, transparent 0 7px, var(--chemistry-soft) 8px 10px, transparent 11px);
  background-size: 120px 120px, 170px 170px, 90px 90px;
}

.field-section.field-biology::after {
  background-image:
    radial-gradient(circle at 50% 50%, var(--biology-soft) 0 6px, transparent 7px 22px, var(--biology-soft) 23px 27px, transparent 28px),
    radial-gradient(circle at 50% 50%, transparent 0 14px, var(--biology-soft) 15px 18px, transparent 19px);
  background-size: 96px 84px, 64px 72px;
  background-position: 0 0, 32px 40px;
}

.field-section.field-earth::after {
  background-image:
    repeating-linear-gradient(176deg, transparent 0 22px, var(--earth-soft) 22px 34px, transparent 34px 48px, var(--earth-soft) 48px 52px, transparent 52px 70px);
}

@media (prefers-reduced-motion: no-preference) {
  .sd .field-section::after {
    animation: field-drift linear both;
    animation-timeline: view(); --sd-tl: view();
    animation-range: cover 0% cover 100%; --sd-range: cover 0% cover 100%;
  }

  .sd .field-section.field-chemistry::after { animation-name: field-rise; }
  .sd .field-section.field-earth::after { animation-name: field-press; }
}

/* 光線は横へ流れ、細胞はゆっくりずれる */
@keyframes field-drift {
  from { background-position: -80px 0, 40px 0; }
  to   { background-position: 80px 0, -40px 0; }
}

/* あわは下から上へのぼる */
@keyframes field-rise {
  from { background-position: 0 160px, 0 220px, 0 120px; }
  to   { background-position: 0 -160px, 0 -220px, 0 -120px; }
}

/* 地層は少しずつ積み重なっていく */
@keyframes field-press {
  from { background-position: 0 -60px; }
  to   { background-position: 0 60px; }
}

/* ===== さわったところに広がる波紋（どのページも）。図・スライダーの上では出さない ===== */
.tap-ripple {
  position: fixed;
  z-index: var(--z-skip);
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid var(--ripple, var(--sun));
  border-radius: var(--radius-full);
  pointer-events: none;
  animation: tap-ripple 600ms var(--ease-out) forwards;
}

@keyframes tap-ripple {
  from { opacity: 1; transform: scale(0.3); }
  to   { opacity: 0; transform: scale(3.2); }
}

/* ===== 教材カードの3Dの傾き：マウスやペンを重ねた場所に合わせて、カードが立体的に傾き、光が当たる ===== */
.m-card {
  position: relative;
}

.m-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.45), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .m-card.is-tilting {
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(-2px, -2px);
    transition: transform 60ms linear, box-shadow 180ms var(--ease-spring);
  }

  .m-card.is-tilting::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* 押したときは、傾きより「沈む」動きを優先する */
  .m-card.is-tilting:active {
    transform: translate(4px, 4px);
  }
}

/* ビーカーの区画：スマホでは、下の学年ナビにもかからない高さにする（上のビーカーの決まりより後に書く） */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .sd .pour-sticky {
    height: calc(100svh - var(--appbar-height) - var(--tabbar-height));
  }
}

/* 解剖の教材：道具のボタンと記録を細くして、そのぶん図（イカ）を大きく見せる。
   道具は絵と名前を横にならべ、記録は名前と数を1行にする（押せる高さは52px のまま） */
.sim-stage:has(.tool-list) .tool-list .btn-choice,
.sim-stage.keep-visible:has(.tool-list) .tool-list .btn-choice {
  flex-direction: row;
  justify-content: center;
  gap: var(--space-1);
  min-height: 52px;
  padding: var(--space-1) var(--space-2);
}

.sim-stage:has(.tool-list) .tool-list .btn-choice svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-bottom: 0;
}

.sim-stage:has(.tool-list) .tool-list .btn-choice[aria-pressed="true"]::after {
  top: 6px;
  right: 6px;
}

.sim-stage:has(.tool-list) .readout {
  margin-top: var(--space-2);
}

/* 記録を1行にするのは、横に余裕があるときだけ（スマホでは、名前の下に数を出す今までの形のほうが低い） */
@media (min-width: 600px) {
  .sim-stage:has(.tool-list) .readout > div,
  .sim-stage.keep-visible:has(.tool-list) .readout > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--space-2);
    padding: 2px var(--space-3);
  }

  .sim-stage:has(.tool-list) .readout dd,
  .sim-stage.keep-visible:has(.tool-list) .readout dd {
    font-size: 1.125rem;
  }
}