/* ============================================================
   contact.css — お問い合わせページ固有スタイル（見た目のみ）
   共通（ヘッダー/フッター/トークン）は style.css 側。
   functions.php で お問い合わせページのときだけ読み込む。
   数値は reference/contact_spec.json の bbox 座標から導出。
   ============================================================ */

/* セクション全体 — spec: title top y=169, header=72px → padding-top≈97px
   submit button bottom≈y1276, footer top≈y1400 → padding-bottom≈120px */
.contact-section{background:#fff;padding:70px 0 120px}

/* 見出し */
.contact-head{text-align:center;margin-bottom:44px}


/* サブテキスト — spec: 16px Regular, #282828; gap to sub ≈ 32px */
.contact-intro{font-weight:400;font-size:16px;color:var(--color-text-dark);line-height:1.7;margin-top:18px}

/* フォーム（中央760px） */
.contact-form{width:760px;max-width:calc(100% - 40px);margin:0 auto}

.form-row{display:flex;align-items:flex-start;gap:20px;padding:16px 0;border-bottom:1px solid #ededed}

/* ラベル列（必須バッジは左に絶対配置して、ラベル文字を全行で揃える） */
.form-label{width:210px;flex:none;position:relative;padding:11px 0 0 66px;
  font-weight:500;font-size:15px;color:var(--color-text-dark)}
.req{position:absolute;left:0;top:9px;background:#CC2D2D;color:#fff;
  font-weight:700;font-size:13px;padding:3px 11px;border-radius:3px;line-height:1.3}

/* 入力列 */
.form-field{flex:1}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea{
  width:100%;background:#EBEBEB;border:none;border-radius:2px;
  padding:11px 14px;font-size:15px;color:var(--color-text-dark);font-family:inherit;
}
.form-field textarea{height:200px;resize:vertical;line-height:1.6}
.form-field input::placeholder,
.form-field textarea::placeholder{color:#BBBBBB}

/* フィールド上の注記 — spec: 12px, #282828 */
.field-note{font-size:12px;color:var(--color-text-dark);margin-bottom:8px}

/* チェックボックス群（希望連絡方法）— spec: 13px, #282828 */
.checks{display:flex;gap:30px;align-items:center;padding-top:8px}
.checks label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-dark);cursor:pointer}
input[type="checkbox"]{accent-color:#999}

/* プライバシー同意＋送信 — spec: 13px, #282828 */
.privacy{text-align:center}
.privacy .agree{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-dark);cursor:pointer}
.privacy .pnote{font-size:13px;color:var(--color-text-dark);margin-top:14px}
.privacy .plink{display:inline-block;font-size:13px;color:var(--color-text-dark);text-decoration:underline;margin-top:6px}

/* 送信ボタン — spec: 18px Medium, #FFFFFF on #2472F5 */
.submit-wrap{text-align:center}
.btn-submit{background:var(--color-primary);color:#fff;font-weight:500;font-size:18px;letter-spacing:4px;
  border:none;border-radius:28px;padding:16px 70px;cursor:pointer;
  box-shadow:0 6px 14px rgba(36,114,245,.35);transition:opacity .2s,transform .2s}
.btn-submit:hover{opacity:.9;transform:translateY(-2px)}

/* ============================================================
   Contact Form 7 Integration
   ============================================================ */
.wpcf7 .form-row{display:flex;align-items:flex-start;gap:20px;padding:16px 0;border-bottom:1px solid #ededed}
.wpcf7 .form-label{width:210px;flex:none;position:relative;padding:11px 0 0 66px;
  font-weight:500;font-size:15px;color:var(--color-text-dark)}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea{
  width:100%;background:#EBEBEB;border:none;border-radius:2px;
  padding:11px 14px;font-size:15px;color:var(--color-text-dark);font-family:inherit;
  box-sizing:border-box;
}
.wpcf7 textarea{height:200px;resize:vertical;line-height:1.6}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{color:#BBBBBB}

.wpcf7 .checks{display:flex;gap:30px;align-items:center;padding-top:8px}
.wpcf7 .checks .wpcf7-list-item{margin-right:5px}
.wpcf7 .checks .wpcf7-list-item label{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--color-text-dark);cursor:pointer}

.wpcf7 .privacy{text-align:center;margin-top:20px}
.wpcf7 .privacy .wpcf7-acceptance{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-dark)}

.wpcf7 .submit-wrap{text-align:center;margin-top:20px}
.wpcf7 .submit-wrap p{display:flex;justify-content:center;align-items:center}
.wpcf7-spinner{position:absolute}
.wpcf7 input[type="submit"]{
  background:var(--color-primary);color:#fff;font-weight:500;font-size:18px;letter-spacing:4px;
  border:none;border-radius:28px;padding:16px 70px;cursor:pointer;
  box-shadow:0 6px 14px rgba(36,114,245,.35);transition:opacity .2s,transform .2s;
}
.wpcf7 input[type="submit"]:hover{opacity:.9;transform:translateY(-2px)}

/* CF7 バリデーションメッセージ */
.wpcf7-not-valid-tip{color:#CC2D2D;font-size:13px;margin-top:4px}
.wpcf7-response-output{text-align:center;margin:20px 0 0;padding:10px 20px;border-radius:4px;font-size:14px}
.wpcf7 form.invalid .wpcf7-response-output{border-color:#CC2D2D;color:#CC2D2D}
.wpcf7 form.sent .wpcf7-response-output{border-color:#46b450;color:#46b450}

/* CF7のデフォルトspan幅を100%に */
.wpcf7 .wpcf7-form-control-wrap{display:block}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 768px) {
  .contact-section{padding:30px 0 56px}
  .contact-head{margin-bottom:32px}
  .contact-intro{padding:0 20px;text-align:center}

  .form-row{flex-direction:column;gap:8px;align-items:stretch;border-bottom:none;padding:16px 0 0}
  .form-label{width:100%;padding:0}
  .req{position:static;margin-right:5px}
  .req{top:0}
  .checks{flex-direction:column;gap:12px;align-items:flex-start}
  .btn-submit{width:60%;padding:15px 20px;margin-top:10px;font-size:21px}
  .submit-wrap{margin-top:10px}
  .privacy{text-align:center}
  .privacy .agree{justify-content:center;font-size:16px;margin-top:10px}
  .privacy .pnote{font-size:15px;text-align:center}
  .privacy .plink{font-size:13px;margin-top:0}
  .contact-form{width:auto;max-width:none;margin:0;padding:0 20px;box-sizing:border-box;gap:0}

  .wpcf7 .form-row{flex-direction:column;gap:8px;align-items:stretch;border-bottom:none;padding:16px 0 0}
  .wpcf7 .form-label{width:100%;padding:0}
  .wpcf7 .checks{flex-direction:column;gap:12px;align-items:flex-start}
  .wpcf7 input[type="submit"]{width:60%;padding:15px 20px;margin-top:10px;font-size:21px}
  .wpcf7 .privacy .wpcf7-acceptance{font-size:16px;margin-top:10px}
}