@charset "utf-8";
/* =============================================================================
   JEMS 廃棄物マネジメント｜料金・プラン デザイン
   -----------------------------------------------------------------------------
   対象 : /hub/env-mgt/plan/  料金・プラン（4プラン比較）
          （デザイン確認用の実体は design/env-mgt/plan/index.html）
          ワイヤーフレームは env-mgt/plan/index.html（P11）。変更しない

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

   テーマ : data-theme="waste"。色は --fg-waste-* / --wm-* を参照し、16進を直書きしない。

   ページ骨格:
            ヘッダー（廃マネTOPと同一）
            .hc-hero.pl-hero    パンくず＋ラベル＋H1＋リード＋CTA
            .hc-plate           白面。40px角丸でヒーローに40px重ねる
              .wm-sec …         本文セクション（TOP・サービス下層と同じ間隔・地色）
            .jcta2--waste       廃マネCTA（TOP S11 と同一）
            .jfooter2           フッター（TOP S12 と同一）
   ========================================================================== */

/* =============================================================================
   1. ページトークン ＋ 共通シェルのミント化
   -----------------------------------------------------------------------------
   common.css の .hc-* はJEMSグリーン固定なので、参照トークンだけミントへ差し替える。
   値はサービス下層2ページ（service.css）と同じ段に揃える。
   ========================================================================== */
:root {
  --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);

  /* セクション間隔。Figma（744:2 / 2026-09-11）で上下64pxに広げた */
  --wm-sec-gap:128px;

  /* 本ページ固有 */
  --pl-card-shadow:0 10px 22px rgba(10,78,61,.1);       /* プランカード（Figma 744:95） */
  --pl-card-shadow-rec:0 14px 28px rgba(7,107,77,.2);   /* おすすめカード（Figma 744:128） */
  --pl-box-shadow:0 8px 7px rgba(0,0,0,.05);            /* FAQの箱（Figma 744:560） */
  --pl-gap:20px;
  /* 比較表の項目列。ここだけ幅を持たせ、プラン列は残りを4等分する */
  --pl-cmp-head:34%;

  /* --- Figma 744:2（2026-09-11）で足された面・罫線 -------------------------------
     既存トークンに該当する段が無い中間色。デザインシステムへ昇格させるかは
     Figmaスタイルの再整備とあわせて判断する（現状はこのページだけで使う） */
  --pl-target-bg:#f1f9f7;      /* プランカードの対象欄（--fg-waste-50 より灰寄り） */
  --pl-target-line:#d6f0e8;
  --pl-target-bg-rec:#e0fbf2;  /* おすすめカードの対象欄 */
  --pl-target-line-rec:#6bd6b2;
  --pl-cmp-head-bg:#fcfdfd;    /* 比較表の項目列 */
  --pl-cmp-std-bg:#f4fdfa;     /* 比較表のおすすめ列（Standard） */
  --pl-cmp-group-bg:#edf6f3;   /* 分類行 */
  --pl-cmp-group-ink:#077865;
  --pl-cmp-group-line:#b8d1c9;
  --pl-cmp-line:#dae3e0;       /* 明細行の区切り */
  --pl-cmp-line-head:#d5d7d6;  /* 列見出しの下罫（2px） */
}

/* 白面プレートの先頭セクションは、角丸ぶん（40px）を足して天井との間を確保する。
   Figmaの実測は84px（＝44＋40）で、セクション間隔を広げたあともここだけ据え置き */
.hc-plate > .wm-sec:first-child { padding-top:84px; }
/* プレート最後のセクション（FAQ）はCTA帯の手前だけ16px広い（Figma 744:550） */
.hc-plate > .wm-sec:last-child { padding-bottom:calc(var(--wm-sec-gap) / 2 + 16px); }
/* 比較表のセクションは表が大きいぶん、前後と詰まって見えないよう余白を足していた
   （Figma 744:237／上下24px広い）。0911-10「余分な余白をとれないか」により、
   プランカードのCTAとの間が空きすぎる上側だけ標準の間隔へ戻し、下側は据え置く */
.pl-sec--wide { padding-block:calc(var(--wm-sec-gap) / 2) calc(var(--wm-sec-gap) / 2 + 24px); }

/* セクションH2のスケール（共通コンテンツ8画面＝common.css と同じ制御）
   -----------------------------------------------------------------------------
   design.css の .sec-head__title は事業トップ用のスケール（clamp 30〜44px）。
   下層ページのH1（.hc-hero__title＝clamp 30〜44px）と同値になるため、
   そのまま使うと PC・SP のどちらでも H1 とセクションH2 が並んで階層が崩れる。
   下層でH1のサイズレベルが一段下がる設計上、下層ページでは毎回起きる衝突なので、
   共通コンテンツと同じ流動値へ落として どの幅でも H1 ＞ セクションH2 の順序を保つ。
   ページ末のCTA帯（.jcta2__head）は全幅の帯で役割が違うため、共通コンテンツと
   同じく対象外にする（design.css のスケールのまま）。 */
.wm-sec .sec-head__title { font-size:clamp(24px, 2.2vw, 32px); line-height:1.4; letter-spacing:.02em; }

/* リード文は見出しから28px離す（Figma 744:89 ほか）。
   共通CSSの既定（12px）はリードを見出しの一部として詰める組みで、
   このページの見出しブロックより密。セクション単位で上書きする */
.wm-sec .sec-head__lead { margin-top:28px; }

/* 見出しと中身の間隔。共通CSSの .sec-head は下24pxしか持たないので、
   カード群・表の前だけ足す。隣接マージンは相殺されるので、ここの値がそのまま間隔になる。
   Figmaの実測は 導入事例・FAQ=24／比較表=40／プランカード=56 と段が分かれている */
.pl-body { margin-top:var(--sp-5); }
/* 凡例つきの比較表（Figma 744:251） */
.pl-body--lg { margin-top:40px; }
/* プランカード。リード文が2行あるぶん、他より広く取る（Figma 744:234） */
.pl-body--xl { margin-top:56px; }

/* セクション内の導線。1本でも中央に置いて「次はここ」を明確にする */
.pl-act { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-4); margin-top:48px; }
/* プランカードの直後だけ広い（Figma 744:227）。
   0911-10「余分な余白をとれないか」により 80px → 56px */
.pl-act--lg { margin-top:56px; }
/* .cvbtn は既定で flex:1 1 0 で伸びる。単独で置くので内容なりの幅に戻す */
.pl-act .cvbtn {
  flex:0 0 auto; min-width:280px; min-height:56px; padding-inline:12px;
  --cta-fill:var(--fg-waste-600); --cta-line:var(--fg-waste-700); --cta-ink:var(--fg-waste-700);
}
.pl-act .cvbtn__txt { flex:none; padding-inline:8px; font-size:15px; }
/* ラベルが長い遷移ボタン（.pill-btn は幅254px固定）は内容で幅を決める */
.pl-act .pill-btn { width:auto; min-width:280px; min-height:56px; }
.pl-act .pill-btn > span { flex:none; padding-inline:8px; }

/* =============================================================================
   2. ページヒーロー（.hc-hero の料金・プラン版）
   -----------------------------------------------------------------------------
   common.css のヒーローは地色 --fg-gray のフラットな面。ここはTOPのFV・サービス
   下層と同じ「白基調＋ミントの淡いにじみ」に置き換える。
   料金・プランは支給イラストを持たないので1カラム。H1は 44px 上限（common.css のまま）。
   2026-09-11（Figma 744:34）：和文ラベルと料金の注記を外し、地色を白へ落とす
   グラデーションから淡いミントのベタ（#f6fffc）へ。プレートは余白を挟まず重ねる。
   ========================================================================== */
.pl-hero {
  /* プレートの角丸ぶんだけを残し、ヒーロー側の下余白は持たない */
  padding-bottom:var(--fg-radius-block);
  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%),
    #f6fffc;
}
.pl-hero__lead { margin-top:var(--sp-5); font-size:16px; line-height:1.9; color:var(--ink-body); max-width:40em; }
.pl-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);
}
.pl-hero__actions .cvbtn { flex:0 0 auto; min-width:280px; min-height:56px; padding-inline:12px; }
.pl-hero__actions .cvbtn__txt { flex:none; padding-inline:8px; font-size:15px; }

/* =============================================================================
   3. 4つのプランカード
   -----------------------------------------------------------------------------
   カードは「プラン名・よみ → 主な対応内容 → 対象」で4枚とも同じ順に組む。
   対象はカード下端に揃えるので、4枚を横に見比べたときに行が揃う。
   プラン別の問い合わせボタンは持たない（4本とも遷移先が同じで冗長なため、
   カード群の直下の1本へ集約する）。
   2026-09-11（Figma 744:94）：通し番号を外し、Standard を「おすすめ」として
   1枚だけ強める（枠線・影・上端のバー・対象欄の面・バッジ・カードの高さ）。
   ========================================================================== */
.pl-plans { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--pl-gap); align-items:stretch; }
.pl-plan {
  position:relative; overflow:hidden;
  /* 対象欄をカード下端へ落とすため、上半分（名前＋対応内容）と対象で分ける */
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  padding:28px 24px; background:var(--surface);
  border:1px solid var(--fg-waste-200); border-radius:var(--fg-radius-card);
  box-shadow:var(--pl-card-shadow);
}
.pl-plan__head { display:flex; flex-direction:column; gap:24px; }
/* 上端のミントの線。4枚を1つのまとまりとして見せる */
.pl-plan::before {
  content:""; position:absolute; left:0; top:0; width:100%; height:5px;
  background:var(--fg-waste-600); opacity:.34;
}
/* プラン名とよみは縦に積む。よみを同じ行に置くと、名前が長いプラン
   （Standard Plus）だけ2行になり、4枚で対象・対応内容の行位置がずれる */
.pl-plan__name {
  display:flex; flex-direction:column; gap:2px;
  font-family:var(--font-num); font-size:24px; font-weight:700; line-height:1.3;
  color:var(--fg-waste-700);
}
.pl-plan__kana { font-family:var(--font); font-size:12px; font-weight:500; line-height:1.6; color:var(--ink-muted); }
/* 対象。カード下端に置き、淡い面と枠線で本文と分ける */
.pl-plan__target {
  padding:10px 12px; border-radius:var(--r-md);
  background:var(--pl-target-bg); border:1px solid var(--pl-target-line);
  font-size:13px; line-height:1.8; color:var(--ink-body);
}
.pl-plan__k { font-size:12px; font-weight:700; line-height:1.7; color:var(--ink-muted); }
.pl-plan__items { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.pl-plan__items li { display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.8; color:var(--ink-body); }
.pl-plan__items li::before {
  content:""; flex:none; width:7px; height:7px; margin-top:9px; border-radius:50%;
  background:var(--fg-waste-500);
}

/* --- おすすめ（Standard） -----------------------------------------------------
   上下に12pxずつはみ出させて1枚だけ背を高くする。高さを直に指定すると
   文言が増えたときに中身がはみ出すので、余白で差を付ける */
.pl-plan--rec {
  margin-block:-12px;
  border-color:var(--fg-waste-700);
  box-shadow:var(--pl-card-shadow-rec);
}
.pl-plan--rec::before { height:8px; opacity:1; }
.pl-plan--rec .pl-plan__target {
  background:var(--pl-target-bg-rec); border-color:var(--pl-target-line-rec);
}
/* バッジだけはミントではなくブルー（Figma 753:6 / 2026-09-11）。
   ページ全体がミントなので、同系色では「おすすめ」が沈む。
   #34B1FD はコード側では Picton Blue 400（--fg-circ-400）。
   Figmaのスタイル名が JEMS/Waste/... なのはテーマ入替（2026-09-06）前の名残 */
.pl-plan__badge {
  position:absolute; right:24px; top:17px;
  padding:7px 14px; border-radius:var(--r-full);
  background:var(--fg-circ-400);
  font-size:12px; font-weight:700; line-height:1.4; color:var(--fg-canvas);
}
/* バッジと重ならないよう、強調カードだけ名前の右を空ける。
   0911-3 でラベルが「おすすめ」→「基本プラン」と1文字増えたぶん広げた */
.pl-plan--rec .pl-plan__name { padding-right:96px; }

/* =============================================================================
   4. 対応範囲の比較表
   -----------------------------------------------------------------------------
   プランカードで一次判断した利用者が詳細を確認する二次情報。
   ・比較項目は分類ごとにまとめ、凡例は表の直前に置く
   ・PCは列見出し（プラン名）と項目列を固定表示する
   ・SPは横スクロールさせず、プラン別のブロック（.pl-spcmp）へ組み替える
   ・記号は●／○／－の文字ではなく図形で描き、読み上げ用の語を別に持たせる
   ========================================================================== */
.pl-legend {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px;
  margin-bottom:var(--sp-4); font-size:12px; line-height:1.8; color:var(--ink-muted);
}
.pl-legend__item { display:inline-flex; align-items:center; gap:8px; }

/* 記号。塗り＝含まれる／輪郭＝オプション／横線＝対応範囲外。
   意味を持つ図形なので、地色（白）との比が3:1を下回らない段を使う
   （ミント600は白と2.2:1で足りない。700＝4.3:1／--ink-muted＝5.6:1）。
   セルには読み上げ用の語（.u-vh）も併記していて、色だけには依存させていない */
.pl-mark { display:inline-block; flex:none; }
.pl-mark--yes { width:13px; height:13px; border-radius:50%; background:var(--fg-waste-700); }
.pl-mark--opt { width:13px; height:13px; border-radius:50%; border:2px solid var(--fg-waste-700); }
.pl-mark--no  { width:13px; height:2px; background:var(--ink-muted); }

/* 表本体。sticky を効かせるため border-collapse は separate のままにし、
   罫線はセルの下で引く。
   列見出しをビューポート基準で固定するため、表とその外側にスクロールコンテナ
   （overflow:auto / hidden）を作らない。767px以下はプラン別ブロックへ
   組み替えるので、横スクロールは不要。
   2026-09-11（Figma 744:266）：外枠と角丸を外し、行の罫線だけで読ませる形へ。
   おすすめ列（Standard）は列ごと淡く敷いて、プランカードの強調と対応させる */
.pl-cmptable {
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface);
}
.pl-cmptable th,
.pl-cmptable td {
  padding:14px 16px 15px; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--pl-cmp-line);
  font-size:14px; line-height:1.7;
}

/* 列見出し（プラン名）。2段目ナビ（56px）の下に固定する */
.pl-cmptable thead th {
  position:sticky; top:var(--header-h); z-index:2;
  background:var(--surface); border-bottom:2px solid var(--pl-cmp-line-head);
  padding-bottom:16px;
  font-size:15px; font-weight:700; line-height:1.6; color:var(--ink); text-align:center;
  white-space:nowrap;
}
.pl-cmptable thead th:first-child {
  /* 左上の角は縦横どちらにも固定するので、いちばん手前に置く */
  position:sticky; left:0; z-index:3;
  text-align:left; width:var(--pl-cmp-head); background:var(--pl-cmp-head-bg);
}

/* 分類の行。表を読み進める区切り。面＋行頭のバーで示す */
.pl-cmptable .pl-cmpgroup th {
  position:relative; left:0;
  padding-left:20px;
  background:var(--pl-cmp-group-bg); border-bottom-color:var(--pl-cmp-group-line);
  font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--pl-cmp-group-ink);
}
.pl-cmptable .pl-cmpgroup th::before {
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  width:4px; height:22px; border-radius:2px; background:var(--fg-waste-600);
}

/* 項目列。横に長い表でも項目名を見失わないよう固定する。
   分類行の下にぶら下がることが分かるよう、32pxだけ字下げする */
.pl-cmptable tbody th {
  position:sticky; left:0; z-index:1;
  padding-left:32px;
  background:var(--pl-cmp-head-bg);
  font-size:14px; font-weight:500; line-height:1.7; color:var(--ink);
}
/* 項目名に添える補足（0911-4）。項目名は短く保ち、正式な機能名は一段落として
   小さく下へ回す。PC表・SPブロックのどちらでも同じ見え方にする */
.pl-cmp-sub {
  display:block; margin-top:2px;
  font-size:12px; font-weight:400; line-height:1.6; color:var(--ink-muted);
}
/* 「？」ツールチップ（0911-4・8）
   -----------------------------------------------------------------------------
   項目名の右に「？」を置き、ホバー（PC）／フォーカス（キーボード・タップ）で
   対象のすぐ下にふきだしを出す。補助的な説明だけを載せる前提で、
   本文は短く保つ（長文はSP側の開閉へ回す）。
   ・ふきだしは pointer-events:none。中身は操作対象にしないので、
     カーソルが乗って点滅する事故を避ける
   ・表の外側にスクロールコンテナを作っていないので、セルからはみ出しても
     切られない。ただし項目列は sticky（z-index:1）で行どうしが重なり順を
     持つため、出している行だけ手前へ上げる（下の :has ルール）
   ・画面外へ出ないよう幅は 280px と画面幅のどちらか狭いほうで止める
   ========================================================================== */
.pl-tip { position:relative; display:inline-flex; vertical-align:middle; margin-left:6px; }
.pl-tip__btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; padding:0; border-radius:50%;
  border:1px solid var(--fg-waste-700); background:var(--surface);
  font-family:inherit; font-size:11px; font-weight:700; line-height:1;
  color:var(--fg-waste-700); cursor:pointer;
}
.pl-tip__btn:hover { background:var(--fg-waste-700); color:var(--fg-canvas); }
.pl-tip__btn:focus-visible { outline:2px solid var(--fg-waste-700); outline-offset:2px; }
.pl-tip__box {
  position:absolute; left:50%; top:calc(100% + 10px); translate:-50% 0; z-index:4;
  width:max-content; max-width:min(280px, calc(100vw - 48px));
  padding:10px 14px; border-radius:8px;
  background:var(--ink); color:var(--fg-canvas);
  font-size:12px; font-weight:400; line-height:1.7; text-align:left;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, visibility 0s linear .15s;
}
/* 対象範囲を列挙するふきだし（JEMSクラウドサービス）は項目数が多いので広く取る */
.pl-tip__box--wide { max-width:min(400px, calc(100vw - 48px)); }
.pl-tip__lead { display:block; }
.pl-tip__list { display:block; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.22); }
.pl-tip__list > span { display:block; padding-left:12px; text-indent:-12px; }
.pl-tip__list > span::before { content:"・"; }
/* 対象を指す三角。ふきだしと同じ色で上辺の中央に出す */
.pl-tip__box::before {
  content:""; position:absolute; left:50%; bottom:100%; translate:-50% 0;
  border:6px solid transparent; border-bottom-color:var(--ink);
}
.pl-tip__btn:hover + .pl-tip__box,
.pl-tip__btn:focus-visible + .pl-tip__box {
  opacity:1; visibility:visible; transition-delay:0s;
}
/* 出している行だけ、下の行の項目列より手前へ */
.pl-cmptable tbody th:has(.pl-tip__btn:hover),
.pl-cmptable tbody th:has(.pl-tip__btn:focus-visible) { z-index:4; }

/* 「？」で開く補足（SP用）
   -----------------------------------------------------------------------------
   SPはホバーが無く、ふきだしを重ねてもカード内に収まらない。
   同じ内容をFAQと同じ details でその場に開く形に置き換える */
.pl-note > summary {
  display:flex; align-items:center; gap:6px;
  cursor:pointer; list-style:none;
}
.pl-note > summary::-webkit-details-marker { display:none; }
.pl-note__mark {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  border:1px solid var(--fg-waste-700); background:var(--surface);
  font-size:11px; font-weight:700; line-height:1; color:var(--fg-waste-700);
}
.pl-note[open] .pl-note__mark { background:var(--fg-waste-700); color:var(--fg-canvas); }
.pl-note > summary:focus-visible { outline:2px solid var(--fg-waste-700); outline-offset:2px; border-radius:4px; }
.pl-note__body {
  margin-top:6px;
  font-size:12px; font-weight:400; line-height:1.7; color:var(--ink-muted);
}
.pl-note__list { margin-top:6px; font-size:12px; line-height:1.7; color:var(--ink-muted); }
.pl-note__list > li { padding-left:12px; text-indent:-12px; }
.pl-note__list > li::before { content:"・"; }
/* SPはピル列の下に置くので、見出し（追加できる支援）と同じ幅で左に揃える */
.pl-note--sp { margin-top:12px; }
.pl-note--sp > summary { font-size:12px; font-weight:700; color:var(--fg-waste-800); }

/* 記号のセル。中央に1つだけ置く */
.pl-cmptable td { text-align:center; background:var(--surface); }
.pl-cmptable td .pl-mark { vertical-align:middle; }
/* おすすめ列（3列目＝Standard）。行見出しを含めて数えるので、
   見出し行は3番目の th、明細行は3番目の td が Standard にあたる */
.pl-cmptable thead th:nth-child(3) { background:var(--pl-cmp-std-bg); color:var(--fg-waste-700); }
.pl-cmptable tbody td:nth-child(3) { background:var(--pl-cmp-std-bg); }

/* --- SP：プラン別ブロックへ組み替える（横スクロールさせない） --- */
.pl-spcmp { display:none; flex-direction:column; gap:16px; }
.pl-spplan {
  background:var(--surface); border:1px solid var(--fg-waste-200);
  border-radius:var(--fg-radius-card); box-shadow:var(--pl-card-shadow); overflow:hidden;
}
.pl-spplan__head { padding:16px 20px; background:var(--fg-waste-50); border-bottom:1px solid var(--fg-waste-200); }
.pl-spplan__name { font-family:var(--font-num); font-size:18px; font-weight:700; line-height:1.4; color:var(--fg-waste-900); }
/* SPのブロック見出しでは、よみをプラン名と同じ行に添える */
.pl-spplan__name .pl-plan__kana { margin-left:6px; }
.pl-spplan__copy { margin-top:4px; font-size:13px; line-height:1.8; color:var(--ink-body); }
.pl-spplan__body { padding:18px 20px; }
.pl-spplan__k { font-size:12px; font-weight:700; line-height:1.7; color:var(--ink-muted); }
.pl-spplan__list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.pl-spplan__list li { display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.8; color:var(--ink-body); }
.pl-spplan__list li::before {
  content:""; flex:none; width:7px; height:7px; margin-top:9px; border-radius:50%;
  background:var(--fg-waste-500);
}
.pl-spplan__opt { margin-top:16px; padding-top:14px; border-top:1px dashed var(--fg-waste-200); }
.pl-spplan__opt ul { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pl-spplan__opt 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);
}

/* =============================================================================
   5. FAQ
   -----------------------------------------------------------------------------
   部品は共通の .faq（jems-design.css）。Q・Aの丸と開閉の矢印は data-theme が
   持つ --t-* を見るので、廃棄物マネジメントのミントで出る。
   ここでは白カードに載せる見た目だけを足す。
   ========================================================================== */
.pl-faq {
  padding:8px 28px; background:var(--surface);
  border:1px solid var(--fg-waste-200); border-radius:var(--fg-radius-card);
  box-shadow:var(--pl-box-shadow);
}
/* 先頭の details の上罫は箱の枠と二重になるので、共通CSSの上罫を外す */
.pl-faq.faq { border-top:0; }
.pl-faq details { border-bottom-color:var(--fg-waste-200); }
.pl-faq details:last-child { border-bottom:0; }

/* 回答が未確定の項目。デザイン確認時に「まだ出せない」ことが分かる形で置く。
   公開前に回答へ差し替える（回答が確定するまで公開しない） */
.pl-tbd {
  display:block; padding:12px 16px; border-radius:var(--r-md);
  background:var(--warn-bg); font-size:13px; line-height:1.8; color:var(--warn-ink);
}

/* =============================================================================
   6. 導入事例
   -----------------------------------------------------------------------------
   カードは共通コンテンツの一覧カード（.hc-card／common.css）をそのまま使う。
   件数・並びは design.js が最新3件を差し込む（data-case-others）。
   2026-09-11（Figma 744:549）：白地からJEMSグレーの帯へ。前後のセクション
   （白・淡ミント）と地色で切り分ける
   ========================================================================== */
.wm-sec--gray { background:var(--fg-gray); }
.pl-cases { display:flex; justify-content:center; margin-top:48px; }
.pl-cases .pill-btn { width:auto; min-width:280px; min-height:56px; }
.pl-cases .pill-btn > span { flex:none; padding-inline:8px; }

/* =============================================================================
   7. 最終CTA
   -----------------------------------------------------------------------------
   部品はTOP S11（.jcta2--waste ／ .cta-card--solo）と同一。
   2026-09-11（Figma 749:729）：ボタン文言が「お問い合わせ」「資料請求」に
   短くなり、440pxを2分割しても折れなくなったので横並びへ戻した
   （共通CSSの既定どおりなので、このページ固有の指定は持たない）
   ========================================================================== */

/* =============================================================================
   8. レスポンシブ
   -----------------------------------------------------------------------------
   PC 1920px / SP 390px の両端で成立させる。比較表は横スクロールさせず、
   767px 以下でプラン別ブロックへ組み替える（情報の欠落はない）。
   ========================================================================== */
@media (max-width:1199px) {
  :root { --pl-cmp-head:32%; }
  .pl-plans { gap:16px; }
  .pl-plan { padding:24px 20px; }
  .pl-plan__name { font-size:22px; }
  .pl-cmptable th,
  .pl-cmptable td { padding:13px 12px; }
}

@media (max-width:1023px) {
  /* セクション間隔は env-mgt.css と同じ段に落とす。
     本ファイルはあとから読むので、PC値（128px）を明示的に上書きしておかないと
     env-mgt.css 側のメディアクエリが効かない */
  :root { --wm-sec-gap:96px; }
  .hc-plate > .wm-sec:first-child { padding-top:calc(48px + var(--fg-radius-block)); }
  /* 見出し・カード群の間隔もPCから一段詰める */
  .wm-sec .sec-head__lead { margin-top:20px; }
  .pl-body--xl { margin-top:40px; }
  .pl-act--lg { margin-top:40px; }

  /* プランカードは2列。4列のままだと1枚あたり11文字前後になり、
     対象・対応内容がどれも2〜3行に折れて読み比べられない。
     2列以下では「1枚だけ背を高くする」強調が段組みを崩すので、
     はみ出しをやめて枠線・影・バー・バッジだけで差を付ける */
  .pl-plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pl-plan--rec { margin-block:0; }

  .pl-hero__lead { max-width:none; }
  .pl-hero__actions .cvbtn { min-width:0; width:100%; max-width:360px; }

  :root { --pl-cmp-head:30%; }
  .pl-cmptable thead th { font-size:14px; }
  .pl-cmptable th,
  .pl-cmptable td { font-size:13.5px; }

  .pl-faq { padding:8px 20px; }
  .pl-act .cvbtn,
  .pl-act .pill-btn { width:100%; max-width:360px; min-width:0; }
}

@media (max-width:767px) {
  :root { --wm-sec-gap:72px; }
  .hc-plate > .wm-sec:first-child { padding-top:calc(36px + var(--fg-radius-block)); }
  .wm-sec .sec-head__lead { margin-top:16px; }
  .pl-body--xl { margin-top:32px; }
  .pl-act--lg { margin-top:32px; }

  /* 見出しの改行位置はPCの行長に合わせて入れている。SPでは解除して
     画面幅なりの折り返しに任せる（TOP・サービス下層と同じ考え方） */
  .pl-hero__body .hc-hero__title br,
  .wm-sec .sec-head__title br,
  .wm-sec .sec-head__lead br { display:none; }

  .hc-hero { padding-bottom:var(--fg-radius-block); }
  .hc-hero__head { padding-top:24px; }
  .pl-hero__lead { font-size:15px; }
  .pl-hero__actions { margin-top:var(--sp-5); }
  .pl-hero__actions .cvbtn { width:100%; max-width:none; }

  /* プランカードは1列。Lite → Premium の順序はPCと同じ */
  .pl-plans { grid-template-columns:minmax(0,1fr); }
  .pl-plan { padding:22px 20px; }

  /* 比較表は出さず、プラン別ブロックへ差し替える */
  .pl-cmp { display:none; }
  .pl-legend { display:none; }
  .pl-spcmp { display:flex; }

  .pl-faq { padding:4px 18px; }
  .pl-act .cvbtn,
  .pl-act .pill-btn { max-width:none; }
  /* ラベル（最長16文字）がSPの幅で1行に収まらない場合は2行を均等に割る */
  .pl-cta .cvbtn { padding-inline:10px; gap:8px; }
  .pl-cta .cvbtn__pad { width:12px; }
  .pl-cta .cvbtn__txt,
  .pl-hero__actions .cvbtn__txt,
  .pl-act .cvbtn__txt { text-wrap:balance; }
}