@charset "utf-8";
/* =============================================================================
   JEMS 廃棄物マネジメント TOP（/hub/env-mgt/）デザイン
   -----------------------------------------------------------------------------
   前提 : 以下の順で読み込む。
            1. ../../assets/jems-design.css  共通デザインシステム（トークン）
            2. ../assets/design.css          /hub/ デザインの共通シェル
                                             （ヘッダー・フッター・.cvbtn・.ph）
            3. assets/env-mgt.css            本ファイル。本ページ固有
          クラス名は wm- 接頭辞で名前空間を分け、design.css の
          /hub/ 固有クラス（.fv / .cases / .jcta2 等）と衝突させない。
   テーマ : data-theme="waste"。色は --fg-waste-* を参照し、16進を直書きしない。
            2026-09-06のテーマ入替で --fg-waste-* の実体は Circular Mint 系になった。
   ========================================================================== */

/* =============================================================================
   1. ページトークン
   -----------------------------------------------------------------------------
   本ページ固有の値だけをここで定義する。
   他ページでも使うことが決まった時点で jems-design.css へ移す。
   ========================================================================== */
:root {
  /* 2026-09-06：テーマカラー入替。廃棄物マネジメントは Picton Blue → Circular Mint。
     --wm-key / --wm-key-deep / --wm-line は共通トークン参照なので式は据え置き（値が入れ替わる） */
  --wm-pale:#ebfbf4;                    /* ブランドガイド Pale Mint（旧 Pale Blue #f2f8fd） */
  --wm-key:var(--fg-waste-400);         /* #46d1a5  キーカラー（2026-09-13の再調整で #3DEBB8 から） */
  /* 淡色地に載る文字用（企業名ピル・カルーセル矢印）。800＝白地 6.10:1 */
  --wm-key-deep:var(--fg-waste-800);    /* #176f55  文字用 */
  --wm-line:var(--fg-waste-200);        /* #96f6d2  枠線・区切り（ランプ再調整で100→200へ付け替え） */
  /* S10 資源循環への送客ブロックだけは資源循環側の色を使う。入替でブルーになる */
  --wm-bridge-line:var(--fg-circ-200);  /* #b8e2ff  旧 --wm-circ-200（Circular Mint 200） */
  /* SUPPORT AREA の面。カンプ 549:2 の実測値で、11段ランプ外の中間色。
     地の帯（明→暗）とパネルで濃度差をつけるために個別に持つ */
  --wm-sa-grad-from:#259e7a;            /* 帯グラデーションの上端 */
  /* 2026-09-13（FB20）：白文字が 2.76:1 で AA（本文4.5／大文字3.0）に届いていなかった。
     グリーンの面は維持したいので、白文字で 4.5:1 を満たせる最も明るい段（700／4.62:1）へ落とす。
     元の #0ab17f は 500〜600 相当の明るさで、白文字では基準に届かない */
  --wm-sa-panel:var(--fg-waste-700);    /* パネル・選択タブの面 */
  --wm-cta-grad-to:#0cc990;             /* CTA帯グラデーションの下端（カンプ 549:786 実測） */
  --wm-sec-gap:88px;                    /* セクション間隔（PC） */
}

/* =============================================================================
   2. セクションの枠組み
   ========================================================================== */
.wm-sec { padding-block:calc(var(--wm-sec-gap) / 2); }
.wm-sec--tint { background:var(--wm-pale); }
/* FV直下のセクション。淡色は実績カードの中央から始まっているので、通常の余白でよい */

/* 見出しは共通コンポーネント .sec-head（英字ラベル＋H2＋リード）を使う。
   H2のサイズ指定も design.css の clamp(30px,3.1vw,44px) をそのまま受ける。
   英字ラベルの色だけ共通CSSが JEMS グリーン固定なので、本ページのテーマ色へ差し替える */
/* 白・淡色地に載る12pxの英字ラベル。ミント400では 1.4:1 なので700にする（4.2:1） */
.sec-head__en { color:var(--fg-waste-700); }

/* 見出しの下マージンは共通CSSの 24px。セクション内の間は個別に足す */

/* 右カラムの面 */
.wm-panel { padding:var(--sp-5) var(--sp-6); background:var(--surface); border-radius:var(--fg-radius-card); }
.wm-panel--outline { background:var(--wm-pale); border:1px solid var(--wm-line); }
.wm-sec--tint .wm-panel--outline { background:var(--surface); }

.wm-note { margin-top:var(--sp-4); font-size:11px; line-height:1.6; color:var(--ink-muted); text-align:right; }

/* =============================================================================
   3. S1 ファーストビュー ＋ 実績カード（Figma node 369:37）
   -----------------------------------------------------------------------------
   コンテンツ幅・H1・ボタンの寸法は事業部TOP（/design/）のFVに揃える。
   2026-09-14：MVが背景なし（透過）になったため、Figmaの配置どおりに組み直した：
     ・左＝コピー／右＝ビジュアル の2カラム（絶対配置ではなくグリッド）
     ・実績カードはコピーの下（左列）。右から降りてくるビジュアルの下端と横並びになる
     ・絵は切らない。トリミングもマスクもせず、原寸比のまま置く
   ========================================================================== */
:root {
  /* 2026-09-14：支給MVが fv-visual-3.webp（背景透過）になった。
     地の色を持たないので、これまでの「窓を切ってマスクでぼかす」構成は不要。
     差し替えのたびに透過余白の量が変わるので、アルファの外接矩形を測ってから
     -pad-r を更新すること。
     2026-09-15：同名で再支給され 1692×930 → 1692×1079 に。左右の透過余白は変わらず
     （左4.1% 右1.1%）なので -pad-r は据え置き。上の余白が 1.5% → 11.8%、下が 4.5% → 3.9%
     （現行データの実測：左4.1% 右1.1% 上11.8% 下3.9%）。
     ・-w   画像ファイルの表示幅。1920で1152px。
            左端が x≒685 まで来て、左下の建物が実績カード（右端 x≒808）の裏へ
            少し回り込む。ボタンの右端（x≒692）は塞がない位置で止めてある。
            上限1200pxは 2000px超の画面で伸び続けないためのストッパー
     ・-h   原寸比 1079/1692 = .6377。トリミングしないので比率そのまま
     ・-pad-r 画像の右側にある透過余白（アルファ実測で 1.1%）。
            右へ出す量にこれを足して、絵の右端をコンテナの外枠に合わせる
            （足さないと透過余白のぶん、絵が内側に寄って見える） */
  --wm-fv-mv-w:min(60vw, 1200px);
  --wm-fv-mv-h:calc(var(--wm-fv-mv-w) * .6377);
  --wm-fv-mv-pad-r:.011;
  /* コピー列の幅。Figmaの 748px をそのまま使う */
  --wm-fv-copy-w:748px;
  /* コピー下端から実績カードまでの間隔（Figma実測 73px） */
  --wm-fv-metrics-gap:72px;
}
.wm-fv {
  position:relative;
  /* 通常はビジュアルがFVの中に収まる。極端に狭い／広い画面でのはみ出し止めとして残す */
  overflow:hidden;
  /* 地色＋ぼかしグラデーション2つ。参考：https://brand.studysapuri.jp/about/ のFV直下ブロック
     （対角に大きなにじみを置く構成）。参考サイトは右上・左下だが、ここは左上・右下に反転。
     色は廃棄物マネジメントのテーマ色に置き換え、参考サイトより薄く敷いている。
     2026-09-06：テーマ入替でミント化し、ランプ再調整で300を #63E7BB へ。
       300 rgba(99,231,187)=#63E7BB ／ 400 rgba(70,209,165)=#46D1A5（変更なし）
       #ebfff8（最淡の地）はカンプでも据え置き */
  background:
    radial-gradient(46% 76% at 0% 6%,    rgba(99,231,187,.34) 0%, rgba(99,231,187,0) 72%),
    radial-gradient(30% 70% at 102% 100%, rgba(70,209,165,.20) 0%, rgba(70,209,165,0) 72%),
    linear-gradient(180deg, #ebfff8 0%, var(--surface) 100%);
}
/* 2026-09-14：Figma（369:37）の配置をグリッドで組む。絶対配置は使わない。
     1列目＝コピー（748px）／2列目＝ビジュアル
     1行目＝コピー　　　　　／2行目＝実績カード（ビジュアルは2行にまたがる）
   行をまたがせているのは、Figmaでビジュアルの下端が実績カードの高さまで降りてくるため。
   コピーとカードの間隔は行間（--wm-fv-metrics-gap）が持つので、
   ビジュアルの高さが変わっても間隔は崩れない。 */
.wm-fv__inner {
  position:relative; padding-block:64px 72px;
  display:grid;
  grid-template-columns:minmax(0,var(--wm-fv-copy-w)) minmax(0,1fr);
  column-gap:var(--sp-6); row-gap:var(--wm-fv-metrics-gap);
  align-items:center;
}
/* 本文はビジュアルの前面に置く */
.wm-fv__body { position:relative; z-index:1; grid-column:1; grid-row:1; }
/* 事業部TOPのFV（.fv__copy）と同じ指定 */
.wm-fv__copy { font-size:clamp(34px,5.1vw,72px); font-weight:700; line-height:1.22; letter-spacing:.005em; }
.wm-fv__lead { margin-top:var(--sp-5); font-size:15px; line-height:1.9; color:var(--ink-body); }

/* ボタンはフッター・CTAと同じ .cvbtn。寸法だけ事業部TOPのFVボタン（260×60・16px）に合わせる。
   色は data-theme が持つ変数と同じ値を渡す
   （.cvbtn 単体は --cta-fill / --cta-line / --cta-ink を親から受け取る作りのため） */
.wm-fv__actions {
  margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-3);
  /* カンプ 549:2：白地に載るFVだけ濃い段を使う（CTA帯・フッターは400/500のまま） */
  --cta-fill:var(--fg-waste-600); --cta-line:var(--fg-waste-200); --cta-ink:var(--fg-waste-700);
}
/* .cvbtn は flex:1 1 0 で伸びる作りなので、FVでは幅を固定する */
.wm-fv__actions .cvbtn { flex:0 0 260px; min-height:60px; padding-inline:12px 12px; }
.wm-fv__actions .cvbtn__txt { font-size:16px; }

/* ビジュアルは右カラム。列幅より広いので、左へはみ出させたまま右端を揃える。
   絵の右端は .jw の padding 端（＝コンテナの外枠）に合わせる。Figmaの実測でも
   画像の右端はコンテナ枠とほぼ同じ位置に来る（1920で画面右から73px）。
   z-index:-1 にすると .wm-fv の背景グラデーションの裏に回って見えなくなるため、
   ビジュアルは 0、本文を 1、実績カードを 2 に置いて前後関係を作る */
.wm-fv__visual {
  position:relative; z-index:0;
  grid-column:2; grid-row:1 / 3; justify-self:end; align-self:center;
  width:var(--wm-fv-mv-w); max-width:none;
  /* 16px引いているのは安全代。1760px以下では .jw の外枠＝画面端なので、
     引かないと絵が画面端にぴたりと付く */
  margin-right:calc(
    (var(--page-padding) - 16px) * -1 - var(--wm-fv-mv-w) * var(--wm-fv-mv-pad-r)
  );
  pointer-events:none;
}
/* 背景が透過なのでトリミング不要。原寸比のまま等倍で置く */
.wm-fv__visual img { display:block; width:100%; height:auto; }

/* --- 実績カード ---
   2026-09-07：FVの下端をまたぐ構成をやめ、FV内（ビジュアルの下）に置いた。
   境界をまたがなくなったので、下半分を淡色で塗る .wm-metrics-holder は廃止。
   左端はコンテンツ左端に揃える。z-index はビジュアル（0）より上に置く */
/* 2026-09-14：FVグリッドの2行目・1列目。コピーと同じ左端に揃い、
   右から降りてくるビジュアルの下端と横並びになる（Figmaと同じ関係） */
.wm-metrics-band {
  position:relative; z-index:2;
  grid-column:1; grid-row:2; align-self:start;
}
/* CL修正22：中身ぴったりだとFVに対して小さいので、
   FVのコンテンツ幅（.jw--fv）の60%まで広げる。
   2026-09-14：ビジュアルが右から降りてくるようになったので、
   コピー列と同じ 748px を上限にして重なりを避ける（Figmaのカード幅も約600px） */
.wm-metrics {
  position:relative; z-index:1;
  /* min-width:fit-content で中身より狭くならないようにする。
     1024〜1200px帯では60%が中身より狭く、数値の単位が折り返していた */
  display:inline-block; width:min(60%, var(--wm-fv-copy-w)); min-width:-webkit-fit-content; min-width:fit-content;
  padding:var(--sp-5) 40px;
  /* 地はカンプ実測 #EEFCF6。影は300（#63E7BB）に合わせる */
  background:rgba(238,252,246,.7);
  border:1px solid var(--fg-waste-200); border-radius:var(--fg-radius-card);
  box-shadow:24px 24px 45px rgba(99,231,187,.3);
}
/* 広げたぶん3項目を両端に配り、右側が空かないようにする */
.wm-metrics__list { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.wm-metric { display:flex; flex-direction:column; gap:2px; }
/* Figmaの区切り線は白16%（濃紺版からの持ち越しで淡色面では見えない）。
   ［要確認］ここではテーマの200段（入替後は Circular Mint 200）に置き換えている */
.wm-metric + .wm-metric { padding-left:17px; border-left:1px solid var(--fg-waste-200); }
/* CL修正22：カード全体をもう一段目立たせる。ラベル・単位は1段大きく、
   ウェイトも 400→500 に上げる（読み込み済みのNoto Sans JPは400/500/700） */
.wm-metric__lbl { font-size:13px; font-weight:500; line-height:1.4; color:var(--ink); }
.wm-metric__row { display:flex; align-items:baseline; gap:2px; }
.wm-metric__unit { font-size:14px; font-weight:500; line-height:1.4; color:var(--ink); }
/* 30pxの数値。淡色地でミント500は 1.8:1 なので700にする（4.2:1／大文字は3:1で可） */
/* 数値は30→34px。ウェイトは700が読み込み済みの上限のため据え置き */
.wm-metric__num { font-family:var(--font-num); font-size:34px; font-weight:700; line-height:1.1; color:var(--fg-waste-700); }
.wm-metrics__asof { margin-top:var(--sp-2); font-size:11px; line-height:1.5; color:var(--ink-muted); }

/* =============================================================================
   4-a. 吹き出しカード（01 いまの運用で十分か）
   -----------------------------------------------------------------------------
   参考：https://1planet.co.jp/sevice/consulting「よくあるご相談」
     淡色地の上に白いカードを並べ、カード下に丸2つのしっぽを付ける。
     大きい丸はカード下辺に食い込ませ、カードと地続きに見せる（同じ白面）。
     しっぽの寸法は参考サイトの 68×36 アセットの座標に合わせている。
   ========================================================================== */
.wm-issues { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; align-items:start; }
.wm-issue { display:flex; flex-direction:column; align-items:center; }
.wm-issue__card {
  position:relative; z-index:1; width:100%;
  display:flex; flex-direction:column; align-items:center;
  padding:32px 12px; background:var(--surface); border-radius:16px;
}
.wm-issue__t { margin-bottom:20px; font-size:16px; font-weight:700; line-height:1.7; text-align:center; color:var(--ink); }
/* イラストは透過画像（WebP／PNG）。地は敷かず、そのまま置く。
   2026-09-07：差し替えで 01〜04 が 1218x1292（縦長）、05 だけ 1254x1254（正方形）になり、
   高さが10pxずれてカード下端としっぽが揃わなくなった。枠に多数派の比率を持たせ、
   contain で中に収める（05は上下に5pxずつ余白が入るだけで、絵は変形しない） */
.wm-issue__ill { display:block; width:100%; max-width:170px; aspect-ratio:1218 / 1292; }
.wm-issue__ill img { display:block; width:100%; height:100%; object-fit:contain; }
.wm-issue__tail { position:relative; width:68px; height:36px; }
.wm-issue__tail::before,
.wm-issue__tail::after { content:""; position:absolute; border-radius:50%; background:var(--surface); }
.wm-issue__tail::before { left:16px; top:-20px; width:36px; height:36px; }
.wm-issue__tail::after  { left:8px;  top:24px;  width:12px; height:12px; }

/* =============================================================================
   4-b. 提供価値カード（02 法令遵守を、仕組みで守る。／Figma node 369:277）
   -----------------------------------------------------------------------------
   淡色面のカード4枚。イラスト144px＋見出しを上下中央に置く。
   2026-09-06：FB20により余白を詰めた。左右パディングを32→24px、イラストを120→144px、
   見出しを16→18px（design.css の .sec-title と同値）。行間はカード見出しの1.6に揃える。
   支給イラストは正方形の中に約1割の透過余白を持つため、144px指定で実寸は約120px。
   ========================================================================== */
/* 見出しの下マージン24px＋16pxでFigmaの40pxにする */
.wm-values { display:flex; gap:var(--sp-4); align-items:stretch; margin-top:var(--sp-4); }
.wm-value {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:225px; padding:var(--sp-4) var(--sp-5);
  background:var(--wm-pale); border:1px solid var(--wm-line); border-radius:var(--fg-radius-card);
}
.wm-value__ill { display:block; width:144px; }
.wm-value__ill img { display:block; width:100%; height:auto; }
.wm-value__t { font-size:18px; font-weight:700; line-height:1.6; text-align:center; color:var(--ink); }

/* =============================================================================
   5. ステップ（03 適正な廃棄物管理とは）
   -----------------------------------------------------------------------------
   参考：https://1planet.co.jp/sevice/consulting「開発フロー」
     番号（大・淡色）／和文＋英文ラベル／説明文 の3カラムを縦に積む。
     ステップの間は細い罫で区切り、罫の上・番号カラムの位置に送りのシェブロンを置く。
   ========================================================================== */
/* 見出しの右にビジュアルを置く。寸法・揃え方は事業部TOPのBACKGROUND（.axes-head）と同じ */
.wm-approach-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-6); }
.wm-approach-head .sec-head { max-width:none; margin-bottom:0; }
.wm-approach-head__visual { flex:none; width:448px; }
.wm-approach-head__visual picture { display:block; }
.wm-approach-head__visual img { display:block; width:100%; height:auto; }
/* 見出しブロックとステップの間 */
.wm-approach-head + .wm-flow { margin-top:var(--sp-5); }

/* 参考：https://go-gx.com/service/「導入の流れ」のイラスト無し版。
   グラデーションの番号丸＋点線のコネクタ＋右に見出しと説明文。
   点線は 2px幅・2pxダッシュ／4pxアキ（6pxピッチ）で、参考サイトの作り方と同じ。 */
/* 01〜05と動画をひとまとまりの白い面に入れる（淡色地のセクションから浮かせる）。
   2026-09-13：FB42で面の中に動画が入ったため、面の指定は .wm-steps から .wm-flow へ移した */
.wm-flow {
  padding:32px; background:var(--surface); border-radius:var(--fg-radius-card);
}
.wm-steps { display:flex; flex-direction:column; gap:var(--sp-6); }
.wm-step { position:relative; display:flex; align-items:flex-start; gap:64px; }
.wm-step__no {
  position:relative; z-index:1; flex:none;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  /* カンプ 549:2 はグラデーションではなく基準色500のベタ塗り */
  background:var(--fg-waste-500);
  font-family:var(--font-num); font-size:15px; font-weight:700; line-height:1; color:var(--fg-canvas);
}
/* 丸の中心（左から20px）に、次のステップまで点線を垂らす */
.wm-step:not(:last-child)::before {
  content:""; position:absolute; left:19px; top:46px; bottom:calc(var(--sp-6) * -1); width:2px;
  background-image:linear-gradient(var(--fg-waste-300) 2px, transparent 2px);
  background-size:2px 6px; background-repeat:repeat-y;
}
.wm-step__body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.wm-step__t { font-size:22px; font-weight:700; line-height:1.5; color:var(--ink); }
.wm-step__d { font-size:15px; line-height:1.9; color:var(--ink-body); }

/* =============================================================================
   6. 導入企業ロゴ（04）
   ========================================================================== */
/* 面（淡色パネル）は敷かない。地色の上にロゴだけを置く */
/* -----------------------------------------------------------------------------
   業種別3ブロック（2026-09-06／FB23）
   ---------------------------------------------------------------------------
   ロゴは業種別に分ける前と同じ高さ64pxで置く（2026-09-06のCL指示：小さくしない）。
   この寸法だと1社あたり最大201px（ENEOS）必要で、1行に5社ほどしか入らないため、
   ブロックを横並びにはせず、3ブロックとも幅いっぱいで縦に積む。
   セルはロゴの実寸で、列間40pxの左揃え。等間隔に引き伸ばすと社数の少ないブロックが
   間延びするので、行の右側は余らせたままにしている。
     製造業7社 ＝ ロゴ実寸計941px ＋ 列間40px×6 ＝ 1181px（.jw の1200px以内に1行で収まる）
   掲載順の優劣が出ないよう、行内の順序は素材の形状で並べ替えず指定順のままとする。
   ---------------------------------------------------------------------------- */
.wm-logoblock { padding-top:var(--sp-2); }
.wm-logogroups { display:flex; flex-direction:column; gap:var(--sp-6); }
/* 小見出しはフッターの .fgroup__head と同じ流儀（アクセントバー＋太字）。
   2026-09-06：一覧の見出しとして弱かったため13→15pxへ。バーも14→16pxで追随 */
.wm-logogroup__head {
  display:flex; align-items:center; gap:var(--sp-2);
  padding-bottom:var(--sp-3); margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--wm-line);
  font-size:15px; font-weight:700; line-height:1.5; color:var(--ink);
}
.wm-logogroup__bar { flex:none; width:3px; height:16px; border-radius:2px; background:var(--wm-key); }

.wm-logos { display:flex; flex-wrap:wrap; gap:var(--sp-5) 40px; align-items:center; }
/* セルはロゴの実寸。幅を揃えると横長ロゴが縮むため、幅の指定は持たせない */
.wm-logos__cell { flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-height:72px; }
.wm-logos__cell img { display:block; width:auto; max-width:100%; height:64px; object-fit:contain; }
/* 既存ロゴ一覧に無い企業。掲載可否が未確認であることを画面上でも分かるようにする */
.wm-logos__ph { width:160px; min-height:72px; font-size:12px; }

/* =============================================================================
   7. 3つのソリューション（05）
   ========================================================================== */


/* =============================================================================
   8. 2つの支援領域（Figma 正本：PC 403:77 / 410:2、SP 411:2）
   -----------------------------------------------------------------------------
   1セクション内でタブ切り替え。共通部（見出し・接続帯・共通ソリューション）は
   タブパネルの外に置き、切り替え対象にしない。
   色はすべて既存トークン（--fg-waste-*）を参照する。
   ========================================================================== */
.sa {
  padding-block:64px;
  /* カンプ 549:2 の実測：2停止（#259E7A → #33B890）。角度はFigmaのまま。
     ［要確認］白の見出しが乗る。2026-09-13のランプ再調整で上端 2.3:1→3.36:1（大文字AA可）、
     下端 1.8:1→2.50:1。下端はまだ届かないので、白見出しの位置か下端の段を要検討 */
  background:linear-gradient(173.49deg,
    var(--wm-sa-grad-from) 0%,
    var(--fg-waste-500) 100%);
}
.sa__inner { display:flex; flex-direction:column; gap:40px; }

.sa__heading { display:flex; flex-direction:column; gap:6px; color:var(--fg-canvas); }
.sa__en {
  font-family:var(--font-num); font-size:12px; font-weight:700; line-height:21.6px;
  letter-spacing:1.68px; text-transform:uppercase; color:var(--fg-canvas);
}
.sa__title { font-size:44px; font-weight:700; line-height:58px; color:var(--fg-canvas); }

.sa__stack { display:flex; flex-direction:column; gap:24px; }
.sa__board { filter:drop-shadow(0 8px 7px rgba(0,0,0,.05)); }

/* --- タブ --- */
.sa-tabs { display:flex; gap:8px; align-items:flex-start; }
.sa-tab {
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:290px; min-height:72px; padding:20px 24px;
  background:var(--fg-waste-200); border:0; border-radius:8px 8px 0 0;
  cursor:pointer; appearance:none;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* 番号バッジ。13px＝通常文字の扱いなので 4.5:1 が要る。
   カンプ 549:2 の「選択・非選択とも 50 の地」は踏襲し、文字だけ 600（3.10:1）から
   900（7.62:1）へ落として基準を満たす */
.sa-tab__badge {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border-radius:14px;
  background:var(--fg-waste-50);
  font-family:var(--font-num); font-size:13px; font-weight:700; line-height:1; color:var(--fg-waste-900);
}
/* 非選択タブ。地は --fg-waste-200（#96F6D2）。文字は700（3.61:1／大文字AA） */
.sa-tab__label { font-size:16px; font-weight:700; line-height:28px; text-align:center; color:var(--fg-waste-700); }
/* 選択タブはパネルと地続き。濃緑の面に白文字（4.62:1） */
.sa-tab.is-selected { background:var(--wm-sa-panel); padding-block:26px; }
.sa-tab.is-selected .sa-tab__label { color:var(--fg-canvas); }
/* フォーカス枠は地の明暗で見え方が逆になるため、選択・非選択で色を分ける */
.sa-tab:focus-visible { outline:3px solid var(--fg-waste-900); outline-offset:-3px; }
.sa-tab.is-selected:focus-visible { outline-color:var(--fg-canvas); }

/* --- 支援領域パネル --- */
.sa-panel {
  display:flex; flex-direction:column; gap:24px;
  /* 2026-09-13（FB20）：面を 700 へ落として白文字を 4.62:1 に引き上げた */
  padding:40px; background:var(--wm-sa-panel);
  border-radius:0 20px 20px 20px;
}
.sa-panel[hidden] { display:none; }
.sa-panel__row { display:flex; gap:36px; align-items:flex-start; }
.sa-panel__body { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:24px; }
.sa-panel__head { display:flex; flex-direction:column; gap:14px; color:var(--fg-canvas); }
.sa-panel__name { font-size:28px; font-weight:700; line-height:36px; }
.sa-panel__desc { font-size:16px; line-height:30px; }

/* 課題リスト。パネルより明るい面（200）に本文カラーの文字。
   パネルの白文字とは逆転するが、コントラストは 8.08:1 と最も読みやすい */
.sa-issues {
  display:flex; flex-direction:column; gap:10px;
  padding:12px; border-radius:8px; background:var(--fg-waste-200);
}
.sa-issue { display:flex; align-items:center; gap:10px; }
/* チェックは既存ブロックと同じ作り（丸＋白いレ点） */
.sa-issue__check {
  position:relative; flex:none; width:17px; height:17px; border-radius:50%;
  background:var(--fg-waste-600);
}
.sa-issue__check::after {
  content:""; position:absolute; left:4.5px; top:5px; width:7.5px; height:3.8px;
  border-left:2px solid var(--fg-canvas); border-bottom:2px solid var(--fg-canvas);
  transform:rotate(-45deg);
}
.sa-issue__text { flex:1 1 auto; min-width:0; font-size:15px; line-height:26px; color:var(--ink); }

/* 「詳しく見る」：既存の .cvbtn と同じ寸法・字組 */
.sa-detail {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:320px; min-height:48px; padding:15px 13px;
  background:var(--fg-canvas); border:1px solid var(--fg-waste-200); border-radius:var(--r-full);
  text-decoration:none; transition:filter var(--dur) var(--ease);
}
.sa-detail:hover { filter:brightness(1.04); }
.sa-detail__pad { flex:none; width:20px; height:20px; }
.sa-detail__txt { flex:1 1 auto; text-align:center; font-size:14px; font-weight:500; line-height:19.6px; color:var(--ink); }
.sa-detail__ico { flex:none; display:block; width:20px; height:20px; }

/* イラスト */
.sa-panel__visual {
  flex:none; display:flex; align-items:center; justify-content:center;
  width:300px; height:300px; padding:30px; border-radius:20px;
  background:linear-gradient(180deg, var(--fg-canvas) 0%, var(--fg-waste-200) 100%);
}
.sa-panel__visual picture { display:block; width:100%; aspect-ratio:1 / 1; }
.sa-panel__visual img { display:block; width:100%; height:100%; object-fit:cover; }

/* --- ピックアップ --- */
/* 2026-09-13：FB27でタブパネルの外（ソリューションの下）へ移動。パネル内の区切りだった
   上罫線は外し、.sa__stack の gap で離す。2枚→3枚になったためカードは縦組みへ変更した
   （横組みのままだと1枚389pxに対しサムネ160pxが占め、本文が2桁px幅まで痩せる） */
.sa-pickups { display:flex; flex-direction:column; gap:16px; }
.sa-pickups__head { font-size:16px; font-weight:700; line-height:30px; color:var(--fg-canvas); }
/* 説明文の行数差でカード高さがばらつくため伸縮させて揃える */
.sa-pickups__list { display:flex; gap:16px; align-items:stretch; }
.sa-pickup {
  flex:0 0 calc((100% - 32px) / 3); min-width:0;
  display:flex; flex-direction:column; align-items:stretch; gap:16px; padding:20px;
  background:var(--fg-canvas); border:1px solid var(--fg-waste-200); border-radius:16px;
  box-shadow:0 8px 14px rgba(0,0,0,.05); text-decoration:none;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sa-pickup:hover { box-shadow:0 12px 20px rgba(0,0,0,.10); transform:translateY(-2px); }
/* イラストは主役ではないので、カード幅いっぱいに敷かず40%に抑えて中央へ置く */
.sa-pickup__thumb { display:block; width:40%; aspect-ratio:3 / 2; margin-inline:auto; border-radius:8px; overflow:hidden; }
.sa-pickup__thumb img { display:block; width:100%; height:100%; object-fit:cover; }
/* 説明文の行数が違ってもカード下端の矢印位置が揃うよう、本文側を伸ばす */
.sa-pickup__body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.sa-pickup__tag {
  padding:2px 10px; border-radius:999px; background:var(--fg-waste-50);
  font-size:12px; font-weight:700; line-height:20px; color:var(--fg-waste-600);
}
.sa-pickup__title { font-size:18px; font-weight:700; line-height:28px; color:var(--ink); }
.sa-pickup__desc { font-size:13px; line-height:22px; color:var(--ink); }
.sa-pickup__arrow { flex:none; align-self:flex-end; display:block; width:20px; height:20px; object-fit:contain; }

/* --- 接続表現 --- */
.sa-transition { display:flex; flex-direction:column; align-items:center; gap:8px; }
.sa-transition__line,
.sa-transition__arrow { display:block; height:40px; }
.sa-transition__band {
  width:100%; padding:24px; border-radius:12px; background:var(--fg-waste-100);
  box-shadow:0 8px 14px rgba(0,0,0,.05);
  font-size:24px; font-weight:500; line-height:28px; text-align:center; color:var(--ink);
}
/* 入替前は --fg-waste-700 が未定義でcharcoalを継承していた。トークンを定義したので
   実際に色が付く。淡色帯の上で読めるよう900を使う（5.5:1） */
.sa-transition__band span { color:var(--fg-waste-900); }

/* --- 3つの共通ソリューション --- */
.sa-solutions {
  display:flex; align-items:flex-start;
  padding:32px 8px; background:var(--fg-canvas);
  border:1px solid var(--fg-waste-200); border-radius:20px;
}
.sa-solution { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:12px; padding-inline:24px; }
.sa-solution + .sa-solution { border-left:1px solid var(--fg-waste-100); }
/* 2026-09-13：アイコンのブルー化に合わせ、地の丸もミント50→Picton Blue 50へ */
.sa-solution__icon {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:72px; height:72px; border-radius:36px; background:var(--fg-circ-50);
}
.sa-solution__icon img { display:block; width:40px; height:40px; }
.sa-solution__title { font-size:17px; font-weight:700; line-height:26px; text-align:center; color:var(--ink); }
.sa-solution__desc { font-size:13px; line-height:22px; text-align:center; color:var(--ink); }

/* 切り替えのフェード。既存サイトに合わせた控えめな指定 */
.sa-panel { animation:sa-fade .2s var(--ease) both; }
@keyframes sa-fade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .sa-panel { animation:none; }
  .sa-tab { transition:none; }
}

/* =============================================================================
   9. 導入事例
   -----------------------------------------------------------------------------
   /hub/ デザイン S6 セミナーと同じ構成部品（.carousel / .casecard / .tag-pill /
   .cases__actions / .pill-btn）をそのまま使う。ここでは余白と、
   共通CSSがJEMSグリーン固定で持っている色だけをブルーへ差し替える。
   ========================================================================== */
/* .seminars 側の余白指定（54px/16px）に相当するものを本ページ用に置く */
.wm-sec .carousel { margin-block:36px 16px; }
.wm-sec .cases__actions { padding:16px 0 0; }

/* 企業名ピル：グリーン → 廃棄物マネジメントのテーマ色 */
.tag-pill { background:var(--fg-waste-50); color:var(--wm-key-deep); }
/* カルーセルの送り矢印：同上 */
.carousel__arrow { color:var(--wm-key-deep); }
.carousel__arrow:hover { border-color:var(--wm-key); background:var(--fg-waste-50); }
/* ホバーの影：廃棄物マネジメントのテーマ色。入替でブルー→ミント
   （rgba(52,177,253)=#34B1FD → rgba(70,209,165)=#46D1A5） */
.casecard:hover { box-shadow:16px 16px 40px rgba(70,209,165,.28); }
/* タイトルは原本の文言をそのまま入れるため長い。3行で止める */
.casecard__title {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
/* 2026-09-13：プレースホルダー文字から実写真へ差し替え（design/case/ と同じ素材）。
   元画像の比率はばらつくので、サムネ枠（160:90）にトリミングして揃える */
.casecard__thumb img { display:block; width:100%; height:100%; object-fit:cover; }

/* =============================================================================
   10. プラン（Figma node 369:888）
   -----------------------------------------------------------------------------
   4枚を等幅で並べ、その下に「料金プランを見る」を中央配置する。
   ========================================================================== */
.wm-plans { display:flex; flex-direction:column; align-items:center; gap:32px; padding-top:var(--sp-5); }
.wm-plans__list { display:flex; gap:16px; align-items:stretch; width:100%; }
.wm-plan {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:8px;
  padding:17px; background:var(--fg-waste-50);
  border:1px solid var(--fg-waste-100); border-radius:12px;
}
.wm-plan__name { font-family:var(--font-num); font-size:17px; font-weight:700; line-height:22.1px; color:var(--fg-waste-600); }
.wm-plan__d { font-size:11px; line-height:19.8px; color:var(--ink); }
.wm-plans__act { display:flex; justify-content:center; }

/* =============================================================================
   11. 資源循環への送客（Figma node 369:920 / JEMS_PC_1920_01）
   -----------------------------------------------------------------------------
   ミント枠の白カード（1200×384）。背景装飾とイラストはカードの外へはみ出させ、
   カード側の overflow:hidden で切る。座標はFigmaの実測値をカード右端基準に置き直した。
   ========================================================================== */
/* 地色は廃棄物マネジメントの最淡色。入替後は Circular Mint 50 */
.wm-sec--bridge { background:var(--fg-waste-50); }

.wm-bridge {
  position:relative; overflow:hidden;
  min-height:384px; display:flex; align-items:center;
  padding:38px 45px; background:var(--surface);
  /* 送客先＝資源循環テーマの200。入替後は Picton Blue 200 */
  border:1px solid var(--wm-bridge-line); border-radius:var(--fg-radius-card);
  box-shadow:0 8px 14px rgba(0,0,0,.05);
}

/* --- 背景装飾 --- */
.wm-bridge__deco { position:absolute; inset:0; pointer-events:none; }
.wm-bridge__deco img { position:absolute; height:auto; }
.wm-bridge__frame { left:-509px; top:-388px; width:1326px; }
.wm-bridge__blob--a { right:-361px; top:-305px; width:780px; }
/* Figmaでは mix-blend-screen 指定。白面の上では淡く溶ける */
.wm-bridge__blob--b { right:132px; top:-360px; width:658px; mix-blend-mode:screen; }

/* --- イラスト --- */
/* Figma: 613×409 をカード右端から112pxはみ出す位置に置く */
.wm-bridge__visual { position:absolute; right:-112px; top:-21px; width:613px; pointer-events:none; }
.wm-bridge__visual img { display:block; width:100%; height:auto; }

/* --- 本文 --- */
.wm-bridge__body { position:relative; z-index:1; display:flex; flex-direction:column; gap:46px; align-items:flex-start; max-width:770px; }
/* 共通 .sec-head をカード内に置くので、幅制限と下マージンを解除する */
.wm-bridge__head { max-width:none; margin-bottom:0; }
/* 送客先は資源循環なので、英字ラベルだけ資源循環テーマの色にする（本ページの既定は廃マネ色） */
.wm-bridge__head .sec-head__en { color:var(--fg-circ-600); }

/* --- CTA：FVボタン（.fbtn）の資源循環テーマ版 --- */
/* .fbtn--circular は事業部TOP用のグリーン。ここは資源循環テーマの色で作る。
   2026-09-06：テーマ入替でミント→ブルーになるため、クラス名を .fbtn--mint から改名し、
   影の色も rgba(51,184,144)（ミント）から rgba(8,151,239)（Picton Blue 500）へ差し替え。
   カンプ 549:2 でもブルー（#0078CC→#0897EF）のまま維持されている */
.fbtn--circ {
  width:320px;
  background:linear-gradient(87.2deg, var(--fg-circ-600) 25.24%, var(--fg-circ-500) 112.81%);
  box-shadow:4px 6px 7px rgba(8,151,239,.4), inset 1px 1px 2px rgba(8,151,239,.3);
}

/* =============================================================================
   12. CTA（/hub/ の .jcta2 を廃棄物マネジメントのテーマ色で使う）
   -----------------------------------------------------------------------------
   .jcta2 の地色は --fg-cta-grad。この変数は :root で from / to を参照した形で
   宣言されており、変数の中の var() は宣言元（:root）で解決されてしまう。
   そのため from / to だけを子要素で上書きしても色は変わらない。
   グラデーション自体をこの要素で宣言し直す。
   値は廃棄物マネジメントのテーマ色（グリーン版の Mantis と同じ組み立て）。
   2026-09-07：カンプ 549:786 の更新に合わせ、上端700→下端 #0CC990 へ。
   2026-09-13（0909CL ⑰）：下端の #0CC990 は白文字 2.15:1 で、見出しもリードも
   読めていなかった（旧コメントの［要確認］がこれ）。ランプ外の中間色をやめ、
   上端700（4.62:1）→下端800（6.10:1）と、どちらもAAを満たす段だけで組む。
   2テーマのCTA帯は「上端＝明度55%／下端＝明度49%」で揃えてあり、違うのは色相だけ
   （グリーン150°／ミント168°）。
   ========================================================================== */
.jcta2--waste {
  --fg-cta-grad:linear-gradient(180deg, var(--fg-waste-700) 0%, var(--fg-waste-800) 100%);
}
/* 紙飛行機はグリーンの既存素材。入替後の地色はミントなので、色相回転は不要になった。
   2026-09-06：hue-rotate(88deg) を外し、素材そのままの色で載せる */
/* カードが1枚だけなので、本文とボタンを横並びにして間延びを防ぐ */
.cta-card--solo { flex-direction:row; align-items:center; gap:var(--sp-6); }
.cta-card--solo .cta-card__btns { flex:none; width:440px; padding-top:0; }

/* =============================================================================
   13. ボタン・リンク
   -----------------------------------------------------------------------------
   ページ遷移ボタンは .pill-btn に統一する（/hub/ の「導入事例一覧を見る」と同じ部品）。
     白面 ＋ 枠線 ＋ 右に丸矢印、幅254px・高さ48px。
     本ページでは枠線と丸矢印を廃棄物マネジメントのブルーにする。
     使用箇所：課題ブロックの「詳しく見る」／導入事例の「導入事例一覧を見る」
   丸矢印は arrow-circle-20-blue.svg（グリーン版 arrow-circle-20.svg の色違い）。
   ========================================================================== */
.pill-btn { border-color:var(--fg-waste-200); }
.pill-btn:hover { background:var(--fg-waste-50); }

/* 面や矢印を持たない小さな遷移アイコン（プラン比較・資源循環パネル） */
.wm-btn__ico { flex:none; width:16px; height:16px; }

/* =============================================================================
   14. レスポンシブ
   ========================================================================== */
@media (max-width:1199px) {
  /* イラストは本文に近づくので、右へ逃がす量を増やして重なりを避ける */
  .wm-bridge__visual { right:-180px; width:560px; }
  .cta-card--solo .cta-card__btns { width:380px; }

  /* ロゴの実寸を保つと幅が足りず折り返しが増えるので、高さだけ一段落とす。
     並べ方（縦積み・左揃え）はPCと同じ */
  .wm-logos { gap:var(--sp-5) var(--sp-6); }
  .wm-logos__cell img { height:56px; }
  .wm-logos__ph { width:140px; }
}

@media (max-width:1023px) {
  :root { --wm-sec-gap:64px; }

  .wm-panel { padding:var(--sp-5); }

  /* 横並びをやめ、ビジュアルを本文の上に全幅で積む（参考サイトも同じ切り替え方）。
     PCの2カラムグリッドを1カラムに戻すと、DOM順（先頭）でビジュアルが上に来る */
  .wm-fv__inner { display:block; padding-block:0 48px; }
  /* 上の余白はビジュアル側で持つ（従来のinner padding-top 40px 相当）。
     PCの「右カラムからの右はみ出し」指定はここで解除し、全幅の等倍表示に戻す */
  .wm-fv__visual {
    width:100%; margin:40px 0 var(--sp-5);
    justify-self:auto;
  }

  /* 実績カードはグリッドの2行目ではなく、コピーの下へ普通に積む
     （60%指定もここで解除して全幅に戻す） */
  .wm-metrics-band { margin-top:var(--sp-6); }
  .wm-metrics { display:block; width:auto; padding:var(--sp-4) var(--sp-5); }

  /* 実績帯：3項目を折り返す。縦罫は横並びのときだけ */
  .wm-metrics__list { flex-wrap:wrap; justify-content:flex-start; gap:var(--sp-4) var(--sp-6); }
  .wm-metric + .wm-metric { padding-left:0; border-left:0; }

  /* 吹き出しカードは3列＋2列に */
  .wm-issues { grid-template-columns:repeat(3,1fr); gap:var(--sp-5) 18px; }

  /* 提供価値4項目は2列に。区切りの縦罫は列をまたぐので外す */
  /* 提供価値カードは2列に折り返す */
  .wm-values { flex-wrap:wrap; }
  .wm-value { flex:1 1 calc(50% - var(--sp-4)); }

  /* ステップ：番号とラベルを1行にまとめ、説明文をその下へ */
  /* 見出しとビジュアルを縦積みに（事業部TOPのBACKGROUNDと同じ切り替え方） */
  .wm-approach-head { flex-direction:column; gap:var(--sp-5); }
  .wm-approach-head__visual { width:100%; max-width:448px; align-self:center; }

  /* 番号丸と本文の間隔を詰める */
  .wm-step { gap:var(--sp-6); }
  .wm-step__t { font-size:20px; }


    
  /* 4枚では狭いので2列に折り返す */
  .wm-plans__list { flex-wrap:wrap; }
  .wm-plan { flex:1 1 calc(50% - 8px); }

  /* イラストを本文の下へ回し、カードは縦積みにする */
  .wm-bridge { min-height:0; flex-direction:column; align-items:stretch; padding:32px; }
  .wm-bridge__body { gap:32px; max-width:none; }
  .wm-bridge__visual { position:relative; right:auto; top:auto; width:100%; max-width:520px; margin:24px auto -32px; }
  /* 装飾はカードが小さくなると意味を失うので落とす */
  .wm-bridge__deco { display:none; }

  /* CTAカードは幅が足りないので本文とボタンを縦に戻す（/hub/ の1023px以下と同じ扱い） */
  .cta-card--solo { flex-direction:column; align-items:stretch; gap:20px; }
  .cta-card--solo .cta-card__btns { width:auto; flex-direction:column; gap:10px; }

  /* --- 2つの支援領域：Figma SP（411:2）の構成に組み替える --- */
  /* 角度だけPC版と変える。停止色はPCと同じ2停止に揃える */
  .sa { padding-block:40px; background:linear-gradient(131.13deg,
    var(--wm-sa-grad-from) 0%, var(--fg-waste-500) 100%); }
  .sa__inner { gap:28px; }
  .sa__title { font-size:28px; line-height:40px; }
  /* タブは縦組み（バッジの下にラベル）。2等分で画面内に収める */
  .sa-tab { flex:1 1 0; width:auto; min-width:0; flex-direction:column; gap:8px; padding:16px 12px; }
  /* 非選択タブの下に空く余白は、タブ同士の間隔（8px）と同じ量にそろえる */
  .sa-tab.is-selected { padding-block:20px; }
  .sa-panel { padding:20px; gap:24px; }
  /* イラストを本文の上へ。PCの横並びをそのまま縮小しない */
  .sa-panel__row { flex-direction:column; gap:36px; }
  /* 縦積み時のイラスト。中間幅（768〜1023）で巨大化しないよう上限を設ける。
     正方形に固定すると3:2の素材で上下に余白が出るため、比率は画像本来のものに任せる */
  .sa-panel__visual { order:-1; width:100%; max-width:340px; margin-inline:auto; height:auto; aspect-ratio:auto; padding:0; background:none; border-radius:16px; }
  .sa-panel__visual picture { aspect-ratio:auto; }
  .sa-panel__visual img { height:auto; object-fit:contain; }
  .sa-detail { width:100%; }
  /* ピックアップは1列に。カード内の縦組みはPCと共通なので、幅の指定だけ上書きする。
     1列だとサムネが全幅まで伸びて主役になりすぎるため、上限を設けて中央へ寄せる */
  .sa-pickups__list { flex-direction:column; }
  .sa-pickup { flex:none; width:100%; gap:20px; }
  /* 1列では相対40%だと痩せすぎるため、下限を持たせる */
  .sa-pickup__thumb { width:40%; min-width:180px; max-width:280px; }
  .sa-pickup__body { width:100%; }
  .sa-pickup__arrow { width:32px; height:32px; }
  .sa-transition__band { font-size:24px; }
  /* 共通ソリューションは縦積み。区切りは横線 */
  .sa-solutions { flex-direction:column; align-items:center; gap:30px; padding:32px 0; }
  .sa-solution { width:100%; }
  .sa-solution + .sa-solution { border-left:0; }
  .sa-solutions .sa-solution + .sa-solution::before {
    content:""; display:block; width:100%; height:1px; margin-bottom:30px; background:var(--fg-waste-100);
  }
}

@media (max-width:767px) {
  :root { --wm-sec-gap:48px; }

  .wm-fv__copy { line-height:1.3; }
  .wm-fv__lead { font-size:14px; }
  .wm-fv__lead br { display:none; }

  .wm-metrics__list { gap:var(--sp-3) var(--sp-5); }
  .wm-metric__num { font-size:30px; }

  .wm-panel { padding:var(--sp-4); }

  /* 吹き出しカードは2列。しっぽは縦積みでも各カードに付く */
  .wm-issues { grid-template-columns:repeat(2,1fr); gap:var(--sp-4) 12px; }
  .wm-issue__card { padding:24px 10px; }
  .wm-issue__t { font-size:14px; margin-bottom:14px; }
  .wm-issue__t br { display:none; }
  .wm-issue__ill { max-width:130px; }

  /* SPはカードが細くなるので、イラストと余白を一段落とす */
  .wm-values { gap:var(--sp-3); }
  .wm-value { flex:1 1 calc(50% - var(--sp-3)); min-height:186px; padding:var(--sp-4) var(--sp-3); }
  .wm-value__ill { width:112px; }
  .wm-value__t { font-size:15px; }

  /* 番号丸を28pxに落とし、点線の位置も合わせる（参考サイトのSPと同じ寸法） */
  .wm-steps { gap:var(--sp-5); }
  .wm-step { gap:var(--sp-4); }
  .wm-step__no { width:28px; height:28px; font-size:13px; }
  .wm-step:not(:last-child)::before { left:13px; top:34px; bottom:calc(var(--sp-5) * -1); }
  .wm-step__t { font-size:17px; }
  .wm-step__d { font-size:14px; }
  .wm-flow { padding:var(--sp-5); }

  /* SPは業種ブロックを縦に積んだまま、ロゴ列だけ3列グリッドへ。
     セルを固定幅で折り返すと右端が大きく余るため、ここだけ等幅グリッドにする。
     小見出しとロゴの対応が離れないよう、ブロック間の余白は行間より広く取る */
  .wm-logogroups { gap:var(--sp-7); }
  .wm-logos { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4) var(--sp-3); }
  .wm-logos__cell { flex:none; min-height:64px; }
  .wm-logos__cell img { height:44px; max-width:100%; }
  .wm-logos__ph { width:100%; min-height:64px; font-size:11px; }


  .wm-plans__list { flex-direction:column; }
  .wm-plan { flex:none; width:100%; }

  .wm-bridge { padding:var(--sp-5) var(--sp-4); }
  .wm-bridge__body { gap:24px; }
  .wm-bridge__visual { margin-bottom:calc(var(--sp-5) * -1); }
  .fbtn--circ { width:100%; }

  .wm-fv__actions { flex-direction:column; gap:var(--sp-3); }
  .wm-fv__actions .cvbtn { flex:none; width:100%; }

  /* 支援領域：狭い画面でタブ文字が詰まりすぎないよう一段落とす */
  .sa__title { font-size:24px; line-height:34px; }
  .sa-tab { padding:14px 8px; }
  .sa-tab.is-selected { padding-block:18px; }
  .sa-tab__label { font-size:14px; line-height:22px; }
  .sa-panel { padding:16px; }
  .sa-panel__name { font-size:22px; line-height:32px; }
  .sa-panel__desc { font-size:15px; line-height:28px; }
  .sa-transition__band { padding:20px 16px; font-size:19px; line-height:28px; }
  .sa-pickup__title { font-size:16px; line-height:26px; }
}