.forminator-ui * {
  width: 100%;
}

.forminator-custom-form {

  .forminator-row {
    margin: 1em 0;
    display: flex;
    gap: 1em;

    /*    .forminator-col {
          width: 100%;

          .forminator-field {
            width: 100%;
          }
        }*/

    & label {
      display: block;
      color: rgb(156 163 175 / var(--tw-text-opacity, 1));
      font-size: .75rem;
      line-height: 1rem;
      letter-spacing: .1em;
      margin-bottom: .5rem;
      font-weight: bold;

      .forminator-required {
        font-size: 0;
        visibility: hidden;

        &::before {
          content: '必須';
          color: rgb(255 255 255 / var(--tw-text-opacity, 1));
          font-size: 10px;
          visibility: visible;
          padding: .125rem .375rem;
          background-color: rgb(204 52 117 / var(--tw-bg-opacity, 1));
          border-radius: .25rem;
          margin-left: .25rem;
          border: 0 solid #e5e7eb;
          letter-spacing: .1em;
          font-weight: 700;
        }
      }
    }

    .forminator-name--field,
    .forminator-email--field,
    .forminator-select--field,
    .forminator-textarea {
      padding: .75rem 1rem;
      --tw-bg-opacity: 1;
      background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));

      --tw-border-opacity: 1;
      border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
      border-radius: .75rem;
      width: 100%;
      font-family: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      font-size: 100%;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      color: inherit;
      margin: 0;
    }

    .forminator-textarea {
      height: 7em;
    }

    .forminator-button-submit {
      margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));

      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: .15s;
      --tw-shadow-color: rgba(30, 58, 138, .2);
      --tw-shadow: var(--tw-shadow-colored);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
      color: rgb(255 255 255 / var(--tw-text-opacity, 1));
      font-weight: 900;
      font-size: 1.125rem;
      line-height: 1.75rem;
      padding-top: 1.25rem;
      padding-bottom: 1.25rem;
      border-radius: .75rem;
      background-color: rgb(35 56 192 / var(--tw-bg-opacity, 1));

      &:hover {
        background-color: rgb(28 45 160 / var(--tw-bg-opacity, 1));
      }

    }

    .forminator-error-message {
      font-size: 0.75rem;
      color: rgb(204 52 117 / var(--tw-bg-opacity, 1));
    }
  }

  .forminator-loading {
    text-align: center;
    font-size: .9rem;
    line-height: 1.75rem;
    background-color: #fffec0;
    border: 2px solid #f6ca28;

    &[area-hidden=true] {
      display: none;
    }
  }

  .forminator-success {
    text-align: center;
    font-size: .9rem;
    line-height: 1.75rem;
    background-color: #dcfff3;
    border: 2px solid #2a812a;

    &[area-hidden=true] {
      display: none;
    }
  }

  .forminator-error {
    display: none;
  }

}


#contact {
  .forminator-row {
    display: inherit;

    > .forminator-col {
      margin: 1rem 0;
    }

    .forminator-name--field,
    .forminator-email--field,
    .forminator-select--field,
    .forminator-textarea {
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: .15s;

      color: rgb(255 255 255 / var(--tw-text-opacity, 1));
      font-size: .875rem;
      line-height: 1.25rem;
      background-color: hsla(0, 0%, 100%, .1);
      border-color: hsla(0, 0%, 100%, .2);
      border-width: 1px;
    }

    .forminator-select--field {
      & option {
        color: #3E3E3E;
      }
    }

    .forminator-button-submit {
      font-size: 0;
      position: relative;
      overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease;
      color: rgb(35 56 192 / var(--tw-text-opacity, 1));
      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
      padding-top: 1rem;
      padding-bottom: 0.8rem;

      &:after {
        font-size: 1rem;
        content: '無料で相談する（30秒で完了）';
      }
    }
  }
}