@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;
}