@charset "utf-8";

/* --------共通部分======== */
.kstyle_confirm {
  padding: 0 0 20rem 17.5rem;
  background-color: #CACACA;
}


/* --------トップ画像-------- */

.head_image {
  aspect-ratio: 1105/250;
  width: 100%;
}

.top_image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


.section_title {
  font-family: var(--Asc);
  font-size: 3rem;
  line-height: 1em;
  font-weight: 500;
  text-align: center;
}


/* --------連絡先の案内-------- */

.contactform_wrapper {
  margin: 10rem auto 0;
}

.contact_guidance {
  padding-top: 6rem;
}

.contact_guidance_text {
  margin: 9.3rem auto 0;
  font-size: 1.6rem;
  line-height: 3rem;
  width: 38rem;
  text-align: center;
  font-weight: 500;
}

.tel_text {
  display: inline;
  color: #002C5E;
}


/* --------コンタクトフォーム-------- */

.wp-block-contact-form-7-contact-form-selector {
  font-family: var(--NotoSans);
}

/* ----ラジオボタン---- */
.contact_radio_wrapper {
  background-color: #CFCFCF;
  width: 93.1rem;
  height: 18.2rem;
  padding: 4rem 16.5rem;
  margin: 2rem auto 0;
  border: none;
}

.radio_text {
  font-size: 1.5rem;
  font-weight: 400;
}

.radio_conf_outer{
  display: block;
  margin-top: 2.4rem;
}


/* .contact_radio{
  display: flex;
  flex-direction: column;
} */



.radio_conf_multi{
  width: 60rem;
  height: 5.3rem;
  border-bottom: .1rem solid #FFFFFF;
  font-size: 1.5rem;
  display: flex;
  justify-content: start;
  align-items: center;
  column-gap: 2.2rem;
  position: relative;
}

.radio_conf_multi::before {
  aspect-ratio: 1/1;
  content: "";
  width: 2rem;
  border: .1rem solid #000000;
  border-radius: 50%;
}

.radio_conf_multi::after {
  content: "";
  width: 1.328rem;
  height: 1.106rem;
  background-image: url(../img/radio_button_checked.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: .3rem;
  opacity: 1;
}



/* ----テキストフォーム---- */
.contact_textform_wrapper {
  background-color: #CFCFCF;
  width: 93.1rem;
  height: 99.5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding: 4rem 16.5rem;
  margin: 5rem auto 0;
}

.contact_textform {
  display: grid;
  grid-template-columns: 15.1rem 45rem;
}

.contact_labeltext {
  width: 15.1rem;
  height: 4.5rem;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 1.5rem;
  font-family: var(--NotoSans);
}

.contact_textbox {
  width: 45rem;
  height: 4.5rem;
  font-size: 1.5rem;
  padding: 0 3rem;
  display: flex;
  align-items: center;
}

.contact_textarea {
  width: 45rem;
  height: fit-content;
  min-height: 4.5rem;
  resize: none;
  padding: 1.2rem 3rem;
  font-size: 1.5rem;
  line-height: 2em;
}

.confirm_buttons{
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.send_button {
  width: 11rem;
  height: 4rem;
  background-color: #002C5E;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #FFFFFF;
  /* margin: 0 auto; */
}

.send_button.prev{
  background-color: white;
  color: black;
}

.wpcf7-spinner {
  display: none;
}

.wpcf7-response-output {
  border-color: #CACACA !important;
  color: #dc3232;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
  left: 8.7rem;
}

@media screen and (max-width:699.98px) {

  /* --------共通部分======== */
  .kstyle_confirm {
    padding: 7rem 0 15rem;
  }


  /* --------トップ画像-------- */

  .head_image {
    aspect-ratio: 375/150;
  }


  /* --------連絡先の案内-------- */

  .contact_guidance {
    padding-top: 2.5rem;
  }

  .contact_guidance_text {
    margin: 2.5rem auto 0;
    font-size: 1.5rem;
    width: 26rem;
  }

  /* --------コンタクトフォーム-------- */
  .contactform_wrapper {
    margin: 5.1rem auto 0;
  }

  /* ----ラジオボタン---- */
  .contact_radio_wrapper {
    background-color: #CFCFCF;
    width: 100%;
    height: 13.2rem;
    padding: 1.5rem;
    margin-top: 6.2rem;
  }

    .radio_conf_multi {
    width: 100%;
  }

  .radio_conf_multi::after {
    left: .3rem;
  }


  /* ----テキストフォーム---- */
  .contact_textform_wrapper {
    background-color: #CFCFCF;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem 1.5rem 4.5rem;
    margin: 10rem auto 0;
  }

  .contact_textform {
    display: block;
  }

  .contact_labeltext {
    width: 100%;
    height: fit-content;
  }

  .contact_textbox {
    width: 100%;
    padding: 1.2rem 1.5rem;
    margin-top: .9rem;
  }

  .contact_textarea {
    width: 100%;
    padding: 1.2rem 1.5rem;
    margin-top: .9rem;
  }

  .confirm_buttons{
    margin-top: 10rem;
  }

  .send_button {
    margin: 0;
  }

  .wpcf7-spinner {
    display: none;
  }

  .wpcf7-response-output {
    border-color: #CACACA !important;
    color: #dc3232;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    position: relative;
    left: 8.7rem;
  }
}