/* =========================================================
   お問い合わせ (Contact) — no Claude Design mock; built from
   the shared intro, form and button parts.
   ========================================================= */

.contact {
  padding: 0 var(--page-gutter) clamp(64px, 9vw, 140px);
}
.contact__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 64px;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact__inner { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); }
}

.contact-info {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-text-on-light);
}
.contact-info__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.contact-info__block > p { margin: 0; }
.contact-info__label {
  font: 400 14px/1.8 var(--font-mincho);
  letter-spacing: .06em;
  color: var(--color-text-sub-on-light);
}
.contact-info__tel {
  font: 300 36px/1 var(--font-display);
  letter-spacing: .08em;
}
.contact-info__tel:hover { color: var(--color-secondary-on-light); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-form[hidden],
.form-done[hidden] { display: none; }
.contact-form__actions {
  border-top: 1px solid var(--color-border-light);
  padding-top: 32px;
  display: flex;
  justify-content: flex-end;
}