@charset "utf-8";
/* CSS Document */


/* animation_photo
   ================================================================== */
.animation_photo_position{
    position: absolute;
    top: 0;
    width: 450px;
    height: 450px;
}

.animation_photo{
    position: relative;
}

.animation_photo > img{
    position: absolute;
    width: 450px;
}

.animation_photo > img.is_first{
    animation:historyImage1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes historyImage1{
    0%{transform:rotate(-10deg);opacity:0.8;z-index:2;}
    100%{transform:rotate(10deg);opacity:1;z-index:3;}
}

.animation_photo > img.is_second{
    z-index:2;animation:historyImage2 0.8s both;
}

@keyframes historyImage2{
    0%{transform:rotate(-10deg);opacity:0.2;z-index:1;}
    100%{transform:rotate(0);opacity:0.8;z-index:2;}
}

.animation_photo > img.is_third{
    animation:historyImage3 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@keyframes historyImage3{
    0%{transform:none;opacity:1;z-index:3;}
    40%{transform:translate(-50%, 15%) rotate(-30deg);opacity:0;z-index:2;}
    40.1%{transform:translate(-40%, -20%) rotate(30deg);opacity:0;z-index:1;}
    100%{transform:rotate(-10deg);opacity:0.6;z-index:1;}
}