/* ---------- TOPページ・サービス ---------- */
.service-item {
	background-color: #fff;
}
.service-h3 {
	text-align: center;
}
.service-h3-en {
	font-weight: bold;
	text-align: center;
	color: #156A9A;
}
.service-point-list {
	display: flex;
	flex-direction: column;
	background-color: #F2F5FC;
}
.service-point-item {
	&.-accent {
		color: #FF0000;
		font-weight: bold;
	}
}
.service-buttons {
	display: flex;
	flex-direction: column;
}
.service-button {
	display: grid;
	place-items: center;
	border-radius: 100px;
	box-sizing: border-box;
	font-weight: bold;
	text-align: center;
	transition: translate 0.2s, box-shadow 0.2s;
	&.-primary {
		background-color: #0088cc;
		color: #fff;
		box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
		&:hover {
			translate: 0 -2px;
			box-shadow: 0 6px 16px rgba(0, 136, 204, 0.4);
			background-color: #006699;
		}
	}
	&.-accent {
		background-color: #ff6b6b;
		color: #fff;
		box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
		&:hover {
			translate: 0 -2px;
			box-shadow: 0 6px 16px rgba(255, 107, 107, 0.4);
			background-color: #ff5252;
		}
	}
	&.-border {
		border: 1px solid;
		color: #2F94CC;
	}
}
@media (width < 768px) {
	.service-section {
		padding-block: 40px;
	}
	.service-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-block-start: 35px;
	}
	.service-item {
		border-radius: 5px;
		padding-block-start: 35px;
		padding-block-end: 40px;
		padding-inline: 20px;
	}
	.service-h3 {
		font-size: 18px;
	}
	.service-h3-en {
		font-size: 12.5px;
		margin-block-start: 8px;
	}
	.service-lead {
		font-size: 18px;
		line-height: 27px;
		margin-block-start: 20px;
	}
	.service-point-list {
		border-radius: 5px;
		padding-block: 10px;
		padding-inline: 10px;
		gap: 10px;
		margin-block-start: 35px;
	}
	.service-point-item {
		padding-inline-start: 28px;
		line-height: 24px;
	}
	.service-buttons {
		gap: 15px;
		margin-block-start: 15px;
	}
	.service-button {
		block-size: 50px;
		font-size: 14px;
		letter-spacing: 0.05em;
		line-height: 21px;
	}
}
@media (width >= 768px) {
	.service-section {
		padding-block: 40px;
	}
	.service-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 25px;
		margin-block-start: 40px;
	}
	.service-item {
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		padding-block-start: 35px;
		padding-block-end: 40px;
		padding-inline: 17px;
	}
	.service-h3 {
		font-size: 20px;
	}
	.service-h3-en {
		margin-block-start: 12px;
	}
	.service-lead {
		font-size: 18px;
		line-height: 27px;
		margin-block-start: 20px;
	}
	.service-point-list {
		border-radius: 10px;
		padding-block: 20px;
		padding-inline: 12px;
		gap: 12px;
		margin-block-start: 18px;
		margin-block-end: 35px;
	}
	.service-point-item {
		padding-inline-start: 28px;
		line-height: 24px;
	}
	.service-buttons {
		gap: 10px;
		margin-block-start: auto;
	}
	.service-button {
		block-size: 60px;
		letter-spacing: 0.05em;
		line-height: 24px;
		&.-l1 {
			font-size: 20px;
		}
	}
}