@charset "UTF-8";

/* コンテンツフェードイン用のCSS */
.slide-bottom {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}


/* Loading背景画面設定　*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: #fff;
    top: 0;
    text-align: center;
}

/* Loading画像中央配置　*/
#splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
    width: (600/1920)*100vw;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 768px) {
    #splash_logo img {
        width: 260px;
    }
}

@-webkit-keyframes hello {
    0% {
        stroke-dashoffset: 2000;
        fill: transparent;
    }

    40% {
        stroke-dashoffset: 2000;
        fill: transparent;
    }

    50% {
        fill: transparent;
    }

    80% {
        stroke-dashoffset: 0;
        fill: #fff;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #fff;
    }
}

@keyframes hello {
    0% {
        stroke-dashoffset: 2000;
        fill: transparent;
    }

    40% {
        stroke-dashoffset: 2000;
        fill: transparent;
    }

    50% {
        fill: transparent;
    }

    80% {
        stroke-dashoffset: 0;
        fill: #231815;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #231815;
    }
}



#splash.is-active {
    opacity: 0;
    visibility: hidden;
}