@charset "UTF-8";

.c-free-service {
	--main-color: #9b7950;

	display: flex;
	flex-direction: column;
}

.c-free-service__headline {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	color: var(--main-color);
}

.c-free-service__headline::before,
.c-free-service__headline::after {
	width: 0;
	content: "";
	border-left: dotted var(--main-color);
}

.c-free-service__headline::before {
	transform: rotate(-30deg);
}

.c-free-service__headline::after {
	transform: rotate(30deg);
}

.c-free-service-list {
	display: grid;
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
	border: solid var(--main-color);
}

.c-free-service-list__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 0.5rem;
	place-content: center;
	place-items: center;
}

.c-free-service-list__headline {
	color: var(--main-color);
	text-align: center;
}

@media screen and (max-width: 767px) {
	.c-free-service {
		row-gap: 1rem;
		padding: 1rem;
	}

	.c-free-service__headline {
		column-gap: 1rem;
		font-size: 1.125rem;
	}

	.c-free-service__headline::before,
	.c-free-service__headline::after {
		height: 1em;
		border-left-width: 3px;
	}

	.c-free-service-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 1px;
		border-width: 1px;
		background: var(--main-color);
	}

	.c-free-service-list__headline {
		font-size: 1.125rem;
	}

	.c-free-service-list__item {
		padding: 0.5rem;
		background: #f8f9f9;
	}

	.c-free-service-list__item--fill {
		grid-column: span 2;
	}
}

@media screen and (min-width: 768px) {
	.c-free-service {
		row-gap: 2rem;
		padding-block: 4rem;
	}

	.c-free-service__headline {
		column-gap: 2rem;
		font-size: 1.625rem;
	}

	.c-free-service__headline::before,
	.c-free-service__headline::after {
		height: 2em;
		border-left-width: 6px;
	}

	.c-free-service-list {
		padding: 1rem 0;
		border-width: 2px;
		background: #f8f9f9;
	}

	.c-free-service-list--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.c-free-service-list--5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.c-free-service-list__item:not(:first-child) {
		border-left: 1px solid var(--main-color);
	}
}