/* Sizes of the form */
.contact-form .hubspot-form {
  --hubspot-form-min-height: 580px;
  --hubspot-form-column-gap: 0;
}

/* The white card around the form. */
.contact-form-card {
  max-width: 680px;
  margin: 0 auto;
  padding: 50px 40px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 15px 0 rgb(0 0 0 / 8%);
}

/* The reCAPTCHA notice under the button. */
.contact-form .branding {
  margin-top: 16px;
  color: #667075;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  text-wrap: balance;
}

.contact-form .branding a {
  color: #2d4e96;
  text-decoration: underline;
}

/* The topic field of the shared Solution form. The page ticks its topic. */
.contact-form .hubspot-form .hs-form fieldset:has(.hs_otoiawasenaiyou) {
  display: none;
}

/* A field: the label in a column on the left, the input on the right. The
   error message goes under the input. The label column fits the longest
   label, メールアドレス, on one line. */
.contact-form .hubspot-form .hs-form .hs-form-field {
  display: grid;
  grid-template-columns: 130px 1fr;
  column-gap: 30px;
  align-items: start;
  padding-bottom: 35px;
}

.contact-form .hubspot-form .hs-form .hs-form-field > label {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  margin-top: 7px;
  color: #2d4e96;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  text-align: right;
}

.contact-form .hubspot-form .hs-form .hs-form-field > .input,
.contact-form .hubspot-form .hs-form .hs-form-field > .hs-field-desc {
  grid-column: 2;
}

.contact-form .hubspot-form .hs-form .hs-form-field > .hs-error-msgs {
  grid-column: 2;
  margin-top: 4px;
  color: #d34931;
  font-size: 12px;
  line-height: 15px;
}

/* The error message takes the space under the input, so a message of one
   line does not move the fields below. */
.contact-form .hubspot-form .hs-form .hs-form-field:has(> .hs-error-msgs) {
  padding-bottom: 16px;
}

/* 姓 and 名 share a row, and their inputs are as wide as each other. The label
   of 名 sits between the two inputs in a narrow column. The first column is
   the label column of 姓 (130px + 30px gap) plus half of what is left after
   the 名 label (28px + 18px gap) and the 20px gap between the fields. */
.contact-form .hubspot-form .hs-form fieldset.form-columns-2 {
  display: grid;
  grid-template-columns: calc(50% + 47px) 1fr;
  column-gap: 20px;
}

.contact-form .hubspot-form .hs-form fieldset.form-columns-2 .hs-form-field + .hs-form-field {
  grid-template-columns: 28px 1fr;
  column-gap: 18px;
}

/* The required mark (*) as a small yellow ＊ right of the label text. */
.contact-form .hubspot-form .hs-form .hs-form-field > label .hs-form-required {
  position: absolute;
  top: -5px;
  right: -10px;
  color: #e6b832;
  font-size: 0;
}

.contact-form .hubspot-form .hs-form .hs-form-field > label .hs-form-required::before {
  content: '＊';
  font-size: 10px;
  font-weight: 700;
  line-height: 30px;
}

/* The page sets 10px on small screens. 16px keeps the text readable, and
   keeps iOS from zooming in when an input is focused. */
.contact-form .hubspot-form .hs-form .hs-input:not([type='checkbox'], [type='radio']) {
  height: 46px;
  padding: 10px 15px;
  border: 1px solid #eaeaea;
  border-radius: 3px;
  background: #fafafa;
  font-size: 16px;
}

.contact-form .hubspot-form .hs-form textarea.hs-input:not([type='checkbox'], [type='radio']) {
  height: 120px;
  resize: none;
}

/* Consent checkbox, centred under the fields. */
.contact-form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox {
  display: block;
  margin-top: -18px;
  padding-bottom: 20px;
}

.contact-form .hubspot-form .hs-form .hs-form-booleancheckbox-display {
  justify-content: center;
  gap: 0;
  color: #2d4e96;
  font-size: 13px;
  font-weight: 600;
  line-height: 30px;
}

.contact-form .hubspot-form .hs-form .hs-form-booleancheckbox-display input {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border-radius: 3px;
}

.contact-form .hubspot-form .hs-form .hs-form-booleancheckbox-display a {
  color: #2d4e96;
  text-decoration: underline;
}

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

.contact-form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox .hs-error-msgs label {
  justify-content: center;
}

/* Submit button. It is an <input>, which has no content, so the arrow icon
   is drawn on the element around it, at the right end. */
.contact-form .hubspot-form .hs-form .hs_submit .actions {
  position: relative;
  width: 228px;
  margin: 0 auto;
}

.contact-form .hubspot-form .hs-form .hs_submit .actions::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 25px;
  width: 25px;
  height: 25px;
  margin-top: -12.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23211715' d='M11.5793 25.0215C11.3261 25.0182 11.0847 24.9218 10.9075 24.7535C10.7287 24.5861 10.6284 24.3596 10.6284 24.1235C10.6284 23.8875 10.7287 23.661 10.9075 23.4936L22.6925 12.5126L10.9075 1.53152C10.8175 1.44845 10.7461 1.34963 10.6974 1.24075C10.6487 1.13187 10.6236 1.01509 10.6236 0.897133C10.6236 0.779181 10.6487 0.662397 10.6974 0.553516C10.7461 0.444635 10.8175 0.345814 10.9075 0.262752C11.0873 0.0963372 11.3305 0.00292969 11.5841 0.00292969C11.8376 0.00292969 12.0808 0.0963372 12.2606 0.262752L24.7366 11.8782C24.8266 11.9613 24.898 12.0601 24.9467 12.169C24.9954 12.2778 25.0205 12.3946 25.0205 12.5126C25.0205 12.6305 24.9954 12.7473 24.9467 12.8562C24.898 12.9651 24.8266 13.0639 24.7366 13.147L12.2606 24.7624C12.171 24.8452 12.0646 24.9107 11.9477 24.9552C11.8308 24.9997 11.7056 25.0222 11.5793 25.0215Z'/%3E%3Cpath fill='%23211715' d='M0.965274 25.0215C0.774656 25.0226 0.588025 24.9707 0.429177 24.8726C0.270329 24.7745 0.14646 24.6346 0.0733636 24.4707C0.000266902 24.3068 -0.018746 24.1263 0.0187488 23.9523C0.0562437 23.7783 0.148548 23.6186 0.283892 23.4937L12.0785 12.5126L0.283892 1.53153C0.103179 1.36328 0.0016547 1.13509 0.0016547 0.897151C0.0016547 0.659212 0.103179 0.431018 0.283892 0.262769C0.464606 0.094521 0.709707 0 0.965274 0C1.22084 0 1.46594 0.094521 1.64666 0.262769L14.1227 11.8782C14.2116 11.9617 14.282 12.0607 14.3297 12.1696C14.3775 12.2784 14.4017 12.395 14.401 12.5126C14.3974 12.7492 14.298 12.9757 14.1227 13.147L1.64666 24.7624C1.55698 24.8452 1.45063 24.9107 1.33371 24.9552C1.21678 24.9997 1.09158 25.0222 0.965274 25.0215Z'/%3E%3C/svg%3E")
    no-repeat center / 25px 25px;
  pointer-events: none;
}

.contact-form .hubspot-form .hs-form .hs-button {
  width: 100%;
  padding: 22px 0;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(90deg, #ffdf82 0.05%, #f9c429 107.32%);
  color: #000;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.1px;
  line-height: 22px;
}

@media (width <= 991px) {
  .contact-form .hubspot-form {
    --hubspot-form-min-height: 720px;
  }

  .contact-form-card {
    padding: 20px;
  }

  .contact-form .hubspot-form .hs-form .hs-form-field {
    grid-template-columns: 1fr;
    padding-bottom: 10px;
  }

  .contact-form .hubspot-form .hs-form .hs-form-field:has(> .hs-error-msgs) {
    padding-bottom: 6px;
  }

  .contact-form .hubspot-form .hs-form .hs-form-field > label {
    width: fit-content;
    text-align: left;
  }

  .contact-form .hubspot-form .hs-form .hs-form-field > .input,
  .contact-form .hubspot-form .hs-form .hs-form-field > .hs-field-desc,
  .contact-form .hubspot-form .hs-form .hs-form-field > .hs-error-msgs {
    grid-column: 1;
  }

  .contact-form .hubspot-form .hs-form .hs-form-field > .input,
  .contact-form .hubspot-form .hs-form .hs-form-field > .hs-field-desc {
    grid-row: auto;
  }

  .contact-form .hubspot-form .hs-form fieldset {
    flex-direction: column;
    gap: 0;
  }

  .contact-form .hubspot-form .hs-form fieldset.form-columns-2 {
    display: flex;
  }

  .contact-form .hubspot-form .hs-form fieldset.form-columns-2 .hs-form-field + .hs-form-field {
    grid-template-columns: 1fr;
  }

  .contact-form .hubspot-form .hs-form .hs-input:not([type='checkbox'], [type='radio']) {
    height: 42px;
  }

  .contact-form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox {
    margin-top: 0;
    padding-bottom: 13px;
  }

  .contact-form .hubspot-form .hs-form .hs-button {
    padding: 19px 0;
  }
}