/* =====================================================================
   UI — シュッと・読みやすく・段階別がひと目でわかる（最後に読み込む）
   白地 × 濃紺の文字 × コーラル（行動）× ティール（補助）、段階ごとの淡い色
   ===================================================================== */
:root{
  --bg:#ffffff; --bg2:#f5f7fb; --card:#ffffff; --ink:#152038; --sub:#4f5a73; --faint:#8a93a8; --soft:#f1f4f9; --line:#e4e8f0;
  --navy:#152038; --coral:#ef5b3f; --coral2:#d9472c; --teal:#13897b;
  --serif:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif; --disp:var(--serif);
  --r:16px; --r-s:10px; --sh:0 1px 2px #1520380a; --sh-h:0 12px 32px -14px #15203833;
  --c-chu:#13897b; --c-chu-bg:#e3f5f2; --c-kou:#2f6fe0; --c-kou-bg:#e7efff; --c-dai:#7a4fd6; --c-dai-bg:#f0eaff;
  --c-sha:#1f2f57; --c-sha-bg:#e8ecf5; --c-yari:#e0663a; --c-yari-bg:#fdeee6; --c-beginner:#3f9d3a; --c-beginner-bg:#e9f6e6;
  --c-juken:#c2410c; --c-toeic:#0e7490; --c-oya:#db2777;
}
:root[data-theme=dark]{--bg:#0e1424;--bg2:#131a2e;--card:#161e34;--ink:#eef1f8;--sub:#b3bbd0;--faint:#7f88a3;--soft:#1c2540;--line:#28324f;--navy:#0b1020;--c-chu-bg:#12302c;--c-kou-bg:#16264a;--c-dai-bg:#241a42;--c-sha-bg:#1b2440;--c-yari-bg:#3a2016;--c-beginner-bg:#18301a}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e1424;--bg2:#131a2e;--card:#161e34;--ink:#eef1f8;--sub:#b3bbd0;--faint:#7f88a3;--soft:#1c2540;--line:#28324f;--navy:#0b1020;--c-chu-bg:#12302c;--c-kou-bg:#16264a;--c-dai-bg:#241a42;--c-sha-bg:#1b2440;--c-yari-bg:#3a2016;--c-beginner-bg:#18301a}}
body{background:var(--bg);color:var(--ink);letter-spacing:.01em;font-feature-settings:"palt"}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:.02em}
.eyebrow,.blk-k{font:700 11.5px/1.4 var(--en-f);letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin:0 0 6px}

/* ヘッダー・タブ：白でシュッと */
.hd{background:var(--navy);box-shadow:none}
.tabs{background:var(--bg);border-bottom:1px solid var(--line)}
.tab{font-weight:700;letter-spacing:.04em;color:var(--sub)}
.tab[aria-current]{color:var(--ink);border-bottom-color:var(--coral)}
.ticker{background:var(--bg2);border-bottom:1px solid var(--line)}
.ticker-l{background:var(--coral);color:#fff}
.ticker-track a{color:var(--sub)}.ticker-track a b{color:var(--teal)}

/* ボタン・チップ */
.btn{background:var(--coral);border-color:var(--coral);color:#fff;border-radius:999px;letter-spacing:.04em;font-weight:700}
.btn:hover{background:var(--coral2);border-color:var(--coral2)}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--soft);border-color:var(--faint)}
.chip{border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--sub);font-weight:600;letter-spacing:.02em}
.chip:hover{border-color:var(--coral);color:var(--coral)}
.pill{border-radius:999px}

/* ---- ヒーロー（Progate 型：中央・大きな見出し・検索ひとつ） ---- */
.hero2{text-align:center;padding:56px 8px 40px;max-width:860px;margin:0 auto}
.hero2-k{font:700 13px var(--jp);letter-spacing:.12em;color:var(--coral);margin:0 0 14px}
.hero2 h1{font:700 clamp(30px,5.6vw,54px)/1.32 var(--serif);letter-spacing:.02em;margin:0 0 18px;word-break:auto-phrase}
.hero2 h1 span{background:linear-gradient(transparent 62%,#ffd9cf 62%);padding:0 4px}
:root[data-theme=dark] .hero2 h1 span{background:linear-gradient(transparent 62%,#6a2a1c 62%)}
.hero2-sub{font-size:16px;line-height:1.95;color:var(--sub);max-width:640px;margin:0 auto}
.hero2 .hero-search{max-width:620px;margin:28px auto 0;border:1.5px solid var(--line);border-radius:999px;box-shadow:0 10px 30px -18px #15203840;background:var(--card)}
.hero2 .hero-search button{background:var(--coral);border-radius:0 999px 999px 0}
.hero2 .chips{justify-content:center;margin-top:14px}
.hero2-stats{display:flex;justify-content:center;gap:28px;list-style:none;padding:0;margin:26px 0 0;color:var(--sub);font-size:13.5px;flex-wrap:wrap}
.hero2-stats b{font:800 22px var(--en-d);color:var(--ink);margin-right:4px}
@media(max-width:640px){.hero2{padding:34px 0 26px;text-align:left}.hero2 .chips,.hero2-stats{justify-content:flex-start}.hero2-sub{font-size:15px}.hero2-stats{gap:16px}}

/* ---- セクションの共通枠 ---- */
.blk{padding:56px 0}
.blk-tint{position:relative}
.blk-tint::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:var(--bg2);z-index:-1}
.blk-hd{text-align:center;max-width:720px;margin:0 auto 30px}
.blk-hd h2{font:700 clamp(24px,4vw,34px)/1.4 var(--serif);margin:0 0 8px}
.blk-hd p:not(.blk-k){color:var(--sub);font-size:15px;line-height:1.8;margin:0}
.blk-more{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px}
@media(max-width:640px){.blk{padding:40px 0}.blk-hd{text-align:left}.blk-more{justify-content:flex-start}}
main{overflow-x:clip}

/* ---- 段階の入口（スタディサプリ型：立場別カード） ---- */
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.stages{grid-template-columns:1fr}}
.stage{--c:var(--teal);--cb:var(--soft);position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;padding:18px 44px 18px 18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s}
.stage:hover{transform:translateY(-3px);box-shadow:var(--sh-h);border-color:var(--c)}
.stage img,.stage-ph{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--cb);display:grid;place-items:center}
.stage-ph{font:800 34px var(--en-d);color:var(--c)}
.stage-b b{display:block;font:700 20px/1.3 var(--serif);color:var(--c)}
.stage-b small{display:block;color:var(--sub);font-size:13px;line-height:1.65;margin:4px 0 8px}
.stage-top{display:flex;flex-wrap:wrap;gap:4px}
.stage-top i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink);background:var(--cb);border-radius:6px;padding:2px 8px}
.stage-go{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--cb);color:var(--c);display:grid;place-items:center;font-weight:800;transition:transform .2s}
.stage:hover .stage-go{transform:translate(3px,-50%)}
.st-chu{--c:var(--c-chu);--cb:var(--c-chu-bg)}.st-kou{--c:var(--c-kou);--cb:var(--c-kou-bg)}.st-dai{--c:var(--c-dai);--cb:var(--c-dai-bg)}
.st-sha{--c:var(--c-sha);--cb:var(--c-sha-bg)}.st-yari{--c:var(--c-yari);--cb:var(--c-yari-bg)}.st-beginner{--c:var(--c-beginner);--cb:var(--c-beginner-bg)}
:root[data-theme=dark] .st-sha{--c:#9fb3e8}
.stages-more{text-align:center;margin-top:18px;color:var(--sub);font-size:14px}
.stages-more a{margin:0 8px;font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--line)}
.stages-more a:hover{color:var(--coral);border-color:var(--coral)}

/* ---- 目から鱗 ---- */
.uro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.uro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.uro-grid{grid-template-columns:1fr}}
.uro{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.uro-site{display:flex;align-items:center;gap:8px;margin:0;font:700 12.5px var(--en-f);color:var(--sub)}
.uro-site img{border-radius:5px}
.uro h3{font:700 18px/1.6 var(--serif);margin:0;flex:1}
.uro-btn{align-self:flex-start;border:0;border-radius:999px;padding:8px 18px;background:var(--ink);color:#fff;font:700 13px var(--jp);cursor:pointer;transition:background .2s}
.uro-btn:hover{background:var(--coral)}
.uro-a{border-top:1px dashed var(--line);padding-top:12px}
.uro-a p{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink)}
.uro-ft{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.uro-ft a{font-size:13px;font-weight:700;color:var(--coral)}
.share-x{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--ink)!important;font-size:12px!important}
.share-x::before{content:"𝕏";font-weight:800}
.share-x:hover{background:var(--ink);color:#fff!important;border-color:var(--ink)}

/* ---- 神サイト BEST10（Product Hunt 型の一覧） ---- */
.rank-list{list-style:none;margin:0 auto;padding:0;max-width:920px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.rk{display:grid;grid-template-columns:36px 48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 20px}
.rk+.rk{border-top:1px solid var(--line)}
.rk:hover{background:var(--bg2)}
.rk-n{font:800 18px var(--en-d);color:var(--faint);text-align:center}
.rk:nth-child(-n+3) .rk-n{color:var(--coral)}
.rk-ic{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);padding:6px;background:#fff}
.rk-b{display:block;min-width:0}
.rk-b b{display:block;font:700 16.5px/1.35 var(--en-f)}
.rk-b span{display:block;color:var(--sub);font-size:14px;line-height:1.6;margin-top:2px}
.rk-b small{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rk-b em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--sub);background:var(--soft);border-radius:6px;padding:1px 8px}
.rk-b:hover b{color:var(--coral)}
.rk-go{font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:7px 14px;white-space:nowrap}
.rk-go:hover{border-color:var(--coral);color:var(--coral)}
@media(max-width:640px){.rk{grid-template-columns:24px 40px minmax(0,1fr);gap:10px;padding:14px}.rk-ic{width:40px;height:40px;padding:5px}.rk-go{display:none}}

/* ---- 勉強法カード ---- */
.hk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.hk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hk-grid{grid-template-columns:1fr}}
.hk2{--c:var(--teal);display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);transition:transform .2s,box-shadow .2s}
.hk2:hover{transform:translateY(-3px);box-shadow:var(--sh-h)}
.hk2.g-input{--c:#2f6fe0}.hk2.g-memory{--c:#7a4fd6}.hk2.g-sound{--c:#13897b}.hk2.g-output{--c:#ef5b3f}.hk2.g-habit{--c:#d99a00}.hk2.g-ai{--c:#0e7490}
.hk2-g{font-size:11.5px;font-weight:700;color:var(--c);letter-spacing:.08em}
.hk2 b{font:700 19px/1.45 var(--serif)}
.hk2-q{font-weight:700;color:var(--ink);font-size:14.5px;line-height:1.6}
.hk2 small{color:var(--sub);font-size:13.5px;line-height:1.75}
.hk2-go{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:var(--c)}

/* ---- 今日のピック・新着（2列の一覧） ---- */
.duo2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media(max-width:860px){.duo2{grid-template-columns:1fr}}
.panel2{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:22px 22px 10px}
.panel2-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.panel2-hd h2{font:700 22px var(--serif);margin:0}
.more{color:var(--coral);font-weight:700;font-size:13px;white-space:nowrap}
.list2{list-style:none;margin:0;padding:0}
.list2 li+li{border-top:1px solid var(--line)}
.list2 a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:14px 2px}
.list2 b{font-weight:700;line-height:1.55}
.list2 small{grid-column:2;color:var(--faint);font-size:12px}
.list2 a:hover b{color:var(--coral)}
.tag2{grid-row:span 2;align-self:start;font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;color:var(--c,var(--teal));background:var(--cb,var(--soft));white-space:nowrap}
.panel2 .feed-c{display:block}
.panel2 .fi{border:0;border-radius:0;background:transparent;box-shadow:none}
.panel2 .fi+.fi{border-top:1px solid var(--line)}
.panel2 .fi-b{padding:14px 2px}
.panel2 .fi:hover{border-color:transparent}

/* ---- 特集・カテゴリ ---- */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:860px){.features{grid-template-columns:1fr}}
.feature{border-radius:var(--r);border:1px solid var(--line);background:var(--card);overflow:hidden;transition:transform .2s,box-shadow .2s}
.feature:hover{transform:translateY(-3px);box-shadow:var(--sh-h);border-color:var(--line)}
.feature img{height:auto;aspect-ratio:16/9;object-fit:cover}
.feature div{padding:16px 18px 18px}
.feature b{font:700 18px var(--serif)}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:26px}
.cat-chips span{font-size:13px;font-weight:700;color:var(--sub);margin-right:4px}

/* ---- 既存ページ全体の調整（シュッと） ---- */
.sec-hd h2{font-weight:700;letter-spacing:.02em}
.sec-hd h2::before{background:var(--coral)}
.sec-hd a,.sec-hd .more{color:var(--coral);border-bottom-color:#f7c4b8;font-family:var(--jp);letter-spacing:.04em}
.ph{border-radius:var(--r);background:var(--bg2);border:0;padding:34px 30px 28px}
.ph::before{background:var(--coral)}
.ph h1{font-weight:700;letter-spacing:.02em}
.card,.box,.fi,.uroko,.chal,.toc,.faq details{border-radius:var(--r)}
a.card:hover,button.card:hover{border-color:var(--coral);box-shadow:var(--sh-h)}
.rank,.rank-1,.rank-2,.rank-3{font-family:var(--en-d);font-weight:800;border-radius:50%}
.rank-1{background:var(--coral);border-color:var(--coral);color:#fff}
.stars{color:#f2a33a}
.h1-sub{color:var(--coral);font-weight:700;letter-spacing:.04em}
.toc{border-left-color:var(--coral)}.toc b,.toc li::before{color:var(--coral)}
.uroko{border-left-color:var(--coral)}
.uroko-k,.chal-k{color:var(--coral)}
.box.tip{border-left-color:var(--coral);background:#fff6f3}
:root[data-theme=dark] .box.tip{background:#2a1a16}
.fi-k,.k-podcast .fi-k,.k-video .fi-k,.k-lesson .fi-k,.k-blog .fi-k,.k-word .fi-k,.k-qa .fi-k,.k-community .fi-k{color:var(--teal);letter-spacing:.06em;font-family:var(--jp);font-size:11.5px}
.fi-new{color:var(--coral);border-color:var(--coral)}
.totop{border-radius:50%;background:var(--ink);border:0}
.totop:hover{background:var(--coral)}
.ft{background:var(--navy)}.ft h4{color:#ffb4a3}
.ffilter button{border-radius:999px}
.ffilter button[aria-pressed=true],.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink)}

/* 出発案内板（最新教材ページ）は、明るい一覧に */
.board{background:var(--card);border:1px solid var(--line);box-shadow:none;padding:0;border-radius:var(--r);list-style:none;margin:0}
.bd{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px;color:var(--ink)}
.bd+.bd{border-top:1px solid var(--line)}
.bd:hover{background:var(--bg2)}
.bd-time b{display:block;font:700 15px var(--en-d);color:var(--ink)}
.bd-time small{font-size:11px;color:var(--faint)}
.bd-no{display:none}
.bd-dest{display:block;font:700 12px var(--en-f);color:var(--teal);margin-bottom:3px}
.bd-dest em{font-style:normal;color:var(--faint);margin-left:8px;font-family:var(--jp)}
.bd-t{display:block;font:700 15.5px/1.5 var(--en-f);color:var(--ink)}
.bd-t:hover{color:var(--coral)}
.bd-st{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bd-st i{font:700 10px var(--en-f);letter-spacing:.08em;font-style:normal;padding:2px 8px;border-radius:999px;color:var(--faint);border:1px solid var(--line)}
.bd-st i.on{color:#fff;background:var(--coral);border-color:var(--coral)}
.bd-st a{font-size:12px;font-weight:700;color:var(--coral)}
.board .bd[hidden]{display:none}
@media(max-width:640px){.bd{grid-template-columns:54px minmax(0,1fr);padding:14px}.bd-st{grid-column:2;flex-direction:row;justify-content:flex-start;align-items:center}}
.fi-b{padding:14px 16px 12px}

/* 段階カード：文字幅を広く・タグは1行ずつ省略 */
.stages{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1020px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.stages{grid-template-columns:1fr}}
.stage{grid-template-columns:76px minmax(0,1fr);align-items:start;gap:16px;padding:20px 20px 18px}
.stage img,.stage-ph{width:76px;height:76px}
.stage-b b{padding-right:34px}
.stage-go{top:20px;transform:none}
.stage:hover .stage-go{transform:translateX(3px)}
.stage-top i{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 目から鱗：開いたカードだけ伸びる */
.uro-grid{align-items:start}
.uro h3{flex:none}
.ticker-l::before,.ticker-l::after{content:none!important;display:none!important}
.ticker-l{font:800 11px var(--en-f);letter-spacing:.14em}
/* スマホ：段階カードは2列のコンパクト表示（タップしやすく、縦に長くしない） */
@media(max-width:600px){
  .stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stage{grid-template-columns:1fr;justify-items:center;text-align:center;padding:16px 10px 14px;gap:8px}
  .stage img,.stage-ph{width:64px;height:64px}
  .stage-b b{padding:0;font-size:16px}
  .stage-b small{font-size:11.5px;margin:4px 0 0}
  .stage-top,.stage-go{display:none}
}
@media(max-width:600px){
  .hero2{padding:26px 0 8px}
  .hero2-sub{font-size:14px;line-height:1.85}
  .hero2 .chips{display:none}
  .hero2-stats{margin-top:16px;font-size:12px;gap:14px}
  .hero2-stats b{font-size:17px}
  .hero2 .hero-search{margin-top:20px}
  #stages{padding-top:28px}
}

/* =====================================================================
   PRO — 白いヘッダー・キービジュアル・信頼の帯・塗りの段階カード・イラストタイル・表彰台
   ===================================================================== */
/* ヘッダー：白で1段、下に細い線 */
.hd{background:#fffffff2;color:var(--ink);backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line);box-shadow:none}
:root[data-theme=dark] .hd{background:#0e1424f2}
.brand-t small{color:var(--coral)}
.brand-t b{color:var(--ink);font-weight:700}
.logo{box-shadow:none}
.hd-search input{background:var(--soft);color:var(--ink)}
.hd-search input::placeholder{color:var(--faint)}
.hd-search svg{color:var(--faint)}
.hd .ic-btn{color:var(--ink)}
.hd .ic-btn:hover{background:var(--soft)}
.tabs{border-bottom:1px solid var(--line)}
.tab{height:44px;font-size:14px}

/* ---- ヒーロー ---- */
.h3{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding:56px 0 48px}
.h3::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:radial-gradient(900px 480px at 85% 30%,#ffe9e2 0%,transparent 60%),radial-gradient(700px 420px at 10% 90%,#e5f3ff 0%,transparent 60%),var(--bg)}
:root[data-theme=dark] .h3::before{background:radial-gradient(900px 480px at 85% 30%,#3a1d16 0%,transparent 60%),radial-gradient(700px 420px at 10% 90%,#13254a 0%,transparent 60%),var(--bg)}
@media(max-width:940px){.h3{grid-template-columns:1fr;gap:28px;padding:32px 0 36px}}
.h3-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--sub);box-shadow:var(--sh)}
.h3-badge span{background:var(--coral);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.h3 h1{font:700 clamp(34px,5vw,60px)/1.22 var(--serif);letter-spacing:.01em;margin:0 0 20px}
.h3 h1 em{font-style:normal;color:var(--coral);position:relative}
.h3 h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.18em;background:#ffd0c4;z-index:-1;border-radius:4px}
:root[data-theme=dark] .h3 h1 em::after{background:#6a2a1c}
.h3-sub{font-size:16.5px;line-height:1.95;color:var(--sub);max-width:540px;margin:0}
.h3-search{position:relative;display:flex;align-items:center;max-width:540px;margin-top:28px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -24px #1520384d;padding:6px 6px 6px 46px}
.h3-search svg{position:absolute;left:16px;color:var(--faint)}
.h3-search input{flex:1;min-width:0;border:0;background:none;font-size:16px;height:44px;color:var(--ink);outline:none}
.h3-search button{border:0;background:var(--coral);color:#fff;font-weight:700;border-radius:10px;padding:0 22px;height:44px;cursor:pointer}
.h3-search button:hover{background:var(--coral2)}
.h3-search:focus-within{border-color:var(--coral)}
.h3-proof{display:flex;gap:32px;list-style:none;padding:0;margin:28px 0 0}
.h3-proof li{display:flex;flex-direction:column}
.h3-proof b{font:800 28px/1.1 var(--en-d);color:var(--ink)}
.h3-proof span{font-size:12.5px;color:var(--sub);margin-top:4px}
@media(max-width:600px){.h3 h1 br:first-of-type{display:none}.h3-sub{font-size:15px}.h3-proof{gap:20px}.h3-proof b{font-size:22px}}

/* キービジュアル：段階イラストのモザイク＋浮かぶカード */
.h3-r{position:relative;padding:20px 10px 30px}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;transform:rotate(-3deg)}
.kv-t{position:relative;display:block;border-radius:22px;overflow:hidden;background:var(--cb);aspect-ratio:1;box-shadow:0 18px 36px -24px #15203866;transition:transform .3s;animation:kvIn .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * 80ms)}
.kv-t:nth-child(even){transform:translateY(22px)}
.kv-t:hover{transform:translateY(-6px) rotate(2deg)}
.kv-t:nth-child(even):hover{transform:translateY(14px) rotate(2deg)}
.kv-t img{width:100%;height:100%;object-fit:cover;display:block}
.kv-t span{position:absolute;left:8px;bottom:8px;background:#fffffff2;color:var(--c);font-weight:700;font-size:12.5px;border-radius:999px;padding:3px 10px;box-shadow:var(--sh)}
@keyframes kvIn{from{opacity:0;transform:translateY(30px) scale(.94)}}
.kv-card{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -24px #15203866;padding:12px 14px;animation:float 6s ease-in-out infinite}
.kv-c1{left:-24px;bottom:-6px;display:flex;gap:10px;align-items:center;max-width:270px}
.kv-c1 img{border-radius:9px;border:1px solid var(--line);padding:4px;background:#fff}
.kv-c1 b{display:block;font:700 15px var(--en-f)}
.kv-c1 .stars{font-size:12px}
.kv-c1 small{display:flex;gap:4px;margin-top:4px}
.kv-c1 em{font-style:normal;font-size:10.5px;font-weight:600;background:var(--soft);border-radius:5px;padding:1px 6px;color:var(--sub)}
.kv-c2{right:-10px;top:-8px;max-width:240px;animation-delay:-3s}
.kv-c2 small{display:block;font-size:11px;font-weight:700;color:var(--coral);margin-bottom:3px}
.kv-c2 b{font-size:13.5px;line-height:1.55}
@keyframes float{50%{transform:translateY(-8px)}}
@media(max-width:940px){.h3-r{padding:6px 4px 24px}.kv{transform:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.kv-t:nth-child(even){transform:none}.kv-c1{left:0;bottom:-12px}.kv-c2{display:none}}
@media(max-width:600px){.kv-t span{font-size:11px;padding:2px 8px;left:6px;bottom:6px}.kv-t{border-radius:16px}.kv-c1{display:none}}
@media(prefers-reduced-motion:reduce){.kv-t,.kv-card{animation:none}}

/* 信頼の帯 */
.trust{padding:22px 0 8px;text-align:center;border-top:1px solid var(--line)}
.trust p{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--faint);margin:0 0 14px}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.trust-row a{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--en-f);color:var(--sub);filter:grayscale(1);opacity:.75;transition:all .2s}
.trust-row a:hover{filter:none;opacity:1;color:var(--ink)}
.trust-row img{border-radius:5px}

/* 段階カード：段階の色で塗る */
.stg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:940px){.stg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.stg{grid-template-columns:1fr}}
.stg-c{position:relative;display:flex;flex-direction:column;gap:12px;min-height:250px;padding:24px 24px 22px;border-radius:22px;background:var(--cb);overflow:hidden;transition:transform .25s,box-shadow .25s}
.stg-c:hover{transform:translateY(-4px);box-shadow:0 24px 44px -26px #15203873}
.stg-t b{display:block;font:700 24px/1.3 var(--serif);color:var(--c)}
.stg-t small{display:block;font-size:13.5px;line-height:1.7;color:var(--ink);opacity:.8;margin-top:6px;max-width:72%}
.stg-c ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:64%;position:relative;z-index:1}
.stg-c li{display:flex;align-items:center;gap:8px;background:#ffffffd9;border-radius:10px;padding:6px 10px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme=dark] .stg-c li{background:#ffffff14}
.stg-c li span{flex:none;width:20px;height:20px;border-radius:50%;background:var(--c);color:#fff;font:700 11px/20px var(--en-d);text-align:center}
.stg-go{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--c);position:relative;z-index:1}
.stg-c img{position:absolute;right:-10px;bottom:-10px;width:150px;height:150px;border-radius:50%;object-fit:cover;transition:transform .35s}
.stg-c:hover img{transform:scale(1.06) rotate(-3deg)}
@media(max-width:560px){.stg-c{min-height:0}.stg-c img{width:110px;height:110px}}

/* このサイトでわかること */
.val{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:860px){.val{grid-template-columns:1fr}}
.val-c{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;padding:0 0 24px}
.val-c img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:18px}
.val-c .val-n{font:800 13px var(--en-d);color:var(--coral);letter-spacing:.1em;margin:0 24px 4px}
.val-c h3{font:700 20px/1.4 var(--serif);margin:0 24px 8px}
.val-c p:not(.val-n){margin:0 24px;color:var(--sub);font-size:14.5px;line-height:1.85}

/* やりたいことタイル */
.cat2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:860px){.cat2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat2-c{position:relative;display:block;border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:var(--soft)}
.cat2-c img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.cat2-c:hover img{transform:scale(1.05)}
.cat2-c span{position:absolute;left:12px;bottom:12px;display:flex;align-items:baseline;gap:8px;background:#fffffff2;border-radius:12px;padding:8px 14px;box-shadow:0 10px 24px -14px #15203866}
.cat2-c b{font:700 15.5px var(--serif);color:var(--ink)}
.cat2-c small{font-size:12px;font-weight:700;color:var(--coral)}
@media(max-width:560px){.cat2-c span{left:8px;bottom:8px;padding:5px 10px;flex-direction:column;gap:0}.cat2-c b{font-size:13px}}
.cat-chips{justify-content:center}

/* ランキング：表彰台 */
.pod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1000px;margin:0 auto 18px}
@media(max-width:860px){.pod{grid-template-columns:1fr}}
.pod-c{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:26px 24px 22px;border-radius:22px;background:var(--card);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.pod-c:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}
.pod-c:first-child{border:2px solid var(--coral);background:linear-gradient(180deg,#fff4f0,var(--card) 60%)}
:root[data-theme=dark] .pod-c:first-child{background:linear-gradient(180deg,#2c1712,var(--card) 60%)}
.pod-n{position:absolute;top:18px;right:20px;font:800 44px/1 var(--en-d);color:var(--line)}
.pod-c:first-child .pod-n{color:var(--coral)}
.pod-c img{width:56px;height:56px;border-radius:14px;border:1px solid var(--line);padding:7px;background:#fff;margin-bottom:6px}
.pod-c b{font:700 20px var(--en-f)}
.pod-c .stars{font-size:13px}
.pod-c p{margin:4px 0 2px;font-size:14.5px;line-height:1.7;color:var(--sub)}
.pod-c small{display:flex;flex-wrap:wrap;gap:6px}
.pod-c em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--sub);background:var(--soft);border-radius:6px;padding:1px 8px}
.pod-go{margin-top:10px;font-size:13.5px;font-weight:700;color:var(--coral)}
.rank-list{max-width:1000px}

/* 勉強法カード（イラスト付き） */
.hk3{--c:var(--teal);position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line);transition:transform .25s,box-shadow .25s;overflow:hidden}
.hk3:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}
.hk3.g-input{--c:#2f6fe0}.hk3.g-memory{--c:#7a4fd6}.hk3.g-sound{--c:#13897b}.hk3.g-output{--c:#ef5b3f}.hk3.g-habit{--c:#c98a00}.hk3.g-ai{--c:#0e7490}
.hk3-img{width:72px;height:72px;border-radius:18px;overflow:hidden;background:var(--soft);margin-bottom:4px}
.hk3-img img{width:100%;height:100%;object-fit:cover}
.hk3 b{font:700 19px/1.45 var(--serif)}

/* 最後の行動の帯 */
.cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px;align-items:center;margin:20px 0 60px;padding:40px 44px;border-radius:28px;background:var(--navy);color:#fff;overflow:hidden}
.cta::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,#ef5b3f55,transparent 70%)}
.cta h2{font:700 clamp(24px,3.6vw,32px)/1.4 var(--serif);margin:0 0 8px;color:#fff}
.cta p:not(.blk-k){margin:0;color:#c8cee0;line-height:1.8}
.cta .blk-k{color:#ffb4a3}
.cta-b{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cta-b a{display:block;text-align:center;padding:14px 8px;border-radius:14px;background:#ffffff12;border:1px solid #ffffff26;font-weight:700;transition:all .2s}
.cta-b a:hover{background:var(--c);border-color:var(--c)}
@media(max-width:860px){.cta{grid-template-columns:1fr;padding:30px 22px}.cta-b{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- ガイド：レベル別カード ---- */
.lvpick{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
.lvpick a{display:flex;flex-direction:column;align-items:center;min-width:86px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);transition:all .2s}
.lvpick a:hover{border-color:var(--coral);transform:translateY(-2px)}
.lvpick b{font:800 20px var(--en-d);color:var(--coral)}
.lvpick small{font-size:11px;color:var(--sub);font-weight:600}
.lvcards{display:grid;gap:14px}
.lvc{--h:calc(10 + var(--step) * 40);border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden;scroll-margin-top:90px}
.lvc-hd{display:flex;align-items:center;gap:16px;padding:16px 20px;background:hsl(calc(170 - var(--step) * 38) 60% 95%)}
:root[data-theme=dark] .lvc-hd{background:hsl(calc(170 - var(--step) * 38) 35% 16%)}
.lvc-hd>b{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:hsl(calc(170 - var(--step) * 38) 60% 40%);color:#fff;font:800 20px var(--en-d)}
.lvc-hd span{display:block;font:700 18px var(--serif)}
.lvc-hd small{font-size:13px;color:var(--sub);font-weight:600}
.lvc-do{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.lvc-do>div{padding:16px 20px}
.lvc-do>div+div{border-left:1px solid var(--line)}
.lvc-do dt{font-size:12px;font-weight:700;color:var(--coral);letter-spacing:.06em;margin-bottom:6px}
.lvc-do dd{margin:0;font-size:15px;line-height:1.7;font-weight:600}
.lvc-sites{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px 16px;border-top:1px solid var(--line);background:var(--bg2)}
.lvc-sites>span{font-size:12px;font-weight:700;color:var(--sub)}
.lvc-sites>div{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:760px){.lvc-do{grid-template-columns:1fr 1fr}.lvc-do>div:nth-child(3){border-left:0}.lvc-do>div:nth-child(n+3){border-top:1px solid var(--line)}.lvc-do>div{padding:14px 16px}.lvc-hd{padding:14px 16px}.lvc-sites{padding:12px 16px 14px}}
@media(min-width:941px){.h3-r{padding-top:70px}.kv-c2{top:0;right:0}}
/* キービジュアル（Codex 描きおろし） */
.kv-art{display:block;width:118%;max-width:none;height:auto;margin-left:-6%;mix-blend-mode:multiply;animation:kvIn .8s cubic-bezier(.2,.8,.2,1) backwards}
:root[data-theme=dark] .kv-art{mix-blend-mode:normal;border-radius:24px;width:100%;margin:0}
@media(min-width:941px){.h3-r{padding-top:20px}.kv-c1{left:0;bottom:4px}.kv-c2{top:-6px;right:auto;left:4%}}
@media(max-width:940px){.kv-art{width:100%;margin:0}}
@media(min-width:941px){.h3{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}}
.kv-art{width:100%;margin:0;-webkit-mask-image:radial-gradient(ellipse 70% 72% at 55% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 70% 72% at 55% 52%,#000 62%,transparent 100%)}
@media(min-width:941px){.kv-art{width:112%;margin:-20px -4% -10px -8%}.kv-c1{left:2%;top:14%;bottom:auto}}
@media(max-width:940px){.kv-c1{display:none}}
.h3 h1{font-size:clamp(32px,4.1vw,56px)}
@media(min-width:941px){.kv-art{width:104%;margin:-10px -2% -10px -2%}}

/* 長い一覧：しぼりこみ＋もっと見る */
[hidden]{display:none!important}
.pl-f{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 16px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.pl-f>span:not(.pl-n):not(.pl-sep){font-size:12px;font-weight:700;color:var(--sub);margin-right:2px}
.pl-f button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:4px 12px;font:700 12.5px var(--jp);color:var(--sub);cursor:pointer}
.pl-f button:hover{border-color:var(--coral);color:var(--coral)}
.pl-f button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.pl-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.pl-n{margin-left:auto;font-size:12.5px;color:var(--sub)}.pl-n b{font:800 16px var(--en-d);color:var(--ink);margin-right:2px}
.pl-more{text-align:center;margin:20px 0 0}
.pl-more .btn b{font-family:var(--en-d)}
.nw{display:inline-block}