#page-title {
  padding-top: 8rem;
  margin-bottom: 8rem;
  .page-title__inner {
    > h2 {
      font-weight: 700;
      font-size: 1.4rem;
      font-family: "Montserrat", sans-serif;
    }

    > span {
      display: block;
      font-weight: 900;
      font-size: 7.2rem;
      line-height: 1.2;
      letter-spacing: 0.05em;
    }
  }
}

.page-contact__inner {
  display: flex;
  align-items: flex-start;
  gap: 8rem;
  font-size: 1.4rem;

  .page-contact__note {
    position: sticky;
    top: 2.4rem;
    width: 32rem;
    font-size: 1.4rem;

    > span {
      color: #f03e3e;
      font-size: 1.2rem;
    }
  }

  .page-contact__form {
    width: calc(100% - 32rem - 8rem);
    background-color: #fff;
    padding: 8rem;
    border-radius: 1.6rem;
    color: #333;
    word-break: break-all;
  }
}

.form__item {
  margin-bottom: 2.4rem;

  &:last-of-type {
    margin-bottom: 0;
  }

  .form__item__inner {
    display: flex;
    align-items: center;

    > label {
      display: flex;
      gap: 1.6rem;
      width: 100%;
    }

    .form__item__name {
      min-width: 14rem;
      margin: 0;
      padding-top: 0.8rem;
    }

    .form__item__input {
      width: 100%;
      border: solid 1px #dddddd;
      height: 6rem;
      border-radius: 0.8rem;
      padding: 1.6rem;
      font-size: 16px;
      outline: 0;
      transition: 0.4s;

      &:focus {
        border: solid 1px #ce9700;
      }

      &:hover {
        border: solid 1px #ce9700;
      }
    }

    .form__item__textarea {
      width: 100%;
      border: solid 1px #dddddd;
      min-height: 18rem;
      border-radius: 0.8rem;
      padding: 1.6rem;
      font-size: 16px;
      outline: 0;
      transition: 0.4s;

      &:focus {
        border: solid 1px #ce9700;
      }

      &:hover {
        border: solid 1px #ce9700;
      }
    }
  }
}

.required {
  position: relative;
  top: -0.4rem;
  margin-left: 0.4rem;
}

.required::after {
  content: "＊";
  color: #f03e3e;
  font-size: 1rem;
}

.required__error {
  font-size: 1.2rem;
  color: #f03e3e;
  padding-left: 15.6rem;
}

.form__btn__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem 4rem;
  justify-content: center;
}

.form__prev-btn {
  background-color: #fff;
  color: #ce9700;
  border-radius: 4rem;
  padding: 2.4rem;
  cursor: pointer;
  font-size: 1.6rem;
  border: solid 1px #ce9700;
  width: 18rem;
  transition: 0.4s;
}

.form__next-btn {
  background-color: #ce9700;
  color: #fff;
  border-radius: 4rem;
  padding: 2.4rem 4.8rem;
  cursor: pointer;
  font-size: 1.6rem;
  width: 24rem;
  transition: 0.4s;
}

.text-link {
  text-decoration: underline;
  color: #333;
  text-align: center;
  font-size: 1.2rem;
  display: block;
  width: fit-content;
  margin: 8rem auto 0;
}

@media (any-hover: hover) {
  .form__next-btn:hover {
    opacity: 0.4;
  }
  .form__next-btn:hover {
    opacity: 0.4;
  }
  .form__item__input:hover {
    border: solid 1px #ce9700;
  }

  .form__item__textarea:hover {
    border: solid 1px #ce9700;
  }
}

@media screen and (max-width: 1024px) {
  .page-contact__inner {
    gap: 2.4rem;
    flex-direction: column;

    .page-contact__note {
      position: static;
      top: 0;
      width: 100%;
    }

    .page-contact__form {
      width: 100%;
      padding: 4rem 2.4rem;
    }
  }

  .form__item {
    .form__item__inner {
      > label {
        flex-direction: column;
        gap: 0.4rem;
      }
      .form__item__name {
        min-width: 14rem;
      }
    }
  }

  .required__error {
    padding-left: 0;
  }

  .form__btn {
    text-align: center;
    margin-bottom: 8rem;
  }

  .form__btn input {
    background-color: #ce9700;
    color: #fff;
    border-radius: 4rem;
    padding: 2.4rem 8rem;
    cursor: pointer;
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 768px) {
  #page-title {
    .page-title__inner {
      > span {
        font-size: 4.8rem;
      }
    }
  }
}

.page-contact__comfirm {
  > h2 {
    font-size: 2.4rem;
    color: #002c4d;
  }

  .comfirm__table {
    width: 100%;
    padding: 4rem 0;
    display: block;

    tr {
      display: flex;
      align-items: center;
      gap: 2.4rem;
      margin-bottom: 0.8rem;

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    th {
      min-width: 14rem;
      width: 14rem;
      text-align: left;
      background-color: #f5f5f5;
      padding: 0.8rem;
    }

    td {
      display: block;
    }
  }
}