@charset "UTF-8";

/*
 * 本文ブロック（#175）
 *
 * **ページを問わず使える汎用パーツ。** 本文・見出し・品目タイル・チェック・
 * メーカーチップ・吹き出し・風景写真。市区町村ページの「紹介文」と
 * 「選ばれる理由」で共用しており、他ページでも同じ見た目で使える。
 *
 * 対応するマークアップは `parts/area-renewal/blocks.php`。
 * 描画の指示（どの kind をどう出すか）は `inc/kaitori-area-blocks.php` が決める。
 *
 * 基準値は `tokens.css` の CSS 変数を使う。**この file に生の色や
 * フォントサイズを直接書かない**（実測値の出どころが 1 箇所に集まらなくなる）。
 */

/*
 * ページ全体のラッパー＝**段階ごとの固定幅キャンバス**（tokens.css の
 * `--kau-canvas-w`: PC 1200 / タブレット 768 / SP 440・2026-09-15 決定）。
 * 窓幅に合わせて伸縮させず、中央に置く。段階の切り替え（1200 / 768）は
 * キャンバスがちょうど入る幅なので、どの窓幅でも横スクロールは出ない。
 *
 * 以前は PC だけ `min-width: 1200px`（足りない幅は横スクロール）で、
 * タブレット・SP は流動だった。流動の幅でセクションが崩れるため固定にした。
 */
.kau-page {
  width: var(--kau-canvas-w);
  margin-inline: auto;
  /* PC の 1200〜1439 だけ JS が 1 未満にする（tokens.css 参照）。それ以外は 1 */
  zoom: var(--kau-zoom);
}

/*
 * **背景の帯だけは画面幅いっぱいに広げる。** キャンバスの直下に並ぶ各セクション
 * （ヒーロー・電話帯・本文・比較・強み・FAQ・声・まとめ・方法・流用の買取実績と
 * 出張買取エリア）と、本文の中にある締めの濃紺の帯が対象。
 * 左右の margin を負にして帯を画面端まで出し、同じ量の padding で中身を
 * キャンバス幅に戻す（% は包含ブロック＝キャンバス幅に対して解決される）。
 * 窓幅は `--kau-vw`（JS が clientWidth を入れる。無ければ 100vw）。PC を縮小している
 * ときは「キャンバス座標系での窓幅」が入るので、帯はちょうど画面幅になる。
 * ヒーローの絶対配置は padding ボックス基準なので、写真は今までどおり全幅。
 */
.kau-page > *,
.kau-page .kau-intro-closing {
  margin-inline: calc(50% - var(--kau-vw) / 2);
  padding-inline: calc(var(--kau-vw) / 2 - 50%);
}

/*
 * 保険: 100vw はスクロールバーの幅を含むため、帯が右に十数 px はみ出す。
 * ルートで横方向を閉じて白い帯・横揺れを出さない（ブラウザ拡張の注入要素も
 * 同じく閉じ込める）。固定幅キャンバスにしたので横スクロールは意図的にも使わない。
 */
html:has(.kau-page) {
  overflow-x: clip;
}

/*
 * 現行流用の「買取実績」は元々コンテナ幅の指定が無く画面いっぱいに
 * 広がるため、新デザインのページでは前後のセクション（比較の 1360px）と
 * コンテンツ幅を揃える（2026-09-11 指示）。既存 215 ページ側の
 * 見た目は変えない（.kau-page 配下だけに効く）。
 */
.kau-page .jisseki_in {
  max-width: 1360px;
}


/* ==================================================================
 * 本文ブロック（紹介文と選ばれる理由で共用）
 *
 * `parts/area-renewal/blocks.php` が出すマークアップに対応する。
 * 実測値はすべて `PC/02_本文セクション` と `PC/04_選ばれる理由`。
 * ================================================================== */

/* ---- 本文・見出し ---- */

/*
 * **段落の間は空けない。** 行間（23px）だけで区切り、段落が変わっても
 * 行の間隔が一定に見えるようにしている（2026-09-10 ユーザー指示
 * 「行間は全部均一に。一番小さい方に併せてOK」）。
 *
 * デザインの実測は 8px だが、段落の行数によって空きの見え方が変わるため、
 * 意図的に 0 にしてばらつきを消している。段落と他のブロック（タイル・
 * チェックなど）の間は、そのブロック側が 8px を持つ。
 */
.kau-body {
  margin: 0;
  color: var(--kau-gray-600);
  font-size: var(--kau-text-size);
  font-weight: 400;
  line-height: var(--kau-text-leading);
  letter-spacing: var(--kau-text-tracking);
}

/*
 * ---- 見出しの前後の余白 ----
 *
 * **デザインの実測（見出しの前 38px・後 15px）より広く取っている。**
 * 実測どおりだと、14px の本文が続く中で見出しが埋もれてセクションの
 * 区切りが分かりにくかった（2026-09-10 ユーザー指摘）。
 * 前 64px・後 20px にして、見出しから次の見出しまでが 1 つのまとまりに
 * 見えるようにしている。
 *
 * `--kau-section-gap` を 1 か所で持つのは、★見出しとアイコン付き小見出しで
 * 同じ間隔にするため。片方だけ変えると区切りの強さが揃わなくなる。
 */
.kau-lead-heading,
.kau-section-heading {
  margin: var(--kau-section-gap) 0 20px;
  color: var(--kau-navy);
  font-size: var(--kau-section-heading-size);
  font-weight: var(--kau-heading-weight);
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* ★見出しは鉤括弧の直前で改行する（行の切り出しは PHP 側） */
.kau-lead-heading__line {
  display: block;
}

/* 小見出しの SP 用改行（文言側の \n 由来）。PC では 1 行 */
.kau-section-heading__break {
  display: none;
}

/*
 * アイコン付きの小見出し。**本文の先頭文から「地域名は、」の前置きを
 * 落としたもの**なので、デザインの要約文より少し長くなる。
 */
.kau-section-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

/*
 * **`<img>` では黒くなる。** Iconify の SVG は `fill="currentColor"` で、
 * `<img>` 経由だと文字色が伝わらず既定の黒で描かれる（LINE アイコンと同じ原因）。
 * 実測の #053c87 で塗るため `mask` にしている。
 */
.kau-section-heading__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background-color: var(--kau-navy-icon);
  -webkit-mask: var(--kau-section-icon) no-repeat center / contain;
  mask: var(--kau-section-icon) no-repeat center / contain;
}

.kau-section-heading__icon--mountain { --kau-section-icon: url("../../../../images/area-renewal/section-mountain.svg"); }

.kau-section-heading__icon--sea { --kau-section-icon: url("../../../../images/area-renewal/section-sea.svg"); }

/* ---- 品目タイル ---- */

/*
 * 実測: 100×100（角丸 10・枠 1px）に写真 60〜70px と 14px の文字。
 * 枠の色は海側 #c7d9e5 と山側 #bcda46 に塗り分けられているが、
 * 振り分けが原稿依存なので青系に統一している（トークン側に理由あり）。
 */
.kau-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 前後の本文との間隔 8px（実測）。段落側は余白を持たないのでここで持つ */
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.kau-tiles__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100px;
  min-height: 100px;
  padding: 8px 4px;
  border: 1px solid var(--kau-tile-border);
  border-radius: 10px;
  background: var(--kau-white);
}

.kau-tiles__photo {
  display: block;
  width: auto;
  max-width: 64px;
  height: 52px;
  object-fit: contain;
}

.kau-tiles__label {
  margin: 0;
  color: var(--kau-gray-600);
  font-size: var(--kau-text-size);
  font-weight: var(--kau-heading-weight);
  line-height: 1.3;
  letter-spacing: var(--kau-text-tracking);
  text-align: center;
}

/*
 * 写真が無い品目は文字だけのタイル。**幅を伸ばして文字を収める。**
 * 「倉庫整理品（工具箱・発電機・チェーンソーなど）」のように長い項目があり、
 * 100px 固定だと縦に潰れて読めない。
 */
.kau-tiles__item--textonly {
  width: auto;
  min-width: 100px;
  max-width: 100%;
  min-height: 60px;
  padding: 12px 16px;
}

/* ---- チェック印のリスト ---- */

/*
 * 実測: アイコン 16×16（線 #bcda46）＋ 14px の文字・間隔 8px。
 * 前の本文からは 27px 空く（実測）。本文側の下余白 20px に 8px 足して合わせる。
 */
.kau-checks {
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.kau-checks__item {
  position: relative;
  padding-left: 24px;
  color: var(--kau-gray-600);
  font-size: var(--kau-text-size);
  font-weight: var(--kau-heading-weight);
  line-height: var(--kau-text-leading);
  letter-spacing: var(--kau-text-tracking);
}

/* チェック印は CSS で描く（丸＋レ点）。素材は 16px の線画 1 種だけなので */
.kau-checks__item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: var(--kau-check);
  -webkit-mask: url("../../../../images/area-renewal/check.svg") no-repeat center / contain;
  mask: url("../../../../images/area-renewal/check.svg") no-repeat center / contain;
}

/* 強みの 1 つめの箇条書きは横並び */
.kau-checks--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

/* ---- 枠付きの箱（強みの 2 つめ以降の箇条書き） ---- */
.kau-item-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 8px 0;
  padding: 20px 24px;
  border: 1px solid var(--kau-tile-border);
  border-radius: 10px;
  background: var(--kau-white);
  list-style: none;
}

.kau-item-box__item {
  color: var(--kau-gray-600);
  font-size: var(--kau-text-size);
  font-weight: var(--kau-heading-weight);
  line-height: var(--kau-text-leading);
  letter-spacing: var(--kau-text-tracking);
}

/* ---- メーカーのチップ ---- */

/* 実測: 121×25・角丸いっぱい・背景 #013b7f・14px 白 */
.kau-makers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.kau-makers__item {
  padding: 1px 16px;
  border-radius: 9999px;
  background: var(--kau-navy-chip);
  color: var(--kau-white);
  font-size: var(--kau-text-size);
  font-weight: var(--kau-heading-weight);
  line-height: var(--kau-text-leading);
  letter-spacing: var(--kau-text-tracking);
}

/* ---- 人物イラスト＋吹き出し ---- */

/*
 * **吹き出しは CSS で描く。** デザインは 343×69 / 450×79 の SVG だが、
 * 行の文字数が一定でないため固定サイズの画像だと収まらない。枠線の色（#f1ce9d）と
 * 角丸・尾の形だけ合わせる。
 *
 * **幅は内容に合わせる。** デザインの実測が 343 と 450 で、文の長さによって
 * 変わっていた。段幅いっぱいに伸ばすと見た目が変わる（2026-09-10 指摘）。
 *
 * 相談者のイラストを左に添える（実測 89×98）。**イラストを添えるのはここだけ**
 * （2026-09-10 ユーザー判断。締めの帯にあったスタッフの切り抜きは外した）。
 */
.kau-bubbles {
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

/* 角丸の枠のグループは横に並べる（2026-09-11 指摘） */
.kau-bubbles--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
}

.kau-bubbles--row .kau-bubbles__item {
  flex: 0 1 auto;
}

.kau-bubbles__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.kau-bubbles__person {
  flex: 0 0 auto;
  width: 89px;
  height: auto;
}

/*
 * **イラストが付かないグループは装飾なし。本文と同じ見た目にする。**
 * デザインでも、最初と最後を除く吹き出しは枠を持たない（2026-09-10 実測）。
 */
.kau-bubbles__item--noperson {
  display: block;
}

.kau-bubbles__item--noperson .kau-bubbles__text {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kau-gray-600);
  font-size: var(--kau-text-size);
  font-weight: 400;
  line-height: var(--kau-text-leading);
}

/* 尾を消す */
.kau-bubbles__item--noperson .kau-bubbles__text::before,
.kau-bubbles__item--noperson .kau-bubbles__text::after {
  content: none;
}

/*
 * **最後のグループだけ「尾の無い角丸の枠」。**
 * 実測: 角丸 16・線 #f1ce9d・塗りなし・高さ 47。文字は 16px Bold の濃紺。
 * 1 つめ（尾つき・イラストあり）とも、間のグループ（装飾なし）とも違う。
 */
.kau-bubbles__item--boxed .kau-bubbles__text {
  display: inline-block;
  max-width: 100%;
  padding: 12px 20px;
  border: 2px solid var(--kau-bubble-border);
  border-radius: 16px;
  background: var(--kau-white);
  color: var(--kau-navy);
  font-size: 16px;
  font-weight: var(--kau-heading-weight);
  line-height: 1.4;
}

.kau-bubbles__text {
  position: relative;
  /* 内容の幅に合わせる（段幅いっぱいに伸ばさない）。尾の分だけ左に寄せる */
  display: inline-block;
  max-width: calc(100% - 14px);
  margin-left: 14px;
  padding: 14px 28px;
  border: 2px solid var(--kau-bubble-border);
  border-radius: 9999px;
  background: var(--kau-white);
  color: var(--kau-gray-600);
  font-size: 16px;
  font-weight: var(--kau-heading-weight);
  line-height: 1.5;
  letter-spacing: var(--kau-text-tracking);
}

/* 人物側へ伸びる尾。枠線と同じ色の三角を 2 枚重ねて縁取りにする */
.kau-bubbles__text::before,
.kau-bubbles__text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
}

.kau-bubbles__text::before {
  left: -14px;
  margin-top: -8px;
  border-width: 8px 14px 8px 0;
  border-color: transparent var(--kau-bubble-border) transparent transparent;
}

.kau-bubbles__text::after {
  left: -10px;
  margin-top: -6px;
  border-width: 6px 11px 6px 0;
  border-color: transparent var(--kau-white) transparent transparent;
}

/* ==================================================================
 * 薄緑のボックスに入るタイル群（本文の 1 つめ）
 *
 * デザイン実測: 553×334・背景 #f2f5e3・角丸 9。見出しは 24px の緑。
 * 中のタイルは白いカードで 160×110（他のタイルより大きい）。
 * ================================================================== */

/*
 * デザインの実測は `Frame 40` が auto-VERTICAL・間隔 16px・**CENTER 揃え**。
 * 見出しもタイルも中央に寄る（左寄せだとタイル 3 列の右側に余白が残る）。
 */
/* 箱はタイルの幅に合わせて縮める（実測: 左右の内側余白 41px。2026-09-11 指摘） */
.kau-tiles-box {
  width: fit-content;
  margin: 8px auto;
  padding: var(--kau-sub-pad);
  border-radius: 9px;
  background: var(--kau-box-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.kau-tiles-box__heading {
  margin: 0;
  color: var(--kau-green);
  font-size: var(--kau-section-heading-size);
  font-weight: var(--kau-heading-weight);
  line-height: 1.3;
  letter-spacing: 0.04em;
}

/* ボックスの中のタイルは中央寄せ。下の余白はボックスの gap が持つ */
.kau-tiles--large {
  justify-content: center;
  margin-bottom: 0;
}

/* ボックス内のタイルは大きめ・白背景・枠なし */
.kau-tiles--large .kau-tiles__item {
  width: 160px;
  min-height: 110px;
  border: 0;
  background: var(--kau-white);
}

.kau-tiles--large .kau-tiles__photo {
  max-width: 110px;
  height: 62px;
}

/* 風景写真（まとまりの中に入るとき）。段幅いっぱいに広げる */
.kau-scenery {
  margin: 8px 0 0;
}

.kau-scenery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 1199px) {
  /*
   * 写真つきの品目タイルは **横 1 行に収める**（SP デザイン実測。
   * 海側 6 個・山側 5 個が均等に縮む）。薄緑の箱の中の大タイルは対象外。
   */
  .kau-tiles:not(.kau-tiles--large) {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .kau-tiles:not(.kau-tiles--large) .kau-tiles__item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    min-height: 0;
    padding: 4px 2px;
  }

  .kau-tiles:not(.kau-tiles--large) .kau-tiles__label {
    font-size: 9px;
    line-height: 1.3;
  }

  /*
   * 薄緑の箱の fit-content は PC 用（タイルの幅に箱を合わせる）。
   * SP でそのままだとタイル 3 列ぶんの幅へ広がろうとして画面から
   * はみ出す（2026-09-11 指摘・右側に白い帯が出る原因）。
   */
  .kau-tiles-box {
    width: auto;
    padding: var(--kau-sub-pad);
  }

  .kau-section-heading {
      gap: 12px;
    }

  .kau-section-heading__break {
      display: inline;
    }

  /*
   * 折り返す本文は中央寄せにしない（2026-09-14 指示・SP のみ）。
   * 中央のままだと最後の行だけ中央に浮いて見える。買取実績の見出しと注記。
   */
  .kau-page .jissekitxt,
  .kau-page .jissekitxt h2,
  .kau-page .jissekitxt2 {
      text-align: left;
    }

  .kau-section-heading__icon {
      width: 40px;
      height: 40px;
    }

  /* タイルは 1 行 3 つに収まる幅へ（実測の SP も 3 列） */
    
  .kau-tiles__item {
      width: calc((100% - 16px) / 3);
      min-width: 0;
    }

  .kau-bubbles__person {
      width: 64px;
    }

  .kau-bubbles__text {
      padding: 12px 18px;
      font-size: 14px;
    }

  /* ボックス内のタイルも 1 行 3 つに収める */
    
  .kau-tiles--large .kau-tiles__item {
      width: calc((100% - 16px) / 3);
    }

  .kau-tiles--large .kau-tiles__photo {
      max-width: 100%;
      height: 52px;
    }
}

/* ------------------------------------------------------------------
 * トップへ戻るボタン（2026-09-14 指示・新デザインページのみ）
 *
 * 挙動（1 画面ぶんスクロールで表示）は assets/js/area/totop.js。
 * 下部固定バー（#bottom_kotei・54px・1080px 以上では非表示）と
 * 重ならない高さに置く。
 * ------------------------------------------------------------------ */

.kau-totop {
  position: fixed;
  right: 16px;
  bottom: 70px;
  z-index: 998;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--kau-cta-from), var(--kau-cta-to));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s, filter 0.15s ease;
}

/* 他のボタンと同じホバーの反応（2026-09-30 指摘）。汎用の .kau-page button:hover は totop の transition 指定に負けるため個別に書く */
.kau-totop:hover {
  filter: brightness(1.12);
}

/* 上向きの山形（CTA の矢印と同じ描き方） */
.kau-totop::before {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-top: 3px solid var(--kau-white);
  border-left: 3px solid var(--kau-white);
  transform: translate(-50%, -50%) rotate(45deg);
}

.kau-totop--visible {
  opacity: 1;
  visibility: visible;
}

/* 下部固定バーが消える幅からは右下の定位置へ */
@media (min-width: 1080px) {
  .kau-totop {
    right: 24px;
    bottom: 24px;
  }
}

/* ==================================================================
 * SP（767px 以下）
 *
 * タブレット（1024px 以下）の指定を継承し、差分だけ書く。
 * ================================================================== */

@media (max-width: 767px) {
  /*
   * **★見出しは文字を詰めて 2 行に収める。**
   * 鉤括弧の直前で 2 行に分けているが、20px だと 1 行目
   * （「★和歌山県西牟婁郡すさみ町で増えている」19 文字＝380px）が
   * 375px 幅に収まらず 3 行になっていた（2026-09-14 指摘）。
   *
   * 鉤括弧が無く分割できない見出し（「…買い取り希望の多いアイテムとは？」
   * 29 文字など）は 16px でも折り返すが、元から 1 行の想定なので自然な折り返し。
   */
  .kau-lead-heading {
    font-size: 16px;
    line-height: 1.5;
  }

  /*
   * **品目タイルは 3 列で折り返す。**
   * タブレットは 6 つを 1 行に詰める（`flex-wrap: nowrap`・文字 9px）が、
   * 375px 幅では 1 つ 55px ほどになって読めない（2026-09-14 指摘）。
   * 折り返して 3 列 × 2 行にし、文字も戻す。
   */
  .kau-tiles:not(.kau-tiles--large) {
    flex-wrap: wrap;
    gap: 8px;
  }

  .kau-tiles:not(.kau-tiles--large) .kau-tiles__item {
    flex: 0 0 calc((100% - 16px) / 3);
    min-height: 88px;
    padding: 8px 4px;
  }

  .kau-tiles:not(.kau-tiles--large) .kau-tiles__label {
    font-size: 11px;
    line-height: 1.3;
  }

  .kau-tiles:not(.kau-tiles--large) .kau-tiles__photo {
    max-width: 100%;
    height: 44px;
  }
}

/* 段落末尾に 1 文字だけ残る折り返しを避ける（Chrome/Edge。未対応ブラウザは従来どおり）。2026-09-29 先方指摘 */
.kau-page p,
.kau-page dd,
.kau-page li {
  text-wrap: pretty;
}

/* 選べる要素にはホバーで反応を返す（2026-09-29 先方指摘）。ボタン類は明るさ、テキストリンクは色と下線 */
.kau-page a,
.kau-page button {
  transition: color 0.15s ease, filter 0.15s ease, background-color 0.15s ease;
}

.kau-page a:not([class*="button"]):not([class*="btn"]):hover {
  color: var(--kau-orange-accent);
  text-decoration: underline;
}

.kau-page a[class*="button"]:hover,
.kau-page a[class*="btn"]:hover,
.kau-page button:hover {
  filter: brightness(1.08);
}