/**
 * フロント側の唯一のスタイルシート。
 *
 * CSSフレームワークは使わない。カスタムプロパティで色・間隔・文字サイズを
 * 一元管理し、Phase 4 の複製時は :root の値だけ差し替えれば済むようにする。
 */

:root {
	/*
	 * 色。ブランド色はここだけを変える。
	 *
	 * --c-brand はロゴと親サイト（入口）の色＝屋号「比較チェック」の緑。
	 * --c-accent はリンク・見出しの差し色で、ジャンルのサイトでは .genre-<ジャンル>
	 * （このファイルの末尾「デザイン v2」）が差し替える。ここの値は親サイトと既定。
	 * tools/brand/make-images.php はこのブロックと .genre-<ジャンル> の値を読んで画像を描く。
	 */
	--c-text: #16181d;
	--c-text-muted: #5b6472;
	--c-bg: #ffffff;
	--c-bg-subtle: #f6f7f9;
	--c-border: #e2e5ea;
	--c-brand: #0f766e;
	--c-brand-dark: #115e59;
	--c-accent: #0f766e;
	--c-accent-dark: #115e59;
	--c-accent-soft: #e8f5f2;
	--c-cta: #f5610a;
	--c-cta-dark: #d24f04;

	/* 余白。8pxグリッド。 */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 40px;
	--space-6: 64px;

	/* 文字。本文16pxを下回らない。 */
	/*
	 * Webフォントは読まない（外部ファイルを増やさない）。端末に入っている日本語フォントを順に探す。
	 * Mac/iPhone はヒラギノ、Windows 11 は Noto Sans JP（太さを自由に出せる）、
	 * 古い Windows は BIZ UDPゴシック → メイリオ。游ゴシックは Windows で細く滲むので使わない。
	 */
	--font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.75rem;

	--radius: 8px;
	--container: 1080px;
	--container-narrow: 720px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.8;
	/* 日本語の禁則と行末処理。長い英単語URLでの横溢れも防ぐ。 */
	word-break: normal;
	overflow-wrap: anywhere;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--c-accent);
}

a:hover {
	color: var(--c-accent-dark);
}

h1,
h2,
h3 {
	line-height: 1.4;
	margin: var(--space-5) 0 var(--space-3);
}

h1 {
	font-size: var(--fs-2xl);
	margin-top: 0;
}

h2 {
	font-size: var(--fs-xl);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--c-border);
}

h3 {
	font-size: var(--fs-lg);
}

/* レイアウト */

.l-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-3);
}

.l-container--narrow {
	max-width: var(--container-narrow);
}

.l-main {
	padding-block: var(--space-5);
}

/* ヘッダー / フッター */

.site-header {
	border-bottom: 1px solid var(--c-border);
	background: var(--c-bg);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 64px;
}

.site-header__title {
	margin: 0;
	font-size: var(--fs-lg);
}

.site-header__title a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--c-text);
	text-decoration: none;
}

/* マークの色はここで決まる（SVG 側は currentColor で継ぐ）。 */
.site-logo {
	flex: none;
	color: var(--c-accent);
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
}

.site-footer {
	margin-top: var(--space-6);
	padding-block: var(--space-4);
	border-top: 1px solid var(--c-border);
	background: var(--c-bg-subtle);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* スクリーンリーダー用 */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--space-2) var(--space-3);
	background: var(--c-bg);
	border: 2px solid var(--c-accent);
	border-radius: var(--radius);
}

/* ------------------------------------------------------------------
   パンくず
   ------------------------------------------------------------------ */

.breadcrumbs {
	margin-bottom: var(--space-4);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin-right: var(--space-2);
	color: var(--c-border);
}

/* ------------------------------------------------------------------
   言語切替 / 言語バナー
   ------------------------------------------------------------------ */

.lang-switcher {
	position: relative;
	font-size: var(--fs-sm);
}

.lang-switcher__button {
	cursor: pointer;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	list-style: none;
	white-space: nowrap;
}

.lang-switcher__button::-webkit-details-marker {
	display: none;
}

.lang-switcher__list {
	position: absolute;
	right: 0;
	z-index: 20;
	min-width: 160px;
	margin: var(--space-1) 0 0;
	padding: var(--space-1);
	list-style: none;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lang-switcher__list a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--c-text);
}

.lang-switcher__list a:hover,
.lang-switcher__list a[aria-current] {
	background: var(--c-bg-subtle);
}

.lang-banner {
	position: fixed;
	inset-inline: var(--space-3);
	bottom: var(--space-3);
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	max-width: 480px;
	margin-inline: auto;
	padding: var(--space-3);
	background: var(--c-text);
	color: #fff;
	border-radius: var(--radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
	font-size: var(--fs-sm);
}

/*
 * hidden 属性が効くようにする。
 * UAスタイルの [hidden]{display:none} は、この .lang-banner{display:flex} に
 * 負けるため、指定しないと中身が空のまま黒帯が出る（実機で発覚した）。
 */
.lang-banner[hidden] {
	display: none;
}

.lang-banner__link {
	color: #fff;
}

.lang-banner__close {
	flex: 0 0 auto;
	padding: 0 var(--space-2);
	background: none;
	border: 0;
	color: #fff;
	font-size: var(--fs-lg);
	line-height: 1;
	cursor: pointer;
}

/* ------------------------------------------------------------------
   広告表記
   ------------------------------------------------------------------ */

.disclosure {
	margin: 0 0 var(--space-4);
	padding: var(--space-3);
	background: var(--c-bg-subtle);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.disclosure__heading {
	margin: 0 0 var(--space-1);
	font-weight: 600;
	color: var(--c-text);
}

.disclosure__body {
	margin: 0;
	line-height: 1.7;
}

/* ------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------ */

.cta {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	background: var(--c-cta);
	color: #fff;
	border-radius: var(--radius);
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	line-height: 1.5;
}

.cta:hover {
	background: var(--c-cta-dark);
	color: #fff;
}

.cta--sm {
	padding: var(--space-1) var(--space-3);
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.cta--lg {
	display: block;
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-lg);
}

.tool-cta {
	margin-top: var(--space-5);
	padding: var(--space-4);
	background: var(--c-bg-subtle);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	text-align: center;
}

.tool-cta__name {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-lg);
	font-weight: 700;
}

.tool-cta__summary {
	margin: 0 0 var(--space-3);
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------
   比較表
   ------------------------------------------------------------------ */

/*
 * 表だけ本文カラムの外へ広げる。
 *
 * ラッパーのクラスは compare-wrap。**compare にしてはいけない。**
 * post_class() が投稿タイプ名を出すので、比較記事の <article> にも
 * class="compare" が付き、記事全体がこの指定を食らう（実機で発生）。
 *
 * 記事は l-container--narrow（720px・内容幅は約688px）で組んでいるが、
 * 比較表は既定4列＋CTAで750px前後を要る。カラムに合わせると
 * **デスクトップでも横スクロールに落ちる**（1280px幅で実測：必要749px / 容器688px）。
 * カード化の境界は viewport 900px なので、901px 以上では必ずそうなっていた。
 *
 * 幅の上限は l-container と同じ 1080px。狭い画面では画面幅に従う。
 * 100vw から --space-5（40px）引いているのは、100vw がスクロールバーを
 * 含む環境でページ全体が横に溢れるのを避けるため。
 * margin の % は親の内容幅に対して解決するので、これで親の中央に載る。
 */
.compare-wrap {
	--compare-width: min( var(--container), 100vw - var(--space-5) );

	/* 見出しの .screen-reader-text（position:absolute）がスクロールの枠を抜けて、ページごと横にずれていた。 */
	position: relative;

	width: var(--compare-width);
	margin-block: var(--space-4);
	margin-inline: calc( 50% - var(--compare-width) / 2 );

	/*
	 * 広げてもなお足りないとき（列を増やした・訴求文が長い）の最後の逃げ。
	 * 900px 以下はカード型に切り替わるので、効くのはその上の帯だけ。
	 */
	overflow-x: auto;
}

.compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.compare__table th,
.compare__table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	vertical-align: middle;
}

.compare__table thead th {
	background: var(--c-bg-subtle);
	border-bottom: 2px solid var(--c-border);
	font-size: 0.8125rem;
	white-space: nowrap;
}

/* ツール名の列。狭いと名前と説明が1文字ずつ折り返して読めなくなる。 */
.compare__th-tool,
.compare__tool {
	min-width: 180px;
}

.compare__th-cta,
.compare__cta {
	width: 1%;
}

.compare__tool-inner {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.compare__logo {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	object-fit: contain;
}

.compare__tool-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.compare__name {
	font-weight: 700;
}

.compare__summary,
.compare__note,
.compare__plan {
	display: block;
	color: var(--c-text-muted);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
}

.compare__price {
	font-weight: 700;
	white-space: nowrap;
}

/*
 * 速度維持率。表の主役の列。
 * tabular-nums は桁を等幅にする指定。行ごとに数字の幅が動くと表が波打って見え、
 * 数字を売りにしているサイトでそれが起きると、それだけで信用を落とす。
 */
.compare__retention {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.compare__yes {
	color: #1a7f4b;
	font-weight: 700;
}

.compare__no,
.compare__empty {
	color: var(--c-text-muted);
}

.compare__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.compare__tags li {
	padding: 2px var(--space-2);
	background: var(--c-bg-subtle);
	border-radius: 999px;
	font-size: 0.75rem;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   訴求フック（バッジ）

   目立たせすぎない。広告らしさが勝つと本文全体の信頼が落ちて、
   結局クリックされなくなる。色は1色に絞り、期限のあるものだけ強調する。
   ------------------------------------------------------------------ */

.offers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	padding: 0;
	list-style: none;
}

.offer {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-1);
	padding: 3px var(--space-2);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	background: var(--c-bg);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.offer__text {
	font-weight: 700;
}

.offer__note {
	color: var(--c-text-muted);
	font-size: 0.75rem;
	font-weight: 400;
}

/* 期限のあるものだけ色を持たせる。常時出るバッジまで色を付けると効かなくなる。 */
.offer--campaign {
	border-color: var(--c-cta);
	background: #fff6f0;
	color: var(--c-cta-dark);
}

.offer--campaign .offer__note {
	color: var(--c-cta-dark);
}

/* 本文中に置くとき（[tool_offer]）は行の一部として馴染ませる。 */
.offers--inline {
	margin: var(--space-3) 0;
}

/*
 * 比較表の中は情報密度が高いので、枠を消して文字だけにする。
 * 横に並べると列幅が足りず、実機で1文字ずつ縦に折れた。1行1バッジで積む。
 */
.offers--table {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
	margin: 0;
}

.offers--table .offer {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.75rem;
	/*
	 * 折り返さない。表のセルは中身の最小幅で潰れるので、これが無いと
	 * 日本語が1文字ずつ縦に折れる（実機で発生）。列幅を em で固定すると
	 * 今度は 768px 付近で表全体がはみ出したため、内容に必要な幅だけ取らせる。
	 */
	white-space: nowrap;
	overflow-wrap: normal;
}

/* display:block にすると inline-flex の gap が効かないので、余白を足す。 */
.offers--table .offer__note {
	margin-left: 0.4em;
}

.offers--table .offer--campaign {
	color: var(--c-cta-dark);
}

/* 確認日。読者への注記なので小さく、目立たせない。 */
.offer-checked {
	margin: var(--space-2) 0 0;
	color: var(--c-text-muted);
	font-size: 0.75rem;
	line-height: 1.6;
}

.is-right {
	text-align: right;
}

.is-center {
	text-align: center;
}

/*
 * 狭い画面ではカード型に切り替える。
 * 表を横スクロールさせると右側の列が読まれないまま離脱するため。
 * DOMは1つのまま、data-label を項目名として使う。
 *
 * 境界は 900px。767px にしていたが、特典列を足したら表が約860px必要になり、
 * iPad の縦向き（768px）で横スクロールが出た。表の最大幅に合わせてここを決める。
 * 列を増やして表が広くなったら、この数値も見直すこと。
 */
@media (max-width: 900px) {

	/* カードは本文カラムに戻す。広げたままだと本文と左端がずれる。 */
	.compare-wrap {
		width: auto;
		margin-inline: 0;
	}

	.compare__table,
	.compare__table tbody,
	.compare__table tr,
	.compare__table th,
	.compare__table td {
		display: block;
	}

	.compare__table thead {
		display: none;
	}

	.compare__row {
		margin-bottom: var(--space-3);
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
		overflow: hidden;
	}

	.compare__tool {
		background: var(--c-bg-subtle);
		border-bottom: 1px solid var(--c-border);
	}

	.compare__table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-3);
		text-align: left;
	}

	.compare__table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--c-text-muted);
		font-size: 0.75rem;
	}

	.compare__table td.is-right,
	.compare__table td.is-center {
		text-align: right;
	}

	.compare__tags {
		justify-content: flex-end;
	}

	.compare__table td .offers--table {
		align-items: flex-end;
		text-align: right;
	}

	/*
	 * CTAのセル。2つ戻す必要がある。
	 *   display : .compare__cta 単体では .compare__table td に詳細度で負け、flex のまま潰れる
	 *   width   : 表では列を詰めるための width:1% を、カードでは literal な1%として食らう
	 * どちらか片方だけ直すと、ボタンが指1本ぶんの幅で出る。
	 */
	.compare__table td.compare__cta {
		display: block;
		width: auto;
		border-bottom: 0;
	}

	.compare__cta .cta {
		display: block;
		width: 100%;
	}
}

/* ------------------------------------------------------------------
   トップのヒーロー
   ------------------------------------------------------------------ */

/*
 * 画像を使わない。読み込むファイルを1本も増やさずに、文字だけで差を出す。
 * ヒーローは <main class="l-main"> の中に入るので、その上余白を打ち消して
 * ヘッダーの直下に帯を付ける（帯だけ画面幅いっぱいに敷きたいため）。
 */

.hero {
	margin-top: calc(var(--space-5) * -1);
	margin-bottom: var(--space-6);
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--c-border);
	background: var(--c-bg-subtle);
}

.hero__title {
	margin: 0;
	font-size: var(--fs-2xl);
	line-height: 1.35;
}

.hero__lead {
	/* 1行を長くしすぎない。ここは読ませる文ではなく、態度を1行で示す場所。 */
	max-width: 46em;
	margin: var(--space-3) 0 0;
	color: var(--c-text-muted);
}

.hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
}

.hero__point {
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	background: var(--c-bg);
	/* 日本語は1文字で折り返せる。折らせるとバッジが縦に潰れる（比較表で実際に起きた）。 */
	white-space: nowrap;
}

/* チェック印。アイコンフォントも画像も足さずに出す。 */
.hero__point::before {
	content: "\2713";
	margin-right: var(--space-1);
	color: var(--c-accent);
	font-weight: 700;
}

.hero__more {
	margin: var(--space-4) 0 0;
	font-size: var(--fs-sm);
}

@media (max-width: 480px) {
	.hero {
		padding-block: var(--space-5);
	}

	.hero__title {
		font-size: var(--fs-xl);
	}

	/*
	 * 狭い画面ではバッジをやめて箇条書きにする。
	 * 丸のまま縦に3つ積むと記事一覧が1画面目から消え、横に流すと
	 * スクロールバーが出て壊れて見える（375pxの実機で確認）。
	 */
	.hero__points {
		display: block;
		margin-top: var(--space-3);
	}

	.hero__point {
		padding: 0;
		border: 0;
		background: none;
		white-space: normal;
	}

	.hero__point + .hero__point {
		margin-top: var(--space-1);
	}
}

/* ------------------------------------------------------------------
   カード / 一覧
   ------------------------------------------------------------------ */

.section {
	margin-bottom: var(--space-6);
}

.section__title {
	margin-top: 0;
}

.section__more {
	margin-top: var(--space-3);
	text-align: right;
	font-size: var(--fs-sm);
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4);
}

.card {
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-bg);
}

.card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.card__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.card__body {
	padding: var(--space-3);
}

.card__title {
	margin: 0 0 var(--space-2);
	padding: 0;
	border: 0;
	font-size: var(--fs-base);
	line-height: 1.6;
}

.card__excerpt {
	margin: 0;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.genre-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.genre-list__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--c-text);
}

.genre-list__item a:hover {
	border-color: var(--c-accent);
}

.genre-list__count {
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------
   記事
   ------------------------------------------------------------------ */

.page-header {
	margin-bottom: var(--space-4);
}

.page-header__title {
	margin-top: 0;
}

.article__title {
	margin-bottom: var(--space-2);
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}

.article__thumb {
	margin-bottom: var(--space-4);
}

.article__thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.article__body > * + * {
	margin-top: var(--space-3);
}

.article__body a {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* 編集者にだけ見せる注意書き */

.aitools-notice {
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	background: #fff3cd;
	border: 1px solid #ffe08a;
	border-radius: var(--radius);
	font-size: var(--fs-sm);
}

/* ページャ */

.pagination {
	margin-top: var(--space-5);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
}

.pagination .page-numbers {
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--c-text);
	border-color: var(--c-text);
	color: #fff;
}

/* ------------------------------------------------------------------
   目次

   本文の一部として馴染ませる。枠を強くすると本文より先に目に入って、
   読み始める前に「長い」と判断されて離脱する。
   ------------------------------------------------------------------ */

.toc {
	margin: var(--space-4) 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	background: var(--c-bg-subtle);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}

.toc__heading {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-text-muted);
}

.toc__list,
.toc__sub {
	margin: 0;
	padding-left: 1.4em;
}

.toc__list {
	font-size: var(--fs-sm);
	line-height: 1.9;
}

/*
 * 入れ子は少しだけ下げる。深く見せると本文の構造まで複雑に見える。
 *
 * 下位に番号を振らないのは、記事側が見出しに「1.」「2.」を書いていると
 * 「1. 1. 更新時の料金」と二重に見えるため（実機で発生）。
 * 番号を持つかどうかは記事の書き方しだいなので、目次側は持たない。
 */
.toc__sub {
	margin-top: var(--space-1);
	padding-left: 1em;
	border-left: 2px solid var(--c-border);
	list-style: none;
	color: var(--c-text-muted);
}

.toc__item a {
	text-decoration: none;
}

.toc__item a:hover {
	text-decoration: underline;
}

/*
 * アンカーで飛んだ見出しがヘッダーの下に潜らないよう余白を確保する。
 * position:sticky なヘッダーは今は無いが、付けたときにここが効く。
 */
.article__body :is(h2, h3)[id] {
	scroll-margin-top: var(--space-4);
}

/* ------------------------------------------------------------------
   関連記事

   カード型にしない。記事の末尾で大きな画像を並べると、CTAより
   目立って本来押してほしいものが押されなくなる。行のリストで足りる。
   ------------------------------------------------------------------ */

.related {
	margin-top: var(--space-5);
}

.related__heading {
	margin: 0 0 var(--space-3);
	padding: 0;
	border: 0;
	font-size: var(--fs-lg);
}

.related__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-border);
}

.related__item {
	border-bottom: 1px solid var(--c-border);
}

.related__link {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	color: inherit;
	text-decoration: none;
}

.related__link:hover .related__title {
	text-decoration: underline;
}

/* 種別のラベル。幅を固定して、記事名の頭を縦に揃える。 */
.related__type {
	flex: 0 0 auto;
	min-width: 5.5em;
	color: var(--c-text-muted);
	font-size: 0.75rem;
}

.related__title {
	font-size: var(--fs-sm);
	line-height: 1.6;
}

@media (max-width: 480px) {

	/* 幅が無いと記事名が1〜2文字で折り返す。縦に積む。 */
	.related__link {
		display: block;
		padding: var(--space-2) 0;
	}

	.related__type {
		display: block;
		margin-bottom: 2px;
	}
}

/* ------------------------------------------------------------------
   運営者情報
   ------------------------------------------------------------------ */

.site-author {
	margin-top: var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}

.site-author__label {
	margin: 0 0 var(--space-2);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--c-text-muted);
	letter-spacing: 0.04em;
}

.site-author__name {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-lg);
	font-weight: 700;
}

.site-author__role {
	margin-left: var(--space-2);
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	font-weight: 400;
}

.site-author__bio {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.8;
	color: var(--c-text-muted);
}

.site-author__more {
	margin: var(--space-3) 0 0;
	font-size: var(--fs-sm);
}

/* ==================================================================
   ここから下は Claude Design から受け取った改善分（2026-09-07 適用）。

   受け取った形は「main.css の末尾に貼る差分」で、そのまま貼っている。
   既存の宣言を打ち消すところは同じセレクタを再掲してあり、
   詳細度は上げず**追記順（後勝ち）だけ**で効かせている。
   だから、このブロックより上を編集するときは
   ここで打ち消していないかを先に見ること。

   [speed_calc] のCSSだけは例外で、上の元ブロックを削除してある。
   デザイン側が見たスナップショットは計算機の実装より前のもので、
   打ち消しではなく作り直しになっていたため（クラス構成も違う）。

   新規クラス名は review / compare / guide / tool を裸で使っていない
   （post_class() の投稿タイプ名と衝突するため）。
   ================================================================== */


/* ==================================================================
   1. :root の差分（変更2件・追加7件）
   ================================================================== */

:root {
	/*
	 * [変更] CTA色。#f5610a に白文字は 3.2:1 で 4.5:1 に届かない。
	 * .cta は太字でも 16px なので WCAG の「大きな文字」扱いにもならない。
	 * 色相を保ったまま暗さだけ足して 4.6:1 にする。
	 */
	--c-cta: #c94d00;
	--c-cta-dark: #a03d00;

	/*
	 * [追加] 評価の色。.compare__yes が直に持っていた #1a7f4b をトークンに上げ、
	 * 対になる「低い側」を足した。維持率のラベルと ○× が同じ色を読む。
	 */
	--c-good: #1a7f4b;
	--c-bg-good: #eff8f2;
	--c-warn: #8a5200;
	--c-bg-warn: #fdf5e7;

	/* [追加] 期限つき訴求の地。既存の直書き #fff6f0 を置き換える。 */
	--c-bg-cta-subtle: #fff4ec;

	/*
	 * [追加] 実測ハイライトの数字だけに使う段。
	 * 本文の最上段（--fs-2xl）よりさらに上に1段だけ出し、
	 * 「ここは数字を読みに来る場所」を字の大きさで示す。
	 */
	--fs-3xl: 2.5rem;

	/* [追加] 本文の1行の長さ。日本語で40字前後に収まる幅。 */
	--measure: 38em;
}

/* ==================================================================
   2. 折り返しの土台（1文字ずつ折れる問題の元を直す）
   ================================================================== */

/*
 * [置換] body の overflow-wrap。
 *
 * `anywhere` は **min-content 幅を1文字にする**。表のセルやバッジが
 * 1文字ずつ縦に折れていたのはこれが原因で、各所に white-space:nowrap を
 * 足して個別に塞いでいた。
 *
 * `break-word` は「はみ出したときだけ途中で折る」で、min-content 幅には
 * 影響しない。長いURLの横溢れは同じように防げる。
 */
body {
	overflow-wrap: break-word;
}

/*
 * 折らせたくない短いラベルは nowrap ではなく keep-all にする。
 *   日本語 … 文字間で折らない（nowrap と同じ結果）
 *   英語   … 語間では折れるので、文字が伸びても行が増えるだけで済む
 * nowrap だと英語や1.5倍のフォント設定で列を押し広げ、表が壊れる。
 * 「速度維持率」「残存率」どちらの語でも同じ挙動になる。
 */
.hero__point,
.hero__fact-label,
.hero__fact-value,
.site-header__title,
.compare__table thead th,
.compare__price,
.measured__grade,
.measured__label,
.postcard__date,
.compare__yes,
.compare__no,
.compare__empty,
.compare__devices,
.compare__rate-abs,
.compare__rate-date,
.genre-list__name,
.genre-list__count,
.article__body table thead th {
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: normal;
}

/* 表内のバッジも同じ扱いに寄せる（既存の nowrap を置換）。 */
.offers--table .offer {
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: normal;
}

/* 期限つきバッジの地色をトークンから読む（#fff6f0 の置換）。 */
.offer--campaign {
	background: var(--c-bg-cta-subtle);
}

/* 桁を揃える。数字が揺れる表は読みにくいだけでなく信用されない。 */
.compare__table,
.article__body table,
.measured__rate,
.measured__abs,
.hero__fact-value,
.postcard__date {
	font-variant-numeric: tabular-nums;
}

/* ==================================================================
   3. フォーカス表示（新規）
   キーボードの現在地が今どこにも出ていない。
   ================================================================== */

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.cta:focus-visible {
	outline-color: var(--c-cta-dark);
	outline-offset: 3px;
}

/* ==================================================================
   4. ヘッダー / ナビ
   ================================================================== */

.site-header__inner {
	flex-wrap: wrap;
}

/* 14px×1.8 ＋ 上下10px ＝ 45px。指で押せる高さを本文サイズのまま作る。 */
.site-nav a {
	display: inline-block;
	padding-block: 10px;
	color: var(--c-text);
	text-decoration: none;
}

.site-nav a:hover {
	color: var(--c-accent);
	text-decoration: underline;
}

.site-nav a[aria-current] {
	color: var(--c-accent);
	font-weight: 700;
}

/*
 * 600px 以下ではナビだけ2段目に落とす。
 * サイト名と言語切替は1段目に残したいので order で最後に送る。
 */
@media (max-width: 600px) {
	.site-nav {
		order: 3;
		flex: 1 0 100%;
		padding-bottom: var(--space-1);
		border-top: 1px solid var(--c-border);
	}

	.site-nav ul {
		gap: var(--space-4);
	}
}

/* ==================================================================
   5. パンくず
   ================================================================== */

/*
 * 480px では末尾（現在ページ）を隠す。4階層あると375pxで3行になり、
 * h1 が1画面目から押し出される。末尾は直後の h1 と同じ文字列なので
 * 読者が失う情報はない。DOM には残るので構造化データ側は変わらない。
 */
@media (max-width: 480px) {
	.breadcrumbs__item:last-child {
		display: none;
	}
}

/* ==================================================================
   6. ヒーロー：主張バッジ → 事実の行
   ================================================================== */

/*
 * ✓つきの3バッジ（自分で測った数字だけ載せる…）は書いた側の宣言で、
 * 読者からは検証できない。同じ面積に **基準線・計測台数・最終計測日** を
 * 置くと、1画面目で「この数字は信用していいのか」に答えられる。
 * .hero__points のCSSは残してあるので、両方を並行して置ける。
 */
.hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	margin: var(--space-4) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--c-border);
	list-style: none;
	font-size: var(--fs-sm);
}

.hero__fact {
	display: grid;
	gap: 2px;
}

.hero__fact-label {
	color: var(--c-text-muted);
	font-size: 0.75rem;
}

.hero__fact-value {
	font-weight: 700;
	font-size: var(--fs-base);
}

.hero__lead {
	max-width: var(--measure);
}

@media (max-width: 480px) {
	.hero__facts {
		gap: var(--space-3);
	}

	/* 3項目を2列に。1列だと事実の行だけで1画面を使ってしまう。 */
	.hero__fact {
		flex: 1 1 40%;
	}
}

/* ==================================================================
   7. 実測ハイライト（新規・このサイト唯一の武器）
   ================================================================== */

/*
 * 構成は「基準線の1行」＋「各社の維持率カード」。
 *
 * 基準線を上に独立して置くのは、以降の % が何に対する % なのかを
 * ブロック内で完結させるため。カードごとに「VPNなし比」と書かなくてよくなる。
 *
 * カードは 数字（大）／評価ラベル／絶対値（小）／計測日 の4点セット。
 * 数字だけでは初心者に良し悪しが伝わらず、絶対値だけでは
 * 「測った側の回線が速いだけ」の話になる。
 */

.measured {
	margin-bottom: var(--space-6);
}

.measured__baseline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	background: var(--c-bg-subtle);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
}

.measured__baseline-label {
	color: var(--c-text-muted);
	word-break: keep-all;
}

.measured__baseline-value {
	font-weight: 700;
	font-size: var(--fs-base);
}

.measured__baseline-note {
	color: var(--c-text-muted);
}

/*
 * 3枚固定にしない。auto-fit にしておけば計測済みが2社でも4社でも
 * 崩れず、記事側の都度の手当てが要らない。
 */
.measured__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.measured__item {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-4) var(--space-4);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	background: var(--c-bg);
}

.measured__name {
	margin: 0;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.5;
}

.measured__rate {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* 単位は数字より2段小さく。%が数字と同じ大きさだと桁が読み取りにくい。 */
.measured__unit {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--c-text-muted);
}

.measured__label {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/*
 * 評価は色だけで示さない。色覚と白黒印刷の両方で読めるよう文字を持たせる。
 * 地色つきにするのは、数字の直下で「良し悪し」を一目で切り分けたい箇所だけ。
 */
.measured__grade {
	justify-self: start;
	padding: 2px var(--space-2);
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
}

.measured__grade--good {
	background: var(--c-bg-good);
	color: var(--c-good);
}

.measured__grade--fair {
	background: var(--c-bg-warn);
	color: var(--c-warn);
}

.measured__grade--low {
	background: var(--c-bg-subtle);
	color: var(--c-text-muted);
}

.measured__abs,
.measured__date {
	margin: 0;
	font-size: 0.75rem;
	color: var(--c-text-muted);
	line-height: 1.6;
}

.measured__abs {
	padding-top: var(--space-1);
	border-top: 1px solid var(--c-border);
}

/* 未計測を空欄にしない。「まだ測っていない」と書くほうが方針の説明になる。 */
.measured__item--pending .measured__rate {
	color: var(--c-text-muted);
	font-weight: 400;
}

.measured__note {
	margin: var(--space-3) 0 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

@media (max-width: 480px) {
	:root {
		--fs-3xl: 2rem;
	}

	.measured__item {
		padding: var(--space-3);
	}
}

/* ==================================================================
   8. トップの記事カード
   ================================================================== */

/*
 * 今のカードは タイトル＋抜粋 だけで、比較・レビュー・ガイドの
 * どれなのかがカード内で分からない（セクション見出しを覚えていないと分からない）。
 * 種別と更新日を1行足す。抜粋は2行で切る。
 */
.card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	margin-bottom: var(--space-2);
	font-size: 0.75rem;
	color: var(--c-text-muted);
}

/*
 * バッジは1行の箱として確定させる。
 * flex item は blockify されるので inline-flex を明示する。
 * ここだけ nowrap を使うのは、keep-all では「・」が改行位置として扱われ
 * （Chrome）、「比較・実測3社」のようなラベルが2行に折れて枠から溢れるため。
 * バッジは短いので nowrap でも列を押し広げない。
 */
.postcard__type {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	white-space: nowrap;
	line-height: 1.5;
	padding: 1px var(--space-2);
	border: 1px solid var(--c-border);
	border-radius: 4px;
	background: var(--c-bg-subtle);
	font-weight: 700;
}

/* 実測値を含む記事だけ差を付ける。全部に付けると差が消える。 */
.postcard__type--measured {
	border-color: var(--c-good);
	background: var(--c-bg-good);
	color: var(--c-good);
}

/* タイトルは3行、抜粋は2行で切る。カードの高さが揃い、視線が横に流れる。 */
.card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* カード全体が押せることを、枠と影ではなく境界の色で示す。 */
.card {
	transition: border-color 0.12s ease;
}

.card:hover {
	border-color: var(--c-accent);
}

.card:hover .card__title {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 「すべて見る」を右端の小さな文字のままにしない。押せる幅を持たせる。 */
.section__more a {
	display: inline-block;
	padding: var(--space-2) 0;
	text-decoration: none;
}

.section__more a:hover {
	text-decoration: underline;
}

.section__more a::after {
	content: "\2192";
	margin-left: var(--space-1);
}

/* 用途から探すのタイル。押せる高さを確保する。 */
.genre-list__item a {
	min-height: 48px;
	padding: var(--space-3);
}

/* ==================================================================
   9. 記事本文の組み
   ================================================================== */

/*
 * 行長。720pxコンテナだと日本語で50字近く入り、読み返しで行を見失う。
 * コンテナは触らず、本文の要素だけ 38em に制限する
 * （表と図は下で除外して、これまで通りコンテナ幅を使える）。
 */
.article__body > :is(p, ul, ol, h2, h3, blockquote, .toc, .disclosure) {
	max-width: var(--measure);
}

/* 見出しの前後。上に空きを作り、下は詰める。段落と見出しの所属を目で分ける。 */
.article__body > :is(h2, h3) {
	margin-top: var(--space-5);
	margin-bottom: var(--space-3);
}

.article__body > :is(h2, h3) + * {
	margin-top: 0;
}

.article__body > p {
	line-height: 1.9;
}

/* リストの行間。本文と同じ 1.8 だと項目の切れ目が見えない。 */
.article__body :is(ul, ol) {
	padding-left: 1.5em;
}

.article__body li + li {
	margin-top: var(--space-2);
}

/* 引用。左罫線1本だけ。地色を付けると注意書きブロックと見分けが付かなくなる。 */
.article__body blockquote {
	margin-inline: 0;
	padding-left: var(--space-3);
	border-left: 3px solid var(--c-border);
	color: var(--c-text-muted);
}

/*
 * 本文中の表。compare-wrap を使わない小さな表がはみ出していた。
 * 横スクロールさせ、キーボードでも届くよう tabindex="0" を付けて使う。
 */
.article__scroll {
	position: relative;
	overflow-x: auto;
	margin-block: var(--space-3);
	/* スクロールできることを右端の陰で示す。 */
	background:
		linear-gradient(to right, var(--c-bg), transparent) left / 24px 100% no-repeat,
		linear-gradient(to left, var(--c-bg), transparent) right / 24px 100% no-repeat,
		linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent) left / 8px 100% no-repeat,
		linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent) right / 8px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

.article__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.article__body :is(th, td) {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	vertical-align: top;
}

.article__body thead th {
	background: var(--c-bg-subtle);
	border-bottom: 2px solid var(--c-border);
	font-size: 0.8125rem;
}

/* 更新日を本文の頭で見せる。実測を売るサイトで「いつの数字か」は本文の一部。 */
.article__meta time {
	font-variant-numeric: tabular-nums;
}

/* ==================================================================
   10. 目次
   ================================================================== */

/*
 * <details> にして畳めるようにする。長い記事では目次が1画面を占め、
 * 本文の1行目までスクロールが必要になっていた。
 * open 属性を付けておけば、JSなしで既定は開いたまま。
 */
.toc[open] .toc__heading {
	margin-bottom: var(--space-3);
}

.toc__heading {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	list-style: none;
	padding-block: var(--space-1);
}

.toc__heading::-webkit-details-marker {
	display: none;
}

/* 開閉の三角。閉じているときだけ回す。 */
.toc__heading::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-block: 4px solid transparent;
	transform: rotate(90deg);
	transition: transform 0.12s ease;
}

.toc:not([open]) .toc__heading::before {
	transform: rotate(0deg);
}

.toc__item a {
	display: inline-block;
	padding-block: 3px;
}

/* ==================================================================
   11. CTA
   ================================================================== */

/*
 * 押せる高さを 44px 確保する。今の .cta は 8px+8px+29px で 45px あるが、
 * .cta--sm は 4px+4px+25px = 33px で表内の主要動線がこれになっていた。
 */
.cta--sm {
	padding: var(--space-2) var(--space-3);
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

.cta--lg {
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-lg);
}

/*
 * CTAの直後に、遷移先で何が起きるかを1行置く場所。
 * ボタン文言を長くするより、押す前の不安を短い注記で消したほうが効く。
 */
.cta-note {
	margin: var(--space-2) 0 0;
	font-size: 0.75rem;
	color: var(--c-text-muted);
	text-align: center;
}

.tool-cta {
	max-width: var(--measure);
}

/* ==================================================================
   12. フッター
   ================================================================== */

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-4);
}

.site-footer__block {
	display: grid;
	gap: var(--space-2);
	align-content: start;
}

.site-footer__heading {
	margin: 0;
	color: var(--c-text);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.site-footer ul {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer a {
	display: inline-block;
	padding-block: var(--space-1);
	color: var(--c-text);
}

.site-footer__copyright {
	margin: var(--space-4) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--c-border);
	font-size: 0.75rem;
}

/* 全サイト共通の固定ページ（運営者情報・プライバシーポリシー・問い合わせ）。横に並べて折り返す。 */
.site-footer ul.site-footer__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-3);
	margin-top: var(--space-2);
}

/* 親サイトの入口（template-parts/network-hub.php）。ジャンル名の下に説明を置く。 */
.genre-list--sites {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.genre-list--sites .genre-list__item a {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--space-1);
	height: 100%;
}

.genre-list--sites .genre-list__name {
	font-weight: 700;
}

.genre-list__desc {
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

/* ==================================================================
   13. 動きを減らす設定への追従
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==================================================================
   14. 目的から選ぶ（ブロック2）
   ================================================================== */

/*
 * 既存の .genre-list（タクソノミー＝文字起こし/海外動画）に代えて、
 * トップの2番目には**サジェストの語に合わせた目的**を置く。
 * 「安い」「ネットフリックス」「中国」「無料」は実際に打たれている語なので、
 * 分岐のラベルをその語のままにすると、検索語と着地点が一致する。
 *
 * ランキングの1位を作らずに結論を先に出せるのは、この分岐だけ。
 */
.goals {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.goals__item a {
	display: grid;
	gap: var(--space-1);
	align-content: start;
	min-height: 88px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.12s ease;
}

.goals__item a:hover {
	border-color: var(--c-accent);
}

.goals__item a:hover .goals__label {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.goals__label {
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.5;
}

/* 分岐の下に「何で決まるか」を1行。用途で分ける根拠を分岐の中に持たせる。 */
.goals__basis {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	line-height: 1.7;
}

/* ==================================================================
   15. 比較表：維持率・基準線・返金保証
   ================================================================== */

/*
 * 維持率は「%＋評価ラベル」の2段。数字だけでは初心者に良し悪しが伝わらない。
 * 縦に積むのは、900px以下のカードでも同じ見え方になるため
 * （横並びにすると data-label と競合して3つ並びになる）。
 */
.compare__rate {
	display: grid;
	gap: 2px;
	justify-items: end;
}

.compare__rate-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.compare__rate-grade {
	font-size: 0.75rem;
	word-break: keep-all;
}

.compare__rate-grade--good { color: var(--c-good); }
.compare__rate-grade--fair { color: var(--c-warn); }
.compare__rate-grade--low  { color: var(--c-text-muted); }

/*
 * 絶対値と計測日は維持率の下に小さく。主役を入れ替えない。
 *
 * 2要素に分けて縦に積むのは、1要素で「64.9 Mbps・08-31」と書くと
 * 表モードの狭い列（88px）で「・」が改行位置になり、
 * 「64.9 Mbps・08-」「31」と**日付が割れる**ため（Chrome）。
 * 数字の信用が主題の表なので、ここは分断させない。
 */
.compare__rate-abs,
.compare__rate-date {
	font-size: 0.75rem;
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
}

/* 台数セル。「無制限」が語中で折れるのを防ぐ。 */
.compare__devices {
	display: inline-block;
}

/*
 * 基準線の行（VPNなし・100%）。
 * 表の1行目に置くと、以降の%が何に対する%かを表の中で説明しなくてよくなる。
 * 地色を敷いて「これは商品ではない」ことを示し、CTA列は空にする。
 */
.compare__row--baseline {
	background: var(--c-bg-subtle);
}

.compare__row--baseline .compare__name {
	font-weight: 700;
}

.compare__row--baseline .compare__rate-value {
	color: var(--c-text-muted);
}

/* 900px以下のカードでは、基準線だけカードにせず1行の帯で出す。 */
@media (max-width: 900px) {
	.compare__row--baseline {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-1) var(--space-3);
		margin-bottom: var(--space-3);
		padding: var(--space-3);
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
	}

	.compare__row--baseline td {
		padding: 0;
		border: 0;
	}

	/* 空のセルはカードでは行を作ってしまう。 */
	.compare__row--baseline td:empty {
		display: none;
	}

	.compare__row--baseline .compare__rate {
		justify-items: start;
	}
}

/*
 * CTAの直下に返金保証。VPNの購入障壁は「合わなかったら損をする」に集まるので、
 * ボタン文言を長くするより、日数を数字で出すほうが効く。
 * データに日数が無い行では要素ごと出さない（デザイン側で埋めない）。
 */
.compare__refund {
	display: block;
	margin-top: var(--space-1);
	font-size: 0.75rem;
	color: var(--c-text-muted);
	text-align: center;
	word-break: keep-all;
}

/* ==================================================================
   16. 実効速度の計算機（.speedcalc）
   ================================================================== */

/*
 * 唯一の「使う」場所。置き場所は**実測ハイライトの直後**を提案する。
 * 維持率を見た読者の次の問いは「自分の環境でも同じか」で、
 * 同じ画面で答えられるのはここだけ。比較表より前に置くと、
 * 表を読むときには既に自分の回線の数字が頭にある状態になる。
 *
 * 入力は1つ。JSはインライン数行（CHANGES.md に全文）。
 */
.speedcalc {
	padding: var(--space-4);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	background: var(--c-bg-subtle);
}

.speedcalc__title {
	margin: 0 0 var(--space-2);
	padding: 0;
	border: 0;
	font-size: var(--fs-xl);
}

.speedcalc__lead {
	margin: 0 0 var(--space-3);
	max-width: var(--measure);
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}

.speedcalc__field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.speedcalc__label {
	font-weight: 700;
	word-break: keep-all;
}

/*
 * 入力欄。幅は文字数ではなく ch で決める（4言語で桁数は変わらない）。
 * 高さ48pxは指で押せる下限。16px を下回らせないのは、
 * iOS が16px未満の入力でズームするため。
 */
/*
 * 幅の決め方。
 *
 * number のスピナーは内側の文字領域を約14px食うので、ch で幅を決めても
 * 実際に使える桁数が足りない（16px+16pxのパディングと合わせて、9ch でも
 * 文字に使えるのは約46px＝3桁分。光1Gbpsの読者が打つ「1000」で切れる）。
 *
 * スピナーを消して（値は上下キーで動くので操作は失われない）
 * パディングを8pxに落とし、10000 まで入る 11ch を確保する。
 */
.speedcalc__input {
	-moz-appearance: textfield;
	appearance: textfield;
	width: 11ch;
	min-height: 48px;
	padding: var(--space-2);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	background: var(--c-bg);
	color: var(--c-text);
	font-family: inherit;
	font-size: var(--fs-base);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.speedcalc__input::-webkit-outer-spin-button,
.speedcalc__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.speedcalc__unit {
	color: var(--c-text-muted);
}

.speedcalc__hint {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.75rem;
	color: var(--c-text-muted);
}

.speedcalc__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-border);
}

/*
 * 1行3値（名前／維持率／見込み速度）。
 * 375px でも3値を1行に収められるよう、名前だけ可変幅にする。
 */
.speedcalc__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: var(--space-2) var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--c-border);
}

.speedcalc__name {
	font-weight: 700;
	word-break: keep-all;
}

.speedcalc__rate {
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	word-break: keep-all;
}

/* 出力。ここだけ数字を大きくする。読者が見に来た1つの値。 */
.speedcalc__out {
	min-width: 6.5ch;
	font-size: var(--fs-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	word-break: keep-all;
}

.speedcalc__note {
	margin: var(--space-3) 0 0;
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--c-text-muted);
}

/*
 * 以下2つは、デザインが見たスナップショットには無かった実装ぶんの引き継ぎ。
 *
 * 上下の余白：デザイン側の計算機は .section の中に置かれる前提だが、
 * [speed_calc] は記事本文にも置く。本文では .section が付かないので、
 * 前後の段落とくっつかないよう自分で持たせる。
 *
 * __empty：全社が未計測のときに出す1行。表を出さない代わりの説明で、
 * 本文と同じ濃さで出すと「本文の続き」に見える。
 */
.speedcalc {
	margin-block: var(--space-5);
}

.speedcalc__empty {
	color: var(--c-text-muted);
}

/* ==================================================================
   17. 計測のしかた（ブロック5）／悩み別（6）／VPNとは（7）
   ================================================================== */

/*
 * 計測のしかたは3行だけ。ここで方法論を長く書くと本題に着く前に離脱する。
 * 番号を振るのは、手順そのものが「再現できる」ことの表明になるため。
 */
.method {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-3);
	margin: 0 0 var(--space-3);
	padding: 0;
	list-style: none;
	counter-reset: method;
}

.method__item {
	display: grid;
	gap: var(--space-1);
	align-content: start;
	padding-top: var(--space-3);
	border-top: 2px solid var(--c-border);
	counter-increment: method;
}

.method__item::before {
	content: counter(method);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
}

.method__label {
	font-weight: 700;
	line-height: 1.6;
}

.method__body {
	font-size: var(--fs-sm);
	line-height: 1.8;
	color: var(--c-text-muted);
}

/*
 * 悩み別ガイド。「遅くなった」「繋がらない」を入口にする。
 * 疑問文をそのままリンクにするのは、検索語がそのまま疑問文で打たれるため。
 */
.troubles {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-border);
}

.troubles__item {
	border-bottom: 1px solid var(--c-border);
}

.troubles__item a {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-3) 0;
	color: inherit;
	text-decoration: none;
}

.troubles__item a:hover .troubles__q {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.troubles__q {
	font-weight: 700;
	line-height: 1.6;
}

.troubles__a {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	line-height: 1.7;
}

/*
 * VPNとは（初心者の受け皿）。検索の最多入口なので置くが、
 * トップで説明し切らない。1段落＋用語3つに留めて記事へ送る。
 */
.primer {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}

.primer__body {
	margin: 0;
	max-width: var(--measure);
	line-height: 1.9;
}

.primer__terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-3);
	margin: 0;
}

/*
 * 専門語の初出説明。<dl> で組むのは、語と説明の対応が
 * 読み上げでも保たれるため。
 */
.primer__term {
	font-weight: 700;
	font-size: var(--fs-sm);
}

.primer__desc {
	margin: 2px 0 0;
	font-size: var(--fs-sm);
	line-height: 1.7;
	color: var(--c-text-muted);
}

/*
 * 広告素材の枠（[tool_banner]）。
 *
 * ASPのバナーは幅が固定（468x60 など）で来るので、はみ出さないことだけを面倒みる。
 * 中の見た目には手を出さない——素材はいつ差し替わるか分からず、こちらの CSS が
 * 特定の寸法を前提にしていると、差し替えた日に崩れる。
 */
.tool-banner {
	margin: var(--space-5) 0;
}

.tool-banner--center {
	text-align: center;
}

.tool-banner img {
	max-width: 100%;
	height: auto;
}

/* 素材が無くてテキストのCTAに落ちたとき、ボタンが行いっぱいに伸びないようにする。 */
.tool-banner .cta {
	display: inline-block;
}

/* ==================================================================
   デザイン v2（2026-09-11）：屋号「比較チェック」とジャンルの差し色

   5ジャンルを1ドメインで持つ構成になったので、VPN時代の見た目（青1色・
   文字だけ）から作り直した。ここより上の宣言を**後勝ちで**上書きしている。
   上を編集するときは、ここで打ち消していないかを先に見ること。

   - 色：ロゴと入口はブランドの緑（--c-brand）。各サイトは .genre-<ジャンル>
     が差し色（--c-accent / -dark / -soft）を決め、リンク・見出し・カードに効く
   - 画像ファイルは増やしていない。飾りは CSS のグラデーションとインラインSVG
   - 数字・文言はここに書かない（config と tool のデータから出る）
   ================================================================== */

/* ---------- 1. トークン：影・角丸・蛍光ペン・ジャンルの差し色 ---------- */

:root {
	--c-ink: #14202b;          /* フッターとネットワークの帯の地 */
	--c-text-soft: #3d4652;    /* 副題・リード。本文より一段だけ弱く */
	--c-marker: #fff3b5;       /* 本文の太字に引く蛍光ペン */
	--radius-lg: 14px;
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07);
	--shadow-md: 0 10px 28px -12px rgba(16, 24, 40, 0.22);
}

/*
 * ジャンルの差し色。白地の文字・白文字の地のどちらでも 4.5:1 以上（2026-09-11 に計算）。
 * 橙は申し込みボタン（--c-cta）専用なので、ジャンルの色には使わない。
 * tools/brand/make-images.php がこの行の --c-accent を読んでジャンルの画像を描く（1行1ジャンルを崩さない）。
 */
.genre-beauty { --c-accent: #b3245e; --c-accent-dark: #8e1a4a; --c-accent-soft: #fcf0f5; }
.genre-reuse  { --c-accent: #2f7a3a; --c-accent-dark: #235c2c; --c-accent-soft: #edf7ee; }
.genre-job    { --c-accent: #4f46c8; --c-accent-dark: #3c35a3; --c-accent-soft: #f0effc; }
.genre-card   { --c-accent: #1f5fbf; --c-accent-dark: #174a96; --c-accent-soft: #edf3fc; }
.genre-vpn    { --c-accent: #6d3fc0; --c-accent-dark: #55309a; --c-accent-soft: #f4effc; }
.genre-mobile { --c-accent: #0369a1; --c-accent-dark: #075985; --c-accent-soft: #eaf5fb; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/*
 * 日本語の改行位置。
 *
 * 見出しは文節で折り（auto-phrase：Chrome/Edge 119+。<html lang="ja"> のときだけ効く）、
 * 行の長さをそろえる（balance）。何も指定しないと「…条件で選／ぶ」のように
 * 1文字だけ次の行に落ちる（2026-09-11 に実機で出た）。
 * 段落は最終行が1〜2文字にならないようにだけする（pretty）。
 * 対応していないブラウザは今までどおり折れるだけで、崩れはしない。
 */
:is(.hero__title, .hero__lead, .article__title, .card__title, .section__title, .page-header__title, .site-card__name, .site-card__desc, .site-footer__tagline, .article__body > :is(h2, h3), .article-summary > h2) {
	word-break: auto-phrase;
	text-wrap: balance;
}

/* タイルの名前は文節で折るだけ。行をそろえると幅の半分で折れて「汗やに／おい」になった。 */
.genre-list__name {
	word-break: auto-phrase;
}

:is(.article__body > p, .article__body li, .card__excerpt) {
	text-wrap: pretty;
}

/* ---------- 2. ボタン・チップ ---------- */

/* サイト内の導線（記事へ進む）。申し込みの .cta（橙）とは色で分ける。 */
.button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--c-accent);
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 8px 20px -10px var(--c-accent);
	transition: background-color 0.15s ease;
}

.button::after {
	content: "\2192";
	transition: transform 0.15s ease;
}

.button:hover {
	background: var(--c-accent-dark);
	color: #fff;
}

.button:hover::after {
	transform: translateX(3px);
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border: 1px solid var(--c-border);
	border-radius: 999px;
	background: var(--c-bg);
	color: var(--c-text-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
}

a.chip:hover {
	border-color: var(--c-accent);
	color: var(--c-accent-dark);
}

.chip--solid {
	border-color: transparent;
	background: var(--c-accent-soft);
	color: var(--c-accent-dark);
}

/* ---------- 3. ネットワークの帯（マルチサイトのときだけ出る） ---------- */

.network-bar {
	background: var(--c-ink);
	color: #c9d3dc;
	font-size: 0.8125rem;
}

/* 狭い画面では横に流す。サイトが増えても2段にしない（ヘッダーが1画面を食う）。 */
.network-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: 38px;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}

.network-bar__inner::-webkit-scrollbar {
	display: none;
}

.network-bar__home {
	flex: none;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.network-bar__list {
	display: flex;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.network-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-block: 8px;
	color: #c9d3dc;
	text-decoration: none;
}

/* 各サイトの差し色を点で。文字は白系のまま（濃い地に差し色の文字は読めない）。 */
.network-bar__link::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.network-bar a:hover,
.network-bar__link[aria-current] {
	color: #fff;
}

.network-bar__link[aria-current] {
	font-weight: 700;
}

/* ---------- 4. ヘッダー ---------- */

.site-header {
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
	justify-content: flex-start;
	min-height: 68px;
	gap: var(--space-2) var(--space-4);
}

/*
 * メニューは右寄せで屋号と同じ段に置く。以前は 600px 以下でメニューだけ3段目に落としていたが、
 * 項目が1〜3個（ガイド・比較・体験レポート）なので、入らないときだけ自然に折り返せば足りる。
 */
.site-nav {
	margin-left: auto;
}

@media (max-width: 600px) {
	.site-nav {
		order: 0;
		flex: 0 1 auto;
		padding-bottom: 0;
		border-top: 0;
	}
}

.site-header__title a {
	gap: 10px;
}

/* ロゴは屋号の色で固定する。ジャンルで色が変わると別のサイトに見える。 */
.site-logo {
	width: 32px;
	height: 32px;
	color: var(--c-brand);
}

.site-header__brand {
	color: var(--c-text);
	font-size: 1.1875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.site-header__genre {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--c-accent-soft);
	color: var(--c-accent-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.site-nav ul {
	gap: var(--space-4);
	font-size: 0.9375rem;
}

.site-nav a {
	font-weight: 700;
}

.site-nav a:hover {
	color: var(--c-accent-dark);
	text-decoration: none;
}

.site-nav a[aria-current] {
	color: var(--c-accent-dark);
	box-shadow: inset 0 -3px 0 var(--c-accent);
}

.lang-switcher__button {
	border-radius: 999px;
	font-weight: 700;
}

@media (max-width: 480px) {
	.site-header__inner {
		min-height: 60px;
	}

	.site-logo {
		width: 28px;
		height: 28px;
	}

	.site-header__brand {
		font-size: 1.0625rem;
	}

	.site-header__genre {
		padding: 2px 8px;
		font-size: 0.75rem;
	}
}

/* ---------- 5. ヒーロー ---------- */

/*
 * 地は差し色の淡色から白へ。上に表の罫線の地紋を薄く敷く＝「条件を同じ形にそろえて並べる」。
 * 画像は使わない（グラデーションだけで描く）。
 */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: 56px 64px;
	border-bottom: 0;
	background: linear-gradient(160deg, var(--c-accent-soft) 0%, var(--c-bg) 78%);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(20, 32, 43, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(20, 32, 43, 0.05) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 90%);
	mask-image: linear-gradient(to bottom, #000 20%, transparent 90%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-5);
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--space-3);
	padding: 5px 14px 5px 10px;
	border-radius: 999px;
	background: var(--c-bg);
	color: var(--c-accent-dark);
	font-size: 0.875rem;
	font-weight: 700;
	box-shadow: var(--shadow-sm);
}

.hero__eyebrow .genre-icon {
	width: 20px;
	height: 20px;
	color: var(--c-accent);
}

.hero__title {
	font-size: clamp(1.625rem, 1.05rem + 2.3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.hero__lead {
	max-width: 34em;
	margin-top: var(--space-3);
	color: var(--c-text-soft);
	font-size: 1.0625rem;
	line-height: 1.85;
}

.hero__points {
	gap: 10px 12px;
	margin-top: var(--space-4);
}

.hero__point {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 8px;
	border: 1px solid rgba(20, 32, 43, 0.08);
	border-radius: 999px;
	background: var(--c-bg);
	font-size: 0.875rem;
	font-weight: 700;
	box-shadow: var(--shadow-sm);
}

/* チェック印を差し色の丸に。アイコンフォントも画像も足さない。 */
.hero__point::before {
	content: "\2713";
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 50%;
	background: var(--c-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 900;
	line-height: 1;
}

.hero__more {
	margin-top: var(--space-5);
}

/* 右の絵（template-parts/hero-art.php）。色はここで決める。 */
.hero-art {
	display: block;
	width: 340px;
	max-width: 100%;
	height: auto;
}

.hero-art__shadow { fill: var(--c-accent); opacity: 0.12; }
.hero-art__card   { fill: var(--c-bg); stroke: rgba(20, 32, 43, 0.08); stroke-width: 1.5; }
.hero-art__head   { fill: var(--c-accent-soft); }
.hero-art__label  { fill: var(--c-accent); opacity: 0.35; }
.hero-art__check  { fill: var(--c-accent); }
.hero-art__tick   { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero-art__bar    { fill: #e3e7ec; }
.hero-art__bar--strong { fill: var(--c-accent); opacity: 0.5; }
.hero-art__rule   { stroke: #eef1f4; stroke-width: 1.5; }

@media (max-width: 900px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero-art {
		display: none;
	}
}

/* 狭い画面では丸いバッジをやめ、チェック付きの箇条書きに（1画面目を記事一覧に残す）。 */
@media (max-width: 480px) {
	.hero {
		padding-block: 36px 40px;
	}

	.hero__lead {
		font-size: 1rem;
	}

	.hero__points {
		display: grid;
		gap: 8px;
	}

	.hero__point {
		display: flex;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.hero__more {
		margin-top: var(--space-4);
	}
}

/* ---------- 6. セクション・用途のタイル・記事カード ---------- */

.section {
	margin-bottom: 72px;
}

.section__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 var(--space-4);
	padding: 0;
	border: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 800;
}

.section__title::before {
	content: "";
	flex: none;
	width: 6px;
	height: 1.15em;
	border-radius: 3px;
	background: var(--c-accent);
}

.genre-list {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.genre-list__item a {
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 14px 16px 14px 18px;
	border-radius: 12px;
	background: var(--c-bg);
	box-shadow: var(--shadow-sm);
	font-weight: 700;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.genre-list__item a:hover {
	transform: translateY(-1px);
	border-color: var(--c-accent);
	box-shadow: var(--shadow-md);
	color: var(--c-text);
}

/*
 * 名前は折り返してよい。keep-all のままだと空白の無い日本語が1語扱いになり、
 * 長い用途名（「わきの汗やにおいを相談したい」）がタイルからはみ出して件数に重なった（2026-09-11）。
 */
.genre-list__name {
	min-width: 0;
	word-break: normal;
	overflow-wrap: anywhere;
}

.genre-list__count {
	flex: none;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--c-accent-soft);
	color: var(--c-accent-dark);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.cards {
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 20px;
}

.card {
	position: relative;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* 上辺に差し色の帯。どのジャンルのカードかが並びの中で分かる。 */
.card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--c-accent);
}

.card:hover {
	transform: translateY(-2px);
	border-color: var(--c-border);
	box-shadow: var(--shadow-md);
}

.card__link {
	height: 100%;
}

.card__body {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px 20px 18px;
}

/* 読み進める矢印。文言は増やさない。 */
.card__body::after {
	content: "\2192";
	align-self: flex-end;
	margin-top: auto;
	padding-top: var(--space-2);
	color: var(--c-accent);
	font-weight: 700;
	transition: transform 0.15s ease;
}

.card:hover .card__body::after {
	transform: translateX(3px);
}

.card__meta {
	margin-bottom: 10px;
}

.postcard__type {
	padding: 2px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--c-accent-soft);
	color: var(--c-accent-dark);
}

.card__title {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
	margin-bottom: 10px;
	font-size: 1.0625rem;
	line-height: 1.55;
}

.card:hover .card__title {
	text-decoration: none;
}

.card__title-main {
	display: block;
	font-weight: 800;
}

.card:hover .card__title-main {
	color: var(--c-accent-dark);
}

.card__title-sub {
	display: block;
	margin-top: 4px;
	color: var(--c-text-soft);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.6;
}

.section__more {
	margin-top: var(--space-4);
	text-align: center;
}

.section__more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 24px;
	border: 1px solid var(--c-border);
	border-radius: 999px;
	background: var(--c-bg);
	color: var(--c-text);
	font-size: 0.875rem;
	font-weight: 700;
}

.section__more a:hover {
	border-color: var(--c-accent);
	color: var(--c-accent-dark);
	text-decoration: none;
}

.page-header {
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--c-border);
}

.page-header__title {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 800;
}

/* ---------- 7. 親サイトの入口：ジャンルのサイトのカード ---------- */

.site-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-card__link {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	height: 100%;
	padding: 26px 22px 22px;
	overflow: hidden;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-bg);
	box-shadow: var(--shadow-sm);
	color: var(--c-text);
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.site-card__link::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--c-accent);
}

.site-card__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	color: var(--c-text);
}

.site-card__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--c-accent-soft);
	color: var(--c-accent);
}

.site-card__icon .genre-icon {
	width: 28px;
	height: 28px;
}

.site-card__name {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.5;
}

.site-card__name::after {
	content: "\2192";
	margin-left: 8px;
	color: var(--c-accent);
}

.site-card__desc {
	color: var(--c-text-muted);
	font-size: 0.875rem;
	line-height: 1.75;
}

/* 入口の「比べたページ」。ラベルはサイト名（宅配買取・不動産買取 など）で長いので、関連記事より幅を取る。 */
.hub-articles .related__type {
	min-width: 11em;
	color: var(--c-accent-dark);
	font-weight: 700;
}

/* ---------- 8. 記事：見出しまわり ---------- */

.breadcrumbs {
	font-size: 0.8125rem;
}

.breadcrumbs a {
	color: var(--c-text-muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--c-accent-dark);
	text-decoration: underline;
}

.article__header {
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--c-border);
}

.article__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--space-3);
}

.article__kicker:empty {
	display: none;
}

.article__title {
	margin: 0 0 var(--space-3);
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.article__title-main {
	display: block;
}

.article__title-sub {
	display: block;
	margin-top: 8px;
	color: var(--c-text-soft);
	font-size: 0.6em;
	font-weight: 700;
	line-height: 1.55;
}

.article__meta {
	gap: 4px 16px;
	margin-bottom: 0;
	font-size: 0.8125rem;
}

.disclosure {
	border-radius: 10px;
	background: #f8f9fb;
}

/* ---------- 9. 目次 ---------- */

/*
 * 見出し帯つきのカード。以前の三角（▸）は開閉できるように見えて開閉しなかったので外した
 * （目次は <nav> で、<details> ではない）。
 */
.toc {
	margin: var(--space-4) 0 var(--space-5);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-bg);
	box-shadow: var(--shadow-sm);
}

.toc__heading,
.toc[open] .toc__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 20px;
	background: var(--c-accent-soft);
	color: var(--c-accent-dark);
	font-size: 0.9375rem;
	font-weight: 800;
	cursor: default;
}

/* 箇条書きの記号（3本線）。画像を使わずグラデーションで描く。 */
.toc__heading::before,
.toc:not([open]) .toc__heading::before {
	content: "";
	width: 16px;
	height: 12px;
	border: 0;
	background:
		linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
		linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
		linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
	transform: none;
}

.toc__list {
	margin: 0;
	padding: 14px 20px 16px;
	counter-reset: toc;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.toc__list > .toc__item {
	position: relative;
	padding-left: 34px;
	counter-increment: toc;
}

.toc__list > .toc__item + .toc__item {
	margin-top: 2px;
}

.toc__list > .toc__item::before {
	content: counter(toc);
	position: absolute;
	top: 7px;
	left: 0;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--c-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.toc__item a {
	display: inline-block;
	padding-block: 4px;
	color: var(--c-text);
	text-decoration: none;
}

.toc__item a:hover {
	color: var(--c-accent-dark);
	text-decoration: underline;
}

.toc__sub {
	margin: 2px 0 6px;
	padding-left: 12px;
	border-left: 2px solid var(--c-accent-soft);
	color: inherit;
	font-size: 0.875rem;
}

.toc__sub a {
	color: var(--c-text-muted);
}

/* ---------- 10. 記事：本文 ---------- */

.article__body > p {
	line-height: 1.95;
}

/* h2 は差し色の淡色の帯＋左に太線。スクロール中に節の頭が遠くから分かる。 */
.article__body > h2 {
	position: relative;
	margin-top: 64px;
	margin-bottom: 20px;
	padding: 14px 18px 14px 24px;
	border: 0;
	border-radius: 12px;
	background: var(--c-accent-soft);
	font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
	font-weight: 800;
	line-height: 1.5;
}

.article__body > h2::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 5px;
	border-radius: 0 4px 4px 0;
	background: var(--c-accent);
}

/* h3 は下線を2色に。左の短い差し色が「この節の中の小見出し」を示す。 */
.article__body > h3 {
	position: relative;
	margin-top: 44px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--c-border);
	font-size: 1.125rem;
	font-weight: 800;
}

.article__body > h3::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 64px;
	height: 2px;
	background: var(--c-accent);
}

.article__body :is(h2, h3)[id] {
	scroll-margin-top: var(--space-5);
}

/* 太字に蛍光ペン。全部は読まない読者が、太字だけ拾って要点をつかめる。 */
.article__body strong {
	background: linear-gradient(transparent 66%, var(--c-marker) 66%);
	font-weight: 700;
}

.article__body li::marker {
	color: var(--c-accent);
}

.article__body ol > li::marker {
	font-weight: 800;
}

.article__body blockquote {
	padding: 12px 16px;
	border-left: 4px solid var(--c-accent);
	border-radius: 0 10px 10px 0;
	background: #f8f9fb;
	color: var(--c-text-soft);
}

.article__body table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--c-border);
	border-radius: 12px;
}

.article__body :is(th, td) {
	padding: 12px 14px;
}

.article__body thead th {
	border-bottom: 1px solid var(--c-border);
	background: var(--c-accent-soft);
	color: var(--c-accent-dark);
}

.article__body tbody tr:nth-child(even) {
	background: #fafbfc;
}

.article__body tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

/* 「先に結論」の囲み（inc/design.php が本文を包む）。 */
.article-summary {
	max-width: var(--measure);
	margin: var(--space-5) 0;
	padding: 20px 24px 22px;
	border: 2px solid var(--c-accent);
	border-radius: var(--radius-lg);
	background: var(--c-bg);
	box-shadow: 0 14px 30px -22px var(--c-accent);
}

.article-summary > h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	color: var(--c-accent-dark);
	font-size: 1.125rem;
	font-weight: 800;
}

.article-summary > h2::before {
	content: "\2713";
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--c-accent);
	color: #fff;
	font-size: 0.875rem;
	line-height: 1;
}

.article-summary > * + * {
	margin-top: 12px;
}

.article-summary :is(ul, ol) {
	margin-bottom: 0;
	padding-left: 1.3em;
}

.article-summary li + li {
	margin-top: 8px;
}

/* ---------- 11. 記事の末尾：関連記事・運営者 ---------- */

.related {
	margin-top: 56px;
}

.related__heading {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.25rem;
	font-weight: 800;
}

.related__heading::before {
	content: "";
	flex: none;
	width: 6px;
	height: 1.15em;
	border-radius: 3px;
	background: var(--c-accent);
}

.related__list {
	display: grid;
	gap: 10px;
	border-top: 0;
}

.related__item {
	border: 1px solid var(--c-border);
	border-radius: 12px;
	background: var(--c-bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.related__item:hover {
	border-color: var(--c-accent);
	box-shadow: var(--shadow-sm);
}

.related__link {
	align-items: center;
	padding: 14px 16px;
}

.related__link::after {
	content: "\2192";
	flex: none;
	margin-left: auto;
	color: var(--c-accent);
	font-weight: 700;
}

.related__type {
	min-width: 0;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--c-accent-soft);
	color: var(--c-accent-dark);
	font-weight: 700;
	white-space: nowrap;
}

.related__title {
	font-size: 0.9375rem;
	font-weight: 700;
}

@media (max-width: 480px) {
	.related__link {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 10px;
		padding: 12px 14px;
	}

	.related__type {
		display: inline-flex;
		margin-bottom: 0;
	}

	.related__title {
		flex: 1 1 100%;
	}

	.related__link::after {
		display: none;
	}
}

.site-author {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-top: 48px;
	padding: 22px 24px;
	border-radius: var(--radius-lg);
	background: #f8f9fb;
}

/* 顔写真の代わりに屋号のマーク（template-parts/logo.php）。 */
.site-author__avatar {
	display: block;
	flex: none;
	line-height: 0;
}

.site-author__avatar .site-logo {
	width: 52px;
	height: 52px;
}

.site-author__body {
	min-width: 0;
}

@media (max-width: 480px) {
	.site-author {
		flex-direction: column;
		gap: 12px;
		padding: 20px;
	}
}

/* ---------- 12. フッター ---------- */

.site-footer {
	margin-top: 56px;
	padding: 48px 0 24px;
	border-top: 0;
	background: var(--c-ink);
	color: #b8c4cf;
	font-size: 0.875rem;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 32px 40px;
}

.site-footer__name {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 800;
}

.site-footer__tagline {
	max-width: 26em;
	margin: 12px 0 0;
	line-height: 1.8;
}

.site-footer__heading {
	margin: 0 0 8px;
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.site-footer ul,
.site-footer ul.site-footer__pages {
	display: grid;
	gap: 2px;
	margin: 0;
}

.site-footer a {
	color: #e6edf3;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a[aria-current] {
	color: #fff;
	text-decoration: underline;
}

.site-footer__copyright {
	margin: 36px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #8b98a5;
}

/* ==================================================================
   記事の組み v3（2026-09-14）：幅・余白・角・内側の余白を1つの規則にそろえる

   直す前に 1280px で測った実物（job/compare/freelance-shikin）：
   - 横幅が4種類あった。広告表記 532px（14px×38em）／段落・目次・結論 608px（16px×38em）／
     見出し帯・計算 688px／比較表 1080px。**箱の右端が3段にずれていた**のが「微妙にずれる」の正体
   - 角丸が 8・10・12・14px の4種類、影が付く箱と付かない箱が混ざっていた
   - 上下の空きが 16・24・40・64px を部品ごとにばらばらに持っていた

   決めたこと（ここより上の宣言は、この節が後勝ちで打ち消す）：
   - **本文の中身は全部、本文カラムと同じ幅（688px）。**行の長さは 16px で43字前後に収まる
     例外は比較表だけで、列が足りないので左右対称に広げる（= 意図した「広い図」として見せる）
   - **上下の空きは3段だけ。**文と文 20px ／部品の前後 40px ／大見出しの前 72px（小見出し 48px）
   - **角は 12px、箱の内側の左右は 24px。**広告表記・目次・結論・見出し帯・引用・計算で同じ。
     箱の中の文字の左端が、どの箱でもそろう
   - 影は使わない。箱は 1px の罫線と地色だけで区切る（影のある箱と無い箱が混ざるのが不統一の元）

   詳細度：`.article .article__body > …`（0,2,0 以上）で書く。上の層の
   `.article__body > :is(h2, h3) + *`（0,1,1）や `.article__body > :is(p, …, .toc)`（0,2,0）に勝たせるため。
   ================================================================== */

:root {
	--flow: 20px;        /* 文と文 */
	--flow-block: 40px;  /* 部品（表・囲み・計算・バナー）の前後 */
	--flow-h2: 72px;     /* 大見出しの前 */
	--flow-h3: 48px;     /* 小見出しの前 */
	--flow-section: 64px; /* 記事の後ろの塊（申し込み・関連記事） */
	--box-radius: 12px;
	--box-pad-x: 24px;
	--box-pad-y: 20px;
}

@media (max-width: 600px) {
	:root {
		--flow-block: 32px;
		--flow-h2: 56px;
		--flow-h3: 40px;
		--flow-section: 48px;
		--box-pad-x: 20px;
		--box-pad-y: 18px;
	}
}

/* ---------- 1. 見出しまわり ---------- */

.article__header {
	margin-bottom: var(--flow-block);
	padding-bottom: 24px;
}

.article__kicker {
	margin-bottom: 16px;
}

.article__title {
	margin-bottom: 16px;
}

/* ---------- 2. 幅と上下の空き ---------- */

.article .article__body > * {
	max-width: none;
	margin-top: var(--flow);
	margin-bottom: 0;
}

/* 部品の前後は一段広く。 */
.article .article__body > * + :where(blockquote, table, figure, .disclosure, .toc, .article-summary, .compare-wrap, .calc, .tool-banner, .article__scroll, .speedcalc, .measured, .offers--inline),
.article .article__body > :where(blockquote, table, figure, .disclosure, .toc, .article-summary, .compare-wrap, .calc, .tool-banner, .article__scroll, .speedcalc, .measured, .offers--inline) + * {
	margin-top: var(--flow-block);
}

.article .article__body > h2 {
	margin-top: var(--flow-h2);
}

.article .article__body > h3 {
	margin-top: var(--flow-h3);
}

/* 見出しの直後は詰める。見出しと、その節の中身の所属を目で分ける。 */
.article .article__body > :where(h2) + *,
.article .article__body > h2 + h3 {
	margin-top: 24px;
}

.article .article__body > :where(h3) + * {
	margin-top: 16px;
}

.article .article__body > :first-child {
	margin-top: 0;
}

/* バナーが続くときは1つの塊に見せる。 */
.article .article__body > .tool-banner + .tool-banner {
	margin-top: 16px;
}

/* ---------- 3. 本文の文字 ---------- */

.article .article__body > p {
	line-height: 1.95;
}

.article .article__body :is(ul, ol):not([class]) {
	padding-left: 1.5em;
}

.article .article__body > :is(ul, ol):not([class]) > li {
	line-height: 1.85;
}

.article .article__body > :is(ul, ol):not([class]) > li + li {
	margin-top: 8px;
}

/*
 * 表の中のタグとバッジは折らない。
 * 上の層の `.article__body li { text-wrap: pretty }` は white-space の折り返し指定まで
 * wrap に戻す（text-wrap は text-wrap-mode を含む一括指定）。そのせいで nowrap が消え、
 * 「ブランド衣料」が1文字ずつ縦に折れていた（2026-09-14 に reuse/compare/apparel で発見）。
 */
.article .article__body :is(.compare__tags li, .offers--table .offer) {
	text-wrap: nowrap;
	white-space: nowrap;
}

/* 並びの間隔は flex の gap だけで取る（上の層の li + li の上余白を消す）。 */
.article .article__body .compare__tags li + li {
	margin-top: 0;
}

/* ---------- 4. 見出し ---------- */

/* 大見出し：差し色の淡い帯。文字の左端は箱の内側 24px にそろえる。 */
.article .article__body > h2 {
	position: relative;
	padding: 16px var(--box-pad-x);
	border: 0;
	border-radius: var(--box-radius);
	background: var(--c-accent-soft);
	font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
	font-weight: 800;
	line-height: 1.5;
}

.article .article__body > h2::before {
	top: 14px;
	bottom: 14px;
	width: 4px;
}

/* 小見出し：下線。本文と同じ左端から始める。 */
.article .article__body > h3 {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--c-border);
	font-size: 1.1875rem;
	line-height: 1.55;
}

.article .article__body > h3::after {
	bottom: -1px;
	width: 48px;
}

/* ---------- 5. 箱（広告表記・目次・結論・引用） ---------- */

.article .article__body .disclosure {
	padding: 14px var(--box-pad-x) 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--box-radius);
	background: var(--c-bg-subtle);
	font-size: 0.8125rem;
}

.article .article__body .disclosure__heading {
	margin: 0 0 2px;
	color: var(--c-text-soft);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.article .article__body .disclosure__body {
	line-height: 1.8;
}

.article .article__body .toc {
	border-radius: var(--box-radius);
	box-shadow: none;
}

.article .article__body .toc__heading {
	padding: 12px var(--box-pad-x);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

.article .article__body .toc__list {
	padding: 14px var(--box-pad-x) 18px;
}

.article .article__body .article-summary {
	padding: var(--box-pad-y) var(--box-pad-x) 24px;
	border: 1px solid var(--c-accent);
	border-radius: var(--box-radius);
	/* 2px に見せる。border を太くすると内側の文字の開始位置が他の箱と 1px ずれる。 */
	box-shadow: inset 0 0 0 1px var(--c-accent);
}

.article .article__body .article-summary > h2 {
	font-size: 1.0625rem;
}

.article .article__body .article-summary > h2::before {
	width: 24px;
	height: 24px;
	font-size: 0.75rem;
}

.article .article__body > blockquote {
	margin-inline: 0;
	padding: 16px var(--box-pad-x) 16px calc(var(--box-pad-x) - 4px);
	border-left: 4px solid var(--c-accent);
	border-radius: 0 var(--box-radius) var(--box-radius) 0;
	background: var(--c-bg-subtle);
	color: var(--c-text-soft);
}

.article .article__body > blockquote > * {
	margin: 0;
}

.article .article__body > blockquote > * + * {
	margin-top: 12px;
}

/* ---------- 6. 本文中の表（原稿の Markdown の表・inc/design.php が包む） ---------- */

.article .article__body .article__scroll {
	overflow-x: auto;
	border: 1px solid var(--c-border);
	border-radius: var(--box-radius);
	background: var(--c-bg);
}

.article .article__scroll > table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	font-size: 0.875rem;
	line-height: 1.7;
}

.article .article__scroll > table :is(th, td) {
	padding: 12px 16px;
	border-bottom: 1px solid var(--c-border);
}

.article .article__scroll > table :is(th, td):first-child {
	padding-left: var(--box-pad-x);
}

.article .article__scroll > table :is(th, td):last-child {
	padding-right: var(--box-pad-x);
}

.article .article__scroll > table thead th {
	border-bottom: 1px solid var(--c-border);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.article .article__scroll > table tbody tr:nth-child(even) {
	background: none;
}

.article .article__scroll > table tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

/* 比較表：外側の列の内側を、ほかの箱と同じ 24px にする（表の形のときだけ。900px 以下はカード）。 */
@media (min-width: 901px) {
	.article .compare__table :is(th, td):first-child {
		padding-left: var(--box-pad-x);
	}

	.article .compare__table :is(th, td):last-child {
		padding-right: var(--box-pad-x);
	}
}

/* 比較表の下の注記（確認日）を、表の左端にそろえる。 */
.article .compare-wrap .offer-checked {
	margin-top: 8px;
}

/* ---------- 7. 広告素材 ---------- */

.article .article__body .tool-banner img {
	border-radius: 8px;
}

/* ---------- 8. 記事の後ろ（申し込み・関連記事・運営者） ---------- */

.tool-cta {
	max-width: none;
	margin-top: var(--flow-section);
	padding: var(--box-pad-y) var(--box-pad-x) 24px;
	border-radius: var(--box-radius);
}

.related {
	margin-top: var(--flow-section);
}

.related__item {
	border-radius: var(--box-radius);
}

.site-author {
	margin-top: var(--flow-block);
	padding: var(--box-pad-y) var(--box-pad-x);
	border-radius: var(--box-radius);
}

/* ==================================================================
   計算ツール（[tool_calc]・shortcodes/tool-calc.php）v3

   本文の中で唯一「触るもの」。前の版（淡い差し色の地＋細い枠＋小さな表）は、
   本文の囲みと見分けが付かず、入力できることに気づかれにくかった。
   濃い面（フッターと同じ --c-ink の系統）に置いて、読み物から切り離す。

   - 数字が主役。1列目の出力（手元に入る額など）を最大にし、単位は2段小さく
   - 各セルの下に棒。同じ列のいちばん大きい額に対する長さで、社ごとの差を先に目で拾える
   - 入力は白い操作盤。±ボタン（刻みは config の step）と、上下キーでも増減
   - 右上に表の罫線の地紋（トップのヒーローと同じ意匠）＋差し色の光。ジャンルごとに色が変わる
   ================================================================== */

.article .article__body .calc,
.calc {
	--calc-bg: #111b25;
	--calc-line: rgba(255, 255, 255, 0.11);
	--calc-text: #dfe6ed;
	--calc-muted: #9fadba;
	--calc-hi: #b9c4ff;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 28px var(--box-pad-x) 24px;
	border: 0;
	border-radius: var(--box-radius);
	background: var(--calc-bg);
	color: var(--calc-text);
}

@supports (color: color-mix(in srgb, red, blue)) {
	.article .article__body .calc,
	.calc {
		--calc-hi: color-mix(in srgb, var(--c-accent) 42%, #fff);
		background:
			radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--c-accent) 34%, transparent) 0%, transparent 60%),
			var(--calc-bg);
	}
}

.calc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(60% 70% at 100% 0%, #000 0%, transparent 100%);
	mask-image: radial-gradient(60% 70% at 100% 0%, #000 0%, transparent 100%);
	pointer-events: none;
}

.calc__head {
	margin-bottom: 24px;
}

.calc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 3px 10px 3px 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--calc-hi);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.6;
}

.calc__icon {
	flex: none;
}

.article .article__body .calc__title,
.calc__title {
	margin: 0;
	padding: 0;
	border: 0;
	color: #fff;
	font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
	font-weight: 800;
	line-height: 1.45;
	word-break: auto-phrase;
	text-wrap: balance;
}

.calc__title::after {
	content: none;
}

.calc__lead {
	margin: 8px 0 0;
	color: var(--calc-muted);
	font-size: 0.875rem;
	line-height: 1.8;
}

/* ---------- 入力 ---------- */

.calc__inputs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px 20px;
	margin: 0 0 28px;
}

.calc__field {
	display: grid;
	align-content: start;
	gap: 8px;
	margin: 0;
}

.calc__label {
	color: #c8d2db;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.5;
}

.calc__control {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 380px;
	padding: 6px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
	transition: box-shadow 0.15s ease;
}

.calc__control:focus-within {
	box-shadow: 0 0 0 3px var(--calc-hi), 0 14px 30px -18px rgba(0, 0, 0, 0.7);
}

.calc__step {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--c-accent-soft);
	color: var(--c-accent-dark);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

.calc__step:hover {
	background: var(--c-accent);
	color: #fff;
}

.calc__step:active {
	transform: scale(0.94);
}

.calc__step:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

.calc__entry {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	justify-content: flex-end;
	gap: 6px;
	min-width: 0;
	padding-inline: 8px;
}

/* 16px 未満にしない（iOS が入力時に拡大する）。ここは 28px。 */
.calc__input {
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-ink);
	font-family: inherit;
	font-size: 1.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 44px;
	text-align: right;
}

.calc__input:focus,
.calc__input:focus-visible {
	outline: none;
}

.calc__unit {
	flex: none;
	color: var(--c-text-muted);
	font-size: 0.9375rem;
	font-weight: 700;
}

.calc__desc {
	color: var(--calc-muted);
	font-size: 0.75rem;
	line-height: 1.6;
}

/* ---------- 結果 ---------- */

/* 本文の表の見た目（上の層の .article__body table / th / td / 縞）をすべて打ち消す。 */
.article .calc .calc__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	overflow: visible;
	background: none;
	font-size: 0.875rem;
}

.article .calc .calc__table :is(th, td) {
	padding: 0;
	border: 0;
	background: none;
	vertical-align: middle;
}

.article .calc .calc__table thead th {
	padding: 0 0 10px;
	border-bottom: 1px solid var(--calc-line);
	color: var(--calc-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: left;
	white-space: nowrap;
}

.article .calc .calc__table thead th.is-right {
	padding-left: 20px;
	text-align: right;
}

.article .calc .calc__table tbody tr {
	border-bottom: 1px solid var(--calc-line);
	background: none;
}

.article .calc .calc__table tbody tr:last-child {
	border-bottom: 0;
}

.article .calc .calc__table .calc__tool {
	width: 34%;
	padding: 18px 16px 18px 0;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
}

.article .calc .calc__table .calc__cell {
	padding: 16px 0 16px 20px;
	color: var(--calc-text);
	text-align: right;
	white-space: nowrap;
}

.calc__value {
	display: block;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.calc__num {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.calc__cur {
	margin-left: 3px;
	color: var(--calc-muted);
	font-size: 0.75rem;
	font-weight: 700;
}

.calc__cell--primary .calc__num {
	color: #fff;
	font-size: 1.75rem;
	font-weight: 800;
}

.calc__bar {
	display: block;
	width: 100%;
	max-width: 168px;
	height: 4px;
	margin: 10px 0 0 auto;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
}

.calc__bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.42);
	transition: width 0.25s ease;
}

.calc__cell--primary .calc__bar-fill {
	background: var(--calc-hi);
}

/* 主役の列の「最大との差」。行の高さをそろえるため、差が無い行でも1行ぶん空けておく。 */
.calc__delta {
	display: block;
	min-height: 1.6em;
	margin-top: 6px;
	color: var(--calc-muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.6;
}

/* ---------- 注記 ---------- */

.calc__note {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--calc-line);
	color: var(--calc-muted);
	font-size: 0.8125rem;
	line-height: 1.85;
}

.calc .offer-checked {
	margin: 8px 0 0;
	color: #7f8f9d;
}

.calc__table + .offer-checked {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--calc-line);
}

/* ---------- 狭い画面：1社1段。名前の下に出力を横に並べる ---------- */

@media (max-width: 600px) {
	.calc__control {
		max-width: none;
	}

	.article .calc .calc__table,
	.article .calc .calc__table tbody {
		display: block;
	}

	.article .calc .calc__table thead {
		display: none;
	}

	.article .calc .calc__table tbody tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 16px;
		padding: 16px 0;
	}

	.article .calc .calc__table tbody tr:first-child {
		border-top: 1px solid var(--calc-line);
	}

	.article .calc .calc__table .calc__tool {
		grid-column: 1 / -1;
		width: auto;
		padding: 0;
	}

	.article .calc .calc__table .calc__cell {
		display: block;
		padding: 0;
		text-align: left;
	}

	.article .calc .calc__table .calc__cell::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		color: var(--calc-muted);
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		white-space: normal;
	}

	.calc__cell--primary .calc__num {
		font-size: 1.5rem;
	}

	.calc__bar {
		max-width: none;
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.calc__bar-fill,
	.calc__step,
	.calc__control {
		transition: none;
	}
}

/* ==================================================================
   検査証 v5（2026-09-14）：朱と墨・明朝の見出し・ハンコのキャラクター「ポン」

   本人と決めたこと（docs/引き継ぎ_2026-09-14.md 11本目・12本目）：
   - 公的書類の組み方（罫線・表・番号・色数を絞る）＋確かめられる信号を部品にする。
     「公式」とは名乗らない（官公庁風のロゴ・紋章は使わない）
   - 独自の印はキャラクター「ポン」。話すのは3か所だけ（inc/pon.php）
   - 報酬の有無は読者に見せない。見せるのは「広告」の印だけ（.ad-mark）

   色は5つだけ：紙（地）・墨（文字と罫線）・灰（補足）・朱（番号と印）・木（ポンの体）。
   ジャンルの差し色は使わない（どのサイトも同じ屋号に見せる）。
   角は付けない。影は使わない。箱は罫線で区切る。
   ここより上の宣言を後勝ちで打ち消す。詳細度は v3 と同じ `.article .article__body > …`。
   ================================================================== */

/* ---------- 1. トークン ---------- */

:root {
	--paper: #f4f1ea;
	--card: #fbfaf6;
	--ink: #141414;
	--sub: #5e5b54;
	--hair: #d6d1c4;
	--shu: #e0412b;      /* 番号・印・飾り（大きい字だけ） */
	--shu-text: #b9301b; /* 朱の小さい字。紙の地で 4.5:1 以上 */
	--shu-soft: #f7ddd6;
	--wood: #efe6d2;
	--font-min: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "BIZ UDPMincho", serif;

	--c-text: var(--ink);
	--c-text-muted: var(--sub);
	--c-text-soft: #3a3833;
	--c-bg: var(--paper);
	--c-bg-subtle: var(--card);
	--c-border: var(--hair);
	--c-brand: var(--ink);
	--c-brand-dark: var(--ink);
	--c-ink: var(--ink);
	--c-cta: #c8321c;    /* 白い字で 5:1 以上 */
	--c-cta-dark: #a52814;
	--c-bg-cta-subtle: var(--shu-soft);
	--c-marker: var(--shu-soft);
	--radius: 0;
	--radius-lg: 0;
	--box-radius: 0;
	--shadow-sm: none;
	--shadow-md: none;
}

/* ジャンルの差し色（.genre-*）を墨に戻す。body[class] は .genre-* より詳細度が高い。 */
body[class] {
	--c-accent: var(--ink);
	--c-accent-dark: var(--shu-text);
	--c-accent-soft: var(--card);
}

body {
	background: var(--paper);
	color: var(--ink);
}

a {
	color: var(--ink);
	text-decoration-color: var(--shu);
}

a:hover {
	color: var(--shu-text);
}

::selection {
	background: var(--shu-soft);
}

/* 明朝の見出しは仮名を詰める（palt）。詰めないと仮名の間が空いて間延びする。 */
:is(.article__title, .article__body h2, .related__heading, .hero__title, .section__title, .page-header__title, .stamp__word) {
	font-feature-settings: "palt";
}

/* ---------- 2. ヘッダー・フッター ---------- */

.site-header {
	background: var(--paper);
	border-bottom: 2px solid var(--ink);
}

.site-logo {
	width: 26px;
	height: 33px;
}

.site-header__brand {
	font-weight: 900;
	letter-spacing: 0.04em;
}

.site-header__genre {
	padding: 1px 10px;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font-size: 0.75rem;
	font-weight: 800;
}

.site-nav a,
.site-nav a[aria-current] {
	color: var(--ink);
}

.site-nav a[aria-current] {
	text-decoration: underline;
	text-decoration-color: var(--shu);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.network-bar__link::before {
	display: none;
}

.site-footer {
	border-top: 2px solid var(--ink);
}

/* ---------- 3. ボタン・チップ・広告の印 ---------- */

.chip {
	padding: 1px 10px;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font-size: 0.75rem;
	font-weight: 800;
}

.chip--solid {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

a.chip:hover {
	border-color: var(--shu-text);
	color: var(--shu-text);
}

a.chip--solid:hover {
	background: var(--shu-text);
	color: #fff;
}

.button,
.button:hover {
	border-radius: 0;
	background: var(--ink);
	box-shadow: none;
	color: var(--paper);
}

.button:hover {
	background: var(--shu-text);
}

.cta {
	border: 0;
	border-radius: 0;
	background: var(--c-cta);
	box-shadow: none;
	color: #fff;
	font-weight: 800;
}

.cta:hover {
	background: var(--c-cta-dark);
	color: #fff;
}

/*
 * 「広告」の印。報酬対象のボタンの中と、広告バナーの上にだけ付く（inc/pon.php）。
 * 公式サイトへの素のリンクには付かない。色は朱にせず、枠だけで控えめに出す。
 */
.ad-mark {
	display: inline-block;
	margin-left: 8px;
	padding: 0 5px;
	border: 1px solid currentColor;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	vertical-align: 0.12em;
	white-space: nowrap;
}

.ad-mark--banner {
	display: table;
	margin: 0 auto 6px;
	border-color: var(--sub);
	color: var(--sub);
}

.tool-banner--left .ad-mark--banner {
	margin-left: 0;
}

/* ---------- 4. 記事の頭：見出し・ポン・確認記録の帯 ---------- */

.article .article__header {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 2px solid var(--ink);
}

.article__head {
	padding-top: 8px;
}

.article .article__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.article .article__title {
	margin: 0;
	font-family: var(--font-min);
	font-size: clamp(2rem, 1.35rem + 2.8vw, 3.25rem);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: 0.01em;
}

.article__title-main {
	display: block;
}

/* 副題はゴシックで。明朝の大見出しとの差で「何の記事か」と「何が分かるか」を分ける。 */
.article__title .article__title-sub {
	display: block;
	margin-top: 14px;
	color: var(--c-text-soft);
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0;
}

/* ② ポンの一言。罫線の上にポンが立ち、左に吹き出し。 */
.pon-lead {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 8px;
}

.pon--lead {
	flex: none;
	width: 104px;
	height: 130px;
	margin-bottom: -4px;
}

.pon-say {
	position: relative;
	max-width: 330px;
	margin: 0 0 58px;
	padding: 10px 14px 11px;
	border: 1.5px solid var(--ink);
	background: var(--card);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.65;
}

.pon-say::after {
	content: "";
	position: absolute;
	top: 20px;
	right: -8px;
	width: 14px;
	height: 14px;
	border-top: 1.5px solid var(--ink);
	border-right: 1.5px solid var(--ink);
	background: var(--card);
	transform: rotate(45deg);
}

.pon-say__link {
	display: inline-block;
	margin-left: 6px;
	color: var(--shu-text);
	font-weight: 800;
	white-space: nowrap;
}

.pon-say__link::after {
	content: " \2193";
}

/* 確認記録の帯。公的書類の欄のように、見出しの小さい字と値を縦に組む。 */
.ledger {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	margin: 0 0 var(--flow-block);
	padding: 0;
	border-bottom: 1px solid var(--ink);
}

.ledger__item {
	padding: 10px 14px 11px;
	border-right: 1px solid var(--hair);
}

.ledger__item:first-child {
	padding-left: 0;
}

.ledger__item:last-child {
	border-right: 0;
}

.ledger dt {
	color: var(--sub);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.ledger dd {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.pon--lead {
		width: 76px;
		height: 95px;
	}

	.pon-say {
		margin-bottom: 36px;
		font-size: 0.8125rem;
	}

	.ledger {
		grid-template-columns: 1fr 1fr;
	}

	.ledger__item,
	.ledger__item:first-child {
		padding-left: 0;
		border-right: 0;
		border-bottom: 1px solid var(--hair);
	}

	.ledger__item:nth-child(odd) {
		border-right: 1px solid var(--hair);
	}

	.ledger__item:nth-child(even) {
		padding-left: 14px;
	}

	.ledger__item:nth-last-child(-n+2):nth-child(odd),
	.ledger__item:last-child {
		border-bottom: 0;
	}

	/* 項目が奇数のとき、最後の1つは2列ぶんに広げる（右に空の欄を残さない）。 */
	.ledger__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		border-right: 0;
	}
}

/* ---------- 5. 本文：見出し ---------- */

.article .article__body {
	counter-reset: sec;
}

/* 大見出し：上に墨の罫線、左に朱の番号（目次の番号と同じ）。 */
.article .article__body > h2,
.article .article__body .article-summary > h2 {
	position: relative;
	margin-bottom: 0;
	padding: 22px 0 0 76px;
	border: 0;
	border-top: 2px solid var(--ink);
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-min);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	font-weight: 800;
	line-height: 1.45;
	counter-increment: sec;
}

.article .article__body > h2::before,
.article .article__body .article-summary > h2::before {
	content: counter(sec, decimal-leading-zero);
	position: absolute;
	top: 20px;
	bottom: auto;
	left: 0;
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--shu);
	font-family: var(--font-body);
	font-size: 2.75rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: -0.04em;
}

@media (max-width: 600px) {
	.article .article__body > h2,
	.article .article__body .article-summary > h2 {
		padding: 16px 0 0;
	}

	.article .article__body > h2::before,
	.article .article__body .article-summary > h2::before {
		position: static;
		margin-bottom: 8px;
		font-size: 2.25rem;
	}
}

.article .article__body > h3 {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--hair);
	font-size: 1.1875rem;
	font-weight: 800;
}

.article .article__body > h3::after {
	bottom: -1px;
	width: 32px;
	height: 2px;
	background: var(--shu);
}

.article__body li::marker,
.article__body ol > li::marker {
	color: var(--shu);
	font-weight: 800;
}

.article__body strong {
	background: linear-gradient(transparent 68%, var(--shu-soft) 68%);
}

/* ---------- 6. 本文：箱（広告表記・目次・結論・引用・注意） ---------- */

.article .article__body .disclosure {
	padding: 12px 16px 13px;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--card);
	font-size: 0.8125rem;
}

.article .article__body .disclosure__heading {
	display: inline-block;
	margin: 0 0 6px;
	padding: 0 8px;
	background: var(--ink);
	color: var(--paper);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
}

.article .article__body .toc {
	border: 0;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.article .article__body .toc__heading,
.article .article__body .toc[open] .toc__heading {
	padding: 12px 0 4px;
	background: transparent;
	color: var(--ink);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
}

.article .article__body .toc__list {
	padding: 4px 0 14px;
}

.toc__list > .toc__item {
	padding-left: 40px;
}

.toc__list > .toc__item::before {
	content: counter(toc, decimal-leading-zero);
	top: 4px;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--shu-text);
	font-size: 0.9375rem;
	font-weight: 900;
}

.toc__item a {
	color: var(--ink);
}

.toc__sub {
	border-left-color: var(--hair);
}

/* 先に結論：囲みをやめ、朱の番号の付いた罫線の一覧にする。 */
.article .article__body .article-summary {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.article .article__body .article-summary :is(ul, ol) {
	margin: 18px 0 0;
	padding: 0;
	border-top: 2px solid var(--ink);
	list-style: none;
	counter-reset: pick;
}

.article .article__body .article-summary li {
	position: relative;
	margin: 0;
	padding: 14px 0 15px 44px;
	border-bottom: 1px solid var(--hair);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.7;
	counter-increment: pick;
}

.article .article__body .article-summary li + li {
	margin-top: 0;
}

.article .article__body .article-summary li::before {
	content: counter(pick);
	position: absolute;
	top: 11px;
	left: 4px;
	color: var(--shu);
	font-size: 1.5rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.article .article__body > blockquote {
	border-left: 3px solid var(--ink);
	border-radius: 0;
	background: var(--card);
}

/* ③ ポンの注意。「つまずきやすいところ」の見出しの直後。 */
.article .article__body .pon-note {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pon--note {
	flex: none;
	width: 34px;
	height: 43px;
}

.pon-note__say {
	position: relative;
	padding: 6px 12px;
	border: 1.5px solid var(--ink);
	background: var(--card);
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.6;
}

.pon-note__say::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -7px;
	width: 11px;
	height: 11px;
	border-bottom: 1.5px solid var(--ink);
	border-left: 1.5px solid var(--ink);
	background: var(--card);
	transform: translateY(-50%) rotate(45deg);
}

/* ---------- 7. 表（原稿の表・比較表） ---------- */

.article .article__body .article__scroll {
	border: 0;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
	background: transparent;
}

.article .article__scroll > table :is(th, td):first-child {
	padding-left: 4px;
}

.article .article__scroll > table :is(th, td):last-child {
	padding-right: 4px;
}

.article .article__scroll > table thead th {
	border-bottom: 1.5px solid var(--ink);
	background: transparent;
	color: var(--sub);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

.article .article__scroll > table :is(th, td) {
	border-bottom-color: var(--hair);
}

/* .article__body table（角丸12px・全周の枠）が .compare__table に勝つので、同じ深さで書く。 */
.article .article__body .compare__table {
	border: 0;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
	background: transparent;
}

.article .article__body .compare__table :is(th, td) {
	border-bottom: 1px solid var(--hair);
}

.article .article__body .compare__table thead th {
	border-bottom: 1.5px solid var(--ink);
	background: transparent;
	color: var(--sub);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

.article .article__body .compare__table tbody tr:nth-child(even) {
	background: none;
}

.article .article__body .compare__table tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

.compare__name {
	font-weight: 800;
}

@media (max-width: 900px) {
	.article .article__body .compare__table {
		border: 0;
	}

	.article .article__body .compare__table tbody tr:last-child :is(th, td) {
		border-bottom: 1px solid var(--hair);
	}

	.compare__row {
		border: 0;
		border-top: 2px solid var(--ink);
		border-radius: 0;
		background: var(--card);
	}

	.compare__tool {
		background: transparent;
		border-bottom-color: var(--hair);
	}
}

/* ① ポンの確認の印。表の下の注記の頭に、朱の丸印を押す。 */
.offer-checked {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sub);
}

.article .compare-wrap .offer-checked {
	margin-top: 14px;
}

.stamp {
	display: inline-grid;
	flex: none;
	place-content: center;
	width: 58px;
	height: 58px;
	border: 2.5px solid var(--shu);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--shu);
	color: var(--shu);
	font-weight: 900;
	line-height: 1.1;
	text-align: center;
	transform: rotate(-12deg);
	opacity: 0.92;
}

.stamp__word {
	font-family: var(--font-min);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
}

.stamp__date {
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

.offer-checked__text {
	font-size: 0.8125rem;
}

/* ---------- 8. 計算ツール：墨の伝票 ---------- */

.article .article__body .calc,
.calc {
	--calc-bg: var(--ink);
	--calc-line: rgba(244, 241, 234, 0.14);
	--calc-text: #ece8de;
	--calc-muted: #aaa597;
	--calc-hi: #ff8a73;

	border-radius: 0;
	background: var(--calc-bg);
}

@supports (color: color-mix(in srgb, red, blue)) {
	.article .article__body .calc,
	.calc {
		--calc-hi: #ff8a73;
		background: var(--calc-bg);
	}
}

.calc::before {
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
	mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.calc .stamp {
	box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px var(--shu);
}

/* ---------- 9. 広告素材・記事の後ろ ---------- */

.article .article__body .tool-banner img {
	border-radius: 0;
}

.tool-cta {
	border: 2px solid var(--ink);
	border-radius: 0;
	background: var(--card);
}

.related__heading {
	padding-top: 18px;
	border-top: 2px solid var(--ink);
	font-family: var(--font-min);
}

.related__heading::before {
	display: none;
}

.related__item {
	border: 0;
	border-bottom: 1px solid var(--hair);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.related__item:hover {
	border-color: var(--ink);
	background: var(--card);
	box-shadow: none;
}

.related__type {
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
}

.site-author {
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--card);
}

/* ---------- 10. トップ・一覧 ---------- */

.hero {
	background: var(--paper);
	border-bottom: 2px solid var(--ink);
}

.hero::before {
	display: none;
}

.hero__title,
.section__title,
.page-header__title {
	font-family: var(--font-min);
	font-weight: 800;
}

.hero__eyebrow {
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
}

.hero__point::before {
	border-radius: 0;
	background: var(--shu);
}

.section__title::before {
	border-radius: 0;
	background: var(--shu);
}

:is(.card, .genre-list__item a, .site-card__link) {
	border-color: var(--ink);
	border-radius: 0;
	background: var(--card);
	box-shadow: none;
}

:is(.card, .genre-list__item a, .site-card__link):hover {
	border-color: var(--shu-text);
	box-shadow: none;
}

.card::before,
.site-card__link::before {
	display: none;
}

.site-card__icon,
.postcard__type {
	border-radius: 0;
}

/* ---------- 11. 見直しで直したところ（2026-09-14 実機で確認） ---------- */

/* 原稿の表：狭い画面で1列目が1文字ずつ縦に折れた。列の幅を持たせ、はみ出す分は枠の中で横に送る。 */
.article .article__scroll > table :is(th, td):first-child {
	min-width: 6.5em;
}

/* 美容医療（話さないポン）は、吹き出しが無いぶん小さく立たせる。 */
.pon-lead--quiet .pon--lead {
	width: 64px;
	height: 80px;
}

/* 比較表の枠は横に送れる（overflow）ので、傾けた印の端が切れる。内側に少し逃がす。 */
.article .compare-wrap .offer-checked {
	padding: 8px 0 6px 6px;
}

.calc .offer-checked {
	color: var(--calc-muted);
}

:is(.calc__eyebrow, .calc__control, .calc__step, .calc__bar, .calc__bar-fill) {
	border-radius: 0;
}

/* トップ・入口：ポンの全身、事実の行、広告表記、サイトのカード。 */
.hero-art.pon--hero {
	width: 176px;
	height: 220px;
	justify-self: end;
}

.hero__point {
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.hero__point::before {
	border-radius: 0;
	background: var(--shu);
}

.disclosure {
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--card);
}

.site-card__link,
.genre-list__item a {
	--c-accent: var(--ink);
	--c-accent-dark: var(--shu-text);
	--c-accent-soft: var(--paper);
}

.site-card__icon {
	border: 1.5px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
}

/* 比較表の行ごとの出典と確認日。社名と説明の下に小さく。 */
.compare__source {
	display: block;
	margin-top: 6px;
	color: var(--sub);
	font-size: 0.75rem;
	font-weight: 500;
}

.compare__source a {
	color: var(--ink);
	font-weight: 700;
}

/* 固定ページ（運営者情報など）の表は横スクロールの枠で包まれないので、ここで同じ罫線の表にする。 */
.article__body > table {
	border: 0;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
}

.article__body > table thead th {
	border-bottom: 1.5px solid var(--ink);
	background: transparent;
	color: var(--sub);
	font-size: 0.75rem;
}

.article__body > table tbody tr:nth-child(even) {
	background: none;
}

.article__body > table :is(th, td) {
	border-bottom: 1px solid var(--hair);
}

/* 比較表：文の長い列に押されて、短い列（種類など）が1〜2文字ずつ折れていた。表の形のときだけ列に最小幅を持たせる。 */
@media (min-width: 901px) {
	.article .article__body .compare__table td[data-col] {
		min-width: 7em;
	}
}

/* ---------- 11b. 広告表記を1行に畳む（2026-09-15） ----------
 * 「広告について｜このページには広告が含まれます。」の1行だけ常に見せ、続きは開いて読む。
 */

.disclosure > summary.disclosure__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	cursor: pointer;
	list-style: none;
}

.disclosure > summary.disclosure__summary::-webkit-details-marker {
	display: none;
}

.disclosure > summary.disclosure__summary::after {
	content: "くわしく";
	margin-left: auto;
	color: var(--shu-text);
	font-size: 0.75rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.disclosure[open] > summary.disclosure__summary::after {
	content: "閉じる";
}

.article .article__body .disclosure {
	padding: 8px 14px;
}

.article .article__body .disclosure .disclosure__heading {
	margin: 0;
}

.disclosure__lead {
	color: var(--ink);
	font-size: 0.8125rem;
}

.article .article__body .disclosure__body {
	margin: 8px 0 2px;
}

/* スマホの冒頭を詰める（2026-09-15）。確認記録は「見出し 値」を1行に、ポンは小さく。
 * 1画面目がタイトル・ポン・帯・広告表記で埋まり、結論が2画面目に落ちていた。 */
@media (max-width: 600px) {
	.ledger__item,
	.ledger__item:first-child,
	.ledger__item:nth-child(even) {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 8px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.ledger dd {
		font-size: 0.8125rem;
	}

	.pon-lead {
		gap: 10px;
		margin-top: 4px;
	}

	.pon--lead {
		width: 56px;
		height: 70px;
	}

	.pon-say {
		margin-bottom: 20px;
		padding: 8px 12px 9px;
		line-height: 1.55;
	}

	.l-main {
		padding-top: 16px;
	}

	.breadcrumbs {
		margin-bottom: 12px;
	}

	.article .ledger {
		margin-bottom: 16px;
	}

	/* 広告表記は1行に収める（「くわしく」を記号にして折り返さない） */
	.disclosure > summary.disclosure__summary {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.disclosure > summary.disclosure__summary::after {
		content: "\25BE";
		text-decoration: none;
		font-size: 0.875rem;
	}

	.disclosure[open] > summary.disclosure__summary::after {
		content: "\25B4";
	}

	.disclosure__lead {
		font-size: 0.75rem;
	}

	.article .article__body > .disclosure + * {
		margin-top: 20px;
	}

	.article .article__body > .article-summary {
		margin-top: 24px;
	}
}

/* ---------- 12. ダークモード（端末の設定に合わせる） ----------
 * 色の役割は変えず、紙と墨を入れ替えるだけ。朱は暗い地で沈まないよう明るくする。
 * フッター・ネットワークの帯・計算ツールは、明るいときも暗い面なので、暗いときはさらに一段暗くする。
 * ポンの絵の色は変えない（キャラクターの色は固定。木の色の体が暗い地でも見える）。
 */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--paper: #16140f;
		--card: #1f1c16;
		--ink: #eeeae0;
		--sub: #a9a393;
		--hair: #3a352b;
		--shu: #ff6a52;
		--shu-text: #ff8f7a;
		--shu-soft: #43231c;
		--c-text-soft: #d6d0c2;
		--c-ink: #0b0a08;
		--c-cta: #c8321c;
		--c-cta-dark: #e0412b;
	}

	.article .article__body .calc,
	.calc {
		--calc-bg: #0b0a08;
		border: 1px solid var(--hair);
	}

	@supports (color: color-mix(in srgb, red, blue)) {
		.article .article__body .calc,
		.calc {
			background: var(--calc-bg);
		}
	}

	.calc .stamp {
		box-shadow: inset 0 0 0 2px #0b0a08, inset 0 0 0 3px var(--shu);
	}

	/* 計算ツールの±ボタンは白い入力盤の上にあるので、明るいときと同じ色に固定する。 */
	.calc__step {
		background: #efe9dc;
		color: #b9301b;
	}

	/* ポンの線（墨）が暗い地に溶けるので、輪郭に薄い光を足す。 */
	svg.pon,
	.site-logo {
		filter: drop-shadow(0 0 1px rgba(238, 234, 224, 0.7));
	}

	/* 広告素材（白地の画像）は、暗い地でまぶしくならないよう少しだけ落とす。 */
	.tool-banner img {
		filter: brightness(0.92);
	}
}

@media print {
	.pon-lead,
	.pon-note {
		display: none;
	}
}

/* ==================================================================
   /trial/（2026-09-18）：青い面・巨大な数字・黄色の印（見本 A・本人決定 D11）

   ネットワーク共通の記号（ポン・冒頭の4マス・「広告」の印）は残し、色と書体だけを差し替える。
   色は5つ：青（面）・紙（地）・黄（印・主ボタン）・墨（文字）・赤（払いすぎ額と課金だけ）。
   見出しと大きな数字は Dela Gothic One（inc/assets.php が config の heading_font_url で読む）。本文は端末の書体のまま。
   body.genre-trial は body[class] より詳細度が高いので、検査証 v5 の値を後勝ちで差し替えられる。
   ================================================================== */

body.genre-trial {
	--t-blue: #2330e0;
	--t-blue-deep: #1a25b8;
	--t-paper: #f3f2ec;
	--t-yellow: #ffe14d;
	--t-yellow-deep: #f2cf1e;
	--t-ink: #0b0d2a;
	--t-red: #ff4a3d;
	--t-red-text: #c8281a;
	--t-green: #21b56b;
	--t-green-text: #167a45;
	--t-sky: #9fb0ff;
	/* 黄の上の文字と、紺の面（フッター）の上の文字。ダークモードでも入れ替えない。 */
	--t-on-yellow: #0b0d2a;
	--t-on-dark: #f3f2ec;

	--paper: var(--t-paper);
	--card: #ffffff;
	--ink: var(--t-ink);
	--sub: #4a4d6e;
	--hair: #c9c8bf;
	--shu: var(--t-blue);
	--shu-text: var(--t-blue-deep);
	--shu-soft: #e2e5ff;
	--c-text-soft: #2b2e4d;
	--c-cta: var(--t-yellow);
	--c-cta-dark: var(--t-yellow-deep);
	--c-bg-cta-subtle: #fff6c2;
	--c-marker: #fff6c2;
	--font-min: "Dela Gothic One", var(--font-body);
	--radius: 14px;
	--radius-lg: 22px;
	--box-radius: 14px;
	background: var(--t-paper);
	color: var(--t-ink);
}

body.genre-trial a {
	text-decoration-color: var(--t-blue);
}

body.genre-trial ::selection {
	background: var(--t-yellow);
	color: var(--t-on-yellow);
}

/* Dela Gothic One は明朝より大きく見えるので、見出しは一段小さく。数字は tabular。 */
body.genre-trial :is(.article__title, .article .article__body h2, .article .article__body h3, .related__heading, .section__title, .page-header__title, .hero__title, .card__title, .stamp__word) {
	font-family: var(--font-min);
	font-weight: 400;
	font-feature-settings: "palt";
	letter-spacing: 0.01em;
	text-wrap: balance;
}

body.genre-trial .article .article__title {
	font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem);
	line-height: 1.3;
}

body.genre-trial .article .article__body h2 {
	font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem);
	border-bottom: 3px solid var(--t-ink);
}

body.genre-trial .article .article__body h3 {
	font-size: 1.05rem;
}

body.genre-trial .card__title,
body.genre-trial .section__title {
	font-size: 1.15rem;
}

/* ---------- ヘッダー・フッター ---------- */

body.genre-trial .site-header {
	background: var(--t-paper);
	border-bottom: 3px solid var(--t-ink);
}

body.genre-trial .site-header__genre {
	border-color: var(--t-ink);
	background: var(--t-yellow);
	color: var(--t-on-yellow);
}

body.genre-trial .site-nav a[aria-current] {
	text-decoration-color: var(--t-blue);
}

body.genre-trial .site-footer {
	border-top: 0;
	background: var(--t-ink);
	color: var(--t-on-dark);
}

body.genre-trial .site-footer a,
body.genre-trial .site-footer .site-footer__heading,
body.genre-trial .site-footer .site-footer__name,
body.genre-trial .site-footer__tagline,
body.genre-trial .site-footer__copyright {
	color: var(--t-on-dark);
}

body.genre-trial .site-footer__note {
	max-width: 44em;
	margin: 0 0 8px;
	font-size: 0.75rem;
	line-height: 1.8;
	color: rgba(243, 242, 236, 0.78);
}

body.genre-trial .site-footer__word {
	margin: 18px 0 12px;
	font-family: var(--font-min);
	font-size: clamp(3.4rem, 16vw, 8.5rem);
	line-height: 0.95;
	color: var(--t-yellow);
	letter-spacing: 0.02em;
	word-break: keep-all;
}

/* ---------- ボタン・チップ・広告の印 ---------- */

body.genre-trial .button,
body.genre-trial .button:hover,
body.genre-trial .cta,
body.genre-trial .cta:hover {
	border: 0;
	border-radius: 999px;
	background: var(--t-yellow);
	color: var(--t-on-yellow);
	font-weight: 900;
	box-shadow: none;
}

body.genre-trial .button:hover,
body.genre-trial .cta:hover {
	background: var(--t-yellow-deep);
}

body.genre-trial .chip {
	border-radius: 999px;
	border-color: var(--t-ink);
}

body.genre-trial .chip--solid {
	background: var(--t-blue);
	border-color: var(--t-blue);
	color: #fff;
}

body.genre-trial .ad-mark {
	border-radius: 4px;
}

/* ---------- 表紙の1画面目：青の面 ---------- */

body.genre-trial .hero--calc {
	position: relative;
	overflow-x: clip;
	margin-top: -16px;
	margin-bottom: 0;
	padding-block: 34px 0;
	background: var(--t-blue);
	color: #fff;
}

body.genre-trial .hero--calc::before {
	display: none;
}

body.genre-trial .hero--calc .hero__inner {
	display: block;
	position: relative;
}

body.genre-trial .hero--calc .hero__text {
	max-width: 720px;
	margin-inline: auto;
	padding-right: 84px;
}

body.genre-trial .hero--calc .hero__title {
	margin: 12px 0 18px;
	font-size: clamp(2.5rem, 12vw, 5.2rem);
	line-height: 1.08;
	color: #fff;
}

body.genre-trial .hero--calc .hero__lead {
	max-width: 30em;
	margin: 0 0 18px;
	font-size: 0.95rem;
	line-height: 1.9;
	color: #fff;
}

body.genre-trial .hero--calc .hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

body.genre-trial .hero--calc .hero__point {
	margin: 0;
	padding: 4px 12px;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
	background: transparent;
}

body.genre-trial .hero--calc .hero__point::before {
	display: none;
}

body.genre-trial .hero__sticker {
	position: absolute;
	top: -6px;
	right: 12px;
	width: 92px;
	height: 92px;
	margin: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--t-yellow);
	color: var(--t-on-yellow);
	font-size: 0.8rem;
	font-weight: 900;
	line-height: 1.3;
	text-align: center;
	transform: rotate(12deg);
	box-shadow: 0 0 0 4px var(--t-blue), 0 0 0 6px var(--t-yellow);
}

body.genre-trial .hero--calc__tool {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding-bottom: 40px;
}

/* ---------- 流れる帯 ---------- */

body.genre-trial .band {
	overflow: hidden;
	border-block: 3px solid var(--t-ink);
	background: var(--t-yellow);
	color: var(--t-on-yellow);
	font-family: var(--font-min);
	font-size: 1.05rem;
	white-space: nowrap;
}

body.genre-trial .band__track {
	display: inline-block;
	padding-block: 12px;
	animation: aitools-band 40s linear infinite;
}

body.genre-trial .band__item {
	padding-inline: 20px;
}

body.genre-trial .band__item::after {
	content: "\25CF";
	margin-left: 20px;
	font-size: 0.6em;
	vertical-align: 0.2em;
}

@keyframes aitools-band {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- 場面：値札が剥がれる ---------- */

body.genre-trial .scene {
	position: relative;
	height: 220vh;
	background: var(--t-blue);
}

body.genre-trial .scene__stage {
	position: sticky;
	top: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100svh;
	padding: 28px 20px 28px;
	max-width: 720px;
	margin-inline: auto;
	color: #fff;
}

body.genre-trial .scene__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	opacity: 0.85;
}

body.genre-trial .scene__tag {
	align-self: center;
	margin: 0;
	text-align: center;
}

body.genre-trial .scene__step {
	display: block;
	margin-bottom: 10px;
	font-size: clamp(1rem, 4.5vw, 1.4rem);
	font-weight: 900;
}

body.genre-trial .scene__price {
	display: inline-block;
	padding: 10px 26px;
	border-radius: 16px;
	background: var(--t-yellow);
	color: var(--t-on-yellow);
	font-family: var(--font-min);
	font-size: clamp(3.6rem, 20vw, 7rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transform: rotate(-3deg);
}

body.genre-trial .scene__price small {
	margin-left: 4px;
	font-size: 0.32em;
}

body.genre-trial .scene__ticks {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	font-weight: 700;
}

body.genre-trial .scene__ticks li {
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.14);
	opacity: 0.45;
	transition: opacity 0.25s;
}

body.genre-trial .scene__ticks li.is-on {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	body.genre-trial .band__track {
		animation: none;
	}

	body.genre-trial .scene {
		height: auto;
	}

	body.genre-trial .scene__stage {
		position: static;
		height: auto;
		gap: 16px;
	}
}

/* ---------- 表紙：4つの道具・確認のしかた ---------- */

body.genre-trial .front-tools__list,
body.genre-trial .front-how__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

body.genre-trial .front-tools__link {
	display: grid;
	/* 番号の幅を固定して、4枚の見出しの左端をそろえる（auto だと 01 と 04 で幅が違う）。 */
	grid-template-columns: 3.8rem 1fr;
	gap: 4px 14px;
	padding: 18px 18px 18px 16px;
	border: 3px solid var(--t-ink);
	border-radius: 18px;
	background: #fff;
	color: var(--t-ink);
	text-decoration: none;
	transition: transform 0.15s, background 0.15s;
}

body.genre-trial .front-tools__link:hover {
	background: var(--t-yellow);
	transform: translateY(-2px);
}

body.genre-trial .front-tools__no {
	grid-row: span 2;
	align-self: center;
	font-family: var(--font-min);
	font-size: 2rem;
	line-height: 1;
	color: var(--t-blue);
}

body.genre-trial .front-tools__title {
	font-family: var(--font-min);
	font-size: 1.15rem;
}

body.genre-trial .front-tools__desc {
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--sub);
}

body.genre-trial .front-how__list {
	counter-reset: how;
}

body.genre-trial .front-how__list li {
	position: relative;
	padding: 10px 0 10px 44px;
	border-bottom: 1.5px solid var(--hair);
	line-height: 1.8;
}

body.genre-trial .front-how__list li::before {
	counter-increment: how;
	content: counter(how);
	position: absolute;
	left: 0;
	top: 10px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--t-blue);
	color: #fff;
	font-family: var(--font-min);
	font-size: 0.9rem;
}

/* 表紙の最後の区画の下は、フッターの上の余白だけで足りる（72px が重なって空いて見えた）。 */
body.genre-trial.home .l-container > .section:last-child {
	margin-bottom: 0;
}

@media (min-width: 700px) {
	body.genre-trial .front-tools__list {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- 規則つき計算装置 .rcalc（白い紙のカード → 青い結果） ---------- */

body.genre-trial .rcalc,
body.genre-trial .article .article__body .rcalc {
	margin: 22px 0 28px;
	padding: 20px 18px 22px;
	border: 3px solid var(--t-ink);
	border-radius: 24px;
	background: #fff;
	color: var(--t-ink);
}

body.genre-trial .rcalc__eyebrow {
	margin: 0 0 4px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--t-blue);
}

body.genre-trial .rcalc__title,
body.genre-trial .article .article__body .rcalc__title {
	margin: 0 0 8px;
	font-family: var(--font-min);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.7rem);
	line-height: 1.3;
	border: 0;
	padding: 0;
}

body.genre-trial .rcalc__lead,
body.genre-trial .rcalc__example {
	margin: 0 0 12px;
	font-size: 0.85rem;
	line-height: 1.8;
	color: var(--sub);
}

body.genre-trial .rcalc__example {
	padding: 6px 10px;
	border-radius: 8px;
	background: #fff6c2;
	color: var(--t-ink);
	font-weight: 700;
}

body.genre-trial .rcalc__inputs {
	display: grid;
	gap: 14px;
}

body.genre-trial .rcalc__field {
	display: grid;
	gap: 6px;
}

body.genre-trial .rcalc__label {
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1.5;
}

body.genre-trial .rcalc__choice {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

body.genre-trial .rcalc__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.genre-trial .rcalc__option {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 8px 14px;
	border: 2px solid var(--t-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--t-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 800;
	cursor: pointer;
}

body.genre-trial .rcalc__option[aria-checked="true"] {
	background: var(--t-yellow);
	border-color: var(--t-ink);
}

body.genre-trial .rcalc__control {
	display: flex;
	align-items: stretch;
	border: 2px solid var(--t-ink);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}

body.genre-trial .rcalc__control:focus-within {
	box-shadow: 0 0 0 3px var(--t-yellow);
}

body.genre-trial .rcalc__step {
	flex: none;
	width: 48px;
	border: 0;
	background: var(--t-paper);
	color: var(--t-ink);
	font: inherit;
	font-size: 1.25rem;
	font-weight: 900;
	cursor: pointer;
}

body.genre-trial .rcalc__entry {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0 10px;
}

body.genre-trial .rcalc__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	min-height: 46px;
	border: 0;
	background: transparent;
	color: var(--t-ink);
	font-family: var(--font-min);
	font-size: 1.45rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	outline: none;
}

body.genre-trial .rcalc__unit {
	margin-left: 6px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--sub);
}

body.genre-trial .rcalc__date {
	min-height: 46px;
	padding: 6px 12px;
	border: 2px solid var(--t-ink);
	border-radius: 14px;
	background: #fff;
	color: var(--t-ink);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
}

body.genre-trial .rcalc__desc {
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--sub);
}

body.genre-trial .rcalc__more {
	margin-top: 14px;
	border-top: 1.5px dashed var(--hair);
	padding-top: 10px;
}

body.genre-trial .rcalc__more-summary {
	cursor: pointer;
	padding: 8px 0;
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--t-blue);
	list-style: none;
}

body.genre-trial .rcalc__more-summary::-webkit-details-marker {
	display: none;
}

body.genre-trial .rcalc__more-summary::before {
	content: "\FF0B";
	margin-right: 6px;
}

body.genre-trial .rcalc__more[open] .rcalc__more-summary::before {
	content: "\FF0D";
}

body.genre-trial .rcalc__more .rcalc__inputs {
	margin-top: 8px;
}

/* 結果：青い面 */

body.genre-trial .rcalc__result {
	position: relative;
	margin-top: 18px;
	padding: 18px 16px 18px;
	border-radius: 20px;
	background: var(--t-blue);
	color: #fff;
	outline: none;
}

body.genre-trial .rcalc__result-label,
body.genre-trial .rcalc__sub {
	margin: 0 0 6px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.8);
}

body.genre-trial .rcalc__headline {
	padding-right: 64px;
}

body.genre-trial .rcalc__hl-label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.5;
}

body.genre-trial .rcalc__hl-value {
	display: block;
	font-family: var(--font-min);
	font-size: clamp(3.5rem, 15vw, 5.2rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* 桁が増えるほど小さく（5桁までは 56px 以上）。折り返さない。 */
body.genre-trial .rcalc__hl-value[data-len="6"] {
	font-size: clamp(2.9rem, 12.5vw, 5rem);
}

body.genre-trial .rcalc__hl-value[data-len="7"],
body.genre-trial .rcalc__hl-value[data-len="8"] {
	font-size: clamp(2.3rem, 10vw, 4.6rem);
}

body.genre-trial .rcalc__hl-value[data-len="9"],
body.genre-trial .rcalc__hl-value[data-len="10"],
body.genre-trial .rcalc__hl-value[data-len="11"] {
	font-size: clamp(1.9rem, 8vw, 4rem);
}

body.genre-trial .rcalc__headline[data-kind="loss"] .rcalc__hl-value {
	color: var(--t-red);
}

body.genre-trial .rcalc__headline[data-kind="gain"] .rcalc__hl-value {
	color: var(--t-yellow);
}

body.genre-trial .rcalc__headline[data-kind="zero"] .rcalc__hl-value {
	color: var(--t-green);
}

body.genre-trial .rcalc__headline[data-kind="neutral"] .rcalc__hl-value {
	font-size: clamp(1.9rem, 8.5vw, 3rem);
}

body.genre-trial .rcalc__hl-unit {
	margin-left: 4px;
	font-size: 0.4em;
}

body.genre-trial .rcalc__hl-note {
	margin: 8px 0 0;
	font-size: 0.8rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
}

/* ポンの印（検査済）。押す動きは JS が is-pressed を付け直す。 */
body.genre-trial .rcalc__stamp {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border: 2.5px solid var(--t-yellow);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--t-blue), inset 0 0 0 3.5px var(--t-yellow);
	color: var(--t-yellow);
	font-size: 0.6rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	transform: rotate(-12deg);
}

body.genre-trial .rcalc__stamp .pon--stamp {
	width: 22px;
	height: 28px;
}

body.genre-trial .rcalc__stamp.is-pressed {
	animation: aitools-stamp 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes aitools-stamp {
	from {
		transform: rotate(-12deg) scale(1.8);
		opacity: 0;
	}
	to {
		transform: rotate(-12deg) scale(1);
		opacity: 1;
	}
}

body.genre-trial .rcalc__rows {
	display: grid;
	gap: 8px;
	margin: 16px 0 0;
}

body.genre-trial .rcalc__row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 4px 10px;
	padding: 10px 14px;
	border-radius: 14px;
	background: #fff;
	color: var(--t-ink);
}

body.genre-trial .rcalc__row--hot {
	background: var(--t-yellow);
}

body.genre-trial .rcalc__row dt {
	font-size: 0.8rem;
	font-weight: 800;
}

body.genre-trial .rcalc__row dd {
	margin: 0;
	font-family: var(--font-min);
	font-size: 1.35rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.genre-trial .rcalc__row dd small {
	margin-left: 2px;
	font-size: 0.6em;
}

body.genre-trial .rcalc__row p {
	grid-column: 1 / -1;
	margin: 2px 0 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--sub);
}

/* 積み上げ棒と、その表 */
body.genre-trial .rcalc__bars {
	margin-top: 16px;
}

body.genre-trial .rcalc__bar {
	display: flex;
	height: 16px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.18);
}

body.genre-trial .rcalc__bar-part {
	display: block;
	height: 100%;
	transition: width 0.35s;
}

body.genre-trial .rcalc__bar-part--0 { background: var(--t-yellow); }
body.genre-trial .rcalc__bar-part--1 { background: #fff; }
body.genre-trial .rcalc__bar-part--2 { background: var(--t-sky); }
body.genre-trial .rcalc__bar-part--3 { background: var(--t-green); }
body.genre-trial .rcalc__bar-part--4 { background: #ff9d94; }

body.genre-trial .rcalc__bar-table,
body.genre-trial .article .article__body .rcalc__bar-table {
	width: 100%;
	margin: 8px 0 0;
	border-collapse: collapse;
	font-size: 0.8rem;
	color: #fff;
}

body.genre-trial .rcalc__bar-table tr,
body.genre-trial .article .article__body .rcalc__bar-table tr,
body.genre-trial .article .article__body .rcalc__bar-table tbody tr:nth-child(even) {
	background: transparent;
}

body.genre-trial .rcalc__bar-table th,
body.genre-trial .rcalc__bar-table td,
body.genre-trial .article .article__body .rcalc__bar-table :is(th, td) {
	padding: 4px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: #fff;
	text-align: left;
	font-weight: 700;
}

body.genre-trial .rcalc__bar-table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

body.genre-trial .rcalc__bar-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: 0;
}

/* 判定・手順 */
body.genre-trial .rcalc__checks,
body.genre-trial .rcalc__todo,
body.genre-trial .rcalc__exits,
body.genre-trial .rcalc__actions {
	margin-top: 18px;
}

/* 記事本文のリストや表の飾り（余白・点・縞）を計算装置の中では使わない。詳細度は本文側より上にそろえる。 */
body.genre-trial .rcalc__checks ul,
body.genre-trial .rcalc__todo ol,
body.genre-trial .article .article__body .rcalc :is(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
	counter-reset: todo;
}

body.genre-trial .rcalc__item,
body.genre-trial .article .article__body .rcalc li.rcalc__item {
	position: relative;
	margin: 0;
	padding: 9px 12px 9px 40px;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.7;
}

body.genre-trial .article .article__body .rcalc li.rcalc__item::marker {
	content: "";
}

body.genre-trial .rcalc__item::before,
body.genre-trial .article .article__body .rcalc li.rcalc__item::before {
	content: "i";
	position: absolute;
	left: 12px;
	top: 11px;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--t-blue);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 900;
	line-height: 1;
	transform: none;
}

body.genre-trial .rcalc__item--stop,
body.genre-trial .article .article__body .rcalc li.rcalc__item--stop { background: var(--t-red-text); }
body.genre-trial .rcalc__item--stop::before,
body.genre-trial .article .article__body .rcalc li.rcalc__item--stop::before { content: "!"; background: #fff; color: var(--t-red-text); }
body.genre-trial .rcalc__item--warn,
body.genre-trial .article .article__body .rcalc li.rcalc__item--warn { background: rgba(255, 225, 77, 0.22); }
body.genre-trial .rcalc__item--warn::before,
body.genre-trial .article .article__body .rcalc li.rcalc__item--warn::before { content: "!"; background: var(--t-yellow); color: var(--t-on-yellow); }
body.genre-trial .rcalc__item--ok,
body.genre-trial .article .article__body .rcalc li.rcalc__item--ok { background: rgba(33, 181, 107, 0.3); }
body.genre-trial .rcalc__item--ok::before,
body.genre-trial .article .article__body .rcalc li.rcalc__item--ok::before { content: "\2713"; background: var(--t-green); color: #fff; }

body.genre-trial .rcalc__todo .rcalc__item,
body.genre-trial .article .article__body .rcalc .rcalc__todo li.rcalc__item {
	background: #fff;
	color: var(--t-ink);
}

body.genre-trial .rcalc__todo .rcalc__item::before,
body.genre-trial .article .article__body .rcalc .rcalc__todo li.rcalc__item::before {
	counter-increment: todo;
	content: counter(todo);
	background: var(--t-ink);
	color: var(--t-yellow);
	font-family: var(--font-min);
	font-weight: 400;
}

/* 出口（黄の主ボタン）と、カレンダー・共有（白い縁の副ボタン） */
body.genre-trial .rcalc__exit {
	margin-top: 8px;
}

body.genre-trial .rcalc__cta,
body.genre-trial .rcalc__cta:hover {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--t-yellow);
	color: var(--t-on-yellow);
	font-size: 0.95rem;
	font-weight: 900;
	text-align: center;
	text-decoration: none;
}

body.genre-trial .rcalc__cta--secondary,
body.genre-trial .rcalc__cta--secondary:hover {
	background: transparent;
	border: 2px solid #fff;
	color: #fff;
}

body.genre-trial .rcalc__actions {
	display: grid;
	gap: 8px;
}

body.genre-trial .rcalc__action {
	min-height: 48px;
	padding: 10px 16px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 800;
	cursor: pointer;
}

body.genre-trial .rcalc__action:hover {
	background: rgba(255, 255, 255, 0.12);
}

body.genre-trial .rcalc__toast {
	display: block;
	min-height: 1.2em;
	font-size: 0.8rem;
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s;
}

body.genre-trial .rcalc__toast.is-on {
	opacity: 1;
}

body.genre-trial .rcalc__noscript,
body.genre-trial .rcalc__note {
	margin: 14px 0 0;
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--sub);
}

body.genre-trial .rcalc .offer-checked {
	margin-top: 12px;
}

body.genre-trial .rcalc__next {
	margin: 14px 0 0;
	font-size: 0.9rem;
	font-weight: 800;
}

body.genre-trial .rcalc__next a::after {
	content: " \2192";
}

/* PC：入力を2列に */
@media (min-width: 700px) {
	body.genre-trial .rcalc,
	body.genre-trial .article .article__body .rcalc {
		padding: 26px 26px 28px;
	}

	body.genre-trial .rcalc__inputs {
		grid-template-columns: 1fr 1fr;
		gap: 16px 20px;
	}

	body.genre-trial .rcalc__field--choice {
		grid-column: 1 / -1;
	}

	body.genre-trial .rcalc__actions {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- 記事のまわり：確認記録・結論の囲み・表 ---------- */

body.genre-trial .article-summary,
body.genre-trial .article .article__body .article-summary {
	border: 3px solid var(--t-ink);
	border-radius: 18px;
	background: #fff;
}

body.genre-trial .ledger {
	border-color: var(--t-ink);
}

body.genre-trial .stamp {
	border-color: var(--t-blue);
	color: var(--t-blue);
	box-shadow: inset 0 0 0 2px var(--t-paper), inset 0 0 0 3px var(--t-blue);
}

body.genre-trial .compare-wrap,
body.genre-trial .article__scroll {
	border-radius: 14px;
}

body.genre-trial .tool-cta {
	border-radius: 18px;
	border-color: var(--t-ink);
}

/* ---------- ダークモード ---------- */

@media (prefers-color-scheme: dark) {
	body.genre-trial {
		--t-blue: #3a47ff;
		--t-blue-deep: #8a95ff;
		--t-paper: #0b0d2a;
		--t-ink: #f3f2ec;
		--t-red-text: #ff8f84;
		--t-green-text: #5ed39a;
		--card: #14173d;
		--sub: #b7b9cf;
		--hair: #33365c;
		--shu-soft: #1c2160;
		--c-bg-cta-subtle: #3b3510;
		--c-marker: #3b3510;
		--c-text-soft: #d6d5e6;
	}

	body.genre-trial .rcalc,
	body.genre-trial .article .article__body .rcalc,
	body.genre-trial .rcalc__control,
	body.genre-trial .rcalc__option,
	body.genre-trial .rcalc__date,
	body.genre-trial .front-tools__link,
	body.genre-trial .article-summary,
	body.genre-trial .article .article__body .article-summary {
		background: #14173d;
		color: var(--t-ink);
	}

	body.genre-trial .rcalc__step {
		background: #1c2160;
	}

	body.genre-trial .rcalc__row,
	body.genre-trial .rcalc__todo .rcalc__item {
		background: #0b0d2a;
		color: var(--t-ink);
	}

	body.genre-trial .rcalc__row--hot,
	body.genre-trial .rcalc__option[aria-checked="true"],
	body.genre-trial .front-tools__link:hover {
		background: var(--t-yellow);
		color: #0b0d2a;
	}

	body.genre-trial .rcalc__example {
		background: #3b3510;
		color: var(--t-ink);
	}

	body.genre-trial .site-header {
		background: var(--t-paper);
	}

	body.genre-trial .site-footer {
		background: #05061a;
	}

	/* 紺のカードの上で青い印が沈むので、明るい青にする。 */
	body.genre-trial .stamp {
		border-color: var(--t-blue-deep);
		color: var(--t-blue-deep);
		box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px var(--t-blue-deep);
	}
}

/* ---------- 2026-09-19：結果をたたむ（大きな数字・判定の1行・ボタンだけを開いて見せる） ---------- */

body.genre-trial .rcalc__verdict,
body.genre-trial .article .article__body .rcalc__verdict {
	margin: 14px 0 0;
	font-weight: 700;
}

body.genre-trial .rcalc__verdict[hidden] {
	display: none;
}

body.genre-trial .rcalc__detail {
	margin-top: 14px;
	border-top: 1.5px solid rgba(255, 255, 255, 0.25);
}

body.genre-trial .rcalc__detail-summary {
	padding: 12px 0 2px;
	font-size: 0.85rem;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
	list-style: none;
}

body.genre-trial .rcalc__detail-summary::-webkit-details-marker {
	display: none;
}

body.genre-trial .rcalc__detail-summary::before {
	content: "\FF0B";
	margin-right: 6px;
}

body.genre-trial .rcalc__detail[open] .rcalc__detail-summary::before {
	content: "\FF0D";
}

body.genre-trial .rcalc__example {
	padding: 4px 10px;
	font-size: 0.75rem;
}

/* ==================================================================
   商品の棚（shortcodes/product-shelf.php・2026-09-19）
   色は全サイト共通のトークンだけで書く（デザイン A の差し替えで一緒に変わる）。
   数字と表は飾らない：内容量・単価はくっきり、行は区切り線だけ。
   ================================================================== */

.shelf {
	margin: 1.5rem 0;
}

.shelf__lead,
.shelf__note,
.shelf__foot {
	font-size: 0.875rem;
	color: var(--sub);
}

.shelf__rows {
	list-style: none;
	margin: 0.75rem 0;
	padding: 0;
	border-top: 1px solid var(--hair);
}

.shelf__row {
	display: grid;
	gap: 0.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--hair);
}

.shelf__row.is-best {
	box-shadow: inset 4px 0 0 var(--shu);
	padding-left: 0.875rem;
}

.shelf__name {
	margin: 0;
	font-weight: 700;
	line-height: 1.5;
}

.shelf__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	font-size: 0.9375rem;
}

.shelf__facts div {
	display: flex;
	gap: 0.5rem;
}

.shelf__facts dt {
	color: var(--sub);
}

.shelf__facts dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.shelf__calc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.shelf__calc[hidden] {
	display: none;
}

.shelf__calc input {
	width: 7.5em;
	padding: 0.4rem 0.5rem;
	font: inherit;
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--hair);
	border-radius: 8px;
	background: var(--card);
	color: var(--ink);
}

.shelf__unit {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.shelf__buy {
	justify-self: start;
}

.shelf__api,
.shelf__checked {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--sub);
}

.shelves {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.75rem;
	margin: 1rem 0;
	padding: 0;
}

.shelves__item > a,
.shelves__item > span {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--hair);
	border-radius: var(--radius, 12px);
	background: var(--card);
	color: var(--ink);
	text-decoration: none;
}

.shelves__name {
	font-weight: 700;
	font-size: 1.0625rem;
}

.shelves__meta {
	font-size: 0.8125rem;
	color: var(--sub);
}

/* ==================================================================
   /trial/ デザイン A「森の図鑑」（2026-09-19・docs/引き継ぎ_2026-09-19.md D-3）
   青の皮（上）の札を後勝ちで差し替える。見本として /trial/ にだけ当て、本人の OK のあと全サイトへ広げる。

   - 地は白い紙、文字は深い森の緑（真っ黒は使わない）、差し色はセージとテラコッタ
   - 不思議さは挿絵（inc/specimen.php の細い線）と余白だけで出す。表・計算装置・数字は飾らず、くっきり
   - 黄の地に白い文字は使わない。主ボタンは深い緑の地に白い文字。コントラストは AA 以上
     （森 #2d5a43 に白 7.4:1／文字 #1f3a2e と紙 #fbfaf5 11.9:1／テラコッタ文字 #a4492a と紙 5.6:1）
   - 札の名前（--t-blue など）は青の皮のまま使い回す。全サイトへ広げるときに名前ごと整理する
   ================================================================== */

body.genre-trial {
	--t-blue: #2d5a43;
	--t-blue-deep: #234834;
	--t-paper: #fbfaf5;
	--t-yellow: #e3ecd9;
	--t-yellow-deep: #cfdcc2;
	--t-ink: #1f3a2e;
	--t-red: #c0643c;
	--t-red-text: #a4492a;
	--t-green: #4f8a66;
	--t-green-text: #2f6b4c;
	--t-sky: #b9ccb4;
	--t-sage: #8fa98f;
	--t-on-yellow: #1f3a2e;
	--t-on-dark: #f6f4ec;

	--sub: #56675c;
	--hair: #dde3d6;
	--shu-soft: #e8efe3;
	--c-text-soft: #2f463a;
	--c-bg-cta-subtle: #eef3e8;
	--c-marker: #eef3e8;
	--font-min: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
	--radius: 12px;
	--radius-lg: 18px;
	--box-radius: 12px;
}

body.genre-trial :is(.article__title, .article .article__body h2, .article .article__body h3, .related__heading, .section__title, .page-header__title, .hero__title, .card__title, .stamp__word) {
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* 見出しの下線は、図鑑の罫のような細い2本線。 */
body.genre-trial .article .article__body h2 {
	padding-bottom: 8px;
	border-bottom: 3px double var(--t-sage);
}

body.genre-trial .site-header {
	border-bottom: 1px solid var(--hair);
}

body.genre-trial .site-header__genre {
	border-color: var(--t-blue);
	background: transparent;
	color: var(--t-blue);
}

body.genre-trial .site-footer,
body.genre-trial .network-bar {
	background: #1f3a2e;
}

body.genre-trial .site-footer__word {
	font-weight: 800;
	color: var(--t-yellow);
}

/* 主ボタン：深い緑の地に白い文字。 */
body.genre-trial .button,
body.genre-trial .cta,
body.genre-trial .rcalc__cta {
	background: var(--t-blue);
	color: #fff;
	font-weight: 700;
}

body.genre-trial .button:hover,
body.genre-trial .cta:hover,
body.genre-trial .rcalc__cta:hover {
	background: var(--t-blue-deep);
	color: #fff;
}

body.genre-trial .cta .ad-mark,
body.genre-trial .rcalc__cta .ad-mark {
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

/* ---------- 表紙：白い紙の上に一言としだの枝、その下に「何を買う？」の棚 ---------- */

body.genre-trial .hero--calc {
	padding-block: 36px 8px;
	background: var(--t-paper);
	color: var(--t-ink);
}

/* 棚と検査の節（l-container・中身 688px）と左端をそろえる。 */
body.genre-trial .hero--calc .hero__text {
	max-width: 688px;
	padding-right: 0;
}

body.genre-trial .hero--calc .hero__title {
	max-width: 11em;
	margin: 0 0 14px;
	font-size: clamp(2rem, 8.4vw, 3.6rem);
	line-height: 1.25;
	color: var(--t-ink);
}

body.genre-trial .hero--calc .hero__lead {
	max-width: 30em;
	color: var(--c-text-soft);
}

body.genre-trial .hero__plate {
	position: absolute;
	top: 12px;
	right: max(8px, calc(50% - 400px));
	width: clamp(96px, 26vw, 190px);
	height: auto;
	color: var(--t-sage);
	stroke-width: 1.1;
	opacity: 0.55;
	pointer-events: none;
}

body.genre-trial .hero--shelves .hero__inner {
	position: relative;
	z-index: 1;
}

body.genre-trial .hero__shelves {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding-bottom: 28px;
}

body.genre-trial .hero__shelves-title {
	margin: 18px 0 12px;
	padding-bottom: 8px;
	border-bottom: 3px double var(--t-sage);
	font-family: var(--font-min);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--t-ink);
}

/* 棚のカード：標本のラベル。番号・挿絵・名前・件数。 */
body.genre-trial .shelves {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin: 0;
}

body.genre-trial .shelves__item > a,
body.genre-trial .shelves__item > span {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 12px 12px;
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	background: #fff;
	color: var(--t-ink);
	transition: border-color 0.15s, box-shadow 0.15s;
}

body.genre-trial .shelves__item > a:hover,
body.genre-trial .shelves__item > a:focus-visible {
	border-color: var(--t-blue);
	box-shadow: 0 0 0 1px var(--t-blue);
}

body.genre-trial .shelves__no {
	position: absolute;
	top: 6px;
	right: 10px;
	font-family: var(--font-min);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	color: var(--t-sage);
}

body.genre-trial .shelves__art {
	width: 40px;
	height: 40px;
	margin-bottom: 4px;
	color: var(--t-blue);
	stroke-width: 1.4;
}

body.genre-trial .shelves__item:nth-child(3n + 2) .shelves__art {
	color: var(--t-red);
}

body.genre-trial .shelves__item:nth-child(3n) .shelves__art {
	color: var(--t-green);
}

body.genre-trial .shelves__name {
	font-family: var(--font-min);
	font-weight: 800;
	/* 375px 幅の2列で「トイレットペーパー」が1行に収まる大きさ。 */
	font-size: clamp(0.88rem, 0.5rem + 1.9vw, 0.95rem);
	letter-spacing: 0;
	line-height: 1.35;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

body.genre-trial .shelves__meta {
	font-size: 0.75rem;
	color: var(--sub);
	font-variant-numeric: tabular-nums;
}

/* 検査の節：1画面目の下。淡いセージの地に、数字の面（結果）だけ深い緑。 */
body.genre-trial .front-calc {
	padding-block: 28px 8px;
	border-top: 1px solid var(--hair);
	background: var(--shu-soft);
}

body.genre-trial .front-calc__inner {
	max-width: 720px;
}

body.genre-trial .front-calc__title {
	margin: 0 0 12px;
}

/* ---------- 帯：淡いセージの地に森の文字 ---------- */

body.genre-trial .band {
	border-block: 1px solid var(--hair);
	background: var(--t-yellow);
	font-weight: 700;
}

body.genre-trial .band__item::after {
	content: "\2766";
	font-size: 0.9em;
	vertical-align: 0;
	color: var(--t-green-text);
}

/* ---------- 計算装置 ---------- */

body.genre-trial .rcalc__result {
	background: var(--t-ink);
}

/* 大きな数字は明朝でなく、くっきりした字（飾らない）。 */
body.genre-trial .rcalc__hl-value {
	font-family: var(--font-body);
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* 深い緑の面の上では、テラコッタを明るくして読めるように（6.9:1）。 */
body.genre-trial .rcalc__headline[data-kind="loss"] .rcalc__hl-value {
	color: #f2b596;
}

body.genre-trial .rcalc__headline[data-kind="zero"] .rcalc__hl-value {
	color: #b9dcc4;
}

body.genre-trial .rcalc__example {
	background: var(--t-yellow);
	color: var(--t-on-yellow);
}

body.genre-trial .rcalc__bar-part--0 {
	background: #f2b596;
}

body.genre-trial .rcalc__bar-part--1 {
	background: #b9dcc4;
}

/* ---------- 商品の棚（カテゴリページ）---------- */

body.genre-trial .shelf__row.is-best {
	box-shadow: inset 4px 0 0 var(--t-red);
}

body.genre-trial .shelf__row.is-best .shelf__unit {
	color: var(--t-red-text);
}

/* ---------- ダークモード：夜の森 ---------- */

@media (prefers-color-scheme: dark) {
	body.genre-trial {
		--t-blue: #3e7a5a;
		--t-blue-deep: #9cc9ad;
		--t-paper: #122019;
		--t-ink: #e8efe6;
		--t-yellow: #22382c;
		--t-yellow-deep: #2b4636;
		--t-on-yellow: #e8efe6;
		--t-red-text: #f0a784;
		--t-green-text: #9cc9ad;
		--t-sage: #6f8d74;
		--card: #1a2c22;
		--sub: #aebdb2;
		--hair: #2e4638;
		--shu-soft: #17281f;
		--c-text-soft: #d3ddd4;
		--c-bg-cta-subtle: #1f3327;
		--c-marker: #1f3327;
	}

	body.genre-trial .rcalc,
	body.genre-trial .article .article__body .rcalc,
	body.genre-trial .rcalc__control,
	body.genre-trial .rcalc__option,
	body.genre-trial .rcalc__date,
	body.genre-trial .front-tools__link,
	body.genre-trial .article-summary,
	body.genre-trial .article .article__body .article-summary,
	body.genre-trial .shelves__item > a,
	body.genre-trial .shelves__item > span {
		background: var(--card);
		color: var(--t-ink);
	}

	body.genre-trial .rcalc__step {
		background: #22382c;
	}

	body.genre-trial .rcalc__row,
	body.genre-trial .rcalc__todo .rcalc__item {
		background: var(--t-paper);
		color: var(--t-ink);
	}

	body.genre-trial .rcalc__row--hot,
	body.genre-trial .rcalc__option[aria-checked="true"],
	body.genre-trial .front-tools__link:hover {
		background: #2b4636;
		color: var(--t-ink);
	}

	body.genre-trial .rcalc__result,
	body.genre-trial .site-footer,
	body.genre-trial .network-bar {
		background: #0c1611;
	}

	body.genre-trial .stamp {
		border-color: var(--t-blue-deep);
		color: var(--t-blue-deep);
		box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px var(--t-blue-deep);
	}

	body.genre-trial .shelves__item:nth-child(3n + 2) .shelves__art {
		color: #f0a784;
	}

	body.genre-trial .shelves__art,
	body.genre-trial .shelves__item:nth-child(3n) .shelves__art {
		color: #9cc9ad;
	}

	/* 夜の森では淡いセージの札が地に沈むので、明るい緑にする。 */
	body.genre-trial .site-footer__word {
		color: #9cc9ad;
	}
}

/*
 * A8のボタン（2026-10-02）。A8は広告コードの改変（文言の変更・URLだけ抜く・計測画像の削除）を禁止しているので、
 * <span class="cta cta--asp"> の中に A8 のコードをそのまま入れ、見た目は外側の枠に付ける（CSSの装飾はA8のFAQで可）。
 * 中の <a> は色と下線だけ合わせ、::after で枠いっぱいを押せる範囲にする。1x1 の計測画像は流れから外す。
 */
.cta--asp {
	position: relative;
	cursor: pointer;
}

.cta--asp a,
.cta--asp a:hover,
.cta--asp a:visited {
	color: inherit;
	text-decoration: none;
}

.cta--asp a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cta--asp img[width="1"] {
	position: absolute;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.cta--asp a:focus-visible {
	outline: none;
}

.cta--asp:focus-within {
	outline: 2px solid var(--c-cta-dark);
	outline-offset: 3px;
}

/* A8の文言は変えられず長いことがある（例：楽器の買取屋さんは30字）。表の小さいボタンでも折り返す。 */
.cta--asp.cta--sm {
	white-space: normal;
	text-align: left;
}

/*
 * 住所の判定（[area_check]・2026-10-03・暮らしの業者）。見本は docs/design-mock/給湯器-図解案.html と 給湯器-判定ポン.html の B。
 * 白地のポスター：巨大な明朝 → 図解（名前は絵の左右の余白・線でつなぐ）→ 都道府県 → 印影の答え → 数字3つ → 広告。
 * 文字と絵を重ねない。答えと広告は、選んだ都道府県で切り替える（:has と data-state の両方）。
 */
.ac {
	--ac-paper: #fff;
	--ac-ng: #9aa4b2;
	margin: 0 0 var(--space-5);
	background: var(--ac-paper);
	color: var(--ink);
	border: 1px solid var(--hair);
}

.ac__hero {
	padding: 22px 20px 18px;
}

.article__body .ac p {
	margin: 0;
}

.ac__kicker {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
}

.article__body .ac .ac__title {
	font-family: var(--font-min);
	font-weight: 800;
	font-size: clamp(56px, 17vw, 88px);
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 22px 0 10px;
}

.ac__fig {
	display: block;
	width: 100%;
	max-width: 460px;
	height: auto;
	margin: 6px auto 0;
}

.ac__fig .f-unit,
.ac__fig .f-remote {
	fill: var(--card);
	stroke: var(--ink);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ac__fig .f-unit path,
.ac__fig .f-remote path {
	fill: none;
}

.ac__fig .f-paper {
	fill: var(--ac-paper);
}

.ac__fig .f-thin {
	stroke-width: 2.5;
}

.ac__fig .f-dash {
	stroke-dasharray: 5 4;
}

.ac__fig .f-shu {
	fill: var(--shu);
	stroke-width: 2.5;
}

.ac__fig .f-lead {
	stroke: var(--ink);
	stroke-width: 1.2;
	fill: none;
}

.ac__fig .f-lead circle {
	fill: var(--ink);
	stroke: none;
}

.ac__fig .f-text {
	fill: var(--ink);
}

.ac__fig .f-name {
	font-size: 15px;
	font-weight: 700;
}

.ac__fig .f-note {
	font-size: 11px;
	fill: var(--sub);
}

.ac__fig .f-no {
	fill: var(--shu);
	font-family: var(--font-min);
}

.ac__fig .f-hand {
	font-family: "Yomogi", cursive;
	font-size: 16px;
	fill: var(--ink);
}

.ac__sub {
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	margin-top: 10px !important;
}

.ac__en {
	display: block;
	font-size: 9px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--sub);
	margin-top: 4px;
}

.ac__check {
	padding: 22px 20px;
	border-top: 1px solid var(--hair);
}

.ac__prefs {
	border: 0;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ac__q {
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 12px;
	padding: 0;
}

.ac__chip {
	position: relative;
	cursor: pointer;
}

.ac__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ac__chip span {
	display: inline-block;
	border: 1px solid var(--ink);
	border-radius: 99px;
	padding: 6px 16px;
	font-size: 14px;
	line-height: 1.4;
	min-height: 32px;
}

.ac__radio:checked + span {
	background: var(--ink);
	color: var(--ac-paper);
}

.ac__radio:focus-visible + span {
	outline: 2px solid var(--shu);
	outline-offset: 2px;
}

.ac__answers {
	border-top: 1px solid var(--hair);
}

.ac__ans {
	display: none;
	align-items: center;
	gap: 18px;
	padding: 16px 0;
}

.article__body .ac .ac__ans--idle {
	display: block;
	color: var(--sub);
	font-size: 14px;
}

.ac__seal {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
}

.ac__seal--ok {
	stroke: var(--shu);
}

.ac__seal--ng {
	stroke: var(--ac-ng);
}

.ac__who {
	display: block;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--sub);
}

.ac__verdict {
	display: block;
	font-family: var(--font-min);
	font-size: 22px;
	line-height: 1.35;
	margin: 2px 0 4px;
}

.ac__ans p {
	font-size: 13px;
	color: var(--sub);
	line-height: 1.6;
}

.ac__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 6px;
	border-top: 1px solid var(--ink);
}

.ac__facts div {
	padding-top: 10px;
	font-size: 11px;
	color: var(--sub);
	line-height: 1.4;
}

.ac__facts b {
	display: block;
	color: var(--ink);
	font-family: var(--font-min);
	font-size: clamp(17px, 5vw, 22px);
	line-height: 1.2;
	margin-top: 4px;
	white-space: nowrap;
}

/* 広告は、成果になる地域を選んだときだけ（data-state="ok"）。それまでは出さない。 */
.ac__ad {
	display: none;
	margin-top: 20px;
}

.ac__adlabel {
	font-size: 11px;
	color: var(--sub);
	margin-bottom: 6px !important;
}

.article__body .ac .ac__cta {
	display: block;
	width: 100%;
	border-radius: 99px;
	background: var(--ink);
	color: var(--ac-paper);
	padding: 14px 18px;
	font-size: 16px;
}

.article__body .ac .ac__cta .ad-mark {
	display: none; /* 「広告」は上の小見出しで示す。ボタンの中に2回出さない */
}

.ac__date {
	display: block;
	font-size: 12px;
}

.ac[data-state="ok"] .ac__ans--ok,
.ac[data-state="off"] .ac__ans--off,
.ac[data-state="out"] .ac__ans--out,
.ac:has(.ac__radio--ok:checked) .ac__ans--ok,
.ac:has(.ac__radio--off:checked) .ac__ans--off,
.ac:has(.ac__radio--out:checked) .ac__ans--out {
	display: flex;
}

.article__body .ac:not([data-state="idle"]) .ac__ans--idle,
.article__body .ac:has(.ac__radio:checked) .ac__ans--idle {
	display: none;
}

.ac[data-state="ok"] .ac__ad,
.ac:has(.ac__radio--ok:checked) .ac__ad {
	display: block;
}

.ac:has(.ac__radio--off:checked) .ac__ad,
.ac:has(.ac__radio--out:checked) .ac__ad {
	display: none;
}

.ac__audit {
	margin-top: 22px;
	border-top: 1px solid var(--hair);
	padding-top: 12px;
	font-size: 13px;
}

.ac__audit summary {
	cursor: pointer;
	font-weight: 700;
}

.article__body .ac__audit ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.article__body .ac__audit li + li {
	margin-top: 14px;
}

.ac__topic {
	font-weight: 700;
}

.ac__quote {
	color: var(--sub);
}

.ac__ask {
	margin-top: 4px !important;
}

.ac__src {
	margin-top: 12px !important;
	color: var(--sub);
	font-size: 12px;
}

@media (prefers-color-scheme: dark) {
	.ac {
		--ac-paper: var(--card);
		--ac-ng: #7f8a99;
	}
}

/* ==================================================================
   暮らしの業者（body.genre-kurashi・2026-10-03 本人「白ベースにして。黒だと不信感がある」）
   - 地は真っ白。真っ黒の面（上の帯・フッター・塗りの札・黒いボタン）は使わない
   - 文字は青みのある濃い灰（#1d2329）。印影の朱だけを差し色にする
   - 端末がダークモードでも白のまま（困っている人が開くページで、見た目が変わると別のサイトに見える）
   ================================================================== */
body.genre-kurashi {
	color-scheme: light;
	--paper: #fff;
	--card: #f6f7f9;
	--ink: #1d2329;
	--sub: #5b6470;
	--hair: #e2e5e9;
	--shu: #e0412b;
	--shu-text: #b9301b;
	--shu-soft: #fdeeea;
	--c-text-soft: #39414a;
	--c-ink: #1d2329;
	--c-cta: #c8321c;
	--c-cta-dark: #a52814;
	/* :root で作った別名（--c-text など）は :root の値で固まるので、ここで作り直す。 */
	--c-text: var(--ink);
	--c-text-muted: var(--sub);
	--c-bg: var(--paper);
	--c-bg-subtle: var(--card);
	--c-border: var(--hair);
	--c-brand: var(--ink);
	--c-brand-dark: var(--ink);
	--c-bg-cta-subtle: var(--shu-soft);
	--c-marker: var(--shu-soft);
	background: #fff;
	color: var(--ink);
}

@media (prefers-color-scheme: dark) {
	body.genre-kurashi {
		color-scheme: light;
		--paper: #fff;
		--card: #f6f7f9;
		--ink: #1d2329;
		--sub: #5b6470;
		--hair: #e2e5e9;
		--shu: #e0412b;
		--shu-text: #b9301b;
		--shu-soft: #fdeeea;
		--c-text-soft: #39414a;
		--c-ink: #1d2329;
		--c-cta: #c8321c;
		--c-cta-dark: #a52814;

		/* :root で作った別名（--c-text など）は :root の値で固まるので、ここで作り直す。 */
		--c-text: var(--ink);
		--c-text-muted: var(--sub);
		--c-bg: var(--paper);
		--c-bg-subtle: var(--card);
		--c-border: var(--hair);
		--c-brand: var(--ink);
		--c-brand-dark: var(--ink);
		--c-bg-cta-subtle: var(--shu-soft);
		--c-marker: var(--shu-soft);
		background: #fff;
		color: var(--ink);
	}

	body.genre-kurashi .ac {
		--ac-paper: #fff;
		--ac-ng: #9aa4b2;
	}
}

/* 上の帯とフッター：黒い面をやめ、薄い灰の面に濃い文字。 */
body.genre-kurashi .network-bar,
body.genre-kurashi .site-footer {
	background: var(--card);
	color: var(--sub);
	border-top: 1px solid var(--hair);
}

body.genre-kurashi .network-bar {
	border-top: 0;
	border-bottom: 1px solid var(--hair);
}

body.genre-kurashi :is(.network-bar, .site-footer) :is(a, a:visited, .network-bar__home, .site-footer__name, .site-footer__heading, .site-footer__word) {
	color: var(--ink);
}

body.genre-kurashi :is(.site-footer__tagline, .site-footer__copyright) {
	color: var(--sub);
}

/* 塗りの札（種別・広告について・関連記事の種別）は、白地に枠線へ。 */
body.genre-kurashi :is(.chip--solid, .related__type),
body.genre-kurashi .article .article__body .disclosure .disclosure__heading {
	background: #fff;
	color: var(--ink);
	border: 1.5px solid var(--ink);
}

/* 判定：白い紙、選んだ県は朱の枠、広告のボタンは朱の地に白い文字。 */
body.genre-kurashi .ac {
	--ac-paper: #fff;
	border-color: var(--hair);
	box-shadow: 0 1px 2px rgba(29, 35, 41, 0.06), 0 8px 24px -12px rgba(29, 35, 41, 0.18);
}

body.genre-kurashi .ac__radio:checked + span {
	background: var(--shu-soft);
	border-color: var(--shu);
	color: var(--shu-text);
	font-weight: 700;
}

body.genre-kurashi .ac__facts {
	border-top-color: var(--hair);
}

body.genre-kurashi .article__body .ac .ac__cta {
	background: var(--c-cta);
	color: #fff;
}

body.genre-kurashi .article__body .ac .ac__cta:hover {
	background: var(--c-cta-dark);
}

/* ==================================================================
   暮らしの業者のデザインシステム（2026-10-04）
   市場調査（docs/調査_給湯器のデザイン_2026-10-04.md）から：
   - 検索上位の比較ブログは既製のテーマ・吹き出し・AIの写真で、どれも同じに見える
   - 信用されているのはガス会社・メーカー・大手の比較サービス。白地・1つの色・太い罫が無い・余白が広い・角が少し丸い
   基礎はデジタル庁デザインシステム（DADS）の考え方に合わせた：本文16px以上・行間1.7〜1.8・字間2%・8pxの余白の段・
   押せる所は44px以上・ピントの輪郭を出す。**色と形は自前**（行政のサイトに見せない。DADSの注意事項）。
   ================================================================== */
body.genre-kurashi {
	--k-ink: #1a1f24;
	--k-sub: #4d5763;
	--k-mute: #6b7581;
	--k-line: #d9dde2;
	--k-surface: #f5f7f9;
	--k-navy: #1a4f8b;
	--k-navy-soft: #e9f0f8;
	--k-ok: #1f7a4d;
	--k-radius: 8px;
	--k-radius-lg: 12px;
	--font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--ink: var(--k-ink);
	--c-text: var(--k-ink);
	--sub: var(--k-sub);
	--c-text-muted: var(--k-sub);
	--hair: var(--k-line);
	--c-border: var(--k-line);
	--card: var(--k-surface);
	--c-bg-subtle: var(--k-surface);
	font-family: var(--font-body);
	letter-spacing: 0.02em;
}

body.genre-kurashi a {
	color: var(--k-navy);
	text-decoration-color: rgba(26, 79, 139, 0.4);
	text-underline-offset: 0.2em;
}

body.genre-kurashi :focus-visible {
	outline: 2px solid var(--k-navy);
	outline-offset: 2px;
}

/* ヘッダー：白・下に細い線。ジャンル名は枠を付けず、灰色の字で。 */
body.genre-kurashi .site-header {
	background: #fff;
	border-bottom: 1px solid var(--k-line);
}

body.genre-kurashi .site-header__genre {
	border: 0;
	padding: 0;
	background: none;
	color: var(--k-sub);
	font-weight: 700;
	font-size: 0.8125rem;
}

body.genre-kurashi .site-header__brand {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--k-ink);
}

body.genre-kurashi .site-nav a {
	color: var(--k-ink);
	font-weight: 700;
	text-decoration: none;
}

body.genre-kurashi .breadcrumbs,
body.genre-kurashi .breadcrumbs a {
	color: var(--k-mute);
	font-size: 0.8125rem;
}

/* 記事の頭：明朝をやめ、ゴシックの太字で落ち着いた大きさに。 */
body.genre-kurashi .article .article__title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	line-height: 1.45;
	letter-spacing: 0.01em;
}

body.genre-kurashi .article__title .article__title-sub {
	display: block;
	margin-top: 8px;
	color: var(--k-sub);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.6;
}

body.genre-kurashi .chip,
body.genre-kurashi .chip--solid {
	border: 1px solid var(--k-line);
	border-radius: 999px;
	background: #fff;
	color: var(--k-sub);
	font-weight: 700;
	font-size: 0.75rem;
	padding: 2px 10px;
	text-decoration: none;
}

/* ポンの吹き出しは出さない（判定の図の中にポンがいる）。 */
body.genre-kurashi .article__header .pon-lead {
	display: none;
}

/* 確認記録：4マスの表をやめ、1行の小さな記録に。 */
body.genre-kurashi .article .ledger {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 12px 0 16px;
	padding: 0;
	border: 0;
}

body.genre-kurashi .article .ledger .ledger__item,
body.genre-kurashi .article .ledger .ledger__item:nth-child(n) {
	display: flex;
	gap: 6px;
	align-items: baseline;
	padding: 0;
	border: 0;
	background: none;
}

body.genre-kurashi .article .ledger dt {
	color: var(--k-mute);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.02em;
}

body.genre-kurashi .article .ledger dd {
	color: var(--k-sub);
	font-size: 0.75rem;
	font-weight: 700;
}

/* 広告の表記：1行の細い帯。 */
body.genre-kurashi .article .article__body .disclosure {
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	background: var(--k-surface);
}

body.genre-kurashi .article .article__body .disclosure .disclosure__heading {
	border: 0;
	border-radius: 4px;
	background: #fff;
	color: var(--k-sub);
	font-size: 0.75rem;
}

/* 見出し：番号と太い罫をやめる。左の細い棒だけ。 */
body.genre-kurashi .article .article__body > h2,
body.genre-kurashi .article .article__body .article-summary > h2 {
	margin-top: 48px;
	padding: 0 0 0 14px;
	border: 0;
	border-left: 4px solid var(--k-navy);
	font-family: var(--font-body);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1.5;
}

body.genre-kurashi .article .article__body > h2::before,
body.genre-kurashi .article .article__body .article-summary > h2::before {
	content: none;
}

body.genre-kurashi .article .article__body > :is(p, ul, ol) {
	font-size: 1rem;
	line-height: 1.8;
}

/* 先に結論：薄い面の箱に、チェックの印。 */
body.genre-kurashi .article .article__body .article-summary {
	padding: 20px;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	background: var(--k-surface);
}

body.genre-kurashi .article .article__body .article-summary > h2 {
	margin-top: 0;
}

body.genre-kurashi .article .article__body .article-summary :is(ul, ol) {
	margin-top: 12px;
	border-top: 0;
}

body.genre-kurashi .article .article__body .article-summary li {
	padding: 10px 0 10px 32px;
	border-bottom: 1px solid var(--k-line);
	font-size: 1rem;
	font-weight: 700;
}

body.genre-kurashi .article .article__body .article-summary li:last-child {
	border-bottom: 0;
}

body.genre-kurashi .article .article__body .article-summary li::before {
	content: "";
	top: 15px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--k-ok) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 18 18%22%3E%3Cpath d=%22M5 9.2l2.6 2.6L13 6.4%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* 目次・表・運営者：角を少し丸め、罫を細く。 */
body.genre-kurashi :is(.toc, .compare-wrap, .site-author) {
	border-radius: var(--k-radius-lg);
	border-color: var(--k-line);
}

body.genre-kurashi .article .article__body > blockquote {
	border-left: 3px solid var(--k-navy);
	border-radius: 0 var(--k-radius) var(--k-radius) 0;
	background: var(--k-navy-soft);
}

/* ---------- 判定（[area_check]）の作り直し ---------- */
body.genre-kurashi .ac {
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(26, 31, 36, 0.05), 0 12px 32px -16px rgba(26, 31, 36, 0.18);
}

body.genre-kurashi .ac__hero {
	padding: 20px 20px 4px;
}

body.genre-kurashi .ac__kicker {
	color: var(--k-sub);
	font-size: 0.8125rem;
	font-weight: 700;
}

body.genre-kurashi .article__body .ac .ac__title {
	font-size: clamp(48px, 14vw, 72px);
	margin: 12px 0 14px;
}

.ac__now {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 !important;
	padding: 10px 12px;
	border-radius: var(--k-radius, 8px);
	background: var(--k-surface, var(--c-bg-subtle, #f5f7f9));
	color: var(--k-ink, var(--c-text, inherit));
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.6;
}

.ac__dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--k-mute, #6b7581);
}

.ac__now.is-open .ac__dot {
	background: var(--k-ok, #1f7a4d);
	box-shadow: 0 0 0 4px rgba(31, 122, 77, 0.15);
}

body.genre-kurashi .ac__check {
	border-top: 0;
	padding-top: 16px;
}

body.genre-kurashi .ac__q {
	font-size: 1rem;
}

body.genre-kurashi .ac__chip span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-color: var(--k-line);
	font-size: 1rem;
}

body.genre-kurashi .ac__radio:checked + span {
	border-color: var(--k-navy);
	background: var(--k-navy-soft);
	color: var(--k-navy);
	box-shadow: inset 0 0 0 1px var(--k-navy);
}

body.genre-kurashi .ac__answers {
	border-top-color: var(--k-line);
}

body.genre-kurashi .ac__facts {
	gap: 8px;
	border-top: 0;
	margin-top: 8px;
}

body.genre-kurashi .ac__facts div {
	padding: 12px;
	border-radius: var(--k-radius);
	background: var(--k-surface);
	color: var(--k-sub);
	font-size: 0.75rem;
}

body.genre-kurashi .ac__facts b {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(1.0625rem, 4.6vw, 1.375rem);
	margin: 4px 0 2px;
}

.ac__facts small {
	display: block;
	color: var(--k-mute, inherit);
	font-size: 0.6875rem;
	line-height: 1.5;
}

body.genre-kurashi .article__body .ac .ac__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	border-radius: var(--k-radius);
	font-size: 1.0625rem;
}

.ac__figure {
	padding: 20px;
	border-top: 1px solid var(--k-line, #ddd);
	background: var(--k-surface, transparent);
}

.article__body .ac .ac__figtitle {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 8px;
}

body.genre-kurashi .ac__fig {
	background: #fff;
	border-radius: var(--k-radius);
	padding: 8px;
	box-sizing: border-box;
}

body.genre-kurashi .ac__fig .f-no {
	fill: var(--k-navy);
	font-family: var(--font-body);
	font-weight: 700;
}

body.genre-kurashi .ac__sub {
	text-align: left;
	color: var(--k-sub);
	font-size: 0.75rem;
	font-weight: 400;
}

body.genre-kurashi .ac__audit {
	border-top-color: var(--k-line);
}

/* ---------- 症状から選ぶ（[symptom_check]） ---------- */
.sc {
	margin: 0 0 32px;
	padding: 20px;
	border: 1px solid var(--k-line, #ddd);
	border-radius: var(--k-radius-lg, 12px);
	background: #fff;
	box-shadow: 0 12px 32px -16px rgba(26, 31, 36, 0.18);
}

.sc__chips {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.sc__q {
	margin-bottom: 12px;
	padding: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.sc__chip {
	position: relative;
	cursor: pointer;
}

.sc__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.sc__chip span {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 8px 16px;
	border: 1px solid var(--k-line, #ccc);
	border-radius: var(--k-radius, 8px);
	font-weight: 700;
	line-height: 1.5;
}

.sc__radio:checked + span {
	border-color: var(--k-navy, #1a4f8b);
	background: var(--k-navy-soft, #e9f0f8);
	color: var(--k-navy, #1a4f8b);
	box-shadow: inset 0 0 0 1px var(--k-navy, #1a4f8b);
}

.sc__radio:focus-visible + span {
	outline: 2px solid var(--k-navy, #1a4f8b);
	outline-offset: 2px;
}

.sc__panels {
	margin-top: 16px;
}

.article__body .sc .sc__idle {
	margin: 0;
	color: var(--k-mute, #666);
	font-size: 0.875rem;
}

.article__body .sc .sc__steps {
	display: none;
	margin: 0;
	padding: 16px 16px 16px 36px;
	border-radius: var(--k-radius, 8px);
	background: var(--k-surface, #f5f7f9);
}

.article__body .sc .sc__steps li {
	line-height: 1.7;
}

/* 暮らしの業者：記事の頭をさらに詰める（判定の県のボタンを1画面目に入れる）。 */
body.genre-kurashi .article .article__header {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

body.genre-kurashi .article .article__kicker {
	margin-bottom: 8px;
}

body.genre-kurashi .breadcrumbs {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-top: 8px;
	padding-bottom: 8px;
}

body.genre-kurashi .article .article__body .disclosure .disclosure__heading {
	white-space: nowrap;
}

body.genre-kurashi .article__body .ac .ac__title {
	font-size: clamp(40px, 11.5vw, 64px);
	margin: 8px 0 12px;
}

body.genre-kurashi .ac__hero {
	padding-top: 16px;
}

/* 広告ボタンの字は白（リンクの紺に負けないように）。 */
body.genre-kurashi .cta--asp a,
body.genre-kurashi .cta--asp a:visited,
body.genre-kurashi .cta--asp a:hover {
	color: #fff;
	text-decoration: none;
}

/* 数字3つ：スマホでは横に3つ詰めず、1行ずつ（左に見出し・右に数字・下に中身）。 */
@media (max-width: 560px) {
	body.genre-kurashi .ac__facts {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	body.genre-kurashi .ac__facts div {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		column-gap: 12px;
		padding: 10px 14px;
		font-size: 0.8125rem;
	}

	body.genre-kurashi .ac__facts b {
		margin: 0;
		text-align: right;
	}

	body.genre-kurashi .ac__facts small {
		grid-column: 1 / -1;
		font-size: 0.75rem;
	}
}

/* 暮らしの業者：結論の文は太字にしない（読みやすさ）。目次は太い罫と赤い番号をやめ、面の箱に紺の番号。 */
body.genre-kurashi .article .article__body .article-summary li {
	font-weight: 400;
}

body.genre-kurashi .article .article__body .toc,
body.genre-kurashi .toc {
	padding: 16px 20px;
	border: 1px solid var(--k-line) !important;
	border-radius: var(--k-radius-lg);
	background: #fff;
}

body.genre-kurashi .toc__heading,
body.genre-kurashi .toc[open] .toc__heading {
	color: var(--k-ink);
	border: 0;
}

body.genre-kurashi .toc__list > .toc__item::before {
	color: var(--k-navy);
	background: none;
	font-weight: 700;
}

body.genre-kurashi .toc__item a {
	color: var(--k-ink);
	text-decoration: none;
}

/* パンくずは1行に。入りきらない最後の段は「…」で切る（全文は直後のラベルと見出しにある）。 */
body.genre-kurashi .breadcrumbs__list {
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow: hidden;
}

body.genre-kurashi .breadcrumbs__item {
	flex: 0 0 auto;
}

body.genre-kurashi .breadcrumbs__item:nth-last-child(2),
body.genre-kurashi .breadcrumbs__item:last-child {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 手順の番号は紺に（朱は印影と広告だけ）。 */
body.genre-kurashi .article__body ol > li::marker,
body.genre-kurashi .sc__steps > li::marker {
	color: var(--k-navy);
	font-weight: 700;
}

/* ==================================================================
   暮らしの業者：D案（2026-10-05・本人が選んだ案）
   見本 docs/design-mock/給湯器-仕掛け4案.html の D。根拠 docs/調査_面白い仕掛けの12サイト_2026-10-04.md。
   - 色は青1色を面で使う（ライデン・赤箱の型）。朱はピン・ハンコ・広告だけ
   - 太いゴシック（Zen Kaku Gothic New）で大きな題名を絵として置く
   - 押せる所は黒い太枠＋下の影（押した感じが出る）
   ================================================================== */
body.genre-kurashi {
	--k-navy: #1F66E0;
	--k-navy-soft: #DCEBFF;
	--k-blue-deep: #0E3A86;
	--k-shu: #E4442E;
	--k-yellow: #FFD43B;
	--font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--font-min: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
}

body.genre-kurashi a {
	text-decoration-color: rgba(31, 102, 224, 0.4);
}

/* 記事の題名（検索向けの長い題名）は小さく。最初の画面の主役は下の青い面。 */
body.genre-kurashi .article .article__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--k-sub);
}

body.genre-kurashi .article__title .article__title-sub {
	display: inline;
	margin: 0;
	font-size: inherit;
}

body.genre-kurashi .article__title .article__title-sub::before {
	content: "｜";
}

/* ---------- 家の外まわりの絵 ---------- */
.hs {
	display: block;
	width: 100%;
	height: auto;
}

.hs .hs-edge {
	stroke: #16181d;
	stroke-width: 1.6;
	stroke-linejoin: round;
}

.hs .hs-thin {
	stroke: #16181d;
	stroke-width: 1.2;
}

.hs .hs-ghost {
	opacity: 0.4;
}

.hs .hs-lamp {
	animation: hs-blink 1s steps(2) infinite;
}

@keyframes hs-blink {
	0% { fill: #ff4a32; }
	100% { fill: #7b2a22; }
}

.hs-pin {
	cursor: pointer;
	outline: none;
}

.hs-pin .hs-dot {
	fill: #E4442E;
	stroke: #fff;
	stroke-width: 2.5;
}

.hs-pin .hs-halo {
	fill: #E4442E;
	opacity: 0.25;
	transform-box: fill-box;
	transform-origin: center;
	animation: hs-halo 1.6s ease-out infinite;
}

@keyframes hs-halo {
	0% { transform: scale(0.8); opacity: 0.45; }
	100% { transform: scale(1.45); opacity: 0; }
}

.hs-pin:focus-visible .hs-dot {
	stroke: #FFD43B;
	stroke-width: 4;
}

.hs-pin.is-found .hs-dot {
	fill: #2E9E6A;
}

.hs-pin.is-found .hs-halo,
.hs-pin.is-off {
	display: none;
}

.is-gasflow .hs-gas {
	stroke-dasharray: 6 8;
	animation: hs-flow 1s linear infinite;
}

@keyframes hs-flow {
	to { stroke-dashoffset: -14; }
}

@media (prefers-reduced-motion: reduce) {
	.hs .hs-lamp,
	.hs-pin .hs-halo,
	.is-gasflow .hs-gas {
		animation: none;
	}
}

/* ---------- [house_check] ---------- */
.hc {
	position: relative;
	margin: 0 0 40px;
	color: var(--k-ink, #16181d);
}

.article__body .hc p {
	margin: 0;
}

.hc__hero {
	background: var(--k-navy, #1F66E0);
	color: #fff;
	border-radius: 24px;
	padding: 18px 18px 0;
	overflow: hidden;
}

.hc__time {
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	opacity: 0.88;
}

.article__body .hc .hc__title {
	font-size: clamp(34px, 9.6vw, 48px);
	line-height: 1.18;
	font-weight: 900;
	margin-top: 6px;
	letter-spacing: 0.01em;
}

.article__body .hc .hc__lead {
	font-size: 0.875rem;
	line-height: 1.7;
	margin-top: 8px;
	opacity: 0.94;
}

.hc__scene {
	margin: 4px -6px 0;
}

.hc__scene--eco,
.hc[data-variant="eco"] .hc__scene--gas {
	display: none;
}

.hc[data-variant="eco"] .hc__scene--eco {
	display: block;
}

.hc__ask {
	padding: 22px 2px 0;
}

.hc__q {
	border: 0;
	margin: 0 0 18px;
	padding: 0;
	min-width: 0;
}

.hc__q legend {
	padding: 0;
	margin-bottom: 10px;
	width: 100%;
}

.hc__step {
	display: block;
	font-weight: 900;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	color: var(--k-navy, #1F66E0);
}

.hc__qtext {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.4;
}

.hc__qtext .hc__pon {
	width: 28px;
	height: 35px;
	flex: none;
}

.hc__seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.hc__seg label {
	position: relative;
	display: block;
}

.hc__seg input,
.hc__prefs input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.hc__seg span {
	display: grid;
	place-items: center;
	min-height: 52px;
	padding: 10px 6px;
	border: 2.5px solid #16181d;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 3px 0 #16181d;
	font-weight: 900;
	font-size: 0.9375rem;
	text-align: center;
	cursor: pointer;
}

.hc__seg input:checked + span {
	background: #16181d;
	color: #fff;
}

.hc__seg input:focus-visible + span {
	outline: 3px solid var(--k-navy, #1F66E0);
	outline-offset: 2px;
}

.hc__seg input:active + span {
	transform: translateY(2px);
	box-shadow: 0 1px 0 #16181d;
}

.hc__eco {
	display: none;
	margin: -4px 0 14px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--k-navy, #1F66E0);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	background: none;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
}

.hc.is-js .hc__eco {
	display: inline-block;
}

.hc__eco-on,
.hc[data-variant="eco"] .hc__eco-off {
	display: none;
}

.hc[data-variant="eco"] .hc__eco-on {
	display: inline;
}

.article__body .hc .hc__route {
	display: none;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--k-navy-soft, #DCEBFF);
	color: var(--k-blue-deep, #0E3A86);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.7;
}

.article__body .hc .hc__route.is-on {
	display: block;
}

.hc__route.is-on::after {
	content: "↑ 上の絵で、印のついた場所だけ見ればOK";
	display: block;
	margin-top: 4px;
	font-weight: 500;
}

.hc__tray {
	padding-top: 20px;
}

.hc__count {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hc__count > span {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
}

.hc__count b {
	margin-left: auto;
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1;
}

.hc__count small {
	font-size: 1rem;
	color: var(--k-sub, #5b6270);
}

.article__body .hc .hc__dex {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	border-top: 1px solid var(--k-line, #e3e6ea);
}

.article__body .hc .hc__dex > li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--k-line, #e3e6ea);
}

.article__body .hc .hc__dex > li::before,
.article__body .hc .hc__dex > li::marker {
	content: none;
}

.hc__item summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 8px 2px;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.hc__item summary::-webkit-details-marker {
	display: none;
}

.hc__no {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #EEF0F3;
	color: var(--k-sub, #5b6270);
	font-size: 0.8125rem;
}

.hc__no:empty::before {
	content: "・";
}

.hc__hint {
	margin-left: auto;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--k-sub, #5b6270);
}

.hc:not(.is-js) .hc__hint {
	display: none;
}

/* JS が動いたら名前を伏せる（見つけるまで「？？？」）。 */
.hc.is-js .hc__item:not(.is-found) .hc__nm {
	font-size: 0;
}

.hc.is-js .hc__item:not(.is-found) .hc__nm::before {
	content: "？？？";
	font-size: 0.9375rem;
	letter-spacing: 0.2em;
	color: #a3a9b3;
}

.hc__item.is-found .hc__no {
	background: var(--k-shu, #E4442E);
	color: #fff;
}

.hc.is-js .hc__body {
	display: none;
}

.hc__body,
.hc__sheet [data-hc-sheet-body] {
	font-size: 0.875rem;
	line-height: 1.7;
}

.hc__body {
	padding: 0 2px 14px 36px;
}

.article__body .hc .hc__one {
	display: inline-block;
	background: var(--k-yellow, #FFD43B);
	color: #16181d;
	font-weight: 700;
	font-size: 0.8125rem;
	padding: 3px 10px;
	border-radius: 6px;
}

.article__body .hc dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	margin: 10px 0 0;
}

.article__body .hc dt {
	font-weight: 900;
	color: var(--k-navy, #1F66E0);
}

.article__body .hc dd {
	margin: 0;
}

.article__body .hc .hc__src {
	margin-top: 8px;
	font-size: 0.75rem;
	color: var(--k-sub, #5b6270);
}

/* 見つけた場所（下からせり上がる板） */
.hc__sheet {
	position: fixed;
	left: 50%;
	bottom: 0;
	z-index: 60;
	width: min(100%, 560px);
	max-height: 78vh;
	overflow-y: auto;
	padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
	border-radius: 22px 22px 0 0;
	background: #fff;
	color: #16181d;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22);
	transform: translate(-50%, 105%);
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hc__sheet.is-on {
	transform: translate(-50%, 0);
}

.article__body .hc .hc__great {
	font-weight: 900;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	color: var(--k-shu, #E4442E);
}

.article__body .hc .hc__sheet-name {
	font-size: 1.5rem;
	font-weight: 900;
	margin: 2px 0 8px;
}

.hc__close {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 14px;
	border: 0;
	border-radius: 12px;
	background: #16181d;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* 見ても戻らないとき（住所の判定・広告なし） */
.hc__next {
	display: none;
	margin-top: 24px;
	padding: 18px 16px;
	border-radius: 18px;
	background: #F6F7F9;
}

.hc[data-variant="gas"] .hc__next--gas,
.hc[data-variant="eco"] .hc__next--eco {
	display: block;
}

.article__body .hc .hc__next-h {
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.5;
}

.article__body .hc .hc__next-who {
	margin-top: 4px;
	font-size: 0.8125rem;
	color: var(--k-sub, #5b6270);
}

.hc__prefs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
	padding: 0;
	border: 0;
}

.hc__prefs .ac__chip {
	position: relative;
}

.hc__prefs .ac__chip span {
	display: inline-block;
	padding: 8px 16px;
	border: 2px solid #16181d;
	border-radius: 99px;
	background: #fff;
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
}

.hc__prefs input:checked + span {
	background: #16181d;
	color: #fff;
}

.hc__prefs input:focus-visible + span {
	outline: 3px solid var(--k-navy, #1F66E0);
	outline-offset: 2px;
}

.hc__verdict {
	display: none;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
}

.hc__verdict .ac__seal {
	width: 64px;
	height: 64px;
	flex: none;
}

.hc__verdict b {
	display: block;
	font-size: 1.0625rem;
}

.article__body .hc .hc__verdict p {
	font-size: 0.8125rem;
	color: var(--k-sub, #5b6270);
}

.hc__next[data-state="ok"] .hc__verdict--ok,
.hc__next[data-state="out"] .hc__verdict--out,
.hc__next:has(input[data-hc-pref="ok"]:checked) .hc__verdict--ok,
.hc__next:has(input[data-hc-pref="out"]:checked) .hc__verdict--out {
	display: flex;
}

.article__body .hc .hc__go {
	display: block;
	margin-top: 6px;
	padding: 14px 12px;
	border: 2.5px solid #16181d;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 3px 0 #16181d;
	color: #16181d;
	font-weight: 900;
	font-size: 0.9375rem;
	text-align: center;
	text-decoration: none;
}

/* ---------- 業者のページ（[area_check]）も同じ青い面に ---------- */
body.genre-kurashi .ac {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	overflow: visible;
}

body.genre-kurashi .ac__hero {
	background: var(--k-navy);
	color: #fff;
	border-radius: 24px;
	padding: 18px;
}

body.genre-kurashi .ac__kicker {
	color: #fff;
	opacity: 0.88;
}

body.genre-kurashi .article__body .ac .ac__title {
	font-weight: 900;
	letter-spacing: 0;
	font-size: clamp(44px, 13vw, 64px);
	line-height: 1.1;
	color: #fff;
}

body.genre-kurashi .ac__hero .ac__now {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

body.genre-kurashi .ac__check {
	padding: 20px 2px 0;
}

body.genre-kurashi .ac__figure {
	margin-top: 20px;
	border-radius: 18px;
	background: #F6F7F9;
	padding: 16px;
}

/* ---------- 画面の下の「知りたいことは？」 ---------- */
.want {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 50;
	max-width: 536px;
	margin: 0 auto;
}

.want__label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-radius: 14px;
	background: #fff;
	color: #16181d;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	font-size: 0.8125rem;
	font-weight: 700;
}

.want__label::after {
	content: "▾";
	margin-left: auto;
	color: #5b6270;
}

.want__q {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #1F66E0;
	color: #fff;
	font-size: 0.75rem;
}

.want__select {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	cursor: pointer;
	font-size: 16px;
}

body.has-want .site-footer {
	padding-bottom: 88px;
}

/* 業者のページ：青い面の中に家の絵（2026-10-05） */
body.genre-kurashi .ac__hero .hc__scene {
	margin: 10px -6px -18px;
}

body.genre-kurashi .article__body .ac .ac__pinnote {
	margin: 18px 0 0;
	font-size: 0.8125rem;
	font-weight: 700;
	opacity: 0.9;
}

body.genre-kurashi .ac__figure .hc__tray {
	padding-top: 12px;
}

.hc[data-variant="gas"] .hc__tray--eco,
.hc[data-variant="eco"] .hc__tray--gas {
	display: none;
}

/* ==================================================================
   全サイトをD案の形に（2026-10-05・本人OK）
   見本 docs/design-mock/全サイト-見立て.html。書体は太いゴシック1つ、色は各サイトの差し色を面で。
   見立ての絵（[spot_check]）があるページは、検索向けの長い題名を小さくし、最初の画面の主役を絵にする。
   ================================================================== */
body:is(.genre-beauty, .genre-reuse, .genre-job, .genre-card, .genre-vpn, .genre-mobile, .genre-otameshi, .genre-trial),
body.home {
	--font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--font-min: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
	font-family: var(--font-body);
}

.article:has(.hc) .article__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--c-text-muted, #5b6270);
}

.article:has(.hc) .article__title .article__title-sub {
	display: inline;
	margin: 0;
	font-size: inherit;
}

.article:has(.hc) .article__title .article__title-sub::before {
	content: "｜";
}

/* 見立ての絵は、机のある絵が多いので少し余白を詰める */
.hc--spot .hc__scene {
	margin: 2px -6px 0;
}

.hc--spot .hc__tray {
	padding-top: 16px;
}

/* 住所の判定を暮らしの業者の外（買取など）で使うとき（2026-10-05・figure="none"）。
   見出しは1語が行をまたがない大きさに留める（「スピーカー」が割れた）。 */
body:not(.genre-kurashi) .article__body .ac .ac__title {
	font-size: clamp(34px, 9vw, 52px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	word-break: keep-all;
}
.ac__figure--none:empty {
	display: none;
}

/* キャンペーンの帯（[area_check campaign="…"]・2026-10-05）。黄色に白文字は使わない。 */
.ac__camp {
	margin: 0 0 14px !important;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fff1e6;
	border: 2px solid #f5610a;
	color: #16181d;
	line-height: 1.5;
}
.ac__camptag {
	display: inline-block;
	margin-right: 8px;
	padding: 1px 8px;
	border-radius: 99px;
	background: #c2410c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	vertical-align: 2px;
}
.ac__camp b {
	font-size: 17px;
}
.ac__camp small {
	display: block;
	margin-top: 4px;
	color: #5b4636;
	font-size: 12px;
}

/* ○×の表（本文の表でセルが ○／× で始まる行・2026-10-05）。記号はセルの左に置き、文字に重ねない。 */
.article__body tr.mark-row--ok td {
	background: #e8f6ee;
}
.article__body tr.mark-row--ng td {
	background: #fdeceb;
}
.article__body td.mark-cell {
	font-weight: 700;
}
.article__body td.mark-cell .mark {
	display: inline-block;
	width: 1.2em;
	margin-right: 4px;
	font-size: 28px;
	line-height: 1;
	font-weight: 900;
	text-align: center;
	vertical-align: -4px;
}
.article__body td.mark-cell--ok .mark {
	color: #15803d;
}
.article__body td.mark-cell--ng .mark {
	color: #b91c1c;
}
/* 暗い表示でも読めるよう、色つきの行は文字色を固定する */
.article__body tr.mark-row td {
	color: #16181d;
}

/* 絵なしの判定（ボタンを最初から出す形・2026-10-05） */
.ac--open .ac__ad {
	display: block;
	margin: 12px 0 4px;
}
.ac__target {
	margin: 0 !important;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--c-bg-subtle, #f6f7f9);
	color: var(--c-text, #16181d);
	font-size: 15px;
	line-height: 1.6;
}
.ac__target b {
	display: block;
	font-size: 12px;
	color: var(--c-text-muted, #5b6472);
}
.ac__target .ac__date {
	margin-top: 2px;
	color: var(--c-text-muted, #5b6472);
}
.ac__more {
	margin-top: 14px;
	border-top: 1px solid var(--c-border, #e2e5ea);
	padding-top: 10px;
}
.ac__more > summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	padding: 6px 0;
}
.ac--open .ac__ans {
	margin: 8px 0 0 !important;
	font-size: 14px;
}
.ac--open .ac__ans .ac__verdict {
	margin-right: 6px;
}

/* ==================================================================
   キャンペーンの帯を金色に（2026-10-05 本人「もっとキラキラ・黄金に」）
   金属の金のグラデーション＋光の筋＋星。文字は濃い茶（黄色に白文字は使わない）。
   星は右の余白に置き、文字と重ねない。動きを減らす設定の人には光を流さない。
   ================================================================== */
.ac__camp.camp-gold {
	position: relative;
	overflow: hidden;
	margin: 0 0 16px !important;
	padding: 12px 52px 12px 14px;
	border: 0;
	border-radius: 12px;
	background:
		linear-gradient(135deg, #fff7d6 0%, #f6dc8a 18%, #d9a93a 38%, #fbe9a8 52%, #c8922a 70%, #f3d27a 86%, #fff3c4 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .85),
		inset 0 -2px 0 rgba(122, 82, 10, .35),
		0 0 0 1.5px #a8740f,
		0 6px 16px -6px rgba(168, 116, 15, .7);
	color: #3a2304;
	line-height: 1.45;
}
.ac__camp.camp-gold p {
	margin: 0 !important;
	position: relative;
	z-index: 1;
}
.camp-gold__tag {
	display: inline-block;
	padding: 2px 10px 2px 8px;
	border-radius: 4px;
	background: linear-gradient(180deg, #d42a3c, #9c1424);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
}
.camp-gold__tag::before {
	content: "★ ";
	color: #ffe28a;
}
.camp-gold__body {
	margin-top: 6px !important;
	font-size: 16px;
	font-weight: 900;
	text-shadow: 0 1px 0 rgba(255, 248, 220, .9);
}
.camp-gold__body em {
	font-style: normal;
	white-space: nowrap;
	font-size: 1.55em;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: #7a1010;
	padding: 0 1px;
}
.camp-gold__note {
	margin-top: 6px !important;
	font-size: 11.5px;
	font-weight: 500;
	color: #4d3510;
}
/* 光の筋（左から右へ、ときどき） */
.ac__camp.camp-gold::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg);
	animation: camp-shine 4.2s ease-in-out infinite;
	pointer-events: none;
}
@keyframes camp-shine {
	0%, 55% { left: -60%; }
	85%, 100% { left: 130%; }
}
/* 星（右の余白だけ） */
.camp-gold__stars {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48px;
	pointer-events: none;
}
.camp-gold__stars i {
	position: absolute;
	display: block;
	fill: #fffbe6;
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, .95));
	animation: camp-twinkle 2.4s ease-in-out infinite;
}
.camp-gold__stars svg {
	display: block;
	width: 100%;
	height: 100%;
}
.camp-gold__stars i:nth-child(1) { top: 10px; right: 12px; width: 20px; height: 20px; }
.camp-gold__stars i:nth-child(2) { top: 38px; right: 30px; width: 11px; height: 11px; animation-delay: .8s; }
.camp-gold__stars i:nth-child(3) { bottom: 10px; right: 10px; width: 14px; height: 14px; animation-delay: 1.5s; }
@keyframes camp-twinkle {
	0%, 100% { transform: scale(.55) rotate(0deg); opacity: .5; }
	50% { transform: scale(1) rotate(20deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.ac__camp.camp-gold::after { display: none; }
	.camp-gold__stars i { animation: none; opacity: 1; transform: none; }
}

/* 給湯器（figure=gas/ecocute）もボタンを最初から（2026-10-05）。対象外の県を選んだときだけ隠す。 */
.ac--adfirst .ac__ad {
	display: block;
	margin-top: 14px;
}
.ac--adfirst .ac__target {
	margin-top: 18px !important;
}
.ac--adfirst .ac__more .ac__prefs {
	margin-top: 10px;
}

/* ==================================================================
   買取のB案「品物が主役」（[area_check art="doll|audio|piano"]・2026-10-05 本人決定）
   生成りの地・見出しは明朝（Zen Old Mincho）・品物ごとに1色。名前は絵の外で線でつなぐ。
   ================================================================== */
.ac--art {
	--it-c: #b8323f;      /* 品物の色 */
	--it-ink: #3d2219;    /* 墨 */
	--it-soft: #f6e6d6;   /* 絵の地 */
	--it-floor: #e9d2bd;
	--it-pale: #fdeee6;
	background: #fffaf3;
	color: var(--it-ink);
	border: 0;
	border-radius: 16px;
	overflow: hidden;
}
.ac--art-audio {
	--it-c: #1f6a72;
	--it-ink: #1d2c33;
	--it-soft: #e2eeee;
	--it-floor: #c9dcdc;
	--it-pale: #e8f3f3;
}
.ac--art-piano {
	--it-c: #3a3f8f;
	--it-ink: #1f2140;
	--it-soft: #e8e8f4;
	--it-floor: #d3d4ea;
	--it-pale: #eeeef8;
}
.ac--art .ac__hero {
	padding: 16px 16px 0;
}
.ac--art .ac__kicker {
	color: var(--it-c);
	font-weight: 700;
}
body:not(.genre-kurashi) .article__body .ac--art .ac__title {
	font-family: "Zen Old Mincho", "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-weight: 900;
	font-size: clamp(26px, 8.2vw, 40px);
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--it-ink);
	margin: 6px 0 4px;
}
.ac__art {
	margin: 10px -16px 0;
	background: var(--it-soft);
	padding-top: 6px;
}
.ia {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin: 0 auto;
}
.ia-floor { fill: var(--it-floor); }
.ia-glass { fill: #fff; fill-opacity: .55; stroke: #b98d72; stroke-width: 2.5; }
.ia-shine { stroke: #fff; stroke-width: 5; stroke-linecap: round; fill: none; }
.ia-line { fill: none; stroke: var(--it-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ia-line .ia-skin { fill: #fff7ef; }
.ia-line .ia-hair { fill: var(--it-ink); }
.ia-line .ia-main { fill: var(--it-c); }
.ia-line .ia-white { stroke: #fff; stroke-width: 1.6; }
.ia-line .ia-gold { stroke: #e0a93a; stroke-width: 5; }
.ia-line .ia-wood { fill: #8a5a3c; }
.ia-line .ia-cone { fill: #2b2b2b; }
.ia-line .ia-dot { fill: #6b6b6b; }
.ia-line .ia-body { fill: #fff; }
.ia-line .ia-knob { fill: #d8d8d8; }
.ia-line .ia-paper { fill: #fff; }
.ia-line .ia-thin { stroke-width: 1.2; }
.ia-line .ia-keys { stroke-width: 3.2; }
.ia--piano .ia-line .ia-body { fill: #2a2a33; }
.ia-base { fill: #7a4b36; }
.ia-lead path { stroke: var(--it-c); stroke-width: 1.6; fill: none; }
.ia-lead circle { fill: var(--it-c); }
.ia-text { font-family: "Zen Kaku Gothic New", sans-serif; fill: var(--it-ink); }
.ia-name { font-size: 13px; font-weight: 900; }
.ia-note { font-size: 11.5px; font-weight: 500; }

/* ○×の3枚 */
.ia-marks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.article__body .ia-marks li.ia-mark {
	margin: 0;
	padding: 8px 4px 9px;
	border-radius: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}
.ia-mark::before { display: none !important; }
.ia-mark b {
	display: block;
	font-size: 30px;
	line-height: 1.05;
	font-weight: 900;
}
.ia-mark small {
	display: block;
	font-size: 11.5px;
	font-weight: 500;
}
.ia-mark--ok { background: #e3f4e8; color: #14532d; }
.ia-mark--ng { background: #fbe5e3; color: #7f1d1d; }
.ac--art .ac__check {
	padding: 12px 16px 16px;
}
.article__body .ac--art .ac__cta {
	background: var(--it-ink);
	color: #fff;
}
.ac--art .ac__target {
	margin-top: 8px !important;
	padding: 0;
	background: none;
	font-size: 13px;
	color: var(--it-ink);
}
.ac--art .ac__target b {
	display: inline;
	margin-right: 6px;
	font-size: 13px;
	color: var(--it-c);
}
.ac--art .ac__target .ac__date {
	display: inline;
	margin-left: 6px;
	font-size: 11.5px;
}
.ac--art .ac__facts {
	margin-top: 14px;
	color: var(--it-ink);
}
.ac--art .ac__facts div {
	color: #5b4a40;
}
.ac--art .ac__facts b {
	color: var(--it-ink);
}

/* 品物の判定があるページは、最初の1画面にキャンペーンと絵を入れる（2026-10-05 本人：キャンペーンは1画面目の上）。
   検索向けの長い題名は小さく、吹き出し（結論はここ）は外す。広告の表記と確認日はそのまま。 */
.article:has(.ac--art) .article__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--c-text-muted, #5b6270);
}
.article:has(.ac--art) .article__title .article__title-sub {
	display: inline;
	margin: 0;
	font-size: inherit;
}
.article:has(.ac--art) .article__title .article__title-sub::before {
	content: "｜";
}
.article:has(.ac--art) .pon-lead {
	display: none;
}
.ac--art-water {
	--it-c: #1d6fb8;
	--it-ink: #14283d;
	--it-soft: #e3eef8;
	--it-floor: #c9dbec;
	--it-pale: #e8f1fa;
}
.ia--water .ia-line .ia-body { fill: #f3f5f7; }
.ac--art-house {
	--it-c: #2f6b3a;
	--it-ink: #1f2a1f;
	--it-soft: #e6f0e3;
	--it-floor: #b9a58a;
	--it-pale: #edf5ea;
}
.ia--house .ia-line .ia-body { fill: #dfe9f2; }
.ia--house .ia-line .ia-soft2 { fill: #8a7356; stroke: none; }
.ia--house .ia-line .ia-gold { fill: #e8b04a; stroke: none; }
.ia--house .ia-base { fill: #9aa0a6; }

/* 頼む前に確かめること（番号つき・2026-10-05 本人「聞くことは目立たせて、番号を振って」） */
.ac__asks {
	margin-top: 16px;
	padding: 14px 14px 12px;
	border-radius: 12px;
	background: #fff7e0;
	border: 2px solid #e0a52a;
	color: #2a1c05;
}
.article__body .ac__asks .ac__asks-title {
	margin: 0 0 8px !important;
	font-size: 16px;
	font-weight: 900;
	color: #2a1c05;
}
.ac__asks-title::before {
	content: "☎ ";
}
.ac__asks-title small {
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 99px;
	background: #b45309;
	color: #fff;
	font-size: 12px;
	vertical-align: 2px;
}
.article__body .ac__asks ol {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}
.article__body .ac__asks li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	padding: 8px 0;
	border-top: 1px dashed #e8c77a;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}
.article__body .ac__asks li:first-child {
	border-top: 0;
}
.article__body .ac__asks li::marker {
	content: none;
}
.ac__asks-no {
	flex: 0 0 26px;
	height: 26px;
	border-radius: 50%;
	background: #b45309;
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	line-height: 26px;
	text-align: center;
}

/* 本文の番号つきリスト（確かめること・手順）を、丸い番号のカードにする（2026-10-05 本人「番号を振ってまとめて、目立たせて」）。
   .sc__steps など部品の中の ol は対象外（本文の直下だけ）。 */
.article__body > ol:not([class]) {
	list-style: none;
	counter-reset: ck;
	margin: 12px 0 20px;
	padding: 4px 14px;
	border-radius: 12px;
	background: #f4f7fb;
	border: 1px solid #d9e2ee;
}
.article__body > ol:not([class]) > li {
	counter-increment: ck;
	position: relative;
	margin: 0;
	padding: 10px 0 10px 38px;
	border-top: 1px dashed #d1dbe8;
	font-weight: 700;
	line-height: 1.6;
}
.article__body > ol:not([class]) > li:first-child {
	border-top: 0;
}
.article__body > ol:not([class]) > li::before {
	content: counter(ck);
	position: absolute;
	left: 0;
	top: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1f3a5f;
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	line-height: 26px;
	text-align: center;
}

/* ==================================================================
   数字で見せる部品（[year_check] [fact_bars] [point_cards]・2026-10-05）
   見本 docs/design-mock/シロアリ-提案.html。出典は必ず小さく下に。
   ================================================================== */
.yc {
	margin: 16px 0 20px;
	padding: 14px;
	border-radius: 14px;
	background: #f4f7fb;
	border: 1px solid #d9e2ee;
}
.yc__q {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
}
.yc__sel {
	font-size: 18px;
	font-weight: 900;
	padding: 6px 10px;
	border-radius: 8px;
	border: 2px solid #1f63d6;
	background: #fff;
	color: #16202c;
}
.article__body .yc__ans {
	margin: 10px 0 0 !important;
	padding: 10px 12px;
	border-radius: 12px;
	background: #fff;
	border: 2px solid #9aa4b2;
}
.yc.is-past .yc__ans {
	background: #fff1f0;
	border-color: #d43a2f;
	color: #7f1d1d;
}
.yc.is-left .yc__ans {
	background: #eef7ee;
	border-color: #3aa45a;
	color: #14532d;
}
.yc__big {
	display: block;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 900;
}
.yc__sub {
	display: block;
	margin-top: 4px;
	font-size: 13px;
}
.article__body .db-src {
	margin: 6px 0 0 !important;
	font-size: 11.5px;
	color: #6b7482;
}
.db-fact {
	margin: 12px 0 16px;
	padding: 14px;
	border-radius: 14px;
	background: #f8fafc;
	border: 1px solid #d9e2ee;
}
.db-fact__title {
	font-size: 17px;
	font-weight: 900;
	line-height: 1.4;
	margin-bottom: 8px;
}
.db-no {
	display: inline-block;
	min-width: 24px;
	height: 24px;
	margin-right: 8px;
	border-radius: 50%;
	background: #1f3a5f;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	line-height: 24px;
	text-align: center;
	vertical-align: 2px;
}
.article__body .db-bars {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}
.article__body .db-bar {
	display: grid;
	grid-template-columns: 7.5em 1fr auto;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
	font-size: 13px;
	font-weight: 700;
}
.article__body .db-bar::before,
.article__body .db-bar::marker {
	content: none;
}
.db-bar__track {
	height: 18px;
	border-radius: 4px;
	background: #e6eaf0;
	overflow: hidden;
}
.db-bar__fill {
	display: block;
	height: 100%;
	border-radius: 4px;
}
.db-bar__fill--ok { background: #3aa45a; }
.db-bar__fill--ng { background: #d43a2f; }
.db-bar__fill--mid { background: #f0b429; }
.db-bar__val {
	font-size: 15px;
	white-space: nowrap;
}
.article__body .db-note {
	margin: 8px 0 0 !important;
	font-size: 13px;
	line-height: 1.6;
}
.article__body .db-cards {
	list-style: none;
	margin: 12px 0 16px !important;
	padding: 0 !important;
	display: grid;
	gap: 10px;
}
.article__body .db-card {
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid #d9e2ee;
}
.article__body .db-card::before,
.article__body .db-card::marker {
	content: none;
}
.db-cards--warn .db-card { background: #fff7e0; border-color: #e0a52a; }
.db-cards--merit .db-card { background: #eef7ee; border-color: #9fd3ad; }
.db-cards--merit .db-no { background: #2f7a3a; }
.db-cards--warn .db-no { background: #b45309; }
.article__body .db-card__title {
	margin: 0 !important;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.4;
}
.article__body .db-card__body {
	margin: 6px 0 0 !important;
	font-size: 14px;
	line-height: 1.7;
}

/* 数字の部品は明るい面に置くので、暗い表示でも文字色を固定する（2026-10-05 ダークモードで読めなかった） */
.yc,
.db-fact,
.article__body .db-card,
.ac__asks {
	color: #16202c;
}
.yc a,
.db-fact a,
.db-card a {
	color: #1d4ed8;
}
.article__body .db-src {
	color: #4a5566;
}
.db-fact__title,
.article__body .db-bar,
.article__body .db-card__title,
.article__body .db-card__body,
.article__body .db-note,
.yc__q {
	color: #16202c;
}
.yc.is-past .yc__big,
.yc.is-past .yc__sub {
	color: #7f1d1d;
}
.yc.is-left .yc__big,
.yc.is-left .yc__sub {
	color: #14532d;
}

/* ==================================================================
   LP型の業者ページ（shortcodes/lp-parts.php・2026-10-06 本人OK「よさげ反映させて」）
   見本：docs/design-mock/シロアリ-イラスト版.html。いらすとやの絵＋競合の強い形（上のボタン2つ・3つの売り・
   要注意チェック・赤い棒・画面の下の固定帯・最後の紺の帯）。本人OK：赤と黄色・被害の絵を使ってよい。
   文字と絵は重ねない（据え置き）。
   ================================================================== */
body.lp-page {
	--lp-navy: #1a4f8b;
	--lp-navy-soft: #e9f0f8;
	--lp-red: #c62828;
	--lp-yellow-soft: #fff7d1;
	--lp-yellow-edge: #e0b400;
	--lp-orange: #c2410c;
	--lp-orange-deep: #9a3412;
	--lp-alt: #f5f7f9;
	--lp-line: #d9dde2;
	--lp-ink: #1a1f24;
	--lp-sub: #4d5763;
}

.l-container--lp {
	max-width: 1120px;
}

/* 節の地を画面いっぱいに広げる（中身の幅はそのまま） */
body.lp-page :is(.lp-hero, .lp-sec--alt, .lp-final) {
	box-shadow: 0 0 0 100vmax var(--lp-bg);
	clip-path: inset(0 -100vmax);
}

body.lp-page .article__body .lp-red {
	color: var(--lp-red);
}

body.lp-page .article__body .lp-em {
	font-style: normal;
	color: var(--lp-red);
	font-feature-settings: "tnum" 1;
}

/* ---- 最初の1画面 ---- */
body.lp-page .lp-hero {
	--lp-bg: var(--lp-navy-soft);
	background: var(--lp-bg);
	margin: 0 0 8px;
	padding: 0 0 32px;
}

body.lp-page .lp-hero .camp-gold {
	margin: 0 0 16px;
}

.lp-tabs {
	position: sticky;
	top: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 16px;
}

body.lp-page .article__body .lp-tabs a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	background: var(--lp-navy);
}

body.lp-page .article__body .lp-tabs a:last-child {
	background: var(--lp-orange);
}

.lp-hero__in {
	display: grid;
	gap: 16px;
}

body.lp-page .article__body .lp-hero__kicker {
	display: inline-block;
	margin: 0 !important;
	padding: 0 8px;
	border-radius: 2px;
	background: var(--lp-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

body.lp-page .article__body .lp-hero__title {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	font-size: 28px;
	line-height: 1.35;
	color: var(--lp-ink);
	font-feature-settings: "palt" 1;
}

body.lp-page .article__body .lp-hero__title .lp-em {
	font-size: 44px;
}

.lp-hero__leadrow {
	display: grid;
	grid-template-columns: 1fr 104px;
	gap: 16px;
	align-items: end;
	margin-top: 8px;
}

body.lp-page .article__body .lp-hero__lead {
	margin: 0 !important;
	font-size: 16px;
	line-height: 1.8;
}

.lp-img {
	display: block;
	max-width: 100%;
	height: auto;
}

.lp-hero__check {
	padding: 16px;
	border: 3px solid var(--lp-navy);
	border-radius: 12px;
	background: #fff;
}

body.lp-page .lp-hero .yc {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

body.lp-page .lp-hero .yc__q {
	font-size: 16px;
}

body.lp-page .lp-hero .yc__sel {
	width: 100%;
	min-height: 56px;
	font-size: 20px;
	border-color: var(--lp-ink);
}

body.lp-page .lp-hero .yc__big {
	font-size: 22px;
}

body.lp-page .lp-hero .yc__sub,
body.lp-page .article__body .db-src {
	font-size: 14px;
	line-height: 1.6;
}

.lp-badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lp-badges li {
	margin: 0 !important;
	padding: 8px 4px;
	border: 2px solid var(--lp-navy);
	border-radius: 8px;
	background: #fff;
	text-align: center;
	line-height: 1.4;
}

.lp-badges b {
	display: block;
	color: var(--lp-navy);
	font-size: 20px;
	font-feature-settings: "tnum" 1;
}

.lp-badges span {
	font-size: 14px;
}

/* ---- 広告のボタン（A8のコードそのまま・見た目は外側の枠） ---- */
.lp-cta {
	margin-top: 16px;
}

body.lp-page .article__body .lp-cta__head {
	margin: 0 0 8px !important;
	font-weight: 700;
	font-size: 18px;
	color: var(--lp-orange-deep);
}

body.lp-page .article__body .lp-cta__area {
	margin: 0 0 8px !important;
	font-size: 14px;
	line-height: 1.6;
	color: var(--lp-sub);
}

.lp-cta__area b {
	margin-right: 8px;
	color: var(--lp-ink);
}

body.lp-page .article__body .lp-cta__adlabel {
	margin: 0 0 4px !important;
	font-size: 14px;
	color: var(--lp-sub);
}

body.lp-page .lp-cta__btn,
body.lp-page .lp-sticky__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 56px;
	padding: 8px 16px;
	border-radius: 8px;
	background: var(--lp-orange);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	white-space: normal;
	box-shadow: 0 4px 0 var(--lp-orange-deep);
}

body.lp-page .lp-cta__btn:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--lp-orange-deep);
}

/* ---- 節 ---- */
body.lp-page .lp-sec {
	--lp-bg: var(--lp-alt);
	padding: 40px 0;
	border-top: 1px solid var(--lp-line);
}

body.lp-page .lp-sec--alt {
	background: var(--lp-bg);
}

.lp-sec__in {
	display: grid;
	gap: 16px;
}

/* 絵は本文の下（スマホ）・本文の右（PC）。文字と重ねない */
.lp-sec--img .lp-sec__img {
	order: 2;
	justify-self: end;
	width: 104px;
}

body.lp-page .article__body {
	counter-reset: lp-sec;
}

body.lp-page .article__body .lp-sec h2 {
	counter-increment: lp-sec;
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 0;
	font-size: 24px;
	line-height: 1.4;
}

body.lp-page .article__body .lp-sec h2::before {
	content: counter(lp-sec);
	flex: 0 0 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--lp-navy);
	color: #fff;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 棒グラフ：切れたまま＝赤、保証の中＝紺 */
body.lp-page .db-bar__fill--ok { background: var(--lp-navy); }
body.lp-page .db-bar__fill--ng { background: var(--lp-red); }

/* ---- 要注意チェック ---- */
.lp-check {
	margin: 16px 0;
	padding: 16px;
	border: 2px solid var(--lp-yellow-edge);
	border-radius: 12px;
	background: var(--lp-yellow-soft);
}

.lp-check__head {
	display: grid;
	grid-template-columns: 1fr 104px;
	gap: 8px;
	align-items: center;
}

body.lp-page .article__body .lp-check__title {
	margin: 0 !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.lp-check ul {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lp-check li {
	margin: 0 !important;
	padding: 8px 0;
	border-bottom: 1px dashed #d9c36a;
}

.lp-check li:last-child {
	border-bottom: 0;
}

.lp-check li::before {
	content: none !important;
}

.lp-check label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	min-height: 44px;
	font-weight: 700;
	cursor: pointer;
}

.lp-check input {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-top: 4px;
	accent-color: var(--lp-red);
}

.lp-check small {
	display: block;
	font-weight: 400;
	font-size: 14px;
	color: var(--lp-sub);
}

/* ---- 絵つきカード ---- */
.lp-cards {
	display: grid;
	gap: 16px;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lp-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	align-items: start;
	margin: 0 !important;
	padding: 16px;
	border: 1px solid var(--lp-line);
	border-radius: 12px;
	background: #fff;
}

.lp-card::before {
	content: none !important;
}

body.lp-page .article__body .lp-card p {
	margin: 4px 0 0;
}

body.lp-page .article__body .lp-card__title {
	margin: 0 !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--lp-red);
}

/* ---- 最後の紺の帯 ---- */
body.lp-page .lp-final {
	--lp-bg: var(--lp-navy);
	margin-top: 40px;
	padding: 32px 0;
	background: var(--lp-bg);
	color: #fff;
}

.lp-final__in {
	display: grid;
	gap: 16px;
}

.lp-final__img {
	width: 96px;
}

body.lp-page .article__body .lp-final__head {
	margin: 0 !important;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

body.lp-page .article__body .lp-final :is(.lp-cta__area, .lp-cta__adlabel, .lp-cta__area b) {
	color: #fff;
}

/* ---- 画面の下の固定帯 ---- */
.lp-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px;
	align-items: center;
	padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
	border-top: 3px solid var(--lp-orange);
	background: #fff;
}

.lp-sticky[hidden] {
	display: none;
}

.lp-sticky__lab {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--lp-orange-deep);
}

body.lp-page .lp-sticky__btn {
	min-height: 48px;
	font-size: 16px;
	box-shadow: none;
}

body.lp-page .site-footer {
	padding-bottom: 96px;
}

/* ---- PC：2列 ---- */
@media (min-width: 1024px) {
	.lp-tabs { display: none; }

	.lp-hero__in {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: center;
	}

	body.lp-page .article__body .lp-hero__title { font-size: 36px; }
	body.lp-page .article__body .lp-hero__title .lp-em { font-size: 56px; }
	.lp-hero__leadrow { grid-template-columns: 1fr 200px; }

	.lp-sec--img .lp-sec__in {
		grid-template-columns: 1fr 200px;
		gap: 48px;
		align-items: start;
	}

	.lp-sec--img .lp-sec__img { width: 200px; }

	.lp-cards { grid-template-columns: repeat(3, 1fr); }
	.lp-card { grid-template-columns: 1fr; }
	.lp-card__img { max-width: 160px; margin: 0 auto; }

	.lp-final__in {
		grid-template-columns: 200px 1fr;
		gap: 48px;
		align-items: center;
	}

	.lp-final__img { width: 200px; }
}

/* ==================================================================
   LP型 2版（10-06 本人「見本はすごく良いのでそれを本番に」「開くボタンは展開」「数字は目立たせる」「地域は詳細に」）
   見本 docs/design-mock/シロアリ-イラスト版.html との差を埋める：
   上の余計なもの（パンくず・開く広告表記）を外す／金の帯を細く／数字は BIZ UDゴシックで太く大きく／市町の一覧。
   ================================================================== */
body.lp-page {
	--lp-num: "BIZ UDGothic", "BIZ UDPGothic", var(--font-sans, sans-serif);
}

/* パンくずは構造化データに残し、見た目は出さない（見本どおり、1画面目を本題から始める） */
body.lp-page .breadcrumbs {
	display: none;
}

/* 広告の表記：開くボタンにしない。小さな字で全文 */
body.lp-page .disclosure--line,
body.lp-page .disclosure--full {
	margin: 8px 0 !important;
	padding: 4px 8px;
	border: 1px solid var(--lp-line);
	border-radius: 4px;
	background: #fff;
	font-size: 12px;
	line-height: 1.6;
	color: var(--lp-sub);
}

body.lp-page .disclosure--full {
	margin: 24px 0 0 !important;
}

body.lp-page :is(.disclosure--line, .disclosure--full) .disclosure__heading {
	margin-right: 8px;
	font-weight: 700;
	color: var(--lp-ink);
}

/* 金の帯：見本の細い帯に（光はそのまま・1行目に「キャンペーン」と本文を並べる） */
body.lp-page .lp-hero .ac__camp.camp-gold {
	margin: 0 0 8px !important;
	padding: 8px 40px 8px 12px;
	border-radius: 8px;
}

body.lp-page .lp-hero .camp-gold__body {
	margin: 4px 0 0 !important;
	font-size: 16px;
}

body.lp-page .lp-hero .camp-gold__note {
	margin-top: 4px !important;
	font-size: 12px;
}

/* ---- 数字を目立たせる ---- */
body.lp-page .article__body :is(.lp-em, .lp-badges b, .db-bar__val, .yc__num, .lp-num, .lp-red) {
	font-family: var(--lp-num);
	font-feature-settings: "tnum" 1;
	letter-spacing: 0;
}

/* 本文の数字（assets/js/lp.js が包む） */
body.lp-page .article__body .lp-num {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--lp-ink);
}

body.lp-page .article__body .lp-sec--alt .lp-num,
body.lp-page .article__body .lp-check .lp-num {
	color: var(--lp-red);
}

body.lp-page .article__body td .lp-num {
	font-size: 1.15em;
	color: var(--lp-navy);
}

/* 年を選んだ答え：年を 44px（見本どおり） */
body.lp-page .lp-hero .yc__big {
	font-size: 18px;
	line-height: 1.5;
}

body.lp-page .article__body .yc__num {
	display: inline-block;
	margin: 0 2px;
	font-size: 44px;
	line-height: 1.1;
	vertical-align: -4px;
}

body.lp-page .yc.is-past .yc__num { color: var(--lp-red); }
body.lp-page .yc.is-left .yc__num { color: var(--lp-navy); }

body.lp-page .lp-hero .yc.is-past .yc__ans {
	border: 2px solid var(--lp-red);
	background: #fdecec;
}

body.lp-page .lp-badges b {
	font-size: 24px;
}

/* 棒グラフ：値を大きく・色つき */
body.lp-page .article__body .db-bar__val {
	font-size: 22px;
	white-space: nowrap;
}

body.lp-page .article__body .db-bar:has(.db-bar__fill--ng) .db-bar__val { color: var(--lp-red); }
body.lp-page .article__body .db-bar:has(.db-bar__fill--ok) .db-bar__val { color: var(--lp-navy); }

body.lp-page .article__body .db-bar__track {
	height: 28px;
}

/* 棒グラフの一言＝見本の「赤い線の箱」 */
body.lp-page .article__body .db-note {
	margin-top: 16px;
	padding: 8px 16px;
	border-left: 6px solid var(--lp-red);
	background: #fff;
	font-weight: 700;
}

/* ---- 来てもらえる市町（[lp_area]） ---- */
.lp-area {
	margin: 16px 0;
	padding: 16px;
	border: 3px solid var(--lp-navy);
	border-radius: 12px;
	background: #fff;
}

.lp-area__q {
	display: block;
	font-weight: 700;
}

.lp-area__in {
	width: 100%;
	min-height: 56px;
	margin-top: 8px;
	padding: 0 16px;
	border: 2px solid var(--lp-ink);
	border-radius: 8px;
	background: #fff;
	font-size: 20px;
	font-weight: 700;
}

body.lp-page .article__body .lp-area__ans {
	margin: 8px 0 0 !important;
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: 700;
}

.lp-area__ans.is-ok { border: 2px solid var(--lp-navy); background: var(--lp-navy-soft); color: var(--lp-navy); }
.lp-area__ans.is-fee { border: 2px solid var(--lp-yellow-edge); background: var(--lp-yellow-soft); color: var(--lp-ink); }
.lp-area__ans.is-no { border: 2px solid var(--lp-line); background: var(--lp-alt); color: var(--lp-sub); }

.lp-area__pref {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--lp-line);
}

body.lp-page .article__body .lp-area__name {
	margin: 0 !important;
	font-size: 18px;
	font-weight: 700;
}

.lp-area__name span {
	margin-left: 8px;
	font-family: var(--lp-num);
	font-size: 14px;
	color: var(--lp-sub);
}

body.lp-page .article__body .lp-area__towns {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

body.lp-page .article__body .lp-area__towns li {
	margin: 0 !important;
	padding: 0 8px;
	border: 1px solid var(--lp-line);
	border-radius: 4px;
	background: var(--lp-navy-soft);
	font-size: 14px;
	line-height: 1.8;
}

body.lp-page .article__body .lp-area__towns li::before {
	content: none !important;
}

body.lp-page .article__body .lp-area__sub {
	margin: 24px 0 0 !important;
	padding-top: 16px;
	border-top: 1px solid var(--lp-line);
	font-size: 18px;
	font-weight: 700;
}

body.lp-page .article__body .lp-area__note {
	margin: 4px 0 0 !important;
	font-size: 14px;
	color: var(--lp-sub);
}

.lp-area__fees th:first-child,
.lp-area__fees tbody th {
	width: 96px;
	white-space: nowrap;
	font-family: var(--lp-num);
	color: var(--lp-orange-deep);
}

/* ---- お客様の声の集計 ---- */
body.lp-page .article__body .lp-voice-note {
	font-size: 14px;
	color: var(--lp-sub);
}

/* 対象外の地域を選んだら、広告のボタンを隠す（lp.js が body に lp-ad-off を付ける・[area_check] と同じ決まり） */
body.lp-page.lp-ad-off :is(.lp-cta, .lp-sticky, .lp-tabs a[href="#lp-hero-cta"]) {
	display: none !important;
}

/* ==================================================================
   LP型 3版（10-06 本人「見本で作ったやつ本番に反映できてなくない？」）
   見本 docs/design-mock/シロアリ-イラスト版.html の数値をそのまま当てる：
   細い金の帯（いちばん上）→ 1行のヘッダー（屋号＋広告を含みます）→ 上のボタン2つ（端から端）→ 本文。
   本文の字は BIZ UDPゴシック 16px・行間1.8・字間.04em。棒グラフは箱なし・赤と紺。チェックは赤い枠の四角。
   ================================================================== */
body.lp-page {
	font-family: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
	letter-spacing: .04em;
	line-break: strict;
	color: var(--lp-ink);
	background: #fff;
}

body.lp-page :is(h1, h2, h3, .lp-hero__title, .lp-final__head, .lp-check__title, .lp-card__title, .site-header__brand, .site-header__genre) {
	font-family: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
	letter-spacing: .02em;
}

body.lp-page .article__body {
	font-size: 16px;
	line-height: 1.8;
}

/* いちばん上の金の帯 */
.lp-topband {
	padding: 8px 20px;
	border-bottom: 1px solid #b8892b;
	background: #f4e3a1;
	color: var(--lp-ink, #1a1f24);
	text-align: center;
	line-height: 1.5;
}

.lp-topband b {
	display: block;
	font-size: 16px;
}

.lp-topband em {
	font-style: normal;
	font-family: "BIZ UDGothic", "BIZ UDPGothic", sans-serif;
	color: #9a3412;
}

.lp-topband__tag {
	display: inline-block;
	margin-right: 8px;
	padding: 0 6px;
	border-radius: 2px;
	background: #c62828;
	color: #fff;
	font-size: 12px;
	vertical-align: 2px;
}

.lp-topband small {
	display: block;
	font-size: 14px;
}

/* 1行のヘッダー：屋号＋「広告を含みます」。メニューと上の帯は出さない */
body.lp-page .network-bar,
body.lp-page .site-nav,
body.lp-page .lang-switcher {
	display: none;
}

body.lp-page .site-header {
	border-bottom: 1px solid var(--lp-line);
}

body.lp-page .site-header__inner {
	min-height: 0;
	padding-block: 8px;
	justify-content: space-between;
	flex-wrap: nowrap;
}

body.lp-page .site-header__title {
	font-size: 14px;
}

body.lp-page .site-header__title a {
	gap: 6px;
	align-items: center;
}

body.lp-page .site-header__title :is(svg, img) {
	width: 22px;
	height: 22px;
}

body.lp-page :is(.site-header__brand, .site-header__genre) {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
}

body.lp-page .site-header__brand::after {
	content: "｜";
	margin: 0 2px;
}

.site-header__ad {
	flex: 0 0 auto;
	padding: 0 8px;
	border: 1px solid var(--lp-line, #d9dde2);
	border-radius: 2px;
	color: var(--lp-sub, #4d5763);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

/* 上のボタン2つ：端から端・画面の上に貼りつく */
body.lp-page .lp-hero .lp-tabs {
	margin: 0 calc(50% - 50vw) 0;
	width: 100vw;
}

body.lp-page .article__body .lp-tabs a {
	min-height: 48px;
	font-size: 16px;
}

@media (min-width: 1024px) {
	body.lp-page .lp-hero .lp-tabs { display: none; }
}

/* 1画面目 */
body.lp-page .lp-hero {
	padding: 0 0 32px;
}

.lp-hero__in {
	padding-top: 24px;
}

body.lp-page .article__body .lp-hero__kicker {
	font-size: 14px;
	padding: 0 8px;
}

body.lp-page .article__body .lp-hero__lead .lp-num {
	font-size: 1em;
}

/* 年を選ぶ箱：見本の .check と .result */
body.lp-page .lp-hero__check {
	padding: 16px;
	border: 3px solid var(--lp-navy);
	border-radius: 12px;
}

body.lp-page .lp-hero .yc__q {
	display: block;
	font-size: 16px;
	font-weight: 700;
}

body.lp-page .lp-hero .yc__sel {
	display: block;
	width: 100%;
	height: 56px;
	margin-top: 8px;
	padding: 0 16px;
	border: 2px solid var(--lp-ink);
	border-radius: 8px;
	font: 700 20px "BIZ UDGothic", "BIZ UDPGothic", monospace;
	color: var(--lp-ink);
}

body.lp-page .article__body .lp-hero .yc__ans {
	margin: 16px 0 0 !important;
	padding: 16px;
	border-radius: 8px;
	color: var(--lp-ink);
}

body.lp-page .lp-hero .yc.is-past .yc__ans { background: #fdecec; border: 2px solid var(--lp-red); }
body.lp-page .lp-hero .yc.is-left .yc__ans { background: var(--lp-navy-soft); border: 2px solid var(--lp-navy); }

body.lp-page .lp-hero .yc__big {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

body.lp-page .lp-hero .yc__what {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--lp-sub);
}

body.lp-page .article__body .lp-hero .yc__num {
	margin: 0 2px 0 0;
	font-size: 44px;
	line-height: 1.1;
}

body.lp-page .lp-hero .yc__gap {
	font-size: 16px;
}

body.lp-page .lp-hero .yc__sub {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 400;
	color: var(--lp-ink);
}

body.lp-page .lp-hero .db-src {
	margin-top: 8px !important;
	font-size: 14px;
	color: var(--lp-sub);
}

/* 広告のボタン：見本どおり。ボタンの下に「広告・◯◯の公式サイトへ」 */
body.lp-page .article__body .lp-cta__head {
	margin: 16px 0 8px !important;
	font-size: 16px;
	color: var(--lp-ink);
}

body.lp-page .lp-cta__btn,
body.lp-page .lp-sticky__btn {
	padding: 8px 24px;
	line-height: 1.4;
}

body.lp-page .lp-cta__btn .ad-mark,
body.lp-page .lp-sticky__btn .ad-mark {
	font-size: 12px;
}

body.lp-page .article__body .lp-cta__note {
	margin: 8px 0 0 !important;
	font-size: 14px;
	text-align: center;
	color: var(--lp-sub);
}

body.lp-page .article__body .lp-final .lp-cta__note {
	color: #fff;
}

/* 3つの売り */
.lp-badges b {
	font-family: "BIZ UDGothic", "BIZ UDPGothic", monospace;
}

body.lp-page .lp-badges b {
	font-size: 20px;
}

/* 節 */
body.lp-page .lp-sec {
	padding: 48px 0;
}

body.lp-page .article__body .lp-sec h2 {
	margin-bottom: 16px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	border: 0;
	padding: 0;
	background: none;
}

body.lp-page .article__body .lp-sec h2::before {
	font-family: "BIZ UDGothic", "BIZ UDPGothic", monospace;
}

/* 要注意チェック：赤い枠の四角 */
body.lp-page .lp-check input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 4px 0 0;
	border: 2px solid var(--lp-red);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

body.lp-page .lp-check input:checked {
	background: var(--lp-red);
	box-shadow: inset 0 0 0 3px #fff;
}

body.lp-page .lp-check input:focus-visible {
	outline: 2px solid var(--lp-navy);
	outline-offset: 2px;
}

body.lp-page .lp-check label > span {
	flex: 1;
}

body.lp-page .lp-check small {
	font-size: 14px;
	color: var(--lp-sub);
}

body.lp-page .lp-check small .lp-num {
	font-size: 1em;
	color: var(--lp-sub);
}

/* 棒グラフ：見本の .bars（箱なし・ラベル｜棒｜値） */
body.lp-page .db-fact {
	margin: 16px 0;
	padding: 0;
	border: 0;
	background: none;
}

body.lp-page .db-fact__title {
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 700;
}

body.lp-page .article__body .db-bar {
	grid-template-columns: 96px 1fr 88px;
	margin: 8px 0;
	font-size: 16px;
	font-weight: 400;
}

body.lp-page .db-bar__track {
	height: 28px;
	background: none;
	border-radius: 4px;
}

body.lp-page .db-bar__fill {
	border-radius: 4px;
}

body.lp-page .db-bar__fill--mid { background: #9aa4b2; }

body.lp-page .article__body .db-bar__val {
	font-size: 20px;
	text-align: right;
}

body.lp-page .article__body .db-bar:has(.db-bar__fill--mid) .db-bar__val { color: var(--lp-ink); }

/* PC：2列の節（見本の .pcgrid） */
.lp-cols > .lp-col + .lp-col {
	margin-top: 48px;
}

@media (min-width: 1024px) {
	.lp-cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: start;
	}

	.lp-cols > .lp-col + .lp-col {
		margin-top: 0;
	}
}

/* LP型のヘッダーの屋号は1行（「比較チェック｜暮らしの業者」）・本文はヘッダーのすぐ下から */
body.lp-page .site-header__title a {
	gap: 0;
	white-space: nowrap;
}

body.lp-page .site-header__title .site-logo {
	margin-right: 6px;
}

body.lp-page .site-header__brand {
	display: inline;
}

body.lp-page .site-header__brand::after {
	margin: 0;
}

body.lp-page .l-main {
	padding-top: 0;
}

/* 広告なしのLP型（手順のページ）：最後の紺の帯に、自前のページへの白いボタン */
.lp-links {
	display: grid;
	gap: 8px;
	margin-top: 16px;
}

body.lp-page .article__body a.lp-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 8px 16px;
	border-radius: 8px;
	background: #fff;
	color: var(--lp-navy);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
}

body.lp-page .article__body a.lp-link::after {
	content: "→";
	margin-left: 8px;
}

/* ==================================================================
   LP型の色をサイトごとに（2026-10-06 本人「他のサイトもLP型に・色はサイトごと」）
   形はLP型でそろえ、主の色（見出し・○・地域の答え）だけサイトの色にする。
   広告のボタン（--lp-orange）・赤（×と注意）・金の帯は全サイト共通＝押す所と注意の意味を変えない。
   ただし美容はボタンもローズ（docs/design-system/DESIGN_美容.md の button-primary）。
   ================================================================== */
body.lp-page.genre-reuse {
	--lp-navy: #235c2c;
	--lp-navy-soft: #edf7ee;
	--lp-alt: #f4f8f4;
	--lp-line: #d5e3d7;
}

body.lp-page.genre-job {
	--lp-navy: #3c35a3;
	--lp-navy-soft: #f0effc;
	--lp-alt: #f6f6fb;
	--lp-line: #dcdbef;
}

body.lp-page.genre-beauty {
	--lp-navy: #8f4556;
	--lp-navy-soft: #f4e4e6;
	--lp-alt: #f7f1f1;
	--lp-line: #e8dddf;
	--lp-ink: #2b2326;
	--lp-sub: #6b5f63;
	--lp-orange: #a85868;
	--lp-orange-deep: #8f4556;
}

body.lp-page.genre-vpn {
	--lp-navy: #55309a;
	--lp-navy-soft: #f4effc;
	--lp-alt: #f7f5fb;
	--lp-line: #e0d9ee;
}

body.lp-page.genre-mobile {
	--lp-navy: #075985;
	--lp-navy-soft: #eaf5fb;
	--lp-alt: #f3f8fb;
	--lp-line: #d4e4ee;
}

body.lp-page.genre-otameshi {
	--lp-navy: #0f5f58;
	--lp-navy-soft: #e7f4f2;
	--lp-alt: #f3f8f7;
	--lp-line: #d3e5e2;
}

body.lp-page.genre-trial {
	--lp-navy: #1a25b8;
	--lp-navy-soft: #eceefd;
	--lp-alt: #f5f5fb;
	--lp-line: #d9dcf2;
}

/* 絵のないカード（買取など、絵をまだ入れていないサイト）：本文を全幅に、上に主の色の線 */
.lp-card:not(:has(> .lp-card__img)) {
	grid-template-columns: 1fr;
	border-top: 4px solid var(--lp-navy);
}

/* 節の中の広い表（4列・比較表）が grid の幅を押し広げてスマホで横にはみ出すのを防ぐ（表は .article__scroll の中で横に動く） */
body.lp-page :is(.lp-sec__in, .lp-cols) > *,
body.lp-page .lp-sec__body {
	min-width: 0;
}

/* LP型のヘッダー：屋号が長いサイト（買取・仕事・美容）はスマホで「広告を含みます」が右にはみ出していた → 折り返して2行目の右に置く（広告の表示は1画面目に残す） */
@media (max-width: 600px) {
	body.lp-page .site-header__inner {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	body.lp-page .site-header__ad {
		margin-left: auto;
	}
}

/* 広告も年の判定も無いヒーロー（手順のページ）：中身の無い枠を出さない */
body.lp-page .lp-hero__check:not(:has(.yc)):has(#lp-hero-cta:empty) {
	display: none;
}

/* ヒーローの段組みも、中身の最小幅で画面を押し広げない */
body.lp-page :is(.lp-hero__in, .lp-hero__leadrow) > * {
	min-width: 0;
}

/* A8の素材が「文＋リンク」の形（NordVPNなど）：文とリンクを縦に積む（素材の文言は変えない・見た目だけ） */
body.lp-page :is(.lp-cta__btn, .lp-sticky__btn).cta--asp {
	flex-wrap: wrap;
}

/* LP型は端末がダークモードでも白のまま（暮らしの業者と同じ考え：見た目が変わると別のサイトに見える）。
   ダークモードの変数（:root と body.genre-trial）が白い地の上で薄い文字になっていた（10-06 払いすぎ検査で発見）。 */
@media (prefers-color-scheme: dark) {
	body.lp-page {
		color-scheme: light;
		--paper: #fff;
		--card: #f6f7f9;
		--ink: #1a1f24;
		--sub: #4d5763;
		--hair: #e2e5e9;
		--shu: #e0412b;
		--shu-text: #b9301b;
		--shu-soft: #fdeeea;
		--c-text-soft: #39414a;
		--c-ink: #14202b;
		--c-cta: #f5610a;
		--c-cta-dark: #d24f04;
		/* :root で作った別名は :root の値で固まるので、ここで作り直す。 */
		--c-text: var(--ink);
		--c-text-muted: var(--sub);
		--c-bg: var(--paper);
		--c-bg-subtle: var(--card);
		--c-border: var(--hair);
		--c-bg-cta-subtle: #fff7d1;
		--c-marker: #fff3b5;
		background: #fff;
		color: var(--ink);
	}

	body.lp-page.genre-trial {
		--t-blue: #2d5a43;
		--t-blue-deep: #234834;
		--t-paper: #fff;
		--t-yellow: #e3ecd9;
		--t-yellow-deep: #cfdcc2;
		--t-ink: #1f3a2e;
		--t-on-yellow: #1f3a2e;
		--t-red-text: #a4492a;
		--t-green-text: #2f6b4c;
		--t-sage: #8fa98f;
		--ink: var(--t-ink);
		--paper: #fff;
		--card: #f6f7f9;
		--sub: #56675c;
		--hair: #dde3d6;
		--shu-soft: #e8efe3;
		--c-text-soft: #2f463a;
		--c-bg-cta-subtle: #eef3e8;
		--c-marker: #eef3e8;
	}

	body.lp-page.genre-beauty {
		--ink: #2b2326;
	}
}

/* ---- 先に結論の早見 [lp_pick]（2026-10-16・こんな人→この会社） ---- */
.lp-pick {
	margin: 0 0 24px;
	padding: 16px;
	border: 2px solid var(--lp-navy, #1a4f8b);
	border-radius: 12px;
	background: #fff;
}

.article__body .lp-pick__title,
body.lp-page .article__body .lp-pick__title {
	margin: 0 0 8px !important;
	font-size: 18px;
	font-weight: 700;
	color: var(--lp-navy, #1a4f8b);
}

.lp-pick__list {
	display: grid;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lp-pick__list > li {
	display: grid;
	gap: 2px;
	margin: 0 !important;
	padding: 8px 0 8px 12px;
	border-left: 4px solid var(--lp-orange, #c2410c);
}

.lp-pick__list > li::before {
	content: none !important;
}

.lp-pick__if {
	font-size: 14px;
	color: var(--lp-sub, #4d5763);
}

.lp-pick__if::after {
	content: "なら";
}

.lp-pick__who {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--lp-ink, #1a1f24);
}

.lp-pick__who a {
	color: inherit;
	text-decoration-color: var(--lp-orange, #c2410c);
	text-underline-offset: 4px;
}

.lp-pick__why {
	font-size: 15px;
	color: var(--lp-ink, #1a1f24);
}

.article__body .lp-pick__note {
	margin: 8px 0 0 !important;
	font-size: 14px;
	color: var(--lp-sub, #4d5763);
}

@media (min-width: 768px) {
	.lp-pick__list > li {
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
		align-items: baseline;
	}

	.lp-pick__if {
		grid-row: span 2;
		font-size: 15px;
	}
}