/* 01-base：基本：色・文字・リセット・共通の補助。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
/* 書体：Noto Sans JP をサイト内から配信する（外部から読み込まない。CSP の font-src 'self'・閲覧者の情報を外へ出さないため）。
   本文 400・太字 700 の 2 つ。サイトで使う文字だけに絞ったサブセット（作り方は scripts/build-font.py。ライセンスは public/fonts/OFL.txt）。
   読み込み前は端末の和文書体で出し（swap）、行の高さが変わらないよう、代わりの書体の上下の寸法を Noto に合わせる（CLS 対策） */
@font-face{
  font-family:"Noto Sans JP Site";
  src:url("../fonts/noto-sans-jp-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Noto Sans JP Site";
  src:url("../fonts/noto-sans-jp-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Noto Sans JP Fallback";
  src:local("Hiragino Sans"),local("Hiragino Kaku Gothic ProN"),local("Yu Gothic UI"),local("Yu Gothic"),local("Meiryo"),local("Noto Sans CJK JP");
  ascent-override:116%;
  descent-override:28.8%;
  line-gap-override:0%;
}
:root{
  --blue:#6C9FCE;
  --blue-2:#3599FF;
  --navy:#0B3A6B;
  --navy-d:#082B50;
  --deep:#2F6AA3;
  --sky:#8CC8FF;
  --amber-l:#FAD99B; /* 対応地域で兵庫県を表す淡いオレンジ。明石市(--amber)→兵庫県→大阪府(白)と、中心ほど濃い明るさの階段（L* 76/88/100） */
  --mist:#EEF4FA;
  --paper:#F6F8FA;
  --warm:#F7F3EA;
  --amber:#F2B134;
  --amber-d:#C98A0C;
  --ink:#1B2A38;
  --muted:#4B5A69;
  --line:#D3DDE7;
  --white:#fff;
  --ok:#1E7A4C;
  --err:#B3261E;
  /* 色の段（2026-10-22 再々採点 R28。各ページの CSS に直書きしていた 60 種を、意味ごとに 1 つへ寄せた。ページの CSS では色を直書きしない） */
  --on-dark:#e0edf9; /* 紺の地の上の本文 */
  --on-dark-2:#cfe0f1; /* 紺の地の上の補足・リンク（フッター） */
  --on-dark-3:#a3bfda; /* 紺の地の上の最も控えめな文字（著作権表記） */
  --amber-ink:#7A5000; /* 白・薄い地の上の橙の文字（白地で 7:1） */
  --amber-ink-d:#4F3600; /* 橙の地の上の文字 */
  --amber-hover:#F7C25A; /* 橙のボタンに触れたとき */
  --amber-wash:#FFF0CC; /* 橙の薄い面（札・必須・積込の面） */
  --amber-line:#EFD9A0; /* 橙の薄い面の枠 */
  --err-wash:#FFF3F1; /* 赤の薄い面（入力の誤り・注意の帯） */
  --ok-wash:#E6F3EB; /* 緑の薄い面 */
  --blue-wash:#E8F1FA; /* 青の薄い面 */
  --blue-line:#C5DAEE; /* 青の薄い面の枠・図の面 */
  --deep-d:#1F5C96; /* 濃い青（分別表の区分の文字） */
  --surface:#EEF1F5; /* 灰の面（料金の一覧・運搬費なしの帯） */
  --surface-2:#E6EDF4; /* 写真の代わりの面 */
  --line-2:#C9D1DC; /* 灰の面の枠・使わない状態の枠 */
  --muted-2:#6F879F; /* 入力欄の枠・点線の枠・使わない状態の番号（白地で 3.6:1。文字の本文には使わない） */
  --r:8px;
  --r-xs:3px; /* 小部品（バッジ・タグ・必須・無料の札・エラー）の角丸 */
  --edge:6px; /* 箱の左線の太さ（callout・who・note-box など） */
  --edge-top:4px; /* カード・フォーム・パネルの上線の太さ */
  --btn-h:56px; /* 主ボタンの高さ。小さい操作は .btn--sm（44px） */
  --sec:96px; /* セクションの上下余白（背景色に関係なく同じ。≦760px は 64px） */
  --max:1160px;
  --max-wide:1440px; /* ヘッダーと、写真を全面に敷くトップの FV だけに使う広い幅。本文の欄は --max のまま */
  --head-h:71px;
  --mbar-h:67px;
  --font:"Noto Sans JP Site","Noto Sans JP Fallback","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
  /* 文字サイズの段階（2026-10-21 監査 review-4 で決定。font-size はこの 8 つだけを使う。html は 17px）
     同じ役の文字は、どのページでも同じ段にする（見出しは階層ごとに 1 つ） */
  --fs-xs:.76rem; /* 13px：札・バッジ・必須・図の目盛り */
  --fs-sm:.88rem; /* 15px：注記（※）・補足・ラベル・パンくず・ヒント・表の見出し行 */
  --fs-body:1rem; /* 17px：本文・表・定義リスト・フォーム・ボタン */
  --fs-lg:1.12rem; /* 19px：カードの題・手順の題・FAQ の問い・冒頭の説明文 */
  --fs-h3:clamp(1.2rem,1.05rem + .6vw,1.35rem); /* 20〜23px：小見出し（h3 の段・表の題） */
  --fs-h2:clamp(1.4rem,1rem + 1.7vw,2.2rem); /* セクションの見出し（例外なし）と料金の大きい数字。スマホでは h1 との差を保つため h1 より一段小さく（2026-10-27） */
  --fs-h1:clamp(1.55rem,.95rem + 2.6vw,2.8rem); /* 下層ページの h1。スマホ（360px〜）は 1 行 12 字が入る大きさ（「まとめて／ご相談ください。」のような句の途中の改行を防ぐ。2026-10-27） */
  --fs-display:clamp(2rem,1.2rem + 3vw,3.2rem); /* 34〜54px：トップの FV の見出しと、大きい電話番号（FV・ご相談の窓口）だけ */
  --lh-body:1.85;
  --lh-head:1.4;
  --field-h:54px;
  /* 動きの時間（2026-10-22 再々採点 R27）。画面に出てくる動きは 150〜300ms・ease-out。押す・触れるは 80〜150ms。
     prefers-reduced-motion では全部止める（下の @media） */
  --t-press:.08s; /* 押したときの沈み */
  --t-fast:.15s; /* 触れたときの色・矢印 */
  --t-enter:.25s; /* スクロールで出てくる */
  --t-max:.3s; /* 最初の画面の見出し・写真のワイプ（これより長くしない） */
  --ease-out:cubic-bezier(.2,.7,.2,1); /* 入力欄・選択欄の高さ（文字の開始位置もそろえる） */
}
/* 色のトーン。ページ（body）と、ページ内の誘導の箱に 1 つだけ付ける。
   事業＝biz（青）、ご家庭＝home（オレンジ）、共通＝co（紺。会社・車両・分別表・お知らせ・電話など）。
   ラベルの文字・h2 の下線・箱の縁・カードとフォームの上線は、この値を使う。橙はラベル前の短い線・ナビの現在地・フォーカス枠と、家庭のトーンだけ */
:root,
.tone-co{
  --tone:var(--navy);
  --tone-ink:var(--navy);
  --tone-bg:var(--mist);
  --tone-wash:rgba(11,58,107,.09);
  --tone-on:#fff; /* トーンの色で塗った上の文字 */
}
.tone-biz{
  --tone:var(--deep);
  --tone-ink:var(--deep);
  --tone-bg:var(--mist);
  --tone-wash:rgba(47,106,163,.12);
}
.tone-home{
  --tone:var(--amber);
  --tone-ink:var(--amber-ink);
  --tone-bg:var(--warm);
  --tone-wash:rgba(242,177,52,.18);
  --tone-on:var(--navy-d);
}
@media (max-width:760px){
  :root{
    --sec:64px;
  }
}
*{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  font-size:106.25%;
  scroll-padding-bottom:80px;
}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:#fff;
  line-height:1.85;
  font-size:var(--fs-body);
  overflow-x:hidden;
  /* 改行は文節（auto-phrase）。行の長さは下の balance でそろえる（2026-10-21 監査 review-4。計測で泣き別れ 54→0 件） */
  word-break:auto-phrase;
  line-break:strict;
  text-spacing-trim:trim-start; /* 行頭の始め括弧「（」の前の半角の空きを詰め、左端をそろえる（再採点 SP #39。書体の halt・chws を使う） */
  overflow-wrap:break-word;
}
img,
svg{
  max-width:100%;
  display:block;
}
a{
  color:var(--deep);
}
h1,
h2,
h3,
h4,
h5{
  line-height:var(--lh-head);
  margin:0 0 .6em;
  font-weight:700;
  letter-spacing:.02em;
}
p{
  margin:0 0 1em;
}
:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--navy);
}
[id]{
  scroll-margin-top:96px;
}
.skip{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--amber);
  color:var(--navy-d);
  padding:.6em 1em;
  z-index:200;
}
.skip:focus{
  left:8px;
  top:8px;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.demo-bar{
  background:var(--navy-d);
  color:var(--on-dark-2);
  text-align:center;
  padding:.4em 1em;
  font-size:var(--fs-sm);
}
[hidden]{
  display:none!important;
}
.nw{
  white-space:nowrap;
}
/* ビルドで自動で包んだ「割らない語の組」（scripts/nobreak.mjs）。箱を作らない（display:contents）ので、
   ラベルやボタンのような flex の中でも、ほかの文字と 1 つの文として並ぶ（間が空かない）。
   ページの CSS の「.〇〇 span{…}」の指定（display:block・文字の大きさ・色など）が当たらないよう、全部を親から引き継ぐ形に戻す（!important） */
span.nwa{
  all:unset!important;
  display:contents!important;
  white-space:nowrap!important;
}
/* 380px 以下の大見出しでは、組が 1 行に入りきらず枠からはみ出す（/general-waste の「（事業系一般廃棄物）を」が 320px で 10px。2026-10-27 独立点検）ので、組の中でも句の切れ目で折ってよい */
@media (max-width:380px){
  h1 span.nwa{
    white-space:normal!important;
  }
}
/* 900px 以上だけ割らない長い組（scripts/nobreak.mjs の WIDE）。スマホ・タブレットでは「・」の後で折ってよい（狭い幅で 1 行の大半を占める塊になり、前の行の右が大きく空くため。2026-10-22 再採点3） */
span.nwm{
  all:unset!important;
  display:contents!important;
}
@media (min-width:900px){
  span.nwm{
    white-space:nowrap!important;
  }
}
/* 改行の規則（全ページ共通。ページの CSS では word-break・text-wrap を指定しない）
   ・すべて文節（body の auto-phrase）で折る。語の途中では折らない
   ・本文（段落・箇条・表・定義リスト）は通常の改行（欄の右端まで使う）。最後の行が短くなりすぎないよう pretty
     （2026-10-22 再採点 N1／N4：本文まで balance にすると早めに折れて右が空き、「お聞か｜せ」のような改行が出たため）
   ・行の長さをそろえる balance は、見出し・ラベル・ボタン・カードの題だけ（.bal で個別にも付けられる）
   ・割ってはいけないもの（日付・時間の範囲・電話・番地・地名・許可番号・金額と単位）は .nw で囲む
   ・泣き別れ（最後の行が 1〜2 文字）は、文を .nw で包むか、欄の幅で 0 件にする */
body{
  text-wrap:pretty;
}
/* iPhone の Safari など、文節の改行（auto-phrase）に未対応のブラウザでは、ビルドで入れた文節の切れ目（<wbr>）でだけ折る
   （data-p は切れ目を入れた文字を持つ要素。scripts/nobreak.mjs。入りきらない長い組は body の overflow-wrap で折れる。2026-10-28） */
@supports not (word-break:auto-phrase){
  [data-p]{
    word-break:keep-all;
  }
}
h1,
h2,
h3,
h4,
h5,
.label,
.more-link,
.srt-sw__k,
.rule-card__k,
.btn,
.bal,
figcaption,
caption,
th{
  text-wrap:balance;
}
textarea,
input{
  text-wrap:wrap;
}
@media (min-width:1700px){
  body{
    zoom:1.15;
  }
}
@media (min-width:2000px){
  body{
    zoom:1.3;
  }
}
@media (min-width:2300px){
  body{
    zoom:1.5;
  }
}
@media (min-width:2700px){
  body{
    zoom:1.7;
  }
}
@media (min-width:3200px){
  body{
    zoom:2;
  }
}
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
/* ブレークポイントは 6 つだけ（2026-10-21 監査 review-4 #54 で整理）:
   ≦400（小さいスマホ）・≦600（スマホ）・≦760（スマホ横・下部バー）・≦980（タブレット）・≦1100（ナビを畳む）・それ以上。
   1101px 以上はナビを横に出す（1280px のノート PC でもメニューに畳まれない） */
/* 02-layout：骨組み：幅・セクション・見出しの型・段組み。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
/* 左右の余白：スマホ 20px、タブレット 31〜40px、PC 40px 以上（768・1024px で 20px は窮屈なため。2026-10-27 独立点検）。
   ヘッダー・トップの FV も同じ幅にして、ロゴと本文の左端をどの幅でもそろえる（以前は 1101px 以上でヘッダーだけ広く、1440px でロゴ 72px・本文 140px とずれていた） */
.wrap{
  --gut:clamp(20px,4vw,40px);
  width:min(100% - 2 * var(--gut),var(--max));
  margin-inline:auto;
}
/* トップ（写真の全面の FV があるページ）だけは、FV の見出しが句の途中で折れないよう、FV とヘッダーを本文より広い幅にする（ロゴと FV の左端はそろう）。
   トップは 1100px 以下も以前の余白（20px）のまま（FV が広い余白だと 1024px で「ご相談ください｜。」と句点だけ残る。ページの中で左端をそろえるため、トップは全部の欄を 20px に） */
body:has(.hero--photo) .wrap{
  --gut:20px;
}
@media (min-width:1101px){
  body:has(.hero--photo) .site-header .wrap,
  .hero--photo .hero__grid{
    width:min(100% - 2 * clamp(20px,5vw,72px),var(--max-wide));
  }
}
.site-header .wrap{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:68px;
}
.hero .wrap{
  position:relative;
  z-index:2;
  padding:0;
}
.section{
  padding:var(--sec) 0;
}
.section--first{
  padding-top:140px;
}
/* 背景色が変わっても、上下の余白は同じ（--sec） */
.section--tint{
  background:var(--paper);
}
.section--cream{
  background:var(--warm);
}
.section--blue{
  background:var(--deep);
  color:#fff;
}
.section--blue .sec-head h2{
  color:#fff;
}
.section--blue a{
  color:#fff;
}
.sec-head{
  max-width:46em;
  margin-bottom:44px;
}
/* 見出しの上のラベル（「会社案内」「ご相談」など）。全ページ・全欄でこの 1 つだけを使う
   （下層ページの冒頭・各欄の見出し・紺の欄・誘導の箱）。前に橙の短い線、文字の色はトーン。紺・青・写真の地では白 */
.label{
  display:flex;
  align-items:center;
  gap:.75em;
  margin:0 0 .8em;
  font-size:var(--fs-body);
  font-weight:700;
  line-height:1.5;
  letter-spacing:.08em;
  color:var(--tone-ink);
}
.label::before{
  content:"";
  flex:none;
  width:1.8em;
  height:3px;
  background:var(--amber);
}
.section--blue .label,
.section--statement .label,
.sub-hero--photo .label{
  color:#fff;
}
/* セクションの見出し。形は「ラベル（橙の線）＋h2」の 1 つだけ。h2 の下線は付けない（情報を足さない飾りのため 2026-10-21 削除） */
.sec-head h2{
  font-size:var(--fs-h2);
  color:var(--navy);
  margin-bottom:.5em;
  line-height:var(--lh-head);
}
.sec-head p{
  color:var(--muted);
}
.section--blue .sec-head p{
  color:var(--on-dark);
}
.sec-head.rv h2{
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--t-max) var(--ease-out) .05s;
}
.sec-head.rv.in h2{
  clip-path:inset(0 0 -10px 0);
}
.grid3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width:980px){
  .grid3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:600px){
  .grid3{
    grid-template-columns:minmax(0,1fr);
  }
}
.grid2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
/* カードの並びの決まり（全ページ共通）: どの段も埋めて、空いた枠や 1 枚だけ残る段を作らない。
   （2026-10-27 依頼者「1 2 / 3 ではなく 1 2 3」。いったん「幅は常に同じ・余りは左詰め」にしたが、独立点検で空いた枠と細切れの文が出て悪化と判定されたため、この形に戻した）
   ・〜980px：2 列。奇数枚の最後の 1 枚は横いっぱい
   ・981px〜：奇数枚は最後の 3 枚を 3 列の 1 段にする（5 枚＝2＋3、7 枚＝2＋2＋3） */
.grid2>:last-child:nth-child(odd){
  grid-column:1/-1;
}
@media (min-width:981px){
  .grid2{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
  .grid2>*{
    grid-column:span 3;
  }
  .grid2>:last-child:nth-child(odd){
    grid-column:span 2;
  }
  .grid2>:nth-last-child(2):nth-child(even),
  .grid2>:nth-last-child(3):nth-child(odd){
    grid-column:span 2;
  }
  .grid2>:only-child{
    grid-column:1/-1;
  }
}
@media (max-width:980px){
  .grid3>:last-child:nth-child(odd){
    grid-column:1/-1;
  }
}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.sub-hero .wrap{
  padding:60px 0 56px;
  position:relative;
  z-index:2;
}
.no-js .sec-head.rv h2{
  clip-path:none;
}
.section--statement .grid3{
  gap:40px;
}
.faq-split .sec-head{
  position:sticky;
  top:110px;
  margin-bottom:0;
}
.faq-split .sec-head.rv{
  transform:none;
}
.hero--photo + .section--first{
  padding-top:84px;
}
.split>*{
  min-width:0;
}
@media (max-width:980px){
  .split{
    grid-template-columns:1fr;
    gap:28px;
  }
  .faq-split .sec-head{
    position:static;
  }
}
/* カードの 2 列は、タブレット（768px）でも保つ。1 列にするのはスマホ（≦600px）だけ */
@media (max-width:600px){
  .grid2{
    grid-template-columns:minmax(0,1fr);
  }
}
@media (max-width:760px){
  .section--first{
    padding-top:110px;
  }
}
@media (prefers-reduced-motion:reduce){
  .sec-head.rv h2{
    clip-path:none;
  }
}
/* 03-motion：動き：出現・ワイプ・キーフレーム。スクロールで出てくる動きは 0.25 秒・ease-out、遅延は最大 0.15 秒（2026-10-22 再々採点 R27。速くスクロールしても空白に見えないように）（部品より先に置く：部品の transition などが勝てるように）。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
.rv{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out);
}
.rv.in{
  opacity:1;
  transform:none;
}
.no-js .rv{
  opacity:1;
  transform:none;
}
.reveal-on .stag>*{
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out);
}
.reveal-on .stag.in>*{
  opacity:1;
  transform:none;
}
.stag.in>*:nth-child(1),
.stag.in>*:nth-child(2){
  transition-delay:0s;
}
.stag.in>*:nth-child(3),
.stag.in>*:nth-child(4){
  transition-delay:.03s;
}
.stag.in>*:nth-child(5),
.stag.in>*:nth-child(6){
  transition-delay:.06s;
}
.stag.in>*:nth-child(7),
.stag.in>*:nth-child(8){
  transition-delay:.09s;
}
.stag.in>*:nth-child(9),
.stag.in>*:nth-child(10){
  transition-delay:.12s;
}
.stag.in>*:nth-child(11),
.stag.in>*:nth-child(12){
  transition-delay:.15s;
}
@media (prefers-reduced-motion:reduce){
  .rv{
    opacity:1;
    transform:none;
  }
  .reveal-on .stag>*{
    clip-path:none;
    transform:none;
    scale:1 1;
    opacity:1;
    transition:none;
  }
}
@keyframes heroRise{from{opacity:0;transform:translateY(.7em)}to{opacity:1;transform:none}}
@keyframes nodePulse{0%{box-shadow:0 0 0 0 rgba(242,177,52,.75)}100%{box-shadow:0 0 0 20px rgba(242,177,52,0)}}
/* 04-header-footer：ヘッダー・メニュー・フッター・下部固定バー。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--deep);
  color:#fff;
  border-bottom:3px solid var(--navy);
  transition:box-shadow var(--t-enter) var(--ease-out);
}
.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-height:44px; /* 押せる高さ（再採点 SP N17） */
}
.brand img{
  height:36px;
  width:auto;
}
.gnav{
  margin-left:auto;
}
.gnav ul{
  display:flex;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
}
.gnav a{
  display:block;
  color:#fff;
  text-decoration:none;
  padding:.55em .8em;
  font-size:var(--fs-body);
  font-weight:700;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:border-color var(--t-fast) var(--ease-out);
}
.gnav a:hover,
.gnav a[aria-current="page"]{
  border-bottom-color:var(--amber);
}
/* サブメニュー（会社案内）。親はボタン。PC では、マウスを乗せる・キーボードで入る・クリックで開く */
.gnav .has-sub{
  position:relative;
}
.gnav__parent{
  display:flex;
  align-items:center;
  gap:.35em;
  color:#fff;
  background:none;
  border:0;
  border-bottom:3px solid transparent;
  padding:.55em .8em;
  font:inherit;
  font-size:var(--fs-body);
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease-out);
}
.gnav__parent::after{
  content:"";
  width:.42em;
  height:.42em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  rotate:45deg;
  translate:0 -.15em;
  transition:rotate var(--t-fast) var(--ease-out);
}
.gnav .has-sub:hover .gnav__parent,
.gnav__parent[aria-expanded="true"],
.gnav .is-current .gnav__parent{
  border-bottom-color:var(--amber);
}
.gnav .gnav__sub{
  list-style:none;
  margin:0;
  padding:8px 0;
}
@media (min-width:1101px){
  .gnav .gnav__sub{
    position:absolute;
    top:100%;
    left:50%;
    translate:-50% 0;
    min-width:11em;
    display:block;
    background:#fff;
    border-radius:var(--r);
    box-shadow:0 12px 32px -12px rgba(6,34,70,.45);
    border-top:3px solid var(--amber);
    visibility:hidden;
    opacity:0;
    transition:opacity var(--t-fast) var(--ease-out),visibility var(--t-fast) var(--ease-out);
    z-index:5;
  }
  /* Esc・クリックで閉じたあと（main.js が .is-closed を付ける）は、ホバー・フォーカスが残っていても開かない。開くのは aria-expanded="true" のときだけ */
  .gnav .has-sub:not(.is-closed):hover .gnav__sub,
  .gnav .has-sub:not(.is-closed):focus-within .gnav__sub,
  .gnav__parent[aria-expanded="true"]+.gnav__sub{
    visibility:visible;
    opacity:1;
  }
  .gnav .has-sub:not(.is-closed):hover .gnav__parent::after,
  .gnav__parent[aria-expanded="true"]::after{
    rotate:225deg;
    translate:0 .1em;
  }
  .gnav .gnav__sub a{
    color:var(--navy);
    padding:.65em 1.2em;
    border-bottom:0;
    border-left:3px solid transparent;
  }
  .gnav .gnav__sub a:hover,
  .gnav .gnav__sub a:focus-visible,
  .gnav .gnav__sub a[aria-current="page"]{
    background:var(--mist);
    border-left-color:var(--amber);
  }
}
.menu-btn{
  display:none;
  margin-left:auto;
  background:none;
  border:2px solid #fff;
  color:#fff;
  border-radius:var(--r);
  min-width:72px;
  min-height:44px;
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
.site-footer{
  background:var(--navy-d);
  color:var(--on-dark-2);
  padding:60px 0 100px;
  font-size:var(--fs-body);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
}
.foot-h{
  font-size:var(--fs-body);
  color:#fff;
  font-weight:700;
  margin:0 0 .8em;
  letter-spacing:.06em;
}
/* 列の行を共通の格子にそろえる（2026-10-28 依頼者：列ごとに行の位置がずれて段差に見える）。
   どの列も「見出し＋4 項目」の後に 2 つ目のまとまりが始まるので（家庭ごみ／お知らせ・コラム／お問い合わせ）、
   その 6 行目の上に同じ間を空け、横の行の位置を全列でそろえる */
.foot-col{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 8;
  row-gap:0;
  align-content:start;
}
.foot-col .foot-grp,
.foot-col ul{
  display:contents;
}
.foot-grp+.foot-grp .foot-h,
.foot-col li.foot-gap{
  margin-top:1.1em;
}
@media (min-width:981px){
  .foot-grid>:first-child{
    grid-row:span 8;
  }
}
.site-footer ul{
  list-style:none;
  margin:0;
  padding:0;
}
.site-footer li{
  margin-bottom:.5em;
}
.site-footer a{
  color:var(--on-dark-2);
}
.foot-tel{
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.site-footer img{
  height:34px;
  width:auto;
  margin-bottom:14px;
}
/* 著作権表記：フッターの最下段。細い線で区切り、注記と同じ大きさ・控えめな色で左に置く（ロゴの左端とそろう） */
.foot-copy{
  margin:40px 0 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.18);
  color:var(--on-dark-3);
  letter-spacing:.04em;
}
.foot-copy small{
  font-size:var(--fs-sm);
}
.mbar{
  display:none;
}
.site-header.is-scrolled{
  box-shadow:0 6px 22px -10px rgba(6,34,70,.55);
}
@media (max-width:1100px){
  .gnav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:var(--deep);
    display:none;
    padding:10px 20px 20px;
    border-bottom:3px solid var(--navy);
  }
  .gnav.open{
    display:block;
    max-height:calc(100dvh - var(--head-h));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .gnav ul{
    flex-direction:column;
  }
  .gnav a{
    padding:.9em .6em;
    font-size:var(--fs-body);
    border-bottom:1px solid rgba(255,255,255,.2);
  }
  .gnav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.2);box-shadow:inset 4px 0 0 var(--amber);background:rgba(11,58,107,.5);padding-left:1em;}
  /* サイドバー（開いたメニュー）では、「会社案内　＋」の行を押すとサブメニューが下に開く。開くと ＋ が － になる */
  .gnav__parent{
    width:100%;
    justify-content:space-between;
    padding:.9em .6em;
    font-size:var(--fs-body);
    border-bottom:1px solid rgba(255,255,255,.2);
  }
  .gnav__parent::after{
    content:"+";
    rotate:0deg;
    translate:0 0;
    display:grid;
    place-items:center;
    width:1.6em;
    height:1.6em;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,.6);
    font-size:var(--fs-lg);
    font-weight:400;
    line-height:1;
  }
  .gnav__parent[aria-expanded="true"]::after{
    content:"−";
    border-color:var(--amber);
    color:var(--amber);
  }
  .gnav .has-sub:hover .gnav__parent,
  .gnav .is-current .gnav__parent{
    border-bottom-color:rgba(255,255,255,.2);
  }
  .gnav .gnav__sub{
    display:none;
    padding:0 0 0 .8em;
    background:rgba(6,34,70,.25);
  }
  .gnav__parent[aria-expanded="true"]+.gnav__sub{
    display:block;
  }
  /* メニューボタン。761〜1100px では電話（紺の塗り）と並ぶので、メニューは白の薄い塗りにして 2 段階にそろえる。字の大きさ・高さを電話に寄せ、枠を細くして面で見せる。3 本線のしるしを添える */
  .menu-btn{
    display:inline-flex;
    flex:none;
    align-items:center;
    gap:.5em;
    padding:0 14px 0 12px;
    font-size:var(--fs-body);
    letter-spacing:.04em;
    border:1.5px solid rgba(255,255,255,.7);
    background:rgba(255,255,255,.12);
    transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);
  }
  .menu-btn::before{
    content:"";
    width:16px;
    height:12px;
    background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat;
  }
  /* 開いているあいだ（文字は「閉じる」）は × のしるし */
  .menu-btn[aria-expanded="true"]::before{
    width:13px;
    height:13px;
    margin-inline:1px 2px;
    background:linear-gradient(45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(-45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px));
  }
  .menu-btn:hover{
    background:rgba(255,255,255,.2);
    border-color:#fff;
  }
  /* タブレット・横向きスマホでもフッターのリンクを指で押せる高さ（44px）に。1101px 以上は今のまま */
  .site-footer li{
    margin-bottom:0;
  }
  .site-footer li a{
    display:inline-block;
    padding:11px 0;
  }
  /* 2 つ目のまとまりの見出しを、横の列のリンクの文字（上に 11px の押しやすさの余白がある）と同じ高さにそろえる */
  .foot-grp+.foot-grp .foot-h{
    padding-top:11px;
  }
}
@media (max-width:760px){
  .gnav.open{
    max-height:calc(100dvh - var(--head-h) - var(--mbar-h));
  }
  /* フッター：会社の欄は横いっぱい。サービスと調べる・確かめるは 2 列、会社案内とお問い合わせは横いっぱいの中に 2 列 */
  .foot-grid{
    grid-template-columns:1fr 1fr;
    gap:28px 20px;
  }
  .foot-grid>:first-child,
  .foot-grid>:last-child{
    grid-column:1/-1;
  }
  /* 会社案内とお問い合わせは、横いっぱいの中で左右に並べる（行の格子は使わない） */
  .foot-grid>:last-child{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    grid-row:auto;
    column-gap:20px;
  }
  .foot-grid>:last-child .foot-grp,
  .foot-grid>:last-child ul{
    display:block;
  }
  .foot-grid>:last-child .foot-grp+.foot-grp .foot-h{
    margin-top:0;
    padding-top:0;
  }
  .mbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:120;
    background:#fff;
    border-top:1px solid var(--line);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    gap:8px;
  }
  .mbar a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    border-radius:var(--r);
    font-weight:700;
    text-decoration:none;
    font-size:var(--fs-body);
  }
  /* 電話＝共通の紺。右のボタンはページのトーン（事業＝青の塗り、ご家庭＝オレンジの塗り、共通＝紺の枠。共通の行き先はトップの相談窓口＝ご案内なので枠） */
  .mbar .m-tel{
    background:var(--navy);
    color:#fff;
  }
  .mbar .m-go{
    border:2px solid transparent;
  }
  .mbar .m-go--biz{
    background:var(--deep);
    color:#fff;
  }
  .mbar .m-go--home{
    background:var(--amber);
    color:var(--navy-d);
  }
  .mbar .m-go--co{
    background:#fff;
    border-color:var(--navy);
    color:var(--navy);
  }
  .brand{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}
/* 高さの低い画面（スマホの横向きなど）：スクロール中も残るヘッダーを低くし、本文の見える高さを確保する（71px → 55px）。
   押す場所（電話・メニュー）の高さ 44px は変えない */
@media (max-height:500px) and (orientation:landscape){
  :root{
    --head-h:55px;
  }
  .site-header{
    border-bottom-width:2px;
  }
  .site-header .wrap{
    min-height:53px;
  }
  .brand img{
    height:28px;
  }
}
@media (max-width:760px){
  /* 問い合わせのページで入力欄が見えているあいだ（main.js が .is-form を付ける）は、電話だけを横いっぱいに */
  .mbar.is-form{
    grid-template-columns:1fr;
  }
  .mbar.is-form .m-go{
    display:none;
  }
}
/* 400px 以下：「家庭ごみのご相談」が 2 行になり、ページによって下部バーの高さが変わるので、字を少し小さくして 1 行に収める */
@media (max-width:400px){
  .mbar{
    padding-inline:8px;
    gap:6px;
  }
  .mbar a{
    font-size:var(--fs-sm);
    letter-spacing:0;
    white-space:nowrap;
  }
}
/* フッターの電話番号：指で押せる高さ（44px）にする。行の高さは変えない */
.foot-tel{
  display:inline-block;
  padding-block:8px;
  margin-block:-8px;
}
/* 400px 以下：ロゴとメニューボタン（3 本線つき）が 1 行に収まるよう、ロゴを少し小さく・間隔を詰める */
@media (max-width:400px){
  .site-header .wrap{
    gap:12px;
  }
  .brand img{
    height:30px;
  }
  .menu-btn{
    padding:0 11px 0 10px;
    font-size:var(--fs-sm);
    letter-spacing:.02em;
  }
}
/* フッター 761〜980px：会社の欄を上の段に横いっぱい、3 つの列を下の段に並べる */
@media (min-width:761px) and (max-width:980px){
  .foot-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .foot-grid>:first-child{
    grid-column:1/-1;
  }
}
/* 400px 以下：2 列の間を詰めて、長い項目（家庭ごみのご案内など）を 1 行に収める */
@media (max-width:400px){
  .foot-grid,
  .foot-grid>:last-child{
    column-gap:12px;
  }
}
/* 05-buttons-forms：ボタン・フォーム・入力部品。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
/* ボタンは意味で形と色を決める（docs と reports/consistency-review-2026-10-19/plan.md の決定）。
   色: 事業ごみ＝biz（青）、家庭ごみ＝home（オレンジ）、共通＝co（紺）
   形: 枠＝ご案内（ページを見る）、塗り＝ご相談（フォームへ行く）、電話＝.btn--tel（紺の枠＋電話の印）
   矢印: ページへ移るリンク（a）の枠・塗りボタンだけ右に →。電話・送信・ページ内の操作（button）は矢印なし。外部サイトは .btn--ext で ↗
   高さ: 主ボタン 56px（--btn-h）、小さい操作は .btn--sm（44px）だけ */
/* 形は全ページ共通：文字は左、矢印は右端（横いっぱいに伸びても同じ形。SP #43）。電話は印と文字を左から、送信は中央 */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:.6em;
  min-height:var(--btn-h);
  padding:.6em 1.5em;
  border-radius:var(--r);
  font-weight:700;
  line-height:1.5;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  font-family:inherit;
  font-size:var(--fs-body);
  letter-spacing:.04em;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);
}
a.btn--biz::after,
a.btn--home::after,
a.btn--co::after,
a.btn--biz-f::after,
a.btn--home-f::after,
a.btn--co-f::after{
  content:"→";
  flex:none;
  transition:translate var(--t-fast) var(--ease-out);
}
a.btn--ext::after{
  content:"↗";
}
a.btn:hover::after{
  translate:4px 0;
}
a.btn--ext:hover::after{
  translate:2px -2px;
}
/* お電話の案内と並ぶ相談ボタンには矢印を付けない（矢印が電話のほうを指し、「右の電話へ」と読めるため。2026-10-28 依頼者）。
   冒頭（.swap）とページ下の相談の窓口（.desk__way--form）の全ページ共通 */
.swap a.btn::after,
.desk__way--form a.btn::after{
  content:none;
}
.btn--sm{
  min-height:44px;
  padding:.35em 1.1em;
  font-size:var(--fs-body);
}
/* 事業ごみ（青） */
.btn--biz{
  border-color:var(--deep);
  color:var(--deep);
  background:#fff;
}
.btn--biz:hover{
  background:var(--mist);
}
.btn--biz-f{
  border-color:var(--deep);
  background:var(--deep);
  color:#fff;
}
.btn--biz-f:hover{
  border-color:var(--navy);
  background:var(--navy);
}
/* 家庭ごみ（オレンジ。文字は濃い茶で 4.5:1 以上） */
.btn--home{
  border-color:var(--amber-d);
  color:var(--amber-ink);
  background:#fff;
}
.btn--home:hover{
  background:var(--warm);
}
.btn--home-f{
  border-color:var(--amber);
  background:var(--amber);
  color:var(--navy-d);
}
.btn--home-f:hover{
  border-color:var(--amber-hover);
  background:var(--amber-hover);
}
/* 共通（紺）：会社・車両・分別表・トップの相談窓口・印刷・地図・404 */
.btn--co{
  border-color:var(--navy);
  color:var(--navy);
  background:#fff;
}
.btn--co:hover{
  background:var(--mist);
}
.btn--co-f{
  border-color:var(--navy);
  background:var(--navy);
  color:#fff;
}
.btn--co-f:hover{
  border-color:var(--navy-d);
  background:var(--navy-d);
}
/* 電話（共通の紺の枠＋電話の印）。形は 1 つ：1 行目に印と番号、2 行目に受付時間（番号の左端にそろえる）。矢印なし */
.btn--tel{
  display:inline-grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:.5em;
  align-items:center;
  justify-content:start;
  padding-top:.5em;
  padding-bottom:.5em;
  line-height:1.4;
  border-color:var(--navy);
  color:var(--navy);
  background:#fff;
  font-variant-numeric:tabular-nums;
  text-align:left;
}
.btn--tel::before{
  content:"";
  width:1.1em;
  height:1.1em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn--tel__n{
  min-width:0; /* 欄が狭いとき（320px の箱の中）は「お電話｜番号」の間だけで折る。番号は割らない */
}
.btn--tel:hover{
  background:var(--mist);
}
.btn--tel small{
  grid-column:2;
  font-size:var(--fs-sm);
  font-weight:400;
  letter-spacing:.02em;
  color:var(--muted);
}
/* 紺の地（白の枠） */
.btn--line-w{
  border-color:#fff;
  color:#fff;
  background:transparent;
}
.btn--line-w:hover{
  background:rgba(255,255,255,.14);
}
/* 送信ボタン（ページのトーンで塗る。矢印なし） */
.form button[type=submit]{
  min-width:16em;
  justify-content:center;
}
.form-shell{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:40px;
  align-items:start;
}
.form{
  background:#fff;
  padding:34px;
  border:1px solid var(--line);
  border-top:var(--edge-top) solid var(--tone);
  border-radius:var(--r);
}
.field{
  margin-bottom:22px;
}
.field label,
.field legend{
  display:block;
  font-weight:700;
  font-size:var(--fs-body);
  margin-bottom:.4em;
  color:var(--navy);
}
.req{
  background:var(--err);
  color:#fff;
  font-size:var(--fs-xs);
  border-radius:var(--r-xs);
  padding:.1em .6em;
  margin-left:.5em;
  vertical-align:middle;
  white-space:nowrap;
}
.opt{
  background:var(--muted);
  color:#fff;
  font-size:var(--fs-xs);
  border-radius:var(--r-xs);
  padding:.1em .6em;
  margin-left:.5em;
  vertical-align:middle;
}
/* 入力欄と選択欄は、高さ（--field-h）・枠・左の余白を同じにして、文字の開始位置をそろえる（2026-10-21 監査 review-4 #12） */
input[type=text],
input[type=tel],
input[type=email],
input[type=date],
input[type=search],
select,
textarea{
  width:100%;
  border:1.5px solid var(--muted-2);
  border-radius:var(--r);
  padding:0 16px;
  font:inherit;
  line-height:1.5;
  background-color:#fff;
  color:var(--ink);
}
input[type=text],
input[type=tel],
input[type=email],
input[type=date],
select{
  height:var(--field-h);
}
select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3A6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:18px 18px;
  cursor:pointer;
}
textarea{
  min-height:130px;
  padding-block:13px;
  resize:vertical;
}
input:focus,
select:focus,
textarea:focus{
  border-color:var(--deep);
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea{
  border-color:var(--err);
  background:var(--err-wash);
}
.err-msg{
  color:var(--err);
  font-size:var(--fs-sm);
  margin-top:.35em;
  font-weight:700;
}
.hint{
  font-size:var(--fs-sm);
  color:var(--muted);
  margin-top:.3em;
}
.field .check{
  display:flex;
  gap:.6em;
  align-items:flex-start;
  font-size:var(--fs-body);
}
.field .check{
  min-height:44px;
  cursor:pointer;
}
.field .check input{
  width:28px;
  height:28px;
  margin:.05em 0 0;
  flex:0 0 28px;
}
.field .check .req{
  margin-left:.5em; /* 「必須」の札は、ほかの欄と同じく文の後ろ（再採点 SP N19） */
}
.demo-notice{
  background:var(--amber-wash);
  border-left:var(--edge) solid var(--amber);
  color:var(--amber-ink-d);
  padding:.9em 1.2em;
  font-size:var(--fs-body);
  margin-bottom:22px;
  font-weight:700;
  border-radius:var(--r);
}
.done{
  text-align:center;
  padding:44px 14px;
}
.done .mark{
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--ok);
  margin:0 auto 18px;
  display:grid;
  place-items:center;
}
.done .mark svg{
  width:36px;
  height:36px;
  stroke:#fff;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* 本番のフォーム: 迷惑送信の罠欄（人には見せない）、確認ウィジェット、送信エラー、受付番号 */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.field--bot{
  margin-top:6px;
}
.form-error{
  border-radius:var(--r);
  border-left:var(--edge) solid var(--err);
  background:var(--err-wash);
  color:var(--err);
  padding:.8em 1.1em;
  margin:0 0 18px;
  font-weight:700;
}
.form-error a{
  color:inherit;
}
.form[aria-busy="true"] button[type="submit"]{
  opacity:.6;
  cursor:progress;
}
.done .done-ref{
  margin-top:.6em;
  color:var(--muted);
}
.done .done-ref strong{
  font-family:ui-monospace,Consolas,monospace;
  letter-spacing:.08em;
  color:var(--navy);
}
/* 白地の箱（1px 枠＋左線）。電話の箱なので共通の紺 */
.aside-box{
  background:#fff;
  padding:28px;
  position:sticky;
  top:96px;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--navy);
  border-radius:var(--r);
}
.aside-box h2{
  font-size:var(--fs-lg);
  color:var(--navy);
}
.aside-box .btn--tel{
  width:100%;
  margin:.4em 0 .8em;
}
.aside-box ul{
  padding-left:0;
  list-style:none;
  font-size:var(--fs-body);
  color:var(--muted);
}
/* 電話の帯（白地の箱＝1px 枠＋左線。電話は共通なので紺）。左に文、右に電話のボタン（TelLine） */
.callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px 24px;
  flex-wrap:wrap;
  background:#fff;
  padding:16px 22px;
  margin:0 0 20px;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--navy);
  border-radius:var(--r);
}
/* 地図の箱の中に置くとき（周りの余白は親の gap で取る） */
/* 地図の欄の中では、箱の中に箱を重ねない（全幅で枠と左線を外して、文とボタンだけにする。再々採点 PC R18） */
.callout--in{
  margin:0;
  align-self:stretch;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  /* どの幅でも、文の下に電話のボタンを置く（960px で文が左・ボタンだけ右端に離れていたのをそろえる。2026-10-22 再採点3 PC S15） */
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.callout__t{
  display:flex;
  flex-direction:column;
  gap:.2em;
}
.callout b{
  color:var(--navy);
}
/* 箱の本文は、ほかの注意・補足の箱（.who など）と同じ本文の大きさ（再々採点 PC R17） */
.callout__t span{
  font-size:var(--fs-body);
  color:var(--muted);
}
.srt-search input{
  width:100%;
  border:1.5px solid var(--muted-2);
  border-radius:var(--r);
  padding:0 14px;
  font:inherit;
}
.field.invalid .hint{
  display:none;
}
.form-shell>*{
  min-width:0;
}
@media (max-width:980px){
  .form-shell{
    grid-template-columns:1fr;
    gap:28px;
  }
  .aside-box{
    position:static;
  }
}
@media (max-width:760px){
  .form{
    padding:24px 18px;
  }
  /* 電話の帯：文の下に、横いっぱいの電話のボタン */
  .callout{
    flex-direction:column;
    align-items:stretch;
  }
  .callout .btn--tel{
    width:100%;
  }
  /* 送信ボタンは入力欄と同じ幅に */
  .form button[type=submit]{
    width:100%;
    min-width:0;
  }
}
/* フォームの上の電話の帯は出さない（電話は右・下の箱と、スマホの下部バーにある。同じ電話を 1 画面に 2 回出さない） */
.form-shell .callout{
  display:none;
}
/* 400px 以下：電話のボタンの左右の余白と、側面の箱の余白を詰めて、受付時間「受付 8:00〜17:00（日曜休み）」を 1 行に収める
   （形は 1 つのまま：1 行目に印と番号、2 行目に受付時間。2026-10-22 再採点3 SP X13） */
@media (max-width:400px){
  .btn--tel{
    padding-inline:.75em;
  }
  .btn--tel small{
    letter-spacing:0;
  }
  .aside-box{
    padding:22px 16px;
  }
}
/* 340px 以下：側面の箱・アクセス欄の中のボタンは幅が 240px ほどしかないため、受付時間を札の大きさ（--fs-xs）にして 1 行に（どのボタンも同じ大きさにそろえる） */
@media (max-width:340px){
  .btn--tel small{
    font-size:var(--fs-xs);
  }
}
/* 06-tables：表・定義リスト。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
.tbl-wrap{
  overflow-x:auto;
  /* 中の読み上げ用の文字（.sr-only・position:absolute）の基準をこの枠にする。基準が枠の外だと、横スクロールの表の右端の位置に置かれ、
     ページ全体が横に広がる（/sorting の業種で見る表を開くと 320px で 523px。2026-10-27 COO 確認 #4） */
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-top:2px solid var(--navy);
  border-radius:var(--r);
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:min(520px,100%);
  font-size:var(--fs-body);
}
/* 行の見出し（th）と本文（td）は同じ文字の大きさで、ベースラインをそろえる。見出しは太さと色だけで区別する（2026-10-21 監査 review-4 #10） */
th,
td{
  text-align:left;
  padding:.9em 1.1em;
  border-bottom:1px solid var(--line);
  vertical-align:baseline;
}
th{
  background:var(--paper);
  color:var(--navy);
}
/* 表の見出し行は、左端の見出し列と区別がつくように、濃い地に白で示す */
thead th{
  background:var(--navy);
  color:#fff;
  font-size:var(--fs-sm);
  letter-spacing:.04em;
  border-bottom:0;
}
thead th + th{
  border-left:1px solid rgba(255,255,255,.35);
}
tr:last-child td,
tr:last-child th{
  border-bottom:0;
}
.dl{
  display:grid;
  grid-template-columns:8em minmax(0,1fr);
  margin:0;
  background:#fff;
  border-top:2px solid var(--navy);
  border-radius:var(--r);
  padding:0;
}
.dl dt,
.dl dd{
  padding:.9em .4em;
  border-bottom:1px solid var(--line);
  margin:0;
}
.dl dt{
  font-weight:700;
  color:var(--navy);
}
.section--blue .tbl-wrap{
  background:transparent;
  border-color:rgba(255,255,255,.35);
  border-top-color:#fff;
}
.section--blue th{
  color:#fff;
  border-color:rgba(255,255,255,.25);
  background:rgba(0,20,50,.22);
}
.section--blue td{
  color:var(--on-dark);
  border-color:rgba(255,255,255,.25);
}
.section--blue thead th{
  background:rgba(0,16,40,.6);
  border-bottom:2px solid #fff;
}
/* 表の題（表の中の見出しは、カードの題と同じ形） */
.tcap{
  caption-side:top;
  text-align:left;
  font-size:var(--fs-lg);
  font-weight:700;
  line-height:var(--lh-head);
  color:var(--navy);
  padding:.8em 1.1em .5em;
}
.tbl-wrap th small{
  display:block;
  font-weight:400;
  opacity:.85;
  margin-top:2px;
  font-size:var(--fs-sm);
}
.tbl-wrap td b{
  font-size:var(--fs-body);
}
/* 表を 2 つ横に並べるとき（保有車両の寸法） */
.grid2--tbls{
  align-items:start; /* 2 つの表は高さを伸ばさず、行の高さを同じにする（再採点 PC N7） */
}
/* 横に 2 つ並べる短い表は、欄の幅に収める（横スクロールにしない） */
.grid2--tbls table{
  min-width:0;
}
.grid2--tbls .tbl-wrap tbody th{
  min-width:0;
}
.ptable td:nth-child(3),
.ptable td:nth-child(4){
  white-space:nowrap;
  min-width:6.5em;
}
.policy .dl{
  margin-top:.6em;
}
/* 窓口の表の下の「制定・版」は、表から段落 1 つ分離す（表の下端に付いて見えないように。2026-10-22 再採点3 PC R21・SP） */
.policy .dl+p{
  margin-top:2em;
}
.section--blue .tbl-wrap th small{
  opacity:1;
  color:#fff;
}
@media (max-width:1100px){
  .ptable tr,
  .ptable th,
  .ptable td{
    display:block;
    min-width:0;
  }
  .ptable tr{
    background:#fff;
    border:1px solid var(--line);
    border-top:3px solid var(--navy);
    padding:14px 14px 12px;
    margin-bottom:12px;
  }
  .ptable th[scope="row"]{
    padding:0 0 .5em;
    border:0;
    font-size:var(--fs-body);
    color:var(--navy);
  }
  /* セルは grid にしない（中の span・読点が 1 つずつ別のマスになり、品目が縦に並ぶため。再採点 SP N1）。
     項目名（::before）を左の欄に浮かせ、値はその右から普通に折り返す */
  .ptable td{
    padding:.3em 0 .3em calc(7.2em + 8px);
    border:0;
    position:relative;
  }
  .ptable td::before{
    content:attr(data-l);
    position:absolute;
    left:0;
    top:.3em;
    width:7.2em;
    font-weight:700;
    color:var(--navy);
    font-size:var(--fs-sm);
  }
}
@media (max-width:760px){
  .dl{
    grid-template-columns:6.5em minmax(0,1fr);
  }
  table{
    min-width:0;
    font-size:var(--fs-sm);
  }
  th,
  td{
    padding:.7em .7em;
  }
  .tbl-wrap tbody th{
    min-width:6.8em;
  }
  .tbl-wrap th,
  .tbl-wrap td{
    padding:.7em .6em;
  }
  .tbl-wrap:has(.tcard){
    overflow:visible;
    border:0;
    background:transparent;
  }
  .tcard,
  .tcard thead,
  .tcard tbody,
  .tcard tr,
  .tcard th,
  .tcard td{
    display:block;
    min-width:0;
  }
  .tcard caption{
    display:block;
    padding-left:0;
  }
  .tcard thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
  }
  .tcard tr{
    background:#fff;
    border:1px solid var(--line);
    border-top:3px solid var(--navy);
    padding:14px 14px 10px;
    margin-bottom:12px;
  }
  .tcard th[scope="row"]{
    padding:0 0 .5em;
    border:0;
    font-size:var(--fs-body);
    color:var(--navy);
    min-width:0;
  }
  .tcard td{
    padding:.35em 0 .35em calc(6.8em + 8px);
    border:0;
    position:relative;
  }
  .tcard td::before{
    content:attr(data-l);
    position:absolute;
    left:0;
    top:.35em;
    width:6.8em;
    font-weight:700;
    color:var(--navy);
    font-size:var(--fs-sm);
  }
  /* 沿革（会社概要）: 列が 2 つだけなので、スマホでは「できごと」の見出しを出さず、年月の下に文を続ける */
  .tcard.hist td{
    display:block;
    padding:0;
  }
  .tcard.hist td::before{
    content:none;
  }
  .tcard.hist th[scope="row"]{
    padding:0 0 .25em;
  }
}
@media (min-width:761px){
  .tcard th[scope="row"]{
    min-width:10.5em;
  }
  .tbl-wrap tbody th{
    min-width:12.5em;
  }
}
/* 761〜980px：左右の余白を広げた分（2026-10-27）、行の見出しの最小幅を詰めて、4 列の表（店舗・会社のごみの品目）を欄に収める */
@media (min-width:761px) and (max-width:980px){
  .tbl-wrap tbody th,
  .tbl-wrap .tcard th[scope="row"]{
    min-width:8em;
  }
}
/* カード型の表（スマホの .tcard・タブレット以下の .ptable）：カードの題・行の見出し・値の左端を、カードの内側の余白 1 つでそろえる（SP #38）。
   .tbl-wrap th / td の余白（≦760px）より強く効かせる */
@media (max-width:1100px){
  .tbl-wrap .ptable th[scope="row"]{
    background:transparent;
    padding:0 0 .5em;
  }
  .tbl-wrap .ptable td{
    padding:.3em 0 .3em calc(7.2em + 8px);
  }
}
@media (max-width:760px){
  .tbl-wrap .tcard th[scope="row"]{
    background:transparent;
    padding:0 0 .5em;
  }
  .tbl-wrap .tcard td{
    padding:.35em 0 .35em calc(6.8em + 8px);
  }
  .tbl-wrap .tcard.hist td{
    padding:0;
  }
}
/* 760px 以下：項目名が長い「例（一般的な説明）」は、項目名の欄（6.8em）に入らず括弧の中で折れるため、この表は項目名の下に値を置く（同じカードの中で形をそろえる。再採点3 SP Y11） */
/* 2026-10-27 独立点検：カード型の表は、どの表も「項目名の下に値」の 1 つの形にそろえる（左に並ぶ形と上に来る形が 1 ページの中で混ざっていた） */
@media (max-width:760px){
  .tbl-wrap .tcard td{
    padding-left:0;
  }
  .tcard td::before{
    position:static;
    display:block;
    width:auto;
    margin-bottom:.2em;
  }
}
/* 320〜374px：項目名と値を 2 列に並べると、値の欄が細くなり語の途中で折れるので、項目名の下に値を置く（390px 以上は 2 列のまま） */
@media (max-width:374px){
  .tbl-wrap .tcard td,
  .tbl-wrap .ptable td{
    padding-left:0;
  }
  .tcard td::before,
  .ptable td::before{
    position:static;
    display:block;
    width:auto;
  }
  /* 会社概要などの定義リストも、項目名の下に値を置く（「大久保リサイクルセンター」が語の途中で折れないように） */
  .dl{
    grid-template-columns:minmax(0,1fr);
  }
  .dl dt{
    padding-bottom:0;
    border-bottom:0;
  }
  .dl dd{
    padding-top:.2em;
  }
}
/* スマホ・タブレットの許可品目のセル：品目ごとの .nw は、欄より長い品目（「廃プラスチック類（石綿含有のものを除く）」など）だけ文節で折る（はみ出さないように）。
   761〜899px も同じ（表のままだと品目の列が欄より広くなり、右が切れて横スクロールになる。再々採点 SP X4）。900px 以上は 1 品目を折らない（下） */
@media (min-width:761px) and (max-width:980px){
  .tbl-wrap .tcard:has(td[data-l="品目"]) tbody th{
    min-width:7em;
  }
  /* 列の幅を決めて、品目の列に幅を回す（許可 27%・範囲 28%・品目 45%。セルの左右の余白も詰める） */
  .tcard:has(td[data-l="品目"]){
    table-layout:fixed;
  }
  .tbl-wrap .tcard:has(td[data-l="品目"]) :is(th,td){
    padding-inline:.8em;
  }
  /* 許可 25%・範囲 34%・品目 41%（範囲の「大久保リサイクルセンター）」13 字が 1 行に入る幅。許可は「特別管理産業廃棄物」9 字が入る幅。2026-10-22 再採点3 SP Y3） */
  .tcard:has(td[data-l="品目"]) thead th:nth-child(1){
    width:25%;
  }
  .tcard:has(td[data-l="品目"]) thead th:nth-child(2){
    width:34%;
  }
}
/* 900〜980px は表が広いので、許可 22%（「産業廃棄物収集運搬」9 字が 1 行）・範囲 29%（13 字が入る）にして品目の列を 49% に広げ、
   981px 以上と同じく 1 品目（「ガラスくず・コンクリートくず及び陶磁器くず、」22 字）を途中で折らない（再採点4 PC-A P4） */
@media (min-width:900px) and (max-width:980px){
  .tcard:has(td[data-l="品目"]) thead th:nth-child(1){
    width:22%;
  }
  .tcard:has(td[data-l="品目"]) thead th:nth-child(2){
    width:29%;
  }
}
/* 981px 以上：範囲の列を広げて「破砕（自社の大久保リサイクルセンター）」を 1 行に、1 品目（「ガラスくず・コンクリートくず及び陶磁器くず」）は途中で折らない（再採点3 PC S5） */
@media (min-width:981px){
  .tcard:has(td[data-l="品目"]) thead th:nth-child(1){
    width:18%;
  }
  .tcard:has(td[data-l="品目"]) thead th:nth-child(2){
    width:32%;
  }
}
/* 範囲の列の括弧書き（「（自社の大久保リサイクルセンター）」17 字。scripts/nobreak.mjs の 900px 以上だけ割らない組）は、列が 17 字より狭い幅（900〜980px）で
   列の外へはみ出すので、この列では括弧の中で折ってよい（欄に入る幅では今までどおり 1 行） */
@media (max-width:980px){
  .tcard td[data-l="範囲"] span.nwm{
    white-space:normal!important;
  }
}
/* 900px 以上は 1 品目を途中で折らない（品目の区切りの「、」の後でだけ折る） */
@media (min-width:900px){
  .tcard td[data-l="品目"] .pitem{
    white-space:nowrap;
  }
}
@media (max-width:899px){
  .tcard td[data-l="品目"] .nw{
    white-space:normal;
  }
  .tcard td[data-l="品目"] .pitem>.nw{
    display:inline-block; /* 品目の途中では折らず、品目の区切り（・）で折る。欄より長い品目だけ中で折れる */
    max-width:100%;
    vertical-align:top; /* 2 行に折れた品目で、セルの 1 行目が下がらないように */
  }
}
/* 2 列の短い表（トップの対応地域）：幅 400px 以下では、行の見出しを上・値を下に積む（横に並べると 375px で右が 31px 切れる。再々採点 SP X5） */
@media (max-width:400px){
  .tstack thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
  }
  .tstack tr,
  .tstack tbody th,
  .tstack td{
    display:block;
    min-width:0;
  }
  .tstack tr{
    border-bottom:1px solid var(--line);
  }
  .tstack tr:last-child{
    border-bottom:0;
  }
  .tbl-wrap .tstack tbody th{
    min-width:0;
    padding-bottom:.2em;
    border-bottom:0;
  }
  .tbl-wrap .tstack td{
    padding-top:.2em;
    border-bottom:0;
  }
}
@media (max-width:400px){
  .section--blue .tstack tr{
    border-bottom-color:rgba(255,255,255,.25);
  }
}
/* 表のセルの中の「区切りの塊」（/corporate ごみの区分の表。同じページのお持ち込みのカードの括弧書きにも使う）。塊の途中（括弧の中）では折らず、塊の境目（「／」の後・括弧の前）で折る。
   塊が欄より長いときだけ中で折れる。欄が塊より狭い幅では普通の文として流す（1 塊だけの短い行を作らないため。再採点4 PC-A P1・SP-A Z12）
   .tseg：761px 以上／.tseg--m（「（自社の大久保リサイクルセンター）」17 字）：900px 以上／.tseg--l（「中間処理（自社の…）」21 字）：1100px 以上 */
@media (min-width:761px){
  .tseg{
    display:inline-block;
    max-width:100%;
    text-spacing-trim:space-all; /* 塊の頭の「（」が行頭扱いで半角に詰められ、前の語とくっついて見えるのを防ぐ */
  }
  .tseg--m,
  .tseg--l{
    display:inline;
  }
}
@media (min-width:900px){
  .tseg--m{
    display:inline-block;
  }
}
@media (min-width:1100px){
  .tseg--l{
    display:inline-block;
  }
}
/* 761〜980px のごみの区分の表：区分 25%・例 37%・当社の対応 38%（例の「会社・個人事業主のどちらも）」14 字と、対応の「収集運搬（兵庫県・大阪府）／」14 字が 1 行に入る幅）。
   900〜980px は区分 22%・例 37%・対応 41%（対応の 1 行目に「収集運搬（兵庫県・大阪府）／中間処理」18 字が入る幅） */
@media (min-width:761px) and (max-width:980px){
  .tcard:has(td[data-l="例（一般的な説明）"]){
    table-layout:fixed;
  }
  .tbl-wrap .tcard:has(td[data-l="例（一般的な説明）"]) :is(th,td){
    padding-inline:.8em;
  }
  .tcard:has(td[data-l="例（一般的な説明）"]) thead th:nth-child(1){
    width:25%;
  }
  .tcard:has(td[data-l="例（一般的な説明）"]) thead th:nth-child(2){
    width:37%;
  }
}
@media (min-width:900px) and (max-width:980px){
  .tcard:has(td[data-l="例（一般的な説明）"]) thead th:nth-child(1){
    width:22%;
  }
}
/* 761〜1100px の許可のカード（.ptable）：項目名（小さい字）の行の高さを値の行（本文の大きさ）と同じにし、上端も値と同じ位置から始めて、
   項目名と値のベースラインをそろえる（項目名が約 3px 上に浮いていた。再採点4 PC-B P10） */
@media (min-width:761px) and (max-width:1100px){
  .ptable td::before{
    top:.3rem;
    line-height:calc(var(--lh-body) * var(--fs-body));
  }
}
/* 07-components：部品：カード・手順・FAQ・タブ・バッジ・入口カード・相談の帯。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
/* 左右の文の行数が違っても、下の「〜のご案内 →」の高さをそろえる（縦に並べて、案内の行を下に寄せる） */
.entry{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-decoration:none;
  color:var(--ink);
  background:#fff;
  padding:30px 34px 28px;
  position:relative;
  border:1px solid var(--line);
  border-top:var(--edge-top) solid var(--deep);
  border-radius:var(--r) 0 0 0;
  transition:background var(--t-fast) var(--ease-out);
}
.entry--p{
  border-top-color:var(--amber);
  border-left:0;
  border-radius:0 var(--r) 0 0;
}
.entry:hover{
  background:var(--paper);
  transform:translateY(-4px);
}
.entry__tag{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--muted);
  letter-spacing:.08em;
}
.entry h2{
  font-size:var(--fs-h3);
  margin:.1em 0 .3em;
  color:var(--navy);
}
.entry p{
  font-size:var(--fs-body);
  color:var(--muted);
  margin-bottom:.9em;
}
.entry__go{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-weight:700;
  color:var(--deep);
  border-bottom:2px solid currentColor;
  padding-bottom:.1em;
  margin-top:auto;
}
.entry--p .entry__go{
  color:var(--amber-ink);
}
.entry__go::after{
  content:"→";
  transition:transform var(--t-enter) var(--ease-out);
}
.entry:hover .entry__go::after{
  transform:translateX(5px);
}
.scenes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
.scenes ul{
  list-style:none;
  margin:0;
  padding:0;
  border-top:2px solid var(--deep);
}
.scenes--p ul{
  border-top-color:var(--amber);
}
.scenes__h{
  font-size:var(--fs-lg);
  color:var(--navy);
  margin:0 0 .6em;
  letter-spacing:.06em;
}
.scene{
  display:grid;
  grid-template-columns:1fr auto;
  gap:0 14px;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
  padding:18px 6px;
  border-bottom:1px solid var(--line);
  transition:background var(--t-fast) var(--ease-out),padding var(--t-fast) var(--ease-out);
}
.scene:hover{
  background:var(--mist);
  padding-left:14px;
}
.scene b{
  display:block;
  font-size:var(--fs-lg);
  color:var(--navy);
  grid-column:1;
}
.scene span{
  display:block;
  font-size:var(--fs-sm);
  color:var(--muted);
  grid-column:1;
  line-height:1.6;
}
.scene::after{
  content:"→";
  grid-column:2;
  grid-row:1/3;
  color:var(--deep);
  font-weight:700;
}
/* ご家庭の列は、矢印と hover の地もご家庭の色 */
.scenes--p .scene::after{
  color:var(--amber-ink);
}
.scenes--p .scene:hover{
  background:var(--warm);
}
.badge{
  display:inline-block;
  font-size:var(--fs-sm);
  font-weight:700;
  border-radius:var(--r-xs);
  padding:.2em .8em;
  letter-spacing:.03em;
}
.badge--ok{
  background:var(--ok-wash);
  color:var(--ok);
}
.badge--wait{
  background:var(--amber-wash);
  color:var(--amber-ink);
}
.legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  align-items:center;
  font-size:var(--fs-sm);
  color:var(--muted);
  margin:0 0 20px;
}
/* 注記（※）。1 行が長くなりすぎないよう 45em まで（#34） */
.note{
  max-width:45em;
  font-size:var(--fs-sm);
  color:var(--muted);
  margin-top:18px;
}
.permits .rv .badge{
  opacity:.15;
  transition:opacity var(--t-enter) var(--ease-out) .05s;
}
.permits .rv.in .badge{
  opacity:1;
}
.card{
  background:var(--paper);
  padding:28px 28px 30px;
  border-top:var(--edge-top) solid var(--tone);
  border-radius:var(--r);
}
.section--tint .card{
  background:#fff;
}
.card--p{
  border-top-color:var(--amber);
}
.card h3{
  font-size:var(--fs-lg);
  color:var(--navy);
  display:block;
  margin-bottom:.5em;
}
.card p{
  color:var(--muted);
  font-size:var(--fs-body);
  margin-bottom:0;
}
/* 主なサービスのカード（.card--feature）も、地の色・題の大きさはほかのカードと同じ（意味の読めない 2 色を使わない。2026-10-21 監査 review-4） */
.tabs{
  display:flex;
  gap:0;
  margin-bottom:28px;
  border-bottom:2px solid var(--line);
}
.tab{
  background:transparent;
  border:0;
  border-bottom:4px solid transparent;
  margin-bottom:-2px;
  color:var(--muted);
  font-weight:700;
  padding:.6em 1.6em;
  cursor:pointer;
  font-family:inherit;
  font-size:var(--fs-body);
  min-height:48px;
  border-radius:var(--r) var(--r) 0 0;
}
.tab[aria-selected="true"]{
  color:var(--navy);
  border-bottom-color:var(--deep);
}
.tab--p[aria-selected="true"]{
  border-bottom-color:var(--amber);
}
.steps{
  counter-reset:s;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0;
  list-style:none;
  margin:0;
  padding:0;
}
.steps li{
  counter-increment:s;
  padding:0 24px 8px 0;
  position:relative;
}
.steps li::before{
  padding-right:.7em;
  margin-bottom:.5em;
  content:counter(s,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  width:56px;
  height:56px;
  border-radius:50%;
  border:2px solid var(--navy);
  background:var(--navy);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:var(--fs-lg);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  padding:0;
  margin:0;
  z-index:1;
  transition:background var(--t-enter) var(--ease-out),color var(--t-enter) var(--ease-out),border-color var(--t-enter) var(--ease-out);
}
.steps li::after{
  content:"";
  position:absolute;
  left:56px;
  right:0;
  top:27px;
  height:3px;
  background:linear-gradient(var(--navy),var(--navy)) 0 0/calc(var(--p,1)*100%) 100% no-repeat,var(--line);
}
.steps li:last-child::after{
  right:auto;
  width:2.6em;
  display:none;
}
.steps h3{
  color:var(--navy);
  margin-bottom:.3em;
  font-size:var(--fs-lg);
}
.steps p{
  font-size:var(--fs-body);
  color:var(--muted);
  margin:0;
}
.faq{
  border-top:2px solid var(--navy);
  border-radius:var(--r);
  overflow:hidden;
}
.faq details{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.faq summary{
  cursor:pointer;
  padding:1em 1.1em;
  font-weight:700;
  color:var(--navy);
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:1em;
  min-height:54px;
  align-items:center;
}
.faq summary::before{
  content:"Q";
  display:grid;
  place-items:center;
  flex:0 0 28px;
  height:28px;
  border-radius:var(--r-xs);
  background:var(--tone);
  color:var(--tone-on);
  font-size:var(--fs-xs);
  margin-right:.2em;
}
/* 質問の文は、句が欄より長いとき（320px の「持ち込むことはできますか？」）に右の「＋」の列へはみ出さないよう、縮められるようにする（2026-10-27） */
.faq summary span{
  flex:1;
  min-width:0;
}
.faq summary::after{
  content:"+";
  font-size:var(--fs-h3);
  line-height:1;
  color:var(--tone-ink);
  transition:transform var(--t-enter) var(--ease-out);
}
.faq details[open] summary::after{
  transform:rotate(45deg);
}
.faq details>div{
  padding:0 1.2em 1.3em calc(2.1rem + 28px + .82rem * .2);
  color:var(--muted);
  font-size:var(--fs-body);
}
/* スマホ（600px 以下）：答えの左の字下げ（Q の札＋間の約 66px）をやめ、札の左端にそろえる。
   320〜390px で 1 行が 11 字ほどになり、「大久保」「はい。」「よって、」だけの行ができていたため、1 行 14 字ほどに広げる（2026-10-27 COO 確認 #1） */
@media (max-width:600px){
  .faq details>div{
    padding:0 1.1em 1.3em;
  }
}
.swap{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:1.4em;
}
/* スマホでは 2 つのボタンを同じ幅で縦に積む */
@media (max-width:600px){
  .swap .btn{
    flex:1 1 100%;
  }
}
.points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  border-top:2px solid var(--navy);
  border-radius:var(--r);
  overflow:hidden;
}
.points li{
  position:relative;
  background:#fff;
  padding:.85em 1em .85em 2.6em;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.points li::before{
  content:"";
  position:absolute;
  left:.8em;
  top:calc(.85em + .925em); /* 1 行目の中央（上の余白 .85em ＋ 行の高さ 1.85 の半分）。2 行以上でも 1 行目に付く */
  width:1.1em;
  height:1.1em;
  margin-top:-.55em;
  border-radius:var(--r-xs);
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/70% no-repeat;
}
.more{
  margin-bottom:22px;
}
.more summary{
  font-weight:700;
  color:var(--tone-ink);
  min-height:44px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}
.section--statement .card{
  background:transparent;
  border-top:1px solid rgba(255,255,255,.45); /* 区切りの線（上の表の線と同じ）。橙の飾りの線は使わない */
  border-radius:0;
  color:#fff;
  padding:22px 0 0;
}
.ph{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  font-size:var(--fs-sm);
  line-height:1.6;
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 12px,var(--surface) 12px 24px);
  border:1px dashed var(--muted-2);
  border-radius:var(--r);
}
.ph b{
  display:block;
  font-size:var(--fs-sm);
  color:var(--navy);
  letter-spacing:.06em;
}
.ph span{
  display:block;
  padding:0 1em;
}
/* 欄の中の補足の行き先（文字リンク＋→）。矢印は CSS で付け、本文には書かない。hover で右へ 4px */
/* 文字リンクも、指で押せる高さ（44px）を全幅で取る（SP #60） */
.more-link{
  margin:14px 0 0;
  font-weight:700;
}
.more-link a{
  display:inline-block;
  padding:7px 0; /* 1 行で 44px 以上（文字の行の高さ 31px ＋上下 14px）。2 行になっても矢印は文の末尾に続く */
}
/* 矢印は文の最後の語と離れないように、改行しない空白（a0）でつなぐ（iPhone で「→」だけが次の行に落ちた。2026-10-28） */
.more-link a::after{
  content:"\a0\a0→";
}
.actions{
  margin:14px 0 0;
}
/* 箱の形は 2 つだけ（2026-10-22 再採点 SP A②）：カード＝上線（.card・.veh・フォームなど）と、注意・補足＝白地＋1px の枠＋左線（この .note-box・.callout・.who など）。
   左線の色は役割で変える（ページのトーン／紺＝案内、赤＝ご注意、橙＝受付の止め）。破線は「計算の例」だけ */
.note-box{
  border-radius:var(--r);
  margin-top:36px;
  padding:20px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--tone);
  font-size:var(--fs-body);
}
.note-box p{
  margin:.4em 0;
}
.note-box ul{
  margin:.4em 0 0;
  padding-left:0;
  list-style:none;
  color:var(--muted);
}
.tag{
  display:inline-block;
  font-weight:700;
  background:var(--mist);
  color:var(--deep);
  padding:.05em .7em;
  border-radius:var(--r-xs);
  white-space:nowrap;
  font-size:var(--fs-xs);
}
.steps--v{
  grid-template-columns:1fr;
}
.steps--v li{
  padding:0 0 18px 0;
}
/* 白地の箱（1px 枠＋左線）。左線はページのトーン */
.who{
  border-radius:var(--r);
  background:#fff;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--tone);
  padding:16px 22px;
  margin-bottom:22px;
}
.who b{
  display:block;
  color:var(--navy);
  margin-bottom:.3em;
}
.who ul{
  list-style:none;
  margin:0 0 .5em;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.2em 1.4em;
}
.who li{
  font-size:var(--fs-body);
}
/* タブレット・パソコンの幅は 2 列に並べ、箱が縦に長くならないようにする（2026-10-27 依頼者：医療ページの形を全ページに） */
@media (min-width:761px){
  .who ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  /* 項目がちょうど 3 つのとき（/corporate）は、2 列だと 1 つだけ下の段に残るので 3 列の 1 段にする（2026-10-27 依頼者） */
  .who ul:has(> li:nth-child(3):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
.who p{
  margin:0;
  font-size:var(--fs-body);
  color:var(--muted);
}
.steps{
  grid-template-columns:repeat(4,1fr);
}
.steps li{
  padding:78px 14px 8px 0; /* 右の余白を詰めて 1 行 16 字を取り、4 つの説明を 2 行ずつにそろえる（再々採点 PC R9） */
}
.js-steps .steps li:not(.on)::before{
  background:#fff;
  color:var(--muted-2);
  border-color:var(--line-2);
}
.js-steps .steps li h3,
.js-steps .steps li p{
  transform:translateY(12px);
  transition:opacity var(--t-max) var(--ease-out),transform var(--t-max) var(--ease-out);
  opacity:.9;
}
.js-steps .steps li p{
  transition-delay:.12s;
}
.js-steps .steps li.on h3,
.js-steps .steps li.on p{
  opacity:1;
  transform:none;
}
.js-steps .steps.rv{
  opacity:1;
  transform:none;
}
.steps li.cur::before{
  animation:nodePulse var(--t-max) var(--ease-out) 1; /* いまの手順に切り替わったときに 1 回だけ広がる（2026-10-22 再採点3 S19。常時の点滅をやめる） */
}
.entry,
.scene{
  transition:transform var(--t-enter) var(--ease-out),box-shadow var(--t-enter) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.news .tag{
  justify-self:start;
}
.more summary::after{
  content:"＋";
  font-weight:700;
}
.more[open] summary::after{
  content:"−";
}
.steps.steps--v{
  grid-template-columns:1fr;
}
.ptable .badge{
  white-space:nowrap;
}
.small-muted{
  font-size:var(--fs-sm);
  color:var(--muted);
}
.who a{
  white-space:nowrap;
}
.points.points--plain li{
  padding-left:1.9em;
}
/* 箇条書きの点は全ページで 1 つの形（2026-10-22 再採点 SP N12）：直径 7px の丸・1 行目の中央・色はページのトーン
   （事業＝青、ご家庭＝橙、共通＝紺。形は同じで色だけが変わる） */
.who li,
.aside-box li,
.policy li,
.article li{
  position:relative;
  padding-left:1.1em;
}
.points.points--plain li::before,
.who li::before,
.aside-box li::before,
.policy li::before,
.article li::before{
  content:"";
  position:absolute;
  left:.15em;
  top:calc(.5lh - 3.5px);
  width:7px;
  height:7px;
  margin:0;
  border-radius:50%;
  background:var(--tone);
}
.points.points--plain li::before{
  left:.85em;
  top:calc(.85em + .5lh - 3.5px);
}
@media (max-width:980px){
  .scenes{
    grid-template-columns:1fr;
    gap:36px;
  }
}
@media (max-width:980px){
  .steps{
    grid-template-columns:1fr;
  }
  .steps li{
    padding:10px 0 38px 84px;
    min-height:56px;
  }
}
.steps--v li{
  padding:10px 0 34px 84px;
  min-height:56px;
}
@media (max-width:980px){
  .steps li:last-child{
    padding-bottom:6px;
  }
}
.steps--v li:last-child{
  padding-bottom:6px;
}
@media (max-width:980px){
  .steps li::after{
    display:block;
    left:26px;
    right:auto;
    width:3px;
    top:56px;
    bottom:0;
    height:auto;
    background:linear-gradient(var(--navy),var(--navy)) 0 0/100% calc(var(--p,1)*100%) no-repeat,var(--line);
  }
}
.steps--v li::after{
  display:block;
  left:26px;
  right:auto;
  width:3px;
  top:56px;
  bottom:0;
  height:auto;
  background:linear-gradient(var(--navy),var(--navy)) 0 0/100% calc(var(--p,1)*100%) no-repeat,var(--line);
}
@media (max-width:980px){
  .steps li:last-child::after{
    display:none;
  }
}
.steps--v li:last-child::after{
  display:none;
}
@media (max-width:760px){
  .entry{
    border-radius:var(--r) var(--r) 0 0;
  }
  .entry--p{
    border-left:1px solid var(--line);
    border-radius:0;
  }
  .entry{
    padding:22px 20px 20px;
  }
  .entry h2{
    font-size:var(--fs-h3);
  }
}
@media (max-width:760px){
  .ptable .badge{
    white-space:normal;
  }
}
@media (prefers-reduced-motion:reduce){
  .steps li.cur::before{
    animation:none;
  }
}
.steps li.cur::before{
  animation-iteration-count:1;
}
/* 依頼の流れ 981〜1199px
   ・981〜1099px：どのページも横 1 列（01〜04）のまま。題名を本文の大きさ、説明を注記の大きさにして狭い欄に収める
     （2026-10-27 依頼者：ページによって 1 列と 2×2 が混ざるのをやめ、全ページ同じ形に）
   ・1100〜1199px：説明を注記の大きさ（--fs-sm）にして 2 行ずつにそろえる */
@media (min-width:981px) and (max-width:1099px){
  .steps{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .steps li{
    padding-right:12px;
  }
  .steps h3{
    font-size:var(--fs-body);
  }
  .steps p{
    font-size:var(--fs-sm);
  }
}
@media (min-width:1100px) and (max-width:1199px){
  .steps p{
    font-size:var(--fs-sm);
  }
}
/* 08-hero：FV・下層ページの冒頭・パンくず。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
.hero{
  position:relative;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.hero__grid{
  display:block;
}
.hero__copy{
  padding:72px 0 56px;
  width:min(100%,600px);
}
.hero__call{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(42vw,520px);
  background:var(--deep);
  color:#fff;
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0 28px 0 15%;
  gap:.4em;
}
.hero__call-l{
  font-size:var(--fs-body);
  font-weight:700;
  letter-spacing:.14em;
  color:#fff;
  border-bottom:3px solid var(--amber);
  padding-bottom:.3em;
  margin-bottom:.4em;
}
.hero__call-n{
  font-size:var(--fs-display);
  white-space:nowrap;
  font-weight:700;
  letter-spacing:.03em;
  color:#fff;
  text-decoration:none;
  line-height:1.1;
}
.hero__call-s{
  font-size:var(--fs-body);
  color:#fff;
  margin-bottom:1em;
}
.hero__copy{
  container-type:inline-size;
}
/* 見出しは、どの幅でも span 1 つ＝1 行の 2 行（2026-10-28 依頼者）。長いほうの行（12 字）が文字の欄の幅に入るよう、
   字の大きさを欄の幅（cqi）に合わせて小さくする。大きいほうの上限は --fs-display */
.hero h1{
  font-size:var(--fs-display);
  font-size:min(var(--fs-display),calc(100cqi / 12.6));
  color:var(--navy);
  margin-bottom:.5em;
  letter-spacing:.02em;
  line-height:1.35;
}
.hero h1 span{
  display:block;
  white-space:nowrap;
}
.hero__lead{
  max-width:31em;
  color:var(--ink);
  font-size:var(--fs-lg);
}
.entrances{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:0;
  position:relative;
  z-index:3;
  transform:translateY(40px);
  box-shadow:0 1px 0 var(--line);
  border-radius:var(--r);
}
.sub-hero{
  background:var(--paper);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.sub-hero--p{
  background:var(--warm);
}
.sub-hero h1{
  font-size:var(--fs-h1);
  max-width:20em;
  color:var(--navy);
  margin-bottom:.4em;
  line-height:1.4;
}
/* スマホ：h1 の字間を詰めずに 0 にして、1 行 12 字の句（まとめてご相談ください。）が 360px でも 1 行に入るようにする（2026-10-27） */
@media (max-width:430px){
  .sub-hero h1{
    letter-spacing:0;
  }
}
.sub-hero p{
  max-width:38em;
  color:var(--ink);
}
.crumbs{
  font-size:var(--fs-sm);
  color:var(--muted);
  margin-bottom:1em;
  /* パンくずは全幅で 1 行。入りきらないとき（お知らせの長い題など）は、最後の項目の後ろを「…」で省く（題は直下の h1 に全文がある。2026-10-27 COO 確認 #3） */
  white-space:nowrap;
  overflow-x:clip;
  text-overflow:ellipsis;
}
/* 400px 以下：文字を 1 段小さくして、3 段のパンくず（トップ／事業ごみ／店舗・会社のごみ）を 320px でも省かずに 1 行で見せる */
@media (max-width:400px){
  .crumbs{
    font-size:var(--fs-xs);
  }
}
.hero--photo{
  background:var(--paper);
  border-bottom:0;
}
.hero--photo .hero__stage{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  isolation:isolate;
}
.hero--photo .hero__media{
  position:absolute;
  left:0;
  right:0;
  top:-90px;
  bottom:0;
  z-index:-2;
  will-change:transform;
}
.hero--photo .hero__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  transform-origin:62% 60%;
  /* 写真の寄りの動き（2.8 秒の拡大）はやめた（再々採点 R27） */
}
.hero--photo .hero__stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
}
.hero--photo .hero__grid{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  padding:0;
}
.hero--photo .hero__copy{
  width:min(100%,640px);
  padding:92px 0 150px;
}
.hero--photo h1{
  color:#fff;
  text-shadow:0 2px 3px rgba(6,34,70,.45),0 2px 26px rgba(6,34,70,.55);
}
.hero--photo .hero__call-l{
  border-bottom:0;
  margin:0;
  padding:0;
  border:0;
  font-size:var(--fs-body);
  font-weight:700;
  letter-spacing:.22em;
  color:#fff;
}
.hero--photo .hero__call-n{
  display:inline-block;
  padding:.1em 0; /* 押せる高さを 44px 以上に（SP #63） */
  font-size:var(--fs-display);
  line-height:1.15;
  font-weight:700;
  letter-spacing:.03em;
  color:#fff;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 24px rgba(6,34,70,.6);
}
.hero--photo .hero__call-s{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.1em 1.3em;
  margin:.45em 0 0;
  font-size:var(--fs-body);
  color:#fff;
}
.hero--photo .entrances{
  transform:none;
  margin-top:-100px;
  box-shadow:0 18px 40px -22px rgba(6,34,70,.45);
}
.hero--photo h1 span,
.hero--photo .hero__lead,
.hero--photo .hero__call{
  animation:heroRise var(--t-max) var(--ease-out) both;
}
.hero--photo h1 span:nth-child(1){
  animation-delay:0s;
}
.hero--photo h1 span:nth-child(2){
  animation-delay:.05s;
}
.hero--photo h1 span:nth-child(3){
  animation-delay:.1s;
}
.hero--photo .hero__lead{
  color:#fff;
  animation-delay:.15s;
  text-shadow:0 1px 2px rgba(6,34,70,.55),0 0 18px rgba(6,34,70,.6);
}
.hero--photo .hero__call::before{
  content:"";
  display:block;
  position:absolute;
  z-index:-1;
  inset:-110px -120px -110px -100px;
  background:radial-gradient(closest-side,rgba(6,34,70,.82) 0,rgba(6,34,70,.72) 58%,rgba(6,34,70,0) 100%);
}
.hero--photo .hero__call-n:hover{
  text-decoration:underline;
  text-underline-offset:.14em;
  text-decoration-thickness:2px;
  text-decoration-color:var(--amber);
}
.hero--photo .hero__call-s b{
  font-size:var(--fs-body);
  letter-spacing:.04em;
  color:#fff;
}
.sub-hero p a{
  white-space:nowrap;
}
@media (max-width:980px){
  .hero__copy{
    padding:48px 0 28px;
    width:auto;
  }
  .hero__call{
    position:static;
    width:auto;
    clip-path:none;
    padding:18px 20px;
    margin:0 -20px;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.2em 1em;
  }
  .hero__call-l{
    border-bottom:0;
    margin:0;
  }
  .hero__call-n{
    font-size:var(--fs-display);
  }
  .hero__call-s{
    margin:0;
  }
  .hero--photo .hero__media{
    top:-60px;
  }
  .hero--photo .hero__img{
    object-position:50% 55%;
  }
  .hero--photo .hero__grid{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .hero--photo .hero__copy{
    width:auto;
    padding:52px 0 26px;
  }
  .hero--photo .entrances{
    margin-top:-44px;
  }
  .hero--photo .hero__call::before{
    inset:-40px -20px -40px -20px;
    background:radial-gradient(closest-side,rgba(6,34,70,.6) 0,rgba(6,34,70,.45) 60%,rgba(6,34,70,0) 100%);
  }
}
@media (max-width:760px){
  .entrances{
    grid-template-columns:1fr;
    transform:translateY(30px);
    margin-top:28px;
  }
  .hero__copy{
    padding-bottom:16px;
  }
  .hero__call{
    padding:12px 20px;
  }
  .hero__call-n{
    font-size:var(--fs-display);
  }
  .hero--photo .hero__copy{
    padding:40px 0 20px;
  }
}
.hero--photo .hero__copy{
  padding:128px 0 200px;
}
@media (max-width:980px){
  .hero--photo .hero__copy{
    padding:52px 0 26px;
  }
}
@media (max-width:760px){
  .hero--photo .hero__lead{
    font-size:var(--fs-body);
  }
}
.hero--photo .hero__call{
  position:relative;
  clip-path:none;
  justify-content:flex-start;
  animation-delay:.2s;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.1em;
  width:auto;
  margin:0 0 200px;
  padding:2px 0;
  background:none;
  border:0; /* 縦線の飾りは全幅で付けない（再々採点 PC R11。≦980px は以前から無し） */
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#fff;
  flex-shrink:0;
}
@media (max-width:980px){
  .hero--photo .hero__call{
    margin:0 0 70px;
    padding-left:0;
    border-left:0; /* 縦線の飾りは付けない（再採点 PC N19） */
  }
}
@media (max-width:760px){
  .hero--photo .entrances{
    margin-top:-40px;
    transform:none;
  }
  .crumbs a{
    display:inline-block;
    padding:10px 4px;
  }
}
.crumbs__i{
  white-space:nowrap;
}
.crumbs a{
  color:var(--deep);
  display:inline-block;
  padding:12px 6px;
  margin:-12px -6px;
}
@media (min-width:981px){
  .hero__call{
    justify-content:flex-end;
    padding-bottom:228px;
  }
  .hero__call::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(to top,rgba(11,58,107,.96) 0,rgba(11,58,107,.9) 30%,rgba(11,58,107,.55) 52%,rgba(11,58,107,0) 74%);
  }
  .hero__call>*:not(.hero__photo){
    position:relative;
    z-index:2;
  }
  .hero--photo .hero__img{
    width:128%;
    max-width:none;
    object-position:0 46%;
    transform-origin:64% 60%;
  }
}
@media (max-width:760px){
  .hero--photo .hero__img{
    object-position:30% 55%;
  }
}
@media (min-width:981px){
  .hero--photo .hero__lead{
    max-width:25em;
  }
}
@media (min-width:981px){
  .hero--photo .entrances{
    margin-top:-72px;
  }
  .hero--photo .hero__stage::after{
    background:linear-gradient(100deg,rgba(6,34,70,.84) 0,rgba(6,34,70,.62) 40%,rgba(6,34,70,.2) 66%,rgba(6,34,70,0) 82%),linear-gradient(to top,rgba(6,34,70,.5) 0,rgba(6,34,70,0) 36%);
  }
}
@media (min-width:761px) and (max-width:980px){
  .hero--photo .hero__stage::after{
    background:linear-gradient(to bottom,rgba(6,34,70,.66) 0,rgba(6,34,70,.74) 100%);
  }
}
@media (max-width:760px){
  .hero--photo .hero__stage::after{
    background:linear-gradient(to bottom,rgba(6,34,70,.7) 0,rgba(6,34,70,.76) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero--photo .hero__img,
  .hero--photo h1 span,
  .hero--photo .hero__lead,
  .hero--photo .hero__call{
    animation:none;
  }
  .hero--photo .hero__media{
    transform:none!important;
  }
}
/* 下層ページの冒頭（写真つき）。トップのFV（.hero--photo）と同じ作り：写真＋紺の暗幕＋白い見出し＋出現の動き＋橙のアクセント */
.sub-hero--photo{
  background:var(--navy);
  isolation:isolate;
  border-bottom:0;
}
.sub-hero__media{
  position:absolute;
  left:0;
  right:0;
  top:-90px;
  bottom:0;
  z-index:-2;
  will-change:transform;
}
.sub-hero__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 52%;
  transform-origin:62% 60%;
  /* 写真の寄りの動き（2.8 秒の拡大）はやめた（再々採点 R27） */
}
.sub-hero--photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,rgba(6,34,70,.78) 0,rgba(6,34,70,.46) 44%,rgba(6,34,70,.08) 76%),linear-gradient(to top,rgba(6,34,70,.5) 0,rgba(6,34,70,0) 40%);
}
.sub-hero__copy{
  position:relative;
}
.sub-hero--photo .sub-hero__copy{
  padding-top:40px;
  padding-bottom:96px;
}
.sub-hero--photo .crumbs{
  color:rgba(255,255,255,.88);
  animation:heroRise var(--t-max) var(--ease-out) 0s both;
}
.sub-hero--photo .label{
  animation:heroRise var(--t-max) var(--ease-out) .05s both;
}
.sub-hero--photo .crumbs a{
  color:#fff;
}
.sub-hero--photo h1{
  color:#fff;
  text-shadow:0 2px 3px rgba(6,34,70,.45),0 2px 26px rgba(6,34,70,.55);
  animation:heroRise var(--t-max) var(--ease-out) .1s both;
}
.sub-hero--photo p{
  color:#fff;
  text-shadow:0 1px 2px rgba(6,34,70,.55),0 0 18px rgba(6,34,70,.6);
  animation:heroRise var(--t-max) var(--ease-out) .15s both;
}
@media (max-width:760px){
  .sub-hero--photo .sub-hero__copy{
    padding-top:24px;
    padding-bottom:56px;
  }
  .sub-hero__img{
    object-position:38% 52%;
  }
  .sub-hero--photo::after{
    background:linear-gradient(to right,rgba(6,34,70,.74) 0,rgba(6,34,70,.5) 70%,rgba(6,34,70,.3) 100%),linear-gradient(to top,rgba(6,34,70,.5) 0,rgba(6,34,70,0) 40%);
  }
}
@media (prefers-reduced-motion:reduce){
  .sub-hero__img,
  .sub-hero--photo .crumbs,
  .sub-hero--photo .label,
  .sub-hero--photo h1,
  .sub-hero--photo p{
    animation:none;
  }
}
/* FV のリード：761px 以上は 1 文ずつ行を改める（960px で「ごみの種類・｜量」と列挙の途中で折れていた。2026-10-22 再採点3 PC S1） */
@media (min-width:761px){
  .hero__s{
    display:block;
  }
}
/* 374px 以下：FV のリードは行の長さをそろえる（「ごみの種類・量を」を割らないと、2 行目と 4 行目が短くなるため） */
@media (max-width:374px){
  .hero__lead{
    text-wrap:balance;
  }
}
/* 09-page-top：トップ専用：会社案内・対応地域・数字・地図。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
.area-grid{
  display:grid;
  grid-template-columns:minmax(260px,420px) 1fr;
  gap:56px;
  align-items:start;
}
/* 凡例：札と説明を 2 列にし、2 行目以降も説明の左端にそろえる（ぶら下げ。#26・SP #34） */
.ring-legend{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:6px;
  font-size:var(--fs-sm);
  color:var(--on-dark);
}
.ring-legend li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:.6em;
  align-items:baseline;
}
.ring-legend .rg{
  margin-right:0;
}
/* 対応地域の色札（明石市・兵庫県・大阪府）。図の円・札と、右の表で同じ色を使う。地域名は必ず文字で書くので、色は補助 */
.rg{
  display:inline-block;
  padding:.05em .7em;
  border-radius:99px;
  font-weight:700;
  color:var(--navy-d);
  margin-right:.3em;
  white-space:nowrap;
}
.rg--ak{background:var(--amber);}
.rg--hy{background:var(--amber-l);}
.rg--os{background:#fff;}
.ring-legend b:not(.rg){
  color:#fff;
}
.section--statement{
  background:var(--navy);
  color:#fff;
}
/* 紺の帯「三和美研について」：見出しを上に、4 つの数字を横一列に（左右 2 列にすると、見出しの上に大きな空きが出るため。再採点 PC N2） */
.statement{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:40px;
  margin-bottom:56px;
}
.statement:last-child{margin-bottom:0}
.statement h2{
  font-size:var(--fs-h2);
  line-height:1.3;
  margin:0;
  color:#fff;
}
/* 4 項目のうち「お急ぎの回収」だけ説明の文がある。3 項目を 1 行に並べ、説明のある項目は次の行に横いっぱいに置く
   （4 列だとその列だけ 4 行になり、左 3 列の下が空いた。再々採点 PC R10。文言は変えない）。≦760px は行の形 */
.stats{
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px 32px;
}
.stats>div:has(.stats-note){
  grid-column:1/-1;
}
.stats>div{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  gap:6px;
  padding:18px 0 0;
  border-top:2px solid rgba(255,255,255,.6);
}
.stats dt{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--on-dark-2);
}
.stats dd{
  margin:0;
  font-size:var(--fs-body);
}
/* 表の中の強調（設立年・受付時刻など）。電話番号（.stat-tel）より小さくして、番号を主役にする */
.stats b{
  font-size:var(--fs-h3);
  font-weight:700;
  letter-spacing:.03em;
}
.stats .btn{
  margin:2px 0;
}
.stats-note{
  display:block;
  margin-top:.25em;
  font-size:var(--fs-sm);
  color:var(--on-dark);
}
.section--statement .card h3{
  color:#fff;
}
.section--statement .card p{
  color:var(--on-dark);
}
.faq-split{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:56px;
  align-items:start;
}
.stats a:not(.btn){
  color:#fff;
}
/* 電話番号（大・紺地）。.hero__call-n と同じ段（--fs-display）・700・等幅数字。電話の見せ方は「大」と「ボタン（.btn--tel）」の 2 種類だけ */
.stat-tel{
  font-size:var(--fs-display);
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.stat-tel:hover{
  text-decoration:underline;
  text-decoration-color:var(--amber);
  text-underline-offset:.14em;
}
.map-h{
  font-weight:700;
  color:var(--navy);
  margin:0 0 .2em;
}
.map-ph{
  min-height:190px;
  margin:10px 0 14px;
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 12px,var(--surface) 12px 24px);
  border:1px dashed var(--muted-2);
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  font-size:var(--fs-sm);
}
.map-ph b{
  display:block;
  color:var(--navy);
  letter-spacing:.06em;
}
/* 札（現地お見積りは無料）は説明文の下に置く（2026-10-27 依頼者。札を使う全ページ共通） */
.free-line{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.6em;
  margin:0 0 1.2em;
  font-size:var(--fs-body);
  color:var(--ink);
}
.free-pill{
  order:1;
  display:inline-block;
  background:var(--amber);
  color:var(--amber-ink-d);
  font-weight:700;
  font-size:var(--fs-sm);
  padding:.3em .9em;
  border-radius:var(--r-xs);
  line-height:1.4;
}
/* 事業のページでは、札も事業の青にする（橙はご家庭の色のため） */
.tone-biz .free-pill{
  background:var(--deep);
  color:#fff;
}
.entry-help{
  grid-column:1/-1;
  margin:0;
  display:flex;
  align-items:center;
  gap:6px 22px;
  flex-wrap:wrap;
  padding:16px 34px;
  background:var(--navy);
  color:#fff;
  border-radius:0 0 var(--r) var(--r);
}
.entry-help b,
.entry-help span{
  font-size:var(--fs-body);
}
.co__grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:56px;
  align-items:stretch;
}
.co__info{
  display:flex;
  flex-direction:column;
}
.co__photo{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  /* 写真（facility-*.jpg、1500×1016）と同じ縦横比の枠にして、PC で縦長・タブレットで横長に切れないようにする */
  aspect-ratio:1500/1016;
  align-self:start; /* 見出しは上に横幅いっぱい。表と写真の上端をそろえる */
  background:var(--navy);
}
.co__photo img{
  position:absolute;
  inset:0;
  width:100%;
  object-fit:cover;
  height:100%;
  object-position:38% 40%;
}
.co__photo figcaption{
  position:absolute;
  left:0;
  bottom:0;
  background:var(--navy);
  color:#fff;
  font-size:var(--fs-sm);
  font-weight:700;
  padding:.5em 1em;
  z-index:2;
}
.map-wide{
  border-radius:var(--r);
  display:grid;
  grid-template-columns:1fr 1.5fr;
  margin-top:56px;
  background:var(--paper);
  border-top:var(--edge-top) solid var(--tone);
}
.map-wide__txt{
  padding:30px 34px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  justify-content:center;
}
.map-addr{
  font-size:var(--fs-lg);
  font-weight:700;
  color:var(--navy);
  margin:0;
}
/* 会社概要のアクセス：本社では対応できない旨（取引先が本社へ来てしまうことがあるため、赤で目立たせる。2026-10-21 依頼者の指示） */
.hq-ng{
  margin:-4px 0 0;
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1.6;
  color:var(--err);
}
.map-frame{
  position:relative;
  min-height:300px;
  background:var(--surface-2);
  border-radius:var(--r);
  overflow:hidden;
}
.map-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.ring-legend-wrap .ring-legend{
  margin:0;
  gap:0;
  font-size:var(--fs-body);
}
.ring-legend-wrap .ring-legend li{
  padding:1em 0;
  border-bottom:1px solid rgba(255,255,255,.3);
  line-height:1.7;
}
.ring-legend-wrap .ring-legend li:first-child{
  border-top:2px solid #fff;
}
.co__grid>*,
.area-grid>*{
  min-width:0;
}
@media (max-width:980px){
  .area-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .faq-split{
    /* 1fr だと中身の最小幅に引っぱられ、320px で列が 0.5px 広がって横にはみ出した（2026-10-27 COO の 320px 確認） */
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
  .statement{
    gap:28px;
  }
  .stats{
    gap:24px 28px;
  }
  .co__grid{
    grid-template-columns:1fr;
    gap:32px;
  }

  .map-wide{
    grid-template-columns:minmax(0,1fr); /* 中身の最小幅で列が押し広げられないように（再採点 SP N2） */
  }
  .map-frame{
    min-height:280px;
  }
  .entry-help{
    padding:16px 20px;
  }
}
@media (max-width:760px){
  .stats>div:has(.stats-note){
    grid-column:auto;
  }
  .stats{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    border-bottom:1px solid rgba(255,255,255,.45);
  }
  .stats>div{
    grid-template-columns:8em minmax(0,1fr);
    align-items:baseline;
    gap:0;
    padding:14px 0;
    border-top:1px solid rgba(255,255,255,.45);
  }
  .stat-tel{
    font-size:var(--fs-h3);
  }
  .statement{
    margin-bottom:36px;
  }
  .stats a:not(.btn){
    display:inline-block;
    padding:10px 0;
  }
  /* ボタンの行は、ラベルの下にボタンを横いっぱいに置く（文言を折り返さない） */
  .stats>div:has(.btn){
    grid-template-columns:1fr;
    gap:8px;
  }
  .stats .btn{
    width:100%;
    justify-content:space-between;
  }
}
.rings{
  margin:0; /* 図と凡例は、本文の左端にそろえる（中央寄せにしない。#27） */
  max-width:440px;
}
.rings svg{
  width:100%;
  height:auto;
}
.rings figcaption{
  font-size:var(--fs-xs);
  color:var(--on-dark);
  margin-top:8px;
}
.rings .ring-draw{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset var(--t-max) var(--ease-out);
}
.rings.in .ring-draw{
  stroke-dashoffset:0;
}
@media (prefers-reduced-motion:reduce){
  .rings .ring-draw{
    stroke-dashoffset:0;
  }
}
/* スマホ（縦持ち）は、これまでの見え方（高さ 300px の枠）のまま。それより広い幅は写真と同じ縦横比 */
@media (max-width:600px){
  .co__photo{
    aspect-ratio:auto;
    min-height:300px;
  }
}
/* 事業／ご家庭のページ末の「ご相談の窓口」（components/CallDesk.astro）。
   左＝ページの言葉（見出し・一言・ご相談のときにお聞きすること）、右＝窓口（フォームが主役で上、電話が副で下。2026-10-21）。
   紺の地は .desk-panel（.section--statement を付けて、紺の地の上書き規則をそのまま使う）。
   もう片方のページへの案内は、パネルの最下段の 1 行だけ（ご相談ボタンを重ねて出さない） */
.desk{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:56px;
  align-items:center;
}
.desk h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-head);
  margin:.3em 0 .55em;
  color:#fff;
}
/* 見出しの 2 行（〇〇のことは、／お気軽にご相談ください。）は、どの幅でも行の途中で折らない（2026-10-27 依頼者：「お気軽に／ご相談ください。」の折れ方をなくす）。
   事業・ご家庭の窓口だけ（co はページごとに長い見出しがあるため対象外）。
   文字の大きさは、いちばん長い 1 行目（店舗・会社のごみのことは、＝13 字）が欄に入る大きさを上限にする。
   上限は字数で割った値で、どのページも同じ幅なら同じ大きさになる（ページごとに見出しの大きさが変わらない） */
.desk__main{
  container-type:inline-size;
  min-width:0;
}
.desk h2.desk__h2--keep{
  font-size:min(var(--fs-h2),100cqi / 13.6);
}
.desk__h2--keep .desk__h2b{
  white-space:nowrap;
}
.desk__lead{
  margin:0 0 1.6em;
  max-width:30em;
  color:var(--on-dark);
}
/* 961px 以上：窓口の一言は 1 文ずつ行を改める（文の途中で折れて次の文が続く形をなくし、どのページも同じ組み方に。2026-10-22 再採点3 PC S17） */
@media (min-width:961px){
  .desk__s{
    display:block;
  }
}
.desk__ask{
  margin:0;
  color:var(--on-dark);
}
.desk__askt{
  display:block;
  margin:0 0 .2em;
  font-size:var(--fs-sm);
  font-weight:700;
}
.desk__ways{
  display:grid;
  gap:12px;
}
.desk__way{
  display:block;
  padding:20px 24px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r);
  background:rgba(255,255,255,.07);
  color:#fff;
}
.desk__way--tel{
  text-decoration:none;
  transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);
}
.desk__way--tel:hover{
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.13);
}
.desk__way--tel:hover .desk__tel{
  text-decoration:underline;
  text-decoration-color:var(--amber);
}
.desk__wt{
  display:block;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--on-dark);
}
.desk__tel{
  display:block;
  white-space:nowrap;
  margin:.1em 0 .15em;
  font-size:var(--fs-display);
  line-height:1.3;
}
.desk__hours{
  font-size:var(--fs-body);
}
/* フォームが主役: ボタンを枠いっぱいの大きさに（共通のページでは事業・ご家庭の 2 つ） */
.desk__way--form{
  display:grid;
  gap:10px;
}
.desk__way--form .btn{
  width:100%;
  justify-content:space-between;
  text-align:left;
}
/* 窓口は白い地に置いた紺のパネル（帯を全幅にしない。紺がフッターの濃紺まで続いて重たく見えないように、下に白い余白を残す）。
   もう片方のページへの案内は、パネルの最下段（一段明るい面）に 1 行だけ。行き先のトーンで色を変える（ご家庭＝橙、事業＝明るい青） */
.section--desk{padding-bottom:72px}
/* 前の節も白い地のとき（関連するご案内など）は、窓口の上の余白を前の節の下の余白だけにする（白い地が 2 つ分続いて 190〜250px 空いていた。2026-10-27 独立点検） */
.section:not(.section--tint):not(.section--cream):not(.section--blue):not(.section--statement) + .section--desk{padding-top:0}
.desk-panel{border-radius:var(--r)}
.desk-panel .desk{
  align-items:start; /* 左の見出しと右の窓口の上端をそろえる */
  padding:64px;
}
.desk__other{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 28px;
  margin:0;
  padding:20px 64px;
  border-top:1px solid rgba(255,255,255,.14);
  border-radius:0 0 var(--r) var(--r);
  background:rgba(255,255,255,.06);
  color:var(--on-dark);
}
.desk__other a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-weight:700;
  text-underline-offset:.3em;
  transition:color var(--t-fast) var(--ease-out);
}
.desk__other a span{
  display:inline-block;
  margin-left:.3em;
  transition:transform var(--t-fast) var(--ease-out);
}
.desk__other a:hover span{transform:translateX(3px)}
.desk__other--home a{color:var(--amber)}
.desk__other--biz a{color:var(--sky)}
.desk__other--co a{color:#fff}
.desk__other a:hover{color:#fff}
/* タブレット: 2 列だと窓口の列が細くなるので 1 列にし、フォームと電話も縦に積む（大きい電話番号が途中で折れないように） */
@media (max-width:980px){
  .desk-panel .desk{
    grid-template-columns:1fr;
    gap:36px;
    padding:48px 40px;
  }
  .desk__ways{grid-template-columns:minmax(0,1fr)}
  .desk__other{padding:20px 40px}
}
@media (max-width:760px){
  .desk{
    grid-template-columns:minmax(0,1fr); /* 中身が箱より広がらないように（再採点 SP N3） */
    gap:32px;
  }
  .desk__ways{grid-template-columns:minmax(0,1fr)}
  .map-wide__txt{padding:24px 20px}
  .desk__way{
    padding:18px 20px;
  }
  .section--desk{padding-bottom:48px}
  .desk-panel .desk{padding:40px 20px}
  .desk__other{padding:18px 20px}
}
@media (prefers-reduced-motion:reduce){
  .desk__way--tel,
  .desk__other a,
  .desk__other a span{transition:none}
  .desk__other a:hover span{transform:none}
}
/* 320〜400px：「当日・翌日も相談可」（折り返し禁止）が 2 列の右に入りきらず横にはみ出すので、見出しの下に値を置く 1 列にする */
@media (max-width:400px){
  .desk__tel{font-size:var(--fs-h2)}
  .desk-panel .desk{padding:36px 16px}
  .desk__other{padding:16px}
  .desk__way{padding:16px}
  .stats>div{
    grid-template-columns:minmax(0,1fr);
    gap:2px;
  }
}
/* 紺の帯の 3 つの特長：見出しの行の高さを横の列でそろえ、本文の書き出しの位置をそろえる（再採点 PC N4） */
@media (min-width:601px){
  .section--statement .grid3>.card{
    display:grid;
    grid-row:span 2;
    grid-template-rows:subgrid;
    row-gap:0;
  }
  .section--statement .grid3{
    row-gap:40px;
  }
}
/* 対応地域 680〜980px：図を左・凡例と注記を右に並べる（図だけが左に寄って右が約 300〜460px 空く形をなくす。2026-10-22 再採点3 PC S8・SP X12。図は足さない） */
@media (min-width:680px) and (max-width:980px){
  .rings{
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,320px) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:40px;
  }
  .rings svg{
    grid-row:1 / 3;
    align-self:center;
  }
  .rings .ring-legend{
    margin:0;
    align-self:end;
    gap:12px;
    font-size:var(--fs-body);
  }
  .rings figcaption{
    align-self:start;
    margin-top:14px;
  }
}

/* 対応地域：サービス対応マトリクス（行＝ごみの種類、列＝明石市・兵庫県・大阪府。2026-10-22 円の図と表を置き換え）。
   ●＝対応、ー＝対象外。意味は記号だけに頼らず、sr-only の文字と凡例でも伝える */
.matrix{
  background:#fff;
  color:var(--ink);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 14px 36px rgba(4,40,79,.22);
  max-width:960px;
  margin:0 auto;
}
.matrix .tbl-wrap.mx-scroll{
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.mx{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#fff;
}
.matrix .mx :is(th,td){
  padding:14px 12px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  letter-spacing:normal; /* 表の見出しの字間（.6px）を、ほかの本文と同じ「なし」に */
  text-align:center;
  vertical-align:middle;
}
.matrix .mx thead th{
  background:var(--navy);
  color:#fff;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.matrix .mx thead .mx-kind{text-align:left;padding-left:24px;width:46%;background:#E6EEF7;color:var(--navy);border-bottom:1px solid var(--line)}
.matrix .mx thead .mx-area{font-size:var(--fs-sm);padding:8px 12px}
.matrix .mx thead .mx-c{background:#EEF3F9;color:var(--navy)}
.matrix .mx thead .mx-c--ak{background:var(--amber-l)}
.mx .rg{margin:0}
.mx-name{font-weight:700}
.matrix .mx tbody th{
  text-align:left;
  padding-left:24px;
  font-weight:700;
  color:var(--navy); /* 品目名は、分別表・FAQ と同じ紺 */
  display:table-cell;
}
.mx tbody th .mx-ico{
  display:inline-block;
  vertical-align:middle;
  width:34px;
  height:34px;
  padding:6px;
  margin-right:12px;
  border-radius:8px;
  background:#E6EEF7;
  fill:none;
  stroke:var(--navy);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mx tbody th .mx-t{display:inline-block;vertical-align:middle;max-width:calc(100% - 50px)}
.matrix .mx tbody th small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--muted);opacity:1;margin-top:2px;line-height:1.5}
.matrix .tbl-wrap .mx tbody th{min-width:0}
.matrix .mx td.mx-c--ak{background:#FFF4DB}
.matrix .mx tr.mx-hl td{background:#F1F6FB}
.matrix .mx tr.mx-hl td.mx-c--ak{background:#FFEBC2}
.mx-y,.mx-n{display:block;margin:0 auto}
.mx-key .mx-y,.mx-key .mx-n{display:inline-block;margin:0}
.mx-y{width:18px;height:18px;border-radius:50%;background:var(--navy)}
.mx-n{width:14px;height:2px;background:#9AA8B6;border-radius:2px}
.mx-foot{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px 28px;
  align-items:center;
  padding:16px 24px;
  background:#EEF3F9;
  font-size:var(--fs-sm);
}
.mx-foot p{margin:0}
.mx-key{display:flex;flex-wrap:wrap;gap:8px 20px}
.mx-key span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mx-note b{display:block;color:var(--navy)}
@media (max-width:680px){
  .matrix .mx :is(th,td){padding:12px 6px}
  .matrix .mx thead .mx-kind,.matrix .mx tbody th{padding-left:14px}
  .mx tbody th .mx-ico{display:none}
  .mx tbody th .mx-t{max-width:none}
  .matrix .mx thead .mx-kind{width:46%}
  .mx .rg{padding:.05em .45em;font-size:var(--fs-sm)}
  .matrix .mx thead .mx-c{padding:10px 2px}
  .mx-foot{grid-template-columns:minmax(0,1fr);padding:14px 16px}
}
@media (max-width:360px){
  .mx .rg{padding:.05em .3em;font-size:var(--fs-xs)}
  .matrix .mx thead .mx-c .mx-name{font-size:var(--fs-sm)}
}
/* 10-page-sorting：分別表。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。
   構成（2026-10-21 作り直し）：最初に「事業ごみ／家庭ごみ」を選ぶ → 選んだ方の表だけを見せる（混ぜない）。
   事業ごみ＝旧サイトの「種類／例／分類」の3列を行で見せる。家庭ごみ＝明石市の区分ごとのカードに、【小見出し】と例。
   可否の色: ok 緑 / consult 琥珀 / sep 青 / ng 赤。色だけに頼らず、記号（○△◇×）と文言を必ず併記する。 */

/* ── 操作の欄（切り替え・検索・印刷） ── */
.srt-panel{
  display:grid;
  gap:14px;
  margin-bottom:40px;
}
.srt-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.srt-switch[hidden]{
  display:none;
}
/* 切り替えの札。選んでいない方は白地に色の縁、選んだ方はトーンの色で塗る（事業＝青、ご家庭＝オレンジ） */
.srt-sw{
  position:relative;
  display:grid;
  gap:2px;
  align-content:start; /* 左右の札で、題の書き出しの高さをそろえる（補足の行数が違っても。再採点 SP N5） */
  min-height:84px;
  padding:14px 52px 14px 22px;
  border:2px solid var(--tone);
  border-left-width:var(--edge);
  border-radius:var(--r);
  background:#fff;
  color:var(--tone-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);
}
.srt-sw--biz{
  --tone:var(--deep);
  --tone-ink:var(--deep);
  --tone-on:#fff;
}
.srt-sw--home{
  --tone:var(--amber);
  --tone-ink:var(--amber-ink);
  --tone-on:var(--navy-d);
}
.srt-sw__k{
  font-size:var(--fs-h3);
  font-weight:700;
  line-height:1.35;
}
.srt-sw__s{
  font-size:var(--fs-sm);
  line-height:1.5;
}
/* 右端の丸。選ぶと塗りの中に白いチェック */
.srt-sw::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:22px;
  height:22px;
  margin-top:-11px;
  border:2px solid currentColor;
  border-radius:50%;
  opacity:.55;
}
.srt-sw[aria-selected="true"]{
  background:var(--tone);
  color:var(--tone-on);
  box-shadow:0 6px 18px -10px var(--tone);
}
.srt-sw[aria-selected="true"]::after{
  opacity:1;
  background:var(--tone-on) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6AA3' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4L18 8'/%3E%3C/svg%3E") center/70% no-repeat;
  border-color:var(--tone-on);
}
.srt-sw--home[aria-selected="true"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2B134' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4L18 8'/%3E%3C/svg%3E");
}
.srt-sw:not([aria-selected="true"]):hover{
  background:var(--tone-bg,var(--paper));
}
.srt-sw--home:not([aria-selected="true"]):hover{
  background:var(--warm);
}
.srt-sw--biz:not([aria-selected="true"]):hover{
  background:var(--mist);
}
.srt-tools{
  display:block;
}
.srt-search{
  position:relative;
  display:block;
}
.srt-search input{
  height:var(--btn-h);
  min-height:0;
  padding:0 16px 0 52px;
  font-size:var(--fs-lg);
  background:#fff;
}
.srt-search__ico{
  position:absolute;
  left:16px;
  top:50%;
  width:24px;
  height:24px;
  transform:translateY(-50%);
  color:var(--deep);
  pointer-events:none;
}
/* 選んでいない方の表にだけ当たりがあるときの案内 */
.srt-hint{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  margin:0;
  padding:12px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--navy);
  border-radius:var(--r);
  font-weight:700;
  color:var(--navy);
}
.srt-hint[hidden]{
  display:none;
}
.srt-hint__go{
  padding:0;
  border:0;
  background:none;
  color:var(--deep);
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* ── 表の見出し ── */
.srt-view[hidden]{
  display:none;
}
/* JS が無いときは2つの表が縦に並ぶので、間をあける */
.srt-view + .srt-view{
  margin-top:64px;
}
.srt-view[hidden] + .srt-view,
.srt-view + .srt-view[hidden]{
  margin-top:0;
}
.srt-vhead{
  margin-bottom:28px;
}
.srt-vhead h3{
  margin:0 0 .3em;
  font-size:var(--fs-h3);
  color:var(--navy);
  line-height:1.35;
}
.srt-vhead p{
  margin:0;
  max-width:46em;
  color:var(--muted);
}

/* 業種で見る（折りたたみ） */
.srt-bytype{
  margin-bottom:36px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
}
.srt-bytype[hidden]{
  display:none;
}
.srt-bytype summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:56px;
  padding:0 20px;
  font-weight:700;
  color:var(--navy);
  cursor:pointer;
  list-style:none;
}
.srt-bytype summary::-webkit-details-marker{
  display:none;
}
.srt-bytype summary::after{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  margin-top:-4px;
  border-right:2px solid var(--deep);
  border-bottom:2px solid var(--deep);
  transform:rotate(45deg);
  transition:transform var(--t-fast) var(--ease-out);
}
.srt-bytype[open] summary::after{
  margin-top:4px;
  transform:rotate(-135deg);
}
.srt-bytype .tbl-wrap{
  margin:0 20px 20px;
}
/* 業種で見る表：見出しの列を細くしない（狭い画面では表を横にスクロール） */
.srt-bytype table{
  min-width:34em;
}
.srt-bytype th:first-child{
  min-width:9.5em;
}

/* ── 可否のまとまり ── */
.srt-group + .srt-group{
  margin-top:40px;
}
.srt-group[hidden]{
  display:none;
}
.srt-ghead{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:4px 12px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--st-bg);
}
.srt-ghead .mark{
  display:grid;
  place-items:center;
  width:2.4rem;
  height:2.4rem;
  border-radius:50%;
  background:var(--st);
  color:#fff;
}
.srt-ghead h4{
  margin:0;
  font-size:var(--fs-h3);
  color:var(--navy);
}
.srt-gcnt{
  justify-self:start;
  font-size:var(--fs-sm);
  color:var(--muted);
}
.srt-gcnt b{
  font-size:var(--fs-lg);
  color:var(--navy);
}
.srt-ghead p{
  grid-column:1/-1;
  margin:0;
  font-size:var(--fs-body);
  color:var(--muted);
}
.smark{
  max-width:none;
}
.srt-ghead .mark .smark{
  width:60%;
  height:60%;
}

/* 品目の絵（可否の色の地＋右下に記号）。2026-10-22 依頼者の希望で復活 */
.srt-ico{
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  width:64px;
  height:64px;
  border-radius:var(--r);
  background:var(--st-bg);
  color:var(--st);
}
.srt-ico svg{
  width:42px;
  height:42px;
}
.srt-ico .srt-badge{
  position:absolute;
  right:-6px;
  bottom:-6px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--st);
  color:#fff;
}
.srt-ico .srt-badge .smark{
  width:15px;
  height:15px;
}

/* ── 事業ごみ：1行＝1品目（絵｜品目名と区分｜例と注記）。可否は、絵の地の色と右下の記号、行の左端の色の線、まとまりの見出しで示す ── */
.srt-rows{
  list-style:none;
  margin:0;
  padding:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
}
.srt-row{
  display:grid;
  grid-template-columns:64px minmax(11em,18.5em) 1fr; /* 区分の札「産業廃棄物（内容によって特別管理産業廃棄物）」が 1 行に入る幅（2026-10-22 再採点3 PC S6） */
  gap:6px 24px;
  align-items:start;
  padding:18px 24px 18px 20px;
  border-left:4px solid var(--st);
}
.srt-row:first-child{
  border-top-left-radius:var(--r);
}
.srt-row:last-child{
  border-bottom-left-radius:var(--r);
}
.srt-row + .srt-row{
  border-top:1px solid var(--line);
}
.srt-row[hidden]{
  display:none;
}
.srt-row__h{
  align-self:center;
}
.srt-row__h b{
  display:block;
  font-size:var(--fs-lg);
  line-height:1.45;
  color:var(--navy);
}
/* 区分の札（事業系一般廃棄物・産業廃棄物など） */
.srt-kubun{
  display:inline-block;
  margin-top:.45em;
  margin-right:.4em; /* 区分が 2 つの品目（感染性・非感染性）は札を 2 つ並べる */
  padding:.2em .6em;
  border-radius:var(--r-xs);
  background:var(--mist);
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.5;
  color:var(--deep);
}
.srt-row__d{
  align-self:center;
  display:grid;
  gap:6px;
}
.srt-ex{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.6em;
  align-items:baseline;
  margin:0;
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--ink);
}
.srt-ex__l{
  display:inline-block;
  padding:0 .5em;
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.6;
  color:var(--muted);
  vertical-align:.1em;
}
.srt-nt{
  margin:0;
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1.6;
  color:var(--navy); /* 可否の色で書かない（「お受けしていません」が緑になるなど、色と中身が食い違うため。SP #49） */
}


/* ── 家庭ごみ：区分ごとのカード ── */
/* 区分のカードは、高さが大きく違う（粗大ごみと機密書類など）ので、横の行で高さをそろえず、2 段組（縦に詰める）にする。
   隣のカードに合わせて伸びた空白を作らない（再採点 PC N9）。カードが 1 枚だけの区分は全幅。幅が狭いときは 1 段 */
.srt-cats{
  list-style:none;
  margin:0;
  padding:0;
  columns:2 380px;
  column-gap:16px;
}
.srt-cats:has(>.srt-cat:only-child){
  columns:1;
}
.srt-cat{
  break-inside:avoid;
  margin:0 0 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px 22px 22px;
  background:#fff;
  border:1px solid var(--line);
  border-top:var(--edge-top) solid var(--tone);
  border-radius:var(--r);
}
.srt-cat[hidden]{
  display:none;
}
.srt-cat__h{
  display:flex;
  align-items:center;
  gap:16px;
}
.srt-cat__h b{
  font-size:var(--fs-h3);
  line-height:1.4;
  color:var(--navy);
}
.srt-cat__l{
  display:grid;
  gap:10px;
  margin:0;
}
.srt-cat__l dt{
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1.5;
  color:var(--tone-ink);
}
.srt-cat__l dd{
  margin:.1em 0 0;
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--ink);
}
/* 出し方のご注意（例ではない行）は、地を敷いて分ける */
.srt-cat__care{
  margin-top:auto;
  padding:12px 14px;
  background:var(--paper);
  border-radius:var(--r-xs);
}
.srt-cat__care-t{
  margin:0 0 8px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--muted);
}
.srt-cat__care .srt-cat__l{
  gap:8px;
}
.srt-cat__care .srt-cat__l dt{
  color:var(--navy);
}
.srt-cat__care .srt-cat__l dd{
  font-size:var(--fs-sm);
  color:var(--muted);
}
.srt-cat .srt-nt{
  color:var(--navy);
}

.srt-empty{
  margin:24px 0 0;
  padding:18px;
  background:var(--paper);
  font-weight:700;
}
.srt-empty[hidden]{
  display:none;
}

/* 可否ごとの色（地の薄い色・濃い色） */
.st-ok{
  --st:var(--ok);
  --st-bg:var(--ok-wash);
}
.st-consult{
  --st:var(--amber-ink);
  --st-bg:var(--amber-wash);
}
.st-sep{
  --st:var(--deep-d);
  --st-bg:var(--blue-wash);
}
.st-ng{
  --st:var(--err);
  --st-bg:var(--err-wash);
}

@media (max-width:980px){
  .srt-row{
    grid-template-columns:64px minmax(0,1fr);
    gap:8px 18px;
  }
  .srt-row__d{
    grid-column:2;
  }
}
@media (max-width:760px){
  .srt-panel{
    margin-bottom:32px;
  }
  .srt-switch{
    gap:8px;
  }
  .srt-sw{
    min-height:76px;
    padding:12px 14px;
    border-left-width:4px;
  }
  .srt-sw::after{
    display:none;
  }
  .srt-sw__k{
    font-size:var(--fs-lg);
  }
  .srt-sw__s{
    font-size:var(--fs-xs);
  }
  .srt-row{
    grid-template-columns:52px minmax(0,1fr);
    gap:10px 14px;
    padding:14px 16px 14px 14px;
  }
  .srt-ico{
    width:52px;
    height:52px;
  }
  .srt-ico svg{
    width:34px;
    height:34px;
  }
  .srt-ico .srt-badge{
    width:22px;
    height:22px;
    right:-5px;
    bottom:-5px;
  }
  .srt-ico .srt-badge .smark{
    width:12px;
    height:12px;
  }
  .srt-row__d{
    grid-column:1/-1;
  }
  .srt-cat{
    padding:16px 16px 18px;
  }
  .srt-bytype summary{
    padding:0 16px;
  }
  .srt-bytype .tbl-wrap{
    margin:0 12px 12px;
  }
}
/* 320〜400px：切り替えの題（「家庭ごみ」）を 1 行に収める（「ご家庭の｜ごみ」の 2 行にしない） */
@media (max-width:400px){
  .srt-sw{
    padding:12px 10px;
  }
  .srt-sw__k{
    font-size:var(--fs-body);
    white-space:nowrap;
  }
  /* 検索欄の見本「品目名や例の言葉で探す」が 320px で切れないよう、本文の大きさにして左の余白を詰める（再採点4 SP Z11） */
  .srt-search input{
    padding:0 12px 0 46px;
    font-size:var(--fs-body);
  }
  .srt-search__ico{
    left:14px;
  }
}

/* 業種で見る表の「区分」の列：区分ごとに行を改め（品目一覧の札 2 つと同じ分け方）、括弧の中で折らない。
   主なごみの列は右に余りがあるので、区分の列へ幅を回す（2026-10-22 再採点4 PC P3） */
.srt-bytype__k>span{
  display:block;
}
/* 括弧書きは前の語と分かれても、括弧の中では折らない（899px 以下は対象外。768px で「（感染性産業廃棄物・感染性の一般廃棄物）」の 20 字が 1 行の塊になり、
   表が枠より 66px 広がって横スクロールになったため。2026-10-27 COO 確認 #4） */
@media (min-width:900px){
  .srt-bytype__p{
    white-space:nowrap;
  }
}
@media (min-width:900px){
  .srt-bytype th:first-child{
    width:26%;
  }
  .srt-bytype__k{
    width:38%;
  }
}
/* 家庭ごみのカードの例：「、」で区切った短い品目（13 字まで。sorting.astro の exList）を 1 つの塊にして、品目の切れ目で折る（「食品の｜容器」を防ぐ。再採点4 PC P4・SP Z9） */
.srt-li>span{
  display:inline-block;
  max-width:100%;
}
/* 家庭ごみの注記は 1 文ずつ改行（「お住まいの｜地域」と文の途中で折れないように。再採点4 PC P5） */
.srt-note>span{
  display:block;
}
/* 11-page-vehicles：保有車両。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
.fleet{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 36px;
  border-top:2px solid var(--navy);
}
/* 保有車両の一覧：左に車の絵のアイコン、右に名前と補足（アイコンは依頼者の希望で復活 2026-10-22）。
   名前の上端を全項目でそろえる（補足の行が無い車種も、名前の位置は同じ） */
.fleet li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  column-gap:16px;
  align-content:start;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.fleet .pic{
  grid-row:1/3;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--deep);
}
.fleet .pic svg{
  width:40px;
  height:40px;
}
.fleet b{
  display:block;
  color:var(--navy);
  font-size:var(--fs-body);
  line-height:1.3;
  align-self:end;
}
.fleet span.sub{
  display:block;
  font-size:var(--fs-sm);
  color:var(--muted);
  align-self:start;
}
/* 車両カードの並び（2026-10-22 再採点 PC N5・N6）: 1440 などの広い幅は 3 列。写真 1 枚の車（コンテナ・ダンプ・ボックス）を 1 段目、
   2 枚の車（パッカー・ユニック・重機）を 2 段目にして、同じ段のカードの写真の形と高さをそろえる（説明と写真の間に大きな空きを作らない）。
   写真は全部 16:9 のまま切らずに出す（2 枚の車は、2 枚を縦に積む）。980px 以下は 1 列で、2 枚の写真は横に並べる */
.veh-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
/* 写真を上、車種名と説明を下に置く（同じ段の写真の上端と高さがそろい、説明の長さの違いはカードの下の余りになる） */
.veh{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr;
  align-content:start;
  gap:18px;
  padding:24px;
  background:var(--paper);
  border-top:var(--edge-top) solid var(--tone);
  border-radius:var(--r);
}
.veh__ico{
  grid-row:1 / span 6;
  align-self:start;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--deep);
}
.veh__ico svg{
  width:46px;
  height:46px;
}
.veh h3{
  font-size:var(--fs-lg);
  color:var(--navy);
  margin-bottom:.3em;
}
.veh p{
  margin:0 0 .4em;
  font-size:var(--fs-body);
  color:var(--muted);
}
.veh__pics{
  grid-column:1/-1;
  grid-row:1;
  display:grid;
  gap:12px;
}
.veh__body{
  grid-row:2;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  column-gap:18px;
  align-content:start;
}
.veh__body>:not(.veh__ico){
  grid-column:2;
}
.veh__fig{
  position:relative;
  margin:0;
  min-height:0;
}
.veh__fig picture{
  display:block;
}
.veh__fig img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--r);
  background:var(--surface-2);
}
/* 写真の名前は、写真の左上の札にする（名前の有無で写真の位置がずれないように） */
.veh__fig figcaption{
  position:absolute;
  top:8px;
  left:8px;
  padding:2px 10px;
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.6;
  color:var(--navy);
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  border-radius:999px;
}
@media (max-width:1100px){
  .fleet{
    grid-template-columns:repeat(2,1fr);
    gap:0 24px;
  }
  .fleet li:last-child:nth-child(odd){
    grid-column:1/-1;
  }
}
/* 601〜980px は 1 列。カードは左に写真（2 枚の車は縦に積む）、右に車種名と説明（写真が画面いっぱいに大きくならないように） */
@media (max-width:980px){
  .veh-list{
    grid-template-columns:minmax(0,1fr);
  }
  .veh{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto;
    gap:24px;
    align-items:start;
  }
  .veh__pics{
    grid-column:1;
    grid-row:1;
  }
  .veh__body{
    grid-column:2;
    grid-row:1;
  }
}
/* 600px 以下は、写真を上・説明を下の 1 列 */
@media (max-width:600px){
  .veh{
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }
  .veh__pics,
  .veh__body{
    grid-column:1;
    grid-row:auto;
  }
}
@media (max-width:760px){
  .fleet{
    grid-template-columns:1fr;
    gap:0;
  }
}

/* 320〜380px：車種名（h3）が文節で折り返せず、カードが画面の外へ押し出されるので、アイコンと余白を詰める */
@media (max-width:380px){
  .veh{
    padding:16px;
  }
  .veh__body{
    grid-template-columns:56px minmax(0,1fr);
    column-gap:14px;
  }
  .veh__ico{
    width:56px;
    height:56px;
  }
  .veh__ico svg{
    width:36px;
    height:36px;
  }
}

/* 寸法の目安：同じ縮尺で並べた図（VehScale.astro）。高さ・長さは表の値、形は模式図 */
.vscale{
  margin:0 0 32px;
}
.vscale__lead{
  margin:0 0 16px;
  font-weight:700;
  color:var(--navy);
}
.vscale__lead span{
  font-weight:400;
  font-size:var(--fs-sm);
  color:var(--muted);
}
.vscale__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.vscale__item{
  margin:0;
  padding:16px 16px 8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
}
.vscale__item figcaption{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:2px 12px;
  margin-bottom:8px;
}
.vscale__item b{
  font-size:var(--fs-body);
  color:var(--navy);
}
.vscale__dims{
  font-size:var(--fs-sm);
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.vscale__dims i{
  font-style:normal;
  margin:0 .3em;
  color:var(--line);
}
.vscale__dims em{
  font-style:normal;
  font-weight:700;
  color:var(--amber-ink); /* 白地で 6:1。--amber-d（2.9:1）は文字には薄い */
}
.vscale__item svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  font-family:var(--font);
}
.vscale__grid-line line{
  stroke:var(--line);
  stroke-width:2;
  stroke-dasharray:6 8;
}
.vscale__grid-line text,
.vscale__tick text{
  font-size:26px;
  fill:var(--muted);
}
.vscale__car path{
  fill:var(--blue-line);
  stroke:var(--deep);
  stroke-width:3;
  stroke-linejoin:round;
}
.vscale__car .vscale__frame{
  fill:var(--deep);
  stroke:none;
}
.vscale__wheel{
  fill:var(--navy);
  stroke:#fff;
  stroke-width:4;
}
.vscale__h,
.vscale__l{
  stroke:var(--amber);
  stroke-width:5;
  stroke-linecap:round;
}
.vscale__h{
  stroke-dasharray:2 9;
}
.vscale__hv{
  font-size:28px;
  font-weight:700;
  fill:var(--amber-ink);
}
.vscale__ground{
  stroke:var(--navy);
  stroke-width:3;
}
.vscale__tick line{
  stroke:var(--navy);
  stroke-width:2;
}
/* 図は欄の幅に合わせて縮むので、980px 以下は目盛りの字を大きくして 12px 以上にする */
@media (max-width:980px){
  .vscale__item figcaption{
    flex-direction:column;
    align-items:flex-start;
  }
  .vscale__grid-line text,
  .vscale__tick text{
    font-size:36px;
  }
  .vscale__hv{
    font-size:38px;
  }
}
@media (max-width:760px){
  .vscale__grid{
    grid-template-columns:minmax(0,1fr);
  }
}
/* 12-page-permits：許可証。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
.permits{
  border-radius:var(--r);
  display:grid;
  grid-template-columns:1fr;
  border-top:2px solid var(--navy);
  background:#fff;
}
.permit{
  display:grid;
  grid-template-columns:1.2fr 1.4fr auto;
  gap:8px 28px;
  align-items:center;
  padding:26px 24px;
  border-bottom:1px solid var(--line);
  transition:transform var(--t-enter) var(--ease-out),box-shadow var(--t-enter) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.permit h3{
  font-size:var(--fs-lg);
  color:var(--navy);
  margin:0;
}
.permit .scope{
  font-size:var(--fs-body);
  color:var(--muted);
  margin:0;
}
.dl-btn{
  min-height:40px;
  padding:0 14px;
  border:1.5px dashed var(--muted-2);
  background:#fff;
  color:var(--muted);
  border-radius:var(--r);
  font:inherit;
  font-size:var(--fs-sm);
  cursor:not-allowed;
}
.permit-slots{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:18px;
}
/* 許可証の写しが届いたので、押せる PDF のボタン（点線・押せない見た目は使わない） */
/* 小さな操作のボタン（.btn--co.btn--sm）と同じ形：紺の 2px 枠・高さ 44px */
a.dl-btn{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  border:2px solid var(--navy);
  color:var(--navy);
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
a.dl-btn:hover{
  background:var(--navy);
  color:#fff;
}
.p-auth{
  display:block;
  color:var(--navy);
}
.permit-ph{
  aspect-ratio:1.414/1;
}
.ptable .dl-btn{
  white-space:nowrap;
}
@media (max-width:1100px){
  .tbl-wrap:has(.ptable){
    overflow:visible;
    border:0;
    background:transparent;
  }
  .ptable{
    min-width:0;
  }
  .ptable,
  .ptable thead,
  .ptable tbody{
    display:block;
    min-width:0;
  }
}
.ptable{
  min-width:1040px;
}
@media (max-width:1100px){
  .ptable thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
  }
  .ptable caption{
    display:block;
  }
  .ptable .dl-btn{
    min-height:44px;
    justify-self:start; /* カード型ではマスが2列のグリッドになるので、横いっぱいに伸ばさず文字の幅で止める */
  }
  .ptable td:has(.dl-btn){
    align-items:center;
  }
  .ptable{
    min-width:0;
  }
}
@media (max-width:980px){
  .permit{
    grid-template-columns:1fr;
    gap:6px;
  }
}
@media (max-width:760px){
  .permit-slots{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .permit-ph{
    aspect-ratio:1.2/1;
  }
  .permit-ph span{
    font-size:var(--fs-xs);
    overflow-wrap:anywhere;
  }
}
.permit-ph span{
  font-size:var(--fs-sm);
}
@media (min-width:981px){
  .permit{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 14em;
  }
}
/* 許可の表：PDF のボタンがある行は、どの列も縦の中央にそろえる（文字の列だけ上揃えにしない。2026-10-21 監査 review-4 #10） */
@media (min-width:1101px){
  .ptable tbody th,
  .ptable tbody td{
    vertical-align:middle;
  }
}
/* タブレット（761〜1100px）は、カードを 2 列に並べる（1 列だと縦に約 1,500px 続くため。#55・SP #67） */
@media (min-width:761px) and (max-width:1100px){
  .ptable tbody{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .ptable tbody tr{
    margin-bottom:0;
  }
}
/* 13-page-others：お知らせ・個人情報保護方針・404。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
.news{
  list-style:none;
  margin:0;
  padding:0;
  border-top:2px solid var(--navy);
}
.news li{
  position:relative;
  display:grid;
  grid-template-columns:7.5em auto 1fr;
  gap:4px 16px;
  align-items:baseline;
  padding:16px 2.6em 16px 8px; /* 右は矢印の分 */
  border-bottom:1px solid var(--line);
  transition:background var(--t-fast) var(--ease-out);
}
/* 行の右端の矢印（題名のリンクの続き。行全体が押せることを示す） */
.news li::after{
  content:"→";
  position:absolute;
  right:12px;
  top:50%;
  translate:0 -50%;
  font-weight:700;
  color:var(--deep);
  transition:translate var(--t-fast) var(--ease-out);
}
/* 行の無い一覧（公開中のコラムが 0 件の間の /column）は、線だけが残らないよう隠し、準備中の文言を出す */
.news:empty{
  display:none;
}
.news-empty{
  margin:0;
  padding:22px 8px;
  border-top:2px solid var(--navy);
  border-bottom:1px solid var(--line);
  color:var(--muted);
}
.news time{
  white-space:nowrap;
  font-weight:700;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
/* 題名＝リンク。紺の文字に薄い下線。行のどこを押しても開く（a::before を行いっぱいに広げる） */
.news a{
  color:var(--navy);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(11,58,107,.28);
  text-decoration-thickness:1px;
  text-underline-offset:.3em;
  transition:color var(--t-fast) var(--ease-out),text-decoration-color var(--t-fast) var(--ease-out);
}
.news a::before{
  content:"";
  position:absolute;
  inset:0;
}
.news li:hover{
  background:var(--mist);
}
.news li:hover::after{
  translate:4px -50%;
}
.news li:hover a{
  color:var(--deep);
  text-decoration-color:currentColor;
}
/* フォーカスの二重線は、題名の文字ではなく行の外枠に出す */
.news a:focus-visible{
  outline:0;
  box-shadow:none;
}
.news a:focus-visible::before{
  outline:3px solid var(--amber);
  outline-offset:-3px;
  box-shadow:inset 0 0 0 6px var(--navy);
  border-radius:var(--r-xs);
}
.policy{
  max-width:46em;
  margin-left:max(20px,calc((100% - var(--max)) / 2));
  margin-right:auto;
}
.policy h2{
  font-size:var(--fs-h3);
  color:var(--navy);
  margin:2em 0 .6em;
}
.policy .demo-notice+h2{
  margin-top:1.2em;
}
.policy ul{
  margin:.4em 0 .8em;
  padding-left:0;
  list-style:none;
}
.policy li{
  margin:.3em 0;
}
.nf{
  text-align:center;
  padding-block:48px;
}
.nf__code{
  font-size:var(--fs-display);
  font-weight:700;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  line-height:1;
  margin:0 0 .2em;
  letter-spacing:.06em;
}
.nf h1{
  font-size:var(--fs-h1);
  color:var(--navy);
  margin-bottom:.8em;
}
/* 404 のボタン：2 個ずつ同じ幅の 2 列に（各行の左右の端をそろえる。#22） */
.nf__acts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:min(100%,600px);
  margin:1.6em auto 12px;
}
.nf__acts--sub{
  margin-top:0;
}
.nf__acts .btn{
  min-height:72px; /* 電話のボタン（番号＋受付時間の 2 行）と同じ高さに、4 つともそろえる */
  justify-content:space-between;
  text-align:left;
}
.nf__acts .btn--tel{
  justify-content:flex-start;
}
@media (max-width:600px){
  .nf__acts{
    grid-template-columns:1fr;
  }
}
@media (max-width:980px){
  .news li{
    grid-template-columns:7em 1fr;
  }
  .news li a{
    grid-column:1/-1;
  }
}
@media (max-width:760px){
  /* 日付と札は 1 行に並べ、入らない幅では札を次の行へ。題は行の内側（右の矢印の分を空けた幅）に収める
     （grid のままだと 320px で日付＋札の列が欄より広くなり、題が矢印に重なった。再々採点 SP X6） */
  .news li{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px 12px;
  }
  .news li a{
    display:block;
    flex:1 0 100%;
    min-width:0;
    padding:.45em 0;
  }
}
@media (max-width:400px){
  .news li{
    padding-right:2em; /* 矢印の分だけ空ける（題の 1 行を長く） */
  }
  .news li::after{
    right:6px;
  }
}
@media (min-width:761px){
  .news li{
    grid-template-columns:10.5em 11em 1fr;
  }
}
/* お知らせの記事ページ（/news/<id>）。本文の幅は、個人情報保護方針（.policy）と同じ 46em。.wrap の中に置くので、左は冒頭の見出しと揃う */
.article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
}
.article-meta time{
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
/* コラムの記事: 公開日・更新日・書き手（src/pages/column-template.astro）。項目名は小さく薄く、値は日付と同じ太さ */
.article-meta__item{
  display:inline-flex;
  align-items:baseline;
  gap:.5em;
}
.article-meta__k{
  font-size:var(--fs-xs);
  color:var(--muted);
}
.article-meta__by{
  font-weight:700;
}
.article{
  max-width:44em;
}
.article-note{
  font-size:var(--fs-sm);
  color:var(--muted);
  padding:.7em 1em;
  background:#fff;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--navy);
  border-radius:var(--r);
  margin:0 0 1.8em;
}
.article h2{
  font-size:var(--fs-h3); /* 記事の中の小見出しは、ほかのページの小見出し（h3 の段）と同じ形。縦棒は付けない */
  color:var(--navy);
  margin:2.4em 0 .8em;
}
.article h3{
  font-size:var(--fs-lg); /* 見出し（小）。管理画面で書いたお知らせで使う（h2 の下の小見出し） */
  color:var(--navy);
  margin:1.8em 0 .6em;
}
.article h2+h3{
  margin-top:.8em;
}
.article p a,
.article li a{
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:3px;
}
/* 見出しの下の強調の 1 行（旧サイトで見出しが 2 つ続いた所・太字だけの段落） */
.article-lead{
  font-weight:700;
  color:var(--navy);
  font-size:var(--fs-lg);
  line-height:1.75;
}
.article h2+.article-lead{
  margin-top:-.2em;
}
.article-note+h2{
  margin-top:0;
}
.article p{
  margin:0 0 1em;
  line-height:1.9;
}
.article ul{
  margin:.4em 0 1.2em;
  padding-left:0;
  list-style:none;
}
.article li{
  margin:.35em 0;
  line-height:1.75;
}
.article hr{
  border:0;
  border-top:1px solid var(--line);
  margin:1.6em 0;
}
/* 記事の画像。元の大きさより大きくしない（幅は width 属性＝元の幅まで）・画面の高さの 8 割より高くしない。
   高さで縮めたときは、縦横比を保って幅も縮める（attr() が使えるブラウザ）。使えないブラウザは、枠の中に収めて左に寄せる */
.article-fig{
  margin:1.6em 0 2em;
}
.article-fig img{
  display:block;
  max-width:100%;
  height:auto;
  max-height:min(80svh,760px);
  object-fit:contain;
  object-position:left top;
  border-radius:var(--r);
}
@supports (width:calc(attr(width type(<number>)) * 1px)){
  .article-fig img{
    max-width:min(100%,calc(min(80svh,760px) * attr(width type(<number>)) / attr(height type(<number>))));
  }
}
/* 縦長の図（旧サイトの取組みの図）は、横幅の広い画面でも本文の幅いっぱいにしない */
.article-fig--tall img{
  max-width:min(100%,520px);
}
@supports (width:calc(attr(width type(<number>)) * 1px)){
  .article-fig--tall img{
    max-width:min(100%,520px,calc(min(80svh,760px) * attr(width type(<number>)) / attr(height type(<number>))));
  }
}
/* 記事の中の関連ページへのリンク：ほかのページの「→ の文字リンク」（.more-link）と同じ形（罫線の一覧にしない。再採点 SP #50） */
.article .article-links{
  list-style:none;
  padding:0;
  margin:1em 0 1.8em;
}
.article .article-links li{
  margin:0;
  padding-left:0;
}
.article .article-links li::before{
  content:none;
}
.article-links a{
  display:inline-block;
  padding:7px 0;
  font-weight:700;
}
.article-links a::after{
  content:"→";
  display:inline-block;
  margin-left:.4em;
  transition:translate var(--t-fast) var(--ease-out);
}
.article-links a:hover::after{
  translate:4px 0;
}
.article-back{
  margin-top:2.4em;
  font-weight:700;
}
.article-back a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.article-back a::before{
  content:"←";
  margin-right:.4em;
}
/* 記事ページの段組み。1100px 以上は、本文（読みやすい行長の 44em）の右に「ほかのお知らせ」の欄を置き、スクロールしても見えるようにする。
   それより狭い画面では、本文の終わりに続けて出す */
.article-pager{
  margin-top:48px;
  padding-top:28px;
  border-top:2px solid var(--navy);
}
.article-pager__h{
  margin:0 0 14px;
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--navy);
}
.article-pager ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:12px;
}
.pager-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 12px;
  height:100%;
  padding:16px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--ink);
  text-decoration:none;
  transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.pager-card__dir{
  grid-column:1;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--muted);
}
.pager-card time{
  grid-column:2;
  grid-row:1;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.pager-card__t{
  grid-column:1/-1;
  font-weight:700;
  line-height:1.6;
  color:var(--navy);
}
/* 前の記事＝←（左）、次の記事＝→（右） */
.pager-card--older .pager-card__dir::before{
  content:"← ";
}
.pager-card--newer .pager-card__dir::after{
  content:" →";
}
.pager-card:hover{
  background:var(--mist);
  border-color:var(--navy);
}
.pager-card:hover .pager-card__t{
  text-decoration:underline;
  text-underline-offset:.25em;
}
@media (min-width:1101px){
  .article-layout{
    display:grid;
    grid-template-columns:minmax(0,44em) minmax(240px,1fr);
    column-gap:clamp(48px,6vw,96px);
    align-items:start;
  }
  .article-layout .article{
    grid-column:1;
    grid-row:1;
  }
  .article-pager{
    grid-column:2;
    grid-row:1;
    position:sticky;
    top:calc(var(--head-h) + 32px);
    margin-top:0;
    padding-top:20px;
  }
  .article-pager ul{
    grid-template-columns:1fr;
  }
  .article-layout__guide{
    grid-column:1/-1;
  }
}

/* ページ上部のリードを 1 文ずつ改行する（/news・問い合わせ 2 ページ。文の途中で折れて次の文が続く形をなくし、2 つの問い合わせページの組み方をそろえる。
   窓口の一言 .desk__s と同じ考え方。2026-10-22 再採点4 PC P1・P2） */
.sub-hero .lead-s>span{
  display:block;
}

/* 会社概要（/company）。2026-10-22 再採点4 SP Z4・Z5 */
/* 事業内容：760px 以下は、括弧の補足を事業名の下の行に置く（4 項目とも同じ形。「破砕、」だけの行を作らない） */
@media (max-width:760px){
  .co-biz>span{
    display:block;
    margin-bottom:.5em;
    font-size:var(--fs-sm);
    color:var(--muted);
  }
  .co-biz>br{
    display:none; /* 補足を別の行にした分、改行の br は空の行になるため消す */
  }
}
/* 360px 以下：アクセスの見出しの「大久保リサイクルセンター」（12 字・割らない語）が欄に入る大きさにする（はみ出し・3 行を防ぐ） */
@media (max-width:360px){
  #h-acc{
    font-size:1.35rem;
  }
}
/* ==== 許可の区分ごとの一覧（トップの #permits の .parea）と、事業ごみの 3 ページの案内の帯（.pguide）（2026-10-27 デモ：ブランチ demo-medical） ====
   ほかのページの表示を変えないため、ここの class はこの 2 つの部品（PermitAreas・PermitGuide）でだけ使う。
   区分の色は事業の青の中で 3 段（一般廃棄物＝明るい青、産業廃棄物＝青、特別管理産業廃棄物＝紺）。色だけに頼らず、しるし・見出し・札でも分ける */
.parea--ippai,
.pguide__a--ippai{
  --pg:var(--blue);
  --pg-ic-bg:var(--blue-wash);
  --pg-ic:var(--deep-d);
}
.parea--sanpai,
.pguide__a--sanpai{
  --pg:var(--deep);
  --pg-ic-bg:var(--deep);
  --pg-ic:#fff;
}
.parea--tokkan,
.pguide__a--tokkan{
  --pg:var(--navy);
  --pg-ic-bg:var(--navy);
  --pg-ic:#fff;
}

/* ---- トップ：区分ごとのカード（上線＝区分の色）。左に区分とエリア、右に許可の一覧 ---- */
.pareas{
  display:grid;
  gap:20px;
}
.parea{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:0 48px;
  padding:32px 36px;
  background:#fff;
  border:1px solid var(--line);
  border-top:var(--edge-top) solid var(--pg);
  border-radius:var(--r);
  scroll-margin-top:calc(var(--head-h) + 24px);
}
.parea__head{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.parea__name{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.parea__ic{
  flex:none;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:var(--r);
  background:var(--pg-ic-bg);
  color:var(--pg-ic);
}
.parea__ic svg{
  width:28px;
  height:28px;
}
.parea h3{
  margin:0;
  font-size:var(--fs-h3);
  color:var(--navy);
  line-height:1.35;
  padding-top:.3em;
}
.parea__sub{
  margin:.35em 0 0;
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.6;
}
/* エリア：区分の中でいちばん目に入る文字。上に「エリア」の小さなラベル、左にピン */
.parea__area{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 20px 18px;
  background:var(--mist);
  border-left:3px solid var(--pg);
  border-radius:0 var(--r) var(--r) 0;
}
.parea__area-k{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--muted);
  letter-spacing:.08em;
}
.parea__area-v{
  display:flex;
  align-items:center;
  gap:.3em;
  font-size:var(--fs-h3);
  line-height:1.4;
  color:var(--navy);
  letter-spacing:.04em;
}
.parea__area-v svg{
  flex:none;
  width:1.05em;
  height:1.05em;
  color:var(--deep);
}
.parea__area-n{
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.6;
}
/* 許可の一覧：1 件ずつ、上の行に許可の名前と範囲・PDF、下の行に許可権者・許可番号・有効期限 */
.parea__body{
  min-width:0;
}
.parea__list{
  list-style:none;
  margin:0;
  padding:0;
}
.parea-item{
  padding:20px 0;
  border-top:1px solid var(--line);
}
.parea-item:first-child{
  padding-top:0;
  border-top:0;
}
.parea-item:last-child{
  padding-bottom:0;
}
.parea-item__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px 24px;
}
.parea-item__name{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.parea-item__name b{
  font-size:var(--fs-lg);
  color:var(--navy);
  line-height:1.5;
}
.parea-item__name span{
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.6;
}
.parea-item__pdf{
  flex:none;
  white-space:nowrap;
}
.parea-item__meta{
  display:grid;
  grid-template-columns:minmax(0,9em) minmax(0,14em) minmax(max-content,1fr);
  gap:8px 24px;
  margin:12px 0 0;
  font-variant-numeric:tabular-nums;
}
.parea-item__meta div{
  min-width:0;
}
.parea-item__meta dt{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--muted);
  letter-spacing:.06em;
}
.parea-item__meta dd{
  margin:0;
  font-size:var(--fs-body);
  color:var(--ink);
}
/* 品目と注記（特別管理産業廃棄物） */
.parea__items{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
  margin:20px 0 0;
  padding:14px 16px;
  background:var(--mist);
  border-radius:var(--r);
  font-size:var(--fs-body);
  line-height:1.7;
}
.parea__items span{
  flex:none;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--navy);
  letter-spacing:.06em;
}
.parea__note{
  margin:12px 0 0;
  max-width:45em;
  font-size:var(--fs-sm);
  color:var(--muted);
}

/* ---- 事業ごみの 3 ページ：許可証一覧への案内の帯（白地＋1px 枠＋紺の左線＝ご案内。ボタンは紺の枠） ---- */
.pguide{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:20px 40px;
  margin-top:36px;
  padding:26px 32px 26px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--navy);
  border-radius:var(--r);
}
.pguide__h{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-size:var(--fs-h3);
  font-weight:700;
  line-height:1.4;
  color:var(--navy);
}
/* 見出しの文字は 1 つの句として扱われ（word-break:auto-phrase）、狭い幅で枠からはみ出したため、<wbr> で「エリア／許可証一覧」の間で折れるようにし、flex の中で縮めるようにする（2026-10-27 COO の 320px 確認） */
.pguide__h > span:last-child{
  min-width:0;
}
.pguide__ic{
  flex:none;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:var(--r);
  background:var(--mist);
  color:var(--navy);
}
.pguide__ic svg{
  width:24px;
  height:24px;
}
.pguide__d{
  margin:10px 0 0;
  max-width:44em;
  font-size:var(--fs-body);
  color:var(--muted);
}
/* 3 区分のエリア（トップの一覧の縮図）。札の上線は区分の色、このページの区分は札を付けて濃く */
.pguide__areas{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:18px 0 0;
  padding:0;
}
.pguide__a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 14px 12px;
  border:1px solid var(--line);
  border-top:3px solid var(--pg);
  border-radius:var(--r-xs);
  background:#fff;
}
.pguide__a.is-cur{
  background:var(--mist);
  border-color:var(--blue-line);
  border-top-color:var(--pg);
}
.pguide__k{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--muted);
  line-height:1.5;
}
.pguide__a.is-cur .pguide__k{
  color:var(--navy);
}
.pguide__k small{
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.6;
  padding:0 .6em;
  border-radius:var(--r-xs);
  background:var(--navy);
  color:#fff;
}
.pguide__a b{
  display:flex;
  align-items:center;
  gap:.25em;
  font-size:var(--fs-body);
  color:var(--navy);
  line-height:1.5;
}
.pguide__a b svg{
  flex:none;
  width:1em;
  height:1em;
  color:var(--deep);
}
.pguide__btn{
  min-width:15em;
}

/* ---- タブレット（〜980px）：トップのカードは区分とエリアを上に、許可の一覧を下に ---- */
@media (max-width:980px){
  .parea{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
    padding:28px 28px 30px;
  }
  .parea__head{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px 32px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line);
  }
  .parea__area{
    min-width:16em;
  }
  .parea-item:first-child{
    padding-top:0;
  }
}
/* ---- 案内の帯：1199px 以下はボタンを下の段に回し、3 区分の札に横幅を全部使わせる
   （981〜1199px で札が狭くなり「兵庫県内・大阪府内」が 2 行に折れて札の高さがそろわなかった。2026-10-27 COO の確認） ---- */
@media (max-width:1199px){
  .pguide{
    grid-template-columns:minmax(0,1fr);
  }
  .pguide__btn{
    justify-self:start;
  }
}
/* 札が横に 3 つ並ぶ幅では、エリアの語を途中で折らない */
@media (min-width:761px){
  .pguide__a b{
    white-space:nowrap;
  }
}
/* ---- スマホ（〜760px） ---- */
@media (max-width:760px){
  .pareas{
    gap:16px;
  }
  .parea{
    padding:22px 18px 24px;
  }
  .parea__head{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .parea__ic{
    width:44px;
    height:44px;
  }
  .parea__ic svg{
    width:26px;
    height:26px;
  }
  /* 許可の名前を欄いっぱいに使い、PDF は値の下に置く（名前の右に置くと、名前が 4 行に折れる） */
  .parea-item{
    display:flex;
    flex-direction:column;
  }
  .parea-item__top{
    display:contents;
  }
  .parea-item__meta{
    order:2;
  }
  .parea-item__pdf{
    order:3;
    align-self:flex-start;
    margin-top:14px;
  }
  .parea__area{
    min-width:0;
  }
  /* 許可権者・許可番号・有効期限は、1 行に 1 つ（左に項目名、右に値）。順番は PC と同じ */
  .parea-item__meta{
    grid-template-columns:minmax(0,1fr);
    gap:4px;
    margin-top:10px;
  }
  .parea-item__meta dd.nw{
    white-space:normal;
  }
  .parea-item__meta div{
    display:grid;
    grid-template-columns:5.5em minmax(0,1fr);
    align-items:baseline;
    gap:12px;
  }
  .parea__items{
    flex-direction:column;
    gap:2px;
  }
  .pguide{
    padding:22px 18px 22px 18px;
  }
  .pguide__h{
    font-size:var(--fs-lg);
  }
  .pguide__areas{
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  /* 札は PC と同じく、区分（と「このページ」）の下にエリア。「このページ」の札だけ 2 行になって高さがそろわない形をなくす（2026-10-27 独立点検 390px） */
  .pguide__btn{
    justify-self:stretch;
    min-width:0;
  }
}

/* ---- 分別表への案内の帯（トップの #permits の最後。SortingGuide.astro）：札の段が無いので、761px 以上はボタンを右に置いたまま ---- */
@media (min-width:761px){
  .pguide--row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .pguide--row .pguide__btn{
    justify-self:end;
  }
}
/* 13-page-price：料金の目安（/price）。
   表は 06-tables の .tbl-wrap / .tcard を土台にし、ここでは料金表（.ptbl）だけの違いを書く。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */

/* 表の上の「税抜・目安・更新日」。税抜の 1 行を一番強く */
.price-lead{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 24px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--tone);
  border-radius:var(--r);
  --ix:24px;
  padding:18px var(--ix) 18px calc(var(--ix) - var(--edge) + 1px);
  margin:0 0 24px;
}
.price-lead p{
  margin:0;
}
/* 「税抜」の札と文を 2 列にして、折り返しても文の左端をそろえる（SP #33） */
.price-lead__tax{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  color:var(--navy);
  line-height:1.7;
  font-size:var(--fs-lg);
}
.price-lead__pill{
  display:inline-block;
  background:var(--tone);
  color:var(--tone-on);
  font-weight:700;
  font-size:var(--fs-sm);
  letter-spacing:.08em;
  padding:.2em .7em;
  margin-right:.6em;
  border-radius:var(--r-xs);
  vertical-align:.1em;
  line-height:1.5;
}
.price-lead__txt{
  grid-column:1;
  font-size:var(--fs-body);
  color:var(--muted);
}
.price-lead__upd{
  grid-column:2;
  grid-row:1/span 2;
  align-self:start;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--navy);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ページ内の移動（表が長いので、区分・注意事項・受入時間へすぐ飛べるように） */
/* 目次のチップ：同じ幅の格子に 3 個ずつ 2 行で並べる（2 行目に 1 個だけ残さない #53）。点の印は付けない。矢印は 1 色 */
.price-jump{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0 0 8px;
}
.price-jump a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5em;
  min-height:44px;
  padding:0 16px;
  border:1.5px solid var(--deep);
  border-radius:99px;
  background:#fff;
  color:var(--navy);
  font-size:var(--fs-body);
  font-weight:700;
  text-decoration:none;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.price-jump a{
  white-space:nowrap;
}
.price-jump a::after{
  content:"↓";
  font-size:.85em;
  color:var(--deep);
  transition:translate var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.price-jump a:hover{
  background:var(--deep);
  color:#fff;
}
.price-jump a:hover::after{
  color:#fff;
  translate:0 2px;
}
.price-jump__n{
  margin-left:auto;
  font-weight:400;
  font-size:var(--fs-xs);
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
/* 札の文字（名前＋件数）。広い幅では箱を作らず、件数を右端へ寄せる */
.price-jump__t{
  display:contents;
}
.price-jump a:hover .price-jump__n{
  color:#fff;
}

/* 区分ごとの表 */
.price-sec{
  margin-top:48px;
  scroll-margin-top:calc(var(--head-h) + 16px);
}
/* 小見出し（h3 の段）。縦棒などの飾りは付けない（全ページ共通の形。2026-10-21 監査 review-4 #2） */
.price-sec__h{
  font-size:var(--fs-h3);
  color:var(--navy);
  margin:0 0 16px;
}
.ptbl th[scope="row"]{
  color:var(--navy);
  font-size:var(--fs-body);
}
/* 同じ品目が続く行は、品目名のセルを縦に結合して 1 回だけ出す。2 行目以降のセルは PC では隠し（スマホのカードでは、1 枚ずつ品目名が要るので出す）、結合したセルは上に寄せる */
.ptbl th.ptbl__grp{
  vertical-align:top;
}
@media (min-width:761px){
  .ptbl th.ptbl__dup{
    display:none;
  }
}
.ptbl__sub{
  font-weight:400;
  font-size:var(--fs-sm);
  color:var(--muted);
}
.ptbl .ptbl__u{
  width:6em;
  white-space:nowrap;
}
.ptbl thead th:first-child{
  width:34%;
}
.ptbl .ptbl__p{
  width:8em;
  text-align:right;
  white-space:nowrap;
}
.ptbl tbody .ptbl__p{
  font-weight:700;
  color:var(--navy);
  font-size:var(--fs-body);
  font-variant-numeric:tabular-nums;
}
/* 金額: 「円」の位置を縦にそろえる。「〜」は円の右の決まった場所に置き、ない行は空けておく（3円 と 3円〜 で数字がずれない） */
/* 品目名のかたまり: かたまりの中では折らない。幅に収まらないときだけ、非常用に途中で折れる */
.ptbl__ph{
  display:inline-block;
  max-width:100%;
  word-break:keep-all;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.ptbl__from{
  display:inline-block;
  width:1.05em;
  text-align:left;
}
.ptbl__per{
  display:none;
}
.ptbl td.ptbl__n{
  color:var(--ink);
  text-wrap:balance; /* 短い備考は行の長さをそろえる（「根を」だけの行を作らない。再々採点 SP X16） */
}
.ptbl strong{
  color:var(--navy);
}
.ptbl tbody tr{
  transition:background var(--t-fast) var(--ease-out);
}
.ptbl tbody tr:hover td{
  background:var(--mist);
}

/* 「積込、設置」を、入れ替えの場合（青）と積込の場合（橙）に分けて見せる。色は、見出しの札・表の上線・ジャンプのチップ・スマホのカードの上線にそろえて使う */
.price-grp{
  --grp:var(--deep);
  --grp-wash:var(--blue-wash);
  --grp-line:var(--blue-line);
  /* 余白の基準（枠の中の文字は、どの枠でも「枠線＋--ix」の位置から始まる）
     --ix: 枠の左右の余白 / --iy: 箱の上下の余白 / --is: 細い帯・注記の上下の余白 / --gap: 箱と箱の間隔 / --gp: 面の内側の余白 */
  --ix:24px;
  --iy:20px;
  --is:14px;
  --gap:16px;
  --gp:24px;
  margin-top:28px;
  padding:var(--gp);
  background:var(--grp-wash);
  border:1px solid var(--grp-line);
  border-left:10px solid var(--grp);
  border-radius:var(--r);
  scroll-margin-top:calc(var(--head-h) + 16px);
}
.price-grp--load{
  --grp:var(--amber);
  --grp-wash:var(--amber-wash);
  --grp-line:var(--amber-line);
}
.price-grp__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  margin:0 0 var(--gap);
}
.price-grp__h{
  margin:0;
  font-size:var(--fs-lg);
  line-height:1.4;
}
.price-grp__tag{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  line-height:1.4;
  gap:.55em;
  padding:.45em 1.2em .45em .95em;
  border-radius:99px;
  font-size:var(--fs-lg);
  background:var(--grp);
  color:#fff;
  font-weight:700;
  letter-spacing:.04em;
}
.price-grp--load .price-grp__tag{
  color:var(--navy-d);
}
.price-grp__hint{
  margin:0;
  font-size:var(--fs-body);
  color:var(--muted);
}
.price-grp .tbl-wrap{
  border-top:var(--edge-top) solid var(--grp);
}
.price-jump__g--swap{
  --grp:var(--deep);
}
.price-jump__g--load{
  --grp:var(--amber);
}
.price-jump__g--single{
  --grp:var(--navy);
}


/* 料金のルールのカード（入れ替え: 箱の大きさ／積込: 量／1品目のみ: 明石市内・外）。金額を一番大きく、条件（運搬費の有無）を下の段に */
/* 廃棄物一覧: ルールではなく品目ごとの一覧なので、色に意味を持たせない灰色の面にする */
.price-grp--list{
  --grp:var(--muted);
  --grp-wash:var(--surface);
  --grp-line:var(--line);
  margin-top:0;
}
.price-grp--single{
  --grp:var(--navy);
  --grp-wash:var(--surface);
  --grp-line:var(--line-2);
}
.price-grp--single .price-grp__tag{
  color:#fff;
}
.rule-cards{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}
.rule-cards--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.rule-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden;
  padding:var(--iy) var(--ix);
  background:#fff;
  border:1px solid var(--line);
  border-top:var(--edge-top) solid var(--grp);
  border-radius:var(--r);
}
.rule-card__k{
  font-weight:700;
  font-size:var(--fs-lg);
  line-height:1.4;
  color:var(--navy);
}
/* カードの 1 段目（見出し＋補足）は、どのカードも同じ高さ。ブロックが違っても、金額の位置がそろう */
.rule-card>.rule-card__k,
.rule-card__top{
  min-height:3.4rem;
}
.rule-card__k small{
  display:block;
  font-size:var(--fs-xs);
  font-weight:400;
  color:var(--muted);
}
.rule-card__p{
  white-space:nowrap; /* 金額と単位（／m³）を割らない */
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.25;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.rule-card__p small{
  margin-left:.2em;
  font-size:var(--fs-sm);
  font-weight:400;
  color:var(--muted);
}
.rule-card__what{
  font-size:var(--fs-sm);
  color:var(--muted);
}
.rule-card__add{
  display:flex;
  align-items:center;
  gap:.6em;
  min-height:2.9rem;
  margin-top:auto;
  padding-top:12px;
  border-top:1px dashed var(--line);
  color:var(--navy);
}
.rule-card__add b{
  font-size:var(--fs-h3);
  font-variant-numeric:tabular-nums;
}
.rule-card__plus{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:1.6em;
  height:1.6em;
  border-radius:50%;
  background:var(--amber);
  color:var(--navy-d);
  font-style:normal;
  font-weight:700;
}
.rule-card__add--none,
.rule-card__add--note{
  color:var(--muted);
  font-size:var(--fs-body);
}
.rule-note{
  margin:var(--gap) 0 0;
  font-size:var(--fs-sm);
  color:var(--muted);
}
.rule-sub{
  margin:calc(var(--gap) * 2) 0 var(--gap);
  font-size:var(--fs-body);
  color:var(--navy);
}
/* コンテナ設置費: 金額の行と、赤の※（場所ごとに初回がかかる） */
.rule-setup{
  overflow:hidden;
  margin-top:var(--gap);
  padding:var(--iy) var(--ix) 0;
  background:#fff;
  border:1px solid var(--grp-line);
  border-radius:var(--r);
}
.rule-setup__row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 16px;
  margin:0;
  color:var(--navy);
}
.rule-setup__n{
  font-size:var(--fs-lg);
}
.rule-setup__p{
  font-size:var(--fs-h3);
  font-variant-numeric:tabular-nums;
}
.rule-setup__p small{
  font-size:var(--fs-sm);
  font-weight:400;
  color:var(--muted);
  margin-left:.2em;
}
.rule-alert{
  display:block;
  margin:var(--iy) calc(var(--ix) * -1) 0;
  padding:var(--is) var(--ix) var(--is) calc(var(--ix) - var(--edge));
  border-left:var(--edge) solid var(--err);
  border-radius:0;
  background:var(--err-wash);
  color:var(--err);
  font-size:var(--fs-sm);
  line-height:1.8;
}
.rule-alert b{
  display:block;
}
.rule-alert span{
  display:block;
  margin-top:.2em;
  font-size:var(--fs-sm);
  color:var(--ink);
}
/* 表の備考の文字リンク（ご相談の窓口へ移動する） */
.ptbl__link{
  color:var(--deep);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.25em;
}
.ptbl__link::after{
  content:"↓";
  margin-left:.3em;
  text-decoration:none;
  display:inline-block;
}
.ptbl__link:hover{
  color:var(--navy);
}
/* ご相談の窓口へ移動したとき、固定のヘッダーに隠れない位置で止める */
.section--desk{
  scroll-margin-top:calc(var(--head-h) + 16px);
}

/* カードの 1 段目（見出しと札を、両端に） */
.rule-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
/* カードの金額は、どのカードも同じ大きさ（--fs-h2。.rule-card__p）。積込作業の料金だけ小さくしない（2026-10-22 再採点 SP N10） */
/* 積込作業の費用: 1 段目を持たない「一覧の行」のカード。名前と補足を左、金額を右にして、縦の中央にそろえる（下に空白が余らない） */
.rule-card--sm{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto 1fr;
  gap:0 var(--gap);
}
.rule-card--sm>.rule-card__k{
  grid-column:1;
  grid-row:1;
  min-height:0;
}
.rule-card--sm>.rule-card__what{
  grid-column:1;
  grid-row:2;
  margin-top:4px;
  white-space:nowrap;
}
.rule-card--sm>.rule-card__p{
  grid-column:2;
  grid-row:1/-1;
  align-self:start; /* 左右のカードで、題と金額の上端をそろえる（再採点 PC N21） */
  text-align:right;
}
/* カードの幅が狭いとき（420px 未満。タブレットの 2 枚並び・小さいスマホ）は、題・金額・補足を縦に積む。
   横に並べたままだと、題（「人件費（運転手を除く）」）が金額に重なる（再々採点 SP X1。768〜860px）。幅はカード自身で判定する */
.rule-card--sm{
  container-type:inline-size;
}
@container (max-width:420px){
  .rule-card--sm>.rule-card__k,
  .rule-card--sm>.rule-card__what,
  .rule-card--sm>.rule-card__p{
    grid-column:1/-1;
    grid-row:auto;
    text-align:left;
  }
  .rule-card--sm>.rule-card__p{
    margin-top:4px;
  }
  .rule-card--sm>.rule-card__what{
    white-space:normal;
  }
}

/* 積込: 3m³のしきい値を示す帯（左＝運搬費あり、右＝運搬費なし） */
.rule-scale{
  margin:0 0 var(--gap);
}
.rule-scale__bar{
  display:flex;
  overflow:hidden;
  border-radius:99px;
  font-size:var(--fs-body);
  font-weight:700;
  line-height:1.3;
}
.rule-scale__seg>span{
  white-space:nowrap;
}
.rule-scale__seg>span+span{
  margin-left:1em;
}
.rule-scale__seg{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:3.1rem;
  padding:.4em 1em;
  text-align:center;
}
.rule-scale__seg--fee{
  flex:0 0 38%;
  background:var(--amber);
  color:var(--navy-d);
}
.rule-scale__seg--free{
  flex:1;
  background:#fff;
  color:var(--navy);
  border:2px solid var(--amber);
  border-left:0;
  border-radius:0 99px 99px 0;
}
.rule-scale__ticks{
  display:flex;
  margin-top:6px;
  font-size:var(--fs-sm);
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.rule-scale__ticks span:first-child{
  flex:0 0 38%;
}
.rule-scale__t{
  position:relative;
  padding-left:.6em;
  font-size:var(--fs-lg);
  font-weight:700;
  line-height:1.3;
  color:var(--navy);
}
.rule-scale__m{
  margin-left:auto;
}
.rule-scale__t::before{
  content:"";
  position:absolute;
  left:0;
  top:-10px;
  height:10px;
  border-left:3px solid var(--navy);
}
/* 積込: カードの右上の札（運搬費あり／なし） */
.rule-pill{
  flex:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  min-height:2rem;
  /* 札は 1 行目の文字の縦中央に置く（見出しの位置は、どのカードでも同じ） */
  margin-top:calc((1.1rem * 1.4 - 2rem) / 2);
  padding:0 .9em;
  border:1px solid transparent;
  line-height:1.4;
  border-radius:99px;
  font-size:var(--fs-sm);
  font-weight:700;
  white-space:nowrap;
}
.rule-pill--fee{
  background:var(--amber);
  color:var(--navy-d);
}
.rule-pill--none{
  background:var(--surface);
  border-color:var(--line-2);
  color:var(--navy);
}
/* 積込: 運搬費の有無を、カードの下の色帯で（差がここだけだと、ひと目で分かるように） */
.rule-card__band{
  display:flex;
  align-items:center;
  gap:.6em;
  min-height:3.5rem;
  margin:auto calc(var(--ix) * -1) calc(var(--iy) * -1);
  padding:10px var(--ix);
  font-weight:700;
}
.rule-card__band b{
  font-size:var(--fs-h3);
  font-variant-numeric:tabular-nums;
}
.rule-card__band--fee{
  background:var(--amber);
  color:var(--navy-d);
}
.rule-card__band--fee .rule-card__plus{
  background:var(--navy-d);
  color:#fff;
}
.rule-card__band--none{
  background:var(--surface);
  color:var(--navy);
}
.rule-card__check{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:1.6em;
  height:1.6em;
  border-radius:50%;
  background:#fff;
  color:var(--navy);
  font-style:normal;
  font-weight:700;
}
.rule-judge{
  margin:0 0 var(--gap);
  padding:var(--is) var(--ix) var(--is) calc(var(--ix) - var(--edge) + 1px);
  background:#fff;
  border:1px solid var(--grp-line);
  border-left:var(--edge) solid var(--grp);
  border-radius:var(--r);
  color:var(--navy);
  line-height:1.8;
}
.rule-judge b{
  display:block;
}
.rule-judge span{
  display:block;
  margin-top:.15em;
  font-size:var(--fs-body);
  color:var(--ink);
}
/* 計算の例 */
.rule-calc{
  margin-top:var(--gap);
  padding:var(--iy) var(--ix);
  background:#fff;
  border:1px dashed var(--grp);
  border-radius:var(--r);
}
.rule-calc__h{
  display:block;
  color:var(--navy);
}
.rule-calc__h small{
  margin-left:.6em;
  font-size:var(--fs-xs);
  font-weight:400;
  color:var(--muted);
}
.rule-calc__list{
  list-style:none;
  margin:8px 0 0;
  padding:0;
}
.rule-calc__list li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 14px;
  padding:.5em 0;
  border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.rule-calc__list li:first-child{
  border-top:0;
}
.rule-calc__q{
  flex:0 0 9.5em;
  font-weight:700;
  color:var(--navy);
}
.rule-calc__f{
  color:var(--muted);
}
.rule-calc__free{
  margin-left:.4em;
  color:var(--muted);
  font-size:var(--fs-sm);
}
.rule-calc__t{
  margin-left:auto;
  font-size:var(--fs-h3);
  line-height:1.3;
  color:var(--navy);
}

@media (min-width:761px){
  .ptbl th,
  .ptbl td{
    vertical-align:baseline;
    line-height:1.7;
  }
  .price-grp .ptbl tr>:first-child{
    padding-left:var(--ix);
  }
  .price-grp .ptbl tr>:last-child{
    padding-right:var(--ix);
  }
}
/* 761〜980px：単位・金額の列を詰めて備考の列に幅を回す（備考が 3〜4 行に折れないように。2026-10-22 再採点3 SP Y4）。
   品目 30%（「石綿含有産業廃棄物」9 字が 1 行）・単位 9%・金額 19%・備考 42% */
@media (min-width:761px) and (max-width:980px){
  .ptbl{
    table-layout:fixed;
  }
  .ptbl thead th:first-child{
    width:30%;
  }
  .ptbl .ptbl__u{
    width:9%;
  }
  .ptbl .ptbl__p{
    width:19%;
  }
  .tbl-wrap .ptbl :is(th,td){
    padding-inline:.8em;
  }
}
/* 900〜980px は表が広く、品目 30% では品目の列の右が大きく空くので、品目 25%（「石綿含有産業廃棄物」9 字が 1 行）・単位 8%・金額 17% にして備考 50% に回す
   （「解体など・ミンチ（壁土を含む）・分別不可」が 1 行に。再採点4） */
@media (min-width:900px) and (max-width:980px){
  .ptbl thead th:first-child{
    width:25%;
  }
  .ptbl .ptbl__u{
    width:8%;
  }
  .ptbl .ptbl__p{
    width:17%;
  }
}
/* 761〜900px：3 列のカードが細く、「10,000円／m³」の「／m³」がカードの右の余白に食い込む（768px で 12px）ので、カードの左右の余白を詰める */
@media (min-width:761px) and (max-width:900px){
  .rule-card{
    --ix:16px; /* 余白と、下の帯（運搬費）の左右のはみ出し幅の両方に効く */
  }
}
/* 注意事項と受入時間: 左右とも同じ「面」（白い箱・上線・角丸）にそろえる */
/* 注意事項と受入時間は、横に並べず縦に積む（左右で箱の高さが大きく違うため。#19） */
.price-info{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
.price-card{
  background:#fff;
  border:1px solid var(--line);
  border-top:var(--edge-top) solid var(--tone);
  border-radius:var(--r);
  --ix:24px;
  --iy:28px;
  --is:14px;
  --gap:16px;
  overflow:hidden;
  padding:var(--iy) var(--ix);
  scroll-margin-top:calc(var(--head-h) + 16px);
}
.price-card .label{
  margin-bottom:.5em;
}
.price-card__h{
  font-size:var(--fs-h2);
  line-height:1.45;
  color:var(--navy);
  margin:0 0 .5em;
}
.price-notes__list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
}
.price-notes__list li{
  display:grid;
  grid-template-columns:1.5em minmax(0,1fr);
  padding:.85em 0;
  border-top:1px solid var(--line);
  line-height:1.8;
  line-break:strict;
}
.price-notes__list li::before{
  content:"※";
  color:var(--deep);
  font-weight:700;
}
.price-notes__list li.is-strong{
  margin:6px calc(var(--ix) * -1) 0;
  padding:var(--is) var(--ix);
  border-top:0;
  background:var(--tone-wash);
  color:var(--navy);
  font-weight:700;
}
/* 箱の最後が強調の帯のときは、箱の下の端までつなぐ（赤い説明の枠と同じ作り） */
.price-notes__list li.is-strong:last-child{
  margin-bottom:calc(var(--iy) * -1);
}
.price-notes__list li.is-alert{
  color:var(--err);
  font-weight:700;
}
.price-notes__list li.is-alert::before{
  color:var(--err);
}
.price-notes__list li.is-alert .price-notes__sub{
  color:var(--ink);
}
.price-notes__sub{
  display:block;
  white-space:pre-line;
  font-weight:400;
  font-size:var(--fs-sm);
}
.price-hours__sub,
.price-hours__tel{
  font-size:var(--fs-sm);
  color:var(--muted);
  margin:0;
}
.price-hours__main{
  margin:20px 0 0;
}
.price-hours__main dt{
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
}
.price-hours__days{
  display:block;
  margin-top:.2em;
  font-weight:700;
  color:var(--navy);
}
.price-hours__main dd{
  margin:0;
}
.price-hours__time{
  display:block;
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.25;
  letter-spacing:.02em;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
/* お持ち込みできない時間：ほかの注意の箱と同じ形（カードの内側の幅・1px の枠・左線）。カードの端まで伸ばさない（再々採点 PC R20） */
.price-hours__stop{
  margin:var(--gap) 0 0;
  padding:var(--is) 18px;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--amber);
  border-radius:var(--r);
  background:var(--paper);
  color:var(--navy);
  font-weight:700;
  line-height:1.7;
}
.price-hours__stop-l{
  display:block;
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  color:var(--tone-ink);
}
/* 休みの日は、曜日・時間のすぐ下に続ける（単独の太字で浮かせない） */
.price-hours__off{
  margin:2px 0 0;
  color:var(--navy);
}
.price-hours__off span{
  margin-right:.8em;
  font-size:var(--fs-sm);
  letter-spacing:.08em;
  color:var(--muted);
}
.price-hours__list{
  list-style:none;
  margin:14px 0 0;
  padding:12px 0;
  border-block:1px solid var(--line);
}
.price-hours__list li{
  padding:.25em 0;
  font-weight:700;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  line-break:strict;
}
.price-hours__tel{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
}


@media (max-width:760px){
  /* スマホも横スクロールにせず、2 列×3 段の格子で全部見せる（3 つ目以降が右で切れていた。再々採点 SP X9） */
  .price-jump{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  /* 札は角丸の四角（2 行になっても形が崩れない）。名前と件数は 1 つの文として流し、矢印は右端 */
  .price-jump a{
    white-space:normal;
    line-height:1.35;
    min-height:52px;
    padding:6px 12px;
    border-radius:var(--r);
  }
  .price-jump__t{
    display:block;
    flex:1;
    min-width:0;
    text-wrap:pretty; /* balance だと「お持ち込み｜の受入時間」と助詞が行頭に来る */
  }
  .price-jump__t .price-jump__n{
    display:block; /* 件数は名前の下の行に（「2件」だけが次の行に落ちる形をなくし、札の形を 1 つに） */
    margin-left:0;
    white-space:nowrap;
  }
  .price-grp{
    --ix:18px;
    --iy:18px;
    --gp:14px;
    border-left-width:8px;
  }
  .rule-scale__bar{
    font-size:var(--fs-sm);
  }
  .rule-scale__seg{
    flex-direction:column;
    padding:.4em .6em;
  }
  .rule-scale__seg>span+span{
    margin-left:0;
  }
  .rule-calc__q{
    flex:1 0 100%;
  }
  .rule-calc__t{
    margin-left:0;
  }
  .rule-cards,
  .rule-cards--2{
    grid-template-columns:1fr;
  }
  .price-grp .tbl-wrap{
    border-top:0;
  }
  .price-grp .ptbl tr{
    padding:var(--is) var(--ix);
    border-top:var(--edge-top) solid var(--grp);
  }
  .price-lead{
    --ix:18px;
    grid-template-columns:1fr;
    padding:16px var(--ix) 16px calc(var(--ix) - var(--edge) + 1px);
  }
  .price-lead__txt,
  .price-lead__upd{
    grid-column:1;
    grid-row:auto;
  }
  .price-lead__tax{
    font-size:var(--fs-lg);
  }
  .price-jump a{
    padding:0 14px;
    font-size:var(--fs-sm);
  }
  .price-sec{
    margin-top:36px;
  }
  .price-sec__h{
    font-size:var(--fs-lg);
  }
  /* カード: 1 段目に品名（左）と金額（右）、2 段目に備考。単位は金額の下に小さく */
  .ptbl tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px 10px;
    align-items:start;
    padding:12px 14px;
    margin-bottom:8px;
    border-radius:var(--r);
  }
  .ptbl th[scope="row"]{
    grid-column:1;
    grid-row:1;
    padding:0;
    background:transparent;
    font-size:var(--fs-body);
  }
  .ptbl td,
  .tbl-wrap .ptbl td{
    display:block;
    padding:0; /* 06-tables の .tbl-wrap .tcard td（項目名の分の左余白）より強く。備考のセルが右にずれないように（再々採点 SP X2） */
  }
  .ptbl td::before{
    content:none;
  }
  .ptbl td.ptbl__u{
    display:none;
  }
  .ptbl td.ptbl__p{
    grid-column:2;
    grid-row:1;
    width:auto;
    text-align:right;
    line-height:1.35;
  }
  .ptbl__yen,
  .ptbl__per{
    display:inline-block;
    white-space:nowrap;
  }
  .ptbl__per{
    min-width:2.2em;
    text-align:left;
    margin-left:.2em;
    font-size:var(--fs-xs);
    font-weight:400;
    color:var(--muted);
  }
  .ptbl td.ptbl__n{
    grid-column:1/-1;
    font-size:var(--fs-sm);
    color:var(--muted);
    padding-top:6px;
    margin-top:4px;
    border-top:1px dashed var(--line);
  }
  .ptbl td.ptbl__n.is-empty{
    display:none;
  }
  .ptbl tbody tr:hover td{
    background:transparent;
  }
  .price-card{
    --ix:18px;
    --iy:24px;
  }
  .price-notes__list li{
    font-size:var(--fs-body);
  }
}
/* 幅が特に狭いスマホ（≦400px）では、金額を品目名の下の行（右寄せ）に回し、品目名に横幅いっぱいを使わせる。
   品目名・カードの名前が細い列で 1〜2 文字ずつ折れるのを防ぐ（SP #6・#7） */
@media (max-width:400px){
  .ptbl tr{
    grid-template-columns:minmax(0,1fr);
  }
  .ptbl td.ptbl__p{
    grid-column:1;
    grid-row:2;
  }
}
@media (prefers-reduced-motion:reduce){
  .price-jump a,
  .price-jump a::after,
  .ptbl tbody tr{
    transition:none;
  }
}
/* 320〜400px：積込のカードの札（運搬費あり／なし）は、題の下の行に置く（題が 4 行に詰まらないように。再採点 SP N11） */
@media (max-width:400px){
  .rule-card__top{
    flex-direction:column;
    gap:6px;
  }
}
/* 320〜400px：ジャンプの札の内側の余白を詰め、「お持ち込みの」を 1 行に収める（助詞が行頭に来ないように） */
@media (max-width:400px){
  .price-jump a{
    padding-inline:10px 8px;
    gap:.25em;
  }
  /* お持ち込みできない時間の箱：左右の余白を詰め、340px でも「お持ち込みいただけません。」を 1 行に（3 行に折れないように。再採点4 SP-A Z2）。
     320px は箱の中に 13 字が入らないので「お持ち込み｜いただけません。」の文節で折れる */
  .price-hours__stop{
    padding-inline:14px;
  }
}
/* 339px 以下：税抜の 1 行は、本文の大きさにして「金額はすべて税抜です｜（消費税は別途）。」の 2 行に（「税抜です」だけの短い行を作らない。再採点4 SP-A Z1 の後） */
@media (max-width:339px){
  .price-lead__tax{
    font-size:var(--fs-body);
  }
}
/* 13-page-service：事業別のサービスページ（/industrial-waste・/general-waste・/medical-waste）と、/corporate の入口のカード（2026-10-26 新設）。
   色・文字の段・角丸・線の太さは 01-base のトークンだけを使う（直書きしない）。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */

/* ---- 範囲の早見（SubHero の下端に重ねる白い帯。許可・地域・品目の数・当社の役割）
   上端に 3 事業の切り替えの札（フォルダの見出しの形）。今のページの札だけ白く、上線（トーン）を持ち、下の帯とつながる。
   札はヒーローの地の上に出るので、ヒーローの下の余白を札の高さだけ足す（:has。対応しないブラウザでも札がボタンに触れない余白は残る） ---- */
.sub-hero:has(+ .svc-facts-wrap) .wrap{
  padding-bottom:104px;
}
.svc-facts-wrap{
  position:relative;
  z-index:3;
  margin-top:-80px;
}
.svc-facts-wrap + .section{
  padding-top:72px;
}
.svc-switch{
  display:flex;
  gap:6px;
  position:relative;
  z-index:1;
}
.svc-switch__a{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  min-height:46px;
  padding:6px 20px 6px 14px;
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1.35;
  color:var(--deep-d);
  text-decoration:none;
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.svc-switch__a:hover{
  background:#fff;
  color:var(--navy);
}
.svc-switch__a:focus-visible{
  outline-offset:-4px;
}
.svc-switch__a.is-on{
  background:#fff;
  color:var(--navy);
  border-top:var(--edge-top) solid var(--tone);
  margin-bottom:-1px;
  padding-bottom:7px;
}
.svc-switch__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--blue-wash);
  color:var(--deep-d);
}
.svc-switch__a.is-on .svc-switch__ico{
  background:var(--tone);
  color:#fff;
}
.svc-switch__ico svg{
  width:19px;
  height:19px;
}
.svc-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:0 var(--r) var(--r) var(--r);
  box-shadow:0 14px 30px -22px rgba(6,34,70,.45);
}
.svc-facts>div{
  padding:18px 22px 20px;
  min-width:0;
}
.svc-facts>div + div{
  border-left:1px solid var(--line);
}
.svc-facts dt{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--muted);
  letter-spacing:.04em;
}
.svc-facts dd{
  margin:0;
  display:grid;
  gap:2px;
}
.svc-facts b{
  font-size:var(--fs-h3);
  line-height:var(--lh-head);
  color:var(--navy);
  letter-spacing:.02em;
}
.svc-facts dd span{
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.6;
}

/* ---- /corporate の入口のカード（3 事業） ---- */
.svc-grid{
  list-style:none;
  margin:0 0 8px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
/* 3 枚の札・題・説明・範囲・リンクの高さを subgrid でそろえる（題の補足や札の 2 行で、範囲の位置がずれないように） */
.svc-grid>li{
  display:grid;
  grid-row:span 5;
  grid-template-rows:subgrid;
  min-width:0;
}
.svc-card{
  position:relative;
  display:grid;
  grid-row:span 5;
  grid-template-rows:subgrid;
  row-gap:0;
  justify-items:start;
  align-content:start;
  width:100%;
  text-decoration:none;
  color:var(--ink);
  background:#fff;
  padding:28px 28px 26px;
  border:1px solid var(--line);
  border-top:var(--edge-top) solid var(--deep);
  border-radius:var(--r);
  transition:background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);
}
.svc-card:hover{
  background:var(--paper);
  transform:translateY(-4px);
}
.svc-card__ico{
  position:absolute;
  top:22px;
  right:22px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--blue-wash);
  color:var(--deep-d);
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.svc-card__ico svg{
  width:30px;
  height:30px;
}
.svc-card:hover .svc-card__ico{
  background:var(--deep);
  color:#fff;
}
.svc-card__tag{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--muted);
  letter-spacing:.04em;
  padding-right:64px;
  align-self:end;
}
.svc-card__h{
  font-size:var(--fs-h3);
  color:var(--navy);
  margin:.25em 0 .4em;
  line-height:var(--lh-head);
}
.svc-card__h small{
  display:block;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--deep-d);
}
.svc-card p{
  color:var(--muted);
  margin:0 0 1em;
}
.svc-card__area{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--navy);
  background:var(--mist);
  border-radius:var(--r-xs);
  padding:.25em .8em;
  margin:0 0 1.1em;
  align-self:end;
}
.svc-card__ak{
  font-size:var(--fs-xs);
  color:var(--deep-d);
  letter-spacing:.06em;
}
.svc-card__go{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-weight:700;
  color:var(--deep);
  border-bottom:2px solid currentColor;
  padding-bottom:.1em;
  align-self:end;
}
.svc-card__go::after{
  content:"→";
  transition:transform var(--t-enter) var(--ease-out);
}
.svc-card:hover .svc-card__go::after{
  transform:translateX(5px);
}

/* ---- /corporate の各節の「詳しく」リンク（カードの下端） ---- */
.card .card-go{
  display:inline-block;
  margin-top:.8em;
  font-weight:700;
  color:var(--deep);
}
.card .card-go::after{
  content:" →";
}

/* ---- 対象の施設（医療） ---- */
.svc-who{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 24px;
}
.svc-who li{
  border-top:2px solid var(--tone);
  padding:14px 4px 18px;
}
.svc-who b{
  display:block;
  font-size:var(--fs-lg);
  color:var(--navy);
}
.svc-who span{
  display:block;
  font-size:var(--fs-sm);
  color:var(--muted);
}

/* 区分の表（医療）の感染性の 2 行の左の印は、ほかのページの表と形をそろえるため外した（2026-10-27 独立点検） */
.svc-kinds + *,
.tbl-wrap + .tbl-wrap{
  margin-top:24px;
}

/* ---- 品目の表の「お受けできるか」（店舗・会社のごみ） ---- */
.svc-st{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-weight:700;
  color:var(--st);
  white-space:nowrap;
}
.svc-st .smark{
  width:1.05em;
  height:1.05em;
  flex:none;
}

/* ---- 箇条書き・お見積りの箱 ---- */
.svc-points{
  margin-top:22px;
}
.svc-ask{
  background:#fff;
  border:1px solid var(--line);
  border-left:var(--edge) solid var(--tone);
  border-radius:var(--r);
  padding:22px 26px 12px;
}
.section--tint .svc-ask{
  background:#fff;
}
.section:not(.section--tint) .svc-ask{
  background:var(--paper);
  border-color:var(--paper);
  border-left-color:var(--tone);
}
.svc-ask__h{
  margin:0 0 .4em;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--tone-ink);
  letter-spacing:.06em;
}
.svc-ask ul{
  list-style:none;
  margin:0;
  padding:0;
}
.svc-ask li{
  display:grid;
  grid-template-columns:minmax(7.5em,auto) minmax(0,1fr);
  gap:4px 18px;
  align-items:baseline;
  padding:.7em 0;
  border-top:1px solid var(--line);
}
/* 項目名の幅を固定して、説明の書き出しを全行・全ページでそろえる（一番長い項目名「廃棄物の種類と量」が 1 行に収まる幅。2026-10-27 依頼者：全ページ統一） */
@media (min-width:761px){
  .svc-ask li{
    grid-template-columns:9.5em minmax(0,1fr);
  }
}
.svc-ask li:first-child{
  border-top:0;
}
.svc-ask b{
  color:var(--navy);
}
.svc-ask span{
  color:var(--muted);
  font-size:var(--fs-sm);
}

/* ---- 委託のしくみ（医療機関 → 当社 → 処分業者 と、2 つの契約・マニフェスト） ---- */
.consign{
  margin:0;
}
.consign__flow{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:56px;
}
.consign__node{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-top:var(--edge-top) solid var(--navy);
  border-radius:var(--r);
  padding:20px 22px 22px;
  min-width:0;
}
.consign__node--us{
  background:var(--mist);
  border-color:var(--blue-line);
  border-top-color:var(--deep);
}
/* ノードの間の矢印（運ぶ向き） */
.consign__node:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-44px;
  width:32px;
  height:2px;
  background:var(--deep);
}
.consign__node:not(:last-child)::before{
  content:"";
  position:absolute;
  top:calc(50% - 5px);
  right:-46px;
  width:10px;
  height:10px;
  border-top:2px solid var(--deep);
  border-right:2px solid var(--deep);
  rotate:45deg;
}
.consign__k{
  display:block;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--deep-d);
  letter-spacing:.08em;
}
.consign__node b{
  display:block;
  font-size:var(--fs-h3);
  color:var(--navy);
  line-height:var(--lh-head);
  margin:.1em 0 .3em;
}
.consign__node span:not(.consign__k):not(.consign__ico){
  display:block;
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.65;
}
/* 契約・マニフェストは、ノードの下に「かかる範囲」を括弧の線で示す（収集運搬の契約＝左 2 つ、処分の契約・マニフェスト＝3 つ全部） */
.consign__deals{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 56px;
}
/* 1 つの契約＝かかる範囲の下に引く括弧（両端が上へ立つ線）と、中央から下ろした短い線の先の札 */
.consign__deal{
  --c:var(--deep);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:30px;
  text-align:center;
}
.consign__deal::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:14px;
  border:2px solid var(--c);
  border-top:0;
  border-radius:0 0 6px 6px;
}
.consign__deal::after{
  content:"";
  position:absolute;
  top:14px;
  left:calc(50% - 1px);
  width:2px;
  height:16px;
  background:var(--c);
}
.consign__deal--a{
  grid-column:1/3;
}
.consign__deal--b{
  --c:var(--navy);
  grid-column:1/4;
}
.consign__deal--m{
  --c:var(--muted-2);
  grid-column:1/4;
}
.consign__deal--m::before{
  border-style:dashed;
}
.consign__deal b,
.consign__deal span{
  display:block;
}
.consign__deal b{
  color:var(--navy);
  background:#fff;
  border:1px solid var(--c);
  border-radius:999px;
  padding:.2em 1.1em;
  line-height:1.5;
}
.consign__deal--a b{
  background:var(--mist);
}
.consign__deal--m b{
  border-style:dashed;
}
.consign__deal span{
  margin-top:.35em;
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.6;
}
/* 出てくるとき：矢印が左から伸び、括弧が中央から左右へ開く（範囲を示す動き。0.25 秒・ease-out） */
.reveal-on .consign .consign__node:not(:last-child)::after{
  transform-origin:left center;
  transition:transform var(--t-enter) var(--ease-out) .1s;
}
.reveal-on .consign .consign__node:not(:last-child)::before{
  transition:opacity var(--t-fast) var(--ease-out) .3s;
}
.reveal-on .consign .consign__deal::before{
  transition:clip-path var(--t-enter) var(--ease-out) .15s;
}
.reveal-on .consign:not(.in) .consign__node:not(:last-child)::after{
  transform:scaleX(0);
}
.reveal-on .consign:not(.in) .consign__node:not(:last-child)::before{
  opacity:0;
}
.reveal-on .consign:not(.in) .consign__deal::before{
  clip-path:inset(0 50% 0 50%);
}
.consign figcaption{
  margin-top:20px;
}

@media (max-width:980px){
  .svc-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .svc-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .svc-facts>div:nth-child(3){
    border-left:0;
  }
  .svc-facts>div:nth-child(n+3){
    border-top:1px solid var(--line);
  }
  .svc-who{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px){
  .sub-hero:has(+ .svc-facts-wrap) .wrap{
    padding-bottom:92px;
  }
  .svc-facts-wrap{
    margin-top:-74px;
  }
  .svc-facts-wrap + .section{
    padding-top:52px;
  }
  /* 札は 3 等分。名前は 2 行まで折り返し、絵は小さく上に */
  .svc-switch{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }
  .svc-switch__a{
    flex-direction:column;
    justify-content:center;
    gap:2px;
    min-height:58px;
    padding:6px 6px 6px;
    font-size:var(--fs-xs);
    text-align:center;
  }
  .svc-switch__a.is-on{
    padding-bottom:7px;
  }
  /* 「店舗・会社のごみ」は「店舗・／会社のごみ」で折る（「ごみ」だけが次の行に残らないように） */
  .svc-switch__a--general .svc-switch__t{
    max-width:5.4em;
  }
  .svc-switch__ico{
    width:22px;
    height:22px;
    background:transparent;
  }
  .svc-switch__a.is-on .svc-switch__ico{
    background:transparent;
    color:var(--tone);
  }
  .svc-switch__ico svg{
    width:20px;
    height:20px;
  }
  .svc-facts{
    border-radius:0 0 var(--r) var(--r);
  }
  .svc-facts>div{
    padding:14px 16px 16px;
  }
  .svc-card{
    padding:24px 22px 22px;
  }
  /* 委託のしくみ：縦に並べ、矢印は下向き。契約・マニフェストは左線の箱にして、かかる相手を文で示す */
  .consign__flow{
    grid-template-columns:minmax(0,1fr);
    gap:40px;
  }
  .consign__node:not(:last-child)::after{
    top:auto;
    bottom:-32px;
    right:auto;
    left:calc(50% - 1px);
    width:2px;
    height:24px;
  }
  .consign__node:not(:last-child)::before{
    top:auto;
    bottom:-34px;
    right:auto;
    left:calc(50% - 5px);
    rotate:135deg;
  }
  .consign__deals{
    grid-template-columns:minmax(0,1fr);
    margin-top:24px;
    gap:10px;
  }
  .consign__deal,
  .consign__deal--a,
  .consign__deal--b,
  .consign__deal--m{
    grid-column:auto;
    justify-content:flex-start;
    align-items:flex-start;
    text-align:left;
    flex-direction:column;
    padding:10px 16px;
    border:1px solid var(--line);
    border-left:var(--edge) solid var(--deep);
    border-radius:var(--r);
  }
  .consign__deal--b{
    border-left-color:var(--navy);
  }
  .consign__deal--m{
    border-left-style:dashed;
    border-left-color:var(--muted-2);
  }
  .consign__deal::before,
  .consign__deal::after{
    content:none;
  }
  .consign__deal b,
  .consign__deal--a b,
  .consign__deal--m b{
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
  }
  .consign__deal span{
    margin-top:.1em;
  }
  .reveal-on .consign .consign__node:not(:last-child)::after{
    transform-origin:center top;
  }
  .reveal-on .consign:not(.in) .consign__node:not(:last-child)::after{
    transform:scaleY(0);
  }
  .svc-ask{
    padding:18px 18px 8px;
  }
  .svc-ask li{
    grid-template-columns:minmax(0,1fr);
  }
}
/* スマホ：早見は 1 列。文字を一段小さくし、余白を詰めて縦に伸びすぎないように（見出しは語の途中で割らないため、横に並べず上に置く） */
@media (max-width:560px){
  .svc-facts{
    grid-template-columns:minmax(0,1fr);
  }
  .svc-facts>div{
    padding:11px 16px 12px;
  }
  .svc-facts>div + div{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .svc-facts dt{
    font-size:var(--fs-xs);
    line-height:1.5;
  }
  .svc-facts b{
    font-size:var(--fs-lg);
  }
  .svc-facts dd span{
    font-size:var(--fs-xs);
    line-height:1.55;
  }
}
@media (max-width:420px){
  .svc-who{
    gap:0 16px;
  }
  .svc-who li{
    padding:12px 2px 14px;
  }
  .svc-who b{
    font-size:var(--fs-body);
  }
  .svc-who span{
    font-size:var(--fs-xs);
    line-height:1.55;
  }
}
@media (prefers-reduced-motion:reduce){
  .svc-card,
  .svc-card__ico,
  .svc-card__go::after,
  .svc-switch__a,
  .reveal-on .consign .consign__node::after,
  .reveal-on .consign .consign__node::before,
  .reveal-on .consign .consign__deal::before{
    transition:none;
  }
  .reveal-on .consign:not(.in) .consign__node:not(:last-child)::after{
    transform:none;
  }
  .reveal-on .consign:not(.in) .consign__node:not(:last-child)::before{
    opacity:1;
  }
  .reveal-on .consign:not(.in) .consign__deal::before{
    clip-path:none;
  }
  .svc-card:hover{
    transform:none;
  }
}

/* ---- 写真の帯（ServicePhotos.astro。2026-10-26 独立監査 A・C 軸）
   札（figcaption）はトップの会社の写真（.co__photo）と同じ紺の札。角丸・地の色もトークンだけ。
   'lead'＝左に大きい 1 枚（施設）＋右に 2 枚（車両）／'pair'＝2 枚／'wide'＝横長の 1 枚 ---- */
.svc-photos{
  display:grid;
  gap:16px;
  margin-top:40px;
}
.svc-photos--lead{
  grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
}
.svc-photos--lead .svc-photo:first-child{
  grid-row:1/3;
  aspect-ratio:1500/1016;
}
.svc-photos--pair{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.svc-photos--pair .svc-photo{
  aspect-ratio:16/9;
}
.svc-photos--wide .svc-photo{
  aspect-ratio:1160/400;
}
.svc-photo{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--surface-2);
  min-height:0;
}
.svc-photo picture,
.svc-photo img{
  display:block;
  width:100%;
  height:100%;
}
.svc-photo img{
  object-fit:cover;
}
/* 切り抜きの車両（共通の背景に載せた画像）は、車体が切れないように全体を見せる */
.svc-photo--cut{
  background:#E9EEF3;
}
.svc-photo--cut img{
  object-fit:contain;
}
.svc-photo figcaption{
  position:absolute;
  left:0;
  bottom:0;
  z-index:2;
  max-width:calc(100% - 24px);
  padding:.45em 1em;
  background:var(--navy);
  color:#fff;
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1.5;
  border-radius:0 var(--r-xs) 0 0;
}

/* ---- 注記を短く分けた一覧（※ を行頭に下げて、2 行目以降は字下げ） ---- */
ul.note-list{
  list-style:none;
  padding:0;
}
ul.note-list li{
  padding-left:1.5em;
  text-indent:-1.5em;
}
ul.note-list li + li{
  margin-top:.35em;
}

/* ---- 委託のしくみの絵（ノードの左上の丸。分別表と同じ線のアイコン） ---- */
.consign__ico{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:12px;
  border-radius:50%;
  background:var(--blue-wash);
  color:var(--deep-d);
}
.consign__node--us .consign__ico{
  background:var(--deep);
  color:#fff;
}
.consign__ico svg{
  width:28px;
  height:28px;
}

@media (max-width:980px){
  .svc-photos--lead{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
  }
  .svc-photos--lead .svc-photo:first-child{
    grid-column:1/3;
    grid-row:auto;
  }
  .svc-photos--lead .svc-photo:not(:first-child){
    aspect-ratio:16/9;
  }
}
@media (max-width:760px){
  .svc-photos{
    gap:10px;
    margin-top:28px;
  }
  .svc-photos--wide .svc-photo{
    aspect-ratio:16/9;
  }
  .svc-photo figcaption{
    font-size:var(--fs-xs);
    padding:.4em .8em;
  }
  /* 委託のしくみ（縦）：絵は題の左に小さく */
  .consign__node{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    column-gap:14px;
  }
  .consign__ico{
    grid-row:1/4;
    width:40px;
    height:40px;
    margin:2px 0 0;
  }
  .consign__ico svg{
    width:24px;
    height:24px;
  }
}
@media (max-width:560px){
  .svc-photos--pair{
    grid-template-columns:minmax(0,1fr);
  }
}

/* 事業の切り替えの札：「店舗・会社のごみ」は割らない語の組（scripts/nobreak.mjs）だが、スマホの札の中だけは「店舗・／会社のごみ」で折る */
@media (max-width:760px){
  .svc-switch__t span.nwa{
    white-space:normal!important;
  }
}

/* ==== 事業ごみの 3 ページ（産業廃棄物・店舗会社のごみ・医療系廃棄物）で共通の形（2026-10-27 デモ：ブランチ demo-medical。もとは医療ページだけの 13-page-medical.css） ==== */
/* 前の節と同じ地の色で続ける節（上の余白を 0 にして、1 つの帯に見せる）。
   背景の白と薄い灰を交互にし「よくあるご質問」を薄い灰にするため、節の数の偶奇を合わせる */
.section--join{
  padding-top:0;
}

/* ---- 関連するご案内（ServiceRelated）：2 つの組を上下に積み、組の中を横に並べる（2026-10-27 依頼者：医療ページの形を事業ごみの 3 ページすべてに） ----
   共通の形（左右 2 列の縦の一覧）は、左 3 件・右 4 件で行の高さがそろわず、左下が空く。
   組ごとに 1 段の横並び（上線のカード）にして、段の中で高さをそろえる */
.scenes--rows{
  grid-template-columns:minmax(0,1fr);
  gap:44px;
}
.scenes--rows ul{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:0 20px;
  border-top:0;
}
.scenes--rows li{
  display:flex;
  min-width:0;
}
.scenes--rows .scene{
  flex:1;
  grid-template-rows:auto 1fr;
  align-items:start;
  align-content:start;
  gap:6px 12px;
  padding:18px 8px 20px 2px;
  border-top:2px solid var(--deep);
  border-bottom:1px solid var(--line);
}
.scenes--rows .scene:hover{
  padding-left:10px;
  padding-right:0;
}
/* 題名は句のまとまりで折るが、句が欄より長いとき（感染性廃棄物処理マニュアル…）は句の途中でも折って、隣のカードに重ならないようにする */
.scenes--rows .scene b{
  min-width:0;
  line-height:1.45;
  overflow-wrap:anywhere;
}
/* 説明は矢印の列の下まで使う（狭いカードで 3 行に折れないように）。矢印は題名の 1 行目にそろえる */
.scenes--rows .scene span{
  grid-column:1/-1;
  line-height:1.7;
}
.scenes--rows .scene::after{
  grid-row:1;
  align-self:start;
  line-height:1.45;
  font-size:var(--fs-lg);
}
@media (max-width:980px){
  .scenes--rows{
    gap:36px;
  }
  /* タブレット・スマホは、共通どおり縦の一覧（上に 1 本の線）。題名が 2 行になるときの行間だけ詰める */
  .scenes--rows ul{
    display:block;
    border-top:2px solid var(--deep);
  }
  .scenes--rows li{
    display:block;
  }
  .scenes--rows .scene{
    grid-template-rows:none;
    align-items:center;
    gap:2px 14px;
    padding:16px 6px;
    border-top:0;
  }
  .scenes--rows .scene:hover{
    padding-left:14px;
  }
  .scenes--rows .scene span{
    grid-column:1;
  }
  .scenes--rows .scene::after{
    grid-row:1/3;
    align-self:center;
    font-size:inherit;
  }
}

/* 14-print：印刷。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
@media print{
  .site-header,
  .demo-bar,
  .mbar,
  .site-footer,
  .sub-hero .crumbs,
  .srt-panel,
  .actions,
  .section--desk,
  .skip{
    display:none!important;
  }
  body{
    font-size:12px;
  }
  .section{
    padding:16px 0;
  }
  .rv{
    opacity:1!important;
    transform:none!important;
  }
  /* 分別表：切り替えで隠した方の表も、印刷では両方出す。業種で見る（折りたたみ）は出さない */
  .srt-view[hidden],
  .srt-group[hidden],
  .srt-row[hidden],
  .srt-cat[hidden]{
    display:revert!important;
  }
  .srt-view + .srt-view{
    margin-top:24px!important;
    break-before:page;
  }
  .srt-bytype{
    display:none!important;
  }
  .srt-cats{
    grid-template-columns:repeat(2,1fr);
  }
  .srt-row,
  .srt-cat{
    break-inside:avoid;
  }
  .tbl-wrap{
    overflow:visible;
  }
  .sub-hero__media,
  .sub-hero--photo::after{
    display:none;
  }
  .sub-hero--photo,
  .sub-hero--photo h1,
  .sub-hero--photo p{
    background:none;
    color:#000;
    text-shadow:none;
  }
}
/* 15-utilities：補助クラス：余白・折り返しなど、最後に効かせるもの。
   ※ 同じ要素・同じ性質に当たる規則は、後ろに書いたものが勝つ。順序を入れ替えるときは注意。 */
.note-sm{
  font-size:var(--fs-sm);
  color:var(--muted);
  max-width:44em;
}
.pt56{
  padding-top:56px;
}
.sec-head--mb28{
  margin-bottom:28px;
}
.sec-head--mb0{
  margin-bottom:0;
}
.wrap--mt32{
  margin-top:32px;
}
.field--mt{
  margin-top:14px;
}
.a-1rem{
  font-size:var(--fs-body);
  display:inline-block;
  padding:10px 4px;
  margin:-10px -4px;
}
/* 押したときの反応（全ページ共通。2026-10-22 再採点 PC F・SP N18）。
   ボタン・カードのリンク・電話を押している間だけ、1px 沈めて少し暗くする（0.08 秒）。スマホでタップしたことが目で分かるように */
.btn,
a.dl-btn,
.entry,
.scene,
.desk__way--tel,
.price-jump a,
.srt-sw,
.mbar a,
.menu-btn{
  -webkit-tap-highlight-color:transparent;
}
.btn:active,
a.dl-btn:active,
.entry:active,
.scene:active,
.desk__way--tel:active,
.price-jump a:active,
.srt-sw:active,
.mbar a:active,
.menu-btn:active{
  transform:translateY(1px);
  filter:brightness(.94);
  transition:transform var(--t-press) var(--ease-out),filter var(--t-press) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  .btn:active,
  a.dl-btn:active,
  .entry:active,
  .scene:active,
  .desk__way--tel:active,
  .price-jump a:active,
  .srt-sw:active,
  .mbar a:active,
  .menu-btn:active{
    transform:none; /* 動きは止め、暗くするだけ */
  }
}

/* この PC のデモ（localhost）だけに出る「デモです」の帯（public/js/local-demo.js が入れる。本番には出ない） */
.local-demo-bar{
  padding:8px 16px;
  background:#c62828;
  color:#fff;
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1.5;
  text-align:center;
  letter-spacing:.04em;
}