/* =========================================================
   CF7 フォーム（/contact）最適化
   - サイト全体トーンに合わせた最小上書き
   - アクセシビリティ / バリデーション配慮
   - モバイル指定は末尾に集約（<=768px / <=640px）
   ========================================================= */

/* セクション余白（PC基準） */
.page-contact .company-section { padding: 80px 0; }

/* フォーム横幅・段落余白 */
.wpcf7 form { max-width: 820px; margin: 0 auto; }
.wpcf7 form p { margin: 0 0 14px; }

/* ラベルと必須マーク（必要なら :after で＊追加可） */
.wpcf7 form label { display: block; font-weight: 700; margin: 0 0 6px; }

/* 入力要素共通 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}

/* テキストエリア行間・高さ */
.wpcf7 textarea { line-height: 1.8; min-height: 180px; resize: vertical; }

/* フォーカス可視化（キーボード操作に配慮） */
.wpcf7 input[type="text"]:focus-visible,
.wpcf7 input[type="email"]:focus-visible,
.wpcf7 input[type="tel"]:focus-visible,
.wpcf7 input[type="url"]:focus-visible,
.wpcf7 input[type="number"]:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
  outline: none;
  border-color: #3366cc;
  box-shadow: 0 0 0 3px rgba(51,102,204,.15);
}

/* エラー時（フィールド単体） */
.wpcf7-not-valid,
.wpcf7 form.invalid .wpcf7-not-valid {
  border-color: #d93025 !important;
  box-shadow: none;
}

/* バリデーションメッセージ（フィールド直下） */
.wpcf7-not-valid-tip {
  color: #d93025;
  font-size: 13px;
  margin-top: 6px;
}

/* 送信ボタン */
.wpcf7 .wpcf7-submit {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: opacity .2s ease, transform .02s ease;
}
.wpcf7 .wpcf7-submit:hover { opacity: .85; }
.wpcf7 .wpcf7-submit:active { transform: translateY(1px); }
.wpcf7 form.submitting .wpcf7-submit { opacity: .7; cursor: wait; }

/* スピナー（送信中） */
.wpcf7-spinner { margin-left: 8px; vertical-align: middle; }

/* 送信結果メッセージ（フォーム下部） */
.wpcf7-response-output {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #f8f8f8;
}

/* 成功・失敗で色分け（CF7 の form 状態クラスに追随） */
.wpcf7 form.sent .wpcf7-response-output {
  background: #e8f7ee;
  border-color: #bfead0;
  color: #0a5;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  background: #fff3f3;
  border-color: #f2c7c7;
  color: #b00;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  background: #fff8e6;
  border-color: #ffe1a6;
  color: #a15d00;
}

/* ========== 予約フォーム拡張（.page-reservation 限定） ========== */
/* 1) ご予約内容（ラジオ/チェック） */
.page-reservation .wpcf7-radio-wrap,
.page-reservation .wpcf7-checkbox { text-align: left; }
.page-reservation .wpcf7-radio-wrap .wpcf7-list-item,
.page-reservation .wpcf7-checkbox .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
}
.page-reservation .wpcf7-radio-wrap input[type="radio"],
.page-reservation .wpcf7-checkbox input[type="checkbox"] { margin-right: 6px; }
/* CF7が差し込む改行を排除 */
.page-reservation .wpcf7-radio-wrap > br { display: none; }

/* 2) ブロック構造（左寄せ固定） */
.page-reservation .reserve-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
  margin: 12px 0 20px;
  text-align: left;
}
.page-reservation .reserve-col > p { text-align: left; margin: 0; }
.page-reservation .reserve-col label {
  display: block;
  font-weight: 700;
  margin: 0 0 8px;
}

/* 3) 日付＋時間の行（両端に張り付かない左寄せ） */
.page-reservation .reserve-row {
  display: inline-grid;                               /* 内容幅で収める */
  grid-template-columns: minmax(260px, 360px) 220px;  /* 左=日付 / 右=時間 */
  gap: 12px;
  align-items: center;
  justify-items: start;
}
.page-reservation .reserve-row > br { display: none; }
.page-reservation .reserve-row .wpcf7-form-control-wrap {
  display: block;
  justify-self: start;
}

/* 4) 入力UI */
.page-reservation .reserve-row input[type="date"],
.page-reservation .reserve-row select {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

/* 5) 送信ボタン余白 */
.page-reservation .form-actions { margin-top: 20px; }

/* =========================================================
   レスポンシブ（モバイル設定は末尾に集約）
   - <=768px：フォームの余白・文字サイズを微調整
   - <=640px：予約フォームの縦積み最適化
   ========================================================= */

/* <=768px：フォーム全般の軽量化（見た目は維持） */
@media (max-width: 768px) {
  .page-contact .company-section { padding: 60px 0; }
  .wpcf7 form { padding: 0 12px; }       /* 画面を広く使う */
  .wpcf7 form p { margin: 0 0 12px; }
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="url"],
  .wpcf7 input[type="number"],
  .wpcf7 select,
  .wpcf7 textarea {
    font-size: 15px;
    padding: 10px 10px;
  }
  .wpcf7 .wpcf7-submit { padding: 11px 18px; font-size: 15px; }
  .wpcf7-response-output { padding: 10px 12px; }
}

/* <=640px：予約フォームの行を縦積みに（重複定義を一本化） */
@media (max-width: 640px) {
  .page-contact .company-section { padding: 48px 0; }
  .page-reservation .reserve-row { display: grid; grid-template-columns: 1fr; }
}
/* お問い合わせ：見出しをモバイルで1行固定 */
@media (max-width: 768px) {
  .page-contact .section-title{
    white-space: nowrap;     /* 改行させない */
    text-wrap: nowrap;       /* 近年のプロパティ（対応ブラウザ向け） */
    word-break: keep-all;    /* 日本語の任意改行を抑制 */
    line-height: 1.2;
    font-size: clamp(18px, 5.2vw, 22px); /* 端末幅に合わせて自動縮小 */
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;        /* 端末が極端に小さい場合の保険 */
    text-overflow: ellipsis; /* ※全表示が可能なら省略記号は出ません */
  }
}
/* ===== 見出しを1行固定＋左右余白を少し狭める（contact / reservation 共通） ===== */
@media (max-width: 768px) {
  /* 両サイド余白を少し圧縮（見出しが収まりやすいように） */
  .page-contact .container,
  .page-reservation .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* ページの大見出し（1行固定） */
  .page-contact .section-title,
  .page-reservation .section-title {
    white-space: nowrap;  /* 改行させない */
    text-wrap: nowrap;    /* 新プロパティ（対応ブラウザ向け） */
    word-break: keep-all; /* 日本語の任意改行を抑制 */
    line-height: 1.2;
    font-size: clamp(18px, 4.6vw, 22px); /* 端末幅に応じて自動縮小 */
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;     /* 万一はみ出す環境への保険 */
    text-overflow: ellipsis;
    margin-left: 0;
    margin-right: 0;
  }

  /* CF7 が出力するフォーム内 h2（ご予約内容 / ご希望日時 / ご連絡先…）を小さめに */
  .page-contact .wpcf7 h2,
  .page-reservation .wpcf7 h2 {
    white-space: nowrap;
    text-wrap: nowrap;
    word-break: keep-all;
    font-size: clamp(15px, 4.0vw, 18px);
    line-height: 1.25;
    margin: 12px 0 8px;
  }
}

/* さらに狭い端末向けの保険（任意） */
@media (max-width: 360px) {
  .page-contact .container,
  .page-reservation .container {
    padding-left: 8px;
    padding-right: 8px;
  }
  .page-contact .section-title,
  .page-reservation .section-title { font-size: clamp(16px, 4.6vw, 20px); }
  .page-contact .wpcf7 h2,
  .page-reservation .wpcf7 h2 { font-size: clamp(14px, 3.8vw, 17px); }
}