/* ==========================================================================
   components-cta.css
   SC:
   - C-CTA         : 基準CTA
   - C-CTA-SLIDER  : Slider専用CTA
   方針：
   - 見た目はここで完結
   - 数値・色はコックピット管理
   ========================================================================== */

/* ======================================================================
   C-CTA（基準CTA）
   ====================================================================== */

.c-cta {
  display: inline-block;
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border: var(--cta-border-w) solid var(--cta-base-color);
  border-radius: var(--cta-radius);

  color: var(--cta-base-color);
  background: var(--cta-base-bg);
  text-decoration: none;

  transition:
    background-color var(--cta-tr) ease,
    color var(--cta-tr) ease,
    border-color var(--cta-tr) ease;
}

.c-cta:hover {
  background-color: var(--cta-base-hover-bg);
  color: var(--cta-base-hover-color);
  border-color: var(--cta-base-hover-border);
}

/* ======================================================================
   C-CTA-SLIDER（Slider専用CTA）
   ====================================================================== */

.c-cta-slider {
  display: inline-block;
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border: var(--cta-border-w) solid var(--cta-slider-border);
  border-radius: var(--cta-radius);

  color: var(--cta-slider-color);
  background: var(--cta-slider-bg);
  text-decoration: none;

  transition:
    background-color var(--cta-tr) ease,
    color var(--cta-tr) ease,
    border-color var(--cta-tr) ease;
}

.c-cta-slider:hover {
  background-color: var(--cta-slider-hover-bg);
  color: var(--cta-slider-hover-color);
  border-color: var(--cta-slider-hover-border);
}