/* /features（機能紹介）専用 CSS — change0916 Task 2.8。
   docs/features-page-mock.html の inline <style> を移したもの。共通ナビ・監修カードは
   static/css/public_pages.css（hx-pnav-* / hx-sup-*）、SSD 本体は static/css/sound_shift_decoder.css。
   フォントは head の <link>（@import は描画ブロックになるので使わない）。
   html の font-size は clamp(16px, 15px + 0.2vw, 19px)：高解像度でも本文が小さくなりすぎないようにする
   （Guide／学習の地図と同方式）。 */

:root {
  --bg: #081224;
  --surface: #111d35;
  --surface-2: #172640;
  --surface-3: #1d2e4b;
  --text: #f0f4fa;
  --muted: #9cafcc;
  --blue: #2b6bf2;
  --cyan: #00d4ff;
  --teal: #4cc9b0;
  --amber: #e8a84c;
  --violet: #b07af5;
  --coral: #ff6b5a;
  --gold: #ffd166;
  --line: rgba(156, 175, 204, .16);
  --border: var(--line);
  --surface2: var(--surface-2);
  --text-muted: var(--muted);
  --helix-blue: var(--blue);
  --helix-cyan: var(--cyan); /* sound_shift_decoder.css が参照する別名 */
  --shadow: 0 28px 80px rgba(0, 0, 0, .28);
  --radius: 24px;
}

* { box-sizing: border-box; }
/* キーボード利用者向け。フォーカス時だけ左上に現れる */
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; padding: 8px 12px; border-radius: 8px; background: #2b6bf2; color: #fff; font-size: .8rem; }
.skip-link:focus { left: 12px; }
html { scroll-behavior: smooth; font-size: clamp(16px, 15px + 0.2vw, 19px); } /* 高解像度でも小さくなりすぎない: rem 全体を画面幅で 16→19px に（Guide／学習の地図と同方式） */
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 4%, rgba(43,107,242,.17), transparent 27rem),
    radial-gradient(circle at 12% 32%, rgba(0,212,255,.07), transparent 25rem),
    var(--bg);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  /* 高解像度ブラウザで本文が小さくなりすぎないように（最小値はモバイルのまま） */
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 104px 0; position: relative; }
.eyebrow {
  color: var(--cyan); font-family: Outfit, sans-serif; font-weight: 700;
  letter-spacing: .18em; font-size: .76rem; text-transform: uppercase;
}
.section-title {
  font-family: Outfit, "Noto Sans JP", sans-serif; font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.16; letter-spacing: -.035em; margin: 12px 0 18px;
}
.section-lead { max-width: 700px; color: var(--muted); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.1rem); margin: 0; }
.section.compact { padding: 64px 0; }
.section-line { display: block; }
.mobile-break { display: none; }
.muted { color: var(--muted); }
.mono { font-family: "JetBrains Mono", monospace; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .74rem;
  background: rgba(255,255,255,.025);
}
.pill::before { content: ""; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 12px var(--cyan); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px;
  padding: 0 20px; border-radius: 12px; border: 1px solid var(--line); font-weight: 700; font-size: .85rem;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--blue), #4f8cff); border-color: transparent; box-shadow: 0 12px 28px rgba(43,107,242,.25); }
.btn-secondary { background: rgba(255,255,255,.035); }
.btn-secondary:hover { border-color: rgba(0,212,255,.45); }

/* Hero */
.hero { padding: 88px 0 82px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 64px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 {
  font-family: Outfit, "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: clamp(2.65rem, 4.55vw, 4.2rem); line-height: 1.08; letter-spacing: -.052em; margin: 18px 0 28px;
}
.hero-line { display: block; white-space: nowrap; }
.hero h1 .hear { color: var(--cyan); }
.hero h1 .speak { color: #c69bff; }
.hero-copy { color: #b8c5d9; max-width: 580px; font-size: 1.05rem; }
.hero-copy strong { color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 18px; }
.hero-note { color: #788ba9; font-size: .74rem; }
/* 主 CTA（/register）の直下: Google ログインが有効なときだけ app.py の context_processor 経由で出る */
.hero-google { margin: -6px 0 14px; color: #8fa3be; font-size: .74rem; }
/* 「音シフト」の定義。SSD デモより前（DOM 順）に置き、語を使う前に説明する */
.shift-define { max-width: 580px; margin-top: 26px; padding: 15px 18px; border: 1px solid rgba(0,212,255,.22); border-left: 3px solid var(--cyan); border-radius: 0 14px 14px 0; background: rgba(0,212,255,.05); }
.shift-define .eyebrow { font-size: .62rem; }
.shift-define p { margin: 6px 0 0; color: #b8c5d9; font-size: .8rem; line-height: 1.8; }
.shift-define strong { color: var(--text); }

.ssd-shell {
  position: relative; width: 100%; min-width: 0; padding: 1px; border-radius: 30px;
  background: linear-gradient(145deg, rgba(0,212,255,.75), rgba(176,122,245,.35), rgba(255,255,255,.08));
  box-shadow: var(--shadow);
}
.ssd-shell::before {
  content: ""; position: absolute; inset: 10% 14%; background: rgba(0,212,255,.16);
  filter: blur(60px); z-index: -1;
}
.ssd-card { background: linear-gradient(155deg, rgba(17,29,53,.98), rgba(10,21,42,.98)); border-radius: 29px; padding: 20px; overflow: hidden; }
.window-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 7px; height: 7px; border-radius: 50%; background: #354866; }
.window-label { font: 600 .68rem Outfit, sans-serif; color: #69809f; letter-spacing: .12em; }
.ssd-showcase-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 13px; }
.ssd-showcase-head strong { display: block; font: 700 .82rem Outfit, "Noto Sans JP", sans-serif; }
.ssd-showcase-head p { margin: 3px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.55; }
.ssd-coverage { flex: 0 0 auto; padding: 5px 9px; border: 1px solid rgba(0,212,255,.24); border-radius: 999px; color: var(--cyan); background: rgba(0,212,255,.06); font: 700 .55rem Outfit, sans-serif; letter-spacing: .08em; }
.ssd-example-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 0 0 11px; }
.ssd-example-tab { min-width: 0; min-height: 44px; padding: 7px 5px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; color: #8295b1; background: rgba(255,255,255,.022); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.ssd-example-tab span { display: block; color: #637995; font: 700 .47rem Outfit, sans-serif; letter-spacing: .08em; }
.ssd-example-tab strong { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: .58rem; white-space: nowrap; }
.ssd-example-tab:hover { color: var(--text); border-color: rgba(0,212,255,.25); }
.ssd-example-tab[aria-selected="true"] { color: var(--text); border-color: rgba(0,212,255,.48); background: rgba(43,107,242,.14); }
.ssd-example-tab[aria-selected="true"] span { color: var(--cyan); }
.ssd-card .stage { padding: 14px 8px 10px; background: rgba(5,15,31,.62); border-color: rgba(156,175,204,.14); }
.ssd-card .l2-btn { background: rgba(255,255,255,.025); }
.ssd-card .tog-track, .ssd-card .lb { background: rgba(255,255,255,.025); }
.ssd-howto { margin: 10px 2px 0; color: #7e91ad; font-size: .56rem; text-align: center; }
.ssd-demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 2px 0; color: #8299b7; font-size: .58rem; }
.ssd-demo-controls > span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--cyan); }
.ssd-demo-controls button { flex-shrink: 0; padding: 5px 9px; border: 1px solid rgba(0,212,255,.22); border-radius: 7px; color: #a6dbea; background: rgba(0,212,255,.05); cursor: pointer; font-size: .58rem; }
.ssd-demo-controls button:hover { border-color: var(--cyan); color: var(--text); }
.ssd-demo-controls button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.pattern-index { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 13px; }
.pattern-index span { display: flex; align-items: center; min-width: 0; padding: 5px 7px; border: 1px solid rgba(255,255,255,.055); border-radius: 7px; color: #8da0bb; background: rgba(255,255,255,.022); font-size: .49rem; line-height: 1.3; }
.pattern-index i { width: 5px; height: 5px; flex: 0 0 auto; margin-right: 5px; border-radius: 50%; background: var(--pattern); }

/* Lesson-first positioning */
.lesson-first-panel { padding: 44px; border: 1px solid rgba(0,212,255,.2); border-radius: 30px; background: radial-gradient(circle at 50% 45%,rgba(43,107,242,.16),transparent 25rem),linear-gradient(145deg,rgba(17,29,53,.9),rgba(9,21,42,.86)); box-shadow: var(--shadow); }
.lesson-flow { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1.08fr 32px 1fr; align-items: stretch; margin-top: 38px; }
.lesson-phase { min-width: 0; display: flex; flex-direction: column; padding: 22px 19px; border: 1px solid var(--line); border-radius: 18px; background: rgba(5,15,30,.5); }
.lesson-phase small { color: var(--cyan); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.lesson-phase strong { display: block; margin-top: 8px; font-size: .9rem; line-height: 1.5; }
.lesson-phase p { color: var(--muted); font-size: .69rem; margin: 7px 0 0; }
.lesson-phase .feature-tags { margin-top: auto; padding-top: 12px; }
.lesson-main { border-color: rgba(255,209,102,.4); background: linear-gradient(145deg,rgba(255,209,102,.12),rgba(43,107,242,.12)); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.lesson-main small { color: var(--gold); }
.lesson-arrow { display: grid; place-items: center; color: #607896; font-size: 1.05rem; }
.lesson-rhythm { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; color: #9db0c8; font-size: .68rem; }
.lesson-rhythm span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); }
.lesson-rhythm a { padding: 6px 12px; border: 1px solid rgba(0,212,255,.3); border-radius: 999px; color: var(--cyan); font-weight: 600; }
.service-disclaimer { margin: 19px 0 0; color: #6f84a1; font-size: .64rem; text-align: center; }
.reading-boost { margin-top: 36px; padding-top: 34px; border-top: 1px solid rgba(0,212,255,.14); }
.reading-boost-head { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 36px; align-items: end; }
.reading-boost-head > * { min-width: 0; }
.reading-kicker { color: var(--teal); font: 700 .6rem Outfit,sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.reading-boost h3 { margin: 8px 0 0; font: 700 clamp(1.55rem,3.4vw,2.25rem)/1.38 Outfit,"Noto Sans JP",sans-serif; }
.reading-boost-head p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.85; }
.reading-flow { display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr); align-items: stretch; margin-top: 24px; }
.reading-step { min-width: 0; padding: 18px 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(5,15,30,.42); }
.reading-step small { display: block; margin-bottom: 6px; color: var(--step-color); font: 700 .53rem Outfit,sans-serif; letter-spacing: .1em; }
.reading-step strong { display: block; margin-bottom: 6px; font-size: .76rem; line-height: 1.5; }
.reading-step p { margin: 0; color: #8fa3be; font-size: .63rem; line-height: 1.7; }
.reading-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #627997; text-align: center; }
.reading-arrow span { font-size: .52rem; line-height: 1.35; }
.reading-arrow b { color: var(--cyan); font-size: .95rem; font-weight: 400; }
.reading-summary { margin: 20px 0 0; padding: 13px 16px; border-left: 2px solid var(--teal); color: #aebdd0; background: rgba(45,212,191,.035); font-size: .69rem; line-height: 1.75; }

/* Pronunciation support (roadmap cards only) */
.pronunciation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 30px; }
.pronunciation-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: rgba(5,15,30,.44); }
.roadmap-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font: 800 .54rem Outfit,sans-serif; letter-spacing: .1em; }
.status-current { color: #06241f; background: var(--teal); }
.status-preparing { color: #302207; background: var(--gold); }
.status-concept { color: #221431; background: #caa7f7; }
.pronunciation-card h3 { margin: 13px 0 7px; font-size: .88rem; }
.pronunciation-card p { margin: 0; color: var(--muted); font-size: .68rem; }

/* Cards and story */
.problem-grid, .answer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.problem-card, .answer-card, .feature-card {
  border: 1px solid var(--line); border-radius: 20px; background: rgba(17,29,53,.64); padding: 26px;
}
.problem-num { font: 700 .72rem Outfit, sans-serif; color: var(--coral); letter-spacing: .12em; }
.problem-card h3, .answer-card h3 { font: 700 1.02rem Outfit, "Noto Sans JP", sans-serif; margin: 10px 0; }
.problem-card p, .answer-card p { color: var(--muted); font-size: .83rem; margin: 0; }
.bridge-copy { text-align: center; margin: 68px auto 0; font: 700 clamp(1.35rem, 3vw, 2rem) Outfit, "Noto Sans JP", sans-serif; }
.bridge-copy span { color: var(--cyan); }
.answer-card { position: relative; overflow: hidden; }
.answer-card::after { content: ""; position: absolute; width: 120px; height: 120px; right: -60px; top: -60px; border-radius: 50%; background: var(--card-accent); opacity: .09; }
.answer-icon { font: 800 1.4rem Outfit, sans-serif; color: var(--card-accent); }

.core-panel { margin-top: 46px; display: grid; grid-template-columns: .88fr 1.12fr; gap: 42px; align-items: center; padding: 44px; border: 1px solid rgba(0,212,255,.22); border-radius: 30px; background: linear-gradient(135deg, rgba(0,212,255,.06), rgba(176,122,245,.055), rgba(17,29,53,.8)); }
.core-panel h3 { font: 800 clamp(1.8rem, 4vw, 3rem) Outfit, "Noto Sans JP", sans-serif; line-height: 1.2; margin: 14px 0 18px; }
.core-panel p { color: var(--muted); }
.shift-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 26px; }
.shift-item { display: flex; gap: 10px; align-items: center; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.1); font-size: .75rem; }
.shift-item i { width: 9px; height: 24px; border-radius: 5px; }
.mini-detail { display: grid; gap: 12px; }
.mini-line { padding: 16px; border-radius: 15px; background: rgba(7,16,32,.7); border: 1px solid var(--line); }
.mini-line small { display: block; color: #7185a4; font-size: .64rem; margin-bottom: 5px; }
.mini-line strong { font: 600 .92rem "JetBrains Mono", monospace; }
.explain-pop { border-left: 3px solid var(--amber); background: rgba(232,168,76,.08); padding: 16px; border-radius: 0 13px 13px 0; color: #d8c5a2; font-size: .75rem; }

/* Loop */
.loop-line { position: absolute; top: 29px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, var(--coral), var(--cyan), var(--violet), var(--gold)); opacity: .5; }
.loop { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; margin-top: 52px; }
.loop-step { position: relative; z-index: 1; }
.loop-dot { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 18px; font: 800 .9rem Outfit, sans-serif; color: #071225; background: var(--step); box-shadow: 0 12px 30px color-mix(in srgb, var(--step) 24%, transparent); }
.loop-step h3 { font: 700 1rem Outfit, "Noto Sans JP", sans-serif; margin: 0 0 8px; }
.loop-step p { color: var(--muted); font-size: .73rem; margin: 0 0 12px; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.feature-tags span { font-size: .58rem; color: #8296b3; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.055); padding: 4px 7px; border-radius: 999px; }

/* One foundation and six connected experiences */
.portfolio-foundation { margin-top: 40px; padding: 28px 30px; border: 1px solid rgba(45,212,191,.26); border-radius: 24px; background: radial-gradient(circle at 92% 20%,rgba(45,212,191,.12),transparent 22rem),linear-gradient(145deg,rgba(19,40,61,.9),rgba(10,24,44,.84)); box-shadow: 0 22px 54px rgba(0,0,0,.16); }
.portfolio-head { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr); gap: 30px; align-items: center; }
.portfolio-head > * { min-width: 0; }
.portfolio-facets { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 24px; }
.facet { min-width: 0; padding: 18px 19px; border: 1px solid var(--line); border-radius: 15px; background: rgba(4,13,28,.42); }
.facet small { display: block; color: var(--teal); font: 700 .55rem Outfit,sans-serif; letter-spacing: .12em; }
.facet strong { display: block; margin: 7px 0 9px; font-size: .86rem; line-height: 1.5; }
.facet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: #a7b7cb; font-size: .68rem; line-height: 1.7; }
.facet li { position: relative; padding-left: 16px; }
.facet li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.facet li b { color: #d8e2ef; font-weight: 600; }
.facet-note { margin: 10px 0 0; color: #7f93ae; font-size: .6rem; line-height: 1.7; }
.portfolio-title { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.portfolio-number { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #06241f; background: var(--teal); box-shadow: 0 10px 28px rgba(45,212,191,.2); font: 800 .78rem Outfit,sans-serif; }
.portfolio-kicker { color: var(--teal); font: 700 .57rem Outfit,sans-serif; letter-spacing: .13em; }
.portfolio-title h3 { margin: 3px 0 0; font: 700 1.25rem Outfit,"Noto Sans JP",sans-serif; }
.portfolio-copy { margin: 18px 0 0; color: #aebdd0; font-size: .74rem; line-height: 1.85; }
.portfolio-map { padding: 18px; border: 1px solid rgba(255,255,255,.07); border-radius: 17px; background: rgba(4,13,28,.46); }
.portfolio-inputs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.portfolio-inputs span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: #8fa3be; background: rgba(255,255,255,.025); font-size: .54rem; }
.portfolio-down { margin: 7px 0; color: #627997; text-align: center; font-size: .85rem; }
.portfolio-core { padding: 13px; border: 1px solid rgba(45,212,191,.3); border-radius: 13px; color: #e9fbf7; background: rgba(45,212,191,.085); text-align: center; }
.portfolio-core strong { display: block; font: 700 .82rem Outfit,"Noto Sans JP",sans-serif; }
.portfolio-core small { display: block; margin-top: 3px; color: #8fbeb3; font-size: .55rem; }
.portfolio-fields { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 8px; }
.portfolio-fields span { padding: 5px 3px; border-radius: 7px; color: #90a6bf; background: rgba(255,255,255,.035); font-size: .51rem; text-align: center; }
.portfolio-handoff { margin: 20px auto 0; color: #89a0bc; font-size: .65rem; text-align: center; }
.portfolio-handoff span { color: var(--teal); }
.life-summary { position: relative; display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-top: 44px; }
.life-summary::before { content: ""; position: absolute; left: 7%; right: 7%; top: 28px; height: 1px; background: linear-gradient(90deg,var(--coral),var(--cyan),var(--violet),var(--teal),var(--amber),var(--gold)); opacity: .42; }
.life-node { position: relative; z-index: 1; min-height: 142px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; }
.life-node > span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--node); color: #071426; box-shadow: 0 10px 28px color-mix(in srgb,var(--node) 24%,transparent); font: 800 .78rem Outfit,sans-serif; }
.life-node strong { margin-top: 15px; font: 700 .77rem Outfit,"Noto Sans JP",sans-serif; }
.life-node small { color: var(--muted); margin-top: 3px; font-size: .6rem; }
.cycle-return { margin: 18px auto 0; width: fit-content; max-width: 100%; padding: 10px 16px; border: 1px solid rgba(255,209,102,.18); border-radius: 999px; color: #aebcd0; background: rgba(255,209,102,.045); font-size: .67rem; text-align: center; }
.cycle-return span { color: var(--gold); font-size: 1rem; margin-right: 5px; }

.phase-label { display: flex; align-items: center; gap: 12px; margin: 52px 0 15px; }
.phase-label span { color: var(--cyan); font: 700 .62rem Outfit,sans-serif; letter-spacing: .14em; }
.phase-label strong { font-size: .78rem; }
.phase-label::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.product-grid { display: grid; gap: 16px; }
.product-grid.two { grid-template-columns: repeat(2,1fr); }
.product-grid.three { grid-template-columns: repeat(3,1fr); }
.product-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 27px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg,rgba(23,38,64,.82),rgba(13,27,50,.76)); overflow: hidden; }
.product-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--product); }
.product-card::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -100px; top: -100px; background: var(--product); opacity: .055; pointer-events: none; }
.product-head { display: flex; align-items: center; gap: 13px; }
.product-number { width: 41px; height: 41px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #071426; background: var(--product); font: 800 .72rem Outfit,sans-serif; }
.role-label { color: var(--product); font: 700 .58rem Outfit,sans-serif; letter-spacing: .1em; }
.product-head h3 { margin: 2px 0 0; font: 700 1.15rem Outfit,"Noto Sans JP",sans-serif; }
.product-copy { min-height: 50px; color: #aebdd0; font-size: .75rem; margin: 18px 0; }
.mini-product-ui { min-height: 154px; border: 1px solid rgba(255,255,255,.065); border-radius: 15px; padding: 14px; background: rgba(4,13,28,.5); }
.video-frame { height: 103px; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 11px; overflow: hidden; background: radial-gradient(circle at 70% 20%,rgba(255,107,90,.25),transparent 35%),linear-gradient(145deg,#263550,#111a2b); }
.video-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 42%,rgba(3,9,19,.86)); }
.play-mark { width: 33px; height: 33px; display: grid; place-items: center; padding-left: 2px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(0,0,0,.28); font-size: .7rem; }
.video-caption { position: absolute; z-index: 1; left: 11px; right: 11px; bottom: 9px; display: grid; }
.video-caption span { color: var(--coral); font: 700 .52rem Outfit,sans-serif; }
.video-caption strong { font: 600 .65rem "JetBrains Mono",monospace; }
.clip-actions, .lab-controls { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.clip-actions span, .lab-controls span { padding: 4px 7px; border-radius: 7px; color: #93a7c2; background: rgba(255,255,255,.035); font-size: .53rem; }
.input-line { padding: 10px; color: #c5d2e3; border: 1px solid var(--line); border-radius: 9px; font-size: .65rem; }
.shift-line { margin: 12px 0; font: 600 .75rem "JetBrains Mono",monospace; }
.capability-list { list-style: none; margin: 18px 0 18px; padding: 0; display: grid; gap: 7px; color: #a7b7cb; font-size: .68rem; }
.capability-list li { position: relative; padding-left: 17px; }
.capability-list li::before { content: "✓"; position: absolute; left: 0; color: var(--product); font-weight: 700; }
/* 同じ段のカードは高さが揃うので、受け渡し帯は常にカード最下部へ（margin-top:auto） */
.handoff { margin: auto -27px -27px; padding: 12px 27px; border-top: 1px solid var(--line); background: rgba(0,0,0,.1); color: #8599b4; font-size: .6rem; }
.handoff strong, .handoff span { color: var(--product); }
.phase-connector { height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cyan); }
.phase-connector span { line-height: 1; font-size: 1.1rem; }
.phase-connector small { margin-top: 5px; color: #667d9c; font-size: .57rem; }

.training-hub { padding: 34px; border: 1px solid rgba(176,122,245,.28); border-radius: 26px; background: radial-gradient(circle at 92% 5%,rgba(176,122,245,.15),transparent 26rem),linear-gradient(145deg,rgba(25,39,67,.94),rgba(13,26,50,.9)); box-shadow: 0 28px 70px rgba(0,0,0,.18); }
.training-head { display: flex; justify-content: space-between; gap: 30px; align-items: start; }
.training-head h3 { font: 800 1.8rem Outfit,"Noto Sans JP",sans-serif; margin: 4px 0 8px; }
.training-head p { max-width: 680px; color: #aebdd0; font-size: .76rem; margin: 0; }
.auto-badge { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(176,122,245,.25); color: #ceb1f5; background: rgba(176,122,245,.08); font-size: .61rem; }
.training-route { display: grid; grid-template-columns: .74fr 42px 1.26fr; align-items: stretch; margin-top: 28px; }
.training-stage { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: rgba(5,15,30,.38); }
.stage-kicker { display: block; color: #8397b2; font: 700 .57rem Outfit,sans-serif; letter-spacing: .1em; }
.training-stage > strong { display: block; margin-top: 7px; font-size: .92rem; }
.training-stage > p { color: #91a3bb; font-size: .66rem; margin: 8px 0 0; }
.stage-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.stage-tags span { padding: 4px 7px; border-radius: 999px; color: #8fa3be; background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: .52rem; }
.route-arrow { display: grid; place-items: center; color: var(--violet); font-size: 1.2rem; }
.main-lanes { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 14px; }
.skill-lane { padding: 15px; border-radius: 13px; border: 1px solid var(--line); }
.skill-lane > span { display: block; font: 700 .53rem Outfit,sans-serif; letter-spacing: .12em; }
.skill-lane b { display: block; margin: 4px 0; font-size: .78rem; }
.skill-lane small { display: block; color: #8ea1ba; font-size: .58rem; }
.speak-lane { background: rgba(176,122,245,.075); }
.speak-lane > span { color: #ca9df9; }
.listen-lane { background: rgba(0,212,255,.06); }
.listen-lane > span { color: var(--cyan); }
.source-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; padding: 12px 14px; border-radius: 12px; background: rgba(5,15,30,.35); color: #8296b1; font-size: .58rem; }
.source-strip > span { color: var(--violet); font-weight: 700; }
.source-strip b { color: #aebdd0; font-weight: 500; }
.source-strip i { color: #536b8b; font-style: normal; }
.lounge-modes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.lounge-modes span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: #a6b6ca; font-size: .58rem; }
.lounge-modes em { margin-left: auto; color: var(--violet); font-size: .6rem; font-style: normal; }

.product-card.compact { padding: 23px; }
.product-card.compact .product-number { width: 36px; height: 36px; }
.product-card.compact .product-head h3 { font-size: 1rem; }
.product-card.compact .product-copy { min-height: 68px; }
.product-card.compact .handoff { margin: auto -23px -23px; padding: 11px 23px; }
.deck-modes { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 5px; border-radius: 11px; background: rgba(4,13,28,.5); }
.deck-modes span { text-align: center; padding: 7px 3px; border-radius: 8px; color: #7288a5; font-size: .53rem; word-break: keep-all; }
.deck-modes .active { color: #06221e; background: var(--teal); font-weight: 700; }
.cheat-ui, .atelier-ui { min-height: 115px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(4,13,28,.5); }
.cheat-ui { display: grid; }
.cheat-type { color: var(--amber); font: 700 .49rem Outfit,sans-serif; letter-spacing: .1em; }
.cheat-ui > strong { font: 600 1rem "JetBrains Mono",monospace; }
.cheat-ui > small { color: #8fa2bc; font-size: .58rem; }
.cheat-ui > div { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; margin-top: 9px; }
.cheat-ui button { padding: 6px 3px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.03); color: #95a8c1; font-size: .49rem; }
.atelier-ui small { color: #7d91ad; font-size: .52rem; }
.atelier-ui p { margin: 3px 0 10px; color: #b8c5d7; font-size: .6rem; }
.atelier-ui span { display: block; color: var(--gold); font: 700 .48rem Outfit,sans-serif; letter-spacing: .1em; }
.atelier-ui strong { display: block; margin-top: 3px; font: 600 .67rem "JetBrains Mono",monospace; }
.return-panel { display: grid; grid-template-columns: 52px 1fr; gap: 17px; align-items: center; margin-top: 18px; padding: 22px 25px; border: 1px solid rgba(255,209,102,.2); border-radius: 18px; background: linear-gradient(135deg,rgba(255,209,102,.07),rgba(43,107,242,.05)); }
.return-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #071426; background: var(--gold); font-size: 1.3rem; }
.return-panel strong { font-size: .84rem; }
.return-panel p { color: #94a7bf; font-size: .66rem; margin: 4px 0 0; }

/* Progress */
.weapon-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; margin-top: 46px; }
.axis-cards { display: grid; gap: 12px; margin: 28px 0; }
.axis-card { display: grid; grid-template-columns: 40px 1fr; gap: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.axis-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-weight: 800; background: rgba(43,107,242,.15); color: #76a2ff; }
.axis-card:last-child .axis-icon { background: rgba(0,212,255,.12); color: var(--cyan); }
.axis-card strong { display: block; font-size: .85rem; }
.axis-card small { color: var(--muted); }
.matrix-shell { padding: 30px 30px 26px 46px; border: 1px solid var(--line); border-radius: 24px; background: rgba(17,29,53,.75); position: relative; }
.matrix { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; aspect-ratio: 1; }
.cell { border-radius: 9px; background: rgba(43,107,242,.08); border: 1px solid rgba(43,107,242,.15); }
.cell:nth-child(-n+6) { background: rgba(0,212,255,.09); }
.cell.weaponized { display: grid; place-items: center; color: #071225; font-size: 1.4rem; background: linear-gradient(145deg, #ffe39b, var(--gold)); border-color: #ffe7ad; box-shadow: 0 0 30px rgba(255,209,102,.32); }
.axis-x, .axis-y { position: absolute; color: #788ba8; font-size: .65rem; letter-spacing: .08em; }
.axis-x { bottom: 7px; left: 48%; transform: translateX(-50%); }
.axis-y { left: 7px; top: 48%; transform: rotate(-90deg) translateY(-50%); transform-origin: left top; }
.axis-demo-note { margin: 12px 0 0; color: #7e91ad; font-size: .66rem; text-align: center; }

/* Main features index (7 = mobile bottom tabs) */
.feature-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.feature-index a { display: block; min-width: 0; padding: 18px 18px 16px; border: 1px solid var(--line); border-left: 3px solid var(--fi); border-radius: 15px; background: rgba(17,29,53,.58); transition: border-color .2s ease, transform .2s ease; }
.feature-index a:hover { transform: translateY(-2px); border-color: rgba(0,212,255,.35); }
.feature-index small { display: block; color: var(--fi); font: 700 .55rem Outfit, sans-serif; letter-spacing: .12em; }
.feature-index strong { display: block; margin: 5px 0 6px; font: 700 .9rem Outfit, "Noto Sans JP", sans-serif; }
.feature-index p { margin: 0; color: #a9b8cc; font-size: .68rem; line-height: 1.7; }
.feature-index em { display: block; margin-top: 9px; color: var(--cyan); font-size: .62rem; font-style: normal; }

/* FAQ（サイトフッターは partials/_site_footer.html が自己完結の style を持つ） */
.faq { max-width: 820px; margin: 44px auto 0; display: grid; gap: 10px; }
details { border: 1px solid var(--line); border-radius: 15px; background: rgba(17,29,53,.55); padding: 0 20px; }
summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: .85rem; }
details p { color: var(--muted); font-size: .76rem; margin: 0 0 20px; }
.final { padding: 86px 0 100px; text-align: center; }
.final-card { padding: 62px 24px; border-radius: 30px; background: linear-gradient(135deg, rgba(43,107,242,.22), rgba(0,212,255,.08), rgba(176,122,245,.13)); border: 1px solid rgba(0,212,255,.2); }
.final h2 { font: 800 clamp(2rem, 5vw, 3.7rem) Outfit, "Noto Sans JP", sans-serif; line-height: 1.15; margin: 0 0 16px; }

@media (max-width: 900px) {
  .hero-grid, .core-panel, .weapon-wrap { grid-template-columns: 1fr; }
  .hero-grid { gap: 46px; }
  .lesson-flow { grid-template-columns: 1fr; gap: 9px; }
  .lesson-arrow { min-height: 26px; transform: rotate(90deg); }
  .reading-boost-head, .portfolio-head, .portfolio-facets { grid-template-columns: 1fr; }
  .reading-flow { grid-template-columns: 1fr; gap: 8px; }
  .reading-arrow { min-height: 42px; gap: 2px; }
  .reading-arrow b { transform: rotate(90deg); }
  .pronunciation-grid { grid-template-columns: 1fr; }
  .problem-grid, .answer-grid { grid-template-columns: 1fr; }
  .life-summary { grid-template-columns: repeat(3,1fr); row-gap: 20px; }
  .life-summary::before { display: none; }
  .loop { grid-template-columns: repeat(2, 1fr); }
  .loop-line { display: none; }
  .product-grid.three { grid-template-columns: 1fr; }
  .product-card.compact .product-copy { min-height: auto; }
  .training-route { grid-template-columns: 1fr; gap: 9px; }
  .route-arrow { transform: rotate(90deg); min-height: 28px; }
  .feature-index { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .wrap { width: min(100% - 28px, 1160px); }
  .section { padding: 76px 0; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: clamp(1.95rem,10.4vw,3rem); letter-spacing: -.06em; }
  .section-title { font-size: clamp(1.7rem,8vw,2.5rem); }
  .mobile-break { display: inline; }
  .ssd-card { padding: 18px; }
  .ssd-showcase-head { display: grid; gap: 8px; }
  .ssd-coverage { width: fit-content; }
  .ssd-example-tabs { grid-template-columns: repeat(2,1fr); }
  .lesson-first-panel { padding: 26px 19px; }
  .shift-define { margin-top: 20px; }
  .reading-boost { margin-top: 30px; padding-top: 28px; }
  .reading-boost h3 { font-size: 1.42rem; }
  .portfolio-foundation { padding: 22px 18px; }
  .portfolio-fields { grid-template-columns: repeat(2,1fr); }
  .pattern-index { grid-template-columns: repeat(2,1fr); }
  .core-panel { padding: 26px 20px; }
  .life-summary { grid-template-columns: repeat(2,1fr); }
  .life-node { min-height: 125px; }
  .cycle-return { border-radius: 16px; }
  .product-grid.two, .shift-list, .loop, .feature-index { grid-template-columns: 1fr; }
  .phase-label { align-items: flex-start; flex-wrap: wrap; }
  .phase-label::after { flex-basis: 100%; }
  .training-hub { padding: 24px 18px; }
  .training-head { display: grid; gap: 14px; }
  .auto-badge { width: fit-content; }
  .main-lanes { grid-template-columns: 1fr; }
  .source-strip { align-items: flex-start; }
  .source-strip i { display: none; }
  .lounge-modes em { width: 100%; margin: 4px 0 0; }
  .return-panel { grid-template-columns: 1fr; }
  .matrix-shell { padding: 23px 23px 25px 38px; }
  .hero-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}