/* ============================================================
   HARE — お問い合わせ 送信完了（サンクス）ページ 専用
   既存トークン（styles.css）・ボタン（.btn--ghost）を踏襲
   パンくずは category.css、街並みデコ・title-rule は contact.css を共用
============================================================ */

/* 現在地ナビ（共通ヘッダーの該当項目をアクティブ表示） */
.nav__item[aria-current="page"] { color: var(--blue); }
.nav__item[aria-current="page"]::after { width: 100%; }

/* ---------- ヒーロー（contact-hero を共用し、イラストのみ差し替え） ---------- */
.thanks-hero__bg {
  background-image: url("../img/thanks-pc.webp");
}

/* ---------- 下段：白背景の本文 ---------- */
.thanks-body {
  background: #fff; text-align: center;
  padding: clamp(36px, 5vw, 60px) var(--pad) clamp(52px, 6.5vw, 84px);
}
.thanks-title {
  font-family: var(--font-round);
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 800;
  letter-spacing: .04em; line-height: 1.5; color: var(--ink);
}
.thanks-title br { display: none; }
.thanks-body .title-rule { margin: 22px auto 0; }
.thanks-text {
  margin-top: clamp(22px, 3vw, 34px);
  font-size: clamp(14.5px, 1.6vw, 16px); font-weight: 500;
  line-height: 2.15; color: var(--ink); letter-spacing: .02em;
}
.thanks-actions { margin-top: clamp(28px, 3.6vw, 42px); }
.thanks-actions .btn {
  min-width: 280px; padding: 17px 34px; font-size: 15px;
}
.thanks-actions .chev { flex: none; }

/* ============================================================
   レスポンシブ
============================================================ */
/* タブレット（701〜1000px）：ヒーロー画像のサイズを他ページと揃える
   （送信完了のイラストは図柄が密なため contact より少し小さめに） */
@media (max-width: 1000px) {
  .thanks-hero__bg { width: min(72%, 620px); background-position: right bottom; }
}

@media (max-width: 700px) {
  .crumbs { font-size: 11px; }
  .thanks-hero__bg {
    background-image: url("../img/thanks-sp.webp");
    /* ≤1000px ルールの width/position をSPで打ち消す（フル幅・中央下寄せに戻す） */
    width: auto;
    background-size: contain;
    background-position: center bottom;
    aspect-ratio: 818 / 526;
    margin: 6px var(--pad) 14px;
  }
  .thanks-title br { display: inline; }
  .thanks-body { padding-top: 30px; padding-bottom: 40px; }
  .thanks-actions .btn { min-width: 0; width: 100%; max-width: 340px; }
}