@charset "utf-8";

/*--------------------------------------
loadingアイコン
---------------------------------------*/
span.loading01, span.loading01:after {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-image:
            -webkit-gradient(radial,4 center,0,4 center,4,from(rgba(153,153,153,0.5)),color-stop(0.5,rgba(153,153,153,0.5)),color-stop(0.9,transparent),to(transparent)),
            -webkit-gradient(radial,center 4,0,center 4,4,from(rgba(153,153,153,0.5)),color-stop(0.5,rgba(153,153,153,0.5)),color-stop(0.9,transparent),to(transparent)),
            -webkit-gradient(radial,46 center,0,46 center,4,from(rgba(153,153,153,0.5)),color-stop(0.5,rgba(153,153,153,0.5)),color-stop(0.9,transparent),to(transparent)),
            -webkit-gradient(radial,center 46,0,center 46,4,from(rgba(153,153,153,0.5)),color-stop(0.5,rgba(153,153,153,0.5)),color-stop(0.9,transparent),to(transparent));
    background-image:
            -webkit-radial-gradient(10% 50%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent 95%, transparent),
            -webkit-radial-gradient(50% 10%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent 95%, transparent),
            -webkit-radial-gradient(90% 50%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent 95%, transparent),
            -webkit-radial-gradient(50% 90%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent 95%, transparent);
    background-image:
            radial-gradient(4px 4px at 10% 50%, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
            radial-gradient(4px 4px at 50% 10%, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
            radial-gradient(4px 4px at 90% 50%, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
            radial-gradient(4px 4px at 50% 90%, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent);
}
span.loading01 {
    position: relative;
    vertical-align: middle;
}
span.loading01:after {
    position: absolute;
    content: " ";
    z-index: -1;
    left: 0;
    top: 0;
    margin: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
span.loading01 span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-image: -webkit-gradient(radial,4 center,0,4 center,4,from(#999),color-stop(0.4,#999),color-stop(0.9,transparent),to(transparent));
    background-image: -webkit-radial-gradient(10% 50%, 4px 4px, #999, #999 95%, transparent 95%, transparent);
    background-image: radial-gradient(4px 4px at 10% 50%, #999, #999 95%, transparent);
    -webkit-animation: animation01 2s linear infinite;
    animation: animation01 2s linear infinite;
}

@-webkit-keyframes animation01 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    12.4% {
        -webkit-transform: rotate(0deg);
    }
    12.5% {
        -webkit-transform: rotate(45deg);
    }
    24.9% {
        -webkit-transform: rotate(45deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    37.4% {
        -webkit-transform: rotate(90deg);
    }
    37.5% {
        -webkit-transform: rotate(135deg);
    }
    49.9% {
        -webkit-transform: rotate(135deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    62.4% {
        -webkit-transform: rotate(180deg);
    }
    62.5% {
        -webkit-transform: rotate(225deg);
    }
    74.9% {
        -webkit-transform: rotate(225deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    87.4% {
        -webkit-transform: rotate(270deg);
    }
    87.5% {
        -webkit-transform: rotate(315deg);
    }
    99.9% {
        -webkit-transform: rotate(315deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes animation01 {
    0% {
        transform: rotate(0deg);
    }
    12.4% {
        transform: rotate(0deg);
    }
    12.5% {
        transform: rotate(45deg);
    }
    24.9% {
        transform: rotate(45deg);
    }
    25% {
        transform: rotate(90deg);
    }
    37.4% {
        transform: rotate(90deg);
    }
    37.5% {
        transform: rotate(135deg);
    }
    49.9% {
        transform: rotate(135deg);
    }
    50% {
        transform: rotate(180deg);
    }
    62.4% {
        transform: rotate(180deg);
    }
    62.5% {
        transform: rotate(225deg);
    }
    74.9% {
        transform: rotate(225deg);
    }
    75% {
        transform: rotate(270deg);
    }
    87.4% {
        transform: rotate(270deg);
    }
    87.5% {
        transform: rotate(315deg);
    }
    99.9% {
        transform: rotate(315deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#loading-area {
    align-items: center;
    justify-content: center;
    margin: 10px;
}

/*.loading {*/
/*    margin-top: 10vh;*/
/*}*/

.loading-atone {
    margin-top: 10vh;
}

.loading-sps {
    margin-top: 20vh;
}

.loading-image {
    text-align: center;
}
.loading-txt {
    margin: 20px auto;
    text-align: center;
}