/* =========================================================
   さこ歯科医院 — site.css (2026 redesign)
   Mobile-first · no framework
   ========================================================= */

:root {
	--color-bg: #ffffff;
	--color-bg-soft: #fdf4f7;
	--color-bg-warm: #fff5f8;
	--color-text: #5b4d44;
	--color-text-muted: #7a6670;
	--color-accent: #e5658a;
	--color-accent-dark: #d24d74;
	--color-border: #f0d8e0;
	--color-focus: #5b4d44;
	--color-white: #ffffff;
	--color-overlay: rgba(45, 36, 30, 0.42);

	--font-sans: kozuka-gothic-pro, "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--font-serif: kozuka-mincho-pr6n, "Hiragino Mincho ProN", "Yu Mincho", serif;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 5.5rem;

	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 0;

	--shadow-soft: 0 8px 28px rgba(229, 101, 138, 0.08);
	--header-h: 4.25rem;
	--container: 68rem;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--line: 1.8;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: var(--line);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--color-accent);
}

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

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

.skip-link {
	position: absolute;
	left: var(--space-4);
	top: -100px;
	z-index: 10000;
	padding: var(--space-3) var(--space-4);
	background: var(--color-text);
	color: var(--color-white);
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.skip-link:focus {
	top: var(--space-3);
}

/* ---------- Layout ---------- */

.container {
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
}

.section {
	padding-block: var(--space-7);
}

@media (min-width: 768px) {
	.section {
		padding-block: var(--space-8);
	}
}

.section--soft {
	background: var(--color-bg-soft);
}

/* 固定写真のシースルー背景（旧 #plans:before 相当） */
.section--bg {
	position: relative;
	isolation: isolate;
	background: transparent;
	overflow: hidden;
}

.section--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	background-image: url(../../images/bg.jpg);
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	opacity: 0.4;
	pointer-events: none;
}

/* 文字の可読性のための薄いピンクベール（奥の写真は透ける） */
.section--bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(255, 250, 252, 0.72);
	pointer-events: none;
}

.section--bg > * {
	position: relative;
	z-index: 1;
}

/* iOS 等で background-attachment: fixed が効きにくい場合のフォールバック */
@media (max-width: 767px) {
	.section--bg::before {
		background-attachment: scroll;
		background-size: cover;
		background-position: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.section--bg::before {
		background-attachment: scroll;
	}
}

/* 別背景 bg02（旧 #introduction 相当・フル表示） */
.section--bg-02 {
	position: relative;
	background-color: #fff;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.49019607843137253) 13.45%, #fff 43.28%),
		url("../../images/bg03.jpg");
	background-size: 100% auto, 100% auto;
	background-repeat: no-repeat, no-repeat;
	background-position: center top, center top;
}

/* section--bg と併用時は、bg.jpg の透過レイヤーを使わない */
.section--bg.section--bg-02 {
	isolation: auto;
	background-color: #fff;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.49019607843137253) 13.45%, #fff 43.28%),
		url("../../images/bg03.jpg");
	background-size: 100% auto, 100% auto;
	background-repeat: no-repeat, no-repeat;
	background-position: center top, center top;
	overflow: visible;
}

.section--bg.section--bg-02::before,
.section--bg.section--bg-02::after {
	content: none;
	display: none;
}

.section--bg.section--bg-02 > * {
	position: relative;
	z-index: auto;
}

@media (max-width: 767px) {
	.section--bg-02,
	.section--bg.section--bg-02 {
		background-size: cover, cover;
		background-position: center, center;
	}
}

.section__head {
	margin-bottom: var(--space-6);
	max-width: 42rem;
}

.section__head--center {
	margin-inline: auto;
	text-align: center;
}

.section__eyebrow {
	margin: 0 0 var(--space-2);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-accent);
}

.section__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(0.5rem, 2.6vw + 0.8rem, 1.6rem);
	line-height: 1.45;
	letter-spacing: 0.08em;
	color: var(--color-text);
}

.section__lead {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1.02rem;
	text-align: left;
}

@media (max-width: 899px) {
	.section__lead {
		font-size: 0.9rem;
	}
}

/* 透かし背景（section--bg）上の見出し・リードの可読性 */
.section--bg .section__title,
.section--bg .section__lead,
.section--bg .section__eyebrow {
	text-shadow:
		0 0 2px #fff,
		0 0 8px #fff,
		0 0 14px rgba(255, 255, 255, 0.95),
		0 1px 0 #fff,
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff;
}

@media (max-width: 899px) {
	.section--bg .section__title {
		font-size: 1.2rem;
	}

	.section--bg .section__lead {
		font-size: 0.9rem;
	}

	.section--bg .section__eyebrow {
		font-size: 0.8rem;
	}
}

.stack > * + * {
	margin-top: var(--space-4);
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 2.875rem;
	padding: 0.7rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:hover {
	color: var(--color-white);
	text-decoration: none;
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background: var(--color-accent);
	color: var(--color-white);
}

.btn--primary:hover {
	background: var(--color-accent-dark);
	color: var(--color-white);
}

.btn--outline {
	background: transparent;
	border-color: var(--color-text);
	color: var(--color-text);
}

.btn--outline:hover {
	background: var(--color-text);
	color: var(--color-white);
}

/* 戻る系アウトラインボタン：左向き三角アイコン */
.page-actions .btn--outline::before,
.btn--back::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 0.4em;
	border-style: solid;
	border-width: 0.32em 0.48em 0.32em 0;
	border-color: transparent currentColor transparent transparent;
	flex-shrink: 0;
	vertical-align: 0.05em;
}

@media (max-width: 899px) {
	.page-actions .btn--outline::before,
	.btn--back::before {
		margin-right: 0.65em;
	}
}

/* 進む系：右向き三角 */
.btn--forward::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.35em;
	border-style: solid;
	border-width: 0.32em 0 0.32em 0.48em;
	border-color: transparent transparent transparent currentColor;
	flex-shrink: 0;
}

.btn--ghost {
	background: rgba(255, 255, 255, 0.92);
	border-color: var(--color-border);
	color: var(--color-text);
}

.btn--ghost:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background: var(--color-white);
}

.btn--sm {
	min-height: 2.4rem;
	padding: 0.45rem 0.9rem;
	font-size: 0.875rem;
}

.btn--block {
	width: 100%;
}

.btn--light {
	background: var(--color-white);
	color: var(--color-text);
}

.btn--light:hover {
	background: var(--color-bg-soft);
	color: var(--color-accent);
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #ffe0e8;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.site-header.is-scrolled {
	border-bottom-color: #f0c0cd;
	box-shadow: 0 4px 18px rgba(229, 101, 138, 0.12);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-4);
	width: min(100% - 1.25rem, var(--container));
	min-height: var(--header-h);
	margin-inline: auto;
}

.site-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none;
}

.site-logo img {
	width: clamp(8.5rem, 28vw, 11.25rem);
	height: auto;
}

.site-nav {
	display: none;
	margin-left: auto;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: block;
	padding: 0.55rem 0.65rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.site-nav__list a:hover {
	color: var(--color-text);
	background: rgba(228, 100, 137, 0.2);
}

.site-nav__list a[aria-current="page"] {
	color: var(--color-text);
	background: rgba(228, 100, 137, 0.2);
	font-weight: 700;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

@media (min-width: 900px) {
	.site-header__actions {
		margin-left: 0;
	}
}

.header-tel {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding-inline: 0.85rem;
	line-height: 1.2;
	background: rgba(255, 255, 255, 0.55);
	border-color: #f0c0cd;
}

.header-tel__label {
	font-size: 0.65rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.header-tel__num {
	font-family: var(--font-serif);
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-width: 3rem;
	min-height: 3rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid #ffe0e8;
	border-radius: var(--radius-sm);
	background: rgba(255, 224, 232, 1);
	color: var(--color-text);
	cursor: pointer;
	line-height: 1;
	box-sizing: border-box;
}

/* 3本線：高さ分を確保してテキストと重ならないようにする */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	border-radius: 1px;
	transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), top 0.2s var(--ease), bottom 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-toggle__bars {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 1.2rem;
	height: 0.875rem;
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars::before {
	top: 0;
}

.nav-toggle__bars::after {
	top: auto;
	bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%) rotate(-45deg);
}

.nav-toggle__text {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.site-nav { display: block; }
	.nav-toggle { display: none; }
	.header-tel { display: inline-flex; }
	.site-header__actions .btn--primary { display: inline-flex; }
}

@media (max-width: 899px) {
	.site-header__actions > .btn--primary { display: none; }
}

/* ---------- Drawer ---------- */

.nav-drawer {
	position: fixed;
	inset: 0;
	z-index: 1100;
}

.nav-drawer[hidden] {
	display: none;
}

.nav-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(45, 36, 30, 0.45);
}

.nav-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(20.5rem, 88vw);
	height: 100%;
	padding: var(--space-5);
	background: var(--color-white);
	box-shadow: -12px 0 32px rgba(45, 36, 30, 0.12);
	overflow-y: auto;
	transform: translateX(0);
}

.nav-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.nav-drawer__brand {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 400;
}

.nav-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-text);
	cursor: pointer;
}

.nav-drawer__list {
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.nav-drawer__list a {
	display: block;
	padding: 0.95rem 0.25rem;
	border-bottom: 1px solid var(--color-border);
	font-size: 1.05rem;
	font-weight: 500;
	text-decoration: none;
}

.nav-drawer__list a[aria-current="page"] {
	color: var(--color-text);
	font-weight: 700;
}

.nav-drawer__cta {
	display: grid;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

/* ドロワーCTAをヒーローと同じ配色に */
.nav-drawer__cta .btn--light {
	background: var(--color-text);
	border: none;
	color: var(--color-white);
	box-shadow: 0 2px 12px rgba(91, 77, 68, 0.08);
}

.nav-drawer__cta .btn--light:hover {
	background: var(--color-text);
	color: var(--color-white);
	opacity: 0.9;
}

.nav-drawer__note {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	line-height: 1.65;
	text-align: left;
}

body.nav-open {
	overflow: hidden;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: min(75vh, 40rem);
	color: var(--color-text);
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.hero__slide.is-active {
	opacity: 1;
}

.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: none;
}

.hero__content {
	width: min(100% - 2rem, var(--container));
	margin: 0 auto;
	padding: calc(var(--header-h) + var(--space-6)) 0 var(--space-6);
}

.hero__content .notice-stack {
	position: relative;
	z-index: 2;
}

.hero__brand {
	margin: 0 0 var(--space-3);
	font-family: var(--font-serif);
	font-size: clamp(1.1rem, 1.5vw + 0.85rem, 1.4rem);
	font-weight: 400;
	letter-spacing: 0.12em;
	color: var(--color-accent);
}

.hero__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 4.5vw + 0.6rem, 3rem);
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--color-text);
	text-shadow:
		0 0 2px #fff,
		0 0 6px #fff,
		0 0 12px rgba(255, 255, 255, 0.95),
		0 1px 0 #fff,
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff,
		0 2px 8px rgba(255, 255, 255, 0.9);
}

.hero__lead {
	margin: 0 0 var(--space-5);
	max-width: 28rem;
	font-family: var(--font-sans);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.75;
	color: var(--color-text-muted);
	text-shadow:
		0 0 2px #fff,
		0 0 8px #fff,
		0 0 14px rgba(255, 255, 255, 0.95),
		0 1px 0 #fff,
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff,
		0 2px 6px rgba(255, 255, 255, 0.85);
}

.hero__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-3);
	width: 100%;
	max-width: 28rem; /* お知らせ（.notice-stack）と同じ幅 */
}

@media (max-width: 899px) {
	.hero__actions {
		display: none;
	}
}

.hero__actions .btn {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	white-space: normal;
	padding-inline: 0.6rem;
}

/* 白オーバーレイ上でもボタンのメリハリを保つ */
.hero .btn--light {
	background: var(--color-text);
	border-color: transparent;
	border-width: 0;
	color: var(--color-white);
	box-shadow: 0 2px 12px rgba(91, 77, 68, 0.08);
}

.hero .btn--light:hover {
	background: var(--color-text);
	border-color: transparent;
	color: var(--color-white);
	opacity: 0.9;
}

.hero .btn--primary {
	box-shadow: 0 2px 12px rgba(229, 101, 138, 0.28);
}

/* ---------- Notice / info chips ---------- */

.notice-stack {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-5);
	margin-bottom: 0;
	max-width: 28rem;
}

.notice-chip {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(91, 77, 68, 0.06);
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.notice-chip:hover {
	background: var(--color-white);
	border-color: var(--color-accent);
	color: var(--color-text);
}

.notice-chip__date {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: var(--color-accent);
}

.notice-chip__label {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--color-text);
}

/* ---------- Contact strip ---------- */

.contact-strip {
	margin-top: 0;
	padding-block: var(--space-7);
	position: relative;
	z-index: 1;
	background: #ffe0e8;
}

.contact-strip::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(229, 101, 138, 0.45), transparent);
	pointer-events: none;
}

.contact-strip__panel {
	display: grid;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(229, 101, 138, 0.28);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.8) inset,
		0 18px 40px rgba(180, 80, 110, 0.1);
	overflow: hidden;
}

.contact-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.45rem;
	min-height: 9.5rem;
	padding: 1.65rem 1.5rem 1.5rem;
	color: var(--color-text);
	text-decoration: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 250, 252, 0.96) 100%);
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.contact-item + .contact-item {
	border-top: 1px solid rgba(229, 101, 138, 0.16);
}

.contact-item__kicker {
	display: inline-block;
	align-self: flex-start;
	margin: 0 0 0.15rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid rgba(229, 101, 138, 0.45);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent);
	line-height: 1.2;
}

.contact-item__label {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}

.contact-item__value {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 1.2vw + 1rem, 1.55rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.35;
	color: var(--color-text);
}

.contact-item__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.contact-item__value a:hover {
	color: var(--color-accent);
	border-bottom-color: rgba(229, 101, 138, 0.5);
}

.contact-item__value--compact {
	font-size: 1.15rem;
	letter-spacing: 0.08em;
}

.contact-item__note {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--color-text-muted);
}

.contact-item--link {
	padding-right: 2.75rem;
	cursor: pointer;
}

.contact-item--link:hover {
	background: #fff6f8;
	color: var(--color-text);
}

.contact-item--link:hover .contact-item__value {
	color: var(--color-accent);
}

.contact-item--link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
	z-index: 1;
}

.contact-item__arrow {
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 1.5px solid var(--color-accent);
	border-bottom: 1.5px solid var(--color-accent);
	transform: translateY(-50%) rotate(-45deg);
	opacity: 0.65;
	transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.contact-item--link:hover .contact-item__arrow {
	opacity: 1;
	transform: translate(3px, -50%) rotate(-45deg);
}

@media (min-width: 860px) {
	.contact-strip {
		padding-block: var(--space-8);
	}

	.contact-strip__panel {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.contact-item {
		min-height: 11rem;
		padding: 2rem 1.75rem 1.85rem;
	}

	.contact-item + .contact-item {
		border-top: none;
		border-left: 1px solid rgba(229, 101, 138, 0.16);
	}

	.contact-item--link {
		padding-right: 3rem;
	}

	.contact-item__arrow {
		right: 1.5rem;
	}
}

/* ---------- Notice box (requests) ---------- */

.notice-box {
	padding: var(--space-6);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}

.notice-box > .btn {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
}

.notice-box__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0.06em;
}

@media (max-width: 899px) {
	.notice-box__title {
		font-size: 1rem;
	}

	/* 後勝ちになるよう notice-box > .btn などの後に置く */
	.btn,
	a.btn,
	.notice-box > .btn,
	.hero__actions .btn,
	.page-actions .btn,
	.btn-row .btn,
	.access-actions .btn {
		display: block;
		width: 100%;
		max-width: 100%;
		font-size: 0.9rem;
		line-height: 1.6;
		text-align: center;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}
}

.checklist {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.checklist li {
	position: relative;
	padding: 0.65rem 0 0.65rem 1.5rem;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
}

.checklist li:last-child {
	border-bottom: 0;
}

.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.3rem;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--color-accent);
}

.checklist strong {
	font-weight: 700;
	color: var(--color-text);
}

.checklist em,
.checklist .mark {
	font-style: normal;
	font-weight: 700;
	background: linear-gradient(transparent 60%, rgba(229, 101, 138, 0.18) 60%);
}

/* ---------- Split / intro ---------- */

.split {
	display: grid;
	gap: var(--space-6);
	align-items: center;
}

.split__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.split__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 721 / 400;
	object-fit: cover;
}

.split__body .section__title {
	margin-bottom: var(--space-4);
}

.split__body p {
	margin: 0 0 var(--space-5);
	color: var(--color-text-muted);
}

@media (min-width: 860px) {
	.split {
		grid-template-columns: 1.05fr 1fr;
		gap: var(--space-7);
	}
}

/* ---------- Intro banner (magazine) ---------- */

.intro-banner {
	text-align: center;
	padding-block: var(--space-8);
	background:
		radial-gradient(ellipse at top, rgba(229, 101, 138, 0.12), transparent 55%),
		var(--color-bg-warm);
}

.intro-banner__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.45rem, 2.2vw + 0.9rem, 2rem);
	line-height: 1.55;
	letter-spacing: 0.08em;
}

@media (max-width: 899px) {
	.intro-banner__title {
		font-size: 1rem;
	}
}

.intro-banner__text {
	margin: 0 auto;
	max-width: 40rem;
	color: var(--color-text-muted);
	text-align: left;
}

/* ---------- Treatment grid ---------- */

.treatment-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.treatment-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	min-height: 100%;
	padding: var(--space-5) var(--space-3);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-align: center;
	text-decoration: none;
	color: var(--color-text);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.treatment-card:hover {
	border-color: rgba(229, 101, 138, 0.45);
	box-shadow: var(--shadow-soft);
	color: var(--color-text);
	transform: translateY(-2px);
}

.treatment-card img {
	width: 3.25rem;
	height: 3.25rem;
}

.treatment-card__label {
	font-family: var(--font-serif);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

@media (min-width: 768px) {
	.treatment-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

.section-actions {
	display: flex;
	justify-content: flex-end;
}

/* ---------- Instagram ---------- */

.section--insta {
	/* 上下の余白をそろえて、帯の位置感を中央に */
	padding-block: var(--space-7);
}

.insta-cta {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-4);
	align-items: center;
	padding: 1.35rem 1.35rem 1.35rem 1.25rem;
	text-decoration: none;
	color: var(--color-text);
	overflow: hidden;
	border: 1px solid rgba(229, 101, 138, 0.28);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(247, 163, 92, 0.18) 0%, transparent 45%),
		radial-gradient(100% 120% at 100% 100%, rgba(229, 101, 138, 0.2) 0%, transparent 50%),
		linear-gradient(115deg, #fff8fa 0%, #ffe8ef 48%, #fff6f1 100%);
	box-shadow: 0 8px 28px rgba(91, 77, 68, 0.06);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.insta-cta::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, #f7a35c 0%, #e5658a 55%, #c94b7a 100%);
}

.insta-cta:hover,
.insta-cta:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(229, 101, 138, 0.55);
	box-shadow: 0 14px 34px rgba(229, 101, 138, 0.16);
	outline: none;
}

.insta-cta__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	flex-shrink: 0;
	filter: drop-shadow(0 4px 10px rgba(229, 101, 138, 0.28));
	transition: transform 0.25s var(--ease);
}

.insta-cta:hover .insta-cta__icon,
.insta-cta:focus-visible .insta-cta__icon {
	transform: scale(1.06) rotate(-4deg);
}

.insta-cta__icon svg {
	display: block;
	width: 3.15rem;
	height: 3.15rem;
}

.insta-cta__body {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

.insta-cta__kicker {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.insta-cta__title {
	font-family: var(--font-serif);
	font-size: clamp(1.05rem, 1.2vw + 0.85rem, 1.25rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--color-text);
}

.insta-cta__lead {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.55;
	color: var(--color-text-muted);
}

.insta-cta__action {
	position: relative;
	z-index: 1;
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	margin-top: 0.15rem;
	padding: 0.7rem 1.15rem;
	background: linear-gradient(120deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #e5658a 75%, #d24d74 100%);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}

.insta-cta:hover .insta-cta__action,
.insta-cta:focus-visible .insta-cta__action {
	filter: brightness(1.06);
}

.insta-cta__action-arrow {
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s var(--ease);
}

.insta-cta:hover .insta-cta__action-arrow,
.insta-cta:focus-visible .insta-cta__action-arrow {
	transform: translateX(3px) rotate(45deg);
}

@media (min-width: 760px) {
	.insta-cta {
		grid-template-columns: auto 1fr auto;
		gap: var(--space-5);
		padding: 1.5rem 1.5rem 1.5rem 1.6rem;
	}

	.insta-cta__action {
		grid-column: auto;
		margin-top: 0;
		padding: 0.85rem 1.4rem;
		white-space: nowrap;
	}

	.insta-cta__lead {
		font-size: 0.95rem;
	}

	.insta-cta__icon {
		width: 4rem;
		height: 4rem;
	}

	.insta-cta__icon svg {
		width: 3.6rem;
		height: 3.6rem;
	}
}

/* legacy class safety (if referenced elsewhere) */
.insta-band {
	display: none;
}

/* ---------- Footer ---------- */

.site-footer {
	padding: var(--space-8) 0 var(--space-9);
	background: var(--color-bg-soft);
	border-top: 1px solid var(--color-border);
	color: var(--color-text);
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.site-footer__inner {
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
}

.site-footer__brand {
	display: grid;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.site-footer__logo img {
	width: min(14rem, 100%);
	height: auto;
}

.site-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__nav a {
	font-size: 0.92rem;
	font-weight: 500;
}

.site-footer__info {
	display: grid;
	gap: var(--space-7);
	margin-bottom: var(--space-7);
}

.site-footer__heading {
	margin: 0 0 var(--space-3);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.site-footer__heading + .site-footer__heading,
.site-footer__services + .site-footer__heading,
.hours-table-wrap + .site-footer__hours-text + .note-list + .site-footer__heading {
	margin-top: var(--space-5);
}

.site-footer__block .site-footer__heading:not(:first-child) {
	margin-top: var(--space-5);
}

.site-footer__tel {
	margin: 0 0 var(--space-5);
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 2vw + 1rem, 1.85rem);
	font-weight: 400;
	letter-spacing: 0.04em;
}

.site-footer__tel a {
	text-decoration: none;
}

.site-footer__services {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.4rem;
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.site-footer__services li {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.35rem;
	border: 0;
	border-radius: 0;
	background: var(--color-white);
	font-size: 0.8125rem;
	text-align: center;
	line-height: 1.35;
}

.hours-table-wrap {
	overflow-x: auto;
	margin-bottom: var(--space-3);
	-webkit-overflow-scrolling: touch;
	background: transparent;
}

.hours-table {
	width: 100%;
	min-width: 22rem;
	table-layout: fixed;
	/* セル間隔で背景を透かす（border-color: transparent と同趣旨） */
	border-collapse: separate;
	border-spacing: 3px;
	font-size: 0.8125rem;
	background: transparent;
}

@media (max-width: 899px) {
	.hours-table {
		font-size: 0.7rem;
	}
}

/*
 * 枠は色を持たず、間からページ背景が見える共通仕様
 * reserve.php（白）→ 白の区切り / フッター（薄いピンク）→ その色が区切りに見える
 */
.hours-table th,
.hours-table td {
	width: calc(100% / 8);
	padding: 0.55rem 0.2rem;
	border: 0;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: rgba(255, 255, 255, 0.55);
	color: var(--color-text);
}

.hours-table thead th {
	background: rgba(255, 224, 232, 1);
	color: var(--color-text);
	font-weight: 500;
}

.hours-table tbody th {
	background: rgba(255, 224, 232, 1);
	font-weight: 700;
}

.hours-table tbody td {
	background: rgba(255, 247, 249, 1);
}

.site-footer .hours-table tbody td {
	background: #ffffff;
}

.hours-open {
	color: #5b4d44;
	font-weight: 700;
	opacity: 0.95;
}

.site-footer__hours-text {
	margin: 0 0 var(--space-3);
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.note-list {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--color-text-muted);
	font-size: 0.875rem;
}

.note-list li + li {
	margin-top: 0.25rem;
}

/* Footer notice list — ・ marker, no separators */
.site-footer .note-list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-muted);
	font-size: 0.875rem;
	line-height: 1.7;
}

.site-footer .note-list li {
	position: relative;
	margin: 0;
	padding: 0.15rem 0 0.15rem 1.15rem;
	border: 0;
}

.site-footer .note-list li + li {
	margin-top: 0.2rem;
}

.site-footer .note-list li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0.15rem;
	font-family: var(--font-serif);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-accent);
}

.site-footer__map {
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	padding: var(--space-3);
}

.site-footer__map img {
	width: 100%;
	height: auto;
}

.site-footer__address {
	margin: var(--space-4) 0 0;
	font-size: 0.92rem;
	line-height: 1.7;
}

.site-footer__bottom {
	display: grid;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.site-footer__copy {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

@media (min-width: 900px) {
	.site-footer {
		padding: 4.25rem 0 3.5rem;
	}

	.site-footer__inner {
		width: min(100% - 3rem, var(--container));
	}

	/* ブランド + ナビ */
	.site-footer__brand {
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 2rem 3rem;
		margin-bottom: 2.75rem;
		padding-bottom: 2rem;
	}

	.site-footer__logo img {
		width: min(15rem, 100%);
	}

	.site-footer__nav {
		justify-self: end;
	}

	.site-footer__nav ul {
		justify-content: flex-end;
		align-items: center;
		gap: 0.15rem 0.15rem;
		flex-wrap: wrap;
	}

	.site-footer__nav a {
		display: inline-block;
		padding: 0.4rem 0.6rem;
		font-size: 0.9rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
	}

	.site-footer__nav a:hover {
		color: var(--color-accent);
		text-decoration: none;
		background: rgba(255, 255, 255, 0.65);
	}

	/* 本体2カラム：左=連絡・科目・時間 / 右=地図 */
	.site-footer__info {
		grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.85fr);
		gap: 2.5rem 3.5rem;
		align-items: start;
		margin-bottom: 2.75rem;
	}

	.site-footer__heading {
		margin-bottom: 0.85rem;
		font-size: 0.8125rem;
		letter-spacing: 0.08em;
	}

	.site-footer__block .site-footer__heading:not(:first-child) {
		margin-top: 2rem;
	}

	.site-footer__tel {
		margin-bottom: 1.75rem;
		font-size: clamp(1.65rem, 1.2vw + 1.2rem, 2rem);
		line-height: 1.2;
	}

	.site-footer__tel a {
		transition: color 0.2s var(--ease);
	}

	.site-footer__tel a:hover {
		color: var(--color-accent);
		text-decoration: none;
	}

	.site-footer__services {
		gap: 0.45rem;
		margin-bottom: 0;
	}

	.site-footer__services li {
		padding: 0.55rem 0.35rem;
		font-size: 0.8125rem;
		line-height: 1.4;
	}

	.site-footer .hours-table-wrap {
		margin-bottom: 0.85rem;
		overflow: visible;
	}

	.site-footer .hours-table {
		min-width: 0;
		width: 100%;
		font-size: 0.8125rem;
		border-spacing: 3px;
	}

	.site-footer .hours-table th,
	.site-footer .hours-table td {
		padding: 0.55rem 0.2rem;
	}

	.site-footer__hours-text {
		margin-bottom: 0.85rem;
		font-size: 0.9rem;
		line-height: 1.7;
	}

	.site-footer .note-list {
		font-size: 0.875rem;
		line-height: 1.75;
	}

	.site-footer__block--map {
		position: sticky;
		top: calc(var(--header-h) + 1.25rem);
	}

	.site-footer__map {
		padding: 1rem 1rem 0.75rem;
		background: #fff;
		border: 1px solid var(--color-border);
	}

	.site-footer__map img {
		display: block;
		width: 100%;
		margin: 0 auto;
	}

	.site-footer__address {
		margin-top: 1.15rem;
		font-size: 0.92rem;
		line-height: 1.8;
	}

	/* ボトム */
	.site-footer__bottom {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 1rem 2rem;
		padding-top: 1.75rem;
	}

	.site-footer__legal {
		gap: 0.35rem 1.5rem;
		font-size: 0.875rem;
	}

	.site-footer__legal a {
		padding: 0.15rem 0;
		transition: color 0.2s var(--ease);
	}

	.site-footer__copy {
		font-size: 0.8125rem;
		letter-spacing: 0.02em;
		text-align: right;
	}
}

@media (min-width: 1100px) {
	.site-footer__info {
		grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.8fr);
		gap: 3rem 4rem;
	}
}

/* ---------- Footer: mobile ---------- */

@media (max-width: 899px) {
	.site-footer {
		padding:
			var(--space-7) 0
			calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
	}

	.site-footer__inner {
		width: min(100% - 1.5rem, var(--container));
	}

	.site-footer__brand {
		gap: var(--space-4);
		margin-bottom: var(--space-6);
		padding-bottom: var(--space-5);
		justify-items: stretch;
	}

	.site-footer__logo {
		display: block;
	}

	.site-footer__logo img {
		width: min(12.5rem, 72%);
		margin-inline: auto;
		margin-bottom: 1em;
	}

	.site-footer__nav ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.35rem;
	}

	.site-footer__nav a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.65rem;
		padding: 0.45rem 0.5rem;
		background: var(--color-white);
		border: 1px solid var(--color-border);
		font-size: 0.875rem;
		text-align: center;
		line-height: 1.3;
	}

	.site-footer__nav a:hover {
		text-decoration: none;
		background: rgba(255, 255, 255, 0.95);
		color: var(--color-accent);
	}

	.site-footer__info {
		gap: var(--space-6);
		margin-bottom: var(--space-6);
	}

	.site-footer__heading {
		margin-bottom: 0.65rem;
		font-size: 0.8125rem;
	}

	.site-footer__tel {
		margin-bottom: var(--space-4);
		text-align: center;
	}

	.site-footer__tel a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		padding: 0.15rem 0.5rem;
	}

	.site-footer__services {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.35rem;
		margin-bottom: var(--space-4);
	}

	.site-footer__services li {
		padding: 0.55rem 0.25rem;
		font-size: 0.78rem;
	}

	.site-footer__services li:last-child {
		grid-column: auto;
	}

	/* 診療時間表：横スクロールを避けて収める */
	.site-footer .hours-table-wrap {
		margin-bottom: 0.65rem;
		overflow-x: visible;
	}

	.site-footer .hours-table {
		min-width: 0;
		width: 100%;
		font-size: 0.7rem;
		border-spacing: 2px;
	}

	.site-footer .hours-table th,
	.site-footer .hours-table td {
		padding: 0.4rem 0.08rem;
		white-space: normal;
		line-height: 1.25;
		word-break: keep-all;
	}

	.site-footer__hours-text {
		font-size: 0.85rem;
		line-height: 1.65;
		text-align: center;
	}

	.site-footer .note-list {
		padding: 0;
		font-size: 0.8125rem;
		line-height: 1.65;
	}

	.site-footer__block--map {
		padding-top: var(--space-2);
	}

	.site-footer__map {
		max-width: 22rem;
		margin-inline: auto;
		padding: 0.75rem;
	}

	.site-footer__address {
		margin-top: var(--space-3);
		text-align: center;
		font-size: 0.875rem;
		line-height: 1.75;
	}

	.site-footer__bottom {
		gap: var(--space-4);
		padding-top: var(--space-5);
		text-align: center;
		justify-items: center;
	}

	.site-footer__legal {
		justify-content: center;
		gap: 0.5rem 1rem;
		font-size: 0.8125rem;
	}

	.site-footer__copy {
		font-size: 0.75rem;
	}
}

@media (max-width: 399px) {
	.site-footer__services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__nav ul {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer .hours-table {
		font-size: 0.65rem;
	}
}

/* Sticky mobile CTA */
.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -6px 20px rgba(91, 77, 68, 0.08);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sticky-cta a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem;
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
}

.sticky-cta__web {
	background: var(--color-accent);
	color: var(--color-white);
}

.sticky-cta__web:hover {
	color: var(--color-white);
	background: var(--color-accent-dark);
}

.sticky-cta__phone {
	background: var(--color-text);
	color: var(--color-white);
	border-left: 1px solid var(--color-border);
}

.sticky-cta__phone:hover {
	color: var(--color-white);
	background: var(--color-text);
	opacity: 0.9;
}

@media (min-width: 900px) {
	.sticky-cta {
		display: none;
	}

	.site-footer {
		padding-bottom: var(--space-8);
	}
}

/* Body offset for sticky bar on mobile */
@media (max-width: 899px) {
	body {
		font-size: 0.9rem;
		padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
	}
}

/* ---------- Utilities ---------- */

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* =========================================================
   Subpages — page hero (legacy background images), breadcrumb
   ========================================================= */

.page-sub .page-hero {
	position: relative;
	z-index: 1;
	color: var(--color-text);
	background-color: #ffe0e8;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom: 0;
	padding: 0;
}

/* ページ種別ごとの背景（旧 area-* / bn0〜bn07） */
.page-hero--misc {
	background-image: url("../../images/bn0.jpg");
}
.page-hero--clinic {
	background-image: url("../../images/bn01.jpg");
}
.page-hero--equipment {
	background-image: url("../../images/bn02.jpg");
}
.page-hero--doctor {
	background-image: url("../../images/bn03.jpg");
}
.page-hero--treatment,
.page-hero--info {
	background-image: url("../../images/bn04.jpg");
}
.page-hero--recruit,
.page-hero--information {
	background-image: url("../../images/bn05.jpg");
}
.page-hero--access {
	background-image: url("../../images/bn06.jpg");
}
.page-hero--reserve {
	background-image: url("../../images/bn07.jpg");
}

.page-hero__mask {
	background: rgba(255, 255, 255, 0.5);
	padding: calc(var(--header-h) * 0.35 + 2.5rem) 0 4.5rem;
}

.page-hero__inner {
	padding-top: var(--space-4);
	padding-bottom: var(--space-2);
	text-align: center;
	text-shadow:
		0 0 2px #fff,
		0 0 6px #fff,
		0 0 12px rgba(255, 255, 255, 0.95),
		0 1px 0 #fff,
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff,
		0 2px 8px rgba(255, 255, 255, 0.9);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.35rem 0.5rem;
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumb__item:not(:last-child)::after {
	content: "/";
	opacity: 0.55;
	margin-left: 0.15rem;
}

.breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
	color: var(--color-text);
	font-weight: 500;
}

.page-hero__title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.65rem, 2vw + 1rem, 2.2rem);
	letter-spacing: 0.12em;
	line-height: 1.4;
	color: var(--color-text);
	text-shadow:
		0 0 2px #fff,
		0 0 6px #fff,
		0 0 12px rgba(255, 255, 255, 0.95),
		0 1px 0 #fff,
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff,
		0 2px 8px rgba(255, 255, 255, 0.9);
}

.page-hero__en {
	display: block;
	margin-top: 0.45rem;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.35em;
	text-transform: none;
	color: var(--color-text);
	text-shadow:
		0 0 2px #fff,
		0 0 6px #fff,
		0 0 12px rgba(255, 255, 255, 0.95),
		0 1px 0 #fff,
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff,
		0 2px 8px rgba(255, 255, 255, 0.9);
}

@media screen and (max-width: 980px) {
	.page-hero__mask {
		padding: calc(var(--header-h) * 0.25 + 1.5rem) 0 2.75rem;
	}

	.page-hero__title {
		letter-spacing: 0.08em;
	}
}

.page-body {
	padding-block: var(--space-7) var(--space-8);
	max-width: var(--container);
}

.prose > *:first-child {
	margin-top: 0;
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
	font-family: var(--font-serif);
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--color-text);
	line-height: 1.45;
}

.prose h2 {
	margin: var(--space-7) 0 var(--space-4);
	font-size: 1.45rem;
	color: var(--color-accent);
}

@media (max-width: 899px) {
	.prose h2 {
		font-size: 1.2rem;
	}
}

.prose h3 {
	margin: var(--space-6) 0 var(--space-3);
	font-size: 1.25rem;
	color: var(--color-accent);
}

.prose h4,
.prose h5,
.prose h6 {
	margin: var(--space-5) 0 var(--space-3);
	font-size: 1.08rem;
}

.prose p,
.prose li {
	line-height: 1.85;
	color: var(--color-text);
}

.prose p {
	margin: 0 0 var(--space-4);
}

.prose ul,
.prose ol {
	margin: 0 0 var(--space-5);
	padding-left: 1.35rem;
}

.prose li + li {
	margin-top: 0.4rem;
}

/* Policy / legal lists (privacy など) */
.policy-page ul,
.policy-page ol {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.policy-page li {
	position: relative;
	margin: 0;
	padding: 0.7rem 0 0.7rem 1.35rem;
	line-height: 1.85;
	color: var(--color-text);
	border-bottom: 1px solid rgba(91, 77, 68, 0.1);
}

.policy-page li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.policy-page li:first-child {
	padding-top: 0.15rem;
}

.policy-page li + li {
	margin-top: 0;
}

.policy-page li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0.7rem;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--color-accent);
}

.policy-page li:first-child::before {
	top: 0.15rem;
}

/* Infection-control / info measure list */
.measure-list,
.prose .measure-list {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.measure-list li,
.prose .measure-list li {
	position: relative;
	margin: 0;
	padding: 0.45rem 0 0.45rem 1.35rem;
	line-height: 1.85;
	color: var(--color-text);
	border: 0;
}

.measure-list li + li,
.prose .measure-list li + li {
	margin-top: 0.15rem;
}

.measure-list li::before,
.prose .measure-list li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0.45rem;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--color-accent);
}

.prose a:not(.btn) {
	color: var(--color-accent);
}

.prose hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--space-6) 0;
}

.prose .lead {
	font-size: 1.05rem;
	color: var(--color-text-muted);
}

.page-concept .prose .lead {
	margin-bottom: 3em;
}

/* ---------- Concept list (4 concepts) ---------- */

.concept-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.prose .concept-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.concept-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem 1.1rem;
	margin: 0;
	padding: 0 0 2.25rem;
	border-bottom: 1px solid var(--color-border);
	align-items: start;
}

.prose .concept-item + .concept-item {
	margin-top: 0;
}

.concept-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.concept-item + .concept-item {
	padding-top: 2.25rem;
}

.concept-item__num {
	display: block;
	min-width: 2.1em;
	padding-top: 0.15em;
	font-family: var(--font-serif);
	font-size: clamp(1.35rem, 1.1vw + 1rem, 1.65rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: var(--color-accent);
	border-left: 3px solid var(--color-accent);
	padding-left: 0.65rem;
}

.concept-item__body {
	min-width: 0;
}

.prose .concept-item__body > h2:first-child {
	margin-top: 0;
	margin-bottom: 0.65rem;
	font-size: clamp(1.15rem, 0.6vw + 1rem, 1.35rem);
	line-height: 1.45;
	color: var(--color-text);
}

.prose .concept-item__body > p {
	margin-bottom: 0;
}

.prose .concept-item__body .mark {
	font-style: normal;
	font-weight: 700;
	background: linear-gradient(transparent 60%, rgba(229, 101, 138, 0.18) 60%);
}

@media (min-width: 800px) {
	.concept-layout__media .media-frame {
		position: sticky;
		top: calc(var(--header-h) + 1.25rem);
		margin-bottom: 0;
	}

	.page-concept .concept-layout__media .media-frame {
		max-width: none;
	}
}

.concept-layout__media-mobile {
	margin-top: var(--space-7);
}

@media (max-width: 640px) {
	.concept-item {
		grid-template-columns: 1fr;
		gap: 0.45rem;
	}

	.concept-item__num {
		padding-top: 0;
		font-size: 1.15rem;
	}

	.prose .concept-item__body > h2:first-child {
		margin-bottom: 0.5rem;
	}
}

.prose .point,
.point {
	padding: var(--space-4);
	background: var(--color-bg-soft);
	border-left: 3px solid var(--color-accent);
	margin: 0 0 var(--space-5);
}

.caption {
	margin: 0.4rem 0 var(--space-4);
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	text-align: center;
}

.media-frame {
	margin: 0 0 var(--space-4);
	background: transparent;
	border: 0;
}

.media-frame img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 799px) {
	.media-frame {
		max-width: 16.5rem;
		margin-left: auto;
		margin-right: auto;
	}
}

.content-grid {
	display: grid;
	gap: var(--space-6);
}

.content-grid--2 {
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.content-grid--2 {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5) var(--space-6);
	}

	.content-grid--media-side {
		grid-template-columns: 1fr 1.4fr;
		align-items: start;
		gap: var(--space-7);
	}

	.content-grid--media-side.media-right {
		grid-template-columns: 1.5fr 1fr;
	}
}

.equip-card {
	display: grid;
	gap: var(--space-3);
}

.equip-card h3,
.equip-card h4 {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.1rem;
	color: var(--color-accent);
}

.equip-card p {
	margin: 0;
	line-height: 1.8;
}

/* ---------- Equipment page: breathing room ---------- */

.page-equipment .prose .lead {
	margin-bottom: 2.5em;
}

.page-equipment .equipment-intro {
	margin-bottom: 2.75rem;
	line-height: 1.9;
}

.page-equipment .equipment-section {
	margin-bottom: 3.5rem;
}

.page-equipment .equipment-section:last-child {
	margin-bottom: 0;
}

.page-equipment .equipment-section .section-label {
	margin-top: 0;
	margin-bottom: 2rem;
}

.page-equipment .equipment-space-grid {
	gap: 2.5rem 2rem;
}

@media (min-width: 800px) {
	.page-equipment .equipment-space-grid.content-grid--2 {
		gap: 3rem 2.75rem;
	}
}

.page-equipment .equip-card {
	gap: 0.85rem;
}

.page-equipment .equip-card h3 {
	margin: 0;
}

.page-equipment .equip-card .media-frame {
	margin-bottom: 0.15rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--color-border);
}

.page-equipment .equip-card p {
	line-height: 1.9;
}

.page-equipment .equipment-tech-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.page-equipment .equipment-tech-row {
	margin: 0;
	padding: 2rem 0;
	border-bottom: 1px solid var(--color-border);
	gap: var(--space-5);
}

.page-equipment .equipment-tech-row:first-child {
	padding-top: 0;
}

.page-equipment .equipment-tech-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.page-equipment .equipment-tech-row h3 {
	margin-top: 0;
	margin-bottom: 0.75rem;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.2rem;
	color: var(--color-text);
}

.page-equipment .equipment-tech-row p {
	margin-bottom: 0;
	line-height: 1.9;
}

.page-equipment .equipment-tech-row .media-frame {
	margin-bottom: 0;
}

@media (min-width: 800px) {
	.page-equipment .equipment-tech-row {
		padding: 2.75rem 0;
		gap: var(--space-6) var(--space-7);
	}

	.page-equipment .equipment-tech-row:first-child {
		padding-top: 0.25rem;
	}
}

.page-equipment .equipment-section--tour {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
}

.page-equipment .equipment-tour .point {
	margin-bottom: var(--space-5);
}

.page-equipment .equipment-tour .btn {
	margin-top: 0.25rem;
}

@media (max-width: 799px) {
	.page-equipment .equipment-section {
		margin-bottom: 3rem;
	}

	.page-equipment .equipment-tech-row {
		padding: 2.25rem 0;
		gap: 1.25rem;
	}

	.page-equipment .equip-card h3 {
		text-align: center;
		font-size: 1.2rem;
	}

	.page-equipment .equipment-section .section-label {
		font-size: 1.2rem;
	}

	.page-equipment .equipment-tech-row h3 {
		text-align: center;
		font-size: 1.1rem;
	}
}

.section-label {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-7) 0 var(--space-5);
	font-family: var(--font-serif);
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	color: var(--color-text);
}

.section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

/* 診療案内：科目バー（旧 ul.treaz） */
.treatment-tags,
.prose ul.treatment-tags {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
	background: url("../../images/tmback.jpg") center / cover no-repeat;
	background-color: #ffe0e8;
	box-sizing: border-box;
}

.treatment-tags li,
.prose ul.treatment-tags li {
	flex: 1 1 20%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1.35rem 0.4rem;
	border: 0;
	border-left: solid 2px #fff;
	background: transparent;
	font-size: 0.95rem;
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
	color: var(--color-text);
	box-sizing: border-box;
}

.treatment-tags li:first-child,
.prose ul.treatment-tags li:first-child {
	border-left: 0;
}

.treatment-tags li + li,
.prose ul.treatment-tags li + li {
	margin-top: 0;
}

@media (max-width: 640px) {
	.treatment-tags,
	.prose ul.treatment-tags {
		flex-wrap: wrap;
	}

	.treatment-tags li,
	.prose ul.treatment-tags li {
		flex: 1 1 33.333%;
		padding: 0.75rem 0.25rem;
		font-size: 0.8rem;
		border-left: solid 2px #fff;
		border-top: solid 2px #fff;
	}

	.treatment-tags li:nth-child(3n + 1),
	.prose ul.treatment-tags li:nth-child(3n + 1) {
		border-left: 0;
	}

	.treatment-tags li:nth-child(-n + 3),
	.prose ul.treatment-tags li:nth-child(-n + 3) {
		border-top: 0;
	}
}

/* 診療案内一覧表（旧 .treatm table） */
.page-treatment .prose .lead {
	margin-bottom: 2.25rem;
}

.page-treatment .treatment-tags {
	margin-bottom: var(--space-6);
}

.treatment-panel {
	width: 100%;
	margin: 0 0 var(--space-8);
}

.treatment-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
	font-size: 0.95rem;
	table-layout: fixed;
}

.treatment-table th,
.treatment-table td {
	border: solid 2px #fff;
	padding: 1rem 1.1rem;
	vertical-align: middle;
	text-align: left;
	background: #f3f3f3;
	color: var(--color-text);
}

.treatment-table th {
	width: 38%;
	font-weight: 500;
	border-left: 0;
}

.treatment-table td {
	border-right: 0;
}

.treatment-table tr:first-child th,
.treatment-table tr:first-child td {
	border-top: 0;
}

.treatment-table .tr-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.treatment-table .tr-head img {
	width: 1.875rem;
	height: auto;
	flex-shrink: 0;
}

.treatment-table .tr-head span {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

/* 項目リスト：同一デザイン／リンクのみややピンク */
.treatment-items,
.treatment-table ul,
.prose .treatment-table ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.treatment-items li,
.treatment-table li,
.prose .treatment-table li {
	margin: 0;
	padding: 0.32em 0.75em;
	line-height: 1.55;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--color-text);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid transparent;
}

.treatment-items li + li,
.prose .treatment-table li + li {
	margin-top: 0;
}

/* リンク：文字色は通常／下線・矢印なし。チップ背景だけピンク */
.treatment-link,
.treatment-table a,
.prose .treatment-table a:not(.btn) {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.treatment-link::after,
.treatment-table a::after,
.prose .treatment-table a:not(.btn)::after {
	content: none;
	display: none;
}

.treatment-link:hover,
.treatment-table a:hover,
.prose .treatment-table a:not(.btn):hover {
	color: var(--color-text);
	opacity: 1;
}

/* 項目がリンクのみ → 同じチップ形状で背景だけピンク */
.treatment-items li:has(> a.treatment-link:only-child),
.treatment-table li:has(> a:only-child) {
	background: rgba(255, 224, 232, 0.9);
	border-color: rgba(229, 101, 138, 0.2);
	color: var(--color-text);
	cursor: pointer;
}

.treatment-items li > a.treatment-link:only-child,
.treatment-table li > a:only-child {
	display: inline;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-weight: inherit;
	box-shadow: none;
}

.treatment-items li:has(> a.treatment-link:only-child):hover,
.treatment-table li:has(> a:only-child):hover {
	background: rgba(255, 224, 232, 1);
	border-color: rgba(229, 101, 138, 0.35);
}

.treatment-items li > a.treatment-link:only-child:hover,
.treatment-table li > a:only-child:hover {
	color: inherit;
	background: transparent;
	text-decoration: none;
}

.page-treatment .treatment-pay {
	margin-top: 0.5rem;
}

.page-treatment .treatment-pay .section-label {
	margin-top: 0;
}

/* Payment methods list — marker only, no separators */
.treatment-pay-list,
.prose .treatment-pay-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.treatment-pay-list li,
.prose .treatment-pay-list li {
	position: relative;
	margin: 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	line-height: 1.85;
	color: var(--color-text);
	border: 0;
	border-bottom: 0;
}

.treatment-pay-list li + li,
.prose .treatment-pay-list li + li {
	margin-top: 0.65rem;
}

.treatment-pay-list li::before,
.prose .treatment-pay-list li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0.25rem;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--color-accent);
}

.treatment-pay-list .pay-cards {
	margin-top: 0.55rem;
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.treatment-table,
	.treatment-table tbody,
	.treatment-table tr,
	.treatment-table th,
	.treatment-table td {
		display: block;
		width: 100%;
	}

	.treatment-table th {
		width: 100%;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		padding: 0.9rem 1rem 0.4rem;
	}

	.treatment-table td {
		border-left: 0;
		border-right: 0;
		border-top: 0;
		padding: 0.4rem 1rem 1rem;
	}

	.treatment-table tr {
		margin-bottom: 0.85rem;
	}

	.treatment-table tr:last-child {
		margin-bottom: 0;
	}

	.treatment-table tr:first-child th {
		border-top: 0;
	}

	.treatment-items,
	.treatment-table ul {
		gap: 0.4rem;
	}
}

.pay-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0.5rem 0;
}

.pay-cards img {
	height: 1.75rem;
	width: auto;
}

.price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: var(--space-5) 0 var(--space-2);
}

.price-row h4 {
	margin: 0;
}

.price {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	color: var(--color-accent);
	letter-spacing: 0.04em;
}

.page-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-3);
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.page-actions .btn {
	gap: 0.55em;
}

.doctor-profile {
	display: grid;
	gap: var(--space-5);
	width: 100%;
	max-width: 34rem;
	margin: 0 auto var(--space-8);
	align-items: start;
	justify-items: center;
	text-align: center;
}

.doctor-profile__photo {
	width: 100%;
	max-width: 14rem;
}

.doctor-profile .media-frame {
	margin: 0;
	background: #ffe0e8;
}

.doctor-profile .media-frame img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.doctor-profile .profile-dl {
	width: 100%;
	text-align: left;
}

@media (min-width: 640px) {
	.doctor-profile {
		grid-template-columns: 13.5rem 1fr;
		max-width: 36rem;
		gap: var(--space-6) var(--space-7);
		justify-items: stretch;
		text-align: left;
		align-items: center;
	}

	.doctor-profile__photo {
		max-width: none;
	}
}

.profile-dl {
	margin: 0;
}

.profile-dl dt {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-accent);
}

.profile-dl dd {
	margin: 0 0 var(--space-4);
	padding: 0;
	line-height: 1.75;
}

.profile-dl dd:last-child {
	margin-bottom: 0;
}

.profile-dl .name {
	font-family: var(--font-serif);
	font-size: 1.45rem;
	letter-spacing: 0.06em;
	color: var(--color-text);
}

.profile-dl__kana {
	display: inline-block;
	margin-top: 0.15rem;
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

/* 経歴：PCは2行（修了・博士を「・」で接続）／モバイルは3行 */
.profile-dl__career {
	line-height: 1.75;
}

.profile-dl__career span {
	display: inline;
}

.profile-dl__career span:first-child {
	display: block;
}

.profile-dl__career span:nth-child(2)::after {
	content: "・";
}

@media (max-width: 639px) {
	.profile-dl__career span {
		display: block;
	}

	.profile-dl__career span:nth-child(2)::after {
		content: none;
	}
}

.doctor-greeting {
	max-width: 42rem;
	margin: 0 auto;
}

.prose .doctor-greeting > h2 {
	margin-top: 0;
	margin-bottom: var(--space-4);
	text-align: left;
	font-size: 1.35rem;
	color: var(--color-accent);
}

@media (max-width: 899px) {
	.prose .doctor-greeting > h2 {
		font-size: 1.2rem;
	}
}

.doctor-greeting p {
	margin-bottom: 0;
	line-height: 1.9;
	text-align: left;
}

@media (max-width: 639px) {
	.doctor-profile .profile-dl {
		text-align: center;
	}

	.page-doctor .doctor-profile .media-frame {
		max-width: 14rem;
		margin-left: auto;
		margin-right: auto;
	}
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--space-6);
	font-size: 0.92rem;
}

.data-table th,
.data-table td {
	border: 1px solid var(--color-border);
	padding: 0.85rem 0.9rem;
	vertical-align: top;
	text-align: left;
}

.data-table th {
	width: 28%;
	background: var(--color-bg-soft);
	font-weight: 700;
	white-space: nowrap;
}

.data-table ul {
	margin: 0.35rem 0 0;
	padding-left: 1.1rem;
}

.reserve-layout {
	display: grid;
	gap: var(--space-7);
}

@media (min-width: 860px) {
	.reserve-layout {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-7);
		align-items: start;
	}
}

/* ---------- Reserve page ---------- */

.page-reserve .reserve-page {
	max-width: 100%;
}

.reserve-block {
	padding: var(--space-6);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
}

.reserve-block:not(.reserve-block--online) {
	background: #fff;
	border: none;
}

.reserve-block h2 {
	margin: 0 0 var(--space-5);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}

.reserve-tel {
	margin: 0 0 var(--space-5);
	font-family: var(--font-serif);
	font-size: clamp(1.6rem, 2vw + 1rem, 2rem);
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.reserve-tel a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.reserve-tel a:hover {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

.reserve-notes,
.prose .reserve-notes {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.reserve-notes li,
.prose .reserve-notes li {
	position: relative;
	margin: 0;
	padding: 0.35rem 0 0.35rem 1.15rem;
	line-height: 1.75;
	color: var(--color-text);
	border-bottom: 0;
}

.reserve-notes li:first-child {
	padding-top: 0;
}

.reserve-notes li:last-child {
	padding-bottom: 0;
}

.reserve-notes li + li {
	margin-top: 0.15rem;
}

.reserve-notes li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.9em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.8;
}

.reserve-notes li:first-child::before {
	top: 0.55em;
}

.reserve-hours-label {
	margin-top: var(--space-2);
	margin-bottom: var(--space-4);
}

.page-reserve .hours-table-wrap {
	margin-bottom: var(--space-4);
}

.page-reserve .hours-caption {
	margin-top: var(--space-4);
}

.reserve-lead {
	margin: 0 0 var(--space-5);
	line-height: 1.85;
}

.reserve-banner {
	margin: 0 0 var(--space-6);
}

.reserve-banner a {
	display: inline-block;
	line-height: 0;
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), filter 0.25s var(--ease);
}

.reserve-banner a:hover,
.reserve-banner a:focus-visible {
	opacity: 0.85;
	transform: translateY(-2px);
	filter: brightness(1.05);
}

.reserve-banner a:active {
	opacity: 0.9;
	transform: translateY(0);
	filter: brightness(0.98);
}

.reserve-banner img {
	width: min(100%, 240px);
	height: auto;
	display: block;
}

.reserve-subhead {
	margin: 0 0 var(--space-4);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.reserve-flow,
.prose .reserve-flow {
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
	counter-reset: reserve-flow;
}

.reserve-flow li,
.prose .reserve-flow li {
	counter-increment: reserve-flow;
	position: relative;
	margin: 0;
	padding: 0.75rem 0 0.75rem 2.4rem;
	line-height: 1.75;
	border-bottom: 1px solid rgba(240, 216, 224, 0.9);
	color: var(--color-text);
}

.reserve-flow li:first-child {
	padding-top: 0;
}

.reserve-flow li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
	margin-bottom: 0;
}

.reserve-flow li::before {
	content: counter(reserve-flow);
	position: absolute;
	left: 0;
	top: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.55rem;
	height: 1.55rem;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-accent);
	background: #fff;
	border: 1px solid rgba(229, 101, 138, 0.45);
}

.reserve-flow li:first-child::before {
	top: 0;
}

.reserve-block .note-list.asterisk {
	margin: 0;
}

.reserve-block .reserve-flow + .reserve-subhead {
	margin-top: var(--space-6);
}

@media (max-width: 859px) {
	.reserve-block {
		padding: 0;
		background: #ffffff;
		border: none;
	}

	.page-reserve .prose h3 {
		font-size: 1.2rem;
	}
}

.note-list.asterisk {
	list-style: none;
	padding-left: 0;
}

.note-list.asterisk li {
	position: relative;
	padding-left: 1.1rem;
	margin-bottom: 0.55rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
	line-height: 1.7;
}

.note-list.asterisk li::before {
	content: "※";
	position: absolute;
	left: 0;
	color: var(--color-accent);
}

.access-grid {
	display: grid;
	gap: var(--space-5);
	margin-bottom: 0;
}

@media (min-width: 800px) {
	.access-grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: var(--space-6) var(--space-7);
	}
}

/* ---------- Access page ---------- */

.page-access .access-page {
	max-width: 100%;
}

.access-section {
	margin: 0 0 var(--space-7);
}

.access-section:last-child {
	margin-bottom: 0;
}

.access-figure {
	margin: 0;
}

.access-figure .media-frame {
	margin: 0;
	background: #f7f4f2;
	padding: 0.65rem;
	border: 1px solid var(--color-border);
}

.access-figure .media-frame img {
	width: 100%;
	height: auto;
	display: block;
}

.access-figure--map .media-frame {
	background: #ffffff;
	border: 1px solid #ffffff;
}

.access-figure--map .media-frame img {
	margin-bottom: 2em;
}

@media (min-width: 800px) {
	.access-figure--map .media-frame {
		padding-top: 3em;
	}
}

.access-map-caption {
	margin: 2em 0 0;
	text-align: center;
	line-height: 1.7;
}

.page-access .access-figure .media-frame {
	max-width: none;
}

.access-steps,
.prose .access-steps {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.access-steps li,
.prose .access-steps li {
	position: relative;
	margin: 0;
	padding: 0.95rem 0 0.95rem 1.5rem;
	border-bottom: 1px solid var(--color-border);
	line-height: 1.8;
	color: var(--color-text);
}

.access-steps li:first-child {
	padding-top: 0;
}

.access-steps li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.access-steps li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 1.4em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.75;
}

.access-steps li:first-child::before {
	top: 0.55em;
}

.access-actions {
	margin: var(--space-5) 0 0;
}

.access-section--car h2 {
	margin-top: 0;
}

.access-section--car .point {
	margin: 0;
	padding: var(--space-5);
	line-height: 1.9;
	background: linear-gradient(115deg, rgba(255, 224, 232, 0.55) 0%, rgba(255, 248, 245, 0.9) 100%);
	border-left: 3px solid var(--color-accent);
}

@media (max-width: 799px) {
	.page-access .access-figure .media-frame {
		max-width: 22rem;
		margin-left: auto;
		margin-right: auto;
	}
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-4) 0 var(--space-5);
}

.mark-line {
	font-weight: 700;
	background: linear-gradient(transparent 60%, rgba(229, 101, 138, 0.22) 60%);
}

/* 診療受付・初診受付など：枠囲みラベル */
.mark-badge {
	display: inline-block;
	margin-right: 0.55em;
	padding: 0.15em 0.5em;
	border: 0;
	font-weight: 400;
	font-size: 0.88em;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: #ffffff;
	background: #5d4e46;
	vertical-align: middle;
	white-space: nowrap;
}

.hours-caption {
	margin: 0.75rem 0 0;
	text-align: left;
	font-size: 0.9rem;
	line-height: 1.9;
	color: var(--color-text);
}

.hours-caption__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.15rem 0;
}

.info-figure {
	margin: 0 0 var(--space-5);
	max-width: 36rem;
}

.info-figure img {
	width: 100%;
	height: auto;
	display: block;
	border: 7px solid #ffe0e8;
}

/*
 * Legacy responsive visibility (from main.css)
 *  mnon  = デスクトップ表示 / モバイルで非表示
 *  mobn  = モバイルのみ表示 / デスクトップで非表示
 *  hide-mobile / hide-desktop は互換エイリアス
 */
.mnon,
.hide-mobile {
	/* visible by default (desktop-first) */
}

.mobn,
.hide-desktop {
	display: none !important;
}

@media screen and (max-width: 980px) {
	.mnon,
	.hide-mobile {
		display: none !important;
	}

	.mobn,
	.hide-desktop {
		display: block !important;
	}

	/* <br class="mobn"> 等でも折り返しとして機能させる */
	br.mobn,
	br.hide-desktop {
		display: block !important;
	}

	br.mnon,
	br.hide-mobile {
		display: none !important;
	}
}

/* Treatment detail */
.treat-kicker {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	color: var(--color-accent);
}

.treat-title {
	margin: 0 0 var(--space-6);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.35rem, 1.5vw + 1rem, 1.7rem);
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--color-text);
}

.media-col .media-frame + .caption,
.media-col .caption {
	margin-top: 0.35rem;
	margin-bottom: var(--space-5);
}

.media-col .media-frame:last-child {
	margin-bottom: 0;
}

/* scroll-margin for treatment anchors */
#treatment1, #treatment2, #treatment3, #treatment4, #treatment5,
#treatment6, #treatment7, #treatment8, #treatment9, #book {
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* =========================================================
   Sealant page (treatment2_2) — pediatric prevention guide
   ========================================================= */

.sealant-page {
	max-width: 100%;
}

.sealant-section {
	margin-bottom: var(--space-7);
}

.sealant-section:last-child {
	margin-bottom: 0;
}

.sealant-heading {
	margin: 0 0 var(--space-5);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.15rem, 1vw + 0.95rem, 1.35rem);
	letter-spacing: 0.06em;
	line-height: 1.45;
	color: var(--color-accent);
}

.sealant-heading--accent {
	color: var(--color-accent);
	letter-spacing: 0.04em;
}

.sealant-subheading {
	margin: var(--space-5) 0 var(--space-4);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.sealant-divider {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--space-7) 0;
}

/* Image placeholders (swappable later) */
.figure-slot {
	margin: 0 0 var(--space-4);
}

.figure-slot--wide {
	margin-top: var(--space-5);
}

.figure-slot__frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 12rem;
	padding: var(--space-5);
	text-align: center;
	background:
		repeating-linear-gradient(
			-45deg,
			rgba(229, 101, 138, 0.04),
			rgba(229, 101, 138, 0.04) 8px,
			rgba(255, 255, 255, 0.55) 8px,
			rgba(255, 255, 255, 0.55) 16px
		);
	border: 1px dashed rgba(229, 101, 138, 0.45);
	color: var(--color-text-muted);
}

.figure-slot--wide .figure-slot__frame {
	min-height: 11rem;
}

.figure-slot__label {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(229, 101, 138, 0.3);
}

.figure-slot__topic {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: var(--color-text);
}

.figure-slot__hint {
	max-width: 22rem;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.figure-slot__caption {
	margin: 0.55rem 0 0;
	font-size: 0.8125rem;
	text-align: center;
	color: var(--color-text-muted);
}

/* Sealant: why + merit list left + mechanism image right */
.sealant-merit-layout {
	margin: 0;
	align-items: start;
}

.sealant-merit-layout__text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.sealant-merit-layout .sealant-heading {
	margin-bottom: var(--space-4);
}

.sealant-why-block .prose > p:last-child {
	margin-bottom: 0;
}

.sealant-mechanism {
	margin: 0;
}

.sealant-mechanism__frame {
	margin: 0;
	max-width: none;
	background: transparent;
	border: 0;
}

.sealant-mechanism__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 800px) {
	.sealant-merit-layout.content-grid--media-side.media-right {
		grid-template-columns: 1.25fr 1fr;
		gap: var(--space-5) var(--space-6);
		align-items: start;
	}

	.sealant-mechanism {
		position: sticky;
		top: calc(var(--header-h) + 1rem);
	}
}

@media (max-width: 799px) {
	.sealant-mechanism {
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		order: 3;
		width: 100%;
		max-width: 20rem;
		text-align: center;
	}

	.sealant-merit-layout {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.sealant-mechanism__frame {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Sealant: merit as list (not cards) */
.sealant-merit-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sealant-merit-list li {
	position: relative;
	margin: 0;
	padding: 1rem 0 1rem 1.55rem;
	border-bottom: 1px solid rgba(91, 77, 68, 0.12);
}

.sealant-merit-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sealant-merit-list li:first-child {
	padding-top: 0.15rem;
}

.sealant-merit-list li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 1.35rem;
	width: 0.5rem;
	height: 0.5rem;
	border: 1.5px solid var(--color-accent);
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}

.sealant-merit-list li:first-child::before {
	top: 0.5rem;
}

.sealant-merit-list li::after {
	content: "";
	position: absolute;
	left: 0.325rem;
	top: 1.525rem;
	width: 0.15rem;
	height: 0.15rem;
	border-radius: 50%;
	background: var(--color-accent);
}

.sealant-merit-list li:first-child::after {
	top: 0.675rem;
}

.sealant-merit-list__title {
	display: block;
	margin: 0 0 0.35rem;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: var(--color-text);
}

.sealant-merit-list p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.85;
	color: var(--color-text);
}

.sealant-flow-diagram {
	margin-top: var(--space-5);
}

.sealant-flow-diagram__frame {
	margin: 0 auto;
	max-width: 52rem;
	background: transparent;
	border: 0;
}

.sealant-flow-diagram__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 799px) {
	.sealant-flow-diagram__frame {
		max-width: none;
	}
}

/* Merit / feature cards */
.merit-cards {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.merit-cards--3 {
	gap: var(--space-4);
}

@media (min-width: 720px) {
	.merit-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.merit-card {
	margin: 0;
	padding: var(--space-5);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-accent);
}

.merit-card__visual {
	margin: 0 0 var(--space-4);
	overflow: hidden;
	background: #fff;
}

.merit-card__visual img {
	display: block;
	width: 60%;
	height: auto;
	margin: 0 auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
}

@media (max-width: 719px) {
	.merit-card__visual img {
		width: 40%;
	}
}

.tmj-symptom-cards .merit-card__title {
	margin-top: 0;
}

.merit-card__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	color: var(--color-text);
	line-height: 1.45;
}

.page-fluoride .merit-card__title {
	font-weight: 700;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
}

.fluoride-diagram {
	margin-top: var(--space-5);
}

.fluoride-diagram__frame {
	margin: 0 auto;
	max-width: 52rem;
	background: #fff;
}

.fluoride-diagram__frame img {
	display: block;
	width: 100%;
	height: auto;
}

.mi-flavor-diagram {
	margin-top: var(--space-5);
}

.mi-flavor-diagram__frame {
	margin: 0 auto;
	max-width: 52rem;
	background: #fff;
	border: 0;
}

.mi-flavor-diagram__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 799px) {
	.mi-flavor-diagram__frame {
		max-width: none;
	}
}

.merit-card__sub {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 1px solid var(--color-border);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--color-text-muted);
	background: rgba(255, 255, 255, 0.85);
}

.page-fluoride .mi-paste-intro {
	margin-top: 0;
	margin-bottom: 2em;
	line-height: 1.9;
}

.mi-synergy-heading {
	font-weight: 700;
}

.mi-role-list {
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.mi-synergy__text > p {
	margin: 0 0 var(--space-4);
	line-height: 1.9;
}

.mi-synergy__figure {
	margin: 0;
}

.mi-synergy__frame {
	margin: 0;
	max-width: none;
	background: transparent;
	border: 0;
}

.mi-synergy__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 800px) {
	.mi-synergy.content-grid--media-side.media-right {
		grid-template-columns: 1.35fr 1fr;
		align-items: start;
	}

	.mi-synergy__figure {
		position: sticky;
		top: calc(var(--header-h) + 1rem);
	}
}

@media (max-width: 799px) {
	.mi-synergy__figure {
		margin-top: var(--space-4);
	}

	.mi-synergy__frame {
		max-width: 20rem;
		margin-left: auto;
		margin-right: auto;
	}
}

.mi-role-list li {
	position: relative;
	margin: 0;
	padding: 1.1rem 0 1.1rem 1.35rem;
}

.mi-role-list li:first-child {
	padding-top: 0.15rem;
}

.mi-role-list li:last-child {
	padding-bottom: 0;
}

/* リスト装飾：左縦線 + 丸点 */
.mi-role-list li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(229, 101, 138, 0.35);
}

.mi-role-list li:first-child::before {
	top: 0.55rem;
}

.mi-role-list li:last-child::before {
	bottom: auto;
	height: 0.85rem;
}

.mi-role-list li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35rem;
	width: 0.5rem;
	height: 0.5rem;
	border: 1.5px solid var(--color-accent);
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}

.mi-role-list li:first-child::after {
	top: 0.55rem;
}

.mi-role-list__title {
	display: block;
	margin: 0 0 0.3rem;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: var(--color-accent);
}

.mi-role-list__label {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.2em 0.55em;
	border: 1px solid var(--color-text);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--color-text);
	background: transparent;
}

.mi-role-list__text {
	display: block;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--color-text);
}

.merit-card p {
	margin: 0;
	line-height: 1.8;
	font-size: 0.95rem;
	color: var(--color-text);
}

/* Before / after compare */
.compare-grid {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 640px) {
	.compare-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
}

/* Treatment flow */
.flow-steps {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
	counter-reset: sealant-step;
}

.flow-steps__item {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
}

.flow-steps__item:first-child {
	padding-top: 0;
}

.flow-steps__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.flow-steps__num {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	font-family: var(--font-serif);
	font-size: 1rem;
	letter-spacing: 0.04em;
	color: var(--color-white);
	background: var(--color-accent);
	line-height: 1;
}

.flow-steps__title {
	margin: 0 0 0.35rem;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.flow-steps__body p {
	margin: 0;
	line-height: 1.8;
	color: var(--color-text);
}

/* Card style for sealant procedure flow */
.flow-steps--cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: 0 0 var(--space-5);
}

.flow-steps--cards .flow-steps__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.85);
}

.flow-steps--cards .flow-steps__item:first-child,
.flow-steps--cards .flow-steps__item:last-child {
	padding: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.flow-steps--cards .flow-steps__num {
	width: 2.1rem;
	height: 2.1rem;
	font-size: 0.95rem;
	flex-shrink: 0;
}

.flow-steps--cards .flow-steps__title {
	margin: 0 0 0.45rem;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
}

.flow-steps--cards .flow-steps__body p {
	font-size: 0.95rem;
	line-height: 1.8;
}

@media (min-width: 640px) {
	.flow-steps--cards {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
	}
}

@media (min-width: 960px) {
	.flow-steps--cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

/* Notes */
.note-cards {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.note-cards {
		grid-template-columns: 1fr 1fr;
	}

	.note-cards--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.note-card {
	margin: 0;
	padding: var(--space-5);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	list-style: none;
}

.note-card__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.note-card p {
	margin: 0;
	line-height: 1.8;
	font-size: 0.95rem;
}

/* Synergy banner */
.point-banner {
	margin: 0 0 var(--space-5);
	padding: var(--space-5);
	background: linear-gradient(115deg, rgba(255, 224, 232, 0.55) 0%, rgba(255, 248, 245, 0.9) 100%);
	border: 1px solid rgba(229, 101, 138, 0.28);
}

.point-banner__lead {
	margin: 0 0 var(--space-3);
	font-family: var(--font-serif);
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}

.point-banner p {
	margin: 0;
	line-height: 1.8;
}

/* Role cards (MI paste / fluoride) */
.role-cards {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.role-cards {
		grid-template-columns: 1fr 1fr;
	}

	.role-cards--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 560px) and (max-width: 719px) {
	.role-cards--4 {
		grid-template-columns: 1fr 1fr;
	}
}

.role-card {
	padding: var(--space-5);
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid var(--color-border);
}

.role-card__eyebrow {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-accent);
}

.role-card__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.role-card p {
	margin: 0;
	line-height: 1.8;
	font-size: 0.95rem;
}

/* Allergy / important notice */
.alert-box {
	padding: var(--space-5);
	background: rgba(229, 101, 138, 0.08);
	border: 1px solid rgba(229, 101, 138, 0.35);
}

.alert-box__label {
	margin: 0 0 var(--space-3);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-accent);
}

.alert-box p {
	margin: 0;
	line-height: 1.85;
	color: var(--color-text);
}

.alert-box p + p {
	margin-top: var(--space-3);
}

/* Nested prose spacing inside sealant page */
.sealant-page .prose > p:last-child {
	margin-bottom: 0;
}

@media (max-width: 799px) {
	.sealant-page .content-grid--media-side {
		grid-template-columns: 1fr;
	}

	.figure-slot__frame {
		min-height: 10.5rem;
	}
}

/* TMJ lead: symptoms → conclusion + figure */
.tmj-lead-layout {
	margin: 0;
}

.tmj-lead-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-5);
	min-width: 0;
}

.tmj-lead-symptoms {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.2rem;
}

.tmj-lead-symptoms li {
	position: relative;
	margin: 0;
	padding: 0.35rem 0 0.35rem 1.65rem;
	font-family: var(--font-serif);
	font-size: clamp(1.05rem, 0.5vw + 0.98rem, 1.2rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--color-text);
}

/* independent mark per item (not a connected line) */
.tmj-lead-symptoms li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 50%;
	width: 0.55rem;
	height: 0.55rem;
	margin-top: -0.275rem;
	border: 1.5px solid var(--color-accent);
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}

.tmj-lead-symptoms li::after {
	content: "";
	position: absolute;
	left: 0.275rem;
	top: 50%;
	width: 0.2rem;
	height: 0.2rem;
	margin-top: -0.1rem;
	border-radius: 50%;
	background: var(--color-accent);
}

.tmj-lead-hook {
	margin: 0;
	padding-top: 0.15rem;
	font-family: var(--font-serif);
	font-size: clamp(1.15rem, 0.8vw + 1rem, 1.4rem);
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.65;
	color: var(--color-text);
}

.tmj-lead-figure {
	margin: 0;
}

.tmj-causes-figure {
	margin-top: var(--space-5);
}

.tmj-causes-figure__frame {
	margin: 0 auto;
	max-width: 52rem;
	background: transparent;
	border: 0;
}

.tmj-causes-figure__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 799px) {
	.tmj-causes-figure__frame {
		max-width: none;
	}
}

/* TMJ selfcare: square figure left, steps right */
.tmj-selfcare-layout {
	margin: var(--space-5) 0 0;
	align-items: start;
}

.tmj-selfcare-figure {
	margin: 0;
	width: 100%;
	max-width: 18rem;
}

.tmj-selfcare-figure__frame {
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	min-height: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	max-width: none;
	background: transparent;
	border: 0;
	overflow: hidden;
}

.tmj-selfcare-figure__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.tmj-selfcare-steps {
	margin: 0;
	min-width: 0;
}

.tmj-selfcare-steps .flow-steps__item:first-child {
	padding-top: 0;
}

@media (min-width: 800px) {
	.tmj-selfcare-layout.content-grid--media-side {
		grid-template-columns: minmax(12rem, 0.9fr) 1.35fr;
		gap: var(--space-5) var(--space-6);
		align-items: start;
	}

	.tmj-selfcare-figure {
		position: sticky;
		top: calc(var(--header-h) + 1rem);
		max-width: none;
	}
}

@media (max-width: 799px) {
	.tmj-selfcare-layout {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.tmj-selfcare-figure {
		max-width: 16rem;
		margin-left: auto;
		margin-right: auto;
		order: -1;
	}
}

.tmj-lead-figure__frame {
	margin: 0;
	max-width: none;
	background: transparent;
	border: 0;
}

.tmj-lead-figure__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 800px) {
	.tmj-lead-layout.content-grid--media-side.media-right {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
		gap: var(--space-5) var(--space-6);
	}
}

@media (max-width: 799px) {
	.tmj-lead-figure {
		margin-top: 0.25rem;
	}

	.tmj-lead-figure__frame {
		max-width: 22rem;
		margin-left: auto;
		margin-right: auto;
	}

	.tmj-lead-copy {
		gap: var(--space-4);
	}
}

.note-cards--stack {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.note-cards--stack .note-card {
	list-style: none;
}

/* TMJ: clinic treatments — list left, mouthpiece image right */
.tmj-clinic-layout {
	margin: 0;
}

.tmj-clinic-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmj-clinic-list__item {
	margin: 0;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(91, 77, 68, 0.1);
}

.tmj-clinic-list__item:first-child {
	padding-top: 0.1rem;
}

.tmj-clinic-list__item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.tmj-clinic-list__title {
	margin: 0 0 0.4rem;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: var(--color-text);
}

.tmj-clinic-list__item--main .tmj-clinic-list__title {
	font-size: 1.15rem;
}

.tmj-clinic-list__item p {
	margin: 0;
	line-height: 1.85;
	font-size: 0.95rem;
	color: var(--color-text);
}

.tmj-clinic-list__item:not(.tmj-clinic-list__item--main) p {
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.tmj-clinic-figure {
	margin: 0;
}

.tmj-clinic-figure__frame {
	margin: 0;
	max-width: none;
	background: transparent;
	border: 0;
}

.tmj-clinic-figure__frame img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 800px) {
	.tmj-clinic-layout.content-grid--media-side.media-right {
		grid-template-columns: 1.35fr 1fr;
		align-items: start;
		gap: var(--space-5) var(--space-6);
	}

	.tmj-clinic-figure {
		position: sticky;
		top: calc(var(--header-h) + 1rem);
	}
}

@media (max-width: 799px) {
	.tmj-clinic-figure {
		margin-top: var(--space-5);
	}

	.tmj-clinic-figure__frame {
		max-width: 22rem;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- Guide detail media (treatment6 / treatment9) ---------- */

.wisdom-page .treat-title,
.whitening-page .treat-title {
	margin-bottom: var(--space-7);
}

.wisdom-page .sealant-section.prose > p,
.whitening-page .sealant-section.prose > p {
	line-height: 1.9;
}

.wisdom-page .sealant-section.prose > p + p,
.whitening-page .sealant-section.prose > p + p {
	margin-top: 0;
	margin-bottom: 0;
}

.guide-figures,
.wisdom-figures {
	margin: 0;
}

.guide-figure,
.wisdom-figure {
	margin: 0;
}

.guide-figure .media-frame,
.wisdom-figure .media-frame {
	margin: 0 0 0.55rem;
	background: #f7f4f2;
	padding: 0.65rem;
	border: 1px solid var(--color-border);
}

.guide-figure .media-frame img,
.wisdom-figure .media-frame img {
	width: 100%;
	height: auto;
	display: block;
}

.guide-figure .caption,
.wisdom-figure .caption {
	margin: 0;
	text-align: center;
}

.wisdom-page .point,
.whitening-page .point {
	margin: 0;
	padding: var(--space-5);
	line-height: 1.9;
	background: linear-gradient(115deg, rgba(255, 224, 232, 0.55) 0%, rgba(255, 248, 245, 0.9) 100%);
	border-left: 3px solid var(--color-accent);
}

.whitening-plans {
	display: grid;
	gap: var(--space-6);
}

.whitening-plan {
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.whitening-plan:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.whitening-plan .price-row {
	margin: 0 0 var(--space-3);
}

.whitening-plan .price-row h4 {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.whitening-plan p {
	margin: 0;
	line-height: 1.9;
	color: var(--color-text);
}

@media (max-width: 799px) {
	.page-wisdom .wisdom-figure .media-frame,
	.page-whitening .guide-figure .media-frame {
		max-width: 22rem;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0.55rem;
	}
}