@charset "UTF-8";
/*
 * med-pro.jp/clinic/ 専用スタイル
 *
 * 指示書 §3.1「過度なカスタムCSSを書かない（保守性優先）」に従い、
 * SWELL のデフォルトで足りるものは書かない。
 * ここに置くのは、SWELL に存在しない自前パーツ（監修者ボックス・
 * 関連記事・免責）の最小限の見た目だけ。
 */

:root {
	/*
	 * アクセントカラー。
	 * Med-Pro のブランドカラー未確定のため、指示書 §3.1 の指示どおり
	 * 落ち着いたブルー系を仮置きしている。確定次第この1行を差し替える。
	 */
	--clinic-accent: #1f5fa8;
	--clinic-border: #e3e7ec;
	--clinic-muted: #5b6672;
	--clinic-surface: #f7f9fb;
}

/* --- 記事下パーツ共通 ------------------------------------------------- */

.clinic-supervisor,
.clinic-related,
.clinic-disclaimer {
	margin-block: 2em;
	padding: 1.25em 1.5em;
	border: 1px solid var(--clinic-border);
	border-radius: 6px;
	background: #fff;
}

/*
 * SWELL は .post_content h2 に見出しバーの装飾（背景色・枠・擬似要素）を
 * 当てている。単一クラスでは特定度で負けて枠から食み出すため、親クラスを
 * 重ねて優先度を上げる。!important を使わないのは、SWELL 側が後で
 * !important を使い出したときに詰むのを避けるため。
 */
.clinic-supervisor .clinic-supervisor__title,
.clinic-related .clinic-related__title,
.clinic-disclaimer .clinic-disclaimer__title {
	margin: 0 0 0.75em;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--clinic-accent);
}

/* SWELL の見出し装飾は擬似要素でも作られるので消しておく。 */
.clinic-supervisor .clinic-supervisor__title::before,
.clinic-supervisor .clinic-supervisor__title::after,
.clinic-related .clinic-related__title::before,
.clinic-related .clinic-related__title::after,
.clinic-disclaimer .clinic-disclaimer__title::before,
.clinic-disclaimer .clinic-disclaimer__title::after {
	content: none;
	display: none;
}

/* --- 監修者ボックス（§5.2） ------------------------------------------- */

.clinic-supervisor__body {
	display: flex;
	gap: 1em;
	align-items: flex-start;
}

.clinic-supervisor__photo {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.clinic-supervisor__photo--empty {
	display: block;
	border: 1px dashed var(--clinic-border);
	background: var(--clinic-surface);
}

.clinic-supervisor__meta p {
	margin: 0 0 0.2em;
}

.clinic-supervisor__name {
	font-size: 1.1rem;
	font-weight: 700;
}

.clinic-supervisor__cred,
.clinic-supervisor__affil {
	font-size: 0.9rem;
	color: var(--clinic-muted);
}

.clinic-supervisor__profile {
	margin-top: 0.6em !important;
	font-size: 0.9rem;
	line-height: 1.8;
}

.clinic-supervisor__more {
	margin-top: 0.6em !important;
	font-size: 0.85rem;
}

/* ダミー表示は目立たせる。公開前に気づかず出すことを防ぐため。 */
.clinic-supervisor.is-placeholder {
	border-color: #e0a800;
	background: #fffdf5;
}

.clinic-supervisor__placeholder {
	margin: 0.75em 0 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: #a37200;
}

/* --- 関連記事（§3.4） -------------------------------------------------- */

.clinic-related__list {
	margin: 0;
	padding-left: 1.2em;
}

.clinic-related__item {
	margin-bottom: 0.35em;
}

/* --- 免責（§5.3） ------------------------------------------------------ */

.clinic-disclaimer {
	background: var(--clinic-surface);
}

.clinic-disclaimer__list {
	margin: 0;
	padding-left: 1.2em;
	font-size: 0.85rem;
	line-height: 1.8;
	color: var(--clinic-muted);
}

/* --- トップページ：エリア／診療科から探す（§3.3） --------------------- */

/*
 * セレクタに要素名を足しているのは、SWELL の .post_content ul / li に
 * 特定度で負けてリストマーカーや余白が残るのを防ぐため。
 */

.clinic-areas__group + .clinic-areas__group {
	margin-top: 1.75em;
}

.clinic-areas .clinic-areas__label {
	margin: 0 0 0.6em;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--clinic-accent);
}

/* SWELL の h3 は擬似要素で下線を引くので、それも消す。 */
.clinic-areas .clinic-areas__label::before,
.clinic-areas .clinic-areas__label::after {
	content: none;
	display: none;
}

ul.clinic-areas__list,
ul.clinic-depts,
ul.clinic-areaDepts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

li.clinic-areas__item,
li.clinic-depts__item,
li.clinic-areaDepts__item {
	margin: 0;
	padding: 0.55em 0.7em;
	border: 1px solid var(--clinic-border);
	border-radius: 4px;
	background: #fff;
	font-size: 0.95rem;
	line-height: 1.4;
}

li.clinic-areas__item a,
li.clinic-depts__item a,
li.clinic-areaDepts__item a {
	display: block;
	text-decoration: none;
}

/* 自治体アーカイブの診療科リンク。タームの説明文の直後に出るので余白を足す。 */
ul.clinic-areaDepts {
	margin-top: 0.9em;
}

/* 記事がまだ無い自治体・診療科。リンクにしないので、押せないことを見た目でも示す。 */
li.clinic-areas__item.is-pending,
li.clinic-depts__item.is-pending {
	background: var(--clinic-surface);
	color: var(--clinic-muted);
}

li.clinic-areas__item.is-pending small,
li.clinic-depts__item.is-pending small {
	display: block;
	font-size: 0.75rem;
}

/* --- モバイル ---------------------------------------------------------- */

@media (max-width: 599px) {
	.clinic-supervisor,
	.clinic-related,
	.clinic-disclaimer {
		padding: 1em;
	}

	.clinic-supervisor__body {
		gap: 0.75em;
	}

	.clinic-supervisor__photo {
		flex-basis: 72px;
		width: 72px;
		height: 72px;
	}
}

/*
 * メインカラー（#1F5FA8）は SWELL 側の設定 loos_customizer[color_main] に
 * 保存してあり、SWELL が --color_main として出力する。ここでは上書きしない。
 * 変更したいときは SWELL のカスタマイザーから行うこと。
 *
 * 注意：SWELL は「動的なCSSをキャッシュする」設定が ON のあいだ生成済み CSS を
 * 使い回すため、設定を変えても即座に反映されない。反映されないときは
 * SWELL設定 → 高速化 でキャッシュを一度切って戻す。
 */

/* --- ヘッダーのサイト名に「by Med-Pro」を併記（§3.2） ------------------- */

/*
 * 本来はロゴ画像に入れるべきもの。画像が用意できるまでの暫定対応として
 * 擬似要素で添えている。ブランド名の実テキストはフッターの運営者表記に
 * 入れてあるので、ここが装飾扱いでも情報としては欠けない。
 */
.l-header__logo::after {
	content: "by Med-Pro";
	display: block;
	margin-top: 0.15em;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--clinic-muted);
}

/* --- トップページのヒーロー（§3.3-1） ---------------------------------- */

.clinic-hero {
	margin-block: 0 2.5em;
	padding: clamp(2rem, 6vw, 3.75rem) clamp(1.25rem, 5vw, 3rem);
	border-radius: 10px;
	background-color: var(--clinic-accent);
	background-image:
		radial-gradient(120% 150% at 100% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(135deg, #14406f 0%, #1f5fa8 55%, #3283d6 100%);
	color: #fff;
}

.clinic-hero > * {
	margin: 0;
}

.clinic-hero .clinic-hero__eyebrow {
	margin-bottom: 0.9em;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	opacity: 0.85;
}

.clinic-hero .clinic-hero__title {
	font-size: clamp(1.35rem, 3.6vw, 2.1rem);
	font-weight: 700;
	line-height: 1.55;
}

.clinic-hero .clinic-hero__lead {
	margin-top: 1.1em;
	font-size: 0.95rem;
	line-height: 1.9;
	opacity: 0.92;
}

/*
 * 写真を敷きたくなったら、下のコメントを外して画像URLを入れる。
 * グラデーションをオーバーレイとして上に残すので、文字が読めなくならない。
 *
 * .clinic-hero {
 *     background-image:
 *         linear-gradient( 135deg, rgba( 20, 64, 111, 0.86 ) 0%, rgba( 31, 95, 168, 0.72 ) 100% ),
 *         url( "画像のURL" );
 *     background-size: cover;
 *     background-position: center;
 * }
 */

/* --- 記事冒頭の注記ボックス（選定方法・情報基準日の明示） ---------------- */

/*
 * 「本記事の選定について」「情報は◯年◯月時点」を目立たせるための枠。
 * 記事の信頼性に直結する情報なので、本文と地続きに見えないようにする。
 */
.clinic-notice {
	margin-block: 0 2em;
	padding: 1.1em 1.3em;
	border: 1px solid var(--clinic-border);
	border-left: 4px solid var(--clinic-accent);
	border-radius: 4px;
	background: var(--clinic-surface);
	font-size: 0.9rem;
	line-height: 1.9;
}

.clinic-notice p {
	margin: 0;
}

.clinic-notice p + p {
	margin-top: 0.5em;
}

/* --- 記事冒頭の署名（執筆・監修） --------------------------------------- */

.clinic-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.4em;
	margin: 0 0 1.75em !important;
	padding-bottom: 0.9em;
	border-bottom: 1px solid var(--clinic-border);
	font-size: 0.85rem;
	color: var(--clinic-muted);
}

.clinic-byline__item {
	white-space: nowrap;
}

/* --- この記事を書いた人（執筆者＝編集部） ------------------------------- */

.clinic-author {
	margin-block: 2em;
	padding: 1.25em 1.5em;
	border: 1px solid var(--clinic-border);
	border-radius: 6px;
	background: #fff;
}

.clinic-author .clinic-author__title {
	margin: 0 0 0.75em;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--clinic-accent);
}

.clinic-author .clinic-author__title::before,
.clinic-author .clinic-author__title::after {
	content: none;
	display: none;
}

.clinic-author__body {
	display: flex;
	gap: 1em;
	align-items: flex-start;
}

.clinic-author__avatar {
	flex: 0 0 72px;
	text-align: center;
}

.clinic-author .clinic-author__img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--clinic-surface);
	object-fit: contain;
}

.clinic-author__img--empty {
	border: 1px dashed var(--clinic-border);
}

.clinic-author__navi {
	display: block;
	margin-top: 0.3em;
	font-size: 0.68rem;
	line-height: 1.3;
	color: var(--clinic-muted);
}

.clinic-author__meta p {
	margin: 0;
}

.clinic-author__name {
	font-size: 1.05rem;
	font-weight: 700;
}

.clinic-author__desc {
	margin-top: 0.5em !important;
	font-size: 0.9rem;
	line-height: 1.85;
}

/* 責任の切り分けを明示する一文。本文より落として但し書きに見せる。 */
.clinic-author__note {
	margin-top: 0.6em !important;
	font-size: 0.8rem;
	line-height: 1.7;
	color: var(--clinic-muted);
}

@media (max-width: 599px) {
	.clinic-author__avatar {
		flex-basis: 56px;
	}

	.clinic-author .clinic-author__img {
		width: 56px;
		height: 56px;
	}
}

/* --- 案内役「えんちゃん」の吹き出し ------------------------------------- */

/*
 * 執筆者ではなく案内役。読者の疑問の代弁や読み方の補助に使う。
 * 医学的な断定や受診の推奨はここに書かせない（運用ルール）。
 */
.clinic-enchan {
	display: flex;
	gap: 0.9em;
	align-items: flex-start;
	margin-block: 1.75em;
}

.clinic-enchan__avatar {
	flex: 0 0 56px;
	text-align: center;
}

.clinic-enchan .clinic-enchan__img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--clinic-surface);
	object-fit: contain;
}

.clinic-enchan__img--empty {
	border: 1px dashed var(--clinic-border);
}

.clinic-enchan__name {
	display: block;
	margin-top: 0.25em;
	font-size: 0.7rem;
	line-height: 1.3;
	color: var(--clinic-muted);
}

.clinic-enchan__bubble {
	position: relative;
	flex: 1 1 auto;
	padding: 1em 1.2em;
	border: 1px solid var(--clinic-border);
	border-radius: 10px;
	background: var(--clinic-surface);
	font-size: 0.92rem;
	line-height: 1.85;
}

/* 吹き出しの尻尾。枠線と背景の二枚重ねで作る。 */
.clinic-enchan__bubble::before,
.clinic-enchan__bubble::after {
	content: "";
	position: absolute;
	top: 20px;
	width: 0;
	height: 0;
	border-style: solid;
}

.clinic-enchan__bubble::before {
	left: -9px;
	border-width: 8px 9px 8px 0;
	border-color: transparent var(--clinic-border) transparent transparent;
}

.clinic-enchan__bubble::after {
	left: -8px;
	border-width: 8px 9px 8px 0;
	border-color: transparent var(--clinic-surface) transparent transparent;
}

.clinic-enchan__bubble p {
	margin: 0;
}

.clinic-enchan__bubble p + p {
	margin-top: 0.7em;
}

@media (max-width: 599px) {
	.clinic-enchan {
		gap: 0.6em;
	}

	.clinic-enchan__avatar {
		flex-basis: 44px;
	}

	.clinic-enchan .clinic-enchan__img {
		width: 44px;
		height: 44px;
	}
}

/* --- Googleマップの埋め込み -------------------------------------------- */

/*
 * iframe を親の幅に追従させる。高さを比率で確保しているのは、
 * 読み込み前後でレイアウトがずれない（CLS を出さない）ようにするため。
 * iframe 側に loading="lazy" を付けて PageSpeed への影響も抑えている。
 */
.clinic-map {
	margin-block: 1.5em 2em;
}

.clinic-map__frame {
	position: relative;
	padding-top: 60%;
	overflow: hidden;
	border: 1px solid var(--clinic-border);
	border-radius: 6px;
}

.clinic-map__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.clinic-map figcaption {
	margin-top: 0.5em;
	font-size: 0.8rem;
	color: var(--clinic-muted);
}

@media (max-width: 599px) {
	.clinic-map__frame {
		padding-top: 80%;
	}
}

/* --- お問い合わせフォーム（§5.1 の訂正依頼窓口を兼ねる） ---------------- */

.wpcf7 .clinic-form__req {
	margin-left: 0.4em;
	padding: 0.1em 0.45em;
	border-radius: 3px;
	background: #c1362c;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	vertical-align: 0.1em;
}

.wpcf7 small {
	color: var(--clinic-muted);
	font-size: 0.8rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	margin-top: 0.35em;
	padding: 0.6em 0.7em;
	border: 1px solid var(--clinic-border);
	border-radius: 4px;
	background: #fff;
	/* 16px 未満にすると iOS で入力時に画面が拡大されるため下げない。 */
	font-size: 1rem;
}

.wpcf7 textarea {
	min-height: 10em;
}

/* ラジオは横並びだと選択肢が読みにくいので縦に積む。 */
.wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0.35em 0 0;
}

.wpcf7 input[type="submit"] {
	margin-top: 0.5em;
	padding: 0.8em 2.5em;
	border: 0;
	border-radius: 4px;
	background: var(--clinic-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	opacity: 0.88;
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 0.8rem;
}

/* ==========================================================================
   リデザイン（2026-08-02）
   --------------------------------------------------------------------------
   オーナー指示「もっとデザイン性の高い、見た目のカッコいいサイトにしたい」。
   トップ・アーカイブ・記事を通しで1つのデザインシステムに揃える。

   方針
   - **クラス名は変えない。** PHP・ショートコード・記事のマークアップは触らずに
     見た目だけを更新する。壊れたときは、このセクションを消せば元に戻る
   - 医療情報なので**華美にしない。** 効かせるのは余白・階層・罫線の質。
     色数を増やさず、アクセントは1色（ブランドブルー）に絞る
   - **比較表がこのメディアの主役。** ここに一番手を入れている
   ========================================================================== */

:root {
	/* --- 追加トークン。既存の4色はそのまま使う ------------------------- */
	--clinic-ink: #16202c;          /* 本文の黒。真っ黒にしない */
	--clinic-accent-dark: #14406f;
	--clinic-tint: #eef3fa;         /* アクセントの薄い面 */
	--clinic-line: #eef1f5;         /* 罫線より更に薄い区切り */
	--clinic-radius: 10px;
	--clinic-radius-sm: 6px;
	/* 影は「浮かせる」ためではなく、面の境界を柔らかくするために使う */
	--clinic-shadow: 0 1px 2px rgba(22, 32, 44, 0.04), 0 8px 24px -12px rgba(22, 32, 44, 0.12);
}

/* --- 1. 本文のリズム ---------------------------------------------------- */

.post_content {
	color: var(--clinic-ink);
	/* 日本語の約物を詰める。長文の見た目が締まる */
	font-feature-settings: "palt" 1;
}

.post_content > p {
	line-height: 2;
}

/* --- 2. 見出し ---------------------------------------------------------- */

/*
 * SWELL の見出し装飾を、細い縦罫＋余白の階層に置き換える。
 * 医療情報は見出しが多くなるので、装飾が強いと読み進めるのが疲れる。
 */
.post_content h2 {
	margin-top: 3rem;
	margin-bottom: 1.25rem;
	padding: 0.1em 0 0.1em 0.85em;
	border: 0;
	border-left: 4px solid var(--clinic-accent);
	border-radius: 0;
	background: none;
	font-size: clamp(1.25rem, 2.6vw, 1.55rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--clinic-accent-dark);
}

.post_content h2::before,
.post_content h2::after {
	content: none;
	display: none;
}

.post_content h3 {
	margin-top: 2.25rem;
	margin-bottom: 1rem;
	padding: 0 0 0.4em;
	border: 0;
	border-bottom: 2px solid var(--clinic-line);
	background: none;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--clinic-ink);
}

.post_content h3::before,
.post_content h3::after {
	content: none;
	display: none;
}

/* --- 3. 表（このメディアの主役） ---------------------------------------- */

/*
 * 比較一覧表と各院の情報表。既定のままだと罫線が均一で、
 * どこを見ればいいのか分からない。**1列目とヘッダに重みを寄せる。**
 *
 * **スマホでは横スクロールさせる（2026-08-04）。** それまで table に width: 100% を
 * 掛けていたため、ラッパの overflow-x: auto が働かず、**6列の比較一覧表が
 * セルごとに折り返して縦に伸びていた。** 列数が4以上の表だけ width: auto に戻し、
 * セルに min-width を持たせて横スクロールにする。1列目（医院名）は sticky で残す。
 * → 下の「9. モバイル」を参照。
 */
.post_content .wp-block-table {
	margin-block: 1.75em;
	overflow-x: auto;
	border-radius: var(--clinic-radius);
	box-shadow: var(--clinic-shadow);
	-webkit-overflow-scrolling: touch;
}

.post_content .wp-block-table table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	font-size: 0.92rem;
	line-height: 1.75;
}

/*
 * ヘッダを sticky にはしない。ラッパに overflow-x: auto を掛けている時点で
 * そのラッパがスクロールコンテナになり、ページスクロールに対する sticky は効かない。
 * 効かない指定を残すと、後から読む人が「効くはず」と誤解する。
 */
.post_content .wp-block-table thead th {
	padding: 0.85em 1em;
	border: 0;
	border-bottom: 2px solid var(--clinic-accent);
	background: var(--clinic-tint);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--clinic-accent-dark);
	text-align: left;
}

.post_content .wp-block-table tbody td {
	padding: 0.85em 1em;
	border: 0;
	border-bottom: 1px solid var(--clinic-line);
	vertical-align: top;
}

.post_content .wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

/* 1列目＝医院名または項目名。ここを読み口にする。 */
.post_content .wp-block-table tbody td:first-child {
	background: #fbfcfe;
	font-weight: 700;
	color: var(--clinic-ink);
	white-space: normal;
}

.post_content .wp-block-table tbody tr:hover td {
	background: #f9fbfd;
}

.post_content .wp-block-table tbody tr:hover td:first-child {
	background: var(--clinic-tint);
}

/* 表内の strong は色を付けず、太さだけで差をつける（色数を増やさない） */
.post_content .wp-block-table strong {
	color: var(--clinic-accent-dark);
}

/* --- 4. カード類を1つの言語に揃える ------------------------------------- */

.clinic-supervisor,
.clinic-related,
.clinic-disclaimer,
.clinic-author {
	border-radius: var(--clinic-radius);
	border-color: var(--clinic-border);
	box-shadow: var(--clinic-shadow);
}

/* 記事冒頭の注記。警告ではなく「この記事の作り方」の説明なので、
   赤系にせずアクセントの面で受ける。 */
.clinic-notice {
	border: 0;
	border-left: 4px solid var(--clinic-accent);
	border-radius: var(--clinic-radius-sm);
	background: var(--clinic-tint);
	color: var(--clinic-ink);
}

/* 免責は最後に置く抑えた面。カードの中でいちばん静かにする。 */
.clinic-disclaimer {
	box-shadow: none;
	background: var(--clinic-surface);
}

/* --- 5. トップのヒーロー ------------------------------------------------ */

.clinic-hero {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 18px 48px -24px rgba(20, 64, 111, 0.55);
}

/* 斜めの光。単色グラデーションだけだと平板に見える */
.clinic-hero::after {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.clinic-hero > * {
	position: relative;
	z-index: 1;
}

.clinic-hero .clinic-hero__eyebrow {
	display: inline-block;
	margin-bottom: 1em;
	padding: 0.35em 0.9em;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	opacity: 1;
}

/* --- 6. エリア・診療科の選び口をカードにする ---------------------------- */

li.clinic-areas__item,
li.clinic-depts__item,
li.clinic-areaDepts__item {
	position: relative;
	padding: 0.8em 1.9em 0.8em 0.95em;
	border-radius: var(--clinic-radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

li.clinic-areas__item:has(a):hover,
li.clinic-depts__item:has(a):hover,
li.clinic-areaDepts__item:hover {
	border-color: var(--clinic-accent);
	box-shadow: var(--clinic-shadow);
	transform: translateY(-1px);
}

/* 「準備中」は矢印を出さないので、矢印ぶんの右余白も戻す */
li.clinic-areas__item.is-pending,
li.clinic-depts__item.is-pending {
	padding-right: 0.95em;
}

/* リンクのある項目にだけ矢印を出す。「準備中」には出さない */
li.clinic-areas__item:has(a)::after,
li.clinic-depts__item:has(a)::after,
li.clinic-areaDepts__item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.85em;
	width: 0.42em;
	height: 0.42em;
	margin-top: -0.25em;
	border-top: 2px solid var(--clinic-accent);
	border-right: 2px solid var(--clinic-accent);
	transform: rotate(45deg);
}

li.clinic-areas__item a,
li.clinic-depts__item a,
li.clinic-areaDepts__item a {
	color: var(--clinic-ink);
	font-weight: 500;
}

/* --- 7. アーカイブの導入部 ---------------------------------------------- */

.p-termHead {
	margin-bottom: 2em;
}

.p-termHead .p-termHead__desc {
	padding: 1.1em 1.3em;
	border-left: 4px solid var(--clinic-accent);
	border-radius: var(--clinic-radius-sm);
	background: var(--clinic-tint);
	font-size: 0.92rem;
	line-height: 1.95;
	color: var(--clinic-ink);
}

/* --- 8. えんちゃんの吹き出し -------------------------------------------- */

.clinic-enchan {
	padding: 0;
}

/* --- 9. モバイル -------------------------------------------------------- */

@media (max-width: 599px) {
	.post_content h2 {
		margin-top: 2.25rem;
		padding-left: 0.7em;
	}

	.post_content .wp-block-table table {
		/* 2026-10-06：0.86rem が 11.6px まで下がっていたため 12px を下限にする（週次巡回 H-4） */
		font-size: max( 0.86rem, 12px );
	}

	.post_content .wp-block-table thead th,
	.post_content .wp-block-table tbody td {
		padding: 0.7em 0.8em;
	}

	/*
	 * ★ 4列以上の表（比較一覧表・地区別の全院一覧）は横スクロールにする。
	 *
	 * width: 100% のままだと画面幅に押し込められ、セルが1〜2文字ずつ折り返して
	 * **1行が異常に縦長になる。** width: auto ＋ セルの min-width で自然幅を持たせ、
	 * ラッパ（.wp-block-table）の overflow-x: auto にスクロールさせる。
	 *
	 * 2列の情報カード（項目／内容）は対象外にしたいので、**列数で切る**。
	 * `thead th:nth-child(4)` があれば4列以上、という判定（:has は 912 行でも使用）。
	 */
	.post_content .wp-block-table:has( thead th:nth-child( 4 ) ) table {
		width: auto;
		min-width: 46rem;
	}

	/*
	 * セルの min-width は table-layout: auto では強制されない（ヒント扱い）ので、
	 * **表そのものの min-width（上の 46rem）が実際に幅を決めている。**
	 * これは短い列（予約・駐車場など）が潰れないようにするための下限。
	 */
	.post_content .wp-block-table:has( thead th:nth-child( 4 ) ) thead th,
	.post_content .wp-block-table:has( thead th:nth-child( 4 ) ) tbody td {
		min-width: 7.5em;
	}

	/*
	 * ★ 2列目に幅を寄せる。**縦に伸びていた原因はこの列**で、
	 * 比較一覧表では「院長が専門としてきた領域」、地区別一覧では「医院名」が入る。
	 * ここだけ広く取ると折り返しが減り、実測で表の高さが 949px → 543px になった
	 * （日野市の整形外科・iPhone 幅 375px。5列の地区別一覧は 948px → 562px）。
	 */
	.post_content .wp-block-table:has( thead th:nth-child( 4 ) ) thead th:nth-child( 2 ),
	.post_content .wp-block-table:has( thead th:nth-child( 4 ) ) tbody td:nth-child( 2 ) {
		min-width: 17em;
	}

	/*
	 * 1列目＝医院名。スワイプしても残らないと、どの院の行を見ているのか分からなくなる。
	 * ラッパがスクロールコンテナなので、**横方向の sticky は効く**
	 * （ページスクロールに対する thead の sticky は効かない。753 行のコメント参照）。
	 * 背景が不透明であることが前提。td:first-child と thead th に色が入っている。
	 */
	.post_content .wp-block-table:has( thead th:nth-child( 4 ) ) thead th:first-child,
	.post_content .wp-block-table:has( thead th:nth-child( 4 ) ) tbody td:first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		min-width: 8.5em;
		max-width: 11em;
		/* 継ぎ目の影が「右にまだ続く」ことの合図も兼ねる */
		box-shadow: 3px 0 6px -3px rgba( 20, 64, 111, 0.22 );
	}

	/* 見出しセルは折り返さない（列幅が読めなくなる） */
	.post_content .wp-block-table:has( thead th:nth-child( 4 ) ) thead th {
		z-index: 3;
	}

	/*
	 * ★2026-10-06：比較一覧表（1列目が院名で #c-N へのリンク）だけ、1列目の幅を確保する。
	 *
	 * 表は width: auto ＋継承の max-width: 100%（ラッパ幅）と上の min-width: 46rem が
	 * ぶつかり、**列数に関係なく 46rem ちょうどに固定されていた。** 6〜7列の比較表では
	 * セルの min-width が無視され、1列目（院名）が 40〜60px まで潰れて
	 * 院名が5行・1行 220px に折り返していた（週次巡回 clinic-seo-aeo-2026-10-06 H-4）。
	 *
	 * - max-width: none ＋列数に応じた min-width で、表を列数なりに広げる
	 * - 1列目は width（auto レイアウトでも列幅の下限として効く）で 8.5em を確保
	 * - 地区別の全院一覧（1列目が「地区」「町」）は短い1列目のままが読みやすいので対象外。
	 *   width を全列に掛ける案は、長文の列が 7.5em に縛られかえって縦長になったので不採用
	 * 実測（375px）：1列目 40〜60px → 102px、最も高い行 218px → 165px、表の高さ 13〜29% 減
	 */
	:is(.post_content .wp-block-table:has( tbody td:first-child a[href^="#c-"] ), .single-post .post_content .wp-block-table:has( tbody td:first-child > a[href^="http"] )):has( thead th:nth-child( 4 ) ) table {
		max-width: none;
	}

	:is(.post_content .wp-block-table:has( tbody td:first-child a[href^="#c-"] ), .single-post .post_content .wp-block-table:has( tbody td:first-child > a[href^="http"] )):has( thead th:nth-child( 6 ) ) table {
		min-width: 56rem;
	}

	:is(.post_content .wp-block-table:has( tbody td:first-child a[href^="#c-"] ), .single-post .post_content .wp-block-table:has( tbody td:first-child > a[href^="http"] )):has( thead th:nth-child( 7 ) ) table {
		min-width: 64rem;
	}

	:is(.post_content .wp-block-table:has( tbody td:first-child a[href^="#c-"] ), .single-post .post_content .wp-block-table:has( tbody td:first-child > a[href^="http"] )):has( thead th:nth-child( 4 ) ) thead th:first-child,
	:is(.post_content .wp-block-table:has( tbody td:first-child a[href^="#c-"] ), .single-post .post_content .wp-block-table:has( tbody td:first-child > a[href^="http"] )):has( thead th:nth-child( 4 ) ) tbody td:first-child {
		width: 8.5em;
		overflow-wrap: anywhere;
	}
}

/*
 * ★2026-10-14：比較一覧表の1列目（院名）を、2列目が長い表でも潰さない（SP・PC 共通）。
 *
 * 上の width: 8.5em は列の「希望幅」にしかならず、2列目の文が長い表では Chrome の
 * 自動レイアウトが 1列目を 51px（SP）／66px（PC）まで削っていた
 * （akiruno-kokyuki・週次巡回 clinic-seo-aeo-2026-10-13 H-2）。自動レイアウトでも
 * 列は中身の最小幅より細くならないので、院名リンク自体に最小幅を持たせる。
 * 1列目が #c-N リンクの表だけが対象（地区別の全院一覧は1列目が地区名なので当たらない）。
 * ★2026-10-20：23区などの記事は院名が公式サイトへの外部リンク（[院名](https://…)）で、
 * 上の判定に当たらず SP 1列目 65px のままだった（週次巡回 clinic-seo-aeo-2026-10-20 H-3）。
 * 記事（.single-post）に限って、1列目が外部リンクの表にも同じ指定を当てる。
 */
.post_content .wp-block-table:has( thead th:nth-child( 4 ) ) tbody td:first-child > a[href^="#c-"],
.single-post .post_content .wp-block-table:has( thead th:nth-child( 4 ) ) tbody td:first-child > a[href^="http"] {
	display: inline-block;
	min-width: 7.5em;
}

/* ==========================================================================
   ブランドA「学術誌」の適用（2026-08-02）
   --------------------------------------------------------------------------
   brand/README.md で決めた配色とタイポグラフィをサイト全体に反映する。

   **既存のトークンを再定義するだけで全体に効く。** 上のセクションで
   var(--clinic-*) を使って組んであるため、個別のルールを書き直さずに済む。
   戻したいときは、この :root の再定義を消せば元の青系に戻る。

   紺 #0E2B44 ／ 真鍮 #A87C3C ／ 紙 #F8F7F4
   グラデーションは使わない（brand/README.md の「だめな装飾」）。
   ========================================================================== */

:root {
	--clinic-accent: #1C4E7A;       /* リンク・罫のアクセント（紺・明） */
	--clinic-accent-dark: #0E2B44;  /* 見出し・ヒーロー地（紺・主） */
	--clinic-brass: #A87C3C;        /* 差し色。面には使わない */
	--clinic-brass-light: #C79A55;  /* 紺地の上の差し色 */
	--clinic-tint: #EFEBE2;         /* 紙の面。表のヘッダ・注記・アーカイブ導入 */
	--clinic-surface: #F8F7F4;      /* ページ地・カード地 */
	--clinic-border: #E4DFD4;       /* 枠・行罫 */
	--clinic-line: #EDEAE3;         /* さらに薄い区切り */
	--clinic-ink: #16202C;
	--clinic-muted: #5B6672;

	/* 明朝は見出しとロゴだけ。本文は可読性を優先してゴシックのまま。 */
	--clinic-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
}

/* --- 見出しを明朝に ----------------------------------------------------- */

.post_content h2,
.c-pageTitle,
.c-postTitle__ttl {
	font-family: var(--clinic-serif);
	letter-spacing: 0.02em;
}

/*
 * h2 の縦罫は紺のまま、真鍮の短い罫を下に添える。
 * 罫を2本にすると見出しが「章の始まり」に見える。
 */
.post_content h2 {
	position: relative;
	padding-bottom: 0.5em;
}

.post_content h2::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.2em;
	height: 2px;
	background: var(--clinic-brass);
}

/* --- 表：ヘッダを紙色に、下罫を真鍮に ----------------------------------- */

.post_content .wp-block-table thead th {
	border-bottom-color: var(--clinic-brass);
	color: var(--clinic-accent-dark);
}

.post_content .wp-block-table tbody td:first-child {
	background: #FCFBF8;
}

.post_content .wp-block-table tbody tr:hover td:first-child {
	background: var(--clinic-tint);
}

/* --- ヒーロー：グラデーションをやめる ----------------------------------- */

/*
 * 旧版は3段グラデーション＋放射状の光で「持たせて」いた。
 * 平面の紺と、真鍮の細い罫と、余白で組み直す。
 */
.clinic-hero {
	background-color: var(--clinic-accent-dark);
	background-image: none;
	border-radius: 12px;
	box-shadow: none;
	border-top: 3px solid var(--clinic-brass);
}

.clinic-hero::after {
	content: none;
}

.clinic-hero .clinic-hero__eyebrow {
	border-color: rgba(199, 154, 85, 0.55);
	color: var(--clinic-brass-light);
}

.clinic-hero .clinic-hero__title {
	font-family: var(--clinic-serif);
	letter-spacing: 0.03em;
	line-height: 1.7;
}

/* 見出しとリードのあいだに真鍮の短い罫を入れる（学術誌の扉の作り） */
.clinic-hero .clinic-hero__lead {
	position: relative;
	margin-top: 1.6em;
	padding-top: 1.5em;
}

.clinic-hero .clinic-hero__lead::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 2px;
	background: var(--clinic-brass);
}

/* --- ヘッダーのロゴ ----------------------------------------------------- */

/*
 * シンボル（扉）を背景画像で添える。SWELL のロゴ設定を使わずに済ませている
 * のは、テキストロゴのまま検索エンジンに名前を読ませたいため。
 *
 * ★SWELL のヘッダーは2つある。
 *     .l-header__logo    … ページ上部の通常ヘッダー
 *     .l-fixHeader__logo … スクロールすると出てくる固定ヘッダー（別のDOM）
 *   **両方に当てないと、スクロールした瞬間にロゴが消える。**
 *   2026-08-02 に固定ヘッダー側の指定漏れで、実際にそうなっていた。
 */
.l-header__logo,
.l-fixHeader__logo {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.l-header__logo::before,
.l-fixHeader__logo::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	background: url("../brand/logo-symbol.svg") no-repeat center / contain;
}

/* 固定ヘッダーは高さが低いので、シンボルも小さくする。 */
.l-fixHeader__logo::before {
	width: 26px;
	height: 26px;
}

.c-headLogo.-txt {
	font-family: var(--clinic-serif);
	letter-spacing: 0.03em;
}

/* 「by Med-Pro Doctors」。ロゴ画像ができるまでの暫定表記。 */
.l-header__logo::after,
.l-fixHeader__logo::after {
	content: "by Med-Pro Doctors";
	order: 3;
	margin-top: 0;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	color: var(--clinic-brass);
	white-space: nowrap;
}

/* 固定ヘッダーは横幅に余裕がないので添え書きは出さない。 */
.l-fixHeader__logo::after {
	display: none;
}

@media (max-width: 782px) {
	.l-header__logo::after {
		display: none;
	}

	.l-header__logo::before,
	.l-fixHeader__logo::before {
		width: 26px;
		height: 26px;
	}
}

/* ==========================================================================
   表示速度（2026-08-02・PageSpeed Insights の指摘への対応）
   --------------------------------------------------------------------------
   PSI（モバイル）のラボ計測は パフォーマンス90／ユーザー補助100／
   おすすめの方法100／SEO100。TBT 0ms・CLS 0 で、残っていた指摘のうち
   **CSSで直せるのは「フォント表示」だけ**だったので、それに対応する。

   親テーマの swell-icons.css は @font-face に font-display を書いていない。
   既定は auto ＝ ブロック期間中アイコンが表示されない（PSI の指摘 110ms）。
   **同じ font-family を後から宣言して上書きする。**

   ★親テーマがフォントの置き場所やハッシュを変えたら、ここも直す必要がある。
     パスが変わると @font-face が解決できず、アイコンが出なくなる。
     `themes/swell/assets/fonts/` を確認すること。
   ========================================================================== */

@font-face {
	font-family: icomoon;
	font-style: normal;
	font-weight: 400;
	/* ここだけが親テーマとの違い。読み込み中は代替で描いてから差し替える。 */
	font-display: swap;
	src:
		url("../../../swell/assets/fonts/icomoon.woff2") format("woff2"),
		url("../../../swell/assets/fonts/icomoon.woff") format("woff"),
		url("../../../swell/assets/fonts/icomoon.ttf") format("truetype");
}

/* ==========================================================================
   トップページの「最新の投稿」ブロック（2026-08-04）
   --------------------------------------------------------------------------
   **アイキャッチが左右で切れていた。** 原因は2つ。
     1. ブロックが `featuredImageSizeSlug: "thumbnail"` を指定していた。
        WordPress の `thumbnail` は **150×150 のハードクロップ**なので、
        1200×630 のアイキャッチは中央だけが正方形に切り出される
        （「立川市の精神科…」が「川市の精神」になっていた）。
        → 固定ページ home（id=18）の**ブロック属性を `large` に変えた。**
     2. 既定のレイアウトが縦積みで、画像の枠が正方形のままだった。
        → **カードを横並びにして、枠に 1200/630 の比率を持たせる。**

   `height: 100% !important` を使っているのは、**lazysizes が読み込み前に
   `style="height: 1px"` をインラインで書く**ため。インラインに勝つ必要がある。
   ========================================================================== */

.post_content .wp-block-latest-posts__list,
.wp-block-latest-posts__list {
	list-style: none;
	padding-left: 0;
}

.wp-block-latest-posts__list > li {
	display: flex;
	gap: 1.25em;
	align-items: flex-start;
	padding: 1.1em 0;
	border-bottom: 1px solid var(--clinic-line, #e4dfd4);
}

.wp-block-latest-posts__list > li:last-child {
	border-bottom: 0;
}

/* 画像の枠。**比率をここで持つ**ので、読み込み前も高さが確定してレイアウトが跳ねない。 */
.wp-block-latest-posts__featured-image {
	flex: 0 0 clamp(190px, 30%, 280px);
	margin: 0;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	border-radius: var(--clinic-radius, 6px);
	box-shadow: var(--clinic-shadow, 0 1px 3px rgba(20, 64, 111, 0.12));
}

.wp-block-latest-posts__featured-image a,
.wp-block-latest-posts__featured-image img {
	display: block;
	width: 100%;
	height: 100% !important;   /* lazysizes のインライン height:1px に勝たせる */
	object-fit: cover;
	margin: 0;
}

.wp-block-latest-posts__post-title {
	display: block;
	font-size: 1.02rem;
	line-height: 1.6;
	font-weight: 700;
}

.wp-block-latest-posts__post-date {
	display: block;
	margin-top: 0.5em;
	font-size: 0.82rem;
	color: var(--clinic-muted, #5b6672);
}

/* スマホは縦積みに戻す。横並びだと画像が小さくなりすぎて文字が読めない。 */
@media (max-width: 599px) {
	.wp-block-latest-posts__list > li {
		display: block;
	}

	.wp-block-latest-posts__featured-image {
		width: 100%;
		margin-bottom: 0.7em;
	}
}

/* --- クリニックニュース（フェーズ1） ----------------------------------- */

.clinic-news-eyebrow {
	margin: 0 0 0.5em;
	font-size: 0.85rem;
	color: var(--clinic-muted);
}

.clinic-news-eyebrow a {
	color: var(--clinic-accent);
	font-weight: 700;
}

.clinic-news-eyebrow__type {
	margin-left: 0.75em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--clinic-tint);
	font-weight: 700;
}

.clinic-news-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0 0 1.5em;
	font-size: 0.85rem;
	color: var(--clinic-muted);
}

.clinic-news-eyecatch img {
	border-radius: var(--clinic-radius);
}

.clinic-news-cta__button {
	display: inline-block;
	padding: 0.75em 1.5em;
	border-radius: var(--clinic-radius-sm);
	background: var(--clinic-accent);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.clinic-news-correction {
	margin-top: 2em;
	font-size: 0.85rem;
	color: var(--clinic-muted);
}

.clinic-news-basic-info__list {
	margin: 0;
}

.clinic-news-basic-info__row {
	display: flex;
	gap: 1em;
	padding: 0.5em 0;
	border-top: 1px solid var(--clinic-line);
	font-size: 0.9rem;
}

.clinic-news-basic-info__row:first-child {
	border-top: 0;
}

.clinic-news-basic-info__row dt {
	flex: 0 0 6em;
	font-weight: 700;
	color: var(--clinic-muted);
}

.clinic-news-basic-info__row dd {
	margin: 0;
	flex: 1 1 auto;
	word-break: break-all;
}

.clinic-news-post-cta {
	margin-bottom: 1.5em;
}

.clinic-news-post-cta__button {
	display: inline-block;
	padding: 0.65em 1.5em;
	border: 1px solid var(--clinic-accent);
	border-radius: var(--clinic-radius-sm);
	color: var(--clinic-accent) !important;
	font-weight: 700;
	text-decoration: none !important;
}

.clinic-news-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1em;
	margin-bottom: 2em;
	padding: 1em 1.25em;
	border: 1px solid var(--clinic-border);
	border-radius: var(--clinic-radius);
	background: var(--clinic-surface);
}

.clinic-news-filter label {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	font-size: 0.85rem;
	font-weight: 700;
}

.clinic-news-filter__submit {
	padding: 0.5em 1.25em;
	border: 0;
	border-radius: var(--clinic-radius-sm);
	background: var(--clinic-brass);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.clinic-news-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25em;
}

.clinic-news-card {
	margin-block: 0;
	box-shadow: var(--clinic-shadow);
}

.clinic-news-card__link {
	color: inherit;
	text-decoration: none !important;
}

.clinic-news-card__thumb img {
	border-radius: var(--clinic-radius-sm);
	margin-bottom: 0.5em;
}

.clinic-news-card__meta {
	display: flex;
	gap: 0.75em;
	margin: 0.5em 0;
	font-size: 0.8rem;
	color: var(--clinic-muted);
}

.clinic-news-card__excerpt {
	font-size: 0.9rem;
	color: var(--clinic-ink);
}

/* --- クリニックニュース自主投稿フォーム（フェーズ2） --------------------- */

.clinic-news-submit-form p {
	margin: 0 0 1.25em;
}

.clinic-news-submit-form label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 700;
}

.clinic-news-submit-form input[type="text"],
.clinic-news-submit-form input[type="email"],
.clinic-news-submit-form input[type="url"],
.clinic-news-submit-form select,
.clinic-news-submit-form textarea {
	width: 100%;
	padding: 0.6em 0.8em;
	border: 1px solid var(--clinic-border);
	border-radius: var(--clinic-radius-sm);
	background: #fff;
	font-size: 1rem;
}

.clinic-news-submit-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
}

.clinic-news-submit-consent input[type="checkbox"] {
	margin-top: 0.3em;
}

.clinic-news-submit-form__button {
	padding: 0.75em 2em;
	border: 0;
	border-radius: var(--clinic-radius-sm);
	background: var(--clinic-accent);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

/* ハニーポット欄。CSSで隠すが display:none にはしない
   （一部のボットは display:none を検知して回避するため、画面外に飛ばす）。 */
.clinic-news-submit-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.clinic-news-submit-thanks {
	padding: 1.5em;
	border: 1px solid var(--clinic-border);
	border-radius: var(--clinic-radius);
	background: var(--clinic-tint);
}

/* --- クリニックPR ------------------------------------------------------- */

.clinic-pr-disclosure {
	margin: 0 0 1.5em;
	padding: 0.75em 1em;
	border: 1px solid var(--clinic-border);
	border-radius: var(--clinic-radius-sm);
	background: var(--clinic-tint);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--clinic-muted);
}

.clinic-pr-eyebrow {
	margin: 0 0 0.5em;
	font-size: 0.85rem;
	color: var(--clinic-muted);
}

.clinic-pr-eyebrow a {
	color: var(--clinic-accent);
	font-weight: 700;
}

.clinic-pr-eyebrow__tag {
	margin-left: 0.75em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--clinic-tint);
	font-weight: 700;
}

/* タイトルに【PR】を入れない代わりに、ハッシュタグ風のタグでPRであることを示す
   （景品表示法のステマ規制対応。開示バナー＝inc/pr-disclosure.phpが主。
   これは一覧・記事上部でひと目で気づけるようにする補助）。 */
.clinic-pr-eyebrow__pr-tag {
	margin-left: 0.75em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--clinic-brass);
	color: #fff;
	font-weight: 700;
}

.clinic-pr-eyecatch img {
	border-radius: var(--clinic-radius);
}

.clinic-pr-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	margin: 1.5em 0;
	text-align: center;
}

.clinic-pr-mark__svg {
	width: 140px;
	height: 140px;
}

.clinic-pr-mark__caption {
	max-width: 24em;
	margin: 0;
	font-size: 0.75rem;
	color: var(--clinic-muted);
}

.clinic-pr-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0 0 1.5em;
	font-size: 0.85rem;
	color: var(--clinic-muted);
}

.clinic-pr-cta {
	margin-top: 1.5em;
}

.clinic-pr-cta__button {
	display: inline-block;
	padding: 0.75em 1.5em;
	border-radius: var(--clinic-radius-sm);
	background: var(--clinic-accent);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.clinic-pr-basic-info__list {
	margin: 0;
}

.clinic-pr-basic-info__row {
	display: flex;
	gap: 1em;
	padding: 0.5em 0;
	border-top: 1px solid var(--clinic-line);
	font-size: 0.9rem;
}

.clinic-pr-basic-info__row:first-child {
	border-top: 0;
}

.clinic-pr-basic-info__row dt {
	flex: 0 0 6em;
	font-weight: 700;
	color: var(--clinic-muted);
}

.clinic-pr-basic-info__row dd {
	margin: 0;
	flex: 1 1 auto;
	word-break: break-all;
}

.clinic-pr-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1em;
	margin-bottom: 2em;
	padding: 1em 1.25em;
	border: 1px solid var(--clinic-border);
	border-radius: var(--clinic-radius);
	background: var(--clinic-surface);
}

.clinic-pr-filter label {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	font-size: 0.85rem;
	font-weight: 700;
}

.clinic-pr-filter__submit {
	padding: 0.5em 1.25em;
	border: 0;
	border-radius: var(--clinic-radius-sm);
	background: var(--clinic-brass);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.clinic-pr-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25em;
}

.clinic-pr-card {
	margin-block: 0;
	box-shadow: var(--clinic-shadow);
}

.clinic-pr-card__link {
	color: inherit;
	text-decoration: none !important;
}

.clinic-pr-card__thumb img {
	border-radius: var(--clinic-radius-sm);
	margin-bottom: 0.5em;
}

.clinic-pr-card__meta {
	display: flex;
	gap: 0.75em;
	margin: 0.5em 0;
	font-size: 0.8rem;
	color: var(--clinic-muted);
}

.clinic-pr-card__excerpt {
	font-size: 0.9rem;
	color: var(--clinic-ink);
}

/* --- クリニックPR：対話形式（.clinic-enchanの吹き出しパターンを流用） --------- */

.clinic-pr-dialogue__row {
	display: flex;
	gap: 0.9em;
	align-items: flex-start;
	margin-block: 1.75em;
}

.clinic-pr-dialogue__row--doctor {
	flex-direction: row-reverse;
}

.clinic-pr-dialogue__avatar {
	flex: 0 0 56px;
	text-align: center;
}

.clinic-pr-dialogue__img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--clinic-surface);
	object-fit: contain;
}

.clinic-pr-dialogue__img--empty {
	border: 1px dashed var(--clinic-border);
}

.clinic-pr-dialogue__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--clinic-accent-dark);
	color: var(--clinic-surface);
	font-family: var(--clinic-serif);
	font-size: 1.3rem;
}

.clinic-pr-dialogue__name {
	display: block;
	margin-top: 0.25em;
	font-size: 0.7rem;
	line-height: 1.3;
	color: var(--clinic-muted);
}

.clinic-pr-dialogue__bubble {
	position: relative;
	flex: 1 1 auto;
	padding: 1em 1.2em;
	border: 1px solid var(--clinic-border);
	border-radius: 10px;
	background: var(--clinic-surface);
	font-size: 0.92rem;
	line-height: 1.85;
}

.clinic-pr-dialogue__row--doctor .clinic-pr-dialogue__bubble {
	background: var(--clinic-tint);
}

.clinic-pr-dialogue__bubble::before,
.clinic-pr-dialogue__bubble::after {
	content: "";
	position: absolute;
	top: 20px;
	width: 0;
	height: 0;
	border-style: solid;
}

.clinic-pr-dialogue__row--editorial .clinic-pr-dialogue__bubble::before {
	left: -9px;
	border-width: 8px 9px 8px 0;
	border-color: transparent var(--clinic-border) transparent transparent;
}

.clinic-pr-dialogue__row--editorial .clinic-pr-dialogue__bubble::after {
	left: -8px;
	border-width: 8px 9px 8px 0;
	border-color: transparent var(--clinic-surface) transparent transparent;
}

.clinic-pr-dialogue__row--doctor .clinic-pr-dialogue__bubble::before {
	right: -9px;
	border-width: 8px 0 8px 9px;
	border-color: transparent transparent transparent var(--clinic-border);
}

.clinic-pr-dialogue__row--doctor .clinic-pr-dialogue__bubble::after {
	right: -8px;
	border-width: 8px 0 8px 9px;
	border-color: transparent transparent transparent var(--clinic-tint);
}

.clinic-pr-dialogue__bubble p {
	margin: 0;
}

.clinic-pr-dialogue__bubble p + p {
	margin-top: 0.7em;
}

@media (max-width: 599px) {
	.clinic-pr-dialogue__row {
		gap: 0.6em;
	}

	.clinic-pr-dialogue__avatar {
		flex-basis: 44px;
	}

	.clinic-pr-dialogue__img,
	.clinic-pr-dialogue__initial {
		width: 44px;
		height: 44px;
	}

	.clinic-pr-dialogue__initial {
		font-size: 1.1rem;
	}
}

/* ==========================================================================
   2026-10-06 週次巡回（clinic-seo-aeo-2026-10-06）の表示の小修正
   ========================================================================== */

/*
 * エリア・診療科カードは枠全体と矢印が押せるように見えるのに、リンクは文字の
 * 高さ（実測 18px）しかなかった。li は 6. で position: relative 済みなので、
 * a の疑似要素をカード全体に広げる。
 */
li.clinic-areas__item a::before,
li.clinic-depts__item a::before,
li.clinic-areaDepts__item a::before {
	content: "";
	position: absolute;
	inset: 0;
}

/*
 * 12px を下回っていた補足文字（root 13.5px のスマホで 8〜11.5px）。
 * 見た目の階層は保ったまま、下限だけ 12px にそろえる。
 * ヘッダーの「by Med-Pro Doctors」は横幅の都合で対象外。
 */
.clinic-byline,
.clinic-author__navi,
.clinic-enchan__name,
.clinic-pr-dialogue__name,
.clinic-hero .clinic-hero__eyebrow,
li.clinic-areas__item.is-pending small,
li.clinic-depts__item.is-pending small,
.wpcf7 .clinic-form__req {
	font-size: max( 0.85rem, 12px );
}

/* 表のセルで英字の院名が「CL／INIC」と単語の途中で割れていた（千代田区一覧）。 */
.post_content .wp-block-table tbody td {
	word-break: normal;
	overflow-wrap: break-word;
	text-align: left;
}

@media (max-width: 599px) {
	/*
	 * サイト名が「…クリ／ニック」で2行に割れていた。実測：ロゴ枠 243px に対し
	 * 18.75px では1行 約290px 必要。15px 前後なら1行に収まる。
	 */
	.c-headLogo.-txt .c-headLogo__link,
	.c-headLogo.-txt {
		white-space: nowrap;
		font-size: clamp( 12px, 3.9vw, 15px );
	}
}

/* ==========================================================================
   トップ（固定ページ18・.mp-top）のスマホのファーストビュー（2026-10-14）
   --------------------------------------------------------------------------
   2026-10-08 の作り直しで、SP ではイラスト（約330px）が見出しより先に並び、主導線の
   「探す」ボタンが y=880〜936 とファーストビュー（812px）の外に出ていた
   （週次巡回 clinic-seo-aeo-2026-10-13 M-6）。ページ本文の <style> は触らず、
   ここで SP だけイラストを検索フォームの後ろへ回し、上下の余白を詰める。
   .mp-top を前に付けて本文側の規則（.mp-art{order:-1}）より詳細度を上げている。
   あわせて「準備中の地域」の開閉とエリアのチップをタップ目標 44px にそろえる。
   ========================================================================== */
@media (max-width: 640px) {
	.mp-top .mp-hero .mp-in {
		padding-block: 16px 40px;
		gap: 20px;
	}

	.mp-top .mp-art {
		order: 0;
		max-width: 260px;
	}

	.mp-top .mp-hero h1 {
		margin-top: 12px;
	}

	.mp-top .mp-search {
		margin-top: 20px;
	}
}

/*
 * ★2026-10-20：見出しの2行目「医師はここを」「すすめる。」を常に別の行にする（SP・PC 共通）。
 * SP では代替フォントだと2つが1行に収まり、Zen Maru Gothic（display=swap）が届くと幅が増えて
 * 3行に折り返し、下の検索フォームが 42px 押し下げられていた（CLS 0.143・週次巡回
 * clinic-seo-aeo-2026-10-20 CLN-E11）。PC は元から3行。どちらのフォントでも3行になり、ずれが出ない。
 */
.mp-top .mp-hero h1 .nw {
	display: block;
}

.mp-top .mp-soon summary,
.mp-top .clinic-areas__item a {
	min-height: 44px;
}

/* 監修者プロフィールページ（/supervisor/）の顔写真（2026-10-20・inc/supervisor-box.php） */
.clinic-supervisor-page__figure {
	margin: 0 0 1.5em;
}

.clinic-supervisor-page__photo {
	display: block;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
}