@charset "UTF-8";
/* Lacks Japan 実績記事 共通スタイル
 *
 *   - 名前空間は lj-。すべて .lj-case 配下へスコープする。
 *   - 外部フォント・外部CDN・@import を使わない。
 *   - :root / html / body へ書かない（テーマとサイト全体へ漏らさない）。
 *   - 固定投稿IDのセレクタを使わない。body.lj-case-article で当てる。
 *   - 100vw の自前フルブリードを使わない。全幅はテーマの alignfull に乗せる。
 *   - ブレークポイントはテーマに合わせて 600px / 960px を基本にする。
 */

/* ------------------------------------------------------------------
   0. 記事の器とデザイントークン
------------------------------------------------------------------ */
.lj-case {
	--lj-ink: #17212b;
	--lj-ink-soft: #53616d;
	--lj-blue: #153f63;
	--lj-blue-deep: #0c2f4e;
	--lj-blue-pale: #eaf3f7;
	--lj-blue-wash: #f4f8fa;
	--lj-line: #bfd2dc;
	--lj-line-soft: #dbe5ea;
	--lj-line-strong: #7899aa;   /* 罫線・区切りの装飾専用。文字には使わない */
	/* 意味を持つ小さな文字（番号・タグ・区切り記号）用。白4.5:1以上を満たす最小の濃さ。
	   白5.60 / 淡青wash 5.24 / 淡青pale 4.97 / 暖色地 4.85（2026-08-31 実測） */
	--lj-ink-muted: #4d6c7c;
	--lj-paper: #ffffff;
	--lj-warm: #f3eee6;
	--lj-focus: #c2650c;            /* 白4.07 / 淡青3.81 / 暖色地3.52 / 濃紺3.37：すべて3:1以上 */
	--lj-shell: 1120px;
	--lj-reading: 820px;
	/* SWELLはルートのフォントサイズを画面幅で変えるため、余白の下限はremではなくpxで持つ。
	   これでSPでも左右20px以上を確保できる。 */
	--lj-gutter: clamp(20px, 4vw, 48px);
	--lj-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
	--lj-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	/* 固定ヘッダー分のアンカー補正。実測に合わせてここだけ変えれば全アンカーへ効く。 */
	--lj-anchor-offset: 4.5rem;

	color: var(--lj-ink);
	font-family: var(--lj-sans);
	font-size: 1rem;
	line-height: 1.9;
	/* 日本語の折り返し：単語の途中で割らず、収まらない連続文字だけ折る。禁則処理を有効にする。 */
	overflow-wrap: break-word;
	word-break: normal;
	line-break: strict;
}

.lj-case *,
.lj-case *::before,
.lj-case *::after { box-sizing: border-box; }

/* 見出し・キャッチ・引用・箇条書きなど「短い文」は、文節の切れ目で折り返す。
   既定のままだと「「SNSの使い方も、戦／略も、」「「子どもが好きだから」で／は、」の
   ように語の途中で割れる（2026-09-08 実測）。
   長い本文（.lj-prose p）へは当てない。行数が増え、右端が不ぞろいになるため。
   Safari・Firefox は未対応で、従来どおりの折り返しになる（悪化はしない）。
   ブラウザに任せきれない箇所は、編集画面のツールバーで個別に指定する
   （共通プラグイン lj-text-wrap ／ ../../../共通ルール/20_レスポンシブ・アクセシビリティ.md §11）。 */
.lj-case h1,
.lj-case h2,
.lj-case h3,
.lj-case .lj-hero__catch,
.lj-case .lj-hero__lead,
.lj-case .lj-video__lead,
.lj-case .lj-cta__lead,
.lj-case .lj-note,
.lj-case .lj-issue-list li,
.lj-case .lj-comparison__text,
.lj-client-voice blockquote p { word-break: auto-phrase; }

/* --- SWELLの既定装飾を、記事の中だけ打ち消す --- */
.lj-case h1,
.lj-case h2,
.lj-case h3,
.lj-case h4 {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-feature-settings: "palt" 1;
}
.lj-case h2::before, .lj-case h2::after,
.lj-case h3::before, .lj-case h3::after { content: none; }
.lj-case p { margin: 0; }
.lj-case p, .lj-case li, .lj-case dd { text-wrap: pretty; }
.lj-case ul, .lj-case ol, .lj-case li { background: none; border: 0; }
.lj-case a { color: inherit; background: none; box-shadow: none; }
.lj-case img { display: block; max-width: 100%; height: auto; }
.lj-case figure { margin: 0; }

.lj-case :focus-visible {
	outline: 3px solid var(--lj-focus);
	outline-offset: 4px;
}

/* アンカー位置は html へのグローバル指定ではなく記事スコープで当てる。
   セクション自身が .lj-case かつ id を持つので、自身と子孫の両方へ当てる。
   実値はローカルで実測した固定ヘッダー高さ（PC 102px / SP 70px）に余白を足したもの。 */
.lj-case[id],
.lj-case [id] { scroll-margin-top: var(--lj-anchor-offset); }
.admin-bar .lj-case[id],
.admin-bar .lj-case [id] { scroll-margin-top: calc(var(--lj-anchor-offset) + 32px); }
@media (max-width: 782px) {
	.admin-bar .lj-case[id],
	.admin-bar .lj-case [id] { scroll-margin-top: calc(var(--lj-anchor-offset) + 46px); }
}
@media (min-width: 960px) {
	.lj-case { --lj-anchor-offset: 7.5rem; }
}

/* SWELLのページタイトルとアイキャッチは、記事内のヒーローと重複するので隠す。
   固定投稿IDではなく body クラスで当てる（プラグインの body_class フィルタが付与）。 */
.lj-case-article .c-pageTitle,
.lj-case-article .p-articleThumb { display: none; }

/* ページタイトルを隠したぶん、その下に用意されていた間隔が空白として残る。
   記事のヒーローは自前の余白（padding-block）を持つので、実績記事のページでだけ
   テーマ側の間隔を外す。テーマ本体は変更せず、body クラスでスコープする。
   2026-09-08 実測：パンくずの下の空白が SP 126px → 35px、PC 208px → 80px。 */
.lj-case-article .post_content { margin-top: 0; }
.lj-case-article .l-content { padding-top: 0; }

/* 注意：core/group は描画時に .wp-block-group__inner-container を挟む場合がある。
   そのため、グループをまたぐ指定に子結合子（>）を使わない。 */

/* コアのレイアウト既定（is-layout-flow）とSWELLのブロック間マージンを打ち消す。
   セクション間の間隔は各セクションの padding、内部は .lj-flow の gap で持つ。 */
.lj-case-article .post_content > .lj-case { margin-block: 0; }
/* theme.json を持たないテーマでは、コアが core/group の描画時に
   .wp-block-group__inner-container を復活させる（wp_restore_group_inner_container）。
   その入れ子があってもレイアウトが変わらないよう、器としては数えないようにする。 */
.lj-case .wp-block-group__inner-container { display: contents; }
.lj-case .wp-block-group > *,
.lj-case .wp-block-group__inner-container > *,
.lj-case .lj-flow > * { margin-block: 0; }

/* --- 幅の器 ---
   全幅背景（alignfull）の中に、共通のワイドコンテナ .lj-case__shell を1つ置く。
   読み物幅（.lj-case__reading）は幅だけを狭め、左端はワイドコンテナと同じ位置に保つ。
   中央寄せにすると、動画・目次・CTAだけ見出しの左端がずれる。 */
.lj-case__shell {
	width: min(calc(100% - (var(--lj-gutter) * 2)), var(--lj-shell));
	margin-inline: auto;
}
.lj-case__reading { max-width: var(--lj-reading); }
.lj-case__shell.lj-case__reading {
	margin-inline: max(var(--lj-gutter), calc((100% - var(--lj-shell)) / 2)) auto;
}

/* セクションの縦フロー。横2カラムはヒーローとBefore／Afterだけ。 */
.lj-case .lj-flow { display: grid; gap: var(--lj-flow-gap, clamp(2rem, 4.5vw, 3.25rem)); }

/* 全幅セクションの内側パディング */
.lj-case.lj-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* ------------------------------------------------------------------
   1. ヒーロー（PCのみ横2カラム／1カラム原則の例外）
------------------------------------------------------------------ */
.lj-hero { overflow: hidden; padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6.5rem); }
.lj-hero .lj-hero__inner { display: grid; gap: clamp(1.75rem, 3.5vw, 3.25rem); }
.lj-hero .lj-hero__copy { max-width: 44rem; }

.lj-case .lj-eyebrow,
.lj-case .lj-editorial-heading__label {
	margin: 0 0 .8rem;
	color: var(--lj-blue);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
}

.lj-hero .lj-hero__copy h1 {
	font-family: var(--lj-serif);
	font-size: clamp(1.7rem, 3.3vw, 2.95rem);
	font-weight: 600;
	letter-spacing: .015em;
	line-height: 1.38;
	text-wrap: balance;
}

.lj-case .lj-hero__catch {
	max-width: 32rem;
	margin: clamp(1.25rem, 3vw, 2.5rem) 0 0;
	padding-left: 1.1rem;
	border-left: 2px solid var(--lj-blue);
	color: var(--lj-blue-deep);
	font-size: clamp(.98rem, 1.35vw, 1.15rem);
	font-weight: 600;
	line-height: 1.75;
	font-feature-settings: "palt" 1;
}
.lj-case .lj-hero__lead { max-width: 35rem; margin: 1.5rem 0 0; color: var(--lj-ink-soft); }
.lj-hero .lj-hero__figure { position: relative; }
.lj-hero .lj-hero__figure img { width: 100%; }
/* 縦位置写真をそのまま使う場合（2026-09-10 追加）。横長へ引き伸ばさない・不自然にトリミングしないため、
   画像ブロック側（id/width/height）で真の縦横比のまま1つの表示サイズを指定してもらう前提のクラス。
   幅・高さをここでCSS側から書き換えない（auto化やmax-heightでの再計算は、読み込み前後で
   後続セクションの位置がずれる原因になったため使わない。詳細は case.yml todo-design-metrics-dialogue）。
   ここでは配置（中央寄せ・角丸）だけを担当する。 */
.lj-hero .lj-hero__figure--portrait img {
	display: block;
	margin-inline: auto;
	border-radius: 2px;
}

/* 縦位置写真の共通の扱い（2026-09-10 追加）。中扉・解決策・成果・対談などで実写真をそのまま使うための
   汎用クラス。表示サイズは画像ブロック側（width/height）が真の縦横比で指定する。ここでは配置だけを担当する。 */
.lj-case .lj-portrait-figure { margin: 0; }
.lj-case .lj-portrait-figure img {
	display: block;
	margin-inline: auto;
	border-radius: 2px;
}
.lj-case .lj-portrait-figure figcaption { text-align: center; margin-top: .5rem; }
/* 複数枚を横並びにするときの器（対談の話者紹介など）。
   2026-09-14：中央寄せだと、左端そろえの見出し・本文から写真だけが浮いて見えたため、左そろえの2列グリッドへ変更。
   1枚の幅は上限だけを決め、スマートフォンでも2列のまま縮む（縦積みで写真が大きくなりすぎない）。 */
.lj-case .lj-portrait-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 13.5rem));
	justify-content: start;
	gap: clamp(.75rem, 2.4vw, 1.25rem);
}
.lj-case .lj-portrait-row .lj-portrait-figure img { width: 100%; height: auto; margin: 0; }
.lj-case .lj-portrait-row .lj-portrait-figure figcaption { margin-top: .45rem; text-align: left; color: var(--lj-ink-soft); font-size: .78rem; }

/* 会社概要の短い一覧。コアのテーブルブロックで組む。 */
.lj-case .lj-facts table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--lj-line); }
.lj-case .lj-facts td { padding: .7rem 0; border-bottom: 1px solid var(--lj-line-soft); border-left: 0; border-right: 0; vertical-align: top; }
.lj-case .lj-facts td:first-child { width: 6.5rem; color: var(--lj-ink-soft); font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
.lj-case .lj-facts td:last-child { font-size: .9rem; font-weight: 600; }
.lj-case .lj-facts figcaption { display: none; }

/* ------------------------------------------------------------------
   2. 成果サマリー（数値が主役）
------------------------------------------------------------------ */
.lj-metrics {
	position: relative;
	overflow: clip;
	border-top: 1px solid var(--lj-line);
	background: var(--lj-blue-wash);
}
.lj-metrics .lj-case__shell { position: relative; z-index: 1; }

.lj-case .lj-editorial-heading { display: grid; gap: .15rem; margin-bottom: clamp(1.75rem, 4.5vw, 3.5rem); }
.lj-case .lj-editorial-heading h2 {
	font-family: var(--lj-serif);
	font-size: clamp(1.45rem, 2.5vw, 2.2rem);
	font-weight: 600;
	line-height: 1.45;
}
.lj-case .lj-editorial-heading--compact { margin-bottom: 1.75rem; }

/* 中扉：ラベル・見出し・短い導入文だけの転換ブロック。
   本文セクションと同じ余白だと、文字数に対して間延びして見えるので詰める。 */
.lj-case.lj-divider { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.lj-case.lj-divider .lj-flow { --lj-flow-gap: clamp(.8rem, 1.8vw, 1.15rem); }
.lj-case.lj-divider .lj-editorial-heading { margin-bottom: 0; }
.lj-case.lj-divider .lj-editorial-heading h2 { margin-top: .1rem; }

/* 共通コンテナの幅をそのまま使う。1024px以上では背景装飾の帯ぶんだけ右に余白を取る（下部の @media）。 */
.lj-case .lj-metric-list { max-width: none; margin: 0; border-bottom: 1px solid var(--lj-line); }
.lj-case .lj-metric { position: relative; padding: clamp(1.1rem, 3vw, 2rem) 0; display: grid; gap: .35rem; }
.lj-case .lj-metric__note { grid-column: 1 / -1; margin: .1rem 0 0; color: var(--lj-ink-soft); font-size: .78rem; line-height: 1.7; }
.lj-case .lj-metric__rule { position: absolute; inset: 0 0 auto; height: 1px; background: var(--lj-line-strong); transform-origin: left center; }
.lj-case .lj-metric:not(:first-child) .lj-metric__rule { background: var(--lj-line); }
.lj-case .lj-metric dt { color: var(--lj-ink-soft); font-size: .8rem; font-weight: 700; letter-spacing: .06em; }
.lj-case .lj-metric dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; color: var(--lj-blue-deep); font-variant-numeric: tabular-nums; }
/* ページ内で唯一の最大強調（design-spec.yml emphasis_hierarchy rank 1） */
.lj-case .lj-metric__value,
.lj-case .lj-metric__before { font-size: clamp(2rem, 6vw, 3.75rem); line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; }
.lj-case .lj-metric__value {
	font-weight: 700;
	/* ごく薄い立体感。ドロップシャドウ・ネオン・グラデーションは使わない（2026-09-10 依頼）。
	   2026-09-14：ぼかし5pxの影が文字の周りのにじみに見えたため、ぼかしを2pxへ弱めた（「見た目が終わってる」との指摘）。 */
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(13, 46, 74, .12);
}
.lj-case .lj-metric__before { color: #657987; font-weight: 450; text-shadow: none; }

/* 文章ベースの成果（数値を持たない指標）。数字と同じ巨大フォントにせず、自然に読める大きさへ落とす。
   2026-09-10：「集客状況」のような定性的な指標が数値と同じ大きさで表示されないようにするための対応。 */
.lj-case .lj-metric--text dd { align-items: flex-start; row-gap: .3rem; }
.lj-case .lj-metric--text .lj-metric__value,
.lj-case .lj-metric--text .lj-metric__before {
	font-size: clamp(1rem, 2.4vw, 1.2rem);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0;
	white-space: normal;
	text-shadow: none;
}
.lj-case .lj-metric--text .lj-metric__value { color: var(--lj-blue-deep); }
.lj-case .lj-metric--text .lj-metric__before { color: #657987; font-weight: 500; }
.lj-case .lj-metric--text .lj-metric__arrow { font-size: 1rem; align-self: center; }
/* 大きな数字は「大きい文字」の基準（3:1）で足りるが、その中の単位は小さいので 4.5:1 が要る。
   単位だけ、意味を持つ小さな文字用の色へ上げる（スマートフォン幅で 4.24 → 5.24）。 */
.lj-case .lj-metric__before .lj-metric__unit { color: var(--lj-ink-muted); }
.lj-case .lj-metric__arrow { color: var(--lj-ink-muted); font-size: 1.35rem; }
.lj-case .lj-metric__unit { margin-left: .12em; font-size: .36em; font-weight: 700; letter-spacing: 0; }
.lj-case .lj-metric__approx { margin-right: .06em; font-size: .46em; font-weight: 700; }
/* 「50〜60件」のような範囲の前置き。接頭辞（約）と違い、数値と同じ大きさで見せる。 */
.lj-case .lj-metric__lead { font-weight: 700; letter-spacing: -.02em; }
.lj-case .lj-count { display: inline-block; }
.lj-case .lj-count__sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lj-case .lj-note { max-width: 44rem; margin: 1.25rem 0 0; color: var(--lj-ink-soft); font-size: .75rem; line-height: 1.7; }

/* ------------------------------------------------------------------
   3. 動画
      3-1 公開準備中の表示（URL未確定のとき）
      3-2 YouTube埋め込み（操作するまで読み込まない ＝ ファサード方式）
------------------------------------------------------------------ */
.lj-video { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4.5vw, 3.5rem); }
/* 既定の行の長さ。広げたいときは「追加のCSSクラス」へ lj-measure-wide を足す（§15）。 */
.lj-case .lj-video__lead { max-width: 34rem; margin: 0 0 1.25rem; color: var(--lj-ink-soft); }

/* --- 3-1 公開準備中 ---
   再生ボタンを置かず、壊れたプレイヤーに見せない。iframeも置かない。 */
.lj-case .lj-video__frame { position: relative; overflow: hidden; border-radius: 2px; }
.lj-case .lj-video__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lj-case .lj-video__frame figcaption {
	position: absolute; left: 0; bottom: 0; margin: 0;
	padding: .4rem .85rem;
	color: var(--lj-paper);
	background: rgba(12, 47, 78, .88);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-align: left;
}

/* --- 3-2 YouTube埋め込み ---
   ページ表示の時点では外部へ1件も通信しない。サムネイルは自社のメディアから出す。
   枠は <a href="https://youtu.be/…">。JSが無効でも、押せばYouTubeで再生できる。
   JSが動く環境では、その場を iframe（youtube-nocookie）へ差し替える。
   高さは aspect-ratio で先に確保するので、差し替えでレイアウトが動かない。 */
.lj-case .lj-videoplayer { margin: 0; }
.lj-case .lj-videoplayer__frame,
.lj-case .lj-videoplayer__stage {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--lj-blue-deep);
}
.lj-case .lj-videoplayer__frame { color: var(--lj-paper); text-decoration: none; }

/* 中はコアの画像ブロック。器いっぱいに敷く。 */
.lj-case .lj-videoplayer__poster,
.lj-case .lj-videoplayer__frame .wp-block-image { margin: 0; height: 100%; }
.lj-case .lj-videoplayer__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* サムネイルの上には再生の丸だけを重ねる。
   配信サービス側のサムネイルには文字（見出し帯・字幕）が入っていることがあり、
   帯や暗幕を重ねるとそれを潰してしまう。出典と尺は画像の外（下）へ置く。 */
.lj-case .lj-videoplayer__play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(3.5rem, 7.5vw, 5rem);
	aspect-ratio: 1;
	display: grid; place-items: center;
	border: 2px solid rgba(255, 255, 255, .92);
	border-radius: 50%;
	background: rgba(12, 47, 78, .78);
	box-shadow: 0 2px 14px rgba(12, 47, 78, .28);
	transition: background-color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22, .61, .36, 1);
}
.lj-case .lj-videoplayer__play svg { width: 32%; height: auto; fill: var(--lj-paper); margin-left: .12em; }

/* 出典と尺。画像の外に置き、記事のラベルと同じ字面にそろえる。 */
.lj-case .lj-videoplayer__meta {
	display: flex; align-items: baseline; gap: .75rem;
	margin-top: .8rem;
	padding-top: .55rem;
	border-top: 1px solid var(--lj-line);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
}
.lj-case .lj-videoplayer__source { color: var(--lj-blue); }
.lj-case .lj-videoplayer__duration { margin-left: auto; color: var(--lj-ink-muted); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

@media (hover: hover) {
	.lj-case .lj-videoplayer__frame:hover img { transform: scale(1.025); }
	.lj-case .lj-videoplayer__frame:hover .lj-videoplayer__play {
		border-color: var(--lj-paper);
		background: var(--lj-blue-deep);
		transform: translate(-50%, -50%) scale(1.06);
	}
}
.lj-case .lj-videoplayer__frame:active .lj-videoplayer__play { transform: translate(-50%, -50%) scale(.98); }

/* iframeへ差し替えた後。 */
.lj-case .lj-videoplayer__stage iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
	display: block;
}

.lj-case .lj-videoplayer__caption { margin: .5rem 0 0; color: var(--lj-ink-soft); font-size: .78rem; line-height: 1.7; }

/* 氏名・社名など、途中で折り返すと読みにくい短い語をくくる。
   日本語は文字の間ならどこでも折り返せるため、氏名が「姓 名」の途中で割れることがある。
   長い語には使わない（狭い画面ではみ出すため）。 */
.lj-case .lj-nobr { white-space: nowrap; }

/* 句読点で区切ったひとまとまり。入りきらないときは、まとまりの境目で折り返る。
   <br> で位置を固定しないので、画面幅が変わっても崩れない
   （../../../共通ルール/20_レスポンシブ・アクセシビリティ.md §10）。
   1つのまとまりが1行に入らないときは、その中でも通常どおり折り返る。 */
.lj-case .lj-lead-part { display: inline-block; }

/* ------------------------------------------------------------------
   4. 目次（コアのリストブロック。1列・折りたたまない）
------------------------------------------------------------------ */
/* 目次は全幅セクションだが、罫線は本文幅に収める（帯にしない）。 */
.lj-toc { padding-block: 0 clamp(2.5rem, 5vw, 4rem); }
.lj-toc .lj-case__reading { padding-block: clamp(1.25rem, 3vw, 2rem); border-block: 1px solid var(--lj-line-strong); }
.lj-toc h2 { margin-bottom: .75rem; font-family: var(--lj-serif); font-size: 1.2rem; }
.lj-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: lj-toc; }
.lj-toc li { counter-increment: lj-toc; }
.lj-toc li + li { border-top: 1px solid var(--lj-line-soft); }
.lj-toc a { min-height: 3.1rem; display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.lj-toc a::before {
	content: counter(lj-toc, decimal-leading-zero);
	width: 2rem; flex: none;
	color: var(--lj-ink-muted); font-size: .72rem;
	font-variant-numeric: tabular-nums; letter-spacing: .08em;
}
.lj-toc a:hover { color: var(--lj-blue); text-decoration: underline; text-underline-offset: .25em; }

/* ------------------------------------------------------------------
   5. セクション見出し（番号は全セクションで同じ縦基準線）
------------------------------------------------------------------ */
.lj-case .lj-sec-head { display: grid; gap: .6rem; }
.lj-case .lj-sec-head__meta { margin: 0; display: flex; align-items: center; gap: .8rem; }
.lj-case .lj-sec-num {
	padding-bottom: .2rem; border-bottom: 1px solid currentColor;
	color: var(--lj-blue); font-size: .78rem; font-weight: 700;
	font-variant-numeric: tabular-nums; letter-spacing: .08em;
}
.lj-case .lj-sec-kicker { color: var(--lj-ink-soft); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.lj-case .lj-sec-head h2 {
	max-width: 24em;
	font-family: var(--lj-serif);
	font-size: clamp(1.45rem, 2.6vw, 2.25rem);
	font-weight: 600;
	line-height: 1.55;
	text-wrap: balance;
}

.lj-case .lj-prose { max-width: var(--lj-measure, 38rem); }
.lj-case .lj-prose p { margin: 0 0 1.3rem; }
.lj-case .lj-prose p:last-child { margin-bottom: 0; }
.lj-case .lj-prose h3 { margin: 0 0 .9rem; font-family: var(--lj-serif); font-size: clamp(1.12rem, 1.8vw, 1.45rem); line-height: 1.6; }
.lj-case .lj-prose--lead p:first-child { font-size: 1.06em; }

/* --- 05 課題：地色なし・細い罫線・図版なし --- */
.lj-challenge { --lj-measure: 36rem; --lj-flow-gap: clamp(1.75rem, 4vw, 2.75rem); padding-block: clamp(4rem, 9vw, 7.5rem); }
.lj-case .lj-issue-list { margin: clamp(.5rem, 2vw, 1.5rem) 0 0; padding: 0; max-width: 44rem; counter-reset: lj-issue; list-style: none; }
.lj-case .lj-issue-list li { position: relative; padding: 1.15rem 0 1.15rem 3.2rem; border-top: 1px solid var(--lj-line-soft); counter-increment: lj-issue; }
.lj-case .lj-issue-list li:last-child { border-bottom: 1px solid var(--lj-line-soft); }
.lj-case .lj-issue-list li::before {
	content: counter(lj-issue, decimal-leading-zero);
	position: absolute; top: 1.5rem; left: 0;
	color: var(--lj-ink-muted); font-size: .72rem; font-variant-numeric: tabular-nums;
}
.lj-case .lj-issue-list strong { display: block; font-weight: 700; }
.lj-case .lj-issue-list em { display: block; margin-top: .3rem; color: var(--lj-ink-soft); font-size: .89rem; font-style: normal; line-height: 1.8; }

/* --- 06 解決策：淡い青地・縦工程線・工程の強弱 --- */
.lj-solution { position: relative; overflow: clip; --lj-measure: 37rem; --lj-flow-gap: clamp(2.25rem, 5vw, 3.75rem); padding-block: clamp(4.5rem, 11vw, 9.5rem); background: var(--lj-blue-pale); }
.lj-solution .lj-case__shell { position: relative; z-index: 1; }

.lj-case .lj-flowsteps { position: relative; max-width: 46rem; padding-left: 3.5rem; }
.lj-case .lj-flowsteps__line { position: absolute; top: 1.4rem; left: 1.22rem; width: 2px; height: calc(100% - 3rem); overflow: visible; }
.lj-case .lj-flowsteps__line path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.lj-case .lj-flowsteps ol { margin: 0; padding: 0; list-style: none; counter-reset: lj-step; }
.lj-case .lj-flowsteps li { position: relative; padding-bottom: 2.25rem; counter-increment: lj-step; }
.lj-case .lj-flowsteps li:last-child { padding-bottom: 0; }
.lj-case .lj-flowsteps li::before {
	content: counter(lj-step);
	position: absolute; z-index: 1; top: 0; left: -3.5rem;
	width: 2.45rem; height: 2.45rem;
	display: grid; place-items: center;
	border-radius: 50%;
	color: var(--lj-paper); background: var(--lj-blue);
	font-size: .78rem; font-weight: 700;
}
.lj-case .lj-flowsteps strong { display: block; margin-bottom: .4rem; font-family: var(--lj-serif); font-size: 1.12rem; font-weight: 600; line-height: 1.6; }
.lj-case .lj-flowsteps em { display: block; max-width: 38rem; color: var(--lj-ink-soft); font-style: normal; }
/* 4工程を均一にせず、起点の1だけ強くする（design-spec: four_measures） */
.lj-case .lj-flowsteps li:first-child { padding-bottom: 2.9rem; }
.lj-case .lj-flowsteps li:first-child strong { font-size: clamp(1.2rem, 1.9vw, 1.45rem); }
.lj-case .lj-flowsteps li:first-child em { color: var(--lj-ink); }
.lj-case .lj-flowsteps li:first-child::before { width: 2.9rem; height: 2.9rem; top: -.2rem; left: -3.72rem; font-size: .88rem; }

/* --- 07 成果：数値と対比が主役 --- */
.lj-results { position: relative; overflow: clip; --lj-measure: 38rem; --lj-flow-gap: clamp(2.5rem, 5.5vw, 4rem); padding-block: clamp(4rem, 10vw, 8.5rem); }
.lj-results .lj-case__shell { position: relative; z-index: 1; }
/* rank 2：結果の意味を説明する補助表現。数値を大きな表示にせず、青の強調も外す。 */
.lj-case .lj-results-statement {
	max-width: 44rem; margin: 0;
	padding-top: clamp(1rem, 2.5vw, 1.5rem);
	border-top: 1px solid var(--lj-line);
	color: var(--lj-ink-soft);
}
.lj-case .lj-results-statement strong {
	display: block; margin-bottom: .5rem;
	color: var(--lj-ink); font-family: var(--lj-serif);
	font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 600; line-height: 1.6;
	font-feature-settings: "palt" 1;
}

/* Before／After（1カラム原則の例外。PCのみ左右） */
.lj-case .lj-comparison { max-width: 52rem; }
.lj-case .lj-comparison__title { margin: 0 0 1.25rem; font-family: var(--lj-serif); font-size: clamp(1.12rem, 1.8vw, 1.45rem); font-weight: 600; }
.lj-case .lj-comparison__head { display: none; }
.lj-case .lj-comparison__rows { margin: 0; padding: 0; list-style: none; }
.lj-case .lj-comparison__row { padding: 1.25rem 0; border-top: 1px solid var(--lj-line); }
.lj-case .lj-comparison__row:last-child { border-bottom: 1px solid var(--lj-line); }
.lj-case .lj-comparison__cell { display: block; }
.lj-case .lj-comparison__tag { display: block; margin-bottom: .2rem; color: var(--lj-ink-muted); font-size: .67rem; font-weight: 700; letter-spacing: .1em; }
.lj-case .lj-comparison__text { display: block; }
.lj-case .lj-comparison__after {
	margin-top: .9rem; padding: .9rem 0 0 .9rem;
	border-top: 1px dashed var(--lj-line);
	border-left: 2px solid var(--lj-blue);
	color: var(--lj-blue-deep); font-weight: 700;
}
.lj-case .lj-wide-photo { margin: 0; }
/* 全幅写真は器の幅いっぱいに表示する。元画像が器より小さいと、右側だけ空いて「写真が途中で止まっている」
   ように見えるため（2026-09-14 オンリーワンマリンで発生）。器以上の大きさの画像では見た目は変わらない。 */
.lj-case .lj-wide-photo img { width: 100%; }
.lj-case .lj-wide-photo figcaption { margin-top: .6rem; color: var(--lj-ink-soft); font-size: .78rem; }

/* --- SNSアカウントの紹介図（横長・小さめ・左端そろえ）---
   スクリーンショットを主役にせず「このアカウントです」と示すだけの図。
   幅は上限だけを決め、それ以下では画面幅に追従する（固定幅・固定高さは使わない）。
   複数のアカウントを並べるときは、親を .lj-accounts にして縦に積む（横並びにしない）。 */
.lj-case .lj-accounts {
	display: grid; gap: clamp(1.1rem, 2.5vw, 1.6rem);
	/* 直前の要素（成果数値の注記など）と詰まらないようにする。
	   .lj-flow の中に置いた場合は、.lj-flow > * の margin リセットが優先される。 */
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.lj-case .lj-account-figure { margin: 0; width: min(100%, 30rem); }
.lj-case .lj-account-figure img {
	width: 100%; height: auto;
	border: 1px solid var(--lj-line-soft);
	border-radius: 2px;
	background: var(--lj-paper);
}
.lj-case .lj-account-figure figcaption {
	margin-top: .55rem;
	color: var(--lj-ink-muted);
	font-size: .92rem; font-weight: 600; line-height: 1.6;
	/* テーマはキャプションを中央寄せにするが、記事は左端の基準線にそろえる
	   （00_記事構成・レイアウト原則.md §6.1）。 */
	text-align: left;
}
.lj-case .lj-account-figure figcaption a {
	color: var(--lj-blue);
	text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px;
}
.lj-case .lj-account-figure figcaption a:hover { text-decoration-thickness: 2px; }
.lj-case .lj-account-figure figcaption a:focus-visible {
	outline: 2px solid var(--lj-focus); outline-offset: 3px; border-radius: 2px;
}

/* --- 08 対談：1本の時系列チャット（PC/SPとも1列） --- */
.lj-dialogue { --lj-flow-gap: clamp(1.5rem, 3.5vw, 2.5rem); padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--lj-blue-wash); }
.lj-dialogue .lj-case__shell { max-width: min(46rem, calc(100% - (var(--lj-gutter) * 2))); margin-inline: max(var(--lj-gutter), calc((100% - var(--lj-shell)) / 2)) auto; }

.lj-case .lj-talk { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
/* 幅は内容量で決まる（fit-content）。最大幅に達したら中で折り返す。固定幅・固定高さは使わない。 */
.lj-case .lj-talk__turn { width: fit-content; max-width: var(--lj-bubble-max, 90%); display: grid; gap: .2rem; }
.lj-case .lj-talk__turn--lacks { justify-self: start; }
.lj-case .lj-talk__turn--client,
.lj-case .lj-talk__turn--client-b { justify-self: end; }
.lj-case .lj-talk__turn--client + .lj-talk__turn--lacks,
.lj-case .lj-talk__turn--client-b + .lj-talk__turn--lacks { margin-top: .35rem; }

.lj-case .lj-talk__who { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; color: var(--lj-ink-soft); font-size: .7rem; line-height: 1.5; }
.lj-case .lj-talk__turn--client .lj-talk__who,
.lj-case .lj-talk__turn--client-b .lj-talk__who { justify-content: flex-end; }
.lj-case .lj-talk__name { color: var(--lj-ink); font-size: .84rem; font-weight: 700; }
.lj-case .lj-talk__org:not(:empty)::after { content: "／"; margin-left: .15em; color: var(--lj-ink-muted); }

.lj-case .lj-talk__stack { display: grid; gap: .3rem; justify-items: start; }
.lj-case .lj-talk__turn--client .lj-talk__stack,
.lj-case .lj-talk__turn--client-b .lj-talk__stack { justify-items: end; }
/* 吹き出し＝スタック内の段落。コアの段落ブロックがそのまま吹き出しになる。 */
.lj-case .lj-talk__stack > p {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: .6rem .95rem;
	border: 1px solid var(--lj-talk-edge, #6991ab);
	border-radius: .55rem;
	background: var(--lj-paper);
	font-size: .95rem;
	line-height: 1.8;
}
.lj-case .lj-talk__stack > p:first-child::before {
	content: "";
	position: absolute;
	top: .85rem;
	width: .62rem; height: .62rem;
	background: inherit;
	border: 0 solid var(--lj-talk-edge, #6991ab);
}
.lj-case .lj-talk__turn--lacks .lj-talk__stack > p:first-child::before {
	left: -.36rem;
	border-left-width: 1px; border-bottom-width: 1px;
	clip-path: polygon(0 0, 0 100%, 100% 100%);
	transform: rotate(45deg);
}
.lj-case .lj-talk__turn--client .lj-talk__stack > p { --lj-talk-edge: #528bb2; border-color: #528bb2; background: #e3eff8; }
.lj-case .lj-talk__turn--client .lj-talk__stack > p:first-child::before {
	right: -.36rem;
	border-color: #528bb2;
	border-right-width: 1px; border-bottom-width: 1px;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	transform: rotate(-45deg);
}
/* クライアント側の発言者が2名いる対談（2026-09-10 追加）。話者ごとに色を分けるための2人目用の配色。
   派手なピンクにせず、既存の水色トーンと同じ彩度・明るさに寄せた薄いくすみピンク。 */
.lj-case .lj-talk__turn--client-b .lj-talk__stack > p { --lj-talk-edge: #b98098; border-color: #b98098; background: #f7e9ee; }
.lj-case .lj-talk__turn--client-b .lj-talk__stack > p:first-child::before {
	right: -.36rem;
	border-color: #b98098;
	border-right-width: 1px; border-bottom-width: 1px;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	transform: rotate(-45deg);
}

/* --- 09 社長の一言：地色を反転させ、記事の転換点にする --- */
.lj-client-voice { --lj-flow-gap: clamp(2rem, 5vw, 3.5rem); padding-block: clamp(4rem, 9vw, 8rem); background: var(--lj-blue-deep); color: var(--lj-paper); }
.lj-client-voice .lj-sec-num { color: #b7d2df; }
.lj-client-voice .lj-sec-kicker { color: #9fbccb; }
.lj-case .lj-client-voice blockquote,
.lj-client-voice blockquote { margin: 0; max-width: 40rem; padding: 0 0 0 clamp(1rem, 4vw, 2rem); border: 0; border-left: 2px solid #a9c9d8; background: none; }
.lj-client-voice blockquote::before,
.lj-client-voice blockquote::after { content: none; }
.lj-client-voice blockquote p {
	font-family: var(--lj-serif);
	font-size: clamp(1.35rem, 2.8vw, 2.35rem);
	line-height: 1.65;
	/* balance は行の長さをそろえようとするため、日本語では「面／接」のように
	   熟語の途中で割れることがある（2026-09-08 実測）。長い引用では使わない。
	   割らせたくない語は、編集画面のツールバー「途中で折り返さない」で指定する。 */
	text-wrap: pretty;
	font-feature-settings: "palt" 1;
}
.lj-client-voice blockquote cite {
	display: block; margin-top: 1.25rem;
	color: #c3d5df; font-size: .8rem; font-style: normal; text-align: left;
}

/* --- 10 クライアント概要：コアのテーブルブロック --- */
.lj-profile { --lj-flow-gap: clamp(1.5rem, 3.5vw, 2.5rem); padding-block: clamp(3rem, 7vw, 5.5rem); }
.lj-case .lj-profile-list table { width: 100%; max-width: 46rem; border-collapse: collapse; border-top: 1px solid var(--lj-line-strong); }
.lj-case .lj-profile-list td { padding: .85rem 0; border-bottom: 1px solid var(--lj-line-soft); border-left: 0; border-right: 0; vertical-align: top; }
.lj-case .lj-profile-list td:first-child { width: 9rem; color: var(--lj-ink-soft); font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
.lj-case .lj-profile-list figcaption { display: none; }

/* --- 11 担当者から ---
   既定は「写真 → 氏名・役職 → 本文」の縦積み。
   768px以上では、写真を左・担当者情報と本文を右に置く2カラムへ切り替える（共通バリエーション）。
   縦積みのまま使いたい記事は、セクションのグループへ lj-staff-comment--stack を追加する。 */
.lj-staff-comment { --lj-measure: 37rem; --lj-flow-gap: clamp(1rem, 2.5vw, 1.5rem); padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--lj-warm); }
.lj-staff-comment .lj-sec-head { margin-bottom: clamp(.75rem, 2vw, 1.25rem); }

@media (min-width: 768px) {
	.lj-staff-comment:not(.lj-staff-comment--stack) .lj-flow {
		grid-template-columns: clamp(15rem, 26%, 17.5rem) minmax(0, 1fr);  /* 写真は240〜280px */
		column-gap: clamp(3rem, 4.5vw, 4rem);
		row-gap: clamp(.5rem, 1.5vw, 1rem);
		align-items: start;
	}
	/* 見出しはコンテナの左端いっぱいに置く（2カラムの外） */
	.lj-staff-comment:not(.lj-staff-comment--stack) .lj-sec-head { grid-column: 1 / -1; }
	/* 写真は左。氏名と本文の2行ぶんにまたがり、文章と上端をそろえる */
	.lj-staff-comment:not(.lj-staff-comment--stack) .lj-staff-photo {
		grid-column: 1;
		grid-row: 2 / span 2;
		width: 100%;
		margin-top: .2rem;
	}
	.lj-staff-comment:not(.lj-staff-comment--stack) .lj-staff-name { grid-column: 2; grid-row: 2; }
	.lj-staff-comment:not(.lj-staff-comment--stack) .lj-prose {
		grid-column: 2;
		grid-row: 3;
		max-width: 42rem;   /* 本文が広がりすぎないようにする */
		margin-top: .35rem;
	}
}
/* 担当者写真：円形にしない。4:5の縦位置で上半身を見せ、元のグレー背景をそのまま使う。 */
.lj-case .lj-staff-photo { width: min(100%, 15rem); }
.lj-case .lj-staff-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 16%; border-radius: 2px; }
.lj-case .lj-staff-photo figcaption { display: none; }
.lj-case .lj-staff-name strong,
.lj-case .lj-staff-name em { display: block; font-style: normal; }
.lj-case .lj-staff-name strong { font-size: 1.05rem; }
.lj-case .lj-staff-name em { margin-top: .15rem; color: var(--lj-ink-soft); font-size: .78rem; }

/* ------------------------------------------------------------------
   12. CTA（縦順：成果要約帯 → 見出し → 説明 → ボタン → 補足）
------------------------------------------------------------------ */
.lj-cta { padding-block: clamp(3.5rem, 8vw, 7rem); }
.lj-case .lj-cta__summary {
	margin: 0;
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--lj-blue);
	color: var(--lj-blue-deep);
	background: var(--lj-blue-pale);
	font-family: var(--lj-serif);
	font-size: clamp(1rem, 2.4vw, 1.3rem);
	line-height: 1.7;
}
.lj-case .lj-cta__body { padding-top: clamp(1.75rem, 4.5vw, 3rem); }
.lj-case .lj-cta__body h2 { max-width: 20em; font-family: var(--lj-serif); font-size: clamp(1.45rem, 2.6vw, 2.25rem); font-weight: 600; line-height: 1.5; }
.lj-case .lj-cta__lead { max-width: 35rem; margin: 1.25rem 0 0; color: var(--lj-ink-soft); }
.lj-case .lj-cta__note { margin: .75rem 0 0; color: var(--lj-ink-soft); font-size: .75rem; }

/* CTAボタン。コアのボタンブロックへ当てる。hover に依存せず、タッチでも成立する。 */
.lj-case .lj-cta__button { margin-top: 2rem; }
.lj-case .lj-cta__button .wp-block-button__link {
	min-width: min(100%, 18rem);
	min-height: 3.5rem;
	padding: .75rem 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lj-blue-deep);
	border-radius: 2px;
	color: var(--lj-paper);
	background: var(--lj-blue-deep);
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
	transition: color .16s ease, background-color .16s ease, transform .12s ease;
}
.lj-case .lj-cta__button .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-left: .75rem;
	transition: transform .16s ease;
}
.lj-case .lj-cta__button .wp-block-button__link:hover { color: var(--lj-blue-deep); background: var(--lj-paper); }
.lj-case .lj-cta__button .wp-block-button__link:hover::after { transform: translateX(.2rem); }
.lj-case .lj-cta__button .wp-block-button__link:focus-visible { outline: 3px solid var(--lj-focus); outline-offset: 4px; }
.lj-case .lj-cta__button .wp-block-button__link:active { transform: translateY(1px); }

/* ------------------------------------------------------------------
   13. 背景の弱い動き（成果サマリー・解決策・成果の3か所だけ）
       読字領域の外にだけ置く。1024px未満は非表示。
------------------------------------------------------------------ */
/* 背景装飾は疑似要素で描く。投稿本文へ装飾用のHTMLを置かないため。 */
.lj-metrics::after,
.lj-solution::after,
.lj-results::after { content: none; }

/* ------------------------------------------------------------------
   14. モーションの初期状態
       JSが動き lj-motion-ready が付いたときだけ初期状態を適用する。
       JS無効時・IntersectionObserver非対応時は最終状態のまま表示される。
------------------------------------------------------------------ */
.lj-motion-ready .lj-case [data-lj-metrics] .lj-metric:not([data-lj-motion="off"]) .lj-metric__rule { transform: scaleX(0); }
.lj-motion-ready .lj-case [data-lj-metrics] .lj-metric:not([data-lj-motion="off"]) dt { opacity: 0; }
.lj-motion-ready .lj-case [data-lj-metrics] .lj-metric:not([data-lj-motion="off"]) dd { opacity: 0; transform: translateY(12px); }

.lj-motion-ready .lj-case [data-lj-metrics] .lj-metric:not([data-lj-motion="off"]).lj-is-on .lj-metric__rule {
	transform: scaleX(1);
	transition: transform 420ms cubic-bezier(.32, .72, .32, 1) var(--lj-delay, 0ms);
}
.lj-motion-ready .lj-case [data-lj-metrics] .lj-metric:not([data-lj-motion="off"]).lj-is-on dt {
	opacity: 1;
	transition: opacity 260ms ease calc(var(--lj-delay, 0ms) + 160ms);
}
.lj-motion-ready .lj-case [data-lj-metrics] .lj-metric:not([data-lj-motion="off"]).lj-is-on dd {
	opacity: 1;
	transform: none;
	transition: opacity 340ms ease calc(var(--lj-delay, 0ms) + 260ms),
	            transform 340ms cubic-bezier(.16, 1, .3, 1) calc(var(--lj-delay, 0ms) + 260ms);
}

.lj-motion-ready .lj-case .lj-flowsteps .lj-flowsteps__line path { stroke-dashoffset: 1; }
.lj-motion-ready .lj-case .lj-flowsteps.lj-is-on .lj-flowsteps__line path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1000ms cubic-bezier(.4, .1, .3, 1);
}

/* ------------------------------------------------------------------
   15. ブレークポイント（テーマに合わせて 600px / 960px を基本にする）
------------------------------------------------------------------ */
@media (min-width: 600px) {
	/* 指標名の列が広がりすぎないように上限を付ける。項目数が変わっても崩れない。 */
	.lj-case .lj-metric { grid-template-columns: minmax(9rem, 16rem) minmax(0, 1fr); align-items: baseline; gap: 2rem; }
}

@media (min-width: 960px) {
	.lj-hero .lj-hero__inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); align-items: center; }
	.lj-hero .lj-hero__copy { grid-column: 1; grid-row: 1; }
	.lj-hero .lj-hero__figure { grid-column: 2; grid-row: 1; }
	/* ヒーロー写真の左端に白いモヤを重ねて、文章と写真を自然につなぐ（人物は隠さない）。 */
	.lj-hero .lj-hero__figure::before {
		content: "";
		position: absolute; z-index: 1; inset: 0 auto 0 0;
		width: 13%;
		background: linear-gradient(90deg, var(--lj-paper), rgba(255, 255, 255, 0));
		pointer-events: none;
	}
	.lj-hero .lj-facts { grid-column: 1 / -1; }
	.lj-hero .lj-facts table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
	.lj-hero .lj-facts tbody { display: contents; }
	/* 罫線は td ではなく tr（グリッドの子）に付ける。
	   td に付けると、内容が2行になったセルだけ線が下がって段違いになる。
	   tr は同じ行の中でいちばん高いものに引き伸ばされるため、線の位置がそろう。 */
	.lj-hero .lj-facts tr {
		display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
		align-items: baseline; gap: .75rem;
		padding: .75rem 1.5rem .85rem 0;
		border-top: 1px solid var(--lj-line-soft);
	}
	.lj-hero .lj-facts tr:nth-child(n+4) { border-bottom: 1px solid var(--lj-line-soft); }
	.lj-hero .lj-facts td { padding: 0; border: 0; }

	/* 対談：PCでも2カラムにしない。吹き出しの最大幅は本文領域の72%。 */
	.lj-case .lj-talk { --lj-bubble-max: 72%; }

	/* Before／After：PCだけ左右に置く（1カラム原則の例外） */
	.lj-case .lj-comparison__head {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-bottom: .75rem;
		color: var(--lj-line-strong); font-size: .7rem; font-weight: 700; letter-spacing: .08em;
	}
	.lj-case .lj-comparison__head span:last-child { padding-left: 2rem; color: var(--lj-blue); }
	.lj-case .lj-comparison__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
	.lj-case .lj-comparison__cell { padding: 1.4rem 2rem 1.4rem 0; }
	.lj-case .lj-comparison__tag { display: none; }
	.lj-case .lj-comparison__after { margin-top: 0; padding: 1.4rem 0 1.4rem 2rem; border-top: 0; border-left: 1px solid var(--lj-line); }
}

@media (min-width: 1024px) {
	/* 背景装飾は右端の帯に置く。成果サマリーは中身が帯へ入り込まないよう右余白を確保する。 */
	.lj-metrics .lj-case__shell { padding-right: clamp(6rem, 11vw, 15rem); }

	.lj-metrics::after,
	.lj-solution::after,
	.lj-results::after {
		content: "";
		position: absolute;
		top: -2rem; bottom: -2rem; right: 0; left: auto;
		width: clamp(6rem, 11vw, 15rem);
		background: url("organic-drift.svg") center / 100% 100% no-repeat;
		opacity: .34;
		pointer-events: none;
	}
	.lj-metrics::after { animation: lj-drift-a 16s ease-in-out infinite; }
	.lj-solution::after { animation: lj-drift-b 13s ease-in-out infinite; }
	.lj-results::after { animation: lj-drift-a 11s ease-in-out infinite reverse; }
}

@keyframes lj-drift-a {
	0%, 100% { transform: translate3d(0, 0, 0); opacity: .30; }
	50%      { transform: translate3d(-1.6%, 1.9%, 0); opacity: .44; }
}
@keyframes lj-drift-b {
	0%, 100% { transform: scaleX(-1) translate3d(0, 0, 0); opacity: .28; }
	50%      { transform: scaleX(-1) translate3d(-1.3%, -1.7%, 0); opacity: .42; }
}

@media (max-width: 599px) {
	.lj-case { font-size: .95rem; line-height: 1.85; }
	.lj-hero .lj-hero__copy h1 { font-size: clamp(1.5rem, 7.2vw, 1.95rem); letter-spacing: 0; }
	.lj-case .lj-metric__value,
	.lj-case .lj-metric__before { font-size: clamp(1.85rem, 12.5vw, 3.2rem); }
	.lj-case .lj-metric dd { gap: .25rem .4rem; }
	.lj-case .lj-talk { --lj-bubble-max: 92%; }
	.lj-case .lj-talk__stack > p { padding: .8rem .95rem; }
	.lj-case .lj-flowsteps { padding-left: 3.1rem; }
	.lj-case .lj-flowsteps li::before { left: -3.1rem; width: 2.2rem; height: 2.2rem; }
	.lj-case .lj-flowsteps li:first-child::before { width: 2.55rem; height: 2.55rem; left: -3.28rem; }
	.lj-case .lj-flowsteps__line { left: 1.1rem; }
	.lj-case .lj-issue-list li { padding-left: 2.6rem; }
	.lj-case .lj-facts td:first-child { width: 5.5rem; }
	.lj-case .lj-profile-list td:first-child { width: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.lj-case *,
	.lj-case *::before,
	.lj-case *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.lj-motion-ready .lj-case [data-lj-metrics] .lj-metric .lj-metric__rule { transform: scaleX(1); }
	.lj-motion-ready .lj-case [data-lj-metrics] .lj-metric dt { opacity: 1; }
	.lj-motion-ready .lj-case [data-lj-metrics] .lj-metric dd { opacity: 1; transform: none; }
	.lj-motion-ready .lj-case .lj-flowsteps .lj-flowsteps__line path { stroke-dashoffset: 0; }
	.lj-metrics::after, .lj-solution::after, .lj-results::after { animation: none !important; opacity: .3; }
	/* 動画の枠：拡大をやめる。押せることは丸の色の変化だけで伝える。 */
	.lj-case .lj-videoplayer__frame:hover img { transform: none; }
	.lj-case .lj-videoplayer__frame:hover .lj-videoplayer__play,
	.lj-case .lj-videoplayer__frame:active .lj-videoplayer__play { transform: translate(-50%, -50%); }
}

/* ------------------------------------------------------------------
   15. 管理画面から使えるクラス
       ブロックを選択 → 右サイドバー → 高度な設定 →「追加のCSSクラス」
       もとから入っているクラスは消さずに、空白で区切って足す。
       いずれも「どこで折り返るか」だけを変える。文字サイズ・色・余白は変えない。
------------------------------------------------------------------ */

/* 行の長さ（段落の最大幅）。日本語の読みやすい行長はおよそ全角20〜45文字
   （../../../共通ルール/20_レスポンシブ・アクセシビリティ.md §10）。
   lj-measure-full は表や図の説明など、長い行が許される場合だけに使う。 */
.lj-case .lj-measure-narrow { max-width: 26rem; }
.lj-case .lj-measure        { max-width: 34rem; }
.lj-case .lj-measure-wide   { max-width: 48rem; }
.lj-case .lj-measure-full   { max-width: none; }