@charset "utf-8";
/* =========================================================
   service.css — サービス詳細（ミニLP型）
   構成は docs/sitemap.md「サービス詳細ページの共通仕様」11要素に対応
   ========================================================= */

/* ---- 1. ヘッド（パンくず＋h1＋リード＋CTA＋KV）------------------------- */
.p-svcHead {
	padding-block-start: var(--sp-xs);

	/* 直後がグレーのセクションのときは、スライダーの下に余白を取る（地色の境目に詰めない）*/
	&:has(+ .c-sec._bg) { padding-block-end: var(--sp-l); }

	& .p-svcHead-body { display: grid; gap: var(--sp-s); max-width: var(--w-text); }
	/* 英字ラベルだけ下げてh1に寄せる（h1の位置は変えない）。SPはずらさない */
	& .p-svcHead-cat {
		color: var(--cl-text-sub);
		font-size: var(--fs-xs);
		font-weight: var(--fw-bold);
		letter-spacing: 0.08em;
		line-height: var(--lh-ui);
	}
	& .p-svcHead-title { font-size: var(--fs-2xl); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.025em; }
	& .p-svcHead-lead { font-size: var(--fs-lead); font-weight: var(--fw-med); line-height: var(--lh-body); letter-spacing: -0.01em; }
	& .p-svcHead-btns { display: grid; gap: var(--sp-xs); }
	& .p-svcHead-btns .c-btn { width: 100%; }
}

@media print, screen and (min-width: 640px) {
	.p-svcHead {
		/* 英字ラベルだけ下げて h1 に寄せる。ずらす量は gap から 0.8rem 残す分を引く。
		   固定値にすると、gap が小さい中間幅（640〜1200）で h1 に重なる */
		& .p-svcHead-cat {
			margin-block-start: calc(var(--sp-s) - 0.8rem);
			margin-block-end: calc((var(--sp-s) - 0.8rem) * -1);
		}
		& .p-svcHead-btns { display: flex; flex-wrap: wrap; }
		& .p-svcHead-btns .c-btn { width: auto; }
	}
}

/* ---- 3-4. 向いている会社／向いていない会社 ------------------------------
   罫線で囲まず、白いカード＋チェック／バツのアイコンで見せる */
.p-svcFit {
	display: grid;
	gap: var(--sp-s);
	margin-block-start: var(--sp-m);
}

.p-svcFit-box {
	padding: var(--card-pad);
	background-color: var(--cl-bg);
	border-radius: var(--radius);

	& .p-svcFit-title {
		display: flex;
		align-items: center;
		gap: 0.5em;
		font-size: var(--fs-l);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.01em;
	}

	/* 状態を示すアイコン（§8）：「向いている」は肯定＝--cl-accent、「向いていない」は否定＝--cl-text-sub */
	& .p-svcFit-title .u-ico { font-size: 1.5em; background-color: var(--cl-text-sub); }
	&._yes .p-svcFit-title .u-ico { background-color: var(--cl-accent); }
}

.p-svcFit-list {
	display: grid;
	gap: var(--sp-xs);
	margin-block-start: var(--sp-s);
	padding-inline-start: 1.2em;
	list-style: disc;

	& li { line-height: var(--lh-body); }
	& li::marker { color: var(--cl-text); font-size: 0.8em; }
}

@media print, screen and (min-width: 640px) {
	.p-svcFit { grid-template-columns: 1fr 1fr; gap: var(--sp-s); }
}

/* セット提案 */
.p-svcSet {
	display: grid;
	gap: var(--sp-xs);
	padding: var(--sp-s);
	margin-block-start: var(--sp-m);
	background-color: var(--cl-bg-sub);
	border-radius: var(--radius);

	& .p-svcSet-title { font-weight: var(--fw-head); font-size: var(--fs-l); line-height: var(--lh-tight); }
	& .p-svcSet-price { font-weight: 700; }
}

/* ---- 6. 料金目安 ------------------------------------------------------- */
.p-svcPrice { margin-block-start: var(--sp-m); }
.p-svcPrice-note { margin-block-start: var(--sp-xs); color: var(--cl-text-sub); font-size: var(--fs-s); line-height: var(--lh-body); }

/* ---- 7. 業務フロー ----------------------------------------------------- */
.p-svcFlow {
	display: grid;
	gap: var(--sp-s);
	counter-reset: flow;
	margin-block-start: var(--sp-m);
}

.p-svcFlow-item {
	display: grid;
	gap: 0.5em;
	align-content: start;
	padding: var(--card-pad-sm);
	background-color: var(--cl-bg);
	border-radius: var(--radius);

	& .u-ico { font-size: 3.2rem; }

	& .p-svcFlow-step::before {
		counter-increment: flow;
		content: "STEP " counter(flow);
		color: var(--cl-text-sub);
		font-size: var(--fs-xs);
		font-weight: var(--fw-bold);
		letter-spacing: 0.08em;
	}

	& .p-svcFlow-title { font-size: var(--fs-l); font-weight: var(--fw-head); line-height: var(--lh-tight); text-wrap: pretty; word-break: auto-phrase; }
	& .p-svcFlow-txt { color: var(--cl-text-sub); font-size: var(--fs-s); line-height: var(--lh-body); }
	& .p-svcFlow-term { color: var(--cl-text-sub); font-size: var(--fs-xs); }
}

@media print, screen and (min-width: 640px) {
	.p-svcFlow { grid-template-columns: repeat(4, 1fr); }
}

/* ---- 9. 一言口コミ ----------------------------------------------------- */
.p-svcVoice {
	display: grid;
	gap: var(--sp-s);
	margin-block-start: var(--sp-m);
}

@media print, screen and (min-width: 640px) {
	.p-svcVoice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.p-svcVoice-item {
	display: grid;
	gap: var(--sp-xs);
	padding: var(--card-pad);
	background-color: var(--cl-bg-sub);
	border-radius: var(--radius);

	& blockquote { line-height: var(--lh-body); }
	& figcaption { color: var(--cl-text-sub); font-size: var(--fs-s); }
}

/* ---- 10. FAQ ------------------------------------------------------------
   共通パーツ c-faq（components.css）を使う。ページ側では書かない */

/* ---- 11. CTA は共通パーツ（c-ctaList / c-ctaBox）を使う --------------------- */

/* ---- 担当スタッフ（EEAT）----------------------------------------------- */
/* 担当スタッフは共通パーツ c-author（components.css）に置き換えた */

/* 地色に合わせて面を切り替える（design-direction §9）
   - 補足（会社の顔セット）・お客様の声：白セクションでは f5 の面、f5 のセクションでは白地
   - 向き不向き・担当者：リンクのない説明なので、白セクションの上では箱にしない */
.c-sec._bg :is(.p-svcSet, .p-svcVoice-item) { background-color: var(--cl-bg); }
.c-sec:not(._bg) .p-svcFit-box { padding: 0; }