/* 原田英語の超絶宇宙ミュージアム — 共通スタイル
   深い宇宙の紺 × 星の金 × 地球の青。ガラスの計器パネル（HUD）と、星空のキャンバスが背景に流れる */
:root {
  --bg: #04060f;
  --bg2: #0a1024;
  --panel: rgba(14, 22, 48, 0.62);
  --panel2: rgba(22, 34, 70, 0.72);
  --line: rgba(140, 180, 255, 0.18);
  --line2: rgba(140, 180, 255, 0.32);
  --tx: #eef2ff;
  --tx2: #d2daf4;
  --mut: #a6b1d8;
  --gold: #ffd27a;
  --gold2: #ffb648;
  --cyan: #63e6ff;
  --blue: #4f8dff;
  --vio: #a77bff;
  --pink: #ff7ac6;
  --red: #ff6b6b;
  --green: #5dffb0;
  --r: 24px;
  --sh: 0 20px 60px rgba(0, 0, 0, 0.45);
  --glow: 0 0 0 1px var(--line), 0 10px 40px rgba(40, 80, 200, 0.18);
  --ff: 'Zen Maru Gothic', 'Zen Kaku Gothic New', system-ui, -apple-system, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  --ff-m: 'Zen Maru Gothic', var(--ff);
  --ff-d: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif;
  --ff-x: 'Orbitron', 'Zen Kaku Gothic New', sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(1200px 700px at 80% -10%, #1a1f5a 0%, transparent 60%), radial-gradient(900px 600px at -10% 30%, #241046 0%, transparent 55%), var(--bg); color: var(--tx); font-family: var(--ff); font-size: 18px; line-height: 1.95; letter-spacing: 0.02em; font-weight: 500; min-height: 100vh; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { word-break: auto-phrase; line-height: 1.35; margin: 0 0 0.5em; font-weight: 900; letter-spacing: 0.01em; }
p { margin: 0 0 1em; }
.sr { position: absolute; left: -9999px; }
.sr:focus { left: 8px; top: 8px; z-index: 999; background: #fff; color: #000; padding: 8px; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(860px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--mut); }
.en { font-family: 'Zen Kaku Gothic New', system-ui, sans-serif; letter-spacing: 0.01em; }
.x { font-family: var(--ff-x); letter-spacing: 0.08em; }
main { position: relative; z-index: 1; }

/* ─── 背景の星空（core.js が描く） ─── */
.sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }

/* ─── ヘッダー ─── */
.hd { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); background: linear-gradient(180deg, rgba(4, 6, 15, 0.86), rgba(4, 6, 15, 0.55)); border-bottom: 1px solid var(--line); }
.hd-in { display: flex; align-items: center; gap: 14px; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--tx); text-decoration: none !important; flex: none; }
.logo img { width: 46px; height: 46px; filter: drop-shadow(0 0 10px rgba(99, 230, 255, 0.35)); }
.logo b { display: block; font-size: 16.5px; font-weight: 900; line-height: 1.2; }
.logo small { display: block; font-family: var(--ff-x); font-size: 11px; letter-spacing: 0.32em; color: var(--gold); }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a { display: flex; align-items: center; gap: 5px; color: var(--tx2); padding: 7px 9px; border-radius: 999px; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: 0.2s; }
.nav a img { width: 22px; height: 22px; }
.nav a:hover, .nav a[aria-current] { color: #fff; background: rgba(99, 140, 255, 0.16); }
.nav a[aria-current] { box-shadow: inset 0 0 0 1px var(--line2); }
.nav-all { display: none !important; }
.hud-iss { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tx2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; max-width: 210px; overflow: hidden; }
.hud-iss span { font-family: var(--ff-x); font-size: 11.5px; color: var(--cyan); letter-spacing: 0.12em; }
.hud-iss b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.hud-iss .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 1.6s infinite; flex: none; }
@keyframes blink { 50% { opacity: 0.3; } }
.snd-btn { border: 1px solid var(--line); background: transparent; border-radius: 50%; width: 38px; height: 38px; flex: none; }
.snd-btn .on { display: none; }
.snd-btn[aria-pressed='true'] .on { display: inline; }
.snd-btn[aria-pressed='true'] .off { display: none; }
.menu-btn { display: none; background: none; border: 0; width: 42px; height: 42px; padding: 10px 8px; flex: none; }
.menu-btn span { display: block; height: 2px; background: var(--tx); margin: 5px 0; border-radius: 2px; transition: 0.25s; }
/* パソコン：メニューは2段目に全部ならべる（項目が増えても重ならない。入りきらなければ折り返す。切れないように） */
@media (min-width: 1021px) {
  .hd-in { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 6px; }
  .hd-in .logo { height: 54px; }
  .hd-in .hud-iss { margin-left: auto; }
  .nav { order: 9; flex: 1 0 100%; margin: 0 -6px; justify-content: center; flex-wrap: wrap; overflow: visible; padding: 2px 0 8px; gap: 2px 4px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; padding: 6px 12px; font-size: 15px; }
  .nav a img { width: 20px; height: 20px; }
}
@media (min-width: 1021px) { .nav { gap: 2px; } .nav a { padding: 6px 10px; font-size: 14.5px; } .nav a img { display: none; } }
@media (max-width: 1020px) {
  .menu-btn { display: block; margin-left: auto; }
  .nav { position: fixed; inset: 66px 0 auto 0; flex-direction: column; align-items: stretch; background: rgba(6, 9, 22, 0.97); border-bottom: 1px solid var(--line); padding: 10px 16px 18px; gap: 4px; transform: translateY(-120%); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); max-height: calc(100vh - 66px); overflow: auto; }
  .nav.open { transform: none; }
  .nav a { font-size: 17.5px; padding: 12px 14px; }
  .nav-all { display: flex !important; }
  .hd-in .snd-btn { margin-left: 0; }
}
@media (max-width: 420px) { .logo b { font-size: 14.5px; } .logo img { width: 38px; height: 38px; } }

/* パンくず */
.bc { font-size: 14px; color: var(--mut); padding-top: 14px; }
.bc ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.bc li + li::before { content: '›'; margin-right: 4px; opacity: 0.6; }
.bc a { color: var(--tx2); }

/* ─── 共通の部品 ─── */
.sec { padding: 72px 0; position: relative; }
.sec-sm { padding: 40px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-x); font-size: 13px; letter-spacing: 0.32em; color: var(--gold); text-transform: uppercase; margin-bottom: 10px; }
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.h-xl { font-family: var(--ff-d); font-size: clamp(34px, 6vw, 76px); font-weight: 800; line-height: 1.15; letter-spacing: 0.02em; }
.h-l { font-size: clamp(26px, 3.6vw, 42px); }
.h-m { font-size: clamp(20px, 2.4vw, 26px); }
.lead { font-size: clamp(16.5px, 1.6vw, 18px); color: var(--tx2); max-width: 760px; }
.grad { background: linear-gradient(100deg, #fff 0%, #cfe0ff 30%, var(--gold) 60%, var(--pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 900; font-size: 16.5px; text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-gold { background: linear-gradient(180deg, #ffe39d, var(--gold2)); color: #2a1600; box-shadow: 0 8px 30px rgba(255, 182, 72, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn-gold:hover { box-shadow: 0 10px 40px rgba(255, 182, 72, 0.55); transform: translateY(-1px); }
.btn-blue { background: linear-gradient(180deg, #6fb0ff, #3a6dff); color: #fff; box-shadow: 0 8px 30px rgba(58, 109, 255, 0.4); }
.btn-line { background: rgba(255, 255, 255, 0.04); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line2); }
.btn-line:hover { background: rgba(255, 255, 255, 0.09); }
.btn-sm { padding: 8px 14px; font-size: 15px; }
.btn-lg { padding: 16px 30px; font-size: 17px; }
.btn img { width: 22px; height: 22px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(99, 140, 255, 0.14); color: #cfe0ff; box-shadow: inset 0 0 0 1px var(--line); }
.chip.gold { background: rgba(255, 210, 122, 0.14); color: var(--gold); }
.chip.green { background: rgba(93, 255, 176, 0.12); color: var(--green); }
.chip.pink { background: rgba(255, 122, 198, 0.14); color: var(--pink); }

/* ガラスのパネル（四隅に計器のカギ） */
.panel { position: relative; background: var(--panel); border-radius: var(--r); box-shadow: var(--glow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 24px; }
.panel.hud::before, .panel.hud::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--cyan); opacity: 0.7; pointer-events: none; }
.panel.hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r); }
.panel.hud::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r); }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g2, .g3 { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel { padding: 18px; } .sec { padding: 52px 0; } }

/* 写真（NASA）とクレジット */
.ph { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: #000; box-shadow: var(--sh); }
.ph img, .ph video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph figcaption, .cr { font-size: 13px; color: var(--mut); line-height: 1.5; }
.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); color: #c8d0ee; }
.cr a { color: var(--tx2); }

/* 3つの言語レベル（やさしい英語・ふつうの英語・日本語） */
.lang-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 14.5px; color: var(--tx2); }
.seg { display: inline-flex; background: rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { border: 0; background: none; padding: 6px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--tx2); }
.seg button[aria-pressed='true'] { background: linear-gradient(180deg, #6fb0ff, #3a6dff); color: #fff; }
.tri .ja, .tri .en-easy, .tri .en-std { display: block; }
.tri .en-easy, .tri .en-std { font-family: var(--ff); color: #dfe7ff; }
.tri .ja { color: var(--tx2); font-size: 0.94em; }
.tri .en-easy + .ja, .tri .en-std + .ja { margin-top: 4px; }
html[data-lv='easy'] .en-std, html[data-lv='std'] .en-easy { display: none !important; }
html[data-lang='ja'] .tri .en-easy, html[data-lang='ja'] .tri .en-std, html[data-lang='ja'] .say { display: none !important; }
html[data-lang='en'] .tri .ja { display: none !important; }
html[data-lang='ja'] .tri .ja { color: var(--tx); font-size: 1em; }
.say { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(99, 230, 255, 0.14); vertical-align: middle; margin-left: 6px; flex: none; transition: 0.2s; }
.say:hover { background: rgba(99, 230, 255, 0.3); transform: scale(1.08); }
.say img { width: 18px; height: 18px; }
.say.playing { animation: pulse 0.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(99, 230, 255, 0.18); } }

/* カード（コーナー入口） */
.card { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--panel); box-shadow: var(--glow); color: var(--tx); text-decoration: none !important; transform-style: preserve-3d; transition: box-shadow 0.3s; isolation: isolate; }
.card:hover { box-shadow: 0 0 0 1px var(--line2), 0 20px 60px rgba(60, 110, 255, 0.3); }
.card .cv { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #000; }
.card .cv img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.card:hover .cv img { transform: scale(1.06); }
.card .ic { position: absolute; left: 14px; bottom: -22px; width: 56px; height: 56px; z-index: 2; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); }
.card .bd { padding: 28px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card .bd small { font-family: var(--ff-x); font-size: 11.5px; letter-spacing: 0.24em; color: var(--gold); }
.card .bd b { font-size: 18px; line-height: 1.4; }
.card .bd span { font-size: 15px; color: var(--tx2); line-height: 1.6; }
.card .shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.12), transparent 40%); opacity: 0; transition: opacity 0.3s; z-index: 3; }
.card:hover .shine { opacity: 1; }
.card .tag { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* 入力 */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--tx2); font-weight: 700; }
.inp, select.inp { appearance: none; -webkit-appearance: none; background: rgba(5, 10, 28, 0.75); border: 1px solid var(--line2); border-radius: 14px; color: var(--tx); padding: 12px 14px; font-size: 17px; font-weight: 700; font-family: var(--ff); min-width: 0; }
select.inp { background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
.inp:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(99, 230, 255, 0.15); }
input[type='range'] { accent-color: var(--gold); width: 100%; }

/* 出てくる演出（core.js が .in をつける） */
[data-rv] { opacity: 0; transform: translateY(28px); }
[data-rv].in { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { [data-rv] { opacity: 1; transform: none; } }
.no-js [data-rv] { opacity: 1; transform: none; }

/* 宇宙ふくろう（右下） */
.owl-guide { position: fixed; right: 14px; bottom: 14px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.owl-btn { pointer-events: auto; width: 84px; height: 84px; border: 0; padding: 0; background: radial-gradient(circle, rgba(99, 230, 255, 0.25), transparent 65%); border-radius: 50%; }
.owl-btn img { width: 84px; height: 84px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-3deg); } }
.owl-bubble { pointer-events: auto; max-width: min(330px, calc(100vw - 30px)); background: rgba(10, 16, 38, 0.95); border: 1px solid var(--line2); border-radius: 18px 18px 6px 18px; padding: 14px 16px; font-size: 15.5px; line-height: 1.7; box-shadow: var(--sh); position: relative; }
.owl-bubble .x-close { position: absolute; top: 4px; right: 8px; background: none; border: 0; color: var(--mut); font-size: 18px; }
.owl-bubble .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.owl-fly { position: fixed; z-index: 55; width: 120px; height: 120px; pointer-events: auto; cursor: pointer; left: 0; top: 0; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)); }
@media (max-width: 600px) { .owl-btn, .owl-btn img { width: 64px; height: 64px; } .owl-fly { width: 84px; height: 84px; } }

/* トースト */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: rgba(10, 16, 38, 0.96); border: 1px solid var(--line2); padding: 10px 18px; border-radius: 999px; font-size: 15.5px; font-weight: 700; box-shadow: var(--sh); }

/* フッター */
.ft { position: relative; z-index: 1; margin-top: 80px; padding: 56px 0 120px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(4, 6, 15, 0.4), rgba(4, 6, 15, 0.95)); font-size: 15.5px; }
.ft-top { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.ft-lead { max-width: 560px; color: var(--tx2); margin: 0; }
.ft-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ft-cols h3 { font-size: 14.5px; color: var(--gold); letter-spacing: 0.1em; }
.ft-cols a { display: block; color: var(--tx2); padding: 3px 0; font-size: 15px; }
.ft-note { margin-top: 34px; font-size: 14px; color: var(--mut); line-height: 1.8; border-top: 1px solid var(--line); padding-top: 20px; }
.ft-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; }
.ft-c { font-size: 13.5px; color: var(--mut); }
@media (max-width: 900px) { .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ページの頭（各コーナー） */
.phero { position: relative; padding: 46px 0 34px; overflow: hidden; }
.phero .bgimg { position: absolute; inset: 0; z-index: -1; }
.phero .bgimg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.38; mask-image: linear-gradient(180deg, #000 30%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); }
.phero-in { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.phero-in > img { width: clamp(110px, 16vw, 190px); filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6)); }
.phero h1 { font-size: clamp(28px, 4.6vw, 52px); font-family: var(--ff-d); font-weight: 800; }
.phero .en-sub { font-family: var(--ff-x); font-size: 13.5px; letter-spacing: 0.3em; color: var(--cyan); margin-bottom: 8px; }
@media (max-width: 640px) { .phero-in { grid-template-columns: 1fr; } .phero-in > img { display: none; } }

/* 表 */
.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { color: var(--gold); font-size: 14px; font-weight: 700; }

/* 数字の計器 */
.meter { font-family: var(--ff-x); font-weight: 800; font-size: clamp(26px, 4vw, 44px); line-height: 1.1; color: #fff; text-shadow: 0 0 24px rgba(99, 230, 255, 0.45); }
.meter small { font-size: 0.42em; color: var(--tx2); margin-left: 4px; font-family: var(--ff); font-weight: 700; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat > span { font-size: 14px; color: var(--tx2); font-weight: 700; }

/* 下に出る固定のシェアボタン列など */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.x-btn { background: #000; color: #fff; box-shadow: inset 0 0 0 1px #444; }
.line-btn { background: #06c755; color: #fff; }

/* 音声プレーヤー（交信ライブなど） */
.wave { width: 100%; height: 64px; display: block; }
.sub-line { font-size: clamp(18px, 2.6vw, 28px); font-weight: 900; line-height: 1.45; min-height: 2.9em; }
.sub-line .ja { font-size: 0.62em; color: var(--tx2); font-weight: 700; display: block; margin-top: 6px; }

.hide { display: none !important; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mt1 { margin-top: 10px; } .mt2 { margin-top: 20px; } .mt3 { margin-top: 32px; } .mt4 { margin-top: 48px; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
hr.sep { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line2), transparent); margin: 40px 0; }
::selection { background: rgba(255, 210, 122, 0.35); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* ゲームのハブ */
.best-badge { position: absolute; right: 10px; top: 10px; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(4, 6, 15, 0.75); color: var(--gold); opacity: 0; }
.best-badge.on { opacity: 1; }
.game-page { padding-top: 26px; }
.game-page h1 { margin: 4px 0 18px; }

/* 上へもどるボタン（左下。右下はふくろう） */
.to-top { position: fixed; left: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 59; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(10, 16, 40, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--gold); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 210, 122, 0.18); opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: opacity 0.3s, transform 0.3s; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.to-top span { font-family: var(--ff-x); font-size: 10.5px; letter-spacing: 0.12em; line-height: 1; }
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), 0 0 26px rgba(255, 210, 122, 0.45); }
.to-top.fly svg { animation: tt-fly 0.9s cubic-bezier(0.5, 0, 0.75, 0) both; }
@keyframes tt-fly { 0% { transform: none; } 30% { transform: translateY(3px); } 100% { transform: translateY(-60px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .to-top.fly svg { animation: none; } }
@media print { .to-top { display: none; } }
/* スマホ：入力欄を 16px 以上に（iPhone でタップしたときに勝手に拡大されないように）・タップしやすく */
@media (max-width: 760px) {
  input:not([type='range']):not([type='checkbox']):not([type='radio']), select, textarea { font-size: max(16px, 1em); }
  .btn { min-height: 44px; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ═════ 2026-11-04 リニューアル：子どもから大人まで「大きく・わかりやすく・楽しく」 ═════
   ユーザー「文字が小さく情報だけがばーっと…全然見にくいし、楽しくない」
   ・本文は丸ゴシック 18px・行間ひろめ・1行を短く
   ・日本語を先に、英語は下の水色の吹き出しに
   ・長い文章は4行＋「つづきを読む」（core.js）
   ・カードは色つき・大きな見出し・ぽよんと動く */
h1, h2, h3, h4 { font-family: var(--ff-m); font-weight: 900; letter-spacing: 0.03em; }
main p { max-width: 42em; }
.center p, p.center, .center .lead { margin-inline: auto; }
.h-l { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.3; }
.h-m { font-size: clamp(23px, 2.8vw, 31px); }
.lead { font-size: clamp(18px, 1.9vw, 21px); color: var(--tx); line-height: 1.85; }
.eyebrow { font-size: 13px; letter-spacing: 0.22em; }
.muted { font-size: 0.95em; }
.panel { padding: 30px; background: rgba(20, 30, 64, 0.66); }
@media (max-width: 600px) { .panel { padding: 22px 18px; } body { font-size: 17px; } }

/* 文章：日本語 → 英語の吹き出し */
p.tri, div.tri { display: flex; flex-direction: column; gap: 12px; }
p.tri > .ja, div.tri > .ja { order: -1; color: var(--tx); font-size: 1em; }
p.tri > .en-easy, p.tri > .en-std, div.tri > .en-easy, div.tri > .en-std { padding: 10px 16px 12px; border-radius: 18px; background: rgba(99, 230, 255, 0.08); border-left: 5px solid var(--cyan); color: #e9f8ff; font-family: 'Zen Kaku Gothic New', var(--ff); font-weight: 500; font-size: 0.96em; line-height: 1.75; letter-spacing: 0.01em; }
p.tri > .en-easy::before, p.tri > .en-std::before, div.tri > .en-easy::before, div.tri > .en-std::before { content: '🔤 English'; display: block; font-family: var(--ff-m); font-size: 12.5px; font-weight: 900; letter-spacing: 0.08em; color: var(--cyan); margin-bottom: 2px; }
.tri .en-easy + .ja, .tri .en-std + .ja { margin-top: 0; }
.say { width: 34px; height: 34px; }
.say img { width: 22px; height: 22px; }

/* 長い文章のたたみ */
.clamp:not(.open) { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.more-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 14px; padding: 7px 18px; border: 0; border-radius: 999px; background: rgba(255, 210, 122, 0.16); color: var(--gold); font-family: var(--ff-m); font-size: 15px; font-weight: 900; box-shadow: inset 0 0 0 1.5px rgba(255, 210, 122, 0.45); transition: transform 0.2s, background 0.2s; }
.more-btn:hover { background: rgba(255, 210, 122, 0.26); transform: translateY(-1px); }
p.tri .more-btn, div.tri .more-btn { margin: -6px 0 2px; }

/* ボタン：大きく・まるく・ぽよん */
.btn { padding: 14px 28px; font-size: 17px; font-family: var(--ff-m); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.2s, background 0.2s; }
.btn:hover { transform: translateY(-2px) scale(1.04); }
.btn-sm { padding: 10px 18px; font-size: 15px; }
.btn-lg { padding: 18px 34px; font-size: 19px; }
.chip { font-size: 13.5px; padding: 4px 12px; }

/* カード：色つきの帯・大きな見出し */
.grid > .card:nth-child(6n + 1) { --c: #ffd27a; }
.grid > .card:nth-child(6n + 2) { --c: #63e6ff; }
.grid > .card:nth-child(6n + 3) { --c: #ff8fd0; }
.grid > .card:nth-child(6n + 4) { --c: #7dffb9; }
.grid > .card:nth-child(6n + 5) { --c: #b49bff; }
.grid > .card:nth-child(6n + 6) { --c: #ffa86b; }
.card { border-radius: 26px; background: linear-gradient(180deg, rgba(24, 34, 72, 0.85), rgba(14, 20, 46, 0.85)); }
.card .cv::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c, var(--gold)); }
.card .ic { width: 64px; height: 64px; bottom: -26px; }
.card .bd { padding: 34px 20px 22px; gap: 6px; }
.card .bd small { color: var(--c, var(--gold)); font-size: 11.5px; }
.card .bd b { font-size: 21px; line-height: 1.4; }
.card .bd span { font-size: 16px; line-height: 1.7; }
.card:hover { box-shadow: 0 0 0 2px var(--c, var(--line2)), 0 22px 60px rgba(60, 110, 255, 0.32); }

/* メニュー・頭・ふくろう */
.nav a { font-size: 15.5px; font-family: var(--ff-m); }
@media (min-width: 1021px) { .nav a { font-size: 15px; } .nav a img { width: 24px; height: 24px; } }
@media (min-width: 1021px) { .nav a { font-size: 14.5px; } }
.logo b { font-family: var(--ff-m); font-size: 16px; }
.phero h1 { font-size: clamp(32px, 5vw, 58px); line-height: 1.25; }
.phero .en-sub { font-size: 13px; }
.lang-bar { font-size: 15px; }
.seg button { font-size: 15px; padding: 7px 15px; font-family: var(--ff-m); }
.owl-bubble { font-size: 16.5px; line-height: 1.8; border-radius: 22px 22px 6px 22px; }
.tbl { font-size: 16px; }
.ft { font-size: 15.5px; }
/* スマホのヘッダー：ロゴの字が大きくなった分、はみ出さないように */
@media (max-width: 600px) { .logo b { font-size: 14px; } .logo small { font-size: 9px; letter-spacing: 0.2em; } .hd-in { gap: 8px; } }
@media (max-width: 520px) { .hd-in .hud-iss { display: none; } }
@media (max-width: 380px) { .logo b { font-size: 12.5px; } .logo img { width: 34px; height: 34px; } }
/* 2026-11-04 ユーザー「トップに上がるボタンとフクロウは反対にして」→ ふくろう左下・TOP右下 */
.owl-guide { right: auto; left: 14px; align-items: flex-start; }
.owl-bubble { border-radius: 22px 22px 22px 6px; }
.to-top { left: auto; right: 14px; }

/* フッター：X と原田英語.com のボタン・姉妹サイト（2026-11-04） */
.ft-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.ft-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-radius: 999px; font-weight: 800; font-size: 15.5px; text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s; }
.ft-btn:hover { transform: translateY(-2px); }
.ft-x { background: #000; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.ft-x span { font-size: 18px; }
.ft-home { background: linear-gradient(135deg, #ffd27a, #ffb347); color: #1a1205 !important; box-shadow: 0 6px 22px rgba(255, 190, 90, 0.25); }
.ft-sis-h { margin: 14px 0 4px; font-size: 13px; color: var(--tx2); font-weight: 700; letter-spacing: 0.06em; }
.ft-sis a { color: #cfe0ff; }
@media (max-width: 520px) { .ft-btn { width: 100%; justify-content: center; } }
/* 「はじめての人へ」の入口（初心者マーク）2026-11-04 */
.hd-start { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 14px 5px 10px; border-radius: 999px; background: #fff; color: #0a3b1f; font-family: var(--ff-m); font-weight: 900; font-size: 14px; white-space: nowrap; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.hd-start:hover { transform: translateY(-2px) scale(1.04); }
.hd-start img { width: 18px; height: 22px; }
@media (min-width: 1021px) { .hd-in .hd-start { margin-left: auto; } .hd-in .hud-iss { margin-left: 8px; } }
@media (max-width: 1020px) { .hd-start { margin-left: auto; } .hd-in .menu-btn { margin-left: 0; } }
@media (max-width: 600px) { .hd-start { padding: 5px 8px; } .hd-start span { display: none; } }
@media (max-width: 440px) { .hd-in { gap: 6px; } .logo { gap: 6px; } .logo img { width: 34px; height: 34px; } .logo b { font-size: 12.5px; } .logo small { display: none; } .snd-btn { width: 34px; height: 34px; } .menu-btn { width: 38px; padding: 10px 6px; } }
/* カードのアイコン：写真の下のふちにまたがるように（前はカードの一番下に置かれて半分切れていた）2026-11-04 */
.card .ic { position: relative; left: auto; bottom: auto; align-self: flex-start; flex: none; width: 64px; height: 64px; margin: -34px 0 -30px 18px; z-index: 2; border-radius: 50%; background: radial-gradient(circle, rgba(10, 16, 40, 0.9) 58%, transparent 60%); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); }
.card .bd { padding-top: 36px; }
.card .bd b { word-break: auto-phrase; }
.card .bd span { word-break: auto-phrase; }
/* 写真は「切らずに全部」見せる（宇宙飛行士の頭や足が切れないように）。すき間は同じ写真をぼかして埋め、説明は写真の下へ
   2026-11-04 ユーザー「宇宙飛行士の全身が見えたりとか…こだわってよ」 */
.ph { display: flex; flex-direction: column; isolation: isolate; background: #05070f; }
.ph::before { content: ''; position: absolute; inset: -40px; z-index: 0; background: var(--ph-bg, none) center / cover no-repeat; filter: blur(26px) saturate(1.3) brightness(0.68); transform: scale(1.1); pointer-events: none; }
.ph > img, .ph > video { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; height: auto; object-fit: contain; }
.ph figcaption { position: relative; z-index: 1; flex: none; left: auto; right: auto; bottom: auto; padding: 8px 14px 9px; background: rgba(4, 6, 15, 0.86); color: #d2daf4; font-size: 13.5px; line-height: 1.55; }
/* 幅400px以下（iPhone SE など）：ロゴの字を2行にして、メニューボタンがはみ出さないように */
@media (max-width: 400px) { .logo { min-width: 0; flex: 0 1 auto; } .logo b { font-size: 12px; line-height: 1.25; max-width: 11em; white-space: normal; word-break: auto-phrase; } }

/* フッターのリンク：一語だけ次の行に落ちないよう、文節で折り返す */
.ft-cols a { word-break: auto-phrase; text-wrap: pretty; line-height: 1.5; padding: 5px 0; }
.ft-cols h3 { word-break: auto-phrase; }
@media (max-width: 1300px) and (min-width: 561px) { .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; } }
@media (max-width: 560px) { .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } .ft-cols a { font-size: 14.5px; } }