/* フォニックス大図鑑 — 共通スタイル（ステッカー風：太い線・ずらし影・あざやかな色） */
:root {
  --ink: #1d1838;
  --ink2: #4a4566;
  --mute: #7a7593;
  --paper: #fff7ea;
  --paper2: #fdf0d8;
  --card: #ffffff;
  --line: 3px solid var(--ink);
  --sh: 5px 5px 0 var(--ink);
  --sh-s: 3px 3px 0 var(--ink);
  --r: 20px;
  --pink: #ff4f79;
  --red: #ff5d5d;
  --orange: #ff9f1c;
  --yellow: #ffd23f;
  --green: #2ec27e;
  --mint: #3ddc97;
  --sky: #2ec4f1;
  --blue: #3a6bff;
  --purple: #7b2ff7;
  --violet: #c03fd6;
  --gray: #6c757d;
  --hl: #ff3d6e;
  --en: 'Fredoka', 'Zen Maru Gothic', system-ui, sans-serif;
  --ja: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --ipa: 'Noto Sans', 'Doulos SIL', 'Charis SIL', 'Lucida Sans Unicode', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ja); font-weight: 500;
  line-height: 1.75; font-size: 16px;
  background-image: radial-gradient(circle at 1px 1px, rgba(29, 24, 56, .09) 1.2px, transparent 0);
  background-size: 22px 22px;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
.en { font-family: var(--en); }
.ipa { font-family: var(--ipa); font-weight: 500; letter-spacing: .02em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 780px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* モード：こども / おとな */
body.kid .adult-only, body.adult .kid-only { display: none !important; }

/* ===== ヘッダー ===== */
.hd { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: var(--line); }
.hd-in { display: flex; align-items: center; gap: 14px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo-mark { display: flex; gap: 2px; }
.logo-mark b { font-family: var(--en); font-weight: 700; font-size: 19px; width: 26px; height: 30px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); color: #fff; line-height: 1; }
.logo-mark b:nth-child(1) { background: var(--red); transform: rotate(-6deg); }
.logo-mark b:nth-child(2) { background: var(--yellow); color: var(--ink); transform: rotate(4deg); }
.logo-mark b:nth-child(3) { background: var(--sky); transform: rotate(-3deg); }
.logo-t { line-height: 1.1; }
.logo-t small { display: block; font-family: var(--en); font-size: 10.5px; letter-spacing: .14em; color: var(--mute); font-weight: 600; }
.logo-t strong { font-size: 17px; font-weight: 900; }
.nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; padding: 7px 11px; border-radius: 12px; font-weight: 700; font-size: 14.5px; white-space: nowrap; border: 2.5px solid transparent; }
.nav a:hover { background: #fff; border-color: var(--ink); }
.nav a.on { background: var(--yellow); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.mode { display: flex; border: var(--line); border-radius: 999px; overflow: hidden; flex-shrink: 0; box-shadow: var(--sh-s); background: #fff; }
.mode button { border: 0; background: none; padding: 5px 12px; font-weight: 800; font-size: 13.5px; }
body.kid .mode .m-kid { background: var(--pink); color: #fff; }
body.adult .mode .m-adult { background: var(--ink); color: #fff; }
@media (max-width: 900px) {
  .hd-in { height: auto; flex-wrap: wrap; padding: 8px 0 0; gap: 8px; }
  .nav { order: 3; width: 100%; margin: 0 -16px; padding: 4px 12px 8px; }
  .mode { margin-left: auto; }
  .logo-t strong { font-size: 15px; }
}

/* ===== 共通部品 ===== */
.card { background: var(--card); border: var(--line); border-radius: var(--r); box-shadow: var(--sh); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: var(--line); border-radius: 16px; padding: 11px 20px; font-weight: 800; background: #fff; box-shadow: var(--sh-s); text-decoration: none; transition: transform .08s, box-shadow .08s; font-size: 16px; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn.pri { background: var(--pink); color: #fff; }
.btn.yel { background: var(--yellow); }
.btn.blue { background: var(--blue); color: #fff; }
.btn.grn { background: var(--green); color: #fff; }
.btn.ink { background: var(--ink); color: #fff; }
.btn.big { font-size: 20px; padding: 15px 28px; border-radius: 20px; }
.btn.sm { font-size: 14px; padding: 6px 12px; border-radius: 12px; }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 11px; font-weight: 800; font-size: 13px; background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button.chip { cursor: pointer; }
.chips button.chip.on { background: var(--ink); color: #fff; }
.tag { display: inline-block; font-size: 12px; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: var(--ink); color: #fff; }
.sec { margin: 56px 0; }
.sec-h { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.sec-h h2 { margin: 0; font-size: clamp(24px, 4vw, 34px); font-weight: 900; line-height: 1.25; }
.sec-h .en-s { font-family: var(--en); font-weight: 700; color: var(--pink); letter-spacing: .1em; font-size: 14px; display: block; }
.sec-h p { margin: 0; color: var(--ink2); }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.crumb { font-size: 13.5px; color: var(--mute); margin: 18px 0 8px; font-weight: 700; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.lead { font-size: 17px; color: var(--ink2); }
.box { border: var(--line); border-radius: 18px; padding: 16px 20px; background: #fff; margin: 18px 0; }
.box.kid { background: #fff0f5; }
.box.adult { background: #eef3ff; }
.box h3, .box h4 { margin: 0 0 6px; }
.play { width: 46px; height: 46px; border-radius: 50%; border: var(--line); background: var(--yellow); box-shadow: var(--sh-s); display: inline-grid; place-items: center; flex-shrink: 0; padding: 0; }
.play svg { width: 20px; height: 20px; }
.play.sm { width: 34px; height: 34px; box-shadow: 2px 2px 0 var(--ink); border-width: 2.5px; }
.play.sm svg { width: 14px; height: 14px; }
.play.on { background: var(--pink); animation: pulse .6s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
.say { display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--ink); border-radius: 999px; padding: 0 9px 0 6px; background: #fffbe6; font-family: var(--en); font-weight: 600; cursor: pointer; line-height: 1.6; margin: 0 2px; font-size: .95em; }
.say::before { content: '🔊'; font-size: .8em; }
.say:hover { background: var(--yellow); }
.say.on { background: var(--pink); color: #fff; }

/* フッター */
.ft { margin-top: 80px; border-top: var(--line); background: var(--ink); color: #fff; padding: 40px 0 60px; font-size: 14px; }
.ft a { color: #fff; }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.ft h4 { margin: 0 0 8px; color: var(--yellow); }
.ft ul { list-style: none; padding: 0; margin: 0; }
.ft li { margin: 4px 0; }
.ft .note { color: #bdb8d6; margin-top: 28px; font-size: 12.5px; }

/* ===== ホーム ===== */
.hero { position: relative; overflow: hidden; border-bottom: var(--line); background: linear-gradient(180deg, #ffe9f0 0%, #fff7ea 100%); }
.hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding: 50px 16px 60px; }
.hero h1 { font-size: clamp(34px, 6.4vw, 66px); line-height: 1.12; margin: 0 0 14px; font-weight: 900; letter-spacing: -.01em; }
.hero h1 .big-en { font-family: var(--en); display: block; font-size: .62em; letter-spacing: .04em; color: var(--pink); }
.hero h1 mark { background: linear-gradient(transparent 62%, var(--yellow) 62%); color: inherit; padding: 0 4px; }
.hero .lead { font-size: 18px; max-width: 34em; }
.hero-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.hero-stats div { background: #fff; border: var(--line); border-radius: 16px; padding: 6px 14px; box-shadow: var(--sh-s); text-align: center; }
.hero-stats b { display: block; font-family: var(--en); font-size: 26px; line-height: 1.1; }
.hero-stats span { font-size: 12.5px; font-weight: 800; color: var(--ink2); }
.hero-art { position: relative; aspect-ratio: 1; }
.hero-art img.main { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(6px 6px 0 rgba(29, 24, 56, .9)); }
.float-l { position: absolute; font-family: var(--en); font-weight: 700; font-size: 44px; width: 70px; height: 70px; display: grid; place-items: center; border: var(--line); border-radius: 18px; box-shadow: var(--sh); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(6deg); } }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; }
.door { text-align: left; border: var(--line); border-radius: 22px; padding: 14px 18px; box-shadow: var(--sh); background: #fff; transition: transform .1s; }
.door:hover { transform: translate(-2px, -2px) rotate(-1deg); }
.door b { display: block; font-size: 20px; font-weight: 900; }
.door span { font-size: 13.5px; color: var(--ink2); }
.door.kid { background: #ffd6e2; }
.door.adult { background: #d9e3ff; }
body.kid .door.kid, body.adult .door.adult { outline: 4px solid var(--pink); outline-offset: 3px; }
@media (max-width: 820px) { .hero-in { grid-template-columns: 1fr; padding-top: 28px; } .hero-art { max-width: 380px; margin: 0 auto; width: 100%; } }

/* 冒険マップ（ステージ） */
.map { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.stage { position: relative; text-decoration: none; border: var(--line); border-radius: 26px; padding: 16px 16px 14px; background: var(--c); box-shadow: var(--sh); overflow: hidden; transition: transform .12s; color: var(--ink); min-height: 172px; display: flex; flex-direction: column; }
.stage:hover { transform: translate(-2px, -3px) rotate(-.6deg); }
.stage .no { font-family: var(--en); font-weight: 700; font-size: 13px; letter-spacing: .12em; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 0 10px; align-self: flex-start; }
.stage h3 { margin: 8px 0 2px; font-size: 21px; font-weight: 900; line-height: 1.25; }
.stage .s-en { font-family: var(--en); font-weight: 600; font-size: 13px; opacity: .8; }
.stage .s-g { margin-top: auto; font-family: var(--en); font-size: 20px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 5px; padding-top: 10px; }
.stage .s-g i { font-style: normal; background: rgba(255, 255, 255, .85); border: 2px solid var(--ink); border-radius: 9px; padding: 0 7px; font-size: 15px; }
.stage .prog { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 900; background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 9px; }

/* 機能カード */
.feat { text-decoration: none; display: flex; flex-direction: column; overflow: hidden; transition: transform .12s; }
.feat:hover { transform: translate(-2px, -3px); }
.feat .f-img { aspect-ratio: 16 / 9; background: var(--c, var(--paper2)); border-bottom: var(--line); display: grid; place-items: center; font-size: 64px; overflow: hidden; }
.feat .f-img img { width: 100%; height: 100%; object-fit: cover; }
.feat .f-b { padding: 14px 16px 16px; }
.feat h3 { margin: 0 0 4px; font-size: 19px; font-weight: 900; line-height: 1.35; }
.feat p { margin: 0; font-size: 14px; color: var(--ink2); line-height: 1.6; }

/* ===== ユニット一覧 ===== */
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.unit-c { text-decoration: none; border: var(--line); border-radius: 18px; background: #fff; box-shadow: var(--sh-s); padding: 10px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; transition: transform .1s; }
.unit-c:hover { transform: translate(-1px, -2px); background: var(--c); }
.unit-c .u-g { font-family: var(--en); font-weight: 700; font-size: 34px; line-height: 1.2; }
.unit-c .u-k { font-size: 12.5px; color: var(--ink2); font-weight: 700; }
.unit-c img { width: 64px; height: 64px; object-fit: contain; }
.unit-c .em { font-size: 40px; line-height: 64px; height: 64px; }
.unit-c .done { position: absolute; top: -9px; right: -9px; background: var(--green); color: #fff; border: 2.5px solid var(--ink); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-size: 15px; }

/* ===== ユニットページ ===== */
.u-hero { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; margin: 10px 0 26px; }
.u-g-big { font-family: var(--en); font-weight: 700; font-size: clamp(72px, 13vw, 130px); line-height: 1; min-width: 1.6em; padding: 18px 26px; text-align: center; background: var(--c); border: var(--line); border-radius: 30px; box-shadow: 8px 8px 0 var(--ink); transform: rotate(-3deg); }
.u-hero h1 { margin: 0; font-size: clamp(26px, 4.6vw, 42px); font-weight: 900; line-height: 1.25; }
.u-hero .ph-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ph-pill { display: inline-flex; align-items: center; gap: 8px; border: var(--line); border-radius: 999px; padding: 4px 6px 4px 14px; background: #fff; box-shadow: var(--sh-s); font-weight: 800; cursor: pointer; }
.ph-pill .ipa { font-size: 22px; }
@media (max-width: 640px) { .u-hero { grid-template-columns: 1fr; justify-items: start; } }

.how { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 22px; align-items: start; }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; } }
.mouth-box { padding: 10px; background: #fff; }
.mouth-box svg { width: 100%; height: auto; display: block; }
.mouth-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; padding: 4px 6px 0; flex-wrap: wrap; }
.mouth-cap .k { display: flex; gap: 6px; flex-wrap: wrap; }

.wtools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 16px; }
.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.wc { border: var(--line); border-radius: 18px; background: #fff; box-shadow: var(--sh-s); padding: 10px 8px 10px; text-align: center; cursor: pointer; position: relative; transition: transform .08s; user-select: none; }
.wc:hover { transform: translateY(-2px); }
.wc.on { background: #fff4c2; }
.wc .pic { height: 92px; display: grid; place-items: center; }
.wc .pic img { width: 92px; height: 92px; object-fit: contain; }
.wc .pic .em { font-size: 60px; line-height: 1; }
.wc .pic .noimg { font-family: var(--en); font-weight: 700; font-size: 30px; color: var(--pink); background: #fff1f5; border: 2.5px dashed #f6a7bf; border-radius: 18px; min-width: 64px; padding: 4px 14px; line-height: 1.3; }
.wc .w { font-family: var(--en); font-weight: 600; font-size: 26px; line-height: 1.2; margin-top: 4px; letter-spacing: .01em; }
.wc .w .t { color: var(--hl); }
.wc .ja { font-size: 13px; color: var(--ink2); font-weight: 700; }
.wc .lv { position: absolute; top: 6px; left: 8px; font-size: 10.5px; font-weight: 900; color: var(--mute); }
.wc .ipa { font-size: 13px; color: var(--mute); }
.segs { display: flex; justify-content: center; gap: 3px; margin-top: 5px; min-height: 28px; flex-wrap: wrap; }
.segs span { font-family: var(--en); font-weight: 600; font-size: 15px; border: 2px solid var(--ink); border-radius: 8px; padding: 0 6px; background: #fff; transition: background .1s, transform .1s; }
.segs span.sil { opacity: .4; border-style: dashed; }
.segs span.t { background: #ffd9e3; }
.segs span.hot { background: var(--yellow); transform: translateY(-3px); }
.blend-btn { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font-size: 14px; display: grid; place-items: center; padding: 0; }
.blend-btn:hover { background: var(--yellow); }

.sent { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 2px dashed #e6dcc8; }
.sent:last-child { border: 0; }
.sent .en { font-size: 21px; font-weight: 600; line-height: 1.4; }
.sent .en .t { color: var(--hl); text-decoration: underline wavy; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.sent .ja { font-size: 14px; color: var(--ink2); }
.speed { display: inline-flex; gap: 4px; }
.speed button { border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 1px 9px; font-weight: 800; font-size: 13px; }
.speed button.on { background: var(--ink); color: #fff; }

.pager { display: flex; justify-content: space-between; gap: 14px; margin: 40px 0; flex-wrap: wrap; }
.pager a { flex: 1; min-width: 200px; }

/* ミニクイズ（ユニット末） */
.mq { padding: 20px; }
.mq-q { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mq-ch { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.mq-ch button { border: var(--line); border-radius: 18px; background: #fff; box-shadow: var(--sh-s); padding: 10px; min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mq-ch button img { width: 72px; height: 72px; object-fit: contain; }
.mq-ch button .em { font-size: 48px; }
.mq-ch button .en { font-size: 24px; font-weight: 600; }
.mq-ch button.ok { background: #c8f7dc; animation: pop .3s; }
.mq-ch button.ng { background: #ffd0d8; animation: shake .3s; }
@keyframes pop { 50% { transform: scale(1.1); } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.mq-bar { height: 12px; border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; margin-bottom: 14px; }
.mq-bar i { display: block; height: 100%; background: var(--green); transition: width .3s; }

/* おとモン */
.otomon { text-decoration: none; text-align: center; padding: 10px; position: relative; }
.otomon .om-img { aspect-ratio: 1; display: grid; place-items: center; background: var(--c, #fff); border-radius: 14px; border: 2.5px solid var(--ink); overflow: hidden; }
.otomon .om-img img { width: 100%; height: 100%; object-fit: contain; }
.otomon .om-img .ipa-big { font-family: var(--ipa); font-size: 48px; font-weight: 700; }
.otomon.locked .om-img img { filter: brightness(0) opacity(.16); }
body.adult .otomon.locked .om-img img { filter: none; }
.otomon.locked .om-n::after { content: ' ？'; }
body.adult .otomon.locked .om-n::after { content: ''; }
.otomon .om-n { font-weight: 900; font-size: 15px; margin-top: 6px; line-height: 1.3; }
.otomon .om-s { font-size: 12px; color: var(--ink2); font-weight: 700; }
.otomon .ipa-tag { position: absolute; top: 4px; left: 4px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 0 7px; font-size: 16px; }

/* ===== 講座（記事） ===== */
.article { font-size: 17px; line-height: 1.95; }
.article h1 { font-size: clamp(26px, 4.4vw, 38px); line-height: 1.35; font-weight: 900; margin: 6px 0 12px; }
.article h2 { font-size: 25px; font-weight: 900; margin: 46px 0 14px; padding: 6px 14px; border: var(--line); border-radius: 14px; background: var(--yellow); box-shadow: var(--sh-s); line-height: 1.4; }
.article h3 { font-size: 20px; font-weight: 900; margin: 30px 0 8px; padding-left: 12px; border-left: 6px solid var(--pink); line-height: 1.45; }
.article p { margin: 0 0 1.1em; }
.article ul, .article ol { padding-left: 1.4em; }
.article li { margin: .3em 0; }
.article strong { background: linear-gradient(transparent 60%, #ffe58a 60%); }
.article blockquote { margin: 18px 0; padding: 12px 18px; border-left: 6px solid var(--sky); background: #eefaff; border-radius: 0 14px 14px 0; }
.article table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; background: #fff; }
.article .tw { margin: 16px 0; overflow-x: auto; }
.article .tw > table { margin: 0; }
.article th, .article td { border: 2px solid var(--ink); padding: 6px 10px; text-align: left; vertical-align: top; }
.article th { background: var(--paper2); font-weight: 900; }
.article .callout { border: var(--line); border-radius: 18px; padding: 14px 18px 4px; margin: 22px 0; box-shadow: var(--sh-s); }
.article .callout.point { background: #fff0f5; }
.article .callout.note { background: #eef3ff; }
.article .callout > b:first-child { display: block; font-size: 16px; margin-bottom: 4px; }
.article .callout.point > b:first-child::before { content: '💡 '; }
.article .callout.note > b:first-child::before { content: '📎 '; }
.lec-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.toc { border: var(--line); border-radius: 18px; background: #fff; padding: 12px 20px; margin: 20px 0 30px; font-size: 15px; }
.toc b { display: block; }
.toc ol { margin: 6px 0; padding-left: 1.3em; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ===== 単語図鑑 ===== */
.search { width: 100%; font: inherit; font-size: 18px; padding: 12px 18px; border: var(--line); border-radius: 16px; box-shadow: var(--sh-s); background: #fff; }

/* ===== チャート（音声学ラボ） ===== */
.chart-wrap { padding: 14px; overflow-x: auto; }
.vchart svg { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
.vchart .v { cursor: pointer; }
.vchart .vtabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 0 8px; }
.vchart .g-di, .vchart .g-r { display: none; }
.vchart[data-layer="di"] .g-di, .vchart[data-layer="r"] .g-r, .vchart[data-layer="all"] .g-di, .vchart[data-layer="all"] .g-r { display: inline; }
.vchart:not([data-layer="mono"]) .g-mono circle { fill-opacity: .75; }
.vchart .v circle { transition: r .15s; }
.vchart .v:hover circle, .vchart .v.on circle { r: 25; }
.ctable { border-collapse: separate; border-spacing: 4px; font-size: 13px; min-width: 760px; width: 100%; }
.ctable th { font-weight: 900; padding: 4px; vertical-align: bottom; line-height: 1.3; }
.ctable th small { display: block; font-weight: 700; color: var(--mute); font-family: var(--en); }
.ctable td { background: #fbf6ec; border-radius: 10px; min-width: 70px; height: 56px; text-align: center; padding: 2px; }
.ctable td.no { background: repeating-linear-gradient(45deg, #eee7da 0 4px, #f6f0e4 4px 8px); }
.ctable .cb { display: inline-flex; flex-direction: column; align-items: center; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; padding: 0 8px; margin: 2px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); min-width: 40px; }
.ctable .cb .ipa { font-size: 22px; line-height: 1.25; }
.ctable .cb small { font-size: 10.5px; font-family: var(--en); color: var(--ink2); }
.ctable .cb.vd { background: #ffe4ec; }
.ctable .cb:hover, .ctable .cb.on { background: var(--yellow); }

/* ===== ゲーム ===== */
.gcard { text-decoration: none; overflow: hidden; display: flex; flex-direction: column; transition: transform .12s; }
.gcard:hover { transform: translate(-2px, -3px) rotate(-.5deg); }
.gcard .g-art { aspect-ratio: 16/10; background: var(--c); border-bottom: var(--line); display: grid; place-items: center; font-size: 70px; position: relative; overflow: hidden; }
.gcard .g-art img { width: 100%; height: 100%; object-fit: cover; }
.gcard .g-b { padding: 12px 16px 16px; }
.gcard h3 { margin: 0; font-size: 20px; font-weight: 900; }
.gcard .g-en { font-family: var(--en); color: var(--mute); font-weight: 600; font-size: 13px; }
.gcard p { margin: 6px 0 0; font-size: 14px; color: var(--ink2); line-height: 1.6; }
.gcard .best { position: absolute; bottom: 8px; right: 8px; background: var(--ink); color: #fff; font-weight: 900; border-radius: 999px; padding: 0 10px; font-size: 13px; }

.gx { max-width: 980px; margin: 16px auto 0; padding: 0 12px; }
.stagebox { position: relative; border: var(--line); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); background: #fff; overflow: hidden; min-height: 560px; display: flex; flex-direction: column; }
.hud { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: var(--line); background: var(--c, var(--yellow)); flex-wrap: wrap; }
.hud .h-t { font-weight: 900; font-size: 18px; margin-right: auto; }
.hud .pill { background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 1px 12px; font-weight: 900; font-family: var(--en); font-size: 17px; display: inline-flex; gap: 6px; align-items: center; }
.hud .pill.combo { background: var(--pink); color: #fff; }
.hud .icon-b { width: 38px; height: 38px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 0; font-size: 18px; }
.timebar { height: 10px; background: #fff; border-bottom: var(--line); }
.timebar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--yellow)); transition: width .25s linear; }
.timebar.low i { background: var(--red); }
.play-area { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; gap: 18px; }
.overlay { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: rgba(255, 247, 234, .97); }
.overlay h2 { font-size: clamp(28px, 5vw, 44px); margin: 0; font-weight: 900; line-height: 1.2; }
.overlay .o-en { font-family: var(--en); color: var(--pink); letter-spacing: .12em; font-weight: 700; }
.overlay p { margin: 0; max-width: 34em; color: var(--ink2); }
.overlay .o-art { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(4px 4px 0 var(--ink)); }
.overlay .o-em { font-size: 90px; line-height: 1; }
.lvl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lvl button { border: var(--line); border-radius: 16px; background: #fff; padding: 8px 16px; font-weight: 900; box-shadow: var(--sh-s); min-width: 120px; }
.lvl button small { display: block; font-weight: 700; color: var(--mute); font-size: 12px; }
.lvl button.on { background: var(--yellow); }
.range-sel { font: inherit; font-weight: 800; border: var(--line); border-radius: 14px; padding: 8px 12px; background: #fff; box-shadow: var(--sh-s); max-width: 100%; }
.count { font-family: var(--en); font-size: 140px; font-weight: 700; animation: cnt .9s ease-out; color: var(--pink); -webkit-text-stroke: 4px var(--ink); }
@keyframes cnt { from { transform: scale(2.2); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); } }
.stars { font-size: 56px; letter-spacing: 6px; }
.stars i { font-style: normal; display: inline-block; animation: starin .5s backwards; }
.stars i.off { filter: grayscale(1) opacity(.25); }
@keyframes starin { from { transform: scale(0) rotate(-180deg); } }
.res-score { font-family: var(--en); font-size: 64px; font-weight: 700; line-height: 1; }
.res-new { background: var(--pink); color: #fff; font-weight: 900; border-radius: 999px; padding: 2px 14px; animation: pulse .5s infinite alternate; }
.review { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 700px; }
.review .say { font-size: 15px; }
.fb { position: absolute; z-index: 15; pointer-events: none; font-family: var(--en); font-weight: 700; font-size: 34px; animation: fbup .8s ease-out forwards; -webkit-text-stroke: 1.5px var(--ink); }
.fb.ok { color: var(--green); }
.fb.ng { color: var(--red); }
@keyframes fbup { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); } to { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 30; }

/* ゲームの中の部品 */
.prompt-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.big-play { width: 92px; height: 92px; border-radius: 50%; border: 4px solid var(--ink); background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); display: grid; place-items: center; padding: 0; }
.big-play svg { width: 40px; height: 40px; }
.big-play:active { transform: translate(4px, 4px); box-shadow: none; }
.big-word { font-family: var(--en); font-weight: 600; font-size: clamp(44px, 9vw, 80px); line-height: 1.1; letter-spacing: .02em; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; width: 100%; max-width: 760px; }
.opt { border: var(--line); border-radius: 22px; background: #fff; box-shadow: var(--sh); padding: 12px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: transform .08s; }
.opt:hover { transform: translateY(-3px); }
.opt:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.opt img { width: 96px; height: 96px; object-fit: contain; }
.opt .em { font-size: 64px; line-height: 1; }
.opt .en { font-size: 30px; font-weight: 600; }
.opt .ja { font-size: 14px; color: var(--ink2); font-weight: 800; }
.opt.ok { background: #c8f7dc; animation: pop .35s; }
.opt.ng { background: #ffd0d8; animation: shake .35s; }
.opt.reveal { outline: 5px solid var(--green); outline-offset: 2px; }
.opt .ipa { font-size: 30px; }
.game-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.tiles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tile { font-family: var(--en); font-weight: 600; font-size: 34px; min-width: 64px; height: 70px; padding: 0 12px; border: var(--line); border-radius: 16px; background: #fff; box-shadow: var(--sh-s); display: grid; place-items: center; user-select: none; touch-action: none; }
.tile.used { opacity: .25; pointer-events: none; }
.tile:active { transform: translate(2px, 2px); box-shadow: none; }
.slots { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.slot { min-width: 74px; height: 84px; border: 3px dashed var(--ink); border-radius: 16px; display: grid; place-items: center; font-family: var(--en); font-weight: 600; font-size: 38px; background: #fffdf6; padding: 0 10px; }
.slot.fill { border-style: solid; background: #fff4c2; animation: pop .25s; }
.slot.bad { background: #ffd0d8; animation: shake .3s; }
.slot.good { background: #c8f7dc; }
.bucket-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; width: 100%; max-width: 820px; }
.bucket { border: var(--line); border-radius: 20px; min-height: 110px; padding: 10px; background: var(--bc, #fff); box-shadow: var(--sh-s); display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: transform .1s; }
.bucket:hover { transform: translateY(-3px); }
.bucket b { font-size: 22px; }
.bucket .ipa { font-size: 26px; }
.bucket small { font-weight: 800; color: var(--ink2); }
.mem-grid { display: grid; gap: 10px; width: 100%; max-width: 760px; }
.mem { aspect-ratio: 1; perspective: 600px; cursor: pointer; }
.mem .in { position: relative; width: 100%; height: 100%; transition: transform .4s; transform-style: preserve-3d; }
.mem.open .in, .mem.done .in { transform: rotateY(180deg); }
.mem .fc, .mem .bc { position: absolute; inset: 0; backface-visibility: hidden; border: var(--line); border-radius: 16px; display: grid; place-items: center; box-shadow: var(--sh-s); }
.mem .fc { background: var(--purple); color: #fff; font-family: var(--en); font-size: 34px; font-weight: 700; background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25) 0 12%, transparent 13%), radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .18) 0 9%, transparent 10%); }
.mem .bc { background: #fff; transform: rotateY(180deg); padding: 4px; flex-direction: column; }
.mem .bc img { width: 76%; height: 76%; object-fit: contain; }
.mem .bc .em { font-size: clamp(30px, 6vw, 52px); }
.mem .bc .en { font-size: clamp(16px, 3.2vw, 26px); font-weight: 600; }
.mem.done .bc { background: #c8f7dc; }
.typebox { font-family: var(--en); font-size: 40px; font-weight: 600; text-align: center; border: var(--line); border-radius: 18px; padding: 8px 14px; width: min(420px, 100%); box-shadow: var(--sh-s); letter-spacing: .06em; }
.keyb { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; }
.keyb div { display: flex; gap: 5px; justify-content: center; }
.keyb button { font-family: var(--en); font-weight: 600; font-size: 20px; width: clamp(28px, 8vw, 44px); height: 48px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; box-shadow: 2px 2px 0 var(--ink); padding: 0; }
.keyb button.wide { width: auto; padding: 0 12px; font-size: 15px; }
.letter-pick { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.letter-pick button { font-family: var(--en); font-weight: 600; font-size: 46px; min-width: 56px; padding: 2px 10px; border: var(--line); border-radius: 14px; background: #fff; box-shadow: var(--sh-s); }
.letter-pick button.ok { background: #c8f7dc; }
.letter-pick button.ng { background: #ffd0d8; animation: shake .3s; }
.letter-pick button.miss { outline: 4px solid var(--green); }

/* ダウンロード */
.dl { display: flex; flex-direction: column; overflow: hidden; }
.dl .d-img { aspect-ratio: 1.414 / 1; background: var(--paper2); border-bottom: var(--line); display: grid; place-items: center; overflow: hidden; }
.dl .d-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dl .d-b { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dl h3 { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.4; }
.dl p { margin: 0; font-size: 13.5px; color: var(--ink2); line-height: 1.6; }
.dl .d-btns { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.stage .prog:empty { display: none; }
@media (min-width: 901px) { .nav a { padding: 7px 8px; font-size: 14px; } }
@media (max-width: 600px) { .range-sel { display: block; width: 100%; margin-top: 6px; } }
/* ダウンロード */
.card.dl { text-decoration: none; display: flex; flex-direction: column; overflow: hidden; transition: transform .12s; }
.card.dl:hover { transform: translate(-2px, -3px); }
.dl-th { background: #ece7f6; border-bottom: var(--line); padding: 14px 14px 0; display: flex; justify-content: center; align-items: flex-start; aspect-ratio: 4 / 4.2; overflow: hidden; }
.dl-th img { width: 88%; box-shadow: 0 4px 14px rgba(29, 24, 56, .25); background: #fff; display: block; }
.dl-th.land img { width: 100%; margin-bottom: auto; margin-top: auto; }
.card.dl h3 { margin: 0 0 4px; font-size: 16px; font-weight: 900; line-height: 1.35; }
.card.dl p { margin: 0 0 8px; font-size: 13px; color: var(--ink2); line-height: 1.55; }
.card.dl .f-b { padding: 12px 14px 14px; }
/* さがし絵 */
.seek { padding: 14px; display: grid; gap: 14px; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: start; position: relative; }
.seek-img img { width: 100%; border-radius: 16px; border: var(--line); display: block; }
.seek-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seek-w { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; border: var(--line); border-radius: 16px; background: #fff; padding: 6px 4px; box-shadow: var(--sh-s); cursor: pointer; font: inherit; }
.seek-w .seek-p img { width: 52px; height: 52px; object-fit: contain; }
.seek-w .seek-p .em { font-size: 40px; }
.seek-w .en { font-size: 20px; font-weight: 600; }
.seek-w .seek-ja { font-size: 11px; font-weight: 800; color: var(--ink2); }
.seek-w i { position: absolute; right: 6px; top: 4px; font-style: normal; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; color: transparent; font-weight: 900; display: grid; place-items: center; font-size: 14px; }
.seek-w.found { background: #d6f9e4; }
.seek-w.found i { background: var(--green); color: #fff; }
.seek-done { grid-column: 1 / -1; text-align: center; font-weight: 900; font-size: 22px; background: var(--yellow); border: var(--line); border-radius: 16px; padding: 8px; }
@media (max-width: 760px) { .seek { grid-template-columns: 1fr; } .seek-list { grid-template-columns: repeat(4, 1fr); } .seek-w .en { font-size: 15px; } .seek-w .seek-p img { width: 40px; height: 40px; } }
/* 絵本カード・チャント */
.book-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: stretch; }
@media (max-width: 760px) { .book-row { grid-template-columns: 1fr; } }
.book-cv { text-decoration: none; display: flex; flex-direction: column; overflow: hidden; transition: transform .12s; }
.book-cv:hover { transform: translate(-2px, -3px); }
.book-cv .bc-img { position: relative; aspect-ratio: 16 / 9; background: #fff1c1; border-bottom: var(--line); display: grid; place-items: center; overflow: hidden; }
.book-cv .bc-img img { width: 100%; height: 100%; object-fit: cover; }
.book-cv .bc-img .em { font-size: 64px; }
.book-cv .bc-badge { position: absolute; left: 10px; top: 10px; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; font-weight: 900; font-size: 13px; }
.book-cv .bc-g { position: absolute; left: 10px; top: 10px; color: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 0 10px; font-family: var(--en); font-weight: 700; font-size: 20px; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.book-cv .bc-read { position: absolute; right: 10px; top: 10px; background: var(--green); color: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 1px 10px; font-weight: 900; font-size: 12px; }
.book-cv .f-b { padding: 12px 16px 16px; }
.book-cv h3 { margin: 0 0 2px; font-size: 20px; font-weight: 600; line-height: 1.25; }
.book-cv.sm h3 { font-size: 17px; }
.book-cv p { margin: 0 0 8px; font-size: 14px; color: var(--ink2); font-weight: 700; }
.chant { padding: 18px 20px; background: #f1ebff; }
.chant h3 { margin: 0 0 8px; font-weight: 900; }
.chant .act { margin-top: 12px; background: #fff; border: 2.5px dashed var(--purple, #7b2ff7); border-radius: 14px; padding: 10px 14px; }
.chant .act p { margin: 4px 0 0; font-weight: 700; }
/* 絵本リーダー */
.reader { margin: 12px auto 20px; max-width: 980px; }
.rd-pg { border: var(--line); border-radius: 26px; background: #fff; box-shadow: var(--sh); overflow: hidden; }
.rd-img { position: relative; aspect-ratio: 16 / 9; background: #fff1c1; display: grid; place-items: center; }
.rd-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-img .em { font-size: 120px; }
.rd-no { position: absolute; right: 12px; bottom: 10px; background: rgba(255,255,255,.92); border: 2.5px solid var(--ink); border-radius: 999px; padding: 0 12px; font-weight: 900; font-family: var(--en); }
.rd-txt { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px 22px; border-top: var(--line); background: #fffdf6; }
.rd-txt .play { flex: none; width: 58px; height: 58px; }
.rd-txt .play.on { background: var(--yellow); }
.rd-en { margin: 0; font-size: clamp(26px, 4.2vw, 40px); line-height: 1.45; font-weight: 600; }
.rd-ja { margin: 6px 0 0; font-weight: 700; color: var(--ink2); font-size: 16px; }
.reader.noja .rd-ja { display: none; }
.reader.nohl .rd-en .t { color: inherit; text-decoration: none; background: none; }
.tk { cursor: pointer; border-radius: 10px; padding: 0 2px; transition: background .12s, transform .12s; display: inline-block; }
.tk:hover { background: #fff1c1; }
.tk.hot { background: var(--yellow); transform: translateY(-3px); box-shadow: 0 3px 0 var(--ink); }
.rd-cover .rd-img { aspect-ratio: auto; display: block; }
.rd-cover .rd-img img { aspect-ratio: 16 / 9; }
.rd-title { padding: 18px 22px 22px; border-top: var(--line); text-align: center; }
.rd-title h1 { margin: 8px 0 2px; font-size: clamp(30px, 5vw, 48px); font-weight: 600; }
.rd-title p { margin: 0 0 12px; font-weight: 800; color: var(--ink2); }
.rd-start { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rd-endin { padding: 26px; text-align: center; }
.rd-endin h2 { font-size: 36px; margin: 0 0 6px; }
.rd-q { margin: 14px auto; max-width: 640px; text-align: left; }
.rd-q p { font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.rd-q .opts { max-width: none; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rd-q .opt { min-height: 56px; font-weight: 900; font-size: 18px; border-radius: 16px; cursor: pointer; }
.opt.reveal { background: #c8f7dc; outline: 3px dashed var(--green); }
.rd-result { font-weight: 900; font-size: 18px; background: #fff4c2; border: var(--line); border-radius: 16px; padding: 10px; margin: 10px auto; max-width: 640px; }
.rd-nav2 { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.rd-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 8px; }
.rd-ctl .btn { min-width: 64px; font-size: 20px; }
.rd-dots { display: flex; gap: 8px; }
.rd-dots button { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; padding: 0; cursor: pointer; }
.rd-dots button.on { background: var(--c, var(--yellow)); transform: scale(1.25); }
.rd-opts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) { .rd-txt { padding: 12px 14px 16px; gap: 10px; } .rd-txt .play { width: 46px; height: 46px; } .rd-q .opts { grid-template-columns: 1fr; } }
.vt-host svg.vt { border-radius: 12px; }
.mouth-cap .mvar { display: inline-flex; gap: 4px; margin: 0; }
.mouth-cap .mvar .chip { font-size: 12px; padding: 2px 10px; cursor: pointer; }
.mouth-cap .mvar .chip.on { background: var(--ink, #1d1838); color: #fff; }
@media (min-width: 901px) and (max-width: 1360px) { .nav a { padding: 5px 4px; font-size: 12.5px; } .logo small, .brand small { display: none; } }
.spd { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.spd-c { padding: 12px 14px; }
.spd-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.spd-h b { font-size: 26px; }
.spd-h small { color: #6a6280; font-weight: 700; }
.spd-bar { display: flex; height: 12px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.spd-bar span { display: block; height: 100%; }
.spd-r { display: grid; grid-template-columns: 10px 1fr 46px 52px; align-items: center; gap: 6px; font-size: 14px; padding: 3px 0; border-top: 1px dashed #e2dcef; }
.spd-r i { width: 10px; height: 10px; border-radius: 3px; }
.spd-r b { text-align: right; }
.spd-r small { color: #6a6280; }
.spd-ex { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 4px 16px; }
.spd-ex .say { font-size: 12.5px; padding: 1px 7px; }
.rec { padding: 14px 16px; margin-top: 14px; }
.rec-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-k { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-cv { width: 100%; height: 150px; display: block; margin-top: 10px; border: 2.5px solid var(--ink); border-radius: 12px; }
.rec-info { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 800; margin-top: 6px; }
.rec-info i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.rec-note { font-size: 12px; color: #6a6280; margin: 6px 0 0; }

/* 動画・リンク集：動画カードの「対象・強み・使い方」とチャンネル紹介 */
.vcard .f-img { position: relative; }
.vcard .v-len { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .82); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; padding: 5px 8px; border-radius: 6px; }
.vcard .lec-meta { gap: 6px; margin-bottom: 10px; }
.vcard .lec-meta .chip { font-size: 12px; padding: 1px 9px; }
.v-info { margin: 10px 0 0; padding: 10px 0 0; border-top: 2px dashed var(--ink); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink2); }
.v-info dt { font-weight: 900; font-size: 12px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; padding: 0 9px; align-self: start; white-space: nowrap; margin-top: 1px; }
.v-info dd { margin: 0; }
.v-ch { margin: 0 0 18px; padding: 0; background: #fff; }
.v-ch summary { cursor: pointer; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.v-ch summary span { font-size: 13px; color: var(--mute); }
.v-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 22px; padding: 4px 18px 18px; }
.v-chs h4 { margin: 0; font-size: 15px; font-weight: 900; line-height: 1.4; }
.v-chs p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink2); }
.v-chs .v-chm { font-size: 12px; color: var(--mute); font-weight: 700; }

/* 答えたあとの「どうして？」（games.js の hold）。まちがえたら「つぎへ」を押すまで止まる */
.why { width: min(720px, 100%); border: var(--line); border-radius: 18px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; box-shadow: var(--sh-s); animation: pop .25s; text-align: left; z-index: 12; }
.why.ok { background: #e3fbee; } .why.ng { background: #ffe9ee; }
.why-b { flex: 1 1 260px; min-width: 0; } .why-v { font-size: 18px; font-weight: 900; }
.why-t { margin-top: 4px; font-weight: 700; font-size: 15px; line-height: 1.7; } .why-t p { margin: 4px 0 0; } .why-t .ipa { font-family: var(--ipa); font-weight: 700; color: var(--hl, #7b2ff7); margin: 0 3px; }
.why-ja { font-weight: 800; margin: 0 8px 0 4px; }
.why-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin: 4px 0; }
.why-seg i { font-style: normal; display: grid; justify-items: center; min-width: 34px; padding: 2px 7px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; line-height: 1.25; }
.why-seg b { font-family: var(--en); font-weight: 600; font-size: 20px; } .why-seg small { font-family: var(--ipa); font-size: 12.5px; color: #7b2ff7; font-weight: 700; }
.why-seg i.mute { border-style: dashed; background: #f1eff7; } .why-seg i.mute b { opacity: .45; text-decoration: line-through; } .why-seg i.mute small { font-family: inherit; color: var(--red); font-size: 11px; }
.why-a { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.why-nx { position: relative; overflow: hidden; font-size: 18px; padding: 10px 26px; } .why-nx span { position: relative; z-index: 1; }
.why-nx i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(29, 24, 56, .16); animation: whyfill linear forwards; }
@keyframes whyfill { to { width: 100%; } }
.rh-msg { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); z-index: 5; max-width: calc(100% - 20px); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 14px; font-weight: 800; font-size: 14.5px; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rh-msg:empty { display: none; }
.rh-msg.ok { background: #e3fbee; } .rh-msg.ng { background: #ffe9ee; } .rh-msg .ipa { font-family: var(--ipa); color: #7b2ff7; }
@media (max-width: 600px) { .why { padding: 10px; } .why-a { width: 100%; } .why-nx { flex: 1; } .rh-msg { font-size: 12.5px; white-space: normal; border-radius: 14px; text-align: center; } }

/* ===== つながる音ラボ（/link/）・パッと言える？（/patto/）・音節カウンター（/beat/）。枠は play3.css の cu- を使い、ここは bz- だけ ===== */
.n3-lk { background: #dceeff; } .n3-pa { background: #ffe1ea; } .n3-bt { background: #e2f7d5; }
.bz-tabs, .bz-flt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bz-tabs { justify-content: center; }
.bz-tabs .chip, .bz-flt .chip { cursor: pointer; font-size: 14.5px; padding: 6px 16px; }
.bz-tabs .chip[aria-pressed="true"], .bz-flt .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bz-res .cu-pct b, .bz-res .cu-pct i { color: #7b2ff7; } .bz-res .cu-gauge i { background: linear-gradient(90deg, #36c2ff, #7b2ff7); }
.cu-fb .bz-h { font-weight: 900; font-size: 17px; margin: 12px 0 4px; } .cu-fb .bz-h .ipa { font-weight: 500; margin-left: 6px; }
.bz-note { font-size: 13px; color: var(--ink2); margin: 14px 0 0; }
.bz-tag { display: inline-block; font-size: 12.5px; font-weight: 900; border: 2.5px solid var(--ink); border-radius: 99px; padding: 0 11px; margin-right: 6px; background: #fff; white-space: nowrap; }
.bz-tag.t-link { background: #bdefff; } .bz-tag.t-flap { background: #ffd23f; } .bz-tag.t-weak { background: #e6e1ff; } .bz-tag.t-drop { background: #ffd6e2; } .bz-tag.t-blend { background: #c9f5df; }

/* ---------- つながる音ラボ ---------- */
.bz-stage { background: #eef7ff; }
.bz-ws { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 18px 0 4px; transition: gap .5s cubic-bezier(.3, 1.4, .5, 1); }
.bz-w { font-size: clamp(34px, 8vw, 68px); font-weight: 700; line-height: 1.15; background: #fff; border: var(--line); border-radius: 18px; padding: 4px 18px; box-shadow: var(--sh-s); transition: border-radius .5s, padding .5s, background .3s, transform .2s, box-shadow .5s; }
.bz-w.lit { background: var(--yellow); transform: translateY(-6px); }
.bz-stage.on .bz-ws { gap: 0; }
.bz-stage.on .bz-w { border-radius: 0; padding: 4px 7px; background: #fff3b8; box-shadow: none; border-left-width: 0; border-right-width: 0; }
.bz-stage.on .bz-w:first-child { border-radius: 18px 0 0 18px; border-left-width: 3px; padding-left: 18px; } .bz-stage.on .bz-w:last-child { border-radius: 0 18px 18px 0; border-right-width: 3px; padding-right: 18px; }
.bz-stage.on .bz-w:only-child { border-radius: 18px; }
.bz-ja { color: var(--ink2); font-weight: 700; margin: 6px 0 0; }
.bz-read { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.bz-read > div { background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 6px 16px 8px; min-width: 150px; } .bz-read small { display: block; font-size: 12px; font-weight: 800; color: var(--ink2); }
.bz-read > i { font-style: normal; font-weight: 900; font-size: 26px; }
.bz-sep { font-weight: 900; font-size: 19px; color: var(--pink); } .bz-mel { font-weight: 900; font-size: 24px; color: #7b2ff7; }
.bz-m { display: none; } .bz-stage.on .bz-m { display: inline; animation: bzpop .45s; } .bz-stage.on .bz-q3 { display: none; }
.bz-stage.on .bz-sep { text-decoration: line-through; text-decoration-thickness: 2.5px; }
.bz-why { display: none; } .bz-stage.on .bz-why { display: block; animation: bzpop .4s; }
.bz-ex { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; background: #f6f3ff; border-radius: 14px; padding: 8px 12px; margin: 10px 0; } .bz-ex .en { font-size: 22px; font-weight: 600; } .bz-ex small { display: block; font-size: 13px; color: var(--ink2); font-weight: 700; }
.bz-ex mark, .bz-exb mark { background: #fff3b8; border-bottom: 3px solid var(--yellow); border-radius: 4px; padding: 0 2px; color: inherit; }
.bz-tn { font-size: 13.5px; color: var(--ink2); margin: 6px 0 0 !important; }
.bz-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bz-chip { border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; font-weight: 600; font-size: 17px; padding: 3px 12px; cursor: pointer; } .bz-chip:hover { background: #fff6d6; } .bz-chip.on { background: var(--yellow); box-shadow: var(--sh-s); }
.bz-hearbig { display: grid; justify-items: center; gap: 6px; margin: 16px 0 0; } .bz-hearbig small { font-size: 12.5px; color: var(--ink2); font-weight: 700; }
.cu-hear.bz-big { width: 96px; height: 96px; } .cu-hear.bz-big svg { width: 48px; height: 48px; }
.cu-op .en { font-family: var(--en); font-weight: 600; } .bz-exb { font-size: clamp(20px, 4.4vw, 28px) !important; font-weight: 600 !important; }
@keyframes bzpop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- パッと言える？ ---------- */
.bz-demoja { font-size: clamp(22px, 5vw, 34px) !important; font-weight: 900 !important; }
.bz-time { float: right; font-family: var(--en); font-weight: 700; font-size: 15px; background: #fff; border: 2.5px solid var(--ink); border-radius: 99px; padding: 0 12px; }
.bz-pq { font-size: clamp(24px, 5.6vw, 40px); font-weight: 900; line-height: 1.4; margin: 20px 0 16px; clear: both; }
.bz-ans { min-height: 68px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; background: #fff; border: 3px dashed #b9b2d6; border-radius: 18px; padding: 10px; }
.bz-ans.ok { border: 3px solid #12a26a; background: #eafbf2; } .bz-ans.ng { border: 3px solid var(--pink); background: #fff0f4; }
.bz-ph { color: var(--mute); font-family: var(--jp, inherit); font-weight: 700; font-size: 14px; }
.bz-pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.bz-t { font-family: var(--en); font-weight: 600; font-size: clamp(19px, 4.6vw, 26px); line-height: 1.2; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; padding: 7px 14px; box-shadow: var(--sh-s); cursor: pointer; color: var(--ink); }
.bz-pool .bz-t:hover { background: #fff6d6; } .bz-ans .bz-t { background: var(--yellow); } .bz-t.used { opacity: .22; box-shadow: none; } .bz-t:disabled { cursor: default; }
.bz-sec { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink2); } .bz-alt { font-size: 14px; color: var(--ink2); margin: 8px 0 0 !important; } .bz-alt .en { font-weight: 600; font-size: 17px; color: var(--ink); }

/* ---------- 音節カウンター ---------- */
.bz-dk { font-weight: 900; font-size: 19px; color: var(--pink); } .bz-dk small { display: block; font-size: 12px; color: var(--ink2); }
.bz-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .bz-nums .cu-op { min-height: 72px; padding: 12px 4px; } .bz-nums .cu-op b { font-family: var(--en); font-size: 32px; }
.bz-rows { display: grid; gap: 8px; margin: 12px 0; }
.bz-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 8px; align-items: center; } .bz-row small { font-weight: 900; font-size: 13px; } .bz-row > div { display: flex; flex-wrap: wrap; gap: 5px; } .bz-row > b { font-weight: 900; white-space: nowrap; }
.bz-b { border: 2.5px solid var(--ink); border-radius: 10px; padding: 2px 9px; font-weight: 900; background: #ffd6e2; animation: bzclap .5s both; } .bz-b.e { background: #c9f5df; font-family: var(--en); font-weight: 700; font-size: 22px; padding: 2px 12px; }
@keyframes bzclap { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: none; opacity: 1; } }
.bz-tbl { width: 100%; border-collapse: collapse; background: #fff; border: var(--line); border-radius: 16px; overflow: hidden; font-size: 15px; } .bz-tbl th, .bz-tbl td { padding: 7px 10px; border-bottom: 1.5px solid #e4dff2; text-align: left; } .bz-tbl th { background: #f3f0ff; font-size: 13px; } .bz-tbl .en { font-weight: 600; font-size: 18px; } .bz-tbl .play { width: 34px; height: 34px; }
.bz-tblw { overflow-x: auto; }
@media (max-width: 520px) { .bz-read > div { min-width: 0; flex: 1 1 130px; } .bz-read > i { display: none; } .bz-nums { gap: 6px; } .bz-w { padding: 4px 12px; } .bz-ws { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .bz-ws, .bz-w { transition: none; } .bz-b, .bz-stage.on .bz-m, .bz-stage.on .bz-why { animation: none; } }

/* デコーダブルブック（/decodable/）：本だな・リーダー・読める証明 */
.dc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; background: #fff1c1; margin-top: 10px; }
.dc-hero img { width: 100%; height: 100%; object-fit: cover; border-right: var(--line); display: block; }
.dc-hero-t { padding: 24px; }
.dc-en { font-family: var(--en); color: var(--orange, #ff9f1c); font-weight: 700; letter-spacing: .1em; }
.dc-hero h1 { margin: 4px 0 8px; font-size: clamp(24px, 3.8vw, 38px); font-weight: 900; line-height: 1.25; }
.dc-hero p { margin: 0; }
.dc-hero-n { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.dc-hero-n span { background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 4px 12px; font-weight: 800; font-size: 13px; }
.dc-hero-n b { font-family: var(--en); font-size: 22px; margin-right: 3px; }
.dc-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 8px; }
.dc-why .card { padding: 16px 18px; position: relative; }
.dc-why h3 { margin: 0 0 6px; font-size: 18px; font-weight: 900; padding-left: 40px; line-height: 1.35; min-height: 32px; }
.dc-why p { margin: 0; font-size: 14.5px; }
.dc-n { position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); border: 2.5px solid var(--ink); display: grid; place-items: center; font-family: var(--en); font-size: 18px; }
.dc-cv .dc-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--ink2); }
.dc-f { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dc-f i { font-style: normal; font-family: var(--en); font-weight: 700; font-size: 13px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 0 6px; line-height: 1.5; }
.dc-cv .dc-f i { background: color-mix(in srgb, var(--c) 22%, #fff); }
.dc-cv .bc-g { border-radius: 50%; min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0; font-size: 16px; }
.dc-stars { position: absolute; right: 8px; top: 8px; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 0 8px; font-size: 13px; color: #f2a900; font-weight: 900; letter-spacing: 1px; }
.dc-how { padding: 14px 22px; }
.dc-how ol { margin: 4px 0 8px; padding-left: 1.3em; }
.dc-how li { margin: 6px 0; }

/* リーダー */
.dreader .rd-en { line-height: 1.85; word-spacing: .12em; }
.dreader .tk { padding: 0 3px; }
.dreader .tk i { font-style: normal; position: relative; display: inline-block; }
.dreader .tk i.t { color: var(--pink); }
.dreader .tk i.gs { opacity: .42; }
.dreader .tk.wf { text-decoration: underline wavy var(--pink) 2px; text-underline-offset: 14px; }
.dreader:not(.sb) .tk.wf { text-underline-offset: 6px; }
.dreader .tk.sel { background: var(--yellow); box-shadow: 0 3px 0 var(--ink); }
.dreader.sb .tk i.g::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); opacity: .75; }
.dreader.sb .tk i.g2::after { width: calc(100% - 4px); height: 4px; border-radius: 3px; bottom: -2px; }
.dreader.sb .tk i.gs::after { display: none; }
.dreader.sb .tk i.t::after { background: var(--pink); opacity: 1; }
.dreader .tk.hw { position: relative; }
.dreader.sb .tk.hw::after { content: '♥'; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font-size: 11px; line-height: 1; color: var(--pink); font-family: system-ui, sans-serif; }
.dc-heart { color: var(--pink); font-family: system-ui, sans-serif; }
.dc-tx { min-width: 0; flex: 1; }
.dc-blurb { font-weight: 700 !important; color: var(--ink) !important; font-size: 15px; }
.dc-cvm { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; }
.dc-cvm > span { background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; }
.dc-cvm .dc-my b { color: #f2a900; }
.dc-hint { text-align: center; font-size: 13px; font-weight: 700; color: var(--ink2); margin: 10px 0 0; }
.dc-key { display: inline-block; margin-left: 8px; white-space: nowrap; }
.dc-key i { display: inline-block; background: var(--ink); vertical-align: middle; margin: 0 3px 0 6px; }
.dc-key .k1 { width: 7px; height: 7px; border-radius: 50%; }
.dc-key .k2 { width: 18px; height: 4px; border-radius: 3px; }
/* 絵はあとで */
.dc-peek { display: none; position: absolute; inset: 0; width: 100%; border: 0; background: repeating-linear-gradient(45deg, #fff1c1 0 18px, #ffe9a3 18px 36px); font: inherit; font-weight: 900; font-size: clamp(17px, 3vw, 24px); color: var(--ink); cursor: pointer; }
.dreader.piclater .dc-pg:not(.seen) .dc-peek { display: block; }
/* 1音ずつ */
.dc-so { margin-top: 12px; padding: 12px 14px; background: #fff; border: var(--line); border-radius: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-so[hidden] { display: none; }
.so-w { display: flex; gap: 6px; flex-wrap: wrap; }
.so-g { border: 2.5px solid var(--ink); border-radius: 12px; background: #fffdf6; padding: 2px 10px 4px; min-width: 44px; text-align: center; cursor: pointer; font: inherit; color: var(--ink); transition: transform .1s, background .1s; }
.so-g b { display: block; font-size: 30px; font-weight: 600; line-height: 1.2; }
.so-g small { display: block; font-size: 12px; color: var(--ink2); font-family: 'Noto Sans', sans-serif; }
.so-g.g2 { background: #e8f6ff; }
.so-g.t b { color: var(--pink); }
.so-g.gs { opacity: .5; border-style: dashed; }
.so-g.hot { background: var(--yellow); transform: translateY(-4px); }
.so-w.hw .so-g { background: #ffe1ea; cursor: default; }
.so-n { margin: 0; font-size: 14px; font-weight: 700; flex: 1; min-width: 180px; }
/* よむまえに */
.dc-warm-in { padding: 22px 26px 26px; }
.dc-warm-in h2 { margin: 0 0 4px; font-size: 30px; text-align: center; }
.dc-warm-in h3 { margin: 18px 0 2px; font-size: 19px; font-weight: 900; }
.dc-sub { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink2); }
.dc-gs, .dc-ws { display: flex; gap: 10px; flex-wrap: wrap; }
.dc-gp { border: var(--line); border-radius: 18px; background: var(--c, var(--yellow)); color: #fff; min-width: 76px; padding: 6px 14px 8px; cursor: pointer; font: inherit; box-shadow: 3px 3px 0 var(--ink); text-align: center; }
.dc-gp b { display: block; font-size: 36px; font-weight: 600; line-height: 1.15; text-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }
.dc-gp small { display: block; font-size: 13px; font-family: 'Noto Sans', sans-serif; font-weight: 700; }
.dc-gp.on { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.dc-gp.static { cursor: default; min-width: 0; padding: 2px 12px 4px; } .dc-gp.static b { font-size: 26px; }
.dc-w { border: var(--line); border-radius: 16px; background: #fff; padding: 4px 18px 6px; font-size: 30px; font-weight: 600; cursor: pointer; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); position: relative; }
.dc-w.sel { background: var(--yellow); }
.dc-w.hw { background: #ffe1ea; }
.dc-w.on { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.dc-w .new { position: absolute; top: -10px; right: -8px; font-style: normal; font-family: var(--en); font-size: 10px; background: var(--pink); color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 0 6px; }
.dc-warm .rd-start { margin-top: 24px; }
.dc-warm .dc-so { margin-bottom: 4px; }
/* よみおわり */
.dc-res { margin: 4px auto 14px; max-width: 640px; }
.dc-res p { margin: 4px 0; font-weight: 800; }
.dc-st { color: #f2a900; font-size: 30px; letter-spacing: 3px; vertical-align: -3px; }
.dc-spd { background: #e2f7d5; border: var(--line); border-radius: 16px; padding: 8px 12px; } .dc-spd b { font-family: var(--en); font-size: 22px; }
.dc-spd.sm { background: #fff; font-size: 14px; }
.dc-nx { color: var(--ink2); }
.dc-talk { max-width: 640px; margin: 16px auto 0; background: #e8f6ff; border: var(--line); border-radius: 16px; padding: 10px 14px; text-align: left; }
.dc-talk b { font-size: 14px; } .dc-talk p { margin: 2px 0 0; font-weight: 800; font-size: 18px; }
/* 読める証明 */
.dc-pf { padding: 16px 18px; }
.dc-bar { display: flex; border: var(--line); border-radius: 999px; overflow: hidden; font-weight: 900; font-size: 14px; }
.dc-bar span { padding: 5px 10px; white-space: nowrap; text-align: center; min-width: max-content; }
.dc-bar .d { background: #3ddc97; } .dc-bar .t { background: #ffb3c8; border-left: var(--line); }
.dc-facts { list-style: none; padding: 0; margin: 12px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.dc-facts li { background: #fffdf6; border: 2.5px solid var(--ink); border-radius: 12px; padding: 3px 11px; font-size: 14px; font-weight: 700; }
.dc-facts b { font-family: var(--en); font-size: 19px; }
.dc-pf summary { cursor: pointer; font-weight: 900; padding: 6px 0; }
.dc-tbl { overflow-x: auto; }
.dc-tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.dc-tbl th, .dc-tbl td { padding: 6px 8px; border-bottom: 1.5px solid #e6e1d3; text-align: left; vertical-align: middle; }
.dc-tbl th { font-size: 13px; background: #fff7d6; }
.dc-tbl td.en { font-size: 20px; font-weight: 600; white-space: nowrap; }
.dc-tbl tr.fc td.en { color: var(--pink); }
.dc-tbl tr.hw { background: #fff3f7; }
.dc-segs span { display: inline-block; border: 2px solid var(--ink); border-radius: 9px; padding: 0 7px 1px; margin: 1px 3px 1px 0; text-align: center; background: #fff; }
.dc-segs span.t { background: #ffe1ea; }
.dc-segs b { font-size: 17px; font-weight: 600; margin-right: 4px; } .dc-segs small { font-size: 11.5px; color: var(--ink2); font-family: 'Noto Sans', sans-serif; }
/* ホームのおしらせ・更新情報 */
.h-news { display: flex; align-items: center; gap: 10px; background: #fff; border: var(--line); border-radius: 16px; padding: 8px 14px; margin: 14px 0 0; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 14.5px; box-shadow: 3px 3px 0 var(--ink); }
.h-news i { font-style: normal; font-family: var(--en); font-size: 12px; background: var(--pink); color: #fff; border-radius: 99px; padding: 1px 9px; flex: none; }
.h-news time { color: var(--ink2); font-size: 12.5px; flex: none; font-family: var(--en); }
.h-news span { min-width: 0; }
.news-l { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 12px; }
.news-l li { padding: 14px 18px; }
.news-l time { font-family: var(--en); font-weight: 700; color: var(--ink2); }
.news-l h3 { margin: 2px 0 4px; font-size: 19px; font-weight: 900; }
.news-l p { margin: 0; }
@media (max-width: 760px) {
  .dc-hero { grid-template-columns: 1fr; } .dc-hero img { border-right: 0; border-bottom: var(--line); aspect-ratio: 16 / 9; } .dc-hero-t { padding: 16px; }
  .dc-why { grid-template-columns: 1fr; }
  .dc-warm-in { padding: 16px 14px 20px; } .dc-gp b { font-size: 30px; } .dc-w { font-size: 25px; padding: 3px 13px 5px; }
  .so-g b { font-size: 25px; } .so-g { min-width: 38px; padding: 2px 7px 3px; }
  .dc-key { display: block; margin: 2px 0 0; }
  .h-news { font-size: 13px; padding: 7px 10px; gap: 7px; }
}
/* 文が画面からはみ出さないよう、絵の高さをおさえる */
.dreader .dc-pg .rd-img { aspect-ratio: auto; height: min(calc((100vw - 32px) * .5625), calc(100vh - 330px), 540px); min-height: 180px; }
.dreader .dc-pg .rd-img img { object-fit: contain; }
.dreader.sb .rd-ja { margin-top: 16px; }
.dc-jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.dc-jump .chip { text-decoration: none; color: var(--ink); font-size: 14px; padding: 4px 13px; }
.dc-jump .chip b { font-family: var(--en); color: #fff; background: var(--c); border: 2px solid var(--ink); border-radius: 50%; width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 13px; margin-right: 2px; }
/* ホームの更新情報（目立つ版） */
.h-upd { margin: 18px 0 4px; background: var(--yellow); border: var(--line); border-radius: 22px; box-shadow: var(--sh); padding: 12px 16px 12px; }
.h-upd-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.h-upd-h b { font-size: 20px; font-weight: 900; }
.h-upd-h b::before { content: '📣 '; }
.h-upd-h a { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.h-upd-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: center; background: #fff; border: var(--line); border-radius: 16px; padding: 12px 16px; text-decoration: none; color: var(--ink); transition: transform .12s; }
.h-upd-top:hover { transform: translate(-2px, -2px); }
.h-upd-top i { font-style: normal; font-family: var(--en); font-size: 13px; background: var(--pink); color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 1px 11px; }
.h-upd-top time, .h-upd li time { font-family: var(--en); font-weight: 700; color: var(--ink2); font-size: 14px; }
.h-upd-top strong { grid-column: 1 / -1; font-size: clamp(19px, 2.9vw, 26px); font-weight: 900; line-height: 1.35; }
.h-upd-top span { grid-column: 1 / -1; font-size: 14.5px; font-weight: 700; }
.h-upd-top em { grid-column: 1 / -1; font-style: normal; font-weight: 900; color: var(--pink); }
.h-upd ul { list-style: none; margin: 8px 0 0; padding: 0 4px; display: grid; gap: 2px; }
.h-upd li { display: flex; gap: 10px; font-size: 14px; font-weight: 700; align-items: baseline; }
.h-upd li a { color: var(--ink); min-width: 0; }

/* ===== おと⇄もじドリル ===== */
.df-a { font-family: var(--en); } .df-b { font-family: Georgia, 'Times New Roman', serif; } .df-c { font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', 'Segoe Print', cursive; } .df-d { font-family: 'Courier New', Courier, monospace; }
#drill { margin-top: 16px; }
.dr-set, .dr-play, .dr-res { border: var(--line); border-radius: 26px; background: #fff; box-shadow: 8px 8px 0 var(--ink); padding: 20px; }
.dr-row { margin-bottom: 22px; } .dr-row h3 { margin: 0 0 10px; font-size: 19px; font-weight: 900; } .dr-row h3 small { font-weight: 700; color: var(--ink2); }
.dr-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dr-mode { text-align: left; border: var(--line); border-radius: 18px; background: #fff; padding: 12px 14px; box-shadow: var(--sh-s); }
.dr-mode b { display: block; font-size: 20px; font-weight: 900; } .dr-mode span { font-size: 13.5px; color: var(--ink2); }
.dr-mode.on { background: var(--yellow); }
.dr-pre { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; font-size: 13.5px; font-weight: 800; }
.dr-pre .chip { cursor: pointer; } .dr-weak { background: #ffd6e2 !important; }
.dr-g { border-left: 8px solid var(--c); padding: 4px 0 4px 12px; margin-bottom: 10px; }
.dr-gh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.dr-all { border: 2px solid var(--ink); border-radius: 99px; background: #fff; font-size: 12px; font-weight: 800; padding: 0 10px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-chip { min-width: 46px; height: 46px; padding: 0 10px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; font-family: var(--en); font-weight: 600; font-size: 20px; line-height: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; opacity: .55; }
.dr-chip small { font-size: 9.5px; font-weight: 600; color: var(--ink2); }
.dr-chip.on { background: var(--c, var(--yellow)); opacity: 1; box-shadow: var(--sh-s); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); } .dr-chip.on small { color: #fff; }
.dr-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.dr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-seg button { border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; padding: 6px 12px; font-weight: 800; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.dr-seg button.on { background: var(--yellow); box-shadow: var(--sh-s); } .dr-seg i { font-style: normal; font-size: 18px; font-weight: 600; }
.dr-msg { min-height: 1.6em; margin: 0 0 8px; font-weight: 800; color: var(--hl); }
.dr-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.dr-go .btn[disabled] { opacity: .4; pointer-events: none; }
.dr-tip { margin: 14px 0 0; font-size: 13px; color: var(--ink2); }
/* 出題 */
.dr-play { min-height: 520px; display: flex; flex-direction: column; }
.dr-top { display: flex; align-items: center; gap: 12px; }
.dr-bar { flex: 1; height: 14px; border: 2.5px solid var(--ink); border-radius: 99px; overflow: hidden; background: #fff; } .dr-bar i { display: block; height: 100%; background: var(--green); transition: width .3s; }
.dr-sc { font-family: var(--en); font-weight: 700; font-size: 18px; white-space: nowrap; } .dr-sc small { font-family: var(--ja); font-size: 12px; font-weight: 700; color: var(--ink2); }
.dr-q { flex: 1; display: grid; justify-items: center; align-content: center; gap: 12px; padding: 18px 0; }
.dr-hear { width: 108px; height: 108px; border-radius: 50%; border: var(--line); background: var(--pink); color: #fff; box-shadow: 0 6px 0 var(--ink); display: grid; place-items: center; padding: 0; }
.dr-hear svg { width: 54%; } .dr-hear:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.dr-big { font-size: 110px; font-weight: 600; line-height: 1.1; padding: 0 30px; border: var(--line); border-radius: 26px; background: var(--yellow); box-shadow: var(--sh); }
.dr-ask { margin: 0; font-weight: 900; font-size: 18px; text-align: center; } .dr-ask small { display: block; font-weight: 700; font-size: 13px; color: var(--ink2); }
.dr-ops { display: grid; gap: 12px; width: 100%; max-width: 760px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dr-ops.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; } .dr-ops.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.dr-op { position: relative; border: var(--line); border-radius: 20px; background: #fff; box-shadow: 0 5px 0 var(--ink); min-height: 96px; display: grid; place-items: center; padding: 8px; transition: transform .1s, opacity .2s; }
button.dr-op:hover { transform: translateY(-2px); } button.dr-op:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.dr-op b { font-size: 54px; font-weight: 600; line-height: 1.1; }
.dr-ops.n9 .dr-op { min-height: 78px; } .dr-ops.n9 .dr-op b { font-size: 40px; }
.dr-op kbd { position: absolute; top: 6px; left: 8px; font: 700 11px var(--en); color: var(--mute); border: 1.5px solid #cfc9df; border-radius: 6px; padding: 0 5px; background: #fff; }
.dr-pic img { width: min(120px, 80%); aspect-ratio: 1; object-fit: contain; }
.dr-snd { grid-template-rows: 1fr auto; gap: 8px; padding: 10px; }
.dr-sp { width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--sky); color: #fff; display: grid; place-items: center; padding: 0; position: relative; }
.dr-sp svg { width: 56%; } .dr-sp kbd { top: -6px; left: -8px; }
.dr-snd.heard { background: #eaf8ff; } .dr-snd.heard .dr-sp { background: var(--blue); }
.dr-pick { border: 2.5px solid var(--ink); border-radius: 12px; background: var(--yellow); font-weight: 900; padding: 4px 16px; box-shadow: var(--sh-s); }
.dr-op.ok { background: #b9f5d0; } .dr-op.ng { background: #ffc2cb; animation: drShake .3s; } .dr-op.dim { opacity: .35; }
.dr-q:has(.dr-op.ok) .dr-op { pointer-events: none; }
@keyframes drShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.dr-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: var(--line); border-radius: 18px; padding: 10px 14px; }
.dr-fb.ok { background: #e6fbef; } .dr-fb.ng { background: #ffe9ec; } .dr-fb[hidden] { display: none; }
.dr-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 26px; background: var(--green); border: 2.5px solid var(--ink); } .dr-fb.ng .dr-mark { background: var(--red); }
.dr-ans b { font-size: 34px; font-weight: 600; } .dr-ans i { font-style: normal; margin-left: 8px; font-size: 20px; color: var(--ink2); }
.dr-ex { display: inline-flex; align-items: center; gap: 8px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; padding: 4px 12px; } .dr-ex img { width: 44px; height: 44px; object-fit: contain; } .dr-ex b { font-size: 22px; font-weight: 600; } .dr-ex svg { width: 20px; }
.dr-more { font-size: 13px; font-weight: 800; color: var(--blue); } .dr-next { margin-left: auto; }
/* 結果 */
.dr-res { text-align: center; }
.dr-stars { font-size: 56px; color: var(--orange); line-height: 1; letter-spacing: .1em; } .dr-stars i { font-style: normal; color: #e4dfef; }
.dr-pct { font-family: var(--en); font-weight: 700; font-size: 46px; } .dr-pct small { font-size: 18px; margin-left: 8px; color: var(--ink2); }
.dr-say { font-weight: 800; } .dr-res h3 { margin: 18px 0 8px; }
.dr-miss { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.dr-mi { display: inline-flex; align-items: center; gap: 8px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; padding: 4px 12px; } .dr-mi b { font-size: 26px; font-weight: 600; } .dr-mi i { font-style: normal; color: var(--ink2); } .dr-mi svg { width: 20px; }
@media (max-width: 640px) {
  .dr-set, .dr-play, .dr-res { padding: 14px; border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); }
  .dr-modes { grid-template-columns: 1fr; gap: 8px; } .dr-mode { padding: 8px 12px; } .dr-mode b { font-size: 17px; display: inline; margin-right: 8px; }
  .dr-chip { min-width: 42px; height: 42px; font-size: 18px; }
  .dr-hear { width: 88px; height: 88px; } .dr-big { font-size: 80px; }
  .dr-ops { gap: 8px; } .dr-op { min-height: 80px; border-radius: 16px; } .dr-op b { font-size: 42px; } .dr-ops.n9 .dr-op b { font-size: 32px; } .dr-ops.n9 .dr-op { min-height: 64px; }
  .dr-op kbd { display: none; } .dr-play { min-height: 0; }
  .dr-fb { gap: 8px; } .dr-more { display: none; }
}
.drill-ban { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; margin-bottom: 20px; text-decoration: none; background: #fff6d6; }
.drill-ban .db-ic { width: 72px; height: 72px; margin: 0; }
.drill-ban b { display: block; font-size: 22px; font-weight: 900; } .drill-ban small { font-size: 14px; color: var(--ink2); }
@media (max-width: 640px) { .drill-ban { grid-template-columns: 48px 1fr; } .drill-ban .db-ic { width: 48px; height: 48px; } .drill-ban .btn { grid-column: 1 / -1; justify-self: start; } .drill-ban b { font-size: 18px; } }
.home-ban { margin: 22px 0 0; } .drill-ban .new { font-style: normal; font-family: var(--en); font-size: 12px; background: var(--pink); color: #fff; border-radius: 99px; padding: 1px 9px; margin-right: 8px; vertical-align: 3px; }
@media (max-width: 1420px) { .hd .nav { display: none; } .hd-r { margin-left: auto; } }
#drill { scroll-margin-top: 90px; }
@media (min-width: 641px) { .dr-go { position: sticky; bottom: 10px; z-index: 3; padding: 10px; background: rgba(255,255,255,.92); border-radius: 18px; } }

/* ホーム：10秒体験・つづきから・だれ向けの入口（接頭辞 h6-） */
.hero h1 .h1-k { color: var(--pink); }
body.home .hero h1 { font-size: clamp(30px, 5vw, 58px); line-height: 1.22; }
.h6-try { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; padding: 24px; background: #fffbe9; align-items: center; position: relative; overflow: hidden; }
.h6-q { margin: 0 0 12px; font-size: 18px; font-weight: 900; line-height: 1.5; }
.h6-q b:first-child { color: var(--pink); font-family: var(--en); margin-right: 4px; }
.h6-tiles { display: flex; gap: 12px; margin-bottom: 14px; }
.h6-t { width: 92px; height: 104px; font-family: var(--en); font-weight: 700; font-size: 64px; line-height: 1; border: var(--line); border-radius: 20px; background: #fff; box-shadow: var(--sh); color: var(--ink); cursor: pointer; transition: transform .12s, background .12s; padding: 0 0 8px; }
.h6-t:nth-child(2) { color: var(--hl); }
.h6-t.hot, .h6-t.on { background: var(--yellow); transform: translateY(-8px) scale(1.06); }
.h6-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.h6-btns .pulse { animation: pulse .5s ease-in-out infinite alternate; }
.h6-msg { margin: 0 0 4px; min-height: 3.2em; font-weight: 800; color: var(--ink2); line-height: 1.6; }
.h6-msg.ok { color: #0f8a55; } .h6-msg.ok b { font-family: var(--en); font-size: 1.25em; }
.h6-msg.ng { color: #c23a3a; }
.h6-s2 { border-top: 3px dashed #e6d9b8; padding-top: 14px; margin-top: 6px; }
.h6-sw { display: inline-flex; gap: 8px; flex-wrap: wrap; vertical-align: middle; }
.h6-sw .chip { font-family: var(--en); font-size: 24px; font-weight: 700; min-width: 50px; height: 50px; padding: 0 0 4px; justify-content: center; cursor: pointer; }
.h6-sw .chip.on { background: var(--yellow); }
.h6-cnt { margin-left: 12px; font-weight: 900; color: var(--pink); font-size: 14.5px; }
.h6-pic { aspect-ratio: 1; border: var(--line); border-radius: 24px; background: #fff; box-shadow: var(--sh); display: grid; place-items: center; align-content: center; text-align: center; padding: 10px; max-width: 280px; margin: 0 auto; width: 100%; }
.h6-pic i { font-style: normal; font-family: var(--en); font-size: 90px; color: #e3dccb; font-weight: 700; }
.h6-pic img { width: 72%; aspect-ratio: 1; object-fit: contain; }
.h6-pic b { display: block; font-family: var(--en); font-size: 34px; line-height: 1.1; }
.h6-pic span { font-weight: 800; color: var(--ink2); font-size: 14px; }
.h6-pic.on { animation: pop .35s; background: #fff; }
.h6-fin { grid-column: 1 / -1; background: #fff; border: var(--line); border-radius: 18px; padding: 16px 18px; }
.h6-fin p { margin: 0 0 10px; line-height: 1.8; font-size: 16.5px; } .h6-fin p b { background: linear-gradient(transparent 62%, var(--yellow) 62%); }
.h6-go { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 !important; }
.h6-try .confetti { position: absolute; inset: 0; pointer-events: none; }

#h6rec { margin-top: 26px; }
.h6-rec { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; padding: 22px 24px; background: #e9f9ef; align-items: center; }
.h6-rec .en-s { font-family: var(--en); font-weight: 700; color: var(--green); letter-spacing: .1em; font-size: 13px; display: block; }
.h6-rec h2 { margin: 0 0 12px; font-size: 26px; font-weight: 900; } .h6-rec h2 em { font-style: normal; font-size: 14px; background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 99px; padding: 2px 10px; vertical-align: middle; white-space: nowrap; }
.h6-g { font-family: var(--en); font-size: 1.2em; margin: 0 4px; }
.h6-all { font-weight: 900; font-size: 18px; margin: 0 0 8px; }
.h6-bar { height: 16px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; margin: 14px 0 4px; max-width: 420px; }
.h6-bar i { display: block; height: 100%; background: var(--mint); border-right: 2.5px solid var(--ink); border-radius: 99px; }
.h6-bn { font-weight: 800; color: var(--ink2); }
.h6-st { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.h6-st div { background: #fff; border: var(--line); border-radius: 16px; box-shadow: var(--sh-s); text-align: center; padding: 8px 4px; }
.h6-st b { font-family: var(--en); font-size: 30px; line-height: 1.1; } .h6-st small { font-family: var(--en); color: var(--mute); font-weight: 700; margin-left: 2px; }
.h6-st span { display: block; font-size: 12px; font-weight: 800; color: var(--ink2); }

.h6-whos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.h6-who { padding: 16px 14px 12px; }
.h6-who.w-kid { background: #ffe1ea; } .h6-who.w-adult { background: #dceeff; } .h6-who.w-pro { background: #e6e1ff; } .h6-who.w-teach { background: #e2f7d5; }
.h6-who h3 { margin: 0 0 2px; font-size: 20px; font-weight: 900; display: flex; align-items: center; gap: 6px; } .h6-who h3 .ic { width: 1.5em; height: 1.5em; }
.h6-who > p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink2); font-weight: 700; }
.h6-who ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.h6-who li a { display: block; background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 7px 10px; text-decoration: none; color: var(--ink); transition: transform .1s; }
.h6-who li a:hover { transform: translate(-1px, -2px); box-shadow: var(--sh-s); }
.h6-who li b { display: block; font-size: 15px; font-weight: 900; } .h6-who li b::after { content: ' →'; color: var(--pink); }
.h6-who li small { color: var(--ink2); font-size: 12px; }

@media (max-width: 980px) { .h6-whos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .h6-try { grid-template-columns: 1fr; padding: 16px 14px; gap: 14px; }
  .h6-pic:not(.on) { display: none; } .h6-pic { max-width: 170px; border-radius: 18px; } .h6-pic i { font-size: 60px; } .h6-pic b { font-size: 26px; }
  .h6-tiles { justify-content: center; } .h6-t { width: 78px; height: 88px; font-size: 54px; }
  .h6-btns .btn { flex: 1 1 100%; justify-content: center; }
  .h6-q { font-size: 16px; } .h6-msg { font-size: 14.5px; min-height: 3.4em; }
  .h6-rec { grid-template-columns: 1fr; padding: 16px 14px; } .h6-rec h2 { font-size: 22px; } .h6-rec .btn.big { width: 100%; justify-content: center; }
  .h6-st b { font-size: 22px; } .h6-st span { font-size: 10.5px; }
}
@media (max-width: 560px) { .h6-whos { grid-template-columns: 1fr; } }

/* コーナーいちらん（ホームを短く：2026-11-12） */
.hx-g { margin: 0 0 14px; } .hx-g h3 { margin: 0 0 7px; font-size: 16px; font-weight: 900; display: inline-block; background: var(--c); border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 14px; }
.hx-ts { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.hx-t { display: block; background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 7px 11px; text-decoration: none; color: var(--ink); transition: transform .1s; min-width: 0; }
.hx-t:hover { transform: translate(-1px, -2px); box-shadow: var(--sh-s); background: var(--c); }
.hx-t b { display: block; font-size: 14.5px; font-weight: 900; line-height: 1.35; } .hx-t small { display: block; color: var(--ink2); font-size: 11.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hx-ban { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; color: var(--ink); } .hx-ban .ic { width: 34px; height: 34px; flex: none; }
.hx-ban b { display: block; font-size: 14.5px; font-weight: 900; line-height: 1.35; } .hx-ban small { display: block; font-size: 12px; color: var(--ink2); line-height: 1.45; }
@media (max-width: 820px) { .hx-foot { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 560px) {
  .hx-ts { grid-template-columns: 1fr 1fr; gap: 6px; } .hx-t { padding: 6px 9px; } .hx-t b { font-size: 13.5px; }
  .h6-whos { grid-template-columns: 1fr; gap: 10px; } .h6-who { padding: 12px 12px 10px; } .h6-who > p { margin-bottom: 7px; }
  .h6-who ul { grid-template-columns: 1fr 1fr; gap: 6px; } .h6-who li a { padding: 6px 8px; height: 100%; } .h6-who li b { font-size: 13.5px; } .h6-who li small { display: none; }
}
.hx-t .new { font-style: normal; font-family: var(--en); font-size: 10px; background: var(--pink); color: #fff; border-radius: 99px; padding: 1px 6px; margin-right: 5px; vertical-align: 2px; }
@media (max-width: 560px) { .h6-who li b::after { content: none; } }

/* 音声学ラボの体験ツール（labx.js）。クラス名はすべて lx- で始まる。色・線は style.css の変数に合わせる */
.lx { --lx-ink: var(--ink, #1d1838); --lx-line: 3px solid var(--lx-ink); background: #fff; border: var(--lx-line); border-radius: 22px; box-shadow: 5px 5px 0 var(--lx-ink); padding: 20px; margin: 18px 0; color: var(--lx-ink); font-family: var(--ja, 'Zen Maru Gothic', system-ui, sans-serif); line-height: 1.7; min-width: 0; }
.lx *, .lx *::before, .lx *::after { box-sizing: border-box; }
.lx [hidden] { display: none !important; }
.lx p { margin: 0; }
.lx small { font-weight: 700; }
.lx .en { font-family: var(--en, 'Fredoka', system-ui, sans-serif); }
.lx .ipa { font-family: var(--ipa, 'Noto Sans', 'Segoe UI', sans-serif); }
.lx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.lx-lab { font-weight: 900; font-size: 13.5px; color: var(--ink2, #4a4566); }
.lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: var(--lx-line); border-radius: 14px; padding: 8px 16px; font: inherit; font-weight: 800; font-size: 15px; background: #fff; color: var(--lx-ink); box-shadow: 3px 3px 0 var(--lx-ink); cursor: pointer; transition: transform .08s, box-shadow .08s; min-height: 44px; }
.lx-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--lx-ink); }
.lx-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--lx-ink); }
.lx-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 3px 3px 0 var(--lx-ink); }
.lx-btn.lx-pri { background: var(--pink, #ff4f79); color: #fff; }
.lx-btn.lx-sm { font-size: 14px; padding: 5px 12px; min-height: 38px; border-radius: 12px; }
.lx-seg { display: inline-flex; border: var(--lx-line); border-radius: 999px; overflow: hidden; background: #fff; box-shadow: 3px 3px 0 var(--lx-ink); }
.lx-seg button { border: 0; background: none; font: inherit; font-weight: 800; font-size: 14px; padding: 7px 13px; cursor: pointer; color: var(--lx-ink); min-height: 40px; }
.lx-seg button + button { border-left: 2.5px solid var(--lx-ink); }
.lx-seg button.on { background: var(--yellow, #ffd23f); }
.lx-check { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 14px; cursor: pointer; padding: 4px 2px; }
.lx-check input { width: 18px; height: 18px; accent-color: var(--lx-ink); margin: 0; }
.lx-key { width: 14px; height: 14px; border: 2px solid var(--lx-ink); display: inline-block; }
.lx-key-en { border-radius: 50%; background: var(--yellow, #ffd23f); }
.lx-key-ja { border-radius: 4px; background: var(--mint, #3ddc97); }
.lx-chip { border: 2.5px solid var(--lx-ink); border-radius: 999px; padding: 4px 13px; font: inherit; font-weight: 800; font-size: 15px; background: #fff; color: var(--lx-ink); cursor: pointer; min-height: 38px; min-width: 42px; }
.lx-chip:hover { background: #fff6cf; }
.lx-chip.on { background: var(--lx-ink); color: #fff; }
.lx-play { width: 46px; height: 46px; border-radius: 50%; border: var(--lx-line); background: var(--yellow, #ffd23f); color: var(--lx-ink); box-shadow: 3px 3px 0 var(--lx-ink); display: inline-grid; place-items: center; padding: 0; cursor: pointer; flex-shrink: 0; }
.lx-play svg { width: 20px; height: 20px; }
.lx-play.sm { width: 36px; height: 36px; border-width: 2.5px; box-shadow: 2px 2px 0 var(--lx-ink); }
.lx-play.sm svg { width: 15px; height: 15px; }
.lx-play.on { background: var(--pink, #ff4f79); color: #fff; }
.lx-note { border: 2.5px solid var(--lx-ink); border-radius: 16px; padding: 12px 16px; margin-top: 14px; font-size: 14.5px; }
.lx-kidbox { background: #fff0f5; }
.lx-adultbox { background: #eef3ff; font-size: 14px; }
.lx-src { margin-top: 12px !important; font-size: 12px; color: var(--mute, #7a7593); line-height: 1.6; }
.lx-priv { font-size: 13.5px; background: #eafff5; border: 2px dashed var(--lx-ink); border-radius: 12px; padding: 7px 12px; margin: 0 0 12px !important; }
.lx-msg { font-size: 14px; font-weight: 700; background: #fff3d6; border: 2.5px solid var(--lx-ink); border-radius: 12px; padding: 8px 12px; margin: 0 0 12px !important; }
.lx-hint { font-size: 13.5px; color: var(--ink2, #4a4566); margin-top: 6px !important; }
.lx-cap { font-size: 12.5px; color: var(--ink2, #4a4566); line-height: 1.6; }
.lx-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lx-ink); color: #fff; font-family: var(--en, system-ui); font-weight: 700; font-size: 15px; flex-shrink: 0; }

/* ---------- 1. 母音シンセサイザー */
.lx-synth-g { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lx-pad { width: 100%; height: auto; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.lx-pad-bg { fill: #f3f0ff; stroke: var(--lx-ink); stroke-width: 3; }
.lx-pad.lx-on .lx-pad-bg { fill: #fff6cf; }
.lx-gl { stroke: rgba(29, 24, 56, .13); stroke-width: 1; }
.lx-tick { font: 600 11.5px var(--en, system-ui); fill: var(--mute, #7a7593); }
.lx-ax { font: 800 14px var(--ja, system-ui); fill: var(--lx-ink); }
.lx-ax-f { fill: var(--mute, #7a7593); font-size: 12px; }
.lx-ax-in { font-size: 13px; pointer-events: none; opacity: .8; }
.lx-quad { fill: rgba(255, 255, 255, .7); stroke: var(--lx-ink); stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; pointer-events: none; }
.lx-dot { cursor: pointer; outline: none; }
.lx-dot circle, .lx-dot rect { stroke: var(--lx-ink); stroke-width: 2.5; }
.lx-dot-en circle { fill: var(--yellow, #ffd23f); }
.lx-dot-r circle { fill: #e3dcff; }
.lx-dot-ja rect { fill: var(--mint, #3ddc97); }
.lx-dot text { font-size: 15px; font-weight: 700; text-anchor: middle; fill: var(--lx-ink); pointer-events: none; }
.lx-dot-ja text { font-family: var(--ja, system-ui); font-weight: 900; font-size: 14px; }
.lx-dot.on circle, .lx-dot.on rect { fill: var(--pink, #ff4f79); }
.lx-dot.on text { fill: #fff; }
.lx-dot:focus-visible circle, .lx-dot:focus-visible rect { stroke-width: 4.5; }
.lx-cur { pointer-events: none; }
.lx-cur-o { fill: rgba(255, 79, 121, .18); stroke: var(--pink, #ff4f79); stroke-width: 3; }
.lx-cur-i { fill: var(--pink, #ff4f79); stroke: #fff; stroke-width: 2; }
.lx-pad.lx-on .lx-cur-o { animation: lx-pulse .5s ease-in-out infinite alternate; }
@keyframes lx-pulse { from { r: 16px; } to { r: 25px; } }
.lx-side { display: grid; gap: 10px; min-width: 0; }
.lx-read { display: flex; gap: 12px; align-items: stretch; border: var(--lx-line); border-radius: 16px; padding: 10px 12px; background: #fffbea; }
.lx-read-v { display: grid; place-items: center; align-content: center; min-width: 70px; border-right: 2px dashed rgba(29, 24, 56, .3); padding-right: 10px; }
.lx-near { font-size: 34px; font-weight: 700; line-height: 1.1; }
.lx-read-v small { font-size: 11px; color: var(--mute, #7a7593); white-space: nowrap; }
.lx-read dl { margin: 0; flex: 1; display: grid; gap: 2px; min-width: 0; }
.lx-read dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lx-read dt { font-family: var(--en, system-ui); font-weight: 700; font-size: 15px; }
.lx-read dt small { font-family: var(--ja, system-ui); font-size: 11px; color: var(--mute, #7a7593); margin-left: 4px; }
.lx-read dd { margin: 0; font-size: 12px; white-space: nowrap; }
.lx-read dd b { font-family: var(--en, system-ui); font-size: 19px; display: inline-block; min-width: 46px; text-align: right; }
.lx-spec1 { width: 100%; height: auto; display: block; border: var(--lx-line); border-radius: 14px; background: #fff; }
.lx-glides { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lx-glides .lx-lab { width: 100%; }

/* ---------- 2. 声の見える化 */
.lx-missions { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; margin-bottom: 14px; }
.lx-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-mchips .lx-chip { font-family: var(--en, system-ui); }
.lx-mcard { grid-column: 1 / -1; border: var(--lx-line); border-radius: 16px; background: #fffbea; padding: 12px 16px; }
.lx-mt { font-size: 17px; font-weight: 900; display: block; margin-bottom: 2px; }
.lx-mk { font-size: 14.5px; }
.lx-scope { border: var(--lx-line); border-radius: 16px; overflow: hidden; background: var(--lx-ink); }
.lx-wave { display: block; width: 100%; height: 56px; background: #fff; border-bottom: var(--lx-line); }
.lx-sg-w { position: relative; touch-action: pan-y; }
.lx-sg { display: block; width: 100%; height: 260px; background: var(--lx-ink); }
.lx-yax { position: absolute; left: 0; top: 0; bottom: 0; width: 34px; pointer-events: none; }
.lx-yax span { position: absolute; left: 4px; transform: translateY(50%); font: 700 11px var(--en, system-ui); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.lx-yax span:first-child { transform: translateY(0); }
.lx-yax span:last-child { transform: translateY(100%); }
.lx-ph { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; pointer-events: none; }
.lx-probe { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed rgba(255, 255, 255, .85); pointer-events: none; }
.lx-probe span { position: absolute; bottom: 4px; background: #fff; color: var(--lx-ink); border: 2px solid var(--lx-ink); border-radius: 8px; padding: 0 7px; font: 700 12.5px var(--en, system-ui); white-space: nowrap; }
.lx-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 44px; color: #fff; font-weight: 800; font-size: 15px; pointer-events: none; }
.lx-legend { display: flex; align-items: center; gap: 6px; padding: 5px 10px; color: #fff; font-size: 11.5px; font-weight: 700; flex-wrap: wrap; }
.lx-legend i { width: 90px; height: 10px; border-radius: 5px; border: 1.5px solid #fff; background: linear-gradient(90deg, #1d1838, #342680 22%, #9632c8 45%, #ff4f79 66%, #ffd23f 86%, #fffceb); }
.lx-leg-r { margin-left: auto; opacity: .85; }
.lx-samples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }

/* ---------- 3. のどのふるえ判定 */
.lx-vo-g { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 14px; }
.lx-vo-meter { display: grid; justify-items: center; gap: 8px; text-align: center; }
.lx-folds { width: 170px; height: auto; }
.lx-fo-bg { fill: #ffe3ea; stroke: var(--lx-ink); stroke-width: 4; }
.lx-fo-l, .lx-fo-r { fill: #fff; stroke: var(--lx-ink); stroke-width: 4; stroke-linejoin: round; transform-origin: 120px 100px; transition: transform .15s; }
.lx-fo-air path { fill: none; stroke: var(--sky, #2ec4f1); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 12; opacity: 0; }
/* 息だけ：声帯は開いたまま、空気が通りぬける */
.lx-folds[data-st=unv] .lx-fo-l { transform: translateX(-17px); }
.lx-folds[data-st=unv] .lx-fo-r { transform: translateX(17px); }
.lx-folds[data-st=unv] .lx-fo-air path { opacity: 1; animation: lx-air .5s linear infinite; }
.lx-folds[data-st=unv] .lx-fo-bg { fill: #dff6ff; }
/* 声あり：声帯が閉じたり開いたりをくり返す（実際は 1 秒に 100〜300 回ほど） */
.lx-folds[data-st=voiced] .lx-fo-l { animation: lx-vibl .09s linear infinite alternate; fill: var(--pink, #ff4f79); }
.lx-folds[data-st=voiced] .lx-fo-r { animation: lx-vibr .09s linear infinite alternate; fill: var(--pink, #ff4f79); }
.lx-folds[data-st=voiced] .lx-fo-bg { fill: #fff0b8; }
@keyframes lx-air { to { stroke-dashoffset: 22; } }
@keyframes lx-vibl { from { transform: translateX(-1px); } to { transform: translateX(-11px); } }
@keyframes lx-vibr { from { transform: translateX(1px); } to { transform: translateX(11px); } }
.lx-vo-state { font-size: 19px; font-weight: 900; min-height: 34px; }
.lx-vo-state[data-st=voiced] { color: #d81e55; }
.lx-vo-state[data-st=unv] { color: #0b7fae; }
.lx-vo-bar { position: relative; width: 100%; max-width: 280px; height: 22px; border: var(--lx-line); border-radius: 999px; background: linear-gradient(90deg, #bfeeff, #fff 50%, #ffc3d2); margin-bottom: 20px; }
.lx-vo-bar i { position: absolute; top: -6px; left: 50%; width: 14px; height: 28px; margin-left: -7px; border-radius: 7px; background: var(--lx-ink); transition: left .12s; }
.lx-vo-bar span { position: absolute; top: 24px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.lx-vo-bar .l { left: 0; } .lx-vo-bar .r { right: 0; }
.lx-vo-f0 { font-size: 13.5px; font-weight: 700; }
.lx-vo-f0 b { font-family: var(--en, system-ui); font-size: 18px; }
.lx-vo-game { display: grid; gap: 10px; min-width: 0; }
.lx-vo-now { display: flex; align-items: center; gap: 12px; border: var(--lx-line); border-radius: 16px; background: #fffbea; padding: 10px 14px; }
.lx-vo-sym { font-size: 34px; font-weight: 700; min-width: 64px; text-align: center; }
.lx-vo-now > div { flex: 1; min-width: 0; }
.lx-vo-say { display: block; font-size: 17px; font-weight: 900; line-height: 1.4; }
.lx-vo-ja { display: block; font-size: 12.5px; color: var(--ink2, #4a4566); line-height: 1.5; }
.lx-vo-prog { height: 18px; border: var(--lx-line); border-radius: 999px; background: #fff; overflow: hidden; }
.lx-vo-prog i { display: block; height: 100%; width: 0; background: var(--mint, #3ddc97); border-right: 2.5px solid var(--lx-ink); transition: width .1s linear; }
.lx-vo-prog i[style*="width: 0%"] { border-right: 0; }
.lx-vo-tip { font-size: 14px; font-weight: 700; min-height: 48px; }
.lx-vo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lx-vo-pick { width: 100%; display: flex; align-items: center; gap: 8px; border: 2.5px solid var(--lx-ink); border-radius: 12px; background: #fff; padding: 5px 10px; font: inherit; cursor: pointer; color: var(--lx-ink); min-height: 42px; }
.lx-vo-pick .ipa { font-size: 19px; font-weight: 700; }
.lx-vo-pick small { font-size: 11.5px; color: var(--ink2, #4a4566); }
.lx-vo-pick em { margin-left: auto; font-style: normal; font-weight: 900; color: #fff; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: #ddd; }
.lx-vo-list li:nth-child(odd) .lx-vo-pick { background: #eefaff; }
.lx-vo-list li:nth-child(even) .lx-vo-pick { background: #fff0f4; }
.lx-vo-list li.cur .lx-vo-pick { box-shadow: 3px 3px 0 var(--lx-ink); background: var(--yellow, #ffd23f); }
.lx-vo-list li.ok em { background: var(--green, #2ec27e); }

/* ---------- 4. 子音ビルダー */
.lx-bd-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lx-bd-q { display: flex; align-items: center; gap: 8px; margin: 12px 0 7px; }
.lx-bd-q:first-child { margin-top: 0; }
.lx-bd-q b { font-size: 17px; font-weight: 900; }
.lx-bd-q small { font-size: 12.5px; color: var(--mute, #7a7593); }
.lx-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.lx-opts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-opts button { border: 2.5px solid var(--lx-ink); border-radius: 12px; background: #fff; padding: 6px 4px; font: inherit; cursor: pointer; display: grid; gap: 1px; text-align: center; line-height: 1.3; color: var(--lx-ink); min-height: 52px; align-content: center; }
.lx-opts button b { font-size: 14.5px; font-weight: 900; }
.lx-opts button small { font-size: 10.5px; color: var(--ink2, #4a4566); font-weight: 600; }
.lx-opts button:hover { background: #fff6cf; }
.lx-opts button.on { background: var(--yellow, #ffd23f); box-shadow: 3px 3px 0 var(--lx-ink); transform: translate(-1px, -1px); }
.lx-bd-out { border: var(--lx-line); border-radius: 18px; padding: 16px; background: #f6f6f8; min-height: 240px; display: grid; gap: 10px; align-content: start; }
.lx-bd-out.lx-hit { background: #eafff5; }
.lx-bd-out.lx-oth { background: #f1ecff; }
.lx-bd-out.lx-imp { background: #ffeceb; }
.lx-bd-tag { display: inline-block; font-weight: 900; font-size: 14px; background: #fff; border: 2.5px solid var(--lx-ink); border-radius: 999px; padding: 1px 12px; }
.lx-bd-big { display: flex; align-items: center; gap: 14px; margin: 6px 0 2px; }
.lx-bd-big > span { font-size: 54px; font-weight: 700; line-height: 1.15; }
.lx-bd-name b { font-size: 16px; font-weight: 900; }
.lx-bd-name span { font-size: 13px; color: var(--ink2, #4a4566); margin-left: 8px; }
.lx-bd-ex { font-size: 19px; font-weight: 600; margin: 2px 0 !important; }
.lx-bd-note { font-size: 13.5px; line-height: 1.65; }
.lx-bd-mouth { max-width: 300px; width: 100%; margin: 0 auto; background: #fff; border: 2.5px solid var(--lx-ink); border-radius: 14px; overflow: hidden; }
.lx-bd-mouth svg { display: block; width: 100%; height: auto; }
.lx-bd-col { margin-top: 16px; }
.lx-bd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lx-bd-c { min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 6px; border: 2.5px dashed rgba(29, 24, 56, .35); border-radius: 10px; font-weight: 700; font-size: 16px; color: rgba(29, 24, 56, .3); }
.lx-bd-c.on { border-style: solid; border-color: var(--lx-ink); background: var(--mint, #3ddc97); color: var(--lx-ink); box-shadow: 2px 2px 0 var(--lx-ink); }

/* ---------- 5. 息のタイミング（VOT） */
.lx-vt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.lx-vt { display: block; width: 100%; min-width: 620px; height: auto; }
.lx-vt-w { font-size: 26px; font-weight: 700; fill: var(--lx-ink); }
.lx-vt-ipa { font-size: 15px; fill: var(--ink2, #4a4566); }
.lx-vt-track { fill: #fff; stroke: var(--lx-ink); stroke-width: 3; }
.lx-vt-clo { fill: #d9d6e6; }
.lx-vt-s { fill: #c9f0ff; }
.lx-vt-asp { fill: var(--sky, #2ec4f1); opacity: .55; }
.lx-vt-voi { fill: none; stroke: var(--pink, #ff4f79); stroke-width: 3.5; stroke-linecap: round; }
.lx-vt-pre { fill: none; stroke: var(--pink, #ff4f79); stroke-width: 2.5; stroke-linejoin: round; }
.lx-vt-burst { stroke: var(--lx-ink); stroke-width: 4; stroke-linecap: round; }
.lx-vt-t { font: 800 12.5px var(--ja, system-ui); fill: var(--lx-ink); }
.lx-vt-lab { font: 800 13px var(--ja, system-ui); fill: #d81e55; }
.lx-vt-ax { stroke: var(--lx-ink); stroke-width: 2; }
.lx-vt-axt { font: 600 12px var(--en, system-ui); fill: var(--ink2, #4a4566); }
.lx-vt-zero { font: 800 13px var(--ja, system-ui); fill: var(--lx-ink); }
.lx-vt-head { stroke: var(--purple, #7b2ff7); stroke-width: 3; stroke-dasharray: 6 4; }
.lx-vt-bar { stroke: var(--lx-ink); stroke-width: 4; stroke-linecap: round; }
.lx-vt-paper path { fill: #fff; stroke: var(--lx-ink); stroke-width: 2.5; stroke-linejoin: round; }
.lx-vt-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.lx-vt-legend i { display: inline-block; width: 22px; height: 12px; border: 2px solid var(--lx-ink); border-radius: 4px; vertical-align: -1px; margin-right: 5px; }
.lx-k-clo { background: #d9d6e6; } .lx-k-asp { background: #8fdcf6; } .lx-k-voi { background: var(--pink, #ff4f79); }
.lx-vt-wbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; }
.lx-vt-lab2 { margin-top: 18px; border-top: 3px dashed rgba(29, 24, 56, .25); padding-top: 14px; }
.lx-vt-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; }
.lx-range { flex: 1; min-width: 180px; height: 32px; accent-color: var(--pink, #ff4f79); }
.lx-vt-out { font-family: var(--en, system-ui); font-weight: 700; font-size: 20px; min-width: 84px; text-align: right; }
.lx-vt-hear { margin-top: 8px !important; font-size: 14.5px; background: #fffbea; border: 2.5px solid var(--lx-ink); border-radius: 12px; padding: 8px 12px; }

/* ---------- 6. リズム打ち */
.lx-rh { border: var(--lx-line); border-radius: 16px; padding: 10px 14px 6px; margin-top: 12px; background: #fffbea; }
.lx-rh[data-l=ja] { background: #eefaff; }
.lx-rh-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; font-weight: 800; }
.lx-rh-t { margin-left: auto; font-size: 12.5px; color: var(--ink2, #4a4566); }
.lx-rh-line { position: relative; height: 104px; margin-top: 4px; border-bottom: 3px solid var(--lx-ink); }
.lx-rh-s { position: absolute; bottom: 0; width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.lx-rh-s i { display: block; border: 2.5px solid var(--lx-ink); border-radius: 50%; background: #fff; flex-shrink: 0; transition: transform .08s, background .08s; }
.lx-rh-s.st i { width: 46px; height: 46px; background: var(--pink, #ff4f79); }
.lx-rh-s.wk i { width: 15px; height: 15px; background: #fff; }
.lx-rh-s.mo i { width: 26px; height: 26px; background: var(--sky, #2ec4f1); }
.lx-rh-s em { font-style: normal; font-weight: 700; font-size: 14px; line-height: 1.5; white-space: nowrap; }
.lx-rh-s.st em { font-size: 16px; }
.lx-rh-s.wk em { font-size: 11.5px; color: var(--ink2, #4a4566); }
.lx-rh-s.hit i { transform: scale(1.3); background: var(--yellow, #ffd23f); }
.lx-rh-head { display: none; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--purple, #7b2ff7); border-radius: 2px; }

/* ---------- せまい画面 */
@media (max-width: 760px) {
  .lx { padding: 14px 12px; border-radius: 18px; }
  .lx-synth-g, .lx-vo-g, .lx-bd-g { grid-template-columns: minmax(0, 1fr); }
  .lx-pad-w { margin: 0 -6px; }
  .lx-tick { font-size: 15px; }
  .lx-ax { font-size: 17px; }
  .lx-ax-f { font-size: 14px; }
  .lx-dot text { font-size: 17px; }
  .lx-sg { height: 210px; }
  .lx-btn { font-size: 14px; padding: 7px 12px; }
  .lx-seg button { padding: 7px 10px; font-size: 13px; }
  .lx-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-bd-big > span { font-size: 46px; }
  .lx-rh-s.st i { width: 34px; height: 34px; }
  .lx-rh-s.mo i { width: 17px; height: 17px; }
  .lx-rh-s.wk i { width: 11px; height: 11px; }
  .lx-rh-s em { font-size: 11px; }
  .lx-rh-s.st em { font-size: 12px; }
  .lx-rh-s.wk em { font-size: 9.5px; }
  .lx-leg-r { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-folds[data-st=voiced] .lx-fo-l, .lx-folds[data-st=voiced] .lx-fo-r, .lx-pad.lx-on .lx-cur-o { animation: none; }
}

/* ===== アニメ授業プレーヤー ===== */
.lsn { border: var(--line); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; background: var(--ink); }
.lsn-stage { --u: 10px; position: relative; aspect-ratio: 16 / 9; overflow: hidden; outline: 0; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 90% at 50% 0%, #3b3f9e 0%, #262a72 45%, #191b4d 100%); color: #fff; font-size: calc(var(--u) * 2.2); }
.lsn-stage:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
@media (max-width: 640px) { .lsn-stage { aspect-ratio: 4 / 5; } .lsn { border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); } }
.lsn-stage.tall { --u: 6px; }
.lsn-bg i { position: absolute; border-radius: 50%; opacity: .16; animation: lsnFloat 14s ease-in-out infinite; }
.lsn-bg i:nth-child(1) { width: 38%; aspect-ratio: 1; left: -10%; top: -18%; background: var(--pink); }
.lsn-bg i:nth-child(2) { width: 30%; aspect-ratio: 1; right: -8%; top: 10%; background: var(--sky); animation-delay: -4s; }
.lsn-bg i:nth-child(3) { width: 26%; aspect-ratio: 1; left: 30%; bottom: -22%; background: var(--yellow); animation-delay: -8s; }
.lsn-bg i:nth-child(4) { width: 12%; aspect-ratio: 1; left: 12%; bottom: 20%; background: var(--mint); animation-delay: -2s; }
.lsn-bg i:nth-child(5) { width: 9%; aspect-ratio: 1; right: 20%; bottom: 30%; background: var(--violet); animation-delay: -6s; }
@keyframes lsnFloat { 50% { transform: translate(3%, -5%) scale(1.08); } }
.lsn:not(.playing) .lsn-bg i, .lsn:not(.playing) .lsn-mas { animation-play-state: paused; }

.lsn-bar { position: absolute; z-index: 6; left: 2.5%; right: 2.5%; top: calc(var(--u) * 1.6); display: flex; gap: calc(var(--u) * .6); }
.lsn-bar button { flex: 1; height: calc(var(--u) * 2.6); padding: calc(var(--u) * .9) 0; border: 0; background: none; }
.lsn-bar i { display: block; height: 100%; border-radius: 99px; background: rgba(255, 255, 255, .28); transition: background .3s; }
.lsn-bar .done i { background: #fff; } .lsn-bar .now i { background: var(--yellow); }
.lsn-cap { position: absolute; z-index: 5; left: 3%; right: 3%; top: calc(var(--u) * 5); text-align: center; font-weight: 900; font-size: calc(var(--u) * 3.3); line-height: 1.3; text-shadow: 0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-40%); }
.lsn-cap.in { opacity: 1; transform: none; transition: .45s cubic-bezier(.2, 1.4, .4, 1); }
.lsn-main { position: absolute; left: 4%; right: 4%; top: calc(var(--u) * 11); bottom: calc(var(--u) * 15); display: grid; place-items: center; opacity: 0; }
.lsn-main.in { opacity: 1; transition: opacity .35s; }
.lsn-stage.tall .lsn-main { bottom: calc(var(--u) * 30); }
.lsn-mas { position: absolute; z-index: 4; left: 1%; bottom: calc(var(--u) * 1); width: calc(var(--u) * 13); filter: drop-shadow(calc(var(--u) * .4) calc(var(--u) * .4) 0 rgba(0, 0, 0, .35)); animation: lsnBob 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.lsn-mas.talk { animation: lsnTalk .42s ease-in-out infinite; }
@keyframes lsnBob { 50% { transform: translateY(-3%) rotate(-1.5deg); } }
@keyframes lsnTalk { 50% { transform: translateY(-5%) scale(1.03, .97) rotate(2deg); } }
.lsn-sub { position: absolute; z-index: 5; left: calc(var(--u) * 15); right: 3%; bottom: calc(var(--u) * 1.8); min-height: calc(var(--u) * 10); padding: calc(var(--u) * 1.3) calc(var(--u) * 2); background: #fff; color: var(--ink); border: calc(var(--u) * .35) solid var(--ink); border-radius: calc(var(--u) * 2.2); font-weight: 700; font-size: max(calc(var(--u) * 2.05), 12.5px); line-height: 1.55; box-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 rgba(0, 0, 0, .35); }
.lsn-sub::before { content: ''; position: absolute; left: calc(var(--u) * -1.5); bottom: calc(var(--u) * 2.4); border: calc(var(--u) * .9) solid transparent; border-right-color: var(--ink); border-left: 0; }
.lsn-sub .yet { opacity: .28; } .lsn-sub .now { color: var(--hl); } .lsn-sub b { margin: 0 .15em; font-weight: 700; } .lsn-sub b.en { font-size: 1.1em; }
.lsn-stage.tall .lsn-sub { left: 3%; bottom: calc(var(--u) * 2); min-height: calc(var(--u) * 24); }
.lsn-stage.tall .lsn-sub::before { display: none; }
.lsn-stage.tall .lsn-mas { left: auto; right: 2%; bottom: calc(var(--u) * 26); width: calc(var(--u) * 15); z-index: 6; }
.lsn-stage.nosub .lsn-sub { display: none; }
.lsn-poster, .lsn-end { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, #4a4fc0 0%, #262a72 55%, #191b4d 100%); text-align: center; padding: 4%; }
.lsn-poster[hidden], .lsn-end[hidden] { display: none; }
.lsn-poster > img { position: absolute; right: 3%; bottom: 0; width: 24%; animation: lsnBob 2.6s ease-in-out infinite; }
.lsn-pin { display: grid; justify-items: center; gap: calc(var(--u) * 1.4); max-width: 78%; }
.lsn-tag { background: var(--yellow); color: var(--ink); font-weight: 900; font-size: max(calc(var(--u) * 1.8), 12px); padding: .15em 1em; border-radius: 99px; border: calc(var(--u) * .3) solid var(--ink); }
.lsn-pin h3 { margin: 0; font-size: calc(var(--u) * 5); font-weight: 900; line-height: 1.25; text-wrap: balance; }
.lsn-pin p { margin: 0; font-size: max(calc(var(--u) * 2.5), 13px); font-weight: 700; color: #ffe9a8; text-wrap: balance; }
.lsn-pin small { opacity: .7; font-size: max(calc(var(--u) * 1.5), 11px); }
.lsn-big { width: calc(var(--u) * 13); height: calc(var(--u) * 13); min-width: 64px; min-height: 64px; border-radius: 50%; border: calc(var(--u) * .5) solid var(--ink); background: var(--pink); color: #fff; display: grid; place-items: center; box-shadow: 0 calc(var(--u) * .8) 0 var(--ink); animation: lsnPulse 1.6s ease-in-out infinite; padding: 0; }
.lsn-big svg { width: 50%; margin-left: 6%; }
.lsn-big:hover { transform: translateY(-2px) scale(1.04); }
@keyframes lsnPulse { 50% { box-shadow: 0 calc(var(--u) * .8) 0 var(--ink), 0 0 0 calc(var(--u) * 2) rgba(255, 79, 121, .25); } }
.lsn-end img { width: calc(var(--u) * 18); }
.lsn-endb { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; color: var(--ink); }
.lsn-endb .btn svg { width: 1.1em; height: 1.1em; vertical-align: -.15em; }
.lsn-ctl { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--ink); color: #fff; }
.lsn-ctl button { border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; padding: 0; flex-shrink: 0; }
.lsn-ctl button:hover { background: rgba(255, 255, 255, .25); }
.lsn-ctl button svg { width: 22px; height: 22px; }
.lsn-ctl .lsn-pp { background: var(--pink); width: 52px; }
.lsn-ctl .lsn-t { width: auto; padding: 0 12px; font-weight: 800; font-size: 13.5px; }
.lsn-ctl .lsn-t.on { background: var(--yellow); color: var(--ink); }
.lsn-no { font-family: var(--en); font-weight: 600; font-size: 14px; margin-left: 6px; opacity: .85; white-space: nowrap; }
.lsn-sp { flex: 1; }

/* --- 場面 --- */
.lsn [data-step] { opacity: 0; transform: translateY(18%) scale(.96); }
.lsn [data-step].in { opacity: 1; transform: none; transition: .45s cubic-bezier(.2, 1.3, .4, 1); }
.l-title { text-align: center; }
.l-big { font-size: calc(var(--u) * 19); font-weight: 700; line-height: 1; letter-spacing: .03em; }
.l-big span { display: inline-block; color: var(--yellow); text-shadow: calc(var(--u) * .7) calc(var(--u) * .7) 0 var(--ink); animation: lsnPop .6s cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(var(--i) * .12s + .2s); }
.l-big span:nth-child(even) { color: #7fe3ff; } .l-big u { text-decoration: none; opacity: .5; }
@keyframes lsnPop { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
.l-hook { margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 3); font-weight: 900; color: #ffe9a8; text-wrap: balance; }
.l-tile { display: inline-grid; place-items: center; min-width: calc(var(--u) * 11); height: calc(var(--u) * 12); padding: 0 calc(var(--u) * 2); background: #fff; color: var(--ink); border: calc(var(--u) * .45) solid var(--ink); border-radius: calc(var(--u) * 2.4); font-size: calc(var(--u) * 8); font-weight: 600; box-shadow: calc(var(--u) * .6) calc(var(--u) * .6) 0 rgba(0, 0, 0, .4); }
.l-merge { display: grid; justify-items: center; gap: calc(var(--u) * 1.2); }
.l-parts { display: flex; align-items: center; gap: calc(var(--u) * 2); transition: gap .6s cubic-bezier(.6, -.3, .3, 1.4), opacity .4s .5s; }
.l-parts .l-tile:nth-of-type(odd) { background: #ffe1ea; } .l-parts .l-tile:nth-of-type(even) { background: #d9f4ff; }
.l-plus { font-style: normal; font-weight: 900; font-size: calc(var(--u) * 5); transition: .3s; }
.l-arrow { font-size: calc(var(--u) * 3); color: var(--yellow); opacity: 0; transition: .3s .5s; }
.l-to { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 2); opacity: 0; transform: scale(.4); transition: .5s cubic-bezier(.2, 1.6, .4, 1) .55s; }
.l-to .l-tile.big { background: var(--yellow); font-size: calc(var(--u) * 10); height: calc(var(--u) * 14); min-width: calc(var(--u) * 18); }
.l-ipa { font-family: var(--ipa); font-size: calc(var(--u) * 5); color: #ffe9a8; }
.l-merge.go .l-parts { gap: 0; } .l-merge.go .l-plus { width: 0; opacity: 0; font-size: 0; } .l-merge.go .l-arrow { opacity: 1; } .l-merge.go .l-to { opacity: 1; transform: none; }
.l-ring { position: absolute; left: calc(var(--u) * 9); top: 50%; width: calc(var(--u) * 4); height: calc(var(--u) * 4); margin: calc(var(--u) * -2); border-radius: 50%; border: calc(var(--u) * .5) solid var(--yellow); opacity: 0; pointer-events: none; }
.l-to.ping .l-ring { animation: lsnRing .9s ease-out; } .l-to.ping .l-ring.r2 { animation-delay: .25s; }
@keyframes lsnRing { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(9); } }
.l-mouth { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: calc(var(--u) * 3); align-items: center; width: 100%; height: 100%; }
.l-mbox { background: #fff; border: calc(var(--u) * .4) solid var(--ink); border-radius: calc(var(--u) * 2.4); overflow: hidden; max-height: 100%; aspect-ratio: 420 / 440; justify-self: end; height: 100%; }
.l-mbox svg { width: 100%; height: 100%; display: block; }
.l-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.4); }
.l-pts li, .l-rule li, .l-recap li { display: flex; align-items: center; gap: calc(var(--u) * 1.4); background: #fff; color: var(--ink); border: calc(var(--u) * .35) solid var(--ink); border-radius: calc(var(--u) * 1.8); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.8); font-weight: 800; font-size: calc(var(--u) * 2.4); line-height: 1.35; box-shadow: calc(var(--u) * .45) calc(var(--u) * .45) 0 rgba(0, 0, 0, .35); }
.l-pts b, .l-rule i, .l-recap i { flex-shrink: 0; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; font-family: var(--en); font-style: normal; font-weight: 700; font-size: calc(var(--u) * 2.4); }
.l-rule, .l-recap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.5); width: min(100%, calc(var(--u) * 76)); }
.l-rule li { font-size: calc(var(--u) * 2.7); } .l-rule i { background: var(--blue); }
.l-recap { width: 100%; display: grid; place-items: center; } .l-recap li { font-size: calc(var(--u) * 2.8); background: #fffbe6; } .l-recap i { background: var(--green); }
.l-cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(var(--u) * 1.6); align-items: stretch; width: 100%; max-height: 100%; }
.l-cc { position: relative; background: #fff; color: var(--ink); border: calc(var(--u) * .4) solid var(--ink); border-radius: calc(var(--u) * 2.4); padding: calc(var(--u) * 2.4) calc(var(--u) * 2) calc(var(--u) * 1.8); text-align: center; box-shadow: calc(var(--u) * .6) calc(var(--u) * .6) 0 rgba(0, 0, 0, .35); display: grid; align-content: center; gap: calc(var(--u) * .8); transition: transform .25s, box-shadow .25s; }
.l-cc.bad { background: #ffe9ec; } .l-cc.good { background: #e6fbef; }
.l-cc h4 { margin: 0; font-size: calc(var(--u) * 2.9); font-weight: 900; line-height: 1.3; } .l-cc p { margin: 0; font-size: calc(var(--u) * 2.1); font-weight: 700; line-height: 1.5; }
.l-mk { position: absolute; top: calc(var(--u) * -2); left: calc(var(--u) * -1.2); width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: calc(var(--u) * 3); color: #fff; background: var(--green); border: calc(var(--u) * .35) solid var(--ink); font-family: var(--en); }
.l-cc.bad .l-mk { background: var(--red); }
.l-cw { font-size: calc(var(--u) * 5.4); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); line-height: 1.1; } .l-cw img { width: calc(var(--u) * 9); height: calc(var(--u) * 9); object-fit: contain; }
.l-cc.hot, .lw.hot { transform: scale(1.06); box-shadow: 0 0 0 calc(var(--u) * .7) var(--yellow), calc(var(--u) * .6) calc(var(--u) * .6) 0 rgba(0, 0, 0, .35); }
.l-vs { align-self: center; font-style: normal; font-family: var(--en); font-weight: 700; font-size: calc(var(--u) * 3); color: var(--yellow); }
.lsn .t { color: var(--hl); }
.lw { background: #fff; color: var(--ink); border: calc(var(--u) * .4) solid var(--ink); border-radius: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.2); display: grid; justify-items: center; gap: calc(var(--u) * .3); box-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), opacity .3s, box-shadow .25s; min-width: 0; }
.lw.hide { opacity: 0; transform: scale(.3) rotate(-8deg); }
.lw img { width: calc(var(--u) * 12); height: calc(var(--u) * 12); object-fit: contain; }
.lw b { font-size: calc(var(--u) * 4.6); font-weight: 600; line-height: 1.1; } .lw small { font-size: calc(var(--u) * 1.7); font-weight: 700; color: var(--ink2); }
.l-words { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: calc(var(--u) * 1.6); width: 100%; }
.l-words.n3 { --n: 3; width: 80%; } .l-words.n4 { --n: 4; } .l-words.n5 { --n: 5; } .l-words.n6 { --n: 6; }
.l-words.n5 .lw img, .l-words.n6 .lw img { width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); } .l-words.n5 .lw b, .l-words.n6 .lw b { font-size: calc(var(--u) * 3.6); }
.lsn-stage.tall .l-words { --n: 2; width: 92%; } .lsn-stage.tall .l-words.n3, .lsn-stage.tall .l-words.n5, .lsn-stage.tall .l-words.n6 { --n: 3; width: 100%; }
.lsn-stage.tall .l-words.n5 .lw img, .lsn-stage.tall .l-words.n6 .lw img, .lsn-stage.tall .l-words.n3 .lw img { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.l-morph { display: grid; gap: calc(var(--u) * 1.2); }
.l-mrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(var(--u) * 2); }
.l-mrow .lw { grid-auto-flow: column; align-items: center; padding: calc(var(--u) * .6) calc(var(--u) * 2); gap: calc(var(--u) * 1.2); min-width: calc(var(--u) * 24); }
.l-mrow .lw img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); } .l-mrow .lw small { display: none; }
.l-marr { font-style: normal; font-size: calc(var(--u) * 4); color: var(--yellow); }
.l-blend { display: grid; justify-items: center; gap: calc(var(--u) * 1.2); }
.l-bimg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); object-fit: contain; background: #fff; border-radius: 50%; border: calc(var(--u) * .4) solid var(--ink); padding: calc(var(--u) * 1); }
.l-segs { display: flex; gap: calc(var(--u) * 1.6); transition: gap .5s cubic-bezier(.6, -.3, .3, 1.4); }
.l-segs span { display: grid; place-items: center; min-width: calc(var(--u) * 10); height: calc(var(--u) * 12); padding: 0 calc(var(--u) * 1.6); background: #fff; color: var(--ink); border: calc(var(--u) * .45) solid var(--ink); border-radius: calc(var(--u) * 2.2); font-size: calc(var(--u) * 8); font-weight: 600; transition: transform .2s, background .2s; }
.l-segs span.sil { border-style: dashed; color: #aaa; }
.l-segs span.hot { background: var(--yellow); transform: translateY(-14%) scale(1.1); } .l-segs span.done { background: #ffe9a8; }
.l-dots { display: flex; gap: calc(var(--u) * 1.6); } .l-dots i { width: calc(var(--u) * 10); display: grid; place-items: center; } .l-dots i::after { content: ''; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; background: rgba(255, 255, 255, .35); } .l-dots i.hot::after { background: var(--yellow); } .l-dots i.no::after { background: none; }
.l-whole { font-size: calc(var(--u) * 7); font-weight: 700; color: var(--yellow); opacity: 0; height: 0; transition: .4s; }
.l-blend.joined .l-segs { gap: 0; } .l-blend.joined .l-segs span { border-radius: 0; border-left-width: 0; border-right-width: 0; background: var(--yellow); }
.l-blend.joined .l-segs span:first-child { border-left-width: calc(var(--u) * .45); border-radius: calc(var(--u) * 2.2) 0 0 calc(var(--u) * 2.2); } .l-blend.joined .l-segs span:last-child { border-right-width: calc(var(--u) * .45); border-radius: 0 calc(var(--u) * 2.2) calc(var(--u) * 2.2) 0; }
.l-blend.joined .l-dots { opacity: 0; }
.l-quiz { display: grid; gap: calc(var(--u) * 1.6); width: 100%; justify-items: center; }
.l-q { margin: 0; font-size: calc(var(--u) * 2.8); font-weight: 900; text-align: center; text-wrap: balance; }
.l-ch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); width: 100%; }
.l-chi { position: relative; display: grid; }
.l-ans { border: calc(var(--u) * .4) solid var(--ink); border-radius: calc(var(--u) * 2.2); background: #fff; color: var(--ink); font-weight: 800; font-size: calc(var(--u) * 2.5); padding: calc(var(--u) * 2.4) calc(var(--u) * 1.2); box-shadow: 0 calc(var(--u) * .7) 0 rgba(0, 0, 0, .4); line-height: 1.35; min-height: calc(var(--u) * 13); }
.l-ans.en { font-size: calc(var(--u) * 4.6); font-weight: 600; padding-bottom: calc(var(--u) * 5); }
.l-ans:hover { transform: translateY(-3%); } .l-ans.ok { background: #b9f5d0; } .l-ans.ng { background: #ffc2cb; }
.l-quiz.done .l-ans { pointer-events: none; }
.l-hear { position: absolute; left: 50%; bottom: calc(var(--u) * 1.2); transform: translateX(-50%); width: calc(var(--u) * 5); height: calc(var(--u) * 5); min-width: 30px; min-height: 30px; border-radius: 50%; border: calc(var(--u) * .3) solid var(--ink); background: var(--yellow); color: var(--ink); display: grid; place-items: center; padding: 0; }
.l-hear svg { width: 60%; }
.l-why { margin: 0; background: #fffbe6; color: var(--ink); border: calc(var(--u) * .35) solid var(--ink); border-radius: calc(var(--u) * 1.8); padding: calc(var(--u) * 1) calc(var(--u) * 1.8); font-weight: 700; font-size: calc(var(--u) * 2.1); }
.lsn-stage.tall .l-ch { grid-template-columns: 1fr; } .lsn-stage.tall .l-ans { min-height: 0; padding: calc(var(--u) * 2) calc(var(--u) * 9) calc(var(--u) * 2) calc(var(--u) * 2); } .lsn-stage.tall .l-hear { left: auto; right: calc(var(--u) * 2); bottom: 50%; transform: translateY(50%); width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.lsn-stage.tall .l-mouth { grid-template-columns: 1fr; justify-items: center; } .lsn-stage.tall .l-mbox { height: auto; width: 62%; justify-self: center; }
.lsn-stage.tall .l-cmp { grid-template-columns: 1fr; } .lsn-stage.tall .l-vs { display: none; }
.lsn-stage.tall .l-cc { padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 1.6); } .lsn-stage.tall .l-cw img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.lsn-stage.tall .lsn-cap { font-size: calc(var(--u) * 4.2); top: calc(var(--u) * 6.5); } .lsn-stage.tall .lsn-main { top: calc(var(--u) * 14); }
.lsn-stage.tall .l-pts li, .lsn-stage.tall .l-rule li, .lsn-stage.tall .l-recap li { font-size: calc(var(--u) * 3); }
.lsn-stage.tall .l-cc h4 { font-size: calc(var(--u) * 3.4); } .lsn-stage.tall .l-cc p { font-size: calc(var(--u) * 2.7); } .lsn-stage.tall .l-q { font-size: calc(var(--u) * 3.4); } .lsn-stage.tall .l-ans { font-size: calc(var(--u) * 3); } .lsn-stage.tall .l-why { font-size: calc(var(--u) * 2.7); }
.lsn-stage.tall .lsn-poster > img { width: 34%; }

/* ===== 授業の読み物版（図解でわかる） ===== */
.lr { display: grid; gap: 14px; counter-reset: lr; }
.lr-s { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 18px 20px; }
.lr-s::before { counter-increment: lr; content: counter(lr); width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); border: var(--line); display: grid; place-items: center; font-family: var(--en); font-weight: 700; font-size: 22px; box-shadow: var(--sh-s); }
.lr-s h3 { margin: 4px 0 6px; font-size: 21px; font-weight: 900; line-height: 1.4; }
.lr-s .lr-say { margin: 0 0 10px; font-size: 16.5px; line-height: 2; }
.lr-s .lr-say .say { vertical-align: baseline; }
.lr-fig { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; align-items: stretch; }
.lr-w { display: grid; justify-items: center; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; padding: 8px 12px; min-width: 96px; box-shadow: var(--sh-s); }
.lr-w img { width: 64px; height: 64px; object-fit: contain; } .lr-w b { font-family: var(--en); font-size: 22px; font-weight: 600; } .lr-w .t { color: var(--hl); } .lr-w small { font-size: 12px; color: var(--ink2); font-weight: 700; }
.lr-arr { align-self: center; font-weight: 900; font-size: 22px; }
.lr-pair { display: flex; gap: 8px; align-items: center; }
.lr-pts { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.lr-pts li { background: #fffbe6; border: 2.5px solid var(--ink); border-radius: 12px; padding: 6px 12px; font-weight: 800; }
.lr-pts li::before { content: '✓ '; color: var(--green); }
.lr-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
.lr-cmp > div { border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: #e6fbef; }
.lr-cmp > div.bad { background: #ffe9ec; }
.lr-cmp b { display: block; font-size: 16.5px; } .lr-cmp p { margin: 2px 0 0; font-size: 14.5px; }
.lr-quiz { border: 2.5px dashed var(--ink); border-radius: 14px; padding: 10px 14px; background: #f3f0ff; margin: 0 0 10px; }
.lr-quiz summary { cursor: pointer; font-weight: 900; }
.lr-deep { border-left: 6px solid var(--purple); background: #f3f0ff; border-radius: 0 12px 12px 0; padding: 8px 14px; font-size: 14.5px; }
.lr-deep summary { cursor: pointer; font-weight: 900; color: var(--purple); }
.lr-deep p { margin: 6px 0 2px; }
.lr-mouth { width: 150px; border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff; flex-shrink: 0; }
@media (max-width: 600px) { .lr-s { grid-template-columns: 1fr; padding: 16px; gap: 6px; } .lr-s::before { width: 38px; height: 38px; font-size: 18px; } .lr-cmp { grid-template-columns: 1fr; } }
.lsn-card { text-decoration: none; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px 14px; align-items: center; transition: transform .12s; position: relative; }
.lsn-card:hover { transform: translate(-2px, -2px); }
.lsn-card .lc-g { width: 84px; height: 84px; border-radius: 18px; border: var(--line); background: var(--c, var(--yellow)); display: grid; place-items: center; font-family: var(--en); font-weight: 700; font-size: 30px; line-height: 1; text-align: center; overflow: hidden; }
.lsn-card h3 { margin: 0; font-size: 16.5px; font-weight: 900; line-height: 1.4; } .lsn-card p { margin: 2px 0 0; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.lsn-card .lc-done { position: absolute; top: -8px; right: -8px; background: var(--green); color: #fff; border: 2.5px solid var(--ink); border-radius: 99px; font-size: 12px; font-weight: 900; padding: 0 8px; }
/* 収まりの調整 */
.l-tile, .l-segs span, .l-big, .lw b, .l-cw { line-height: 1; }
.l-tile { height: calc(var(--u) * 10); min-width: calc(var(--u) * 9.5); font-size: calc(var(--u) * 6.6); }
.l-to .l-tile.big { height: calc(var(--u) * 11.5); min-width: calc(var(--u) * 16); font-size: calc(var(--u) * 8); }
.l-merge { gap: calc(var(--u) * .6); }
.l-arrow { font-size: calc(var(--u) * 2.4); line-height: 1; }
.lsn-main > * { max-height: 100%; }
.l-cw { gap: 0; } .l-cw img { margin-right: calc(var(--u) * 1); }

/* ===== ミニ授業：明るい見た目・自分で進む（2026-11-11 作り直し） ===== */
.lsn { background: #fff; }
.lsn-stage { background: linear-gradient(180deg, #fff3d6 0%, #ffe9f0 100%); color: var(--ink); }
.lsn-bg i { opacity: .35; animation: none; }
.lsn-bg i:nth-child(1) { background: #ffd9a0; } .lsn-bg i:nth-child(2) { background: #bfe9ff; } .lsn-bg i:nth-child(3) { background: #ffc6d6; } .lsn-bg i:nth-child(4) { background: #c9f3dc; } .lsn-bg i:nth-child(5) { background: #e0d4ff; }
.lsn-bar i { background: rgba(29, 24, 56, .16); } .lsn-bar .done i { background: var(--ink); } .lsn-bar .now i { background: var(--pink); }
.lsn-cap { text-shadow: none; color: var(--ink); }
.lsn-cap.in::after { content: ''; display: block; width: calc(var(--u) * 8); height: calc(var(--u) * .7); margin: calc(var(--u) * .5) auto 0; background: var(--yellow); border-radius: 99px; }
.lsn-mas { filter: drop-shadow(calc(var(--u) * .35) calc(var(--u) * .35) 0 rgba(29, 24, 56, .2)); animation: none; }
.lsn-sub { box-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--ink); font-size: max(calc(var(--u) * 2.15), 13.5px); }
.lsn-sub .yet { opacity: 1; } .lsn-sub .now, .lsn-sub .past { color: inherit; }
.lsn-sub b[data-hear] { display: inline-block; cursor: pointer; background: var(--yellow); border: calc(var(--u) * .25) solid var(--ink); border-radius: calc(var(--u) * 1); padding: 0 .45em; line-height: 1.45; }
.lsn-sub b[data-hear].now { background: var(--pink); color: #fff; }
.lsn-sub b[data-hear]::before { content: '♪ '; font-size: .8em; }
.lsn-poster, .lsn-end { background: linear-gradient(180deg, #fff3d6 0%, #ffe1ea 100%); color: var(--ink); }
.lsn-pin p { color: var(--hl); } .lsn-pin small { opacity: 1; color: var(--ink2); font-weight: 700; }
.lsn-poster > img { animation: none; }
.l-big span { color: var(--pink); text-shadow: calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--ink); -webkit-text-stroke: calc(var(--u) * .12) var(--ink); }
.l-big span:nth-child(even) { color: var(--sky); }
.l-hook { color: var(--ink); }
.l-ipa { color: var(--hl); } .l-vs, .l-arrow, .l-marr { color: var(--pink); } .l-plus { color: var(--ink); }
.l-whole { color: var(--hl); } .l-dots i::after { background: rgba(29, 24, 56, .2); } .l-dots i.hot::after { background: var(--pink); }
.l-ring { border-color: var(--pink); }
.l-tile, .lw, .l-cc, .l-pts li, .l-rule li, .l-recap li, .l-ans, .l-segs span { box-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--ink); }
.l-cc.hot, .lw.hot { box-shadow: 0 0 0 calc(var(--u) * .7) var(--pink), calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--ink); }
.lw { cursor: default; }
.l-q { color: var(--ink); }
/* 下のボタン */
.lsn-ctl { background: #fff; color: var(--ink); border-top: var(--line); gap: 8px; padding: 10px 12px; }
.lsn-ctl button { background: #fff; color: var(--ink); border: 2.5px solid var(--ink); height: 46px; box-shadow: var(--sh-s); }
.lsn-ctl button:hover { background: var(--yellow); }
.lsn-ctl .lsn-t { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 14px; font-size: 14.5px; }
.lsn-ctl .lsn-pp { background: #fff; width: auto; }
.lsn-ctl .lsn-next { background: var(--pink); color: #fff; font-size: 17px; padding: 0 22px; font-weight: 900; }
.lsn-ctl .lsn-next:hover { background: var(--hl); }
.lsn.ready .lsn-next { animation: lsnNext 1.1s ease-in-out infinite; }
@keyframes lsnNext { 50% { transform: translateY(-3px); box-shadow: 3px 6px 0 var(--ink), 0 0 0 6px rgba(255, 79, 121, .25); } }
.lsn:not(.on) .lsn-ctl { display: none; }
.lsn.ended .lsn-ctl .lsn-next { display: none; }
.lsn-no { color: var(--ink2); opacity: 1; }
@media (max-width: 520px) { .lsn-ctl .lsn-t span { display: none; } .lsn-ctl .lsn-next span { display: inline; } .lsn-ctl .lsn-t { padding: 0 12px; } .lsn-ctl .lsn-next { padding: 0 18px; } }
/* 絵が丸い枠で切れないように（耳など） */
.l-bimg { border-radius: 24%; padding: calc(var(--u) * 1.4); object-fit: contain; width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.lw img, .l-cw img { object-fit: contain; }

/* 書き順アニメ（wr-）・一覧表（ch-）・スタート診断（pl-）・先生の部屋（tr-） */
.wr-abc { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; margin-bottom: 14px; }
.wr-abc button { border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; font-family: 'Andika', var(--en); font-weight: 700; font-size: 18px; padding: 4px 0; } .wr-abc button.on { background: var(--yellow); box-shadow: var(--sh-s); }
.wr-card { padding: 16px 18px 18px; background: #fffaf0; } .wr-wordc { margin-top: 16px; background: #fff; } .wr-wordc h3 { margin: 0 0 4px; font-size: 19px; font-weight: 900; } .wr-wordc p { margin: 0 0 10px; font-size: 14px; color: var(--ink2); }
.wr-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .wr-top img { width: 72px; height: 72px; object-fit: contain; } .wr-top > div:first-of-type { flex: 1; min-width: 120px; } .wr-big { display: block; font-family: 'Andika', var(--en); font-size: 34px; line-height: 1.1; } .wr-top span { font-weight: 800; color: var(--ink2); font-size: 14px; }
.wr-snd { display: flex; gap: 8px; flex-wrap: wrap; } .wr-snd .btn { padding: 7px 14px; font-size: 14.5px; } .wr-snd svg, .wr-ctl svg { width: 20px; height: 20px; }
.wr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } @media (max-width: 560px) { .wr-pair { grid-template-columns: 1fr; } }
.wr-box { position: relative; background: #fff; border: var(--line); border-radius: 18px; overflow: hidden; display: flex; justify-content: center; } .wr-box .tag { position: absolute; left: 10px; top: 6px; font-size: 12px; font-weight: 800; color: var(--mute); }
.wr-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.wr-svg { height: clamp(190px, 34vw, 300px); max-width: 100%; display: block; } .wr-svg.wide { height: auto; width: min(100%, calc(var(--w) * 1.5px)); }
.wr-svg .ln { stroke: #b9b5cb; stroke-width: 1.4; fill: none; } .wr-svg .ln.dash { stroke-dasharray: 5 5; } .wr-svg .ln.base { stroke: #e0457b; stroke-width: 2.2; }
.wr-svg .gh, .wr-svg .ink { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 9; } .wr-svg .gh { stroke: #e3e0ee; } .wr-svg .ink { stroke: var(--ink); opacity: 0; }
.wr-svg .st { opacity: 0; transition: opacity .2s; } .wr-svg .st.on { opacity: 1; } .wr-svg .st circle { fill: var(--pink); } .wr-svg .st text { fill: #fff; font: 700 12px var(--en); text-anchor: middle; } .wr-svg .pen { fill: var(--yellow); stroke: var(--ink); stroke-width: 2.5; }
.wr-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; } .wr-ctl .btn { padding: 8px 16px; font-size: 15px; }
.wr-tip { margin: 12px 0 0; font-size: 14.5px; font-weight: 700; text-align: center; color: var(--ink2); min-height: 1.5em; }
.wr-in { display: flex; gap: 8px; } .wr-in input { flex: 1; min-width: 0; border: var(--line); border-radius: 14px; padding: 8px 14px; font: 700 22px 'Andika', var(--en); } #wr-word { margin-top: 12px; }
.ch-abc { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ch-l { border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; padding: 6px 4px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; } .ch-l:hover { background: #fff6d6; }
.ch-l b { font-family: 'Andika', var(--en); font-size: 26px; line-height: 1.1; } .ch-l img { width: 54px; height: 54px; object-fit: contain; } .ch-l i { font-style: normal; font-family: var(--ipa); font-weight: 700; color: var(--hl); font-size: 15px; } .ch-l small { font-size: 11.5px; font-weight: 800; color: var(--ink2); line-height: 1.3; } .ch-l span { font-family: var(--en); font-weight: 600; font-size: 14px; }
.ch-tw { overflow-x: auto; border: var(--line); border-radius: 16px; background: #fff; } .ch-t { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.ch-t th { background: var(--ink); color: #fff; font-size: 12.5px; padding: 6px 8px; text-align: left; white-space: nowrap; } .ch-t td { padding: 6px 8px; border-top: 1.5px solid #e6e2f0; vertical-align: middle; }
.ch-t .g a { display: inline-block; font-family: 'Andika', var(--en); font-weight: 700; font-size: 20px; border: 2.5px solid var(--ink); border-radius: 10px; padding: 0 10px; text-decoration: none; background: var(--c, #ffd23f); min-width: 46px; text-align: center; white-space: nowrap; }
.ch-t .ipa { font-family: var(--ipa); font-weight: 700; color: var(--hl); white-space: nowrap; } .ch-t .kn { font-weight: 800; font-size: 13px; } .ch-t .ex { display: flex; flex-wrap: wrap; gap: 5px; } .ch-t .ex .say { font-size: 14.5px; padding: 2px 10px; } .ch-t .ru { font-size: 12.5px; color: var(--ink2); min-width: 150px; }
.ch-sh { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; } .ch-sh b { font-family: var(--en); border: 2.5px solid var(--ink); border-radius: 99px; padding: 0 14px; background: var(--c); white-space: nowrap; } .ch-sh h3 { margin: 0; font-size: 19px; font-weight: 900; }
.ch-look { display: flex; gap: 8px; max-width: 520px; } .ch-look input { flex: 1; min-width: 0; border: var(--line); border-radius: 14px; padding: 8px 14px; font: 700 20px 'Andika', var(--en); }
.ch-res { margin-top: 12px; min-height: 30px; } .ch-res .segs { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; } .ch-res .sg { border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; padding: 4px 12px 6px; text-align: center; min-width: 52px; } .ch-res .sg b { display: block; font-family: 'Andika', var(--en); font-size: 28px; line-height: 1.2; } .ch-res .sg i { font-style: normal; font-family: var(--ipa); font-weight: 700; color: var(--hl); font-size: 14px; } .ch-res .sg.z { opacity: .5; border-style: dashed; } .ch-res .sg:hover { background: #fff6d6; }
.pl-card { padding: 22px 18px; text-align: center; background: #fffaf0; } .pl-bar { height: 12px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; max-width: 420px; margin: 0 auto 14px; } .pl-bar i { display: block; height: 100%; background: var(--pink); transition: width .3s; }
.pl-st { display: inline-block; font-family: var(--en); font-weight: 700; border: 2.5px solid var(--ink); border-radius: 99px; padding: 0 14px; background: var(--c, #ffd23f); font-size: 14px; }
.pl-hear { width: 92px; height: 92px; border: var(--line); border-radius: 50%; background: var(--yellow); box-shadow: var(--sh); display: inline-grid; place-items: center; margin: 16px 0 8px; } .pl-hear svg { width: 44px; height: 44px; }
.pl-ch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 12px auto 0; } .pl-ch button { border: var(--line); border-radius: 16px; background: #fff; padding: 14px 4px; font: 700 clamp(19px, 5vw, 28px) 'Andika', var(--en); box-shadow: var(--sh-s); } .pl-ch button.ok { background: #c9f5df; } .pl-ch button.ng { background: #ffd6e2; }
.pl-skip { margin-top: 14px; background: none; border: 0; font-weight: 800; color: var(--ink2); text-decoration: underline; font-size: 14px; }
.pl-res b.big { display: inline-block; font-size: clamp(26px, 6vw, 42px); font-weight: 900; background: var(--c, #ffd23f); border: var(--line); border-radius: 18px; padding: 2px 22px; box-shadow: var(--sh-s); transform: rotate(-1.5deg); margin: 8px 0 12px; }
.pl-map { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 14px 0; } .pl-map span { width: 34px; height: 34px; border: 2.5px solid var(--ink); border-radius: 10px; display: grid; place-items: center; font-family: var(--en); font-weight: 700; background: #fff; } .pl-map .ok { background: #c9f5df; } .pl-map .now { background: var(--yellow); transform: translateY(-4px); box-shadow: var(--sh-s); }
.tr-flow { width: 100%; border-collapse: collapse; background: #fff; font-size: 14.5px; } .tr-flow th { background: var(--ink); color: #fff; padding: 6px 10px; text-align: left; font-size: 13px; } .tr-flow td { padding: 8px 10px; border-top: 1.5px solid #e6e2f0; vertical-align: top; } .tr-flow td:first-child { white-space: nowrap; font-weight: 900; }
.tc5 { display: block; text-decoration: none; padding: 14px 16px; } .tc5 b { display: block; font-size: 17px; font-weight: 900; margin-bottom: 3px; } .tc5 span { font-size: 13.5px; color: var(--ink2); line-height: 1.55; display: block; }

/* ことばのパーツ（mo-）：接頭辞＝青、語根＝むらさき、接尾辞＝ピンク、もとの語＝黄 */
.mo-p { display: inline-block; font-family: var(--en); font-weight: 700; border: 2.5px solid var(--ink); border-radius: 10px; padding: 0 9px; background: #ffe58a; line-height: 1.5; }
.mo-p.pre { background: #bfe4ff; } .mo-p.root { background: #e0d0ff; } .mo-p.suf { background: #ffc9da; }
.mo-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .mo-tabs button { border: var(--line); border-radius: 99px; background: #fff; padding: 7px 18px; font-weight: 900; font-size: 15.5px; } .mo-tabs button.on { background: var(--yellow); box-shadow: var(--sh-s); }
.mo-card { padding: 20px 18px 22px; background: #fffaf0; text-align: center; }
.mo-hd { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; color: var(--ink2); } .mo-day { background: var(--ink); color: #fff; border-radius: 99px; padding: 2px 14px; font-size: 13.5px; }
.mo-q { font-size: 17px; font-weight: 800; margin: 16px 0 6px; line-height: 1.7; }
.mo-word { display: flex; justify-content: center; align-items: stretch; flex-wrap: nowrap; margin: 18px auto 16px; max-width: 100%; overflow-x: auto; padding: 14px 4px; }
.mo-word .ch { font-family: 'Andika', var(--en); font-weight: 700; font-size: clamp(26px, 6.4vw, 60px); line-height: 1.2; }
.mo-word .gap { flex: none; width: clamp(12px, 2.6vw, 24px); border: 0; background: none; position: relative; cursor: pointer; padding: 0; }
.mo-word .gap::after { content: ''; position: absolute; left: 50%; top: -8px; bottom: -8px; width: 0; border-left: 3px dotted #c9c4d8; transform: translateX(-50%); }
.mo-word .gap:hover::after { border-left-color: var(--pink); }
.mo-word .gap.on { width: clamp(22px, 4.4vw, 40px); } .mo-word .gap.on::after { border-left: 4px solid var(--pink); } .mo-word .gap.on::before { content: '✂'; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font-size: 15px; color: var(--pink); }
.mo-ctl { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; } .mo-ctl .btn svg { width: 20px; height: 20px; } .mo-ctl .btn:disabled { opacity: .45; }
.mo-msg { font-size: 14px; font-weight: 700; color: var(--ink2); margin: 12px 0 0; min-height: 1.6em; }
.mo-cutv { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } .mo-cutv.big .mo-p { font-size: clamp(24px, 5.4vw, 44px); padding: 0 12px; } .mo-cutv .cur { box-shadow: var(--sh-s); transform: translateY(-4px); }
.mo-ch { display: grid; gap: 10px; max-width: 460px; margin: 12px auto 0; } .mo-ch button { border: var(--line); border-radius: 16px; background: #fff; padding: 12px 14px; font-weight: 800; font-size: 17px; box-shadow: var(--sh-s); } .mo-ch button.ok { background: #c9f5df; } .mo-ch button.ng { background: #ffd6e2; }
.mo-res { display: inline-block; font-weight: 900; font-size: 20px; border: var(--line); border-radius: 14px; padding: 2px 18px; margin-top: 14px; background: #fff; } .mo-res.ok { background: var(--yellow); transform: rotate(-2deg); box-shadow: var(--sh-s); }
.mo-sum { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-size: clamp(20px, 4.4vw, 32px); margin-top: 16px; } .mo-sum i { font-style: normal; font-family: var(--en); color: var(--mute); } .mo-sum > b { font-family: 'Andika', var(--en); }
.mo-sum.sm { font-size: 16px; justify-content: flex-start; margin: 0; gap: 4px; } .mo-sum.sm .mo-p { border-width: 2px; padding: 0 6px; border-radius: 8px; }
.mo-ja { font-size: 19px; font-weight: 900; margin: 10px 0 0; display: flex; gap: 10px; justify-content: center; align-items: center; } .mo-spk { width: 40px; height: 40px; border: var(--line); border-radius: 50%; background: var(--yellow); display: inline-grid; place-items: center; } .mo-spk svg { width: 20px; height: 20px; }
.mo-rule { font-size: 14px; font-weight: 700; background: #fff; border: 2px dashed var(--ink); border-radius: 12px; display: inline-block; padding: 4px 14px; margin: 12px 0 0; }
.mo-exp { display: grid; gap: 8px; max-width: 560px; margin: 16px auto 0; text-align: left; } .mo-exp > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 8px 12px; } .mo-exp .mo-p { text-align: center; } .mo-exp span { font-weight: 900; } .mo-exp small { display: block; font-weight: 600; font-size: 13px; color: var(--ink2); line-height: 1.55; }
.mo-fam { max-width: 640px; margin: 16px auto 0; text-align: left; } .mo-fam h4 { margin: 0 0 6px; font-size: 14px; } .mo-fam > div, .mo-pbw { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.mo-fam button, .mo-pbw button { text-align: left; border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 6px 10px; } .mo-fam button .mo-p { border-width: 2px; padding: 0 5px; border-radius: 7px; font-size: 16px; margin-right: 2px; } .mo-fam small, .mo-pbw small { display: block; font-size: 12.5px; color: var(--ink2); font-weight: 700; margin-top: 2px; }
.mo-lv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; max-width: 700px; margin: 12px auto 0; } .mo-lv button { border: var(--line); border-radius: 16px; background: #fff; padding: 12px; box-shadow: var(--sh-s); } .mo-lv b { display: block; font-size: 17px; font-weight: 900; } .mo-lv span { font-size: 13px; color: var(--ink2); } .mo-lv button.on { background: var(--yellow); }
.mo-dx { text-align: left; border-top: 2px dashed #d9d5e6; padding: 14px 0; } .mo-dx:first-child { border-top: 0; padding-top: 0; } .mo-dx h3 { margin: 0 0 4px; font-size: 16px; } .mo-dx > p { margin: 0 0 10px; font-size: 14px; color: var(--ink2); }
.mo-dxl { display: flex; flex-wrap: wrap; gap: 7px; } .mo-dxl button { border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; padding: 3px 10px; text-align: center; min-width: 78px; } .mo-dxl b { display: block; font-family: var(--en); font-size: 17px; } .mo-dxl small { font-size: 11.5px; font-weight: 700; color: var(--ink2); } .mo-dxl button.on { background: var(--yellow); box-shadow: var(--sh-s); }
.mo-pb { margin-top: 12px; background: #fff; border: var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--sh-s); } .mo-pb h4 { margin: 0 0 4px; font-size: 18px; } .mo-pb p { margin: 0 0 10px; font-size: 14px; }
.n3-fl { background: #fff1c1; } .n3-mk { background: #e6e1ff; } .n3-mo { background: #d9f7ea; }

/* ===== 新コーナー3つ：ローマ字の呪い診断（cu-）・ことばチェーン（cn-）・ABC なまえ⇄おとボード（ab-） ===== */
/* hidden 属性は必ず消す（display を指定した要素でも。ゲームの幕・得点表示・答えの枠が消えずに残る不具合の対策） */
[hidden] { display: none !important; }
kbd { font-family: var(--en); }
.new3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0 18px; }
.n3 { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; text-decoration: none; align-items: flex-start; }
.n3 .new { position: absolute; top: -12px; left: 14px; font-style: normal; font-family: var(--en); font-size: 12px; background: var(--pink); color: #fff; border: 2.5px solid var(--ink); border-radius: 99px; padding: 0 10px; }
.n3 > b { font-size: 21px; font-weight: 900; line-height: 1.3; } .n3 small { font-size: 13.5px; color: var(--ink2); flex: 1; }
.n3-w { font-family: var(--en); font-weight: 700; font-size: 24px; background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 2px 12px; }
.n3-w s { font-family: inherit; font-size: 16px; color: var(--pink); text-decoration-thickness: 3px; margin-right: 6px; }
.n3-cu { background: #e6e1ff; } .n3-cn { background: #d9f7ea; } .n3-ab { background: #fff1c1; }
@media (max-width: 820px) { .new3 { grid-template-columns: 1fr; } }

.cu-card, .cn-card, .ab-card { border: var(--line); border-radius: 26px; background: #fff; box-shadow: 8px 8px 0 var(--ink); padding: 22px; margin-top: 16px; }
.cu-card kbd, .cn-card kbd, .ab-card kbd { position: absolute; right: 8px; bottom: 6px; font-size: 11px; font-weight: 600; color: var(--mute); border: 1.5px solid #cfc8de; border-radius: 6px; padding: 0 5px; background: #fff; }
@media (hover: none) { .cu-card kbd, .cn-card kbd, .ab-card kbd { display: none; } }

/* ---------- ローマ字の呪い診断 ---------- */
.cu-card { background: #f3f0ff; text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.cu-intro h2 { margin: 18px 0 6px; font-size: clamp(22px, 3.6vw, 30px); font-weight: 900; } .cu-intro p { margin: 0 auto; max-width: 560px; }
.cu-demo { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; background: #fff; border: var(--line); border-radius: 22px; padding: 14px 22px; box-shadow: var(--sh-s); margin-top: 6px; }
.cu-demo b { font-size: clamp(34px, 7vw, 56px); font-weight: 700; line-height: 1; }
.cu-x { font-weight: 900; font-size: 20px; color: var(--pink); text-decoration: line-through; text-decoration-thickness: 3px; } .cu-o { font-weight: 900; font-size: 20px; color: #7b2ff7; }
.cu-go { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; } .cu-sub { font-size: 13.5px; color: var(--ink2); margin: 12px 0 0 !important; }
.cu-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .cu-bar { flex: 1; height: 14px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; } .cu-bar i { display: block; height: 100%; background: #7b2ff7; transition: width .3s; } .cu-n { font-family: var(--en); font-weight: 700; }
.cu-kind { display: inline-block; font-weight: 900; font-size: 13px; border: 2.5px solid var(--ink); border-radius: 99px; padding: 1px 14px; background: var(--yellow); } .cu-kind.s { background: #bdefff; }
.cu-word { font-size: clamp(46px, 11vw, 92px); font-weight: 700; line-height: 1.1; margin-top: 10px; overflow-wrap: anywhere; } .cu-ja { color: var(--ink2); font-weight: 700; }
.cu-ask { font-weight: 900; font-size: 19px; margin: 16px 0 12px; } .cu-ask small { font-weight: 700; color: var(--ink2); font-size: 13px; }
.cu-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cu-op { position: relative; border: var(--line); border-radius: 20px; background: #fff; box-shadow: var(--sh); padding: 22px 10px; min-height: 92px; } .cu-op b { font-size: clamp(20px, 4.4vw, 30px); font-weight: 900; }
.cu-op:hover, .cu-sy:hover { background: #fff6d6; } .cu-op.ok, .cu-sy.ok { background: #c9f5df !important; } .cu-op.ng, .cu-sy.ng { background: #ffd6e2 !important; } .cu-op.dim, .cu-sy.dim { opacity: .45; }
.cu-syl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-weight: 700; } .cu-syl > i { font-style: normal; font-size: 30px; color: var(--mute); }
.cu-sy { position: relative; border: var(--line); border-radius: 18px; background: #fff; box-shadow: var(--sh); font-family: var(--en); font-weight: 700; font-size: clamp(30px, 7vw, 58px); line-height: 1; padding: 18px 16px 22px; min-width: 70px; } .cu-sy.ok { transform: scale(1.12); }
.cu-fb { text-align: left; margin-top: 18px; border: var(--line); border-radius: 20px; padding: 16px 18px; background: #fff; } .cu-fb.ok { border-color: #12a26a; } .cu-fb.ng { border-color: var(--pink); }
.cu-res { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cu-res .en { font-size: 30px; font-weight: 700; } .cu-res .ipa { font-size: 18px; }
.cu-mark { font-size: 40px; line-height: 1; font-weight: 900; } .cu-fb.ok .cu-mark { color: #12a26a; } .cu-fb.ng .cu-mark { color: var(--pink); }
.cu-hear { width: 52px; height: 52px; border: var(--line); border-radius: 50%; background: var(--yellow); box-shadow: var(--sh-s); display: inline-grid; place-items: center; flex: none; } .cu-hear svg { width: 26px; height: 26px; } .cu-hear.sm { width: 40px; height: 40px; } .cu-hear.sm svg { width: 20px; height: 20px; }
.cu-fb h3 { margin: 12px 0 4px; font-size: 19px; font-weight: 900; } .cu-fb h3::before { content: 'きまり'; font-size: 12px; background: var(--ink); color: #fff; border-radius: 8px; padding: 2px 8px; margin-right: 8px; vertical-align: 2px; } .cu-fb p { margin: 0; }
.cu-more { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; } .cu-more span { font-size: 13px; font-weight: 800; color: var(--ink2); margin-right: 4px; }
.cu-nx { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .cu-link { font-weight: 800; font-size: 14px; }
.cu-meter { max-width: 460px; margin: 12px auto 0; } .cu-pct { display: flex; align-items: baseline; justify-content: center; gap: 8px; } .cu-pct small { font-weight: 900; font-size: 20px; } .cu-pct b { font-family: var(--en); font-size: clamp(80px, 20vw, 130px); line-height: 1; color: var(--pink); font-weight: 700; } .cu-pct i { font-style: normal; font-weight: 900; font-size: 34px; color: var(--pink); }
.cu-gauge { height: 18px; border: var(--line); border-radius: 99px; background: #fff; overflow: hidden; } .cu-gauge i { display: block; height: 100%; background: linear-gradient(90deg, #7b2ff7, var(--pink)); }
.cu-rank { margin-top: 16px; } .cu-rank small { display: block; font-weight: 800; color: var(--ink2); } .cu-rank b { display: inline-block; font-size: clamp(26px, 6vw, 40px); font-weight: 900; background: var(--yellow); border: var(--line); border-radius: 16px; padding: 2px 20px; box-shadow: var(--sh-s); transform: rotate(-1.5deg); }
.cu-say { margin: 16px 0 0; font-weight: 700; } .cu-share { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .cu-msg { min-height: 1.4em; font-size: 14px; font-weight: 800; color: #12a26a; margin: 8px 0 0; }
.cu-result h3 { margin: 18px 0 10px; font-size: 18px; font-weight: 900; }
.cu-miss { display: grid; gap: 8px; text-align: left; } .cu-mi { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 8px 12px; } .cu-mi .en { font-size: 22px; font-weight: 700; } .cu-mi small { display: block; font-size: 13px; color: var(--ink2); font-weight: 700; }
@media (max-width: 520px) { .cu-card { padding: 16px 14px; } .cu-ops { grid-template-columns: 1fr; } .cu-op { min-height: 70px; padding: 16px 10px; } .cu-share .btn { width: 100%; } }

/* ---------- ことばチェーン ---------- */
.cn-tabs { display: inline-flex; border: var(--line); border-radius: 99px; overflow: hidden; background: #fff; box-shadow: var(--sh-s); margin-top: 14px; } .cn-tabs button { border: 0; background: none; font-weight: 900; padding: 9px 22px; font-size: 16px; } .cn-tabs button.on { background: var(--ink); color: #fff; }
.cn-card { background: #eafaf2; text-align: center; margin-top: 14px; }
.cn-demo { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: clamp(30px, 6.5vw, 52px); font-weight: 700; } .cn-demo span { background: #fff; border: var(--line); border-radius: 16px; padding: 4px 16px; box-shadow: var(--sh-s); } .cn-demo b { color: var(--hl); font-weight: 700; } .cn-demo b.b2 { color: #7b2ff7; } .cn-demo i { font-style: normal; color: var(--mute); }
.cn-intro h2 { margin: 18px 0 6px; font-size: clamp(22px, 3.6vw, 30px); font-weight: 900; } .cn-intro p { margin: 0 auto; max-width: 580px; }
.cn-lv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 18px auto 0; } .cn-lvb { border: var(--line); border-radius: 18px; background: #fff; padding: 12px; box-shadow: var(--sh-s); } .cn-lvb b { display: block; font-size: 20px; font-weight: 900; } .cn-lvb span { font-size: 13px; color: var(--ink2); } .cn-lvb.on { background: var(--yellow); }
.cn-go { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; } .cn-sub { font-size: 13.5px; color: var(--ink2); margin: 12px 0 0; }
.cn-top { display: flex; align-items: center; gap: 12px; } .cn-dots { flex: 1; display: flex; gap: 6px; justify-content: center; } .cn-dots i { width: 18px; height: 18px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fff; } .cn-dots i.on { background: var(--mint); } .cn-sc { font-family: var(--en); font-weight: 700; }
.cn-trail { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: center; align-items: center; margin: 14px 0 6px; font-weight: 600; font-size: 17px; color: var(--ink2); min-height: 30px; } .cn-trail i { font-style: normal; color: var(--mute); } .cn-trail .on { color: var(--ink); background: var(--yellow); border-radius: 8px; padding: 0 8px; } .cn-trail .q { border: 2px dashed var(--ink); border-radius: 8px; padding: 0 10px; }
.cn-stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 8px; }
.cn-now { justify-self: end; text-align: center; } .cn-now img { width: 96px; height: 96px; object-fit: contain; display: block; margin: 0 auto; } .cn-now small { font-size: 12.5px; font-weight: 800; color: var(--ink2); }
.cn-tiles { display: flex; gap: 8px; justify-content: center; }
.cn-t { position: relative; min-width: 74px; height: 96px; padding: 0 12px; border: var(--line); border-radius: 18px; background: #fff; box-shadow: var(--sh); font-family: var(--en); font-weight: 700; font-size: 54px; line-height: 1; cursor: default; transition: transform .15s, background .15s; }
.cn-tiles.pickpos .cn-t { cursor: pointer; } .cn-tiles.pickpos .cn-t:hover { background: #fff6d6; transform: translateY(-3px); }
.cn-t.hot { background: var(--yellow); animation: cnpulse 1s infinite; } .cn-t.flip { background: #c9f5df; animation: cnflip .45s; } .cn-t.lit { background: var(--yellow); transform: translateY(-6px); } .cn-t.shake { animation: cnshake .4s; background: #ffd6e2; }
@keyframes cnpulse { 50% { transform: scale(1.07); } } @keyframes cnflip { 0% { transform: rotateX(90deg); } 100% { transform: none; } } @keyframes cnshake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.cn-hear { justify-self: start; display: grid; justify-items: center; gap: 2px; border: var(--line); border-radius: 20px; background: var(--pink); color: #fff; box-shadow: var(--sh); padding: 12px 16px; } .cn-hear svg { width: 40px; height: 40px; } .cn-hear span { font-size: 12.5px; font-weight: 900; }
.cn-ask { font-weight: 900; font-size: 18px; margin: 18px 0 10px; }
.cn-ops { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; min-height: 76px; } .cn-op { position: relative; min-width: 84px; height: 76px; padding: 0 14px; border: var(--line); border-radius: 18px; background: #fff; box-shadow: var(--sh); font-family: var(--en); font-weight: 700; font-size: 40px; line-height: 1; } .cn-op:hover { background: #fff6d6; } .cn-op.ok { background: #c9f5df; } .cn-op.ng { background: #ffd6e2; opacity: .5; } .cn-op.dim { opacity: .4; }
.cn-fb { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; background: #fff; border: var(--line); border-radius: 20px; padding: 10px 16px; } .cn-fb img { width: 84px; height: 84px; object-fit: contain; } .cn-fb .en { display: block; font-size: 34px; font-weight: 700; line-height: 1.1; } .cn-fb small { font-weight: 800; color: var(--ink2); }
.cn-pct { font-family: var(--en); font-size: 60px; font-weight: 700; line-height: 1.1; } .cn-pct small { display: block; font-family: inherit; font-size: 14px; font-weight: 800; color: var(--ink2); } .cn-end h3 { margin: 16px 0 10px; font-size: 18px; }
.cn-path { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; } .cn-path i { font-style: normal; color: var(--mute); }
.cn-cols { display: flex; gap: 14px; justify-content: center; } .cn-col { display: grid; justify-items: center; gap: 8px; } .cn-col small { font-weight: 900; font-size: 13px; color: var(--ink2); font-family: 'Zen Maru Gothic', sans-serif; }
.cn-ar { width: 64px; height: 40px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; font-size: 18px; box-shadow: 2px 2px 0 var(--ink); } .cn-ar:active { transform: translate(2px, 2px); box-shadow: none; }
.cn-t.big { min-width: 104px; height: 124px; font-size: 68px; cursor: pointer; } .cn-col:nth-child(2) .cn-t.big { color: var(--hl); }
.cn-out { min-height: 112px; display: grid; place-items: center; margin-top: 14px; }
.cn-real { display: inline-flex; align-items: center; gap: 14px; background: #fff; border: var(--line); border-radius: 20px; padding: 8px 20px; box-shadow: var(--sh-s); text-align: left; } .cn-real img { width: 88px; height: 88px; object-fit: contain; } .cn-real i { display: block; font-style: normal; font-weight: 900; font-size: 13px; color: #12a26a; } .cn-real .en { display: block; font-size: 36px; font-weight: 700; line-height: 1.1; } .cn-real small { font-weight: 800; color: var(--ink2); } .cn-real.fake { background: #f3f0ff; } .cn-real.fake i { color: #7b2ff7; }
@media (max-width: 640px) { .cn-card { padding: 16px 12px; } .cn-stage { grid-template-columns: 1fr; } .cn-now, .cn-hear { justify-self: center; } .cn-now img { width: 72px; height: 72px; } .cn-hear { grid-auto-flow: column; align-items: center; padding: 8px 16px; } .cn-hear svg { width: 28px; height: 28px; } .cn-t { min-width: 58px; height: 78px; font-size: 42px; } .cn-op { min-width: 66px; height: 64px; font-size: 32px; } .cn-t.big { min-width: 84px; height: 104px; font-size: 54px; } .cn-lv { grid-template-columns: 1fr; } .cn-tabs button { padding: 8px 14px; font-size: 14.5px; } }

/* ---------- ABC なまえ⇄おとボード ---------- */
.ab-card { background: #fffaf0; }
.ab-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; justify-content: space-between; }
.ab-modes { display: flex; flex-wrap: wrap; gap: 8px; } .ab-modes button { text-align: left; border: var(--line); border-radius: 16px; background: #fff; padding: 8px 14px; box-shadow: var(--sh-s); } .ab-modes b { display: block; font-size: 17px; font-weight: 900; } .ab-modes span { font-size: 12.5px; color: var(--ink2); } .ab-modes button.on { background: var(--yellow); }
.ab-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ab-main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; margin-top: 16px; align-items: start; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.ab-t { display: grid; justify-items: center; gap: 2px; border: var(--line); border-radius: 18px; background: var(--gc, #fff); padding: 8px 4px 6px; box-shadow: var(--sh-s); transition: transform .12s; } .ab-t:hover { transform: translateY(-3px); } .ab-t.on { outline: 4px solid var(--pink); outline-offset: 2px; transform: translateY(-3px); }
.ab-t b { font-size: 34px; font-weight: 700; line-height: 1.1; } .ab-t b i, .ab-big i { font-style: normal; margin-left: 3px; opacity: .75; } .ab-t img { width: 46px; height: 46px; object-fit: contain; }
.g-v { --gc: #ffd9d9; } .g-h { --gc: #d6f0ff; } .g-t { --gc: #d9f7ea; } .g-x { --gc: #ffe9a8; }
.ab-det { position: sticky; top: 84px; border: var(--line); border-radius: 22px; background: #fff; padding: 14px; display: grid; gap: 8px; box-shadow: var(--sh); }
.ab-big { font-size: 76px; font-weight: 700; line-height: 1; text-align: center; background: var(--gc); border: var(--line); border-radius: 18px; padding: 10px 0 14px; }
.ab-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 26px; align-items: center; gap: 8px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; padding: 8px 10px; text-align: left; min-height: 54px; } .ab-row svg { width: 24px; height: 24px; } .ab-row.hi { background: #fff6d6; } .ab-row.lit { background: var(--yellow); transform: scale(1.03); } .ab-row:hover { background: #fff6d6; }
.ab-row[data-p=ka] { grid-template-columns: 58px 40px minmax(0, 1fr) 26px; } .ab-row img { width: 40px; height: 40px; object-fit: contain; } .ab-row .en { font-size: 22px; font-weight: 700; } .ab-row .ipa { font-size: 20px; }
.ab-k { font-size: 13px; font-weight: 900; background: var(--ink); color: #fff; border-radius: 8px; text-align: center; padding: 2px 0; } .ab-g { margin: 2px 0 0; font-size: 13.5px; text-align: center; } .ab-link { text-align: center; font-weight: 800; font-size: 14px; }
.ab-leg { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 16px; } .ab-leg span { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; font-size: 13.5px; } .ab-leg i { grid-row: span 2; width: 22px; height: 22px; border: 2.5px solid var(--ink); border-radius: 7px; background: var(--gc); } .ab-leg small { color: var(--ink2); }
.ab-quiz { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; } .ab-quiz .ab-big { max-width: 240px; margin: 10px auto 0; } .ab-qtop { display: flex; justify-content: space-between; align-items: center; font-family: var(--en); font-weight: 700; }
.ab-hear { width: 84px; height: 84px; border: var(--line); border-radius: 50%; background: var(--pink); color: #fff; box-shadow: var(--sh); display: inline-grid; place-items: center; margin-top: 14px; } .ab-hear svg { width: 44px; height: 44px; }
.ab-ask { font-weight: 900; font-size: 18px; margin: 14px 0 10px; } .ab-qops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ab-qo { position: relative; border: var(--line); border-radius: 18px; background: #fff; box-shadow: var(--sh); padding: 18px 8px; } .ab-qo b { font-size: 24px; font-weight: 900; } .ab-qo.ok { background: #c9f5df; } .ab-qo.ng { background: #ffd6e2; } .ab-qo.dim { opacity: .45; }
.ab-qfb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; } .ab-qfb > b { font-size: 36px; line-height: 1; } .ab-qfb > b.ok { color: #12a26a; } .ab-qfb > b.ng { color: var(--pink); } .ab-qn { font-family: var(--en); font-size: 60px; font-weight: 700; }
@media (max-width: 820px) { .ab-main { grid-template-columns: 1fr; } .ab-det { position: static; order: -1; grid-template-columns: 110px 1fr; align-items: center; } .ab-big { grid-row: span 3; font-size: 52px; padding: 16px 0; } .ab-g, .ab-link { grid-column: 1 / -1; } .ab-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 7px; } .ab-t b { font-size: 26px; } .ab-t img { width: 34px; height: 34px; } .ab-card { padding: 14px 12px; } .ab-acts .btn { flex: 1; } }

/* めくりカード（fp-）とプリントメーカー（mk-）。紙の寸法は mm で書き、画面では --z で縮めて見せる */
.sbx { white-space: nowrap; } .sbx span { display: inline-block; position: relative; padding-bottom: .34em; }
.sbx .d::after { content: ''; position: absolute; left: 50%; bottom: .06em; width: .17em; height: .17em; margin-left: -.085em; border-radius: 50%; background: var(--ink); }
.sbx .l::after { content: ''; position: absolute; left: .05em; right: .05em; bottom: .1em; height: .075em; border-radius: .05em; background: var(--ink); }
.sbx .z { color: #a9a5bb; } .sbx .t { color: #e0306e; }

/* ---------- 画面でめくる */
.fp-card { background: #fffaf0; padding: 18px; }
.fp-sets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fp-sets button, .fp-sets select { border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; padding: 5px 16px; font-weight: 800; font-size: 15px; font-family: var(--en); }
.fp-sets button.on { background: var(--yellow); box-shadow: var(--sh-s); }
.fp-sets select { font-family: var(--ja); max-width: 100%; }
.fp-stage { perspective: 1400px; max-width: 560px; margin: 20px auto 10px; }
.fp-flip { position: relative; display: block; width: 100%; aspect-ratio: 95 / 67; border: 0; background: none; padding: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.4, 1.4, .5, 1); cursor: pointer; }
.fp-flip.back { transform: rotateY(180deg); }
.fp-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: var(--line); border-radius: 22px; background: #fff; box-shadow: var(--sh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; }
.fp-face.b { transform: rotateY(180deg); background: #fffdf6; }
.fp-face .w { font-family: 'Andika', var(--en); font-weight: 700; font-size: clamp(54px, 15vw, 112px); line-height: 1.25; color: var(--ink); }
.fp-face .w.long { font-size: clamp(34px, 9vw, 66px); }
.fp-face img { height: 68%; max-width: 86%; object-fit: contain; }
.fp-face .ja { font-weight: 800; font-size: 18px; color: var(--ink2); } .fp-face .ja i { font-style: normal; font-family: var(--ipa); color: var(--mute); margin-left: 10px; font-size: 16px; }
.fp-face .hint { position: absolute; bottom: 8px; right: 14px; font-size: 12px; font-weight: 800; color: var(--mute); }
.fp-face .no { position: absolute; top: 8px; left: 14px; font-family: var(--en); font-weight: 700; font-size: 13px; color: var(--mute); }
.fp-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.fp-ctl .btn { padding: 8px 16px; font-size: 15px; } .fp-ctl .btn svg { width: 20px; height: 20px; }
.fp-ctl .cnt { font-family: var(--en); font-weight: 700; min-width: 74px; text-align: center; }
.fp-piles { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.fp-piles button { border: 2.5px solid var(--ink); border-radius: 14px; padding: 7px 16px; font-weight: 800; background: #d9f7ea; } .fp-piles button.ng { background: #ffe1ea; }
.fp-piles span { font-size: 13px; font-weight: 800; color: var(--ink2); align-self: center; }
.fp-steps { counter-reset: fps; } .fp-steps .box { position: relative; padding-top: 22px; } .fp-steps .box::before { counter-increment: fps; content: counter(fps); position: absolute; top: -16px; left: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--en); font-weight: 700; display: grid; place-items: center; }
.fp-hero { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; background: #fff1c1; margin-top: 10px; }
.fp-hero .tx { padding: 24px; } .fp-hero h1 { margin: 4px 0 8px; font-size: clamp(26px, 4vw, 40px); font-weight: 900; line-height: 1.25; }
.fp-hero .art { display: flex; gap: 14px; justify-content: center; align-items: center; padding: 22px 14px; background: #ffe08a; height: 100%; border-left: var(--line); }
.fp-hero .art div { width: 44%; aspect-ratio: 95 / 67; background: #fff; border: var(--line); border-radius: 14px; box-shadow: var(--sh-s); display: grid; place-items: center; font-family: 'Andika', var(--en); font-weight: 700; font-size: clamp(30px, 6vw, 56px); transform: rotate(-4deg); } .fp-hero .art div + div { transform: rotate(3deg); } .fp-hero .art img { height: 80%; object-fit: contain; }
@media (max-width: 760px) { .fp-hero { grid-template-columns: 1fr; } .fp-hero .art { border-left: 0; border-top: var(--line); } }

/* ---------- プリントメーカー */
.mk-ui { display: grid; gap: 16px; }
.mk-step { background: #fff; border: var(--line); border-radius: var(--r); box-shadow: var(--sh-s); padding: 16px 18px; }
.mk-step > h2 { margin: 0 0 10px; font-size: 20px; font-weight: 900; display: flex; align-items: center; gap: 10px; } .mk-step > h2 i { font-style: normal; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--en); display: grid; place-items: center; font-size: 17px; }
.mk-step > h2 small { font-size: 13px; color: var(--ink2); font-weight: 700; }
.mk-tpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mk-tpl button { text-align: left; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; padding: 10px 12px; } .mk-tpl button.on { background: var(--yellow); box-shadow: var(--sh-s); }
.mk-tpl b { display: block; font-size: 16px; font-weight: 900; } .mk-tpl span { font-size: 12.5px; color: var(--ink2); line-height: 1.5; display: block; }
.mk-st { border-top: 2px dashed #d9d5e6; padding: 8px 0; } .mk-st:first-of-type { border-top: 0; }
.mk-st h3 { margin: 0 0 6px; font-size: 14px; font-weight: 900; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mk-st h3 button { font-size: 12px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; padding: 0 10px; font-weight: 800; }
.mk-us { display: flex; flex-wrap: wrap; gap: 6px; } .mk-us button { border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 2px 10px; font-family: var(--en); font-weight: 600; font-size: 15px; min-width: 38px; } .mk-us button.on { background: var(--pink); color: #fff; }
.mk-own { width: 100%; min-height: 64px; border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 12px; font: 600 17px 'Andika', var(--en); }
.mk-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-weight: 800; font-size: 14.5px; } .mk-opts label { display: inline-flex; gap: 6px; align-items: center; } .mk-opts select, .mk-opts input[type=number] { border: 2px solid var(--ink); border-radius: 10px; padding: 3px 8px; font-weight: 800; font-size: 15px; background: #fff; } .mk-opts input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--pink); }
.mk-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: sticky; bottom: 10px; z-index: 5; background: #fffaf0; border: var(--line); border-radius: 18px; padding: 10px 14px; box-shadow: var(--sh-s); } .mk-go span { font-weight: 800; font-size: 14px; color: var(--ink2); flex: 1; min-width: 160px; }
.mk-out { margin-top: 18px; --z: .4; overflow: hidden; padding: 4px 0 8px; }
.mk-out .mk-page { zoom: var(--z); margin: 0 auto 18px; box-shadow: 0 4px 18px rgba(29, 24, 56, .28); border-radius: 2px; }
.mk-page { position: relative; width: 210mm; height: 296mm; padding: 10mm; background: #fff; color: #1d1838; overflow: hidden; font-family: var(--ja); }
.mk-page.land { width: 296mm; height: 210mm; }
.mk-hd { display: flex; align-items: center; gap: 10px; border-bottom: 3px solid #1d1838; padding-bottom: 5px; height: 11mm; }
.mk-hd .lg { font: 700 13px var(--en); background: #ffd23f; border: 2.5px solid #1d1838; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.mk-hd h3 { font-size: 20px; margin: 0; font-weight: 900; flex: 1; white-space: nowrap; overflow: hidden; } .mk-hd .nm { font-size: 12px; font-weight: 700; white-space: nowrap; } .mk-hd .nm u { display: inline-block; width: 42mm; border-bottom: 1.5px solid #1d1838; text-decoration: none; height: 1em; }
.mk-ft { position: absolute; left: 10mm; right: 10mm; bottom: 6mm; font-size: 8.5px; color: #7a7593; display: flex; justify-content: space-between; border-top: 1px solid #c9c4d8; padding-top: 2px; }
.mk-page .en { font-family: 'Andika', var(--en); }
.mk-fl { display: grid; grid-template-columns: repeat(2, 95mm); grid-template-rows: repeat(4, 67mm); width: 190mm; height: 268mm; }
.mk-fc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 0 dashed #9a95b0; }
.mk-fl.f .mk-fc { border-right-width: 1px; border-bottom-width: 1px; } .mk-fl.f .mk-fc:nth-child(odd) { border-left-width: 1px; } .mk-fl.f .mk-fc:nth-child(-n+2) { border-top-width: 1px; }
.mk-fc .no { position: absolute; left: 3.5mm; top: 2.5mm; font: 700 9.5px var(--en); color: #7a7593; }
.mk-fc .w { font-family: 'Andika', var(--en); font-weight: 700; font-size: 25mm; line-height: 1.25; white-space: nowrap; }
.mk-fc img { height: 45mm; max-width: 80mm; object-fit: contain; } .mk-fc .ja { font-size: 13px; font-weight: 700; color: #3b3658; margin-top: 1mm; }
.mk-fc .draw { width: 70mm; height: 44mm; border: .5mm dashed #b9b5cb; border-radius: 3mm; display: grid; place-items: center; font-size: 11px; color: #9a95b0; font-weight: 700; }
.mk-grid { display: grid; gap: 0; margin-top: 4mm; border-top: 1px solid #1d1838; border-left: 1px solid #1d1838; height: 250mm; }
.mk-gc { border-right: 1px solid #1d1838; border-bottom: 1px solid #1d1838; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; overflow: hidden; padding: 1mm; }
.mk-gc img { flex: 1; min-height: 0; max-width: 92%; object-fit: contain; } .mk-gc .w { font-family: 'Andika', var(--en); font-weight: 700; line-height: 1.2; white-space: nowrap; } .mk-gc .ja { font-size: 10px; font-weight: 700; color: #5b5675; }
.mk-gc .ln { width: 80%; border-bottom: .4mm solid #1d1838; height: 9mm; }
.mk-list { margin-top: 5mm; column-gap: 6mm; column-rule: 1px solid #d9d5e6; height: 248mm; column-fill: auto; }
.mk-list div { break-inside: avoid; display: flex; align-items: center; gap: 2.5mm; font-family: 'Andika', var(--en); font-weight: 700; padding: 1.3mm 0; } .mk-list i { font: 700 .5em var(--en); color: #9a95b0; width: 2em; text-align: right; font-style: normal; } .mk-list u { flex: none; width: .62em; height: .62em; border: .4mm solid #1d1838; border-radius: .8mm; text-decoration: none; } .mk-list small { font: 700 .45em var(--ja); color: #5b5675; margin-left: auto; padding-right: 2mm; }
.mk-bg { display: grid; gap: 8mm; margin-top: 5mm; height: 250mm; } .mk-bgb { border: .7mm solid #1d1838; border-radius: 4mm; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.mk-bgb h4 { margin: 0; background: #1d1838; color: #ffd23f; font: 700 7mm var(--en); letter-spacing: .5em; text-align: center; padding: 1mm 0 1mm .5em; }
.mk-bgg { flex: 1; display: grid; min-height: 0; } .mk-bgg div { border-right: .35mm solid #1d1838; border-bottom: .35mm solid #1d1838; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Andika', var(--en); font-weight: 700; overflow: hidden; min-height: 0; white-space: nowrap; } .mk-bgg img { height: 62%; max-width: 88%; object-fit: contain; } .mk-bgg .free { background: #fff3c4; font-family: var(--en); }
.mk-cl { display: grid; grid-template-columns: repeat(2, 95mm); grid-template-rows: repeat(4, 63.5mm); width: 190mm; height: 254mm; border-top: 1px dashed #9a95b0; border-left: 1px dashed #9a95b0; margin-top: 3mm; }
.mk-cc { position: relative; border-right: 1px dashed #9a95b0; border-bottom: 1px dashed #9a95b0; display: grid; grid-template-columns: 44mm 1fr; align-items: center; padding-left: 3mm; } .mk-cc img { width: 41mm; height: 41mm; object-fit: contain; }
.mk-cc .ch { display: flex; flex-direction: column; height: 100%; } .mk-cc .ch div { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 2.5mm; font: 700 8.6mm 'Andika', var(--en); border-bottom: .3mm solid #d9d5e6; white-space: nowrap; } .mk-cc .ch div:last-child { border-bottom: 0; } .mk-cc .ch i { flex: none; width: 13mm; height: 100%; background: repeating-linear-gradient(135deg, #ffe9a8 0, #ffe9a8 1.4mm, #fff6d6 1.4mm, #fff6d6 2.8mm); border-left: .3mm solid #d9d5e6; }
.mk-cc .no { position: absolute; left: 3mm; top: 2mm; font: 700 9.5px var(--en); color: #7a7593; }
.mk-key { margin-top: 5mm; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5mm 5mm; font-size: 13px; } .mk-key div { border-bottom: .25mm solid #d9d5e6; padding: .8mm 0; display: flex; gap: 2mm; } .mk-key i { font: 700 10px var(--en); color: #7a7593; font-style: normal; width: 6mm; }
@media print {
  @page { size: A4; margin: 0; }
  body.mk-printing { background: #fff !important; }
  body.mk-printing .hd, body.mk-printing .ft, body.mk-printing .totop, body.mk-printing .crumb, body.mk-printing .mk-ui, body.mk-printing .mk-hide, body.mk-printing .dw, body.mk-printing .sx { display: none !important; }
  body.mk-printing main, body.mk-printing .wrap { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; }
  body.mk-printing .mk-out { margin: 0; padding: 0; } body.mk-printing main { min-height: 0 !important; } body.mk-printing .mk-out .mk-page { zoom: 1; margin: 0; box-shadow: none; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.mk-printing .mk-out .mk-page:last-child { break-after: auto; page-break-after: auto; }
}

/* ===== 大人の本格ゲーム（pro.js）：夜の色の枠・発音記号デコーダー（ip-）・だましライム（tr-）・同音ハンター（hm-） ===== */
.pg { --bg: #14122b; --bg2: #1f1c40; --ln: #3a3670; --tx: #f4f1ff; --mu: #a9a4d6; --ac: #ffd23f; --ok: #3ddc97; --ng: #ff5d7a; position: relative; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); background: radial-gradient(1200px 500px at 50% -10%, #2c2766 0%, var(--bg) 60%); color: var(--tx); overflow: hidden; min-height: 600px; display: flex; flex-direction: column; margin-top: 10px; }
.pg-ipa { --ac: #5ee6ff; } .pg-trap { --ac: #ffd23f; } .pg-homo { --ac: #ff9be0; }
.pg button { color: inherit; font-family: inherit; }
.pg-hud { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ln); background: rgba(10, 8, 30, .5); flex-wrap: wrap; }
.pg-t { margin-right: auto; font-weight: 900; font-size: 17px; letter-spacing: .04em; }
.pg-pill { font-family: var(--en); font-weight: 700; font-size: 17px; border: 1.5px solid var(--ln); border-radius: 99px; padding: 1px 14px; background: var(--bg2); min-width: 64px; text-align: center; }
.pg-combo { background: var(--ng); border-color: transparent; color: #fff; animation: pgpop .25s; } .pg-time { color: var(--ac); }
.pg-mute { border: 1.5px solid var(--ln); border-radius: 99px; background: none; font-size: 12px; font-weight: 800; padding: 4px 10px; color: var(--mu) !important; }
.pg-bar { height: 6px; background: #0b0a1c; } .pg-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--ac), #fff); transition: width .12s linear; } .pg-bar.low i { background: var(--ng); }
.pg-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 16px; position: relative; }
.pg-shake { animation: pgshake .28s; } @keyframes pgshake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } } @keyframes pgpop { from { transform: scale(1.4); } }
.pg-float { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); font-family: var(--en); font-weight: 700; font-size: 30px; pointer-events: none; animation: pgfl .8s ease-out forwards; z-index: 5; text-shadow: 0 2px 0 #000; } .pg-float.ok { color: var(--ok); } .pg-float.ng { color: var(--ng); }
@keyframes pgfl { to { transform: translate(-50%, -46px); opacity: 0; } }
.pg-en { font-family: var(--en); font-weight: 700; letter-spacing: .22em; font-size: 13px; color: var(--ac); text-transform: uppercase; }
.pg-start, .pg-res { text-align: center; max-width: 640px; width: 100%; display: grid; gap: 14px; justify-items: center; }
.pg-start h2 { margin: 0; font-size: clamp(30px, 6vw, 48px); font-weight: 900; line-height: 1.2; } .pg-desc { margin: 0; color: var(--mu); }
.pg-how { display: grid; gap: 8px; text-align: left; width: 100%; } .pg-how > div { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; background: rgba(255, 255, 255, .05); border: 1px solid var(--ln); border-radius: 14px; padding: 9px 12px; font-size: 14.5px; } .pg-how i { font-style: normal; font-family: var(--en); font-weight: 700; width: 28px; height: 28px; border-radius: 50%; background: var(--ac); color: #14122b; display: grid; place-items: center; } .pg-how b { color: var(--ac); }
.pg-lv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; } .pg-lv button { border: 1.5px solid var(--ln); border-radius: 14px; background: var(--bg2); padding: 9px 6px; } .pg-lv b { display: block; font-size: 16px; font-weight: 900; } .pg-lv small { font-size: 11.5px; color: var(--mu); } .pg-lv button.on { border-color: var(--ac); box-shadow: 0 0 0 2px var(--ac) inset; }
.pg-go { border: 0; border-radius: 16px; background: var(--ac); color: #14122b !important; font-weight: 900; font-size: 22px; padding: 13px 46px; box-shadow: 0 5px 0 rgba(0, 0, 0, .45); transition: transform .08s; } .pg-go:hover { transform: translateY(-2px); } .pg-go:active { transform: translateY(4px); box-shadow: none; }
.pg-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ln); border-radius: 12px; background: var(--bg2); padding: 9px 16px; font-weight: 800; font-size: 14.5px; text-decoration: none; color: var(--tx) !important; } .pg-btn svg { width: 18px; height: 18px; } .pg-btn:hover { border-color: var(--ac); }
.pg kbd { font-family: var(--en); font-size: 11px; color: var(--mu); border: 1px solid var(--ln); border-radius: 6px; padding: 0 5px; }
.pg-best { margin: 0; font-size: 13.5px; color: var(--mu); } .pg-best b { color: var(--tx); font-family: var(--en); }
.pg-count { font-family: var(--en); font-weight: 700; font-size: 150px; color: var(--ac); animation: pgpop .5s; }
.pg-rank { font-size: clamp(26px, 5.5vw, 42px); font-weight: 900; color: #14122b; background: var(--ac); border-radius: 14px; padding: 2px 22px; transform: rotate(-1.5deg); }
.pg-score { font-family: var(--en); font-weight: 700; font-size: clamp(60px, 14vw, 96px); line-height: 1; } .pg-new { font-family: var(--en); font-weight: 700; background: var(--ng); border-radius: 99px; padding: 1px 14px; animation: pgpop .4s; }
.pg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; } .pg-stats div { background: rgba(255, 255, 255, .05); border: 1px solid var(--ln); border-radius: 14px; padding: 8px 4px; } .pg-stats b { display: block; font-family: var(--en); font-size: 28px; } .pg-stats span { font-size: 12px; color: var(--mu); }
.pg-res h3 { margin: 4px 0 0; font-size: 15px; color: var(--mu); }
.pg-rev { display: grid; gap: 6px; width: 100%; max-height: 250px; overflow-y: auto; text-align: left; } .pg-ri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ln); border-radius: 12px; padding: 6px 10px; } .pg-ri small { color: var(--mu); margin-left: auto; font-size: 12.5px; } .pg-ri .ipa { color: var(--ac); font-size: 15px; } .pg-ri em { font-style: normal; font-weight: 900; font-size: 13px; } .pg-ri em.y { color: var(--ok); } .pg-ri em.n { color: var(--ng); }
.pg-say { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ln); border-radius: 99px; background: var(--bg2); padding: 3px 12px 3px 8px; } .pg-say svg { width: 17px; height: 17px; color: var(--ac); } .pg-say b { font-family: var(--en); font-weight: 600; font-size: 17px; }
.pg-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }

/* 発音記号デコーダー */
.ip { display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 640px; }
.ip-lab, .tr-lab { font-size: 13px; letter-spacing: .12em; color: var(--mu); font-weight: 800; }
.ip-code { font-family: 'Noto Sans', 'Segoe UI', sans-serif; font-size: clamp(40px, 10vw, 76px); font-weight: 700; color: var(--ac); line-height: 1.15; text-shadow: 0 0 26px color-mix(in srgb, var(--ac) 55%, transparent); overflow-wrap: anywhere; text-align: center; }
.ip-ja { min-height: 1.5em; color: var(--mu); font-size: 14.5px; }
.ip-slots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 58px; } .ip-slots i { font-style: normal; width: 44px; height: 56px; border-radius: 10px; border: 2px solid var(--ln); background: var(--bg2); display: grid; place-items: center; font-family: var(--en); font-weight: 700; font-size: 32px; } .ip-slots i.on { border-color: var(--tx); }
.ip-slots.ok i { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 28%, var(--bg2)); } .ip-slots.ng i { border-color: var(--ng); animation: pgshake .28s; } .ip-slots.show i { border-color: var(--ng); color: var(--ng); }
.ip-tools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ip-kb { display: grid; gap: 6px; width: 100%; margin-top: 4px; } .ip-kb > div { display: flex; gap: 5px; justify-content: center; } .ip-kb button { flex: 1; max-width: 54px; height: 48px; border: 1.5px solid var(--ln); border-radius: 10px; background: var(--bg2); font-family: var(--en); font-weight: 600; font-size: 20px; padding: 0; } .ip-kb button:active { background: var(--ac); color: #14122b; } .ip-kb .wide { max-width: 80px; flex: 1.6; }

/* だましライム */
.tr { display: grid; justify-items: center; gap: 16px; width: 100%; max-width: 700px; }
.tr-cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; width: 100%; } .tr-cards.in .tr-c { animation: trin .18s ease-out; } @keyframes trin { from { transform: translateY(14px); opacity: 0; } }
.tr-c { background: #fff; color: #14122b; border-radius: 20px; padding: 26px 8px 20px; text-align: center; box-shadow: 0 8px 0 rgba(0, 0, 0, .4); min-height: 132px; display: grid; align-content: center; gap: 2px; } .tr-c b { font-family: var(--en); font-weight: 700; font-size: clamp(30px, 7vw, 58px); line-height: 1.1; overflow-wrap: anywhere; } .tr-c .ipa { min-height: 1.4em; font-size: 18px; color: #7b2ff7; }
.tr-vs { font-family: var(--en); font-weight: 700; font-size: 36px; color: var(--ac); }
.tr-cards.ok .tr-c { background: #c9f5df; } .tr-cards.ng .tr-c { background: #ffd6e2; }
.tr-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; } .tr-b { border: 0; border-radius: 18px; padding: 12px 6px 10px; display: grid; justify-items: center; gap: 2px; box-shadow: 0 6px 0 rgba(0, 0, 0, .45); color: #14122b !important; } .tr-b:active { transform: translateY(5px); box-shadow: none; }
.tr-b b { font-size: 40px; line-height: 1; font-weight: 900; } .tr-b span { font-weight: 900; font-size: 17px; } .tr-b kbd { color: #14122b; border-color: rgba(0, 0, 0, .3); } .tr-b.y { background: var(--ok); } .tr-b.n { background: var(--ng); }
.tr-tip { min-height: 1.5em; margin: 0; color: var(--ac); font-weight: 800; font-size: 14.5px; text-align: center; }

/* 同音ハンター */
.hm { width: 100%; max-width: 680px; display: grid; gap: 12px; }
.hm-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; font-size: 14px; color: var(--mu); min-height: 1.5em; } #hmMsg { color: var(--ac); font-family: var(--en); font-size: 16px; }
.hm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hm-t { height: 84px; border: 0; border-radius: 16px; background: #fff; color: #14122b !important; font-family: var(--en) !important; font-weight: 600; font-size: clamp(15px, 3.6vw, 25px); box-shadow: 0 6px 0 rgba(0, 0, 0, .42); animation: trin .25s backwards; transition: transform .1s, background .1s; padding: 0 4px; overflow-wrap: anywhere; line-height: 1.1; }
.hm-t:hover { transform: translateY(-2px); } .hm-t.sel { background: var(--ac); transform: translateY(-4px); } .hm-t.hit { background: var(--ok); transform: scale(1.06); } .hm-t.miss { background: var(--ng); animation: pgshake .28s; }
.hm-t.gone { visibility: hidden; } .hm-t.trap { background: #5b567f; color: #d9d5f5 !important; box-shadow: none; text-decoration: line-through; }
@media (max-width: 560px) { .pg { min-height: 560px; border-radius: 20px; } .pg-area { padding: 14px 8px; } .hm-grid { gap: 7px; } .hm-t { height: 68px; border-radius: 12px; } .ip-kb button { height: 44px; font-size: 18px; } .ip-slots i { width: 36px; height: 48px; font-size: 26px; } .tr-c { min-height: 104px; padding: 18px 4px 12px; } .tr-b kbd { display: none; } .pg-lv small { display: none; } .pg-t { font-size: 14px; } .pg-pill { min-width: 48px; font-size: 15px; padding: 1px 10px; } }

/* ゲーム一覧の「大人の本格ゲーム」 */
.pro-sec { margin: 26px 0; border: var(--line); border-radius: 26px; background: #14122b; color: #f4f1ff; padding: 20px; box-shadow: 8px 8px 0 var(--ink); }
.pro-sec h2 { margin: 0 0 4px; font-size: clamp(22px, 3.6vw, 30px); font-weight: 900; } .pro-sec > p { margin: 0 0 14px; color: #a9a4d6; } .pro-sec .en-s { font-family: var(--en); font-weight: 700; letter-spacing: .14em; color: #ffd23f; font-size: 13px; }
.pro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .pro-c { display: flex; flex-direction: column; text-decoration: none; color: #f4f1ff; background: #1f1c40; border: 1.5px solid #3a3670; border-radius: 18px; overflow: hidden; transition: transform .12s, border-color .12s; } .pro-c:hover { transform: translateY(-4px); border-color: var(--pc); }
.pro-art { aspect-ratio: 16/10; background: #0b0a1c; display: grid; place-items: center; font-family: var(--en); font-weight: 700; font-size: 34px; color: var(--pc); } .pro-art img { width: 100%; height: 100%; object-fit: cover; }
.pro-b { padding: 12px 14px 14px; display: grid; gap: 4px; } .pro-b b { font-size: 20px; font-weight: 900; } .pro-b i { font-style: normal; font-family: var(--en); font-size: 12.5px; letter-spacing: .1em; color: var(--pc); } .pro-b small { color: #a9a4d6; font-size: 13.5px; }
@media (max-width: 820px) { .pro-grid { grid-template-columns: 1fr; } .pro-c { flex-direction: row; } .pro-art { width: 38%; aspect-ratio: auto; flex: none; font-size: 22px; } }

/* 答えたあとの理由と「つぎへ」（pro.js の hold） */
.pg-hold { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pg-nx { position: relative; overflow: hidden; background: var(--ac); color: #14122b !important; border-color: transparent; font-size: 17px; padding: 11px 30px; } .pg-nx span { position: relative; z-index: 1; display: inline-flex; gap: 8px; align-items: center; } .pg-nx kbd { font-size: 11px; border: 1px solid rgba(20, 18, 43, .4); border-radius: 6px; padding: 0 6px; }
.pg-nx i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(20, 18, 43, .22); animation: pgfill linear forwards; } @keyframes pgfill { to { width: 100%; } }
.tr-why { display: none; width: 100%; min-height: 138px; border: 1.5px solid var(--ln); border-radius: 18px; background: var(--bg2); padding: 14px 12px; align-content: center; justify-items: center; gap: 12px; }
.tr.held .tr-ops { display: none; } .tr.held .tr-why { display: grid; }
.tr-why .tr-tip { font-size: 16px; line-height: 1.7; color: var(--tx); } .tr-why .tr-tip b { color: var(--ac); } .tr-why .tr-tip .ipa { font-size: 18px; }
.tr-v { font-weight: 900; font-size: 18px; } .tr-v.ok { color: #3ddc97; } .tr-v.ng { color: #ff5c7a; }
.tr-c .ipa mark { background: #ffe066; color: #14122b; border-radius: 5px; padding: 0 3px; font-weight: 800; }
.ip-ans { font-weight: 800; color: var(--ac); text-align: center; min-height: 1.5em; }
@media (max-width: 560px) { .pg-nx kbd { display: none; } }

/* がくしゅうのきろく（/record/） rc- */
.rc-hero { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 24px; background: #e9f9ef; margin-top: 10px; }
.rc-hero > img { width: 170px; height: auto; }
.rc-hm .pg-en { color: var(--green); font-size: 13px; }
.rc-hm h1 { margin: 2px 0 6px; font-size: clamp(26px, 4vw, 38px); font-weight: 900; line-height: 1.2; }
.rc-hm p { margin: 0 0 12px; font-weight: 700; color: var(--ink2); }
.rc-g { font-family: var(--en); font-size: 1.15em; } .rc-all { font-weight: 900; font-size: 18px; }
.rc-stats { display: grid; grid-template-columns: repeat(2, 104px); gap: 10px; }
.rc-stats div { background: #fff; border: var(--line); border-radius: 16px; box-shadow: var(--sh-s); text-align: center; padding: 8px 4px; }
.rc-stats b { font-family: var(--en); font-size: 32px; line-height: 1.1; } .rc-stats small { font-weight: 800; color: var(--mute); margin-left: 2px; font-size: 13px; }
.rc-stats span { display: block; font-size: 12px; font-weight: 800; color: var(--ink2); }
.rc-bar { display: block; height: 14px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; }
.rc-bar i { display: block; height: 100%; background: var(--mint); border-radius: 99px; }

.rc-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.rc-lv { padding: 18px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; background: #fffbe8; }
.rc-lvn { font-family: var(--en); font-weight: 700; font-size: 20px; background: var(--yellow); border: var(--line); border-radius: 20px; box-shadow: var(--sh-s); padding: 6px 14px; text-align: center; } .rc-lvn b { font-size: 44px; line-height: 1; }
.rc-lvb > b { font-size: 22px; font-weight: 900; display: block; } .rc-lvb > span { font-family: var(--en); font-weight: 700; color: var(--ink2); display: block; margin-bottom: 6px; }
.rc-lvb small { display: block; margin-top: 4px; font-weight: 700; color: var(--ink2); }
.rc-lv details, .rc-now { grid-column: 1 / -1; } .rc-lv summary { cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--ink2); }
.rc-lv table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 6px; } .rc-lv th { text-align: left; font-weight: 800; } .rc-lv td { text-align: right; padding: 2px 0 2px 8px; font-family: var(--en); } .rc-lv td:last-child { font-weight: 700; width: 3.5em; }
.rc-now { margin: 4px 0 0; font-weight: 800; } .rc-now b { border: 2.5px solid var(--ink); border-radius: 99px; padding: 1px 10px; font-family: var(--en); white-space: nowrap; }

.rc-cal { padding: 16px 18px; }
.rc-ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .rc-ch > b { font-size: 19px; font-weight: 900; text-align: center; } .rc-ch small { display: block; font-size: 12.5px; color: var(--green); font-weight: 800; }
.rc-ch .btn[disabled] { opacity: .3; }
.rc-cg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.rc-cw b { text-align: center; font-size: 12px; color: var(--mute); }
.rc-cg i { font-style: normal; font-family: var(--en); font-weight: 700; font-size: 14px; aspect-ratio: 1; max-height: 44px; width: 100%; display: grid; place-items: center; border-radius: 12px; color: var(--mute); border: 2.5px solid transparent; }
.rc-cg i.v { background: #d6f5e3; color: var(--ink); border-color: var(--ink); }
.rc-cg i.a { background: var(--mint); color: var(--ink); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.rc-cg i.t { outline: 3px solid var(--pink); outline-offset: 1px; }
.rc-lg { margin: 10px 0 0; font-size: 12.5px; font-weight: 800; color: var(--ink2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-lg i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--ink); background: #d6f5e3; margin-left: 6px; } .rc-lg i.a { background: var(--mint); }

.rc-cns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rc-cn { display: block; background: #fff; border: var(--line); border-radius: 18px; box-shadow: var(--sh-s); padding: 12px 14px; text-decoration: none; color: inherit; }
.rc-cn > span { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 6px; } .rc-cn b { font-weight: 900; } .rc-cn em { font-style: normal; font-family: var(--en); font-weight: 700; font-size: 24px; } .rc-cn small { font-size: 13px; color: var(--mute); }

.rc-ss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rc-s { padding: 14px 16px; border-left: 14px solid var(--c); }
.rc-sh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .rc-sh h3 { margin: 0; font-size: 18px; font-weight: 900; flex: 1; min-width: 8em; }
.rc-no { font-family: var(--en); font-weight: 700; font-size: 12.5px; background: var(--c); border: 2.5px solid var(--ink); border-radius: 99px; padding: 1px 9px; white-space: nowrap; }
.rc-sn { font-family: var(--en); font-weight: 700; color: var(--ink2); } .rc-sn b { font-size: 22px; color: var(--ink); }
.rc-stamp { font-weight: 900; font-size: 13px; color: var(--pink); border: 3px solid var(--pink); border-radius: 10px; padding: 0 8px; transform: rotate(-6deg); background: #fff; }
.rc-us { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rc-u { min-width: 44px; padding: 3px 6px 4px; border: 2.5px solid #c9c5db; border-radius: 12px; text-align: center; text-decoration: none; color: var(--mute); background: #fff; line-height: 1.15; }
.rc-u b { display: block; font-family: var(--en); font-size: 16px; } .rc-u span { display: flex; gap: 2px; justify-content: center; min-height: 13px; }
.rc-u i, .rc-k { font-style: normal; font-size: 9.5px; font-weight: 900; width: 13px; height: 13px; line-height: 13px; border-radius: 4px; background: #eceaf4; color: #b3aec9; display: inline-block; text-align: center; }
.rc-u.on { background: var(--c); border-color: var(--ink); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.rc-u i.on, .rc-k { background: var(--ink); color: #fff; }
.rc-u:hover { border-color: var(--ink); }

.rc-bs { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.rc-b { text-align: center; padding: 12px 6px 10px; border: 2.5px dashed #c9c5db; border-radius: 18px; background: #faf9fd; color: var(--mute); position: relative; }
.rc-bm { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 6px; font-size: 28px; font-family: var(--en); font-weight: 700; background: #eceaf4; border: 3px solid #c9c5db; color: #b3aec9; }
.rc-b b { display: block; font-size: 13.5px; font-weight: 900; line-height: 1.3; } .rc-b small { display: block; font-size: 11.5px; line-height: 1.35; margin-top: 2px; font-weight: 700; }
.rc-b.on { border: var(--line); background: #fff; color: var(--ink); box-shadow: var(--sh-s); } .rc-b.on small { color: var(--ink2); }
.rc-b.on .rc-bm { background: var(--c); border-color: var(--ink); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.rc-b.new::after { content: 'NEW'; position: absolute; top: -9px; right: -6px; background: var(--pink); color: #fff; font-family: var(--en); font-weight: 700; font-size: 11px; border: 2.5px solid var(--ink); border-radius: 99px; padding: 0 7px; }
.rc-b.new .rc-bm { animation: rc-pop .6s ease-out 2; }
@keyframes rc-pop { 50% { transform: scale(1.18) rotate(-6deg); } }

.rc-rds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rc-rd { padding: 12px 16px; } .rc-rd summary { cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; list-style: none; } .rc-rd summary::-webkit-details-marker { display: none; }
.rc-rd summary b { font-weight: 900; } .rc-rd summary b::before { content: '▸ '; } .rc-rd[open] summary b::before { content: '▾ '; } .rc-rd summary > span:nth-child(2) { font-family: var(--en); font-weight: 700; } .rc-rd summary .rc-bar { grid-column: 1 / -1; height: 10px; }
.rc-rd ul { list-style: none; margin: 10px 0 0; padding: 0; } .rc-rd li { padding: 4px 0 4px 26px; position: relative; font-size: 14.5px; font-weight: 700; border-top: 1.5px dashed #dedbea; }
.rc-rd li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 15px; height: 15px; border: 2.5px solid #c9c5db; border-radius: 5px; box-sizing: border-box; }
.rc-rd li.on::before { content: '✓'; background: var(--mint); border-color: var(--ink); font-size: 11px; line-height: 10px; text-align: center; font-weight: 900; }
.rc-gr, .rc-bt { padding: 14px 16px; margin-top: 12px; } .rc-gr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rc-gr > b, .rc-bt > b { font-weight: 900; }
.rc-gr div { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .rc-gr span { font-weight: 800; font-size: 13px; border: 2.5px solid #c9c5db; color: var(--mute); border-radius: 99px; padding: 1px 10px; white-space: nowrap; } .rc-gr span.on { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.rc-bt table { width: 100%; border-collapse: collapse; margin-top: 6px; } .rc-bt th { text-align: left; font-weight: 700; padding: 5px 0; } .rc-bt td { text-align: right; font-family: var(--en); font-weight: 700; white-space: nowrap; } .rc-bt tr + tr { border-top: 1.5px dashed #dedbea; } .rc-bt p { margin: 6px 0 0; }
.rc-mv { padding: 14px 18px; } .rc-mv summary { cursor: pointer; font-weight: 900; } .rc-mv p { font-size: 14.5px; margin: 10px 0 0; } .rc-mv textarea { width: 100%; box-sizing: border-box; margin-top: 10px; border: var(--line); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 13px; }
.rc-mb { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } #rcMsg { font-weight: 800; font-size: 13.5px; color: var(--green); }
/* 読みものの「読みおわり」のしるし、ホームのカードからのリンク */
.rc-read { margin: 28px 0 0; padding: 10px 14px; background: #e9f9ef; border: 2.5px solid var(--ink); border-radius: 14px; font-weight: 800; }
.h6-more { display: inline-block; margin-top: 8px; font-weight: 800; font-size: 14px; }

@media (max-width: 860px) {
  .rc-hero { grid-template-columns: 90px minmax(0, 1fr); padding: 16px 14px; gap: 12px; } .rc-hero > img { width: 90px; }
  .rc-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 8px; } .rc-stats b { font-size: 24px; } .rc-stats span { font-size: 11px; }
  .rc-hm h1 { font-size: 23px; white-space: nowrap; } .rc-hm p { font-size: 14px; }
  .rc-hm .btn.big { width: 100%; white-space: nowrap; font-size: 17px; padding: 10px 12px; }
  .rc-2, .rc-ss, .rc-rds { grid-template-columns: 1fr; } .rc-cns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-bs { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 9px; } .rc-bm { width: 52px; height: 52px; font-size: 23px; }
}

/* おとタッチボード（tb-）と カタカナで覚えるフォニックス（kk-） */
.tb-wrap { background: var(--paper); border: var(--line); border-radius: 22px; box-shadow: var(--sh); padding: 14px; margin: 8px 0 26px; }
.tb-wrap:fullscreen, .tb-wrap.tb-fs { border-radius: 0; border: 0; padding: 16px 20px; overflow: auto; width: 100%; height: 100%; }
.tb-wrap.tb-fs { position: fixed; inset: 0; z-index: 90; }
#touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tb-bar { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tb-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-tab { border: var(--line); border-radius: 14px; background: #fff; font-weight: 900; font-size: 16px; padding: 8px 16px; cursor: pointer; min-height: 46px; }
.tb-tab.on { background: var(--ink); color: #fff; }
.tb-opt { display: flex; gap: 6px; flex-wrap: wrap; } .tb-opt .chip { cursor: pointer; font-size: 14px; padding: 6px 14px; min-height: 40px; } .tb-opt .chip.on { background: var(--yellow); }
.tb-st { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.tb-s { flex: 0 0 auto; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; font-weight: 800; font-size: 13.5px; padding: 4px 12px 4px 4px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 40px; }
.tb-s i { font-style: normal; font-family: var(--en); width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); display: grid; place-items: center; }
.tb-s.on { background: var(--c); box-shadow: var(--sh-s); }
.tb-now { min-height: 76px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: var(--line); border-radius: 18px; padding: 8px 16px; margin-bottom: 12px; }
.tb-hint { color: var(--ink2); font-weight: 800; }
.tb-ng { font-family: 'Andika', var(--en); font-size: 46px; line-height: 1; } .tb-ni { font-family: var(--ipa); font-weight: 700; font-size: 26px; color: var(--hl); } .tb-nk { font-weight: 900; font-size: 18px; background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 99px; padding: 2px 14px; }
.tb-kw { display: inline-flex; align-items: center; gap: 8px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fffbe9; padding: 2px 14px 2px 6px; cursor: pointer; } .tb-kw img { width: 52px; height: 52px; object-fit: contain; } .tb-kw b { font-family: 'Andika', var(--en); font-size: 24px; }
.tb-more { margin-left: auto; font-weight: 800; font-size: 14px; }
.tb-prog { font-family: var(--en); font-weight: 700; font-size: 20px; }
.tb-grid { display: grid; gap: 10px; touch-action: manipulation; }
.tb-grid.nL { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .tb-grid.nM { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } .tb-grid.nS { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tb-t { aspect-ratio: 1 / .86; border: var(--line); border-radius: 20px; background: var(--c, #fff); box-shadow: var(--sh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 4px; touch-action: manipulation; color: var(--ink); transition: transform .08s, box-shadow .08s; min-width: 0; }
.tb-t b { font-family: 'Andika', var(--en); font-weight: 700; font-size: clamp(30px, 5.2vw, 60px); line-height: 1; pointer-events: none; }
.tb-grid.nS .tb-t b { font-size: clamp(34px, 6vw, 68px); }
.tb-t small { font-weight: 900; font-size: clamp(11px, 1.5vw, 15px); background: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 0 8px; pointer-events: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-t:active, .tb-t.pop { transform: translate(3px, 3px) scale(.96); box-shadow: 1px 1px 0 var(--ink); }
.tb-t.pop { animation: tbpop .32s; } @keyframes tbpop { 30% { transform: scale(1.12) rotate(-3deg); background: var(--yellow); } }
.tb-t.ok { background: var(--mint); animation: pop .35s; } .tb-t.ng { animation: shake .3s; background: #ffd9d9; }
.tb-t.used { opacity: .25; box-shadow: none; }
.tb-build { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 4px 0 16px; }
.tb-pic { width: 150px; text-align: center; background: #fff; border: var(--line); border-radius: 18px; padding: 6px; box-shadow: var(--sh-s); } .tb-pic img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; } .tb-pic span { font-weight: 800; font-size: 14px; color: var(--ink2); }
.tb-slots { display: flex; gap: 8px; } .tb-slot { width: clamp(58px, 11vw, 96px); height: clamp(66px, 12vw, 104px); border: 3px dashed var(--ink2); border-radius: 16px; background: #fff; display: grid; place-items: center; font-family: 'Andika', var(--en); font-weight: 700; font-size: clamp(30px, 6vw, 54px); }
.tb-slot.on { border-style: solid; border-color: var(--ink); background: var(--yellow); animation: pop .3s; }
.tb-bt { max-width: 760px; margin: 0 auto; }
.tb-end { text-align: center; background: #fff; border: var(--line); border-radius: 20px; padding: 30px 16px; } .tb-end h2 { font-size: 34px; margin: 0 0 6px; font-weight: 900; } .tb-end b { font-family: var(--en); font-size: 1.6em; color: var(--pink); }
@media (max-width: 640px) {
  .tb-wrap { padding: 10px 8px; border-radius: 16px; } .tb-tab { font-size: 14px; padding: 6px 10px; } .tb-grid { gap: 7px; }
  .tb-grid.nL { grid-template-columns: repeat(5, 1fr); } .tb-grid.nM { grid-template-columns: repeat(4, 1fr); } .tb-grid.nS { grid-template-columns: repeat(3, 1fr); }
  .tb-t { border-radius: 14px; box-shadow: var(--sh-s); } .tb-now { min-height: 64px; padding: 6px 10px; gap: 8px; } .tb-ng { font-size: 34px; } .tb-ni { font-size: 20px; } .tb-nk { font-size: 14px; } .tb-kw img { width: 40px; height: 40px; } .tb-kw b { font-size: 19px; } .tb-hint { font-size: 13px; } .tb-pic { width: 110px; }
}

.kk-lead { background: #fff1c1; padding: 18px 20px; margin: 8px 0 20px; } .kk-lead p { margin: 0 0 8px; line-height: 1.85; } .kk-lead p:last-child { margin: 0; }
.kk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kk-c { border: var(--line); border-radius: 18px; background: #fff; box-shadow: var(--sh-s); padding: 8px 8px 10px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ink); transition: transform .08s; }
.kk-c:active, .kk-c.on { transform: translate(2px, 2px); background: var(--yellow); }
.kk-c b { font-family: 'Andika', var(--en); font-size: 38px; line-height: 1.1; } .kk-c i { font-style: normal; font-family: var(--ipa); color: var(--hl); font-weight: 700; font-size: 15px; }
.kk-c strong { font-size: 19px; font-weight: 900; line-height: 1.3; } .kk-c span { font-size: 12.5px; color: var(--ink2); font-weight: 700; font-family: var(--en); }
.kk-c em { font-style: normal; font-size: 11.5px; color: var(--ink2); line-height: 1.5; text-align: left; margin-top: 4px; border-top: 2px dashed #e6e2f0; padding-top: 4px; }
.kk-grid.sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .kk-grid.sm .kk-c b { font-size: 28px; } .kk-grid.sm .kk-c strong { font-size: 15px; }
.kk-trap { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; } .kk-trap .box h3 { margin-top: 0; } .kk-trap .say { margin: 2px 2px; }

/* ===== 共通 UI の作り直し：ヘッダー・メニュー・検索・上へもどる・アイコン・ページ内ナビ ===== */
html.noscroll { overflow: hidden; }
/* スマホで画面が横にずれないように：ページより横にはみ出した物は切る（clip はスクロール領域を作らないので sticky は生きる） */
html { overflow-x: hidden; }
body { overflow-x: clip; max-width: 100%; }
@supports (overflow: clip) { html { overflow-x: clip; } }
.logo { min-width: 0; flex-shrink: 1; } .logo-t { min-width: 0; } .logo-t strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-mark { flex-shrink: 0; }
html { scroll-padding-top: 120px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 0 0 12px 0; }
.skip:focus { left: 0; }
.ic { display: inline-block; width: 1.5em; height: 1.5em; object-fit: contain; vertical-align: -.35em; margin-right: .3em; }
.ic-xl { width: 46% !important; height: auto !important; aspect-ratio: 1; object-fit: contain !important; filter: drop-shadow(4px 4px 0 rgba(29, 24, 56, .25)); }
.noimg { display: grid; place-items: center; width: 100%; height: 100%; min-height: 56px; font-family: var(--en); font-weight: 700; font-size: 30px; color: var(--hl); background: repeating-linear-gradient(45deg, #fff6e0 0 10px, #fff 10px 20px); border-radius: 12px; }

/* --- ヘッダー --- */
.hd-in { gap: 10px; }
.nav { margin-left: auto; }
.nav a { display: inline-flex; align-items: center; }
.nav .nav-ic { width: 1.25em; height: 1.25em; margin-right: .2em; vertical-align: 0; }
.hd-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hd-b { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border: var(--line); border-radius: 14px; background: #fff; box-shadow: var(--sh-s); font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.hd-b:hover { background: var(--yellow); }
.hd-b:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hd-menu { background: var(--ink); color: #fff; }
.hd-menu:hover { background: var(--pink); }
@media (min-width: 901px) and (max-width: 1360px) { .nav a { padding: 6px 6px; font-size: 13.5px; } }
@media (max-width: 1180px) { .hd .nav { display: none; } .hd-r { margin-left: auto; } }
@media (max-width: 900px) { .hd-in { height: 58px; flex-wrap: nowrap; padding: 0; } .hd .mode { display: none; } }
@media (max-width: 420px) { .hd-b span { display: none; } .hd-b { width: 44px; padding: 0; justify-content: center; } .logo-t small { display: none; } }

/* --- メニュー（右から出るパネル） --- */
.dw-bg { position: fixed; inset: 0; z-index: 80; background: rgba(29, 24, 56, .5); opacity: 0; transition: opacity .2s; }
.dw-bg.open { opacity: 1; }
.dw { position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: var(--paper); border-left: var(--line); overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 28px; transform: translateX(104%); transition: transform .22s cubic-bezier(.2, .8, .3, 1); }
.dw.open { transform: none; }
.dw[hidden], .dw-bg[hidden] { display: none; }
.dw-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 0; background: var(--paper); font-size: 20px; }
.dw-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0 14px; border: var(--line); border-radius: 16px; background: #fff; box-shadow: var(--sh-s); font-weight: 700; color: var(--mute); text-align: left; }
.dw-home { display: block; margin: 14px 0 0; padding: 10px 14px; border: var(--line); border-radius: 14px; background: #fff; font-weight: 900; text-decoration: none; }
.dw-g h4 { margin: 18px 4px 6px; font-size: 13px; letter-spacing: .12em; color: var(--pink); }
.dw-g a { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; text-decoration: none; border: 2.5px solid transparent; }
.dw-g a:hover { background: #fff; border-color: var(--ink); }
.dw-g a.on, .dw-home.on { background: var(--yellow); border-color: var(--ink); box-shadow: var(--sh-s); }
.dw-ic { width: 44px; height: 44px; margin: 0; object-fit: contain; }
.dw-g b { display: block; font-size: 16.5px; line-height: 1.3; } .dw-g small { display: block; font-size: 12.5px; color: var(--ink2); line-height: 1.4; }
.dw-mode { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 12px 14px; border: var(--line); border-radius: 16px; background: #fff; font-weight: 800; }
.dw-mode .mode { display: flex !important; }

/* --- 検索 --- */
.sx { position: fixed; inset: 0; z-index: 95; background: rgba(29, 24, 56, .55); padding: 5vh 12px 12px; overflow-y: auto; overscroll-behavior: contain; }
.sx[hidden] { display: none; }
.sx-in { max-width: 760px; margin: 0 auto; background: var(--paper); border: var(--line); border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); padding: 16px; }
.sx-bar { display: flex; align-items: center; gap: 10px; border: var(--line); border-radius: 16px; background: #fff; padding: 4px 6px 4px 14px; }
.sx-bar input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 18px; font-weight: 700; padding: 10px 0; background: none; }
.sx-bar .hd-b { box-shadow: none; border-width: 2.5px; }
.sx-hint { margin: 10px 2px 0; font-size: 13px; font-weight: 700; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sx-hint button { border: 2px solid var(--ink); border-radius: 99px; background: #fff; padding: 1px 12px; font-weight: 700; font-size: 13px; }
.sx-res h4 { margin: 16px 2px 8px; font-size: 14px; color: var(--pink); letter-spacing: .08em; }
.sx-ws { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-w { display: inline-flex; align-items: center; gap: 6px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; padding: 4px 8px; }
.sx-w small { font-weight: 700; } .sx-w a { font-size: 12px; font-weight: 800; color: var(--blue); white-space: nowrap; }
.sx-ps { display: grid; gap: 6px; }
.sx-ps a { display: grid; grid-template-columns: 72px 1fr; column-gap: 10px; align-items: baseline; text-decoration: none; padding: 8px 10px; border-radius: 14px; border: 2.5px solid transparent; background: #fff; }
.sx-ps a:hover { border-color: var(--ink); background: var(--yellow); }
.sx-ps b { font-size: 16px; line-height: 1.4; } .sx-ps small { grid-column: 2; font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.sx-k { grid-row: span 2; align-self: center; text-align: center; font-size: 11.5px; font-weight: 900; border: 2px solid var(--ink); border-radius: 99px; background: #e3dcff; padding: 0 4px; }
.sx-k.k-learn { background: #ffd6e2; } .sx-k.k-guide { background: #d6f5c9; } .sx-k.k-games { background: #cfe9ff; } .sx-k.k-books, .sx-k.k-lessons { background: #fff1c1; }
.sx-none { font-weight: 700; padding: 14px 4px; }

/* --- 上へもどる --- */
.totop { position: fixed; z-index: 60; right: 16px; bottom: 18px; width: 58px; height: 58px; border: var(--line); border-radius: 50%; background: var(--yellow); box-shadow: var(--sh-s); display: grid; place-items: center; align-content: center; padding: 0; line-height: 1; }
.totop span { font-size: 10.5px; font-weight: 900; margin-top: -3px; }
.totop[hidden] { display: none; }
.totop:hover { background: var(--pink); color: #fff; transform: translateY(-2px); }
@media print { .totop, .hd, .ft, .subnav { display: none !important; } }

/* --- ページ内ナビ（ユニット） --- */
.subnav { position: sticky; top: 67px; z-index: 40; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 8px 16px; background: rgba(255, 247, 234, .94); backdrop-filter: blur(6px); border-bottom: 2px dashed rgba(29, 24, 56, .25); }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex-shrink: 0; text-decoration: none; font-weight: 800; font-size: 14px; padding: 4px 14px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; }
.subnav a.on { background: var(--ink); color: #fff; }
@media (max-width: 900px) { .subnav { top: 61px; } }
section[id], span[id] { scroll-margin-top: 130px; }

/* --- ページの見出しカード（絵＋説明） --- */
.pg-hero { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; margin-top: 10px; }
.pg-hero > img { width: 100%; height: 100%; object-fit: cover; border-right: 3px solid var(--ink); }
.pg-hero > div { padding: 24px; }
.pg-hero h1 { margin: 4px 0 8px; font-size: clamp(26px, 4vw, 40px); font-weight: 900; line-height: 1.25; }
.pg-hero p { margin: 0; } .pg-en { font-family: var(--en); font-weight: 700; letter-spacing: .1em; }
@media (max-width: 720px) {
  .pg-hero, .card[style*="minmax(0,1fr) minmax(0,1fr)"] { grid-template-columns: 1fr !important; }
  .pg-hero > img, .card[style*="minmax(0,1fr) minmax(0,1fr)"] > img { border-right: 0 !important; border-bottom: 3px solid var(--ink); aspect-ratio: 16 / 9; }
  .pg-hero > div, .card[style*="minmax(0,1fr) minmax(0,1fr)"] > div { padding: 18px !important; }
}

/* --- ホーム --- */
.hero h1 { text-wrap: balance; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.hero-cta .btn .ic { width: 1.4em; height: 1.4em; }
.doors { grid-template-columns: 1fr 1fr; max-width: 520px; }
.door { padding: 10px 14px !important; } .door b { font-size: 16px !important; display: flex; align-items: center; } .door span { font-size: 12.5px !important; }
.step3 { position: relative; text-decoration: none; padding: 22px 20px 18px; display: grid; gap: 6px; justify-items: start; transition: transform .12s; }
.step3:hover { transform: translate(-2px, -2px); }
.step3 .st-n { position: absolute; top: -14px; left: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--pink); color: #fff; border: var(--line); display: grid; place-items: center; font-family: var(--en); font-weight: 700; font-size: 20px; }
.step3 .st-ic { width: 72px; height: 72px; margin: 4px 0 0; }
.step3 h3 { margin: 0; font-size: 20px; font-weight: 900; } .step3 p { margin: 0 0 6px; font-size: 14.5px; color: var(--ink2); }
.sec-h h2 .ic { width: 1.25em; height: 1.25em; }

/* --- ゲームのはじめの画面：長くてもスタートボタンが切れないように --- */
.stagebox { min-height: 640px; }
.overlay { justify-content: flex-start; overflow-y: auto; gap: 12px; padding: 20px 16px; }
.overlay > :first-child { margin-top: auto; } .overlay > :last-child { margin-bottom: auto; }
.overlay .o-art { width: min(260px, 60%) !important; }
.overlay #goBtn { flex-shrink: 0; position: sticky; bottom: 4px; z-index: 2; }
@media (max-width: 600px) { .stagebox { min-height: min(680px, calc(100svh - 80px)); } .overlay h2 { font-size: 26px; } .overlay p { font-size: 14px; } .lvl button { min-width: 0; flex: 1; padding: 6px 8px; } }

/* --- 細かい直し --- */
.blend-btn .ic { width: 22px; height: 22px; margin: 0; vertical-align: middle; }
.box h3 .ic, .card h3 .ic { width: 1.5em; height: 1.5em; }
.grid.g2 > *, .grid.g3 > *, .grid.g4 > * { min-width: 0; }
.ft-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
.grid.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 800px) { .grid.steps { grid-template-columns: 1fr; } }
.grid.lgrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hd .nav { gap: 4px; overflow: visible; }
.hd .nav a { padding: 6px 10px; font-size: 14.5px; }
@media (max-width: 1280px) { .hd .nav a { padding: 6px 7px; font-size: 13.5px; } }
.logo-t small, .logo small { display: block !important; font-family: var(--ja); font-size: 11.5px; letter-spacing: .06em; color: var(--pink); font-weight: 900; }
@media (max-width: 420px) { .logo-t small { font-size: 10px; } .logo-t strong { font-size: 14px; } }
/* --- フッターのボタン・このサイトについて --- */
.ft-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.ft .ft-btns .btn { color: var(--ink); text-decoration: none; }
.btn.x-btn, .ft .ft-btns .btn.x-btn { background: #000; color: #fff; }
.btn.x-btn span { font-size: 1.15em; margin-right: .3em; }
.about h2 { display: flex; align-items: center; gap: .2em; }
.ab-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 14px 0 18px; }
.ab-nums a { text-decoration: none; text-align: center; border: var(--line); border-radius: 16px; background: #fff; padding: 10px 6px; box-shadow: var(--sh-s); }
.ab-nums b { display: block; font-family: var(--en); font-size: 28px; line-height: 1.1; color: var(--pink); } .ab-nums span { font-size: 12.5px; font-weight: 800; }
.promise { display: grid; gap: 12px; margin: 14px 0; }
.pm { position: relative; border: var(--line); border-radius: 18px; background: #fff; padding: 14px 16px 12px 62px; box-shadow: var(--sh-s); }
.pm-n { position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); border: var(--line); display: grid; place-items: center; font-family: var(--en); font-size: 18px; }
.pm h3 { margin: 2px 0 4px; font-size: 19px; } .pm p { margin: 0; font-size: 15px; }
.prof { padding: 20px; background: #fffbe9; }
.prof-head { display: flex; align-items: center; gap: 14px; }
.prof-pic { width: 84px; height: 84px; object-fit: contain; border-radius: 50%; border: var(--line); background: #fff; flex-shrink: 0; }
.prof-head small { font-weight: 800; color: var(--ink2); } .prof-head h3 { margin: 0; font-size: 26px; font-weight: 900; } .prof-head h3 span { font-size: 13px; margin-left: 10px; color: var(--mute); }
.timeline { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0; }
.timeline li { border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; padding: 2px 12px; font-size: 13.5px; font-weight: 700; }
.timeline li:not(:last-child)::after { content: ' →'; color: var(--pink); }
.timeline li:last-child { background: var(--yellow); }
.quals { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.quals span { background: var(--ink); color: #fff; border-radius: 8px; padding: 2px 10px; font-size: 13.5px; font-weight: 800; } .quals small { font-weight: 700; }

/* ===== スマホ：全体を詰める＋トップページを短く（2026-11-11） ===== */
@media (max-width: 640px) {
  .sec { margin: 34px 0; }
  .sec-h { margin-bottom: 12px; } .sec-h h2 { font-size: 22px; line-height: 1.35; } .sec-h p { font-size: 13.5px; margin: 2px 0 0; }
  .wrap, .narrow { padding: 0 12px; }
  .subnav { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .card { border-radius: 16px; }
  .totop { width: 50px; height: 50px; right: 10px; bottom: 12px; }
  /* トップ */
  body.home .hero-in { padding-top: 18px; padding-bottom: 20px; gap: 0; }
  body.home .hero h1 { font-size: 30px; line-height: 1.25; margin: 0 0 8px; } body.home .hero .big-en { font-size: 15px; }
  body.home .hero .lead { font-size: 14.5px; line-height: 1.7; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  body.home .hero-art, body.home .doors { display: none; }
  body.home .hero-cta { gap: 8px; margin: 0 0 12px; } body.home .hero-cta .btn { flex: 1 1 100%; justify-content: center; text-align: center; padding: 10px 12px; font-size: 16px; }
  body.home .hero-stats { margin: 0; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  body.home .hero-stats div { flex: 0 0 auto; padding: 3px 10px; border-radius: 12px; border-width: 2.5px; } body.home .hero-stats b { font-size: 17px; } body.home .hero-stats span { font-size: 10.5px; }
  /* 3ステップ：横長の行に */
  body.home .grid.steps { gap: 10px; }
  body.home .step3 { grid-template-columns: 46px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px 12px 16px; }
  body.home .step3 .st-n { position: static; grid-row: span 2; width: 34px; height: 34px; font-size: 17px; }
  body.home .step3 .st-ic, body.home .step3 p { display: none; }
  body.home .step3 h3 { font-size: 17px; } body.home .step3 .btn { justify-self: start; padding: 2px 10px; font-size: 12.5px; }
  /* ステージ：2列の小さなタイル */
  body.home .map { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.home .stage { min-height: 0; padding: 10px 12px; border-radius: 16px; box-shadow: var(--sh-s); }
  body.home .stage h3 { font-size: 15.5px; line-height: 1.3; margin: 4px 0 0; } body.home .stage .s-g, body.home .stage .s-en { display: none; }
  /* 人気の授業：3本だけ */
  body.home .grid.lgrid { gap: 8px; } body.home .grid.lgrid > :nth-child(n+4) { display: none; }
  body.home .lsn-card { grid-template-columns: 54px 1fr; padding: 8px 10px; } body.home .lsn-card .lc-g { width: 54px; height: 54px; font-size: 20px; border-radius: 12px; }
  body.home .lsn-card h3 { font-size: 15px; } body.home .lsn-card p { display: none; }
  /* コーナー一覧：2列・絵と名前だけ */
  body.home .grid.g3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.home .feat .f-b { padding: 8px 10px; } body.home .feat h3 { font-size: 14px; line-height: 1.35; margin: 0; } body.home .feat p { display: none; }
  /* おとモン：横にスクロール */
  body.home .grid.g4 { display: flex; overflow-x: auto; gap: 10px; padding: 2px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  body.home .grid.g4 > * { flex: 0 0 38%; scroll-snap-align: start; }
  /* なぜフォニックス：見出しだけの3行に */
  body.home .box { margin: 0; padding: 10px 12px; } body.home .box p { display: none; } body.home .box h3 { margin: 0; font-size: 15.5px; }
  body.home .sec > .card[style*="padding:26px"] { padding: 16px !important; gap: 10px !important; }
  /* フッター */
  .ft-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } .ft-grid > div:first-child { grid-column: 1 / -1; }
  .ft ul { margin: 0; padding: 0; list-style: none; } .ft li { font-size: 13.5px; line-height: 2; } .ft h4 { margin: 0 0 2px; }
  /* ユニットページ */
  .u-hero { gap: 10px; } .u-g-big { font-size: 56px !important; min-width: 0; padding: 4px 20px; }
  .words { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
}
@media (max-width: 640px) {
  .lsn:not(.on) .lsn-stage { aspect-ratio: 16 / 10; }
  body.home .feat .f-img { aspect-ratio: 2 / 1; }
  body.home .sec { margin: 28px 0; }
}
/* ナビの文字が枠からはみ出さないように */
.hd .nav a { flex: 0 0 auto; white-space: nowrap; }
.hd .nav { flex-wrap: nowrap; }
@media (max-width: 1320px) { .hd .nav { display: none; } .hd-r { margin-left: auto; } }
.hd .nav { margin-right: 10px; }
.rec-res { margin: 8px 0 0; padding: 8px 12px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fffbe6; font-weight: 800; }
.rec-res small { display: block; font-weight: 500; font-size: 12px; color: var(--ink2); }
.rec-st { color: var(--orange); font-size: 1.25em; letter-spacing: .08em; }

/* ===== 長い一覧をたたむ：タブ（1グループずつ）と「のこりも見る」（2026-11-11）。html.js が無ければ全部ならぶ ===== */
.js .tabs > section { display: none; }
.js .tabs > section.on, .js .tabs:not(.ready) > section:first-of-type { display: block; }
.tabs > section.sec { margin: 18px 0 0; }
.tabbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.tabbar .chip { text-decoration: none; cursor: pointer; padding: 5px 14px; font-size: 14.5px; white-space: nowrap; }
.tabbar .chip[aria-selected="true"] { background: var(--ink); color: #fff; }
.tabbar .chip small { margin-left: 5px; font-size: 12px; opacity: .65; }
.tabbar .chip .ic { width: 1.2em; height: 1.2em; }
@media (max-width: 900px) {
  .tabbar { position: sticky; top: 61px; z-index: 30; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 12px -12px 0; padding: 8px 12px; background: rgba(255, 247, 234, .95); backdrop-filter: blur(6px); border-bottom: 2px dashed rgba(29, 24, 56, .18); }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar .chip { flex: 0 0 auto; }
}
.js .grid[data-more="6"]:not(.open) > :nth-child(n+7), .js .grid[data-more="8"]:not(.open) > :nth-child(n+9), .js .grid[data-more="12"]:not(.open) > :nth-child(n+13) { display: none; }
@media (max-width: 640px) { .js .grid[data-more]:not(.open) > :nth-child(n+7) { display: none; } }
.more-btn { display: flex; margin: 18px auto 0; }
@media (max-width: 640px) {
  .grid.omgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .omgrid .otomon { padding: 6px; } .omgrid .om-n { font-size: 12.5px; } .omgrid .om-s { font-size: 10.5px; } .omgrid .ipa-tag { font-size: 13px; padding: 0 5px; }
}
@media print { .js .tabs > section { display: block !important; } .tabbar, .more-btn { display: none !important; } }
.tabbar .chip b { font-family: var(--en); color: var(--pink); margin-right: 3px; } .tabbar .chip[aria-selected="true"] b { color: var(--yellow); }
/* ヘッダー：ナビ（とくに最後の「プリント」）が右の「さがす」ボタンにくっつかないように、少しつめて、ナビは右ボタンの下にもぐらせない */
.hd .nav { gap: 2px; margin-right: 6px; overflow: hidden; padding: 3px 3px 5px; margin-top: -3px; margin-bottom: -5px; }
.hd .nav a { padding: 6px 8px; }
/* 広い画面ではヘッダーだけ少し横に広げて、ロゴ・ナビ・右ボタンが全部おさまるように */
.hd .hd-in { max-width: 1320px; }

/* 音声の説明・人の声の動画・多読サイトへの案内 */
.vo-main { padding: 20px 22px; background: #fffbe9; }
.vo-lead { margin: 0 0 12px; font-size: 16.5px; line-height: 1.8; } .vo-lead b { background: linear-gradient(transparent 60%, var(--yellow) 60%); }
.vo-t { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.65; }
.vo-t th, .vo-t td { border-top: 2px dashed #d9cfb8; padding: 10px 8px; text-align: left; vertical-align: top; }
.vo-t th { width: 34%; font-weight: 900; }
.vo-note { margin: 12px 0 0; font-size: 15px; line-height: 1.8; }
.vo-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: 21px; font-weight: 900; } .vo-h svg { width: 28px; height: 28px; }
.vo-yt .feat h3 { font-size: 15.5px; } .vo-yt a, .td2 a { text-decoration: none; color: var(--ink); }
.vo-more { text-align: center; margin: 18px 0 0; }
.td2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin: 14px 0; }
.td-c { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; transition: transform .12s; }
.td-c:hover { transform: translate(-2px, -3px); }
.td-jr { background: #ffe9d6; } .td-hon { background: #dceeff; }
.td-en { font-family: var(--en); font-weight: 700; letter-spacing: .1em; color: var(--pink); font-size: 14px; }
.td-t { font-size: clamp(22px, 3vw, 28px); font-weight: 900; line-height: 1.3; } .td-t small { font-size: .6em; font-weight: 800; }
.td-d { font-size: 15px; line-height: 1.8; } .td-d strong { background: linear-gradient(transparent 60%, var(--yellow) 60%); }
.td-tags { display: flex; flex-wrap: wrap; gap: 6px; } .td-tags i { font-style: normal; font-size: 12.5px; font-weight: 800; background: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 1px 10px; }
.td-btn { margin-top: auto; align-self: flex-start; font-size: 18px; padding: 13px 24px; }
@media (max-width: 640px) { .vo-t th, .vo-t td { display: block; width: auto; } .vo-t td { border-top: 0; padding-top: 0; } .vo-main { padding: 16px 14px; } .td-btn { align-self: stretch; } }