/* =========================================================
 * 宅建メディア main.css
 * 色・フォントはプロトタイプ（app-prototype.html）と共通。トークンは :root にまとめる。
 * アクセント（黄土）は CTA・バッジに限定して使う。
 * ======================================================= */
:root {
	--bg: #EEF1F5; --surface: #FFFFFF; --ink: #1B2433; --muted: #5E6B7E; --line: #D9DFE8;
	--ai: #1F3A5F; --ai-soft: #E3EAF3; --ochre: #B9822A; --ochre-soft: #F6EBD7; --on-accent: #FFFFFF;
	--ok: #2E7D5B; --ok-soft: #DFF1E8; --ng: #B4442E; --ng-soft: #F7E2DC; --line-green: #06C755;
	--f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
	--f-disp: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--f-num: "IBM Plex Mono", ui-monospace, monospace;
	--r: 14px; --r-sm: 10px;
	--gap: 16px;
	--max: 1120px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0F141C; --surface: #18202B; --ink: #E6EBF2; --muted: #9AA6B6; --line: #2B3645;
		--ai: #8FB3E0; --ai-soft: #22324A; --ochre: #E0B060; --ochre-soft: #3A2F1C; --on-accent: #1B2433;
		--ok: #6CC59C; --ok-soft: #1C3A2E; --ng: #E88A73; --ng-soft: #40241E;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--bg: #0F141C; --surface: #18202B; --ink: #E6EBF2; --muted: #9AA6B6; --line: #2B3645;
	--ai: #8FB3E0; --ai-soft: #22324A; --ochre: #E0B060; --ochre-soft: #3A2F1C; --on-accent: #1B2433;
	--ok: #6CC59C; --ok-soft: #1C3A2E; --ng: #E88A73; --ng-soft: #40241E;
	color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.8; font-feature-settings: "palt" 0; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
a { color: var(--ai); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.45; text-wrap: balance; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ai); color: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 8px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 16px; }
.wrap--narrow { max-width: 760px; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.note { font-size: 12px; color: var(--muted); line-height: 1.7; }
.empty { color: var(--muted); font-size: 14px; padding: 20px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r); margin: 0; }
.hp { position: absolute; left: -9999px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 10px 22px; border: 0; border-radius: 12px; background: var(--ai); color: var(--surface); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn--accent { background: var(--ochre); color: var(--on-accent); }
.btn--line { background: var(--line-green); color: #fff; }
.btn--ghost { background: transparent; color: var(--ai); border: 1px solid var(--ai); }
.btn--sm { min-height: 34px; padding: 4px 12px; font-size: 13px; font-weight: 500; }
.more { display: inline-block; font-size: 13px; font-weight: 700; text-decoration: none; }
.more::after { content: " →"; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ochre); background: var(--ochre-soft); padding: 1px 9px; border-radius: 99px; text-decoration: none; }

/* ---------- header ---------- */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head__in { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding-block: 14px 10px; }
.logo { margin: 0; font-family: var(--f-disp); font-size: 22px; letter-spacing: .04em; line-height: 1.3; }
.logo a { color: var(--ai); text-decoration: none; }
.site-head__tag { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.search input { width: 100%; max-width: 220px; font: inherit; font-size: 13px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--ink); }
@media (max-width: 560px) { .search { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; } .search input { max-width: none; } }
.gnav { border-top: 1px solid var(--line); }
.gnav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.gnav__list::-webkit-scrollbar { display: none; }
.gnav__list a { display: block; white-space: nowrap; padding: 11px 12px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.gnav__list a:hover, .gnav__list a[aria-current="page"], .gnav__list .current-menu-item a { color: var(--ai); border-bottom-color: var(--ai); }
@media (min-width: 900px) { .gnav__list { justify-content: space-between; } .gnav__list li { flex: 1; text-align: center; } }

/* ---------- breadcrumbs ---------- */
.crumbs ol { list-style: none; margin: 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--line); }
.crumbs a { color: var(--muted); }

/* ---------- hero (top) ---------- */
.hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero__in { display: grid; gap: 28px; padding-block: 40px 44px; }
.hero__lead { margin: 0; font-family: var(--f-disp); font-size: clamp(28px, 6.4vw, 44px); line-height: 1.35; color: var(--ai); letter-spacing: .02em; }
.hero__lead em { font-style: normal; border-bottom: 3px solid var(--ochre); }
.hero__sub { margin: 14px 0 0; color: var(--muted); max-width: 34em; }
.hero__doors { display: grid; gap: 10px; margin-top: 24px; }
.door { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); text-decoration: none; position: relative; }
.door::after { content: "→"; position: absolute; right: 18px; top: 16px; color: var(--ai); font-weight: 700; }
.door:hover { border-color: var(--ai); }
.door__who { display: block; font-size: 17px; font-weight: 700; color: var(--ai); }
.door__what { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; padding-right: 20px; }
@media (min-width: 640px) { .hero__doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .hero__in { grid-template-columns: 1fr 300px; align-items: center; gap: 48px; } }

.countdown { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.countdown p { margin: 0; }
.countdown__label { font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.countdown__num { display: flex; align-items: flex-end; gap: 8px; margin-top: 4px !important; }
.countdown__num .num { font-size: 64px; line-height: 1; color: var(--ai); }
.countdown__num .u { padding-bottom: 8px; color: var(--muted); }
.countdown__date { font-size: 13px; margin-top: 8px !important; }
.countdown__date span { display: block; font-size: 11px; color: var(--muted); }

/* ---------- sections / cards ---------- */
.home__body { padding-block: 8px 56px; }
.sec { margin-top: 48px; }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sec__title { margin: 0; font-family: var(--f-disp); font-size: 22px; color: var(--ink); letter-spacing: .03em; }
.sec__note { margin: 0; font-size: 12px; color: var(--muted); }

.cards { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .cards--3, .cards--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card__thumb { display: block; aspect-ratio: 40 / 21; background: var(--ai-soft); }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__ph { display: flex; height: 100%; align-items: center; justify-content: center; padding: 12px; font-family: var(--f-disp); font-size: 18px; color: var(--ai); letter-spacing: .08em; text-align: center; }
.card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__body .badge { align-self: flex-start; }
.card__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:hover { color: var(--ai); }
.card .badge { position: relative; z-index: 1; }
.card__ex { margin: 0; font-size: 13px; color: var(--muted); }
.card__date { margin: auto 0 0; font-family: var(--f-num); font-size: 11px; color: var(--muted); }
.card--text { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.card--text .card__body { padding: 12px 0; }
.card--text .badge { display: none; }
.card--rank { flex-direction: row; align-items: flex-start; gap: 12px; }
.card__rank { flex: none; width: 28px; height: 28px; margin-top: 12px; display: grid; place-items: center; font-family: var(--f-num); font-size: 13px; background: var(--ai); color: var(--surface); border-radius: 50%; }
.cards--list .card { flex-direction: row; }
.cards--list .card__thumb { flex: none; width: 34%; max-width: 220px; aspect-ratio: 40 / 21; align-self: flex-start; margin: 14px 0 14px 14px; border-radius: var(--r-sm); overflow: hidden; }
@media (max-width: 480px) { .cards--list .card__ex { display: none; } .cards--list .card__ph { font-size: 12px; } }

.pick { display: grid; gap: 28px 32px; }
@media (min-width: 720px) { .pick { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .pick { grid-template-columns: repeat(3, 1fr); } }
.pick__col { display: flex; flex-direction: column; gap: 10px; }
.pick__title { margin: 0; font-size: 17px; padding-bottom: 8px; border-bottom: 2px solid var(--ai); }
.pick__title a { color: var(--ink); text-decoration: none; }
.pick__list { display: flex; flex-direction: column; }
.pick .empty { padding: 12px 14px; font-size: 13px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips a { display: block; font-size: 12px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); text-decoration: none; }
.chips a:hover { color: var(--ai); border-color: var(--ai); }

.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; }
@media (min-width: 720px) { .ranking { grid-template-columns: 1fr 1fr; } }

/* ---------- benefit / supervisor / line ---------- */
.benefit { background: var(--ai); color: var(--surface); border-radius: var(--r); padding: 28px 24px; display: grid; gap: 8px; justify-items: start; }
.benefit p { margin: 0; }
.benefit__kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ochre-soft); }
.benefit__title { font-family: var(--f-disp); font-size: 24px; line-height: 1.45; }
.benefit__text { font-size: 14px; opacity: .9; max-width: 36em; }
.benefit .btn { margin-top: 8px; }
.benefit--compact { padding: 20px; }
.benefit--compact .benefit__title { font-size: 18px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .benefit { background: var(--ai-soft); color: var(--ink); } }
:root[data-theme="dark"] .benefit { background: var(--ai-soft); color: var(--ink); }

.sv { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.sv__img { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--ai-soft); display: grid; place-items: center; font-family: var(--f-disp); font-size: 24px; color: var(--ai); }
.sv__img img { width: 100%; height: 100%; object-fit: cover; }
.sv__body p { margin: 0; }
.sv__title { font-size: 12px; color: var(--muted); }
.sv__name { font-size: 17px; font-weight: 700; }
.sv__profile { font-size: 14px; color: var(--muted); margin-top: 6px !important; }

.linebn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--line-green); border-radius: var(--r); background: var(--surface); }
.linebn p { margin: 0; }
.linebn__title { font-weight: 700; }
.linebn__text { font-size: 13px; color: var(--muted); }

/* ---------- layout (article / archive) ---------- */
.layout { display: grid; gap: 40px; padding-block: 16px 64px; }
.layout__main { min-width: 0; }
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; } }
.side { display: flex; flex-direction: column; gap: 28px; }
.side__h { margin: 0 0 6px; font-size: 15px; padding-bottom: 8px; border-bottom: 2px solid var(--ai); }
.side__list .card__title { font-size: 14px; }
.side__cats, .side__cats ul { list-style: none; margin: 0; padding: 0; }
.side__cats > li { border-bottom: 1px solid var(--line); padding: 8px 0; }
.side__cats > li > a { font-weight: 700; color: var(--ink); text-decoration: none; }
.side__cats ul { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; }
.side__cats ul a { font-size: 12px; color: var(--muted); }

/* ---------- entry ---------- */
.entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 18px 32px; }
@media (min-width: 720px) { .entry { padding: 40px 48px 48px; } }
.entry__head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.entry__title { margin: 0; font-size: clamp(22px, 4.6vw, 28px); font-weight: 700; }
.entry--page .entry__title { font-family: var(--f-disp); }
.entry__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--muted); }
.entry__meta div { display: flex; gap: 6px; }
.entry__meta dt { font-weight: 700; }
.entry__meta dd { margin: 0; }
.entry__meta time { font-family: var(--f-num); }
.entry__eye { margin: 8px 0 0; border-radius: var(--r-sm); overflow: hidden; width: 100%; }
.entry__eye img { display: block; width: 100%; }
.entry__foot { display: flex; flex-direction: column; gap: 28px; margin-top: 48px; }
.entry__foot .sec__title { font-size: 18px; margin-bottom: 12px; }

/* 本文：1行は全角35〜40字程度 */
.prose { font-size: 16px; line-height: 1.95; max-width: 40em; margin-top: 28px; }
.prose > * + * { margin-top: 1.2em; }
.prose p { margin: 0; }
.prose h2 { margin: 2.6em 0 0; font-size: 21px; padding: 0 0 10px; border-bottom: 2px solid var(--ai); }
.prose h3 { margin: 2em 0 0; font-size: 18px; padding-left: 12px; border-left: 3px solid var(--ai); }
.prose h4 { margin: 1.6em 0 0; font-size: 16px; }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 0; }
.prose li + li { margin-top: .3em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.prose figure.wp-block-table { overflow-x: auto; margin-inline: 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--bg); }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--line); color: var(--muted); }
.prose details { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; }
.prose details summary { font-weight: 700; cursor: pointer; }
.prose details summary::before { content: "Q. "; color: var(--ai); font-family: var(--f-num); }
.prose details[open] summary { margin-bottom: 8px; }
.prose .wp-block-image img { border-radius: var(--r-sm); }
.prose code { font-family: var(--f-num); font-size: .9em; background: var(--bg); padding: 1px 5px; border-radius: 4px; }

/* 目次 */
.toc { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); padding: 14px 18px; }
.toc summary { font-weight: 700; cursor: pointer; font-size: 15px; }
.toc ol { margin: 8px 0 0; padding-left: 1.4em; font-size: 14px; line-height: 1.7; }
.toc ol ol { margin-top: 2px; font-size: 13px; list-style: none; padding-left: .6em; }
.toc ol ol li::before { content: "– "; color: var(--muted); }
.toc li { margin-top: 4px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--ai); text-decoration: underline; }

/* ボックス（要約・注意・監修者コメント） */
.box { border-radius: var(--r); padding: 16px 18px; border: 1px solid var(--line); background: var(--bg); }
.prose .box > * + * { margin-top: 0; }
.box__title { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.box__body > * + * { margin-top: .6em; }
.box ul { margin: 0; padding-left: 1.3em; }
.box--summary { background: var(--ai-soft); border-color: transparent; }
.box--summary .box__title { color: var(--ai); }
.box--lead { width: 100%; margin-top: 10px; font-size: 15px; }
.box--caution { background: var(--ng-soft); border-color: transparent; }
.box--caution .box__title { color: var(--ng); }
.box--caution .box__title::before { content: "! "; font-family: var(--f-num); }
.box--sv-comment { background: var(--surface); }
.box__sv { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.box__sv img { border-radius: 50%; object-fit: cover; }
.box__sv p { margin: 0; line-height: 1.4; }
.box__sv span { display: block; font-size: 12px; color: var(--muted); }

/* ○×確認問題 */
.oxq { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; background: var(--surface); }
.prose .oxq > * + * { margin-top: 10px; }
.oxq__head { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.oxq__label { font-weight: 700; color: var(--ai); letter-spacing: .06em; }
.oxq__subj { color: var(--muted); }
.oxq__q { font-size: 16px; line-height: 1.8; margin: 0; }
.oxq__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oxq__btns button { font-family: var(--f-disp); font-size: 28px; line-height: 1.2; padding: 8px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ai); cursor: pointer; }
.oxq__btns button:hover:not(:disabled) { border-color: var(--ai); background: var(--ai-soft); }
.oxq__btns button:disabled { cursor: default; opacity: .5; }
.oxq__btns button.is-right { opacity: 1; border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.oxq__btns button.is-wrong { opacity: 1; border-color: var(--ng); background: var(--ng-soft); color: var(--ng); }
.oxq__result { border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.oxq.is-ok .oxq__result { background: var(--ok-soft); }
.oxq.is-ng .oxq__result { background: var(--ng-soft); }
.oxq__result p { margin: 0; }
.oxq__verdict { font-weight: 700; }
.oxq.is-ok .oxq__verdict { color: var(--ok); }
.oxq.is-ng .oxq__verdict { color: var(--ng); }
.oxq__exp { margin-top: 4px !important; }
.oxq__src { margin-top: 6px !important; font-size: 12px; color: var(--muted); }

/* CTA */
.cta { position: relative; border: 1px solid var(--ochre); border-radius: var(--r); padding: 20px; background: var(--surface); display: grid; gap: 6px; justify-items: start; }
.cta p { margin: 0; }
.cta__title { font-weight: 700; font-size: 17px; }
.cta__text { font-size: 14px; color: var(--muted); }
.cta .btn { margin-top: 8px; }
.cta .pr { position: absolute; top: 10px; right: 12px; font-size: 10px; color: var(--muted); border: 1px solid var(--line); padding: 0 6px; border-radius: 4px; }
.cta--todo { border: 1px dashed var(--ng); color: var(--ng); background: var(--ng-soft); font-size: 13px; padding: 10px 14px; border-radius: var(--r-sm); display: block; }

/* 出典・関連 */
.sources { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }
.sources__title { font-size: 14px; margin: 0 0 6px; color: var(--ink); }
.sources ul { margin: 0; padding-left: 1.2em; }

/* 広告 */
.ad { text-align: center; }
.ad__label { display: block; font-size: 10px; color: var(--muted); letter-spacing: .1em; margin-bottom: 4px; }

/* ---------- archive ---------- */
.archive__head { margin: 8px 0 20px; }
.archive__title { margin: 0; font-family: var(--f-disp); font-size: clamp(24px, 5vw, 30px); color: var(--ai); }
.archive__desc { color: var(--muted); font-size: 14px; }
.subcats ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.subcats a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.subcats a:hover { border-color: var(--ai); color: var(--ai); }
.subcats small { flex: none; white-space: nowrap; font-family: var(--f-num); font-size: 11px; color: var(--muted); }
.pagination { margin-top: 28px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pagination .page-numbers { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); text-decoration: none; font-family: var(--f-num); font-size: 14px; }
.pagination .current { background: var(--ai); border-color: var(--ai); color: var(--surface); }

/* ---------- tools / forms ---------- */
.tool { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; background: var(--bg); display: flex; flex-direction: column; gap: 12px; }
.prose .tool > * + * { margin-top: 0; }
.prose .tool__title { margin: 0; border: 0; padding: 0; font-size: 18px; }
.tool__result { margin: 0; font-family: var(--f-num); font-size: 34px; color: var(--ai); line-height: 1.2; }
.tool__result small { font-family: var(--f-body); font-size: 12px; color: var(--muted); margin-left: 6px; }
.tool__detail { margin: 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.tool__table caption { text-align: left; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.tool__table { background: var(--surface); }
.checklist { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); width: 100%; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 4px; flex: none; accent-color: var(--ai); }
.req { margin-left: 6px; font-size: 10px; color: var(--ng); border: 1px solid var(--ng); padding: 0 4px; border-radius: 4px; vertical-align: 1px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form .btn { align-self: flex-start; min-width: 200px; }
.notice { padding: 12px 16px; border-radius: var(--r-sm); background: var(--bg); }
.notice--ok { background: var(--ok-soft); color: var(--ok); }
.notice--ng { background: var(--ng-soft); color: var(--ng); }
.newsletter { display: grid; gap: 10px; }
.search-form { display: flex; gap: 8px; }
.search-form .search-field { flex: 1; font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.search-form .search-submit { font: inherit; border: 0; background: var(--ai); color: var(--surface); padding: 8px 16px; border-radius: var(--r-sm); }

/* ---------- footer ---------- */
.site-foot { background: var(--surface); border-top: 1px solid var(--line); padding-block: 40px 24px; font-size: 13px; }
.site-foot__grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .site-foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-foot a { color: var(--ink); text-decoration: none; }
.site-foot a:hover { color: var(--ai); text-decoration: underline; }
.site-foot__h { margin: 0 0 8px; font-weight: 700; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.site-foot__desc { color: var(--muted); margin: 6px 0 0; }
.site-foot__note { margin: 32px 0 0; color: var(--muted); font-size: 11px; }
.site-foot__copy { margin: 4px 0 0; color: var(--muted); }
.logo--foot { font-size: 18px; }

/* ---------- Web一問一答 ---------- */
.quiz { display: flex; flex-direction: column; gap: 16px; }
.prose .quiz > * + * { margin-top: 0; }
.quiz__tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.quiz__tabs a { flex: none; display: flex; align-items: baseline; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; }
.quiz__tabs a small { font-family: var(--f-num); font-size: 11px; color: var(--muted); }
.quiz__tabs a[aria-current="page"] { background: var(--ai); border-color: var(--ai); color: var(--surface); }
.quiz__tabs a[aria-current="page"] small { color: var(--ai-soft); }
.quiz__notice { margin: 0; font-size: 13px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--ochre-soft); color: var(--ink); }
.quiz__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.quiz__bar .num { color: var(--ink); font-size: 15px; }
.quiz__opt { display: flex; align-items: center; gap: 6px; margin-left: auto; cursor: pointer; }
.quiz__list { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.qz { margin: 0 !important; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.qz p { margin: 0; }
.qz__meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.qz__subj { font-weight: 700; color: var(--ai); }
.qz__badge { font-size: 11px; font-weight: 700; color: var(--ochre); background: var(--ochre-soft); padding: 0 8px; border-radius: 99px; }
.qz__q { font-size: 17px; line-height: 1.85; }
.qz__btns { display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz.is-js .qz__btns { display: grid; }
.qz__btns button { font-family: var(--f-disp); font-size: 30px; line-height: 1.2; padding: 10px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ai); cursor: pointer; }
.qz__btns button:hover:not(:disabled) { border-color: var(--ai); background: var(--ai-soft); }
.qz__btns button:disabled { cursor: default; opacity: .5; }
.qz__btns button.is-right { opacity: 1; border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.qz__btns button.is-wrong { opacity: 1; border-color: var(--ng); background: var(--ng-soft); color: var(--ng); }
.qz__result { border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
.qz__result[hidden] { display: none; }
.qz.is-ok .qz__result { background: var(--ok-soft); }
.qz.is-ng .qz__result { background: var(--ng-soft); }
.qz__head { font-weight: 700; font-size: 16px; }
.qz.is-ok .qz__head { color: var(--ok); }
.qz.is-ng .qz__head { color: var(--ng); }
.qz__verdict { font-weight: 700; }
.qz__src { font-size: 12px; color: var(--muted); }
.qz[hidden] { display: none; }
.quiz__done { text-align: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 24px 18px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.quiz__done[hidden], .quiz__bar[hidden], .quiz__stats[hidden] { display: none; }
.quiz__done p { margin: 0; }
.quiz__done-title { font-family: var(--f-disp); font-size: 22px; color: var(--ai); }
.quiz__done-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.quiz__stats { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.prose .quiz__stats-title { margin: 0; padding: 0; border: 0; font-size: 15px; }
.quiz__stats-bars { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.quiz__stat { display: grid; grid-template-columns: 7.5em 1fr 3.2em; align-items: center; gap: 8px; font-size: 13px; }
.quiz__meter { height: 8px; background: var(--ai-soft); border-radius: 99px; overflow: hidden; }
.quiz__meter i { display: block; height: 100%; background: var(--ai); border-radius: 99px; }
.quiz__stat .num { text-align: right; font-size: 12px; }
.side__quiz { display: block; padding: 16px 18px; border: 1px solid var(--ai); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.side__quiz b { display: block; font-size: 16px; color: var(--ai); }
.side__quiz span { font-size: 13px; color: var(--muted); }
.hero__side { display: flex; flex-direction: column; gap: 12px; }