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

section {
	padding-bottom: 0px;
}

.flow_list {
	margin-block: 2rem 0rem;
	display: grid;
	row-gap: 2rem;
	position: relative;
	&::after {
		content: '';
		background: #E1DFD9;
		display: inline-block;
		width: 24px;
		height: 100%;
		top: 0px;
		left: 22px;
		position: absolute;
		z-index: 0;
	}
	dl {
		display: grid;
		grid-template-columns: 65px auto;
		column-gap: 3rem;
		position: relative;
		.flow_num {
			span {
				display: grid;
				justify-content: center;
				position: relative;
				color: #FFF;
				background: var(--main-green);
				border-radius: 100px;
				font-size: clamp(18px, 3.66667vw, 22px);
				line-height: 1;
				text-align: center;
				width: 100%;
				padding-block: 14.5px;
				z-index: 1;
				&::before {
					font-size: clamp(15px, 3vw, 18px);
					display: inline-block;
					position: relative;
				}
				&.morning::before {
					content: '午前';
				}
				&.afternoon::before {
					content: '午後';
				}
			}
		}
		dd {
			margin-block: 1rem;
			.flow_list_inner {
				.flow_list_ttl {
					color: var(--main-green);
					border-bottom: 2px solid var(--main-green);
					font-size: clamp(18px, 4vw, 24px);
				}
				.flow_list_img {
					display: flex;
					margin-block: 1rem;
					border-radius: 10px;
					overflow: hidden;
					height: 250px;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					&.photo_memo {
						display: flex;
						position: relative;
						&::before {
							content: '※写真はイメージです。';
							right: 20px;
							bottom: 5px;
							position: absolute;
							font-size: 12px;
							font-family: '游ゴシックMedium';
						}
					}
				}
				.flow_list_txt {
					font-size: clamp(15px, 3vw, 18px);
					font-family: '游ゴシックMedium';
					text-align: justify;
					line-height: 160%;
					margin-block: 1rem;
				}
			}
			.flow_sub_photo {
				.flow_sub_photo_inner {
					display: grid;
					.half_box {
						display: grid;
						grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
						gap: 1rem;
					}
					.photo_ttl {
						margin-block: 0px;
						text-align: center;
						line-height: 1;
					}
					&.ito_spa {
						display: grid;
						gap: 5px;
						li {
							display: grid;
							gap: 5px;
							picture {
								display: flex;
								border-radius: 10px;
								overflow: hidden;
							}
							.half_box {
								gap: 5px;
							}
						}
					}
				}
			}
			.flow_inner_catch {
				font-size: clamp(18px, 3.66667vw, 22px);
				line-height: 130%;
				margin-top: 2rem;
			}
			.flow_orange_box {
				margin-top: 2rem;
				.flow_orange_link {
					font-size: clamp(18px, 3.66667vw, 22px);
					background: #CD5E16;
					border-radius: 50px;
					color: #FFF;
					display: inline-flex;
					justify-content: center;
					padding: 2px 3rem;
					margin-bottom: 1rem;
				}
			}
		}
	}
}



/* ----------------------------------------------
施設紹介
---------------------------------------------- */
section#genki {
	background: #FCFAF4;
	padding-block: var(--design-vh-6);
	z-index: 1;
	position: relative;
	.genki_ttl {
		color: #CD5E16;
		font-size: clamp(22px, 4.66667vw, 28px);
		text-align: center;
	}
	.genki_desc {
		font-size: clamp(14px, 2.66667vw, 16px);
		font-family: '游ゴシックMedium';
		text-align: justify;
		line-height: 160%;
		margin-block: 1rem;
	}
}

.facility_wrap {
	.facility_lineup {
		li {
			background: #FFF;
			border-radius: 10px;
			overflow: hidden;
			.facility_name {
				color: #CD5E16;
			}
		}
	}
}

.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");
	}
}

/* 帽子背景の円は600px版の構図を維持して全幅で表示 */
body.oneday .page_green_ttl_inner {
	isolation: isolate;
}

body.oneday .page_green_ttl_inner::before {
	z-index: 0;
}

body.oneday .page_green_ttl_inner > picture,
body.oneday .page_green_ttl_inner > small,
body.oneday .page_green_ttl_inner > .page_green_ttl {
	position: relative;
	z-index: 1;
}

/* XD 600px：メイン写真 417×232px。幅だけ可変し比率は維持する */
body.oneday .flow_list dl dd .flow_list_inner .flow_list_img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 417 / 232;
}

body.oneday .flow_list dl dd .flow_list_inner .flow_list_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ----------------------------------------------
599px以下：600px版の構図を同比率で可変
---------------------------------------------- */
@media screen and (max-width: 599px) {
	body.oneday .page_green_ttl_inner {
		height: 23.333vw;
		min-height: 112px;
		max-height: 140px;
		padding-bottom: 0;
	}

	body.oneday .page_green_ttl_inner::before {
		width: 15vw;
		height: 15vw;
		max-width: 90px;
		max-height: 90px;
		top: -5vw;
	}

	body.oneday .page_green_ttl_inner > small {
		font-size: clamp(18px, 4vw, 24px);
	}

	body.oneday .page_green_ttl_inner .page_green_ttl {
		font-size: clamp(28px, 7.33334vw, 44px);
	}

	body.oneday .page_green_ttl_wrap .breadcrumb {
		margin-bottom: 0;
	}

	body.oneday .flow_list {
		margin-top: 0;
		row-gap: clamp(20px, 5.333vw, 32px);
	}

	body.oneday .flow_list::after {
		left: 4.333vw;
		width: 4vw;
	}

	body.oneday .flow_list dl {
		grid-template-columns: 12.667vw minmax(0, 1fr);
		column-gap: 8vw;
	}

	body.oneday .flow_list dl .flow_num span {
		box-sizing: border-box;
		width: 100%;
		aspect-ratio: 1;
		align-content: center;
		padding-block: 0;
		font-size: clamp(18px, 3.66667vw, 22px);
	}

	body.oneday .flow_list dl .flow_num span::before {
		font-size: clamp(14px, 3vw, 18px);
	}

	body.oneday .flow_list dl dd .flow_list_inner .flow_list_ttl {
		font-size: clamp(18px, 4.33334vw, 26px);
	}

	body.oneday .flow_list dl dd .flow_list_inner .flow_list_txt {
		font-size: clamp(15px, 3vw, 18px);
	}

	body.oneday .flow_list dl dd .flow_inner_catch,
	body.oneday .flow_list dl dd .flow_orange_box .flow_orange_link {
		font-size: clamp(18px, 3.66667vw, 22px);
	}

	/* 600px版と同じ：half_box内の写真は必ず横2列 */
	body.oneday .flow_list .flow_sub_photo .flow_sub_photo_inner .half_box {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.oneday .flow_list .flow_sub_photo picture,
	body.oneday .flow_list .flow_sub_photo picture img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* 元気くらぶ：600px版の3枚構成と206×134pxの写真比率を維持 */
	body.oneday #genki .genkiclub_lineup .slick-list {
		left: -18.333vw;
	}

	body.oneday #genki .genkiclub_lineup .slick-slide {
		margin-right: 1.667vw;
	}

	body.oneday #genki .genkiclub_lineup .slick-slide picture {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 206 / 134;
	}

	body.oneday #genki .genkiclub_lineup .slick-slide picture img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	body.oneday #genki .genkiclub_lineup .facility_name {
		padding: 1.667vw;
	}
}

/* ----------------------------------------------
600px以上：XD「セトル伊都の一日」の固定値
---------------------------------------------- */
@media screen and (min-width: 600px) {
	body.oneday .page_green_ttl_inner {
		box-sizing: border-box;
		width: 540px;
		height: 140px;
		padding-bottom: 0;
	}

	body.oneday .page_green_ttl_inner > small {
		font-size: 24px;
	}

	body.oneday .page_green_ttl_inner .page_green_ttl {
		font-size: 44px;
	}

	body.oneday .main_inner > section {
		border-radius: 0 !important;
		overflow: visible !important;
		clip-path: none !important;
	}

	body.oneday .flow_list {
		margin-top: 0;
		row-gap: 32px;
	}

	/* パンくず下とsection上の余白を二重にしない */
	body.oneday .page_green_ttl_wrap .breadcrumb {
		margin-bottom: 0;
	}

	body.oneday .flow_list dl {
		grid-template-columns: 76px minmax(0, 1fr);
		column-gap: 48px;
	}

	body.oneday .flow_list dl .flow_num span {
		font-size: 22px;
	}

	body.oneday .flow_list dl .flow_num span::before {
		font-size: 18px;
	}

	body.oneday .flow_list dl dd .flow_list_inner .flow_list_ttl {
		font-size: 26px;
	}

	body.oneday .flow_list dl dd .flow_list_inner .flow_list_txt {
		font-size: 18px;
	}

	body.oneday .flow_list dl dd .flow_inner_catch,
	body.oneday .flow_list dl dd .flow_orange_box .flow_orange_link {
		font-size: 22px;
	}
}