@charset "utf-8";
/* =============================================================================
   JEMS 廃棄物マネジメント｜フォーム2画面（お問い合わせ・資料請求）デザイン
   -----------------------------------------------------------------------------
   対象 : /hub/env-mgt/form/     お問い合わせ（入力）   design/env-mgt/form/index.html
          /hub/env-mgt/catalog/  資料請求（入力）       design/env-mgt/catalog/index.html
          ワイヤーフレームは env-mgt/form/index.html（P20）／
          env-mgt/catalog/index.html（P23）。どちらも変更しない

   前提 : 以下の順で読み込む。
            1. ../../../assets/jems-design.css  共通デザインシステム
                                                （トークン・フォーム部品
                                                 .jfield／.jinput／.jselect／
                                                 .jtextarea／.jchoice／.jconsent）
            2. ../../assets/design.css          /hub/ 共通シェル
                                                （ヘッダー・フッター・.cvbtn・.ph）
            3. ../../assets/common.css          下層ページの骨格（.hc-crumb）
            4. ../assets/env-mgt.css            廃マネTOPのデザイン
                                                （.wm-metric／.sec-head__en のミント化）
            5. ../assets/form.css               本ファイル。フォーム2画面で共有する
          クラス名は fm- 接頭辞（form）で名前空間を分け、design.css の .svc-* /
          env-mgt.css の .wm-* / service.css の .wms-* / plan.css の .pl-* と
          衝突させない。

   テーマ : data-theme="waste"。色は --fg-waste-* / --wm-* を参照し、16進を直書きしない。
            入力欄・選択肢（jems-design.css の .jinput / .jchoice）はテーマ変数
            --t-* 参照で組まれているため、data-theme="waste" のままミントになる。

   ページ骨格（WFの指定どおり、他の下層ページと違ってヒーローを持たない）:
            ヘッダー（廃マネTOPと同一）
            .fm             淡色地のメインエリア。パンくず直下から始まる
              .fm-layout    PC 2カラム。左＝案内（sticky）／右＝白いフォームカード
            .jfooter2       フッター（TOP S12 と同一）
          フォーム中に他ページへの導線を置かないため、ページ末のCTA帯
          （.jcta2--waste）は持たない。ヘッダー・フッターの導線のみ。
   ========================================================================== */

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

  /* 2カラムの比率。WFの指定が画面ごとに違うのでページ側で上書きする
     （お問い合わせ＝35：65／資料請求＝40：60） */
  --fm-a:35fr;
  --fm-b:65fr;
  --fm-gap:48px;
  /* 白いフォームカード。CTAカード（design.css .cta-card）と同じ影・角丸に揃える */
  --fm-card-shadow:0 8px 14px rgba(0,0,0,.05);
  /* 確認画面の項目名の列幅 */
  --fm-review-k:180px;
}

/* =============================================================================
   2. メインエリアの枠組み
   -----------------------------------------------------------------------------
   他の下層ページは「グレーのヒーロー ＋ 白いプレート」だが、フォーム2画面は
   WFの指定（P20／P23：上部の横長タイトルエリアを持たず、パンくず直下から
   メインエリアが始まる）に従い、淡色地の上へ直接2カラムを置く。
   H1はグレー帯ではなく左カラムの先頭に入る。
   ========================================================================== */
.fm { background:var(--wm-pale); padding-bottom:80px; }

/* ステップ切り替えでスクロール位置が戻らない件（スクロールアンカリング）は
   文書のスクローラー側を切る必要があるため、form-flow.js で対処している */
.fm-layout {
  display:grid;
  grid-template-columns:minmax(0,var(--fm-a)) minmax(0,var(--fm-b));
  gap:var(--fm-gap);
  align-items:start;
  margin-top:32px;
}

/* 左カラムはPCで追従する。グリッドアイテムなので列の高さで止まり、
   フッターへ重ならない（position:sticky の既定の挙動） */
.fm-side { position:sticky; top:24px; display:flex; flex-direction:column; gap:32px; }

/* H1。2026-09-11の指示で1段下げ、共通コンテンツ・料金プランのセクションH2と
   同じ段（clamp 24〜32px）に合わせた。お問い合わせ・資料請求の2画面で共通。
   フォームカードの見出し（.fm-card__t＝22px）より大きいので階層は保つ */
.fm-side__title { font-size:clamp(24px, 2.2vw, 32px); line-height:1.45; color:var(--fg-heading); }
.fm-side__lead { margin-top:20px; font-size:15px; line-height:1.9; color:var(--fg-charcoal); }
.fm-side__note { margin-top:20px; font-size:12px; line-height:1.8; color:var(--ink-muted); }

/* =============================================================================
   3. 左カラム：導入実績（お問い合わせのみ）
   -----------------------------------------------------------------------------
   数値の体裁は廃マネTOPのFV実績カードと同じ部品（env-mgt.css .wm-metric*）を使い、
   並べ方だけ狭い列向けに変える。面を敷かず、地色の上に区切り線だけで置く。
   2026-09-11：導入企業ロゴ（.fm-logos）は指示により削除した
   ========================================================================== */
.fm-record { padding-top:28px; border-top:1px solid var(--wm-line); }
.fm-record__k {
  font-size:12px; font-weight:700; line-height:1.6;
  letter-spacing:.06em; color:var(--fg-waste-700);
}
.fm-metrics { display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:16px; }
/* 数値は .wm-metric__num（34px）だと狭い列で2行に折れるので一段落とす */
.fm-metrics .wm-metric__num { font-size:28px; }

.fm-record__asof { margin-top:12px; font-size:11px; line-height:1.6; color:var(--ink-muted); }

/* =============================================================================
   4. 左カラム：資料の紹介（資料請求のみ）
   -----------------------------------------------------------------------------
   2026-09-11：資料表紙（.fm-doc）とその下のラベルは指示により削除。
   左カラムは 資料名（H1）・リード・「この資料で分かること」の3つで構成する
   ========================================================================== */
.fm-side__h {
  display:flex; align-items:center; gap:var(--sp-2);
  padding-bottom:12px; margin-bottom:16px;
  border-bottom:1px solid var(--wm-line);
  font-size:15px; font-weight:700; line-height:1.6; color:var(--fg-charcoal);
}
.fm-side__h::before {
  content:""; flex:none; width:3px; height:16px; border-radius:2px; background:var(--wm-key);
}
.fm-list { display:flex; flex-direction:column; gap:10px; }
.fm-list li {
  position:relative; padding-left:20px;
  font-size:14px; line-height:1.8; color:var(--fg-charcoal);
}
.fm-list li::before {
  content:""; position:absolute; left:2px; top:.62em;
  width:8px; height:8px; border-radius:2px; background:var(--wm-key);
}

/* =============================================================================
   5. 右カラム：フォームカード
   ========================================================================== */
.fm-card {
  padding:40px; background:var(--fg-canvas);
  border-radius:var(--fg-radius-card); box-shadow:var(--fm-card-shadow);
}
/* 3ステップの入れ物。グリッドの右カラムとして、中身の幅に押し広げられないようにする */
.fm-main { min-width:0; }
/* パネルはステップ切り替え時にプログラムからフォーカスする。
   そのときに枠が出ないようにし、キーボード操作のリング（:focus-visible）は残す */
.fm-step:focus:not(:focus-visible) { outline:none; }

.fm-card__t { font-size:22px; font-weight:700; line-height:1.5; color:var(--fg-charcoal); }
.fm-card__d { margin-top:10px; font-size:14px; line-height:1.8; color:var(--ink-muted); }

/* --- ステップ表示（お問い合わせ・資料請求とも 入力→確認→完了 の3ステップ） --- */
.fm-steps { display:flex; gap:8px; margin-top:28px; }
.fm-steps__item {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:var(--r-sm);
  background:var(--surface-sub); color:var(--ink-disabled);
  font-size:13px; font-weight:700; line-height:1.5; text-align:center;
}
.fm-steps__no { font-family:var(--font-num); font-size:11px; letter-spacing:.08em; }
.fm-steps__item[aria-current="step"] { background:var(--fg-waste-600); color:var(--fg-canvas); }
/* 通過済み（確認・完了画面で、すでに終えたステップに付く） */
.fm-steps__item.is-done { background:var(--fg-waste-50); color:var(--fg-waste-700); }

/* --- 入力項目 -------------------------------------------------------------
   部品は共通デザインシステムの .jform-section / .jfield / .jinput / .jselect /
   .jtextarea / .jchoice / .jerror / .jreq / .jopt をそのまま使い、
   このページでの見た目だけ .fm-card の中に閉じて上書きする
   （jems-design.css 本体は他のフォーム画面にも効くため触らない）。

   2026-09-11：入力まわりを装飾の少ない形へ調整した。参考にしたのは
   https://karte.io/enterprise/ebook/ の資料請求フォーム。
   共通デザインシステムの既定は「選択肢をチップ状の枠で囲み、必須／任意を
   塗りバッジで出す」組みで、要素ひとつずつが面と色を持つ。入力項目が
   10個前後並ぶこのページでは面と色が積み上がって、どこを読めばよいかが
   分かりにくくなる。参考サイトと同じく、枠線と文字だけで成立させて、
   色はエラーとフォーカスにだけ残す。
   ・必須／任意：塗りバッジ → 文字だけ（必須は赤、任意はグレー）
   ・選択肢：チップ状の枠 → 素のラジオ＋テキスト
   ・入力欄：角丸8px・濃い罫線 → 角丸4px・淡い罫線
   ・エラー：淡い赤地＋太字 → 赤い罫線＋通常ウェイト
   ・セクション区切り：2pxのミント罫線＋ミントの見出し → 1pxの淡い罫線
   ボタン（.cvbtn）はサイト共通のピル型なので対象にしない
   ------------------------------------------------------------------------- */

/* セクションの区切り。面を持たず、細い罫線と見出しだけで分ける */
.fm-card .jform-section { border-top:1px solid var(--line); margin-top:32px; padding-top:24px; }
.fm-card .jform-section__title {
  margin-bottom:20px; font-size:15px; color:var(--fg-charcoal);
}
.fm-card .jfield:last-child { margin-bottom:0; }

/* 項目名。必須／任意は塗りバッジをやめ、文字だけにする */
.fm-card .jfield__label { gap:8px; font-size:14px; }
.fm-card .jfield__note { margin-bottom:8px; font-size:12px; line-height:1.7; }
.fm-card .jreq,
.fm-card .jopt {
  padding:0; background:none; border:0; border-radius:0;
  font-size:12px; font-weight:500; letter-spacing:0;
}
.fm-card .jreq { color:var(--ng); }
.fm-card .jopt { color:var(--ink-disabled); }

/* 入力欄。高さ48pxはタッチターゲットとして残し、罫線と角丸だけ弱める。
   .jselect の矢印は共通CSSが高さ48px前提で座標を持つので、高さは変えない */
.fm-card .jinput,
.fm-card .jselect,
.fm-card .jtextarea {
  padding:12px; font-size:15px;
  border-color:var(--line); border-radius:var(--r-sm);
}
.fm-card .jselect { padding-right:40px; }
.fm-card .jinput:hover,
.fm-card .jselect:hover,
.fm-card .jtextarea:hover { border-color:var(--line-strong); }

/* 選択肢・同意チェック -------------------------------------------------------
   2026-09-11：参考サイト（https://karte.io/enterprise/ の「個人情報取り扱いに
   同意する」）と同じ作りにした。ブラウザ標準のラジオ／チェックは OS ごとに
   太さと色が変わり、accent-color を当てても面が強く出る。実体の input は
   透明にして位置だけ保ち、ラベル側に 18px の淡い枠を描いて、選択時だけ
   テーマ色のマークを出す軽い表現にする。
   丸＝ラジオ／角丸四角＝チェックの区別は残す（参考サイトは同意チェックも
   丸だが、丸はラジオの意味に読めるため、形は標準の約束のままにした）。
   ------------------------------------------------------------------------- */
.fm-card .jchoice { gap:14px 28px; }
.fm-card .jchoice--stack { gap:14px; }
.fm-card .jchoice label,
.fm-card .fm-agree__check {
  display:block; position:relative; min-height:0; margin:0; padding:0; gap:0;
  background:none; border:0; border-radius:0; cursor:pointer;
}
.fm-card .jchoice label:hover,
.fm-card .fm-agree__check:hover { background:none; border:0; }
/* 実体の入力。透明にするだけで消さないので、キーボード操作と読み上げは残る */
.fm-card .jchoice input,
.fm-card .fm-agree__check input {
  position:absolute; top:3px; left:0; width:18px; height:18px; margin:0; opacity:0;
}
/* ラベル文字。行の高さは 15px × 1.6 ＝ 24px 固定で、枠の縦位置を px で決める */
.fm-card .jchoice input + span,
.fm-card .fm-agree__check input + span {
  display:block; position:relative; padding-left:28px;
  font-size:15px; line-height:24px; color:var(--fg-charcoal);
}
/* 枠 */
.fm-card .jchoice input + span::before,
.fm-card .fm-agree__check input + span::before {
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px;
  background:var(--fg-canvas); border:1px solid var(--line); border-radius:50%;
  transition:border-color var(--dur) var(--ease);
}
/* 選択マーク。ラジオ＝中の丸 */
.fm-card .jchoice input + span::after {
  content:""; position:absolute; left:5px; top:8px; width:8px; height:8px;
  border-radius:50%; background:var(--fg-waste-600);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
/* チェックボックスは角丸四角＋チェックマーク（選択肢の中でも同意欄でも同じ） */
.fm-card .jchoice input[type="checkbox"] + span::before,
.fm-card .fm-agree__check input + span::before { border-radius:var(--r-sm); }
.fm-card .jchoice input[type="checkbox"] + span::after,
.fm-card .fm-agree__check input + span::after {
  content:""; position:absolute; left:6px; top:6px; width:6px; height:10px;
  /* 上のラジオ用（丸・塗り）を打ち消してからチェックの線を引く */
  background:none; border-radius:0;
  border:solid var(--fg-waste-600); border-width:0 2px 2px 0; transform:rotate(45deg);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.fm-card .jchoice label:hover input:not(:checked) + span::before,
.fm-card .fm-agree__check:hover input:not(:checked) + span::before { border-color:var(--line-strong); }
.fm-card .jchoice input:checked + span::before,
.fm-card .fm-agree__check input:checked + span::before { border-color:var(--fg-waste-600); }
.fm-card .jchoice input:checked + span::after,
.fm-card .fm-agree__check input:checked + span::after { opacity:1; }
/* フォーカスリングは枠へ移す（input が透明なので既定のリングは見えない） */
.fm-card .jchoice input:focus-visible + span::before,
.fm-card .fm-agree__check input:focus-visible + span::before {
  outline:var(--focus); outline-offset:2px;
}

/* エラー。淡い赤地を敷かず、罫線と文言だけで示す */
.fm-card .jfield--error .jinput,
.fm-card .jfield--error .jselect,
.fm-card .jfield--error .jtextarea { background:var(--fg-canvas); border-color:var(--ng); }
.fm-card .jerror { margin-top:8px; font-size:12px; font-weight:400; line-height:1.7; }

/* 都道府県は候補が短いので、入力欄だけ幅を詰める */
.fm-field--short .jselect { max-width:240px; }

/* --- 個人情報の取り扱い ---------------------------------------------------
   WFの指定どおり二重枠にせず、説明の直下に同意チェックを左揃えで置く。
   チェックの見た目は上の「選択肢・同意チェック」で選択肢と共通にしている */
.fm-agree { margin-top:36px; }
.fm-agree__t { font-size:15px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.fm-agree__d { margin-top:8px; font-size:13px; line-height:1.8; color:var(--ink-muted); }
.fm-agree__check { margin-top:14px; }
.fm-agree__check .jreq { margin-left:8px; }
/* グループ単位のエラー（ラジオ・チェック）は、選択肢の下にまとめて出す */
.fm-card .jerror--group { margin-top:10px; }

/* --- 送信 -----------------------------------------------------------------
   .cvbtn は <a> 想定の部品なので、<button> で使うぶんの既定値だけ打ち消す。
   カード幅いっぱい・高さ56pxはWFの指定 */
.fm-actions { margin-top:32px; }
.fm-actions .cvbtn {
  width:100%; min-height:56px; padding-inline:16px;
  border:0; font-family:inherit; cursor:pointer;
  --cta-fill:var(--fg-waste-600); --cta-line:var(--fg-waste-700); --cta-ink:var(--fg-waste-700);
}
/* 上の border:0 は <button> の既定枠を消すためのもの。
   白地の副操作ボタン（.cvbtn--outline）の罫線はここで戻す */
.fm-actions .cvbtn--outline { border:1px solid var(--cta-line); }
.fm-actions .cvbtn__txt { font-size:16px; font-weight:700; }
.fm-note { margin-top:12px; font-size:12px; line-height:1.8; color:var(--ink-muted); text-align:center; }

/* 確認画面の2択。主操作（送信）を右、副操作（戻る）を左に置く */
.fm-actions--dual { display:flex; gap:16px; }
.fm-actions--dual .cvbtn { flex:1 1 0; width:auto; }

/* 必須項目が埋まるまでの「入力内容を確認する」。
   まだ押す段階ではないことを、面の濃さとカーソルで示す。
   フォーカスは当たるので（aria-disabled。詳細は form-flow.js）、
   押したときはエラー表示が出る */
.fm-actions .cvbtn[aria-disabled="true"] {
  background:var(--line-strong); color:var(--fg-canvas);
  cursor:not-allowed; filter:none;
}
.fm-actions .cvbtn[aria-disabled="true"] .cvbtn__ico { opacity:.55; }

/* 送信中。二重送信の防止はJS側（ボタンのdisabled）で、ここは見た目だけ */
.fm-actions .cvbtn[disabled] { opacity:.72; cursor:default; }
.fm-actions .cvbtn.is-loading .cvbtn__ico { animation:fm-spin .7s linear infinite; }
@keyframes fm-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .fm-actions .cvbtn.is-loading .cvbtn__ico { animation:none; }
}

/* =============================================================================
   6. STEP 2 確認画面 ／ STEP 3 完了画面
   -----------------------------------------------------------------------------
   入力・確認・完了は同じカード（.fm-card）の中で切り替える。
   表示していないステップは hidden で外すので、中のボタンや入力へ
   Tab キーでも入らない。
   ========================================================================== */

/* --- 入力内容の確認 -------------------------------------------------------
   入力欄と誤認されないよう、共通デザインシステムの確認用部品 .jconfirm
   （項目名の列に地色を敷いた読み取り専用の表）を使う。
   枠線つきの入力欄は1つも置かない */
.fm-review { margin-top:28px; }
.fm-review dl { grid-template-columns:var(--fm-review-k) minmax(0,1fr); }
.fm-review dt { font-size:13px; line-height:1.7; }
/* 相談内容は入力時の改行をそのまま見せる。長いURL等でも表を破らない */
.fm-review dd {
  font-size:15px; line-height:1.8; color:var(--fg-charcoal);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
/* 任意項目の未入力。値が入っている行と読み分けられるよう淡くする */
.fm-review dd.is-empty { color:var(--ink-disabled); }

/* --- 完了 ----------------------------------------------------------------- */
.fm-done { margin-top:28px; text-align:center; }
.fm-done__ico {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin:0 auto 20px;
  border-radius:50%; background:var(--fg-waste-50); color:var(--fg-waste-600);
}
.fm-done__ico svg { width:26px; height:26px; }
.fm-done__t { font-size:20px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.fm-done__d { margin-top:14px; font-size:15px; line-height:1.9; color:var(--ink-body); }
/* 受付後の補足（連絡が来ないときの導線など）。本文より一段落とす */
.fm-done__note { margin-top:18px; font-size:12px; line-height:1.9; color:var(--ink-muted); }
.fm-done .fm-actions { margin-top:32px; }
.fm-done .fm-actions .cvbtn { max-width:320px; margin-inline:auto; }

/* =============================================================================
   7. レスポンシブ
   ========================================================================== */
@media (max-width:1199px) {
  :root { --fm-gap:32px; }
  .fm-card { padding:32px; }
}

/* 2カラムを維持できる下限。ここから1カラムへ切り替える */
@media (max-width:1023px) {
  .fm-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .fm-side { position:static; gap:24px; }

  /* お問い合わせのみ、1カラムでは タイトル→案内→フォーム→導入実績 の順に並べ替える。
     WFのSP順は タイトル→案内→ステップ→フォーム だが、実績・ロゴ（WFに後から
     追加されたブロック）を案内とステップの間に挟むとフォームが画面下へ押し下がる。
     実績はフォームの後ろでも役割を果たすため、入力開始までの距離を優先した。
     資料請求（P23）はWFのSP順のままでよいので、並べ替えの対象にしない */
  [data-page="form"] .fm-side { display:contents; }
  [data-page="form"] .fm-side__head { order:1; }
  [data-page="form"] .fm-main { order:2; }
  [data-page="form"] .fm-record { order:3; }
}

@media (max-width:767px) {
  .fm { padding-bottom:56px; }
  .fm-layout { margin-top:24px; }
  /* SPは面の左右余白を詰めて、入力欄の幅を確保する */
  .fm-card { padding:24px 20px; border-radius:var(--r-lg); }
  .fm-card__t { font-size:19px; }
  .fm-steps { gap:6px; margin-top:20px; }
  .fm-steps__item { padding:8px 6px; font-size:12px; }
  .fm-field--short .jselect { max-width:none; }
  .fm-actions .cvbtn__txt { font-size:15px; }
  /* SPだけ16pxへ戻す。iOS Safari は16px未満の入力欄をタップすると
     ページを自動でズームし、入力後の表示位置がずれる */
  .fm-card .jinput,
  .fm-card .jselect,
  .fm-card .jtextarea { font-size:16px; }

  /* 確認画面は項目名と回答を縦に積む（180pxの列では回答が細くなるため） */
  .fm-review dl { grid-template-columns:minmax(0,1fr); }
  .fm-review dt { padding:12px 14px 0; border-bottom:0; }
  .fm-review dd { padding:6px 14px 14px; }

  /* 確認画面の2択は縦積み。DOM順は 戻る→送信 のまま、
     column-reverse で主操作（送信）を上に置く */
  .fm-actions--dual { flex-direction:column-reverse; gap:12px; }
}