@charset "utf-8";
/* =========================
   Floating CTA (Optimized / no --accent-rgb)
   - 影/枠/発光はこのCSS内の変数で完結
   - animation二重を解消（cta側は固定、btnだけ脈動）
   - hoverは上品（scale抑制）
   - focus-visible対応
   - clampでレスポンシブ簡潔化
========================= */

/* このボタン専用のアクセント（赤橙） */
:root{
  --cta-rgb: 219, 76, 47; /* = #db4c2f */
}

/* 位置 */
.floating-cta {
  position: fixed;
  right: clamp(14px, 2.2vw, 30px);
  bottom: clamp(14px, 2.2vw, 30px);
  z-index: 1000;
}

/* ---------------------
   メインボタン
---------------------- */
.floating-btn {
  width: clamp(120px, 18vw, 180px);
  height: clamp(120px, 18vw, 180px);

  display: grid;
  place-items: center;

  background: linear-gradient(
    135deg,
    #db4c2f 0%,   /* 赤橙 */
    #f07a2a 52%,  /* 橙 */
    #ffb347 100%  /* 黄橙 */
  );

  color: #fff;
  text-decoration: none;

  border-radius: 999px;
  position: relative;
  overflow: hidden;

  /* 枠（このボタン専用RGBで発光） */
  border: 2px solid rgba(var(--cta-rgb), 0.55);

  /* 影：橙系で統一（緑影は撤去） */
  box-shadow:
    0 10px 26px rgba(219, 76, 47, 0.34),
    0 6px 14px rgba(240, 122, 42, 0.24),
    0 0 18px rgba(var(--cta-rgb), 0.22);

  transform: translateZ(0);
  will-change: transform, box-shadow, background;
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease;

  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-weight: 800;
  letter-spacing: .02em;

  /* Pulseはボタン側だけに統合 */
  animation: buttonPulse 3s ease-in-out infinite;
}

/* ホバー */
.floating-btn:hover {
  transform: translateY(-4px) scale(1.05);
  background: linear-gradient(
    135deg,
    #e85a3a 0%,
    #ff8a2a 48%,
    #ffd166 100%
  );
  box-shadow:
    0 14px 34px rgba(219, 76, 47, 0.44),
    0 8px 18px rgba(240, 122, 42, 0.34),
    0 0 26px rgba(var(--cta-rgb), 0.34);
  border-color: rgba(var(--cta-rgb), 0.78);
}

.floating-btn:active {
  transform: translateY(-1px) scale(1.01);
}

/* フォーカス（キーボード優先） */
.floating-btn:focus {
  outline: none;
}

.floating-btn:focus-visible {
  border-color: rgba(var(--cta-rgb), 0.9);
  box-shadow:
    0 10px 26px rgba(219, 76, 47, 0.34),
    0 6px 14px rgba(240, 122, 42, 0.24),
    0 0 0 4px rgba(var(--cta-rgb), 0.28);
}

/* ---------------------
   光沢（控えめ）
---------------------- */
.floating-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.26) 35%,
    rgba(255,255,255,0) 70%
  );
  transform: translateX(-130%) rotate(18deg);
  animation: shine 4.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------------------
   締切感のリング（控えめ点滅）
---------------------- */
.floating-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(var(--cta-rgb), 0.85);
  opacity: 0;
  animation: urgentBlink 2.2s ease-in-out infinite;
  pointer-events: none;
}

/* テキスト（既存HTML: .btn-text を維持） */
.btn-text {
  position: relative;
  z-index: 1;
  font-size: clamp(11px, 1.6vw, 16px);
  line-height: 1.4;
  text-align: center;
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ---------------------
   Animations
---------------------- */
@keyframes shine {
  0%   { transform: translateX(-130%) rotate(18deg); opacity: 0; }
  15%  { opacity: .55; }
  45%  { opacity: 0; }
  100% { transform: translateX(130%) rotate(18deg); opacity: 0; }
}

@keyframes urgentBlink {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(var(--cta-rgb), 0);
  }
  50% {
    opacity: .8;
    transform: scale(1.06);
    box-shadow: 0 0 18px rgba(var(--cta-rgb), 0.45);
  }
}

@keyframes buttonPulse {
  0%, 100% {
    box-shadow:
      0 10px 26px rgba(219, 76, 47, 0.30),
      0 6px 14px rgba(240, 122, 42, 0.20),
      0 0 18px rgba(var(--cta-rgb), 0.20);
  }
  50% {
    box-shadow:
      0 12px 30px rgba(219, 76, 47, 0.40),
      0 8px 18px rgba(240, 122, 42, 0.30),
      0 0 26px rgba(var(--cta-rgb), 0.32);
  }
}

/* 動きを少なくしたい環境 */
@media (prefers-reduced-motion: reduce) {
  .floating-btn { animation: none; }
  .floating-btn::before { animation: none; }
  .floating-btn::after { animation: none; }
  .floating-btn:hover,
  .floating-btn:active { transform: none; }
}

/* 印刷では非表示 */
@media print {
  .floating-cta { display: none; }
}