@charset "utf-8";

/* ===== トップページ（.page-front 配下） =====
   装飾の四角形は --deco で縮尺を切り替える（PC=1 / タブレット=.7 / SP=.5） */
.page-front {
	--deco: .5;
	overflow-x: clip;
}
@media (min-width: 768px) {
	.page-front { --deco: .7; }
}
@media (min-width: 1200px) {
	.page-front { --deco: 1; }
}

/* 各セクションの中身は装飾より前面に */
.page-front section > .container,
.front-information-inner,
.front-access-info,
.front-access-map { position: relative; z-index: 1; }

/* ============================================================
   メイン画像
   ============================================================ */
.front-hero {
	position: relative;
	overflow: hidden;
	height: clamp(420px, 40vw, 767px);
	background: #dfeee8;
}
.front-hero-slides { position: absolute; inset: 0; }
.front-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
	opacity: 0;
	transition: opacity 1.5s ease;
}
.front-hero-slide.is-active { opacity: 1; }

/* キャッチ画像：PCは左寄せ、SP・タブレットは中央 */
.front-hero-txt {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: clamp(560px, 100vw, 760px);
	transform: translate(-50%, -50%);
}
@media (min-width: 992px) {
	.front-hero-txt {
		top: calc(50% - 5vw);
		left: 0;
		width: min(60.7vw, 1165px);
		transform: translateY(-50%);
	}
}

/* 資料請求ボタン */
.front-hero-siryo {
	position: absolute;
	z-index: 3;
	top: 2px;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, .9vw, 16px);
	width: clamp(92px, 10.2vw, 195px);
	aspect-ratio: 195 / 157;
	border-bottom: 3px solid #fff;
	border-left: 3px solid #fff;
	background: var(--color-main-dark);
	color: #fff;
	font-family: var(--font-serif);
	font-size: clamp(var(--fs-min), 1.15vw, 22px);
	font-weight: 500;
	letter-spacing: .08em;
	transition: background var(--transition), box-shadow var(--transition);
}
.front-hero-siryo img {
	width: clamp(22px, 2.76vw, 53px);
	height: auto;
	transform-origin: 50% 50%;
	transition: transform var(--transition);
}
.front-hero-siryo:hover {
	background: var(--color-blue);
	box-shadow: 0 6px 16px rgb(0 0 0 / .25);
	opacity: 1;
}
.front-hero-siryo:hover img { transform: scale(1.15); }

/* ============================================================
   ご挨拶
   ============================================================ */
.front-greeting {
	background: linear-gradient(var(--color-mint), var(--color-mint)) no-repeat 0 100% / calc(237px * var(--deco)) calc(212px * var(--deco));
	text-align: center;
}
.front-greeting::before,
.front-greeting::after {
	content: "";
	position: absolute;
	z-index: 0;
}
.front-greeting::before { /* 右上：#edfbf8 */
	top: 0;
	right: 0;
	width: calc(305px * var(--deco));
	height: calc(270px * var(--deco));
	background: #edfbf8;
}
.front-greeting::after { /* 右上に重なる：#f0fbe3 の40% */
	top: calc(142px * var(--deco));
	right: calc(170px * var(--deco));
	width: calc(210px * var(--deco));
	height: calc(188px * var(--deco));
	background: rgb(240 251 227 / .4);
}
.front-greeting .section-ttl { margin-bottom: clamp(20px, 2.1vw, 40px); }

.front-greeting-lead {
	font-family: var(--font-serif);
	font-size: clamp(17px, 1.46vw, 28px);
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.6;
	color: var(--color-main);
}
.front-greeting-text {
	margin-top: clamp(30px, 4.2vw, 80px);
	font-size: clamp(var(--fs-min), 1vw, 17px);
	line-height: 1.76;
}

/* ============================================================
   敬老園ロイヤルヴィラ大網白里について
   ============================================================ */
.front-service {
	background:
		radial-gradient(circle at 5% 0, #e4ffe8 0, rgb(228 255 232 / 0) 45%),
		linear-gradient(to bottom, #f3ffdc 0%, #f1fffa 100%);
}
.front-service-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 2.6vw, 50px) clamp(16px, 1.56vw, 30px);
}
.front-service-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 38.8%;
	overflow: hidden;
	border-radius: 10px;
	background: rgb(255 255 255 / .8);
	box-shadow: 5px 5px 8px rgb(18 31 27 / .07);
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.front-service-item:hover {
	transform: translateY(-5px);
	background: rgb(255 255 255 / .95);
	box-shadow: 7px 12px 18px rgb(18 31 27 / .12);
}
.front-service-item:hover .front-service-pic { transform: scale(1.06); }
.front-service-body { padding: clamp(14px, 1vw, 20px) clamp(10px, 1vw, 20px) clamp(14px, 1vw, 20px) clamp(16px, 2.1vw, 40px); }
.front-service-ttl {
	margin-bottom: .45em;
	font-family: var(--font-serif);
	font-size: clamp(16px, 1.46vw, 28px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .06em;
	color: var(--color-main);
}
.front-service-txt {
	font-size: clamp(var(--fs-min), 1vw, 17px);
	line-height: 1.76;
	letter-spacing: .02em;
}
.front-service-pic {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

@media (max-width: 991.98px) {
	.front-service-list { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
	.front-service-item { grid-template-columns: 1fr; }
	.front-service-pic { order: -1; aspect-ratio: 536 / 300; height: auto; }
	.front-service-body { padding: 16px; }
	.front-service-ttl { font-size: 18px; }
}

/* ============================================================
   イベント・ブログ
   ============================================================ */
.front-blog {
	background:
		url("../assets/images/square_texture.png") no-repeat calc(136px * var(--deco)) calc(100% - 120px * var(--deco)) / calc(179px * var(--deco)) auto,
		linear-gradient(var(--color-mint), var(--color-mint)) no-repeat 0 100% / calc(269px * var(--deco)) calc(242px * var(--deco)),
		linear-gradient(var(--color-lime), var(--color-lime)) no-repeat 100% 0 / calc(217px * var(--deco)) calc(193px * var(--deco));
}
.front-blog-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 3.1vw, 60px);
	max-width: 1112px;
	margin-inline: auto;
}
.front-blog-item a { display: block; }
.front-blog-item a:hover { opacity: 1; }
.front-blog-pic {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity var(--transition);
}
.front-blog-pic-none { background: #6e6e6e; }
.front-blog-item a:hover .front-blog-pic { opacity: .75; }
.front-blog-ttl {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: clamp(10px, 1.2vw, 22px);
	padding-inline: 4px;
	font-size: clamp(var(--fs-min), 1vw, 18px);
	line-height: 1.7;
}
@media (max-width: 575.98px) {
	.front-blog-list { grid-template-columns: 1fr; }
}

/* ============================================================
   お知らせ
   ============================================================ */
.front-information {
	padding-block: clamp(30px, 5.2vw, 100px) clamp(40px, 7.5vw, 144px);
	background: url("../assets/images/bg_info.jpg") center bottom / cover no-repeat;
}
.front-information-inner {
	padding-block: clamp(30px, 3.8vw, 73px) clamp(30px, 4.5vw, 87px);
	background: linear-gradient(90deg,
		rgb(255 255 255 / 0) 0,
		rgb(255 255 255 / .85) 20%,
		rgb(255 255 255 / .85) 80%,
		rgb(255 255 255 / 0) 100%);
}
.front-information-list {
	max-width: 1112px;
	margin-inline: auto;
}
.front-information-list a {
	display: grid;
	grid-template-columns: clamp(96px, 8.1vw, 155px) minmax(0, 1fr);
	align-items: baseline;
	padding-block: clamp(8px, 1.07vw, 20px);
	font-size: clamp(var(--fs-min), 1vw, 19px);
}
@media (max-width: 575.98px) {
	.front-information-list a { grid-template-columns: 1fr; padding-block: 12px; }
	.front-information-date { opacity: .8; }
}

/* ============================================================
   施設ギャラリー
   ============================================================ */
.front-gallery { background: url("../assets/images/bg_gallery.jpg") center top / cover no-repeat; }

.front-gallery-view {
	position: relative;
	isolation: isolate;
	--thumb-gap: clamp(10px, 1.6vw, 31px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(100px, 14.27vw, 274px);
	gap: clamp(12px, 1.35vw, 26px);
	max-width: 1007px;
	margin-inline: auto;
}
.front-gallery-view::before { /* 左下の四角形 */
	content: "";
	position: absolute;
	z-index: -1;
	left: calc(-99px * var(--deco));
	bottom: calc(-108px * var(--deco));
	width: calc(349px * var(--deco));
	height: calc(306px * var(--deco));
	background: var(--color-lime);
}
.front-gallery-main {
	overflow: hidden;
	aspect-ratio: 707 / 583;
}
.front-gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .25s ease;
}
.front-gallery-main img.is-changing { opacity: 0; }

/* サムネイル列：高さは main に合わせ、3枚分を表示して残りはスクロール */
.front-gallery-side { position: relative; }
.front-gallery-thumbs {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: var(--thumb-gap);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--color-main) transparent;
}
.front-gallery-thumbs li {
	position: relative;
	flex: none;
	height: calc((100% - var(--thumb-gap) * 2) / 3);
}
.front-gallery-thumb {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: none;
	opacity: .65;
	transition: opacity var(--transition), outline-color var(--transition);
	outline: 3px solid transparent;
	outline-offset: -3px;
}
.front-gallery-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.front-gallery-thumb:hover { opacity: 1; }
.front-gallery-thumb.is-active { opacity: 1; outline-color: var(--color-main); }

@media (max-width: 767.98px) {
	.front-gallery-view { --thumb-gap: 10px; grid-template-columns: 1fr; }
	.front-gallery-main { aspect-ratio: 3 / 2; }
	/* SP：サムネイルは下に横並び。3枚分を表示して横スクロール */
	.front-gallery-side { position: static; }
	.front-gallery-thumbs {
		position: static;
		flex-direction: row;
		overflow: auto hidden;
		padding-bottom: 8px;
	}
	.front-gallery-thumbs li { width: calc((100% - var(--thumb-gap) * 2) / 3); height: auto; aspect-ratio: 3 / 2; }
}

/* ============================================================
   下部コンテンツエリアA（4つのメニュー）
   ============================================================ */
.front-menu {
	padding-block: clamp(40px, 5.5vw, 106px);
	background: var(--color-area);
}
.front-menu-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(10px, 1.25vw, 24px);
}
.front-menu-item a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: clamp(20px, 2.1vw, 40px) 10px clamp(18px, 1.6vw, 30px);
	border: 3px solid var(--color-main);
	background: #fff;
	text-align: center;
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.front-menu-item a:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 20px rgb(13 158 43 / .22);
	background: #fbfef6;
	opacity: 1;
}
.front-menu-ttl {
	font-family: var(--font-serif);
	font-size: clamp(var(--fs-min), 1.56vw, 30px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--color-main);
}
.front-menu-pic {
	display: grid;
	place-items: center;
	width: 64.5%;
	aspect-ratio: 1;
	margin-top: clamp(14px, 2.1vw, 40px);
	border-radius: 50%;
	background: var(--color-lime);
}
.front-menu-pic img {
	max-width: none;
	height: auto;
	transition: transform var(--transition);
}
.front-menu-item a:hover .front-menu-pic img { transform: scale(1.08); }
/* アイコン幅は円の直径に対する割合 */
.front-menu-item:nth-child(1) .front-menu-pic img { width: 72%; }
.front-menu-item:nth-child(2) .front-menu-pic img { width: 110%; }
.front-menu-item:nth-child(3) .front-menu-pic img { width: 76%; }
.front-menu-item:nth-child(4) .front-menu-pic img { width: 52%; }

.front-menu-note {
	position: absolute;
	left: 12.7%;
	bottom: 4.5%;
	font-family: var(--font-serif);
	font-size: clamp(var(--fs-min), 1.04vw, 20px);
	line-height: 1.4;
	letter-spacing: .06em;
	text-align: left;
}

@media (max-width: 991.98px) {
	.front-menu-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
	.front-menu-note { position: static; margin-top: 8px; }
}

/* ============================================================
   下部コンテンツエリアB（体験入居の帯）
   ============================================================ */
.front-taiken {
	display: flex;
	align-items: flex-start;
	min-height: clamp(240px, 20vw, 385px);
	padding-top: clamp(70px, 5.06vw, 97px);
	background: url("../assets/images/bg_taiken.jpg") center / cover no-repeat;
}
.front-taiken-belt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 1.9vw, 36px);
	width: 100%;
	min-height: clamp(54px, 4.06vw, 78px);
	padding-inline: var(--gutter);
	background: rgb(255 255 255 / .8);
	font-family: var(--font-serif);
	color: var(--color-main);
}
.front-taiken-belt:hover { opacity: .85; }
.front-taiken-pic {
	flex: none;
	width: clamp(70px, 7.5vw, 144px);
	height: auto;
	margin-block: -1.1vw;
}
.front-taiken-txt {
	font-size: clamp(16px, 1.98vw, 38px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .1em;
}

@media (max-width: 767.98px) {
	.front-taiken { align-items: center; padding-block: 60px 40px; }
	.front-taiken-belt {
		flex-direction: column;
		gap: 4px;
		padding-block: 0 20px;
		text-align: center;
	}
	.front-taiken-pic { width: 84px; margin-block: -34px 0; }
	.front-taiken-txt { font-size: 18px; }
}

/* ============================================================
   アクセス
   ============================================================ */
.front-access { padding-bottom: var(--section-py); }
.front-access .section-ttl { margin-bottom: clamp(30px, 6vw, 115px); }

.front-access-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 58.07%;
}
.front-access-info {
	padding-left: max(var(--gutter), calc((100vw - 1560px) / 2));
	padding-right: var(--gutter);
}
.front-access-info::before,
.front-access-info::after { /* 右下の四角形＋テクスチャ */
	content: "";
	position: absolute;
	z-index: -1;
}
.front-access-info::before {
	right: 0;
	bottom: 0;
	width: calc(216px * var(--deco));
	height: calc(190px * var(--deco));
	background: var(--color-mint);
}
.front-access-info::after {
	right: calc(111px * var(--deco));
	bottom: calc(95px * var(--deco));
	width: calc(140px * var(--deco));
	aspect-ratio: 179 / 158;
	background: url("../assets/images/square_texture.png") center / cover no-repeat;
}

.front-access-name {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-main);
}
.front-access-name span { display: block; font-size: clamp(15px, 1.46vw, 28px); letter-spacing: .1em; }
.front-access-name strong { display: block; font-size: clamp(20px, 1.88vw, 36px); font-weight: 500; letter-spacing: .1em; }

.front-access-addr-ttl { margin-top: clamp(24px, 2.6vw, 50px); }
.front-access-addr-ttl img { width: clamp(100px, 7.76vw, 149px); height: auto; }
.front-access-addr {
	margin-top: clamp(8px, .9vw, 16px);
	font-size: clamp(14px, 1.25vw, 24px);
	line-height: 1.5;
}
.front-access-tel {
	margin-top: clamp(14px, 1.5vw, 28px);
	font-size: clamp(14px, 1.25vw, 24px);
	line-height: 1.5;
	color: var(--color-main);
}
.front-access-tel li + li { margin-top: .6em; }

.front-access-map { aspect-ratio: 1115 / 613; }
.front-access-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 991.98px) {
	.front-access-inner { grid-template-columns: 1fr; }
	.front-access-info {
		padding-inline: var(--gutter);
		padding-bottom: clamp(60px, 14vw, 110px);
		text-align: left;
	}
	.front-access-info > * { max-width: var(--container); margin-inline: auto; }
	.front-access-map { aspect-ratio: 4 / 3; }
}