/*
Theme Name: いえなおし舎（サンプル）
Theme URI: https://bloomcode-studio.com/
Author: BloomCode-Studio
Description: 業種別サンプル②（自主制作）。この会社は架空のものです。
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: ienaoshi
*/

/* 🔴 色・書体・余白は tokens.css（DESIGN.md から生成）の変数だけを使う。値を直接書かない
   🔴 文字は 14px 以上・px は偶数のみ（手順書 §8-1）
   骨組み（P9）＝並びが崩れない最小限。見た目は P10 で1ブロックずつ組む（DESIGN §9 の部品） */

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	letter-spacing: var(--font-body-tracking);
}

h1,
h2,
h3,
.mb-fv__big {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	letter-spacing: var(--font-heading-tracking);
	line-height: var(--line-height-tight);
}

a {
	color: var(--color-accent);
}

img {
	max-width: 100%;
	height: auto;
}

.mb-container {
	max-width: calc(var(--container-max) + var(--container-gutter-sp) * 2);
	margin-inline: auto;
	padding-inline: var(--container-gutter-sp);
}

@media (min-width: 768px) {
	.mb-container {
		max-width: calc(var(--container-max) + var(--container-gutter-pc) * 2);
		padding-inline: var(--container-gutter-pc);
	}
}

/* WordPress が段（ヘッダー・main・フッター）のあいだに入れる既定の間隔を消す＝余白は各ブロックで持つ（S01 の上に 24px のすき間が出た） */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* main の中も同じ＝ブロックのあいだの 24px を消す（余白は各ブロックの padding＝DESIGN のセクションの余白。2026-11-04 S07 と S08 の境目に白い帯が出た→下層も同じ） */
.mb-main > * {
	margin-block-start: 0;
}

/* 中身の短いページでフッターの下が余らないように（2026-11-04 WK） */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > .mb-main {
	flex: 1 0 auto;
}

/* SP のページ一覧（≡）を開いている間は後ろを動かさない（html だけに付ける） */
.mb-lock {
	overflow: hidden;
}

/* ── 9.0 共通の状態 ── フォーカスはキーボードで選んだときだけ（accent の 2px・外側に 2px） */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ── 9.4 主のボタン（塗り）・9.0 案A「板の厚み」 ── */
.mb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	height: var(--button-h);
	padding: 0 var(--space-lg);
	border-radius: var(--shape-radius);
	font-size: var(--font-size-md);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), background-color var(--motion-dur-fast) var(--motion-ease);
}

.mb-btn--fill {
	background: var(--color-cta-bg);
	color: var(--color-cta-text);
	box-shadow: var(--shadow-fill);
}

/* ホバーはマウスのある端末だけ（スマホはタップの後もホバー扱いが残り、浮いたままになる＝2026-10-20 S00 の ≡ で見つけた） */
@media (hover: hover) {
	.mb-btn--fill:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-fill-hover);
		text-decoration: underline;
	}
}

.mb-btn--fill:active {
	transform: translateY(2px);
	box-shadow: none;
	text-decoration: underline;
}

.mb-btn--header {
	height: var(--button-h-header);
	font-size: var(--font-size-sm);
}

/* ── 9.1 ヘッダー（S00・上に固定＝U5） ── 固定は template-part の外枠に（中の header に sticky を付けても外枠の高さしか効かない） */
.mb-header-wrap {
	position: sticky;
	top: 0;
	z-index: 20;
}

.admin-bar .mb-header-wrap {
	top: var(--wp-admin--admin-bar--height, 0);
}

@media (max-width: 600px) {
	.admin-bar .mb-header-wrap {
		top: 0;   /* 600px 以下の管理バーは固定されない */
	}
}

.mb-header {
	position: relative;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-line);
}

.mb-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h-sp);
	padding: 0 6px 0 var(--container-gutter-sp);
}

.mb-header__name {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	letter-spacing: var(--font-heading-tracking);
	font-size: var(--font-size-lg);
	line-height: 1;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
}

.mb-header__nav,
.mb-header__tel,
.mb-header__bar > .mb-btn {
	display: none;
}

.mb-header__btns {
	display: flex;
	gap: var(--space-2xs);
}

/* SP の電話と ≡（44px 四方） */
.mb-iconbtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--color-line-strong);
	border-radius: var(--shape-radius);
	background: transparent;
	color: var(--color-text);
	font: inherit;
	font-size: var(--font-size-xs);
	line-height: 16px;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), background-color var(--motion-dur-fast) var(--motion-ease);
}

@media (hover: hover) {
	.mb-iconbtn:hover {
		background: var(--color-surface);
		transform: translateY(-2px);
		box-shadow: var(--shadow-ib-hover);
	}
}

.mb-iconbtn:active {
	background: var(--color-line);
	transform: none;
	box-shadow: none;
}

.mb-iconbtn [data-mb-icon] {
	display: flex;
}

.mb-iconbtn [hidden] {
	display: none;
}

/* ── 9.2 メニューの開閉（SP の ≡）＝ヘッダーの下に全幅で開く・即時 ── */
.mb-drawer {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100dvh - var(--header-h-sp));
	overflow-y: auto;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-line);
}

.mb-drawer[hidden] {
	display: none;
}

.mb-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0 var(--container-gutter-sp);
}

.mb-drawer li a {
	display: flex;
	align-items: center;
	height: 56px;
	border-bottom: 1px solid var(--color-line);
	font-size: var(--font-size-md);
	color: var(--color-text);
	text-decoration: none;
}

.mb-drawer li a[aria-current="page"] {
	font-weight: 700;
}

.mb-drawer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg) var(--container-gutter-sp);
}

.mb-drawer__tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--color-text);
	text-decoration: none;
	line-height: 1;
}

.mb-drawer__tel b,
.mb-header__tel b {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size-lg);
}

.mb-drawer__tel small,
.mb-header__tel small {
	font-size: var(--font-size-xs);
}

/* PC の並び＝1200px から（DESIGN §5・1024 では社名とメニューが折れた＝実測） */
@media (min-width: 1200px) {
	.mb-header__bar {
		justify-content: flex-start;
		gap: var(--space-xl);
		height: var(--header-h-pc);
		padding: 0 40px;
	}

	.mb-header__name {
		font-size: var(--font-size-xl);
	}

	.mb-header__btns,
	.mb-drawer {
		display: none;
	}

	.mb-header__nav {
		display: block;
		margin-left: auto;
	}

	.mb-header__nav ul {
		display: flex;
		gap: 28px;
		list-style: none;
		margin: 0;
		padding: 0;
		line-height: 1;
	}

	.mb-header__nav a {
		display: block;
		padding: var(--space-xs) 0;
		border-bottom: 2px solid transparent;
		color: var(--color-text);
		text-decoration: none;
		white-space: nowrap;
	}

	.mb-header__nav a:hover {
		text-decoration: underline;
	}

	.mb-header__nav a[aria-current="page"] {
		border-bottom-color: var(--color-accent);
	}

	.mb-header__tel {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		color: var(--color-text);
		text-decoration: none;
		line-height: 1;
		white-space: nowrap;
	}

	.mb-header__bar > .mb-btn {
		display: inline-flex;
	}
}

/* 動きを減らす設定＝切り替えなし・浮きと沈みなし（ふだんの縁は残す＝DESIGN §9.0） */
@media (prefers-reduced-motion: reduce) {
	.mb-btn,
	.mb-iconbtn {
		transition: none;
	}

	.mb-btn--fill:hover,
	.mb-btn--fill:active,
	.mb-iconbtn:hover {
		transform: none;
	}

	.mb-btn--fill:hover {
		box-shadow: var(--shadow-fill);
	}
}

/* 文節で折る（SPEC §10 の改行の位置をそのまま） */
.mb-nw {
	white-space: nowrap;
}

/* 入力された文の区切り（ienaoshi_phrase_html）＝区切りの後ろで優先して折る */
.mb-ib {
	display: inline-block;
	word-break: auto-phrase;   /* かたまりが1行より長いときは文節で（Safari は未対応＝通常の折り返し） */
}

/* ── 9.5 線のボタン ── */
.mb-btn--line {
	border: 2px solid var(--color-accent);
	background: var(--color-bg);
	color: var(--color-accent);
}

@media (hover: hover) {
	.mb-btn--line:hover {
		background: var(--color-surface);
		transform: translateY(-2px);
		box-shadow: var(--shadow-line-hover);
	}
}

.mb-btn--line:active {
	background: var(--color-line);
	transform: none;
	box-shadow: none;
}

/* ── 濃い面（deep）の上＝主のボタンは金茶・線のボタンは白い線（DESIGN §9.3・§9.4・§9.5）・フォーカスは on-deep ── */
.mb-deep {
	background: var(--color-deep);
	color: var(--color-on-deep);
}

.mb-deep :focus-visible {
	outline-color: var(--color-on-deep);
}

.mb-deep .mb-btn--fill {
	background: var(--color-cta-deep-bg);
	color: var(--color-cta-deep-text);
}

.mb-deep .mb-btn--line {
	border-color: var(--color-on-deep);
	background: transparent;
	color: var(--color-on-deep);
}

/* 濃い面の上の線のボタン＝動かない・縁なし・文字に下線（白い縁は光る縁に見える＝DESIGN §9.0） */
@media (hover: hover) {
	.mb-deep .mb-btn--line:hover {
		background: transparent;
		transform: none;
		box-shadow: none;
		text-decoration: underline;
	}
}

.mb-deep .mb-btn--line:active {
	background: transparent;
	text-decoration: underline;
}

/* ── 9.3 S01 ファーストビュー（左右に分ける）── SP＝写真が上 → 濃い面。🔴 写真の上に文字を載せない */
.mb-fv__photo {
	margin: 0;
	height: var(--fv-photo-h-sp);
}

.mb-fv__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-fv__text {
	padding: var(--space-xl) var(--container-gutter-sp) var(--space-2xl);
}

.mb-fv__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: 500;
	letter-spacing: var(--font-body-tracking);
	line-height: var(--line-height-snug);
}

.mb-fv__big {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: var(--font-size-3xl);
}

.mb-fv__lead {
	margin: 0 0 var(--space-lg);
}

.mb-fv__btns {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* 左右に分けるのは 1024 から（DESIGN §5＝横幅を取る部品） */
@media (min-width: 1024px) {
	.mb-fv {
		display: grid;
		grid-template-columns: var(--fv-text-w-pc) minmax(0, 1fr);
		min-height: var(--fv-h-pc);
	}

	/* 写真は高さを押し広げない（広い画面で写真の縦横比のまま 613px に伸びた＝1440）。高さは濃い面と min-height で決まる */
	.mb-fv__photo {
		position: relative;
		height: auto;
	}

	.mb-fv__img {
		position: absolute;
		inset: 0;
		object-position: 55% 50%;   /* 中央だと左端に窓台の端が 2px 残る（manifest の fv の note） */
	}

	.mb-fv__text {
		order: -1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 40px 0 var(--container-gutter-pc);
	}

	.mb-fv__big {
		font-size: var(--font-size-6xl);
	}

	.mb-fv__btns {
		flex-direction: row;
		gap: var(--space-md);
	}

	.mb-fv__btns .mb-btn {
		font-size: var(--font-size-sm);
	}
}

/* ── セクションの共通（トップ）＝余白 SP 上 48・下 56／PC 96（DESIGN §9.9 ほか） ── */
.mb-sec {
	padding: var(--space-3xl) 0 var(--space-4xl);
}

.mb-h2 {
	margin: 0 0 var(--space-md);   /* 見た目案の .h2 と同じ 16（短い線の下から本文まで） */
	font-size: var(--font-size-2xl);
}

/* H2 の下の短い線＝長さ 40・太さ 2・accent・見出しとの間 12（DESIGN §4・サイトの短い線は1種類） */
.mb-h2::after {
	content: "";
	display: block;
	width: var(--space-2xl);
	height: 2px;
	margin-top: var(--space-sm);
	background: var(--color-accent);
}

.mb-deep .mb-h2::after {
	background: var(--color-on-deep);
}

.mb-h3 {
	margin: 0 0 var(--space-xs);
	font-size: var(--font-size-md);
	line-height: var(--line-height-snug);
}

/* 文字のリンク（9.6）＝下線 1px・ホバーで 2px */
.mb-sec p a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.mb-sec p a:hover {
	text-decoration-thickness: 2px;
}

@media (min-width: 1024px) {
	.mb-sec {
		padding: var(--space-7xl) 0;
	}

	.mb-h2 {
		font-size: var(--font-size-4xl);
	}

	.mb-h3 {
		font-size: var(--font-size-lg);
	}
}

/* ── 9.9 S02 考え方 ── */
.mb-ideas__photo {
	margin: 0 0 var(--space-lg);
	height: 260px;
}

.mb-ideas__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-ideas__body > p {
	margin: 0;
}

.mb-ideas__sub {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-line);
}

.mb-ideas__sub p {
	margin: 0;
}

.mb-ideas__body > .mb-ideas__link {
	margin: var(--space-lg) 0 0;   /* 上の「.mb-ideas__body > p」に打ち消されて 0 になっていた */
}

/* 線のボタンは SP で全幅・PC は文字の幅＋左右 24（DESIGN §9.5） */
.mb-ideas__link .mb-btn {
	display: flex;
	width: 100%;
}

@media (min-width: 1024px) {
	.mb-ideas__link .mb-btn {
		display: inline-flex;
		width: auto;
		font-size: var(--font-size-sm);
	}
}

/* PC＝写真が左 480×520・文字が右＝1200 から（1024〜1199 は文字の列が 320px＝H2「そのまま工事をします」32px が 13px はみ出した＝2026-10-20 実測。縦並びのまま） */
@media (min-width: 1200px) {
	.mb-ideas__inner {
		display: grid;
		grid-template-columns: 480px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--space-5xl);
		align-items: start;
	}

	.mb-ideas__photo {
		grid-column: 1;
		grid-row: 1 / span 2;
		height: 520px;
		margin: 0;
	}

	.mb-ideas__title {
		grid-column: 2;
	}

	.mb-ideas__body {
		grid-column: 2;
	}
}

/* 2つ目と3つ目を2列に（左右に分けた PC のとき＝1200 から） */
@media (min-width: 1200px) {
	.mb-ideas__subs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-xl);
		margin-top: var(--space-lg);
	}

	.mb-ideas__sub {
		margin-top: 0;
	}
}

/* ── 面と注記（共通）── */
.mb-surface {
	background: var(--color-surface);
}

.mb-note {
	margin: 0;
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
	color: var(--color-text-muted);
}

/* 概要の表（9.14）と同じ線＝上端 line-strong・行の下 line（S03 の費用・工期ほか） */
.mb-dl {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 0;   /* あけると行の線が見出しと値の間で切れる＝間は dt の右の余白で（2026-11-04） */
	margin: 0;
	border-top: 1px solid var(--color-line-strong);
}

.mb-dl dt,
.mb-dl dd {
	margin: 0;
	padding: var(--space-xs) 0;
	border-bottom: 1px solid var(--color-line);
}

.mb-dl dt {
	padding-right: var(--space-lg);
	font-weight: 500;
}

/* 写真の隅のラベル（9.10・9.11）＝14・700・余白 上下 4・左右 12・隅から 8 */
.mb-label {
	position: absolute;
	top: var(--space-xs);
	padding: var(--space-2xs) var(--space-sm);
	background: var(--color-deep);
	color: var(--color-on-deep);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: var(--line-height-snug);
}

.mb-label--l {
	left: var(--space-xs);
}

.mb-label--r {
	right: var(--space-xs);
}

/* ── 9.12 S03 施工事例 ── SP＝見出し → 事例2件 → 「施工事例をすべて見る」（全幅）。PC＝見出しの右上にボタン */
.mb-works-top__inner {
	display: grid;
	grid-template-areas: "head" "items" "all";
}

.mb-works-top__head {
	grid-area: head;
}

.mb-works-top__lead {
	margin: 0;
}

.mb-works-top__items {
	grid-area: items;
}

.mb-works-top__all {
	grid-area: all;
	margin: var(--space-xl) 0 0;
}

.mb-works-top__all .mb-btn {
	display: flex;
	width: 100%;
}

.mb-work {
	margin-top: var(--space-xl);
	background: var(--color-panel);
}

.mb-work__body {
	padding: var(--space-lg) var(--space-md) 28px;
}

.mb-work__body .mb-dl {
	margin: var(--space-md) 0 var(--space-sm);
}

.mb-work__title {
	margin: var(--space-xs) 0 var(--space-sm);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-snug);
	word-break: auto-phrase;   /* 題は入力された文＝文節の切れ目で折る（未対応のブラウザはふつうの折り返し） */
}

.mb-work__text {
	margin: 0;
	word-break: auto-phrase;
}

.mb-work__link {
	margin: var(--space-xs) 0 0;
}

/* 2件目＝工事前・工事後を2枚並べる（9.11）＝SP 各 200 高・間 4 */
.mb-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xs);
}

.mb-pair figure {
	position: relative;
	margin: 0;
	height: 200px;
}

.mb-pair img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── 9.10 工事前→工事後の写真の枠（トップで動く1か所＝MOTION §2 S03・§5）──
   🔄 2026-10-20 ユーザー指示＝スクロールに付いてくる動きから「時間で再生する動き」に。
   境目の位置 --mb-wipe（0%＝工事前が全面／100%＝工事後が全面）。工事後の写真の切り抜きと境目の線を同じ値で動かす。
   assets/js/wipe.js が、動かせるときだけ is-armed（0%＝工事前）→ 枠の4割が画面に入ったら is-played（50%・1回だけ）を付ける。
   🔄 2026-10-24 ユーザー決定＝境目をドラッグで動かせる（つまみ↔・止める所＝真ん中＝案A）。動かすと JS が --mb-wipe を直接書く。
   動きを減らす設定・JS が動かないとき＝50%（真ん中で止めた絵）。つまみは JS が動くとき（is-draggable）だけ出す */
@property --mb-wipe {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 50%;
}

.mb-wipe {
	--mb-wipe: 50%;
	position: relative;
	height: 300px;
	margin: 0;
	overflow: hidden;
}

.mb-wipe img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-wipe__after {
	clip-path: inset(0 calc(100% - var(--mb-wipe)) 0 0);
}

/* 境目の 2px の縦の線＝墨（2026-10-20 ユーザー承認） */
.mb-wipe__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--mb-wipe);
	width: 2px;
	margin-left: -1px;
	background: var(--color-text);
}

.mb-wipe .mb-label {
	z-index: 1;
}

/* つまみ（2026-10-24）＝44px の丸・地 panel・墨の 2px の縁・左右の三角。境目の線の真ん中に乗る */
.mb-wipe__handle {
	display: none;
}

.mb-wipe.is-draggable {
	cursor: ew-resize;
	touch-action: pan-y;   /* 指の縦の動きはページのスクロールに渡す＝横に動かしたときだけ境目が動く */
	-webkit-user-select: none;
	user-select: none;
}

.mb-wipe.is-draggable .mb-wipe__handle {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 2px solid var(--color-text);
	border-radius: 50%;
	background: var(--color-panel);
}

.mb-wipe__handle::before,
.mb-wipe__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -6px;
	border-block: 6px solid transparent;
}

.mb-wipe__handle::before {
	left: 8px;
	border-right: 8px solid var(--color-text);
}

.mb-wipe__handle::after {
	right: 8px;
	border-left: 8px solid var(--color-text);
}

/* キーボード・読み上げ用の range＝見えないが選べる。選んだときはつまみにフォーカスの線（9.0 と同じ） */
.mb-wipe__range {
	position: absolute;
	width: 2px;
	height: 2px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip-path: inset(50%);
	-webkit-appearance: none;
	appearance: none;
}

.mb-wipe__range:focus-visible ~ .mb-wipe__line .mb-wipe__handle {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.mb-wipe.is-armed {
	--mb-wipe: 0%;
}

.mb-wipe.is-played {
	--mb-wipe: 50%;
	transition: --mb-wipe var(--motion-dur-wipe) var(--motion-ease-wipe) var(--motion-delay-wipe);   /* ゆっくり始まりゆっくり止まる（共通の ease だと最初の 0.4 秒で 96% まで走った） */
}

@media (prefers-reduced-motion: reduce) {
	.mb-wipe.is-armed,
	.mb-wipe.is-played {
		--mb-wipe: 50%;
		transition: none;
	}
}

/* PC＝左右交互（1件目＝写真が左 640・2件目＝写真が右）。左右の並びは 1200 から（S02 と同じ＝文字の列が狭くならない幅） */
@media (min-width: 1024px) {
	.mb-works-top__all .mb-btn {
		display: inline-flex;
		width: auto;
		font-size: var(--font-size-sm);
	}

	.mb-work__title {
		font-size: var(--font-size-2xl);
	}
}

@media (min-width: 1200px) {
	.mb-works-top__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "head all" "items items";
		align-items: end;
		column-gap: var(--space-lg);
	}

	.mb-works-top__all {
		margin: 0;
	}

	.mb-work {
		display: grid;
		grid-template-columns: 640px minmax(0, 1fr);
		margin-top: var(--space-3xl);
	}

	.mb-work + .mb-work {
		margin-top: var(--space-xl);
	}

	.mb-work--rev {
		grid-template-columns: minmax(0, 1fr) 640px;
	}

	.mb-work--rev .mb-pair {
		order: 2;
		gap: var(--space-md);
		padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
	}

	.mb-work--rev .mb-pair figure {
		height: 320px;
	}

	.mb-work .mb-wipe {
		height: 100%;
		min-height: 480px;
	}

	.mb-work__body {
		padding: var(--space-2xl);
	}
}

/* ── 9.13 S04 費用と工期の目安（2026-10-24 P10）── 承認済みのトップの見た目案の形
   SP＝見出し → 導入 → 表（同じ table を行の並びに＝左に工事の名前と「工期 ◯」・右に金額と補足）→ ボタン（全幅）
   PC（1024 から）＝左 320 に見出し・導入・ボタン／右に表（工事｜費用の目安（税込）｜工期の目安） */
.mb-price-top__inner {
	display: grid;
	grid-template-areas: "head" "table" "more";
}

.mb-price-top__head {
	grid-area: head;
}

.mb-price-top__head p {
	margin: 0 0 var(--space-md);
}

.mb-price-top__table {
	grid-area: table;
}

.mb-price-top__more {
	grid-area: more;
	margin: var(--space-lg) 0 0;
}

.mb-price-top__more .mb-btn {
	display: flex;
	width: 100%;
}

.mb-price,
.mb-price tbody,
.mb-price tr,
.mb-price th,
.mb-price td {
	display: block;
}

.mb-price {
	width: 100%;
	border-collapse: collapse;
	line-height: var(--line-height-snug);
}

.mb-price thead {
	display: none;
}

.mb-price tbody + tbody {
	margin-top: var(--space-lg);
}

/* まとまりの見出し＝14・700・下に line-strong の 2px（9.14 と同じ調子） */
.mb-price__grp th {
	padding-bottom: var(--space-2xs);
	border-bottom: 2px solid var(--color-line-strong);
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-align: left;
}

.mb-price tr:not(.mb-price__grp) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name yen" "period yen";
	column-gap: var(--space-sm);
	align-items: baseline;   /* 工事の名前（16）と金額（18）の1行目をそろえる */
	padding: 14px 0;
}

.mb-price tr:not(.mb-price__grp) + tr {
	border-top: 1px solid var(--color-line);
}

.mb-price__name {
	grid-area: name;
	font-weight: 700;
	text-align: left;
}

.mb-price__period {
	grid-area: period;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.mb-price td.mb-price__yen {
	grid-area: yen;
	text-align: right;
}

.mb-price__amount {
	display: block;
	font-size: var(--font-size-md);
	font-weight: 700;
	white-space: nowrap;
}

.mb-price__yen small {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

@media (min-width: 1024px) {
	.mb-price-top__inner {
		grid-template-columns: 320px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "head table" "more table";
		column-gap: var(--space-5xl);
		align-items: start;
	}

	.mb-price-top__more {
		margin-top: var(--space-xl);
	}

	/* PC＝表に戻す（SP の block・grid を外す） */
	.mb-price,
	.mb-price thead,
	.mb-price tbody,
	.mb-price tr,
	.mb-price tr:not(.mb-price__grp),
	.mb-price th,
	.mb-price td {
		display: revert;
	}

	.mb-price tbody + tbody {
		margin-top: 0;
	}

	.mb-price tr:not(.mb-price__grp) {
		padding: 0;
	}

	.mb-price tr:not(.mb-price__grp) + tr {
		border-top: 0;
	}

	.mb-price thead th {
		padding: 0 0 var(--space-sm);
		font-size: var(--font-size-xs);
		font-weight: 700;
		color: var(--color-text-muted);
		text-align: left;
	}

	.mb-price thead th + th,
	.mb-price td {
		padding-left: var(--space-xl);
	}

	.mb-price thead th.mb-price__yen {
		text-align: right;
	}

	.mb-price__grp th {
		padding: var(--space-lg) 0 var(--space-xs);
	}

	.mb-price tbody tr + tr th,
	.mb-price tbody tr + tr td {
		border-top: 1px solid var(--color-line);
	}

	.mb-price__name {
		padding: 14px 0;
	}

	.mb-price td {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	/* 1行の工事の名前・金額・工期を1行目の文字の下端（ベースライン）でそろえる（th の既定は真ん中＝補足のある行で名前が下がった） */
	.mb-price tbody th,
	.mb-price td {
		vertical-align: baseline;
	}

	/* 工期の列＝本文の大きさ（承認済みの見た目案どおり・SP の「工期 ◯」だけ 14） */
	.mb-price__period {
		font-size: var(--font-size-sm);
		color: var(--color-text);
	}

	.mb-price__plabel {
		display: none;
	}
}

/* ── 9.18 S05 ご相談からお引き渡しまで（道のり・2026-10-24 P10）──
   背景＝写真（全面）＋暗がり veil・文字と線は on-photo。余白 SP 上 96・下 56／PC 96
   🔄 2026-10-24 ユーザー「目線移動で見にくい」＝折り返し（2行目が右→左）をやめた。差し込みの試作で比べてユーザー決定
   SP＝縦1列（1→8 を上から下・左に丸と縦の線・右に名前と一言）。線＝各段の丸の中心から次の段の丸の中心まで（li::after）
   PC（1024 から）＝4列×2行・どの行も左→右（1 2 3 4／5 6 7）。線＝行ごとに1本（1の中心→4の中心・5→7）。🔙 2026-10-24 一時 8段→7段に戻した。行と行は線でつながない（順番は番号） */
.mb-route {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: var(--space-7xl);
	background: var(--color-deep);   /* 写真が読めないときも白い文字が読める */
	color: var(--color-on-photo);
}

.mb-route::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-veil);
}

.mb-route__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-route a {
	color: var(--color-on-photo);
}

.mb-route :focus-visible {
	outline-color: var(--color-on-photo);
}

.mb-route .mb-h2::after {
	background: var(--color-on-photo);
}

.mb-route__inner {
	display: grid;
	grid-template-areas: "head" "path" "more";
}

.mb-route__head {
	grid-area: head;
}

.mb-route__head p {
	margin: 0;
}

.mb-route__path {
	--gap: var(--space-lg);
	grid-area: path;
	position: relative;
	margin-top: var(--space-xl);
}

/* PC の行の線（SP は出さない） */
.mb-route__seg {
	display: none;
}

.mb-route__steps {
	position: relative;
	display: grid;
	row-gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* SP の1段＝左に丸（32）・右に名前（丸と同じ高さの1行）と一言 */
.mb-route__step {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: var(--space-md);
	align-items: start;
	line-height: var(--line-height-snug);
}

/* 縦の線＝この段の丸の中心から次の段の丸の中心まで（丸の下に敷く） */
.mb-route__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	width: 2px;
	height: calc(100% + var(--gap));
	background: var(--color-on-photo);
	transform: translateX(-50%);
}

/* 番号の丸＝32 四方・2px・番号 14・700 */
.mb-route__dot {
	position: relative;
	z-index: 1;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 2px solid var(--color-on-photo);
	border-radius: 50%;
	background: var(--color-on-photo);
	color: var(--color-text);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: 1;
}

.mb-route__step:last-child .mb-route__dot {
	border-color: var(--color-on-deep);
	background: var(--color-deep);
	color: var(--color-on-deep);
}

.mb-route__step b {
	grid-column: 2;
	font-size: var(--font-size-md);
	font-weight: 700;
	line-height: 32px;   /* 丸と同じ高さの1行＝名前の真ん中が丸の中心にそろう */
}

.mb-route__step small {
	grid-column: 2;
	font-size: var(--font-size-xs);
}

.mb-route__more {
	grid-area: more;
	margin: var(--space-md) 0 0;
}

@media (min-width: 1024px) {
	.mb-route__br {
		display: none;
	}

	.mb-route__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "head more" "path path";
		align-items: end;
		column-gap: var(--space-lg);
	}

	.mb-route__more {
		margin: 0;
	}

	/* 4列×2行・段の線の高さ＝--top ＋ --pitch × 行 */
	.mb-route__path {
		--top: 20px;
		--pitch: 144px;
		margin-top: var(--space-4xl);
	}

	.mb-route__seg {
		display: block;
		position: absolute;
		left: 12.5%;    /* 1 の列の中心（4列の 1/8） */
		right: 12.5%;   /* 4 の列の中心 */
		height: 2px;
		margin-top: -1px;
		background: var(--color-on-photo);
	}

	.mb-route__s1 {
		top: var(--top);
	}

	/* 🔄 2026-11-06 ユーザー指定「5 6 7 を中央に」＝2行目の線は最初と最後の丸の中心まで（左右とも --inset＝top-route.php が段の数から書く） */
	.mb-route__s2 {
		top: calc(var(--top) + var(--pitch));
		left: var(--inset, 12.5%);
		right: var(--inset, 12.5%);
	}

	/* 8つの細い列で1段＝2列。2行目の最初の段（5）を --r2start から置く＝残りの段は続けて並ぶ */
	.mb-route__steps {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		grid-template-rows: var(--pitch) auto;
		row-gap: 0;
		padding-top: var(--top);
	}

	.mb-route__step {
		display: block;
		grid-column: span 2;
		text-align: center;
	}

	.mb-route__step--5 {
		grid-column: var(--r2start, 1) / span 2;
	}

	.mb-route__step:not(:last-child)::after {
		content: none;
	}

	.mb-route__dot {
		margin: -16px auto 0;
	}

	.mb-route__step b {
		display: block;
		padding-top: var(--space-xs);
		line-height: var(--line-height-snug);
	}

	.mb-route__step small {
		display: block;
	}
}

/* S05 の線が引かれていく動き（MOTION §2 S05・🆕 2026-10-24 ユーザー決定＝案A）
   assets/js/route.js が is-armed（線が0）→ 段が4割入ったら is-played（1回だけ）。丸と文字は動かさない（明るさを跳ねさせない）
   SP＝縦の線を1段ずつ（1段＝dur-wipe の 1/4・つながって見えるよう一定の速さ）／PC＝1行目 → 終わったら2行目（各行 dur-wipe） */
.mb-route.is-armed .mb-route__step::after {
	transform: translateX(-50%) scaleY(0);
	transform-origin: top;
}

.mb-route.is-played .mb-route__step::after {
	transform: translateX(-50%) scaleY(1);
	transition: transform calc(var(--motion-dur-wipe) / 4) linear calc(var(--motion-delay-wipe) + var(--motion-dur-wipe) / 4 * var(--i));
}

@media (min-width: 1024px) {
	.mb-route.is-armed .mb-route__seg {
		transform: scaleX(0);
		transform-origin: left;
	}

	.mb-route.is-played .mb-route__seg {
		transform: scaleX(1);
		transition: transform var(--motion-dur-wipe) var(--motion-ease-wipe) var(--motion-delay-wipe);
	}

	.mb-route.is-played .mb-route__s2 {
		transition-delay: calc(var(--motion-delay-wipe) + var(--motion-dur-wipe));
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-route.is-armed .mb-route__step::after,
	.mb-route.is-armed .mb-route__seg {
		transform: none;
		transition: none;
	}

	.mb-route.is-armed .mb-route__step::after {
		transform: translateX(-50%);
	}
}

/* ── 9.16 S06 お知らせ（2026-10-24 P10）──
   🔄 2026-10-24 ユーザー決定＝カード形式（差し込みの試作で比べた）。PC＝V2（見出しが上・「お知らせの一覧へ」は右上・全幅で3列・間 24）／SP＝S2（横にスライド・1枚 280・間 16・右は画面の端まで）
   カード＝地 panel・線 line 1px・影なし・角丸なし（S03 と同じ組み＝DESIGN §8 カードは1種類）。写真 4:3（無い投稿は地 surface に社名）→ 日付と分類 14 → 題 16
   下の .mb-news（線で区切る行）は NW01・NW02 の一覧のために残す */
.mb-news-top__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-md);
}

.mb-news-top__all {
	margin: 0;
	white-space: nowrap;
}

.mb-news-top__pc {
	display: none;
}

.mb-news {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--color-line);
	list-style: none;
}

.mb-news li {
	border-top: 1px solid var(--color-line);
}

.mb-news a {
	display: block;
	padding: var(--space-md) 0;
	color: var(--color-text);
	text-decoration: none;
}

.mb-news__meta {
	display: flex;
	gap: var(--space-md);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.mb-news__ttl {
	display: block;
	text-underline-offset: 0.2em;
}

@media (hover: hover) {
	.mb-news a:hover .mb-news__ttl {
		text-decoration: underline;
		text-decoration-thickness: 1px;
	}
}

/* カード（トップ S06）＝SP は横にスライド */
.mb-news--cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 280px;
	gap: var(--space-md);
	margin-right: calc(var(--container-gutter-sp) * -1);   /* 右は画面の端まで＝次のカードがのぞく */
	padding-right: var(--container-gutter-sp);
	border-bottom: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
}

.mb-news--cards li {
	border-top: 0;
	scroll-snap-align: start;
}

.mb-news--cards a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	border: 1px solid var(--color-line);
	background: var(--color-panel);
}

.mb-news__ph {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-surface);
}

.mb-news__ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-news__ph--none {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: var(--font-size-md);
	color: var(--color-text-muted);
}

.mb-news--cards .mb-news__meta {
	padding: var(--space-md) var(--space-md) 0;
}

.mb-news--cards .mb-news__ttl {
	padding: var(--space-2xs) var(--space-md) var(--space-md);
}

@media (min-width: 768px) {
	.mb-news--cards {
		margin-right: calc(var(--container-gutter-pc) * -1);
		padding-right: var(--container-gutter-pc);
	}
}

@media (min-width: 1024px) {
	.mb-news-top__head {
		align-items: flex-end;
		margin-bottom: var(--space-lg);
	}

	.mb-news-top__head .mb-h2 {
		margin-bottom: 0;
	}

	.mb-news-top__sp {
		display: none;
	}

	.mb-news-top__pc {
		display: inline;
	}

	.mb-news--cards {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-lg);
		margin-right: 0;
		padding-right: 0;
		overflow: visible;
	}
}

/* ── 9.14 概要の表（dl.mb-table・2026-10-24 P10＝S07 から）──
   SP＝見出しと値を縦に積む（見出し 14・700／値 16）／PC（1024 から）＝見出し 160｜値（見出し 16）。横線だけ＝上端 line-strong・行の間と下端 line */
.mb-table {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	border-bottom: 1px solid var(--color-line);
}

.mb-table dt {
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-line);
	font-size: var(--font-size-xs);
	font-weight: 700;
}

.mb-table > dt:first-of-type {
	border-top-color: var(--color-line-strong);
}

.mb-table dd {
	margin: 0;
	padding: 2px 0 var(--space-sm);
}

/* ── 9.21 許可と登録の帯 ── 地 panel・上下に line-strong の 2px・余白 上 16・左右 16・下 12 */
.mb-license {
	margin-top: var(--space-lg);
	padding: var(--space-md) var(--space-md) var(--space-sm);
	border-block: 2px solid var(--color-line-strong);
	background: var(--color-panel);
}

.mb-license__title {
	margin: 0 0 var(--space-xs);
	font-weight: 700;
}

.mb-license .mb-table {
	border-bottom: 0;
}

.mb-license .mb-table > dt:first-of-type {
	border-top: 0;
}

/* ── S07 会社のご案内（2026-10-24 P10）── SP＝表 → 地域 → 帯 → ボタン（全幅）／PC＝左 560 に表・間 64・右に地域 → 帯を全幅 → ボタン */
.mb-company-top__area {
	margin-top: var(--space-xl);
}

.mb-company-top__area .mb-h3 {
	margin-bottom: var(--space-xs);
}

.mb-company-top__area p {
	margin: 0 0 var(--space-md);
}

.mb-company-top__area p:last-child {
	margin-bottom: 0;
}

.mb-company-top__more {
	margin: var(--space-xl) 0 0;
}

.mb-company-top__more .mb-btn {
	display: flex;
	width: 100%;
}

@media (min-width: 1024px) {
	.mb-table {
		grid-template-columns: 160px minmax(0, 1fr);
	}

	.mb-table dt,
	.mb-table dd {
		padding: var(--space-sm) 0;
		border-top: 1px solid var(--color-line);
	}

	.mb-table dt {
		font-size: var(--font-size-sm);
	}

	/* 表の上端だけ line-strong＝PC は値の列にも */
	.mb-table > dd:first-of-type {
		border-top-color: var(--color-line-strong);
	}

	.mb-license {
		margin-top: var(--space-xl);
	}

	.mb-license .mb-table > dd:first-of-type {
		border-top: 0;
	}

	.mb-company-top__cols {
		display: grid;
		grid-template-columns: 560px minmax(0, 1fr);
		column-gap: var(--space-5xl);
		align-items: start;
	}

	.mb-company-top__area {
		margin-top: 0;
	}

	.mb-company-top__more .mb-btn {
		display: inline-flex;
		width: auto;
		font-size: var(--font-size-sm);
	}
}

/* ── 9.15 S08 リフォームのご相談（2026-11-04 P10）── SP＝見出し → 導入 → 線 → お電話 → 線 → フォーム／PC（1024 から）＝見出しと導入を1行（上下中央＝2026-11-04 ユーザー指定）→ 線 → 同じ幅の2列・境目に縦の線 */
.mb-consult p {
	margin: var(--space-md) 0 0;
}

.mb-consult__head p {
	margin: 0;
}

.mb-consult__part {
	margin-top: var(--space-lg);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-line-on-deep);
}

.mb-consult .mb-h3 {
	margin-bottom: var(--space-md);
	font-size: var(--font-size-md);
}

.mb-consult .mb-btn {
	display: flex;
	width: 100%;
	height: var(--button-h-consult);
}

.mb-consult .mb-btn + p,
.mb-consult__telbig + p {
	margin-top: var(--space-sm);
}

.mb-consult__telbtn {
	font-size: var(--font-size-2xl);
}

.mb-consult__telbtn svg {
	flex: none;
}

.mb-consult__telbig {
	display: none;
}

.mb-consult__hours > span {
	display: block;
}

@media (min-width: 1024px) {
	.mb-consult.mb-sec {
		padding: var(--space-6xl) 0;
	}

	.mb-consult__head {
		display: flex;
		align-items: center;
		gap: var(--space-xl);
	}

	.mb-consult__head .mb-h2 {
		margin: 0;
	}

	.mb-consult__parts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: var(--space-xl);
		padding-top: var(--space-xl);
		border-top: 1px solid var(--color-line-on-deep);
	}

	.mb-consult__part {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.mb-consult__part:first-child {
		padding-right: var(--space-2xl);
		border-right: 1px solid var(--color-line-on-deep);
	}

	.mb-consult__part:last-child {
		padding-left: var(--space-2xl);
	}

	.mb-consult__telbtn {
		display: none !important;
	}

	.mb-consult__telbig {
		display: block;
		width: fit-content;
		color: var(--color-on-deep);
		font-size: var(--font-size-6xl);
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
	}

	.mb-consult__telbig:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.12em;
	}

	.mb-consult__hours > span {
		display: inline-block;
		margin-right: var(--space-md);
	}

	.mb-consult .mb-consult__formbtn {
		width: 320px;
	}
}

/* ── 9.27 S09 フッター（2026-11-04 P10）── SP＝社名 → 一言 → 表 → 線 → ページ一覧（2列）→ 線 → 架空の明記／768 から表を見出し 128 の横並び／1200 から左右（1024 では右の列が狭く「個人情報の取り扱い」が折れる） */
.mb-footer {
	padding: 40px 0 var(--space-xl);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
}

.mb-footer p {
	margin: 0;
}

.mb-footer .mb-footer__name {
	margin-bottom: var(--space-xs);
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-heading-weight);
	letter-spacing: var(--font-heading-tracking);
	line-height: 1;
}

.mb-footer__dl {
	margin: var(--space-md) 0;
}

.mb-footer__dl dt {
	margin-top: var(--space-xs);
	font-weight: 700;
}

.mb-footer__dl dd {
	margin: 0;
}

.mb-footer__nav ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-md);
	margin: 0;
	padding: var(--space-2xs) 0;
	border-block: 1px solid var(--color-line);
	list-style: none;
}

/* スマホは押せる大きさ 44（DESIGN §9.0）＝行の高さ 22＋上下 12 */
.mb-footer__nav a {
	display: block;
	padding-block: var(--space-sm);
	color: var(--color-text);
}

.mb-footer a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.mb-footer a:hover {
	text-decoration-thickness: 2px;
}

.mb-footer .mb-footer__sample {
	margin-top: var(--space-md);
}

@media (min-width: 768px) {
	.mb-footer__dl {
		display: grid;
		grid-template-columns: 128px minmax(0, 1fr);
		column-gap: var(--space-md);
		row-gap: var(--space-xs);
	}

	.mb-footer__dl dt {
		margin: 0;
	}
}

@media (min-width: 1024px) {
	.mb-footer {
		padding-top: var(--space-4xl);
	}

	.mb-footer__nav ul {
		row-gap: var(--space-xs);
		padding: var(--space-md) 0;
	}

	.mb-footer__nav a {
		display: inline;
		padding-block: 0;
	}
}

@media (min-width: 1200px) {
	.mb-footer__cols {
		display: grid;
		grid-template-columns: 560px minmax(0, 1fr);
		column-gap: var(--space-6xl);
		align-items: start;
	}

	.mb-footer__nav ul {
		margin-top: var(--space-2xs);
		padding: 0;
		border: 0;
	}

	.mb-footer .mb-footer__sample {
		margin-top: var(--space-2xl);
		padding-top: var(--space-md);
		border-top: 1px solid var(--color-line);
	}
}

/* ── 9.7 下層の見出しの帯（2026-11-04 WK01・下層共通）── 写真の上に H1 だけ・左寄せで上下中央（2026-11-04 ユーザー指定） */
.mb-pagehead {
	position: relative;
	display: flex;
	align-items: center;
	height: 220px;
	overflow: hidden;
}

.mb-pagehead__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-pagehead::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--color-veil) 70%, transparent);   /* H1 が上下中央＝スマホは見出しが2行になるので 70% まで veil（50% だと 3.79:1）・768 から 50%。全面にしないのは写真の上を残すため */
}

.mb-pagehead__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.mb-pagehead h1 {
	margin: 0;
	color: var(--color-on-photo);
	font-size: var(--font-size-3xl);
}

.mb-pageintro {
	padding: var(--space-md) 0 var(--space-xl);
}

.mb-pageintro p {
	margin: 0;
}

/* 導入＝中央寄せ・パンくずとの間 64（2026-11-04 ユーザー指定＝下層で統一）。パンくずは左のまま */
.mb-pageintro .mb-pageintro__lead {
	margin-top: var(--space-5xl);
}

.mb-pageintro__lead,
.mb-pageintro__note {
	text-align: center;
}

.mb-pageintro .mb-pageintro__note {
	margin-top: var(--space-2xs);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
}

/* ── 9.8 パンくず ── */
.mb-breadcrumb {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
}

.mb-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-breadcrumb li + li::before {
	content: "＞" / "";
	margin-inline: var(--space-xs);
}

.mb-breadcrumb a {
	color: var(--color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	/* P11（2026-11-06）＝「トップ」は幅も 44 に届かなかった（43.9）＝左右にも 2 ずつ広げる（押せる範囲だけ・見た目は不変） */
	padding-inline: 2px;
	margin-inline: -2px;
}

.mb-breadcrumb a:hover {
	text-decoration-thickness: 2px;
}

/* ── 9.17 丸いボタンの絞り込み（WK02・NW でも使う）── 件数・アイコンを置かない */
.mb-filter-wrap {
	padding-bottom: var(--space-lg);
}

.mb-filter-nav__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: var(--line-height-snug);
}

.mb-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-filter a {
	display: inline-flex;
	align-items: center;
	height: var(--button-h-pill);
	padding: 0 var(--space-md);
	border: 2px solid var(--color-accent);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-accent);
	font-size: var(--font-size-xs);   /* SP 14（2026-11-04 ユーザー指定）／768 から 16 */
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--motion-dur-fast) var(--motion-ease);
}

@media (hover: hover) {
	.mb-filter a:hover {
		background: var(--color-surface);
	}

	.mb-filter a[aria-current]:hover {
		background: var(--color-accent);
		text-decoration: underline;
	}
}

.mb-filter a:active {
	background: var(--color-line);
}

.mb-filter a[aria-current],
.mb-filter a[aria-current]:active {
	background: var(--color-accent);
	color: var(--color-cta-text);
}

/* ── 9.12 WK03 事例の一覧 ── SP 1列／768 から 2列／1024 から写真を高く。全体が1つのリンク・ホバーは題に下線 */
.mb-works-list {
	padding: var(--space-xs) 0 var(--space-4xl);
}

.mb-works {
	display: grid;
	row-gap: var(--space-2xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-works > li {
	margin: 0;
}

.mb-work-card {
	display: block;
	color: var(--color-text);
	text-decoration: none;
}

.mb-work-card__photo {
	display: block;
	height: 240px;
}

.mb-work-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-work-card__meta,
.mb-work-card__sample {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
}

.mb-work-card__meta {
	margin-top: var(--space-md);
}

.mb-work-card__sample {
	margin-top: var(--space-2xs);
}

.mb-work-card__title {
	margin: var(--space-2xs) 0 0;
	font-size: var(--font-size-lg);
	line-height: 1.5;
	word-break: auto-phrase;
}

.mb-work-card__nums {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-md);
	margin-top: var(--space-xs);
	line-height: var(--line-height-snug);
}

@media (hover: hover) {
	.mb-work-card:hover .mb-work-card__title {
		text-decoration: underline;
	}
}

@media (min-width: 768px) {
	.mb-pagehead::after {
		background: linear-gradient(to top, var(--color-veil) 50%, transparent);
	}

	.mb-filter a {
		font-size: var(--font-size-sm);
	}

	.mb-works {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-2xl);
		row-gap: var(--space-4xl);
	}
}

@media (min-width: 1024px) {
	.mb-pagehead {
		height: 320px;
	}

	.mb-pagehead h1 {
		font-size: var(--font-size-6xl);
	}

	.mb-pageintro {
		padding: 20px 0 var(--space-2xl);
	}

	.mb-filter-wrap {
		padding-bottom: var(--space-xl);
	}

	.mb-works-list {
		padding-bottom: var(--space-7xl);
	}

	.mb-work-card__photo {
		height: 340px;
	}

	.mb-work-card__title {
		font-size: var(--font-size-xl);
	}
}

/* ── 下層のセクションの H2（§4）＝SP 22／PC 28 ── */
.mb-h2--sub {
	font-size: var(--font-size-xl);
}

/* ── WD 施工事例の詳細（2026-11-04 P10）── 写真の帯を置かない・写真に文字を重ねない
   SP＝縦に積む／768 から写真を横に2枚／1024 から写真を高く・WD04 の行を2列 */
.mb-wd-head {
	padding: var(--space-md) 0 var(--space-lg);
}

.mb-wd-head p {
	margin: 0;
}

.mb-wd-head .mb-wd-head__meta,
.mb-wd-head .mb-wd-head__sample {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
}

.mb-wd-head .mb-wd-head__meta {
	margin-top: var(--space-lg);
}

.mb-wd-head .mb-wd-head__sample {
	margin-top: var(--space-xs);
}

.mb-wd-head h1 {
	margin: var(--space-2xs) 0 0;
	font-size: var(--font-size-2xl);
	word-break: auto-phrase;
}

.mb-wd-photos {
	padding-bottom: var(--space-xs);
}

.mb-wd-photos__grid {
	display: grid;
	row-gap: var(--space-lg);
}

.mb-wd-photos figure {
	margin: 0;
}

.mb-wd-photos figcaption {
	margin-bottom: var(--space-xs);
	font-weight: 700;
	line-height: var(--line-height-snug);
}

.mb-wd-photos img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

.mb-wd-body,
.mb-wd-price {
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.mb-wd-body__text {
	margin: 0;
	word-break: auto-phrase;
}

/* 列の間をあけない＝あけると行の線が見出しと値の間で切れる。間は dt の右の余白で */
.mb-wd-body .mb-dl {
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 0;
	margin-top: var(--space-lg);
	line-height: var(--line-height-snug);
}

.mb-wd-body .mb-dl dt,
.mb-wd-body .mb-dl dd {
	padding: var(--space-sm) 0;
}

.mb-wd-body .mb-dl dt {
	padding-right: var(--space-md);
	font-weight: 700;
}

.mb-wd-price p {
	margin: 0;
}

.mb-wd-prices {
	display: grid;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

/* 行の線＝上下に引いて 1px 重ねる（行が奇数でも列の幅で閉じる） */
.mb-wd-prices li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--space-md);
	align-items: baseline;
	margin-bottom: -1px;
	padding: 14px 0;
	border-block: 1px solid var(--color-line);
	line-height: var(--line-height-snug);
}

.mb-wd-prices b,
.mb-wd-prices small {
	display: block;
}

.mb-wd-prices__name b {
	font-weight: 700;
}

.mb-wd-prices small {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.mb-wd-prices__yen {
	text-align: right;
}

.mb-wd-prices__yen b {
	font-size: var(--font-size-md);
	font-weight: 700;
	white-space: nowrap;
}

.mb-wd-price .mb-wd-price__more {
	margin-top: var(--space-lg);
}

.mb-wd-price__more a,
.mb-pager__all {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.mb-wd-price__more a:hover,
.mb-pager__all:hover {
	text-decoration-thickness: 2px;
}

/* 9.26 次の事例／一覧へ */
.mb-pager {
	padding: var(--space-xl) 0 var(--space-2xl);
	border-top: 1px solid var(--color-line);
	line-height: var(--line-height-snug);
}

/* SP＝上の段に前と次を左右・下の段の中央に一覧へ／768 から1行（前｜一覧へ｜次）。片方が無い事例も位置は変えない */
.mb-pager__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "prev next" "all all";
	column-gap: var(--space-md);
	row-gap: 20px;
	align-items: start;
}

.mb-pager__link {
	display: block;
	text-decoration: none;
}

.mb-pager__link span {
	display: block;
	font-size: var(--font-size-xs);
}

.mb-pager__link b {
	display: block;
	font-weight: 700;
	word-break: auto-phrase;
}

@media (hover: hover) {
	.mb-pager__link:hover b {
		text-decoration: underline;
	}
}

.mb-pager__prev {
	grid-area: prev;
}

.mb-pager__next {
	grid-area: next;
	text-align: right;
}

.mb-pager__all {
	grid-area: all;
	justify-self: center;
}

@media (min-width: 768px) {
	.mb-wd-photos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-lg);
	}

	.mb-pager__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: "prev all next";
		column-gap: var(--space-xl);
	}

	/* 前と次は上でそろえる（題の行数が違うと「前の事例」「次の事例」の高さがずれた）・一覧へだけ上下中央 */
	.mb-pager__all {
		align-self: center;
	}
}

@media (min-width: 1024px) {
	.mb-h2--sub {
		font-size: var(--font-size-3xl);
	}

	.mb-wd-head {
		padding: 20px 0 var(--space-xl);
	}

	.mb-wd-head h1 {
		font-size: var(--font-size-5xl);
	}

	.mb-wd-photos {
		padding-bottom: var(--space-md);
	}

	.mb-wd-photos img {
		height: 380px;
	}

	.mb-wd-body,
	.mb-wd-price {
		padding: var(--space-4xl) 0 var(--space-5xl);
	}

	.mb-wd-body__inner {
		max-width: 720px;
	}

	.mb-wd-body .mb-dl {
		grid-template-columns: 136px minmax(0, 1fr);
	}

	.mb-wd-prices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-2xl);
	}

	.mb-pager {
		padding: var(--space-2xl) 0;
	}
}

/* ── PR 費用の目安（2026-11-04 P10）── 下層の帯の下の余白を詰める・2文の導入 */
.mb-pageintro--tight {
	padding-bottom: var(--space-lg);
}

.mb-pageintro .mb-pageintro__lead + .mb-pageintro__lead {
	margin-top: var(--space-2xs);
}

/* PR02〜PR04＝SP は工事の名前と金額を1行・その下に一言とリンク／PC（1024 から）は右 240 に金額 */
.mb-price-group {
	padding: var(--space-2xl) 0 var(--space-xs);
}

.mb-price-group__title {
	margin: 0;
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--color-line-strong);
	font-size: var(--font-size-xl);
	line-height: 1.5;
}

.mb-price-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-price-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name nums" "note note" "link link";
	column-gap: var(--space-md);
	align-items: baseline;
	padding: 20px 0 var(--space-xs);
}

.mb-price-item + .mb-price-item {
	border-top: 1px solid var(--color-line);
}

.mb-price-item h3 {
	grid-area: name;
	margin: 0;
	font-size: var(--font-size-md);
	line-height: var(--line-height-snug);
}

.mb-price-item__nums {
	grid-area: nums;
	line-height: var(--line-height-snug);
	text-align: right;
	white-space: nowrap;
}

.mb-price-item__nums b,
.mb-price-item__nums small,
.mb-price-item__nums span {
	display: block;
}

.mb-price-item__nums b {
	font-size: var(--font-size-xl);
	font-weight: 700;
	line-height: var(--line-height-tight);
}

.mb-price-item__nums small {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.mb-price-item__nums span {
	margin-top: var(--space-2xs);
}

.mb-price-item p {
	grid-area: note;
	margin: var(--space-xs) 0 0;
}

/* スマホで押せる大きさ 44（§9.0）＝行の高さ 26＋上下 10 */
.mb-price-item__link {
	grid-area: link;
	justify-self: start;
	padding-block: 10px;
	line-height: var(--line-height-snug);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.mb-price-item__link:hover {
	text-decoration-thickness: 2px;
}

/* PR05＝9.20 見出し＋文の並び（CO でも使う）＝線で区切って縦。🔄 2026-11-04 ユーザー決定＝PC（1024 から）は左 320 に見出し・右に3つ */
.mb-price-how {
	padding: var(--space-2xl) 0;
}

.mb-price-how .mb-h2 {
	margin-bottom: 20px;
}

.mb-points h3 {
	margin: 0;
	font-size: var(--font-size-md);
	line-height: var(--line-height-snug);
}

.mb-points p {
	margin: var(--space-xs) 0 0;
}

.mb-points > div + div {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--color-line);
}

@media (min-width: 1024px) {
	.mb-price-group {
		padding: var(--space-4xl) 0 var(--space-5xl);
	}

	.mb-price-group__title {
		font-size: var(--font-size-3xl);
	}

	.mb-price-item {
		grid-template-columns: minmax(0, 1fr) 240px;
		grid-template-rows: auto auto 1fr;
		grid-template-areas: "name nums" "note nums" "link nums";
		column-gap: var(--space-2xl);
		align-items: start;
		padding: var(--space-lg) 0;
	}

	.mb-price-item h3 {
		font-size: var(--font-size-lg);
	}

	.mb-price-item__nums b {
		font-size: var(--font-size-2xl);
	}

	.mb-price-item__link {
		margin-top: var(--space-xs);
		padding-block: 0;
	}

	.mb-price-how {
		padding: var(--space-4xl) 0 72px;
	}

	/* 左 320 に見出し・右に内容（PR05・FL03・FL04＝ユーザー決定の型） */
	.mb-side {
		display: grid;
		grid-template-columns: 320px minmax(0, 1fr);
		column-gap: var(--space-5xl);
		align-items: start;
	}

	.mb-side > .mb-h2 {
		margin-bottom: 0;
	}

	.mb-points h3 {
		font-size: var(--font-size-lg);
	}

	.mb-points > div + div {
		margin-top: var(--space-lg);
		padding-top: var(--space-lg);
	}
}

/* ── FL ご相談の流れ（2026-11-04 P10）── 9.19 大きな番号の段＝番号は写真で塗って暗くする（brightness 0.62＝DESIGN §9.19）。
   SP＝番号 → 文（奇数は左・偶数は右に番号）／PC（1024 から）＝番号の列 360 と文を左右交互（ワイヤー W36・ユーザー確認済み） */
.mb-flow-steps {
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.mb-steps {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.mb-steps__item {
	padding: 28px 0;
	border-top: 1px solid var(--color-line);
}

.mb-steps__num {
	display: block;
	width: fit-content;
	background-color: var(--color-accent);
	background-position: center;
	background-size: cover;
	color: var(--color-accent);
	filter: brightness(0.62);
	font-family: var(--font-heading);
	font-size: var(--font-size-num-sp);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.mb-steps__num {
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.mb-steps__item:nth-child(even) .mb-steps__num {
	margin-left: auto;
}

.mb-steps__body {
	margin-top: var(--space-sm);
}

.mb-steps__body h3 {
	margin: 0;
	font-size: var(--font-size-lg);
	line-height: 1.5;
}

.mb-steps__body h3::after {
	content: "";
	display: block;
	width: var(--space-2xl);
	height: 2px;
	margin-top: var(--space-sm);
	background: var(--color-accent);
}

.mb-steps__body p {
	margin: var(--space-sm) 0 0;
}

.mb-flow-live {
	padding: var(--space-2xl) 0 var(--space-xl);
}

.mb-flow-live .mb-h2 {
	margin-bottom: 20px;
}

.mb-flow-after {
	padding: var(--space-2xl) 0 var(--space-3xl);
}

.mb-flow-after p {
	margin: 0;
}

@media (min-width: 1024px) {
	.mb-flow-steps {
		padding: var(--space-5xl) 0 72px;
	}

	.mb-steps {
		margin-top: var(--space-xl);
	}

	.mb-steps__item {
		display: grid;
		grid-template-columns: 360px minmax(0, 1fr);
		column-gap: var(--space-5xl);
		align-items: center;
		padding: var(--space-3xl) 0;
	}

	.mb-steps__num {
		margin-left: auto;
		font-size: var(--font-size-num-pc);
	}

	.mb-steps__item:nth-child(even) {
		grid-template-columns: minmax(0, 1fr) 360px;
	}

	.mb-steps__item:nth-child(even) .mb-steps__num {
		order: 2;
		margin-left: 0;
	}

	.mb-steps__body {
		margin-top: 0;
	}

	.mb-flow-live {
		padding: var(--space-4xl) 0 var(--space-5xl);
	}

	.mb-flow-after {
		padding: var(--space-4xl) 0 72px;
	}
}

/* ── CO 会社案内・対応エリア（2026-11-06 P10）── 9.20（CO02＝PC は左 320 に見出し）・9.14（CO03＝PC は見出し 200）・9.22（CO04 地図）・CO05（幅 640 まで）
   SP＝セクションの上 32・下 40（CO05 は 48）／PC（1024 から）＝上 56・下 64（CO05 は 72）＝ワイヤー W の CO02〜CO05 */
.mb-co-ideas,
.mb-co-about,
.mb-co-area {
	padding: var(--space-xl) 0 var(--space-2xl);
}

.mb-co-decline {
	padding: var(--space-xl) 0 var(--space-3xl);
}

.mb-co-ideas .mb-h2 {
	margin-bottom: 20px;
}

.mb-co-area__cities {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: 700;
}

.mb-co-area__note {
	margin: var(--space-2xs) 0 0;
}

.mb-co-area__mapcol {
	margin-top: var(--space-lg);
}

/* 9.22 地図＝枠なし・四角（角丸なし）・SP は全幅 280 高 */
.mb-map {
	height: 280px;
}

.mb-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.mb-map__note {
	margin: var(--space-xs) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.mb-co-decline__lead {
	margin: 0;
}

.mb-co-decline__list {
	margin: var(--space-md) 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--color-line);
}

.mb-co-decline__list li {
	padding: var(--space-sm) 0;
	border-top: 1px solid var(--color-line);
}

@media (min-width: 1024px) {
	.mb-co-ideas,
	.mb-co-about,
	.mb-co-area {
		padding: var(--space-4xl) 0 var(--space-5xl);
	}

	.mb-co-decline {
		padding: var(--space-4xl) 0 72px;
	}

	.mb-co-about .mb-h2 {
		margin-bottom: var(--space-lg);
	}

	.mb-co-about .mb-table {
		grid-template-columns: 200px minmax(0, 1fr);
	}

	.mb-co-area__cols {
		display: grid;
		grid-template-columns: 400px minmax(0, 1fr);
		column-gap: var(--space-5xl);
		align-items: start;
	}

	.mb-co-area__mapcol {
		margin-top: 0;
	}

	.mb-map {
		height: 400px;
	}

	.mb-co-decline__list {
		max-width: 640px;
	}
}

/* ── NW お知らせ（2026-11-06 P10）── 一覧と分類＝🔄 ユーザー指定「B のサムネ付きで」＝トップ S06 と同じカード（9.16）を縦に並べる
   SP 1列（間 16）／768 から2列（間 24）／1024 から3列（S06 と同じ）・絞り込み（9.17）／詳細＝帯なし・幅 720 まで（W44） */
.mb-news--grid {
	grid-auto-flow: row;
	grid-template-columns: minmax(0, 1fr);
	margin-right: 0;
	padding-right: 0;
	overflow: visible;
	scroll-snap-type: none;
}

.mb-news-list {
	padding: 0 0 var(--space-3xl);
}

.mb-news-list__none {
	margin: 0;
}

.mb-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: var(--space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.mb-pagination a,
.mb-pagination span {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--space-xs);
	justify-content: center;
}

.mb-news-detail {
	padding: var(--space-md) 0 var(--space-3xl);
}

.mb-news-detail__inner {
	max-width: 720px;
}

.mb-news-detail__meta {
	display: flex;
	gap: var(--space-md);
	margin: var(--space-lg) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
}

.mb-news-detail h1 {
	margin: var(--space-2xs) 0 0;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-line);
	font-size: var(--font-size-2xl);
	word-break: auto-phrase;
}

.mb-news-detail__body {
	margin-top: var(--space-lg);
	word-break: auto-phrase;   /* 社長が書く本文＝文節の切れ目で折る（1024 で「くださ／い。」と1字が残った＝2026-11-06・Safari は未対応＝P11 の実機で） */
}

.mb-news-detail__body p {
	margin: var(--space-md) 0 0;
}

.mb-news-detail__body > :first-child {
	margin-top: 0;
}

/* 🔄 2026-11-06 題の下のサムネイル＝カードと同じ 4:3（.mb-news__ph）・写真の無い投稿は社名の枠 */
.mb-news-detail__photo {
	margin: var(--space-lg) 0 0;
}

.mb-news-detail__back {
	margin: var(--space-xl) 0 0;
}

.mb-news-detail__back a,
.mb-pagination a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

@media (hover: hover) {
	.mb-news-detail__back a:hover,
	.mb-pagination a:hover {
		text-decoration-thickness: 2px;
	}
}

@media (min-width: 768px) {
	.mb-news--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-lg);
		margin-right: 0;
		padding-right: 0;
	}
}

@media (min-width: 1024px) {
	.mb-news--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mb-news-list {
		padding-bottom: 72px;
	}

	.mb-news-detail {
		padding: 20px 0 72px;
	}

	.mb-news-detail h1 {
		font-size: var(--font-size-4xl);
	}
}

/* ── NW03 サイドバー（2026-11-06 ユーザー指定「サイドバーを作成・新着記事・CTA・あとは任せます」）──
   PC（1024 から）＝記事｜サイドバー 256（間 64・上端は日付の行にそろえる）／1024 未満＝記事の下（上 48）・CTA は出さない（すぐ下にご相談の帯）
   新着記事＝写真 96×72（4:3）＋日付 14＋題 14／分類＝文字のリンクの行（44 高）／CTA＝濃い面・金茶のボタン2つ（S08 と同じ組み） */
.mb-news-side {
	display: grid;
	gap: var(--space-2xl);
	margin-top: var(--space-3xl);
}

.mb-news-side__title {
	margin: 0;
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--color-line-strong);
	font-size: var(--font-size-md);
	line-height: var(--line-height-snug);
}

.mb-news-side ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-news-side__recent li,
.mb-news-side__cats li {
	border-bottom: 1px solid var(--color-line);
}

.mb-news-side__recent a {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	column-gap: var(--space-sm);
	align-items: start;
	padding: var(--space-sm) 0;
	color: var(--color-text);
	text-decoration: none;
}

.mb-news-side__ph {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-surface);
}

.mb-news-side__ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-news-side__ph--none {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.mb-news-side__text {
	display: block;
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
}

.mb-news-side__text time {
	display: block;
	color: var(--color-text-muted);
}

.mb-news-side__ttl {
	display: block;
	margin-top: var(--space-2xs);
	text-underline-offset: 0.2em;
}

.mb-news-side__cats a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-text);
	text-decoration: none;
	text-underline-offset: 0.2em;
}

@media (hover: hover) {
	.mb-news-side__recent a:hover .mb-news-side__ttl,
	.mb-news-side__cats a:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
	}
}

.mb-news-side__cta {
	display: none;
	padding: var(--space-lg);
}

.mb-news-side__cta .mb-news-side__title {
	border-bottom-color: var(--color-line-on-deep);
}

.mb-news-side__cta p {
	margin: var(--space-sm) 0 0;
	font-size: var(--font-size-xs);
}

.mb-news-side__cta .mb-btn {
	display: flex;
	width: 100%;
	margin-top: var(--space-md);
	padding: 0 var(--space-md);
}

.mb-news-side__cta .mb-news-side__tel {
	font-size: var(--font-size-lg);
}

.mb-news-side__cta .mb-news-side__tel svg {
	flex: none;
}

.mb-news-side__cta .mb-news-side__hours {
	margin-top: var(--space-xs);
}

@media (min-width: 1024px) {
	.mb-news-detail__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 256px;
		column-gap: var(--space-5xl);
		align-items: start;
	}

	.mb-news-detail__inner {
		max-width: none;
	}

	.mb-news-side {
		margin-top: var(--space-lg);
	}

	.mb-news-side__cta {
		display: block;
	}
}

/* ── CT 無料相談・お問い合わせ（2026-11-06 P10）── 9.4・9.5・9.23〜9.25・W46〜W48（ご相談の帯は置かない）
   CT02＝薄いグレーの面・SP は番号の塗りのボタン（64 高・24）／PC（1024 から）は 40 の番号の文字のリンク（S08 と同じ）
   CT03＝SP は項目名 → 入力欄の縦／PC は項目名 240｜入力欄・幅 880 まで。送信しない（D4） */
.mb-ct-tel {
	padding: var(--space-xl) 0 var(--space-2xl);
}

.mb-ct-tel p {
	margin: var(--space-sm) 0 0;
}

.mb-ct-tel__btn {
	display: flex;
	width: 100%;
	height: var(--button-h-consult);
	font-size: var(--font-size-2xl);
}

.mb-ct-tel__btn svg {
	flex: none;
}

.mb-ct-tel__big {
	display: none;
}

.mb-ct-tel__hours > span {
	display: block;
}

.mb-ct-form {
	padding: var(--space-xl) 0 var(--space-3xl);
}

.mb-ct-form__inner {
	max-width: 880px;
}

/* 9.23 見本の注記（太い枠） */
.mb-samplenote {
	margin: 0 0 var(--space-lg);
	padding: var(--space-sm) var(--space-md);
	border: 2px solid var(--color-line-strong);
	background: var(--color-bg);
}

/* 9.24 フォーム＝項目ごとに上に線（概要の表と同じ線）・項目の上下 16 */
.mb-form {
	border-bottom: 1px solid var(--color-line);
}

.mb-field {
	padding: var(--space-md) 0;
	border-top: 1px solid var(--color-line);
}

.mb-field__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-xs);
}

.mb-field__label {
	font-weight: 700;
	line-height: var(--line-height-snug);
}

.mb-req {
	padding: 2px var(--space-xs);
	border: 1px solid var(--color-text);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: var(--line-height-snug);
}

.mb-field__hint {
	margin: 0 0 var(--space-xs);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
}

.mb-input {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 var(--space-sm);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--shape-radius);
	background: var(--color-panel);
	color: var(--color-text);
	font: inherit;
	font-size: var(--font-size-sm);
}

.mb-input--area {
	height: 144px;
	padding: var(--space-sm);
	resize: vertical;
}

.mb-select {
	appearance: none;
	padding-right: var(--space-2xl);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231F2833' stroke-width='2'/%3E%3C/svg%3E");
	background-position: right var(--space-sm) center;
	background-repeat: no-repeat;
}

.mb-input:focus,
.mb-input:focus-visible {
	border-color: var(--color-accent);
	outline: 2px solid var(--color-accent);   /* 2px の枠＝線の内側に重ねる（大きさを変えない） */
	outline-offset: -2px;
}

/* チェックと丸＝20 四方・2px・選ぶと accent で塗り（白い ✓／白い点）。1つ 44 高 */
.mb-checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-md);
}

.mb-checks--row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-xl);
}

.mb-check {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 44px;
	cursor: pointer;
}

.mb-check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--color-line-strong);
	border-radius: 2px;
	background: var(--color-panel);
	appearance: none;
	cursor: pointer;
}

.mb-check--radio input {
	border-radius: 50%;
}

.mb-check input:checked {
	border-color: var(--color-accent);
	background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23FFFEFB' stroke-width='2'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
}

.mb-check--radio input:checked {
	background: var(--color-panel);
	box-shadow: inset 0 0 0 4px var(--color-panel), inset 0 0 0 10px var(--color-accent);
}

.mb-check input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.mb-check a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* 写真を選ぶ＝本物の input を透明にして線のボタンに重ねる（押すと端末の写真選び・フォーカスの線はボタンに出す） */
.mb-file {
	position: relative;
	display: inline-block;
}

.mb-file__input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.mb-file:has(.mb-file__input:focus-visible) .mb-file__btn {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.mb-form__send {
	padding: var(--space-lg) 0;
	border-top: 1px solid var(--color-line);
}

.mb-form__btn {
	display: flex;
	width: 100%;
	border: 0;
	font-family: inherit;
	cursor: pointer;
}

.mb-form__note {
	margin: var(--space-xs) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

/* 9.25 届くメールの見本＝点線の枠 */
.mb-mailsample {
	margin-top: var(--space-xl);
	padding: var(--space-md);
	border: 1px dashed var(--color-line-strong);
	background: var(--color-bg);
}

.mb-mailsample__title {
	margin: 0 0 var(--space-xs);
	font-weight: 700;
}

.mb-mailsample__mail {
	margin: 0;
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
}

.mb-mailsample__mail dt {
	margin-top: var(--space-xs);
	color: var(--color-text-muted);
}

.mb-mailsample__mail dd {
	margin: 0;
	font-size: var(--font-size-sm);
}

@media (min-width: 1024px) {
	.mb-ct-tel {
		padding: var(--space-4xl) 0 var(--space-5xl);
	}

	.mb-ct-tel__btn {
		display: none;
	}

	.mb-ct-tel__big {
		display: inline-block;
		color: var(--color-text);
		font-size: var(--font-size-6xl);
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
	}

	.mb-ct-tel__hours > span {
		display: inline;
		margin-right: var(--space-md);
	}

	.mb-ct-form {
		padding: var(--space-4xl) 0 72px;
	}

	.mb-field {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}

	.mb-field__head {
		margin: 12px 0 0;
	}

	.mb-checks {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-lg);
	}

	.mb-form__send {
		padding-left: 240px;
	}

	.mb-form__btn {
		display: inline-flex;
		width: auto;
		min-width: 240px;
	}
}

@media (hover: hover) {
	.mb-ct-tel__big:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}
}

/* ── PV 個人情報の取り扱い（2026-11-06 P10）── 9.23 見本の注記（太い枠）→ 前置き → H2＋文 ×5 → お問い合わせ先の表。幅 720 まで・ご相談の帯なし（W46） */
.mb-pv {
	padding: var(--space-xs) 0 var(--space-3xl);
}

.mb-pv__inner {
	max-width: 720px;
}

.mb-pv p {
	margin: var(--space-sm) 0 0;
}

.mb-pv .mb-samplenote {
	margin: 0;
}

.mb-pv__lead {
	margin-top: var(--space-lg);
}

/* 長い文＝文節の切れ目で折る（読点ごとの区切りは短い行が残った・Safari は未対応＝P11 の実機で） */
.mb-pv__lead,
.mb-pv__text {
	word-break: auto-phrase;
}

.mb-pv__sec {
	margin-top: var(--space-xl);
}

.mb-pv__sec .mb-h2 {
	margin-bottom: 0;
}

.mb-pv__contact {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--space-md);
	margin: var(--space-md) 0 0;
	line-height: var(--line-height-snug);
}

.mb-pv__contact dt,
.mb-pv__contact dd {
	margin: 0;
	padding: var(--space-2xs) 0;
}

.mb-pv__contact dt {
	font-weight: 700;
}

.mb-pv__contact a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

@media (min-width: 1024px) {
	.mb-pv {
		padding-bottom: var(--space-6xl);
	}

	.mb-pv__sec {
		margin-top: var(--space-2xl);
	}
}

/* ── P11 押せる高さ（2026-11-06・P10 からの持ち越し）── 単独の文字のリンクとパンくず・社名を 44 以上に（DESIGN §9.0）
   見た目は変えない＝上下に padding を足して同じだけ margin を負に（文字の位置・行の高さは変わらない）。文の中のリンクは対象外（WCAG 2.5.8 の例外） */
.mb-header__name,
.mb-breadcrumb a,
.mb-work__link a,
.mb-route__more a,
.mb-news-top__all a,
.mb-wd-price__more a,
.mb-pager__all,
.mb-news-detail__back a,
.mb-link a {
	display: inline-block;
	padding-block: 12px;
	margin-block: -12px;
}

/* ── 404 ページが見つかりません（2026-11-06 P11）── 施工事例・お知らせの詳細と同じ形（帯なし）・H1 24／32 */
.mb-notfound {
	padding: var(--space-md) 0 var(--space-7xl);
}

.mb-notfound h1 {
	margin: var(--space-lg) 0 0;
	font-size: var(--font-size-2xl);
}

.mb-notfound p {
	margin: var(--space-md) 0 0;
}

.mb-notfound .mb-link {
	margin-top: var(--space-xl);
}

@media (min-width: 1024px) {
	.mb-notfound {
		padding-top: 20px;
	}

	.mb-notfound h1 {
		font-size: var(--font-size-4xl);
	}
}

/* ── P11（2026-11-06）長い語・URL ── 社長が入力する所（お知らせの題と本文・カードとサイドバーの題・施工事例の題と工事の内容）
   区切れない長い英字や URL が幅を超えた（768 でページが横にはみ出した）＝必要なときだけどこでも折る（日本語の折れ方は変わらない） */
.mb-news-detail__body,
.mb-news-detail h1,
.mb-news__ttl,
.mb-news-side__ttl,
.mb-wd-head h1,
.mb-wd-body__text,
.mb-work-card__title {
	overflow-wrap: anywhere;
}