/* ============================================================
   if(塾) トップページ試作
   画像ファイルを一切使わない実装。装飾はすべて CSS と インライン SVG。
   写真は未入稿のため、CRTモニタ型のプレースホルダー枠を置いている。

   配色はロゴから抽出した #FF7700 を基調にした明るい面。
   ロゴの実測値: #FF7700 (H28 S100 V100) / #030303 / #FFFFFF

   #FF7700 は白背景に対して 2.66:1 しかなく、文字色には使えない。
   一方 near-black を載せると 6.89:1 出る。ロゴが「オレンジ＋黒」なのはこの性質どおり。
   そこで役割を分けた。
     brand   #FF7700  面として使う。上に載せるのは必ず ink
     brandtx #A85000  文字・リンク用。白背景 5.51:1 / tint 5.04:1 で AA を満たす
     brandln #D96200  オレンジ面の境界線。白背景 3.69:1 で非テキスト基準を満たす
   全組み合わせを WCAG 2.1 で検算済み。NG 0件。
   ============================================================ */

:root {
  --paper:    #fffaf5;
  --surface:  #ffffff;
  --tint:     #fff3e7;
  --ink:      #1a1310;
  --ink-2:    #6b5d55;
  --line:     #efe0d2;
  --brand:    #ff7700;
  --brand-ln: #d96200;
  --brand-tx: #a85000;
  --screen:   #12506e;
  --screen-bg:#e7f0f5;

  --f-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --f-body:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --measure: 34em;
  --wrap: 1080px;
  --r: 14px;
  --shadow: 0 1px 2px rgba(26,19,16,.05), 0 10px 28px -14px rgba(26,19,16,.22);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

/* 見出しは行の長さをそろえる。あわせて word-break: auto-phrase で
   文節を見て折り返す。これが無いと「こんなお子さ／ん、いませんか」の
   ように語の途中で切れる。対応していないブラウザは無視するだけ */
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.42; text-wrap: balance; word-break: auto-phrase; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brand-ln); outline-offset: 3px; border-radius: 4px; }

/* ---------- 試作用ツールバー ---------- */

/* ---------- 共通 ---------- */
.band { padding: clamp(56px, 8vw, 104px) 20px; }
.band--surface { background: var(--surface); }
.band--tint    { background: var(--tint); }
.wrap { max-width: var(--wrap); margin-inline: auto; }

.eyebrow {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .03em;
  color: var(--brand-tx); margin-bottom: 14px; display: block;
}
.eyebrow .k { color: var(--ink-2); }
.eyebrow--wide { max-width: none; }

/* 点滅カーソル */
.caret { display: inline-block; width: .48em; height: 1.02em; background: var(--brand); vertical-align: -.16em; margin-left: .18em; animation: blink 1.15s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 役割タグ */
.role { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 6px; border: 1px solid; letter-spacing: .02em; }
.role--expert { color: var(--screen); border-color: var(--screen); background: var(--screen-bg); }
.role--peer   { color: var(--brand-tx); border-color: var(--brand-ln); background: var(--tint); }
.role--ai     { color: var(--ink); border-color: var(--brand-ln); background: var(--brand); }

/* AI先生の画面 */
/* 中の文字が箱の大きさに追従するよう、コンテナとして宣言する。
   以前は11px固定で、スマホだと308pxの箱に11pxの文字という状態だった */
.aiscreen { background: var(--ink); border-radius: 10px; padding: 6px 6px 10px; position: relative; container-type: inline-size; max-width: 250px; }
.aiscreen::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 34%; height: 7px; border-radius: 0 0 4px 4px; background: var(--ink); }
/* ロゴと同じ「黒い枠に明るい画面」。暗い画面だと枠と同化して、
   モニタの形が読み取れなかった */
.aiscreen__in { aspect-ratio: 1 / 1; border-radius: 4px; background: var(--paper); display: flex; flex-direction: column; justify-content: center; gap: .55em; padding: 1.15em; font-family: var(--f-mono); font-size: clamp(11.5px, 6.2cqw, 15.5px); line-height: 1.75; color: var(--ink); }
.aiscreen__in b { color: var(--brand-tx); font-weight: 600; }
/* カーソルは明るい画面の上に乗るので、面として見える濃さにする */
.aiscreen__in .caret { background: var(--brand-tx); }
.h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 900; letter-spacing: .01em; }
.lede { max-width: var(--measure); color: var(--ink-2); font-size: 16.5px; word-break: auto-phrase; }
.fineprint { font-size: 13.5px; color: var(--ink-2); }

/* ---------- ヘッダー ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,250,245,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { max-width: var(--wrap); margin-inline: auto; display: flex; align-items: center; gap: 20px; padding: 11px 20px; }
.nav__links { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; font-weight: 500; }
.nav__links a { text-decoration: none; padding: 3px 0; border-bottom: 2px solid transparent; }
.nav__links a:hover { border-bottom-color: var(--brand); }
/* トップページのヘッダーは、いま見ている節に印を付ける */
.nav__links a[aria-current="true"] { color: var(--brand-tx); border-bottom-color: var(--brand); }

/* ヘッダーが上に居座るので、アンカーで飛んだときに見出しが隠れないようにする */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ロゴ — 実物のPNG。透明な余白は書き出しの時点で落としてある */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img { display: block; width: 96px; height: auto; }
@media (max-width: 560px) { .logo img { width: 76px; } }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  background: var(--brand); color: var(--ink);
  border: 1.5px solid var(--brand-ln);
  font-family: var(--f-display); font-weight: 700; font-size: 15.5px;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(217,98,0,.7); }
.btn--sm { padding: 8px 17px; font-size: 14px; }
.btn--lg { padding: 17px 38px; font-size: 17.5px; }
.btn--ghost { background: transparent; color: var(--brand-tx); border-color: var(--brand-ln); }

/* ---------- ヒーロー ---------- */
/* ファーストビューは画面の高さいっぱいに。--above はツールバーとヘッダーの
   合計で、JSが実測して入れる。決め打ちにしないのは、ツールバーは公開前に
   外す予定で、幅によっては折り返して高さが変わるため。
   min-height なので、中身のほうが高いときは素直に伸びる */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 7vw, 86px) 20px clamp(52px, 8vw, 92px);
  min-height: calc(100vh - var(--above, 110px));
  min-height: calc(100svh - var(--above, 110px));
  display: grid; align-content: center;
}
/* 画面が極端に低いとき（横向きのスマホなど）は、無理に高さを合わせない。
   合わせても中身が入りきらないので、余白を詰めて素直に流す */
@media (max-height: 560px) {
  .hero { min-height: 0; padding-top: 26px; padding-bottom: 30px; }
  .hero__inner { gap: 26px; }
  /* 写真枠は16:9で場所を取りすぎる。低い画面では言葉とボタンを優先する */
  .hero .shot { display: none; }
}

.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(115% 85% at 82% 4%, #000 0%, transparent 66%);
  -webkit-mask-image: radial-gradient(115% 85% at 82% 4%, #000 0%, transparent 66%);
}
.hero__inner { position: relative; max-width: 1180px; margin-inline: auto; display: grid; gap: 52px; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; }
.cond { font-family: var(--f-mono); font-size: clamp(15px, 2.2vw, 19px); color: var(--ink-2); }
.cond b { color: var(--brand-tx); font-weight: 600; }
.hero h1 { font-size: clamp(36px, 6.4vw, 62px); font-weight: 900; margin: 4px 0 2px; padding-left: clamp(14px, 2.6vw, 30px); }
.hero h1 mark { background: var(--brand); color: var(--ink); padding: 0 .18em; border-radius: 6px; }
.hero h1 .sub { display: block; font-size: .55em; margin-top: 12px; color: var(--ink-2); font-weight: 700; padding-left: 0; }
.hero__close { font-family: var(--f-mono); font-size: clamp(15px, 2.2vw, 19px); color: var(--brand-tx); font-weight: 600; }
.hero__body { margin-top: 26px; max-width: 28em; font-size: 16.5px; }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }

/* ---------- 写真プレースホルダー（CRT画面型） ---------- */
.shot {
  background: var(--ink); border-radius: 12px; padding: 10px 10px 16px;
  position: relative;
}
.shot::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  width: 34%; height: 10px; border-radius: 0 0 6px 6px; background: var(--ink);
}
.shot__screen {
  border-radius: 5px; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 22px 16px;
  background-image: repeating-linear-gradient(45deg, var(--tint) 0 12px, transparent 12px 24px);
}
.shot--16x9 .shot__screen { aspect-ratio: 16 / 9; }
.hero .shot { padding: 14px 14px 22px; border-radius: 16px; }
.hero .shot::after { width: 30%; height: 13px; bottom: -12px; }
.hero .shot .shot__label { font-size: 18px; }
.hero .shot .shot__spec { font-size: 12.5px; }
.shot--1x1  .shot__screen { aspect-ratio: 1 / 1; }
.shot--3x4  .shot__screen { aspect-ratio: 3 / 4; }
.shot__icon { color: var(--brand-ln); }
.shot__label { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.shot__spec { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); }
.shot--sm .shot__label { font-size: 13px; }
.shot--sm .shot__spec { font-size: 10.5px; }
.shot--sm { padding: 6px 6px 10px; }
.shot--sm::after { height: 7px; bottom: -6px; }

/* ---------- チェックリスト ---------- */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { display: grid; grid-template-columns: auto auto 1fr; gap: 0 14px; align-items: center; padding: 15px 16px; border-radius: 10px; font-size: 17px; transition: background-color .18s ease; }
.checks li + li { margin-top: 2px; }
.checks li:hover { background: var(--tint); }
.checks .box { width: 24px; height: 24px; border-radius: 7px; background: var(--brand); border: 1.5px solid var(--brand-ln); display: grid; place-items: center; color: var(--ink); }
.checks .idx { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.verdict { margin-top: 44px; padding: 34px 40px; border-radius: var(--r); background: var(--tint); border-left: 6px solid var(--brand); }
.verdict p { max-width: 30em; }
.verdict__punch { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 2.3vw, 27px); line-height: 1.55; margin-top: 10px; max-width: 26em; }

.split { display: grid; gap: 34px 60px; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; }
.split .h2 { position: sticky; top: 96px; }
.duo { display: grid; gap: 24px 40px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; margin-top: 30px; }
.duo .note, .duo .lede { margin-top: 0; max-width: none; }

/* ---------- カード ---------- */
.cards { display: grid; gap: 20px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; box-shadow: var(--shadow); }
.card h3 { font-size: 19.5px; font-weight: 700; margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 15.5px; }
.card__num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--brand); color: var(--ink);
  font-family: var(--f-mono); font-weight: 600; font-size: 13px; margin-bottom: 14px;
}

/* 補足の囲み。暖色でそろえる。青は専門家のバッジと注意書きに取っておく */
.note { margin-top: 26px; padding: 22px 26px; border-radius: var(--r); background: var(--tint); border-left: 5px solid var(--brand); max-width: var(--measure); font-size: 15.5px; }
.note strong { color: var(--brand-tx); font-family: var(--f-display); }

/* ---------- ストーリー ---------- */
.stories { display: grid; gap: 18px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.story { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 13px; box-shadow: var(--shadow); }
.story__tag { align-self: flex-start; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; padding: 3px 11px; border-radius: 999px; background: var(--brand); color: var(--ink); }
.story__who { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.story__name { font-family: var(--f-display); font-weight: 900; font-size: 19px; }
.story__role { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.story p { font-size: 15px; color: var(--ink-2); }

/* ---------- 塾頭 ---------- */
.lead { display: grid; gap: 36px; grid-template-columns: 260px minmax(0, 1fr); align-items: start; margin-top: 36px; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 24px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.stat__n { font-family: var(--f-display); font-weight: 900; font-size: 27px; color: var(--brand-tx); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat__n small { font-size: .5em; }
.stat__l { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin-top: 4px; }
.members li > .role { justify-self: start; }
.members { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.members li { display: grid; gap: 10px; }
.members b { font-family: var(--f-mono); font-size: 12.5px; color: var(--brand-tx); font-weight: 500; }
.members span { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* ---------- 料金 ---------- */
.price { display: grid; gap: 24px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); margin-top: 36px; }
.price__box { background: var(--brand); border: 1.5px solid var(--brand-ln); border-radius: 20px; padding: 34px 28px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.price__n { font-family: var(--f-display); font-weight: 900; font-size: clamp(40px, 6.6vw, 58px); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.price__n small { font-size: .38em; }
.price__unit { font-size: 14px; }
.price__zero { margin-top: 16px; padding-top: 14px; border-top: 1.5px solid var(--brand-ln); font-family: var(--f-display); font-weight: 700; font-size: 16.5px; }
.incl { list-style: none; padding: 0; margin: 0; }
.incl li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.incl svg { flex: none; margin-top: 5px; color: var(--brand-ln); }

/* ---------- 6つの安心 ---------- */
/* 6つなので 3列×2行 に固定する。auto-fit だと幅次第で4+2に割れて、
   段が揃わずに落ち着かない */
.safety { display: grid; gap: 20px 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
@media (max-width: 900px) { .safety { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .safety { grid-template-columns: 1fr; } }
/* 直接の子だけを横並びにする。子孫まで当てると、見出しと説明文を包む
   内側のdivまでflex行になって、h3とpが横に並んでしまう */
.safety > div { display: flex; gap: 15px; align-items: flex-start; }
.safety .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: var(--ink); display: grid; place-items: center; }
.safety h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 2px; }
.safety p { font-size: 14.5px; color: var(--ink-2); line-height: 1.75; }

/* ---------- 3ステップ ---------- */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); margin-top: 42px; counter-reset: s; }
.step { position: relative; padding: 32px 26px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: -17px; left: 24px; width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand); color: var(--ink); border: 1.5px solid var(--brand-ln);
  display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: 16px;
}
.step__k { font-family: var(--f-mono); font-size: 12px; color: var(--brand-tx); display: block; margin-bottom: 4px; }
.step h3 { font-size: 17.5px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-2); }

/* ---------- FAQ ---------- */
.faq { margin-top: 32px; max-width: 46em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 32px; position: relative; font-family: var(--f-display); font-weight: 700; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; position: absolute; left: 0; top: 18px; font-family: var(--f-mono); font-weight: 600; color: var(--brand-tx); }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 26px; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .a { padding: 0 40px 20px 32px; color: var(--ink-2); font-size: 15.5px; }

/* ---------- 最終CTA ---------- */
.final { background: var(--ink); color: var(--paper); text-align: center; }
.final h2 { font-size: clamp(27px, 5vw, 42px); font-weight: 900; }
.final h2 mark { background: var(--brand); color: var(--ink); padding: 0 .16em; border-radius: 6px; }
.final p { margin: 20px auto 0; max-width: 32em; opacity: .82; }
.final .btn { margin-top: 34px; }
.final__sub { margin-top: 20px; font-size: 14.5px; opacity: .82; }
.final__sub a { color: var(--brand); }

/* ---------- フッター ---------- */
.foot { background: var(--ink); color: var(--paper); padding: 10px 20px 44px; }
.foot__cols { max-width: var(--wrap); margin-inline: auto; display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding-top: 44px; border-top: 1px solid rgba(255,255,255,.13); }
.foot h4 { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; color: var(--brand); margin: 0 0 12px; letter-spacing: .07em; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; }
.foot a { text-decoration: none; opacity: .86; }
.foot a:hover { opacity: 1; text-decoration: underline; }
.foot__base { max-width: var(--wrap); margin: 38px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); font-size: 12.5px; opacity: .58; }

/* ---------- モバイル固定CTA ---------- */
.mobile-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; display: none; }
.mobile-cta .btn { width: 100%; padding: 15px; box-shadow: 0 8px 24px -8px rgba(26,19,16,.55); }

/* ---------- 要確認マーカー ---------- */
.todo { display: inline-block; font-family: var(--f-mono); font-size: 11px; padding: 1px 7px; border-radius: 4px; margin-left: 6px; background: var(--screen-bg); color: var(--screen); vertical-align: middle; }

/* ---------- スクロール表示 ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero__inner, .lead, .price, .split { grid-template-columns: 1fr; }
  .split .h2 { position: static; }
  .nav__links { display: none; }
  /* ナビが消えると右寄せの起点も消えるので、CTAから先を右端へ送る */
  .nav__inner > .btn { margin-left: auto; }
  .mobile-cta { display: block; }
  .foot { padding-bottom: 92px; }
  .lead .shot { max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   ここから下は複数ページ構成のために追加した分
   ============================================================ */

/* ---------- ハンバーガーメニュー ---------- */
.burger {
  width: 42px; height: 42px; border-radius: 11px;
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  flex: none; padding: 0;
  transition: background-color .16s ease, border-color .16s ease;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
.burger:hover { background: var(--tint); border-color: var(--brand-ln); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] { background: var(--tint); border-color: var(--brand-ln); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--ink); color: var(--paper);
  overflow-y: auto;
  padding: 78px 20px 60px;
  opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease;
}
.menu[data-open="true"] { opacity: 1; visibility: visible; }
.menu__close {
  position: absolute; top: 18px; right: 20px;
  width: 42px; height: 42px; border-radius: 11px;
  background: transparent; border: 1px solid rgba(255,255,255,.22); color: var(--paper);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.menu__inner { max-width: 1180px; margin-inline: auto; }
.menu__lead { font-family: var(--f-mono); font-size: 12.5px; color: var(--brand); margin-bottom: 26px; }
/* 区分は4つ。auto-fit に任せると幅しだいで3列になり、1つだけ2段目に
   取り残される。4で割り切れる列数だけを使う。 */
.menu__grid { display: grid; gap: 34px 30px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 999px) { .menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; } }
@media (max-width: 479px) { .menu__grid { grid-template-columns: 1fr; gap: 24px; } }
.menu h3 { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; color: var(--brand); letter-spacing: .07em; margin-bottom: 14px; }
.menu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.menu a {
  display: block; padding: 9px 12px; margin-left: -12px; border-radius: 9px;
  text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: 17px;
  transition: background-color .16s ease;
}
.menu a:hover { background: rgba(255,255,255,.09); }
.menu a small { display: block; word-break: auto-phrase; font-family: var(--f-body); font-weight: 400; font-size: 12.5px; opacity: .62; margin-top: 1px; }
.menu a b { font-weight: inherit; word-break: auto-phrase; }
/* 矢印は見出しの行に付ける。リンク全体の ::after にすると
   <small> の後ろ、つまり説明文の下に単独で落ちる */
.menu a[target="_blank"] b::after { content: " ↗"; color: var(--brand); font-size: .8em; }

/* 規約類。区分として並べるほどのものではないので、下に小さく置く。 */
.menu__fine { display: flex; flex-wrap: wrap; gap: 4px 24px;
  margin-top: 46px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.menu .menu__fine a { display: inline-block; padding: 4px 0; margin: 0;
  font-family: var(--f-body); font-weight: 400; font-size: 13px; opacity: .55; }
.menu .menu__fine a:hover { background: none; opacity: 1; text-decoration: underline; }
body.is-locked { overflow: hidden; }

/* ---------- 下層ページの見出し ---------- */
.phead { padding: clamp(46px, 6vw, 78px) 20px clamp(34px, 4vw, 52px); background: var(--tint); border-bottom: 1px solid var(--line); }
.phead__inner { max-width: var(--wrap); margin-inline: auto; }
.crumb { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); margin-bottom: 16px; }
.crumb a { color: var(--brand-tx); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.phead h1 { font-size: clamp(30px, 5.2vw, 48px); font-weight: 900; }
.phead .lede { margin-top: 18px; font-size: 17px; max-width: 40em; }

/* ---------- 表 ---------- */
.tablewrap { overflow-x: auto; margin-top: 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--tint); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--f-mono); color: var(--brand-tx); }

/* ---------- 番号つきの流れ ---------- */
.flowlist { list-style: none; padding: 0; margin: 30px 0 0; counter-reset: f; display: grid; gap: 0; }
.flowlist li { counter-increment: f; display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.flowlist li::before { content: "0" counter(f); font-family: var(--f-mono); font-size: 14px; color: var(--brand-tx); padding-top: 3px; }
.flowlist h3 { font-size: 17.5px; margin-bottom: 6px; }
.flowlist p { color: var(--ink-2); font-size: 15.5px; }

/* ---------- タグの並び ---------- */
.taglist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { font-family: var(--f-mono); font-size: 12px; padding: 4px 11px; border-radius: 6px; background: var(--tint); color: var(--brand-tx); border: 1px solid var(--line); }

/* ---------- 引用 ---------- */
.quote { border-left: 5px solid var(--brand); background: var(--tint); border-radius: var(--r); padding: 26px 30px; margin-top: 26px; }
.quote p { font-size: 16.5px; }
.quote cite { display: block; margin-top: 12px; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); font-style: normal; }

/* ---------- 次のページへ ---------- */
.nextlinks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 40px; }
.nextlinks a {
  display: block; padding: 22px 24px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.nextlinks a:hover { border-color: var(--brand-ln); transform: translateY(-2px); }
.nextlinks b { display: block; font-family: var(--f-display); font-size: 17px; }
.nextlinks span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.nextlinks em { font-family: var(--f-mono); font-size: 11.5px; color: var(--brand-tx); font-style: normal; }

/* ============================================================
   下層ページのヒーロー。トップの hero と同じ格を持たせる
   ============================================================ */
.phero { position: relative; overflow: hidden; padding: clamp(40px, 5.4vw, 72px) 20px clamp(44px, 6vw, 76px); border-bottom: 1px solid var(--line); }
.phero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(115% 90% at 84% 6%, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(115% 90% at 84% 6%, #000 0%, transparent 68%);
}
.phero__inner { position: relative; max-width: 1180px; margin-inline: auto; display: grid; gap: 46px; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; }
.phero h1 { font-size: clamp(31px, 5.4vw, 52px); font-weight: 900; margin-top: 8px; }
.phero .lede { margin-top: 20px; font-size: 17px; max-width: 30em; }
.phero .btn { margin-top: 26px; }

/* 端末風のコードブロック。ロゴの2画面モニタと揃えた見た目 */
.codeblock {
  background: var(--ink); border-radius: 14px; padding: 24px 26px;
  font-family: var(--f-mono); font-size: 14px; line-height: 2.05;
  color: #efe3d9; overflow-x: auto;
  position: relative;
}
.codeblock::before {
  content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 28%; height: 11px; border-radius: 0 0 6px 6px; background: var(--ink);
}
.codeblock .k { color: #93837a; }
.codeblock .v { color: var(--brand); }
.codeblock .c { color: #6f9089; }
.codeblock .s { color: #ffd8b3; }
.codeblock b { font-weight: 500; color: #fff; }

/* トップと同じ暗転の締め。CTAを持たないページ用 */
.closing { background: var(--ink); color: var(--paper); }
.closing .h2 { font-size: clamp(25px, 4.2vw, 36px); }
.closing .h2 mark { background: var(--brand); color: var(--ink); padding: 0 .16em; border-radius: 6px; }
.closing .lede { color: rgba(255,250,245,.78); }
.closing .nextlinks a { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: var(--paper); }
.closing .nextlinks a:hover { border-color: var(--brand); background: rgba(255,255,255,.09); }
.closing .nextlinks span { color: rgba(255,250,245,.6); }
.closing .nextlinks em { color: var(--brand); }

/* 3種類のサポートを面で見せる */
.trio { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 34px; }
.trio div { border-radius: var(--r); padding: 24px 26px; border: 1px solid var(--line); background: var(--surface); }
.trio div:first-child { background: var(--screen-bg); border-color: var(--screen); }
.trio div:last-child { background: var(--brand); border-color: var(--brand-ln); }
.trio h3 { font-size: 18px; margin: 12px 0 6px; }
.trio p { font-size: 14.5px; color: var(--ink-2); }
.trio div:last-child p { color: var(--ink); }

@media (max-width: 900px) {
  .phero__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   記事・教材の一覧
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.filters button {
  font-family: var(--f-mono); font-size: 12.5px; cursor: pointer;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.filters button:hover { border-color: var(--brand-ln); color: var(--brand-tx); }
.filters button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand-ln); color: var(--ink); font-weight: 500; }

.yearhead {
  display: flex; align-items: baseline; gap: 14px;
  margin: 48px 0 6px; padding-bottom: 10px; border-bottom: 2px solid var(--ink);
}
.yearhead b { font-family: var(--f-display); font-weight: 900; font-size: 26px; font-variant-numeric: tabular-nums; }
.yearhead span { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }
.yearhead:first-of-type { margin-top: 26px; }

.postlist { list-style: none; padding: 0; margin: 0; }
.postlist li { border-bottom: 1px solid var(--line); }
.postlist a {
  display: grid; grid-template-columns: 108px 1fr; gap: 4px 20px; align-items: baseline;
  padding: 17px 14px 17px 12px; margin-inline: -12px; border-radius: 10px;
  text-decoration: none; transition: background-color .16s ease;
}
.postlist a:hover { background: var(--tint); }
.postlist time { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.postlist b { font-family: var(--f-display); font-weight: 700; font-size: 16.5px; line-height: 1.55; }
.postlist .cats { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.postlist .cats span { font-family: var(--f-mono); font-size: 11px; color: var(--brand-tx); background: var(--tint); border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px; }
.postlist li[hidden] { display: none; }

.emptynote { padding: 34px 0; color: var(--ink-2); font-size: 15.5px; }

/* 注目の記事 */
.pickup { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: 34px; }
.pickup a {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 24px 26px; text-decoration: none; box-shadow: var(--shadow);
  transition: border-color .16s ease, transform .16s ease;
}
.pickup a:hover { border-color: var(--brand-ln); transform: translateY(-2px); }
.pickup time { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.pickup b { font-family: var(--f-display); font-weight: 900; font-size: 18px; line-height: 1.5; }
.pickup p { font-size: 14.5px; color: var(--ink-2); }
.pickup em { font-style: normal; font-family: var(--f-mono); font-size: 11.5px; color: var(--brand-tx); margin-top: auto; }

/* 章内の目次 */
.toc { position: sticky; top: 92px; align-self: start; }
.toc h3 { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-2); letter-spacing: .06em; margin-bottom: 12px; }
.toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 8px 12px; margin-left: -12px; border-radius: 8px; text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background-color .16s ease; }
.toc a:hover { background: var(--tint); color: var(--brand-tx); }

@media (max-width: 700px) {
  .postlist a { grid-template-columns: 1fr; }
  .postlist .cats { grid-column: 1; }
  .toc { position: static; }
}

/* ============================================================
   法務ページ
   ============================================================ */
.legalwrap { display: grid; gap: 40px 56px; grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.legal h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 900; margin: 0 0 6px; }
.legal h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 8px; color: var(--brand-tx); }
.legal section { padding: 30px 0 4px; border-top: 1px solid var(--line); }
.legal section:first-child { border-top: none; padding-top: 0; }
.legal .sub { margin-top: 22px; }
.legal p { font-size: 15.5px; color: var(--ink-2); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0 0 1.2em; padding: 0; font-size: 15.5px; color: var(--ink-2); }
.legal li { margin-bottom: 6px; }
.legal .no { font-family: var(--f-mono); font-size: 13px; color: var(--brand-tx); display: block; margin-bottom: 2px; }
.legalnote { background: var(--tint); border-left: 5px solid var(--brand); border-radius: var(--r); padding: 24px 28px; margin-bottom: 34px; }
.legalnote p { font-size: 16px; color: var(--ink); }

@media (max-width: 900px) {
  .legalwrap { grid-template-columns: 1fr; gap: 26px; }
}

/* ============================================================
   ゲーム開発コース。プロンプト集の表示
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.chip { font-family: var(--f-mono); font-size: 11.5px; padding: 4px 11px; border-radius: 6px; background: var(--tint); color: var(--brand-tx); border: 1px solid var(--line); }
.chip--hard { background: var(--screen-bg); color: var(--screen); border-color: var(--screen); }

.acc { margin-top: 30px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; position: absolute; right: 10px; top: 26px;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); transition: transform .2s ease;
}
.acc details[open] summary::after { transform: rotate(-135deg); }
.acc summary b { font-family: var(--f-display); font-weight: 700; font-size: 17.5px; }
.acc summary .num { font-family: var(--f-mono); font-size: 12.5px; color: var(--brand-tx); }
.acc summary .lead { font-size: 14px; color: var(--ink-2); }
.acc .inner { padding: 4px 0 30px; }

.prompt { margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--ink); }
.prompt__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 10px 14px; font-family: var(--f-mono); font-size: 12px;
}
.prompt__copy {
  font: inherit; cursor: pointer; padding: 4px 12px; border-radius: 6px;
  background: var(--brand); color: var(--ink); border: none;
}
.prompt__copy[data-done="1"] { background: var(--screen); color: #fff; }
.prompt__body {
  margin: 0; padding: 18px 16px; background: #0d1614; color: #dfe9e5;
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.95;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.prompt__body .ph { color: var(--brand); background: rgba(255,119,0,.12); padding: 0 3px; border-radius: 3px; }

.hint { margin-top: 18px; padding: 18px 22px; border-radius: var(--r); background: var(--tint); border-left: 4px solid var(--brand); }
.hint h4 { font-size: 15px; margin-bottom: 8px; }
.hint ul { margin: 0 0 0 1.2em; padding: 0; font-size: 14.5px; color: var(--ink-2); }
.hint li { margin-bottom: 5px; }
.hint .ph { font-family: var(--f-mono); font-size: .92em; color: var(--brand-tx); }

/* ============================================================
   v2 — プログラミングらしさは「読ませる構文」ではなく
        「触れて分かるUI」で出す。読み手は一般の保護者。

   ・構文（const / return / catch / import / .then）は全部やめる
   ・技術らしさの出どころは、ロゴのCRT画面と、教材のマイクラのブロック
   ・どちらも保護者が一目で分かる形なので、解読が要らない
   ============================================================ */

/* ---------- 見出しの前に置く小さなブロック ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-2); margin-bottom: 15px;
}
.eyebrow::before {
  content: ""; width: 11px; height: 11px; flex: none;
  background: var(--brand); border-radius: 2px;
  box-shadow: 3px 3px 0 var(--brand-ln);
}
.eyebrow .k { display: none; }

/* ---------- 画面パネル。ロゴの2画面モニタと同じ形 ---------- */
.screen { background: var(--ink); border-radius: 16px; padding: 14px 14px 22px; position: relative; }
.screen::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  width: 30%; height: 13px; border-radius: 0 0 7px 7px; background: var(--ink);
}
.screen__in { background: var(--surface); border-radius: 7px; padding: 26px 26px 28px; }
.screen__label {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-2);
  margin-bottom: 16px;
}
.screen__label::before { content: ""; width: 9px; height: 9px; background: var(--brand); border-radius: 2px; }
.screen__big {
  font-family: var(--f-display); font-weight: 900; line-height: 1.05;
  font-size: clamp(38px, 5.4vw, 52px); color: var(--brand-tx);
  font-variant-numeric: tabular-nums;
}
.screen__big small { font-size: .38em; }
.screen__unit { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.screen__row { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.screen__row:last-of-type { border-bottom: none; }
.screen__row b { font-family: var(--f-display); font-weight: 700; font-size: 16px; }
.screen__row span { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.screen__note { font-size: 13.5px; color: var(--ink-2); margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.screen__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.screen__steps { display: grid; gap: 8px; }
.screen__step { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.screen__step i { font-style: normal; width: 12px; height: 12px; border-radius: 2px; background: var(--line); flex: none; }
.screen__step.on i { background: var(--brand); box-shadow: 2px 2px 0 var(--brand-ln); }
.screen__step b { font-family: var(--f-display); font-weight: 700; }
.screen__step span { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); margin-left: auto; }

/* ---------- 触れるチェックリスト ---------- */
.checkform { max-width: none; }
.checkform label {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  padding: 15px 16px; border-radius: 10px; cursor: pointer; font-size: 17px;
  transition: background-color .16s ease;
}
.checkform label:hover { background: var(--tint); }
.checkform label + label { margin-top: 2px; }
.checkform input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkform .bx {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  border: 2px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: transparent;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.checkform input:checked + .bx {
  background: var(--brand); border-color: var(--brand-ln); color: var(--ink);
  box-shadow: 3px 3px 0 var(--brand-ln);
}
.checkform input:focus-visible + .bx { outline: 3px solid var(--brand-ln); outline-offset: 3px; }
.checkform label:has(input:checked) { background: var(--tint); }

.tally {
  margin-top: 30px; padding: 28px 32px; border-radius: var(--r);
  background: var(--tint); border-left: 6px solid var(--brand);
}
.tally__n { font-family: var(--f-mono); font-size: 13px; color: var(--brand-tx); }
.tally__msg { font-family: var(--f-display); font-weight: 700; font-size: clamp(18px, 2.3vw, 25px); line-height: 1.6; margin-top: 8px; }
.tally__sub { font-size: 15px; color: var(--ink-2); margin-top: 12px; }

@media (max-width: 900px) {
  .screen__in { padding: 22px 20px 24px; }
}

/* ============================================================
   記事ページ
   ============================================================ */

.posthero {
  position: relative; overflow: hidden;
  padding: clamp(38px, 5vw, 66px) 20px clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
}
.posthero .wrap { position: relative; }
.posthero__h1 {
  font-size: clamp(26px, 4.2vw, 40px); font-weight: 900;
  max-width: 24em; text-wrap: balance; line-height: 1.42;
}
.postmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.postmeta time { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }
.postmeta__tags { display: flex; flex-wrap: wrap; gap: 7px; }

/* 本文。読み幅をおさえて、行間を広めにとる */
.post { max-width: 40em; font-size: 16.5px; line-height: 1.95; }
/* 記事にはマイクラのコマンドが素のまま入っている。空白の無い長い文字列なので、
   折り返さないと狭い画面で横にはみ出す */
.post { overflow-wrap: break-word; }
.post > :first-child { margin-top: 0; }
.post p { margin-top: 20px; color: var(--ink); }
.post h2 {
  font-size: clamp(20px, 2.8vw, 26px); font-weight: 900;
  margin: 46px 0 0; padding-left: 15px; position: relative; line-height: 1.5;
}
.post h2::before {
  content: ""; position: absolute; left: 0; top: .22em; bottom: .22em;
  width: 5px; border-radius: 3px; background: var(--brand);
}
.post h3 { font-size: 17.5px; font-weight: 700; margin: 34px 0 0; color: var(--brand-tx); }
.post ul, .post ol { margin: 18px 0 0 1.4em; padding: 0; }
.post li { margin-top: 8px; }
.post a { color: var(--brand-tx); text-decoration: underline; text-underline-offset: 3px; }
.post strong { font-weight: 700; }
.post .tablewrap { margin-top: 26px; }
.post .shot { margin-top: 26px; }
.post .postcap { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.post mark { background: var(--tint); color: var(--brand-tx); padding: 0 .2em; border-radius: 4px; }

/* もとの記事で囲み枠になっていた段落 */
.postnote {
  margin-top: 26px; padding: 18px 22px;
  background: var(--tint); border-left: 5px solid var(--brand);
  border-radius: var(--r);
  font-family: var(--f-display); font-weight: 700; font-size: 16px; line-height: 1.8;
}

/* コマンドやコードは、そのまま写せるように等幅で置く */
.postcode {
  margin-top: 24px; padding: 20px 22px;
  background: var(--ink); color: #efe3d9; border-radius: 14px;
  font-family: var(--f-mono); font-size: 13.5px; line-height: 1.85;
  overflow-x: auto; white-space: pre; tab-size: 2;
}
.postcode code { font: inherit; color: inherit; }
/* 変換もれの pre があっても、はみ出さずに枠内でスクロールさせる */
.post pre { overflow-x: auto; max-width: 100%; }
.post :not(.postcode) > code {
  font-family: var(--f-mono); font-size: .92em;
  background: var(--tint); color: var(--brand-tx);
  padding: 2px 6px; border-radius: 5px;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .post { font-size: 16px; }
  .postcode { font-size: 12.5px; padding: 16px 16px; }
}

/* ============================================================
   if(チャレンジ) のマニュアル
   ============================================================ */

/* ふりがなの表示切り替え。旧サイトは本文を2回書いて片方を隠していたが、
   ここではふりがな付きの一本にして、rt の表示だけを切り替える。
   どちらを選んでいても、本文はページ内検索に出る */
.manual[data-furigana="off"] rt { display: none; }
.manual ruby { ruby-align: center; }
.manual rt { font-size: .52em; font-weight: 400; color: var(--ink-2); }

.furigana { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.furigana > span { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }
.furigana button {
  font-family: var(--f-display); font-weight: 700; font-size: 13.5px;
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
}
.furigana button[aria-pressed="true"] {
  background: var(--brand); color: var(--ink); border-color: var(--brand-ln);
}

.manualbody { max-width: 44em; font-size: 16.5px; line-height: 1.95; margin-top: 18px; }
.manualbody > :first-child { margin-top: 0; }
.manualbody p { margin-top: 18px; }
.manualbody h3 { font-size: 17.5px; font-weight: 700; margin: 30px 0 0; color: var(--brand-tx); }
.manualbody h4 { font-size: 16px; font-weight: 700; margin: 22px 0 0; }
.manualbody a { color: var(--brand-tx); text-decoration: underline; text-underline-offset: 3px; }
.manualbody .tablewrap { margin-top: 22px; }
.manualbody table { min-width: 0; }

.mlist { margin: 16px 0 0 0; padding: 0; list-style: none; }
.mlist li {
  position: relative; padding-left: 24px; margin-top: 9px;
}
.mlist li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--brand);
}

/* もとの highlight-box。補足のかたまり */
.mnote {
  margin-top: 24px; padding: 20px 24px; border-radius: var(--r);
  background: var(--tint); border-left: 5px solid var(--brand);
}
.mnote > :first-child { margin-top: 0; }
.mnote strong { font-family: var(--f-display); color: var(--brand-tx); }
.mnote ul { margin: 12px 0 0 1.3em; padding: 0; }
.mnote li { margin-top: 7px; }

/* もとの warning-box。契約や年齢の注意など、読み飛ばされると困るもの */
.mnote--warn { background: var(--screen-bg); border-left-color: var(--screen); }
.mnote--warn strong { color: var(--screen); }

/* もとの price-box */
.mprice {
  margin-top: 22px; padding: 20px 24px; border-radius: var(--r);
  background: var(--ink); color: var(--paper);
  font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.6;
}
.mprice span { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 400; opacity: .82; }

@media (max-width: 560px) {
  .manualbody { font-size: 16px; }
  .mprice { font-size: 17px; }
}

/* 写真が入った枠。プレースホルダーと同じ箱のまま、中身だけ実物になる */
.shot--filled { background: var(--surface); padding: 0; border-color: var(--line); }
.shot--filled img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }


/* セットアップ手順書のPDF一覧 */
.pdflist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.pdflist li { font-size: 15px; }
.pdflist a { color: var(--brand-tx); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pdflist span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }

/* ================================================================
   画面に入ったときの出方
   ----------------------------------------------------------------
   スクロールして画面に入ったら、その場で1回だけ動いて収まる。
   戻しても逆再生はしない。既にある .reveal / .is-in の仕組みに
   乗せているので、JSは1行も増やしていない。

   出方は場所ごとに変えてある。ぜんぶ同じ上がり方だと、
   長いページでは3回目から見飽きる。
   ================================================================ */

:root {
  /* 行き過ぎて戻るイージング。着地に手ごたえが出る */
  --back: cubic-bezier(.22, 1.24, .36, 1);
  --out:  cubic-bezier(.16, .84, .28, 1);
}

/* 帯そのものは、少し大きめに持ち上げる */
.reveal { transform: translateY(26px); transition: opacity .55s var(--out), transform .55s var(--out); }

/* ---------------------------------------------------------------- */
/* チェックの一覧 ── 左からめくれてくる。
   四角は少し遅れて、回りながら飛び込む。
   トップは .checkform、ゲーム開発コースは .checks と作りが違う */
.reveal .checkform label, .reveal .checks li { opacity: 0; }
.reveal.is-in .checkform label,
.reveal.is-in .checks li { animation: flipInL .5s var(--back) both; }

.reveal .checkform .bx, .reveal .checks .box { opacity: 0; }
.reveal.is-in .checkform .bx,
.reveal.is-in .checks .box { animation: popBox .42s var(--back) both; }

@keyframes flipInL {
  from { opacity: 0; transform: translateX(-26px) rotate(-1.8deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes popBox {
  0%   { opacity: 0; scale: 0;    rotate: -40deg; }
  70%  { opacity: 1; scale: 1.22; rotate: 10deg; }
  100% { opacity: 1; scale: 1;    rotate: 0deg; }
}

/* ---------------------------------------------------------------- */
/* カード ── 下から起き上がって、まっすぐになる */
.reveal .cards > * { opacity: 0; }
.reveal.is-in .cards > * { animation: riseUp .58s var(--back) both; }
@keyframes riseUp {
  from { opacity: 0; transform: translateY(38px) rotate(1.8deg) scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* 番号は、あとからハンコを押すように落ちてくる */
.reveal .card__num { opacity: 0; }
.reveal.is-in .card__num { animation: stampIn .44s var(--back) both; }
@keyframes stampIn {
  0%   { opacity: 0; scale: 2;  rotate: -26deg; }
  60%  { opacity: 1; scale: .9; rotate: 7deg; }
  100% { opacity: 1; scale: 1;  rotate: 0deg; }
}

/* ---------------------------------------------------------------- */
/* 3ステップ ── ブロックが上から落ちて、着地でひしゃげる */
.reveal .steps > * { opacity: 0; }
.reveal.is-in .steps > * { animation: blockDrop .62s var(--out) both; }
@keyframes blockDrop {
  0%   { opacity: 0; transform: translateY(-32px) scale(.96, 1.05); }
  52%  { opacity: 1; transform: translateY(5px)   scale(1.03, .95); }
  74%  {              transform: translateY(-4px) scale(.99, 1.02); }
  100% { opacity: 1; transform: none; }
}
/* 番号のバッジは、箱が落ち着いてから跳ねて出る */
.reveal .step::before { opacity: 0; }
.reveal.is-in .step::before { animation: stampIn .44s var(--back) both; }

/* ---------------------------------------------------------------- */
/* 生徒のストーリー ── 左右から交互に入る */
.reveal .stories > * { opacity: 0; }
.reveal.is-in .stories > *:nth-child(2n+1) { animation: swingL .58s var(--back) both; }
.reveal.is-in .stories > *:nth-child(2n)   { animation: swingR .58s var(--back) both; }
@keyframes swingL {
  from { opacity: 0; transform: translate(-30px, 20px) rotate(-2.4deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes swingR {
  from { opacity: 0; transform: translate(30px, 20px) rotate(2.4deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- */
/* 6つの安心 ── 本文は静かに、アイコンだけ回って入る */
.reveal .safety > div { opacity: 0; }
.reveal.is-in .safety > div { animation: riseUp .52s var(--out) both; }
.reveal .safety .ico { opacity: 0; }
.reveal.is-in .safety .ico { animation: spinIn .52s var(--back) both; }
@keyframes spinIn {
  from { opacity: 0; rotate: -150deg; scale: .35; }
  to   { opacity: 1; rotate: 0deg;    scale: 1; }
}

/* ---------------------------------------------------------------- */
/* 数字 ── 下から回り込んで、行き過ぎて戻る */
.reveal .stats > * { opacity: 0; }
.reveal.is-in .stats > * { animation: riseUp .5s var(--back) both; }
.reveal .stat__n, .reveal .price__n { opacity: 0; }
.reveal.is-in .stat__n, .reveal.is-in .price__n { animation: countUp .56s var(--back) both; }
@keyframes countUp {
  0%   { opacity: 0; transform: translateY(16px) scale(.7); }
  62%  { opacity: 1; transform: translateY(-3px) scale(1.08); }
  100% { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- */
/* 写真の枠 ── 少し小さく傾いた状態から、置き直される */
.reveal .shot { opacity: 0; }
.reveal.is-in .shot { animation: settleIn .6s var(--back) both; }
@keyframes settleIn {
  from { opacity: 0; transform: scale(.92) rotate(-3deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- */
/* 最後のボタン ── 出てきたあと、1回だけ身をよじる */
.final.is-in .btn--lg, .closing.is-in .btn--lg {
  animation: nudge 1s var(--out) .55s 1 both;
}
@keyframes nudge {
  0%, 100% { rotate: 0deg; }
  16% { rotate: -4deg; }
  32% { rotate:  3deg; }
  48% { rotate: -2deg; }
  64% { rotate:  1deg; }
}

/* ---------------------------------------------------------------- */
/* 順番に出す。1つあたり65msずつ遅らせる。
   これを入れないと全部が同時に動いて、かえって何も見えない */
.reveal.is-in :is(.cards, .stories, .steps, .safety, .checks, .stats, .checkform) > *:nth-child(1) { animation-delay: .02s; }
.reveal.is-in :is(.cards, .stories, .steps, .safety, .checks, .stats, .checkform) > *:nth-child(2) { animation-delay: .085s; }
.reveal.is-in :is(.cards, .stories, .steps, .safety, .checks, .stats, .checkform) > *:nth-child(3) { animation-delay: .15s; }
.reveal.is-in :is(.cards, .stories, .steps, .safety, .checks, .stats, .checkform) > *:nth-child(4) { animation-delay: .215s; }
.reveal.is-in :is(.cards, .stories, .steps, .safety, .checks, .stats, .checkform) > *:nth-child(5) { animation-delay: .28s; }
.reveal.is-in :is(.cards, .stories, .steps, .safety, .checks, .stats, .checkform) > *:nth-child(6) { animation-delay: .345s; }
.reveal.is-in :is(.cards, .stories, .steps, .safety, .checks, .stats, .checkform) > *:nth-child(7) { animation-delay: .41s; }
.reveal.is-in :is(.cards, .stories, .steps, .safety, .checks, .stats, .checkform) > *:nth-child(8) { animation-delay: .475s; }

/* 中に入っている小物は、箱が動き終わるころに出す */
.reveal.is-in .cards > *:nth-child(1) .card__num { animation-delay: .24s; }
.reveal.is-in .cards > *:nth-child(2) .card__num { animation-delay: .30s; }
.reveal.is-in .cards > *:nth-child(3) .card__num { animation-delay: .37s; }
.reveal.is-in .cards > *:nth-child(4) .card__num { animation-delay: .43s; }
.reveal.is-in .cards > *:nth-child(5) .card__num { animation-delay: .50s; }
.reveal.is-in .cards > *:nth-child(6) .card__num { animation-delay: .56s; }

.reveal.is-in .steps > *:nth-child(1)::before { animation-delay: .30s; }
.reveal.is-in .steps > *:nth-child(2)::before { animation-delay: .37s; }
.reveal.is-in .steps > *:nth-child(3)::before { animation-delay: .43s; }

.reveal.is-in .safety > div:nth-child(1) .ico { animation-delay: .12s; }
.reveal.is-in .safety > div:nth-child(2) .ico { animation-delay: .19s; }
.reveal.is-in .safety > div:nth-child(3) .ico { animation-delay: .25s; }
.reveal.is-in .safety > div:nth-child(4) .ico { animation-delay: .32s; }
.reveal.is-in .safety > div:nth-child(5) .ico { animation-delay: .38s; }
.reveal.is-in .safety > div:nth-child(6) .ico { animation-delay: .45s; }

.reveal.is-in .checkform > *:nth-child(1) .bx, .reveal.is-in .checks li:nth-child(1) .box { animation-delay: .18s; }
.reveal.is-in .checkform > *:nth-child(2) .bx, .reveal.is-in .checks li:nth-child(2) .box { animation-delay: .245s; }
.reveal.is-in .checkform > *:nth-child(3) .bx, .reveal.is-in .checks li:nth-child(3) .box { animation-delay: .31s; }
.reveal.is-in .checkform > *:nth-child(4) .bx, .reveal.is-in .checks li:nth-child(4) .box { animation-delay: .375s; }
.reveal.is-in .checkform > *:nth-child(5) .bx, .reveal.is-in .checks li:nth-child(5) .box { animation-delay: .44s; }
.reveal.is-in .checkform > *:nth-child(6) .bx, .reveal.is-in .checks li:nth-child(6) .box { animation-delay: .50s; }

.reveal.is-in .stats > *:nth-child(1) .stat__n { animation-delay: .16s; }
.reveal.is-in .stats > *:nth-child(2) .stat__n { animation-delay: .225s; }
.reveal.is-in .stats > *:nth-child(3) .stat__n { animation-delay: .29s; }
.reveal.is-in .stats > *:nth-child(4) .stat__n { animation-delay: .355s; }

/* ---------------------------------------------------------------- */
/* 触ったときも少しだけ跳ねる */
.checkform label:hover .bx, .checks li:hover .box { animation: popBox .34s var(--back); }

/* ---------------------------------------------------------------- */
/* 動きを止める設定のとき。
   上のほうの一括指定で時間は0秒になるが、遅らせる指定は残るので
   順番待ちのあいだ消えたままになる。まとめて止める */
@media (prefers-reduced-motion: reduce) {
  .reveal .checkform label, .reveal .checkform .bx, .reveal .checks li, .reveal .checks .box,
  .reveal .cards > *, .reveal .card__num, .reveal .steps > *, .reveal .step::before,
  .reveal .stories > *, .reveal .safety > div, .reveal .safety .ico,
  .reveal .stats > *, .reveal .stat__n, .reveal .price__n, .reveal .shot,
  .final .btn--lg, .closing .btn--lg {
    opacity: 1 !important; animation: none !important;
  }
}

/* ストーリーの中の写真枠は、箱ごと左右から入るので単独では動かさない。
   放っておくと、親がまだ見えないうちに中だけ動き終わってしまう */
.reveal .stories .shot { opacity: 1; }
.reveal.is-in .stories .shot { animation: none; }