/* CSS Document */

header{
	& p+dl{
		justify-self: center;
		margin-top: clamp(32px, calc(72 / 1200 * 100vw), 72px);
		font-family: "zen-maru-gothic", sans-serif;
		text-align: center;
		& dt{
			font-size: clamp(32px, calc(48 / 1200 * 100vw), 48px);
			font-weight: 700;
			color: var(--color-bl);
		}
		& dd{
			margin-top: 16px;
			font-size: clamp(18px, calc(24 / 1200 * 100vw), 24px);
			font-weight: 500;
		}
	}
	@media (min-width: 576px) {
		& img {
			object-position: center 10%;
		}
	}
}

#aboutus{
	display: grid;
	grid-row-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	&>div:last-of-type{
		margin-bottom: calc(clamp(32px, calc(72 / 1200 * 100vw), 72px) * 2);
	}
}

#mission{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px) 0;
	padding-bottom: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	&>*{
		grid-column: 2;
	}
	& h3+p{
		justify-self: center;
		display: grid;
		min-height: 80px;
		align-items: center;
		padding: 16px clamp(16px, calc(48 / 1200 * 100vw), 48px);
		font-family: "zen-maru-gothic", sans-serif;
		font-size: clamp(24px, calc(40 / 1200 * 100vw), 40px);
		font-weight: 500;
		text-align: center;
		background: #ffe3f6;
		border-bottom-left-radius: 20px;
		border-top-right-radius: 20px;
		@media (max-width: 575.98px) {
			width: 100%;
		}
	}
	&>div{
		display: grid;
		grid-gap: clamp(48px, calc(96 / 1200 * 100vw), 96px);
		@media (min-width: 576px) {
			justify-self: center;
			align-items: flex-start;
			grid-template-columns: repeat(3, 1fr);
		}
		& dl{
			justify-self: center;
			display: grid;
			grid-gap: 16px;
			max-width: 300px;
		}
		& dt{
			font-family: "zen-maru-gothic", sans-serif;
			font-size: clamp(24px, calc(32 / 1200 * 100vw), 32px);
			font-weight: 500;
		}
		& dd{
			display: contents;
		}
		& figure{
			justify-self: center;
			order: -1;
			width: clamp(200px, calc(250 / 1200 * 100vw), 250px);
			position: relative;
			& img{
				aspect-ratio: 1;
				width: 100%;
				height: auto;
			}
			&:before{
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				aspect-ratio: 1;
				width: 95%;
				height: auto;
				background: var(--color-bg);
				border-radius: 50%;
				z-index: -1;
			}
		}
	}
}

#history{
	display: grid;
	grid-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px) 0;
	padding-bottom: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	margin: auto;
	width: var(--wrap);
	& dl{
		font-weight: 500;
	}
	& dd{
		& ul{
			margin-top: 8px;
			font-weight: normal;
		}
	}
	& figure{
		& img{
			aspect-ratio: 6 / 4;
			width: 100%;
			height: auto;
			object-fit: cover;
		}
	}
	@media (min-width: 768px) {
		grid-template-columns: 1fr 1fr;
		grid-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px);
		& h3{
			grid-column: 1 / 3;
		}
		& dl{
			grid-column: 2;
			grid-row: 2;
			grid-template-columns: 5em 1fr;
		}
	}
}

#support{
	display: grid;
	grid-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px) 0;
	margin: 0 auto calc(clamp(32px, calc(72 / 1200 * 100vw), 72px) * 2);
	padding-bottom: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	width: var(--wrap);
	@media (min-width: 768px) {
		grid-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	}
}

#supportMedical{
	display: grid;
	grid-gap: 24px;
}

#supportGroup{
	display: grid;
	grid-gap: clamp(40px, calc(72 / 1200 * 100vw), 72px);
	&>div{
		display: grid;
		grid-gap: 16px;
	}
	& figure{
		display: grid;
		grid-gap: 24px;
		& img{
			aspect-ratio: 6 / 4;
			width: 100%;
			height: auto;
			object-fit: cover;
		}
	}
	& dl{
		padding: 24px;
		background: var(--color-bg);
		border-bottom-left-radius: 20px;
		border-top-right-radius: 20px;
	}
	& dt{
		font-weight: 500;
		line-height: 1.2;
		margin-bottom: 8px;
	}
	& dd{
		font-size: 16px;
	}
	@media (min-width: 768px) {
		grid-template-columns: 1fr 1fr;
		grid-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px);
		&>div+div{
			grid-template-columns: 1fr 1fr;
			align-content: flex-start;
		}
		& figure{
			margin-top: 0;
		}
	}
}

#supportMap{
	iframe{
		width: 100%;
		height: 460px;
		@media (min-width: 576px) {
			height: 600px;
		}
	}
}


.slick-slider {
	display: grid;
}
.slick-list {
	grid-column: 1 / 4;
	grid-row: 1;
}
.slick-arrow {
	grid-row: 1;
	align-self: center;
	position: relative;
	aspect-ratio: 1;
	width: 48px;
	background: none;
	background: var(--color-theme);
	border-radius: 100%;
	font-size: 0;
	cursor: pointer;
	z-index: 1;
	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px;"><polyline points="25 13 49 37 25 61"/></svg>') no-repeat center / contain;
		-webkit-mask-size: 24px;
	}
}
.slick-prev {
	grid-column: 1;
	transform: translateX(-16px);
	&:before {
		transform: scale(-1, 1);
	}
}
.slick-next {
	grid-column: 3;
	justify-self: end;
	transform: translateX(16px);
}