/*
Theme Name: 電気資格道場
Description: 電験三種・第二種電気工事士の過去問を1問1答で学べるテーマ。マスコット「ビリピヨ」が公式と解説を教えてくれます。管理画面の「過去問」メニューから問題を登録すると、年度・科目の一覧が自動で作られます。
Version: 1.30.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: denki-dojo
*/

/* Layout: 1画面1役。トップ→資格→年度→科目→問題一覧→1問1答。各画面に「戻る」。 */
/* 1.22.0〜：「方眼ノート」風。クリーム色の紙に24pxの方眼、白いカードに黒っぽい線と右下の影、大事な言葉に黄色の蛍光ペン（ダークモードには切り替えない） */
:root{color-scheme:light;
--bg:#FFFDF5;--grid:#ECEFF4;--card:#FFFFFF;--text:#2B2A26;--sub:#5E5B53;--sub2:#45423B;--line:#2B2A26;--border:#E2DED3;
--accent:#1D5BC6;--accent-dark:#123E8C;--accent2:#EEF3FD;
--denken:#C2410C;--denken-bg:#FFF1E8;--denken-dark:#9A3412;--denko:#1D5BC6;--denko-bg:#EEF3FD;--denko-dark:#123E8C;
--mark:#FFE066;--premium:#FFD84D;--cta:#C2410C;--cta-dark:#9A3412;
--right:#3F7D4E;--wrong:#B5483E;--right-text:#386F45;--wrong-text:#A74239;--star:#A86A12;--draft-bg:#FFF0B3;--law:#B85C00;--law-bg:#FCEBD3;
--shadow:5px 5px 0 var(--line);--shadow-s:3px 3px 0 var(--line);
--ui:"Zen Maru Gothic",-apple-system,"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
--round:"M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
--serif:"Times New Roman","Hiragino Mincho ProN","Yu Mincho",serif}
*{box-sizing:border-box}
/* 中身が短いページでも、フッターを画面のいちばん下に置く（1.22.3〜） */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:0;overflow-x:clip;color:var(--text);font-family:var(--ui);font-weight:500;line-height:1.8;padding-inline:16px;
background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;
/* 言葉の途中で改行しない（Chrome・Edge）。Safari などは assets/wrap.js（BudouX）が区切る */
word-break:normal;word-break:auto-phrase;overflow-wrap:break-word}
/* BudouX が <wbr> を入れたあとは、<wbr> の所でだけ改行する（長すぎるときは、はみ出さないように折る） */
html.dd-budoux body{word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,.title,.sec-title,.page-h1,.hero-h1,.q-h1{text-wrap:balance}
p,li,dd,blockquote,figcaption,.bubble,.qtext,.explain,.exp-text,.choice-text,.entry,.page-lead,.hero-lead,.law-note-body,.mock-lead,.source,.note{text-wrap:pretty}
img,svg{max-width:100%}
a{color:var(--accent)}
.icon{display:inline-block;flex:none;vertical-align:-2px}
/* 大事な言葉の下の、黄色の蛍光ペン */
.mark{background:linear-gradient(transparent 58%,var(--mark) 58%);padding-inline:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 資格ごとの色（電験三種はオレンジ、第二種電気工事士は青） */
.theme-denken{--ex:var(--denken);--ex-bg:var(--denken-bg);--ex-dark:var(--denken-dark)}
.theme-denko{--ex:var(--denko);--ex-bg:var(--denko-bg);--ex-dark:var(--denko-dark)}

/* ===== ヘッダー（左：ビリピヨとサイト名、右：丸いボタンのメニュー） ===== */
.site-header{margin-inline:-16px;padding:12px 16px;background:var(--card);border-bottom:2px solid var(--line)}
.site-header-in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.site-brand{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text);text-decoration:none}
.site-logo{flex:none;width:44px;height:44px;object-fit:contain}
.site-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.site-name{font-family:var(--round);font-weight:800;font-size:22px;letter-spacing:.02em}
.site-sub{font-size:11px;color:var(--sub);white-space:nowrap}
.site-nav{display:flex;flex-wrap:wrap;gap:8px}
.site-header .site-nav a{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;padding:7px 15px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font-size:14.5px;font-weight:700;line-height:1.3;text-decoration:none}
.site-header .site-nav a:hover{background:#FFF8DB}
.site-header .site-nav a.nav-premium{background:var(--premium)}
.site-header .site-nav a[aria-current="page"]{background:var(--text);color:#fff}
html.dd-hash .site-nav,html.dd-sub .site-nav{display:none} /* トップでも、# のついた画面（年度の一覧・問題・模試など）ではボタンを出さない */
@media (max-width:640px){
  .site-header{padding:10px 16px 12px}
  .site-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
  .site-header .site-nav a{padding:7px 6px;font-size:14px}
  .site-name{font-size:20px}
  .site-logo{width:40px;height:40px}
}
@media (max-width:340px){.site-sub{font-size:10px}.site-header .site-nav a{font-size:13px}}

/* ===== 中身の幅 ===== */
main{max-width:640px;margin:0 auto;padding-block:20px 56px}
main.wide,main.exam-page.is-entry,#app:has(> .home-static){max-width:1120px}
main.exam-page{max-width:820px}
.crumb{font-size:13px;color:var(--sub);margin:0 0 8px;overflow-wrap:anywhere}
.crumb a{color:var(--accent);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span[aria-current]{color:var(--sub)}
a.link{display:inline-block;color:var(--accent);font-size:14px;font-weight:700;padding:6px 0;margin-bottom:6px;text-decoration:none}
a.link:hover{text-decoration:underline}
button.link{background:none;border:none;color:var(--accent);font-size:14px;font-weight:700;padding:6px 0;margin-bottom:6px;cursor:pointer;font-family:var(--ui)}
.title{font-family:var(--round);font-size:20px;font-weight:800;line-height:1.45;margin:4px 0 14px}
.list{display:flex;flex-direction:column;gap:12px}
.item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--card);box-shadow:var(--shadow-s);color:var(--text);font-size:16px;font-weight:700;line-height:1.6;cursor:pointer;font-family:var(--ui);text-decoration:none}
.item:hover,.item:focus-visible{background:#FFFBEA;outline:none}
.item:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.item small{font-size:12.5px;font-weight:500;color:var(--sub)}
.item .arrow{color:var(--text);flex-shrink:0;font-weight:800}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sub-item{justify-content:center;text-align:center}
.sub-item[disabled]{opacity:.45;cursor:default;box-shadow:none}
.hello{display:flex;gap:12px;align-items:flex-start;margin:6px 0 20px}
.hello img{width:84px;height:84px;object-fit:contain;flex-shrink:0}
.hello .bubble{flex:1;min-width:0}
/* 吹き出し（左にしっぽ） */
.bubble{position:relative;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 15px;font-size:15px;line-height:1.8}
.bubble:before{content:"";position:absolute;left:-8px;top:18px;width:13px;height:13px;background:var(--card);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.big{padding:22px 18px;font-size:18px}
.card{background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.meta-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.tag{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;line-height:1.5;padding:1px 9px;border-radius:999px;background:var(--accent2);color:var(--accent-dark);font-weight:700;white-space:nowrap}
.tag.type{background:var(--bg);color:var(--sub);font-weight:500;border:1px solid var(--border);white-space:normal}
.tag.draft{background:var(--draft-bg);color:var(--text);border:1px solid #E0C766}
.tag.check{background:var(--wrong);color:#fff}
.tag.pub{background:color-mix(in srgb, var(--right) 18%, var(--card));color:var(--right-text)}
.pub-state{display:block;margin-top:4px}
.stars{font-size:12px;color:var(--star);letter-spacing:1px}
.qtext{white-space:pre-wrap;font-size:16px;line-height:1.85;margin:10px 0}
.qfig{margin:4px 0 12px;padding:10px;background:#fff;border:2px solid var(--border);border-radius:12px;text-align:center}
.qfig img{display:block;max-width:100%;height:auto;margin:0 auto}
.choice{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;line-height:1.65;padding:11px 14px;margin:8px 0;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--text);font-size:15.5px;font-weight:500;cursor:pointer;font-family:var(--ui)}
.choice:hover{background:#FFFBEA}
.choice-no{flex:0 0 2.2em;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.choice-text{flex:1;min-width:0;overflow-wrap:anywhere}
.choice.number-only .choice-no{color:var(--text)}
.choice.correct .choice-no{color:var(--right-text)}
.choice.wrong .choice-no{color:var(--wrong-text)}
.answer-no{font-family:var(--round);font-weight:800;font-size:17px;margin:0 0 8px}
.choice.correct{border-color:var(--right);background:color-mix(in srgb, var(--right) 14%, var(--card))}
.choice.wrong{border-color:var(--wrong);background:color-mix(in srgb, var(--wrong) 14%, var(--card))}
.piyo-block{display:flex;gap:12px;margin-top:16px;align-items:flex-start}
.piyo-block img{width:56px;height:56px;object-fit:contain;flex-shrink:0}
.piyo-block .bubble{flex:1;min-width:0;background:var(--bg)}
.piyo-block .bubble:before{background:var(--bg)}
.formula-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--text);background:var(--mark);border:2px solid var(--line);padding:0 10px;border-radius:999px;margin-bottom:6px}
.formula{font-size:15.5px;font-weight:700;margin:2px 0 12px;font-family:var(--serif);overflow-wrap:anywhere;white-space:pre-wrap;font-variant-numeric:lining-nums}
.explain-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--text);border:2px solid var(--line);padding:0 10px;border-radius:999px;margin-bottom:6px}
.explain{white-space:pre-wrap;line-height:1.9}
/* 図つきの解説（考え方 → 手順ごとに 見出し・図・文） */
.explain.steps{white-space:normal}
.exp-text{white-space:pre-wrap}
.exp-point{background:#FFF6CC;border:2px solid var(--line);border-radius:12px;padding:8px 12px;margin:2px 0 12px}
.exp-point b{display:block;font-size:11.5px;color:var(--sub2);letter-spacing:.06em}
.exp-step{display:flex;align-items:center;gap:8px;font-weight:700;margin:16px 0 6px}
.exp-num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--text);color:#fff;display:grid;place-items:center;font-size:12.5px;font-family:var(--round);font-weight:800}
.exp-fig{margin:4px 0 8px}
.exp-fig button{display:block;width:100%;padding:0;border:2px solid var(--border);border-radius:12px;background:var(--card);cursor:zoom-in}
.exp-fig img{display:block;width:100%;height:auto;border-radius:10px}
.source{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.6}
button.primary{margin-top:14px;width:100%;padding:13px;border:2px solid var(--line);border-radius:12px;background:var(--text);color:#fff;font-size:15.5px;font-weight:700;cursor:pointer;font-family:var(--ui)}
.empty{text-align:center;color:var(--sub);padding:26px 0}
.note{font-size:12.5px;color:var(--sub);text-align:center;margin-top:22px;line-height:1.6}
.judge{font-family:var(--round);font-weight:800;margin-bottom:6px}
.judge.ok{color:var(--right-text)}
.judge.ng{color:var(--wrong-text)}
@media(max-width:380px){.grid2{grid-template-columns:1fr}}

/* ===== フッター（今までと同じリンク） ===== */
.site-footer{margin:40px -16px 0;padding:28px 16px 32px;background:var(--text);color:#D9D5CB;text-align:center;font-size:13px;line-height:1.8}
.site-footer nav{max-width:1120px;margin:0 auto 10px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px}
.site-footer a{color:#F2EFE7;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* 固定ページ（著作権・プライバシーポリシーなど）と記事 */
.page-card h1{font-family:var(--round);font-weight:800;font-size:22px;line-height:1.5;margin:0 0 12px}
.entry{font-size:16px;line-height:1.95;overflow-wrap:anywhere}
.entry h2{font-family:var(--round);font-weight:800;font-size:19px;margin:28px 0 10px;padding:4px 12px;border:2px solid var(--line);border-radius:10px;background:var(--bg)}
.entry h3{font-family:var(--round);font-weight:800;font-size:17px;margin:20px 0 6px}
.entry a{color:var(--accent)}
.entry strong,.entry b{background:linear-gradient(transparent 60%,var(--mark) 60%)}
.entry ul,.entry ol{padding-left:1.4em}
.entry img{max-width:100%;height:auto}
.entry table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.entry pre{overflow-x:auto}
.back-home{display:inline-block;color:var(--accent);font-size:14px;font-weight:700;padding:6px 0;margin-bottom:8px;text-decoration:none}
.post-list a{text-decoration:none}
.post-date{margin:-6px 0 14px;font-size:12.5px;color:var(--sub)}
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.cat-filter a{padding:6px 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--text);font-size:14px;font-weight:700;text-decoration:none}
.cat-filter a.on{background:var(--text);color:#fff}
/* 記事のカテゴリーの印：電験三種はオレンジ、第二種電気工事士は青、ほかは黒っぽい線 */
.post-cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.item-cats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px}
.item-cats span,.post-cats a,.cat-label{display:inline-block;padding:0 10px;border-radius:999px;border:2px solid var(--sub);color:var(--sub2);font-size:12px;font-weight:700;line-height:1.6;text-decoration:none;white-space:nowrap}
.cat-denken{border-color:var(--denken)!important;color:var(--denken)!important}
.cat-denko{border-color:var(--denko)!important;color:var(--denko)!important}
.nowrap{white-space:nowrap}

/* ===== ビリピヨ（場面ごとの画像） ===== */
.piyo-block.judge-block{align-items:center}
.piyo-block.judge-block img{width:72px;height:72px}
.piyo-block.judge-block .bubble{padding:10px 14px}
.piyo-block.judge-block .judge{font-size:19px;margin:0}
.piyo-block.waiting{margin:18px 0 6px;align-items:center}
.piyo-block.waiting img{width:84px;height:84px}
.piyo-block.waiting .bubble,.piyo-block.waiting .bubble:before{background:var(--card)}
.piyo-block.finish{align-items:center}
.piyo-block.finish img{width:72px;height:72px}

/* ===== 1.7.0：移動ボタン・記録・図の拡大・数式 ===== */
/* 「答えと解説を見る」 */
button.secondary{margin-top:12px;width:100%;padding:11px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-size:15px;font-weight:700;cursor:pointer;font-family:var(--ui)}
.choice.locked{cursor:default}
.choice.locked:hover{background:var(--card)}
.choice.correct.locked:hover{background:color-mix(in srgb, var(--right) 14%, var(--card))}
.choice.wrong.locked:hover{background:color-mix(in srgb, var(--wrong) 14%, var(--card))}
.choice:disabled{color:var(--text);opacity:1}
.choice.answer{border-color:var(--right);border-width:3px;padding:10px 13px}
.choice.answer .choice-no{color:var(--right-text)}

/* 画面の下の「前の問題」「次の問題」（スクロールしなくても押せる） */
.quiz-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb, var(--card) 95%, transparent);border-top:2px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.quiz-nav-inner{max-width:560px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz-nav button{padding:12px 8px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--ui)}
.quiz-nav .nav-prev{border:2px solid var(--line);background:var(--card);color:var(--text)}
.quiz-nav .nav-next{border:2px solid var(--line);background:var(--text);color:#fff}
.quiz-nav .nav-next.wide{grid-column:1 / -1}
html.has-quiz-nav main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
html.has-quiz-nav .site-footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}

/* ○×の記録 */
.rec{display:inline-flex;align-items:center;gap:1px;font-size:14px;font-weight:700;letter-spacing:1px;white-space:nowrap}
.rec-o{color:var(--right-text)}
.rec-x{color:var(--wrong-text)}
.rec-label{font-size:11px;font-weight:500;color:var(--sub);letter-spacing:0;margin-right:4px}
.item-end{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.quiz-record{margin-left:auto}
.quiz-record .rec{font-size:13px}

/* 一覧の上の切り替えとリセット */
.list-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:-4px 0 14px}
/* 1.27.0〜：分野の一覧の「ランダムに解く」 */
.rnd-tools{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 14px}
.rnd-btn{flex:1 1 200px;min-width:0;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-size:14.5px;font-weight:700;line-height:1.4;cursor:pointer;font-family:var(--ui);box-shadow:var(--shadow-s)}
.rnd-btn:hover,.rnd-btn:focus-visible{background:var(--accent2);outline:none}
.tag.rnd-tag{background:var(--text);color:#fff}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;color:var(--text)}
.switch input{width:18px;height:18px;accent-color:var(--text);margin:0}
button.link.small{font-size:13px;padding:4px 0;margin:0}
button.link:disabled{color:var(--sub);opacity:.6;cursor:default}

/* 図：タップで拡大 */
.qfig-open{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in}
.qfig figcaption{margin-top:6px;font-size:12px;color:var(--sub)}
html.zoom-open,html.zoom-open body{overflow:hidden}
.zoom{position:fixed;inset:0;z-index:100;background:rgba(43,42,38,.94);display:flex;align-items:center;justify-content:center;touch-action:none;overscroll-behavior:contain}
.zoom img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;transform-origin:center center;user-select:none;-webkit-user-select:none;will-change:transform}
.zoom-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;padding:8px 16px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;font-family:var(--ui)}
.zoom-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));margin:0;padding:6px 12px;border-radius:999px;background:rgba(43,42,38,.85);color:#F2EFE7;font-size:12px;white-space:nowrap;pointer-events:none}

/* 数式（KaTeX）：長い式は、その式だけ横にスクロール */
.math{display:inline;white-space:normal}
.math .katex{font-size:1.08em}
.math.scroll{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;vertical-align:middle;padding:1px 0 4px;-webkit-overflow-scrolling:touch}
.math-display{display:block;text-align:center;margin:6px 0;max-width:100%;overflow-x:auto;overflow-y:hidden}
.math-raw{font-family:var(--serif);overflow-wrap:anywhere}
.katex-display{max-width:100%;overflow-x:auto;overflow-y:hidden}

/* ===== 1.8.0：数式の折り返し・PCの横並び ===== */
/* 式は「=」「≒」の後ろだけで折り返す（かたまりの途中では切らない） */
.math .math-chunk{display:inline-block;white-space:nowrap}
.math.whole{display:inline-block;white-space:nowrap;vertical-align:baseline} /* 1行に収まる式は、式ごと次の行へ（1.28.0〜） */
.nobr{white-space:nowrap} /* 「50 Hz」のような数字と単位を、間で折り返さない（1.28.0〜） */
.math .math-chunk.scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:middle;padding:1px 0 4px;-webkit-overflow-scrolling:touch}

/* PC（約1024px以上）：左に問題、右に答えと解説。スマホ・タブレットは今までどおり縦並び */
@media (min-width:1024px){
  html.has-quiz-nav main{max-width:1180px}
  html.has-quiz-nav .crumb,html.has-quiz-nav .link{max-width:none}
  .quiz-layout{display:grid;grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr);gap:22px;align-items:start;background:none;border:none;box-shadow:none;padding:0;margin-bottom:0}
  .quiz-main,.quiz-side{background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px}
  /* 左（問題文・図）は固定。右（選択肢・答え・解説）はページ全体のスクロールで動く（スクロールバーは1つ） */
  .quiz-main{position:sticky;top:12px}
  /* 左の列が画面より高いときは、下が切れないように固定をやめる（app.js が判定） */
  .quiz-main.no-stick{position:static}
  .quiz-side #choices>.choice:first-child{margin-top:0}
  .quiz-main .qfig img{max-height:52vh;width:auto}
}

/* ===== 1.10.0：PCで画面の高さに収める形（html.quiz-fit。app.js が、収まるときだけ付ける） ===== */
@media (min-width:1024px){
  html.quiz-fit,html.quiz-fit body{overflow:hidden}            /* ページ全体は動かさない */
  html.quiz-fit main{padding-bottom:0}
  html.quiz-fit .quiz-layout{grid-template-rows:minmax(0,1fr);align-items:stretch;padding:0 6px 6px 0}
  /* 左：問題文・図。長いときは、この列の中だけでスクロール */
  html.quiz-fit .quiz-main{position:static;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  /* 右：選択肢・答え・解説を、まとめて1つのスクロール領域（.side-scroll）にする（固定する部分は作らない）。
     スクロール領域をカードの少し内側に置き、上下の端で吹き出しや選択肢が枠ぎりぎりで切れて見えないようにする */
  html.quiz-fit .quiz-side{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0}
  html.quiz-fit .side-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:12px 0;padding:6px 18px}
  /* スクロールバーは、マウスを乗せている列のものだけ見せる（2つ同時に見えないように） */
  html.quiz-fit .quiz-main,html.quiz-fit .side-scroll{scrollbar-width:thin;scrollbar-color:transparent transparent}
  html.quiz-fit .quiz-main:hover,html.quiz-fit .side-scroll:hover{scrollbar-color:rgba(94,91,83,.55) transparent}
  html.quiz-fit .quiz-main::-webkit-scrollbar,html.quiz-fit .side-scroll::-webkit-scrollbar{width:8px}
  html.quiz-fit .quiz-main::-webkit-scrollbar-thumb,html.quiz-fit .side-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
  html.quiz-fit .quiz-main:hover::-webkit-scrollbar-thumb,html.quiz-fit .side-scroll:hover::-webkit-scrollbar-thumb{background:rgba(94,91,83,.55)}
}

/* ===== 1.13.0：分野で絞る・法改正の注意・模試モード ===== */
/* 分野の選び箱（問題一覧の上） */
.field-select{display:flex;align-items:center;gap:10px;margin:-4px 0 12px;font-size:14px}
.field-label{flex-shrink:0;color:var(--sub);font-weight:700}
.field-select select{flex:1;min-width:0;padding:9px 10px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-size:15px;font-family:var(--ui)}
.field-select select:focus-visible{outline:3px solid var(--accent);outline-offset:1px}

/* 法改正の注意：一覧の印と、問題画面のオレンジの枠 */
.tag.law{background:var(--law);color:#fff}
.law-note{margin:6px 0 10px;padding:10px 12px;border:2px solid var(--law);border-radius:12px;background:var(--law-bg);font-size:14.5px;line-height:1.75}
.law-note-head{display:flex;align-items:center;gap:5px;font-weight:700;color:var(--law);margin-bottom:2px}
.law-note-body{white-space:pre-wrap;overflow-wrap:anywhere}

/* 模試モード */
.mock-title{margin-top:26px;margin-bottom:6px}
.mock-lead{font-size:13.5px;color:var(--sub);line-height:1.7;margin:0 0 12px}
.mock-item small{color:var(--accent)}
.mock-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.mock-facts div{background:var(--bg);border:2px solid var(--border);border-radius:12px;padding:10px;text-align:center}
.mock-facts dt{font-size:12px;color:var(--sub)}
.mock-facts dd{margin:2px 0 0;font-size:20px;font-weight:700;font-family:var(--round)}
.mock-rules{margin:0;padding-left:1.3em;font-size:14.5px;line-height:1.8}
.mock-bar{position:sticky;top:0;z-index:15;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 -16px 10px;padding:10px 16px;background:color-mix(in srgb, var(--card) 96%, transparent);border-bottom:2px solid var(--line);font-size:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mock-left strong{font-size:18px;font-variant-numeric:tabular-nums;color:var(--text)}
.mock-bar.hurry .mock-left strong{color:var(--wrong-text)}
.mock-count{color:var(--sub);font-size:13px}
.mock-finish{margin-left:auto;padding:7px 14px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;font-family:var(--ui)}
.mock-pos{font-size:12px;color:var(--sub)}
.choice.picked{border-color:var(--accent);border-width:3px;padding:10px 13px;background:color-mix(in srgb, var(--accent) 9%, var(--card))}
.choice.picked .choice-no{color:var(--accent)}
.mock-map-title{margin:16px 0 6px;font-size:12px;color:var(--sub)}
.mock-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.mock-cell{padding:7px 0;border:2px solid var(--border);border-radius:10px;background:var(--card);color:var(--sub);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--ui)}
.mock-cell.done{background:var(--accent2);color:var(--accent-dark);border-color:var(--accent2)}
.mock-cell.now{outline:2px solid var(--line);outline-offset:1px}
.mock-select-note{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:var(--bg);color:var(--sub);font-size:13px}
.mock-skip{color:var(--sub)}
.mock-timeup{margin:0 0 10px;padding:8px 12px;border-radius:12px;background:var(--draft-bg);border:2px solid var(--line);font-size:14px}
.mock-score{text-align:center}
.mock-score-main{font-size:16px}
.mock-score-main strong{font-size:36px;font-family:var(--round);font-weight:800}
.mock-score-rate{font-size:18px;font-weight:700;margin-top:2px}
.mock-score-rate.ok{color:var(--right-text)}
.mock-score-rate.ng{color:var(--wrong-text)}
.mock-score-sub{font-size:13px;color:var(--sub);margin-top:6px}
.mock-score-note{font-size:12.5px;color:var(--sub);line-height:1.6;margin:10px 0 0;text-align:left}
.mock-list-title{margin-top:22px}
.mock-see{color:var(--accent);font-weight:700}
.item[disabled]{opacity:.6;cursor:default}
@media (min-width:1024px){
  html.has-quiz-nav .mock-bar{margin-inline:0;border:2px solid var(--line);border-radius:14px;top:8px}
}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;font-size:14px}
.pagination .page-numbers{padding:5px 11px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--text);font-weight:700;text-decoration:none}
.pagination .current{background:var(--text);color:#fff}
.pagination .dots{border-color:transparent;background:none}

/* 分野で選ぶ（app.js の画面）：スマホでも2列にして、縦に長くなりすぎないようにする */
.field-grid{grid-template-columns:1fr 1fr}
.field-grid .item{padding:12px 8px;font-size:15px;overflow-wrap:anywhere}

/* 過去問分析のページ（買い切りPDFの一覧） */
.bunseki-intro{font-size:15px;line-height:1.85;margin:0 0 16px}
.bunseki-item h2{font-family:var(--round);font-weight:800;font-size:18px;margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bunseki-item p{font-size:15px;line-height:1.85;margin:0 0 8px}
.bunseki-price{font-weight:700}
.bunseki-soon{color:var(--sub)}
.tag.soon{background:var(--mark);color:var(--text);border:2px solid var(--line)}
.bunseki-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.bunseki-btn{flex:1 1 140px;text-align:center;padding:10px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-size:15px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-s)}
.list .bunseki-item{margin:0}

/* 解説の最後の「同じ問題・類似問題」の1文（押すとその問題へ移る） */
.ruiji{margin-top:12px;padding-top:10px;border-top:2px dashed var(--border);font-size:14.5px;line-height:1.85}
.ruiji button.ruiji-link{display:inline;font-size:inherit;padding:0;margin:0;text-decoration:underline;text-underline-offset:3px}

/* ===== 1.20.0：問題ページをGoogleに読まれやすく ===== */
/* 問題ページの大見出し */
.q-h1{font-family:var(--round);font-size:18px;font-weight:800;line-height:1.5;margin:2px 0 12px}
/* JavaScript が動く前のページの文章（動くと、いつもの画面に置き換わる） */
html.js .static-q{display:none}
.static-choices{list-style:none;padding:0;margin:10px 0}
.static-choices li{padding:10px 12px;margin:8px 0;border:2px solid var(--line);border-radius:12px;line-height:1.65}
.static-answer summary{cursor:pointer;padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--cta);color:#fff;font-weight:700;text-align:center;list-style:none;box-shadow:var(--shadow-s)}
.static-answer[open] summary{margin-bottom:12px}
.static-answer img{display:block;max-width:100%;height:auto;margin:6px 0}
/* 「答えと解説を見る」：一番目立つ色に */
button.secondary#reveal-btn{border:2px solid var(--line);background:var(--cta);color:#fff;padding:12px;font-size:16px;box-shadow:var(--shadow-s)}
button.secondary#reveal-btn:hover,button.secondary#reveal-btn:focus-visible{background:var(--cta-dark);outline:none}
/* スマホ・タブレット：下の「前・次」の帯に隠れないよう、帯のすぐ上で止まる
   （右の列の囲みを外して、問題のカード全体の中で止まるようにする。問題文が見えている間は、いつも押せる） */
@media (max-width:1023px){
  .quiz-side,.side-scroll{display:contents}
  #reveal-btn{position:sticky;bottom:calc(80px + env(safe-area-inset-bottom));z-index:5}
}

/* ===== 見出し・ボタン（トップ・入口ページ・年度ページ共通） ===== */
html.dd-hash .home-static{display:none} /* トップで # のついた画面を開くときは、トップの文章を隠しておく（app.js が画面を描くまで） */
.sec-title{font-family:var(--round);font-size:24px;font-weight:800;line-height:1.45;margin:32px 0 10px}
.sec-title small{font-family:var(--ui);font-size:13px;font-weight:500;color:var(--sub);margin-left:4px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px}
.sec-head .sec-title{margin-bottom:0}
.sec-head a{font-size:14px;font-weight:700;text-decoration:none}
.sec-lead{margin:-4px 0 14px;font-size:14px;color:var(--sub)}
.note-card{display:block;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:20px 22px;color:var(--text)}
a.note-card{text-decoration:none;box-shadow:var(--shadow)}
a.note-card:hover{background:#FFFBEA}
/* 資格の色のボタン（塗り）と、白地に資格の色の線のボタン */
.btn-ex,.btn-ex-sub{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;font-weight:700;border-radius:12px;border:2px solid var(--ex,var(--text));text-decoration:none;line-height:1.4}
.btn-ex{background:var(--ex,var(--text));color:#fff}
.btn-ex:hover,.btn-ex:focus-visible{background:var(--ex-dark,var(--text));border-color:var(--ex-dark,var(--text))}
.btn-ex-sub{background:var(--ex-bg,var(--card));color:var(--ex-dark,var(--text))}
.btn-ex-sub:hover,.btn-ex-sub:focus-visible{background:var(--card)}
/* ビリピヨのせりふ（白い吹き出し） */
.say{position:relative;margin:0;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:9px 16px;font-weight:700;font-size:15.5px;line-height:1.6;box-shadow:var(--shadow-s);text-align:center}

/* ===== トップページ（1.22.0〜） ===== */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;padding:28px 0 36px}
.hero-text{flex:999 1 480px;min-width:0}
.hero-h1{margin:0;font-family:var(--round);font-weight:800;font-size:clamp(32px,6.2vw,50px);line-height:1.35;letter-spacing:.01em}
.hero-h1 .mark{display:inline-block}
.hero-lead{margin:18px 0 0;max-width:560px;font-size:16px;color:var(--sub2)}
.hero-piyo{flex:1 1 240px;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-piyo img{width:210px;height:210px;object-fit:contain}
.hero-piyo .say::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;margin-left:-7px;background:var(--card);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
@media (max-width:640px){
  .hero{padding:12px 0 28px;gap:16px}
  .hero-piyo{flex-direction:row;justify-content:center}
  .hero-piyo{gap:12px}
  .hero-piyo img{width:100px;height:100px}
  .hero-piyo .say{order:-1;white-space:nowrap;font-size:14px;padding:8px 14px}
  .hero-piyo .say::after{left:auto;right:-9px;top:50%;bottom:auto;margin:-7px 0 0;transform:rotate(-45deg)}
}
/* 資格のカード2枚（同じ大きさ） */
.exam-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px 24px;padding-top:14px}
.exam-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:26px 22px 22px}
.exam-label{position:absolute;top:-14px;left:20px;max-width:calc(100% - 40px);background:var(--ex);color:#fff;font-weight:700;font-size:13px;line-height:1.6;padding:2px 14px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exam-name{margin:2px 0 0;font-family:var(--round);font-weight:800;font-size:clamp(24px,5vw,30px);line-height:1.4}
.exam-name a{color:var(--text);text-decoration:none}
.exam-name a:hover{text-decoration:underline;text-decoration-color:var(--ex);text-underline-offset:5px}
.exam-count{margin:2px 0 0;color:var(--sub);font-size:14px;font-weight:700}
.exam-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:16px}
.exam-btns a{flex:1 1 140px;padding:11px 8px}
/* 新着記事（点線で区切った一覧） */
.news{margin-top:52px}
.news-list{margin-top:12px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:2px 22px}
.news-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:15px 0;border-bottom:2px dashed var(--border);color:var(--text);text-decoration:none}
.news-row:last-child{border-bottom:none}
.news-row:hover .news-title{text-decoration:underline;text-underline-offset:4px}
.news-title{flex:999 1 360px;min-width:0;font-weight:700;line-height:1.65}
.news-date{font-size:13px;color:var(--sub)}
/* 書いている人・解説の3つのこだわり */
.about-row{margin-top:52px;display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.about-row .sec-title{margin:0;font-size:22px}
.about{flex:1 1 280px}
.kodawari{flex:2 1 420px}
.about-name{margin:8px 0 0;font-weight:700;font-size:18px}
.about-text{margin:4px 0 0;font-size:14.5px;color:var(--sub2)}
.about-link{display:inline-block;margin-top:8px;font-size:14px;font-weight:700;text-decoration:none}
.kodawari-list{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.kodawari-list li{display:flex;align-items:flex-start;gap:12px;font-weight:700;line-height:1.7}
.kodawari-list .num{flex:0 0 32px;height:32px;border-radius:50%;background:var(--mark);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--round);font-weight:800;line-height:1}
.kodawari-list li>span:last-child{padding-top:2px;min-width:0}
.c-current{color:var(--denken)}
.c-voltage{color:var(--denko)}
/* 今日のビリピヨ格言（黄色の吹き出しを少しだけ傾ける） */
.kakugen{margin-top:64px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:8px 20px}
.kakugen img{width:150px;height:150px;object-fit:contain}
.kakugen-bubble{flex:0 1 560px;min-width:0;margin:0;background:var(--mark);border:2px solid var(--line);border-radius:20px 20px 20px 4px;box-shadow:var(--shadow);padding:20px 26px;transform:rotate(-1deg)}
.kakugen-bubble figcaption{font-size:13px;font-weight:700;color:#5A4500}
.kakugen-bubble blockquote{margin:4px 0 0;font-family:var(--round);font-weight:800;font-size:clamp(21px,4.4vw,28px);line-height:1.5}
.kakugen-from{margin:6px 0 0;font-size:12.5px;text-align:right}
@media (max-width:640px){
  .kakugen{margin-top:48px;flex-wrap:nowrap;gap:6px}
  .kakugen img{width:76px;height:76px;flex:none}
  .kakugen-bubble{padding:16px 18px}
}

/* ===== 入口ページ（/denken3/・/dainishu/）（1.22.0〜） ===== */
.page-hero{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 32px;margin-top:4px}
.page-hero-text{flex:999 1 460px;min-width:0}
.page-h1{margin:0;font-family:var(--round);font-weight:800;font-size:clamp(28px,5.4vw,38px);line-height:1.4}
.page-lead{margin:8px 0 0;font-size:15.5px;line-height:1.8;color:var(--sub2)}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.jump a{border-radius:999px;padding:7px 16px;font-size:15px}
.page-hero-piyo{flex:1 1 340px;display:flex;align-items:flex-end;justify-content:center;gap:6px}
.page-hero-piyo .say{flex:0 1 auto;width:max-content;max-width:13.5em;margin-bottom:46px;border-radius:16px 16px 4px 16px;font-size:14.5px}
.page-hero-piyo img{width:120px;height:120px;object-fit:contain}
.exam-sec{margin-top:44px;scroll-margin-top:16px}
.exam-sec .sec-title{margin-top:0}
/* 分野で選ぶ：科目のカード（パソコンは2列）。中に分野名と問題数の丸いボタン */
.field-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px}
.field-card{box-shadow:var(--shadow)}
.field-card-h{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--round);font-weight:800;font-size:22px;line-height:1.4}
.field-card-h::before{content:"";flex:none;width:10px;height:26px;border-radius:4px;background:var(--ex,var(--text))}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.note-card>.pills:first-child{margin-top:0}
.pill{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:2px solid var(--border);background:var(--bg);border-radius:999px;padding:5px 14px;color:var(--text);font-weight:700;font-size:15px;line-height:1.5;text-decoration:none}
a.pill:hover,a.pill:focus-visible{border-color:var(--line);background:var(--card)}
.pill-n{font-size:12px;color:var(--ex-dark,var(--sub));font-weight:700;white-space:nowrap}
.pill .tag{font-size:10px;padding:0 6px}
.pill.is-off{color:var(--sub);background:#F6F4EE;cursor:default}
.pill.is-off .pill-n{color:var(--sub)}
/* 年度で選ぶ：年度ごとの小さいカード */
.year-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.year-card{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:12px 14px}
.year-card-name{font-weight:700;color:var(--text);text-decoration:none}
a.year-card-name:hover{text-decoration:underline;text-underline-offset:4px}
.year-card .tag{margin-left:6px;vertical-align:1px}
.year-card-subs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.year-card-subs a,.year-card-subs span{text-align:center;font-weight:700;font-size:14px;line-height:1.5;color:var(--ex-dark);background:var(--ex-bg);border:2px solid transparent;border-radius:8px;padding:5px 0;text-decoration:none}
.year-card-subs a:hover,.year-card-subs a:focus-visible{border-color:var(--ex);background:var(--card);outline:none}
.year-card-subs .none{color:var(--sub);background:#F2F0EA;opacity:.7}
.year-card-link{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;color:var(--text);text-decoration:none;box-shadow:var(--shadow-s)}
.year-card-link:hover{background:#FFFBEA}
.year-card-n{font-weight:700;color:var(--ex)}
/* 技能試験 */
.ginou-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.ginou-cards h3{margin:10px 0 0;font-family:var(--round);font-weight:800;font-size:19px;line-height:1.5}
.ginou-cards p{margin:4px 0 0;font-size:14.5px;color:var(--sub2)}
.note-card.is-soon{border-style:dashed}
.soon-label{display:inline-block;font-size:12px;font-weight:700;background:var(--mark);border:2px solid var(--line);padding:0 10px;border-radius:999px}
.ginou-post .ginou-go{color:var(--denko);font-weight:700}
@media (max-width:640px){
  .page-hero-piyo{justify-content:flex-end}
  .page-hero-piyo .say{margin-bottom:34px;font-size:14px}
  .page-hero-piyo img{width:96px;height:96px}
  .exam-sec{margin-top:36px}
  .note-card{padding:16px}
  .field-card-h{font-size:20px}
  .pill{font-size:14.5px;padding:5px 12px}
}

/* ===== 年度ページ（/denken3/r6-kamiki/ など） ===== */
main.exam-page:not(.is-entry) .page-h1{font-size:clamp(22px,4.6vw,30px)}
.sub-jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.sub-jump a{padding:5px 16px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--text);font-size:14px;font-weight:700;text-decoration:none}
.sub-jump a:hover{background:var(--ex-bg,#FFFBEA)}
.year-sub{scroll-margin-top:12px}
.year-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.btn-main,.btn-sub{flex:1 1 auto;text-align:center;padding:10px 12px;border-radius:12px;border:2px solid var(--line);font-size:15px;font-weight:700;text-decoration:none}
.btn-main{flex-basis:100%;background:var(--cta);color:#fff;box-shadow:var(--shadow-s)}
.btn-main:hover,.btn-main:focus-visible{background:var(--cta-dark);outline:none}
.theme-denko .btn-main{background:var(--ex)}
.theme-denko .btn-main:hover,.theme-denko .btn-main:focus-visible{background:var(--ex-dark)}
.btn-sub{background:var(--card);color:var(--text)}
.btn-sub:hover{background:#FFFBEA}
.q-links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.q-links a{display:block;height:100%;padding:8px 11px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--text);text-decoration:none;line-height:1.45}
.q-links a:hover,.q-links a:focus-visible{background:#FFFBEA;outline:none}
.q-links b{font-size:15px}
.q-links small{display:block;font-size:12px;color:var(--sub);overflow-wrap:anywhere}
.q-links .tag{display:inline-block;margin-top:3px}
@media (max-width:420px){.q-links{grid-template-columns:1fr 1fr}}
/* 1.24.0〜：問題カードの○×の記録（assets/records.js が出す） */
.q-links .q-rec{float:right;margin-left:6px}
.q-links .q-rec .rec{font-size:14px}
.q-links a.is-wrong{border-color:var(--wrong-text)}
.rec-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:10px;font-size:12px;color:var(--sub)}
.rec-tools[hidden]{display:none}
.year-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px}
.year-filter .field-select{flex:1 1 280px;margin:0}
.q-links li[hidden]{display:none}
.q-links .stars{display:block;font-size:11px}
.q-empty[hidden]{display:none}
.other-years{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.other-years a,.other-years span{padding:4px 12px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--text);font-size:13.5px;font-weight:700;text-decoration:none}
.other-years span{background:var(--text);color:#fff}

/* ===== プレミアム ===== */
.premium-h1{display:flex;align-items:center;gap:8px}
.premium-h1 .lock{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--premium);border:2px solid var(--line)}
.premium-item{text-decoration:none;background:linear-gradient(90deg,var(--premium) 0 8px,var(--card) 8px)}
.premium-item .tag{margin-left:6px;vertical-align:2px}

/* ビリピヨのLINEスタンプの紹介枠（1.23.0〜）：トップと記事のいちばん下 */
.line-stamp{display:flex;align-items:center;gap:14px;margin:40px auto 16px;max-width:640px;background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:var(--shadow-s);padding:14px 16px}
.line-stamp img{flex:0 0 72px;width:72px;height:72px;object-fit:contain}
.line-stamp-body{flex:1 1 auto;min-width:0}
.line-stamp-body p{margin:0 0 8px;font-size:14px;line-height:1.6;word-break:normal;overflow-wrap:anywhere}
.line-stamp-body .line-stamp-name{font-weight:700;font-size:15px}
.btn-line{display:inline-block;padding:8px 16px;border-radius:12px;background:#06C755;color:#fff;font-weight:700;font-size:14px;text-decoration:none;border:2px solid var(--line)}
.btn-line:hover{filter:brightness(1.05)}
@media (max-width:480px){.line-stamp{align-items:flex-start}.line-stamp img{flex-basis:56px;width:56px;height:56px}}

/* ===== 1.30.0：スマホでは解説を画面いっぱいの幅に（ピヨは上に小さく）。式が細い欄で途中改行しないように ===== */
@media (max-width:640px){
  .piyo-block.explain-block{flex-direction:column;gap:8px}
  .piyo-block.explain-block img{width:48px;height:48px;margin-left:6px}
  .piyo-block.explain-block .bubble{width:100%;padding:12px 10px}
  .piyo-block.explain-block .math .katex{font-size:1em}
  .piyo-block.explain-block .bubble:before{left:22px;top:-8px;transform:rotate(135deg)}
}