.home-service {
	position: relative;
	z-index: 2;
	padding-block: var(--section-space);
}

.section-dark {
	background: var(--color-surface);
}

.home-service.section-dark {
	background: var(--color-ink);
}

.service-card {
	margin: 0;
}

.service-card__link,
.service-card__visual,
.service-card__body {
	display: block;
}

/* 丸矢印を重ねるため、画像側を配置の基準にする。 */
.service-card__visual {
	position: relative;
}

.service-card__image {
	width: 100%;
	height: 640px;
	aspect-ratio: 1;
	border-radius: 12px;
	object-fit: cover;
}

/*
 * Figmaでは画像の右下に24px内側で重なる（PC 64px / SP 32px・16px内側）。
 * 矢印の向きはPCが右向き（素材の↗を45°回転）、SPは回転なしの右上向き。
 */
.service-card__visual .circle-arrow {
	--circle-arrow-rotate: 45deg;

	position: absolute;
	right: 24px;
	bottom: 24px;
}

.service-card__body {
	padding-top: 24px;
}

.service-card__en {
	display: block;
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.6;
}

.service-card__ja {
	display: block;
	margin-top: 4px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

/* Figmaのhover_btn SVGを使用し、文字矢印による形状差をなくす。 */
.home-service .rail-control {
	border: 0;
}

.home-service__rail-icon {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.home-service__rail-icon--prev {
	transform: rotate(180deg);
}

@media (max-width: 899px) {
	.home-service {
		/* 次のWorksのpadding-top: 120pxだけをセクション間余白として使う。 */
		padding: 96px 0 0;
	}

	/* Figma SP: 見出し右端に40pxの前後ボタンを20px間隔で配置する。 */
	.home-service .rail-controls {
		display: flex;
		gap: 20px;
	}

	.home-service .rail-control {
		width: 40px;
		height: 40px;
	}

	.service-card__body {
		padding-top: 16px;
	}

	.service-card__image {
		height: 280px;
	}

	.service-card__visual .circle-arrow {
		--circle-arrow-rotate: 0deg;
		--circle-arrow-size: 32px;
		--circle-arrow-icon: 8px;

		right: 16px;
		bottom: 16px;
	}

	.service-card__en {
		font-size: 14px;
	}

	.service-card__ja {
		font-size: 18px;
		letter-spacing: 0.04em;
	}
}