/* 見た目の変数（テーマ）。色・字体・角丸・影・余白はここだけで決め、部品の CSS（style.css）は変数だけを使う。
   2026-10-23 ちさとさん「全体的にチープ」→「CrazyGames で、色は appful カラーで」（判断の画面 20261023-164439-a5ee20）
   →「黒色にはしないでほしい」（20261023-175911-15bcb6）
   →「まだあんまり可愛くないし、AI っぽい色味。黄色やだ。背景がグレーなのも変だから白がいい」（20261023-195222-2921a4）。
   CrazyGames から借りるのは並べ方と見せ方：左のメニュー・上のカテゴリーの札・大小を組み合わせたタイル・種類ごとに横に流れる列・
   絵が主役で字は少なく・枠線の無い札とボタン。
   地は白。色は appful のピンク #FF4689 の濃淡だけ（黄・紺の塗り・青みの灰色は使わない）。紺 #243B55 は字だけ。
   ゲームの絵が色を持つので、まわりは白とピンクで静かにする。可愛さは、丸い形・ピンクの影・弾む動きで出す。
   ピンクのベタ塗りは「押すと遊べる物」と選んでいる物だけ。枠線で囲まず、薄いピンクの面と余白で区切る。
   字体は会社の LP（appful.tokyo）と同じ（20261024-112629-2b5816「ブランド感が薄い。LP の About で使っているフォントを
   appful games のフォントに。ほかのテキストも LP のデフォルトのテキストフォントに」）：
   ロゴと見出しの英字は、LP の ABOUT・PRODUCT の見出しと同じ丸くふくらんだ字（Cherry Bomb One を少し太らせる）。
   この字には漢字が無いので、LP と同じく「英字の見出し＋日本語の小さな添え字」にする。
   ほかの字は LP の本文と同じ Nunito（英数字）＋ VDL V7丸ゴシック（日本語。Adobe Fonts）。VDL は読み終わるまで
   Zen Maru Gothic で出し、読み終わって <html> に wf-active が付いたら切り替える（fonts.ts）。 */
:root {
  /* 地と面（白。面はうすいピンク） */
  --bg: #fff;
  --surface: #fff;
  --surface-2: #fff0f5;
  --surface-3: #ffe3ee;
  --line: #fbe4ec;
  --header-bg: rgba(255, 255, 255, 0.94);
  --tabbar-bg: rgba(255, 255, 255, 0.96);
  /* 字（紺） */
  --ink: #243b55;
  --ink-sub: #66718a;
  --ink-faint: #a2a9b8;
  /* appful のピンクの濃淡 */
  --pink: #ff4689;
  --pink-press: #e8336f;
  --pink-ink: #e2306c;
  --pink-soft: #fff0f5;
  --pink-100: #ffe3ee;
  --pink-200: #ffc6dc;
  --pink-300: #ff9dc1;
  --green: #23875a;
  --danger: #d0352f;
  --danger-surface: #fdecea;
  /* 遊んでいる最中（白い地のまま。スマホの画面いっぱいのとき・全画面のとき） */
  --play-bg: #fff;
  --play-ink: #243b55;
  --backdrop: rgba(255, 228, 238, 0.75);
  /* 広告の枠（見本） */
  --ad-bg: #fff;
  --ad-line: #f6c9d9;
  --ad-ink: #a2a9b8;
  /* 教科の札 */
  --s-math: #1d5fa8;
  --s-japanese: #b0304f;
  --s-social: #2e7d5b;
  --s-science: #6a3fb0;
  --s-english: #9a5a00;
  /* 字体（LP と同じ）：英数字は Nunito、日本語は VDL V7丸ゴシック（読み終わるまでは Zen Maru Gothic）。
     ロゴと見出しの英字は Cherry Bomb One を --puff だけ太らせて、LP の見出しの絵のふくらみに寄せる */
  --font: "Nunito", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-num: "Nunito", system-ui, sans-serif;
  --font-brand: "Cherry Bomb One", "Nunito", system-ui, sans-serif;
  --puff: 0.07em;
  --font-size: 16px;
  /* 字間：本文は少し空ける、見出しは控えめに空ける、ラベルは空ける（本文は詰めない） */
  --ls-body: 0.02em;
  --ls-head: 0.03em;
  --ls-label: 0.05em;
  /* 形 */
  --r: 1em;
  --r-card: 1.3em;
  --r-thumb: 1em;
  --r-pill: 999px;
  /* 影はピンクがかった薄い影（灰色の影は使わない） */
  --shadow: 0 0.25em 1em rgba(226, 48, 108, 0.1);
  --shadow-thumb: 0 0.3em 1em rgba(226, 48, 108, 0.14);
  --shadow-dialog: 0 0.8em 2.6em rgba(226, 48, 108, 0.2);
  --shadow-pink: 0 0.3em 0.9em rgba(255, 70, 137, 0.35);
  /* 弾む動き（少し行き過ぎて戻る） */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 囲みの内側の余白の段階：ラベル → 短文 → カード → 長文（文章量で選ぶ） */
  --pad-label: 0.4em 1.05em;
  --pad-short: 1em 1.2em;
  --pad-card: 1.25em 1.4em;
  --pad-long: 1.6em 1.8em;
  /* 左のメニューの幅（PC） */
  --side-w: 13.5em;
  /* 左のメニューと中身の間（PC）。中身は左のメニューのすぐ右から始める（真ん中に寄せない。CrazyGames の並べ方。
     2026-10-25 ちさとさん「サイドバーとゲーム画面の間隔をもっと詰める」） */
  --side-gap: 1.25em;
  --wrap-max: 120em;
  /* ゲームのページの右の列（広告の枠・ランキング・次に遊ぶ）の幅。少し狭い PC では、広告のふつうの幅（300px）にする */
  --side-col: 21em;
  --side-col-narrow: 18.75em;
  /* ゲームの枠（PC）：画面の高さから、上の帯・パンくず・枠の下の帯・上下の余白を引いた高さに収める
     （上の帯と枠の下の帯が見えたまま）。縦長のゲームは列の幅の 9 割まで。低すぎる画面での下限 */
  --stage-chrome: 11.6em;
  --stage-portrait: 90cqw;
  --stage-min: 21em;
  /* 会社の LP（appful.tokyo）の方眼の地：白に、うすいピンクの線（LP の .page-backdrop と同じ色と間隔 52px） */
  --grid-bg: #fff;
  --grid-line: rgba(255, 184, 209, 0.55);
  --grid-size: 3.25em;
  /* 白い縁のふくらんだ字（LP の見出し .hero-bubble）：ピンクの字に、外側の白い縁と、右下にずらしたうすいピンクの影 */
  --bubble-ink: #ff4689;
  --bubble-edge: 0.17em;
  --bubble-shadow: 0.06em 0.07em 0 rgba(255, 70, 137, 0.28);
  /* 遊ぶ前の動画の札：白い縁の角丸 */
  --card-edge: 0.4em;
  --r-stage-card: 1.8em;
  /* きらり：LP のフッターの左上と同じ、4 つの角の星 */
  --sparkle: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  /* 遊んでいる最中のゲームのまわりの影 */
  --shadow-game: 0 0.5em 2.4em rgba(226, 48, 108, 0.12);
  /* ゲームのページの説明の欄（題名・このゲームについて・遊び方・コツ）：1 行は 40 字前後まで（PC）・長文の行間・段の間・枠の下の帯からの間 */
  --read-max: 40em;
  --read-lh: 1.95;
  --read-gap: 2.6em;
  --read-top: 2.4em;
  color-scheme: light;
}

/* VDL V7丸ゴシック（LP の本文の日本語）を読み終わったら切り替える。Adobe Fonts のキットが <html> に wf-active を付ける */
:root.wf-active {
  --font: "Nunito", "vdl-v7marugothic", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

/* ── 下の帯：会社の LP（appful.tokyo）のフッターと同じ形。ピンクの帯に、白いふくらんだロゴ｜合言葉、白い字の案内、点線の下に注意と © ──
   （2026-10-24 ちさとさん「Footer のデザインもっと可愛くして」。LP の右上の黄色い三角は使わない＝「黄色やだ」） */
.ft { font-family: var(--font); font-size: var(--font-size); line-height: 1.75; letter-spacing: var(--ls-body); line-break: strict; box-sizing: border-box; position: relative; margin-top: 2.5em; border-radius: 2em 2em 0 0; background: var(--pink); color: #fff; overflow: hidden; }
.ft-in { position: relative; max-width: 84em; margin: 0 auto; padding: 2.4em 2.4em 2.2em; }
/* LP の左上の白いきらり */
.ft-in::before { content: ""; position: absolute; top: 1.2em; left: 1.2em; width: 1.1em; height: 1.1em; background: #fff; clip-path: var(--sparkle); }
.ft-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8em 1.6em; }
.ft-brand { display: flex; align-items: center; gap: 1em; margin-right: auto; }
.ft-logo { display: inline-flex; gap: 0.25em; font-family: var(--font-brand); font-size: 1.7em; line-height: 1.1; letter-spacing: 0.03em; white-space: nowrap; color: #fff; text-decoration: none; -webkit-text-stroke: calc(var(--puff) * 0.6) currentColor; paint-order: stroke fill; }
.ft-tag { padding-left: 1em; border-left: 1.5px solid rgba(255, 255, 255, 0.6); font-weight: 800; font-size: 0.92em; white-space: nowrap; }
.ft-links { display: flex; flex-wrap: wrap; gap: 0.2em 1.4em; font-weight: 800; font-size: 0.92em; }
.ft-links a, .ft-links button { white-space: nowrap; color: inherit; background: none; border: 0; padding: 0; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; min-height: 2.75em; display: inline-flex; align-items: center; }
.ft-links a:hover, .ft-links button:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.ft-links a:focus-visible, .ft-links button:focus-visible { outline-color: #fff; }
.ft-bottom { margin-top: 1.4em; padding-top: 1.2em; border-top: 1.5px dashed rgba(255, 255, 255, 0.55); text-align: center; }
.ft-note { margin: 0; font-size: 0.85em; font-weight: 700; }
.ft-co { margin: 0.6em 0 0; font-size: 0.85em; font-weight: 800; }


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

@media (max-width: 48em) {
  /* スマホの下の帯：LP のスマホと同じく、まん中にそろえる */
  .ft { border-radius: 1.6em 1.6em 0 0; }
  .ft-in { padding: 2.2em 1em 2em; }
  .ft-top { flex-direction: column; gap: 0.6em; }
  .ft-brand { margin: 0; flex-direction: column; gap: 0.3em; }
  .ft-tag { padding-left: 0; border-left: 0; }
  .ft-links { justify-content: center; gap: 0 1.2em; }
}