/* 成約価格ページ（/satei/）
 *
 * SWELL は見出しやリストに独自の装飾を当ててくる。
 * この軸は表とグラフが主役で、そこにテーマの飾りが乗ると読めなくなるため、
 * .zs の中だけ装飾を打ち消してから自前で組み直している。
 */

.zs {
  --ac:   #1b4f8a;   /* 見出し・数字・バー */
  --ac2:  #2f74bd;
  --ink:  #16202b;
  --ink2: #44525f;
  --ink3: #77848f;
  --line: #dfe3e8;
  --soft: #e6eef7;
  --bg:   #f5f7f9;
  --wh:   #fff;
  --warn: #b45309;
  font-feature-settings: "palt";
  color: var(--ink);
  max-width: 860px;
}

.zs * { box-sizing: border-box; }

/* --- テーマの見出し・リスト装飾を打ち消す --- */
.zs .hd h2,
.zs h3 {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  text-align: left !important;
}
.zs .hd h2::before, .zs .hd h2::after,
.zs h3::before, .zs h3::after { content: none !important; display: none !important; }

.zs .hd {
  border-left: 5px solid var(--ac);
  padding-left: 13px;
  margin: 0 0 16px;
}
.zs .hd h2 {
  font-size: clamp(18px, 4.6vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  letter-spacing: .01em;
}

.zs-sec { margin: 0 0 42px; }
.zs-sec > p { margin: 0 0 14px; line-height: 1.9; }

.zs-note {
  font-size: 13px;
  color: var(--ink2);
  background: var(--bg);
  border-radius: 6px;
  padding: 12px 14px;
  line-height: 1.8;
  margin: 12px 0 0;
}
.zs-note--warn {
  background: #fff8ed;
  border-left: 3px solid var(--warn);
  color: #6b4310;
}

/* ===== 数字カード ===== */
.zs-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 28px;
}
@media (min-width: 620px) {
  .zs-cards { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
.zs-card {
  background: var(--wh);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 12px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zs-card .l {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  letter-spacing: .02em;
  line-height: 1.4;
}
.zs-card .n {
  font-size: clamp(19px, 5vw, 23px);
  font-weight: 900;
  color: var(--ac);
  line-height: 1.15;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.zs-card .n small { font-size: .62em; font-weight: 800; margin-left: 1px; }
.zs-card .s {
  font-size: 10.5px;
  color: #93a0aa;
  line-height: 1.5;
  margin-top: auto;
}

/* ===== 表 ===== */
/* 狭い画面では表が横にはみ出す。スクロールできることを明示しないと
   右端の列が存在しないものとして読まれてしまう。 */
.zs-scrollhint {
  font-size: 11.5px;
  color: var(--ink3);
  margin: 0 0 6px !important;
}
.zs-scrollhint::after { content: " →"; }
@media (min-width: 760px) { .zs-scrollhint { display: none; } }

.zs-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wh);
}
.zs .zs-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 560px;
  font-size: 13px;
  margin: 0 !important;
}
.zs .zs-table th,
.zs .zs-table td {
  padding: 11px 13px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  line-height: 1.5;
  white-space: nowrap;
}
.zs .zs-table thead th {
  background: var(--soft);
  font-size: 11.5px;
  color: var(--ink2);
  font-weight: 700;
  letter-spacing: .03em;
}
.zs .zs-table tbody th {
  position: sticky;
  left: 0;
  background: var(--wh);
  font-weight: 700;
  font-size: 12.5px;
  border-right: 1px solid var(--line);
  z-index: 2;
}
.zs .zs-table tbody tr:last-child th,
.zs .zs-table tbody tr:last-child td { border-bottom: 0; }
.zs .zs-table tbody tr:nth-child(even) td { background: #fafbfc; }
.zs .zs-table .num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--ac);
}
.zs .zs-table tbody th a { color: var(--ac); text-decoration: none; font-weight: 700; }
.zs .zs-table tbody th a:hover { text-decoration: underline; }
.zs-table--index tbody th { min-width: 150px; }

/* ===== 横棒 ===== */
.zs-bars { display: flex; flex-direction: column; gap: 7px; }
.zs-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  background: var(--wh);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 13px;
}
@media (min-width: 560px) {
  .zs-bar { grid-template-columns: 180px 1fr 100px; align-items: center; gap: 12px; }
}
.zs-bar b { font-size: 13px; font-weight: 700; line-height: 1.4; }
.zs-bar .track {
  display: block;
  width: 100%;
  height: 10px;
  background: #e6eaee;
  border-radius: 99px;
  overflow: hidden;
  min-width: 60px;
}
.zs-bar .fill {
  display: block;
  height: 10px;
  min-width: 4px;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
  border-radius: 99px;
}
.zs-bar .v {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--ac);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 560px) { .zs-bar .v { text-align: right; } }

/* ===== 折れ線 ===== */
.zs-chart {
  margin: 0 0 12px;
  background: var(--wh);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px 4px;
}
/* viewBox の比率のまま伸縮させる。高さを固定すると中の文字が横に歪む。
   ただし幅なりに縮めると、狭い画面では文字が6px程度になって読めない。
   表と同じように最低幅を確保して、足りない分は横スクロールさせる。 */
.zs-chart {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.zs-chart svg {
  display: block;
  width: 100%;
  min-width: 520px;
  height: auto;
  aspect-ratio: 640 / 250;
}
.zs-chart figcaption {
  font-size: 11.5px;
  color: var(--ink3);
  text-align: center;
  padding: 2px 0 8px;
}

/* ===== チップ ===== */
.zs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zs-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--soft);
  color: var(--ac);
  border-radius: 4px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
}
.zs-chip b { font-size: 13.5px; font-weight: 800; }

/* ===== 関連リンク・入口 ===== */
.zs-links { display: flex; flex-direction: column; gap: 8px; }
.zs-links a {
  display: block;
  background: var(--wh);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 13px 15px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ac);
  text-decoration: none;
}
.zs-links a::after { content: " ›"; }
.zs-links a:hover { border-color: var(--ac); background: var(--soft); }

.zs-entries { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 32px; }
@media (min-width: 620px) { .zs-entries { grid-template-columns: 1fr 1fr; } }
.zs-entry {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--wh);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 18px;
  text-decoration: none;
  color: inherit;
}
.zs-entry b { font-size: 17px; font-weight: 800; color: var(--ac); }
.zs-entry span { font-size: 12.5px; color: var(--ink2); }
.zs-entry:hover { border-color: var(--ac); }

/* ===== 出典 ===== */
.zs-src { border-top: 1px solid var(--line); padding-top: 26px; }
.zs-src p { font-size: 13.5px; color: var(--ink2); }
.zs .zs-src .zika-list > li { font-size: 13px; color: var(--ink2); }

/* 一覧に自分の市区町村が無かった人向けの節。
   本文と同じ見た目だと読み飛ばされるので、面で囲んで気づかせる。 */
.zs-missing {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 20px 20px;
}
.zs-missing .hd { margin-bottom: 14px; }
.zs-missing > p { font-size: 14px; }
.zs-missing .zs-note { background: var(--wh); }
.zs-missing .zs-links { margin: 16px 0 0; }

/* 入口カードに画像を入れたとき。文字だけのときの余白と揃える */
.zs-entry--img { padding: 0; overflow: hidden; }
.zs-entry__body { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 18px; }

/* 金額に何が含まれるかの注意書き。読み飛ばされると誤解のもとなので目立たせる */
.zs-note--scope {
  background: #eef4fa;
  border-left: 3px solid var(--ac);
  color: var(--ink);
  font-size: 13.5px;
  margin: 0 0 26px;
}

/* 都道府県ページの考察。枠はSWELLのキャプションボックスに任せ、中身だけ整える */
.zs-insight{margin:0 0 22px}
.zs-insight .cap_box_ttl{font-size:15px;font-weight:700;letter-spacing:.02em}
.zs-insight .cap_box_content{padding:22px 24px 8px;background:#fff}
.zs-insight .cap_box_content p{margin:0 0 15px;line-height:1.95;font-size:15px}
.zs-insight strong{background:linear-gradient(transparent 58%,#ffe680 58%);font-weight:700}
.zs-insight__src{font-size:11px!important;color:#777;line-height:1.7!important}
@media(max-width:600px){
  .zs-insight .cap_box_ttl{font-size:13.5px}
  .zs-insight .cap_box_content{padding:16px 15px 4px}
  .zs-insight .cap_box_content p{font-size:14.5px;line-height:1.9}
}

/* もう一方の種別へ渡す吹き出し。表と次の節のあいだに置く */
.zs-cross{margin:22px 0 26px}
.zs-cross .zika-talk__say a{font-weight:700;text-decoration:underline}

/* --- 市区町村ページの独自ブロック --------------------------------- *
 * 紺一色だと読み手が飽きるので、節の役割ごとに色を分けている。
 *   青緑 = 要点 / 琥珀 = 判断が分かれるところ / 緑 = 用意する書類
 * 表が主役の節には箱を使わない。色を足しすぎると逆に読めなくなる。
 */
.zs .cap_box { margin: 1.2em 0 1.6em; }
/* 導入文の下は2remあるので、そこへ箱の上余白が重なると1行ぶん空きすぎる */
.zs .zika-dir__lead + .zs-lead { margin-top: -1.4rem; }
.zs .cap_box_content { border-radius: 0 0 6px 6px; background: #fff; }
.zs .zs-lead .cap_box_content p { margin: 0 0 .6em; line-height: 1.95; font-size: .95rem; }
.zs .zs-lead .cap_box_content p:last-child { margin-bottom: 0; }
.zs .zs-judge .cap_box_content { background: #fffdf8; }
.zs .zs-judge .cap_box_content p { margin: 0; line-height: 1.9; }

/* 表のすぐ下に次の小見出しが来るとくっついて読めない。
   .zs h3 は装飾を打ち消しているだけで余白を持たせていなかった */
.zs .zs-sec h3 {
  margin: 1.9em 0 .6em;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.6;
  border-left: 3px solid var(--ac);
  padding-left: 10px !important;
}
.zs .zs-sec > p + h3,
.zs .zs-sec > .hd + h3 { margin-top: 1.1em; }
.zs .zs-tablewrap { margin-bottom: .2em; }

.zs-table .zs-up   { color: #0a7a45; font-weight: 700; white-space: nowrap; }
.zs-table .zs-down { color: #c0392b; font-weight: 700; white-space: nowrap; }

.zs-prep { display: grid; gap: 12px; margin: 1.1em 0; }
.zs-prep__item {
  border: 1px solid #cfe6d9;
  border-left: 4px solid #0a7a45;
  border-radius: 6px;
  padding: .9em 1.1em;
  background: #f7fcf9;
}
.zs .zs-prep__item h3 {
  margin: 0 0 .4em !important;
  font-size: 1rem;
  color: #0a7a45 !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}
.zs-prep__item p  { margin: 0; font-size: .92rem; line-height: 1.85; }

@media (max-width: 600px) {
  .zs .zs-lead .cap_box_content p { font-size: .9rem; }
  .zs-prep__item h3 { font-size: .95rem; }
}

/* 本文からバナーへ視線をつなぐ三角。画像は使わない（重くなるため）。
   色はCTAのオレンジに合わせている。
   下の余白は三角のマージンではなくCTA側の 2.5rem が効くので、そちらも詰める */
.zs-arrow {
  width: 0;
  height: 0;
  margin: -30px auto 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-top: 24px solid #f97316;
  opacity: .9;
}
.zs-arrow + .zika-cta { margin-top: .55rem; }

@media (max-width: 600px) {
  .zs-arrow {
    margin: -26px auto 0;
    border-left-width: 18px;
    border-right-width: 18px;
    border-top-width: 17px;
  }
  .zs-arrow + .zika-cta { margin-top: .4rem; }
}

/* 節に入れる図版。実物写真を参照して描かせた半写実のイラスト */
.zs-fig { margin: 1.2em 0 1.6em; }
/* キャプションボックスの中に図が来ると、ボックスの内側余白1.5emと
   図の上余白1.2emが重なって43pxほど空く。見出しから図を引き上げる */
.zs .cap_box_content > .zs-fig:first-child { margin-top: -.75em; }
.zs-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.zs-fig figcaption {
  margin-top: .5em;
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.8;
}
@media (max-width: 600px) {
  .zs-fig figcaption { font-size: 12px; }
}


/* 解体見積もりのバナー。渡された画像を貼るだけ。枠も文章も足さない */
.zs-kaitai { margin: 1.2em 0 .2em; }
.zs-kaitai img { width: 100%; height: auto; display: block; border-radius: 6px; }