@charset "UTF-8";

@-webkit-keyframes pulse {
    0%{
        opacity: 0;
    }
    10%{
        opacity:.50;
        transform-origin: 50% 50%;
        transform: rotate(-2deg) scale(3);
        transition: all .5s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    }
    100%{
        opacity:1;
        transform: rotate(-15deg) scale(1);
    }
}
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:2.0s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeInAnime{
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    transform: translateX(0);
    }
}
/*下から*/
.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:1.3s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeUpAnime{
    from {
        opacity: 0;
    transform: translateY(100px);
    }

    to {
        opacity: 1;
    transform: translateY(0);
    }
}
/*delay*/
.fadeInAnime4s {
    animation-name: fadeIn4s;
}
.fadeInAnime3500ms {
    animation-name: fadeIn3500ms;
}
.fadeInAnime3s {
    animation-name: fadeIn3s;
}
.fadeInAnime2500ms {
    animation-name: fadeIn2500ms;
}
.fadeInAnime2500ms {
    animation-name: fadeIn2500ms;
}
.fadeInAnime2s {
    animation-name: fadeIn2s;
}
.fadeInAnime1500ms {
    animation-name: fadeIn1500ms;
}
.fadeInAnime1s {
    animation-name: fadeIn1s;
}
.fadeInAnime750ms {
    animation-name: fadeIn750ms;
}
.fadeInAnime500ms {
    animation-name: fadeIn500ms;
}
.fadeInAnime250ms {
    animation-name: fadeIn250ms;
}
/* 4秒間かけてフェードイン */
.fadeInAnime4s {
    animation-name: fadeIn1s;
}
.fadeIn4s {
    animation-delay: 4s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 3秒間かけてフェードイン */
.fadeInAnime3500ms {
    animation-name: fadeIn1s;
}
.fadeIn3s {
    animation-delay: 3500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 3秒間かけてフェードイン */
.fadeInAnime3s {
    animation-name: fadeIn1s;
}
.fadeIn3s {
    animation-delay: 3s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 2.5秒間かけてフェードイン */
.fadeInAnime2500ms {
    animation-name: fadeIn1s;
}
.fadeIn2500ms {
    animation-delay: 2500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 2秒間かけてフェードイン */
.fadeInAnime2s {
    animation-name: fadeIn1s;
}
.fadeIn2s {
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 1.5秒間かけてフェードイン */
.fadeInAnime1500ms {
    animation-name: fadeIn1s;
}
.fadeIn1500ms {
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 1秒間かけてフェードイン */
.fadeInAnime1s {
    animation-name: fadeIn1s;
}
.fadeIn1s {
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 0.75秒間かけてフェードイン */
.fadeInAnime750ms {
    animation-name: fadeIn1s;
}
.fadeIn750ms {
    animation-delay: 750ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 0.5秒間かけてフェードイン */
.fadeInAnime500ms {
    animation-name: fadeIn1s;
}
.fadeIn500ms {
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
/* 0.25秒間かけてフェードイン */
.fadeInAnime250ms {
    animation-name: fadeIn1s;
}
.fadeIn250ms {
    animation-delay: 250ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadeIn1s {
    0% {
    }
    100% {
        opacity: 1;
    }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.fadeInTrigger {
    opacity: 0;
}