/* 予約を主導線に、LINE・電話を順に案内する */
.contact { width: min(1000px, calc(100% - 96px)); margin-inline: auto; padding: 48px 0 72px; }
.contact__header { margin-bottom: 36px; }
.contact__eyebrow { border-left: 3px solid var(--color-store-blue); padding-left: 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.contact__title { font-size: 36px; font-weight: 700; letter-spacing: -.04em; margin-top: 12px; }
.contact__heading { font-size: 26px; font-weight: 700; }
.contact__text { font-size: 15px; line-height: 1.9; margin-top: 12px; max-width: 650px; }
.contact__reservation { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 32px; border-top: 4px solid var(--color-store-blue); background: var(--color-store-paper); }
.contact__trial { font-size: 15px; font-weight: 700; }
.contact__price { font-size: 28px; font-weight: 700; margin-top: 8px; }
.contact__tax { display: block; font-size: 12px; font-weight: 400; }
.contact__booking-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; margin-top: 20px; padding: 16px 20px; background: #e8aa50; color: var(--color-text); border-radius: 4px; font-size: 15px; font-weight: 700; }
.contact__booking-link:hover { background: #d99a3d; }
.contact__text-link { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; margin-top: 14px; padding-block: 6px; border-bottom: 1px solid var(--color-text); color: var(--color-text); font-size: 14px; font-weight: 700; }
.contact__text-link:hover { border-color: var(--color-store-blue); }
.contact__line { padding-block: 40px 32px; }
.contact__note { margin-top: 12px; font-size: 13px; color: var(--color-text-muted); }
.contact__phone { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 48px; border-top: 1px solid var(--color-border-light); padding-top: 28px; }
.contact__phone-title { font-size: 19px; font-weight: 700; }
.contact__phone-number { display: inline-block; min-height: 44px; font-size: 26px; font-weight: 700; color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.contact__hours { font-size: 13px; line-height: 1.9; margin-top: 6px; }
.contact :focus-visible { outline: 3px solid var(--color-text); outline-offset: 5px; }
@media (max-width: 767px) {
  .contact { width: calc(100% - 48px); padding-block: 28px 48px; }
  .contact__header { margin-bottom: 24px; }
  .contact__title { font-size: 26px; }
  .contact__heading { font-size: 23px; }
  .contact__reservation { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 18px; }
  .contact__text { font-size: 14px; }
  .contact__price { font-size: 26px; }
  .contact__trial { font-size: 14px; }
  .contact__booking-link { padding-inline: 12px; font-size: 13px; gap: 8px; }
  .contact__line { padding-block: 32px 28px; }
  .contact__phone { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 24px; }
}