/* --------------------
   アニメーション用CSS（HTMLクラス指定 + JSで.animate追加）
-------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 初期状態 */
.fade-in-up,
.fade-in,
.zoom-in {
    opacity: 0;
}

/* .animateが付いたとき、animation-nameとdurationだけ指定 */
.fade-in-up.animate {
    animation-name: fadeInUp;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

.fade-in.animate {
    animation-name: fadeIn;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

.zoom-in.animate {
    animation-name: zoomIn;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

/* 遅延は別途delayクラスで付与できる */
.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}


/* ホバーエフェクト */
.more-btn,
.cta-btn {
    transition: transform 0.3s ease;
}

.more-btn:hover,
.cta-btn:hover {
    transform: scale(1.05);
}

.section-header {
    opacity: 0;
    transform: translateY(30px);
}

.section-header.animate {
    animation-name: fadeInUp;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@media screen and (max-width: 767px) {
    nav#navMenu ul.fade-in.delay-3 {
        animation-delay: 0s !important;
    }
}