/*
 * TikTok Shop グロース支援ページ（Figma PC 56:4953 / SP 56:724）。
 * このページ専用。他サービスは従来の single-service.html を使う。
 */

/*
 * 最後のセクション（Flow）とContact CTA帯のあいだの余白。
 * CTAは自前の背景を持つので、ページ側で空けないとカードが帯に接する。
 * FigmaはSPで最後のカードから160pxあけている（56:724）。
 */
.service-page {
	padding-bottom: 160px;
}

/* ---------- ヒーロー ---------- */

.service-hero {
	position: relative;
	padding-top: 202px;
	overflow: hidden;
}

.service-hero__inner {
	position: relative;
	z-index: 1;
}

.service-hero__copy {
	container-type: inline-size;
	width: 44.445%;
}

.service-hero__eyebrow {
	margin: 0;
	color: var(--color-accent);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}

/*
 * 認定バッジ。PCは439×113でアイコン38×60、白い区切り線を挟んだ2行。
 * SPは350×40で1行目だけを中央寄せで出す。
 */
.service-hero__award {
	display: inline-flex;
	margin: 40px 0 0;
	padding: 14px 23px;
	align-items: center;
	gap: 15px;
	border: 1px solid #656565;
	border-radius: 8px;
	background: var(--color-surface);
}

.service-hero__award img {
	width: 40px;
	height: auto;
	flex: none;
}

.service-hero__award-text {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.service-hero__award-main {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.service-hero__award-en {
	font-family: var(--font-en);
	font-weight: 600;
}

.service-hero__award-sub {
	margin-top: 3px;
	padding-top: 3px;
	border-top: 1px solid #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.08em;
}

/* 認定バッジがないページは、見出しがeyebrowの直後に来る（Figma 56:5522）。 */
.service-hero__eyebrow + .service-hero__title {
	margin-top: 40px;
}

.service-hero__title {
	margin: 24px 0 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.4;
}

.service-hero__lead {
	margin: 24px 0 0;
	font-size: 20px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/* 実績2件。左・中央・右に122pxの縦罫線が入る。 */
.service-hero__stats {
	display: grid;
	margin: 24px 0 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	color: var(--color-muted);
	text-align: center;
}

.service-stat {
	display: flex;
	min-height: 122px;
	padding: 0 16px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-left: 1px solid #656565;
}

.service-stat:last-child {
	border-right: 1px solid #656565;
}

.service-stat__value {
	white-space: nowrap;
	display: flex;
	margin: 0;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	line-height: 1;
}

.service-stat__value strong {
	font-family: var(--font-en);
	font-size: 72px;
	font-weight: 600;
	line-height: 1;
}

.service-stat__unit {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

.service-stat__plus {
	font-size: 20.64px;
	font-weight: 700;
	line-height: 1.2;
}

.service-stat__label {
	margin-top: 14px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

.service-hero__note {
	margin: 12px 0 0;
	color: #bababa;
	font-size: 12px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: right;
}

.service-hero__actions {
	display: flex;
	margin-top: 40px;
	gap: 1.875%;
}

.service-btn {
	--fill-swap-circle-size: 120%;

	display: inline-flex;
	min-height: 76px;
	padding: 0 40px;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border: 1px solid var(--color-accent);
	border-radius: 4px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	transition: background-color 0s;
}

/* Keep fixed desktop typography readable when the copy column becomes narrow. */
@media (min-width: 900px) {
	@container (max-width: 620px) {
		.service-hero__actions {
			flex-direction: column;
			gap: 12px;
		}

		.service-hero__actions .service-btn {
			flex: none;
			width: 100%;
			padding-inline: 24px;
		}
	}

	@container (max-width: 560px) {
		.service-stat {
			padding-inline: 8px;
		}

		.service-stat__value strong {
			font-size: 48px;
		}

		.service-stat__unit {
			font-size: 24px;
		}

		.service-stat__plus {
			font-size: 16px;
		}
	}
}

/*
 * 円が展開し切った後は下地も反転色へ揃える。
 * border-radius のクリップ境界に元の背景色が1px残るのを防ぐ。
 */
@media (any-hover: hover) {
	.service-btn:hover {
		background-color: var(--fill-swap-to-bg);
		transition-delay: 0.5s;
	}
}

.service-btn:focus-visible {
	background-color: var(--fill-swap-to-bg);
}

.service-btn--ghost {
	--fill-swap-from-bg: #fff;
	--fill-swap-from-color: var(--color-accent);
	--fill-swap-to-bg: var(--color-accent);
	--fill-swap-to-color: #fff;
	--fill-swap-border: var(--color-accent);

	flex: 0 1 43.75%;
}

.service-btn--solid {
	--fill-swap-from-bg: var(--color-accent);
	--fill-swap-from-color: #fff;
	--fill-swap-to-bg: #fff;
	--fill-swap-to-color: var(--color-accent);
	--fill-swap-border: var(--color-accent);

	flex: 0 1 53.594%;
}

.service-btn__arrow {
	width: 16px;
	height: 16px;
	flex: none;
}

/*
 * 右側の写真は360×640・角丸20pxのパネル3枚。1920pxでは画面中央(x960)から
 * 32px間隔で並び、右端をはみ出す。現行仕様ではFigmaのPC指定寸法を維持する。
 */
.service-hero__visual {
	--slider-slide: 360px;
	--slider-gap: 32px;
	--slider-speed: 800ms;
	--slider-delay: 3000ms;

	position: absolute;
	top: 202px;
	right: max(0px, calc((100vw - var(--figma-stage-max)) / 2));
	left: 50%;
	overflow: hidden;
	pointer-events: none;
}

/* 写真1枚のページ。Figmaはグレーの仮置きなので素材が入るまで枠だけ確保する。 */
.service-hero__visual--single {
	aspect-ratio: 960 / 640;
	background: #d9d9d9;
}

.service-hero__visual--single img,
.service-hero__visual--single video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 1枚ものはコピー段より背が高いので、切れないよう最低高さを確保する。 */
.service-hero:has(.service-hero__visual--single) {
	min-height: calc(202px + min(100vw, var(--figma-stage-max)) / 3);
}

.service-hero__track {
	display: flex;
	width: max-content;
	gap: var(--slider-gap);
	transition: transform var(--slider-speed) ease-out;
	will-change: transform;
}

.service-hero__panel {
	position: relative;
	display: block;
	width: var(--slider-slide);
	aspect-ratio: 360 / 640;
	overflow: hidden;
	border-radius: 20px;
	flex: none;
}

.service-hero__panel img,
.service-hero__panel video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 支援実績（横スクロール） ---------- */

/*
 * 送りボタンはPCが見出しの右、SPはカードの下（中央）。位置が違うので
 * セクションを縦のflexにして order で入れ替える。
 */
.service-achievements {
	display: flex;
	padding-top: 131px;
	flex-direction: column;
}

/* 送りボタンはFigmaが56px（トップの52pxより大きい）。SPも表示する。 */
.service-achievements .rail-controls {
	display: flex;
	margin-top: -62px;
	margin-right: max(var(--page-gutter), calc((var(--viewport-width) - var(--content-max)) / 2));
	gap: 24px;
	align-self: flex-end;
}

.service-achievements .rail-control {
	width: 56px;
	height: 56px;
}

/* Figmaのカード間隔は32px（トップのレールは40px）。 */
.service-achievements .content-rail {
	--rail-stage-width: 100vw;
	--rail-inset: 0px;
	width: 100%;
	margin-top: 89px;
}

.service-achievements .content-rail__track {
	gap: 32px;
}

.achievement-card {
	display: flex;
	width: 320px;
	height: 348px;
	padding: 32px 24px;
	flex-direction: column;
	border: 1px solid #656565;
	border-radius: 12px;
}

.achievement-card__label {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: center;
}

/* ラベルの下の区切り線。 */
.achievement-card__lead {
	margin: 24px 0 0;
	padding-top: 24px;
	border-top: 1px solid #656565;
	font-size: 20px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.achievement-card__value {
	display: flex;
	margin: 8px 0 0;
	align-items: baseline;
	gap: 4px;
	line-height: 1.2;
}

.achievement-card__value strong {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
}

.achievement-card__value span {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.achievement-card__note {
	margin: 21px 0 0;
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/* ---------- 支援ブランドのロゴ帯 ---------- */

/*
 * Figmaでは左右にはみ出して並ぶ。同じ並びを2セット置いて等速で流す
 * （service-video-sliderと同じ考え方で、継ぎ目でDOMを動かさない）。
 */
/*
 * Figmaはロゴ帯をヒーロー写真の下端から181pxの位置に置いている。
 * 写真1枚のページはヒーローの高さが写真で決まるため、その分を足す。
 */
.service-hero:has(.service-hero__visual--single) + .service-logos {
	margin-top: 181px;
}

.service-logos {
	--logo-card: 240px;
	--logo-gap: 24px;
	--logo-shift: calc(8 * (var(--logo-card) + var(--logo-gap)));

	margin-top: 120px;
	overflow: hidden;
}

.service-logos__track {
	display: flex;
	width: max-content;
	gap: var(--logo-gap);
	animation: service-logos-scroll 40s linear infinite;
	will-change: transform;
}

@keyframes service-logos-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(var(--logo-shift) * -1), 0, 0);
	}
}

.service-logos__item {
	display: grid;
	width: var(--logo-card);
	height: 120px;
	place-items: center;
	border-radius: 12px;
	background: #fff;
	flex: none;
}

.service-logos__item img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: contain;
}

/* ---------- 対談・インタビュー ---------- */

/*
 * 2カラムの中身はトップと同じ共通コンポーネント（home-insights.css の
 * .interview-layout 一式）をそのまま使う。ここでは配置と、
 * PCだけに入るリード文の体裁だけを持つ。
 */
.service-interview {
	padding-top: 160px;
}

.interview-feature__lead {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/* ---------- よくあるご質問 ---------- */

/*
 * 画面幅いっぱいのグレー帯。中の一覧は1280/1440＝88.889%で、
 * 見出しは中央寄せ（Figma PC 56:5479 / SP 56:724）。
 */
.service-faq {
	margin-top: 160px;
	padding: 120px 0;
	background: var(--color-surface);
}

.service-faq .section-heading-en,
.service-faq .section-heading-jp {
	text-align: center;
}

.faq-list {
	width: 88.889%;
	margin: 60px auto 0;
	border-top: 1px solid #656565;
}

.faq-item {
	border-bottom: 1px solid #656565;
}

/*
 * 質問行と回答行で列を揃える。2列目の83.117%は Figma の 1024/1232。
 * 回答行は3列目を空けたままにして、質問文と同じ折り返し幅にする。
 */
.faq-item__q,
.faq-item__a {
	display: grid;
	padding: 0 24px;
	grid-template-columns: 40px 83.117% minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
}

.faq-item__q {
	padding-top: 24px;
	padding-bottom: 24px;
	cursor: pointer;
	list-style: none;
}

.faq-item__q::-webkit-details-marker {
	display: none;
}

.faq-item__a {
	padding-bottom: 24px;
}

.faq-item__mark {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-family: var(--font-en);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.faq-item__mark--q {
	background: var(--color-accent);
	color: #fff;
}

.faq-item__mark--a {
	border: 1px solid var(--color-accent);
	background: #fff;
	color: var(--color-accent);
}

.faq-item__text {
	padding-top: 6px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.faq-item__q .faq-item__text {
	font-weight: 700;
}

.faq-item__a .faq-item__text p {
	margin: 0;
}

.faq-item__toggle {
	width: 21px;
	height: 11px;
	margin-top: 15px;
	justify-self: end;
	background: url("../../images/faq-chevron.svg") no-repeat center / contain;
	transition: transform 0.4s var(--ease-out-quint);
}

.faq-item[open] .faq-item__toggle,
.faq-item[data-state="open"] .faq-item__toggle {
	transform: rotate(180deg);
}

.faq-item[data-state="closed"] .faq-item__toggle {
	transform: none;
}

.faq-item[data-state="closed"] .faq-item__q {
	padding-bottom: 24px;
}

.faq-item__q:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -4px;
}

@media (hover: hover) {
	.faq-item__q:hover .faq-item__text {
		color: var(--color-accent);
	}
}

/* ---------- 導入までの流れ ---------- */

/*
 * PCは4列。矢印はカードの間（右向き三角）に置く。位置はカード幅に対する
 * 比率で出しているので、幅が変わっても間の中央に入る。
 */
.service-flow {
	padding-top: 160px;
}

.flow-steps {
	display: grid;
	margin: 60px 0 0;
	padding: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3.681%;
	list-style: none;
}

.flow-step {
	position: relative;
	padding: 40px 24px;
	border-radius: 16px;
	background: var(--color-surface);
}

.flow-step:not(:last-child)::after {
	position: absolute;
	top: 52.81%;
	left: 100%;
	width: 12px;
	margin-left: calc((16.5625% - 12px) / 2);
	aspect-ratio: 12 / 16;
	background: url("../../images/flow-arrow.svg") no-repeat center / contain;
	content: "";
}

.flow-step__no {
	margin: 0;
	font-family: var(--font-en);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}

.flow-step__title {
	margin: 4px 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: center;
}

.flow-step__body {
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.flow-step__body p {
	margin: 0;
}

.flow-step__link {
	display: block;
	margin-top: 8px;
	color: var(--color-accent);
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: underline;
}

@media (hover: hover) {
	.flow-step__link:hover {
		text-decoration: none;
	}
}

@media (max-width: 899px) {
	.service-hero {
		padding-top: 140px;
	}

	/* 管理バーがhtmlに加える余白も含め、ページ上端から140pxに揃える。 */
	.admin-bar .service-hero {
		padding-top: calc(140px - var(--wp-admin--admin-bar--height, 32px));
	}

	/* FVの文字位置は読み込み直後も動かさない（フェードのみ）。 */
	.scroll-reveal-enabled .service-hero__inner.scroll-reveal-item {
		transform: none;
	}

	/* PCの44.445%（Figmaの640/1440）はSPでは効かせない。 */
	.service-hero__copy {
		width: 100%;
	}

	/* バッジがないページのeyebrow→見出し（Figma 56:1222 は32px）。 */
	.service-hero__eyebrow + .service-hero__title {
		margin-top: 32px;
	}

	.service-hero__eyebrow {
		font-size: 18px;
	}

	.service-hero__award {
		display: flex;
		width: 100%;
		margin-top: 20px;
		padding: 8px;
		justify-content: center;
		gap: 12px;
	}

	.service-hero__award img {
		width: 16px;
	}

	.service-hero__award-main {
		font-size: 14px;
	}

	/* SPは2行目と区切り線を出さない（Figma 56:739）。 */
	.service-hero__award-sub {
		display: none;
	}

	.service-hero__title {
		margin-top: 24px;
		font-size: 28px;
		line-height: 1.6;
		letter-spacing: 0.04em;
	}

	.service-hero__lead {
		margin-top: 16px;
		font-size: 16px;
	}

	.service-hero__stats {
		margin-top: 24px;
	}

	.service-stat {
		min-height: 75px;
		padding: 0 8px;
		border-left: 0;
	}

	.service-stat + .service-stat {
		border-left: 1px solid #656565;
	}

	.service-stat:last-child {
		border-right: 0;
	}

	.service-stat__value strong {
		font-size: 52px;
	}

	.service-stat__unit {
		font-size: 20px;
	}

	.service-stat__plus {
		font-size: 13px;
	}

	.service-stat__label {
		margin-top: 12px;
		font-size: 12px;
	}

	.service-hero__note {
		margin-top: 8px;
		font-size: 8px;
		letter-spacing: 0.04em;
	}

	.service-hero__actions {
		margin-top: 40px;
		flex-direction: column;
		gap: 12px;
	}

	.service-btn--ghost,
	.service-btn--solid {
		flex: none;
	}

	.service-btn {
		width: min(310px, 100%);
		min-width: 0;
		min-height: 54px;
		padding: 0 20px;
		margin-inline: auto;
		gap: 12px;
		font-size: 16px;
	}

	.service-btn__arrow {
		width: 12px;
		height: 12px;
		--fill-swap-arrow-size: 12px;
	}

	/*
	 * SPは写真2枚ぶんが見える位置。コピーの下に置き、左右へはみ出す。
	 * はみ出しは .service-hero 側の overflow で切るため、ここでは切らない。
	 */
	.service-hero__visual {
		--slider-slide: 213.75px;
		--slider-gap: 20px;
		position: relative;
		top: auto;
		right: auto;
		/* 隣り合う2枚の間隔の中央を画面中央に揃える。 */
		left: calc(50% - var(--slider-slide) - var(--slider-gap) / 2);
		overflow: visible;
		margin-top: 60px;
	}

	/*
	 * 1枚ものはスライダーの左寄せ指定を使わず、コピーの下に全幅で置く。
	 * SPのFigma未取得のため暫定。フレームを受領したら合わせ込む。
	 */
	.service-hero__visual--single {
		left: 0;
		width: 100%;
	}

	.service-hero:has(.service-hero__visual--single) {
		min-height: 0;
	}

	.service-hero__panel {
		height: 380px;
		aspect-ratio: 9 / 16;
		border-radius: 12px;
	}

	.service-achievements {
		padding-top: 50px;
	}

	.service-achievements__head {
		text-align: center;
	}

	/* SPはカードの下に中央配置（Figma y1811）。 */
	.service-achievements .rail-controls {
		order: 3;
		margin: 42px 0 0;
		gap: 20px;
		align-self: center;
	}

	.service-achievements .content-rail {
		/* 初期位置・スナップ位置ともカードの中心を画面中央に合わせる。 */
		--rail-inset: max(0px, calc((var(--rail-stage-width) - 310px) / 2));
		order: 2;
	}

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

	.service-achievements .content-rail {
		margin-top: 40px;
	}

	.service-achievements .content-rail__track {
		gap: 16px;
	}

	.achievement-card {
		width: 310px;
		height: 274px;
		padding: 24px;
	}

	.achievement-card__label {
		font-size: 14px;
	}

	.achievement-card__lead {
		font-size: 14px;
	}

	.achievement-card__value strong {
		font-size: 32px;
	}

	.achievement-card__value span {
		font-size: 16px;
	}

	.achievement-card__value {
		margin-top: 12px;
	}

	.achievement-card__note {
		margin-top: 15px;
		font-size: 12px;
	}

	.service-logos {
		--logo-card: 120px;
		--logo-gap: 8px;

		margin-top: 60px;
	}

	.service-logos__item {
		height: 60px;
		border-radius: 4px;
	}

	/* FV直後の余白。PCの1枚画像用181px指定もSPでは解除する。 */
	.service-hero:has(.service-hero__visual--single) + .service-logos {
		margin-top: 60px;
	}

	.service-hero + .service-strength,
	.service-hero + .service-creators {
		padding-top: 80px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.service-logos__track {
		animation: none;
	}
}

/* ---------- 3つの強み ---------- */

.service-strength {
	padding-top: 160px;
}

.service-strength__grid {
	display: grid;
	margin-top: 54px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * 縦罫線は3列を囲む4本。番号は半透明の大きな数字で、見出しがその上に重なる
 * Figmaの重なり比率を保ちつつ、番号・見出しは指定の75%サイズで表示する。
 */
.strength-item {
	position: relative;
	min-height: 360px;
	padding-inline: 40px;
	border-left: 1px solid #656565;
}

.strength-item:last-child {
	border-right: 1px solid #656565;
}

.strength-item__no {
	position: absolute;
	top: 0;
	left: 40px;
	margin: 0;
	color: rgb(255 255 255 / 20%);
	font-family: var(--font-en);
	font-size: 120px;
	font-weight: 500;
	line-height: 1.2;
}

.strength-item__title {
	position: relative;
	margin: 82px 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.strength-item__body {
	margin: 30px 0 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

@media (max-width: 899px) {
	.service-strength {
		padding-top: 75px;
	}

	.service-strength__grid {
		margin-top: 7px;
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* Figma SP: 縦罫線を外し、各項目の末尾に横罫線を入れる。 */
	.strength-item {
		min-height: 0;
		padding: 0 0 39px;
		border: 0;
		border-bottom: 1px solid #656565;
	}

	.strength-item:last-child {
		border-right: 0;
	}

	.strength-item__no {
		left: 0;
		font-size: 100px;
	}

	.strength-item__title {
		margin-top: 44px;
		font-size: 20px;
	}

	.strength-item__body {
		margin-top: 23px;
		font-size: 14px;
	}
}

/* ---------- ワンステップ支援の全体像 ---------- */

/*
 * 見出しは左カラムだけの行、その下の行で「リード＋図」と「メニュー4件」を
 * 左右に並べる（Figmaはリードとカード1枚目がどちらも y2971 で始まる）。
 */
.service-overview {
	padding-top: 160px;
}

.service-overview__inner {
	display: grid;
	grid-template-columns: minmax(0, 640fr) minmax(0, 760fr);
	column-gap: 2.778%;
	row-gap: 54px;
	align-items: start;
}

.service-overview__head {
	grid-column: 1;
}

.service-overview__intro {
	grid-column: 1;
}

.service-overview__menus {
	display: grid;
	grid-column: 2;
	gap: 12px;
	align-content: start;
}

.service-overview__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.service-overview__figure {
	margin: 60px 0 0;
	padding: 9.375%;
	border-radius: 12px;
	background: var(--color-surface);
}

.service-overview__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.service-menu {
	position: relative;
	padding: 39px;
	border: 1px solid #656565;
	border-radius: 4px;
	background: var(--color-surface);
}

.service-menu__head {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	column-gap: 40px;
	padding-right: 72px;
	cursor: pointer;
	list-style: none;
}

.service-menu__head::-webkit-details-marker {
	display: none;
}

/* 支給されたサービスアイコン（PC/SP共通）。 */
.service-menu__icon {
	width: 80px;
	height: 80px;
	grid-row: 1 / span 2;
	align-self: center;
	object-fit: contain;
}

.service-menu__title {
	grid-column: 2;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.service-menu__body {
	grid-column: 2;
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/*
 * シェブロンはカード上端からの固定位置（Figma PC 69px / SP 54px）。
 * absoluteの基準はpadding boxなので枠線1pxぶん引いた値を指定する。
 */
.service-menu__toggle {
	position: absolute;
	top: 68px;
	right: 39px;
	width: 48px;
	height: 48px;
	background: url("../../images/service-accordion-toggle.svg") no-repeat center / contain;
	transition: transform 0.4s var(--ease-out-quint);
}

.service-menu[open] .service-menu__toggle,
.service-menu[data-state="open"] .service-menu__toggle {
	transform: rotate(180deg);
}

.service-menu[data-state="closed"] .service-menu__toggle {
	transform: none;
}

.service-menu__items {
	display: grid;
	margin: 40px 0 0;
	padding: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	list-style: none;
}

.service-menu__items li {
	display: flex;
	min-height: 53px;
	padding: 12px;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: var(--color-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: center;
}

.service-menu__head:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

@media (hover: hover) {
	.service-menu:hover {
		border-color: #a5a5a5;
	}
}

@media (max-width: 899px) {
	.service-overview {
		padding-top: 131px;
	}

	.service-overview__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.service-overview__head,
	.service-overview__intro,
	.service-overview__menus {
		grid-column: 1;
	}

	.service-overview__lead {
		margin-top: 30px;
	}

	/* SPは背景パネルなしで図版のみ（Figma 270px・左右中央）。 */
	.service-overview__figure {
		width: 77.143%;
		margin: 58px auto 0;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.service-overview__menus {
		margin-top: 60px;
	}

	.service-menu {
		padding: 23px 19px;
	}

	.service-menu__head {
		grid-template-columns: 32px minmax(0, 1fr);
		column-gap: 12px;
		/* 見出し・説明文ともシェブロン分だけ右を空ける（Figma 見出し218px・説明262px）。 */
		padding-right: 48px;
	}

	.service-menu__icon {
		width: 32px;
		height: 32px;
		grid-row: 1;
	}

	/* SPの説明文はアイコンの下まで回り込む。 */
	.service-menu__body {
		grid-column: 1 / -1;
		margin-top: 12px;
	}

	.service-menu__toggle {
		top: 53px;
		right: 19px;
		width: 28px;
		height: 28px;
	}

	/* SPは1列（Figma 310×41）。 */
	.service-menu__items {
		margin-top: 25px;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.service-menu__items li {
		min-height: 41px;
		padding: 8px 16px;
		font-size: 14px;
	}
}

/* ---------- ご対応業界＆カテゴリー ---------- */

.service-sector {
	padding-top: 121px;
}

.service-sector__grid {
	display: grid;
	margin: 54px 0 0;
	padding: 0;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
}

.sector-tag {
	display: flex;
	min-height: 80px;
	padding: 8px 16px;
	align-items: center;
	gap: 12px;
	border-radius: 4px;
	background: #fff;
	color: var(--color-ink);
}

/* 支給された青い業界アイコン。SPでは非表示。 */
.sector-tag__icon {
	width: 32px;
	height: 32px;
	flex: none;
	object-fit: contain;
}

.sector-tag__label {
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

@media (max-width: 899px) {
	.service-sector {
		padding-top: 115px;
	}

	.service-sector__grid {
		margin-top: 50px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px;
	}

	/* SPはアイコンなし。 */
	.sector-tag {
		min-height: 40px;
		padding: 8px;
	}

	.sector-tag__icon {
		display: none;
	}

	/* 2行になったときの高さをFigmaの56pxに合わせる。 */
	.sector-tag__label {
		font-size: 10px;
		line-height: 2;
	}

	.service-interview {
		padding-top: 120px;
	}

	/* SPはリード文なし（Figma 56:724）。 */
	.interview-feature__lead {
		display: none;
	}

	.service-faq {
		margin-top: 120px;
		padding: 80px 0 120px;
	}

	.faq-list {
		width: 100%;
		margin-top: 50px;
	}

	.faq-item__q,
	.faq-item__a {
		padding-right: 20px;
		padding-left: 0;
		grid-template-columns: 36px 76.97% minmax(0, 1fr);
		column-gap: 12px;
	}

	.faq-item[open] .faq-item__q,
	.faq-item[data-state="open"] .faq-item__q {
		padding-bottom: 24px;
	}

	.faq-item__mark {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.faq-item__text {
		padding-top: 4px;
		font-size: 14px;
	}

	.faq-item__toggle {
		width: 16px;
		height: 8px;
		margin-top: 14px;
	}


	.service-flow {
		padding-top: 120px;
	}

	/* SPは1列。矢印は下向きにしてカードの間へ。 */
	.flow-steps {
		margin-top: 60px;
		grid-template-columns: minmax(0, 1fr);
		gap: 68px;
	}

	/* 番号と見出しは1行目に横並び、2行目以降が本文とリンク。 */
	.flow-step {
		display: grid;
		padding: 32px 20px;
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 12px;
		align-items: start;
	}

	.flow-step:not(:last-child)::after {
		top: 100%;
		left: 50%;
		width: 26.667px;
		height: 20px;
		margin-top: 24px;
		margin-left: 0;
		transform: translateX(-50%);
		aspect-ratio: auto;
		background-image: url("../../images/flow-arrow-down.svg");
	}

	/* 番号と見出しは横並び、その下に罫線を挟んで本文。 */
	.flow-step__no {
		font-size: 40px;
		line-height: 1.2;
	}

	.flow-step__title {
		margin: 0;
		align-self: center;
		font-size: 20px;
		line-height: 1.6;
		text-align: left;
	}

	.flow-step__body {
		margin-top: 32px;
		padding-top: 24px;
		grid-column: 1 / -1;
		border-top: 1px solid #656565;
		font-size: 14px;
	}

	.flow-step__link {
		margin-top: 24px;
		grid-column: 1 / -1;
		font-size: 16px;
	}

}

/* ---------- 支援の手順（横スクロール） ---------- */

/*
 * 動画・UGCページのService。カードはFlowと同じ体裁で、
 * 横に流して送りボタンで動かす（Figma PC 56:6011 / SP 56:1538）。
 */
.service-steps {
	padding-top: 160px;
}

.service-steps .content-rail {
	margin-top: 60px;
}

/* olの既定マージン・マーカーを消す。 */
.service-steps__track {
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-steps .content-rail__track {
	gap: 20px;
}

.service-steps .content-rail__item {
	width: 360px;
}

.service-steps .flow-step {
	padding-inline: 44px;
	border-radius: 12px;
}

/* 横並びの矢印はFlowだけのもの。 */
.service-steps .flow-step::after {
	display: none;
}

.service-steps .rail-controls {
	margin-top: 40px;
	gap: 24px;
}

.service-steps .rail-control {
	width: 56px;
	height: 56px;
}

@media (max-width: 899px) {
	.service-steps {
		padding-top: 120px;
	}

	.service-steps .content-rail {
		margin-top: 31px;
	}

	.service-steps .content-rail__track {
		gap: 16px;
	}

	.service-steps .content-rail__item {
		width: 264px;
	}

	.service-steps .flow-step {
		padding-inline: 20px;
		border-radius: 16px;
	}

	/* 共通レールはSPで送りボタンを隠すが、ここはFigmaに出ているので表示する。 */
	.service-steps .rail-controls {
		display: flex;
		gap: 20px;
	}

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

/* ---------- 支援メニュー（図版なし・2列） ---------- */

/*
 * ソーシャルコマースグロースページのService。図版を持たず、
 * カードを2列に並べる（Figma PC 56:6489）。
 */
.service-overview--grid .service-overview__inner {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}

.service-overview--grid .service-overview__menus {
	margin-top: 72px;
	grid-column: 1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.service-overview--grid .service-menu__items {
	gap: 12px;
}

@media (max-width: 899px) {
	.service-overview--grid .service-overview__menus {
		margin-top: 50px;
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

/* 2枚＋間隔（213.75px × 2 + 20px）が収まらない幅は1枚を中央に。 */
@media (max-width: 447.49px) {
	.service-hero__visual[data-service-video-slider] {
		left: calc(50% - var(--slider-slide) / 2);
	}
}