/* 電気の仕事 — スマホファーストのポータル。トークンは 30_docs/design-2026-10-07-portal-ui-brief.md §2 */
:root{color-scheme:light;--bg:#f3f5f8;--panel:#fff;--ink:#16202b;--muted:#5a6573;--line:#e1e6ec;--brand:#0b3b66;--brand-face:#0b3b66;--brand-soft:#e8f1fb;--link:#0b5cad;--yellow:#f5b400;--on-yellow:#1b1b1b;--ok:#0f7b3f;--ng:#c02626;--shadow:0 1px 2px rgba(16,32,48,.06),0 4px 14px rgba(16,32,48,.06);--accent:var(--link)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0d131a;--panel:#151e28;--ink:#e7ecf2;--muted:#9aa6b3;--line:#263240;--brand:#5ea4e6;--brand-face:#10263d;--brand-soft:#132638;--link:#7cb6ec;--ok:#3fbf7a;--ng:#f07070;--shadow:none}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;line-height:1.8;font-size:16px;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
@media (min-width:900px){body{padding-bottom:0}}
a{color:var(--link)}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.narrow{max-width:832px;margin:0 auto}
.tool-w{max-width:1072px;margin:0 auto} /* 道具・過去問・学ぶ: PC で本文 960px（面の内側の余白 40px×2・外側 16px×2） */

/* ヘッダー */
.appbar{position:sticky;top:0;z-index:20;background:var(--brand-face);color:#fff}
.appbar .wrap{display:flex;align-items:center;gap:12px;height:56px}
.logo{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:18px;letter-spacing:.02em;white-space:nowrap}
.logo svg{width:28px;height:28px;flex:none}
.appbar nav.main{display:none;gap:4px;margin-left:16px}
.appbar nav.main a{color:#dbe7f3;text-decoration:none;font-size:15px;padding:8px 12px;border-radius:8px}
.appbar nav.main a:hover,.appbar nav.main a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff}
.appbar .acts{margin-left:auto;display:flex;gap:8px}
@media (min-width:900px){.appbar nav.main{display:flex}}
/* スマホ・タブレット（〜899px）: アプリバーの下に区分のメニュー（横にスクロール） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;font:inherit;font-size:15px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.btn-yellow{background:var(--yellow);color:var(--on-yellow)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-line{background:#037a35;color:#fff} /* LINE の緑 #06c755 に白い文字はコントラスト 2.26 のため、濃い緑（5.47）にする */
.btn-outline{background:var(--panel);color:var(--brand);border-color:var(--line)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed}

/* 下に固定のタブ（スマホ） */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--panel);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600}
.tabbar svg{width:24px;height:24px}
.tabbar a[aria-current="page"]{color:var(--brand)}
@media (min-width:900px){.tabbar{display:none}}

/* 共通の区切り */
.sec{margin:28px 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.sec-h h2{font-size:20px;line-height:1.4;margin:0;padding:0;border:0}
.sec-h a{font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.tag{display:inline-block;font-size:12px;font-weight:700;line-height:1;padding:6px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.tag.y{background:#fff3c4;color:#6b4e00}
:root[data-theme="dark"] .tag.y{background:#3a2f0a;color:#ffd34d}
.note{font-size:13px;color:var(--muted)}
.badge-sample{display:inline-block;font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;background:#b91c1c;color:#fff} /* ダークでも同じ濃い赤（白い文字で 6.47） */

/* トップのひとこと */
.hero{background:var(--brand-face);color:#fff;padding:20px 0 26px}
.hero h1{font-size:24px;line-height:1.45;margin:0 0 8px;letter-spacing:.01em}
.hero p{margin:0 0 16px;color:#d6e3f0;font-size:15px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:900px){.hero{padding:40px 0 44px}.hero h1{font-size:34px}.hero p{font-size:17px}}

/* 目的から選ぶ */
.purpose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.purpose a{display:flex;flex-direction:column;gap:6px;padding:14px;min-height:112px;text-decoration:none;color:var(--ink)}
.purpose .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.purpose .ic svg{width:24px;height:24px}
.purpose b{font-size:16px}
.purpose span{font-size:12px;color:var(--muted);line-height:1.5}
@media (min-width:900px){.purpose{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.purpose a{padding:20px;min-height:140px}}

/* 資格のタブ */
.qtabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px}
.qtabs::-webkit-scrollbar{display:none}
.qtabs button{flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.qtabs button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
:root[data-theme="dark"] .qtabs button[aria-selected="true"]{color:#0d131a}
.exam-grid{display:grid;gap:12px}
@media (min-width:900px){.exam-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px}}
.count{padding:16px}
.count .label{font-size:13px;color:var(--muted);margin:0}
.count .ev{font-weight:700;margin:2px 0 8px}
.count .days{display:flex;align-items:baseline;gap:6px;margin:0}
.count .days b{font-size:44px;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.count .date{font-size:14px;color:var(--muted);margin:6px 0 12px}
.count .next{font-size:13px;margin:0;padding-top:10px;border-top:1px solid var(--line)}
.daily{padding:16px}
.daily .meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);margin-bottom:6px}
.daily .stem{font-weight:700;margin:0 0 10px;line-height:1.7}

/* 問題の選択肢（今日の1問・過去問カード共通） */
.choices{display:grid;gap:8px;margin:12px 0}
.choice{display:flex;gap:10px;align-items:flex-start;text-align:left;font:inherit;font-size:15px;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer}
.choice b{min-width:1.4em;color:var(--brand)}
.choice:disabled{cursor:default}
.choice.ok{border-color:var(--ok);background:rgba(15,123,63,.10)}
.choice.ng{border-color:var(--ng);background:rgba(192,38,38,.10)}
.result{margin:12px 0 4px;font-weight:800}
.result.ok{color:var(--ok)}.result.ng{color:var(--ng)}
.expl{font-size:15px;margin:4px 0}
.fig{margin:10px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;padding:8px}
.fig img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}
.figcap{font-size:12px;color:var(--muted);margin:4px 0 12px}

/* 道具のカード */
.tools{display:grid;gap:10px}
.tools a{display:flex;gap:14px;align-items:center;padding:14px;text-decoration:none;color:var(--ink)}
.tools img{width:96px;height:54px;object-fit:cover;border-radius:8px;flex:none}
.tools b{display:block;font-size:16px}
.tools span{display:block;font-size:13px;color:var(--muted);line-height:1.5}
@media (min-width:900px){.tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tools img{width:144px;height:81px}}

/* 記事カード */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cards.scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
.cards.scroll::-webkit-scrollbar{display:none}
.cards.scroll .card{flex:0 0 78%;scroll-snap-align:start}
@media (min-width:900px){.cards.scroll{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0}.cards.scroll .card{flex:none}}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);overflow:hidden}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--brand-soft)}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.card b{font-size:15px;line-height:1.55}
.card time{font-size:12px;color:var(--muted)}

/* 求人の見本 */
.areas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.areas span{font-size:14px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.job{overflow:hidden}
.job .ph{aspect-ratio:16/7;background:repeating-linear-gradient(45deg,var(--brand-soft) 0 12px,transparent 12px 24px);display:grid;place-items:center;color:var(--muted);font-size:13px}
.job .body{padding:14px}
.job .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:8px 0}
.job .point{background:var(--bg);border-radius:8px;padding:10px 12px;font-size:14px;margin:8px 0 0}
.jobs-wrap{display:grid;gap:12px}
@media (min-width:900px){.jobs-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}

/* 企業向けの帯 */
.biz{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--brand-face);color:#fff;border-radius:12px}
.biz p{margin:0;color:#d6e3f0;font-size:14px}
@media (min-width:900px){.biz{flex-direction:row;align-items:center;justify-content:space-between;padding:24px 28px}}

/* 記事・ハブのページ */
.crumbs{font-size:13px;color:var(--muted);margin:12px 0 8px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.crumbs a{color:var(--muted)}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 16px 24px;box-shadow:var(--shadow)}
@media (max-width:600px){.sheet{border-radius:0;border-left:0;border-right:0;margin:0 -16px;box-shadow:none}}
@media (min-width:900px){.sheet{padding:32px 40px 40px}}
.sheet .eyecatch{display:block;width:calc(100% + 32px);margin:-18px -16px 16px;aspect-ratio:16/7;object-fit:cover;border-radius:12px 12px 0 0}
@media (max-width:600px){.sheet .eyecatch{border-radius:0}}
@media (min-width:900px){.sheet .eyecatch{width:calc(100% + 80px);margin:-32px -40px 24px}}
.sheet .img-note{font-size:12px;color:var(--muted);margin:-10px 0 16px}
h1{font-size:24px;line-height:1.45;margin:8px 0 4px}
@media (min-width:900px){h1{font-size:30px}}
.sheet h2{font-size:20px;line-height:1.45;margin:36px 0 12px;padding:0 0 0 12px;border-left:4px solid var(--yellow)}
.sheet h3{font-size:17px;margin:26px 0 8px}
.updated{color:var(--muted);font-size:13px;margin:0 0 18px}
table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px;display:block;overflow-x:auto}
.tbl table{display:table;margin:0}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;white-space:nowrap}
th{background:var(--bg)}
blockquote{margin:16px 0;padding:10px 14px;border-left:4px solid var(--line);color:var(--muted);background:var(--bg);border-radius:0 8px 8px 0}
.related{margin:24px 0 0}
.related .cards{margin-top:4px}

/* フッター */
footer.site{margin-top:48px;background:var(--panel);border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:24px 0 32px}
footer .foot{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px}
footer .foot a{color:var(--muted)}
footer .foot-sec a{color:var(--ink);font-weight:700}

/* グラフ（build.py の line_chart） */
.chart{--series-1:#2a78d6;--series-2:#eb6834;--grid:#e6eaef;--tick:#5a6573;--surface:#ffffff;margin:20px 0 24px;padding:0}
:root[data-theme="dark"] .chart{--series-1:#3987e5;--series-2:#d95926;--grid:#26323f;--tick:#9aa6b3;--surface:#151e28}
.chart figcaption{font-weight:700;font-size:15px;margin-bottom:4px}
.chart .legend{display:flex;gap:14px;font-size:13px;color:var(--muted);margin:2px 0 4px}
.chart .legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.chart .legend i.s1{background:var(--series-1)}.chart .legend i.s2{background:var(--series-2)}
.chart .plot{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--grid);stroke-width:1}
.chart .tick{fill:var(--tick);font-size:14px}
.chart .end{fill:var(--ink);font-size:14px;font-weight:600}
.chart polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart polyline.s1{stroke:var(--series-1)}.chart polyline.s2{stroke:var(--series-2)}
.chart circle{stroke:var(--surface);stroke-width:2}
.chart circle.s1{fill:var(--series-1)}.chart circle.s2{fill:var(--series-2)}
.chart .cross{stroke:var(--tick);stroke-width:1;stroke-dasharray:3 3}
.chart .tip{position:absolute;top:0;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:12px;line-height:1.6;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.chart .tip b{display:block;font-size:12px}
.chart .chart-note{font-size:12px;color:var(--muted);margin:4px 0 0}
@media (max-width:600px){.chart .tick,.chart .end{font-size:22px}.chart circle{r:6px}}

/* 電圧降下の計算 */
.vd{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0 20px}
.vd-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;align-items:center;margin:0 0 12px}
.vd-row[hidden]{display:none}
.vd-row label{font-size:14px;font-weight:600}
.vd input,.vd select{font:inherit;font-size:16px;width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.vd-actions button{font:inherit;font-weight:800;min-height:48px;padding:0 28px;border-radius:999px;border:0;background:var(--yellow);color:var(--on-yellow);cursor:pointer;width:100%}
@media (min-width:600px){.vd-actions button{width:auto}}
.vd-out{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.vd-out p{margin:4px 0}
.vd-main{font-size:18px}.vd-main b{font-size:26px;color:var(--brand)}
.vd-judge{font-weight:800}.vd-judge.ok{color:var(--ok)}.vd-judge.ng{color:var(--ng)}
.vd-error{color:var(--ng);font-weight:800}
.vd-calc{margin-top:8px;font-size:14px;color:var(--muted)}
@media (max-width:600px){.vd-row{grid-template-columns:1fr}}

/* 過去問カード */
.kk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.kk-stats div{background:var(--bg);border-radius:10px;padding:10px;text-align:center}
.kk-stats b{display:block;font-size:24px;line-height:1.2;color:var(--brand);font-variant-numeric:tabular-nums}
.kk-stats span{font-size:12px;color:var(--muted)}
.kk-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:8px 0 12px}
.kk-bar select{font:inherit;font-size:15px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.kk-card{padding:16px}
.kk-meta{color:var(--muted);font-size:13px;margin-bottom:6px}
.kk-stem{font-size:17px;font-weight:700;margin:0 0 12px;line-height:1.7}
.kk-basis{font-size:13px;color:var(--muted);margin:8px 0 0;padding-left:18px}
.kk-nav{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
.kk-nav button{font:inherit;font-weight:700;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.kk-nav .primary{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.kk-diagram summary{cursor:pointer;color:var(--link);font-size:14px}
.kk-local{font-size:13px;color:var(--muted);margin:10px 0}
.kk-local button{font:inherit;font-size:13px;color:var(--link);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}

/* ハブは白い面で包まず、カードを並べる */
.sheet[data-kind="hub"]{background:none;border:0;box-shadow:none;padding:0;margin:0}
.sheet[data-kind="hub"] h2{border-left:0;padding-left:0}
.sheet[data-kind="home"]{margin-top:8px}
.sec-t{font-size:20px;font-weight:800;line-height:1.4;margin:0}
.card .tag{align-self:flex-start}
.cards.scroll .card{flex-basis:68%}
.card img{aspect-ratio:16/8}
.hero .ctas .btn{flex:1 1 auto}
.nb{display:inline-block}
.count .next span{white-space:nowrap}
.card img,.sheet .eyecatch,.tools img{height:auto}
@media (max-width:599px){
.sheet[data-kind="hub"] .cards{grid-template-columns:1fr;gap:10px}
.sheet[data-kind="hub"] .card{flex-direction:row;align-items:flex-start}
.sheet[data-kind="hub"] .card img{width:112px;aspect-ratio:16/10;object-fit:cover;object-position:center;flex:none;align-self:center;margin-left:10px;border-radius:8px}
.sheet[data-kind="hub"] .card .body{padding:10px 12px;gap:4px}
.sheet[data-kind="hub"] .card b{font-size:14px}
}
.sheet .eyecatch{max-width:none}
@media (min-width:900px){.hero .ctas .btn{flex:0 0 auto}}

/* ---- 学習まわり（資格のハブのタブ・学習ダッシュボード・過去問カードの進み具合・マイページ） ---- */
.lh{margin:8px 0 24px}
.lh .qtabs{margin-bottom:14px}
.lh-panel[hidden]{display:none}
.lh-head{display:flex;gap:14px;align-items:center;padding:12px;margin-bottom:12px}
.lh-head img{width:112px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none;background:var(--brand-soft)}
.lh-head p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
.lh-head .lh-name{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:2px}
.lh-grid{display:grid;gap:12px}
@media (min-width:700px){.lh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lh-head img{width:176px}}
@media (min-width:1000px){.lh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lh-card{padding:16px;display:flex;flex-direction:column;gap:8px}
.lh-t{margin:0;font-size:13px;font-weight:800;color:var(--brand);letter-spacing:.04em}
.lh-card .note{margin:auto 0 0}
.lh-count .ev{margin:0;font-weight:700;font-size:14px}
.lh-count .days{margin:0;display:flex;align-items:baseline;gap:4px}
.lh-count .days b{font-size:40px;line-height:1.1;color:var(--brand);font-variant-numeric:tabular-nums}
.lh-dates{list-style:none;margin:0;padding:0;font-size:14px}
.lh-dates li{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.lh-dates li[hidden]{display:none}
.lh-dates time{flex:none;min-width:5.6em;font-weight:700;font-variant-numeric:tabular-nums}
.lh-dates time[data-kind="apply"]{color:var(--muted)}
.lh-dates li.next{color:var(--brand)}
.lh-dates li.past{color:var(--muted);text-decoration:line-through}
.lh-more{font-size:14px;font-weight:700;text-decoration:none}
.lh-more::after{content:" ›"}
.lh-wait{margin:0;padding:12px;border-radius:10px;background:var(--bg);color:var(--muted);font-size:14px}
.lh-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.lh-rates div{background:var(--bg);border-radius:10px;padding:10px;text-align:center}
.lh-rates b{display:block;font-size:26px;line-height:1.2;color:var(--brand);font-variant-numeric:tabular-nums}
.lh-rates .wait b{color:var(--muted)}
.lh-rates span{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.lh-kk-t{margin:0;font-weight:700;font-size:15px;line-height:1.6}
.lh-mine p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.lh-mine b{color:var(--brand)}
.lh-mine-bar,.kk-prog-bar,.kk-frow .bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.lh-mine-bar i,.kk-prog-bar i,.kk-frow .bar i{display:block;height:100%;border-radius:999px;background:var(--yellow)}
.lh-fields{display:flex;flex-wrap:wrap;gap:6px}
.lh-fields span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:600}
.lh-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.lh-acts .btn{flex:1 1 auto}
.lh-steps{margin:0;padding-left:1.4em;font-size:15px;line-height:1.7}
.lh-steps li{margin:0 0 6px}
.lh-steps li::marker{font-weight:800;color:var(--brand)}

/* 過去問カード: 出す問題・進み具合・分野別の正答率 */
.kk-mode{display:flex;gap:6px;flex-wrap:wrap}
.kk-mode button{font:inherit;font-size:14px;font-weight:700;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.kk-mode button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
:root[data-theme="dark"] .kk-mode button[aria-pressed="true"]{color:#0d131a}
.kk-prog{margin:0 0 10px}
.kk-prog-t{display:flex;align-items:baseline;gap:4px;font-size:14px;margin-bottom:6px}
.kk-prog-t b{font-size:20px;color:var(--brand);font-variant-numeric:tabular-nums}
.kk-prog-t span{margin-left:auto;font-size:12px;color:var(--muted)}
.kk-dots-d summary{cursor:pointer;color:var(--link);font-size:13px;margin-top:6px}
.kk-dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}
.kk-by{font-size:12px;color:var(--muted);margin:8px 0 0}
.daily-other{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--bg)}
.kk-dots i{width:8px;height:8px;border-radius:2px;background:var(--line)}
.kk-dots i.ok{background:var(--ok)}.kk-dots i.ng{background:var(--ng)}
.kk-dots i.cur{outline:2px solid var(--brand);outline-offset:1px}
.kk-meta .tag{margin-left:8px;vertical-align:1px}
.kk-go{display:flex;width:100%;justify-content:center;align-items:center;margin-top:12px;font:inherit;font-weight:800;min-height:48px;border-radius:999px;border:0;background:var(--yellow);color:var(--on-yellow);cursor:pointer}
.kk-empty{margin:4px 0;font-weight:700}
.kk-fsec{margin:24px 0 8px}
.kk-fsec .note{margin:2px 0 10px}
.kk-fields{display:grid;gap:6px}
.kk-frow{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;font:inherit;text-align:left;min-height:48px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);text-decoration:none;cursor:pointer}
.kk-frow.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.kk-frow .n{font-size:14px;font-weight:700;line-height:1.4}
.kk-frow .v{font-weight:800;font-size:15px;text-align:right;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1.3}
.kk-frow .v small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
@media (max-width:420px){.kk-frow{grid-template-columns:minmax(0,1fr) auto}.kk-frow .bar{grid-column:1/-1;grid-row:2}}

/* 学習ダッシュボード・マイページ */
.ld-hero{display:block;width:100%;height:auto;aspect-ratio:16/6;object-fit:cover;border-radius:12px;margin:0 0 8px;background:var(--brand-soft)}
.ld-sec{margin:20px 0 0}
.ld-acts{display:grid;gap:10px;margin:10px 0}
@media (min-width:600px){.ld-acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ld-act{display:flex;flex-direction:column;gap:2px;padding:14px 16px;text-decoration:none;color:var(--ink);border-left:4px solid var(--yellow)}
.ld-act b{font-size:16px}
.ld-act span{font-size:13px;color:var(--muted);line-height:1.5}
.ld-act.muted{border-left-color:var(--line)}
.ld-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ld-count{display:flex;flex-direction:column;gap:2px;padding:12px 14px;text-decoration:none;color:var(--ink);min-height:112px}
.ld-count .nm{font-size:13px;font-weight:700;color:var(--muted);line-height:1.4}
.ld-count .days{display:flex;align-items:baseline;gap:3px;font-size:14px}
.ld-count .days b{font-size:32px;line-height:1.1;color:var(--brand);font-variant-numeric:tabular-nums}
.ld-count .ev{font-size:12px;color:var(--muted);line-height:1.5}
.ld-weak{padding:14px;display:grid;gap:6px}
.ld-weak .note{margin:0 0 4px}
.my .kk-stats{margin-top:0}
.my-sync{display:flex;gap:12px;align-items:flex-start;padding:16px;margin-top:12px;background:var(--brand-soft);border-color:transparent}
.my-sync .ic{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--panel);color:var(--brand)}
.my-sync .ic svg{width:24px;height:24px}
.my-sync b{display:block;font-size:15px}
.my-sync p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.6}

/* ---- 記事のテンプレート（要点・目次・見出し・表・出典・道具への誘導）と、年収・転職のハブ ---- */
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:6px 0 18px;font-size:13px;color:var(--muted)}
.art-meta .updated{margin:0;font-weight:700;color:var(--ink)}
.art-meta span{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--bg);font-size:12px}
.cards.scroll{scroll-padding-inline:16px}
@media (min-width:900px){.cards.scroll{scroll-padding-inline:0}}
.sheet[data-kind="article"] h2,.sheet[data-kind="tool"] h2{position:relative;border-left:0;padding:0 0 10px;border-bottom:2px solid var(--line);scroll-margin-top:72px}
.sheet[data-kind="article"] h2::after,.sheet[data-kind="tool"] h2::after{content:"";position:absolute;left:0;bottom:-2px;width:56px;height:2px;background:var(--yellow)}
.sheet[data-kind="article"] h3,.sheet[data-kind="tool"] h3{padding-left:12px;border-left:4px solid var(--brand);line-height:1.5}
.points{margin:8px 0 20px;padding:16px 16px 12px;border-radius:12px;background:var(--brand-soft);border:1px solid transparent}
.sheet .points h2{margin:0 0 8px;padding:0;border:0;font-size:15px;color:var(--brand);letter-spacing:.04em}
.sheet .points h2::after{display:none}
.points ul{list-style:none;margin:0;padding:0}
.points li{position:relative;padding:6px 0 6px 28px;line-height:1.65;font-weight:600;border-top:1px solid rgba(11,59,102,.12)}
.points li:first-child{border-top:0}
.points li::before{content:"";position:absolute;left:4px;top:13px;width:14px;height:14px;border-radius:50%;background:var(--yellow);box-shadow:inset 0 0 0 4px var(--brand-soft)}
.pt-more summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--link);min-height:40px;display:flex;align-items:center}
.toc{margin:0 0 24px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.toc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;font-weight:800}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"閉じる";font-size:13px;font-weight:600;color:var(--link)}
.toc details:not([open]) summary::after{content:"開く"}
.toc ol{margin:0;padding:0 16px 10px;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;border-top:1px solid var(--line)}
.toc a{display:flex;gap:10px;align-items:baseline;padding:10px 0;min-height:44px;text-decoration:none;color:var(--ink);font-size:15px;line-height:1.5}
.toc a::before{content:counter(toc);flex:none;min-width:1.6em;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.tbl{margin:12px 0;overflow-x:auto;border:1px solid var(--line);border-radius:10px;
background:linear-gradient(to right,var(--panel) 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,linear-gradient(to left,var(--panel) 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,rgba(16,32,48,.18),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(16,32,48,.18),transparent) right/12px 100% no-repeat scroll}
.tbl:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tbl th{background:var(--brand-soft);color:var(--ink);font-size:13px}
.tbl tr:last-child td{border-bottom:0}
.tbl td,.tbl th{font-variant-numeric:tabular-nums}
.tbl th:first-child,.tbl td:first-child{position:sticky;left:0;z-index:1;background:var(--panel);box-shadow:1px 0 0 var(--line)}
.tbl th:first-child{background:var(--brand-soft)}
.cta{margin:32px 0 8px}
.cta-t{margin:0 0 10px;font-size:15px;font-weight:800}
.cta-list{display:grid;gap:10px}
@media (min-width:700px){.cta-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cta-card{display:flex;gap:12px;align-items:center;padding:14px 16px;min-height:72px;text-decoration:none;color:var(--ink);border-left:4px solid var(--yellow)}
.cta-card .ic{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.cta-card .ic svg{width:24px;height:24px}
.cta-card b{display:block;font-size:16px}
.cta-card b::after{content:" ›";color:var(--brand)}
.cta-card span span{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.srcbox{margin:28px 0 0;padding:4px 16px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:14px}
.sheet .srcbox h2{font-size:15px;margin:12px 0 4px;padding:0;border:0}
.sheet .srcbox h2::after{display:none}
.srcbox ul{margin:4px 0;padding-left:1.2em}
.srcbox li{margin:4px 0;line-height:1.6;word-break:break-all}

/* ハブ（年収・転職）の見出し画像・カード・棒グラフ */
.hub-sec{margin:28px 0}
.sheet[data-kind="hub"] .hub-sec h2{font-size:20px;margin:0 0 12px}
.hub-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin:8px 0 0;background:var(--brand-soft)}
@media (min-width:700px){.hub-img{aspect-ratio:16/6}}
.hub-hero{overflow:hidden;margin:8px 0 0}
.hub-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--brand-soft)}
@media (min-width:700px){.hub-hero img{aspect-ratio:16/6}}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.kpis div{background:var(--bg);border-radius:10px;padding:10px 8px;text-align:center}
.kpis b{display:block;font-size:20px;white-space:nowrap;line-height:1.25;color:var(--brand);font-variant-numeric:tabular-nums}
.kpis span{display:block;font-size:11px;line-height:1.5;color:var(--muted)}
@media (min-width:700px){.kpis b{font-size:30px}.kpis span{font-size:13px}}
.nh-chart{padding:16px}
.bars{margin:0;max-width:520px}
.bars figcaption{font-weight:800;font-size:15px;line-height:1.5;margin:0 0 8px}
.bars svg{display:block;width:100%;height:auto;overflow:visible}
.bars rect{fill:#7f9cb9}
.bars .hi rect{fill:var(--yellow)}
.bars .nm{fill:var(--ink);font-size:14px}
.bars .hi .nm{font-weight:800}
.bars .val{fill:var(--ink);font-size:14px;font-weight:700}
.bars .note{margin:8px 0 0;font-size:12px}
:root[data-theme="dark"] .bars rect{fill:#4f7396}
@media (min-width:900px){.nh-chart{display:flex;justify-content:center}.bars{flex:1}}
.ch-grid{display:grid;gap:12px}
@media (min-width:700px){.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ch-card{padding:16px;display:flex;flex-direction:column;gap:10px}
.ch-top{display:flex;gap:12px;align-items:center}
.ch-top .ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--yellow);color:#0b3b66}
.ch-top .ic svg{width:24px;height:24px}
.sheet[data-kind="hub"] .ch-card h3{margin:0;font-size:18px;line-height:1.4}
.ch-top p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.ch-num{margin:0;display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:10px;background:var(--bg)}
.ch-num b{flex:none;font-size:24px;line-height:1.2;color:var(--brand);font-variant-numeric:tabular-nums}
.ch-num span{font-size:12px;color:var(--muted);line-height:1.5}
.ch-card ul{list-style:none;margin:0;padding:0}
.ch-card li a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:8px 0;border-top:1px solid var(--line);text-decoration:none;font-size:15px;font-weight:600;line-height:1.5}
.ch-card li a::after{content:"›";flex:none;color:var(--brand);font-size:18px}
@media (min-width:900px){
.hub-img{aspect-ratio:16/5}
.hub-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
.hub-hero img{height:100%;aspect-ratio:auto;min-height:260px}
.hub-hero .kpis{grid-template-columns:1fr;align-content:center;padding:16px}
.hub-hero .kpis div{display:flex;align-items:baseline;gap:12px;text-align:left;padding:12px 16px}
.hub-hero .kpis b{flex:none;min-width:5.2em}
.bars{max-width:440px}
}

/* ---- 求人の部品（見本）・道具のハブ・企業向け・トップの仕上げ ---- */
.sec-h a.more::after,.tl-card .go::after{content:" ›"}
.ph-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;color:var(--muted);font-size:12px;font-weight:700;background:repeating-linear-gradient(45deg,var(--brand-soft) 0 12px,transparent 12px 24px)}
.ph-empty svg{width:28px;height:28px;opacity:.7}
/* トップのひとこと: 画像の枠 */
.hero-in{display:grid;gap:18px}
.hero-ph{border-radius:12px;overflow:hidden;aspect-ratio:16/7;background:#123f66}
.hero-ph img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.hero-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:40px}.hero-ph{aspect-ratio:16/10}}
/* 求人カード */
.job{display:flex;flex-direction:column}
.job[hidden]{display:none}
.job .ph{position:relative;aspect-ratio:16/7;background:none;display:block}
.job .ph img{display:block;width:100%;height:100%;object-fit:cover}
.job .ph .badge-sample{position:absolute;left:10px;top:10px}
.job .body{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px}
.job-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.job-top .loc{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.job-top .loc svg{width:16px;height:16px}
.job-t{font-size:17px;line-height:1.5;margin:2px 0 0}
.sheet .job-t{margin:2px 0 0;padding:0;border:0}
.job .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:2px -14px;padding:2px 14px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.job .chips::-webkit-scrollbar{display:none}
.job .chips .tag{flex:none}
.tag.b{background:var(--brand);color:#fff}
.tag.n{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="dark"] .tag.b{color:#0d131a}:root[data-theme="dark"] .tag.y{background:#3a2f0a;color:#ffd666}
.job .point{margin:4px 0 0;line-height:1.65;border-left:3px solid var(--yellow)}
.job .point b{display:block;font-size:12px;color:var(--brand);letter-spacing:.04em}
.job-meta{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
/* トップの求人 */
.areas a{font-size:14px;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;font-weight:600}
.areas a:hover{border-color:var(--brand);color:var(--brand)}
.jobs-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
/* 求人のページ（絞り込み） */
.jb-sample{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#fdecec;color:#7a1414;font-size:13px;font-weight:700;line-height:1.6}
:root[data-theme="dark"] .jb-sample{background:#3a1717;color:#ffc9c9}
.jf{padding:14px 16px}
.jf-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.jf-head .sec-t{font-size:17px}
.jf-reset{font:inherit;font-size:14px;font-weight:700;color:var(--link);background:none;border:0;min-height:44px;padding:0 4px;cursor:pointer}
.jf-group{padding:8px 0;border-top:1px solid var(--line)}
.jf-group:first-of-type{border-top:0}
.jf-l{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.jf-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
.jf-chips::-webkit-scrollbar{display:none}
.jf-chips button{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.jf-chips button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.jf-chips button[aria-pressed="true"]::before{content:"✓ "}
:root[data-theme="dark"] .jf-chips button[aria-pressed="true"]{color:#0d131a}
.jf .note{margin:8px 0 0}
.jb-bar p{margin:16px 0 10px;font-weight:800}
.jobs-list{display:grid;gap:12px}
.jb-empty{padding:16px;margin:0;color:var(--muted)}
@media (min-width:700px){.jobs-list{grid-template-columns:repeat(2,minmax(0,1fr))}.jf-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
@media (min-width:1000px){.jobs-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 道具のカード（トップ・道具のハブ） */
.tl-grid{display:grid;gap:12px}
.tl-card,.tl-soon{display:flex;gap:14px;align-items:flex-start;padding:12px;text-decoration:none;color:var(--ink)}
.tl-card img{width:112px;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;flex:none;background:var(--brand-soft)}
.tl-card .body,.tl-soon .body{display:flex;flex-direction:column;gap:4px;min-width:0}
.tl-card .tag,.tl-soon .tag{align-self:flex-start}
.tl-card b,.tl-soon b{font-size:16px;line-height:1.5}
.tl-card .d,.tl-soon .d{font-size:13px;color:var(--muted);line-height:1.55}
.tl-card .go{font-size:14px;font-weight:700;color:var(--link)}
.tl-soon{background:transparent;border-style:dashed;box-shadow:none}
.tl-soon .ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.tl-soon .ic svg{width:24px;height:24px}
.sheet .tl-h{margin:24px 0 12px;font-size:17px}
@media (min-width:700px){.tl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.tl-grid.home{grid-template-columns:repeat(2,minmax(0,1fr))}
.tl-card{flex-direction:column;padding:0;overflow:hidden}.tl-card img{width:100%;border-radius:0;aspect-ratio:16/8}.tl-card .body{padding:0 16px 16px}}
.tl-grid.home .tl-card .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 企業向け */
.bz-hero{overflow:hidden;margin:0 0 20px}
.bz-ph{aspect-ratio:16/7}
.bz-ph img{display:block;width:100%;height:100%;object-fit:cover}
.bz-copy{padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bz-copy p{margin:0}
.sheet .bz-copy .bz-t{font-size:20px;font-weight:800;line-height:1.45}
.bz-copy p:not(.bz-t){font-size:14px;color:var(--muted);line-height:1.7}
.bz-flow{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:none}
.bz-flow li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px}
.bz-flow .no{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--on-yellow);font-weight:800}
.bz-flow b{display:block;line-height:1.5}
.bz-flow p{margin:2px 0 0;font-size:14px;color:var(--muted);line-height:1.6}
.bz-jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bz-jobs div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-top:4px solid var(--brand)}
.bz-jobs span{font-size:13px;color:var(--muted);line-height:1.5}
@media (min-width:700px){.bz-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px){.tl-grid.home .tl-card{flex-direction:row;align-items:center;padding:14px}.tl-grid.home .tl-card img{width:176px;border-radius:8px;aspect-ratio:16/10}.tl-grid.home .tl-card .body{padding:0}}

/* 表示の切り替え（ライト／ダーク／端末に合わせる） */
.theme-switch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0}
.theme-switch span{font-size:13px;font-weight:700;margin-right:4px}
.theme-switch button{font:inherit;font-size:13px;font-weight:700;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.theme-switch button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
:root[data-theme="dark"] .theme-switch button[aria-pressed="true"]{color:#0d131a}
.theme-switch.big button{min-height:44px;padding:0 18px;font-size:15px}

/* ダーク時の画像: 明るい背景のイラストと写真が暗い面から浮かないよう、少しだけ落とす（過去問の図は読みやすさのため対象外） */
:root[data-theme="dark"] main img[src$=".svg"]:not(.fig img){filter:brightness(.86)}
:root[data-theme="dark"] main img[src$=".webp"]:not(.fig img),:root[data-theme="dark"] main img[src$=".png"]:not(.fig img){filter:brightness(.88)}
:root[data-theme="dark"] .fig{background:#e9edf2}

/* ---- 押せる部品の当たり判定を 44px 以上に（ux-upgrade 2026-10-07） ----
   見た目を大きくしたくない部品は、透明な枠（border）で当たり判定だけを広げ、見える輪郭は内側の影で描く */
.qtabs button,.kk-mode button,.jf-chips button,.areas a,.kk-bar select{min-height:44px}
.appbar .btn-sm{min-height:44px;border-width:4px;border-color:transparent;background-clip:padding-box}
.appbar .btn-ghost{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.logo{min-height:44px}
.theme-switch button{min-height:44px;border:4px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--line)}
.theme-switch button[aria-pressed="true"]{border-color:transparent;box-shadow:none}
.theme-switch{gap:0}
.sec-h a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.kk-local button{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle;margin:-12px 0}
footer .foot{gap:0 16px}
footer .foot a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a,.crumbs span{display:inline-flex;align-items:center;min-height:44px}
.crumbs{margin:2px 0 0}
.lh-more{display:flex;align-items:center;min-height:44px}

/* 主導線は「過去問を解いてみる」。会員の仕組みができるまで「無料で始める」は控えめな2番目 */
.btn-quiet{background:transparent;color:#d6e3f0;border-color:transparent;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.appbar .wide-only{display:none}
@media (min-width:600px){.appbar .wide-only{display:inline-flex}}

/* PC の「目的から選ぶ」: 「資格を取る」を大きく左に、ほかの3つを右に縦に並べる */
@media (min-width:900px){
.purpose{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:repeat(3,auto)}
.purpose a:first-child{grid-row:1/4;justify-content:flex-end;padding:28px;background:linear-gradient(160deg,var(--brand-soft),var(--panel) 70%)}
.purpose a:first-child .ic{width:56px;height:56px;border-radius:14px}
.purpose a:first-child .ic svg{width:32px;height:32px}
.purpose a:first-child b{font-size:24px}
.purpose a:first-child span:last-child{font-size:15px}
.purpose a:not(:first-child){display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center;min-height:0;padding:16px 20px}
.purpose a:not(:first-child) .ic{grid-row:1/3}
}
@media (min-width:900px){.purpose a:first-child{background:linear-gradient(90deg,var(--panel) 42%,rgba(255,255,255,0) 78%),url(/assets/img/gen/shikaku-denko1.webp) right center/cover no-repeat}
:root[data-theme="dark"] .purpose a:first-child{background:linear-gradient(90deg,var(--panel) 42%,rgba(21,30,40,.2) 78%),url(/assets/img/gen/shikaku-denko1.webp) right center/cover no-repeat}}

/* 本文へ飛ぶリンク（キーボードで最初に止まった時だけ見える） */
.skip{position:absolute;left:12px;top:8px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--yellow);color:var(--on-yellow);font-weight:800;text-decoration:none;transform:translateY(-200%);transition:transform .15s ease-out}
.skip:focus{transform:none}
main:focus{outline:none}
.sheet .jf h2.sec-t,.sheet h2.jb-h{border:0;padding:0;margin:0}
.sheet h2.jb-h{margin:20px 0 4px}
.sheet h2.jb-h::after,.sheet .jf h2.sec-t::after{display:none}
.kk-bar select{font-size:16px}

/* ---- 押せる部品の状態（ux-upgrade 2026-10-07）: 動きは transform と opacity だけ、ease-out ---- */
:where(a,button,select,input,textarea,summary,[role=tab],[tabindex]):focus-visible{outline:3px solid var(--link);outline-offset:2px}
:where(.appbar,.hero,.biz) :focus-visible{outline-color:var(--yellow)}
.btn,.qtabs button,.kk-mode button,.jf-chips button,.areas a,.theme-switch button,.choice,.kk-nav button,.vd-actions button,.card,.purpose a,.tl-card,.cta-card,.lh-more,.sec-h a{transition:transform .18s cubic-bezier(.16,1,.3,1),opacity .15s ease-out}
@media (hover:hover){
.btn:hover,.kk-nav button:hover,.vd-actions button:hover{opacity:.88}
.qtabs button:hover,.kk-mode button:hover,.jf-chips button:hover,.areas a:hover,.theme-switch button:hover,.choice:not(:disabled):hover{border-color:var(--brand)}
.card:hover,.purpose a:hover,.tl-card:hover,.cta-card:hover{transform:translateY(-2px)}
.sec-h a:hover,.lh-more:hover{opacity:.75}
}
.btn:active,.qtabs button:active,.kk-mode button:active,.jf-chips button:active,.areas a:active,.theme-switch button:active,.choice:not(:disabled):active,.kk-nav button:active,.vd-actions button:active{transform:scale(.97)}
.card:active,.purpose a:active,.tl-card:active,.cta-card:active{transform:scale(.99)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.card:hover,.purpose a:hover,.tl-card:hover,.cta-card:hover{transform:none}}

/* ---- 採点ループ r1（2026-10-07） ---- */
/* 6. 開閉の summary も 44px 以上に */
.pt-more summary,.kk-dots-d summary,details>summary{display:flex;align-items:center;min-height:44px;cursor:pointer}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}

/* 1. 年収の棒グラフ: 名前｜棒｜値 の格子で横幅を使い切る（値は棒の右） */
.bars{max-width:none}
.bars .bl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr) auto;column-gap:14px;row-gap:12px;align-items:center}
.bars .br{display:contents}
.bars .nm{font-size:14px;color:var(--ink);line-height:1.4}
.bars .hi .nm{font-weight:800}
.bars .track{display:block;height:16px}
.bars .bar{display:block;height:100%;border-radius:4px;background:#7f9cb9}
.bars .hi .bar{background:var(--yellow)}
.bars .val{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
:root[data-theme="dark"] .bars .bar{background:#4f7396}
:root[data-theme="dark"] .bars .hi .bar{background:var(--yellow)}
@media (max-width:599px){
.bars .bl{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
.bars .nm{grid-column:1/-1;margin-top:8px}
}

/* 2. スマホのトップ: ヒーローを縮め、「あと◯日」の1行カードと今日の1問を1画面目に近づける */
.txt-short{display:none}
.count-line{display:none}
.lbl-y{display:inline-block;background:var(--yellow);color:var(--on-yellow);font-size:12px;font-weight:800;line-height:1;padding:5px 9px;border-radius:999px;margin-right:6px}
@media (max-width:899px){
.hero{padding:14px 0 16px}
.hero h1{font-size:22px;margin-bottom:4px}
.hero p{margin-bottom:12px;font-size:14px;line-height:1.6}
.txt-wide{display:none}.txt-short{display:inline}
.hero-in{gap:12px}
.hero-ph{aspect-ratio:auto;height:96px}
.hero .ctas .btn-quiet{min-height:44px}
.count-line:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0;padding:10px 14px;min-height:56px;text-decoration:none;color:var(--ink)}
.cl-t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.cl-k{font-size:12px;color:var(--muted)}
.cl-e{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-d{flex:none;font-size:14px;font-weight:700}
.cl-d b{font-size:28px;line-height:1;color:var(--brand);margin:0 2px;font-variant-numeric:tabular-nums}
.sec:first-of-type{margin-top:16px}
.exam-grid .daily{order:-1}
}
.daily .meta span:last-child{white-space:nowrap}

/* 5. 資格のハブ: ほかの資格の記事は折りたたむ */
.sk-other{margin:14px 0 0}
.sk-other summary{font-weight:700;color:var(--link)}
.sk-other .cards{margin-top:10px}

/* 4. 電気らしい記憶点（7セグ表示は見やすさを優先して取りやめ。配線の折れ線と正解の電光は残す） */
/* 配線の折れ線: 見出しの印・区切り線・進み具合のバー */
.sheet[data-kind="article"] h2::after,.sheet[data-kind="tool"] h2::after{width:84px;height:10px;bottom:-6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 10'%3E%3Cpath d='M0 6h34l6-5h30' fill='none' stroke='%23f5b400' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='79' cy='1.5' r='3' fill='%23f5b400'/%3E%3C/svg%3E") left bottom/84px 10px no-repeat}
.sec-h h2::before,.sec-t::before{content:"";display:inline-block;width:26px;height:12px;margin-right:8px;vertical-align:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 9h9l5-6h6' fill='none' stroke='%23f5b400' stroke-width='2.2' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='3' r='2.6' fill='%23f5b400'/%3E%3C/svg%3E") center/26px 12px no-repeat}
.sheet .points h2::before,.sheet .srcbox h2::before,.jf-head .sec-t::before{display:none}
.count .next{border-top:0;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px) top/100% 2px no-repeat}
.lh-mine-bar,.kk-prog-bar,.kk-frow .bar{background:linear-gradient(var(--line),var(--line)) center/100% 2px no-repeat;overflow:visible}
.lh-mine-bar i,.kk-prog-bar i,.kk-frow .bar i{position:relative;border-radius:999px 0 0 999px}
.lh-mine-bar i::after,.kk-prog-bar i::after,.kk-frow .bar i::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 2px var(--panel)}
/* 正解の電光（一度だけ点く） */
.zap{display:inline-flex;width:22px;height:22px;margin-right:6px;vertical-align:-4px;animation:zap .9s cubic-bezier(.16,1,.3,1) 1 both}
.zap svg{width:100%;height:100%;fill:var(--yellow);stroke:#8a6400;stroke-width:1}
@keyframes zap{0%{opacity:0;transform:scale(.4) rotate(-12deg)}35%{opacity:1;transform:scale(1.25) rotate(4deg)}60%{opacity:.6}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.zap{display:none}}
/* 道具のページ: 入力欄や表は 960px を使い、説明の文章は 720px までにする（1行が長すぎないように） */
.sheet[data-kind="tool"] > :is(p,ul,ol,blockquote,.toc,.points),.sheet[data-kind="app"] > :is(p,ul,ol,blockquote){max-width:720px}
@media (min-width:900px){.sheet[data-kind="tool"] .eyecatch{aspect-ratio:16/5}}

/* 横にはみ出す表: 見出しは折り返さず、右端に手がかり（文字と、右端の影） */
.tbl th{white-space:nowrap}
.tbl-hint{margin:12px 0 -6px;text-align:right;font-size:12px;font-weight:700;color:var(--muted)}
.tbl-hint.done{visibility:hidden}
.tbl.can-scroll{box-shadow:inset -14px 0 10px -10px rgba(16,32,48,.22)}
.tbl.can-scroll.at-end{box-shadow:none}

/* ---- 採点ループ r2（2026-10-07） ---- */
/* 1. スマホのトップ: 「あと◯日」は1行カードに任せ、下のカードは日付と記事へのリンクだけの小さな行にする */
@media (max-width:899px){
.exam-grid .count{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:10px 14px}
.exam-grid .count .label,.exam-grid .count .ev,.exam-grid .count .days,.exam-grid .count .later{display:none}
.exam-grid .count .date{margin:0;font-size:14px;color:var(--ink);font-weight:700}
.exam-grid .count .next{margin:0;padding:0;background:none;font-size:14px}
.exam-grid .count .next a{display:inline-flex;align-items:center;min-height:44px}
}

/* 2. PC のトップ: 左のカウントダウンを上に詰め、下に学習の続きへの導線を置く */
.exam-side{display:grid;gap:12px;align-content:start}
.exam-links{display:none}
@media (min-width:900px){
.exam-side{align-self:start}
.exam-links{display:grid;gap:10px}
.exam-links a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.exam-links b{font-size:15px}
.exam-links b::after{content:" ›";color:var(--brand)}
.exam-links span{font-size:13px;color:var(--muted)}
}
@media (max-width:599px){.sheet[data-kind="tool"] .eyecatch{display:none}.sheet[data-kind="tool"]{padding-top:8px}}

/* 4. 資格のハブ: カードの高さを中身に合わせ、合格率カードの下の空白を詰める */
.lh-grid{align-items:start}
@media (min-width:1000px){.lh-grid{grid-template-areas:"date rate kk" "date steps kk"}.lh-grid>.lh-card:nth-child(1){grid-area:date}.lh-grid>.lh-card:nth-child(2){grid-area:rate}.lh-grid>.lh-card:nth-child(3){grid-area:kk}.lh-grid>.lh-card:nth-child(4){grid-area:steps}}

/* 5. 年収のハブ: 冒頭は要点の数字と小さい写真、カードはやめてグラフの行から記事へ、統計の表は畳む */
.hub-hero img{aspect-ratio:16/5}
@media (min-width:900px){.hub-hero{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}.hub-hero img{min-height:0;height:100%}.hub-hero .kpis{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px}.hub-hero .kpis div{flex-direction:column;align-items:flex-start;gap:2px}}
@media (max-width:899px){.hub-hero img{display:none}}
.bars .has-link .nm a{color:var(--ink);font-weight:700;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.nh-more{margin:8px 0 0}
.stat-tables{margin:8px 0 0}
.stat-tables summary{font-weight:700;color:var(--link)}
.stat-tables h3{font-size:16px;margin:16px 0 4px}
.bars .bl{row-gap:0}
.bars .nm{display:flex;align-items:center;min-height:44px}
@media (max-width:599px){.bars .nm{min-height:36px;margin-top:4px}.bars .has-link .nm a{min-height:44px;margin:-4px 0}}