/* ========== 汎用シャインアニメーション ========== */
.shine-btn {
  overflow: hidden;
  transition: transform 0.2s;
}

.shine-btn:hover,
.shine-btn:active {
  transform: translateY(4px);
}
/* ボタンを光らせる */
.shine-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%; /* ← 出発地点（左外）*/
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 90%,
    transparent 100%
  );
  transform: skewX(-25deg); /* 斜めに光が走る */
  animation: shine 2.5s ease-in-out infinite; /* 0.5s 動作 + 2s 待機 */
  pointer-events: none; /* クリック判定に干渉しない */
}

@keyframes shine {
  /* ── 光るフェーズ (0〜0.5 s ≒ 0〜20%) ── */
  0% {
    left: -150%;
    opacity: 0;
  }
  4% {
    opacity: 1;
  } /* フェードイン(任意) */
  20% {
    left: 150%;
    opacity: 0;
  } /* 0.5 s で走破して消える */

  /* ── 待機フェーズ (0.5〜2.5 s ≒ 20〜100%) ── */
  100% {
    left: 150%;
    opacity: 0;
  } /* 2 秒間は完全待機 */
}