/* =====================================================================
 * area.css — エリアTOP（2p）・県別エリア（2i）・市区町村別（2q）だけの指定
 * ---------------------------------------------------------------------
 * 面（全幅の青・全幅の水色・白い箱・セクションの並び・FAQ の見た目）は
 * components.css の共通部品に置いてある。ここには 2i・2q 固有のものだけを書く。
 *
 * 2ページは同じテンプレート（taxonomy-case_area.php）で、県か市区町村かを
 * 出し分けている。CSS も1枚にまとめてある。
 *
 * 【面の配分】
 *   FV            青の箱（写真なし）
 *   対応市区町村（2i）／対応メニュー（2q）  全幅の青（水玉）← 主役
 *   施工事例      全幅の水色
 *   補助金・スタッフ・地域メモ  白い箱／白いカード
 *   FAQ           白いカード＋グレーの水玉
 *   CTA           黄色の帯
 *
 * クラス名は .ar-* で、pages.css の旧スタイル（2026-10-22 に削除）とは別にしてある。
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * FV
 * 写真を敷かないので、交換ページの写真用グラデーションと楕円は止める。
 * ------------------------------------------------------------------- */
.hero--area .hero__box::after { content: none; }
.hero--area .hero__catch { gap: 8px; }
.hero--area .hero__catch-label { font-size: 19px; line-height: 1.4; }
/* 言い切りの側を大きく。県名・市区町村名の長さで折り返しが変わるので、
 * 帯は2枚に分けて、それぞれが1行に収まらなくても崩れない形にする。 */
.hero--area .hero__catch-label--strong { font-size: 26px; padding-block: 4px; }

/* 準備中のページ（事例も地域メモも無い市区町村）に出す一文。
 * 青い面の上なので、白い枠線だけで囲って本文と区別する。 */
.ar-stub {
	position: relative;
	z-index: 3;
	margin-top: 16px;
	padding: 12px 16px;
	border: 2px solid rgba(255, 255, 255, .5);
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.7;
	font-weight: var(--fw-medium);
	color: #fff;
}

/* ---------------------------------------------------------------------
 * 対応市区町村（2i・青い面の上）
 * 数が多い（1県あたり20〜60）ので、カードではなくバッジで並べる。
 * カードにすると縦に伸びて、下のセクションまで見えなくなる。
 * ------------------------------------------------------------------- */
.ar-cities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ar-cities a {
	display: block;
	padding: 12px 8px;
	border-radius: 6px;
	background: #fff;
	color: var(--fig-blue-60);
	font-size: 15px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ar-cities a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* エリアブロック（県北・県央・県南）ごとのまとまり。青い面の上なので見出しは白 */
.ar-city-group { display: flex; flex-direction: column; gap: 10px; }
.ar-city-group__name { font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold); color: #fff; }

/* ---------------------------------------------------------------------
 * 対応メニュー（2q・青い面の上）
 * ------------------------------------------------------------------- */
.ar-menu { display: grid; gap: 12px; }
.ar-menu__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 20px 16px;
	border-radius: 20px;
	background: #fff;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ar-menu__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ar-menu__name {
	font-size: 20px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.ar-menu__note {
	font-size: 15px;
	line-height: 1.6;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* ---------------------------------------------------------------------
 * 県で使える補助金
 * TOP・料金表のような写真つきの面にはしない。県ごとに敷ける写真が無く、
 * 7県で同じ1枚を使うと、その県の写真ではないことがかえって目立つ。
 * ------------------------------------------------------------------- */
.ar-subsidy { align-items: center; text-align: center; gap: 12px; }
.ar-subsidy .tag { font-size: 13px; padding: 4px 12px; border-radius: 6px; }
.ar-subsidy__lead {
	font-size: 16px;
	line-height: 1.9;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
/* 「当社が調べて申請まで代行」は太字だけにする（黄色の線は金額にだけ引く。2026-10-14 jojiさんの指示）。 */
.ar-subsidy__lead b { font-weight: var(--fw-bold); }

/* ---------------------------------------------------------------------
 * 担当スタッフ（独自性の核①）
 * 顔写真は正方形（制作メモ）。まだ1人も登録が無いので、いまは
 * 点線の枠（image-ph）が出る。
 * ------------------------------------------------------------------- */
.ar-staff { display: grid; gap: 16px; }
.ar-staff__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
	text-align: center;
}
.ar-staff__photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 4px;
}
.ar-staff__name {
	font-size: 20px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.ar-staff__role,
.ar-staff__cert {
	font-size: 14px;
	line-height: 1.6;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-50);
}
/* 資格はバッジにする。名前や肩書きと同じ見た目で続けると、どこまでが
 * 人の説明でどこからが資格か分からなくなる。 */
.ar-staff__cert {
	padding: 4px 12px;
	border-radius: 6px;
	background: var(--fig-blue-20);
	color: var(--fig-blue-60);
	font-weight: var(--fw-bold);
}
.ar-staff__word {
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
	text-align: left;
}

/* ---------------------------------------------------------------------
 * この地域のお客様へ（独自性の核②）
 * ------------------------------------------------------------------- */
.ar-note {
	font-size: 16px;
	line-height: 1.9;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
	text-align: center;
}

/* ---------------------------------------------------------------------
 * 隣接エリア・近隣
 * ------------------------------------------------------------------- */
.ar-near { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ar-near__label {
	font-size: 15px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
}
.ar-near__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* 交換ページの地域バッジと同じ（水色の面に青文字・角丸6）。 */
.ar-near__list a {
	display: block;
	padding: 8px 20px;
	border-radius: 6px;
	background: var(--fig-blue-30);
	color: var(--fig-blue-60);
	font-size: 15px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	transition: transform .15s ease, background .15s ease;
}
.ar-near__list a:hover { transform: translateY(-2px); background: var(--fig-blue-40); color: #fff; }

/* =====================================================================
 * PC（600 以上。交換ページ・TOP と同じ）
 * ===================================================================== */
@media (min-width: 600px) {
	/* --- FV --- */
	.hero--area .hero__catch { gap: calc(12 * var(--u)); }
	.hero--area .hero__catch-label { font-size: max(calc(20 * var(--ff)), calc(30 * var(--u))); padding: calc(6 * var(--u)) calc(24 * var(--u)); }
	.hero--area .hero__catch-label--strong { font-size: max(calc(30 * var(--ff)), calc(44 * var(--u))); padding: calc(4 * var(--u)) calc(24 * var(--u)); }
	.ar-stub { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); padding: calc(14 * var(--u)) calc(20 * var(--u)); margin-top: calc(20 * var(--u)); }

	/* --- 対応市区町村：4列 --- */
	.ar-cities { grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); }
	.ar-cities a { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); padding: calc(14 * var(--u)) calc(12 * var(--u)); }
	.ar-city-group { gap: calc(16 * var(--u)); }
	.ar-city-group__name { font-size: max(calc(15 * var(--ff)), calc(20 * var(--u))); }

	/* --- 対応メニュー：3列 --- */
	.ar-menu { grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
	.ar-menu__card { padding: calc(32 * var(--u)) calc(24 * var(--u)); gap: calc(12 * var(--u)); }
	.ar-menu__name { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.ar-menu__note { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }

	/* --- 補助金 --- */
	.ar-subsidy { gap: calc(16 * var(--u)); }
	.ar-subsidy .tag { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); padding: calc(6 * var(--u)) calc(20 * var(--u)); }
	.ar-subsidy__lead { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }
	.ar-subsidy__lead b { background-size: 100% 10px; }

	/* --- 担当スタッフ：3列 --- */
	.ar-staff { grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
	.ar-staff__card { padding: calc(32 * var(--u)) calc(24 * var(--u)); gap: calc(10 * var(--u)); }
	.ar-staff__photo { width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
	.ar-staff__name { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }
	.ar-staff__role, .ar-staff__cert { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.ar-staff__word { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }

	/* --- 地域メモ --- */
	.ar-note { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }

	/* --- 隣接エリア --- */
	.ar-near { gap: calc(16 * var(--u)); }
	.ar-near__label { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.ar-near__list { gap: calc(16 * var(--u)); }
	.ar-near__list a { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); padding: calc(10 * var(--u)) calc(28 * var(--u)); }
}

/* =====================================================================
 * エリアTOP（2p）— page-area.php
 * ---------------------------------------------------------------------
 * 先頭は「お住まいの地域までの対応スピード」（共通部品 template-parts/area-map.php）。
 * ===================================================================== */
.ar-text {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* 導線を包む白い箱。地の上にボタンだけが宙に浮かないようにする。
 * エリアTOP（導線3本）と県・市区町村ページ（導線＋隣接エリア）で使う。 */
.ar-links {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
}
/* 県・市区町村ページで、ボタンと隣接エリア（近隣の地域）を2段に分ける点線。
 * 隣接県が無い県で線だけ残らないよう、線は隣接エリア側に付ける。 */
.ar-links .ar-near { padding-top: 24px; border-top: 2px dashed var(--fig-blue-30); }

/* エリアTOP（2p）の押せる地図。見た目は他のページの地図（area-map.svg）と同じ。
 * 県に乗せる・下の県ボタンに乗せると、その県だけ濃い水色になる（main.js が is-on を付ける）。 */
.ar-map { display: block; width: 100%; height: auto; }
.ar-map__pref path { fill: var(--fig-blue-30); transition: fill .15s ease; }
.ar-map__pref:hover path,
.ar-map__pref:focus-visible path,
.ar-map__pref.is-on path { fill: var(--fig-blue-40); }
.ar-map__rings { pointer-events: none; }

/* 地図の下の7県ボタン。白地に濃い青の枠と矢印（2026-10-19 B案）。
 * スマホ2列・タブレット4列・PC7列。端数の行（スマホの7つめ、タブレットの2行目）は中央に寄せる。 */
.ar-prefs-lead { text-align: center; font-size: 16px; line-height: 1.6; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.ar-prefs { --gap: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.ar-prefs li { flex: 0 0 calc((100% - var(--gap)) / 2); }
.ar-prefs a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 8px;
	border-radius: 80px;
	background: #fff;
	border: 2px solid var(--fig-blue-60);
	color: var(--fig-blue-60);
	font-size: 16px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	transition: background .15s ease, color .15s ease;
}
.ar-prefs a::after { content: "→"; color: var(--fig-blue-40); }
.ar-prefs a:hover,
.ar-prefs a.is-on { background: var(--fig-blue-60); color: #fff; }
.ar-prefs a:hover::after,
.ar-prefs a.is-on::after { color: #fff; }

@media (min-width: 600px) {
	.ar-text { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.ar-links { padding: calc(40 * var(--u)); gap: calc(32 * var(--u)); }
	.ar-links .ar-near { padding-top: calc(32 * var(--u)); }
	.ar-prefs-lead { font-size: max(calc(16 * var(--ff)), calc(22 * var(--u))); }
	.ar-prefs { --gap: calc(16 * var(--u)); }
	.ar-prefs li { flex-basis: calc((100% - var(--gap) * 3) / 4); }
	.ar-prefs a { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); padding: calc(16 * var(--u)) calc(8 * var(--u)); }
}

@media (min-width: 1024px) {
	.ar-prefs li { flex-basis: calc((100% - var(--gap) * 6) / 7); }
}