/* =============================================================
   トップページ専用スタイル（front-page.php）
   ・独自プレフィックス mhm- のみ使用（SWELLと干渉しない）
   ・白ベース＋差し色。ヒーローはネイビー #16243F
   ============================================================= */

.mhm-top {
	--mhm-navy: #16243F;
	--mhm-accent: #1e88e5;
	--mhm-text: #24303f;
	--mhm-line: #e3e6ea;
	--mhm-bg-soft: #f6f8fb;
	color: var(--mhm-text);
}

.mhm-container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

.mhm-section-title {
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	font-weight: 700;
	text-align: center;
	margin-bottom: 1.4em;
}
.mhm-section-title--light { color: #fff; }

/* ① ヒーロー */
.mhm-hero {
	background: var(--mhm-navy);
	color: #fff;
	padding: clamp(3rem, 9vw, 6rem) 20px;
	text-align: center;
}
.mhm-hero__catch {
	font-size: clamp(1.8rem, 5.5vw, 3.2rem);
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.4;
	margin: 0 0 .5em;
}
.mhm-hero__sub {
	font-size: clamp(.95rem, 2.4vw, 1.15rem);
	opacity: .85;
	margin: 0;
}

/* 共通セクション余白 */
.mhm-search, .mhm-popular, .mhm-honest, .mhm-columns {
	padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.mhm-popular { background: var(--mhm-bg-soft); }

/* トップのタブ余白（ヒーロー直下） */
.mhm-toptabs { padding-top: clamp(1.6rem, 4vw, 2.4rem); }

/* ② 検索の入口（3カラム） */
.mhm-search__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,..)で列がはみ出さない */
	gap: 20px;
}
.mhm-search__col {
	min-width: 0;            /* グリッド子要素が中身の最小幅で膨らむのを防ぐ */
	background: #fff;
	border: 1px solid var(--mhm-line);
	border-radius: 12px;
	padding: 1.6em 1.4em;
}
.mhm-search__col--cta {
	background: var(--mhm-navy);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	border-color: var(--mhm-navy);
}
.mhm-search__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1em;
	padding-bottom: .5em;
	border-bottom: 2px solid var(--mhm-accent);
}
.mhm-search__col--cta .mhm-search__title { border-bottom-color: rgba(255,255,255,.4); }
.mhm-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}
.mhm-chip {
	display: inline-block;
	background: var(--mhm-bg-soft);
	color: var(--mhm-accent);
	border: 1px solid var(--mhm-line);
	border-radius: 999px;
	padding: .4em 1em;
	font-size: .92rem;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.mhm-chip:hover { background: var(--mhm-accent); color: #fff; }
.mhm-search__lead { font-size: .92rem; opacity: .9; margin: 0 0 1.2em; }

/* ボタン */
.mhm-btn {
	display: inline-block;
	border-radius: 8px;
	padding: .8em 1.6em;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
}
.mhm-btn--primary { background: #ffb400; color: #1a1a1a; }
.mhm-btn--primary:hover { background: #ffc637; }
.mhm-btn--ghost { border: 2px solid #fff; color: #fff; }
.mhm-btn--ghost:hover { background: #fff; color: var(--mhm-navy); }

/* ③⑤ カードグリッド */
.mhm-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.mhm-card {
	display: flex;
	flex-direction: column;
	gap: .3em;
	background: #fff;
	border: 1px solid var(--mhm-line);
	border-radius: 10px;
	padding: 1.1em 1.2em;
	text-decoration: none;
	color: var(--mhm-text);
	transition: box-shadow .15s, transform .15s;
}
.mhm-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.mhm-card__name { font-weight: 700; font-size: 1.05rem; }
.mhm-card__price { font-size: .85rem; color: #5a6675; }
.mhm-card__price strong { color: var(--mhm-accent); font-size: 1.05rem; }

/* ④ 正直路線アピール */
.mhm-honest { background: var(--mhm-navy); color: #fff; }
.mhm-honest__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 30px;
	align-items: center;
}
.mhm-honest__lead { opacity: .9; line-height: 1.9; margin: 0 0 1.4em; }
.mhm-honest__signals { display: flex; justify-content: center; gap: 1.2em; }
.mhm-signal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3em;
	font-size: 2rem;
}
.mhm-signal span { font-size: .8rem; opacity: .9; }

/* ⑤ コラムカード */
.mhm-col-card {
	display: flex;
	flex-direction: column;
	gap: .4em;
	background: #fff;
	border: 1px solid var(--mhm-line);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--mhm-text);
}
.mhm-col-card__thumb img { width: 100%; height: 140px; object-fit: cover; display: block; }
.mhm-col-card__title { font-weight: 700; font-size: .98rem; padding: 0 .9em; line-height: 1.5; }
.mhm-col-card__date { font-size: .8rem; color: #8a94a2; padding: 0 .9em .9em; }

.mhm-empty { text-align: center; color: #8a94a2; }

/* =============================================================
   エリアページ（mhm-area.php）用スタイル
   ============================================================= */
.mhm-area {
	--mhm-navy: #16243F;
	--mhm-accent: #1e88e5;
	--mhm-text: #24303f;
	--mhm-line: #e3e6ea;
	--mhm-bg-soft: #f6f8fb;
	color: var(--mhm-text);
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}
/* 1都3県 切り替えタブ */
.mhm-area__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	justify-content: center;
	margin-bottom: 1.6em;
}
.mhm-area__tab {
	display: inline-block;
	border: 1px solid var(--mhm-line);
	background: #fff;
	color: var(--mhm-text);
	border-radius: 999px;
	padding: .5em 1.3em;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}
.mhm-area__tab:hover { border-color: var(--mhm-accent); color: var(--mhm-accent); }
.mhm-area__tab.is-active {
	background: var(--mhm-navy);
	border-color: var(--mhm-navy);
	color: #fff;
}

.mhm-area__header {
	text-align: center;
	margin-bottom: 1.6em;
}
.mhm-area__title {
	font-size: clamp(1.5rem, 4vw, 2.2rem);
	font-weight: 800;
	margin: 0 0 .3em;
}
.mhm-area__count { color: #5a6675; margin: 0; }

.mhm-area__toc {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	justify-content: center;
	background: var(--mhm-bg-soft);
	border: 1px solid var(--mhm-line);
	border-radius: 12px;
	padding: 1em 1.2em;
	margin-bottom: 2.4em;
}

.mhm-area__ward {
	margin-bottom: 2.6em;
	scroll-margin-top: 80px;
}
.mhm-area__ward-title {
	font-size: 1.2rem;
	font-weight: 700;
	border-left: 5px solid var(--mhm-accent);
	padding-left: .6em;
	margin-bottom: .9em;
}
.mhm-area__ward-count { font-size: .85rem; color: #8a94a2; font-weight: 400; }

.mhm-card__area { font-size: .8rem; color: #8a94a2; }

/* レスポンシブ */
@media ( max-width: 900px ) {
	.mhm-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 720px ) {
	.mhm-search__grid { grid-template-columns: minmax(0, 1fr); } /* 1カラムに縦積み */
	.mhm-honest__inner { grid-template-columns: 1fr; text-align: center; }
}
@media ( max-width: 480px ) {
	.mhm-card-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   マイホーム診断（mhm-shindan.php）
   ============================================================= */
.mhm-shindan {
	--mhm-navy: #16243F;
	--mhm-accent: #1e88e5;
	--mhm-line: #e3e6ea;
	--mhm-bg-soft: #f6f8fb;
	color: #24303f;
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.mhm-shindan__header { text-align: center; margin-bottom: 1.8em; }
.mhm-shindan__title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; margin: 0 0 .3em; }
.mhm-shindan__lead { color: #5a6675; margin: 0; }

.mhm-shindan__form {
	background: var(--mhm-bg-soft);
	border: 1px solid var(--mhm-line);
	border-radius: 14px;
	padding: 1.8em 1.6em;
	max-width: 640px;
	margin: 0 auto;
	display: grid;
	gap: 1.3em;
}
.mhm-field__label { display: block; font-weight: 700; margin-bottom: .5em; }
.mhm-field__control {
	width: 100%;
	padding: .7em .9em;
	border: 1px solid var(--mhm-line);
	border-radius: 8px;
	font-size: 1rem;
	background: #fff;
}
.mhm-field__radios { display: flex; flex-wrap: wrap; gap: .8em 1.4em; }
.mhm-field__radios label { display: inline-flex; align-items: center; gap: .4em; cursor: pointer; }
.mhm-shindan__submit { width: 100%; border: 0; cursor: pointer; font-size: 1.05rem; }

.mhm-shindan__result { margin-top: 2.6em; }
.mhm-card__hz { margin-top: .2em; }

.mhm-shindan__gate {
	background: linear-gradient( 135deg, #f0fbf3, #e6f7ec );
	border: 1px solid #cbe9d5;
	border-radius: 14px;
	padding: 1.8em 1.4em;
	text-align: center;
	margin-top: 2em;
}
.mhm-shindan__gate-lead { font-weight: 700; margin: 0 0 1.1em; line-height: 1.7; }

/* =============================================================
   変更①：エリア 2×2 タイルUI（スマホ向け・大きなタップ領域）
   ============================================================= */
.mhm-area-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* PCは1行4列 / スマホは2×2 */
	gap: 12px;
}
.mhm-area-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .2em;
	min-height: 96px;           /* 親指タップしやすい大きさ（60px以上） */
	border-radius: 14px;
	padding: .8em .4em;
	text-decoration: none;
	color: #fff;
	text-align: center;
	line-height: 1.3;
	box-shadow: 0 3px 10px rgba(0,0,0,.12);
	transition: transform .12s, box-shadow .12s, filter .12s;
}
.mhm-area-tile:hover,
.mhm-area-tile:active { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.2); filter: brightness(1.05); }
.mhm-area-tile__icon { font-size: 1.9rem; line-height: 1; }
.mhm-area-tile__name { font-weight: 800; font-size: 1.02rem; }
.mhm-area-tile__count { font-size: .82rem; opacity: .92; }
/* 色分け */
.mhm-area-tile--navy   { background: #16243F; }
.mhm-area-tile--green  { background: #1f8a5b; }
.mhm-area-tile--orange { background: #e8862b; }
.mhm-area-tile--blue   { background: #1e78c8; }

/* =============================================================
   沿線から探す（路線特化＝サイトの核）
   横スクロールを廃止し、折り返しグリッドで全路線を見せる
   ============================================================= */
.mhm-linesec { padding: clamp(2rem, 5vw, 3.2rem) 0 0; }
.mhm-linesec__lead {
	margin: -.4em 0 1.2em;
	color: #667685;
	font-size: .92rem;
	line-height: 1.7;
}
.mhm-line-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* PC1行4列 / スマホ2列 */
	gap: 12px;
}
.mhm-line-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: .2em;
	min-height: 72px;
	background: #fff;
	border: 1px solid var(--mhm-line, #e3e6ea);
	border-left: 5px solid var(--mhm-accent, #1e88e5); /* 路線＝アクセント帯で強調 */
	border-radius: 12px;
	padding: .8em 1em;
	text-decoration: none;
	color: #1f2d3a;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
	transition: transform .12s, box-shadow .12s;
}
.mhm-line-card:hover,
.mhm-line-card:active { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.mhm-line-card__name { font-weight: 800; font-size: 1.02rem; line-height: 1.3; }
.mhm-line-card__count { font-size: .82rem; font-weight: 700; color: var(--mhm-accent, #1e88e5); }
@media ( max-width: 720px ) {
	.mhm-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mhm-line-card { min-height: 64px; padding: .7em .9em; }
}

/* スマホでの大きさ調整（エリアタイル・診断カードをコンパクトに） */
@media ( max-width: 720px ) {
	.mhm-search__col { padding: 1.2em 1em; }
	.mhm-search__col--cta { padding: 1.4em 1em; }
	.mhm-area-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* スマホは2×2 */
	.mhm-area-tile { min-height: 78px; padding: .7em .4em; border-radius: 12px; }
	.mhm-area-tile__icon { font-size: 1.5rem; }
	.mhm-area-tile__name { font-size: .95rem; }
	.mhm-area-tile__count { font-size: .78rem; }
}

/* =============================================================
   ヒーローの駅名検索窓 ／ エリアセクション
   ============================================================= */
.mhm-hero__inner { max-width: 680px; margin: 0 auto; }
.mhm-hero-search {
	display: flex;
	gap: 8px;
	max-width: 560px;
	margin: 1.6em auto 0;
	background: #fff;
	border-radius: 12px;
	padding: 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.mhm-hero-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 1.05rem;      /* 16px以上：スマホで自動ズームしない */
	padding: .7em .8em;
	color: #24303f;
}
.mhm-hero-search__input:focus { outline: none; }
.mhm-hero-search__btn {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	background: var(--mhm-accent, #1e88e5);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	border-radius: 9px;
	padding: .7em 1.4em;
}
.mhm-hero-search__btn:hover { filter: brightness(1.06); }

.mhm-areasec { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.mhm-areasec__cta { text-align: center; margin: 1.8em 0 0; }