/* =========================================================
   CF7 確認画面エンジン 用スタイル
   （form.css を上書きしない範囲で最小限だけ足す）
   ========================================================= */

/* hidden 属性で確実に隠す（Bootstrap 等の d-block 対策込み・高さも0に） */
.wpcf7-form .cf7c-input[hidden],
.wpcf7-form .cf7c-confirm[hidden],
.wpcf7-form .cf7c-thanks[hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* CF7 の隠し応答領域（screen-reader-response）が縦スペースを取らないように */
.wpcf7 .screen-reader-response {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* 確認画面：入力値はラベルと違ってノーマル体（太字にしない） */
.cf7c-confirm .cf7c-val {
  font-weight: normal;
  word-break: break-word;
}
/* 未入力（空）のときに詰まって見えないよう最小高さ */
.cf7c-confirm .cf7c-val:empty::after {
  content: '―';
  color: #aaa;
  font-weight: 400;
}

/* 確認画面の注意書き */
.cf7c-confirm .cf7c-note {
  margin: 1em 0;
  text-align: center;
}

/* 確認画面の区切り線を均一化（場所によって太さ・濃さが変わらないように） */
.cf7c-confirm hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid #ccc;
  height: 0;
  background: none;
  opacity: 1;
}
/* CF7 が改行から自動生成する <br> のうち、区切り線の直前直後のものは詰める
   （線の周りの余白が場所ごとにバラつく原因になるため） */
.cf7c-confirm hr + br { display: none; }
.cf7c-confirm br:has(+ hr) { display: none; }
/* 万一 <hr> が2連続していても1本に見せる */
.cf7c-confirm hr + hr { display: none; }

/* お問合せ内容のテキストエリア：PC（768px以上）ではフォーム枠の75%幅に
   ※ form.css の .wpcf7 textarea[name="your-message"]{width:100%!important} に
     勝つよう詳細度を上げている（.wpcf7-form を足して勝つ） */
@media (min-width: 768px) {
  /* 親の <label> が display:flex で、ラッパ span が中身に合わせて縮んでいる。
     まずラッパを全幅に伸ばし、そのうえで textarea をフォーム枠の75%幅にする。 */
  .wpcf7-form-control-wrap[data-name="your-message"] {
    display: block;
    width: 100%;
    flex: 1 1 100%; /* 親ラベルが flex のとき縮まないように */
  }
  textarea.wpcf7-form-control.wpcf7-textarea[name="your-message"] {
    width: 75% !important;
    display: block;
  }
}

/* ボタン並び：JS側で「前に戻る」を末尾へ移動して
   「送信する（上）→ 前に戻る（下）」のDOM順を保証している（CF7 6.x のp包み対策） */
.cf7c-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 1.2em;
}
.cf7c-actions .cf7c-go,
.cf7c-actions .btn-sbmt {
  display: block;
  width: 100%;
  max-width: 420px;
}

/* 「確認する」ボタン → 「送信する」と同じ見た目（form.css の submit を踏襲） */
.wpcf7 button.cf7c-go {
  display: block;
  width: 100%;
  font-size: 1.6em;
  font-weight: bold;
  background-color: #FFC000;
  border: 1px solid #FFC000;
  color: #003;
  text-align: center;
  letter-spacing: 0.5em;
  padding: 0.313em 0.625em;
  margin: 0 auto;
  border-radius: 6px;
  cursor: pointer;
}
.wpcf7 button.cf7c-go:hover,
.wpcf7 button.cf7c-go:focus {
  color: #000;
  background-color: #FFC000;
  border: 1px solid #FFC000;
  outline: 0;
}

/* 「前に戻る」ボタン → ライトグレー地・文字は太字の黒・一回り大きめ（約120%） */
.cf7c-back {
  font-size: 1.02em;
  font-weight: bold;
  background: #f2f2f2;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: .55em 1.7em;
  letter-spacing: normal;
  cursor: pointer;
}
.cf7c-back:hover { background: #e6e6e6; color: #000; }

/* ステップ表示（1 入力 → 2 確認 → 3 完了） */
.cf7c-steps {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
  counter-reset: step;
}
.cf7c-steps li {
  flex: 1;
  position: relative;
  text-align: center;
  padding-top: 36px;
  font-size: 0.9em;
  font-weight: bold;
  color: #000;
}
.cf7c-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #ddd;
  color: #000;
  z-index: 1;
}
.cf7c-steps li::after {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #ddd;
  z-index: 0;
}
.cf7c-steps li:first-child::after { display: none; }
.cf7c-steps li span { position: relative; z-index: 1; }
/* 現在／完了ステップは丸の背景だけ #29ADC8。文字・数字は黒のまま */
.cf7c-steps li.is-active,
.cf7c-steps li.is-done { color: #000; }
.cf7c-steps li.is-active::before,
.cf7c-steps li.is-done::before {
  background: #29ADC8;
  color: #000;
}

/* 入力画面のときだけ表示したい要素（フォーム外の注意書き等に付与）
   → 確認・完了ステップでは隠す */
body:not(.cf7c-step-1) .cf7c-input-only {
  display: none !important;
}

/* 送信成功時、CF7 の応答文（青枠の「送信完了」）を隠す
   → 完了画面の見出しと重複するため。エラー時（failed/invalid/spam）は残す */
.wpcf7-form.sent .wpcf7-response-output {
  display: none !important;
}

/* 中身が空の応答枠は枠線ごと消す（確認画面などで空の青枠が出ないように）
   ※ メッセージが入っているときは :empty に該当しないので通常どおり表示される */
.wpcf7 .wpcf7-response-output:empty {
  display: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 送信中：ボタンを押せなくしてスピナー表示 */
.wpcf7-form.cf7c-sending .cf7c-confirm input[type="submit"] {
  opacity: .5;
  pointer-events: none;
}
.wpcf7-form.cf7c-sending .cf7c-back {
  pointer-events: none;
  opacity: .5;
}
.wpcf7-form.cf7c-sending .cf7c-confirm::after {
  content: '送信中です…';
  display: block;
  text-align: center;
  margin-top: .8em;
  color: #555;
}

/* 完了画面（上の余白を約30pxに詰める） */
.cf7c-thanks {
  text-align: center;
  padding: 0 1em 2em;
}
/* 完了ステップ時、ステップバー→見出しの間隔を約30pxに固定 */
.wpcf7-form.sent .cf7c-steps {
  margin-bottom: 30px;
}

/* 【余白対策・決定版】完了画面では「ステップバー」と「完了メッセージ」以外を
   すべて非表示にする。間に何が挟まっていても余白が出ないようにする保険。 */
.wpcf7-form.sent .form-content > *:not(.cf7c-steps):not(.cf7c-thanks) {
  display: none !important;
}
.cf7c-thanks .cf7c-thanks-title {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: .6em;
}

/* 確認画面の見出し（完了画面の .cf7c-thanks-title と同じ書式） */
.cf7c-confirm .cf7c-confirm-title {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: .6em;
  text-align: center;
}

/* 確認前チェックの簡易エラー（CF7 のチップに寄せる） */
.cf7c-local-tip {
  display: block;
  margin-top: 4px;
}