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

#contact .preface__wrapper {
  padding-bottom: max(8rem, 50px);
}
#contact .preface__wrapper p {
  text-align: center;
}
#contact .form__wrapper {
  background: #fff;
  border-radius: 0 max(5rem, 20px) 0 0;
  padding: max(10rem, 50px);
}
@media screen and (max-width: 768px) {
  #contact .form__wrapper {
    padding: 50px 5%;
  }
}
#contact .form__status {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 95.25%;
  margin-bottom: max(9rem, 50px);
}
#contact .form__status li {
  position: relative;
  display: grid;
  place-items: center;
  padding: max(2.5rem, 20px);
  text-align: center;
  background: #BBC2CB;
}
#contact .form__status li:nth-of-type(1) {
  width: 115%;
  -webkit-clip-path: polygon(0 0, 92% 0, 81% 100%, 0% 100%);
          clip-path: polygon(0 0, 92% 0, 81% 100%, 0% 100%);
}
#contact .form__status li:nth-of-type(1) span {
  margin-right: 20%;
}
#contact .form__status li:nth-of-type(2) {
  width: 125%;
  -webkit-transform: translateX(-4%);
          transform: translateX(-4%);
  -webkit-clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
          clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}
#contact .form__status li:nth-of-type(3) {
  width: 115%;
  -webkit-clip-path: polygon(19% 0, 100% 0, 100% 100%, 0% 175%);
          clip-path: polygon(19% 0, 100% 0, 100% 100%, 0% 175%);
}
#contact .form__status li:nth-of-type(3) span {
  margin-left: 20%;
}
#contact .form__status li span {
  color: #fff;
  line-height: 1;
}
#contact .form__status li.accent {
  background: #002353;
}
#contact .form__content sup.required {
  color: #DF0234;
}
#contact .form__content .btn {
  text-align: center;
}
#contact .form__content .form__row {
  display: grid;
  grid-template-columns: max(25rem, 150px) auto;
}
#contact .form__content .form__row:not(:last-of-type) {
  margin-bottom: max(2.5rem, 20px);
}
@media screen and (max-width: 768px) {
  #contact .form__content .form__row {
    grid-template-columns: 1fr;
  }
}
#contact .form__content .form__row .form__input {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#contact .form__content .form__row__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 max(3rem, 15px);
}
#contact .form__content .form__input,
#contact .form__content .form__textarea,
#contact .form__content .form__select {
  min-width: max(30rem, 150px);
  padding: max(1.5rem, 10px) max(2.5rem, 15px);
  background: rgba(234, 234, 234, 0.35);
  border: 2px solid rgba(224, 224, 224, 0.35);
}
@media screen and (max-width: 768px) {
  #contact .form__content .form__input,
  #contact .form__content .form__textarea,
  #contact .form__content .form__select {
    min-width: 100%;
  }
}
#contact .form__content .form__input:focus-visible,
#contact .form__content .form__textarea:focus-visible,
#contact .form__content .form__select:focus-visible {
  outline: #002353 auto 1px;
}
#contact .form__content .form__select {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(234, 234, 234, 0.35);
}
#contact .form__content .form__select::after {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 0;
  height: 0;
  border-width: 10px 5px 0 5px;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
  content: "";
  pointer-events: none;
}
#contact .form__submit {
  text-align: center;
  margin-top: max(9rem, 50px);
}
#contact .form__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: max(5rem, 20px);
  margin-top: max(9rem, 50px);
}
@media screen and (max-width: 768px) {
  #contact .form__buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
#contact .form__buttons form {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#contact .form__buttons form .form__btn--back {
  opacity: 0.5;
}
#contact .form .confirm__content {
  margin-top: max(7rem, 50px);
}
#contact .form .confirm__content dl {
  display: grid;
  grid-template-columns: max(25rem, 150px) 1fr;
}
@media screen and (max-width: 768px) {
  #contact .form .confirm__content dl {
    grid-template-columns: 1fr;
  }
}
#contact .form .confirm__content dl dt, #contact .form .confirm__content dl dd {
  position: relative;
}
#contact .form .confirm__content dl dt:not(:last-of-type), #contact .form .confirm__content dl dd:not(:last-of-type) {
  padding-bottom: max(1.5rem, 10px);
  margin-bottom: max(1.5rem, 10px);
}
#contact .form .confirm__content dl dt:not(:last-of-type)::after, #contact .form .confirm__content dl dd:not(:last-of-type)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: max(0.2rem, 2px);
  background-image: repeating-linear-gradient(to right, rgba(0, 35, 83, 0.35), rgba(0, 35, 83, 0.35) max(0.2rem, 2px), transparent max(0.2rem, 2px), transparent max(1rem, 10px));
  background-repeat: repeat-x;
}
@media screen and (max-width: 768px) {
  #contact .form .confirm__content dl dt:not(:last-of-type) {
    padding-bottom: max(0.5rem, 5px);
    margin-bottom: 0;
  }
  #contact .form .confirm__content dl dt:not(:last-of-type)::after {
    display: none;
  }
}
#contact .form .complete__content .form__content {
  margin-top: max(7rem, 50px);
}
#contact .form .complete__content .form__content__contact dl {
  display: grid;
  grid-template-columns: max(25rem, 175px) 1fr;
}
@media screen and (max-width: 550px) {
  #contact .form .complete__content .form__content__contact dl {
    grid-template-columns: auto 1fr;
  }
}
#contact .form .complete__content .form__content__contact dl dd a {
  text-decoration: underline;
}