@charset "UTF-8";

/* =========================================================
   animation.css
   共通アニメーション
========================================================= */


/* =========================================================
   Navigation Animation
========================================================= */

@keyframes blob-bounce {

    0%,
    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    }

    33% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }

    66% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 40%;
    }
}


/* =========================================================
   Main Visual Animation
========================================================= */

@keyframes bgGradientMove {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 10% 10%;
    }
}

@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes drawLine {
    to {
        width: 100%;
    }
}

@keyframes poyoyon2 {
    0% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }

    15% {
        transform: scale(0.98, 0.9) translate(0, 5px);
    }

    30% {
        transform: scale(1.02, 1.0) translate(0, 8px);
    }

    50% {
        transform: scale(0.98, 1.05) translate(0, -8px);
    }

    70% {
        transform: scale(1.0, 0.9) translate(0, 5px);
    }

    100% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }

    0%,
    100% {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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


/* =========================================================
   Scroll Fade Animation
========================================================= */

/* fadeIn */
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* fadeUp */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

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


/* fadeDown */
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

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


/* fadeLeft */
.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

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


/* fadeRight */
.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

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


/* 初期状態：スクロールで出現する要素 */
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
}