/* CSS Document */

.glowAnime span{
  opacity: 0;
}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ 
  animation:glow_anime_on 0.5s ease-in-out forwards; 
}

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/* 上下のアニメーション*/
.downAnime{
    opacity: 0;
}

.slideAnimeDownUp {
	animation-delay:1s;
  animation-name:slideTextY100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes slideTextY100 {
    from {
        transform: translateY(-100%);/* 要素を上の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}

.slideAnimeUpDown {
    animation-name:slideTextY-100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY-100 {
    from {
        transform: translateY(-100%);/* 要素を下の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}