/* 学びのコンシェルジュ
 * 明るい・やさしい・静か・信頼感・少し知的。外部フォントは使わず OS 標準の日本語フォント。 */

:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-soft: #eef4f2;
  --ink: #26313b;
  --ink-soft: #5b6670;
  --line: #dcd8cf;
  --accent: #2f6f6a;
  --accent-ink: #ffffff;
  --accent-soft: #d9ebe7;
  --gold: #a57a34;
  --gold-soft: #f4ead7;
  --danger: #a3453a;
  --ok: #2f7a4f;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(38, 49, 59, .06), 0 4px 14px rgba(38, 49, 59, .05);
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b2126;
    --surface: #232b31;
    --surface-soft: #22302f;
    --ink: #e8ebed;
    --ink-soft: #a9b3ba;
    --line: #3a454d;
    --accent: #6fb3aa;
    --accent-ink: #10201e;
    --accent-soft: #2a3f3c;
    --gold: #d6b06a;
    --gold-soft: #3a3326;
    --danger: #e08a80;
    --ok: #7cc79b;
    --shadow: none;
    color-scheme: dark;
  }
}

html { font-size: 17px; -webkit-text-size-adjust: 100%; }
html[data-font="large"] { font-size: 20px; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.8;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

h1 { font-size: 1.5rem; line-height: 1.5; margin: 1.2em 0 .5em; font-weight: 700; }
h2 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
h3 { font-size: 1.05rem; margin: .3em 0 .3em; }
h1:focus, h2:focus { outline: none; }
p { margin: .5em 0; }
a { color: var(--accent); }
code { font-size: .85em; }

.small { font-size: .88rem; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px; z-index: 10; }

/* ---------- header / footer ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 12px; }
.brand { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; line-height: 1.3; }
.brand-ja { font-weight: 700; font-size: 1.02rem; }
.brand-en { font-size: .72rem; color: var(--ink-soft); letter-spacing: .12em; }
.home-link { text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); font-size: .9rem; }

main { min-height: 60vh; padding-bottom: 48px; }

.site-footer { border-top: 1px solid var(--line); padding: 20px 0 32px; color: var(--ink-soft); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 6px; }
.footer-nav a { color: var(--ink-soft); }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 40px 0 16px; }
.hero h1 { font-size: 1.9rem; margin: .1em 0; letter-spacing: .08em; }
.hero.small { padding: 24px 0 4px; }
.hero.small h1 { font-size: 1.5rem; }
.eyebrow { font-size: .8rem; letter-spacing: .14em; color: var(--gold); margin: 1.4em 0 0; }
.hero .eyebrow { margin: 0; }
.lead { font-size: 1.1rem; margin: .2em 0; }
.copy { color: var(--ink-soft); margin: 0; }

/* ---------- concierge voice ---------- */
.concierge { font-size: 1.05rem; }
.concierge.big { font-size: 1.2rem; font-weight: 600; }
.concierge-box { background: var(--surface); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 18px; margin: 12px 0 18px; box-shadow: var(--shadow); }
.concierge-box p { margin: .25em 0; }
.ctx { display: inline-block; font-size: .85rem; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 12px; margin: .2em 0 .6em; }
.notice { background: var(--gold-soft); border-radius: 10px; padding: 8px 12px; font-size: .92rem; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0; box-shadow: var(--shadow); }
.card.soft { background: var(--surface-soft); border-color: transparent; box-shadow: none; }
.card h2 { margin-top: .2em; }
.notice-card { border-color: var(--gold); }

/* ---------- home ---------- */
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.entry { display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 18px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s; position: relative; overflow: hidden; }
.entry::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.e1::before { background: var(--accent); }
.e2::before { background: #6f8fb5; }
.e3::before { background: var(--gold); }
.e4::before { background: #8f7bb0; }
.entry:hover { transform: translateY(-2px); border-color: var(--accent); }
.entry-title { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.entry-sub { font-size: .85rem; color: var(--ink-soft); line-height: 1.6; margin-top: 4px; }
.badge { background: var(--danger); color: #fff; font-size: .78rem; border-radius: 999px; min-width: 1.6em; padding: 0 .5em; text-align: center; line-height: 1.6; }
.banner { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; cursor: pointer; }
.banner strong { display: block; }

/* ---------- buttons ---------- */
.btn { font: inherit; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.big { min-height: 56px; font-size: 1.05rem; padding: 12px 28px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.link { font: inherit; background: none; border: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 8px; font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; align-items: center; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- option list / tiles ---------- */
.option-list { display: grid; gap: 12px; margin: 16px 0; }
.option { font: inherit; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; cursor: pointer; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.option:hover { border-color: var(--accent); }
.option strong { font-size: 1.05rem; }
.option span { color: var(--ink-soft); font-size: .9rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.tile { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-height: 110px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; box-shadow: var(--shadow); }
.tile:hover { border-color: var(--accent); }

.tag { display: inline-block; font-size: .75rem; padding: 1px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-weight: 600; }
.tag.new { background: var(--accent-soft); color: var(--accent); }
.pill { display: inline-block; white-space: nowrap; font-size: .75rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); }
.pill.tried { border-color: var(--accent); color: var(--accent); }
.pill.some { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill.often { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 4px 14px; }

/* ---------- form ---------- */
.field { display: block; margin: 18px 0; }
.field > span { display: block; margin-bottom: 6px; font-size: .92rem; }
.q { font-weight: 600; display: block; margin: 0 0 8px; }
.q.small { font-size: .82rem; margin-bottom: 4px; }
.opt { font-weight: 400; font-size: .75rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin-left: 8px; }
.input { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 46px; }
textarea.input { resize: vertical; line-height: 1.7; }
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.input.num { width: 5.5em; display: inline-block; margin-left: 4px; }
.count-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span, .chip-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .95rem; line-height: 1.4; }
.chip-btn { font: inherit; color: var(--ink); cursor: pointer; }
.chip.on span, .chip-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.chips-sm .chip span { min-height: 36px; padding: 4px 12px; font-size: .85rem; }
.chips-scale { justify-content: space-between; flex-wrap: nowrap; }
.chips-scale .chip { flex: 1; }
.chips-scale .chip span { justify-content: center; width: 100%; padding: 8px 0; }
.scale-labels { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-soft); margin-top: 4px; }

/* ---------- recommend ---------- */
.cands { display: grid; gap: 14px; }
.cand { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.cand h3 { margin-top: 6px; font-size: 1.15rem; }
.cand p { margin: .3em 0; }
.cand .reason { font-size: .88rem; color: var(--ink-soft); }
.cand .btn { margin-top: 8px; }
.academic { font-size: .8em; color: var(--ink-soft); font-weight: 400; margin-left: 4px; }
.others { margin-top: 12px; }

.plain-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.row-btn { font: inherit; color: var(--ink); width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; min-height: 52px; }
.row-btn:hover { border-color: var(--accent); }
.row-btn > span:first-child { display: flex; flex-direction: column; }
.row-btn small { font-size: .75rem; }

/* ---------- run ---------- */
.run-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 20px; font-weight: 600; }
.run-prog { color: var(--ink-soft); font-size: .9rem; white-space: nowrap; }
.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 8px 0 10px; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-top: 10px; }
.step-text { font-size: 1.1rem; font-weight: 600; line-height: 1.7; }
.step-info { background: var(--surface-soft); border-color: transparent; box-shadow: none; }
.step-do { position: relative; padding-left: 52px; }
.do-mark { position: absolute; left: 18px; top: 22px; color: var(--accent); font-size: .9rem; }
.list-row { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.list-no { width: 1.8em; flex: none; text-align: center; color: var(--ink-soft); font-size: .9rem; }
.check-item { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.check-item:first-of-type { border-top: 0; }
.check-q { font-weight: 600; margin: 0; }
.check-item .chips { margin: 8px 0; }
.timer { text-align: center; margin: 16px 0; }
.timer-num { font-size: 2.6rem; font-variant-numeric: tabular-nums; font-weight: 300; letter-spacing: .05em; }

.reveal { padding: 28px 20px; }
.reveal-name { font-size: 1.5rem; font-weight: 700; margin: .2em 0 .6em; }
.reveal-academic { font-size: 1.3rem; font-weight: 700; color: var(--accent); margin: .2em 0; }

/* ---------- exploration ---------- */
.words { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; }
.word { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; font-size: 1.3rem; }
.word .w { font-weight: 700; }
.word .eq { color: var(--ink-soft); margin: 0 .4em; }
.words.visual .word { color: #fff; border: 0; font-size: 1.5rem; }
.words.visual .word .eq { color: rgba(255, 255, 255, .8); }
.word.c1 { background: #3f7f6e; }
.word.c2 { background: #b0703a; transform: rotate(-1.5deg); }
.word.c3 { background: #4f6fa0; transform: rotate(1deg); }
.word.c4 { background: #8a5a8e; }
.beat { display: flex; justify-content: center; gap: 14px; margin: 14px 0; }
.beat span { width: 18px; height: 18px; border-radius: 50%; background: var(--line); }
.beat.on span { animation: beat 2.4s infinite; }
.beat.on span:nth-child(2) { animation-delay: .6s; }
.beat.on span:nth-child(3) { animation-delay: 1.2s; }
.beat.on span:nth-child(4) { animation-delay: 1.8s; }
@keyframes beat { 0%, 20% { background: var(--accent); transform: scale(1.35); } 30%, 100% { background: var(--line); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .beat.on span { animation-duration: 4.8s; } .entry { transition: none; } }
.note-inputs .field { margin: 10px 0; }
.quiz .step-text { margin-top: 0; }
.answer-list { list-style: none; padding: 0; }
.answer-list li { padding: 4px 0; }
.answer-list .ok::before { content: "○ "; color: var(--ok); font-weight: 700; }
.answer-list .ng::before { content: "・ "; color: var(--ink-soft); }
.record-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.record-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; }

/* ---------- drawer ---------- */
.filters { display: grid; gap: 10px; margin: 12px 0 4px; }
.drawer-group h2 { margin-bottom: 0; }
.hist { list-style: none; padding: 0; display: grid; gap: 10px; }
.hist li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.hist p { margin: .2em 0; }
details { margin: 14px 0; }
summary { cursor: pointer; color: var(--accent); }
.src p { margin-top: 6px; }

/* ---------- review ---------- */
.review-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.review-item p { margin: .1em 0; }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.review-actions .btn { min-height: 42px; padding: 6px 14px; }

/* ---------- about ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .82rem; min-width: 560px; }
th, td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
th { color: var(--ink-soft); font-weight: 600; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: calc(100% - 32px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: .92rem; z-index: 20; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  html { font-size: 16px; }
  html[data-font="large"] { font-size: 19px; }
  .home-grid { grid-template-columns: 1fr; }
  .entry { min-height: 110px; }
  .hero h1 { font-size: 1.6rem; }
  .actions .btn.big { width: 100%; }
  .step { padding: 16px; }
  .step-do { padding-left: 40px; }
  .do-mark { left: 14px; top: 18px; }
  .words.visual .word, .word { font-size: 1.1rem; padding: 12px 6px; }
  .chip span { padding: 8px 12px; }
}

/* ---------- 学年別の表示 ---------- */
.grade-list .option { align-items: center; text-align: center; min-height: 64px; justify-content: center; }
.grade-list .option.current { border-color: var(--accent); background: var(--accent-soft); }
.grade-link { color: var(--ink-soft); }
.home-grid.simple .entry { min-height: 110px; justify-content: center; }
.home-grid.simple .entry-title { font-size: 1.3rem; }
.more-goals { margin-top: 8px; }
.why { font-size: .9rem; margin: .4em 0; }
.why span { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 0 6px; margin-right: 8px; }
.combo { font-size: .85rem; color: var(--accent); }
.face-q { font-size: 1.6rem; margin: 1em 0 .8em; }
.faces { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; }
.face { font: inherit; font-size: 1.2rem; color: var(--ink); display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 20px; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; cursor: pointer; box-shadow: var(--shadow); text-align: left; }
.face:hover, .face:focus-visible { border-color: var(--accent); }
.face-icon { font-size: 2.2rem; line-height: 1; }

.src-list { padding-left: 1.4em; display: grid; gap: 12px; }
.src-list a { word-break: break-all; }

.cloud-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.3rem; letter-spacing: .08em; margin: .2em 0; }

/* ---------- 表紙：案1「ひらく引き出し」 ---------- */
.cover { text-align: center; padding: 12px 0 8px; }
.cover-drawers {
  --cv-ink: #3b3a45;
  --cv-wood: #e2b887;
  --cv-wood-dark: #c9975f;
  --cv-slot: #5a4332;
}
@media (prefers-color-scheme: dark) { .cover-drawers { --cv-wood: #c89a68; --cv-wood-dark: #a97b4b; --cv-slot: #2c2119; } }
.cv-stage {
  margin: 8px auto 0; max-width: 380px;
  background: radial-gradient(closest-side, var(--gold-soft), transparent 75%);
  border-radius: 50%;
}
.cv-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cv-body { fill: var(--cv-wood); stroke: var(--cv-wood-dark); stroke-width: 3; }
.cv-top { fill: var(--cv-wood-dark); }
.cv-leg { fill: var(--cv-wood-dark); }
.cv-shadow { fill: rgba(0, 0, 0, .08); }
.cv-slot { fill: var(--cv-slot); }
.cv-front-rect { stroke: rgba(0, 0, 0, .12); stroke-width: 1.5; }
.cv-front-inset { fill: rgba(255, 255, 255, .28); }
.cv-knob { fill: #b8862f; stroke: rgba(0, 0, 0, .15); }
.cv-glow { fill: url(#cvGlow); opacity: 0; }
.cv-icon-bg { fill: #fff; stroke: rgba(59, 58, 69, .15); stroke-width: 1.5; }
.cv-icon { opacity: 0; transform: scale(.4); }
.cv-drawer { cursor: pointer; outline: none; }
.cv-drawer:focus-visible .cv-front-rect { stroke: var(--gold); stroke-width: 3; }
.cv-front, .cv-icon { transform-box: fill-box; transform-origin: center; }
.cv-spark { fill: var(--gold); opacity: 0; }

.cv-svg.play .cv-drawer .cv-front { animation: cv-open .6s cubic-bezier(.2, .9, .3, 1.3) var(--d) both; }
.cv-svg.play .cv-drawer .cv-glow { animation: cv-glow-in .6s ease-out var(--d) both, cv-pulse 3.2s ease-in-out calc(var(--d) + .6s) infinite; }
.cv-svg.play .cv-drawer .cv-icon { animation: cv-fly .85s cubic-bezier(.2, .8, .3, 1.15) calc(var(--d) + .15s) both, cv-bob 3s ease-in-out calc(var(--d) + 1s) infinite; }
.cv-svg.play .cv-spark { animation: cv-twinkle var(--s) ease-in-out 2.2s infinite; }
/* タップで しまう／ひらく */
.cv-svg.play .cv-drawer.closed .cv-front { animation: cv-close .35s ease-in both; }
.cv-svg.play .cv-drawer.closed .cv-glow { animation: cv-glow-out .3s ease-in both; }
.cv-svg.play .cv-drawer.closed .cv-icon { animation: cv-back .4s ease-in both; }
.cv-svg.play .cv-drawer.open .cv-front { animation: cv-open .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.cv-svg.play .cv-drawer.open .cv-glow { animation: cv-glow-in .5s ease-out both, cv-pulse 3.2s ease-in-out .5s infinite; }
.cv-svg.play .cv-drawer.open .cv-icon { animation: cv-fly .7s cubic-bezier(.2, .8, .3, 1.15) .1s both, cv-bob 3s ease-in-out .8s infinite; }

@keyframes cv-open { from { transform: none; } to { transform: translateY(11px) scale(1.08); } }
@keyframes cv-close { from { transform: translateY(11px) scale(1.08); } to { transform: none; } }
@keyframes cv-glow-in { from { opacity: 0; } to { opacity: .9; } }
@keyframes cv-glow-out { from { opacity: .9; } to { opacity: 0; } }
@keyframes cv-pulse { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
@keyframes cv-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
}
@keyframes cv-bob {
  0%, 100% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
  50% { opacity: 1; transform: translate(var(--tx), calc(var(--ty) - 5px)) scale(1); }
}
@keyframes cv-back {
  from { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
  to { opacity: 0; transform: translate(0, 0) scale(.4); }
}
@keyframes cv-twinkle { 0%, 100% { opacity: 0; transform-origin: center; } 50% { opacity: .9; } }

.cv-eyebrow { font-size: .78rem; letter-spacing: .16em; color: var(--gold); margin: 10px 0 0; }
.cv-title { font-size: 2rem; letter-spacing: .1em; margin: .1em 0 .1em; }
.cv-lead { font-size: 1.15rem; margin: .2em 0; }
.cv-copy { color: var(--ink-soft); margin: 0 0 18px; }
.cv-start { min-width: 220px; }
.cv-hint { font-size: .8rem; color: var(--ink-soft); margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .cv-svg.play .cv-drawer .cv-front, .cv-svg.play .cv-drawer .cv-glow, .cv-svg.play .cv-drawer .cv-icon,
  .cv-svg.play .cv-drawer.open .cv-front, .cv-svg.play .cv-drawer.open .cv-glow, .cv-svg.play .cv-drawer.open .cv-icon,
  .cv-svg.play .cv-drawer.closed .cv-front, .cv-svg.play .cv-drawer.closed .cv-glow, .cv-svg.play .cv-drawer.closed .cv-icon {
    animation-duration: .01s; animation-delay: 0s; animation-iteration-count: 1;
  }
  .cv-svg.play .cv-spark { animation: none; }
}
@media (max-width: 560px) { .cv-title { font-size: 1.6rem; } .cv-stage { max-width: 320px; } }

/* ---------- 表紙：案2「コンシェルジュの呼び鈴」 ---------- */
.cover-bell { --cv2-wall: #f3e9dc; --cv2-wood: #b98a5a; --cv2-wood-light: #dcb88c; --cv2-door: #7fae9e; }
@media (prefers-color-scheme: dark) { .cover-bell { --cv2-wall: #3a342d; --cv2-wood: #9c7248; --cv2-wood-light: #b8905f; --cv2-door: #5f8c7e; } }
.cv2-wall { fill: var(--cv2-wall); }
.cv2-frame { fill: var(--cv2-wood); }
.cv2-door-face { fill: var(--cv2-door); stroke: rgba(0, 0, 0, .15); stroke-width: 1.5; }
.cv2-panel { fill: rgba(255, 255, 255, .16); stroke: rgba(0, 0, 0, .12); }
.cv2-knob { fill: #e3b94f; stroke: #a37a2c; }
.cv2-counter-top { fill: var(--cv2-wood); }
.cv2-counter { fill: var(--cv2-wood-light); stroke: rgba(0, 0, 0, .1); }
.cv2-counter-panel { fill: rgba(255, 255, 255, .18); stroke: rgba(0, 0, 0, .1); }
.cv2-plate { fill: #e3b94f; stroke: #a37a2c; }
.cv2-plate-text { font: 700 8.5px var(--font); letter-spacing: .14em; fill: #5a4332; }
.cv2-glyph { font: 700 16px var(--font); fill: #3b3a45; }
.cv2-bell { cursor: pointer; outline: none; }
.cv2-bell:focus-visible .cv2-dome path { stroke: var(--gold); stroke-width: 3; }
.cv2-wave { fill: none; stroke: #e3b94f; stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.cv2-pointer { fill: var(--gold); animation: cv2-point 1.2s ease-in-out infinite; }
.cv2-chin { font: 700 17px var(--font); fill: #c9982f; opacity: 0; }
.cv2-spill { opacity: 0; transition: opacity .9s ease .2s; }
.cv2-rays { transform-box: view-box; transform-origin: 180px 60px; }

.cv2-door { transform-box: fill-box; transition: transform .95s cubic-bezier(.3, .8, .25, 1), filter .95s; }
.cv2-door-l { transform-origin: left center; }
.cv2-door-r { transform-origin: right center; }
.cv2-press, .cv2-dome, .cv2-wave, .cv2-token { transform-box: fill-box; }
.cv2-press { transform-origin: center; }
.cv2-dome { transform-origin: bottom center; }
.cv2-wave { transform-origin: center bottom; }
.cv2-token { opacity: 0; transform: scale(.3); transform-origin: center; }

.cv2-svg.rung .cv2-pointer { display: none; }
.cv2-svg.ring .cv2-press { animation: cv2-press .3s ease; }
.cv2-svg.ring .cv2-dome { animation: cv2-wobble .7s ease; }
.cv2-svg.ring .cv2-wave { animation: cv2-wave 1s ease-out var(--w) both; }
.cv2-svg.ring .cv2-chin { animation: cv2-chin 1.3s ease both; }
.cv2-svg.open .cv2-door-l { transform: scaleX(.16) skewY(-7deg); filter: brightness(.82); }
.cv2-svg.open .cv2-door-r { transform: scaleX(.16) skewY(7deg); filter: brightness(.82); }
.cv2-svg.open .cv2-spill { opacity: .5; }
.cv2-svg.open .cv2-rays { animation: cv2-rays 6s ease-in-out infinite; }
.cv2-svg.open .cv2-token { animation: cv2-out .9s cubic-bezier(.2, .8, .3, 1.2) calc(var(--d) + .45s) both, cv2-bob 3.2s ease-in-out calc(var(--d) + 1.4s) infinite; }

@keyframes cv2-point { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes cv2-press { 0%, 100% { transform: none; } 40% { transform: translateY(4px); } }
@keyframes cv2-wobble { 0%, 100% { transform: none; } 20% { transform: rotate(-5deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } }
@keyframes cv2-wave { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35) translateY(-6px); } }
@keyframes cv2-chin { 0% { opacity: 0; transform: translateY(6px); } 20%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes cv2-rays { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes cv2-out {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
}
@keyframes cv2-bob {
  0%, 100% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
  50% { opacity: 1; transform: translate(var(--tx), calc(var(--ty) - 5px)) scale(1); }
}

/* 表紙の切りかえ */
.cv-switch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 14px 0 0; font-size: .8rem; color: var(--ink-soft); }
.cv-switch-btn { font: inherit; font-size: .8rem; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; min-height: 32px; cursor: pointer; }
.cv-switch-btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .cv2-door { transition-duration: .01s; }
  .cv2-svg.open .cv2-token { animation: cv2-out .01s both; }
  .cv2-svg.open .cv2-rays, .cv2-pointer { animation: none; }
}

/* 表紙ごとのひとこと */
.cv-tagline { font-size: 1.05rem; font-weight: 600; color: var(--accent); margin: 6px 0 0; letter-spacing: .08em; }

/* ---------- 表紙：案3「いくつもの道がある地図」 ---------- */
.cv3-paper { fill: #fbf3e1; stroke: #e2cfa6; stroke-width: 2; }
.cv3-border { fill: none; stroke: #e2cfa6; stroke-width: 1.2; stroke-dasharray: 4 5; }
.cv3-river { fill: none; stroke: #a9d2ee; stroke-width: 6; stroke-linecap: round; opacity: .8; }
.cv3-cloud ellipse { fill: #fff; opacity: .9; }
.cv3-cloud { animation: cv3-drift 14s ease-in-out var(--c) infinite; }
.cv3-tree { fill: #8cc68a; stroke: #6aa56a; stroke-width: 1; }
.cv3-hill { fill: #cfe8b8; stroke: #9cc58a; stroke-width: 1.5; }
.cv3-tower { fill: #fff; stroke: #3b3a45; stroke-width: 1.3; stroke-linejoin: round; }
.cv3-beam { opacity: .8; transform-box: view-box; transform-origin: 180px 61px; animation: cv3-beam 5s ease-in-out infinite; }
.cv3-compass circle { fill: #fff; stroke: #c9a24a; stroke-width: 1.5; }
.cv3-compass path { fill: #c9a24a; }
.cv3-compass text { font: 700 8px var(--font); fill: #a37a2c; }
.cv3-route { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; animation: cv3-draw 1.3s ease-out var(--d) forwards; transition: stroke-width .3s, opacity .3s; }
.cv3-route.active { stroke-width: 7; opacity: 1; }
.cv3-hit { fill: none; stroke: transparent; stroke-width: 20; cursor: pointer; outline: none; }
.cv3-label { opacity: 0; animation: cv-fade .5s ease 1.8s forwards; pointer-events: none; }
.cv3-label text { font: 700 10.5px var(--font); fill: #3b3a45; }
.cv3-label.active rect { stroke-width: 3.5; }
.cv3-start { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }
.cv3-start-text { font: 700 11px var(--font); fill: #5a4332; }
@keyframes cv3-draw { to { stroke-dashoffset: 0; } }
@keyframes cv3-beam { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } }
@keyframes cv3-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes cv-fade { to { opacity: 1; } }

/* ---------- 表紙：案4「ことばの星座」 ---------- */
.cv4-dot { fill: #fff; opacity: .5; animation: cv4-twinkle var(--t) ease-in-out var(--td) infinite; }
.cv4-shoot { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 20 120; stroke-dashoffset: 20; opacity: 0; animation: cv4-shoot 7s ease-in 2.5s infinite; }
.cv4-edge { stroke: #cfd7ff; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .75; }
.cv4-svg.play .cv4-edge { animation: cv3-draw .7s ease-out var(--d) forwards; }
.cv4-edge.flash { animation: cv3-draw .01s forwards, cv4-flash 1.2s ease; }
.cv4-star { cursor: pointer; outline: none; opacity: 0; }
.cv4-svg.play .cv4-star { animation: cv-fade .6s ease var(--d) forwards; }
.cv4-core { fill: #fff6c8; }
.cv4-halo { transform-box: fill-box; transform-origin: center; animation: cv4-halo 3.4s ease-in-out infinite; }
.cv4-word { font: 700 10.5px var(--font); fill: #e8ecff; letter-spacing: .05em; }
.cv4-star.glow .cv4-halo { animation: cv4-pop 1.2s ease; }
.cv4-star:focus-visible .cv4-core { fill: var(--gold); }
@keyframes cv4-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
@keyframes cv4-halo { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.35); opacity: .5; } }
@keyframes cv4-pop { 0% { transform: scale(1); } 40% { transform: scale(2.6); opacity: 1; } 100% { transform: scale(1); } }
@keyframes cv4-flash { 0% { stroke: #fff; stroke-width: 1.4; opacity: .75; } 30% { stroke: #ffe58a; stroke-width: 3.2; opacity: 1; } 100% { stroke: #cfd7ff; stroke-width: 1.4; opacity: .75; } }
@keyframes cv4-shoot { 0% { opacity: 0; transform: translate(0, 0); } 5% { opacity: 1; } 18% { opacity: 0; transform: translate(150px, 60px); } 100% { opacity: 0; transform: translate(150px, 60px); } }

/* ---------- 表紙：案5「時間と季節で変わる風景」 ---------- */
.cv5-svg { --cv5-dim: 1; }
.cv5-land { transition: filter .6s; }
.cv5-svg[data-time="evening"] .cv5-land { filter: brightness(.88) saturate(1.1); }
.cv5-svg[data-time="night"] .cv5-land { filter: brightness(.5) saturate(.8); }
.cv5-stars circle { fill: #fff; }
.cv5-stars { opacity: 0; transition: opacity .6s; }
.cv5-svg[data-time="night"] .cv5-stars { opacity: .9; }
.cv5-sun { transition: transform .8s ease; }
.cv5-sun-body { fill: #ffd66b; }
.cv5-sun-halo { fill: #fff2a8; opacity: .35; }
.cv5-svg[data-time="evening"] .cv5-sun-body { fill: #ff9f5a; }
.cv5-svg[data-time="night"] .cv5-sun-body { fill: #fff3c4; }
.cv5-svg[data-time="night"] .cv5-sun-halo { opacity: .15; }
.cv5-clouds ellipse { fill: #fff; opacity: .85; }
.cv5-svg[data-time="night"] .cv5-clouds { opacity: .15; }
.cv5-cloud { animation: cv3-drift 16s ease-in-out infinite; }
.cv5-road { fill: none; stroke: #f3e0b8; stroke-width: 10; stroke-linecap: round; }
.cv5-window { fill: #bfe3ff; transition: fill .6s; }
.cv5-svg[data-time="evening"] .cv5-window, .cv5-svg[data-time="night"] .cv5-window { fill: #ffd66b; filter: drop-shadow(0 0 4px #ffd66b); }
.cv5-svg[data-season="winter"] .cv5-canopy circle { stroke: #cfd9e3; stroke-width: 1.2; }
.cv5-walker { animation: cv5-walk 9s ease-in-out infinite; }
.cv5-p { transform: translate(var(--x), -10px); animation: cv5-fall var(--du) linear var(--dl) infinite; }
.cv5-pi { animation: cv5-sway 2.6s ease-in-out infinite; }
.cv5-svg[data-season="summer"] .cv5-p { animation-name: cv5-float; }
.cv5-fly { filter: drop-shadow(0 0 3px #f4ff9a); animation: cv4-twinkle 1.8s ease-in-out infinite; }
.cv5-caption { font-size: .85rem; color: var(--ink-soft); margin: 6px 0 4px; }
.cv5-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin: 4px 0; font-size: .78rem; color: var(--ink-soft); }
.cv5-row > span { margin-right: 4px; }
@keyframes cv5-fall { 0% { transform: translate(var(--x), -10px); } 100% { transform: translate(calc(var(--x) + 30px), 320px); } }
@keyframes cv5-float { 0% { transform: translate(var(--x), 290px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc(var(--x) + 20px), 150px); opacity: 0; } }
@keyframes cv5-sway { 0%, 100% { transform: translateX(-5px) rotate(-20deg); } 50% { transform: translateX(5px) rotate(20deg); } }
@keyframes cv5-walk { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -18px); } }

@media (prefers-reduced-motion: reduce) {
  .cv3-route, .cv4-svg.play .cv4-edge { animation-duration: .01s; animation-delay: 0s; }
  .cv3-label, .cv4-svg.play .cv4-star { animation-delay: 0s; animation-duration: .01s; }
  .cv3-beam, .cv3-cloud, .cv4-dot, .cv4-shoot, .cv4-halo, .cv5-cloud, .cv5-walker, .cv5-p, .cv5-pi { animation: none; }
  .cv5-parts { display: none; }
}

/* 表紙を選ぶ */
.cv-switch-note { font-size: .78rem; color: var(--ink-soft); margin: 6px 0 0; }
.cv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; }
.cv-thumb { font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 8px 8px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cv-thumb:hover { border-color: var(--accent); }
.cv-thumb.on { border-color: var(--accent); background: var(--accent-soft); }
.cv-thumb-art { display: block; width: 100%; aspect-ratio: 360 / 320; overflow: hidden; border-radius: 10px; pointer-events: none; }
.cv-thumb-art svg { width: 100%; height: 100%; display: block; }
.cv-thumb-dice { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 700; color: var(--gold); background: var(--gold-soft); }
.cv-thumb-name { font-size: .85rem; font-weight: 600; }
.cv-thumb-sub { font-size: .72rem; color: var(--ink-soft); }
.cv-thumb-on { font-size: .72rem; color: var(--accent); font-weight: 700; }
.cv-thumb-svg .cv3-walker { display: none; }
/* 見本は動かさず、ひらいた（完成した）状態で見せる */
.cv-thumb-svg *, .cv-thumb-svg { animation: none !important; transition: none !important; }
.cv-thumb-svg .cv-front { transform: translateY(11px) scale(1.08); }
.cv-thumb-svg .cv-glow { opacity: .9; }
.cv-thumb-svg .cv-icon { opacity: 1; transform: translate(var(--tx), var(--ty)); }
.cv-thumb-svg .cv-spark { opacity: .7; }
.cv-thumb-svg .cv2-token { opacity: 1; transform: translate(var(--tx), var(--ty)); }
.cv-thumb-svg .cv2-pointer { display: none; }
.cv-thumb-svg .cv3-route { stroke-dashoffset: 0; }
.cv-thumb-svg .cv3-label { opacity: 1; }
.cv-thumb-svg .cv4-edge { stroke-dashoffset: 0; }
.cv-thumb-svg .cv4-star { opacity: 1; }
.cv-thumb-svg .cv5-p { transform: translate(var(--x), calc(var(--x) * .75)); }

.policy h2 { font-size: 1.02rem; }
.policy ul { padding-left: 1.3em; }

/* お試し：作り方のコツとヒント */
.craft-tips { background: var(--gold-soft); border-color: transparent; box-shadow: none; }
.hint-row > span { display: block; font-weight: 600; margin-bottom: 4px; }
.hint-btn { padding: 4px 0; }
.hint-text { background: var(--surface-soft); border-radius: 8px; padding: 6px 10px; margin: 4px 0 0; }