/* ==========================================================================
   c-button — Figma: Button (24413:6602)
   基本（size L）: PC 上下 16px / 左右 80px・ラベル renewal/JP/Label/20/Bold・アイコン 30px
   --size-s      : 上下 8px / 左右 24px・ラベル renewal/JP/Label/14/Bold・アイコン 20px
   --secondary   : purple/200（無料相談会系）
   --outline     : 白地 + ブランド色の枠線 2px（一覧に戻る・TOP に戻る 等）
   SP の主 CTA は上下 16px を維持して 56px のタップ領域を確保（Figma コンポーネント説明）
   ========================================================================== */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-80);
  background-color: var(--color-bg-brand);
  color: var(--color-text-inverse);
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ホバー: 色に関わらず背景 bg/inverse（#504C57）・文字 text/inverse（#FFFFFF）。枠線付き・グラデーションも同じ */
.c-button:hover,
.c-button:focus-visible {
  border-color: var(--color-bg-inverse);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.c-button:hover .c-button__icon,
.c-button:focus-visible .c-button__icon {
  color: var(--color-icon-inverse);
}

.c-button--secondary {
  background-color: var(--color-purple-200); /* semantic に該当なし（Figma: purple/200） */
}

.c-button--outline {

  /* Figma: Button（白地・枠線 2px border/brand・文字 text/brand）。枠線ぶん上下左右の余白を 2px 減らして高さを合わせる */
  padding: calc(var(--space-16) - 2px) calc(var(--space-80) - 2px);
  border: 2px solid var(--color-border-brand);
  background-color: var(--color-bg-base);
  color: var(--color-text-brand);
}

.c-button--outline .c-button__icon {
  color: var(--color-icon-brand);
}

.c-button--block {
  display: flex;
  width: 100%;
}

.c-button__icon {
  flex-shrink: 0;
  width: 30px; /* アイコンサイズ */
  height: 30px;
  color: var(--color-icon-inverse);
}

.c-button--size-s {
  padding: var(--space-8) var(--space-24);
}

.c-button--size-s .c-button__icon {
  width: 20px; /* アイコンサイズ */
  height: 20px;
}

@media (max-width: 1023px) {

  .c-button {
    padding-inline: var(--space-24);
  }

  .c-button__label {
    font-size: 1rem; /* SP: renewal/JP/Label/16/Bold（tokens.css .t-jp-label-16-bold） */
    line-height: calc(24 / 16);
  }

  .c-button__icon {
    width: 24px; /* アイコンサイズ（SP） */
    height: 24px;
  }

  .c-button--size-s {
    padding-block: var(--space-8);
  }

  /* 左右は 16px（「資料請求・お役立ち資料一覧に戻る」＋アイコンを 1 行に収める。静的HTML でも 1 行）。枠線 2px ぶん減らす */
  .c-button--outline {
    padding: calc(var(--space-16) - 2px) calc(var(--space-16) - 2px);
  }

  .c-button--size-s .c-button__label {
    font-size: 0.875rem; /* SP でも renewal/JP/Label/14/Bold のまま */
    line-height: calc(20 / 14);
  }

  .c-button--size-s .c-button__icon {
    width: 20px; /* アイコンサイズ */
    height: 20px;
  }
}