@charset "UTF-8";

/*
 * 市区町村ページのヒーロー（#175）
 *
 * **このページ専用。** 背景写真の上に白いカード・SDGs・CTA を絶対位置で置く。
 * 位置は写真の左上を基準にした割合で、画面幅に追従する。
 *
 * デザイン: vault `資料/受領資料/リニューアル用/デザイン/PC/01_ヒーロー_メインビジュアル@2x.png`
 * 数値の正本は同フォルダ `解析/レイヤー詳細ダンプ.txt`。
 */

/*
 * 市区町村ページ新デザイン（#175）
 *
 * 基準値は area-renewal-tokens.css の CSS 変数を使う。**この file に生の色や
 * フォントサイズを直接書かない**（実測値の出どころが 1 箇所に集まらなくなる）。
 *
 * デザイン: vault `資料/受領資料/リニューアル用/デザイン/PC/` と `SP/`
 * **数値の正本は同フォルダ `解析/レイヤー詳細ダンプ.txt`**（`.fig` を完全に
 * デコードした全レイヤーの座標・サイズ・色・フォント・余白。2026-09-10）。
 * ブレイクポイント 768px。SP のフレーム幅が 767px だったため。
 *
 * クラス接頭辞は `kau-`。既存テーマの `cmn__` `mainclm1` などと衝突させない。
 */

/* ------------------------------------------------------------------
 * ヒーロー
 * ------------------------------------------------------------------ */
.kau-hero {
  position: relative;
  font-family: var(--kau-font);
  /*
   * **高さはキャンバス幅から決める**（PC: 1440 × 907/1440 = 907px＝Figma 原寸）。
   * 以前は写真を流し込みで置いて高さを写真に任せていたが、固定幅キャンバス
   * （2026-09-15）では写真だけ画面幅いっぱいに敷き、カードや CTA の絶対配置は
   * キャンバス（このセクションの padding ボックス）を基準にする。
   * 窓幅を変えても段階内では同じ組みのまま、写真の見切れ幅だけが変わる。
   * 以前あった overflow: hidden は外した（写真を左右に広げるため。横方向は
   * html 側の overflow-x: clip が閉じる）。
   */
  height: calc(var(--kau-canvas-w) * 907 / 1440);
}

/*
 * 写真は画面幅いっぱい・高さはセクションに合わせて cover。
 * `blocks.css` の全幅帯（`.kau-page > *`）からヒーローは外している（下の
 * `.kau-page > .kau-hero`）ので、ここで写真だけを左右に広げる。
 */
.kau-hero__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--kau-vw) / 2);
  width: var(--kau-vw);
}

.kau-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 支給写真（2880×1621・16:9）を 1440:907 の枠に入れると左右が切れる。右端のジェットスキーを残し、カードで隠れる左側を切る */
  object-position: right center;
}

.kau-page > .kau-hero {
  margin-inline: 0;
  padding-inline: 0;
}


/*
 * 未支給のページは既存画像（1150×407）へ落ちる。縦横比が新デザインと合わず
 * カードが写真からはみ出すため、写真側を伸ばして最低限の高さを確保する。
 * **崩れて出ることを許容し、画像が出ない状態は避ける**（差し替え漏れに気づけるよう）。
 */
.kau-hero--fallback .kau-hero__photo img {
  /* 写真は cover で敷くので高さの補正は不要になった（2026-09-15） */
  object-position: center;
}

/*
 * **カード・SDGs・CTA はそれぞれ絶対位置で置く**（縦に積まない）。
 * デザインでは 3 つが写真の上のばらばらな位置にあり、flex の縦積みでは合わない。
 *
 * 位置は**写真の左上を基準にした割合**。写真は `width:100%` で縦横比が保たれる
 * （PC 1440×907／SP 767×1162）ので、割合で置けば画面幅に追従する。
 *
 * 実測（写真の左上を 0,0 とした位置。2026-09-10・`.fig` の座標）:
 *
 *            PC（1440×907）                  タブレット（767×1162）
 *   カード   左 16px(1.1%) 上 68px(7.5%)      左 24.3%(中央) 上 120px(10.3%)
 *   SDGs     左 16px(1.1%) 上 558px(61.5%)    左 38.5%(中央) 上 33px(2.8%)
 *   CTA      左 163px(11.3%) 下 11px          左 14px(1.8%) 下 24px
 *
 * **以前は「ヒーロー高さ 1154 の 21%」としていたが誤り。** 1154 はヘッダーと
 * パンくずを含む Figma のフレーム高さで、実装の `.kau-hero` は写真だけ。
 * 写真基準では 68/907 ＝ 7.5% になる。
 */
.kau-hero__inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


.kau-hero__inner > * {
  pointer-events: auto;
}

/* ---- 白カード ---- */
.kau-hero__card {
  position: absolute;
  left: 1.1%;
  top: 7.5%;
  box-sizing: border-box;
  /*
   * 幅は 700px 固定（中の 72px の見出しが入る幅が必要なので割合にしない）。
   * 画面が狭いときだけ写真の中に収まるよう max-width で抑える。
   */
  width: min(calc(100% - 32px), var(--kau-card-w));
  /* Figma 実測: カード 700×450。緑ピルの上端 25px、実績バッジの下 18px */
  padding: var(--kau-card-pad);
  border-radius: var(--kau-radius-lg);
  background: var(--kau-card-bg);
  border: var(--kau-card-border);
  box-shadow: var(--kau-card-shadow);
  /* 半透明の白 90% に加えて、背後の写真をぼかす（Figma の BACKGROUND_BLUR 4） */
  -webkit-backdrop-filter: blur(var(--kau-card-blur));
  backdrop-filter: blur(var(--kau-card-blur));
  text-align: center;
}

/* Figma 実測: 210×32・角丸いっぱい・内側 6px/16px・14px w700 lh20 */
.kau-hero__area {
  display: inline-block;
  margin: 0 auto 16px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: var(--kau-green);
  color: var(--kau-white);
  font-size: 13px;
  font-weight: var(--kau-heading-weight);
  line-height: 20px;
}

.kau-hero__eyebrow {
  /* 実測: 30px lh36。次の大見出しまで 8px */
  margin: 0 0 6px;
  color: var(--kau-gray-900);
  font-size: 26px;
  font-weight: var(--kau-heading-weight);
  line-height: 32px;
}

.kau-hero__heading {
  margin: 0;
  color: var(--kau-green);
  font-size: var(--kau-heading-size);
  font-weight: var(--kau-heading-weight);
  line-height: var(--kau-heading-leading);
  letter-spacing: var(--kau-heading-tracking);
}

/*
 * Figma 実測（カードの上端を 0 とした位置）:
 *   大見出しの下端 196 → 罫線 220 → 説明文の上端 247
 * 幅は 350px ＝ カード 700 のちょうど半分。
 */
.kau-hero__rule {
  width: 50%;
  margin: 18px auto 20px;
  border: 0;
  border-top: 1px solid var(--kau-green);
}

/*
 * **幅を 360px に固定する。** Figma 実測でこの文の枠が 360×88（カード 700 の中で中央）。
 * 制限しないとカード幅いっぱいに広がり、2 行で「ス／タッフ」のように不自然に折れる。
 * 18px・1 行あたり 20 文字で、デザインと同じ 3 行になる。
 */
.kau-hero__lead {
  max-width: 340px;
  margin: 0 auto;
  color: var(--kau-gray-700);
  font-size: 16px;
  font-weight: var(--kau-body-weight);
  line-height: 26px;
}

/* 実績バッジまで 25px（実測: 説明文の下端 335 → バッジの上端 360） */
.kau-hero__lead + .kau-hero__badges {
  margin-top: 20px;
}

/* ---- 実績バッジ3つ ---- */

/* Figma 実測: バッジ 204×72 が 3 つ・間隔 8px（合計 628px） */
.kau-hero__badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

/*
 * **grid ではなく flex にする。** 以前は円を `grid-row: 1 / 3` で 2 行に
 * またがらせていたが、円（72px）とテキスト（20+15＝35px）の差 37px が
 * 行の高さに配分され、タイトルと注記の間が開いた。`align-content` では
 * 止まらない（行そのものが引き伸ばされるため。2026-09-10 に 2 回指摘）。
 *
 * テキスト 2 行を `-body` で包み、円と横並びにすれば行は内容の高さのまま。
 */
.kau-hero__badge {
  display: flex;
  align-items: center;
  /* 円とテキストの間隔 12px（実測: 円の右端 113 → 文字の開始 125） */
  gap: 12px;
  text-align: left;
}

.kau-hero__badge-icon {
  flex: 0 0 auto;
}

/* タイトル 20px ＋ 注記 15px ＝ 35px。実測の Margin 122×35 と一致する */
.kau-hero__badge-body {
  display: block;
}

.kau-hero__badge-title,
.kau-hero__badge-note {
  display: block;
  /* カードを 660px に詰めても注記が折れないように 1 行固定（2026-09-30） */
  white-space: nowrap;
}

/*
 * 円は 72px・線 2px。**線の色は見出しと同じ緑（--kau-green）**で、
 * 中のアイコンだけが別の緑（--kau-green-icon）。以前は円も
 * --kau-green-icon にしていたが実測と違っていた。
 */
.kau-hero__badge-icon {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--kau-green);
  position: relative;
}

/*
 * アイコンは mask-image で置く。**背景画像ではなく mask にしている理由**は、
 * 色を CSS 変数（--kau-green-icon）で決められること。SVG のファイルを色ごとに
 * 用意する必要がなく、色の変更が 1 箇所で済む。
 */
.kau-hero__badge-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  /* 実測: 円 72 の中に 48 のアイコン枠（上下左右 12px の余白） */
  width: 48px;
  height: 48px;
  background-color: var(--kau-green-icon);
  -webkit-mask: var(--kau-badge-icon) no-repeat center / contain;
  mask: var(--kau-badge-icon) no-repeat center / contain;
}

/*
 * トラック・¥・握手の順（デザインと同じ並び）。装飾であり読み上げ対象ではない
 * （マークアップ側で aria-hidden 済み）。
 *
 * **Figma のレイヤー名がそのまま Iconify のアイコン名だった**（2026-09-10 判明）。
 * `.fig` の埋め込み画像には含まれていなかったが、書き出し依頼は不要で、
 * 同じアイコンを Iconify から取得して配置している。いずれもオープンソース。
 *
 *   eva:car-fill              → badge-truck.svg（Eva Icons・MIT）
 *   f7:money-yen-circle       → badge-yen.svg（Framework7 Icons・MIT）
 *   boxicons:handshake-filled → badge-hand.svg（Boxicons）
 */
.kau-hero__badge-icon--1 { --kau-badge-icon: url("../../../images/area-renewal/badge-truck.svg"); }

.kau-hero__badge-icon--2 { --kau-badge-icon: url("../../../images/area-renewal/badge-yen.svg"); }

.kau-hero__badge-icon--3 { --kau-badge-icon: url("../../../images/area-renewal/badge-hand.svg"); }

/* 見出しは折り返させない。「その場で現金買取」が「現金買／取」と割れるのを防ぐ */
.kau-hero__badge-title {
  white-space: nowrap;
  color: var(--kau-gray-600);
  font-size: 14px;
  font-weight: var(--kau-heading-weight);
  line-height: 20px;
}

/* 実測: 10px w400 lh15。ここだけ本文より細い（400） */
.kau-hero__badge-note {
  color: var(--kau-gray-500);
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
}

/* ---- SDGs ---- */

/* 実測: 431×95 の枠。PC はカードの下・左端、SP はカードの上・中央 */
.kau-hero__sdgs {
  position: absolute;
  left: 1.1%;
  top: 61.5%;
  margin: 0;
  padding: 10px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.kau-hero__sdgs img {
  display: block;
  /* 実測の枠は 431×95。中の画像を枠いっぱいに近づける */
  width: 340px;
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
 * CTA（ヒーロー下部）
 * ------------------------------------------------------------------ */

/* 実測: 1163×140・左 163px・下端から 11px(1.2%)。163 = (1440−1163)/2 で中央置きと同じ */
.kau-hero__cta {
  box-sizing: border-box;
  position: absolute;
  /* 実測: 左 163px ＝ (1440−1163)/2 なので、上限を掛けても中央置きで一致する */
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.2%;
  /*
   * **実測の 1163px を上限にする。** 1440px より広い画面で割合のまま
   * 伸ばすと、文字サイズは上限で止まるのに箱だけ広がり、オレンジの
   * ボタンの左右が間延びする（2026-09-11 指摘）。
   */
  width: min(calc(100% - 32px), 80.8%, 1163px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma の auto-layout の間隔 */
  gap: var(--kau-cta-gap);
  /*
   * 実測: 白ボックス 1163 の中で中身が 1103（左右の余白 30px ずつ）。
   * **中身を幅いっぱいに伸ばす**。以前はボタンに max-width を付けていたため、
   * 画面が広いと中身が中央に寄って左右に大きな余白ができた（2026-09-10 指摘）。
   */
  padding: 1.2em 2.1em;
  border-radius: var(--kau-radius-lg);
  background: var(--kau-white);
  font-family: var(--kau-font);
  /*
   * **中の文字はすべて em で指定し、この基準サイズで一括して縮む。**
   * 写真は `width: 100%` で画面幅に追従するのに、CTA の中身が固定 px だと
   * 画面が狭いほど写真に対して大きく見える（2026-09-10 指摘）。
   *
   * 上限は実測どおり基準 16px（メイン 40px・サブ 20px・「30」36px）。
   * 以前は 0.85 倍に縮めていたが「小さい」と指摘があり実測へ戻した
   * （2026-09-11）。1440px 未満では写真に合わせて比例で縮む。
   */
  font-size: min(16px, calc(var(--kau-canvas-w) * 0.0111));
}

@media (max-width: 1199px) {
  /*
     * **SP は絶対配置をやめ、写真を背景に敷いて通常フローで縦に積む。**
     * デザインの SP フレームは 767px 幅だが、実機（375px 前後）では
     * 固定比率の写真の中にカードと CTA が収まらず重なる（2026-09-11 指摘）。
     * 高さを中身に追従させることで、どの幅でも崩れない。
     * 並び順は SP デザインどおり SDGs → カード → CTA。
     */

  /* タブレット・SP は中身の高さに任せる（写真は基本側の absolute + cover のまま） */
  .kau-hero {
      height: auto;
    }
  /* 並びは SP デザインどおり SDGs → カード。markup はカードが先なので order で入れ替える */
  .kau-hero__inner {
      /*
       * static だと絶対配置の写真より下に描画され、CTA の白い箱などが
       * 写真に隠れる（SDGs と同根・2026-09-14）。relative で前面に出す。
       */
      position: relative;
      inset: auto;
      display: flex;
      flex-direction: column;
      /* 先方指摘（2026-09-30）: カードが全面に見えるので、上下左右に背景が見える余白を取る */
      padding: 28px 24px 40px;
    }

  .kau-hero__card {
      position: static;
      transform: none;
      width: auto;
      max-width: 440px;
      margin: 16px auto 0;
      padding: 18px 16px 16px;
    }

  .kau-hero__sdgs {
      /* static だと absolute の写真より下に描画されて見えなくなる */
      position: relative;
      inset: auto;
      transform: none;
      order: -1;
      width: fit-content;
      margin: 0 auto;
      padding: 6px 12px;
      border-radius: 10px;
    }

  .kau-hero__sdgs img {
      width: 190px;
    }

  .kau-hero__area {
      margin-bottom: 10px;
      font-size: 12px;
    }

  .kau-hero__eyebrow {
      font-size: 17px;
      line-height: 24px;
    }

  /* 実測: 14px lh20（PC の 18px/29 より小さい） */
    
  .kau-hero__lead {
      font-size: 13px;
      line-height: 19px;
    }

  /* 実測: 250px ＝ SP カード 417 の 60%。上 13px / 下 13px */
    
  .kau-hero__rule {
      width: 60%;
      margin: 10px auto;
    }

  /*
     * **SP でもバッジは横 3 列のまま**（縦 1 列にしない）。ただし PC と違い
     * 円が上・文字が下の縦組みになる（実測: 円 72 の下端 327 → 文字 335）。
     * 文字サイズ・円の大きさは PC と同一（14px / 10px / 72px）。
     */
    
  .kau-hero__badges {
      gap: 20px;
    }

  /* SP は円が上・文字が下の縦組み（実測） */
    
  .kau-hero__badge {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
    }

  /* 見出しの折り返し防止は PC 用。狭い画面では折り返させる */
    
  .kau-hero__badge-title {
      white-space: normal;
    }

  /*
     * CTA も通常フロー。**SP デザインも PC と同じ「一言（左）＋ボタン（右）」
     * の横並び**（2026-09-14 指摘。以前は縦積みにしていた）。
     * 基準サイズは画面幅に比例させ、デザインのフレーム幅 767px で原寸
     * （16px）になる。375px では 9px まで縮む。
     */
  .kau-hero__cta {
      /* static だと絶対配置の写真の下に描画される（SDGs と同根） */
      position: relative;
      inset: auto;
      transform: none;
      gap: 10px;
      width: auto;
      margin: 16px 14px 24px;
      font-size: clamp(9px, calc(var(--kau-canvas-w) * 0.021), 16px);
      padding: 0.9em 1.1em;
    }

  /* 一言の列は縮めて折り返しを許し、残りをボタンに渡す */
  .kau-hero__cta .kau-cta-lead {
      flex: 0 1 auto;
      min-width: 0;
      font-size: 0.85em;
    }

  .kau-hero__cta .kau-cta-button {
      flex: 1 1 auto;
      width: auto;
    }

  /* 375px でも「WEB 査定はこちら」が 1 行に入る大きさ（幅と比例で保たれる） */
  .kau-hero__cta .kau-cta-button__main {
      font-size: 2.1em;
    }
}

/*
 * 実績バッジの詰め。以前は 480px 以下だけだったが、SP のキャンバスは常に 440px
 * （固定幅・2026-09-15）なので SP 全体に掛ける。窓幅 600 と 440 で見た目が
 * 変わらないようにするため。
 */
@media (max-width: 767px) {
  .kau-hero__badges {
      gap: 8px;
    }

  .kau-hero__badge-icon {
      width: 48px;
      height: 48px;
    }

  .kau-hero__badge-icon::before {
      width: 30px;
      height: 30px;
    }

  .kau-hero__badge-title {
      font-size: 11px;
    }

  .kau-hero__badge-note {
      font-size: 9px;
    }
}

/* ==================================================================
 * SP（767px 以下）
 *
 * **タブレット（1024px 以下）の指定を継承し、差分だけ書く。**
 * デザインは PC 版とタブレット版の 2 つだけで SP 版は無いため、
 * タブレット版を狭い画面に収まるよう詰めている（2026-09-14）。
 * ================================================================== */

@media (max-width: 767px) {
  /*
   * **バッジの文言は左寄せ**（2026-09-15 指示）。狭い幅では「その場で現金買／取」
   * のように折り返すため、中央寄せだと 2 行目だけ中央に浮く。円は中央のまま、
   * 文字の箱を円の幅いっぱいに広げて左から始める。
   */
  .kau-hero__badge-body {
    width: 100%;
    text-align: left;
  }

  /* カードは 480px 固定だと 375px 幅からはみ出す */
  .kau-hero__card {
    width: calc(100% - 16px);
  }
}