/* ===========================================================
 * Yokohama Law Child — 下層固定ページ共通スタイル
 * 専用テンプレ（page-fee.php / page-tokuyaku.php 等）の表示時のみ
 * functions.php から enqueue する。
 *
 * デザイン正本：docs/mockups/top-rinka-seisho.html（案5「凛華」清書）
 *   front-page.css で確立した凛華トークン・見出し・ボタンの意匠を
 *   下層ページへ水平展開したもの。値は front-page.css と同一に保つこと。
 *
 * 【スコープ方針】
 *   トークンは `.yl-page`（下層テンプレの main 要素）に閉じて定義する。
 *   overrides.css の暫定ネイビー系トークンには触れないため、
 *   Lightning 標準 page.php で表示するページの見た目は変わらない。
 * =========================================================== */

/* -----------------------------------------------------------
 * 0. デザイントークン（front-page.css と同値）
 * --------------------------------------------------------- */
.yl-page {
	--rk-primary: #c2a05e;      /* 金。罫・枠など非テキスト用 */
	--rk-primary-soft: #d9be86; /* 金・淡。濃い面の上の罫線専用 */
	--rk-primary-btn: #8a6a2b;       /* 金ボタン面（白文字 5.03:1） */
	--rk-primary-btn-hover: #755920; /* 同 hover（6.55:1） */
	--rk-deep: #0c4f7c;         /* 濃紺（見出し・CTA面） */
	--rk-deep2: #1a6fa3;        /* 中間の青 */
	--rk-aqua: #45b1c7;         /* 旧サイト継承のメインカラー（罫・下線） */
	--rk-aqua-pale: #eef6f9;    /* 水色の面（淡） */
	--rk-ink: #483933;          /* 本文 */
	--rk-muted: #6f645e;        /* 補足テキスト（全背景で 4.5:1 以上） */
	--rk-cream: #f8f6f2;        /* 面（クリーム） */
	--rk-cream2: #eae6df;       /* 罫線 */
	--rk-paper: #f9f9f9;        /* 面（ごく淡いグレー） */
	--rk-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--rk-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

	--rk-space-section: clamp(3rem, 7vw, 5rem);
	--rk-space-inline: clamp(1.375rem, 4vw, 3rem);

	font-family: var(--rk-sans);
	color: var(--rk-ink);
	line-height: 1.85;
	letter-spacing: 0.02em;
	background: #fff;
}

.yl-page h1,
.yl-page h2,
.yl-page h3 {
	font-family: var(--rk-serif);
	font-weight: 500;
	color: var(--rk-ink);
	line-height: 1.55;
}

.yl-page a {
	color: inherit;
	text-decoration: none;
}

/* -----------------------------------------------------------
 * 1. ページヘッダー（下層用の帯。TOPのFVより低く、静かな水色の面）
 * --------------------------------------------------------- */
.yl-page .yl-pg-hero {
	background:
		linear-gradient(105deg, rgba(8, 40, 70, 0.06) 0%, rgba(69, 177, 199, 0.12) 100%),
		var(--rk-aqua-pale);
	border-bottom: 1px solid var(--rk-cream2);
	padding: clamp(2.5rem, 6vw, 4rem) var(--rk-space-inline);
	text-align: center;
}

.yl-page .yl-pg-hero__title {
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	letter-spacing: 0.12em;
	margin: 0;
}

/* 見出し下の水色の短い罫（front-page.css の sec-head と同じ意匠） */
.yl-page .yl-pg-hero__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--rk-aqua);
	margin: 1.25rem auto 0;
}

.yl-page .yl-pg-hero__lead {
	max-width: 720px;
	margin: 1.5rem auto 0;
	font-size: 0.9375rem;
	color: var(--rk-muted);
	text-align: left;
}

/* -----------------------------------------------------------
 * 2. セクション共通
 * --------------------------------------------------------- */
.yl-page .yl-pg-section {
	padding: var(--rk-space-section) var(--rk-space-inline);
	background: #fff;
}

.yl-page .yl-pg-section--soft {
	background: var(--rk-cream);
}

.yl-page .yl-pg-section--aqua {
	background: var(--rk-aqua-pale);
}

.yl-page .yl-pg-section__inner {
	max-width: 840px;
	margin-inline: auto;
}

.yl-page .yl-pg-section__title {
	text-align: center;
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	letter-spacing: 0.12em;
	margin: 0 0 1rem;
}

.yl-page .yl-pg-section__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--rk-aqua);
	margin: 1rem auto 0;
}

.yl-page .yl-pg-section__title + * {
	margin-top: 2.25rem;
}

.yl-page .yl-pg-section p {
	margin: 0 0 1.25em;
}
.yl-page .yl-pg-section p:last-child {
	margin-bottom: 0;
}

/* 本文中のテキストリンク（水色の下線で示す） */
.yl-page .yl-pg-section a:not(.yl-btn):not(.yl-pg-linkcard) {
	color: var(--rk-deep2);
	border-bottom: 1px solid var(--rk-aqua);
	padding-bottom: 1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.yl-page .yl-pg-section a:not(.yl-btn):not(.yl-pg-linkcard):hover {
	color: var(--rk-deep);
	border-bottom-color: var(--rk-primary);
}

/* 本文中の小見出し（セクション内をさらに区切る h3） */
.yl-page .yl-pg-section h3 {
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
	margin: 2.25rem 0 0.875rem;
	padding-left: 0.75rem;
	border-left: 2px solid var(--rk-aqua);
}
.yl-page .yl-pg-section h3:first-child {
	margin-top: 0;
}

/* 本文中の箇条書き（カード類には効かないよう、素の ul/ol のみを対象にする） */
.yl-page .yl-pg-section > .yl-pg-section__inner ul:not([class]),
.yl-page .yl-pg-section > .yl-pg-section__inner ol:not([class]) {
	margin: 0 0 1.25em;
	padding-left: 1.5em;
}

.yl-page .yl-pg-section > .yl-pg-section__inner ul:not([class]) > li,
.yl-page .yl-pg-section > .yl-pg-section__inner ol:not([class]) > li {
	margin-bottom: 0.5em;
}

/* 補足注記（★仮置き値などの但し書き） */
.yl-page .yl-pg-note {
	font-size: 0.8125rem;
	color: var(--rk-muted);
}

/* 関連ページへの誘導文（本文中の引用風の一言。水色の縦罫で本文と区別する） */
.yl-page .yl-pg-callout {
	border-left: 3px solid var(--rk-aqua);
	background: var(--rk-aqua-pale);
	padding: 1rem 1.25rem;
	font-size: 0.9375rem;
	margin: 1.75rem 0 0;
}

/* 淡い水色の面の上では、面の色が沈むので白地に切り替える */
.yl-page .yl-pg-section--aqua .yl-pg-callout {
	background: #fff;
}

/* -----------------------------------------------------------
 * 3. カード（数字つきの縦並びカード。TOPの強み3点の意匠を踏襲）
 * --------------------------------------------------------- */
.yl-page .yl-pg-cards {
	display: grid;
	gap: 1.25rem;
	/* min() を挟むのは、狭い画面で最小幅がコンテナ幅を超えて
	 * 横スクロールが発生するのを防ぐため（以下のグリッドも同様） */
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.yl-page .yl-pg-card {
	background: #fff;
	border: 1px solid var(--rk-cream2);
	border-top: 2px solid var(--rk-primary);
	padding: 1.75rem 1.5rem;
}

.yl-page .yl-pg-card__num {
	display: block;
	font-family: var(--rk-serif);
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	color: var(--rk-primary-btn);
	margin-bottom: 0.75rem;
}

.yl-page .yl-pg-card__title {
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem;
}

.yl-page .yl-pg-card__body {
	font-size: 0.9375rem;
	margin: 0;
}

/* -----------------------------------------------------------
 * 4. 表（特約の内容など）
 * --------------------------------------------------------- */
.yl-page .yl-pg-table {
	width: 100%;
	/* 3列で長文を含む表（/death/ の損害項目・/disability/ の申請方法比較）は
	 * 狭い画面で各セルが潰れて読めなくなる。最小幅を確保し、
	 * はみ出した分は .yl-pg-table-wrap の横スクロールに逃がす。 */
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.yl-page .yl-pg-table th,
.yl-page .yl-pg-table td {
	border: 1px solid var(--rk-cream2);
	padding: 0.875em 1em;
	text-align: left;
	vertical-align: top;
}

.yl-page .yl-pg-table th {
	background: var(--rk-cream);
	font-family: var(--rk-serif);
	font-weight: 500;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* 表がビューポートより広い場合は横スクロールで逃がす */
.yl-page .yl-pg-table-wrap {
	overflow-x: auto;
}

/* -----------------------------------------------------------
 * 5. リンクカード（子ページへの誘導。2枚並び）
 * --------------------------------------------------------- */
.yl-page .yl-pg-linkcards {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.yl-page .yl-pg-linkcard {
	display: block;
	background: #fff;
	border: 1px solid var(--rk-cream2);
	padding: 1.5rem 1.5rem 1.375rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.yl-page .yl-pg-linkcard:hover {
	border-color: var(--rk-aqua);
	box-shadow: 0 2px 10px rgba(12, 79, 124, 0.08);
}

.yl-page .yl-pg-linkcard__title {
	display: block;
	font-family: var(--rk-serif);
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: var(--rk-deep);
	margin-bottom: 0.5rem;
}

.yl-page .yl-pg-linkcard__title::after {
	content: " →";
	color: var(--rk-aqua);
}

.yl-page .yl-pg-linkcard__desc {
	display: block;
	font-size: 0.875rem;
	color: var(--rk-muted);
}

/* -----------------------------------------------------------
 * 6. 手順リスト（利用の流れなどの番号つきステップ）
 * --------------------------------------------------------- */
.yl-page .yl-pg-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: yl-step;
}

.yl-page .yl-pg-steps > li {
	counter-increment: yl-step;
	position: relative;
	padding: 0 0 1.5rem 3.25rem;
}

/* 番号（明朝の小さな丸番号） */
.yl-page .yl-pg-steps > li::before {
	content: counter(yl-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-family: var(--rk-serif);
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	color: var(--rk-primary-btn);
	border-bottom: 1px solid var(--rk-aqua);
	padding-bottom: 2px;
}

/* ステップ間の縦罫 */
.yl-page .yl-pg-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0.9em;
	top: 2.2em;
	bottom: 0.4em;
	width: 1px;
	background: var(--rk-cream2);
}

/* -----------------------------------------------------------
 * 6-1. 全体像（/flow/ の2段階。段階ごとのステップを矢印でつなぐ）
 * --------------------------------------------------------- */
.yl-page .yl-pg-overview {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.yl-page .yl-pg-overview__stage {
	background: #fff;
	border: 1px solid var(--rk-cream2);
	border-top: 2px solid var(--rk-aqua);
	padding: 1.75rem 1.5rem;
}

.yl-page .yl-pg-overview__label {
	display: inline-block;
	font-family: var(--rk-serif);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: #fff;
	background: var(--rk-deep);
	padding: 0.25em 1em;
	margin-bottom: 0.875rem;
}

/* セクション共通の h3 装飾（左の水色罫）はここでは使わない。
 * 共通ルール `.yl-page .yl-pg-section h3` は要素セレクタの分だけ詳細度が高いため、
 * 打ち消すには同じく要素を含めたセレクタを併記する必要がある。 */
.yl-page .yl-pg-overview__title,
.yl-page .yl-pg-section h3.yl-pg-overview__title {
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	margin: 0 0 1.25rem;
	padding-left: 0;
	border-left: 0;
}

.yl-page .yl-pg-overview__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
}

.yl-page .yl-pg-overview__steps > li {
	position: relative;
	padding-left: 1.25rem;
	margin-bottom: 0.625rem;
}

/* 各ステップの先頭に小さな金の点を置く */
.yl-page .yl-pg-overview__steps > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rk-primary);
}

/* ステップ間を縦の矢印（罫）でつなぐ */
.yl-page .yl-pg-overview__steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 2.5px;
	top: 1.5em;
	height: calc(100% - 0.75em);
	width: 1px;
	background: var(--rk-cream2);
}

/* -----------------------------------------------------------
 * 6-2. チェックリスト（「こんな段階でも相談できます」等の該当確認リスト）
 *    箇条書きより「自分が当てはまるか」を確かめやすい見せ方にする。
 * --------------------------------------------------------- */
.yl-page .yl-pg-checks {
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0;
}

.yl-page .yl-pg-checks > li {
	position: relative;
	padding: 0.75em 0 0.75em 2rem;
	border-bottom: 1px solid var(--rk-cream2);
}

.yl-page .yl-pg-checks > li:first-child {
	border-top: 1px solid var(--rk-cream2);
}

/* 先頭のチェック記号は装飾のため、読み上げ対象にならない ::before で描く */
.yl-page .yl-pg-checks > li::before {
	content: "";
	position: absolute;
	left: 0.35rem;
	top: 1.3em;
	width: 0.5rem;
	height: 0.9rem;
	border-right: 2px solid var(--rk-aqua);
	border-bottom: 2px solid var(--rk-aqua);
	transform: rotate(45deg);
}

/* -----------------------------------------------------------
 * 6-3. 弁護士プロフィールの見出しブロック（/lawyer/）
 * --------------------------------------------------------- */
.yl-page .yl-pg-profile {
	text-align: center;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--rk-cream2);
	margin-bottom: 2.5rem;
}

/* セクション共通 h3 の左罫は使わない。
 * 見出しレベルが h3 に変わっても効くよう、要素を含めたセレクタも併記する
 * （共通ルールのほうが詳細度が高いため。上の overview__title と同じ理由）。 */
.yl-page .yl-pg-profile__name,
.yl-page .yl-pg-section h3.yl-pg-profile__name {
	font-size: clamp(1.375rem, 2.8vw, 1.75rem);
	letter-spacing: 0.14em;
	margin: 0;
	padding-left: 0;
	border-left: 0;
}

.yl-page .yl-pg-profile__reading {
	display: block;
	font-family: var(--rk-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--rk-muted);
	margin-top: 0.625rem;
}

.yl-page .yl-pg-profile__affiliation {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--rk-muted);
}

/* -----------------------------------------------------------
 * 6-4. 地図（/access/）
 *    現状は埋め込みではなく、外部地図へ誘導する枠。
 *    埋め込みに切り替える判断は PHP 側のコメント参照。
 * --------------------------------------------------------- */
.yl-page .yl-pg-map {
	border: 1px solid var(--rk-cream2);
	background: var(--rk-paper);
	padding: 1.75rem 1.5rem;
	text-align: center;
}

.yl-page .yl-pg-map__address {
	font-family: var(--rk-serif);
	font-size: 1rem;
	margin: 0 0 1.25rem;
}

/* 埋め込みに切り替えた場合の受け皿（16:9 で高さを確保する） */
.yl-page .yl-pg-map__embed {
	position: relative;
	padding-top: 56.25%;
	margin-top: 1.5rem;
}
.yl-page .yl-pg-map__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -----------------------------------------------------------
 * 6-5. 電話番号ボックス（/contact/ で電話導線を大きく出す）
 * --------------------------------------------------------- */
.yl-page .yl-pg-telbox {
	border: 1px solid var(--rk-primary);
	background: #fff;
	padding: 1.75rem 1.5rem;
	text-align: center;
}

.yl-page .yl-pg-telbox__label {
	display: block;
	font-family: var(--rk-serif);
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	color: var(--rk-muted);
	margin-bottom: 0.75rem;
}

.yl-page .yl-pg-telbox__num {
	display: inline-block;
	font-family: var(--rk-serif);
	font-size: clamp(1.625rem, 5vw, 2.25rem);
	letter-spacing: 0.06em;
	color: var(--rk-deep);
}

/* 大きな数字に下線が入ると読みにくいため、本文リンク共通ルールの水色下線を打ち消す。
 * 共通ルールは `a:not(.yl-btn):not(.yl-pg-linkcard)` で :not() の中身も詳細度に数えるため、
 * 打ち消す側も同じ数のクラスを持たせる必要がある（通常時 0,4,1／hover 時 0,5,1）。
 * そのうえで共通ルールより後ろに置くことで後勝ちさせる。!important は使わない。 */
.yl-page .yl-pg-section a.yl-pg-telbox__num:not(.yl-btn),
.yl-page .yl-pg-section a.yl-pg-telbox__num:not(.yl-btn):hover {
	color: var(--rk-deep);
	border-bottom: 0;
	padding-bottom: 0;
}

.yl-page .yl-pg-telbox__hours {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--rk-muted);
}

/* -----------------------------------------------------------
 * 6-6. 編集者向けの設定待ち通知（フォーム未設定時など）
 *    ログイン中の編集権限者にのみ表示する（PHP側で出し分け）。
 * --------------------------------------------------------- */
.yl-page .yl-pg-adminnote {
	border: 1px dashed var(--rk-primary-btn);
	background: #fffdf7;
	color: var(--rk-ink);
	padding: 1.25rem 1.5rem;
	font-size: 0.875rem;
}

/* -----------------------------------------------------------
 * 7. CTA（クロージング帯。TOPの .yl-fp-cta と同じ濃紺の面）
 * --------------------------------------------------------- */
.yl-page .yl-pg-cta {
	background:
		linear-gradient(105deg, rgba(8, 40, 70, 0.92) 0%, rgba(12, 79, 124, 0.88) 60%, rgba(26, 111, 163, 0.85) 100%),
		var(--rk-deep);
	color: #fff;
	text-align: center;
	padding: var(--rk-space-section) var(--rk-space-inline);
}

.yl-page .yl-pg-cta__title {
	color: #fff;
	font-size: clamp(1.25rem, 2.6vw, 1.5rem);
	letter-spacing: 0.12em;
	margin: 0 0 0.75rem;
}

.yl-page .yl-pg-cta__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--rk-primary-soft);
	margin: 1rem auto 0;
}

.yl-page .yl-pg-cta__lead {
	margin: 1.25rem 0 1.75rem;
	font-size: 0.9375rem;
}

.yl-page .yl-pg-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.875rem;
}

.yl-page .yl-pg-cta__hours {
	margin: 1.5rem 0 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.85);
}

/* -----------------------------------------------------------
 * 8. ボタン共通（front-page.css の .yl-btn と同意匠）
 * --------------------------------------------------------- */
.yl-page .yl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 2em;
	border-radius: 2px;
	font-family: var(--rk-serif);
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.yl-page .yl-btn--primary {
	background: var(--rk-primary-btn);
	color: #fff;
	border: 1px solid var(--rk-primary);
}
.yl-page .yl-btn--primary:hover {
	background: var(--rk-primary-btn-hover);
	border-color: var(--rk-primary-soft);
	color: #fff;
}

.yl-page .yl-btn--tel {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.85);
}
.yl-page .yl-btn--tel:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* -----------------------------------------------------------
 * 9. キーボード操作時のフォーカス表示（front-page.css と同方針）
 * --------------------------------------------------------- */
.yl-page a:focus-visible,
.yl-page .yl-btn:focus-visible {
	outline: 2px solid var(--rk-deep);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(69, 177, 199, 0.45);
	border-radius: 2px;
}

/* 濃紺のCTA面の上では白系の二重線に切り替える */
.yl-page .yl-pg-cta a:focus-visible,
.yl-page .yl-pg-cta .yl-btn:focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 4px var(--rk-deep);
}

/* -----------------------------------------------------------
 * 10. モバイル調整
 * --------------------------------------------------------- */
@media (max-width: 640px) {
	.yl-page .yl-pg-cta__buttons .yl-btn {
		width: 100%;
	}
}

/* -----------------------------------------------------------
 * 11. お問い合わせフォーム（Contact Form 7）
 *    フォーム定義は wp-cf7/install-consultation-form.php が生成する。
 *    CF7 が出す既定マークアップに、凛華トークンで最小限の化粧を当てる方針。
 *    プラグイン側のクラス名（.wpcf7-*）は変更に追随しにくいため、
 *    レイアウトは自前クラス（.yl-form__*）側で組み立てている。
 * --------------------------------------------------------- */
.yl-page .yl-pg-formwrap {
	margin-top: 1.75rem;
	background: var(--rk-cream);
	border: 1px solid var(--rk-cream2);
	border-top: 3px solid var(--rk-primary);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.yl-page .yl-form__row {
	margin: 0 0 1.5rem;
}

.yl-page .yl-form__label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

/* 必須・任意のバッジ。色だけに頼らず文字でも示す（アクセシビリティ） */
.yl-page .yl-form__req,
.yl-page .yl-form__opt {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.3em 0.6em;
	border-radius: 2px;
}

.yl-page .yl-form__req {
	background: #a4342b; /* 白文字で 5.4:1 */
	color: #fff;
}

.yl-page .yl-form__opt {
	background: var(--rk-cream2);
	color: var(--rk-muted);
}

.yl-page .yl-form__help {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	color: var(--rk-muted);
}

/* 入力欄。iOS で拡大されないよう 16px を下回らせない */
.yl-page .yl-pg-formwrap input[type="text"],
.yl-page .yl-pg-formwrap input[type="tel"],
.yl-page .yl-pg-formwrap input[type="email"],
.yl-page .yl-pg-formwrap textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--rk-ink);
	background: #fff;
	border: 1px solid #b9b1a8;
	border-radius: 2px;
	padding: 0.75rem 0.875rem;
}

.yl-page .yl-pg-formwrap input::placeholder,
.yl-page .yl-pg-formwrap textarea::placeholder {
	color: #8d857e;
}

.yl-page .yl-pg-formwrap input[type="text"]:focus,
.yl-page .yl-pg-formwrap input[type="tel"]:focus,
.yl-page .yl-pg-formwrap input[type="email"]:focus,
.yl-page .yl-pg-formwrap textarea:focus {
	outline: 2px solid var(--rk-aqua);
	outline-offset: 1px;
	border-color: var(--rk-aqua);
}

/* ラジオ（ご希望の連絡方法）は横並び、狭い画面では折り返す */
.yl-page .yl-pg-formwrap .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

.yl-page .yl-pg-formwrap .wpcf7-list-item {
	margin: 0;
}

.yl-page .yl-pg-formwrap .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

/* 個人情報の同意 */
.yl-page .yl-form__consent {
	margin: 0 0 1.75rem;
	padding: 1rem 1.125rem;
	background: #fff;
	border: 1px solid var(--rk-cream2);
	font-size: 0.9375rem;
}

.yl-page .yl-form__submit {
	margin: 0;
	text-align: center;
}

.yl-page .yl-pg-formwrap .yl-btn {
	min-width: min(20rem, 100%);
	cursor: pointer;
	border: 0;
	font-family: inherit;
}

/* 送信中スピナーが行を押し広げないようにする */
.yl-page .yl-pg-formwrap .wpcf7-spinner {
	vertical-align: middle;
}

/* CF7 の検証エラー表示。既定の赤枠は凛華の配色から浮くため上書きする */
.yl-page .yl-pg-formwrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #a4342b;
}

.yl-page .yl-pg-formwrap .wpcf7-not-valid {
	border-color: #a4342b;
}

.yl-page .yl-pg-formwrap .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.875rem 1.125rem;
	border-width: 1px;
	border-style: solid;
	font-size: 0.9375rem;
}

/* -----------------------------------------------------------
 * 12. 法務ページ（/privacy/ ・/disclaimer/）
 *    条文が続く読み物のため、カード等は使わず行間と余白で読ませる。
 *    h2 は他ページと同じ .yl-pg-section__title を流用し、
 *    条文の並びとして詰めたいので上下の余白だけ調整する。
 * --------------------------------------------------------- */
.yl-pg-legal {
	max-width: 46rem;
}

.yl-page .yl-pg-legal .yl-pg-section__title {
	margin-top: 2.5rem;
	font-size: 1.0625rem;
}

/* 冒頭の見出しだけは上余白を殺す（セクションのパディングと二重になるため） */
.yl-page .yl-pg-legal .yl-pg-section__title:first-child {
	margin-top: 0;
}

.yl-page .yl-pg-legal__list {
	margin: 0.75rem 0 0;
	padding-left: 1.5rem;
	list-style: decimal;
}

.yl-page .yl-pg-legal__list li {
	margin-bottom: 0.5rem;
	line-height: 1.9;
}

.yl-page .yl-pg-legal__enacted {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rk-cream2);
	font-size: 0.9375rem;
	color: var(--rk-muted);
}

/* 事務所情報の囲み（お問い合わせ窓口・末尾の署名） */
.yl-page .yl-pg-addressbox {
	margin-top: 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--rk-cream);
	border-left: 3px solid var(--rk-primary);
	font-size: 0.9375rem;
}

.yl-page .yl-pg-addressbox p {
	margin: 0 0 0.375rem;
}

.yl-page .yl-pg-addressbox p:last-child {
	margin-bottom: 0;
}

.yl-page .yl-pg-addressbox__name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--rk-deep);
}

/* -----------------------------------------------------------
 * 13. セクション内の小見出し（h3）
 *    セクション見出し（h2 = .yl-pg-section__title）の下に段を作るときに使う。
 *    カード内の見出し（.yl-pg-card__title）とは用途が違うため別クラスにしている。
 * --------------------------------------------------------- */
/* 共通ルール `.yl-page .yl-pg-section h3` は要素セレクタ分だけ詳細度が高い。
 * 同じ土俵に乗せないと color / border-left が効かないため h3 を明示する。 */
.yl-page .yl-pg-section h3.yl-pg-subtitle {
	margin: 2.5rem 0 0.75rem;
	font-family: var(--rk-serif);
	font-size: 1.0625rem;
	letter-spacing: 0.06em;
	color: var(--rk-deep);
	padding-left: 0.75rem;
	border-left: 3px solid var(--rk-primary);
}

/* -----------------------------------------------------------
 * 14. 金額の計算例（/fault/ の過失割合による差額など）
 *    数字を比較して見せるための囲み。本文と混ざらないよう面で区切る。
 * --------------------------------------------------------- */
.yl-page .yl-pg-example {
	margin: 1.5rem 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--rk-aqua-pale);
	border-left: 3px solid var(--rk-aqua);
}

.yl-page .yl-pg-example__label {
	margin: 0 0 1rem;
	font-weight: 700;
	color: var(--rk-deep);
}

.yl-page .yl-pg-example__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yl-page .yl-pg-example__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid rgba(69, 177, 199, 0.35);
}

.yl-page .yl-pg-example__ratio {
	min-width: 5.5em;
	font-weight: 700;
}

.yl-page .yl-pg-example__amount {
	color: var(--rk-ink);
}

.yl-page .yl-pg-example__result {
	margin: 1rem 0 0;
	font-family: var(--rk-serif);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--rk-deep);
}

/* -----------------------------------------------------------
 * 15. 損害の全体像ツリー（/compensation/）
 *    下書きの ASCII 図はモバイルで崩れるため、入れ子リストで表現している。
 * --------------------------------------------------------- */
.yl-page .yl-pg-tree,
.yl-page .yl-pg-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yl-page .yl-pg-tree {
	margin: 1.5rem 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--rk-cream2);
}

.yl-page .yl-pg-tree > li + li {
	margin-top: 1.25rem;
}

.yl-page .yl-pg-tree__label {
	display: block;
	font-family: var(--rk-serif);
	font-weight: 700;
	color: var(--rk-deep);
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--rk-primary-soft);
}

.yl-page .yl-pg-tree ul {
	margin-top: 0.625rem;
	padding-left: 1rem;
}

.yl-page .yl-pg-tree ul li {
	position: relative;
	padding: 0.375rem 0 0.375rem 1rem;
	font-size: 0.9375rem;
}

.yl-page .yl-pg-tree ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 0.5rem;
	height: 1px;
	background: var(--rk-aqua);
}

/* -----------------------------------------------------------
 * 16. FAQ アコーディオン（/faq/）
 *    details/summary で組み、JavaScript なしで開閉する。
 *    30〜50問に増えても描画コストが上がらない構造にしている。
 * --------------------------------------------------------- */
.yl-page .yl-pg-faq {
	border-top: 1px solid var(--rk-cream2);
}

.yl-page .yl-pg-faq__item {
	border-bottom: 1px solid var(--rk-cream2);
}

.yl-page .yl-pg-faq__q {
	position: relative;
	display: block;
	cursor: pointer;
	list-style: none;
	padding: 1.125rem 2.5rem 1.125rem 2rem;
	font-weight: 700;
	line-height: 1.7;
}

/* デフォルトの三角マーカーを消す（Safari は ::-webkit-details-marker） */
.yl-page .yl-pg-faq__q::-webkit-details-marker {
	display: none;
}

/* 行頭の「Q」 */
.yl-page .yl-pg-faq__q::before {
	content: "Q";
	position: absolute;
	left: 0;
	top: 1.05rem;
	font-family: var(--rk-serif);
	color: var(--rk-primary-btn);
}

/* 右端の開閉インジケータ（＋ / −） */
.yl-page .yl-pg-faq__q::after {
	content: "＋";
	position: absolute;
	right: 0.25rem;
	top: 1.05rem;
	color: var(--rk-aqua);
}

.yl-page .yl-pg-faq__item[open] .yl-pg-faq__q::after {
	content: "−";
}

.yl-page .yl-pg-faq__q:focus-visible {
	outline: 2px solid var(--rk-aqua);
	outline-offset: -2px;
}

.yl-page .yl-pg-faq__a {
	position: relative;
	padding: 0 0.5rem 1.375rem 2rem;
}

.yl-page .yl-pg-faq__a::before {
	content: "A";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--rk-serif);
	color: var(--rk-aqua);
}

.yl-page .yl-pg-faq__a p {
	margin: 0;
}

/* -----------------------------------------------------------
 * 17. 慰謝料計算機の設置枠（/isharyou/・フェーズ4で中身が入る）
 * --------------------------------------------------------- */
.yl-page .yl-pg-simulator {
	margin: 2rem 0 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--rk-cream);
	border: 1px solid var(--rk-cream2);
	border-top: 3px solid var(--rk-primary);
}

/* -----------------------------------------------------------
 * 18. 解決事例（CPT case）
 *    一覧カード・詳細の金額サマリ・本文。
 *    固定ページと同じ .yl-page トークンの上に乗せる。
 * --------------------------------------------------------- */
.yl-page .yl-case-list {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.yl-page .yl-case-card {
	background: #fff;
	border: 1px solid var(--rk-cream2);
	border-top: 2px solid var(--rk-primary);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.yl-page .yl-case-card:hover {
	box-shadow: 0 4px 16px rgba(12, 79, 124, 0.12);
	transform: translateY(-2px);
}

/* カード全体をリンクにする。中の下線は出さない（面で押させるため） */
.yl-page .yl-pg-section a.yl-case-card__link,
.yl-page .yl-pg-section a.yl-case-card__link:hover {
	display: block;
	padding: 1.5rem 1.375rem;
	height: 100%;
	color: inherit;
	border-bottom: 0;
}

.yl-page .yl-case-card__link:focus-visible {
	outline: 2px solid var(--rk-aqua);
	outline-offset: 2px;
}

.yl-page .yl-case-card__grade {
	display: inline-block;
	font-family: var(--rk-serif);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: #fff;
	background: var(--rk-deep);
	padding: 0.3em 0.75em;
	margin-bottom: 0.875rem;
}

.yl-page .yl-case-card__title {
	font-size: 1rem;
	line-height: 1.7;
	letter-spacing: 0.04em;
	margin: 0 0 0.75rem;
}

.yl-page .yl-case-card__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0.625rem 0.875rem;
	background: var(--rk-cream);
}

.yl-page .yl-case-card__before {
	font-size: 0.875rem;
	color: var(--rk-muted);
	text-decoration: line-through;
}

.yl-page .yl-case-card__arrow {
	color: var(--rk-primary-btn);
}

.yl-page .yl-case-card__after {
	font-family: var(--rk-serif);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--rk-deep);
}

.yl-page .yl-case-card__excerpt {
	font-size: 0.875rem;
	color: var(--rk-muted);
	margin: 0 0 0.75rem;
}

.yl-page .yl-case-card__symptom {
	display: inline-block;
	font-size: 0.75rem;
	color: var(--rk-muted);
	border: 1px solid var(--rk-cream2);
	padding: 0.25em 0.625em;
}

/* --- 詳細ページ --- */
.yl-page .yl-case-single__eyebrow {
	font-family: var(--rk-serif);
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	color: var(--rk-primary-btn);
	margin: 0 0 0.75rem;
}

/* 金額サマリ。増額前がない事案では解決額だけが中央に並ぶ */
.yl-page .yl-case-amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--rk-cream);
	border: 1px solid var(--rk-cream2);
	border-top: 3px solid var(--rk-primary);
	text-align: center;
}

.yl-page .yl-case-amount__col {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.yl-page .yl-case-amount__label {
	font-size: 0.8125rem;
	color: var(--rk-muted);
}

.yl-page .yl-case-amount__before {
	font-family: var(--rk-serif);
	font-size: clamp(1.125rem, 3vw, 1.5rem);
	color: var(--rk-muted);
	text-decoration: line-through;
}

.yl-page .yl-case-amount__arrow {
	font-size: 1.5rem;
	color: var(--rk-primary-btn);
}

.yl-page .yl-case-amount__after {
	font-family: var(--rk-serif);
	font-size: clamp(1.5rem, 4.5vw, 2.25rem);
	font-weight: 700;
	color: var(--rk-deep);
}

/* 本文（管理画面のエディタから入る内容） */
.yl-page .yl-case-body h2:not(.yl-pg-section__title),
.yl-page .yl-case-body h3 {
	font-family: var(--rk-serif);
	margin: 2.25rem 0 0.875rem;
	padding-left: 0.75rem;
	border-left: 2px solid var(--rk-aqua);
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
}

.yl-page .yl-case-body p {
	margin: 0 0 1.25em;
}

/* ページ送り */
.yl-page .yl-case-pagination {
	margin-top: 2.5rem;
	text-align: center;
}

.yl-page .yl-case-pagination .page-numbers {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.4rem 0.6rem;
	margin: 0 0.15rem;
	border: 1px solid var(--rk-cream2);
	color: var(--rk-deep2);
}

.yl-page .yl-case-pagination .page-numbers.current {
	background: var(--rk-deep);
	border-color: var(--rk-deep);
	color: #fff;
}

/* 症状タグは複数付く事例があるため、折り返して並べる */
.yl-page .yl-case-card__symptoms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

/* -----------------------------------------------------------
 * 19. 交通事故コラム（標準投稿 post）
 *    一覧カード・詳細の「投稿日 + カテゴリ」行だけ、
 *    yl-case-list / yl-case-card に無い要素として新規に追加する
 *    （plans/blog_column_migration.md フェーズ3）。
 * --------------------------------------------------------- */
.yl-page .yl-blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8125rem;
	color: var(--rk-muted);
	margin: 0 0 0.75rem;
}

.yl-page .yl-blog-meta__cat {
	display: inline-block;
	color: #fff;
	background: var(--rk-deep);
	padding: 0.2em 0.75em;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

/* カテゴリバッジをリンクにする場合（single.php）、下線は出さない（面のバッジとして見せるため） */
.yl-page .yl-pg-section a.yl-blog-meta__cat,
.yl-page .yl-pg-section a.yl-blog-meta__cat:hover {
	color: #fff;
	border-bottom: 0;
}