@charset "UTF-8";
/*
Theme Name: KOHATA Dental Clinic
Theme URI: http://kohatashika.xsrv.jp/
Author: Medical DX
Description: こはた歯科（東京・成城）リニューアル用テーマ。Figma「こはた歯科」PC TOP（Frame 10 / 1440×13208）を実測値どおりに再現している。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kohata
*/

/* =========================================================================
   実装メモ
   - デザイン幅 1440px 固定。数値はすべて Figma のデザイン座標（px）。
   - 各セクションは実測の高さを持ち、内部要素はデザイン座標で絶対配置する。
   - 画像素材はすべて @2x。CSS 側では 1x のサイズを指定する。
   ========================================================================= */

:root {
	/* --- カラー（カンプからのピクセル実測値） --- */
	--pink: #eb6ba4;
	--pink-pale: #ffdaea;
	--blue: #00a7e3;
	--navy: #0e1940;
	--navy-2: #1c264b;
	--line: #e4e5e9;
	--cream: #faf8f2;
	--map: #c4c4c4;

	/* --- 書体 --- */
	--mincho: "Shippori Mincho", "Zen Old Mincho", "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
	--gothic: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	--en: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
}

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

/* 縦スクロールバーの幅を常に確保する。--z の算出（clientWidth/1440）を
   スクロールバー出現の前後でぶれさせないため。 */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
	margin: 0;
	background: #fff;
	color: var(--navy);
	font-family: var(--mincho);
	font-weight: 400;
	font-feature-settings: "palt" 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: none; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure, table { margin: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

/* 1440px 固定キャンバス */
.site {
	position: relative;
	width: 1440px;
	margin: 0 auto;
	overflow: hidden;
	/* 1440px を超える画面ではデザイン全体を比例拡大して左右の余白を消す。
	   --z は header.php のインラインスクリプトが設定する（1440px 以下では 1）。 */
	zoom: var(--z, 1);
}
.main { position: relative; }

/* =========================================================================
   共通パーツ
   ========================================================================= */

/* --- セクション見出し（英字 + 花 + 和文） --------------------------------- */
.sechead {
	position: absolute;
	left: calc(var(--cx, 720px) - 720px);
	width: 1440px;
	text-align: center;
	pointer-events: none;
}
.sechead__en {
	position: absolute;
	left: 0;
	top: var(--en-top);
	width: 100%;
	font-family: var(--en);
	font-weight: 300;
	font-size: 78px;
	line-height: 1;
	letter-spacing: 0.012em;
	color: var(--blue);
}
.sechead__deco {
	position: absolute;
	left: 0;
	top: var(--deco-top);
	width: 100%;
	color: var(--pink);
}
.sechead__deco svg { width: 19px; height: 19px; margin: 0 auto; }
.sechead__ja {
	position: absolute;
	left: 0;
	top: var(--ja-top);
	width: 100%;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.02em;
}
/* --- ボタン（電話予約 / WEB予約） ---------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px;
	font-family: var(--mincho);
	line-height: 1;
	white-space: nowrap;
	transition: opacity .2s, background-color .2s, color .2s;
}
.btn--line { background: #fff; border: 1.5px solid var(--pink); color: var(--pink); }
.btn--fill { background: var(--pink); border: 1.5px solid var(--pink); color: #fff; }
.btn--line:hover { background: var(--pink); color: #fff; }
.btn--fill:hover { opacity: .82; }
.btn svg { flex: none; }

.btn--sm { height: 40px; font-size: 15px; gap: 7px; }
.btn--sm svg { width: 18px; height: 18px; }
.btn--lg { height: 73px; font-size: 28px; gap: 13px; }
.btn--lg svg { width: 32px; height: 32px; }

/* --- View More ---------------------------------------------------------- */
.viewmore {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 145px;
	padding-bottom: 7px;
	border-bottom: 1px solid rgba(28, 38, 75, .55);
	font-family: var(--en);
	font-size: 21px;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--navy-2);
}
.viewmore .ic-chevron { width: 7px; height: 12px; margin-bottom: 2px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.viewmore:hover { opacity: .65; }
.viewmore:hover .ic-chevron { transform: translateX(4px); }

/* =========================================================================
   ヘッダー（カンプ y0–96）
   ========================================================================= */
.hd {
	position: relative;
	z-index: 30;
	height: 96px;
	background: #fff;
}
.hd__logo { position: absolute; left: 163px; top: 15px; }
.hd__logo img { width: 52px; height: 64px; }

.hd__nav { position: absolute; left: 441px; top: 44.6px; }
.hd__menu { display: flex; gap: 33px; }
.hd__menu a {
	font-family: var(--gothic);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--navy);
}
.hd__menu a:hover { color: var(--blue); }

/* -------------------------------------------------------------------------
   ホバーメガメニュー（「診療案内」/ Figma node-id=38799-718 準拠）
   5列×4行・20項目。列ごとに花の色をピンク/ブルーで交互にする。
   ---------------------------------------------------------------------- */
.hd__menu-item.has-mega { position: relative; }
/* リンクとメガメニューの間に隙間があると、その間でマウスオーバーが外れて
   メニューが消えてしまう。見えない橋を挟んでホバー判定を途切れさせない。 */
.hd__menu-item.has-mega::after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 26px;
}
.megamenu {
	display: none;
	position: absolute;
	left: 50%;
	top: 51.4px; /* .hd 高さ96px - ナビのベースライン分 */
	transform: translateX(-50%);
	z-index: 35;
	width: 750px;
	padding: 20px 0 8px;
	background: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 16px 32px rgba(14, 25, 64, .12);
}
.hd__menu-item.has-mega:hover .megamenu,
.hd__menu-item.has-mega:focus-within .megamenu { display: block; }

.megamenu__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
.megamenu__grid a {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 66px;
	padding: 0 14px 12px;
	font-family: var(--gothic);
	font-size: 14px;
	line-height: 1.4;
	color: var(--navy);
	border-radius: 8px;
	border: 1px solid transparent;
	border-bottom-color: var(--line);
}
.megamenu__icon { flex: none; line-height: 0; }
.megamenu__icon svg { width: 15px; height: 15px; }
/* 列ごとに花の色をピンク/ブルー交互（5列） */
.megamenu__grid li:nth-child(5n+1) .megamenu__icon,
.megamenu__grid li:nth-child(5n+3) .megamenu__icon,
.megamenu__grid li:nth-child(5n+5) .megamenu__icon { color: var(--pink); }
.megamenu__grid li:nth-child(5n+2) .megamenu__icon,
.megamenu__grid li:nth-child(5n+4) .megamenu__icon { color: var(--blue); }

.megamenu__grid a:hover {
	background: var(--pink-pale);
	border-color: var(--pink);
	border-bottom-color: var(--pink);
}
.megamenu__grid li:nth-child(5n+2) a:hover,
.megamenu__grid li:nth-child(5n+4) a:hover {
	border-color: var(--blue);
	border-bottom-color: var(--blue);
}

.hd__cta { position: absolute; left: 1100px; top: 34px; display: flex; gap: 7px; }
.hd__cta .btn--line { width: 151px; }
.hd__cta .btn--fill { width: 150px; }

/* =========================================================================
   1. ファーストビュー（y0–983 / ヘッダー分を除いた 888px）
   ========================================================================= */
.fv { position: relative; height: 888px; overflow: hidden; }

.fv__photos { position: absolute; left: 0; top: -20px; width: 1440px; height: 908px; }
.fv__photo { position: absolute; top: 0; }
.fv__photo--l { left: 0; width: 898px; height: 908px; }
.fv__photo--r { left: 613px; width: 827px; height: 908px; }

/* 下部の白グラデ（α: y510 で 0 → y984 で 1。カンプ実測をそのままストップ化） */
.fv__wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(255, 255, 255, 0) 46.6%,
		rgba(255, 255, 255, .23) 55.6%,
		rgba(255, 255, 255, .42) 62.4%,
		rgba(255, 255, 255, .58) 69.1%,
		rgba(255, 255, 255, .69) 75.9%,
		rgba(255, 255, 255, .77) 82.7%,
		rgba(255, 255, 255, .86) 89.4%,
		rgba(255, 255, 255, .95) 96.2%,
		rgba(255, 255, 255, 1) 100%);
}

.fv__body { position: absolute; left: 180px; top: 0; }
.fv__title {
	position: absolute;
	left: 0;
	top: 477.5px;
	width: 1100px;
	font-size: 50px;
	line-height: 80.9px;
	font-weight: 400;
	letter-spacing: 0;
	white-space: nowrap;
}
.fv__lead {
	position: absolute;
	left: 0;
	top: 661.1px;
	font-size: 20px;
	line-height: 35.6px;
	white-space: nowrap;
}

.fv__badges { position: absolute; left: 730px; top: 664px; display: flex; gap: 10px; }
.fv__badge {
	position: relative;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.fv__badge--pink { background: var(--pink); }
.fv__badge--blue { background: var(--blue); }
.fv__badge span {
	position: relative;
	z-index: 1;
	font-size: 23px;
	line-height: 40px;
	color: #fff;
	text-align: center;
}
.fv__badge::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 170px 170px;
	background-repeat: no-repeat;
}
.fv__badge:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(28,38,75,.22); }
.fv__badge:nth-child(1)::before { background-image: url(assets/img/badge-deco-1.png); }
.fv__badge:nth-child(2)::before { background-image: url(assets/img/badge-deco-2.png); }
.fv__badge:nth-child(3)::before { background-image: url(assets/img/badge-deco-3.png); }

/* =========================================================================
   2. Information（y984–2107 / h1124）
   ========================================================================= */
.info {
	position: relative;
	height: 1124px;
	--cx: 986px;
	--en-top: 293px;
	--deco-top: 385px;
	--ja-top: 423px;
}
.info__bg { position: absolute; left: 0; top: 0; width: 1440px; height: 1124px; }

/* 背景の淡い花・渦の飾り（#00a7e3 15%相当をカンプから抽出） */
.info::after {
	content: "";
	position: absolute;
	left: 150px;
	top: 136px;
	width: 450px;
	height: 987px;
	background: url(assets/img/info-deco.png) no-repeat 0 0 / 450px 987px;
	pointer-events: none;
}

.info__vert { position: absolute; left: 0; top: 0; }
.info__vline {
	position: absolute;
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 1;
	white-space: nowrap;
	z-index: 2;
}
.info__vline.is-dark { color: var(--navy); }
.info__vline.is-pink { color: var(--pink); }
.info__vline--1 { left: 489px; top: 335px; font-size: 43.4px; }
.info__vline--2 { left: 394px; top: 239px; font-size: 63px; }
.info__vline--3 { left: 318px; top: 371px; font-size: 43.4px; }

.info__panel { position: absolute; left: 0; top: 0; width: 1440px; z-index: 2; }
.info__list { position: absolute; left: 617px; top: 484px; width: 743px; }
.info__list li {
	display: flex;
	align-items: baseline;
	height: 90px;
	padding: 32.7px 0 0 9px;
	border-bottom: 1px solid var(--line);
}
.info__num {
	flex: none;
	width: 49px;
	font-family: var(--en);
	font-size: 30px;
	line-height: 1;
	color: var(--blue);
	letter-spacing: .04em;
}
.info__text { font-size: 28px; line-height: 1; }

/* =========================================================================
   3. Dental Concerns（y2108–3002 / h895）
   ========================================================================= */
.concerns {
	position: relative;
	height: 895px;
	--cx: 720px;
	--en-top: 118.9px;
	--deco-top: 212px;
}
.concerns__woman { position: absolute; left: 1085px; top: 160px; width: 355px; height: 735px; }

.concerns__lead {
	position: absolute;
	left: 0;
	top: 241px;
	width: 1440px;
	text-align: center;
	font-size: 28px;
	line-height: 50.6px;
}

.concerns__cols {
	position: absolute;
	left: 180px;
	top: 399px;
	width: 1080px;
	display: grid;
	grid-template-columns: 484px 576px;
	gap: 20px;
	z-index: 2;
}
.concerns__list li {
	display: flex;
	align-items: center;
	gap: 14.5px;
	height: 75px;
	padding: 4px 0 0 12.8px;
	border-bottom: 1px solid var(--line);
	font-size: 24px;
	line-height: 1;
}
.concerns__list .ic-check { flex: none; width: 22px; height: 22px; color: var(--pink); }

/* =========================================================================
   4. アクセス帯（y3003–3709 / h707）
   ========================================================================= */
.access {
	position: relative;
	height: 707px;
	background: linear-gradient(to bottom, #fff 0%, var(--pink-pale) 34%, #fff 100%);
}

/* --- 医院情報ブロック（アクセス帯とフッターで共通） --- */
.accessblk { position: absolute; left: 0; top: var(--block-top); width: 1440px; }
.accessblk--band { --block-top: 60px; }
.accessblk--footer { --block-top: 84px; }

.accessblk__logo { position: absolute; left: 224px; top: 0; }
.accessblk__logo img { width: 78px; height: 96px; }

.accessblk__addr { position: absolute; left: 324px; top: 10px; font-size: 18px; line-height: 1; }
.accessblk__tel {
	position: absolute;
	left: 322px;
	top: 54px;
	font-size: 30px;
	line-height: 1;
	color: var(--pink);
	letter-spacing: .01em;
}
.accessblk__tel a:hover { opacity: .75; }

.accessblk__route {
	position: absolute;
	left: 129px;
	top: 117px;
	width: 600px;
	text-align: center;
	font-size: 18px;
	line-height: 31.85px;
}

.accessblk__hours { position: absolute; left: 180px; top: 229px; width: 506px; }
.accessblk__hours tr { height: 73px; }
.accessblk__hours th,
.accessblk__hours td {
	border-bottom: 1px solid rgba(14, 25, 64, .14);
	padding: 29.15px 0 0;
	vertical-align: top;
	font-size: 19px;
	line-height: 1;
	font-weight: 400;
}
.accessblk__hours th { width: 151px; text-align: center; }
.accessblk__hours td { padding-left: 7px; }
.accessblk__rest { font-size: 17px; }

.accessblk__closed {
	position: absolute;
	left: 135px;
	top: 404px;
	width: 600px;
	text-align: center;
	font-size: 18px;
	line-height: 1;
}
.accessblk__note { margin-left: 24px; color: var(--pink); }

.accessblk__map {
	position: absolute;
	left: 720px;
	top: 0;
	width: 540px;
	height: 477px;
	background: var(--map);
	overflow: hidden;
}
.accessblk__map iframe { position: absolute; left: 0; top: 0; }

.accessblk__cta { position: absolute; left: 0; top: 0; width: 1440px; }
.accessblk__ctalabel {
	position: absolute;
	left: 305px;
	top: 538.9px;
	font-size: 28.5px;
	line-height: 1;
}
.accessblk__cta .btn--line { position: absolute; left: 581px; top: 516px; width: 272px; }
.accessblk__cta .btn--fill { position: absolute; left: 866px; top: 516px; width: 271px; }

/* =========================================================================
   5. 8 Features（y3710–5311 / h1602）
   ========================================================================= */
.features {
	position: relative;
	height: 1602px;
	--cx: 722px;
	--en-top: 200.2px;
	--deco-top: 293px;
	--ja-top: 330px;
}
.features__bg { position: absolute; left: 0; top: 0; width: 1440px; height: 1602px; }

.features__lead {
	position: absolute;
	left: -4px;
	top: 422px;
	width: 1440px;
	text-align: center;
	font-size: 18px;
	line-height: 1;
}

.features__grid {
	position: absolute;
	left: 132px;
	top: 502px;
	display: grid;
	grid-template-columns: repeat(4, 280px);
	column-gap: 20px;
	row-gap: 0;
}
.feature { position: relative; height: 557.5px; }
.feature__no {
	position: absolute;
	left: 0;
	top: -7.3px;
	width: 100%;
	text-align: center;
	font-family: var(--en);
	font-size: 40px;
	line-height: 1;
	letter-spacing: .05em;
}
.feature__no.is-blue { color: var(--blue); }
.feature__no.is-pink { color: var(--pink); }
.feature__title {
	position: absolute;
	left: 0;
	top: 42px;
	width: 100%;
	height: 86px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 24px;
	line-height: 43px;
	font-weight: 400;
	text-align: center;
}
.feature__imgwrap { position: absolute; left: 0; top: 153px; width: 280px; height: 232px; overflow: hidden; display: block; }
.feature__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.feature:hover .feature__img { transform: scale(1.08); }
.feature__body {
	position: absolute;
	left: 1px;
	top: 407px;
	width: 280px;
	font-size: 18px;
	line-height: 32.3px;
}

/* =========================================================================
   6. Treatment（y5312–6082 / h771）
   ========================================================================= */
.tx {
	position: relative;
	height: 771px;
	--cx: 720px;
	--en-top: 101.4px;
	--deco-top: 183px;
	--ja-top: 212.8px;
}
.tx__bg { position: absolute; left: 0; top: 0; width: 1440px; height: 771px; }

.tx__grid {
	position: absolute;
	left: 121px;
	top: 303px;
	display: grid;
	grid-template-columns: repeat(5, 219px);
	column-gap: 25.75px;
	row-gap: 16.2px;
}
/* position を指定しないと、SP では絶対配置の背景写真（.tx__bg-sp）の後ろに
   回り込んでカード自体の白背景が透明人間になる（アイコン・文字は中の要素が
   position:relative なので前面に出るが、カードの白地だけ消える）。 */
.tx__item { position: relative; background: #fff; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1); }
.tx__item--pink { box-shadow: 4px 4px 0 rgba(235, 107, 164, .32); }
.tx__item--blue { box-shadow: 4px 4px 0 rgba(0, 167, 227, .32); }
.tx__item:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.tx__item a {
	display: flex;
	align-items: center;
	gap: 8.7px;
	height: 80px;
	padding-left: 8.8px;
}
.tx__icon { position: relative; top: 3.2px; flex: none; display: block; line-height: 0; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.tx__icon svg { width: 19px; height: 19px; }
.tx__item:hover .tx__icon { transform: scale(1.15) rotate(-8deg); }
.tx__item a:hover .tx__label { color: var(--pink); }
.tx__item--blue a:hover .tx__label { color: var(--blue); }
.tx__label { transition: color .2s; }
.tx__icon.is-pink { color: var(--pink); }
.tx__icon.is-blue { color: var(--blue); }
.tx__label { position: relative; top: 2px; font-size: 20.3px; line-height: 26.6px; }

/* =========================================================================
   7. PRICE（y6083–6923 / h841）
   ========================================================================= */
.price { position: relative; height: 841px; }
.price__box { position: absolute; left: 180px; top: 101px; width: 1080px; height: 442px; }
.price__bg { position: absolute; left: 0; top: 0; width: 1080px; height: 442px; }

/*
 * カンプでは見出し・リード・カードロゴが枠の中心（x720）ではなく x756 を中心に
 * 置かれている（View More のみ枠中央）。デザインどおり +36px オフセットで再現。
 */
.price__inner {
	position: absolute;
	left: 36px;
	top: 0;
	width: 1080px;
	height: 442px;
	--cx: 540px;
	--en-top: 55.9px;
	--deco-top: 136px;
	--ja-top: 165px;
}
.price__inner .sechead { left: 0; width: 1080px; }
.price__lead {
	position: absolute;
	left: 0;
	top: 204px;
	width: 1080px;
	text-align: center;
	font-size: 28px;
	line-height: 1;
}
.price__note {
	position: absolute;
	left: 0;
	top: 245px;
	width: 1080px;
	text-align: center;
	font-size: 18px;
	line-height: 1;
}
.price__pay { position: absolute; left: 235px; top: 295px; width: 611px; height: 47px; display: flex; align-items: center; gap: 28px; }
.price__cards { width: 389px; height: 47px; }
.price__setapay { width: 194px; height: 47px; }
.price .viewmore { position: absolute; left: 433px; top: 368px; }

/* =========================================================================
   8. Message（y6924–8179 / h1256）
   ========================================================================= */
.msg {
	position: relative;
	height: 1256px;
	--cx: 722px;
	--en-top: 0px;
	--deco-top: 86px;
	--ja-top: 111px;
}
.msg::before {
	content: "";
	position: absolute;
	left: 0;
	top: -44px;
	width: 1440px;
	height: 1250px;
	border-radius: 90px 90px 0 0;
	background: linear-gradient(to bottom,
		#fff2f8 0%,
		#ffe2ee 18%,
		#ffe0ed 55%,
		#fff2f8 74%,
		#fff 100%);
}

/* 院長写真: 角丸マスク（実測 右側 rx394 / ry289.5）＋白フチ12px＋ピンク面をオフセット */
.msg__figure {
	position: absolute;
	left: -4px;
	top: 208px;
	width: 832px;
	height: 579px;
	overflow: hidden;
	border-radius: 0 394px 394px 0 / 0 289.5px 289.5px 0;
	box-shadow: 0 0 0 12px #fff, 40px 32px 0 0 #f9bdd7;
}
.msg__figure img {
	position: absolute;
	left: 0;
	top: -6px;
	width: 850px;
	height: 592px;
	object-fit: cover;
}

.msg::after {
	content: "";
	position: absolute;
	left: 900px;
	top: 96px;
	width: 440px;
	height: 900px;
	background: url(assets/img/msg-deco.png) no-repeat 0 0 / 440px 900px;
	pointer-events: none;
}

.msg__vert { position: absolute; left: 0; top: 0; z-index: 2; }
.msg__vline {
	position: absolute;
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 1;
	white-space: nowrap;
}
.msg__vline.is-dark { color: var(--navy); }
.msg__vline.is-pink { color: var(--pink); }
.msg__vline--1 { left: 1151px; top: 228px; font-size: 43.4px; }
.msg__vline--2 { left: 1061px; top: 131px; font-size: 63px; }
.msg__vline--3 { left: 981px; top: 243px; font-size: 43.4px; }

.msg__card {
	position: absolute;
	left: 180px;
	top: 700px;
	width: 718px;
	height: 386px;
	background: #fff;
	z-index: 3;
}
.msg__name {
	position: absolute;
	left: 31px;
	top: 31px;
	font-size: 27px;
	line-height: 1;
}
.msg__role { font-size: 18px; margin-right: 14px; }
.msg__body {
	position: absolute;
	left: 34px;
	top: 81px;
	font-size: 18px;
	line-height: 32.1px;
}

/* =========================================================================
   9. Pick up（y8180–10529 / h2350）
   ========================================================================= */
.pu {
	position: relative;
	height: 2350px;
	--cx: 720px;
	--en-top: 33.1px;
	--deco-top: 120px;
	--ja-top: 142.5px;
}
.pu__list { position: absolute; left: 54px; top: 236px; }
.pu__item { position: relative; width: 1332px; height: 495px; margin-bottom: 20px; }
.pu__item:last-child { margin-bottom: 0; }
.pu__item > a { display: block; position: relative; width: 1332px; height: 495px; overflow: hidden; }
.pu__bg { position: absolute; left: 0; top: 0; width: 1332px; height: 495px; z-index: 0; transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .3s; }
.pu__item > a:hover .pu__bg { opacity: .92; transform: scale(1.05); }
/* 写真の明るさに関わらず白文字が読めるよう、暗めのフィルターを一枚重ねる。 */
.pu__item > a::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(14, 25, 64, .48);
	pointer-events: none;
}

.pu__body { position: absolute; top: 73.9px; z-index: 2; color: #fff; }
.pu__item--right .pu__body { left: 669px; }
.pu__item--left .pu__body { left: 130px; }

.pu__title { font-size: 47px; line-height: 1; font-weight: 400; }
.pu__no {
	font-family: var(--en);
	font-size: 79px;
	letter-spacing: .04em;
	margin-right: 18px;
}
.pu__text { margin-top: 8px; font-size: 20px; line-height: 36px; }
.pu__tags { display: flex; gap: 10px; margin-top: 39px; }
.pu__tags li {
	height: 29px;
	padding: 0 13px;
	background: rgba(255, 255, 255, .9);
	color: var(--navy);
	font-size: 15px;
	line-height: 29px;
}

/* =========================================================================
   10. Clinic（y10530–11378 / h849）
   ========================================================================= */
.cl {
	position: relative;
	height: 849px;
	--cx: 721px;
	--en-top: 224.3px;
	--deco-top: 305px;
	--ja-top: 335px;
}
/* 上端がアーチ状のピンク面（実測: 中央 y10600、左右端で +148px 下がる） */
.cl__bg {
	position: absolute;
	left: -60px;
	top: 70px;
	width: 1560px;
	bottom: 0;
	border-radius: 50% 50% 0 0 / 253px 253px 0 0;
	background: linear-gradient(to bottom, #fff 0%, #ffd9e8 36%, #fff 100%);
}
.cl__list { position: absolute; left: 180px; top: 412px; display: flex; gap: 15px; }
.cl__card { position: relative; width: 350px; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.cl__card:hover { transform: translateY(-8px); }
.cl__imgwrap { display: block; width: 350px; height: 200px; overflow: hidden; }
.cl__card img { display: block; width: 350px; height: 200px; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.cl__card:hover img { transform: scale(1.08); }
.cl__title {
	position: absolute;
	left: 0;
	top: 241px;
	width: 350px;
	text-align: center;
	font-size: 24px;
	line-height: 1;
	font-weight: 400;
}
.cl__body {
	position: absolute;
	left: 16px;
	top: 294px;
	width: 318px;
	font-size: 18px;
	line-height: 32.5px;
}

/* =========================================================================
   11. News / Blog（y11379–12102 / h724）
   ========================================================================= */
.nb { position: relative; height: 724px; }
.nb__col { position: absolute; top: 0; }
.nb__col--news { left: 183px; width: 480px; --cx: 240px; }
.nb__col--blog { left: 778px; width: 481px; --cx: 241px; }
.nb__col--news::before {
	content: "";
	position: absolute;
	left: -60px;
	top: 36px;
	width: 597px;
	height: 685px;
	background: var(--cream);
}
.nb__col .sechead {
	left: calc(var(--cx) - 720px);
	--en-top: 76.2px;
	--deco-top: 158px;
	--ja-top: 187px;
}
.nb__col > .viewmore { position: absolute; left: 167px; top: 236px; z-index: 2; }
.nb__col--blog > .viewmore { left: 168px; }

.nb__list { position: absolute; left: -2px; top: 345px; width: 482px; z-index: 2; }
.nb__list li { border-bottom: 1px solid var(--line); }
.nb__list a {
	display: flex;
	align-items: flex-start;
	height: 105px;
	padding-bottom: 0;
}
.nb__imgwrap { display: block; flex: none; width: 145px; height: 94px; overflow: hidden; }
.nb__list img { display: block; width: 145px; height: 94px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.nb__list a:hover img { transform: scale(1.1); }
.nb__meta { flex: 1 1 auto; padding-left: 21.6px; padding-top: 22.3px; }
.nb__date {
	display: block;
	font-family: var(--en);
	font-size: 20px;
	line-height: 1;
	letter-spacing: .05em;
	color: var(--blue);
}
.nb__title { display: block; margin-top: 8.1px; font-size: 18px; line-height: 1; }
.nb__list .ic-arrowline { flex: none; width: 44px; height: 8px; margin-top: 44px; color: var(--navy); }
.nb__list a:hover { opacity: .68; }

/* =========================================================================
   12. フッター（y12103–13207 / h1105）
   ========================================================================= */
.ft {
	position: relative;
	height: 1047px;
	background: linear-gradient(to bottom, #fff 0%, #ffe1ee 50%, #faccd8 100%);
}
.ft__base { height: 58px; background: #fff; }

.ft__links { position: absolute; left: 0; top: 0; width: 1440px; }
.ft__col { position: absolute; }
.ft__col--main { left: 181px; top: 705px; width: 199px; }
.ft__col--treatment { left: 402px; top: 705px; width: 652px; }
.ft__col--sub { left: 1109px; top: 712px; width: 200px; }

.ft__links::after {
	content: "";
	position: absolute;
	left: 1081px;
	top: 677px;
	width: 1px;
	height: 340px;
	background: rgba(14, 25, 64, .16);
}

.ft__list li { border-bottom: 1px solid rgba(14, 25, 64, .16); }
.ft__list a {
	display: block;
	padding: 13px 0 18px;
	font-family: var(--gothic);
	font-size: 15px;
	line-height: 1;
}
.ft__list--plain li { border-bottom: 0; }
.ft__list--plain a { padding: 12px 0 8.8px; }
.ft__list a:hover { color: var(--blue); }

.ft__heading {
	padding: 13px 0 18px;
	border-bottom: 1px solid rgba(14, 25, 64, .16);
	font-family: var(--gothic);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
}
.ft__grid {
	display: grid;
	grid-template-columns: repeat(3, 220.6px);
	grid-auto-flow: row;
	margin-top: 20.8px;
}
.ft__grid li { height: 30px; }
.ft__grid a {
	font-family: var(--gothic);
	font-size: 15px;
	line-height: 1;
}
.ft__grid a:hover { color: var(--blue); }

/* =========================================================================
   下層ページ用の最小スタイル（TOP以外）
   ========================================================================= */
.page-body { width: 1080px; margin: 0 auto; padding: 80px 0 120px; }
.page-body h1 { font-size: 40px; line-height: 1.6; margin-bottom: 40px; }
.page-body p { font-size: 18px; line-height: 2; margin-bottom: 1.6em; }


/* =========================================================================
   PC/SP 切り替えの土台（PC側の既定値）
   ========================================================================= */
.br-sp { display: none; }
.hd__burger,
.drawer,
.fvcta,
.info__bg-sp,
.concerns__woman-sp,
.features__bg-sp,
.tx__bg-sp,
.price__bg-sp,
.pu__bg-sp { display: none; }

/* =========================================================================
   SP（Figma「こはた歯科」SP TOP / 375×11954 の再現）

   デザイン幅 375px を基準に vw で等倍スケールさせる。
   --u = 1デザインpx。480px で上限を打ち、それ以上は中央寄せ。
   数値はすべて SP カンプの実測値（design px）。
   ========================================================================= */
@media (max-width: 767px) {

	:root {
		--sp: min(100vw, 480px);
		--u: calc(var(--sp) / 375);
	}

	.br-pc { display: none; }
	.br-sp { display: inline; }

	.site {
		width: 100%;
		max-width: 480px;
		overflow: hidden;
	}

	/* ---- 共通見出し（英字39px / 花13px / 和文20px） ----
	   position は static ではなく relative にする。static のままだと、
	   背景が絶対配置の写真（例: .tx__bg-sp）を持つセクションで、見出しが
	   その背景の描画順より後ろに回り込んで隠れてしまう。 */
	.sechead {
		position: relative;
		left: auto;
		width: 100%;
		padding: 0;
	}
	.sechead__en,
	.sechead__deco,
	.sechead__ja {
		position: static;
		top: auto;
		width: 100%;
	}
	.sechead__en { font-size: calc(39 * var(--u)); line-height: 1; }
	.sechead__deco { display: block; line-height: 0; margin: calc(5 * var(--u)) 0 0; }
	.sechead__deco svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
	.sechead__ja { margin: calc(5 * var(--u)) 0 0; font-size: calc(20 * var(--u)); }

	/* ---- ボタン ---- */
	.btn--lg {
		height: calc(43.5 * var(--u));
		font-size: calc(18 * var(--u));
		gap: calc(8 * var(--u));
	}
	.btn--lg svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

	.viewmore {
		width: calc(134 * var(--u));
		padding-bottom: calc(5 * var(--u));
		font-size: calc(19 * var(--u));
	}
	.viewmore .ic-chevron { width: calc(6 * var(--u)); height: calc(10 * var(--u)); }

	/* =====================================================================
	   ヘッダー（75px）＋ ドロワー
	   ===================================================================== */
	.hd { height: calc(75 * var(--u)); }
	.hd__logo { left: calc(27.7 * var(--u)); top: calc(6.6 * var(--u)); }
	.hd__logo img { width: calc(43.5 * var(--u)); height: calc(54.8 * var(--u)); }
	.hd__nav,
	.hd__cta { display: none; }

	.hd__burger {
		display: block;
		position: absolute;
		right: calc(17.2 * var(--u));
		top: calc(20.3 * var(--u));
		width: calc(46.2 * var(--u));
		height: calc(27 * var(--u));
		padding: 0;
		border: 0;
		background: none;
		color: var(--blue);
		cursor: pointer;
	}
	.hd__burger svg { width: 100%; height: 100%; }
	.hd__burger[aria-expanded="true"] { color: var(--pink); }

	/* Figma「ホバーメニュー・ハンバーガーメニュー」node-id=38799-718 の SP ドロワー準拠。
	   グリッドの内容はフッターと同じ3グループ（医院情報／診療案内20件／サブ）を再利用する。 */
	.drawer {
		display: block;
		position: fixed;
		inset: calc(75 * var(--u)) 0 0;
		z-index: 40;
		overflow-y: auto;
		padding: calc(56 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
		background: linear-gradient(to bottom, #fff 0%, var(--pink-pale) 38%, var(--pink-pale) 100%);
	}
	.drawer[hidden] { display: none; }

	.drawer__close {
		position: absolute;
		right: calc(20 * var(--u));
		top: calc(18 * var(--u));
		width: calc(28 * var(--u));
		height: calc(28 * var(--u));
		padding: 0;
		border: 0;
		background: none;
		color: var(--blue);
		cursor: pointer;
	}
	.drawer__close svg { width: 100%; height: 100%; }

	.drawer__grid {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(12 * var(--u));
	}
	.drawer__grid a {
		display: block;
		padding: calc(10.5 * var(--u)) 0;
		font-family: var(--gothic);
		font-size: calc(15 * var(--u));
		line-height: 1.5;
		color: var(--navy);
	}
	.drawer__heading {
		margin: calc(18 * var(--u)) 0 calc(6 * var(--u));
		font-family: var(--gothic);
		font-size: calc(15 * var(--u));
		font-weight: 500;
		color: var(--navy);
	}
	/* 診療案内20件だけ下線付き（フッターの診療案内グリッドと同じ扱い） */
	.drawer__grid--treatment {
		margin-top: calc(4 * var(--u));
		grid-auto-rows: calc(38 * var(--u));
	}
	.drawer__grid--treatment li { display: flex; align-items: center; }
	.drawer__grid--treatment a {
		padding: 0;
		font-size: calc(14 * var(--u));
		text-decoration: underline;
		text-underline-offset: 0.18em;
		word-break: keep-all;
	}

	.drawer__cta { margin-top: calc(28 * var(--u)); text-align: center; }
	.drawer__cta-label {
		margin: 0 0 calc(14 * var(--u));
		font-family: var(--mincho);
		font-size: calc(18 * var(--u));
	}
	.drawer__cta-buttons { display: flex; gap: calc(10 * var(--u)); }
	.drawer__cta-buttons .btn { flex: 1 1 0; }

	/* =====================================================================
	   1. ファーストビュー
	   ===================================================================== */
	.fv { height: auto; overflow: visible; padding-bottom: calc(9.6 * var(--u)); }
	.fv__photos {
		position: relative;
		left: auto;
		top: 0;
		width: 100%;
		height: calc(236 * var(--u));
	}
	.fv__photo--l { left: 0; width: calc(251 * var(--u)); height: calc(236 * var(--u)); }
	.fv__photo--r { left: calc(160 * var(--u)); width: calc(215 * var(--u)); height: calc(236 * var(--u)); }
	.fv__wash { display: none; }

	.fv__body { position: static; left: auto; padding: 0 calc(10 * var(--u)); }
	.fv__title {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		margin-top: calc(9 * var(--u));
		font-size: calc(22 * var(--u));
		line-height: calc(35.3 * var(--u));
		text-align: center;
		white-space: normal;
	}
	.fv__lead {
		position: static;
		left: auto;
		top: auto;
		margin-top: calc(8.5 * var(--u));
		font-size: calc(16 * var(--u));
		line-height: calc(29 * var(--u));
		text-align: center;
		white-space: normal;
	}

	.fv__badges {
		position: static;
		left: auto;
		top: auto;
		margin: calc(12.5 * var(--u)) 0 0;
		padding: 0 calc(5.5 * var(--u));
		gap: calc(3.5 * var(--u));
	}
	.fv__badge { width: auto; flex: 1 1 0; height: auto; aspect-ratio: 1 / 1; }
	.fv__badge::before { background-size: 100% 100%; }
	.fv__badge span { font-size: calc(15 * var(--u)); line-height: calc(28.4 * var(--u)); }

	.fvcta {
		display: flex;
		height: calc(57.4 * var(--u));
		margin-top: calc(28 * var(--u));
	}
	.fvcta__tel,
	.fvcta__web {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: calc(9 * var(--u));
		font-size: calc(19 * var(--u));
		line-height: 1;
	}
	.fvcta__tel { background: #fff; color: var(--pink); }
	.fvcta__web { background: var(--pink); color: #fff; }
	.fvcta svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); flex: none; }

	/* =====================================================================
	   2. Information（背景 375×727）
	   ===================================================================== */
	.info {
		height: auto;
		padding: calc(53 * var(--u)) calc(20 * var(--u)) calc(33.9 * var(--u));
	}
	.info__bg { display: none; }
	.info__bg-sp {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(727 * var(--u));
	}
	.info::after { display: none; }

	/* position を static のままにすると、絶対配置の背景写真（.info__bg-sp）より
	   後ろに回り込んで中身が透明人間になる（.tx の見出しと同じ理由）。relative にして
	   背景より手前に描画させる。 */
	.info__vert { position: relative; }
	.info__vline {
		position: static;
		left: auto;
		top: auto;
		writing-mode: horizontal-tb;
		text-align: center;
		font-size: calc(21 * var(--u));
		line-height: calc(35 * var(--u));
	}
	.info__panel { position: relative; width: auto; }
	.info .sechead { margin-top: calc(33.1 * var(--u)); }
	.info__list {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		margin-top: calc(18.6 * var(--u));
	}
	.info__list li {
		height: auto;
		min-height: calc(54.7 * var(--u));
		padding: calc(12.1 * var(--u)) 0 calc(6.4 * var(--u)) calc(5.4 * var(--u));
		align-items: center;
		font-size: calc(19.5 * var(--u));
		line-height: calc(28.8 * var(--u));
	}
	.info__num {
		width: calc(34.8 * var(--u));
		font-size: calc(21 * var(--u));
	}
	.info__text { font-size: calc(20 * var(--u)); line-height: calc(36.3 * var(--u)); }

	/* =====================================================================
	   3. Dental Concerns
	   ===================================================================== */
	.concerns {
		height: auto;
		padding: calc(26.3 * var(--u)) calc(20 * var(--u)) calc(4.8 * var(--u));
	}
	.concerns__woman { display: none; }
	.concerns__woman-sp {
		display: block;
		position: absolute;
		left: calc(181.4 * var(--u));
		top: calc(37.3 * var(--u));
		width: calc(194 * var(--u));
		height: calc(160 * var(--u));
	}
	.concerns__lead {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		margin-top: 0;
		font-size: calc(20 * var(--u));
		line-height: calc(35.6 * var(--u));
	}
	.concerns__cols {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		display: block;
		margin-top: calc(10.4 * var(--u));
	}
	.concerns__list li {
		height: auto;
		min-height: calc(47.2 * var(--u));
		gap: calc(9.4 * var(--u));
		padding: calc(6.8 * var(--u)) 0 calc(6.8 * var(--u)) calc(3.5 * var(--u));
		align-items: center;
		font-size: calc(18 * var(--u));
		line-height: calc(33.6 * var(--u));
	}
	.concerns__list .ic-check { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

	/* =====================================================================
	   4. アクセス帯
	   ===================================================================== */
	.access {
		height: auto;
		padding: calc(31 * var(--u)) 0 calc(37.8 * var(--u));
		background: linear-gradient(to bottom, #fff 0%, #ffe1ee 27%, #ffe1ee 53%, #fff 94%);
	}

	.accessblk,
	.accessblk--band,
	.accessblk--footer {
		position: static;
		width: auto;
		top: auto;
	}
	.accessblk__logo {
		position: absolute;
		left: calc(13.6 * var(--u));
		top: calc(31 * var(--u));
	}
	.accessblk__logo img { width: calc(51.4 * var(--u)); height: calc(64.7 * var(--u)); }
	.accessblk__addr {
		position: static;
		margin: 0 0 0 calc(77.3 * var(--u));
		padding-top: calc(5.6 * var(--u));
		font-size: calc(17 * var(--u));
		line-height: 1.3;
	}
	.accessblk__tel {
		position: static;
		margin: calc(8.9 * var(--u)) 0 0 calc(75 * var(--u));
		font-size: calc(24 * var(--u));
	}
	.accessblk__route {
		position: static;
		left: auto;
		width: 100%;
		margin-top: calc(14.9 * var(--u));
		font-size: calc(16 * var(--u));
		line-height: calc(29.2 * var(--u));
	}
	.accessblk__hours {
		position: static;
		left: auto;
		width: calc(334.4 * var(--u));
		margin: calc(7.4 * var(--u)) auto 0;
	}
	.accessblk__hours tr { height: auto; }
	.accessblk__hours th,
	.accessblk__hours td {
		padding: calc(12 * var(--u)) 0;
		vertical-align: middle;
		font-size: calc(16 * var(--u));
		line-height: calc(23 * var(--u));
	}
	.accessblk__hours th { width: calc(120.8 * var(--u)); }
	.accessblk__hours td { padding-left: calc(10 * var(--u)); }
	.accessblk__rest { display: block; font-size: calc(15 * var(--u)); }
	.accessblk__closed {
		position: static;
		left: auto;
		width: 100%;
		margin-top: calc(17.1 * var(--u));
		font-size: calc(16 * var(--u));
	}
	.accessblk__note { margin-left: calc(14 * var(--u)); }
	.accessblk__map {
		position: relative;
		left: auto;
		width: 100%;
		height: calc(200 * var(--u));
		margin-top: calc(15.9 * var(--u));
	}
	.accessblk__cta {
		position: static;
		width: auto;
		margin-top: calc(22.8 * var(--u));
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: calc(11 * var(--u));
	}
	.accessblk__ctalabel {
		position: static;
		left: auto;
		top: auto;
		flex: 0 0 100%;
		margin-bottom: calc(5.8 * var(--u));
		text-align: center;
		font-size: calc(20 * var(--u));
	}
	.accessblk__cta .btn--line,
	.accessblk__cta .btn--fill {
		position: static;
		left: auto;
		top: auto;
		width: calc(160 * var(--u));
	}

	/* =====================================================================
	   5. 8 Features（背景 375×1602）
	   ===================================================================== */
	.features {
		height: auto;
		padding: calc(35.5 * var(--u)) calc(19.8 * var(--u)) calc(6.1 * var(--u));
	}
	.features__bg { display: none; }
	.features__bg-sp {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(1602 * var(--u));
	}
	.features__lead {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		margin-top: calc(15.5 * var(--u));
		font-size: calc(16 * var(--u));
		line-height: calc(29 * var(--u));
	}
	.features__grid {
		position: static;
		left: auto;
		top: auto;
		margin-top: calc(19.35 * var(--u));
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(14.8 * var(--u));
		row-gap: 0;
		grid-auto-rows: auto;
	}
	.feature {
		height: auto;
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
	}
	.feature__no,
	.feature__title,
	.feature__imgwrap,
	.feature__body { position: static; left: auto; top: auto; }
	.feature__no {
		font-size: calc(30 * var(--u));
		margin: 0;
		align-self: end;
	}
	.feature__title {
		height: auto;
		margin-top: calc(1.3 * var(--u));
		font-size: calc(17.4 * var(--u));
		line-height: calc(29 * var(--u));
		align-self: end;
		display: block;
	}
	/* 04 のみ SP で 3 行になる。デザインの行送りも 3 行時は詰まっているため合わせる */
	.feature--n04 .feature__title { line-height: calc(25 * var(--u)); }
	.feature__imgwrap {
		display: block;
		width: 100%;
		aspect-ratio: 160 / 132;
		margin-top: calc(10.2 * var(--u));
		overflow: hidden;
	}
	.feature__img {
		width: 100%;
		height: 100%;
		margin-top: 0;
	}
	.feature__body {
		width: auto;
		margin-top: calc(9.95 * var(--u));
		margin-bottom: calc(15.5 * var(--u));
		font-size: calc(15.9 * var(--u));
		line-height: calc(29.2 * var(--u));
	}

	/* =====================================================================
	   6. Treatment（背景 375×890）
	   ===================================================================== */
	.tx {
		height: auto;
		padding: calc(30 * var(--u)) calc(8.3 * var(--u)) calc(51.4 * var(--u));
	}
	.tx__bg { display: none; }
	.tx__bg-sp {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(890 * var(--u));
	}
	.tx__grid {
		position: static;
		left: auto;
		top: auto;
		margin-top: calc(18.3 * var(--u));
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(7.6 * var(--u));
		row-gap: calc(10.6 * var(--u));
	}
	.tx__item--pink { box-shadow: calc(3.5 * var(--u)) calc(3.5 * var(--u)) 0 rgba(235, 107, 164, .3); }
	.tx__item--blue { box-shadow: calc(3.5 * var(--u)) calc(3.5 * var(--u)) 0 rgba(0, 167, 227, .3); }
	.tx__item a {
		height: calc(63.3 * var(--u));
		gap: calc(6 * var(--u));
		padding-left: calc(7.6 * var(--u));
	}
	.tx__icon { top: calc(2 * var(--u)); }
	.tx__icon svg { width: calc(14.5 * var(--u)); height: calc(14.5 * var(--u)); }
	.tx__label {
		top: calc(1 * var(--u));
		font-size: calc(16 * var(--u));
		line-height: calc(21.8 * var(--u));
	}

	/* =====================================================================
	   7. PRICE（背景 375×321・全幅）
	   ===================================================================== */
	.price { height: auto; padding-bottom: calc(37.6 * var(--u)); }
	.price__box {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: calc(367 * var(--u));
		margin-top: 0;
	}
	.price__bg { display: none; }
	.price__bg-sp {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(367 * var(--u));
		object-fit: cover;
	}
	.price__inner {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: calc(29.1 * var(--u)) calc(18 * var(--u)) 0;
	}
	.price__inner .sechead { width: 100%; }
	.price__lead,
	.price__note,
	.price__pay,
	.price .viewmore { position: static; left: auto; top: auto; }
	.price__lead {
		width: 100%;
		margin-top: calc(31 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(18 * var(--u));
	}
	.price__note {
		width: 100%;
		margin-top: calc(23 * var(--u));
		font-size: calc(16 * var(--u));
		line-height: calc(16 * var(--u));
	}
	.price__pay {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(12 * var(--u));
		margin: calc(13.5 * var(--u)) auto 0;
	}
	.price__cards { width: calc(335 * var(--u)); height: calc(41 * var(--u)); }
	.price__setapay { width: calc(140 * var(--u)); height: calc(34 * var(--u)); }
	.price .viewmore { margin: calc(18.1 * var(--u)) auto 0; transform: translateX(calc(12.2 * var(--u))); }

	/* =====================================================================
	   8. Message
	   ===================================================================== */
	.msg {
		height: auto;
		padding: calc(18.9 * var(--u)) calc(20 * var(--u)) 0;
	}
	.msg::before {
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
		background: linear-gradient(to bottom, #fff 0%, #ffdeec 22%, #ffdeec 62%, #fff 100%);
	}
	.msg::after { display: none; }

	/* static のままだと、絶対配置の背景（.msg::before）より後ろに回り込んで
	   文章が見えなくなる（.info / .tx と同じ理由）。relative で前面に出す。 */
	.msg__vert { position: relative; margin-top: calc(21.7 * var(--u)); }
	.msg__vline {
		position: static;
		left: auto;
		top: auto;
		writing-mode: horizontal-tb;
		text-align: center;
		font-size: calc(20 * var(--u));
		line-height: calc(36.2 * var(--u));
	}

	.msg__figure {
		position: relative;
		left: auto;
		top: auto;
		/* カンプ実測：写真 327.5×225／右端は半径 112.5 の真円アーチ／白フチ 3・影 +10/+9 */
		width: calc(327.5 * var(--u));
		height: calc(225 * var(--u));
		margin: calc(18.7 * var(--u)) 0 0 calc(-16.5 * var(--u));
		border-radius: 0 calc(112.5 * var(--u)) calc(112.5 * var(--u)) 0;
		box-shadow: 0 0 0 calc(3 * var(--u)) #fff, calc(10 * var(--u)) calc(9 * var(--u)) 0 0 #f9bdd7;
	}
	.msg__figure img {
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.msg__card {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		margin-top: calc(38.1 * var(--u));
		padding: calc(20.4 * var(--u)) calc(21 * var(--u)) calc(26 * var(--u));
	}
	.msg__name {
		position: static;
		left: auto;
		top: auto;
		font-size: calc(20 * var(--u));
	}
	.msg__role { font-size: calc(14 * var(--u)); margin-right: calc(10 * var(--u)); }
	.msg__body {
		position: static;
		left: auto;
		top: auto;
		margin-top: calc(17.5 * var(--u));
		font-size: calc(16 * var(--u));
		line-height: calc(29 * var(--u));
	}

	/* =====================================================================
	   9. Pick up（バナー 375×300 ×4）
	   ===================================================================== */
	.pu { height: auto; padding: calc(44.2 * var(--u)) 0 calc(20.3 * var(--u)); }
	.pu__list { position: static; left: auto; top: auto; margin-top: calc(17 * var(--u)); }
	.pu__item {
		width: 100%;
		height: calc(300 * var(--u));
		margin-bottom: calc(20 * var(--u));
	}
	.pu__item > a { width: 100%; height: calc(300 * var(--u)); }
	.pu__bg { display: none; }
	.pu__bg-sp {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(300 * var(--u));
	}
	.pu__item--right .pu__body,
	.pu__item--left .pu__body {
		left: calc(20 * var(--u));
		top: calc(26.3 * var(--u));
		right: calc(20 * var(--u));
	}
	.pu__title { font-size: calc(30 * var(--u)); line-height: 1; letter-spacing: calc(2.15 * var(--u)); }
	.pu__no { font-size: calc(40 * var(--u)); margin-right: calc(38 * var(--u)); letter-spacing: normal; }
	.pu__text {
		margin-top: calc(5.7 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(31.7 * var(--u));
	}
	.pu__tags {
		flex-wrap: wrap;
		gap: calc(5.9 * var(--u)) calc(5.3 * var(--u));
		margin-top: calc(11.6 * var(--u));
	}
	.pu__tags li {
		height: calc(28.4 * var(--u));
		padding: 0 calc(9 * var(--u));
		font-size: calc(16.2 * var(--u));
		line-height: calc(28.4 * var(--u));
	}

	/* =====================================================================
	   10. Clinic（設備紹介）
	   ===================================================================== */
	.cl { height: auto; padding: calc(63.6 * var(--u)) calc(12.5 * var(--u)) calc(25.3 * var(--u)); }
	.cl__bg {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
		background: linear-gradient(to bottom, #fff 0%, #ffe1ee 28%, #ffe1ee 72%, #fff 100%);
	}
	.cl__list {
		position: static;
		left: auto;
		top: auto;
		display: block;
		margin-top: calc(32.3 * var(--u));
	}
	.cl__card { width: 100%; margin-bottom: calc(30.2 * var(--u)); }
	.cl__card:nth-child(2) { margin-bottom: calc(20.4 * var(--u)); }
	.cl__card:last-child { margin-bottom: 0; }
	.cl__imgwrap { width: 100%; height: auto; aspect-ratio: 350 / 200; }
	.cl__card img { width: 100%; height: 100%; aspect-ratio: 350 / 200; }
	.cl__title {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		margin-top: calc(16.7 * var(--u));
		font-size: calc(20 * var(--u));
	}
	.cl__body {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		margin: calc(17.1 * var(--u)) calc(13.5 * var(--u)) 0 calc(16 * var(--u));
		font-size: calc(16 * var(--u));
		line-height: calc(29.3 * var(--u));
	}

	/* =====================================================================
	   11. News / Blog（縦積み）
	   ===================================================================== */
	.nb { height: auto; }
	.nb__col {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		padding: calc(19.2 * var(--u)) calc(19 * var(--u)) calc(20.4 * var(--u));
	}
	.nb__col--blog {
		padding-bottom: 0;
	}
	.nb__col--news { background: var(--cream); }
	.nb__col--news::before { display: none; }
	.nb__col .sechead { left: auto; }
	.nb__list {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		margin-top: calc(16.8 * var(--u));
	}
	.nb__list a { height: auto; padding: calc(10 * var(--u)) 0; align-items: center; }
	.nb__imgwrap { width: calc(99 * var(--u)); height: calc(64 * var(--u)); }
	.nb__list img { width: calc(99 * var(--u)); height: calc(64 * var(--u)); }
	.nb__meta { padding-left: calc(12.3 * var(--u)); padding-top: 0; }
	.nb__date { font-size: calc(17.4 * var(--u)); }
	.nb__title { margin-top: calc(8 * var(--u)); font-size: calc(17.6 * var(--u)); line-height: 1.5; }
	.nb__list .ic-arrowline { width: calc(30 * var(--u)); height: calc(6 * var(--u)); margin-top: 0; }
	.nb__col > .viewmore {
		position: static;
		left: auto;
		top: auto;
		margin: calc(8.6 * var(--u)) auto 0;
	}

	/* =====================================================================
	   12. フッター
	   ===================================================================== */
	.ft {
		height: auto;
		padding: calc(37.5 * var(--u)) 0 calc(25.1 * var(--u));
		background: linear-gradient(to bottom, #fff 0%, #ffe5f0 32%, #ffdbea 52%, #fcd2e0 78%, #fcd2e0 100%);
	}
	/* フッターは .ft の padding-top が 37.5 のため、絶対配置ロゴも合わせる */
	.accessblk--footer .accessblk__logo { top: calc(37.5 * var(--u)); }
	.ft__base { display: none; }
	.ft__links {
		position: static;
		width: auto;
		margin-top: calc(15.6 * var(--u));
		padding: 0 calc(20 * var(--u));
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(12 * var(--u));
	}
	.ft__col { position: static; left: auto; top: auto; width: auto; }
	.ft__col--main,
	.ft__col--sub { display: contents; }
	.ft__col--main .ft__list,
	.ft__col--sub .ft__list { display: contents; }
	.ft__col--sub .ft__list li { border-bottom: 1px solid rgba(14, 25, 64, .16); }
	/* サブリンク群の前だけデザイン上 8px 余白が広い */
	.ft__col--sub .ft__list li:nth-child(1),
	.ft__col--sub .ft__list li:nth-child(2) { margin-top: calc(4.3 * var(--u)); }
	.ft__col--treatment { grid-column: 1 / -1; margin-top: calc(10.5 * var(--u)); }

	.ft__links::after { display: none; }
	.ft__list a,
	.ft__heading,
	.ft__grid a { font-size: calc(15 * var(--u)); }
	.ft__list a { padding: calc(10.5 * var(--u)) 0; line-height: calc(19.6 * var(--u)); }
	.ft__list--plain a { padding: calc(10.5 * var(--u)) 0; }
	.ft__heading { padding: calc(10.5 * var(--u)) 0; line-height: calc(19.6 * var(--u)); }
	.ft__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(12 * var(--u));
		grid-auto-rows: calc(42.2 * var(--u));
		margin-top: calc(9.1 * var(--u));
	}
	.ft__grid li { height: auto; display: flex; align-items: center; }
	.ft__grid a {
		display: block;
		padding: 0;
		line-height: calc(21.1 * var(--u));
		/* Figma と同じ折り返し（区切り記号でのみ改行）を再現 */
		word-break: keep-all;
		text-decoration: underline;
		text-underline-offset: 0.18em;
	}
}

/* subgrid 非対応ブラウザ用フォールバック */
@media (max-width: 767px) {
	@supports not (grid-template-rows: subgrid) {
		.feature { display: flex; flex-direction: column; }
		.feature__title {
			min-height: calc(87 * var(--u));
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}
	}
}

/* =========================================================================
   下層ページ共通 ＋ 虫歯治療ページ
   ・TOP と同じ 1440px キャンバス上に置く（.site の zoom でそのまま追従する）
   ・コンテンツ幅は 1080px（TOP の PRICE ボックス・page-body と同じ）
   ========================================================================= */

.lp { position: relative; }
.lp__inner { width: 1080px; margin: 0 auto; }

/* -------------------------------------------------------------------------
   ページヒーロー
   ---------------------------------------------------------------------- */
.phero {
	position: relative;
	padding: 74px 0 40px;
	text-align: center;
	background: linear-gradient(to bottom, #fff 0%, var(--pink-pale) 46%, #fff 100%);
}
.phero__en {
	margin: 0;
	font-family: var(--en);
	font-weight: 300;
	font-size: 60px;
	line-height: 1;
	color: var(--blue);
	letter-spacing: .02em;
}
.phero__deco { display: block; line-height: 0; margin: 13px 0 0; }
.phero__deco svg { width: 19px; height: 19px; color: var(--pink); }
.phero__ja {
	margin: 12px 0 0;
	font-size: 32px;
	line-height: 1.5;
	font-weight: 500;
}

/* パンくず */
.breadcrumb {
	margin: 26px 0 0;
	font-family: var(--gothic);
	font-size: 13px;
	line-height: 1.6;
	color: var(--navy-2);
}
.breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 8px;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1px solid #9aa1b8;
	border-right: 1px solid #9aa1b8;
	transform: rotate(45deg);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--pink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--pink); }

/* -------------------------------------------------------------------------
   本文の基本要素
   ---------------------------------------------------------------------- */
.lp__body { padding: 62px 0 0; }

.plead {
	width: 940px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 2.1;
	text-align: center;
}

.ptext {
	margin: 0 0 1.55em;
	font-size: 16px;
	line-height: 1.95;
}
.ptext:last-child { margin-bottom: 0; }
.ptext--gap { margin-top: 34px; }

/* 対応決済のロゴ（料金案内ページなど） */
.paylogos { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin: 8px 0 30px; }
.paylogos__item { display: block; width: auto; height: 40px; }

/* アイコン SVG（ic-*）は幅・高さを持たないため、TOP 側の各コンポーネント固有の
   サイズ指定がない文脈（下層ページの本文中など）で使うと巨大に表示されてしまう。
   その保険として、本文内で使う場合は文字サイズに揃えておく。 */
.ptext svg[class^="ic-"],
.ptext svg[class*=" ic-"] {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
}

/* 原稿の「・」箇条書き */
.plist {
	list-style: none;
	margin: 0 0 1.55em;
	padding: 0;
}
.plist:last-child { margin-bottom: 0; }
.plist li {
	position: relative;
	padding: 0 0 0 22px;
	font-size: 16px;
	line-height: 1.95;
}
.plist li::before {
	content: "";
	position: absolute;
	left: 5px;
	top: .82em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pink);
}
.plist li + li { margin-top: 6px; }

/* 届出施設基準の簡易一覧（名称のみ・2列） */
.pstd {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 32px;
}
.pstd li {
	position: relative;
	padding: 0 0 0 20px;
	font-family: var(--gothic);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--navy-2);
}
.pstd li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--blue);
}

/* FAQ の回答（段落と箇条書きが混在する） */
.pfaq__text { flex: 1 1 auto; min-width: 0; }
.pfaq__text .plist { margin-bottom: 0; }
.pfaq__text .plist li,
.pfaq__text .ptext { font-size: 15.5px; }

/* セクション */
.psec {
	margin-top: 92px;
	/* 目次からのアンカー移動で見出しが画面の端に貼りつかないように */
	scroll-margin-top: 28px;
}
.psec__title {
	position: relative;
	margin: 0 0 34px;
	padding: 0 0 20px;
	font-size: 30px;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
}
.psec__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 56px;
	height: 2px;
	margin-left: -28px;
	background: var(--pink);
}
.psec__mark { display: block; line-height: 0; margin: 0 0 12px; }
.psec__mark svg { width: 18px; height: 18px; color: var(--pink); }

/* 小見出し */
.psub { margin-top: 44px; }
.psub:first-child { margin-top: 0; }
.psub__title {
	margin: 0 0 16px;
	padding: 0 0 0 18px;
	border-left: 4px solid var(--pink);
	font-size: 21px;
	line-height: 1.6;
	font-weight: 500;
}

/* 補足ボックス（クリーム） */
.pnote {
	margin: 30px 0 0;
	padding: 30px 36px;
	background: var(--cream);
	border-radius: 8px;
}
.pnote .ptext { font-size: 15.5px; }

/* ボタン（→詳しくはこちら） */
.pbtns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 32px 0 0;
}
.pbtn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-width: 330px;
	padding: 17px 26px;
	border: 1px solid var(--pink);
	border-radius: 999px;
	background: #fff;
	color: var(--pink);
	font-family: var(--gothic);
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.pbtn__label { font-weight: 500; }
.pbtn__note { font-size: 13px; opacity: .8; }
.pbtn svg { flex: none; width: 22px; height: 6px; }
.pbtn:hover { background: var(--pink); color: #fff; }

/* -------------------------------------------------------------------------
   目次
   ---------------------------------------------------------------------- */
.ptoc {
	margin: 56px 0 0;
	padding: 36px 44px 40px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 10px;
}
.ptoc__title {
	margin: 0 0 22px;
	font-size: 20px;
	line-height: 1;
	font-weight: 500;
	text-align: center;
}
.ptoc__title span {
	display: block;
	margin: 0 0 6px;
	font-family: var(--en);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--blue);
}
.ptoc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 48px;
}
.ptoc > ol > li { break-inside: avoid; margin: 0 0 12px; }
.ptoc a {
	display: flex;
	gap: 10px;
	color: var(--navy);
	font-family: var(--gothic);
	font-size: 15px;
	line-height: 1.7;
	text-decoration: none;
}
.ptoc a:hover { color: var(--pink); }
.ptoc__no {
	flex: none;
	font-family: var(--en);
	font-size: 14px;
	color: var(--pink);
}
.ptoc ol ol {
	columns: 1;
	margin: 6px 0 0 24px;
}
.ptoc ol ol li { margin: 0 0 6px; }
.ptoc ol ol a { font-size: 14px; color: var(--navy-2); }
.ptoc ol ol .ptoc__no { color: var(--blue); }

/* -------------------------------------------------------------------------
   当院の特徴（番号つきカード）
   ---------------------------------------------------------------------- */
.cfeat { list-style: none; margin: 0; padding: 0; }
.cfeat > li {
	display: grid;
	grid-template-columns: 116px 1fr;
	align-items: start;
	padding: 30px 36px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(14, 25, 64, .04);
}
.cfeat > li + li { margin-top: 20px; }
.cfeat > li { scroll-margin-top: 28px; }
.cfeat__no {
	font-family: var(--en);
	font-weight: 300;
	font-size: 46px;
	line-height: 1;
	letter-spacing: .02em;
}
.cfeat > li:nth-child(odd) .cfeat__no { color: var(--blue); }
.cfeat > li:nth-child(even) .cfeat__no { color: var(--pink); }
.cfeat__title {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.55;
	font-weight: 500;
}
.cfeat .ptext { font-size: 15.5px; }

/* -------------------------------------------------------------------------
   進行段階（CO〜C4）
   ---------------------------------------------------------------------- */
.cstage {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}
.cstage > li {
	padding: 24px 14px 22px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	text-align: center;
}
.cstage__fig { display: block; line-height: 0; margin: 0 auto 14px; }
.cstage__fig svg { width: 78px; height: 78px; }
.cstage__no {
	display: block;
	margin: 0 0 8px;
	font-family: var(--en);
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
	color: var(--pink);
}
.cstage__name {
	display: block;
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
}
.cstage__desc {
	margin: 0;
	font-family: var(--gothic);
	font-size: 13px;
	line-height: 1.75;
	color: var(--navy-2);
}

/* 図（歯の構造・脱灰と再石灰化） */
.cdiagram {
	margin: 36px 0 0;
	padding: 34px 40px 30px;
	background: var(--cream);
	border-radius: 10px;
	text-align: center;
}
.cdiagram svg { width: 100%; max-width: 640px; height: auto; }
.cdiagram figcaption {
	margin: 18px 0 0;
	font-family: var(--gothic);
	font-size: 13px;
	line-height: 1.7;
	color: var(--navy-2);
}

/* -------------------------------------------------------------------------
   お知らせ / ブログ の一覧・記事詳細
   ---------------------------------------------------------------------- */
.alist { list-style: none; margin: 0; padding: 0; }
.alist__item + .alist__item { margin-top: 28px; }
.alist__item a {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	padding: 26px 30px 26px 0;
	border-bottom: 1px solid var(--line);
}
.alist__item a:hover .alist__title { color: var(--blue); }
.alist__imgwrap { flex: none; width: 200px; height: 130px; overflow: hidden; border-radius: 8px; }
.alist__imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.alist__item a:hover .alist__imgwrap img { transform: scale(1.06); }
.alist__body { flex: 1 1 auto; min-width: 0; }
.alist__date {
	display: block;
	font-family: var(--en);
	font-size: 16px;
	letter-spacing: .04em;
	color: var(--blue);
}
.alist__title {
	display: block;
	margin-top: 6px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--navy);
	transition: color .2s;
}
.alist__text {
	display: block;
	margin-top: 10px;
	font-family: var(--gothic);
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--navy-2);
}
.alist__arrow { flex: none; align-self: center; color: var(--pink); }
.alist__arrow svg { width: 40px; height: 8px; display: block; }

/* ページ送り */
.apager { margin-top: 44px; }
.apager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.apager .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--gothic);
	font-size: 14px;
	color: var(--navy);
}
.apager .page-numbers.current,
.apager .page-numbers:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.apager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 記事詳細 */
.post__date {
	font-family: var(--en);
	font-size: 17px;
	letter-spacing: .04em;
	color: var(--blue);
}
.post__title {
	margin: 10px 0 0;
	font-size: 27px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--navy);
}
.post__thumb { margin: 30px 0 0; }
.post__thumb img { width: 100%; height: auto; border-radius: 10px; }

/* 記事本文（ブロックエディタの出力） */
.pbody { margin-top: 34px; }
.pbody p { margin: 0 0 1.55em; font-size: 16px; line-height: 1.95; }
.pbody p:last-child { margin-bottom: 0; }
.pbody h2 {
	margin: 52px 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	font-size: 22px;
	line-height: 1.5;
	font-weight: 400;
}
.pbody h3 { margin: 40px 0 14px; font-size: 18.5px; line-height: 1.6; font-weight: 500; }
.pbody ul, .pbody ol { margin: 0 0 1.55em; padding-left: 1.4em; }
.pbody li { font-size: 16px; line-height: 1.95; }
.pbody img { max-width: 100%; height: auto; border-radius: 8px; }
.pbody a { color: var(--blue); text-decoration: underline; }
.pbody blockquote {
	margin: 0 0 1.55em;
	padding: 18px 24px;
	background: var(--cream);
	border-radius: 8px;
}
.pbody blockquote p { font-size: 15px; }

/* アクセス経路図・駐車場案内図（概略図） */
.cdiagram--map svg { max-width: 100%; }

/* 脱灰と再石灰化のフロー図（SVGではなくHTML。SPで縦積みに回り込ませるため） */
.cdiagram--flow { text-align: left; }
.cflow {
	display: grid;
	grid-template-columns: 1fr 210px 1fr;
	align-items: center;
	gap: 0 18px;
}
.cflow__box {
	padding: 22px 18px;
	border-radius: 10px;
	background: #fff;
	text-align: center;
}
.cflow__box--de { border: 1.4px solid #f3b9d1; }
.cflow__box--re { border: 1.4px solid #a9dcf2; }
.cflow__name {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 500;
}
.cflow__box--de .cflow__name { color: var(--pink); }
.cflow__box--re .cflow__name { color: var(--blue); }
.cflow__desc {
	margin: 0;
	font-family: var(--gothic);
	font-size: 13px;
	line-height: 1.75;
	color: var(--navy-2);
}
.cflow__mid { display: grid; gap: 14px; }
.cflow__arrow {
	position: relative;
	margin: 0;
	padding: 0 0 8px;
	font-family: var(--gothic);
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
}
.cflow__arrow::before,
.cflow__arrow::after {
	content: "";
	position: absolute;
	bottom: 0;
}
.cflow__arrow::before { left: 0; right: 0; border-top: 1.6px solid currentColor; }
.cflow__arrow::after {
	width: 8px;
	height: 8px;
	border-top: 1.6px solid currentColor;
	bottom: -4px;
}
.cflow__arrow--re { color: var(--blue); }
.cflow__arrow--re::after { right: 0; transform: rotate(45deg); border-right: 1.6px solid currentColor; border-top-color: transparent; }
.cflow__arrow--de { color: var(--pink); }
.cflow__arrow--de::after { left: 0; transform: rotate(-135deg); border-right: 1.6px solid currentColor; border-top-color: transparent; }
.cflow__note {
	margin: 22px 0 0;
	padding: 14px 20px;
	border-radius: 8px;
	background: rgba(255, 218, 234, .55);
	font-family: var(--gothic);
	font-size: 13px;
	line-height: 1.75;
	text-align: center;
}
.cdiagram--flow figcaption { text-align: center; }

/* 段階別の治療（表） */
.ctable {
	width: 100%;
	margin: 6px 0 0;
	border-collapse: collapse;
	font-size: 15.5px;
	line-height: 1.8;
}
.ctable th,
.ctable td {
	padding: 18px 20px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.ctable thead th {
	border-bottom: 2px solid var(--pink);
	font-family: var(--gothic);
	font-size: 14px;
	font-weight: 500;
	color: var(--navy-2);
}
.ctable tbody th {
	width: 132px;
	font-family: var(--en);
	font-size: 20px;
	font-weight: 400;
	color: var(--pink);
	white-space: nowrap;
}
.ctable tbody tr:last-child th,
.ctable tbody tr:last-child td { border-bottom: none; }

/* -------------------------------------------------------------------------
   診療案内一覧（/treatment/）
   ---------------------------------------------------------------------- */
.tlist { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tlist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 26px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: var(--navy);
	transition: border-color .2s, background-color .2s;
}
.tlist a:hover { border-color: var(--pink); background: var(--cream); }
.tlist__en {
	flex: none;
	width: 128px;
	font-family: var(--en);
	font-weight: 300;
	font-size: 14px;
	color: var(--blue);
}
.tlist__ja { flex: 1 1 auto; font-size: 16px; }
.tlist svg { flex: none; width: 20px; height: 6px; color: var(--pink); }

/* -------------------------------------------------------------------------
   症状から探す（/symptom/）
   ---------------------------------------------------------------------- */
.symlist { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.symcard { padding: 28px 32px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.symcard__title { margin: 0 0 12px; font-size: 19px; line-height: 1.5; font-weight: 500; }
.symcard .ptext { font-size: 15px; margin-bottom: 16px; }
.symcard .pbtns { margin-top: 0; gap: 10px; }
.pbtn--sm { min-width: 0; padding: 10px 18px; font-size: 13.5px; gap: 10px; }
.pbtn--sm svg { width: 16px; height: 5px; }

/* 価格表（横スクロール対応の枠） */
.ptable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ctable--price { min-width: 640px; }

/* -------------------------------------------------------------------------
   よくある質問
   ---------------------------------------------------------------------- */
.pfaq { list-style: none; margin: 0; padding: 0; }
.pfaq > li + li { margin-top: 14px; }
.pfaq details {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.pfaq summary {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 60px 22px 26px;
	position: relative;
	cursor: pointer;
	font-size: 17px;
	line-height: 1.65;
	font-weight: 500;
	list-style: none;
}
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq summary::after {
	content: "";
	position: absolute;
	right: 28px;
	top: 30px;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--pink);
	border-bottom: 1.5px solid var(--pink);
	transform: rotate(45deg);
	transition: transform .2s;
}
.pfaq details[open] summary::after { transform: rotate(-135deg); top: 33px; }
.pfaq__q,
.pfaq__a {
	flex: none;
	font-family: var(--en);
	font-size: 22px;
	line-height: 1.2;
}
.pfaq__q { color: var(--pink); }
.pfaq__a { color: var(--blue); }
.pfaq__body {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 26px;
	padding: 22px 0 26px;
	border-top: 1px solid var(--line);
}
.pfaq__body .ptext { margin-bottom: 0; font-size: 15.5px; }

/* -------------------------------------------------------------------------
   ページ下部の余白（アクセス帯の前）
   ---------------------------------------------------------------------- */
.lp__foot { height: 110px; }

/* =========================================================================
   下層ページ SP（375 基準。--u は 02-sp-top.css の :root で定義済み）
   ========================================================================= */
@media (max-width: 767px) {
	.lp__inner { width: auto; margin: 0 calc(20 * var(--u)); }

	.phero { padding: calc(38 * var(--u)) 0 calc(24 * var(--u)); }
	.phero__en { font-size: calc(38 * var(--u)); }
	.phero__deco { margin: calc(9 * var(--u)) 0 0; }
	.phero__deco svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
	.phero__ja { margin: calc(9 * var(--u)) 0 0; font-size: calc(23 * var(--u)); }

	.breadcrumb { margin: calc(18 * var(--u)) 0 0; font-size: calc(12 * var(--u)); }
	.breadcrumb ol { gap: 0 calc(7 * var(--u)); padding: 0 calc(20 * var(--u)); }

	.lp__body { padding: calc(34 * var(--u)) 0 0; }
	.plead {
		width: auto;
		margin: 0;
		font-size: calc(15.5 * var(--u));
		line-height: calc(30 * var(--u));
		text-align: left;
	}

	.ptext { font-size: calc(15 * var(--u)); line-height: calc(28.5 * var(--u)); }
	.ptext--gap { margin-top: calc(22 * var(--u)); }

	.paylogos { gap: calc(18 * var(--u)); margin: calc(6 * var(--u)) 0 calc(22 * var(--u)); }
	.paylogos__item { height: calc(30 * var(--u)); }

	.alist__item + .alist__item { margin-top: calc(18 * var(--u)); }
	.alist__item a {
		gap: calc(14 * var(--u));
		padding: calc(18 * var(--u)) 0;
		align-items: center;
	}
	.alist__imgwrap { width: calc(104 * var(--u)); height: calc(70 * var(--u)); border-radius: calc(6 * var(--u)); }
	.alist__date { font-size: calc(13 * var(--u)); }
	.alist__title { margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(24 * var(--u)); }
	.alist__text { display: none; }
	.alist__arrow svg { width: calc(26 * var(--u)); height: calc(6 * var(--u)); }

	.apager { margin-top: calc(28 * var(--u)); }
	.apager .page-numbers {
		min-width: calc(34 * var(--u));
		height: calc(34 * var(--u));
		padding: 0 calc(10 * var(--u));
		font-size: calc(13 * var(--u));
	}

	.post__date { font-size: calc(14 * var(--u)); }
	.post__title { margin-top: calc(6 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(31 * var(--u)); }
	.post__thumb { margin-top: calc(20 * var(--u)); }

	.pbody { margin-top: calc(22 * var(--u)); }
	.pbody p, .pbody li { font-size: calc(15 * var(--u)); line-height: calc(28.5 * var(--u)); }
	.pbody h2 {
		margin: calc(34 * var(--u)) 0 calc(14 * var(--u));
		padding-bottom: calc(10 * var(--u));
		font-size: calc(18 * var(--u));
	}
	.pbody h3 { margin: calc(26 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(16 * var(--u)); }

	.pstd {
		grid-template-columns: 1fr;
		gap: calc(8 * var(--u));
		margin-top: calc(16 * var(--u));
	}
	.pstd li { padding-left: calc(16 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: calc(22 * var(--u)); }
	.pstd li::before { left: calc(2 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); }

	.plist li { padding-left: calc(18 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(28.5 * var(--u)); }
	.plist li::before { left: calc(3 * var(--u)); width: calc(5 * var(--u)); height: calc(5 * var(--u)); }
	.plist li + li { margin-top: calc(5 * var(--u)); }
	.pfaq__text .plist li,
	.pfaq__text .ptext { font-size: calc(14.5 * var(--u)); }

	.psec { margin-top: calc(54 * var(--u)); }
	.psec__title {
		margin-bottom: calc(24 * var(--u));
		padding-bottom: calc(14 * var(--u));
		font-size: calc(22 * var(--u));
	}
	.psec__title::after { width: calc(44 * var(--u)); margin-left: calc(-22 * var(--u)); }
	.psec__mark { margin-bottom: calc(9 * var(--u)); }
	.psec__mark svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

	.psub { margin-top: calc(30 * var(--u)); }
	.psub__title {
		margin-bottom: calc(12 * var(--u));
		padding-left: calc(13 * var(--u));
		border-left-width: calc(3 * var(--u));
		font-size: calc(18 * var(--u));
	}

	.pnote { margin-top: calc(22 * var(--u)); padding: calc(22 * var(--u)) calc(20 * var(--u)); }
	.pnote .ptext { font-size: calc(14.5 * var(--u)); }

	.pbtns { gap: calc(12 * var(--u)); margin-top: calc(22 * var(--u)); }
	.pbtn {
		min-width: 0;
		width: 100%;
		gap: calc(12 * var(--u));
		padding: calc(15 * var(--u)) calc(20 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.pbtn__note { font-size: calc(12 * var(--u)); }
	.pbtn svg { width: calc(20 * var(--u)); height: calc(6 * var(--u)); }

	.ptoc { margin-top: calc(34 * var(--u)); padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u)); }
	.ptoc__title { margin-bottom: calc(16 * var(--u)); font-size: calc(18 * var(--u)); }
	.ptoc__title span { font-size: calc(12 * var(--u)); }
	.ptoc ol { columns: 1; }
	.ptoc > ol > li { margin-bottom: calc(10 * var(--u)); }
	.ptoc a { font-size: calc(14.5 * var(--u)); gap: calc(8 * var(--u)); }
	.ptoc__no { font-size: calc(13 * var(--u)); }
	.ptoc ol ol { margin: calc(5 * var(--u)) 0 0 calc(18 * var(--u)); }
	.ptoc ol ol a { font-size: calc(13.5 * var(--u)); }

	.cfeat > li {
		grid-template-columns: 1fr;
		padding: calc(22 * var(--u)) calc(20 * var(--u));
		border-radius: calc(8 * var(--u));
	}
	.cfeat > li + li { margin-top: calc(14 * var(--u)); }
	.cfeat__no { font-size: calc(34 * var(--u)); margin-bottom: calc(6 * var(--u)); }
	.cfeat__title { margin-bottom: calc(9 * var(--u)); font-size: calc(17.5 * var(--u)); }
	.cfeat .ptext { font-size: calc(14.5 * var(--u)); }

	.cstage {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(12 * var(--u));
		margin-bottom: calc(26 * var(--u));
	}
	.cstage > li:first-child { grid-column: 1 / -1; }
	.cstage > li { padding: calc(18 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)); }
	.cstage__fig { margin-bottom: calc(10 * var(--u)); }
	.cstage__fig svg { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
	.cstage__no { font-size: calc(22 * var(--u)); margin-bottom: calc(6 * var(--u)); }
	.cstage__name { font-size: calc(14 * var(--u)); margin-bottom: calc(7 * var(--u)); }
	.cstage__desc { font-size: calc(12.5 * var(--u)); line-height: 1.7; }

	.cdiagram { margin-top: calc(24 * var(--u)); padding: calc(22 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u)); }
	/* 歯の構造図は文字が小さくなりすぎるので、横スクロールで実寸に近い大きさを保つ */
	.cdiagram--tooth { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.cdiagram--tooth svg { min-width: calc(460 * var(--u)); max-width: none; }
	.cdiagram--tooth figcaption::after { content: "（横にスクロールできます）"; display: block; opacity: .75; }
	/* 経路図・駐車場図も同様に、文字が読める幅を確保して横スクロールさせる */
	.cdiagram--map { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.cdiagram--map svg { min-width: calc(560 * var(--u)); max-width: none; }
	.cdiagram--map figcaption::after { content: "（横にスクロールできます）"; display: block; opacity: .75; }

	.cflow { grid-template-columns: 1fr; gap: calc(10 * var(--u)) 0; }
	.cflow__box { padding: calc(16 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u)); }
	.cflow__name { margin-bottom: calc(5 * var(--u)); font-size: calc(18 * var(--u)); }
	.cflow__desc { font-size: calc(13 * var(--u)); }
	.cflow__desc br { display: none; }
	.cflow__mid { gap: calc(8 * var(--u)); }
	/* SP では矢印を縦向きにする */
	.cflow__arrow { padding: 0 0 0 calc(26 * var(--u)); text-align: left; font-size: calc(12 * var(--u)); }
	.cflow__arrow::before {
		left: calc(11 * var(--u));
		right: auto;
		top: calc(-6 * var(--u));
		bottom: calc(-6 * var(--u));
		border-top: none;
		border-left: 1.6px solid currentColor;
	}
	.cflow__arrow--re::after {
		left: calc(7 * var(--u));
		right: auto;
		bottom: auto;
		top: calc(-6 * var(--u));
		transform: rotate(135deg);
	}
	.cflow__arrow--de::after {
		left: calc(7 * var(--u));
		right: auto;
		bottom: calc(-6 * var(--u));
		transform: rotate(-45deg);
	}
	.cflow__note { margin-top: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); font-size: calc(12.5 * var(--u)); text-align: left; }
	.cdiagram figcaption { margin-top: calc(12 * var(--u)); font-size: calc(12.5 * var(--u)); }

	.ctable { font-size: calc(14.5 * var(--u)); }
	.ctable thead { display: none; }
	.ctable tbody tr { display: block; padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line); }
	.ctable tbody tr:last-child { border-bottom: none; }
	.ctable tbody th,
	.ctable tbody td { display: block; width: auto; padding: 0; border: none; }
	.ctable tbody th { font-size: calc(19 * var(--u)); margin-bottom: calc(4 * var(--u)); }
	.ctable tbody td { line-height: calc(27 * var(--u)); }
	.ctable tbody td + td { margin-top: calc(6 * var(--u)); }

	.pfaq > li + li { margin-top: calc(10 * var(--u)); }
	.pfaq summary {
		gap: calc(10 * var(--u));
		padding: calc(17 * var(--u)) calc(44 * var(--u)) calc(17 * var(--u)) calc(18 * var(--u));
		font-size: calc(15.5 * var(--u));
	}
	.pfaq summary::after { right: calc(20 * var(--u)); top: calc(23 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
	.pfaq details[open] summary::after { top: calc(26 * var(--u)); }
	.pfaq__q,
	.pfaq__a { font-size: calc(19 * var(--u)); }
	.pfaq__body {
		gap: calc(10 * var(--u));
		margin: 0 calc(18 * var(--u));
		padding: calc(16 * var(--u)) 0 calc(20 * var(--u));
	}
	.pfaq__body .ptext { font-size: calc(14.5 * var(--u)); }

	.lp__foot { height: calc(56 * var(--u)); }

	.tlist { grid-template-columns: 1fr; gap: calc(10 * var(--u)); margin-top: calc(26 * var(--u)); }
	.tlist a { padding: calc(15 * var(--u)) calc(18 * var(--u)); gap: calc(10 * var(--u)); }
	.tlist__en { width: auto; font-size: calc(12 * var(--u)); }
	.tlist__ja { font-size: calc(15 * var(--u)); }
	.tlist svg { width: calc(16 * var(--u)); height: calc(5 * var(--u)); }

	.symlist { grid-template-columns: 1fr; gap: calc(14 * var(--u)); margin-top: calc(26 * var(--u)); }
	.symcard { padding: calc(20 * var(--u)) calc(18 * var(--u)); }
	.symcard__title { margin-bottom: calc(9 * var(--u)); font-size: calc(17 * var(--u)); }
	.symcard .ptext { font-size: calc(14 * var(--u)); margin-bottom: calc(12 * var(--u)); }
	.symcard .pbtns { gap: calc(8 * var(--u)); }
	.pbtn--sm { width: auto; padding: calc(9 * var(--u)) calc(15 * var(--u)); font-size: calc(12.5 * var(--u)); }
	.pbtn--sm svg { width: calc(14 * var(--u)); height: calc(4 * var(--u)); }

	.ctable--price { min-width: 0; }
	.ctable--price tbody td { position: relative; padding-left: calc(88 * var(--u)) !important; }
	.ctable--price tbody td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		top: 0;
		width: calc(76 * var(--u));
		font-family: var(--gothic);
		font-size: calc(12 * var(--u));
		color: var(--navy-2);
	}
}

/* =========================================================================
   TOP ページ アニメーション
   ・[data-reveal] / [data-reveal-group] はスクロールで視界に入ったタイミングで
     JS（assets/js/site.js）が .is-inview を付与し、フェード＋移動で表示する。
   ・prefers-reduced-motion のユーザーには最初から表示する（JS 側でも対応済みだが
     CSS 側でも二重に保証する）。
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

	[data-reveal] {
		opacity: 0;
		transform: translateY(44px);
		transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
	}
	[data-reveal].is-inview { opacity: 1; transform: none; }

	[data-reveal="left"] { transform: translate(-56px, 0); }
	[data-reveal="right"] { transform: translate(56px, 0); }
	[data-reveal="scale"] { transform: scale(0.92); }
	[data-reveal="fade"] { transform: none; }

	/* グループ内の子要素を順番にフェードインさせる */
	[data-reveal-group] > * {
		opacity: 0;
		transform: translateY(36px);
		transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
	}
	[data-reveal-group="left"] > * { transform: translateX(-52px); }
	[data-reveal-group="right"] > * { transform: translateX(52px); }
	[data-reveal-group].is-inview > * { opacity: 1; transform: none; }

	[data-reveal-group] > *:nth-child(1) { transition-delay: .02s; }
	[data-reveal-group] > *:nth-child(2) { transition-delay: .09s; }
	[data-reveal-group] > *:nth-child(3) { transition-delay: .16s; }
	[data-reveal-group] > *:nth-child(4) { transition-delay: .23s; }
	[data-reveal-group] > *:nth-child(5) { transition-delay: .30s; }
	[data-reveal-group] > *:nth-child(6) { transition-delay: .37s; }
	[data-reveal-group] > *:nth-child(7) { transition-delay: .44s; }
	[data-reveal-group] > *:nth-child(8) { transition-delay: .51s; }
	[data-reveal-group] > *:nth-child(n+9) { transition-delay: .56s; }

	/* FV: ページ表示直後に上から順にフェードインする（スクロール判定なし） */
	.fv__title,
	.fv__lead,
	.fv__badges { opacity: 0; transform: translateY(28px); animation: kohataFadeUp .9s cubic-bezier(.16,1,.3,1) forwards; }
	.fv__title { animation-delay: .15s; }
	.fv__lead { animation-delay: .38s; }
	.fv__badges { animation-delay: .58s; }
	.fv__photo { opacity: 0; transform: scale(1.06); animation: kohataPhotoIn 1.3s cubic-bezier(.16,1,.3,1) forwards; }
	.fv__photo--l { animation-delay: 0s; }
	.fv__photo--r { animation-delay: .12s; }

	@keyframes kohataFadeUp {
		to { opacity: 1; transform: none; }
	}
	@keyframes kohataPhotoIn {
		to { opacity: 1; transform: scale(1); }
	}
}

/* モーション低減設定のユーザーには常に最終状態で表示する */
@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[data-reveal-group] > *,
	.fv__title, .fv__lead, .fv__badges, .fv__photo {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}