/* CSS Document */

#misao{
	display: grid;
	grid-row-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px);
}

#service{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px) 0;
	margin-bottom: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	&>*{
		grid-column: 2;
	}
	.subTitle{
		display: grid;
		& span{
			display: grid;
			grid-template-columns: 16px 1fr;
			margin-top: 8px;
			font-size: 16px;
			font-weight: 400;
			color: var(--color-theme);
			&:before{
				content: "/";
				
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: auto 1fr;
			grid-gap: 0 16px;
		}
	}
	&>div{
		display: grid;
		grid-gap: 24px;
		padding-bottom: clamp(32px, calc(72 / 1200 * 100vw), 72px);
		& figure{
			order: -1;
			& img{
				aspect-ratio: 6 / 4;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: 1fr 2fr;
			align-items: start;
			grid-gap: 0 48px;
			border-bottom: 1px dotted var(--color-border);
			&>*{
				grid-column: 2;
				&+*{
					margin-top: 24px;
				}
			}
			& figure{
				grid-column: 1;
				grid-row: 1 / 5;
				margin-top: 0;
				& img{
					aspect-ratio: 1;
				}
			}
		}
		&>div{
			display: grid;
			grid-gap: 24px;
			padding: 24px;
			font-size: 16px;
			background: rgba(var(--color-bg-rgb), .5);
			border-radius: 8px;
			& h5{
				margin-bottom: -8px;
				font-weight: 700;
			}
			&+p{
				font-size: 16px;
				@media (min-width: 992px) {
					margin-top: 16px;
				}
			}
		}
	}
	.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);
	}
}

#greeting{
	margin-top: 0;
	margin-bottom: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	& figure{
		& img{
			 object-position: left;
		}
	}
}

#overview{
	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;
	}
	& figure{
		grid-row: 2;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		& img{
			aspect-ratio: 6 / 4;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	&>div{
		display: contents;
		&>div{
			grid-column: 2;
			display: grid;
			grid-gap: clamp(24px, calc(48 / 1200 * 100vw), 48px);
			padding-bottom: 24px;
		}
	}
	@media (min-width: 1200px) {
		&>div{
			display: grid;
			grid-template-columns: 640px 1fr;
			grid-template-rows: auto 1fr;
			align-items: start;
			grid-gap: clamp(24px, calc(48 / 1200 * 100vw), 48px);
			&>div{
				padding-bottom: 0;
			}
		}
		#overviewList{
			grid-column: 1;
			grid-row: 1 / 3;
		}
		#overviewCare{
			grid-column: 2;
		}
		#overviewOption{
			grid-column: 2;
		}
	}
}

#overviewList{
	& dl{
		display: grid;
		grid-template-columns: 9em 1fr;
		font-size: 16px;
		background: #fff;
		border: 1px solid var(--color-border);
		& dt,
		& dd{
			padding: 8px 16px;
			border-bottom: 1px solid var(--color-border);
			&:last-of-type{
				border-bottom: none;
			}
		}
		& dt{
			background: rgba(var(--color-bg-rgb), .5);
		}
		& dd{
			background: #fff;
		}
	}
	& a{
		&:before{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M349.65-470h261.39q8.73 0 15.15-6.43 6.42-6.42 6.42-15.69 0-9.26-6.42-15.5-6.42-6.23-15.15-6.23H349.65q-9.52 0-15.89 6.48-6.37 6.48-6.37 15.3 0 9.61 6.37 15.84t15.89 6.23Zm0 112.73h261.39q8.73 0 15.15-6.08t6.42-15.69q0-9.61-6.42-15.84-6.42-6.24-15.15-6.24H349.65q-9.52 0-15.89 6.43-6.37 6.43-6.37 16.04t6.37 15.5q6.37 5.88 15.89 5.88Zm0 113.42h141.39q8.73 0 15.15-6.42 6.42-6.43 6.42-15.7 0-9.26-6.42-15.49t-15.15-6.23H349.65q-9.52 0-15.89 6.48-6.37 6.47-6.37 15.29 0 9.61 6.37 15.84t15.89 6.23Zm-110.8 140.77q-22.62 0-39.35-16.73t-16.73-39.34v-641.7q0-22.61 16.73-39.34 16.73-16.73 39.42-16.73H562q11.9 0 22.22 4.65 10.32 4.66 18.63 11.86l157.34 157.59q7.92 8.28 12.48 18.54 4.56 10.25 4.56 22.09v482.96q0 22.69-16.73 39.42t-39.35 16.73h-482.3Zm494.53-542.31H606.19q-17.58 0-30.15-12.57-12.58-12.58-12.58-30.16v-124.96H238.92q-4.61 0-8.46 3.85-3.84 3.85-3.84 8.46v641.54q0 4.61 3.84 8.46 3.85 3.85 8.46 3.85h482.16q4.61 0 8.46-3.85 3.84-3.85 3.84-8.46v-486.16ZM226.62-813.08v167.69-167.69V-146.92v-666.16Z"/></svg>') center no-repeat;
		}
	}
}

#overviewCare{
	grid-gap: 24px 0;
	& h4+div{
		display: grid;
		grid-template-columns: 11em 1fr;
		grid-gap: 8px 0;
		font-size: clamp(16px, calc(18 / 1200 * 100vw), 18px);
		@media (min-width: 992px) {
			margin-top: -24px;
		}
	}
	& ul{
		display: grid;
		align-content: flex-start;
		grid-gap: 8px 0;
		&:first-child{
			grid-column: 1 / 3;
			display: grid;
			grid-template-columns: 11em 1fr;
		}
		&:last-child{
			grid-column: 1 / 3;
			grid-row: 3;
			display: flex;
			justify-content: end;
			grid-gap: 0 16px;
			font-size: clamp(14px, calc(16 / 1200 * 100vw), 16px);
		}
	}
	& li{
		display: grid;
		grid-template-columns: 18px 1fr;
		align-items: center;
		grid-gap: 0 4px;
		position: relative;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect width="18" height="18" rx="4" ry="4" fill="%23eed851" /><circle cx="9" cy="9" r="5" fill="%23fff" stroke="%23333" stroke-miterlimit="10" /></svg>') no-repeat;
		}
		&.consult{
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 18px;
				background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect width="18" height="18" rx="4" ry="4" fill="%23ffa9ef" /><polygon points="4.85 12.5 9 5.03 13.15 12.5 4.85 12.5" fill="%23fff" /><path d="M9,6.06l3.3,5.94h-6.6l3.3-5.94M9,4l-5,9h10l-5-9h0Z" fill="%23333" /></svg>') no-repeat;
			}
		}
	}
	@media (min-width: 576px){
		& ul{
			&:first-child{
				grid-template-columns: repeat(2, 1fr);
			}
			&:last-child{
				grid-column: 1 / 4;
				grid-row: 2;
			}
		}
	}
	@media (min-width: 576px) and (max-width: 1199.98px){
		& h4+div{
			grid-template-columns: repeat(3, auto);
		}
	}
	@media (min-width: 1200px){
		& h4+div{
			grid-template-columns: 1fr 1fr auto;
		}
	}
}

#overviewOption{
	& h4+div{
		@media (min-width: 992px) {
			margin-top: -24px;
		}
	}
	& a{
		&:before{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M349.65-470h261.39q8.73 0 15.15-6.43 6.42-6.42 6.42-15.69 0-9.26-6.42-15.5-6.42-6.23-15.15-6.23H349.65q-9.52 0-15.89 6.48-6.37 6.48-6.37 15.3 0 9.61 6.37 15.84t15.89 6.23Zm0 112.73h261.39q8.73 0 15.15-6.08t6.42-15.69q0-9.61-6.42-15.84-6.42-6.24-15.15-6.24H349.65q-9.52 0-15.89 6.43-6.37 6.43-6.37 16.04t6.37 15.5q6.37 5.88 15.89 5.88Zm0 113.42h141.39q8.73 0 15.15-6.42 6.42-6.43 6.42-15.7 0-9.26-6.42-15.49t-15.15-6.23H349.65q-9.52 0-15.89 6.48-6.37 6.47-6.37 15.29 0 9.61 6.37 15.84t15.89 6.23Zm-110.8 140.77q-22.62 0-39.35-16.73t-16.73-39.34v-641.7q0-22.61 16.73-39.34 16.73-16.73 39.42-16.73H562q11.9 0 22.22 4.65 10.32 4.66 18.63 11.86l157.34 157.59q7.92 8.28 12.48 18.54 4.56 10.25 4.56 22.09v482.96q0 22.69-16.73 39.42t-39.35 16.73h-482.3Zm494.53-542.31H606.19q-17.58 0-30.15-12.57-12.58-12.58-12.58-30.16v-124.96H238.92q-4.61 0-8.46 3.85-3.84 3.85-3.84 8.46v641.54q0 4.61 3.84 8.46 3.85 3.85 8.46 3.85h482.16q4.61 0 8.46-3.85 3.84-3.85 3.84-8.46v-486.16ZM226.62-813.08v167.69-167.69V-146.92v-666.16Z"/></svg>') center no-repeat;
		}
	}
}