/* ============================================================
   top.css - トップページ（front-page）専用スタイル
   ・lib/parts/top-*.php のインライン style をここに集約する。
   ・@keyframes pulseDot は common.css で定義済み（重複させない）。
   ・画像は CSS からの相対パス（../images/）で参照する。
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero {
	padding: var(--wp--preset--spacing--section-lg) clamp(18px, 4vw, 40px) var(--wp--preset--spacing--section);
	font-weight: 500;
	font-size: var(--text-base);
	background-color: var(--bg-subtle);
}

.hero-head {
	max-width: 760px;
	margin: 0 auto clamp(34px, 5vw, 52px);
	text-align: center;
}
.hero-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-sm);
	margin-bottom: 20px;
}
.hero-eyebrow-line {
	width: 26px;
	height: 1px;
	background: var(--accent);
}
.hero-eyebrow-text {
	font-size: var(--text-md);
	letter-spacing: .1px;
	color: var(--accent);
	font-weight: 500;
}
.hero-h1 {
	font-family: var(--font-serif);
	font-weight: 900;
	color: var(--ink);
	font-size: var(--text-2xl);
	line-height: 1.34;
	text-wrap: balance;
	padding-left: 1em;
}
.hero-lead {
	margin: 22px auto 0;
	max-width: 33em;
	font-size: var(--text-base);
	color: var(--ink2);
	line-height: 2;
}

/* --- 2 枚のカード --- */
.hero-cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-md);
}
.hero-card {
	position: relative;
	min-height: clamp(300px, 40vh, 430px);
	border-radius: 8px; /* reason: 画像カードとして面を持たせるため（スケール値 8 を採用） */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.hero-card--bousai {
	flex: 3 1 380px;
	background: var(--ink2) url(../images/img-bousai.avif) center/cover no-repeat;
}
.hero-card--hita {
	flex: 2 1 300px;
	background: var(--hero-hita-bg) url(../images/img-hita.avif) center/cover no-repeat;
}

/* 画像の上に文字を読ませるためのスクリム */
.hero-card-scrim {
	position: absolute;
	inset: 0;
}
.hero-card--bousai .hero-card-scrim {
	background: var(--scrim-bousai);
}
.hero-card--hita .hero-card-scrim {
	background: var(--scrim-hita);
}

.hero-card-badge {
	position: absolute;
	top: 16px;
	left: 24px;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ink2);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: 99px; /* reason: ピル形状のバッジ。意図的な形状のため許容（design-file/CLAUDE.md） */
	background-color: var(--hozon);
}

.hero-card-body {
	position: relative;
	padding: var(--wp--preset--spacing--50);
}
.hero-card-label {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	letter-spacing: .16em;
	color: var(--paper);
	font-weight: 700;
}
.hero-card-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--paper);
	margin-top: 10px;
	line-height: 1.3;
}
.hero-card-text {
	font-size: var(--text-sm);
	color: var(--text-on-dark);
	margin-top: 12px;
	max-width: 23em;
	line-height: 1.85;
}
.hero-card--hita .hero-card-text {
	max-width: 20em;
}
.hero-card-btn {
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-sm);
	border-radius: 4px;
	font-weight: 700;
	font-size: var(--text-sm);
}
/* 2 枚ともボタンが 2 本。狭いカード幅では 1 本ずつ縦に積む。
   margin-top はこの束が 1 つ持てばよいので、中のボタンからは外す。 */
.hero-card-actions {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
}
.hero-card-actions .hero-card-btn {
	margin-top: 0;
}
.hero-card-btn--primary {
	background: var(--hozon);
	color: var(--ink2);
	padding: var(--wp--preset--spacing--30) 24px;
	border: 1.5px solid var(--hozon); /* 隣の枠線ボタン（--ghost）と高さを揃える */
}
.hero-card-btn--ghost {
	background: transparent;
	color: var(--paper);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1.5px solid var(--border-on-dark);
	transition: background-color .25s ease, color .25s ease;
}
.hero-card-btn--ghost:hover {
	background: var(--paper);
	color: var(--ink);
}
/* 購入導線。写真の上でも沈まないよう、面は白で取り文字を --water で置く
   （--water をそのまま背景にすると、青緑の写真に溶けて輪郭が消える）。 */
.hero-card-btn--buy {
	background: var(--paper);
	color: var(--water);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1.5px solid var(--paper);
	transition: background-color .25s ease, color .25s ease;
}
.hero-card-btn--buy:hover {
	background: var(--water);
	color: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
	.hero-card-btn--ghost,
	.hero-card-btn--buy {
		transition: none;
	}
}

/* ============================================================
   直近の防災情報
   ============================================================ */
.safety {
	color: var(--cream);
	position: relative;
	overflow: hidden;
	background-color: var(--safety-bg);
}
.safety-inner {
	position: relative;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--section) clamp(18px, 4vw, 40px);
	font-weight: 500;
}

/* --- 見出し --- */
.safety-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap-md);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.safety-live {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
	margin-bottom: 14px;
}
.safety-live-dot {
	position: relative;
	display: flex;
	width: 9px;
	height: 9px;
}
.safety-live-dot-ping {
	position: absolute;
	inset: 0;
	border-radius: 50%; /* reason: 完全な丸。意図的な形状のため許容（design-file/CLAUDE.md） */
	background: var(--live-dot);
	animation: pulseDot 2s infinite;
}
.safety-live-dot-core {
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 50%; /* reason: 完全な丸。意図的な形状のため許容（design-file/CLAUDE.md） */
	background: var(--live-dot);
}
.safety-live-label {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	letter-spacing: .22em;
	color: var(--paper);
	font-weight: 700;
}
.safety-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-lg);
	letter-spacing: .04em;
}
.safety-sub {
	margin-top: 10px;
	color: var(--paper);
	font-size: var(--text-sm);
}
.safety-updated {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--paper);
	font-weight: 500;
}

/* --- 統計 ---
   カードは「地震回数 / 最大震度」の 2 枚が基本で、台風は発生中のみ 3 枚目として増える。
   台風シーズンは実質 7〜10月なので、年間の大半は 2 列がこのセクションの通常状態。
   区切り線は gap 1px の隙間から親の背景を覗かせて描いているため、枚数が変わっても
   自動で追従する（最後のカードの後ろには線が出ない）。 */
.live-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	border: 1px solid var(--line-on-dark);
	border-radius: 4px;
	overflow: hidden;
}
.live-stats--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.live-stat {
	/* 数字と余白をカード幅基準で可変にするためのコンテナ（--text-stat が cqi を使う） */
	container-type: inline-size;
	padding: clamp(20px, 5cqi, 32px);
	background-color: var(--surface-on-dark);
}
.live-stat-label {
	font-size: var(--text-sm);
	color: var(--paper);
	letter-spacing: .02em;
}
.live-stat-value {
	display: flex;
	align-items: flex-end;
	gap: var(--gap-sm);
	margin-top: 14px;
}
.live-stat-num {
	font-family: var(--font-serif);
	font-size: var(--text-stat);
	font-weight: 700;
	line-height: .9;
}
.live-stat-num--accent {
	color: var(--hozon);
}
.live-stat-unit {
	font-size: var(--text-base);
	color: var(--paper);
}
.live-stat-unit--lead {
	font-size: var(--text-md);
}
.live-stat-note {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--paper);
}
.live-stat-typhoon {
	display: flex;
	align-items: baseline;
	gap: var(--gap-sm);
	margin-top: 14px;
}
.live-stat-typhoon-name {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1;
	/* 数字カード（--text-stat）と高さを揃えるため、行の高さを合わせる */
	min-height: var(--text-stat);
	display: flex;
	align-items: center;
}
.live-stat-typhoon-meta {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--paper);
}

/* 台風が複数発生しているとき。カードは増やさず、この 1 枚の中に行として並べる。
   min-height は 1 つのときの .live-stat-typhoon-name と同じ値にして、
   台風の数が変わってもカードの高さが隣（数字カード）とずれないようにする。 */
.live-stat-typhoon-list {
	margin-top: 14px;
	min-height: var(--text-stat);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	list-style: none;
}
.live-stat-typhoon-row {
	display: flex;
	align-items: baseline;
	gap: var(--gap-sm);
	/* 3 列のまま最も狭くなる 760px 付近では、台風名（最大 40px）と位置が
	   1 行に収まらない。名前を潰さず、位置を次の行に落として逃がす。 */
	flex-wrap: wrap;
}
.live-stat-typhoon-row-name {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
.live-stat-typhoon-row-place {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--paper);
}

/* --- 地震リスト / CTA --- */
.safety-body {
	margin-top: clamp(22px, 3vw, 32px);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-lg);
	align-items: stretch;
	color: var(--paper);
}
.safety-quakes {
	flex: 1 1 360px;
	min-width: 280px;
}
.safety-quakes-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--gap-sm);
}
.safety-quakes-label {
	font-family: var(--font-en);
	font-size: var(--text-xs);
	letter-spacing: .18em;
	color: var(--paper);
	font-weight: 700;
}
.safety-quakes-note {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--cream);
}
.safety-quakes-list {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
}
.quake-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	gap: var(--gap-sm);
	align-items: center;
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--line-on-dark);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}
.quake-date,
.quake-mag {
	font-family: var(--font-en);
	color: var(--paper);
}
.quake-place {
	font-family: var(--font-sans);
	color: var(--cream);
}
.quake-shindo {
	color: var(--hozon);
	font-weight: 500;
}

.safety-cta {
	flex: 1 1 280px;
	min-width: 280px;
	background: var(--surface-on-dark);
	border: 1px solid var(--line-on-dark);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--50);
	font-weight: 700;
	color: var(--paper);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.safety-cta-title {
	font-family: var(--font-serif);
	font-size: var(--text-ml);
	font-weight: 600;
	margin-bottom: 10px;
	line-height: 1.5;
}
.safety-cta-text {
	font-size: var(--text-sm);
	color: var(--paper);
	line-height: 1.9;
}
.safety-cta-link {
	margin-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	color: var(--hozon);
	font-weight: 700;
	font-size: var(--text-sm);
}
/* 外部リンク（気象庁）。主導線（備蓄シミュレーション）より一段引かせる。 */
.safety-cta-link--ext {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--paper);
}

/* 狭幅では段組みを減らす（3 列時のみ 2 列へ落とし、最終的に 1 列） */
@media (max-width: 760px) {
	.live-stats--cols-3 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
@media (max-width: 520px) {
	.live-stats,
	.live-stats--cols-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
   お知らせ
   ============================================================ */
.news {
	background-color: var(--bg-subtle);
	width: 100%;
	max-width: 100%;
}
.news-inner {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--section) clamp(18px, 4vw, 40px);
	box-sizing: border-box;
}
.news-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap-md);
	margin-bottom: clamp(24px, 3vw, 36px);
}
.news-eyebrow {
	font-family: var(--font-en);
	font-size: var(--text-sm);
	letter-spacing: .22em;
	color: var(--accent);
	font-weight: 700;
}
.news-title-head {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--ink);
	margin-top: 8px;
}
.news-more {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--ink2);
}
.news-list {
	display: flex;
	flex-direction: column;
}
.news-item {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	gap: var(--gap-md);
	align-items: center;
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--line);
}
.news-date {
	font-family: var(--font-en);
	font-size: var(--text-sm);
	color: var(--muted);
	font-weight: 500;
}
.news-cat {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .04em;
	border-radius: 99px; /* reason: ピル形状のカテゴリラベル。意図的な形状のため許容（design-file/CLAUDE.md） */
	color: var(--paper);
	white-space: nowrap;
	width: 88px;
	text-align: center;
	padding: 4px 8px;
	background-color: var(--brand);
	max-height: 32px;
}
.news-title {
	font-weight: 500;
	color: var(--ink);
	font-size: var(--text-base);
}
.news-empty {
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--line);
	color: var(--muted);
}
.news-foot-line {
	border-top: 1px solid var(--line);
}

.news-item:hover .news-title {
	color: var(--link-hover);
}
/* 狭幅では日付・カテゴリを上段、タイトルを下段に */
@media (max-width: 560px) {
	.news-item {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 6px;
	}
	.news-item .news-title {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   防災グッズ販売（HOZONHOZON）
   ============================================================ */
.hozon {
	background-color: var(--paper);
}
.hozon-inner {
	max-width: var(--content-width);
	margin: 0 auto;
}
/* 2 列化は 900px 以上のみ（末尾のレスポンシブ参照）。
   1 列のときは DOM 順どおり「上＝テキスト / 下＝写真」になる。 */
.hozon-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
.hozon-body {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--section-lg) clamp(18px, 4vw, 40px);
}
.hozon-eyebrow {
	font-family: var(--font-en);
	font-size: var(--text-sm);
	letter-spacing: .2em;
	color: var(--hozon);
	font-weight: 700;
}
.hozon-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--ink);
	margin-top: 12px;
	line-height: 1.4;
}
.hozon-lead {
	margin-top: 18px;
	font-size: var(--text-base);
	color: var(--ink2);
	line-height: 2;
	max-width: 38em;
	font-weight: 500;
}
.hozon-links {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}
.hozon-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-md);
	padding: var(--wp--preset--spacing--30) 2px;
	border-bottom: 1px solid var(--line);
	font-weight: 700;
	font-size: var(--text-base);
	color: var(--ink);
}
.hozon-link .ar {
	color: var(--ink2);
}
.hozon-actions {
	margin-top: 26px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
}
.hozon-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-radius: 4px;
	font-weight: 700;
	font-size: var(--text-base);
}
.hozon-btn--primary {
	background: var(--hozon);
	color: var(--ink);
}
.hozon-btn--outline {
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
}
.hozon-visual {
	box-sizing: border-box;
	align-self: stretch;
	margin-right: min(0px, calc((1360px - 100vw) / 2));
}
.hozon-visual-img {
	position: relative;
	height: 100%;
	min-height: clamp(320px, 42vh, 460px);
	overflow: hidden;
	background: var(--ink2) url(../images/img-bousai.avif) center/cover no-repeat;
}

/* ============================================================
   HOZONHOZON
   親セクション（防災グッズ販売）と地続きに見えないよう、背景を
   --bg-subtle に落として区切る。--hozon（黄）は面に敷くと彩度が
   立ちすぎ、文字に使うと --bg-subtle 上でコントラストが取れない。
   ============================================================ */
.hozonhozon {
	background-color: var(--bg-subtle);
}
.hozonhozon-inner {
	max-width: var(--content-width);
	margin: 0 auto;
}
/* 2 列化は 900px 以上のみ（末尾のレスポンシブ参照）。
   1 列のときは DOM 順どおり「上＝テキスト / 下＝バナー」になる。 */
.hozonhozon-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
.hozonhozon-body {
	box-sizing: border-box;
	min-width: 0;
	padding: var(--wp--preset--spacing--section-lg) clamp(18px, 4vw, 40px);
}
/* ワードマーク（145.95 x 25.54）。他セクションの eyebrow の位置に置く。 */
.hozonhozon-logo {
	display: block;
	width: clamp(180px, 20vw, 240px);
	aspect-ratio: 1460 / 255;
	background: url(../images/logo-hozon.svg) left center/contain no-repeat;
}
.hozonhozon-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--ink);
	margin-top: 20px;
	line-height: 1.5;
}
.hozonhozon-catch {
	margin-top: 8px;
	font-size: var(--text-base);
	color: var(--accent);
	font-weight: 700;
}
.hozonhozon-lead {
	margin-top: 20px;
	font-size: var(--text-base);
	color: var(--ink2);
	line-height: 2;
	max-width: 38em;
	font-weight: 500;
}
.hozonhozon-actions {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
}
.hozonhozon-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	background: var(--brand);
	color: var(--paper);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid transparent; /* 隣の枠線ボタン（--outline）と高さを揃える */
	border-radius: 4px;
	font-weight: 700;
	font-size: var(--text-base);
}
/* 従（リーフレット）。.hozon-btn--outline と同じ見せ方にする。 */
.hozonhozon-btn--outline {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
}
/* 写真は左へ全幅で抜く（.hozon-visual の左右反転）。防災グッズ販売＝右 /
   HOZONHOZON＝左 / 日田天領水＝右 と交互に振ることで、同じ構造の
   2 列セクションが 3 つ続いても積み上がって見えない。 */
.hozonhozon-visual {
	box-sizing: border-box;
	min-width: 0;
	align-self: stretch;
	margin-left: min(0px, calc((1360px - 100vw) / 2));
}
/* 写真は 1800 x 1200（3:2）。前後のセクションと同じく列の高さいっぱいに広げる。 */
.hozonhozon-visual-img {
	height: 100%;
	min-height: clamp(320px, 42vh, 460px);
	overflow: hidden;
	background: var(--cream) url(../images/img-hozonhozon.webp) center/cover no-repeat;
}

/* ============================================================
   日田天領水
   ============================================================ */
.water {
	max-width: var(--content-width);
	margin: 0 auto;
	background-color: var(--paper);
}
/* 2 列化は 900px 以上のみ（末尾のレスポンシブ参照）。
   1 列のときは DOM 順どおり「上＝テキスト / 下＝写真」になる。 */
.water-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: center;
}
.water-text {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--section-lg) clamp(18px, 4vw, 40px);
}
.water-eyebrow {
	font-family: var(--font-en);
	font-size: var(--text-sm);
	letter-spacing: .2em;
	color: var(--water);
	font-weight: 600;
}
.water-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--ink);
	margin-top: 14px;
	line-height: 1.5;
	text-align: left;
}
.water-catch {
	margin-top: 8px;
	font-size: var(--text-base);
	color: var(--water);
	font-weight: 500;
}
.water-lead {
	margin-top: 20px;
	font-size: var(--text-base);
	color: var(--ink2);
	line-height: 2;
	max-width: 38em;
	font-weight: 500;
}
.water-actions {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
}
.water-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	background: var(--water);
	color: var(--paper);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: 4px;
	font-weight: 700;
	font-size: var(--text-base);
}
.water-img {
	box-sizing: border-box;
	align-self: stretch;
	margin-right: min(0px, calc((1360px - 100vw) / 2));
}
.water-img-inner {
	position: relative;
	overflow: hidden;
	height: 100%;
	min-height: clamp(320px, 42vh, 460px);
	background: var(--hero-hita-bg) url(../images/img-hita.avif) center/cover no-repeat;
}

/* ============================================================
   商事サービス
   ============================================================ */
.services {
	color: var(--cream);
	background-color: var(--brand);
}
/* 横並びは 900px 以上のみ（末尾のレスポンシブ参照）。
   min-width だけに任せると 560px 付近で 1 行になり窮屈になるため。 */
.services-inner {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--section) clamp(18px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}
.services-text {
	min-width: 0;
}
.services-eyebrow {
	font-family: var(--font-en);
	font-size: var(--text-sm);
	letter-spacing: .2em;
	color: var(--paper);
	font-weight: 700;
}
.services-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-lg);
	margin-top: 12px;
	line-height: 1.5;
}
.services-lead {
	margin-top: 14px;
	font-size: var(--text-base);
	color: var(--paper);
	line-height: 1.95;
	max-width: 40em;
	font-weight: 500;
}
.services-actions {
	display: flex;
}
.services-btn {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-sm);
	background: var(--cream);
	color: var(--ink);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-radius: 4px;
	font-weight: 700;
	font-size: var(--text-base);
	white-space: nowrap;
}

/* ============================================================
   プロパティマネジメント（MORE'S）
   ============================================================ */
.property {
	width: 100%;
	padding: var(--wp--preset--spacing--section-lg) 0;
	background-color: var(--bg-subtle);
}
.property-head {
	margin: 0 auto clamp(28px, 4vw, 40px);
	max-width: var(--content-width);
	padding: 0 clamp(18px, 4vw, 40px);
	box-sizing: border-box;
}
.property-eyebrow {
	font-family: var(--font-en);
	font-size: var(--text-sm);
	letter-spacing: .2em;
	color: var(--moors);
	font-weight: 700;
}
.property-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--ink);
	margin-top: 12px;
}
.property-lead {
	margin-top: 14px;
	font-size: var(--text-base);
	color: var(--ink2);
	line-height: 1.95;
	font-weight: 500;
}
.property-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* design-lint-ignore: auto-fit の minmax は下限 220px を明示済みで、素の fr ではない */
	gap: var(--gap-md);
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 40px);
	box-sizing: border-box;
}
.property-card {
	display: block;
	background: var(--paper);
	border-radius: 8px; /* reason: 店舗カードとして面を持たせるため（スケール値 8 を採用） */
}
.property-card-visual {
	aspect-ratio: 4 / 3;
	background: var(--moors);
	position: relative;
	overflow: hidden;
	border-radius: 4px 4px 0 0;
}
.property-card-img {
	position: absolute;
	inset: 0;
	background-color: var(--moors);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.property-card-img--yokohama {
	background-image: url(../images/img-yokohama.avif);
}
.property-card-img--kawasaki {
	background-image: url(../images/img-kawasaki.avif);
}
.property-card-img--sagamiono {
	background-image: url(../images/img-sagamiono.avif);
}
.property-card-img--yokosuka {
	background-image: url(../images/img-yokosuka.avif);
}
.property-card-body {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: 0 0 4px 4px;
}
.property-card-name {
	font-family: var(--font-serif);
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--ink);
}
.property-card-area {
	font-size: var(--text-sm);
	color: var(--muted);
	margin-top: 6px;
}
.property-card-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--moors);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
/* 見出しを包む枠の幅制限は 768px 以上で解除する */
@media (min-width: 768px) {
	.hero-head {
		max-width: none;
	}
}

/* 見出しの 1 行固定は 1200px 以上のみ。
   --text-2xl は 670px 付近で上限 72px に達するため、それ未満の幅で
   nowrap にすると「備えも、水も、暮らしの場も。」が見切れる。 */
@media (min-width: 1200px) {
	.hero-h1 {
		white-space: nowrap;
	}
}

/* 900px 未満は縦積み。min-width / auto-fit 任せだと 560〜640px 付近で
   横並びになり窮屈だったため、切り替え位置を明示している。 */
@media (min-width: 900px) {
	/* 防災グッズ販売：2 列（左＝テキスト / 右＝写真。DOM 順のまま） */
	.hozon-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* HOZONHOZON：2 列にして「左＝写真 / 右＝テキスト」に入れ替える */
	.hozonhozon-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.hozonhozon-body {
		order: 2;
	}
	.hozonhozon-visual {
		order: 1;
	}

	/* 日田天領水：2 列（左＝テキスト / 右＝写真。DOM 順のまま） */
	.water-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* 商事サービス */
	.services-inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	.services-text {
		flex: 6.5 1 0;
		min-width: 280px;
	}
	.services-actions {
		flex: 3.5 1 0;
		min-width: 260px;
	}
}