/* 
 * 独自のカスタムアニメーションのみを定義
 * （その他のスタイリングはすべてTailwind CSSを利用しています）
 */
body {
    font-family: 'Noto Sans JP', sans-serif;
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
    /* 初期状態は一時停止しておき、JavaScriptで画面内に入ったら再生(running)にする */
    animation-play-state: paused;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* LINE公式ボタン特有の波紋（パルス）アニメーション */
.pulse-line {
    box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.4);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.6);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(6, 199, 85, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(6, 199, 85, 0);
    }
}

/* ホバー時にアニメーションを止めて少し浮かせる等、Tailwindクラスと組み合わせる */
.pulse-line:hover {
    animation-play-state: paused;
}