/* お問い合わせページ専用。style.css は変更せず、このページ内だけ配色を上書きする */
.contact-page {
  --bg: #F6F6F2;
  --text: #30362F;
  --text-sub: #5a6158;
  --accent: #72836A;
  --accent-dark: #5f6f58;
  --line: #d9d9d0;
  --danger: #a33a2e;
  background: #F6F6F2;
  color: #30362F;
}
.contact-main { padding: 56px 0 96px; }
.contact-inner { width: min(100% - 40px, 720px); margin: 0 auto; }
.contact-eyebrow { margin: 0 0 12px; font-size: 12px; letter-spacing: .16em; color: var(--accent-dark); }
.contact-title { margin: 0 0 20px; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 5vw, 36px); line-height: 1.5; }
.contact-lead { margin: 0 0 40px; line-height: 1.9; color: var(--text-sub); }

.contact-form { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 28px 20px; }
.form-row { margin: 0 0 28px; }
.form-label, .form-legend { display: block; margin: 0 0 8px; padding: 0; font-weight: 700; font-size: 16px; line-height: 1.6; }
.tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 2px; font-size: 12px; font-weight: 400; vertical-align: 1px; }
.tag-req { background: var(--accent); color: #fff; }
.tag-opt { background: #ecece5; color: var(--text-sub); }
.form-hint { margin: 6px 0 0; font-size: 14px; color: var(--text-sub); line-height: 1.7; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #b9bcb2; border-radius: 3px;
  background: #fff; color: var(--text); font: inherit; font-size: 16px; line-height: 1.6;
}
.contact-form textarea { min-height: 200px; resize: vertical; }
.contact-form select { appearance: auto; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.contact-form :user-invalid { border-color: var(--danger); }

.form-fieldset { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 16px; line-height: 1.6; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }

.consent { background: #f6f6f2; border-radius: 3px; padding: 16px; }
.consent p { margin: 0 0 10px; font-size: 14px; line-height: 1.8; color: var(--text-sub); }

.form-actions { margin-top: 32px; }
.form-submit {
  width: 100%; padding: 16px 24px; border: 1px solid var(--accent); border-radius: 3px;
  background: var(--accent); color: #fff; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .08em; cursor: pointer;
}
.form-submit:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.form-submit:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.form-note { margin: 16px 0 0; font-size: 14px; color: var(--text-sub); line-height: 1.8; }

@media (min-width: 768px) {
  .contact-main { padding: 88px 0 128px; }
  .contact-form { padding: 48px 48px; }
  .form-submit { width: auto; min-width: 280px; }
}

/* ---- 送信処理まわり ---- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp-pixel { position: absolute; left: -9999px; }
.contact-form a { color: var(--accent-dark); text-decoration: underline; }
.field-error { margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--danger); font-weight: 700; }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: var(--danger); }
.form-alert { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--danger); border-left-width: 4px; border-radius: 3px; background: #fff; color: var(--danger); font-size: 15px; line-height: 1.8; }
.form-alert p { margin: 0; }
.form-success { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 28px 20px; line-height: 1.9; }
.form-success p { margin: 0 0 16px; }
.form-success a { color: var(--accent-dark); }
.preview-note { margin: 0 0 24px; padding: 14px 16px; border: 1px solid #b9bcb2; border-radius: 3px; background: #fff; font-size: 14px; line-height: 1.8; }
.form-submit[disabled] { opacity: .6; cursor: not-allowed; }
@media (min-width: 768px) { .form-success { padding: 40px 48px; } }

/* 同意欄の「必須」: スマホでは折り返して2行目に左揃え(PCは本文の後ろに並べる)。他の「必須」には影響しない */
.consent .choice > span > .tag {
  display: block;
  width: fit-content;
  margin: 6px 0 0;
}
@media (min-width: 768px) {
  .consent .choice > span > .tag { display: inline-block; margin: 0 0 0 8px; }
}

/* フッターのロゴ(TOPページへのリンク)。見た目は従来のまま、下線だけ消す */
.contact-page a.footer-brand { text-decoration: none; }
.contact-page a.footer-brand:hover span { text-decoration: underline; text-underline-offset: 3px; }