/* ==========================================================
   CF7 Step Confirm - style
   ========================================================== */

.cf7-step-wrap {
  max-width: 720px;
  margin: 0 auto;
}

/* ---------- ステップインジケーター（1-2-3） ---------- */
.cf7-step-indicator {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.cf7-step-indicator li {
  position: relative;
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: #999;
  line-height: 1.4;
}

.cf7-step-indicator li::before {
  content: attr(data-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #e5e5e5;
  color: #999;
  font-weight: bold;
  font-size: 15px;
  position: relative;
  z-index: 2;
  transition: background-color .25s ease, color .25s ease;
}

.cf7-step-indicator li::after {
  content: "";
  position: absolute;
  top: 18px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #e5e5e5;
  z-index: 1;
  transition: background-color .25s ease;
}

.cf7-step-indicator li:first-child::after {
  display: none;
}

.cf7-step-indicator li span {
  display: block;
}

.cf7-step-indicator li.is-active {
  color: #808000;
  font-weight: bold;
}

.cf7-step-indicator li.is-active::before,
.cf7-step-indicator li.is-done::before {
  background: #808000;
  color: #fff;
}

.cf7-step-indicator li.is-done::after,
.cf7-step-indicator li.is-active::after {
  background: #808000;
}

/* ---------- 各ステップ本体の表示切替 ---------- */
.cf7-step {
  display: none;
}

.cf7-step.is-active {
  display: block;
  animation: cf7-step-fade .25s ease;
}

@keyframes cf7-step-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.required {
  color: #d33;
  margin-left: 4px;
  font-size: 12px;
}

/* ---------- 確認画面のテーブル ---------- */
.cf7-confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

.cf7-confirm-table th,
.cf7-confirm-table td {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: top;
}

.cf7-confirm-table th {
  width: 30%;
  white-space: nowrap;
  color: #555;
  font-weight: 600;
}

.cf7-confirm-table td {
  word-break: break-word;
}

/* ---------- ボタン ---------- */
.cf7-btn-confirm,
.cf7-btn-back {
  cursor: pointer;
  padding: 10px 28px;
  border: 1px solid #808000;
  background: #fff;
  color: #808000;
  border-radius: 4px;
  font-size: 15px;
  margin-right: 8px;
  transition: background-color .2s ease;
}

.cf7-btn-confirm:hover,
.cf7-btn-back:hover {
  background: #f0f6fc;
}

.cf7-step-confirm input[type="submit"] {
  padding: 10px 28px;
  border-radius: 4px;
}

/* ---------- 完了画面 ---------- */
.cf7-step-complete {
  text-align: center;
  padding: 48px 16px;
  font-size: 16px;
  line-height: 1.8;
}