.contactPage {
  background-color: #e5edf6;
}
.contactForm {
  padding: 6rem 4rem;
  box-sizing: border-box;
  max-width: 750px;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
}
.contactForm .formDl {
  display: flex;
  flex-wrap: wrap;
}
.contactForm .formDl dt:not(:last-of-type),
.contactForm .formDl dd:not(:last-of-type) {
  margin-bottom: 2rem;
}
.contactForm .formDl dt {
  font-weight: 600;
  width: 242px;
}
.contactForm .formDl dt .signred {
  background-color: #e92b4a;
  color: #fff;
  font-size: var(--fz12);
  margin-right: 0.8rem;
  border-radius: 5px;
  padding: 0.2rem 1rem;
  font-weight: 400;
}
.contactForm .formDl dt .textEn {
  font-size: var(--fz12);
  font-weight: 400;
  color: var(--pointColor3);
  margin-left: 0.8rem;
}
.contactForm .formDl dd {
  width: calc(100% - 242px);
}
.contactForm input[type='text'],
.contactForm input[type='email'],
.contactForm input[type='tel'],
.contactForm textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  box-sizing: border-box;
}
.contactForm input::placeholder {
  color: #dadada;
  font-weight: 300;
}
.contactForm input.inputhalf {
  width: calc(100% / 2);
}

.contactForm .contactUl {
  margin-top: 2rem;
}

.contactForm .contactUl li {
  font-size: var(--fz14);
  text-indent: -1rem;
  padding-left: 1rem;
}
.contactForm .contactUl li span {
  color: var(--pointColor3);
}
.contactForm .contactUl li a {
  text-decoration: underline;
  color: var(--pointColor3);
}
.agree {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agree input[type='checkbox'] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #e3e3e3;
  vertical-align: -5px;
  background-color: #fff;
  margin-right: 0.5rem;
}
.agree input[type='checkbox']:checked {
  accent-color: var(--pointColor2);
}
.agree .agree-box {
  font-size: var(--fz14);
}
.agree .agree-box a {
  display: inline;
  text-decoration: underline;
  color: var(--pointColor3);
  font-size: var(--fz14);
}
/* 確認 */
.contactForm.step2 input[type='text'],
.contactForm.step2 input[type='email'],
.contactForm.step2 input[type='tel'],
.contactForm.step2 textarea {
  background-color: unset;
  border: none;
}
/* サンクス */
.contactThanksSec {
  text-align: center;
}
.contactThanksSec .contacttitle {
  font-size: var(--fz20);
  font-weight: 600;
  color: var(--pointColor3);
  margin-bottom: 2rem;
}
.contactThanksSec .contacttel {
  text-decoration: underline;
  margin-top: 1rem;
  display: block;
}

/* form error massage */
.error-message {
  color: #c4090b;
  font-size: var(--fz14);
}
@media screen and (max-width: 768px) {
  .contactForm {
    padding: 4rem 6rem;
  }
  .contactForm .formDl dt {
    width: 100%;
  }
  .contactForm .formDl dd {
    width: 100%;
  }
  .contactForm .formDl dt:not(:last-of-type),
  .contactForm .formDl dt:last-of-type {
    margin-bottom: 1rem;
  }
  .contactForm .formDl dd:not(:last-of-type) {
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 480px) {
  .contactForm {
    padding: 3rem 2rem;
  }
  .contactPage .btnarea {
    gap: 1rem;
  }
  .contactPage .btn.blue {
    max-width: 170px;
  }

  .contactPage .btn {
    padding: 1rem 2rem;
  }
}
