@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Jost:wght@400;500;600&family=Roboto:wght@300;400;600;700&display=swap');

/* ==========================================================================
   SP：中身の幅の上限
   画面が広いとき（856pxなど）に中身だけが横に広がりすぎないよう、
   各セクションの中身を最大600pxで中央に置く。背景色・波の装飾はセクション側にあるため画面いっぱいのまま。
   （375px・320pxでは中身が600pxより狭いため、見た目は変わらない）
   - 左右の余白16pxをセクション側に持つもの … __inner に max-width: 600px
   - 左右の余白16pxを __inner 自身に持つもの（border-box）… 余白の分を足して 600px + 32px
   - アクセスは地図を画面の端まで広げるデザインのため、地図だけ 600px + 32px、文字は600px
   - FV（Top）の文字と丸の装飾は、まとめて包んでいる .p-fv__sp-content に 600px + 32px
     （文字の左端が、ほかのセクションの中身の左端とそろう）
   - FV（診療案内・当院について）の丸の装飾は、それぞれのセクションで right を指定
   ========================================================================== */
:root {
	--sp-content-max: 600px;
}

@media (max-width: 1023px) {
	.p-message__inner--sp,
	.p-services__inner--sp,
	.p-features__inner--sp,
	.p-voice__inner--sp,
	.p-faq__inner--sp,
	.p-cta__inner--sp,
	.p-menu-services__inner--sp,
	.p-payment__inner--sp,
	.p-flow__inner--sp {
		max-width: var(--sp-content-max);
		margin-right: auto;
		margin-left: auto;
	}

	.p-fv__sp-content,
	.p-breadcrumb__inner--sp,
	.p-staff__inner--sp,
	.p-facility__inner--sp,
	.p-access__inner--sp {
		max-width: calc(var(--sp-content-max) + 32px);
		margin-right: auto;
		margin-left: auto;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */
.l-header {
	position: relative;
	/* 下のbox-shadowをFVより手前に描画させるため */
	z-index: 1;
	background-color: #F5F5DC;
	/* ヘッダーとFVの境目にサブピクセルの隙間が出ても背景が見えないよう、
	   同色の帯をヘッダーの外側(FVの波の上)へ1pxだけはみ出させる。
	   ヘッダーの外側に描くため、ロゴ等のヘッダー内の要素には重ならない */
	box-shadow: 0 1px 0 #F5F5DC;
}

/* --- ヘッダーとFVの境目の線対策（Top・Menu・AboutのFV共通）
   波(wave-fv-*.svg)の上端が小数ピクセル位置で描画されると半透明の1行ができ、
   その下のFV写真が透けて細い線に見える。
   写真レイヤーの上端10pxを切り抜き、境目の裏側をFVの背景色(#F5F5DC)だけにして防ぐ。
   切り抜く10pxは波のベタ塗り部分（PC約36px／SP約20px）の裏に収まるため見た目は変わらず、
   写真のサイズ・トリミング位置も変わらない --- */
.p-fv__bg,
.p-fv-menu__bg,
.p-fv-about__bg {
	clip-path: inset(10px 0 0 0);
}

.l-header__inner--sp,
.l-header-nav-sp {
	display: none;
}

/* --- PC (1024px〜)
   基準値: 1024px = node 291:1395 / 1920px = node 32:18
   clamp() で両基準点のFigma数値に正確に一致するよう線形補間。
   1920pxより広い画面では、ロゴと電話ボタンが離れすぎないよう幅1920pxで止めて中央に置く
   （背景色は .l-header にあるため画面いっぱいのまま） --- */
.l-header__inner--pc {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	max-width: 1920px;
	margin: 0 auto;
	padding: 30px clamp(25px, 5.58vw - 32.14px, 75px) 0;
	background-color: #F5F5DC;
}

.l-header__logo {
	display: block;
	flex-shrink: 0;
	width: clamp(320px, 11.16vw + 205.71px, 420px);
	height: clamp(101px, 3.57vw + 64.43px, 133px);
}

.l-header__logo img {
	display: block;
	width: 100%;
	height: 100%;
}

/* ロゴの hover（ヘッダーのロゴ〈PC・SP〉・CTAのロゴ〈PC・SP〉共通）
   hover対応デバイス（PC）のみ、マウスオーバー時に上へ3px浮き上がる（0.3秒・ease でゆっくり）。
   タップのみのデバイス（SP）は :hover が押下後も残るため付けない。
   キーボード操作用に :focus-visible でも同じように浮き上がる。
   SPドロワーメニューのロゴ（.l-header-nav-sp__logo）はリンクではないため付けない */
@media (hover: hover) {
	.l-header__logo,
	.p-cta__logo {
		transition: transform .3s ease;
	}

	.l-header__logo:hover,
	.p-cta__logo:hover {
		transform: translateY(-3px);
	}
}

.l-header__logo:focus-visible,
.p-cta__logo:focus-visible {
	transform: translateY(-3px);
}

.l-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(10px, 6.7vw - 58.57px, 70px);
	height: 110px;
}

.l-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(15px, 6.7vw - 53.57px, 75px);
}

.l-header__nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border-radius: 17px;
	overflow: hidden;
	color: #4E342E;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.l-header__nav-item-ja {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 0.446vw + 15.43px, 24px);
	line-height: normal;
	letter-spacing: 0.08em;
}

.l-header__nav-item-en {
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: normal;
	letter-spacing: 1.2px;
}

.l-header__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 11px 13px;
	border-radius: 12px;
	background-color: #F16B3B;
	text-decoration: none;
}

.l-header__contact-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 40px;
}

.l-header__contact-icon {
	width: 40px;
	height: 40px;
}

.l-header__contact-number {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 0.446vw + 23.43px, 32px);
	line-height: normal;
	letter-spacing: 0.08em;
	color: #fff;
	white-space: nowrap;
}

.l-header__contact-hours {
	display: block;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}

.l-header__contact-hours-label {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0.39px;
	color: #fff;
}

.l-header__contact-hours-time {
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0.78px;
	color: #fff;
	margin-left: 4px;
}

/* PCヘッダーのhover（マウスが使える環境のみ）
   速さは sample-site-bar の hover（0.25秒・ease）に揃えている。
   - 文字リンク（Figma: node-id 412:611）: 文字色 #4E342E → #F16B3B ＋ 浮き上がり
   - 電話ボタン（Figma: node-id 281:585）: 背景色 #F16B3B → #D44A19 ＋ 浮き上がり・影
     影は sample-site-bar と同じ値 */
@media (hover: hover) {
	.l-header__nav-item {
		transition: transform .25s ease, color .25s ease;
	}

	.l-header__nav-item:hover {
		color: #F16B3B;
		transform: translateY(-4px);
	}

	.l-header__contact {
		transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
	}

	.l-header__contact:hover {
		background-color: #D44A19;
		box-shadow: 0 10px 22px rgba(78, 52, 46, .35);
		transform: translateY(-4px);
	}
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.l-header__inner--pc {
		display: none;
	}

	.l-header__inner--sp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6px 16px 0;
		background-color: #F5F5DC;
	}

	.l-header__logo--sp {
		width: 174px;
		height: 55px;
	}

	.l-header__hamburger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 48px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.l-header__hamburger img {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* --- SP ドロワーメニュー ---
	   .l-header-nav-sp       : 画面全体を覆う幕。半透明のクリーム色で、カードの下に後ろのページがうっすら見える。
	                            幕の部分を押すとメニューが閉じる（js/script.js）
	   .l-header-nav-sp__card : メニュー本体（ロゴ〜電話番号のオレンジ部分）。不透明のクリーム色で、高さは中身に合わせる
	   幕の不透明度は仮の値。調整は --nav-sp-veil-alpha（1 = 透けない）を変えるだけでよい */
	.l-header-nav-sp {
		--nav-sp-veil-alpha: 0.8;
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: rgba(245, 245, 220, var(--nav-sp-veil-alpha));
		visibility: hidden;
		opacity: 0;
		transform: translateY(-16px);
		transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
	}

	.l-header-nav-sp.is-open {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

	.l-header-nav-sp__card {
		background-color: #F5F5DC;
	}

	/* SP版で画面の幅が広いとき（1020pxなど）は、テンプレA・Cとそろえて最大480pxで中央に置く
	   （375px・320pxでは画面幅いっぱいのため、見た目は変わらない） */
	.l-header-nav-sp__inner {
		display: flex;
		flex-direction: column;
		gap: 40px;
		max-width: 480px;
		margin: 0 auto;
		padding-top: 15px;
	}

	.l-header-nav-sp__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
	}

	.l-header-nav-sp__logo {
		width: 174px;
		height: 55px;
	}

	.l-header-nav-sp__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.l-header-nav-sp__close img {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* 左右の余白16pxはリンク側に持たせ、画面の横幅いっぱいを押せるようにする */
	.l-header-nav-sp__nav {
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: 0 0 30px;
	}

	.l-header-nav-sp__item {
		display: flex;
		align-items: center;
		gap: 17px;
		box-sizing: border-box;
		width: 100%;
		padding: 12px 16px;
		color: #4E342E;
		text-decoration: none;
	}

	.l-header-nav-sp__item-ja {
		font-family: 'Zen Maru Gothic', sans-serif;
		font-weight: 700;
		font-size: 18px;
		line-height: normal;
		letter-spacing: 1.08px;
	}

	.l-header-nav-sp__item-en {
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: 11px;
		line-height: normal;
	}

	/* 線は375px時の幅(343px)の素材をそのまま使い、狭い画面では右端を切り取る
	   （伸縮させると点の形・間隔が崩れるため） */
	.l-header-nav-sp__divider {
		display: block;
		margin: 0 16px;
		height: 5px;
		overflow: hidden;
	}

	.l-header-nav-sp__divider img {
		display: block;
		width: 343px;
		max-width: none;
		height: 5px;
	}

	/* 376px以上: 線の幅が343pxより広くなる（最大448px）ため、素材画像の代わりに
	   同じ点（6×5px・19px間隔・#F16B3B）を背景でくり返し、右端まで点線を続ける。
	   repeat-x: space で、点が途中で切れないよう間隔をわずかに調整して並べる */
	@media (min-width: 376px) {
		.l-header-nav-sp__divider {
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='5'%3E%3Crect width='6' height='5' rx='2.5' fill='%23F16B3B'/%3E%3C/svg%3E") left center / 19px 5px space no-repeat;
		}

		.l-header-nav-sp__divider img {
			display: none;
		}
	}

	.l-header-nav-sp__cta {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 5px 0 30px;
		background-color: #F16B3B;
		text-decoration: none;
	}

	.l-header-nav-sp__cta-wave {
		position: absolute;
		top: -38px;
		left: 0;
		width: 100%;
		height: 39px;
		transform: rotate(180deg);
		pointer-events: none;
	}

	.l-header-nav-sp__cta-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 40px;
	}

	.l-header-nav-sp__cta-number {
		font-family: 'Roboto', sans-serif;
		font-weight: 700;
		font-size: 26px;
		line-height: normal;
		letter-spacing: 1.56px;
		color: #fff;
		white-space: nowrap;
	}

	.l-header-nav-sp__cta-hours {
		margin-top: 4px;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		font-size: 12px;
		line-height: normal;
		letter-spacing: 0.96px;
		color: #fff;
		white-space: nowrap;
	}

	.l-header-nav-sp__cta-hours-label {
		font-family: 'Zen Maru Gothic', sans-serif;
		font-weight: 400;
	}

	body.is-nav-open {
		overflow: hidden;
	}
}

/* ==========================================================================
   FV（top-page-FV）
   ========================================================================== */
.p-fv {
	position: relative;
	background-color: #F5F5DC;
}

.p-fv__inner--sp {
	display: none;
}

/* --- PC (1024px〜)
   基準値: 1024px = node 293:1485 / 1920px = node 36:75
   高さ・波の高さ・decoration-circleのleftオフセットは両基準点で共通の固定値、
   それ以外（余白・背景写真のトリミング・decoration-circleのサイズ・文字サイズ）は clamp() で線形補間 --- */
.p-fv__inner--pc {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 650px;
	padding-top: clamp(60px, -1.674vw + 92.14px, 75px);
	overflow: hidden;
}

.p-fv__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: #F5F5DC;
}

.p-fv__bg-image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 68% 25%;
}

.p-fv__wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 81.25px;
	background-image: url(../images/wave-fv-pc.svg);
	background-repeat: repeat-x;
	background-position: left top;
	background-size: auto;
	pointer-events: none;
}

.p-fv__content {
	position: relative;
	width: 100%;
	max-width: 1400px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.p-fv__message {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(500px, 3.348vw + 465.71px, 530px);
	height: 306.5px;
}

.p-fv__circle {
	position: absolute;
	left: -19px;
	top: clamp(-118.25px, -2.455vw + -71.11px, -96.25px);
	width: clamp(625px, 3.906vw + 585px, 660px);
	height: clamp(501px, 4.688vw + 453px, 543px);
	background-image: url(../images/decoration-fv-circle-pc.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

.p-fv__text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 31px;
	align-items: center;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 5.3px rgba(0, 0, 0, .25);
}

.p-fv__catch {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: clamp(36px, 0.446vw + 31.43px, 40px);
	line-height: normal;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.p-fv__lead {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: clamp(20px, 0.446vw + 15.43px, 24px);
	line-height: normal;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-fv__inner--pc {
		display: none;
	}

	.p-fv__inner--sp {
		position: relative;
		display: block;
		height: 470px;
		overflow: hidden;
	}

	.p-fv__wave--sp {
		height: 45px;
		background-image: url(../images/wave-fv-sp.svg);
	}

	.p-fv__sp-content {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.p-fv__circle-sp {
		position: absolute;
		display: block;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		pointer-events: none;
	}

	.p-fv__circle-sp--main {
		left: -19px;
		top: 152px;
		width: 265px;
		height: 265px;
		background-image: url(../images/decoration-fv-circle-sp-main.svg);
	}

	.p-fv__circle-sp--sub {
		left: 7px;
		top: 376px;
		width: 93px;
		height: 93px;
		background-image: url(../images/decoration-fv-circle-sp-sub.svg);
	}

	.p-fv__text--sp {
		position: absolute;
		left: 16px;
		top: 210px;
		gap: 16px;
	}

	.p-fv__catch--sp {
		font-size: 18px;
		letter-spacing: 0.18px;
	}

	.p-fv__lead--sp {
		font-size: 14px;
		letter-spacing: normal;
	}
}

/* ==========================================================================
   FV（menu-page-FV／診療案内ページ）
   基準値: 1024px = node 327:873 / 1920px = node 100:197 / SP = node 172:1427
   高さ・背景写真のクロップ比率(top/height%)・文字サイズ等は両基準点で共通の固定値、
   decoration-circlesのサイズ・位置と波の高さのみ両基準点でFigma数値が異なるため clamp() で線形補間 --- */
.p-fv-menu {
	position: relative;
	background-color: #F5F5DC;
}

.p-fv-menu__inner--sp {
	display: none;
}

/* --- PC (1024px〜) --- */
.p-fv-menu__inner--pc {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 360px;
	padding-top: 93px;
	overflow: hidden;
}

.p-fv-menu__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: #F5F5DC;
}

.p-fv-menu__bg-image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 83.6%;
}

.p-fv-menu__wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 81.25px;
	background-image: url(../images/wave-fv-pc.svg);
	background-repeat: repeat-x;
	background-position: left top;
	background-size: auto;
	pointer-events: none;
}

.p-fv-menu__content {
	position: relative;
	width: 100%;
	max-width: 1400px;
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}

.p-fv-menu__message {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 308px;
	height: 307px;
}

.p-fv-menu__circle {
	position: absolute;
	left: clamp(-91px, -4.6875vw - 1px, -49px);
	top: clamp(-23.25px, -5.608vw + 84.429px, 27px);
	width: clamp(327px, 8.002vw + 245.057px, 398.7px);
	height: clamp(246.87px, 6.041vw + 185.007px, 301px);
	background-image: url(../images/decoration-menu-fv-circle-pc.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

.p-fv-menu__text-group {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(232px, 8.482vw + 145.146px, 308px);
	padding-bottom: clamp(7px, 5.246vw - 46.714px, 54px);
}

.p-fv-menu__title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 5.3px rgba(0, 0, 0, .25);
	white-space: nowrap;
}

/* --- SP(〜1023px) --- */
@media (max-width: 1023px) {

	.p-fv-menu__inner--pc {
		display: none;
	}

	.p-fv-menu__inner--sp {
		position: relative;
		display: block;
		height: 200px;
		overflow: hidden;
	}

	.p-fv-menu__bg-image--sp {
		object-position: 0% 99%;
	}

	.p-fv-menu__circle-sp {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		pointer-events: none;
	}

	/* right: 画面が広いときは、ほかのセクションの中身（最大600px）の右端にそろえる。
	   375px・320pxでは max() が16pxになるため、元の値（52px・16px）と同じ */
	.p-fv-menu__circle-sp--01 {
		right: calc(max(16px, (100% - var(--sp-content-max)) / 2) + 36px);
		top: 46px;
		width: 135px;
		height: 135px;
		background-image: url(../images/decoration-menu-fv-circle-sp-01.svg);
	}

	.p-fv-menu__circle-sp--02 {
		right: max(16px, (100% - var(--sp-content-max)) / 2);
		top: 119px;
		width: 61px;
		height: 61px;
		background-image: url(../images/decoration-menu-fv-circle-sp-02.svg);
	}

	.p-fv-menu__text-group--sp {
		width: auto;
		padding-bottom: 0;
	}

	.p-fv-menu__title--sp {
		font-size: 18px;
		letter-spacing: 0.18px;
	}

	.p-fv-menu__wave--sp {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 45px;
		background-image: url(../images/wave-fv-sp.svg);
		background-repeat: repeat-x;
		background-position: left top;
		background-size: auto;
		pointer-events: none;
	}
}

/* ==========================================================================
   Section-Header（各セクション共通の見出し）
   ========================================================================== */
.p-section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 13px;
	color: #F16B3B;
	text-align: center;
}

.p-section-header__title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: normal;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.p-section-header__en {
	margin: 0;
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: normal;
	letter-spacing: 0.06em;
}

.p-section-header--left {
	align-items: flex-start;
	text-align: left;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-section-header--sp {
		gap: 6px;
	}

	.p-section-header__title--sp {
		font-size: 24px;
		white-space: normal;
	}

	.p-section-header__en--sp {
		font-size: 12px;
	}
}

/* ==========================================================================
   Message-section（院長からのご挨拶）
   基準値: 1024px = node 296:503 / 1920px = node 47:504
   両基準点で文字サイズ・余白が一致するため、clamp()は使用せず固定値で実装 --- */
.p-message {
	position: relative;
	padding: 150px 0 150px;
	text-align: center;
}

.p-message__inner--sp {
	display: none;
}

.p-message__inner--pc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 45px;
	max-width: 1400px;
	margin: 0 auto;
	text-align: center;
}

.p-message__text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-message__signature {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-message {
		padding: 100px 16px 50px;
	}

	.p-message__inner--pc {
		display: none;
	}

	.p-message__inner--sp {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}

	.p-message__body--sp {
		display: flex;
		flex-direction: column;
		gap: 50px;
	}

	.p-message__text--sp p {
		margin: 0 0 1.5em;
		font-size: 14px;
		letter-spacing: 0.03em;
	}

	.p-message__text--sp p:last-child {
		margin-bottom: 0;
	}

	.p-message__signature--sp {
		font-size: 14px;
		white-space: normal;
	}
}

/* ==========================================================================
   Services-section（診療案内・対応メニュー）
   基準値: 1024px = node 296:510 / 1920px = node 51:556
   横パディング・カード間ギャップのみ両基準点でFigma数値が異なるため clamp() で線形補間、
   それ以外（文字サイズ・カード内余白・アイコンサイズ等）は両基準点で共通の固定値 --- */
.p-services {
	position: relative;
	padding: 140px clamp(40px, 24.554vw - 211.47px, 260px);
	background-color: #F5F5DC;
}

.p-services__inner--sp {
	display: none;
}

.p-services__inner--pc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	max-width: 1400px;
	margin: 0 auto;
}

.p-services__lead {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-align: center;
}

.p-services__list {
	display: flex;
	align-items: center;
	gap: clamp(20px, 5.357vw - 34.86px, 68px);
	width: 100%;
}

.p-services__card {
	box-sizing: border-box;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	min-width: 0;
	padding: 34px 0;
	border-radius: 48px;
	background-color: #fff;
}

.p-services__icon {
	display: block;
	width: 105px;
	height: 105px;
}

.p-services__card-title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #F16B3B;
	text-align: center;
}

.p-services__card-text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-align: center;
}

.p-services__link-wrap {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.p-services__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 32px;
	border: 2px solid #D6D69B;
	border-radius: 22px;
	text-decoration: none;
}

.p-services__link-text {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.08em;
	color: #4E342E;
	white-space: nowrap;
}

.p-services__link-icon {
	display: block;
	width: 41px;
	height: 41px;
}

/* hover: 外枠・文字色 → #F16B3B ＋ 浮き上がり（影なし）。丸は元から #F16B3B のため変更なし。
   速さはヘッダー・sample-site-bar の hover（0.25秒・ease）に揃えている。
   タップのみのデバイス（SP）は :hover が押下後も残るため使わず、タップ中(:active)の色変化のみ */
@media (hover: hover) {
	.p-services__link {
		transition: transform .25s ease, border-color .25s ease;
	}

	.p-services__link-text {
		transition: color .25s ease;
	}

	.p-services__link:hover {
		border-color: #F16B3B;
		transform: translateY(-4px);
	}

	.p-services__link:hover .p-services__link-text {
		color: #F16B3B;
	}
}

@media (hover: none) {
	.p-services__link:active {
		border-color: #F16B3B;
	}

	.p-services__link:active .p-services__link-text {
		color: #F16B3B;
	}
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-services {
		padding: 80px 16px;
	}

	.p-services__inner--pc {
		display: none;
	}

	.p-services__inner--sp {
		display: flex;
		flex-direction: column;
		gap: 37px;
	}

	.p-services__lead--sp {
		font-size: 14px;
	}

	.p-services__list--sp {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 20px 15px;
		width: 100%;
	}

	.p-services__card--sp {
		height: 100%;
		gap: 5px;
		padding: 18px 0;
		border-radius: 26px;
	}

	.p-services__icon--sp {
		width: 55px;
		height: 55px;
	}

	.p-services__card-title--sp {
		font-size: 18px;
	}

	.p-services__card-text--sp {
		font-size: 14px;
	}

	.p-services__link-wrap--sp {
		justify-content: center;
	}

	.p-services__link--sp {
		height: 44px;
		padding: 3px 25px;
		border-width: 1px;
	}

	.p-services__link-text--sp {
		font-size: 14px;
	}

	.p-services__link-icon--sp {
		width: 22px;
		height: 22px;
	}
}

/* ==========================================================================
   Features-section（さくら動物病院だから出来る事）
   基準値: 1024px = node 301:676 / 1920px = node 63:115 / SP = node 301:732
   写真・decoration-circleのサイズと位置のみ両基準点でFigma数値が異なるため clamp() で線形補間、
   それ以外（文字サイズ・余白・ギャップ等）は両基準点で共通の固定値 --- */
.p-features {
	position: relative;
	padding: 150px 0 150px;
}

.p-features__inner--sp {
	display: none;
}

.p-features__inner--pc {
	display: flex;
	align-items: center;
	gap: 30px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(40px, 24.554vw - 211.47px, 260px);
}

.p-features__left {
	box-sizing: border-box;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 60px;
	min-width: 0;
}

.p-features__list {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}

.p-features__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.p-features__heading {
	display: flex;
	align-items: center;
	gap: 19px;
	color: #4E342E;
}

.p-features__number {
	margin: 0;
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	font-size: 36px;
	line-height: normal;
	letter-spacing: 0.06em;
}

.p-features__item-title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: normal;
	letter-spacing: 0.03em;
}

.p-features__text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #000;
}

.p-features__note {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #000;
	white-space: nowrap;
}

.p-features__photo-wrap {
	position: relative;
	flex-shrink: 0;
	width: clamp(380px, 16.741vw + 208.571px, 530px);
	height: calc(clamp(88.06px, 3.89vw + 48.232px, 122.91px) + clamp(380px, 16.741vw + 208.571px, 530px));
}

.p-features__circle-large {
	position: absolute;
	top: clamp(88.06px, 3.89vw + 48.232px, 122.91px);
	left: 0;
	width: clamp(380px, 16.741vw + 208.571px, 530px);
	height: clamp(380px, 16.741vw + 208.571px, 530px);
	border-radius: 50%;
	background-color: #F5F5DC;
	opacity: .24;
}

.p-features__circle-small {
	position: absolute;
	top: 0;
	left: clamp(17.36px, 0.766vw + 9.52px, 24.22px);
	width: clamp(187.691px, 8.289vw + 102.813px, 261.959px);
	height: clamp(187.691px, 8.289vw + 102.813px, 261.959px);
	border-radius: 50%;
	background-color: #F16B3B;
	opacity: .43;
}

.p-features__photo {
	position: absolute;
	top: clamp(88.06px, 3.89vw + 48.232px, 122.91px);
	left: 0;
	width: clamp(380px, 16.741vw + 208.571px, 530px);
	height: clamp(380px, 16.741vw + 208.571px, 530px);
	border-radius: 50%;
	object-fit: cover;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-features {
		padding: 50px 16px 100px;
	}

	.p-features__inner--pc {
		display: none;
	}

	.p-features__inner--sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 70px;
	}

	.p-features__left--sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		width: 100%;
	}

	.p-features__list--sp {
		display: flex;
		flex-direction: column;
		gap: 18px;
		width: 100%;
	}

	.p-features__item--sp {
		display: flex;
		flex-direction: column;
		gap: 6px;
		width: 100%;
		color: #4E342E;
	}

	.p-features__heading--sp {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.p-features__number--sp {
		margin: 0;
		font-family: 'Jost', sans-serif;
		font-weight: 400;
		font-size: 32px;
		line-height: normal;
		letter-spacing: 0.06em;
	}

	.p-features__item-title--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 16px;
		line-height: normal;
		letter-spacing: 0.03em;
	}

	.p-features__text--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #000;
	}

	.p-features__text--sp.p-features__text--sm {
		font-size: 14px;
	}

	.p-features__note--sp {
		width: 100%;
		margin-top: 42px;
		white-space: normal;
		text-align: left;
	}

	.p-features__photo-wrap--sp {
		position: relative;
		width: 198px;
		height: 244px;
	}

	.p-features__circle-large--sp {
		position: absolute;
		top: 45.88px;
		left: 0;
		width: 198px;
		height: 198px;
		border-radius: 50%;
		background-color: #F5F5DC;
		opacity: .24;
	}

	.p-features__circle-small--sp {
		position: absolute;
		top: 0;
		left: 9.04px;
		width: 97.8px;
		height: 97.8px;
		border-radius: 50%;
		background-color: #F16B3B;
		opacity: .43;
	}

	.p-features__photo--sp {
		position: absolute;
		top: 45.88px;
		left: 0;
		width: 198px;
		height: 198px;
		border-radius: 50%;
		object-fit: cover;
	}
}

/* ==========================================================================
   Reception-photo-section（受付フォト、フルブリード帯）
   基準値: 1920px = node 67:122 / SP = node 165:671
   前後のセクションの余白(PC:150px / SP:100px)で間隔を作るため、本セクション自体には余白を持たせない --- */
.p-reception-photo {
	position: relative;
}

.p-reception-photo__inner--sp {
	display: none;
}

.p-reception-photo__inner--pc {
	width: 100%;
	height: 600px;
	overflow: hidden;
}

.p-reception-photo__image--pc {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-reception-photo__inner--pc {
		display: none;
	}

	.p-reception-photo__inner--sp {
		display: block;
		width: 100%;
		height: 400px;
		overflow: hidden;
	}

	.p-reception-photo__image--sp {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 55% 50%;
	}
}

/* ==========================================================================
   Voice-section（飼い主様からの声）
   基準値: 1024px = node 306:689 / 1920px = node 72:161 / SP = node 165:846
   PC（1024px〜1920px）は両基準点でFigma数値がほぼ共通のため clamp() は使用せず固定値で実装 --- */
.p-voice {
	position: relative;
	padding: 150px 0 150px;
}

.p-voice__inner--sp {
	display: none;
}

.p-voice__inner--pc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 45px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(40px, 24.554vw - 211.47px, 260px);
}

.p-voice__lead {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-align: center;
}

.p-voice__lead p {
	margin: 0;
}

.p-voice__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 45px;
	max-width: 1262px;
	width: 100%;
	padding-top: 65px;
}

.p-voice__item {
	display: flex;
	align-items: center;
	gap: 99px;
	max-width: 1200px;
	width: 100%;
}

.p-voice__photo {
	flex-shrink: 0;
	width: 278px;
	height: 278px;
	border-radius: 50%;
	overflow: hidden;
}

.p-voice__photo-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-voice__bubble {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 38px;
	min-width: 0;
	padding: 35px 50px;
	border-radius: 39px;
	background-color: #F5F5DC;
}

.p-voice__bubble-heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.p-voice__bubble-title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-voice__bubble-sub {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-voice__bubble-text {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-voice__bubble-text p {
	margin: 0 0 1.2em;
}

.p-voice__bubble-text p:last-child {
	margin-bottom: 0;
}

.p-voice__tail-box {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 138px;
	height: 109px;
	pointer-events: none;
}

.p-voice__tail-box--left {
	left: -79px;
	top: 35px;
}

.p-voice__tail-box--right {
	right: -88px;
	bottom: 123px;
}

.p-voice__tail {
	display: block;
	width: 60px;
	height: 90.7px;
	background-color: #F5F5DC;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
	transform: rotate(-111.65deg);
}

.p-voice__tail--flip {
	transform: rotate(-68.35deg) scaleY(-1);
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-voice {
		padding: 100px 16px 50px;
	}

	.p-voice__inner--pc {
		display: none;
	}

	.p-voice__inner--sp {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}

	.p-voice__lead--sp {
		width: 100%;
		font-size: 14px;
	}

	.p-voice__item--sp {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 21px;
		width: 100%;
	}

	.p-voice__bubble--sp {
		width: 100%;
		gap: 38px;
		padding: 35px 25px;
	}

	.p-voice__bubble-heading--sp {
		gap: 12px;
	}

	.p-voice__bubble-title--sp {
		font-size: 18px;
	}

	.p-voice__bubble-sub--sp {
		font-size: 14px;
	}

	.p-voice__bubble-text--sp {
		font-size: 14px;
	}

	.p-voice__photo--sp {
		width: 168px;
		height: 168px;
	}

	.p-voice__photo--sp-right {
		align-self: flex-end;
	}

	.p-voice__tail-box--sp {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	/* 基準値: SP = node 165:841（speech-bubble内の相対座標）。
	   バブルの高さは折り返しで可変のため、top はバブル下端からの距離(100% - 68px)で
	   指定し、テキスト量やビューポート幅が変わってもバブル下端との位置関係を維持する */
	.p-voice__tail-box--sp-01 {
		left: 172px;
		top: calc(100% - 68px);
		width: 120.451px;
		height: 139.384px;
	}

	/* 基準値: SP = node 165:843（speech-bubble内の相対座標）
	   写真が右寄せのため、中身が375px時（343px）より広いときは、広がった分だけ右へずらして写真に向ける
	   （375px・320pxでは max() が0になるため、元の値と同じ） */
	.p-voice__tail-box--sp-02 {
		left: calc(35px + max(0px, 100% - 343px));
		top: calc(100% - 69.92px);
		width: 120.489px;
		height: 139.383px;
	}

	.p-voice__tail--sp-down {
		display: block;
		width: 69.31px;
		height: 120.93px;
		background-color: #F5F5DC;
		clip-path: polygon(50% 0%, 93.3% 75%, 6.7% 75%);
	}

	.p-voice__tail-box--sp-01 .p-voice__tail--sp-down {
		transform: rotate(-150.03deg);
	}

	.p-voice__tail-box--sp-02 .p-voice__tail--sp-down {
		transform: rotate(150deg);
	}
}

/* ==========================================================================
   FAQ-section（よくあるご質問）
   基準値: 1024px = node 310:738 / 1920px = node 84:108 / SP = node 167:1163
   PC（1024px〜1920px）は両基準点でFigma数値がほぼ共通のため clamp() は使用せず固定値で実装 --- */
.p-faq {
	position: relative;
	padding: 140px 0 255px;
	background-color: #D9D9D9;
}

.p-faq__inner--sp {
	display: none;
}

.p-faq__inner--pc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(40px, 24.554vw - 211.47px, 260px);
}

.p-faq__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	width: 100%;
}

.p-faq__item {
	width: 100%;
	border-radius: 20px;
	background-color: #fff;
	overflow: hidden;
}

.p-faq__question {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 15px 30px;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
}

.p-faq__question-text {
	display: flex;
	align-items: center;
	gap: 47px;
}

.p-faq__q {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 32px;
	line-height: normal;
	letter-spacing: 0.06em;
	color: #F16B3B;
}

.p-faq__q-text {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-faq__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.p-faq__toggle-icon {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform .3s ease;
}

.p-faq__item.is-open .p-faq__toggle-icon {
	transform: rotate(180deg);
}

.p-faq__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}

.p-faq__item.is-open .p-faq__answer-wrap {
	grid-template-rows: 1fr;
}

.p-faq__answer-inner {
	display: flex;
	flex-direction: column;
	gap: 30px;
	min-height: 0;
	padding: 30px 30px 15px;
	overflow: hidden;
}

.p-faq__divider {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #F9B39A;
}

.p-faq__answer-text {
	display: flex;
	align-items: center;
	gap: 47px;
	margin: 0;
}

.p-faq__a {
	flex-shrink: 0;
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 32px;
	line-height: normal;
	letter-spacing: 0.06em;
	color: #F9B39A;
}

.p-faq__a-text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	color: #4E342E;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-faq {
		padding: 80px 16px 132px;
	}

	.p-faq__inner--pc {
		display: none;
	}

	.p-faq__inner--sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 43px;
		width: 100%;
	}

	.p-faq__list--sp {
		gap: 22px;
	}

	.p-faq__item--sp {
		border-radius: 10px;
	}

	.p-faq__question--sp {
		padding: 15px 5px;
	}

	.p-faq__question-text--sp {
		gap: 10px;
	}

	.p-faq__q--sp {
		font-size: 24px;
		letter-spacing: 0.06em;
	}

	.p-faq__q-text--sp {
		font-size: 16px;
	}

	.p-faq__toggle--sp {
		width: 20px;
		height: 20px;
	}

	.p-faq__answer-inner--sp {
		padding: 30px 5px 15px;
	}

	.p-faq__answer-text--sp {
		gap: 10px;
	}

	.p-faq__a--sp {
		font-size: 24px;
	}

	.p-faq__a-text--sp {
		font-size: 14px;
	}
}

/* ==========================================================================
   CTA-section（お問い合わせ）
   基準値: 1024px = node 312:788 / 1920px = node 96:118 / SP = node 168:1413
   波の装飾は p-fv__wave と同じ手法（background-repeat: repeat-x の帯を180度回転）で実装。
   PC/SP切り替えのブレークポイントは、他セクションと同じ1023px/1024px。
   SP版（〜1023px）は、他セクションと同じく中身を最大600pxで中央に置く
   （.p-cta__inner--sp の max-width はファイル冒頭の「SP：中身の幅の上限」で指定）。
   波の装飾はセクション直下に置いているため、画面いっぱいのまま --- */
.p-cta {
	position: relative;
	background-color: #F5F5DC;
}

/* Menu-page限定: Flowセクションとの間隔確保のためCTAセクション自体を下にずらす（背景色ごと余白を作るためmarginを使用） */
.p-cta--after-flow {
	margin-top: 145px;
}

@media (max-width: 1023px) {
	.p-cta--after-flow {
		margin-top: 0;
	}
}

.p-cta__wave {
	position: absolute;
	top: -84px;
	left: 0;
	width: 100%;
	height: 100px;
	background-image: url(../images/wave-pc-figma.svg);
	background-repeat: repeat-x;
	background-position: left top;
	background-size: auto;
	transform: rotate(180deg);
	pointer-events: none;
}

.p-cta__wave--sp {
	display: none;
}

.p-cta__inner--sp {
	display: none;
}

/* --- PC (1024px〜)
   基準値: 1024px = node 312:788 / 1920px = node 96:118
   余白・カラム幅は clamp() で両基準点のFigma数値に正確に一致するよう線形補間 --- */
.p-cta__inner--pc {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(58.6px, 3.269vw + 25.13px, 87.9px) clamp(34px, 25.223vw - 224.29px, 260px) 122px;
}

.p-cta__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 66px;
	width: 100%;
}

.p-cta__logo-wrap {
	width: 100%;
	padding: 21px 0;
	border-radius: 29px;
	overflow: hidden;
}

.p-cta__logo {
	display: block;
	width: 478px;
	height: 151.208px;
}

.p-cta__logo img {
	display: block;
	width: 100%;
	height: 100%;
}

.p-cta__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
}

.p-cta__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	width: clamp(342px, 24.777vw + 88.29px, 564px);
}

.p-cta__heading {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 0.446vw + 15.43px, 24px);
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-cta__phone {
	display: flex;
	align-items: center;
	gap: 9px;
	border-radius: 30px;
	text-decoration: none;
}

.p-cta__phone-icon {
	display: block;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
}

.p-cta__phone-number {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: normal;
	letter-spacing: 0.06em;
	color: #4E342E;
	white-space: nowrap;
}

.p-cta__address {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 73px;
	width: 100%;
}

.p-cta__address-text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

.p-cta__access-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 11px 17px;
	border: 1px solid #4E342E;
	border-radius: 22px;
	text-decoration: none;
}

.p-cta__access-text {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

/* インラインSVGの丸は currentColor で塗るため、ここの color が丸の色になる */
.p-cta__access-icon {
	display: block;
	flex-shrink: 0;
	width: 24.585px;
	height: 24.585px;
	color: #4E342E;
}

.p-cta__timetable {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: clamp(499px, 17.969vw + 315px, 660px);
	text-align: center;
}

.p-cta__timetable-row {
	display: flex;
	align-items: center;
	gap: clamp(5px, 2.009vw - 15.57px, 23px);
	padding: 0 clamp(10px, 1.674vw - 7.14px, 25px);
}

.p-cta__timetable-row--header {
	padding-top: 15px;
	padding-bottom: 15px;
	border-radius: 16px;
	background-color: #4E342E;
	color: #fff;
}

.p-cta__timetable-row--divider {
	padding-bottom: 11px;
	border-bottom: 1px solid #4E342E;
}

.p-cta__timetable-label {
	flex-shrink: 0;
	width: clamp(151px, 2.121vw + 129.29px, 170px);
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 0.446vw + 15.43px, 24px);
	line-height: normal;
	letter-spacing: 0.03em;
}

.p-cta__timetable-time {
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.p-cta__timetable-cell {
	flex: 1 0 0;
	min-width: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 0.446vw + 15.43px, 24px);
	line-height: normal;
	letter-spacing: 0.03em;
}

.p-cta__timetable-mark {
	height: 56px;
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: clamp(40px, 0.893vw + 30.86px, 48px);
	line-height: 56px;
	letter-spacing: 0.06em;
	color: #4E342E;
}

.p-cta__timetable-mark--x {
	font-size: clamp(30px, 0.446vw + 25.43px, 34px);
}

.p-cta__page-top-wrap {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding: 30px 10px 10px;
}

.p-cta__page-top {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 0;
	background: none;
	cursor: pointer;
}

/* インラインSVGの▲は currentColor で塗るため、ここの color が▲の色になる */
.p-cta__page-top-icon {
	display: block;
	width: 24.75px;
	height: 24.75px;
	color: #4E342E;
}

.p-cta__page-top-text {
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0.06em;
	color: #4E342E;
}

/* hover: link-button（アクセス）は外枠・文字・丸、Page Top は▲・文字を #F16B3B に変え、浮き上がり（影なし）。
   速さはヘッダー・sample-site-bar の hover（0.25秒・ease）に揃えている。
   タップのみのデバイス（SP）は :hover が押下後も残るため使わず、タップ中(:active)の色変化のみ */
@media (hover: hover) {
	.p-cta__access-link,
	.p-cta__page-top {
		transition: transform .25s ease, border-color .25s ease;
	}

	.p-cta__access-text,
	.p-cta__access-icon,
	.p-cta__page-top-icon,
	.p-cta__page-top-text {
		transition: color .25s ease;
	}

	.p-cta__access-link:hover {
		border-color: #F16B3B;
		transform: translateY(-4px);
	}

	.p-cta__page-top:hover {
		transform: translateY(-4px);
	}

	.p-cta__access-link:hover .p-cta__access-text,
	.p-cta__access-link:hover .p-cta__access-icon,
	.p-cta__page-top:hover .p-cta__page-top-icon,
	.p-cta__page-top:hover .p-cta__page-top-text {
		color: #F16B3B;
	}
}

@media (hover: none) {
	.p-cta__access-link:active {
		border-color: #F16B3B;
	}

	.p-cta__access-link:active .p-cta__access-text,
	.p-cta__access-link:active .p-cta__access-icon,
	.p-cta__page-top:active .p-cta__page-top-icon,
	.p-cta__page-top:active .p-cta__page-top-text {
		color: #F16B3B;
	}
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-cta__inner--pc {
		display: none;
	}

	.p-cta__wave {
		display: none;
	}

	.p-cta__wave--sp {
		display: block;
		top: -45px;
		height: 45px;
		background-image: url(../images/wave-sp-figma.svg);
	}

	.p-cta__inner--sp {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
		padding: 59px 16px 122px;
	}

	.p-cta__logo-wrap--sp {
		display: flex;
		justify-content: center;
	}

	.p-cta__logo--sp {
		display: block;
		width: 174px;
		height: 55.042px;
	}

	.p-cta__logo--sp img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.p-cta__left--sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
	}

	.p-cta__heading--sp {
		font-size: 18px;
		letter-spacing: 0.03em;
		text-align: center;
	}

	.p-cta__phone--sp {
		gap: 9px;
	}

	.p-cta__phone-icon--sp {
		width: 35px;
		height: 35px;
	}

	.p-cta__phone-number--sp {
		font-size: 24px;
		letter-spacing: 0.06em;
	}

	.p-cta__address-text--sp {
		font-size: 14px;
		letter-spacing: 0.03em;
		text-align: center;
		white-space: normal;
	}

	.p-cta__access-link--sp {
		width: 153px;
		height: 45px;
		box-sizing: border-box;
	}

	.p-cta__access-text--sp {
		font-size: 14px;
		letter-spacing: 0.03em;
	}

	.p-cta__timetable--sp {
		gap: 5px;
		width: 100%;
	}

	.p-cta__timetable-row--sp {
		gap: 0;
		padding: 0;
	}

	.p-cta__timetable-row--header.p-cta__timetable-row--sp {
		padding: 16px 0;
		border-radius: 10px;
	}

	.p-cta__timetable-row--divider.p-cta__timetable-row--sp {
		padding-bottom: 5px;
	}

	.p-cta__timetable-label--sp {
		width: 92px;
		font-size: 14px;
		letter-spacing: 0.03em;
	}

	.p-cta__timetable-time--sp {
		font-size: 13px;
		letter-spacing: 0.06em;
	}

	.p-cta__timetable-cell--sp {
		font-size: 14px;
	}

	.p-cta__timetable-mark--sp {
		height: 56px;
		font-size: 24px;
		letter-spacing: 0.06em;
	}

	.p-cta__timetable-mark--sp.p-cta__timetable-mark--x {
		font-size: 24px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.l-footer {
	background-color: #fff;
}

.l-footer__inner--sp {
	display: none;
}

/* --- PC (1024px〜) --- */
.l-footer__inner--pc {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.l-footer__copyright {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0.39px;
	color: #4E342E;
	white-space: nowrap;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.l-footer__inner--pc {
		display: none;
	}

	.l-footer__inner--sp {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10px 10px;
	}

	.l-footer__copyright--sp {
		font-size: 10px;
		letter-spacing: 0.3px;
	}

}

/* ==========================================================================
   Breadcrumb（パンくずリスト／診療案内ページ）
   基準値: 1920px = node 254:483 / SP = node 173:1502
   1024px用の専用フレームがFigma上に存在しないため、横位置は隣接する
   p-menu-services 等の他コンテンツセクションと同じ max-width:1400px +
   標準の横パディングclamp()を踏襲し、1024〜1920pxの間も違和感なく揃うようにしている。
   FVとの間隔は0（このnav自体に上下の余白を持たせず、FVの直後に隙間なく続ける） --- */
.p-breadcrumb {
	position: relative;
	background-color: #fff;
}

.p-breadcrumb__inner--sp {
	display: none;
}

/* --- PC (1024px〜) --- */
.p-breadcrumb__inner--pc {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	max-width: 1400px;
	height: 51px;
	margin: 0 auto;
	padding: 18px clamp(40px, 24.554vw - 211.47px, 260px) 0;
}

.p-breadcrumb__home {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 78px;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-decoration: none;
	white-space: nowrap;
}

.p-breadcrumb__current {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-breadcrumb__inner--pc {
		display: none;
	}

	.p-breadcrumb__inner--sp {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		height: 45px;
		padding: 0 16px;
	}

	.p-breadcrumb__home--sp {
		width: 58px;
		justify-content: flex-start;
		font-family: 'Jost', sans-serif;
		font-size: 14px;
		letter-spacing: 0.06em;
	}

	.p-breadcrumb__current--sp {
		font-size: 14px;
	}
}

/* ==========================================================================
   Services-detail-section（診療メニュー詳細／診療案内ページ）
   基準値: 1024px = node 329:1002 / 1920px = node 115:350 / SP = node 175:553
   グリッドの列・行間隔、カードの左右余白、アイコンサイズとヘッダー内のギャップのみ
   両基準点でFigma数値が異なるため clamp() で線形補間、
   それ以外（フォントサイズ・カード内の縦方向ギャップ・ヘッダーの高さ等）は
   両基準点で共通の固定値で実装。
   セクション自体の余白は p-services（トップページ）と同じ値を踏襲している。
   点線の区切り線は、既存の menu-nav-divider.svg と同じ手法（stroke-dasharrayの
   ドットパターン）を、幅に依存せず綺麗に反復できる radial-gradient で再現している --- */
.p-menu-services {
	position: relative;
	padding: 150px clamp(40px, 24.554vw - 211.47px, 260px);
}

.p-menu-services__inner--sp {
	display: none;
}

.p-menu-services__inner--pc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	max-width: 1400px;
	margin: 0 auto;
}

.p-menu-services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(20px, 5.022vw - 31.429px, 65px);
	row-gap: clamp(30px, 2.232vw + 7.143px, 50px);
	width: 100%;
}

.p-menu-services__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 27px;
	width: 100%;
	padding: 0 clamp(13px, 3.013vw - 17.857px, 40px);
	border-radius: 41px;
}

.p-menu-services__card-header {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.674vw - 7.143px, 25px);
	width: 100%;
	height: 180px;
	padding: 0 30px;
	border-radius: 30px;
	background-color: #F5F5DC;
}

.p-menu-services__icon {
	display: block;
	flex-shrink: 0;
	width: clamp(66px, 4.353vw + 21.429px, 105px);
	height: clamp(66px, 4.353vw + 21.429px, 105px);
}

.p-menu-services__heading {
	box-sizing: border-box;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	color: #F16B3B;
}

.p-menu-services__title {
	margin: 0;
	line-height: normal;
	max-width: 100%;
}

.p-menu-services__title-ja,
.p-menu-services__title-en {
	white-space: nowrap;
}

.p-menu-services__title-ja {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.03em;
}

.p-menu-services__title-en {
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.06em;
}

.p-menu-services__subtitle {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
}

.p-menu-services__divider {
	display: block;
	width: 100%;
	height: 52px;
	background-image: radial-gradient(circle, #F16B3B 4px, transparent 4px);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: 26px 8px;
	pointer-events: none;
}

.p-menu-services__label {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-menu-services__list {
	margin: 0;
	padding-left: 24px;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

.p-menu-services__list li {
	margin: 0;
}

.p-menu-services__text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-menu-services {
		padding: 100px 16px;
	}

	.p-menu-services__inner--pc {
		display: none;
	}

	.p-menu-services__inner--sp {
		display: flex;
		flex-direction: column;
		gap: 35px;
	}

	.p-menu-services__card--sp {
		gap: 20px;
		padding: 0;
	}

	.p-menu-services__card-header--sp {
		height: auto;
		gap: 13px;
		padding: 9px 10px;
		border-radius: 15px;
	}

	.p-menu-services__icon--sp {
		width: 53px;
		height: 53px;
	}

	.p-menu-services__heading--sp {
		gap: 5px;
	}

	.p-menu-services__title-ja--sp,
	.p-menu-services__title-en--sp {
		font-size: 18px;
	}

	.p-menu-services__title-ja--sp {
		letter-spacing: 0.03em;
	}

	.p-menu-services__title-en--sp {
		letter-spacing: 0.06em;
	}

	/* 見出しと英語ラベルの間の区切り。デフォルト(323px未満)は br--sp を
	   表示して強制改行、space--sp は非表示。カードごとのテキスト長に
	   左右されず、全カード共通で同時に切り替わる。 */
	.p-menu-services__title-space--sp {
		display: none;
	}

	.p-menu-services__title-break--sp {
		display: block;
	}

	/* card-header--sp の実測幅は「ビューポート幅 - 47.667px」で
	   ビューポート幅と1:1の線形関係にあることを実測済み(375px→327.333px、
	   411px→363.333px)。実質幅が323px以上になるのはビューポート幅371px
	   以上のため、コンテナクエリではなくビューポート幅ベースのメディア
	   クエリで判定する。371px以上で space--sp を表示・br--sp を非表示に
	   して1行の横並びに切り替える。 */
	@media (min-width: 371px) {
		.p-menu-services__title-space--sp {
			display: inline;
		}

		.p-menu-services__title-break--sp {
			display: none;
		}
	}

	.p-menu-services__subtitle--sp {
		font-size: 14px;
	}

	.p-menu-services__divider--sp {
		height: 22px;
		background-image: radial-gradient(circle, #F16B3B 2.5px, transparent 2.5px);
		background-size: 19px 5px;
	}

	.p-menu-services__label--sp,
	.p-menu-services__text--sp {
		font-size: 14px;
	}

	.p-menu-services__list--sp {
		padding-left: 21px;
		font-size: 14px;
	}
}

/* ==========================================================================
   Exterior-photo（外観写真／診療案内ページ）
   基準値: PC = node 134:651 / SP = node 175:554
   p-reception-photo（トップページ）と同じ実装方針（幅100%・高さ固定・
   object-fit: cover）を踏襲 --- */
.p-exterior-photo {
	position: relative;
}

.p-exterior-photo__inner--sp {
	display: none;
}

.p-exterior-photo__inner--pc {
	width: 100%;
	height: 600px;
	overflow: hidden;
}

.p-exterior-photo__image--pc {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-exterior-photo__inner--pc {
		display: none;
	}

	.p-exterior-photo__inner--sp {
		display: block;
		width: 100%;
		height: 400px;
		overflow: hidden;
	}

	.p-exterior-photo__image--sp {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
}

/* ==========================================================================
   Payment-section（お支払いについて／診療案内ページ）
   基準値: 1024px = node 332:1220 / 1920px = node 117:219 / SP = node 175:573
   セクション自体の横パディングは p-services・p-menu-services と同じ値を踏襲し、
   info-row のギャップのみ両基準点でFigma数値が異なるため clamp() で線形補間。
   それ以外（文字サイズ・カード内余白・ロゴサイズ等）は両基準点で共通の固定値で実装。
   exterior-photo との間には margin を設けず、間隔は0にしている --- */
.p-payment {
	position: relative;
	padding: 140px clamp(40px, 24.554vw - 211.47px, 260px) 140px;
	background-color: #F5F5DC;
}

.p-payment__inner--sp {
	display: none;
}

.p-payment__inner--pc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	max-width: 1400px;
	margin: 0 auto;
}

.p-payment__methods {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 43px;
	width: 100%;
	padding: 42px 0;
	border-radius: 32px;
	background-color: #fff;
}

.p-payment__methods-title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #F16B3B;
	text-align: center;
}

.p-payment__methods-text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-align: center;
}

.p-payment__logos {
	container-type: inline-size;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 40px;
}

/* ロゴは高さを揃え、幅はautoで縦横比を維持する。
   vw基準だと「ロゴ行の実際の幅」と「ビューポート幅」がpayment-methods等の
   固定paddingの分だけズレてしまい、狭い画面で頭打ち→はみ出しの原因になるため、
   ロゴ行自身の実幅を基準にするコンテナクエリ（cqw）で高さを算出する。
   高さ = 10.972cqw（= ロゴ行幅の約10.97%）とすると、5ロゴ合計の幅は
   常にロゴ行幅の約93.6%に収まる比例関係になり、画面幅がどれだけ縮んでも
   （下限を設けず連続的に縮み続けても）はみ出さないことが計算上保証される。
   基準値: 375px幅時のロゴ行幅 319px で高さ35px（node 175:561）となるよう係数を調整。
   PC/1024pxのFigma値（55px・60px）は上限としてmin()で頭打ちにして再現 --- */
.p-payment__logo {
	display: block;
	width: auto;
}

.p-payment__logo--visa,
.p-payment__logo--mastercard,
.p-payment__logo--jcb {
	height: min(10.972cqw, 55px);
}

.p-payment__logo--id,
.p-payment__logo--paypay {
	height: min(10.972cqw, 60px);
}

.p-payment__info-row {
	display: flex;
	align-items: stretch;
	gap: clamp(40px, 4.241vw - 3.429px, 78px);
	width: 100%;
}

.p-payment__info-card {
	box-sizing: border-box;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: center;
	gap: 43px;
	min-width: 0;
	padding: 42px 30px;
	border-radius: 30px;
	background-color: #fff;
	text-align: center;
}

.p-payment__info-card--center {
	justify-content: center;
}

.p-payment__info-title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #F16B3B;
}

.p-payment__info-text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-payment {
		padding: 80px 16px;
	}

	.p-payment__inner--pc {
		display: none;
	}

	.p-payment__inner--sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 35px;
		width: 100%;
	}

	.p-payment__methods--sp {
		box-sizing: border-box;
		gap: 23px;
		padding: 27px 12px;
		border-radius: 18px;
	}

	.p-payment__methods-title--sp {
		font-size: 18px;
		font-weight: 500;
	}

	.p-payment__methods-text--sp {
		max-width: 273px;
		margin: 0 auto;
		font-size: 14px;
	}

	.p-payment__logos--sp {
		gap: 0;
		justify-content: space-between;
	}

	.p-payment__info-card--sp {
		flex: none;
		width: 100%;
		padding: 27px 0;
		border-radius: 18px;
	}

	.p-payment__info-title--sp {
		font-size: 18px;
	}

	.p-payment__info-text--sp {
		font-size: 14px;
	}
}

/* ==========================================================================
   Flow-section（診療の流れ／診療案内ページ）
   基準値: 1024px = node 335:1262 / 1920px = node 129:293 / SP = node 176:874
   セクション自体の横パディングは p-services・p-menu-services・p-payment と同じ値を踏襲。
   decoration-circles・photoのサイズ位置、decoration-circlesとcontent間のgapのみ
   両基準点でFigma数値が異なるため clamp() で線形補間。content-wrapperの幅は
   flex: 1 0 0 で残り幅を自動で埋めることで、1024px=648px／1920px=840pxの
   Figma数値と自然に一致する（個別のclamp()は不要）。
   それ以外（Section-Header・flow-stepsの余白・文字サイズ・step-lineの点線等）は
   両基準点で共通の固定値で実装。
   decoration-circlesはp-features（トップページ）と同じ手法（border-radius:50%の
   円形レイヤーを重ねる）で実装し、Figmaのmask-image指定は使用していない。
   step-lineの点線は p-menu-services__divider と同じ手法（radial-gradientの
   ドットパターン）を縦方向に応用して再現している。
   SP（〜1023px）は他セクション同様、両基準点の補間ではなくSPのFigma数値をそのまま
   固定値で実装している --- */
.p-flow {
	position: relative;
	padding: 150px clamp(40px, 24.554vw - 211.47px, 260px) 85px;
}

.p-flow__inner--sp {
	display: none;
}

.p-flow__inner--pc {
	display: flex;
	align-items: center;
	gap: clamp(40px, 4.911vw - 10.286px, 84px);
	max-width: 1400px;
	margin: 0 auto;
}

.p-flow__decoration {
	position: relative;
	flex-shrink: 0;
	width: clamp(256px, 24.321vw + 6.949px, 474px);
	height: clamp(451px, 42.859vw + 12.099px, 835px);
}

.p-flow__circle-large {
	position: absolute;
	top: clamp(118.82px, 11.292vw + 3.19px, 220px);
	left: 0;
	width: clamp(241.43px, 22.946vw + 6.45px, 447.03px);
	height: clamp(241.43px, 22.946vw + 6.45px, 447.03px);
	border-radius: 50%;
	background-color: #F5F5DC;
	opacity: .11;
}

.p-flow__circle-bottom {
	position: absolute;
	top: clamp(360.24px, 34.238vw + 9.68px, 667px);
	left: 0;
	width: clamp(90.735px, 8.622vw + 2.445px, 168px);
	height: clamp(90.735px, 8.622vw + 2.445px, 168px);
	border-radius: 50%;
	background-color: #F5F5DC;
}

.p-flow__photo {
	position: absolute;
	top: clamp(118.82px, 11.292vw + 3.19px, 220px);
	left: 0;
	width: clamp(241.43px, 22.946vw + 6.45px, 447.03px);
	height: clamp(241.43px, 22.946vw + 6.45px, 447.03px);
	border-radius: 50%;
	object-fit: cover;
}

.p-flow__circle-top {
	position: absolute;
	top: 0;
	left: clamp(106.4px, 10.112vw + 2.85px, 197px);
	width: clamp(149.6px, 14.218vw + 4.015px, 277px);
	height: clamp(149.6px, 14.218vw + 4.015px, 277px);
	border-radius: 50%;
	background-color: #F16B3B;
	opacity: .43;
}

.p-flow__content {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: center;
	gap: 58px;
	min-width: 0;
}

.p-flow__steps {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 11px;
	width: 100%;
}

.p-flow__step {
	display: flex;
	align-items: flex-start;
	gap: 29px;
	width: 100%;
}

.p-flow__step--last {
	gap: 51px;
}

.p-flow__step-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-shrink: 0;
	width: 163px;
}

.p-flow__step:nth-child(1) .p-flow__step-heading {
	gap: 14px;
}

.p-flow__step:nth-child(2) .p-flow__step-heading {
	gap: 15px;
}

.p-flow__step:nth-child(3) .p-flow__step-heading {
	gap: 11px;
}

.p-flow__step:nth-child(4) .p-flow__step-heading {
	gap: 15px;
}

.p-flow__step-title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-flow__step-title--last {
	flex-shrink: 0;
	white-space: nowrap;
}

.p-flow__step-line {
	display: block;
	flex-shrink: 0;
	width: 8px;
	height: 97px;
	margin-left: 21px;
	background-image: radial-gradient(circle, #4E342E 4px, transparent 4px);
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 8px 26px;
}

.p-flow__step-text {
	margin: 0;
	flex: 1 0 0;
	min-width: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-flow__step-text p {
	margin: 0;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-flow {
		padding: 100px 16px 115px;
	}

	.p-flow__inner--pc {
		display: none;
	}

	.p-flow__inner--sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 67px;
	}

	.p-flow__decoration--sp {
		position: relative;
		flex-shrink: 0;
		width: 271px;
		height: 478px;
	}

	.p-flow__circle-large--sp {
		position: absolute;
		top: 126px;
		left: 0;
		width: 255.9px;
		height: 255.9px;
		border-radius: 50%;
		background-color: #F5F5DC;
		opacity: .11;
	}

	.p-flow__circle-bottom--sp {
		position: absolute;
		top: 381.83px;
		left: 0;
		width: 96.17px;
		height: 96.17px;
		border-radius: 50%;
		background-color: #F5F5DC;
	}

	.p-flow__photo--sp {
		position: absolute;
		top: 126px;
		left: 0;
		width: 255.9px;
		height: 255.9px;
		border-radius: 50%;
		object-fit: cover;
	}

	.p-flow__circle-top--sp {
		position: absolute;
		top: 0;
		left: 112.77px;
		width: 158.57px;
		height: 158.57px;
		border-radius: 50%;
		background-color: #F16B3B;
		opacity: .43;
	}

	.p-flow__content--sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 35px;
		width: 100%;
	}

	.p-flow__steps--sp {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 21px;
		width: 100%;
	}

	.p-flow__step--sp {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		width: 100%;
	}

	.p-flow__step-heading--sp {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex-shrink: 0;
		width: 101px;
	}

	.p-flow__step--sp:nth-child(1) .p-flow__step-heading--sp {
		gap: 14px;
	}

	.p-flow__step--sp:nth-child(2) .p-flow__step-heading--sp {
		gap: 15px;
	}

	.p-flow__step--sp:nth-child(3) .p-flow__step-heading--sp {
		gap: 11px;
	}

	.p-flow__step--sp:nth-child(4) .p-flow__step-heading--sp {
		gap: 15px;
	}

	.p-flow__step-title--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-flow__step-line--sp {
		display: block;
		flex-shrink: 0;
		width: 3px;
		height: 97px;
		margin-left: 15.5px;
		background-image: radial-gradient(circle, #4E342E 1.5px, transparent 1.5px);
		background-repeat: repeat-y;
		background-position: top center;
		background-size: 3px 16px;
	}

	.p-flow__step-text--sp {
		margin: 0;
		flex: 1 0 0;
		min-width: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-flow__step-text--sp p {
		margin: 0;
	}
}

/* ==========================================================================
   FV-section（当院についてページ）
   基準値: PC = node 251:490 / SP = node 251:502
   マークアップ・CSS構造はp-fv-menu（診療案内ページのFV）を踏襲し、
   背景写真とコピーのみ当院についてページ用に差し替えている。
   ========================================================================== */
.p-fv-about {
	position: relative;
	background-color: #F5F5DC;
}

.p-fv-about__inner--sp {
	display: none;
}

/* --- PC (1024px〜) --- */
.p-fv-about__inner--pc {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 360px;
	padding-top: 93px;
	overflow: hidden;
}

.p-fv-about__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: #F5F5DC;
}

.p-fv-about__bg-image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Figma（node 251:490）の写真配置（top: -107.96%, height: 355.6%）から逆算した値。スマホが隠れないよう調整 */
	object-position: 50% 42.2%;
}

.p-fv-about__wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 81.25px;
	background-image: url(../images/wave-fv-pc.svg);
	background-repeat: repeat-x;
	background-position: left top;
	background-size: auto;
	pointer-events: none;
}

.p-fv-about__content {
	position: relative;
	width: 100%;
	max-width: 1400px;
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}

.p-fv-about__message {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 308px;
	height: 307px;
}

.p-fv-about__circle {
	position: absolute;
	left: clamp(-91px, -4.6875vw - 1px, -49px);
	top: clamp(-23.25px, -5.608vw + 84.429px, 27px);
	width: clamp(327px, 8.002vw + 245.057px, 398.7px);
	height: clamp(246.87px, 6.041vw + 185.007px, 301px);
	background-image: url(../images/decoration-menu-fv-circle-pc.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

.p-fv-about__text-group {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(232px, 8.482vw + 145.146px, 308px);
	padding-bottom: clamp(7px, 5.246vw - 46.714px, 54px);
}

.p-fv-about__title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 5.3px rgba(0, 0, 0, .25);
	white-space: nowrap;
}

/* --- SP(〜1023px) --- */
@media (max-width: 1023px) {

	.p-fv-about__inner--pc {
		display: none;
	}

	.p-fv-about__inner--sp {
		position: relative;
		display: block;
		height: 200px;
		overflow: hidden;
	}

	.p-fv-about__bg-image--sp {
		/* SPブレークポイントは320〜1023pxを1枚の画像でカバーするため、コンテナ幅が広くなるほどobject-fit:coverで縦方向に強くズームされる。
		   1023px幅時点でも通話中のスマホが見える位置を基準に調整（375px幅ではより広い範囲が見えるため問題なし） */
		object-position: 50% 56%;
	}

	.p-fv-about__circle-sp {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		pointer-events: none;
	}

	/* right: 画面が広いときは、ほかのセクションの中身（最大600px）の右端にそろえる（p-fv-menu と同じ） */
	.p-fv-about__circle-sp--01 {
		right: calc(max(16px, (100% - var(--sp-content-max)) / 2) + 36px);
		top: 46px;
		width: 135px;
		height: 135px;
		background-image: url(../images/decoration-menu-fv-circle-sp-01.svg);
	}

	.p-fv-about__circle-sp--02 {
		right: max(16px, (100% - var(--sp-content-max)) / 2);
		top: 119px;
		width: 61px;
		height: 61px;
		background-image: url(../images/decoration-menu-fv-circle-sp-02.svg);
	}

	.p-fv-about__text-group--sp {
		width: auto;
		padding-bottom: 0;
	}

	.p-fv-about__title--sp {
		font-size: 18px;
		letter-spacing: 0.18px;
	}

	.p-fv-about__wave--sp {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 45px;
		background-image: url(../images/wave-fv-sp.svg);
		background-repeat: repeat-x;
		background-position: left top;
		background-size: auto;
		pointer-events: none;
	}
}

/* ==========================================================================
   Staff-section（獣医師・スタッフ紹介）
   基準値: 1024px = node 363:941 / 1920px = node 147:321 / SP = node 178:477
   写真・decoration-circleのサイズ位置とdirector-card/nurse-listのgap・paddingは
   両基準点でFigma数値が異なるため clamp() で線形補間、文字サイズ・内部の余白等は
   両基準点で共通の固定値 --- */
.p-staff {
	position: relative;
	padding: 150px 0 50px;
}

.p-staff__inner--sp {
	display: none;
}

/* --- PC (1024px〜) --- */
.p-staff__inner--pc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(55px, 2.232vw + 32.143px, 75px);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(40px, 24.554vw - 211.47px, 260px);
}

.p-staff__lead {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-align: center;
}

.p-staff__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 45px;
	width: 100%;
}

.p-staff__divider {
	flex-shrink: 0;
	width: 100%;
	height: 8px;
	background-image: radial-gradient(circle, #F16B3B 4px, transparent 4px);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: 26px 8px;
}

/* --- director --- */
.p-staff__director {
	display: flex;
	align-items: center;
	gap: clamp(25px, 9.375vw - 71px, 109px);
	width: 100%;
}

.p-staff__director-photo {
	position: relative;
	flex-shrink: 0;
	width: clamp(412.08px, 21.866vw + 188.171px, 608px);
	height: clamp(475.11px, 25.211vw + 216.95px, 701px);
}

.p-staff__director-photo-deco {
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(174.83px, 9.282vw + 79.779px, 258px);
	height: clamp(174.83px, 9.282vw + 79.779px, 258px);
	border-radius: 50%;
	background-color: #F9B39A;
}

.p-staff__director-photo-img {
	position: absolute;
	top: clamp(87.41px, 4.642vw + 39.879px, 129px);
	left: clamp(24.38px, 1.297vw + 11.1px, 36px);
	width: clamp(387.7px, 20.569vw + 177.071px, 572px);
	height: clamp(387.7px, 20.569vw + 177.071px, 572px);
	border-radius: 50%;
	object-fit: cover;
}

.p-staff__director-info {
	box-sizing: border-box;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 35px;
	min-width: 0;
}

.p-staff__director-heading {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}

.p-staff__director-role {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 35px;
	letter-spacing: 0.03em;
	color: #F16B3B;
}

.p-staff__director-name {
	display: flex;
	align-items: center;
	gap: 41px;
}

.p-staff__director-name-ja {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 58px;
	letter-spacing: 0.08em;
	color: #4E342E;
	white-space: nowrap;
}

.p-staff__director-name-en {
	margin: 0;
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 58px;
	letter-spacing: 0.06em;
	color: #F16B3B;
	white-space: nowrap;
}

.p-staff__field {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}

.p-staff__field-title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 35px;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-staff__field-text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: 0.03em;
	color: #4E342E;
	/* 「修了」のような2文字が入りきらない際に「了」だけが孤立して改行される（オーファン）のを防ぐ。
	   非対応ブラウザでは無視され、従来どおりの折り返しになるだけなので安全。 */
	text-wrap: pretty;
}

/* 「所属・資格」「飼っているペット」と猫の写真は、position:absoluteによる座標計算ではなく
   通常のflexboxで横並びにし、テキスト側をflex:1 0 0 + min-width:0、猫側をflex-shrink:0の
   固定幅にすることで、ブラウザのレイアウト計算により物理的に重なりが起きない構成にしている
   （手計算のtop/left位置がズレても重ならないことをレイアウトの仕組みそのもので担保する）。 */
.p-staff__director-lower {
	display: flex;
	align-items: flex-start;
	gap: 0px;
	width: 100%;
}

.p-staff__director-lower-text {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 35px;
	min-width: 0;
}

/* margin-topはFigma実測値（1024px: node 363:971 y=450 / 1920px: node 147:309 y=456、
   いずれもdirector-info基準に換算）に合わせ、「所属・資格」の途中から猫が始まる位置を再現している */
.p-staff__director-pet {
	flex-shrink: 0;
	margin-top: clamp(27.545px, -4.515vw + 114.234px, 68px);
	width: clamp(183.46px, 5.975vw + 122.271px, 237px);
	height: clamp(183.46px, 5.975vw + 122.271px, 237px);
}

.p-staff__director-pet-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* --- nurse --- */
.p-staff__nurse-list {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	padding: 0 clamp(0px, 8.147vw - 83.429px, 73px);
}

.p-staff__nurse {
	display: flex;
	align-items: center;
	gap: 30px;
}

.p-staff__nurse--01 {
	flex-shrink: 0;
	width: 550px;
	height: 343px;
	margin-right: clamp(-76px, 8.482vw - 162.857px, 0px);
}

.p-staff__nurse--02 {
	align-self: stretch;
}

.p-staff__nurse-photo {
	position: relative;
	flex-shrink: 0;
	width: clamp(205px, 11.83vw + 83.857px, 311px);
	height: clamp(226.1px, 13.047vw + 92.5px, 343px);
}

.p-staff__nurse-photo-img {
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(183.25px, 10.575vw + 74.964px, 278px);
	height: clamp(183.25px, 10.575vw + 74.964px, 278px);
	border-radius: 50%;
	object-fit: cover;
}

.p-staff__nurse-pet {
	position: absolute;
	top: clamp(140.4px, 8.114vw + 57.314px, 213.1px);
	left: clamp(119.31px, 6.885vw + 48.807px, 181px);
	width: clamp(85.69px, 4.945vw + 35.05px, 130px);
	height: clamp(85.69px, 4.945vw + 35.05px, 130px);
}

.p-staff__nurse-pet-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.p-staff__nurse-info {
	box-sizing: border-box;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-self: stretch;
	gap: 12px;
	padding-top: 35px;
	min-width: 0;
}

.p-staff__nurse-heading {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.p-staff__nurse-role {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-staff__nurse-name {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: 32px;
	line-height: normal;
	letter-spacing: 0.08em;
	color: #4E342E;
}

.p-staff__nurse-school {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-staff__nurse-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.p-staff__nurse-field-title,
.p-staff__nurse-field-text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

/* --- nurse card 02（中村有紗）--- */
.p-staff__nurse--02 .p-staff__nurse-role,
.p-staff__nurse--02 .p-staff__nurse-name,
.p-staff__nurse--02 .p-staff__nurse-school {
	white-space: nowrap;
}

.p-staff__nurse-photo--02 {
	width: clamp(226px, 12.723vw + 95.714px, 340px);
	height: clamp(228px, 12.835vw + 96.571px, 343px);
}

.p-staff__nurse-photo-img--02 {
	left: clamp(39.2px, 2.21vw + 16.571px, 59px);
	width: clamp(184.8px, 10.402vw + 78.286px, 278px);
	height: clamp(202.8px, 11.412vw + 85.943px, 305.05px);
}

.p-staff__nurse-deco {
	position: absolute;
	border-radius: 50%;
}

.p-staff__nurse-deco--cream {
	top: clamp(132.43px, 7.454vw + 56.099px, 199.22px);
	left: 0;
	width: clamp(87.083px, 4.901vw + 36.892px, 131px);
	height: clamp(95.568px, 5.38vw + 40.473px, 143.776px);
	background-color: #F5F5DC;
	opacity: .86;
}

.p-staff__nurse-deco--peach {
	top: clamp(166.23px, 9.359vw + 70.39px, 250.09px);
	left: clamp(174.16px, 9.804vw + 73.771px, 262px);
	width: clamp(39.221px, 2.207vw + 16.616px, 59px);
	height: clamp(40.547px, 2.283vw + 17.172px, 61px);
	background-color: #F9B39A;
}

.p-staff__nurse-info--02 {
	padding-top: 35px;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-staff {
		padding: 60px 0 17px;
	}

	.p-staff__inner--pc {
		display: none;
	}

	.p-staff__inner--sp {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 35px;
		padding: 0 16px;
	}

	.p-staff__lead--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
		text-align: center;
	}

	.p-staff__divider--sp {
		flex-shrink: 0;
		width: 100%;
		height: 5px;
		background-image: radial-gradient(circle, #F16B3B 2.5px, transparent 2.5px);
		background-repeat: repeat-x;
		background-position: left center;
		background-size: 19px 5px;
	}

	/* --- director --- */
	.p-staff__director-photo--sp {
		position: relative;
		flex-shrink: 0;
		width: 283.003px;
		height: 326.283px;
	}

	.p-staff__director-photo-deco--sp {
		position: absolute;
		top: 0;
		left: 0;
		width: 120.089px;
		height: 120.089px;
		border-radius: 50%;
		background-color: #F9B39A;
	}

	.p-staff__director-photo-img--sp {
		position: absolute;
		top: 60.04px;
		left: 16.76px;
		width: 266.243px;
		height: 266.243px;
		border-radius: 50%;
		object-fit: cover;
	}

	.p-staff__director-info--sp {
		display: flex;
		flex-direction: column;
		gap: 15px;
		width: 100%;
	}

	.p-staff__director-heading--sp {
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 100%;
	}

	.p-staff__director-role--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #F16B3B;
	}

	.p-staff__director-name--sp {
		display: flex;
		align-items: flex-end;
		gap: 22px;
	}

	.p-staff__director-name-ja--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 32px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-staff__director-name-en--sp {
		margin: 0;
		font-family: 'Jost', sans-serif;
		font-weight: 400;
		font-size: 20px;
		line-height: normal;
		letter-spacing: 0.06em;
		color: #F16B3B;
	}

	.p-staff__field--sp {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}

	.p-staff__field-title--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-staff__field-text--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-staff__director-pet--sp {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}

	.p-staff__director-pet-img--sp {
		display: block;
		width: 169.569px;
		height: 169.569px;
		border-radius: 50%;
		object-fit: cover;
	}

	/* --- nurse --- */
	.p-staff__nurse-list--sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.p-staff__nurse--sp {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.p-staff__nurse-photo--sp {
		position: relative;
		width: 100%;
		height: 284px;
	}

	.p-staff__nurse-photo-img--sp {
		position: absolute;
		top: 1.09px;
		left: 0;
		width: 237px;
		height: 237px;
		border-radius: 50%;
		object-fit: cover;
	}

	.p-staff__nurse-pet--sp {
		position: absolute;
		top: 128.72px;
		left: 205.5px;
		width: 110px;
		height: 110px;
	}

	.p-staff__nurse-pet-img--sp {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
	}

	.p-staff__nurse-info--sp {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
	}

	.p-staff__nurse-heading--sp {
		display: flex;
		flex-direction: column;
		gap: 3px;
	}

	.p-staff__nurse-role--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-staff__nurse-name--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 32px;
		line-height: normal;
		letter-spacing: 0.08em;
		color: #4E342E;
	}

	.p-staff__nurse-school--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-staff__nurse-field--sp {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.p-staff__nurse-field-title--sp,
	.p-staff__nurse-field-text--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	/* --- nurse card 02（中村有紗）---
	   写真・丸の装飾は右寄せのデザイン。left の固定値は中身の幅343px（375px時）が基準のため、
	   中身がそれより広いときは、広がった分だけ右へずらす（375px・320pxでは max() が0になるため元の値と同じ） */
	.p-staff__nurse-info--sp-02,
	.p-staff__nurse-heading--sp-02 {
		align-items: flex-end;
		text-align: right;
	}

	.p-staff__nurse-photo--sp-02 {
		height: 285px;
	}

	.p-staff__nurse-photo-img--sp-02 {
		top: 20.72px;
		left: calc(106.5px + max(0px, 100% - 343px));
		width: 240px;
		height: 240px;
	}

	.p-staff__nurse-deco--sp {
		position: absolute;
		border-radius: 50%;
	}

	.p-staff__nurse-deco--sp-cream {
		top: 2.72px;
		left: calc(53.5px + max(0px, 100% - 343px));
		width: 120px;
		height: 126px;
		background-color: #F5F5DC;
		opacity: .86;
	}

	.p-staff__nurse-deco--sp-peach {
		top: 187.72px;
		left: calc(275.5px + max(0px, 100% - 343px));
		width: 69px;
		height: 73px;
		background-color: #F9B39A;
	}
}

/* ==========================================================================
   Facility-section（設備について）
   基準値: 1024px = node 369:790 / 1920px = node 152:416 / SP = node 180:508
   横パディング・カード間ギャップ・カード内パディング・アイコン間ギャップ・
   アイコンサイズは両基準点でFigma数値が異なるため clamp() で線形補間、
   それ以外（文字サイズ・カードの角丸・縦方向の余白等）は両基準点で共通の固定値 --- */
.p-facility {
	position: relative;
	padding: 90px 0;
	background-color: #F5F5DC;
}

.p-facility__inner--sp {
	display: none;
}

/* --- PC (1024px〜) --- */
.p-facility__inner--pc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(34px, 25.223vw - 224.286px, 260px);
}

.p-facility__lead {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-align: center;
}

.p-facility__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(25px, 8.371vw - 60.717px, 100px);
	row-gap: clamp(30px, 1.116vw + 18.571px, 40px);
	width: 100%;
}

.p-facility__card {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.232vw - 2.857px, 40px);
	height: 167px;
	padding: 34px clamp(15px, 4.464vw - 30.714px, 55px);
	border-radius: 30px;
	background-color: #fff;
}

.p-facility__icon {
	display: block;
	flex-shrink: 0;
	width: clamp(65px, 3.795vw + 26.143px, 99px);
	height: clamp(65px, 3.795vw + 26.143px, 99px);
}

.p-facility__info {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 21px;
	min-width: 0;
}

.p-facility__title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #F16B3B;
}

.p-facility__text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-facility {
		padding: 51px 0;
	}

	.p-facility__inner--pc {
		display: none;
	}

	.p-facility__inner--sp {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 37px;
		padding: 0 16px;
	}

	.p-facility__lead--sp {
		margin: 0;
		width: 100%;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
		text-align: center;
	}

	.p-facility__list--sp {
		display: flex;
		flex-direction: column;
		gap: 15px;
		width: 100%;
	}

	.p-facility__card--sp {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 15px;
		width: 100%;
		padding: 14px 8px;
		border-radius: 10px;
		background-color: #fff;
	}

	.p-facility__icon--sp {
		display: block;
		flex-shrink: 0;
		width: 60px;
		height: 60px;
	}

	.p-facility__info--sp {
		display: flex;
		flex: 1 0 0;
		flex-direction: column;
		gap: 5px;
		min-width: 0;
	}

	.p-facility__title--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #F16B3B;
	}

	.p-facility__text--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}
}

/* ==========================================================================
   Access-section（アクセス）
   PC(1920px)・タブレット(1024px)・SPの3デザインをそれぞれ独立したレイアウトとして実装。
   PC/タブレットは列と行でaccess-info-rowの向きが異なるなど構造差があるため、
   PC用スタイルをclamp()で機械的に縮小せず、各ブレークポイント専用のマークアップ・CSSを用意している。
   基準値: 1024px = node 374:1015 / 1920px = node 154:444 / SP = node 181:507
   コンテナ幅は他セクションと同じ「max-width:1400px + box-sizing初期値(content-box)」の
   組み合わせのため、大きい幅でもコンテンツが縮小しない --- */
.p-access {
	position: relative;
	background-color: #fff;
	/* 下paddingはCTAセクションの波装飾（.p-cta__wave、top:-84pxで最大84pxセクション外にはみ出す）が
	   実コンテンツに重ならないよう、その突き出し量（84px）に加えて見た目のゆとりとして100px追加している。
	   この余白はaccess-sectionの背景色（白）で埋まっているため、CTAとの継ぎ目に見た目上の隙間は生じない --- */
	padding: 50px 0 184px;
}

.p-access__inner--tablet,
.p-access__inner--sp {
	display: none;
}

/* --- PC（1920px〜） --- */
.p-access__inner--pc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 260px;
}

.p-access__map {
	position: relative;
	width: 100%;
	height: 542px;
}

.p-access__map-embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.p-access__map-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.p-access__map-overlay.is-hidden {
	display: none;
}

.p-access__map-overlay-text {
	margin: 0;
	padding: 8px 20px;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.6);
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.03em;
	color: #fff;
	white-space: nowrap;
}

.p-access__content {
	display: flex;
	align-items: flex-start;
	gap: 177px;
	width: 100%;
}

.p-access__details {
	display: flex;
	flex-direction: column;
	gap: 43px;
	flex-shrink: 0;
}

.p-access__info {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.p-access__address {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

.p-access__info-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.p-access__info-label {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

.p-access__info-row-text {
	display: flex;
	align-items: center;
	gap: 13px;
}

.p-access__info-line {
	display: block;
	flex-shrink: 0;
	width: 53px;
	height: 1px;
	background-color: #000;
}

.p-access__info-text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

.p-access__facilities {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.p-access__facilities-title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
}

.p-access__facilities-list {
	display: flex;
	gap: 20px;
}

.p-access__facilities-item {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 140px;
	padding: 13px 0;
	border-radius: 15px;
	background-color: rgba(245, 245, 220, 0.59);
}

.p-access__facilities-icon {
	display: block;
	flex-shrink: 0;
	width: 58px;
	height: 58px;
}

.p-access__facilities-text {
	margin: 8px 0 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-align: center;
}

.p-access__notice {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.p-access__notice-title {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

.p-access__notice-text {
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: #4E342E;
	white-space: nowrap;
}

/* --- タブレット（1024px〜1919px） --- */
@media (max-width: 1919px) {

	.p-access__inner--pc {
		display: none;
	}
}

@media (min-width: 1024px) and (max-width: 1919px) {

	.p-access__inner--tablet {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 50px;
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 clamp(40px, 24.554vw - 211.47px, 260px);
	}

	.p-access__map--tablet {
		position: relative;
		width: 100%;
		height: 542px;
	}

	.p-access__content--tablet {
		display: flex;
		align-items: flex-start;
		gap: 58px;
		width: 100%;
	}

	.p-access__details--tablet {
		display: flex;
		flex-direction: column;
		gap: 43px;
		flex-shrink: 0;
	}

	.p-access__info--tablet {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.p-access__address--tablet {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 700;
		font-size: 24px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
		white-space: nowrap;
	}

	.p-access__info-row--tablet {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.p-access__info-label--tablet {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 20px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
		white-space: nowrap;
	}

	.p-access__info-row-text--tablet {
		display: flex;
		align-items: center;
		gap: 13px;
	}

	.p-access__info-line--tablet {
		display: block;
		flex-shrink: 0;
		width: 53px;
		height: 1px;
		background-color: #000;
	}

	.p-access__info-text--tablet {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 20px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
		white-space: nowrap;
	}

	.p-access__facilities--tablet {
		display: flex;
		flex-direction: column;
		gap: 25px;
	}

	.p-access__facilities-title--tablet {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 20px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-access__facilities-list--tablet {
		display: flex;
		gap: 8px;
	}

	.p-access__facilities-item--tablet {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 120px;
		padding: 3.5px 0;
		border-radius: 15px;
		background-color: rgba(245, 245, 220, 0.59);
	}

	.p-access__facilities-icon--tablet {
		display: block;
		flex-shrink: 0;
		width: 58px;
		height: 58px;
	}

	.p-access__facilities-text--tablet {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
		text-align: center;
	}

	.p-access__notice--tablet {
		display: flex;
		flex: 1 0 0;
		flex-direction: column;
		gap: 28px;
		min-width: 0;
	}

	.p-access__notice-title--tablet {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 700;
		font-size: 24px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-access__notice-text--tablet {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 20px;
		line-height: 1.5;
		letter-spacing: 0.03em;
		color: #4E342E;
	}
}

/* --- SP（〜1023px） --- */
@media (max-width: 1023px) {

	.p-access {
		/* 下paddingはSP版CTAの波装飾（.p-cta__wave--sp、top:-45pxで最大45pxはみ出す）の突き出し量（45px）に加えて、
		   PC版の追加ゆとり100pxをPC/SPの波の突き出し比率（45/84）で按分した54pxを追加している --- */
		padding: 17px 0 99px;
	}

	.p-access__inner--pc {
		display: none;
	}

	.p-access__inner--sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 37px;
	}

	.p-access__map--sp {
		position: relative;
		width: 100%;
		height: 400px;
	}

	.p-access__info--sp {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		width: 100%;
		padding: 0 16px;
	}

	.p-access__address--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-access__info-row--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-access__facilities--sp {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 18px;
		width: 100%;
		padding: 0 16px;
	}

	.p-access__facilities-title--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-access__facilities-list--sp {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 30px;
		row-gap: 16px;
	}

	.p-access__facilities-item--sp {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 13px 0;
		border-radius: 15px;
		background-color: rgba(245, 245, 220, 0.59);
	}

	.p-access__facilities-icon--sp {
		display: block;
		flex-shrink: 0;
		width: 36px;
		height: 36px;
	}

	.p-access__facilities-text--sp {
		margin: 6px 0 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
		text-align: center;
	}

	.p-access__notice--sp {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 18px;
		width: 100%;
		padding: 0 16px;
	}

	.p-access__notice-title--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 500;
		font-size: 18px;
		line-height: normal;
		letter-spacing: 0.03em;
		color: #4E342E;
	}

	.p-access__notice-text--sp {
		margin: 0;
		font-family: 'Zen Kaku Gothic New', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: 0.03em;
		color: #4E342E;
	}
}

/* ==========================================================================
   スクロールで現れる動き（Top・Menu・About共通）
   対象の要素には js/script.js が .c-reveal を付け、画面に入ると .is-revealed を付ける。
   対象はFV・写真帯以外の各セクションの中身（__inner の直下の要素）だけで、
   セクションの背景・波などの装飾は動かさない（間隔0でつないだ境目に隙間が出ないように）。
   既存の transform と重ならないよう、移動は個別プロパティの translate で行う。
   下の3つの値は仮の値（ブラウザで確認して調整する） --- */
:root {
	/* 下から浮き上がる距離 */
	--reveal-distance: 30px;
	/* 現れるまでの時間 */
	--reveal-duration: .9s;
	/* 同時に画面に入った要素を順番に出すときの間隔 */
	--reveal-stagger: .12s;
}

.c-reveal {
	opacity: 0;
}

.c-reveal.is-revealed {
	animation: reveal-fade-up var(--reveal-duration) cubic-bezier(.25, .8, .35, 1) calc(var(--reveal-order, 0) * var(--reveal-stagger)) both;
}

/* ページを開いた時点で画面より上にある要素（途中の位置で再読み込みした場合など）は動かさずに表示 */
.c-reveal.is-revealed--instant {
	animation: none;
	opacity: 1;
}

@keyframes reveal-fade-up {
	from {
		opacity: 0;
		translate: 0 var(--reveal-distance);
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* OSで「動きを減らす」設定をしている場合は動かさず最初から表示（JS側でも対象にしない） */
@media (prefers-reduced-motion: reduce) {
	.c-reveal,
	.c-reveal.is-revealed {
		animation: none;
		opacity: 1;
	}
}

/* ==========================================================================
   sample-site-bar（サービスLPに戻るための追従ボタン）
   Figma: sample-site-bar / PC node-id 405:577, SP node-id 402:584
   使い方: sample-site-bar.php を各ページの cta-footer.php の後ろから
   <?php include 'sample-site-bar.php'; ?> で読み込む
   仕組みはテンプレA・Cと同じ。表示位置（下の余白16px）:
     PC版(1024px〜) 386×110px。Figmaでは中央だが、テンプレA・Cと同じく画面の右下に固定（右の余白16px）
     SP版(〜1023px) 343×71px。画面の下・横中央に固定（左右は最低16pxあける）
   重なり対策:
     - テンプレBの固定要素はSPドロワーメニュー（.l-header-nav-sp / z-index: 1000）のみ。
       z-index をそれより下の900にして、メニューが開いている間はメニューを上に表示する
       メニューの背景は半透明のため、開いている間（body.is-nav-open）は帯を非表示にしている
     - iPhoneのセーフエリア（画面下のバー）がある場合は、その分だけ上にずらす
       （env(safe-area-inset-bottom)。セーフエリアがない端末では 0）
     - 帯でページの一番下（フッターのコピーライト）が隠れないよう、フッター（.l-footer）が画面に入ったら
       帯をふわっと隠す（js/script.js で .is-hidden を付け外しする。少し上に戻ると再び表示）。
       サービスLPの追従ボタンと同じ考え方で、フッターの下に余白は足さない
   ========================================================================== */
:root {
	--sample-site-bar-height: 110px;
	--sample-site-bar-bottom: 16px;
}

.sample-site-bar {
	position: fixed;
	right: 16px;
	bottom: calc(var(--sample-site-bar-bottom) + env(safe-area-inset-bottom, 0px));
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	box-sizing: border-box;
	width: 386px;
	height: var(--sample-site-bar-height);
	padding: 9px 0;
	border-radius: 5px;
	background-color: #F16B3B;
	text-decoration: none;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: opacity .3s ease, visibility .3s ease;
}

/* フッターが画面に入っている間は隠す（visibility: hidden でキーボード操作の対象からも外す） */
.sample-site-bar.is-hidden {
	opacity: 0;
	visibility: hidden;
}

/* padding-left の 0.3em は、Figmaの文字の先頭にある半角スペース分 */
.sample-site-bar__button {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 9px;
	padding: 4px 18px 4px calc(18px + 0.3em);
	border-radius: 8px;
	background-color: #F5F5DC;
	font-size: 25px;
}

/* hover: 枠全体（.sample-site-bar）がリンクのため、hoverは枠に付ける。
   色はヘッダーの電話ボタン（Figma: header-contact / .l-header__contact）に揃えている。
     通常時 #F16B3B（header-contact デフォルト）→ hover時 #D44A19（header-contact バリアント2）
   内側のクリーム色のボタン（#F5F5DC）は色を変えない。
   hover対応デバイス（PC）のみ、枠全体の浮き上がり(translateY(-4px))・影と、
   枠の背景色を 0.25秒・ease で変化させる。影の色は文字色（#4E342E）系。
   タップのみのデバイス（SP）は :hover が押下後も残るため使わず、タップ中(:active)だけ枠の背景色を
   PCのhoverと同じ色に変える（アニメーション・浮き上がり・影は付けない）。
   キーボード操作用に :focus-visible は両方で有効（枠の背景色のみ） */
@media (hover: hover) {
	.sample-site-bar {
		transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, opacity .3s ease, visibility .3s ease;
	}

	.sample-site-bar:hover {
		background-color: #D44A19;
		box-shadow: 0 10px 22px rgba(78, 52, 46, .35);
		transform: translateY(-4px);
	}
}

@media (hover: none) {
	.sample-site-bar:active {
		background-color: #D44A19;
	}
}

.sample-site-bar:focus-visible {
	background-color: #D44A19;
}

.sample-site-bar__button-text {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: 1em;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-align: center;
	white-space: nowrap;
}

/* アイコンはFigmaと同じく、下向きの矢印（24×23）を-90度回転して右向きにする */
.sample-site-bar__button-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 24px;
}

.sample-site-bar__button-icon img {
	display: block;
	transform: rotate(-90deg);
}

.sample-site-bar__note {
	flex-shrink: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.03em;
	color: #4E342E;
	text-align: center;
	white-space: nowrap;
}

@media (max-width: 1023px) {
	:root {
		--sample-site-bar-height: 71px;
	}

	/* SP版は画面下の横中央（左右は最低16pxあける） */
	.sample-site-bar {
		left: 16px;
		gap: 4px;
		width: auto;
		max-width: 343px;
		margin: 0 auto;
	}

	.sample-site-bar__button {
		gap: 22px;
		font-size: 16px;
	}

	.sample-site-bar__button-text {
		font-family: 'Zen Maru Gothic', sans-serif;
		font-weight: 700;
		letter-spacing: 0.08em;
	}

	.sample-site-bar__note {
		font-size: 12px;
		color: #fff;
	}

	/* SPメニューの背景が半透明のため、メニューを開いている間（body.is-nav-open）は
	   帯が透けて見えたり押せたりしないよう非表示にする */
	.is-nav-open .sample-site-bar {
		visibility: hidden;
	}
}

/* ==========================================================================
   文字の改行のルール（見出し・ボタン・カードなどの短い文）
   画面の幅に収まらないときは、単語の途中や「1〜2文字だけが次の行に落ちる」改行にならないよう、
     - 「、」「。」の位置を優先して改行する … 区切りごとに <span class="text-part"> で囲む
       （inline-block のため、span の境目が先に改行される）
     - それでも収まらないときは、HTMLの <wbr> の位置（文節の区切り）で改行する
   長い本文の段落（カードの説明文・FAQの答えなど）には使わない（ふつうの折り返しのまま）。
   各セクションの white-space などより後に書く必要があるため、このファイルの最後に置く（テンプレAと同じ仕組み）。
   ※文言を変えたときは <wbr> の位置も見直すこと
   ========================================================================== */
.p-cta__heading,
.p-menu-services__subtitle,
.p-payment__info-text,
.p-access__notice-text--tablet {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.text-part {
	display: inline-block;
}

@media (max-width: 1023px) {
	.p-section-header__title--sp,
	.p-services__card-text--sp,
	.p-features__item-title--sp,
	.p-features__note--sp,
	.p-voice__lead--sp,
	.p-voice__bubble-title--sp,
	.p-voice__bubble-sub--sp,
	.p-faq__q-text--sp,
	.p-payment__methods-title--sp,
	.p-staff__lead--sp,
	.p-access__info-row--sp,
	.p-access__notice-text--sp {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	/* PCでは1行に収める（nowrap）が、SPでは狭い画面（320pxなど）ではみ出さないよう「、」の位置で改行する */
	.p-menu-services__list--sp {
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}