/* ==========================================================================
   お問い合わせ（pages/contact.html）
   Figma PC 537:18514 / SP 624:6607
   フォームの部品は components.css の .c-form-card / .c-form / .c-form-field / .c-input ほか
   ========================================================================== */

/* ---- hero（PC 537:18520 / SP 624:6639） ---- */
.p-contact-hero {
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-white);
}

.p-contact-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-32);
  text-align: center;
}

/* 英字のラベル（CONTACT） */
.p-contact-hero__label {
  padding: 3px 11px; /* 4px 12px から枠線1pxを引く */
  border: 1px solid var(--color-text-primary);
  border-radius: 20px;
  font: 700 12px/1.4 var(--font-en);
  color: var(--color-text-strong);
  text-transform: uppercase;
}

.p-contact-hero__title {
  font: 700 24px/1.4 var(--font-jp);
  color: var(--color-text-dark);
}

.p-contact-hero__lead {
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-sub);
}

/* ---- contact-main（PC 537:18524 / SP 624:6643） ---- */
.p-contact-main {
  padding-block: var(--space-24) var(--space-40);
}

.p-contact-main__inner {
  display: grid;
  gap: var(--space-24);
}

/* ---- 窓口・運営情報（PC 537:18586 / SP 624:6705） ---- */
.p-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-white);
}

.p-contact-info__title {
  font: 700 16px/1.6 var(--font-jp);
  color: var(--color-text-dark);
}

.p-contact-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-contact-info__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.p-contact-info__term {
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-inverse-muted);
}

.p-contact-info__desc {
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-dark);
}

@media (min-width: 1025px) {
  .p-contact-hero__inner {
    gap: var(--space-16);
    padding-block: var(--space-64);
  }

  .p-contact-hero__title {
    font-size: 40px; /* Figmaの実値（文字スタイルの15種に無い） */
    color: var(--color-text-primary);
  }

  .p-contact-hero__lead {
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text-secondary);
  }

  .p-contact-main {
    padding-block: var(--space-48) var(--space-120);
  }

  /* フォーム 760px ＋ 余白 48px ＋ 窓口情報 392px（計1200px）。幅が狭いときは比率で縮む */
  .p-contact-main__inner {
    grid-template-columns: minmax(0, 760fr) minmax(0, 392fr);
    gap: var(--space-48);
    align-items: start;
  }

  .p-contact-info {
    padding: var(--space-32);
  }

  .p-contact-info__title {
    font: 700 20px/1.4 var(--font-jp);
    color: var(--color-text-primary);
  }

  .p-contact-info__term {
    color: var(--color-text-muted);
  }

  .p-contact-info__desc {
    color: var(--color-text-primary);
  }

  /* PCだけ：メールアドレスは欧文12px、運営会社は太字（Figma 537:18592 / 537:18595） */
  .p-contact-info__desc--email {
    font: 400 12px/1.4 var(--font-en);
  }

  .p-contact-info__desc--strong {
    font-weight: 700;
  }
}