/*追加用スタイルのCSS*/

body.no_nav header,
body.no_nav footer,
body.no_nav .wave{
    display: none;
}

body.no_nav .download {
    display: none;
}

.mv_btn_w {
    padding: initial;
    background-color: #00000000;
}

.mv_btn_wrap {
    height: 25.8vw;
    position: absolute;
    top: 55%;
    left: 10.25%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 33.5vw;
    display: grid;
}

footer .icon_wrap {
    grid-template-columns: 56px 56px 56px 56px 56px;
}

@media (max-width: 768px){
    .mv_btn_w {
        height: 100%;
        padding: 5% 5% 5% 5%;
        border-radius: 4vw;
    }
    .mv_btn_wrap {
        width: 100vw;
        top: 12vh;
        left: 0;
    }
}

.sns_button {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

.mypage_top .logout {
    font-weight: initial;
}

.mypage_top .username_wrap .gender {
    font-size: xx-small;
    color: white;
    text-align: center;
}

.medal_shop .coin_select_wrap .coin_select .price {
    margin-right: initial;
}

 a.disabled {
     pointer-events: none;
 }

 div.alert_area {
     margin: 0 2px 8px 2px;
 }

 p.alert {
     font-size: 14px;
     color: red;
 }

p.alert a {
    font-size: 14px;
    color: #9B9B9B;
    margin: 0;
    text-decoration: underline;
}

p.alert_login {
    text-align: center;
    margin-top: 12px;
    color: red;
    padding: 0 18px;
}

.loading_bg.invisible {
    display: none;
}

.loader {
    color: #ffffff;
    font-size: 20px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
@-webkit-keyframes load4 {
    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}
@keyframes load4 {
    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

.loading_bg {
    position: fixed;
    top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-color: #00000044;
}

.download {
    position: relative;
}

.download .download_bg {
    width: 100vw;
    height: 265px;
    object-fit: cover;
    object-position: center;
}

.download .downlaod_wrap {
    position: absolute;
    width: 394px;
    margin: 0 auto;
    justify-content: space-between;
    display: grid;
    grid-template-columns: max-content max-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.download .downlaod_wrap .icon {
    width: 192px;
    height: 192px;
    box-shadow: 0px 15px 15px #0702031A;
    border-radius: 37px;
}

.download .downlaod_wrap .download_right img {
    width: 100%;
}

.download .downlaod_wrap .download_right p {
    font-weight: 600;
    font-size: 19px;
    margin: 27px 0 11px;
}

.download .downlaod_wrap .download_right .download_img_wrap {
    width: 394px;
    justify-content: space-between;
    display: grid;
    grid-template-columns: max-content max-content;
}

.download .downlaod_wrap .download_right .download_img_wrap img {
    width: 191px;
    padding-top:30px;
    height: initial;
}

@media (max-width: 768px) {
    .download .download_bg {
        height: 200px;
    }
    .download .downlaod_wrap {
        grid-template-columns: auto;
        width: fit-content;
    }
    .download .downlaod_wrap .icon {
        width: 118px;
        height: 118px;
        margin: 0 auto 24px;
    }
    .download .downlaod_wrap .download_right img {
        width: 100%;
        margin: 0 auto;
    }
    .download .downlaod_wrap .download_right p {
        font-size: 19px;
        text-align: center;
        margin: 12px auto 24px;
    }
    .download .downlaod_wrap .download_right .download_img_wrap {
        width: 310px;
    }
    .download .downlaod_wrap .download_right .download_img_wrap img {
        width: 150px;

    }
}