/* ===== contact.css (scoped to .contact-section only) ===== */

/* 外枠（このフォーム領域だけ） */
.contact-section {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.contact-section *, .contact-section *::before, .contact-section *::after {
  box-sizing: border-box;
}

/* ラベル（プライバシー同意のラベルとはクラスで分離） */
.contact-section label:not(.privacy-label) {
  position: relative;
  display: block;
  margin: 10px 0 0;
  font-weight: 600;
  padding-bottom: 10px; /* 右下の説明リンク分の余白 */
}

/* 説明文を右下に配置（textareaの注意書きに使用） */
.contact-section label a {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 12px;
  color: #555;
  text-decoration: none;
}

/* 入力フィールド */
.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
}

.contact-section textarea {
  resize: vertical;
  min-height: 160px;
}

/* フォーカス */
.contact-section input[type="text"]:focus,
.contact-section input[type="email"]:focus,
.contact-section textarea:focus {
  outline: none;
  border-color: #888;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.04),
    inset 2px 2px 5px #bebebe,
    inset -2px -2px 5px #ffffff;
}

/* エラーメッセージ（空なら非表示） */
.contact-section .error {
  color: #b00020;
  font-size: .92rem;
  margin: 4px 0 0;
  line-height: 1.6;
  display: block;
}
.contact-section .error:empty { display: none; }

/* 無効時の赤ハイライト（全フィールドに確実適用） */
.contact-section input[type="text"].is-invalid,
.contact-section input[type="email"].is-invalid,
.contact-section textarea.is-invalid {
  border-color: #e11;
  /* 既存の inset 影を打ち消して赤枠を前面に */
  box-shadow:
    0 0 0 2px rgba(221,17,17,.10),
    inset 0 0 0 0 transparent;
}

/* スパム対策用の隠しフィールド（完全に隠す） */
.contact-section .hidden-hp {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* reCAPTCHA と同意エリア */
.contact-section .g-recaptcha { margin: 8px 0 4px; }

.contact-section .privacy-consent {
  margin-top: 12px;
  font-size: .95rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.contact-section .privacy-consent input[type="checkbox"] { margin-top: 2px; }
.contact-section .privacy-consent a { text-decoration: underline; color: inherit; }

/* プライバシーポリシーリンクは同意の直下に、チェックボックス分だけ右へ */
.contact-section .policy-link { margin: 6px 0 0 28px; }

/* 同意未チェック時に見出し色も赤く（任意） */
.contact-section .privacy-consent.invalid .privacy-label { color: #b00020; }

/* 同意エラーテキストを右に少し寄せる */
.contact-section .privacy-consent + #err_privacy { margin-left: 28px; }

/* 送信ボタン（フォーム領域のみ） */
.contact-section button {
  margin-top: 16px;
  padding: 12px 18px;
  border: 0;
  border-radius: 8px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  transition: background .2s ease;
}
.contact-section button:hover   { background: #333; }
.contact-section button:disabled{ opacity: .6; cursor: not-allowed; }

/* 成功メッセージ（予備） */
.contact-section .success {
  color: #0a0;
  font-size: .92rem;
  margin-top: 4px;
}
/* === contact: ヒーローの上下間隔をコンパクトに === */
main.contact .hero {              /* このページのヒーローだけ */
  padding: 8px 0 12px;            /* 以前より上下を詰める */
  margin: 0;                      /* 念のため余計な外側余白を消す */
}
main.contact .hero-title {
  margin: 0 0 6px;                /* タイトル下の余白を少なめに */
}
main.contact .hero-desc {
  margin: 0;                      /* テキスト上下の余白をゼロに */
  line-height: 1.6;
}

/* === contact: PC でフォーム幅を少し広げる === */
/* 既定 720px → PCのみ 860px（好みで数値だけ調整してください） */
@media (min-width: 960px) {
  .contact-section {
    max-width: 860px;
  }
}

.inner.contact-section { max-width: none; } 

#contactForm{
  width: min(100%, 500px);
  margin: 0 auto;
  box-sizing: border-box;
}