@charset "UTF-8";
/* ============================================================
	 社会福祉法人 本城福祉会 トップページ専用スタイル
	 対象: メインビジュアル / 本城福祉会について /
				 幼老一体型施設のメリット / 高齢者部門・幼児部門の特徴
	 ※共通スタイル(style.css)の後に読み込むこと
	 ※bubble-drift / bubble-glow のキーフレームは style.css 側で定義
	 ============================================================ */

/* ============================================================
	 メインビジュアル
	 ============================================================ */
.mv {
	position: relative;
	padding-top: 6.75rem;
	min-height: 850px;
	overflow: hidden;
	/* 写真の開始位置: 1440px以下では23.7vw、超えたら中央1440グリッド基準(341px相当) */
	--mv-photo-start: max(23.7vw, 50% - 379px);
}
.mv__copy {
	position: absolute;
	top: 199px;
	left: max(20px, calc(var(--mv-photo-start) - 250px)); /* グリッド上の121px位置(最低20px確保で見切れ防止) */
	z-index: 2;
	width: 166px;
	font-family: "Shippori Mincho", var(--font-base);
	font-weight: 500;
	font-size: 49px; /* 30px/375 */
	display: flex;
	flex-direction: row-reverse;
	letter-spacing: 0.1em;
	line-height: 1.7;
}
.mv__copy span {
	writing-mode: vertical-rl; /* 縦書き */
	text-orientation: upright;
}
.mv__photos {
	height: 685px;
	margin-left: var(--mv-photo-start);
	overflow: hidden;
	border-radius: var(--radius) 0 0 var(--radius); /* 右端はブラウザ端まで */
}
.mv__photos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}
.mv__lead {
	position: absolute;
	left: 0;
	top: 577px;
	z-index: 3;
	width: calc(var(--mv-photo-start) + 278px); /* 写真開始位置+278px(デザイン619px相当) */
	height: 216px;
	padding: 1.875rem 0 0 calc(var(--mv-photo-start) - 13.75rem);
	background: var(--bg-page);
	border-radius: 0 var(--radius) 0 0; /* 右上のみ角丸 */
}
/* kado.png(逆R)でメイン画像との接合部を滑らかに */
.mv__lead::before,
.mv__lead::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	background: url("../images/kado.png") no-repeat center / 100% 100%;
}
.mv__lead::before {
	top: -40px;
	right: 238px; /* ボックス右端から写真開始位置(278px-40px)に配置 */
}
.mv__lead::after {
	right: -40px;
	bottom: 0;
}
.mv__lead p {
	font-size: 1rem;
	line-height: 2.4; /* 38px相当 */
}

/* ============================================================
	 本城福祉会について
	 ============================================================ */
.about {
	position: relative;
	display: flow-root; /* マージン相殺防止(overflow:hiddenと違い装飾はクリップしない) */
	margin-top: 7.5rem;
	padding-bottom: 21.875rem; /* 左下写真+余白(次セクションとの間隔もデザイン準拠) */
}
/* 写真: 上部に大きなシェイプ2枚+左下に小さめ1枚(デザイン実寸) */
.about__photo {
	position: absolute;
	object-fit: cover;
	border-radius:var(--radius); /* 角丸は全画像20px */
}
.about__photo--01 {
	/* 2枚組の合成画像を上部全体に(デザイン: 1318×552 / x0) */
	top: 0; left: 0;
	width: 91.5%; /* 1318px/1440 */
	max-width: 1318px;
	height: auto;
	aspect-ratio: 3957 / 1656;
	z-index: 1;
	border-radius: 0 var(--radius) 0 0;
}
.about__photo--02 {
	/* カード右下に重なる(デザイン: x1144 / y2551=セクション内676px) */
	top: min(46.9vw, 676px);
	left: 79.4%;
	width: 295px;
	height: 270px;
	z-index: 3;
}
.about__photo--03 {
	/* 左下(デザイン: x62 / y2823=セクション内948px) */
	top: min(65.8vw, 948px);
	left: 4.3%;
	width: 308px;
	height: 270px;
	z-index: 3;
}
/* カード: 写真の上に重なり右端まで */
.about__card {
	position: relative;
	z-index: 2;
	margin: min(26.5vw, 23.8125rem) 0 0 24.6%; /* デザイン: y2256 / x355 */
	min-height: 495px;
	padding: 5.5rem 7.5rem 5rem 6.25rem;
	background: var(--bg-card);
	border-radius: var(--radius) 0 0 var(--radius);
}
.about__text {
	margin-bottom: 2.5rem;
	width: 70%;
}
.about__card .btn-primary { min-width: 306px; }

/* 緑の淡いぼかしサークル(蛍がゆっくり漂うイメージ) */
.about__bubble {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(50, 157, 135, .20) 0%,
		rgba(50, 157, 135, .08) 45%,
		rgba(50, 157, 135, 0) 70%);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.about__bubble--01 {
	width: 420px; height: 420px;
	left: 110px; top: 690px;
	z-index: 0;
	animation: bubble-drift 9s ease-in-out infinite,
						 bubble-glow 4.5s ease-in-out infinite;
}
.about__bubble--02 {
	width: 300px; height: 300px;
	right: -90px; top: 760px;
	z-index: 3;
	animation: bubble-drift 7s ease-in-out -4s infinite reverse,
						 bubble-glow 4.5s ease-in-out infinite;
}
.about__bubble--03 {
	width: 420px; height: 420px;
	right: 8%; top: 500px;
	z-index: 3;
	animation: bubble-drift 11s ease-in-out -8s infinite,
						 bubble-glow 4.5s ease-in-out infinite;
}

/* ============================================================
	 幼老一体型施設のメリット
	 ============================================================ */
.benefits {
	position: relative;
	padding: 7.5rem 0 3.75rem;
}
/* 右側: マスク適用済み画像(デザイン: x773〜右端 / 666×955、下端はカード帯の内側で収まる) */
.benefits__photo {
	position: absolute;
	top: 0; right: 0;
	bottom: 140px; /* カード帯の下端より内側に収める */
	width: min(38%, 666px); /* 666px/1440 */
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	z-index: 0;
}
.benefits__photo img {
	/* CSSマスクはfile://プレビューで非表示になるため合成済みwebpを使用 */
	max-width: 100%;
	width: auto;
	height: auto;
}
.benefits .section__inner { position: relative; z-index: 1; }
.benefits__lead {
	width: 52%; /* デザイン: 写真の左側に収める */
	margin-bottom: 6.25rem;
}
.benefits__cards {
	/* デザイン: クリーム色の帯(1198×365 / 角丸)の上に白カード2枚 */
	display: flex;
	gap: 36px;
	padding: 2.5rem 3.375rem;
	background: var(--bg-cream);
	border-radius: 16px;
}
.benefit-card {
	/* デザイン: 白カード(帯の半分ずつ) / 角丸10px / 左端に緑バー */
	flex: 1 1 50%;
	padding: 1.75rem 1.875rem 1.875rem;
	background: #fff;
	border-radius: 10px;
}
.benefit-card__title {
	position: relative;
	margin-bottom: 1.25rem;
	color: var(--color-accent);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.6;
}
.benefit-card__title::before {
	content: "";
	position: absolute;
	left: -30px; /* カード左端に付けるバー */
	top: 6px;
	width: 4px; height: 19px;
	background: var(--color-accent);
}
.benefit-card__list li {
	position: relative;
	padding: 0.625rem 0 0.625rem 2.125rem;
	border-bottom: 1px dashed #bbb;
	font-size: 1rem;
	line-height: 1.7;
}
.benefit-card__list li::before {
	content: "";
	position: absolute;
	left: 0; top: 12px;
	width: 20px; height: 20px;
	background: url("../images/icon_check.svg") no-repeat center / contain;
}
/* 緑のぼかしサークル */
.benefits__bubble {
	position: absolute;
	width: 292px; height: 292px;
	left: 14%; top: 210px;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(50, 157, 135, .20) 0%,
		rgba(50, 157, 135, .08) 45%,
		rgba(50, 157, 135, 0) 70%);
	mix-blend-mode: multiply;
	pointer-events: none;
	animation: bubble-drift 10s ease-in-out -2s infinite reverse,
						 bubble-glow 4.5s ease-in-out infinite;
}

/* ============================================================
	 高齢者部門/幼児部門の特徴
	 ============================================================ */
.features {
	position: relative;
	padding: 2.5rem 0 7.5rem;
}
/* 中央を横断するクリーム帯(デザイン: y459〜/h666 / 左端フルブリード・右4.24%空き) */
.features::before {
	content: "";
	position: absolute;
	top: 459px;
	left: 0;
	right: 4.24%;
	height: 666px;
	background: var(--bg-cream);
	border-radius: 0 var(--radius) var(--radius) 0;
	z-index: 0;
}
.features__block {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 2.5rem;
}
.features__block + .features__block { margin-top: 8.75rem; }
.features__block--reverse { flex-direction: row-reverse; }
/* 写真: 大1枚+小2枚(デザイン実寸 692×559 / 大382×559 / 小297×274) */
.features__photos {
	flex: 0 0 min(52.5%, 692px);
	display: grid;
	grid-template-columns: 55.2% 42.9%;
	gap: 11px 13px;
}
.features__photo {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius);
}
.features__photo--main {
	grid-row: span 2;
	aspect-ratio: 382 / 559;
}
.features__photo--sub1,
.features__photo--sub2 { aspect-ratio: 297 / 274; }
/* カード: 写真に75px重なる(デザイン: 581×450) */
.features__card {
	flex: 1;
	position: relative;
	z-index: 2;
	margin-left: -4.6875rem;
	margin-top: 11.875rem; /* デザイン: カードは写真より下に配置(y4373 vs 写真y4182) */
	min-height: 450px;
	padding: 3.5rem 3.25rem;
	background: var(--bg-card);
	border-radius: var(--radius);
}
.features__block--reverse .features__card {
	margin-left: 0;
	margin-right: -4.6875rem;
}
/* 幼児部門: 写真の並びも左右反転(大きい写真が右) */
.features__block--reverse .features__photos {
	grid-template-columns: 42.9% 55.2%;
}
.features__block--reverse .features__photo--main {
	grid-column: 2;
	grid-row: 1 / span 2;
}
.features__text + .features__text { margin-top: 1em; }
/* 緑のぼかしサークル */
.features__bubble {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(50, 157, 135, .20) 0%,
		rgba(50, 157, 135, .08) 45%,
		rgba(50, 157, 135, 0) 70%);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}
.features__bubble--01 {
	width: 321px; height: 321px;
	right: 12%; top: 0;
	animation: bubble-drift 9s ease-in-out -3s infinite,
						 bubble-glow 4.5s ease-in-out infinite;
}
.features__bubble--02 {
	width: 292px; height: 292px;
	left: 40px; top: 480px;
	animation: bubble-drift 12s ease-in-out -6s infinite reverse,
						 bubble-glow 4.5s ease-in-out infinite;
}
.features__bubble--03 {
	width: 321px; height: 321px;
	left: 40px; bottom: 0;
	animation: bubble-drift 10s ease-in-out infinite,
						 bubble-glow 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.about__bubble,
	.benefits__bubble,
	.features__bubble { animation: none; }
}

/* ============================================================
	 レスポンシブ
	 ============================================================ */
@media (max-width: 1100px) {
	.mv__lead { width: 70%; }
	.about { padding-bottom: 280px; }
	.about__photo--02 { width: 240px; height: 220px; }
	.about__photo--03 { width: 250px; height: 220px; }
	.about__card { padding: 60px 60px 56px 80px; }
	.features::before { top: 380px; height: 560px; }
	.features__card { margin-top: 120px; min-height: 0; padding: 44px 40px; }
}

@media (max-width: 860px) {
	.mv {
		padding-top: 50px; min-height: 0;
		position: relative;
	}

	/* SP専用MVコラージュ(Figma: 4260-140。375px幅基準でvw換算)
		 写真の開始位置(左9.79vw)より左にクリーム色の帯が覗き、その上に縦書きタイトルが重なる */
	.mv__collage-sp {
		display: block;
		position: relative;
		height: 85.6vw; /* 写真開始〜タイトル最下部(321px/375) */
	}
	/* kado2.png(逆R/クリーム色)で写真左端との接合部を滑らかに(PCのmv__leadと同じ技法) */

	.mv__photos {
		position: relative;
		z-index: 1;
		margin-left: 9.79vw; /* 写真開始位置(36.7px/375) */
		height: 49.07vw; /* 184px/375 */
	}
	.mv__photos img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: left center; /* PCのmv__photosと同じ見え方 */
		border-radius: 10px 0 0 0; /* デザイン: 左上のみ角丸 */
	}
	.mv__copy {
		position: absolute;
		top: 47vw; /* 写真上端から146px相当(背景padding分を差し引いて調整) */
		left: 9.79vw; /* 39px/375相当(背景padding分を差し引いて調整) */
		z-index: 2;
		display: flex;
		flex-direction: row-reverse; /* 縦書きなので「こころ結び」が右列に来るよう反転 */
		gap: 3.2vw; /* 2列の間隔(81px-39px-30px幅=12px/375) */
		margin: 0;
		padding: 20px 30px 0 0;
		background: var(--bg-page); /* PCのmv__leadと同じ背景色 */
		border-radius: 0 16px 0 0;
		font-family: "Shippori Mincho", var(--font-base);
		font-weight: 500;
		font-size: 30px; /* 30px/375 */
		line-height: 1.2; /* デザイン: 1文字あたりの送り33px/フォントサイズ30px */
		color: var(--color-text);
		width: 120px;
	}
	.mv__copy span {
		writing-mode: vertical-rl; /* 縦書き */
		text-orientation: upright;
	}
	/* kado.png(逆R)で写真との接合部を滑らかに(PCのmv__leadと同じ技法) */
	.mv__copy::before {
		content: "";
		position: absolute;
		top: -16px;
		left: 0;
		width: 16px;
		height: 16px;
		background: url("../images/kado.png") no-repeat center / 100% 100%;
	}
	.mv__copy::after {
		content: "";
		position: absolute;
		top: 11vw;
		right: -16px;
		width: 16px;
		height: 16px;
		background: url("../images/kado.png") no-repeat center / 100% 100%;
	}
	.mv__lead {
		position: relative;
		top: 0; /* PCのtop:577pxを打ち消す(position:relativeでも効いてしまうため) */
		z-index: 1;
		left: 0;
		width: 100%;
		height: auto;
		margin-top: 0;
		padding: 20px 9%;
		border-radius: 0;
		line-height: 2.2;
	}
	.mv__lead::before {
		content: "";
		display: block;
		width: 128px;
		height: 190px;
		float: left;
		position: relative;
		top: 0;
		left: 0;
	}
	.mv__lead::after { display: none; }

	.about { margin-top: 80px; padding-bottom: 40px; } /* 写真2枚非表示分、余白を縮小 */
	.about__photo--01 { position: static; width: 94%; }
	/* 小さい2枚はSPでは非表示 */
	.about__photo--02,
	.about__photo--03 { display: none; }
	.about__text{width: auto;}
	.about__card { margin: 0; min-height: 0; padding: 50px 30px 44px; }
	.about__bubble--01 { width: 260px; height: 260px; left: -40px; top: auto; bottom: 0; }
	.about__bubble--02 { width: 180px; height: 180px; right: -60px; top: 55%; }
	.about__bubble--03 { width: 240px; height: 240px; right: -30px; top: 30%; }

	.benefits { padding: 80px 0 40px; }
	.benefits__photo { position: relative; bottom: auto; width: 82%; margin: 0 0 0 auto; }
	/* section__innerを写真の下1/3に重ねる(写真は82vw幅・比率1332:1910 → 高さ117.58vwの1/3)
		 文字が写真に直接乗らないよう、PCのカード類と同じクリーム背景+角丸を敷く */
	.benefits .section__inner {
		margin-top: -39.2vw;
		padding-top: 28px;
		padding-bottom: 28px;
		background: var(--bg-cream);
		border-radius: 16px;
	}
	.benefits__lead { width: 100%; margin-bottom: 40px; }
	.benefits__cards { flex-direction: column; gap: 20px; padding: 24px 20px; }
	.benefit-card { padding: 28px 24px; }
	.benefit-card__title::before { left: -24px; }
	.benefits__bubble { width: 200px; height: 200px; left: 4%; top: 120px; }

	.features { padding: 40px 0 80px; }
	.features::before { top: 30%; height: 46%; border-radius: 0; right: 0; }
	.features__block {flex-direction: column; gap: 24px;}
	.features__block--reverse { flex-direction: column; }
	.features__block + .features__block { margin-top: 80px; }
	.features__photos { flex: none; width: 100%; }
	.features__card { margin: 0; min-height: 0; padding: 36px 24px; }
	.features__block--reverse .features__card { margin: 0; }
	.features__bubble--01 { width: 200px; height: 200px; right: 4%; }
	.features__bubble--02 { width: 180px; height: 180px; top: 40%; }
	.features__bubble--03 { width: 200px; height: 200px; }
}
@media (max-width: 428px) {
	.mv__copy {
		font-size: 9vw;
	}
	.mv__lead p{
		text-align: left;
	}
	.mv__lead p br{
		display: none;
	}
	.section__inner{
		padding: 0 30px;
	}
	.features__block {
		padding: 0 30px;
	}
	.facility-card__name::after{
		bottom: auto;
		top: 40px;
	}
	.facility-cards--col2 .facility-card__name::after{
		bottom: auto;
		top: 30px;
	}
	.about__card .btn-primary{
		min-width: auto;
	}
}