@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* outline: 1px solid salmon; */
}

img {
    vertical-align: bottom;
    width: 100%;
}

.anime {
    position: relative;
    width: 500px;
    height: 500px;
    overflow: hidden;
    border-radius: 5px;
    z-index: 10;
    /* transform-origin: left top; */
    transform-origin: center center;
    animation: fvappear .8s forwards;

}

@keyframes fvappear {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    20% {
        opacity: 0;
        transform: scaleX(0.03);
    }

    40% {
        opacity: 1;
        transform: scaleX(0.05);
    }

    50% {
        opacity: 1;
        transform: scaleX(0.08);
    }

    75% {
        opacity: 1;
        transform: scaleX(1.1);
    }

    85% {
        opacity: 1;
        transform: scaleX(1.15);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.anime figure {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

.anime img {
    width: 500px;
    height: 500px;
    object-fit: cover;
    opacity: 0;
    animation: slideshow 10s infinite;
}

.anime_group {
    position: relative;
    width: 500px;
    height: 500px;
    flex-shrink: 0;
}

.anime_mask {
    position: relative;
    min-width: 0;
}

#happa {
    position: absolute;
    width: 200px;
    height: auto;
    right: -60px;
    bottom: -65px;
    rotate: 0deg;
    z-index: 1000;
}

@keyframes slideshow {
    0% {
        opacity: 0;
    }

    7% {
        opacity: 1;
    }

    16% {
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.anime #fv1 {
    animation: slideshow 10s infinite,
        slideshow2 10s infinite linear;
    width: 500px;
    height: auto;
}

@keyframes slideshow2 {
    from {
        transform: translateY(-60px);
    }

    to {
        transform: translateY(100px);
    }
}

.anime #fv2 {
    position: relative;
    animation: slideshow 10s infinite,
        slideshow3 10s infinite ease-in;
    animation-delay: 2s, 0s;
    width: 530px;
    height: auto;
    top: -20px;
}

@keyframes slideshow3 {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-22px);
    }

    100% {
        transform: translateX(-30px);
    }
}

.anime #fv3 {
    animation: slideshow 10s infinite,
        slideshow4 10s infinite linear;
    animation-delay: 4s, 0s;
    width: auto;
    height: 500px;
}

@keyframes slideshow4 {
    0% {
        transform: translateX(0px);
    }

    10% {
        transform: translateX(-40px);
    }

    100% {
        transform: translateX(-300px);
    }
}

.anime #fv4 {
    animation: slideshow 10s infinite,
        slideshow5 10s infinite linear;
    animation-delay: 6s, 0s;
    width: 500px;
    height: auto;
}

@keyframes slideshow5 {
    0% {
        transform: translateY(0);
    }

    60% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(-200px);
    }
}

.anime #fv5 {
    animation: slideshow 10s infinite,
        slideshow6 12s infinite linear;
    animation-delay: 8s, 0s;
    width: 500px;
    height: auto;
}

@keyframes slideshow6 {
    0% {
        transform: translateY(-160px);

    }


    100% {
        transform: translateY(0px);

    }
}