/* お問い合わせフォームの追加部品（選択欄・補足文・送信失敗/完了パネル・honeypot）。page.css の値に合わせる。 */

.contact-field select {
  width: 100%;
  min-height: 52px;
  padding: 10px 40px 10px 18px;
  border: 1px solid #cfd9e4;
  border-radius: 2px;
  color: #172033;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23596579' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
  font: inherit;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
}

.contact-field select:hover { border-color: #9cb1c5; }

.contact-field select:focus {
  border-color: #0d1f4d;
  outline: 3px solid rgba(126, 199, 255, .42);
  outline-offset: 1px;
}

.contact-field .contact-field__sub { margin-top: 8px; }

.contact-field__help {
  margin: 6px 0 0;
  color: #596579;
  font-size: 12.5px;
  line-height: 1.7;
}

.contact-page--editorial .contact-field select {
  min-height: 46px;
  padding: 9px 38px 9px 15px;
  font-size: 14px;
}

.contact-page--editorial .contact-field .contact-field__sub { font-size: 14px; }

.contact-service-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 3px solid #cba45a;
  background: #f6f1e4;
  color: #172033;
  font-size: 14px;
  font-weight: 700;
}

/* honeypot: 画面外に置く（display:none だと避けるボットがいるため）。支援技術にも読ませない。 */
.contact-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-turnstile { margin: 14px 0 0; }

.contact-send-error {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid #b42318;
  border-radius: 2px;
  background: #fffafa;
  color: #3b1410;
  font-size: 14px;
  line-height: 1.8;
}

.contact-send-error:focus { outline: 3px solid rgba(180, 35, 24, .25); outline-offset: 2px; }
.contact-send-error p { margin: 0 0 8px; }

.contact-send-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.contact-send-error__note { color: #596579; font-size: 13px; }

.contact-result {
  padding: 28px 24px;
  border: 1px solid #cfd9e4;
  border-top: 3px solid #0d1f4d;
  background: #ffffff;
  color: #172033;
  line-height: 1.9;
}

.contact-result:focus { outline: 3px solid rgba(126, 199, 255, .42); outline-offset: 2px; }
.contact-result h2 { margin: 4px 0 12px; font-size: clamp(22px, 4vw, 28px); }
.contact-result__id { font-size: 16px; }
.contact-result__id strong { font-size: 20px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.contact-result__note { color: #596579; font-size: 13.5px; }
.contact-result__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

@media (max-width: 720px) {
  .contact-send-error__actions .button { width: 100%; text-align: center; }
  .contact-result { padding: 22px 16px; }
}

/* 同意欄の補足文は、リンクを含めて1つの文として流す（アイコンだけ左に固定）。小さすぎる文字は読める大きさに戻す。 */
.contact-consent > p:not(.field-error) { align-items: flex-start; }
.contact-consent > p:not(.field-error) > i { margin-top: .35em; }
.contact-page--editorial .contact-consent > p:not(.field-error) { font-size: 12px; line-height: 1.7; }

/* .contact-form などは display を指定しているため、hidden 属性が効かなくなる。明示して隠す。 */
.contact-form[hidden],
.contact-result[hidden],
.contact-send-error[hidden],
.contact-turnstile[hidden],
.contact-service-note[hidden] { display: none !important; }

/* 固定ヘッダーに隠れないよう、フォーカス移動・スクロール時の上余白を取る */
.contact-result,
.contact-send-error { scroll-margin-top: 96px; }