@charset "UTF-8";

/* ===========================================
   SNS Service Page Additional Styles
   =========================================== */

/* SNS特有のアニメーション */

/* ソーシャルアイコンのアニメーション */
@keyframes socialFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

.service-detail-icon i.ph-pencil-line {
  animation: socialFloat 3s ease-in-out infinite 0.5s;
}

.service-detail-icon i.ph-calendar-check {
  animation: socialFloat 3s ease-in-out infinite 1s;
}

.service-detail-icon i.ph-chart-line-up {
  animation: socialFloat 3s ease-in-out infinite 1.5s;
}

/* グラデーションテキスト効果 */
.sns-gradient-text {
  background: linear-gradient(135deg, var(--c-cyan), var(--c-navy));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* プラットフォームアイコンの個別カラー */
.platform-item:nth-child(1) .platform-icon {
  background: linear-gradient(135deg, #E1306C, #C13584);
}

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

.platform-item:nth-child(3) .platform-icon {
  background: linear-gradient(135deg, #1877F2, #4267B2);
}

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