@charset "UTF-8";

/* JS管理----- */
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
&.fadein-left{
    transform: translate(-30px,0);
}
&.fadein-right{
    transform: translate(30px,0);
}
&.fadein-up{
    transform: translate(0,-30px);
}
&.fadein-bottom{
    transform: translate(0,30px);
}
&.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    }
}

/* header */
header{
    animation-name:fadeDownAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    }
/* top */
.topcontainer1{
    animation-name:fadeInAnime;
    animation-duration:2.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }

/* アニメーション------------------------------------ */
@keyframes fadeInAnime{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
    }
@keyframes fadeDownAnime{
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }