/* ==========================================================================
   lp-sticky-cta-2026-04-24.css
   商品LP + サテライト共通: PC 右下フローティングCTA / モバイル 下部 sticky バー
   役割: /price-v2/{slug}.html への 追加導線 を 全商品LPで 提供する
   配置: tokens-2026.css → theme-2026.css → header-2026.css → lp-2026.css → chrome-2026.css → lp-sticky-cta-2026-04-24.css の順
   ========================================================================== */

.lpsc {
  position: fixed;
  z-index: var(--z-sticky, 90);
  background: var(--c-bg);
  color: var(--c-text);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-line);
  font-family: var(--font-sans);
  visibility: hidden;
  pointer-events: none;
}

.lpsc[data-lpsc-visible="1"] {
  visibility: visible;
  pointer-events: auto;
}

.lpsc__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--c-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.lpsc__close:hover,
.lpsc__close:focus-visible {
  background: var(--c-bg-alt);
  color: var(--c-text);
  outline: none;
}

.lpsc__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lpsc__eyebrow {
  font-size: var(--fz-xs);
  letter-spacing: var(--lt-base);
  color: var(--c-text-muted);
}

.lpsc__price {
  font-weight: var(--fw-semibold);
  color: var(--c-primary-ink);
  font-size: var(--fz-base);
}

.lpsc__ctas {
  display: flex;
  gap: var(--space-2);
}

.lpsc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.lpsc__btn--primary {
  background: var(--c-primary);
  color: var(--c-text-invert);
}
.lpsc__btn--primary:hover,
.lpsc__btn--primary:focus-visible {
  background: var(--c-primary-hover);
  color: var(--c-text-invert);
  outline: none;
}

.lpsc__btn--secondary {
  background: var(--c-surface);
  color: var(--c-primary-ink);
  border: 1px solid var(--c-primary);
}
.lpsc__btn--secondary:hover,
.lpsc__btn--secondary:focus-visible {
  background: var(--c-primary-veil);
  outline: none;
}

.lpsc__trust {
  font-size: var(--fz-xs);
  color: var(--c-text-muted);
  letter-spacing: var(--lt-base);
}

/* ============================================================
   PC: 画面右下フローティング (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {
  .lpsc {
    right: 24px;
    bottom: 24px;
    width: 320px;
    padding: 18px 18px 16px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .lpsc__ctas {
    flex-direction: column;
  }
  .lpsc__btn {
    padding: 12px 14px;
    font-size: var(--fz-base);
    width: 100%;
  }
  .lpsc__trust {
    text-align: center;
  }
}

/* ============================================================
   モバイル: SP では 既存 pd-mobile-sticky-bar を 優先し lpsc は 非表示
   (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  .lpsc {
    display: none !important;
  }
}