/* =========================================================================
   弁護士費用ページ（/fees・デフォルトテンプレート）専用スタイル
   -------------------------------------------------------------------------
   - コンテンツは Gutenberg 本文（Custom HTML ブロック）で管理する前提。
   - クラスは fee-* に限定し、WordPress 標準ブロック（.wp-block-*）や
     practice-* を壊さないようスコープを閉じる。
   - トークン（--red / --text / --line / --dl-border / --beige / --gray /
     --font-serif / --font-sans）と共通ボタン（.btn / .btn--red）は
     base（css/oc-scs.css＝scs-base）で定義済みのものを利用する。
   - is_page('fees') のときのみ読み込む（inc/functions-scs.php）。
   ========================================================================= */

/* ----- ページ全体の上下余白 -----
 * page-head 直後（＝最初のセクション上）と、最終セクション→フッター間の余白。
 * 他の下層ページ（.practice-intro の padding-block）と揃える。 */
.fee-page { padding-top: clamp(48px, 7vw, 90px); padding-bottom: clamp(64px, 9vw, 120px); }

/* ----- セクション共通：横幅と階層間の余白（§17） -----------------------
 * 専用テンプレート page-fees.php 直下に置くため、左右パディングを自持ちする。 */
.fee-section { box-sizing: border-box; width: 100%; max-width: 1088px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }
/* 大セクション（分野）間はまとめて大きめの余白。個別 margin は増やさない */
.fee-section + .fee-section { margin-top: clamp(56px, 8vw, 96px); }

/* ----- 大見出し（分野／セクション名） ---------------------------------- */
.fee-h2 {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(26px, 3.4vw, 34px);
	color: var(--text);
	text-align: center;
	letter-spacing: .06em;
	line-height: 1.4;
	margin: 0 0 clamp(28px, 4vw, 44px);
}
.fee-h2 > span {
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--red);
}

/* ----- 小見出し（各料金表の見出し） ------------------------------------ */
.fee-sub {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(18px, 2.2vw, 22px);
	color: var(--text);
	line-height: 1.5;
	padding-left: 14px;
	border-left: 4px solid var(--red);
	margin: clamp(32px, 4vw, 44px) 0 16px;
}
/* 大見出し直後の小見出しは二重余白を避ける */
.fee-h2 + .fee-sub,
.fee-lead + .fee-sub,
.fee-text + .fee-sub { margin-top: 0; }

/* ----- リード文／本文 -------------------------------------------------- */
.fee-lead { font-size: 16px; color: var(--text); line-height: 1.9; text-align: center; margin: 0 0 24px; }
.fee-text { font-size: 16px; color: var(--text); line-height: 1.95; margin: 0 0 16px; }
.fee-text + .fee-text { margin-top: 1em; }
/* 指定の一文のみ中央揃え（サイズ・weight・line-height は据え置き） */
.fee-text--center { text-align: center; }

/* ----- 冒頭の導入カード（§3） ----------------------------------------- */
.fee-intro {
	background: var(--beige);
	border-radius: 10px;
	padding: clamp(30px, 5vw, 56px) clamp(22px, 5vw, 60px);
	text-align: center;
}
.fee-intro__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(22px, 3vw, 30px);
	color: var(--red);
	line-height: 1.6;
	letter-spacing: .04em;
	margin: 0 0 24px;
}
.fee-intro p {
	font-size: 16px;
	color: var(--text);
	line-height: 1.95;
	text-align: left;
	max-width: 760px;
	margin: 0 auto;
}
.fee-intro p + p { margin-top: 1em; }

/* ----- 相談費用の金額ハイライト（§4） --------------------------------- */
.fee-price {
	max-width: 720px;
	margin: 0 auto;
	border: 2px solid var(--red);
	border-radius: 10px;
	background: #fff;
	padding: clamp(24px, 4vw, 36px);
	text-align: center;
}
.fee-price__ttl { font-size: clamp(16px, 2vw, 18px); font-weight: 700; color: var(--text); margin: 0 0 6px; }
.fee-price__amount { font-family: var(--font-serif); font-weight: 700; color: var(--red); font-size: clamp(26px, 5vw, 38px); line-height: 1.2; margin: 0; }
.fee-price__amount .fee-price__tax { font-size: .5em; font-weight: 600; margin-left: 4px; }

/* ----- 弁護士費用の種類：2列テーブル（着手金/報酬金/実費 ｜ 説明）（§5） -----
 * カードは使わず、他の料金表と同じ .fee-table デザインに合わせる。
 * 左列＝見出しセル（ベージュ）、右列＝説明。 */
.fee-table--types tbody th { white-space: nowrap; vertical-align: top; }
.fee-table--types td { vertical-align: top; }
.fee-cell-list { list-style: disc; margin: 8px 0 0; padding-left: 1.4em; }
.fee-cell-list li { line-height: 1.7; margin: .2em 0; }

/* ----- 経済的利益：通常本文＋控えめな小見出し（カードにしない）（§5） -----
 * 背景色付きカード・枠・横並びは使わず、本文セクションとして縦に表示。
 * 「請求する場合／される場合」は赤文字＋左罫線の控えめな小見出し。 */
.fee-keizai { margin-top: clamp(28px, 4vw, 40px); }
.fee-keizai__intro { font-size: 16px; line-height: 1.9; color: var(--text); margin: 0 0 14px; }
.fee-cases { margin-top: 20px; }
.fee-case + .fee-case { margin-top: 24px; }
.fee-case__head {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 17px;
	color: var(--red);
	line-height: 1.5;
	border-left: 3px solid var(--red);
	padding-left: 10px;
	margin: 0 0 8px;
}
.fee-case__body { font-size: 16px; line-height: 1.9; color: var(--text); margin: 0; }

/* ----- 料金表：全表共通デザイン（§13） -------------------------------- */
.fee-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.fee-sub + .fee-table-wrap,
.fee-text + .fee-table-wrap { margin-top: 14px; }
.fee-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-family: var(--font-sans);
}
.fee-table th,
.fee-table td {
	border: 1px solid var(--dl-border);
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.8;
	text-align: left;
	vertical-align: middle;
	color: var(--text);
}
.fee-table thead th {
	background: var(--red);
	color: #fff;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}
/* 行見出し（左端ラベル列）は淡いベージュで区別 */
.fee-table tbody th {
	background: var(--beige);
	font-weight: 700;
	text-align: left;
}
/* ○ / × の強弱（適度な赤・くすみグレー） */
.fee-yes { color: var(--red); font-weight: 700; }
.fee-no { color: #9a9a9a; }

/* セル内の注記（該当料金の直下に小さく表示）と、同一セル内の別料金行 */
.fee-cell-note { display: block; margin-top: 2px; font-size: 13px; line-height: 1.7; color: var(--gray); }
.fee-cell-line { display: block; margin-top: 4px; }

/* 比較表・多列表：SP で潰さず横スクロール（§8・§14） */
.fee-table--compare { min-width: 760px; }
.fee-table--compare thead th,
.fee-table--compare td { text-align: center; }
.fee-table--compare tbody th { text-align: left; min-width: 190px; white-space: nowrap; }
.fee-table--rates { min-width: 560px; }
.fee-table--rates td { white-space: nowrap; }
.fee-table--rates tbody th { white-space: normal; }

/* ----- 注釈（※）（§7・§13） ------------------------------------------ */
.fee-note {
	font-size: 13px;
	color: var(--gray);
	line-height: 1.8;
	margin: 12px 0 0;
	padding-left: 1.1em;
	text-indent: -1.1em;
}
.fee-note + .fee-note { margin-top: 4px; }
.fee-table-wrap + .fee-note { margin-top: 12px; }
/* セクション全体に係る締めの注釈は少し離す */
.fee-note--section { margin-top: clamp(20px, 3vw, 28px); }
/* 指定の注釈のみ中央揃え（※のぶら下げインデントは解除して中央に揃える） */
.fee-note--center { text-align: center; text-indent: 0; padding-left: 0; }
/* 同一小見出し内で表が続く／注釈の後に表が来る場合の間隔 */
.fee-table-wrap + .fee-table-wrap,
.fee-note + .fee-table-wrap { margin-top: 20px; }

/* ----- FAQ への導線（§16） -------------------------------------------- */
.fee-cta {
	text-align: center;
	background: var(--beige);
	border-radius: 10px;
	padding: clamp(32px, 5vw, 52px) clamp(20px, 4vw, 40px);
}
.fee-cta__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(20px, 2.6vw, 26px);
	color: var(--text);
	margin: 0 0 12px;
}
.fee-cta__text { font-size: 16px; color: var(--text); line-height: 1.8; margin: 0 0 26px; }
.fee-cta .btn { margin-inline: auto; }

/* =========================================================================
   SP（767px 以下）
   ========================================================================= */
@media (max-width: 767px) {
	.fee-table th,
	.fee-table td { padding: 11px 12px; font-size: 14px; }
	.fee-price__amount { font-size: clamp(24px, 8vw, 32px); }
}

/* ScrollHint のサイトカラー上書きは scs-base（css/oc-scs.css）へ移設。
   サイト共通で .js-scrollable に適用するため、fee 固有 CSS からは定義しない。 */