/* Sizes of the form */
.ai-seo-form .hubspot-form {
  --hubspot-form-min-height: 482px;
  --hubspot-form-column-gap: 16px;
}

@media (width <= 767px) {
  .ai-seo-form .hubspot-form {
    --hubspot-form-min-height: 737px;
  }
}

.ai-seo-form {
  max-width: 570px;
  margin: 0 auto;
}

.ai-seo-form .hubspot-form .hs-form {
  margin: 0;
  padding: 0;
}

/* A field is a row: the label on the left, the input on the right. The label
   is dissolved into the grid, so that the 必須 badge can share the cell of the
   input. */
.ai-seo-form .hubspot-form .hs-form .hs-form-field {
  --label-width: 186px;

  display: grid;
  grid-template-columns: var(--label-width) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding-bottom: 20px;
}

.ai-seo-form .hubspot-form .hs-form .hs-form-field:has(> .hs-error-msgs) {
  padding-bottom: 4px;
}

.ai-seo-form .hubspot-form .hs-form .hs-form-field > label {
  display: contents;
}

.ai-seo-form .hubspot-form .hs-form .hs-form-field > label > span:first-child {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  text-align: right;
}

.ai-seo-form .hubspot-form .hs-form .hs-form-field > .input {
  grid-column: 2;
  grid-row: 1;
}

/* The help text and the error messages are under the input. */
.ai-seo-form .hubspot-form .hs-form .hs-form-field > .hs-field-desc {
  grid-column: 2;
  grid-row: 2;
  margin: 4px 0 0;
  font-size: 12px;
}

.ai-seo-form .hubspot-form .hs-form .hs-form-field > .hs-error-msgs {
  grid-column: 2;
  grid-row: 2;
  margin-top: 4px;
  color: #c24b3f;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

/* 姓 and 名 share a row, and their inputs are as wide as each other. The first
   column is the label column of 姓 (186px + 12px gap) plus half of what is
   left after the 名 label (24px + 8px gap) and the 16px gap between the
   fields. */
.ai-seo-form .hubspot-form .hs-form .form-columns-2 {
  display: grid;
  grid-template-columns: calc(50% + 75px) minmax(0, 1fr);
  column-gap: 16px;
}

.ai-seo-form .hubspot-form .hs-form .form-columns-2 .hs-form-field + .hs-form-field {
  --label-width: 24px;

  column-gap: 8px;
}

/* The 必須 badge, at the right end of the input. */
.ai-seo-form .hubspot-form .hs-form .hs-form-field > label .hs-form-required {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  place-self: center end;
  margin-right: 15px;
  color: #ec8878;
  font-size: 0;
  line-height: 1;
  pointer-events: none;
}

.ai-seo-form .hubspot-form .hs-form .hs-form-field > label .hs-form-required::before {
  content: '必須';
  font-size: 14px;
  font-weight: 700;
}

.ai-seo-form .hubspot-form .hs-form .hs-input:not([type='checkbox'], [type='radio']) {
  height: 44px;
  padding: 10px 60px 10px 15px;
  border: 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  outline: none;
}

.ai-seo-form .hubspot-form .hs-form textarea.hs-input:not([type='checkbox'], [type='radio']) {
  height: 80px;
  padding-right: 15px;
  resize: none;
}

/* The 姓 and 名 inputs are narrow, so the text stops just before the badge. */
.ai-seo-form .hubspot-form .hs-form .form-columns-2 .hs-input:not([type='checkbox'], [type='radio']) {
  padding-right: 52px;
}

.ai-seo-form .hubspot-form .hs-form .hs-input::placeholder {
  color: #aaa;
  font-weight: 400;
}

.ai-seo-form .hubspot-form .hs-form .hs-input.error:not([type='checkbox'], [type='radio']) {
  border: 1px solid #c24b3f !important;
}

/* Consent checkbox */
.ai-seo-form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox {
  display: block;
}

.ai-seo-form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox .inputs-list {
  display: flex;
  justify-content: center;
}

.ai-seo-form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox .inputs-list label {
  justify-content: center;
  gap: 12px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

.ai-seo-form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox .inputs-list a {
  text-decoration: underline;
}

.ai-seo-form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox .hs-error-msgs {
  text-align: center;
}

/* Button */
.ai-seo-form .hubspot-form .hs-form .hs_submit {
  margin-top: 10px;
}

.ai-seo-form .hubspot-form .hs-form .hs-button {
  width: 100%;
  height: 72px;
  border: 0;
  border-radius: 6px;
  background-color: #ffcd3a;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  transition: background-color 0.3s;
}

.ai-seo-form .hubspot-form .hs-form .hs-button:hover {
  background-color: #e6b935;
}

/* The reCAPTCHA notice */
.ai-seo-form .branding {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
}

@media (width <= 767px) {
  .ai-seo-form .hubspot-form .hs-form .hs-form-field {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  .ai-seo-form .hubspot-form .hs-form .hs-form-field > label > span:first-child {
    text-align: left;
  }

  .ai-seo-form .hubspot-form .hs-form .hs-form-field > .input,
  .ai-seo-form .hubspot-form .hs-form .hs-form-field > label .hs-form-required {
    grid-column: 1;
    grid-row: 2;
  }

  .ai-seo-form .hubspot-form .hs-form .hs-form-field > .hs-field-desc,
  .ai-seo-form .hubspot-form .hs-form .hs-form-field > .hs-error-msgs {
    grid-column: 1;
    grid-row: 3;
  }

  .ai-seo-form .hubspot-form .hs-form .form-columns-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}