@charset "UTF-8";

/* ===========================================
   Consulting Service Page Additional Styles
   =========================================== */

/* コンサルティング特有のアニメーション */

/* 虫眼鏡アイコンのアニメーション */
@keyframes magnify {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.service-detail-icon i.ph-magnifying-glass-plus {
  animation: magnify 2s ease-in-out infinite;
}

/* ユーザーフォーカスアイコンのアニメーション */
@keyframes focus {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

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

/* ターゲットアイコンのアニメーション */
@keyframes targetHit {
  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: targetHit 2s ease-in-out infinite;
}

/* ロケットアイコンのアニメーション */
@keyframes rocketLaunch {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.service-detail-icon i.ph-rocket-launch {
  animation: rocketLaunch 2s ease-in-out infinite;
}

/* グラデーション効果 */
.consulting-gradient-bg {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(11, 28, 60, 0.05) 100%);
}

/* 番号のグロー効果 */
@keyframes numberGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(0, 212, 255, 0);
  }
  50% {
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  }
}

.consulting-area-item:hover .area-number {
  animation: numberGlow 2s ease-in-out infinite;
}

/* プログレスバー風デザイン（オプション） */
.progress-indicator {
  width: 100%;
  height: 4px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1.5rem;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-navy));
  width: 0;
  transition: width 1s ease;
}

.consulting-area-item:hover .progress-bar {
  width: 100%;
}