/*
 * saito-reform-v0-2 — 追加スタイル
 *
 * assets/_next/static/chunks/*.css はビルド済みで編集できないため、
 * グラデーションと CTA の演出だけをここで上書きする。
 * 配色はテーマトークン（爽やかな青 #0A7BC4 / #065C94、CTA赤 #E8462F / #C4341F）を基準に、
 * 奥行きを出すための明暗差だけ同系色で足している。
 */

/*
 * 日本語フォント（Noto Sans JP）の差し替え。
 * 元は next/font が生成した 496 分割・約12MB を読み込んでおり、初回アクセスで
 * フォント読込が重かった。サイトで実際に使う文字だけにサブセット化した可変フォント
 * 1本（約317KB・wght軸100〜900）に置換し、圧縮チャンク側の 496 @font-face は削除した
 * （utility クラスはそのまま）。wght 軸を持つので 400/500/700/900 すべてこの1本で供給。
 * 文言を大きく変えて未収録の漢字が出たら、サブセットを作り直すこと。
 * 手順は tools/font-subset.md（pyftsubset での再生成コマンドと検証を記載）。
 */
@font-face {
	/* 別名にする。Google Fonts の "Noto Sans JP"（tier-2）と同名にすると、同一レンジで
	   どちらを使うかが曖昧になり Google 側まで DL されてしまう。別名＋スタックで明示的に
	   Subset → Google Noto → システム の順にする（下の --font-noto-sans-jp）。 */
	font-family: "Noto Sans JP Subset";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/noto-sans-jp-subset.woff2") format("woff2");
	/* サブセットに含む文字だけを担当。範囲外の字はこの @font-face を使わず
	   font-family スタックの次（日本語システムフォント）で表示され、豆腐にならない。 */
	unicode-range: U+0020-007E,U+00A0-00FF,U+2002-2003,U+2010-2016,U+2018-201A,U+201C-201E,U+2020-2022,U+2025-2027,U+2030,U+2032-2033,U+2035,U+2039-203C,U+2042,U+2047-2049,U+2051,U+2103,U+2190-2199,U+21B8-21B9,U+21C4-21C6,U+21CB-21CC,U+21D0,U+21D2,U+21D4,U+21E6-21E9,U+21F5,U+2460-24FF,U+25A0-25AB,U+25B1-25B3,U+25B6-25B7,U+25BC-25BD,U+25C0-25C1,U+25C6-25C7,U+25C9-25CC,U+25CE-25D3,U+25E2-25E6,U+25EF,U+2600-2603,U+2605-2606,U+2609,U+260E-260F,U+2616-2617,U+261C-261F,U+262F,U+2640-2642,U+2660-266F,U+2672-267D,U+26A0,U+26BD-26BE,U+3000-303F,U+3041-3096,U+3099-30FF,U+4E00-4E01,U+4E07-4E0B,U+4E0D,U+4E16,U+4E26,U+4E2D,U+4E3B,U+4E45,U+4E7E,U+4E86,U+4E88,U+4E8B,U+4E95,U+4EA4,U+4EBA,U+4ECA-4ECB,U+4ED5-4ED6,U+4ED8,U+4EE3-4EE5,U+4EEE,U+4EF6,U+4EFB,U+4F1A,U+4F4E-4F4F,U+4F53,U+4F55,U+4F59,U+4F5C,U+4F7F,U+4F8B,U+4F9B,U+4F9D,U+4FA1,U+4FB5,U+4FBF,U+4FDD,U+4FE1,U+4FEE,U+500B,U+5012,U+5019,U+505C,U+5099,U+50B7,U+50BE,U+512A,U+5143,U+5148-5149,U+5165,U+5168,U+516C,U+5185-5186,U+5199,U+51E6,U+51FA,U+5206-5207,U+521D,U+5224-5225,U+5229,U+5236-5237,U+524A,U+524D,U+5264-5265,U+5272,U+529B,U+52A0,U+52A3,U+52A9,U+52B9,U+52D5,U+52D9,U+52E7,U+52FE,U+5316,U+534A,U+5353-5354,U+5358,U+5370,U+539A,U+539F,U+53BB,U+53CD,U+53D6-53D7,U+53E3-53E4,U+53EF,U+53F3,U+53F7,U+5404,U+5408,U+540C-540D,U+5411,U+542B,U+5438,U+544A,U+5468,U+547D,U+548C,U+54C1,U+54E1,U+554F,U+55B6,U+56DE,U+56E0,U+56F0,U+56F2-56F3,U+56FA,U+571F,U+5727-5728,U+5730,U+576A,U+57CB,U+57CE,U+57DF,U+57FA,U+5831,U+5834,U+5840,U+5857,U+5897,U+58C1,U+58F0,U+5909,U+590F,U+5915-5916,U+591A,U+5927,U+5929-592B,U+5931,U+5951,U+597D,U+59CB,U+59D4,U+5B50,U+5B63,U+5B66,U+5B85,U+5B88-5B89,U+5B8C,U+5B9A,U+5B9F,U+5BA2,U+5BA4,U+5BB6,U+5BB9,U+5BC6,U+5BCC,U+5BE7,U+5BFE,U+5C02,U+5C04,U+5C0F,U+5C11,U+5C45,U+5C4B,U+5C5E,U+5C65,U+5D8B,U+5DE5-5DE6,U+5E02-5E03,U+5E0C,U+5E2F,U+5E38,U+5E73-5E74,U+5E83,U+5E87,U+5E8A,U+5E97,U+5EA6,U+5ECA,U+5EF6,U+5EFA,U+5F0A,U+5F0F,U+5F15,U+5F31,U+5F35,U+5F37,U+5F53,U+5F62,U+5F69,U+5F71,U+5F79,U+5F85,U+5F8C,U+5F93,U+5F97,U+5FA1,U+5FC3,U+5FC5,U+5FD9,U+5FDC,U+601D,U+6025,U+6027,U+6050,U+606F,U+6094,U+60A9,U+60C5,U+610F,U+611F,U+614B,U+616E,U+6210,U+6238,U+6240,U+624B,U+6253,U+6255,U+6271,U+627F,U+628A,U+6291,U+6298,U+629C,U+629E,U+62E0,U+6301,U+6307,U+63A1,U+63A5,U+63AA,U+63B2,U+63D0,U+63DB,U+63E1,U+640D,U+643A,U+64A4,U+64CD,U+652F,U+6539,U+653E,U+6557,U+6559,U+6570,U+6587,U+6589,U+6599,U+659C,U+65AD,U+65B0,U+65B9,U+65BD,U+65E5,U+65E9,U+6607,U+660E,U+6613,U+6625,U+6642,U+6697,U+66DC,U+66F4,U+66F8,U+66FF-6700,U+6708-6709,U+671B,U+671F,U+6728,U+672A,U+672C,U+6750,U+6765,U+6771,U+677F,U+6790,U+679C,U+67C4,U+67F1,U+6816,U+6839,U+683C,U+6848,U+6850,U+6881,U+68DF,U+691C,U+696D,U+697D,U+6982,U+69CB,U+69D8,U+6A0B,U+6A19,U+6A21,U+6A2A,U+6A5F,U+6B20-6B21,U+6B32,U+6B62-6B63,U+6B74,U+6B8B,U+6BCE,U+6BD4,U+6BDB,U+6C17,U+6C34,U+6C42,U+6C5A,U+6C7A,U+6CBF,U+6CC1,U+6CD5,U+6CE2,U+6CE8,U+6D17,U+6D41,U+6D44,U+6D66,U+6D6E,U+6D77-6D78,U+6DB2,U+6DF7,U+6E08,U+6E29,U+6E7F-6E80,U+6E96,U+6EC5,U+6F0F,U+6F6E,U+6FC0,U+70B9,U+7121,U+7159,U+719F,U+71B1,U+7269,U+72B6,U+72C2,U+73FE,U+7406,U+74E6,U+751F,U+7523,U+7528,U+7530-7531,U+7533,U+753B,U+754C,U+756A,U+75C7,U+767A,U+767D,U+7684,U+7686,U+76E3,U+76EE,U+76F4,U+76F8,U+770B-770C,U+771F,U+7740,U+7763,U+77E5,U+77ED,U+7834,U+786C,U+78BA,U+790E,U+793A,U+793E,U+795D-795E,U+79CB,U+7A0B,U+7A0E,U+7A2E,U+7A4D,U+7A74,U+7A7A,U+7A81,U+7A93,U+7ACB,U+7B2C,U+7B54,U+7B87,U+7B97,U+7BA1,U+7BC0,U+7BC4,U+7BC9,U+7C21,U+7C89,U+7CFB,U+7D04,U+7D20,U+7D22,U+7D30,U+7D39,U+7D42,U+7D44,U+7D4C,U+7D50,U+7D61,U+7DD1-7DD2,U+7DDA,U+7DF4,U+7E2E,U+7E3E,U+7E4B,U+7F36,U+7F6E,U+7F8E,U+7FCC,U+8003,U+8005,U+8010,U+805E,U+8077,U+80FD,U+8150,U+819C,U+81EA,U+8217,U+822C,U+826F,U+8272,U+8328,U+8336,U+8358,U+8377,U+843D,U+8449,U+8584,U+85E4,U+85FB,U+884C,U+8857,U+8868,U+8888,U+88C5,U+88CF,U+88DC,U+88DF,U+88FD,U+8907,U+8981,U+898B,U+898F,U+89A7,U+89B3,U+89E3,U+89E6,U+8A00,U+8A02,U+8A0E,U+8A17-8A18,U+8A2D,U+8A33,U+8A3C,U+8A70-8A71,U+8A73,U+8A8C-8A8D,U+8AAC,U+8ABF,U+8AC7,U+8ACB,U+8B1B,U+8B58,U+8B77,U+8C37,U+8C4A,U+8C61,U+8CA1,U+8CAC,U+8CB4,U+8CB8,U+8CBB,U+8CEA,U+8D64,U+8D85,U+8DB3,U+8E0F,U+8EAB,U+8ED2,U+8EFD,U+8F03,U+8F09,U+8FBA,U+8FBC,U+8FC5,U+8FD1,U+8FD4,U+8FFD,U+9001,U+900F,U+9014,U+901A,U+901F-9020,U+9023,U+9032,U+9045,U+904B,U+904E,U+9055,U+9069,U+906E,U+9075,U+9078,U+90B8,U+90CE,U+90E8,U+90FD,U+914D,U+91CD-91CE,U+91D1,U+91DD,U+9244,U+927E,U+9577,U+9580,U+9589,U+958B,U+9593,U+95A2,U+9632,U+9664,U+9699,U+969B,U+96C7,U+96D1,U+96E3,U+96E8,U+96FB,U+9752,U+975E,U+9762,U+97FF,U+9802-9803,U+9805-9806,U+9808,U+983C,U+984D,U+9854,U+9858,U+985E,U+98A8,U+98DF,U+98FE,U+990A,U+9999,U+9AD8,U+9BAE,U+9E7F,U+9F4B,U+FF01-FF9F,U+FFA1-FFBE,U+FFC2-FFC7,U+FFCA-FFCF,U+FFD2-FFD7,U+FFDA-FFDC,U+FFE0-FFE6,U+FFE8-FFEE;
}

:root {
	/* フォントのフォールバック順（tier）:
	   ① "Noto Sans JP Subset" … 自前サブセット（ローカル・高速。収録字だけ unicode-range で担当）
	   ② "Noto Sans JP" ………… Google Fonts のフル（サブセット外の字をブランド同一の Noto で。functions.php で読込）
	   ③ ヒラギノ／游ゴシック／メイリオ … ブラウザ標準の日本語（Google 不達時の保険）
	   ④ sans-serif ………………… 総称
	   元の圧縮CSSは "Noto Sans JP", sans-serif だけで、サブセット外は総称 sans に落ちていた。 */
	--font-noto-sans-jp: "Noto Sans JP Subset", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
	--sr-blue-deep: #04426b;
	--sr-blue-dark: #065c94;
	--sr-blue: #0a7bc4;
	--sr-blue-bright: #2ba6e0;

	--sr-red-bright: #f26049;
	--sr-red: #e8462f;
	--sr-red-dark: #c4341f;

	--sr-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- ヘッダー上部のインフォメーションバー ---------- */
/* セレクタは header 直下の div に限定。ヒーロー（section#top）は対象外。 */
header > div.bg-brand-dark {
	background-image: linear-gradient(
		90deg,
		var(--sr-blue-deep) 0%,
		var(--sr-blue-dark) 34%,
		var(--sr-blue) 68%,
		var(--sr-blue-bright) 100%
	);
}

/* ---------- ファーストビュー直下の CTA セクション ---------- */
/*
 * ビルド済み CSS のユーティリティだけでは間隔・階層を作りきれないため、
 * このセクションだけ専用クラスで組んでいる。
 */
.sr-cta {
	position: relative;
	overflow: hidden;
	padding: 64px 20px 72px;
	background-color: #eef6fc;
	background-image: radial-gradient(60% 120% at 85% -20%, rgba(43, 166, 224, 0.28), transparent 60%),
		radial-gradient(55% 120% at 5% 120%, rgba(6, 92, 148, 0.18), transparent 60%);
}

.sr-cta__inner {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.sr-cta__eyebrow {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 18px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--sr-blue-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	box-shadow: 0 6px 18px -8px rgba(6, 92, 148, 0.5);
}

.sr-cta__hook {
	margin: 0;
	color: #0d3d63;
	font-size: clamp(24px, 4.2vw, 38px);
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.sr-cta__lead {
	max-width: 680px;
	margin: 16px auto 0;
	color: #3f5a6b;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.85;
	/* 末尾に「す。」だけ残るような不格好な折り返しを避ける */
	text-wrap: balance;
}

.sr-cta__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 720px;
	margin: 32px auto 0;
}

.sr-cta__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	position: relative;
	overflow: hidden;
	min-height: 78px;
	padding: 12px 20px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.25s var(--sr-ease), box-shadow 0.25s var(--sr-ease);
}

.sr-cta__micro {
	font-size: 12px;
	font-weight: 600;
	opacity: 0.9;
}

.sr-cta__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(17px, 2.2vw, 20px);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.sr-cta__icon {
	width: 20px;
	height: 20px;
}

.sr-cta__btn--primary {
	color: #ffffff;
	background-image: linear-gradient(
		120deg,
		var(--sr-red-bright) 0%,
		var(--sr-red) 55%,
		var(--sr-red-dark) 100%
	);
	box-shadow: 0 16px 34px -12px rgba(232, 70, 47, 0.65);
}

.sr-cta__btn--tel {
	color: var(--sr-blue-dark);
	background: #ffffff;
	box-shadow: 0 16px 34px -14px rgba(6, 92, 148, 0.55), inset 0 0 0 2px rgba(10, 123, 196, 0.35);
}

.sr-cta__btn:hover {
	transform: translateY(-3px);
}

.sr-cta__btn--primary:hover {
	box-shadow: 0 22px 44px -12px rgba(232, 70, 47, 0.75);
}

.sr-cta__btn--tel:hover {
	box-shadow: 0 22px 44px -14px rgba(6, 92, 148, 0.6), inset 0 0 0 2px var(--sr-blue);
}

.sr-cta__btn:active {
	transform: translateY(0);
}

/* ホバーで光沢を一度走らせる */
.sr-cta__btn::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	width: 28%;
	transform: skewX(-20deg);
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	opacity: 0;
	pointer-events: none;
}

.sr-cta__btn--primary:hover::after {
	animation: srShine 0.75s var(--sr-ease) 1;
}

/* 安心材料は横一列。事実だけを並べる。 */
.sr-cta__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.sr-cta__trust li {
	display: inline-flex;
	align-items: center;
	color: #34556b;
	font-size: 13px;
	font-weight: 600;
}

.sr-cta__trust li::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	border-radius: 50%;
	background-color: var(--sr-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 11px 11px;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 640px) {
	.sr-cta {
		padding: 44px 16px 52px;
	}

	.sr-cta__actions {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.sr-cta__trust {
		gap: 8px 16px;
	}

	.sr-cta__trust li {
		font-size: 12px;
	}
}

/* 改行は広い画面でだけ効かせる */
@media (min-width: 641px) {
	.sr-cta__br {
		display: none;
	}
}

/* ---------- 赤の CTA ボタン ---------- */
/* バッジ等に付く .bg-accent-cta は対象外にしたいので要素名で絞る。 */
a.bg-accent-cta,
button.bg-accent-cta {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(
		120deg,
		var(--sr-red-bright) 0%,
		var(--sr-red) 55%,
		var(--sr-red-dark) 100%
	);
	box-shadow: 0 14px 30px -10px rgba(232, 70, 47, 0.5);
	transition: transform 0.25s var(--sr-ease), box-shadow 0.25s var(--sr-ease);
}

a.bg-accent-cta:hover,
button.bg-accent-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 38px -10px rgba(232, 70, 47, 0.62);
}

a.bg-accent-cta:active,
button.bg-accent-cta:active {
	transform: translateY(0);
	box-shadow: 0 8px 18px -8px rgba(232, 70, 47, 0.5);
}

/* ホバーで一度だけ走る光沢 */
a.bg-accent-cta::after,
button.bg-accent-cta::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	width: 30%;
	transform: skewX(-20deg);
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.38) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	opacity: 0;
	pointer-events: none;
}

a.bg-accent-cta:hover::after,
button.bg-accent-cta:hover::after {
	animation: srShine 0.75s var(--sr-ease) 1;
}

@keyframes srShine {
	from {
		left: -40%;
		opacity: 1;
	}
	to {
		left: 120%;
		opacity: 0;
	}
}

/* ヘッダーの見積もりボタンだけ、静かに脈打たせて視線を集める */
header a.bg-accent-cta {
	animation: srPulse 2.8s ease-in-out infinite;
}

header a.bg-accent-cta:hover {
	animation: none;
}

@keyframes srPulse {
	0%,
	100% {
		box-shadow: 0 10px 24px -10px rgba(232, 70, 47, 0.5);
	}
	50% {
		box-shadow: 0 14px 32px -8px rgba(232, 70, 47, 0.85), 0 0 0 3px rgba(232, 70, 47, 0.12);
	}
}

/* ---------- 電話ボタン（白地） ---------- */
a[href^="tel:"].bg-white {
	background-image: linear-gradient(120deg, #ffffff 0%, #f7fafc 100%);
	box-shadow: 0 12px 26px -12px rgba(10, 123, 196, 0.45);
	transition: transform 0.25s var(--sr-ease), box-shadow 0.25s var(--sr-ease);
}

a[href^="tel:"].bg-white:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -12px rgba(10, 123, 196, 0.6);
}

a[href^="tel:"].bg-white:active {
	transform: translateY(0);
}

/* ---------- 代表の顔写真 ---------- */
/*
 * ビルド済み CSS のサイズ系ユーティリティは size-11（44px）が上限のため、
 * ここだけ専用クラスを当てている。
 * 元画像が 720x960（3:4）なので、同じ 3:4 で表示して切り取りを起こさない。
 * 以前は円形にしていたが、頭頂部が欠けて胸元に余白ができるため角丸の矩形にした。
 */
.sr-profile-photo {
	flex: none;
	width: 200px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 14px 30px -16px rgba(6, 92, 148, 0.55);
}

@media (max-width: 767px) {
	.sr-profile-photo {
		width: 148px;
	}
}

/* ---------- スマートフォン用の固定 CTA バー ---------- */
/* 画面下に常駐させ、どこまでスクロールしても電話・問い合わせに到達できるようにする。 */
.sr-sticky-cta {
	display: none;
}

@media (max-width: 767px) {
	.sr-sticky-cta {
		position: fixed;
		z-index: 60;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.92);
		backdrop-filter: blur(8px);
		box-shadow: 0 -6px 20px -8px rgba(26, 42, 51, 0.35);
	}

	.sr-sticky-cta__btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1px;
		min-height: 52px;
		padding: 6px 8px;
		border-radius: 999px;
		text-decoration: none;
		line-height: 1.25;
		box-shadow: 0 10px 22px -10px rgba(26, 42, 51, 0.5);
	}

	.sr-sticky-cta__micro {
		font-size: 10px;
		font-weight: 600;
		opacity: 0.85;
	}

	/*
	 * ラベルは 8 文字まで。現行は「無料相談・見積り」で、320px でも 15px の
	 * まま 1 行に収まる（余白 18%）。
	 *
	 * **文字数を増やすときは必ず測り直すこと。** 収まらないからと font-size を
	 * 下げると、隣の電話ボタンと字の大きさが揃わなくなり、詰まって見える。
	 * 一度 13px に下げて「圧迫感がある」と差し戻している。**字を小さくして
	 * 詰め込むのではなく、文字数のほうを減らすこと。**
	 *   実測: scratchpad/fit6.mjs（幅 × フォントサイズ × ラベルの総当たり）
	 *   9 文字「無料相談・見積もり」は 15px だと 320px で折り返す
	 */
	.sr-sticky-cta__label {
		font-size: 15px;
		font-weight: 700;
	}

	.sr-sticky-cta__btn--tel {
		color: #ffffff;
		background-image: linear-gradient(
			120deg,
			var(--sr-blue) 0%,
			var(--sr-blue-dark) 55%,
			var(--sr-blue-deep) 100%
		);
	}

	.sr-sticky-cta__btn--form {
		color: #ffffff;
		background-image: linear-gradient(
			120deg,
			var(--sr-red-bright) 0%,
			var(--sr-red) 55%,
			var(--sr-red-dark) 100%
		);
	}

	/* バーがフッターの最終行に重ならないよう、その分だけ余白を確保する。 */
	body {
		padding-bottom: 76px;
	}
}

/* ---------- モーションを減らす設定を尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
	a.bg-accent-cta,
	button.bg-accent-cta,
	a[href^="tel:"].bg-white,
	header a.bg-accent-cta {
		animation: none;
		transition: none;
	}

	a.bg-accent-cta:hover,
	button.bg-accent-cta:hover,
	a[href^="tel:"].bg-white:hover {
		transform: none;
	}

	a.bg-accent-cta:hover::after,
	button.bg-accent-cta:hover::after {
		animation: none;
	}
}

/* ---------- セクション背景（写真・抽象） ---------- */
/*
 * セクションに opacity や filter を当てると本文の文字まで薄くなってしまう。
 * そこで画像側は不透明のまま、上から半透明の色（グラデ）を重ねて淡く見せる。
 * background-image はカンマ区切りで前の層が手前に描かれるため、
 * 「オーバーレイのグラデを先・写真 url を後」に書いている。
 */

/* contact 用: 濃紺オーバーレイ＋写真。既存の bg-brand-dark を残すことで、
 * 画像が読み込めない場合は紺地にフォールバックする。白文字が乗るため濃いめの紺で伏せる。 */
.sr-bg-photo-dark {
	background-image:
		linear-gradient(rgba(6, 60, 100, 0.86), rgba(4, 44, 74, 0.92)),
		url("../img/section-bg.webp");
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/*
 * 下層ページのヒーロー（ページヘッダー）専用。トップの CONTACT が使う
 * sr-bg-photo-dark とは分離してあるので、ここを触ってもトップは変わらない。
 * 方針: クライアントの主色「さわやかな青」を主役にする。写真は使わず（濃紺＋写真は
 * 暗く重くなったため）、ブランドブルーのグラデを基調に。中央だけ少し沈めて白文字の
 * 可読性を確保し、端は #2BA6E0 まで抜けて爽やかさを出す。ロゴの縦バー・モチーフを
 * 淡く敷いて「さいとうリフォームらしさ」を添える。
 */
.sr-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--sr-blue);
	background-image:
		/* 中央（見出し・リードが乗る帯）を青のまま沈める。リード文（白80%・通常サイズ）が
		   基準 4.5:1 を満たすよう、テキスト幅をしっかり覆う濃さ・広さにする。明るい bright は
		   この楕円の外＝文字の無い左右端に残るので、爽やかさは損なわない。 */
		radial-gradient(86% 128% at 50% 44%, rgba(3, 34, 58, 0.68), rgba(3, 34, 58, 0) 76%),
		/* さわやかな青の斜めスイープ（暗すぎない・端で bright に抜ける） */
		linear-gradient(120deg, #05426b 0%, #0a6fb0 48%, var(--sr-blue) 74%, var(--sr-blue-bright) 100%);
}
/* ロゴの縦バー・モチーフを淡く（幅広の縦バンド。soft-light でごく控えめに） */
.sr-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.06) 0,
		rgba(255, 255, 255, 0.06) 44px,
		transparent 44px,
		transparent 132px
	);
	mix-blend-mode: soft-light;
}
/* 上辺のブランドスイープ・ヘアライン（ヘッダー上帯と同じ deep→blue→bright の配色言語） */
.sr-page-hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sr-blue-deep), var(--sr-blue), var(--sr-blue-bright));
}
/* eyebrow（CASE/PRICE 等）をレタースペーシングして洗練。tracking-* は語彙に無いのでここで付与 */
.sr-page-hero p:first-of-type {
	letter-spacing: 0.28em;
}
/* 見出しは青地でも締まって見えるよう、ごく浅い影で立体感を出す */
.sr-page-hero h1 {
	text-shadow: 0 2px 22px rgba(2, 28, 50, 0.35);
}

/* ---------- モーダル（ネイティブ <dialog>：料金ページのお見積書など） ---------- */
/* 素の <dialog> は背景が透けて未完成に見えるので、バックドロップを暗く沈める。 */
dialog::backdrop {
	background: rgba(2, 20, 40, 0.55);
	backdrop-filter: blur(2px);
}

/* flow 用: 明色セクションに白オーバーレイ＋写真。中央（38〜62%）を .93 と濃くし、
 * 本文が乗る帯の可読性を確保しつつ、上下端（.72／.74）で写真をうっすら覗かせる。 */
.sr-bg-photo-light {
	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.72),
			rgba(255, 255, 255, 0.93) 38%,
			rgba(255, 255, 255, 0.93) 62%,
			rgba(255, 255, 255, 0.74)
		),
		url("../img/flow-bg.webp");
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/*
 * area 用: 施工事例由来の住宅外観写真。
 * 対応エリアは外壁塗装の対象そのものを見せたいので、風景ではなく住宅を使う。
 */
.sr-bg-photo-area {
	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.72),
			rgba(255, 255, 255, 0.93) 38%,
			rgba(255, 255, 255, 0.93) 62%,
			rgba(255, 255, 255, 0.74)
		),
		url("../img/section-bg.webp");
	background-size: cover;
	background-position: 50% 45%;
	background-repeat: no-repeat;
}

/*
 * voice 用: 鹿島灘海浜公園（鉾田市大竹）。
 * 地元の方なら見て分かる場所で、地域のお客様の声という文脈に合う。
 * 元が縦長のため、空・パビリオン・丘の稜線が入る横長帯を切り出した。
 */
.sr-bg-photo-voice {
	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.72),
			rgba(255, 255, 255, 0.93) 38%,
			rgba(255, 255, 255, 0.93) 62%,
			rgba(255, 255, 255, 0.74)
		),
		url("../img/voice-bg.webp");
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/* profile 用: 画像を使わない抽象背景。::before に淡い放射グラデを重ね、
 * blur でにじませることで、本文（.sr-bg-soft > *）の可読性を保ったまま奥行きを出す。 */
.sr-bg-soft {
	position: relative;
	overflow: hidden;
}
.sr-bg-soft::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(46% 70% at 82% 8%, rgba(43, 166, 224, 0.30), transparent 62%),
		radial-gradient(42% 68% at 6% 96%, rgba(6, 92, 148, 0.22), transparent 62%),
		radial-gradient(36% 52% at 50% 44%, rgba(232, 70, 47, 0.07), transparent 62%);
	filter: blur(16px);
	pointer-events: none;
}
.sr-bg-soft > * {
	position: relative;
}

/* ---------- ヘッダー：ナビのホバー下線＋スティッキー時の影 ---------- */
/*
 * ナビは色変化だけだと素っ気ないので、
 * 中央から左右に伸びる 2px の下線を ::after で足す（誠実・上品なトーンに合わせて控えめに）。
 * また、常時ごく薄い影を敷いて、スクロール中にヘッダーが本文から浮いて見えるようにする。
 */
header.sticky {
	box-shadow: 0 6px 20px -14px rgba(6, 60, 100, 0.5);
}

.sr-navlink {
	position: relative;
	z-index: 0;
	transition: color 0.2s var(--sr-ease);
}
/* 背景のほんのりしたハイライト。絶対配置なのでレイアウトは動かさない（誠実トーンを保ちつつ反応を明確に） */
.sr-navlink::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -11px;
	right: -11px;
	top: -5px;
	bottom: -3px;
	border-radius: 999px;
	background-color: rgba(10, 123, 196, 0.12);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.2s var(--sr-ease), transform 0.2s var(--sr-ease);
}
/* 下線：中央から左右へ。太さ 3px・ブランド青のグラデーションで前より明確に */
.sr-navlink::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	height: 3px;
	border-radius: 3px;
	background-image: linear-gradient(90deg, var(--sr-blue), var(--sr-blue-bright));
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.22s var(--sr-ease);
}
.sr-navlink:hover,
.sr-navlink:focus-visible {
	color: var(--sr-blue-dark);
}
.sr-navlink:hover::before,
.sr-navlink:focus-visible::before {
	opacity: 1;
	transform: scale(1);
}
.sr-navlink:hover::after,
.sr-navlink:focus-visible::after {
	transform: scaleX(1);
}

/* ---------- フッター：4カラムのレイアウト ---------- */
/*
 * grid-cols-4 系のユーティリティが語彙に無いため、専用クラスで組む。
 * 会社情報を広めに取り、サービス／対応地域／サイト内リンクを並べる。
 */
.sr-footer-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.sr-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.sr-footer-grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

/* モーションを減らす設定では下線・ハイライトのアニメを無効化 */
@media (prefers-reduced-motion: reduce) {
	.sr-navlink::after,
	.sr-navlink::before {
		transition: none;
	}
}

/* ---------- 視認性（コントラスト）の調整 ---------- */
/*
 * sr: 視認性
 * ビルド済み CSS の .text-text-muted (#5A6B75) は、淡青 #E6F3FB や
 * オフホワイト #F7FAFC の上でコントラスト比 4.7 前後しかなく、
 * 基準は満たすものの本文としては読みづらい。少し濃くして 6.4 前後に上げる。
 * 白背景でも濃くなるだけで不利にはならないため、全体に適用している。
 */
.text-text-muted {
	color: #3f5a6b;
}

/*
 * sr: バッジのコントラスト
 * .bg-accent-cta (#E8462F) の上の白文字はコントラスト比 3.93 で
 * AA 基準 4.5 に届かない。バッジ類だけ一段濃い accent-cta-dark 相当に
 * 下げて 5.40 まで上げる。
 * ボタン（a / button）はグラデーションを別途上書きしているため
 * この background-color は見えず、見た目は変わらない。
 */
.bg-accent-cta {
	background-color: #c4341f;
}

/* ---------- WARRANTY：保証のバナー ---------- */
/*
 * sr: 保証バナー
 * 導入文の下に置くクライアント提供のバナー画像（1536×1024 の 2 倍解像度）。
 * 幅は直上の導入文ブロックと同じ 672px（Tailwind の max-w-2xl 相当）に
 * 揃える。ビルド済み CSS に h-auto と mt-8 が無いので素の CSS で書く。
 */
.sr-warranty__image {
	display: block;
	width: 100%;
	max-width: 672px;
	height: auto;
	margin: 2.5rem auto; /* 上下とも mb-10 相当。カードと詰まって見えないように */
	border-radius: 0.75rem;
	box-shadow: 0 8px 24px rgba(6, 92, 148, 0.14);
}

/* ---------- PRICE：金額を主役にする ---------- */
/*
 * sr: 料金の見せ方
 * grid の stretch で左右カラムの外形は揃うが、右カラムの中身が上寄せで
 * 最下部に空白が残っていた。末尾のカードを伸ばして吸収し、下端を一致させる。
 * 「お見積もりは無料です」のカードは、文言を上・電話 CTA を下端に置いて
 * 間延びを解消している。1 カラムになるモバイルでは何も起きない。
 */
/* --- 高さ揃え: 右カラム末尾カードを伸ばして下端を左カラムと一致させる。
   以前は justify-content:center で中身を中央寄せしていたが、CTA設置に伴い
   「文言を上・ボタンを下端」に変更。ボタンに margin-top:auto を与えるため
   ここでは伸縮と縦積みだけを担う。モバイル(1カラム/非stretch)では余白が
   無いので実質無反応=安全。 */
.sr-price .sr-price__aside > :last-child {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* 金額の枠。左のアクセント帯と淡いグラデーションで価格に視線を集める。 */
.sr-price .sr-price__hero {
	position: relative;
	overflow: hidden;
	border-color: color-mix(in srgb, var(--accent-cta) 35%, transparent);
	background: #fff5f3;
	background:
		radial-gradient(120% 140% at 100% 0%,
			color-mix(in srgb, var(--accent-cta) 12%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, #ffffff 0%,
			color-mix(in srgb, var(--accent-cta) 6%, #ffffff) 100%);
	box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--accent-cta) 50%, transparent);
}

.sr-price .sr-price__hero::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: linear-gradient(180deg, var(--accent-cta), var(--accent-cta-dark));
}

.sr-price .sr-price__badge {
	letter-spacing: 0.02em;
	box-shadow: 0 5px 12px -4px color-mix(in srgb, var(--accent-cta) 60%, transparent);
}

.sr-price .sr-price__amount {
	margin-top: 0.625rem;
}

.sr-price .sr-price__num {
	font-size: clamp(3.5rem, 4rem + 3vw, 5.5rem);
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-shadow: 0 3px 0 color-mix(in srgb, var(--accent-cta) 16%, transparent);
}

.sr-price .sr-price__unit {
	font-size: 1.75rem;
	align-self: flex-end;
	margin-bottom: 0.35rem;
}

/* 屋根塗装の「16」も同じ考え方で。金額そのものは変えていない。 */
.sr-price .sr-price__num-sm {
	color: var(--accent-cta);
	font-size: 2.25rem;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* --- 「お見積もりは無料です」カード：文言を上・電話CTAを下端に --- */
.sr-price .sr-price__free {
	justify-content: flex-start;
}

/* R-015: CTA を下端寄せ（margin-top:auto）にすると、カードが伸びないページで余白が 0 に潰れ
   直上テキストと詰まる。直上パラグラフに最低余白を持たせ、潰れても最小 1.5rem を確保する。
   （下端寄せ auto はそのまま生き、伸びるページでは余白がこれ以上に広がる） */
.sr-price .sr-price__free > p:last-of-type {
	margin-bottom: 1.5rem;
}

/* 電話CTA（濃紺カード上の白ボタン）。左の赤い相談ボタンとは行き先・色で
   役割を分ける（左=フォーム相談 / ここ=電話）。白地×濃紺文字で高コントラスト。 */
.sr-price .sr-price__cta {
	/* 親カード（.sr-price__free）は flex-column かつ flex:1 で伸びる（→ .sr-price__aside > :last-child）。
	   margin-top:auto でボタンをカード下端へ寄せる（背の高い隣接カードに下端を揃えるため）。
	   ただし空き高さが 0 のページ（/price/ は隣に高いカードが無い）では auto が 0 に潰れて
	   直上テキストと詰まる（R-015）。潰れ防止の最低余白は直上パラグラフの margin-bottom で確保する。 */
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0.75rem 1rem;
	border-radius: 999px;
	background: #ffffff;
	color: var(--sr-blue-dark);
	text-decoration: none;
	box-shadow: 0 12px 24px -12px rgba(2, 15, 30, 0.55);
	transition:
		transform 0.25s var(--sr-ease),
		box-shadow 0.25s var(--sr-ease),
		background-color 0.25s var(--sr-ease);
}

.sr-price .sr-price__cta:hover {
	transform: translateY(-2px);
	background: #f2f9ff;
	box-shadow: 0 18px 30px -12px rgba(2, 15, 30, 0.6);
}

.sr-price .sr-price__cta:active {
	transform: translateY(0);
}

.sr-price .sr-price__cta-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--accent-cta);
}

.sr-price .sr-price__cta-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
}

.sr-price .sr-price__cta-sub {
	font-size: 11px;
	font-weight: 700;
	color: #4a6b83;
	letter-spacing: 0.02em;
}

.sr-price .sr-price__cta-tel {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--sr-blue-dark);
}

/* ---------- REASONS：カード上部のバナー画像 ---------- */
/*
 * sr: 選ばれる理由のバナー
 * ビルド済み CSS に aspect-[3/1] と rounded-t-* が無いので、寸法と object-fit は
 * ここで持つ。上 2 角の角丸は、カード側の rounded-2xl + overflow-hidden による
 * クリップで出しているため画像自体には指定しない。
 * 実体は 720×240 の webp（表示は 360×120 相当）。
 */
.sr-reason__media {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
}

/* ---------- 小さい赤文字のコントラスト ---------- */
/*
 * sr: 小さい赤文字
 * accent-cta (#E8462F) の白地に対するコントラストは 3.93:1 で、
 * 普通サイズの文字に必要な 4.5:1 に届かない。小さい文字で使っている
 * 箇所だけ一段濃い #C4341F（5.44:1）に落とす。
 *
 * 大きい文字（料金の「50」「16」、フォームページの電話番号）は
 * 24px 以上または太字 18.66px 以上で基準が 3:1 になり既に満たすため、
 * ブランドカラーのまま残す。セレクタを要素とセクションで絞っているのは
 * .text-accent-cta を一律に上書きすると金額まで色が変わるため。
 */
#company a.text-accent-cta,
#faq span.text-accent-cta,
#contact span.text-accent-cta {
	color: #c4341f;
}

/* ---------- CONCERNS：お悩みの写真 ---------- */
/*
 * sr: お悩みの写真
 * 見出しの下、本文の左に置く。傷んだ箇所を写した記録写真なので、
 * 歪んだ輪郭で切り抜くと内容の深刻さと形の柔らかさがちぐはぐになる。
 * 素直な矩形にしている。
 */
.sr-concern__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sr-concern__photo {
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
	object-fit: cover;
	/*
	 * 角は落とさない。角丸をかけると写真の内容が切り取られ、
	 * 「写真」ではなく「アプリのアイコン」として読まれてしまう。
	 * 報道や印刷で写真の角を落とさないのと同じ理由。
	 */
	box-shadow: 0 3px 10px -4px rgba(6, 92, 148, 0.4);
}

/* 屋根塗装の「税込」。
 * 見た目は Tailwind のクラス（text-xs / font-medium / text-text-muted）に任せ、
 * ここは余白だけを持つ。語彙に mr-* と mx-* が無いため左右の余白が作れない。
 * 太さをまるごとパックの「税込・足場代込み」と同じ 500 に揃えている。
 * 700 のままだと 36px の数字の隣で詰まって大きく見えた。 */
.sr-price .sr-price__tax {
	margin: 0 0.5rem 0 0.45rem;
}

/* 左の余白は「お得パック」から離すためのものだった。プラン名を見出しへ
 * 移して行頭に来たので、そのままだと字下げに見える。 */
.sr-price .sr-price__tax:first-child {
	margin-left: 0;
}

/*
 * CONTACT の見出しが「塗装」の途中で改行される件。
 *
 * 日本語には単語の区切りが無いので、ブラウザは**どこでも折る**。
 * text-balance は行の長さを揃えるだけで、語の途中で切れるのは止まらない。
 * keep-all にすると連続する日本語の中では折らなくなり、「、」「・」など
 * 約物の位置で折れる。
 *
 * **見出しの文言を変えたら実際に見て確かめること。** keep-all は
 * 約物の無い長い一続きがあると、はみ出す側に倒れる。
 */
#contact h2 {
	word-break: keep-all;
	overflow-wrap: anywhere; /* 万一はみ出すときの逃げ道 */
}

/*
 * CONTACT のリード文で、末尾に数文字だけが落ちるのを避ける。
 * .sr-cta__lead と同じ処置。text-pretty（孤立語の抑制）は行の長さを
 * 揃えないので、balance で上書きする。
 *
 * **当てるのはリード文だけ。** フォーム欄の説明は 1〜2 行に自然に収まる。
 * そこにも当てると「ここだけ不自然に改行された」見え方になる。
 */
#contact .max-w-2xl > p:last-child {
	text-wrap: balance;
	/*
	 * balance は行数を詰めるので、そのままだと語の途中で折れる。
	 * 見出しと同じ禁則を本文にも当てる。**片方だけ入れると分断が出る。**
	 */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* ---------- お問い合わせフォーム（Contact Form 7） ---------- */
/*
 * CF7 は独自マークアップを出力するので、テーマのビルド済み Tailwind ではなく
 * ここで整える。見た目は元の自作フォーム（rounded-lg・薄い境界線・focus は brand）に合わせる。
 */
.sr-cf7-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
	.sr-cf7-grid { grid-template-columns: 1fr 1fr; }
	.sr-cf7-row--full { grid-column: 1 / -1; }
}
.sr-cf7-row { display: flex; flex-direction: column; gap: 0.5rem; }
.sr-cf7-row > label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; color: #1a2a33; }
/* 「必須」は小さい文字なので #E8462F(3.93:1) では基準割れ。濃赤 #C4341F(4.9:1) にする。 */
.sr-cf7-req { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 9999px; background: var(--sr-red-dark); color: #fff; font-size: 0.625rem; font-weight: 700; }
.sr-cf7-any { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 9999px; background: #eef3f6; color: #5a6b75; font-size: 0.625rem; font-weight: 700; }
.sr-cf7-grid input[type="text"],
.sr-cf7-grid input[type="tel"],
.sr-cf7-grid input[type="email"],
.sr-cf7-grid textarea {
	width: 100%; border: 1px solid #dce5eb; border-radius: 0.5rem; background: #f7fafc;
	padding: 0.625rem 0.75rem; font-size: 0.875rem; color: #1a2a33; outline: none;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.sr-cf7-grid input:focus, .sr-cf7-grid textarea:focus {
	border-color: var(--sr-blue); box-shadow: 0 0 0 3px rgba(10, 123, 196, 0.25); background: #fff;
}
.sr-cf7-grid textarea { min-height: 6rem; resize: vertical; }
/* ご相談内容のチェックボックス群 */
.wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.wpcf7-checkbox .wpcf7-list-item label {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem;
	border: 1px solid #dce5eb; border-radius: 0.5rem; font-size: 0.875rem; color: #1a2a33;
	cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.wpcf7-checkbox .wpcf7-list-item label:hover { background: var(--sr-blue-light, #e6f3fb); border-color: var(--sr-blue); }
.wpcf7-checkbox input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--sr-blue); }
/* 送信ボタン */
.sr-cf7-submit { margin-top: 1.5rem; }
.sr-cf7-submit input[type="submit"] {
	width: 100%; border: none; border-radius: 9999px; color: #fff;
	/* 既存の赤 CTA（a.bg-accent-cta）と同じブランドグラデ。白文字の可読性のため
	   単色 #E8462F（3.93:1）ではなくグラデにする。 */
	background-image: linear-gradient(120deg, var(--sr-red-bright) 0%, var(--sr-red) 55%, var(--sr-red-dark) 100%);
	padding: 0.9rem 1.5rem; font-size: 1rem; font-weight: 700; cursor: pointer;
	box-shadow: 0 14px 30px -10px rgba(232, 70, 47, 0.5); transition: transform 0.2s var(--sr-ease), box-shadow 0.2s var(--sr-ease);
}
.sr-cf7-submit input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(232, 70, 47, 0.62); }
/* プライバシー同意 */
.sr-cf7-privacy { margin-top: 1rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8125rem; color: #5a6b75; }
.sr-cf7-privacy a { color: var(--sr-blue-dark); font-weight: 700; text-decoration: underline; }
.sr-cf7-privacy .wpcf7-list-item { margin: 0; }
/* 検証エラー・送信結果 */
.wpcf7-not-valid-tip { margin-top: 0.25rem; color: var(--sr-red-dark); font-size: 0.75rem; }
.wpcf7-form-control.wpcf7-not-valid { border-color: var(--sr-red-dark) !important; }
.wpcf7 .wpcf7-response-output { margin: 1.25rem 0 0; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; line-height: 1.6; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border: 1px solid #f0b6ab; background: #fdeeeb; color: var(--sr-red-dark); }
.wpcf7 form.sent .wpcf7-response-output { border: 1px solid #b6dcc4; background: #eef8f1; color: #1c7a45; }

/* ---------- サービス下層ページのアイキャッチ画像 ---------- */
/* ヒーロー直下・最初の H2 の上に置く横長のアイキャッチ。コンテンツ幅いっぱいに
   表示するため、本文画像の幅上限（R-001）からは check-config で除外している。
   暫定は section-bg.webp。取材で各サービスの高解像度写真に差し替える。 */
.sr-eyecatch {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 2.5rem;
	border-radius: 1rem;
	border: 1px solid var(--sr-border, rgba(15, 41, 56, 0.1));
}

/*
 * 劣化サインのカードに載せる実写。現行サイトの写真は低解像度（200x150）なので、
 * 拡大せず実寸内（160x120）に収めて表示する（painting の sr-concern__photo と同じ考え方）。
 * 高解像度の写真は w-full のバナー表示にするので、この class は低解像度の1枚だけに使う。
 */
.sr-sign__photo {
	flex: 0 0 auto;
	width: 160px;
	height: 120px;
	object-fit: cover;
	border-radius: 0.75rem;
}

/*
 * 施工の流れの各ステップに添える実写。現行サイトの工程写真は低解像度（最小 150x112）
 * なので、拡大せず 150px 幅に収めて表示する（R-025 対策）。工程写真はすべて約4:3なので
 * object-fit は使わず自然な縦横比のまま。番号バッジと本文の間に置く。
 */
.sr-flow__photo {
	flex: 0 0 auto;
	width: 150px;
	height: auto;
	border-radius: 0.5rem;
}


/* 固定ヘッダー(sticky top-0)対策: #top へのジャンプ(ロゴのホーム着地や、下層ページの
   「最上部へ」自己ナビでも #top を使用)が固定ヘッダー下に潜り込み最上部が見切れるのを防ぐ。
   #top は最上部の要素なので、ヘッダー高さ分オフセットしてページ最上部(0px)へ着地させる。
   ヘッダー高さ: モバイル 65px / PC(md~) 95px。 */
#top { scroll-margin-top: 65px; }
@media (min-width: 768px) { #top { scroll-margin-top: 95px; } }

/* ---------- 2026-09-12 公開後の見た目点検で追加 ---------- */
/*
 * sr: 見出し（h3）の「最後の行に1〜2文字」を減らす
 * スマホ・タブレットで、施工の流れやサインのカード見出しが「養生（マスキン／グ）」のように割れていた。
 * balance で行の長さをそろえ、Chrome/Edge は auto-phrase で文節単位にも折る。
 * keep-all は Safari で逆効果になるので使わない。auto-phrase は長い1文節ではみ出すことがあるので
 * overflow-wrap:anywhere を必ず併用する（anatanomachino 2026-09-11 の実測）。
 */
h3 {
	text-wrap: balance;
	overflow-wrap: anywhere;
}
@supports (word-break: auto-phrase) {
	h3 { word-break: auto-phrase; }
}
/* 見積書ポップアップの題名（地名＋坪数）は balance だと地名の途中で折れるので、通常の折り返しに戻す */
dialog h3 {
	text-wrap: wrap;
}

/*
 * sr: モバイルメニューを画面の中に収める
 * ヘッダーは sticky。開いたメニュー（約430px）がスマホ横向き（高さ約390px）だと画面からはみ出し、
 * ページをスクロールしてもヘッダーごと付いてくるため、電話・無料相談ボタンに届かなかった。
 * 高さを「画面 − ヘッダー」までにし、あふれた分はメニューの中でスクロールさせる。
 * ヘッダー高さ：md 未満 65px／md 以上 95px（#top の scroll-margin と同じ）。縦向きは高さが足りるので見た目は変わらない。
 */
#js-nav-panel {
	max-height: calc(100vh - 65px);
	max-height: calc(100dvh - 65px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
@media (min-width: 768px) {
	#js-nav-panel {
		max-height: calc(100vh - 95px);
		max-height: calc(100dvh - 95px);
	}
}

/*
 * sr: 見積書ポップアップの表の横スクロール案内
 * 表は最小 34rem で、スマホでは数量・単価・金額の列が右に隠れる（横にスクロールすれば見える）。
 * 気づけるよう、幅が足りない時だけ案内を出す。
 */
.sr-est-scroll-hint { display: none; }
@media (max-width: 40rem) {
	.sr-est-scroll-hint { display: block; }
}

/*
 * sr: 会社概要の電話番号を番号の途中で折らない
 * 幅 320px のスマホで「固定 0299-／94-8756」と番号の途中で改行されていた。番号ごと次の行へ送る。
 * （メニュー内の「090-…（お問い合わせ）」は長いので対象外＝会社概要の欄だけ）
 */
#company a[href^="tel:"] {
	white-space: nowrap;
}

/*
 * sr: 中央ぞろえの説明文（見出し下のリード・ページ上部の青い帯）の改行
 * 2行目が「す。」「ます。」だけ、または言葉の途中で折れていた。行の長さを balance でそろえる
 * （この text-pretty は中央ぞろえの短いリードにだけ使われている＝左ぞろえの本文には効かない）。
 */
p.text-pretty {
	text-wrap: balance;
	overflow-wrap: anywhere;
}
@supports (word-break: auto-phrase) {
	p.text-pretty { word-break: auto-phrase; }
}

/* sr: 施工事例ページ「ビフォーアフター」と「施工事例ギャラリー」の間が約50pxと詰まって見えたので、ほかのセクション間に近づける */
.sr-works-gallery { margin-top: 4.5rem; }
@media (min-width: 768px) {
	.sr-works-gallery { margin-top: 6.5rem; }
}

/* ---------- ブログ（2026-09-12 追加：記事カード・記事本文・一覧のページ送り） ---------- */
/*
 * sr: 記事カード（トップの新着情報・/blog/・記事下の関連記事で共通 = template-parts/blog/card.php）
 * 画像は 1200:630 に切りそろえる（自動化のアイキャッチは画像内に文字があるので、別比率だと文字が切れる）。
 * aspect-ratio は img 自身に置く（枠に置くと Safari で幅0になる罠）。
 */
.sr-post-card { transition: transform 0.2s var(--sr-ease), box-shadow 0.2s var(--sr-ease); }
.sr-post-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(6, 92, 148, 0.28); }
.sr-post-card__link { color: inherit; text-decoration: none; }
.sr-post-card__thumb { overflow: hidden; background: #e6f3fb; }
.sr-post-card__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.sr-post-card__noimg {
	display: flex; width: 100%; aspect-ratio: 1200 / 630; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--sr-blue-dark) 0%, var(--sr-blue) 60%, var(--sr-blue-bright) 100%);
	color: rgba(255, 255, 255, 0.92); font-weight: 700; font-size: 1rem; letter-spacing: 0.08em;
}
.sr-post-card__cat {
	display: inline-block; padding: 0.1rem 0.6rem; border-radius: 9999px;
	background: #e6f3fb; color: var(--sr-blue-dark); font-size: 0.75rem; font-weight: 700; line-height: 1.6;
}
.sr-post-card__title { line-height: 1.6; }

/* sr: 記事の頭（カテゴリー・h1・日付・アイキャッチ） */
.sr-post-head h1 { line-height: 1.45; }
@supports (word-break: auto-phrase) { .sr-post-head h1, .sr-post-card__title { word-break: auto-phrase; overflow-wrap: anywhere; } }
.sr-post-head__cat { margin: 0; }
.sr-post-eyecatch { margin: 1.5rem 0 0; overflow: hidden; border-radius: 1rem; }
.sr-post-eyecatch img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }

/*
 * sr: 記事本文（the_content の中身）。ビルド済み Tailwind は本文用の装飾を持たないので、ここで一式を用意する。
 * 本文 16px・行間 1.95・段落の間 1.2em。h2 は左の青い帯、h3 は下線。表は横スクロール（スマホ）。
 */
.sr-post-body { margin-top: 2rem; color: #1f2d35; font-size: 1rem; line-height: 1.95; overflow-wrap: anywhere; }
.sr-post-body > * + * { margin-top: 1.2em; }
.sr-post-body h2 {
	margin-top: 2.6em; padding: 0.7rem 1rem; border-left: 5px solid var(--sr-blue); border-radius: 0 0.5rem 0.5rem 0;
	background: #eef6fc; color: #0f2530; font-size: 1.25rem; font-weight: 800; line-height: 1.55;
}
.sr-post-body h3 {
	margin-top: 2em; padding-bottom: 0.4rem; border-bottom: 2px solid #d5e7f3;
	color: #0f2530; font-size: 1.1rem; font-weight: 800; line-height: 1.6;
}
.sr-post-body h4 { margin-top: 1.6em; color: #0f2530; font-size: 1rem; font-weight: 800; }
.sr-post-body p { margin-bottom: 0; }
.sr-post-body a { color: var(--sr-blue-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sr-post-body a:hover { color: var(--sr-blue); }
.sr-post-body strong { font-weight: 800; background: linear-gradient(transparent 62%, #fde5df 62%); }
.sr-post-body ul, .sr-post-body ol { padding-left: 1.4em; }
.sr-post-body ul { list-style: disc; }
.sr-post-body ol { list-style: decimal; }
.sr-post-body li + li { margin-top: 0.35em; }
.sr-post-body li::marker { color: var(--sr-blue); }
.sr-post-body blockquote {
	padding: 1rem 1.2rem; border-left: 4px solid #c9dbe7; border-radius: 0 0.5rem 0.5rem 0; background: #f5f8fb; color: #3f5a6b;
}
.sr-post-body img { max-width: 100%; height: auto; border-radius: 0.75rem; }
.sr-post-body figure { margin-left: 0; margin-right: 0; }
.sr-post-body figcaption { margin-top: 0.4rem; color: #5a6b75; font-size: 0.8125rem; text-align: center; }
.sr-post-body hr { margin: 2.4em 0; border: 0; border-top: 1px solid #dce5eb; }
.sr-post-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9rem; line-height: 1.7; }
.sr-post-body th, .sr-post-body td { padding: 0.6rem 0.8rem; border: 1px solid #dce5eb; vertical-align: top; text-align: left; white-space: normal; min-width: 7em; }
.sr-post-body th { background: #eef6fc; color: #0f2530; font-weight: 700; }
.sr-post-body .wp-block-table { overflow-x: auto; }
.sr-post-body .wp-block-table table { display: table; }
@media (min-width: 768px) {
	.sr-post-body table { display: table; }
	.sr-post-body { font-size: 1.0625rem; }
	.sr-post-body h2 { font-size: 1.4rem; }
	.sr-post-body h3 { font-size: 1.2rem; }
}

/* sr: 記事の下の「この記事を書いたのは」 */
.sr-post-author { margin-top: 3rem; padding: 1.4rem 1.5rem; border: 1px solid #dce5eb; border-radius: 1rem; background: #f5f8fb; }

/* sr: ブログ一覧のページ送り（paginate_links の ul 形式） */
.sr-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.sr-pagination a, .sr-pagination span {
	display: inline-flex; min-width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0 0.9rem;
	border: 1px solid #dce5eb; border-radius: 9999px; background: #fff; color: var(--sr-blue-dark); font-size: 0.875rem; font-weight: 700; text-decoration: none;
}
.sr-pagination a:hover { background: #e6f3fb; }
.sr-pagination .current { background: var(--sr-blue-dark); border-color: var(--sr-blue-dark); color: #fff; }
.sr-pagination .dots { border: 0; background: transparent; }

/* sr: 記事の目次（inc/blog.php が h2 3つ以上で自動生成） */
.sr-toc { margin: 2rem 0 0; padding: 1.1rem 1.3rem; border: 1px solid #d5e7f3; border-radius: 0.9rem; background: #f5f8fb; }
.sr-toc__title { margin: 0 0 0.4rem; color: var(--sr-blue-dark); font-size: 0.95rem; font-weight: 800; }
.sr-toc ol { margin: 0; padding-left: 1.4em; list-style: decimal; }
.sr-toc li { margin-top: 0.3em; font-size: 0.95rem; line-height: 1.7; }
.sr-toc li::marker { color: var(--sr-blue); font-weight: 700; }
.sr-toc a { color: #1f2d35; font-weight: 500; text-decoration: none; }
.sr-toc a:hover { color: var(--sr-blue-dark); text-decoration: underline; }
.sr-post-body h2[id] { scroll-margin-top: 80px; }
/* パスワード入力欄（プレビュー中の記事） */
.sr-post-body .post-password-form { padding: 1.2rem 1.3rem; border: 1px solid #dce5eb; border-radius: 0.9rem; background: #f5f8fb; }
.sr-post-body .post-password-form input[type="password"] { margin-top: 0.4rem; padding: 0.5rem 0.7rem; border: 1px solid #c9dbe7; border-radius: 0.5rem; }
.sr-post-body .post-password-form input[type="submit"] { margin-left: 0.4rem; padding: 0.5rem 1rem; border: 0; border-radius: 9999px; background: var(--sr-blue-dark); color: #fff; font-weight: 700; cursor: pointer; }
/* sr: ブログ記事が0件のときの一文（トップの新着情報・/blog/） */
.sr-blog-empty { max-width: 40rem; margin: 0 auto; padding: 1.4rem 1.5rem; border: 1px dashed #c9dbe7; border-radius: 1rem; background: #f5f8fb; color: #3f5a6b; font-size: 0.95rem; line-height: 1.9; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
@supports (word-break: auto-phrase) { .sr-blog-empty { word-break: auto-phrase; } }