@charset "utf-8";
/* =========================================================
   case.css — 事例（/case/ ・/case/client/ ・/case/works/ ・/case/support/）
   3区分の使い分けは docs/renewal-decisions.md D9・D38
   ========================================================= */

/* ---- 事例トップ：3区分へのハブ ------------------------------------------
   共通パーツ c-issueCards _col3 / c-issueCard（ラベル付き）に置き換えた */

/* ---- 絞り込み（サービス別・業種別・エリア別）------------------------------
   WPでは works-cat / 業種 / works-area のタクソノミー一覧へのリンクになる */
/* 絞り込みは共通パーツ c-tabFilter（components.css）に置き換えた */

/* ---- 事例詳細（クライアント事例・サポート事例）----------------------------- */
/* 詳細ページの①（白）。KV 画像の下の --sp-l はこの padding-block-end で取る（KV の margin ではなく。§9）*/
.p-caseHead {
	padding-block: var(--sp-xs) var(--sp-l);

	/* パンくず → タイトル → タグ → KV（§9）。タグはタイトルの下に --sp-xs */
	& .p-caseHead-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5em 1em;
		margin-block-start: var(--sp-xs);
		color: var(--cl-text-sub);
		font-size: var(--fs-ui);
		line-height: var(--lh-ui);
	}

	& .p-caseHead-title {
		margin-block-start: var(--sp-m);
		max-width: var(--w-inner);
		font-size: var(--fs-xl);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.015em;
	}

	& .p-caseHead-pic { margin-block-start: var(--sp-m); aspect-ratio: 16 / 10; overflow: clip; }
	& .p-caseHead-pic img { width: 100%; height: 100%; object-fit: cover; }
}

/* 概要表（クライアント・業種・エリア・制作物・期間・費用）*/
.p-caseSummary {
	margin-block-start: var(--sp-m);

	& .c-table th { width: 26%; }
}

/* 課題→解決策→成果 */
/* ②本文（f5）の先頭に置くので上余白は持たない */
/* WP のブロックエディタで作る本文では、グループの中身が .wp-block-group__inner-container で包まれる。
   プロトタイプ（包みなし）と同じ見た目にするため、grid・gap は「包みがあればその中身、なければ自分」に当てる。
   （ルールの例外：WP の出力クラスを指定する。docs/wp-structure.md「実績・事例の説明文」） */
.p-caseFlow,
.p-caseFlow > .wp-block-group__inner-container {
	display: grid;
	gap: var(--sp-m);
}

.p-caseFlow-item,
.p-caseFlow-item > .wp-block-group__inner-container {
	display: grid;
	gap: 0.8em;
}

.p-caseFlow-item {
	max-width: var(--w-text);

	& .p-caseFlow-label {
		justify-self: start;
		color: var(--cl-text-sub);
		font-size: var(--fs-ui);
		font-weight: var(--fw-bold);
		line-height: var(--lh-ui);
	}

	& .p-caseFlow-title { font-size: var(--fs-l); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.01em; }
	/* 長文を読む場所なので --lh-read（§9）*/
	& .p-caseFlow-txt { line-height: var(--lh-read); }
	& .p-caseFlow-txt + .p-caseFlow-txt { margin-block-start: 0.5em; }
}

/* お客様の声 */
.p-caseVoice {
	margin-block-start: var(--sp-m);
	padding: var(--card-pad);
	background-color: var(--cl-bg-sub);
	border-radius: var(--radius);
	max-width: var(--w-text);

	& blockquote { line-height: var(--lh-read); }
	& :is(figcaption, .p-caseVoice-name) { margin-block-start: 0.8em; color: var(--cl-text-sub); font-size: var(--fs-ui); }

	/* ブロックエディタで作る本文（p-articleBody の中）では、引用ブロックが記事本文の引用の見た目（面・余白）にならないようにする。
	   プロトタイプ（figure＞blockquote）と同じ見た目にそろえる */
	& blockquote { margin: 0; padding: 0; border: 0; background-color: transparent; color: inherit; border-radius: 0; }
}

/* ②本文は f5 の上なので、お客様の声は白の面にする */
.c-sec._bg .p-caseVoice { background-color: var(--cl-bg); }

/* ---- 制作実績の詳細 ------------------------------------------------------- */
.p-worksSpec {
	margin-block-start: var(--sp-m);

	& .c-table th { width: 26%; }
}

.p-worksShots {
	display: grid;
	gap: var(--sp-s);
	margin-block-start: var(--sp-m);

	& img { width: 100%; height: auto; }
}

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

/* 実績・事例の本文（p-articleBody._case）：ブロック同士の間隔を --sp-m にする。
   p-articleBody の既定（1.4em）は、コラム・ニュースなど、ほかの記事のためにそのまま残す。
   ラベル＋文章（p-caseFlow）や画像の2カラムなど、大きな塊の間隔をそろえるため */
.p-articleBody._case > * + * { margin-block-start: var(--sp-m); }