/* ホームの見た目（D-041）。次の単元 → 復習 → 5 つの分野。分野の頁は章ごとの単元。 */
.hdr .ibtn{margin-left:auto}
.resume{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);border-radius:var(--r-l);background:var(--c-surface);border:var(--bw) solid var(--c-line);color:inherit;text-decoration:none}
.resume .rs-t{flex:1;min-width:0;display:grid}
.resume .rs-u{font-weight:700;font-size:var(--t-body);line-height:1.4}
.resume .btn{flex:none;min-height:3.5rem;padding:0 var(--s-5)}
.fields{display:grid;gap:var(--s-3);margin:var(--s-5) 0 var(--s-6)}
.field-row{display:flex;align-items:center;gap:var(--s-4);min-height:4rem;padding:0 var(--s-4);border-radius:var(--r-l);border:var(--bw) solid var(--c-line-strong);background:var(--c-surface);color:inherit;text-decoration:none}
.field-row .fn{flex:1;font-size:var(--t-lead);font-weight:700}
.field-row .pbar{width:4.5rem;height:4px;border-radius:2px;background:var(--c-line);overflow:hidden}
.field-row .pbar>span{display:block;height:100%;background:var(--c-acc)}
.field-row.off{border-color:var(--c-line);background:transparent}
.field-row.off .fn{color:var(--c-ink-3);font-weight:500}
a.field-row:hover,.resume:hover{border-color:var(--c-acc)}
.fv-head{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-2) 0 var(--s-4)}
.fv-head h1{font-size:var(--t-title)}
.chap{margin-bottom:var(--s-5)}
.chap h2{font-size:var(--t-sm);color:var(--c-ink-2);font-weight:700;margin-bottom:var(--s-2)}
.ulist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.u{display:flex;align-items:center;gap:var(--s-3);min-height:3.25rem;padding:var(--s-2) var(--s-4);border-radius:var(--r-m);background:var(--c-surface);border:var(--bw) solid var(--c-line);color:inherit;text-decoration:none}
a.u:hover{border-color:var(--c-line-strong)}
.u.off{color:var(--c-ink-3);background:transparent}
.u .uid{width:2.4rem;flex:none;margin:0}
.u.off .uid{color:var(--c-ink-3)}
.u .tt{flex:1;min-width:0;font-weight:500}
.u .ic-w{display:inline-flex;color:var(--c-ink-3)}
.u.done .ic-w{color:var(--c-ok)}
.u .ic{width:1.1rem;height:1.1rem}
.dlg{border:0;border-radius:var(--r-l);padding:0;max-width:min(100% - 2rem,var(--col-max));width:100%;background:var(--c-surface);color:var(--c-ink)}
.dlg::backdrop{background:var(--c-scrim)}
.dlg-body{padding:var(--s-4);position:relative}
.dlg-body h2{font-size:var(--t-lead);margin-bottom:var(--s-4)}
.dlg-x{position:absolute;top:var(--s-2);right:var(--s-2)}
.set-list{display:grid;gap:var(--s-2)}
.set-list .btn{justify-content:flex-start}
.links{margin-top:var(--s-4)}
.links a{color:inherit}
.brand{font-weight:700;letter-spacing:.06em}
.review-line{display:flex;align-items:center;min-height:2.75rem;margin-top:var(--s-2);padding:0 var(--s-4);border-radius:var(--r-m);border:var(--bw) solid var(--c-line-strong);color:inherit;text-decoration:none}
.review-line b{margin-left:var(--s-2)}
/* はじめに（D-047） */
.intro{display:flex;flex-direction:column;min-height:calc(100dvh - var(--hdr-h) - var(--safe-t))}
.in-dots{display:flex;gap:8px;justify-content:center;margin:var(--s-3) 0 var(--s-5)}
.in-dots i{width:.6rem;height:.6rem;border-radius:50%;border:1.5px solid var(--c-line-strong)}
.in-dots i.cur,.in-dots i.done{background:var(--c-acc);border-color:var(--c-acc)}
.in-body{flex:1}
.in-k{font-size:var(--t-cap);color:var(--c-ink-2);margin-bottom:var(--s-2)}
.intro h1{font-size:var(--t-title);line-height:1.4;margin-bottom:var(--s-3);font-feature-settings:"palt"}
.in-p{font-size:var(--t-body);line-height:1.8;margin-bottom:var(--s-5)}
.in-p:empty{display:none}
.in-fig{padding:var(--s-4);border-radius:var(--r-l);background:var(--c-surface);border:var(--bw) solid var(--c-line)}
.in-law,.in-steps{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-2)}
.in-law span,.in-steps span:not(.in-ar){padding:var(--s-2) var(--s-4);border-radius:var(--r-m);font-weight:700}
.in-c{border:2px solid var(--c-acc);color:var(--c-acc-text)}
.in-r{border:2px solid var(--c-res);color:var(--c-res)}
.in-steps span:not(.in-ar){border:1.5px solid var(--c-line-strong)}
.in-ar{color:var(--c-ink-2);font-weight:700}
.in-eg{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--c-ink-2);text-align:center}
.in-web{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.in-core{grid-column:1/-1;justify-self:center;padding:var(--s-2) var(--s-5);border-radius:999px;background:var(--c-acc);color:var(--c-acc-ink);font-weight:700;font-size:var(--t-lead)}
.in-n{display:grid;gap:2px;padding:var(--s-2) var(--s-3);border-radius:var(--r-m);border:1.5px solid var(--c-line-strong);font-size:var(--t-sm);line-height:1.5}
.in-n b,.in-can b{color:var(--c-acc-text)}
.in-can{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.in-can li{display:grid;gap:2px;font-size:var(--t-sm);line-height:1.6}
.in-can li+li{padding-top:var(--s-3);border-top:var(--bw) solid var(--c-line)}
.in-bar{position:sticky;bottom:0;display:flex;gap:var(--s-3);padding:var(--s-3) 0 calc(var(--s-3) + var(--safe-b));background:var(--c-bg);margin-top:var(--s-5)}
.in-bar .in-back{flex:none}
.in-bar .in-back[hidden]{display:none}
.in-bar .in-next{flex:1;min-height:3.5rem;font-size:var(--t-lead);font-weight:700}
.in-n{align-content:start}
.in-cause{display:flex;align-items:center;justify-content:center;gap:var(--s-3);font-family:"Times New Roman",serif;font-style:italic;font-size:2rem}
.in-cause .in-c,.in-cause .in-r{padding:var(--s-1) var(--s-4);border-radius:var(--r-m)}
.in-cause .in-eq{font-style:normal;color:var(--c-ink-2)}
.in-cause-l{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-3);font-size:var(--t-sm);line-height:1.6}
.in-cause-l span{display:grid;gap:2px}
.in-cause-l span:first-child b{color:var(--c-acc-text)}
.in-cause-l span:last-child b{color:var(--c-res)}
/* はじめにの Tips の見本（単元の .tip と同じ見た目、D-051） */
.in-tip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding:var(--s-3);border:1.5px dashed var(--c-ink-3);border-radius:var(--r-m)}
.in-tip .tp{font-weight:700;font-size:var(--t-sm)}
.in-tip .tp-s{padding:0 .5rem;border-radius:var(--r-s);border:1px solid var(--c-ink-3);color:var(--c-ink-2);font-size:var(--t-cap)}
.in-tip-t{flex-basis:100%;color:var(--c-ink-2);font-size:var(--t-sm)}
/* 使えない分野の頭の 1 枚（D-061）。枠だけ、強い色なし */
.fv-lock{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-l);border:var(--bw) solid var(--c-line-strong);background:var(--c-surface)}
.fv-lock .fv-l-t{flex:1;min-width:0;font-size:var(--t-sm);color:var(--c-ink-2)}
.fv-lock .btn{flex:none}
.field-row .cap{flex:none}
/* 購入のシート：画面いっぱい。中は 1 列 */
.dlg.sheet{max-width:none;max-height:none;width:100%;height:100%;margin:0;border-radius:0;background:var(--c-bg)}
.sheet-body{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}

/* Android で月額と完全版が並んで続いているときの 1 行（D-109） */
.notice-line{margin:var(--s-3) 0;padding:var(--s-3) var(--s-4);border:1px solid var(--c-line-strong);border-radius:var(--r-l);background:var(--c-surface)}
.notice-line p{margin:0 0 var(--s-2);font-size:var(--t-sm);color:var(--c-ink-2)}
.chips-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-2)}
.chip{min-height:2.75rem;padding:0 var(--s-4);border:1px solid var(--c-line-strong);border-radius:999px;background:var(--c-surface);color:var(--c-ink);font:inherit;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--c-acc);border-color:var(--c-acc);color:var(--c-on-acc,#fff)}
/* はじめの確認（D-121） */
.cu{padding-left:var(--s-4);padding-right:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.cu-h{display:flex;align-items:center;gap:var(--s-2);min-height:3rem}
.cu-h h2{font-size:var(--t-md,1rem);margin:0;flex:1}
.cu .opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.cu-q{margin:var(--s-2) 0;font-weight:700;line-height:1.7}
.cu-res{margin:var(--s-2) 0 0}