@charset "UTF-8";

/*
 * CTA ボタン（#175）
 *
 * **ページを問わず使える汎用パーツ。** オレンジの大きいボタン（`kau-cta-button`）と、
 * 本文中に置く小さい 2 つ（`kau-mini-cta`。無料査定 / LINE）。
 *
 * 中の文字はすべて `em` で書き、親の `font-size` 1 つで一括して縮む。
 * 置き場所ごとの配置（絶対位置・幅）は、それを使う側の CSS が持つ。
 */

/* ---- ボタンの左に添える緑の一言（置き場所によらず同じ） ---- */

.kau-cta-lead {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  color: var(--kau-gray-900);
}

.kau-cta-lead__top,
.kau-cta-lead__sub {
  display: block;
}

/* 実測: 20px w700 #2b8e28（基準 16px に対して 1.25em）。左右に緑の飾りが付く */
.kau-cta-lead__top {
  display: block;
  color: var(--kau-green);
  font-size: 1.25em;
  font-weight: var(--kau-heading-weight);
  line-height: 1.4;
}

.kau-cta-lead__top::before { content: "＼"; }

.kau-cta-lead__top::after { content: "／"; }

.kau-cta-lead__sub {
  color: var(--kau-gray-500b);
  font-size: 1em;
  font-weight: var(--kau-heading-weight);
  line-height: 1.5;
}

/* 「60」だけ 24px の Black（実測・基準の 1.5 倍） */
.kau-cta-lead__sub b {
  color: var(--kau-green);
  font-size: 1.5em;
  font-weight: 900;
}

/* ---- オレンジの大きいボタン ---- */
.kau-cta-button {
  /* 幅いっぱいに伸ばす（実測の比率は 794/1103 ＝ 72%） */
  flex: 1 1 auto;
  box-sizing: border-box;
  display: block;
  padding: 1em 4em 0.9em 1.4em;
  border-radius: var(--kau-radius-lg);
  /* 左→右のグラデーション（画素から方向を実測） */
  background: linear-gradient(to right, var(--kau-cta-from), var(--kau-cta-to));
  color: var(--kau-white);
  text-align: center;
  text-decoration: none;
  position: relative;
}

.kau-cta-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.7em;
  width: 0.85em;
  height: 0.85em;
  margin-top: -0.42em;
  border-top: 0.21em solid currentColor;
  border-right: 0.21em solid currentColor;
  transform: rotate(45deg);
}

.kau-cta-button__main,
.kau-cta-button__sub {
  display: block;
}

/* 実測: 40px（基準の 2.5 倍）。メールのアイコンを左に添える */
.kau-cta-button__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: 2.5em;
  font-weight: var(--kau-heading-weight);
  line-height: 1.2;
}

/* SP 用の改行。PC では 1 行（実測どおり） */
.kau-cta-button__break {
  display: none;
}

@media (max-width: 1199px) {
  .kau-cta-button__break {
    display: inline;
  }

  /*
   * アイコンは 1 行目に添える（Figma SP 実測: ✉ 今すぐ無料の／WEB 査定はこちら）。
   * flex の列のままだとアイコンの幅のぶん本文が狭まり 3 行に折れる。
   */
  .kau-cta-button__main {
    display: block;
    text-align: center;
  }

  .kau-cta-button__icon {
    display: inline-block;
    vertical-align: -0.08em;
    margin-right: 0.4em;
  }
}

/* SVG が currentColor なので mask で白く塗る */
.kau-cta-button__icon {
  flex: 0 0 auto;
  /* 文字と同じ大きさ（実測はどちらも 40px） */
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../../../../images/area-renewal/mail.svg") no-repeat center / contain;
  mask: url("../../../../images/area-renewal/mail.svg") no-repeat center / contain;
}

/* 実測: 20px w700（基準の 1.25 倍） */
.kau-cta-button__sub {
  font-size: 1.25em;
  font-weight: var(--kau-heading-weight);
}

/* 「30」だけ 36px・黄色（実測 #fde047・基準の 2.25 倍） */
.kau-cta-button__sub b {
  color: var(--kau-accent-yellow);
  font-size: 1.8em;
}

/* サブの一文が 375px で 1 行に収まる大きさに（基底の 1.25em より後に置く） */
@media (max-width: 1199px) {
  .kau-cta-button__sub {
    font-size: 1.05em;
  }
}

/*
 * SP のメインビジュアル内 CTA（白カード幅 376px 固定）では「…現在およそ 30 分以内」の
 * 「内」だけが次の行に落ちていた（2026-09-30 先方指摘・iPhone 幅）。折り返しを禁止し、
 * 文字と「30」を少し詰めて 1 行に収める。ボタンの位置・大きさは変えない。
 */
@media (max-width: 767px) {
  .kau-hero__cta .kau-cta-button__sub {
    white-space: nowrap;
    font-size: 0.92em;
    letter-spacing: -0.02em;
  }

  .kau-hero__cta .kau-cta-button__sub b {
    font-size: 1.6em;
  }
}

/* 実測: 380×80・角丸 10・右端に白い矢印 */
.kau-mini-cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* 中身は中央揃え（2026-09-10 ユーザー指示。大小どちらのボタンも） */
  justify-content: center;
  gap: 12px;
  min-height: 80px;
  padding: 12px 40px 12px 20px;
  border-radius: 10px;
  color: var(--kau-white);
  text-decoration: none;
  position: relative;
}

.kau-mini-cta--web { background: var(--kau-mini-cta-web); }

.kau-mini-cta--line { background: var(--kau-mini-cta-line); }

/* 矢印は実測 9×19 の白い山形。線 5px */
.kau-mini-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  transform: rotate(45deg);
}

/*
 * LINE のアイコン。**`<img>` で置くと黒くなる。**
 * Iconify の SVG は `fill="currentColor"` で、`<img>` 経由だと文字色が伝わらず
 * 既定の黒で描かれる。デザインは白なので `mask` で塗る（実績バッジと同じ方式）。
 */
.kau-mini-cta__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 39px;
  background-color: var(--kau-white);
  -webkit-mask: url("../../../../images/area-renewal/line.svg") no-repeat center / contain;
  mask: url("../../../../images/area-renewal/line.svg") no-repeat center / contain;
}

.kau-mini-cta__title,
.kau-mini-cta__note {
  display: block;
  letter-spacing: 0.04em;
}

.kau-mini-cta__title {
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
  line-height: 1.3;
}

.kau-mini-cta__note {
  font-size: 16px;
  font-weight: var(--kau-heading-weight);
  line-height: 1.3;
}

/* 帯の中の CTA は小さい版（実測 380×54）。中央揃えは親の指定を引き継ぐ */
.kau-mini-cta--sm {
  width: 380px;
  min-height: 54px;
  padding: 8px 36px 8px 16px;
}

.kau-mini-cta--sm .kau-mini-cta__title {
  font-size: 20px;
}

.kau-mini-cta--sm .kau-mini-cta__note {
  font-size: 14px;
}

@media (max-width: 1199px) {
  .kau-cta-button {
      padding: 0.9em 2.6em 0.8em 1em;
    }

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

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

  .kau-mini-cta--sm {
      width: auto;
    }
}

/* ---- 単体で置く帯（ページ末尾・出張買取エリアの下） ---- */

/*
 * ヒーローの CTA は写真に重ねる白いボックスだが、こちらは背景が白いところに
 * そのまま置くので**枠を持たない**。中身（一言＋オレンジのボタン）は同じ。
 *
 * 基準の文字サイズはデザインの 16px。ヒーロー側が 13.6px 上限なのは
 * 写真より小さく見せる必要があるためで、単体で置くこちらには当てはまらない。
 */
.kau-cta-band {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 1100px;
  margin: 0 auto 4.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kau-cta-gap);
  font-family: var(--kau-font);
  font-size: clamp(11px, calc(var(--kau-canvas-w) * 0.0115), 16px);
}

@media (max-width: 1199px) {
  /*
   * SP は縦積み。横並びのままだと「今すぐ無料の WEB 査定はこちら」が
   * 画面幅に収まらず、基準サイズを詰めるしかなくなる。
   */
  .kau-cta-band {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 2.5rem;
    /* ヒーローの CTA（11px）と同じ基準に。13px だと「WEB 査定はこちら」が折れる */
    font-size: 11px;
  }

  /* 縦積みでは `flex: 1 1 auto` が高さに効くので、幅は明示する */
  .kau-cta-band .kau-cta-button {
    width: 100%;
  }
}