/**
 * マッハ塗装 ブランドテーマ：トップページ（マッハ塗装ポータルの入口）.
 *
 * 375px を基準に書き、768px・960px 以上で広げる。
 * 背景のリズム：FV（赤）→ すぐ使える導線（濃い赤）→ マッハ塗装とは（薄いグレー・定義と一次情報）→ 迷いやすいこと（白）→
 * 大切にしていること（赤の写真背景）→
 * 施工事例（白）→ 見積り（薄いグレー）→ 塗装サービス（白）→ 施工への考え方（青）→ 店舗（白）→
 * よくある質問（薄い青）→ 案内ボタン（赤）→ フッター（濃い赤）。
 * セクションごとに見せ方を変える（写真＋コピー／機能ボタン／チェックリスト／帯／比較写真／チェックシート／青い面／地方別）。
 * 色・余白の変数は site-shell.css、ボタン・施工事例の部品は content.css で定義している。
 */

/* ------------------------------------------------------------------
 * 共通：セクション見出し（中央・太字・下に短いブランド線）
 * ------------------------------------------------------------------ */
.mt-section-title {
	margin: 0 0 24px;
	color: var(--mt-color-text);
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	font-weight: 900;
	line-height: 1.35;
	text-align: center;
	letter-spacing: 0.02em;
	word-break: auto-phrase;
}

/* 見出しの下線（色付きの短い線）は使わない。文字の大きさ・太さ・余白で階層を示す（2026-10-03） */

/* 赤・青の面の上では白文字 */
.mt-section-title--on-red,
.mt-section-title--on-blue {
	color: #fff;
}

.mt-concerns__inner,
.mt-about__inner,
.mt-home-works__inner,
.mt-price__inner,
.mt-services__inner,
.mt-stores__inner,
.mt-home-faq__inner {
	box-sizing: border-box;
	max-width: var(--mt-content-width);
	margin: 0 auto;
	padding: var(--mt-section-space) var(--mt-gutter);
}

/* ------------------------------------------------------------------
 * 1. ファーストビュー：ブランド赤の面＋大きな実写
 * ------------------------------------------------------------------ */
.mt-hero {
	background: var(--mt-color-red);
	color: #fff;
}

.mt-hero__inner {
	display: grid;
}

.mt-hero__body {
	box-sizing: border-box;
	padding: 28px var(--mt-gutter) 32px;
}

.mt-hero__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 4px 12px;
	background: var(--mt-color-yellow);
	color: var(--mt-color-text);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.6;
}

.mt-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: 0.02em;
	word-break: auto-phrase;
}

.mt-hero__lead {
	max-width: 34em;
	margin: 16px 0 0;
	color: #fff;
	font-size: 1rem;
	line-height: 1.85;
}

/* 一目で伝える要点（サイトで確認できる事実）：黄色のチェック */
.mt-hero__points {
	display: grid;
	gap: 6px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.mt-hero__points li {
	position: relative;
	padding-left: 26px;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
}

.mt-hero__points li::before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 2px;
	width: 7px;
	height: 12px;
	border: solid var(--mt-color-yellow);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* ボタン：主（店舗検索・黄色）と補助（施工事例・白枠）。スマホは縦に並べて押しやすくする */
.mt-hero__cta {
	margin-top: 24px;
}

.mt-hero__buttons {
	display: grid;
	gap: 10px;
}

.mt-hero__cta-note {
	margin: 10px 0 0;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
}

.mt-hero__media {
	margin: 0;
	background: var(--mt-color-red-dark);
}

.mt-hero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ------------------------------------------------------------------
 * 1-2. ファーストビュー（FV バナー版）：完成デザインのバナーを主役に、切り取らずに全体を見せる。
 * バナー → H1・説明文・価格の補足（小さめ）→ ボタン 2 つ。文字・ボタンはバナーに重ねない。
 * バナー自体が赤・黄・白の強い表現なので、周りは白でシンプルに（赤・黄の面や装飾を足さない）。
 * ------------------------------------------------------------------ */
.mt-hero-banner {
	background: #fff;
}

.mt-hero-banner__media {
	max-width: var(--mt-content-width);
	margin: 0 auto;
}

.mt-hero-banner__media picture,
.mt-hero-banner__img {
	display: block;
	width: 100%;
	height: auto;
}

/* バナーのリンク（管理画面でリンク先URLを設定したスライドだけ。2026-10-04）。見た目は変えず、押せることはカーソルだけで示す。
   キーボードで移動したときだけ、画像の内側に枠を出す */
.mt-hero-banner__link {
	display: block;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mt-hero-banner__link:focus {
	outline: none;
}

.mt-hero-banner__link:focus-visible {
	outline: 3px solid var(--mt-color-text);
	outline-offset: -3px;
}

.mt-hero-banner__body {
	box-sizing: border-box;
	max-width: calc(880px + var(--mt-gutter) * 2);
	margin: 0 auto;
	padding: 14px var(--mt-gutter) 18px;
	text-align: center;
}

.mt-hero-banner__title {
	margin: 0;
	color: var(--mt-color-text);
	font-size: 1.0625rem;
	font-weight: 900;
	line-height: 1.5;
	word-break: auto-phrase;
}

.mt-hero-banner__lead {
	margin: 4px 0 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	word-break: auto-phrase;
}

.mt-hero-banner__note {
	margin: 4px 0 0;
	color: var(--mt-color-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
	word-break: auto-phrase;
}

/* スマホ：ボタンは縦 2 段（文字を折り返さない） */
.mt-hero-banner__buttons {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.mt-hero-banner__buttons .mt-button {
	width: 100%;
	white-space: nowrap;
}

/* スマホでは縦長バナーのあとにすぐボタンへ届くよう、通常の高さ（48px）にする */
@media (max-width: 599px) {
	.mt-hero-banner__buttons .mt-button--large {
		min-height: 48px;
		padding: 10px 24px;
		font-size: 1rem;
	}
}

@media (min-width: 600px) {
	/* 幅に余裕があれば横並び・中央寄せ */
	.mt-hero-banner__buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
	}

	.mt-hero-banner__buttons .mt-button {
		width: auto;
		min-width: 15em;
	}
}

@media (min-width: 960px) {
	.mt-hero-banner__body {
		padding-top: 18px;
		padding-bottom: 24px;
	}

	.mt-hero-banner__title {
		font-size: 1.25rem;
	}
}

/* ------------------------------------------------------------------
 * 1-3. FV スライダー（公開中のスライドが 2 枚以上のとき。.mt-hero-slider が付く。2026-10-03 トラック型に変更）
 * 切り替えるのは画像だけ。H1・説明文・ボタンは下に固定。
 * - 横に並べたトラックを左右に動かす。中央に表示中のスライド（不透明）、左右に前後のスライドを少しだけ見せる
 *   （半透明・わずかに縮小）。見た瞬間に「横に切り替わる」と分かるようにする。
 * - 中央のスライド幅：1023px 以下は 82%、1024px 以上は min(84%, 1200px)。左右に見える幅はその残り（前後は不透明度 0.4・縮小 0.97）。
 * - 全スライドの枠は 1 枚目と同じ縦横比（--mt-hero-ratio-pc / -mo。テンプレートが 1 枚目の実寸から出力）。
 *   比率が違う画像は枠の中に全体を表示する（切り取らない）。切り替えても高さは変わらない。
 * - 矢印は画像の左右（左右に見えている前後スライドの上）。下はドットだけ。色は白・黒の半透明、現在位置だけブランドの赤。
 * - 動きを減らす設定の端末では、動きの効果を付けない（自動切替も JS 側で止める）。
 * ------------------------------------------------------------------ */
.mt-hero-banner__media.mt-hero-slider {
	--mt-slide-w: 82%;
	--mt-slide-gap: 6px;
	position: relative;
	max-width: none;
	padding-top: 8px;
}

.mt-hero-slider__viewport {
	overflow: hidden;
}

.mt-hero-slider .mt-hero-slider__track {
	display: flex;
	gap: var(--mt-slide-gap);
	transform: translateX(calc((100% - var(--mt-slide-w)) / 2 - var(--mt-slide-i, 2) * (var(--mt-slide-w) + var(--mt-slide-gap))));
	transition: transform 0.55s ease;
	touch-action: pan-y;
}

.mt-hero-slider .mt-hero-slider__slide {
	flex: 0 0 var(--mt-slide-w);
	min-width: 0;
	opacity: 0.4;
	transform: scale(0.97);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.mt-hero-slider .mt-hero-slider__slide.is-active {
	opacity: 1;
	transform: none;
}

.mt-hero-slider .mt-hero-slider__slide picture {
	display: block;
	aspect-ratio: var(--mt-hero-ratio-pc, 1896 / 829);
}

.mt-hero-slider .mt-hero-slider__slide .mt-hero-banner__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: object-position 0.55s ease;
}

/* 比率が 1 枚目と違う画像は枠の中で左右に余白ができるため、左右に見えている前後のスライドは
   中央側に画像を寄せる（余白ではなく画像そのものが見えるように）。中央に来ると中央寄せに戻る。 */
.mt-hero-slider .mt-hero-slider__slide.is-next .mt-hero-banner__img {
	object-position: left center;
}

.mt-hero-slider .mt-hero-slider__slide.is-prev .mt-hero-banner__img {
	object-position: right center;
}

/* 押せるのは中央に表示中のスライドだけ。左右に見えている前後のスライドのリンクはクリックを受けない（矢印・スワイプを優先） */
.mt-hero-slider .mt-hero-slider__slide:not(.is-active) .mt-hero-banner__link {
	pointer-events: none;
	cursor: default;
}

/* ループの端から反対側の同じスライドへ移るときは、動きを付けずに一瞬で移す */
.mt-hero-slider.is-jumping .mt-hero-slider__track,
.mt-hero-slider.is-jumping .mt-hero-slider__slide,
.mt-hero-slider.is-jumping .mt-hero-banner__img {
	transition: none;
}

.mt-hero-banner__img {
	-webkit-user-drag: none;
	user-select: none;
}

@media (prefers-reduced-motion: reduce) {
	.mt-hero-slider .mt-hero-slider__track,
	.mt-hero-slider .mt-hero-slider__slide,
	.mt-hero-slider .mt-hero-banner__img {
		transition: none;
	}
}

/* 左右の矢印：前後スライドが見えている部分の中央（スマホは端）。タップできる範囲は 44px 四方 */
.mt-hero-slider__arrow {
	position: absolute;
	/* 画像の上下中央（上の余白 8px と下のドット 32px の差を引く） */
	top: calc(50% - 12px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	transform: translateY(-50%);
	cursor: pointer;
}

.mt-hero-slider__arrow span {
	position: relative;
	display: block;
	width: 38px;
	height: 38px;
	background: rgba(17, 17, 17, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
}

/* 矢印の形（く・＞） */
.mt-hero-slider__arrow span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border: solid #fff;
	border-width: 0 0 3px 3px;
	transform: translate(-30%, -50%) rotate(45deg);
}

.mt-hero-slider__next span::before {
	border-width: 3px 3px 0 0;
	transform: translate(-70%, -50%) rotate(45deg);
}

.mt-hero-slider__arrow:hover span {
	background: rgba(17, 17, 17, 0.75);
}

.mt-hero-slider__prev {
	left: 0;
}

.mt-hero-slider__next {
	right: 0;
}

.mt-hero-slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
}

/* タップできる範囲は 28×32px、見た目は 10px の丸 */
.mt-hero-slider__dot {
	position: relative;
	width: 28px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.mt-hero-slider__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	background: #c4c4c4;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.mt-hero-slider__dot[aria-current="true"]::before {
	background: var(--mt-color-red);
}

.mt-hero-slider button:focus-visible {
	outline: 2px solid var(--mt-color-text);
	outline-offset: 2px;
}

@media (max-width: 599px) {
	.mt-hero-slider .mt-hero-slider__slide picture {
		aspect-ratio: var(--mt-hero-ratio-mo, 1122 / 1402);
	}
}

@media (min-width: 600px) {
	.mt-hero-banner__media.mt-hero-slider {
		--mt-slide-w: 82%;
		--mt-slide-gap: 12px;
		padding-top: 12px;
	}

	/* 左右に見えている前後スライドの中央に矢印を置く（中央のスライドには重ねない） */
	.mt-hero-slider__prev {
		left: max(0px, calc((100% - var(--mt-slide-w)) / 4 - 22px));
	}

	.mt-hero-slider__next {
		right: max(0px, calc((100% - var(--mt-slide-w)) / 4 - 22px));
	}

	.mt-hero-slider__arrow span {
		width: 44px;
		height: 44px;
	}
}

@media (min-width: 1024px) {
	.mt-hero-banner__media.mt-hero-slider {
		--mt-slide-w: min(84%, 1200px);
	}
}

/* ------------------------------------------------------------------
 * 2. すぐ使える導線（FV の直下）：押せる機能ボタンとして見せる。スマホは 2×2、PC は 4 列
 * ------------------------------------------------------------------ */
.mt-quicknav {
	background: var(--mt-color-red-dark);
}

.mt-quicknav__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	box-sizing: border-box;
	max-width: var(--mt-content-width);
	margin: 0 auto;
	padding: 12px var(--mt-gutter) 16px;
	list-style: none;
}

/* カードは上揃え（タイトル行・説明の上端をそろえる。矢印は右下に固定）。同じ行のカードは li の高さに合わせて同じ高さになる */
.mt-quicknav__link {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: start;
	box-sizing: border-box;
	height: 100%;
	min-height: 84px;
	padding: 12px 10px 12px 12px;
	background: #fff;
	border-radius: 2px;
	/* 色付きの下線は使わない。赤い面の上で押せる面だと分かる程度の、ごく弱い影だけ */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	color: var(--mt-color-text);
	text-decoration: none;
}

/* 右端の矢印（押せることを示す）。文字は読み上げない */
.mt-quicknav__link::after {
	content: "\203A";
	position: absolute;
	right: 8px;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--mt-color-red);
	border-radius: 2px;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1;
}

.mt-quicknav__label {
	color: var(--mt-color-red);
	font-size: 1.0625rem;
	font-weight: 900;
	line-height: 1.4;
	word-break: auto-phrase;
}

.mt-quicknav__note {
	align-self: start;
	margin-top: 4px;
	padding-right: 24px;
	word-break: auto-phrase;
	color: var(--mt-color-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* 括弧書き（税込価格など）は、600px 以上では途中で改行しない（入らないときは次の行へまとめて送る） */
@media (min-width: 600px) {
	.mt-quicknav__note-sub {
		display: inline-block;
	}
}

.mt-quicknav__link:hover .mt-quicknav__label {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mt-quicknav a:focus-visible {
	outline-color: #fff;
}

/* ------------------------------------------------------------------
 * 2-2. マッハ塗装とは：定義文と一次情報（1 つの <dl>）。FV の直後に、事実を短く。
 * 直前のすぐ使える導線がカード（白い枠）なので、ここはカードを並べない（DESIGN-DIRECTION 11）。
 * - 価格 2 項目：赤い縦線の枠で強く見せる。入口価格は同じ枠に「税別・税込・外壁部分のみ・足場等別」を並べる。
 * - その他 5 項目：罫線で区切った概要表（仕様表）。項目名・値・補足の順に読む。
 * 並び順（HTML・読み上げ順）は価格 → 状態確認 → 塗料 → 施工事例 → 店舗 → 本部のまま、見た目だけを変える。
 * ------------------------------------------------------------------ */
.mt-facts {
	background: var(--mt-color-bg-soft);
	border-bottom: 1px solid var(--mt-color-border);
}

.mt-facts__inner {
	display: grid;
	gap: 12px;
	box-sizing: border-box;
	max-width: var(--mt-content-width);
	margin: 0 auto;
	padding: 20px var(--mt-gutter) 24px;
}

.mt-facts__title {
	margin: 0 0 8px;
	color: var(--mt-color-text);
	font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
	font-weight: 900;
	line-height: 1.4;
}

.mt-facts__definition {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.mt-facts__list {
	display: grid;
	gap: 0;
	margin: 0;
}

.mt-facts__item {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	column-gap: 10px;
	align-items: baseline;
}

.mt-facts__label {
	color: var(--mt-color-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.5;
}

.mt-facts__value {
	margin: 0;
	line-height: 1.4;
}

.mt-facts__value strong {
	color: var(--mt-color-text);
	font-size: 1.0625rem;
	font-weight: 900;
}

.mt-facts__unit {
	margin-left: 2px;
	font-size: 0.8125rem;
	font-weight: 700;
}

.mt-facts__note {
	grid-column: 1 / -1;
	margin: 2px 0 0;
	color: var(--mt-color-muted);
	font-size: 0.8125rem;
	line-height: 1.7;
}

/* 価格：白い面と 1px のグレーの枠。強さは赤い金額の数字だけで出す（色付きの縦線は使わない） */
.mt-facts__item--price {
	grid-template-columns: 8em minmax(0, 1fr);
	margin-bottom: 6px;
	padding: 10px 14px 12px;
	background: #fff;
	border: 1px solid var(--mt-color-border);
}

.mt-facts__item--price .mt-facts__value strong {
	color: var(--mt-color-red);
	font-size: 1.25rem;
}

/* その他：罫線で区切った概要表。面や枠は付けない */
.mt-facts__item--spec {
	padding: 6px 0 7px;
	border-top: 1px solid var(--mt-color-border);
}

.mt-facts__item--spec:last-child {
	border-bottom: 1px solid var(--mt-color-border);
}

/* 価格の枠と概要表の間をあける */
.mt-facts__item--price + .mt-facts__item--spec {
	margin-top: 4px;
}

/* 文中の小さなリンク。行の高さは変えずに、上下の余白でタップできる範囲を 44px 程度にする */
.mt-facts__link {
	padding: 12px 0;
	color: var(--mt-color-blue);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	/* 「外壁塗装の価格と含まれる工事」などのページ名を途中で折り返さない */
	white-space: nowrap;
}

.mt-facts__link::after {
	content: "›";
	margin-left: 2px;
	text-decoration: none;
}

/* 迷いやすいこと：答えるページへの近道（ページ名のリンク） */
.mt-concerns__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-left: 8px;
	color: var(--mt-color-blue);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	vertical-align: middle;
}

.mt-concerns__link::after {
	content: "›";
	margin-left: 2px;
}

@media (min-width: 768px) {
	/* 価格 2 項目は横に並べ、概要表は全幅 */
	.mt-facts__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 8px;
	}

	.mt-facts__item--price {
		display: block;
	}

	.mt-facts__item--price .mt-facts__label {
		display: block;
		margin-bottom: 2px;
	}

	/* 概要表：項目名｜値｜補足 を 1 行に */
	.mt-facts__item--spec {
		grid-column: 1 / -1;
		/* 値の列は固定幅（「株式会社TSK総研」が収まる幅）にして、補足の開始位置をそろえる */
		grid-template-columns: 8em 10em minmax(0, 1fr);
		column-gap: 16px;
	}

	.mt-facts__item--spec .mt-facts__note {
		grid-column: 3;
		margin: 0;
	}
}

@media (min-width: 960px) {
	.mt-facts__definition {
		font-size: 1rem;
		line-height: 1.85;
	}

	.mt-facts__inner {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: 32px;
		align-items: start;
		padding-top: 36px;
		padding-bottom: 36px;
	}
}

/* ------------------------------------------------------------------
 * 2-3. マッハ塗装とは（土台画像あり：.mt-facts--visual、2026-10-04）
 * Core 設定「紹介セクション背景」の土台画像（見出し・人物・空の枠だけ）を背景に、本文・価格・リンクを HTML で重ねる。
 * 完成参考画像（PC・スマホ）に寄せ、文字は次の大きさを下回らないようにする（clamp）。
 *   PC：本文・補足 15px 以上。スマホ：補足 14px・ラベル 15px 前後（375px）。価格はいちばん大きく赤。
 * 画像の上の位置は、画像の実寸の座標（PC 2172×724・スマホ 948×1659 の px）× --u で指定する。
 * --u は「表示幅 ÷ 画像の幅」（cqw）。文字の大きさも同じ比率で伸び縮みし、最小・最大だけを clamp で決める。
 * - 767px 以下：見出し部分の画像（上から 490px）→ 定義文 → 価格の枠の画像（490〜1335px）→ 状態確認・塗料のカード。
 * - 768〜1279px：左に見出し部分の画像と定義文、右に価格の枠とカード（画面の幅を 2 列で使う）。
 * - 1280px 以上：PC 用画像 1 枚。左の空白に定義文、右の枠に価格・状態確認・塗料（完成参考画像と同じ配置）。
 * 1279px 以下の状態確認・塗料は、画像の枠が低すぎて 15px の文字が入らないため、同じ見た目のカードを CSS で描く。
 * ------------------------------------------------------------------ */
.mt-facts--visual {
	background: var(--mt-color-blue-soft);
	border-bottom: 0;
}

.mt-facts--visual .mt-facts__stage {
	position: relative;
	margin: 0 auto;
	/* スマホ用画像の、見出しと枠の間の薄い青に合わせる */
	background: #cdecfe;
	overflow: hidden;
}

.mt-facts--visual .mt-facts__visual {
	position: relative;
	/* 見出し部分：画像の上から 490px まで */
	aspect-ratio: 948 / 490;
	overflow: hidden;
}

.mt-facts--visual .mt-facts__img {
	display: block;
	width: 100%;
	height: auto;
}

.mt-facts--visual .mt-facts__definition {
	margin: 0 3.5% 2.4%;
	padding: 14px 16px;
	color: var(--mt-color-text);
	font-size: 0.9375rem;
	line-height: 1.8;
	background: #fff;
	border: 1px solid #bfe3fb;
	border-radius: 10px;
}

/* 価格の枠の部分：画像の 490px から 1335px まで。--u はこの枠の幅が基準 */
.mt-facts--visual .mt-facts__board {
	--u: calc(100cqw / 948);
	container-type: inline-size;
	position: relative;
}

.mt-facts--visual .mt-facts__visual--board {
	aspect-ratio: 948 / 845;
}

.mt-facts--visual .mt-facts__visual--board .mt-facts__img {
	position: absolute;
	top: calc(-490 * var(--u));
	left: 0;
}

.mt-facts--visual .mt-facts__list {
	display: block;
	margin: 0;
	padding: 0;
}

/* 状態確認・塗料のカードは、価格の枠の下に続けて並べる（画像の下の薄い青に合わせる） */
.mt-facts--visual .mt-facts__list--info {
	padding: 0 3.5% 3.5%;
	background: #eaf8fe;
}

.mt-facts--visual .mt-facts__label,
.mt-facts--visual .mt-facts__value,
.mt-facts--visual .mt-facts__note {
	margin: 0;
}

.mt-facts--visual .mt-facts__label {
	color: var(--mt-color-text);
	font-weight: 700;
	font-feature-settings: "palt";
}

.mt-facts--visual .mt-facts__value strong {
	color: var(--mt-color-red);
	font-weight: 900;
}

.mt-facts--visual .mt-facts__unit {
	color: var(--mt-color-text);
	font-weight: 700;
}

/* 文節の途中（「状/態確認」など）で折り返さない。未対応のブラウザは通常の折り返し。
 * 価格の枠の補足・リンクは行数が増えると枠の帯に重なるため対象外 */
.mt-facts--visual .mt-facts__definition,
.mt-facts--visual .mt-facts__item--inspection .mt-facts__note-text,
.mt-facts--visual .mt-facts__item--paint .mt-facts__note-text {
	word-break: auto-phrase;
}

.mt-facts--visual .mt-facts__note-text {
	color: #444;
	line-break: strict;
}

.mt-facts--visual .mt-facts__link {
	box-sizing: border-box;
	padding: 0;
	color: var(--mt-color-blue);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: normal;
}

.mt-facts--visual .mt-facts__link::after {
	content: "›";
	margin-left: 0.3em;
	text-decoration: none;
}

.mt-facts--visual .mt-facts__link:focus-visible {
	outline: 2px solid var(--mt-color-blue);
	outline-offset: 2px;
}

/* --- 価格の 2 枠：スマホ用画像の枠に重ねる（座標は枠の左上から） --- */
.mt-facts--visual .mt-facts__item--exterior_price,
.mt-facts--visual .mt-facts__item--total_price {
	position: absolute;
	left: calc(33 * var(--u));
	width: calc(882 * var(--u));
}

.mt-facts--visual .mt-facts__item--exterior_price {
	top: calc(7 * var(--u));
	height: calc(425 * var(--u));
}

.mt-facts--visual .mt-facts__item--total_price {
	top: calc(455 * var(--u));
	height: calc(380 * var(--u));
}

.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__label,
.mt-facts--visual .mt-facts__item--total_price .mt-facts__label,
.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__value,
.mt-facts--visual .mt-facts__item--total_price .mt-facts__value,
.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__note-text,
.mt-facts--visual .mt-facts__item--total_price .mt-facts__note-text,
.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__link {
	position: absolute;
}

/* アイコンの右に項目名と金額 */
.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__label,
.mt-facts--visual .mt-facts__item--total_price .mt-facts__label {
	top: calc(32 * var(--u));
	left: calc(177 * var(--u));
	font-size: clamp(14.4px, calc(37.9 * var(--u)), 19px);
	line-height: 1.25;
	white-space: nowrap;
}

.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__value,
.mt-facts--visual .mt-facts__item--total_price .mt-facts__value {
	top: calc(80 * var(--u));
	left: calc(177 * var(--u));
	line-height: 1.05;
	white-space: nowrap;
}

.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__value strong,
.mt-facts--visual .mt-facts__item--total_price .mt-facts__value strong {
	font-size: clamp(25px, calc(65.7 * var(--u)), 40px);
	letter-spacing: -0.01em;
}

.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__unit,
.mt-facts--visual .mt-facts__item--total_price .mt-facts__unit {
	margin-left: 0.2em;
	font-size: clamp(13.5px, calc(35.4 * var(--u)), 17px);
}

/* 区切り線の下に補足 */
.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__note-text,
.mt-facts--visual .mt-facts__item--total_price .mt-facts__note-text {
	top: calc(200 * var(--u));
	left: calc(35 * var(--u));
	width: calc(812 * var(--u));
	font-size: clamp(13.5px, calc(35.4 * var(--u)), 18px);
	line-height: 1.5;
}

/* 外壁塗装工事：枠の下の薄い青の帯がリンク */
.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__link {
	display: flex;
	align-items: center;
	justify-content: center;
	top: calc(320 * var(--u));
	left: calc(32 * var(--u));
	width: calc(818 * var(--u));
	height: calc(77 * var(--u));
	font-size: clamp(13.5px, calc(35.4 * var(--u)), 18px);
	line-height: 1.3;
}

/* --- 状態確認・塗料（1279px 以下）：完成参考画像と同じ見た目のカード --- */
.mt-facts--visual .mt-facts__item--inspection,
.mt-facts--visual .mt-facts__item--paint {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	align-content: center;
	column-gap: 8px;
	position: relative;
	box-sizing: border-box;
	min-height: 76px;
	margin: 0 0 10px;
	padding: 10px 122px 10px 66px;
	background: #fff;
	border: 1px solid #bfe3fb;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(27, 79, 138, 0.06);
}

.mt-facts--visual .mt-facts__item--paint {
	margin-bottom: 0;
}

.mt-facts--visual .mt-facts__item--inspection {
	background: linear-gradient(90deg, #f1fbf3, #fff 45%);
	border-color: #c8eed9;
}

/* アイコン（画像の枠と同じ、丸の中の虫めがね・塗料缶） */
.mt-facts--visual .mt-facts__item--inspection::before,
.mt-facts--visual .mt-facts__item--paint::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 26px 26px;
	transform: translateY(-50%);
}

.mt-facts--visual .mt-facts__item--inspection::before {
	background-color: #e3f6e6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7d1e' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='14' cy='10' r='6.5'/%3E%3Cpath d='M9.4 14.6 3.5 20.5'/%3E%3C/svg%3E");
}

.mt-facts--visual .mt-facts__item--paint::before {
	background-color: #e3f0fd;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b55c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='11' cy='6' rx='6.5' ry='2.5'/%3E%3Cpath d='M4.5 6v12c0 1.4 2.9 2.5 6.5 2.5s6.5-1.1 6.5-2.5V6'/%3E%3Cpath d='M17.5 9.5c2.2.3 3 1.6 3 3.2 0 1.8-1.2 3.2-3 3.3'/%3E%3Cpath d='M8.5 13.5l2 2 3.5-4'/%3E%3C/svg%3E");
}

.mt-facts--visual .mt-facts__item--inspection .mt-facts__label,
.mt-facts--visual .mt-facts__item--paint .mt-facts__label {
	font-size: 0.9375rem;
	line-height: 1.4;
}

.mt-facts--visual .mt-facts__item--inspection .mt-facts__value,
.mt-facts--visual .mt-facts__item--paint .mt-facts__value {
	line-height: 1.3;
}

.mt-facts--visual .mt-facts__item--inspection .mt-facts__value strong,
.mt-facts--visual .mt-facts__item--paint .mt-facts__value strong {
	font-size: 1.25rem;
}

.mt-facts--visual .mt-facts__item--inspection .mt-facts__note,
.mt-facts--visual .mt-facts__item--paint .mt-facts__note {
	flex-basis: 100%;
	margin-top: 2px;
}

.mt-facts--visual .mt-facts__item--inspection .mt-facts__note-text,
.mt-facts--visual .mt-facts__item--paint .mt-facts__note-text {
	font-size: 0.875rem;
	line-height: 1.5;
}

/* 右側の区切りから右がリンク（2 行まで。矢印付き） */
.mt-facts--visual .mt-facts__item--inspection .mt-facts__link,
.mt-facts--visual .mt-facts__item--paint .mt-facts__link {
	display: flex;
	align-items: center;
	position: absolute;
	top: 10px;
	right: 0;
	bottom: 10px;
	width: 116px;
	padding: 0 24px 0 12px;
	font-size: 0.875rem;
	line-height: 1.4;
	border-left: 1px solid #d5dde8;
}

.mt-facts--visual .mt-facts__item--inspection .mt-facts__link::after,
.mt-facts--visual .mt-facts__item--paint .mt-facts__link::after {
	position: absolute;
	top: 50%;
	right: 12px;
	margin: 0;
	transform: translateY(-50%);
	font-size: 1.25rem;
	line-height: 1;
}

/* 短い定義文はスマホ（767px 以下）だけで使う */
.mt-facts--visual .mt-facts__lead {
	display: none;
}

/* --- 767px 以下：見出し画像の「マッハ塗装とは」の下の空白に、短い定義文を重ねる（完成参考画像と同じ一体の見た目） ---
 * 位置は見出し部分の画像（948×490）に対する割合。文字の大きさは画像の幅に比例させ、13.5px を下回らない。
 * 右端は人物の手にかかる程度まで（参考画像と同じ）。読みやすさのため白い縁取りを付ける。 */
@media (max-width: 767px) {
	.mt-facts--visual .mt-facts__intro {
		container-type: inline-size;
		position: relative;
		margin-bottom: 8px;
	}

	.mt-facts--visual .mt-facts__definition {
		display: none;
	}

	.mt-facts--visual .mt-facts__lead {
		display: block;
		position: absolute;
		/* 見出し（画像の y 185px まで）の下から、下端の波（y 450px）の手前まで */
		top: 41.5%;
		left: 5.1%;
		/* 最も長い行「マッハ塗装は、TSK総研が本部運営する」が 1 行に入る幅（行末は参考画像と同じく手にかかる程度） */
		width: 68.5%;
		margin: 0;
		color: var(--mt-color-text);
		font-size: clamp(13.5px, 3.73cqw, 18px);
		font-weight: 500;
		line-height: 1.6;
		/* 文節での折り返し（auto-phrase）は行末が空いて 5 行になり、下端の波に重なるため使わない */
		line-break: strict;
		text-shadow: 0 0 6px #fff, 0 0 3px #fff, 0 0 1px #fff;
	}

	/* 文節の途中では折り返さない（文節と文節の間でだけ改行する） */
	.mt-facts--visual .mt-facts__phrase {
		white-space: nowrap;
	}
}

/* --- 768〜1279px：左に見出し・定義文、右に価格とカード --- */
@media (min-width: 768px) and (max-width: 1279px) {
	.mt-facts--visual {
		padding: 32px var(--mt-gutter);
	}

	/* 上段：左に見出しの画像と定義文、右に価格の 2 枠。下段：状態確認・塗料を横に 2 つ（PC と同じ視線の流れ） */
	.mt-facts--visual .mt-facts__stage {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-template-areas:
			"intro board"
			"info info";
		align-items: start;
		max-width: 1160px;
		border-radius: 14px;
		box-shadow: 0 2px 12px rgba(27, 79, 138, 0.08);
	}

	.mt-facts--visual .mt-facts__intro {
		grid-area: intro;
	}

	.mt-facts--visual .mt-facts__definition {
		margin: 3.5% 3.5% 0;
		font-size: clamp(0.9375rem, 0.75rem + 0.4vw, 1.0625rem);
	}

	.mt-facts--visual .mt-facts__list--info {
		display: grid;
		grid-area: info;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		padding: 4px 16px 16px;
	}

	.mt-facts--visual .mt-facts__item--inspection,
	.mt-facts--visual .mt-facts__item--paint {
		margin: 0;
	}

	/* リンク列を広げ、1024px 前後では「状態確認で見る項目」を 1 行に */
	.mt-facts--visual .mt-facts__item--inspection,
	.mt-facts--visual .mt-facts__item--paint {
		--mt-facts-link-w: clamp(116px, 13vw, 176px);
		padding-right: calc(var(--mt-facts-link-w) + 10px);
	}

	.mt-facts--visual .mt-facts__item--inspection .mt-facts__link,
	.mt-facts--visual .mt-facts__item--paint .mt-facts__link {
		width: var(--mt-facts-link-w);
		padding-left: 16px;
	}

	/* 右列の上端は画像の枠の部分なので、下の薄い青まで同じ色でつなぐ */
	.mt-facts--visual .mt-facts__board {
		grid-area: board;
		align-self: stretch;
		background: #eaf8fe;
	}
}

/* --- 1280px 以上：PC 用画像 1 枚（2172×724）に重ねる --- */
@media (min-width: 1280px) {
	.mt-facts--visual {
		/* 1600px より広い画面で、画像の左右に見える面 */
		background: #d9ecfb;
	}

	.mt-facts--visual .mt-facts__stage {
		--u: calc(100cqw / 2172);
		container-type: inline-size;
		max-width: 1600px;
		background: none;
	}

	.mt-facts--visual .mt-facts__visual {
		aspect-ratio: auto;
		overflow: visible;
	}

	/* 定義文：見出しの下・人物の右（完成参考画像の位置） */
	.mt-facts--visual .mt-facts__definition {
		position: absolute;
		top: calc(250 * var(--u));
		left: calc(364 * var(--u));
		width: calc(580 * var(--u));
		margin: 0;
		padding: 0;
		font-size: clamp(15px, calc(26 * var(--u)), 19px);
		line-height: 1.75;
		line-break: strict;
		background: none;
		border: 0;
		border-radius: 0;
		text-shadow: 0 0 6px #fff, 0 0 2px #fff;
	}

	/* 枠の部分は画像全体に重ねる（土台画像は上の 1 枚だけを見せる） */
	.mt-facts--visual .mt-facts__board {
		--u: calc(100cqw / 2172);
		position: absolute;
		inset: 0;
	}

	.mt-facts--visual .mt-facts__visual--board {
		display: none;
	}

	.mt-facts--visual .mt-facts__list {
		padding: 0;
		background: none;
	}

	/* 上段の 2 つの枠 */
	.mt-facts--visual .mt-facts__item--exterior_price {
		top: calc(107 * var(--u));
		left: calc(982 * var(--u));
		width: calc(536 * var(--u));
		height: calc(301 * var(--u));
	}

	.mt-facts--visual .mt-facts__item--total_price {
		top: calc(107 * var(--u));
		left: calc(1532 * var(--u));
		width: calc(605 * var(--u));
		height: calc(301 * var(--u));
	}

	.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__label,
	.mt-facts--visual .mt-facts__item--total_price .mt-facts__label {
		top: calc(35 * var(--u));
		left: calc(113 * var(--u));
		font-size: clamp(16px, calc(27.5 * var(--u)), 20px);
		line-height: 1.3;
	}

	.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__value,
	.mt-facts--visual .mt-facts__item--total_price .mt-facts__value {
		top: calc(90 * var(--u));
		left: calc(113 * var(--u));
	}

	.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__value strong,
	.mt-facts--visual .mt-facts__item--total_price .mt-facts__value strong {
		font-size: clamp(30px, calc(51.5 * var(--u)), 38px);
	}

	.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__unit,
	.mt-facts--visual .mt-facts__item--total_price .mt-facts__unit {
		font-size: clamp(15px, calc(25.75 * var(--u)), 19px);
	}

	.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__note-text,
	.mt-facts--visual .mt-facts__item--total_price .mt-facts__note-text {
		top: calc(152 * var(--u));
		font-size: clamp(15px, calc(25.75 * var(--u)), 19px);
		line-height: 1.5;
	}

	.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__note-text {
		left: calc(18 * var(--u));
		width: calc(504 * var(--u));
	}

	.mt-facts--visual .mt-facts__item--total_price .mt-facts__note-text {
		left: calc(28 * var(--u));
		width: calc(560 * var(--u));
	}

	.mt-facts--visual .mt-facts__item--exterior_price .mt-facts__link {
		top: calc(238 * var(--u));
		left: calc(26 * var(--u));
		width: calc(486 * var(--u));
		height: calc(46 * var(--u));
		padding-left: calc(16 * var(--u));
		justify-content: flex-start;
		font-size: clamp(15px, calc(25.75 * var(--u)), 19px);
	}

	/* 下段の 2 行：左に項目名、右に値・補足、右端にリンク（画像の枠に重ねる） */
	.mt-facts--visual .mt-facts__item--inspection,
	.mt-facts--visual .mt-facts__item--paint {
		position: absolute;
		left: calc(982 * var(--u));
		width: calc(1155 * var(--u));
		min-height: 0;
		height: calc(83 * var(--u));
		margin: 0;
		padding: 0 calc(24 * var(--u)) 0 calc(310 * var(--u));
		flex-wrap: nowrap;
		align-items: center;
		column-gap: calc(30 * var(--u));
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.mt-facts--visual .mt-facts__item--inspection {
		top: calc(433 * var(--u));
	}

	.mt-facts--visual .mt-facts__item--paint {
		top: calc(518 * var(--u));
	}

	/* アイコンは画像側にあるため描かない */
	.mt-facts--visual .mt-facts__item--inspection::before,
	.mt-facts--visual .mt-facts__item--paint::before {
		content: none;
	}

	.mt-facts--visual .mt-facts__item--inspection .mt-facts__label,
	.mt-facts--visual .mt-facts__item--paint .mt-facts__label {
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		left: calc(76 * var(--u));
		width: calc(196 * var(--u));
		letter-spacing: -0.03em;
		height: 100%;
		font-size: clamp(15px, calc(25.75 * var(--u)), 19px);
		line-height: 1.25;
		white-space: nowrap;
	}

	.mt-facts--visual .mt-facts__item--inspection .mt-facts__value,
	.mt-facts--visual .mt-facts__item--paint .mt-facts__value {
		flex: none;
		line-height: 1.2;
	}

	.mt-facts--visual .mt-facts__item--inspection .mt-facts__value strong,
	.mt-facts--visual .mt-facts__item--paint .mt-facts__value strong {
		font-size: clamp(22px, calc(39 * var(--u)), 28px);
	}

	.mt-facts--visual .mt-facts__item--inspection .mt-facts__note,
	.mt-facts--visual .mt-facts__item--paint .mt-facts__note {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: space-between;
		gap: calc(20 * var(--u));
		min-width: 0;
		margin: 0;
	}

	.mt-facts--visual .mt-facts__item--inspection .mt-facts__note-text,
	.mt-facts--visual .mt-facts__item--paint .mt-facts__note-text {
		font-size: clamp(15px, calc(25.75 * var(--u)), 19px);
		line-height: 1.3;
		white-space: nowrap;
	}

	.mt-facts--visual .mt-facts__item--inspection .mt-facts__link,
	.mt-facts--visual .mt-facts__item--paint .mt-facts__link {
		position: static;
		width: auto;
		min-height: 44px;
		padding: 0;
		font-size: clamp(15px, calc(25.75 * var(--u)), 19px);
		white-space: nowrap;
		border-left: 0;
	}

	.mt-facts--visual .mt-facts__item--inspection .mt-facts__link::after,
	.mt-facts--visual .mt-facts__item--paint .mt-facts__link::after {
		position: static;
		margin-left: 0.3em;
		transform: none;
		font-size: inherit;
	}
}

/* コンテナ単位（cqw）に対応していない古いブラウザ：画像を出さず、文字だけを順に並べる */
@supports not (width: 1cqw) {
	.mt-facts--visual .mt-facts__visual {
		display: none;
	}

	.mt-facts--visual .mt-facts__stage {
		display: block;
		padding: 16px;
		background: none;
	}

	.mt-facts--visual .mt-facts__title {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
		margin: 0 0 8px;
		font-size: 1.375rem;
	}

	.mt-facts--visual .mt-facts__definition,
	.mt-facts--visual .mt-facts__item,
	.mt-facts--visual .mt-facts__label,
	.mt-facts--visual .mt-facts__value,
	.mt-facts--visual .mt-facts__note-text,
	.mt-facts--visual .mt-facts__link {
		position: static !important;
		display: block;
		width: auto;
		height: auto;
		margin: 0 0 8px;
		padding: 0;
		font-size: 1rem;
	}
}

/* ------------------------------------------------------------------
 * 3. こんなお悩みありませんか？：1 枚のチェックリスト（カードに分けない）
 * ------------------------------------------------------------------ */
.mt-concerns {
	background: #fff;
}

.mt-concerns__inner {
	max-width: calc(820px + var(--mt-gutter) * 2);
}

.mt-concerns__list {
	margin: 0;
	padding: 4px 16px;
	list-style: none;
	background: var(--mt-color-bg-soft);
	border: 1px solid var(--mt-color-border);
}

.mt-concerns__item {
	position: relative;
	padding: 12px 0 12px 34px;
	border-bottom: 1px dashed #bdbdbd;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
}

.mt-concerns__item:last-child {
	border-bottom: 0;
}

/* チェック欄（□に ✓）。内容は文字で伝えているため装飾 */
.mt-concerns__item::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	background: #fff;
	border: 2px solid var(--mt-color-text);
}

.mt-concerns__item::after {
	content: "";
	position: absolute;
	top: 17px;
	left: 7px;
	width: 6px;
	height: 11px;
	border: solid var(--mt-color-red);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.mt-concerns__answer {
	position: relative;
	margin: 24px 0 0;
	color: var(--mt-color-red);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.6;
	text-align: center;
	word-break: auto-phrase;
}

/* ------------------------------------------------------------------
 * 4. マッハ塗装とは ＋ 大切にしていること：赤の写真背景に、白い読み物ブロックと理由の帯
 * ------------------------------------------------------------------ */
.mt-about {
	background-color: var(--mt-color-red-dark);
	background-image: url("../images/brand-red-texture.jpg");
	background-position: center;
	background-size: cover;
}

.mt-about__inner {
	display: grid;
	gap: 16px;
}

.mt-about__intro {
	padding: 24px 20px;
	background: #fff;
}

.mt-about__mark {
	display: block;
	width: auto;
	height: 36px;
	margin: 0 auto 12px;
}

.mt-about__title {
	margin-bottom: 16px;
}

.mt-about__text {
	margin: 0 0 0.8em;
	font-size: 1.0625rem;
	line-height: 1.9;
}

.mt-about__text:last-child {
	margin-bottom: 0;
}

.mt-about__reasons-label {
	margin: 0 0 10px;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.5;
}

.mt-reasons__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-reasons__item {
	padding: 16px 18px 18px;
	background: #fff;
}

.mt-reasons__item-title {
	margin: 0;
	color: var(--mt-color-red);
	font-size: 1.1875rem;
	font-weight: 900;
	line-height: 1.45;
	word-break: auto-phrase;
}

.mt-reasons__item-text {
	margin: 6px 0 0;
	line-height: 1.85;
}

/* ------------------------------------------------------------------
 * 5. 施工事例（ポータルの主役）：施工前 → 施工後 の比較写真を大きく
 * ------------------------------------------------------------------ */
.mt-home-works {
	background: #fff;
}

.mt-home-works__head {
	margin-bottom: 20px;
	text-align: center;
}

.mt-home-works__title {
	margin-bottom: 14px;
}

.mt-home-works__lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.8;
	word-break: auto-phrase;
}

.mt-work-list--compare {
	gap: 16px;
}

/* 施工前と施工後の間の矢印（「施工前」「施工後」のラベルで意味を示しているため装飾） */
.mt-work-list--compare .mt-work__photos--pair {
	position: relative;
}

.mt-work-list--compare .mt-work__photos--pair::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border: 10px solid transparent;
	border-left: 14px solid var(--mt-color-red);
	border-right: 0;
	z-index: 2;
	transform: translate(-40%, -50%);
}

.mt-work-list--compare .mt-work__photos--pair::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 34px;
	height: 34px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.mt-work-list--compare .mt-work__photo-label {
	font-size: 0.875rem;
}

.mt-work-list--compare .mt-work__facts div {
	grid-template-columns: 4.5em minmax(0, 1fr);
}

.mt-home-works__more {
	margin: 24px 0 0;
	text-align: center;
}

/* ------------------------------------------------------------------
 * 6. 見積り・価格の見方：見積書のチェックシート
 * ------------------------------------------------------------------ */
.mt-price {
	background: var(--mt-color-bg-soft);
}

.mt-price__head {
	max-width: 44em;
	margin: 0 auto 20px;
}

.mt-price__title {
	margin-bottom: 16px;
}

.mt-price__lead {
	margin: 0;
	line-height: 1.9;
}

/* 将来の価格の目安（正式価格が決まるまでは出力されない） */
.mt-price__examples {
	display: grid;
	gap: 8px;
	max-width: 960px;
	margin: 0 auto 16px;
}

.mt-price__example {
	padding: 14px 16px;
	background: #fff;
	border-left: 6px solid var(--mt-color-yellow);
}

.mt-price__example dt {
	font-weight: 700;
}

.mt-price__example dd {
	margin: 4px 0 0;
	font-size: 1.375rem;
	font-weight: 900;
}

.mt-price__example-note {
	display: block;
	color: var(--mt-color-muted);
	font-size: 0.875rem;
	font-weight: 400;
}

.mt-price__sheet {
	max-width: 960px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--mt-color-border);
}

.mt-price__sheet-title {
	margin: 0;
	padding: 10px 16px;
	border-bottom: 1px solid var(--mt-color-border);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.mt-price__checks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-price__row {
	padding: 16px 16px 18px;
	border-bottom: 1px dashed #bdbdbd;
}

.mt-price__row:last-child {
	border-bottom: 0;
}

.mt-price__row-title {
	position: relative;
	margin: 0;
	padding-left: 34px;
	font-size: 1.1875rem;
	font-weight: 900;
	line-height: 1.5;
	word-break: auto-phrase;
}

/* 確認欄（□に ✓）：見積書を確認する行為を表す。内容は見出しの文字で伝えている */
.mt-price__row-title::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	background: #fff;
	border: 2px solid var(--mt-color-text);
}

.mt-price__row-title::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 8px;
	width: 6px;
	height: 12px;
	border: solid var(--mt-color-text);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.mt-price__row-text {
	margin: 8px 0 0;
	line-height: 1.85;
}

.mt-price__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 24px;
	margin: 24px 0 0;
}

.mt-price__sub-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--mt-color-red);
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * 7. 塗装サービス：工事内容の情報なので見出しは青。写真がある項目は写真と並べる
 * ------------------------------------------------------------------ */
.mt-services {
	background: var(--mt-color-bg);
}

.mt-services__lead {
	margin: -8px auto 20px;
	text-align: center;
}

.mt-services__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-services__item {
	display: grid;
	background: var(--mt-color-bg-soft);
}

/* 写真がある項目だけ「写真｜本文」の2列にする */
.mt-services__item:not(.mt-services__item--text) {
	grid-template-columns: 104px minmax(0, 1fr);
}

/* 写真の無い項目も、他の項目と同じ背景（色を変えて目立たせない） */

.mt-services__media {
	position: relative;
	min-height: 100%;
	background: var(--mt-color-border);
}

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

.mt-services__body {
	padding: 12px 14px 14px;
}

.mt-services__item-title {
	margin: 0;
	color: var(--mt-color-blue);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.45;
	word-break: auto-phrase;
}

.mt-services__item-text {
	margin: 6px 0 0;
	font-size: 0.9375rem;
	line-height: 1.8;
}

/* サービス名のリンク（詳しいページがある項目）と「詳しく見る」の文字リンク */
.mt-services__item-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.mt-services__item-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mt-services__item-more {
	margin: 4px 0 0;
	font-size: 0.9375rem;
}

.mt-services__item-more a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--mt-color-blue);
	font-weight: 700;
}

/* 塗装サービス（2026-10-04）：店舗の下に置く短い一覧。写真は出さず、サービス名（リンク）と 1〜2 行の説明だけ。
   カード全体を押せる（サービス名のリンクを枠いっぱいに広げる）。スマホは縦の一覧、600px 以上は 2 列、960px 以上は 4 列。
   旧レイアウト（写真｜本文）の指定より強い指定で上書きする。 */
.mt-services .mt-services__inner {
	padding-top: 36px;
	padding-bottom: 36px;
}

.mt-services .mt-services__list {
	gap: 8px;
}

.mt-services .mt-services__item,
.mt-services .mt-services__item:not(.mt-services__item--text) {
	display: block;
	position: relative;
	min-height: 0;
	padding: 10px 36px 12px 14px;
	background: var(--mt-color-bg-soft);
	border: 1px solid var(--mt-color-border);
	border-radius: 4px;
}

.mt-services .mt-services__item-title {
	font-size: 1.0625rem;
	line-height: 1.45;
}

.mt-services .mt-services__item-link {
	min-height: 0;
}

/* サービス名のリンクをカード全体に広げる */
.mt-services .mt-services__item-link::before {
	content: "";
	position: absolute;
	inset: 0;
}

.mt-services .mt-services__item-link::after {
	content: "›";
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--mt-color-blue);
	font-size: 1.375rem;
	line-height: 1;
	transform: translateY(-50%);
}

.mt-services .mt-services__item:hover .mt-services__item-link {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mt-services .mt-services__item:focus-within {
	outline: 2px solid var(--mt-color-blue);
	outline-offset: 2px;
}

.mt-services .mt-services__item-link:focus-visible {
	outline: none;
}

.mt-services .mt-services__item-text {
	margin: 4px 0 0;
	color: var(--mt-color-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	word-break: auto-phrase;
}

@media (min-width: 600px) {
	.mt-services .mt-services__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (min-width: 960px) {
	.mt-services .mt-services__inner {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.mt-services .mt-services__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}

	.mt-services .mt-services__item,
	.mt-services .mt-services__item:not(.mt-services__item--text) {
		padding: 14px 34px 16px 16px;
	}

	.mt-services .mt-services__item-title {
		font-size: 1.125rem;
	}
}

/* ------------------------------------------------------------------
 * 8. 施工への考え方（施工品質の要点 ＋ 工事の流れ）：ブランド青の面
 * ------------------------------------------------------------------ */
.mt-quality {
	background: var(--mt-color-blue);
	color: #fff;
}

.mt-quality__inner {
	display: grid;
	box-sizing: border-box;
	max-width: var(--mt-content-width);
	margin: 0 auto;
	padding: var(--mt-section-space) var(--mt-gutter);
}

.mt-quality__title {
	margin-bottom: 16px;
	text-align: left;
}

.mt-quality__lead {
	margin: 0 0 20px;
	line-height: 1.85;
}

.mt-quality__media {
	margin: 0 calc(var(--mt-gutter) * -1) 4px;
}

.mt-quality__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mt-quality__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-quality__item {
	padding: 14px 0 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.mt-quality__item-title {
	margin: 0;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.45;
	word-break: auto-phrase;
}

.mt-quality__item-text {
	margin: 6px 0 0;
	line-height: 1.8;
}

/* 工事の流れ：工程名だけを順番に（番号は小さく、文字で工程を示す） */
.mt-flow {
	margin-top: 24px;
	padding: 18px 16px 16px;
	background: #fff;
	color: var(--mt-color-text);
}

.mt-flow__title {
	margin: 0 0 12px;
	color: var(--mt-color-blue);
	font-size: 1.1875rem;
	font-weight: 900;
	line-height: 1.45;
}

.mt-flow__steps {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mt-flow;
}

.mt-flow__step {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	background: var(--mt-color-blue-soft);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	counter-increment: mt-flow;
	word-break: auto-phrase;
}

.mt-flow__step::before {
	content: counter(mt-flow);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--mt-color-blue);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 900;
}

.mt-flow__note {
	margin: 12px 0 0;
	color: var(--mt-color-muted);
	font-size: 0.875rem;
	line-height: 1.7;
}

/* ------------------------------------------------------------------
 * 要点だけの表示（詳しいページ /about/・/quality/・/flow/ があるとき）
 * ------------------------------------------------------------------ */

/* マッハ塗装とは：大切にしていることは見出しだけの帯に */
.mt-about--summary .mt-reasons__list {
	gap: 6px;
}

.mt-about--summary .mt-reasons__item {
	padding: 12px 16px;
}

.mt-about--summary .mt-reasons__item-title {
	font-size: 1.125rem;
}

/* 2026-10-03：方針の意味を 1〜2 文で添える（トップでは小さめに） */
.mt-about--summary .mt-reasons__item-text {
	margin-top: 4px;
	font-size: 0.9375rem;
	line-height: 1.75;
}

.mt-about__more {
	margin: 14px 0 0;
}

.mt-about__more a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	text-underline-offset: 4px;
}

/* 矢印（「詳しく見る」ことを示す装飾） */
.mt-about__more a::after {
	content: "\203A";
	margin-left: 8px;
	font-size: 1.375rem;
	line-height: 1;
}

.mt-about a:focus-visible {
	outline-color: #fff;
}

/* 施工への考え方：品質の 4 項目は見出しだけを 2 列で */
.mt-quality--summary .mt-quality__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.mt-quality--summary .mt-quality__item {
	padding: 12px 0;
}

.mt-quality--summary .mt-quality__item-title {
	font-size: 1rem;
}

/* 工事の流れ（要点表示）：工程名を「1 … › 2 … ›」の順につなげて短く見せる（説明と写真は /flow/） */
.mt-quality--summary .mt-flow__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 6px;
}

.mt-quality--summary .mt-flow__step {
	padding: 0;
	background: none;
	word-break: keep-all;
}

.mt-quality--summary .mt-flow__step:not(:last-child)::after {
	content: "\203A";
	margin-left: 4px;
	color: var(--mt-color-blue);
	font-weight: 900;
}

.mt-quality__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 24px;
	margin-top: 24px;
}

.mt-quality__sub-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #fff;
	font-weight: 700;
	text-underline-offset: 4px;
}

.mt-quality a:focus-visible {
	outline-color: #fff;
}

/* ------------------------------------------------------------------
 * 8-2. 品質を支える施工の考え方（土台画像あり：.mt-quality--visual、2026-10-04）
 * Core 設定「施工の考え方セクション背景」の土台画像（見出し・写真・枠・アイコンだけ）を背景に、文言を HTML で重ねる。
 * 位置と文字の大きさは、画像の実寸の座標（PC 1672×941・スマホ 941×1672 の px）× --u で指定する（--u ＝ 表示幅 ÷ 画像の幅）。
 * - 1280px 以上：PC 用画像を y 648px で上下に分け、上に説明文と 4 項目・下部の見出し、間に下部の説明文、下に比較の文言を重ねる。
 * - 1279px 以下：スマホ用画像の見出し部分（上から 660px）→ 説明文と 4 項目（画像と同じ赤の面に白いカード）→ 赤から白への波
 *   （画像の 1008〜1100px）→ 下部は白の面に見出し・説明文・比較のカード。
 *   画像の 4 つの枠は 375px で幅約 105px・高さ約 49px しかなく、項目名（2〜3 行）が収まらないため、HTML のカードにする。
 * - 768〜1279px：左に見出し画像と 4 項目、右に下部（見出し・説明文・比較・ボタン）。
 * 赤は見出しの強調・比較のマッハ塗装側・ボタンに限る。
 * ------------------------------------------------------------------ */
.mt-quality.mt-quality--visual {
	padding: 0;
	color: var(--mt-color-text);
	background: #fff;
}

/* 従来の青い面用の白いフォーカス枠は、白い面では見えないため濃い色に戻す */
.mt-quality.mt-quality--visual a:focus-visible {
	outline: 2px solid var(--mt-color-text);
	outline-offset: 2px;
}

.mt-think__img {
	display: block;
	width: 100%;
	height: auto;
}

.mt-think__hero {
	--u: calc(100cqw / 941);
	container-type: inline-size;
	position: relative;
	/* 見出しの下〜4 項目の後ろの赤（画像の y 660〜1008px の左右の色の変化に合わせる） */
	background: linear-gradient(90deg, #e90107 0%, #df0205 3%, #ca0101 21%, #bb0201 50%, #b00202 74%, #cc0203 97%, #cb0003 100%);
}

/* 見出し部分：画像の上から 660px まで */
.mt-think__visual {
	position: relative;
	aspect-ratio: 941 / 660;
	overflow: hidden;
}

.mt-think__lead {
	margin: 0;
	padding: 4px 22px 12px;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.75;
	text-align: center;
	text-wrap: balance;
	word-break: auto-phrase;
}

/* 4 項目：白いカード（アイコンは画像の枠と同じ絵柄を CSS で描く）→ 赤から白への波（画像） */
.mt-think__board {
	display: flex;
	flex-direction: column;
}

.mt-think__points {
	display: grid;
	gap: 4px;
	order: 1;
	margin: 0;
	padding: 0 16px 4px;
	list-style: none;
}

.mt-think__point {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: 10px;
	min-height: 44px;
	padding: 4px 12px 4px 8px;
	background: #fff;
	border-radius: 8px;
}

.mt-think__point::before {
	content: "";
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #fde8e8;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 22px 22px;
}

.mt-think__point--1::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e10b16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h2a1 1 0 0 1 1 1v6M9 4H7a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1h6'/%3E%3Crect x='9' y='2.5' width='6' height='3' rx='1'/%3E%3Cpath d='M9 10h5M9 14h2'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3Cpath d='m18.2 18.2 2.3 2.3'/%3E%3C/svg%3E");
}

.mt-think__point--2::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e10b16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M6 9.5V20h4v-5h4v5h4V9.5'/%3E%3C/svg%3E");
}

.mt-think__point--3::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e10b16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='11' cy='6' rx='6' ry='2.3'/%3E%3Cpath d='M5 6v12c0 1.3 2.7 2.3 6 2.3s6-1 6-2.3V6'/%3E%3Cpath d='M17 9.5c2 .3 2.8 1.5 2.8 3 0 1.6-1.1 3-2.8 3'/%3E%3C/svg%3E");
}

.mt-think__point--4::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e10b16' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.mt-think__point-title {
	margin: 0;
	color: var(--mt-color-text);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
	word-break: auto-phrase;
}

/* 赤から白への波：画像の y 1008〜1080px（下の白い部分は表示しない） */
.mt-think__visual--board {
	order: 2;
	aspect-ratio: 941 / 72;
}

.mt-think__visual--board .mt-think__img {
	position: absolute;
	top: calc(-1008 * var(--u));
	left: 0;
}

/* 下部（白）：見出し・説明文・比較・ボタン */
.mt-think__summary {
	padding: 2px 20px 22px;
	background: #fff;
}

.mt-think__heading {
	margin: 0;
	color: var(--mt-color-text);
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.45;
	word-break: auto-phrase;
}

.mt-think__brand {
	display: inline-block;
	margin: 0 0 6px;
	padding: 3px 12px 4px;
	color: #fff;
	font-size: 0.9375rem;
	background: var(--mt-color-red);
	border-radius: 2px;
	transform: skewX(-6deg);
}

.mt-think__heading-text {
	display: block;
}

.mt-think__heading-text em {
	color: var(--mt-color-red);
	font-style: normal;
}

.mt-think__text {
	margin: 6px 0 12px;
	color: #333;
	font-size: 0.9375rem;
	line-height: 1.8;
}

/* 比較：画像の比較の枠は PC だけで使う。1279px 以下は 1 つの枠に 2 つの一覧を短く並べる
   （上の 4 項目と内容が重なるため、行ごとの背景・見出しの帯は付けず、ラベル＋チェックの行だけにする） */
.mt-think__visual--compare {
	display: none;
}

.mt-think__compare {
	padding: 12px 14px 12px;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
}

.mt-think__col {
	position: relative;
}

.mt-think__col--mach {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #ececec;
}

.mt-think__col-title {
	margin: 0 0 4px;
	padding: 0;
	color: #5f5f5f;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

.mt-think__col--mach .mt-think__col-title {
	color: var(--mt-color-red);
}

.mt-think__col-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-think__col-list li {
	position: relative;
	padding: 2px 0 2px 28px;
	color: #333;
	font-size: 0.9375rem;
	line-height: 1.5;
	word-break: auto-phrase;
}

/* チェックの丸（画像と同じ。一般はグレー、マッハ塗装は赤） */
.mt-think__col-list li::before {
	content: "";
	position: absolute;
	top: 0.85em;
	left: 0;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #8c8c8c 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
	background-size: 12px 12px;
	border-radius: 50%;
}

.mt-think__col--mach .mt-think__col-list li::before {
	background-color: var(--mt-color-red);
}

.mt-think__more {
	display: grid;
	justify-items: center;
	gap: 0;
	margin-top: 12px;
}

.mt-think__more .mt-button {
	width: 100%;
	max-width: 360px;
}

.mt-think__sub-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--mt-color-red);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mt-think__sub-link::after {
	content: "›";
	margin-left: 4px;
	text-decoration: none;
}

/* --- 768〜1279px：左に見出し画像と 4 項目、右に下部 --- */
@media (min-width: 768px) and (max-width: 1279px) {
	.mt-quality.mt-quality--visual {
		padding: 32px var(--mt-gutter);
		background: var(--mt-color-bg-soft);
	}

	.mt-think {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: start;
		max-width: 1160px;
		margin: 0 auto;
		overflow: hidden;
		background: #fff;
		border-radius: 14px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	}

	.mt-think__summary {
		align-self: center;
		padding: 28px 32px 32px;
	}

	.mt-think__heading {
		font-size: clamp(1.25rem, 0.9rem + 0.7vw, 1.5rem);
	}

	.mt-think__more {
		justify-items: start;
	}
}

/* --- 1280px 以上：PC 用画像（1672×941）に重ねる --- */
@media (min-width: 1280px) {
	.mt-think {
		--u: calc(100cqw / 1672);
		container-type: inline-size;
		position: relative;
		max-width: 1672px;
		margin: 0 auto;
	}

	/* PC は .mt-think を基準にするため、中の基準（コンテナ・位置）は外す */
	.mt-think__hero {
		--u: calc(100cqw / 1672);
		container-type: normal;
		position: static;
		background: none;
	}

	.mt-think__visual {
		aspect-ratio: 1672 / 648;
	}

	/* 上部の説明文：見出しの下・4 項目の上の赤い面 */
	.mt-think__lead {
		position: absolute;
		top: calc(160 * var(--u));
		left: calc(772 * var(--u));
		width: calc(862 * var(--u));
		padding: 0;
		font-size: clamp(15px, calc(20 * var(--u)), 19px);
		line-height: 1.6;
		text-align: left;
		text-wrap: pretty;
	}

	/* 4 項目：画像の白い枠に重ねる（アイコンは画像側） */
	.mt-think__board {
		display: block;
	}

	.mt-think__visual--board {
		display: none;
	}

	.mt-think__points {
		display: block;
		padding: 0;
	}

	.mt-think__point {
		position: absolute;
		min-height: 0;
		padding: 0 calc(16 * var(--u)) 0 calc(138 * var(--u));
		background: none;
		border-radius: 0;
	}

	.mt-think__point::before {
		content: none;
	}

	.mt-think__point--1,
	.mt-think__point--3 {
		left: calc(767 * var(--u));
		width: calc(426 * var(--u));
	}

	.mt-think__point--2,
	.mt-think__point--4 {
		left: calc(1207 * var(--u));
		width: calc(433 * var(--u));
	}

	.mt-think__point--1,
	.mt-think__point--2 {
		top: calc(235 * var(--u));
		height: calc(124 * var(--u));
	}

	.mt-think__point--3,
	.mt-think__point--4 {
		top: calc(374 * var(--u));
		height: calc(124 * var(--u));
	}

	.mt-think__point-title {
		font-size: clamp(16px, calc(26 * var(--u)), 22px);
		line-height: 1.4;
		text-wrap: balance;
	}

	.mt-think__summary {
		padding: 0;
	}

	/* 下部の見出し：赤い筆の上に「マッハ塗装は」、薄い赤の帯に見出し */
	.mt-think__brand {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: calc(560 * var(--u));
		left: calc(45 * var(--u));
		width: calc(262 * var(--u));
		height: calc(85 * var(--u));
		margin: 0;
		padding: 0;
		font-size: clamp(18px, calc(34 * var(--u)), 30px);
		letter-spacing: 0.02em;
		background: none;
		transform: none;
	}

	.mt-think__heading-text {
		display: flex;
		align-items: center;
		position: absolute;
		top: calc(565 * var(--u));
		left: calc(338 * var(--u));
		width: calc(1280 * var(--u));
		height: calc(70 * var(--u));
		font-size: clamp(22px, calc(38 * var(--u)), 34px);
		line-height: 1.2;
		white-space: nowrap;
	}

	/* 下部の説明文：画像の上下の間（白） */
	.mt-think__text {
		max-width: calc(1460 * var(--u));
		margin: 0 auto;
		padding: calc(2 * var(--u)) calc(24 * var(--u)) calc(10 * var(--u));
		font-size: clamp(15px, calc(21 * var(--u)), 18px);
		line-height: 1.65;
		text-align: center;
		text-wrap: balance;
		word-break: auto-phrase;
	}

	/* 比較：画像の下側（y 648〜941px）に重ねる */
	.mt-think__compare-wrap {
		position: relative;
		/* 画像の y 648〜920px（下端の白い余白は表示しない） */
		aspect-ratio: 1672 / 272;
		overflow: hidden;
	}

	.mt-think__visual--compare {
		display: block;
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	.mt-think__visual--compare .mt-think__img {
		position: absolute;
		top: calc(-648 * var(--u));
		left: 0;
	}

	.mt-think__compare {
		display: block;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}

	.mt-think__col,
	.mt-think__col--mach {
		position: static;
		overflow: visible;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}

	.mt-think__col--mach::before {
		content: none;
	}

	.mt-think__col-title,
	.mt-think__col--mach .mt-think__col-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: calc(7 * var(--u));
		height: calc(55 * var(--u));
		margin: 0;
		padding: 0;
		color: #fff;
		font-size: clamp(16px, calc(27 * var(--u)), 23px);
		background: none;
	}

	.mt-think__col--general .mt-think__col-title {
		left: calc(45 * var(--u));
		width: calc(755 * var(--u));
	}

	.mt-think__col--mach .mt-think__col-title {
		left: calc(872 * var(--u));
		width: calc(756 * var(--u));
	}

	.mt-think__col-list {
		display: block;
		position: absolute;
		top: calc(74 * var(--u));
		padding: 0;
	}

	.mt-think__col--general .mt-think__col-list {
		left: calc(400 * var(--u));
		width: calc(378 * var(--u));
	}

	.mt-think__col--mach .mt-think__col-list {
		left: calc(1252 * var(--u));
		width: calc(356 * var(--u));
	}

	.mt-think__col-list li,
	.mt-think__col--mach .mt-think__col-list li {
		display: flex;
		align-items: center;
		height: calc(59 * var(--u));
		padding: 0;
		font-size: clamp(15px, calc(20 * var(--u)), 18px);
		line-height: 1.3;
		white-space: nowrap;
		background: none;
		border-radius: 0;
	}

	.mt-think__col-list li::before {
		content: none;
	}

	.mt-think__more {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24px;
		margin: 0;
		padding: 8px var(--mt-gutter) 22px;
	}

	.mt-think__more .mt-button {
		width: auto;
		min-width: 18em;
	}
}

/* ------------------------------------------------------------------
 * 9. お近くのマッハ塗装：地方ごとの店舗数と店舗名（住所・電話は店舗一覧へ）
 * ------------------------------------------------------------------ */
.mt-stores {
	background: var(--mt-color-bg);
}

.mt-region-summary {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-region-summary__region {
	background: var(--mt-color-bg-soft);
}

.mt-region-summary__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 4px 16px;
	background: var(--mt-color-blue-soft);
}

.mt-region-summary__name {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--mt-color-blue);
	font-size: 1.1875rem;
	font-weight: 900;
}

.mt-region-summary__count {
	font-weight: 700;
}

.mt-region-summary__stores {
	margin: 0;
	padding: 4px 16px 8px;
	list-style: none;
}

.mt-region-summary__stores li {
	border-bottom: 1px solid var(--mt-color-border);
}

.mt-region-summary__stores li:last-child {
	border-bottom: 0;
}

.mt-region-summary__stores a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--mt-color-text);
	font-weight: 700;
}

.mt-region-summary__pref,
.mt-region-summary__prefs {
	color: var(--mt-color-muted);
	font-size: 0.875rem;
}

.mt-region-summary__prefs {
	margin: 0;
	padding: 10px 16px 12px;
}

.mt-stores__more {
	margin: 24px 0 0;
	text-align: center;
}

/* 店舗一覧ページ用の文字リンクの色（content.css の .mt-stores__more a）より、ボタンの白文字を優先する */
.mt-stores__more .mt-button--primary {
	color: #fff;
}

/* ------------------------------------------------------------------
 * 10. よくある質問
 * ------------------------------------------------------------------ */
.mt-home-faq {
	background: var(--mt-color-blue-soft);
}

.mt-home-faq .mt-faq-list {
	max-width: 900px;
	margin: 0 auto;
}

.mt-home-faq__more {
	margin: 20px 0 0;
	text-align: center;
}

/* ------------------------------------------------------------------
 * タブレット（600px 以上）
 * ------------------------------------------------------------------ */
@media (min-width: 600px) {
	.mt-hero__buttons {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
	}

	.mt-services__item:not(.mt-services__item--text) {
		grid-template-columns: 160px minmax(0, 1fr);
	}

	.mt-flow__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * 768px 以上
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	.mt-concerns__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 32px;
		padding: 4px 24px;
	}

	/* 2 列のときは、各列の最後の行だけ下線を消す（件数が奇数でも偶数でも自然に見える） */
	.mt-concerns__item:nth-last-child(2):nth-child(odd) {
		border-bottom: 0;
	}

	/* 施工事例：1 件を 1 行に（施工前 → 施工後 の写真｜内容） */
	.mt-work-list--compare {
		grid-template-columns: minmax(0, 1fr);
		max-width: 1100px;
		margin: 0 auto;
	}

	.mt-work-list--compare .mt-work {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}

	/* 写真は行の高さいっぱいに敷く（本文が長い場合も写真の下に空白を作らない） */
	.mt-work-list--compare .mt-work__photos {
		align-self: stretch;
		min-height: 220px;
	}

	.mt-work-list--compare .mt-work__photo {
		min-height: 100%;
	}

	.mt-work-list--compare .mt-work__img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.mt-work-list--compare .mt-work__body {
		padding: 16px 24px 18px;
	}

	.mt-work-list--compare .mt-work__title {
		font-size: 1.1875rem;
	}

	.mt-price__row {
		display: grid;
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		gap: 32px;
		align-items: baseline;
		padding: 20px 28px;
	}

	.mt-price__row-text {
		margin: 0;
		font-size: 1.0625rem;
	}

	.mt-price__examples {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}

	.mt-quality__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 32px;
	}

	.mt-region-summary {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		align-items: start;
	}
}

/* ------------------------------------------------------------------
 * PC（960px 以上）
 * ------------------------------------------------------------------ */
@media (min-width: 960px) {
	/* FV：本文は左、写真は右端まで広げて存在感を出す */
	.mt-hero__inner {
		grid-template-columns:
			minmax(var(--mt-gutter), 1fr)
			minmax(0, 600px)
			minmax(0, 600px)
			minmax(0, 1fr);
		align-items: stretch;
		min-height: 460px;
	}

	.mt-hero__body {
		grid-column: 2;
		align-self: center;
		padding: 48px var(--mt-gutter);
	}

	/* 写真は枠いっぱいに敷き、FVの高さは本文と min-height で決める（超ワイド画面で縦に伸びない） */
	.mt-hero__media {
		position: relative;
		grid-column: 3 / -1;
		min-width: 0;
		overflow: hidden;
	}

	.mt-hero--text-only .mt-hero__body {
		grid-column: 2 / 4;
	}

	.mt-hero__img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.mt-hero__lead {
		font-size: 1.0625rem;
	}

	.mt-quicknav__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
		padding: 16px var(--mt-gutter) 20px;
	}

	.mt-quicknav__link {
		min-height: 88px;
		padding: 14px 18px;
	}

	.mt-quicknav__link::after {
		right: 14px;
		bottom: 14px;
	}

	.mt-quicknav__label {
		font-size: 1.1875rem;
	}

	.mt-quicknav__note {
		font-size: 0.875rem;
	}

	/* マッハ塗装とは：左に読み物、右に大切にしていること */
	.mt-about__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 32px;
		align-items: center;
	}

	.mt-about__intro {
		padding: 32px 36px;
	}

	.mt-about__mark {
		margin-left: 0;
	}

	.mt-about__title {
		text-align: left;
	}

	.mt-reasons__item {
		padding: 20px 24px;
	}

	.mt-reasons__item-title {
		font-size: 1.3125rem;
	}

	/* 施工事例：写真をさらに大きく */
	.mt-work-list--compare .mt-work {
		grid-template-columns: minmax(0, 13fr) minmax(0, 8fr);
	}

	.mt-work-list--compare .mt-work__body {
		padding: 20px 32px;
	}

	.mt-work-list--compare .mt-work__title {
		font-size: 1.3125rem;
	}

	.mt-work-list--compare .mt-work__facts {
		font-size: 1rem;
	}

	/* 塗装サービス：2列。写真のない項目も同じ高さで揃う */
	.mt-services__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.mt-services__item {
		min-height: 150px;
	}

	.mt-services__item:not(.mt-services__item--text) {
		grid-template-columns: 200px minmax(0, 1fr);
	}

	.mt-services__body {
		padding: 18px 22px 20px;
	}

	.mt-services__item-title {
		font-size: 1.3125rem;
	}

	.mt-services__item-text {
		font-size: 1rem;
	}

	/* 施工への考え方：写真を左、右に見出し・4 項目・工事の流れ */
	.mt-quality__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-areas:
			"media head"
			"media list"
			"flow flow"
			"more more";
		gap: 0 40px;
	}

	.mt-quality--text-only .mt-quality__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"list"
			"flow"
			"more";
	}

	.mt-quality__head {
		grid-area: head;
	}

	.mt-quality__media {
		position: relative;
		grid-area: media;
		min-height: 360px;
		margin: 0;
		overflow: hidden;
	}

	.mt-quality__img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.mt-quality__list {
		grid-area: list;
	}

	.mt-quality__more {
		grid-area: more;
	}

	.mt-quality__item {
		border-top: 1px solid rgba(255, 255, 255, 0.4);
		border-bottom: 0;
	}

	.mt-quality__lead {
		font-size: 1.0625rem;
	}

	.mt-flow {
		grid-area: flow;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 8px 24px;
		margin-top: 32px;
		padding: 18px 24px;
	}

	.mt-flow__title {
		margin: 0;
	}

	.mt-flow__steps {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.mt-flow__note {
		grid-column: 1 / -1;
		margin: 0;
	}
}

/* FV：960〜1239px は本文側を少し広げ（本文 3：写真 2）、H1 を 2 行に収める */
@media (min-width: 960px) and (max-width: 1239px) {
	.mt-hero__inner {
		grid-template-columns: 0 minmax(0, 3fr) minmax(0, 2fr) 0;
	}

	.mt-flow {
		grid-template-columns: minmax(0, 1fr);
	}

	.mt-flow__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}