/* お問い合わせ：PC 1300px / SP 360px。共通設定は style.css を使用。 */
.contact-main {
  padding-top: 175px;
}
.contact-heading {
  max-width: 960px;
  min-height: 140px;
  margin: 0 auto 71.5px;
  padding-top: 3px;
  background: url(../img/bg_step.svg) no-repeat center top / 960px 140px;
  text-align: center;
}
.contact-heading__title {
  color: var(--color-orange);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  font-feature-settings: "palt";
}
.contact-heading__text {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;
}
.contact-panel {
  max-width: 1195px;
  margin: 0 auto;
  padding: 58px 30px 57px;
  border-radius: 16px;
  background-color: #e6f6f5;
}
.contact-fields,
.contact-confirm {
  max-width: 550px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.5;
}
.contact-field + .contact-field {
  margin-top: 25px;
}
.contact-field__label {
  display: block;
  margin-bottom: 4px;
}
.contact-required {
  color: #ff493e;
}
.contact-field__input,
.contact-field__textarea {
  display: block;
  width: 100%;
  border: 1px solid #80cecf;
  border-radius: 5px;
  background-color: #fff;
  padding: 8px 12px;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  appearance: none;
}
.contact-field__input {
  height: 40px;
}
.contact-field__textarea {
  height: 133px;
  min-height: 133px;
  resize: vertical;
}
.body-contact :is(input, textarea, button, a):focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 4px;
}
.contact-actions {
  display: flex;
  justify-content: center;
  margin-top: 76px;
}
.contact-button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 70px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 50vh;
  background: var(--color-orange);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}
.contact-button--back {
  border-color: var(--color-green);
  background: #fff;
  color: var(--color-text);
}
.contact-button--back::before {
  content: "";
  position: absolute;
  left: 22px;
  width: 10px;
  height: 16px;
  background: url(../img/icon_arrow_left_black.svg) no-repeat center / contain;
}
.contact-panel--confirm {
  padding-bottom: 65px;
}
.contact-confirm__item + .contact-confirm__item {
  margin-top: 32px;
}
.contact-confirm dd {
  margin: 5px 0 0 14px;
  overflow-wrap: anywhere;
}
.contact-actions--confirm {
  gap: 200px;
}
.body-contact .footer {
  margin-top: 70px;
}
.contact-main--complete {
  min-height: 995px;
  padding: 399px 20px 0;
  text-align: center;
}
.contact-complete .contact-actions {
  margin-top: 120px;
}
@media screen and (min-width: 751px) and (max-width: 1299px) {
  .contact-panel {
    margin-right: 4%;
    margin-left: 4%;
  }
  .contact-heading {
    margin-right: 4%;
    margin-left: 4%;
    background-size: 100% auto;
  }
  .contact-heading__title {
    font-size: clamp(22px, 2.31vw, 30px);
  }
  .contact-heading__text {
    font-size: clamp(13px, 1.54vw, 20px);
  }
  .contact-actions--confirm {
    gap: 10vw;
  }
}
@media screen and (max-width: 750px) {
  .contact-main {
    padding-top: 73px;
  }
  .contact-heading {
    min-height: 0;
    margin: 0 15px 36.5px;
    padding-top: 15px;
    background-image: url(../img/bg_step_sp.svg);
    background-size: 324px auto;
  }
  .contact-heading__title {
    font-size: 16px;
    line-height: 1.375;
  }
  .contact-heading__text {
    margin-top: 24px;
    font-size: 11px;
    line-height: 16px;
  }
  .contact-panel {
    margin: 0 15px;
    padding: 30px 15px 29px;
    border-radius: 10px;
  }
  .contact-fields,
  .contact-confirm {
    max-width: none;
    font-size: 13px;
  }
  .contact-field + .contact-field {
    margin-top: 19.5px;
  }
  .contact-field__label {
    margin-bottom: 4px;
  }
  .contact-field__textarea {
    height: 133px;
  }
  .contact-actions {
    margin-top: 50px;
  }
  .contact-button {
    width: 188px;
    height: 47px;
    font-size: 12px;
  }
  .contact-button--back::before {
    left: 16px;
    width: 8px;
    height: 12px;
  }
  .contact-panel--confirm {
    padding-bottom: 41px;
  }
  .contact-confirm__item + .contact-confirm__item {
    margin-top: 18px;
  }
  .contact-confirm dd {
    margin-top: 6px;
    margin-left: 11px;
    font-size: 15px;
    line-height: 19px;
  }
  .contact-actions--confirm {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .body-contact .footer {
    margin-top: 47px;
  }
  .contact-main--complete {
    min-height: 333px;
    padding: 119px 15px 0;
  }
  .contact-complete .contact-heading__text {
    margin-top: 26px;
  }
  .contact-complete .contact-actions {
    margin-top: 45px;
  }
}