/* お問い合わせフォーム用。デザインシステム（styles.css）の .field / .input を土台に、
   必須マーク・エラー表示・補足文だけを足している。 */

#contact-form .field > label {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.req {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
}

.opt {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
}

#contact-form .input {
  font-family: inherit;
  font-size: 16px;          /* 16px未満だとiOSで入力時に画面が拡大される */
  line-height: 1.7;
  min-height: 48px;         /* 指で押せる大きさ */
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
#contact-form textarea.input { min-height: 180px; border-radius: var(--radius-md); }
#contact-form select.input { border-radius: var(--radius-md); }

/* 入力エラー */
#contact-form .input[aria-invalid="true"] {
  border-color: var(--color-accent-600);
  background: var(--color-accent-100);
}
.error {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--color-accent-800);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.error::before { content: "⚠"; flex: none; }
.error[hidden] { display: none; }

/* 補足文 */
.hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-neutral-600);
}

/* 確認用メールが一致したときの合図 */
.match-ok {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--color-accent-2-800);
  display: flex;
  gap: 6px;
}
.match-ok::before { content: "✓"; }

#submit:disabled { opacity: 0.5; cursor: not-allowed; }