@charset "UTF-8";
/* ==========================================================================
   ボタン（コンポーネントシート 01）
   塗り（--primary）は各ページの最強CTA＝★CV1「自社の現在地を診断する」と、フォームの送信ボタン専用。
   他のCVは線（--secondary）。青・紺の面の上は --inverse。矢印は使わない。
   高さ：64（--xl）／56（標準）／48（--sm・モバイルの副）／44（--header）
   モバイルでは幅100％（主56／副48）。幅を戻す場合は --auto。
   ========================================================================== */
.lab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--lab-radius-sm);
  background: transparent;
  font-size: var(--lab-fs-body);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color var(--lab-dur-fast) var(--lab-ease-out),
    border-color var(--lab-dur-fast) var(--lab-ease-out),
    color var(--lab-dur-fast) var(--lab-ease-out);

  @media (max-width: 767px) {
    width: 100%;
    white-space: normal;
  }

  /* Primary：bg #0F7CBA → hover #354E6F */
  &.lab-btn--primary {
    border-color: var(--lab-primary);
    background: var(--lab-primary);
    color: var(--lab-white);

    &:hover {
      border-color: var(--lab-navy);
      background: var(--lab-navy);
    }
  }

  /* Secondary：線 #0F7CBA → hover 塗り反転 */
  &.lab-btn--secondary {
    border-color: var(--lab-primary);
    background: var(--lab-white);
    color: var(--lab-primary);

    @media (max-width: 767px) {
      height: 48px;
    }

    &:hover {
      background: var(--lab-primary);
      color: var(--lab-white);
    }
  }

  /* Inverse：青・紺の面の上。bg #FFFFFF → hover #E9EDF5 */
  &.lab-btn--inverse {
    border-color: var(--lab-white);
    background: var(--lab-white);
    color: var(--lab-primary);

    &:hover {
      border-color: var(--lab-bg-2);
      background: var(--lab-bg-2);
    }

    &:focus-visible {
      outline-color: var(--lab-white);
    }
  }

  /* 64px（ヒーロー・CTA帯） */
  &.lab-btn--xl {
    height: 64px;
    padding: 0 40px;
    font-size: var(--lab-fs-lead);

    @media (max-width: 767px) {
      height: 56px;
      padding: 0 24px;
      font-size: var(--lab-fs-body);
    }
  }

  /* 48px・14px（白カード内の副ボタン） */
  &.lab-btn--sm {
    height: 48px;
    padding: 0 24px;
    font-size: var(--lab-fs-small);
  }

  /* 44px（ヘッダー） */
  &.lab-btn--header {
    width: auto;
    height: 44px;
    padding: 0 24px;
    font-size: var(--lab-fs-small);
    white-space: nowrap;

    @media (max-width: 1023px) {
      padding: 0 16px;
    }
  }

  &.lab-btn--auto {
    @media (max-width: 767px) {
      width: auto;
    }
  }

  /* 準備中など押せない状態 */
  &.lab-btn--disabled,
  &:disabled {
    border-color: var(--lab-line);
    background: var(--lab-bg-1);
    color: var(--lab-ink-3);
    cursor: default;
    pointer-events: none;
  }
}