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

    100% {
        opacity: 1;
    }
}

@keyframes fadein-start {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        display: none;
    }
}

@keyframes fadeout-start {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}


@keyframes dropBounceFade {
    0% {
        transform: translateY(-120vh) rotate(368deg) scale(1);
        opacity: 0;
    }

    60% {
        transform: translateY(0) rotate(8deg) scale(1.08);
        opacity: 1;
    }

    75% {
        transform: translateY(-32px) rotate(0deg) scale(0.96);
        opacity: 1;
    }

    85% {
        transform: translateY(0) rotate(0deg) scale(1.04);
        opacity: 1;
    }

    96% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

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

/* 高速フェードイン */
@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);
}