/*
 * コンポーネント（docs/04 v2・design/05-usagi-mado のモック）。
 * 色・角丸・影・操作高さは tokens.css の変数だけを使う。値を直接書かない。
 */

.clinic { padding: 6px 20px 110px; display: flex; flex-direction: column; gap: 14px; }

.clinic__breadcrumb { font-size: var(--fs-label); color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; line-height: 1.6; }
.clinic__breadcrumb > * { flex: 0 0 auto; max-width: 100%; }
.clinic__breadcrumb a { color: var(--rose-dark); }

.clinic__name { font-size: 1.4rem; font-weight: 700; line-height: 1.35; margin: 0; }

/* カード */
.card {
	background: var(--surface);
	border-radius: var(--r-22);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: var(--shadow-card);
}
.card--rabbit { background: var(--rose-tint-weak); }
.card__head { display: flex; justify-content: space-between; align-items: center; }
.card__count { font-size: var(--fs-body); font-weight: 700; }
.card__source { font-size: var(--fs-label); color: var(--ink); line-height: 1.7; }
/*
 * 出所＋確認日と「出典を見る」を1行に並べる。入りきらなければ折り返す。
 * `align-items: center` で、44px のボタンと文字の高さが揃う。
 */
/*
 * 下の余白は「出典を見る」の当たり判定（44px）が次の行に食い込まないための保険。
 * 無いと院名に3px重なる（2026-09-12 実測）。バッジ行の `margin-bottom` と同じ理由。
 */
.card__source--row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.card__action { margin: 0; }

.h { font-size: var(--fs-body); font-weight: 700; margin: 0; }
.label { font-size: var(--fs-label); color: var(--text-2); letter-spacing: .04em; }
.note { font-size: var(--fs-label); color: var(--text-2); line-height: 1.7; margin: 0; }
.pre { white-space: pre-wrap; font-size: var(--fs-body); margin: 0; }

/*
 * 状態バッジ。大きなピルで、色だけに頼らず必ず文言も出す。
 * 枠線の色で状態を示すので、色が判別できなくても文言で伝わる。
 */
.status {
	display: inline-flex; align-items: center; gap: 3px;
	min-height: 22px; padding: 0 2px 0 5px;
	border-radius: var(--r-pill); border: 1.5px solid var(--line);
	background: var(--surface);
	font-size: var(--fs-badge, .75rem); font-weight: 700;
}
.status > span { color: var(--ink); }
/*
 * 括弧の中（「（条件あり）」）はさらに小さく（運営者指示 2026-09-11）。
 * まず知りたいのは可か否かで、条件はその次。文言は足さず、大きさだけで順番を付ける。
 */
.status__sub { font-size: .75em; font-weight: 500; }
/*
 * ★`var()` に既定値を書いてあるのは飾りではない。トークンが読めなかったとき
 *   `font-size: var(--fs-badge)` は**無効値になり、親の 15px を継承して倍近くに化ける**
 *   （2026-09-11 に実際に起きた。tokens.css だけ古いキャッシュが残った状態で、
 *   バッジが 12px のはずが 15px になり、1行に収まっていた14院が全部2行になった）。
 *   既定値があれば、最悪でも意図した大きさで出る。
 */
/* 窓＋耳のマーク。窓ガラスの塗りだけを状態色で変える。 */
.statusmark { flex: none; width: 11px; height: 11px; }
.statusmark__ear { fill: var(--surface); stroke: var(--ink); stroke-width: 7; }
.statusmark__win { fill: currentColor; stroke: var(--ink); stroke-width: 7; }
.statusmark__bar { fill: var(--ink); }

.status[data-status="YES"] { border-color: var(--sage); color: var(--sage); }
.status[data-status="CONDITIONAL"] { border-color: var(--amber); color: var(--amber); }
.status[data-status="NO"] { border-color: var(--stone); color: var(--stone); }

/* 未確認は白抜き＋ストーンの線。形は他と同じにして「空欄」に見せない。 */
.status[data-status="UNKNOWN"] { border-color: var(--stone); color: var(--surface); }
.status[data-status="UNKNOWN"] .statusmark__ear,
.status[data-status="UNKNOWN"] .statusmark__win { stroke: var(--stone); }
.status[data-status="UNKNOWN"] .statusmark__bar { fill: var(--stone); }
.status-cond-text { font-size: var(--fs-label); color: var(--ink-2); line-height: 1.7; }

/* 説明を開く「?」 */
.qbtn {
	width: 13px; height: 13px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 1px solid currentColor;
	background: transparent; color: inherit;
	font-size: .7rem; font-weight: 700; line-height: 1; cursor: pointer;
	padding: 0;
	position: relative;
}

/*
 * 見た目は14pxの小さな丸のままで、押せる範囲だけ44pxに広げる。
 * 見出しやバッジの横に置くボタンなので、丸自体を大きくすると主役より目立ってしまう。
 */
.qbtn::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 44px; height: 44px;
	transform: translate(-50%, -50%);
}

/* 出所と確認日 */
.source { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--ink); }

/*
 * ★名簿・台帳の「現物」へのリンク（裁定CP2・2026-09-12）。
 * 出所の行は「種別・誰（日付取得）」まで、そのあとにこれが続く。
 * 出所の文字より目立たせない——**主役は出所と確認日**で、これは裏を取りたい人のための口。
 * 当たり判定が 44px に足りないので、上下に余白を持たせて押しやすくする。
 */
.source__list {
	display: inline-flex; align-items: center;
	margin-left: 6px; padding: 4px 0;
	font-size: var(--fs-label); color: var(--rose-dark);
	text-decoration: underline; text-underline-offset: 2px;
}
.recheck {
	display: inline-block; margin-left: 6px; padding: 2px 8px;
	border-radius: var(--r-pill); background: var(--amber-tint);
	font-size: var(--fs-min); font-weight: 700; color: var(--ink);
}


/* 帯 */
.band { border-radius: var(--r-14); padding: 10px 14px; font-size: var(--fs-label); line-height: 1.7; }
.band--amber { background: var(--amber-tint); }
.band--coral { background: var(--rose-tint); border: 2px solid var(--coral); font-weight: 700; }

/* 2列の要約 */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kv > div { background: var(--bg); border-radius: var(--r-14); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kv > div > span:last-child { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }

/* 行 */
.rows { display: flex; flex-direction: column; }
.row { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 40px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
.row:last-child { border-bottom: 0; }

/* できること */
.caps { display: flex; flex-direction: column; }
.cap { display: flex; align-items: center; justify-content: space-between; min-height: var(--h-min); border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
.cap:last-child { border-bottom: 0; }
/*
 * 記号は色差と形の二重で区別する。淡い地に淡い文字だと ○ と － が同じに見える。
 * できる／要相談／できない＝塗りつぶし＋白文字、未確認だけ白地＋破線枠。
 */
.cap__mark {
	width: 34px; height: 34px; flex: none;
	border-radius: 11px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; color: #fff;
}
.cap[data-cap="OK"] .cap__mark { background: #4f8a62; }
.cap[data-cap="CONSULT"] .cap__mark { background: #d99b1f; }
.cap[data-cap="NO"] .cap__mark { background: #8d8079; }
.cap[data-cap="UNKNOWN"] .cap__mark {
	background: var(--surface); color: #8d8079;
	border: 2px dashed #8d8079;
}

/* 見出しの中の「?」。文字と縦位置を揃える。 */
.h { display: flex; align-items: center; gap: 8px; }


/* 受診報告の内訳。件数であって評価ではない */
/*
 * うさぎ診療の状態は**4つ**（診てもらえる／条件つき／受付不可／未確認）。
 * 3列にしていたので「未確認」が出せず、**合計が掲載件数と合わなかった**（2026-09-11）。
 * 狭い画面では4つ横並びだと文字が潰れるので 2×2 に折る。
 */
.tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: var(--fs-label); text-align: center; }
@media (min-width: 480px) { .tally { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tally__cell { border-radius: var(--r-14); padding: 10px 6px; }
.tally__cell b { display: block; font-size: 1.33rem; }
.tally__cell--seen { background: var(--sage-tint); }
.tally__cell--cond { background: var(--amber-tint); }
.tally__cell--refused { background: var(--line); }
/* 未確認は「まだ分からない」。色で良し悪しを付けない（§5）ので、いちばん薄い地にする */
.tally__cell--unknown { background: var(--rose-tint-weak); }


/*
 * 全ページ共通の下部タブ（モック05 Main/List/Emergency/ForClinics）。
 * 背景は不透明。固定バーと同じ理由で、後ろの本文が透けると読めなくなる。
 *
 * 病院詳細では外枠を揃えたまま、内容だけ「電話／公式HP／お気に入り／戻る」に差し替える。
 */
.tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
	box-sizing: border-box;
	/* 公開中の項目だけ並べる（症状ナビは公開条件がそろうまで出ない。3〜4項目で等分） */
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
	padding: var(--tabbar-padding-y) 8px;
	padding-bottom: calc(var(--tabbar-padding-y) + env(safe-area-inset-bottom));
	background: var(--surface);
	border: 1px solid var(--line);
	border-bottom: 0;
	border-radius: var(--r-20) var(--r-20) 0 0;
	overflow: hidden;
}

.tabbar__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 3px; min-height: var(--tabbar-row-height);
	font-size: 11px; line-height: 1.2; font-weight: 500;
	color: var(--ink-2); text-decoration: none;
}

/* いま開いているタブ。色だけで示さず aria-current も付けている（navigation.php） */
.tabbar__item.is-on { color: var(--rose-dark); }

/* 病院詳細：電話 2、ほか 1。欠けたときは残った幅のグループを中央に置く。 */
.tabbar--clinic { display: block; }
.tabbar__clinic-actions {
	display: grid; gap: 6px; width: 100%; margin: 0 auto;
	grid-auto-rows: 1fr;
}
.tabbar__clinic-actions--units-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tabbar__clinic-actions--units-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 400px; }
.tabbar__clinic-actions--units-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 300px; }
.tabbar__clinic-actions--units-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 200px; }
/*
 * ボタンの形は一覧カードの操作ボタン（.clinic-card__sub）と同じ丸いボタン（角丸 --r-pill・文字 --fs-label の太字。運営者指示 2026-09-22）。
 * **フッター全体の高さはトップなどの追従フッターと同じ**：ボタンの段をトップの項目と同じ 56px にし、
 * ボタンは下部固定バーの電話の高さ（--h-bar-call）で段の中央に置く（運営者指示 2026-09-22）。
 * **「電話する」だけサイトの主な行動の色（--rose）の地に白い文字**（.btn--primary と同じ組み合わせ）。ほかは白地に --rose の枠線。
 * 幅は電話 2：ほか 1（一覧の 2:1:1 と同じ考え方）。375px 幅で1単位が約67pxになるので、
 * 公式HPは一覧と同じく文字だけ、お気に入りはハートだけ（読み上げは usagi_favorite_button の aria-label）。
 * 登録済みは地の色を変えず、ハートの塗りで示す（ピンクの地は電話だけに使う）。
 */
.tabbar--clinic .tabbar__clinic-actions { min-height: var(--tabbar-row-height); align-items: center; }
.tabbar--clinic .tabbar__clinic-item {
	flex-direction: row; gap: 4px;
	min-width: 0; min-height: var(--h-bar-call); padding: 0 6px; box-sizing: border-box; align-self: center;
	border: 1.5px solid var(--rose); border-radius: var(--r-pill); background: var(--surface);
	color: var(--rose-dark); font: inherit; font-size: var(--fs-label); font-weight: 700; line-height: 1.2;
	white-space: nowrap; text-decoration: none; cursor: pointer;
}
.tabbar--clinic .tabbar__clinic-item svg { flex: none; width: 15px; height: 15px; }
.tabbar__clinic-item--call { grid-column: span 2; }
.tabbar--clinic .tabbar__clinic-item--call { border-color: var(--rose); background: var(--rose); color: var(--surface); }
/* 公式HP（新しいタブで開く唯一の項目）は一覧と同じくアイコンを付けない */
.tabbar--clinic a.tabbar__clinic-item[target="_blank"] svg { display: none; }
.tabbar--clinic .tabbar__clinic-favorite { width: auto; }
.tabbar--clinic .tabbar__clinic-favorite span { display: none; }
.tabbar--clinic .tabbar__clinic-favorite svg { width: 18px; height: 18px; }
.tabbar--clinic .tabbar__clinic-favorite.is-on { border-color: var(--rose); background: var(--surface); }
.tabbar--clinic .tabbar__clinic-favorite.is-on svg { fill: currentColor; }
.tabbar--clinic .tabbar__clinic-item:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 2px; }
/*
 * 「戻る」（usagi_clinic_tabbar でいつも最後に並ぶ）だけ、うっすらグレーの地・グレーの枠・濃いめのグレーの文字（運営者指示 2026-09-22）。
 * --line の地に --ink-2 の文字でコントラスト 4.70:1。
 */
.tabbar--clinic .tabbar__clinic-actions > a.tabbar__clinic-item:last-child { border-color: var(--stone); background: var(--line); color: var(--ink-2); }

/* タブの高さぶん、フッターの下に余白を足す。最後の行が隠れないように */
body.has-tabbar .site-footer { padding-bottom: calc(16px + var(--tabbar-height) + env(safe-area-inset-bottom)); }

/* ---- 一覧 ---- */
.page-title { font-size: 1.33rem; font-weight: 700; line-height: 1.4; margin: 0; }

.listctl { display: flex; flex-direction: column; gap: 12px; }
.listctl__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.listctl__resultbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.listctl__count { font-size: var(--fs-label); color: var(--text-2); margin: 0; }
.listctl__count strong { font-size: 1.08rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.listctl__sort { margin-left: auto; }
.listctl__sort-field { position: relative; display: block; }
.listctl__sort-icon {
	position: absolute; z-index: 1; left: 14px; top: 50%;
	transform: translateY(-50%); color: var(--rose-dark); pointer-events: none;
}
.listctl__sort select {
	min-width: 190px; min-height: var(--h-min); padding: 0 36px 0 43px;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	background-color: var(--surface); color: var(--ink);
	font: inherit; font-weight: 700; cursor: pointer;
}
.listctl__sort select:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 2px; }

/* チップ。タップ領域は44px以上（docs/16 a11y） */
.chip {
	display: inline-flex; align-items: center; min-height: var(--h-min);
	padding: 0 14px; border-radius: var(--r-pill);
	background: var(--surface); color: var(--ink);
	font-size: var(--fs-body); text-decoration: none;
	border: 1px solid var(--line);
}
.chip--on { background: var(--rose-tint); border-color: var(--rose); font-weight: 700; }

/* 都道府県チップ。準備中（0件）の県は薄く・リンクなしで出す（監督決定・依頼3）。
   「まだ無い」と分かるほうが親切なので、消さずに沈める。色で良し悪しは付けない */
.chip--empty { color: var(--ink-2); background: transparent; border-style: dashed; }

/* 現在地から探す（モック05 Main：白地・淡い縁取り）。座標カバー率が閾値を超えたときだけ描画される */
.btn--geo { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 2px solid var(--rose-tint); color: var(--rose-dark); font-weight: 500; }
.geo { margin: 0; }
.clinic-card__distance { background: var(--bg); border-radius: var(--r-pill); padding: 2px 10px; }
.chip__count { margin-left: 4px; font-size: var(--fs-label); font-weight: 400; color: var(--ink-2); }

.cardlist { display: flex; flex-direction: column; gap: 14px; }

.clinic-card__name { font-size: 1.13rem; font-weight: 700; margin: 0; line-height: 1.4; }
.clinic-card__name a { color: var(--ink); text-decoration: none; }
.clinic-card__address {
	display: flex; align-items: center; gap: 5px; min-width: 0; margin: -3px 0 0;
	color: var(--text-2); font-size: var(--fs-label); line-height: 1.5;
}
.clinic-card__address svg { flex: none; color: var(--rose-dark); }
.clinic-card__address span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clinic-card__titlebar,
.clinic__titlebar { display: flex; align-items: flex-start; gap: 10px; }
.clinic-card__titlebar .clinic-card__name,
.clinic__titlebar .clinic__name { flex: 1; min-width: 0; }
.favorite-btn {
	flex: none; min-height: 40px; padding: 0 10px;
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	background: var(--surface); color: var(--rose-dark); cursor: pointer;
	font: inherit; font-size: var(--fs-min); font-weight: 700;
}
.favorite-btn.is-on { background: var(--rose-tint); border-color: var(--rose); }
.favorite-btn.is-on svg { fill: currentColor; }
.favorite-btn:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 2px; }
.favorite-btn--icon {
	width: var(--h-min); min-height: var(--h-min); padding: 0;
	border-color: var(--rose-tint); background: var(--surface);
}
.favorite-btn--icon span { display: none; }
.favorite-toast {
	position: fixed; z-index: 50; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom));
	box-sizing: border-box; width: max-content; max-width: calc(100% - 32px);
	padding: 10px 16px; border-radius: var(--r-pill);
	background: var(--ink); color: #fff; box-shadow: 0 4px 16px rgb(49 43 39 / 20%);
	font-size: var(--fs-label); font-weight: 700; line-height: 1.5; text-align: center;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.favorite-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
	.favorite-toast { transition: none; }
}
.clinic-card__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: var(--fs-label); color: var(--ink); }
.clinic-card__actions { display: flex; align-items: center; gap: 8px; }
/*
 * 一覧カードの主操作（運営者指示 2026-09-11）。
 *
 * ★高さは 46px → **44px**。「もう少し低く」への答えだが、`--h-min` より下げない——
 *   44px は押し外しが起きない下限として決めた値で、ここを割ると指の太い人が外す。
 * ★**「くわしく見る」と「電話」を同じ色にする。**多くの人はまず詳細を見るので、
 *   詳細を控えめな色にしておく理由がない。どちらも主たる行動として同じ重みで出す。
 * ★お気に入りは末尾の44pxハートだけにし、ラベルはaria-labelで伝える（2026-09-15）。
 */
.clinic-card__actions .btn { min-height: var(--h-min); }
.clinic-card__actions .btn--sub {
	/* 塗りつぶしにしたので枠は要らない。枠が1pxあると 44+2=46px になり、高さの指定が効かない。 */
	background: var(--rose); border: 0; color: #fff;
}

.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--h-base); padding: 0 18px;
	border-radius: var(--r-pill); text-decoration: none; font-weight: 700; font-size: var(--fs-body);
}
.btn--primary { background: var(--rose); color: #fff; flex: 1; }
.btn--sub { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pager__pos { font-size: var(--fs-label); color: var(--text-2); }


/* ---- 状態バッジ行と病院回答チップ ---- */
/*
 * ★下の余白は飾りではない。「i」の当たり判定は `.qbtn::after` が 44px に広げており、
 *   25px のバッジからは上下に約 9.5px 食み出す。カードの gap 10px だけだと
 *   **病院名のリンクに重なり、名前を押したのに説明が開く。**この 4px がその保険。
 */
.statusrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; }

/*
 * 「病院確認済み」「公式サイト確認」は状態ではなく**確認のしかた**の表示。
 * 状態バッジと視覚的に分ける。
 *
 * ★**赤（ローズ）はやめた**（運営者指示 2026-09-11）。赤は警告の色に読めるが、
 *   これは警告ではなく「誰が確認したか」の印である。代わりに温かい中立色の
 *   「印章」にした——状態の3色（緑＝可・琥珀＝条件・ストーン＝不可）とも当たらない。
 * ★緑にはしない。緑は状態バッジの「可」の色で、**別の物差しが同じ色になる**と
 *   「確認済み＝診てもらえる」と読めてしまう。この2つは別物（docs/69）。
 */
.answerchip {
	display: inline-flex; align-items: center; gap: 3px;
	min-height: 22px; padding: 0 5px;
	border-radius: var(--r-pill);
	background: var(--line); border: 1px solid var(--stone);
	color: var(--ink); font-size: var(--fs-badge, .75rem); font-weight: 700;
}
.answerchip .src-ico { width: 9px; height: 9px; }

/*
 * 本文リンク。既定の青リンクを使わない。
 * ボタン類（自前で色を持つもの）まで巻き込まないよう :not() で除外する。
 * これが無いと後勝ちでボタンの文字色が上書きされる。
 */
.site-main a:not(.btn):not(.chip):not(.clinic-card__link) { color: var(--rose-dark); }
.card__action a {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 20px;
	background: var(--surface); border: 2px solid var(--rose);
	color: var(--rose-dark); border-radius: var(--r-pill);
	font-weight: 700; font-size: var(--fs-body); text-decoration: none;
}


/* ---- ボトムシート ---- */
/*
 * display:flex は hidden 属性より強いので、明示的に打ち消す。
 * これが無いと hidden を付けてもシートが出っぱなしになる。
 */
.sheet[hidden] { display: none !important; }

.sheet {
	position: fixed; inset: 0; z-index: 60;
	background: rgba(74, 63, 58, .38);
	/* 画面の上下左右中央に出す（運営者決定 2026-09-09）。 */
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.sheet__panel {
	width: 100%; max-width: var(--page-max);
	background: var(--surface);
	border-radius: var(--r-22);
	padding: 18px;
	max-height: calc(100vh - 32px); overflow-y: auto;
	box-shadow: 0 12px 40px rgba(120, 90, 80, .18);
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sheet__title { font-size: 1.07rem; font-weight: 700; margin: 0; }
.sheet__close {
	width: var(--h-min); height: var(--h-min); flex: none;
	border: 0; background: var(--bg); border-radius: 50%;
	font-size: 1.33rem; color: var(--ink); cursor: pointer;
}
.sheet__body { font-size: var(--fs-body); line-height: 1.8; color: var(--ink); }
.sheet__body p { margin: 0 0 12px; }
.sheet__dl { margin: 0 0 12px; }
.sheet__dl dt {
	font-weight: 700; margin-top: 12px;
	display: inline-flex; align-items: center; gap: 8px;
}
.sheet__dl dt::before {
	content: ""; width: 16px; height: 16px; border-radius: 5px;
	border: 2px solid var(--ink); flex: none;
}
.sheet__dl dt[data-status="YES"]::before { background: var(--sage); }
.sheet__dl dt[data-status="CONDITIONAL"]::before { background: var(--amber); }
.sheet__dl dt[data-status="NO"]::before { background: var(--stone); }
.sheet__dl dt[data-status="UNKNOWN"]::before { background: var(--surface); border-color: var(--stone); }
.sheet__dl dd { margin: 4px 0 0; color: var(--ink-2); }
.sheet__note { font-size: var(--fs-label); color: var(--ink-2); }


/* ---- 診療時間グリッド ---- */
.hours { margin: 0; }
.hours__table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.hours__corner { width: 3.2em; }
.hours__table th {
	font-size: var(--fs-label); font-weight: 700; color: var(--ink);
	padding: 4px 0; text-align: center;
}
.hours__table th[scope="row"] { text-align: left; color: var(--text-2); }
.hours__table th.is-today { color: var(--rose-dark); }
.hours__table td {
	border-radius: 10px; text-align: center;
	font-size: var(--fs-min); line-height: 1.35; padding: 6px 2px;
}
.hours__on { background: var(--sage-tint); color: var(--ink); }
.hours__on span { display: block; }
.hours__off { background: var(--bg); color: var(--text-2); }
/* 未確認。「できること」の UNKNOWN（白地＋破線）と同じ語彙。休診（塗り地）と描き分ける */
.hours__unknown { background: var(--surface); color: var(--text-2); border: 2px dashed var(--line); }

.hours__notes {
	margin: 10px 0 0; padding-left: 1.2em;
	font-size: var(--fs-label); color: var(--text-2); line-height: 1.7;
}


/* ---- トップ ---- */
.front { gap: 16px; }

/* FVのロゴはコンテンツ幅いっぱいで1枚（docs/18） */
.front__logo { text-align: center; }
.front__logo img { width: 100%; height: auto; max-width: var(--page-max); }

.front__fv { text-align: center; }

/*
 * トップ＝さがす（CC-01・2026-09-16）。掲載件数と募集 → 見出し → 条件 → 夜間 → 地域。
 * 掲載件数と募集の吹き出しは、元のデザイン（大きな件数＋上向きの吹き出し）でページの先頭に戻した（運営者指示 2026-09-18）。
 */
.front__intro { margin-top: 20px; text-align: center; }
.front__count {
	margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.35;
	color: var(--rose-dark); letter-spacing: .04em;
}
.front__title { margin-top: 10px; }

/* 件数説明に添える小さな吹き出し。検索より強く見せない（運営者指示 2026-09-15）。 */
.front__community {
	position: relative;
	width: fit-content;
	max-width: calc(100% - 40px);
	margin: 12px auto 6px;
	padding: 8px 14px;
	background: var(--rose-tint);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	box-shadow: none;
	color: var(--ink-2);
	font-size: var(--fs-min);
	font-weight: 700;
	text-align: center;
}
.front__community::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -9px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 9px solid var(--line);
}
.front__community::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -7px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid var(--rose-tint);
}

/*
 * 三本線メニュー（運営者指示 V5・2026-09-12）。
 * 開閉は既存のシートに任せるので、ここは**ボタンと中の並びだけ**。
 */
.burger {
	width: 44px; height: 44px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 0; background: var(--surface);
	color: var(--ink); cursor: pointer; padding: 0;
}
.sitemenu { display: flex; flex-direction: column; }
.sitemenu__group {
	margin: 14px 0 2px; font-size: var(--fs-min); font-weight: 700;
	color: var(--ink-2); letter-spacing: .06em;
}
.sitemenu__group:first-child { margin-top: 0; }
.sitemenu__item {
	display: flex; align-items: center; gap: 10px;
	min-height: 48px; border-bottom: 1px solid var(--line);
	font-size: var(--fs-body); font-weight: 700; color: var(--ink); text-decoration: none;
}
.sitemenu__item:last-child { border-bottom: 0; }
.sitemenu__item--urgent { color: var(--coral); }
.sitemenu__ico { flex: none; }

/* 一覧の電話ボタン。アイコンと文字の間を空ける */
.clinic-card__actions .btn--sub { gap: 6px; }

/*
 * 地方トグル。47県を平らに並べるのをやめ、地方を開いて県を選ぶ形にした。
 * `<details>` なので JS が動かなくても開ける。
 */
.regions { display: flex; flex-direction: column; gap: 8px; }
.region {
	border: 1px solid var(--line); border-radius: var(--r-14);
	background: var(--surface); overflow: hidden;
}
.region__head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	min-height: 58px; padding: 0 14px; cursor: pointer; list-style: none;
	font-size: var(--fs-body); font-weight: 700; color: var(--ink);
}
/* 既定の三角を消して、自前の山形を右に出す（左に三角があると県名の頭が揃わない） */
.region__head::-webkit-details-marker { display: none; }
.region__head::after {
	content: ""; flex: none; width: 8px; height: 8px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg); transition: transform .15s;
	margin-right: 4px;
}
.region[open] .region__head::after { transform: rotate(-135deg); }
.region__count { margin-left: auto; font-size: var(--fs-label); font-weight: 500; color: var(--ink-2); }
.region__prefs {
	gap: 10px; margin: 0 12px; padding: 12px 0 14px;
	border-top: 1px solid var(--line);
}
.region__prefs .chip { min-height: 48px; }

/* このブラウザに保存したお気に入りの一覧。 */
/* 保存先の補足：線なし・角丸12px・背景色だけの四角（左だけの太線は使わない） */
.favorites-note {
	margin: 0; padding: 10px 12px; border-radius: var(--r-12); background: var(--amber-tint);
	font-size: var(--fs-label); line-height: 1.7; color: var(--ink);
}
.favorites-tools { display: flex; justify-content: flex-end; }
.favorites-tools[hidden] { display: none; }
.favorites-tools .btn { min-height: var(--h-min); }
.favorite-list { display: flex; flex-direction: column; gap: 14px; }
.favorite-card__name { margin: 0; font-size: 1.13rem; line-height: 1.4; }
.favorite-card__name a { color: var(--ink); text-decoration: none; }
.favorite-card__address { margin: 0; color: var(--ink-2); font-size: var(--fs-label); }
.favorite-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.favorite-card__actions .btn { min-height: var(--h-min); }
.favorite-empty { margin-top: 2px; }

/*
 * 「くわしい内訳」の折りたたみ。トップの数字カードから、読みたい人だけが開く分を畳む。
 */
.foldrows { border-top: 1px solid var(--line); }
.foldrows__head {
	display: flex; align-items: center; min-height: var(--h-min);
	cursor: pointer; list-style: none;
	font-size: var(--fs-label); font-weight: 700; color: var(--ink-2);
}
.foldrows__head::-webkit-details-marker { display: none; }
.foldrows__head::after {
	content: ""; width: 7px; height: 7px; margin-left: 8px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg); transition: transform .15s;
}
.foldrows[open] .foldrows__head::after { transform: rotate(-135deg); }

/*
 * 言葉でシートを開く口（「出典を見る」など）。「i」の丸と違い、
 * 何が開くかを名乗るので、押す前に中身が想像できる。
 * 押せる高さは `--h-min` を確保する（文字だけのボタンは当たり判定が細くなりがち）。
 */
.card__more { margin: 0; }
.morebtn {
	display: inline; padding: 0;
	background: none; border: 0; cursor: pointer;
	color: var(--rose-dark); font-family: inherit;
	font-size: var(--fs-label); font-weight: 700;
	text-decoration: underline; text-underline-offset: 3px;
	position: relative;
}
/*
 * ★`min-height: var(--h-min)` を**当てない。**
 * 当てると行の高さが44pxになり、**文字と同じ行に置いたつもりが1行ぶん増える**
 * （2026-09-12 実測：出所行が 92px に膨らみ、バッジと院名の間が 122px になった）。
 * 見た目は文字のまま、押せる範囲だけ44pxに広げる——`.qbtn::after` と同じ型。
 */
.morebtn::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 100%; min-width: 44px; height: 44px;
	transform: translate(-50%, -50%);
}
/* ---- 緊急ページ ---- */
/*
 * 注意文はページ上部に通常表示し、スクロールには追従させない（運営者指示 2026-10-08）。
 * ここは装飾を排し、電話を最大にする（§2：緊急モードでのみ最優先）。
 */
.emergency__notice {
	background: var(--rose-tint); border: 2px solid var(--coral);
	border-radius: var(--r-14);
	padding: 12px 14px;
	font-size: var(--fs-body); font-weight: 700; line-height: 1.6;
	color: var(--ink);
}

.nightchip {
	flex: none;
	display: inline-flex; align-items: center;
	min-height: 28px; padding: 0 12px;
	border-radius: var(--r-pill);
	font-size: var(--fs-min); font-weight: 700; color: var(--ink);
	border: 2px solid var(--line);
}
.nightchip[data-night="YES"] { background: var(--sage-tint); border-color: var(--sage); }
.nightchip[data-night="CONSULT"] { background: var(--amber-tint); border-color: var(--amber); }

.emergency__foot { margin-top: 8px; }

/* ---- 病院向けページ ---- */
.forclinics__eyebrow {
	margin: 0; font-size: var(--fs-label); font-weight: 700;
	color: var(--rose-dark); letter-spacing: .04em;
}

/* 掲載の仕組み4ステップ */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps__n {
	flex: none; width: 28px; height: 28px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--rose-tint);
	color: var(--rose-dark); font-weight: 700; font-size: var(--fs-label);
}
.steps__body { display: flex; flex-direction: column; gap: 2px; }

/* 無料でできることの一覧 */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ticks li {
	display: flex; align-items: center; gap: 10px;
	min-height: var(--h-min);
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-body);
}
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
	content: ""; flex: none;
	width: 18px; height: 10px;
	border-left: 3px solid var(--sage); border-bottom: 3px solid var(--sage);
	transform: rotate(-45deg) translateY(-3px);
}

/* ---- 受診報告 ---- */
/*
 * 抜粋は「左にアバター・右に吹き出し」の横並び。
 * 地の文と同じ見え方だと誰の発言か分からず、縦積みだとアバターが吹き出しと
 * かぶる（運営者指摘 2026-09-09）。
 */
.say { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.say__avatar {
	flex: none; width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: #f3ebe5;
}
.say__body { flex: 1; min-width: 0; }

.bubble {
	position: relative;
	margin: 0;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 10px 12px;
	font-size: .833rem; line-height: 1.75;
}
/* しっぽは左辺の上寄り。正方形を45度回して左と下の2辺だけ罫を残す。 */
.bubble::after {
	content: "";
	position: absolute; left: -7px; top: 13px;
	width: 12px; height: 12px;
	background: var(--bg);
	border-left: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	transform: rotate(45deg);
}
.bubble__by {
	display: flex; align-items: center; gap: 6px;
	margin: 6px 0 0;
	font-size: .767rem; color: var(--text-2);
}

/* まとめブロックのボタン2つ。横並び・中央寄せ・幅いっぱいに広げない */
.card__actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rbtn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 16px;
	border-radius: var(--r-pill);
	font-size: var(--fs-label); font-weight: 700;
	text-decoration: none; background: var(--surface);
}
.rbtn--more { border: 2px solid var(--line); color: var(--ink); }
.rbtn--post { border: 2px solid #f2c4bd; color: #a95a4f; }

/* 本編。固定ヘッダーに隠れないようスクロール位置をずらす */
#report { scroll-margin-top: 16px; }
.rlist { display: flex; flex-direction: column; gap: 12px; }

.rcard {
	background: var(--bg); border-radius: var(--r-14);
	padding: 12px 14px;
	display: flex; flex-direction: column; gap: 8px;
}
.rcard__head { display: flex; align-items: center; gap: 10px; }
.rcard__month { font-size: var(--fs-label); color: var(--text-2); }
.rcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rtag {
	display: inline-flex; align-items: center;
	min-height: 26px; padding: 0 10px;
	border-radius: var(--r-pill); background: var(--surface);
	border: 1px solid var(--line);
	font-size: var(--fs-min); color: var(--ink);
}
.rcard__text { margin: 0; font-size: var(--fs-body); line-height: 1.8; }
.rcard__meta { margin: 0; font-size: var(--fs-label); color: var(--text-2); }

/* 結果は色と文言の両方で示す。点数や星は持たない。 */
.rchip {
	display: inline-flex; align-items: center;
	min-height: 26px; padding: 0 12px;
	border-radius: var(--r-pill);
	font-size: var(--fs-min); font-weight: 700; color: var(--ink);
	border: 2px solid var(--line);
}
.rchip[data-outcome="SEEN"] { background: var(--sage-tint); border-color: var(--sage); }
.rchip[data-outcome="SEEN_CONDITIONAL"] { background: var(--amber-tint); border-color: var(--amber); }
.rchip[data-outcome="REFUSED"] { background: var(--line); border-color: var(--stone); }

/* ---- 固定ページの本文 ---- */
.prose { gap: 0; }
.prose h2 { font-size: 1.13rem; margin: 20px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-body); margin: 16px 0 6px; }
.prose p { margin: 0 0 12px; line-height: 1.9; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 1.4em; line-height: 1.9; }
.prose li { margin-bottom: 4px; }
.prose a { color: var(--rose-dark); }
.prose__ol { margin: 0 0 12px; padding-left: 1.4em; line-height: 1.9; }

/* /guide/ の出所一覧 */
.sheet__dl--src dt::before { content: none; }
.sheet__dl--src dt { gap: 8px; }

/* ---- 受診報告フォーム ---- */
.reportform__eyebrow { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.reportform__clinic { margin: 0; font-size: 1.13rem; font-weight: 700; }
.reportform__form { display: flex; flex-direction: column; gap: 14px; }
.reportform__submit { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 24px; }
.reportform__submit .btn { width: 100%; min-height: 52px; border: 0; cursor: pointer; font-family: inherit; }
.reportform__submit .note { text-align: center; }

/* 詳細のセクションごとの確認日と出典。日付は閉じた状態でも表示する。 */
.clinic__sources { margin-top: 14px; color: var(--text-2); font-size: .8rem; }
.clinic__sources summary { cursor: pointer; list-style: none; }
.clinic__sources summary::-webkit-details-marker { display: none; }
.clinic__sources-toggle { color: var(--rose-dark); text-decoration: underline; text-underline-offset: 3px; }
.clinic__sources-body { margin-top: 8px; padding-left: 12px; }
.clinic__sources-body .clinic__src { margin: 6px 0; }
.clinic__sources-subject { font-weight: 600; }

.q { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.q .req { margin-left: 8px; font-size: var(--fs-min); font-weight: 700; color: #e2705f; }
.q .opt { margin-left: 8px; font-size: var(--fs-min); font-weight: 400; color: var(--text-2); }

/* honeypot。表示しないが display:none は自動入力に無視されるので画面外に出す */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 択一。ラジオ自体は隠し、ラベル全体を押せるようにする */
.seg { display: grid; gap: 8px; }
.seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg__opt { position: relative; display: block; cursor: pointer; }
.seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg__opt span {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: 48px; padding: 6px 8px; border-radius: var(--r-pill);
	background: var(--bg); font-size: var(--fs-label); line-height: 1.35;
}
.seg__opt input:checked + span { background: var(--ink); color: #fff; font-weight: 700; }
.seg__opt input:focus-visible + span { outline: 2px solid var(--rose-dark); outline-offset: 2px; }
.seg__opt--start span { justify-content: flex-start; text-align: left; padding-inline: 16px; }

/* 複数選択のタグ */
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbox { position: relative; display: inline-block; cursor: pointer; }
.chipbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chipbox span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
	border-radius: var(--r-pill); background: var(--bg); font-size: var(--fs-label);
}
.chipbox input:checked + span { background: var(--rose); color: #fff; font-weight: 700; }
.chipbox input:focus-visible + span { outline: 2px solid var(--rose-dark); outline-offset: 2px; }

.checkrow { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; cursor: pointer; }
.checkrow input { flex: none; width: 22px; height: 22px; margin-top: 11px; accent-color: var(--rose); }
.checkrow span { font-size: var(--fs-label); line-height: 1.6; padding-top: 12px; }
.checkrow--agree input { margin-top: 2px; }
.checkrow--agree span { padding-top: 0; }

.ymd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ymd select,
.reportform__form textarea,
.reportform__form input[type="email"],
.reportform__form input[type="text"],
.suggestform .reportform__form input[type="text"],
.suggestform .reportform__form input[type="url"] {
	width: 100%; box-sizing: border-box; font-family: inherit; color: var(--ink);
	background: var(--bg); border: 0; border-radius: var(--r-pill);
	font-size: var(--fs-label);
}
.ymd select { min-height: 48px; padding: 0 14px; text-align: center; text-align-last: center; }
.reportform__form input[type="email"],
.reportform__form input[type="text"],
.suggestform .reportform__form input[type="text"],
.suggestform .reportform__form input[type="url"] { min-height: 48px; padding: 0 14px; }
.reportform__form textarea {
	min-height: 110px; padding: 12px 14px; border-radius: 16px; line-height: 1.7; resize: vertical;
}
.reportform__form textarea::placeholder,
.reportform__form input[type="email"]::placeholder,
.reportform__form input[type="text"]::placeholder,
.suggestform .reportform__form input::placeholder { color: #a1948e; }
.reportform__money { display: flex; align-items: center; gap: 8px; }
.reportform__money input { min-width: 0; flex: 1; }
.reportform__money span { flex: none; font-size: var(--fs-label); }

@media (max-width: 440px) {
	.reportform .seg--3 { grid-template-columns: 1fr; }
}

.formerr {
	background: #fff1ee; border: 1px solid #f3c7bf; border-radius: 16px;
	padding: 14px 16px; color: #a4453a; font-size: var(--fs-label); line-height: 1.8;
}
.formerr p { margin: 0; font-weight: 700; }
.formerr ul { margin: 6px 0 0; padding-left: 1.2em; }

/* 404 の導線。緊急を並べて置き、探し直せるようにする */
.card__actions--404 { flex-wrap: wrap; gap: 8px; }
.card__actions--404 .btn { flex: 1 1 auto; }

/* ---- 病院確認フォーム ---- */
.clinicform__eyebrow { margin: 0 0 4px; font-size: var(--fs-label); color: var(--text-2); }
.clinicform__label { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.clinicform__clinic { margin: 0; font-size: 1.13rem; font-weight: 700; }
.clinicform__addr { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.clinicform__form { display: flex; flex-direction: column; gap: 14px; }
.clinicform__form .step { display: flex; flex-direction: column; gap: 14px; }
.clinicform__form .step[hidden] { display: none !important; }

.clinicform__progress {
	margin: 0; text-align: center; font-size: var(--fs-label);
	font-weight: 700; color: var(--text-2);
}
.clinicform__nav { display: flex; gap: 8px; padding-bottom: 24px; }
.clinicform__nav .btn { flex: 1; border: 0; cursor: pointer; font-family: inherit; min-height: 52px; }
.clinicform__nav .btn[hidden] { display: none !important; }

.clinicform__submit { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 8px; }
.clinicform__submit .btn { width: 100%; min-height: 52px; border: 0; cursor: pointer; font-family: inherit; }
.clinicform__submit .note { text-align: center; }

.clinicform__removal { margin-top: 24px; }
.clinicform__removal form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* 択一の1列・2列。受診報告の .seg--3 / --4 と同じ作り */
.seg--1 { grid-template-columns: 1fr; }
.seg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 設問の中の小見出し。区切り線で親設問と分ける */
.subq {
	display: flex; flex-direction: column; gap: 10px;
	padding-top: 12px; border-top: 1px dashed var(--line);
}
.q--sub { font-size: var(--fs-label); }

.chipbox--day span { min-width: 44px; justify-content: center; }

/* できること。項目名＋○△× の4列 */
.capgrid { display: flex; flex-direction: column; gap: 6px; }
.capgrid__head,
.capgrid__row {
	display: grid; grid-template-columns: 1fr repeat(3, 44px);
	gap: 6px; align-items: center;
}
.capgrid__head span { text-align: center; font-size: var(--fs-min); color: var(--text-2); }
.capgrid__label { font-size: var(--fs-label); line-height: 1.4; }
.capopt { position: relative; cursor: pointer; }
.capopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.capopt span {
	display: flex; align-items: center; justify-content: center;
	min-height: 44px; border-radius: 12px; background: var(--bg);
	font-size: var(--fs-label);
}
/* ラベルは「○ / △ 要相談 / ×」なので、狭い列では記号だけ見せる */
.capopt span { overflow: hidden; white-space: nowrap; }
.capopt input:checked + span { background: var(--ink); color: #fff; font-weight: 700; }
.capopt input:focus-visible + span { outline: 2px solid var(--rose-dark); outline-offset: 2px; }

.clinicform__form input[type="url"],
.clinicform__form input[type="email"],
.clinicform__form textarea,
.clinicform__removal textarea {
	width: 100%; box-sizing: border-box; font-family: inherit; color: var(--ink);
	background: var(--bg); border: 0; border-radius: 16px;
	font-size: var(--fs-label); line-height: 1.7; padding: 12px 14px;
}
.clinicform__form input[type="url"],
.clinicform__form input[type="email"] { min-height: 48px; border-radius: var(--r-pill); }
.clinicform__form textarea,
.clinicform__removal textarea { resize: vertical; }
.clinicform__form input::placeholder,
.clinicform__form textarea::placeholder,
.clinicform__removal textarea::placeholder { color: #a1948e; }
.clinicform__form input[type="file"] { font-size: var(--fs-label); }

/* ---- 受診報告の一覧ページ ---- */
.reports__filters { gap: 10px; }
.reports .tally { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reports .tally__cell { padding: 12px 6px; }
.reports__about summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--fs-label); }
.reports__about summary::before { content: '+'; margin-right: 8px; }
.reports__about[open] summary::before { content: '−'; }
.reports__about summary::-webkit-details-marker { display: none; }
.reports__about .note { margin: 4px 0 10px; }
.reports__about .card__action { margin: 0; }
.reports__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; flex-wrap: wrap; padding: 0 4px;
}
.reports__pos { margin: 0; font-size: var(--fs-label); color: var(--text-2); }
.reports__sort { display: flex; gap: 6px; }
.chip--on { background: var(--ink); color: #fff; font-weight: 700; }

/* 月・結果と短い概要を比較し、必要な1件だけ全文を開く。 */
.rlist { display: flex; flex-direction: column; gap: 16px; }
.rbubble { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-22); background: var(--surface); }
.reportsum .rbubble { margin-bottom: 14px; }
.rbubble .rcard__head { flex-wrap: wrap; justify-content: space-between; margin-bottom: 6px; }
.rbubble .rcard__month { color: var(--ink); font-weight: 700; }
.rbubble .rcard__tags { margin-bottom: 6px; }
.rcard__by { display: flex; align-items: center; gap: 4px; margin: 0 0 14px; font-size: var(--fs-label); color: var(--text-2); }
.rcard__preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 0 14px; font-size: var(--fs-body); line-height: 1.8; white-space: pre-wrap; }
.rcard__quick { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 0 0 8px; list-style: none; font-size: var(--fs-label); color: var(--text-2); }
.rcard__details summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; color: var(--rose-ink); font-size: var(--fs-label); font-weight: 700; list-style: none; }
.rcard__details summary::-webkit-details-marker { display: none; }
.rcard__toggle::after { content: '+'; font-size: 22px; font-weight: 400; }
.rcard__details[open] .rcard__toggle::after { content: '−'; }
.rcard__close, .rcard__details[open] .rcard__read { display: none; }
.rcard__details[open] .rcard__close { display: inline; }
.rbubble:has(.rcard__details[open]) .rcard__preview { display: none; }
.rcard__details summary:focus-visible, .reports__purpose summary:focus-visible, .reports__about summary:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 4px; border-radius: var(--r-12); }
.rcard__full { display: grid; gap: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.rcard__full .rcard__text { white-space: pre-wrap; }
.rcard__full .rcard__text strong { display: inline-block; margin-bottom: 4px; }
.rcard__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding: 16px; border-radius: var(--r-12); background: var(--bg); }
.rcard__field { margin: 0; }
.rcard__field strong { display: block; margin-bottom: 4px; font-size: var(--fs-label); }
.rcard__value { display: block; font-size: var(--fs-body); line-height: 1.8; white-space: pre-wrap; }
.reports__clinic { margin: -8px 4px 4px; font-size: var(--fs-body); }
.reports__clinic a { color: var(--rose-ink); text-underline-offset: 3px; }
.reports__hint { margin: -4px 4px 0; font-size: var(--fs-label); color: var(--text-2); }
.reports__purpose { border-top: 1px solid var(--line); }
.reports__purpose summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--fs-label); }
.reports__purpose summary::before { content: '+'; margin-right: 8px; }
.reports__purpose[open] summary::before { content: '−'; }
.reports__purpose summary { list-style: none; }
.reports__purpose summary::-webkit-details-marker { display: none; }
@media (max-width: 600px) {
	.rbubble { padding: 16px; }
	.rcard__facts { grid-template-columns: minmax(0, 1fr); }
}

.rpager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.rpager__n, .rpager__next {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 12px;
	border-radius: var(--r-pill); background: #fff; color: var(--ink);
	text-decoration: none; font-size: var(--fs-label);
}
.rpager__n--on { background: var(--ink); color: #fff; font-weight: 700; }

.reports__foot { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.reports__foot .rbtn { width: 100%; box-sizing: border-box; } /* 枠と左右の余白を幅に含める（375px ではみ出していた） */

/* ---- 検索ボックス ---- */
.searchbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.searchbox input[type="search"] {
	flex: 1 1 200px; min-width: 0; min-height: 48px; box-sizing: border-box;
	padding: 0 16px; border: 0; border-radius: var(--r-pill);
	background: #fff; color: var(--ink); font-family: inherit; font-size: var(--fs-body);
}
.searchbox input[type="search"]::placeholder { color: #a1948e; }
.searchbox .btn { flex: 0 0 auto; border: 0; cursor: pointer; font-family: inherit; }
.searchbox__clear { font-size: var(--fs-label); }

/* 検索欄の虫眼鏡は検索フォーム（トップ・県ページ・旧検索ページ）で共通。入力文字はアイコンの右から始める。 */
.searchbox__field { position: relative; flex: 1 1 200px; min-width: 0; }
.searchbox__field input[type="search"] { width: 100%; padding-left: 48px; }
.searchbox__icon {
	position: absolute; z-index: 1; left: 17px; top: 50%;
	transform: translateY(-50%); color: var(--rose-dark); pointer-events: none;
}

/* 検索条件は閉じた1行を既定にし、一覧までの距離を短くする。 */
.searchfilters {
	display: block;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-22);
	background: var(--surface);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.searchfilters__summary {
	position: relative; display: flex; align-items: center; gap: 9px; box-sizing: border-box;
	min-height: 56px; padding: 8px 18px; cursor: pointer; list-style: none;
}
.searchfilters__summary::-webkit-details-marker { display: none; }
.searchfilters__summary-icon { flex: none; color: var(--rose-dark); }
.searchfilters__summary-title { flex: none; color: var(--ink); font-weight: 700; }
.searchfilters__summary small {
	min-width: 0; margin-left: auto; padding-right: 22px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: var(--text-2); font-size: var(--fs-min);
}
.searchfilters__summary::after {
	content: ""; position: absolute; right: 19px;
	width: 8px; height: 8px; margin-top: -4px;
	border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
	transform: rotate(45deg); transition: transform .15s;
}
.searchfilters__details[open] .searchfilters__summary::after { transform: rotate(-135deg); margin-top: 4px; }
.searchfilters__body {
	display: flex; flex-direction: column; gap: 12px;
	padding: 14px 16px 16px; border-top: 1px solid var(--line);
}
.searchfilters__group { margin: 0; padding: 0; border: 0; }
.searchfilters__area {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.searchfilters__area:has([data-search-city-field][hidden]) { grid-template-columns: 1fr; }
.searchfilters--archive .searchfilters__area { grid-template-columns: 1fr; }
.searchfilters__field { display: block; min-width: 0; }
.searchfilters__field[hidden] { display: none; }
.searchfilters .searchbox__field { flex: 0 0 auto; }
.searchfilters__select { position: relative; display: block; }
.searchfilters__select::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--ink-2);
	border-bottom: 2px solid var(--ink-2);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.searchfilters select,
.searchfilters input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	border: 1px solid var(--line);
	border-radius: var(--r-14);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
}
.searchfilters select {
	appearance: none;
	padding: 0 42px 0 13px;
	cursor: pointer;
}
.searchfilters select:disabled { color: var(--text-2); cursor: not-allowed; opacity: .75; }
.searchfilters input[type="search"] { padding: 0 14px 0 48px; }
.searchfilters select:focus-visible,
.searchfilters input[type="search"]:focus-visible {
	outline: 2px solid var(--rose-dark);
	outline-offset: 2px;
}
.searchfilters__conditions {
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.searchfilters__checks { display: flex; flex-wrap: wrap; gap: 8px; }
/* 受診目的は見出しを置かず、同じ検索フォームの先頭に丸い選択印の2列で置く。 */
.searchfilters__purpose { margin: 0; }
.searchfilters__checks--primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.searchfilters__checks--primary .searchfilters__check span { width: 100%; gap: 6px; padding: 0 10px; }
.searchfilters__purpose .searchfilters__check input + span::before { border-radius: 50%; }
.searchfilters__check { position: relative; cursor: pointer; }
.searchfilters__check input {
	position: absolute;
	width: 1px;
	height: 1px;
	op: 50%;
	left: 10px;
	opacity: 0;
}
.searchfilters__check span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-label);
	font-weight: 700;
}
.searchfilters__check span::before {
	content: "";
	box-sizing: border-box;
	width: 15px;
	height: 15px;
	border: 1.5px solid var(--stone);
	border-radius: 5px;
	background: var(--surface);
}
.searchfilters__check input:checked + span {
	border-color: var(--rose);
	background: var(--rose-tint);
}
.searchfilters__check input:checked + span::before {
	border-color: var(--rose-dark);
	background: var(--rose-dark);
	box-shadow: inset 0 0 0 3px var(--surface);
}
.searchfilters__check input:focus-visible + span { outline: 2px solid var(--rose-dark); outline-offset: 2px; }
.searchfilters__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.searchfilters__actions .btn { min-width: 184px; border: 0; cursor: pointer; font-family: inherit; }
.searchfilters__clear { font-size: var(--fs-label); text-underline-offset: 3px; }

/* 常に開いた形（トップの初期表示・div）。summary が無いので本文の上の罫線を外す */
.searchfilters--static .searchfilters__body { border-top: 0; }
/* 畳んだ形の summary。枠が overflow:hidden なので、フォーカス枠は内側に描く */
.searchfilters__summary:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: -3px; }

/* その他の条件（今日・受診報告・病院回答…）。常に見せる夜間・初診より弱く置く */
.searchfilters__more { margin-top: 4px; }
.searchfilters__more-summary {
	display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box;
	min-height: 44px; padding: 0 4px; cursor: pointer; list-style: none;
	color: var(--ink-2); font-size: var(--fs-label); font-weight: 700;
}
.searchfilters__more-summary::-webkit-details-marker { display: none; }
.searchfilters__more-summary::after {
	content: ""; width: 7px; height: 7px; margin-top: -3px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .15s;
}
.searchfilters__more[open] .searchfilters__more-summary::after { transform: rotate(-135deg); margin-top: 3px; }
.searchfilters__more-summary:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 2px; border-radius: 6px; }
.searchfilters__more .searchfilters__checks { padding-bottom: 2px; }

/* 夜間対応の候補で絞っているときの注意（clinic-list.php） */
.listctl__night-note { margin: 0; }

@media (max-width: 440px) {
	.searchfilters__summary { padding-inline: 14px; }
	.searchfilters__summary::after { right: 16px; }
	.searchfilters__body { padding: 12px 14px 14px; }
	.searchfilters__area { grid-template-columns: 1fr; }
	.searchfilters__actions { justify-content: space-between; }
	.searchfilters__actions .btn { flex: 1; min-width: 0; }
}


/* ---- 更新履歴 ---- */
.histlist { display: flex; flex-direction: column; gap: 8px; }
/* 1行＝日付と確認元の短い言い方だけ（2026-09-22 運営者指示。確認した範囲は出さない） */
.hist {
	display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 4px 10px;
	align-items: baseline; font-size: var(--fs-label); line-height: 1.6;
}
.hist__date { color: var(--text-2); font-variant-numeric: tabular-nums; }
.hist__src { color: var(--ink); }
@media (max-width: 400px) {
	.listctl__sort select { min-width: 178px; }
}


/* ---- 夜間（2026-09-17 再設計。docs/172 §7 を土台に作り直した） ---- */
/*
 * 利用者に見せるのは「夜間受付」と「夜間案内」の2種類だけ。段階ごとの色・大きさ・星を作らない。
 * 一覧カードの夜間の記号（月＋○ △ ？ 案内）は下の「一覧カードの記号」。
 * ★**病院が書いている条件は省略しない**（text-overflow・行数の切り詰め・折り返し禁止を当てない）。
 */
/* 病院詳細 第3稿（2026-09-22）：囲みを外し、札（夜間診療＋記号）と一言 → 条件の行 → 連絡のしかた（太字）→ 共通の注意・確認元（小さく） */
.nightpanel {
	display: flex; flex-direction: column; gap: 8px;
	font-size: .933rem; line-height: 1.6; color: var(--ink);
}
.nightpanel p { margin: 0; }
.nightpanel__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nightpanel__lead { font-size: var(--fs-label); color: var(--ink-2); }
.nightpanel__contact { font-weight: 700; }
/* 補足の枠（.clinic__aside）の中：病院の案内・夜間の初診・共通の注意 */
.nightpanel__conds { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.nightpanel__conds div { display: flex; gap: 10px; }
.nightpanel__conds dt { flex: none; min-width: 6em; color: var(--text-2); }
.nightpanel__conds dd { margin: 0; min-width: 0; }
.nightpanel__notice { color: var(--ink-2); }
.nightpanel__src { font-size: var(--fs-min); color: var(--text-2); }
.nightpanel__srclabel { margin-right: 6px; font-weight: 700; }
/* 夜間の札：一覧カードの夜間の記号と同じ濃い地。記号の色で状態を分け、案内だけの院は点線の枠（色だけに頼らない） */
.nightpill {
	display: inline-flex; align-items: center; gap: 3px;
	height: 28px; padding: 0 8px 0 7px; box-sizing: border-box;
	border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: var(--ink); color: var(--surface);
	font-size: var(--fs-label); line-height: 1;
}
.nightpill__label { color: var(--line); }
.nightpill__sym { font-size: 1rem; font-weight: 700; }
.nightpill[data-mk="night-YES"] .nightpill__sym { color: var(--night-sage); }
.nightpill[data-mk="night-CONSULT"] .nightpill__sym { color: var(--night-amber); }
.nightpill[data-mk="night-UNKNOWN"] .nightpill__sym { color: var(--night-stone); }
.nightpill[data-mk="night-GUIDE"] { border-style: dashed; border-color: var(--stone); }
.searchfilters__night-note { margin: 4px 0 0; }
.sheet__list { margin: 0 0 12px; padding-left: 1.2em; }
.sheet__list li { margin: 0 0 4px; }
.sheet__dl--plain dt::before { display: none; }

/* ==================================================================
 * 一覧と病院詳細（2026-09-17 利用者目線の再設計）
 *
 * 主役は「病院を選ぶ材料」。確認元と確認日は値のそばに小さく置き、カードごとの説明マークは使わない。
 * 大きな箱に短い値を1つずつ入れない。ラベルと値は横に並べ、未確認は控えめな文字にする。
 * ================================================================== */

/* ---- 一覧カード ---- */
.cardlist { gap: 12px; }
.clinic-card { position: relative; gap: 8px; padding: 16px 16px 12px; transition: box-shadow .15s; }
.clinic-card:hover { box-shadow: 0 8px 24px rgba(120, 90, 80, .13); }
.clinic-card:focus-within { outline: 2px solid var(--rose-dark); outline-offset: 2px; }
.clinic-card__name { flex: 1; min-width: 0; font-size: 1.13rem; line-height: 1.45; padding-top: 6px; }
.site-main a.clinic-card__link { color: var(--ink); text-decoration: none; }
.clinic-card__link:focus-visible { outline: none; }
/* カード全体を病院ページへのリンクにする（名前のリンクを広げる）。電話・お気に入りはその上に重ねる */
.clinic-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-22); }
.clinic-card .favorite-btn { position: relative; z-index: 1; }
.clinic-card .favorite-btn--icon { margin: -2px -4px 0 0; border-color: transparent; }
.clinic-card__address { align-items: flex-start; margin: -2px 0 0; gap: 5px; }
.clinic-card__address svg { margin-top: 3px; }
/* 住所は1行（市区町村まで。はみ出したら省略。全文は病院ページ） */
.clinic-card__address span { flex: 1 1 auto; }
.clinic-card__address .clinic-card__distance { flex: none; padding: 0 8px; font-weight: 700; color: var(--ink); }
/*
 * 診療条件の枠：**線なしの少し角丸の四角（地の色だけ）**。左だけの太線は使わない（運営者指示 2026-09-22）。
 * 2行で切る。上下の余白を padding にすると、切った3行目の上端が余白の中に見えてしまう
 * （overflow は padding の外側で切るため）。上下は透明な border にして、その内側で切る（地の色は border の下まで塗られる）。
 */
.clinic-card .status-cond-text {
	margin: 0; padding: 0 10px;
	border: 6px solid transparent; border-width: 6px 0; border-radius: var(--r-12);
	background: var(--amber-tint); color: var(--ink); line-height: 1.55;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/*
 * 本日・予約（2026-09-22 デザイン案D）：病院ページの要点と同じ「ラベル｜値」の小さな表。値がある行だけ作る。
 * 時間帯は「／」でつながず1つずつ並べ、予約の要否はバッジ（必須＝塗り・推奨＝淡色・不要＝緑）、方式と手段は文字で。
 */
.clinic-card__keyfacts {
	margin: 0; padding: 0 12px;
	border: 1px solid var(--line); border-radius: var(--r-12); background: var(--surface);
}
.clinic-card__keyrow { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.clinic-card__keyrow + .clinic-card__keyrow { border-top: 1px solid var(--line); }
.clinic-card__keyrow dt {
	flex: none; width: 4em; display: inline-flex; align-items: center; gap: 4px;
	font-size: var(--fs-min); line-height: 1.4; color: var(--text-2);
}
.clinic-card__keyrow dt svg { flex: none; color: var(--rose-dark); }
.clinic-card__keyrow dd {
	margin: 0; min-width: 0; padding: 6px 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
	font-size: var(--fs-label); line-height: 1.5; color: var(--ink);
}
.clinic-card__keyrow .clinic-card__hours { column-gap: 12px; font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.clinic-card__keyrow .clinic-card__hours.is-closed { color: var(--text-2); }
.clinic-card__need {
	display: inline-flex; align-items: center; height: 22px; padding: 0 9px; box-sizing: border-box;
	border-radius: var(--r-pill); border: 1.5px solid var(--amber); background: var(--amber-tint);
	font-weight: 700; line-height: 1; color: var(--ink);
}
.clinic-card__need[data-need="REQUIRED"] { background: var(--amber); }
.clinic-card__need[data-need="NOT_NEEDED"] { border-color: var(--sage); background: var(--sage-tint); }
.clinic-card__actions {
	display: flex; align-items: center; gap: 8px;
	margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line);
}

/* 一覧の上の結果バー。「一覧の見方」は件数の隣に1か所だけ */
.listctl__resultbar { flex-wrap: wrap; row-gap: 6px; }
.listctl__resultbar .morebtn { font-size: var(--fs-label); }

.srcnote { display: inline; font-size: inherit; color: var(--text-2); }
.srcnote .recheck { margin-left: 6px; }
.srcnote__link { margin-left: 6px; }

/* ---- 病院ページ：節の中の小見出しと確認元（第3稿で値を更新。下の「病院詳細 第3稿」） ---- */
.svc { display: flex; flex-direction: column; gap: 8px; }
.svc__h { margin: 12px 0 5px; font-size: .933rem; font-weight: 700; line-height: 1.5; color: var(--ink); }
.svc__src { margin: 0; font-size: var(--fs-min); color: var(--text-2); line-height: 1.6; }

/* ---- 病院ページ：基本情報・アクセス ---- */
.site-main a.mapbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: var(--h-min); padding: 0 12px;
	border-radius: var(--r-pill); border: 1.5px solid var(--rose); background: var(--surface);
	color: var(--rose-dark); font-weight: 700; font-size: var(--fs-label); text-decoration: none;
}

/* ---- 第2稿（自己レビューで直したところ） ---- */
/* 夜間の一覧の上の注意：段落のまま流さず、囲んで一覧の説明と分ける */
.listctl__night-note {
	margin: 0; padding: 10px 14px;
	background: var(--amber-tint); border: 2px solid var(--amber); border-radius: var(--r-14);
	color: var(--ink); line-height: 1.7;
}
/* 一覧カードの操作。区切り線とボタンの間は詰めすぎず、本文との境界を保つ。 */
.clinic-card__actions { margin-top: 2px; padding-top: 10px; }
/* 病院ページの行：ラベルを左の列に固定し、値は左揃え（長い値でラベルが1字ずつ折れていた） */
.clinic .rows .row {
	display: grid; grid-template-columns: 8.6em minmax(0, 1fr); gap: 4px 12px;
	align-items: baseline; padding: 9px 0; min-height: 0;
}
.clinic .rows .row > span:first-child { font-size: var(--fs-label); color: var(--text-2); }
.clinic .rows .row > span:last-child { min-width: 0; }
.clinic .rows .note { padding: 0 0 8px calc(8.6em + 12px); border-bottom: 1px solid var(--line); }
/* 狭い幅では行のラベルを値の上に置く（長い値が細い列に押し込まれて縦に伸びていた） */
@media (max-width: 440px) {
	.clinic .rows .row { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 8px 0; }
	.clinic .rows .note { padding-left: 0; }
}

/* ==================================================================
 * 第3稿（2026-09-17 運営者レビュー後：一覧の仕分け・夜間の表示・初診の条件）
 * ================================================================== */

/* 一覧カードの操作：詳細を見るを広く左に置き、電話／公式サイトを右に置く */
/*
 * 詳細を見る・電話・公式HP を 2:1:1（運営者指示 2026-09-22）。どの院でも詳細を見るの幅をそろえるため列は固定し、
 * 電話は2列目・公式HPは3列目に置く（無い院はその列が空く）。公式HPは電話と同じ形でアイコンを付けない。
 */
.clinic-card__actions {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px;
}
.clinic-card__actions .clinic-card__more { grid-column: 1; }
.clinic-card__actions .clinic-card__sub[href^="tel:"] { grid-column: 2; }
.clinic-card__actions .clinic-card__site { grid-column: 3; }
.clinic-card__more {
	min-width: 0; min-height: var(--h-card-action); padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--r-pill); background: #a95a4f; color: #fff;
	font-weight: 700; font-size: var(--fs-label);
}
.site-main a.clinic-card__sub {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	min-width: 0; min-height: var(--h-card-action); padding: 0 6px; box-sizing: border-box; white-space: nowrap;
	border-radius: var(--r-pill); border: 1.5px solid var(--rose);
	background: var(--surface); color: var(--rose-dark);
	font-weight: 700; font-size: var(--fs-label); text-decoration: none;
}
/* クチコミ：小さな吹き出しアイコンと公開件数を1行で表示 */
.clinic-card__report { display: flex; align-items: center; }
.site-main a.clinic-card__reportlink {
	position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
	font-size: var(--fs-label); color: var(--ink-2); padding: 2px 0; white-space: nowrap; text-decoration: none;
}
.clinic-card__reportlink > svg { flex-shrink: 0; }

/* 確認したページへのリンク（「公式サイトへ」「確認したページ」） */
.site-main a.srclink { font-size: var(--fs-min); font-weight: 700; padding: 4px 0; }

/* ==================================================================
 * 一覧カードの記号（2026-09-17 運営者レビュー「カードの文字が長いのはしんどい。マーク・アイコンと説明ポップアップで」、
 * 2026-09-18 デザイン案A「アイコン＋一言＋記号」の採用）
 *
 * 記号の列はカードの左上（病院名の上。運営者指示 2026-09-11 の位置）。列全体が1つのボタンで、
 * 押すと「表示マークについて」のポップアップが開く（sheet.js）。
 * 一言（診療・夜間・初診）で何についての記号かを示し、記号（○ △ ？ × 案内）は状態ごとに色を変える。
 * 形（記号・点線の枠・夜間の濃い地）でも区別し、色だけに頼らない。
 * ================================================================== */
.clinic-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin: -4px 0 -2px; }
.clinic-card__name { padding-top: 0; }
.marks {
	position: relative; z-index: 1;
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
	min-height: var(--h-min); padding: 4px 0; margin: 0;
	border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.marks:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 2px; border-radius: 10px; }
.mk {
	/* 375px 幅で「診療・初診・夜間」の3つと i が1行に収まる幅（2026-09-18 実測：1行に使えるのは 253px） */
	display: inline-flex; align-items: center; gap: 2px;
	height: 28px; padding: 0 7px 0 6px; box-sizing: border-box;
	border-radius: var(--r-pill); border: 1.5px solid var(--line);
	background: var(--surface); color: var(--ink);
	font-size: var(--fs-label); line-height: 1; white-space: nowrap;
}
.mk__rabbit { flex: none; width: 14px; height: 17px; margin-right: 1px; color: var(--ink); }
.mk .nighticon, .mk__icon { flex: none; width: 15px; height: 15px; }
.mk__label { font-weight: 500; }
.mk__sym { font-size: 1rem; font-weight: 700; }
.marks__i {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; border-radius: 50%;
	border: 1.5px solid var(--stone); color: var(--ink-2);
	font-size: 11px; font-weight: 700; font-style: italic; line-height: 1;
}
/* ○：確認できた（うさぎ診療）。記号は緑 */
.mk[data-mk="rabbit-YES"] { background: var(--sage-tint); border-color: var(--sage); }
.mk[data-mk="rabbit-YES"] .mk__sym { color: #2f7a4b; }
/* △：条件つき。記号は黄土色 */
.mk[data-mk="rabbit-CONDITIONAL"], .mk[data-mk="first-COND"] { background: var(--amber-tint); border-color: var(--amber); }
.mk[data-mk="rabbit-CONDITIONAL"] .mk__sym, .mk[data-mk="first-COND"] .mk__sym { color: #8f6410; }
/* ？：未確認（点線の枠・灰色。× とは形も記号も分ける。不可に見せない） */
.mk[data-mk="rabbit-UNKNOWN"] { border-style: dashed; border-color: var(--stone); }
.mk[data-mk="rabbit-UNKNOWN"] .mk__rabbit { color: var(--muted); }
.mk[data-mk="rabbit-UNKNOWN"] .mk__sym { color: var(--ink-2); }
/* ×：確認できた受付不可・停止中。記号は薄い灰色 */
.mk[data-mk="rabbit-NO"], .mk[data-mk="first-NO"] { background: var(--line); border-color: var(--stone); }
.mk[data-mk="rabbit-NO"] .mk__rabbit, .mk[data-mk="rabbit-NO"] .mk__label,
.mk[data-mk="first-NO"] .mk__label { color: var(--ink-2); }
.mk[data-mk="rabbit-NO"] .mk__sym, .mk[data-mk="first-NO"] .mk__sym { color: #7d716b; }
/*
 * 夜間：どの状態も濃い地（運営者 2026-09-18「背景が暗いほうが夜間だと一目で分かる」）。
 * 記号の色で状態を分ける：○ 明るい緑・△ 明るい黄・？ 明るい灰。案内だけの院は点線の枠と「案内」の字で、受付と分ける。
 */
.mk[data-mk^="night-"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.mk[data-mk^="night-"] .mk__label { color: var(--line); }
.mk[data-mk="night-YES"] .mk__sym { color: #a8dbb8; }
.mk[data-mk="night-CONSULT"] .mk__sym { color: #f0c979; }
.mk[data-mk="night-UNKNOWN"] .mk__sym { color: #d9cfc9; }
.mk[data-mk="night-GUIDE"] { border-style: dashed; border-color: var(--stone); }
.mk[data-mk="night-GUIDE"] .mk__sym { font-size: var(--fs-min); color: #d9cfc9; }
/* 要再確認（夜間の一覧で、確認の期限を過ぎた候補だけ）：時計のアイコンだけ */
.mk[data-mk="stale"] { padding: 0 6px; border-color: var(--stone); background: var(--amber-tint); color: var(--ink); }
/* 最寄り駅（分かっている院だけ）：住所のすぐ下に同じ形で */
.clinic-card__station { margin-top: -4px; }

/* 表示マークについて：一覧の下の入口と、ポップアップの中身 */
.marklegend { margin: 4px 0 0; text-align: center; }
.marklegend__open {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: var(--h-min); padding: 0 18px;
	border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
	font: inherit; font-size: var(--fs-label); font-weight: 700; color: var(--ink); cursor: pointer;
}
.marklegend__list { margin: 0 0 12px; display: flex; flex-direction: column; gap: 12px; }
.marklegend__item dt { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.marklegend__name { font-size: var(--fs-label); font-weight: 700; }
.marklegend__item dd { margin: 3px 0 0; font-size: var(--fs-label); color: var(--ink-2); line-height: 1.6; }
.marklegend__note { font-size: var(--fs-min); color: var(--text-2); line-height: 1.6; }
#sheet-marks .marklegend__note {
	margin: 16px 0 0; padding: 12px 14px;
	background: var(--bg); border-radius: var(--r-12);
}

/* ==================================================================
 * 病院詳細 第3稿（2026-09-22。design/07-clinic-detail-v3/detail-v3.dc.html・mark-sheet.dc.html）
 *
 * 上部は一覧カードと同じ部品（.clinic-card__top・.marks・.clinic-card__keyfacts）。その下にページ内リンク（2列）と4つの節。
 * .clinic は固定ページ・404・トップでも使うので、ページの枠は body.single-clinic に限る。
 * リンクの文字は白地で読める濃いローズ（--rose-ink）。共通のリンク色（.site-main a:not(...)）と同じ強さの
 * セレクタ（.single-clinic .site-main .clinic …）を後ろに置いて上書きする。
 * ================================================================== */
html:has(body.single-clinic) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html:has(body.single-clinic) { scroll-behavior: auto; }
}
.single-clinic .clinic { padding: 14px 16px 110px; gap: 12px; }
.single-clinic .clinic > .clinic__breadcrumb { margin-bottom: -2px; font-size: var(--fs-min); line-height: 1.6; }
.single-clinic .site-main .clinic :is(.clinic__breadcrumb, .clinic__src, .clinic__note, .infolist, .card__action, .nightpanel, .svc__note) a { color: var(--rose-ink); }

/* 節のカード・見出し・確認元の小さな行 */
.clinic__sec { gap: 14px; padding: 18px 16px; scroll-margin-top: 12px; }
.clinic__h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.133rem; font-weight: 700; line-height: 1.4; }
.clinic__h > svg { flex: none; color: var(--rose-dark); }
.clinic__hsub { font-size: var(--fs-min); font-weight: 500; color: var(--text-2); }
.clinic__src { margin: 0; font-size: var(--fs-min); line-height: 1.6; color: var(--text-2); }
.clinic__src .srclink { margin-left: 8px; white-space: nowrap; }
.clinic__note { margin: 0; font-size: var(--fs-label); line-height: 1.7; color: var(--text-2); }

/* 1. 上部（一覧カードと同じ内容） */
.clinic__top { gap: 8px; padding: 16px 16px 14px; }
.clinic__top .clinic__name { font-size: 1.4rem; line-height: 1.4; }
.clinic__top .favorite-btn--icon { margin: -2px -8px 0 0; border-color: transparent; }
.clinic__top .favorite-btn--icon svg { width: 24px; height: 24px; }
/* 条件付きの院の条件：一覧カードと同じ線なしの角丸四角。詳細では全文を出す（行数で切らない） */
.clinic__top .status-cond-text {
	margin: 0; padding: 6px 10px;
	border-radius: var(--r-12);
	background: var(--amber-tint); color: var(--ink); line-height: 1.55;
}
.clinic__place { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-label); line-height: 1.6; color: var(--text-2); }
.clinic__place p { display: flex; align-items: flex-start; gap: 5px; margin: 0; }
.clinic__place svg { flex: none; margin-top: 3px; color: var(--rose-dark); }
.clinic__place span { min-width: 0; }
.clinic__top .clinic-card__keyfacts { margin-top: 2px; }
.clinic__more summary {
	display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
	cursor: pointer; list-style: none;
	font-size: var(--fs-label); font-weight: 700; color: var(--rose-ink);
}
.clinic__more summary::-webkit-details-marker { display: none; }
.clinic__more[open] summary svg { transform: rotate(180deg); }
.clinic__more p { margin: 4px 0 0; font-size: var(--fs-label); line-height: 1.7; }

/* 2. ページ内リンク（2列×段。段を足せば項目を増やせる） */
.clinic__toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.single-clinic .site-main .clinic a.clinic__tocitem {
	display: flex; align-items: center; gap: 8px;
	min-height: 48px; padding: 0 12px; box-sizing: border-box;
	border: 1px solid var(--line); border-radius: var(--r-14); background: var(--surface);
	color: var(--ink); font-size: .933rem; font-weight: 700; line-height: 1.3; text-decoration: none;
}
.clinic__tocitem > svg:first-child { flex: none; color: var(--rose-dark); }
.clinic__tocitem > span { flex-grow: 1; min-width: 0; }
.clinic__tocarrow { flex: none; color: var(--text-2); }
.clinic__tocitem:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 2px; }

/* ラベル｜値の行（基本情報・来院時の案内・うさぎの診療日・夜間の条件） */
.infolist { display: flex; flex-direction: column; margin: 0; }
.infolist__row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.infolist__row:last-child { border-bottom: 1px solid var(--line); }
.infolist dt { flex: none; width: 6em; font-size: var(--fs-label); line-height: 1.6; color: var(--text-2); }
.infolist dd { margin: 0; min-width: 0; font-size: .933rem; line-height: 1.6; }
.infolist__note {
	display: block; margin-top: 4px; padding: 6px 10px; border-radius: var(--r-12); background: var(--bg);
	font-size: var(--fs-label); line-height: 1.6; color: var(--ink-2);
}
.clinic__sec#sec-hours .infolist dt { width: 7em; }
.single-clinic .site-main .clinic a.infolist__tel { font-size: var(--fs-body); font-weight: 700; }
.infolist__link { font-weight: 700; }

/* 3. 診療時間：時間を行の見出しに1回、マスは ○／休／？（hours.php の .hours--marks）。今日の曜日は丸で囲む */
.hours__today {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--rose-ink); color: var(--surface); font-weight: 700;
}
.hours--marks .hours__table { border-spacing: 3px 4px; font-size: var(--fs-min); }
.hours--marks .hours__corner { width: 72px; }
.hours--marks .hours__table th { padding: 0; font-size: var(--fs-min); font-weight: 500; color: var(--text-2); }
.hours--marks .hours__table th[scope="row"] { text-align: left; font-weight: 700; color: var(--ink); line-height: 1.35; }
.hours__time { display: block; font-weight: 500; font-variant-numeric: tabular-nums; }
.hours--marks .hours__table td { padding: 0; border: 0; border-radius: 0; background: none; }
/* マスの中身（押せる記号）は下の「診療時間のマスの記号」。未確認は休診（塗り）と描き分ける：白地＋点線の枠＋？ */
.clinic__closure {
	display: flex; flex-direction: column; gap: 2px;
	padding: 10px 12px; border-radius: var(--r-12);
	border: 1.5px solid var(--amber); background: var(--amber-tint);
}
.clinic__closure-text { margin: 0; font-size: .933rem; font-weight: 700; line-height: 1.6; }
.clinic__night { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }

/* 4. 診療内容・設備：2列の表。右端の ○△× は押すと「マークの見方」 */
.svc__hsub { margin-left: 6px; font-size: var(--fs-min); font-weight: 500; color: var(--text-2); }
.svcgrid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px;
	margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line);
}
.svcgrid__item {
	display: flex; align-items: center; justify-content: space-between; gap: 6px;
	min-height: var(--h-min); padding: 4px 0; box-sizing: border-box;
	border-bottom: 1px solid var(--line); font-size: .933rem; line-height: 1.4;
}
.svcgrid__item[data-cap="NO"] { color: var(--text-2); }
.svcgrid__mark {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
	font: inherit; font-size: 1rem; font-weight: 700; line-height: 1;
}
button.svcgrid__mark { position: relative; cursor: pointer; }
/* 見た目は32px、押せる範囲は44px */
button.svcgrid__mark::after { content: ""; position: absolute; inset: -6px; }
.svcgrid__mark:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 2px; }
.svcgrid__mark[data-cap="OK"] { background: var(--sage-tint); color: var(--sage-ink); }
.svcgrid__mark[data-cap="CONSULT"] { background: var(--amber-tint); color: var(--amber-ink); }
.svcgrid__mark[data-cap="NO"] { background: var(--line); color: var(--stone-ink); }
.svcgrid__text { flex: none; font-size: var(--fs-label); color: var(--ink-2); }
/*
 * 設備：タグのような角丸四角を横に並べて折り返す（第2稿 案1 の設備チップ。運営者指示 2026-09-22）。
 * 地 --bg・細い線 --line・文字 --fs-label。長い設備名は2行に折れてよい（高さは最小 30px、角丸は --r-12 で四角のまま）。
 */
.equiptags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.equiptags li {
	display: inline-flex; align-items: center;
	min-height: 30px; padding: 4px 10px; box-sizing: border-box;
	border: 1px solid var(--line); border-radius: var(--r-12); background: var(--bg);
	font-size: var(--fs-label); line-height: 1.4; color: var(--ink);
}
.svc__note { margin: 0; }
.svc__note span { font-weight: 700; }

/* マークの見方（ポップアップの中身） */
.markguide { display: flex; flex-direction: column; margin: 0 0 12px; }
.markguide__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.markguide__row:last-child { border-bottom: 1px solid var(--line); }
.markguide dd { margin: 0; display: flex; flex-direction: column; line-height: 1.6; }
.markguide__name { font-size: var(--fs-body); font-weight: 700; }
.markguide__desc { font-size: var(--fs-label); color: var(--text-2); }
.sheet__body .markguide__note { margin: 0; padding: 10px 12px; border-radius: var(--r-12); background: var(--bg); font-size: var(--fs-label); line-height: 1.7; }

/* 5. 基本情報・アクセス */
.clinic__addr { display: flex; flex-direction: column; gap: 8px; }
.clinic__addrtext { margin: 0; font-size: var(--fs-body); line-height: 1.6; }
.clinic__mapbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.single-clinic .site-main .clinic a.mapbtn { color: var(--rose-ink); font-size: .933rem; }
.clinic__photo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.clinic__photo img { display: block; width: 100%; height: auto; border-radius: var(--r-14); }
.clinic__message {
	margin: 0; padding: 12px 14px;
	border-radius: 4px 16px 16px 16px; background: var(--rose-tint-weak);
	font-size: .933rem; line-height: 1.7;
}

/* 6. クチコミ：受診報告（件数・内訳・最新の抜粋。星・点数・平均は持たない）→ Googleマップのクチコミ */
.reportsum { display: flex; flex-direction: column; gap: 10px; }
.reportsum__h { display: flex; align-items: baseline; gap: 8px; }
.reportsum__count { font-size: var(--fs-label); font-weight: 500; color: var(--text-2); }
.reportsum__tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reportsum__tally p {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
	margin: 0; padding: 10px 6px; border-radius: var(--r-12); font-size: var(--fs-label); text-align: center;
}
.reportsum__tally b { font-size: 1.333rem; }
.reportsum__tally [data-kind="seen"] { background: var(--sage-tint); }
.reportsum__tally [data-kind="seen"] b { color: var(--sage-ink); }
.reportsum__tally [data-kind="cond"] { background: var(--amber-tint); }
.reportsum__tally [data-kind="cond"] b { color: var(--amber-ink); }
.reportsum__tally [data-kind="refused"] { background: var(--line); }
.reportsum__tally [data-kind="refused"] b { color: var(--stone-ink); }
.reportsum__say { display: flex; gap: 10px; margin: 0; }
.reportsum__avatar {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%; background: var(--line); color: var(--muted);
}
.reportsum__say > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reportsum__say blockquote {
	margin: 0; padding: 10px 12px;
	border-radius: 4px var(--r-14) var(--r-14) var(--r-14); background: var(--bg);
	font-size: .933rem; line-height: 1.7;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.reportsum__say figcaption { font-size: var(--fs-min); line-height: 1.6; color: var(--text-2); }
.reportsum__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reportsum__actions > :only-child { grid-column: 1 / -1; }
.single-clinic .site-main .clinic a.reportsum__btn {
	display: flex; align-items: center; justify-content: center;
	min-height: var(--h-min); box-sizing: border-box; border-radius: var(--r-pill);
	font-size: var(--fs-label); font-weight: 700; text-decoration: none;
}
.single-clinic .site-main .clinic a.reportsum__btn--more { background: var(--bg); color: var(--ink); }
.single-clinic .site-main .clinic a.reportsum__btn--post { border: 1.5px solid var(--rose); background: var(--surface); color: var(--rose-ink); }
.gmaps { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.single-clinic .site-main .clinic a.gmaps__link {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	min-height: var(--h-min); padding: 0 14px; border-radius: var(--r-14);
	background: var(--bg); color: var(--ink); font-size: .933rem; font-weight: 700; text-decoration: none;
}
.gmaps__link svg { flex: none; color: var(--rose-ink); }

/* 7. お知らせ・確認の記録（ページ内リンクの外） */
.clinic__news { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.clinic__news li { border-top: 1px solid var(--line); }
.clinic__news li:last-child { border-bottom: 1px solid var(--line); }
.single-clinic .site-main .clinic .clinic__news a,
.clinic__newsrow {
	display: flex; align-items: baseline; gap: 12px; padding: 10px 0;
	color: var(--ink); text-decoration: none; font-size: .933rem; line-height: 1.6;
}
.clinic__newsdate { flex: none; font-size: var(--fs-min); color: var(--text-2); font-variant-numeric: tabular-nums; }
.clinic__hist { padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-22); }
.clinic__hist summary {
	display: flex; align-items: center; justify-content: space-between; min-height: 48px;
	cursor: pointer; list-style: none; font-size: .933rem; font-weight: 700;
}
.clinic__hist summary::-webkit-details-marker { display: none; }
.clinic__histlatest { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-min); font-weight: 400; color: var(--text-2); }
.clinic__hist details[open] summary svg { transform: rotate(180deg); }
.clinic__hist .histlist { padding: 4px 0 14px; }

/*
 * 補足の枠（運営者指示 2026-09-22「補足は枠で囲み、範囲が分かるように。文字は本文より少し小さくてよい」）。
 * **線なし・少しの角丸・地の色だけ**（左だけの太線は使わない）。ある項目を補う文をここに入れる：
 * 診療時間の補足（行ごと未確認・マスの括弧書き・公式サイトの記載）、うさぎの診療の注記、サービスの注記、
 * 夜間の病院の案内・夜間の初診・共通の注意、予約・受付の注意の中身、来院時の案内の確認元、アクセスの文、地図を出さない理由、
 * うさぎの記載が見当たらなかったことの注記。行の中の補足（駐車場の注記など）は .infolist__note（同じ形の小さい版）。
 */
.clinic__aside {
	margin: 0; padding: 10px 12px;
	display: flex; flex-direction: column; gap: 6px;
	border-radius: var(--r-12); background: var(--bg);
	font-size: var(--fs-label); line-height: 1.7; color: var(--ink-2);
}
.clinic__aside p { margin: 0; }
.clinic__aside .pre { font-size: inherit; }
.clinic__aside.clinic__src { font-size: var(--fs-min); }
.clinic__asidelist { margin: 0; padding-left: 1.2em; }
.clinic__more .clinic__aside { margin-top: 4px; }
.svc__note span { color: var(--ink); }

/* 診療時間のマスの記号（押すと「マークの見方」）。ボタンの既定の見た目を消して、マスの見た目は下で付ける */
.hours__mk {
	display: block; width: 100%; margin: 0; padding: 0;
	border: 0; background: none; font: inherit; color: inherit; line-height: inherit; cursor: pointer;
}
.hours__mk:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 1px; border-radius: 8px; }
.hours--marks .hours__table td > .hours__mk {
	display: flex; align-items: center; justify-content: center;
	height: 30px; box-sizing: border-box; border-radius: 8px;
}
.hours--marks .hours__on > .hours__mk { background: var(--sage-tint); color: var(--sage-ink); font-size: .933rem; font-weight: 700; }
.hours--marks .hours__on.is-today > .hours__mk { box-shadow: inset 0 0 0 1.5px var(--sage); }
.hours--marks .hours__off > .hours__mk { background: var(--line); color: var(--text-2); }
.hours--marks .hours__unknown > .hours__mk { background: var(--surface); color: var(--text-2); border: 1.5px dashed var(--stone); }
/* 「マークの見方」の見本（表のマスと同じ形） */
.hours__chip {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 30px; box-sizing: border-box; border-radius: 8px; font-weight: 700;
}
.hours__chip[data-state="on"] { background: var(--sage-tint); color: var(--sage-ink); }
.hours__chip[data-state="off"] { background: var(--line); color: var(--text-2); font-weight: 500; }
.hours__chip[data-state="unknown"] { background: var(--surface); color: var(--text-2); border: 1.5px dashed var(--stone); font-weight: 500; }

/* ==================================================================
 * 病院詳細 v4 表示（docs/208 §3。design/08-clinic-detail-v4）。既存の部品の型に足す分だけ。
 * ================================================================== */
/* 要確認の枠：線なし・角丸12px・--amber-tint（#fbf0d9）。1行目に「〈項目〉：要確認」 */
.v4review {
	display: flex; flex-direction: column; gap: 4px;
	padding: 10px 12px; border-radius: var(--r-12); background: var(--amber-tint);
	font-size: var(--fs-label); line-height: 1.7; color: var(--ink);
}
.v4review p { margin: 0; }
.v4review__h { font-weight: 700; }
.single-clinic .site-main .clinic .v4review a { color: var(--rose-ink); }
/* 院長のあいさつ（公式サイトからの引用）。「病院からのひとこと」の吹き出し（.clinic__message）とは別の見た目 */
.v4quote {
	margin: 0; padding: 10px 14px; border-radius: var(--r-12); background: var(--bg);
	font-size: .933rem; line-height: 1.8; color: var(--ink-2);
}
.v4quote p { margin: 0; }
.v4quote .clinic__more p { margin-top: 4px; font-size: inherit; }
/* 受診の流れ（公式サイトで一続きに書かれた手順） */
.v4steps { margin: 0; padding-left: 1.4em; font-size: .933rem; line-height: 1.8; }
/* 夜間診療の札：なし（×） */
.nightpill[data-mk="night-NO"] .nightpill__sym { color: var(--night-stone); }

/* 県ページの市区町村リンク。ページ送りの直後に置く */
.area-cities { background: var(--surface); border-radius: var(--r-22); padding: 0 16px; box-shadow: var(--shadow-card); }
.area-cities__summary {
	display: flex; align-items: center; gap: 10px; min-height: 52px;
	cursor: pointer; list-style: none; font-weight: 700; text-align: left;
}
.area-cities__summary::-webkit-details-marker { display: none; }
.area-cities__summary > span { min-width: 0; flex: 1; text-align: left; }
.area-cities__summary:hover { color: var(--rose-dark); }
.area-cities__summary:focus-visible, .area-cities__link:focus-visible, .area-cities__city:focus-visible {
	outline: 2px solid var(--rose-dark); outline-offset: 3px; border-radius: var(--r-12);
}
.area-cities__icon { flex: none; color: var(--rose-dark); }
.area-cities__summary small { flex: none; margin-left: auto; white-space: nowrap; color: var(--ink-2); font-size: var(--fs-label); font-weight: 400; }
.area-cities__summary::after {
	content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 2px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg); transition: transform .15s;
}
.area-cities__details[open] .area-cities__summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.area-cities__details[open] .area-cities__summary { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.area-cities__links {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px; margin: 0; padding: 0 0 14px; list-style: none;
}
.area-cities__links > li { min-width: 0; margin: 0; padding: 0; }
.area-cities__link {
	display: flex; align-items: center; justify-content: space-between; gap: 6px;
	min-width: 0; min-height: var(--h-min); padding: 6px 10px; box-sizing: border-box;
	color: var(--ink); text-decoration: none; background: var(--bg);
	border: 1px solid var(--line); border-radius: var(--r-12); font-size: var(--fs-label); font-weight: 700;
}
.area-cities__link:hover, .area-cities__city:hover { color: var(--rose-dark); background: var(--rose-tint-weak); border-color: var(--rose); }
.area-cities__link > span { min-width: 0; }
.area-cities__link small, .area-cities__city small {
	flex: none; display: inline-flex; align-items: center; padding: 1px 7px;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	color: var(--ink-2); font-size: var(--fs-min); font-weight: 400;
}
/* 政令市：市全体のリンクを先頭に、その下に区 */
.area-cities__group { display: flex; flex-direction: column; gap: 8px; padding: 0 0 14px; }
.area-cities__city {
	display: flex; align-items: center; gap: 8px; min-height: var(--h-min); padding: 0 12px;
	border: 1px solid var(--line); border-radius: var(--r-12); background: var(--rose-tint-weak);
	color: var(--ink); text-decoration: none; font-weight: 700;
}
.area-cities__city > span { flex: 1; min-width: 0; }
.area-cities__city small { background: var(--surface); }
.area-cities__links--wards { padding: 0 0 0 10px; border-left: 2px solid var(--line); }
.area-cities__label { margin: 4px 0 0; font-size: var(--fs-label); font-weight: 700; color: var(--text-2); }

@media (max-width: 560px) {
	.area-cities__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.area-cities { padding: 0 12px; }
	.area-cities__summary { gap: 7px; }
	.area-cities__link { padding: 6px 8px; }
}

/* 共通リンク色の詳細度に合わせ、正本の部品色を維持する。 */
.site-main .clinic .area-cities a:is(.area-cities__link, .area-cities__city) { color: var(--ink); }
.site-main .clinic .area-cities a:is(.area-cities__link, .area-cities__city):hover { color: var(--rose-dark); }
.site-main .clinic > .clinic__breadcrumb a[href] { color: var(--rose-ink); }