@charset "UTF-8";
/*
 * エリアページ用スタイル
 * 既存テーマ（assets-lpb/css/new-top.css）で定義済みのトークンを使い、
 * 配色・角丸・影・書体は現行デザインをそのまま踏襲する。
 */

/* トークンは :root に置く。
   .hp-zone の中でしか定義されていないと、お客様の声・作業事例の一覧のように
   .hp-zone の外に置いた .hp-btn で var() が解決できず、
   border などの宣言がまるごと無効になってしまう。 */
:root {
  /* 配色はサイト共通の青に合わせる（ヘッダー帯・セクション背景と同系） */
  --hp-primary: #4c6cb3;
  --hp-primary-light: #e3f2fd;
  --hp-primary-dark: #3a5a95;
  --hp-accent: var(--accent, #ff6f00);
  --hp-text: var(--text-main, #2d3436);
  --hp-muted: var(--text-light, #636e72);
  --hp-bg: var(--bg-gray, #f4f6f8);
  --hp-line: #e2e8ea;
  --hp-radius: var(--radius-md, 12px);
  --hp-radius-lg: var(--radius-lg, 24px);
  --hp-shadow: var(--shadow-sm, 0 4px 6px -1px rgba(0,0,0,.05));
}

.hp-zone {
  font-family: var(--font-base, "Noto Sans JP", sans-serif);
  color: var(--hp-text);
  line-height: 1.9;
}

.hp-frame { width: min(1080px, 92vw); margin-inline: auto; }

/* ---------- セクション共通 ---------- */
.hp-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hp-sec:nth-of-type(even) { background: var(--hp-bg); }
.hp-sec__head {
  font-size: clamp(1.3rem, 3.6vw, 1.85rem);
  font-weight: 700; line-height: 1.5; margin: 0 0 .5em;
  padding-left: .7em; border-left: 6px solid var(--hp-primary);
  text-wrap: balance;
}
.hp-aside {
  font-size: clamp(1.05rem, 2.4vw, 1.2rem); font-weight: 700;
  margin: 2.2rem 0 .8rem; padding-bottom: .35em;
  border-bottom: 2px solid var(--hp-primary-light);
}
.hp-sec__intro { margin: 0 0 1.4rem; color: var(--hp-text); }
.hp-remark { font-size: .84rem; color: var(--hp-muted); margin: .9rem 0 0; line-height: 1.85; }
.hp-source { font-size: .8rem; color: var(--hp-muted); margin: .4rem 0 0; }
.hp-source a { color: var(--hp-primary-dark); }
.hp-sec__extra { margin: 1.8rem 0 0; text-align: center; }

/* ---------- ボタン ---------- */
.hp-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15em; min-height: 60px; padding: .7em 1.6em; border-radius: 999px;
  font-weight: 700; text-decoration: none; line-height: 1.35; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 10px 15px -3px rgba(0,0,0,.08)); }
.hp-btn:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: 3px; }
.hp-btn--tel  { background: var(--hp-accent); color: #fff; }
.hp-btn--line { background: #06c755; color: #fff; }
.hp-btn--form { background: var(--hp-primary); color: #fff; }
.hp-btn--ghost { background: #fff; color: var(--hp-primary-dark); border: 2px solid var(--hp-primary); }
.hp-btn__tag { font-size: .74rem; font-weight: 500; opacity: .95; }
.hp-btn__core  { font-size: 1.28rem; font-family: var(--font-en, "Poppins", sans-serif); letter-spacing: .02em; }

/* ---------- ① FV ---------- */
/* ① FV はトップページの .opening をそのまま使う（partial-area/01-fv.php） */

/* ---------- ② 実績タイル ---------- */
.hp-tiles {
  display: grid; gap: 1px; background: var(--hp-line);
  border: 1px solid var(--hp-line); border-radius: var(--hp-radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hp-tile { background: #fff; padding: 1.1rem 1rem 1rem; text-align: center; }
.hp-tile__k { font-size: .82rem; color: var(--hp-muted); margin-bottom: .3em; }
.hp-tile__v {
  font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 900; line-height: 1.2;
  color: var(--hp-primary-dark); font-variant-numeric: tabular-nums;
}
.hp-tile__u { font-size: .62em; margin-left: .12em; font-weight: 700; }
.hp-tile__n { font-size: .72rem; color: var(--hp-muted); margin-top: .35em; }

/* ---------- テーブル ---------- */
.hp-grid-outer { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0 0; }
.hp-grid {
  width: 100%; min-width: 480px; border-collapse: collapse; background: #fff;
  border: 1px solid var(--hp-line); border-radius: var(--hp-radius); overflow: hidden;
  font-size: .92rem;
}
.hp-grid caption { text-align: left; font-size: .84rem; color: var(--hp-muted); padding: .6rem .9rem; }
.hp-grid th, .hp-grid td { padding: .68rem .9rem; border-bottom: 1px solid var(--hp-line); text-align: left; vertical-align: middle; }
.hp-grid thead th { background: var(--hp-primary-light); color: var(--hp-primary-dark); font-weight: 700; white-space: nowrap; }
.hp-grid tbody tr:last-child th, .hp-grid tbody tr:last-child td { border-bottom: none; }
.hp-no { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-grid--compact { min-width: 320px; margin-top: 1.4rem; }
.hp-grid--compare .hp-ours { background: var(--hp-primary-light); font-weight: 700; }
.hp-strip-cell { width: 34%; min-width: 90px; }
.hp-strip { display: block; height: 10px; border-radius: 999px; background: var(--hp-primary); }
.hp-checked { font-size: .72rem; color: var(--hp-muted); }

/* ---------- ③ 事例 ---------- */
/* カード本体の装飾はトップページの .result-box を使う。ここではグリッドだけ持つ。 */
.hp-record-cols {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) { .hp-record-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp-record-cols .hp-result { min-width: 0; display: flex; }
.hp-record-cols .hp-result > .result-box { width: 100%; }
.hp-record__extra { margin: .9rem 0 0; font-size: .86rem; font-weight: 700; }
.hp-record__extra a { color: var(--hp-primary-dark); }

/* ---------- ⑤ 品目 ---------- */
.hp-row-set { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hp-line); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hp-row { background: #fff; padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.hp-row a { font-weight: 700; color: var(--hp-primary-dark); }
.hp-row__n { font-size: .84rem; color: var(--hp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- ⑥ エリア ---------- */
.hp-arealinks { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hp-arealinks a { display: inline-block; background: #fff; border: 1px solid var(--hp-primary); color: var(--hp-primary-dark); border-radius: 999px; padding: .3em 1em; font-size: .88rem; text-decoration: none; }
.hp-arealinks a:hover { background: var(--hp-primary); color: #fff; }
.hp-arealist { font-size: .9rem; color: var(--hp-muted); line-height: 2; margin: .6rem 0 0; }

/* ---------- ⑦ 地域事情 ---------- */
.hp-local__cols { margin-top: 2.4rem; }
.hp-local__box { text-align: left; padding: 34px 26px 26px; }
.hp-local__box h3 { font-size: 1.02rem; line-height: 1.55; margin: 0 0 .5em; text-align: center; }
.hp-local__b { margin: 0; font-size: .93rem; line-height: 1.9; color: var(--hp-text); }
.hp-local__box .hp-source { margin-top: .8em; }

/* ---------- ⑧ 流れ ---------- */
.hp-step__set { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); counter-reset: none; }
.hp-step__row { background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); padding: 1rem 1.1rem; }
.hp-step__n { display: inline-block; font-family: var(--font-en, "Poppins", sans-serif); font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--hp-primary); border-radius: 999px; padding: .12em .8em; margin-bottom: .5em; }
.hp-step__h { font-size: .98rem; font-weight: 700; margin: 0 0 .35em; }
.hp-step__b { font-size: .88rem; margin: 0; color: var(--hp-muted); }
.hp-defs { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.2rem; margin: 1.6rem 0 0; font-size: .9rem; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); padding: 1rem 1.2rem; }
.hp-defs dt { font-weight: 700; color: var(--hp-primary-dark); margin: 0; }
.hp-defs dd { margin: 0; }

/* ---------- ⑩ 声 ---------- */
.hp-feedback__cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.hp-feedback__row { background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); padding: 1.1rem 1.2rem; margin: 0; }
.hp-feedback__rating { font-family: var(--font-en, "Poppins", sans-serif); font-size: 1.3rem; font-weight: 700; color: var(--hp-accent); margin: 0 0 .4em; }
.hp-feedback__rating span { font-size: .6em; color: var(--hp-muted); }
.hp-feedback__body { font-size: .9rem; margin: 0 0 .6em; }
.hp-feedback__who { font-size: .82rem; color: var(--hp-muted); }

/* ---------- ⑪ スタッフ ---------- */
.hp-crew__cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 1.4rem; }
.hp-crew__row { background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); padding: 1rem; text-align: center; }
.hp-crew__row img { width: 100%; max-width: 130px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: .6em; }
.hp-crew__label { font-weight: 700; margin: 0 0 .2em; }
.hp-crew__meta { font-size: .82rem; color: var(--hp-muted); margin: 0; }

/* ---------- ⑫ FAQ ---------- */
.hp-qa__set { display: grid; gap: .6rem; }
.hp-qa__row { background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); overflow: hidden; }
.hp-qa__q { cursor: pointer; padding: .95rem 1.2rem; font-weight: 700; font-size: .96rem; line-height: 1.6; list-style: none; position: relative; padding-right: 3rem; }
.hp-qa__q::-webkit-details-marker { display: none; }
.hp-qa__q::after { content: "＋"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--hp-primary); font-weight: 700; }
.hp-qa__row[open] .hp-qa__q::after { content: "－"; }
.hp-qa__a { padding: 0 1.2rem 1.1rem; font-size: .92rem; color: var(--hp-text); }

/* ---------- ⑬ CTA ---------- */
.hp-contactblock { background: var(--hp-primary-light) !important; padding-bottom: 0; }
.hp-contactblock__intro { margin: 0 0 .5rem; text-align: center; }

/* ---------- /works/ ---------- */
/* カードの装飾はトップページと同じ .result-box 一式（assets-lpb/css/new-top.css）を使う。
   ここではグリッドの並びと、グリッド内で成立させるための調整だけを行う。 */
/* 絞り込みは見出しと同じく中央に置く */
.hp-results__filters {
  display: flex; flex-wrap: wrap; gap: .6rem .8rem;
  margin: 0 0 2rem; align-items: center; justify-content: center;
}
/* 見出しは他の固定ページと同じ section-header を使うため、余白だけ整える */
.hp-results .block-top { margin-bottom: 1.2rem; }
.hp-results__intro { text-align: center; }
.hp-results__filters select { padding: .5em .9em; border: 1px solid var(--hp-line); border-radius: 8px; font-size: .9rem; background: #fff; }
.hp-results__filters .hp-btn { min-height: 44px; padding: .4em 1.4em; }

.hp-results .hp-frame { width: min(1200px, 92vw); }
.hp-results__set {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 640px)  { .hp-results__set { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hp-results__set { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 記事要素そのものには装飾を付けない（装飾は中の .result-box が持つ） */
.hp-result { min-width: 0; scroll-margin-top: 90px; display: flex; }
.hp-result > .result-box { width: 100%; }

/* グリッド内で使うための調整 */
.hp-results .result-box { height: auto; }
.hp-results .result-box-top { flex-wrap: wrap; padding: 8px 12px; font-size: .82rem; line-height: 1.5; }
.hp-results .result-box-top .hp-result__date {
  margin-left: auto; font-family: var(--font-en, "Poppins", sans-serif);
  font-size: .72rem; font-weight: 500; opacity: .85; font-variant-numeric: tabular-nums;
}
.hp-results .result-pic-outer img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* コメント欄はトップと同じく、右下の担当者アイコンを吹き出しの尻尾が指す形にする */
.hp-results .result-crew-comment { padding-bottom: 28px; }
.hp-results .result-crew-comment-panel { font-size: .85rem; line-height: 1.85; padding: 16px 18px; }

.hp-results__extra { text-align: center; margin-top: 2rem; }
.hp-result.is-hidden { display: none; }

@media (max-width: 600px) {
    .hp-defs { grid-template-columns: 1fr; }
  .hp-defs dd { margin-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-btn { transition: none; }
  .hp-btn:hover { transform: none; }
}

/* ---------- 対応エリアの地図（トップページ） ---------- */
.zone-map-figure {
  /* セクション背景が淡い青のため、地図は白い面で囲んで境目をはっきりさせる */
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(31, 45, 61, .08);
  overflow: visible;
  padding: 1.6rem 1.4rem 1.2rem;
  text-align: center;
  max-width: 420px;
  margin-inline: auto;
}
.zone-map-figure .zone-map-pic { border-radius: 0; }

/* キャラクターは千葉県の右下にできる余白（太平洋側）に置く。
   位置は地図画像に対する割合で指定しているため、画面幅が変わっても
   同じ場所に留まる。地図の基準サイズは 1000x1312。 */
.zone-map-figure .zone-map-outer { position: relative; display: block; width: 100%; line-height: 0; }
.zone-map-mascot {
  position: absolute;
  left: 62%;
  top: 65%;
  width: 26%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 900px) {
  .zone-map-figure { padding: 1.2rem 1rem 1rem; }
  .zone-map-mascot { width: 28%; }
}
}
.zone-map-pic {
  width: 100%; height: auto; display: block;
  /* 画像の座標系は生成時の幅を基準にしているため、拡大縮小してもクリック位置がずれないよう
     スクリプト側で coords を再計算する（zf_area_map_script） */
}
.zone-map-pic area { cursor: pointer; }
.zone-map-remark {
  line-height: 1.6;
  display: flex; justify-content: center; align-items: center; gap: .45rem 1.1rem;
  flex-wrap: wrap; margin: .8rem 0 0; font-size: .82rem; color: #5c6b70;
}
.zone-map-legend { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: .3em; vertical-align: -2px; }
.zone-map-legend--on  { background: #4c6cb3; }
.zone-map-legend--off { background: #dfe5eb; }
@media (max-width: 900px) { .zone-map-figure { max-width: 320px; margin-top: 1.6rem; } }

/* ---------- ⑥ エリアページの市区町村地図 ---------- */
/* トップの日本地図とは縦横比が県ごとに違うため、キャラクターの位置は
   トップ固定値ではなく、地図の右下隅を基準にする。 */
/* 県ごとに地図の形が違うため、キャラクターは地図に重ねず、
   凡例と同じ高さの右端の余白に置く（陸地を隠さない）。 */
.hp-towns .zone-map-figure { position: relative; padding-bottom: 1.6rem; }
.hp-towns .zone-map-mascot { left: auto; top: auto; right: 10px; bottom: 6px; width: 74px; }
@media (max-width: 900px) { .hp-towns .zone-map-mascot { width: 58px; } }
.hp-towns .zone-map-remark { margin-bottom: 0; }
/* 画像を width:100% のまま伸縮させる（クリック領域の座標補正が幅基準のため）。
   県ごとに縦横比が違うので、全体の大きさは枠側で抑える。 */
.hp-towns .zone-map-figure { max-width: 460px; margin-left: auto; margin-right: auto; }
.hp-towns .hp-aside { margin-top: 2rem; }
.hp-towns .hp-grid-outer { margin-top: .8rem; }

/* ---------- ⑨ 自治体との比較（トップの comparison 装飾を使う） ---------- */
/* セクションの出し分けで並び順が変わり .hp-sec:nth-of-type(even) の
   グレー背景が当たることがあるため、比較セクションは白で固定する */
.hp-municipal { background: #fff !important; }
/* 見出しがトップ（「他社との比較」）より長いぶん、キャラクターが文字に重なる。
   見出しと吹き出しの間隔を広げて逃がす。 */
.hp-municipal .versus-head-core { margin-bottom: 100px; }
.hp-municipal .versus-subtitle { font-size: 1.05rem; padding: 13px 28px; }
.hp-municipal .versus-figure-pic { bottom: 74px; }
/* 3列なので項目名の列に幅を持たせて折り返しを減らす */
.hp-municipal .comp-th-row { width: 24%; }
/* 背景の大きな英字が出典つきの表に重なって読みにくいので、ここでは出さない */
.hp-municipal .versus-bg-copy { display: none; }

/* 青い背景の上に出典つきの表を置くため、白いカードで囲って可読性を保つ */
.hp-municipal .hp-municipal__panel {
  position: relative; z-index: 1;
  background: #fff; border-radius: var(--hp-radius);
  padding: 1.6rem 1.4rem 1.2rem; margin-top: 2rem; box-shadow: var(--hp-shadow);
}
.hp-municipal .hp-municipal__panel .hp-aside { margin-top: 0; }
.hp-municipal .versus-outer { position: relative; z-index: 1; }

/* ⑦ 特徴カードのアイコン。内容に合うイラストが無いためアイコンで代用している */
.hp-local__mark {
  width: 84px; height: 84px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--hp-primary-light);
  color: var(--hp-primary); font-size: 2.1rem;
}

/* ---------- よくある買取品 ---------- */
/* 並びで nth-of-type の背景が入れ替わるため白で固定し、前後のグレー帯と区切る */
.hp-buyback { background: #fff !important; }
.hp-buyback__intro { max-width: 760px; margin: 0 auto 2.4rem; text-align: center; text-wrap: pretty; }
.hp-buyback__cols {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem 1.4rem; grid-template-columns: 1fr;
}
/* 4件が端数なく並ぶように 1 → 2 → 4 列で切り替える */
@media (min-width: 640px)  { .hp-buyback__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hp-buyback__cols { grid-template-columns: repeat(4, 1fr); } }
.hp-buyback__card {
  position: relative; background: #fff; text-align: center;
  border: 1px solid var(--hp-line); border-top: 4px solid var(--hp-primary);
  border-radius: var(--hp-radius); box-shadow: var(--hp-shadow);
  padding: 2.4rem 1.2rem 1.3rem;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp-buyback__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 10px 15px -3px rgba(0,0,0,.08)); }
.hp-buyback__no {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  min-width: 58px; padding: .25em .7em .3em; border-radius: 0 0 10px 10px;
  background: var(--hp-primary); color: #fff; line-height: 1.1;
  font-family: var(--font-en, "Poppins", sans-serif); font-weight: 700; font-size: 1.15rem;
}
.hp-buyback__no small { font-size: .62em; margin-right: .15em; opacity: .9; }
.hp-buyback__mark {
  width: 84px; height: 84px; margin: .4rem auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--hp-primary-light);
  color: var(--hp-primary); font-size: 2.1rem;
}
.hp-buyback__title { font-size: 1.25rem; font-weight: 900; margin: 0 0 .5em; color: var(--hp-text); }
.hp-buyback__body { font-size: .9rem; color: var(--hp-muted); line-height: 1.85; margin: 0 0 1em; text-align: left; }
.hp-buyback__tags { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.hp-buyback__tags li {
  font-size: .78rem; font-weight: 700; color: var(--hp-primary-dark);
  background: var(--hp-primary-light); border-radius: 999px; padding: .2em .8em;
}
.hp-buyback__points {
  list-style: none; margin: 2rem auto 0; padding: 1rem 1.2rem; max-width: 900px;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center;
  background: var(--hp-bg); border-radius: var(--hp-radius);
}
.hp-buyback__points li { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .45em; }
.hp-buyback__points i { color: var(--hp-accent); }
.hp-buyback__note { text-align: center; }
@media (max-width: 600px) {
  .hp-buyback__intro { text-align: left; }
  .hp-buyback__points { flex-direction: column; align-items: flex-start; }
}
/* テーマ側の .rc p / ul リセットに余白を打ち消されるため、詳細度を上げて戻す */
.hp-zone .hp-buyback .hp-buyback__intro { margin: 0 auto 2.6rem; }
.hp-zone .hp-buyback .hp-buyback__body { margin: 0 0 1em; }
.hp-zone .hp-buyback .hp-buyback__tags { margin: auto 0 0; }
.hp-zone .hp-buyback .hp-buyback__points { margin: 2.4rem auto 0; }
.hp-zone .hp-buyback .hp-buyback__note { margin: 1rem 0 0; }

/* ---------- 回収した不用品のリサイクル ---------- */
/* 買取品セクションと同じカードの作りにそろえ、ステップ間を矢印でつなぐ */
/* 前後の「選ばれる理由」「実績」がグレーなので、白で区切る */
.hp-recycle { background: #fff !important; }
.hp-zone .hp-recycle .hp-recycle__intro { max-width: 760px; margin: 0 auto 2.6rem; text-align: center; text-wrap: pretty; }
.hp-zone .hp-recycle .hp-recycle__flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2.4rem 1.6rem; grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .hp-zone .hp-recycle .hp-recycle__flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hp-zone .hp-recycle .hp-recycle__flow { grid-template-columns: repeat(4, 1fr); } }
.hp-recycle__step {
  position: relative; background: #fff; text-align: center;
  border: 1px solid var(--hp-line); border-top: 4px solid var(--hp-primary);
  border-radius: var(--hp-radius); box-shadow: var(--hp-shadow);
  padding: 2.4rem 1.2rem 1.4rem;
}
/* 横並びのときだけ、次のカードへの矢印を出す */
@media (min-width: 1024px) {
  .hp-recycle__step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -1.25rem; transform: translateY(-50%);
    border-style: solid; border-width: 10px 0 10px 12px;
    border-color: transparent transparent transparent var(--hp-primary);
  }
}
.hp-recycle__no {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  min-width: 64px; padding: .25em .7em .3em; border-radius: 0 0 10px 10px;
  background: var(--hp-primary); color: #fff; line-height: 1.1;
  font-family: var(--font-en, "Poppins", sans-serif); font-weight: 700; font-size: 1.05rem;
}
.hp-recycle__no small { font-size: .62em; margin-right: .25em; opacity: .9; }
.hp-recycle__mark {
  width: 84px; height: 84px; margin: .4rem auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--hp-primary-light);
  color: var(--hp-primary); font-size: 2.1rem;
}
.hp-recycle__label {
  display: inline-block; font-size: .78rem; font-weight: 700; color: var(--hp-primary-dark);
  background: var(--hp-primary-light); border-radius: 999px; padding: .15em .9em; margin-bottom: .5em;
}
.hp-zone .hp-recycle .hp-recycle__title { font-size: 1.12rem; font-weight: 900; margin: 0 0 .5em; color: var(--hp-text); line-height: 1.5; text-wrap: balance; }
.hp-zone .hp-recycle .hp-recycle__body { font-size: .9rem; color: var(--hp-muted); line-height: 1.85; margin: 0; text-align: left; }
.hp-zone .hp-recycle .hp-recycle__band {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  max-width: 900px; margin: 2.4rem auto 0; padding: 1rem 1.2rem;
  background: var(--hp-bg); border-radius: var(--hp-radius);
  font-weight: 700; text-align: center;
}
.hp-recycle__band i { color: var(--hp-accent); font-size: 1.3rem; }
@media (max-width: 600px) {
  .hp-zone .hp-recycle .hp-recycle__intro { text-align: left; }
  .hp-zone .hp-recycle .hp-recycle__band { text-align: left; }
}
/* ---------- 対応しているサービス ---------- */
/* 買取品・リサイクルと同じカードの作り。本文が長いので 2 列までにする */
.hp-svc { background: #fff !important; }
.hp-zone .hp-svc .hp-svc__intro { max-width: 760px; margin: 0 auto 2.6rem; text-align: center; text-wrap: pretty; }
.hp-zone .hp-svc .hp-svc__cols { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .hp-zone .hp-svc .hp-svc__cols { grid-template-columns: repeat(2, 1fr); } }
.hp-svc__card {
  position: relative; background: #fff; display: flex; flex-direction: column;
  border: 1px solid var(--hp-line); border-top: 4px solid var(--hp-primary);
  border-radius: var(--hp-radius); box-shadow: var(--hp-shadow);
  padding: 2.4rem 1.5rem 1.4rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp-svc__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 10px 15px -3px rgba(0,0,0,.08)); }
.hp-svc__no {
  position: absolute; top: -4px; left: 1.5rem;
  min-width: 64px; padding: .25em .7em .3em; border-radius: 0 0 10px 10px;
  background: var(--hp-primary); color: #fff; line-height: 1.1; text-align: center;
  font-family: var(--font-en, "Poppins", sans-serif); font-weight: 700; font-size: 1.05rem;
}
.hp-svc__no small { font-size: .62em; margin-right: .25em; opacity: .9; }
.hp-svc__top { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.hp-svc__mark {
  flex: 0 0 72px; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--hp-primary-light);
  color: var(--hp-primary); font-size: 1.8rem;
}
.hp-svc__label {
  display: inline-block; font-size: .78rem; font-weight: 700; color: var(--hp-primary-dark);
  background: var(--hp-primary-light); border-radius: 999px; padding: .15em .9em; margin-bottom: .35em;
}
.hp-zone .hp-svc .hp-svc__title { font-size: 1.15rem; font-weight: 900; margin: 0; color: var(--hp-text); line-height: 1.5; text-wrap: balance; }
.hp-zone .hp-svc .hp-svc__body { font-size: .92rem; color: var(--hp-muted); line-height: 1.85; margin: 0 0 1rem; }
.hp-zone .hp-svc .hp-svc__link {
  margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: .4em;
  font-weight: 700; font-size: .9rem; color: var(--hp-primary-dark); text-decoration: none;
}
.hp-zone .hp-svc .hp-svc__link:hover { text-decoration: underline; }
.hp-zone .hp-svc .hp-svc__band {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  max-width: 900px; margin: 2.4rem auto 0; padding: 1rem 1.2rem;
  background: var(--hp-bg); border-radius: var(--hp-radius); font-weight: 700; text-align: center;
}
.hp-svc__band i { color: var(--hp-accent); font-size: 1.2rem; }
@media (max-width: 600px) {
  .hp-zone .hp-svc .hp-svc__intro, .hp-zone .hp-svc .hp-svc__band { text-align: left; }
  .hp-svc__card { padding: 2.4rem 1.1rem 1.2rem; }
  .hp-svc__mark { flex-basis: 60px; width: 60px; height: 60px; font-size: 1.5rem; }
}
/* ---------- 産業廃棄物収集運搬業の許可業者（事業者向け） ---------- */
/* 自治体の表と同じ .hp-grid を白いパネルで囲む。
   前のガイドは白、後ろのお客様の声は薄い青なので、どちらとも区切れるグレーにする */
.hp-sanpai { background: var(--hp-bg) !important; }
.hp-zone .hp-sanpai .hp-sanpai__intro { max-width: 820px; margin: 0 auto 1.2rem; text-align: center; text-wrap: pretty; }
.hp-zone .hp-sanpai .hp-sanpai__alert {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  max-width: 820px; margin: 0 auto 1.8rem; padding: .8rem 1.1rem;
  background: #fff4e5; border: 1px solid #ffd8a8; border-radius: var(--hp-radius);
  font-weight: 700; font-size: .95rem; color: var(--hp-text); text-align: center;
}
.hp-sanpai__alert i { color: var(--hp-accent); font-size: 1.15rem; }
.hp-sanpai__panel { background: #fff; border-radius: var(--hp-radius); padding: 1.4rem 1.4rem 1.1rem; box-shadow: var(--hp-shadow); }
.hp-zone .hp-sanpai .hp-grid-outer { margin-top: 0; }
.hp-grid--sanpai { min-width: 560px; }
.hp-grid--sanpai tbody th { white-space: nowrap; }
.hp-sanpai__tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-zone .hp-sanpai .hp-sanpai__notes { margin: 1rem 0 0; padding-left: 1.2em; font-size: .86rem; color: var(--hp-muted); line-height: 1.85; }
.hp-zone .hp-sanpai .hp-source { margin-top: .6rem; }
@media (max-width: 600px) {
  .hp-zone .hp-sanpai .hp-sanpai__intro, .hp-zone .hp-sanpai .hp-sanpai__alert { text-align: left; justify-content: flex-start; }
  .hp-sanpai__panel { padding: 1rem .8rem .9rem; }
}
/* リサイクルと対応サービスはどちらも白。並んだときは後ろのサービスを薄い青にして区切る */
.hp-recycle + .hp-svc { background: var(--hp-primary-light) !important; }

/* 買取品は白。直後の「よくある質問」が nth-of-type で白になる県があるので、グレーにそろえて区切る */
.hp-buyback + .hp-qa { background: var(--hp-bg) !important; }
/* その次の運営会社セクションも、岩手・秋田と同じ薄い青にそろえてグレーが続かないようにする */
.hp-buyback + .hp-qa + #crew { background: var(--hp-primary-light) !important; }