/*
Theme Name: original Child
Version: 1.0
Template: original
*/
:root {
  --viewport-width: min(100vw, 2000px);
  --b: calc(var(--viewport-width) / 160);
}

#contact .progress__wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(3.5rem, 5px);
}
#contact .progress__wrapper span {
  display: grid;
  place-items: center;
  width: 100%;
  padding: max(3rem, 15px) 5%;
  background: rgba(2, 0, 78, 0.05);
  border-radius: max(0.5rem, 5px);
  font-size: max(1.6rem, 14px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
}
#contact .progress__wrapper span.active {
  color: #fff;
  background: #02004E;
}
#contact .form__wrapper {
  display: grid;
  grid-template-columns: 1fr max(72rem, 400px);
  gap: max(10rem, 20px);
  margin-top: max(9.5rem, 50px);
  padding-bottom: max(16rem, 80px);
}
@media (max-width: 1000px) {
  #contact .form__wrapper {
    grid-template-columns: 1fr;
    gap: max(5rem, 30px);
  }
}
#contact .form__supplement p {
  font-size: max(1.6rem, 14px);
  font-weight: 500;
  line-height: 2.5;
  letter-spacing: 0.1em;
}
#contact .form__content {
  width: 100%;
}
#contact .form__content .btnBox {
  margin-top: max(9rem, 40px);
}
#contact .form__content .btnBox .btn {
  margin: 0 auto;
}
#contact .form__content .form__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: max(1rem, 10px);
  margin-bottom: max(3rem, 20px);
}
#contact .form__content .form__item--postal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
@media (max-width: 600px) {
  #contact .form__content .form__item--postal {
    grid-template-columns: 1fr;
  }
}
#contact .form__content .form__item--postal__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: max(1rem, 10px);
}
#contact .form__content .form__item--postal__supplement {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding-bottom: max(1rem, 10px);
}
#contact .form__content .form__label {
  font-size: max(1.6rem, 14px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#contact .form__content .form__required {
  color: #e74c3c;
  margin-left: max(0.5rem, 5px);
}
#contact .form__content .form__input,
#contact .form__content .form__select,
#contact .form__content .form__textarea {
  width: 100%;
  padding: max(2.5rem, 17px) max(2rem, 15px);
  font-size: max(1.6rem, 14px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
  border: 1px solid rgba(2, 0, 78, 0.2);
  border-radius: max(0.5rem, 5px);
  background: #fff;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}
#contact .form__content .form__input:focus,
#contact .form__content .form__select:focus,
#contact .form__content .form__textarea:focus {
  outline: none;
  border-color: #02004E;
}
#contact .form__content .form__input::-webkit-input-placeholder, #contact .form__content .form__select::-webkit-input-placeholder, #contact .form__content .form__textarea::-webkit-input-placeholder {
  color: rgba(2, 0, 78, 0.2);
}
#contact .form__content .form__input::-moz-placeholder, #contact .form__content .form__select::-moz-placeholder, #contact .form__content .form__textarea::-moz-placeholder {
  color: rgba(2, 0, 78, 0.2);
}
#contact .form__content .form__input:-ms-input-placeholder, #contact .form__content .form__select:-ms-input-placeholder, #contact .form__content .form__textarea:-ms-input-placeholder {
  color: rgba(2, 0, 78, 0.2);
}
#contact .form__content .form__input::-ms-input-placeholder, #contact .form__content .form__select::-ms-input-placeholder, #contact .form__content .form__textarea::-ms-input-placeholder {
  color: rgba(2, 0, 78, 0.2);
}
#contact .form__content .form__input::placeholder,
#contact .form__content .form__select::placeholder,
#contact .form__content .form__textarea::placeholder {
  color: rgba(2, 0, 78, 0.2);
}
#contact .form__content .form__select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: max(4rem, 40px);
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 8L0 0H12L6 8Z" fill="%2302004E"/></svg>');
  background-repeat: no-repeat;
  background-position: right max(2rem, 15px) center;
  background-size: max(1.2rem, 12px);
  cursor: pointer;
}
#contact .form__content .form__textarea {
  resize: vertical;
  min-height: 150px;
}
#contact .form__content .form__supplement-text {
  font-size: max(1.2rem, 11px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(2, 0, 78, 0.6);
}
#contact .form__content .form__error {
  color: #e74c3c;
  font-size: max(1.4rem, 12px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin-top: max(1rem, 10px);
  margin-bottom: max(2rem, 15px);
  padding: max(1.5rem, 12px);
  background: rgba(231, 76, 60, 0.1);
  border-radius: max(0.5rem, 5px);
  display: none;
}
#contact .form__content .form__error.show {
  display: block;
}
#contact .form__step {
  display: none;
}
#contact .form__step.active {
  display: block;
}
#contact .form__confirm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: max(3rem, 20px);
  margin-bottom: max(5rem, 30px);
}
#contact .form__confirm__item {
  display: grid;
  grid-template-columns: max(15rem, 135px) 1fr;
  gap: max(3rem, 20px);
  padding-bottom: max(2rem, 15px);
  border-bottom: 1px solid rgba(2, 0, 78, 0.1);
}
@media screen and (max-width: 550px) {
  #contact .form__confirm__item {
    grid-template-columns: 1fr;
    gap: max(1rem, 10px);
  }
}
#contact .form__confirm__label {
  font-size: max(1.6rem, 14px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
#contact .form__confirm__value {
  font-size: max(1.6rem, 14px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
#contact .form__confirm__value--textarea {
  white-space: pre-wrap;
}
#contact .form .form__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: max(2rem, 15px);
  margin-top: max(9rem, 40px);
}
#contact .form .form__buttons .btnBox {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 300px;
  margin-top: 0;
}
#contact .form .form__buttons .btnBox #backToInputBtn {
  opacity: 0.5;
}
#contact .form__complete {
  text-align: center;
  padding: max(5rem, 40px) 0;
}
#contact .form__complete__title {
  font-size: max(2.8rem, 24px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin-bottom: max(3rem, 25px);
}
#contact .form__complete__message {
  font-size: max(1.6rem, 14px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: max(5rem, 40px);
}
#contact .form__complete .btnBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}