:root {
	--service-gold: #c9a941;
	--service-dark: #2c2c2c;
	--service-gray: #adadad;
	--service-text: #111;
}

.faterise-service-page,
.faterise-service-page * {
	box-sizing: border-box;
}

.faterise-service-page {
	overflow: clip;
	background: #fff;
	color: var(--service-text);
	font-family: "Zen Kaku Gothic Antique", sans-serif;
}

.service-container {
	width: min(88%, 1200px);
	margin-inline: auto;
}

.service-intro {
	padding: 170px 0 70px;
}

.service-page-heading {
	position: relative;
	min-height: 72px;
}

.service-page-heading__en {
	position: relative;
	left: 95px;
	width: max-content;
	margin: 0;
	color: var(--service-gold);
	font-family: "Noto Serif Tamil", serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 3.2px;
	line-height: 1;
	text-shadow: 1px 1px 0 rgb(0 0 0 / 30%);
}

.service-page-heading__ja {
	position: relative;
	padding-left: 40px;
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 9.6px;
	line-height: 1;
}

.faterise-service-page .service-page-heading__ja {
	color: #111;
}

.service-page-heading__ja::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 26px;
	height: 4px;
	background: var(--service-gold);
	content: "";
	transform: translateY(-50%);
}

.service-intro__lead {
	margin: 30px 0 0;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 1.6px;
	line-height: 1.55;
}

.service-detail {
	padding: 60px 0 160px;
	scroll-margin-top: 90px;
}

.service-detail__hero {
	display: grid;
	min-height: 300px;
	overflow: hidden;
	border: 6px solid var(--service-panel-border, var(--service-panel-tone, var(--service-gray)));
	border-radius: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-detail__title {
	display: flex;
	min-width: 0;
	min-height: 300px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 36px;
	background: var(--service-panel-tone, var(--service-gray));
	color: var(--service-panel-title-color, #fff);
	text-align: center;
}

.service-detail__hero:not(.service-detail__hero--image-first) .service-detail__title {
	border-right: 3px solid var(--service-panel-border, var(--service-panel-tone, var(--service-gray)));
}

.service-detail__hero--image-first .service-detail__title {
	border-left: 3px solid var(--service-panel-border, var(--service-panel-tone, var(--service-gray)));
}

.service-detail--tone-dark {
	--service-panel-tone: var(--service-dark);
}

.service-detail--tone-gray {
	--service-panel-tone: var(--service-gray);
}

.service-detail--yukinoito {
	--service-panel-tone: #5f91aa;
	--service-panel-border: #5f91aa;
	--service-panel-title-color: #fff;
}

.service-detail--sns {
	--service-panel-tone: #302748;
	--service-panel-border: #302748;
	--service-panel-title-color: #fff;
}

/* 画像とタイトルの表示面積を、対象カードでは常に正確な1:1に固定する。 */
.service-detail--yukinoito .service-detail__hero,
.service-detail--sns .service-detail__hero {
	grid-template-columns: 50% 50% !important;
}

.service-detail--yukinoito .service-detail__hero > .service-detail__hero-media,
.service-detail--yukinoito .service-detail__hero > .service-detail__title,
.service-detail--sns .service-detail__hero > .service-detail__hero-media,
.service-detail--sns .service-detail__hero > .service-detail__title {
	width: 100%;
	max-width: 100%;
}

.service-detail--yukinoito .service-detail__hero > .service-detail__hero-media,
.service-detail--sns .service-detail__hero > .service-detail__hero-media {
	overflow: hidden;
}

.service-detail--sns .service-detail__hero:not(.service-detail__hero--image-first) .service-detail__title {
	border-right: 0;
}

.service-detail__title-en {
	max-width: 100%;
	margin: 0;
	color: var(--service-gold);
	font-family: "Noto Serif Tamil", serif;
	font-size: 24px;
	font-weight: 700;
	font-style: oblique;
	letter-spacing: 3.2px;
	line-height: 1.15;
	text-shadow: 1px 1px 0 rgb(0 0 0 / 30%);
}

.service-detail__title h2 {
	max-width: 100%;
	margin: 4px 0 0;
	color: inherit;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 3.2px;
	line-height: 1.2;
}

.service-detail__title .service-detail__title-ja--grouped {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.35em;
}

.service-detail__title-ja--grouped span {
	white-space: nowrap;
}

.service-detail__hero-media {
	min-width: 0;
	min-height: 300px;
	margin: 0;
}

.service-detail--magician .service-detail__hero-media {
	background: #000;
}

.service-detail__hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

.service-detail--web .service-detail__hero-media img {
	object-position: center;
}

.service-detail--yukinoito .service-detail__hero-media img {
	background: #edf1fb;
	/* PCでは元画像の余白を抑えて表示し、狭い幅では下記で全体表示へ切り替える。 */
	object-fit: cover;
	object-position: center;
	transform: scale(1.14);
}

.service-detail__body {
	display: grid;
	align-items: stretch;
	gap: 100px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 50px;
}

.service-detail__media {
	min-width: 0;
	height: 408px;
	overflow: hidden;
	border-radius: 10px;
	margin: 0;
}

.service-detail__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.service-detail__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-detail__mobile-feature-media {
	display: none;
	margin: 0;
}

.service-detail--web .service-detail__media {
	height: auto;
	aspect-ratio: 2560 / 1466;
	align-self: center;
	background: #dceefa;
}

.service-detail--web .service-detail__media img {
	object-fit: contain;
	object-position: center;
}

.service-detail--yukinoito .service-detail__media img {
	object-fit: contain;
	object-position: center;
}

.service-detail--yukinoito .service-detail__media {
	height: auto;
	aspect-ratio: 2560 / 1776;
	align-self: center;
}

.service-detail__copy {
	align-self: center;
}

.service-detail__copy p,
.service-detail__outro {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 1.6px;
	line-height: 1.52;
}

.service-detail__copy p + p {
	margin-top: 24px;
}

.service-detail__links {
	display: grid;
	gap: 8px;
	margin-top: 24px;
}

.faterise-service-page .service-detail__links a,
.faterise-service-page .service-detail__links a:link,
.faterise-service-page .service-detail__links a:visited {
	width: fit-content;
	color: #111 !important;
	font-size: 16px;
	letter-spacing: 1px;
	text-decoration-color: var(--service-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.faterise-service-page .service-detail__links a:hover,
.faterise-service-page .service-detail__links a:focus-visible {
	color: #8f741b !important;
}

.service-detail__links a:focus-visible {
	outline: 2px solid var(--service-gold);
	outline-offset: 4px;
}

.service-detail__outro {
	margin-top: 50px;
}

.service-detail__outro-media {
	display: none;
}

.faterise-service-page.has-service-reveal [data-service-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.faterise-service-page.has-service-reveal [data-service-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 1024px) {
	.service-container {
		width: min(88%, 900px);
	}

	.service-intro {
		padding-top: 150px;
	}

	.service-detail {
		padding-bottom: 130px;
	}

	.service-detail__title {
		padding: 28px;
	}

	.service-detail__title-en {
		font-size: 19px;
		letter-spacing: 2px;
	}

	.service-detail__title h2 {
		font-size: 27px;
		letter-spacing: 2px;
	}

	.service-detail__body {
		gap: 44px;
	}

	.service-detail--yukinoito .service-detail__hero {
		min-height: 220px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.service-detail--yukinoito .service-detail__hero-media,
	.service-detail--yukinoito .service-detail__title {
		min-height: 220px;
	}

	/*
	 * 2カラムを保つタブレット幅では、元画像内の大きな外周余白だけを切り落とす。
	 * 商品ビジュアルとロゴは左右とも欠けない範囲で、左50%領域いっぱいに拡大する。
	 */
	.service-detail--yukinoito .service-detail__hero-media {
		position: relative;
	}

	.service-detail--yukinoito .service-detail__hero-media img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 185%;
		max-width: none;
		height: auto;
		min-height: 0;
		object-fit: initial;
		transform: translate(-49%, -50%);
	}

	.service-detail__copy p,
	.service-detail__outro {
		font-size: 16px;
		letter-spacing: 1.2px;
	}
}

@media (max-width: 767px) {
	.service-container {
		width: calc(100% - 40px);
	}

	.service-intro {
		padding: 125px 0 45px;
	}

	.service-page-heading {
		min-height: 52px;
	}

	.service-page-heading__en {
		left: 52px;
		font-size: 15px;
		letter-spacing: 1.6px;
	}

	.service-page-heading__ja {
		padding-left: 26px;
		font-size: 30px;
		letter-spacing: 5px;
	}

	.service-page-heading__ja::before {
		width: 18px;
		height: 3px;
	}

	.service-intro__lead {
		margin-top: 25px;
		font-size: 14px;
		letter-spacing: 1.15px;
		line-height: 1.95;
	}

	.service-detail {
		padding: 45px 0 105px;
		scroll-margin-top: 75px;
	}

	.service-detail__hero {
		display: block;
		min-height: 0;
	}

	.service-detail__hero-media {
		display: none;
	}

	.service-detail__title {
		min-height: 0;
		border-right: 0 !important;
		border-left: 0 !important;
		padding: 20px 15px;
	}

	.service-detail--yukinoito .service-detail__hero,
	.service-detail--yukinoito .service-detail__hero-media,
	.service-detail--yukinoito .service-detail__title {
		min-height: 0;
	}

	.service-detail__title-en {
		font-size: 15px;
		font-style: normal;
		letter-spacing: 0.2px;
		line-height: 1.2;
	}

	.service-detail__title h2 {
		margin-top: 3px;
		font-size: 22px;
		letter-spacing: 3.2px;
		line-height: 1.2;
	}

	.service-detail--yukinoito .service-detail__title-en,
	.service-detail--sns .service-detail__title-en {
		max-width: 260px;
	}

	.service-detail__body,
	.service-detail__body--image-first {
		display: flex;
		align-items: stretch;
		flex-direction: column;
		gap: 50px;
		margin-top: 50px;
	}

	.service-detail__copy {
		order: 1;
	}

	.service-detail__media {
		order: 2;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.service-detail--yukinoito .service-detail__media,
	.service-detail--sns .service-detail__media {
		display: none;
	}

	.service-detail__mobile-feature-media {
		display: block;
		order: 2;
		width: 100%;
		overflow: hidden;
		border: 6px solid var(--service-panel-border, var(--service-panel-tone, var(--service-gray)));
		border-radius: 8px;
		aspect-ratio: 1.18 / 1;
	}

	.service-detail__mobile-feature-media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.service-detail--yukinoito .service-detail__mobile-feature-media {
		background: #edf1fb;
		aspect-ratio: 1 / 1;
	}

	.service-detail--yukinoito .service-detail__mobile-feature-media img {
		object-fit: contain;
	}

	.service-detail__mobile-feature-media--center img {
		object-position: center;
	}

	.service-detail--sns .service-detail__media {
		aspect-ratio: 1.18 / 1;
	}

	.service-detail--web .service-detail__media {
		aspect-ratio: 2560 / 1466;
	}

	.service-detail--yukinoito .service-detail__media {
		aspect-ratio: 2560 / 1776;
	}

	.service-detail--magician .service-detail__media {
		display: none;
	}

	.service-detail__copy p,
	.service-detail__outro {
		font-size: 14px;
		letter-spacing: 1.15px;
		line-height: 1.95;
	}

	.service-detail__copy p + p {
		margin-top: 27px;
	}

	.service-detail__links {
		gap: 12px;
		margin-top: 25px;
	}

	.service-detail__links a {
		font-size: 13px;
		line-height: 1.7;
	}

	.service-detail__outro--desktop {
		display: none;
	}

	.service-detail__outro-media {
		position: relative;
		display: block;
		overflow: hidden;
		border: 8px solid #000;
		border-radius: 10px;
		margin: 50px 0 0;
		aspect-ratio: 1 / 1;
		background: #000;
	}

	.service-detail__outro-media::after {
		position: absolute;
		inset: 0;
		background: rgb(0 0 0 / 42%);
		content: "";
	}

	.service-detail__outro-media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.service-detail__outro-media figcaption {
		position: absolute;
		z-index: 1;
		inset: 0;
		display: flex;
		align-items: center;
		padding: 12px;
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 1px;
		line-height: 1.9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faterise-service-page.has-service-reveal [data-service-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}