/* アニメーション定義 */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 1s ease-out forwards;
  opacity: 0; /* 初期は非表示 */
}

/* カスタム遅延（Tailwindのdelay-*代替） */
.delay-\[0ms\] {
  animation-delay: 0ms;
}

/* 下線 */
.heading-underline {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #00a1cc, #3b82f6);
  border-radius: 2px;
}

.heading-underline {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #00a1cc, #3b82f6);
  border-radius: 2px;
}



@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


@keyframes softGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.card-animated-bg {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff, #ccfbf1, #e0f2fe);
  background-size: 300% 300%;
  animation: softGradientShift 12s ease-in-out infinite;
  color: #1f2937; /* dark gray for contrast */
}