@charset "UTF-8";

/* ===========================================
   MEO Service Page Additional Styles
   =========================================== */

/* MEO特有のアニメーション効果 */
/* GSAPで制御するため、初期スタイルは削除 */

/* マップアイコンの特別なアニメーション */
.service-detail-icon i.ph-map-pin {
  animation: mapPulse 2s ease-in-out infinite;
}

@keyframes mapPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* 星アイコンのアニメーション */
.service-detail-icon i.ph-star {
  animation: starShine 3s ease-in-out infinite;
}

@keyframes starShine {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.7;
    filter: brightness(1.3);
  }
}

/* グラフアイコンのアニメーション */
.service-detail-icon i.ph-chart-line {
  animation: chartGrow 2s ease-in-out infinite;
}

@keyframes chartGrow {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.1);
  }
}

/* MEO専用のカラーアクセント */
.service-meo-accent {
  color: var(--c-cyan);
  font-weight: 700;
}

/* ローカルビジネス強調セクション */
.local-business-highlight {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(11, 28, 60, 0.05) 100%);
  padding: 3rem;
  border-radius: 12px;
  margin: 3rem 0;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .local-business-highlight {
    padding: 2rem 1.5rem;
  }
}