@charset "UTF-8";
/* CSS Document */

/*
10.トップページ
幅 1280px
PC 1025px〜
SMP 〜1024px（基準400px）
SMPのfont-sizeはXD数値の1/2（カンプ幅800pxのため）
*/

#page10,
#page10 * {
	box-sizing: border-box;
}

#page10 {
	overflow-x: clip;
}

#page10 img {
	display: block;
	max-width: 100%;
}

#page10 .montserrat {
	font-family: "Montserrat", sans-serif;
}

#page10 .en,
#page10 .sec-head .en {
	color: #0098bc;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	letter-spacing: 0.1em;
}

#page10 h2,
#page10 h3,
#page10 h4 {
	color: #4a4a4a;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
}

#page10 .sec-head {
	max-width: 1280px;
	margin: 0 auto 56px;
	text-align: center;
}

#page10 .sec-head h3 {
	color: #0098bc;
}

#page10 .sec-head p,
#page10 .about-body p,
#page10 .point p,
#page10 .recruit-body p {
	color: #4a4a4a;
	font-size: 16px;
	font-weight: 500;
	line-height: 2;
	text-align: center;
}

#page10 .center {
	text-align: center;
}

#page10 .btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 3px solid transparent;
	border-radius: 999px;
	color: #fff;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

#page10 .btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

#page10 .btn small {
	font-size: 0.7em;
	letter-spacing: 0.05em;
}

#page10 .btn.is-teal {
	border-color: #74CDD8;
	background: #74CDD8;
	box-shadow: 0 6px 12px rgba(0, 98, 121, 0.2);
}

#page10 .btn.is-green {
	border-color: #3EC676;
	background: #3EC676;
	box-shadow: 0 6px 12px rgba(0, 98, 121, 0.2);
}

/* キービジュアルの円：水彩風グラデーションのリング */
#page10 .badge {
	position: relative;
	background: rgba(255, 255, 255, 0.9);
}

#page10 .badge::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(#e9eeb8, #bfe0ea 12%, #cae7d2 25%, #f1e59f 38%, #d3ecd6 50%, #bbdfea 62%, #cde8d3 75%, #f2e6a2 88%, #e9eeb8);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 1.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 1.5px));
	filter: blur(0.8px);
	pointer-events: none;
}

#page10 .badge p {
	color: #0098bc;
}

#page10 .badge.is-who span {
	background: radial-gradient(circle, #0098bc 0.9px, transparent 1.3px) left bottom / 4px 3px repeat-x;
}

/* 吹き出し：雲形（SVG） */
#page10 .bubble {
	isolation: isolate;
}

#page10 .bubble-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}

/* 入居をお考えの方へ：上辺の波形 */
#page10 .for-residents {
	position: relative;
	z-index: 0;
}

#page10 .resid-wave {
	position: absolute;
	top: -1px;
	left: 0;
	z-index: -1;
	width: 100%;
}

/* 入居をお考えの方へ〜料金〜声の上部：カンプどおり1枚の水彩背景（白地に重ねる）。
   2セクションで別々の背景にすると境目に段差が出るため、ラッパーにまとめて敷く。下端は声セクションへ波形で延びる */
#page10 .resid-fees {
	position: relative;
	z-index: 0;
}

#page10 .resid-fees::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	background:
		linear-gradient(var(--wash), var(--wash)),
		url("../images/page10/bg-watercolor.webp") center / cover;
}

/* 料金：左下の点の円 */
#page10 .fees {
	position: relative;
	z-index: 0;
}

#page10 .fees::after {
	content: "";
	position: absolute;
	z-index: -1;
	/* カンプの blue.png（不透明度50%） */
	background: url("../images/page10/dots-blue.webp") center / contain no-repeat;
	opacity: 0.5;
}

/* スタッフ紹介：写真下の山形 */
#page10 .band-shape {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
}

/* アニメーション（is-anim は JS 有効・動きを減らす設定でない場合のみ付与） */
#page10 .hero-slide {
	transition: opacity 1.5s ease-in-out;
}

#page10.is-anim .hero h1 .char {
	display: inline-block;
	opacity: 0;
	filter: blur(6px);
	transform: translateY(0.3em);
	animation: hero-char 0.8s ease-out forwards;
	animation-delay: calc(var(--i) * 0.07s + 0.3s);
}

@keyframes hero-char {
	to {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}
}

#page10.is-anim .badge {
	opacity: 0;
	animation: fade-up 0.8s ease-out forwards;
}

/* キービジュアルの英文：文字がぬるりと現れる（b-risk #link03-3）。
   行ごとに overflow:hidden の枠の中で下から上がる。読み込み時に1回（見出しの後、1.5秒〜）。
   .fx-js は <head> で付くので最初の描画から隠れている（ちらつきなし）。動きを減らす設定では付かず、そのまま表示 */
#page10 .hero-en .nurun {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

#page10 .hero-en .nurun > span {
	display: inline-block;
}

.fx-js #page10 .hero-en .nurun > span {
	opacity: 0;
	transform: translateY(100%);
	animation: nurun 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
}

.fx-js #page10 .hero-en .nurun:nth-of-type(2) > span {
	animation-delay: 1.65s;
}

@keyframes nurun {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#page10.is-anim .badge.is-price {
	animation-delay: 1.8s;
}

#page10.is-anim .badge.is-who {
	animation-delay: 2.1s;
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#page10.is-anim .ticker-item.is-on {
	animation: ticker-in 0.6s ease-out;
}

@keyframes ticker-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 英字見出し（.en）はアニメーションなし（修正依頼：フェードアップはなしに） */

#page10.is-anim .facility-list li {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#page10.is-anim .facility-list li.is-inview {
	opacity: 1;
	transform: translateY(0);
}

/* 入居者様・ご家族の声（黄色枠）：.fade-in（透明度だけ・1.5秒）。
   PCは横並びの2〜4を0.25秒ずつ遅らせて 1→4 の順に。スマホは縦並びなのでスクロール順にそのまま表示 */
@media only screen and (min-width: 1025px) {
	#page10 .voice-list li.fade-in.is-active:nth-child(1) {
		transition-delay: 0.25s;
	}

	#page10 .voice-list li.fade-in.is-active:nth-child(2) {
		transition-delay: 0.5s;
	}

	#page10 .voice-list li.fade-in.is-active:nth-child(3) {
		transition-delay: 0.75s;
	}
}

/* 吹き出し（黄緑枠）：バウンド（web-design-pallet「バウンド」の値）。電話番号はバウンドなし。
   is-anim は「動きを減らす」設定では付かないので、その場合はバウンドしない */
#page10.is-anim .bubble {
	animation: bound 2s ease-in-out infinite;
}

@keyframes bound {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-30px);
	}

	60% {
		transform: translateY(-15px);
	}
}

#page10.is-anim .float {
	animation: fuwafuwa 3s ease-in-out infinite alternate;
}

#page10.is-anim .float.is-top {
	animation-delay: -1s;
}

#page10.is-anim .float.is-right {
	animation-delay: -2s;
}

@keyframes fuwafuwa {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-14px);
	}
}

/* スタッフ紹介：変化前・変化後の画像（アーチの背景込み 780×825）を写真枠いっぱいに重ねる。
   枠の CSS アーチ（背景色・角丸）は画像が読めない時の保険としてそのまま */
#page10 .staff-photo .staff-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: inherit;
	transform: none;
}

#page10 .staff-photo-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

/* ピンク枠の中だけズーム。人物写真は中央寄せの移動と重ねる */
.fx-js #page10 .staff-photo.fade-zoom:not(.is-active) img {
	opacity: 0;
	transform: translateX(-50%) scale(1.1);
	transform-origin: center bottom;
}

.fx-js #page10 .staff-photo.fade-zoom:not(.is-active) .staff-img {
	transform: scale(1.1);
	transform-origin: center center;
}

.fx-js #page10 .staff-photo.fade-zoom.is-active img {
	transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* マウス：画面幅を問わず、カードに載せると変化後へ（0.4秒） */
@media (hover: hover) and (pointer: fine) {
	.fx-js #page10 .staff-track a:hover .staff-photo.is-active .staff-img.is-before {
		opacity: 0;
		transition: opacity 0.4s ease, transform 1.2s ease-out;
	}
}

/* タッチ：ズームのあと、変化前から変化後へ */
@media (hover: none), (pointer: coarse) {
	.fx-js #page10 .staff-photo.fade-zoom.is-active .staff-img.is-before {
		animation: staff-swap 0.4s ease 1.2s forwards;
	}
}

@keyframes staff-swap {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#page10 .staff-photo .staff-img.is-before {
		animation: none;
		opacity: 0;
	}
}

/* ピンク枠：枠（.about-photo-frame / .band-frame）の大きさは固定のまま、中の画像だけがフェードイン＋ズームアウト（.fade-zoom・hf.css） */
#page10 .about-photo-frame,
#page10 .band-frame {
	overflow: hidden;
}

#page10 .btn.is-line {
	border-color: #30A5C1;
	background: #fff;
	color: #30A5C1;
	box-shadow: 0 6px 12px rgba(0, 98, 121, 0.2);
}

/*PC*/
@media only screen and (min-width: 1025px) {
	#page10 br.sp {
		display: none;
	}

	#page10 .sec-head .en {
		font-size: 16px;
		line-height: 1.5;
	}

	#page10 .sec-head h2 {
		margin-top: 18px;
		font-size: 40px;
		line-height: 1.5;
		letter-spacing: 0.15em;
	}

	#page10 .sec-head h3 {
		margin-top: 40px;
		font-size: 34px;
		line-height: 1.5;
		letter-spacing: 0.15em;
	}

	#page10 .sec-head p:not(.en) {
		margin-top: 44px;
		font-size: 18px;
		line-height: 35px;
		letter-spacing: 0.1em;
	}

	#page10 .sec-head h3+p:not(.en) {
		margin-top: 24px;
	}

	#page10 .center .btn {
		min-width: 420px;
		height: 80px;
		padding: 0 70px;
		font-size: 20px;
	}

	@media (hover: hover) and (pointer: fine) {
		/* 運営会社紹介・hibika Instagram バナー：少し持ち上がる（0.3秒） */
		#page10 .partner-links a:hover {
			transform: translateY(-4px);
		}

		#page10 .btn.is-teal:hover,
		#page10 .facility-list a:hover .btn,
		#page10 .staff-track a:hover .btn {
			border-color: #0098BC;
			background: #0098BC;
			color: #fff;
		}

		#page10 .btn.is-line:hover {
			border-color: #30A5C1;
			background: #30A5C1;
			color: #fff;
		}

		#page10 .btn.is-green:hover {
			background: #fff;
			color: #3EC676;
		}
	}

	#page10 .hero {
		position: relative;
		isolation: isolate;
		padding-top: 1px;
		background: #fff;
	}

	/* 水彩のにじみ：透過ヘッダーの後ろ（112px上）まで伸ばす（カンプ）。
	   以前の hero 背景（高さ763px：3% 40% / 16% 10%）と同じ位置・大きさになるよう px で指定 */
	#page10 .hero::before {
		content: "";
		position: absolute;
		top: -112px;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		background:
			radial-gradient(circle at 3% 417px, rgba(255, 238, 160, 0.85), transparent 11%),
			radial-gradient(circle at 16% 188px, rgba(205, 228, 242, 0.7), transparent 11%);
		pointer-events: none;
	}

	#page10 .hero-photo {
		position: absolute;
		top: 8px;
		left: max(calc(50% - 200px), 460px);
		right: 0;
		height: 685px;
	}

	#page10 .hero-photo::before {
		content: "";
		position: absolute;
		top: 0;
		left: -18px;
		right: 0;
		bottom: -18px;
		border-radius: 360px 0 0 360px / 350px 0 0 350px;
		background: radial-gradient(circle, #c3e4ee 1.4px, transparent 1.8px) 0 0 / 8px 8px;
	}

	#page10 .hero-slide {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		border-radius: 345px 0 0 345px;
		opacity: 0;
	}

	#page10 .hero-slide.is-on {
		opacity: 1;
	}

	#page10 .hero-inner {
		position: relative;
		z-index: 1;
		width: 1280px;
		max-width: 100%;
		margin: 0 auto;
		padding: 90px 0 0 30px;
	}

	#page10 .hero h1 {
		color: #4a4a4a;
		font-size: 46px;
		line-height: 70px;
		letter-spacing: 0.2em;
	}

	#page10 .hero-en {
		margin-top: 22px;
		color: #0098bc;
		font-size: 16px;
		line-height: 23px;
		letter-spacing: 0.05em;
	}

	#page10 .hero-badges {
		display: flex;
		gap: 10px;
		margin-top: 30px;
	}

	#page10 .badge {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		--ring: 7px;
		width: 200px;
		height: 200px;
		border-radius: 50%;
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.15em;
		line-height: 1.5;
		text-align: center;
	}

	#page10 .badge .price {
		margin-top: 4px;
		font-size: 19px;
		letter-spacing: 0;
		white-space: nowrap;
	}

	#page10 .badge .price strong {
		margin: 0 3px 0 2px;
		font-size: 33px;
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	#page10 .badge .lowest {
		margin-top: 4px;
		font-size: 22px;
		font-weight: 700;
		letter-spacing: 0.1em;
	}

	#page10 .badge.is-who p {
		font-size: 16px;
		letter-spacing: 0.1em;
		line-height: 32px;
	}

	#page10 .badge.is-who span {
		padding-bottom: 4px;
	}

	#page10 .badge .invite {
		margin-top: 4px;
		font-size: 17px;
		letter-spacing: 0.15em;
	}

	#page10 .ticker {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: 30px;
		width: max(calc(50% + 15px), 700px);
		height: 68px;
		margin-top: 46px;
		padding: 0 20px 0 max(30px, calc(50% - 610px));
		border-radius: 0 34px 34px 0;
		background: #e1edf3;
	}

	#page10 .ticker-view {
		position: relative;
		width: 535px;
		height: 30px;
	}

	#page10 .ticker-item {
		position: absolute;
		inset: 0;
		display: none;
		align-items: center;
		gap: 25px;
		color: #4a4a4a;
		font-size: 18px;
		letter-spacing: 0.1em;
	}

	#page10 .ticker-item.is-on {
		display: flex;
	}

	#page10 .ticker-item time {
		flex-shrink: 0;
		color: #888;
		letter-spacing: 0.02em;
	}

	#page10 .ticker-item span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-decoration: underline transparent;
		text-underline-offset: 4px;
		transition: text-decoration-color 0.2s;
	}

	#page10 .ticker-item:hover span {
		text-decoration-color: currentColor;
	}

	#page10 .ticker-nav {
		display: flex;
		gap: 12px;
	}

	#page10 .tick-prev,
	#page10 .tick-next {
		position: relative;
		width: 16px;
		height: 28px;
		border: 0;
		background: none;
		cursor: pointer;
	}

	#page10 .tick-prev::before,
	#page10 .tick-next::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 4px;
		width: 7px;
		height: 7px;
		border-top: 2px solid #999;
		border-right: 2px solid #999;
		transform: rotate(45deg);
		transition: border-color 0.2s;
	}

	#page10 .tick-prev::before {
		left: 6px;
		transform: rotate(-135deg);
	}

	#page10 .tick-prev:hover::before,
	#page10 .tick-next:hover::before {
		border-color: #30A5C1;
	}

	#page10 .news-more {
		width: 1280px;
		max-width: 100%;
		margin: 18px auto 0;
		padding-left: 30px;
	}

	#page10 .news-more a {
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-decoration: underline transparent;
		text-underline-offset: 4px;
		transition: text-decoration-color 0.2s;
	}

	#page10 .news-more a:hover {
		text-decoration-color: currentColor;
	}

	#page10 .news-more a::before {
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		margin-right: 14px;
		vertical-align: -1px;
		background:
			linear-gradient(#30A5C1, #30A5C1) 0 0 / 7px 7px no-repeat,
			linear-gradient(#30A5C1, #30A5C1) 100% 0 / 7px 7px no-repeat,
			linear-gradient(#30A5C1, #30A5C1) 0 100% / 7px 7px no-repeat,
			linear-gradient(#30A5C1, #30A5C1) 100% 100% / 7px 7px no-repeat;
	}

	#page10 .visit {
		position: relative;
		z-index: 0;
		padding: 66px 0 90px;
		background: #fff;
	}

	/* 下側の水彩（カンプ：不透明度30%）。左下中心の楕円で切り、左が高く右へ下がる上辺にする */
	#page10 .visit::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			radial-gradient(circle 70px at 3% calc(100% - 150px), rgba(255, 236, 160, 0.75), transparent),
			linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
			url("../images/page10/bg-watercolor.webp") center / cover;
		-webkit-mask: radial-gradient(ellipse 1700px 700px at 0 100%, #000 99.6%, transparent 100%);
		mask: radial-gradient(ellipse 1700px 700px at 0 100%, #000 99.6%, transparent 100%);
	}

	#page10 .visit-card {
		position: relative;
		width: 1100px;
		max-width: calc(100% - 60px);
		margin: 0 auto;
		padding: 72px 210px 50px 0;
		border: 10px solid transparent;
		border-radius: 47px;
		/* 枠：カンプの水彩グラデーション画像 */
		background:
			linear-gradient(#fff, #fff) padding-box,
			url("../images/page10/frame.webp") center / cover border-box;
	}

	#page10 .visit-copy {
		position: relative;
		z-index: 1;
	}

	#page10 .visit-copy .lead {
		color: #4a4a4a;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0.15em;
		line-height: 42px;
		text-align: center;
	}

	#page10 .visit-copy .lead span,
	#page10 .bubble span {
		background: linear-gradient(transparent 60%, #fcefa6 60%);
	}

	#page10 .visit-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-top: 32px;
	}

	#page10 .visit-actions>div {
		text-align: center;
	}

	#page10 .visit-actions>div+div {
		border-left: 1px solid #ddd;
	}

	#page10 .round {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70px;
		height: 70px;
		margin: 0 auto;
		border-radius: 50%;
	}

	#page10 .is-phone .round {
		background: #e5825a;
	}

	#page10 .is-phone .round img {
		width: 32px;
		height: 32px;
		object-fit: contain;
	}

	#page10 .is-line .round img {
		width: 70px;
		height: 70px;
	}

	#page10 .visit-actions .label {
		margin-top: 22px;
		text-align: center;
		color: #4a4a4a;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 22px;
		font-weight: 700;
		letter-spacing: 0.1em;
	}

	#page10 .tel {
		display: block;
		margin-top: 18px;
		color: #e5825a;
		font-size: 38px;
		font-weight: 600;
		letter-spacing: 0.05em;
		line-height: 1.1;
	}

	#page10 .tel small {
		margin-right: 6px;
		font-size: 18px;
	}

	#page10 .visit-actions .hours {
		margin-top: 6px;
		text-align: center;
		color: #e5825a;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.1em;
	}

	#page10 .visit-actions .btn {
		width: 285px;
		height: 60px;
		margin-top: 22px;
		font-size: 18px;
	}

	/* カード全高に広げ、吹き出しはカード上端基準（写真の読み込み有無で位置が変わらない） */
	#page10 .visit-person {
		position: absolute;
		top: 0;
		right: 66px;
		bottom: 0;
		z-index: 2;
		width: 257px;
		pointer-events: none;
	}

	#page10 .visit-person img {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	/* カンプ：吹き出しの上端はカード枠の上端より31px上 */
	#page10 .bubble {
		position: absolute;
		top: -41px;
		left: clamp(70px, calc(70px + (100vw - 1160px) / 16), 92px);
		width: clamp(260px, calc(260px + (100vw - 1160px) * 0.179), 321px);
		aspect-ratio: 321 / 269;
		padding-top: clamp(60px, calc(60px + (100vw - 1160px) / 24), 74px);
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: clamp(15px, calc(15px + (100vw - 1160px) / 113), 18px);
		font-weight: 700;
		letter-spacing: 0.05em;
		line-height: clamp(25px, calc(25px + (100vw - 1160px) / 40), 28px);
		text-align: center;
	}

	#page10 .jump {
		display: flex;
		justify-content: center;
		gap: min(40px, 3vw);
		margin-top: 93px;
		padding: 0 30px;
	}

	#page10 .jump a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 320px;
		height: 80px;
		padding: 0 40px 0 20px;
		border: 3px solid #30A5C1;
		border-radius: 40px;
		background: #fff;
		box-shadow: 0 5px 10px rgba(0, 98, 121, 0.2);
		color: #30A5C1;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: 0.1em;
		transition: background-color 0.4s, color 0.4s;
	}

	@media (hover: hover) and (pointer: fine) {
		#page10 .jump a:hover {
			background: #30A5C1;
			color: #fff;
		}
	}

	#page10 .jump svg {
		flex-shrink: 0;
		width: 30px;
		height: 28px;
	}

	#page10 .jump a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 26px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: rotate(45deg);
	}

	#page10 .about-photo {
		position: relative;
		width: 1390px;
		max-width: 100%;
		margin: 0 auto;
	}

	#page10 .about-photo-frame {
		border-radius: 30px;
	}

	#page10 .about-photo img {
		display: block;
		width: 100%;
		height: 425px;
		object-fit: cover;
		border-radius: 30px;
	}

	#page10 .about-title {
		position: absolute;
		top: 322px;
		left: 50%;
		width: 730px;
		padding: 38px 20px 40px;
		transform: translateX(-50%);
		border-top: 3px solid #30A5C1;
		border-bottom: 3px solid #30A5C1;
		background: #fff;
		text-align: center;
	}

	#page10 .about-title .en {
		font-size: 16px;
		text-align: center;
	}

	#page10 .about-title h2 {
		margin-top: 12px;
		font-size: 26px;
		line-height: 47px;
		letter-spacing: 0.2em;
	}

	#page10 .about-title h2 small {
		font-size: 15px;
		letter-spacing: 0.1em;
	}

	#page10 .about-body {
		position: relative;
		width: 1280px;
		max-width: calc(100% - 144px);
		margin: 175px auto 0;
		text-align: center;
	}

	#page10 .about-body h3 {
		color: #0098bc;
		font-size: 40px;
		line-height: 65px;
		letter-spacing: 0.15em;
	}

	#page10 .about-body p {
		margin-top: 34px;
		font-size: 18px;
		line-height: 50px;
		letter-spacing: 0.1em;
	}

	#page10 .float {
		position: absolute;
		object-fit: cover;
		border-radius: 50%;
	}

	#page10 .float.is-top {
		top: -58px;
		right: -72px;
		width: min(200px, 13.4vw);
		height: min(200px, 13.4vw);
	}

	#page10 .float.is-left {
		top: 99px;
		left: -72px;
		width: min(270px, 18vw);
		height: min(270px, 18vw);
	}

	#page10 .float.is-right {
		top: 200px;
		right: -60px;
		width: min(300px, 20vw);
		height: min(300px, 20vw);
	}

	#page10 .about-points {
		display: flex;
		justify-content: center;
		margin: 60px auto 0;
		list-style: none;
	}

	#page10 .about-points li {
		padding: 0 45px;
		border-left: 1px solid #ddd;
		text-align: center;
	}

	#page10 .about-points li:first-child {
		border-left: 0;
	}

	#page10 .about-points h4 {
		position: relative;
		z-index: 0;
		display: inline-block;
		color: #0098bc;
		font-size: 22px;
		line-height: 1.5;
		letter-spacing: 0.1em;
	}

	#page10 .about-points h4::before {
		content: "";
		position: absolute;
		top: -4px;
		left: -6px;
		z-index: -1;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: #fbf0b4;
	}

	#page10 .about-points p {
		margin-top: 18px;
		color: #4a4a4a;
		font-size: 16px;
		line-height: 30px;
		letter-spacing: 0.1em;
		text-align: center;
	}

	#page10 .about .center {
		margin-top: 60px;
	}

	#page10 .center .btn.is-wide {
		width: 680px;
	}

	#page10 .facilities {
		padding: 88px 0 93px;
		background:
			radial-gradient(circle at 96% 12%, rgba(205, 228, 242, 0.7), transparent 8%),
			radial-gradient(circle at 98% 22%, rgba(255, 238, 160, 0.7), transparent 7%),
			#fff;
	}

	#page10 .facility-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 380px));
		gap: 50px 40px;
		justify-content: center;
		padding: 0 30px;
		list-style: none;
	}

	#page10 .facility-list a {
		display: block;
		color: #4a4a4a;
	}

	#page10 .facility-photo {
		overflow: hidden;
		border-radius: 30px;
	}

	#page10 .facility-photo img {
		width: 100%;
		height: 253px;
		object-fit: cover;
		transition: transform 0.4s;
	}

	#page10 .facility-list a:hover .facility-photo img {
		transform: scale(1.2);
	}

	#page10 .facility-body {
		padding: 0 28px;
	}

	#page10 .facility-list h3 {
		margin-top: 28px;
		font-size: clamp(21px, 1.6vw, 24px);
		line-height: 1.5;
		letter-spacing: 0.15em;
	}

	#page10 .place {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 12px;
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0.1em;
	}

	#page10 .place::before {
		content: "";
		width: 18px;
		height: 18px;
		margin-left: 2px;
		border-radius: 50% 50% 50% 0;
		background: radial-gradient(circle, #fff 3px, transparent 3.5px), #f5b72c;
		transform: rotate(-45deg);
	}

	#page10 .facility-body p:not(.place) {
		margin-top: 14px;
		font-size: 16px;
		line-height: 30px;
		letter-spacing: 0.1em;
	}

	#page10 .facility-body .btn {
		display: flex;
		width: 100%;
		height: 56px;
		margin-top: 16px;
		font-size: 20px;
	}

	#page10 .for-residents {
		padding: 145px 0 0;
	}

	#page10 .resid-wave {
		height: 440px;
	}

	#page10 .point {
		display: grid;
		grid-template-columns: minmax(0, 600px) 1fr;
		gap: min(85px, 5.7vw);
		align-items: center;
		width: 1350px;
		max-width: 100%;
		margin: 0 auto;
	}

	#page10 .point+.point {
		margin-top: 15px;
	}

	#page10 .point.is-reverse {
		grid-template-columns: 1fr minmax(0, 600px);
	}

	#page10 .point.is-reverse figure {
		order: 2;
	}

	#page10 .point.is-reverse>div {
		padding-left: min(125px, 8.3vw);
	}

	#page10 .point figure {
		position: relative;
		margin: 0;
		padding: 20px;
	}

	#page10 .point figure::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 40px;
		background: radial-gradient(circle, #b9e0ec 1.5px, transparent 2px) 0 0 / 9px 9px;
	}

	#page10 .point img {
		position: relative;
		width: 100%;
		height: 380px;
		object-fit: cover;
		border: 10px solid #fff;
		border-radius: 30px;
		transform: rotate(-4deg);
	}

	#page10 .point.is-reverse img {
		transform: rotate(3deg);
	}

	#page10 .point .label {
		display: flex;
		align-items: center;
		gap: 10px;
		color: #0098bc;
		font-size: 16px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	#page10 .point .label::before {
		content: "";
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: #fbeeb0;
	}

	#page10 .point h3 {
		margin-top: 18px;
		color: #0098bc;
		font-size: clamp(28px, 2.4vw, 36px);
		line-height: 1.6;
		letter-spacing: 0.15em;
		text-align: left;
	}

	#page10 .point p:not(.label) {
		margin-top: 22px;
		font-size: 18px;
		line-height: 35px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	#page10 .for-residents .center {
		margin-top: 40px;
	}

	#page10 .fees {
		padding: 90px 0 92px;
	}

	/* カンプ：水彩画像の不透明度30%。下端の曲線は幅に比例させ、広い画面でも左端まで斜線が続くようにする */
	#page10 .resid-fees::before {
		--wash: rgba(255, 255, 255, 0.7);
		bottom: -190px;
		-webkit-mask: radial-gradient(100% 727px at 90% calc(100% + 309px), transparent 99.6%, #000 100%);
		mask: radial-gradient(100% 727px at 90% calc(100% + 309px), transparent 99.6%, #000 100%);
	}

	#page10 .fees::after {
		bottom: 7px;
		left: max(0px, calc(50% - 696px));
		width: 199px;
		height: 199px;
	}

	#page10 .fees-card {
		position: relative;
		width: 1210px;
		max-width: 100%;
		margin: 0 auto;
		padding: 100px 80px 70px;
		overflow: hidden;
		border-radius: 50px;
		background: #fff;
		box-shadow: 0 10px 30px rgba(80, 140, 170, 0.08);
	}

	#page10 .fees-card::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 318px;
		height: 257px;
		/* カンプ：dot_grade 画像・不透明度60%（角はカードの角丸で切る） */
		background: url("../images/hf/dot-grade.webp") center / cover no-repeat;
		opacity: 0.6;
	}

	#page10 .fees-card .sec-head {
		position: relative;
		margin-bottom: 60px;
	}

	#page10 .fee-boxes {
		display: grid;
		grid-template-columns: minmax(0, 420px) 90px minmax(0, 420px);
		justify-content: center;
		width: 1050px;
		max-width: 100%;
		margin: 0 auto 50px;
		padding: 50px 0 55px;
		border-radius: 30px;
		background: #ebf4f7;
	}

	#page10 .fee-name {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90px;
		border-radius: 10px;
		background: #2fa5c2;
		color: #fff;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0.15em;
	}

	#page10 .plus {
		position: relative;
		height: 90px;
	}

	#page10 .plus::before,
	#page10 .plus::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 26px;
		height: 3px;
		margin: -1.5px 0 0 -13px;
		background: #30A5C1;
	}

	#page10 .plus::after {
		transform: rotate(90deg);
	}

	#page10 .fee-price {
		margin-top: 30px;
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 22px;
		font-weight: 700;
		text-align: center;
	}

	#page10 .fee-price strong {
		margin-right: 2px;
		font-size: 34px;
		font-weight: 500;
		letter-spacing: 0.05em;
	}

	#page10 .fee-boxes p:not(.fee-name):not(.fee-price) {
		margin-top: 18px;
		color: #4a4a4a;
		font-size: 16px;
		line-height: 30px;
		letter-spacing: 0.1em;
		text-align: center;
	}

	#page10 .voices {
		padding: 0 0 90px;
	}

	#page10 .voice-main {
		display: grid;
		grid-template-columns: minmax(0, 518px) minmax(0, 550px);
		gap: min(60px, 4vw);
		align-items: center;
		justify-content: center;
		width: 1276px;
		max-width: 100%;
		margin: 0 auto;
		padding: 50px 40px;
		border-radius: 20px;
		background: #ebf4f7;
	}

	#page10 .voice-head {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	#page10 .voice-head img {
		flex-shrink: 0;
		width: clamp(76px, 6.7vw, 100px);
		height: clamp(76px, 6.7vw, 100px);
		object-fit: cover;
		border-radius: 50%;
		background: #fff;
	}

	#page10 .voice-main h3,
	#page10 .voice-list h3 {
		color: #0098bc;
		letter-spacing: 0.15em;
		text-align: left;
	}

	#page10 .voice-main h3 {
		font-size: clamp(22px, 1.87vw, 28px);
		line-height: 50px;
	}

	#page10 .voice-main p,
	#page10 .voice-list p {
		margin-top: 25px;
		color: #4a4a4a;
		font-size: 18px;
		line-height: 35px;
		letter-spacing: 0.1em;
	}

	#page10 .voice-main small,
	#page10 .voice-list small {
		display: block;
		margin-top: 25px;
		color: #4a4a4a;
		font-size: 16px;
		letter-spacing: 0.1em;
		text-align: right;
	}

	#page10 .voice-main figure {
		margin: 0;
	}

	#page10 .voice-main figure img {
		width: 100%;
		height: 370px;
		object-fit: cover;
	}

	#page10 .voice-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 11px;
		width: 1276px;
		max-width: 100%;
		margin: 20px auto 50px;
		list-style: none;
	}

	#page10 .voice-list li {
		padding: 30px 30px 28px;
		border-radius: 20px;
		background: #ebf4f7;
	}

	#page10 .voice-list .voice-head img {
		width: clamp(56px, 5vw, 76px);
		height: clamp(56px, 5vw, 76px);
	}

	#page10 .voice-list .voice-head {
		gap: 16px;
	}

	#page10 .voice-list h3 {
		font-size: clamp(20px, 1.53vw, 23px);
		line-height: 38px;
		letter-spacing: 0.1em;
	}

	#page10 .voice-list p {
		min-height: 70px;
	}

	#page10 .voice-list small {
		margin-top: 12px;
	}

	#page10 .photo-band {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		overflow: hidden;
	}

	#page10 .photo-band img {
		width: 100%;
		height: 427px;
		object-fit: cover;
	}

	#page10 .band-shape {
		height: 150px;
	}

	#page10 .staff {
		padding: 0 0 120px;
	}

	#page10 .staff .sec-head {
		position: relative;
		margin-top: -55px;
	}

	#page10 .staff-slider {
		position: relative;
		width: 1190px;
		max-width: calc(100% - 100px);
		margin: 0 auto;
	}

	#page10 .staff-track {
		display: flex;
		gap: 50px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	#page10 .staff-track::-webkit-scrollbar {
		display: none;
	}

	#page10 .staff-track article {
		flex: 0 0 260px;
		scroll-snap-align: start;
	}

	#page10 .staff-track a {
		display: block;
		color: #4a4a4a;
	}

	#page10 .staff-photo {
		position: relative;
		height: 275px;
		border-radius: 130px 130px 10px 10px;
		background: #ecf5f8;
	}

	#page10 .staff-photo img {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: auto;
		max-width: none;
		height: 260px;
		transform: translateX(-50%);
	}

	#page10 .interview {
		position: absolute;
		top: 10px;
		right: 15px;
		color: #0098bc;
		font-size: 11px;
		line-height: 1.2;
		text-align: center;
	}

	#page10 .interview strong {
		display: block;
		padding-bottom: 2px;
		border-bottom: 2px solid #0098bc;
		color: transparent;
		font-size: 36px;
		font-weight: 300;
		letter-spacing: 0.05em;
		-webkit-text-stroke: 1px #0098bc;
	}

	#page10 .staff-track h3 {
		min-height: 136px;
		margin-top: 28px;
		color: #0098bc;
		font-size: 20px;
		line-height: 34px;
		letter-spacing: 0.2em;
	}

	#page10 .role {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 12px;
		color: #888;
		font-size: 16px;
		letter-spacing: 0.1em;
	}

	#page10 .role::before {
		content: "";
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: #fbeeb0;
	}

	#page10 .name {
		margin-top: 14px;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	#page10 .name span {
		margin-left: 14px;
		color: #0098bc;
		font-size: 14px;
		letter-spacing: 0.03em;
	}

	#page10 .staff-track .btn {
		display: flex;
		width: 100%;
		height: 56px;
		margin-top: 16px;
		font-size: 20px;
	}

	#page10 .slide-prev,
	#page10 .slide-next {
		position: absolute;
		top: 146px;
		z-index: 2;
		width: 60px;
		height: 60px;
		border: 2px solid #30A5C1;
		border-radius: 50%;
		background: #30A5C1;
		color: #fff;
		cursor: pointer;
		transition: background-color 0.3s, color 0.3s;
	}

	#page10 .slide-prev:hover,
	#page10 .slide-next:hover {
		background: #fff;
		color: #30A5C1;
	}

	#page10 .slide-prev {
		left: -35px;
		transform: scaleX(-1);
	}

	#page10 .slide-next {
		right: -35px;
	}

	#page10 .slide-prev::before,
	#page10 .slide-next::before {
		content: "";
		position: absolute;
		top: 27px;
		left: 17px;
		width: 22px;
		height: 2px;
		background: currentColor;
	}

	#page10 .slide-prev::after,
	#page10 .slide-next::after {
		content: "";
		position: absolute;
		top: 22px;
		left: 27px;
		width: 10px;
		height: 10px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: rotate(45deg);
	}

	#page10 .staff-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 13px;
		margin: 40px 0 36px;
	}

	#page10 .staff-dots button {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #b4d6df;
		cursor: pointer;
	}

	#page10 .staff-dots button.is-on {
		width: 12px;
		height: 12px;
		background: #30A5C1;
	}

	#page10 .staff .center .btn {
		width: 400px;
	}

	#page10 .recruit {
		padding: 0;
		background:
			radial-gradient(circle at 3% 22%, rgba(205, 228, 242, 0.7), transparent 7%),
			radial-gradient(circle at 15% 22%, rgba(205, 228, 242, 0.6), transparent 8%),
			radial-gradient(circle at 5% 38%, rgba(255, 238, 160, 0.8), transparent 7%),
			#fff;
	}

	#page10 .recruit-visual {
		display: grid;
		grid-template-columns: 1fr 687px;
		width: 1280px;
		max-width: 100%;
		margin: 0 auto;
		padding-right: 50px;
	}

	#page10 .recruit-title {
		padding: 80px 50px 0 0;
		text-align: center;
	}

	#page10 .recruit-title .en {
		font-size: 28px;
		text-align: center;
		line-height: 1.3;
	}

	#page10 .recruit-title .en::after {
		content: "";
		display: block;
		width: 55px;
		height: 3px;
		margin: 12px auto 0;
		background: #30A5C1;
	}

	#page10 .vertical {
		display: inline-block;
		margin-top: 55px;
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 36px;
		font-weight: 700;
		letter-spacing: 0.25em;
		line-height: 2.15;
		text-align: left;
		writing-mode: vertical-rl;
	}

	#page10 .recruit-visual figure {
		position: relative;
		z-index: 0;
		margin: 0;
	}

	/* 写真の右下にずらした点（カンプ：dot_grade 画像・写真と同サイズで右18px・下17px） */
	#page10 .recruit-visual figure::after {
		content: "";
		position: absolute;
		top: 17px;
		left: 18px;
		right: -18px;
		bottom: -17px;
		z-index: -1;
		border-radius: 40px;
		background: url("../images/page10/dot-grade-photo.webp") center / cover no-repeat;
	}

	#page10 .recruit-visual img {
		width: 687px;
		height: 457px;
		object-fit: cover;
		border-radius: 40px;
	}

	#page10 .recruit-body {
		display: grid;
		grid-template-columns: minmax(0, 488px) minmax(560px, 1fr);
		/* 1500px未満は間隔を詰め、1280pxでもボタン2つが横並びに収まるようにする */
		gap: clamp(80px, calc(147px - (1500px - 100vw) * 0.3), 147px);
		align-items: center;
		width: 1330px;
		max-width: calc(100% - 60px);
		margin: 30px auto 0;
	}

	#page10 .recruit-body>img {
		width: 100%;
		height: 327px;
		object-fit: cover;
		border-radius: 40px;
	}

	#page10 .recruit-body h2 {
		color: #0098bc;
		font-size: clamp(30px, 2.4vw, 36px);
		line-height: 50px;
		letter-spacing: 0.15em;
	}

	#page10 .recruit-body p {
		margin-top: 25px;
		font-size: 18px;
		line-height: 50px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	#page10 .recruit-links {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		margin-top: 30px;
	}

	#page10 .recruit-links .btn {
		height: 80px;
		padding: 0 min(70px, 4.667vw) 0 min(60px, 4vw);
		font-size: 20px;
		white-space: nowrap;
	}

	#page10 .partner-links {
		display: flex;
		justify-content: center;
		gap: 60px;
		margin-top: 90px;
	}

	#page10 .partner-links a {
		position: relative;
		display: flex;
		align-items: center;
		width: 400px;
		height: 130px;
		padding: 0 70px 0 22px;
		overflow: hidden;
		border: 2px solid;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
		color: #4a4a4a;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.1em;
		transition: transform 0.3s;
	}

	#page10 .partner-links a::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 45px;
		background: currentColor;
	}

	#page10 .partner-links a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 20px;
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: rotate(45deg);
	}

	#page10 .partner-links a.is-company {
		border-color: #a8d05a;
	}

	#page10 .partner-links a.is-instagram {
		border-color: #f28cbc;
	}

	#page10 .partner-links a.is-company::before {
		background: #a8d05a;
	}

	#page10 .partner-links a.is-instagram::before {
		background: #f28cbc;
	}

	#page10 .partner-links a.is-company img {
		width: 75px;
		height: 75px;
		margin-right: 25px;
		object-fit: cover;
		border-radius: 50%;
	}

	#page10 .partner-links a.is-instagram img {
		width: 40px;
		height: 40px;
		margin: 0 32px 0 16px;
	}

	#page10 .partner-links a.is-instagram span {
		font-size: 20px;
		line-height: 1.6;
	}

	#page10 .partner-links em {
		display: block;
		color: #f07bb0;
		font-size: 24px;
		font-style: normal;
		font-weight: 500;
		letter-spacing: 0.1em;
	}

	#page10 .news {
		padding: 90px 0 0;
	}

	#page10 .news .sec-head.is-left {
		width: 1040px;
		max-width: 100%;
		margin-bottom: 17px;
		text-align: left;
	}

	#page10 .news .sec-head.is-left .en {
		text-align: left;
	}

	#page10 .news-list {
		width: 1040px;
		max-width: 100%;
		margin: 0 auto;
		list-style: none;
	}

	#page10 .news-list a {
		display: grid;
		grid-template-columns: 1fr 160px;
		gap: 40px;
		align-items: center;
		padding: 20px 0;
		color: #4a4a4a;
	}

	#page10 .news-text {
		min-width: 0;
	}

	#page10 .news-meta {
		display: flex;
		align-items: center;
		gap: 28px;
	}

	#page10 .news-meta time {
		color: #888;
		font-size: 18px;
		letter-spacing: 0.05em;
	}

	#page10 .news-meta em {
		padding: 3px 14px;
		border-radius: 15px;
		background: #2fa5c2;
		color: #fff;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 15px;
		font-style: normal;
		letter-spacing: 0.05em;
	}

	#page10 .news-title {
		margin-top: 14px;
		overflow: hidden;
		font-size: 18px;
		letter-spacing: 0.1em;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#page10 .news-title span {
		text-decoration: underline transparent;
		text-underline-offset: 5px;
		transition: text-decoration-color 0.3s;
	}

	#page10 .news-list a:hover .news-title span {
		text-decoration-color: currentColor;
	}

	#page10 .news-thumb {
		width: 160px;
		height: 120px;
		overflow: hidden;
		border-radius: 10px;
		transition: border-radius 0.3s;
	}

	#page10 .news-list a:hover .news-thumb {
		border-radius: 60px;
	}

	#page10 .news-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#page10 .news .center {
		margin-top: 30px;
	}

	#page10 .news .center .btn {
		width: 515px;
	}

	#page10 .instagram {
		padding: 110px 0 90px;
	}

	#page10 .ig-head {
		display: flex;
		align-items: center;
		width: 1280px;
		max-width: 100%;
		margin: 0 auto 55px;
		padding-left: 100px;
		color: inherit;
		text-decoration: none;
	}

	#page10 .ig-head img {
		width: 40px;
		height: 40px;
		margin-right: 25px;
		object-fit: contain;
	}

	#page10 .ig-head p {
		color: #333;
		font-size: 40px;
		letter-spacing: 0.1em;
		line-height: 1;
	}

	#page10 .ig-head span {
		margin-left: 40px;
		color: #999;
		font-size: 26px;
		letter-spacing: 0.05em;
	}

	#page10 .ig-view {
		overflow: hidden;
	}

	/* Smash Balloon の見出し・ボタンは使わず、上の .ig-head と写真のループだけを出す */
	#page10 .instagram .sb_instagram_header,
	#page10 .instagram #sbi_load,
	#page10 .instagram .sbi_hover_top {
		display: none !important;
	}

	#page10 .instagram .sbi_playbtn,
	#page10 .instagram .sbi_lightbox_carousel_icon {
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		position: absolute !important;
	}

	#page10 .instagram #sb_instagram {
		width: 100% !important;
		padding: 0 !important;
	}

	#page10 .instagram #sbi_images {
		display: flex !important;
		flex-wrap: nowrap !important;
		width: max-content !important;
		margin-left: -20px;
		padding: 0 !important;
	}

	#page10 .instagram #sbi_images.is-loop {
		animation: ig-loop 40s linear infinite;
	}

	#page10 .instagram .sbi_item {
		flex: 0 0 240px;
		width: 240px !important;
		margin: 0 20px 0 0 !important;
		padding: 0 !important;
	}

	#page10 .instagram .sbi_photo_wrap,
	#page10 .instagram .sbi_photo {
		display: block;
		width: 240px !important;
		height: 240px !important;
	}

	#page10 .instagram .sbi_photo img {
		display: block;
		width: 240px !important;
		height: 240px !important;
		object-fit: cover;
	}
}

/*SMP*/
@media only screen and (max-width: 1024px) {
	#page10 br.pc {
		display: none;
	}

	#page10 .sec-head .en {
		font-size: 11px;
		line-height: 1.5;
	}

	#page10 .sec-head h2 {
		margin-top: 8px;
		font-size: 20px;
		line-height: 1.5;
		letter-spacing: 0.15em;
	}

	#page10 .sec-head h3 {
		margin-top: 20px;
		font-size: 17px;
		line-height: 32px;
		letter-spacing: 0.15em;
	}

	#page10 .sec-head p:not(.en) {
		margin-top: 22px;
		padding: 0 30px;
		font-size: 14px;
		line-height: 30px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	#page10 .sec-head h3+p:not(.en) {
		margin-top: 12px;
	}

	#page10 .sec-head {
		margin-bottom: 32px;
	}

	#page10 .btn::after {
		right: 22px;
	}

	#page10 .center .btn {
		min-width: 295px;
		height: 50px;
		padding: 0 44px 0 30px;
		font-size: 15px;
	}

	#page10 .hero {
		position: relative;
		background:
			radial-gradient(circle at 3% 58%, rgba(255, 238, 160, 0.85), transparent 13%),
			radial-gradient(circle at 12% 45%, rgba(205, 228, 242, 0.7), transparent 16%),
			#fff;
	}

	#page10 .hero-photo {
		position: relative;
		height: 342px;
		margin-left: 20px;
	}

	#page10 .hero-photo::before {
		content: "";
		position: absolute;
		top: 8px;
		left: -8px;
		right: 0;
		bottom: -8px;
		border-radius: 175px 0 0 175px;
		background: radial-gradient(circle, #c3e4ee 1px, transparent 1.4px) 0 0 / 6px 6px;
	}

	#page10 .hero-slide {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		border-radius: 171px 0 0 171px;
		opacity: 0;
	}

	#page10 .hero-slide.is-on {
		opacity: 1;
	}

	#page10 .hero-inner {
		position: relative;
		padding: 25px 16px 0 33px;
	}

	#page10 .hero h1 {
		color: #4a4a4a;
		font-size: 22px;
		line-height: 40px;
		letter-spacing: 0.18em;
		white-space: nowrap;
	}

	#page10 .hero-en {
		margin-top: 10px;
		color: #0098bc;
		font-size: 10px;
		letter-spacing: 0.05em;
	}

	#page10 .hero-badges {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin: 28px 0 0 -17px;
	}

	#page10 .badge {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		--ring: 5px;
		width: 140px;
		height: 140px;
		border-radius: 50%;
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.15em;
		line-height: 1.6;
		text-align: center;
	}

	#page10 .badge .price {
		margin-top: 3px;
		font-size: 13px;
		letter-spacing: 0;
		white-space: nowrap;
	}

	#page10 .badge .price strong {
		margin: 0 2px;
		font-size: 23px;
		letter-spacing: 0.02em;
	}

	#page10 .badge .lowest {
		margin-top: 2px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.1em;
	}

	#page10 .badge.is-who p {
		font-size: 11.5px;
		letter-spacing: 0.1em;
		line-height: 22px;
	}

	#page10 .badge.is-who span {
		padding-bottom: 3px;
	}

	#page10 .badge .invite {
		margin-top: 3px;
		font-size: 12px;
		letter-spacing: 0.15em;
	}

	#page10 .ticker {
		display: flex;
		align-items: center;
		gap: 12px;
		height: 74px;
		margin-top: 20px;
		padding: 0 18px 0 27px;
		background: #e1edf3;
	}

	#page10 .ticker-view {
		position: relative;
		flex: 1;
		min-width: 0;
		height: 50px;
	}

	#page10 .ticker-item {
		position: absolute;
		inset: 0;
		display: none;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		color: #4a4a4a;
		font-size: 14px;
		letter-spacing: 0.05em;
	}

	#page10 .ticker-item.is-on {
		display: flex;
	}

	#page10 .ticker-item time {
		color: #888;
		font-size: 12px;
	}

	#page10 .ticker-item span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#page10 .ticker-nav {
		display: flex;
		gap: 10px;
	}

	#page10 .tick-prev,
	#page10 .tick-next {
		position: relative;
		width: 16px;
		height: 28px;
		border: 0;
		background: none;
	}

	#page10 .tick-prev::before,
	#page10 .tick-next::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 3px;
		width: 8px;
		height: 8px;
		border-top: 2px solid #30A5C1;
		border-right: 2px solid #30A5C1;
		transform: rotate(45deg);
	}

	#page10 .tick-prev::before {
		left: 6px;
		transform: rotate(-135deg);
	}

	#page10 .news-more {
		margin: 16px 0 0 26px;
	}

	#page10 .news-more a {
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.1em;
	}

	#page10 .news-more a::before {
		content: "";
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-right: 9px;
		vertical-align: -1px;
		background:
			linear-gradient(#30A5C1, #30A5C1) 0 0 / 6px 6px no-repeat,
			linear-gradient(#30A5C1, #30A5C1) 100% 0 / 6px 6px no-repeat,
			linear-gradient(#30A5C1, #30A5C1) 0 100% / 6px 6px no-repeat,
			linear-gradient(#30A5C1, #30A5C1) 100% 100% / 6px 6px no-repeat;
	}

	#page10 .visit {
		position: relative;
		z-index: 0;
		padding: 50px 0 45px;
		background: #fff;
	}

	/* カード下半分〜ボタン3つの背景に水彩（カンプ：不透明度40%） */
	#page10 .visit::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
			url("../images/page10/bg-watercolor.webp") center / cover;
		-webkit-mask: radial-gradient(ellipse 800px 560px at 0 100%, #000 99.5%, transparent 100%);
		mask: radial-gradient(ellipse 800px 560px at 0 100%, #000 99.5%, transparent 100%);
	}

	#page10 .visit-card {
		position: relative;
		margin: 0 8px;
		padding: 18px 0 0;
		overflow: hidden;
		border: 7.5px solid transparent;
		border-radius: 35px;
		background:
			linear-gradient(#fff, #fff) padding-box,
			url("../images/page10/frame.webp") center / cover border-box;
	}

	#page10 .visit-copy .lead {
		color: #4a4a4a;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.15em;
		line-height: 26px;
		text-align: center;
		padding: 0 38px;
	}

	#page10 .visit-copy .lead span,
	#page10 .bubble span {
		background: linear-gradient(transparent 60%, #fcefa6 60%);
	}

	#page10 .visit-actions>div {
		position: relative;
		margin: 45px 28px 0;
		padding: 30px 10px 22px;
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		text-align: center;
	}

	#page10 .visit-actions>div+div {
		margin-top: 38px;
	}

	#page10 .round {
		position: absolute;
		top: -21px;
		left: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin-left: -20px;
		border-radius: 50%;
	}

	#page10 .is-phone .round {
		background: #e5825a;
	}

	#page10 .is-phone .round img {
		width: 18px;
		height: 18px;
		object-fit: contain;
	}

	#page10 .is-line .round img {
		width: 40px;
		height: 40px;
	}

	#page10 .visit-actions .label {
		color: #4a4a4a;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-align: center;
	}

	#page10 .tel {
		display: block;
		margin-top: 10px;
		color: #e5825a;
		font-size: 22px;
		font-weight: 600;
		letter-spacing: 0.05em;
		line-height: 1.2;
	}

	#page10 .tel small {
		margin-right: 4px;
		font-size: 11px;
	}

	#page10 .visit-actions .hours {
		margin-top: 2px;
		color: #e5825a;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-align: center;
	}

	#page10 .visit-actions .btn {
		width: 240px;
		height: 50px;
		margin-top: 14px;
		font-size: 14px;
	}

	#page10 .visit-person {
		position: relative;
		height: 185px;
		margin-top: 12px;
	}

	#page10 .visit-person img {
		position: absolute;
		bottom: 0;
		left: 60px;
		width: 148px;
	}

	#page10 .bubble {
		position: absolute;
		top: -26px;
		right: 18px;
		z-index: 1;
		width: 178px;
		aspect-ratio: 321 / 269;
		padding-top: 40px;
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 10.5px;
		font-weight: 700;
		line-height: 18px;
		text-align: center;
	}

	/* スマホ：吹き出しの上端とLINEボタンの間は約9pxしかないため、バウンドの高さだけ小さく（-5px / -2.5px）。
	   2秒・ease-in-out・40%/60% のリズムはPCと同じ。静止位置は変えない */
	#page10.is-anim .bubble {
		animation-name: bound-sp;
	}

	@keyframes bound-sp {

		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}

		40% {
			transform: translateY(-5px);
		}

		60% {
			transform: translateY(-2.5px);
		}
	}

	#page10 .jump {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		margin-top: 50px;
	}

	#page10 .jump a {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		width: 240px;
		height: 50px;
		padding: 0 30px 0 18px;
		border: 3px solid #30A5C1;
		border-radius: 25px;
		background: #fff;
		box-shadow: 0 4px 8px rgba(0, 98, 121, 0.2);
		color: #30A5C1;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.1em;
	}

	#page10 .jump a span {
		flex: 1;
		text-align: center;
	}

	#page10 .jump svg {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
	}

	#page10 .jump a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 17px;
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: rotate(45deg);
	}

	#page10 .about-photo {
		position: relative;
		padding-bottom: 110px;
	}

	#page10 .about-photo-frame {
		border-radius: 20px;
	}

	#page10 .about-photo img {
		display: block;
		width: 100%;
		height: 200px;
		object-fit: cover;
		border-radius: 20px;
	}

	#page10 .about-title {
		position: absolute;
		top: 170px;
		left: 28px;
		right: 28px;
		padding: 18px 10px 28px;
		border-top: 2px solid #30A5C1;
		border-bottom: 2px solid #30A5C1;
		background: #fff;
		text-align: center;
	}

	#page10 .about-title .en {
		font-size: 11px;
		text-align: center;
	}

	#page10 .about-title h2 {
		margin-top: 6px;
		font-size: 18px;
		line-height: 33px;
		letter-spacing: 0.15em;
	}

	#page10 .about-title h2 small {
		font-size: 11px;
		letter-spacing: 0.05em;
	}

	#page10 .about-body {
		position: relative;
		margin-top: 40px;
		padding: 0 30px 290px;
	}

	#page10 .about-body h3 {
		color: #0098bc;
		font-size: 18px;
		line-height: 32px;
		letter-spacing: 0.15em;
		text-align: center;
	}

	#page10 .about-body p {
		margin-top: 22px;
		font-size: 14px;
		line-height: 30px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	#page10 .float {
		position: absolute;
		object-fit: cover;
		border-radius: 50%;
	}

	#page10 .float.is-top {
		right: 12px;
		bottom: 180px;
		width: 100px;
		height: 100px;
	}

	#page10 .float.is-left {
		left: -5px;
		bottom: 60px;
		width: 150px;
		height: 150px;
	}

	/* 点線の輪はカンプどおり右下側の半分だけ（右・下の枠線のみ色付け）。写真の位置は変えず外側に描く */
	#page10 .float.is-right {
		left: 166px;
		bottom: -6px;
		box-sizing: content-box;
		width: 175px;
		height: 175px;
		padding: 3px;
		border: 3px dotted transparent;
		border-right-color: #a9d9e8;
		border-bottom-color: #a9d9e8;
	}

	#page10 .about-points {
		width: 270px;
		margin: 40px auto 0;
		list-style: none;
	}

	#page10 .about-points li {
		padding: 26px 0 22px;
		border-top: 1px solid #e4e4e4;
		text-align: center;
	}

	#page10 .about-points li:first-child {
		padding-top: 0;
		border-top: 0;
	}

	#page10 .about-points h4 {
		position: relative;
		z-index: 0;
		display: inline-block;
		color: #0098bc;
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: 0.1em;
	}

	#page10 .about-points h4::before {
		content: "";
		position: absolute;
		top: -4px;
		left: -8px;
		z-index: -1;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fbf0b4;
	}

	#page10 .about-points p {
		margin-top: 12px;
		color: #4a4a4a;
		font-size: 13px;
		line-height: 23px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	#page10 .about-points br {
		display: none;
	}

	#page10 .about .center {
		margin-top: 12px;
	}

	#page10 .center .btn.is-wide {
		width: calc(100% - 4px);
		padding: 0 30px 0 10px;
		font-size: 13px;
		letter-spacing: 0.08em;
	}

	#page10 .about .center .btn::after {
		right: 14px;
	}

	#page10 .facilities {
		padding: 55px 0 50px;
		background:
			radial-gradient(circle 90px at 70% 30px, rgba(205, 228, 242, 0.7), transparent),
			radial-gradient(circle 60px at 98% 90px, rgba(255, 238, 160, 0.8), transparent),
			#fff;
	}

	#page10 .facility-list {
		display: grid;
		gap: 30px;
		justify-items: center;
		list-style: none;
	}

	#page10 .facility-list li {
		width: 300px;
	}

	#page10 .facility-list a {
		display: block;
		color: #4a4a4a;
	}

	#page10 .facility-photo {
		overflow: hidden;
		border-radius: 20px;
	}

	#page10 .facility-photo img {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	#page10 .facility-body {
		padding: 0 15px;
	}

	#page10 .facility-list h3 {
		margin-top: 20px;
		font-size: 17px;
		line-height: 1.5;
		letter-spacing: 0.15em;
	}

	#page10 .place {
		display: flex;
		align-items: center;
		gap: 7px;
		margin-top: 8px;
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.1em;
	}

	#page10 .place::before {
		content: "";
		width: 13px;
		height: 13px;
		margin-left: 2px;
		border-radius: 50% 50% 50% 0;
		background: radial-gradient(circle, #fff 2px, transparent 2.5px), #f5b72c;
		transform: rotate(-45deg);
	}

	#page10 .facility-body p:not(.place) {
		margin-top: 10px;
		font-size: 14px;
		line-height: 23.5px;
		letter-spacing: 0.1em;
	}

	#page10 .facility-body .btn {
		display: flex;
		width: 240px;
		height: 40px;
		margin: 16px auto 0;
		font-size: 15px;
	}

	#page10 .for-residents {
		padding: 65px 0 0;
	}

	#page10 .resid-wave {
		height: 140px;
	}

	#page10 .point {
		width: 300px;
		margin: 0 auto;
	}

	#page10 .point+.point {
		margin-top: 42px;
	}

	#page10 .point figure {
		position: relative;
		margin: 0;
		padding: 8px 0;
	}

	#page10 .point figure::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 25px;
		background: radial-gradient(circle, #b9e0ec 1px, transparent 1.4px) 0 0 / 6px 6px;
	}

	#page10 .point img {
		position: relative;
		width: 100%;
		height: 200px;
		object-fit: cover;
		border: 5px solid #fff;
		border-radius: 20px;
		transform: rotate(-4deg);
	}

	#page10 .point.is-reverse img {
		transform: rotate(3deg);
	}

	#page10 .point>div {
		padding: 0 15px;
	}

	#page10 .point .label {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: 22px;
		color: #0098bc;
		font-size: 11px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	#page10 .point .label::before {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fbeeb0;
	}

	#page10 .point h3 {
		margin-top: 8px;
		color: #0098bc;
		font-size: 18px;
		line-height: 32px;
		letter-spacing: 0.15em;
		text-align: left;
	}

	#page10 .point p:not(.label) {
		margin-top: 8px;
		font-size: 14px;
		line-height: 23.5px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	#page10 .for-residents .center {
		margin-top: 32px;
	}

	#page10 .fees {
		padding: 50px 0 20px;
	}

	/* カンプ：水彩画像の不透明度50%。下端の曲線は幅に比例 */
	#page10 .resid-fees::before {
		--wash: rgba(255, 255, 255, 0.5);
		bottom: -95px;
		-webkit-mask: radial-gradient(112.5% 323px at 100% calc(100% + 148px), transparent 99.5%, #000 100%);
		mask: radial-gradient(112.5% 323px at 100% calc(100% + 148px), transparent 99.5%, #000 100%);
	}

	#page10 .fees::after {
		bottom: -60px;
		left: -32px;
		width: 99.5px;
		height: 99.5px;
	}

	#page10 .fees-card {
		position: relative;
		margin: 0 12px;
		padding: 58px 0 30px;
		overflow: hidden;
		border-radius: 25px;
		background: #fff;
		box-shadow: 0 6px 20px rgba(80, 140, 170, 0.08);
	}

	#page10 .fees-card::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 159px;
		height: 128.5px;
		background: url("../images/hf/dot-grade.webp") center / cover no-repeat;
		opacity: 0.6;
	}

	#page10 .fees-card .sec-head {
		position: relative;
		margin-bottom: 30px;
	}

	#page10 .fees-card .sec-head p:not(.en) {
		padding: 0 18px;
	}

	#page10 .fee-boxes {
		margin: 0 18px 30px;
		padding: 25px 30px 30px;
		border-radius: 15px;
		background: #ebf4f7;
	}

	#page10 .fee-name {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		border-radius: 7px;
		background: #2fa5c2;
		color: #fff;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.15em;
	}

	#page10 .plus {
		position: relative;
		display: block;
		height: 50px;
	}

	#page10 .plus::before,
	#page10 .plus::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 2px;
		margin: -1px 0 0 -8px;
		background: #30A5C1;
	}

	#page10 .plus::after {
		transform: rotate(90deg);
	}

	#page10 .fee-price {
		margin-top: 18px;
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 12px;
		font-weight: 700;
		text-align: center;
	}

	#page10 .fee-price strong {
		margin-right: 2px;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0.05em;
	}

	#page10 .fee-boxes p:not(.fee-name):not(.fee-price) {
		margin-top: 10px;
		color: #4a4a4a;
		font-size: 12px;
		line-height: 21px;
		letter-spacing: 0.1em;
		text-align: center;
	}

	#page10 .fees .center .btn {
		width: 310px;
	}

	#page10 .voices {
		padding: 65px 0 55px;
	}

	#page10 .voice-main,
	#page10 .voice-list li {
		margin: 0 3px;
		padding: 30px 37px;
		border-radius: 10px;
		background: #ebf4f7;
	}

	#page10 .voice-list {
		margin: 5px 0 30px;
		list-style: none;
	}

	#page10 .voice-list li+li {
		margin-top: 5px;
	}

	#page10 .voice-head {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	#page10 .voice-head img {
		flex-shrink: 0;
		width: 60px;
		height: 60px;
		object-fit: cover;
		border-radius: 50%;
		background: #fff;
	}

	#page10 .voice-main h3,
	#page10 .voice-list h3 {
		color: #0098bc;
		font-size: 17px;
		line-height: 32px;
		letter-spacing: 0.15em;
		text-align: left;
	}

	#page10 .voice-main p,
	#page10 .voice-list p {
		margin-top: 12px;
		color: #4a4a4a;
		font-size: 13px;
		line-height: 23.5px;
		letter-spacing: 0.1em;
	}

	/* 「60代女性 / 要介護３（…）」は改行しない（狭い端末では文字を少し縮めて1行に収める） */
	#page10 .voice-main small,
	#page10 .voice-list small {
		display: block;
		margin-top: 14px;
		color: #4a4a4a;
		font-size: min(13px, 3.2vw);
		letter-spacing: 0.08em;
		text-align: right;
		white-space: nowrap;
	}

	#page10 .voice-main figure {
		margin: 14px 0 0;
	}

	#page10 .voice-main figure img {
		width: 100%;
		height: 215px;
		object-fit: cover;
	}

	#page10 .photo-band {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		overflow: hidden;
	}

	#page10 .photo-band img {
		width: 100%;
		height: 190px;
		object-fit: cover;
	}

	#page10 .band-shape {
		left: -12%;
		width: 124%;
		height: 60px;
	}

	#page10 .staff {
		padding: 0 0 50px;
	}

	#page10 .staff .sec-head {
		position: relative;
		margin-top: -35px;
	}

	#page10 .staff-slider {
		position: relative;
	}

	#page10 .staff-track {
		display: flex;
		gap: 25px;
		padding: 0 15px;
		overflow-x: auto;
		scroll-padding: 0 15px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	#page10 .staff-track::-webkit-scrollbar {
		display: none;
	}

	#page10 .staff-track article {
		flex: 0 0 172px;
		scroll-snap-align: start;
	}

	#page10 .staff-track a {
		display: block;
		color: #4a4a4a;
	}

	#page10 .staff-photo {
		position: relative;
		height: 180px;
		border-radius: 86px 86px 7px 7px;
		background: #ecf5f8;
	}

	#page10 .staff-photo img {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: auto;
		max-width: none;
		height: 170px;
		transform: translateX(-50%);
	}

	#page10 .interview {
		position: absolute;
		top: 8px;
		right: 10px;
		color: #0098bc;
		font-size: 6px;
		line-height: 1.2;
		text-align: center;
	}

	#page10 .interview strong {
		display: block;
		padding-bottom: 1px;
		border-bottom: 2px solid #0098bc;
		color: transparent;
		font-size: 22px;
		font-weight: 300;
		-webkit-text-stroke: 0.8px #0098bc;
	}

	#page10 .staff-track h3 {
		min-height: 96px;
		margin-top: 20px;
		color: #0098bc;
		font-size: 15px;
		line-height: 24px;
		letter-spacing: 0.1em;
	}

	#page10 .role {
		display: flex;
		align-items: center;
		gap: 5px;
		margin-top: 14px;
		color: #888;
		font-size: 11px;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	#page10 .role::before {
		content: "";
		flex-shrink: 0;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fbeeb0;
	}

	#page10 .name {
		margin-top: 6px;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.05em;
	}

	#page10 .name span {
		display: block;
		margin-top: 2px;
		color: #0098bc;
		font-size: 11px;
		letter-spacing: 0.05em;
	}

	#page10 .staff-track .btn {
		display: flex;
		width: 100%;
		height: 40px;
		margin: 16px 0 16px;
		font-size: 15px;
	}

	#page10 .staff-track .btn::after {
		right: 26px;
	}

	#page10 .slide-prev,
	#page10 .slide-next {
		position: absolute;
		top: 105px;
		z-index: 2;
		width: 30px;
		height: 30px;
		border: 0;
		border-radius: 50%;
		background: #30A5C1;
	}

	#page10 .slide-prev {
		left: 0;
		transform: scaleX(-1);
	}

	#page10 .slide-next {
		right: 0;
	}

	#page10 .slide-prev::before,
	#page10 .slide-next::before {
		content: "";
		position: absolute;
		top: 14px;
		left: 8px;
		width: 13px;
		height: 1.5px;
		background: #fff;
	}

	#page10 .slide-prev::after,
	#page10 .slide-next::after {
		content: "";
		position: absolute;
		top: 11px;
		left: 14px;
		width: 6px;
		height: 6px;
		border-top: 1.5px solid #fff;
		border-right: 1.5px solid #fff;
		transform: rotate(45deg);
	}

	#page10 .staff-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin: 20px 0 28px;
	}

	#page10 .staff-dots button {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #b4d6df;
	}

	#page10 .staff-dots button.is-on {
		width: 12px;
		height: 12px;
		background: #30A5C1;
	}

	#page10 .staff .center .btn {
		width: 300px;
	}

	#page10 .recruit {
		padding: 30px 0 0;
		background:
			radial-gradient(circle 90px at 20% 60px, rgba(205, 228, 242, 0.7), transparent),
			radial-gradient(circle 50px at 0 220px, rgba(255, 238, 160, 0.8), transparent),
			radial-gradient(circle 50px at 100% 900px, rgba(255, 238, 160, 0.8), transparent),
			#fff;
	}

	#page10 .recruit-visual {
		display: grid;
		grid-template-columns: 1fr 200px;
		align-items: start;
	}

	#page10 .recruit-title {
		padding-top: 10px;
		text-align: center;
	}

	#page10 .recruit-title .en {
		font-size: 17px;
		line-height: 1.3;
		text-align: center;
	}

	#page10 .recruit-title .en::after {
		content: "";
		display: block;
		width: 28px;
		height: 2px;
		margin: 8px auto 0;
		background: #30A5C1;
	}

	#page10 .vertical {
		display: inline-block;
		margin-top: 40px;
		color: #0098bc;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 0.2em;
		line-height: 2.1;
		text-align: left;
		writing-mode: vertical-rl;
	}

	#page10 .recruit-visual figure {
		position: relative;
		z-index: 0;
		margin: 0;
	}

	#page10 .recruit-visual figure::after {
		content: "";
		position: absolute;
		top: 8px;
		left: 8px;
		right: -6px;
		bottom: -6px;
		z-index: -1;
		border-radius: 20px 0 0 20px;
		background: radial-gradient(circle, #efe9b4 1px, transparent 1.4px) 0 0 / 6px 6px;
	}

	#page10 .recruit-visual img {
		width: 200px;
		height: 137px;
		object-fit: cover;
		border-radius: 20px 0 0 20px;
	}

	/* カンプ幅（400px）のまま中央寄せ。幅の広い端末でも左に寄らない */
	#page10 .recruit-body {
		max-width: 400px;
		margin: 22px auto 0;
		padding: 0 30px;
	}

	#page10 .recruit-body>img {
		width: 300px;
		height: 200px;
		object-fit: cover;
		border-radius: 20px;
	}

	#page10 .recruit-body h2 {
		margin-top: 36px;
		color: #0098bc;
		font-size: 17px;
		line-height: 32px;
		letter-spacing: 0.15em;
	}

	#page10 .recruit-body p {
		margin-top: 20px;
		font-size: 14px;
		line-height: 30px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	#page10 .recruit-links {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 25px;
		margin-top: 25px;
	}

	#page10 .recruit-links .btn {
		width: 247px;
		height: 50px;
		font-size: 15px;
	}

	#page10 .partner-links {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 25px;
		margin-top: 45px;
	}

	#page10 .partner-links a {
		position: relative;
		display: flex;
		align-items: center;
		width: 250px;
		height: 80px;
		padding: 0 35px 0 12px;
		overflow: hidden;
		border: 2px solid;
		border-radius: 7px;
		background: #fff;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
		color: #4a4a4a;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 17px;
		font-weight: 500;
		letter-spacing: 0.1em;
	}

	#page10 .partner-links a::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 25px;
	}

	#page10 .partner-links a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		width: 6px;
		height: 6px;
		margin-top: -3px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: rotate(45deg);
	}

	#page10 .partner-links a.is-company {
		border-color: #a8d05a;
	}

	#page10 .partner-links a.is-instagram {
		border-color: #f28cbc;
	}

	#page10 .partner-links a.is-company::before {
		background: #a8d05a;
	}

	#page10 .partner-links a.is-instagram::before {
		background: #f28cbc;
	}

	#page10 .partner-links a.is-company img {
		width: 47px;
		height: 47px;
		margin-right: 12px;
		object-fit: cover;
		border-radius: 50%;
	}

	#page10 .partner-links a.is-instagram img {
		width: 30px;
		height: 30px;
		margin: 0 18px 0 10px;
	}

	#page10 .partner-links a.is-instagram span {
		font-size: 15px;
		line-height: 1.6;
	}

	#page10 .partner-links em {
		display: block;
		color: #f07bb0;
		font-size: 17px;
		font-style: normal;
		letter-spacing: 0.1em;
	}

	#page10 .news {
		padding: 60px 0 0;
	}

	#page10 .news .sec-head.is-left {
		margin-bottom: 18px;
		text-align: center;
	}

	#page10 .news-list {
		padding: 0 13px 0 14px;
		list-style: none;
	}

	#page10 .news-list a {
		display: grid;
		grid-template-columns: 1fr 137px;
		gap: 25px;
		align-items: start;
		padding: 15px 0;
		color: #4a4a4a;
	}

	#page10 .news-text {
		min-width: 0;
	}

	#page10 .news-meta {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	#page10 .news-meta time {
		color: #888;
		font-size: 11px;
		letter-spacing: 0.05em;
	}

	#page10 .news-meta em {
		padding: 1px 8px;
		border-radius: 10px;
		background: #2fa5c2;
		color: #fff;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 12px;
		font-style: normal;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	#page10 .news-title {
		display: -webkit-box;
		margin-top: 12px;
		overflow: hidden;
		font-size: 15px;
		line-height: 23.5px;
		letter-spacing: 0.1em;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	#page10 .news-thumb {
		width: 137px;
		height: 102px;
		overflow: hidden;
		border-radius: 5px;
	}

	#page10 .news-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#page10 .news .center {
		margin-top: 15px;
	}

	#page10 .news .center .btn {
		width: 340px;
		padding: 0 36px 0 20px;
		font-size: 14px;
		letter-spacing: 0.08em;
	}

	#page10 .instagram {
		padding: 60px 0 50px;
	}

	#page10 .ig-head {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		margin-bottom: 30px;
		padding-left: 0;
		color: inherit;
		text-decoration: none;
	}

	#page10 .ig-head img {
		width: 25px;
		height: 25px;
		margin-right: 14px;
		object-fit: contain;
	}

	#page10 .ig-head p {
		color: #333;
		font-size: 25px;
		letter-spacing: 0.1em;
		line-height: 1;
	}

	#page10 .ig-head span {
		margin-left: 20px;
		color: #999;
		font-size: 13px;
		letter-spacing: 0.1em;
	}

	#page10 .ig-view {
		overflow: hidden;
	}

	#page10 .instagram .sb_instagram_header,
	#page10 .instagram #sbi_load,
	#page10 .instagram .sbi_hover_top {
		display: none !important;
	}

	#page10 .instagram .sbi_playbtn,
	#page10 .instagram .sbi_lightbox_carousel_icon {
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		position: absolute !important;
	}

	#page10 .instagram #sb_instagram {
		width: 100% !important;
		padding: 0 !important;
	}

	#page10 .instagram #sbi_images {
		display: flex !important;
		flex-wrap: nowrap !important;
		width: max-content !important;
		margin-left: -10px;
		padding: 0 !important;
		grid-template-columns: none !important;
	}

	#page10 .instagram #sbi_images.is-loop {
		animation: ig-loop 28s linear infinite;
	}

	#page10 .instagram .sbi_item {
		flex: 0 0 120px;
		width: 120px !important;
		margin: 0 10px 0 0 !important;
		padding: 0 !important;
	}

	#page10 .instagram .sbi_photo_wrap,
	#page10 .instagram .sbi_photo {
		display: block;
		width: 120px !important;
		height: 120px !important;
	}

	#page10 .instagram .sbi_photo img {
		display: block;
		width: 120px !important;
		height: 120px !important;
		object-fit: cover;
	}
}

@keyframes ig-loop {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	#page10 .instagram #sbi_images.is-loop {
		animation: none;
	}
}