/* CF7 擬似確認画面 (住広ホーム) ------------------------------- */

/* 確認表示は既定で非表示。入力欄のみ表示。
   テーマの .wrap-box{display:flex} に確実に勝つよう .formItemBox で限定 */
.formItemBox .confirm_area { display: none; }
.wpcf7-spinner { display: none !important; }

/* 確認モード：入力欄を隠し、確認表示を出す */
body.confirm-mode .formItemBox .input_area { display: none; }
body.confirm-mode .formItemBox .confirm_area { display: block; }

/* 確認表示の見た目 */
.confirm_area { line-height: 1.9; }
.formItemBox .confirm_area { padding: 4px 0; word-break: break-all; }

/* リード文：入力時は通常コピー、確認時は確認用コピー */
.previwtxt { display: none; }
body.confirm-mode .form__box-copy:not(.previwtxt) { display: none; }
body.confirm-mode .previwtxt { display: block; }

/* ===== 必須／任意バッジを枠（セル）の右端へ寄せる ===== */
.formItemBox table th .title.wrap-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.formItemBox table th .title .item {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ===== ボタン（確認する／戻って編集／送信する） ===== */
.btnsWrap { text-align: center; margin-top: 30px; }
body.confirm-mode .formItemBox .confirm_area.btnsWrap {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.btnsWrap .btnsContentsBox,
.btnsWrap input.wpcf7-submit,
.btnsWrap input[type="submit"] {
  min-width: 240px;
  padding: 15px 28px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background .3s, color .3s, border-color .3s;
}
/* 確認する／送信する＝オレンジ（住広の submitBox 配色） */
.confirm_button,
.btnsWrap input.submitBox,
.btnsWrap input[type="submit"] {
  background: #e95f20;
  border: 1px solid #e95f20;
  color: #fff;
}
.confirm_button .text { color: #fff; }
.confirm_button:hover,
.btnsWrap input.submitBox:hover,
.btnsWrap input[type="submit"]:hover {
  background: #fff;
  color: #e95f20;
}
.confirm_button:hover .text { color: #e95f20; }
/* 戻って編集＝白地 */
.back_button {
  background: #fff;
  border: 1px solid #999;
  color: #333;
}
.back_button .text { color: #333; }
.back_button:hover { background: #f5f5f5; }

/* ===== 必須未入力のハイライト ===== */
.formItemBox table td.is-error {
  box-shadow: inset 0 0 0 2px #e74c3c;
  border-radius: 4px;
}
.formItemBox table td.is-error .text,
.formItemBox table td.is-error select.text { border-color: #e74c3c; }

/* CF7 チェックボックス／ラジオを MW(.mwform-checkbox-field) の見た目に寄せる */
.formItemBox table td .wpcf7-checkbox,
.formItemBox table td .wpcf7-radio { line-height: 1.8; display: inline-block; }
.formItemBox table td .wpcf7-list-item { margin: 0 16px 4px 0; }
.formItemBox table td .wpcf7-list-item,
.formItemBox table td .wpcf7-list-item-label { font-size: 14px; }
/* 資料請求「お問い合わせ内容」は縦並び（MW vertically=true 相当） */
#page-contact .formItemBox td.checkbox .wpcf7-list-item { display: block; margin-left: 0; }
/* セレクトは幅を内容に合わせる（text の固定50%幅を上書き） */
.formItemBox table td select.text { width: auto; max-width: 100%; min-width: 120px; }
/* CF7 のバリデーションエラー文言 */
.formItemBox table td .wpcf7-not-valid-tip { font-size: 13px; }
/* イベント予約: 予約日時(JS設定のreadonly)欄は隠し、選択結果は表示用spanで見せる */
.reserve-hidden { display: none !important; }
#reserve-date-display { font-weight: 700; color: #e95f20; display: inline-block; }
body.confirm-mode #reserve-date-display { display: none; }

/* CF7 応答メッセージ（エラー時は表示／成功の緑メッセージは出さずthanksへ遷移） */
.wpcf7-response-output { margin: 16px 0 0; }
.wpcf7-response-output.wpcf7-mail-sent-ok { display: none !important; }

/* ===== 送信中オーバーレイ ===== */
#cf-sending {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cf-sending .cf-sending__box { text-align: center; color: #333; }
#cf-sending .cf-sending__spin {
  display: inline-block;
  width: 52px;
  height: 52px;
  border: 4px solid #e6e6e6;
  border-top-color: #e95f20;
  border-radius: 50%;
  animation: cf-spin 0.8s linear infinite;
}
#cf-sending .cf-sending__txt {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}
@keyframes cf-spin { to { transform: rotate(360deg); } }

/* 確認モード中は STEP02 を強調 */
body.confirm-mode .stepContentsBox li:nth-child(1) { opacity: .45; }
body.confirm-mode .stepContentsBox li:nth-child(2) { opacity: 1; font-weight: bold; }