@charset "UTF-8";
/* ==========================================
 Layout
============================================*/
/* ==========================================
 Contents
============================================*/
.contact {
  color: #2a2a2a;
  font-size: var(--sz-32);
  font-weight: 400;
  line-height: 1.5;
  padding-block: var(--sz-38) var(--sz-35);
}

.contact__heading {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: 1.53;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sz-30);
}
.contact__heading::after {
  content: "";
  display: block;
  width: var(--sz-454);
  height: 1px;
  background-color: var(--color-primary);
}

form > .row {
  padding-inline: var(--sz-35);
  margin-bottom: var(--sz-30);
}

form > .row:last-of-type {
  margin-bottom: var(--sz-60);
}

.row-address > * + *,
.row-email > * + *,
.row-password > * + * {
  margin-top: var(--sz-13);
}

.form-label {
  font-weight: bold;
  margin-bottom: 0;
}

.form-label ~ .ec-required {
  color: var(--color-pink);
  margin-left: 1em;
  vertical-align: unset;
  font-size: inherit;
  display: inline-block;
  font-weight: bold;
}

.form-control,
.form-select {
  font-size: inherit;
  border-radius: 0;
  border-color: var(--color-primary);
}
.form-control::-moz-placeholder, .form-select::-moz-placeholder {
  color: #b8bec4;
}
.form-control::placeholder,
.form-select::placeholder {
  color: #b8bec4;
}

textarea.form-control {
  min-height: 10em;
}

.ec-errorMessage {
  margin-bottom: 0;
  color: var(--bs-danger);
}

.icon-question {
  background: var(--color-default);
  width: var(--sz-30);
  padding: var(--sz-4);
  border-radius: 100vh;
}

div:has(> * > .icon-question) {
  display: flex;
  align-items: center;
}

.contact__note {
  font-size: var(--sz-28);
  margin-top: var(--sz-10);
}

/* ボタン */
.btn-confirm {
  aspect-ratio: 656/92;
  padding: 0;
}

@media screen and (min-width: 992px) {
  .contact {
    font-size: var(--sz-20);
    padding-block: var(--sz-38) 0;
  }
  .contact__heading {
    font-size: var(--sz-50);
    margin-bottom: var(--sz-50);
  }
  .contact__body {
    max-width: var(--sz-467);
    margin-inline: auto;
  }
  form > .row {
    margin-bottom: var(--sz-20);
    padding-inline: 0;
  }
  .contact__note {
    font-size: var(--sz-20);
  }
  /* ボタン */
  .btn-confirm {
    font-size: var(--sz-36);
    aspect-ratio: 389/82;
    width: var(--sz-389);
  }
}