body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { position: fixed; width: 100%; height: 100% }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('./logo.svg') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

:root {
    --main-color: #FFF;
    --main-txt: #333;
    --theme-color: #00AC9D;
}


#loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 100;
    background-color: var(--main-color);
    font-size: 1rem;
    color: var(--theme-color);
}

#loading svg {
    width: 200px;
    margin-bottom: 20px;
}

#howto {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 5;
    width: 110px;
    height: 35px;
    color: var(--theme-color);
    border: 1px solid var(--theme-color);
    background-color: var(--main-color);
    display: flex;
    font-weight: 700;
    font-size: 16px;
    align-items: center;
    justify-content: center;
}

#howto_detail_pc {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: Calc(100% - 20px);
    max-width: 520px;
    height: auto;
    max-height: 90svh;
    overflow-y: auto;
    border: 1px solid var(--theme-color);
    background-color: var(--main-color);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 20px;
    visibility: hidden;
    color: var(--main-txt);
}

#howto_title {
    font-size: 28px;
    font-weight: 700;
}

#howto_content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    margin: 41px 0 21px;
}

.howto_content_block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.howto_content_block svg {
    width: 166px;
    height: auto;
    padding-right: 14px;
}

.howto_content_block span {
    font-size: 24px;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 10px;
}

#howto_close {
    font-size: 12px;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--main-txt);
}

#howto_close svg {
    padding-bottom: 6px;
}

#howto_detail_sp {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: Calc(100% - 20px);
    max-width: 520px;
    height: auto;
    border: 1px solid var(--theme-color);
    background-color: var(--main-color);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 20px;
    visibility: hidden;
    color: var(--main-txt);
}

#howto_detail_sp #howto_title {
    font-size: 24px;
}

#howto_detail_sp #howto_content {
    font-size: 12px;
    margin: 25px 0 10px;
}

#howto_detail_sp #howto_content span {
    font-size: 20px;
}

#howto_detail_sp #howto_content svg {
    width: 118px;
}

.howto_icons {
    fill: var(--theme-color);
}

.slideIn {
    animation: SlideIn 1s;
}

.slideOut {
    animation: SlideOut 1s;
}

.slideInFast {
    animation: SlideIn 0.5s;
}

.slideOutFast {
    animation: SlideOut 0.5s;
}

.fadeIn {
    animation: FadeIn 1s;
}

.fadeInFast {
    animation: FadeIn 0.5s;
}

.fadeOut {
    animation: FadeOut 1s;
}

.fadeOutFast {
    animation: FadeOut 0.5s;
}

.slideOutUp {
    animation: SlideOutUp 1s;
}

@keyframes SlideIn {
    0% {
        opacity: 0;
        transform: translateX(700px);
    }
    50% {}
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes SlideOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(200px);
        display: none;
    }
}

@keyframes FadeIn {
    0% {
        opacity: 0;
    }
    50% {}
    100% {
        opacity: 1;
    }
}

@keyframes FadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes SlideOutUp {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-200px);
    }
}


/* SP */

#spcontroller {
    opacity: 0.9;
    padding: 0;
    width: 96px;
    height: 96px;
    text-align: left;
    position: fixed;
    bottom: 65px;
    left: 35px;
    z-index: 11;
    display: none;
}

.spcontolbtn {
    width: 100%;
    height: 100%;
}


/* MEDIA QUERIES - TB */

@media screen and (max-width: 1366px) {
    #spcontroller {
        display: block;
    }
}