/* ===== CF7 3STEP（スコープ：.vivalabo-cf7） ===== */
.vivalabo-cf7{
  max-width: 920px;
  margin: 0 auto;
}

.vivalabo-cf7 .req{ margin-left: 4px; }

.vivalabo-cf7 .cf7-step{ display:none; }
.vivalabo-cf7 .cf7-step--input{ display:block; }

.vivalabo-cf7.is-confirm .cf7-step--input{ display:none; }
.vivalabo-cf7.is-confirm .cf7-step--confirm{ display:block; }

.vivalabo-cf7.is-thanks .cf7-step--input,
.vivalabo-cf7.is-thanks .cf7-step--confirm{ display:none; }
.vivalabo-cf7.is-thanks .cf7-step--thanks{ display:block; }

.vivalabo-cf7 .cf7-row{
  display:flex;
  align-items:center;
  gap: 22px;
  margin: 22px 0;
}

.vivalabo-cf7 .cf7-row--textarea{ align-items:flex-start; }

.vivalabo-cf7 .cf7-label{
  width: 160px;
  font-size: 16px;
  line-height: 1.5;
}

.vivalabo-cf7 .cf7-field,
.vivalabo-cf7 .cf7-confirm{
  flex:1;
}

.vivalabo-cf7 input[type="text"],
.vivalabo-cf7 input[type="email"],
.vivalabo-cf7 input[type="tel"],
.vivalabo-cf7 select,
.vivalabo-cf7 textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #e5e5e5;
  background:#fff;
  padding:14px 16px;
  border-radius: 2px;
  font-size: 16px;
  outline: none;
}

.vivalabo-cf7 textarea{
  min-height: 220px;
  resize: vertical;
}

.vivalabo-cf7 .cf7-confirm{
  border:1px solid #e5e5e5;
  background:#fff;
  padding:14px 16px;
  min-height: 52px;
  box-sizing:border-box;
}

.vivalabo-cf7 .cf7-confirm--textarea{
  min-height: 220px;
  white-space: normal;
}

.vivalabo-cf7 .cf7-actions{
  display:flex;
  justify-content:center;
  margin-top: 28px;
  gap: 14px;
}

.vivalabo-cf7 .cf7-btn{
  appearance:none;
  border:none;
  border-radius: 10px;
  padding: 14px 34px;
  cursor:pointer;
  font-size: 16px;
  line-height: 1;
}

.vivalabo-cf7 .cf7-btn--confirm,
.vivalabo-cf7 .cf7-btn--submit{
  background:#F47F54;
  color:#fff;
}

.vivalabo-cf7 .cf7-btn--back{
  background:#eaeaea;
  color:#333;
}

/* エラーメッセージ（STEP1専用） */
.vivalabo-cf7 .cf7-step-error{
  display:none;
  margin: 0 0 12px;
  color:#c0392b;
  font-size: 14px;
}

/* SP: ラベル上・入力下 */
@media (max-width: 750px){
  .vivalabo-cf7 .cf7-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .vivalabo-cf7 .cf7-label{ width:auto; }
  .vivalabo-cf7 .cf7-actions{ flex-direction: column; }
  .page-contact__section{
    padding: 0 5%;
  }
}