@charset "UTF-8";

/*================================================
* contact
================================================*/
#contact {
  padding-bottom: 12rem;
}

#contact.confilm,
#contact.thanks {
  padding-top: 8rem;
}

#contact .lead {
  text-align: center;
  font-size: 1.6rem;
  line-height: 2;
  margin-bottom: 5rem;
}

.contact_wrap {
  background: #F8F8F8;
  padding: 7rem 5rem;
  border-radius: 1rem;
}

.contact_wrap .c_tel {
  padding-bottom: 6rem;
  margin-bottom: 6rem;
  margin-top: 0;
  border-bottom: 1px solid #DBE0EA;
}

.contact_wrap .contact_wrap-ttl {
  color: var(--color-primary);
  font-size: 1.8rem;
  text-align: center;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.contact_wrap .c_tel .icon_tel {
  background-image: url(../../images/icon_tel_bl.png);
  width: 1.4rem;
  height: 2.406rem;
}

.contact_wrap .c_tel div {
  font-size: 4.6rem;
  color: var(--color-black);
}

.form_wrap .icon_mail {
  background-image: url(../../images/icon_mail_bl.png);
  width: 2.005rem;
  height: 1.466rem;
}

.form_wrap table {
  width: 86rem;
  margin: 4rem auto 0;
  font-size: 1.6rem;
  border-spacing: 0px;
  table-layout: fixed;

}

.form_wrap colgroup .ttl {
  width: 30%;
}

.form_wrap colgroup .txt {
  width: 70%;
}

.form_wrap table th,
.form_wrap table td {
  /* vertical-align: middle; */
  text-align: center;
  border-spacing: 0px;
  word-break: break-word;
}

.form_wrap table th .ttl {
  margin-top: 4rem;
}


.form_wrap table td .txt {
  margin-top: 4rem;
}

.form_wrap table th .ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 5rem;
}

.form_wrap table th .ttl sup {
  font-size: 1.4rem;
  color: var(--color-white);
  background: var(--color-red);
  height: 2.5rem;
  width: 4.6rem;
  display: grid;
  place-content: center;
  border-radius: 0.2rem;
}

.form_wrap input,
.form_wrap textarea {
  display: block;
  background: var(--color-white);
  min-height: 4rem;
  border: 1px solid #DBE0EA;
  border-radius: 0.3rem;
  width: 100%;
  text-align: left;
  padding: 0 1.5rem;
  font-size: 1.6rem;
  font-family: var(--noto);
}



.form_wrap textarea {
  height: 20rem;
  padding: 1rem 1.5rem;
}

.form_wrap textarea::placeholder,
.form_wrap input::placeholder {
  color: #D1D4D9;
}


.policy_check {
  margin-top: 5rem;
}

.form_wrap label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  cursor: pointer;
}

.form_wrap .policy_check-txt a {
  text-decoration: underline;
  margin-left: 1rem;
}

.form_wrap .policy_check-txt .checkbox {
  display: block;
  height: 2.4rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid #DBE0EA;
  background: var(--color-white);
  position: relative;
}

.form_wrap .policy_check-txt .checkbox::before {
  position: absolute;
  content: "";
  background: url(../../images/contact/check.png) no-repeat center/cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .2s;
}

.form_wrap .policy_check-txt .checkbox.on::before {
  opacity: 1;
}

.form_wrap .policy_check-txt input {
  width: 2.4rem;
  opacity: 0;
  cursor: pointer;
}

.form_wrap .submit,
.submit_btn-clm .backBtn {
  background: var(--color-primary);
  color: var(--color-white);
  height: 6rem;
  width: 30rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding-left: 3rem;
  border-radius: 0.3rem;
  position: relative;
  border-radius: 100px;
  font-size: 1.8rem;
  margin: 3rem auto 0;
  transition: all .4s;
  border: 1px solid var(--color-primary);
}

.form_wrap .submit:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

.check-submit {
  opacity: 0.4;
  pointer-events: none;
}

.policy_check:has(.checkbox.on) .check-submit {
  opacity: 1;
  pointer-events: all;
}

.submit_btn-clm .submit-back-inner::before,
.form_wrap .submit::before {
  position: absolute;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-red);
  border-radius: 10rem;
  top: 50%;
  transform: translateY(-50%);
  right: 3rem;
  z-index: 1;
}



/* confilm */
.confilm .formTable .txt {
  text-align: left;
}

.confilm .formTable {
  margin-top: 0;
}

.confilm .contact_wrap {
  padding-top: 3rem;
}


.submit_btn-clm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-top: 7rem;
}

.submit_btn-clm .submit,
.submit_btn-clm .backBtn {
  width: 25rem;
  margin: 0;
}

.submit_btn-clm .backBtn {
  background: #717171;
  border: 1px solid #717171;
}

.submit_btn-clm .backBtn:hover {
  background: #3e3e3e;
}

.submit-back-inner {
  position: relative;
}

.submit_btn-clm .submit-back-inner::before {
  background: var(--color-white);
}


/* thanks */
.thanks h2 {
  margin-bottom: 5rem;
}

.thanks_inner {
  width: 68.18%;
  margin: 5rem auto 0;
}

.thanks_inner p {
  font-size: 1.6rem;
  margin-top: 2rem;
  line-height: 2;
}

.thanks_inner .c_btn-box {
  margin-top: 5rem;
}


/* エラー */
.formTable .i_wrap {
  position: relative;
  transition: .4s;
}

.formTable .i_wrap.is-error {
  padding-bottom: 2rem;
}


.formTable .i_wrap sup {
  position: absolute;
  opacity: 0;
  font-size: 1.2rem;
  color: #dd002a;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: .4s;
  transition-delay: .2s;
  white-space: nowrap;
}

.formTable .i_wrap.is-error sup {
  opacity: 1;
}

@media screen and (max-width:767px) {
  #contact {
    padding-bottom: 7rem;
  }

  #contact.confilm,
  #contact.thanks {
    padding-top: 5rem;
  }

  #contact .lead {
    text-align: left;
    font-size: 1.4rem;
  }

  .contact_wrap {
    padding: 4rem 2.5rem;
    border-radius: 0.5rem;
  }

  .contact_wrap .c_tel {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
  }

  .contact_wrap .contact_wrap-ttl {
    font-size: 1.4rem;
  }

  .contact_wrap .c_tel .icon_tel {
    width: 1.064rem;
    height: 1.829rem;
  }

  .form_wrap .icon_mail {
    width: 1.601rem;
    height: 1.171rem;
  }

  .contact_wrap .c_tel div {
    font-size: 2.6rem;
  }

  .form_wrap table {
    width: 100%;
    margin-top: 0.5rem;
  }

  .form_wrap colgroup .ttl {
    width: 100%;
  }

  .form_wrap colgroup .txt {
    width: 100%;
  }

  .formTable,
  .formTable tbody,
  .formTable tr,
  .formTable th,
  .formTable td {
    display: block;
    width: 100%;
    font-size: 1.4rem;
  }

  .form_wrap table th .ttl {
    padding-right: 0;
  }

  .form_wrap table th .ttl {
    margin-top: 2rem;
  }

  .form_wrap table td .txt {
    margin-top: 1.5rem;
  }

  .form_wrap table th .ttl sup {
    font-size: 1.2rem;
    height: 2.1rem;
    width: 4rem;
  }

  .form_wrap input,
  .form_wrap textarea {
    padding: 0 1.2rem;
    font-size: 1.4rem;
  }

  .form_wrap textarea {
    height: 15rem;
    padding: 1rem 1.2rem;
  }

  .policy_check {
    margin-top: 3rem;
  }

  .form_wrap label {
    font-size: 1.2rem;
  }

  .form_wrap .policy_check-txt .checkbox {
    width: 2rem;
    height: 2rem;
  }

  .form_wrap .policy_check-txt input {
    width: 2rem;
  }



  .form_wrap .submit,
  .submit_btn-clm .backBtn {
    width: 25rem;
    font-size: 1.4rem;
    padding-left: 2.5rem;
    height: 5rem;
    margin-top: 2rem;
  }

  /* confilm */
  .confilm .form_wrap table th .ttl {
    margin-top: 3rem;
  }

  .submit_btn-clm {
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 4rem;
  }

  .submit_btn-clm .submit,
  .submit_btn-clm .backBtn {
    margin: 0;
  }

  .thanks h2 {
    font-size: 2.2rem;
    margin-bottom: 3rem;
  }

  .thanks_inner {
    width: 100%;
  }

  .thanks_inner p {
    font-size: 1.4rem;
  }


  .formTable .i_wrap sup {
    font-size: 1rem;
    bottom: 0.5rem;
  }
}