/* ============================================================
   CTAボタン CSS v1.0
   - .lpc-wrap スコープ（!important 不使用）
   - CSSカスタムプロパティでカラーテーマ管理
   - アニメーション: transform のみ（box-shadow 不使用）
   - メンズ対応: data-theme="mens"
   ============================================================ */

/* --- カラーテーマ --- */
.lpc-wrap {
  --lpc-btn-from: #e63535;
  --lpc-btn-to: #c0392b;
  --lpc-btn-shadow: rgba(230, 53, 53, 0.35);
  --lpc-copy-color: #555;
  --lpc-micro-color: #999;
}

/* メンズテーマ */
.lpc-wrap[data-theme="mens"] {
  --lpc-btn-from: #1a365d;
  --lpc-btn-to: #0f2440;
  --lpc-btn-shadow: rgba(26, 54, 93, 0.35);
  --lpc-copy-color: #444;
}

/* --- ラップ --- */
.lpc-wrap {
  text-align: center;
  margin: 20px 0;
}

/* --- 上部コピー --- */
.lpc-wrap .lpc-copy {
  font-size: 12px;
  font-weight: 700;
  color: var(--lpc-copy-color);
  margin: 0 0 8px;
}

/* --- ボタン本体 --- */
.lpc-wrap .lpc-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--lpc-btn-from) 0%, var(--lpc-btn-to) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
  padding: 15px 24px;
  border-radius: 50px;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 4px 14px var(--lpc-btn-shadow);
  animation: lpc-pulse 2s infinite;
  transition: transform 0.2s;
  text-decoration: none;
}

.lpc-wrap .lpc-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}

/* --- 下部マイクロコピー --- */
.lpc-wrap .lpc-micro {
  font-size: 11px;
  color: var(--lpc-micro-color);
  margin: 8px 0 0;
}

/* --- パルスアニメーション（GPU合成: transform のみ） --- */
@keyframes lpc-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* --- モバイル --- */
@media (max-width: 768px) {
  .lpc-wrap .lpc-btn {
    font-size: 14px;
    padding: 13px 20px;
  }
  .lpc-wrap .lpc-copy {
    font-size: 11.5px;
  }
}