/* =====================================================================
 * base.css — リセット / タイポグラフィ / レイアウト基本
 * ===================================================================== */

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

/* scroll-padding-top: ページ内リンクで飛んだとき、飛び先が固定ヘッダーの
 * 下に潜らないようにする余白。SPはヘッダーの高さぶん（PCの値は components.css）。 */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }

body {
	font-family: var(--font-base);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink);
	background: var(--c-bg-page);
	-webkit-font-smoothing: antialiased;
	/* SP固定バー分の余白を確保（2-7） */
	padding-bottom: calc(var(--spbar-h) + env(safe-area-inset-bottom));
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; }

h1, h2, h3, h4 { line-height: 1.4; font-weight: var(--fw-black); }

/* --- レイアウト primitives --- */
/* 内容幅は Figma 実測で 1200px。左右の余白はその外側に置く（内容が1200pxちょうどになる）。 */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--sec-y); }
.section--soft { background: var(--c-bg-soft); }

.sec-head { margin-bottom: 28px; }

/* セクション見出し（Figma API: title コンポーネント）
 * 1200×75 / padding 16px 20px / gap31 / 角丸20 / 塗り #0B56A2
 * 文字 Noto Sans JP 700 36px 行間43.2 白 ／ 左右の線 72×2px #C3E1FF */
/* 左右の線との間隔は gap ではなく線側の margin で取る。
 * gap にすると、見出しの中でタグを分けたとき（かっこ書きの .sec-label__note など）
 * その間にも同じ間隔が入って、語が離れて見える（2026-09-05）。 */
.sec-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 56px;
	padding: 12px 20px;
	background: var(--fig-blue-60);
	/* スマホも丸める。2行に折り返しても見苦しくならないよう、ピル形（999）にせず60で止める（2026-10-12 フィードバック）。 */
	border-radius: 60px;
	color: #fff;
	font-weight: var(--fw-bold);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	/* スマホで2行に割れたとき、2行目に1〜3文字だけ落ちないようにする。
	 * balance は行の長さをそろえる（Safari 17.5〜・Chrome 114〜）。
	 * auto-phrase は文節の切れ目で折り返す（Chrome 119〜。Safari では無視されて balance だけ働く）。 */
	text-wrap: balance;
	word-break: auto-phrase;
	/* 1つの文節が幅に収まらないとき（幅320で「坂口ボイラーサービス有限会社」など）は、文節の中でも折り返す。
	 * これが無いと見出しが右にはみ出し、ページ全体が横に広がった（2026-10-11）。 */
	overflow-wrap: anywhere;
}
/* 左右の線は幅の広い画面だけ。狭い画面では見出しが2〜3行に折り返すため、
 * 上下中央に置かれた線が文の途中に並んで読みにくくなる（2026-09-05）。 */
.sec-label::before,
.sec-label::after {
	content: none;
	flex: 0 1 32px;
	min-width: 0;
	height: 4px;            /* Figma: Line 12/13 の strokeWeight は 4 */
	background: var(--c-brand-bright);
}
/* 間隔は線と文字のあいだにだけ入れる（外側に入れると見出しの幅が変わる）。 */
.sec-label::before { margin-right: 16px; }
.sec-label::after  { margin-left: 16px; }

/* 見出しの中の、ひとまわり小さいかっこ書き（Figma: 人気機種の価格例(工事費込み)）。 */
/* 見出しの中で文字の大きさが変わるとき（例:「人気機種の価格例(工事費込み)」）は、
 * 本文とかっこ書きを横並びの箱として上下中央でそろえる。
 * ふつうの行として並べると、32px の文字の描画枠（約46px）が行を押し広げて
 * バーの高さが Figma の75pxより1.7px高くなる（2026-09-05）。 */
.sec-label__body { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.sec-label__note { display: inline-block; font-size: .89em; font-weight: inherit; line-height: inherit; }

/* 見出しバーの色ちがい（Figma: お支払い方法だけ #259EF5）。 */
.sec-label--light { background: var(--fig-blue-40); }

.sec-lead { color: var(--c-gray); font-size: 14px; margin-top: 12px; }

.center { text-align: center; }
.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- PC --- */
@media (min-width: 600px) {
	:root { --gutter: 28px; }
	body { font-size: max(calc(14 * var(--ff)), calc(15 * var(--u))); }
	.section { padding-block: var(--sec-y-pc); }
	/* Figma API: 1200×75 / padding16-20 / gap31 / 文字36px 行間43.2 / 線72px */
	/* Figma の枠は 75（余白16×2 ＋ 文字枠43）。行間を43.2にすると75.2になり、
	 * ページの下のほうへ0.2pxずつ積み上がるので、43で止める。 */
	.sec-label {
		min-height: calc(75 * var(--u));
		padding: calc(16 * var(--u)) calc(20 * var(--u));
		font-size: max(calc(24 * var(--ff)), calc(36 * var(--u)));
		line-height: max(calc(28.67 * var(--ff)), calc(43 * var(--u)));
	}
	/* 行間52.1のもの。Figma では 43.2 と 52.1 の2種類が使われており、
	 * バーの高さが 75 / 84 と変わる。 */
	/* 行の高さも見出し本体と同じにする。書かないと 32px の文字ぶん行が伸びて、
	 * バーの高さが Figma の75pxより1.5px高くなる。 */
	.sec-label__note { font-size: max(calc(22 * var(--ff)), calc(32 * var(--u))); line-height: max(calc(28.67 * var(--ff)), calc(43 * var(--u))); }
	/* 行間52.1のものは枠が84（16×2＋52）。 */
	.sec-label--tall { min-height: calc(84 * var(--u)); line-height: max(calc(34.67 * var(--ff)), calc(52 * var(--u))); }
	.sec-label::before,
	.sec-label::after { content: ""; flex: 0 0 calc(72 * var(--u)); }
	.sec-label::before { margin-right: calc(31 * var(--u)); }
	.sec-label::after  { margin-left: calc(31 * var(--u)); }
}

/* 内容幅の枠も比例させる（1440 で 1200＋左右28）。固定のままだと、縮んだ中身と枠の幅が合わなくなる。
 * 600〜1023 は比例させた内容幅（600 で約500）では狭すぎるので、左右24の余白で画面いっぱいに使う
 * （交換ページで決めた形を全ページに広げた。2026-10-12）。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	:root { --gutter: 24px; }
	.wrap { max-width: none; padding-inline: 24px; }
}
@media (min-width: 1024px) {
	.wrap { max-width: calc(1256 * var(--u)); padding-inline: calc(28 * var(--u)); }
}
/* 見出しバーは Figma v2 では角丸100の完全なピル形（交換ページと同じ。2026-10-12 に全ページへ）。 */
@media (min-width: 600px) {
	.sec-label { border-radius: calc(100 * var(--u)); }
}