@charset "utf-8";
/* ==========================================================================
   Components — 全ページ共通の部品

   ここが唯一の定義元。top.css は TOP 固有のセクション（.p-fv 〜 .p-news）だけを持つ。
   値は Figma モックアップ（1440基準）の実測、色は書き出しSVGの fill 値が出典。
   ========================================================================== */

/* ==========================================================================
   セクション見出し（背面ウォーターマーク + 欧文 + 和文サブ）
   ========================================================================== */

.c-sec-title {
	position: relative;
	text-align: center;
}

.c-sec-title__watermark {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	display: block;
	font-family: var(--f-en);
	/* サイズはセクションごとに --wm-size / --wm-ls で上書きする */
	font-size: min(var(--wm-size, 177px), 12.3vw);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--wm-ls, 0.12em);
	white-space: nowrap;
	color: rgba(57, 53, 59, 0.055);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.c-sec-title__en {
	position: relative;
	z-index: 1;
	font-family: var(--f-en);
	font-size: clamp(34px, 5.4vw, 78px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.12em;
	margin-right: -0.12em; /* 末尾の字送り分を戻して中央を合わせる */
	color: var(--c-ink);
}

.c-sec-title__ja {
	position: relative;
	z-index: 1;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--c-gold-dark);
}

/* 肩に置く2行の小欧文。頭文字だけ金にする装飾はデザイン踏襲 */
.c-sec-title__side {
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	z-index: 1;
	font-family: var(--f-en);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.14em;
	text-align: left;
	white-space: pre-line;
	color: var(--c-ink);
}

.c-sec-title__side::first-letter { color: var(--c-gold-dark); }

.c-sec-title--side-right .c-sec-title__side {
	left: auto;
	right: 0;
	text-align: right;
}

@media (max-width: 900px) {
	.c-sec-title__side { display: none; }
}

/* ==========================================================================
   VIEW MORE
   ========================================================================== */

.c-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-family: var(--f-en);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.14em;
}

.c-more--dark {
	min-width: 200px;
	height: 50px;
	background: var(--c-ink);
	color: var(--c-wh);
	border-bottom: 2px solid var(--c-gold);
}

.c-more--dark::after {
	content: "";
	width: 30px;
	height: 1px;
	background: currentColor;
	transition: width var(--dur) var(--ease);
}

.c-more--dark:hover {
	color: var(--c-wh);
	background: var(--c-gold-dark);
}

.c-more--dark:hover::after { width: 42px; }

/* 罫線 + 金丸矢印（CASE / NEWS の VIEW MORE） */
.c-more--line {
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--c-gold-dark);
	font-size: 12px;
	color: var(--c-ink);
}

.c-more--line::after {
	content: "→";
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: var(--c-gold);
	color: var(--c-wh);
	font-size: 11px;
	font-family: var(--f-ja);
	line-height: 1;
}

/* ==========================================================================
   CTA（電話 / WEB予約 / LINE予約）
   ========================================================================== */

.c-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 96px;
	background: var(--c-wh);
	color: var(--c-ink);
	padding: 16px 24px;
	text-align: center;
}

.c-cta__main {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--f-en);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
}

.c-cta__main--ja {
	font-family: var(--f-ja);
	font-size: 24px;
	font-weight: 700;
}

.c-cta__note {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
}

.c-cta__icon-svg {
	width: 40px;
	height: 40px;
	flex: none;
}

/* SVGを持たない箇所のフォールバック（金丸だけ） */
.c-cta__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: var(--c-gold);
	color: var(--c-wh);
	flex: none;
}

.c-cta:hover { color: var(--c-gold-dark); }

@media (max-width: 767px) {
	.c-cta { min-height: 76px; padding: 12px 16px; }
	.c-cta__main { font-size: 22px; gap: 8px; }
	.c-cta__main--ja { font-size: 17px; }
	.c-cta__icon-svg,
	.c-cta__icon { width: 30px; height: 30px; }

	/* ドロワー内のカードはデザイン実測 326x88 */
	.c-cta--card { min-height: 88px; }
}

/* ==========================================================================
   チェックリスト（INFORMATION の特徴）
   ========================================================================== */

.c-checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 20px;
}

.c-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-height: 70px;
	padding-block: 20px 0;
	border-bottom: 1px solid var(--c-bdr);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.c-checklist__item::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	background: var(--icon-check-fill) center / contain no-repeat;
}

@media (max-width: 767px) {
	.c-checklist { grid-template-columns: 1fr; }
	.c-checklist__item { font-size: 16px; min-height: 0; padding-block: 14px; gap: 12px; }
	.c-checklist__item::before { width: 18px; height: 18px; }
}

/* ==========================================================================
   医院情報カード（TOP中間 と ページ末で共通）
   ========================================================================== */

.p-clinic {
	background: var(--c-base);
	padding-block: 119px;
}

.c-clinic {
	background: var(--c-wh);
	min-height: 786px;
	padding: 62px 76px 64px;
}

.c-clinic__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	margin-bottom: 44px;
}

.c-clinic__head::before,
.c-clinic__head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-ink);
}

.c-clinic__name {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	white-space: nowrap;
}

.c-clinic__name-en {
	display: block;
	margin-top: 6px;
	font-family: var(--f-en);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--c-txt-sub);
}

.c-clinic__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.c-clinic__dl {
	display: grid;
	grid-template-columns: 84px 1fr;
	/* align-items は既定の stretch のまま。center にすると dt と dd の高さが
	   揃わず、下罫線が段違いになる（ラベルの縦センターは dt 側の flex で取る）。 */
}

.c-clinic__dl dt,
.c-clinic__dl dd {
	margin: 0;
	padding-block: 16px;
	border-bottom: 1px solid var(--c-bdr);
	font-size: 15px;
	line-height: 1.7;
}

.c-clinic__dl dt {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	color: var(--c-txt-sub);
}

.c-clinic__tel {
	font-family: var(--f-en);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.c-clinic__map { line-height: 0; }

.c-clinic__map img,
.c-clinic__map iframe {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
	border: 0;
}

@media (max-width: 900px) {
	.c-clinic { padding: 40px 24px 48px; }
	.c-clinic__body { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 767px) {
	/* デザイン: セクション914px / カード790px、上下余白62px */
	.p-clinic { padding-block: 62px; }

	.c-clinic {
		min-height: 788px;
		padding: 20px 16px 20px;
	}

	.c-clinic__name { font-size: 19px; }
	.c-clinic__name-en { margin-top: 3px; font-size: 10px; }
	.c-clinic__head { gap: 14px; margin-bottom: 12px; }
	.c-clinic__body { grid-template-columns: 1fr; gap: 10px; }
	.c-clinic__dl { grid-template-columns: 74px 1fr; }
	.c-clinic__dl dt, .c-clinic__dl dd { font-size: 14px; padding-block: 6px; }
	.c-clinic__dl dt { justify-content: flex-start; }
	.c-clinic__tel { font-size: 26px; }

	.c-clinic__map img,
	.c-clinic__map iframe {
		min-height: 0;
		aspect-ratio: 326 / 188;
	}

	/* SPは診療時間表のヘッダーが金地（PCは墨） */
	.c-hours { margin-top: 16px; }
	.c-hours thead th { background: var(--c-gold-dark); }
	.c-hours th, .c-hours td { font-size: 13px; padding: 5px 2px; }
	.c-hours tbody th { padding-left: 0; text-align: center; white-space: normal; line-height: 1.5; }
	.c-hours__note { font-size: 9px; }
	.c-hours__caption { margin-top: 6px; }
}

/* ==========================================================================
   診療時間表
   ========================================================================== */

.c-hours {
	margin-top: 28px;
}

.c-hours th,
.c-hours td {
	text-align: center;
	font-size: 14px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--c-bdr);
}

.c-hours thead th {
	background: var(--c-ink);
	color: var(--c-wh);
	font-weight: 500;
	border-bottom: 0;
	padding-block: 12px;
}

.c-hours tbody th {
	font-weight: 400;
	white-space: nowrap;
	text-align: left;
	padding-left: 14px;
}

.c-hours__note {
	display: block;
	font-size: 10px;
	line-height: 1.3;
	color: var(--c-txt-sub);
}

.c-hours__caption {
	margin-top: 14px;
	font-size: 12px;
	color: var(--c-txt-sub);
}

/* ==========================================================================
   RESERVATION バンド（濃色地・全ページ共通）
   ========================================================================== */

.p-reserve {
	position: relative;
	display: grid;
	align-content: center;
	min-height: 391px;
	background: var(--c-ink-deep) url("../img/reserve-bg.jpg") center / cover no-repeat;
	color: var(--c-wh);
	text-align: center;
}

.p-reserve__eyebrow {
	font-family: var(--f-en);
	font-size: 13px;
	letter-spacing: 0.2em;
}

.p-reserve__title {
	margin-top: 14px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.p-reserve__cta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 36px;
}

.p-reserve .c-cta { min-height: 142px; } /* デザイン実測 */

@media (max-width: 767px) {
	/* デザイン: 338px。背景もSP用の書き出しに差し替える */
	.p-reserve {
		min-height: 338px;
		padding-block: 0;
		background-image: url("../img/reserve-bg-sp.jpg");
	}

	.p-reserve__eyebrow { font-size: 12px; }
	.p-reserve__title { margin-top: 8px; font-size: 24px; }
	.p-reserve__cta { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
	.p-reserve .c-cta { min-height: 82px; }
}

/* ==========================================================================
   パンくず
   ========================================================================== */

.c-breadcrumb {
	padding-block: 16px;
	background: var(--c-base);
}

.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
	color: var(--c-txt-sub);
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
	content: "/";
	margin-right: 8px;
	color: var(--c-bdr);
}

/* ==========================================================================
   記事リスト（NEWS / BLOG）
   ========================================================================== */

.c-postlist__item {
	display: grid;
	grid-template-columns: 96px auto 1fr 30px;
	align-items: center;
	gap: 0 16px;
	padding-block: 16px;
	border-bottom: 1px solid var(--c-bdr);
}

.c-postlist__item:first-child { padding-top: 0; }

.c-postlist__date {
	font-family: var(--f-en);
	font-size: 14px;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}

.c-postlist__cat {
	justify-self: start;
	padding: 2px 12px;
	border: 1px solid var(--c-gold);
	font-size: 11px;
	color: var(--c-gold-dark);
	white-space: nowrap;
}

.c-postlist__title {
	grid-column: 1 / -1;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
}

.c-postlist__arrow {
	grid-row: 1;
	grid-column: 4;
	justify-self: end;
	width: 30px;
	height: 1px;
	background: var(--c-ink);
}

@media (max-width: 767px) {
	.c-postlist__item { grid-template-columns: auto auto 1fr; padding-block: 14px; }
	.c-postlist__arrow { display: none; }
	.c-postlist__date { font-size: 12px; }
	.c-postlist__title { font-size: 13px; }
}

/* ==========================================================================
   下層ページ共通
   ========================================================================== */

/* 本文（エディタ出力） */
.c-entry > * + * { margin-top: 1.6em; }

.c-entry h2 {
	font-size: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--c-gold);
}

.c-entry h3 {
	font-size: 20px;
	padding-left: 12px;
	border-left: 3px solid var(--c-gold);
}

.c-entry a { color: var(--c-gold-dark); text-decoration: underline; }
.c-entry ul { list-style: disc; padding-left: 1.4em; }
.c-entry ol { list-style: decimal; padding-left: 1.4em; }
.c-entry table th,
.c-entry table td { border: 1px solid var(--c-bdr); padding: 12px; }
.c-entry table th { background: var(--c-beige-light); }

.p-single__head { margin-bottom: 24px; }

.p-single__title {
	margin-top: 8px;
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 700;
	line-height: 1.6;
}

.p-single__thumb { margin: 0 0 32px; }

.p-single__nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 56px;
	font-size: 13px;
}

/* ページネーション */
.c-pager {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 56px;
}

.c-pager .page-numbers {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-bdr);
	font-family: var(--f-en);
	font-size: 13px;
}

.c-pager .page-numbers.current,
.c-pager a.page-numbers:hover {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-wh);
}

/* 投稿が無いときの1行 */
.c-postlist__item--empty {
	grid-template-columns: 1fr;
	color: var(--c-txt-sub);
}

.c-postlist__item--empty .c-postlist__title {
	grid-column: 1;
	margin-top: 0;
}