@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
/* ============================== */
/*  TOPPAGE */
/* ============================== */
:where(.top-section) {
	padding-inline: var(--base-inline-margin);
}
.hero {
	position: relative;
	& .overlay-text {
		display: none;
	}
}
@media (768px <=width), print {
	.hero {
		& img.hero-image {
			inline-size: 100%;
			block-size: 100%;
			max-block-size: calc(100vh - var(--global-header-height));
			object-fit: cover;
		}
		& .overlay-text {
			display: block;
			position: absolute;
			left: var(--base-inline-margin);
			bottom: 2em;
			text-align: center;
			& dt {
				background-color: var(--white);
				inline-size: fit-content;
				background-color: var(--pink);
				color: var(--white);
				font-size: 15px;
				line-height: 1.5;
				padding: 0.19117647em 1.25em 0.19117647em calc(1.25em + var(--font-spacing));
				border-radius: 5px;
				margin: 0 auto calc(calc(0.19117647em + 0.75em) * -1);
				position: relative;
				z-index: 1;
				font-weight: var(--font-normal);
			}
			& dd {
				background-color: var(--white);
				font-size: 32px;
				line-height: 1.5;
				padding: 0.5em 1.25em 0.35em;
				border-radius: 10px;
				& .tel-num {
					display: flex;
					align-items: center;
					justify-content: center;
					padding-inline-start: var(--font-spacing);
					gap: 0.3em;
					&::before {
						content: "";
						inline-size: calc(33 / 42 * 1em);
						aspect-ratio: 1;
						background: url("../images/ico_tel.svg") no-repeat center;
						position: relative;
						top: 0.07em;
					}
				}
				& .note {
					font-weight: var(--font-bold);
					font-size: 12px;
					display: block;
					padding-inline-start: var(--font-spacing);
				}
			}
			& a {
				text-decoration: none;
				color: inherit;
			}
		}
	}
}
@media (1132px <=width), print {
	.hero {
		& .overlay-text {
			bottom: 5em;
			& dt {
				font-size: 17px;
			}
			& dd {
				font-size: 42px;
			}
			& .note {
				font-size: 13px;
			}
		}
	}
}
section.top-news {
	background-color: var(--pink);
	padding: 56px var(--base-inline-margin) 63px;
	& h2 {
		color: var(--white);
		margin-block-end: 0.75em;
	}
	& .section-body {
		position: relative;
	}
}
@media (768px <=width), print {
	section.top-news {
		& h2 {
			text-align: left;
			padding-inline-start: 0;
			& .en {
				padding-inline-start: 0;
			}
		}
	}
}
.top-news-list {
	background-color: var(--white);
	border-radius: 10px;
	padding: 0 2em;
	font-size: 15px;
	& li {
		padding: 1em 0;
	}
	& li:not(:first-child) {
		border-block-start: 1px solid #d3d3d3;
	}
	& time {
		display: block;
		font-size: 0.9em;
	}
	& a {
		display: block;
		padding-inline-start: 1em;
		text-decoration: none;
		color: inherit;
		@media(any-hover: hover) {
			&:hover {
				color: var(--pink);
			}
		}
	}
}
@media (768px <=width), print {
	.top-news-list {
		font-size: 17px;
		& li {
			padding: 1em 1em;
		}
		& time {
			display: inline-block;
			font-size: 1em;
			inline-size: 6.5em;
		}
		& a {
			display: inline;
			padding-inline-start: 0;
		}
	}
}
.top-news .show-list {
	margin-block-start: 1em;
	& a {
		color: var(--white);
		font-size: 14px;
		text-decoration: none;
		display: flex;
		align-items: center;
		gap: 0.25em;
		&::before {
			content: "";
			inline-size: 1em;
			aspect-ratio: 1;
			background: url("../images/arr_3r.svg") no-repeat center;
		}
		@media(any-hover: hover) {
			&:hover {
				text-decoration: underline;
			}
		}
	}
}
@media (768px <=width), print {
	.top-news .show-list {
		font-size: 16px;
		position: absolute;
		top: -3em;
		right: 0;
		margin-block-start: 0;
	}
}
section.top-specialities {
	background: url("../images/bg_flower.jpg") center top -20px;
	background-size: 956px;
	padding: var(--block-margin-80) var(--base-inline-margin) var(--block-margin-80);
	& h2 {
		color: #4d4d4d;
		& .en {
			color: var(--pink);
		}
	}
}
.top-specialities-list {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 10px;
	& li {
		inline-size: calc(calc(100% - 10px) / 2);
	}
	& .thumb {
		overflow: hidden;
	}
	& .label {
		font-size: 18px;
		margin-block-start: 0.4em;
		line-height: 1.3;
		color: var(--text-color);
		font-weight: var(--font-medium);
	}
	& a {
		text-decoration: none;
		@media(any-hover: hover) {
			& .thumb img {
				transition: 200ms;
			}
			&:hover {
				& .thumb img {
					scale: 1.05;
					opacity: 0.7;
				}
				background-color: var(--gold-light);
			}
		}
	}
}
@media (768px <=width), print {
	.top-specialities-list {
		gap: 40px 13px;
		& li {
			inline-size: calc(calc(100% - 13px * 2) / 3);
		}
		& .label {
			font-size: 21px;
		}
	}
}
@media (1132px <=width), print {
	.top-specialities-list {
		gap: 54px 16px;
		& li {
			inline-size: calc(calc(100% - 16px * 3) / 4);
		}
	}
}
section.top-worries {
	background: var(--beige);
	padding: var(--block-margin-80) 0 0;
	& h2 {
		color: var(--pink);
		& .en {
			color: #666666;
		}
	}
	& .section-foot-image {
		inline-size: min(70%, 534px);
		margin: 50px auto 0;
	}
}
.top-worries-list {
	font-size: min(3.38164251vw, 14px);
	margin-inline: auto;
	max-inline-size: 53em;
	padding-inline: 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	line-height: 1.3;
	text-align: center;
	gap: 1.6em 1em;
	font-family: "Kosugi Maru", sans-serif;
	font-weight: var(--font-normal);
	font-style: normal;
	& li {
		position: relative;
		& a {
			display: block;
			padding: 0.5em 1em 0.5em calc(1em + var(--font-spacing));
			border: 1px solid #d7d7d7;
			border-radius: calc(20 / 16 * 1em);
			background-color: var(--white);
			letter-spacing: 0;
			text-decoration: none;
			transition: 300ms;
			translate: 0 1px;
			color: var(--text-color);
			&::after {
				content: "";
				inline-size: 50px;
				block-size: 12px;
				position: absolute;
				bottom: -12px;
				left: calc(calc(100% - 50px) / 2);
				background: url("../images/top/balloon-edge_1lg.svg") no-repeat;
			}
			@media(any-hover: hover) {
				&:hover {
					background-color: var(--pink-pale);
					translate: 0 -12px;
					&::after {
						background-image: url("../images/top/balloon-edge_1lg-hvr.svg");
					}
				}
			}
		}
		&:first-child {
			top: -0.5em;
		}
		&:nth-child(2) {
			top: 0;
		}
		&:nth-child(3) {
			top: -0.5em;
		}
		&:nth-child(4) {
			top: 0;
		}
		&:nth-child(5) {
			top: 0.5em;
		}
		&:nth-child(6) {
			top: -0.5em;
		}
		&:nth-child(7) {
			top: 0.5em;
		}
		&:nth-child(8) {
			top: 0;
		}
		&:nth-child(9) {
			top: 1em;
		}
		&:nth-child(10) {
			top: 0;
		}
		&:nth-child(11) {
			top: 1em;
		}
		&:nth-child(12) {
			top: 1em;
		}
	}
}
@media (768px <=width), print {
	.top-worries-list {
		font-size: 15px;
		gap: 1.6em 1.3em;
		li {
			&:nth-child(4) {
				top: 1em;
			}
			&:nth-child(5) {
				top: -0.5em;
			}
			&:nth-child(11) {
				top: 0.5em;
			}
		}
	}
}
@media (1132px <=width), print {
	.top-worries-list {
		font-size: 16px;
		gap: 1.8em 1.8em;
		max-inline-size: 69em;
		& li {
			&:nth-child(2) {
				top: 1em;
			}
			&:nth-child(6) {
				top: 0.5em;
			}
			&:nth-child(7) {
				top: 0.3em;
			}
			&:nth-child(8) {
				top: 2em;
			}
			&:nth-child(8) {
				top: 2.4em;
			}
			&:nth-child(9) {
				top: 0em;
			}
			&:nth-child(10) {
				top: 1.5em;
			}
			&:nth-child(12) {
				top: 1.5em;
			}
		}
	}
}
section.top-family-room {
	--_section-block-padding: 40px;
	--_border-radius: 10px;
	--_overlap: 40px;
	--_block-shift: 40px;
	background-color: var(--pink-medium);
	padding: var(--_section-block-padding) 0;
	font-size: 15px;
	position: relative;
	& .text {
		position: relative;
		z-index: 2;
		background-color: var(--white);
		border-radius: var(--_border-radius) 0 0 var(--_border-radius);
		padding: 1em;
		margin-inline-start: auto;
		inline-size: calc(calc(100% + var(--_overlap)) / 2);
		margin-block-start: var(--_block-shift);
		& h2 {
			font-size: 18px;
			line-height: 1.3;
			color: var(--pink);
			padding-inline-start: 0;
			text-align: left;
			margin-block-end: 0.25em;
			& span {
				display: inline-block;
			}
		}
		& .view-more {
			margin-block-start: 0.5em;
			& a {
				text-decoration: none;
			}
		}
	}
	& .image {
		inline-size: calc(calc(100% + var(--_overlap)) / 2);
		block-size: calc(100% - var(--_section-block-padding) * 2 - var(--_block-shift));
		position: absolute;
		top: var(--_section-block-padding);
		left: 0;
		z-index: 1;
		& img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
			border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
		}
	}
}
@media (768px <=width), print {
	section.top-family-room {
		--_section-block-padding: 50px;
		--_border-radius: 10px;
		--_overlap: 40px;
		padding: var(--_section-block-padding) var(--base-inline-margin);
		font-size: 15px;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		& .text {
			padding: 1.2em;
			margin-inline-start: calc(var(--_overlap) * -1);
			margin-block-start: 0;
			border-radius: var(--_border-radius);
			& h2 {
				font-size: 20px;
			}
		}
		& .image {
			position: relative;
			z-index: 1;
			margin: 0;
			top: 0;
			& img {
				border-radius: var(--_border-radius);
			}
		}
	}
}
@media (1132px <=width), print {
	section.top-family-room {
		& .text {
			padding: 2em;
			& h2 {
				font-size: 25px;
				margin-block-end: 0.5em;
			}
			& .view-more {
				margin-block-start: 1.5em;
			}
		}
	}
}
.top-other-contents {
	padding: 45px var(--base-inline-margin);
	display: grid;
	grid-template-areas:
		"payment inquiry"
		"recruit recruit";
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	gap: 35px 10px;
	inline-size: 100%;
	overflow: hidden;
	& .payment {
		grid-area: payment;
	}
	& .inquiry {
		grid-area: inquiry;
	}
	& .recruit {
		grid-area: recruit;
	}
}
@media (768px <=width), print {
	.top-other-contents {
		padding-block: 70px;
		gap: 62px 20px;
	}
}
@media (1132px <=width), print {
	.top-other-contents {
		padding-block: 90px;
		gap: 82px 40px;
	}
}
.top-other-contents .payment, .top-other-contents .inquiry {
	font-size: 18px;
	inline-size: 100%;
	overflow: hidden;
	position: relative;
	& .bg-image {
		transition: 400ms;
	}
	& .label {
		inline-size: 100%;
		block-size: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgb(0 0 0 / 0.2) url("../images/arr_4r.svg") no-repeat bottom 0.5em right 0.5em;
		background-size: 1em;
		font-weight: var(--font-bold);
		text-shadow: 0px 0px 5px rgb(0 0 0 / 1.0);
		display: grid;
		place-items: center;
		padding-inline-start: var(--font-spacing);
		transition: 400ms;
		color: var(--white);
	}
	& a {
		transition: 400ms;
		@media(any-hover: hover) {
			&:hover {
				& .bg-image {
					scale: 1.07;
				}
				& .label {
					background-color: rgb(0 0 0 / 0.05);
					background-position: bottom 0.5em right 0.3em;
				}
			}
		}
	}
}
@media (1132px <=width), print {
	.top-other-contents .payment, .top-other-contents .inquiry {
		font-size: 21px;
		& .label {
			background-position: bottom 1em right 1em;
		}
		& a {
			@media(any-hover: hover) {
				&:hover {
					& .label {
						background-position: bottom 1em right 0.5em;
					}
				}
			}
		}
	}
}
.top-other-contents .recruit {
	margin-inline: auto;
	& img {
		inline-size: calc(1282 / 1192 * 100%)
	}
	@media(any-hover: hover) {
		& a:hover {
			opacity: 0.7;
		}
	}
}
@media (768px <=width), print {
	.top-other-contents .recruit {
		inline-size: min(70%, 596px);
	}
}