/* TED HACKS — design system
   方針：入口は少なく、絵で分かる、1画面1つのこと。ステージ（濃紺）＋紙（クリーム）＋コーラル。 */
:root {
  --ink: #16182a; --stage: #0e0f1d; --stage2: #1b1d33;
  --red: #ff4b3e; --red2: #e8392d; --redsoft: #ffe3df;
  --cream: #fff6ea; --paper: #ffffff; --line: #ecdfcc;
  --mustard: #ffc53d; --mustardsoft: #fff1c9;
  --mint: #22bfa8; --mintsoft: #d6f5ef;
  --lilac: #8f7cff; --lilacsoft: #ebe7ff;
  --sky: #3aa0ff; --skysoft: #dcefff;
  --text: #1d1f2e; --muted: #6a6e84; --muted2: #9a9db0;
  --r: 18px; --r2: 26px;
  --sh: 0 2px 0 rgba(22,24,42,.06), 0 10px 30px -12px rgba(22,24,42,.22);
  --sh2: 0 4px 0 var(--ink);
  --f: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --fe: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --fd: "Dela Gothic One", "Noto Sans JP", sans-serif;
  --max: 1180px;
  --hdr: 60px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f); color: var(--text); background: var(--cream); line-height: 1.75; font-size: 16px; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; }
.en { font-family: var(--fe); }
.wrap { max-width: var(--max); 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); }
.mute { color: var(--muted); }
.center { text-align: center; }
.hide { display: none !important; }

/* ===== header ===== */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--stage); color: #fff; height: var(--hdr); }
.hdr .wrap { display: flex; align-items: center; gap: 18px; height: 100%; }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--fd); font-size: 22px; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.logo .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255,75,62,.25); position: relative; }
.logo .dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--stage); }
.logo b { color: var(--red); font-weight: 400; }
.logo small { font-family: var(--f); font-size: 10px; color: #b9bbd0; font-weight: 700; margin-left: 2px; align-self: flex-end; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: #d9dbea; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a.on { background: #fff; color: var(--ink); }
.nav svg { width: 18px; height: 18px; }
.xp { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); padding: 5px 12px 5px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.xp .lv { background: var(--mustard); color: var(--ink); border-radius: 999px; padding: 1px 8px; font-family: var(--fe); font-weight: 900; }
.xp .bar { width: 54px; height: 6px; background: rgba(255,255,255,.18); border-radius: 9px; overflow: hidden; }
.xp .bar i { display: block; height: 100%; background: var(--mint); width: 0; transition: width .6s; }
.xp .fire { color: #ffb36b; }
/* ハンバーガー（900px以下で表示） */
.burger { display: none; width: 44px; height: 44px; margin-right: -8px; border-radius: 12px; flex: 0 0 44px; position: relative; }
.burger:hover { background: rgba(255,255,255,.08); }
.burger i { position: absolute; left: 11px; right: 11px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .25s, opacity .2s, top .25s; }
.burger i:nth-child(1) { top: 14px; } .burger i:nth-child(2) { top: 21px; } .burger i:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: 110; }
.drawer[hidden] { display: none; }
.dw-bg { position: absolute; inset: 0; background: rgba(14,15,29,.6); opacity: 0; transition: opacity .25s; }
.dw-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(330px, 86vw); background: var(--stage); color: #fff; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px -20px rgba(0,0,0,.6); }
.drawer.open .dw-bg { opacity: 1; }
.drawer.open .dw-panel { transform: none; }
.dw-head { display: flex; align-items: center; justify-content: space-between; height: var(--hdr); flex: none; }
.dw-head .logo { font-size: 20px; }
.dw-x { width: 44px; height: 44px; margin-right: -8px; font-size: 30px; line-height: 1; border-radius: 12px; color: #d9dbea; }
.dw-x:hover { background: rgba(255,255,255,.08); color: #fff; }
.dw-main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 20px; }
.dw-main a { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-radius: 14px; background: var(--stage2); font-weight: 900; font-size: 16px; color: #e6e7f2; }
.dw-main a:hover { background: #26294a; color: #fff; }
.dw-main a.on { background: #fff; color: var(--ink); }
.dw-main a.on svg { color: var(--red); }
.dw-main svg { width: 22px; height: 22px; flex: none; }
.dw-sub b { display: block; font-family: var(--fe); font-size: 11.5px; letter-spacing: .14em; color: #8d90a8; margin: 0 4px 6px; }
.dw-sub a { display: flex; align-items: center; justify-content: space-between; padding: 13px 6px; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 700; font-size: 15px; color: #d9dbea; }
.dw-sub a::after { content: "›"; font-size: 20px; color: var(--red); line-height: 1; }
.dw-sub a:hover, .dw-sub a.on { color: #fff; }
body.dw-lock { overflow: hidden; }
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  .xp { margin-left: auto; }
  .logo small { display: none; }
}
@media (min-width: 1081px) { .drawer { display: none !important; } }
@media (max-width: 380px) { .logo { font-size: 18px; gap: 6px; } .logo .dot { width: 18px; height: 18px; } .logo .dot::after { inset: 5.5px; } .hdr .wrap { gap: 8px; } .xp { gap: 6px; padding-right: 8px; min-width: 0; } .xp .bar { display: none; } .burger { margin-right: -10px; } }

/* 上に戻るボタン */
.totop { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 70; width: 50px; height: 50px; border-radius: 50%; background: var(--red); color: #fff; border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .25s, transform .25s, box-shadow .12s; }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.totop:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.totop svg { width: 22px; height: 22px; }
@media (max-width: 560px) { .totop { width: 46px; height: 46px; } }
@media print { .totop, .drawer, .burger { display: none !important; } }

/* ===== buttons / chips ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 900; font-size: 15.5px; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); box-shadow: var(--sh2); transition: transform .12s, box-shadow .12s; line-height: 1.3; text-align: center; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.red { background: var(--red); color: #fff; }
.btn.ink { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #000; }
.btn.mint { background: var(--mint); color: #fff; }
.btn.yel { background: var(--mustard); }
.btn.big { padding: 16px 30px; font-size: 18px; }
.btn.sm { padding: 7px 14px; font-size: 13.5px; border-width: 2px; box-shadow: 0 3px 0 var(--ink); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); box-shadow: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 2px solid var(--line); font-weight: 700; font-size: 14px; white-space: nowrap; transition: .15s; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--cream); color: var(--ink); line-height: 1.6; }
.tag.ted { background: var(--ink); color: #fff; }
.tag.teded { background: var(--red); color: #fff; }
.tag.tedx { background: #444; color: #fff; }
.tag.lv1 { background: var(--mintsoft); color: #08735f; }
.tag.lv2 { background: var(--mustardsoft); color: #8a5a00; }
.tag.lv3 { background: var(--redsoft); color: #b0261b; }
.tag.ja { background: var(--skysoft); color: #135ea8; }

/* ===== sections ===== */
.sec { padding: 56px 0; }
.sec.tight { padding: 32px 0; }
.sec.dark { background: var(--stage); color: #fff; }
.sec.dark .mute { color: #b5b7cc; }
.sec.paper { background: #fff; }
.h2 { font-family: var(--fd); font-weight: 400; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.3; margin: 0 0 6px; letter-spacing: .01em; }
.h2 .em { color: var(--red); }
.lead { margin: 0 0 24px; color: var(--muted); font-size: 15.5px; }
.sec.dark .lead { color: #b5b7cc; }
.kicker { display: inline-block; font-family: var(--fe); font-weight: 900; font-size: 12px; letter-spacing: .14em; color: var(--red); text-transform: uppercase; margin-bottom: 6px; }
.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sechead .lead { margin: 0; }
.more { font-weight: 900; font-size: 14px; color: var(--red); white-space: nowrap; }
.more::after { content: " →"; }

/* ===== hero ===== */
.hero { background: var(--stage); color: #fff; position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 24px; padding-top: 36px; padding-bottom: 44px; }
.hero h1 { font-family: var(--fd); font-weight: 400; font-size: clamp(34px, 5.6vw, 62px); line-height: 1.18; margin: 8px 0 16px; letter-spacing: .01em; }
.hero h1 .em { color: var(--red); }
.hero h1 .y { color: var(--mustard); }
.hero p { color: #c9cbe0; font-size: 16.5px; margin: 0 0 24px; }
.hero .art { border-radius: var(--r2); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); aspect-ratio: 3/2; background: var(--stage2); }
.hero .art img { width: 100%; height: 100%; object-fit: cover; }
.hero .stats { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.hero .stats b { display: block; font-family: var(--fd); font-weight: 400; font-size: 26px; color: #fff; line-height: 1.2; }
.hero .stats span { font-size: 12px; color: #a8abc2; font-weight: 700; }
.hero::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,75,62,.22), transparent 65%); left: -160px; top: -200px; pointer-events: none; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; padding-top: 22px; } .hero .art { order: -1; } }

/* ===== persona picker ===== */
.personas { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.persona { background: #fff; border: 2.5px solid var(--line); border-radius: var(--r); padding: 10px 8px 12px; text-align: center; transition: .15s; position: relative; }
.persona:hover { border-color: var(--ink); transform: translateY(-3px); }
.persona.on { border-color: var(--red); box-shadow: 0 0 0 4px var(--redsoft); }
.persona.on::after { content: "✓"; position: absolute; top: -10px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 900; font-size: 14px; display: grid; place-items: center; }
.persona img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--cream); }
.persona b { display: block; font-size: 14px; margin-top: 8px; line-height: 1.35; }
.persona small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
@media (max-width: 980px) { .personas { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .personas { grid-template-columns: repeat(3, 1fr); gap: 8px; } .persona small { display: none; } .persona b { font-size: 12.5px; } }

/* ===== big doors ===== */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.door { background: #fff; border-radius: var(--r2); overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 0 6px 0 var(--ink); transition: .15s; display: flex; flex-direction: column; }
.door:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--ink); }
.door .pic { aspect-ratio: 3/2; background: var(--cream); overflow: hidden; }
.door .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.door:hover .pic img { transform: scale(1.05); }
.door .tx { padding: 14px 18px 18px; }
.door .tx b { font-family: var(--fd); font-weight: 400; font-size: 21px; display: flex; align-items: center; gap: 8px; }
.door .tx p { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.door .num { margin-left: auto; font-family: var(--fe); font-weight: 900; font-size: 12px; background: var(--cream); padding: 2px 10px; border-radius: 99px; color: var(--ink); }
@media (max-width: 860px) { .doors { grid-template-columns: repeat(2, 1fr); gap: 12px; } .door .tx b { font-size: 17px; } .door .tx p { font-size: 12.5px; } .door .num { display: none; } }

/* ===== talk cards & rows ===== */
.row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
.row > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .row { grid-auto-columns: calc((100% - 64px) / 5); } }
@media (max-width: 560px) { .row { grid-auto-columns: 72%; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.tc { display: flex; flex-direction: column; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: .18s; position: relative; }
.tc:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(22,24,42,.4); }
.tc .th { position: relative; aspect-ratio: 16/9; background: var(--stage2); overflow: hidden; }
.tc .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tc:hover .th img { transform: scale(1.06); }
.tc .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(14,15,29,.85); color: #fff; font-family: var(--fe); font-weight: 700; font-size: 12px; padding: 1px 7px; border-radius: 6px; }
.tc .ser { position: absolute; left: 8px; top: 8px; }
.tc .done { position: absolute; right: 8px; top: 8px; background: var(--mint); color: #fff; font-weight: 900; font-size: 11.5px; padding: 2px 9px; border-radius: 99px; }
.tc .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: .2s; background: rgba(14,15,29,.25); }
.tc .play i { width: 54px; height: 54px; border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.tc .play i::after { content: ""; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.tc:hover .play { opacity: 1; }
.tc .bd { padding: 11px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tc .t { font-weight: 900; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc .c { font-size: 12.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tc .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; align-items: center; }
.tc .v { font-family: var(--fe); font-size: 12px; font-weight: 700; color: var(--muted); margin-left: auto; }
.rank { position: absolute; left: 8px; top: calc((100% - 0px) * 0); margin-top: 0; transform: translateY(-62%); top: auto; bottom: auto; font-family: var(--fd); font-size: 64px; color: #fff; -webkit-text-stroke: 3px var(--ink); line-height: 1; z-index: 2; text-shadow: 3px 3px 0 var(--ink); }
.sec.dark .tc { background: var(--stage2); color: #fff; box-shadow: none; }
.sec.dark .tc .c, .sec.dark .tc .v { color: #a8abc2; }

/* ===== today ===== */
.today { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; background: #fff; border-radius: var(--r2); overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.today .th { position: relative; background: var(--stage2); min-height: 260px; }
.today .th img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.today .th .play { position: absolute; inset: 0; display: grid; place-items: center; }
.today .th .play i { width: 84px; height: 84px; border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,75,62,.3); animation: pulse 2s infinite; }
.today .th .play i::after { content: ""; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 6px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 20px rgba(255,75,62,.08); } }
.today .tx { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.today .tx h3 { font-size: 23px; line-height: 1.4; margin: 0; font-weight: 900; }
.today .tx .en { color: var(--muted); font-size: 13.5px; margin: -4px 0 0; }
.today .steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0; }
.today .steps3 div { background: var(--cream); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; font-weight: 700; }
.today .steps3 div b { display: block; font-family: var(--fe); color: var(--red); font-size: 11px; letter-spacing: .1em; }
@media (max-width: 760px) { .today { grid-template-columns: 1fr; } .today .th { min-height: 0; aspect-ratio: 16/9; } .today .tx { padding: 18px; } .today .tx h3 { font-size: 19px; } }

/* ===== game cards ===== */
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gc { border-radius: var(--r2); overflow: hidden; background: var(--stage2); color: #fff; position: relative; transition: .18s; display: flex; flex-direction: column; border: 2px solid rgba(255,255,255,.08); }
.gc:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--red); }
.gc .pic { aspect-ratio: 3/2; overflow: hidden; }
.gc .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gc:hover .pic img { transform: scale(1.06); }
.gc .tx { padding: 14px 18px 18px; }
.gc .tx b { font-family: var(--fd); font-weight: 400; font-size: 20px; display: block; line-height: 1.35; }
.gc .tx p { margin: 4px 0 8px; font-size: 13.5px; color: #b9bbd0; line-height: 1.6; }
.gc .best { font-family: var(--fe); font-size: 12px; font-weight: 700; color: var(--mustard); }
.gc .lvl { position: absolute; top: 12px; left: 12px; background: var(--mustard); color: var(--ink); font-size: 11.5px; font-weight: 900; padding: 2px 10px; border-radius: 99px; }
@media (max-width: 860px) { .games { grid-template-columns: 1fr 1fr; gap: 12px; } .gc .tx b { font-size: 16px; } .gc .tx p { display: none; } }
@media (max-width: 420px) { .games { grid-template-columns: 1fr; } }

/* ===== panels / cards ===== */
.card { background: #fff; border-radius: var(--r); padding: 20px 22px; box-shadow: var(--sh); }
.card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .cards2, .cards3 { grid-template-columns: 1fr; } }
.why3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why3 .card { text-align: center; }
.why3 .ic { font-size: 34px; }
@media (max-width: 760px) { .why3 { grid-template-columns: 1fr; } }

/* ===== talk page ===== */
.tp-top { background: var(--stage); color: #fff; padding: 22px 0 30px; }
.tp-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: start; }
.player { position: relative; aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden; background: #000; box-shadow: 0 20px 50px -20px rgba(0,0,0,.7); }
.player iframe, .player .poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .poster { cursor: pointer; }
.player .poster img { width: 100%; height: 100%; object-fit: cover; }
.player .poster .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(transparent 40%, rgba(0,0,0,.55)); }
.player .poster .play i { width: 86px; height: 86px; border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,75,62,.3); }
.player .poster .play i::after { content: ""; border-left: 28px solid #fff; border-top: 17px solid transparent; border-bottom: 17px solid transparent; margin-left: 7px; }
.player .poster .note { position: absolute; left: 14px; bottom: 12px; right: 14px; font-size: 12.5px; color: #e6e7f2; font-weight: 700; }
.tp-info h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.4; margin: 8px 0 4px; font-weight: 900; }
.tp-info .en { color: #a8abc2; font-size: 14px; margin: 0 0 14px; }
.tp-info .catch { font-size: 17px; font-weight: 700; color: var(--mustard); margin: 0 0 14px; }
.tp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.tp-facts div { background: var(--stage2); border-radius: 14px; padding: 10px 12px; }
.tp-facts b { display: block; font-family: var(--fe); font-weight: 900; font-size: 18px; line-height: 1.2; }
.tp-facts span { font-size: 11.5px; color: #a8abc2; font-weight: 700; }
.tp-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tp-tools a, .tp-tools button { font-size: 13px; font-weight: 700; color: #d9dbea; border: 1.5px solid rgba(255,255,255,.2); padding: 6px 12px; border-radius: 99px; }
.tp-tools a:hover, .tp-tools button:hover { border-color: #fff; color: #fff; }
@media (max-width: 900px) { .tp-grid { grid-template-columns: 1fr; gap: 18px; } }

.mission { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: -22px auto 0; position: relative; z-index: 2; }
.ms { background: #fff; border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh); border: 2.5px solid transparent; text-align: left; display: flex; gap: 12px; align-items: center; transition: .15s; }
.ms:hover { border-color: var(--ink); }
.ms .n { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-family: var(--fe); font-weight: 900; font-size: 16px; }
.ms b { display: block; font-size: 14.5px; line-height: 1.35; }
.ms small { display: block; font-size: 12px; color: var(--muted); }
.ms.on { border-color: var(--red); }
.ms.ok .n { background: var(--mint); color: #fff; }
.ms.ok .n::after { content: "✓"; }
.ms.ok .n span { display: none; }
@media (max-width: 760px) { .mission { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: -18px; } .ms { padding: 10px 12px; } .ms small { display: none; } }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 2px; margin: 28px 0 0; scrollbar-width: none; position: sticky; top: var(--hdr); background: var(--cream); z-index: 10; padding-bottom: 10px; }
.tabs button { padding: 9px 16px; border-radius: 999px; font-weight: 900; font-size: 14.5px; background: #fff; border: 2px solid var(--line); white-space: nowrap; }
.tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pane { display: none; padding: 14px 0 10px; animation: fadein .25s; }
.pane.on { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }

.bubble { background: #fff; border-radius: var(--r); padding: 18px 20px; box-shadow: var(--sh); position: relative; margin-bottom: 14px; }
.hooksay { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: start; margin-bottom: 16px; }
.hooksay img { width: 76px; height: 76px; border-radius: 50%; background: #fff; object-fit: cover; border: 2.5px solid var(--ink); }
.hooksay .bubble { margin: 0; }
.hooksay .bubble::before { content: ""; position: absolute; left: -10px; top: 24px; border-right: 12px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.hooksay .who { font-size: 12px; font-weight: 900; color: var(--red); letter-spacing: .06em; }

.pts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 16px; }
.pts > div { background: #fff; border-radius: var(--r); padding: 16px; box-shadow: var(--sh); }
.pts b { display: flex; gap: 8px; align-items: center; font-size: 15px; line-height: 1.4; margin-bottom: 6px; }
.pts b i { font-style: normal; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-family: var(--fe); font-size: 13px; }
.pts p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.7; }
@media (max-width: 760px) { .pts { grid-template-columns: 1fr; } }

.qa { display: flex; flex-direction: column; gap: 10px; }
.q { background: #fff; border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.q .en { font-weight: 700; font-size: 16.5px; line-height: 1.5; }
.q .ja { font-size: 13px; color: var(--muted); }
.q .ja.blur { filter: blur(5px); cursor: pointer; user-select: none; }
.say { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: 0 0 40px; transition: .15s; }
.say:hover { background: var(--red); transform: scale(1.08); }
.say svg { width: 18px; height: 18px; }
.say.playing { background: var(--red); animation: pulse 1s infinite; }
.say.sm { width: 32px; height: 32px; flex-basis: 32px; }
.say.sm svg { width: 14px; height: 14px; }

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.flip { perspective: 900px; height: 132px; cursor: pointer; }
.flip .in { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.flip.on .in { transform: rotateY(180deg); }
.flip .f, .flip .b { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; text-align: center; box-shadow: var(--sh); }
.flip .f { background: #fff; border: 2.5px solid var(--ink); }
.flip .f b { font-family: var(--fe); font-weight: 900; font-size: 21px; line-height: 1.25; }
.flip .f small { font-size: 11px; color: var(--muted2); font-weight: 700; margin-top: 6px; }
.flip .b { background: var(--ink); color: #fff; transform: rotateY(180deg); }
.flip .b b { font-size: 18px; }
.flip .b small { color: #b9bbd0; font-size: 12px; margin-top: 4px; font-family: var(--fe); }
.flip .say { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; z-index: 2; }
.flip .say svg { width: 13px; height: 13px; }
.flip .save { position: absolute; top: 8px; left: 8px; font-size: 18px; z-index: 2; line-height: 1; color: var(--muted2); }
.flip .save.on { color: var(--red); }

.quiz { background: #fff; border-radius: var(--r2); padding: 22px; box-shadow: var(--sh); border: 2.5px solid var(--ink); }
.quiz .qn { font-family: var(--fe); font-weight: 900; color: var(--red); font-size: 13px; letter-spacing: .1em; }
.quiz .qq { font-size: 22px; font-weight: 900; margin: 4px 0 14px; font-family: var(--fe); }
.quiz .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz .opts button { padding: 14px; border-radius: 14px; border: 2.5px solid var(--line); background: var(--cream); font-weight: 700; text-align: left; transition: .12s; }
.quiz .opts button:hover { border-color: var(--ink); }
.quiz .opts button.ok { background: var(--mint); color: #fff; border-color: var(--mint); }
.quiz .opts button.ng { background: var(--red); color: #fff; border-color: var(--red); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-width: 560px) { .quiz .opts { grid-template-columns: 1fr; } }

.writebox textarea { width: 100%; min-height: 110px; border-radius: 14px; border: 2.5px solid var(--line); padding: 12px 14px; font-family: var(--fe); font-size: 16px; resize: vertical; background: #fff; }
.writebox textarea:focus { outline: none; border-color: var(--ink); }
.counter { font-size: 12.5px; color: var(--muted); font-weight: 700; }

details.acc { background: #fff; border-radius: var(--r); box-shadow: var(--sh); margin-bottom: 10px; overflow: hidden; }
details.acc summary { padding: 15px 18px; font-weight: 900; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; margin-left: auto; font-family: var(--fe); font-size: 22px; color: var(--red); transition: .2s; line-height: 1; }
details.acc[open] summary::after { transform: rotate(45deg); }
details.acc .in { padding: 0 18px 16px; font-size: 14.5px; }
details.acc .in p { margin: 0 0 10px; }
.beats { counter-reset: b; display: flex; flex-direction: column; gap: 8px; }
.beats div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; }
.beats b { background: var(--cream); border-radius: 10px; text-align: center; font-size: 13px; padding: 4px; }

/* ===== library ===== */
.lib-top { background: var(--stage); color: #fff; padding: 28px 0 26px; }
.search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 6px 6px 6px 20px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); max-width: 720px; }
.search input { border: 0; outline: none; flex: 1; font-size: 16.5px; padding: 8px 0; min-width: 0; color: var(--text); background: transparent; }
.search svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 20px; }
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; scrollbar-width: none; }
.filters .lab { font-size: 12px; font-weight: 900; color: #a8abc2; align-self: center; white-space: nowrap; padding-left: 6px; }
.lib-top .chip { background: var(--stage2); color: #d9dbea; border-color: transparent; }
.lib-top .chip.on { background: var(--red); color: #fff; }
.th-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.th-strip a { flex: 0 0 150px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sh); font-weight: 900; font-size: 13px; text-align: center; transition: .15s; }
.th-strip a:hover { transform: translateY(-3px); }
.th-strip a img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.th-strip a span { display: block; padding: 7px 6px; line-height: 1.35; }
.empty { text-align: center; padding: 40px 0; }
.empty img { width: 160px; margin: 0 auto 10px; border-radius: 50%; }

/* ===== theme / exam ===== */
.rank-list { display: flex; flex-direction: column; gap: 12px; }
.rk { display: grid; grid-template-columns: 64px 140px 1fr auto; gap: 16px; align-items: center; background: #fff; border-radius: var(--r); padding: 12px 18px 12px 12px; box-shadow: var(--sh); transition: .15s; }
.rk:hover { transform: translateX(4px); box-shadow: -4px 0 0 var(--red), var(--sh); }
.rk .no { font-family: var(--fd); font-size: 34px; text-align: center; line-height: 1; }
.rk:nth-child(1) .no { color: #e2a200; } .rk:nth-child(2) .no { color: #8d95a8; } .rk:nth-child(3) .no { color: #c0703a; }
.rk img { border-radius: 12px; aspect-ratio: 3/2; object-fit: cover; }
.rk b { font-size: 17px; display: block; line-height: 1.4; }
.rk p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.stars { color: var(--red); font-size: 15px; letter-spacing: 1px; white-space: nowrap; }
.stars small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0; text-align: right; font-weight: 700; }
@media (max-width: 760px) { .rk { grid-template-columns: 42px 96px 1fr; gap: 10px; padding: 10px; } .rk .no { font-size: 24px; } .rk .stars { grid-column: 3; } .rk p { display: none; } .rk b { font-size: 15px; } }

.th-hero { background: var(--stage); color: #fff; }
.th-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding-top: 30px; padding-bottom: 34px; align-items: center; }
.th-hero img { border-radius: var(--r2); aspect-ratio: 3/2; object-fit: cover; }
.th-hero h1 { font-family: var(--fd); font-weight: 400; font-size: clamp(26px, 4vw, 40px); line-height: 1.3; margin: 6px 0 10px; }
.th-hero ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.th-hero li { background: var(--stage2); border-radius: 12px; padding: 8px 14px; font-weight: 700; font-size: 14.5px; }
.th-hero li::before { content: "✔ "; color: var(--mint); }
@media (max-width: 860px) { .th-hero .wrap { grid-template-columns: 1fr; } .th-hero img { order: -1; } }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); margin-bottom: 12px; }
.vs > div { padding: 14px 16px; font-size: 14px; line-height: 1.7; }
.vs .pro { background: var(--mintsoft); }
.vs .con { background: var(--redsoft); }
.vs .lab { font-weight: 900; font-size: 12px; letter-spacing: .08em; }
.vs h4 { grid-column: 1 / -1; margin: 0; padding: 12px 16px; background: #fff; font-size: 16px; }
@media (max-width: 560px) { .vs { grid-template-columns: 1fr; } }
.phr { display: flex; flex-direction: column; gap: 8px; }
.phr div { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; background: #fff; padding: 10px 14px; border-radius: 14px; box-shadow: var(--sh); }
.phr .en { font-weight: 700; }
.phr small { display: block; color: var(--muted); font-size: 12.5px; }
.vtable { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); font-size: 14px; }
.vtable td, .vtable th { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vtable th { background: var(--ink); color: #fff; font-size: 12.5px; }
.vtable .w { font-family: var(--fe); font-weight: 900; font-size: 15.5px; white-space: nowrap; }
.vtable .ex { color: var(--muted); font-size: 13px; }
.vtable .ex i { font-family: var(--fe); font-style: normal; color: var(--text); display: block; }

/* ===== reading ===== */
.reader { background: #fff; border-radius: var(--r2); padding: clamp(20px, 4vw, 44px); box-shadow: var(--sh); font-family: var(--fe); font-size: 18.5px; line-height: 1.95; }
.reader p { margin: 0 0 1.1em; }
.reader .gw { background: linear-gradient(transparent 62%, var(--mustardsoft) 62%); cursor: pointer; border-radius: 2px; }
.reader .gw:hover { background: var(--mustard); }
.reader.big { font-size: 21px; }
.rd-bar { position: sticky; top: var(--hdr); z-index: 10; background: var(--cream); padding: 10px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rd-timer { font-family: var(--fe); font-weight: 900; font-size: 20px; background: var(--ink); color: #fff; border-radius: 999px; padding: 4px 16px; min-width: 96px; text-align: center; }
.pop { position: fixed; z-index: 90; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-width: 260px; pointer-events: none; animation: fadein .15s; }
.pop b { font-family: var(--fe); font-size: 16px; display: block; }
.rd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.rd { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; display: flex; flex-direction: column; transition: .15s; }
.rd:hover { transform: translateY(-3px); }
.rd img { aspect-ratio: 3/1.4; object-fit: cover; }
.rd .tx { padding: 12px 16px 16px; }
.rd b { font-family: var(--fe); font-size: 17px; display: block; line-height: 1.35; }
.rd .ja { font-size: 13px; color: var(--muted); }
.rd .meta { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.meter { background: var(--stage); color: #fff; border-radius: var(--r2); padding: 22px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
.meter b { display: block; font-family: var(--fd); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--mustard); }
.meter span { font-size: 12px; color: #b5b7cc; font-weight: 700; }
@media (max-width: 640px) { .meter { grid-template-columns: 1fr 1fr; } }

/* ===== road (sugoroku) ===== */
.road { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; position: relative; }
.stop { aspect-ratio: 1; border-radius: 22px; background: #fff; box-shadow: var(--sh); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 3px solid transparent; transition: .15s; }
.stop:hover { transform: scale(1.04); border-color: var(--ink); }
.stop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.stop .d { position: relative; z-index: 1; background: linear-gradient(transparent, rgba(14,15,29,.88)); color: #fff; padding: 22px 8px 7px; font-size: 11.5px; font-weight: 700; line-height: 1.35; }
.stop .d b { font-family: var(--fe); font-size: 15px; display: block; color: var(--mustard); }
.stop.ok::after { content: "CLEAR"; position: absolute; top: 10px; right: -24px; transform: rotate(35deg); background: var(--mint); color: #fff; font-family: var(--fe); font-weight: 900; font-size: 11px; padding: 2px 28px; z-index: 2; }
.stop.next { border-color: var(--red); box-shadow: 0 0 0 5px var(--redsoft); animation: bob 1.6s infinite; }
.stop.goal { background: var(--mustard); align-items: center; justify-content: center; font-family: var(--fd); font-size: 18px; text-align: center; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@media (max-width: 760px) { .road { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* ===== me ===== */
.me-top { background: var(--stage); color: #fff; padding: 30px 0; }
.me-card { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; }
.me-card img { width: 120px; height: 120px; border-radius: 50%; background: #fff; border: 4px solid var(--mustard); object-fit: cover; }
.me-card h1 { margin: 0; font-family: var(--fd); font-weight: 400; font-size: 28px; }
.lvbar { height: 14px; background: var(--stage2); border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
.lvbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--mustard)); border-radius: 99px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.bdg { background: #fff; border-radius: var(--r); padding: 14px 10px; text-align: center; box-shadow: var(--sh); }
.bdg .i { font-size: 34px; line-height: 1.2; }
.bdg b { display: block; font-size: 13px; line-height: 1.4; margin-top: 4px; }
.bdg small { display: block; font-size: 11px; color: var(--muted); line-height: 1.4; }
.bdg.off { opacity: .45; filter: grayscale(1); }
.heat { display: grid; grid-template-columns: repeat(auto-fill, 15px); gap: 4px; }
.heat i { width: 15px; height: 15px; border-radius: 4px; background: #eadfcd; }
.heat i.l1 { background: #ffc9c3; } .heat i.l2 { background: #ff8a7f; } .heat i.l3 { background: var(--red); }

/* ===== links ===== */
.lk { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; background: #fff; border-radius: var(--r); padding: 14px 18px; box-shadow: var(--sh); transition: .15s; }
.lk:hover { transform: translateX(4px); }
.lk .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: var(--cream); }
.lk b { display: block; font-size: 16px; }
.lk p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.lk .go { font-weight: 900; color: var(--red); font-size: 13px; white-space: nowrap; }
.lks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .lks { grid-template-columns: 1fr; } .lk .go { display: none; } .lk { grid-template-columns: 44px 1fr; } .lk .ic { width: 44px; height: 44px; } }

/* ===== start (診断) ===== */
.quizbox { max-width: 720px; margin: 0 auto; background: #fff; border-radius: var(--r2); padding: 28px; box-shadow: var(--sh); border: 2.5px solid var(--ink); }
.quizbox .prog { height: 8px; background: var(--cream); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.quizbox .prog i { display: block; height: 100%; background: var(--red); transition: width .3s; }
.quizbox h2 { font-size: 22px; margin: 0 0 16px; line-height: 1.45; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choices button { padding: 16px 14px; border-radius: 16px; border: 2.5px solid var(--line); background: var(--cream); font-weight: 900; text-align: left; display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 1.4; transition: .12s; }
.choices button:hover { border-color: var(--ink); transform: translateY(-2px); }
.choices button span { font-size: 26px; }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } }

/* ===== 小さなアイコン（Codex の ic-*.webp。絵文字の代わり） ===== */
.ico { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.3em; object-fit: contain; }
.ico-t { margin-right: .3em; }
.choices button span { flex: 0 0 auto; line-height: 0; }
.choices .ico { width: 48px; height: 48px; }
.why3 .ic { line-height: 0; }
.why3 .ico-why { width: 76px; height: 76px; }
.lk .ic:has(.ico) { background: none; }
.lk .ico-lk { width: 100%; height: 100%; }
.bdg .i { line-height: 0; padding: 2px 0; }
.bdg .ico-bdg { width: 60px; height: 60px; }
.modal .box .ico-bdg { width: 84px; height: 84px; margin: 0 auto; border-radius: 0; }
.th-strip a .ico, .rk .ico { display: inline-block; width: 1.3em; height: 1.3em; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
@media (max-width: 560px) { .choices .ico { width: 42px; height: 42px; } .bdg .ico-bdg { width: 52px; height: 52px; } }

/* ===== toast / modal ===== */
.toasts { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 900; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: toast 2.6s forwards; white-space: nowrap; }
.toast.xp { background: var(--mustard); color: var(--ink); }
@keyframes toast { 0% { opacity: 0; transform: translateY(16px) scale(.9); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.modal { position: fixed; inset: 0; z-index: 120; background: rgba(14,15,29,.7); display: grid; place-items: center; padding: 16px; animation: fadein .2s; }
.modal .box { background: #fff; border-radius: var(--r2); padding: 26px 24px; max-width: 440px; width: 100%; text-align: center; border: 3px solid var(--ink); box-shadow: 0 10px 0 var(--ink); position: relative; max-height: 92vh; overflow: auto; }
.modal .box img { width: 150px; height: 150px; margin: -10px auto 6px; border-radius: 50%; object-fit: cover; }
.modal .box h3 { font-family: var(--fd); font-weight: 400; font-size: 26px; margin: 0 0 4px; }
.modal .big { font-family: var(--fd); font-size: 54px; color: var(--red); line-height: 1.1; }
.modal .x { position: absolute; top: 10px; right: 14px; font-size: 26px; color: var(--muted); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 130; }

/* ===== footer ===== */
.ftr { background: var(--stage); color: #b5b7cc; padding: 40px 0 30px; font-size: 13px; margin-top: 40px; }
.ftr .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
.ftr b { color: #fff; display: block; margin-bottom: 8px; font-size: 14px; }
.ftr a { display: block; padding: 3px 0; color: #c9cbe0; }
.ftr a:hover { color: #fff; }
.ftr .note { border-top: 1px solid rgba(255,255,255,.1); margin-top: 26px; padding-top: 18px; font-size: 12px; line-height: 1.8; }
@media (max-width: 760px) { .ftr .cols { grid-template-columns: 1fr 1fr; } }

.crumbs { font-size: 12.5px; color: #a8abc2; margin-bottom: 8px; }
.crumbs a:hover { color: #fff; }
.pagehead { background: var(--stage); color: #fff; padding: 30px 0 34px; position: relative; overflow: hidden; }
.pagehead h1 { font-family: var(--fd); font-weight: 400; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.25; margin: 4px 0 8px; }
.pagehead p { color: #c9cbe0; margin: 0; max-width: 720px; }
/* ヘッダー右の丸いイラスト：下にくっつかないよう、縦の真ん中に正円で置く */
.pagehead .side { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); height: min(180px, calc(100% - 36px)); width: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; opacity: .95; box-shadow: 0 0 0 6px rgba(255,255,255,.06); }
@media (min-width: 761px) { .pagehead:has(.side) .wrap { padding-right: calc(4% + 220px); } }
@media (max-width: 760px) { .pagehead .side { display: none; } }

/* ===== game shell ===== */
.g-wrap { background: var(--stage); color: #fff; min-height: calc(100vh - var(--hdr)); padding: 18px 0 40px; }
.g-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.g-head h1 { font-family: var(--fd); font-weight: 400; font-size: 24px; margin: 0; }
.g-head .best { margin-left: auto; font-family: var(--fe); font-weight: 900; color: var(--mustard); font-size: 14px; }
.g-stage { background: var(--stage2); border-radius: var(--r2); overflow: hidden; position: relative; min-height: 520px; border: 2px solid rgba(255,255,255,.08); }
.g-setup { padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.g-setup img { border-radius: var(--r); width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.g-setup h2 { font-family: var(--fd); font-weight: 400; font-size: 30px; margin: 0 0 8px; line-height: 1.3; }
.g-setup p { color: #c9cbe0; margin: 0 0 16px; }
.g-setup .how { background: rgba(255,255,255,.06); border-radius: 14px; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; color: #d9dbea; }
.g-setup .how b { color: var(--mustard); }
.g-opt { margin-bottom: 14px; }
.g-opt .lab { font-size: 12px; font-weight: 900; color: #a8abc2; letter-spacing: .08em; margin-bottom: 6px; display: block; }
.g-opt .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g-opt .chip { background: rgba(255,255,255,.07); color: #e6e7f2; border-color: transparent; font-size: 13.5px; padding: 6px 12px; }
.g-opt .chip.on { background: var(--red); color: #fff; }
.g-opt select { background: rgba(255,255,255,.07); color: #fff; border: 2px solid rgba(255,255,255,.15); border-radius: 12px; padding: 8px 12px; width: 100%; }
.g-opt select option { color: var(--ink); }
@media (max-width: 760px) { .g-setup { grid-template-columns: 1fr; padding: 18px; gap: 14px; } .g-setup h2 { font-size: 24px; } .g-stage { min-height: 460px; } }
.hud { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: rgba(0,0,0,.25); font-family: var(--fe); font-weight: 900; font-size: 15px; flex-wrap: wrap; }
.hud .sc { color: var(--mustard); font-size: 20px; }
.hud .hp { color: var(--red); letter-spacing: 2px; }
.hud .cb { color: var(--mint); }
.hud .tm { margin-left: auto; }
.hud .tbar { flex: 1 1 100%; height: 6px; background: rgba(255,255,255,.12); border-radius: 9px; overflow: hidden; }
.hud .tbar i { display: block; height: 100%; background: var(--mint); transition: width .1s linear; }

/* ===== print worksheet ===== */
.ws { display: none; }
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  body { background: #fff; padding: 0; font-size: 11pt; }
  body.printing > *:not(.ws-print) { display: none !important; }
  body.printing .ws-print { display: block !important; }
  .ws-print .ws { display: block !important; }
}
.ws-print { display: none; }
.ws { font-family: var(--f); color: #000; }
.ws h1 { font-size: 17pt; margin: 0 0 2mm; border-bottom: 2.5pt solid #000; padding-bottom: 2mm; display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; }
.ws h1 small { font-size: 9pt; font-weight: 700; white-space: nowrap; }
.ws h2 { font-size: 12pt; margin: 5mm 0 2mm; background: #000; color: #fff; padding: 1mm 3mm; display: inline-block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ws .sub { font-size: 9.5pt; margin: 0 0 3mm; }
.ws table { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
.ws td, .ws th { border: .8pt solid #000; padding: 1.6mm 2.4mm; vertical-align: top; }
.ws th { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ws .line { border-bottom: .8pt solid #000; height: 8.5mm; }
.ws .box { border: .8pt solid #000; min-height: 24mm; padding: 2mm; }
.ws .q { display: block; margin: 0 0 1mm; padding: 0; box-shadow: none; font-weight: 700; }
.ws .two { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.ws .foot { margin-top: 5mm; font-size: 8pt; color: #333; border-top: .5pt solid #999; padding-top: 2mm; }
.ws .pb { page-break-before: always; }
.ws .name { display: flex; gap: 8mm; font-size: 10pt; margin: 2mm 0 3mm; }
.ws .name span { border-bottom: .8pt solid #000; flex: 1; }
.ws .passage { font-family: var(--fe); font-size: 11pt; line-height: 1.75; }
.ws .passage p { margin: 0 0 2.5mm; text-indent: 1.2em; }
.ws .check { font-size: 10.5pt; }
.ws .check li { margin-bottom: 1.5mm; }

.wsl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.wsc { background: #fff; border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh); display: flex; flex-direction: column; gap: 6px; }
.wsc b { font-size: 15.5px; line-height: 1.45; }
.wsc p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.wsc .btns { margin-top: auto; padding-top: 6px; }
.paper-mock { background: #fff; border-radius: 6px; box-shadow: 0 1px 0 #ddd, 0 16px 40px -18px rgba(0,0,0,.35); padding: 18px 20px; font-size: 12px; transform: rotate(-1.5deg); }
.paper-mock .l { height: 8px; background: #eee; border-radius: 4px; margin: 6px 0; }

/* fixes */
.tc .th .rank { position: absolute; left: 8px; bottom: -6px; top: auto; transform: none; font-size: 58px; }
.ftr a.logo { display: flex; color: #fff; }
.ftr .logo b { display: inline; margin: 0; color: var(--red); font-size: inherit; }
.hero h1 { font-size: clamp(32px, 4.8vw, 56px); }

/* AI添削プロンプト（aicoach.js） */
.aic { border: 2.5px solid var(--ink); }
.aic-top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.aic-top img { width: 56px; height: 56px; border-radius: 50%; flex: none; background: var(--cream); }
.aic-top h3 { margin: 2px 0 4px; }
.aic-top p { margin: 0; font-size: 14px; }
.aic-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.aic-lb { font-weight: 900; font-size: 13px; min-width: 6.5em; }
.aic-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.aic-seg button { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-weight: 700; font-size: 13.5px; }
.aic-seg button:hover { border-color: var(--ink); }
.aic-seg button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.aic-desc { margin: 2px 0 8px; font-size: 13px; }
.aic-cmp { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin: 6px 0; cursor: pointer; }
.aic-cmp.hide { display: none; }
.aic-status { font-size: 13.5px; font-weight: 700; padding: 8px 12px; border-radius: 10px; margin: 8px 0 6px; }
.aic-status.ok { background: var(--mintsoft); color: #0d6b5d; }
.aic-status.ng { background: var(--mustardsoft); color: #7a5600; }
.aic-pv { margin: 0; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--cream); border: 2px dashed var(--line); border-radius: 12px; padding: 12px 14px; font-family: var(--f); font-size: 12.5px; line-height: 1.6; color: var(--text); }
.aic-pv mark { background: var(--mustard); color: var(--ink); border-radius: 4px; padding: 0 2px; }
.aic-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.aic-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.7; }
@media (max-width: 560px) { .aic-lb { min-width: 0; width: 100%; } .aic-btns .btn.red { width: 100%; } }

/* ===== ワークシート（PDF）カード ===== */
.sheetcard { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center; background: #fff; border-radius: var(--r2); padding: 22px; box-shadow: var(--sh); }
.sheetcard .prev { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 #ddd, 0 18px 40px -16px rgba(0,0,0,.45); transform: rotate(-2deg); transition: transform .2s; background: #fff; aspect-ratio: 210/297; }
.sheetcard .prev:hover { transform: rotate(0) scale(1.02); }
.sheetcard .prev img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sheetcard h3 { margin: 4px 0 8px; font-size: 20px; }
.sheetcard p { margin: 0 0 12px; }
@media (max-width: 640px) { .sheetcard { grid-template-columns: 1fr; padding: 18px; } .sheetcard .prev { max-width: 240px; margin: 0 auto; } }
.feat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feat3 > div { background: var(--stage); color: #fff; border-radius: var(--r); padding: 18px 20px; }
.feat3 b { font-family: var(--fd); font-weight: 400; font-size: 19px; color: var(--mustard); display: block; margin-bottom: 4px; }
.feat3 p { margin: 0; font-size: 13.5px; color: #c9cbe0; line-height: 1.7; }
@media (max-width: 760px) { .feat3 { grid-template-columns: 1fr; } }
.wsl2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.wsc2 { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; display: flex; flex-direction: column; }
.wsc2 .shot { display: block; background: #e9e3d8; padding: 14px 14px 0; aspect-ratio: 210/200; overflow: hidden; }
.wsc2 .shot img { width: 100%; border-radius: 3px 3px 0 0; box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); transition: transform .2s; background: #fff; }
.wsc2:hover .shot img { transform: translateY(-4px); }
.wsc2 .tx { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.wsc2 .tx b { font-size: 14.5px; line-height: 1.45; }
.wsc2 .tx p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.wsc2 .btns { margin-top: auto; padding-top: 8px; }
.wsearch { background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: 14px; margin-bottom: 18px; }
.wsearch input { width: 100%; border: 2px solid var(--ink); border-radius: 999px; padding: 11px 18px; font-size: 16px; outline: none; }
.wsearch input:focus { border-color: var(--red); }
.wsres:not(:empty) { margin-top: 12px; max-height: 520px; overflow: auto; }
.wsres .wr { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wsres .wr img { width: 96px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.wsres .wr b { display: block; font-size: 14px; line-height: 1.4; }
.wsres .wr small { color: var(--muted); font-size: 12px; }
@media (max-width: 560px) { .wsres .wr { grid-template-columns: 72px 1fr; } .wsres .wr img { width: 72px; } .wsres .wr .btn { grid-column: span 1; } }

/* ===== 原田英語の姉妹サイト ===== */
.sis-h { font-size: 15px; font-weight: 900; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.sis-h::before { content: ""; width: 6px; height: 18px; border-radius: 3px; background: var(--red); }
.sis-h:first-of-type { margin-top: 4px; }
.sis-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.sis { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--sh); border: 2px solid transparent; transition: .15s; min-width: 0; }
.sis:hover { border-color: var(--ink); transform: translateY(-2px); }
.sis .e { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: var(--cream); display: grid; place-items: center; font-size: 22px; line-height: 1; }
.sis .t { min-width: 0; }
.sis b { display: block; font-size: 14.5px; line-height: 1.4; }
.sis small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 560px) { .sis-g { grid-template-columns: 1fr; gap: 8px; } .sis { padding: 10px 12px; } }

.dw-sis { margin-top: 22px; }
.dw-sis > b { display: block; font-family: var(--fe); font-size: 11.5px; letter-spacing: .14em; color: #8d90a8; margin: 0 4px 8px; }
.dw-sis-g { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dw-sis-g a { display: flex; align-items: center; gap: 6px; padding: 10px 10px; border-radius: 12px; background: var(--stage2); font-size: 13px; font-weight: 700; line-height: 1.35; color: #e6e7f2; }
.dw-sis-g a span { flex: none; font-size: 16px; }
.dw-sis-g a:hover { background: #26294a; color: #fff; }
.dw-all { display: block; text-align: center; margin-top: 10px; padding: 11px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.25); font-weight: 900; font-size: 14px; color: #fff; }
.dw-all:hover { border-color: #fff; }

.ftr-sis { border-top: 1px solid rgba(255,255,255,.1); margin-top: 26px; padding-top: 20px; }
.ftr-sis-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; }
.ftr-sis-g span { display: block; font-size: 12px; font-weight: 900; color: var(--mustard); margin-bottom: 4px; }
.ftr-sis-g a { padding: 2px 0; font-size: 12.5px; }
@media (max-width: 760px) { .ftr-sis-g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .ftr-sis-g { grid-template-columns: 1fr 1fr; gap: 14px 14px; } }
[id] { scroll-margin-top: calc(var(--hdr) + 8px); }
/* スマホ：ホーキーの吹き出しがはみ出さないように */
.hooksay { grid-template-columns: 76px minmax(0, 1fr); }
.hooksay .bubble .more { white-space: normal; }
@media (max-width: 560px) { .hooksay { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; } .hooksay img { width: 56px; height: 56px; } .hooksay .bubble { padding: 14px 16px; } }
@media (max-width: 560px) { .more { white-space: normal; } }

/* ===== ホーム：イチオシ帯 ===== */
.hot5 { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.hot { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; background: #fff; border-radius: var(--r); padding: 12px; box-shadow: var(--sh); transition: transform .15s; }
.hot:hover { transform: translateY(-3px); }
.hot img { width: 96px; aspect-ratio: 3/2; object-fit: cover; border-radius: 12px; }
.hot b { display: block; font-size: 15.5px; line-height: 1.35; }
.hot p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.hot.big { grid-row: span 2; grid-template-columns: 1fr; background: var(--stage); color: #fff; padding: 0; overflow: hidden; align-content: start; }
.hot.big img { width: 100%; aspect-ratio: 16/9; border-radius: 0; }
.hot.big > div { padding: 14px 18px 18px; }
.hot.big b { font-family: var(--fd); font-weight: 400; font-size: 24px; color: #fff; margin: 4px 0 4px; }
.hot.big p { color: #c9cbe0; font-size: 14px; }
.hot.big .go { display: inline-block; margin-top: 10px; background: var(--red); color: #fff; font-weight: 900; padding: 8px 18px; border-radius: 999px; font-size: 14px; }
.badge-new { display: inline-block; background: var(--mustard); color: var(--ink); font-family: var(--fe); font-weight: 900; font-size: 11px; letter-spacing: .12em; padding: 2px 9px; border-radius: 999px; }
@media (max-width: 860px) { .hot5 { grid-template-columns: 1fr 1fr; } .hot.big { grid-column: span 2; grid-row: auto; } }
@media (max-width: 560px) { .hot5 { grid-template-columns: 1fr; } .hot.big { grid-column: auto; } .hot { grid-template-columns: 84px 1fr; } .hot img { width: 84px; } }

/* ===== 特集 ===== */
.coltiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.coltiles.row-x { grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.coltile { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: transform .15s; scroll-snap-align: start; }
.coltile:hover { transform: translateY(-4px); }
.coltile .pic { display: grid; grid-template-columns: 1fr 1fr; position: relative; background: var(--stage); }
.coltile .pic img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.coltile .pic .em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font-size: 26px; box-shadow: 0 0 0 5px rgba(255,255,255,.9); }
.coltile .tx { padding: 12px 14px 14px; }
.coltile .tx b { display: block; font-size: 15px; line-height: 1.4; }
.coltile .tx span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.colbar { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fff; border-radius: var(--r); padding: 14px 18px; box-shadow: var(--sh); margin-bottom: 18px; }
.colbar .prog { font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.colbar .prog b { font-family: var(--fe); font-weight: 900; font-size: 24px; color: var(--red); }
.colbar .pb { width: 160px; height: 10px; background: var(--cream); border-radius: 99px; overflow: hidden; display: inline-block; }
.colbar .pb i { display: block; height: 100%; width: 0; background: var(--mint); border-radius: 99px; }
.collist .cl { position: relative; }
.collist .cl .no { position: absolute; z-index: 3; left: -6px; top: -8px; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--fe); font-weight: 900; display: grid; place-items: center; font-size: 14px; box-shadow: 0 0 0 3px var(--cream); }
.collist .cl.done .no { background: var(--mint); }
.collist .cl.done .tc { opacity: .72; }

/* ===== 数字で見るTED ===== */
.bignums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bignums > div { background: var(--stage); color: #fff; border-radius: var(--r); padding: 18px 20px; }
.bignums b { display: block; font-family: var(--fd); font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; color: var(--mustard); }
.bignums b small { font-size: .45em; margin-left: 3px; color: #fff; }
.bignums span { font-size: 13px; color: #c9cbe0; font-weight: 700; }
@media (max-width: 760px) { .bignums { grid-template-columns: 1fr 1fr; } }
.chap { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin-bottom: 18px; }
.chap .no { font-family: var(--fd); font-size: 52px; line-height: 1; color: var(--red); }
.chap .lead { margin-top: 4px; }
.hl { background: linear-gradient(transparent 55%, var(--mustard) 55%); padding: 0 2px; }
.sbars { display: grid; gap: 10px; background: #fff; border-radius: var(--r); padding: 18px 20px; box-shadow: var(--sh); }
.sbar { display: grid; grid-template-columns: 150px 1fr 150px; gap: 12px; align-items: center; font-weight: 700; font-size: 14px; }
.sbar .b { height: 26px; background: var(--cream); border-radius: 8px; overflow: hidden; }
.sbar .b i { display: block; height: 100%; background: var(--ink); border-radius: 8px; animation: sgrow 1s ease-out both; transform-origin: left; }
.sbar.hot .b i { background: var(--red); }
.sbar .v { font-family: var(--fe); font-weight: 900; }
.sbar .v small { font-weight: 700; color: var(--muted); font-size: 11.5px; margin-left: 4px; }
@keyframes sgrow { from { transform: scaleX(0); } }
@media (max-width: 640px) { .sbar { grid-template-columns: 1fr 104px; } .sbar .b { grid-column: 1 / -1; grid-row: 2; height: 18px; } .sbar .l { font-size: 13px; } }
.hk-note { display: flex; gap: 14px; align-items: center; margin-top: 16px; background: var(--mustardsoft); border-radius: var(--r); padding: 12px 16px; }
.hk-note img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.hk-note p { margin: 0; font-size: 14.5px; }
.vs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs2 > div { background: #fff; border-radius: var(--r); padding: 20px 22px; box-shadow: var(--sh); position: relative; }
.vs2 > div.win { box-shadow: 0 0 0 3px var(--red), var(--sh); }
.vs2 > div.win::after { content: "WIN"; position: absolute; right: 16px; top: 14px; font-family: var(--fe); font-weight: 900; color: #fff; background: var(--red); padding: 2px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .1em; }
.vs2 b { display: block; font-family: var(--fd); font-weight: 400; font-size: 40px; margin-top: 8px; line-height: 1.1; }
.vs2 b small { font-size: 16px; }
.vs2 > div > span:not(.tag) { font-size: 13px; color: var(--muted); font-weight: 700; }
.vs2 ul { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.vs2 li { display: flex; justify-content: space-between; border-top: 1px dashed var(--line); padding: 6px 0; }
@media (max-width: 560px) { .vs2 { grid-template-columns: 1fr; } }
.card.law .big { font-family: var(--fd); font-weight: 400; font-size: 38px; color: var(--red); line-height: 1.1; }
.card.law h3 { margin: 6px 0; }
.card.law p { margin: 0; font-size: 14px; }
.wrank { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.wrank > div { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; background: #fff; border-radius: 12px; padding: 8px 12px; box-shadow: var(--sh); align-items: center; }
.wrank .r { grid-row: span 2; font-family: var(--fe); font-weight: 900; color: var(--red); font-size: 18px; }
.wrank b { font-size: 16px; }
.wrank .j { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.wrank .n { grid-row: 1 / span 2; grid-column: 3; font-family: var(--fe); font-weight: 800; font-size: 13px; background: var(--cream); padding: 2px 8px; border-radius: 99px; }
.ybars { display: flex; gap: 6px; align-items: flex-end; height: 220px; background: #fff; border-radius: var(--r); padding: 20px 16px 30px; box-shadow: var(--sh); overflow-x: auto; }
.ybars > div { flex: 1; min-width: 22px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.ybars i { display: block; width: 100%; background: var(--sky); border-radius: 6px 6px 0 0; animation: ygrow 1s ease-out both; transform-origin: bottom; }
.ybars b { font-family: var(--fe); font-size: 11px; order: -1; margin-bottom: 2px; }
.ybars span { position: absolute; bottom: -22px; font-family: var(--fe); font-size: 11px; color: var(--muted); font-weight: 700; }
@keyframes ygrow { from { transform: scaleY(0); } }
.spk { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-bottom: 8px; }
.spk > div { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--sh); }
.spk .r { font-family: var(--fe); font-weight: 900; color: var(--red); }
.spk b { flex: 1; }
.spk span:last-child { font-weight: 800; font-size: 13px; }

/* ===== 英単語図鑑 ===== */
.wtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.wtiles a { background: #fff; border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh); display: flex; flex-direction: column; gap: 2px; transition: transform .15s; }
.wtiles a:hover { transform: translateY(-3px); }
.wtiles .e { font-size: 28px; }
.wtiles b { font-size: 14.5px; line-height: 1.4; }
.wtiles span:last-child { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.wi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: var(--sh); }
.wi .tx { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.wi .tx b { font-size: 17px; }
.wi .pos { color: var(--muted); font-weight: 700; }
.wi .ja { width: 100%; font-weight: 700; font-size: 14.5px; }
.wi .ex { width: 100%; font-size: 12.5px; color: var(--muted); line-height: 1.55; border-top: 1px dashed var(--line); padding-top: 4px; margin-top: 2px; }
.wi .ex i { display: block; color: var(--text); font-family: var(--fe); font-style: normal; }
.wi .save { width: 34px; height: 34px; border-radius: 50%; background: var(--cream); color: #d4c9b5; font-size: 16px; }
.wi .save.on { background: var(--redsoft); color: var(--red); }
.wdres .wlist { max-height: 640px; overflow: auto; padding: 4px; }
@media (max-width: 420px) { .wlist { grid-template-columns: 1fr; } }

/* ===== 今日のチャレンジ ===== */
.dl-top { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: var(--stage); color: #fff; border-radius: var(--r2); padding: 18px 22px; margin-bottom: 18px; }
.dl-date b { display: block; font-family: var(--fd); font-weight: 400; font-size: 40px; line-height: 1; }
.dl-date span { color: #c9cbe0; font-weight: 700; font-size: 13px; }
.dl-prog { display: flex; gap: 16px; align-items: center; }
.dl-prog .ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--mint) calc(var(--p) * 1%), #2b2d48 0); display: grid; place-items: center; flex: none; position: relative; }
.dl-prog .ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--stage); }
.dl-prog .ring b { position: relative; font-family: var(--fe); font-weight: 900; font-size: 18px; }
.dl-prog ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: #c9cbe0; }
.dl-prog li.ok { color: var(--mint); font-weight: 800; }
.dl-streak { text-align: center; }
.dl-streak b { display: block; font-family: var(--fd); font-weight: 400; font-size: 34px; color: var(--mustard); line-height: 1.1; }
.dl-streak span { font-size: 12.5px; color: #c9cbe0; font-weight: 700; }
@media (max-width: 680px) { .dl-top { grid-template-columns: auto 1fr; } .dl-prog { grid-column: 1 / -1; grid-row: 2; } }
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.dl-grid .card { margin: 0; }
.dl-word .w { display: flex; gap: 12px; align-items: center; margin: 8px 0 4px; }
.dl-word .w b { font-size: 30px; display: block; line-height: 1.1; }
.dl-word .w small { color: var(--muted); font-weight: 700; }
.dl-word .ja { font-weight: 900; font-size: 18px; margin: 4px 0 8px; }
.dl-word .ex { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 0 0 10px; background: var(--cream); border-radius: 12px; padding: 10px; }
.dl-word .ex i { font-style: normal; }
.dl-word .save { background: var(--cream); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 13px; color: var(--muted); }
.dl-word .save.on { background: var(--redsoft); color: var(--red); }
.dl-quiz .big { font-family: var(--fd); font-size: 30px; margin: 6px 0; }
.dq-w { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; }
.dq-w b { font-size: 26px; }
.dq-o { display: grid; gap: 8px; }
.dq-o .btn { justify-content: flex-start; text-align: left; }
.dl-talk { grid-column: 1 / -1; }
.dl-talk .tc { max-width: 420px; }
@media (max-width: 900px) { .dl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dl-grid { grid-template-columns: 1fr; } }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 460px; }
.cal b { text-align: center; font-size: 12px; color: var(--muted); }
.cal .d { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: var(--cream); font-family: var(--fe); font-weight: 800; font-size: 13px; color: var(--muted2); }
.cal .d.l05 { background: #e6f7f3; color: var(--ink); }
.cal .d.l1 { background: #9fe3d6; color: var(--ink); }
.cal .d.l2 { background: var(--mint); color: #fff; }
.cal .d.l3 { background: #0f8a77; color: #fff; }
.cal .d.today { box-shadow: 0 0 0 3px var(--red); }
.bignums b small, .vs2 b small { font-family: var(--f); font-weight: 900; }

/* ===== ホームを短く（2026-11-08）===== */
/* ゲームは3つだけ。スマホは横スクロール1列 */
@media (max-width: 860px) {
  .games-top { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
  .games-top > * { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  /* なぜTED：アイコン左・文字右のコンパクトな横並び */
  .why3 { gap: 10px; }
  .why3 .card { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 14px 16px; }
  .why3 .ic { grid-row: span 2; }
  .why3 .ico-why { width: 52px; height: 52px; }
  .why3 .card h3 { margin: 0; font-size: 16px; }
  .why3 .card p { font-size: 13px; line-height: 1.6; }
  /* 姉妹サイト：ホームでは2列・説明なし */
  .sec .sis-g.sis-home { grid-template-columns: 1fr 1fr; }
  .sis-home .sis { padding: 10px; gap: 8px; }
  .sis-home .sis .e { width: 34px; height: 34px; flex-basis: 34px; font-size: 18px; }
  .sis-home .sis b { font-size: 13px; }
  .sis-home .sis small { display: none; }
}

/* ===== いま観るべきTED（/new/・2026-11-08）===== */
.tag.nw { background: var(--mustard); color: var(--ink); font-family: var(--fe); font-weight: 900; letter-spacing: .06em; margin-left: 4px; }
.tag.fire { background: var(--redsoft); color: #b0261b; }
.nv-rank[hidden] { display: none; }
.tag.pub { background: var(--cream); color: var(--muted); }
.tag.guide { background: var(--mintsoft); color: #08735f; }
.tc .en { font-family: var(--fe); font-size: 12px; color: var(--muted2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tc.nv .c { -webkit-line-clamp: 2; }
.sec.dark .tc .en { color: #8d90a8; }
.sec.dark .tag.pub { background: #2b2d48; color: #c9cbe0; }
.nv-jump { background: var(--stage2); padding: 10px 0; position: sticky; top: var(--hdr); z-index: 20; }
.nv-jump .wrap { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.nv-jump .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.nv-jump .chip:hover { border-color: #fff; }
#hot, #picks, #latest, #features, #guide { scroll-margin-top: calc(var(--hdr) + 60px); }
.nv-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.nv-rank { padding-top: 26px; row-gap: 34px; }
@media (min-width: 1100px) { .nv-rank { grid-template-columns: repeat(5, 1fr); } }
.pks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 18px; }
.pk { display: grid; grid-template-columns: 220px 1fr; gap: 16px; background: var(--cream); border: 2.5px solid var(--ink); border-radius: var(--r); padding: 14px; box-shadow: 0 6px 0 var(--ink); }
.pk-th { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--stage2); align-self: start; }
.pk-th img { width: 100%; height: 100%; object-fit: cover; }
.pk-th .ser { position: absolute; left: 8px; top: 8px; }
.pk-th .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(14,15,29,.85); color: #fff; font-family: var(--fe); font-weight: 700; font-size: 12px; padding: 1px 7px; border-radius: 6px; }
.pk-tx h3 { margin: 0 0 2px; font-size: 17px; line-height: 1.45; }
.pk-tx p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; }
.pk-tx .en { font-family: var(--fe); font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pk-tx .pt { background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.pk-tx .pt b { display: inline-block; background: var(--red); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 99px; margin-right: 8px; }
.pk-tx .btns { align-items: center; gap: 10px; }
.pk-tx .v { font-family: var(--fe); font-size: 12px; font-weight: 700; color: var(--muted); }
@media (max-width: 620px) { .pk { grid-template-columns: 1fr; } }
.nv-feat { margin-bottom: 26px; }
.nv-fh { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.nv-fh .em { font-size: 34px; line-height: 1; flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.nv-fh h3 { margin: 2px 0 4px; font-size: 20px; }
.nv-fh h3 small { font-family: var(--fe); font-size: 12px; color: var(--muted); font-weight: 700; margin-left: 10px; }
.nv-fh p { margin: 0; font-size: 14px; color: var(--muted); max-width: 820px; }
.nv-how .card ol { margin: 8px 0 0; padding-left: 1.4em; line-height: 1.9; }
.nv-how .card a { color: var(--red); font-weight: 700; }
.nv-note { font-size: 12.5px; margin: 16px 0 0; line-height: 1.8; }
.nv-banner { display: flex; align-items: center; gap: 14px; background: var(--stage); color: #fff; border-radius: var(--r); padding: 14px 18px; border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--red); transition: transform .12s; }
.nv-banner:hover { transform: translateY(-2px); }
.nv-banner .em { font-size: 28px; }
.nv-banner b { display: block; font-size: 16px; }
.nv-banner small { color: #c9cbe0; font-size: 13px; }
.nv-banner .go { margin-left: auto; font-weight: 900; color: var(--mustard); white-space: nowrap; }
.modal.nvm .box { max-width: 880px; padding: 18px 18px 20px; }
.modal.nvm .player { margin: 22px 0 12px; box-shadow: none; }
.modal.nvm .nvm-t { font-family: var(--f); font-weight: 900; font-size: 18px; margin: 0 0 2px; }
.modal.nvm .nvm-en { font-family: var(--fe); font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.modal.nvm .nvm-tip { font-size: 13px; background: var(--cream); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; text-align: left; }

/* 読み上げ中、自分でスクロールしたら出る「読んでいる所へ」ボタン（read.js） */
.rd-back { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 75; }
@media (max-width: 860px) { .rd-back { bottom: calc(84px + env(safe-area-inset-bottom)); } }
@media print { .rd-back { display: none !important; } }
.ftr-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ftr-btns .fb { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; font-weight: 900; font-size: 15px; color: #fff; line-height: 1.2; transition: transform .15s; }
.ftr-btns .fb:hover { transform: translateY(-2px); }
.ftr-btns .fb small { display: block; font-weight: 700; font-size: 11.5px; opacity: .75; margin-left: 2px; }
.ftr-btns .fb .i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; flex: none; font-family: var(--fd); font-size: 16px; }
.ftr-btns .fb.hr { background: var(--red); }
.ftr-btns .fb.hr .i { color: var(--red); }
.ftr-btns .fb.x { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.ftr-btns .fb.x .i { color: #000; }
/* about */
.ab-why { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-why .card { margin: 0; }
.ab-why .e { font-size: 34px; line-height: 1; }
.ab-why h3 { margin: 8px 0 6px; font-size: 17px; line-height: 1.45; }
.ab-why p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.8; }
@media (max-width: 640px) { .ab-why { grid-template-columns: 1fr; } }
.ab-story { display: grid; gap: 12px; margin-bottom: 16px; }
.ab-story .st { display: grid; grid-template-columns: 40px 1fr; gap: 12px; background: #fff; border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh); }
.ab-story .n { width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--fe); font-weight: 900; display: grid; place-items: center; }
.ab-story b { font-size: 16px; }
.ab-story p { margin: 4px 0 0; line-height: 1.85; }
.ab-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; background: var(--stage); color: #fff; }
.ab-nums b { display: block; font-family: var(--fe); font-weight: 900; font-size: 30px; color: var(--mustard); line-height: 1.1; }
.ab-nums span { font-size: 12.5px; color: #c9cbe0; font-weight: 700; }
@media (max-width: 560px) { .ab-nums { grid-template-columns: 1fr 1fr; } }
.ab-me .hd { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.ab-me .hd img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--cream); flex: none; }
.ab-me .hd small { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.ab-me h3 { margin: 2px 0 0; font-size: 24px; }
.ab-me h3 span { font-size: 13px; color: var(--muted); font-weight: 700; margin-left: 6px; }
.ab-me p { line-height: 1.85; }
.ab-tl { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ab-tl li { background: var(--cream); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.ab-tl li + li::before { content: "→ "; color: var(--red); }
.ab-q { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.ab-q span { background: var(--mustardsoft); border-radius: 10px; padding: 6px 12px; font-weight: 900; font-size: 14px; }
.ab-q small { color: var(--muted); font-weight: 700; }
.ab-msg { margin-top: 14px; border-left: 6px solid var(--red); }
.ab-msg h3 { margin: 4px 0 10px; font-size: 19px; }
.ab-msg p { line-height: 1.9; }
.ab-msg .sig { text-align: right; font-weight: 900; margin: 0; }
/* いま観るべきTED：ほかのページに置く大きな入口 */
.nvb { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: center; position: relative; overflow: hidden; color: #fff; border-radius: var(--r2); padding: 24px 26px; background: radial-gradient(120% 140% at 100% 0%, #ff4b3e 0%, #b8241a 38%, var(--stage) 78%); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.nvb:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--ink); }
.nvb-k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fe); font-weight: 900; font-size: 12px; letter-spacing: .14em; color: var(--mustard); }
.nvb-k i { width: 9px; height: 9px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 0 0 rgba(255,197,61,.7); animation: nvbPulse 1.6s infinite; }
@keyframes nvbPulse { 70% { box-shadow: 0 0 0 9px rgba(255,197,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,197,61,0); } }
.nvb-h { display: block; font-family: var(--fd); font-weight: 400; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.2; margin: 6px 0 8px; }
.nvb-h span { color: var(--mustard); margin-left: .15em; }
.nvb p { margin: 0 0 12px; color: #e9e9f4; font-size: 14.5px; line-height: 1.7; }
.nvb p strong { color: #fff; }
.nvb-no1 { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 8px 12px; margin-bottom: 14px; font-size: 14px; }
.nvb-no1 .t { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nvb-no1 .v { margin-left: auto; font-family: var(--fe); font-weight: 900; color: var(--mustard); white-space: nowrap; font-size: 13px; }
.nvb-no1 .tag { flex: none; }
.nvb-go { pointer-events: none; }
.nvb-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transform: rotate(2deg); }
.nvb-pics .p { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 2.5px solid #fff; box-shadow: 0 10px 24px -10px rgba(0,0,0,.7); background: var(--stage2); }
.nvb-pics .p:nth-child(even) { transform: translateY(14px); }
.nvb-pics img { width: 100%; height: 100%; object-fit: cover; }
.nvb-pics .r { position: absolute; left: 6px; bottom: -4px; font-family: var(--fd); font-size: 40px; line-height: 1; color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
.nvb-pics .p:first-child { border-color: var(--mustard); }
@media (max-width: 760px) {
  .nvb { grid-template-columns: 1fr; padding: 20px 18px 22px; gap: 14px; }
  .nvb-pics { grid-template-columns: repeat(4, 1fr); transform: none; gap: 6px; order: -1; }
  .nvb-pics .p:nth-child(even) { transform: none; }
  .nvb-pics .r { font-size: 24px; }
  .nvb-go { width: 100%; }
}
.hero h1 .ib { display: inline-block; white-space: nowrap; }
.hero h1 { font-size: clamp(28px, 3.9vw, 54px); }
@media (max-width: 760px) { .hero h1 { font-size: clamp(28px, 8.4vw, 44px); } }
.ab-copy dl { margin: 0; display: grid; gap: 10px; }
.ab-copy dl > div { background: var(--cream); border-radius: 12px; padding: 12px 14px; }
.ab-copy dt { font-weight: 900; font-size: 15px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.ab-copy dd { margin: 4px 0 0 30px; font-size: 14px; line-height: 1.85; color: var(--text); }
@media (max-width: 480px) { .ab-copy dd { margin-left: 0; } }

/* ===== 初心者マーク（若葉）・はじめてガイド ===== */
.wakaba { width: 1em; height: 1.2em; flex: none; display: inline-block; vertical-align: -.2em; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.hdr-new { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 900; font-size: 13px; white-space: nowrap; border: 2px solid #11a35b; transition: transform .15s; }
.hdr-new .wakaba { font-size: 16px; }
.hdr-new:hover { transform: translateY(-2px); }
.hdr-new[aria-current] { background: var(--mustardsoft); }
@media (max-width: 1080px) { .hdr-new { margin-left: auto; } .hdr-new + .xp { margin-left: 0; } }
@media (max-width: 560px) { .hdr-new span { display: none; } .hdr-new { padding: 5px 8px; } }
.btn.gd-btn .wakaba { font-size: 18px; }
.gd-banner { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; background: #fff; border: 2.5px solid var(--ink); box-shadow: var(--sh2); border-radius: var(--r); padding: 12px 18px; transition: transform .15s, box-shadow .15s; }
.gd-banner:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
.gd-banner .wakaba { font-size: 34px; }
.gd-banner img { width: 58px; height: 58px; border-radius: 50%; background: var(--cream); }
.gd-banner b { display: block; font-size: 16.5px; line-height: 1.4; }
.gd-banner span { font-size: 13.5px; color: var(--muted); line-height: 1.6; display: block; }
.gd-banner .go { color: var(--red); font-weight: 900; white-space: nowrap; font-size: 14px; }
@media (max-width: 640px) { .gd-banner { grid-template-columns: auto 1fr; padding: 12px 14px; } .gd-banner img, .gd-banner .go { display: none; } }

.gd-hero { background: var(--stage); color: #fff; position: relative; overflow: hidden; }
.gd-hero::before { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(17,163,91,.25), transparent 65%); right: -180px; top: -260px; pointer-events: none; }
.gd-hero .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; padding-top: 36px; padding-bottom: 40px; position: relative; }
.gd-hero h1 { font-family: var(--fd); font-weight: 400; font-size: clamp(32px, 5.2vw, 58px); line-height: 1.18; margin: 12px 0 14px; }
.gd-hero h1 .y { color: var(--mustard); }
.gd-hero p { color: #c9cbe0; margin: 0 0 22px; font-size: 16px; }
.gd-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 18px 6px 10px; font-weight: 900; font-size: 15px; }
.gd-badge .wakaba { font-size: 28px; }
.gd-hero-art { position: relative; display: grid; place-items: center; }
.gd-hero-art img { width: min(340px, 80%); border-radius: 50%; box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 30px 60px -20px rgba(0,0,0,.6); }
.gd-say { position: absolute; top: 4%; left: 0; background: #fff; color: var(--ink); font-weight: 900; padding: 10px 16px; border-radius: 18px; font-size: 15px; box-shadow: 0 6px 0 var(--red); z-index: 1; }
.gd-say::after { content: ""; position: absolute; right: 26px; bottom: -10px; border-top: 12px solid #fff; border-left: 10px solid transparent; }
@media (max-width: 860px) { .gd-hero .wrap { grid-template-columns: 1fr; padding-top: 22px; } .gd-hero-art { order: -1; } .gd-hero-art img { width: 210px; } .gd-say { left: 4%; font-size: 13.5px; } }
.gd-toc { position: sticky; top: var(--hdr); z-index: 40; background: rgba(255,246,234,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.gd-toc .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.gd-toc .wrap::-webkit-scrollbar { display: none; }
.gd-toc a { flex: none; padding: 5px 13px; border-radius: 999px; font-weight: 900; font-size: 13px; background: #fff; border: 2px solid var(--line); transition: .15s; }
.gd-toc a:hover, .gd-toc a.on { border-color: var(--ink); background: var(--ink); color: #fff; }
#hooky, #start, #map, #talk, #route, #hacks, #xp, #plan, #faq, #copyright { scroll-margin-top: calc(var(--hdr) + 54px); }
.gd-sub { font-size: 20px; font-weight: 900; margin: 32px 0 14px; }

.gd-meet { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start; }
.gd-hk { position: relative; border-radius: 50%; padding: 0; }
.gd-hk img { width: 100%; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); background: #fff; }
.gd-hk .tap { position: absolute; right: 4px; bottom: 18px; background: var(--red); color: #fff; font-family: var(--fe); font-weight: 900; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 2px solid var(--ink); }
.gd-hkbubble { margin: 0 0 16px; }
.gd-hkbubble .en { font-size: 19px; font-weight: 900; margin: 4px 0 2px; }
.gd-hkbubble .ja { margin: 0; color: var(--muted); font-size: 14.5px; }
.gd-prof { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gd-prof > div { background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: var(--sh); }
.gd-prof dt { font-size: 11.5px; font-weight: 900; color: var(--red); letter-spacing: .06em; }
.gd-prof dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; line-height: 1.6; }
@media (max-width: 760px) { .gd-meet { grid-template-columns: 1fr; } .gd-hk { width: 200px; margin: 0 auto; } .gd-prof { grid-template-columns: 1fr; } }
.gd-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gd-faces figure { margin: 0; background: #fff; border-radius: var(--r); padding: 10px; box-shadow: var(--sh); text-align: center; }
.gd-faces img { border-radius: 14px; aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .3s; }
.gd-faces figure:hover img { transform: scale(1.06) rotate(-3deg); }
.gd-faces b { display: block; margin-top: 8px; font-size: 14.5px; }
.gd-faces span { display: block; font-size: 12px; color: var(--muted); line-height: 1.55; }
.gd-owlen { margin-top: 22px; }
.gd-owlen-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gd-owlen-g > div { background: var(--cream); border-radius: 14px; padding: 12px 50px 12px 14px; position: relative; }
.gd-owlen-g b { display: block; font-size: 17px; }
.gd-owlen-g span { font-size: 13px; color: var(--muted); line-height: 1.6; display: block; }
.gd-owlen-g .say { position: absolute; right: 10px; top: 12px; }

.gd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gd-step { background: var(--cream); border-radius: var(--r); padding: 18px; position: relative; display: flex; flex-direction: column; }
.gd-step .n { position: absolute; top: -14px; left: -6px; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--fd); font-size: 22px; display: grid; place-items: center; border: 3px solid var(--ink); z-index: 1; }
.gd-step img { border-radius: 14px; aspect-ratio: 16/10; object-fit: cover; width: 100%; background: #fff; }
.gd-step h3 { margin: 12px 0 4px; font-size: 18px; }
.gd-step p { margin: 0 0 12px; font-size: 14px; color: var(--muted); flex: 1; }
.gd-step .btn { align-self: flex-start; }
@media (max-width: 760px) { .gd-steps { grid-template-columns: 1fr; gap: 22px; } }
.gd-mission { margin-top: 26px; border: 2.5px solid var(--ink); box-shadow: var(--sh2); }
.gd-mission-h { display: flex; gap: 12px; align-items: center; }
.gd-mission-h .wakaba { font-size: 34px; }
.gd-mission-h h3 { margin: 0; font-size: 20px; }
.gd-mission-h #msCount { font-family: var(--fe); color: var(--red); }
.gd-msbar { background: var(--cream); }
.gd-msbar i { transition: width 1s cubic-bezier(.2,.8,.2,1); }
.gd-mslist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.gd-mslist li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
.gd-mslist .ck { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; font-family: var(--fe); font-weight: 900; color: var(--muted2); flex: none; }
.gd-mslist li.ok .ck { background: #11a35b; border-color: #11a35b; color: #fff; }
.gd-mslist li.ok a { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(17,163,91,.6); }
.gd-mslist a:hover { color: var(--red); }
.gd-mission.clear { border-color: #11a35b; box-shadow: 0 4px 0 #11a35b; }
@media (max-width: 640px) { .gd-mslist { grid-template-columns: 1fr; } }

.gd-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.gd-door { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; background: #fff; border-radius: var(--r); padding: 10px; box-shadow: var(--sh); transition: transform .15s; }
.gd-door:hover { transform: translateY(-3px); }
.gd-door img { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; }
.gd-door b { display: block; font-size: 15.5px; line-height: 1.4; margin-top: 2px; }
.gd-door p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.gd-door .tag { background: var(--mustardsoft); font-size: 11px; }

.gd-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gd-flow > div { background: var(--stage2); border-radius: var(--r); padding: 18px 16px; position: relative; }
.gd-flow .n { font-family: var(--fd); font-size: 34px; color: var(--red); line-height: 1; }
.gd-flow b { display: block; font-size: 17px; margin: 6px 0 4px; }
.gd-flow p { margin: 0 0 8px; font-size: 13.5px; color: #c9cbe0; }
.gd-flow small { background: var(--mustard); color: var(--ink); font-weight: 900; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; }
.gd-flow > div:not(:last-child)::after { content: "→"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--mustard); font-weight: 900; z-index: 1; }
@media (max-width: 860px) { .gd-flow { grid-template-columns: 1fr 1fr; } .gd-flow > div::after { display: none; } }
@media (max-width: 480px) { .gd-flow { grid-template-columns: 1fr; } }
.gd-tabs-ex { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; }
.gd-tabs-ex > div { border: 1.5px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 14px; }
.gd-tabs-ex b { display: block; }
.gd-tabs-ex span { font-size: 13px; color: #b5b7cc; line-height: 1.6; }
.gd-tip { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; background: #fff; color: var(--text); border-radius: var(--r); padding: 16px 18px; margin-top: 18px; }
.gd-tip img { width: 88px; height: 88px; border-radius: 50%; }
.gd-tip p { margin: 0; font-size: 14.5px; }
.gd-tip b { display: block; color: var(--red); margin-bottom: 2px; }

.gd-rtabs { padding-top: 0; }
.gd-route { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; background: #fff; border-radius: var(--r2); padding: 20px; box-shadow: var(--sh); margin-top: 12px; animation: fadein .3s; }
.gd-route img { width: 100%; border-radius: 18px; aspect-ratio: 1; object-fit: cover; background: var(--cream); }
.gd-route h3 { margin: 0 0 4px; font-size: 21px; }
.gd-route ol { margin: 12px 0 16px; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 8px; }
.gd-route li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; background: var(--cream); border-radius: 12px; padding: 10px 12px; }
.gd-route li::before { content: counter(r); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--fe); font-weight: 900; font-size: 13px; display: grid; place-items: center; }
.gd-route li b { font-size: 14.5px; line-height: 1.6; }
.gd-route li b a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.gd-route li span { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 760px) { .gd-route { grid-template-columns: 1fr; } .gd-route img { width: 120px; } }

.gd-hg { font-size: 15px; font-weight: 900; margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }
.gd-hg::before { content: ""; width: 18px; height: 4px; border-radius: 4px; background: var(--red); }
.gd-hacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
@media (max-width: 360px) { .gd-hacks { grid-template-columns: 1fr; } }
.gd-hack { background: var(--cream); border-radius: var(--r); padding: 16px 18px; position: relative; }
.gd-hack .no { position: absolute; top: 12px; right: 14px; font-family: var(--fe); font-weight: 900; font-size: 12px; color: var(--muted2); letter-spacing: .08em; }
.gd-hack .e { font-size: 26px; line-height: 1; display: block; margin-bottom: 6px; }
.gd-hack > b { display: block; font-size: 15.5px; line-height: 1.5; margin-bottom: 4px; padding-right: 26px; }
.gd-hack p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.75; }
.gd-hack p a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

.gd-xp { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 860px) { .gd-xp { grid-template-columns: 1fr; } }
.gd-xpt { width: 100%; border-collapse: collapse; font-size: 14px; }
.gd-xpt td { padding: 7px 4px; border-bottom: 1px dashed var(--line); }
.gd-xpt td:first-child { width: 30px; }
.gd-xpt td:last-child { text-align: right; font-family: var(--fe); font-weight: 900; color: var(--red); white-space: nowrap; }
.gd-ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 6px; }
.gd-ranks li { display: flex; align-items: center; gap: 10px; background: var(--cream); border-radius: 12px; padding: 7px 12px; }
.gd-ranks .lv { font-family: var(--fe); font-weight: 900; font-size: 12px; background: var(--mustard); border-radius: 999px; padding: 1px 8px; min-width: 48px; text-align: center; }
.gd-ranks b { font-size: 14.5px; }
.gd-ranks small { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.gd-ranks li:last-child { background: var(--ink); color: #fff; }
.gd-ranks li:last-child small { color: #b5b7cc; }
.gd-badges .bdg.got { box-shadow: 0 0 0 3px var(--mustard), var(--sh); }

.gd-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gd-ph { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gd-ph .ico { width: 46px; height: 46px; }
.gd-ph b { font-family: var(--fd); font-weight: 400; font-size: 22px; }
.gd-plans ol { margin: 0; padding-left: 1.2em; font-size: 14px; }
.gd-plans li { margin-bottom: 4px; }
.gd-plans a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .gd-plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gd-plans { grid-template-columns: 1fr; } }

/* 著作権のこと */
.gd-copy-lead { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; margin-bottom: 18px; }
.gd-copy-lead img { width: 110px; height: 110px; border-radius: 50%; background: #fff; }
.gd-copy-lead p { margin: 0; }
@media (max-width: 560px) { .gd-copy-lead { grid-template-columns: 72px 1fr; } .gd-copy-lead img { width: 72px; height: 72px; } }
.gd-cp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
@media (max-width: 760px) { .gd-cp2 { grid-template-columns: 1fr; } }
.gd-cp2 .card h3 { font-size: 17px; }
.gd-cp2 ul, .gd-copy ul { margin: 0; padding-left: 1.2em; font-size: 14px; }
.gd-cp2 li, .gd-copy li { margin-bottom: 6px; line-height: 1.75; }
.gd-ok { border-top: 6px solid #11a35b; }
.gd-ng { border-top: 6px solid var(--red); }
.gd-copy .card { margin-bottom: 12px; }
.gd-copy .card h3 { display: flex; gap: 8px; align-items: center; }
.gd-copy .card p { font-size: 14.5px; }
.gd-quote4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 6px; }
.gd-quote4 > div { background: var(--cream); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.6; }
.gd-quote4 b { display: block; font-size: 14.5px; color: var(--red); }
.gd-quote4.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .gd-quote4 { grid-template-columns: 1fr 1fr; } .gd-quote4.three { grid-template-columns: 1fr; } }
.gd-cite { background: var(--stage); color: #e9e9f4; border-radius: 12px; padding: 12px 14px; font-size: 13px; font-family: var(--fe); line-height: 1.8; overflow-wrap: anywhere; margin: 8px 0; }
.gd-cite small { display: block; color: #a8abc2; font-family: var(--f); }
.gd-end img { width: 180px; margin: 0 auto 10px; border-radius: 50%; }
.gd-end p { color: var(--muted); }

/* フッターのホーキー（下までスクロールすると顔を出す） */
.ftr { position: relative; }
.ftr-hk { position: absolute; right: max(16px, calc((100vw - var(--max)) / 2 + 16px)); top: -64px; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.ftr-hk img { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--stage); background: #fff; }
.ftr-hk span { background: #fff; color: var(--ink); font-weight: 900; font-size: 12.5px; padding: 6px 10px; border-radius: 14px; margin-bottom: 40px; box-shadow: 0 3px 0 var(--red); white-space: nowrap; }
@media (max-width: 560px) { .ftr-hk { top: -52px; } .ftr-hk img { width: 60px; height: 60px; } .ftr-hk span { margin-bottom: 30px; } }

/* 読んだ量のバー（長いページだけ） */
.readbar { position: fixed; left: 0; right: 0; top: var(--hdr); height: 3px; z-index: 49; pointer-events: none; }
.readbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--mustard)); transform-origin: left; transform: scaleX(0); }

/* =========================================================
   モーション（サイト全体）：「動きを減らす」設定の人には出さない
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* スクロールで、下からふわっと出てくる（transform とぶつからないよう translate を使う） */
  .mo .rv { opacity: 0; translate: 0 26px; transition: opacity .65s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), translate .65s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
  .mo .rv.in { opacity: 1; translate: 0 0; }
  /* 見出しの赤い文字に、マーカーを引く */
  .mo .sechead .h2 .em { background: linear-gradient(transparent 70%, rgba(255,197,61,.55) 70%) no-repeat 0 0 / 0% 100%; transition: background-size .9s cubic-bezier(.2,.7,.2,1) .3s; }
  .mo .sec.dark .sechead .h2 .em { background-image: linear-gradient(transparent 72%, rgba(255,75,62,.35) 72%); }
  .mo .sechead.in .h2 .em { background-size: 100% 100%; }

  /* ホーキー：ふわふわ浮かぶ */
  .float, .hooksay > img, .hk-note img, .me-card > img, .gd-hk img, .gd-tip img, .gd-copy-lead img { animation: hkFloat 4.2s ease-in-out infinite; }
  .hooksay > img { animation-duration: 3.6s; }
  @keyframes hkFloat { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -7px; rotate: -2deg; } 60% { translate: 0 -3px; rotate: 1.5deg; } }
  .gd-hk.hop img { animation: hkHop .6s cubic-bezier(.3,1.6,.5,1); }
  @keyframes hkHop { 0% { translate: 0 0; scale: 1; } 30% { translate: 0 -22px; scale: 1.04 .96; } 60% { translate: 0 0; scale: 1.05 .94; } 100% { translate: 0 0; scale: 1; } }
  .gd-hk .tap { animation: tapPulse 1.4s ease-in-out infinite; }
  @keyframes tapPulse { 50% { scale: 1.12; } }
  .gd-hkbubble.pop { animation: bubPop .4s cubic-bezier(.3,1.5,.5,1); }
  @keyframes bubPop { 0% { scale: .92; opacity: .4; } 100% { scale: 1; opacity: 1; } }
  .gd-say { animation: saySway 3s ease-in-out infinite; transform-origin: 80% 100%; }
  @keyframes saySway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; translate: 0 -3px; } }

  /* 若葉マーク：ぴょこぴょこ */
  .gd-badge .wakaba, .gd-banner .wakaba, .gd-mission-h .wakaba { animation: wkBounce 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
  @keyframes wkBounce { 0%, 60%, 100% { translate: 0 0; rotate: 0deg; } 70% { translate: 0 -6px; rotate: -8deg; } 80% { translate: 0 0; rotate: 6deg; } 90% { translate: 0 -2px; rotate: 0deg; } }
  .hdr-new:hover .wakaba, .gd-btn:hover .wakaba { animation: wkBounce .9s ease-in-out; }

  /* ロゴの赤い輪：ステージのライトのように脈打つ */
  .logo .dot { animation: dotGlow 2.8s ease-in-out infinite; }
  @keyframes dotGlow { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,75,62,.25), 0 0 0 0 rgba(255,75,62,.35); } 50% { box-shadow: 0 0 0 4px rgba(255,75,62,.25), 0 0 0 11px rgba(255,75,62,0); } }

  /* ヒーロー：スポットライトがゆっくり動く・絵がふわっと寄る・文字が順に出る */
  .hero::before, .gd-hero::before { animation: spot 14s ease-in-out infinite alternate; }
  @keyframes spot { 0% { translate: 0 0; scale: 1; } 50% { translate: 120px 60px; scale: 1.15; } 100% { translate: 40px 140px; scale: .95; } }
  .hero .art img { animation: kenburns 18s ease-in-out infinite alternate; transform-origin: 60% 40%; }
  @keyframes kenburns { from { scale: 1; } to { scale: 1.07; } }
  .hero .art { translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -10px); transition: translate .4s ease-out; }
  .hero .wrap > div:first-child > *, .gd-hero-tx > *, .pagehead .wrap > *, .th-hero .wrap > div > *, .tp-info > * { animation: riseIn .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero .wrap > div:first-child > :nth-child(2), .gd-hero-tx > :nth-child(2), .pagehead .wrap > :nth-child(2), .th-hero .wrap > div > :nth-child(2), .tp-info > :nth-child(2) { animation-delay: .08s; }
  .hero .wrap > div:first-child > :nth-child(3), .gd-hero-tx > :nth-child(3), .pagehead .wrap > :nth-child(3), .th-hero .wrap > div > :nth-child(3), .tp-info > :nth-child(3) { animation-delay: .16s; }
  .hero .wrap > div:first-child > :nth-child(4), .gd-hero-tx > :nth-child(4), .pagehead .wrap > :nth-child(4), .th-hero .wrap > div > :nth-child(4), .tp-info > :nth-child(4) { animation-delay: .24s; }
  .hero .wrap > div:first-child > :nth-child(n+5), .th-hero .wrap > div > :nth-child(n+5), .tp-info > :nth-child(n+5) { animation-delay: .32s; }
  @keyframes riseIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  .pagehead::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,75,62,.18), transparent 65%); left: -140px; top: -220px; pointer-events: none; animation: spot 16s ease-in-out infinite alternate; }
  .pagehead .side { animation: hkFloat 4.6s ease-in-out .8s infinite, sideIn .8s cubic-bezier(.3,1.4,.5,1) both; }
  @keyframes sideIn { from { opacity: 0; scale: .7; } }

  /* ボタン：赤いボタンに光がすっと走る */
  .btn.red { position: relative; overflow: hidden; isolation: isolate; }
  .btn.red::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); translate: -120% 0; z-index: -1; pointer-events: none; }
  .btn.red:hover::after { translate: 120% 0; transition: translate .7s ease; }
  .btn.red.big { animation: bigGlow 2.6s ease-in-out infinite; }
  @keyframes bigGlow { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 8px rgba(255,75,62,.18); } }
  .btn:active { scale: .97; }

  /* カード：ゲームの絵がちょっと揺れる・NEW がときどき跳ねる */
  .gc:hover .pic img, .persona:hover img, .gd-door:hover img { animation: wob .6s ease-in-out; }
  @keyframes wob { 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
  .badge-new { animation: newHop 3s ease-in-out infinite; }
  @keyframes newHop { 0%, 80%, 100% { translate: 0 0; } 86% { translate: 0 -5px; } 92% { translate: 0 0; } 96% { translate: 0 -2px; } }
  .persona.on { animation: pick .45s cubic-bezier(.3,1.6,.5,1); }
  @keyframes pick { 0% { scale: .94; } 100% { scale: 1; } }
  .coltile:hover .em { animation: newHop .8s ease-in-out; }

  /* XP：増えたら右上の Lv がぽんっ／ごほうびの窓は弾んで出る */
  .xp.bump { animation: xpBump .7s cubic-bezier(.3,1.6,.5,1); }
  @keyframes xpBump { 0% { scale: 1; } 30% { scale: 1.18; background: rgba(255,197,61,.35); } 100% { scale: 1; } }
  .modal .box { animation: popIn .45s cubic-bezier(.3,1.5,.5,1); }
  @keyframes popIn { from { scale: .7; opacity: 0; } }
  .modal .box > img { animation: hkHop .8s cubic-bezier(.3,1.6,.5,1) .15s both; }

  /* フッターのホーキー */
  .ftr-hk { opacity: 0; translate: 0 30px; transition: opacity .5s, translate .6s cubic-bezier(.3,1.6,.5,1); }
  .ftr.in .ftr-hk { opacity: 1; translate: 0 0; }
  .ftr.in .ftr-hk img { animation: hkFloat 3.4s ease-in-out .6s infinite; }

  .gd-toc a.on { animation: pick .4s cubic-bezier(.3,1.6,.5,1); }
}
@media print { .rv { opacity: 1 !important; translate: none !important; } .ftr-hk, .readbar, .gd-toc { display: none !important; } }

/* =========================================================
   スマホ最適化（2026-11-08）
   ・ヘッダー：幅390〜560pxでロゴと Lv が大きすぎて約470pxになり、
     ハンバーガーが画面外に出て、ページ全体が横に揺れていた → 必ず1行に収める
   ・縦に長すぎる：カード一覧が1列・大きな絵のまま並んでいた → 横長リスト・2列・横スクロールに
   点検：node tools/mobile.mjs（横はみ出し・ページの長さ）
   ========================================================= */
/* 横揺れの保険：はみ出しても横にスクロールさせない（clip は sticky のヘッダーを壊さない） */
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* ヘッダー：ロゴ・ハンバーガーは縮めない。きつい時は Lv ピルが縮む */
.hdr .logo, .burger, .hdr-new { flex-shrink: 0; }
@media (max-width: 1080px) { .xp { min-width: 0; flex-shrink: 1; overflow: hidden; } }
@media (max-width: 560px) {
  .hdr .wrap { gap: 8px; }
  .hdr .logo { font-size: 19px; gap: 7px; }
  .hdr .logo .dot { width: 18px; height: 18px; }
  .hdr .logo .dot::after { inset: 5.5px; }
  .xp { gap: 5px; padding: 4px 9px 4px 5px; font-size: 12.5px; }
  .xp .bar { display: none; }
  .hdr-new { padding: 4px 7px; }
  .burger { margin-right: -6px; }
}
@media (max-width: 370px) {
  .hdr .logo { font-size: 17px; gap: 6px; }
  .hdr .logo .dot { width: 16px; height: 16px; }
  .hdr .logo .dot::after { inset: 5px; }
  .hdr .wrap { gap: 6px; }
  .xp .fire { display: none; }
}

@media (max-width: 560px) {
  /* 全体：余白をつめる */
  .sec { padding: 36px 0; }
  .sec.tight { padding: 22px 0; }
  .h2 { font-size: 22px; }
  .lead { font-size: 14px; margin-bottom: 14px; line-height: 1.7; }
  .sechead { margin-bottom: 12px; gap: 6px 12px; }
  .pagehead { padding: 22px 0 24px; }
  .pagehead h1 { font-size: 26px; }
  .card { padding: 16px; }

  /* ヒーロー：絵を低く、ボタンを横に、数字を1行に */
  .hero .wrap { gap: 14px; padding-top: 14px; padding-bottom: 26px; }
  .hero .art { aspect-ratio: 2 / 1; border-radius: 18px; }
  .hero h1 { margin: 4px 0 10px; }
  .hero p { font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
  .hero .btns { gap: 8px; }
  .hero .btns .btn.big { width: 100%; padding: 13px 20px; font-size: 16.5px; }
  .hero .btns .btn.ghost { flex: 1 1 0; padding: 9px 8px; font-size: 13.5px; }
  .hero .stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; margin-top: 18px; }
  .hero .stats b { font-size: 19px; }
  .hero .stats span { font-size: 10px; line-height: 1.35; display: block; }

  /* ホームの「急上昇・診断」：大きいカードも横長に */
  .hot5 { gap: 8px; }
  .hot, .hot.big { grid-template-columns: 84px 1fr; padding: 10px; gap: 10px; }
  .hot img, .hot.big img { width: 84px; aspect-ratio: 1; border-radius: 10px; }
  .hot.big { align-items: center; }
  .hot.big > div { padding: 0; }
  .hot.big b { font-size: 17px; margin: 2px 0; }
  .hot.big p { font-size: 12px; line-height: 1.5; }
  .hot.big .go { margin-top: 6px; padding: 5px 14px; font-size: 13px; }
  .hot b { font-size: 14.5px; }
  .hot p { font-size: 12px; line-height: 1.5; }

  /* あなたはどれ？：横スクロール1列 */
  .personas { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 88px; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 12px 2px 8px; margin: -8px 0 0; scrollbar-width: none; }
  .personas::-webkit-scrollbar { display: none; }
  .persona { padding: 6px 6px 8px; scroll-snap-align: start; }
  .persona img { border-radius: 10px; }
  .persona b { font-size: 12px; margin-top: 5px; }
  .persona.on::after { top: -8px; right: -4px; width: 22px; height: 22px; font-size: 12px; }

  /* なにする？の6つの入口：絵を低く */
  .doors { gap: 10px; }
  .door { border-radius: 18px; box-shadow: 0 4px 0 var(--ink); }
  .door .pic { aspect-ratio: 2 / 1; }
  .door .tx { padding: 8px 10px 10px; }
  .door .tx b { font-size: 15px; }
  .door .tx p { font-size: 11.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* 今日の1本 */
  .today { box-shadow: 0 6px 0 var(--ink); }
  .today .tx { padding: 14px 14px 16px; gap: 8px; }
  .today .tx h3 { font-size: 17px; }
  .today .steps3 { gap: 6px; }
  .today .steps3 div { padding: 6px 7px; font-size: 11.5px; }

  /* 横スクロールの列：カードを小さく（2枚弱が見える） */
  .row { grid-auto-columns: 46%; gap: 10px; padding-bottom: 10px; }
  .row .tc .bd { padding: 8px 10px 10px; gap: 2px; }
  .row .tc .t { font-size: 13px; line-height: 1.4; }
  .row .tc .c { display: none; }
  .row .tc .meta { gap: 4px; padding-top: 4px; }
  .row .tc .tag { font-size: 10.5px; padding: 1px 6px; }
  .row .tc .v { font-size: 10.5px; }
  .row .rank { font-size: 42px; -webkit-text-stroke: 2px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
  .coltiles.row-x { grid-auto-columns: 46%; gap: 10px; }

  /* トークの一覧：サムネ左・文字右の横長リスト */
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .grid > .tc { flex-direction: row; align-items: stretch; border-radius: 14px; }
  .grid > .tc .th { width: 132px; flex: none; aspect-ratio: 16 / 9; align-self: flex-start; margin: 8px 0 8px 8px; border-radius: 10px; }
  .grid > .tc .bd { padding: 8px 10px; gap: 2px; min-width: 0; }
  .grid > .tc .t { font-size: 13.5px; line-height: 1.4; }
  .grid > .tc .c { font-size: 11.5px; }
  .grid > .tc .meta { gap: 4px; padding-top: 4px; }
  .grid > .tc .tag { font-size: 10.5px; padding: 1px 6px; }
  .grid > .tc .v { font-size: 10.5px; }
  .grid > .tc .ser .tag { font-size: 9.5px; padding: 0 5px; }
  .grid > .tc .dur { font-size: 10.5px; right: 4px; bottom: 4px; padding: 0 5px; }
  .grid > .tc .done { font-size: 10px; top: 4px; right: 4px; padding: 1px 6px; }
  .grid > .tc .rank { font-size: 30px; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink); transform: none; left: 4px; bottom: 2px; }
  .nv-rank { padding-top: 0; row-gap: 10px; }

  /* ゲーム：2列 */
  .games { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gc { border-radius: 18px; }
  .gc .tx { padding: 8px 10px 10px; }
  .gc .tx b { font-size: 14px; }
  .gc .best { font-size: 11px; }
  .gc .lvl { top: 8px; left: 8px; font-size: 10.5px; padding: 1px 8px; }

  /* 予想長文・多読：絵を左に小さく */
  .rd-list { grid-template-columns: 1fr; gap: 10px; }
  .rd { flex-direction: row; }
  .rd img { width: 104px; flex: none; aspect-ratio: auto; align-self: stretch; min-height: 92px; }
  .rd .tx { padding: 10px 12px; min-width: 0; }
  .rd b { font-size: 14.5px; }
  .rd .ja { font-size: 12px; line-height: 1.5; display: block; }
  .rd .meta { margin-top: 6px; gap: 4px; }
  .rd .meta .tag { font-size: 10.5px; padding: 1px 6px; }

  /* 入試ランキング */
  .rank-list { gap: 8px; }
  .rk { grid-template-columns: 34px 72px 1fr; gap: 10px; padding: 8px 10px 8px 6px; }
  .rk .no { font-size: 22px; }
  .rk b { font-size: 14.5px; }
  .rk .stars { font-size: 12px; }

  /* ワークシート：プリントの絵を左に小さく */
  .wsl2 { grid-template-columns: 1fr; gap: 10px; }
  .wsc2 { flex-direction: row; }
  .wsc2 .shot { width: 100px; flex: none; aspect-ratio: auto; height: auto; min-height: 120px; padding: 8px 8px 0; }
  .wsc2 .tx { padding: 10px 12px; min-width: 0; }
  .wsc2 .tx b { font-size: 13.5px; }
  .wsc2 .tx p { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .wsc2 .btns { gap: 6px; padding-top: 6px; }
  .wsc2 .btn.sm { padding: 5px 11px; font-size: 12.5px; }

  /* いま観るべきTED：おすすめ */
  .pks { gap: 12px; }
  .pk { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 10px; box-shadow: 0 4px 0 var(--ink); }
  .pk-tx h3 { font-size: 14.5px; }
  .pk-tx p { font-size: 12.5px; line-height: 1.6; }
  .pk-tx .pt { font-size: 12px; padding: 5px 8px; }

  /* 特集・単語・バッジ・顔・すごろく：列を増やす */
  .coltiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .coltile .pic .em { width: 38px; height: 38px; font-size: 19px; box-shadow: 0 0 0 3px rgba(255,255,255,.4); }
  .coltile .tx { padding: 8px 10px 10px; }
  .coltile .tx b { font-size: 13px; }
  .coltile .tx span { font-size: 11px; }
  .wtiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wtiles a { padding: 10px 12px; }
  .wtiles .e { font-size: 22px; }
  .wtiles b { font-size: 13.5px; }
  .wtiles span:last-child { font-size: 11.5px; }
  .badges { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bdg { padding: 10px 6px; }
  .bdg .ico-bdg { width: 46px; height: 46px; }
  .bdg b { font-size: 11.5px; }
  .bdg small { font-size: 10px; }
  .gd-faces { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gd-faces figure { padding: 6px; }
  .gd-faces b { font-size: 12.5px; margin-top: 4px; }
  .gd-faces span { font-size: 10.5px; }
  .gd-map { gap: 8px; }
  .gd-door { grid-template-columns: 64px 1fr; padding: 8px; gap: 10px; }
  .gd-door img { width: 64px; height: 64px; }
  .gd-door b { font-size: 14.5px; }
  .gd-door p { font-size: 11.5px; line-height: 1.5; }
  .road { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stop { border-radius: 14px; border-width: 2px; }
  .stop .d { padding: 14px 5px 5px; font-size: 9.5px; line-height: 1.3; }
  .stop .d b { font-size: 12.5px; }
  .stop.goal { font-size: 13px; }
  .stop.ok::after { font-size: 9px; padding: 1px 24px; top: 7px; }

  /* フッター：リンクは3列、姉妹サイトは「ぜんぶ見る」にまとめる */
  .ftr { padding: 28px 0 calc(84px + env(safe-area-inset-bottom)); margin-top: 24px; }
  .ftr .cols { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
  .ftr .cols > div:first-child { grid-column: 1 / -1; }
  .ftr .cols > div:first-child p { display: none; }
  .ftr b { font-size: 13px; margin-bottom: 4px; }
  .ftr .cols a:not(.logo) { font-size: 12px; padding: 4px 0; line-height: 1.45; }
  .ftr-sis { margin-top: 18px; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .ftr-sis > b { margin: 0; }
  .ftr-sis-g { display: none; }
  .ftr-btns { margin-top: 16px; gap: 8px; }
  .ftr-btns .fb { padding: 7px 14px 7px 7px; font-size: 13.5px; }
  .ftr-btns .fb .i { width: 30px; height: 30px; }
  .ftr .note { margin-top: 16px; padding-top: 12px; font-size: 10.5px; line-height: 1.7; }
}
.ftr-sis-all { display: none; }
@media (max-width: 560px) { .ftr .ftr-sis-all { display: inline-block; flex: none; padding: 6px 14px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; font-weight: 900; font-size: 12.5px; color: #fff; } }