/**------アニメーション設定--------**/
/* フェードイン */
.fadein{
    animation-name: fadeinAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeinAnime{
    from {
    opacity: 0;
    }
    to {
    opacity: 1;
    }
}
.trigger_fadein{
    opacity: 0;
}

/* フェードアップ */
.fadeUp {
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(100px);
    }  
    to {
    opacity: 1;
    transform: translateY(0);
    }
}
.trigger_fadeUp{
    opacity: 0;
}

/* フェードアップ */
.fadeUpOnce {
    animation-name:fadeUpOnceAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpOnceAnime{
    from {
    opacity: 0;
    transform: translateY(100px);
    }  
    to {
    opacity: 1;
    transform: translateY(0);
    }
}
.trigger_fadeUpOnce{
    opacity: 0;
}

/* 拡大 */
.zoomIn{
	animation-name:zoomAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}
@keyframes zoomAnime{
    from {
        transform: scale(0.6);
    }
    to {
        transform: scale(1);
    }
}
.trigger_zoomin{
}
/* 右上へ回転 */
.flip_righttop{
    animation-name:flip_righttopAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes flip_righttopAnime{
    from {
        transform: translate(-20px,80px) rotate(25deg);
        opacity: 0;
    }
    to {
        transform: translate(0,1) rotate(0deg);
        opacity: 1;
    }
}
.trigger_flip_righttop{
    opacity: 0;
}

/* スライドイン／左から右へ */
.slideright {
    animation-name:slideRight;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideRight{
    from {
    opacity: 0;
    transform: translateX(-30px);
    }  
    to {
    opacity: 1;
    transform: translateX(0);
    }
}
.trigger_slideright{
    opacity: 0;
}

/* スライドイン／右から左へ */
.slideleft {
    animation-name:slideLeft;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideLeft{
    from {
    opacity: 0;
    transform: translateX(30px);
    }  
    to {
    opacity: 1;
    transform: translateX(0);
    }
}
.trigger_slideleft{
    opacity: 0;
}

/* タイピング */
.text_typing span {
    display: none;
}
/*文字列後ろの線の設定*/
/*.TextTyping::after {
    content: "|";
    animation: typinganime .8s ease infinite;
}*/
@keyframes typinganime{
    from{opacity:0}
    to{opacity:1}
}

/*ゆれ*/
.shake{
    animation: shake 2s infinite;
    transform: rotate(5deg);
}
@keyframes shake {
    50% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}

/*鼓動*/
.heartbeat {
    animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
    0% {
        transform: scale(1.05)
    }
    5% {
        transform: scale(1)
    }
    95% {
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.05)
    }
}
  
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay01{animation-delay: 0s;}
.delay02{animation-delay: 0.2s;}
.delay03{animation-delay: 0.3s;}
.delay04{animation-delay: 0.4s;}
.delay05{animation-delay: 0.5s;}
.delay06{animation-delay: 0.6s;}
.delay07{animation-delay: 0.7s;}
.delay08{animation-delay: 0.8s;}
.delay09{animation-delay: 0.9s;}
.delay10{animation-delay: 1.0s;}
.delay11{animation-delay: 1.1s;}
.delay12{animation-delay: 1.2s;}
.delay13{animation-delay: 1.3s;}
.delay14{animation-delay: 1.4s;}
.delay15{animation-delay: 1.5s;}
.delay16{animation-delay: 1.6s;}
.delay17{animation-delay: 1.7s;}
.delay18{animation-delay: 1.8s;}
.delay19{animation-delay: 1.9s;}
.delay20{animation-delay: 2.0s;}
.delay21{animation-delay: 2.1s;}
.delay22{animation-delay: 2.2s;}
.delay23{animation-delay: 2.3s;}
.delay24{animation-delay: 2.4s;}
.delay25{animation-delay: 2.5s;}
.delay26{animation-delay: 2.6s;}
.delay27{animation-delay: 2.7s;}
.delay28{animation-delay: 2.8s;}
.delay29{animation-delay: 2.9s;}
.delay30{animation-delay: 3.0s;}