@charset "UTF-8";
/*
 * 料金表ページ専用（is_page('price') で条件付き読み込み）
 *
 * SPのカード積み替えは td:nth-child(n)::before でラベルを流し込む。
 * data-l 属性は使わない。行を追加しても崩れないようにするため。
 *
 * 巻物の二重罫は theme.json の core/table（＝表の上端）に一本化する。ここでは重ねない。
 * h2 の上には罫を置かず、余白と h2 の意匠だけでセクションを区切る。
 *
 * セルにはクラスを付けない（クライアント様が編集しても崩れないよう、列は nth-child で当てる）。
 */

/* --- セクション見出し（本文 h2。comp .pblock h2） --- */
.l-page__body h2 {
	margin-top: 2.8em;
	color: var(--navy);
	font-size: 21px;
	letter-spacing: 0.12em;
}

.l-page__body h2:first-child {
	margin-top: 0;
}

/* --- 注記（ページ冒頭。※税別 等。comp .notice） ---
   上下 1px hair の帯・中央寄せ。左金罫のボックスにはしない（カンプ準拠）。 */
.c-price-notice {
	max-width: 44em;
	margin: 22px auto 0;
	padding: 20px 26px;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
	font-size: 14px;
	line-height: 2;
	color: var(--brown-body);
	text-align: center;
}

/* --- 注記（表の下の補足。※ご依頼をお受けした場合… 等。comp .dsrc） --- */
.c-table-note {
	margin-top: 14px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--brown-mute);
}

/* --- 詳細ブロック本文の先頭に置く補足（comp .dbody .cap） ---
   summary には入れない（core/details の summary は RichText でクラスが落ちるため）。 */
.c-details-cap {
	margin-bottom: 14px;
	font-size: 13.5px;
	color: var(--brown-mute);
}

/* --- 料金表（comp .ptbl）。core/table 前提（figure.wp-block-table にクラスが付く） --- */
/* h2 と表の余白。カンプは巻物の二重罫が h2 の上（.pblock padding-top:30px）にあり、
   罫は h2 から 30px 離れていた。本実装では罫を表の上端へ移したため、
   その 30px を h2→表 の余白として引き継ぎ、罫が見出しに密着しないようにする。 */
.c-pricetable {
	margin-top: 30px;
}

.c-pricetable table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

/*
 * 横罫（上・左・右を落として border-bottom だけ残す）と、その色（--hair）は
 * style.css §3 の figure.wp-block-table th/td に一本化した（記事本文の表と共通）。
 * ここでは料金表固有の体裁だけを持つ。border は指定しない。
 *
 * padding-top:18px（保留No.25）：巻物の二重罫を表の上端へ移した際（2026-08-21）、
 * ラベル行が罫にぶら下がって密着していた。ラベル行送り（12.5px）を差し引き、
 * 光学的に約25pxのゆとりになるよう 18px を確保する。h2→表の 30px（.c-pricetable margin-top）と
 * あわせ、縦の並びは h2 →30px→ 二重罫 →18px→ ラベル行 →11px→ 細罫 になる。
 * SP（900px以下）は thead を隠すため影響しない。
 * この規則は全バリアント（--two / --jitsuhi-cert / --jitsuhi-notary）に共通で当たる。
 */
.c-pricetable thead th {
	padding: 18px 14px 11px;
	font-family: var(--font-mincho);
	font-size: 12.5px;
	letter-spacing: 0.16em;
	color: var(--brown-mute);
	text-align: left;
	white-space: nowrap;
}

.c-pricetable td {
	padding: 18px 14px;
	vertical-align: top;
	line-height: 1.85;
}

.c-pricetable tr:hover td {
	background: rgba(255, 255, 255, 0.5);
}

/* 列は位置で当てる（セルにクラスを付けない） */
.c-pricetable td:nth-child(1) {
	width: 40%;
	color: var(--brown-ink);
}

.c-pricetable td:nth-child(2) {
	width: 26%;
	font-weight: 600;
	color: var(--navy);
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.c-pricetable td:nth-child(3) {
	width: 34%;
	font-size: 14px;
	color: var(--brown-mute);
}

/* 料金セル内の補足（軽自動車… 等）は折り返す */
.c-pricetable td small {
	display: block;
	margin-top: 4px;
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--brown-mute);
	white-space: normal;
}

/* 2列（日当・実費2種）は幅 60/40 */
.c-pricetable--two td:nth-child(1),
.c-pricetable--jitsuhi-cert td:nth-child(1),
.c-pricetable--jitsuhi-notary td:nth-child(1) {
	width: 60%;
}

.c-pricetable--two td:nth-child(2),
.c-pricetable--jitsuhi-cert td:nth-child(2),
.c-pricetable--jitsuhi-notary td:nth-child(2) {
	width: 40%;
}

/* --- 実費の説明ボックス（comp .jitsuhi-note） --- */
.c-jitsuhi-note {
	margin-top: 22px;
	padding: 22px 26px;
	background: rgba(255, 255, 255, 0.55);
	border-left: 1px solid var(--gold);
	font-size: 14.5px;
	line-height: 2.05;
	color: var(--brown-body);
}

/* 別途お見積り（.c-quote-row）は style.css「5. コンポーネント」へ移設（段階6①。
   記事でも使うため全ページ読み込みの style.css に置く。値は不変）。 */

/* --- 開閉（実費一覧・「日当とは」）。core/details。+ → −、丸が紺へ反転。JS不使用 --- */
/* 罫は上下 1px hair（カンプ price.html の details）。隣接時は罫を重ねて二重線を防ぐ。 */
.l-page__body .wp-block-details {
	margin-top: 18px;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}

.l-page__body .wp-block-details + .wp-block-details {
	margin-top: -1px;
}

/* 詳細ブロック内の表は見出し（補足文）直下に詰める（comp .dbody .ptbl margin-top:6px）。
   本文直下の表 .c-pricetable{margin-top:30px} とは別扱い。詳細度 (0,3,0) で上回る。 */
.l-page__body .wp-block-details .c-pricetable {
	margin-top: 6px;
}

.l-page__body .wp-block-details > summary {
	position: relative;
	padding: 18px 2px 18px 34px;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-mincho);
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--navy);
}

.l-page__body .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* 記号：丸＋「+」。open で「−」に変わり、丸が紺へ反転（文字は白。ゴールド文字は使わない） */
.l-page__body .wp-block-details > summary::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	color: var(--navy);
	font-size: 14px;
	line-height: 1;
}

.l-page__body .wp-block-details[open] > summary::before {
	content: "−";
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-dark);
}

/* --- SP：カード積み替え（900px以下）。ラベルは nth-child::before（属性 data-l は不使用） --- */
@media (max-width: 900px) {
	.c-pricetable thead {
		display: none;
	}

	.c-pricetable table,
	.c-pricetable tbody,
	.c-pricetable tr,
	.c-pricetable td {
		display: block;
		width: 100%;
	}

	/* カードの枠（tr）とセルの罫消し（td）は figure. を前置して (0,1,2) にする。
	   §3 の汎用打ち消し figure.wp-block-table td/th も (0,1,2)。price.css は style.css の後に
	   読み込まれるため、同一詳細度なら後勝ちで SP 側が確実に上書きする（外部の読み込み順に依存しない）。 */
	figure.c-pricetable tr {
		margin-bottom: 12px;
		padding: 16px 18px;
		border: 1px solid var(--hair);
		background: #fff;
	}

	.c-pricetable tr:hover td {
		background: transparent;
	}

	figure.c-pricetable td {
		display: flex;
		flex-wrap: wrap;                   /* ラベルと値が入り切らなければ値を次行へ送る */
		gap: 4px 14px;
		align-items: baseline;
		padding: 5px 0;
		border: 0;
	}

	/* PCの列幅指定（nth-child）は詳細度が高く、放置するとSPでも効いてカードが痩せる。
	   カード積み替え時は全セル全幅にする。 */
	.c-pricetable td:nth-child(1),
	.c-pricetable td:nth-child(2),
	.c-pricetable td:nth-child(3) {
		width: 100%;
	}

	/* 料金・手数料セルはPCで nowrap だが、SPでは折り返す（公証役場の加算式が長いため） */
	.c-pricetable td:nth-child(2) {
		white-space: normal;
	}

	.c-pricetable td::before {
		flex: 0 0 6em;
		font-family: var(--font-mincho);
		font-size: 12.5px;
		letter-spacing: 0.1em;
		color: var(--brown-mute);
	}

	/* ラベル（表の種類ごと。列見出しは price.html の実値） */
	.c-pricetable td:nth-child(1)::before { content: "内容"; }
	.c-pricetable td:nth-child(2)::before { content: "料金"; }
	.c-pricetable td:nth-child(3)::before { content: "含むもの"; }

	.c-pricetable--two td:nth-child(1)::before { content: "区分"; }
	.c-pricetable--two td:nth-child(2)::before { content: "料金"; }

	.c-pricetable--jitsuhi-cert td:nth-child(1)::before { content: "証明書"; }
	.c-pricetable--jitsuhi-cert td:nth-child(2)::before { content: "手数料"; }

	.c-pricetable--jitsuhi-notary td:nth-child(1)::before { content: "価額"; }
	.c-pricetable--jitsuhi-notary td:nth-child(2)::before { content: "手数料"; }
}