@charset "UTF-8";

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
textarea,
select {
  width: 100%;
  max-width: 100%;
  padding: 12px .8em;

  font-size: 15px;
  line-height: 1.2;

  border: solid 2px #d1d1d1;
  border-radius: 2px;
  background-color: #fafafa;
  background-clip: padding-box;
  outline: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;

  -webkit-tap-highlight-color: transparent;

  transition: 0.3s all linear;
}

textarea {
  resize: none;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: #ccc;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border: solid 2px #3e64ff;
  transition: 0.3s all linear;
}

section#sec-form {
  padding-top: 144px;
  padding-bottom: 96px;

  .h3-wrap {
    margin-bottom: 48px;
  }

  div.formContent-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 80px;
    width: min(1120px, 100%);
    padding: 0 16px;
    margin-inline: auto;

    div.status {
      display: flex;
      flex-direction: column;
      align-items: center;

      .item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 72px;
        height: 72px;

        font-size: 14px;
        color: var(--tc);
        border-radius: 12px;

        background: #fff;
        border: solid 1px var(--tc);

        p.number {
          font-size: 20px;
          font-family: acumin-pro, sans-serif;
          font-weight: 700;
          font-style: normal;
        }
      }

      .item.lighted {
        color: #fff;
        background: var(--tc);
      }

      .line {
        display: inline-block;
        width: 1px;
        height: 36px;

        background: var(--tc);
      }
    }
  }
}

.formContent {
  width: 100%;
  padding: 64px 32px;
  margin-inline: auto;

  background: #fff;
  border-radius: 20px;

  form {
    display: grid;
    width: min(720px, 100%);
    margin-inline: auto;
  }

  .form-itemCON {
    margin-bottom: 72px;

    >*+* {
      margin-block-start: 24px;
    }
  }

  .form-item {
    display: grid;
    grid-template-columns: minmax(200px, auto) 1fr;
    column-gap: 24px;
    row-gap: 8px;

    div.form-item-label-wrap {
      position: relative;
      /*必須アイコン用*/
      padding-right: 3em;

      label.form-item-label,
      p.confirm-item-label {
        display: inline-block;
        padding: 13.2px 0;

        font-size: 14px;
        line-height: 1.4;
        /*最終46pxになるように調整*/
        font-weight: 700;
      }
    }

    .text {
      padding: 13.2px 0;
      white-space: pre-wrap;
    }
  }

  @media (max-width : 599px) {
    .form-item {
      grid-template-columns: 1fr;

      div.form-item-label-wrap {
        position: relative;
        /*必須アイコン用*/
        padding-right: 3em;

        label.form-item-label {
          padding: 0;
        }
      }
    }
  }

  .form-item:has(*:required),
  .form-item:has(*[aria-required="true"]) {
    div.form-item-label-wrap::after {
      content: '必須';
      position: absolute;
      top: calc(calc(46px - calc(11px + 4px + 4px)) / 2);
      right: 0;

      display: inline-block;
      padding: 4px .8em;

      font-size: 11px;
      line-height: 1;
      font-weight: 700;
      color: #f5f4f5;

      background: #f0134d;
      border-radius: 2px;
    }

    @media (max-width : 599px) {
      div.form-item-label-wrap {
        display: flex;
        align-items: center;
        gap: 24px;
      }

      div.form-item-label-wrap::after {
        position: static;
        top: auto;
        right: auto;
      }
    }
  }

  .input-wrap *:is(input, textarea):focus-visible {
    box-shadow: none;
  }

  .input-wrap:has(.wpcf7-not-valid-tip) input {
    border: 2px solid #f0134d;
  }

  .jcc {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .wpcf7-not-valid-tip {
    padding: 2px;
    font-size: 14px;
    font-weight: 700;
    color: #f0134d;
  }

  .wpcf7-response-output {
    /*失敗したときのメッセージ*/
    grid-column: 1/2;
    grid-row: 3/4;

    padding: 16px !important;
    margin: 0 0 24px !important;

    text-align: center;
    font-weight: 600;

    background-color: #fff;
    border: solid 2px #f0134d !important;
    border-radius: 4px;
  }

  .form-policy-wrap {
    grid-column: 1/2;
    grid-row: 2/3;
    padding: 16px 16px 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    a {
      line-height: 1.4;
      color: #3a83d0;
      font-weight: 700;
      text-decoration: underline;
    }
  }
}
div.form-complete{
  width: min(1120px,100%);
  padding: 64px 10% 96px;
  margin-inline: auto;
  background: #fff;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

#submitBtn {
  display: none;
}

.spinner-box {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: none;
  justify-content: center;
  align-items: center;
  background-color: transparent;

  background: #333333b0;
}

.three-quarter-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #fb5b53;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin .5s linear 0s infinite;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(359deg);
  }
}

@media (min-width : 1200px) {}

@media (max-width : 1200px) {
  section#sec-form {
    padding-top: 5dvh;
    padding-bottom: 3dvh;

    div.formContent-wrap {
      grid-template-columns: 1fr;
      row-gap: 16px;

      div.status {
        flex-direction: row;
        justify-content: center;

        .line {
          display: inline-block;
          width: 4dvw;
          height: 2px;
        }
      }
    }
  }

}

@media (max-width : 599px) {
  section#sec-form {
    padding-bottom: 14dvh;
    div.formContent-wrap {
      padding: 0;
    }
  }
  .formContent{
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 0px;
  }

  body:has(form[data-status="submitting"]) {
    .wpcf7-spinner {
      visibility: hidden !important;
    }

    .spinner-box {
      display: flex;
    }
  }
}