/* =========================================
   HubSpot Form Theme — NextLab dark
   Scoped to .hs-form (works inside iframe)
========================================= */

/* ---------- iframe body ---------- */
body {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Base / text ---------- */
.hs-form {
  color: rgba(226, 232, 240, 0.92);
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.65;
}

/* ---------- Labels ---------- */
.hs-form label {
  display: block;
  color: rgba(255, 255, 255, 0.93) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 8px 0 !important;
}

/* required asterisk */
.hs-form .hs-form-required {
  color: rgba(248, 113, 113, 0.95) !important;
  margin-left: 4px;
}

/* description / helper text */
.hs-field-desc,
.hs-richtext,
.hs-richtext p,
.hs-form p {
  color: rgba(226, 232, 240, 0.62) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  margin: 6px 0 0 0 !important;
}

/* ---------- Field spacing ---------- */
.hs-form .hs-form-field {
  margin: 0 0 18px 0 !important;
}

/* 2カラム（姓名など）の直後のフィールドとの距離 */
fieldset.form-columns-2 + .hs-form-field {
  margin-top: 14px !important;
}

/* ---------- Inputs (text / select / textarea) ---------- */
.hs-input,
textarea.hs-input,
select.hs-input {
  width: 100% !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.95) !important;

  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 14px !important;

  font-family: inherit !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  min-height: 42px !important;

  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}

textarea.hs-input {
  min-height: 140px !important;
  padding: 12px 14px !important;
  resize: vertical;
}

.hs-input::placeholder,
textarea.hs-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.hs-input:focus,
textarea.hs-input:focus,
select.hs-input:focus {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(184, 166, 86, 0.70) !important;
  box-shadow: 0 0 0 4px rgba(184, 166, 86, 0.14) !important;
  outline: none !important;
}

/* selectのOS差を抑える */
select.hs-input {
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* ---------- 2 columns (姓・名を均等幅に) ---------- */
@media (min-width: 640px) {
  fieldset.form-columns-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  fieldset.form-columns-2 .hs-form-field {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  fieldset.form-columns-2 .hs-form-field .input {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  fieldset.form-columns-2 .hs-form-field .hs-input {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ---------- Radio / Checkbox ---------- */
input.hs-input[type="radio"],
input.hs-input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

input.hs-input[type="checkbox"] {
  border-radius: 4px !important;
}

.inputs-list {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
}

.inputs-list > li {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  list-style: none !important;
  margin: 4px 0 !important;
  padding: 0 !important;
}

.inputs-list > li > label {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.55 !important;
}

.inputs-list > li > label > input {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.inputs-list > li > label > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.hs-fieldtype-radio > label {
  margin-bottom: 6px !important;
}

/* ---------- Links ---------- */
.hs-form a {
  color: rgba(184, 166, 86, 0.95) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(184, 166, 86, 0.35) !important;
}
.hs-form a:hover {
  border-bottom-color: rgba(184, 166, 86, 0.7) !important;
}

/* ---------- Submit button ---------- */
.hs-button,
input[type="submit"] {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: rgba(184, 166, 86, 0.18) !important;
  color: rgba(255, 255, 255, 0.95) !important;

  border: 1px solid rgba(184, 166, 86, 0.55) !important;
  border-radius: 14px !important;

  font-family: inherit !important;
  font-size: 14px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;

  margin-top: 10px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
  cursor: pointer !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

.hs-button:hover,
input[type="submit"]:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
  border-color: rgba(184, 166, 86, 0.78) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important;
  background: rgba(184, 166, 86, 0.28) !important;
}

/* ---------- Errors ---------- */
.hs-error-msgs,
.hs-error-msg,
.hs-error-msgs li {
  color: rgba(248, 113, 113, 0.95) !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}

/* ---------- Email field spacing ---------- */
.hs_email {
  margin-top: 16px !important;
}

.hs-form-field:has(input[name="email"]),
.hs-form-field:has(input[type="email"]) {
  margin-top: 16px !important;
}

.hs_email > label,
.hs-form-field:has(input[name="email"]) > label,
.hs-form-field:has(input[type="email"]) > label {
  display: block !important;
  margin-bottom: 8px !important;
}

/* ---------- Logo (white) ---------- */
.hs-form img,
.hs-richtext img {
  filter: brightness(0) invert(1) !important;
}