@charset "UTF-8";

/*
 * 市区町村ページの本文セクション（#175）
 *
 * **このページ専用。** 見出し帯・実績バッジ・CTA・2 カラムのグリッド・
 * 締めの濃紺の帯。中に並ぶ本文ブロックそのものは `blocks.css` が持つ。
 *
 * デザイン: vault `資料/受領資料/リニューアル用/デザイン/PC/02_本文セクション_Group39@2x.png`
 */

/* ==================================================================
 * 本文セクション（02）
 *
 * デザイン: `PC/02_本文セクション_Group39@2x.png` / `SP/02_本文セクション_Group77@2x.png`
 *
 * **PC は 2 カラム、SP は 1 カラム。** 本文を「まとまり」（見出しで始まる塊）に
 * 分け、PC ではそれを 2 列のグリッドへ順に置く（左 → 右 → 左 → 右）。
 * デザインの PC 版がこの配置で、すさみ町は 6 つのまとまりが左右と一致する。
 * ================================================================== */
.kau-intro {
  font-family: var(--kau-font);
  background: var(--kau-white);
  color: var(--kau-gray-600);
}

/*
 * 実測の幅は 2 つある。見出し帯とバッジ・CTA が 860px、本文の 2 カラムが
 * **1353px**（左の段 641 ＋ 間隔 48 ＋ 右の段 664）。外側を 1353＋左右の余白に
 * し、見出しまわりだけ 860 に絞る。
 *
 * **この幅は必要。** 狭めると品目タイル 6 つ（100×6 ＋ 間隔 8×5 ＝ 640px）が
 * 1 行に収まらず、デザインと段数が変わる。
 */
.kau-intro__inner {
  box-sizing: border-box;
  max-width: 1385px;
  margin-inline: auto;
  padding: var(--kau-main-pad) 16px;
}

/* 見出しまわりの 2 列（文の列＋イラスト。回り込ませない） */
.kau-intro__head {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

/*
 * **文の列は縮めない**（見出しが行単位で折り返し禁止のため、縮めると
 * イラストの下に文字が潜る。2026-09-11 指摘）。イラスト側だけが縮む。
 */
.kau-intro__head-main {
  flex: 0 0 auto;
  max-width: 100%;
}

/* 実測 545×363。右端に寄せ、足りない幅ではイラストだけ縮む */
.kau-intro__art {
  flex: 0 1 545px;
  min-width: 0;
  width: auto;
  max-width: 545px;
  height: auto;
  margin-top: 4px;
  margin-left: auto;
  align-self: flex-start;
  object-fit: contain;
}

.kau-intro__label,
.kau-intro__badges,
.kau-intro__ctas {
  max-width: 860px;
}

.kau-intro__heading {
  max-width: 900px;
}

/*
 * **行ごとに折り返しを止める。** 改行位置は文が持っているので、
 * 幅が足りないときだけ勝手に 3 行目ができていた（2026-09-10 に 2 回指摘）。
 * 実測の 2 行目は 843px（「買取UP」の 50px を含む）で、枠 900px に収まる。
 * SP では折り返しを許す（幅が足りないため）。
 */
.kau-intro__heading-line {
  display: block;
}

/*
 * 大見出しの中で見た目が変わる語（実測）。
 * **Figma のテキストは文字単位でスタイルを持つ**ため、レイヤーの fontSize・fill
 * だけ見ていると取りこぼす（2026-09-10 指摘）。
 */
/* 強調語の途中（「高額買/い取り」等）で折らない。折るなら語の前で */
.kau-intro__heading-brand,
.kau-intro__heading-accent {
  white-space: nowrap;
}

.kau-intro__heading-brand {
  /* 「買取UP」だけ少し大きい（44px の本文に対して 50px） */
  font-size: 50px;
  font-weight: inherit;
}

.kau-intro__heading-accent {
  /* 「高額買い取り」はオレンジ */
  color: var(--kau-orange-accent);
  font-weight: inherit;
}

/* ---- 見出し帯 ---- */

/* 実測: 231×36・角丸 5・24px 白・字間 5% */
.kau-intro__label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 12px;
  border-radius: 5px;
  background: var(--kau-navy-label);
  color: var(--kau-white);
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.kau-intro__heading {
  margin: 0;
  color: var(--kau-navy);
  font-size: var(--kau-intro-heading-size);
  font-weight: var(--kau-heading-weight);
  /* 実測は行間 100%。44px で 2 行だと詰まりすぎるので少し開ける */
  line-height: 1.25;
  /* 実測の字間は 4%（5% にしていたぶん幅が余分に必要だった） */
  letter-spacing: 0.04em;
}

/* ---- 実績バッジの再掲 ---- */

/*
 * ヒーローと同じ 3 つだが、**円の枠を付けない**（デザインでは Border が非表示）。
 * アイコンだけを 48px で置く。
 */
/*
 * **バッジ 3 つは角丸の枠で囲まれる**（実測 586×76・枠線 #f1ce9d 2px・角丸 16）。
 * 各アイコンの円（Border 72×72）は Figma 側で非表示になっており、囲むのは
 * 外側のこの枠だけ（2026-09-10 指摘）。
 */
/*
 * 実測: 枠 586×76 に 180px のバッジが 3 つ・間隔 8px・左右の余白 15px
 * （180×3 ＋ 8×2 ＋ 15×2 ＝ 586）。**間隔と幅を実測どおりにしないと
 * 3 つが 1 行に収まらず折り返す**（2026-09-10 指摘）。
 */
.kau-intro__badges {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 586px);
  margin: 24px 0 0;
  padding: 14px 15px;
  border: 2px solid var(--kau-bubble-border);
  border-radius: 16px;
  list-style: none;
}

.kau-intro__badge {
  /* 実測 180px。内訳はアイコン 48 ＋ 間隔 12 ＋ 文字 110〜120 */
  flex: 0 1 180px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.kau-intro__badge-body {
  display: block;
}

.kau-intro__badge-title,
.kau-intro__badge-note {
  display: block;
}

/*
 * **ヒーローのバッジと色が違う。** ヒーローは緑（#14ae5c）だが、本文セクションと
 * 締めの帯では濃紺（実測 #004088 / #1e3a8a）。`.fig` の INSTANCE の
 * `symbolOverrides` に入っていて、レイヤーを見ただけでは分からなかった。
 */
.kau-intro__badge-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background-color: var(--kau-navy-badge);
  -webkit-mask: var(--kau-badge-icon) no-repeat center / contain;
  mask: var(--kau-badge-icon) no-repeat center / contain;
}

.kau-intro__badge-title {
  color: var(--kau-gray-600);
  font-size: 14px;
  font-weight: var(--kau-heading-weight);
  line-height: 20px;
}

.kau-intro__badge-note {
  color: var(--kau-gray-500);
  font-size: 10px;
  line-height: 15px;
}

/* ---- 小さい CTA 2 つ ---- */

/*
 * CTA の下は広く空ける。**実測 83px。**
 * ここは段組みの先頭にあたり、`.kau-intro__body > *:first-child` で
 * 小見出しの上余白を消しているため、CTA 側で間隔を持つ必要がある。
 */
.kau-intro__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 84px;
  padding: 0;
  list-style: none;
}

/* 実測: 380×80 が 2 つ。伸ばさない */
.kau-intro__cta-item {
  flex: 0 1 380px;
}

/* ---- 風景写真 ---- */
.kau-intro__scenery {
  margin: 20px 0 0;
}

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

/*
 * まとまりの先頭の見出しには上余白を付けない。
 * まとまりの間隔はグリッドの `row-gap`（PC）と `margin`（SP）で作る。
 */
.kau-intro__group > *:first-child {
  margin-top: 0;
}

.kau-intro__group > *:last-child {
  margin-bottom: 0;
}

/* ==================================================================
 * 本文セクションの締め（濃紺の帯）
 *
 * デザイン実測: 1440×140・#00377c。スタッフの切り抜き 95×113、
 * 見出し 24px 白、白いボックス 586×76 に実績バッジ、CTA 380×54 が 2 つ。
 * ================================================================== */
.kau-intro-closing {
  background: var(--kau-navy-band);
  font-family: var(--kau-font);
}

.kau-intro-closing__inner {
  box-sizing: border-box;
  max-width: 1385px;
  margin-inline: auto;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/*
 * 見出し＋バッジ枠とスタッフの切り抜きを横に並べる。
 * 実測: 切り抜き 95×113・バッジ枠のすぐ右。切り抜きなので帯の下端に接地させる。
 */
.kau-intro-closing__row {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.kau-intro-closing__staff {
  flex: 0 0 auto;
  width: 95px;
  height: auto;
}

.kau-intro-closing__main {
  flex: 1 1 auto;
  min-width: 0;
}

.kau-intro-closing__heading {
  margin: 0 0 8px;
  color: var(--kau-white);
  font-size: var(--kau-section-heading-size);
  font-weight: var(--kau-heading-weight);
  line-height: 1.3;
  letter-spacing: 0.04em;
}

/*
 * 実測: 586×76 の白いボックスにバッジ 3 つ（556px）。
 * **幅を固定する。** 伸ばすと右に余分な空きが出る（2026-09-10 指摘）。
 */
.kau-intro-closing__badges {
  box-sizing: border-box;
  /*
   * 実測: 586×76 にバッジ 3 つ（180×3 ＋ 間隔 8×2 ＝ 556）＋ 左右 15px。
   * **本文セクションの枠と同じ寸法。** 間隔や余白を広げると 3 つが
   * 1 行に収まらず折り返す（2026-09-10 指摘）。
   */
  width: min(100%, 586px);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 15px;
  border-radius: 16px;
  background: var(--kau-white);
  list-style: none;
}

/*
 * スタッフの切り抜き。実測 95×113 で、CTA の右（x1273〜1368）に入る。
 * 切り抜きなので帯の下端に接地させる。
 */
.kau-intro-closing__staff {
  flex: 0 0 auto;
  align-self: flex-end;
  width: 95px;
  height: auto;
}

.kau-intro-closing__ctas {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1200px) {
  .kau-intro__heading-line {
      white-space: nowrap;
    }

  /*
     * 実測の段幅は 668 / 664、間の余白は 48px。まとまりの高さは揃わないので
     * `align-items: start` で上端をそろえる（伸ばして高さを合わせない）。
     */
    
  .kau-intro__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 48px;
      row-gap: var(--kau-section-gap);
      align-items: start;
    }

  /*
     * 見出しで始まらないまとまりを、隣の列の小見出しのぶんだけ下げる。
     * **実測 55px**（左の小見出し y-6899 に対して右の先頭が y-6844）。
     * これで右の先頭が左の本文と同じ高さから始まる。
     */
    
  .kau-intro__group--offset {
      /* 左列の小見出し（48px）＋下余白（20px）ぶん下げ、右列の本文 1 行目を左列の本文と揃える（2026-09-29 先方指摘） */
      padding-top: 68px;
    }

  /*
   * **PC の締めの帯は「見出し＋バッジ枠 → CTA → スタッフ」の順**（Figma 実測:
   * CTA 群 x22006〜22386、スタッフ x22395〜22490。スタッフが右端・2026-09-15 指摘）。
   * HTML はタブレット以下のためにスタッフをバッジ枠と同じ行に置いているので、
   * PC ではその行の箱を `display: contents` で外し、帯の直下の並びとして
   * `order` で右端へ送る。CTA との間隔は実測 9px。
   */
  .kau-intro-closing__row {
      display: contents;
    }

  .kau-intro-closing__ctas {
      order: 1;
    }

  .kau-intro-closing__staff {
      order: 2;
      align-self: flex-end;
      margin-left: -7px;
    }
}

@media (max-width: 1199px) {
  /*
   * **締めの帯は「CTA が上・バッジが下」**（タブレット版の実測 2026-09-14）。
   *
   *   帯 767×250
   *     y49  CTA 320×54 が 2 つ（x59 / x389）
   *     y133 白い枠 586×76 にバッジ 3 つ
   *     y103 スタッフの切り抜き 95×113（右端 x645）
   *
   * 見出しは帯の中に無い（PC だけ）。以前は見出し＋バッジを左、CTA を右に
   * 置いていたが、デザインと配置が違っていた。
   */
  .kau-intro-closing__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .kau-intro-closing__ctas {
    order: -1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }

  .kau-intro-closing__ctas > li {
    flex: 1 1 320px;
  }

  .kau-intro-closing__ctas .kau-mini-cta--sm {
    width: 100%;
  }

  /* 見出しはタブレット以下では出さない（デザインに無い） */
  .kau-intro-closing__heading {
    display: none;
  }

  /*
   * CTA の下は 18px（タブレット版の実測: CTA の下端 -7269 → 薄緑ボックス -7251）。
   * PC の 84px のままだと空きすぎる（2026-09-14 指摘）。
   */
  .kau-intro__ctas {
    margin-bottom: 18px;
  }

  .kau-intro__head {
    flex-direction: column;
    gap: 16px;
  }

  /* 品目イラストは SP デザインには無い */
  .kau-intro__art {
    display: none;
  }

  /*
   * 実績バッジは白枠 1 つに 3 項目をコンパクトに収める（SP デザイン実測）。
   * 以前は PC の 180px 基準のまま潰れて縦書き状態になっていた。
   */
  .kau-intro__badges {
    /*
     * 上端で揃える（2026-09-14 指摘）。center だと注記の行数が違う
     * バッジだけ上下中央に寄り、見出しの高さがガタつく。
     */
    align-items: flex-start;
    gap: 4px;
    margin-top: 16px;
    padding: 8px 6px;
    justify-content: center;
  }

  .kau-intro__badge {
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-start;
    gap: 6px;
  }

  .kau-intro__badge-icon {
    width: 26px;
    height: 26px;
  }

  .kau-intro__badge-title {
    font-size: 11px;
    line-height: 15px;
  }

  .kau-intro__badge-note {
    font-size: 9px;
    line-height: 12px;
  }

  /* 無料査定と LINE のボタンは横並び 2 列（SP デザイン実測） */
  .kau-intro__ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .kau-intro__ctas .kau-mini-cta {
    min-height: 64px;
    padding: 8px 20px 8px 10px;
    gap: 8px;
  }

  .kau-intro__ctas .kau-mini-cta__title {
    font-size: 14px;
  }

  .kau-intro__ctas .kau-mini-cta__note {
    font-size: 10px;
  }

  .kau-intro__inner {
      padding: var(--kau-main-pad) 16px;
    }

  .kau-intro__label {
      font-size: 16px;
    }

  /* SP は「買取UP」も本文と同じ大きさ（2026-09-14 指摘。PC は実測どおり 50px） */
  .kau-intro__heading-brand {
      font-size: inherit;
    }

  /* 2 行目「買取UPは〜します！」が 375px で 1 行に収まるよう字間を詰める */
  .kau-intro__heading {
      letter-spacing: 0;
    }

  /*
   * SP は 1 列。**margin ではなく flex + gap で間隔を取る**。
   * 相談ボックス（--boxed-lead）を order で先頭へ動かすため、
   * `+` の margin だと表示順と余白が食い違う。
   */
  .kau-intro__grid {
      display: flex;
      flex-direction: column;
      gap: var(--kau-section-gap);
    }

  /*
   * SP デザインでは相談ボックスが CTA の直後・本文見出しの前（2026-09-14 指摘）。
   * **箱の下の余白は、箱の上（CTA との 18px）と同じにする**（2026-09-15 指摘。
   * まとまり間の 48px のままだと箱の下だけ空きすぎる）。flex の gap は
   * 全まとまり共通なので、この箱だけ負の margin で差し引く。
   */
  .kau-intro__group--boxed-lead {
      order: -1;
      margin-bottom: calc(18px - var(--kau-section-gap));
    }

  .kau-intro-closing__inner {
      flex-wrap: wrap;
      gap: 12px;
    }

  .kau-intro-closing__heading {
      font-size: 18px;
    }

  .kau-intro-closing__ctas {
    /*
     * **CTA は上・1 列に積む**（2026-09-14 指摘）。以前の `order: 1` が残って
     * バッジの下に回り、2 つ横並びのままだったため 375px では「無料査定は／
     * こちら」のように文字が割れていた。Figma（タブレット版）と同じく CTA を
     * 先に置き、SP では幅が足りないので縦に積む。
     */
    order: -1;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .kau-intro-closing__ctas > li {
    flex: 0 0 auto;
    width: 100%;
  }
  /*
   * **スタッフの切り抜きはタブレット以下でも出す**（2026-09-14 ユーザー判断・案A）。
   * 以前は「幅が足りない」として display:none にしていた。バッジ枠を狭めて
   * 右に 80px を確保する（SP ブロック側）。
   */
}

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

@media (max-width: 767px) {
  /*
   * **バッジ枠を狭めてスタッフを右に置く**（2026-09-14 ユーザー判断・案A）。
   * バッジは縦積みなので、枠が 95px＋間隔ぶん狭くなっても 1 つ 180px で収まる。
   */
  .kau-intro-closing__row {
    gap: 12px;
    align-items: flex-end;
  }


  .kau-intro-closing__staff {
    width: 80px;
  }

  /*
   * **締めの帯のバッジは縦に積む**（2026-09-14 指示）。
   * タブレットは 3 つを横に並べる（枠 586px）が、375px 幅では収まらず
   * アイコンが切れていた。本文セクションの実績バッジと同じ扱いにする。
   */
  .kau-intro-closing__badges {
    flex-direction: column;
    align-items: flex-start;
    /*
     * **width は auto。** 100% にするとスタッフの切り抜きが右へ押し出されて
     * 帯の外に隠れる（2026-09-14 指摘）。残りの幅を枠が受け、スタッフ 80px を
     * 右に確保する。
     */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    gap: 10px;
    padding: 14px 16px;
  }

  .kau-intro-closing__badges .kau-intro__badge {
    flex: 0 0 auto;
    width: 100%;
  }

  /*
   * **実績バッジは縦に積む。** タブレットは 180px のバッジ 3 つを
   * 横に並べるが（枠 586px）、375px 幅では収まらない。
   */
  .kau-intro__badges {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
    padding: 14px 16px;
  }

  .kau-intro__badge {
    flex: 0 0 auto;
    width: 100%;
  }
}