/* ノーマルフェードイン */
@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 高速フェードイン */
@keyframes fadein2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* 最初から表示されてる？？ */
@keyframes fadein3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* 上に消える */
@keyframes translateY {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -150%);
    }
}
/* 上にいく */
@keyframes translateY2 {
    0% {
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -80%);
    }
}


/* フェードアウトアニメーション */
/* 左にフェードアウト */
@keyframes fadeoutL {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 1;
        transform: translate(-100%, 0%);
    }

    100% {
        display: none;
    }
}
/* 右にフェードアウト */
@keyframes fadeoutR {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 1;
        transform: translate(100%, 0%);
    }

        100% {
            display: none;
        }
}

/* 文字色が黒から白に変わる */
@keyframes colorchange {
    0% {
        color: black;
    }

    100% {
        color: snow;
    }
}

/* 階調・色調の反転 */
@keyframes invert1 {
    0% {
        filter: invert(0%);
    }

    100% {
        filter: invert(100%);
    }
}

/* 歌うように揺れる */
@keyframes sing {
    0% {
        transform: translate(0%, 0%);
    }

    25% {
        transform: translate(-10%, -10%);
    }

    50% {
        transform: translate(0%, 0%);
    }

    75% {
        transform: translate(10%, 10%);
    }

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

/* スライドイン縦 */
@keyframes slidein {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

/* 左からスライドインアニメーション */
@keyframes slidein-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

/* 右からスライドインアニメーション */
@keyframes slidein-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

/* ホバリングアニメーション */
@keyframes floating {
    0% {
        transform: translateY(20px);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(20px);
    }
}

/* バウンド的拡大 */
@keyframes zoomup {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* 初期状態：透明＆下にずらす */
.fadein-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(.23,1.17,.35,1), transform 0.8s cubic-bezier(.23,1.17,.35,1);
    will-change: opacity, transform;
}

/* アニメ適用時：元の位置で不透明に */
.fadein-up.is-show {
    opacity: 1;
    transform: translateY(0);
}