/* CSS Document */

#pagePath{
	display: none;
	}

#main{
	overflow: hidden;
	@media (min-width: 992px) {
		grid-column: 1;
		grid-row: 1 / 3;
	}
}

#hero{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-bottom: calc(clamp(32px, calc(48 / 1200 * 100vw), 48px) * 2);
	#heroSlide{
		grid-column: 2 / 4;
		grid-row: 1;
	}
	#heroCopy{
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
	}
	#movie{
		grid-column: 2;
		grid-row: 1;
	}
}

#heroSlide{
	@media (min-width: 992px) {
		display: grid;
		grid-template-columns: 0.25fr 1fr;
		.slick-list{
			grid-column: 2;
		}
	}
	& img{
		aspect-ratio: 6 / 4;
		width: 100%;
		height: clamp(265px, calc(840 / 1200 * 100vw), 840px);
		object-fit: cover;
		border-bottom-left-radius: clamp(40px, calc(80 / 1200 * 100vw), 80px);
	}
}

#heroCopy{
	position: relative;
	margin-top: clamp(170px, calc(360 / 1200 * 100vw), 360px);
	.subject {
		position: relative;
		display: grid;
		align-items: center;
		min-height: 80px;
		font-size: clamp(24px, calc(48 / 1200 * 100vw), 48px);
		letter-spacing: 0.1em;
		text-align: left;
		color: #fff;
		z-index: 1;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 100vw;
			height: 100%;
			background: var(--color-theme);
			border-top-right-radius: clamp(40px, calc(80 / 1200 * 100vw), 80px);
			z-index: -1;
		}
		@media (max-width: 991.98px) {
			padding: 24px 56px 32px 0;
		}
		@media (min-width: 992px) {
			padding: 48px 96px 48px 0;
		}
	}
}

#movie{
	margin-top: clamp(310px, calc(630 / 1200 * 100vw), 650px);
	aspect-ratio: 16 / 9;
	width: min(100%, 550px);
	z-index: 1;
	& figure{
		& a{
			display: block;
			position: relative;
			&:after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				aspect-ratio: 1;
				width: 40px;
				background: #ff0033 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><polygon points="13.5 10 13.5 30 31.5 20 13.5 10" /></svg>') no-repeat center / 60%;
				border-radius: 100%;
				pointer-events: none;
			}
		}
		& img{
			width: 100%;
			height: auto;
			object-fit: cover;
		}
	}
}

#greeting{
	margin: clamp(32px, calc(72 / 1200 * 100vw), 72px) auto calc(clamp(32px, calc(72 / 1200 * 100vw), 72px) * 2) auto;
}

#facilityServices,
#careServices{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	margin: clamp(32px, calc(72 / 1200 * 100vw), 72px) auto calc(clamp(32px, calc(72 / 1200 * 100vw), 72px) * 2) auto;
	&>*{
		grid-column: 2;
	}
	@media (min-width: 992px) {
		grid-row-gap: 0;
	}
	&>div:has(h2){
		grid-column: 1 / 4;
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		background: var(--color-theme);
		border-bottom-left-radius: clamp(40px, calc(80 / 1200 * 100vw), 80px);
		& h2{
			grid-column: 2;
			grid-row: 1;
			display: grid;
			justify-items: center;
			padding: clamp(32px, calc(72 / 1200 * 100vw), 72px) 0;
			font-family: "zen-maru-gothic", sans-serif;
			font-size: clamp(32px, calc(40 / 1200 * 100vw), 40px);
			font-weight: 700;
			line-height: 1.4;
			font-feature-settings: "palt";
			color: #fff;
			overflow: hidden;
			z-index: 1;
			&:before{
				content: attr(data-title);
				font-family: var(--font-en);
				font-weight: 500;
				font-size: clamp(16px, calc(24 / 1200 * 100vw), 24px);
				letter-spacing: 0.05em;
			}
		}
		@media (max-width: 991.98px) {
			& figure{
				display: none;
			}
		}
		@media (min-width: 992px) {
			border-bottom-left-radius: 0;
			& h2{
				justify-items: start;
				padding-left: clamp(32px, calc(72 / 1200 * 100vw), 72px);
			}
			& figure{
				grid-column: 1 / 4;
				grid-row: 1;
				& img{
					width: 100%;
					height: clamp(120px, calc(250 / 1200 * 100vw), 250px);
					object-fit: cover;
					opacity: .1;
				}
			}
		}
	}
	& section{
		display: grid;
		grid-gap: clamp(24px, calc(48 / 1200 * 100vw), 48px) 0;
		padding-bottom: clamp(32px, calc(72 / 1200 * 100vw), 72px);
		border-bottom: 1px dotted var(--color-border);
		&:last-of-type{
			padding-bottom: 0;
			border: none;
		}
		&>div{
			display: grid;
			grid-gap: clamp(24px, calc(40 / 1200 * 100vw), 40px) 0;
		}
		&>figure{
			grid-row: 1;
			& img{
				aspect-ratio: 6 / 4;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		h3{
			margin: 0;
			padding: 0;
			font-family: "zen-maru-gothic", sans-serif;
			font-size: clamp(24px, calc(32 / 1200 * 100vw), 32px);
			font-weight: 700;
			line-height: 1.4;
			color: var(--color-theme);
			letter-spacing: 0.05em;
			& span{
				display: block;
				font-size: clamp(18px, calc(24 / 1200 * 100vw), 24px);
			}
		}
		h3 + *{
			margin-top: -8px;
		}
		@media (min-width: 992px) {
			grid-template-columns: 1.4fr 1fr;
			align-items: flex-start;
			border-bottom: none;
			&:first-of-type{
				margin-top: clamp(32px, calc(72 / 1200 * 100vw), 72px);
			}
			&>div{
				grid-column: 2;
				grid-row: 1;
				margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
				padding: clamp(24px, calc(48 / 1200 * 100vw), 48px);
				border: 3px solid var(--color-theme);
				border-bottom-left-radius: clamp(20px, calc(40 / 1200 * 100vw), 40px);
				border-top-right-radius: clamp(20px, calc(40 / 1200 * 100vw), 40px);
				background: #fff;
			}
			&>figure{
				grid-column: 1 / 3;
				grid-row: 1;
				margin-right: clamp(100px, calc(400 / 1200 * 100vw), 400px);
				z-index: -1;
			}
			h3{
				letter-spacing: 0;
			}
			h3 + *{
				margin-top: -16px;
			}
			&:nth-child(odd){
				grid-template-columns: 1fr 1.4fr;
				&>div{
					grid-column: 1;
				}
				&>figure{
					grid-column: 1 / 3;
					margin-right: 0;
					margin-left: clamp(100px, calc(400 / 1200 * 100vw), 400px);
				}
			}
		}
	}
}

#careServices{
	&>div:has(h2){
		background: var(--color-bl);
	}
	& section{
		h3{
			color: var(--color-bl);
		}
		.button{
			background: var(--color-bl);
			&:hover{
				background: var(--color-hover);
			}
		}
		@media (min-width: 992px) {
			&>div{
				border: 2px solid var(--color-bl);
			}
		}
	}
}

#topics{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	margin: clamp(32px, calc(72 / 1200 * 100vw), 72px) auto calc(clamp(32px, calc(72 / 1200 * 100vw), 72px) * 2) auto;
	padding: clamp(32px, calc(72 / 1200 * 100vw), 72px) 0;
	background: var(--color-bg);
	&>*{
		grid-column: 2;
	}
	& h2{
		display: grid;
		font-family: "zen-maru-gothic", sans-serif;
		font-size: clamp(32px, calc(40 / 1200 * 100vw), 40px);
		font-weight: 700;
		line-height: 1.4;
		text-align: center;
		&:before{
			content: attr(data-title);
			font-size: clamp(16px, calc(24 / 1200 * 100vw), 24px);
			color: var(--color-theme);
		}
	}
	& h2+p{
		font-size: clamp(18px, calc(24 / 1200 * 100vw), 24px);
	}
	@media (min-width: 992px) {
		& h2{
			text-align: left;
		}
	}
}

#topicsList{
	padding: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	background: #fff;
	border-bottom-left-radius: clamp(20px, calc(40 / 1200 * 100vw), 40px);
	border-top-right-radius: clamp(20px, calc(40 / 1200 * 100vw), 40px);
	& dl{
		padding-bottom: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
	& dl+dl{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
	& dd{
		& time {
			font-size: clamp(14px, calc(18 / 1200 * 100vw), 18px);
		}
	}
	@media (min-width: 992px) {
		margin-top: -16px;
	}
}