/*
 * 相続のお金ナビ — 基本スタイル
 *
 * モバイルファースト。基準幅 375px で組み、広い画面は max-width で受ける。
 * 骨格の確認用の最小構成。デザインはこの上に重ねる。
 */

/* ---------------------------------------------------------
 * デザイントークン
 *
 * 色・余白・角丸・影・文字の大きさは、すべてここで決める。
 * 個別のCSSに直接の値を書かない。相続は落ち着きと信頼が要るので、
 * 濃紺を軸に、背景は生成りの暖色でやわらげる。
 * 赤は期限が迫っているときにだけ使う。他では使わない。
 * ------------------------------------------------------- */

:root {
	/* 色 */
	--navy:        #1a4b73;
	--navy-dark:   #123958;
	--navy-light:  #e8eff5;
	--ink:         #17202a;   /* 本文・見出し */
	--ink-2:       #3d4854;   /* リード・説明文。薄くしすぎない */
	--ink-3:       #5a6672;   /* 注記・メタ・ラベル */
	--ink-muted:   #5a6672;   /* 旧称。--ink-3 と同じ */
	--line:        #e3e7eb;
	--bg:          #ffffff;
	--bg-warm:     #faf6f0;
	--bg-soft:     #f6f8fa;
	--alert:       #b3301f;
	--alert-bg:    #fdf1ef;
	--ok:          #2f7a52;

	/* 役割 */
	--text:        var(--ink);
	--muted:       var(--ink-3);
	--lead:        var(--ink-2);
	--accent:      var(--navy);

	/* 文字の大きさ
	 *
	 * スマホ利用が8割を超え、読者は法律や税の文章に慣れていない。
	 * 読ませる文章は 17px（iOSの標準本文サイズ）を基準にする。
	 * 見出しは太字で区別が付くので、本文を小さくして差を作らない。
	 * 補足は 15px まで。13〜14px はラベル・バッジ・条文番号に限り、
	 * 12px は装飾（英字ロゴなど）だけ。これより小さくしない。 */
	--fs-body:     1.0625rem; /* 17px 本文・リード・警告。iOSの標準本文と同じ */
	--fs-sub:      0.9375rem; /* 15px 補足・注記・メタ */
	--fs-label:    0.875rem;  /* 14px ラベル・条文・バッジ */
	--fs-mini:     0.75rem;   /* 12px 装飾のみ。下限 */

	/* 大きさ
	 *
	 * --wrap      読み物とフォーム。1行が長すぎると目が戻れない
	 * --wrap-wide トップ・ヘッダー・フッター。面で見せる場所 */
	--wrap:        44rem;
	--wrap-wide:   70rem;
	--radius:      10px;
	--radius-lg:   16px;
	--radius-pill: 999px;

	/* 影 */
	--shadow-sm:   0 1px 3px rgba(23, 32, 42, 0.08);
	--shadow-md:   0 4px 16px rgba(23, 32, 42, 0.10);
	--shadow-cta:  0 6px 20px rgba(26, 75, 115, 0.28);
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	/* BIZ UDPGothic が届くまでは、いままでの書体で出す（functions.php の souzoku_money_fonts）。 */
	font-family: "BIZ UDPGothic", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.7;
}

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

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

/* 横スクロール禁止（デザイン方針）。はみ出した要素があっても横には動かさない。
   overflow-x: hidden ではなく clip にしてある。hidden は body をスクロール
   容器にしてしまい、画面下に貼り付くCTAや position: sticky が効かなくなる。 */
html,
body {
	overflow-x: clip;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 1rem;
}

.wrap-wide {
	max-width: var(--wrap-wide);
}

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

.skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

/* 本文 */
.site-main {
	padding-block: 1.5rem 3rem;
}

/* ヒーローのような全幅の帯が先頭に来るページは、上の余白を持たせない。
   持たせると帯の上に白い隙間ができ、ヘッダーから浮いて見える。 */
.site-main:has( > .hero:first-child ) {
	padding-top: 0;
}

/* =========================================================
 * 読み物のページ（記事・固定ページ・法務）
 *
 * 離婚版と同じく、色地の上に白い紙を1枚置く。白地に直接文字を
 * 置くと端が決まらず、素っ気なく見える。
 * ========================================================= */

.site-main:has( .entry ) {
	background: var(--bg-soft);
}

.entry {
	padding: 1.4rem 1.1rem 1.7rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
	box-shadow: var(--shadow-sm);
}

.entry-title,
.archive-title {
	font-size: clamp( 1.45rem, 6vw, 2rem );
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: 0.01em;
	margin-block: 0 0.5rem;
}

.archive-intro {
	color: var(--muted);
	margin-block: 0 1.5rem;
}

/* =========================================================
 * カテゴリページの節
 *
 * 7つの節が続くため、境目が見えないとどこまで読んだか分からなくなる。
 * 節ごとに面を分け、地の色で役割を示す。
 *   生成り  … そのテーマで押さえておきたいこと（読み物の入口）
 *   薄い青  … 次に見るテーマ（横へ移る場所）
 *   白      … 記事一覧・よくある質問（読む場所）
 * ========================================================= */

.cat-page > * + * {
	margin-top: 1.75rem;
}

.cat-block,
.cat-guides,
.cat-refs {
	padding: 1.3rem 1.05rem 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--navy-light);
}

.cat-guides {
	background: var(--bg-warm);
	border-color: #e6dccd;
}

.cat-block-plain,
.cat-refs {
	background: var(--bg);
}

.cat-block-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block: 0 1rem;
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.6;
	color: var(--ink);
}

/* 件数。見出しの一部として読ませたいので、色は落として並べる。 */
.cat-block-count {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--navy-light);
	color: var(--navy);
	font-size: var(--fs-mini);
	font-weight: 700;
}

.cat-block-plain .cat-block-count {
	background: var(--bg-soft);
}

/* 白い面の上に置くので、カードは枠だけで浮かせる。 */
.cat-block .post-cards .post-card,
.cat-block .card {
	background: var(--bg);
}

/* --- カテゴリのよくある質問 ---
 * 開閉させない。3つしかなく、答えはどれも条文で決まっている。
 * 畳んでおくと、読者は開く手間の分だけ通り過ぎる。 */
.cat-faq {
	margin: 0;
}

.cat-faq-q {
	margin: 0;
	padding-block: 1rem 0.5rem;
	border-top: 1px solid var(--line);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ink);
}

.cat-faq-q:first-of-type {
	border-top: none;
	padding-top: 0;
}

.cat-faq-a {
	margin: 0 0 0 1rem;
	padding-bottom: 0.35rem;
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--ink-2);
}

/* --- この項目が根拠にしている資料 ---
 * 資料名だけを並べる。発行元と確認日は /references/ にまとめてあり、
 * 同じ情報を2か所で保つと片方が古くなる。 */
.cat-refs-title {
	margin-block: 0 0.9rem;
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.6;
	color: var(--ink-2);
}

.cat-refs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-refs-list li {
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-soft);
	font-size: var(--fs-label);
	color: var(--ink-2);
}

.cat-refs-note {
	margin-block: 0.9rem 0;
	font-size: var(--fs-mini);
}

.cat-refs-note a {
	color: var(--ink-3);
}

/* 2枚しか置かないので、3列に割らない。1枚が細くなって説明が読めなくなる。 */
@media ( min-width: 700px ) {
	.cat-block .card-grid { grid-template-columns: 1fr 1fr; }
	.cat-block { padding: 1.6rem 1.5rem 1.8rem; }
	.cat-guides,
	.cat-refs { padding: 1.6rem 1.5rem 1.8rem; }
}

/* 節を面にしたので、見出しの上余白は面のほうで持つ。 */
.cat-page .cat-guides-title,
.cat-page .archive-latest-title {
	margin-top: 0;
}

/* --- 押さえておきたいこと（カテゴリ配下の固定ページ）---
 * そのテーマの中心になる論点をカードで並べる。ここは目次であって
 * 記事一覧ではないので、日付も件数も出さない。 */
.cat-guides {
	margin-block: 0 2rem;
}

.cat-guides-title,
.archive-latest-title {
	margin-block: 0 0.9rem;
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.6;
	color: var(--ink);
}

.archive-latest-title {
	margin-block: 2rem 0.9rem;
}

.cat-guides-list {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-guide-link {
	display: block;
	position: relative;
	padding: 1rem 2.4rem 1.05rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
	text-decoration: none;
}

.cat-guide-link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 0.45rem;
	height: 0.45rem;
	margin-top: -0.25rem;
	border-top: 2px solid var(--navy);
	border-right: 2px solid var(--navy);
	transform: rotate(45deg);
}

.cat-guide-name {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy);
}

.cat-guide-lead {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--fs-sub);
	line-height: 1.75;
	color: var(--ink-3);
}

@media (min-width: 700px) {
	.cat-guides-list { grid-template-columns: 1fr 1fr; }
}

/* 縦のリズム。段落・箇条書き・表の間隔をひとつの決まりで揃える。 */
.entry-content > * {
	margin-block: 0;
}

.entry-content > * + * {
	margin-top: 1.5em;
}

.entry-content h2 {
	font-size: clamp( 1.25rem, 5.2vw, 1.5rem );
	font-weight: 800;
	line-height: 1.55;
	margin-top: 2.2em;
	padding: 0.55rem 0.8rem;
	border-left: 4px solid var(--navy);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: linear-gradient( 90deg, var(--navy-light), rgba(232, 239, 245, 0) 70% );
}

.entry-content h3 {
	font-size: clamp( 1.125rem, 4.6vw, 1.3rem );
	font-weight: 700;
	line-height: 1.6;
	margin-top: 1.9em;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--navy-light);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 0.5em; }

.entry-content a:not(.card):not(.btn) {
	text-underline-offset: 3px;
}

/* 表は横にはみ出すことがある。ページ全体を横に流さず、表の中で送る。 */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.entry-content th,
.entry-content td {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	background: var(--navy-light);
	font-weight: 700;
	white-space: nowrap;
}

.entry-content blockquote {
	margin-inline: 0;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--navy-light);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--bg-soft);
}

/* 一覧 */
.post-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.post-list-item {
	border-bottom: 1px solid var(--line);
}

.post-list-item a {
	display: block;
	padding-block: 0.875rem;
	text-decoration: none;
}

/* 一覧の記事1件。タイトルだけの行だと、リテラシーの高くない読者には
   どれが自分の話か判断できない。カテゴリと要約を添えて、開く前に
   中身が分かるようにする。 */
.post-card {
	border-bottom: 1px solid var(--line);
}

.post-card-link {
	display: grid;
	gap: 0.35rem;
	padding-block: 1.05rem;
	text-decoration: none;
	color: inherit;
}

/* アイキャッチのある記事。狭い画面でも文字が読める幅を残したいので、
   画像は小さめの固定幅にして横に置く。4:3に切り取る。 */
.post-card.has-thumb .post-card-link {
	grid-template-columns: 5.5rem 1fr;
	gap: 0.85rem;
	align-items: start;
}

.post-card-body {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.post-card-thumb {
	display: block;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-soft);
}

.post-card-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 記事本文の上のアイキャッチ。横いっぱいに置く。 */
.entry-thumb {
	margin: 0 0 1.5rem;
}

.entry-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

@media (min-width: 700px) {
	.post-card.has-thumb .post-card-link { grid-template-columns: 8rem 1fr; }
}

.post-card-cat {
	justify-self: start;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--navy-light);
	color: var(--navy);
	font-size: var(--fs-mini);
	font-weight: 700;
}

.post-card-title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.65;
	color: var(--navy);
}

.post-card-excerpt {
	font-size: var(--fs-sub);
	line-height: 1.75;
	color: var(--ink-3);
}

.post-list-more {
	margin-block: 1.1rem 0;
	text-align: right;
	font-size: var(--fs-sub);
}

/* 一覧の途中に挟む導線。記事の行と地続きに見えないよう、上下を空ける。 */
.post-list-cta {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--line);
}

.post-list-cta .cat-soudan {
	margin-top: 0;
}

/* =========================================================
 * お悩みと段階のあいだの橋渡し（トップ）
 *
 * 悩みを読んで「自分のことだ」と思った人に、次の一覧が答えの場所だと
 * 伝えて視線を下へ送る。矢印は文字の後ろに敷かず、文字の下に実体として
 * 置く。地紋にすると文字と重なって両方が読みにくくなる。
 * 面は濃紺に白い文字。前後の白い節のあいだで一度だけ色が反転し、
 * 「ここは読み物ではなく案内」だと分かる。ヒーローのボタンと同じ色なので
 * サイトの中で浮かない。
 * ========================================================= */

.home .section.bridge > .wrap {
	padding: 1.6rem 1.1rem 1.4rem;
	border-color: var(--navy-dark);
	background: linear-gradient( 160deg, var(--navy-dark), #2a6c9c );
	box-shadow: none;
	text-align: center;
}

.bridge-text {
	margin: 0 auto;
	max-width: 30rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: rgba( 255, 255, 255, 0.88 );
}

.bridge-text strong {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.5;
	color: #fff;
}

/* 白い丸に濃紺の矢印。押せるものではないので影は付けない。 */
.bridge-mark {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0.9rem auto 0;
	border-radius: 50%;
	background: #fff;
	color: var(--navy);
}

.bridge-mark svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke-width: 2.4;
}

@media ( min-width: 700px ) {
	.home .section.bridge > .wrap { padding: 1.9rem 1.5rem 1.6rem; }
	.bridge-text strong { font-size: 1.3125rem; }
}

/* =========================================================
 * ページ先頭の面（カテゴリ・記事一覧）
 *
 * 見出しの後ろに、そのページを表すアイコンを大きく薄く敷く。
 * 7つのテーマは字面が似ている（相続放棄・相続税・相続登記…）。
 * 開いた瞬間にどれの話かを形で伝えると、読み違えて戻る人が減る。
 *
 * 地紋は装飾なので aria-hidden。色は濃紺をごく薄くしたものだけを使い、
 * 文字とのコントラストを落とさない。
 * ========================================================= */

.page-head {
	position: relative;
	overflow: hidden;
	margin-block: 0 1.5rem;
	padding: 1.7rem 1.2rem 1.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
	text-align: center;
}

.page-head-mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13rem;
	height: 13rem;
	margin: -6.5rem 0 0 -6.5rem;
	/* 白地の上で形が読める濃さ。薄すぎるとスマホでは消える。
	   文字は上に重なるので、線1本の細さで濃さを稼ぐ。 */
	color: #cfdde9;
	pointer-events: none;
}

.page-head-mark svg {
	width: 100%;
	height: 100%;
	stroke-width: 1;
}

.page-head-body,
.page-head > h1,
.page-head > p {
	position: relative;
}

.column-count {
	position: relative;
}

.page-head-title {
	margin-block: 0 0.8rem;
	font-size: clamp( 1.5rem, 6vw, 1.9rem );
	font-weight: 800;
	line-height: 1.4;
}

.page-head-lead {
	margin-block: 0;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--lead);
	text-align: left;
}

/* リードが複数あるページ（協議書など）は段落の間だけ空ける。 */
.page-head-lead + .page-head-lead {
	margin-top: 0.7rem;
}

.page-head .sf-notes {
	justify-content: center;
	margin-top: 1rem;
}

/* 期限のあるテーマだけ出す。読者がいちばん先に知りたいことなので、
   本文に埋めずに見出しの下へ出す。 */
.page-head-limit {
	display: inline-block;
	margin-block: 1rem 0;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: var(--navy-light);
	color: var(--navy);
	font-size: var(--fs-label);
	font-weight: 700;
}

@media ( min-width: 700px ) {
	.page-head { padding: 2.1rem 2rem 2.3rem; }
	.page-head-lead { text-align: center; }
	.page-head-mark { width: 16rem; height: 16rem; margin: -8rem 0 0 -8rem; }
}

/* =========================================================
 * 記事一覧（/column/）
 *
 * ページ全体に薄い地の色を敷き、記事カードを白い面として浮かせる。
 * 白い紙の上に白いカードを置くと、1件ずつの境が見えない。
 * ========================================================= */

body.is-column-list {
	background: var(--bg-warm);
}

.column-title {
	margin-block: 0 0.8rem;
	font-size: clamp( 1.5rem, 6vw, 1.9rem );
	font-weight: 800;
	line-height: 1.4;
}

.column-lead {
	margin-block: 0 0.7rem;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--lead);
	text-align: left;
}

/* できないことを先に書く。読者にも、業法の線を示すうえでも要る。 */
.column-note {
	margin-block: 0 1rem;
	font-size: var(--fs-sub);
	line-height: 1.75;
	color: var(--ink-3);
	text-align: left;
}

.column-count {
	display: inline-block;
	margin: 0;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: var(--navy-light);
	color: var(--navy);
	font-size: var(--fs-label);
	font-weight: 700;
}

/* 記事一覧では、カードを面として置く。トップの新着と同じ形。 */
.column-page .post-cards .post-card-link {
	padding: 0.9rem;
	align-items: start;
}

/* 色地の上なので、途中に挟む相談の枠は白にして浮かせる。 */
.column-page .cat-soudan {
	background: var(--bg);
}

@media ( min-width: 700px ) {
	.column-lead,
	.column-note { text-align: center; }
	.column-page .post-cards { grid-template-columns: 1fr; }
	.column-page .post-cards .post-card.has-thumb .post-card-link {
		grid-template-columns: 11rem 1fr;
	}
}

/* --- トップの新着記事 ---
 * 色地の上に白い面を置いて、1件ずつが独立して見えるようにする。
 * 一覧と違って要約は出さない。ここは選ぶ場所で、読む場所ではない。 */
.post-cards {
	display: grid;
	gap: 0.75rem;
	border-top: none;
}

.post-cards .post-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
}

.post-cards .post-card-link {
	padding: 0.8rem;
}

.post-cards.post-list .post-card.has-thumb .post-card-link {
	grid-template-columns: 6.5rem 1fr;
	align-items: center;
}

/* --- カテゴリトップの新着は4件まで ---
 * 5件目以降とページ送りは、JS が .is-foldable を付けたときだけ隠す。
 * JS が無い環境では全件そのまま見える。 */
.cat-block.is-foldable .post-card.is-folded,
.cat-block.is-foldable .cat-pagination {
	display: none;
}

.cat-more {
	display: block;
	width: 100%;
	margin-top: 1rem;
}

/* .btn の display が [hidden] に勝つので明示して打ち消す */
.cat-more[hidden] {
	display: none;
}

@media (min-width: 700px) {
	.cat-more {
		width: auto;
		min-width: 20rem;
		margin-inline: auto;
	}
}

.post-card-date {
	font-size: var(--fs-mini);
	color: var(--ink-3);
}

/* 記事一覧への導線。押せる面として横いっぱいに置く。 */
.post-list-all {
	display: block;
	margin-top: 1rem;
	padding: 0.95rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--navy-light);
	color: var(--navy);
	font-size: 1.0625rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.post-list-all::after {
	content: " →";
}

@media (min-width: 700px) {
	.post-cards { grid-template-columns: 1fr 1fr; }
}

/* /column/ のテーマ絞り込み。7つ並ぶので、押せることが分かる形にする。 */
.column-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 0 1.5rem;
}

.column-cat {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-soft);
	font-size: var(--fs-sub);
	font-weight: 700;
	color: var(--ink-2);
	text-decoration: none;
}


@media (min-width: 768px) {
	.site-main {
		padding-block: 2.5rem 4rem;
	}

	.section {
		padding-block: 3rem;
	}

	.entry {
		padding: 2.1rem 2.5rem 2.5rem;
	}
}

/* =========================================================
 * トップページ
 * ========================================================= */

.section {
	padding-block: 2rem;
}

/* 読み物の入口。上の道具の節とは役割が違うので、地の色で切り替える。 */
.section-warm {
	background: var(--bg-warm);
	padding-block: 2.5rem;
}

.section-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	margin-block: 0 0.75rem;
	font-size: clamp( 1.35rem, 6vw, 1.7rem );
	line-height: 1.45;
	text-align: center;
}

.section-title::before,
.section-title::after {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--navy-light);
}

.section-lead {
	margin-block: 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--lead);
	text-align: center;
}

.phase-lead {
	margin-block: 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--lead);
}

.phase {
	margin-block: 2rem 0;
}

.phase-title {
	font-size: 1.25rem;
	margin-block: 0 0.375rem;
	padding-left: 0.6rem;
	border-left: 4px solid var(--accent);
}

/* カード。1カラムで組み、広い画面だけ2カラムにする */
.card-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
}

/* 押せると分かるようにする。枠だけだと読み物に見えて押されない。
   右端に山形を置き、見出しは濃紺、触れると枠と背景が動く。 */
/* 既定で色を付ける。白い紙の上の白い箱だと、輪郭が弱く読み飛ばされる。
   押した瞬間は逆に白へ抜いて、触った手ごたえを出す。 */
.card {
	position: relative;
	display: block;
	padding: 1rem 2.4rem 1rem 1rem;
	border: 1px solid #d3e0ea;
	border-radius: var(--radius);
	background: var(--navy-light);
	color: inherit;
	text-decoration: none;
}

.card:not(.is-soon)::after {
	content: "";
	position: absolute;
	top: 1.45rem;
	right: 1.15rem;
	width: 0.5rem;
	height: 0.5rem;
	border-top: 2.5px solid var(--navy);
	border-right: 2.5px solid var(--navy);
	transform: rotate(45deg);
}


.card.is-soon {
	padding-right: 1rem;
}

/* 準備中の目印は控えめに。押せないものを目立たせない */
.card.is-soon .card-icon {
	background: #e6e9ec;
	color: #9aa3ab;
}

.card-label {
	display: block;
	font-weight: 700;
	color: var(--accent);
	font-size: 1.125rem;
}

.card-desc {
	display: block;
	margin-top: 0.375rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--lead);
}

/* 目印つきのカード。字を読む前に「どれの話か」が伝わるよう、
   目印を左に置いて本文を右に流す。説明は一言だけにする。 */
.card-with-icon {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}

.card-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--navy);
}

.card-icon .icon {
	width: 1.5rem;
	height: 1.5rem;
}

.card-body {
	display: block;
	min-width: 0;
}

.card-with-icon .card-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	line-height: 1.45;
}

.card-with-icon .card-desc {
	margin-top: 0.3rem;
	line-height: 1.65;
}

.card-with-icon::after { top: 1.6rem; }

/* 準備中。リンクにせず、同じ場所に並べて全体像だけ見せる */
.card.is-soon {
	background: #f2f4f6;
	border-color: #dfe3e7;
	border-style: dashed;
	cursor: default;
}

.card.is-soon .card-label {
	color: var(--muted);
}

.badge {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: #e9edf1;
	color: var(--muted);
	font-size: 0.8125rem;
	font-weight: 400;
	vertical-align: 0.05em;
}

.limit {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	background: #fdeaea;
	color: #a52a2a;
	font-size: 0.875rem;
	font-weight: 700;
	vertical-align: 0.05em;
}

.empty {
	color: var(--muted);
}

@media (min-width: 700px) {
	.card-grid {
		grid-template-columns: 1fr 1fr;
	}

	/* ヒーローの導線は1つに絞る。並べると主従が消えるため */
	.card-grid-single {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
 * 期限チェック（/kigen/）
 * ========================================================= */

.tool-lead {
	margin-block: 0 1.5rem;
	color: var(--lead);
}

.kigen-form {
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #f7f9fb;
}

.kigen-label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

/* iOS で 16px 未満だと入力時にズームするため下げない */
.kigen-date {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid #c3ccd4;
	border-radius: 6px;
	background: var(--bg);
	font-size: 1.0625rem;
	font-family: inherit;
}

.kigen-hint {
	margin-block: 0.5rem 0;
	font-size: 0.9375rem;
	color: var(--muted);
}

/* 生前の人の逃げ道。本文と同じ大きさ（17px）。補足の15pxではスマホで読めなかった */
.kigen-alt {
	margin-block: 0.875rem 0;
	padding-top: 0.875rem;
	border-top: 1px dashed var(--line);
	font-size: 1.0625rem;
	color: var(--ink);
	line-height: 1.7;
}
.kigen-alt a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
/* 行頭の札。カテゴリの期限の札（.page-head-limit）と同じ部品を小さくしたもの */
.kigen-alt-tag {
	display: inline-block;
	margin-inline-end: 0.5rem;
	margin-block-end: 0.35rem;
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font-size: var(--fs-label);
	font-weight: 700;
	line-height: 1.5;
	vertical-align: 0.1em;
}

.kigen-summary {
	margin-block: 1.25rem 0;
	padding: 0.875rem 1rem;
	border-left: 4px solid var(--accent);
	background: #eef4f9;
	font-weight: 700;
	line-height: 1.65;
}

.kigen-group {
	margin-block: 2.5rem 0;
}

.kigen-group-title {
	font-size: 1.1875rem;
	margin-block: 0 0.375rem;
}

.kigen-group-lead {
	margin-block: 0 1rem;
	font-size: 1.0625rem;
	color: var(--lead);
}

.kigen-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.kigen-item {
	padding: 0.875rem 1rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--line);
	border-radius: 6px;
}

.kigen-item[data-state="ok"]   { border-left-color: #3f8f5a; }
.kigen-item[data-state="near"] { border-left-color: #c0392b; background: #fdf6f5; }
.kigen-item[data-state="past"] { border-left-color: #9aa3ab; background: #f5f6f7; }

.kigen-item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.kigen-name {
	font-weight: 700;
}

.kigen-span {
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	background: #eef1f4;
	color: var(--muted);
	font-size: 0.875rem;
}

.kigen-date-line {
	margin-block: 0.5rem 0;
	font-weight: 700;
	line-height: 1.6;
}

.kigen-item[data-state="near"] .kigen-date-line { color: #a5281b; }
.kigen-item[data-state="past"] .kigen-date-line { color: #6b747c; }

.kigen-desc {
	margin-block: 0.5rem 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--lead);
}

.kigen-note {
	margin-block: 0.5rem 0;
	padding: 0.5rem 0.7rem;
	border-radius: 4px;
	background: #fdf6e7;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.kigen-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-block: 0.6rem 0;
	font-size: 0.9375rem;
}

.kigen-law {
	color: var(--muted);
}

.kigen-caution,
.kigen-soudan {
	margin-block: 2.5rem 0;
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
}

.kigen-caution p {
	margin-block: 0 0.75rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.kigen-caution p:last-child { margin-bottom: 0; }

.kigen-soudan p {
	margin-block: 0 1rem;
	font-size: 1.0625rem;
}

/* カテゴリ一覧の末尾に置く導線 */
.archive-tool {
	margin-block: 2.5rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.archive-tool-title {
	font-size: 1.25rem;
	margin-block: 0 0.75rem;
}

/* =========================================================
 * カテゴリ内の道具
 * ========================================================= */

.cat-tool {
	margin-block: 2.5rem 0;
	padding: 1.25rem 1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #f7f9fb;
}

.cat-tool-title {
	font-size: 1.1875rem;
	margin-block: 0 0.5rem;
}

.cat-tool-lead {
	margin-block: 0 1.25rem;
	font-size: 1.0625rem;
	color: var(--lead);
}

.tool-field {
	margin-block: 0 1.25rem;
}

.tool-label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.4rem;
}

/* iOS で 16px 未満だと入力時にズームするため下げない */
.tool-input {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid #c3ccd4;
	border-radius: 6px;
	background: var(--bg);
	font-size: 1.0625rem;
	font-family: inherit;
}

.tool-input-num {
	max-width: 8rem;
}

/* iOS Safari は number / date の入力欄に固有の最小幅を持つ。flex や grid の
   中で親より広がって、ページごと横にはみ出すことがある。最小幅を外して
   親の幅に収める。 */
input[type="number"],
input[type="date"] {
	min-width: 0;
	max-width: 100%;
}

.tool-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

.tool-choices label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
}

.tool-hint {
	margin-block: 0.4rem 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--muted);
}

/* 結果 */
.tool-result {
	margin-top: 1.5rem;
}

.res-block {
	padding: 1rem;
	margin-block: 0 1rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: 6px;
	background: var(--bg);
}

.res-block:last-child { margin-bottom: 0; }

.res-ok   { border-left-color: #3f8f5a; }
.res-near { border-left-color: #c0392b; background: #fdf6f5; }
.res-past { border-left-color: #9aa3ab; background: #f5f6f7; }

.res-title {
	font-size: 1.0625rem;
	margin-block: 0 0.5rem;
}

.res-lead {
	margin-block: 0;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.6;
}

.res-near .res-lead { color: #a5281b; }
.res-past .res-lead { color: #6b747c; }

.res-note {
	margin-block: 0.6rem 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--muted);
}

.res-warn {
	margin-block: 1rem 0;
	padding: 0.75rem 0.85rem;
	border-radius: 6px;
	background: #fdf6e7;
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* 相続権の移り方 */
.cascade {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.cascade-step {
	position: relative;
	padding: 0.75rem 0 0.75rem 1.25rem;
	border-left: 2px solid var(--line);
}

.cascade-step::before {
	content: "";
	position: absolute;
	left: -0.4rem;
	top: 1.1rem;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--line);
}

.cascade-step.is-now::before { background: var(--accent); }
.cascade-step.is-end::before { background: #c0392b; }
.cascade-step:last-child { border-left-color: transparent; }

.cascade-when {
	display: block;
	font-size: 0.9375rem;
	color: var(--muted);
}

.cascade-who {
	display: block;
	font-weight: 700;
	line-height: 1.6;
}

.cascade-step.is-end .cascade-who { color: #a5281b; }

.cascade-law {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.875rem;
	color: var(--muted);
}

/* =========================================================
 * 相談フォーム（/soudan/）
 * ========================================================= */

.sf {
	margin-top: 1.5rem;
}

.sf-field {
	margin: 0 0 1.5rem;
	padding: 0;
	border: none;
	border-top: 1px solid var(--line);
	padding-top: 1.25rem;
}

.sf-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	margin-bottom: 0.6rem;
	font-weight: 700;
}

.req,
.opt {
	padding: 0.1rem 0.4rem;
	border-radius: 3px;
	font-size: 0.8125rem;
	font-weight: 700;
}

.req { background: #fbdcdc; color: #a5281b; }
.opt { background: #dde8f3; color: #1f5c8b; }

.sf-sub {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--muted);
}

/* 選択肢は押せる箱にする。丸い印だけだと的が小さく、
   スマホでは押しにくいうえ、選べることが伝わりにくい。 */
.sf-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sf-choices label {
	display: inline-flex;
	position: relative;
}

.sf-choice-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sf-choice {
	display: inline-flex;
	align-items: center;
	min-height: 3.1rem;
	padding: 0.7rem 1.05rem;
	border: 1px solid #c3ccd4;
	border-radius: var(--radius);
	background: var(--bg);
	font-size: 1.0625rem;
	line-height: 1.5;
	cursor: pointer;
}


.sf-choice-input:checked + .sf-choice {
	padding: 0.65rem 1rem;
	border: 2px solid var(--navy);
	background: var(--navy-light);
	color: var(--navy-dark);
	font-weight: 700;
}

.sf-choice-input:focus-visible + .sf-choice {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

/* iOS で 16px 未満だと入力時にズームするため下げない */
.sf-input {
	width: 100%;
	padding: 0.65rem 0.7rem;
	border: 1px solid #c3ccd4;
	border-radius: 6px;
	background: var(--bg);
	font-size: 1.0625rem;
	font-family: inherit;
	line-height: 1.6;
}

.sf-input-short { max-width: 16rem; }

textarea.sf-input { resize: vertical; }

.sf-hint {
	margin-block: 0.45rem 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--muted);
}

/* 機械よけ。見せない */
.sf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sf-error {
	margin-block: 0 1rem;
	padding: 0.8rem 0.9rem;
	border-radius: 6px;
	background: #fbdcdc;
	color: #8f2417;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.sf-submit {
	display: block;
	width: 100%;
	padding: 0.95rem 1rem;
	border: none;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-size: 1.1875rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}


.sf-submit:disabled {
	background: #9aa3ab;
	cursor: default;
}

.sf-privacy {
	margin-block: 1rem 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--muted);
}

.sf-done {
	margin-top: 1.5rem;
	padding: 1.25rem 1rem;
	border: 1px solid #b7d8c3;
	border-radius: 8px;
	background: #f1f8f3;
}

.sf-done-title {
	font-size: 1.1875rem;
	margin-block: 0 0.6rem;
}

.sf-done-id {
	margin-block: 0.5rem 0;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}
.sf-done-note {
	margin-block: 0.75rem 0;
	font-size: 0.9375rem;
	color: var(--muted);
}

@media (min-width: 600px) {
	.sf-submit {
		max-width: 20rem;
	}
}

/* =========================================================
 * 法務ページ・同意欄
 * ========================================================= */

/* 法務ページは条文のような長文を読み通す場所。行間を広めに保ち、
   見出しは記事より一段小さくして本文との差を付けすぎない。 */
.legal .entry-content h2 {
	font-size: clamp( 1.125rem, 4.4vw, 1.3rem );
	margin-top: 2em;
}

.legal .entry-content h3 {
	font-size: 1.0625rem;
	margin-top: 1.6em;
}

.legal .entry-content p,
.legal .entry-content li {
	font-size: 1.0625rem;
	line-height: 1.95;
}

.legal .entry-content > p:first-child {
	color: var(--lead);
}

.legal-table dl {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.legal-table dt {
	padding: 0.65rem 0.9rem 0.1rem;
	background: var(--navy-light);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--navy-dark);
}

.legal-table dd {
	margin: 0;
	padding: 0.1rem 0.9rem 0.75rem;
	border-bottom: 1px solid var(--line);
	background: var(--navy-light);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.legal-table dd:last-child { border-bottom: 0; }

/* 同意欄。押しやすさを優先して枠で囲む */
.sf-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.9rem 1rem;
	margin-block: 0 1.25rem;
	border: 1px solid #c3ccd4;
	border-radius: 8px;
	background: #f7f9fb;
	line-height: 1.65;
	cursor: pointer;
}

.sf-consent input {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	margin-top: 0.2rem;
}

.cf-notice {
	margin-block: 0 1.5rem;
	padding: 0.8rem 0.9rem;
	border-radius: 6px;
	background: #eef4f9;
	font-size: 1.0625rem;
	line-height: 1.7;
}

@media (min-width: 600px) {
	.legal-table dl {
		grid-template-columns: 12em 1fr;
	}

	.legal-table dt {
		display: flex;
		align-items: center;
		padding: 0.85rem 1rem;
		border-bottom: 1px solid var(--line);
	}

	.legal-table dt:last-of-type { border-bottom: 0; }

	.legal-table dd {
		padding: 0.85rem 1.1rem;
		background: var(--bg);
	}
}

/* =========================================================
 * 記事（目次・記事中CTA・根拠・関連）
 * ========================================================= */

.breadcrumb {
	margin-block: 0 1rem;
	font-size: 0.9375rem;
	color: var(--muted);
	overflow-x: auto;
}

.breadcrumb ol {
	display: flex;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.breadcrumb li + li::before {
	content: "›";
	margin-right: 0.4rem;
	color: #b6bec5;
}

.entry-meta {
	margin-block: 0.5rem 0;
	font-size: 0.9375rem;
	color: var(--muted);
}

.entry-updated { margin-left: 0.75rem; }

/* 目次 */
.toc {
	margin-block: 1.75rem 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #f7f9fb;
}

.toc-title {
	font-size: 1.0625rem;
	margin-block: 0 0.6rem;
}

.toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.toc-item {
	line-height: 1.6;
}

.toc-item a {
	display: block;
	padding: 0.35rem 0;
	text-decoration: none;
}


.toc-h3 {
	padding-left: 1.1rem;
	font-size: 1rem;
}

/* 記事中CTA */
/* 記事の途中に差し込む導線。ボタンはサイトの他の主導線と同じ丸長にして
   中央に置く。角丸の小さい左寄せのボタンは、本文のリンクと見分けがつかず
   押されにくい。 */
.inline-cta {
	margin-block: 2rem;
	padding: 1.25rem 1.1rem 1.35rem;
	border: 1px solid #cfe0ee;
	border-radius: var(--radius-lg);
	background: #eef4f9;
	text-align: center;
}

.inline-cta-lead {
	margin-block: 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	text-align: left;
}

.inline-cta-btn {
	display: block;
	max-width: 22rem;
	margin-inline: auto;
	padding: 0.95rem 1.6rem;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	font-size: 1.125rem;
	line-height: 1.4;
}

@media ( min-width: 700px ) {
	.inline-cta-lead { text-align: center; }
}

.inline-cta-btn::after { content: " →"; }


/* 根拠 */
.post-references {
	margin-block: 2.5rem 0;
	padding: 1.1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
}

.post-references-title {
	font-size: 1.1875rem;
	margin-block: 0 0.75rem;
}

.reference-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.reference-item {
	padding-block: 0.7rem;
	border-top: 1px solid var(--line);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.reference-item:first-child { border-top: none; }

.reference-kind {
	display: inline-block;
	margin-right: 0.5rem;
	padding: 0.1rem 0.45rem;
	border-radius: 3px;
	background: #eef1f4;
	color: var(--muted);
	font-size: 0.875rem;
}

.reference-name { font-weight: 700; }

.reference-publisher,
.reference-checked {
	display: inline-block;
	margin-left: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--muted);
}

.reference-desc {
	margin-block: 0.35rem 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--lead);
}

.post-references-note {
	margin-block: 0.85rem 0;
	font-size: 0.9375rem;
}

/* 記事末 */
.entry-cta,
.related {
	margin-block: 2.5rem 0;
}

.entry-cta-title,
.related-title {
	font-size: 1.1875rem;
	margin-block: 0 0.85rem;
}

/* --- 関連する記事 ---
 * 一覧の記事カードと違い、日付を出す。読み終えたあとに次を選ぶ場面では、
 * いつの情報かが選ぶ材料になるため。 */
.related-list {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.related-link {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0.85rem;
	align-items: center;
	padding: 0.8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
	text-decoration: none;
	color: inherit;
}

/* アイキャッチが無い記事では、文字が左端から始まる */
.related-link:not(:has(.related-thumb)) {
	grid-template-columns: 1fr;
}

.related-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg);
}

.related-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.related-body {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

.related-name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy);
}

.related-date {
	font-size: var(--fs-mini);
	color: var(--ink-3);
}

/* --- 前後の記事 ---
 * 関連記事で当たりが無かった人の受け皿。カテゴリで絞らない。 */
.post-nav {
	display: grid;
	gap: 0.7rem;
	margin-top: 1.5rem;
}

.post-nav-link {
	display: grid;
	gap: 0.3rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
	text-decoration: none;
	color: inherit;
}

.post-nav-label {
	font-size: var(--fs-mini);
	font-weight: 700;
	color: var(--ink-3);
}

.post-nav-next {
	text-align: right;
}

.post-nav-title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy);
}

@media (min-width: 700px) {
	.related-list { grid-template-columns: 1fr 1fr; }
	.post-nav { grid-template-columns: 1fr 1fr; }
	.post-nav:has(.post-nav-next:only-child) { grid-template-columns: 1fr; }
}

/* 記事下の導線は、カテゴリページや固定ページの末尾と同じ枠を使う。
   見出しのすぐ下に来るので、枠じたいの上余白は詰める。 */
.entry-cta > .archive-cta:first-of-type,
.entry-cta > .cat-soudan:first-of-type {
	margin-top: 0;
}

/* =========================================================
 * フッター
 * ========================================================= */

.icon {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

/* 運営情報の3項目 */
.site-info {
	margin-top: 3rem;
	padding-block: 2rem;
	border-top: 1px solid var(--line);
	background: #f7f9fb;
}

.site-info-grid {
	display: grid;
	gap: 1.5rem;
}

.site-info-item {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}

.site-info-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #e4edf4;
	color: var(--accent);
}

.site-info-title {
	font-size: 1rem;
	margin-block: 0 0.3rem;
}

.site-info-item p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--lead);
}

/* フッター本体 */
.site-footer {
	border-top: 1px solid var(--line);
	padding-block: 2rem 0;
	background: var(--bg);
}

.footer-grid {
	display: grid;
	gap: 1.75rem;
}

.brand-link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.brand-mark {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #e4edf4;
	color: var(--accent);
}

.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.brand-name {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--accent);
}

.brand-roman {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	color: var(--muted);
}

.footer-desc {
	margin-block: 0.75rem 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--lead);
}

.footer-col-title {
	font-size: 0.9375rem;
	margin-block: 0 0.6rem;
}

.footer-col ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-col a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding-block: 0.3rem;
	font-size: 0.9375rem;
	text-decoration: none;
}


.footer-bottom {
	margin-top: 1.75rem;
	padding-block: 1rem 2rem;
	border-top: 1px solid var(--line);
}

.site-copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--muted);
	text-align: right;
}

/* 画面下に貼り付くCTA */
.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	transform: translateY(110%);
	transition: transform 0.22s ease-out;
	will-change: transform;
	padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
	background: var(--accent);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}

.sticky-cta.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.sticky-cta { transition: none; }
}

/* 貼り付くCTAが最後の内容に重ならないようにする。
   CTAを出さないページで無駄な余白ができないよう、バーがあるときだけ。 */
body:has(.sticky-cta) .footer-bottom {
	padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
}

.sticky-cta-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: var(--wrap);
	margin-inline: auto;
}

.sticky-cta-badge {
	flex: none;
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background: #fdf3e3;
	color: #7a4a10;
	line-height: 1.15;
	text-align: center;
}

.sticky-cta-badge strong {
	font-size: 0.75rem;
	font-weight: 700;
}

.sticky-cta-badge em {
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
}

.sticky-cta-body { flex: 1; min-width: 0; }

.sticky-cta-btn {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: 999px;
	background: #fff;
	color: var(--accent);
	font-size: 1.125rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}


.sticky-cta-note {
	margin-block: 0.4rem 0;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	color: #d7e6f2;
}

@media (min-width: 700px) {
	.site-info-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.footer-grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 2rem;
	}

	.footer-brand { grid-column: 1 / -1; }

	.footer-col ul {
		flex-direction: column;
		gap: 0;
	}

	.sticky-cta-btn { font-size: 1.0625rem; }
}

/* =========================================================
 * ヘッダー
 * ========================================================= */

.site-header {
	position: relative;
	z-index: 30;
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.7rem;
}

.site-header .brand-link,
.site-footer .brand-link {
	text-decoration: none;
	color: inherit;
}

.nav-toggle {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: var(--radius);
	background: transparent;
	color: var(--navy);
	cursor: pointer;
}


.nav-toggle .icon { width: 1.75rem; height: 1.75rem; }

.nav-toggle-close { display: none; }

.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }
.nav-toggle[aria-expanded="true"] { background: var(--navy-light); }

/* 開いている間はページを動かせないので、メニュー自身が伸びたときに
   中でたどれるようにする。項目が増えても下まで届く。 */
.site-nav {
	border-top: 1px solid var(--line);
	padding-block: 1rem 1.5rem;
	background: var(--bg-soft);
	max-height: calc( 100dvh - 4.5rem );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.nav-close {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.85rem 1rem;
	border: 1px solid #c3ccd4;
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--muted);
	font-size: 1rem;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

.nav-close .icon { width: 1.15rem; height: 1.15rem; }

.site-nav-title {
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	margin-block: 1rem 0.4rem;
	color: var(--muted);
}

.site-nav-title:first-child { margin-top: 0; }

.site-nav-list {
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.site-nav-list a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem;
	border-radius: var(--radius);
	line-height: 1.4;
	text-decoration: none;
	font-weight: 700;
}


body.nav-open { overflow: hidden; }

/* メニューを開いている間は下部固定CTAを隠す。
   メニューの一番下の項目に重なって押せなくなる。 */
body.nav-open .sticky-cta {
	transform: translateY( 110% );
}

/* =========================================================
 * ファーストビュー
 * ========================================================= */

.hero {
	padding-block: 1.15rem 2.25rem;
	background: linear-gradient(170deg, var(--bg-warm) 0%, #fdfbf8 62%, var(--bg-soft) 100%);
}

.hero-eyebrow {
	margin-block: 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--navy);
}

.hero-title {
	margin-block: 0 0.9rem;
	font-size: clamp( 1.9rem, 8.8vw, 2.6rem );
	line-height: 1.35;
	letter-spacing: -0.01em;
	font-weight: 800;
}

.hero-title em {
	font-style: normal;
	color: var(--navy);
}

.hero-lead {
	margin-block: 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--lead);
}

.hero-cta {
	display: block;
	padding: 1.05rem 1.25rem;
	border-radius: var(--radius-pill);
	background: var(--navy);
	color: #fff;
	font-size: 1.1875rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	box-shadow: var(--shadow-cta);
}

.hero-cta::after { content: "　→"; }


.hero-badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin-block: 1.15rem 1.75rem;
	padding: 0;
	list-style: none;
}

.hero-badges li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.9375rem;
	font-weight: 700;
	text-align: center;
	color: var(--muted);
}

.hero-badges .icon {
	width: 1.35rem;
	height: 1.35rem;
	color: var(--navy);
}

/* 道具が返すものをそのまま見せる */
.hero-preview {
	padding: 0.9rem 1rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
	box-shadow: var(--shadow-md);
}

.hero-preview-head {
	margin-block: 0 0.7rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--line);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}

.hero-preview-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-preview-list li {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: baseline;
	gap: 0.15rem 0.6rem;
	padding-block: 0.6rem;
	border-bottom: 1px dashed var(--line);
}

.hero-preview-list li:last-child { border-bottom: none; }

.hp-name {
	font-size: 1.0625rem;
	font-weight: 700;
}

.hp-span {
	grid-row: 1;
	grid-column: 2;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	background: var(--bg-soft);
	color: var(--muted);
	font-size: 0.875rem;
}

.hp-date {
	grid-column: 1;
	font-size: 1.0625rem;
	color: var(--muted);
}

.hp-left {
	grid-column: 2;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--navy);
	white-space: nowrap;
}

.hero-preview-list li.is-near .hp-left { color: var(--alert); }

.hero-preview-note {
	margin-block: 0.75rem 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--lead);
}

/* 例のすぐ下の導線。上の大きなボタンと重ならないよう、
   枠線の形にして主従を付ける。 */
.hero-preview-cta {
	display: block;
	margin-top: 0.9rem;
	padding: 0.85rem 1rem;
	border: 2px solid var(--navy);
	border-radius: var(--radius-pill);
	color: var(--navy);
	font-size: 1.0625rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.hero-preview-cta::after { content: "　→"; }


@media (min-width: 700px) {
	.hero {
		padding-block: 3rem 3.5rem;
	}

	.hero-title { font-size: 2.6rem; }

	.hero-cta {
		display: inline-block;
		min-width: 22rem;
	}

	.hero-badges {
		max-width: 26rem;
		margin-inline: 0;
	}

	.site-nav-list {
		grid-template-columns: 1fr 1fr;
	}
}

/* =========================================================
 * 結果の下の導線と、相談フォームへの引き継ぎ
 * ========================================================= */

.result-cta {
	margin-block: 1.5rem 0;
	padding: 1.15rem 1.1rem 1.25rem;
	border: 1px solid var(--navy-light);
	border-radius: var(--radius-lg);
	background: var(--navy-light);
}

.result-cta-title {
	font-size: 1.1875rem;
	margin-block: 0 0.5rem;
	color: var(--navy-dark);
}

.result-cta-lead {
	margin-block: 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink);
}

.result-cta-btn {
	display: block;
	padding: 0.95rem 1rem;
	border-radius: var(--radius-pill);
	background: var(--navy);
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	box-shadow: var(--shadow-cta);
}

.result-cta-btn::after { content: "　→"; }


.result-cta-note {
	margin-block: 0.7rem 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--muted);
}

/* 引き継ぎの確認 */
.sf-carryover {
	margin-block: 1.25rem 0;
	padding: 1rem;
	border: 1px solid #b9d4c4;
	border-radius: var(--radius);
	background: #f2f8f4;
}

.sf-carryover-title {
	font-size: 1.0625rem;
	margin-block: 0 0.4rem;
}

.sf-carryover-lead {
	margin-block: 0 0.75rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--lead);
}

.sf-carryover-detail summary {
	padding: 0.5rem 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--navy);
	cursor: pointer;
}

.sf-carryover-list {
	margin: 0.4rem 0 0;
	border-top: 1px solid #d3e4d9;
}

.sf-carryover-list dt {
	padding: 0.6rem 0 0.1rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--muted);
}

.sf-carryover-list dd {
	margin: 0;
	padding: 0 0 0.6rem;
	border-bottom: 1px solid #d3e4d9;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.sf-carryover-drop {
	margin-top: 0.85rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid #c3ccd4;
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--muted);
	font-size: 0.9375rem;
	font-family: inherit;
	cursor: pointer;
}

@media (min-width: 600px) {
	.result-cta-btn { max-width: 24rem; }

	.sf-carryover-list {
		display: grid;
		grid-template-columns: 13rem 1fr;
	}

	.sf-carryover-list dt { padding: 0.6rem 0; }
	.sf-carryover-list dd { padding: 0.6rem 0; }
	.sf-carryover-list dt { border-bottom: 1px solid #d3e4d9; }
}


/* =========================================================
 * 相談の流れ・安心の目印
 * ========================================================= */

.sf-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 1rem 0;
	padding: 0;
	list-style: none;
}

.sf-notes li {
	padding: 0.4rem 0.85rem;
	border-radius: var(--radius-pill);
	background: var(--navy-light);
	color: var(--navy-dark);
	font-size: 0.9375rem;
	font-weight: 700;
}

.sf-flow {
	margin-block: 2rem 0;
	padding: 1.5rem 1.1rem;
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
}

.sf-flow .section-title {
	margin-bottom: 1.1rem;
}

.step-grid {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.step {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.2rem 0.9rem;
	padding: 1rem;
	border-radius: var(--radius);
	background: var(--bg);
	box-shadow: var(--shadow-sm);
}

.step-num {
	grid-column: 1 / -1;
	margin: 0 0 0.15rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--navy);
}

.step-title {
	grid-column: 1 / -1;
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.step-icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius);
	background: var(--navy-light);
	color: var(--navy);
}

.step-desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--lead);
}

.step-note {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-block: 1rem 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--muted);
}

.step-note-icon {
	flex: none;
	color: var(--muted);
}

.step-note-icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

@media (min-width: 700px) {
	.step-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* =========================================================
 * 触ったときの反応
 *
 * 指で触る端末では、離しても :hover が残る。カードを一度押すと
 * 選択中のように青いままになり、誤解のもとになる。
 * :hover はマウスのある端末に限り、指には押した瞬間だけ反応させる。
 * ========================================================= */

@media (hover: hover) {
	.post-list-item a:hover {
	text-decoration: underline;
	}

	.post-card-link:hover .post-card-title { text-decoration: underline; }

	.cat-guide-link:hover {
	border-color: var(--navy);
	background: var(--navy-light);
	}

	.related-link:hover,
	.post-nav-link:hover {
	border-color: var(--navy);
	background: var(--navy-light);
	}

	.post-cards .post-card:hover {
	border-color: var(--navy);
	background: var(--navy-light);
	}

	.post-list-all:hover {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
	}

	.column-cat:hover {
	border-color: var(--navy);
	background: var(--navy-light);
	color: var(--navy);
	}

	.card:not(.is-soon):hover {
	border-color: var(--navy);
	background: var(--navy-light);
	}

	.card:not(.is-soon):hover::after {
	right: 0.95rem;
	}

	.sf-choice:hover {
	border-color: var(--navy);
	background: var(--navy-light);
	}

	.sf-submit:hover { background: #17486e; }
	.toc-item a:hover { text-decoration: underline; }
	.inline-cta-btn:hover { background: #17486e; }
	.footer-col a:hover { text-decoration: underline; }
	.sticky-cta-btn:hover { background: #eef4f9; }
	.nav-toggle:hover { background: var(--navy-light); }
	.site-nav-list a:hover { background: var(--navy-light); }
	.hero-cta:hover { background: var(--navy-dark); }
	.hero-preview-cta:hover {
	background: var(--navy);
	color: #fff;
	}

	.result-cta-btn:hover { background: var(--navy-dark); }
}

/* 押した瞬間の反応。指でもマウスでも同じように出る。 */
.card:not(.is-soon):active {
	border-color: var(--navy);
	background: var(--bg);
}

.sf-choice:active {
	border-color: var(--navy);
	background: var(--navy-light);
}

.hero-cta:active,
.result-cta-btn:active,
.inline-cta-btn:active,
.sf-submit:active {
	background: var(--navy-dark);
}

.hero-preview-cta:active,
.sticky-cta-btn:active {
	background: var(--navy-light);
}

.nav-toggle:active,
.site-nav-list a:active {
	background: var(--navy-light);
}

/* 姓と名、都道府県と市区町村のように、横に並ぶ2つの欄 */
.sf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
}

.sf-row .sf-input { width: 100%; }

.sf-hint-top {
	margin-block: -0.2rem 0.6rem;
}

/* =========================================================
 * よくあるお悩み・よくある質問
 * ========================================================= */

.worry-list {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.worry {
	display: flex;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-soft);
}

.worry-icon {
	flex: none;
	color: #bcd0e0;
}

.worry-icon .icon {
	width: 1.4rem;
	height: 1.4rem;
}

.worry-title {
	margin: 0 0 0.2rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.55;
}

.worry-desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--lead);
}

.worry-note {
	margin-block: 1rem 0;
	font-size: 0.9375rem;
	color: var(--muted);
}

/* よくある質問。開閉にして、はじめは見出しだけを並べる */
.faq-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.faq-list li {
	border-bottom: 1px solid var(--line);
}

.faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	min-height: 3.4rem;
	padding-block: 0.85rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.55;
	cursor: pointer;
	list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }

/* 開いているかどうかを＋と−で示す */
.faq-q::after {
	content: "";
	position: relative;
	flex: none;
	width: 0.95rem;
	height: 0.95rem;
	background:
		linear-gradient( var(--navy), var(--navy) ) center / 100% 2.5px no-repeat,
		linear-gradient( var(--navy), var(--navy) ) center / 2.5px 100% no-repeat;
}

.faq-item[open] .faq-q::after {
	background: linear-gradient( var(--navy), var(--navy) ) center / 100% 2.5px no-repeat;
}

.faq-a {
	margin: 0;
	padding-block: 0 0.95rem;
	font-size: 1rem;
	line-height: 1.85;
	color: var(--lead);
}

@media (min-width: 700px) {
	.worry-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================
 * 広い画面
 *
 * スマホ利用が8割でも、PCで見たときに幅が余って寂しく見えないようにする。
 * 読み物とフォームは狭いまま（1行が長すぎると目が戻れない）、
 * 面で見せる場所だけ広げる。
 * ========================================================= */

@media (min-width: 900px) {
	.wrap { padding-inline: 1.5rem; }

	/* ヒーローは文章と表示例を横に並べる。縦に積むと右半分が空く */
	.hero-inner {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		gap: 2.5rem;
		padding-block: 3.5rem 3.75rem;
	}

	.hero { padding-block: 0; }

	.hero-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem 1.5rem;
		max-width: none;
		margin-block: 1.4rem 0;
	}

	.hero-badges li { flex-direction: row; }

	.hero-preview { margin: 0; }

	.section { padding-block: 3.5rem; }

	.section-title { gap: 1.1rem; margin-bottom: 1.5rem; }

	.section-title::before,
	.section-title::after { width: 7px; height: 7px; }

	/* カテゴリは3列。7枚がきれいに収まり、縦に伸びすぎない */
	.card-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }

	/* 段階の見出しは横に置いて、面を使い切る */
	.phase { display: grid; grid-template-columns: 15rem 1fr; gap: 0 2rem; }
	.phase-title { grid-column: 1; margin-top: 0.2rem; }
	.phase-lead  { grid-column: 1; }
	.phase .card-grid { grid-column: 2; grid-template-columns: repeat(2, 1fr); }

	/* よくある質問は行が長くなりすぎないよう中央に寄せる */
	.faq-list { max-width: 46em; margin-inline: auto; }

	.footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; }
	.footer-brand { grid-column: auto; }

	/* PCではハンバーガーを畳み、ヘッダーに導線を出す */
	.nav-toggle { display: none; }
	.site-nav { display: none; }

	.header-links {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-left: auto;
		padding: 0;
		list-style: none;
	}

	/* 道具2つのボタン。主軸の期限チェックを塗り、診断を線にして区別する */
	.header-btn {
		display: inline-flex;
		align-items: center;
		min-height: 2.9rem;
		padding: 0 1.4rem;
		border: 2px solid var(--navy);
		border-radius: var(--radius-pill);
		background: var(--navy);
		color: #fff;
		font-size: 1rem;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}
	.header-btn-ghost {
		background: #fff;
		color: var(--navy);
	}

	/* 画面下に貼り付くCTAはスマホ用。PCではヘッダーの導線が常に見えている */
	.sticky-cta { display: none; }

	body:has(.sticky-cta) .footer-bottom { padding-bottom: 2rem; }
}

@media (max-width: 899px) {
	.header-links { display: none; }
}


/* =========================================================
 * トップの各節を丸い面にする
 *
 * ページ側を薄い色地にし、節ごとに白い面を置く。節の切れ目が
 * はっきりし、色の付いたカードもその上でよく立つ。
 * ヒーローは自前の背景があるので触らない。
 * ========================================================= */

.home .site-main {
	background: var(--bg-soft);
}

.home .section {
	padding-block: 0.6rem;
}

.home .section > .wrap {
	padding: 1.5rem 1.1rem 1.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
	box-shadow: var(--shadow-sm);
}

.home .section:first-of-type {
	padding-top: 1.25rem;
}

.home .section:last-of-type {
	padding-bottom: 1.5rem;
}

@media (min-width: 900px) {
	.home .section {
		padding-block: 0.9rem;
	}

	.home .section > .wrap {
		padding: 2.5rem 2.5rem 2.75rem;
	}

	.home .section:first-of-type { padding-top: 2rem; }
	.home .section:last-of-type  { padding-bottom: 2.5rem; }
}

/* 金額の入力。数字と単位を横に並べる */
.tool-money {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tool-money .tool-input-num {
	flex: 0 1 10rem;
	min-width: 0;
	max-width: 10rem;
}

.tool-unit {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--muted);
}

/* 相続分の一覧。誰が・どれだけ・いくらを行で揃える */
.share-list {
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.share-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: baseline;
	gap: 0.15rem 0.8rem;
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--line);
}

.share-who {
	font-size: 1.0625rem;
	font-weight: 700;
}

.share-frac {
	grid-row: 1;
	grid-column: 2;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--navy);
	white-space: nowrap;
}

.share-money {
	grid-column: 1 / -1;
	font-size: 1rem;
	color: var(--muted);
	text-align: right;
}

/* 診断の中の小見出し（家族構成のまとまり） */
.tool-section {
	margin-block: 1.75rem 0.9rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--navy-light);
	font-size: 1.125rem;
	font-weight: 700;
}

/* いつまでに何をするか */
.step-list {
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: 0.15rem 0.8rem;
	padding: 0.7rem 0 0.7rem 2.2rem;
	position: relative;
	border-bottom: 1px solid var(--line);
	counter-increment: step;
}

.step-row::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0.75rem;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--navy-light);
	color: var(--navy);
	font-size: 0.875rem;
	font-weight: 700;
}

.step-row[data-state="near"]::before { background: var(--alert-bg); color: var(--alert); }
.step-row[data-state="past"]::before { background: #eceff2; color: #8b949c; }

.step-row-name {
	font-size: 1.0625rem;
	font-weight: 700;
}

.step-row-date {
	grid-column: 1;
	font-size: 1rem;
	color: var(--muted);
}

.step-row-left {
	grid-row: 1;
	grid-column: 2;
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy);
	white-space: nowrap;
}

.step-row[data-state="near"] .step-row-left { color: var(--alert); }
.step-row[data-state="past"] .step-row-left { color: #8b949c; }

/* いまできること */
.plan-list {
	margin: 0.5rem 0 0;
	padding-left: 1.3rem;
}

.plan-list li {
	margin-bottom: 0.7rem;
	font-size: 1.0625rem;
	line-height: 1.8;
}

/* =========================================================
 * 遺産分割協議書に書くこと
 * ========================================================= */

.ky-sec {
	margin-block: 1.75rem 0;
	padding: 1.1rem 1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
}

.ky-sec-title {
	font-size: 1.1875rem;
	margin-block: 0 0.4rem;
	padding-left: 0.6rem;
	border-left: 4px solid var(--navy);
}

.ky-ref {
	margin-block: 0 0.9rem;
	font-size: 0.9375rem;
}

.ky-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ky-item {
	padding-block: 0.75rem;
	border-top: 1px solid var(--line);
}

.ky-item:first-child { border-top: none; }

/* チェックは的を大きく。行全体を押せるようにする */
.ky-check {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	min-height: 2.75rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
}

.ky-check input {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.15rem;
}

.ky-note {
	margin-block: 0.35rem 0;
	padding-left: 2.05rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--muted);
}

.ky-memo {
	width: calc( 100% - 2.05rem );
	margin: 0.5rem 0 0 2.05rem;
	padding: 0.5rem 0.6rem;
	border: 1px solid #c3ccd4;
	border-radius: 6px;
	background: var(--bg);
	font-size: 1rem;
	font-family: inherit;
}

/* 結果 */
.ky-res-sec {
	margin-block: 0.9rem 0;
}

.ky-res-title {
	font-size: 1rem;
	margin-block: 0 0.3rem;
	color: var(--muted);
}

.ky-res-sec ul {
	margin: 0;
	padding-left: 1.3rem;
}

.ky-res-sec li {
	margin-bottom: 0.3rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.ky-res-memo {
	display: block;
	font-size: 0.9375rem;
	color: var(--muted);
}

.ky-mail-row {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.ky-mail-row .sf-input { flex: 1; min-width: 0; }

.ky-mail-btn {
	flex: none;
	padding: 0 1.3rem;
	border: none;
	border-radius: var(--radius);
	background: var(--navy);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

.ky-mail-btn:disabled { background: #9aa3ab; cursor: default; }

.ky-mail-msg {
	margin-block: 0.6rem 0;
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* =========================================================
 * ボタン
 *
 * これまで場所ごとに書いていたが、カテゴリ下部で3種類を並べるので
 * 共通の形にする。スマホは横いっぱい、広い画面では中身に合わせる。
 * ========================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 3.1rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btn-lg {
	min-height: 3.6rem;
	padding: 0.9rem 1.4rem;
	font-size: 1.1875rem;
}

.btn-light {
	background: #fff;
	color: var(--navy-dark);
	box-shadow: var(--shadow-sm);
}

.btn-ghost {
	background: var(--bg);
	border-color: var(--navy);
	color: var(--navy-dark);
}

/* =========================================================
 * カテゴリ下部の導線
 * ========================================================= */

.archive-cta {
	margin-top: 2rem;
	padding: 1.5rem 1.1rem 1.6rem;
	border-radius: var(--radius-lg);
	background: linear-gradient( 160deg, var(--navy-dark), #2a6c9c );
	color: #fff;
	text-align: center;
}

.archive-cta-title {
	margin-block: 0 0.6rem;
	font-size: clamp( 1.1875rem, 5vw, 1.5rem );
	font-weight: 800;
	line-height: 1.55;
}

.archive-cta-lead {
	margin-block: 0 1.1rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: rgba( 255, 255, 255, 0.9 );
}

.cta-notes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.2rem;
	margin-block: 0.9rem 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	color: rgba( 255, 255, 255, 0.85 );
}

/* 道具のあるカテゴリでは、道具の結果の下（.result-cta）とページ末（.cat-soudan）の
   両方が無料相談へ向かう。結果が出ているあいだはページ末を下げ、押す場所を1つに
   保つ。結果を出さずに読み終えた人には .cat-soudan が唯一の出口として残る。 */
.cat-tool:has( #result-cta:not( [hidden] ) ) ~ .cat-soudan {
	display: none;
}

.cat-soudan {
	margin-top: 1.75rem;
	padding: 1.4rem 1.1rem 1.5rem;
	border: 1px solid #e6dccd;
	border-radius: var(--radius-lg);
	background: var(--bg-warm);
	text-align: center;
}

.cat-soudan-title {
	margin-block: 0 0.6rem;
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.6;
}

.cat-soudan-lead {
	margin-block: 0 1.1rem;
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--lead);
	text-align: left;
}

@media (min-width: 700px) {
	.archive-cta { padding: 2.2rem 1.8rem 2.4rem; }
	.cat-soudan  { padding: 2rem 1.8rem; }
	.cat-soudan-lead { text-align: center; }

	/* 広い画面でボタンが横いっぱいに伸びると、押す場所が定まらない */
	.archive-cta .btn,
	.cat-soudan .btn {
		width: auto;
		min-width: 22rem;
	}
}

/* 答えの下に置く相談への導線。本文の続きとして読めるよう、
   ボタンにせず文中のリンクの形にする */
.faq-a-link {
	display: inline-block;
	margin-top: 0.2rem;
	font-weight: 700;
	text-underline-offset: 3px;
}

.faq-a-link::after { content: " →"; }

/* トップ最下部の導線。節の白い面の中に置くので、内側で二重の枠にしない */
.home .section > .wrap > .archive-cta {
	margin-top: 0;
	border-radius: var(--radius);
}


/* =========================================================
 * 相続の備えチェック（/sonae/）
 * 結果は番号付きの一覧。チェックは画面内の印で、保存しない。
 * ======================================================= */
.sn-list {
	margin: 0.75rem 0 0;
	padding-left: 0;
	list-style: none;
	counter-reset: sn;
}
.sn-item {
	position: relative;
	padding: 0.9rem 0 0.9rem 0;
	border-top: 1px solid var(--line);
}
.sn-item:first-child { border-top: 0; }
.sn-check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.55;
	cursor: pointer;
}
.sn-check input {
	flex: 0 0 auto;
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.15rem;
	accent-color: var(--navy);
}
.sn-item:has(input:checked) .sn-check span {
	color: var(--muted);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.sn-why {
	margin: 0.4rem 0 0 1.9rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--ink-2);
}
.sn-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	margin: 0.45rem 0 0 1.9rem;
	font-size: 0.875rem;
}
.sn-link {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}


/* =========================================================
 * カテゴリを道具の言葉で見せる（トップのカード・カテゴリの見出し面）
 * ======================================================= */
/* 道具の名前そのものを濃紺の札にする。「道具」の文字札は置かない */
.card-tool {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.5;
}
.page-head-tool {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	font-size: 1rem;
}
.page-head-tool-name {
	display: inline-block;
	padding: 0.3rem 1rem;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}
.page-head-lead-tool {
	margin-top: 0.5rem;
	font-weight: 600;
	color: var(--ink);
}
.page-head-intro {
	font-size: 0.9375rem;
	color: var(--ink-2);
}

/* --- 情報の根拠（/references/） ------------------------------------------
 * 離婚版と同じ構成（方針の札 → 資料の札 → 問い合わせ）。色は本サイトの濃紺。
 * 文字の大きさは本サイトの下限（本文17px・補足15px・ラベル14px）を守る。 */
.refs .page-head-intro { margin-top: 0.6rem; }

.refs-h2 {
	font-size: clamp( 1.125rem, 4.8vw, 1.375rem );
	font-weight: 800;
	line-height: 1.5;
	padding-left: 0.75rem;
	border-left: 4px solid var(--navy);
	margin: 0;
}

.refs-policy { margin-top: 1.75rem; }
.refs-policy-list { display: grid; gap: 0.75rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.refs-policy-item {
	display: flex;
	gap: 0.75rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem 0.95rem;
	box-shadow: var(--shadow-sm);
}
.refs-policy-icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	border-radius: 50%;
	background: var(--navy-light);
	color: var(--navy);
}
.refs-policy-icon svg { width: 1.375rem; height: 1.375rem; }
.refs-policy-item h3 { font-size: var(--fs-body); font-weight: 700; line-height: 1.6; margin: 0 0 0.25rem; }
.refs-policy-item p { font-size: var(--fs-body); color: var(--ink-2); line-height: 1.8; margin: 0; }

.refs-sources { margin-top: 2rem; }
.refs-sources-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.refs-count {
	font-size: var(--fs-label);
	font-weight: 700;
	color: var(--navy);
	background: var(--navy-light);
	border-radius: var(--radius-pill);
	padding: 0.25rem 0.75rem;
	margin: 0;
	white-space: nowrap;
}
.refs-group { margin-top: 1.25rem; }
.refs-group-title {
	display: inline-flex;
	align-items: center;
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ink-2);
	margin: 0 0 0.6rem;
}
.refs-cards { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.refs-card {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.95rem 1rem;
	box-shadow: var(--shadow-sm);
}
.refs-card-name { font-size: var(--fs-body); font-weight: 700; line-height: 1.65; margin: 0; }
.refs-card-name a { color: var(--navy); text-decoration: none; }
.refs-card-name a:hover { text-decoration: underline; }
.refs-ext {
	position: relative;
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-left: 5px;
	vertical-align: -1px;
	border: 1.5px solid currentColor;
	border-radius: 2px;
}
.refs-ext::after {
	content: "";
	position: absolute;
	right: -3px;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	background: var(--bg);
}
.refs-card-publisher { font-size: var(--fs-sub); color: var(--ink-3); margin: 0; }
.refs-card-desc { font-size: var(--fs-sub); color: var(--ink-2); line-height: 1.75; margin: 0.15rem 0 0; }
.refs-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	margin: 0.35rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px dashed var(--line);
}
.refs-checked { font-size: var(--fs-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.refs-checked.is-empty { color: #a8843e; }
.refs-usage { font-size: var(--fs-label); font-weight: 700; color: var(--navy); }
.refs-empty {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.5rem 1.1rem;
	margin-top: 0.9rem;
	text-align: center;
	color: var(--ink-2);
}

.refs-contact {
	margin-top: 2rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.1rem;
	box-shadow: var(--shadow-sm);
}
.refs-contact p { font-size: var(--fs-body); color: var(--ink-2); line-height: 1.85; margin: 0.6rem 0 0; }
.refs-contact-link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 0.75rem;
	padding: 0.6rem 1.4rem;
	background: var(--navy-light);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}
.refs-contact-link:hover { background: #dce6ef; }

@media (min-width: 700px) {
	.refs-cards { grid-template-columns: repeat(2, 1fr); }
	.refs-policy-list { gap: 0.9rem; }
	.refs-contact { padding: 1.8rem 1.75rem; }
}

/* --- 法改正と制度の更新（/kaisei/、トップ、根拠ページ） -------------------
 * 離婚版と同じ構成。色は濃紺。施行前は「まだ変わっていない」を読み違えると
 * 実害が出るので、暖色（生成り）で分ける。赤は期限にしか使わない。 */
.kaisei-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0 0 0.5rem; }
.kaisei-cat, .kaisei-state, .kaisei-law {
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.03em;
	border-radius: var(--radius-pill);
	padding: 0.15rem 0.65rem;
	white-space: nowrap;
	line-height: 1.6;
}
.kaisei-cat { color: var(--navy); background: var(--navy-light); border: 1px solid #d3deea; }
.kaisei-law { color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); }
.kaisei-state.is-upcoming { color: #8a6224; background: var(--bg-warm); border: 1px solid #ead9be; }
.kaisei-state.is-in-force { color: #fff; background: var(--navy); border: 1px solid var(--navy); }

.kaisei-dates { display: grid; gap: 0.6rem; margin: 1rem 0 0; padding: 0; }
.kaisei-date {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.75rem 0.95rem;
}
.kaisei-date.is-main { background: var(--navy-light); border-color: #d3deea; }
.kaisei-date dt { flex: none; font-size: var(--fs-label); font-weight: 700; color: var(--ink-3); }
.kaisei-date.is-main dt { color: var(--navy); }
.kaisei-date dd { margin: 0; font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.kaisei-date.is-main dd { font-size: 1.1875rem; color: var(--navy-dark); }
.kaisei-notice {
	margin-top: 0.75rem;
	font-size: var(--fs-sub);
	line-height: 1.8;
	color: #7a5620;
	background: var(--bg-warm);
	border: 1px solid #ead9be;
	border-radius: var(--radius);
	padding: 0.8rem 0.95rem;
}
.kaisei-affected-lead { font-size: var(--fs-sub); color: var(--ink-2); margin: -0.25rem 0 0.75rem; }
.kaisei-back { margin-top: 1.1rem; }
.kaisei-back .cat-more { margin-top: 0; }

.kaisei-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; }
.kaisei-item {
	background: var(--bg);
	border: 1px solid var(--line);
	border-left: 4px solid var(--navy);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 1rem 1.05rem;
}
.kaisei-item-title { font-size: 1.125rem; font-weight: 800; line-height: 1.55; margin: 0; }
.kaisei-item-title a { color: var(--ink); text-decoration: none; }
.kaisei-item-title a:hover { color: var(--navy); text-decoration: underline; }
.kaisei-item-excerpt { margin: 0.45rem 0 0; font-size: var(--fs-sub); line-height: 1.8; color: var(--ink-2); }
.kaisei-item-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.9rem;
	margin: 0.7rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px dashed var(--line);
	font-size: var(--fs-label);
	color: var(--ink-3);
}
.kaisei-enforced { font-weight: 700; color: var(--navy); }

.kaisei-home { background: var(--bg); }
.kaisei-home-list { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.6rem; }
.kaisei-home-item {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-left: 4px solid var(--navy);
	border-radius: var(--radius);
	padding: 0.9rem 0.95rem;
}
.kaisei-home-title { font-size: var(--fs-body); font-weight: 800; line-height: 1.55; margin: 0; }
.kaisei-home-title a { color: var(--ink); text-decoration: none; }
.kaisei-home-title a:hover { color: var(--navy); text-decoration: underline; }
.kaisei-home-when { margin: 0.35rem 0 0; font-size: var(--fs-label); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.refs-policy-link { margin: 0.5rem 0 0; }
.refs-policy-link a { font-size: var(--fs-sub); font-weight: 700; color: var(--navy); text-decoration: none; }
.refs-policy-link a::after { content: " →"; }
.refs-policy-link a:hover { text-decoration: underline; }

@media (min-width: 700px) {
	.kaisei-dates { grid-template-columns: repeat(2, 1fr); }
	.kaisei-home-list { grid-template-columns: repeat(3, 1fr); }
}

/* --- 協議書ページの冒頭：最初の動作を矢印で指す（2026-10-03） ---------- */
.ky-start {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 1rem 0 0;
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--navy);
}
.ky-start svg { width: 1.25rem; height: 1.25rem; flex: none; }