/**
 * お問い合わせページ（電話でお受けする形）
 *
 * サイトの基調（深緑 × 金 × 生成りのベージュ／見出しは明朝）に合わせる。
 * 要素が電話番号だけなので、ページ全体を中央に寄せて据わりを良くする
 * （ボス指示 2026-08-13）。
 */

/* ── ページ全体を中央寄せ ── */
.contact-page {
  text-align: center;
}

.contact-page__title {
  text-align: center;
}

/* ── 導入文 ── */
.contact-lead {
  margin: 0 0 36px;
  font-size: 16px;
  line-height: 2;
  color: #3a3a3a;
}

/* ── 電話カード（このページの主役） ── */
.contact-card {
  position: relative;
  max-width: 560px;
  /* 中央に置く */
  margin: 0 auto 40px;
  padding: 40px 32px 36px;
  background: #faf8f3;                 /* 生成り */
  border: 1px solid #e7decb;
  border-radius: 4px;
  text-align: center;
}

/* 上辺に金の線を一本。和の設えを崩さない範囲での差し色 */
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #c9a54b, #e2c97f 50%, #c9a54b);
  border-radius: 4px 4px 0 0;
}

.contact-card__note {
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: .04em;
  color: #6b6355;
}

/* 電話番号そのもの。タップ領域を広く取る */
.contact-card__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 8px;
  color: #1e7947;
  text-decoration: none;
  transition: color .2s ease;
}
.contact-card__tel:hover,
.contact-card__tel:focus-visible {
  color: #008236;
}

.contact-card__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.contact-card__number {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  /* 数字は明朝だと細って見えるので、ここだけゴシックで太く */
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 受付時間・定休日（未設定のときはPHP側で出さない） */
.contact-card__hours {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #e7decb;
  font-size: 15px;
}
.contact-card__hours > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.contact-card__hours dt {
  font-size: 13px;
  color: #6b6355;
  white-space: nowrap;
}
.contact-card__hours dd {
  margin: 0;
  color: #2a2a2a;
  white-space: nowrap;
}

/* ── 所在地 ── */
.contact-address {
  max-width: 560px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid #e7decb;
  font-size: 14px;
  line-height: 2;
  color: #6b6355;
}

/* ── スマートフォン ── */
@media (max-width: 600px) {
  .contact-card {
    padding: 32px 18px 28px;
  }
  .contact-card__number {
    font-size: 32px;
  }
  .contact-card__icon {
    width: 24px;
    height: 24px;
  }
  /* 受付時間は横並びだと窮屈なので縦に */
  .contact-card__hours {
    flex-direction: column;
    gap: 8px;
  }
  .contact-card__hours > div {
    justify-content: center;
  }
  .contact-address {
    max-width: none;
  }
}