/* ----------------------------------------------------
   キャンペーンバッジ（一覧・商品ページ共通）
---------------------------------------------------- */
.campaign-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: red;
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  z-index: 50 !important;
  animation: shake 1.8s ease-in-out infinite;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* ホバー演出 */
.campaign-badge:hover {
  background: #ff4f4f;
  transform: scale(1.05);
}

/* ゆらゆらアニメ */
@keyframes shake {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}


/* ----------------------------------------------------
   一覧ページ画像のベース（積層）調整
---------------------------------------------------- */
.__item .__photo {
  position: relative !important;
  z-index: 0 !important;
}


/* ----------------------------------------------------
   商品ページ（詳細）の積層修正
---------------------------------------------------- */
.wrapper--product-detail .__photo,
.wrapper--product-detail,
.wrapper--product-detail .__main,
.wrapper--product-detail .__primary {
  position: relative !important;
  z-index: 0 !important;
}


/* ----------------------------------------------------
   JS側のポップアップと完全一致させたモーダル
---------------------------------------------------- */
#campaignImageModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999 !important;
  animation: modalOverlayFade 0.35s ease-out forwards;
}

#campaignImageModal > div {
  animation: modalScaleIn 0.35s ease-out forwards;
}

/* モーダルアニメ */
@keyframes modalOverlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalScaleIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}