body
{ 
    padding: 0;
    margin: 0;
}
#container
{
    position: fixed;
    width: 100%;
    height: 100%;
}
#canvas
{
    width: 100%;
    height: 100%;
    background: #FFF;
}
#loading-view
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
#loading-area
{
    width: 180px;
    display:flex;
    justify-content: space-between;
    flex-direction: row;
    margin:  0 auto;
}
#kugitama-logo
{
    width: 340px;
    height: 70px;
    background: url('../images/logo/kugitama_logo.png') no-repeat center;
    background-size: contain;
}

.kugi
{
    width: 6px;
    height: 6px;
    background: url('../images/loading/loading_kugi.png') no-repeat center;
    background-size: contain;
    position: absolute;
    right: 17px;
    bottom: 17px;
    animation:2s linear infinite stop;
}
.roll
{
    width: 40px;
    height: 40px;
    background: url('../images/loading/loading_roll.png') no-repeat center;
    background-size: contain;
    position: relative;
    animation:2s linear infinite rotation;
}
.loading-img
{
    width: 102px;
    height: 16px;
    background: url('../images/loading/loading_text_01.png') no-repeat center;
    background-size: contain;
    position: relative;
    top: 26px;
}
.progress-number
{
    color: #4D4D4D;
    margin-left: 22%;
    position: absolute;
    font-weight: bold;
    text-shadow:
        0px 0px 1px #4D4D4D,
        0px 0px 1px #4D4D4D,
        0px 0px 1px #4D4D4D;
}

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

@keyframes stop{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(-360deg); }
}