/* ===== 共通アニメーション ===== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ディレイ */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* ===== 年齢確認モーダル ===== */
#age-modal {
  z-index: 9999;
}

/* ===== 追従CTA ===== */
#sticky-cta {
  transition: opacity 0.3s ease;
  z-index: 100;
}

/* ===== ヘッダー ===== */
header {
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}

header.is-scrolled {
  background: rgba(253,242,248,0.9) !important;
}

header.is-scrolled .header-logo {
  filter: none !important;
}
header.is-scrolled .header-hamburger {
  color: #fff !important;
}

/* ADVメニュー項目 */
.adv-menu-item .adv-line {
  transition: width 0.4s ease, background 0.3s ease;
}
.adv-menu-item:hover .adv-line {
  width: 24px !important;
  background: rgba(236,72,153,0.6) !important;
}
.adv-menu-item:hover .adv-label {
  color: #ec4899 !important;
  text-shadow: none !important;
}
.adv-menu-purchase:hover .adv-line {
  background: #ec4899 !important;
}
.adv-menu-purchase:hover .adv-label {
  color: #be185d !important;
  text-shadow: none !important;
}

/* スクロール後: 装飾の色は白のまま維持（ピンク背景に白が映える） */
header.is-scrolled .adv-sep {
  background: rgba(236,72,153,0.3) !important;
}

/* ===== プレースホルダー画像 ===== */
.placeholder-img {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 50%, #f48fb1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e91e63;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ===== 販売先ボタンホバー ===== */
.shop-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shop-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.3);
}

.shop-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4) !important;
}

.shop-inv:hover {
  background: #1a1a1a !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ===== キラキラエフェクト（ADV風装飾） ===== */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  animation: sparkle 2s ease-in-out infinite;
}

/* ===== 桜の花びらエフェクト ===== */
@keyframes sakura-fall {
  0% {
    transform: translateY(-10%) rotate(0deg) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg) translateX(100px);
    opacity: 0;
  }
}

.sakura-petal {
  position: fixed;
  top: -20px;
  width: 12px;
  height: 12px;
  background: radial-gradient(ellipse at center, #ffc0cb 0%, #ff69b4 100%);
  border-radius: 50% 0 50% 0;
  opacity: 0;
  pointer-events: none;
  animation: sakura-fall linear infinite;
  z-index: 1;
}