@charset "utf-8";

/* =========================================================
   松林歯科 リニューアル 試作用スタイル
   ※ 既存の layout.css とは独立。
   ※ index_renewal.html / menu_*_renewal.html などで共用。
   ========================================================= */

:root {
	--sky: #d9f1fa;          /* ページの水色背景 */
	--sky-deep: #a5d9ef;     /* 雲を重ねたときに下から覗く濃いめの水色 */
	--sky-pale: #d9f1fa;     /* 下部セクションの水色（ヒーローと同色） */
	--sky-soft: #f3fafc;     /* 帯用のごく薄い水色（シマシマを抑える） */
	--brown: #5c4433;
	--brown-soft: #8b7666;
	--mint: #a9d3ae;
	--mint-deep: #8cbf94;
	--cream: #fdf7dd;
	--white: #fff;
	--shadow: 0 10px 22px rgba(80, 140, 165, .22);
	/* 手書きフレーム線の内側までの余白（frame_mid 実測 ≈ 2%） */
	--frame-inset: clamp(16px, 2.2vw, 36px);
	--cloud-mask: url("data:image/png;base64,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");
	--font: "Zen Maru Gothic", "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN",
	        "Noto Sans JP", "游ゴシック体", "Yu Gothic", sans-serif;
	/* ナビ・見出しの英語ラベル（装飾用スクリプト） */
	--font-en: "Damion", cursive;
	/* 院長コメント用のやわらかめ明朝 */
	--font-mincho: "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
	               "游明朝", "Yu Mincho", serif;
}

* { box-sizing: border-box; }

html {
	/* smooth はトラックパッド等で「止まってからカクン」に見えやすいので使わない */
	scroll-behavior: auto;
	font-size: 108%; /* 既定16pxの少し上。年配の患者さん向けに本文を読みやすく */
	/* 安全網：iPhoneは body の横クリップだけではページ幅の広がりを止めない */
	overflow-x: clip;
}
/* html に overflow を指定すると body の overflow が画面に効かなくなるため、
   メニューを開いた時の背面スクロール止めは html 側で行う */
html:has(> body.is-nav-open) {
	overflow: hidden;
}

body {
	position: relative;
	margin: 0;
	font-family: var(--font);
	color: var(--brown);
	background: var(--sky);
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
body.is-nav-open {
	overflow: hidden;
}

img { max-width: 100%; height: auto; vertical-align: bottom; }

/* ページ全体を囲む手書き風の枠（上・中間の繰り返し・下） */
.page-frame {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: .62;
	background-image:
		url(../images/renewal/frame_top.png),
		url(../images/renewal/frame_bottom.png),
		url(../images/renewal/frame_mid.png);
	background-position: top center, bottom center, top center;
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-size: 100% auto;
}

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

.container {
	width: min(1200px, 92%);
	margin-inline: auto;
}
.container--narrow { width: min(900px, 90%); }


/* ---------------------------------------------------------
   見出し
   余白目安: 日本語→装飾線→英字 各 8〜12px / 見出しブロック→本文 40〜60px
   --------------------------------------------------------- */
.ttl {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
	text-align: center;
	line-height: 1.4;
}
.ttl__ja {
	display: block;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: .12em;
	/* letter-spacing の末尾余白で中央が左に寄るのを補正 */
	margin-right: -.12em;
}
.ttl__ja::after {
	content: "";
	display: block;
	width: 0;
	height: .65em;
	margin: .28rem auto .2rem;
	border-left: 2px dotted var(--brown);
}
.ttl__en {
	display: block;
	margin-top: 0;
	font-family: var(--font-en);
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--brown-soft);
}


/* ---------------------------------------------------------
   ボタン
   --------------------------------------------------------- */
.btn-wrap { margin: clamp(2.2rem, 3.5vw, 2.8rem) 0 0; text-align: center; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-width: 200px;
	padding: .85em 2.2em;
	border: 0;
	border-radius: 12px;
	background: #94cf99;
	color: var(--white);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-decoration: none;
	cursor: pointer;
	transition: background .25s, transform .25s;
}
.btn:hover { background: #7fbf85; transform: translateY(-2px); }
.btn--sns { background: var(--brown); border-radius: 12px; }
.btn--sns:hover { background: #74563f; }


/* =========================================================
   HERO
   ========================================================= */
.hero {
	position: relative;
	padding: 0 0 3.2rem;
	background: var(--sky);
	/* overflow-x:hidden + overflow-y:visible は y が auto 扱いになり、
	   ヒーロー内スクロールが発生して「最初動かずカクン」の原因になる */
	overflow: visible;
}
.hero__inner {
	position: relative;
	width: min(1420px, calc(100% - 2 * var(--frame-inset)));
	margin-inline: auto;
}

.hero__contact {
	position: absolute;
	top: clamp(1.4rem, 2.8vw, 2.2rem);
	left: 0;
	z-index: 4;
	margin: 0;
	padding-left: 0;
}
.hero__contact-lead { margin: 0; font-size: 1.1rem; letter-spacing: .08em; }
.hero__contact-tel  { margin: -.15em 0 0; font-size: 1.95rem; font-weight: 700; letter-spacing: .05em; }

/* 左右は手書き枠の内側まで／高さは画面いっぱい（矩形クリップはしない） */
.hero__stage {
	position: relative;
	display: block;
	width: calc(100vw - 2 * var(--frame-inset));
	max-width: calc(100vw - 2 * var(--frame-inset));
	margin-left: calc(50% - 50vw + var(--frame-inset));
	margin-right: calc(50% - 50vw + var(--frame-inset));
	margin-top: 0;
	margin-bottom: 0;
	min-height: 100svh;
	height: auto;
	overflow: visible;
}

.hero__carousel {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* 絶対配置カードの高さ確保用 */
	min-height: 100svh;
}

.hero__card {
	position: absolute;
	top: 10%;
	width: 30%;
	aspect-ratio: 720 / 480;
	z-index: 1;
}
/* PC: 写真雲は左（小）＋中央（大）のみ。右はテキスト雲 */
.hero__card.is-left {
	left: 6%;
	top: 37%;
	width: 23%;
	z-index: 1;
}
.hero__card.is-center {
	left: 15%;
	top: 0%;
	width: 58%;
	z-index: 2;
}
@media (min-width: 901px) {
	.hero__card.is-left,
	.hero__card.is-center {
		/* 右側が少し上 */
		transform: rotate(-3.5deg);
		transform-origin: 50% 55%;
	}
}

.hero__card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	line-height: 0;
}
/* PC：JSタイムラインで伸縮（枠ごと）。写真切替は cloud-photo 内のみ */
@media (min-width: 901px) {
	.hero__carousel .hero__card-inner {
		transform: scale(1);
		transform-origin: 50% 55%;
		transition: transform var(--scale-ms, 3.4s) cubic-bezier(.37, .0, .2, 1);
	}
	.hero__carousel .hero__card-inner.is-scale-up {
		transform: scale(1.06);
	}
	/* 左は小さいので伸縮を強めにしないと目立たない */
	.hero__carousel .hero__card.is-left .hero__card-inner.is-scale-up {
		transform: scale(1.14);
	}
	.hero__carousel .hero__card.is-center .hero__card-inner.is-scale-up {
		transform: scale(1.06);
	}
	.hero__carousel .is-floating[data-anim="photo"] {
		animation: none;
	}
}

/* テキスト雲：右寄り固定（写真雲の右側）。カルーセル移動なし */
.hero__bubble {
	position: absolute;
	left: auto;
	right: 10%;
	top: 28%;
	bottom: auto;
	width: min(54%, 560px);
	aspect-ratio: 1138 / 754;
	z-index: 5;
	pointer-events: none;
}

/* スマホ用レイヤー雲（PCでは非表示） */
.hero__photo {
	display: none;
	position: relative;
	aspect-ratio: 720 / 480;
}

.cloud-layer {
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}
/* 水色影：写真と同じ雲マスク。写真より少し大きく、下へずらす */
.hero__card .cloud-layer--blue,
.hero__photo .cloud-layer--blue {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-color: var(--sky-deep);
	background-image: url(../images/renewal/cloud_blue.png?v=2);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	-webkit-mask-image: var(--cloud-mask);
	mask-image: var(--cloud-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transform: translateY(2.6%) scale(1.03);
	transform-origin: 50% 50%;
}
/* 白フレーム：写真よりすこーしだけ大きく */
.cloud-layer--frame {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	z-index: 3;
	transform: scale(1.03);
	transform-origin: 50% 50%;
}
.cloud-layer--text {
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1;
}

/* 写真：白フレームと同じ位置・大きさ・同じ雲マスク */
.cloud-photo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	-webkit-mask-image: var(--cloud-mask);
	mask-image: var(--cloud-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background: var(--white);
	overflow: hidden;
}
.cloud-photo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	opacity: 0;
	transition: opacity var(--fade-ms, 2.6s) ease-in-out;
	pointer-events: none;
	user-select: none;
}
.cloud-photo__img.is-active {
	opacity: 1;
}
/* 看板が右寄りなので外観写真は右寄せ */
.cloud-photo__img--sign {
	object-position: 72% 45%;
}

/* --- スマホ用サイトバー（PCでは非表示） --- */
.site-bar {
	display: none;
}

/* --- グローバルナビ --- */
.gnav {
	position: relative;
	z-index: 6;
	width: min(1080px, 100%);
	margin-inline: auto;
	/* PC：雲とロゴの間隔（スマホは @media max-width:900px 内で別指定）
	   写真雲に被らないよう、PC側でさらに調整 */
	margin-top: -21.5rem;
}
.gnav__backdrop,
.gnav__close {
	display: none;
}
.gnav__panel {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	/* ロゴとの左右間隔を詰めて中央寄りに */
	gap: clamp(.2rem, 1vw, .8rem);
}
.gnav__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	/* 項目幅を揃えて、ラベル長に関係なくアイコン間隔を均一に */
	gap: clamp(.3rem, 1vw, .85rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* PC：左右のアイコンをロゴ（中央）側へ寄せる */
.gnav__list--left {
	justify-items: stretch;
}
.gnav__list--right {
	justify-items: stretch;
}
.gnav__item {
	min-width: 0;
}
.gnav__logo { margin: 0; }
.gnav__logo img { width: clamp(180px, 20vw, 270px); }

.gnav__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: .2em;
	width: 100%;
	margin: 0;
	padding: .5em .15em;
	border: 0;
	background: none;
	color: var(--brown);
	font: inherit;
	font-family: inherit;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: transform .25s, opacity .25s;
}
a.gnav__btn { color: var(--brown); }
.gnav__btn:hover { transform: translateY(-4px); opacity: .75; }

.gnav__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}
.gnav__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gnav__ja {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 1.25em;
	max-width: 100%;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.25;
	white-space: nowrap;
}
.gnav__en {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 1em;
	font-family: var(--font-en);
	font-size: 1.15rem;
	font-weight: 400;
	letter-spacing: .02em;
}

/* PCではサブメニュー非表示（アンカー遷移のみ） */
.gnav__sub {
	display: none;
}


/* ---------------------------------------------------------
   セクション共通 / 波型の区切り
   余白目安: 同系セクション内は狭め、背景切替・雲境界では取りすぎない
   --------------------------------------------------------- */
.section { position: relative; padding: clamp(3.75rem, 7vw, 5.5rem) 0; }

.section--concept {
	background: var(--white);
	/* モクモクは白セクション側に置き、上方向へ重ねる */
	margin-top: 0;
	padding-top: clamp(4.5rem, 8vw, 6.5rem);
	padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
	overflow: visible;
}
.section--concept > *,
.section--page > * {
	position: relative;
	z-index: 1;
}
.section--concept > .edge,
.section--page > .edge {
	z-index: 3;
}
.section--doctor  {
	background: var(--white);
	padding-top: clamp(2.75rem, 5vw, 3.75rem);
	padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
}
.section--menu {
	background: var(--white);
	padding-top: clamp(2.75rem, 5vw, 3.75rem);
	/* 下モクモクにクローバーが近づきすぎないよう確保 */
	padding-bottom: clamp(5.5rem, 9vw, 7.5rem);
}
#menu,
#doctor,
#access,
#trouble,
#content,
#tsumemono,
#ireba,
#shishubyo,
#tokucho {
	/* スマホの sticky サイトバー分を考慮 */
	scroll-margin-top: 4.5rem;
}
@media (min-width: 901px) {
	#content,
	#tokucho {
		/* 白帯メニューが画面上部に見える位置 */
		scroll-margin-top: 0.75rem;
	}
	#tsumemono,
	#ireba,
	#shishubyo {
		scroll-margin-top: 1.25rem;
	}
}
.section--trouble {
	background: var(--sky);
	/* 上モクモクの高さ＋見出しまでの呼吸（コンテンツが波に被らない） */
	padding-top: calc(clamp(100px, 12vw, 168px) + clamp(3.25rem, 5vw, 4.5rem));
	padding-bottom: clamp(3.75rem, 7vw, 5rem);
}
.section--info {
	background: var(--sky);
	/* 同系（水色）内なのでお悩みとの間隔は広げすぎない */
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-bottom: clamp(4.5rem, 8vw, 6.5rem);
}

/* 白い背景の上端・下端の雲型 */
.edge {
	position: absolute;
	left: 0;
	width: 100%;
	height: clamp(100px, 12vw, 168px);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}
.edge--top {
	top: 0;
	bottom: auto;
	z-index: 3;
	transform: translateY(-90%);
	background-image: url(../images/renewal/edge_top.png);
}
.edge--bottom {
	top: -1px;
	background-image: url(../images/renewal/edge_bottom.png);
}

/* PC：モクモク位置は維持しつつ、白い直線が波を横切らないようにする */
@media (min-width: 901px) {
	/* 最初の画面＝雲＋ナビ＋診療科目の白ライン。
	   下の余白は白モクモクが白ラインに被る分だけ（見積もりで引かない） */
	.hero {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100svh;
		height: 100dvh;
		padding-bottom: calc(clamp(100px, 12vw, 168px) * 0.42);
	}
	.hero__inner {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	.hero__stage {
		flex: 1 1 auto;
		min-height: 0;
		aspect-ratio: auto;
		container-type: size;
		overflow: visible;
	}
	/* 収まる画面では今の比率（11/5）のまま。低い画面だけ残り高さに合わせて縮む */
	.hero__carousel {
		width: 100cqi;
		height: calc(100cqi * 5 / 11);
		min-height: 0;
		transform: scale(min(1, 100cqh / (100cqi * 5 / 11)));
		transform-origin: top center;
	}
	.gnav,
	.menu-subnav--toggle,
	.hero .menu-subnav {
		flex: none;
	}
	.gnav {
		margin-top: .4rem;
	}

	/* ---- PC FV：視覚優先順位の試作（戻すなら git checkout 0797870 -- css） ---- */
	/* 1. 中央メイン写真をやや大きく */
	.hero__card.is-center {
		left: 13%;
		width: 62%;
		z-index: 3;
	}
	/* 5. 左サブ写真を一段弱く */
	.hero__card.is-left {
		left: 5%;
		width: 20%;
		z-index: 1;
		opacity: .92;
	}
	.hero__carousel .hero__card.is-left .hero__card-inner.is-scale-up {
		transform: scale(1.08);
	}
	/* キャッチ雲：装飾が勝ちすぎないよう枠を約12%縮小（文言は画像一体のため同率） */
	.hero__bubble {
		right: 9%;
		top: 26%;
		width: min(47.5%, 490px);
		z-index: 4;
	}
	/* 2. ロゴはブランド認識できる範囲で一段小さく */
	.gnav__logo img {
		width: clamp(155px, 16.5vw, 228px);
	}
	/* 4. ナビ：年配の患者さん向けに日本語とアイコンを一段大きく */
	.gnav__icon {
		width: 56px;
		height: 56px;
	}
	.gnav__item {
		container-type: inline-size;
	}
	.gnav__ja {
		/* 「インスタグラム」（7文字）が隣の項目とぶつからない大きさまでだけ縮める
		   （項目幅＋項目間の隙間 .gnav__list gap まで使ってよい） */
		font-size: min(1.05rem, calc((100cqi + clamp(.3rem, 1vw, .85rem) - 6px) / 7.2));
		opacity: .92;
	}
	.gnav__en {
		font-size: 1.08rem;
		opacity: .82;
	}
	.gnav__btn:hover .gnav__ja,
	.gnav__btn:hover .gnav__en {
		opacity: 1;
	}
	/* 3. 電話は行動枠として主張を弱める */
	.hero__contact-lead {
		font-size: .92rem;
		color: var(--brown-soft);
	}
	.hero__contact-tel {
		font-size: 1.55rem;
		font-weight: 600;
	}
	.section--concept,
	.section--page {
		margin-top: 0;
		/* 谷のあいだに見えるのは水色。白の平面は谷より下から */
		background: var(--sky);
	}
	.section--concept::before,
	.section--page::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		/* .edge 高さの約半分より下 = モクモクの谷より下 */
		top: calc(clamp(100px, 12vw, 168px) * 0.55);
		bottom: 0;
		background: var(--white);
		z-index: 0;
	}
	/* 下層：下端モクモクの谷にも水色を見せる */
	.section--page::before {
		bottom: calc(clamp(100px, 12vw, 168px) * 0.45);
	}
	.section--page > .edge--bottom {
		top: auto;
		bottom: 0;
		transform: translateY(42%);
	}
	/* モクモクのはみ出し分を確保し、フッター上の白帯ナビと重ねない */
	.section--page {
		margin-bottom: calc(clamp(100px, 12vw, 168px) * 0.5);
	}
	.edge--top {
		transform: translateY(-42%);
	}
	.concept__br {
		display: none;
	}
	.concept__text {
		container-type: inline-size;
	}
	.concept__line {
		white-space: nowrap;
		/* 1行（約50文字）が枠にほぼ収まる大きさまでだけ縮める（左右数pxは余白にはみ出してよい） */
		font-size: min(1.05rem, 2.02cqi);
	}
	.section--trouble {
		/* PCはエッジ実寸に合わせ、見出しが波の下に来るように */
		padding-top: calc(clamp(100px, 12vw, 168px) + clamp(3.75rem, 5.5vw, 5rem));
	}
	.info__sns .ttl,
	.info__hours .ttl {
		align-items: flex-start;
		text-align: left;
	}
	.info__hours {
		margin-top: 1.75rem;
	}
	.info__sns .ttl__ja,
	.info__hours .ttl__ja {
		margin-right: 0;
	}
	.info__sns .ttl__ja::after,
	.info__hours .ttl__ja::after {
		display: none;
	}
}


/* ---------------------------------------------------------
   松林歯科とは
   --------------------------------------------------------- */
.concept__illust {
	margin: 0 auto 1.35rem;
	max-width: min(560px, 78%);
	text-align: center;
}

.concept__text {
	margin: 0;
	text-align: center;
	font-size: 1.05rem;
}
.concept__line {
	display: block;
}
.concept__line + .concept__line {
	margin-top: .85rem;
}


/* ---------------------------------------------------------
   院長紹介
   --------------------------------------------------------- */
.doctor {
	display: grid;
	grid-template-columns: 1fr 1.45fr;
	grid-template-areas:
		"intro photo"
		"career photo";
	gap: clamp(1.25rem, 2.8vw, 2.5rem);
	align-items: start;
}
.doctor__intro { grid-area: intro; }
.doctor__lead {
	margin: 0 0 1rem;
	font-family: var(--font-mincho);
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 2.05;
}
.doctor__name {
	margin: 0;
	text-align: right;
	font-family: var(--font-mincho);
	font-weight: 600;
	letter-spacing: .12em;
}

.career {
	grid-area: career;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: 18px;
	background: var(--sky);
}
.career__ttl { margin: 0 0 .7rem; font-size: 1rem; letter-spacing: .1em; }
.career__list { margin: 0; }
.career__row { display: flex; gap: 1em; font-size: .9rem; }
.career__row + .career__row { margin-top: .15rem; }
.career__row dt { flex: 0 0 5.5em; font-weight: 500; }
.career__row dd { margin: 0; }

.doctor__photo {
	grid-area: photo;
	margin: 0;
	align-self: end;
}
.doctor__photo img { width: 100%; display: block; }


/* ---------------------------------------------------------
   お悩み
   --------------------------------------------------------- */
.trouble__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(1.25rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.trouble__card {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 108px;
	padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1rem, 1.8vw, 1.5rem);
	border: 5px solid var(--white);
	border-radius: 18px;
	background: rgba(255, 255, 255, .55);
	text-align: center;
	font-weight: 500;
	font-size: .95rem;
	color: var(--brown);
	text-decoration: none;
	box-shadow: 0 0 0 1px rgba(180, 210, 220, .35);
}
.trouble__card:hover {
	color: var(--brown);
	background: rgba(255, 255, 255, .82);
}
.trouble__num {
	position: absolute;
	top: -.35em;
	right: .15rem;
	font-family: var(--font-en);
	font-size: clamp(1.7rem, 2.4vw, 2.2rem);
	font-weight: 400;
	letter-spacing: .02em;
	color: var(--brown);
	line-height: 1;
	z-index: 1;
	pointer-events: none;
}


/* ---------------------------------------------------------
   診療内容
   --------------------------------------------------------- */
.panel {
	padding: clamp(1.5rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.5rem);
	border-radius: 28px;
	background: var(--white);
	box-shadow: var(--shadow);
}

.menu__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/* PC: クローバー間隔 40〜55px */
	gap: clamp(2.5rem, 3.2vw, 3.4rem);
	margin: 0;
	/* ホバーの回転・拡大ではみ出しても切れない余白 */
	padding: .85rem .35rem;
	list-style: none;
	overflow: visible;
}
.menu__item {
	display: grid;
	place-items: center;
	overflow: visible;
}
.menu-scroll {
	overflow: visible;
}
.menu-scroll__btn {
	display: none;
}

.menu-panel__en {
	display: block;
	margin: 0 0 clamp(1.2rem, 3vw, 2rem);
	font-family: var(--font-en);
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1.2;
	color: var(--brown-soft);
	text-align: center;
}
.menu-panel__en::before {
	content: "";
	display: block;
	width: 0;
	height: .65em;
	margin: .28rem auto .2rem;
	border-left: 2px dotted var(--brown);
}
.section--menu .ttl--menu {
	margin-bottom: 0;
}
.section--menu .ttl--menu .ttl__ja::after {
	display: none;
}

/* PC：見出し「診療内容」直下から、menu英字＋クローバーを丸角ぼかし背景で囲む */
@media (min-width: 901px) {
	.section--menu .ttl--menu {
		margin-bottom: .55rem;
	}
	.menu-panel {
		position: relative;
		width: calc(100% + clamp(3.5rem, 7vw, 6rem));
		margin-left: calc(clamp(3.5rem, 7vw, 6rem) / -2);
		padding: .85rem clamp(1.6rem, 3vw, 2.6rem) 1.45rem;
		text-align: center;
	}
	.menu-panel::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		border-radius: 28px;
		background: url(../images/renewal/menu_bg_blur.png) center / cover no-repeat;
		opacity: .48;
		pointer-events: none;
	}
	.menu-panel > * {
		position: relative;
		z-index: 1;
	}
	.menu-panel__en {
		margin: 0 0 .85rem;
	}
	.menu-panel__en::before {
		margin: 0 auto .2rem;
	}
}

.clover {
	display: block;
	width: 100%;
	max-width: 170px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: transform .3s;
	transform-origin: center center;
	will-change: transform;
}
.clover img { width: 100%; }
.clover:hover { transform: rotate(-5deg) scale(1.05); }


/* ---------------------------------------------------------
   Facebook + 診療時間 + アクセス（ひとつの白枠）
   --------------------------------------------------------- */
.info {
	display: grid;
	/* minmax(0, …)：Facebook等の中身の幅で列が広がらないように */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: clamp(1.5rem, 3.5vw, 2.5rem);
	align-items: start;
}

.info__sns .ttl {
	margin-bottom: 1rem;
}

.sns-box {
	width: 100%;
	min-height: 400px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--white);
}
.sns-box .fb-page {
	width: 100%;
	/* 中身（iframe）は Facebook が枠幅で描く。max-width を足すと幅0で消える */
}

.info__access {
	margin-top: clamp(2rem, 4vw, 2.75rem);
	padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
	border-top: 1px dotted #d8cfc6;
}
.btn--sns img { width: 22px; height: 22px; }

.hours-wrap {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #c9b896;
	background: var(--cream);
}
.hours {
	width: 100%;
	border-collapse: collapse;
	background: var(--cream);
	font-size: .9rem;
}
.hours th, .hours td {
	padding: .7em .3em;
	border: 1px solid #e2d6ae;
	text-align: center;
}
.hours thead th { font-weight: 500; }
.hours tbody th { text-align: left; padding-left: .9em; white-space: nowrap; font-weight: 400; }
.hours__blank { background: transparent; border: 0; }
.hours__label {
	display: inline-block;
	margin-right: .5em;
	padding: .1em .8em;
	border-radius: 999px;
	background: var(--brown);
	color: var(--white);
	font-size: .8rem;
}
.mark-o { color: var(--mint-deep); font-weight: 700; }
.mark-x { color: var(--brown); }
.hours__note { margin: .8rem 0 0; font-size: .8rem; color: var(--brown-soft); }
.hours__tel {
	margin: .9rem 0 0;
	text-align: left;
	font-size: clamp(1.25rem, 2.4vw, 1.7rem);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.3;
}
.hours__tel a {
	color: var(--brown);
	text-decoration: none;
}
.hours__tel-num--sp { display: none; }
.hours__tel a:hover {
	opacity: .75;
}
.hours__tel-note {
	margin-left: .55em;
	font-size: .72em;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--brown-soft);
	white-space: nowrap;
}
.hours__tel-note--sp {
	display: none;
}


/* ---------------------------------------------------------
   アクセス
   --------------------------------------------------------- */
.access {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}
.access__col { margin: 0; }
.access__map {
	margin: 0 0 1.2rem;
	border-radius: 16px;
	overflow: hidden;
	border: 1.5px solid #6b5340;
	background: var(--white);
	line-height: 0;
}
.access__map iframe,
.access__map img {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0;
}

.access__info { margin: 0; }
.access__row { display: flex; gap: 1em; padding: .5em 0; border-bottom: 1px dotted #d8cfc6; font-size: .9rem; }
.access__row dt { flex: 0 0 6em; font-weight: 500; white-space: nowrap; }
.access__row dd { margin: 0; }

.access__parking { margin: 0; font-size: .9rem; }


/* ---------------------------------------------------------
   フッター
   --------------------------------------------------------- */
.footer {
	padding: 3rem 1rem 2rem;
	background: var(--sky);
	text-align: center;
}
.footer__logo { margin: 0 0 1rem; }
.footer__logo img { width: clamp(160px, 42vw, 220px); height: auto; }
.footer__text { margin: 0 0 .55rem; font-size: .85rem; }
.footer__contact { margin: 0 0 1.4rem; font-size: .85rem; }
.footer__contact a {
	color: var(--brown);
	text-decoration: underline;
	text-underline-offset: .2em;
}
.footer__contact a:hover { opacity: .75; }
.footer__copy { margin: 0; font-size: .72rem; color: var(--brown-soft); }

/* PC：フッター直上のグローバルナビ帯（スマホは非表示） */
.footer-nav {
	display: none;
}
@media (min-width: 901px) {
	.footer-nav {
		display: block;
		width: 100%;
		margin: 0;
		padding: .7rem clamp(1.2rem, 4vw, 2.5rem);
		border: 0;
		background: rgba(255, 255, 255, .55);
	}
	.footer-nav .menu-subnav__list {
		gap: .55rem clamp(.85rem, 2vw, 1.6rem);
	}
}


/* ---------------------------------------------------------
   下層：ヒーロー内テキスト雲＝見出し枠＋HTMLタイトル
   --------------------------------------------------------- */
/* 見出し枠画像の縦横比に合わせる（TOPの文字入り雲よりやや縦長） */
.hero__bubble:has(.heading-cloud) {
	aspect-ratio: 1628 / 1284;
	container-type: inline-size;
}

.heading-cloud {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
.heading-cloud__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}
.heading-cloud__text {
	position: absolute;
	left: 44%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	margin: 0;
	width: min(68%, 12.5em);
	padding: 0;
	color: var(--brown);
	font-size: clamp(1.2rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.35;
	text-align: center;
	/* letter-spacing の末尾余白で左に寄るのを補正 */
	margin-right: -.14em;
}

.section--page {
	/* 白平面は ::before。モクモク谷に直線が乗らないよう水色ベース */
	background: var(--sky);
	overflow: visible;
	/* 端まで塗る帯（100cqw）の基準。100vw はスクロールバーやiPhoneで画面より広くなる */
	container-type: inline-size;
	padding-top: clamp(4rem, 8vw, 6rem);
	padding-bottom: clamp(4rem, 9vw, 6.5rem);
}
.page-lead {
	margin: 0 0 1.75rem;
	font-size: clamp(1.05rem, 2.2vw, 1.15rem);
}
.page-headline {
	margin: 0 0 1.35rem;
	color: var(--brown);
	font-size: clamp(1.35rem, 3.2vw, 1.85rem);
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.55;
	text-align: center;
}
.page-subttl {
	margin: 1.75rem 0 2rem;
	font-size: clamp(1.15rem, 2.5vw, 1.35rem);
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.4;
}
.container--narrow > .page-headline:first-child,
.container--narrow > .page-subttl:first-child {
	margin-top: 0;
}
.page-note {
	margin: 2.4rem 0 0;
	font-size: .82rem;
	color: var(--brown-soft);
}
.page-subttl + .page-note {
	margin-top: .35rem;
}

/* 文中強調：マーカー緑の濃色テキスト／見出しは蛍光マーカー風 */
.marker {
	color: #5f9a68;
	font-weight: 700;
}
.marker--heading {
	color: inherit;
	font-weight: inherit;
	padding: .08em .18em .02em;
	background-image: linear-gradient(
		transparent 48%,
		rgba(196, 232, 201, .92) 48%
	);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.em-green {
	color: #5f9a68;
	font-weight: 700;
}
a.em-green {
	text-decoration: underline;
	text-decoration-color: #5f9a68;
	text-underline-offset: .22em;
}
a.em-green:hover {
	opacity: .8;
}

/* よくあるご質問（初めての方へ／松林歯科とは） */
.faq-list {
	margin: 0 0 2.4rem;
	padding: 0;
}
.faq-list__item {
	margin: 0 0 1.35rem;
}
.faq-list__item:last-child {
	margin-bottom: 0;
}
.faq-list dt {
	margin: 0 0 .35rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.6;
}
.faq-list dt::before {
	content: "Q. ";
	color: #5f9a68;
}
.faq-list dd {
	margin: 0;
	padding-left: 1.35em;
	line-height: 1.9;
}

.contact-form { margin: .4rem 0 0; }
.contact-form__row { margin: 0 0 1.15rem; }
.contact-form label {
	display: block;
	margin: 0 0 .35rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.contact-form__req {
	margin-left: .35em;
	color: #5f9a68;
	font-size: .8em;
	font-weight: 700;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	max-width: 32rem;
	padding: .7rem .8rem;
	border: 1px solid #d4c8b8;
	border-radius: 10px;
	background: #fff;
	color: var(--brown);
	font: inherit;
	line-height: 1.6;
}
.contact-form textarea { min-height: 11rem; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
	outline: 2px solid #94cf99;
	outline-offset: 2px;
}
.contact-form__note {
	margin: 0 0 .4rem;
	font-size: .92rem;
	line-height: 1.8;
}
.contact-form__err {
	margin: 0 0 1.2rem;
	color: #b85c4a;
	font-weight: 700;
}
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 松林歯科とは：当院の特徴の写真 */
.feature-block {
	position: relative;
	margin: 0 0 2.1rem;
}
.feature-block:last-child {
	margin-bottom: 0;
}
.feature-block .train-block__ttl:first-child {
	margin-top: 0;
}
.feature-block--sky {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 1.5rem max(6%, calc(50vw - min(450px, 45vw)));
	width: 100cqw;
	max-width: 100cqw;
	margin-left: calc(50% - 50cqw);
	margin-right: calc(50% - 50cqw);
	padding: 1.5rem max(6%, calc(50cqw - min(450px, 45cqw)));
	background: var(--sky-soft);
}
.feature-block__photo {
	display: block;
	height: auto;
	pointer-events: none;
}
.feature-block--consult {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 13.2rem;
	column-gap: 1.2rem;
	align-items: center;
}
.feature-block__photo--consult {
	width: 13.2rem;
	justify-self: end;
	margin-top: 1.4rem;
}
.feature-block--diag {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 7.4rem;
	grid-template-areas:
		"ttl ttl"
		"body photo";
	column-gap: 1rem;
	align-items: start;
}
.feature-block--diag .train-block__ttl {
	grid-area: ttl;
}
.feature-block__photo--diag {
	grid-area: photo;
	width: 7.4rem;
	justify-self: end;
	margin-top: .15rem;
}
.feature-block--diag .feature-block__body {
	grid-area: body;
	min-width: 0;
}
.feature-block--anesth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 11.2rem;
	grid-template-areas:
		"ttl ttl"
		"body photo";
	column-gap: 1rem;
	align-items: start;
}
.feature-block--anesth .train-block__ttl {
	grid-area: ttl;
}
.feature-block__photo--anesth {
	grid-area: photo;
	width: 11.2rem;
	justify-self: end;
	margin-top: 1.6rem;
}
.feature-block--anesth .feature-block__body {
	grid-area: body;
	min-width: 0;
}
.feature-block--ct {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 12.6rem;
	column-gap: .8rem;
	align-items: start;
}
.feature-block__photo--ct {
	width: 12.6rem;
	justify-self: end;
	margin-top: 5.6rem;
	margin-right: -1.6rem;
}
@media (min-width: 901px) {
	.feature-block__photo--consult {
		margin-right: -1.6rem;
	}
}
@media (max-width: 900px) {
	.feature-block--consult {
		grid-template-columns: minmax(0, 1fr) 4.8rem;
		column-gap: .55rem;
	}
	.feature-block__photo--consult {
		width: 4.8rem;
		margin-top: 2.4rem;
	}
	.feature-block--diag {
		grid-template-columns: minmax(0, 1fr) 3.6rem;
		column-gap: .5rem;
	}
	.feature-block__photo--diag {
		width: 3.6rem;
		margin-top: .15rem;
	}
	.feature-block--anesth {
		grid-template-columns: minmax(0, 1fr) 4.6rem;
		column-gap: .5rem;
	}
	.feature-block__photo--anesth {
		width: 4.6rem;
		margin-top: 1.2rem;
	}
	.feature-block--ct {
		grid-template-columns: minmax(0, 1fr) 4.6rem;
		column-gap: .45rem;
	}
	.feature-block__photo--ct {
		width: 4.6rem;
		margin-top: 3.2rem;
		margin-right: 0;
	}
}

/* 松林歯科とは：感染対策の丸写真 */
.infect-block {
	position: relative;
	padding-bottom: 10.5rem;
}
.infect-block .page-subttl {
	margin-top: 1.75rem;
}
.infect-block__photo {
	display: block;
	height: auto;
	position: absolute;
}
.infect-block__photo--pack {
	width: 10rem;
	right: -1.6rem;
	bottom: .2rem;
}
.infect-block__photo--auto {
	width: 7.6rem;
	right: 10.2rem;
	bottom: 4.6rem;
}
@media (max-width: 900px) {
	.infect-block {
		padding-bottom: 7.4rem;
	}
	.infect-block__photo--pack {
		width: 5.6rem;
		right: 0;
		bottom: .15rem;
	}
	.infect-block__photo--auto {
		width: 5rem;
		right: 7rem;
		bottom: 2.6rem;
	}
}

/* 手書き風の区切り「・・・」（焦茶） */
.page-sep {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .45rem;
	margin: 3.5rem 0 3.1rem;
}
.page-sep span {
	display: block;
	width: .28rem;
	height: .24rem;
	background: #3f2a1d;
	border-radius: 60% 45% 55% 40%;
	opacity: .88;
}
.page-sep span:nth-child(1) {
	transform: rotate(-14deg) translateY(.05rem);
	border-radius: 55% 50% 40% 60%;
}
.page-sep span:nth-child(2) {
	width: .32rem;
	height: .22rem;
	transform: rotate(9deg) translateY(-.04rem);
	border-radius: 45% 60% 50% 40%;
}
.page-sep span:nth-child(3) {
	transform: rotate(-7deg) translateY(.03rem);
	border-radius: 50% 40% 60% 45%;
}

/* 初めての方へ：ご予約と診療の流れのあいだの丸写真 */
.guide-sep {
	position: relative;
	margin: 2.6rem 0 3.2rem;
	min-height: 12.5rem;
}
.guide-sep .page-sep {
	margin: 2.4rem 0 0;
}
.circle-photos {
	position: absolute;
	right: -0.8rem;
	top: 50%;
	width: 22rem;
	height: 15.4rem;
	transform: translateY(-48%);
	pointer-events: none;
}
.circle-photos__img {
	position: absolute;
	width: 10.8rem;
	height: auto;
	display: block;
}
.circle-photos__img--wait {
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 10.6rem;
}
.circle-photos__img--sign {
	right: 0;
	top: 0;
	z-index: 2;
	width: 13.2rem;
}
@media (max-width: 900px) {
	.guide-sep {
		min-height: 7.6rem;
		margin: 1.6rem 0 2.2rem;
	}
	.circle-photos {
		right: 0;
		width: 8.4rem;
		height: 6.2rem;
		transform: translateY(-46%);
	}
	.circle-photos__img--wait {
		width: 4.2rem;
	}
	.circle-photos__img--sign {
		width: 4.6rem;
	}
}

.guide-flow {
	margin: 0 0 2.4rem;
	padding: 0;
	list-style: none;
}
.guide-flow > li {
	margin: 0;
	padding: 1.15rem 0;
}
/* 2・4・6：画面幅いっぱいのごく薄い水色帯（本文幅は container--narrow に揃える） */
.guide-flow > li:nth-child(even) {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 1.25rem max(6%, calc(50vw - min(450px, 45vw)));
	width: 100cqw;
	max-width: 100cqw;
	margin-left: calc(50% - 50cqw);
	margin-right: calc(50% - 50cqw);
	padding: 1.25rem max(6%, calc(50cqw - min(450px, 45cqw)));
	background: var(--sky-soft);
}
.guide-flow__ttl {
	margin: 0 0 .35rem;
	font-size: clamp(1.02rem, 2.2vw, 1.12rem);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.45;
}
.guide-flow p {
	margin: 0;
	font-size: clamp(.95rem, 2vw, 1.02rem);
}
.guide-policy {
	margin: 0 0 2rem;
	padding: 0 0 0 1.15em;
}
.guide-policy li {
	margin: 0 0 .55rem;
	font-size: clamp(.95rem, 2vw, 1.02rem);
}
.guide-policy li:last-child {
	margin-bottom: 0;
}
.guide-box {
	margin: 2rem 0 0;
	padding: 1.35rem clamp(1rem, 3vw, 1.6rem);
	border: 2px solid var(--mint);
	border-radius: 14px;
	text-align: center;
	font-size: clamp(.95rem, 2vw, 1.05rem);
	font-weight: 500;
	line-height: 1.85;
	background: rgba(255, 255, 255, .45);
}

/* 初めての方へ：キャンセルポリシーの右にスタンプ */
.policy-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 10.8rem;
	column-gap: 1.2rem;
	align-items: center;
	margin: 0 0 .4rem;
}
.policy-block .page-subttl {
	margin-top: 1.75rem;
}
.policy-block .guide-policy {
	margin-bottom: 0;
}
.policy-block__stamp {
	width: 10.8rem;
	height: auto;
	display: block;
	justify-self: end;
	margin-top: 2.4rem;
}
@media (max-width: 900px) {
	.policy-block {
		grid-template-columns: minmax(0, 1fr) 4.2rem;
		column-gap: .55rem;
		align-items: start;
	}
	.policy-block__stamp {
		width: 4.2rem;
		margin-top: 0;
		align-self: start;
		margin-bottom: 0;
	}
}

/* 矯正の流れ：左矢印バッジ＋右説明 */
.flow-list {
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .55rem;
}
.flow-step {
	display: grid;
	grid-template-columns: minmax(10.5rem, 12.5rem) minmax(0, 1fr);
	gap: .7rem 1.15rem;
	align-items: center;
}
.flow-step__badge {
	--flow-tip: 14px;
	--flow-line: #9fd0e8;
	position: relative;
	z-index: 0;
	display: grid;
	place-items: center;
	margin: 0;
	min-height: 3.35rem;
	padding: 0;
	background: var(--flow-line);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--flow-tip)),
		50% 100%,
		0 calc(100% - var(--flow-tip))
	);
}
.flow-step__badge span {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	min-height: calc(3.35rem - 4px);
	margin: 2px;
	padding: .55rem .55rem calc(.55rem + 6px);
	background: var(--white);
	color: var(--brown);
	font-size: clamp(.88rem, 1.7vw, .98rem);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.3;
	text-align: center;
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--flow-tip)),
		50% 100%,
		0 calc(100% - var(--flow-tip))
	);
}
.flow-step__text {
	margin: 0;
	font-size: clamp(.92rem, 1.9vw, 1.02rem);
	line-height: 1.75;
}

/* 矯正の種類 */
.type-list {
	margin: 0 0 2.5rem;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}
.type-item {
	margin: 0;
	padding: 1.15rem 1.25rem 1.25rem;
	border-left: 4px solid var(--sky-deep);
	background: rgba(255, 255, 255, .55);
}
.type-item__ttl {
	margin: 0 0 .4rem;
	font-size: clamp(1.05rem, 2.2vw, 1.18rem);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	color: #3f2a1d;
}
.type-item__lead {
	margin: 0;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	line-height: 1.75;
}
.type-item__sub {
	margin: .85rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .55rem;
}
.type-item__sub li {
	display: grid;
	gap: .15rem;
	padding: .65rem .85rem;
	background: rgba(217, 243, 250, .45);
	border-radius: 8px;
}
.type-item__label {
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .04em;
	color: var(--brown);
}
.type-item__desc {
	font-size: clamp(.92rem, 1.9vw, 1rem);
	line-height: 1.65;
	color: var(--brown);
}
.type-item__price {
	margin-top: .25rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .03em;
	color: #3f2a1d;
}
.type-item__price--block {
	display: block;
	margin: .65rem 0 0;
}
.type-item__price-list {
	margin: .85rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .4rem;
}
.type-item__price-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .55rem .85rem;
	background: rgba(217, 243, 250, .45);
	border-radius: 8px;
	font-size: clamp(.92rem, 1.9vw, 1rem);
}
.type-item__price-list li span:last-child {
	font-weight: 700;
	letter-spacing: .03em;
	color: #3f2a1d;
	white-space: nowrap;
}

/* 審美：ホワイトニング比較 */
.whitening {
	margin: 0 0 2.5rem;
}
.whitening > p {
	margin: 0 0 1.25rem;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	line-height: 1.85;
}
.whitening-table-wrap {
	margin: 0 0 1.5rem;
}
.whitening-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	background: rgba(255, 255, 255, .7);
	font-size: clamp(.82rem, 1.55vw, .94rem);
}
.whitening-table__col-label {
	width: 3.6em;
}
.whitening-table__col-plan {
	width: calc((100% - 3.6em) / 2);
}
.whitening-table th,
.whitening-table td {
	padding: .7rem .65rem;
	border: 1px solid rgba(165, 217, 239, .85);
	vertical-align: top;
	line-height: 1.6;
	text-align: left;
	overflow-wrap: break-word;
	word-break: break-word;
}
.whitening-table thead th {
	background: rgba(165, 217, 239, .45);
	text-align: center;
	font-weight: 700;
	letter-spacing: .04em;
}
.whitening-table thead th:first-child {
	width: auto;
}
.whitening-table tbody th {
	background: rgba(217, 243, 250, .55);
	font-weight: 700;
	width: auto;
	letter-spacing: .04em;
}
.whitening-table strong {
	font-size: 1.05em;
	color: #3f2a1d;
}
.whitening-price {
	display: block;
}
.whitening-note {
	display: block;
	margin-top: .3rem;
	font-size: .9em;
	color: var(--brown-soft);
}
.whitening-list {
	margin: 0;
	padding: 0 0 0 1.1em;
}
.whitening-list li {
	margin: 0 0 .35rem;
}
.whitening-list li:last-child {
	margin-bottom: 0;
}
.whitening-list--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .35rem .85rem;
	padding-left: 1.1em;
}
.whitening-block {
	margin: 0 0 1.15rem;
	padding: 1rem 1.1rem 1.1rem;
	background: rgba(255, 255, 255, .55);
	border-left: 4px solid var(--sky-deep);
}
.whitening-block--alert {
	border-left-color: #e0a070;
	background: rgba(253, 247, 221, .55);
}
.whitening-block__ttl {
	margin: 0 0 .55rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .05em;
	color: #3f2a1d;
}
.whitening-cta {
	margin: 1.5rem 0 0;
	text-align: center;
	font-weight: 700;
	letter-spacing: .06em;
}

/* 審美：クリーニング（診療の流れと同系の薄い水色帯） */
.clean-block {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin: 0 0 2.5rem;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 1.35rem max(6%, calc(50vw - min(450px, 45vw)));
	width: 100cqw;
	max-width: 100cqw;
	margin-left: calc(50% - 50cqw);
	margin-right: calc(50% - 50cqw);
	padding: 1.35rem max(6%, calc(50cqw - min(450px, 45cqw)));
	background: var(--sky-soft);
}
.clean-block > .page-subttl {
	margin-top: 0;
}
.clean-block > p {
	margin: 0 0 1.15rem;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	line-height: 1.85;
}
.clean-block__ttl {
	margin: 1.35rem 0 .55rem;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .05em;
	color: #3f2a1d;
}
.clean-block__list {
	margin: 0 0 .85rem;
	padding: 0 0 0 1.2em;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	line-height: 1.75;
}
.clean-block__list li {
	margin: 0 0 .3rem;
}
.clean-block__note {
	margin: 0 0 1.15rem;
	font-size: .9rem;
	line-height: 1.75;
	color: var(--brown-soft);
}

/* 小児：トレーニング */
.train-block {
	margin: 0 0 2.5rem;
}
.train-block--sky {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 1.35rem max(6%, calc(50vw - min(450px, 45vw)));
	width: 100cqw;
	max-width: 100cqw;
	margin-left: calc(50% - 50cqw);
	margin-right: calc(50% - 50cqw);
	padding: 1.35rem max(6%, calc(50cqw - min(450px, 45cqw)));
	background: var(--sky-soft);
}
.train-block--sky > .page-subttl {
	margin-top: 0;
}

/* 一般歯科：虫歯治療の右に診療室の丸写真 */
.cavity-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 13.6rem;
	column-gap: 1.5rem;
	align-items: center;
	margin: 0 0 2.5rem;
}
.cavity-block .page-subttl {
	margin-top: 1.75rem;
}
.cavity-block .train-block {
	margin-bottom: 0;
}
.cavity-block__photo {
	width: 13.6rem;
	height: auto;
	display: block;
	justify-self: end;
	margin-top: 1.6rem;
}
@media (min-width: 901px) {
	.cavity-block__photo {
		margin-top: 5.6rem;
		margin-right: -2rem;
	}
}
@media (max-width: 900px) {
	.cavity-block {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.cavity-block__photo {
		width: 6.8rem;
		align-self: end;
		margin-top: .2rem;
		margin-bottom: 0;
		transform: none;
	}
}

/* 小児歯科：虫歯治療の右に小児・シャッターの丸写真 */
.cavity-kids {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"ttl photos"
		"lead photos"
		"close photos";
	column-gap: 1rem;
	align-items: start;
	margin: 0 0 2.5rem;
}
.cavity-kids .page-subttl {
	grid-area: ttl;
	margin-top: 1.75rem;
}
.cavity-kids__lead {
	grid-area: lead;
	margin-bottom: 0;
}
.cavity-kids__close {
	grid-area: close;
	margin: 1.15rem 0 0;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	line-height: 1.85;
}
.cavity-kids__photos {
	grid-area: photos;
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	justify-self: end;
	margin-top: 1.2rem;
	pointer-events: none;
}
.cavity-kids__img {
	height: auto;
	display: block;
	flex-shrink: 0;
}
.cavity-kids__img--child {
	width: 11.2rem;
	margin-top: 2.8rem;
}
.cavity-kids__img--shutter {
	width: 9.4rem;
}
@media (min-width: 901px) {
	.cavity-kids__photos {
		margin-right: -2rem;
	}
}
@media (max-width: 900px) {
	.cavity-kids {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.cavity-kids__photos {
		align-self: end;
		margin: .35rem 0 .2rem;
		gap: .25rem;
		transform: none;
	}
	.cavity-kids__img--child {
		width: 5.4rem;
		margin-top: 1.4rem;
	}
	.cavity-kids__img--shutter {
		width: 4.6rem;
	}
	.cavity-kids__close {
		margin-top: .35rem;
	}
}

/* 小児：検査（PC横並び／スマホ縦並び） */
.exam-lead {
	margin: 0 0 1.35rem;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	line-height: 1.85;
}
@media (min-width: 901px) {
	.exam-lead {
		margin-bottom: 2.6rem;
	}
}
.exam-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem clamp(1.7rem, 2.8vw, 2.35rem);
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
	align-items: start;
}
.exam-grid__item {
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: .7rem;
	min-width: 0;
}
.exam-grid__ttl {
	margin: 0;
	min-height: 3.1em;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
	color: #3f2a1d;
}
.exam-grid__photo {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #fff;
}
.exam-grid__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
}
.exam-grid__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to right, rgba(255, 255, 255, .95), transparent 16%, transparent 84%, rgba(255, 255, 255, .95)),
		linear-gradient(to bottom, rgba(255, 255, 255, .92), transparent 18%, transparent 82%, rgba(255, 255, 255, .92));
}
.exam-grid ol {
	margin: 0;
	padding: 0 0 0 1.2em;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	line-height: 1.7;
	word-break: keep-all;
	overflow-wrap: normal;
	line-break: strict;
}
.exam-grid li li {
	margin: 0 0 .35rem;
	white-space: nowrap;
}
@media (max-width: 900px) {
	.exam-grid {
		grid-template-columns: 1fr;
		gap: 1.7rem;
	}
	.exam-grid__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .5rem;
		text-align: center;
	}
	.exam-grid__ttl {
		min-height: 0;
		padding-right: 0;
		text-align: center;
	}
	.exam-grid__photo {
		order: 3;
		width: min(100%, 22rem);
		aspect-ratio: 16 / 10;
		margin: .15rem auto 0;
		justify-self: center;
	}
	.exam-grid ol {
		margin-left: 0;
		padding: 0;
		list-style-position: inside;
		text-align: center;
		font-size: .92rem;
	}
	.exam-grid li li {
		white-space: normal;
	}
}
.train-block > p {
	margin: 0 0 1.15rem;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	line-height: 1.85;
}
.train-block__lead {
	margin: 0 0 .85rem;
	font-size: clamp(1.02rem, 2.2vw, 1.12rem);
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.5;
	color: #3f2a1d;
}
.train-block__ttl {
	margin: 1.35rem 0 .55rem;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .05em;
	color: #3f2a1d;
}
.train-block > .train-block__ttl:first-child {
	margin-top: 0;
}
.train-block__ttl--brown {
	color: var(--brown);
}
.train-block__list {
	margin: 0 0 1.15rem;
	padding: 0 0 0 1.2em;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	line-height: 1.75;
}
.train-block__list li {
	margin: 0 0 .3rem;
}
.denture-types {
	margin-top: .35rem;
}
.denture-types > li {
	margin: 0 0 1rem;
}
.denture-types__name {
	display: block;
	margin: 0 0 .25rem;
	font-weight: 700;
}
.denture-types p {
	margin: 0;
}
.denture-types ul {
	margin: .25rem 0 0;
	padding: 0 0 0 1.2em;
}
.train-block__more {
	margin: 1.15rem 0 .85rem;
}
.train-block__more a {
	color: var(--brown);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--brown);
	text-underline-offset: .22em;
	text-decoration-thickness: 2px;
}
.train-block__more a:hover {
	color: #3f2a1d;
}
.train-block__note {
	margin: 0;
	font-size: .9rem;
	line-height: 1.75;
	color: var(--brown-soft);
}
.train-block--sky:has(+ .train-block__close) {
	margin-bottom: 0;
}

.checkup-roles {
	margin: .35rem 0 1.35rem;
	padding: 0;
	list-style: none;
	counter-reset: checkup;
}
.checkup-roles > li {
	margin: 0 0 1.15rem;
	counter-increment: checkup;
}
.checkup-roles > li:last-child {
	margin-bottom: 0;
}
.checkup-roles__ttl {
	display: block;
	margin: 0 0 .4rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.55;
	color: #3f2a1d;
}
.checkup-roles__ttl::before {
	content: counter(checkup) ". ";
}
.checkup-roles p {
	margin: 0;
	font-size: clamp(.95rem, 2vw, 1.02rem);
	font-weight: 400;
	line-height: 1.85;
	color: inherit;
}

/* 予防：残存歯数の比較表 */
.teeth-stat {
	margin: 1.35rem 0 0;
}
.teeth-stat__ttl {
	margin: 0 0 .85rem;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
	color: #3f2a1d;
}
.teeth-stat table {
	width: 100%;
	border-collapse: collapse;
	font-size: clamp(.92rem, 1.8vw, 1rem);
	line-height: 1.6;
}
.teeth-stat th,
.teeth-stat td {
	padding: .85rem .2rem;
	border-bottom: 1px solid rgba(92, 68, 51, .18);
	text-align: left;
	vertical-align: middle;
}
.teeth-stat thead th {
	font-weight: 700;
	color: #3f2a1d;
}
.teeth-stat tbody th {
	font-weight: 500;
	width: 58%;
}
.teeth-stat td {
	font-weight: 700;
	color: #3f2a1d;
}
.train-block__close {
	margin: 1.35rem 0 2.5rem;
}
.train-block__close p {
	margin: 0;
}
.train-block__close p + p {
	margin-top: .55rem;
}

/* 審美：白い被せ物（カード型・写真なし） */
.crown-guide {
	margin: 0 0 2.5rem;
}
.crown-guide__note {
	margin: 0 0 1.35rem;
	font-size: .88rem;
	line-height: 1.7;
	color: var(--brown-soft);
}
.crown-section {
	margin: 0 0 2rem;
}
.crown-section:last-child {
	margin-bottom: 0;
}
.crown-section__ttl {
	margin: 0 0 .85rem;
	padding-bottom: .35rem;
	border-bottom: 2px solid rgba(165, 217, 239, .7);
	font-size: clamp(1.02rem, 2.2vw, 1.12rem);
	font-weight: 700;
	letter-spacing: .05em;
	color: #3f2a1d;
}
.crown-cards {
	display: grid;
	gap: .85rem;
}
.crown-card {
	padding: 1rem 1.05rem 1.1rem;
	background: rgba(255, 255, 255, .6);
	border-left: 4px solid var(--sky-deep);
}
@media (min-width: 901px) {
	.crown-guide {
		margin-bottom: 2rem;
	}
	.crown-section {
		margin-bottom: 1.5rem;
	}
	.crown-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: dense;
		gap: .75rem .9rem;
	}
	.crown-card {
		box-sizing: border-box;
		min-height: 100%;
		padding: .9rem 1rem;
	}
	.crown-card__name {
		font-size: 1.02rem;
	}
	.crown-card__price {
		font-size: 1.02rem;
	}
	/* 左列は自費、右列は保険。行で交互にならない */
	.crown-cards > .crown-card {
		grid-column: 1;
	}
	.crown-cards > .crown-card--hoken {
		grid-column: 2;
	}
}
.crown-card__head {
	margin: 0;
}
.crown-card__name {
	margin: 0 0 .35rem;
	font-size: clamp(1rem, 2.1vw, 1.08rem);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.4;
	color: #3f2a1d;
}
.crown-card__sub {
	display: inline-block;
	font-size: .85em;
	font-weight: 500;
	color: var(--brown-soft);
}
.crown-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	margin: 0 0 .35rem;
	font-size: .88rem;
	color: var(--brown-soft);
}
.crown-card__price {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: .03em;
	color: #3f2a1d;
}

/* 診療科目ナビ：ヒーロー水色スペース内 */
.menu-subnav {
	position: relative;
	z-index: 4;
	width: min(920px, 100%);
	margin: clamp(1.2rem, 3vw, 2.2rem) auto 0;
	padding: 0 .5rem;
}
.menu-subnav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .55rem clamp(1rem, 2.8vw, 1.85rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu-subnav__link {
	display: inline-block;
	color: var(--brown);
	font-size: clamp(1rem, 1.8vw, 1.12rem);
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s, opacity .2s;
}
.menu-subnav__link:hover {
	color: #94cf99;
	opacity: 1;
}
.menu-subnav__link.is-current,
.menu-subnav__link[aria-current="page"] {
	color: #94cf99;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: #94cf99;
	text-underline-offset: .28em;
	text-decoration-thickness: 2px;
}
.menu-subnav__link.is-current:hover,
.menu-subnav__link[aria-current="page"]:hover {
	opacity: 1;
}

/* TOPの開閉バー：スマホでは非表示（ドロワー内サブメニューを使用） */
.menu-subnav--toggle {
	display: none;
}

/* PC：お悩みカードと同系の白半透明バー（枠線なし・画面全幅） */
@media (min-width: 901px) {
	.menu-subnav {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-top: clamp(.35rem, 1vw, .7rem);
		padding: .55rem clamp(1.2rem, 4vw, 2.5rem);
		border: 0;
		border-radius: 0;
		background: rgba(255, 255, 255, .55);
	}

	/* TOP：常に高さを確保し、その枠内で上からスライド（モクモクは動かない） */
	.menu-subnav--toggle {
		display: block;
		margin-top: clamp(.35rem, 1vw, .7rem);
		padding: 0;
		height: 3rem;
		overflow: hidden;
		background: transparent;
		opacity: 1;
		pointer-events: none;
	}
	.menu-subnav--toggle .menu-subnav__clip {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 0 clamp(1.2rem, 4vw, 2.5rem);
		background: rgba(255, 255, 255, .55);
		transform: translateY(-100%);
		opacity: 0;
		transition:
			transform .4s cubic-bezier(.22, .68, .32, 1),
			opacity .35s ease;
	}
	.menu-subnav--toggle.is-open {
		pointer-events: auto;
	}
	.menu-subnav--toggle.is-open .menu-subnav__clip {
		transform: translateY(0);
		opacity: 1;
	}
}


/* =========================================================
   アニメーション
   ========================================================= */
[data-anim] { opacity: 0; }

.is-loaded [data-anim="photo"] {
	animation: cloudIn 1s cubic-bezier(.22, .68, .32, 1) .15s forwards;
}
/* PC：左写真雲は最初から大きめに出現（あとでポンと拡大しない） */
@media (min-width: 901px) {
	.is-loaded .hero__card.is-left > [data-anim="photo"] {
		animation: cloudInLeft 1.15s cubic-bezier(.22, .68, .32, 1) .15s forwards;
	}
}
.is-loaded [data-anim="bubble"] {
	animation: cloudIn 1s cubic-bezier(.22, .68, .32, 1) .2s forwards;
}
.is-loaded [data-anim="logo"] {
	animation: fadeUp .8s ease 1.2s forwards;
}
.is-loaded [data-anim="nav"] {
	animation: fadeUp .7s ease forwards;
	animation-delay: calc(1.35s + var(--i, 0) * .09s);
}

@keyframes cloudIn {
	from { opacity: 0; transform: translateY(26px) scale(.92); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cloudInLeft {
	from { opacity: 0; transform: translateY(26px) scale(.92); }
	to   { opacity: 1; transform: translateY(0) scale(1.14); }
}
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ふわふわ浮遊（表示アニメーション完了後に付与） */
.is-floating[data-anim] { opacity: 1; }
.is-floating[data-anim="photo"] {
	animation: float 7s ease-in-out var(--float-delay, 0s) infinite;
}
.is-floating[data-anim="bubble"] {
	animation: none;
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

/* スマホ雲：傾きを保ったままふわふわ */
@keyframes floatTiltMobile {
	0%, 100% { transform: translateX(-0.7rem) rotate(-7deg) translateY(0); }
	50%      { transform: translateX(-0.7rem) rotate(-7deg) translateY(-10px); }
}

/* スマホ雲：最初から傾いた状態で出現 */
@keyframes cloudInTilt {
	from { opacity: 0; transform: translateX(-0.7rem) rotate(-7deg) translateY(26px) scale(.92); }
	to   { opacity: 1; transform: translateX(-0.7rem) rotate(-7deg) translateY(0) scale(1); }
}

/* スクロール表示 */
.js-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s ease, transform .8s ease;
}
.js-reveal.is-visible { opacity: 1; transform: translateY(0); }


/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 900px) {
	/* モクモク：縦横比を保ち、幅が狭いときは左右をトリミング（潰してギザギザにしない） */
	.edge {
		overflow: hidden;
		background-size: auto 100%;
		background-position: center;
	}

	/* 上モクモクを下げつつ、白い直線が波を横切らないようにする */
	.section--concept,
	.section--page {
		background: var(--sky);
	}
	.section--concept {
		padding-top: clamp(3.25rem, 7vw, 4.5rem);
		padding-bottom: clamp(2.25rem, 5vw, 3rem);
	}
	.section--doctor {
		padding-top: clamp(2.25rem, 5vw, 3rem);
		padding-bottom: clamp(2.25rem, 5vw, 3rem);
	}
	.section--menu {
		padding-top: clamp(2.25rem, 5vw, 3rem);
		padding-bottom: clamp(4.75rem, 9vw, 6.25rem);
	}
	.section--trouble {
		padding-top: calc(clamp(100px, 12vw, 168px) + clamp(2.75rem, 5vw, 3.75rem));
		padding-bottom: clamp(3rem, 6vw, 4rem);
	}
	.section--info {
		padding-top: clamp(2rem, 5vw, 2.75rem);
		padding-bottom: clamp(3.5rem, 8vw, 5rem);
	}
	.section--concept::before,
	.section--page::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		/* 谷より下＆モクモク白塗りと重なる位置（水色の隙間を出さない） */
		top: calc(clamp(100px, 12vw, 168px) * 0.42);
		bottom: 0;
		background: var(--white);
		z-index: 0;
	}
	.section--page::before {
		bottom: calc(clamp(100px, 12vw, 168px) * 0.42);
	}
	.section--page > .edge--bottom {
		top: auto;
		bottom: 0;
		transform: translateY(48%);
	}
	.edge--top {
		transform: translateY(-48%);
	}

	/* 固定サイトバーに見出しが隠れないよう、セクションアンカーは少し上に */
	#tsumemono,
	#ireba,
	#shishubyo,
	#tokucho {
		scroll-margin-top: calc(7rem + env(safe-area-inset-top, 0px));
	}

	/* スマホ：3枚カルーセルは出さず、フレーム付き画像を1枚ずつ */
	.hero {
		/* 固定サイトバー分の余白（下は従来どおり） */
		padding: calc(4.25rem + env(safe-area-inset-top, 0px)) 0 4.5rem;
		/* 傾けた雲写真の外枠の角（絵のない部分）でページ幅が広がらないように。
		   clip はスクロール領域を作らない（hidden だと縦スクロールが引っかかる） */
		overflow-x: clip;
	}
	.site-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .55rem;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 40;
		width: 100%;
		margin: 0;
		padding: calc(.35rem + env(safe-area-inset-top, 0px)) clamp(.75rem, 3vw, 1.2rem) .4rem;
		background: rgba(255, 255, 255, .92);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}
	.site-bar__brand {
		min-width: 0;
		flex: 1 1 auto;
	}
	.site-bar__catch {
		margin: 0 0 .1rem;
		font-size: clamp(.55rem, 2.4vw, .64rem);
		font-weight: 500;
		letter-spacing: .03em;
		line-height: 1.25;
		color: var(--brown);
	}
	.site-bar__logo {
		margin: 0;
		min-width: 0;
	}
	.site-bar__logo img {
		display: block;
		width: clamp(110px, 32vw, 150px);
		height: auto;
	}
	.site-bar__actions {
		display: flex;
		align-items: center;
		gap: .35rem;
		flex-shrink: 0;
	}
	.site-bar__tel,
	.site-bar__menu {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 9px;
		text-decoration: none;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		transition: opacity .2s, transform .2s;
	}
	.site-bar__tel:hover,
	.site-bar__menu:hover,
	.site-bar__tel:focus-visible,
	.site-bar__menu:focus-visible {
		opacity: .85;
	}
	.site-bar__tel {
		background: var(--sky-deep);
		color: var(--white);
	}
	.site-bar__menu {
		background: var(--brown);
		color: var(--white);
		padding: 0;
	}
	.site-bar__menu-bars,
	.site-bar__menu-bars::before,
	.site-bar__menu-bars::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
	}
	.site-bar__menu-bars {
		position: relative;
	}
	.site-bar__menu-bars::before,
	.site-bar__menu-bars::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.site-bar__menu-bars::before { top: -6px; }
	.site-bar__menu-bars::after { top: 6px; }

	.hero__inner {
		width: min(100%, calc(100% - 2 * var(--frame-inset)));
	}
	.hero__contact {
		display: none;
	}
	.hero__stage {
		width: min(100%, 640px);
		max-width: none;
		height: auto;
		min-height: 0;
		margin-left: auto;
		margin-right: auto;
		margin-top: .6rem;
		margin-bottom: .2rem;
		padding-bottom: 0;
		overflow: visible;
	}
	.hero__carousel {
		display: none;
	}
	.hero__photo {
		display: block;
		position: relative;
		width: 100%;
		aspect-ratio: 720 / 480;
		margin-left: 0;
		z-index: 1;
		/* 右側が少し上になる傾き＋わずかに左寄せ */
		transform: translateX(-0.7rem) rotate(-7deg);
		transform-origin: center center;
	}
	.is-loaded .hero__photo[data-anim="photo"] {
		animation: cloudInTilt 1s cubic-bezier(.22, .68, .32, 1) .15s forwards;
	}
	.hero__photo.is-floating[data-anim="photo"] {
		animation: floatTiltMobile 7s ease-in-out var(--float-delay, 0s) infinite;
	}
	/* スマホ：メイン画像の右下に少しかぶせる */
	.hero__bubble {
		left: auto;
		top: auto;
		right: 1%;
		bottom: 0%;
		width: 45%;
		z-index: 5;
	}

	/* 右ドロワー */
	.gnav {
		position: fixed;
		inset: 0;
		z-index: 100;
		width: auto;
		margin: 0;
		pointer-events: none;
	}
	.gnav.is-open {
		pointer-events: auto;
	}
	.gnav__backdrop {
		display: block;
		position: absolute;
		inset: 0;
		border: 0;
		margin: 0;
		padding: 0;
		background: rgba(50, 40, 30, .42);
		opacity: 0;
		transition: opacity .28s ease;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
	}
	.gnav.is-open .gnav__backdrop {
		opacity: 1;
	}
	.gnav__panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: .4rem;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(300px, 82vw);
		margin: 0;
		padding: 3.4rem 1.1rem 2rem;
		background: var(--cream);
		box-shadow: -8px 0 28px rgba(80, 60, 40, .18);
		transform: translateX(100%);
		transition: transform .3s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gnav.is-open .gnav__panel {
		transform: translateX(0);
	}
	.gnav__close {
		display: grid;
		place-items: center;
		position: absolute;
		top: .7rem;
		right: .7rem;
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--brown);
		font-size: 1.8rem;
		line-height: 1;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
	}
	.gnav__logo {
		display: none;
	}
	.gnav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: .15rem;
	}
	.gnav__list--left,
	.gnav__list--right {
		justify-content: flex-start;
		justify-items: stretch;
	}
	.gnav__item {
		flex: none;
		width: 100%;
	}
	.gnav__btn {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: .75rem;
		row-gap: .05rem;
		padding: .85rem .65rem;
		border-radius: 10px;
		text-align: left;
	}
	.gnav__btn:hover {
		transform: none;
		background: rgba(92, 68, 51, .06);
		opacity: 1;
	}
	.gnav__icon {
		grid-row: 1 / span 2;
		width: 48px;
		height: 48px;
	}
	.gnav__ja {
		grid-column: 2;
		grid-row: 1;
		font-size: 1.1rem;
		justify-content: flex-start;
		min-height: 0;
	}
	.gnav__en {
		grid-column: 2;
		grid-row: 2;
		font-size: 1.05rem;
		justify-content: flex-start;
		min-height: 0;
	}
	.gnav__item--has-sub {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.gnav__sub {
		display: flex;
		flex-direction: column;
		gap: .1rem;
		margin: 0 0 .35rem;
		padding: .15rem 0 .15rem 3.2rem;
		list-style: none;
	}
	.gnav__sub[hidden] {
		display: none;
	}
	.gnav__sub-link {
		display: block;
		padding: .6rem .45rem;
		border-radius: 8px;
		color: var(--brown);
		font-size: 1rem;
		font-weight: 500;
		letter-spacing: .06em;
		text-decoration: none;
	}
	.gnav__sub-link:hover,
	.gnav__sub-link:focus-visible {
		background: rgba(92, 68, 51, .06);
	}
	.gnav__sub-link.is-current,
	.gnav__sub-link[aria-current="page"] {
		color: #94cf99;
		font-weight: 700;
		text-decoration: underline;
		text-decoration-color: #94cf99;
		text-underline-offset: .2em;
		text-decoration-thickness: 2px;
	}

	.doctor {
		grid-template-columns: 1fr;
		grid-template-areas:
			"photo"
			"intro"
			"career";
		gap: clamp(1.25rem, 4vw, 1.75rem);
	}
	.doctor__photo {
		max-width: 320px;
		margin-inline: auto;
		align-self: start;
		transform: translateX(-0.7rem);
	}
	.doctor__intro { padding-inline: clamp(.8rem, 4vw, 1.4rem); }
	.doctor__name { margin-bottom: 0; }

	.trouble__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(1.1rem, 3.5vw, 1.35rem);
	}
	.menu-scroll {
		display: grid;
		grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem;
		align-items: center;
		gap: .2rem;
	}
	.menu-scroll__btn {
		display: grid;
		place-items: center;
		width: 2.2rem;
		height: 2.2rem;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: var(--brown);
		font-size: 1.45rem;
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
	}
	.menu-scroll__btn:disabled {
		opacity: .28;
		cursor: default;
	}
	.menu__list {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		/* スマホ: クローバー間隔 20〜30px */
		gap: 1.4rem;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		/* 上下はホバーではみ出す分を内側余白で確保（overflow-y と共存） */
		padding: .85rem 0;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.menu__list::-webkit-scrollbar {
		display: none;
	}
	.menu__item {
		/* 初期表示で3つ並ぶ幅（gap 1.4rem × 2） */
		flex: 0 0 calc((100% - 2.8rem) / 3);
		scroll-snap-align: start;
	}
	.menu__item .clover {
		max-width: none;
	}
	.info { grid-template-columns: minmax(0, 1fr); }
	/* Facebookの枠は左に寄る。幅の指定は変えず、中身だけ中央へ */
	.sns-box .fb-page {
		text-align: center;
	}
	.section--info .hours__note,
	.section--info .hours__tel {
		text-align: center;
	}
	.hours__tel-note--pc {
		display: none;
	}
	.hours__tel-num--pc {
		display: none;
	}
	.hours__tel-num--sp {
		display: inline-block;
	}
	.hours__tel-note--sp {
		display: block;
		margin: .45rem 0 0;
		/* 収まるときは1行。入りきらないときだけ「予約制」のあとで改行 */
		white-space: normal;
	}
	.hours__tel-note--sp > span {
		white-space: nowrap;
	}
	/* タップで電話できる番号だけ、細い焦茶の枠で囲む */
	.hours__tel a {
		display: inline-block;
		margin-top: .15rem;
		padding: .28em .7em;
		border: 1px solid var(--brown);
		border-radius: 4px;
	}
	.access { grid-template-columns: 1fr; }

	/* 診療ページの導入文：入れてある改行はそのまま。行の途中では折り返さない */
	.page-headline {
		white-space: nowrap;
		/* 一番長い1行（17文字＋字間）が本文幅（セクションの90%）に収まる大きさまでだけ縮める */
		font-size: min(1.35rem, 4.75cqi);
	}

	.flow-step {
		grid-template-columns: minmax(8.2rem, 9.8rem) minmax(0, 1fr);
		gap: .55rem .75rem;
	}
	.flow-step__badge {
		min-height: 3rem;
		--flow-tip: 12px;
	}
	.flow-step__badge span {
		min-height: calc(3rem - 4px);
		font-size: .8rem;
		padding: .45rem .35rem calc(.45rem + 5px);
	}
	.flow-step__text {
		font-size: .9rem;
		line-height: 1.65;
	}
	.whitening-list--grid {
		grid-template-columns: 1fr;
	}
	.whitening-table {
		font-size: .8rem;
	}
	.whitening-table th,
	.whitening-table td {
		padding: .55rem .45rem;
	}
	.whitening-table__col-label {
		width: 2.8em;
	}

	.hero__bubble:has(.heading-cloud) {
		width: 64%;
		right: 0;
		bottom: -1%;
	}
	.heading-cloud__text {
		left: 43%;
		top: 52%;
		width: auto;
		max-width: 78%;
		font-size: 3.9vw;
		font-size: 7.2cqi;
		letter-spacing: .04em;
		line-height: 1.2;
		margin-right: -.04em;
		white-space: nowrap;
	}

	.menu-subnav {
		margin-top: 1rem;
		padding: 0 .35rem;
	}
	.menu-subnav__list {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		justify-items: center;
		column-gap: .35rem;
		row-gap: .45rem;
	}
	.menu-subnav__list > li:nth-child(1) { grid-column: 1 / 3; }
	.menu-subnav__list > li:nth-child(2) { grid-column: 3 / 5; }
	.menu-subnav__list > li:nth-child(3) { grid-column: 5 / 7; }
	.menu-subnav__list > li:nth-child(4) { grid-column: 2 / 4; }
	.menu-subnav__list > li:nth-child(5) { grid-column: 4 / 6; }
	.menu-subnav__link {
		font-size: .95rem;
		letter-spacing: .06em;
	}
}

@media (max-width: 560px) {
	.hero__stage {
		width: 100%;
		margin-bottom: .2rem;
		padding-bottom: 0;
	}
	.hero__photo {
		width: 104%;
		margin-left: 0;
	}
	.hero__bubble {
		width: 47%;
		right: 0;
		bottom: 0%;
	}
	.hero__bubble:has(.heading-cloud) {
		width: 70%;
		right: -1%;
		bottom: -2%;
	}
	.heading-cloud__text {
		font-size: 3.6vw;
		font-size: 6.5cqi;
		letter-spacing: .03em;
		margin-right: -.03em;
	}
	.career__row { flex-direction: column; gap: 0; }
	.career__row dt { flex: none; }

	/* 診療時間表：「午前」を時間の上に置く。時間（9:00-12:45）は途中で折り返さない */
	.section--info .panel {
		padding-left: .85rem;
		padding-right: .85rem;
	}
	.hours {
		/* 入りきらない幅のときだけ少し小さく */
		font-size: min(.9rem, 4.6vw);
	}
	.hours th,
	.hours td {
		padding-left: .15em;
		padding-right: .15em;
	}
	.hours tbody th {
		padding-left: .5em;
		padding-right: .35em;
		line-height: 1.35;
	}
	.hours__label {
		display: block;
		width: fit-content;
		margin: 0 0 .25em;
	}
	/* 文字サイズを大きくしている端末でも右が切れず、表だけ横にスクロール */
	.hours-wrap {
		overflow-x: auto;
	}
}


/* 医院案内：画面幅いっぱいの写真を右から左へ流す */
.clinic-marquee {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin: 1.35rem 0 1.5rem;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100cqw;
	max-width: 100cqw;
	margin-left: calc(50% - 50cqw);
	margin-right: calc(50% - 50cqw);
	overflow: hidden;
}
.clinic-marquee__track {
	display: flex;
	width: max-content;
	animation: clinic-marquee 144s linear infinite;
}
.clinic-marquee img {
	display: block;
	flex: 0 0 clamp(200px, 42vw, 420px);
	width: clamp(200px, 42vw, 420px);
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}
@keyframes clinic-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-anim], .js-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
	.cloud-photo__img { transition: opacity .3s; }
	.clinic-marquee__track { animation: none; }
}