/* Sizes of the form */
.home-mv__form .hubspot-form {
  --hubspot-form-min-height: 401px;
  --hubspot-form-column-gap: 0;
}

@media (width <= 1220px) {
  .home-mv__form .hubspot-form {
    --hubspot-form-min-height: 530px;
    --hubspot-form-column-gap: 8px;
  }
}

@media (width <= 1000px) {
  .home-mv__form .hubspot-form {
    --hubspot-form-min-height: 524px;
  }
}

@media (width <= 767px) {
  .home-mv__form .hubspot-form {
    --hubspot-form-min-height: 517px;
  }
}

/* The white card around the heading, the form and the reCAPTCHA notice. */
.home-mv__form-card {
  max-width: 460px;
  margin: 0 auto;
  padding: 30px 20px;
  border-radius: 10px;
  background: #fff;
}

/* home-mv.min.css draws every form in .home-mv__form as a card. */
.home-mv__form .hubspot-form .hs-form {
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

/* ご相談事項 (message). The form is shared with /a-flow/, the only page whose
   old form had it, so it is hidden here to keep the old look. It is hidden
   only while it is optional: if it becomes required in HubSpot, it shows up
   again, so the form can still be sent. */
.home-mv__form .hubspot-form .hs-form fieldset:has(.hs_message):not(:has(.hs-form-required)) {
  display: none;
}

/* A field is a row: the label on the left, the input on the right. */
.home-mv__form .hubspot-form .hs-form .hs-form-field {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 26px;
  font-size: 13px;
}

.home-mv__form .hubspot-form .hs-form .hs-form-field > label {
  display: flex;
  flex: 0 0 100px;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding-right: 10px;
  color: #232f44;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

/* 姓 and 名 share the space after their labels equally. */
.home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field {
  flex: 1 1 100px;
}

.home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field + .hs-form-field {
  flex-basis: 65px;
}

.home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field + .hs-form-field > label {
  flex-basis: 65px;
}

.home-mv__form .hubspot-form .hs-form .hs-form-field > .input {
  flex: 1 1 0;
  min-width: 0;
}

/* The help text comes before the input in the markup, but is shown under it. */
.home-mv__form .hubspot-form .hs-form .hs-form-field > .hs-field-desc {
  order: 1;
  flex: 0 0 100%;
  margin: 2px 0 0;
  padding: 0 0 0 100px;
  color: #667075;
  font-size: 12px;
  line-height: 1.63;
}

/* The 必須 badge in place of the required mark (*). */
.home-mv__form .hubspot-form .hs-form .hs-form-field > label .hs-form-required {
  flex-shrink: 0;
  padding: 5px;
  border-radius: 8px;
  background: #0096ff;
  color: #fff;
  font-size: 0;
  white-space: nowrap;
}

.home-mv__form .hubspot-form .hs-form .hs-form-field > label .hs-form-required::before {
  content: '必須';
  font-size: 12px;
  font-weight: 700;
}

.home-mv__form .hubspot-form .hs-form .hs-input:not([type='checkbox'], [type='radio']) {
  height: 40px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f3f3f3;
  font-size: 13px;
  outline: none;
}

.home-mv__form .hubspot-form .hs-form .hs-input::placeholder {
  color: #92a1a8;
}

.home-mv__form .hubspot-form .hs-form .hs-input:not([type='checkbox'], [type='radio']):hover,
.home-mv__form .hubspot-form .hs-form .hs-input:not([type='checkbox'], [type='radio']):focus {
  border-color: #5dafe9;
  background: #fff;
}

.home-mv__form .hubspot-form .hs-form .hs-input.error:not([type='checkbox'], [type='radio']),
.home-mv__form .hubspot-form .hs-form .hs-input.error:not([type='checkbox'], [type='radio']):focus {
  border-color: #ffe8e9 !important;
  background: #ffe8e9;
}

/* The error message sits in the space under the input. */
.home-mv__form .hubspot-form .hs-form .hs-error-msgs {
  position: absolute;
  bottom: 9px;
  left: 100px;
  color: #c24b3f;
  font-size: 10px;
  font-weight: 700;
}

.home-mv__form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox .hs-error-msgs {
  bottom: 0;
}

.home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field + .hs-form-field .hs-error-msgs {
  left: 65px;
}

/* Consent checkbox */
.home-mv__form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox {
  padding-bottom: 16px;
  padding-left: 100px;
}

.home-mv__form .hubspot-form .hs-form .hs-form-booleancheckbox-display {
  align-items: flex-start;
  gap: 0;
  color: #0096ff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
}

.home-mv__form .hubspot-form .hs-form .hs-form-booleancheckbox-display input {
  width: 20px;
  height: 20px;
  margin: 5px 13px 0 0;
}

.home-mv__form .hubspot-form .hs-form .hs-form-booleancheckbox-display a {
  margin-right: 10px;
  color: #0096ff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}

/* Submit button. It is an <input>, which has no content, so its icon is
   drawn on the element around it. */
.home-mv__form .hubspot-form .hs-form .hs_submit {
  display: flex;
  justify-content: center;
}

.home-mv__form .hubspot-form .hs-form .hs_submit .actions {
  position: relative;
}

.home-mv__form .hubspot-form .hs-form .hs_submit .actions::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 32px;
  width: 20px;
  height: 20px;
  margin-top: -10px;

  /* Font Awesome Free v7.2.0 circle-chevron-right, https://fontawesome.com/license/free */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M64 320C64 461.4 178.6 576 320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320zM305 441C295.6 450.4 280.4 450.4 271.1 441C261.8 431.6 261.7 416.4 271.1 407.1L358.1 320.1L271.1 233.1C261.7 223.7 261.7 208.5 271.1 199.2C280.5 189.9 295.7 189.8 305 199.2L409 303C418.4 312.4 418.4 327.6 409 336.9L305 441z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  pointer-events: none;
}

.home-mv__form .hubspot-form .hs-form .hs-button {
  padding: 14px 32px 14px 60px;
  border: 0;
  border-radius: 30px;
  background: #ffd700;
  color: #090a0a;
  font-size: 18px;
  font-weight: 700;
  transition: 0.4s;
}

.home-mv__form .hubspot-form .hs-form .hs-button:hover {
  background: #ffc400;
}

/* Labels above the inputs */
@media (width <= 1220px) {
  .home-mv__form .hubspot-form .hs-form .hs-form-field,
  .home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field,
  .home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field + .hs-form-field {
    flex: 1 1 0;
    flex-direction: column;
  }

  .home-mv__form .hubspot-form .hs-form .hs-form-field > label,
  .home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field + .hs-form-field > label {
    flex: none;
    justify-content: space-between;
    height: auto;
    margin-bottom: 5px;
    text-align: left;
  }

  .home-mv__form .hubspot-form .hs-form .hs-form-field > .input {
    flex: none;
  }

  .home-mv__form .hubspot-form .hs-form .hs-form-field > .hs-field-desc {
    flex: none;
    padding-left: 0;
  }

  .home-mv__form .hubspot-form .hs-form .hs-error-msgs,
  .home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field + .hs-form-field .hs-error-msgs {
    left: 0;
  }

  .home-mv__form .hubspot-form .hs-form .hs-fieldtype-booleancheckbox {
    padding-top: 5px;
    padding-left: 0;
  }
}

@media (width <= 1000px) {
  /* 姓 and 名 have their text at the top of the label, with a smaller badge. */
  .home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field > label {
    align-items: stretch;
  }

  .home-mv__form .hubspot-form .hs-form .form-columns-2 .hs-form-field > label .hs-form-required::before {
    font-size: 10px;
  }

  /* The consent checkbox is centred, smaller and darker blue. */
  .home-mv__form .hubspot-form .hs-form .hs-form-booleancheckbox-display {
    align-items: center;
    justify-content: center;
    color: #2d6fe6;
    font-size: 12px;
  }

  .home-mv__form .hubspot-form .hs-form .hs-form-booleancheckbox-display input {
    margin: -3px 10px 0 0;
  }

  .home-mv__form .hubspot-form .hs-form .hs-form-booleancheckbox-display a {
    color: #2d6fe6;
  }
}

@media (width <= 767px) {
  /* Line breaks in labels (メール / アドレス) are for wide screens only. */
  .home-mv__form .hubspot-form .hs-form .hs-form-field > label br {
    display: none;
  }

  .home-mv__form .hubspot-form .hs-form .hs-form-booleancheckbox-display {
    line-height: 1.6;
  }

  .home-mv__form .hubspot-form .hs-form .hs-form-booleancheckbox-display input {
    width: 16px;
    height: 16px;
  }
}