@charset "utf-8";

.animation{
    display: flex;
    justify-content: center;
    overflow: hidden;   /*右から画像を挿入した場合に横幅が広がるのを防ぐ*/
}
.animation img{
/*    width: 100%;*/
    margin: 0;
}
.animation .anm_mod{
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    transition: all 1s ease;
    display: flex;
/*    justify-content: center;
    align-items: center;*/
/*    text-align: center;*/
    margin: 10px;
    width: 50%;
    height: 100%;
}
.animation .anm_mod.full{
    width: 100%;
}
.animation .anm_mod.left{
    transform: translate3d(-30%, 0, 0);
}
.animation .anm_mod.right{
    transform: translate3d(30%, 0, 0);
}
.animation .anm_mod.delay_2s{
    transition: all 2s ease;
}
.animation .anm_mod.delay_3s{
    transition: all 3s ease;
}
.animation .anm_mod.fast{
    transition: all 0.8s ease;
}
.animation .anm_mod.active{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.anm_mod.example{
    font-size: 2.6em;
    color: #ffb7db;
    background-color: #a0a0a0;
    padding: 0.6em;
}