#front_page {
	.main_visual {
		position: relative;
		.photo {
			width: 100%;
			height: auto;
		}
		&:after {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
			background-size: 100% 100%;
			background-image: url("../images/front-page/main-visual-effect.avif");
		}
		.text {
			position: absolute;
			top: 4%;
			left: 10%;
			width: 8%;
			z-index: 2;
		}
	}
	.banner {
		text-align: center;
		margin: 2em;
	}
	#news {
		max-width: var(--content-width);
		margin-top: 3em;
		margin-inline: auto;
		padding-inline: 1em;
		.posts {
			display: flex;
			align-items: center;
			justify-content: center;
			ul {
				list-style-type: none;
				padding-left: 0;
				margin-top: 2em;
				display: flex;
				flex-direction: column;
				gap: 2em;
			}
			.post {
				display: flex;
				align-items: center;
				gap: 2em 1em;
			}
			.date {
				width: 6em;
			}
			.category {
				width: 8em;
				border: 1px solid var(--text-color);
				text-align: center;
				padding: 0.2em 0.5em;
			}
			.title {
				flex: 1;
				line-height: 1.4em;
				text-decoration: none;
			}
		}
		.link {
			text-align: center;
			margin-top: 5em;
			a {
				display: inline-block;
				padding: 0.5em;
				max-width: 20em;
				border: 1px solid var(--text-color);
				width: 100%;
				text-decoration: none;
				position: relative;
				&::after {
					content: '';
					width: 1em;
					height: 1em;
					background-image: url("../images/front-page/arrow.svg");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					position: absolute;
					top: 50%;
					right: 0.5em;
					transform: translateY(-50%);
				}
			}
		}
	}
	.lineup_section {
		margin-top: 3em;
		background-color: #E1C1DE26;
		padding: 5em 0;
		position: relative;
		&::before {
			content: '';
			position: absolute;
			bottom: 100%;
			height: 0.5em;
			width: 100%;
			display: block;
			background: linear-gradient(#E1C1DE00, #E1C1DE26);
		}
		&::after {
			content: '';
			position: absolute;
			top: 100%;
			height: 0.5em;
			width: 100%;
			display: block;
			background: linear-gradient(#E1C1DE26, #E1C1DE00);
		}
		.content {
			display: flex;
			gap: 2em;
			align-items: flex-end;
			.wrap {
				padding-bottom: 2em;
			}
		}
		.photo {
			flex: 1;
			margin: 0;
			img {
				width: 100%;
			}
			figcaption {
				text-align: center;
				font-size: calc(15 * var(--px));
				margin-top: 1em;
			}
		}
		.wrap {
			flex: 1;
		}
		.text {
			max-width: calc(var(--content-width) / 2);
			display: flex;
			flex-direction: column;
			gap: 2em;
			padding-inline: 1em;
		}
		.title {
			font-size: calc(22 * var(--px));
			font-weight: normal;
			padding-bottom: 1em;
			margin-bottom: 1em;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 75%;
				display: block;
				margin-right: auto;
				border-bottom: 2px solid var(--theme-color);
			}
		}
		.description {
			line-height: 2em;
		}
		.link {
			max-width: calc(var(--content-width) / 2);
			margin-top: 3em;
			padding-inline: 1em;
			margin-left: auto;
			text-align: center;
			a {
				display: inline-block;
				color: #fff;
				text-decoration: none;
				max-width: 15em;
				width: 100%;
				margin-left: auto;
				margin-right: auto;
				padding: 0.5em;
				background-color: var(--theme-color);
				position: relative;
				&::after {
					content: '';
					width: 1em;
					height: 1em;
					background-image: url("../images/front-page/arrow-white.svg");
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					position: absolute;
					top: 50%;
					right: 0.5em;
					transform: translateY(-50%);
				}
			}
		}
	}
	#hot_springs {
		.hot_springs_title {
			font-family: "Shippori Mincho";
			writing-mode: vertical-rl;
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;
			flex-direction: column;
			position: absolute;
			top: 1em;
			right: 0;
			width: 187px;
			height: 176px;
			background-image: url("../images/front-page/hot-springs-title.avif");
			white-space: nowrap;
			.jp {
				margin: 0;
				margin-top: 0.5em;
				font-size: calc(55 * var(--px));
				font-weight: normal;
			}
			.en {
				margin: 0;
				margin-top: 2.5em;
				margin-left: 1em;
				font-size: calc(22 * var(--px));
			}
		}
		.content {
			&:nth-of-type(1) {
				.wrap {
					padding-top: 115px;
				}
			}
			&:nth-of-type(2n) {
				.photo {
					order: 2;
				}
				.wrap {
					order: 1;
					.text {
						margin-left: auto;
					}
				}
			}
		}
	}
	#food {
		background-color: #83C48A26;
		padding: 2em 0;
		.food_title {
			font-family: "Shippori Mincho";
			position: absolute;
			top: 0;
			left: 1em;
			width: 160px;
			height: 260px;
			writing-mode: vertical-rl;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			flex-direction: column;
			background-image: url("../images/front-page/food-title.avif");
			background-repeat: no-repeat;
			background-position: left bottom;
			background-size: contain;
			.jp {
				margin: 0;
				margin-top: 0.5em;
				font-size: calc(55 * var(--px));
				font-weight: normal;
			}
			.en {
				margin: 0;
				margin-top: 2.5em;
				margin-left: 1em;
				font-size: calc(22 * var(--px));
			}
		}
		.photo {
			order: 2;
			img {
				aspect-ratio: 720 / 410;
				object-fit: cover;
			}
		}
		.wrap {
			order: 1;
			.text {
				margin-left: auto;
				max-width: calc(var(--content-width) / 2.5);
			}
		}
		.wrap2 {
			padding-left: 200px;
		}
		.link a {
			background-color: #83C48A;
		}
	}
	#room {
		padding: 2em 0;
		.room_title {
			font-family: "Shippori Mincho";
			position: absolute;
			top: 0;
			right: 1em;
			width: 160px;
			height: 205px;
			writing-mode: vertical-rl;
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;
			flex-direction: column;
			background-image: url("../images/front-page/room-title.avif");
			background-repeat: no-repeat;
			background-position: left bottom;
			background-size: contain;
			.jp {
				margin: 0;
				margin-top: 0.5em;
				font-size: calc(55 * var(--px));
				font-weight: normal;
			}
			.en {
				margin: 0;
				margin-top: 2.5em;
				font-size: calc(22 * var(--px));
			}
		}
		.photo {
			img {
				aspect-ratio: 720 / 410;
				object-fit: cover;
			}
		}
		.wrap {
			.text {
				max-width: calc(var(--content-width) / 2.5);
			}
		}
		.link {
			margin-left: 0;
			margin-right: auto;
		}
		.wrap2 {
			padding-right: 200px;
		}
	}
	#facilities {
		padding: 2em 0;
		.facilities_title {
			font-family: "Shippori Mincho";
			position: absolute;
			top: 0;
			left: 1em;
			width: 130px;
			height: 240px;
			writing-mode: vertical-rl;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			flex-direction: column;
			background-image: url("../images/front-page/facilities-title.avif");
			background-repeat: no-repeat;
			background-position: left bottom;
			background-size: contain;
			.jp {
				margin: 0;
				margin-top: 0.5em;
				font-size: calc(32 * var(--px));
				font-weight: normal;
				letter-spacing: 0.2em;
			}
			.en {
				margin: 0;
				margin-top: 2.5em;
				font-size: calc(22 * var(--px));
			}
		}
		.photo {
			order: 2;
			img {
				aspect-ratio: 720 / 410;
				object-fit: cover;
			}
		}
		.wrap {
			order: 1;
			.text {
				margin-left: auto;
				max-width: calc(var(--content-width) / 2.5);
			}
		}
		.wrap2 {
			padding-left: 200px;
		}
	}
	#accommodation {
		background-color: #83C48A26;
		padding: 2em 0;
		.accommodation_title {
			font-family: "Shippori Mincho";
			position: absolute;
			bottom: 2em;
			right: 1em;
			width: 200px;
			height: 400px;
			writing-mode: vertical-rl;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-image: url("../images/front-page/accommodation-title.avif");
			background-repeat: no-repeat;
			background-position: left top;
			background-size: contain;
			white-space: nowrap;
			.jp {
				margin: 0;
				margin-top: 0.5em;
				font-size: calc(32 * var(--px));
				font-weight: normal;
				letter-spacing: 0.2em;
			}
			.en {
				margin: 0;
				margin-top: 2.5em;
				margin-left: 1em;
				font-size: calc(22 * var(--px));
			}
		}
		.photo {
			span {
				display: block;
				margin-right: clamp(
					-40%,  /* 下限 */
					calc(1100px - 100vw), /* 補間式 */
					0%     /* 上限 */
				);
			}
		}
		.wrap {
			margin-bottom: 0;
			.text {
				max-width: calc(var(--content-width) / 2.5);
			}
		}
		.link {
			margin-left: 0;
			margin-right: auto;
			max-width: calc(var(--content-width) / 2.5);
			text-align: left;
			a {
				text-align: center;
				background-color: #83C48A;
			}
		}
		.wrap2 {
			padding-right: 200px;
		}
	}
	#entertain {
		padding: 2em 0;
		.entertain_title {
			font-family: "Shippori Mincho";
			position: absolute;
			bottom: 2em;
			left: 0;
			width: 120px;
			height: 430px;
			writing-mode: vertical-rl;
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
			flex-direction: column;
			background-image: url("../images/front-page/entertain-title.avif");
			background-repeat: no-repeat;
			background-position: left top;
			background-size: contain;
			white-space: nowrap;
			.jp {
				margin: 0;
				margin-top: 0.5em;
				font-size: calc(32 * var(--px));
				font-weight: normal;
				letter-spacing: 0.2em;
			}
			.en {
				margin: 0;
				margin-bottom: 7em;
				font-size: calc(22 * var(--px));
			}
		}
		.photo {
			order: 2;
			span {
				display: block;
				margin-left: clamp(
					-40%,  /* 下限 */
					calc(1100px - 100vw), /* 補間式 */
					0%     /* 上限 */
				);
			}
		}
		.wrap {
			order: 1;
			.text {
				margin-left: auto;
				max-width: calc(var(--content-width) / 2.5);
			}
		}
		.link {
			max-width: calc(var(--content-width) / 2.5);
			text-align: left;
			a {
				text-align: center;
			}
		}
		.wrap2 {
			padding-left: 135px;
		}
	}
	#reservation {
		background-image: url("../images/front-page/reservation.avif");
		background-size: cover;
		background-position: top center;
		padding: 2em 1em 5em;
		margin-top: 5em;
		position: relative;
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			display: block;
			opacity: 0.5;
		}
		.container {
			position: relative;
			z-index: 2;
			max-width: 650px;
			margin-inline: auto;
			padding: 4em;
			text-align: center;
			&::before {
				content: "";
				position: absolute;
				inset: 0;
				background: #f4f4f4e6;
				filter: blur(0.5em);
				z-index: -1; /* 背景側に置く */
				border-radius: inherit; /* 角丸要素にも対応 */
			}
		}
		.title {
			margin-top: 0;
			font-size: calc(32 * var(--px));
			font-weight: normal;
			font-family: "Shippori Mincho";
		}
		.description {
			line-height: 2em;
		}
		.link {
			margin-bottom: 0;
			a {
				display: inline-block;
				color: #fff;
				text-decoration: none;
				padding: 1em 3em;
				background-color: #83c48a;
			}
		}
	}
	#access {
		max-width: var(--content-width);
		margin-top: 3em;
		margin-inline: auto;
		padding-inline: 1em;
		iframe {
			width: 100%;
			height: 438px;
		}
		.text {
			margin-top: 1em;
			margin-left: 5em;
			margin-right: 1em;
			address {
				font-style: normal;
			}
		}
	}
}