…）を
に置き換えるだけで、
下の :not(:has(img)) が false になり自動的に元の画像ありレイアウトへ戻る。
このCSSブロック・各レイアウトの1カラム化ルールは編集不要。 ----- */
.img-space:not(:has(img)) { display: none; }
/* ----- SERVICE 01（主役・左画像+右文字組）----- */
.svc-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.svc-hero-body { display: flex; flex-direction: column; }
.svc-hero-eyebrow { font-family: var(--font-en); font-weight: 700; font-size: .9375rem; letter-spacing: .1em; color: var(--ink-60); }
.svc-hero-title { font-weight: 900; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.3; margin: 8px 0 4px; letter-spacing: -.02em; font-feature-settings: "palt" 1; }
.svc-hero-en { font-family: var(--font-en); font-style: italic; font-weight: 700; font-size: .8125rem; letter-spacing: .18em; color: var(--brand); }
.svc-hero-msg { font-weight: 700; font-size: 1.0625rem; line-height: 1.9; margin-top: 22px; max-width: 480px; }
.svc-hero-desc { font-size: .875rem; color: var(--ink-60); line-height: 1.9; margin-top: 12px; max-width: 480px; }
.svc-hero .svc-link { margin-top: 26px; align-self: flex-start; }
/* ----- SERVICE 02-04（番号+小さめ画像+文字組）----- */
.svc-row-body { display: grid; grid-template-columns: 132px 1fr; gap: 24px; align-items: start; }
/* ----- 対応業種グリッド（Works由来の6業種・.shop-chipと同素材で単独セクション用）----- */
.industry-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.industry-grid .shop-chip { font-size: .875rem; padding: 10px 22px; }
@media (max-width: 900px) {
.svc-hero { grid-template-columns: 1fr; gap: 26px; }
.img-space--hero { aspect-ratio: 16 / 10; }
.svc-hero-title { font-size: 1.6rem; }
.svc-row-body { grid-template-columns: 1fr; gap: 14px; }
.svc-row-body .img-space--sm { aspect-ratio: 16 / 9; max-width: 260px; }
}
/* ============================================================
/process ページ（DMJ /model/ 型リビルド・2026-07-14新設）
既存ルールは変更せず、ここに追記のみ。
============================================================ */
/* ----- フェーズ間・ステップ間の余白は通常より大きく取る（DMJの空気）----- */
.phase-head { margin-bottom: clamp(44px, 6vw, 76px); }
.step-list { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 100px); }
/* ----- 各ステップ: 左=番号+見出し+説明／右=画像スペース -----
grid-template-areas で「head/desc」を左列、「img」を右列に2行分スパンさせる。
モバイルは head → img → desc の縦積みに並び替え。 */
.step {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
grid-template-rows: max-content 1fr;
grid-template-areas: "head img" "desc img";
column-gap: clamp(32px, 5vw, 64px);
row-gap: 22px;
align-items: start;
}
.step-head { grid-area: head; }
.step-img { grid-area: img; align-self: stretch; }
/* 2026-07-17赤ペンFB24 #4: STEP説明が細すぎるとの指摘 */
.step-desc { grid-area: desc; font-size: .875rem; color: var(--ink); font-weight: 500; line-height: 1.9; max-width: 480px; }
/* 2026-07-17 CVR改善#2: 図版(.step-img)が空の間は.img-spaceごと非表示になるため、
右列を畳んでhead/descを縦積み1カラムにする。画像を入れれば自動的に元の
head/desc + img の2カラムレイアウトへ戻る。 */
.step:not(:has(.step-img img)) {
grid-template-columns: 1fr;
grid-template-areas: "head" "desc";
}
.step-num { display: block; font-family: var(--font-en); font-weight: 900; font-size: clamp(3.4rem, 6.2vw, 5.6rem); line-height: 1; letter-spacing: -.04em; color: var(--brand); }
.step-heading { font-weight: 900; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.4; margin-top: 14px; letter-spacing: -.01em; font-feature-settings: "palt" 1; }
/* ----- 定額への導線1行 ----- */
.phase-outro-sec { text-align: center; }
/* 2026-07-17赤ペンFB24 #4: 本文が細すぎるとの指摘 */
.phase-outro { font-size: .9375rem; color: var(--ink); font-weight: 500; }
.phase-outro .svc-link { margin-left: 12px; }
@media (max-width: 900px) {
.step-list { gap: 48px; }
.step { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "head" "img" "desc"; row-gap: 20px; }
.step-num { font-size: 3rem; }
.step-heading { font-size: 1.3rem; }
.step-desc { max-width: none; }
}
/* ============================================================
/strength ページ（DMJ /service/ 型「3つの武器」セクション忠実再現・2026-07-16赤ペンFB21新設）
左＝position:stickyの縦書き大見出し／右＝PHASE 01-06のブロック列＋サイクル帯、
別セクションで「3つの武器」（巨大数字＋図版スペース）。既存ルールは変更せず追記のみ。
============================================================ */
/* ----- 縦書き（tategaki）共通: 親はrow-reverseの横flex（DOM順=読み順で先頭が右）、
子だけwriting-mode:vertical-rlにする方式（親自体を縦書きにしない）。 ----- */
/* 2026-07-17 FB28: DMJの縦書き大見出し(参考スクショ)を再現。
1文字ずつのボックスは不要——CSSの縦書き(writing-mode)+極太+
字間を升目ギリギリまで詰める+列間も詰める、の組み合わせで組める。 */
.gp-vert, .gpw-vert {
display: flex; flex-direction: row-reverse; align-items: flex-start;
gap: clamp(4px, .7vw, 10px);
}
.gp-vert p, .gpw-vert p {
writing-mode: vertical-rl; text-orientation: mixed; margin: 0;
font-weight: 900; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.08;
letter-spacing: .01em; color: var(--ink); font-feature-settings: "palt" 1;
}
.gpw-accent { color: var(--brand); }
/* 縦書き中の数字: 縦中横(text-combine-upright)+位置補正のハックは
ブラウザの描画癖でどうしてもセンターが揺れるため、2026-07-17に廃止。
数字は全角(３など)で書く——全角数字は漢字と同じ正方形の升目で
デザインされているため縦書きで原理的にズレない(FB27根本修正)。 */
/* 「成果改善の流れ」左見出し: 条件節(3つの武器が連動するから)は控えめ、
結論(成果が動き続ける)はより大きく・太く・行間を詰めて強調する（2026-07-17赤ペンFB23）。
2026-07-17赤ペンFB26: 「成果を生む、3つの武器」見出し（.gpw-vert、太字900/clamp(1.5rem,2.3vw,2.125rem)基準）
と、この結論行のウェイト・サイズ感を統一。従来はここだけ最大2.875remまで拡大されていたため縮小。 */
/* 条件節は黒のまま一段細く・小さく(参考スクショの階層)。結論列は上の基準サイズ。 */
.gp-vert .gp-vert-sub { font-weight: 800; font-size: clamp(1.125rem, 1.8vw, 1.625rem); line-height: 1.5; letter-spacing: .08em; color: var(--ink); }
.gp-vert .gp-vert-main { line-height: 1.08; }
/* ----- PHASE列セクション（左sticky＋右ブロック列）
2026-07-17赤ペンFB25: 左カラムの余白が広すぎるとの指摘で、確保する幅を大幅に縮小
（24%→11%程度）。空いた分は右の図解・本文エリアに還元し、「3つの武器」(.gpw-grid)と
左端の位置・比率を完全に揃える。 ----- */
.gp-grid, .gpw-grid { display: grid; grid-template-columns: minmax(72px, 11%) 1fr; gap: clamp(20px, 2.6vw, 40px); align-items: start; }
.gp-left, .gpw-left { position: sticky; top: clamp(96px, 26vh, 260px); padding-bottom: 40px; }
.gp-right { min-width: 0; }
/* 2026-07-17赤ペンFB23: 囲みを上下ボーダー(共有線)からL字枠(左+上のみ)に変更。
隣接ブロックとの間隔はborder-bottomの代わりにmargin-topで確保する。
2026-07-17赤ペンFB25: 枠線の色はオレンジ→黒(ink)に変更（線のデザイン自体は維持、
ブランドオレンジは「点」だけに絞る全体方針に合わせる）。 */
.gp-phase {
border-left: 2px solid var(--ink); border-top: 2px solid var(--ink);
padding: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 36px) clamp(22px, 3vw, 34px);
margin-top: clamp(22px, 2.8vw, 34px);
}
.gp-phase:first-of-type { margin-top: 0; }
.gp-phase-label { font-family: var(--font-en); font-weight: 700; font-size: .75rem; letter-spacing: .12em; color: var(--ink-40); text-transform: uppercase; }
.gp-phase-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(10px, 1.6vw, 20px); margin-top: 10px; }
.gp-phase-head { font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -.02em; color: var(--ink); font-feature-settings: "palt" 1; }
.gp-phase-msg { font-size: .9375rem; color: var(--ink); font-weight: 500; line-height: 1.8; }
.gp-phase-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.gp-tag { display: inline-block; border: 1px solid var(--line); background: #fff; padding: 9px 16px; font-size: .8125rem; font-weight: 700; color: var(--ink); }
/* PHASE 06: オレンジ強調枠（DMJのハイライトブロックに相当。全周囲みのため他とは別扱い） */
.gp-phase.gp-phase--hi {
border: 2px solid var(--brand); border-radius: 2px;
padding: clamp(26px, 3.2vw, 40px) clamp(22px, 3vw, 34px);
}
.gp-phase--hi .gp-phase-label, .gp-phase--hi .gp-phase-head { color: var(--brand); }
.gp-phase--hi .gp-tag { border-color: rgba(234, 64, 3, .35); color: var(--brand); }
/* ----- サイクル帯（オレンジ→グレー×3→オレンジ太字の結論） ----- */
.gp-cycle { display: flex; align-items: stretch; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 16px); margin-top: clamp(40px, 5vw, 64px); }
.gp-cycle-item {
flex: 1 1 160px; background: #fff; border: 1px solid var(--line); border-radius: 2px;
padding: clamp(16px, 2vw, 22px) clamp(14px, 2vw, 20px);
font-weight: 800; font-size: .9375rem; line-height: 1.5; text-align: center;
display: flex; align-items: center; justify-content: center;
}
.gp-cycle-item--main { flex: 1 1 200px; background: var(--brand); color: #fff; }
.gp-cycle-item--result { flex: 1 1 260px; background: transparent; color: var(--brand); font-weight: 900; }
.gp-cycle-arrow { flex: 0 0 auto; display: flex; align-items: center; font-family: var(--font-en); font-size: 1.25rem; color: var(--ink-40); }
/* ----- 「3つの武器」セクション（左sticky＋右に巨大数字+図版スペース+文字組）
grid-template-columns / gap / position は上の .gp-grid, .gpw-grid 側に統合済み
（成果改善の流れと左端・比率を揃えるため）。ここは .gpw-right 以下の固有スタイルのみ。 ----- */
.gpw-right { min-width: 0; display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.gpw-item { display: grid; grid-template-columns: minmax(0, 52%) 1fr; gap: clamp(28px, 3.6vw, 52px); align-items: stretch; }
.gpw-img { width: 100%; height: 100%; }
.gpw-body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; }
/* 2026-07-17 CVR改善#2: 図版(.gpw-img)が空の間は.img-spaceごと非表示になるため、
図版列を畳んでテキスト列を全幅に広げる。画像を入れれば自動的に
「左52%画像＋右テキスト」の2カラムへ戻る。 */
.gpw-item:not(:has(.gpw-img img)) { grid-template-columns: 1fr; }
.gpw-item:not(:has(.gpw-img img)) .gpw-body { height: auto; }
/* 2026-07-17赤ペンFB23: 数字を通常の文字組から「背景に大きく敷く」演出に変更→
2026-07-17赤ペンFB24 #7: グラデ文字が安っぽいとの指摘でベタ塗り#ea4003に変更→
2026-07-17赤ペンFB26: 「右上の薄い透かし巨大数字」自体が安っぽいとの指摘で全面再設計。
eyebrowの左に置く小さな構造要素（Geistイタリック900・オレンジ・中サイズ）にし、
行の下に細線を敷いてDMJの武器セクション風の整った番号にする。 */
.gpw-eyebrow-row {
display: flex; align-items: baseline; gap: 12px;
padding-bottom: clamp(12px, 1.4vw, 16px);
margin-bottom: clamp(14px, 1.8vw, 20px);
border-bottom: 1px solid var(--line);
}
.gpw-num {
font-family: var(--font-en); font-style: italic; font-weight: 900;
font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1; letter-spacing: -.02em;
color: var(--brand);
}
.gpw-text { margin-top: auto; position: relative; z-index: 1; }
.gpw-eyebrow { display: block; font-weight: 800; font-size: 1rem; letter-spacing: .06em; color: var(--brand); }
.gpw-head { font-weight: 900; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.4; margin-top: 12px; letter-spacing: -.01em; font-feature-settings: "palt" 1; }
.gpw-desc { font-size: .9375rem; color: var(--ink); font-weight: 500; line-height: 1.9; margin-top: 14px; max-width: 480px; }
@media (max-width: 900px) {
.gp-grid, .gpw-grid { grid-template-columns: 1fr; gap: 30px; }
.gp-left, .gpw-left { position: static; top: auto; padding-bottom: 0; }
/* モバイル: 縦書き見出しを横書きへ切替（読みやすさ優先・DMJのスマホ挙動に倣う） */
.gp-vert, .gpw-vert { flex-direction: row; flex-wrap: wrap; font-size: 1.25rem; }
.gp-vert p, .gpw-vert p { writing-mode: horizontal-tb; text-orientation: initial; }
.gp-vert .gp-vert-sub, .gp-vert .gp-vert-main { line-height: 1.6; }
.gpw-item { grid-template-columns: 1fr; }
.gpw-body { height: auto; }
.gp-cycle { flex-direction: column; }
.gp-cycle-arrow { transform: rotate(90deg); justify-content: center; }
}
/* ============================================================
/strength ページ v2（DMJ /model/ クローン・2026-07-16赤ペンFB22で全面作り直し）
旧/strength用の .gp- 系 / .gpw- 系は /service へ移設して残置（変更なし）。
ここでは新規プレフィックス mdl- 系のみを追加する。既存ルールは変更しない。
※CSSコメント内に「アスタリスク+スラッシュ」の並びを書くとコメントが
そこで閉じて直後のルールが丸ごと無効化される（今回 .mdl-phase の
オレンジ背景が消えた原因）。ワイルドカード表記は「.gp- 系」等で書くこと。
============================================================ */
/* ----- PHASE セクション（2026-07-17赤ペンFB26: 背景の濃淡差を廃止し単色ベタ塗りに統一。
.wrapで囲まず自体を全幅にする。方眼線・グレインは維持。 ----- */
.mdl-phase {
position: relative; overflow: hidden;
background: #1a1a19;
}
.mdl-phase::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image:
repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 32px),
repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 32px);
}
.mdl-phase::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image: var(--grain); opacity: .09; mix-blend-mode: overlay;
}
/* 2026-07-17赤ペンFB26: 「PHASE番号を右上寄せ」(FB25)から「左固定sticky」へ差し戻し。
DMJ /model/ 参考同様、左＝PHASE番号(sticky)／右＝白パネルの2カラム構成にする。
ヘッダー(fixed, 高さ約80px)の下にスティッキー時の余白を足してtopを設定。
2026-07-17赤ペンFB27-1: 「横幅がギリギリすぎる」ため min(97%)→min(92%) に縮小し、
PHASE番号+白パネルのセット全体が中央寄りに見えるよう左右の余白を確保。 */
.mdl-phase-in {
position: relative; z-index: 2;
width: min(92%, 1600px); margin: 0 auto;
padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px);
display: grid; grid-template-columns: clamp(90px, 11vw, 160px) 1fr;
gap: clamp(20px, 3vw, 40px);
align-items: start;
}
/* 2026-07-17赤ペンFB27-4: PHASE間の矢印表現（下記.mdl-phase-arrow）を置く分の
余白を広めに確保する修飾クラス。次のPHASEがある01〜03のみHTML側で付与。 */
.mdl-phase-in--arrow { padding-bottom: clamp(60px, 7.5vw, 92px); }
.mdl-phase-num {
position: sticky; top: calc(80px + clamp(20px, 3vw, 40px));
color: #fff; font-family: var(--font-en); font-weight: 800;
font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em;
text-align: left; margin: 0;
}
.mdl-phase-panel { background: #fff; display: grid; grid-template-columns: clamp(90px, 11vw, 160px) 1fr; }
.mdl-phase-vert {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: clamp(10px, 1.4vw, 16px);
padding: clamp(28px, 4vw, 48px) clamp(10px, 1.4vw, 18px);
border-right: 1px solid var(--line);
}
.mdl-vert-head {
writing-mode: vertical-rl; text-orientation: mixed; margin: 0; font-feature-settings: "palt" 1;
color: var(--brand); font-weight: 900; font-size: clamp(2.2rem, 4.4vw, 4.25rem); letter-spacing: .04em; line-height: 1;
}
/* 2026-07-17赤ペンFB25: DMJ参考同様、縦書きタイトル直下にオレンジの小さいサブテキストを配置
（従来は justify-content:space-between でパネル下端に離れて表示されていた）。
2026-07-17赤ペンFB27-5: 「横書き小文字」から、参考画像(DMJ /model/)準拠の
「縦書きのまま大見出しの下に続く・同系色・中サイズ」の形に変更。
大見出しとの階層差はサイズ＋字間で付け、見出しより少し左寄りに置く。 */
.mdl-vert-sub {
writing-mode: vertical-rl; text-orientation: mixed; margin: 0;
color: var(--brand); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.375rem); letter-spacing: .1em;
line-height: 1.5; text-align: center;
transform: translateX(-8%);
}
.mdl-steps { display: flex; flex-direction: column; }
/* 2026-07-17赤ペンFB27-3: 縦に間延びして見えるため縦方向の余白を圧縮
（padding上下・text内gapを詰め、図版アスペクト比も少し横長に）。 */
.mdl-step {
display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
gap: clamp(24px, 3.4vw, 48px);
padding: clamp(20px, 2.6vw, 32px) clamp(24px, 3.4vw, 44px);
border-bottom: 1px solid var(--line);
}
.mdl-steps .mdl-step:last-child { border-bottom: none; }
.mdl-step-text { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: 16px; }
.mdl-step-chip {
display: inline-block; background: var(--brand); color: #fff;
font-weight: 800; font-size: .8125rem; letter-spacing: .06em; padding: 7px 18px;
}
.mdl-step-head {
font-weight: 900; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.4;
margin-top: 14px; letter-spacing: -.01em; font-feature-settings: "palt" 1; color: var(--ink);
}
/* 2026-07-17赤ペンFB27-2: サブテキストをもう少し大きく（.875rem→1rem、太さ700は維持）。 */
.mdl-step-desc {
font-size: 1rem; color: var(--ink); font-weight: 700; line-height: 1.9;
max-width: 26em; text-align: right; align-self: flex-end;
}
.mdl-step-img { width: 100%; aspect-ratio: 16 / 11; align-self: start; }
/* 2026-07-17 CVR改善#2: 図版(.mdl-step-img)が空(![]()
未挿入)の間は.img-spaceごと
非表示になるため、1カラム化してテキストに全幅を渡す。右寄せだった説明文も
左寄せに戻し、不自然な右余白を防ぐ。画像を入れれば自動的に2カラムに復帰する。 */
.mdl-step:not(:has(.mdl-step-img img)) { grid-template-columns: 1fr; }
.mdl-step:not(:has(.mdl-step-img img)) .mdl-step-desc { text-align: left; align-self: flex-start; max-width: none; }
/* 図版が消えてSTEPS側(.mdl-steps)が縦書き見出し(.mdl-phase-vert)より短くなると、
.mdl-phase-panelがgrid既定のstretchで高さを揃えるため下部に不自然な余白が残る。
図版無し状態のみSTEPS側を縦中央寄せにして、見出しと視覚的な重心を合わせる。
（:has()は:has()同士を入れ子にできない仕様のため、.mdl-steps単位で
「中にimgが1枚も無い」を直接判定する形にしている） */
.mdl-steps:not(:has(img)) { justify-content: center; }
/* 2026-07-17赤ペンFB25: PHASE間の「つなぎ帯」(.mdl-transition系、独立したセクション)は
HTMLから撤去し、暗い格子背景をPHASE同士で途切れず連続させる方針に変更したため削除。
2026-07-17赤ペンFB27-4: ただし境目が分かりにくいとのFBを受け、帯は作らず、
格子背景を連続させたまま境目に小さな矢印（縦点線＋シェブロン）だけを重ねる。
HTML側で次のPHASEがある01〜03の.mdl-phase-in末尾にのみ .mdl-phase-arrow を追加。 */
.mdl-phase-arrow {
position: absolute; left: 50%; bottom: clamp(14px, 2vw, 24px);
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
z-index: 3; pointer-events: none;
}
.mdl-phase-arrow-dots {
width: 1px; height: clamp(20px, 3vw, 30px);
background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 4px, transparent 4px 9px);
}
.mdl-phase-arrow-ic { width: 20px; height: 12px; color: var(--brand); opacity: .92; }
@media (max-width: 900px) {
.mdl-phase-in { grid-template-columns: 1fr; gap: 16px; }
.mdl-phase-in--arrow { padding-bottom: clamp(52px, 12vw, 68px); }
.mdl-phase-num { position: static; font-size: 1.8rem; text-align: left; }
.mdl-phase-panel { grid-template-columns: 1fr; }
.mdl-phase-vert { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; border-right: none; border-bottom: 1px solid var(--line); padding: 20px 18px; gap: 8px 20px; }
.mdl-vert-head { writing-mode: horizontal-tb; text-orientation: initial; letter-spacing: .04em; font-size: 1.5rem; }
.mdl-vert-sub { writing-mode: horizontal-tb; text-orientation: initial; text-align: left; transform: none; }
.mdl-step { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; }
.mdl-step-desc { text-align: left; align-self: flex-start; }
.mdl-phase-arrow { bottom: clamp(10px, 3vw, 18px); }
}
/* ----- 暗いグレイニーバナー（既存.cta-bandと同じstone-texture+grain資産を流用した専用コンポーネント） ----- */
.mdl-dark {
background-image:
linear-gradient(165deg, rgba(8,8,9,.7), rgba(20,21,23,.55) 45%, rgba(6,6,7,.76)),
url("../assets/stone-texture.webp");
background-size: cover; background-position: center; background-repeat: no-repeat;
color: #fff; border-radius: 24px; margin-top: var(--gap);
padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 64px);
position: relative; overflow: hidden;
}
.mdl-dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; }
.mdl-dark > * { position: relative; z-index: 2; }
.mdl-dark-head {
font-weight: 900; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.5;
letter-spacing: -.02em; font-feature-settings: "palt" 1; text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.mdl-dark-rule { border: none; border-top: 1px solid rgba(255,255,255,.35); margin: clamp(28px, 4vw, 44px) 0; }
.mdl-dark-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.mdl-dark-desc { font-size: .875rem; color: rgba(255,255,255,.8); line-height: 2; max-width: 30em; }
.mdl-dark-contact {
font-family: var(--font-en); font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.8rem);
color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 14px;
letter-spacing: -.02em; white-space: nowrap; transition: opacity .3s;
}
.mdl-dark-contact::after { content: "→"; transition: transform .3s var(--ease); }
.mdl-dark-contact:hover::after { transform: translateX(6px); }
@media (max-width: 640px) {
.mdl-dark-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}
/* ----- /serviceへの誘導CTA（2026-07-17赤ペンFB23で.mdl-darkから差し替え。
最下部の共通CTA帯(.cta-band、暗い石肌)とは明確に違う見せ方にするため、
白地+極太黒枠のブルータリズム調カード全体を1本のリンクにする。 ----- */
.mdl-promo {
display: block; position: relative; text-decoration: none; color: var(--ink);
background: #fff; border: 3px solid var(--ink); border-radius: 4px;
padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 56px);
margin-top: var(--gap);
transition: background .3s var(--ease), color .3s var(--ease);
}
.mdl-promo-head {
font-weight: 900; font-size: clamp(1.5rem, 3.6vw, 2.75rem); line-height: 1.5;
letter-spacing: -.02em; font-feature-settings: "palt" 1; max-width: 20em;
}
.mdl-promo-link {
display: inline-flex; align-items: center; gap: 12px;
margin-top: clamp(28px, 4vw, 44px);
font-family: var(--font-en); font-weight: 800; font-size: 1rem; letter-spacing: .04em;
color: var(--ink); transition: color .3s var(--ease);
}
.mdl-promo-arrow {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff;
transition: transform .3s var(--ease), background .3s var(--ease);
}
.mdl-promo:hover { background: var(--ink); color: #fff; }
.mdl-promo:hover .mdl-promo-link { color: #fff; }
.mdl-promo:hover .mdl-promo-arrow { background: var(--brand); transform: translate(4px, -4px); }
/* ----- GROWTH RESULTS風セクション（既存.gpw-numと同じオレンジグラデ文字クリップを流用） ----- */
.mdl-growth-head { line-height: .92; }
/* 2026-07-17赤ペンFB24 #7: グラデ文字が安っぽいとの指摘でベタ塗り#ea4003に変更 */
.mdl-growth-word {
display: block; font-family: var(--font-en); font-weight: 900;
font-size: clamp(2.8rem, 9.5vw, 7.5rem); letter-spacing: -.03em;
color: var(--brand);
}
.mdl-growth-word--2 { margin-top: clamp(-16px, -2vw, -6px); text-align: right; }
.mdl-growth-sub { display: flex; align-items: baseline; gap: 14px; margin-top: clamp(20px, 3vw, 32px); flex-wrap: wrap; }
.mdl-growth-sub .ja { font-weight: 800; font-size: 1.125rem; }
.mdl-growth-sub .note { font-size: .8125rem; color: var(--ink-60); }
.mdl-story-list { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); margin-top: clamp(32px, 4vw, 48px); }
.mdl-story-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 21 / 8; }
.mdl-story-card .img-space { position: absolute; inset: 0; border-radius: 0; border: none; }
.mdl-story-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.5)); }
.mdl-story-top { position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 20px 24px; }
.mdl-story-num { font-family: var(--font-en); font-weight: 900; font-size: 1.05rem; color: #fff; letter-spacing: .04em; }
.mdl-story-client { font-size: .8125rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.mdl-story-stat { position: absolute; right: 24px; bottom: 20px; z-index: 2; color: #fff; font-weight: 800; font-size: .8125rem; text-align: right; line-height: 1.6; opacity: .92; }
@media (max-width: 640px) {
.mdl-story-card { aspect-ratio: 4 / 3; }
.mdl-story-top { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; }
.mdl-story-stat { right: 18px; bottom: 16px; }
}
/* ============================================================
/shooting 「撮影のモデルケース」セクション新設（2026-07-20）
既存の.problem-card/.img-space/.num-cardのトンマナを踏襲し、
このセクション専用の mc- 接頭辞クラスで完結させる。
============================================================ */
.mc-block { margin-top: clamp(40px, 5vw, 60px); }
.mc-block:first-child { margin-top: 0; }
.mc-block-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(20px, 2.6vw, 28px); }
.mc-num { font-family: var(--font-en); font-weight: 900; font-size: 1.4rem; color: var(--brand); letter-spacing: -.03em; flex: none; }
.mc-block-head h3 { font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
/* ----- 01: 具体例カード（撮影シーン→できる動画） ----- */
.mc-example-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mc-example-card { display: flex; flex-direction: column; gap: 14px; }
.mc-example-card .mc-photo { aspect-ratio: 4 / 3; }
/* 2026-07-17のCVR改善（.img-space:not(:has(img)) 全体非表示ルール）は「未完成に見える
グレー枠は離脱要因」という判断だったが、本セクションは要望により差し替え前の枠を
あえて見せる仕様。mc-photoにはその自動非表示を打ち消し、常時表示にする。 */
.mc-photo.img-space:not(:has(img)) { display: flex !important; }
.mc-example-body { background: var(--gray); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mc-example-from { font-size: .8125rem; color: var(--ink-60); font-weight: 500; line-height: 1.6; }
.mc-example-arrow { color: var(--brand); font-weight: 900; font-size: .9375rem; line-height: 1; }
.mc-example-to { font-size: .9375rem; font-weight: 700; color: var(--ink); line-height: 1.6; }
/* ----- 02: 撮影時間の目安（数値は青木さん実数字が未確定のため全て仮） ----- */
.mc-volume { display: flex; align-items: center; gap: 12px; background: var(--gray); border-radius: 14px; padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 30px); }
.mc-volume-card { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mc-volume-big { font-family: var(--font-en); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink); letter-spacing: -.02em; }
.mc-volume-big small { font-family: var(--font-ja); font-weight: 700; font-size: .5em; margin-left: 2px; color: var(--ink-60); }
.mc-volume-label { font-size: .75rem; color: var(--ink-60); font-weight: 500; }
.mc-volume-arrow { color: var(--ink-40); font-weight: 900; font-size: 1.1rem; flex: none; }
.mc-volume-note { font-size: .75rem; color: var(--ink-60); line-height: 1.9; margin-top: 12px; }
/* ----- 03: 撮影頻度の目安（「3ヶ月に1回」は青木さん発言・仮ではなく本文扱い） ----- */
.mc-cycle { background: var(--gray); border-radius: 14px; padding: clamp(26px, 3.4vw, 36px) clamp(22px, 3vw, 32px); }
.mc-cycle-big { font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.375rem); color: var(--ink); line-height: 1.7; }
.mc-cycle-desc { font-size: .8125rem; color: var(--ink-60); line-height: 1.9; margin-top: 10px; max-width: 640px; }
@media (max-width: 900px) {
.mc-example-grid { grid-template-columns: 1fr; }
.mc-volume { flex-direction: column; gap: 20px; }
.mc-volume-arrow { transform: rotate(90deg); }
}