/* =====================================================================
   IMPACT v2 — 明るく・太く・動く。全ページ共通のデザインシステム（最後に読み込む）
   ロイヤルブルー × コーラル × サニーイエロー × ミント。太い枠線 + ずらし影 + 大きな見出し + 番号
   ・ホーム：.x-*   ・診断：.sd-*   ・その他の全ページ：.ph（ページの頭）/ .sec-hd / .box / .card / .fi を上書き
   ===================================================================== */
:root{
  --x-edge:#152038; --x-sh:#152038;
  --x-coral:#ff5a3c; --x-amber:#ffb23e; --x-sun:#ffd23e; --x-teal:#12c9a9; --x-violet:#6c4dff; --x-sky:#2f8bff; --x-pink:#ff5fa8; --x-green:#2fc46b;
  --x-r1:#2a3de0; --x-r2:#4a35e6; --x-r3:#7b3cf0;
  --x-royal:linear-gradient(135deg,#2a3de0 0%,#4a35e6 55%,#7b3cf0 100%);
  --x-hot:linear-gradient(100deg,#ff5a3c,#ffb23e 60%,#ffe27a);
  --x-hl:#ffe27a; --x-tick:#fff3d1; --x-live:#eef1ff;
  --x-disp:"Bricolage Grotesque","Zen Kaku Gothic New",system-ui,sans-serif;
  --x-jp:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;
  --x-ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme=dark]{--x-edge:#ffffff55;--x-sh:#000000b0;--x-hl:#6b5300;--x-tick:#2a2412;--x-live:#131a2e}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--x-edge:#ffffff55;--x-sh:#000000b0;--x-hl:#6b5300;--x-tick:#2a2412;--x-live:#131a2e}}

html{scroll-padding-top:84px}
body{overflow-x:clip;background-image:none;font-family:var(--x-jp)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(760px 520px at 100% 0,#ffd9cf88,transparent 70%),radial-gradient(820px 560px at 0 34%,#d4e6ff88,transparent 70%),radial-gradient(760px 520px at 70% 100%,#d4fff1aa,transparent 70%)}
:root[data-theme=dark] body::before{background:radial-gradient(760px 520px at 100% 0,#ff5a3c18,transparent 70%),radial-gradient(820px 560px at 0 34%,#2f8bff18,transparent 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) body::before{background:radial-gradient(760px 520px at 100% 0,#ff5a3c18,transparent 70%),radial-gradient(820px 560px at 0 34%,#2f8bff18,transparent 70%)}}
::selection{background:var(--x-sun);color:#152038}
:focus-visible{outline:3px solid var(--x-coral);outline-offset:3px;border-radius:6px}
main{animation:xin .5s var(--x-ease) both}
@keyframes xin{from{opacity:0;transform:translateY(10px)}}

/* ---- LIVE のランプ・読みこみバー ---- */
.x-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--x-coral);animation:xping 1.8s ease-out infinite;flex:none}
@keyframes xping{0%{box-shadow:0 0 0 0 #ff5a3caa}80%,100%{box-shadow:0 0 0 10px #ff5a3c00}}
.x-prog{position:fixed;left:0;top:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--x-coral),var(--x-amber),var(--x-teal));z-index:80;pointer-events:none}

/* ---- ヘッダー・タブ・ティッカー（全ページ）：明るい白 ---- */
.hd{background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);color:var(--ink);box-shadow:none;transition:box-shadow .25s}
.hd.is-stuck{box-shadow:0 10px 30px -18px #15203866}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--x-coral),var(--x-amber),var(--x-sun),var(--x-teal),var(--x-sky),var(--x-violet),var(--x-coral));background-size:300% 100%;animation:xflow 10s linear infinite}
@keyframes xflow{to{background-position:300% 0}}
.hd-in{height:68px}
.brand{gap:11px}
.brand .logo{width:42px;height:42px;background:var(--x-hot);border-radius:14px;overflow:visible;border:2.5px solid #152038;box-shadow:3px 3px 0 #152038;transform:rotate(-6deg);transition:transform .35s var(--x-ease)}
.brand .logo::before{inset:9px;border-radius:50%;border:2.5px solid #152038;background:linear-gradient(#152038,#152038) center/100% 2.5px no-repeat}
.brand .logo::after{inset:9px 15px;border-radius:50%;border:2.5px solid #152038;transform:none}
.brand:hover .logo{transform:rotate(8deg) scale(1.1)}
.brand-t b{font:900 19px/1.1 var(--x-jp);letter-spacing:.01em;color:var(--ink)}
.brand-t small{color:var(--x-coral);font-weight:800;letter-spacing:.1em}
.hd-search input{background:var(--soft);color:var(--ink);border:2px solid transparent;border-radius:999px}
.hd-search input::placeholder{color:var(--faint)}
.hd-search input:focus{background:var(--card);border-color:var(--x-coral);color:var(--ink)}
.hd-search svg{color:var(--faint)}
.ic-btn{color:var(--ink);border-radius:50%;transition:background .2s}
.ic-btn:hover{background:var(--soft)}
.tabs{background:var(--card);border-bottom:2px solid var(--line)}
.tab{color:var(--sub);font-weight:800;letter-spacing:.03em;border-bottom:0;margin:9px 3px;border-radius:999px;padding:0 16px;line-height:34px;height:auto;transition:background .2s,color .2s,transform .2s}
.tab:hover{color:var(--ink);background:var(--soft);transform:translateY(-1px)}
.tab[aria-current]{color:#fff;background:linear-gradient(100deg,#ff5a3c,#ff8a3c);box-shadow:0 8px 18px -8px #ff5a3caa;border-bottom:0}
.ticker{background:var(--x-tick);border-bottom:2px solid var(--line)}
.ticker-l{display:inline-flex;align-items:center;gap:7px;background:var(--x-coral);color:#fff;border-radius:999px;padding:6px 13px 6px 10px;font:800 11px/1 var(--x-disp);letter-spacing:.14em}
.ticker-l i{width:7px;height:7px;border-radius:50%;background:#fff;animation:xblink 1.2s ease-in-out infinite}
@keyframes xblink{50%{opacity:.25}}
.ticker-track a{color:var(--ink);font-weight:700}
.ticker-track a b{color:#0a8f7a}
.ticker-track a:hover{color:var(--x-coral)}
:root[data-theme=dark] .ticker-track a b{color:var(--x-teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ticker-track a b{color:var(--x-teal)}}

/* ---- ボタン・チップ（全ページ）---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--x-coral);color:#fff;border:2.5px solid #152038;border-radius:999px;font-weight:900;letter-spacing:.03em;box-shadow:4px 4px 0 #152038;transition:transform .15s var(--x-ease),box-shadow .15s var(--x-ease),background .2s}
.btn:hover{background:#ff6b4f;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #152038;filter:none;color:#fff}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #152038}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--x-edge);box-shadow:4px 4px 0 var(--x-sh)}
.btn-ghost:hover{background:var(--x-sun);color:#152038;border-color:#152038;box-shadow:6px 6px 0 #152038}
.btn-dark{background:#152038;color:#fff}
.btn-lime{background:var(--x-green)}
.chip{border:2px solid var(--x-edge);border-radius:999px;background:var(--card);color:var(--ink);font-weight:800;transition:transform .15s,background .2s,box-shadow .15s}
.chip:hover{background:var(--x-sun);color:#152038;border-color:#152038;transform:translateY(-2px);box-shadow:0 4px 0 #152038}
.pill{border-radius:999px;font-weight:800}
.mini{border:2px solid var(--x-edge);border-radius:999px;font-weight:800;transition:transform .15s,background .2s}
.mini:hover{background:var(--x-sun);color:#152038;border-color:#152038;transform:translateY(-2px)}
.mini.h{background:var(--x-hl)}

/* ---- パンくず ---- */
.crumb{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:12.5px;font-weight:700;margin:6px 0 18px}
.crumb a{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:1px 12px;transition:all .15s}
.crumb a:hover{border-color:var(--x-coral);color:var(--x-coral)}

/* ---- ページの頭（.ph）：鮮やかなグラデーションの大見出し ---- */
.ph{--g1:#ff5a3c;--g2:#7b3cf0;position:relative;isolation:isolate;overflow:hidden;color:#fff;border:3px solid #152038;border-radius:34px;box-shadow:9px 9px 0 var(--x-sh);padding:clamp(30px,5.5vw,60px) clamp(22px,4.5vw,56px);margin-bottom:34px;background:linear-gradient(120deg,var(--g1),var(--g2))}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 94% 16%,#ffffff40 0 96px,transparent 97px),radial-gradient(circle at 78% 116%,#ffffff30 0 170px,transparent 171px),radial-gradient(circle at 6% 120%,#00000022 0 130px,transparent 131px),radial-gradient(#ffffff55 1.6px,transparent 2.2px) 0 0/24px 24px;-webkit-mask-image:linear-gradient(100deg,#0004 0%,#000 55%);mask-image:linear-gradient(100deg,#0004 0%,#000 55%)}
.ph::after{display:none}
.ph.c-blue{--g1:#2f6bff;--g2:#00b8ff}.ph.c-pink{--g1:#ff4d9d;--g2:#ff8a5c}.ph.c-y{--g1:#ff9a00;--g2:#ff4d4d}.ph.c-mint{--g1:#00c2a0;--g2:#2f8bff}.ph.c-purple{--g1:#7b4dff;--g2:#d04dff}.ph.c-orange{--g1:#ff7a1a;--g2:#ff3d68}.ph.c-red{--g1:#ff3d5a;--g2:#ff8a3d}.ph.c-green{--g1:#1fbf6a;--g2:#00b8d9}.ph.c-lime{--g1:#18b87a;--g2:#7ed321}
.ph h1{font:900 clamp(30px,6.4vw,64px)/1.1 var(--x-jp);letter-spacing:.005em;color:#fff;text-shadow:0 3px 0 #0003;max-width:20em;word-break:auto-phrase}
.ph .h1-sub{display:block;margin-top:8px;font-size:.38em;font-weight:900;letter-spacing:.08em;color:#fff3a8;text-shadow:none}
.ph .catch{display:inline-block;margin-top:16px;background:#fff;color:#152038;border:2.5px solid #152038;border-radius:16px;padding:6px 18px;font-size:clamp(14px,2.2vw,18px);font-weight:900;line-height:1.55;box-shadow:4px 4px 0 #152038;transform:rotate(-1deg)}
.ph .quick{margin-top:16px;color:#fff;font-size:clamp(18px,3.4vw,26px)}
.ph .quick span{background:#fff;color:#152038;font:900 12px/1 var(--x-disp);letter-spacing:.1em;border-radius:999px;padding:7px 12px}
.ph p{color:#ffffffee}
.ph a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.ph .pill{background:#ffffff2b!important;color:#fff;border:1.5px solid #ffffff77}
.ph .stars{color:#ffe35a;letter-spacing:.1em}
.ph .fine{color:#ffffffcc}
.ph .fav{background:#fff;border:3px solid #152038;border-radius:18px;box-shadow:3px 3px 0 #152038}
.ph .facts{gap:12px;margin-top:20px}
.ph .fact{background:#ffffff26;border:2px solid #ffffff80;border-radius:18px;padding:12px 14px;display:block;backdrop-filter:blur(6px)}
.ph .fact-ic{display:none}
.ph .fact-k{display:block;color:#ffffffcc;font:800 11px var(--x-disp);letter-spacing:.14em;margin-bottom:3px}
.ph .fact b{color:#fff;font:900 clamp(15px,2.4vw,19px) var(--x-jp)}
.ph .btn{background:#fff;color:#152038}
.ph .btn:hover{background:var(--x-sun)}
.ph .btn-ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 #15203866}
.ph .btn-ghost:hover{background:#fff;color:#152038}
.ph-img>img{border:4px solid #fff;border-radius:30px;box-shadow:8px 8px 0 #15203888;transform:rotate(3deg);transition:transform .4s var(--x-ease)}
.ph:hover .ph-img>img{transform:rotate(-2deg) scale(1.04)}
.ph-w{position:absolute;z-index:-1;pointer-events:none;font:800 var(--s,22px)/1 var(--x-disp);color:#fff;opacity:.2;transform:rotate(var(--r,0deg));white-space:nowrap;animation:xbob 7s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes xbob{50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 3deg))}}
.stale-bar{border-radius:18px;border:2.5px solid #152038;box-shadow:4px 4px 0 #152038;background:#fff3d1;color:#152038;font-weight:700}
.byline{font-weight:700}

/* ---- 見出し（番号つき）---- */
main{counter-reset:xs}
.sec,.blk{position:relative}
.sec-hd{align-items:flex-end;margin:46px 0 22px;padding-bottom:14px;border-bottom:5px solid;border-image:linear-gradient(90deg,var(--x-coral),var(--x-amber),var(--x-teal)) 1}
.sec-hd h2{font:900 clamp(24px,4.6vw,40px)/1.2 var(--x-jp);letter-spacing:.005em;gap:14px}
.sec-hd h2::before{counter-increment:xs;content:counter(xs,decimal-leading-zero);flex:none;display:inline-grid;place-items:center;min-width:54px;height:54px;padding:0 8px;border-radius:16px;background:var(--x-sun);color:#152038;border:2.5px solid #152038;box-shadow:3px 3px 0 #152038;font:800 24px var(--x-disp);transform:rotate(-5deg)}
.sec-hd h2 .e{display:none}
.sec-hd small{font-size:14px;font-weight:600;margin-top:6px}
.more{display:inline-flex;align-items:center;gap:4px;background:var(--card);border:2px solid var(--x-edge);border-radius:999px;padding:5px 16px;font-weight:800;color:var(--ink);transition:all .15s}
.more:hover{background:var(--x-sun);color:#152038;border-color:#152038;text-decoration:none;transform:translateY(-2px)}

/* ---- カード・ボックス ---- */
.grid{gap:20px}
.card{--bc:var(--x-coral);border:2.5px solid var(--x-edge);border-radius:22px;background:var(--card);box-shadow:5px 5px 0 var(--bc);transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease)}
.grid>.card:nth-child(4n+2),.cols .card:nth-child(4n+2){--bc:var(--x-teal)}
.grid>.card:nth-child(4n+3),.cols .card:nth-child(4n+3){--bc:var(--x-violet)}
.grid>.card:nth-child(4n+4),.cols .card:nth-child(4n+4){--bc:var(--x-amber)}
.card:hover{transform:translate(-3px,-3px);border-color:var(--x-edge);box-shadow:9px 9px 0 var(--bc)}
.card h3{font-weight:900}
.card .go{font-weight:900}
.sc .fav,.sc-hd img{border-radius:14px;border:2px solid var(--x-edge);background:#fff;padding:3px}
.sc-hd{border-bottom:2px dashed var(--line)}
.rank,.rank-1,.rank-2,.rank-3{border:2.5px solid #152038;border-radius:50%;font:800 16px var(--x-disp);box-shadow:2px 2px 0 #152038;color:#152038}
.rank{background:#fff}.rank-1{background:var(--x-sun)}.rank-2{background:#dfe5f3}.rank-3{background:#ffb98a}
.stars{color:#ff9a00}
.box{--bc:var(--x-coral);background:var(--card);border:2.5px solid var(--x-edge);border-radius:24px;padding:clamp(18px,3vw,28px);box-shadow:6px 6px 0 var(--bc);margin-bottom:26px}
main .box:nth-child(4n+2){--bc:var(--x-teal)}main .box:nth-child(4n+3){--bc:var(--x-violet)}main .box:nth-child(4n+4){--bc:var(--x-amber)}
.box h2{width:fit-content;max-width:100%;font:900 clamp(19px,2.8vw,26px)/1.4 var(--x-jp);margin-bottom:14px;background:linear-gradient(transparent 62%,var(--x-hl) 62%);padding:0 4px;margin-left:-4px}
.box h3{font-weight:900}
.box.tip{background:#fff7e0;border-left:2.5px solid var(--x-edge);box-shadow:6px 6px 0 var(--x-amber)}
.box.tip h2{background:none}
.box.warn{background:#fff0ec;border-left:2.5px solid var(--x-edge);box-shadow:6px 6px 0 var(--x-coral)}
:root[data-theme=dark] .box.tip,:root[data-theme=dark] .box.warn{background:var(--card)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .box.tip,:root:not([data-theme=light]) .box.warn{background:var(--card)}}
.box.dark{background:#152038;color:#fff}
.side .box{padding:18px;box-shadow:5px 5px 0 var(--bc)}
.side .box h2{font-size:17px}
.prose{font-size:16.5px;line-height:2}
.for-line{background:var(--x-hl);border:2px solid var(--x-edge);border-radius:14px;font-weight:800}
.steps{gap:14px}
.steps li{padding:16px 18px 16px 74px;border:2px solid var(--x-edge);border-radius:18px;background:var(--card);font-size:16px;line-height:1.8;box-shadow:3px 3px 0 var(--x-sh)}
.steps li::before{left:16px;top:14px;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;border:2.5px solid #152038;background:var(--x-coral);color:#fff;font:800 20px/1 var(--x-disp);box-shadow:2px 2px 0 #152038;transform:rotate(-5deg)}
.steps li:nth-child(3n+2)::before{background:var(--x-teal)}.steps li:nth-child(3n+3)::before{background:var(--x-violet)}
.toc{border:2.5px solid var(--x-edge);border-left:2.5px solid var(--x-edge);border-radius:22px;background:var(--card);box-shadow:5px 5px 0 var(--x-teal);padding:16px 22px;margin-bottom:28px}
.toc b{font:800 12px var(--x-disp);letter-spacing:.2em;color:var(--x-coral)}
.toc ol{gap:8px 10px}
.toc li{font-size:13.5px;font-weight:800}
.toc li::before{color:var(--x-coral);font:800 12px var(--x-disp)}
.toc a{display:inline-block;background:var(--soft);border-radius:999px;padding:3px 12px;transition:all .15s}
.toc a:hover{background:var(--x-sun);color:#152038}
.uroko{border:2.5px solid var(--x-edge);border-left:2.5px solid var(--x-edge);border-radius:26px;background:linear-gradient(135deg,#e3f0ff,#dcfff4);box-shadow:6px 6px 0 var(--x-sky)}
.uroko img{border:3px solid #152038}
.uroko-k,.chal-k{display:inline-block;background:#152038;color:#ffe27a;border-radius:999px;padding:4px 12px;font:800 11px var(--x-disp);letter-spacing:.12em}
.uroko-q{font-weight:900;font-size:19px}
:root[data-theme=dark] .uroko{background:var(--card)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .uroko{background:var(--card)}}
.chal{border:2.5px dashed var(--x-edge);border-left:2.5px dashed var(--x-edge);border-radius:26px;background:#fff7e0;box-shadow:6px 6px 0 var(--x-amber)}
.chal img{border:3px solid #152038}
:root[data-theme=dark] .chal{background:var(--card)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .chal{background:var(--card)}}
.fitq{border-bottom:2px dashed var(--line)}
.yn button{border:2px solid var(--x-edge);border-radius:999px;font-weight:800;padding:3px 14px}
.kv dt{color:var(--x-coral);font-family:var(--x-disp);font-weight:800}
.lvbar i{height:12px;border-radius:6px;border:2px solid var(--x-edge);background:var(--card)}
.lvbar i.on{background:var(--x-teal)}
.faq details{border:2.5px solid var(--x-edge);border-radius:20px;background:var(--card);box-shadow:4px 4px 0 var(--x-sh);transition:box-shadow .15s,background .2s}
.faq details[open]{background:var(--x-hl);box-shadow:4px 4px 0 var(--x-coral)}
:root[data-theme=dark] .faq details[open]{background:var(--card)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .faq details[open]{background:var(--card)}}
.faq summary{font-weight:900;font-size:16.5px;padding:2px 0}
.faq details p{color:var(--ink)}

/* ---- フィード・一覧・フィルタ ---- */
.fi{--kc:var(--x-amber);border:2.5px solid var(--x-edge);border-radius:20px;box-shadow:5px 5px 0 var(--kc);background:var(--card);transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease)}
.fi.k-video{--kc:var(--x-coral)}.fi.k-podcast{--kc:var(--x-violet)}.fi.k-news{--kc:var(--x-teal)}.fi.k-lesson{--kc:var(--x-amber)}.fi.k-blog{--kc:var(--x-sky)}.fi.k-word{--kc:var(--x-pink)}
.fi:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--kc)}
.fi-k{border-radius:999px;font-weight:900;padding:0 10px;background:var(--kc);color:#152038}
.fi-t{font-weight:800}
.fi-new{border-radius:999px;font-weight:800}
.panel2 .fi,.feed-c .fi{border:0;box-shadow:none;border-radius:0}
.ffilter button,.pl-f button{border:2px solid var(--x-edge);border-radius:999px;font-weight:800;transition:all .15s}
.ffilter button:hover,.pl-f button:hover{background:var(--x-sun);color:#152038;border-color:#152038}
.ffilter button[aria-pressed=true],.pl-f button[aria-pressed=true]{background:var(--x-coral);border-color:#152038;color:#fff;box-shadow:2px 2px 0 #152038}
.pl-f{border:2.5px solid var(--x-edge);border-radius:20px;background:var(--card);box-shadow:4px 4px 0 var(--x-sh)}
.board{border:2.5px solid var(--x-edge);border-radius:22px;overflow:hidden;box-shadow:6px 6px 0 var(--x-teal)}
.sv-img{border:2.5px solid var(--x-edge);border-radius:16px;transition:transform .2s var(--x-ease)}
.sv:hover .sv-img{transform:translateY(-4px) rotate(-.6deg)}
.shelf-btn{border:2.5px solid #152038;box-shadow:2px 2px 0 #152038;background:#fff;color:#152038}
.audbar{border:2.5px solid var(--x-edge);border-radius:999px;box-shadow:4px 4px 0 var(--x-sh)}
.audbar a:hover{background:var(--x-sun);color:#152038}
.daily{border:2.5px solid var(--x-edge);border-radius:28px;box-shadow:7px 7px 0 var(--x-coral)}
.daily-hd{background:var(--x-royal);color:#fff}
.daily-hd time{color:var(--x-sun)}
details.box>summary{font-weight:900}
.empty{font-weight:700;color:var(--sub)}

/* ---- フッター：鮮やかなブルー ---- */
.ft{position:relative;background:var(--x-royal);color:#e3e8ff;margin-top:90px}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--x-coral),var(--x-amber),var(--x-sun),var(--x-teal),var(--x-sky),var(--x-pink))}
.ft::after{content:"WORLD ENGLISH";position:absolute;right:3%;bottom:-.16em;font:800 clamp(60px,13vw,170px)/1 var(--x-disp);letter-spacing:-.02em;color:#ffffff14;pointer-events:none;white-space:nowrap}
.ft-in{position:relative;z-index:1}
.ft b{color:#fff;font-family:var(--x-jp);font-weight:900;font-size:18px}
.ft h4{color:var(--x-sun);font-family:var(--x-disp);font-weight:800}
.ft a{color:#e3e8ff;transition:transform .15s,color .15s}
.ft a:hover{color:#fff;transform:translateX(4px)}
.ft p{color:#cdd6ff}
.totop{background:var(--x-sun);color:#152038;border:2.5px solid #152038;box-shadow:3px 3px 0 #152038}

/* =====================================================================
   ホーム
   ===================================================================== */
.is-home main{max-width:none;padding:0;overflow:visible;animation:none}
.x-wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---- ヒーロー：ロイヤルブルーの夜明け ---- */
.x-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(28px,4vw,56px) 0 0;background:radial-gradient(900px 520px at 88% -8%,#ff6fb58a,transparent 65%),radial-gradient(800px 520px at 0 112%,#19e3c177,transparent 65%),var(--x-royal)}
.x-words{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.x-aurora{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.x-aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:xdrift 16s ease-in-out infinite alternate}
.x-aurora i:nth-child(1){width:520px;height:520px;left:-8%;top:-14%;background:#ff7a5c}
.x-aurora i:nth-child(2){width:560px;height:560px;right:-10%;top:-22%;background:#ffd23e;opacity:.32;animation-delay:-5s;animation-duration:20s}
.x-aurora i:nth-child(3){width:620px;height:420px;left:30%;bottom:-30%;background:#19e3c1;opacity:.4;animation-delay:-9s;animation-duration:24s}
@keyframes xdrift{to{transform:translate3d(60px,40px,0) scale(1.18)}}
.x-hero-in{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;align-items:center}
.x-livepill{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 16px 7px 12px;border-radius:999px;background:#fff;border:2.5px solid #152038;box-shadow:3px 3px 0 #152038;font-size:13.5px;font-weight:800;color:#152038}
.x-livepill b{font:800 12px var(--x-disp);letter-spacing:.14em;color:var(--x-coral)}
.x-livepill em{font:800 18px var(--x-disp);font-style:normal;color:#e0431f;margin:0 2px}
.x-h1{font-family:var(--x-jp);font-weight:900;line-height:1.04;letter-spacing:.01em;margin:20px 0 18px;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
.x-l1{display:block;font-size:clamp(28px,5vw,62px);text-shadow:0 4px 0 #0003}
.x-l2{display:flex;align-items:baseline;flex-wrap:wrap;gap:.1em .14em;margin:.02em 0}
.x-num{font:800 clamp(96px,14.5vw,200px)/.84 var(--x-disp);letter-spacing:-.05em;background:linear-gradient(100deg,#fff6a8,#ffd23e 45%,#ff9a3c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 #1a1a8a88) drop-shadow(0 14px 30px #1a1a8a66);font-variant-numeric:tabular-nums}
.x-ken{font-size:clamp(30px,5.4vw,70px);text-shadow:0 4px 0 #0003}
.x-l3{display:block;font-size:clamp(34px,5.6vw,72px);text-shadow:0 4px 0 #0003}
.x-l3 mark{color:#fff;background:linear-gradient(transparent 56%,#ff5a3c 56%,#ff5a3c 94%,transparent 94%);padding:0 .06em;margin-right:.04em}
.x-lead{max-width:36em;font-size:clamp(15px,1.9vw,18px);line-height:1.95;color:#e6eaff;margin:0 0 26px}
.x-lead b{color:#fff;background:linear-gradient(transparent 60%,#ffd23e66 60%)}
.x-cta{display:flex;flex-wrap:wrap;gap:14px}
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 30px;border-radius:999px;font:900 16.5px var(--x-jp);letter-spacing:.03em;border:3px solid #152038;cursor:pointer;transition:transform .15s var(--x-ease),box-shadow .15s var(--x-ease),background .2s;text-decoration:none;box-shadow:5px 5px 0 #152038}
.x-btn svg{transition:transform .2s}
.x-btn:hover svg{transform:translateX(4px)}
.x-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #152038}
.x-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #152038}
.x-btn-main{background:var(--x-coral);color:#fff}
.x-btn-main:hover{background:#ff6b4f;color:#fff}
.x-btn-line{background:#fff;color:#152038}
.x-btn-line span{background:var(--x-teal);color:#04141a;border-radius:999px;padding:2px 10px;font:800 13px var(--x-disp)}
.x-btn-line:hover{background:var(--x-sun);color:#152038}
.x-search{position:relative;display:flex;align-items:center;max-width:560px;margin-top:24px;background:#fff;border:3px solid #152038;border-radius:999px;box-shadow:5px 5px 0 #152038;transition:box-shadow .15s,transform .15s}
.x-search svg{position:absolute;left:18px;color:#7a86a8}
.x-search input{flex:1;min-width:0;height:52px;border:0;background:none;color:#152038;font-size:15px;padding:0 8px 0 48px;outline:none;font-family:var(--x-jp);font-weight:600}
.x-search input::placeholder{color:#8a93a8}
.x-search button{border:0;background:#152038;color:#fff;font:900 14px var(--x-jp);height:40px;border-radius:999px;padding:0 20px;margin-right:6px;cursor:pointer;transition:background .2s}
.x-search button:hover{background:var(--x-coral)}
.x-search:focus-within{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--x-sun)}

/* ---- レーダー ---- */
.x-radar{position:relative;width:min(100%,500px);aspect-ratio:1;justify-self:center;margin:6px 0 18px;--sweep:6s}
.x-rd-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #ffffff55;background:radial-gradient(circle,#ffffff14,#ffffff00 70%)}
.x-rd-ring.r2{inset:17%;border-color:#ffffff66}.x-rd-ring.r3{inset:34%;border-color:#ffffff80}
.x-rd-cross{position:absolute;inset:0;background:linear-gradient(#ffffff44,#ffffff44) center/1.5px 100% no-repeat,linear-gradient(#ffffff44,#ffffff44) center/100% 1.5px no-repeat;border-radius:50%}
.x-rd-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#fff0 0deg,#fff0 286deg,#7dffe944 332deg,#7dffe9dd 360deg);animation:xspin var(--sweep) linear infinite}
@keyframes xspin{to{transform:rotate(360deg)}}
.x-rd-core{position:absolute;inset:39%;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 35% 30%,#ff8a6c,#ff5a3c 60%,#d9381b);border:3px solid #152038;box-shadow:0 0 0 8px #ffffff33,0 0 50px 4px #ff5a3c99;animation:xcore 2.4s ease-in-out infinite}
.x-rd-core b{font:800 clamp(15px,2.6vw,24px)/1 var(--x-disp);letter-spacing:.12em;color:#fff}
.x-rd-core small{font:700 7.5px/1.2 var(--x-disp);letter-spacing:.14em;color:#ffe3da;margin-top:3px}
@keyframes xcore{50%{box-shadow:0 0 0 14px #ffffff1c,0 0 70px 10px #ff5a3cbb}}
.x-rd-blips{position:absolute;inset:0}
.rb{position:absolute;left:calc(50% + var(--r) * .5 * sin(var(--a)));top:calc(50% - var(--r) * .5 * cos(var(--a)));width:0;height:0;color:#152038;z-index:2}
.rb i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--x-sun);border:2.5px solid #152038;opacity:.55;animation:xblip var(--sweep) linear infinite;animation-delay:var(--d)}
.rb span{position:absolute;left:16px;top:-16px;width:max-content;max-width:190px;display:block;padding:6px 11px 7px;border-radius:12px;background:#fff;border:2.5px solid #152038;box-shadow:3px 3px 0 #152038;font-size:11.5px;line-height:1.4;font-weight:800;opacity:0;transform:translateX(-6px);pointer-events:none;animation:xlabel var(--sweep) linear infinite;animation-delay:var(--d)}
.rb.rb-l span{left:auto;right:16px;transform:translateX(6px)}
.rb span b{display:block;font:800 9.5px var(--x-disp);letter-spacing:.1em;color:#e0431f;text-transform:uppercase;margin-bottom:1px}
.rb:hover{z-index:5}.rb:hover span,.rb:focus-visible span{opacity:1!important;transform:none;animation:none;pointer-events:auto}
.rb:hover i,.rb:focus-visible i{opacity:1;animation:none;transform:scale(1.5)}
@keyframes xblip{0%{opacity:1;transform:scale(2.2);box-shadow:0 0 30px 10px #ffd23ecc}8%{opacity:1;transform:scale(1)}55%{opacity:.7}100%{opacity:.55}}
@keyframes xlabel{0%{opacity:0;transform:translateX(-6px)}3%{opacity:1;transform:none}14%{opacity:1;transform:none}22%,100%{opacity:0}}

/* ---- ヒーローの数字 ---- */
.x-stats{list-style:none;max-width:1180px;margin:clamp(22px,4vw,44px) auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid #ffffff44}
.x-stats li{padding:20px 14px 26px;display:flex;flex-direction:column;gap:2px;border-left:2px solid #ffffff2b}
.x-stats li:first-child{border-left:0;padding-left:0}
.x-stats b{font:800 clamp(36px,5.6vw,64px)/1 var(--x-disp);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #0003}
.x-stats em{font-style:normal}
.x-stats span{font-size:13px;font-weight:800;color:#d6ddff;letter-spacing:.04em}
.x-st-live b{color:var(--x-sun)}

/* ---- サイト名のレール ---- */
.x-rail{position:relative;background:var(--card);border-block:3px solid #152038;padding:16px 0;overflow:hidden;display:grid;gap:12px}
.x-rail::before,.x-rail::after{content:"";position:absolute;top:0;bottom:0;width:min(10vw,120px);z-index:2;pointer-events:none}
.x-rail::before{left:0;background:linear-gradient(90deg,var(--card),#fff0)}.x-rail::after{right:0;background:linear-gradient(270deg,var(--card),#fff0)}
.x-rail-row{display:flex;width:max-content;animation:xrail 90s linear infinite}
.x-rail-row:nth-child(2){animation-direction:reverse;animation-duration:110s}
.x-rail:hover .x-rail-row{animation-play-state:paused}
.x-rail-set{display:flex;gap:12px;padding-right:12px}
.x-rail a{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:8px 18px 8px 10px;border-radius:999px;background:var(--card);border:2px solid var(--x-edge);color:var(--ink);font:800 14px var(--x-disp);box-shadow:3px 3px 0 var(--x-sh);transition:transform .15s,background .2s,box-shadow .15s}
.x-rail a img{width:24px;height:24px;border-radius:7px;background:#fff;padding:2px;border:1.5px solid var(--line)}
.x-rail a:hover{background:var(--x-sun);color:#152038;transform:translateY(-3px);box-shadow:3px 6px 0 #152038}
@keyframes xrail{to{transform:translateX(-50%)}}

/* ---- LIVE FEED（ライブの壁）：明るいラベンダー ---- */
.x-live{position:relative;background:var(--x-live);padding:clamp(48px,7vw,92px) 0 clamp(54px,7vw,90px);overflow:hidden;border-bottom:3px solid #152038}
.x-live::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 95% 0,#ffd23e55,transparent 70%),radial-gradient(600px 420px at 0 70%,#ff5a3c22,transparent 70%),radial-gradient(#2a3de022 1.6px,transparent 2px) 0 0/26px 26px;pointer-events:none}
.x-live .x-wrap{position:relative}
.x-live-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.x-k{display:inline-flex;align-items:center;gap:9px;margin:0 0 12px;padding:5px 14px;background:#fff;border:2.5px solid #152038;border-radius:999px;box-shadow:3px 3px 0 #152038;font:800 12.5px var(--x-disp);letter-spacing:.14em;color:#e0431f;text-transform:uppercase}
.x-live h2{width:fit-content;max-width:100%;font:900 clamp(34px,6.4vw,72px)/1.1 var(--x-jp);letter-spacing:.005em;margin:0 0 12px;color:var(--ink);background:linear-gradient(transparent 64%,#ffd23e 64%);padding:0 6px;margin-left:-6px}
.x-sub{margin:0;color:var(--sub);font-size:15.5px;line-height:1.85;max-width:36em;font-weight:600}
.x-live-meta{display:flex;align-items:center;gap:12px}
.x-upd{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--card);border:2.5px solid var(--x-edge);box-shadow:3px 3px 0 var(--x-sh);font-size:13px;font-weight:800;color:var(--sub)}
.x-upd b{color:var(--ink);font-family:var(--x-disp);font-size:15px}
.x-refresh{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:2.5px solid #152038;background:var(--x-sun);color:#152038;cursor:pointer;box-shadow:3px 3px 0 #152038;transition:transform .4s var(--x-ease),box-shadow .15s}
.x-refresh:hover{transform:rotate(180deg)}
.x-refresh:active{box-shadow:0 0 0 #152038}
.x-refresh.is-busy svg{animation:xspin .8s linear infinite}
.x-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.x-chips button{border:2.5px solid var(--x-edge);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 20px;font:900 14px var(--x-jp);cursor:pointer;box-shadow:3px 3px 0 var(--x-sh);transition:transform .15s,box-shadow .15s,background .2s}
.x-chips button:hover{transform:translate(-1px,-1px);background:var(--x-sun);color:#152038;box-shadow:5px 5px 0 #152038}
.x-chips button[aria-pressed=true]{background:var(--x-coral);border-color:#152038;color:#fff;box-shadow:3px 3px 0 #152038}
.x-wall{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));gap:22px;min-height:200px}
.lw{--kc:var(--x-amber);--kt:#c77a00;position:relative;display:flex;flex-direction:column;border-radius:22px;background:var(--card);border:2.5px solid var(--x-edge);box-shadow:5px 5px 0 var(--kc);overflow:hidden;transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease);animation:xrise .6s both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes xrise{from{opacity:0;transform:translateY(18px)}}
.lw:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--kc)}
.lw.k-video{--kc:#ff5a3c;--kt:#e0431f}.lw.k-podcast{--kc:#7b5cff;--kt:#6a49e8}.lw.k-news{--kc:#12c9a9;--kt:#0b9f86}.lw.k-lesson{--kc:#ffb23e;--kt:#c77a00}.lw.k-blog{--kc:#2f8bff;--kt:#1f6fe0}.lw.k-word{--kc:#ff5fa8;--kt:#d63a8c}
.lw.is-off{display:none}
.lw-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--soft);border-bottom:2.5px solid var(--x-edge)}
.lw-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.lw:hover .lw-img img{transform:scale(1.07)}
.lw-ph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 80% 20%,#ffffffaa 0 40px,transparent 41px),linear-gradient(135deg,color-mix(in srgb,var(--kc) 40%,#fff),color-mix(in srgb,var(--kc) 80%,#fff))}
.lw-ph b{font:800 84px/1 var(--x-disp);color:#152038;opacity:.85;transform:rotate(-6deg)}
.lw-kind{position:absolute;left:10px;top:10px;padding:4px 12px;border-radius:999px;background:#fff;border:2px solid #152038;color:#152038;font:900 11.5px var(--x-jp);letter-spacing:.04em;box-shadow:2px 2px 0 #152038}
.lw-new{position:absolute;right:10px;top:10px;padding:3px 9px;border-radius:8px;background:var(--x-coral);border:2px solid #152038;color:#fff;font:800 10.5px/1.5 var(--x-disp);letter-spacing:.1em;animation:xblink 1.6s ease-in-out infinite}
.lw-today{background:#fff;color:#152038;animation:none}
.lw-b{display:flex;flex-direction:column;gap:9px;padding:15px 16px 14px;flex:1}
.lw-src{display:flex;align-items:center;gap:8px;margin:0;font:800 12px var(--x-disp);letter-spacing:.06em;color:var(--kt);text-transform:uppercase;min-width:0}
.lw-src span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-src i{font-style:normal;flex:none;color:var(--sub);border:1.5px solid var(--line);border-radius:6px;padding:0 6px;font-size:10.5px;line-height:18px}
.lw-t{font:800 16px/1.55 var(--x-jp);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:auto-phrase}
.lw-t::after{content:"";position:absolute;inset:0;z-index:1}
.lw-t:hover{color:var(--kt)}
.lw-x{margin:0;font-size:13px;line-height:1.7;color:var(--sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lw-ft{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:6px;font:800 12px var(--x-disp);color:var(--faint);position:relative;z-index:2}
.lw-ft a{color:var(--kt);font:900 12px var(--x-jp);padding:4px 0}
.lw-ft a:hover{text-decoration:underline}
.x-live-more{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:36px 0 0}
.x-live .empty{padding:30px 0}

/* ---- 明るいゾーン ---- */
.x-light{background:transparent}
.x-light .blk{padding:clamp(54px,7vw,96px) 0}
.x-light .blk-tint::before{display:none}
.x-light .blk-tint{background:color-mix(in srgb,var(--bg2) 70%,transparent);border-block:3px solid #152038}
.x-light .blk-hd{text-align:left;margin:0 0 36px;max-width:none}
.blk-k,.x-light .blk-k{display:inline-flex;align-items:center;gap:10px;font:800 12.5px var(--x-disp);letter-spacing:.16em;color:#e0431f;margin:0 0 12px;padding:5px 14px;background:var(--card);border:2.5px solid var(--x-edge);border-radius:999px;box-shadow:3px 3px 0 var(--x-sh)}
.x-light .blk-hd h2{width:fit-content;max-width:100%;font:900 clamp(30px,5.4vw,56px)/1.15 var(--x-jp);letter-spacing:.005em;margin:0 0 14px;background:linear-gradient(transparent 64%,var(--x-hl) 64%);padding:0 6px;margin-left:-6px}
.x-light .blk-hd p:not(.blk-k){font-size:16px;max-width:40em;font-weight:600}
.x-light .blk-more{justify-content:flex-start}

/* 段階カード */
.stg{gap:24px}
.stg-c{min-height:290px;border-radius:28px;padding:28px 26px 24px;border:3px solid #152038;box-shadow:8px 8px 0 var(--c);transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease)}
.stg-c:hover{transform:translate(-4px,-4px);box-shadow:13px 13px 0 var(--c)}
.stg-t b{font:900 clamp(26px,3vw,36px)/1.15 var(--x-jp);color:var(--ink)}
.stg-t small{max-width:68%;font-weight:600}
.stg-go{display:inline-flex;align-items:center;gap:6px;font:900 14px var(--x-jp)}
.stg-go svg{transition:transform .2s}.stg-c:hover .stg-go svg{transform:translateX(5px)}
.stg-c img{width:170px;height:170px;border:3px solid #152038}
.stg-c li{border:2px solid #152038}
:root[data-theme=dark] .stg-c li{background:#0b1233d9}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .stg-c li{background:#0b1233d9}}

/* 診断バナー */
.x-shindan{padding:clamp(20px,3vw,40px) 0}
.x-sd{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:30px;align-items:center;border-radius:36px;border:3px solid #152038;box-shadow:10px 10px 0 #152038;padding:clamp(30px,5vw,60px);overflow:hidden;color:#fff;background:radial-gradient(560px 380px at 100% 0,#ff5a3caa,transparent 70%),radial-gradient(500px 400px at 0 100%,#19e3c177,transparent 70%),var(--x-royal);transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease)}
.x-sd:hover{transform:translate(-4px,-4px);box-shadow:15px 15px 0 #152038}
.x-sd-k{font:800 12.5px var(--x-disp);letter-spacing:.18em;color:var(--x-sun);margin:0 0 12px}
.x-sd h2{font:900 clamp(32px,5.6vw,64px)/1.1 var(--x-jp);margin:0 0 16px;color:#fff;text-shadow:0 4px 0 #0003}
.x-sd h2 span{background:linear-gradient(100deg,#fff6a8,#ffd23e 50%,#ff9a3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-sd p{color:#e6eaff;font-size:16px;line-height:1.9;margin:0 0 24px;max-width:34em}
.x-sd-r{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-5deg)}
.x-sd-r span{display:grid;place-items:center;aspect-ratio:1;border-radius:24px;font:900 clamp(20px,3vw,30px) var(--x-jp);color:#152038;background:#fff;border:3px solid #152038;box-shadow:4px 4px 0 #152038;animation:xfloat 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}
.x-sd-r span:nth-child(1){background:var(--x-coral);color:#fff}.x-sd-r span:nth-child(4){background:var(--x-sun)}.x-sd-r span:nth-child(5){background:var(--x-teal)}
@keyframes xfloat{50%{transform:translateY(-12px) rotate(2deg)}}

/* 価値・カテゴリ・ランキング・勉強法 */
.val-c{border:3px solid #152038;border-radius:28px;box-shadow:7px 7px 0 #152038;transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease)}
.val-c:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--x-coral)}
.val-c .val-n{font:800 56px/1 var(--x-disp);letter-spacing:-.02em;margin:0 24px 6px;background:var(--x-hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.val-c h3{font:900 21px/1.4 var(--x-jp)}
.cat2{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:20px}
.cat2-c{grid-column:span 2;aspect-ratio:16/11;border-radius:26px;border:3px solid #152038;box-shadow:6px 6px 0 #152038;transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease)}
.cat2-c:nth-child(1),.cat2-c:nth-child(2){grid-column:span 3;aspect-ratio:16/9}
.cat2-c:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--x-coral)}
.cat2-c span{background:#fff;border:2.5px solid #152038;border-radius:14px;padding:9px 16px;box-shadow:3px 3px 0 #152038}
.cat2-c b{color:#152038;font:900 16px var(--x-jp)}
.cat2-c small{color:#e0431f}
.pod{gap:22px}
.pod-c{border-radius:28px;border:3px solid #152038;box-shadow:7px 7px 0 var(--x-teal);transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease)}
.pod-c:nth-child(2){box-shadow:7px 7px 0 var(--x-violet)}.pod-c:nth-child(3){box-shadow:7px 7px 0 var(--x-amber)}
.pod-c:first-child{border:3px solid #152038;box-shadow:7px 7px 0 var(--x-coral);background:linear-gradient(180deg,#fff4f0,var(--card) 60%)}
.pod-c:hover{transform:translate(-4px,-4px)}
.pod-n{font:800 80px/.9 var(--x-disp);color:var(--bg2)}
.pod-c:first-child .pod-n{color:var(--x-coral)}
.pod-c b{font:800 22px var(--x-disp)}
.rank-list{border:3px solid #152038;border-radius:24px;box-shadow:7px 7px 0 #152038}
.hk3{border:3px solid #152038;border-radius:26px;box-shadow:6px 6px 0 var(--c);transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease)}
.hk3:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--c)}
.hk3 b{font:900 19px/1.45 var(--x-jp)}
.panel2{border:3px solid #152038;border-radius:28px;box-shadow:7px 7px 0 var(--x-sky)}
.panel2-hd h2{font:900 24px var(--x-jp)}
.feature{border:3px solid #152038;border-radius:26px;box-shadow:6px 6px 0 #152038}
.feature:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--x-teal);border-color:#152038}
.feature b{font:900 19px var(--x-jp)}
.x-light .cta{border-radius:36px;border:3px solid #152038;box-shadow:10px 10px 0 #152038;padding:clamp(30px,5vw,56px);background:radial-gradient(520px 360px at 100% 0,#ff5a3caa,transparent 70%),var(--x-royal);margin:30px 0 70px}
.x-light .cta h2{font:900 clamp(28px,4.6vw,46px)/1.2 var(--x-jp);text-shadow:0 3px 0 #0003}
.cta-b a{border-radius:18px;font-weight:900;padding:16px 8px;border:2.5px solid #152038;background:#fff;color:#152038;box-shadow:3px 3px 0 #152038}
.cta-b a:hover{background:var(--x-sun);transform:translate(-2px,-2px);box-shadow:5px 5px 0 #152038}

/* ---- 診断ページ ---- */
.sd{max-width:760px;margin:0 auto}
.sd-intro{text-align:center;margin:10px 0 28px}
.sd-intro h1{font:900 clamp(34px,7vw,60px)/1.1 var(--x-jp);margin:6px 0 14px}
.sd-intro h1 span{background:var(--x-hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-intro p{color:var(--sub);font-size:16px;margin:0;font-weight:600}
.sd-stage{position:relative;min-height:340px}
.sd-q{border:3px solid #152038;border-radius:32px;background:var(--card);padding:clamp(22px,4vw,38px);box-shadow:9px 9px 0 var(--x-coral);animation:xrise .45s both}
.sd-prog{display:flex;gap:6px;margin:0 0 18px}
.sd-prog i{flex:1;height:10px;border-radius:10px;background:var(--soft);border:2px solid var(--x-edge)}
.sd-prog i.on{background:var(--x-coral)}
.sd-no{font:800 13px var(--x-disp);letter-spacing:.16em;color:#e0431f;margin:0 0 6px}
.sd-q h2{font:900 clamp(24px,4.4vw,34px)/1.3 var(--x-jp);margin:0 0 20px}
.sd-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sd-opt{display:flex;flex-direction:column;gap:2px;text-align:left;border:2.5px solid var(--x-edge);border-radius:20px;background:var(--card);padding:16px 18px;font:900 17px/1.4 var(--x-jp);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--x-sh);transition:transform .15s var(--x-ease),background .15s,box-shadow .15s}
.sd-opt small{font:600 12.5px/1.5 var(--x-jp);color:var(--sub)}
.sd-opt:hover{background:var(--x-sun);color:#152038;border-color:#152038;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #152038}
.sd-opt:hover small{color:#4a3a00}
.sd-opt:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #152038}
.sd-back{margin-top:18px;background:none;border:0;color:var(--sub);font:800 14px var(--x-jp);cursor:pointer;padding:6px 0}
.sd-back:hover{color:var(--x-coral)}
.sd-res{animation:xrise .6s both}
.sd-card{position:relative;isolation:isolate;overflow:hidden;border-radius:36px;border:3px solid #152038;box-shadow:10px 10px 0 #152038;color:#fff;padding:clamp(28px,5vw,48px);background:radial-gradient(500px 340px at 100% 0,#ff5a3caa,transparent 70%),radial-gradient(500px 340px at 0 100%,#19e3c177,transparent 70%),var(--x-royal)}
.sd-card::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#ffffff44 1.6px,transparent 2.2px);background-size:26px 26px;-webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);mask-image:linear-gradient(160deg,#000,transparent 70%)}
.sd-k{font:800 12.5px var(--x-disp);letter-spacing:.18em;color:var(--x-sun);margin:0 0 8px}
.sd-type{font:900 clamp(30px,6vw,52px)/1.15 var(--x-jp);margin:0 0 6px;text-shadow:0 3px 0 #0003}
.sd-type em{font-style:normal;background:linear-gradient(100deg,#fff6a8,#ffd23e 50%,#ff9a3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-line{color:#e6eaff;font-size:16px;margin:0 0 20px}
.sd-plan{border:2.5px solid #152038;background:#fff;color:#152038;border-radius:16px;padding:12px 16px;font-size:14.5px;line-height:1.8;font-weight:700;margin:0 0 6px;box-shadow:3px 3px 0 #152038}
.sd-picks{display:grid;gap:14px;margin:24px 0 0;padding:0;list-style:none}
.sd-pick{display:grid;grid-template-columns:44px 52px minmax(0,1fr);gap:14px;align-items:center;background:#fff;border:2.5px solid #152038;border-radius:22px;padding:14px 18px;color:#152038;box-shadow:4px 4px 0 #152038;transition:transform .15s var(--x-ease),box-shadow .15s}
.sd-pick:hover{background:var(--x-sun);transform:translate(-3px,-3px);box-shadow:7px 7px 0 #152038;color:#152038}
.sd-pick .n{font:800 36px/1 var(--x-disp);color:var(--x-coral);text-align:center}
.sd-pick img{width:52px;height:52px;border-radius:14px;background:#fff;padding:7px;border:2px solid #152038}
.sd-pick b{display:block;font:800 18px/1.3 var(--x-disp)}
.sd-pick span{display:block;font-size:13px;line-height:1.6;color:#4f5a73;margin-top:2px;font-weight:600}
.sd-share{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.sd-share a,.sd-share button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font:900 15px var(--x-jp);border:2.5px solid #152038;cursor:pointer;text-decoration:none;box-shadow:3px 3px 0 #152038;transition:transform .15s}
.sd-share a:hover,.sd-share button:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #152038}
.sd-x{background:#fff;color:#152038}.sd-line-b{background:#06c755;color:#fff}.sd-copy{background:var(--x-sun);color:#152038}
.sd-more{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---- スクロールで出てくる（impact.js が x-rv を付ける。JS がなければ最初から見える）---- */
.x-rv{opacity:0}
.x-rv.x-in{opacity:1;animation:xrise .7s backwards;animation-delay:var(--rv,0ms)}

/* ---- スマホ ---- */
@media(max-width:980px){
  .x-hero-in{grid-template-columns:1fr}
  .x-radar{width:min(86%,420px);margin:0 auto 10px}
  .x-sd{grid-template-columns:1fr}.x-sd-r{max-width:340px;margin:0 auto}
  .cat2{grid-template-columns:repeat(2,minmax(0,1fr))}.cat2-c,.cat2-c:nth-child(1),.cat2-c:nth-child(2){grid-column:span 1;aspect-ratio:16/11}
}
@media(max-width:700px){
  .hd-in{height:62px}
  .ph{border-radius:26px;box-shadow:6px 6px 0 var(--x-sh)}
  .ph .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-hd h2::before{min-width:44px;height:44px;font-size:20px;border-radius:13px}
  .sec-hd{margin-top:36px}
  .x-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-stats li:nth-child(3){border-left:0;padding-left:0}
  .x-stats li:nth-child(n+3){border-top:2px solid #ffffff2b}
  .x-cta .x-btn{flex:1 1 100%}
  .x-live-meta{width:100%;justify-content:space-between}
  .sd-opts{grid-template-columns:1fr}
  .sd-pick{grid-template-columns:34px 44px minmax(0,1fr);gap:10px;padding:12px}
  .stg-c{box-shadow:5px 5px 0 var(--c)}
  .cat2{grid-template-columns:1fr}
  .rb span{max-width:140px;font-size:10px}
  .tab{padding:0 13px}
  .steps li{padding:14px 14px 14px 66px}
  .box{box-shadow:4px 4px 0 var(--bc)}
}
@media(prefers-reduced-motion:reduce){
  .x-aurora i,.x-rd-sweep,.x-rd-core,.x-rail-row,.rb i,.rb span,.x-dot,.hd::after,.x-sd-r span,.lw,.lw-new,.ph-w,main{animation:none!important}
  .rb span{opacity:0}
  .x-rv{opacity:1}.x-rv.x-in{animation:none}
}

/* ---- 細かい調整 ---- */
.side dl.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;transform:none;animation:none;align-items:baseline}
.side dl.kv dd{margin:0;font-weight:800;overflow-wrap:anywhere}
h1,h2,h3,.x-live h2,.x-light .blk-hd h2,.sec-hd h2,.box h2{text-wrap:balance;word-break:auto-phrase}
.x-live h2{font-size:clamp(30px,5.4vw,64px)}

/* ---- ロードマップ・スケジュール・対象カード ---- */
.road{gap:26px;padding-left:44px}
.road::before{left:15px;top:6px;bottom:6px;border-left:5px dotted var(--x-edge);opacity:.5}
.rs{--bc:var(--x-coral);padding:22px 24px;border:2.5px solid var(--x-edge);border-radius:24px;box-shadow:6px 6px 0 var(--bc);background:var(--card);transition:transform .18s var(--x-ease),box-shadow .18s var(--x-ease)}
.rs:nth-child(4n+2){--bc:var(--x-teal)}.rs:nth-child(4n+3){--bc:var(--x-violet)}.rs:nth-child(4n+4){--bc:var(--x-amber)}
.rs:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--bc)}
.rs::before{left:-43px;top:20px;width:26px;height:26px;background:var(--bc);border:3px solid #152038;box-shadow:0 0 0 5px var(--bg)}
.rs .st{background:#152038;color:var(--x-sun);border-radius:999px;font:800 12px/1 var(--x-disp);padding:7px 14px}
.rs .per{background:var(--x-hl);border:2px solid var(--x-edge);border-radius:999px;padding:2px 12px;color:#152038;font-weight:900}
:root[data-theme=dark] .rs .per{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .rs .per{color:#fff}}
.rs h3{font:900 clamp(18px,2.6vw,23px)/1.45 var(--x-jp);margin:12px 0 8px}
.rs p{line-height:1.9}
.rs ul{margin-top:10px}
.menu td{border-bottom:2px dashed var(--line);padding:12px 12px}
.menu td:first-child{font:800 14px var(--x-disp);color:#e0431f}
.ctabs button{border:2.5px solid var(--x-edge);border-radius:999px;font-weight:900;padding:6px 20px;box-shadow:3px 3px 0 var(--x-sh);transition:all .15s}
.ctabs button:hover{background:var(--x-sun);color:#152038}
.ctabs button[aria-pressed=true]{background:var(--x-coral);border-color:#152038;color:#fff;box-shadow:3px 3px 0 #152038}
.aud{border-left:2.5px solid var(--x-edge)!important;border-radius:24px;padding:18px 20px}
.aud::after{color:var(--x-coral)}
.aud:hover::after{transform:translate(4px,-50%)}
.aud .ae{border-radius:16px;border:2.5px solid var(--x-edge)}
.aud b{font:900 19px/1.3 var(--x-jp)}
img.banner,.banner{border:3px solid #152038;border-radius:30px;box-shadow:8px 8px 0 var(--x-sh);display:block}
.ph.g-input{--g1:#2f6bff;--g2:#00b8ff}.ph.g-memory{--g1:#7b4dff;--g2:#d04dff}.ph.g-sound{--g1:#00c2a0;--g2:#2f8bff}.ph.g-output{--g1:#ff7a1a;--g2:#ff3d68}.ph.g-habit{--g1:#ff9a00;--g2:#ff4d4d}.ph.g-ai{--g1:#00a8d9;--g2:#6c4dff}

/* lux.css の古い指定を打ち消す */
.sec-hd h2{display:flex;align-items:center;position:static;padding-top:0;letter-spacing:.005em}
.sec-hd h2::before{position:static;left:auto;top:auto;width:auto;margin:0}
.ph::before{display:block;width:auto;height:auto;margin:0;left:0;top:0}
.ph h1{letter-spacing:.005em;line-height:1.1}
.ph .catch{letter-spacing:.02em;font-family:var(--x-jp)}
.brand .logo{font-size:0;color:transparent}