@charset "utf-8";
/* =============================================================================
   JEMS 廃棄物マネジメント｜サービス下層2ページ デザイン
   -----------------------------------------------------------------------------
   対象 : /hub/env-mgt/service/operation-standardization/  法令遵守・運用標準化
          /hub/env-mgt/service/group-management/           全社管理・データ活用
          （デザイン確認用の実体は design/env-mgt/service/<slug>/index.html）

   前提 : 以下の順で読み込む。
            1. ../../../../assets/jems-design.css  共通デザインシステム（トークン）
            2. ../../../assets/design.css          /hub/ 共通シェル
                                                   （ヘッダー・フッター・.cvbtn・
                                                    .pill-btn・.carousel・.casecard・
                                                    .jcta2・.cta-card・.ph）
            3. ../../../assets/common.css          下層ページの骨格
                                                   （.hc-crumb／.hc-hero／.hc-plate）
            4. ../../assets/env-mgt.css            廃マネTOPのデザイン
                                                   （.wm-sec／.wm-steps／.sa-pickup／
                                                    .tag-pill・.pill-btn のミント化／
                                                    .jcta2--waste／.cta-card--solo）
            5. assets/service.css                  本ファイル。2ページ共有
          クラス名は wms- 接頭辞（waste management service）で名前空間を分け、
          design.css の .svc-* / .fv / env-mgt.css の .wm-* と衝突させない。

   テーマ : data-theme="waste"。廃棄物管理のミントグリーン。
            色は --fg-waste-* / --wm-* を参照し、16進を直書きしない。
            白を基調に、ミントは淡いグラデーション・枠線・アクセントとして使う。
            補助色の淡いブルー（--fg-circ-*）は「情報の受け渡し」を示す箇所のみ。

   ページ骨格（2ページ共通）:
            ヘッダー（廃マネTOPと同一）
            .hc-hero.wms-hero   パンくず＋H1＋リード＋CTA＋イラスト（ミントの淡いグラデ）
            .hc-plate           白面。40px角丸でヒーローに40px重ねる
              .wm-sec …         本文セクション（TOPと同じ間隔・地色）
            .jcta2--waste       ご相談・資料請求（TOP S11 と同一）
            .jfooter2           フッター（TOP S12 と同一）
   ========================================================================== */

/* =============================================================================
   1. ページトークン ＋ 共通シェルのミント化
   -----------------------------------------------------------------------------
   common.css の .hc-* はJEMSグリーン固定なので、参照トークンだけミントへ差し替える。
   本ファイルを読むのは今回の2ページだけなので、他ページには影響しない。
   ========================================================================== */
:root {
  /* common.css（--hc-*）をミントへ。値は env-mgt.css の --wm-* と同じ段に揃える */
  --hc-key:var(--fg-waste-400);
  --hc-key-deep:var(--fg-waste-700);
  --hc-pale:var(--fg-waste-50);
  --hc-tint:var(--wm-pale);
  --hc-line:var(--fg-waste-200);

  /* 本2ページ固有 */
  --wms-card-shadow:0 8px 14px rgba(0,0,0,.05);          /* TOPのカードと同じ影 */
  --wms-soft-shadow:16px 16px 40px rgba(70,209,165,.18); /* ミントの繊細な影 */
  --wms-gap:24px;
}

/* 白面プレートの先頭セクションは、角丸ぶん（40px）を足して天井との間を確保する
   （common.css が .hc-sec に対して行っているのと同じ扱いを .wm-sec にも与える） */
.hc-plate > .wm-sec:first-child { padding-top:calc(var(--wm-sec-gap) / 2 + var(--fg-radius-block)); }

/* 見出しと中身の間隔。共通CSSの .sec-head は下24pxしか持たないので、
   図解・カード群の前だけ足す */
.wms-body { margin-top:var(--sp-5); }
.wms-body--lg { margin-top:var(--sp-6); }

/* SP専用の改行位置（既定は無効。767px以下で有効になる） */
.wms-br-sp { display:none; }

/* 段落。セクション内の説明文（リードより弱く、キャプションより強い） */
.wms-text { font-size:16px; line-height:1.9; color:var(--ink-body); max-width:44em; }
.wms-text + .wms-text { margin-top:var(--sp-4); }

/* プランによって提供範囲が異なる箇所の注記。装飾はせず、地色だけ淡く敷く */
.wms-note {
  margin-top:var(--sp-5); padding:12px 16px;
  background:var(--fg-waste-50); border-radius:var(--r-md);
  font-size:12px; line-height:1.8; color:var(--ink-muted);
}

/* セクション末尾の関連導線。
   .pill-btn は幅254px固定なので、原稿の長いラベル（「電子マニフェスト導入の流れを見る」等）が
   2行に折れる。ここでは内容で幅を決め、254pxを下限にする */
.wms-act { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-6); }
.wms-act .pill-btn,
.wms-next__act .pill-btn { width:auto; min-width:254px; }
.wms-act .pill-btn > span,
.wms-next__act .pill-btn > span { flex:none; padding-inline:8px; }

/* =============================================================================
   2. ページヒーロー（.hc-hero の廃棄物管理版）
   -----------------------------------------------------------------------------
   common.css のヒーローは地色 --fg-gray のフラットな面。ここはTOPのFVと同じ
   「白基調＋ミントの淡いにじみ」に置き換え、右にイラストを置く2カラムにする。
   H1は 44px 上限（common.css の .hc-hero__title のまま）。TOP（72px）より一段小さい。
   ========================================================================== */
.wms-hero {
  /* TOP FV（.wm-fv）と同じ組み立て。左上・右下に淡いにじみを置き、白へ落とす */
  background:
    radial-gradient(46% 76% at 0% 4%,     rgba(99,231,187,.30) 0%, rgba(99,231,187,0) 72%),
    radial-gradient(34% 72% at 100% 96%,  rgba(70,209,165,.18) 0%, rgba(70,209,165,0) 72%),
    linear-gradient(180deg, #ebfff8 0%, var(--surface) 100%);
}
/* 装飾のJEMSマークは置かない（イラストと重なるため）。common.css の指定は使わない */
.wms-hero__row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-7); }
.wms-hero__body { flex:1 1 auto; min-width:0; }
/* ラベル（廃棄物管理ソリューション）。英字ラベルの代わりに和文のカテゴリを置く */
.wms-hero__label {
  display:inline-flex; align-items:center; gap:6px; margin-bottom:var(--sp-4);
  padding:4px 12px; border-radius:var(--r-full);
  background:var(--fg-waste-50); border:1px solid var(--fg-waste-200);
  font-size:12px; font-weight:700; line-height:1.8; letter-spacing:.02em;
  color:var(--fg-waste-800);
}
.wms-hero__lead { margin-top:var(--sp-5); font-size:16px; line-height:1.9; color:var(--ink-body); max-width:40em; }
/* CTAはTOPのFVと同じ .cvbtn（fill／outline）。寸法もFVに合わせる */
.wms-hero__actions {
  margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-3);
  --cta-fill:var(--fg-waste-600); --cta-line:var(--fg-waste-200); --cta-ink:var(--fg-waste-700);
}
/* ラベルが長い（原稿の文言をそのまま使う）ので、幅は固定せず内容で決める。
   .cvbtn は既定で flex:1 1 0 なので、ここで 0 0 auto に戻して1行に収める */
.wms-hero__actions .cvbtn { flex:0 0 auto; min-width:240px; min-height:56px; padding-inline:12px; }
.wms-hero__actions .cvbtn__txt { flex:none; padding-inline:8px; font-size:15px; }
/* 右のイラスト。TOPの支援領域パネル（.sa-panel__visual）と同じ受け皿の作り */
.wms-hero__visual {
  flex:none; width:340px; padding:24px; border-radius:var(--fg-radius-card);
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(188,244,226,.55) 100%);
  box-shadow:var(--wms-soft-shadow);
}
.wms-hero__visual picture { display:block; }
.wms-hero__visual img { display:block; width:100%; height:auto; }
/* 受け皿なしでイラストを地に直接置く形（ソリューション2ページのFV）。
   レスポンシブの padding／width 指定より後に効かせるため .wms-hero を前置して詳細度を上げる。
   2ページで素材の縦横比が違う（support-01＝3:2／support-02＝1:1）ので、
   表示サイズは高さ340pxを基準にそろえ、幅は比率で決まるようにする */
.wms-hero .wms-hero__visual--bare { width:auto; padding:0; background:none; box-shadow:none; }
.wms-hero__visual--bare img { width:auto; height:340px; }

/* =============================================================================
   3. 課題カード
   -----------------------------------------------------------------------------
   TOP の吹き出しカード（.wm-issue）は見出しだけを持つ形。ここは原稿が
   「課題名＋その内実」の2段なので、白カードに 番号・見出し・説明・小さなイラスト
   を収める形にする。イラストはTOPと同じ支給素材（issue-01〜05）。
   ========================================================================== */
.wms-issues { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--wms-gap); }
.wms-issue {
  display:flex; align-items:flex-start; gap:20px;
  padding:24px; background:var(--surface);
  border:1px solid var(--fg-waste-200); border-radius:var(--fg-radius-card);
  box-shadow:var(--wms-card-shadow);
}
.wms-issue__ill { flex:none; display:block; width:88px; aspect-ratio:1218 / 1292; }
.wms-issue__ill img { display:block; width:100%; height:100%; object-fit:contain; }
.wms-issue__body { flex:1 1 auto; min-width:0; }
.wms-issue__no {
  display:block; margin-bottom:6px;
  font-family:var(--font-num); font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--fg-waste-700);
}
.wms-issue__t { font-size:18px; font-weight:700; line-height:1.6; color:var(--ink); }
.wms-issue__d { margin-top:10px; font-size:14px; line-height:1.9; color:var(--ink-body); }

/* =============================================================================
   4. 三位一体の関係図（許可証／委託契約書／マニフェスト）
   -----------------------------------------------------------------------------
   Figma「三位一体の管理」（node 816:4）のベン図を HTML／CSS で組む。
   円は 420px 径を 760×635 の座標系に置いた図（Figmaの座標をそのまま％化）。
   文字も円と一緒に縮む必要があるので、寸法は cqw（図の幅）基準で持つ。
   PCは見出しの右に図（TOPのBACKGROUND・.wm-approach-head と同じ）、SPは縦積み。
   ========================================================================== */
/* 見出し＋図の横並び */
.wms-trio__head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-7); }
.wms-trio__head .sec-head { flex:1 1 auto; min-width:0; max-width:none; margin-bottom:0; }
.wms-trio__head .wms-venn { flex:none; width:48%; max-width:560px; }
.wms-venn {
  /* 3円の色と重なりの明度が図の要件そのもの。JEMSのトークンに該当段がないため、
     この図だけのローカル値として持つ（Figmaの fill と fill-opacity をそのまま） */
  --venn-license:rgba(123,237,204,.30);   /* #7BEDCC 30% */
  --venn-contract:rgba(161,217,247,.30);  /* #A1D9F7 30% */
  --venn-manifest:rgba(96,198,243,.30);   /* #60C6F3 30% */
  --venn-ring:rgba(255,255,255,.95);      /* 円のふち（重なりの境目を出す） */
}
.wms-venn__fig {
  container-type:inline-size;
  position:relative; width:100%; max-width:760px; margin:0 auto;
  aspect-ratio:760 / 635;
}
.wms-venn__circle {
  position:absolute; width:55.263%; aspect-ratio:1; border-radius:50%;
  border:2px solid var(--venn-ring);
}
.wms-venn__circle--license  { left:22.368%; top:0;       background:var(--venn-license); }
.wms-venn__circle--contract { left:0;       top:33.858%; background:var(--venn-contract); }
.wms-venn__circle--manifest { left:44.737%; top:33.858%; background:var(--venn-manifest); }
/* 円の中の見出し＋内訳。2行組（見出し／内訳）でFigmaと同じ位置・同じ字面に置く */
.wms-venn__label {
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  font-size:20px; font-weight:500; line-height:1.6;
  font-size:clamp(13px, 2.63cqw, 20px);
}
.wms-venn__label b { font-weight:500; }
/* 文字色は円の色に合わせる。Figmaの指定は JEMS/Color/Mantis/700（#297223）と
   JEMS/Waste/Color/Picton Blue/800（#045188）。前者に対応するトークンが
   コード側にないので、同じ段の --fg-mantis-600（#2c7724）で受ける */
.wms-venn__label--license  { left:50%;     top:23.465%; width:34.21%; color:var(--fg-mantis-600); }
.wms-venn__label--contract { left:27.632%; top:66.929%; width:40.79%; color:var(--fg-circ-800); }
.wms-venn__label--manifest { left:72.368%; top:66.929%; width:40.79%; color:var(--fg-circ-800); }
/* 中心のピル。3つの整合が取れた状態の名前を置く */
.wms-venn__center {
  position:absolute; left:50%; top:54.016%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:31.579%; height:12.598%; border-radius:var(--r-full);
  background:rgba(255,255,255,.96); border:3px solid var(--fg-waste-500);
  text-align:center; white-space:nowrap; color:var(--fg-mantis-600);
  font-size:24px; font-weight:700; line-height:1.42;
  font-size:clamp(14px, 3.16cqw, 24px);
}
/* 図が小さいときは円の中を名前だけにする（内訳は下のテキストブロックで読める）。
   ビューポート幅ではなく図そのものの幅で切り替える */
@container (max-width:480px) {
  .wms-venn__label span { display:none; }
  .wms-venn__label { font-size:clamp(13px, 4.6cqw, 20px); }
  /* 中心のピルは文字が下限（14px）で止まるぶん、幅を少し広げて窮屈にしない */
  .wms-venn__center { width:38%; }
}
/* 図の下の帯。3つが処理ルートの上で束ねられることを示す */
.wms-trio__base {
  position:relative; margin-top:56px;
  padding:20px 24px; border-radius:var(--r-lg);
  background:var(--fg-waste-100);
  font-size:16px; font-weight:500; line-height:1.8; text-align:center; color:var(--ink);
}
.wms-trio__base b { color:var(--fg-waste-900); }
/* 3枚から帯へ落ちる送りの三角 */
.wms-trio__base::before {
  content:""; position:absolute; left:50%; top:-28px; transform:translateX(-50%);
  border:12px solid transparent; border-top-color:var(--fg-waste-200); border-bottom:0;
}

/* =============================================================================
   5. 処理ルートの帯（標準化の基礎）
   -----------------------------------------------------------------------------
   発生から最終処分までを1本の並びで示す。PCは横、SPは縦。
   矢印は要素間の余白に置くので、情報の順序は画面幅が変わっても保たれる。
   ========================================================================== */
.wms-route {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px;
  padding:24px; border-radius:var(--fg-radius-card);
  background:var(--wm-pale); border:1px solid var(--fg-waste-200);
}
.wms-route__step {
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 10px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--fg-waste-200);
  text-align:center;
}
.wms-route__step + .wms-route__step::before {
  content:""; position:absolute; left:-20px; top:50%; transform:translateY(-50%);
  width:0; height:0; border:7px solid transparent; border-left-color:var(--fg-waste-400); border-right:0;
}
.wms-route__t { font-size:15px; font-weight:700; line-height:1.6; color:var(--ink); }
.wms-route__d { font-size:12px; line-height:1.7; color:var(--ink-muted); }
.wms-route__cap { margin-top:var(--sp-4); font-size:13px; line-height:1.9; color:var(--ink-muted); }

/* =============================================================================
   5b. 排出事業者責任の範囲と「処理ルート」（S3の図解）
   -----------------------------------------------------------------------------
   排出〜最終処分は排出事業者責任の範囲。そのうちJEMSが「処理ルート」として
   登録・管理するのは中間処理（一次処理）まで。両者を混同させないため、
   上の括弧＝責任範囲・下の括弧＝処理ルートの入れ子で示し、
   二次処理〜最終処分（サービス上の必須登録情報ではない）は破線・淡色で弱く置く。
   部品の寸法・字階級は .wms-route と同じ（.wms-route__t / __d を共用）。
   ========================================================================== */
.wms-scope {
  margin:0; padding:28px 28px 24px; border-radius:var(--fg-radius-card);
  background:var(--surface); border:1px solid var(--fg-waste-200);
  box-shadow:var(--wms-soft-shadow);
}
/* 図全体にかかる責任範囲。左右のレールで「排出から最終処分まで」を示す */
.wms-scope__head { display:flex; align-items:center; gap:14px; }
.wms-scope__rail { position:relative; flex:1 1 auto; height:2px; background:var(--fg-waste-300); }
.wms-scope__rail::before {
  content:""; position:absolute; top:-6px; width:2px; height:14px; background:var(--fg-waste-300);
}
.wms-scope__rail--l::before { left:0; }
.wms-scope__rail--r::before { right:0; }
.wms-scope__head-label {
  flex:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 18px; border-radius:var(--r-full);
  background:var(--fg-waste-50); border:1px solid var(--fg-waste-200);
  font-size:14px; font-weight:700; line-height:1.6; letter-spacing:.02em; color:var(--fg-waste-800);
  text-align:center;
}
.wms-scope__head-label small { font-size:11px; font-weight:500; color:var(--ink-muted); }
/* 3工程（処理ルート）と2工程（補足）を 3:2 で置き、工程の幅をそろえる */
.wms-scope__track {
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:40px; margin-top:26px;
}
/* ゾーンで囲むことで「どこまでが処理ルートか」を面で示す */
.wms-scope__zone {
  position:relative; display:flex; flex-direction:column;
  padding:30px 20px 18px; border-radius:var(--r-lg);
}
.wms-scope__zone--core { background:var(--fg-waste-50); border:1px solid var(--fg-waste-300); }
.wms-scope__zone--sub  { background:var(--surface); border:1px dashed var(--line); }
/* ゾーン名は枠線にかかるチップ。処理ルート側は塗りで主役にする */
.wms-scope__zone-label {
  position:absolute; top:-13px; left:20px;
  padding:4px 14px; border-radius:var(--r-full);
  background:var(--fg-waste-600); border:1px solid var(--fg-waste-600);
  font-size:13px; font-weight:700; line-height:1.7; letter-spacing:.02em; color:var(--fg-canvas);
}
.wms-scope__zone-label--sub {
  background:var(--surface); border:1px dashed var(--line);
  font-weight:500; color:var(--ink-muted);
}
.wms-scope__steps { display:grid; gap:28px; align-content:start; flex:1 1 auto; }
.wms-scope__zone--core .wms-scope__steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
.wms-scope__zone--sub  .wms-scope__steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wms-scope__step {
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px;
  min-height:100%; padding:14px 10px 16px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--fg-waste-200);
  text-align:center;
}
/* 処理ルートを主役にする。白面＋ミントの影で地から持ち上げる */
.wms-scope__zone--core .wms-scope__step { box-shadow:0 6px 18px rgba(70,209,165,.16); }
/* 工程番号 */
.wms-scope__no {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; margin-bottom:2px; border-radius:50%;
  background:var(--fg-waste-500);
  font-family:var(--font-num); font-size:12px; font-weight:700; line-height:1; color:var(--fg-canvas);
}
/* 工程間の送り（.wms-route と同じ三角） */
.wms-scope__step + .wms-scope__step::before {
  content:""; position:absolute; left:-20px; top:50%; transform:translateY(-50%);
  width:0; height:0; border:8px solid transparent; border-left-color:var(--fg-waste-500); border-right:0;
}
/* 処理ルートから補足側へ渡る送りは淡く */
.wms-scope__zone--sub .wms-scope__step:first-child::before {
  content:""; position:absolute; left:-31px; top:50%; transform:translateY(-50%);
  width:0; height:0; border:8px solid transparent; border-left-color:var(--fg-waste-200); border-right:0;
}
/* 二次処理〜最終処分：破線・淡色の補足 */
.wms-scope__step--sub { background:var(--surface-sub); border:1px dashed var(--line); box-shadow:none; }
.wms-scope__step--sub .wms-scope__no {
  background:var(--surface); border:1px solid var(--line); color:var(--ink-muted);
}
.wms-scope__step--sub .wms-route__t { font-weight:500; color:var(--ink-muted); }
/* ゾーンの締めの一文 */
.wms-scope__note {
  margin-top:16px; text-align:center;
  font-size:12px; font-weight:700; line-height:1.7; letter-spacing:.02em; color:var(--fg-waste-800);
}
.wms-scope__note--sub { font-weight:500; color:var(--ink-muted); }

/* =============================================================================
   6. Before ／ After
   -----------------------------------------------------------------------------
   変化の向きが一目で分かるよう、左（現状）はグレーの面・中黒、
   右（整えた後）は白面＋ミントの枠線・チェックで差を付ける。
   ========================================================================== */
.wms-ba { display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); align-items:stretch; gap:0; }
.wms-ba__col { padding:28px; border-radius:var(--fg-radius-card); }
.wms-ba__col--before { background:var(--surface-sub); border:1px solid var(--line); }
.wms-ba__col--after  { background:var(--surface); border:1px solid var(--fg-waste-200); box-shadow:var(--wms-soft-shadow); }
.wms-ba__label {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--sp-4);
  font-family:var(--font-num); font-size:14px; font-weight:700; letter-spacing:.08em;
}
.wms-ba__col--before .wms-ba__label { color:var(--ink-muted); }
.wms-ba__col--after  .wms-ba__label { color:var(--fg-waste-700); }
.wms-ba__label span { font-family:var(--font); font-size:13px; letter-spacing:0; font-weight:500; }
/* BEFORE／AFTERのイラスト。左右で同じ大きさ・同じ位置に置き、差が状態だけになるようにする */
.wms-ba__ill { display:block; width:100%; max-width:168px; margin:4px auto 20px; }
.wms-ba__ill img { display:block; width:100%; height:auto; }
.wms-ba__list { display:flex; flex-direction:column; gap:12px; }
.wms-ba__list li { display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.8; }
.wms-ba__col--before .wms-ba__list li { color:var(--ink-muted); }
.wms-ba__col--after  .wms-ba__list li { color:var(--ink); }
/* 現状＝中黒／整えた後＝ミントの丸チェック（TOPの .sa-issue__check と同じ作り） */
.wms-ba__col--before .wms-ba__list li::before {
  content:""; flex:none; width:7px; height:7px; margin-top:9px; border-radius:50%; background:var(--line-strong);
}
/* 整えた後のチェックは、TOPの課題リストと同じ部品（.sa-issue__check）を
   マークアップ側に置いて使う。位置だけ本文1行目の中心に合わせる */
.wms-ba__col--after .wms-ba__list .sa-issue__check { margin-top:5px; }
/* 中央の送り矢印 */
.wms-ba__arrow { display:flex; align-items:center; justify-content:center; }
.wms-ba__arrow::before {
  content:""; width:0; height:0;
  border:11px solid transparent; border-left-color:var(--fg-waste-400); border-right:0;
}
.wms-ba__sum {
  margin-top:var(--sp-6); padding:20px 24px; border-radius:var(--r-lg);
  background:var(--fg-waste-50); border:1px solid var(--fg-waste-200);
  font-size:16px; line-height:1.9; color:var(--ink);
}

/* =============================================================================
   7. 支援内容カード（目的別グルーピング）
   -----------------------------------------------------------------------------
   「得られる状態（目的）」を小さなラベルで先に置き、その根拠として
   サービス名＋実務内容を続ける。1枚目だけを基盤として広く取り、
   残りは同じ強さのカードで並べる（すべてを同格にしない）。
   ========================================================================== */
.wms-support { display:flex; flex-direction:column; gap:var(--wms-gap); }
/* 基盤カード（クラウドでの一元管理）。横長で、地色・枠線・影は 02〜04（.wms-svc）と
   同じにする。基盤であることは幅と見出しサイズだけで示し、面では差を付けない */
.wms-feature {
  display:flex; align-items:flex-start; gap:28px;
  padding:32px; border-radius:var(--fg-radius-card);
  background:var(--surface);
  border:1px solid var(--fg-waste-200); box-shadow:var(--wms-card-shadow);
}
/* 基盤カードのイラスト。円形アイコンより大きく取り、01が中心であることを示す */
.wms-feature__ill { flex:none; display:block; width:180px; }
.wms-feature__ill img { display:block; width:100%; height:auto; }
.wms-feature__body { flex:1 1 auto; min-width:0; }

/* 基盤カード（01）の説明文の下に置く吹き出し（Figma node 823:2）。
   01の一元管理が効く一番強い場面を、説明の続きとしてカード内に1枚だけ立てる。
   枠線はFigmaの #3DEBB8（旧 Circular Mint 400）を現行トークンへ読み替え。
   地はFigmaでは #F0FBF7 だが、このセクションの地（--wm-pale）と同値になるので白に置く。
   三角はこのCSSで描く（他の送り三角と同じ作り方） */
.wms-guard {
  position:relative; display:flex; align-items:center; gap:20px;
  margin-top:24px; padding:20px 24px; border-radius:var(--r-lg);
  background:var(--surface); border:2px solid var(--fg-waste-400);
}
/* 吹き出しの三角。45度回した正方形の上半分を出し、左上の2辺を枠線と同じ線にする
   （下半分は吹き出しの地と同色で重なるので、枠線を横切らずにつながって見える） */
.wms-guard::before {
  content:""; position:absolute; left:32px; top:-11px;
  width:20px; height:20px; transform:rotate(45deg);
  background:var(--surface);
  border-left:2px solid var(--fg-waste-400);
  border-top:2px solid var(--fg-waste-400);
  border-top-left-radius:var(--r-sm);
}
.wms-guard__ico { flex:none; display:block; width:56px; height:56px; }
.wms-guard__body { flex:1 1 auto; min-width:0; }
.wms-guard__t { font-size:18px; font-weight:700; line-height:1.5; color:var(--ink); }
.wms-guard__d { margin-top:8px; font-size:16px; line-height:1.7; color:var(--ink-body); }

/* サービス名に添える対象システムの補足（小さく1行） */
.wms-svc__t-sub { display:block; margin-top:4px; font-size:12px; font-weight:500; line-height:1.7; color:var(--ink-muted); }

/* 目的ラベル → サービス名 → 説明。カード・基盤カード共通の字組 */
.wms-purpose {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; line-height:1.7; color:var(--fg-waste-800);
}
.wms-purpose__no { font-family:var(--font-num); font-size:12px; letter-spacing:.08em; color:var(--fg-waste-600); }
.wms-purpose__no::after { content:""; display:inline-block; width:14px; height:1px; margin-inline:6px 0; vertical-align:middle; background:var(--fg-waste-300); }
.wms-svc__t { margin-top:8px; font-size:22px; font-weight:700; line-height:1.5; color:var(--ink); }
.wms-svc__d { margin-top:10px; font-size:15px; line-height:1.9; color:var(--ink-body); }
.wms-feature .wms-svc__t { font-size:24px; }

/* 02以降のカード。項目数に合わせて2列／3列を選ぶ（1枚だけ余る並びを作らない） */
.wms-svcs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--wms-gap); }
.wms-svcs--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.wms-svc {
  padding:28px; background:var(--surface);
  border:1px solid var(--fg-waste-200); border-radius:var(--fg-radius-card);
  box-shadow:var(--wms-card-shadow);
}
/* 02〜05のイラスト。目的ラベルの上に置き、サービス名より前に出ないよう小さく扱う */
.wms-svc__ill { display:block; width:120px; margin:0 auto 12px; }
.wms-svc__ill img { display:block; width:100%; height:auto; }
.wms-svc__ill.ph { display:flex; aspect-ratio:1 / 1; padding:8px; font-size:11px; line-height:1.5; }
.wms-svc__ill.ph small { display:block; margin-top:4px; font-size:10px; }

/* =============================================================================
   8. 実現できること／活用シーン（見出し＋説明の等格カード）
   -----------------------------------------------------------------------------
   支援内容カードより一段弱い扱い。枠線のみで影は持たせない。
   ========================================================================== */
.wms-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }
.wms-cards--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.wms-card {
  display:flex; flex-direction:column; gap:10px;
  padding:24px; background:var(--wm-pale);
  border:1px solid var(--wm-line); border-radius:var(--fg-radius-card);
}
.wm-sec--tint .wms-card { background:var(--surface); }
.wms-card__lbl {
  font-family:var(--font-num); font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--fg-waste-700);
}
/* 部門名などの和文ラベル */
.wms-card__tag {
  align-self:flex-start; padding:3px 10px; border-radius:var(--r-full);
  background:var(--fg-waste-50); border:1px solid var(--fg-waste-200);
  font-size:12px; font-weight:700; line-height:1.7; color:var(--fg-waste-800);
}
.wms-card__t { font-size:17px; font-weight:700; line-height:1.6; color:var(--ink); }
.wms-card__d { font-size:14px; line-height:1.9; color:var(--ink-body); }

/* =============================================================================
   9. データ集約フロー（各拠点 → 共通基盤 → 可視化 → 報告・改善）
   -----------------------------------------------------------------------------
   4段の関係を「送り矢印つきの横並び」で示す。4枚は同じ扱い（白面）にして、
   段の違いは番号と送り矢印だけで示す。SPは縦積みで順序を保つ。
   ========================================================================== */
.wms-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.wms-flow__stage {
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding:24px 20px; border-radius:var(--fg-radius-card);
  background:var(--surface); border:1px solid var(--fg-waste-200);
  box-shadow:var(--wms-card-shadow);
}
.wms-flow__stage + .wms-flow__stage::before {
  content:""; position:absolute; left:-22px; top:50%; transform:translateY(-50%);
  width:0; height:0; border:8px solid transparent; border-left-color:var(--fg-waste-400); border-right:0;
}
.wms-flow__no {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--fg-waste-500);
  font-family:var(--font-num); font-size:12px; font-weight:700; line-height:1; color:var(--fg-canvas);
}
.wms-flow__t { font-size:17px; font-weight:700; line-height:1.6; color:var(--ink); }
.wms-flow__d { font-size:13px; line-height:1.8; color:var(--ink-body); }
/* 段の中で扱う情報の内訳。読み流せる強さに落とす */
.wms-flow__items { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.wms-flow__items li {
  padding:2px 8px; border-radius:var(--r-sm);
  background:var(--fg-waste-50); font-size:11px; line-height:1.8; color:var(--fg-waste-900);
}

/* =============================================================================
   10. ダッシュボード紹介
   ========================================================================== */
.wms-dash {
  display:flex; align-items:center; gap:40px;
  padding:32px; border-radius:var(--fg-radius-card);
  background:var(--surface); border:1px solid var(--fg-waste-200);
  box-shadow:var(--wms-soft-shadow);
}
.wms-dash__visual {
  flex:none; width:400px; padding:20px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface) 0%, var(--fg-waste-100) 100%);
}
.wms-dash__visual picture { display:block; }
.wms-dash__visual img { display:block; width:100%; height:auto; }
.wms-dash__body { flex:1 1 auto; min-width:0; }
.wms-dash__feats { display:flex; flex-direction:column; gap:14px; margin-top:var(--sp-5); }
.wms-dash__feats li { display:flex; align-items:flex-start; gap:10px; }
.wms-dash__feats li::before {
  content:""; flex:none; width:8px; height:8px; margin-top:9px; border-radius:50%;
  background:var(--fg-waste-500);
}
.wms-dash__ft { font-size:15px; font-weight:700; line-height:1.7; color:var(--ink); }
.wms-dash__fd { display:block; font-size:14px; font-weight:400; line-height:1.9; color:var(--ink-body); }

/* =============================================================================
   10b. 標準化の進め方（ステップの右にイラストを添える）
   ========================================================================== */
.wms-process { display:flex; align-items:center; gap:var(--sp-7); }
.wms-process .wm-steps { flex:1 1 auto; min-width:0; }
.wms-process__ill { flex:none; display:block; width:340px; }
.wms-process__ill img { display:block; width:100%; height:auto; }

/* =============================================================================
   11. 役割の変化（補足の扱い。カードにせず低い帯で置く）
   ========================================================================== */
/* 見出し＋リードの右にイラスト。メッセージ帯はその下で幅いっぱいに使う */
.wms-role { display:flex; align-items:center; gap:var(--sp-7); }
.wms-role .sec-head { flex:1 1 auto; min-width:0; margin-bottom:0; }
.wms-role__ill { flex:none; display:block; width:300px; }
.wms-role__ill img { display:block; width:100%; height:auto; }
/* 2段（これまで／これから）＋矢印の対比から、1文のメッセージへ変更。
   文が主役なので装飾は足さず、カードの地・枠線・角丸だけを踏襲する */
.wms-shift {
  display:flex; align-items:center; justify-content:center;
  padding:40px 32px; border-radius:var(--fg-radius-card);
  background:var(--wm-pale); border:1px solid var(--wm-line);
}
.wm-sec--tint .wms-shift { background:var(--surface); }
.wms-shift__v {
  max-width:46em; text-align:center;
  font-size:18px; font-weight:700; line-height:2; color:var(--ink);
}
/* 折り返しても「へ」だけが行に取り残されないよう、後段はひとかたまりで送る */
.wms-shift__v .u-nowrap { white-space:nowrap; }

/* =============================================================================
   12. 関連サービス
   -----------------------------------------------------------------------------
   TOPのピックアップカード（.sa-pickup）をそのまま3列で使う。
   ========================================================================== */
/* カードはTOPのピックアップ（.sa-pickup）そのまま。寸法・サムネの扱いは
   env-mgt.css の定義に任せ、ここは並べる器（TOPの .sa-pickups__list と同じ）だけ持つ */
.wms-rel { display:flex; align-items:stretch; gap:16px; }
/* サムネイル未取得のカードは .ph を受け皿に載せる。
   env-mgt.css の .sa-pickup__thumb が display:block を持つので、ここで戻す */
.wms-rel .sa-pickup__thumb.ph { display:flex; border-radius:8px; }

/* =============================================================================
   13. もう1ページへの送り
   -----------------------------------------------------------------------------
   2ページは「運用を整える」→「データを活かす」の関係なので、
   前後の関係が分かる形で相互に置く。TOPの資源循環パネルより控えめに。
   ========================================================================== */
.wms-next {
  /* Figma node 827:2 のグラデーション。既存トークンに該当する段がないので、
     この帯だけのローカル値として持つ（Figmaの from／to と位置をそのまま） */
  --next-grad-from:#0a9873;   /* 白と 3.64:1 */
  --next-grad-to:#0cc990;     /* 白と 2.13:1。白文字はAA（4.5:1）を満たさない */
  display:flex; align-items:center; gap:32px;
  padding:36px; border-radius:24px;
  background:linear-gradient(180deg, var(--next-grad-from) 11.29%, var(--next-grad-to) 127.57%);
  border:1px solid rgba(255,255,255,.22);
}
.wms-next__body { flex:1 1 auto; min-width:0; }
.wms-next__k {
  font-family:var(--font-num); font-size:13px; font-weight:700; letter-spacing:.08em;
  color:rgba(255,255,255,.88);
}
.wms-next__t { margin-top:8px; font-size:22px; font-weight:700; line-height:1.5; color:var(--fg-canvas); }
.wms-next__d { margin-top:10px; font-size:15px; line-height:1.9; color:var(--fg-canvas); }
.wms-next__act { flex:none; }

/* =============================================================================
   13-b. 最終CTA
   -----------------------------------------------------------------------------
   部品はTOP S11（.jcta2--waste ／ .cta-card--solo）と同一。
   原稿のボタン文言（「廃棄物管理について相談する」「サービス資料を請求する」）が
   TOPの「お問い合わせ」「資料請求」より長く、440pxを2分割すると2行に折れるので、
   このページだけボタンを縦に積む。
   2026-09-11：資料請求ページを「その場でダウンロード」から「受付後に担当者が送付」へ
   変更したため、ボタン文言も「ダウンロードする」→「請求する」に合わせた。
   ========================================================================== */
.wms-cta .cta-card--solo .cta-card__btns { flex-direction:column; gap:10px; }

/* =============================================================================
   14. 導入事例（TOPと同じ .carousel ／ .casecard を使う）
   -----------------------------------------------------------------------------
   env-mgt.css が .wm-sec 配下の余白とミント化をすでに持っているので、
   ここでは事例カードの補助表示（課題タグの並び）と、カード幅だけ足す。
   ========================================================================== */
/* カードの寸法はサービスプラン（design/env-mgt/plan/index.html）の事例カードに合わせる。
   あちらは .hc-grid--3（.jw 1280px を24pxアキで3分割）で1枚384pxなので、
   カルーセルの固定幅（design.css の 300px）をその値に置き換える */
.carousel__track--case > * { flex:0 0 384px; }
.wms-casetags { display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-4); }
.wms-casetags li {
  padding:3px 10px; border-radius:var(--r-full);
  background:var(--fg-waste-50); border:1px solid var(--fg-waste-200);
  font-size:12px; line-height:1.8; color:var(--fg-waste-800);
}

/* =============================================================================
   15. イラストのプレースホルダー（原稿確認中）
   -----------------------------------------------------------------------------
   2026-09-09：operation-standardization / group-management の2ページは原稿が
   未確定のため、イラストは差し替え前提で .ph に置き換えている（この2ページに
   デザインシステムが当たっていることだけを確認できる状態にする）。
   原稿とイラストが確定したら、このブロックごと削除して <picture> に戻す。
   受け皿の比率・位置は実素材と同じにして、レイアウトの検証結果が変わらないようにする。
   ========================================================================== */
/* ヒーロー・ダッシュボードは <picture> の入れ替えなので display の戻しは不要
   （.wms-hero__visual picture / .wms-dash__visual picture は要素セレクタのため
   span には当たらず、.ph の display:flex がそのまま効く） */
.wms-hero__visual .ph { aspect-ratio:3 / 2; }      /* support-01：720×480 */
.wms-hero__visual .ph--square { aspect-ratio:1 / 1; } /* support-02：1024×1024 */
.wms-dash__visual .ph { aspect-ratio:3 / 2; }      /* pickup-dashboard：480×320 */
/* 課題カードのサムネは 88px 角。.wms-issue__ill の display:block を戻したうえで、
   この幅に収まるよう字送りを詰める */
.wms-issue__ill.ph { display:flex; padding:4px; font-size:11px; line-height:1.5; }
.wms-issue__ill.ph small { margin-top:2px; font-size:10px; }

/* =============================================================================
   16. レスポンシブ
   -----------------------------------------------------------------------------
   PC 1920px / SP 390px の両端で成立させる。カード・図解は縮小せず、
   情報の順序を保ったまま1列へ組み替える。横スクロールは事例カルーセルのみ
   （TOPと同じ挙動。重要情報はカード内に収まっていて欠落しない）。
   ========================================================================== */
@media (max-width:1199px) {
  .wms-hero__visual { width:300px; padding:20px; }
  .wms-hero__visual--bare img { height:300px; }
  .wms-route { gap:22px; }
  .wms-route__step + .wms-route__step::before { left:-17px; }
  .wms-scope__track { gap:32px; }
  .wms-scope__steps { gap:22px; }
  .wms-scope__step + .wms-scope__step::before { left:-16px; }
  .wms-scope__zone--sub .wms-scope__step:first-child::before { left:-25px; }
  .wms-flow { gap:26px; }
  .wms-flow__stage + .wms-flow__stage::before { left:-19px; }
  .wms-dash__visual { width:320px; }
}

@media (max-width:1023px) {
  /* ヒーロー：イラストを本文の上へ回す（TOPのFVと同じ切り替え方） */
  .wms-hero__row { flex-direction:column; align-items:stretch; gap:var(--sp-5); }
  .wms-hero__visual { order:-1; width:100%; max-width:360px; align-self:center; }
  /* 縦積みでは横幅に合わせる（高さ基準をやめる） */
  .wms-hero .wms-hero__visual--bare { width:100%; max-width:360px; }
  .wms-hero__visual--bare img { width:100%; height:auto; }
  .wms-hero__lead { max-width:none; }

  /* 三位一体：見出しと図を縦積みに（.wm-approach-head と同じ切り替え方） */
  .wms-trio__head { flex-direction:column; align-items:stretch; gap:var(--sp-5); }
  .wms-trio__head .wms-venn { width:100%; max-width:520px; align-self:center; }

  /* 処理ルート：5段を縦に。矢印も下向きへ */
  .wms-route { grid-template-columns:minmax(0,1fr); gap:26px; }
  .wms-route__step + .wms-route__step::before {
    left:50%; top:-13px; transform:translateX(-50%);
    border:7px solid transparent; border-top-color:var(--fg-waste-400); border-bottom:0;
  }

  /* 責任範囲の図：2つのゾーンを縦に積み、各工程も縦へ。
     ゾーンの囲み＋チップは縦積みでも範囲を示せるのでそのまま使う */
  .wms-scope__track { grid-template-columns:minmax(0,1fr); gap:30px; }
  .wms-scope__zone--core .wms-scope__steps,
  .wms-scope__zone--sub .wms-scope__steps { grid-template-columns:minmax(0,1fr); gap:26px; }
  .wms-scope__step { min-height:0; }
  .wms-scope__step + .wms-scope__step::before,
  .wms-scope__zone--sub .wms-scope__step:first-child::before {
    left:50%; top:-14px; transform:translateX(-50%);
    border:8px solid transparent; border-top-color:var(--fg-waste-500); border-bottom:0;
  }
  .wms-scope__zone--sub .wms-scope__step:first-child::before {
    top:-15px; border-top-color:var(--fg-waste-200);
  }
  /* 責任範囲のラベルは2行になるので、レールを細く保って折り返しを防ぐ */
  .wms-scope__rail { flex:1 1 20px; }

  /* Before／After：縦積み。矢印も下向きへ */
  .wms-ba { grid-template-columns:minmax(0,1fr); }
  .wms-ba__arrow { height:44px; }
  .wms-ba__arrow::before { border:11px solid transparent; border-top-color:var(--fg-waste-400); border-bottom:0; }

  /* 支援内容：基盤カードは縦組み、02以降は1列 */
  .wms-feature { flex-direction:column; gap:20px; padding:28px; }
  .wms-feature__ill { width:200px; align-self:center; }
  .wms-svcs, .wms-svcs--3 { grid-template-columns:minmax(0,1fr); }

  /* 標準化の進め方・役割の変化：イラストを本文の下へ回す */
  .wms-process, .wms-role { flex-direction:column; gap:var(--sp-5); }
  .wms-process__ill, .wms-role__ill { width:100%; max-width:320px; }
  .wms-role .sec-head { margin-bottom:0; }

  /* 実現できること・活用シーンは2列を保つ（4列は文字が細くなりすぎる） */
  .wms-cards--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* データ集約フロー：4段を縦に。矢印も下向きへ */
  .wms-flow { grid-template-columns:minmax(0,1fr); gap:30px; }
  .wms-flow__stage + .wms-flow__stage::before {
    left:50%; top:-15px; transform:translateX(-50%);
    border:8px solid transparent; border-top-color:var(--fg-waste-400); border-bottom:0;
  }

  /* ダッシュボード：イラストを本文の上へ */
  .wms-dash { flex-direction:column; align-items:stretch; gap:24px; padding:28px; }
  .wms-dash__visual { width:100%; max-width:420px; align-self:center; }

  /* 役割の変化 */
  .wms-shift { padding:32px 24px; }

  /* 関連サービス・次ページ導線 */
  .wms-rel { flex-direction:column; }
  .wms-next { flex-direction:column; align-items:stretch; gap:24px; }
  .wms-next__act .pill-btn { width:100%; }
}

@media (max-width:767px) {
  :root { --wms-gap:16px; }

  /* 見出しの改行位置はPCの行長（H1最大44px／H2最大44px）に合わせて入れている。
     SP（H1・H2ともに30px・1行11文字前後）で同じ位置に入れると「を、」「が、」だけが
     行に残るため、指定改行は解除して画面幅なりの折り返しに任せる。
     TOPも同じ考え方（.wm-fv__lead br / .wm-issue__t br を解除）で組んでいる */
  .wms-hero__body .hc-hero__title br,
  .wm-sec .sec-head__title br { display:none; }
  /* SP専用の改行位置。自然折り返しだと行末に2〜3文字だけ残る見出しにだけ入れる */
  .wms-hero__body .hc-hero__title br.wms-br-sp { display:inline; }

  /* ヒーロー：H1・リード・ボタンをSP寸法へ。ボタンは全幅 */
  .hc-hero { padding-bottom:calc(var(--fg-radius-block) + 40px); }
  .hc-hero__head { padding-top:24px; }
  .wms-hero__lead { font-size:15px; }
  .wms-hero__actions { margin-top:var(--sp-5); flex-direction:column; gap:var(--sp-3); }
  .wms-hero__actions .cvbtn { flex:none; width:100%; }
  .wms-hero__visual { padding:16px; }

  /* 課題カードは1列。イラストは残して視線の手がかりにする */
  .wms-issues { grid-template-columns:minmax(0,1fr); }
  .wms-issue { gap:14px; padding:20px; }
  .wms-issue__ill { width:64px; }
  .wms-issue__t { font-size:16px; }
  .wms-issue__d { font-size:13.5px; }

  .wms-text { font-size:15px; }

  /* 三位一体 */
  .wms-trio__base { margin-top:44px; padding:16px 18px; font-size:14px; text-align:left; }
  .wms-trio__base::before { left:32px; }

  /* 一元管理の吹き出し：アイコンと文章を縦積みにする */
  .wms-guard { flex-direction:column; align-items:flex-start; gap:14px; padding:18px 20px; }
  .wms-guard__t { font-size:16px; }
  .wms-guard__d { font-size:14px; line-height:1.9; }

  /* 処理ルート */
  .wms-route { padding:18px; }
  .wms-route__step { padding:14px 12px; }

  /* 責任範囲の図 */
  .wms-scope { padding:20px 16px 18px; }
  .wms-scope__zone { padding:28px 14px 16px; }
  .wms-scope__zone-label { left:14px; font-size:12px; }
  .wms-scope__step { padding:14px 12px; }

  /* Before／After */
  .wms-ba__col { padding:20px; }
  .wms-ba__list li { font-size:14px; }
  .wms-ba__sum { padding:16px 18px; font-size:14px; }

  /* 支援内容 */
  .wms-feature { padding:20px; }
  .wms-feature .wms-svc__t { font-size:19px; }
  .wms-svc { padding:20px; }
  .wms-svc__t { font-size:18px; }
  .wms-svc__d { font-size:14px; }

  /* 実現できること・活用シーンは1列 */
  .wms-cards, .wms-cards--4 { grid-template-columns:minmax(0,1fr); }
  .wms-card { padding:20px; }

  /* データ集約フロー */
  .wms-flow__stage { padding:20px 18px; }

  /* ダッシュボード */
  .wms-dash { padding:20px; }
  .wms-dash__visual { padding:14px; }

  /* 役割の変化 */
  .wms-shift__v { font-size:16px; line-height:1.9; }

  /* 次ページ導線 */
  .wms-next { padding:20px; }
  .wms-next__t { font-size:19px; }

  .wms-note { padding:12px 14px; }
  .wms-act .pill-btn,
  .wms-next__act .pill-btn { width:100%; min-width:0; max-width:none; }

  /* CTAカードのボタンは、原稿のラベル（最長16文字）がSPのカード幅で1行に収まらない。
     左右の余白・アキと矢印前の余白を詰めて文字に幅を回し、
     それでも折れる場合は2行を均等に割る（行末に1文字だけ残さない） */
  .wms-cta .cvbtn { padding-inline:10px; gap:8px; }
  .wms-cta .cvbtn__pad { width:12px; }
  .wms-cta .cvbtn__txt,
  .wms-hero__actions .cvbtn__txt { text-wrap:balance; }
}