/* =====================================================
   地域別トップ（page-area-top.php）専用スタイル
   - 地域固有セクション（template-parts/area/）と施工事例の注記だけを対象にする
   - 共通部分（.section / .section-header / .section-title / .faq-* / .works-area-*）は style.css をそのまま使う
   - 読み込み: inc/area-top.php tsk_area_top_enqueue()（地域TOPのみ）
   ===================================================== */

/* 地域固有の本文 */
.mach-area-text {
	max-width: 860px;
	margin-inline: auto;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--clr-text);
}

.mach-area-text p {
	margin-bottom: 1rem;
}

.mach-area-text p:last-child {
	margin-bottom: 0;
}

.mach-area-text ul,
.mach-area-text ol {
	margin: 0 0 1rem 1.25rem;
}

.mach-area-text ul {
	list-style: disc;
}

.mach-area-text ol {
	list-style: decimal;
}

.mach-area-text h3 {
	font-size: 1.0625rem;
	color: var(--clr-primary-dark);
	margin: 1.5rem 0 0.5rem;
}

/* 対応エリア */
.mach-area-service-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 860px;
	margin: 0 auto 1.5rem;
}

.mach-area-service-item {
	padding: 6px 16px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	background: var(--clr-white);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--clr-text);
}

.mach-area-service-item.is-main {
	border-color: var(--clr-primary);
	color: var(--clr-primary);
}

/* 地区から施工事例を探す */
.mach-area-works-list {
	justify-content: center;
	max-width: 860px;
	margin-inline: auto;
}

/* 施工事例: 地域の事例がない場合の注記（template-parts/top/works.php。赤背景上のため .works-section-desc と同じ色） */
.mach-area-works-note {
	max-width: 860px;
	margin: 0 auto 1.5rem;
	text-align: center;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.88);
}

/* =====================================================
   地域TOP 暫定FV（template-parts/area/fv.php）
   - 通常TOPのFV画像（画像内に地域名あり）の代わりに、HTMLテキストだけで表示する
   - 色は既存の価格セクション・FV下CTA（style.css）と同じ値を使う
   - 将来、共通背景画像（.mach-area-fv__bg）を追加した場合はテキストパネルを背景の上に重ねる
   ===================================================== */
.mach-area-fv {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #eaf4ff 0%, #ffffff 100%);
}

.mach-area-fv__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mach-area-fv__inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 28px 16px 24px;
}

.mach-area-fv__panel {
	text-align: center;
}

/* 背景画像あり（地域別トップ設定「FV背景画像」）:
   スマホは写真を上に帯状に出し、白いパネルを少し重ねて下に置く（文字を写真に直接載せない）。
   タブレット以上は写真の上に、左側を白くぼかしたグラデーションと半透明パネルを重ねる（写真の右側の住宅は見せる） */
.mach-area-fv--has-bg {
	background: var(--clr-white);
}

.mach-area-fv--has-bg .mach-area-fv__bg img {
	position: static;
	height: 220px;
	object-position: 72% 50%;
}

.mach-area-fv--has-bg .mach-area-fv__inner {
	margin-top: -36px;
	padding-top: 0;
}

.mach-area-fv--has-bg .mach-area-fv__panel {
	position: relative;
	padding: 20px 16px 18px;
	background: var(--clr-white);
	border-top: 4px solid #d60000;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

@media (min-width: 768px) {
	.mach-area-fv--has-bg {
		display: flex;
		align-items: center;
		min-height: 460px;
	}

	.mach-area-fv--has-bg .mach-area-fv__bg img {
		position: absolute;
		height: 100%;
		object-position: 70% 50%;
	}

	.mach-area-fv--has-bg::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 75%);
		pointer-events: none;
	}

	.mach-area-fv--has-bg .mach-area-fv__inner {
		z-index: 2;
		width: 100%;
		margin-top: 0;
		padding: 40px 24px;
	}

	.mach-area-fv--has-bg .mach-area-fv__panel {
		max-width: 600px;
		padding: 28px 32px 24px;
		background: rgba(255, 255, 255, 0.94);
		text-align: left;
	}

	.mach-area-fv--has-bg .mach-area-fv__note {
		margin: 0;
	}
}

/* タブレット（768〜1023px）: パネルを画面の約6割に収め、右側4割ほどに住宅写真を見せる
   （文字サイズは読みやすさを保てる範囲で少しだけ下げる。1024px以上は上の設定のまま） */
@media (min-width: 768px) and (max-width: 1023px) {
	.mach-area-fv--has-bg .mach-area-fv__panel {
		max-width: 440px;
		padding: 22px 24px 20px;
	}

	.mach-area-fv--has-bg .mach-area-fv__lead {
		font-size: 1.375rem;
	}

	.mach-area-fv--has-bg .mach-area-fv__price-label {
		font-size: 1.625rem;
	}

	.mach-area-fv--has-bg .mach-area-fv__price-num {
		font-size: 4.5rem;
	}

	.mach-area-fv--has-bg .mach-area-fv__price-unit {
		font-size: 1.75rem;
	}
}

@media (min-width: 1024px) {
	.mach-area-fv--has-bg {
		min-height: 520px;
	}
}

/* 見出し（地域名を含む導入文。H1 は直下の hero-catch が出力するため p 要素） */
.mach-area-fv__lead {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 16px;
	background: #d60000;
	color: #fff;
	font-size: clamp(1.0625rem, 4.4vw, 1.625rem);
	font-weight: 900;
	line-height: 1.45;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.mach-area-fv__city {
	color: #ffea00;
}

/* 価格（外壁塗装33万円〜） */
.mach-area-fv__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0 0 8px;
	color: #222;
	line-height: 1.1;
}

@media (min-width: 768px) {
	.mach-area-fv--has-bg .mach-area-fv__price {
		justify-content: flex-start;
	}
}

.mach-area-fv__price-label {
	font-size: clamp(1.25rem, 5vw, 2rem);
	font-weight: 900;
}

.mach-area-fv__price-main {
	white-space: nowrap;
	color: #d60000;
	font-weight: 900;
}

.mach-area-fv__price-num {
	font-size: clamp(3.25rem, 15vw, 5.5rem);
	letter-spacing: -0.02em;
}

.mach-area-fv__price-unit {
	font-size: clamp(1.375rem, 5.5vw, 2.25rem);
}

.mach-area-fv__price-tax {
	flex-basis: 100%;
	font-size: 0.875rem;
	font-weight: 700;
	color: #e85c1a;
}

/* 補足（必要工事込み 税込99.8万円〜） */
.mach-area-fv__sub {
	margin: 0 0 10px;
	font-size: clamp(1rem, 4vw, 1.375rem);
	font-weight: 700;
	color: #222;
	white-space: nowrap;
}

.mach-area-fv__sub-price {
	color: #d60000;
	font-weight: 900;
	font-size: 1.15em;
}

.mach-area-fv__note {
	max-width: 760px;
	margin: 0 auto;
	font-size: 0.75rem;
	line-height: 1.6;
	color: #666;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.mach-area-fv__inner {
		padding: 40px 24px 32px;
	}

	.mach-area-fv__price-tax {
		flex-basis: auto;
		font-size: 1rem;
	}
}

/* =====================================================
   対応エリア一覧（/area/・page-area.php）
   - 見出し・パンくずは既存の下層ページ（.works-hero / .page-breadcrumb）、ボタンは既存の .btn .btn-primary を使う
   - 対応エリアの並びは地域TOPと同じ .mach-area-service-list / .mach-area-service-item を使う
   ===================================================== */
.mach-area-hub-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
}

.mach-area-hub-card {
	display: flex;
	flex-direction: column;
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.mach-area-hub-card__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mach-area-hub-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px;
}

.mach-area-hub-card__city {
	margin-bottom: 4px;
	color: var(--clr-primary-dark);
	font-size: clamp(1.25rem, 4vw, 1.5rem);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.mach-area-hub-card__store {
	margin-bottom: 8px;
	font-weight: 700;
	color: var(--clr-text);
}

.mach-area-hub-card__addr {
	margin-bottom: 8px;
	font-size: 0.875rem;
	color: var(--clr-muted);
}

.mach-area-hub-card__label {
	margin: 8px 0 8px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--clr-muted);
}

.mach-area-hub-card__areas {
	justify-content: flex-start;
	margin: 0 0 20px;
}

.mach-area-hub-card__areas .mach-area-service-item {
	padding: 4px 12px;
	font-size: 0.875rem;
}

.mach-area-hub-card__link {
	margin-top: auto;
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;
	text-align: center;
	line-height: 1.4;
}

.mach-area-hub-empty {
	text-align: center;
	color: var(--clr-muted);
}

@media (min-width: 768px) {
	.mach-area-hub-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* 対応エリア一覧の H1: 「対応」など語の途中で改行せず、空白（「マッハ塗装」と「対応エリア」の間）で折り返す */
.mach-area-hub-hero .works-hero-title {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* メイン店舗地域（通常TOP）のカード: タブレット以上では一覧の全幅に横長で置き、残りの地域を2列で並べる
   （写真のある1枚と写真のない地域カードが横並びになって高さが不揃いになるのを避ける） */
@media (min-width: 768px) {
	.mach-area-hub-card--main {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.mach-area-hub-card--main .mach-area-hub-card__photo {
		flex: 0 0 42%;
	}

	.mach-area-hub-card--main .mach-area-hub-card__photo img {
		height: 100%;
		min-height: 240px;
		aspect-ratio: auto;
	}

	.mach-area-hub-card--main .mach-area-hub-card__link {
		align-self: flex-start;
		min-width: 320px;
	}
}

/* 地域固有セクション（template-parts/area/）の見出し:
   語の途中（「外/壁」「那須塩原/市」など）で改行せず、tsk_area_top_heading() が入れた <wbr> の位置で折り返す。
   1つの区切りが画面幅より長い場合に限り、はみ出さないよう任意の位置で折り返す（/area/ の見出しと同じ考え方） */
.mach-area-section .section-title {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* =====================================================
   地域固有セクションの写真・装飾（鹿沼市ページから適用。他地域は設定すれば同じ見た目になる）
   - 写真: 地域別トップ設定の画像ID（intro / housing）を入れたページだけに出る（--has-photo / --has-bg）
   - 劣化・対応エリアの装飾: 設定「地域固有セクションの装飾デザインを使う」をONにしたページだけ（body.is-area-visual）
   - 色は既存の赤（#d60000）・紺（--clr-primary-dark）・グレー系だけを使う
   ===================================================== */

/* ご検討の方へ: 写真と本文を並べる（スマホは写真が上） */
.mach-area-intro__body {
	display: grid;
	gap: 24px;
	max-width: 1000px;
	margin-inline: auto;
}

.mach-area-intro__photo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
}

.mach-area-intro--has-photo .mach-area-text {
	max-width: none;
	margin-inline: 0;
}

@media (min-width: 768px) {
	.mach-area-intro__body {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: 28px;
	}

	.mach-area-intro__photo img {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 1024px) {
	.mach-area-intro__body {
		gap: 40px;
	}
}

/* 住宅事情: 写真をセクション背景に薄く敷き、見出しと本文は白いパネルに載せる */
.mach-area-housing--has-bg {
	position: relative;
	overflow: hidden;
}

.mach-area-housing__bg {
	position: absolute;
	inset: 0;
}

.mach-area-housing__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

.mach-area-housing__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.35);
}

.mach-area-housing--has-bg .container {
	position: relative;
	max-width: 920px;
}

.mach-area-housing--has-bg .container > * {
	background: rgba(255, 255, 255, 0.95);
}

.mach-area-housing--has-bg .section-header {
	margin-bottom: 0;
	padding: 28px 20px 8px;
	border-radius: var(--radius) var(--radius) 0 0;
}

.mach-area-housing--has-bg .mach-area-text {
	max-width: none;
	padding: 8px 20px 28px;
	border-radius: 0 0 var(--radius) var(--radius);
}

/* スマホ: セクション上部に写真の帯を残し、白パネルは左右にも余白を取って背景写真が見えるようにする */
@media (max-width: 767px) {
	.mach-area-housing--has-bg {
		padding-top: 150px;
		padding-bottom: 40px;
	}

	.mach-area-housing--has-bg .container {
		padding-inline: 24px;
	}

	.mach-area-housing__bg::after {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 120px, rgba(255, 255, 255, 0.35) 220px);
	}
}

@media (min-width: 768px) {
	.mach-area-housing--has-bg .section-header {
		padding: 40px 48px 8px;
	}

	.mach-area-housing--has-bg .mach-area-text {
		padding: 8px 48px 40px;
	}
}

/* タブレット: 見出しを1行に収め、「ポイント」だけが2行目に残らないようにする（左右の余白を少し詰める） */
@media (min-width: 768px) and (max-width: 1023px) {
	.mach-area-housing--has-bg .section-header {
		padding-inline: 28px;
	}

	.mach-area-housing--has-bg .mach-area-text {
		padding-inline: 32px;
	}
}

/* =====================================================
   装飾デザインONのページ（body.is-area-visual）
   - 見出し下の短い線・太いカラーボーダー・左のアクセントライン・斜めストライプは使わない
   - 文字の強弱・余白・写真・グリッドで見せ、罫線は情報の区切りに必要な所だけ（1px）
   - 色は既存の赤（#d60000）を軸に、文字色とグレーだけを使う
   ===================================================== */

/* 地域固有セクションの見出し: 共通の「見出し下の赤い短線」（style.css）を出さない */
.is-area-visual .mach-area-section .section-title {
	padding-bottom: 0;
}

.is-area-visual .mach-area-section .section-title::after {
	content: none;
}

/* 劣化: 確認ポイントは罫線で区切った一覧にする（カードにしない。背景は白のまま） */
.is-area-visual .mach-area-deterioration .mach-area-text ul {
	display: grid;
	margin: 1.25rem 0 1.5rem;
	border-top: 1px solid #e3ddd6;
	list-style: none;
}

.is-area-visual .mach-area-deterioration .mach-area-text li {
	position: relative;
	padding: 14px 4px 14px 28px;
	border-bottom: 1px solid #e3ddd6;
	font-weight: 700;
	line-height: 1.6;
	/* 「チョーキ/ング」のような語の途中ではなく「・」「、」の位置で折り返す（収まらない場合のみ任意位置） */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 行頭の小さなチェック（グレーの線だけ。赤は使わない） */
.is-area-visual .mach-area-deterioration .mach-area-text li::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 8px;
	width: 6px;
	height: 11px;
	border: solid #888;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

@media (min-width: 1024px) {
	.is-area-visual .mach-area-deterioration .mach-area-text ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
	}
}

/* 地域FAQ: 本文エリアの締めとして、ごく薄いベージュにする（共通の水色系グレーは使わない） */
.is-area-visual .mach-area-faq {
	background: #f7f6f4;
}

/* -----------------------------------------------------
   店舗のご案内（対応エリア＋アクセス・ご来店）
   page-area-top.php の .mach-area-store で2つのセクションを囲む。
   上部は写真＋薄い赤のオーバーレイ（見出し・対応地域）、その下に2セクション共通の白い面を置き、細い罫線1本で区切る。
   白い面より下の背景は、対応エリア本文の box-shadow で白に塗る（見出しの行数が変わっても崩れない）
   ----------------------------------------------------- */
.mach-area-store {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(rgba(196, 0, 0, 0.72), rgba(176, 0, 0, 0.76)),
		url("../images/area/area-store-bg.jpg") center 30% / cover no-repeat;
}

.is-area-visual .mach-area-store .mach-area-section {
	background: transparent;
}

.is-area-visual .mach-area-store .mach-area-service {
	padding-bottom: 0;
}

.is-area-visual .mach-area-store .mach-area-access {
	padding-top: 0;
}

.is-area-visual .mach-area-store .mach-area-service .section-title {
	color: var(--clr-white);
}

/* 対応地域: 枠・地色を付けず、白い文字の大きさだけで主地域を示す */
.is-area-visual .mach-area-store .mach-area-service-list {
	align-items: baseline;
	gap: 6px 28px;
	margin: 0 auto 36px;
}

.is-area-visual .mach-area-store .mach-area-service-item {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--clr-white);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.is-area-visual .mach-area-store .mach-area-service-item.is-main {
	font-size: 1.5rem;
	font-weight: 900;
}

/* 白い面: 対応エリア本文 → アクセス見出し → アクセス本文 を同じ幅でつなげる */
.is-area-visual .mach-area-store .mach-area-service .mach-area-text {
	padding: 28px 20px 32px;
	background: var(--clr-white);
	border-radius: 4px 4px 0 0;
	box-shadow: 0 calc(100vmax + 96px) 0 100vmax var(--clr-white);
}

.is-area-visual .mach-area-store .mach-area-access .section-header,
.is-area-visual .mach-area-store .mach-area-access .mach-area-text {
	max-width: 860px;
	margin-inline: auto;
	background: var(--clr-white);
}

/* 対応エリアとアクセスの間だけ、通常の細い罫線で区切る */
.is-area-visual .mach-area-store .mach-area-access .section-header {
	margin-bottom: 0;
	padding: 28px 20px 4px;
	border-top: 1px solid #e3ddd6;
	text-align: left;
}

.is-area-visual .mach-area-store .mach-area-access .section-title {
	margin-bottom: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	line-height: 1.4;
}

.is-area-visual .mach-area-store .mach-area-access .mach-area-text {
	padding: 12px 20px 8px;
}

/* 白い面の先頭の表は上の余白を詰める */
.is-area-visual .mach-area-store .mach-area-text > :first-child {
	margin-top: 0;
}

@media (min-width: 768px) {
	.is-area-visual .mach-area-store .mach-area-service-list {
		gap: 6px 36px;
		margin-bottom: 44px;
	}

	.is-area-visual .mach-area-store .mach-area-service-item {
		font-size: 1.375rem;
	}

	.is-area-visual .mach-area-store .mach-area-service-item.is-main {
		font-size: 1.875rem;
	}

	.is-area-visual .mach-area-store .mach-area-service .mach-area-text {
		padding: 44px 48px 40px;
	}

	.is-area-visual .mach-area-store .mach-area-access .section-header {
		padding: 36px 48px 4px;
	}

	.is-area-visual .mach-area-store .mach-area-access .mach-area-text {
		padding: 16px 48px 8px;
	}
}

/* FV下のボタン（template-parts/top/hero-catch.php。共通部品のため装飾デザインのページだけに適用）:
   768〜1023px で「33万円プランの対象か確認する」の最後の1文字だけが改行しないよう、
   文字の長いボタンの幅を広めに配分し、左右の余白を少し詰める（文字サイズは変えない） */
@media (min-width: 768px) and (max-width: 1023px) {
	.is-area-visual .fv-tagline-cta-btn {
		padding-inline: 10px;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.is-area-visual .fv-tagline-cta-btn--plan {
		flex-grow: 1.3;
	}
}

/* =====================================================
   訴求FVスライダー（template-parts/area/fv-slider.php。装飾デザインONのページだけ）
   - 1枚ごとに「写真（右）＋赤い面（左）＋文字」を組み、写真と文字を一緒にフェードで切り替える（assets/js/area-fv.js）
   - 写真は赤い面へグラデーションでなじませる。主役は地域名（白地に赤）と「33万円〜」（最大）
   - 注記はスライドの外に1つだけ置く（PCは右下に小さく）
   - 全スライドを同じセルに重ね（grid）、高さは一番高いスライドに揃える
   ===================================================== */
.mach-area-fvs {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #b80000;
	color: var(--clr-white);
}

.mach-area-fvs__track {
	display: grid;
}

.mach-area-fvs__slide {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.mach-area-fvs__slide.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.7s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.mach-area-fvs__slide,
	.mach-area-fvs__slide.is-active {
		transition: none;
	}
}

/* 写真: スマホは上に帯で置き、下端を赤い面へなじませる */
.mach-area-fvs__media {
	position: relative;
	height: 210px;
}

.mach-area-fvs__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 35%;
}

.mach-area-fvs__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(184, 0, 0, 0) 45%, #b80000 100%);
}

.mach-area-fvs__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: -30px;
	padding: 0 16px 14px;
}

/* 地域名＋導入（地域名は白地に赤） */
.mach-area-fvs__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0 0 6px;
	font-size: clamp(1.125rem, 4.6vw, 1.5rem);
	font-weight: 900;
	line-height: 1.35;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.mach-area-fvs__city {
	display: inline-block;
	padding: 2px 12px 3px;
	background: var(--clr-white);
	color: #d60000;
	font-size: 1.4em;
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

/* 価格（最も大きく） */
.mach-area-fvs__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	margin: 0 0 14px;
	line-height: 1;
}

.mach-area-fvs__price-label {
	font-size: clamp(1.375rem, 6vw, 2.5rem);
	font-weight: 900;
}

.mach-area-fvs__price-main {
	white-space: nowrap;
	font-weight: 900;
}

.mach-area-fvs__price-num {
	font-size: clamp(5rem, 24vw, 10rem);
	letter-spacing: -0.03em;
}

.mach-area-fvs__price-unit {
	font-size: clamp(1.75rem, 8vw, 3.5rem);
}

.mach-area-fvs__price-tax {
	flex-basis: 100%;
	margin-top: 6px;
	font-size: 0.875rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.88);
}

/* 2・3枚目のキャッチ */
.mach-area-fvs__catch {
	margin: 4px 0 14px;
	font-size: clamp(1.75rem, 7.6vw, 3.25rem);
	font-weight: 900;
	line-height: 1.25;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.mach-area-fvs__catch em {
	font-style: normal;
	color: #ffd400;
}

.mach-area-fvs__text {
	margin: 0 0 14px;
	font-size: clamp(0.9375rem, 3.6vw, 1.125rem);
	font-weight: 700;
}

.mach-area-fvs__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	list-style: none;
}

.mach-area-fvs__badges li {
	padding: 5px 12px;
	background: var(--clr-white);
	color: #d60000;
	font-size: clamp(0.8125rem, 3.4vw, 1rem);
	font-weight: 900;
}

/* 店舗名・補足（下段に1行で並べる） */
.mach-area-fvs__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
}

.mach-area-fvs__brand {
	margin: 0;
	font-size: clamp(1rem, 4vw, 1.375rem);
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.mach-area-fvs__points {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	list-style: none;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.5;
}

.mach-area-fvs__points li + li {
	margin-left: 12px;
	padding-left: 12px;
	border-left: 1px solid rgba(255, 255, 255, 0.55);
}

.mach-area-fvs__mini-price {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
}

.mach-area-fvs__mini-price strong {
	margin: 0 2px 0 8px;
	font-size: 1.75rem;
	font-weight: 900;
}

.mach-area-fvs__mini-price strong span {
	font-size: 0.55em;
}

/* 注記（小さく） */
.mach-area-fvs__note {
	order: 3;
	margin: 0;
	padding: 0 16px 14px;
	font-size: 0.6875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

/* ドット・前後ボタン（JS読み込み後に表示） */
.mach-area-fvs__nav {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 4px 16px 12px;
}

.mach-area-fvs__nav[hidden] {
	display: none;
}

.mach-area-fvs__dots {
	display: flex;
	gap: 10px;
}

.mach-area-fvs__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
}

.mach-area-fvs__dot.is-active {
	background: var(--clr-white);
}

.mach-area-fvs__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: transparent;
	color: var(--clr-white);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mach-area-fvs__arrow:hover,
.mach-area-fvs__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

@media (min-width: 768px) {
	.mach-area-fvs {
		min-height: 500px;
	}

	.mach-area-fvs__track {
		flex: 1;
	}

	/* 写真は右側から文字の下まで広く敷き（幅76%）、赤から写真へ長いグラデーションで移す（境界を作らない）。
	   下端は注記が読めるよう少し暗くする */
	.mach-area-fvs__media {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 76%;
		height: auto;
	}

	.mach-area-fvs__media::after {
		background:
			linear-gradient(90deg, #b80000 0%, rgba(184, 0, 0, 0.9) 14%, rgba(184, 0, 0, 0.66) 32%, rgba(184, 0, 0, 0.28) 52%, rgba(184, 0, 0, 0.06) 70%, rgba(184, 0, 0, 0) 82%),
			linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 24%);
	}

	/* 写真に重なる文字が背景に負けないよう、ごく弱い影だけ付ける */
	.mach-area-fvs__body {
		text-shadow: 0 1px 12px rgba(90, 0, 0, 0.35);
	}

	.mach-area-fvs__city,
	.mach-area-fvs__badges {
		text-shadow: none;
	}

	/* 1枚目（外壁を塗る腕とローラー。写真は人物の頭部を含まない範囲で切り出し済み）:
	   赤から写真への移り変わりを短くし、ローラーと外壁をはっきり見せる */
	.mach-area-fvs__media--paint {
		width: 60%;
	}

	.mach-area-fvs__media--paint img {
		object-position: 50% 45%;
	}

	/* 2枚目（現地調査のスタッフ）: 写真の幅を絞って人物を小さめにし、タブレットを持つ手元まで入れる
	   （人物の大写しではなく「住宅地で現地調査をしている場面」として見せる） */
	.mach-area-fvs__media--survey {
		width: 52%;
	}

	.mach-area-fvs__media--survey img {
		object-position: 70% 100%;
	}

	.mach-area-fvs__media--paint::after {
		background:
			linear-gradient(90deg, #b80000 0%, rgba(184, 0, 0, 0.8) 12%, rgba(184, 0, 0, 0.35) 30%, rgba(184, 0, 0, 0) 48%),
			linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 24%);
	}

	.mach-area-fvs__body {
		flex: 1;
		justify-content: center;
		width: 100%;
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 40px 32px 84px;
	}

	.mach-area-fvs__lead {
		font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	}

	.mach-area-fvs__price-tax {
		flex-basis: auto;
		font-size: 1rem;
	}

	.mach-area-fvs__catch {
		max-width: 62%;
	}

	.mach-area-fvs__note {
		position: absolute;
		right: 24px;
		bottom: 16px;
		z-index: 2;
		max-width: min(400px, 34vw);
		padding: 6px 10px;
		background: rgba(0, 0, 0, 0.42);
		color: var(--clr-white);
	}

	.mach-area-fvs__nav {
		position: absolute;
		bottom: 26px;
		left: calc(max(0px, (100% - var(--container-max)) / 2) + 32px);
		z-index: 2;
		padding: 0;
	}
}

/* 1024〜1279px: 税込表記が写真（白い外壁）の上に出ないよう、価格の下の行に置く */
@media (min-width: 1024px) and (max-width: 1279px) {
	.mach-area-fvs__price-tax {
		flex-basis: 100%;
	}
}

/* タブレット: 写真の幅を抑え、税込表記と補足は改行して赤い面の上に収める（白い壁の上に文字を載せない） */
@media (min-width: 768px) and (max-width: 1023px) {
	.mach-area-fvs__media {
		width: 66%;
	}

	.mach-area-fvs__price-tax {
		flex-basis: 100%;
	}

	.mach-area-fvs__foot {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (min-width: 1024px) {
	.mach-area-fvs {
		min-height: 560px;
	}

	.mach-area-fvs__body {
		padding: 48px 40px 96px;
	}

	.mach-area-fvs__nav {
		left: calc(max(0px, (100% - var(--container-max)) / 2) + 40px);
		bottom: 32px;
	}

	.mach-area-fvs__price-label {
		font-size: 2.75rem;
	}

	.mach-area-fvs__price-num {
		font-size: clamp(9rem, 11.5vw, 11rem);
	}

	.mach-area-fvs__price-unit {
		font-size: 4rem;
	}

	.mach-area-fvs__catch {
		font-size: 3.5rem;
	}
}

/* =====================================================
   地域固有セクションの本文の強弱（装飾デザインONのページだけ）
   本文（地域別トップ設定のHTML）で使える部品:
   - <strong>              … 段落の中では太字だけ。まとめ（.mach-area-point）と表の中では太字＋赤
                              （赤は結論・注意点・行動につながる語だけに絞るため、置き場所で色を分ける）
   - ul.mach-area-facts    … 数字・地形などの要点を横に並べる（li > span＋strong。罫線・地色なし）
   - table.mach-area-table … 項目と内容の表（th＝項目、td＝内容）
   - div.mach-area-point   … 結論・注意点のまとめ（p.mach-area-point__title＋本文。枠・地色なし、余白で区切る）
   ===================================================== */
.is-area-visual .mach-area-text strong {
	color: #222;
	font-weight: 700;
}

.is-area-visual .mach-area-text .mach-area-point strong,
.is-area-visual .mach-area-text .mach-area-table strong {
	color: #d60000;
}

/* 要点: 小さな項目名と大きな値を4つ並べる（罫線・カードにしない） */
.is-area-visual .mach-area-text .mach-area-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 12px;
	margin: 0.25rem 0 1.75rem;
	list-style: none;
}

.is-area-visual .mach-area-text .mach-area-facts li {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.is-area-visual .mach-area-text .mach-area-facts span {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--clr-muted);
}

.is-area-visual .mach-area-text .mach-area-facts strong {
	font-size: 1.375rem;
	font-weight: 900;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.is-area-visual .mach-area-text .mach-area-facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.is-area-visual .mach-area-text .mach-area-facts strong {
		font-size: 1.625rem;
	}
}

.is-area-visual .mach-area-text .mach-area-table {
	width: 100%;
	margin: 1.25rem 0 1.5rem;
	border-collapse: collapse;
	background: var(--clr-white);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.is-area-visual .mach-area-text .mach-area-table caption {
	padding-bottom: 8px;
	text-align: left;
	font-weight: 700;
	color: #222;
}

.is-area-visual .mach-area-text .mach-area-table th,
.is-area-visual .mach-area-text .mach-area-table td {
	padding: 12px 14px;
	border: 1px solid #e3ddd6;
	vertical-align: top;
	text-align: left;
}

.is-area-visual .mach-area-text .mach-area-table th {
	width: 30%;
	background: #f9f8f6;
	color: #333;
	font-weight: 700;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* スマホ: 項目を上、内容を下に積む（横スクロールを出さない） */
@media (max-width: 767px) {
	.is-area-visual .mach-area-text .mach-area-table,
	.is-area-visual .mach-area-text .mach-area-table tbody,
	.is-area-visual .mach-area-text .mach-area-table tr,
	.is-area-visual .mach-area-text .mach-area-table th,
	.is-area-visual .mach-area-text .mach-area-table td {
		display: block;
		width: auto;
	}

	.is-area-visual .mach-area-text .mach-area-table caption {
		display: block;
	}

	.is-area-visual .mach-area-text .mach-area-table tr + tr th {
		border-top: none;
	}

	.is-area-visual .mach-area-text .mach-area-table td {
		border-top: none;
	}
}

/* まとめ: 枠・地色は付けず、上の余白と太字の見出しだけで段落から切り離す */
.is-area-visual .mach-area-text .mach-area-point {
	margin: 1.75rem 0 0;
}

.is-area-visual .mach-area-text .mach-area-point p {
	margin-bottom: 0.25rem;
}

.is-area-visual .mach-area-text .mach-area-point p:last-child {
	margin-bottom: 0;
}

.is-area-visual .mach-area-text .mach-area-point__title {
	color: #222;
	font-size: 1rem;
	font-weight: 900;
	line-height: 1.6;
}

.is-area-visual .mach-area-text .mach-area-point ul {
	margin: 0.25rem 0 0 1.25rem;
}

/* =====================================================
   フッターのサイトマップ（template-parts/area/footer-nav.php。装飾デザインONのページだけ）
   - リンクを「費用・プラン」「施工・ご案内」「会社情報・ご相談」に分け、タブレット以上は横3列
   - PCは左に店舗情報、右にサイトマップ。スマホは分類ごとに2列
   ===================================================== */
.is-area-visual .footer-nav-groups {
	display: grid;
	gap: 24px;
}

/* 見出しは下線・赤を使わず、濃いグレーの太字と余白だけで分類を示す（表のような罫線を作らない） */
.is-area-visual .site-footer .footer-nav-title {
	margin-bottom: 0.75rem;
	padding-bottom: 0;
	border-bottom: 0;
	color: #222;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

.is-area-visual .footer-nav-group .footer-nav-list {
	gap: 0.625rem;
}

.is-area-visual .footer-nav-group .footer-nav-list a,
.is-area-visual .mach-area-footer .footer-nav-list a {
	color: #555;
	line-height: 1.6;
}

.is-area-visual .mach-area-footer {
	margin-top: 2.5rem;
}

@media (max-width: 767px) {
	.is-area-visual .footer-nav-group .footer-nav-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 12px;
	}
}

@media (min-width: 768px) {
	.is-area-visual .footer-nav-groups {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 28px;
	}

	.is-area-visual .mach-area-footer .footer-nav-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.625rem 28px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.is-area-visual .footer-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.is-area-visual .footer-inner {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: 4rem;
	}
}

@media (min-width: 768px) {
	/* 外部バナーは縦積みにせず横に並べ、店舗情報の列が縦に伸びないようにする */
	.is-area-visual .footer-city-logo-wrap {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
		max-width: 420px;
	}

	.is-area-visual .footer-city-logo-link,
	.is-area-visual .footer-city-logo-item {
		width: 100%;
		height: 64px;
		padding: 8px;
	}
}

/* =====================================================
   TOP共通セクションの色の整理（装飾デザインONの地域ページで表示される場合だけ）
   HTML（template-parts/top/）と TOP本体の見た目は変えず、このページでの色面だけを落ち着かせる。
   - 使う色: マッハ塗装の赤・白・濃い文字色・ごく薄いベージュ（#f7f6f4）・写真の色
   - 青・黄色の大きな面は使わない（星評価・「1,200件」などの識別用の小さな色は残す）
   - 強い赤の面は FV と施工事例だけに絞る。CTAボタンの赤は残す
   - 画像で作られた部品（相見積もりのバナー・施工の流れの図）は変えない
   ===================================================== */

/* FV下のボタン帯: クリーム色の地・赤い下線・影をやめ、白地に細い罫線だけ。電話ボタンは黄色をやめて濃い文字色の枠に */
.is-area-visual .fv-tagline-block {
	background: var(--clr-white);
	border-bottom: 1px solid #ece8e3;
	box-shadow: none;
}

.is-area-visual .fv-tagline-cta-btn--tel {
	background: var(--clr-white);
	border-color: #333;
	color: #222;
}

/* スマホの電話バナー: 赤い大きな面をやめ、ごく薄いベージュに（FVの赤と連続させない） */
.is-area-visual .sp-contact-banner {
	background: #f7f6f4;
}

.is-area-visual .sp-contact-banner-headline {
	color: #d60000;
}

.is-area-visual .sp-contact-banner-desc {
	color: #333;
}

.is-area-visual .sp-contact-tel-link {
	border: 1px solid #e3ddd6;
}

.is-area-visual .sp-contact-tel-hours {
	color: #666;
}

.is-area-visual .sp-contact-btn--visit {
	background: var(--clr-white);
	border: 1px solid #333;
	color: #222;
}

.is-area-visual .sp-contact-btn--estimate {
	background: #d60000;
	color: var(--clr-white);
}

/* 99.8万円の内訳: 青い地・青い見出し帯をやめ、白い面＋濃い文字に。金額だけ赤 */
.is-area-visual .price-breakdown-section {
	background: #f7f6f4;
}

.is-area-visual .price-breakdown-inner {
	background: var(--clr-white);
	box-shadow: none;
}

.is-area-visual .price-breakdown-title {
	background: var(--clr-white);
	border-bottom: 1px solid #ece8e3;
	color: #222;
	text-shadow: none;
}

.is-area-visual .pbd-size-label {
	background: #f3f0ec;
	color: #555;
}

.is-area-visual .price-highlight {
	color: #d60000;
}

.is-area-visual .price-items {
	background: var(--clr-white);
}

.is-area-visual .price-item {
	border: 1px solid #ece8e3;
	box-shadow: none;
}

.is-area-visual .price-item-name {
	color: #222;
}

.is-area-visual .price-item-price,
.is-area-visual .price-item-tax {
	color: #d60000;
}

.is-area-visual .price-items-mobile-note {
	border-color: #e3ddd6;
}

/* 相見積もり（バナー画像）: 地色をなくして白に */
.is-area-visual .compare-section {
	background: var(--clr-white);
}

/* 相談ブロック: 紺の枠・見出し帯とクリーム色の下段をやめ、赤の見出し帯＋白・薄ベージュに */
.is-area-visual .top-promo-section {
	background: var(--clr-white);
}

.is-area-visual .pc-contact-block {
	border: 1px solid #e3ddd6;
	box-shadow: none;
}

.is-area-visual .pcb-header {
	background: #b80000;
}

.is-area-visual .pcb-header-text {
	text-shadow: none;
}

.is-area-visual .pcb-free-label {
	color: #222;
}

.is-area-visual .pcb-footer {
	background: #f7f6f4;
	border-top: 1px solid #ece8e3;
}

.is-area-visual .pcb-footer-text {
	color: #333;
}

/* 安い理由: 赤い写真背景と黄色いカードをやめ、薄ベージュの地に白い面。見出しの数字・番号だけ赤 */
.is-area-visual .cheap-reasons-section {
	background: #f7f6f4;
}

.is-area-visual .cheap-reasons-section::before {
	content: none;
}

.is-area-visual .cheap-reasons-title {
	color: var(--clr-primary-dark);
	text-shadow: none;
}

.is-area-visual .cheap-reasons-title .cr-highlight {
	color: #d60000;
}

.is-area-visual .cheap-reason-card {
	background: var(--clr-white);
	border: 1px solid #ece8e3;
	border-radius: 8px;
	box-shadow: none;
}

.is-area-visual .cheap-reason-number {
	border: 0;
	box-shadow: none;
}

.is-area-visual .cheap-reasons-btn {
	background: var(--clr-white);
	border: 2px solid #d60000;
	box-shadow: none;
	color: #d60000;
}

@media (max-width: 767px) {
	.is-area-visual .cheap-reasons-dots .tsk-mobile-dot {
		background: rgba(0, 0, 0, 0.18);
	}

	.is-area-visual .cheap-reasons-dots .tsk-mobile-dot.is-active {
		background: #d60000;
	}
}

/* 施工の流れ（図は画像のまま）: 青みのグラデーションの地をやめて白に */
.is-area-visual .top-flow-section {
	background: var(--clr-white);
}

/* 施工事例: 写真＋赤の面は残し、黄色いボタンだけ白に */
.is-area-visual .works-more-button {
	background: var(--clr-white);
	box-shadow: none;
}

/* お客様の声・よくある質問: 地色をそろえ、見出し下の赤い短線を出さない。Qの丸は濃い文字色に */
.is-area-visual .google-reviews-section {
	background: var(--clr-white);
}

.is-area-visual #faq {
	background: #f7f6f4;
}

.is-area-visual #voice .section-title,
.is-area-visual #faq .section-title {
	padding-bottom: 0;
}

.is-area-visual #voice .section-title::after,
.is-area-visual #faq .section-title::after {
	content: none;
}

.is-area-visual .faq-q-badge {
	background-color: #333;
}

/* マッハ通信の下の区切り: 灰色の細い線だけ残し、中央の赤い短線を出さない */
.is-area-visual .home-section-divider span::before {
	content: none;
}

/* =====================================================
   スマートフォン表示（767px以下。装飾デザインONの地域ページだけ。768px以上の見た目は変えない）
   ===================================================== */

/* FV: 写真は上にそのまま（赤のグラデーションを重ねない）、文字は写真の下の白い面に置く。
   赤は地域名の地・価格・強調だけ。写真と文字は同じスライドの中にあり、一緒に切り替わる */
@media (max-width: 767px) {
	.mach-area-fvs {
		background: var(--clr-white);
		border-bottom: 1px solid #ece8e3;
		color: #222;
	}

	.mach-area-fvs__media {
		height: 220px;
	}

	.mach-area-fvs__media::after {
		content: none;
	}

	.mach-area-fvs__media--paint img {
		object-position: 50% 40%;
	}

	.mach-area-fvs__media--survey img {
		object-position: 72% 30%;
	}

	.mach-area-fvs__body {
		margin-top: 0;
		padding: 18px 16px 6px;
		background: var(--clr-white);
	}

	.mach-area-fvs__city {
		background: #d60000;
		color: var(--clr-white);
	}

	.mach-area-fvs__price-main {
		color: #d60000;
	}

	.mach-area-fvs__price-tax {
		color: #666;
	}

	.mach-area-fvs__catch em {
		color: #d60000;
	}

	.mach-area-fvs__text {
		color: #333;
	}

	.mach-area-fvs__badges li {
		border: 1px solid #e3ddd6;
		color: #222;
	}

	.mach-area-fvs__points {
		color: #555;
	}

	.mach-area-fvs__points li + li {
		border-left-color: #d6d0c9;
	}

	.mach-area-fvs__mini-price strong {
		color: #d60000;
	}

	.mach-area-fvs__nav {
		gap: 10px;
		padding: 6px 16px 8px;
	}

	.mach-area-fvs__arrow {
		width: 28px;
		height: 28px;
		border-color: #d6d0c9;
		color: #333;
		font-size: 18px;
	}

	.mach-area-fvs__arrow:hover,
	.mach-area-fvs__arrow:focus-visible {
		background: #f7f6f4;
	}

	.mach-area-fvs__dot {
		width: 8px;
		height: 8px;
		background: #d6d0c9;
	}

	.mach-area-fvs__dot.is-active {
		background: #d60000;
	}

	.mach-area-fvs__note {
		padding: 0 16px 12px;
		font-size: 0.625rem;
		color: #888;
	}
}

/* 住宅事情: 写真は上に帯で見せ、見出しと本文は写真の下の白い面に置く（写真の上に文章を載せない） */
@media (max-width: 767px) {
	.is-area-visual .mach-area-housing--has-bg {
		padding-top: 0;
		background: var(--clr-white);
	}

	.is-area-visual .mach-area-housing__bg {
		position: relative;
		height: 200px;
	}

	.is-area-visual .mach-area-housing__bg::after {
		content: none;
	}

	.is-area-visual .mach-area-housing--has-bg .container {
		padding: 32px 16px 0;
	}

	.is-area-visual .mach-area-housing--has-bg .container > * {
		background: transparent;
	}

	.is-area-visual .mach-area-housing--has-bg .section-header {
		padding: 0;
		margin-bottom: 1.25rem;
	}

	.is-area-visual .mach-area-housing--has-bg .mach-area-text {
		padding: 0;
	}
}

/* アコーディオン（assets/js/area-fold.js がスマホでだけ作るボタンと、折りたたんだ要素） */
.is-area-visual .mach-area-text [hidden],
.is-area-visual .mach-area-text .mach-area-table[hidden],
.is-area-visual .mach-area-text .mach-area-table tr[hidden] {
	display: none;
}

.mach-area-fold-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 1.25rem 0 0;
	padding: 12px 16px;
	border: 1px solid #d6d0c9;
	border-radius: 4px;
	background: var(--clr-white);
	color: #222;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}

.mach-area-fold-btn::after {
	content: "";
	width: 7px;
	height: 7px;
	border: solid #555;
	border-width: 0 2px 2px 0;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.mach-area-fold-btn[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(-135deg);
}

.mach-area-fold-btn:focus-visible {
	outline: 2px solid #222;
	outline-offset: 2px;
}

.mach-area-fold-btn[hidden] {
	display: none;
}

/* 開いた要素は短く下へ広がるように表示する */
.is-area-visual .mach-area-text .is-unfolding {
	animation: mach-area-unfold 0.22s ease-out;
}

@keyframes mach-area-unfold {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-area-visual .mach-area-text .is-unfolding {
		animation: none;
	}

	.mach-area-fold-btn::after {
		transition: none;
	}
}

@media (min-width: 768px) {
	.mach-area-fold-btn {
		display: none;
	}
}

/* フッターのサイトマップ: 「トップページ」は3分類の上に起点として1行で置く */
/* 分類の見出しと見分けられるよう、通常のリンクと同じ太さ・色にする */
.is-area-visual .footer-nav-home {
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	line-height: 1.6;
}

.is-area-visual .footer-nav-home a {
	color: #555;
	text-decoration: none;
}

.is-area-visual .footer-nav-home a:hover {
	color: #d60000;
}

/* FV 2枚目の導入: 「鹿沼市で」を1つのまとまりにし、続きは幅が足りないときだけ次の行に送る
   （助詞の「で」は地域名の枠に寄せる） */
.mach-area-fvs__lead--split {
	column-gap: 0;
}

.mach-area-fvs__lead--split .mach-area-fvs__city {
	margin-right: 4px;
}

/* スマホFV: 3枚の高さをそろえるときの余りは、文字エリアの下にためず上下に分ける。
   3枚目の補足は1行に収め、ほかのスライドとの高さの差を小さくする */
@media (max-width: 767px) {
	.mach-area-fvs__body {
		flex: 1;
		justify-content: center;
	}

	.mach-area-fvs__text {
		font-size: 0.8125rem;
	}
}