/* CSS Document */

header{
	@media (min-width: 576px) {
		& img {
			object-position: top;
		}
	}
}

#helperstation{
	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);
	}
}

#greeting{
	margin-top: 0;
	margin-bottom: 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: calc(clamp(32px, calc(72 / 1200 * 100vw), 72px) * 2);
	&>*{
		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);
		&>div{
			& ul{
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
				grid-gap: 16px clamp(8px, calc(32 / 1200 * 100vw), 32px);
			}
		}
		& 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{
				margin-top: -10px;
				font-size: 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);
	}
}