/*
 * Mental DB Theme — デザインシステム & レイアウト
 * テーマ: 「やわらかな光」 — 精神科・心療内科の安心感 × 疾患啓発ファースト。
 *
 * 方針:
 *  - 温かいアイボリー地に、低彩度のセージ／アプリコットの「光」をにじませる。
 *  - 文字・ボタン・リンクは濃いめセージティールで AA を確保。アプリコットは装飾限定。
 *  - 見出しは丸ゴシック(Zen Maru Gothic)で親しみと安心、本文は Noto Sans JP でゆったり。
 *  - 大胆さは1箇所だけ＝ヒーローの「やわらかな光」。他は静かに。
 *  - 画像/イラストは使わず CSS のみ（Core Web Vitals 配慮）。
 *
 * 目次:
 *  1. デザイントークン
 *  2. リセット・ベース
 *  3. アクセシビリティ補助
 *  4. レイアウト・セクション
 *  5. ヘッダー・ナビ
 *  6. フッター・相談窓口
 *  7. パンくず
 *  8. ボタン・ピル・バッジ
 *  9. やわらかな光（シグネチャ: グラデ＆blob）
 * 10. クリニックカード・疾患カード・グリッド
 * 11. 単一クリニック詳細
 * 12. 記事 prose
 * 13. トップページ（hero / 症状 / 啓発 / 安心 / エリア / ガイド）
 * 14. ページネーション・フォーム
 * 15. レスポンシブ
 */

/* ============================================================
 * 1. デザイントークン
 * ============================================================ */
:root {
	/* 地・面 */
	--mdb-ivory:     #fbf8f3;
	--mdb-surface:   #fffdfa;
	--mdb-surface-2: #f5f1e9;

	/* セージティール（主色）。文字/ボタン/リンクは濃いめでAA確保。 */
	--mdb-teal:        #4e9a86; /* 装飾・ボーダーアクセント */
	--mdb-teal-ink:    #347061; /* リンク・テキスト・ボタン地（白文字 AA） */
	--mdb-teal-ink-2:  #2f6356; /* hover・濃いめ */
	--mdb-pale-sage:   #eaf1ed; /* 淡いトーン背景 */

	/* アプリコット（差し色＝装飾のみ。文字には使わない） */
	--mdb-apricot:      #e8a87c;
	--mdb-pale-apricot: #fbefe7;

	/* 文字 */
	--mdb-ink:      #2e3d3a; /* 本文。アイボリー地で高コントラスト */
	--mdb-ink-soft: #5c6b66; /* 補助 */
	--mdb-ink-faint:#7a8783;

	/* 線 */
	--mdb-border:      #e7ded0;
	--mdb-border-soft: #efe8db;

	/* 役割色 */
	--mdb-pr:    #a85f2a; /* PRラベル地。白文字AA */
	--mdb-focus: #1f6f8b;

	/* タイポ */
	--mdb-font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
	--mdb-font-body:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--mdb-fs-base: 1.0625rem;  /* 17px */
	/* 日本語本文：ゆったりだが間延びしない 1.8。見出しは 1.5。 */
	--mdb-lh-base: 1.8;
	--mdb-lh-heading: 1.5;
	--mdb-ls-base: 0.015em;

	/* 余白 */
	--mdb-space-1: 0.25rem;
	--mdb-space-2: 0.5rem;
	--mdb-space-3: 0.75rem;
	--mdb-space-4: 1rem;
	--mdb-space-5: 1.5rem;
	--mdb-space-6: 2rem;
	--mdb-space-7: 3rem;
	--mdb-space-8: 4.5rem;

	/* 形・影 */
	--mdb-radius-sm: 12px;
	--mdb-radius:    18px;
	--mdb-radius-lg: 24px;
	/* 影は2層重ね（密着する小さなアンビエント＋やわらかく広がる影）で、
	   濃くせずに「浮き」と立体感を上質に出す。色は地に馴染む低彩度グリーングレー。 */
	--mdb-shadow:    0 1px 2px rgba(46, 61, 58, 0.04), 0 6px 20px rgba(46, 61, 58, 0.055);
	--mdb-shadow-md: 0 2px 6px rgba(46, 61, 58, 0.05), 0 14px 38px rgba(46, 61, 58, 0.085);
	--mdb-shadow-glow: 0 4px 14px rgba(78, 154, 134, 0.10), 0 18px 56px rgba(78, 154, 134, 0.15);

	--mdb-container: 1100px;
	--mdb-prose: 760px;
}

/* ============================================================
 * 2. リセット・ベース
 * ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--mdb-font-body);
	font-size: var(--mdb-fs-base);
	line-height: var(--mdb-lh-base);
	letter-spacing: var(--mdb-ls-base);
	color: var(--mdb-ink);
	background: var(--mdb-ivory);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* 日本語を単語の途中で折らない。line-break:strict=禁則を厳格化、
	   word-break:auto-phrase=対応ブラウザ(Chrome/Edge)で文節区切りに折る（非対応は従来挙動）。 */
	line-break: strict;
	word-break: auto-phrase;
}

/* 見出し・本文の段落は文節改行をより明示的に（auto-phrase 対応ブラウザ向け） */
.mdb-page-title,
.mdb-section-title,
.mdb-area-intro p,
.mdb-hero__title,
.mdb-hero__lead,
.mdb-clinic-card__summary,
.mdb-prose p {
	word-break: auto-phrase;
	line-break: strict;
}

img { max-width: 100%; height: auto; display: block; }

a {
	color: var(--mdb-teal-ink);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
a:hover { color: var(--mdb-teal-ink-2); }

h1, h2, h3, h4 {
	font-family: var(--mdb-font-display);
	line-height: var(--mdb-lh-heading);
	color: var(--mdb-ink);
	font-weight: 700;
	letter-spacing: 0.01em;
}

p { margin: 0 0 var(--mdb-space-4); }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
	outline: 3px solid var(--mdb-focus);
	outline-offset: 2px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
	/* ホバー/フォーカスの「浮き上がり」も止める（transform は transition 無効化だけでは残るため）。 */
	.mdb-btn:hover,
	.mdb-clinic-card:hover,
	.mdb-topic-card:hover,
	.mdb-symptom:hover,
	.mdb-area-selfcheck-cta__link:hover { transform: none; }
}

/* ============================================================
 * 3. アクセシビリティ補助
 * ============================================================ */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.mdb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--mdb-teal-ink-2);
	color: #fff;
	padding: var(--mdb-space-3) var(--mdb-space-5);
	border-radius: 0 0 var(--mdb-radius-sm) 0;
	font-weight: 700;
}
.mdb-skip-link:focus { left: 0; color: #fff; }

#mdb-main:focus { outline: none; }

/* ============================================================
 * 4. レイアウト・セクション
 * ============================================================ */
.mdb-container {
	width: 100%;
	max-width: var(--mdb-container);
	margin-inline: auto;
	padding-inline: var(--mdb-space-5);
}

.mdb-layout { padding-block: var(--mdb-space-7) var(--mdb-space-8); }

.mdb-page-header { margin-bottom: var(--mdb-space-6); }
.mdb-page-title {
	font-size: clamp(1.6rem, 4.2vw, 2.3rem);
	margin: 0 0 var(--mdb-space-3);
}
.mdb-archive-description {
	color: var(--mdb-ink-soft);
}
.mdb-area-intro {
	color: var(--mdb-ink-soft);
}

.mdb-section-title {
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	margin: 0 0 var(--mdb-space-5);
	position: relative;
	padding-left: calc(var(--mdb-space-4) + 6px);
}
/* 見出し頭の小さな「光の粒」＝丸いアクセント（過剰でない構造装飾）。
   平板な単色ではなく、ごく淡い光のにじみ＋差し色を内包した「粒」にして
   ブランドの“やわらかな光”に馴染ませる（サイズ・位置は不変＝レイアウト維持）。 */
.mdb-section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px; height: 14px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.65), transparent 55%),
		radial-gradient(circle at 70% 75%, var(--mdb-apricot), transparent 70%),
		var(--mdb-teal);
	box-shadow: 0 0 0 4px rgba(78, 154, 134, 0.10);
}
.mdb-section-title--sm {
	font-size: 1.15rem;
	margin-bottom: var(--mdb-space-4);
}
.mdb-section-title--plain { padding-left: 0; }
.mdb-section-title--plain::before { display: none; }

.mdb-section-lead { color: var(--mdb-ink-soft); margin-bottom: var(--mdb-space-5); }

.mdb-empty {
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	padding: var(--mdb-space-7);
	text-align: center;
	color: var(--mdb-ink-soft);
	box-shadow: var(--mdb-shadow);
}

.mdb-note { color: var(--mdb-ink-soft); font-size: 0.98rem; }

/* ============================================================
 * 5. ヘッダー・ナビ
 * ============================================================ */
.mdb-site-header {
	background: rgba(255, 253, 250, 0.86);
	backdrop-filter: saturate(1.1) blur(6px);
	border-bottom: 1px solid var(--mdb-border-soft);
	position: sticky;
	top: 0;
	z-index: 50;
}
.mdb-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mdb-space-4);
	padding-block: var(--mdb-space-4);
	flex-wrap: wrap;
}
.mdb-site-title {
	margin: 0;
	font-family: var(--mdb-font-display);
	font-size: 1.3rem;
	font-weight: 700;
}
.mdb-site-title a { color: var(--mdb-teal-ink-2); text-decoration: none; }
.mdb-site-description {
	margin: 0;
	font-size: 0.78rem;
	color: var(--mdb-ink-faint);
}

.mdb-primary-nav { display: flex; align-items: center; }
.mdb-menu {
	list-style: none;
	display: flex;
	gap: var(--mdb-space-5);
	flex-wrap: wrap;
}
.mdb-menu a {
	text-decoration: none;
	color: var(--mdb-ink);
	font-weight: 500;
	padding: var(--mdb-space-2) 0;
	border-bottom: 2px solid transparent;
}
.mdb-menu a:hover,
.mdb-menu .current-menu-item > a {
	color: var(--mdb-teal-ink-2);
	border-bottom-color: var(--mdb-teal);
}

.mdb-nav-toggle {
	display: none;
	width: 46px; height: 46px;
	border: 1px solid var(--mdb-border);
	border-radius: 999px;
	background: var(--mdb-surface);
	cursor: pointer;
	position: relative;
}
.mdb-nav-toggle__bar,
.mdb-nav-toggle__bar::before,
.mdb-nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 20px; height: 2px;
	background: var(--mdb-ink);
	transform: translateX(-50%);
	border-radius: 2px;
}
.mdb-nav-toggle__bar { top: 50%; transform: translate(-50%, -50%); }
.mdb-nav-toggle__bar::before { top: -7px; }
.mdb-nav-toggle__bar::after { top: 7px; }

/* ============================================================
 * 6. フッター・相談窓口
 * ============================================================ */
.mdb-site-footer {
	margin-top: var(--mdb-space-8);
	background:
		radial-gradient(120% 80% at 15% 0%, var(--mdb-pale-sage), transparent 60%),
		radial-gradient(120% 80% at 90% 10%, var(--mdb-pale-apricot), transparent 55%),
		var(--mdb-surface-2);
	border-top: 1px solid var(--mdb-border-soft);
	padding-block: var(--mdb-space-8) var(--mdb-space-6);
}

/* 相談窓口（責任ある配慮として目立たせる） */
.mdb-helpline {
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border);
	border-radius: var(--mdb-radius-lg);
	padding: var(--mdb-space-6);
	box-shadow: var(--mdb-shadow);
	margin-bottom: var(--mdb-space-6);
}
.mdb-helpline__title {
	font-size: 1.2rem;
	margin: 0 0 var(--mdb-space-2);
	color: var(--mdb-teal-ink-2);
}
.mdb-helpline__lead { color: var(--mdb-ink-soft); margin-bottom: var(--mdb-space-4); }
.mdb-helpline__list {
	list-style: none;
	display: grid;
	gap: var(--mdb-space-3);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mdb-helpline__item {
	background: var(--mdb-pale-sage);
	border-radius: var(--mdb-radius-sm);
	padding: var(--mdb-space-3) var(--mdb-space-4);
}
.mdb-helpline__name { display: block; font-weight: 700; font-size: 0.95rem; }
.mdb-helpline__tel { font-family: var(--mdb-font-display); font-size: 1.15rem; color: var(--mdb-teal-ink-2); text-decoration: none; }
.mdb-helpline__tel:hover { text-decoration: underline; }
.mdb-helpline__note { display: block; font-size: 0.8rem; color: var(--mdb-ink-faint); margin-top: var(--mdb-space-1); }

.mdb-footer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mdb-space-6);
	justify-content: space-between;
	margin-bottom: var(--mdb-space-5);
}
.mdb-footer-title { font-family: var(--mdb-font-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 var(--mdb-space-2); color: var(--mdb-teal-ink-2); }
.mdb-footer-desc { color: var(--mdb-ink-soft); font-size: 0.92rem; max-width: 42ch; }
.mdb-footer-menu { list-style: none; display: flex; flex-direction: column; gap: var(--mdb-space-2); }
.mdb-footer-menu a { color: var(--mdb-teal-ink); text-decoration: none; }
.mdb-footer-menu a:hover { color: var(--mdb-teal-ink-2); text-decoration: underline; }
.mdb-disclaimer {
	font-size: 0.82rem;
	color: var(--mdb-ink-soft);
	border-top: 1px solid var(--mdb-border-soft);
	padding-top: var(--mdb-space-4);
	line-height: 1.85;
}
.mdb-copyright { margin: var(--mdb-space-3) 0 0; color: var(--mdb-ink-faint); }

/* ============================================================
 * 7. パンくず
 * ============================================================ */
.mdb-breadcrumbs { margin-bottom: var(--mdb-space-5); font-size: 0.85rem; }
.mdb-breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mdb-space-2);
	color: var(--mdb-ink-faint);
}
.mdb-breadcrumbs__item { display: flex; align-items: center; gap: var(--mdb-space-2); }
.mdb-breadcrumbs__item:not(:last-child)::after { content: "›"; color: var(--mdb-ink-faint); }
.mdb-breadcrumbs__item a { color: var(--mdb-teal-ink); text-decoration: none; }
.mdb-breadcrumbs__item a:hover { text-decoration: underline; }
.mdb-breadcrumbs__item [aria-current="page"] { color: var(--mdb-ink-soft); }

/* ============================================================
 * 8. ボタン・ピル・バッジ
 * ============================================================ */
.mdb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mdb-space-2);
	flex-direction: column;
	padding: var(--mdb-space-3) var(--mdb-space-6);
	border-radius: 999px;
	font-family: var(--mdb-font-display);
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	line-height: 1.35;
	min-height: 48px;
	text-align: center;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mdb-btn:hover { transform: translateY(-1px); }
/* 押し込みの手応え（タップ時に少し沈む）。やりすぎず -1px → 0 へ。 */
.mdb-btn:active { transform: translateY(0); }
.mdb-btn--lg { padding: var(--mdb-space-4) var(--mdb-space-7); font-size: 1.05rem; }
.mdb-btn__sub { font-size: 0.8rem; font-weight: 500; opacity: 0.92; }

.mdb-btn--primary { background: var(--mdb-teal-ink); color: #fff; box-shadow: var(--mdb-shadow); }
.mdb-btn--primary:hover { background: var(--mdb-teal-ink-2); color: #fff; box-shadow: var(--mdb-shadow-glow); }
.mdb-btn--primary:active { box-shadow: var(--mdb-shadow); }

.mdb-btn--secondary { background: var(--mdb-surface); color: var(--mdb-teal-ink-2); border-color: var(--mdb-teal); }
.mdb-btn--secondary:hover { background: var(--mdb-pale-sage); color: var(--mdb-teal-ink-2); }

.mdb-btn--ghost { background: transparent; color: var(--mdb-teal-ink-2); border-color: var(--mdb-border); }
.mdb-btn--ghost:hover { background: var(--mdb-surface); color: var(--mdb-teal-ink-2); }

.mdb-pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--mdb-space-2); }
.mdb-pill {
	display: inline-block;
	padding: var(--mdb-space-2) var(--mdb-space-4);
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border);
	border-radius: 999px;
	text-decoration: none;
	color: var(--mdb-ink);
	font-size: 0.94rem;
}
.mdb-pill:hover { background: var(--mdb-pale-sage); border-color: var(--mdb-teal); color: var(--mdb-teal-ink-2); }

.mdb-badge-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--mdb-space-2); }
.mdb-badge {
	display: inline-block;
	padding: 0.22em 0.75em;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 500;
	background: var(--mdb-surface-2);
	color: var(--mdb-ink-soft);
	border: 1px solid var(--mdb-border-soft);
}
.mdb-badge a { text-decoration: none; color: inherit; }
.mdb-badge--feature { background: var(--mdb-pale-sage); color: var(--mdb-teal-ink-2); border-color: transparent; }
.mdb-badge--treatment { background: var(--mdb-pale-apricot); color: #8a5226; border-color: transparent; }
.mdb-badge--department { background: var(--mdb-surface); color: var(--mdb-ink); border-color: var(--mdb-border); }
.mdb-badge-list--lg .mdb-badge { font-size: 0.9rem; padding: 0.38em 0.9em; }

.mdb-pr-label {
	display: inline-block;
	margin: 0 0 var(--mdb-space-2);
	padding: 0.12em 0.6em;
	background: var(--mdb-pr);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 999px;
	letter-spacing: 0.06em;
}
.mdb-pr-label--lg { font-size: 0.8rem; padding: 0.22em 0.75em; }

/* ============================================================
 * 9. やわらかな光（シグネチャ）
 * ============================================================ */
.mdb-glow {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(90% 75% at 12% 8%, var(--mdb-pale-sage) 0%, transparent 58%),
		radial-gradient(85% 80% at 92% 22%, var(--mdb-pale-apricot) 0%, transparent 60%),
		radial-gradient(120% 120% at 50% 120%, var(--mdb-pale-sage) 0%, transparent 55%),
		var(--mdb-ivory);
}
/* 大きな有機blob（低彩度）を背後に。ごくゆっくり呼吸する＝1箇所の大胆さ。 */
.mdb-glow::before,
.mdb-glow::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%;
	filter: blur(10px);
	pointer-events: none;
}
.mdb-glow::before {
	width: 52vw; height: 52vw;
	max-width: 620px; max-height: 620px;
	top: -18%; right: -10%;
	opacity: 0.7;
	background: radial-gradient(circle at 40% 40%, rgba(232, 168, 124, 0.62), transparent 70%);
	animation: mdb-breathe 16s ease-in-out infinite;
}
.mdb-glow::after {
	width: 44vw; height: 44vw;
	max-width: 520px; max-height: 520px;
	bottom: -26%; left: -12%;
	opacity: 0.6;
	background: radial-gradient(circle at 50% 50%, rgba(78, 154, 134, 0.5), transparent 70%);
	animation: mdb-breathe 20s ease-in-out infinite reverse;
}
.mdb-glow > * { position: relative; z-index: 1; }

@keyframes mdb-breathe {
	0%, 100% { transform: scale(1) translateY(0); opacity: 0.5; }
	50%      { transform: scale(1.08) translateY(-1.5%); opacity: 0.62; }
}

/* ============================================================
 * 10. カード・グリッド
 * ============================================================ */
.mdb-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--mdb-space-5);
}
.mdb-card-grid--single { grid-template-columns: 1fr; }

/* --- クリニックカード --- */
.mdb-clinic-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius-lg);
	overflow: hidden;
	box-shadow: var(--mdb-shadow);
	transition: box-shadow .18s ease, transform .18s ease;
}
.mdb-clinic-card:hover { box-shadow: var(--mdb-shadow-md); transform: translateY(-2px); }

.mdb-clinic-card__media { background: var(--mdb-pale-sage); }
.mdb-clinic-card__media a { display: block; text-decoration: none; }
.mdb-clinic-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ── 既定アイキャッチ「やわらかな光」（画像が無いクリニック共通ビジュアル） ──
 * 明るい光＋低彩度のやわらかなグラデ＋ごく控えめな有機的シェイプ（木漏れ日／植物を想起）。
 * 画像ファイル不要・著作権フリー。テキスト（イニシャル）とCSSのみ。 */
.mdb-clinic-noimg {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background:
		/* 上方の木漏れ日（明るい光のにじみ） */
		radial-gradient(80% 60% at 72% 12%, rgba(255, 255, 255, 0.85), transparent 60%),
		/* 低彩度アプリコットの差し色（装飾のみ） */
		radial-gradient(70% 80% at 18% 22%, var(--mdb-pale-apricot), transparent 62%),
		/* セージの広がり */
		radial-gradient(90% 90% at 85% 95%, var(--mdb-pale-sage), transparent 70%),
		linear-gradient(160deg, #f3f7f2 0%, var(--mdb-pale-sage) 100%);
}
/* 有機的シェイプ：やわらかな円弧を2枚重ね、葉／光の重なりを抽象化（低コントラスト）。 */
.mdb-clinic-noimg__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(38% 48% at 30% 78%, rgba(78, 154, 134, 0.16), transparent 60%),
		radial-gradient(30% 40% at 64% 30%, rgba(232, 168, 124, 0.18), transparent 62%);
	pointer-events: none;
}
/* クリニック名イニシャルを薄く重ねて単調さを防ぐ（装飾的・本文ではない）。 */
.mdb-clinic-noimg__initial {
	position: relative;
	font-family: var(--mdb-font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 12vw, 4rem);
	line-height: 1;
	color: rgba(52, 112, 97, 0.22);
	text-decoration: none;
	user-select: none;
}
/* 画像ファイルに差し替わった場合は cover で敷き詰める。 */
.mdb-clinic-noimg--photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* カード用：3:2 の枠で表示。 */
.mdb-clinic-card__noimg { width: 100%; aspect-ratio: 3 / 2; }

/* ── 公式サイトTOPのスクショ（mShots）──
 * 生成中／読込失敗時は下敷きの既定ビジュアルが見えるよう、スクショを重ねて配置。
 * object-position: top で、最も識別しやすいサイト上部（ロゴ・ヒーロー）を見せる。 */
.mdb-clinic-card__shotwrap { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; }
.mdb-clinic-card__shotwrap .mdb-clinic-card__shotfallback { position: absolute; inset: 0; }
.mdb-clinic-card__shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	background: var(--mdb-pale-sage);
}

.mdb-clinic-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mdb-space-2);
	padding: var(--mdb-space-5);
	flex: 1;
}
.mdb-clinic-card__title { font-size: 1.2rem; margin: 0; }
.mdb-clinic-card__title a { text-decoration: none; color: var(--mdb-ink); }
.mdb-clinic-card__title a:hover { color: var(--mdb-teal-ink-2); }
.mdb-clinic-card__location { margin: 0; font-size: 0.9rem; color: var(--mdb-ink-soft); }
.mdb-clinic-card__summary { margin: var(--mdb-space-1) 0 0; font-size: 0.95rem; color: var(--mdb-ink-soft); }
.mdb-clinic-card__actions {
	display: flex;
	gap: var(--mdb-space-2);
	margin-top: auto;
	padding-top: var(--mdb-space-3);
}
.mdb-clinic-card__actions .mdb-btn { flex: 1; padding-inline: var(--mdb-space-3); font-size: 0.92rem; }
.mdb-clinic-card__distance {
	margin: var(--mdb-space-1) 0 0;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--mdb-teal-ink-2);
}

/* --- 情報密度版カード（病院ナビ風） --- */
/* 情報グループ（診療科バッジ／サービスチップ／駅・住所／診療時間）の間を
   一段ゆったりさせ、密度を保ちつつ各グループの境目を読み取りやすくする。 */
.mdb-clinic-card--dense .mdb-clinic-card__body { gap: var(--mdb-space-4); }
.mdb-clinic-card__tags { margin: 0; }

/* サービスチップ（feature由来の設備・対応） */
.mdb-service-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mdb-space-2);
	margin: 0;
}
.mdb-service-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.25em 0.7em;
	background: var(--mdb-pale-sage);
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--mdb-teal-ink-2);
	line-height: 1.4;
}
.mdb-service-chip__icon { font-size: 0.9em; }

/* メタ情報（駅・住所・電話） */
.mdb-clinic-card__meta { margin: 0; display: flex; flex-direction: column; gap: var(--mdb-space-1); }
.mdb-clinic-card__meta-row { display: flex; gap: var(--mdb-space-2); align-items: baseline; margin: 0; }
.mdb-clinic-card__meta-row dt { flex: 0 0 auto; margin: 0; color: var(--mdb-ink-faint); }
.mdb-clinic-card__meta-row dd { margin: 0; font-size: 0.9rem; color: var(--mdb-ink-soft); }
.mdb-clinic-card__meta-row dd a { color: var(--mdb-teal-ink); text-decoration: none; }
.mdb-clinic-card__meta-row dd a:hover { text-decoration: underline; }
.mdb-meta-ico { font-size: 0.95em; }

/* 診療時間ミニ・マトリクス（均等7+1列。横スクロール不要） */
.mdb-hours-mini { margin: 0; }
.mdb-hm {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 0.72rem;
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius-sm);
	overflow: hidden;
}
.mdb-hm th,
.mdb-hm td {
	text-align: center;
	padding: 0.35em 0;
	border: 1px solid var(--mdb-border-soft);
	line-height: 1.3;
}
.mdb-hm thead th { background: var(--mdb-pale-sage); color: var(--mdb-teal-ink-2); font-weight: 700; }
/* テキストのみ（終日/午前/午後/-）。装飾アイコンは使わない。 */
.mdb-hm__cell { color: var(--mdb-teal-ink); font-weight: 700; }
.mdb-hm__cell--closed { color: var(--mdb-ink-faint); background: var(--mdb-surface-2); font-weight: 400; }

/* dense カードのアクション：ボタンが縦に詰まりすぎないよう確保 */
.mdb-clinic-card--dense .mdb-clinic-card__actions { padding-top: var(--mdb-space-2); }

/* 注目バッジ（中立ラベル。順位表記は使わない＝医療広告ガイドライン順守） */
.mdb-featured-badge {
	position: absolute;
	top: var(--mdb-space-3);
	left: var(--mdb-space-3);
	z-index: 2;
	margin: 0;
	padding: 0.3em 0.9em;
	font-family: var(--mdb-font-display);
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(120deg, var(--mdb-apricot), var(--mdb-teal-ink));
	border-radius: 999px;
	box-shadow: var(--mdb-shadow);
}

.mdb-clinic-card--pr { border-color: #ead3b8; }

/* 注目のクリニック（手動指名）の強調カード。順位ではなく中立な強調表示。 */
.mdb-area-top { margin-bottom: var(--mdb-space-7); }
.mdb-clinic-card--featured {
	border: 2px solid var(--mdb-teal);
	box-shadow: var(--mdb-shadow-glow);
}
/* featured（注目）は縦型のまま、枠＋グローで強調（横並びにはしない）。 */
.mdb-clinic-card--featured .mdb-clinic-card__title { font-size: 1.45rem; }

/* ============================================================
 * 10b. クリニック一覧「縦型リッチカード」（記事型）
 *   参考サイトの“並び”を採用: 全幅ヒーロー画像 → 院名+PR → 最寄駅 → リード →
 *   対応・特徴○表 → 診療時間 → 料金(任意) → 大CTA → 住所・地図(折りたたみ)。
 *   配色は当サイト「やわらかな光」（ピンクは使わない）。
 *   医療広告順守: 星評価・順位・口コミ・待ち時間・最上級は一切出さない。
 * ============================================================ */
.mdb-card-grid--cassette {
	grid-template-columns: 1fr;   /* 1カラム全幅（記事型の縦列） */
	gap: var(--mdb-space-6);
	max-width: 760px;             /* 読み物として快適な単一列に収める */
	margin-inline: auto;
}

/* 全幅ヒーロー画像（公式サイトTOPのスクショ）。全ビューポートで表示。 */
.mdb-card-grid--cassette .mdb-clinic-card__media { display: block; }
.mdb-card-grid--cassette .mdb-clinic-card__img,
.mdb-card-grid--cassette .mdb-clinic-card__shotwrap,
.mdb-card-grid--cassette .mdb-clinic-card__noimg { aspect-ratio: 16 / 9; }

.mdb-card-grid--cassette .mdb-clinic-card__body { gap: var(--mdb-space-4); padding: var(--mdb-space-5); }
@media (min-width: 720px) {
	.mdb-card-grid--cassette .mdb-clinic-card__body { padding: var(--mdb-space-6); }
	.mdb-card-grid--cassette .mdb-clinic-card__title { font-size: 1.35rem; }
}

/* ── 縦型カードの構成要素（カードが使われる全文脈で共通） ── */
/* 見出し行：院名＋診療科＋PR */
.mdb-clinic-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mdb-space-3); }
.mdb-clinic-card__headings { min-width: 0; }
.mdb-clinic-card__subject { margin: 2px 0 0; font-size: 0.85rem; color: var(--mdb-ink-faint); }

/* 最寄駅・エリア */
.mdb-clinic-card__access { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3em 1.2em; font-size: 0.9rem; color: var(--mdb-ink-soft); }
.mdb-clinic-card__access-item { display: inline-flex; align-items: baseline; gap: 0.4em; }
.mdb-clinic-card__access-label { color: var(--mdb-ink-faint); font-size: 0.8em; }

/* リード（特徴文）：やわらかなセージの淡色ボックス */
.mdb-clinic-card__lead {
	margin: 0;
	padding: var(--mdb-space-3) var(--mdb-space-4);
	background: var(--mdb-pale-sage);
	border-radius: var(--mdb-radius-md, 10px);
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--mdb-ink);
}

/* セクション見出し（対応/診療時間/料金） */
.mdb-clinic-card__spec-title { margin: 0 0 var(--mdb-space-2); font-size: 0.9rem; font-weight: 700; color: var(--mdb-teal-ink-2); }

/* 対応・特徴の○グリッド（gap+背景でハンドライン罫線を表現） */
.mdb-spec-grid {
	list-style: none; margin: 0;
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--mdb-border-soft);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius-sm);
	overflow: hidden;
}
@media (min-width: 560px) { .mdb-spec-grid { grid-template-columns: repeat(3, 1fr); } }
.mdb-spec-grid__item {
	display: flex; align-items: center; justify-content: space-between; gap: 0.5em;
	padding: 0.5em 0.85em;
	background: var(--mdb-surface);
	font-size: 0.85rem; color: var(--mdb-ink); line-height: 1.35;
}
.mdb-spec-grid__mark { color: var(--mdb-teal); font-weight: 700; }

/* 料金（目安） */
.mdb-price-list { margin: 0; border: 1px solid var(--mdb-border-soft); border-radius: var(--mdb-radius-sm); overflow: hidden; }
.mdb-price-list__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin: 0; padding: 0.55em 0.9em; border-top: 1px solid var(--mdb-border-soft); }
.mdb-price-list__row:first-child { border-top: 0; }
.mdb-price-list__row dt { margin: 0; font-size: 0.9rem; color: var(--mdb-ink-soft); }
.mdb-price-list__row dd { margin: 0; font-weight: 700; color: var(--mdb-teal-ink-2); white-space: nowrap; }
.mdb-price-note { margin: var(--mdb-space-2) 0 0; font-size: 0.82rem; color: var(--mdb-ink-faint); }

/* CTA（縦積み・全幅の大ボタン） */
.mdb-clinic-card__cta { display: flex; flex-direction: column; gap: var(--mdb-space-2); margin-top: var(--mdb-space-1); }
.mdb-btn--block { width: 100%; }
.mdb-clinic-card__cta .mdb-btn--primary { font-size: 1rem; padding-block: 0.85em; }

/* 住所・地図（折りたたみ） */
.mdb-clinic-card__loc { border-top: 1px solid var(--mdb-border-soft); padding-top: var(--mdb-space-3); }
.mdb-clinic-card__loc > summary {
	cursor: pointer; list-style: none;
	font-size: 0.9rem; font-weight: 700; color: var(--mdb-teal-ink-2);
	display: inline-flex; align-items: center; gap: 0.4em;
}
.mdb-clinic-card__loc > summary::-webkit-details-marker { display: none; }
.mdb-clinic-card__loc > summary::after { content: "▼"; font-size: 0.7em; transition: transform 0.2s ease; }
.mdb-clinic-card__loc[open] > summary::after { transform: rotate(180deg); }
.mdb-clinic-card__loc-body { margin: var(--mdb-space-3) 0 0; }
.mdb-clinic-card__loc-body dt { margin: 0; font-size: 0.8rem; color: var(--mdb-ink-faint); }
.mdb-clinic-card__loc-body dd { margin: 0 0 var(--mdb-space-2); font-size: 0.92rem; color: var(--mdb-ink-soft); }
.mdb-clinic-card__loc-body dd a { color: var(--mdb-teal-ink); text-decoration: none; }
.mdb-clinic-card__loc-map { display: inline-block; margin-top: var(--mdb-space-1); font-weight: 700; color: var(--mdb-teal-ink); text-decoration: none; }
.mdb-clinic-card__loc-map:hover { text-decoration: underline; }

/* ── 都道府県ページ「人気の街・エリアから探す」導線 ── */
.mdb-area-popular { margin: var(--mdb-space-6) 0; }
.mdb-area-popular__list {
	list-style: none; margin: var(--mdb-space-3) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--mdb-space-2);
}
.mdb-area-chip {
	display: inline-flex; align-items: center; gap: 0.5em;
	padding: 0.5em 0.9em;
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: 999px;
	text-decoration: none;
	color: var(--mdb-ink);
	font-size: 0.92rem;
	line-height: 1.2;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mdb-area-chip:hover { border-color: var(--mdb-teal); background: var(--mdb-pale-sage); box-shadow: var(--mdb-shadow); }
.mdb-area-chip__name { font-weight: 700; }
.mdb-area-chip__count {
	font-size: 0.78rem; color: var(--mdb-ink-faint);
	background: var(--mdb-surface-2); border-radius: 999px; padding: 0.1em 0.55em;
}
/* 街（行政区でない人気エリア）は差し色で強調。 */
.mdb-area-chip--pop { border-color: var(--mdb-teal); background: var(--mdb-pale-sage); }
.mdb-area-chip--pop .mdb-area-chip__name { color: var(--mdb-teal-ink-2); }
.mdb-area-chip--pop .mdb-area-chip__count { background: #fff; color: var(--mdb-teal-ink); }

/* --- 疾患・記事カード（啓発の核） --- */
.mdb-topic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--mdb-space-5);
}
.mdb-topic-card {
	display: flex;
	flex-direction: column;
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius-lg);
	overflow: hidden;
	box-shadow: var(--mdb-shadow);
	transition: box-shadow .18s ease, transform .18s ease;
}
.mdb-topic-card:hover { box-shadow: var(--mdb-shadow-md); transform: translateY(-2px); }
.mdb-topic-card__thumb { display: block; aspect-ratio: 16 / 9; background: var(--mdb-pale-sage); }
.mdb-topic-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mdb-topic-card__noimg {
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(60% 80% at 25% 20%, var(--mdb-pale-apricot), transparent 60%),
		var(--mdb-pale-sage);
}
.mdb-topic-card__body { padding: var(--mdb-space-5); display: flex; flex-direction: column; gap: var(--mdb-space-2); flex: 1; }
.mdb-topic-card__title { font-size: 1.15rem; margin: 0; }
.mdb-topic-card__title a { text-decoration: none; color: var(--mdb-ink); }
.mdb-topic-card__title a:hover { color: var(--mdb-teal-ink-2); }
.mdb-topic-card__excerpt { margin: 0; color: var(--mdb-ink-soft); font-size: 0.95rem; }
.mdb-topic-card__more { margin-top: auto; padding-top: var(--mdb-space-3); font-family: var(--mdb-font-display); font-weight: 700; color: var(--mdb-teal-ink); }

/* ============================================================
 * 11. 単一クリニック詳細
 * ============================================================ */
.mdb-clinic-head { margin-bottom: var(--mdb-space-5); }
.mdb-clinic-head__title { font-size: clamp(1.7rem, 4.2vw, 2.3rem); margin: 0 0 var(--mdb-space-2); }
.mdb-clinic-head__location { color: var(--mdb-ink-soft); margin: 0 0 var(--mdb-space-3); }

.mdb-clinic-hero { margin: 0 0 var(--mdb-space-5); border-radius: var(--mdb-radius-lg); overflow: hidden; }
.mdb-clinic-hero__img { width: 100%; max-height: 420px; object-fit: cover; }
/* 画像なしクリニックの詳細ページ・ヒーロー（既定アイキャッチ）。横長の安心ビジュアル。 */
.mdb-clinic-hero--noimg { margin: 0 0 var(--mdb-space-5); }
.mdb-clinic-hero__noimg { width: 100%; aspect-ratio: 16 / 7; min-height: 180px; }
.mdb-clinic-hero__noimg.mdb-clinic-noimg--photo { aspect-ratio: 16 / 7; max-height: 420px; }

.mdb-cta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mdb-space-3);
	padding: var(--mdb-space-5);
	background:
		radial-gradient(90% 120% at 0% 0%, var(--mdb-pale-sage), transparent 70%),
		radial-gradient(90% 120% at 100% 100%, var(--mdb-pale-apricot), transparent 70%),
		var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius-lg);
	margin-bottom: var(--mdb-space-6);
}
.mdb-cta-bar .mdb-btn { flex: 1 1 200px; }
.mdb-cta-bar--bottom { margin-top: var(--mdb-space-6); }

.mdb-clinic-section { margin-bottom: var(--mdb-space-6); }
.mdb-clinic-summary {
	font-size: 1.08rem;
	background: var(--mdb-pale-sage);
	border-radius: var(--mdb-radius);
	padding: var(--mdb-space-5);
}
.mdb-clinic-summary p { margin: 0; }

.mdb-points-list { list-style: none; display: flex; flex-direction: column; gap: var(--mdb-space-3); }
.mdb-points-list__item {
	position: relative;
	padding: var(--mdb-space-4) var(--mdb-space-4) var(--mdb-space-4) calc(var(--mdb-space-7) + var(--mdb-space-1));
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
}
.mdb-points-list__item::before {
	content: "";
	position: absolute;
	left: var(--mdb-space-4);
	top: calc(var(--mdb-space-4) + 0.55em);
	width: 0.5em; height: 0.5em;
	background: var(--mdb-teal-ink);
	border-radius: 50%;
}

/* 時間表 */
.mdb-table-wrap { overflow-x: auto; }
.mdb-hours-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--mdb-surface);
	border-radius: var(--mdb-radius);
	overflow: hidden;
	min-width: 320px;
	border: 1px solid var(--mdb-border-soft);
}
.mdb-hours-table th,
.mdb-hours-table td {
	padding: var(--mdb-space-3);
	text-align: center;
	border: 1px solid var(--mdb-border-soft);
}
.mdb-hours-table thead th { background: var(--mdb-pale-sage); color: var(--mdb-teal-ink-2); }
.mdb-hours-table tbody th { background: var(--mdb-surface-2); width: 3.5em; font-weight: 700; }
.mdb-hours-table tr.is-closed td { color: var(--mdb-ink-faint); background: var(--mdb-surface-2); }
.mdb-hours-table__closed { font-weight: 500; }
.mdb-dash { color: var(--mdb-ink-faint); }

/* 住所・地図 */
.mdb-clinic-address { font-size: 1.05rem; margin-bottom: var(--mdb-space-3); }
.mdb-clinic-address__zip { display: inline-block; color: var(--mdb-ink-soft); margin-right: var(--mdb-space-2); }
.mdb-map-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--mdb-radius);
	overflow: hidden;
	margin: var(--mdb-space-4) 0;
	border: 1px solid var(--mdb-border);
}
.mdb-map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 定義リスト（料金） */
.mdb-deflist { margin: 0; display: flex; flex-direction: column; gap: var(--mdb-space-1); }
.mdb-deflist__row {
	display: flex;
	gap: var(--mdb-space-4);
	padding: var(--mdb-space-3);
	border-bottom: 1px solid var(--mdb-border-soft);
}
.mdb-deflist__row dt { flex: 0 0 7em; font-weight: 700; color: var(--mdb-ink-soft); margin: 0; }
.mdb-deflist__row dd { margin: 0; }

.mdb-doctor-name { font-family: var(--mdb-font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: var(--mdb-space-2); }

.mdb-editor-review .mdb-prose {
	background: var(--mdb-pale-apricot);
	border-radius: var(--mdb-radius);
	padding: var(--mdb-space-6);
}

/* FAQ */
.mdb-faq-list { display: flex; flex-direction: column; gap: var(--mdb-space-3); }
.mdb-faq-item {
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	overflow: hidden;
}
.mdb-faq-item__q {
	cursor: pointer;
	padding: var(--mdb-space-4) var(--mdb-space-6) var(--mdb-space-4) var(--mdb-space-4);
	font-family: var(--mdb-font-display);
	font-weight: 700;
	list-style: none;
	position: relative;
}
.mdb-faq-item__q::-webkit-details-marker { display: none; }
/* 開閉インジケータは文字記号ではなく CSS 作図の山括弧（chevron）。 */
.mdb-faq-item__q::after {
	content: "";
	position: absolute;
	right: var(--mdb-space-4);
	top: 50%;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid var(--mdb-teal-ink);
	border-bottom: 2px solid var(--mdb-teal-ink);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .15s ease;
}
.mdb-faq-item[open] .mdb-faq-item__q::after { transform: translateY(-30%) rotate(-135deg); }
.mdb-faq-item__a {
	padding: 0 var(--mdb-space-4) var(--mdb-space-4);
	color: var(--mdb-ink-soft);
}
.mdb-faq-item__a p:last-child { margin-bottom: 0; }

/* ============================================================
 * 12. 記事 prose
 * ============================================================ */
.mdb-article-layout { max-width: var(--mdb-prose); }
.mdb-article-hero { margin: 0 0 var(--mdb-space-5); border-radius: var(--mdb-radius-lg); overflow: hidden; }
.mdb-prose { line-height: var(--mdb-lh-base); }
.mdb-prose h2 { font-size: 1.5rem; margin: var(--mdb-space-7) 0 var(--mdb-space-4); }
.mdb-prose h3 { font-size: 1.2rem; margin: var(--mdb-space-6) 0 var(--mdb-space-3); }
.mdb-prose p { margin: 0 0 var(--mdb-space-5); }
.mdb-prose ul, .mdb-prose ol { margin: 0 0 var(--mdb-space-5) 1.4em; }
.mdb-prose li { margin-bottom: var(--mdb-space-2); }
.mdb-prose img { border-radius: var(--mdb-radius); margin: var(--mdb-space-4) 0; }
.mdb-prose a { color: var(--mdb-teal-ink); }
.mdb-prose blockquote {
	margin: var(--mdb-space-5) 0;
	padding: var(--mdb-space-4) var(--mdb-space-5);
	border-left: 4px solid var(--mdb-teal);
	background: var(--mdb-pale-sage);
	border-radius: var(--mdb-radius-sm);
	color: var(--mdb-ink-soft);
}

.mdb-related-clinics { margin-top: var(--mdb-space-7); }
/* 記事内の関連クリニック（カセット）は本文幅いっぱいに馴染ませる。 */
.mdb-related-clinics .mdb-card-grid--cassette { max-width: none; margin-inline: 0; }

/* ── 記事（疾患・ガイド）UI ── */
.mdb-article-header { margin-bottom: var(--mdb-space-5); }
.mdb-article-eyebrow {
	margin: 0 0 var(--mdb-space-2);
	font-family: var(--mdb-font-display);
	font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
	color: var(--mdb-teal-ink-2);
}
.mdb-article-lead {
	margin: var(--mdb-space-3) 0 0;
	font-size: 1.05rem; line-height: 1.9; color: var(--mdb-ink-soft);
}
.mdb-article-meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--mdb-space-2) var(--mdb-space-4);
	margin-top: var(--mdb-space-4);
	padding-top: var(--mdb-space-3);
	border-top: 1px solid var(--mdb-border-soft);
}
.mdb-article-meta__date { font-size: 0.85rem; color: var(--mdb-ink-faint); }
.mdb-article-meta__tags { margin: 0; }

/* 目次（TOC）＝デフォルト閉じ・クリックで開く。本文の最初のh2直前に挿入。 */
.mdb-toc {
	margin: var(--mdb-space-4) 0;
	padding: var(--mdb-space-3) var(--mdb-space-5);
	background: var(--mdb-pale-sage);
	border-radius: var(--mdb-radius-md, 12px);
}
.mdb-toc__summary {
	cursor: pointer; list-style: none;
	display: flex; align-items: center; gap: 0.4em;
	font-family: var(--mdb-font-display); font-weight: 700; font-size: 0.95rem;
	color: var(--mdb-teal-ink-2);
}
.mdb-toc__summary::-webkit-details-marker { display: none; }
.mdb-toc__summary::after {
	content: "▼"; font-size: 0.7em; color: var(--mdb-teal); margin-left: auto;
	transition: transform 0.2s ease;
}
.mdb-toc[open] .mdb-toc__summary::after { transform: rotate(180deg); }
.mdb-toc__list { margin: var(--mdb-space-3) 0 0; padding-left: 1.4em; }
.mdb-toc__list li { margin-bottom: var(--mdb-space-1); }
.mdb-toc__list a { color: var(--mdb-teal-ink); text-decoration: none; }
.mdb-toc__list a:hover { text-decoration: underline; }

/* 本文見出しにアクセント＋アンカー飛び先の余白 */
.mdb-prose h2 { padding-left: 0.6em; border-left: 4px solid var(--mdb-teal); scroll-margin-top: 84px; }
.mdb-prose h3 { scroll-margin-top: 84px; }
.mdb-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--mdb-space-5); font-size: 0.95rem; }
.mdb-prose th, .mdb-prose td { border: 1px solid var(--mdb-border-soft); padding: 0.6em 0.8em; text-align: left; }
.mdb-prose thead th { background: var(--mdb-pale-sage); color: var(--mdb-teal-ink-2); }

/* 免責注記 */
.mdb-article-disclaimer {
	margin: var(--mdb-space-6) 0 0;
	padding: var(--mdb-space-3) var(--mdb-space-4);
	background: var(--mdb-surface-2);
	border-radius: var(--mdb-radius-sm);
	font-size: 0.82rem; line-height: 1.7; color: var(--mdb-ink-faint);
}

/* 記事フッター（タグ）と前後投稿ナビ */
.mdb-article-footer { margin-top: var(--mdb-space-6); }
.mdb-article-tags { gap: var(--mdb-space-2); }
.mdb-post-nav {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mdb-space-3);
	margin-top: var(--mdb-space-7);
	padding-top: var(--mdb-space-5);
	border-top: 1px solid var(--mdb-border-soft);
}
.mdb-post-nav a { color: var(--mdb-teal-ink); text-decoration: none; font-weight: 700; }
.mdb-post-nav a:hover { text-decoration: underline; }
.mdb-post-nav__next { margin-left: auto; text-align: right; }

/* ============================================================
 *  セルフチェック（疾患ページ）
 * ============================================================ */
.mdb-selfcheck {
	margin: var(--mdb-space-7) 0;
	padding: var(--mdb-space-6);
	background:
		radial-gradient(90% 120% at 100% 0%, var(--mdb-pale-apricot), transparent 60%),
		var(--mdb-pale-sage);
	border-radius: var(--mdb-radius-lg);
}
/* 埋め込み（compact）= エリア上部など。地のグラデは親(CTAバナー)が持つので、
   入れ子の二重カードにならないよう余白を詰め、白カード地にする。 */
.mdb-selfcheck--compact {
	margin: var(--mdb-space-4) 0 0;
	padding: 0;
	background: transparent;
	border: 0;
}
.mdb-selfcheck--compact .mdb-section-title { padding-left: 0; }
.mdb-selfcheck--compact .mdb-section-title::before { display: none; }
.mdb-selfcheck__intro { color: var(--mdb-ink); margin-bottom: var(--mdb-space-4); }
.mdb-selfcheck__note { color: var(--mdb-ink-soft); font-size: 0.95rem; margin-bottom: var(--mdb-space-4); }

/* 免責ボックス（冒頭・結果の両方で使用） */
.mdb-disclaimer-box {
	background: var(--mdb-pale-apricot);
	border-radius: var(--mdb-radius-sm);
	padding: var(--mdb-space-3) var(--mdb-space-4);
	color: var(--mdb-ink-soft);
	font-size: 0.86rem;
	line-height: 1.7;
	margin-bottom: var(--mdb-space-4);
}

.mdb-selfcheck__questions { list-style: none; display: flex; flex-direction: column; gap: var(--mdb-space-4); }
.mdb-selfcheck__fieldset {
	margin: 0;
	/* 上 padding を厚めにして、見出し（legend）が上枠線と詰まって見えないようにする。 */
	padding: var(--mdb-space-5) var(--mdb-space-4) var(--mdb-space-4);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	background: var(--mdb-surface);
}
.mdb-selfcheck__legend {
	/* legend は既定で fieldset の上枠線をまたいで重なる（特に2行）。
	   float:left + width:100% で通常フロー化して枠内に収め、枠線との重なりを断つ。
	   さらに下に区切り線を引いて「設問見出し」と選択肢を明確に分ける。
	   choices 側で clear する。 */
	float: left;
	width: 100%;
	box-sizing: border-box;
	font-weight: 700;
	color: var(--mdb-ink);
	padding: 0 0 var(--mdb-space-3);
	margin: 0 0 var(--mdb-space-4);
	border-bottom: 1px solid var(--mdb-border-soft);
	line-height: 1.6;
}
.mdb-selfcheck__qnum { color: var(--mdb-teal-ink); margin-right: 0.25em; }

.mdb-selfcheck__choices {
	clear: both;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--mdb-space-2);
}
.mdb-selfcheck__choice {
	display: flex;
	align-items: center;
	gap: var(--mdb-space-2);
	padding: var(--mdb-space-3);
	border: 1px solid var(--mdb-border);
	border-radius: var(--mdb-radius-sm);
	background: var(--mdb-surface);
	cursor: pointer;
	min-height: 48px;
	transition: background-color .15s ease, border-color .15s ease;
}
.mdb-selfcheck__choice:hover { background: var(--mdb-pale-sage); border-color: var(--mdb-teal); }
.mdb-selfcheck__choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--mdb-teal-ink); flex: 0 0 auto; }
/* 選択中の見た目（:has 対応ブラウザ。未対応でもラジオ自体で識別可） */
.mdb-selfcheck__choice:has(input:checked) { background: var(--mdb-pale-sage); border-color: var(--mdb-teal-ink); }
.mdb-selfcheck__choice input:focus-visible { outline: 3px solid var(--mdb-focus); outline-offset: 2px; }
.mdb-selfcheck__choice-label { font-size: 0.95rem; }

.mdb-selfcheck__actions { margin-top: var(--mdb-space-5); }
.mdb-selfcheck__hint {
	margin-top: var(--mdb-space-3);
	color: var(--mdb-pr);
	font-weight: 700;
}

/* 結果 */
.mdb-selfcheck__result {
	margin-top: var(--mdb-space-6);
	padding: var(--mdb-space-6);
	background: var(--mdb-surface);
	border: 2px solid var(--mdb-teal);
	border-radius: var(--mdb-radius-lg);
	box-shadow: var(--mdb-shadow-glow);
}
.mdb-selfcheck__result:focus { outline: none; }
.mdb-selfcheck__result-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mdb-space-3);
	margin: 0 0 var(--mdb-space-3);
}
.mdb-selfcheck__score { font-family: var(--mdb-font-display); font-size: 1.5rem; color: var(--mdb-teal-ink-2); }
.mdb-selfcheck__band {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background: var(--mdb-teal-ink);
	border-radius: 999px;
	padding: 0.2em 0.9em;
}
.mdb-selfcheck__message { color: var(--mdb-ink); margin-bottom: var(--mdb-space-5); }

/* 希死念慮の強調枠 */
.mdb-selfcheck__crisis {
	background: var(--mdb-pale-apricot);
	border: 2px solid var(--mdb-apricot);
	border-radius: var(--mdb-radius);
	padding: var(--mdb-space-5);
	margin-bottom: var(--mdb-space-5);
}
.mdb-selfcheck__crisis p { margin: 0; color: #6f3f1c; font-weight: 700; }

/* 相談窓口 */
.mdb-selfcheck__helpline {
	background: var(--mdb-pale-sage);
	border-radius: var(--mdb-radius);
	padding: var(--mdb-space-5);
	margin-bottom: var(--mdb-space-5);
}
.mdb-selfcheck__helpline-title { font-weight: 700; margin: 0 0 var(--mdb-space-3); color: var(--mdb-teal-ink-2); }
.mdb-selfcheck__helpline-list {
	list-style: none;
	display: grid;
	gap: var(--mdb-space-3);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mdb-selfcheck__helpline-list li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--mdb-surface);
	border-radius: var(--mdb-radius-sm);
	padding: var(--mdb-space-3) var(--mdb-space-4);
}
.mdb-selfcheck__helpline-name { font-size: 0.9rem; font-weight: 700; }
.mdb-selfcheck__helpline-tel { font-family: var(--mdb-font-display); font-size: 1.2rem; color: var(--mdb-teal-ink-2); text-decoration: none; }
.mdb-selfcheck__helpline-tel:hover { text-decoration: underline; }

.mdb-selfcheck__cta { margin: 0; }

/* ============================================================
 * 13. トップページ
 * ============================================================ */
.mdb-hero {
	padding-block: clamp(var(--mdb-space-8), 10vw, 6rem);
}
.mdb-hero__inner { max-width: 720px; }
.mdb-hero__eyebrow {
	display: inline-block;
	font-family: var(--mdb-font-display);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--mdb-teal-ink-2);
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border);
	border-radius: 999px;
	padding: var(--mdb-space-2) var(--mdb-space-4);
	margin-bottom: var(--mdb-space-4);
}
.mdb-hero__title {
	font-size: clamp(1.9rem, 5.2vw, 3rem);
	line-height: 1.45;
	margin: 0 0 var(--mdb-space-4);
	color: var(--mdb-ink);
}
.mdb-hero__lead {
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	color: var(--mdb-ink-soft);
	margin-bottom: var(--mdb-space-6);
}
.mdb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--mdb-space-3); }

.mdb-front-sections { padding-block: var(--mdb-space-8); }
.mdb-front-block { margin-bottom: var(--mdb-space-8); }
.mdb-front-block:last-child { margin-bottom: 0; }
.mdb-front-more { margin-top: var(--mdb-space-5); }

/* 症状プロンプト */
.mdb-symptom-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--mdb-space-3);
}
.mdb-symptom {
	display: flex;
	align-items: center;
	gap: var(--mdb-space-3);
	padding: var(--mdb-space-4);
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	text-decoration: none;
	color: var(--mdb-ink);
	box-shadow: var(--mdb-shadow);
	transition: box-shadow .18s ease, transform .18s ease;
}
.mdb-symptom:hover { box-shadow: var(--mdb-shadow-md); transform: translateY(-2px); color: var(--mdb-teal-ink-2); }
.mdb-symptom__dot {
	flex: 0 0 auto;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--mdb-apricot), var(--mdb-teal));
}

/* 安心して受診するために */
.mdb-reassure-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--mdb-space-5);
}
.mdb-reassure {
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius-lg);
	padding: var(--mdb-space-5);
	box-shadow: var(--mdb-shadow);
}
.mdb-reassure__title { font-size: 1.1rem; margin: 0 0 var(--mdb-space-2); color: var(--mdb-teal-ink-2); }
.mdb-reassure__text { margin: 0; color: var(--mdb-ink-soft); font-size: 0.96rem; }

/* エリアブロック */
.mdb-area-block {
	background:
		radial-gradient(90% 120% at 100% 0%, var(--mdb-pale-apricot), transparent 60%),
		var(--mdb-pale-sage);
	border-radius: var(--mdb-radius-lg);
	padding: var(--mdb-space-7) var(--mdb-space-6);
}
.mdb-area-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--mdb-space-4);
	margin-top: var(--mdb-space-5);
}
.mdb-area-pref {
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	padding: var(--mdb-space-4);
}
.mdb-area-pref__name { font-size: 1.1rem; margin: 0 0 var(--mdb-space-3); }
.mdb-area-pref__name a { text-decoration: none; color: var(--mdb-teal-ink-2); }
.mdb-area-pref__cities { list-style: none; display: flex; flex-wrap: wrap; gap: var(--mdb-space-2); }
.mdb-area-pref__cities a {
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--mdb-ink);
	padding: 2px var(--mdb-space-2);
	border-radius: 999px;
	background: var(--mdb-pale-sage);
}
.mdb-area-pref__cities a:hover { background: var(--mdb-surface); color: var(--mdb-teal-ink-2); }

/* エリアアーカイブ補助 */
.mdb-area-links { margin: var(--mdb-space-7) 0; display: flex; flex-direction: column; gap: var(--mdb-space-5); }
.mdb-area-faq { margin-top: var(--mdb-space-7); }

/* エリア導入文の補助行 */
.mdb-area-intro p { margin-bottom: var(--mdb-space-3); }
.mdb-area-intro__note { color: var(--mdb-ink-soft); font-size: 0.96rem; }

/* ============================================================
 * エリアFV（スマホ最優先・「検索結果ページ」として見せる）
 * 件数・比較軸・条件チップ・CTA・クリニックを引きのある初期表示に。
 * ============================================================ */
.mdb-area-fv {
	/* スマホ：パンくず直後の上余白を圧縮し、件数・チップを早く見せる。 */
	margin-bottom: var(--mdb-space-5);
}
.mdb-area-fv__eyebrow {
	margin: 0 0 var(--mdb-space-2);
	font-family: var(--mdb-font-display);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--mdb-ink-soft);
}
.mdb-area-fv__eyebrow a { color: var(--mdb-teal-ink); text-decoration: none; }
.mdb-area-fv__eyebrow a:hover { color: var(--mdb-teal-ink-2); text-decoration: underline; }

.mdb-area-fv .mdb-area-title {
	font-size: clamp(1.35rem, 6vw, 1.75rem);
	line-height: 1.4;
	margin: 0 0 var(--mdb-space-3);
}

/* 見出し＋件数（検索結果ページの「○件」相当）。件数を大きく目立たせる。 */
.mdb-area-fv__headline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mdb-space-2) var(--mdb-space-3);
	margin-bottom: var(--mdb-space-4);
}
.mdb-area-fv .mdb-area-title { margin-bottom: 0; }
/* 件数バッジ＝中立な事実件数（評価・順位ではない）。数字を大きく太く。 */
.mdb-area-fv__count {
	display: inline-flex;
	align-items: baseline;
	gap: 0.15em;
	margin: 0;
	padding: 0.15em 0.7em;
	background: var(--mdb-pale-sage);
	border-radius: 999px;
	color: var(--mdb-teal-ink-2);
	white-space: nowrap;
}
.mdb-area-fv__count-num {
	font-family: var(--mdb-font-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
}
.mdb-area-fv__count-unit { font-weight: 700; font-size: 0.95rem; }
.mdb-area-fv__count-label { font-size: 0.85rem; color: var(--mdb-ink-soft); }

.mdb-area-fv__safety { margin: var(--mdb-space-3) 0 0; color: var(--mdb-ink-faint); font-size: 0.84rem; }

/* 検索条件ボックス（病院なび風・オリジナル実装）。視認性高い枠付きカード。 */
.mdb-area-search-box {
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border);
	border-radius: var(--mdb-radius);
	padding: var(--mdb-space-4);
	box-shadow: var(--mdb-shadow);
	margin-bottom: var(--mdb-space-4);
}
.mdb-area-search-box__rows {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mdb-space-3);
}
.mdb-area-search-box__row {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	gap: var(--mdb-space-2) var(--mdb-space-3);
	align-items: baseline;
	margin: 0;
}
.mdb-area-search-box__label {
	margin: 0;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--mdb-ink-faint);
}
.mdb-area-search-box__value { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mdb-space-2) var(--mdb-space-3); }
.mdb-area-search-box__current {
	font-family: var(--mdb-font-display);
	font-weight: 700;
	color: var(--mdb-ink);
}
.mdb-area-search-box__change {
	font-size: 0.85rem;
	color: var(--mdb-teal-ink);
	text-decoration: none;
	border: 1px solid var(--mdb-border);
	border-radius: 999px;
	padding: 0.1em 0.7em;
	white-space: nowrap;
}
.mdb-area-search-box__change:hover { background: var(--mdb-pale-sage); border-color: var(--mdb-teal); color: var(--mdb-teal-ink-2); }
/* 詳細条件の行はチップが幅いっぱいに広がれるよう value を block 寄りに。 */
.mdb-area-search-box__row--chips .mdb-area-search-box__value { display: block; min-width: 0; }
.mdb-area-search-box__row--chips .mdb-area-fv__chips { margin: 0; }
.mdb-area-search-box__axis {
	margin: var(--mdb-space-3) 0 var(--mdb-space-4);
	color: var(--mdb-ink-soft);
	font-size: 0.9rem;
}
.mdb-area-search-box__cta { display: flex; width: 100%; }

/* 一覧／地図 切替タブ（病院なび風のビュー切替。アンカーで該当セクションへ）。 */
.mdb-area-viewtabs {
	display: flex;
	gap: var(--mdb-space-2);
	margin-bottom: var(--mdb-space-2);
	overflow-x: auto;
	scrollbar-width: none;
}
.mdb-area-viewtabs::-webkit-scrollbar { display: none; }
.mdb-area-viewtabs__tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--mdb-space-4);
	border-radius: 999px;
	border: 1px solid var(--mdb-border);
	background: var(--mdb-surface);
	color: var(--mdb-teal-ink);
	font-family: var(--mdb-font-display);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mdb-area-viewtabs__tab:hover { background: var(--mdb-pale-sage); border-color: var(--mdb-teal); color: var(--mdb-teal-ink-2); }
.mdb-area-viewtabs__tab.is-active {
	background: var(--mdb-teal-ink);
	border-color: var(--mdb-teal-ink);
	color: #fff;
}
.mdb-area-viewtabs__tab--sub { margin-left: auto; }

/* 条件チップ：横スクロール（スマホで折り返さず1行・scroll-snap）。 */
.mdb-area-fv__chips { margin-bottom: var(--mdb-space-4); }
.mdb-chip-scroller {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--mdb-space-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	/* 端の見切れを少し出してスクロール可能と伝える。 */
	padding-bottom: var(--mdb-space-1);
}
.mdb-chip-scroller__item { flex: 0 0 auto; scroll-snap-align: start; }
.mdb-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--mdb-space-4);
	border-radius: 999px;
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border);
	color: var(--mdb-teal-ink);
	font-family: var(--mdb-font-display);
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mdb-chip:hover {
	background: var(--mdb-pale-sage);
	border-color: var(--mdb-teal);
	color: var(--mdb-teal-ink-2);
}
/* 絞り込み中の条件（選択状態）。 */
.mdb-chip.is-active {
	background: var(--mdb-teal-ink);
	border-color: var(--mdb-teal-ink);
	color: #fff;
}
.mdb-chip.is-active:hover {
	background: var(--mdb-teal-ink-2);
	border-color: var(--mdb-teal-ink-2);
	color: #fff;
}
/* 絞り込みを解除（控えめ）。 */
.mdb-chip--clear {
	background: transparent;
	border-color: var(--mdb-border);
	color: var(--mdb-ink-soft);
	font-weight: 500;
}

/* 導入文（SEO本文）の折りたたみ。FV直下に全文を出さない。 */
.mdb-area-fv__readmore {
	border-top: 1px solid var(--mdb-border-soft);
	padding-top: var(--mdb-space-3);
}
.mdb-area-fv__readmore-summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: var(--mdb-space-2);
	color: var(--mdb-teal-ink);
	font-family: var(--mdb-font-display);
	font-weight: 700;
	font-size: 0.94rem;
}
.mdb-area-fv__readmore-summary::-webkit-details-marker { display: none; }
.mdb-area-fv__readmore-summary::after {
	content: "";
	width: 0.45em; height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.mdb-area-fv__readmore[open] .mdb-area-fv__readmore-summary::after { transform: rotate(-135deg); }
.mdb-area-fv__readmore-summary:focus-visible { outline: 3px solid var(--mdb-teal); outline-offset: 2px; }
.mdb-area-fv__readmore-body { margin-top: var(--mdb-space-3); }
.mdb-area-fv__readmore-body .mdb-area-intro p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
	.mdb-area-fv__readmore-summary::after { transition: none; }
}

/* タブレット以上：検索条件の値とラベルを少しゆったりに、CTAは中央寄せの自動幅に。 */
@media (min-width: 600px) {
	.mdb-area-search-box { padding: var(--mdb-space-5); }
	.mdb-area-search-box__cta { width: auto; min-width: 280px; }
}

/* エリア上部の診断（セルフチェック）導線バナー */
.mdb-area-selfcheck-cta {
	margin: 0 0 var(--mdb-space-7);
	padding: var(--mdb-space-6);
	border-radius: var(--mdb-radius-lg);
	border: 1px solid var(--mdb-border);
	background:
		radial-gradient(80% 120% at 0% 0%, var(--mdb-pale-sage), transparent 65%),
		radial-gradient(80% 120% at 100% 100%, var(--mdb-pale-apricot), transparent 65%),
		var(--mdb-surface);
	box-shadow: var(--mdb-shadow);
}
.mdb-area-selfcheck-cta .mdb-section-title { margin-bottom: var(--mdb-space-3); }
.mdb-area-selfcheck-cta__lead { color: var(--mdb-ink-soft); margin-bottom: var(--mdb-space-4); }
.mdb-area-selfcheck-cta__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--mdb-space-3);
	margin-bottom: var(--mdb-space-4);
}
.mdb-area-selfcheck-cta__link {
	display: flex;
	align-items: center;
	gap: var(--mdb-space-3);
	padding: var(--mdb-space-3) var(--mdb-space-4);
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border);
	border-radius: 999px;
	text-decoration: none;
	color: var(--mdb-ink);
	font-family: var(--mdb-font-display);
	font-weight: 700;
	min-height: 48px;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.mdb-area-selfcheck-cta__link:hover {
	background: var(--mdb-pale-sage);
	border-color: var(--mdb-teal);
	color: var(--mdb-teal-ink-2);
	transform: translateY(-1px);
}
.mdb-area-selfcheck-cta__icon {
	flex: 0 0 auto;
	width: 1.6em; height: 1.6em;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--mdb-teal-ink);
	color: #fff;
	border-radius: 50%;
	font-size: 0.78rem;
}
.mdb-area-selfcheck-cta__note {
	margin: 0;
	font-size: 0.85rem;
	color: var(--mdb-ink-faint);
}
.mdb-area-selfcheck-cta__others { margin-top: var(--mdb-space-5); }
.mdb-area-selfcheck-cta__others .mdb-section-title { margin-bottom: var(--mdb-space-3); }

/* エリアSEOガイド（選び方・条件別・初診の流れ） */
.mdb-area-guide {
	margin: var(--mdb-space-7) 0;
	display: flex;
	flex-direction: column;
	gap: var(--mdb-space-6);
}
.mdb-area-guide__block { }

/* チェックリスト（選び方のポイント） */
.mdb-check-list { list-style: none; display: flex; flex-direction: column; gap: var(--mdb-space-3); }
.mdb-check-list__item {
	position: relative;
	padding: var(--mdb-space-3) var(--mdb-space-4) var(--mdb-space-3) calc(var(--mdb-space-6) + var(--mdb-space-2));
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	color: var(--mdb-ink-soft);
}
.mdb-check-list__item::before {
	content: "";
	position: absolute;
	left: var(--mdb-space-4);
	top: calc(var(--mdb-space-3) + 0.65em);
	width: 0.5em; height: 0.5em;
	background: var(--mdb-teal-ink);
	border-radius: 50%;
}

/* 初診・予約の流れ（番号つきステップ） */
.mdb-step-list {
	list-style: none;
	counter-reset: mdb-step;
	display: flex;
	flex-direction: column;
	gap: var(--mdb-space-3);
}
.mdb-step-list__item {
	counter-increment: mdb-step;
	position: relative;
	padding: var(--mdb-space-4) var(--mdb-space-4) var(--mdb-space-4) calc(var(--mdb-space-7) + var(--mdb-space-2));
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	color: var(--mdb-ink-soft);
}
.mdb-step-list__item::before {
	content: counter(mdb-step);
	position: absolute;
	left: var(--mdb-space-4);
	top: var(--mdb-space-4);
	width: 1.9em; height: 1.9em;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--mdb-pale-sage);
	color: var(--mdb-teal-ink-2);
	border-radius: 50%;
	font-family: var(--mdb-font-display);
	font-weight: 700;
}
.mdb-step-list__label {
	display: block;
	font-family: var(--mdb-font-display);
	font-weight: 700;
	color: var(--mdb-ink);
	margin-bottom: var(--mdb-space-1);
}

/* 0件エリアの誘導ブロック */
.mdb-area-empty { margin-bottom: var(--mdb-space-6); }
.mdb-area-empty .mdb-pill-list { margin-bottom: var(--mdb-space-4); }
.mdb-area-empty .mdb-front-more { display: flex; flex-wrap: wrap; gap: var(--mdb-space-3); }

/* 選び方ポイント（H3カード×4） */
.mdb-points-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--mdb-space-4);
}
.mdb-point {
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	padding: var(--mdb-space-5);
	box-shadow: var(--mdb-shadow);
}
.mdb-point__title { font-size: 1.05rem; margin: 0 0 var(--mdb-space-2); color: var(--mdb-teal-ink-2); }
.mdb-point__text { margin: 0; color: var(--mdb-ink-soft); font-size: 0.95rem; }

/* 対応している主な症状・疾患（H3リンクのリスト） */
.mdb-symptom-links { display: flex; flex-direction: column; gap: var(--mdb-space-2); }
.mdb-symptom-link__title {
	font-size: 1.02rem;
	margin: 0;
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius-sm);
	padding: var(--mdb-space-3) var(--mdb-space-4);
	font-weight: 500;
}
.mdb-symptom-link__title a { text-decoration: none; color: var(--mdb-ink); display: block; }
.mdb-symptom-link__title a:hover { color: var(--mdb-teal-ink-2); }

/* 周辺の駅・近隣エリア（H3入れ子） */
.mdb-area-nearby .mdb-nearby-block { margin-bottom: var(--mdb-space-5); }
.mdb-area-nearby .mdb-nearby-block:last-child { margin-bottom: 0; }
.mdb-nearby-block__title {
	font-size: 1.02rem;
	margin: 0 0 var(--mdb-space-2);
	font-weight: 500;
}
.mdb-nearby-block__title a { text-decoration: none; color: var(--mdb-teal-ink); }
.mdb-nearby-block__title a:hover { color: var(--mdb-teal-ink-2); text-decoration: underline; }
.mdb-nearby-block__title--group { color: var(--mdb-ink-soft); font-weight: 700; }

/* 件数バッジ（「◯件」事実表記）。評価/順位ではない中立な数。 */
.mdb-count-badge {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.05em 0.5em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--mdb-teal-ink-2);
	background: var(--mdb-pale-sage);
	border-radius: 999px;
	vertical-align: middle;
}

/* この地域の主要駅から探す（在籍数順の駅リンク） */
.mdb-station-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mdb-space-2);
}
@media (min-width: 600px) {
	.mdb-station-list { grid-template-columns: 1fr 1fr; }
}
.mdb-station-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mdb-space-3);
	padding: var(--mdb-space-3) var(--mdb-space-4);
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	color: var(--mdb-teal-ink);
	text-decoration: none;
	min-height: 48px;
}
.mdb-station-link:hover { background: var(--mdb-pale-sage); border-color: var(--mdb-teal); }
.mdb-station-link__name { font-weight: 700; }
.mdb-station-link .mdb-count-badge { margin-left: 0; flex: 0 0 auto; }

/* 費用の目安テーブル */
.mdb-cost-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius);
	overflow: hidden;
}
.mdb-cost-table th,
.mdb-cost-table td {
	padding: var(--mdb-space-3);
	text-align: left;
	border-bottom: 1px solid var(--mdb-border-soft);
	font-size: 0.95rem;
}
.mdb-cost-table thead th { background: var(--mdb-pale-sage); color: var(--mdb-teal-ink-2); }
.mdb-cost-table tbody th { font-weight: 700; }
.mdb-cost-table tbody th a { color: var(--mdb-teal-ink); text-decoration: none; }
.mdb-cost-table tbody th a:hover { text-decoration: underline; }
.mdb-cost-table tr:last-child th,
.mdb-cost-table tr:last-child td { border-bottom: 0; }
.mdb-cost-points { margin: 0 0 var(--mdb-space-3) 1.2em; color: var(--mdb-ink-soft); }
.mdb-cost-points li { margin-bottom: var(--mdb-space-2); }

/* エリア内検索フォーム */
.mdb-area-search {
	margin: var(--mdb-space-7) 0;
	padding: var(--mdb-space-6);
	border-radius: var(--mdb-radius-lg);
	background:
		radial-gradient(80% 120% at 0% 100%, var(--mdb-pale-sage), transparent 65%),
		var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
}
.mdb-area-search .mdb-search-form { max-width: 560px; margin: 0; }
.mdb-area-search__alt { margin: var(--mdb-space-3) 0 0; font-size: 0.92rem; }

/* FAQ: summary 内の H3 をアコーディオン見出しとして自然に見せる */
.mdb-faq-item__q-text {
	display: inline;
	margin: 0;
	font-size: 1rem;
	font-family: var(--mdb-font-display);
	font-weight: 700;
	color: var(--mdb-ink);
}

/* near me bar */
.mdb-nearby-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mdb-space-3);
	margin-bottom: var(--mdb-space-5);
}
.mdb-nearby-status { margin: 0; font-size: 0.92rem; color: var(--mdb-ink-soft); }

/* 記事リスト（汎用） */
.mdb-post-list { display: flex; flex-direction: column; gap: var(--mdb-space-4); }
.mdb-post-list__item {
	display: flex;
	gap: var(--mdb-space-4);
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius-lg);
	padding: var(--mdb-space-4);
	box-shadow: var(--mdb-shadow);
}
.mdb-post-list__thumb { flex: 0 0 160px; border-radius: var(--mdb-radius); overflow: hidden; }
.mdb-post-list__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mdb-post-list__title { font-size: 1.15rem; margin: 0 0 var(--mdb-space-2); }
.mdb-post-list__title a { text-decoration: none; color: var(--mdb-ink); }
.mdb-post-list__title a:hover { color: var(--mdb-teal-ink-2); }
.mdb-post-list__excerpt { margin: 0; color: var(--mdb-ink-soft); font-size: 0.95rem; }

.mdb-link-list { list-style: none; display: flex; flex-direction: column; gap: var(--mdb-space-2); }
.mdb-link-list a { color: var(--mdb-teal-ink); }

/* 検索結果 */
.mdb-search-results { display: flex; flex-direction: column; gap: var(--mdb-space-4); }
.mdb-search-item {
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border-soft);
	border-radius: var(--mdb-radius-lg);
	padding: var(--mdb-space-5);
	box-shadow: var(--mdb-shadow);
}
.mdb-search-item__type { font-size: 0.75rem; color: var(--mdb-ink-faint); margin: 0 0 var(--mdb-space-1); }
.mdb-search-item__title { font-size: 1.2rem; margin: 0 0 var(--mdb-space-2); }
.mdb-search-item__title a { text-decoration: none; }
.mdb-search-item__excerpt { margin: 0; color: var(--mdb-ink-soft); font-size: 0.95rem; }

.mdb-404 { text-align: center; }
.mdb-404 .mdb-search-form { margin-inline: auto; }
.mdb-404-links { margin-top: var(--mdb-space-5); display: inline-block; text-align: left; }

/* ============================================================
 * 14. ページネーション・フォーム
 * ============================================================ */
.mdb-hero-search__label { display: block; font-family: var(--mdb-font-display); font-weight: 700; margin-bottom: var(--mdb-space-2); }
.mdb-hero-search__row,
.mdb-search-form__row { display: flex; gap: var(--mdb-space-2); }
.mdb-hero-search__input,
.mdb-search-form__input {
	flex: 1;
	padding: var(--mdb-space-3) var(--mdb-space-5);
	border: 2px solid var(--mdb-border);
	border-radius: 999px;
	font-size: 1rem;
	min-height: 50px;
	background: var(--mdb-surface);
	color: var(--mdb-ink);
}
.mdb-hero-search__input:focus,
.mdb-search-form__input:focus { border-color: var(--mdb-teal); outline-offset: 0; }
.mdb-search-form { margin-top: var(--mdb-space-4); max-width: 520px; }

.mdb-pagination,
.navigation.pagination,
nav.pagination { margin-top: var(--mdb-space-7); }
.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--mdb-space-2);
	list-style: none;
	justify-content: center;
}
.pagination .nav-links,
.page-numbers li { display: inline-flex; gap: var(--mdb-space-2); }
.page-numbers a,
.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 46px;
	padding: 0 var(--mdb-space-3);
	border-radius: 999px;
	border: 1px solid var(--mdb-border);
	background: var(--mdb-surface);
	text-decoration: none;
	color: var(--mdb-ink);
}
.page-numbers a:hover { background: var(--mdb-pale-sage); border-color: var(--mdb-teal); color: var(--mdb-teal-ink-2); }
.page-numbers .current { background: var(--mdb-teal-ink); border-color: var(--mdb-teal-ink); color: #fff; font-weight: 700; }

/* ============================================================
 * 15. レスポンシブ
 * ============================================================ */
@media (max-width: 768px) {
	.mdb-site-header { position: static; }
	.mdb-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.mdb-primary-nav { position: relative; }
	/* モバイルはヘッダーをコンパクトに（FVを圧迫しない）：タグライン非表示・1行化・余白圧縮 */
	.mdb-site-header__inner { padding-block: var(--mdb-space-3); flex-wrap: nowrap; gap: var(--mdb-space-3); }
	.mdb-site-description { display: none; }
	.mdb-site-title { font-size: 1.15rem; }
	.mdb-hero { padding-top: var(--mdb-space-6); }
	.mdb-menu {
		display: none;
		position: absolute;
		right: 0;
		top: calc(100% + var(--mdb-space-2));
		flex-direction: column;
		gap: 0;
		background: var(--mdb-surface);
		border: 1px solid var(--mdb-border);
		border-radius: var(--mdb-radius);
		box-shadow: var(--mdb-shadow-md);
		min-width: 230px;
		padding: var(--mdb-space-2);
		z-index: 60;
	}
	.mdb-menu.is-open { display: flex; }
	.mdb-menu a { padding: var(--mdb-space-3); border-bottom: 1px solid var(--mdb-border-soft); }
	.mdb-menu li:last-child a { border-bottom: 0; }

	.mdb-post-list__item { flex-direction: column; }
	.mdb-post-list__thumb { flex-basis: auto; }

	.mdb-deflist__row { flex-direction: column; gap: var(--mdb-space-1); }
	.mdb-deflist__row dt { flex-basis: auto; }

	.mdb-cta-bar .mdb-btn { flex-basis: 100%; }
}

@media (max-width: 480px) {
	.mdb-clinic-card__actions { flex-direction: column; }
}

/* エリアの診断（セルフチェック）＝ 既定で閉じる details（やりたい人だけ開く） */
.mdb-area-selfcheck-details { margin-top: var(--mdb-space-4); }
.mdb-area-selfcheck-details__summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--mdb-space-2);
	padding: var(--mdb-space-4) var(--mdb-space-5);
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-teal-ink);
	border-radius: 999px;
	color: var(--mdb-teal-ink);
	font-weight: 700;
}
.mdb-area-selfcheck-details__summary::-webkit-details-marker { display: none; }
.mdb-area-selfcheck-details__label { flex: 1; }
.mdb-area-selfcheck-details__hint { font-weight: 400; font-size: 0.86rem; color: var(--mdb-ink-soft); }
.mdb-area-selfcheck-details__summary::after {
	content: "";
	flex: none;
	width: 0.5em; height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 0.2em;
	transition: transform 0.2s ease;
}
.mdb-area-selfcheck-details[open] .mdb-area-selfcheck-details__summary::after { transform: rotate(-135deg); }
.mdb-area-selfcheck-details__summary:focus-visible { outline: 3px solid var(--mdb-teal); outline-offset: 2px; }
.mdb-area-selfcheck-details__body { margin-top: var(--mdb-space-4); }
@media (prefers-reduced-motion: reduce) {
	.mdb-area-selfcheck-details__summary::after { transition: none; }
}

/* ── スマホ最適化（閲覧の約9割がスマホ）：過剰な余白を詰め、本文の横幅を確保 ── */
@media (max-width: 600px) {
	.mdb-container { padding-inline: var(--mdb-space-4); }
	.mdb-layout { padding-block: var(--mdb-space-5) var(--mdb-space-6); }
	/* トップFV：スマホは見出しを詰め、CTAを全幅に（行動を取りやすく）。 */
	.mdb-hero__title { font-size: 1.55rem; line-height: 1.4; }
	.mdb-hero__lead { font-size: 1.02rem; margin-bottom: var(--mdb-space-5); }
	.mdb-hero__actions .mdb-btn { flex: 1 1 100%; }
	/* エリアFV：スマホは上余白を圧縮し、件数・チップ・CTAを早く見せる。 */
	.mdb-area-layout { padding-top: var(--mdb-space-3); }
	.mdb-area-fv { margin-bottom: var(--mdb-space-4); }
	/* H1はスマホで最大2行に抑え、引きの強い要素を上に詰める。 */
	.mdb-area-fv .mdb-area-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.mdb-area-selfcheck-cta { padding: var(--mdb-space-4); }
	.mdb-area-selfcheck-cta__lead { font-size: 0.95rem; }
	.mdb-area-selfcheck-details__summary { padding: var(--mdb-space-3) var(--mdb-space-4); }
	.mdb-selfcheck { padding: var(--mdb-space-4); }
	/* スマホも上 padding は確保（見出しと枠線の詰まり回避）、左右は少し詰める。 */
	.mdb-selfcheck__fieldset { padding: var(--mdb-space-4) var(--mdb-space-3) var(--mdb-space-3); }
	.mdb-selfcheck__choices { grid-template-columns: 1fr; }
	.mdb-selfcheck__legend { line-height: 1.55; }
	.mdb-disclaimer-box { padding: var(--mdb-space-3); }
}

/* セルフチェックのステッパー（1問ずつ表示。JS有効時のみ。非対応は全問表示）
   非アクティブ設問は **li ごと** 隠す。fieldset だけ display:none にすると空の li が
   flex アイテムとして残り、__questions の gap 分（×設問数）の余白が下部に溜まる。
   JS が li.mdb-selfcheck__q にも is-active を付与する（全ブラウザ対応）。 */
.mdb-selfcheck.is-stepper .mdb-selfcheck__q:not(.is-active) { display: none; }
.mdb-selfcheck.is-stepper [data-sc-question]:not(.is-active) { display: none; }
.mdb-selfcheck.is-complete .mdb-selfcheck__questions,
.mdb-selfcheck.is-complete .mdb-selfcheck__progress,
.mdb-selfcheck.is-complete .mdb-selfcheck__back,
.mdb-selfcheck.is-complete .mdb-selfcheck__predisclaimer { display: none; }
/* 注釈は診断コンテンツ（設問）の“下”に置く脚注。設問との間隔を確保。 */
.mdb-selfcheck__predisclaimer { margin-top: var(--mdb-space-4); }
.mdb-selfcheck__progress {
	margin: 0 0 var(--mdb-space-3);
	font-weight: 700;
	color: var(--mdb-teal-ink);
	font-size: 0.9rem;
}
.mdb-selfcheck__back {
	margin-top: var(--mdb-space-3);
	background: none;
	border: 0;
	color: var(--mdb-ink-soft);
	cursor: pointer;
	padding: var(--mdb-space-2) 0;
	text-decoration: underline;
	font: inherit;
}
.mdb-selfcheck__back:focus-visible { outline: 3px solid var(--mdb-focus); outline-offset: 2px; }

/* ============================================================
 *  お問い合わせ（コンタクトフォーム）＋プレミアム案内
 *  モバイル最優先（閲覧の約9割がスマホ）。ブランド「やわらかな光」準拠。
 * ============================================================ */

/* レイアウト */
.mdb-contact-layout { max-width: var(--mdb-prose); }
.mdb-contact-head { margin-bottom: var(--mdb-space-5); }
.mdb-contact-head__title { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: var(--mdb-space-3); }
.mdb-contact-head__lead { color: var(--mdb-ink-soft); }
.mdb-contact-intro { margin-bottom: var(--mdb-space-5); }
.mdb-contact-section { margin-bottom: var(--mdb-space-7); }

/* 送信結果の通知 */
.mdb-notice {
	border-radius: var(--mdb-radius-sm);
	padding: var(--mdb-space-4) var(--mdb-space-5);
	margin-bottom: var(--mdb-space-5);
	border: 1px solid var(--mdb-border);
	background: var(--mdb-surface);
}
.mdb-notice__title { font-family: var(--mdb-font-display); font-weight: 700; margin-bottom: var(--mdb-space-2); }
.mdb-notice__list { margin: var(--mdb-space-2) 0 0; padding-left: 1.2em; list-style: disc; }
.mdb-notice__list li { margin-bottom: var(--mdb-space-1); }
.mdb-notice--success {
	background: var(--mdb-pale-sage);
	border-color: var(--mdb-teal);
}
.mdb-notice--success .mdb-notice__title { color: var(--mdb-teal-ink-2); }
.mdb-notice--error {
	background: var(--mdb-pale-apricot);
	border-color: var(--mdb-apricot);
}
.mdb-notice--error .mdb-notice__title { color: var(--mdb-pr); }

/* フォーム */
.mdb-contact-form { margin-top: var(--mdb-space-4); }
.mdb-field { margin-bottom: var(--mdb-space-5); }
.mdb-field__label {
	display: block;
	font-family: var(--mdb-font-display);
	font-weight: 700;
	color: var(--mdb-ink);
	margin-bottom: var(--mdb-space-2);
}
.mdb-required {
	display: inline-block;
	font-family: var(--mdb-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--mdb-pr);
	background: var(--mdb-pale-apricot);
	border-radius: 999px;
	padding: 0.1em 0.6em;
	margin-left: var(--mdb-space-2);
	vertical-align: middle;
}
.mdb-field__hint {
	color: var(--mdb-ink-soft);
	font-size: 0.95rem;
	background: var(--mdb-pale-sage);
	border-radius: var(--mdb-radius-sm);
	padding: var(--mdb-space-3) var(--mdb-space-4);
	margin: calc(var(--mdb-space-5) * -1 + var(--mdb-space-2)) 0 var(--mdb-space-5);
}

.mdb-contact-form input[type="text"],
.mdb-contact-form input[type="email"],
.mdb-contact-form input[type="url"],
.mdb-contact-form input[type="tel"],
.mdb-contact-form select,
.mdb-contact-form textarea {
	display: block;
	width: 100%;
	padding: var(--mdb-space-3) var(--mdb-space-4);
	border: 2px solid var(--mdb-border);
	border-radius: var(--mdb-radius-sm);
	background: var(--mdb-surface);
	color: var(--mdb-ink);
	font-family: var(--mdb-font-body);
	font-size: 1rem; /* iOSの自動ズーム回避のため16px相当を維持 */
	line-height: 1.6;
	min-height: 52px;
}
.mdb-contact-form textarea { min-height: 140px; resize: vertical; line-height: 1.8; }
.mdb-contact-form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--mdb-teal-ink) 50%), linear-gradient(135deg, var(--mdb-teal-ink) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: var(--mdb-space-7);
}
.mdb-contact-form input:focus,
.mdb-contact-form select:focus,
.mdb-contact-form textarea:focus {
	border-color: var(--mdb-teal);
	outline: 2px solid var(--mdb-teal);
	outline-offset: 1px;
}
.mdb-contact-form ::placeholder { color: var(--mdb-ink-faint); }

/* エラーのフィールド強調 */
.mdb-field--error input,
.mdb-field--error select,
.mdb-field--error textarea { border-color: var(--mdb-apricot); background: var(--mdb-pale-apricot); }

/* 同意チェック */
.mdb-field--consent { margin-top: var(--mdb-space-6); }
.mdb-consent {
	display: flex;
	gap: var(--mdb-space-3);
	align-items: flex-start;
	cursor: pointer;
	background: var(--mdb-surface-2);
	border: 1px solid var(--mdb-border);
	border-radius: var(--mdb-radius-sm);
	padding: var(--mdb-space-4);
	line-height: 1.7;
}
.mdb-consent input[type="checkbox"] {
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.15em;
	accent-color: var(--mdb-teal-ink);
	flex: 0 0 auto;
}
.mdb-field--consent.mdb-field--error .mdb-consent { border-color: var(--mdb-apricot); background: var(--mdb-pale-apricot); }

.mdb-contact-form__submit { margin-top: var(--mdb-space-6); }
.mdb-contact-form__submit .mdb-btn { width: 100%; }

/* ハニーポット（人間には見えないが、表示崩れもなく確実に隠す） */
.mdb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── プレミアム案内 ── */
.mdb-premium {
	margin-top: var(--mdb-space-7);
	padding-top: var(--mdb-space-6);
	border-top: 2px solid var(--mdb-border-soft);
}
.mdb-premium__lead { color: var(--mdb-ink-soft); margin-bottom: var(--mdb-space-4); }
/* 上部掲載枠が有限である旨の注記（控えめにアプリコットで強調）。 */
.mdb-premium__limited {
	margin: 0 0 var(--mdb-space-5);
	padding: var(--mdb-space-3) var(--mdb-space-4);
	background: var(--mdb-pale-apricot);
	border-radius: var(--mdb-radius-sm);
	color: var(--mdb-ink);
	font-size: 0.92rem;
	font-weight: 700;
}

/* プランカード */
.mdb-plan-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mdb-space-4);
	margin-bottom: var(--mdb-space-6);
}
.mdb-plan-card {
	background: var(--mdb-surface);
	border: 1px solid var(--mdb-border);
	border-radius: var(--mdb-radius);
	padding: var(--mdb-space-5);
	box-shadow: var(--mdb-shadow);
	display: flex;
	flex-direction: column;
}
.mdb-plan-card--premium {
	border: 2px solid var(--mdb-teal);
	box-shadow: var(--mdb-shadow-md);
	position: relative;
}
.mdb-plan-card__badge {
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	background: var(--mdb-pr);
	border-radius: 999px;
	padding: 0.18em 0.8em;
	margin-bottom: var(--mdb-space-2);
}
.mdb-plan-card__name { font-family: var(--mdb-font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: var(--mdb-space-1); }
.mdb-plan-card__price {
	font-family: var(--mdb-font-display);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--mdb-teal-ink);
	margin-bottom: var(--mdb-space-2);
	line-height: 1.2;
}
.mdb-plan-card__price-note { display: block; font-family: var(--mdb-font-body); font-weight: 400; font-size: 0.78rem; color: var(--mdb-ink-soft); }
.mdb-plan-card__note { color: var(--mdb-ink-soft); font-size: 0.92rem; margin-bottom: var(--mdb-space-4); flex: 1; }
.mdb-plan-card__cta { width: 100%; text-align: center; }

/* 比較表 */
.mdb-plan-table { width: 100%; border-collapse: collapse; background: var(--mdb-surface); border-radius: var(--mdb-radius-sm); overflow: hidden; }
.mdb-plan-table th,
.mdb-plan-table td {
	padding: var(--mdb-space-3) var(--mdb-space-4);
	border-bottom: 1px solid var(--mdb-border-soft);
	text-align: left;
	vertical-align: top;
	font-size: 0.95rem;
}
.mdb-plan-table thead th {
	font-family: var(--mdb-font-display);
	background: var(--mdb-surface-2);
	color: var(--mdb-ink);
	white-space: nowrap;
}
.mdb-plan-table tbody th { font-weight: 500; color: var(--mdb-ink); }
.mdb-plan-table td { text-align: center; }
.mdb-plan-table tbody th { text-align: left; }
.mdb-plan-table__premium { background: var(--mdb-pale-sage); }
.mdb-plan-yes { color: var(--mdb-teal-ink); font-weight: 700; }
.mdb-plan-no { color: var(--mdb-ink-faint); }

.mdb-premium__notice { margin-top: var(--mdb-space-4); font-size: 0.9rem; }
.mdb-premium__cta { margin-top: var(--mdb-space-6); text-align: center; }
.mdb-premium__cta .mdb-btn { width: 100%; max-width: 360px; }
.mdb-premium__cta .mdb-note { margin-top: var(--mdb-space-3); }

/* クリニック詳細：控えめな「修正依頼」導線 */
.mdb-clinic-correction { margin: var(--mdb-space-5) 0 0; text-align: center; }
.mdb-clinic-correction__link {
	color: var(--mdb-ink-soft);
	font-size: 0.9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mdb-clinic-correction__link:hover { color: var(--mdb-teal-ink); }

/* ── スマホ最適化 ── */
@media (max-width: 600px) {
	.mdb-plan-cards { grid-template-columns: 1fr; }
	/* 比較表は横スクロールに頼らず、ラベル列を詰めて3列を画面内に収める。 */
	.mdb-plan-table th,
	.mdb-plan-table td { padding: var(--mdb-space-2) var(--mdb-space-2); font-size: 0.85rem; }
	.mdb-plan-table tbody th { font-size: 0.85rem; }
	.mdb-field { margin-bottom: var(--mdb-space-4); }
	.mdb-premium__cta .mdb-btn,
	.mdb-plan-card__cta { max-width: none; }
}

/* ============================================================
 *  法務・運営ページ（運営者情報 / プライバシー / 特商法）
 *  モバイル最優先。ブランド「やわらかな光」準拠。
 * ============================================================ */
.mdb-legal-layout { max-width: var(--mdb-prose); }
.mdb-legal-head { margin-bottom: var(--mdb-space-6); }
.mdb-legal-head__title { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: var(--mdb-space-3); }
.mdb-legal-head__lead { color: var(--mdb-ink-soft); }
.mdb-legal-intro { margin-bottom: var(--mdb-space-5); }
.mdb-legal-section { margin-bottom: var(--mdb-space-7); }
.mdb-legal-prose .mdb-legal-section { margin-bottom: var(--mdb-space-6); }
.mdb-legal-revnote { margin-top: var(--mdb-space-6); }

/* 定義リスト（事業者概要・特商法・連絡先） */
.mdb-legal-dl {
	margin: 0;
	border: 1px solid var(--mdb-border);
	border-radius: var(--mdb-radius-sm);
	background: var(--mdb-surface);
	overflow: hidden;
}
.mdb-legal-dl__row {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	gap: var(--mdb-space-4);
	padding: var(--mdb-space-4) var(--mdb-space-5);
	border-bottom: 1px solid var(--mdb-border-soft);
}
.mdb-legal-dl__row:last-child { border-bottom: 0; }
.mdb-legal-dl dt {
	font-family: var(--mdb-font-display);
	font-weight: 700;
	color: var(--mdb-ink);
	font-size: 0.95rem;
	line-height: 1.7;
}
.mdb-legal-dl dd { margin: 0; color: var(--mdb-ink); line-height: 1.8; word-break: break-word; }

/* フッターの法務リンク */
.mdb-footer-legal { margin-top: var(--mdb-space-5); }
.mdb-footer-legal__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mdb-space-2) var(--mdb-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.mdb-footer-legal__list a {
	color: var(--mdb-ink-soft);
	font-size: 0.9rem;
	text-decoration: none;
}
.mdb-footer-legal__list a:hover { color: var(--mdb-teal-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── スマホ最適化 ── */
@media (max-width: 600px) {
	/* 定義リストは縦積み（ラベル→値）にして窮屈さを解消。 */
	.mdb-legal-dl__row { grid-template-columns: 1fr; gap: var(--mdb-space-1); padding: var(--mdb-space-4); }
	.mdb-legal-dl dt { font-size: 0.9rem; color: var(--mdb-ink-soft); }
	.mdb-footer-legal__list { gap: var(--mdb-space-2) var(--mdb-space-3); }
}

/* ── フッター：医療機関の方への入口 ── */
.mdb-footer-provider {
	margin-top: var(--mdb-space-5);
	padding: var(--mdb-space-4) var(--mdb-space-5);
	background: var(--mdb-pale-sage);
	border: 1px solid var(--mdb-border);
	border-radius: var(--mdb-radius-sm);
}
.mdb-footer-provider__title {
	font-family: var(--mdb-font-display);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--mdb-teal-ink-2);
	margin: 0 0 var(--mdb-space-3);
}
.mdb-footer-provider__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mdb-space-2) var(--mdb-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.mdb-footer-provider__list a {
	color: var(--mdb-teal-ink);
	font-size: 0.92rem;
	text-decoration: none;
	font-weight: 500;
}
.mdb-footer-provider__list a:hover { color: var(--mdb-teal-ink-2); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
	.mdb-footer-provider__list { flex-direction: column; gap: var(--mdb-space-2); }
}