/* 作成者　中尾 */
/*確認画面と完了画面を非表示*/
.confirm_area,
.thanks_area,
.thanks_last_wrap {
  display: none;
}

/*デフォルトのサンクスメッセージを非表示*/
.wpcf7-response-output,
.wpcf7-not-valid-tip {
  display: none;
}


/* 使用カラー */
:root {
  --black: #000;
  --white: #fff;
}

/* 使用フォント */
:root {
  --NotoSans: "Noto Sans JP", sans-serif;
  --NotoSerif: "Noto Serif JP", serif;
  --Zen-Maru-Gothic: "Zen Maru Gothic", sans-serif;
}

/* 背景追従 */
.bg_wrap {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.bg_filter {
  width: 100%;
  height: 100vh;
  position: fixed;
  background-color: #FFF5DA;
  opacity: 38%;
}
.bg_shape {
  width: 100%;
  height: auto;
  top: 3.7rem;
  left: -.8rem;
  position: fixed;
  z-index: -1;
}
.bg_shape_sp {
  display: none;
}
/* 背景追従ここまで */
/* 下層FV */
.fv_bg_cor {
  width: 100%;
  height: 51.7rem;
  background-color: #FFF5DA;
  /* opacity: 0; */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.hero_visual {
  width: 114rem;
  height: 40rem;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.hero_visual img {
  border-radius: 4rem;
  object-fit: cover;
  object-position: 95% 50%;
}


.contact_wrapper {
  display: flex;
  justify-content: center;
  font-family: var(--Zen-Maru-Gothic);
  font-size: 1.8rem;
  color: var(--black);
  background-color: #fff5da;
  padding: 3rem 0 0;
  font-weight: 500;
  padding-bottom: 4.9rem;
}
/* form_area↓ */
.form_area {
  background-color: #fff;
  border-radius: 4rem;
  width: 90.3rem;
  margin-left: 16.7rem;
  padding: 8.5rem 0 8rem;
  position: relative;
  z-index: 3;
}
.form_detail_center {
  width: 72.3rem;
  margin: 0 auto;
}
.contact_title_area {
  padding-bottom: 2.6rem;
  border-bottom: 0.1rem solid #000;
  margin-bottom: 3rem;
}
.contact_sub_title {
  display: flex;
  align-items: center;
  /* margin-bottom: 0.4rem; */
}
.contact_sub_title::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #00a57c;
  display: inline-block;
  margin-right: 0.5rem;
}
.contact_title {
  font-size: 3.3rem;
  font-weight: 500;
}
.contact_font {
  margin-bottom: 3rem;
}

/* form↓ */
.contact_form_column {
  margin-bottom: 3rem;
}
.company_select_name {
  margin-bottom: 1rem;
  display: inline-block;
}
.company_name {
  margin-bottom: 1rem;
  display: inline-block;
}
.company_name::after {
  content: "必須";
  color: #fff;
  background-color: #00a57c;
  width: 6rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2rem;
}
.contact_select_relative {
  position: relative;
}
.contact_select_relative::after {
  content: "";
  width: 2.3rem;
  height: 2rem;
  display: inline-block;
  position: absolute;
  right: 2rem;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 0;
  height: 0;
  border-left: 1.2rem solid transparent;
  border-right: 1.2rem solid transparent;
  border-top: 2rem solid black;
  pointer-events: none; 
}
.input_basic_area {
  border: 0.1rem solid #122444;
  border-radius: 1rem;
  width: 100%;
  padding: 1.1rem 2rem;
  font-size: 1.8rem;
  overflow-wrap: break-word;
}
.confirm_area .input_basic_area {
  background-color: #FFF4D8;
}
.company_textarea {
  display: block;
  border: 0.1rem solid #122444;
  border-radius: 1rem;
  padding: 1.1rem 2rem;
  width: 100%;
  min-height: 50rem;
}
.is_error {
  border-color: #FF0000;
}
.textarea_bottom {
  margin-bottom: 5rem;
}
.form_last_wrap {
  text-align: center;
}
.disabled_btn_wrap {
  position: relative;
  display: inline-block;
}
.confirm_btn_wrap {
  display: flex;
  justify-content: space-between;
}

.wpcf7-spinner {
  display: none;
}

/*⇂ CONTACT-BUTTON ⇂*/
.input_disabled_btn,
.btn_previous_wrap,
.btn_disabled_wrap,
.back_button {
  display: flex;
  gap: 1rem;
  cursor: pointer;
}

.btn_previous_wrap {
  flex-direction:row-reverse;
}
.disabled_btn {
  pointer-events: none;
}
.btn_disabled_wrap {
  width: 9.6rem;
}
.confirm_submit_btn {
  /* width: 100%; */
  height: 100%;
  text-align: center;
}
.thanks_btn,
.confirm_submit_btn {
  pointer-events: painted;
}

.thanks_btn {
  display: flex;
  gap: 1rem;
}

.confirm_submit_btn {
  cursor: pointer;
}
.btn_thanks_wrap {
  display: flex;
  gap: 1rem;
  align-items: center;
}
/* .input_disabled_btn::after {
  content: "→";
}
.input_disabled_btn::after,
.btn_previous_wrap::before,
.btn_disabled_wrap::after,
.btn_thanks_wrap::after {
  display: inline-flex;
  font-size: 1.8rem;
  color: #fff;
  width: 5rem;
  height: 5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #00a57c;
}
.btn_previous_wrap::before {
  content: "←";
}
.btn_disabled_wrap::after,
.btn_thanks_wrap::after {
  content: "→";
}
.btn_disabled_wrap::after {
  z-index: -1;
  cursor: none;
  position: absolute;
  top: 0;
  right: 0;
} */
/*↑ CONTACT-BUTTON ↑*/

.thanks_contact_font {
  margin-bottom: 4rem;
}

select {
  color: black; /* option選択時の文字色 */
}

select.is-empty {
  color: gray; /* placeholder(初期値)の文字色 */
}
.wpcf7-spinner {
  left: 8rem;
  top: 1rem;
}

/* ボタンホバーアクション */
.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #00A57C;
  position: relative;
  /* margin-right: 1rem; */
  transition: .2s;
  color: #fff;
}

.arrow::before {
  content: '→';
  display: inline-block;
  /* margin-right: 1rem; */
  text-align: center;
  line-height: 5rem;
  color: #FFFFFF;
  font-size: 1.8rem;
  position: absolute;
  left: 1.4rem;
  transition: .2s;
}

.btn_disabled_wrap{
  position: relative;
}
.btn_disabled_wrap::before{
  content: '→';
  display: inline-block;
  /* margin-right: 1rem; */
  text-align: center;
  line-height: 5rem;
  color: #FFFFFF;
  font-size: 1.8rem;
  position: absolute;
  right: 1.4rem;
  transition: .2s;
  z-index: 10;
  pointer-events: auto;
}
.submit_btn_arrow{
  color: #00A57C;
}
/* 親要素をホバー時に動く */
/* contact用 */
.input_disabled_btn:hover .arrow::before {
  transform: translateX(.6rem);
  pointer-events: none;
}
/* confirm用 */
/* .btn_disabled_wrap:hover .arrow::before {
  transform: translateX(.6rem);
  } */
.btn_disabled_wrap:hover::before {
  pointer-events: none;
  transform: translateX(.6rem);
  }
  /* .btn_disabled_wrap:hover .arrow {
    padding-right: .5rem;
    transition: .2s;
    text-align: right;
} */

/* thanks用 */
.thanks_btn:hover .arrow::before {
  transform: translateX(.6rem);
}

/* 戻るボタンホバー */
.back_arrow {
  display: inline-block;
  vertical-align: middle;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #00A57C;
  position: relative;
  /* margin-right: 1rem; */
}

.back_arrow::before {
  content: '←';
  display: inline-block;
  /* margin-right: 1rem; */
  text-align: center;
  line-height: 5rem;
  color: #FFFFFF;
  font-size: 1.8rem;
  position: absolute;
  left: 1.4rem;
  transition: .2s;
}

.btn_previous_wrap:hover .back_arrow::before {
  transform: translateX(-.6rem);
}


@media screen and (max-width: 699.98px) {
 /* 下層FV */
  .fv_bg_cor {
    width: 100%;
    height: 53.1rem;
    position: absolute;
    top: 0;
    left: 0;
    /* z-index: 2; */
  }
  .hero_visual {
    width: 100%;
    padding: 0 2.5rem 0;
    height: 49.1rem;
    margin: 0;
    /* margin-bottom: 4rem; */
  }

  /* 背景追従 */
  .bg_wrap {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .bg_shape_sp {
    width: 100%;
    height: auto;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    padding-top: 9.1rem;
  }
   .bg_shape {
    display: none;
  }
  .hero_visual img {
    border-radius: 3rem;
  }

  .contact_wrapper {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
  /* form_area↓ */
  .form_area {
    width: 32.5rem;
    padding: 2.5rem 0 5rem;
    margin: 0 auto;
  }
  .form_detail_center {
    width: 28.6rem;
  }
  .contact_title_area {
    padding-bottom: 1.7rem;
    margin-bottom: 2rem;
  }
  .contact_sub_title {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
  .contact_title {
    font-size: 2.5rem;
  }
  .contact_font_area {
  }
  .contact_font {
    margin-bottom: 3.3rem;
  }

  /* form↓ */
  .contact_form_column {
    margin-bottom: 2rem;
  }
  .input_basic_area {
    padding: 1.3rem 1rem;
    font-size: 1.6rem;
  }
  .js-select{
    padding: 1.3rem 3.5rem 1.3rem 1rem;
  }
  .contact_select_relative::after {
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-top: 1.7rem solid black;
    right: 1rem;
  }
  .company_textarea {
    padding: 1.3rem 1rem;
  }
  .disabled_btn_wrap::after {
    top: -1rem;
  }
  .textarea_bottom {
    margin-bottom: 3rem;
  }

}