@charset "utf-8";
/* =============================================================================
   JEMS 環境マネジメント事業部（仮）｜トップページ（/hub/）デザイン
   -----------------------------------------------------------------------------
   前提 : ../assets/jems-design.css（共通デザインシステム）を先に読み込む。
          幅・余白・色・角丸は共通トークン経由で参照し、ここに数値を乱立させない。
            コンテナ : .jw / .jw--wide / .jw--narrow / .jw--read
            Figma由来 : --fg-*（ヘッダー・FVの色／影／グラデーション）
   構成 : 最新WF（S0〜S9）＋ Figma（node 119:3616）のヘッダー・FVデザイン。
          data-p で構成案A/B/Cを切り替える。
   ========================================================================== */

/* =============================================================================
   0. 構成案パターン切替（A / B / C）
   ========================================================================== */
[data-pattern] { display:none; }
html[data-p="a"] [data-pattern~="a"],
html[data-p="b"] [data-pattern~="b"],
html[data-p="c"] [data-pattern~="c"] { display:revert; }

/* =============================================================================
   1. 画像プレースホルダー（未確定素材のみ）
   ========================================================================== */
.ph {
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:var(--sp-3); background:var(--surface-sub); border:1px solid var(--line);
  border-radius:var(--r-md); color:var(--ink-muted); font-size:12px; line-height:1.7;
}
.ph small { margin-top:4px; font-size:11px; color:var(--ink-disabled); }
.ph--wide { aspect-ratio:24/7; }
.ph--thumb { aspect-ratio:16/9; border:0; border-bottom:1px solid var(--line); border-radius:0; }

/* =============================================================================
   2. S0 ヘッダー（多段ナビ）
   -----------------------------------------------------------------------------
   1段目 .pnav = プライマリ：事業領域の切替（HOME／廃棄物／資源循環）
   2段目 .lnav = ローカル：選択中の事業領域の下層ページ。PCでは追従（sticky）
   ========================================================================== */
/* position:sticky は親要素の箱を出られない。ヘッダーに箱があると
   2段目がヘッダー内（128px）でしか固定されないため、display:contents で
   箱を外し、1段目・2段目を body 直下の流れに置く。
   重ね順は .pnav / .lnav 側の z-index で確保する。 */
.siteheader { display:contents; }
:root {
  --header-h:56px;             /* 追従するのは2段目のみ。その高さ */
  /* ナビの非アクティブ文字色。charcoal(#354341) だとアクティブとの落差が
     大きすぎるため、Figma更新（169:299）に合わせて一段落とす。 */
  --fg-nav-ink:#5f6564;
}

/* --- 1段目：プライマリ（Figma: PC 122:51 / SP 191:252） --- */
.pnav { position:relative; z-index:49; background:var(--fg-nav-bg); }
/* タブは下辺で2段目と接するので、行は下揃え。上12pxのみ余白を取る */
.pnav__inner { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5); min-height:74px; padding-top:12px; }
.pnav__logo { display:block; flex:none; padding-bottom:14px; }
.pnav__logo img { width:128px; height:48px; object-fit:contain; }

.pnav__tabs { display:flex; align-items:flex-end; }
.pnav__tab {
  display:flex; align-items:center; justify-content:center;
  width:240px; min-height:53px; padding:0 10px;   /* 高さは min-height で決める（罫線込み53px） */
  font-size:14px; font-weight:500; line-height:1.2;
  color:var(--fg-nav-ink); text-align:center; text-decoration:none;
  border:1px solid transparent;
}
/* アクティブ色は領域ごとのテーマ色（文字＝500番台／罫線＝300番台） */
/* --tab-bg＝アクティブの面（50番台）、--tab-under＝下辺のアンダーライン（400/500番台） */
.pnav__tab[data-area="home"]     { --tab-ink:var(--fg-mantis-500); --tab-line:var(--fg-mantis-300); --tab-bg:var(--fg-mantis-50); --tab-under:var(--fg-mantis-400); }
.pnav__tab[data-area="waste"]    { --tab-ink:var(--fg-waste-500);  --tab-line:var(--fg-waste-300);  --tab-bg:var(--fg-waste-50);  --tab-under:var(--fg-waste-400); }
.pnav__tab[data-area="circular"] { --tab-ink:var(--fg-circ-600);   --tab-line:var(--fg-circ-300);   --tab-bg:var(--fg-circ-50);   --tab-under:var(--fg-circ-500); }
/* ホバーの変化は文字色のみ。面や罫線は変えない（アクティブと見分けがつかなくなる） */
.pnav__tab:hover { color:var(--tab-ink); }
/* アクティブ：淡色面＋下辺3pxのアンダーライン（Figma 369:4 の新仕様・2026-09-02）。
   3pxぶんを padding-bottom で相殺し、非アクティブと同じ53pxを保つ */
.pnav__tab[aria-current="page"] {
  background:var(--tab-bg); color:var(--tab-ink); font-weight:700;
  border:0; border-bottom:3px solid var(--tab-under);
  border-radius:0;
  padding-bottom:3px;
}

/* --- 2段目：ローカル --- */
/* 追従するのはこの2段目だけ。1段目はスクロールで送り出す */
.lnav { position:sticky; top:0; z-index:50; background:var(--fg-canvas); box-shadow:var(--fg-shadow-header); }
.lnav__tabs { display:flex; align-items:stretch; }
.lnav__tabs[hidden] { display:none; }
.lnav__tabs[data-area-nav="home"]     { --lnav-line:var(--fg-mantis-200); --lnav-ink:var(--fg-mantis-500); --lnav-bg:var(--fg-mantis-50); --lnav-under:var(--fg-mantis-400); }
.lnav__tabs[data-area-nav="waste"]    { --lnav-line:var(--fg-waste-200);  --lnav-ink:var(--fg-waste-500); --lnav-bg:var(--fg-waste-50); --lnav-under:var(--fg-waste-400); }
.lnav__tabs[data-area-nav="circular"] { --lnav-line:var(--fg-circ-300);   --lnav-ink:var(--fg-circ-600);  --lnav-bg:var(--fg-circ-50);  --lnav-under:var(--fg-circ-500); }
/* 非アクティブは面を持たず、下罫でベースラインを作る。左罫がタブ間の区切り */
.lnav__tab {
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  min-height:53px; padding:0 8px;                 /* 同上 */
  font-size:14px; font-weight:400; line-height:1.2;
  color:var(--fg-nav-ink); text-align:center; text-decoration:none;
  border-bottom:1px solid var(--fg-nav-line);
  border-left:1px solid var(--fg-nav-line);
}
.lnav__tab:first-child { border-left-color:transparent; }
.lnav__tab:hover { background:var(--fg-pale-green); }
/* アクティブ：領域テーマの淡色面＋下辺3pxのアンダーライン
   （Figma 369:19 の新仕様・2026-09-02）。文字は bold。 */
.lnav__tab[aria-current="page"] {
  background:var(--lnav-bg); color:var(--lnav-ink); font-weight:700;
  border:0; border-bottom:3px solid var(--lnav-under);
  padding-bottom:3px;
}

/* --- ドロワー（タブレット・SP） --- */
.menu-btn {
  display:none; align-items:center; gap:8px; flex:none; margin-bottom:8px;
  min-height:44px; padding:8px 12px;
  background:#fff; border:1px solid var(--fg-nav-line); border-radius:var(--r-md); cursor:pointer;
}
.menu-btn__txt { font-family:var(--font-num); font-size:11px; font-weight:700; letter-spacing:.08em; }
.menu-btn__bars { position:relative; display:block; width:18px; height:2px; background:var(--fg-charcoal); }
.menu-btn__bars::before,
.menu-btn__bars::after { content:""; position:absolute; left:0; width:18px; height:2px; background:var(--fg-charcoal); }
.menu-btn__bars::before { top:-6px; }
.menu-btn__bars::after { top:6px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background:transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { top:0; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { top:0; transform:rotate(-45deg); }

.sp-menu { border-top:1px solid var(--line); background:#fff; max-height:calc(100vh - 120px); overflow-y:auto; }
.sp-menu__list > li { border-bottom:1px solid var(--line); }
.sp-menu__list > li > a { display:block; padding:14px 0; font-size:15px; font-weight:700; color:var(--ink); text-decoration:none; }
.sp-menu__sub { padding:0 0 var(--sp-3) var(--sp-4); }
.sp-menu__sub a { display:block; padding:10px 0; font-size:14px; color:var(--ink-body); text-decoration:none; }
.sp-menu__cv { display:grid; gap:var(--sp-2); padding-block:var(--sp-4) var(--sp-5); }

/* =============================================================================
   3. S1 ファーストビュー（パターン A / B）
   ========================================================================== */
/* Figma node 123:50。お知らせ帯はS7へ移したので下余白を持たせる */
/* コピーの clamp が 1440px 付近で頭打ちになるため、それ以上の大画面でも
   FVの高さは伸びず、画面全体をFVで埋めない。 */
/* MV（assets/img/mv-4.webp／1678×937）の座標系。すべて画像に対する割合で持つ。
   「保護領域」＝中央のデータタワー・循環ルート・4拠点・主要パネル。
     左 32.8% / 右 88.5% / 上 25.3% / 下 77.1%（＝幅55.7%・高さ51.8%）
   mv-4 は四辺とも不透明な矩形（mv-2 が持っていた左の透過グラデーションがない）。
   左端はコピーの上を横切るので、旧画像のアルファと同じ 0〜30% をマスクで作る。
   右・上・下の端も不透明なので、FVの外へ出すかマスクでぼかして継ぎ目を出さない。
   ※旧版 mv.webp（2011×1335／保護領域 左25.5 右79.0 上28.5 下70.0）から
     画像が横長（1.51→1.79）になり、被写体が枠内で大きくなった。
     被写体の重心とσで写像して各値を引き直している。 */
.fv {
  --mv-cx:60.7%;              /* 保護領域の中心（画像幅比） */
  --mv-cy:51.3%;              /* 保護領域の中心（画像高比） */
  position:relative; overflow:hidden; background:var(--fg-gray); padding-block:56px 64px;
}
/* PC：FV全面に広がる背景ビジュアルとして扱う窓 */
.fv__visual { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
/* 画像の高さはFVの高さ基準（--mv-h）。幅は比率から決まるので、画面が横に広がっても
   被写体は拡大せず、右にはみ出していた周辺風景が見えてくる。
   ・下端は FV 下端にぴたりと合わせ、上端は FV 外へ抜く（＝ハード端が中に出ない）
   ・translateX で「保護領域の右端」を right の位置に合わせる。translate の % は
     要素自身の幅基準なので、画像の実寸を calc で知る必要がない
   ・右端（画像の93.7%以降）はマスクでぼかし、超ワイドで端が入っても継ぎ目が出ないようにする */
.fv__mv {
  position:absolute;
  /* 右の余白と拡大率は幅に比例させる。下限は 1280px（コピーとの最小クリアランスが
     ぎりぎり確保できる 83.3%/24px）、上限は約1900px以上（118.6%）。
     旧版の 104%／148%／係数0.49 に「保護領域の高さ比」41.5%→51.8% の逆数
     （×0.8012）を掛けた値。被写体のオンスクリーンの大きさは旧版と同じになる。
     ・translateX：保護領域の右端を right の位置へ合わせる
     ・translateY：保護領域の下端（画像の78.9%）を、FV下端から199px上に置く。
       translate の % は要素自身の高さ基準なので、「下の余白ぶん(21.1%)持ち上げて
       から199px下げる」と書ける。画像の高さが変わっても被写体の位置は動かない。
       旧版は画像がFVより背高で下端合わせにできたが、mv-4は横長になり
       画像の高さがFVを下回る幅があるため、上下端はマスクでぼかして境目を消す。 */
  right:var(--mv-inset-r, clamp(24px, calc(24px + (100vw - 1280px) * 0.1), 40px));
  bottom:0;
  height:var(--mv-h, clamp(83.3%, calc(83.3% + (100vw - 1280px) * 0.393), 118.6%));
  width:auto; max-width:none;
  transform:translate(
    calc(100% - 88.5%),
    var(--mv-shift-y, calc(21.1% - 199px))
  );
  /* 左端＝0〜30%（旧 mv-2 のアルファと同じ幅）、右端＝93.7%以降（保護領域の右88.5%の
     外側）、上下端＝10%/88%以降でフェード。
     保護領域は左32.8%・右88.5%・上25.3%・下77.1%なので、被写体には掛からない。 */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 30%, #000 93.7%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 30%, #000 93.7%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.fv__body { position:relative; z-index:1; }
/* 2026-09-08：MVを mv-4 に差し替えたことで、コピー背面が周辺風景の描き込みで
   にぎやかになった。テキスト塊の背後だけに薄い光彩（白のベール＋弱いブラー）を敷いて
   文字の視認性を担保する。パネルに見せないよう四辺ともフェードさせる。
   ・横：コンテナの左paddingぶん画面端まで抜き、テキスト右端（＝内容左端＋679px）を
     越えた 700px から 880px にかけて消す。被写体（最短でも内容左端＋910px 付近）には掛からない
   ・縦：リードの上・ボタンの下へはみ出させ、上下端をぼかす
   ・白のベールとブラーの両方を mask で羽化させる（backdrop-filter は mask に追従するので
     background 側のグラデーションだけでは端が直線に出てしまう） */
.fv__body::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:calc(-1 * var(--page-padding));
  width:calc(var(--page-padding) + 880px);
  top:calc(-1 * var(--sp-7)); bottom:calc(-1 * var(--sp-6));
  -webkit-backdrop-filter:blur(5px) saturate(1.02);
  backdrop-filter:blur(5px) saturate(1.02);
  background:rgba(255,255,255,.58);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 10%, #000 84%, transparent 100%),
    linear-gradient(to right, #000 0, #000 calc(var(--page-padding) + 700px), transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 10%, #000 84%, transparent 100%),
    linear-gradient(to right, #000 0, #000 calc(var(--page-padding) + 700px), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* キャッチは「リード1行＋見出し2行」の2段構成。
   1412px 以上で 72px。右のビジュアルと衝突しない幅に収める。
   リード・本文もあわせて上げ、見出しだけが突出しないようにする。 */
.fv__copy { font-size:clamp(34px,5.1vw,72px); line-height:1.22; letter-spacing:.005em; color:var(--fg-heading); }
.fv__eyebrow { display:block; margin-bottom:var(--sp-4); font-size:21px; font-weight:500; line-height:1.6; letter-spacing:.01em; }
.fv__sub { margin-top:var(--sp-5); font-size:17px; line-height:1.65; color:var(--fg-heading); }
/* SP専用の改行位置。PCはFigmaどおり2行なので無効化しておく */
.fv__sub-br { display:none; }
/* 2026-09-07（0904CL ①）：逆にPC専用の改行位置。差し替えたリード文は指定位置で
   折らないとPCで4行に割れる一方、SPで同じ位置に入れると行末に1〜2文字だけ残る */
.fv__sub-br--pc { display:inline; }
.fv__actions { margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.fv__actions--center { justify-content:center; }
.fv__foot { position:relative; z-index:1; margin-top:48px; }

/* FVボタン（Figma：Button / Primary）
   青＝廃棄物マネジメント、緑＝資源循環マネジメント。形・字組は共通。 */
.fbtn {
  display:inline-flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  width:260px; min-height:60px; padding:20px 12px 20px 24px;
  color:#fff; font-size:16px; font-weight:500; line-height:1.2;
  border-radius:var(--r-full); text-decoration:none;
  transition:filter var(--dur) var(--ease);
}
.fbtn:hover { filter:brightness(1.05); }
.fbtn__ico { width:20px; height:20px; flex:none; }
/* 影の色は地のグラデーションに合わせる。2026-09-06のテーマ入替で
   Picton Blue rgba(52,177,253) → Circular Mint rgba(51,184,144) へ差し替え */
.fbtn--waste {
  background:var(--fg-waste-grad);
  box-shadow:4px 6px 7px rgba(51,184,144,.2), 12px 12px 9px rgba(51,184,144,.3),
             inset 1px 1px 2px var(--fg-waste-400), inset -1px -1px 2px var(--fg-waste-600);
}
/* 2026-09-07（0904CL ㉘）：資源循環はブルー。09-06のテーマ入替から漏れてJEMS共通
   グリーンのままだったので、.fbtn--waste と同じ組み立て（400→200のグラデ＋同系の影）で
   Picton Blue へ揃える */
/* 2026-09-09：カンプ調整（Figma 658:2633）で全体を1段濃く。ミント側（500→400）と
   同じ考え方だが、ブルーは 300 で止める（200 まで淡くすると白文字が沈む） */
.fbtn--circular {
  background:linear-gradient(87.2deg, var(--fg-circ-500) 25.24%, var(--fg-circ-300) 112.81%);
  box-shadow:4px 6px 7px rgba(52,177,253,.2), 12px 12px 9px rgba(52,177,253,.3),
             inset 1px 1px 2px var(--fg-circ-400), inset -1px -1px 2px var(--fg-circ-600);
}

/* 実績帯（Figma：Metric Copy） */
.fv__metrics { width:fit-content; }
.metrics {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-7);
  padding-inline:40px;
  padding-block:20px; background:rgba(255,255,255,.9);
  border-top:1px solid var(--fg-band-line); border-bottom:1px solid var(--fg-band-line);
}
.metric { flex:0 1 auto; min-width:0; }
.metric__lbl { display:block; font-size:14px; line-height:1.2; color:var(--fg-metric); white-space:nowrap; }
.metric__row { display:flex; align-items:flex-end; gap:4px; margin-top:1px; }
.metric__num { font-size:28px; font-weight:700; line-height:1.2; color:var(--fg-mantis-600); white-space:nowrap; }
.metric__unit { padding-bottom:8px; font-size:14px; line-height:1.2; color:var(--fg-metric); white-space:nowrap; }
.facts__asof { margin-top:var(--sp-1); text-align:right; }

/* =============================================================================
   3-b. S7 お知らせ（Figma node 233:1471）
   -----------------------------------------------------------------------------
   最新3件を1件ずつ入れ替えて表示。窓の高さは固定して帯が動かないようにする。
     ・待機 = translateY(100%)（下に待機／トランジションなし）
     ・表示 = .is-active で translateY(0) を .8s
     ・退出 = .is-end で translateY(-100%) を .8s（上へ抜ける）
   件数は各アイテムが持つカウンタ（1/3・2/3・3/3）で示す。
   ========================================================================== */
.newsband { background:var(--fg-canvas); padding-block:24px 30px; }
.newsband__head { max-width:none; margin-bottom:0; padding-bottom:24px; }
.newsband__head .sec-head__en { margin-bottom:6px; }
.newsband__body { display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-3); }
/* カードの枠・白面は固定。動くのは中身だけなので、クリップは内側の .newsband__list が持つ。
   カードの高さは padding と窓の高さ（=1行ぶん）から決まる（18+27+18=63px） */
.newsband__card {
  width:100%; padding:17px 32px;   /* 罫線1px込みで63pxになる値 */
  background:var(--fg-canvas); border:1px solid var(--fg-news-line); border-radius:8px;
  transition:border-color var(--dur) var(--ease);
}
.newsband__card:hover { border-color:var(--fg-mantis-300); }
.newsband__list { position:relative; height:27px; overflow:hidden; }
.newsband__item { position:absolute; inset:0; transform:translateY(100%); }
.newsband__item.is-active { transform:translateY(0); transition:transform .8s ease-in-out; }
.newsband__item.is-end { transform:translateY(-100%); transition:transform .8s ease-in-out; }
.newsband__link {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  height:100%; text-decoration:none;
}
.newsband__main { display:flex; align-items:center; gap:var(--sp-4); min-width:0; }
.newsband__group { display:flex; align-items:center; gap:var(--sp-2); flex:none; }
.newsband__tag {
  padding:3px 10px; border-radius:var(--r-full);
  background:var(--fg-pale-green); color:var(--fg-mantis-600);
  font-size:12px; line-height:18px; white-space:nowrap;
}
.newsband__date {
  font-family:var(--font-num); font-size:12px; font-weight:500; line-height:24px;
  color:var(--fg-news-date); white-space:nowrap;
}
.newsband__title {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14px; line-height:1.9; color:var(--fg-news-title);
  transition:color var(--dur) var(--ease);
}
.newsband__link:hover .newsband__title { color:var(--fg-waste-600); text-decoration:underline; text-underline-offset:3px; }
.newsband__count {
  flex:none; font-family:var(--font-num); font-size:12px; font-weight:500; line-height:24px;
  color:var(--fg-news-date);
}
/* 一覧ボタン（Figma: Button / Secondary） */
.newsband__more {
  display:inline-flex; align-items:center; gap:var(--sp-4);
  padding-block:16px; text-decoration:none;
  font-size:14px; font-weight:500; line-height:1.2; color:var(--fg-charcoal);
  transition:color var(--dur) var(--ease);
}
.newsband__more:hover { color:var(--fg-mantis-600); }
.newsband__more img { flex:none; display:block; width:20px; height:20px; }
@media (prefers-reduced-motion:reduce) {
  .newsband__item { transition:none !important; }
}

/* =============================================================================
   4. S1 ファーストビュー（パターン C：中央・ブランディング強化）
   ========================================================================== */
.fvc { background:var(--fg-gray); padding-bottom:56px; }
.fvc__hero { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:min(72vh,560px); }
.fvc__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fvc__hero::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,.74); }
.fvc__body { position:relative; z-index:1; padding-block:var(--sp-7); text-align:center; }
.fvc__eyebrow { font-size:15px; font-weight:700; color:var(--fg-mantis-600); }
.fvc__copy { margin-top:var(--sp-3); font-size:clamp(29px,4.8vw,52px); line-height:1.35; color:var(--fg-heading); }
.fvc__sub { margin-top:var(--sp-4); font-size:16px; line-height:1.63; color:var(--fg-heading); }

/* =============================================================================
   4-b. 見出しのスケール（このページのみ。共通CSSの値を上書きする）
   -----------------------------------------------------------------------------
   H1（FVコピー）72px ＞ H2（セクション見出し）44px ＞ H3（カード内）26〜30px
   の順に段差をつける。以前は H2 32px / H3 28px で差が4pxしかなく、
   階層が読み取りにくかった。
   英字ラベル（.sec-head__en 12px）とリード文（16px）は一律には上げない。
   H3は各コンポーネントの定義元で指定している（.bizblock__title 44px /
   .guide-card__t・.cta-card__title 24px）。
   ========================================================================== */
/* H2：ページを区切る主要見出し。1420px 以上で 44px、狭い幅では滑らかに縮む */
.sec-head__title { font-size:clamp(30px, 3.1vw, 44px); line-height:1.32; }

/* =============================================================================
   5. S2 導入企業ロゴ（2列・逆方向スクロール）
   ========================================================================== */
/* Figma更新に合わせ、FVと同じ地色で continuous に見せる。
   上下24px（Figma node 168:129）。上境界はFVのお知らせ帯の罫線が受け持つ。
   ロゴは2段。上段は左へ、下段は右へ流す（jp.is-kagami.com のFV下と同じ見せ方）。 */
/* 地色は白。ロゴを囲む枠は置かず、白地の上に直接大きく並べる
   （サイズは廃棄物マネジメントTOPのCLIENTSブロック（.wm-logos）に合わせて64px） */
.logoband { padding-block:40px; background:var(--fg-canvas); overflow:hidden; }
.logoband__rows { display:grid; gap:var(--sp-5); }
.logoband__row { overflow:hidden; }
/* 1段あたりのロゴ数が半分になるぶん、同じ体感速度になるよう duration も詰める。
   2段で秒数をずらしているのは、上下のロゴが縦に揃って動くのを避けるため。 */
.logoband__track { display:flex; align-items:stretch; gap:var(--sp-7); width:max-content; animation:logo-marquee 36s linear infinite; }
/* 下段は同じキーフレームを逆再生して右方向へ流す */
.logoband__row--rev .logoband__track { animation-duration:40s; animation-direction:reverse; }
.logoband__rows:hover .logoband__track { animation-play-state:paused; }
.logoband__cell {
  flex:none; display:flex; align-items:center; justify-content:center;
  min-height:72px;
}
.logoband__cell img { display:block; width:auto; height:64px; object-fit:contain; }
@keyframes logo-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
  .logoband__row { overflow-x:auto; }
  .logoband__track { animation:none; }
}

/* =============================================================================
   6. S3 支援領域（Figma node 478:4064）
   -----------------------------------------------------------------------------
   6-a .svc-intro : イントロ。見出し → トータルマネジメント概念図 → 共通支援の帯
                    （Figma: Section 478:4065 / 概念図 478:4078 / 帯 478:4161）
   6-b .bizsec    : 事業ブロック 01/02。左テキスト／右写真
                    （Figma: service01 480:4502 / service02 484:340）
   ========================================================================== */
:root {
  /* Figmaのローカル値。共通トークンに無いものだけここで受ける */
  --fg-svc-mid:#fafcfe;             /* S3イントロ背景グラデーションの中間色（478:4065） */
  --fg-band-goal:#fffb00;           /* 帯の終点ドット（478:4181） */
  /* 2026-09-06：テーマ入替により、01（廃棄物）はミント、02（資源循環）はブルーへ交換 */
  --fg-biz-waste-from:#3cc49a;      /* 01ボタンのグラデ明色（484:238 のミントを移設） */
  --fg-biz-circ-from:#4fbdff;       /* 02ボタンのグラデ明色（480:4494 のブルーを移設） */
  --fg-biz-circ-to:#0897ef;         /* 同・暗色（旧01が終点に使っていた Picton Blue 500） */
}

/* 上端40px角丸。白→淡いグリーンへ落とし、下の事業ブロック（白）へ受け渡す。
   2026-09-07（0904CL ⑪）：右上に抜かせていた薄いJEMSマーク（.svc-intro__deco）はトル */
.svc-intro {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,
    var(--fg-canvas) 0%, var(--fg-svc-mid) 73.6%, var(--fg-mantis-50) 100%);
  border-radius:var(--fg-radius-block) var(--fg-radius-block) 0 0;
  padding-block:72px 56px;
}

.svc-intro__inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--sp-5); }
.svc-intro__head { max-width:none; margin-bottom:0; }
.svc-intro .sec-head { max-width:none; margin-bottom:0; }
.sec-head__group { display:flex; flex-direction:column; gap:var(--sp-5); }
.sec-head__lead p { font-size:16px; line-height:1.9; color:var(--ink-body); }

/* --- 概念図（Figma 478:4078） ---------------------------------------------
   循環ルート・4工程・パネル・吹き出しまで焼き込んだ1枚画像（1200×779）。
   図中の文字を差し替えるときは画像そのものを書き出し直す。 */
.tmflow { border-radius:24px; overflow:hidden; }
.tmflow picture { display:block; }
.tmflow img { display:block; width:100%; height:auto; }

/* --- 概念図の続き：扱うデータ → もたらす効果 → 結論（0909CL ⑭） -------------
   概念図と同じコンテナに続けて置き、区切りは罫線だけにする。
   カード・影・大きな角丸を足すと図と横並びの「別コンテンツ」に見えるため使わない。 */
.tmmore { display:flex; flex-direction:column; gap:var(--sp-6); margin-top:var(--sp-6); }

/* --- 取り扱う主なデータ（アコーディオン） --- */
/* 2026-09-14：上下の罫線だけ（面なし）だと概念図の続きに沈んで開けることに
   気づけないため、ブロックごとカードにする。面・角丸・影は S4 のガイドカード
   （.guide-card）と同じ扱いにして、押せる面として立たせる */
.tmdata {
  background:var(--fg-canvas);
  border-radius:var(--fg-radius-card);
  box-shadow:var(--fg-shadow-neu);
  padding-inline:28px;
}
.tmdata__trigger {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  width:100%; padding:24px 0;
  background:none; border:0; text-align:left; cursor:pointer; color:inherit;
  transition:color var(--dur) var(--ease);
}
.tmdata__trigger:hover { color:var(--fg-mantis-600); }
.tmdata__trigger:focus-visible { outline:2px solid var(--fg-mantis-400); outline-offset:2px; border-radius:var(--r-sm); }
/* 見出しの体裁は「業種の対応実績」（.subsec2）と同じ＝緑のドット＋18px太字 */
.tmdata__title { display:flex; align-items:center; gap:12px; min-width:0; font-size:18px; font-weight:700; line-height:1.5; }
.tmdata__dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--fg-mantis-400); }
/* ＋／− は擬似要素の2本線。開くと縦線だけ消して − になる */
.tmdata__mark {
  position:relative; flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--fg-mantis-50); transition:background-color var(--dur) var(--ease);
}
.tmdata__mark::before,
.tmdata__mark::after {
  content:""; position:absolute; top:50%; left:50%; width:13px; height:1.5px;
  background:var(--fg-mantis-600); translate:-50% -50%;
  transition:opacity var(--dur) var(--ease), rotate var(--dur-slow) var(--ease);
}
.tmdata__mark::after { rotate:90deg; }
.tmdata__trigger:hover .tmdata__mark { background:var(--fg-mantis-200); }
.tmdata__trigger[aria-expanded="true"] .tmdata__mark::after { opacity:0; rotate:0deg; }

/* 0fr→1fr で高さを補間する。中身の高さを測らずに済み、開閉で行が跳ねない */
.tmdata__panel {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-slow) var(--ease);
}
.tmdata__panel[data-open="true"] { grid-template-rows:1fr; }
.tmdata__clip { min-height:0; overflow:hidden; }
/* 3列×2段。カードの白面の上に置くので、面や角丸は持たせず罫線だけで仕切り、
   6枚のカードではなく「1つの表」に見せる */
/* 左右は item の内側余白ぶん外へ逃がし、1列目の文字頭を見出しのドットに揃える */
.tmdata__list {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  margin:0 -24px 28px;
  border-top:1px solid var(--fg-nav-line);
}
.tmdata__item {
  padding:22px 24px;
  border-left:1px solid var(--fg-nav-line);
  border-top:1px solid var(--fg-nav-line);
}
.tmdata__item:nth-child(3n+1) { border-left:0; }
.tmdata__item:nth-child(-n+3) { border-top:0; }
/* 通し番号は S4 のガイドカード（.guide-card__no）と同じ、緑の縦グラデを文字で抜く見せ方 */
.tmdata__no {
  margin-bottom:6px;
  font-family:var(--font-num); font-size:13px; font-weight:700; line-height:1.4;
  background:linear-gradient(180deg,#1a6b23,#2f8226);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tmdata__t { font-size:15px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.tmdata__d { margin-top:4px; font-size:13px; line-height:1.75; color:var(--ink-muted); }

/* --- もたらす効果 --- */
/* データ→効果をつなぐ矢印。上下の余白は .flow-arrow 側が持たないのでここで詰める */
.tmmore__arrow { margin-block:-6px; }
.tmmore__arrow img { display:block; width:12px; height:44px; }

.tmeffect { display:flex; flex-direction:column; gap:var(--sp-5); }
/* 見出しはデータ側と同じドット付き。左揃えにして「業種の対応実績」と体裁を合わせる */
.tmeffect__head { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:700; line-height:1.5; color:var(--fg-charcoal); }
.tmeffect__dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--fg-mantis-400); }
/* 5等分。縦の区切り線だけで並べ、カードの面・影・角丸は持たせない */
.tmeffect__list { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); }
.tmeffect__item {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:8px 12px; text-align:center;
  border-left:1px solid var(--fg-nav-line);
}
.tmeffect__item:first-child { border-left:0; }
/* アイコンの受け皿は S4 のガイドカード（.guide-card__ico）と同じ、
   Mantis/50 の円。サイズだけ 56 → 52px に落とす。
   2026-09-14：支給アイコン（assets/img/ico-effect-*.svg）へ差し替え。
   色は SVG に #41AF38 で焼き込まれているので currentColor は効かない */
.tmeffect__ico {
  flex:none; display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--fg-mantis-50);
}
/* 512の枠に対して絵柄が約6割なので、受け皿に対して大きめに置く */
.tmeffect__ico img { display:block; width:44px; height:44px; }
/* 「企業価値の向上」だけ絵柄が横長で枠いっぱい（約8割）。
   同じ寸法だと1つだけ大きく見えるので、光学的に揃うよう一段小さくする */
.tmeffect__item:last-child .tmeffect__ico img { width:34px; height:34px; }
.tmeffect__t { font-size:14px; font-weight:700; line-height:1.6; color:var(--fg-charcoal); }
.tmeffect__br { display:inline; }

/* --- 結論の帯 ---
   ボタンと誤解されないよう、角丸は控えめ・影なし・矢印なしで地色だけ変える */
.tmclosing {
  padding:26px var(--sp-6);
  /* 2026-09-14：指定色。地は Mantis/200 と同値、文字はランプ外の濃緑（コントラスト 5.55:1） */
  background:var(--fg-mantis-200); border-radius:var(--r-lg);
  /* 2026-09-14：ブロックの結論として見出し相当まで大きくする（15 → 20px／太字）。
     2行に固定するので中央揃えのまま、行間は詰めて塊に見せる */
  font-size:20px; font-weight:700; line-height:1.75; color:#297223; text-align:center;
}

/* --- 共通支援への接続（Figma 478:4161） -----------------------------------
   縦の破線矢印 → 帯。帯の中の白い横線は各ドットの中心を結ぶ。 */
.tmflow-next { display:flex; flex-direction:column; align-items:center; gap:30px; }
.flow-arrow { display:flex; justify-content:center; }
.flow-arrow img { display:block; width:12px; height:60px; }

.tmband {
  display:flex; justify-content:center; width:100%; padding:24px;
  background:linear-gradient(84.4deg, var(--fg-grad-to) 12.8%, var(--fg-grad-from) 74.8%);
  border-radius:var(--r-lg);
  box-shadow:var(--fg-shadow-header);
}
/* 項目は等幅。横線の端は「項目幅の半分」＝先頭／末尾のドット中心で止める */
.tmband__list { --tmb-gap:48px; display:flex; align-items:flex-start; gap:var(--tmb-gap); }
.tmband__item {
  position:relative; flex:none; width:160px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
/* 隣り合うドット同士を結ぶ白い線（Figma 478:4184）。
   left の % は自分自身の幅基準なので、-50% で1つ前の項目の中心に届く。 */
.tmband__item + .tmband__item::before {
  content:""; position:absolute; z-index:0; top:4px; height:1px;
  right:50%; left:calc(-50% - var(--tmb-gap));
  background:var(--fg-canvas);
}
/* ドットは全項目8px。終点だけ色と光の広がりが変わる */
.tmband__dot {
  position:relative; z-index:1; flex:none;
  display:flex; align-items:center; justify-content:center; width:8px; height:8px;
}
.tmband__dot::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--fg-canvas); box-shadow:0 0 10px 5px rgba(255,255,255,.45);
}
.tmband__item--goal .tmband__dot::before {
  background:var(--fg-band-goal); box-shadow:0 0 20px 15px rgba(255,255,255,.45);
}
.tmband__label {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:6px 18px;
  background:var(--fg-mantis-50); border-radius:10px;
  font-size:14px; line-height:28px; color:var(--fg-charcoal); text-align:center; white-space:nowrap;
}
/* 終点だけは文字幅ぶんの箱＋強調 */
.tmband__item--goal .tmband__label { width:auto; font-weight:700; color:var(--fg-mantis-500); }

/* --- 6-b 事業ブロック 01/02（Figma 480:4502 / 484:340） -------------------
   2026-09-07（0904CL ㉛）：01と02を縦に積んでいたのをPC・タブレットで横2列に。
   1枚の幅がコンテンツ1200pxの半分（584px）まで落ちるので、
   ブロック内は「テキスト → イラスト」の縦積みにし、見出し・本文も一段小さくする。
   SPは1列に戻す（先方コメント「スマホは別として」）。 */
/* display:flow-root は矢印の負のマージンがセクションごと持ち上げないため
   （相殺されると白面の上端＝地色の境目まで一緒に動いてしまう） */
.bizsec { position:relative; display:flow-root; background:var(--fg-canvas); padding-block:0 56px; }
/* 帯 → サービスカードの矢印（Figma 484:492）。
   矢印はイントロの淡いグリーンと事業ブロックの白の両方にまたがって置く。
   帯の下端から34px下＝セクションの境目より22px上に上端が来る。 */
.bizsec__arrow { margin-top:-22px; margin-bottom:18px; }
/* 2列。align-items は既定の stretch のままにして、01と02の高さを揃える */
.bizsec__inner { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px; }

.bizblock {
  /* 領域テーマ。--biz-fill と --biz-btn-on はホバー時（Figma 480:4503 / 484:342）用 */
  --biz-key:var(--fg-waste-500);
  --biz-fill:var(--fg-waste-400);
  --biz-btn-on:var(--fg-waste-500);
  /* 2026-09-06：テーマ入替に伴い、チェックアイコンと影を資源循環側と交換 */
  --biz-check:url("img/TOP/check-18-mint.svg");
  --biz-btn-bg:linear-gradient(90deg, var(--fg-biz-waste-from) 0%, var(--fg-waste-500) 100%);
  --biz-btn-shadow:0 10px 22px -2px rgba(51,184,144,.32);
  /* 状態で入れ替わる値。子はこれを参照するだけにして、ホバーの指定を1か所に集める */
  --biz-head-ink:var(--biz-key);
  --biz-body-ink:var(--ink-body);
  --biz-btn-face:var(--biz-btn-bg);
  --biz-btn-ink:var(--fg-canvas);
  /* ホバー時のボタン面。単色ではなく同型のグラデーションで持つと、
     ブロックの色変化と同じ長さで滑らかに補間される（単色との間は補間できない） */
  --biz-btn-face-on:linear-gradient(90deg, var(--fg-canvas) 0%, var(--fg-canvas) 100%);
  display:flex; flex-direction:column; gap:32px;
  padding:40px; border-radius:var(--fg-radius-card);
  transition:background-color var(--dur-slow) var(--ease);
}
.bizblock--circular {
  --biz-key:var(--fg-circ-500);
  --biz-fill:var(--fg-circ-500);
  --biz-btn-on:var(--fg-circ-600);
  --biz-check:url("img/TOP/check-18-blue.svg");
  --biz-btn-bg:linear-gradient(90deg, var(--fg-biz-circ-from) 0%, var(--fg-biz-circ-to) 100%);
  --biz-btn-shadow:0 10px 22px -2px rgba(52,177,253,.32);
}

/* ホバー：ブロック全体を領域色で塗り、文字を白に。ボタンだけ白地へ反転する。
   タッチ端末はホバーが貼り付くので hover:hover に限定し、
   キーボード操作（ボタンへのフォーカス）では :focus-within で同じ状態にする。 */
@media (hover:hover) {
  .bizblock:hover {
    background-color:var(--biz-fill);
    --biz-head-ink:var(--fg-canvas);
    --biz-body-ink:var(--fg-canvas);
    --biz-btn-face:var(--biz-btn-face-on);
    --biz-btn-ink:var(--biz-btn-on);
  }
}
.bizblock:focus-within {
  background-color:var(--biz-fill);
  --biz-head-ink:var(--fg-canvas);
  --biz-body-ink:var(--fg-canvas);
  --biz-btn-face:var(--biz-btn-face-on);
  --biz-btn-ink:var(--biz-btn-on);
}

/* 2列になって本文幅が 520px → 504px（内側）に。テキスト側を伸ばして
   イラストを各カードの下端へ揃える（見出しの行数が01と02で違うため） */
.bizblock__body { flex:1 1 auto; width:100%; display:flex; flex-direction:column; gap:28px; }
/* 番号の行送りが大きいので、見出しとの間隔は詰める */
.bizblock__head { display:flex; flex-direction:column; gap:8px; }
.bizblock__no,
.bizblock__title,
.bizblock__text,
.bizblock__list li { transition:color var(--dur-slow) var(--ease); }
/* 2026-09-07（0904CL ㉛）：横2列に伴い1段ずつ縮小（32→26／44→32／21→17） */
.bizblock__no { font-family:var(--font-num); font-size:26px; font-weight:700; line-height:1.6; color:var(--biz-head-ink); }
.bizblock__title { font-size:32px; font-weight:700; line-height:1.35; line-break:strict; color:var(--biz-head-ink); }
/* 02の見出しは2列だと「…エコノミ／ー支援」のように語中で切れるので、
   「資源循環・」の後で明示的に折る。SPは1列でカードが細く、この位置で折ると
   3行以上になるため解除する（下の767px指定） */
.bizblock__br { display:inline; }
.bizblock__text { font-size:17px; line-height:1.75; color:var(--biz-body-ink); }

/* 主な支援内容。上罫で本文と切り分ける。チェックアイコンはホバーでも同じ */
.bizblock__list {
  display:flex; flex-direction:column; gap:12px;
  padding-top:22px; border-top:1px solid var(--fg-nav-line);
}
.bizblock__list li {
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:500; line-height:1.2; color:var(--biz-body-ink);
}
.bizblock__list li::before {
  content:""; flex:none; width:18px; height:18px;
  background:var(--biz-check) center / contain no-repeat;
}

.bizbtn {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  width:320px; padding:16px 16px 16px 26px;
  background-color:var(--fg-canvas); background-image:var(--biz-btn-face);
  box-shadow:var(--biz-btn-shadow);
  border-radius:var(--r-full); text-decoration:none;
  font-size:16px; font-weight:700; line-height:26px; color:var(--biz-btn-ink);
  transition:background-image var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease),
             translate var(--dur) var(--ease);
}
/* ボタン自体に乗ったときだけ、リンクであることが分かる小さな動きを足す */
.bizbtn:hover { translate:0 -2px; }
.bizbtn__ico { display:block; flex:none; width:28px; height:28px; }

/* 2026-09-07（0904CL ⑫）：写真（縦500×560をcoverでトリミング＋角丸）から
   透過PNGのイラストへ。原比率のまま置くので object-fit と角丸は外す。
   横位置になったぶん高さが足りなくなるので、テキストとの間隔を詰めて
   受け皿の幅を稼ぎ、絵の周囲の透明余白ぶんは負のマージンで外へ逃がす。 */
/* 縦積みなのでテキストの下。margin-top:auto で、見出しの行数が違っても
   01と02のイラストがカード下端で揃う */
.bizblock__visual { width:100%; margin-top:auto; display:flex; align-items:flex-end; justify-content:center; }
.bizblock__visual picture { display:block; width:100%; margin-inline:-6%; }
.bizblock__visual img { display:block; width:100%; height:auto; }


/* =============================================================================
   7. S4 なぜ今（Figma: 見出し＋イラスト横並び／Card / Small / Introduction Guide）
   ========================================================================== */
/* 下端の余白は締めの帯（.closing-band）が持つので、セクション側は 0 */
.axes-sec { background:var(--fg-gray); padding-bottom:0; }
.axes-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-6); }
.axes-sec .sec-head { max-width:none; margin-bottom:0; }
.axes-head__visual { flex:none; width:448px; }
.axes-head__visual picture { display:block; }
.axes-head__visual img { display:block; width:100%; height:auto; }

/* 2026-09-07（0904CL ⑮）：業種別カードの一覧
   -----------------------------------------------------------------------------
   もとは横スライド（.axes-slider__track）だったが、6件を一度に見渡せるよう
   3列×2行のグリッドへ。見切れが無いので操作部（.slider-nav）も置かない。
   下の余白はカードの影（下方向56px）を避ける量を足している。 */
.axes-grid {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-5);
  padding-block:56px var(--sp-7);
  margin-top:-56px;
}

/* 横スライドの操作部：進捗バー（ドラッグで送れる）＋前後の丸ボタン。
   参考: mech.w3.kanazawa-u.ac.jp の postSwiper_nav（バーが残り幅を取り、右に前後ボタン）。
   BACKGROUND / CASE STUDY / SEMINAR 共通＝横スライドの標準の操作部。
   [data-carousel] のルート（.slider-set）にトラックと並べて置く。トラックは画面端まで
   伸びるので、操作部だけをコンテンツ幅の .slider-set 側に出している。
   上の余白はカードの影（下方向56px）を避ける量。 */
.slider-nav { display:flex; align-items:center; gap:16px; margin-top:56px; }
.slider-nav__bar {
  flex:1 1 auto; position:relative; height:4px;
  border-radius:2px; background:var(--fg-mantis-50);
  cursor:pointer; touch-action:none;
}
.slider-nav__thumb {
  position:absolute; top:0; bottom:0; left:0; width:100%;
  border-radius:2px; background:var(--fg-mantis-400);
}
.slider-nav__btn {
  flex:none; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--fg-band-line); border-radius:50%;
  box-shadow:var(--sh-1); color:var(--fg-mantis-600); cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.slider-nav__btn svg { width:18px; height:18px; }
.slider-nav__btn:hover { border-color:var(--fg-mantis-400); background:var(--fg-pale-green); }
.slider-nav__btn[disabled] { opacity:.35; cursor:default; }
.slider-nav__btn--prev { transform:scaleX(-1); }

/* 小カード（番号＋見出し＋説明）。リンク先が無いので丸矢印は置かない。
   2026-09-07（0904CL ⑮）：3列になって1枚あたりの幅が 384px → 約373px から
   内側 309px まで下がるので、余白と文字を一段落とす。
   見出しは番号と同じ行へ移し（.guide-card__group）、26px → 22px へ1サイズ縮小。 */
.guide-card {
  display:flex; flex-direction:column; gap:var(--sp-4);
  padding:28px; background:var(--fg-canvas);
  border-radius:var(--fg-radius-card);
  box-shadow:var(--fg-shadow-neu);
}
/* 番号＋見出しが左、アイコンは右（Figma 437:2034）。
   flex-start だとアイコン（56px）が見出しの行より背が高いぶん、見出しの下に
   空きが残って本文までの間隔がカード余白（28px）を超えて見える。
   アイコンの下端に見出しを揃えることで、本文までは gap ぶんだけにする。 */
.guide-card__head { width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); }
/* 番号と見出しを横並びに。上下は中央で揃える */
.guide-card__group { display:flex; align-items:center; gap:10px; min-width:0; }
.guide-card__ico {
  flex:none; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:var(--fg-mantis-50); border-radius:50%;
}
.guide-card__ico img { display:block; width:34px; height:34px; object-fit:contain; }
.guide-card__no {
  flex:none;
  font-size:14px; font-weight:700; line-height:1.6;
  background:linear-gradient(180deg,#1a6b23,#2f8226);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.guide-card__t { font-size:20px; font-weight:700; line-height:1.4; color:var(--fg-charcoal); }
.guide-card__d { font-size:15px; line-height:1.85; color:var(--fg-charcoal); }

/* 締め：見出し＋吹き出し型の課題別導線（Figma 129:90 / 271:3186）
   この帯だけ地色が #E7F0F9 になる（S4上段は --fg-gray のまま）。
   全幅で塗るため .jw の外に帯を1枚置き、上下の余白は帯が持つ。
   セクション側の padding-bottom は帯と二重になるので 0 にしている。 */
/* 上は業種カードとの間を空けたいので、セクション間隔に一段足す */
.closing-band { background:var(--fg-closing-bg); padding-block:calc(var(--sec-gap) + var(--sp-6)) var(--sec-gap); }
.closing { display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.closing__head { display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center; }
.closing__sub { font-size:15px; font-weight:700; line-height:1.8; color:var(--fg-mantis-600); }
.closing__lead { font-size:clamp(19px,2.2vw,24px); font-weight:700; line-height:1.5; color:var(--ink); }
.closing__body { width:100%; display:flex; flex-direction:column; }

/* 廃棄物マネジメントTOPのISSUESブロック（.wm-issues）と同じ並べ方＝横1列のグリッド */
/* 同じ行のカードは高さを揃える（矢印の位置が横に並ぶ） */
.issuenav { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; padding-top:var(--sp-5); }

/* 吹き出し：カード本体＋下の丸2つのしっぽ。
   大きい丸はカード下辺に食い込ませ、カードと地続きに見せる（同じ白面）。
   寸法は .wm-issue__tail（68×36）に合わせている。 */
/* 2026-09-13：吹き出しのテーマ色。既定はJEMSグリーン。
   カードとしっぽ（兄弟要素）の両方から参照するので、変数は親の .balloon に置く */
.balloon {
  --pk-line:var(--fg-mantis-200);   /* ピルの既定の罫線 */
  --pk-key:var(--fg-mantis-400);    /* ホバー時の罫線（カード・しっぽ・ピル共通） */
  --pk-ink:var(--fg-mantis-600);    /* ホバー時の見出し・ピルの文字 */
  --pk-tint:var(--fg-mantis-50);    /* ホバー時のピルの地 */
  display:flex; flex-direction:column; align-items:center;
}
/* 4枚目のみ遷移先が資源循環マネジメント。Picton Blue へ入れ替える。
   ホバー時の文字は circ-600（#0078CC）だと地の #F0F8FF に対して 4.29:1 で
   AAに届かないため、1段濃い 700 を使う（6.16:1）。グリーン版は 5.27:1 */
.balloon--circular {
  --pk-line:var(--fg-circ-200);
  --pk-key:var(--fg-circ-400);
  --pk-ink:var(--fg-circ-700);
  --pk-tint:var(--fg-circ-50);
}
.balloon__tail { position:relative; width:68px; height:36px; }
.balloon__tail::before,
.balloon__tail::after {
  content:""; position:absolute; border-radius:50%; background:var(--fg-canvas);
  /* 罫線はホバーで色を付けるだけにして、寸法が動かないよう常に1px持たせておく */
  border:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
.balloon__tail::before { left:16px; top:-20px; width:36px; height:36px; }
.balloon__tail::after  { left:8px;  top:24px;  width:12px; height:12px; }

.pickup-card {
  position:relative; z-index:1;
  flex:1 1 auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:18px;
  /* 2026-09-13：下端にピル型の導線が入ったぶん、上下の余白を組み直した
     （32/32 → 28/20）。左右も少し広げて窮屈に見えないようにする */
  padding:28px 18px 20px; background:var(--fg-canvas);
  border:1px solid transparent; border-radius:16px;
  overflow:hidden; text-decoration:none;
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* 2026-09-07：リンクだと気づきにくいので、ホバー・フォーカスでグリーンの罫線を出す。
   しっぽの丸にも同じ罫線を回して、吹き出し1つとして囲まれて見えるようにする */
/* 2026-09-13：キーボード操作でもホバーと同じ強さで分かるよう、影もフォーカスに揃える */
.pickup-card:hover,
.pickup-card:focus-visible { background:var(--fg-canvas); box-shadow:var(--sh-1); border-color:var(--pk-key); }
.pickup-card:hover ~ .balloon__tail::before,
.pickup-card:hover ~ .balloon__tail::after,
.pickup-card:focus-visible ~ .balloon__tail::before,
.pickup-card:focus-visible ~ .balloon__tail::after { border-color:var(--pk-key); }
.pickup-card__body { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.pickup-card__title { font-size:16px; font-weight:700; line-height:1.7; color:var(--fg-charcoal); transition:color var(--dur) var(--ease); }
/* 2026-09-07（0904CL ㉜）：PC・タブレットは指定位置で必ず2行に折る。
   自然折り返しに任せると「委託契約｜書」「統｜一」のように語中で切れるため。
   SPはカードが細く、この位置で折ると3行以上になるので改行を解除する（下の767px指定） */
.pickup-card__br { display:inline; }
/* リンクだと分かりにくいので、ホバーで見出しを緑に振る */
.pickup-card:hover .pickup-card__title,
.pickup-card:focus-visible .pickup-card__title { color:var(--pk-ink); }
/* 2026-09-13：補足文（.pickup-card__text）と単独の矢印（.pickup-card__arrow）を、
   遷移先が読み取れるピル型の導線へ置き換えた。
   .pill-btn「導入事例一覧を見る」（254×48／14px）を基準に、カード内の補助導線なので
   一回り小さい寸法（高さ40px／13px／矢印18px）で組む。
   吹き出し全体が1つの <a> なので、ここは span だけで作る＝リンクの入れ子を作らない。
   margin-top:auto で、見出しが1行でも2行でもピルはカード下端に来る。
   .issuenav は align-items:stretch で同じ行のカード高さが揃うため、
   結果として4枚のピルの縦位置・幅・高さがすべて一致する。 */
.pickup-card__cta {
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; min-height:40px; padding:9px 10px;
  background:var(--fg-canvas); border:1px solid var(--pk-line);
  border-radius:var(--r-full);
  font-size:13px; font-weight:500; line-height:1.4; color:var(--fg-charcoal);
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
/* 右の丸矢印と対になる余白を左に置き、ラベルを光学的な中央へ寄せる（.pill-btn と同じ作り） */
.pickup-card__cta::before { content:""; flex:none; width:18px; height:18px; }
.pickup-card__cta-txt { flex:1 1 auto; min-width:0; text-align:center; }
.pickup-card__cta img {
  flex:none; display:block; width:18px; height:18px;
  transition:translate var(--dur) var(--ease);
}
/* ホバー・フォーカスはカード側の <a> が起点。カードのどこに乗ってもピルが連動する。
   既存の枠線・影・見出し色の変化に、ピルの地・罫線・文字色・矢印の動きを足す */
.pickup-card:hover .pickup-card__cta,
.pickup-card:focus-visible .pickup-card__cta {
  background:var(--pk-tint); border-color:var(--pk-key); color:var(--pk-ink);
}
.pickup-card:hover .pickup-card__cta img,
.pickup-card:focus-visible .pickup-card__cta img { translate:2px 0; }
@media (prefers-reduced-motion:reduce) {
  .pickup-card:hover .pickup-card__cta img,
  .pickup-card:focus-visible .pickup-card__cta img { translate:none; }
}

/* =============================================================================
   8. S5 導入事例 / S6 セミナー（Figma 141:5782 / 141:5954）
   ========================================================================== */
.cases { background:var(--fg-canvas); padding-block:72px 0; }
/* 2026-09-07（0904CL ⑱）：セミナー〜お知らせの余白。末尾の .cases__actions が
   すでに下64pxを持つため、.jsec の下72pxと重なって空きすぎていた。
   同じ構造の .cases（padding-block:72px 0）に合わせて下だけ0にする */
.seminars { background:var(--fg-gray); padding-bottom:0; }

/* --- 小見出し（ドット＋テキスト） --- */
.subsec2 { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:700; line-height:1.5; color:var(--ink); }
.subsec2__dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--fg-mantis-400); }

/* 見出し＋説明の右に装飾イラスト（Figma 271:3137）。S4「なぜ今〜」と同じ考え方。
   画像はFigma側の色調整（露出+0.18／彩度-0.08）とトリミングを反映した書き出し。
   透明部分をほぼ詰めたトリミングなので、絵の見え幅 ≒ 箱の幅（約97%）。
   右はページのガターぶんはみ出させて、右上から画面端へ抜けていく形にする。 */
.cases__lead { position:relative; z-index:0; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-6); }
/* height:0 で行の高さに算入させない。イラストは下へはみ出して実績カードの裏に
   回り込む（見出し・説明文の下に余白が空かないように）。 */
.cases__deco {
  flex:none; width:352px; height:0;
  /* 上に残る透明余白（高さの約5.7%＝約17px）を打ち消して、絵の天を見出しの天に合わせる */
  margin:-17px calc(-1 * var(--page-padding)) 0 0;
  pointer-events:none;
}
.cases__deco picture { display:block; }
.cases__deco img { display:block; width:100%; height:auto; }
/* 実績カードはイラストより前面に */
.indblock { position:relative; z-index:1; }

/* --- 業種の対応実績（Figma 141:5782。事例カルーセルは廃止） --- */
.cases__head { flex:1 1 auto; min-width:0; max-width:none; margin-bottom:0; padding-bottom:var(--sp-5); }
.indblock { padding-block:32px; display:flex; flex-direction:column; gap:var(--sp-5); }
/* 2026-09-09：横スライド（.carousel）をやめ、SEMINAR（.semgrid）と同じ
   4列×2行のグリッドで8件を一度に見せる。カード幅はグリッドが決めるので
   .carousel__track--case の固定幅は使わない。
   .indcard に影は無いので、.semgrid のような影ぶんの padding 補正は不要。 */
.indgrid {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-5);
}
/* カードはセミナーカード（.casecard）と同じ寸法。
   余白・間隔・サムネ比率を .casecard に揃える。 */
.indcard {
  display:flex; flex-direction:column; gap:12px;
  padding:16px; background:var(--fg-card-tint);
  border:1px solid var(--fg-card-line); border-radius:16px;
}
/* 実写画像は受け皿いっぱいに敷く。カード幅が変わっても比率が崩れないよう
   aspect-ratio で持たせ、はみ出しは cover で切る。
   角丸は画像に焼き込まず、ここで clip する。 */
.indcard__visual {
  display:block; overflow:hidden;
  aspect-ratio:160 / 90; background:var(--fg-canvas); border-radius:12px;
}
/* 画像が未支給のカードのダミー枠。セミナーカードのサムネ（.casecard__thumb）と同じ扱い */
.indcard__visual--ph {
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-sub);
  font-size:12px; line-height:1.7; color:var(--ink-muted); text-align:center;
}
.indcard__visual picture { display:block; height:100%; }
.indcard__visual img { display:block; width:100%; height:100%; object-fit:cover; }
.indcard__body { display:flex; flex-direction:column; gap:8px; }
.indcard__no { font-size:12px; font-weight:700; line-height:1.6; color:var(--fg-mantis-600); }
.indcard__lead { display:flex; flex-direction:column; gap:8px; }
.indcard__title { font-size:16px; font-weight:700; line-height:1.5; color:var(--fg-charcoal); }
.indcard__text { font-size:13px; line-height:1.7; color:var(--fg-charcoal); }

/* --- カルーセル ---
   Figmaどおり、スライド列は右端で切らずに画面外まで伸ばす。
   （Figma: カード列1564px を 1440px フレーム内の x=80 に配置＝右へ約200px はみ出す） */
.carousel { position:relative; margin-right:calc(-50vw + 50%); }
/* 見出しの margin-bottom(24) と隣接マージンが相殺されるため、
   見出し側を0にして 24+30=54px を明示する（.semgrid の上padding 56px と合わせて54pxになる値） */
.seminars .sec-head { margin-bottom:0; }
/* 2026-09-13（0909CL ⑥）：.semgrid（上padding 56px で54pxを作っていた）から
   .hc-smlist へ差し替えたので、見出しとカードの間隔をここで持つ。
   .sec-head の margin-bottom は上で0にしてあるため、実値をそのまま書く */
.seminars .hc-smlist { margin-top:54px; }
@media (max-width:1023px) { .seminars .hc-smlist { margin-top:40px; } }
@media (max-width:767px)  { .seminars .hc-smlist { margin-top:32px; } }
/* overflow-x:auto はスクロール枠になり、カードの影を矩形で切ってしまう。
   影の分だけ内側にpaddingを取り、同量の負マージンで位置を戻すことで
   境界線が出ないようにする（左右はコンテナのpaddingと同値なので画面外に出ない）。 */
.carousel__track {
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden;
  /* ニューモーフィック影（最大 16+40=56px）が矩形で切れて直線に見えないよう、
     影が収まるだけの余地を内側に取り、同量の負マージンで位置を戻す */
  padding:56px var(--page-padding) 64px;
  margin:-56px 0 -64px calc(-1 * var(--page-padding));
  scroll-padding-inline-start:var(--page-padding);
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar { display:none; }
.carousel__track > * { scroll-snap-align:start; }
.carousel__track--case > * { flex:0 0 300px; }
.carousel__arrow {
  position:absolute; top:calc(50% - 20px); width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--fg-band-line); border-radius:50%; box-shadow:var(--sh-1);
  color:var(--fg-mantis-600); cursor:pointer;
}
.carousel__arrow svg { width:18px; height:18px; }
.carousel__arrow:hover { border-color:var(--fg-mantis-400); background:var(--fg-pale-green); }
.carousel__arrow[disabled] { opacity:.35; cursor:default; }
.carousel__arrow--prev { left:6px; transform:scaleX(-1); }
.carousel__arrow--next { right:6px; }

/* --- 事例カード --- */
.casecard {
  display:flex; flex-direction:column; gap:12px; padding:16px;
  background:var(--fg-canvas); border-radius:16px; overflow:hidden;
  text-decoration:none; color:var(--fg-charcoal);
  box-shadow:
    -16px 16px 32px rgba(235,235,235,.2), 16px -16px 32px rgba(235,235,235,.2),
    -16px -16px 32px rgba(255,255,255,.9), 16px 16px 40px rgba(235,235,235,.9),
    inset 1px 1px 2px rgba(255,255,255,.3), inset -1px -1px 2px rgba(235,235,235,.5);
  transition:box-shadow var(--dur) var(--ease);
}
.casecard:hover { box-shadow:16px 16px 40px rgba(182,220,171,.5); }
.casecard__thumb {
  aspect-ratio:160/90; display:flex; align-items:center; justify-content:center;
  background:var(--surface-sub); border-radius:16px; overflow:hidden;
  font-size:12px; line-height:1.7; color:var(--ink-muted); text-align:center;
}
.casecard__body { display:flex; flex-direction:column; gap:8px; }
.casecard__meta { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.tag-pill {
  display:inline-flex; align-items:center; padding:3px 10px;
  background:var(--fg-pale-green); border-radius:var(--r-full);
  font-size:12px; line-height:18px; color:var(--fg-mantis-600); white-space:nowrap;
}
.casecard__date { font-size:12px; line-height:20px; color:#777; white-space:nowrap; }
.casecard__title { font-size:14px; font-weight:700; line-height:1.5; color:var(--fg-charcoal); }
.casecard__hash { font-size:12px; line-height:20px; color:#969696; }

/* --- セミナーカード（サムネ上にステータス／日時・会場） --- */
/* 2026-09-07（0904CL ⑰）：横スライドをやめ、4列×2行で8件を一度に見せる。
   見切れが無いので操作部（.slider-nav）も置かない。
   上下の余白はカードの影（16+40=56px）が矩形で切れない量を確保する。 */
.semgrid {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-5);
  /* 上は見出しから54px空ける（padding 56 − margin 2）。下は影のぶんだけ残して詰める */
  padding-block:56px 64px;
  margin-block:-2px -24px;
}
.semcard__thumb { position:relative; }
.semcard__status {
  position:absolute; top:8px; left:8px;
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; background:var(--fg-canvas); border-radius:6px;
  font-size:12px; font-weight:700; line-height:1.5;
}
/* 2026-09-07：白地に乗るので、ミント400（白と1.5:1）ではなく700（4.3:1）へ */
.semcard__status--open   { color:var(--fg-waste-700); }
.semcard__status--soon   { color:var(--warn-ink); }
.semcard__status--closed { color:var(--ink-muted); }
.semcard__dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.semcard__body { gap:16px; }
.semcard__group { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.semcard__info { display:flex; flex-direction:column; gap:8px; }
.semcard__row { display:flex; align-items:center; gap:4px; font-size:14px; font-weight:500; line-height:1.2; color:var(--fg-charcoal); }
.semcard__row img { display:block; width:12px; height:12px; }

/* --- セクション下のボタン --- */
.cases__actions { display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:center; align-items:center; padding:16px 0 64px; }
/* 下層ページ導線のボタン。寸法・字組はS8 CTAのボタン（.cvbtn）に合わせる */
.gbtn, .pill-btn {
  display:inline-flex; align-items:center; justify-content:space-between; gap:12px;
  width:254px; min-height:48px; padding:14px 12px; border-radius:var(--r-full);
  font-size:14px; font-weight:500; line-height:1.4; color:#fff; text-decoration:none;
  transition:filter var(--dur) var(--ease);
}
/* 右の丸矢印と対になる20pxの余白を左に置き、ラベルを光学的な中央へ寄せる */
.gbtn::before,
.pill-btn::before { content:""; flex:none; width:20px; height:20px; }
.gbtn > span,
.pill-btn > span { flex:1 1 auto; min-width:0; text-align:center; }
.gbtn img, .pill-btn img { display:block; width:20px; height:20px; flex:none; }
.gbtn:hover, .pill-btn:hover { filter:brightness(1.04); }
/* S8 CTAのボタンと同じく、グラデーション・影は使わずベタ塗り＋枠線のみ */
/* 2026-09-06：色名クラス .gbtn--blue は入替後に実態と食い違うため .gbtn--waste へ改名。
   .gbtn--green はJEMS共通グリーンのままなので据え置き */
/* 白文字が乗る。2026-09-13のランプ再調整で500は 1.84:1→2.50:1 になったが、まだ基準未達。
   白文字ボタンとして成立させるには700（4.45:1）へ移す必要がある（役割の再割り当ては別途）。
   隣の .gbtn--green は 2.1:1 */
.gbtn--waste { background:var(--fg-waste-500); }
.gbtn--green { background:var(--fg-mantis-400); }
/* 2026-09-07（0904CL ㉘）：事業部TOPの「資源循環支援を見る」だけはブルー。
   .gbtn--green は共通コンテンツ8画面で汎用のJEMSグリーンとして使い回しているので、
   置き換えずに資源循環用のクラスを足す。白文字とのコントラストは .gbtn--waste と同じ500段で揃える */
.gbtn--circular { background:var(--fg-circ-500); }
.pill-btn { background:var(--fg-canvas); color:var(--fg-charcoal); border:1px solid var(--fg-mantis-200); }

/* =============================================================================
   9. S8 ご相談・資料請求（Figma: SP 202:207 / PC 215:80）
   ========================================================================== */
/* 下パディングに角丸ぶんを足しておき、フッターを同量だけ重ねる。
   こうするとフッターの上部角丸が抜けてCTAの地色が覗く
   （Figma SP 197:929＝CTAとフッターを同じ地色の上に重ねる構造）。
   見た目の余白は足したぶんが隠れるので従来どおり。 */
.jcta2 { position:relative; overflow:hidden; background:var(--fg-cta-grad); padding-block:72px calc(72px + var(--fg-radius-block)); }
.jcta2__inner { position:relative; z-index:1; }
/* 紙飛行機は右上へ抜ける装飾。見出しに重なるので透過して可読性を確保する */
/* 2026-09-13（0909CL ⑰）：帯を濃くしたぶん、淡いグリーンの紙飛行機が地から浮いて
   見出しと視線を奪い合うようになった。ただし完全に沈めると帯が平板になるので、
   奥行きが出るぎりぎりまで戻す（.42 → .22） */
.jcta2__plane { position:absolute; top:-76px; right:-96px; width:560px; opacity:.22; pointer-events:none; }
.jcta2__plane img { display:block; width:100%; height:auto; }
/* 見出しは左揃え・全幅（共通 .sec-head の max-width と下マージンを解除）。
   Figmaは EN／見出し／リードが等間隔8pxなので、共通styleの6px・12pxを揃え直す */
.jcta2__head { max-width:none; margin-bottom:0; padding-bottom:32px; }
.jcta2__head .sec-head__en { margin-bottom:8px; }
.jcta2__head .sec-head__lead { margin-top:8px; line-height:1.7; }
/* 地色が緑グラデーションになったので、セクション直下のテキストは白 */
.jcta2__head .sec-head__en,
.jcta2__head .sec-head__title,
.jcta2__head .sec-head__lead,
.jcta2 > .jcta2__inner > .u-tnote { color:var(--fg-canvas); }
.jcta2__cards { display:flex; align-items:stretch; gap:var(--sp-5); padding-bottom:20px; }

/* 領域別CTAカード。ミント＝廃棄物マネジメント／ブルー＝資源循環マネジメント */
.cta-card {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:20px;
  padding:32px; background:var(--fg-canvas); border-radius:16px;
  box-shadow:0 8px 14px rgba(0,0,0,.05);
}
/* 2026-09-07：白カードの上でミント400（白文字1.92:1）／500（2.50:1）の文字は視認性が低いため、
   FVボタンと同じ 塗り600・文字700 に統一する。
   資料請求（.cvbtn--outline）の罫線もミント200では出ないので、文字と同じ700（#1D8466）へ。
   資源循環側が罫線400・文字600で見えているのと同じ強さに揃える */
.cta-card[data-theme="waste"]    { --cta-fill:var(--fg-waste-600); --cta-line:var(--fg-waste-700); --cta-ink:var(--fg-waste-700); }
.cta-card[data-theme="circular"] { --cta-fill:var(--fg-circ-500);  --cta-line:var(--fg-circ-400);  --cta-ink:var(--fg-circ-600); }
/* 本文側を伸ばして、2枚のカードでボタン行の位置を揃える */
.cta-card__body { flex:1 1 auto; display:flex; flex-direction:column; gap:12px; }
.cta-card__title { font-size:26px; font-weight:700; line-height:1.4; color:var(--fg-charcoal); }
.cta-card__text { font-size:14px; line-height:1.7; color:var(--fg-charcoal); }
.cta-card__btns { display:flex; gap:var(--sp-4); padding-top:4px; }

/* CVボタン：左に20pxの余白を置き、ラベルを光学的な中央に寄せて右端に丸矢印 */
.cvbtn {
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  min-height:48px; padding:14px 12px; border-radius:var(--r-full);
  text-decoration:none; transition:filter var(--dur) var(--ease);
}
.cvbtn:hover { filter:brightness(1.04); }
.cvbtn__pad { flex:none; width:20px; height:20px; }
.cvbtn__txt { flex:1 1 auto; min-width:0; text-align:center; font-size:14px; font-weight:500; line-height:1.4; }
.cvbtn__ico { flex:none; display:block; width:20px; height:20px; }
.cvbtn--fill { background:var(--cta-fill); color:var(--fg-canvas); }
.cvbtn--outline { background:var(--fg-canvas); color:var(--cta-ink); border:1px solid var(--cta-line); }

/* =============================================================================
   10. S9 フッター（Figma: SP 199:207 / PC 205:80）
   ========================================================================== */
.jfooter2 {
  position:relative; z-index:1; overflow:hidden;
  margin-top:calc(-1 * var(--fg-radius-block));
  background:var(--fg-canvas);
  border-radius:var(--fg-radius-block) var(--fg-radius-block) 0 0;
}
.jfooter2__inner { display:flex; align-items:flex-start; gap:var(--sp-7); padding-block:72px 56px; }
.jfooter2__brand { flex:none; width:320px; display:flex; flex-direction:column; gap:20px; }
.jfooter2__logo { display:block; width:160px; height:auto; }
.jfooter2__lead { font-size:14px; line-height:1.7; color:var(--fg-charcoal); }
.jfooter2__nav { flex:1 1 auto; min-width:0; display:flex; align-items:flex-start; gap:40px; }
.jfooter2__nav > * { flex:1 1 0; min-width:0; }

.fgroup { display:flex; flex-direction:column; gap:4px; }
/* フッターは全ページ共通。CTAカードと同じくFVボタンの配色に統一する
   （--f-accent は見出しバー・リンクhoverなので400のまま） */
.fgroup[data-theme="waste"] {
  --f-accent:var(--fg-waste-400);
  --cta-fill:var(--fg-waste-600); --cta-line:var(--fg-waste-700); --cta-ink:var(--fg-waste-700);
}
.fgroup[data-theme="circular"] {
  --f-accent:var(--fg-circ-500);
  --cta-fill:var(--fg-circ-500); --cta-line:var(--fg-circ-400); --cta-ink:var(--fg-circ-600);
}
.fgroup[data-theme="jems"] { --f-accent:var(--fg-mantis-400); }
.fgroup__head { display:flex; align-items:center; gap:var(--sp-2); padding-block:2px; font-size:13px; font-weight:700; line-height:1.5; color:var(--fg-charcoal); }
.fgroup__bar { flex:none; width:3px; height:14px; border-radius:2px; background:var(--f-accent); }
.fgroup__links a {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-block:13px; border-bottom:1px solid var(--fg-mantis-100);
  font-size:14px; line-height:1.6; color:var(--fg-charcoal); text-decoration:none;
}
.fgroup__links a:hover { color:var(--f-accent); }
.fgroup__links img { flex:none; display:block; width:8px; height:8px; }
.fgroup__cv { display:flex; flex-direction:column; gap:var(--sp-3); padding-top:var(--sp-4); }
/* 事業領域の2列はリンク数が3と2で段差が出るため、リスト高（49px×3）を揃えてCVの位置を合わせる */
.fgroup--svc .fgroup__links { min-height:147px; }
.fgroup-stack { display:flex; flex-direction:column; gap:var(--sp-6); }
.jfooter2__copy { background:var(--fg-mantis-50); padding-block:var(--sp-5); font-size:12px; line-height:1.5; color:var(--fg-charcoal); text-align:center; }

/* =============================================================================
   11. 共通ユーティリティ（本ページ用）
   ========================================================================== */
.jrow--center { justify-content:center; }

/* =============================================================================
   12. レスポンシブ
   ========================================================================== */
@media (max-width:1199px) {
  /* S5：見出しの行が詰まるのでイラストを一回り小さく */
  .cases__deco { width:294px; margin-top:-14px; }
  /* S3-a：帯の5項目（160px×5＋48px×4＝992px）が入らなくなる幅から詰める */
  .tmband__list { --tmb-gap:32px; }
  .tmband__item { width:150px; }
  /* S3-b：2列のまま、カード余白と見出しを詰める */
  .bizblock { gap:24px; padding:32px; }
  .bizblock__title { font-size:28px; }
}

/* FVの左右配置は、1240px を下回るとコピー（「資源がめぐる未来へ。」）と
   MVの保護領域（循環ルートの左弧・左上ノード）が干渉し始める。実測での最小
   クリアランスは 1240px で23px・1200px で8px・1140px で重なり。
   そこで 1239px 以下は「コピー → MV → 実績帯」の縦積みへ切り替える。
   端末名ではなく、この干渉が始まる幅をブレークポイントにしている。 */
@media (max-width:1239px) {
  .fv {
    padding-block:0 var(--sp-6);
    /* 帯の「窓」＝保護領域を収める高さ。テキストの位置はこの値で決まる */
    --mv-window-h:clamp(240px, 50vw, 520px);
    --mv-overlap:40px;
    /* 窓の下へさらに伸ばす量。ここがテキストエリアに重なり、
       この範囲で画像を透過させて境界をなくす（矩形の切れ目を作らない） */
    --mv-bleed:clamp(56px, 12vw, 120px);
  }
  /* MVは画面幅いっぱいの帯（DOM順どおりコピーの上）。保護領域を窓の中に収め、
     周辺風景だけを窓の外へ逃がす。
     帯は窓＋--mv-bleed の高さを持ち、はみ出した分は負のマージンで引き上げるので、
     テキストの位置は窓の下端のまま（帯だけがテキストの背面へ潜り込む） */
  .fv__visual {
    position:relative; inset:auto;
    width:100%;
    /* 画面が狭いときは画像を縮めるのではなく、この帯の高さで受ける */
    height:calc(var(--mv-window-h) + var(--mv-bleed));
    margin-bottom:calc(-1 * (var(--mv-overlap) + var(--mv-bleed)));
    overflow:hidden;
    /* テキストエリアとの境界は透過グラデーションで地色に溶かす。
       保護領域の下端は窓の76%までなので、そこから帯の下端まで長くフェードさせ、
       コピーの背面で画像が消えきるようにする（stop は窓基準の実寸で指定） */
    -webkit-mask-image:linear-gradient(to bottom,
      #000 0,
      #000 calc(var(--mv-window-h) * .76),
      rgba(0,0,0,.55) calc(var(--mv-window-h) * .95),
      rgba(0,0,0,.18) calc(var(--mv-window-h) + var(--mv-bleed) * .45),
      transparent 100%);
    mask-image:linear-gradient(to bottom,
      #000 0,
      #000 calc(var(--mv-window-h) * .76),
      rgba(0,0,0,.55) calc(var(--mv-window-h) * .95),
      rgba(0,0,0,.18) calc(var(--mv-window-h) + var(--mv-bleed) * .45),
      transparent 100%);
  }
  .fv__mv {
    /* 保護領域の中心を「窓」の（やや上寄りの）中心に合わせる。帯の高さではなく
       窓の高さを基準にするので、--mv-bleed を増やしても被写体は動かない。
       translate の % は要素自身の寸法基準 */
    right:auto; bottom:auto; left:50%;
    top:calc(var(--mv-window-h) * var(--mv-focus-r, .42));
    width:var(--mv-zoom, clamp(519px, 119vw, 1277px));
    height:auto;
    transform:translate(calc(-1 * var(--mv-cx)), calc(-1 * var(--mv-cy)));
    /* ここでは画像が画面より広く左端は画面外なので、PC用の左フェードは外す
       （帯の中に見えるグラデーションになってしまう）。右端と上下端は残す */
    -webkit-mask-image:
      linear-gradient(to right, #000 0 93.7%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
    mask-image:
      linear-gradient(to right, #000 0 93.7%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
  }
  /* 重なり部分の下敷き：白を薄く重ね、背景をぼかして文字の視認性を担保する。
     上端は透明から始め、MV側のフェードと二重に効かせて境目を作らない */
  .fv__body { position:relative; z-index:1; padding-top:var(--mv-overlap); }
  .fv__body::before {
    content:""; position:absolute; z-index:-1; pointer-events:none;
    left:50%; transform:translateX(-50%); width:100vw;
    top:calc(-1 * var(--mv-overlap)); bottom:calc(-1 * var(--sp-5));
    -webkit-backdrop-filter:blur(10px) saturate(1.05);
    backdrop-filter:blur(10px) saturate(1.05);
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.42) 18%,
      rgba(255,255,255,.78) 34%,
      var(--fg-gray) 62%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 20%);
  }
}

@media (max-width:1023px) {
  .svc-intro { padding-block:56px; }
  /* 帯：文字（14px）を保ったまま5項目を1行に収める最小の組み合わせ */
  .tmband { padding:20px 16px; }
  .tmband__list { --tmb-gap:16px; }
  .tmband__item { width:120px; }
  .tmband__label { padding-inline:8px; }
  /* S3-b：2列は保ったまま（先方コメント「スマホは別として」）、
     1枚が365px前後まで落ちるので余白・見出しをもう一段詰める */
  .bizsec__inner { gap:20px; }
  .bizblock { gap:20px; padding:24px; }
  /* 768px（2列の最小幅）でカード内側294px。02の2行目「サーキュラーエコノミー支援」
     13文字がここに収まる上限が22px。広い側は28pxまで戻す */
  .bizblock__title { font-size:clamp(22px, 2.4vw, 28px); }
  .bizblock__text { font-size:15px; }
  .bizblock__list li { font-size:14px; }
  .bizblock__visual picture { margin-inline:-4%; }
  /* S4：見出しとイラストを縦積みに */
  .axes-head { flex-direction:column; gap:var(--sp-5); }
  .axes-head__visual { width:100%; max-width:448px; align-self:center; }
  /* S5：同じくイラストを見出し・説明文の下へ。はみ出しと引き上げは戻す */
  .cases__lead { flex-direction:column; gap:0; }
  /* 縦積みでは通常フローに戻す（カードに重ねない） */
  .cases__deco { width:100%; max-width:336px; height:auto; margin:0 auto; align-self:center; }

  /* ヘッダー：追従は2段目のみ（PCと同じ）。タブは横スクロール */
  .pnav__inner { flex-wrap:wrap; align-items:center; padding-top:var(--sp-3); }
  .pnav__logo { padding-bottom:0; }
  .menu-btn { display:inline-flex; margin-bottom:0; }
  .pnav__tabs {
    order:3; width:100%; margin-top:var(--sp-3);
    overflow-x:auto; scrollbar-width:none;
  }
  .pnav__tabs::-webkit-scrollbar { display:none; }
  .pnav__tab { flex:1 0 auto; width:auto; min-width:150px; min-height:48px; }
  .lnav__tabs { overflow-x:auto; scrollbar-width:none; }
  .lnav__tabs::-webkit-scrollbar { display:none; }
  .lnav__tab { flex:1 0 auto; min-width:150px; min-height:50px; padding:0 14px; }

  .fv__actions { margin-top:var(--sp-6); gap:var(--sp-4); }
  .metrics { flex-wrap:wrap; gap:var(--sp-5) var(--sp-6); justify-content:flex-start; }
  .metric { flex:1 1 40%; }

  /* ロゴ帯：CLIENTSブロックと同じ段階でロゴを縮める */
  .logoband__track { gap:var(--sp-6); }
  .logoband__cell img { height:56px; }

  /* 吹き出しは2列に折る（4列だと1枚が細くなりすぎる） */
  .issuenav { grid-template-columns:repeat(2,1fr); gap:var(--sp-5) 18px; }

  .axes__visual { aspect-ratio:16/7; }
  /* BACKGROUND：3列だと1枚が240px台まで落ちて説明文が縦長になるので2列に折る。
     この幅では最長の「サプライチェーン対応」が番号・アイコンと同じ行に収まらないので、
     見出しをもう1段落とす */
  .axes-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* セミナーも4列だと1枚が170px台まで落ちるので2列（2×4）に */
  .semgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .guide-card__t { font-size:18px; }
  /* 768px（2列の最小幅）でも「サプライチェーン対応」が番号・アイコンと同じ行に残るよう、
     アイコンと間隔も一段詰める */
  .guide-card__ico { width:48px; height:48px; }
  .guide-card__ico img { width:30px; height:30px; }
  /* 業種カードもセミナーと同じく、4列だと1枚が細くなりすぎるので2列（2×4）に */
  .indgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }

  /* S5：業種カードは2列に */
  .cases { padding-block:56px 0; }
  .cases__actions { padding:16px 0 48px; }
  /* S8：カードは2列のままだが幅が足りないのでボタンを縦積みに */
  .jcta2 { padding-block:56px calc(56px + var(--fg-radius-block)); }
  .cta-card__btns { flex-direction:column; gap:10px; }

  /* S9：ブランドとナビを縦に分け、ナビは3列のまま。
     縦積みでは align-items:flex-start が効いて子が内容幅に縮むので stretch に戻す */
  .jfooter2__inner { flex-direction:column; align-items:stretch; gap:var(--sp-6); padding-block:56px 40px; }
  .jfooter2__brand { width:auto; }
  .jfooter2__nav { gap:var(--sp-5); }
}

@media (min-width:1024px) {
  .sp-menu { display:none !important; }
}

@media (max-width:767px) {
  /* --- 6-a 帯：SPは縦積み（Figma 501:496）。
     1行＝「ドット＋見出し帯」で、線はドットの中心を縦につなぐ。 */
  .tmband { padding:24px; }
  .tmband__list { --tmb-gap:16px; flex-direction:column; width:100%; }
  .tmband__item { flex-direction:row; align-items:center; gap:24px; width:100%; }
  /* 線もPCの発想のまま向きだけ変える。top の % は自分自身の高さ基準なので、
     -50% で1つ前の行の中心に届く（PCの left と同じ理屈） */
  .tmband__item + .tmband__item::before {
    top:calc(-50% - var(--tmb-gap)); bottom:50%; right:auto;
    left:3.5px;                     /* 8pxドットの中心に1pxの線を重ねる */
    width:1px; height:auto;
  }
  .tmband__label { flex:1 1 0; min-width:0; padding-inline:18px; }

  /* --- 6-b 事業ブロック：SPは1列に戻し、文字サイズと余白もSP相当まで落とす --- */
  .bizsec__inner { grid-template-columns:minmax(0, 1fr); gap:24px; }
  .bizblock { gap:24px; padding:24px 20px; }
  .bizblock__body { gap:24px; }
  .bizblock__visual picture { max-width:520px; margin-inline:auto; }
  .bizblock__head { gap:8px; }
  .bizblock__no { font-size:26px; line-height:1.4; }
  .bizblock__title { font-size:26px; line-height:1.35; }
  .bizblock__br { display:none; }
  .bizblock__text { font-size:16px; line-height:1.75; }
  .bizblock__list { gap:10px; padding-top:16px; }
  .bizblock__list li { font-size:14px; }
  .bizbtn { width:100%; max-width:320px; }
  .bizsec { padding-bottom:32px; }
  /* SPのH2。clamp下限(30px)をそのまま使い、FVコピー(36px)との差を保つ */
  .sec-head__title { font-size:30px; }
  /* SPはFVが縦積みで元々十分な高さがあるため、PCで足した余白は持ち込まない
     （SPの .fv 上下余白と .fv__foot の間隔は従来どおり） */
  .fv__foot { margin-top:40px; }

  /* ヘッダー（Figma SP 191:252）：ロゴは中央・MENUなし・プライマリタブは全幅3分割 */
  .pnav__inner { justify-content:center; align-items:center; min-height:0; gap:8px; padding-top:8px; }
  .pnav__logo { padding-bottom:0; }
  .pnav__logo img { width:104px; height:40px; }
  .menu-btn { display:none; }
  /* コンテナの左右paddingを打ち消して画面幅いっぱいに3等分する */
  .pnav__tabs {
    margin-top:0; margin-inline:calc(-1 * var(--page-padding));
    width:calc(100% + var(--page-padding) * 2);
  }
  /* 3分割の130pxに「資源循環マネジメント」を1行で収める（カンプ同様に折り返さない） */
  .pnav__tab { flex:1 1 0; min-width:0; min-height:48px; padding:0 4px; font-size:12px; white-space:nowrap; }
  /* ローカルナビ：TOP 88px を基準に横スクロール。上罫でベースラインを作る */
  .lnav__tab { flex:0 0 auto; min-width:88px; min-height:46px; padding:0 18px; font-size:12px; border-top:1px solid var(--fg-nav-line); }
  /* 上罫のベースラインはアクティブでも保つ（面の上端が欠けて見えないように） */
  .lnav__tab[aria-current="page"] { border-top:1px solid var(--fg-nav-line); }

  /* 概念図：カラム幅まで縮めると図中の文字（1200px時14px）が5px以下になって
     読めない。最小幅を確保し、足りない分だけ横スクロールさせる */
  .tmflow { overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  .tmflow picture { min-width:720px; }

  /* SPのメインコピー。「資源がめぐる未来へ。」(10文字)が1行に収まる上限は
     画面幅から決まるので、幅に比例させて「へ。」だけが次行に落ちるのを防ぐ。
     390px で約33px、414px で約36px。上限40px・下限30px。 */
  .fv__copy { font-size:clamp(30px, calc(9.6vw - 4px), 40px); }
  .fv__eyebrow { margin-bottom:12px; font-size:15px; }
  /* SP：MVの帯は縦を広めに取り、保護領域（タワー＋4拠点）が欠けない大きさを保つ。
     画面が狭いぶん画像は少し寄せて（ズームを上げて）周辺風景だけを外へ逃がす */
  .fv {
    --mv-window-h:clamp(250px, 68vw, 384px);
    --mv-zoom:clamp(538px, 161vw, 913px);
    --mv-overlap:32px;
  }
  /* SPは1行目（リード）だけ改行を指定し、以降は自然折り返しに任せる。
     文字サイズは上限14px・下限12px。係数は「最長行の実測幅 ÷ 文字サイズ = 24.84」から
     逆算し、利用できる幅（100vw - 左右padding 40px）に収まる上限を出している。 */
  .fv__sub { font-size:clamp(12px, calc(4.02vw - 1.62px), 14px); }
  .fv__sub-br { display:inline; }
  .fv__sub-br--pc { display:none; }
  /* ロゴ帯：SPはCLIENTSブロックと同じ44px */
  .logoband { padding-block:28px; }
  .logoband__rows { gap:var(--sp-4); }
  .logoband__track { gap:var(--sp-5); }
  .logoband__cell { min-height:56px; }
  .logoband__cell img { height:44px; }
  /* SP：Figma（node 175:23）の 320/390 = 82vw を基準に画面幅へ比例させる。
     ブレークポイント上端（767px）では広がりすぎるので360pxで止める。
     コピーは左揃えのまま、ボタンだけ画面中央に置く */
  .fv__actions { justify-content:center; }
  .fv__actions .fbtn { width:min(82vw, 360px); }
  /* 実績帯（Figma node 168:260 / 390px）：白帯を画面幅いっぱいに敷き、
     帯の内側40pxに2列×2行（列間14px・行間20px）。注記も全幅で右端に置く。
     そのためコンテナの左右paddingはこのブロックだけ0にする。 */
  .fv__foot { --page-padding:0px; }
  .fv__metrics { width:auto; }
  .metrics {
    display:grid; grid-template-columns:repeat(2, max-content);
    justify-content:start; gap:20px 14px;
    padding-inline:40px; padding-block:20px;
  }

  /* お知らせ：タグ・日付を上段、見出しを下段（最大2行）に折り返す */
  .newsband { padding-block:24px; }
  .newsband__head { padding-bottom:16px; }
  .newsband__body { align-items:center; gap:var(--sp-2); }
  /* 2行組みになるので窓を高くする（16+76+16=108px） */
  .newsband__card { padding:15px 20px; }
  .newsband__list { height:76px; }
  .newsband__link { align-items:flex-start; }
  .newsband__main { flex-wrap:wrap; gap:6px 10px; }
  .newsband__title {
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    flex:1 0 100%; white-space:normal; font-size:13px; line-height:1.7;
  }
  .newsband__count { align-self:flex-start; }

  .fvc__hero { min-height:auto; }
  .fvc__body { padding-block:var(--sp-7) var(--sp-6); }
  .axes__visual { aspect-ratio:16/9; }
  /* SPは1列。カードの余白も一段詰める */
  .axes-grid { grid-template-columns:minmax(0, 1fr); gap:var(--sp-4); }
  .semgrid { grid-template-columns:minmax(0, 1fr); gap:var(--sp-4); }
  .guide-card { padding:24px; gap:var(--sp-3); }


  /* 締め：吹き出しは2列のまま、余白と文字を詰める */
  .issuenav { gap:var(--sp-4) 12px; }
  .pickup-card { padding:22px 12px 16px; gap:14px; }
  .pickup-card__title { font-size:14px; }
  /* カードが細いのでPC用の強制改行は解除し、画面幅なりの折り返しに任せる */
  .pickup-card__br { display:none; }
  /* ピルも一段小さく。左の光学調整用スペーサーは幅が惜しいので畳み、
     ラベルと矢印で中央に寄せる */
  .pickup-card__cta { min-height:36px; padding:8px 10px; gap:6px; font-size:12px; justify-content:center; }
  .pickup-card__cta::before { display:none; }
  .pickup-card__cta-txt { flex:0 1 auto; }
  .pickup-card__cta img { width:16px; height:16px; }
  .indgrid { grid-template-columns:minmax(0, 1fr); gap:var(--sp-4); }
  .indblock { padding-bottom:var(--sp-6); }
  .gbtn, .pill-btn { width:100%; max-width:320px; }

  /* S5：カードは2列のまま、余白と文字を詰める */
  .cases { padding-block:48px 0; }
  .cases__actions { padding:16px 0 40px; }
  /* S8：Figma SP 202:207 に合わせる */
  .jcta2 { padding-block:48px calc(48px + var(--fg-radius-block)); }
  .jcta2__plane { top:-34px; right:-74px; width:330px; }
  .jcta2__head .sec-head__lead { font-size:14px; }
  .jcta2__cards { flex-direction:column; gap:var(--sp-4); }
  .cta-card__title { font-size:20px; }

  /* S9：Figma SP 199:207 に合わせる。ブランドは中央、CVは320px上限で中央 */
  .jfooter2__inner { flex-direction:column; align-items:stretch; gap:0; padding-block:48px 40px; }
  .jfooter2__brand { width:auto; align-items:center; gap:var(--sp-4); text-align:center; }
  .jfooter2__logo { width:140px; }
  .jfooter2__lead { font-size:13px; }
  .jfooter2__nav { flex-direction:column; align-items:stretch; gap:var(--sp-6); padding-top:40px; }
  .fgroup--svc .fgroup__links { min-height:0; }
  .fgroup__cv { align-items:center; }
  .fgroup__cv .cvbtn { flex:none; width:100%; max-width:320px; }
  .jfooter2__copy { padding-block:var(--sp-5); }
}

/* 実績帯の2列組みは「左40px＋列140px＋間隔14px＋列183px」で最低377pxを要する
   （数値を28pxにしたぶん2列目が広くなった）。これより狭い端末では1列に落とす。 */
@media (max-width:379px) {
  .metrics { grid-template-columns:1fr; gap:16px; padding-inline:20px; }
}

/* =============================================================================
   2026-09-13（0909CL ⑦）事業ブロック01/02の行揃え
   ---------------------------------------------------------------------------
   これまでは .bizblock を flex 縦積みにし、イラストだけ margin-top:auto で
   下端に寄せていた。そのため見出しや本文の行数が01と02で違うと、
   本文・横線（.bizblock__list の上罫）・ボタンの位置が段違いになっていた。
   02の見出しが2行、01が1行という現状だけでなく、画面幅によっては本文の
   折り返し行数も入れ替わるため、幅ごとの数値合わせでは解けない。

   そこで「見出し／本文／支援内容／ボタン／イラスト」の5行を親グリッドで持ち、
   01と02が同じ行トラックを共有する（subgrid）。各行の高さは常に両カードの
   高い方に揃うので、どの幅・どの文章量でも4要素すべてが一直線に並ぶ。
   .bizblock__body は display:contents で箱を消し、HTMLを変えずに
   4つの子を .bizblock の行へ直接載せている。

   subgrid 非対応ブラウザでは上の flex 指定がそのまま生きる（イラストの
   下端だけが揃う従来の見え方）。ここは max-width 系の指定より後に置くこと。
   ========================================================================== */
@supports (grid-template-rows: subgrid) {
  .bizsec__inner { grid-template-rows:auto auto auto auto 1fr; row-gap:28px; }
  /* row-gap:inherit で親の行間をそのまま使う。.bizblock 側の gap 指定
     （幅ごとに 32/24/20px）が subgrid の行間を上書きしてしまうのを打ち消す */
  .bizblock { grid-row:span 5; display:grid; grid-template-rows:subgrid; row-gap:inherit; }
  .bizblock__body { display:contents; }
  /* 行トラックが下端を決めるので、flex時代の押し下げは不要 */
  .bizblock__visual { margin-top:0; }

  @media (max-width:1199px) { .bizsec__inner { row-gap:24px; } }
  @media (max-width:1023px) { .bizsec__inner { row-gap:20px; } }
  /* 1列になる幅。カード同士の比較は不要だが、行トラックは同じ組みのまま使う */
  @media (max-width:767px)  { .bizsec__inner { row-gap:24px; } }
}

/* 2026-09-13：吹き出し導線の最狭幅対応。
   2列のままだと 375px 端末でカード内寸が約137pxになり、
   ピルのラベル（「廃棄物管理支援を見る」10文字）＋丸矢印が収まらず窮屈になる。
   ここだけ1列に落として、ピルが余裕を持って入る幅を確保する。 */
@media (max-width:479px) {
  .issuenav { grid-template-columns:minmax(0, 1fr); gap:var(--sp-4); }
  .pickup-card { padding:24px 20px 20px; }
  .pickup-card__title { font-size:15px; }
  .pickup-card__cta { min-height:40px; font-size:13px; justify-content:space-between; gap:8px; }
  .pickup-card__cta::before { display:block; width:16px; height:16px; }
  .pickup-card__cta-txt { flex:1 1 auto; }
}

/* =============================================================================
   2026-09-14（0909CL ⑭）概念図の続きブロックのレスポンシブ
   ---------------------------------------------------------------------------
   max-width 系の指定より後に置くこと（前に置くと後続のクエリに負ける）。
   ========================================================================== */
@media (max-width:1023px) {
  /* データは3列のまま。効果は5列だと1項目あたり約120pxになり、2行の項目が窮屈になる。
     3+2 に折り返し、区切り線も折り返しに合わせて付け替える */
  .tmdata__list { margin-inline:-18px; }
  .tmdata__item { padding:20px 18px; }
  .tmeffect__list { grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:var(--sp-5); }
  .tmeffect__item:nth-child(3n+1) { border-left:0; }
  .tmeffect__item:nth-child(n+4) { border-top:1px solid var(--fg-nav-line); padding-top:var(--sp-5); }
  .tmeffect__item:nth-child(4) { border-left:0; }
}
@media (max-width:767px) {
  .tmmore { gap:var(--sp-5); margin-top:var(--sp-5); }
  .tmdata { padding-inline:20px; }
  .tmdata__trigger { padding:20px 0; }
  .tmdata__title { font-size:16px; }
  .tmdata__mark { width:32px; height:32px; }
  /* SPは1列。左罫線をやめて上罫線だけで区切る */
  .tmdata__list { grid-template-columns:minmax(0,1fr); margin:0 -18px 20px; }
  /* 1列では2・3番目も上罫線が要る。base の :nth-child(-n+3) と同じ強さで上書きし、
     リスト自身の上罫線と重ならないよう先頭だけ消す */
  .tmdata__item { padding:16px 18px; border-left:0; }
  .tmdata__item:nth-child(-n+3) { border-top:1px solid var(--fg-nav-line); }
  .tmdata__item:first-child { border-top:0; }
  .tmeffect__head { font-size:16px; }
  .tmeffect__ico { width:46px; height:46px; }
  .tmeffect__ico svg { width:23px; height:23px; }
  .tmmore__arrow img { height:32px; }
  /* 効果は2列。5項目目は行いっぱいに置いて中央へ */
  .tmeffect__list { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:var(--sp-5); }
  .tmeffect__item { padding-inline:8px; }
  .tmeffect__item:nth-child(2n+1) { border-left:0; }
  .tmeffect__item:nth-child(n+3) { border-top:1px solid var(--fg-nav-line); padding-top:var(--sp-5); }
  .tmeffect__item:nth-child(3) { border-left:0; }
  .tmeffect__item:last-child { grid-column:1 / -1; border-left:0; }
  /* 2列だと「廃棄物の削減・／リサイクル率の向上」の強制改行は不要 */
  .tmeffect__br { display:none; }
  /* SPは幅が足りず「〜最適化することで、」の強制改行が不自然な折り返しになるので外す */
  .tmclosing { padding:20px var(--sp-5); font-size:16px; line-height:1.8; text-align:left; }
  .tmclosing__br { display:none; }
}
/* 開閉アニメーションを抑える。閉じている状態は保ったまま、高さの補間だけ止める */
@media (prefers-reduced-motion:reduce) {
  .tmdata__panel { transition:none; }
  .tmdata__mark::before,
  .tmdata__mark::after { transition:none; }
}