:root{--bg:#f4f6fa;--card:#fff;--ink:#1c1f24;--mute:#5b6270;--dim:#8a919e;--line:#e3e6eb;--brand:#1f4fd8;--brand2:#e8eefc;--brand3:#c7d6fb;--accent:#f26f21;--accbg:#fff1e8;--ok:#1a8f5a;--okbg:#e9f7ef;--ng:#d13b3b;--ngbg:#fdecec;--warn:#b26a00;--warnbg:#fff6e5;--own:#7a3fd1;--ownbg:#f2ebfd;--yt:#c4302b;--sky:#0e7490;--skybg:#e6f6fa}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* はみ出し対策（2026-09-16）。狭い画面で「studio.workspace.google.com を開く」がSTEPカードから
   はみ出した件の根治。日本語はどこでも折り返せるが、URL・製品名・IDのような長い英数の連続は
   既定では途中で折り返さず、flex/grid で細くなった箱を突き破る。
   anywhere にすると min-content も1文字幅まで落ちるので、grid の 1fr トラックが長いURLに
   押し広げられてページごと横スクロールになるのも同時に防げる（break-word では防げない）。 */
html{overflow-wrap:anywhere}
/* 最後の砦：どこかで想定外にはみ出しても、ページ全体が横スクロールしないようにする。
   clip は hidden と違いスクロールコンテナを作らないので、sticky ヘッダー／サイドバーを壊さない */
html{overflow-x:clip}
body{margin:0;font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
svg.ic{width:1em;height:1em;flex:none;vertical-align:-.15em}
.ibox{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;flex:none;font-size:18px;font-style:normal}
.ibox.lg{width:48px;height:48px;border-radius:14px;font-size:24px}
.ibox.sm{width:28px;height:28px;border-radius:8px;font-size:15px}
.t-b{background:var(--brand2);color:var(--brand)}.t-o{background:var(--accbg);color:var(--accent)}.t-g{background:var(--okbg);color:var(--ok)}.t-r{background:var(--ngbg);color:var(--ng)}.t-p{background:var(--ownbg);color:var(--own)}.t-y{background:var(--warnbg);color:var(--warn)}.t-s{background:var(--skybg);color:var(--sky)}.t-n{background:#eef1f6;color:#3b4350}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.top .wrap{display:flex;align-items:center;gap:14px;height:60px}
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);white-space:nowrap}
.logo svg.ls{height:30px;width:auto;flex:none;display:block}
@media (max-width:640px){.logo svg.ls{height:23px}}@media (max-width:400px){.logo svg.ls{height:19px}}
@media (max-width:400px){.wrap{padding:0 12px}header.top .wrap{gap:8px}}   /* 320px 幅ではロゴ＋「今日のAIドリル」が 20px 余白では収まらず、全ページが 7px 横スクロールしていた（2026-09-16） */
.logo svg.lm{width:30px;height:30px;flex:none}
footer .logo{margin-right:6px}footer .logo svg.ls{height:22px}
footer .fline{margin-top:8px;line-height:1.7}
footer .fsep{margin:0 4px;color:var(--line)}
.hero .heromark{position:absolute;right:-70px;top:-80px;width:340px;height:340px;opacity:.14;pointer-events:none}.hero>*:not(.heromark){position:relative}
.proto{font-size:11px;background:#fff3e8;color:#9a4b00;border:1px solid #f7cfae;border-radius:999px;padding:2px 8px;white-space:nowrap}
.hdnote{margin-left:auto;font-size:12px;color:var(--mute);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}   /* ヘッダーは1行固定なので、文言が伸びても押し出さず自分が縮む（はみ出し対策 2026-09-16） */
.hdnote svg{color:var(--warn)}
/* 個人＝無料／法人＝有料 の線引き（全ページのヘッダー右端） */
.hdfree{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--accent);background:var(--accbg);border:1px solid #f6dcc6;border-radius:999px;padding:4px 11px;text-decoration:none;white-space:nowrap;flex:none}
.hdfree svg{color:var(--accent)}
.hdfree:hover{border-color:var(--accent)}
.promise{background:#1c1f24;color:#fff;font-size:12.5px}
.promise .wrap{display:flex;gap:6px 22px;flex-wrap:wrap;padding:7px 20px}
.promise span{display:inline-flex;align-items:center;gap:6px}
.promise b{color:#ffd28a}.promise svg{color:#ffd28a}
.layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:28px;padding:28px 0 60px}
.layout>main{min-width:0}
aside.side{position:sticky;top:72px;align-self:start;max-height:calc(100vh - 84px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
aside.side a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px}
aside.side a .ibox{width:28px;height:28px;border-radius:8px;font-size:14px}
aside.side a small{display:block;color:var(--dim);font-size:11px;line-height:1.3}
aside.side a.on{background:var(--brand2);color:var(--brand);font-weight:700}
aside.side .sidehead{font-size:11px;font-weight:800;color:var(--dim);letter-spacing:.08em;margin:12px 0 2px 10px}
aside.side .sidehead:first-of-type{margin-top:4px}
aside.side .sidenote{font-size:11px;color:var(--mute);margin:1px 0 4px 10px;line-height:1.45}
/* 職種別 */
.jobsec{margin:26px 0 8px}
.lvrow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.lvrow .lv{display:flex;flex-direction:column;gap:4px}
.lvrow .lv b{font-size:13.5px;color:var(--brand)}.lvrow .lv span{font-size:11.5px;color:var(--mute);line-height:1.4}
.lvrow .mini{margin:0}
.case{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.case .ch{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.case .ch b{font-size:15px;line-height:1.45;display:block}
.case .ch .lvtag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--brand2);color:var(--brand);margin-top:4px}
.case .ch .lvtag.l3{background:var(--accbg);color:var(--accent)}.case .ch .lvtag.l2{background:var(--ownbg);color:var(--own)}
.case .prompt{margin-top:6px}
.case .pn{font-size:12.5px;font-weight:700;color:var(--mute);margin-top:6px;display:flex;align-items:center;gap:6px}
.tier3col{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tier3col .tc{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.tier3col .tc.ok{background:var(--okbg);border-color:#bfe6d0}.tier3col .tc.hi{background:var(--brand2);border:2px solid var(--brand)}.tier3col .tc.wa{background:var(--warnbg);border-color:#f4d9b3}
.tier3col .tc b{font-size:14px;display:flex;align-items:center;gap:6px}.tier3col .tc span{font-size:12.5px;color:var(--mute);line-height:1.55}
.tier3col .tc .tg{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;align-self:flex-start}
.morelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:10px}
.morelist a{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;text-decoration:none;color:var(--ink);font-size:13.5px}
.morelist a:hover{border-color:var(--brand)}
.reco{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.reco .rc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--ink)}
.reco .rc:hover{border-color:var(--brand)}
.reco .rc .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.reco .rc small{display:block;color:var(--dim);font-size:11px}
.ucbar{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.fc{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;color:var(--ink)}
.fc small{color:var(--dim);font-size:11px}.fc.on{background:var(--ink);color:#fff;border-color:var(--ink)}.fc.on small{color:#cfd6e4}.fc.z.on{background:var(--accent);border-color:var(--accent)}
.ucsearch{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 10px;color:var(--dim)}
.ucsearch input{flex:1;border:0;outline:0;font-size:13.5px;font-family:inherit;background:transparent;min-width:0;color:var(--ink)}
.ucopen{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;color:var(--ink)}
.uchead{font-size:12.5px;font-weight:800;color:var(--mute);margin:18px 0 6px;display:flex;align-items:center;gap:6px}.uclist .uchead:first-child{margin-top:4px}
details.uc{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:8px}
details.uc summary{list-style:none;display:flex;gap:10px;align-items:center;padding:11px 14px;cursor:pointer}
details.uc summary::-webkit-details-marker{display:none}
details.uc summary .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand2);color:var(--brand);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
details.uc summary .t{flex:1;min-width:0}details.uc summary .t b{display:block;font-size:14.5px;line-height:1.45}
details.uc summary .t small{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--dim);font-size:11.5px;margin-top:4px}
details.uc .lvtag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--brand2);color:var(--brand)}
details.uc .lvtag.l3{background:var(--accbg);color:var(--accent)}details.uc .lvtag.l2{background:var(--ownbg);color:var(--own)}
details.uc summary>svg{flex:none;transition:transform .15s;color:var(--dim)}details.uc[open] summary>svg{transform:rotate(180deg)}
details.uc[open] summary{border-bottom:1px dashed var(--line)}details.uc summary:hover{background:#fafbfd;border-radius:14px}
.ucb{padding:6px 14px 14px}.ucb .pn{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--mute);margin-top:4px}
.ucb .pn .how{font-weight:500;color:var(--dim);font-size:11.5px}.ucb .pn .how:not(:empty)::before{content:"／ ";color:var(--line)}
.ucmeta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12px;color:var(--mute)}.ucmeta span{display:inline-flex;gap:5px;align-items:flex-start;line-height:1.5}.ucmeta b{font-weight:700;color:var(--ink)}
.ucmeta svg{flex:none;margin-top:3px}
@media (max-width:900px){.lvrow{grid-template-columns:1fr}.tier3col,.reco{grid-template-columns:1fr}}
aside.side a:hover{background:#eef1f6}
.progress{margin:0 0 10px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:12.5px;color:var(--mute)}
.progress b{color:var(--ok);font-size:16px}
.progress .bar{height:6px;background:#eef1f6;border-radius:3px;margin-top:6px;overflow:hidden}.progress .bar i{display:block;height:100%;background:var(--ok);width:0}
h1{font-size:28px;margin:0 0 6px;letter-spacing:.01em;line-height:1.35}
h2{font-size:20px;margin:40px 0 14px;padding-left:12px;border-left:4px solid var(--brand);display:flex;align-items:center;gap:8px}
h2 .sub{font-size:12.5px;color:var(--mute);font-weight:400;margin-left:4px}
h3{font-size:16px;margin:0 0 6px}
.lead{color:var(--mute);margin:0 0 18px;font-size:15px;max-width:760px}
.chapnum{font-size:12px;color:var(--brand);font-weight:700;letter-spacing:.1em}
.goal{display:inline-flex;align-items:center;gap:8px;background:var(--okbg);color:var(--ok);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;margin:0 0 18px}
/* hero */
.hero{background:linear-gradient(135deg,#1f4fd8,#4c7cf0);color:#fff;border-radius:20px;padding:40px 36px;margin-top:28px;position:relative;overflow:hidden}
.hero h1{font-size:34px;color:#fff;margin-bottom:10px}
.hero p{font-size:16px;opacity:.95;max-width:720px;margin:0 0 20px}
.btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--brand);font-weight:700;padding:11px 18px;border-radius:12px;text-decoration:none;margin-right:10px;margin-bottom:8px}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.btn.pri{background:var(--brand);color:#fff}
/* generic figure card */
.kv{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:14px 0 22px}
.kv .kvt{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:14px;color:var(--ink)}
.kv .kvt small{color:var(--mute);font-weight:400;font-size:12.5px;margin-left:4px}
.map .kvt{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;margin-bottom:12px;color:var(--ink)}
.map .kvt small{color:var(--mute);font-weight:400;font-size:12px;margin-left:4px}
@media (max-width:640px){.kv{padding:16px}.map{padding:14px 16px}.kv .kvt,.map .kvt{display:block}.kv .kvt>svg,.map .kvt>svg{vertical-align:-3px;margin-right:6px}.kv .kvt small,.map .kvt small{display:block;margin:2px 0 0;margin-left:0}.map .kvt .kcount{margin:6px 0 0}}   /* 狭い画面は補足を見出しの下の行へ（横並びだと1〜2文字幅で縦に潰れる） */
.flow{display:flex;align-items:stretch;gap:0}
.flow a.st:hover{border-color:var(--brand)}
.flow .st{flex:1;min-width:0;display:block;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;position:relative}
.flow .st .n{position:absolute;top:-10px;left:12px;background:var(--brand);color:#fff;font-weight:800;font-size:11px;border-radius:999px;padding:2px 8px;letter-spacing:.05em}
.flow .st .ibox{margin:6px 0 8px}
.flow .st b{display:block;font-size:13.5px;line-height:1.45;margin-bottom:3px}
.flow .st span{display:block;font-size:12px;color:var(--mute);line-height:1.5}
.flow .ar{flex:none;width:28px;display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:20px}
.flow.o .st .n{background:var(--accent)}.flow.o .ar{color:var(--accent)}
.flow .st.hi{border:2px solid var(--brand);background:var(--brand2)}
.flow .st.dn{border:2px dashed var(--ng);background:var(--ngbg)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px}
.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c4{grid-template-columns:repeat(4,1fr)}.cards.c5{grid-template-columns:repeat(5,1fr)}.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards .cd{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px;position:relative}
.cards .cd b{font-size:13.5px;line-height:1.45}
.cards .cd span{font-size:12px;color:var(--mute);line-height:1.5}
.cards .cd.hi{border:2px solid var(--brand);background:var(--brand2)}
.cards .cd.ok{background:var(--okbg);border-color:#bfe6d0}.cards .cd.ng{background:var(--ngbg);border-color:#f3c9c7}.cards .cd.wa{background:var(--warnbg);border-color:#f4d9b3}
.cards .cd .bd{position:absolute;top:-10px;right:10px;font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 8px;background:var(--accent);color:#fff}
.cards .cd .bd.g{background:var(--ok)}.cards .cd .bd.r{background:var(--ng)}.cards .cd .bd.b{background:var(--brand)}.cards .cd .bd.p{background:var(--own)}
.cards .cd.wide{grid-column:1/-1}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--ink)}
.pill.g{background:var(--okbg);border-color:#bfe6d0;color:var(--ok)}.pill.r{background:var(--ngbg);border-color:#f3c9c7;color:var(--ng)}.pill.b{background:var(--brand2);border-color:var(--brand3);color:var(--brand)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vs .col{border-radius:12px;padding:12px 14px}
.vs .col.bad{background:var(--ngbg);border:1px solid #f3c9c7}.vs .col.good{background:var(--okbg);border:1px solid #bfe6d0}
.vs .col b{display:flex;align-items:center;gap:6px;font-size:14px;margin-bottom:6px}
.vs .col.bad b{color:var(--ng)}.vs .col.good b{color:var(--ok)}
.vs .col ul{margin:0;padding-left:18px;font-size:13px}.vs .col li{margin:2px 0}
.ladder{display:grid;gap:8px}
.ladder .rung{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.ladder .rung .n{font-weight:900;font-size:18px;color:var(--brand);text-align:center}
.ladder .rung b{display:block;font-size:14px}
.ladder .rung span{font-size:12.5px;color:var(--mute)}
.ladder .rung .tg{font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.ladder .rung.hi{border:2px solid var(--brand);background:var(--brand2)}
.ladder .rung.lk{border-style:dashed;border-color:#d3d8e2}
.ladder .rung.lk .n{color:var(--dim)}.ladder .rung.lk b{color:var(--mute)}
@media (max-width:640px){.ladder .rung{grid-template-columns:28px 1fr;gap:6px 10px;padding:10px 12px}.ladder .rung .n{grid-row:span 2;align-self:start;font-size:17px}.ladder .rung .tg{grid-column:2;justify-self:start;white-space:normal}}   /* 狭い画面はタグを本文の下へ（横並びのままだと長いタグが本文列を1文字幅まで押し潰す） */
.lgd{margin:10px 0 0;font-size:12px;color:var(--mute);display:flex;gap:16px;flex-wrap:wrap}
a.rung{text-decoration:none;color:inherit}a.rung:hover{border-color:var(--brand)}.ladder.ov .rung .cnt{color:var(--dim);font-size:11.5px;white-space:nowrap}.ladder.ov .rung .tg svg{width:12px;height:12px}
.morelist.ov{margin-bottom:6px}.morelist.ov a{align-items:flex-start;line-height:1.4}.morelist.ov a small{display:block;color:var(--dim);font-size:11.5px;font-weight:400;margin-top:2px}.morelist.ov .ibox{margin-top:1px}.more .mbody .kv:last-child{margin-bottom:0}
.lgd>span{display:inline-flex;align-items:center;gap:5px}
.lgd .lg1{border:2px solid var(--brand);background:var(--brand2);color:var(--brand);font-weight:700;border-radius:6px;padding:0 6px}
.lgd .lg2{border:1px dashed var(--line);background:#f7f8fb;border-radius:6px;padding:1px 6px;display:inline-flex;align-items:center;gap:4px}
.big3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.big3 div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.big3 .num{font-size:34px;font-weight:900;color:var(--accent);line-height:1.1}
.big3 b{display:block;margin-top:6px;font-size:14px}
.big3 span{display:block;font-size:12px;color:var(--mute)}
/* stage cards (レベル1〜3) */
.stage{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;gap:0;align-items:stretch;margin:14px 0}
.stage .s{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;position:relative}
.stage .s.on{border:2px solid var(--brand);background:var(--brand2)}
.stage .s b.k{display:block;color:var(--brand);font-size:11.5px;letter-spacing:.1em;margin-bottom:2px}
.stage .s h3{margin:2px 0 6px;font-size:17px}
.stage .s p{margin:0;font-size:12.5px;color:var(--mute);line-height:1.55}
.stage .s .who{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;background:#eef1f6;color:#3b4350}
.stage .s .who.z{background:var(--okbg);color:var(--ok)}
.stage .ar{display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:20px}
/* chapter cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:14px}
.chapcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink);display:flex;gap:12px;align-items:flex-start;transition:.15s}
.chapcard:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 8px 24px rgba(31,79,216,.08)}
.chapcard .chapnum{display:block;margin-bottom:2px;font-size:11px}
.chapcard h3{margin:0 0 3px;font-size:16px}
.chapcard p{margin:0;color:var(--mute);font-size:12.5px;line-height:1.5}
.chapcard .cnt{margin-top:6px;font-size:12px;color:var(--brand);font-weight:700}
.group{margin:22px 0 6px;font-size:12.5px;color:var(--mute);font-weight:700;letter-spacing:.06em}
/* chapter map (mini TOC) */
.map{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:0 0 26px}
.map .mg{margin-bottom:10px}.map .mg:last-child{margin-bottom:0}
.map .mg b{display:block;font-size:12px;color:var(--brand);letter-spacing:.06em;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:5px 10px 5px 6px;font-size:12.5px;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--brand);background:var(--brand2)}
.chip .cn{background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 6px;font-weight:700;font-size:11px;color:var(--brand)}
.chip .cm{color:var(--dim);font-size:11px}
.chip.done{border-color:#bfe6d0;background:var(--okbg)}.chip.done .cn{color:var(--ok);border-color:#bfe6d0}
.chip .ck{display:none;color:var(--ok)}.chip.done .ck{display:inline-flex}
/* lesson */
.lesson{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:20px;overflow:hidden;scroll-margin-top:80px}
.lesson.done{border-color:#bfe6d0;box-shadow:inset 4px 0 0 var(--ok)}
.lhead{display:flex;gap:14px;align-items:flex-start;padding:18px 22px 10px}.lhead>div{flex:1;min-width:0}   /* 見出し列は必ず縮む（flex の既定 min-width:auto だと長いタグが列幅を決めてしまう） */
.lnum{flex:none;background:var(--brand);color:#fff;font-weight:800;border-radius:10px;padding:5px 10px;font-size:13.5px;line-height:1.2;margin-top:3px;letter-spacing:.02em}
.lesson.done .lnum{background:var(--ok)}
.lhead h3{font-size:17px;margin:0 0 6px;line-height:1.45}
.meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--mute);background:#fafbfc}
.tag.type-yt{background:#fff0ef;color:var(--yt);border-color:#f3c9c7}
.tag.type-drive{background:#eaf7f0;color:var(--ok);border-color:#bfe6d0}
.tag.type-own{background:#f2ebfd;color:var(--own);border-color:#d9c7f6}
.tag.type-text,.tag.type-quiz{background:#eef1f6;color:#3b4350}
.tag.min{background:var(--accbg);color:var(--accent);border-color:#f7cfae;font-weight:700}
.meta .tag.mine{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}
.meta .tag.chk{background:#eaf7f0;color:var(--ok);border-color:#bfe6d0}
.jobbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 14px;padding:10px 14px;border:1px solid #c9d6f7;background:var(--brand2);border-radius:12px;font-size:13px;color:var(--ink)}
.jobbar b{color:var(--brand)}.jobbar a{margin-left:auto;font-size:12px;color:var(--mute)}
.jobbar .jbsw{display:inline-flex;border:1px solid #c9d6f7;border-radius:999px;overflow:hidden;background:#fff}
.jobbar .jbsw button{border:0;background:none;padding:5px 12px;font-size:12.5px;color:var(--mute);cursor:pointer;font-family:inherit}
.jobbar .jbsw button.on{background:var(--brand);color:#fff;font-weight:700}
aside.side a .minepill{display:inline-block;margin-top:2px;font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:var(--brand);border-radius:999px;padding:1px 7px}
.jobsel .jv.jch{margin-top:8px}
.lbody{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;padding:6px 22px 16px}
.lbody.nov{grid-template-columns:1fr}
.video{position:relative;aspect-ratio:16/9;background:#0f1218;border-radius:12px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:16px;cursor:pointer;background:radial-gradient(ellipse at center,#26304a,#0f1218)}
.video .ph .play{width:64px;height:64px;border-radius:50%;background:var(--yt);display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:28px;padding-left:4px}
.video .ph.drive .play{background:var(--ok)}
.video .ph small{opacity:.8;font-size:12px;margin-top:4px}
.video video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.video.rec4{aspect-ratio:auto}.video.rec4 video{position:relative;display:block;aspect-ratio:16/9}
.video .vcap{display:flex;gap:6px;align-items:center;color:#cfd6e4;font-size:12px;padding:7px 10px;background:#0f1218}
.video .verr{padding:18px 16px;color:#fff;font-size:13px;line-height:1.7;background:#26304a}.video .verr a{color:#fff}
.chaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:8px}
.chap{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--ink)}
.chap:hover{border-color:var(--ok)}.chap b{color:var(--ok);font-size:13px}.chap a{font-size:11.5px;color:var(--mute)}
a.chap{text-decoration:none}a.chap .cl{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--mute)}
details.subclip .video{margin-top:10px;max-width:640px}
.video.own{background:var(--ownbg);border:1.5px dashed #b89ae6}
.video.own .ph{background:none;color:#4a2a8a;cursor:default}
.video.own .ph .play{background:var(--own);color:#fff;padding-left:0}
.one{background:var(--brand2);border-radius:12px;padding:12px 14px;margin-bottom:12px;display:flex;gap:10px;align-items:flex-start}
.one .ibox{background:#fff;color:var(--brand)}
.one small{display:block;color:var(--brand);font-weight:700;font-size:11px;letter-spacing:.08em}
.one b{font-size:16px;line-height:1.5;color:var(--ink);display:block}
.lbody.nov .keyrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:start}
.points{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lbody.nov .points{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.points li{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border-radius:10px;padding:8px 10px}
.points b{display:block;font-size:13.5px;line-height:1.45}
.points span{display:block;font-size:12.5px;color:var(--mute);line-height:1.5}
.who{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--mute)}
.lsec{padding:0 22px 16px}
.lbl{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.08em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.lbl.o{color:var(--accent)}
.parts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.parts div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.45}
.parts div b{display:block;font-size:11px;color:var(--brand);letter-spacing:.06em;margin-bottom:2px}
.lfoot{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 22px;border-top:1px dashed var(--line);font-size:13px;align-items:center;background:#fbfcfe}
.lfoot a{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.lfoot a:hover{text-decoration:underline}
.lfoot .next{margin-left:auto;font-weight:700}
.donebtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--mute);font-family:inherit}
.donebtn:hover{border-color:var(--ok);color:var(--ok)}
.lesson.done .donebtn{background:var(--ok);border-color:var(--ok);color:#fff}
details.pd{margin:0}
details.pd summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--brand);list-style:none;padding:6px 12px;border:1px solid var(--brand3);border-radius:999px;background:#fff}
details.pd summary::-webkit-details-marker{display:none}
details.pd[open] summary{border-radius:12px 12px 0 0}
.script{margin-top:8px;font-size:12.5px;color:#4a2a8a;background:#f7f2ff;border-radius:10px;padding:8px 12px}
.script b{display:block;margin-bottom:2px}
.prompt{margin-top:10px;background:#0f1218;color:#e8ecf3;border-radius:12px;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;position:relative;line-height:1.65}
.prompt .copy{position:absolute;top:8px;right:8px;background:#fff;color:#0f1218;border:0;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px}
.note{font-size:12.5px;color:var(--warn);margin-top:8px;display:flex;gap:6px;align-items:flex-start;background:var(--warnbg);border-radius:8px;padding:6px 10px}
.note svg{flex:none;margin-top:3px}
/* quiz */
.quiz{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.quiz .q{margin-bottom:16px}
.quiz .q>b{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.quiz label{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin:6px 0;cursor:pointer;background:var(--bg)}
.quiz label:hover{border-color:var(--brand);background:var(--brand2)}
.quiz button{background:var(--brand);color:#fff;border:0;border-radius:12px;padding:11px 20px;font-weight:700;cursor:pointer;font-size:15px;font-family:inherit;display:inline-flex;align-items:center;gap:8px}
.result{margin-top:16px;padding:18px;border-radius:12px;background:var(--brand2);display:none}
.result ul{margin:8px 0 0;padding-left:20px}
/* tabs */
.tabwrap{margin:10px 0 18px;display:flex;flex-direction:column;gap:10px}
.tabgrp{display:flex;gap:10px;align-items:flex-start}
.tabgrp .tgl{flex:0 0 118px;font-size:11.5px;color:var(--mute);font-weight:700;padding-top:9px;letter-spacing:.02em}
@media(max-width:640px){.tabgrp{flex-direction:column;gap:4px}.tabgrp .tgl{flex:0 0 auto;padding-top:0}}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13.5px;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pane{display:none}.pane.on{display:block}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:10px;margin:10px 0 16px}
.mini a{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--ink);font-size:13.5px;line-height:1.45}
.mini a:hover{border-color:var(--brand)}
.mini a .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.mini a small{display:block;color:var(--dim);font-size:11px}
.first{display:flex;gap:12px;align-items:center;background:var(--accbg);border:1px solid #f7cfae;border-radius:14px;padding:12px 16px;margin:0 0 16px}
.first b{font-size:15px}.first small{display:block;color:var(--warn);font-size:12px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13.5px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f0f3f8;font-size:12.5px}
.tblwrap{overflow-x:auto}
/* 章末の前後ナビ（2026-09-17）：スマホは左メニューが常時見えないので、章の終わりでそのまま次へ進める */
.chnav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0 0}
.chnav a{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:800;font-size:14px;line-height:1.4;min-width:0}
.chnav a:hover{border-color:var(--brand)}.chnav a span{flex:1;min-width:0}.chnav a small{display:block;font-weight:700;color:var(--dim);font-size:11.5px;letter-spacing:.06em}
.chnav a svg{flex:none;color:var(--brand)}.chnav .prev svg{transform:rotate(180deg)}.chnav .next{text-align:right}
@media (max-width:640px){.chnav{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--mute);font-size:12.5px;background:#fff}
.callout{background:var(--warnbg);border:1px solid #f4d9b3;border-radius:14px;padding:14px 16px;margin:14px 0;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.callout svg{flex:none;margin-top:4px;color:var(--warn)}
.roadmap{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.roadmap .row{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:stretch}
.roadmap .base{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.roadmap .ch{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:12px;text-decoration:none;color:var(--ink);margin:3px 4px 0 0}
.roadmap .ch:hover{border-color:var(--brand);color:var(--brand)}
.roadmap .box{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.roadmap .box b.k{display:block;color:var(--brand);font-size:11.5px;letter-spacing:.1em}
.roadmap .box h3{margin:2px 0 4px;font-size:15px}
.roadmap .box p{margin:0 0 4px;font-size:12px;color:var(--mute)}
.roadmap .box.ok{background:var(--okbg);border-color:#bfe6d0}.roadmap .box.ok b.k{color:var(--ok)}
.roadmap .ar{display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:20px}
@media (max-width:1180px){.hdnote{display:none}}   /* 1180px 未満だと注意書きが ellipsis で途中切れになるので、出すのは全文が入る幅だけにする（.wrap の上限が1180px＝2026-09-16） */
@media (min-width:1181px){#belt{display:none}}   /* 注意書きが出る幅では称号ピルを重ねない。ヘッダーの中身（ロゴ257+ドリル130+称号112+注意書き368+個人法人282+余白56=1205px）が
                                                    .wrap の内側1140pxを常に65px超えていて、個人／法人ピルが本文カラムの右端より外に飛び出していた。
                                                    称号はこの幅ならサイドバーの「いまの称号」に必ず出ているので、ヘッダーからは落とす（2026-09-16） */
@media (max-width:520px){.hdfree .hdfx{display:none}}
@media (max-width:480px){.navbtn span{display:none}.navbtn{padding:6px 9px}}
@media (max-width:360px){header.top .wrap{gap:6px;padding:0 10px}.logo svg.ls{height:17px}.hdkyo{padding:5px 9px;font-size:12px}.navbtn{padding:6px 7px}}   /* 320px は 8px 足りない（2026-09-17 実測）ので余白と文字を少し詰める */   /* 480px 以下はロゴ＋ドリル＋メニューでいっぱいなので、メニューはアイコンだけ（ヘッダーの合計＝ロゴ162＋ドリル90＋メニュー43＋余白68） */
@media (max-width:900px){.hdfree{display:none}}   /* スマホ・タブレットはロゴ＋ドリルだけ。個人／法人の線引きは初回画面に出さない（2026-09-16）＝フッターと定着後の .hnudge で出す。
                                                     900px は本文が1カラムに落ちる境目。640px までピルを出していた頃は 641〜862px でヘッダーが行に収まらず、ページ全体が最大 143px 横スクロールしていた（2026-09-16 修正） */
@media (max-width:900px){#belt{display:none}}   /* 称号ピルはヘッダーに収まらないので狭い画面では出さない（章の「使いどころ発見 n／N」で足りる） */
/* スマホ・タブレットの章メニュー（2026-09-17 代表指示）：ヘッダー右の「メニュー」で開くドロワーに、PCの左メニューと同じ中身（進捗・称号・章一覧・法人リンク）を入れる。
   それまでは横スクロールのチップ列（現在章が画面外・進捗も称号も無し）で、はじめにでは丸ごと非表示だった。メール保存欄だけは章末の欄に任せて出さない */
.navbtn{display:none;margin-left:auto;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:800;color:var(--ink);cursor:pointer;white-space:nowrap;flex:none}
.navbtn svg{width:18px;height:18px}
aside.side .navhd{display:none;align-items:center;gap:8px;padding:2px 2px 10px;margin:0 0 8px;border-bottom:1px solid var(--line)}
aside.side .navhd svg.lm{width:26px;height:26px}aside.side .navhd b{flex:1;font-size:15px}
aside.side .navx{border:0;background:#eef1f6;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:none}aside.side .navx svg{width:18px;height:18px}
.navbg{position:fixed;inset:0;background:rgba(15,18,24,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
body.nav-open .navbg{opacity:1;pointer-events:auto}body.nav-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}   /* iOS Safari は body{overflow:hidden} を無視して背景が動く（2026-09-17 代表実機）。position:fixed＋top=-scrollY で止め、閉じるときに JS が scrollTo で戻す */
@media (max-width:900px){
 .navbtn{display:inline-flex}
 .layout{grid-template-columns:minmax(0,1fr);padding-top:18px}body.p-hajimeni .layout{padding-top:14px}
 aside.side{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:min(320px,86vw);max-height:none;z-index:60;background:#fff;box-shadow:0 0 48px rgba(0,0,0,.28);padding:10px 12px 40px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;transform:translateX(-105%);transition:transform .22s ease;visibility:hidden}
 body.nav-open aside.side{transform:none;visibility:visible}
 aside.side .navhd{display:flex}aside.side .subsx{display:none}
 aside.side a{padding:9px 10px;font-size:14.5px}aside.side a small{font-size:12px}aside.side a .ibox{width:30px;height:30px}
 .lbody,.lbody.nov .keyrow{grid-template-columns:1fr}.hero{padding:28px 22px}.hero h1{font-size:26px}
 .stage,.roadmap .row{grid-template-columns:1fr}.stage .ar,.roadmap .ar{transform:rotate(90deg);height:28px}
 .flow{flex-direction:column}.flow .ar{width:auto;height:26px;transform:rotate(90deg)}
 .cards.c3,.cards.c4,.cards.c5{grid-template-columns:repeat(2,1fr)}.vs{grid-template-columns:1fr}.parts{grid-template-columns:repeat(2,1fr)}.big3{grid-template-columns:1fr}.roadmap .base{grid-template-columns:1fr}
 .lhead{padding:16px 16px 8px}.lbody{padding:4px 16px 14px}.lsec{padding:0 16px 14px}.lfoot{padding:10px 16px}.lfoot .next{margin-left:0}
}
/* スマホの読みやすさ（2026-09-17 代表指示：視認性を上げる）。文字は減らさず、大きさ・行間・並び順で読ませる。
   レッスンカードは 動画 → ひとことで → 要点 → 補足 の順（それまでは動画の直下に黄色い補足が来て、肝心の「ひとことで」が後回しだった） */
@media (max-width:640px){
 h1{font-size:24px}.lead{font-size:14px;line-height:1.8}.goal{font-size:12.5px;padding:6px 12px;line-height:1.5}
 /* 見出しは「番号｜タイトル」の2列。「使いどころ発見」の印は2行目へ落とす。1行に並べると印（nowrap）が縮まず、タイトルが3〜4文字で折り返して潰れていた（2026-09-19 代表報告） */
 .lhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start;padding:14px 14px 8px}
 .lhead .lnum{grid-column:1;grid-row:1}.lhead>div{grid-column:2;grid-row:1;min-width:0}
 .lhead .stamp{grid-column:2;grid-row:2;margin:0;justify-self:start}
 .lhead h3{font-size:16px}.lnum{font-size:12.5px;padding:4px 8px}
 .meta{gap:5px}.meta .tag{font-size:12px;overflow-wrap:normal}   /* html{overflow-wrap:anywhere} の打ち消し。「YouTube」が You/Tube に割れるのを防ぐ（日本語は通常どおり折り返す） */.meta .tag.who{flex-basis:100%;border:0;background:none;padding:0;color:var(--mute);font-size:12px}
 .lbody{padding:4px 14px 12px;gap:12px}.lbody>div:first-child{display:contents}.lbody .video{order:1}.lbody .lkey{order:2}.lbody>div:first-child>.note{order:3;margin-top:0}
 .one{padding:10px 12px}.one b{font-size:15px}.points b{font-size:13.5px}.points span{font-size:12.5px}
 .lsec{padding:0 14px 12px}.lfoot{padding:10px 14px;flex-direction:column;align-items:stretch;gap:8px}.lfoot a{line-height:1.5}.lfoot .donebtn{align-self:flex-start}
 .lfoot .next{margin:2px 0 0;justify-content:center;background:var(--brand2);color:var(--brand);border-radius:10px;padding:10px 12px}
 .poll .ph2 small{margin-left:0;flex-basis:100%}   /* 人数テキストは印の下に1行で置く（横に並べると折り返しだらけになる） */
 h2{display:block}h2>svg{vertical-align:-3px;margin-right:6px}h2 .sub{display:block;margin:3px 0 0;margin-left:0}   /* 見出しの補足は下の行へ（横並びのままだと見出しが数文字幅に潰れる：2026-09-19） */
 .step .t small,.tiles a small,.more summary small{font-size:12.5px}.kv .kvt{font-size:14.5px}
 .onb.compact{padding:10px 12px}.onb.compact .oh b{font-size:14px}.onb.compact .ol li:not(.cur){display:none}   /* 章ページ上部の3ステップ帯は「いまの1段」だけ（3段で280pxを占め、本文が下に押されていた） */
}
.gate .ebtns button{border:1.5px solid var(--line)}.gate .ebtns button:hover{border-color:var(--brand);background:var(--brand2)}
.skip{background:none;border:0;color:var(--mute);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;padding:0}.ecard .skip{color:#c8cdd6}.etaps{display:flex;flex-direction:column;align-items:center;gap:10px}
/* 使いどころ投票：タップごとに「同じ動画を見た人の答え」の棒が伸びる。自分の選択は色付きで残る */
.poll{border:1px solid var(--brand3);border-radius:14px;background:#fff;padding:12px 14px;display:grid;gap:10px}
.poll .ph2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.poll .ph2 b{display:inline-flex;align-items:center;gap:8px;font-size:15px;line-height:1.45}.poll .ph2 small{color:var(--mute);font-size:12px;margin-left:auto;min-width:0}   /* nowrap にしない：「あなたが1人目です。次に見た人に…」が折り返せずカードを横に押し広げていた（2026-09-19） */
.popts{display:grid;gap:6px}
.po{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;font:inherit;font-size:14px;line-height:1.4;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;cursor:pointer;color:var(--ink);overflow:hidden}
.po:hover{border-color:var(--brand)}.po.on{border-color:var(--brand);font-weight:700}.po.on .pt::before{content:"✓ ";color:var(--brand)}
.po .pb{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--brand2);z-index:0;transition:width .6s ease}.po.on .pb{background:#d3defb}
.po .pt,.po .pn{position:relative;z-index:1}.po .pn{font-size:12.5px;color:var(--mute);font-weight:700;min-width:3em;text-align:right;visibility:hidden}
.poll.open .po .pn{visibility:visible}
.pfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}.pfoot:empty{display:none}
.pnext{font:inherit;font-weight:700;font-size:13.5px;border:0;border-radius:999px;padding:8px 18px;cursor:pointer;background:var(--brand);color:#fff;margin-left:auto}.pnext[disabled]{opacity:.4;cursor:default}
.pother{display:flex;gap:8px;flex-wrap:wrap;width:100%}.pother input{flex:1;min-width:180px;font:inherit;font-size:13.5px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;color:var(--ink)}.pother button{font:inherit;font-weight:700;font-size:13px;border:0;border-radius:10px;padding:8px 14px;cursor:pointer;background:var(--brand);color:#fff}
.poll.done{border-color:#bfe6d0;background:var(--okbg)}.poll.done .po{cursor:default}.poll.done .po:hover{border-color:var(--line)}.poll.done .po.on{border-color:var(--ok)}.poll.done .po.on .pt::before{color:var(--ok)}.poll.done .po.on .pb{background:#cdeedb}
.pstamp{display:inline-flex;align-items:center;gap:6px;background:var(--ok);color:#fff;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:800;white-space:nowrap}
.psum{display:grid;gap:6px}.psum .pq2{font-size:13px;font-weight:700;margin:6px 0 0}.psum .popts{gap:4px}.psum .po{padding:6px 10px;font-size:13px}
.pagain{background:none;border:0;color:var(--brand);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;padding:0}.pline{font-size:12.5px;color:var(--ink)}
.ecard.pollcard{justify-content:flex-start;overflow:auto;padding:12px 14px;gap:8px}.ecard .ehd{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;width:100%;max-width:560px;text-align:left}.ecard .ehd b{font-size:15px}.ecard .ehd small{color:#c8cdd6}
.ecard .poll{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:#fff;text-align:left;width:100%;max-width:560px;padding:10px 12px;gap:8px}
.ecard .poll .po{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff;padding:7px 10px;font-size:13.5px}.ecard .poll .po .pb{background:rgba(255,255,255,.16)}.ecard .poll .po.on .pb{background:rgba(255,255,255,.3)}.ecard .poll .po.on .pt::before{color:#fff}
.ecard .poll .ph2 small,.ecard .poll .pfoot,.ecard .poll .po .pn,.ecard .poll .pagain{color:#c8cdd6}.ecard .poll .pnext{background:#fff;color:var(--ink)}.ecard .poll.done{background:rgba(26,143,90,.35);border-color:rgba(255,255,255,.35)}
.gate .ecard.pollcard{background:var(--bg)}.gate .ecard .ehd small{color:var(--mute)}.gate .ecard .poll{background:#fff;border-color:var(--brand3);color:var(--ink)}.gate .ecard .poll .po{background:#fff;border-color:var(--line);color:var(--ink)}.gate .ecard .poll .po .pb{background:var(--brand2)}.gate .ecard .poll .po.on .pb{background:#d3defb}.gate .ecard .poll .po.on .pt::before{color:var(--brand)}
.gate .ecard .poll .ph2 small,.gate .ecard .poll .pfoot,.gate .ecard .poll .po .pn{color:var(--mute)}.gate .ecard .poll .pnext{background:var(--brand);color:#fff}.gate .ecard .poll.done{background:var(--okbg);border-color:#bfe6d0}
.stamp{display:none;margin-left:auto;align-items:center;gap:5px;background:var(--okbg);color:var(--ok);border:1px solid #bfe6d0;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;white-space:nowrap;align-self:flex-start;margin-top:4px}.lesson.keiko .stamp{display:inline-flex}
.chip.keiko .cn{background:var(--ok);color:#fff;border-color:var(--ok)}
.kcount{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ok);font-weight:800;white-space:nowrap}
/* 称号（ランク）：使いどころ発見の本数で スタート→ブロンズ→シルバー→ゴールド→プラチナ→ダイヤモンド。自分の称号だけ。人と比べない */
.rkb{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.15)}.rkb svg{width:11px;height:11px;fill:#fff;stroke:#fff}
.belt{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 3px;white-space:nowrap}.belt b{color:var(--mute);font-weight:700}
.rank{margin:0 0 10px;padding:12px;background:linear-gradient(160deg,#fff 0%,#f5f7fb 100%);border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--mute)}
.rank .rt{font-size:11px;color:var(--dim);font-weight:700;letter-spacing:.04em}.rank .rn{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:18px;font-weight:900;color:var(--ink);line-height:1.2}.rank .rn .rkb{width:28px;height:28px}.rank .rn .rkb svg{width:16px;height:16px}
.rank .rd{font-size:12px;color:var(--mute);margin-top:3px}.rank .rc{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}.rank .rc b{color:var(--ok);font-size:16px}.rank .rc small{color:var(--dim)}
.rank .bar{height:8px;background:#eef1f6;border-radius:4px;margin-top:6px;overflow:hidden}.rank .bar i{display:block;height:100%;width:0;border-radius:4px;transition:width .5s}.rank .rnext{font-size:12px;color:var(--mute);margin-top:6px}.rank .rnext b{color:var(--ink);font-weight:800}
/* 進捗のメール保存（任意・サイドバー）。称号ピルのすぐ下に置く。匿名のままでも全部使える */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.subsx{margin:0 0 12px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.subsx .st{font-size:12.5px;font-weight:800;color:var(--ink);display:flex;align-items:flex-start;gap:6px;line-height:1.35}
.subsx .st .ic{width:15px;height:15px;flex:none;margin-top:2px;color:var(--brand)}
.subsx .st .stt{flex:1;min-width:0}
.subsx .st small{display:block;font-weight:400;color:var(--mute);font-size:11.5px;margin-top:3px;line-height:1.45}
.subsx input{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff}
.subsx input:focus{outline:2px solid var(--brand3);outline-offset:1px;border-color:var(--brand)}
.subsx button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:8px 10px;border:0;border-radius:8px;background:var(--brand);color:#fff;font-size:13px;font-weight:800;font-family:inherit;cursor:pointer}
.subsx button:hover{filter:brightness(1.08)}.subsx button[disabled]{opacity:.55;cursor:default}
.subsx .smsg{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ok);font-weight:700}.subsx .smsg.ng{color:var(--ng)}
.subsx .snote{margin:7px 0 0;font-size:11px;color:var(--dim);line-height:1.45}
.subsx.wide{margin:26px 0 0;padding:16px 18px;border-radius:14px}
.subsx.wide .st{font-size:15px;align-items:flex-start}.subsx.wide .st .ic{width:18px;height:18px;margin-top:3px}
.subsx.wide .st .stt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.subsx.wide .st small{display:inline;margin-top:0;font-size:12.5px;line-height:1.6}
.subsx.wide .sfields{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:10px;align-items:center;margin-top:12px}
.subsx.wide input{margin-top:0;padding:10px 12px;font-size:14px}
.subsx.wide button{width:auto;margin-top:0;padding:10px 18px;white-space:nowrap}
.subsx.wide .smsg{font-size:13px}.subsx.wide .snote{font-size:11.5px}
@media (max-width:720px){.subsx.wide .sfields{grid-template-columns:1fr}}
/* 保存済み：入力欄と注記を畳んで「保存しました」だけ残す。.subsx.wide .sfields{display:grid} と同じ詳細度なので、必ずその後ろに置く */
.subsx.done .sfields,.subsx.done .snote{display:none}
/* 法人で導入する（本文末尾のカード）。個人の学習は無料のまま、部署で使うときだけHPへ */
.hojin{margin:26px 0 0;padding:16px 18px;background:linear-gradient(160deg,#fff 0%,var(--accbg) 100%);border:1px solid #f6dcc6;border-radius:14px}
.hojin .ht{display:flex;gap:12px;align-items:flex-start}
.hojin .ht b{display:block;font-size:15px;line-height:1.5;color:var(--ink)}
.hojin .ht small{display:block;font-size:12.5px;color:var(--mute);margin-top:5px;line-height:1.6}
.hojin .hlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.hojin .hlinks a{display:flex;align-items:center;gap:9px;padding:11px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:700}
.hojin .hlinks a:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(242,111,33,.12)}
.hojin .hlinks a span{flex:1;line-height:1.35}
.hojin .hlinks a small{display:block;font-weight:400;color:var(--mute);font-size:11.5px;margin-top:3px;line-height:1.45}
.hojin .hlinks a>.ic{width:14px;height:14px;flex:none;color:var(--accent)}
@media (max-width:720px){.hojin .hlinks{grid-template-columns:1fr}}
/* 個人（無料）／法人（有料）の2枚カード（はじめに・ヒーロー直下） */
.kh{margin:0 0 26px}
.kh .khhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kh .khhead b{font-size:19px;line-height:1.4}
.kh .khhead small{display:block;font-size:12.5px;color:var(--mute);font-weight:400;margin-top:3px;line-height:1.6}
.khgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.khc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.khc.free{border:2px solid var(--brand);background:linear-gradient(160deg,#fff 0%,var(--brand2) 100%)}
.khc.paid{border:1px solid #f6dcc6;background:linear-gradient(160deg,#fff 0%,var(--accbg) 100%)}
.khc .kht{display:flex;align-items:center;gap:10px}
.khc .kht b{font-size:17px;line-height:1.4}
.khc .khtag{margin-left:auto;font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;background:var(--brand);color:#fff;white-space:nowrap}
.khc.paid .khtag{background:var(--accent)}
.khc .khprice{font-size:14px;font-weight:800;color:var(--brand);line-height:1.6}
.khc.paid .khprice{color:var(--accent)}
.khc .khs{margin:0;font-size:12.5px;color:var(--mute);line-height:1.7}
.khc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.khc li{font-size:13px;line-height:1.55;display:flex;gap:8px;align-items:flex-start}
.khc li>.ic{flex:none;width:15px;height:15px;margin-top:3px;color:var(--brand)}
.khc.paid li>.ic{color:var(--accent)}
.khc .khb{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.khc .khb a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;border-radius:10px;padding:9px 14px;text-decoration:none;border:1px solid var(--line);background:#fff;color:var(--ink)}
.khc .khb a.p{background:var(--brand);border-color:var(--brand);color:#fff}
.khc.paid .khb a.p{background:var(--accent);border-color:var(--accent);color:#fff}
.khc .khb a:hover{border-color:var(--brand)}.khc.paid .khb a:hover{border-color:var(--accent)}
.khnote{margin:12px 0 0;font-size:12.5px;color:var(--mute);line-height:1.7;display:flex;gap:8px;align-items:flex-start}
.khnote>.ic{flex:none;width:16px;height:16px;margin-top:3px;color:var(--brand)}
@media (max-width:720px){.khgrid{grid-template-columns:1fr}}
.rtoast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,24px);opacity:0;background:var(--ink);color:#fff;border-radius:16px;padding:14px 20px 14px 16px;display:flex;align-items:center;gap:14px;box-shadow:0 14px 36px rgba(0,0,0,.28);z-index:9999;transition:transform .35s,opacity .35s;max-width:calc(100vw - 32px)}.rtoast.on{transform:translate(-50%,0);opacity:1}
/* メールゲート（ブロンズ到達時・資料室）。任意＝「あとで」で閉じられる。フォームは .subsx.wide を流用 */
.gate{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .25s}.gate.on{opacity:1}
.gbox{position:relative;background:#fff;border-radius:18px;padding:22px 22px 18px;width:100%;max-width:520px;box-shadow:0 24px 60px rgba(0,0,0,.3);max-height:calc(100vh - 32px);overflow:auto}
.gbox .gx{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:22px;line-height:1;color:var(--mute);cursor:pointer;padding:6px}
.gbox .ghead{display:flex;gap:12px;align-items:center;margin-bottom:6px}.gbox .ghead .rkb{width:44px;height:44px;flex:none}.gbox .ghead .rkb svg{width:24px;height:24px}
.gbox .ghead b{display:block;font-size:18px;line-height:1.25}.gbox .ghead small{display:block;color:var(--mute);font-size:12.5px;margin-top:3px}
.gbox .subsx.wide{margin:8px 0 0;padding:0;border:0;background:transparent;border-radius:0}
.gbox .glater{display:block;margin:12px auto 0;border:0;background:transparent;color:var(--mute);font-size:12.5px;cursor:pointer;text-decoration:underline;font-family:inherit}
.gbox .gopen[hidden]{display:none}.gbox .gopen{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:var(--brand);color:#fff;font-weight:800;padding:11px 18px;border-radius:12px;text-decoration:none}
.rtoast .rkb{width:40px;height:40px}.rtoast .rkb svg{width:22px;height:22px}.rtoast b{font-size:18px;display:block;line-height:1.2}.rtoast small{color:#c8cdd6;font-size:12px;display:block}.rtoast small.up{color:#ffd166;font-weight:800}
.revisit .popts.rv{display:flex;flex-wrap:wrap;gap:6px;width:100%}.revisit .popts.rv .po{grid-template-columns:1fr;padding:6px 12px;font-size:13px}.revisit .eline{justify-content:flex-start;max-width:none}.revisit .eline input{border:1px solid var(--line)}.revisit .eline button.lt{color:var(--mute);border-color:var(--line)}
/* 入力の仕掛け（ブレスト v1：B エンドカード／C やってみた＝1行／A' 債務ゲート／D 再訪の1問） */
.ecard{position:absolute;inset:0;z-index:5;background:rgba(15,18,24,.88);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;text-align:center}
.ecard b{font-size:17px}.ecard small{color:#c8cdd6;font-size:12px}.ebtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ebtns button{font:inherit;font-weight:700;font-size:14px;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;background:#fff;color:var(--ink)}.ebtns button.p{background:var(--brand);color:#fff}
.eline{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;max-width:520px}.eline input{flex:1;min-width:200px;font:inherit;font-size:14px;border:0;border-radius:10px;padding:10px 12px}
.eline button{font:inherit;font-weight:700;font-size:13px;border:0;border-radius:10px;padding:10px 14px;cursor:pointer;background:var(--brand);color:#fff}.eline button.lt{background:transparent;color:#c8cdd6;border:1px solid #556}
.ecard.ok{background:rgba(26,143,90,.9)}.ecard .x{position:absolute;top:8px;right:12px;background:none;border:0;color:#c8cdd6;font-size:20px;cursor:pointer}
.gate{position:fixed;inset:0;z-index:100;background:rgba(15,18,24,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.gate .gbox{background:#fff;color:var(--ink);border-radius:16px;padding:22px 22px 18px;max-width:560px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative}
.gate h3{margin:0 0 6px;font-size:18px}.gate p{margin:0 0 12px;color:var(--mute);font-size:13px}.glist{display:grid;gap:8px}.glist button{font:inherit;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;font-size:14px;display:flex;gap:10px;align-items:center}.glist button:hover{border-color:var(--brand);background:var(--brand2)}.glist .n{font-weight:800;color:var(--brand);font-size:12px}
.gate .ecard{position:static;background:var(--bg);color:var(--ink);border-radius:12px}.gate .ecard small{color:var(--mute)}.gate .eline input{border:1px solid var(--line)}.gate .eline button.lt{color:var(--mute);border-color:var(--line)}.gate .ecard.ok{background:var(--okbg);color:var(--ok)}
.dpop{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:var(--okbg);border:1px solid var(--ok);border-radius:12px;padding:8px 10px;font-size:13px;width:100%}.dpop input{flex:1;min-width:180px;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:6px 8px}.dpop button{font:inherit;font-size:12.5px;border:0;border-radius:8px;padding:6px 10px;cursor:pointer;background:var(--ok);color:#fff;font-weight:700}.dpop button.lt{background:transparent;color:var(--mute)}
.revisit{background:#fff;border:1.5px solid var(--brand3);border-left:5px solid var(--brand);border-radius:14px;padding:14px 16px;margin:0 0 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px}.revisit b{font-size:15px}.revisit .ebtns button{background:var(--brand2);color:var(--brand)}.revisit .ebtns button.p{background:var(--brand);color:#fff}.revisit small{color:var(--mute);font-size:12px;width:100%}
/* E. 月次サーベイ（月次サーベイ設計案 v1 §3）：当月初回の訪問で1枚・約1分・スキップ可 */
/* オンボーディング帯（初回導線設計 2026-09-15）：はじめての3ステップ ①現在地チェック ②個人／法人 ③おすすめの1本。定着後は出さない */
.onb{background:#fff;border:1.5px solid var(--brand3);border-left:5px solid var(--brand);border-radius:14px;padding:12px 16px;margin:0 0 18px}
.onb .oh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.onb .oh b{font-size:15px}.onb .oh small{color:var(--mute);font-size:12px}.onb .oh>.ic{width:18px;height:18px;color:var(--brand);flex:none}
.onb .ol{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.onb .ol li a{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;text-decoration:none;color:var(--ink);background:var(--bg)}
.onb .ol li.cur a{border-color:var(--brand);background:var(--brand2)}.onb .ol li.done a{opacity:.72}
.onb .ol .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}.onb .ol li.done .num{background:var(--ok,#1f9d55)}
.onb .ol .t{font-size:13px;font-weight:700;line-height:1.35}.onb .ol .t small{display:block;font-weight:400;color:var(--mute);font-size:11.5px}
.onb.compact .oh small{display:none}
.onb.cheer{border-color:#ffd27a;border-left-color:var(--accent);background:linear-gradient(160deg,#fff 0%,var(--accbg) 100%)}.onb.cheer .oh{align-items:flex-start;flex-wrap:nowrap}.onb.cheer .oi{font-size:22px;flex:none}.onb.cheer .oh>div{flex:1;min-width:0}.onb.cheer .oh>div span{display:block;font-size:13px;color:var(--mute);margin-top:3px;line-height:1.6}
.onb .ox{font:inherit;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer;color:var(--mute);flex:none}
.qdone{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--brand2);border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:14px}.qdone b{font-size:15px}.qdone small{color:var(--mute);font-size:12px}.qdone button{margin-left:auto;font:inherit;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer;color:var(--brand)}
.qdone[hidden],.recosec[hidden],.quiz[hidden]{display:none}
.recosec{background:#fff;border:2px solid var(--brand);border-radius:16px;padding:18px 20px;margin:0 0 26px}.recosec h2{margin:0 0 4px}.recosec .rlead{font-size:13px;color:var(--mute);margin:0 0 6px;line-height:1.7}.recosec .rmore{margin:10px 0 0;font-size:13px}.recosec .rgo{margin-top:12px}
.recosec .rgo a{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:700;padding:11px 18px;border-radius:12px;text-decoration:none}
.khgo{margin-top:10px}.khgo a{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:700;padding:10px 16px;border-radius:12px;text-decoration:none;font-size:14px}
.result .rnext{margin-top:12px}.result .rnext a{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:700;padding:10px 16px;border-radius:12px;text-decoration:none;font-size:14px}
@media (max-width:640px){.onb .ol{grid-template-columns:1fr}.onb.cheer .oh{flex-wrap:wrap}}

/* はじめに v2（2026-09-16 代表指示）：スマホで最初に見るのは3ステップのクエスト1枚だけ。①まず1本見る（埋め込み）②30秒の現在地チェック ③あなたへの3本から次の1本。開くのは常に1段、終えた段は✓で畳む、進捗バー。個人／法人・地図・章一覧は初回画面に出さない */
.start{background:#fff;border:1.5px solid var(--brand3);border-radius:18px;padding:16px 16px 12px;margin:0 0 14px;box-shadow:0 6px 24px rgba(31,79,216,.08);max-width:760px}
.start .sthead{display:flex;gap:12px;align-items:flex-start}.start .sthead svg.lm{width:40px;height:40px;flex:none;margin-top:2px}.start .sthead>div{flex:1;min-width:0}
.start .kicker{font-size:11.5px;font-weight:800;color:var(--brand);letter-spacing:.08em}
.start h1{font-size:21px;margin:2px 0 4px;line-height:1.35}@media(min-width:641px){.start h1{font-size:24px}}
.start .stsub{margin:0;font-size:13px;color:var(--mute);line-height:1.6}
.start .stsafe{margin:6px 0 0;font-size:12px;color:var(--warn);display:flex;gap:6px;align-items:flex-start;line-height:1.5}.start .stsafe .ic{flex:none;margin-top:3px}.start .stsafe a{color:var(--warn);font-weight:700}
/* ①職種を選ぶ（2026-09-17 v3）：グループ見出し＋チップ。選ぶと下に 今日やる1つ・プロンプト・最初の動画 */
.jobpick .jgrp{margin:6px 0 2px}.jobpick .jgrp small{display:block;font-size:11.5px;font-weight:800;color:var(--dim);margin:6px 0 4px;letter-spacing:.04em}
.jc{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;color:var(--ink);line-height:1.3}.jc:hover{border-color:var(--brand)}.jc.on{background:var(--brand);border-color:var(--brand);color:#fff}
.jobsel{margin-top:12px;background:#fff;border:1.5px solid var(--brand3);border-radius:12px;padding:12px}.jobsel[hidden]{display:none}
.jobsel .jk{font-size:11.5px;font-weight:800;color:var(--brand);letter-spacing:.06em}.jobsel .jt{font-size:15px;font-weight:800;line-height:1.5;margin:2px 0 0}.jobsel .jn{font-size:12.5px;color:var(--mute);margin:8px 0 0;line-height:1.55}
.jobsel .prompt{margin-top:8px;max-height:200px;overflow:auto}.jobsel .jv{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13px;background:var(--bg);border-radius:10px;padding:8px 10px;text-decoration:none;color:var(--ink)}.jobsel .jv .ibox{flex:none}.jobsel .jv small{display:block;color:var(--dim);font-size:11.5px}
.jobsel .stgo{margin-top:10px}.jobsel .jlink{display:block;margin-top:8px;font-size:12.5px;text-align:center}
.start .stprog{display:flex;align-items:center;gap:10px;margin:12px 0 4px;font-size:12px;color:var(--mute);font-weight:800;white-space:nowrap}
.start .stprog .bar{flex:1;height:8px;background:#eef1f6;border-radius:4px;overflow:hidden}.start .stprog .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),#4c7cf0);border-radius:4px;transition:width .5s}
.steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.step{border:1.5px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.step .sthd{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer;background:transparent;border:0;width:100%;text-align:left;font:inherit;color:var(--ink)}
.step .num{flex:none;width:30px;height:30px;border-radius:50%;background:#c9d0db;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.step .t{flex:1;min-width:0;font-size:14.5px;font-weight:800;line-height:1.35}.step .t small{display:block;font-weight:400;color:var(--mute);font-size:12px;margin-top:1px}
.step .tag{flex:none;font-size:11px;font-weight:800;border-radius:999px;padding:3px 9px;background:#eef1f6;color:var(--dim);white-space:nowrap}
.step .stbody{display:none;padding:0 12px 14px}.step.open .stbody{display:block}
.step.cur{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand2)}.step.cur .num{background:var(--brand)}.step.cur .tag{background:var(--brand);color:#fff}
.step.done .num{background:var(--ok)}.step.done .tag{background:var(--okbg);color:var(--ok)}.step.done:not(.open) .t{color:var(--mute)}
.step.todo .t{color:var(--mute)}.step.open.todo{background:#fff}
.step .stgo{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;background:var(--brand);color:#fff;font-weight:800;padding:13px 16px;border-radius:12px;text-decoration:none;font-size:15px;border:0;width:100%;box-sizing:border-box;font-family:inherit;cursor:pointer}
.step .stgo[hidden]{display:none}.step .stgo.ok{background:var(--ok)}
.step .sthint{font-size:12.5px;color:var(--mute);margin:10px 0 0;line-height:1.6;display:flex;gap:6px;align-items:flex-start}.step .sthint .ic{flex:none;margin-top:3px}
.step .stskip{display:block;margin-top:8px;font-size:12.5px;color:var(--mute);text-decoration:underline}
.step .quiz{border:0;padding:0;background:transparent;border-radius:0}.step .quiz .q{margin-bottom:12px}.step .quiz .q>b{font-size:14px;line-height:1.5}.step .quiz label{background:#fff}
.step .quiz .sthint{margin-top:8px}.step .result{margin-top:12px;padding:14px}.step .result p{margin:6px 0 0;font-size:13.5px}
.step .result .rnext a{width:100%;justify-content:center;box-sizing:border-box}
.step .qdone{margin:0 0 4px}.step .recosec{border:0;padding:0;margin:0}.step .recosec h2{display:block;border:0;padding:0;font-size:15px;margin:0;line-height:1.4}.step .recosec h2 .sub{display:block;margin:2px 0 0}.step .recosec .rlead{margin-top:8px}
.step,.result{scroll-margin-top:76px}.step.open .num{background:var(--brand)}.step.open .t{color:var(--ink)}.step.done.open .num{background:var(--ok)}
.reco .rc .slot{display:block;width:fit-content;font-style:normal;font-size:10.5px;font-weight:800;color:var(--brand);background:var(--brand2);border-radius:999px;padding:1px 9px;margin:0 0 4px}.reco .rc .slot+*{display:block}
.reco .rc small.why{color:var(--mute);font-size:11.5px;line-height:1.6;margin-top:3px}
.rprompt{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:11px 13px;border:1px dashed var(--brand);border-radius:12px;background:var(--brand2);text-decoration:none;color:var(--ink);font-size:13px;font-weight:700;line-height:1.5}.rprompt svg{flex:none;width:18px;height:18px;color:var(--brand);margin-top:2px}.rprompt em{display:block;font-style:normal;font-size:11px;font-weight:800;color:var(--brand)}.rprompt small{display:block;font-weight:400;color:var(--dim);font-size:11px}
.quiz label span small{display:block;color:var(--dim);font-size:11.5px;line-height:1.4}.quiz .q>b .qopt{margin-left:6px;font-size:10.5px;font-weight:700;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:0 7px}
.quiz .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}@media(max-width:640px){.quiz .qgrid{grid-template-columns:1fr}}
.step .reco{grid-template-columns:1fr}.step .reco .rc small b{color:var(--brand)}.step .recosec .rgo a{width:100%;justify-content:center;box-sizing:border-box}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.tiles a{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:800;line-height:1.3}
.tiles a:hover{border-color:var(--brand)}.tiles a .ibox{width:34px;height:34px;flex:none}
.tiles a small{display:block;font-weight:400;color:var(--mute);font-size:11.5px;line-height:1.45;margin-top:2px}
.more{background:#fff;border:1px solid var(--line);border-radius:14px;margin:0 0 8px;padding:0 14px}
.more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:13px 0;font-weight:800;font-size:14.5px}
.more summary::-webkit-details-marker{display:none}.more summary .ibox{flex:none}.more summary>span{flex:1;min-width:0}
.more summary small{display:block;font-weight:400;color:var(--mute);font-size:12px}
.more summary .chev{flex:none;transition:transform .2s;color:var(--dim)}.more[open] summary .chev{transform:rotate(180deg)}
.more .mbody{padding:0 0 16px}.more .mbody h2{margin-top:18px}.more .mbody>.kv:first-child,.more .mbody>.roadmap:first-child{margin-top:0}
/* 法人の「たまに」レコメンド：初回画面には出さず、定着（別の日に3回 or 視聴3本）した人に14日に1回だけ。個人は無料のまま */
.hojin .hshot{display:block;margin:10px 0 2px;text-decoration:none;color:var(--mute)}.hojin .hshot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.hojin .hshot span{display:block;font-size:12px;line-height:1.55;margin-top:6px}
.hnudge .hshot{display:block;margin:10px 0 2px;text-decoration:none;color:var(--mute)}.hnudge .hshot img{display:block;width:100%;height:auto;border:1px solid #f6dcc6;border-radius:12px;background:#fff}.hnudge .hshot span{display:block;font-size:12px;line-height:1.55;margin-top:6px}
.hnudge{background:linear-gradient(160deg,#fff 0%,var(--accbg) 100%);border:1.5px solid #f6dcc6;border-left:5px solid var(--accent);border-radius:14px;padding:12px 14px;margin:0 0 16px;display:flex;gap:12px;align-items:flex-start;max-width:760px}
.hnudge .ibox{flex:none}.hnudge>div{flex:1;min-width:0}.hnudge b{font-size:14.5px;display:block;line-height:1.45}.hnudge span{display:block;font-size:12.5px;color:var(--mute);margin-top:3px;line-height:1.6}
.hnudge .hl{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.hnudge .hl a{font-size:12.5px;font-weight:800;color:var(--accent);text-decoration:none;border:1px solid #f6dcc6;background:#fff;border-radius:999px;padding:5px 11px}
.hnudge .ox{font:inherit;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer;color:var(--mute);flex:none}
.sttoast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:var(--ink);color:#fff;font-size:13.5px;font-weight:800;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;z-index:120;box-shadow:0 8px 24px rgba(0,0,0,.25);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}.sttoast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.tiles{grid-template-columns:1fr 1fr}.tiles a:first-child{grid-column:1/-1;flex-direction:row;align-items:center}.start{padding:14px 12px 10px}.step .sthd{padding:10px 10px}.step .stbody{padding:0 10px 12px}}
.msurvey{background:#fff;border:1.5px solid var(--brand3);border-left:5px solid var(--brand);border-radius:14px;padding:14px 16px 12px;margin:0 0 18px;font-size:14px}
.msurvey .mhead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.msurvey .mhead b{font-size:16px}.msurvey .mhead small{color:var(--mute);font-size:12px}.mlinks{margin-left:auto;display:flex;gap:6px}.mlinks button{font:inherit;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer;color:var(--mute)}.mlinks button:hover{border-color:var(--brand);color:var(--brand)}
.msurvey .mpre{font-size:12.5px;color:var(--mute);margin:8px 0 4px;line-height:1.65}.msurvey .mpre b{color:var(--ink)}
.mq{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line)}.mq>b{display:block;font-size:14px;margin-bottom:8px;line-height:1.5}.mq.skip{opacity:.45;pointer-events:none}.mq.skip>b::after{content:"（使っていないので自動で記録します）";font-weight:400;color:var(--mute);font-size:12px;margin-left:6px}
.mopts{display:flex;flex-wrap:wrap;gap:6px}.mopts button{font:inherit;font-size:13px;line-height:1.4;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:7px 12px;cursor:pointer;color:var(--ink)}.mopts button:hover{border-color:var(--brand)}.mopts button.on{background:var(--brand);border-color:var(--brand);color:#fff}.mopts button b{color:var(--brand)}.mopts button.on b{color:#fff}.mopts button .cn{font-weight:800;color:var(--brand);margin-right:6px;font-size:12px}.mopts button.on .cn{color:#fff}
.mq .mfree{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:8px;width:100%;box-sizing:border-box}
.mfoot{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}.mfoot button{font:inherit;font-weight:700;font-size:14px;border:0;border-radius:10px;padding:9px 18px;cursor:pointer;background:var(--brand);color:#fff}.mfoot button.close{background:var(--brand2);color:var(--brand)}.mmsg{font-size:12px;color:var(--warn)}
/* サイドバーが出ていて本文カラムが一番細くなる 901〜1160px 帯。5列カード・横並びの流れ図が1行4〜6文字に潰れる（2026-09-19） */
@media (min-width:901px) and (max-width:1160px){.cards.c5{grid-template-columns:repeat(3,1fr)}.cards.c4{grid-template-columns:repeat(2,1fr)}.parts{grid-template-columns:repeat(2,1fr)}.flow{flex-direction:column}.flow .ar{width:auto;height:26px;transform:rotate(90deg)}}
@media (max-width:520px){.cards.c2,.cards.c3,.cards.c4,.cards.c5{grid-template-columns:1fr}.parts{grid-template-columns:1fr}.mlinks{margin-left:0;width:100%}}

/* ---- 今日のAIドリル（/kyo） ---- */
.hdkyo{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:#fff;background:var(--brand);border-radius:999px;padding:5px 12px;text-decoration:none;white-space:nowrap}.hdkyo svg{color:#fff}
@media (max-width:480px){.hdkyo .hk1{display:none}}   /* ロゴ＋ドリル＋メニューが1行に収まる幅まで（414px で 61px・320px で 45px 横にはみ出していた＝2026-09-17 実測） */
.kyo{max-width:760px}
.kyohead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.kyodate{font-weight:900;font-size:15px;color:var(--mute)}
.kyoweek{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);font-weight:700}
.kyoweek .dots{display:inline-flex;gap:4px}.kyoweek .dots i{width:14px;height:14px;border-radius:50%;background:var(--line);display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.kyoweek .dots i.on{background:var(--ok);box-shadow:0 0 0 1px var(--ok)}.kyoweek .dots i.skip{background:#fff;box-shadow:0 0 0 1px var(--warn);border-color:var(--warnbg)}.kyoweek .dots i.today{box-shadow:0 0 0 2px var(--brand)}
.kyoweek .streak{background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.drill{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:16px}
.dloading{color:var(--mute);display:flex;gap:8px;align-items:center}
.dhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.dhead .course{font-size:11.5px;font-weight:800;color:var(--brand);letter-spacing:.06em}
.dhead h2{margin:2px 0 6px;font-size:20px}
.dhead .qn{font-size:12.5px;color:var(--mute);font-weight:700;white-space:nowrap}
.dsum{font-size:14px;color:var(--mute);margin:0 0 12px;white-space:pre-line}
.dq{font-size:15.5px;font-weight:700;line-height:1.75;margin:10px 0 12px;white-space:pre-line}
.dopts{display:grid;gap:8px;margin:8px 0}
.dopts button{text-align:left;font:inherit;font-size:14.5px;line-height:1.55;padding:11px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.dopts button b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand2);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:12.5px}
.dopts button:hover{border-color:var(--brand3);background:var(--brand2)}
.dopts.tf{grid-template-columns:1fr 1fr}.dopts.tf button{justify-content:center;font-size:20px;font-weight:900;padding:16px}
.dopts button.ok{border-color:var(--ok);background:var(--okbg)}.dopts button.ng{border-color:var(--ng);background:var(--ngbg)}.dopts button[disabled]{cursor:default;opacity:.85}
.dfb{border-radius:12px;padding:12px 14px;margin:10px 0;font-size:14px;line-height:1.7;white-space:pre-line}
.dfb.ok{background:var(--okbg);border:1px solid #bfe6cf}.dfb.ng{background:var(--ngbg);border:1px solid #f3c3c3}
.dfb b.v{display:block;font-size:15px;margin-bottom:4px}
.dnext{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.dbtn{font:inherit;font-weight:800;font-size:14px;padding:10px 18px;border-radius:12px;border:0;background:var(--brand);color:#fff;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.dbtn.ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand3)}
.dbtn.sm{padding:7px 12px;font-size:12.5px}
.dachieve{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--ok);background:var(--okbg);border-radius:999px;padding:3px 10px;margin:4px 0 8px}
.dprog{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:8px 0 14px}.dprog i{display:block;height:100%;background:var(--brand)}
.dchat{background:#f7f8fb;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0 12px;font-size:13.5px}
.dchat .lab{font-size:11px;color:var(--dim);font-weight:800;margin-bottom:6px}
.dchat .m{display:flex;gap:8px;margin:6px 0;align-items:flex-start}.dchat .m span{padding:7px 11px;border-radius:12px;max-width:88%;white-space:pre-line}
.dchat .m.user{justify-content:flex-end}.dchat .m.user span{background:var(--brand2);color:var(--ink)}.dchat .m.ai span{background:#fff;border:1px solid var(--line)}
.dchat .note{font-size:11.5px;color:var(--warn);margin-top:2px}.dchat .anno{font-size:12px;color:var(--mute);margin-top:6px}
.dflow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}.dflow span{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px}.dflow small{display:block;color:var(--mute)}
.dres{text-align:center;padding:8px 0 4px}
.dres .dgrid{display:flex;justify-content:center;gap:5px;margin:6px 0}.dres .dgrid i{display:inline-block;width:24px;height:24px;border-radius:6px;background:var(--ok)}.dres .dgrid i.x{background:var(--line)}
.dres .big{font-size:30px;font-weight:900}.dres .sub{color:var(--mute);font-size:13px;margin:4px 0 12px}
.dres .btns{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
/* --- ドリル: 学び→問題→解説（2026-09-11） --- */
.dhead .dright{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.dhead .qn small{font-weight:700;color:var(--dim)}
.dsteps{list-style:none;margin:0;padding:0;display:inline-flex;gap:6px}
.dsteps li{font-size:11.5px;font-weight:800;color:var(--dim);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px;position:relative}
.dsteps li.on{background:var(--brand);color:#fff;border-color:var(--brand)}.dsteps li.past{color:var(--ok);border-color:#bfe6cf;background:var(--okbg)}
.dsteps li+li:before{content:'›';position:absolute;left:-6px;top:0;color:var(--dim);font-weight:900}
.lab{font-size:11.5px;font-weight:900;color:var(--brand);letter-spacing:.04em;display:inline-flex;align-items:center;gap:4px}.lab .ic{width:14px;height:14px}
.dlearn{background:linear-gradient(160deg,#fff 0%,var(--brand2) 100%);border:1.5px solid var(--brand3);border-radius:14px;padding:14px 16px;margin:6px 0 12px}
.dlt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pill{font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px;background:#fff;border:1px solid var(--line);color:var(--mute)}
.pill.new{background:var(--brand);color:#fff;border-color:var(--brand)}.pill.rev{background:var(--okbg);color:var(--ok);border-color:#bfe6cf}.pill.same{color:var(--own);background:var(--ownbg);border-color:transparent}
.dkw{display:flex;gap:12px;align-items:flex-start}
.dkwic{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--brand3);display:inline-flex;align-items:center;justify-content:center;color:var(--brand)}.dkwic .ic{width:22px;height:22px}
.dkw .term{font-size:12.5px;font-weight:800;color:var(--mute)}
.dkw .meta{font-size:20px;font-weight:900;color:var(--brand);line-height:1.35;margin:2px 0 4px}
.dkw .def{font-size:14px;line-height:1.7}
.dmis{display:grid;gap:6px;margin-top:12px}
.dmis>div{border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.65;background:#fff;border:1px solid var(--line)}
.dmis>div b{display:block;font-size:11.5px;margin-bottom:2px}
.dmis .x{border-color:#f3c3c3}.dmis .x b{color:var(--ng)}.dmis .o{border-color:#bfe6cf}.dmis .o b{color:var(--ok)}
@media(min-width:640px){.dmis{grid-template-columns:1fr 1fr}.dmis.small{grid-template-columns:1fr}}
.dsum b .ic{width:14px;height:14px;vertical-align:-2px}
.dstory{margin:6px 0 0;padding-left:18px;font-size:13.5px;line-height:1.7;color:var(--ink)}.dstory li{margin:3px 0}
details.dsum summary{cursor:pointer;font-weight:800;color:var(--mute)}details.dsum summary .ic{width:14px;height:14px;vertical-align:-2px}
.dqtag{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.dqtag .kw{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--brand);background:var(--brand2);border-radius:999px;padding:2px 10px}.dqtag .kw .ic{width:14px;height:14px}
.dqtag .relearn{margin-left:auto;font-size:12px;color:var(--mute)}
.dfbh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}.dfb .dfbh b.v{margin-bottom:0}
.dfb .dcor{font-weight:800;margin:4px 0 6px}
.dfb .dexp{white-space:pre-line}
.dkwline{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;background:#fff;border-radius:10px;padding:8px 12px;border:1px solid var(--line)}.dkwline .ic{width:16px;height:16px;color:var(--brand);flex:none}
.dres .dwrap{text-align:left}
/* --- ドリル v2（2026-09-19）：今日の一手・難しさ・ステップ --- */
.dqtag .fmt{font-size:11.5px;font-weight:800;color:var(--accent);background:var(--accbg);border-radius:999px;padding:2px 9px}
.dact{text-align:left;background:var(--accbg);border:1.5px solid var(--accent);border-radius:14px;padding:14px 16px;margin:14px 0 10px}
.dact .dacth{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dact .dacth b{display:inline-flex;align-items:center;gap:5px;font-size:15px;color:var(--accent)}.dact .dacth b .ic{width:17px;height:17px}.dact .dacth span{font-size:12px;color:var(--mute);font-weight:700}
.dact .dactdo{margin:8px 0;font-size:14px;font-weight:700;line-height:1.7}
.dact .dactp{white-space:pre-wrap;word-break:break-word;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.7;font-family:inherit;margin:0 0 10px;max-height:240px;overflow:auto}
.dact .btns{justify-content:flex-start}.dact .dbtn.on{background:var(--ok);border-color:var(--ok);color:#fff}
.dact .dactn{margin:8px 0 0;font-size:11.5px;color:var(--mute)}
.dfeel{text-align:left;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 14px;background:#fff}
.dstepbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}.dstepbar b{color:var(--brand)}.dstepbar span{color:var(--mute);font-size:12px}
.dstepbar i{flex:1 1 100%;height:6px;border-radius:99px;background:var(--brand2);overflow:hidden;display:block}.dstepbar i u{display:block;height:100%;background:var(--brand);border-radius:99px}
.dfeelq{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;font-size:13px;font-weight:700}
.dfeelq button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink)}.dfeelq button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}.dfeelq button.on{background:var(--brand);border-color:var(--brand);color:#fff}.dfeelq button:disabled{opacity:.6;cursor:default}.dfeelq button.on:disabled{opacity:1}
.dfeelok{font-size:13px;margin:10px 0 8px;line-height:1.7}
.dsteps2{margin-top:10px;font-size:13px}.dsteps2 summary{cursor:pointer;color:var(--mute);font-weight:700}.dsteps2 ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.dsteps2 li button{width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;display:block;color:var(--ink)}.dsteps2 li button b{display:block;font-size:13px}.dsteps2 li button small{display:block;font-size:11.5px;color:var(--mute);line-height:1.5;margin-top:2px}
.dsteps2 li.on button{border-color:var(--brand);background:var(--brand2)}.dsteps2 li button:hover{border-color:var(--brand)}
.dstepsel{font-size:11.5px;font-weight:700;color:var(--mute);text-decoration:underline;white-space:nowrap}.dsteps2.open{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0;background:#fff}.dsteps2.open p{margin:0 0 8px;font-size:13px}
.darchs{margin:6px 0 0 4px}.darchs>summary{cursor:pointer;font-weight:800;font-size:13px;padding:4px 0}.darchs>summary .nn{margin-left:8px;color:var(--mute);font-weight:700;font-size:12px}
.dlast{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--warnbg);border:1px solid #f4d9b3;border-radius:12px;padding:9px 12px;margin:10px 0;font-size:13px;font-weight:700}.dlast button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer}
.dstepup{background:var(--okbg,#e9f9ef);border:1px solid var(--ok);border-radius:12px;padding:10px 14px;margin:10px 0;font-size:13px;line-height:1.7}.dstepup b{display:block;font-size:14.5px}
.dsec{font-size:15px;font-weight:900;margin:18px 0 8px;display:flex;align-items:center;gap:6px}.dsec .ic{width:16px;height:16px;color:var(--brand)}
.dkws{display:grid;gap:8px}@media(min-width:720px){.dkws{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}}
.dkws .dkw{background:var(--brand2);border-radius:12px;padding:10px 12px}.dkws .dkw .meta{font-size:15px}.dkws .dkw .def{font-size:12.5px;color:var(--mute)}.dkws .dkwic{width:36px;height:36px}.dkws .dkwic .ic{width:18px;height:18px}
.drevs summary.dsec{cursor:pointer;list-style:none}.drevs summary.dsec::-webkit-details-marker{display:none}.drevs summary.dsec:after{content:'（閉じる）';font-size:11.5px;font-weight:700;color:var(--dim)}.drevs:not([open]) summary.dsec:after{content:'（開く）'}
.drev{border:1px solid var(--line);border-left:5px solid var(--ok);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:#fff}
.drev.ng{border-left-color:var(--ng)}
.drh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;margin-bottom:6px}.drh .n{color:var(--mute)}.drh .kw{color:var(--brand)}.drh .res{margin-left:auto}.drev.ok .res{color:var(--ok)}.drev.ng .res{color:var(--ng)}
.drev .q{font-weight:700;font-size:14px;line-height:1.7;white-space:pre-line}
.drev .ans{font-size:13px;margin:8px 0;padding:6px 10px;background:#f7f8fb;border-radius:8px;line-height:1.6}
.drev .exp{font-size:13.5px;line-height:1.75;white-space:pre-line;color:var(--ink)}
.darch{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
.darch summary{cursor:pointer;font-weight:800;font-size:13.5px;color:var(--mute)}
.darch ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px}
.darch li{display:flex;gap:8px;align-items:center;font-size:13.5px}.darch li a{text-decoration:none}.darch li .done{color:var(--ok);font-weight:800;font-size:12px}.darch li .c{font-size:11px;color:var(--dim);width:110px;flex:none}
.news{background:#eef1f6;border:1px solid var(--line);border-radius:16px;padding:16px 16px 10px;margin-bottom:16px}
.ntitle{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.ntitle h2{margin:0 0 6px;font-size:18px;display:flex;align-items:center;gap:8px}.nsub{font-size:12.5px;color:var(--mute)}
.nwaku{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 12px}.nwaku .tag{font-size:11px}.nlegend{font-size:11.5px;color:var(--dim);margin-left:4px}
.ndays{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);margin:0 0 8px}.ndaypick{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--mute)}.ndaypick select{font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:#fff;cursor:pointer}.ndaypick select:hover{border-color:var(--brand)}.ndays button{font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:#fff;cursor:pointer}.ndays button:hover{border-color:var(--brand);color:var(--brand)}.nlist{margin:14px 0 4px;border-top:1px dashed var(--line);padding-top:10px;font-size:13px}.nlist summary{cursor:pointer;font-weight:800;font-size:13px;color:var(--mute)}.nlist ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}.nlist li{display:flex;gap:10px;align-items:baseline}.nlist li button{font:inherit;font-size:13px;background:none;border:0;padding:0;color:var(--brand);text-decoration:underline;cursor:pointer}.nlist .nn{font-size:12px;color:var(--mute)}
.ncount{font-size:12.5px;font-weight:800;color:var(--mute);margin:0 0 8px}.ncount b{color:var(--ink)}
.ncount .nsel{font-weight:700;margin-left:8px;padding-left:8px;border-left:1px solid var(--line)}
.nrest li{align-items:center;gap:8px}.nrest li a{color:var(--brand)}.nrest .tag{flex:0 0 auto}
@media (max-width:640px){.nrest li{flex-direction:column;align-items:flex-start;gap:3px}.ncount .nsel{display:block;margin:3px 0 0;padding:0;border:0}}
.nitem{background:#fff;border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:14px;padding:14px 16px 12px;margin:0 0 12px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.nitem.t-use{border-left-color:var(--ok)}.nitem.t-case{border-left-color:var(--own)}.nitem.t-care{border-left-color:var(--warn)}
.nhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.nhead .src{font-size:11.5px;color:var(--dim);font-weight:700}.nhead .nno{margin-left:auto;font-size:11px;color:var(--dim);font-weight:700}
.news .tag,.nrest .tag{display:inline-block;background:var(--brand2);color:var(--brand);border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:800;white-space:nowrap}   /* ニュース枠のタグだけ。素の .tag にすると CSS 後方のこの1行がレッスンカードの .tag（対象者「〜な人（全員）」）まで nowrap にし、375px で 1-3 の見出しごと 25px 右にはみ出していた（2026-09-17 代表指摘） */
.news .tag.t-use,.nrest .tag.t-use{background:var(--okbg);color:var(--ok)}.news .tag.t-case,.nrest .tag.t-case{background:var(--ownbg);color:var(--own)}.news .tag.t-care,.nrest .tag.t-care{background:var(--warnbg);color:var(--warn)}
.nitem h3{margin:0 0 4px;font-size:16.5px;line-height:1.5;font-weight:800}.nitem h3 a{color:var(--ink);text-decoration:none}.nitem h3 a:hover{text-decoration:underline}
.nitem .orig{font-size:11.5px;color:var(--dim);margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nitem .what{font-size:14px;line-height:1.75;margin:0 0 10px;color:var(--ink)}
.nitem .cas{font-size:13.5px;line-height:1.7;background:var(--accbg);border-left:3px solid var(--accent);padding:8px 12px;border-radius:0 10px 10px 0;margin:0 0 10px}.nitem .cas b{color:var(--accent);font-size:11.5px;display:block;letter-spacing:.04em}
.nfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:10px}
.nread{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--brand);text-decoration:none;border:1.5px solid var(--brand3);border-radius:10px;padding:6px 12px;background:#fff}.nread:hover{background:var(--brand2)}
.nvote{display:inline-flex;gap:6px;align-items:center}.nvote .nq{font-size:12px;color:var(--mute);margin-right:2px}.nvote button{font:inherit;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--mute);cursor:pointer}.nvote button:hover{border-color:var(--brand3);color:var(--brand)}.nvote .ok{color:var(--ok);font-size:12.5px;font-weight:800}
.nlocked .what,.nlocked .cas,.nlocked .nfoot{display:none}.nlocked .nitem{opacity:.9}.nlocked h3 a{pointer-events:none;color:var(--mute)}
.nlocked .nitem::after{content:"ドリルを1問答えると、要約と「営業マーケで言うと」が開きます";display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12.5px;font-weight:700;color:var(--warn)}
/* ニュースのロック案内（ドリル未回答のときだけ出す） */
.nlock{display:flex;align-items:center;gap:12px;background:var(--warnbg);border:1.5px solid #f0cf95;border-radius:12px;padding:12px 14px;margin:2px 0 12px}
.nlock[hidden]{display:none}
.nlock>svg.ic{width:24px;height:24px;flex:none;color:var(--warn)}
.nlocktx{display:flex;flex-direction:column;gap:2px;min-width:0}
.nlocktx b{font-size:15px;color:var(--warn);line-height:1.5}
.nlocktx span{font-size:13px;line-height:1.65;color:var(--ink)}
.nlockgo{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:800;color:#fff;background:var(--warn);border:0;border-radius:999px;padding:9px 16px;cursor:pointer}
.nlockgo:hover{filter:brightness(1.1)}
@media (max-width:640px){.nlock{flex-wrap:wrap;gap:10px}.nlockgo{margin-left:0;width:100%;justify-content:center}}
.nweek{margin:14px 0 4px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px}.nweek h3{font-size:14px;margin:0 0 6px}.nweek ul{margin:0;padding-left:18px;font-size:13.5px}.nweek li{margin:4px 0}
@media (max-width:640px){.nfoot{flex-direction:column;align-items:flex-start}.nhead .nno{display:none}}
.kyonote{font-size:13px;line-height:1.7}
@media (max-width:640px){.dopts.tf{grid-template-columns:1fr 1fr}.ndays{flex-wrap:wrap}}
/* 毎日導線（2026-09-19・K278）：はじめにの「3ステップのあとは、毎日2分」／今日の3つ（.t3）／今日の1本（.kyoreco）／ヘッダーの未達ドット */
.daily{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 0 10px;max-width:760px}
.daily .dyh{display:flex;gap:10px;align-items:flex-start}.daily .dyh .ibox{flex:none}.daily .dyh>div{flex:1;min-width:0}
.daily .dyh b{display:block;font-size:15.5px;font-weight:900;line-height:1.4}.daily .dyh small{display:block;color:var(--mute);font-size:12.5px;line-height:1.6;margin-top:2px}
.daily .dy3{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.daily .dy3 li{background:var(--bg);border-radius:12px;padding:10px;font-size:13.5px;font-weight:800;line-height:1.4;display:flex;gap:9px;align-items:flex-start;min-width:0}
.daily .dy3 li .ibox{flex:none}.daily .dy3 li>span{flex:1;min-width:0}.daily .dy3 li em{font-style:normal;color:var(--brand);margin-right:4px}
.daily .dy3 li small{display:block;font-weight:400;color:var(--mute);font-size:11.5px;line-height:1.5;margin-top:2px}
.daily .dygo{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13.5px;font-weight:800;color:var(--brand);background:var(--brand2);border-radius:999px;padding:8px 16px;text-decoration:none}
.daily .dygo:hover{background:var(--brand3)}
.p-hajimeni main>*{max-width:760px}
.grp{margin:22px 0 0}.grp .grph{font-size:13px;font-weight:800;color:var(--mute);margin:0 0 8px;padding:0 2px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;border:0}
.grp .grph small{font-weight:400;font-size:12px;color:var(--dim)}
.more.rowlink{display:flex;align-items:center;gap:10px;padding:13px 14px;font-weight:800;font-size:14.5px;text-decoration:none;color:var(--ink)}.more.rowlink:hover{border-color:var(--brand)}
.more.rowlink .ibox{flex:none}.more.rowlink>span{flex:1;min-width:0}.more.rowlink small{display:block;font-weight:400;color:var(--mute);font-size:12px}.more.rowlink .chev{flex:none;color:var(--dim)}
.subsx.slim input[name=company],.subsx.slim input[name=dept]{display:none}.subsx.slim:focus-within input[name=company],.subsx.slim:focus-within input[name=dept]{display:block}
.subsx.wide.slim .sfields{grid-template-columns:1fr auto}.subsx.wide.slim:focus-within .sfields{grid-template-columns:1.3fr 1fr 1fr auto}
@media (max-width:720px){.subsx.wide.slim .sfields,.subsx.wide.slim:focus-within .sfields{grid-template-columns:1fr}}
.t3{background:#fff;border:1.5px solid var(--brand3);border-radius:16px;padding:14px;margin:0 0 16px;max-width:760px;box-shadow:0 6px 24px rgba(31,79,216,.06)}
.t3 .t3h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.t3 .t3h b{font-size:15.5px;font-weight:900;line-height:1.4}
.t3 .t3s{font-size:12px;font-weight:800;color:var(--accent);background:var(--accbg);border-radius:999px;padding:2px 10px;white-space:nowrap}
.t3 .t3c{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--mute);white-space:nowrap}
.t3 .bar{height:6px;background:#eef1f6;border-radius:999px;overflow:hidden;margin:8px 0 10px}.t3 .bar i{display:block;height:100%;background:var(--ok);width:0;border-radius:999px;transition:width .4s}
.t3 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.t3 li{min-width:0}.t3 li a{display:flex;gap:9px;align-items:flex-start;height:100%;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:800;line-height:1.35}
.t3 li a>span:last-child{flex:1;min-width:0}.t3 li small{display:block;font-weight:400;color:var(--mute);font-size:11.5px;line-height:1.5;margin-top:2px}
.t3 li .n{flex:none;width:24px;height:24px;border-radius:50%;background:#aab2bf;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.t3 li.cur a{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand2)}.t3 li.cur .n{background:var(--brand)}
.t3 li.done a{background:var(--okbg);border-color:#bfe5cf}.t3 li.done .n{background:var(--ok)}
.t3 .t3one{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--brand2);text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:800;line-height:1.45}
.t3 .t3one svg{flex:none;width:18px;height:18px;color:var(--brand);margin-top:2px}.t3 .t3one>span{flex:1;min-width:0}.t3 .t3one small{display:block;font-weight:400;color:var(--mute);font-size:11.5px}
.t3 .t3sub{margin:10px 0 0;font-size:12.5px;color:var(--mute);line-height:1.7}
.t3 .t3cal{margin:10px 0 0;font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.6}.t3 .t3cal a{font-weight:700}
.t3 .t3cal button{margin-left:auto;border:0;background:none;color:var(--dim);font-size:16px;line-height:1;cursor:pointer;padding:4px 6px}
.kyoabout{margin-top:26px}.kyoabout .lead{font-size:14px}
.kyoreco{margin-top:22px}.kyoreco h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.kyoreco h2 .sub{font-size:12px;font-weight:400;color:var(--mute)}
.kyoreco .one{display:flex;gap:12px;align-items:flex-start;background:var(--brand2);border:1.5px solid var(--brand);border-radius:14px;padding:13px 14px;text-decoration:none;color:var(--ink);margin:10px 0}
.kyoreco .one .pl{flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center}.kyoreco .one .pl svg{width:18px;height:18px;color:#fff}
.kyoreco .one>span:last-child{flex:1;min-width:0}.kyoreco .one b{display:block;font-size:15.5px;line-height:1.45}
.kyoreco .one .slot{display:block;width:fit-content;font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:var(--brand);border-radius:999px;padding:1px 9px;margin:0 0 4px}
.kyoreco .one small{display:block;color:var(--mute);font-size:12px;line-height:1.6}.kyoreco .one small.why{margin-top:2px}
.kyoreco .one .pbar{display:block;height:5px;background:#fff;border-radius:999px;overflow:hidden;margin-top:8px}.kyoreco .one .pbar i{display:block;height:100%;background:var(--brand);border-radius:999px}
.kyoreco .reco{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kyoreco .rlead.up{margin-top:8px}
.hdkyo{position:relative}.hdkyo.due::after{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid #fff}
@media (max-width:640px){.daily .dy3,.t3 ol,.kyoreco .reco{grid-template-columns:1fr}.t3 li a{align-items:center}}
/* 読む列の右端を1本に揃える（2026-09-19 代表指摘「横にはみ出していて、横幅が統一されていない」）。
   /hajimeni・/kyo は .start/.t3/.tiles.two/.kyo だけが 760px 止まりで、折りたたみ・メール保存欄・章の移動・お祝い帯は
   カラム幅いっぱい（1470px 表示で 876px）まで伸び、右端が 760/876 の2種類に割れていた。
   PC は main を 760px に揃え、1カラムになる 900px 以下は逆に 760px の上限を外して画面幅に揃える（上限を残すと今度は右に余白が出る）。
   .start 等より後ろに置くこと（メディアクエリでは詳細度が上がらないので、前に置くと 760px に負ける） */
body.p-hajimeni .layout>main,body.p-kyo .layout>main{max-width:760px}
@media (max-width:900px){body.p-hajimeni .layout>main,body.p-kyo .layout>main{max-width:none}
 .start,.t3,.tiles.two,.kyo,.daily,.hnudge{max-width:none}}

/* ---- ba（K287 仕事の場面） ---- */
.ba-tab{display:none}
@media (max-width:900px){.ba-tab{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line,#e3e8f0);padding:4px 4px calc(4px + env(safe-area-inset-bottom));justify-content:space-around}
.ba-tab a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;font-size:10.5px;font-weight:700;color:#5b6577;text-decoration:none;border-radius:8px}
.ba-tab a svg{width:20px;height:20px}.ba-tab a.on{color:var(--brand,#1f4fd8);background:#eef3ff}.ba-tab a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}}
.ba-prof{background:#fff;border:1.5px solid var(--brand3,#c9d8ff);border-radius:12px;padding:12px;margin:12px 0}
.ba-prof b.h{display:block;font-size:13.5px;margin-bottom:2px}.ba-prof small.h{display:block;color:#5b6577;font-size:12px;margin-bottom:8px;line-height:1.6}
.ba-prof .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.ba-prof label{display:block;font-size:11.5px;font-weight:700;color:#5b6577}
.ba-prof input,.ba-prof select{width:100%;box-sizing:border-box;margin-top:3px;padding:8px 10px;border:1px solid #cfd6e3;border-radius:8px;font:inherit;font-size:14px;background:#fff}
.ba-q{margin:12px 0 0;padding-top:12px;border-top:1px dashed #cfd6e3}.ba-q>b{display:block;font-size:14px;margin-bottom:6px}
.ba-q .ba-opts{display:flex;flex-wrap:wrap;gap:6px}.ba-q .ba-o{appearance:none;border:1.5px solid #cfd6e3;background:#fff;border-radius:999px;padding:8px 13px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;text-align:left;line-height:1.4}
.ba-q .ba-o.on{border-color:var(--brand,#1f4fd8);background:#eef3ff;color:var(--brand,#1f4fd8)}
.ba-sc{display:grid;gap:8px;margin-top:4px}.ba-sc a{display:flex;gap:10px;align-items:center;border:1.5px solid #cfd6e3;border-radius:12px;padding:10px 12px;text-decoration:none;color:inherit;background:#fff}
.ba-sc a:hover{border-color:var(--brand,#1f4fd8)}.ba-sc a b{display:block;font-size:14px;line-height:1.45}.ba-sc a small{display:block;color:#5b6577;font-size:12px;line-height:1.5}.ba-sc a .go{margin-left:auto;color:var(--brand,#1f4fd8);font-weight:800;font-size:12px;white-space:nowrap}
.ba-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:12px 0}
.ba-card{display:block;border:1.5px solid #dfe5ef;border-radius:14px;padding:12px 14px;background:#fff;text-decoration:none;color:inherit}
.ba-card:hover{border-color:var(--brand,#1f4fd8)}.ba-card b{display:block;font-size:14.5px;line-height:1.45}.ba-card small{display:block;color:#5b6577;font-size:12px;line-height:1.55;margin-top:3px}
.ba-dots{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:11.5px;color:#5b6577;flex-wrap:wrap}.ba-dots i{width:11px;height:11px;border-radius:50%;border:2px solid #b8c2d3;display:inline-block}.ba-dots i.on{background:var(--brand,#1f4fd8);border-color:var(--brand,#1f4fd8)}.ba-dots i.na{border-style:dotted;opacity:.5}
.ba-one{background:#fff7ed;border:1.5px solid #fdba74;border-radius:14px;padding:12px 14px;margin:12px 0}.ba-one[hidden]{display:none}.ba-one em{font-style:normal;font-size:11.5px;font-weight:800;color:#c2410c;letter-spacing:.05em}.ba-one b{display:block;font-size:15px;line-height:1.5;margin:2px 0}.ba-one a{font-weight:800;font-size:13px}
.ba-me{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;margin:4px 0 0}.ba-me button{appearance:none;border:0;background:none;color:var(--brand,#1f4fd8);font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.ba-more{margin:8px 0 16px;font-size:13px;line-height:1.9}
.ba-legend{list-style:none;padding:0;margin:0;display:grid;gap:8px}.ba-legend li b{display:block;font-size:13.5px}.ba-legend li span{font-size:12.5px;color:#5b6577;line-height:1.6}
.ba-nudge{background:#fff;border:1.5px solid #fdba74;border-radius:14px;padding:12px 14px;margin:12px 0;font-size:13.5px;line-height:1.7;position:relative}.ba-nudge b{display:block;font-size:14.5px}.ba-nudge a{font-weight:800}.ba-nudge .x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:18px;cursor:pointer;color:#5b6577}
.ba-badge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#fff7ed;color:#c2410c;font-size:11px;font-weight:800;vertical-align:middle;white-space:nowrap}
.ba-share{appearance:none;border:1px solid #cfd6e3;background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;color:#344054}
.lesson .ba-add{margin:0;padding-left:1.2em;font-size:13.5px;line-height:1.8}
.ba-mo{border:1px solid #dfe5ef;border-radius:12px;padding:12px 14px;margin:10px 0;background:#fff}.ba-mo h3{margin:0 0 4px;font-size:15.5px}.ba-mo.mine{border-color:var(--brand,#1f4fd8);box-shadow:0 0 0 2px #eef3ff}
.ba-pl{margin:0 0 8px;font-size:13.5px;line-height:1.7}.ba-pl small{display:block;color:#5b6577}
.ba-flow{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 8px;counter-reset:f}.ba-flow li{counter-increment:f;background:#eef3ff;border-radius:8px;padding:5px 9px;font-size:12.5px;font-weight:700}.ba-flow li:before{content:counter(f) ". ";color:var(--brand,#1f4fd8)}
.ba-pts{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:4px}.ba-pts li{font-size:13px;line-height:1.6}.ba-pts li b{margin-right:6px}.ba-pts li span{color:#5b6577}
.ba-gy summary small{font-weight:500;color:#5b6577}.ba-gyb{padding:6px 2px 2px}.ba-gyb .lbl{margin-top:10px}.ba-diff,.ba-top{margin:4px 0;padding-left:1.3em;font-size:13.5px;line-height:1.8}.ba-top li span{margin-left:6px;color:#5b6577;font-size:12.5px}
.ba-words{border-collapse:collapse;width:100%;font-size:13px;margin:4px 0}.ba-words th,.ba-words td{border:1px solid #dfe5ef;padding:6px 8px;text-align:left}.ba-words th{background:#f4f6fa}
.ba-dm{font-size:13px;line-height:1.8;margin:4px 0}.ba-usedm{appearance:none;border:1px solid var(--brand,#1f4fd8);color:var(--brand,#1f4fd8);background:#fff;border-radius:999px;padding:4px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}