@charset "UTF-8";
/* ==========================================================================
   フォーム（HubSpot 共通フォームへ送信。_inc/components/form.php）
   入力欄 高さ48・線1px #D8D8D8・角丸4px。ラベル14px 700。必須／任意は小ラベル。
   ========================================================================== */
.lab-form {
  display: flex;
  flex-direction: column;
  gap: 24px;

  & .lab-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

  & .lab-form__field {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;

    &.lab-form__field--half {
      grid-column: span 1;
    }
  }

  & .lab-form__label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
  }

  & .lab-form__req,
  & .lab-form__opt {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--lab-radius-sm);
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
  }

  & .lab-form__req {
    background: var(--lab-bg-2);
    color: var(--lab-navy);
  }

  & .lab-form__opt {
    background: var(--lab-bg-1);
    color: var(--lab-ink-3);
  }

  & .lab-form__control {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    font-size: var(--lab-fs-body);
    line-height: 1.6;
    transition: border-color var(--lab-dur-fast) var(--lab-ease-out);

    &:hover {
      border-color: var(--lab-ink-3);
    }

    &:focus-visible {
      border-color: var(--lab-primary);
      outline: 2px solid var(--lab-primary);
      outline-offset: 0;
    }

    &.lab-form__control--select {
      padding-right: 40px;
      appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--lab-ink-2) 50%), linear-gradient(135deg, var(--lab-ink-2) 50%, transparent 50%);
      background-position: right 20px center, right 15px center;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
    }

    &.lab-form__control--textarea {
      height: auto;
      min-height: 144px;
      padding: 12px 16px;
      resize: vertical;
    }
  }

  /* 送信エラー */
  & .lab-form__status {
    padding: 12px 16px;
    border: 1px solid var(--lab-negative-red);
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    color: var(--lab-negative-red);
  }

  /* ハニーポット：見えない大きさに畳む（display:none だと埋めない bot がいるため。読み上げは aria-hidden で外す） */
  & .lab-form__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 送信中 */
  & .lab-form__submit[aria-busy='true'] {
    opacity: .6;
    pointer-events: none;
  }

  & .lab-form__privacy {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    color: var(--lab-ink-2);

    & a {
      color: var(--lab-primary);
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }

  & .lab-form__submit {
    align-self: flex-start;
    min-width: 280px;

    @media (max-width: 767px) {
      min-width: 0;
      height: 56px;
    }
  }

  /* モーダル内など幅の狭い場所 */
  &.lab-form--compact {
    gap: 20px;

    & .lab-form__fields {
      gap: 16px 12px;
    }

    & .lab-form__submit {
      align-self: stretch;
      min-width: 0;
    }
  }
}