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

section {
	padding-block: 0vh;
	z-index: 1;
	position: relative;
}

.sec_inner_box {
	padding-bottom: var(--design-vh-8);
}

.page_navi {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
	gap: 1rem;
	margin-block: 2rem 4rem;
	li {
		display: grid;
		color: #FFF;
		font-size: clamp(16px, 3vw, 18px);
		font-weight: bold;
		text-align: center;
		border-radius: 10px;
		overflow: hidden;
		line-height: 130%;
		a {
			background: var(--main-green);
			display: grid;
			align-items: center;
			padding: 1rem 5px 2rem;
			position: relative;
			&::before {
				content: '';
				background: var(--pale-green);
				display: block;
				width: 100%;
				height: 18px;
				bottom: 0px;
				position: absolute;
			}
			&::after {
				content: '';
				background: url("../images/common/arrow_green-line_bottom.svg");
				background-repeat: no-repeat;
				background-size: contain;
				display: inline-block;
				width: 14px;
				height: 7px;
				bottom: 5px;
				left: 50%;
				transform: translateX(-50%);
				position: absolute;
			}
		}
	}
}

.sec_photo {
	margin-block: 2rem;
	width: 100%;
	picture {
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		position: relative;
	}
	.photo_main_txt {
		font-size: 12px;
		font-family: '游ゴシックMedium';
		display: flex;
	}
	.photo_sub {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
		gap: 1rem;
		margin-top: 1rem;
		li {
			position: relative;
			& > picture {
				height: 190px;
				display: flex;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			.photo_ttl {
				background: #FFF;
				border-radius: 30px;
				padding: 5px 1em;
				font-size: 16px;
				color: var(--brown);
				display: inline-flex;
				margin-top: 10px;
			}
		}
	}
}

.sec_box_txt {
	font-size: clamp(15px, 3vw, 18px);
	font-family: '筑紫ARゴシックR';
	text-align: justify;
	line-height: 140%;
	color: #333333;
}

section#scale {
	.sec_photo {
		.photo_sub {
			grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
			li {
				& > picture {
					height: 126px;
				}
			}
		}
	}
}

section#room {
	.photo_sub {
		margin-top: 5px;
		li {
			display: flex;
			justify-content: center;
			.photo_ttl {
				bottom: 10px;
				position: absolute;
			}
		}
	}
}

.fee_inner {
	position: relative;
	height: var(--design-vh-42);
	display: grid;
	align-items: flex-end;
	.fee_bg {
		display: flex;
		bottom: 0px;
		right: 0px;
		position: absolute;
		height: 100%;
	}
	.fee_check {
		display: grid;
		row-gap: 5px;
		margin-block: 2rem;
		z-index: 1;
		li {
			display: flex;
			align-items: center;
			position: relative;
			column-gap: 5px;
			&::before {
				content: '';
				background: url("../images/merit/icon_check.svg");
				background-repeat: no-repeat;
				background-size: contain;
				display: inline-block;
				width: 21px;
				height: 26px;
				position: relative;
			}
			.double_circle {
				color: #CD5E16;
			} 
		}
	}
	.fee_ttl {
		font-size: clamp(16px, 3.33334vw, 20px);
		text-align: left;
		margin-bottom: 1rem;
	}
}


.fee_table_wrap {
	width: 100%;
	max-width: 480px;
	.fee_table {
		width: 100%;
		border-radius: 10px;
		overflow: hidden;
		border-spacing: 0px;
		border-collapse: collapse;		
		.facility_name {
			.empty_cell {
				background: #CCC;
			}
			.settle_ito {
				background: #84A63D;
				font-weight: bold;
			}
			.manshon_D {
				background: #9d75cc;
			} 
			.manshon_U {
				background: #e37a1d;
			} 
		}
		tr {
			& > * {
				padding: 5px 10px;
				font-size: 14px;
				font-family: '游ゴシックMedium';
				border: 1px solid #CCC;
			}
			th {
				background: #666;
				color: #FFF;
				font-weight: normal;
				text-align: left;
				& > small {
					font-size: 12px;
				}
			}
			td {
				background: #FFF;
				font-weight: 500;
				&:first-of-type {
					background: #fcffd2;
					color: #84A63D;
				}
			}
		}
	}
}

.fee_caution {
	display: grid;
	row-gap: 2px;
	margin-top: 1rem;
	li {
		font-size: 12px;
		font-family: '游ゴシックMedium';
		text-align: left;
		line-height: 130%;
	}
}

.manager_name {
	display: flex;
	color: #FFF;
	font-size: clamp(16px, 3.33334vw, 20px);
	bottom: 20px;
	right: 20px;
	position: absolute;
}

.normal_price {
	margin-block: 2rem;
	border: 2px solid #FFF;
	border-radius: 20px;
	overflow: hidden;
	dt {
		background: #FFF;
		color: #CD5E16;
		font-size: clamp(20px, 4.66667vw, 28px);
		text-align: center;
		padding: 10px;
	}
	dd {
		padding: 1rem;
	}
}



/* ----------------------------------------------
施設紹介
---------------------------------------------- */
section#genkiclub {
	.sec_box_txt {
		margin-block: 1rem;
	}
}

.facility_wrap {
	.facility_lineup {
		&.genkiclub_lineup {
			li {
				left: 20px;
				position: relative;
			}
		}
	}
}

.genki_facility_ttl {
	color: var(--main-green);
	font-size: clamp(22px, 4.66667vw, 28px);
	text-align: center;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	column-gap: 1em;
	position: relative;
	line-height: 1;
	&::before,
	&::after {
		content: '';
		background-repeat: no-repeat !important;
		background-size: contain !important;
		display: inline-block;
		width: 34px;
		height: 51px;
		position: relative;
	}
	&::before {
		background: url("../images/common/ttl_line_left.svg");
	}
	&::after {
		background: url("../images/common/ttl_line_right.svg");
	}
}











/* ==========================================================
   2026-08-27: 選ばれる7つの理由 599px以下レスポンシブ
   600px版の構成を維持し、固定pxによる横はみ出しを解消
   ========================================================== */
@media screen and (max-width: 599px) {
	/* ページ内ナビは600px版のカード感を保って2列へ縮小 */
	.page_navi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(8px, 2.667vw, 16px);
		margin-block: clamp(24px, 5.333vw, 32px) clamp(36px, 10.667vw, 64px);
	}

	.page_navi li {
		min-width: 0;
	}

	.page_navi li a {
		padding: clamp(10px, 2.667vw, 16px) 5px clamp(20px, 5.333vw, 32px);
	}

	/* 見出し・本文は600px時のサイズを上限に滑らかに縮小 */
	.sec_inner_box .sec_inner_box_ttl > small {
		font-size: clamp(14px, 3.66667vw, 22px);
	}

	.sec_inner_box .sec_inner_box_ttl > .sec_ttl {
		font-size: clamp(20px, 4.66667vw, 28px);
		line-height: 1.35;
	}

	.sec_box_txt {
		font-size: clamp(15px, 3vw, 18px);
		line-height: 1.7;
	}

	/* 写真群：固定190pxをやめ、600px版の配置感を保った2列グリッド */
	.sec_photo .photo_sub {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(8px, 2.667vw, 16px);
	}

	.sec_photo .photo_sub li {
		min-width: 0;
	}

	.sec_photo .photo_sub li > picture {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.sec_photo .photo_sub li > picture img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.sec_photo .photo_sub li .photo_ttl {
		font-size: clamp(13px, 2.66667vw, 16px);
		padding: clamp(3px, 0.833vw, 5px) clamp(8px, 2.667vw, 16px);
		margin-top: clamp(6px, 1.667vw, 10px);
	}

	/* 全410室：600px版の写真比率を保ちながら2列化 */
	section#scale .sec_photo .photo_sub {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	section#scale .sec_photo .photo_sub li > picture {
		height: auto;
		aspect-ratio: 140 / 126;
	}

	/* お部屋セクションのラベル位置は写真サイズに追従 */
	section#room .photo_sub li {
		min-width: 0;
	}

	section#room .photo_sub li .photo_ttl {
		bottom: clamp(6px, 1.667vw, 10px);
	}

	/* 学費比較：画面高(vh)依存をやめ、横幅に比例して縮小 */
	.fee_inner {
		height: auto;
		min-height: clamp(290px, 75.6vw, 453.6px);
	}

	.fee_inner .fee_bg {
		max-width: 58%;
		height: 100%;
		object-fit: contain;
		object-position: right bottom;
	}

	.fee_inner .fee_check {
		max-width: 72%;
		margin-block: clamp(18px, 5.333vw, 32px);
	}

	.fee_inner .fee_check li {
		min-width: 0;
		font-size: clamp(13px, 2.66667vw, 16px);
	}

	.fee_inner .fee_ttl {
		font-size: clamp(15px, 3.33334vw, 20px);
	}

	/* 480px固定だった比較表を親幅内に収める */
	.fee_table_wrap {
		width: 100%;
		max-width: 480px;
		min-width: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.fee_table_wrap .fee_table {
		width: 100%;
		min-width: 0;
		table-layout: fixed;
	}

	.fee_table_wrap .fee_table tr > * {
		padding: clamp(4px, 1.333vw, 8px) clamp(4px, 1.667vw, 10px);
		font-size: clamp(11px, 2.33334vw, 14px);
		overflow-wrap: anywhere;
	}

	.fee_table_wrap .fee_table th > small {
		font-size: clamp(10px, 2vw, 12px);
	}

	.fee_caution li {
		font-size: clamp(11px, 2vw, 12px);
	}

	.normal_price dt {
		font-size: clamp(18px, 4.66667vw, 28px);
	}

	/* 元気くらぶ：left:20px固定による右はみ出しを解除 */
	.facility_wrap .facility_lineup.genkiclub_lineup li {
		left: 0;
	}

	.genkiclub_lineup,
	.genkiclub_lineup .slick-list,
	.genkiclub_lineup .slick-track {
		min-width: 0;
	}

	.genkiclub_lineup li picture {
		height: auto !important;
		aspect-ratio: 218 / 134;
	}

	.genkiclub_lineup li picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.genkiclub_lineup .facility_name,
	.genkiclub_lineup + * {
		min-width: 0;
	}

	.genkiclub_lineup .facility_name {
		font-size: clamp(16px, 3.66667vw, 22px);
	}

	.genki_facility_ttl {
		font-size: clamp(20px, 4.66667vw, 28px);
		column-gap: clamp(8px, 2.667vw, 16px);
	}

	.genki_facility_ttl::before,
	.genki_facility_ttl::after {
		width: clamp(24px, 5.667vw, 34px);
		height: auto;
		aspect-ratio: 34 / 51;
	}
}