/* 上下 */
.anm_up_down{
    animation: up_down 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes up_down{
      0%{transform: translateY( .5rem);}
     50%{transform: translateY(-.5rem);}
    100%{transform: translateY( .5rem);}
}

/* 上下02 */
.anm_up_down02{
    animation: up_down02 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes up_down02{
      0%{transform: translateY(-.5rem);}
     50%{transform: translateY( .5rem);}
    100%{transform: translateY(-.5rem);}
}

/* スイング */
.anm_swing{
    animation: swing 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes swing{
      0%{transform:rotate( 5deg);}
     50%{transform:rotate(-5deg);}
    100%{transform:rotate( 5deg);}
}

/* ズーム */
.anm_jump{
    animation: jump 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes jump{
      0%{transform: translateY( -1rem);}
     10%{transform: translateY(  0rem);}
     90%{transform: translateY(  0rem);}
    100%{transform: translateY( -1rem);}

}

/* ズーム */
.anm_zoom{
    animation: zoom 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes zoom{
      0%{transform:scale(1);}
     50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

/*
* ---------------------------
* フェードインアアニメーション
* ---------------------------
*/

.anima-fadein-bottom{
    animation: anima-fadein-bottom 1s forwards;
}
@keyframes anima-fadein-bottom {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0rem);
    }
}

.anima_fadein_right{
    animation: anima_fadein_right 1s forwards;
}
@keyframes anima_fadein_right {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0rem);
    }
}


.anima_fadein_left{
    animation: anima_fadein_left 1s forwards;
}
@keyframes anima_fadein_left {
    from {
        opacity: 0;
        transform: translateX(-1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0rem);
    }
}


/* キラリンアニメーション */
.shiny:after{
    position:absolute;
    top:-200%;
    left:-200%;
    content:"";
    height:500%;
    width:70px;
    background:linear-gradient(90deg, rgba(255,255,255,0),rgba(255,255,255,0.6) 40%,rgba(255,255,255,0),rgba(255,255,255,0.6),rgba(255,255,255,0));
    transform: rotate(60deg);
    animation:10s shine infinite linear;
}

@keyframes shine{
    0%{
        left:-200%;
    }
    90%{
        left:-200%;
    }
    100%{
        left:200%;
    }
}