@charset "UTF-8";
/*
 * qazero-case-study.css
 * ------------------------------------------------------------------
 * 事例インタビュー（カテゴリー: case-study）専用レイアウト。
 *
 * 読み込み: inc/qazero-case-study.php が該当記事でだけ enqueue する
 *           （通常のブログ記事・固定ページには一切影響しない）。
 * 描画:     single-case-study.php
 *
 * パレット出典: design/stitch_qa_zero_web_design/DESIGN.md
 *   QA ZERO = 緑が主役。コーラル(#F28080)は quarka/WPアシスタント側なので使わない。
 *   ブランド緑 #00cd0a は「小さな印」に、可読性が要る文字には深緑 #006c50 を使う。
 *
 * 前提: ystandard(親) の #content.site-content の中に全面幅で描く。
 */

/* ============================================================
 * 0) 土台（親テーマの幅制約を解除して全面幅で描く）
 * ============================================================ */
body.qazero-case-study .site-content {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
}
body.qazero-case-study {
	background: #fff;
}
/* 追従ヘッダー(64px)分をアンカー移動時に確保 */
html:has(body.qazero-case-study) {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
	html:has(body.qazero-case-study) { scroll-behavior: auto; }
}

.cs {
	--cs-ink: #0c0c0c;
	--cs-muted: #586973;
	--cs-soft: #68837b;
	--cs-green: #006c50;       /* 文字として読ませる深緑 */
	--cs-green-deep: #00513c;  /* hover 用 */
	--cs-mark: #00cd0a;        /* ブランド緑（小さな印だけ） */
	--cs-line: #dbe6df;
	--cs-surface: #f2faf5;
	--cs-surface-2: #e7f7ee;
	--cs-dark: #25332d;
	--cs-dark-line: #4c6157;
	--cs-dark-text: #d0e2d8;
	--cs-dark-mark: #6bfbc9;

	color: var(--cs-ink);
	font-family: 'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	line-height: 1.9;
}
.cs *,
.cs *::before,
.cs *::after { box-sizing: border-box; }

.cs-wrap {
	width: min(1160px, calc(100% - 48px));
	margin-inline: auto;
}
@media (max-width: 700px) {
	.cs-wrap { width: calc(100% - 40px); }
}

.cs a { color: inherit; }
.cs a:focus-visible,
.cs summary:focus-visible {
	outline: 2px solid var(--cs-green);
	outline-offset: 3px;
	border-radius: 2px;
}

/* 小さな英字ラベル（緑の短い罫線つき） */
.cs-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--cs-green);
}
.cs-eyebrow::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--cs-mark);
	flex: none;
}

/* ============================================================
 * 1) パンくず
 * ============================================================ */
.cs-crumb {
	padding: 26px 0 0;
	font-size: 11px;
	line-height: 1.8;
	color: var(--cs-muted);
}
.cs-crumb a:hover { color: var(--cs-green); text-decoration: underline; }

/* ============================================================
 * 2) ヒーロー
 * ============================================================ */
.cs-hero { padding: 24px 0 36px; }

.cs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 44px;
	align-items: center;
	margin-top: 22px;
}
.cs-hero__client {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cs-green);
}
/* 顧客名テキストの代わりに出すロゴ。ロゴが使えない相手ではテキストに戻る。 */
.cs-hero__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 190px;
	max-height: 46px;
	margin: 0 0 14px;
}
.cs-hero__title {
	margin: 12px 0 18px;
	font-size: clamp(27px, 2.6vw, 37px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
	/* balance は使わない（左右均等に割ろうとして本文より狭く折り返し、「見出しだけ幅が違う」
	   ように見えるため。実測：730px の枠で 385px/364px に分割された）。
	   pretty は行幅は本文と同じまま、最終行に数文字だけ残る状態だけを避ける。 */
	text-wrap: pretty;
}
.cs-hero__title em { font-style: normal; color: var(--cs-green); }
.cs-hero__sub {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--cs-ink);
}
.cs-hero__lead {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.85;
	color: var(--cs-muted);
}
.cs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cs-tags li {
	border: 1px solid var(--cs-line);
	border-radius: 4px;
	padding: 5px 10px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--cs-muted);
	background: var(--cs-surface);
}

.cs-hero__photo { margin: 0; }
.cs-hero__photo img,
.cs-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	background: var(--cs-surface-2);
}
.cs-hero__photo figcaption,
.cs-figure figcaption {
	margin-top: 9px;
	font-size: 11px;
	line-height: 1.8;
	color: var(--cs-muted);
	text-align: left;
}

/* クライアント情報 */
.cs-profile {
	display: grid;
	grid-template-columns: 150px minmax(0, 240px) 1fr;
	align-items: center;
	gap: 24px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--cs-line);
}
/* 「クライアント情報欄の見出し」を空にしたとき＝ラベル列を持たない（左端揃え） */
.cs-profile.no-label {
	grid-template-columns: minmax(0, 260px) 1fr;
}
.cs-profile__label {
	margin: 0;
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--cs-muted);
}
.cs-profile__name {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
}
.cs-profile__list {
	display: flex;
	/* 項目数が2〜4と幅があるので、端に散らさず左から詰める */
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 16px 56px;
	margin: 0;
}
.cs-profile__list > div { min-width: 0; }
.cs-profile__list dt {
	margin: 0 0 4px;
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--cs-muted);
}
.cs-profile__list dd {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
}

/* ============================================================
 * 3) ポイントの帯／カード
 * ------------------------------------------------------------------
 * 見た目はカスタマイザー「ポイントの見せ方」で3種から選べる。
 *   is-band       … 濃緑の帯（画面端まで届く）
 *   is-card-dark  … 濃緑のカード（本文幅に収める・既定）
 *   is-card-light … 淡い緑のカード（本文幅に収める）
 *
 * 全幅の濃い面は「フッターに見える」という指摘があったため、既定を
 * カード（＝画面端に届かない）にしている。色は変数でまとめてある。
 * ============================================================ */
.cs-highlights {
	--hl-bg: #25332d;
	--hl-fg: #ffffff;
	--hl-sub: #d0e2d8;
	--hl-mark: #6bfbc9;
	--hl-rule: #4c6157;
	color: var(--hl-fg);
}

/* 濃緑の帯（従来） */
.cs-highlights.is-band {
	background: var(--hl-bg);
	padding: 40px 0 38px;
}

/* カード（本文幅に収める） */
.cs-highlights.is-card-dark,
.cs-highlights.is-card-light {
	background: transparent;
	padding: 44px 0 8px;
}
.cs-highlights.is-card-dark > .cs-wrap,
.cs-highlights.is-card-light > .cs-wrap {
	background: var(--hl-bg);
	border-radius: 16px;
	padding: 34px 36px 32px;
}

/* 白いカード＋緑の枠（既定）
 * 濃い背景に白抜きは「目立つようで読み飛ばされる」という指摘を受けての既定。
 * 面で主張せず、枠と番号の色で拾わせる。 */
.cs-highlights.is-card-light {
	--hl-bg: #ffffff;
	--hl-fg: #0c0c0c;
	--hl-sub: #586973;
	--hl-mark: #00a808;
	--hl-rule: #e0ece5;
}
.cs-highlights.is-card-light > .cs-wrap {
	border: 1px solid #00cd0a;
}
.cs-highlights.is-card-light .cs-highlights__head h2 { color: #006c50; }

.cs-highlights__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 26px;
}
.cs-highlights__head h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--hl-fg);
}
.cs-highlights__head span {
	flex: none;
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--hl-mark);
}
.cs-highlights__cards {
	display: grid;
	/* 枚数に追従する（2枚でも4枚でも成立させる）。3枚なら従来どおり3等分。 */
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.cs-card {
	padding: 0 32px;
	border-left: 1px solid var(--hl-rule);
}
.cs-card:first-child { padding-left: 0; border-left: 0; }
.cs-card:last-child { padding-right: 0; }
.cs-card__no {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 30px;
	line-height: 1.2;
	color: var(--hl-mark);
}
.cs-card h3 {
	margin: 12px 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--hl-fg);
	/* balance は使わない。3枚それぞれ別の幅に縮んで「横幅が揃っていない」ように見えるため
	   （実測：330px の枠に対して 221px、297px の枠に対して 180px など）。 */
	text-wrap: pretty;
}
.cs-card p {
	margin: 0;
	font-size: 12px;
	line-height: 1.9;
	color: var(--hl-sub);
}

/* ============================================================
 * 4) 本文（追従目次 + 記事）
 * ============================================================ */
.cs-reading {
	display: grid;
	grid-template-columns: 220px minmax(0, 730px);
	gap: 90px;
	justify-content: space-between;
	padding-top: 64px;
	padding-bottom: 72px;
}

.cs-toc {
	align-self: start;
	position: sticky;
	top: 88px;
}
.cs-toc__label {
	margin: 0 0 20px;
	font-size: 10px;
	letter-spacing: .15em;
	color: var(--cs-muted);
}
.cs-toc ol {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cs-line);
}
.cs-toc li { margin: 0; }
.cs-toc a {
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--cs-line);
	font-size: 12px;
	line-height: 1.6;
	color: var(--cs-muted);
	text-decoration: none;
}
.cs-toc a span {
	flex: none;
	font-size: 10px;
	padding-top: 2px;
}
/* 目次は本文の見出しをそのまま出すので、長いものは3行で丸める */
.cs-toc a > :not(span),
.cs-toc a {
	overflow-wrap: anywhere;
}
.cs-toc a:hover { color: var(--cs-green); font-weight: 700; }
.cs-toc__note {
	margin-top: 22px;
	font-size: 11px;
	line-height: 1.9;
	color: var(--cs-muted);
}

/* 導入文 */
.cs-intro {
	padding-bottom: 32px;
	font-size: 15px;
	line-height: 2.1;
}
.cs-intro p { margin: 0 0 22px; }
.cs-intro p:last-child { margin-bottom: 0; }

/* 章 */
.cs-chapter {
	border-top: 1px solid var(--cs-line);
	padding: 44px 0 34px;
}
.cs-chapter__label {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0;
	color: var(--cs-green);
}
.cs-chapter__no {
	font: italic 700 21px/1 Georgia, 'Times New Roman', serif;
}
.cs-chapter__tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
}
.cs-chapter__title {
	margin: 16px 0 26px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: 0;
	/* balance は使わない（左右均等に割ろうとして本文より狭く折り返し、「見出しだけ幅が違う」
	   ように見えるため。実測：730px の枠で 385px/364px に分割された）。
	   pretty は行幅は本文と同じまま、最終行に数文字だけ残る状態だけを避ける。 */
	text-wrap: pretty;
	border: 0;
	padding: 0;
	background: none;
	color: var(--cs-ink);
}
.cs-chapter p {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 2.15;
}
.cs-chapter > *:last-child { margin-bottom: 0; }
.cs-chapter h3 {
	margin: 30px 0 14px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
	border: 0;
	padding: 0;
	background: none;
}
.cs-chapter ul,
.cs-chapter ol { margin: 0 0 22px; padding-left: 1.4em; font-size: 15px; line-height: 2.05; }
.cs-chapter li { margin: 0 0 8px; }

/* 引用（インタビュー発言）
 * 親テーマ ystandard の装飾（大きな引用符・cite 前のハイフン）は、
 * 事例記事では「話し手の声」として読ませたいので消す。 */
.cs-article blockquote::before,
.cs-article blockquote::after,
.cs-article blockquote > p::before,
.cs-article blockquote > p::after,
.cs-article blockquote cite::before,
.cs-article blockquote cite::after {
	content: none !important;
	display: none !important;
}
.cs-article blockquote {
	margin: 30px 0;
	padding: 26px 30px;
	background: var(--cs-surface-2);
	border: 0;
	border-left: 3px solid var(--cs-green);
	border-radius: 0 6px 6px 0;
}
.cs-article blockquote p {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.85;
}
.cs-article blockquote cite,
.cs-article blockquote .wp-block-quote__citation {
	display: block;
	margin-top: 14px;
	font-size: 11px;
	font-style: normal;
	color: var(--cs-muted);
}

/* 話者の顔写真つきの引用
 * 「株式会社セガ ウェブデザイン課 牛尾様」の文字列より、顔が出ているほうが読まれる、
 * という社内フィードバックによる。
 * インタビューの回答者は複数いるのが普通なので、発言者は投稿の設定「発言者（顔写真）」に
 * 何人でも登録でき、どの発言が誰かは引用元（cite）に書いた名前で対応する。
 * 顔写真と短い表示名はテンプレート側が差し込む（.cs-speaker）。
 * 長い肩書き入りの引用元は読み上げ用に残し、視覚的にだけ隠す。 */
.cs-article blockquote.has-speaker {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}
.cs-article blockquote.has-speaker > * { grid-column: 2; }
.cs-article blockquote.has-speaker > .cs-speaker { grid-column: 1; }
.cs-speaker {
	display: block;
	width: 64px;
}
.cs-speaker__img {
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 auto;
	border-radius: 50%;
	background-size: cover;
	background-position: center center;
	background-color: #dbe6df;
}
.cs-speaker__name {
	display: block;
	margin-top: 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	color: var(--cs-muted);
}
.cs-article blockquote.has-speaker cite,
.cs-article blockquote.has-speaker .wp-block-quote__citation {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* 取材当日の写真（記事末尾のギャラリー） */
.cs-article .wp-block-gallery {
	margin: 34px 0 0;
	gap: 12px;
}
.cs-article .wp-block-gallery figcaption { display: none; }
.cs-article .wp-block-gallery img {
	border-radius: 6px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* 記事内の写真（core/image） */
.cs-article figure.wp-block-image,
.cs-figure {
	margin: 26px 0 30px;
}
.cs-article figure.wp-block-image img { border-radius: 4px; }
.cs-article figure.wp-block-image figcaption {
	margin-top: 9px;
	font-size: 11px;
	line-height: 1.8;
	color: var(--cs-muted);
	text-align: left;
	padding: 0;
}

/* ブロックスタイル「事例：読者へのポイント」（core/group） */
.cs-article .is-style-cs-callout {
	margin: 28px 0;
	padding: 22px 26px;
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: 8px;
}
.cs-article .is-style-cs-callout > *:first-child { margin-top: 0; }
.cs-article .is-style-cs-callout > *:last-child { margin-bottom: 0; }
.cs-article .is-style-cs-callout h3,
.cs-article .is-style-cs-callout h4 {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--cs-green);
}
.cs-article .is-style-cs-callout p { font-size: 14px; line-height: 2; margin-bottom: 12px; }

/* ブロックスタイル「事例：注記」（core/group） */
.cs-article .is-style-cs-note {
	margin: 24px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--cs-line);
}
.cs-article .is-style-cs-note p {
	margin: 0;
	font-size: 11px;
	line-height: 1.9;
	color: var(--cs-muted);
}

/* ============================================================
 * 5) 製品・導入案内（FAQ）
 * ============================================================ */
.cs-guide {
	margin-top: 16px;
	padding: 32px;
	background: var(--cs-surface-2);
	border: 1px solid var(--cs-line);
	border-radius: 10px;
}
.cs-guide__note {
	margin: 0 0 20px;
	font-size: 11px;
	color: var(--cs-muted);
}
.cs-faq {
	padding: 22px 0;
	border-top: 1px solid #cbdcd2;
}
.cs-faq:last-child { padding-bottom: 0; }
.cs-faq h3 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
	border: 0;
	padding: 0;
	background: none;
}
.cs-faq p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 2;
}
.cs-faq__link {
	margin: 0;
	font-size: 12px;
}
.cs-faq__link a {
	color: var(--cs-green);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cs-faq__link a:hover { color: var(--cs-green-deep); }

/* GEO 発行元ボックス（qazero-geo.php が出す aside）の余白だけ整える */
.cs-article .qazero-about-box { margin-top: 40px !important; }

/* ============================================================
 * 6) レスポンシブ
 * ============================================================ */

/* ブレークポイントの考え方
 *   1001px〜 … 追従目次のサイドバー + 本文（デスクトップ）
 *    901〜1000px … サイドバーを細めて維持
 *    〜900px … **縦積みに切り替える**。タブレット幅で「細い目次＋圧迫された本文」に
 *              なるのを避けるため、700px ではなく 900px で崩す
 *    〜700px … さらに文字サイズ・余白を詰める
 */
@media (max-width: 1000px) {
	.cs-hero__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
	.cs-hero__title { font-size: 30px; }
	.cs-profile { grid-template-columns: 180px 1fr; gap: 10px 24px; }
	.cs-profile__label { grid-column: 1; }
	.cs-profile__name { grid-column: 1; grid-row: 2; }
	.cs-profile__list { grid-column: 2; grid-row: 1 / 3; }
	.cs-profile.no-label { grid-template-columns: 200px 1fr; }
	.cs-profile.no-label .cs-profile__name { grid-column: 1; grid-row: 1; }
	.cs-profile.no-label .cs-profile__list { grid-column: 2; grid-row: 1; }
	.cs-reading { grid-template-columns: 190px minmax(0, 1fr); gap: 40px; }
	.cs-card { padding: 0 22px; }
	.cs-card h3 { font-size: 19px; }
}

/* ここから縦積み（タブレット・スマホ共通の構造） */
@media (max-width: 900px) {
	.cs-hero { padding: 12px 0 28px; }
	/* デスクトップ用の align-items:center が残ると、縦積み時に子要素が
	   中央寄せ＆コンテンツ幅に縮む（左端が揃わない）。明示的に戻す。 */
	.cs-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 24px; margin-top: 20px; }
	.cs-hero__title { font-size: clamp(24px, 4.6vw, 32px); }
	.cs-hero__photo { order: -1; }

	.cs-profile { display: block; margin-top: 24px; padding-top: 18px; }
	.cs-profile__label { display: none; }
	.cs-profile__name { font-size: 19px; margin-bottom: 14px; }
	.cs-profile__list { flex-wrap: wrap; gap: 16px 28px; justify-content: flex-start; }

	.cs-highlights.is-band { padding: 30px 0 24px; }
	.cs-highlights.is-card-dark,
	.cs-highlights.is-card-light { padding: 30px 0 4px; }
	.cs-highlights.is-card-dark > .cs-wrap,
	.cs-highlights.is-card-light > .cs-wrap { padding: 24px 22px 22px; border-radius: 12px; }
	.cs-highlights__head { align-items: flex-start; flex-direction: column; gap: 10px; }
	.cs-highlights__head h2 { font-size: 17px; }
	/* 3枚を2列にすると3枚目だけ取り残されるので、1列（行）に切り替える */
	.cs-highlights__cards { grid-template-columns: 1fr; }
	.cs-card,
	.cs-card:first-child,
	.cs-card:last-child {
		border: 0;
		border-top: 1px solid var(--hl-rule);
		padding: 18px 0;
		display: grid;
		grid-template-columns: 44px 1fr;
		column-gap: 16px;
	}
	.cs-card:first-child { border-top: 0; padding-top: 0; }
	.cs-card__no { font-size: 26px; grid-row: 1 / 3; }
	.cs-card h3 { font-size: 19px; margin: 0 0 7px; }
	.cs-card p { grid-column: 2; }

	/* 目次はサイドバーをやめ、本文の上に横並びで置く */
	.cs-reading { display: block; padding-top: 32px; padding-bottom: 40px; }
	.cs-toc { position: static; margin-bottom: 34px; }
	.cs-toc__label { margin-bottom: 12px; }
	.cs-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
	.cs-toc a { padding: 12px 0; font-size: 12px; gap: 10px; }
	.cs-toc__note { display: none; }
}

@media (max-width: 700px) {
	.cs-hero__logo { max-width: 150px; max-height: 38px; margin-bottom: 12px; }
	.cs-hero__sub { font-size: 14px; }
	.cs-hero__lead { font-size: 13px; }
	/* PC向けに入れた改行は狭い画面では邪魔になるので無効化する */
	.cs-hero__lead br,
	.cs-toc__note br { display: none; }
	.cs-profile__name { font-size: 18px; }
	.cs-profile__list dd { font-size: 11px; }

	.cs-highlights.is-card-dark > .cs-wrap,
	.cs-highlights.is-card-light > .cs-wrap { padding: 22px 20px 20px; }
	.cs-highlights__head h2 { font-size: 16px; }

	.cs-toc ol { grid-template-columns: 1fr; }
	.cs-toc a { font-size: 12px; }

	.cs-intro { font-size: 14px; }
	.cs-chapter { padding: 32px 0 22px; }
	.cs-chapter__title { font-size: 23px; }
	.cs-chapter p { font-size: 14px; line-height: 2.1; }
	.cs-article blockquote { margin: 26px 0; padding: 20px 20px; }
	.cs-article blockquote.has-speaker { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
	.cs-speaker { width: 52px; }
	.cs-speaker__img { width: 48px; height: 48px; }
	.cs-speaker__name { font-size: 10px; }
	.cs-article .wp-block-gallery { gap: 8px; }
	.cs-article blockquote p { font-size: 17px; }

	.cs-guide { padding: 24px 20px; }
	.cs-faq h3 { font-size: 17px; }
	.cs-faq p { font-size: 13px; }
}

/* ============================================================
 * 7) 印刷（営業が紙で配る用途）
 * ============================================================ */
@media print {
	@page { size: A4; margin: 16mm; }
	body.qazero-case-study { background: #fff; font-size: 10pt; }
	.qzc-header,
	.qzc-footer,
	.cs-crumb,
	.cs-toc,
	.skip-link { display: none !important; }
	.cs-wrap { width: 100%; }
	.cs-hero { padding: 0 0 16px; }
	.cs-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; break-inside: avoid; }
	.cs-hero__title { font-size: 20pt; }
	.cs-highlights,
	.cs-highlights > .cs-wrap { background: #fff !important; color: var(--cs-ink); padding: 18px 0; border: 0; border-radius: 0; }
	.cs-highlights { border-top: 2px solid var(--cs-green); border-bottom: 1px solid var(--cs-line); }
	.cs-highlights__head h2,
	.cs-card h3 { color: var(--cs-ink); }
	.cs-highlights__head span,
	.cs-card p { color: var(--cs-muted); }
	.cs-card__no { color: var(--cs-green); font-size: 19pt; }
	.cs-card h3 { font-size: 12pt; }
	.cs-reading { display: block; padding: 22px 0; }
	.cs-chapter { padding: 20px 0; break-inside: auto; }
	.cs-chapter__title { font-size: 17pt; break-after: avoid; }
	.cs-intro, .cs-chapter p { font-size: 10pt; line-height: 1.9; }
	.cs-article blockquote { break-inside: avoid; padding: 14px 18px; }
	.cs-article blockquote p { font-size: 12pt; }
	.cs-article figure.wp-block-image { break-inside: avoid; max-width: 125mm; margin: 18px auto; }
	.cs-guide, .cs-faq { break-inside: avoid; }
	h2, h3 { break-after: avoid; }
	p { orphans: 3; widows: 3; }
}

/* ============================================================
 * 8) 事例一覧ページ（/case-studies/）
 * ------------------------------------------------------------------
 * 固定ページ「導入事例」の事例カード。本文はブロック（＝編集可）のままで、
 * 見た目だけここが受け持つ。ブロックパターン「事例カード」から生成される。
 *
 * 設計の前提：件数が1〜数件でも成立すること。3カラムのグリッドにすると
 * 1件のとき破綻するので、横長カードの縦積みにしている。
 * 写真の有無・詳細記事の有無・パートナー経由かどうかで、それぞれ欠けても崩れない。
 * ============================================================ */

.qz-case-lead {
	/* 52em だとリード文（約54字）の「た。」だけが2行目に落ちたため、PCで1行に収まる幅へ */
	max-width: 58em;
	margin: 0 0 40px;
	font-size: 15px;
	line-height: 2.05;
	color: #586973;
}

.qz-case {
	margin: 0 0 28px;
	padding: 34px 36px 30px;
	background: #fff;
	border: 1px solid #dbe6df;
	border-radius: 12px;
}
.qz-case > *:last-child { margin-bottom: 0; }

/* 上部のメタ行（業種・規模など。「｜」区切りのただの段落） */
.qz-case__meta {
	margin: 0 0 10px !important;
	font-size: 12px !important;
	line-height: 1.7;
	letter-spacing: .04em;
	color: #586973;
}

/* 会社名 */
.qz-case h2 {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.55;
	color: #0c0c0c;
}

/* 本番の ystandard-toolbox 見出しスタイル（.ystdtb .entry-content h2 に左の縦線）が
   上の指定より強く、カード内の社名に線・大きな上余白が付いたため打ち消す。ローカルには同プラグインが無く見えない */
.ystdtb .entry-content .qz-case h2 {
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 25px !important;
}

/* 決め手の一行（カードの主役。ここだけ読めば何の事例かわかる） */
.qz-case__lead {
	margin: 0 0 22px !important;
	font-size: 17px !important;
	font-weight: 600;
	line-height: 1.8;
	color: #006c50;
	/* balance は使わない（左右均等に割ろうとして本文より狭く折り返し、「見出しだけ幅が違う」
	   ように見えるため。実測：730px の枠で 385px/364px に分割された）。
	   pretty は行幅は本文と同じまま、最終行に数文字だけ残る状態だけを避ける。 */
	text-wrap: pretty;
}

/* 「導入の背景」「QA ZERO導入のポイント」 */
.qz-case h3 {
	margin: 22px 0 10px;
	padding: 14px 0 0;
	border: 0;
	border-top: 1px solid #e6efe9;
	background: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .04em;
	color: #006c50;
}

.qz-case p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.95;
}

/* カード内の写真 */
.qz-case .wp-block-image { margin: 0; }
/* 写真クリックで事例記事へ飛べるようにしたときの見た目 */
.qz-case .wp-block-image a {
	display: block;
	border-radius: 8px;
	overflow: hidden;
}
.qz-case .wp-block-image a img { transition: opacity .15s ease; }
.qz-case .wp-block-image a:hover img { opacity: .85; }
.qz-case .wp-block-image a:focus-visible {
	outline: 2px solid #006c50;
	outline-offset: 3px;
}
.qz-case .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: #e7f7ee;
}
.qz-case .wp-block-image figcaption {
	margin-top: 8px;
	padding: 0;
	font-size: 11px;
	line-height: 1.8;
	text-align: left;
	color: #586973;
}

/* カード下部：詳細記事への導線 ＋ パートナークレジット */
.qz-case__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 24px;
	margin: 24px 0 0 !important;
	padding-top: 18px;
	border-top: 1px solid #e6efe9;
}
.qz-case__more {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700;
}
.qz-case__more a {
	color: #006c50;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.qz-case__more a:hover { color: #00513c; }
/* パートナー経由の事例であることの明示（代理店の実績として見えるように） */
.qz-case__partner {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.8;
	color: #586973;
}
.qz-case__partner strong { color: #0c0c0c; font-weight: 700; }

/* 準備中カード（掲載前の枠。公開時は中身を差し替える） */
.qz-case.is-coming {
	background: #f7faf8;
	border-style: dashed;
}
.qz-case.is-coming h2 { color: #586973; }

/* 一覧ページの下部ブロック */
.qz-case-related { margin-top: 56px; }
.qz-case-related h2 { margin-bottom: 8px; }

/* スマホでは写真を先頭へ（テキストを延々スクロールしないと絵に会えないのを避ける）。
   カラムが縦積みになる WordPress の閾値 781px に合わせる。 */
@media (max-width: 781px) {
	.qz-case .wp-block-columns > .wp-block-column:last-child { order: -1; margin-bottom: 18px; }
}

@media (max-width: 700px) {
	.qz-case { padding: 24px 20px 22px; border-radius: 10px; }
	.qz-case h2 { font-size: 21px; }
	.qz-case__lead { font-size: 15px !important; }
	.qz-case p { font-size: 13px; }
	.qz-case__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
	.qz-case-lead { font-size: 14px; margin-bottom: 28px; }
}


/* ============================================================
 * 9) 日本語の折り返し
 * ------------------------------------------------------------------
 * 親テーマ ystandard が全体に `word-break: break-word` を当てている。これは
 * 英単語の途中でも折るため、日本語混じりの文で不自然な切れ方をする。
 * ここでは `normal`（日本語の標準的な折り返し＋禁則処理）に戻す。
 *
 * 一度 `auto-phrase`（文節単位で折る）を試したが、折れない文節が来ると
 * 行末に大きな空きができ「本文にEnterが入っている」ように見えたため取りやめた。
 *   例：「…GA4を推進する」で 730px 中 586px で改行され、右に144pxの空白ができた。
 * 見出しにも同じ指定が効く（`text-wrap: balance` は本文より狭く折るため使っていない）。
 * ============================================================ */
.qz-case-lead,
.qz-case h2,
.qz-case h3,
.qz-case p,
.qz-case__lead,
.cs-hero__title,
.cs-hero__sub,
.cs-hero__lead,
.cs-card h3,
.cs-card p,
.cs-chapter__title,
.cs-intro p,
.cs-chapter p,
.cs-article blockquote p,
.cs-faq h3,
.cs-faq p {
	/* 行はきちんと埋めつつ、禁則処理を厳格に（小書き仮名・長音符・句読点の前で折らない） */
	word-break: normal;
	line-break: strict;
	overflow-wrap: break-word;
}