@charset "UTF-8";

/* ===========================================
   Advertising Service Page Additional Styles
   =========================================== */

/* 広告運用特有のアニメーション */

/* ターゲットアイコンのアニメーション */
@keyframes targetPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 212, 255, 0);
  }
}

.service-detail-icon i.ph-target {
  animation: targetPulse 2s ease-in-out infinite;
}

/* キラキラアイコンのアニメーション */
@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1) rotate(180deg);
  }
}

.service-detail-icon i.ph-sparkle {
  animation: sparkle 3s ease-in-out infinite;
}

/* ドルアイコンのアニメーション */
@keyframes coinFlip {
  0%, 100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
}

.service-detail-icon i.ph-currency-circle-dollar {
  animation: coinFlip 4s ease-in-out infinite;
}

/* チャートアイコンのアニメーション */
@keyframes chartRise {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.service-detail-icon i.ph-chart-bar {
  animation: chartRise 2s ease-in-out infinite;
}

/* グラデーションボーダー効果 */
.service-detail-item {
  position: relative;
}

.service-detail-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 153, 102, 0.1), rgba(255, 94, 98, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service-detail-item:hover::after {
  opacity: 1;
}

/* ROI強調スタイル */
.roi-highlight {
  color: #FF5E62;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 94, 98, 0.3);
}

/* プラットフォーム別カラー */
.platform-item:nth-child(1) .platform-icon {
  background: linear-gradient(135deg, #4285F4, #34A853);
}

.platform-item:nth-child(2) .platform-icon {
  background: linear-gradient(135deg, #E1306C, #405DE6);
}

.platform-item:nth-child(3) .platform-icon {
  background: linear-gradient(135deg, #1DA1F2, #14171A);
}

.platform-item:nth-child(4) .platform-icon {
  background: linear-gradient(135deg, #00B900, #00C300);
}