:root {
    font-family: 'DotGothic16', sans-serif;
}

body{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight:400;
    /* font-family: 'Yomogi', cursive; */
}
div.input-group,
div.alert {
    animation: dataLoadedIn 0.3s ease 0.0s 1 normal;
}

.blurOur {
    animation: fadeOut 0.3s ease 0.0s 1 normal;
}

@keyframes fadeIn {

    /*animation-nameで設定した値を書く*/
    0% {
        opacity: 0
    }

    /*アニメーション開始時は不透明度0%*/
    100% {
        opacity: 1
    }

    /*アニメーション終了時は不透明度100%*/
}

@keyframes fadeOut {

    /*animation-nameで設定した値を書く*/
    0% {
        opacity: 1
    }

    /*アニメーション開始時は不透明度0%*/
    100% {
        opacity: 0
    }

    /*アニメーション終了時は不透明度100%*/
}

@keyframes dataLoadedIn {

    /*animation-nameで設定した値を書く*/
    0% {
        filter: blur(50px);
    }

    /*アニメーション開始時は不透明度0%*/
    100% {
        filter: blur(0px);
    }

    /*アニメーション終了時は不透明度100%*/
}

@keyframes dataLoadedOut {

    /*animation-nameで設定した値を書く*/
    0% {
        filter: blur(0px);
    }

    /*アニメーション開始時は不透明度0%*/
    100% {
        filter: blur(50px);

    }

    /*アニメーション終了時は不透明度100%*/
}