/* ============================================================
   LATERAL — お問合わせページ（/contact/）専用スタイル
   数値・文言の正本: design_handoff_2026-08-12/LATERAL_デザイン確認.html の実物
   （「05 お問合わせ（通常入力）」「06 お問合わせ（エラー表示 / 送信完了）」）

   ⚠ 入力欄のフォントサイズは実物では PC(1280px幅) で 15px だが、
     ここでは全ブレークポイントで 16px に統一している。
     README §6 / 冒頭の絶対指示「フォントサイズは16px未満にしない
     （iOSの自動ズーム防止）」を優先した（実物とREADMEが食い違う箇所）。
     iPad等はPC相当の幅でもタッチ入力でズームが起きるため、
     幅ではなく「16px未満にしない」という原則を優先している。

   ⚠ 入力欄の高さ(52→54px)・氏名/会社名とメール/電話の2列化も、
     見出し・余白等と同じ 768px 基準に揃えている（2026-08-13、サイト全体のPC開始を
     768pxへ統一したのに合わせて、以前あった「別基準」の注記は解消した）。
   ============================================================ */

/* ---- ページヘッダー（パンくず＋CONTACTラベル＋h1） ---- */
.p-contact__head {
  padding-top: 22px;
  padding-bottom: 32px;
}
@media (min-width: 768px) {
  .p-contact__head { padding-top: 26px; padding-bottom: 46px; }
}

.p-contact__head-body { margin-top: 24px; }
.p-contact__head-body h1 { margin-top: 12px; }
@media (min-width: 768px) {
  .p-contact__head-body { margin-top: 44px; }
  .p-contact__head-body h1 { margin-top: 14px; }
}

/* ---- フォーム面（区切り面。リード文＋フォームを1面に統合） ----
   ⚠ 実物はSPだけリード文とフォームが別背景（薄クリーム→白）の2面に分かれているが、
     PCは1面（薄クリーム）に統合されている。orbit.jsの原本ロジックが
     「白面（リード文）にフォームが含まれる」前提で書かれているため、
     SP/PCともにPC版の1面構成へ統一した。 */
.p-contact__form-sec { padding-block: 44px 52px; }
@media (min-width: 768px) {
  .p-contact__form-sec { padding-block: 80px 92px; }
}

.p-contact__col {
  max-width: 720px;   /* README §4: PCは中央寄せ1カラム・最大720px */
  margin-inline: auto;
}

/* リード文は body の p{margin:0 0 1.4em} が実物の18px(SP)/22px(PC)とほぼ一致するため上書きしない */
.p-contact__lead { margin-bottom: 44px; }

/* ⚠ 2026-08-13：フォーム見出し「お問合わせフォーム」と補助文章を削除
   （おじさん判断：見出しは自明で不要。補助文章は必須バッジ・エラー表示と重複するため）。
   リード文のmargin-bottom(44px)だけで間隔を作る。 */
.p-contact__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media (min-width: 768px) {
  .p-contact__form { gap: 24px; }
}

/* ---- 2列（氏名/会社名・メール/電話）。768pxから ---- */
.p-contact__row2 { display: contents; }
@media (min-width: 768px) {
  .p-contact__row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* ---- 項目 ---- */
.p-contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-contact__field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}
@media (min-width: 768px) {
  .p-contact__field label { font-size: 13.5px; }
}

.p-contact__badge {
  margin-left: 8px;
  display: inline-block;
  border: 1px solid #D9CDB4;
  color: var(--c-text-sub);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 2px 7px;
  vertical-align: 2px;
}
.p-contact__badge--req {
  border: none;
  background: var(--c-contact-bg);
  color: var(--c-panel);
  padding: 3px 7px;
}

/* ---- 入力欄（テキスト・select・textarea 共通） ---- */
.p-contact__input {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 14px;
  font-size: 16px;   /* iOSの自動ズーム防止。全ブレークポイント共通（上部の注記参照） */
  font-family: inherit;
  color: var(--c-text);
  background: var(--c-panel);
  border: 1.5px solid var(--c-input-border);
  border-radius: 8px;
}
textarea.p-contact__input {
  height: auto;
  padding: 14px;
  line-height: 1.8;
  resize: vertical;
}
select.p-contact__input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-link) 50%),
    linear-gradient(135deg, var(--c-link) 50%, transparent 50%);
  background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .p-contact__input { height: 54px; padding: 0 16px; }
  textarea.p-contact__input { padding: 16px; line-height: 1.85; }
  select.p-contact__input {
    background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px;
  }
}

.p-contact__input--invalid {
  background: var(--c-error-bg);
  border: 2px solid var(--c-error);
}

.p-contact__msg {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--c-error);
}
.p-contact__msg span { font-weight: 900; }

/* ---- エラーサマリー（role="alert"） ---- */
.p-contact__errors {
  border: 1.5px solid var(--c-error);
  background: var(--c-error-bg);
  border-radius: 8px;
  padding: 16px 18px;
}
.p-contact__errors-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 900;
  color: var(--c-error);
}
.p-contact__errors ul {
  margin: 6px 0 0;
  padding-left: 1.2em;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--c-error-text);
}
.p-contact__errors a {
  display: block;
  padding: 13px 0;   /* README §4: エラーサマリー内リンクは49px高 */
  color: var(--c-error-text);
  text-decoration: none;
}

/* ---- 同意ブロック（営業お断り注記・チェック・詳細） ---- */
.p-contact__consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-contact__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--c-text);
}
@media (min-width: 768px) {
  .p-contact__note { font-size: 13px; line-height: 1.95; }
}

.p-contact__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;   /* チェックボックス+テキストで タップ領域44px以上 */
  font-size: 13px;
  line-height: 1.85;
  color: var(--c-text);
  cursor: pointer;
}
@media (min-width: 768px) {
  .p-contact__check { font-size: 13.5px; }
}
.p-contact__check input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--c-contact-bg);
}

.p-contact__privacy {
  border: 1px solid var(--c-input-border);
  border-radius: 8px;
  background: var(--c-panel);
}
@media (min-width: 768px) {
  .p-contact__privacy { background: var(--c-ground); }
}
.p-contact__privacy summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-link);
}
.p-contact__privacy summary::-webkit-details-marker { display: none; }
.p-contact__privacy ul {
  margin: 0;
  padding: 0 16px 16px 32px;
  font-size: 12px;
  line-height: 1.95;
  color: var(--c-text);
}
.p-contact__privacy li { margin-top: 6px; }
@media (min-width: 768px) {
  .p-contact__privacy summary { padding: 16px 18px; font-size: 13px; }
  .p-contact__privacy ul { padding: 0 18px 18px 34px; font-size: 12.5px; line-height: 2; }
}

/* ---- 送信ボタン ---- */
.p-contact__submit {
  width: 100%;
  height: 60px;
  background: var(--c-contact-bg);
  color: var(--c-panel);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: pointer;
}
@media (min-width: 768px) {
  .p-contact__submit {
    width: auto;
    align-self: flex-start;
    min-width: 280px;
    height: 62px;
  }
}

/* ---- ハニーポット（人には見えない。aria-hidden・タブ順から除外） ---- */
.p-contact__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 送信完了 ---- */
.p-contact__done {
  border: 1px solid #EAE3D6;
  border-radius: 12px;
  background: var(--c-ground);
  padding: 28px 22px;
}
.p-contact__done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-contact-bg);
  color: var(--c-panel);
  font-size: 20px;
  font-weight: 900;
}
.p-contact__done h2 {
  margin: 18px 0 0;
  font-size: 21px;
  line-height: 1.6;
}
.p-contact__done p {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 2.1;
}
.p-contact__back {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-ground);
  border: 1px solid #E3DBCA;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-link);
  text-decoration: none;
}

/* ============================================================
   確認画面（入力 → 確認 → 完了 の中間）
   ⚠ この画面は確定デザインHTMLに存在しない。デザインには「通常入力」と
     「エラー/送信完了」の2状態しかない（2026-08-13 実装時に新設）。
     おじさんの判断でデザイン側への差し戻しはせず、既存の部品を組み替えて作っている。
     新規に足した見た目はこのブロックだけ。
   ============================================================ */

/* JSがエラーを出し入れするので、非表示の指定が display:flex に負けないようにする。
   ⚠ .p-contact__msg / .p-contact__errors には display 指定があるため、
     [hidden] だけでは消えない。ここで明示的に落とす。 */
.p-contact__msg[hidden],
.p-contact__errors[hidden] { display: none; }

.p-contact__confirm-title {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .p-contact__confirm-title { font-size: 24px; }
}

.p-contact__review {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 768px) {
  .p-contact__review { gap: 20px; }
}

/* 入力画面の .p-contact__field と同じ組み方にして、行の見え方を揃える */
.p-contact__review-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-contact__review-row dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}
@media (min-width: 768px) {
  .p-contact__review-row dt { font-size: 13.5px; }
}
.p-contact__review-row dd { margin: 0; }

/* 入力欄の見た目を流用しつつ、枠を外して「入力するもの」ではなく「表示」に見せる。
   面（#FCF9F3）の上に地（#FFFFFF）を置くことで、罫線なしでも値の範囲が分かる。 */
.p-contact__input--readonly {
  display: flex;
  align-items: center;
  border: none;
  background: var(--c-ground);
  height: auto;
  min-height: 52px;
  padding: 14px;
  line-height: 1.8;
  word-break: break-word;
  overflow-wrap: anywhere;   /* 長いURLやメールアドレスで横に溢れさせない */
}
@media (min-width: 768px) {
  .p-contact__input--readonly { min-height: 54px; padding: 15px 16px; }
}

/* 本文は複数行。上揃えにする */
.p-contact__input--multiline {
  display: block;
  line-height: 1.85;
}

.p-contact__input--empty { color: var(--c-text-sub); }

/* 送信フォームと修正フォームは別々の form にしている（理由は page-contact.php のコメント） */
.p-contact__confirm-form { margin-top: 32px; }
@media (min-width: 768px) {
  .p-contact__confirm-form { margin-top: 40px; }
}

.p-contact__submit:disabled {
  opacity: .6;
  cursor: default;
}

/* 「入力内容を修正する」。完了画面の .p-contact__back を button に流用したもの。
   ⚠ 矢印が先頭に来るので、space-between ではなく中央寄せにする。 */
.p-contact__back--button {
  width: 100%;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-family: inherit;
  cursor: pointer;
}
@media (min-width: 768px) {
  .p-contact__back--button {
    width: auto;
    min-width: 280px;
  }
}

/* reCAPTCHA の右下バッジを隠す。
   🚨 隠してよい条件は「ユーザーの目に触れる場所に reCAPTCHA の表記を出していること」。
      公式FAQ（developers.google.com/recaptcha/docs/faq）に明記されている:
      "You are allowed to hide the badge as long as you include the reCAPTCHA branding
       visibly in the user flow."
   → 下の .p-contact__recaptcha-note がその表記。**この文言を消すなら、バッジも戻すこと。**
      片方だけ消すと規約違反になる。
   ⚠ display:none ではなく visibility:hidden を使う（公式が案内している書き方。
      display:none にすると reCAPTCHA 側の初期化に影響しうる）。 */
.grecaptcha-badge { visibility: hidden; }

/* reCAPTCHA の表記。上のバッジを隠す代わりに必ず出す（消さないこと） */
.p-contact__recaptcha-note {
  margin: 22px 0 0;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--c-text-sub);
}
.p-contact__recaptcha-note a { color: var(--c-link); }