@charset "UTF-8";
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.kv .container
{
    display: block;
    width: 320px;
    height: 350px;
    background-image: url("../images/sp/main/kv/kv.jpg");
    background-repeat: no-repeat;
    background-size: 320px 350px;
    background-position: 0px 0px;
    position: relative;
}

.kv .container .logo
{
    display: block;
    width: 80.5px;
    height: 58px;
    background-image: url("//xflag.com/common/images/monsterstrike_symbollogo.png");
    background-repeat: no-repeat;
    background-size: 80.5px 58px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    position: absolute;
    top: 8px;
    left: 15px;
}

.kv .container h1, .kv .container h2
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.kv .container .badge
{
    position: absolute;
    display: block;
    width: 133.5px;
    height: 86px;
    background-image: url("../images/sp/main/kv/fukidasi.png");
    background-repeat: no-repeat;
    background-size: 133.5px 86px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    bottom: 4px;
    right: 1px;
}

.kv .notice
{
    position: relative;
    background: #053A9E url("../images/sp/main/kv/text.png") no-repeat;
    background-size: 288.5px;
    background-position: center center;
    height: 234px;
    width: 100%;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.download-pc
{
    display: none;
}

.music01
{
    display: block;
    width: 320px;
    height: 428.5px;
    background-image: url("../images/sp/main/music01/bg.png");
    background-repeat: no-repeat;
    background-size: 320px 428.5px;
    background-position: 0px 0px;
    height: 427.5px;
    padding-top: 1px;
    position: relative;
}

.music01 h2
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 142.5px;
    height: 40.5px;
    background-image: url("../images/sp/main/music01/h2.png");
    background-repeat: no-repeat;
    background-size: 142.5px 40.5px;
    background-position: 0px 0px;
    margin: 45px auto 0;
    padding: 1px;
}

.music01 p
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 177.5px;
    height: 93.5px;
    background-image: url("../images/sp/main/music01/text.png");
    background-repeat: no-repeat;
    background-size: 177.5px 93.5px;
    background-position: 0px 0px;
    margin: 15px auto 0;
}

.music01 .chara01
{
    display: block;
    width: 195.5px;
    height: 218px;
    background-image: url("../images/sp/main/music01/chara01.png");
    background-repeat: no-repeat;
    background-size: 195.5px 218px;
    background-position: 0px 0px;
    position: absolute;
    left: 0px;
    bottom: 10px;
}

.music01 .chara02
{
    display: block;
    width: 107px;
    height: 117.5px;
    background-image: url("../images/sp/main/music01/chara02.png");
    background-repeat: no-repeat;
    background-size: 107px 117.5px;
    background-position: 0px 0px;
    position: absolute;
    right: 0px;
    bottom: 110px;
}

.music01 .button
{
    display: block;
    width: 290.5px;
    height: 58.5px;
    background-image: url("../images/sp/main/music01/btn.png");
    background-repeat: no-repeat;
    background-size: 290.5px 58.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -145.25px;
    padding: 1px;
}

.music02
{
    display: block;
    width: 320px;
    height: 523.5px;
    background-image: url("../images/sp/main/music02/bg.png");
    background-repeat: no-repeat;
    background-size: 320px 523.5px;
    background-position: 0px 0px;
    padding-top: 1px;
    height: 522.5px;
    position: relative;
}

.music02 h2
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 144.5px;
    height: 23px;
    background-image: url("../images/sp/main/music02/h2.png");
    background-repeat: no-repeat;
    background-size: 144.5px 23px;
    background-position: 0px 0px;
    margin: 45px auto 0;
    padding: 1px;
}

.music02 p
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 203px;
    height: 103.5px;
    background-image: url("../images/sp/main/music02/text.png");
    background-repeat: no-repeat;
    background-size: 203px 103.5px;
    background-position: 0px 0px;
    margin: 15px auto 0;
}

.music02 .chara
{
    display: block;
    width: 210.5px;
    height: 224px;
    background-image: url("../images/sp/main/music02/chara.png");
    background-repeat: no-repeat;
    background-size: 210.5px 224px;
    background-position: 0px 0px;
    position: absolute;
    right: 0px;
    bottom: 97px;
}

.music02 .button1
{
    display: block;
    width: 290.5px;
    height: 58.5px;
    background-image: url("../images/sp/main/music02/btn_1.png");
    background-repeat: no-repeat;
    background-size: 290.5px 58.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -145.25px;
    padding: 1px;
}

.music02 .button2
{
    display: block;
    width: 290.5px;
    height: 58.5px;
    background-image: url("../images/sp/main/music02/btn_2.png");
    background-repeat: no-repeat;
    background-size: 290.5px 58.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    bottom: 90px;
    margin-left: -145.25px;
    padding: 1px;
}

.music02 .new
{
    position: absolute;
    display: block;
    width: 47.5px;
    height: 35px;
    background-image: url("../images/sp/main/music02/new.png");
    background-repeat: no-repeat;
    background-size: 47.5px 35px;
    background-position: 0px 0px;
    top: 337px;
    left: 7px;
    -webkit-animation: animScale 0.9s;
    animation: animScale 0.9s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes animScale
{
    0%
    {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }

    20%
    {
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }

    100%
    {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

@keyframes animScale
{
    0%
    {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }

    20%
    {
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }

    100%
    {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

.download-sp
{
    background: #0058c4;
    width: 100%;
    padding: 30px 0;
}

.download-sp .button
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 290.5px;
    height: 73.5px;
    background-image: url("../images/sp/main/download/btn.png");
    background-repeat: no-repeat;
    background-size: 290.5px 73.5px;
    background-position: 0px 0px;
    margin: 0 auto;
    padding: 1px;
}

.download-sp p
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 251px;
    height: 9px;
    background-image: url("../images/sp/main/download/text.png");
    background-repeat: no-repeat;
    background-size: 251px 9px;
    background-position: 0px 0px;
    margin: 10px auto 0;
    padding: 1px;
}

.movie
{
    display: block;
    width: 320px;
    height: 295.5px;
    background-image: url("../images/sp/main/movie/bg.png");
    background-repeat: no-repeat;
    background-size: 320px 295.5px;
    background-position: 0px 0px;
    padding-top: 1px;
    position: relative;
}

.movie h2
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 233.5px;
    height: 44px;
    background-image: url("../images/sp/main/movie/h2.png");
    background-repeat: no-repeat;
    background-size: 233.5px 44px;
    background-position: 0px 0px;
    margin: 40px auto 20px;
    z-index: 5;
    position: relative;
}

.movie iframe
{
    display: block;
    width: 285px;
    margin: 0 auto;
    border: 4px solid #fff;
    border-radius: 2px;
}

.movie .chara01
{
    position: absolute;
    top: 5px;
    left: 5px;
    display: block;
    width: 67px;
    height: 80px;
    background-image: url("../images/sp/main/movie/chara01.png");
    background-repeat: no-repeat;
    background-size: 67px 80px;
    background-position: 0px 0px;
}

.movie .chara02
{
    position: absolute;
    top: 13px;
    right: 5px;
    display: block;
    width: 61.5px;
    height: 61px;
    background-image: url("../images/sp/main/movie/chara02.png");
    background-repeat: no-repeat;
    background-size: 61.5px 61px;
    background-position: 0px 0px;
}

.movie .ball
{
    position: absolute;
    top: 25px;
    left: 70px;
    display: block;
    width: 25px;
    height: 25px;
    background-image: url("../images/sp/main/movie/ball.png");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: 0px 0px;
}

.movie .fukidasi
{
    position: absolute;
    top: 17px;
    right: 56px;
    display: block;
    width: 36px;
    height: 38px;
    background-image: url("../images/sp/main/movie/fukidasi.png");
    background-repeat: no-repeat;
    background-size: 36px 38px;
    background-position: 0px 0px;
}

.share
{
    background: #FFF;
    padding: 42px 0 50px;
}

.share h2
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 123.5px;
    height: 17.5px;
    background-image: url("../images/sp/main/share/h2.png");
    background-repeat: no-repeat;
    background-size: 123.5px 17.5px;
    background-position: 0px 0px;
    margin: 0 auto 20px;
    padding: 1px;
}

.share ul
{
    text-align: center;
}

.share ul li
{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.share ul li:first-child
{
    display: inline-block;
    margin-right: 25px;
}

.share ul li:first-child a
{
    padding: 1px;
    display: block;
    width: 56px;
    height: 56px;
    background-image: url("../images/sp/main/share/fb.png");
    background-repeat: no-repeat;
    background-size: 56px 56px;
    background-position: 0px 0px;
    background-size: cover;
}

.share ul li:nth-child(2)
{
    display: inline-block;
    margin-right: 25px;
}

.share ul li:nth-child(2) a
{
    padding: 1px;
    display: block;
    width: 56px;
    height: 56px;
    background-image: url("../images/sp/main/share/twitter.png");
    background-repeat: no-repeat;
    background-size: 56px 56px;
    background-position: 0px 0px;
    background-size: cover;
}

.share ul li:nth-child(3)
{
    display: inline-block;
}

.share ul li:nth-child(3) a
{
    padding: 1px;
    display: block;
    width: 56px;
    height: 56px;
    background-image: url("../images/sp/main/share/line.png");
    background-repeat: no-repeat;
    background-size: 56px 56px;
    background-position: 0px 0px;
    background-size: cover;
}

.caution
{
    background: url("../images/sp/main/caution/bg.png") no-repeat bottom center;
    background-size: 100%;
    height: 210px;
    width: 100%;
}

.caution h2
{
    padding: 1px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 36px;
    height: 17.5px;
    background-image: url("../images/sp/main/caution/h2.png");
    background-repeat: no-repeat;
    background-size: 36px 17.5px;
    background-position: 0px 0px;
    margin: 0 auto 20px;
}

.caution ul
{
    width: 260px;
    padding-left: 1em;
    margin: 0 auto;
}

.caution ul li
{
    color: #0058c4;
    font-size: 9px;
    margin-bottom: 8px;
}

.caution ul li:before
{
    content: "・";
    margin-left: -1em;
}

.footer
{
    background: #0058c4;
    padding: 40px 0;
}

.footer .bnr li:first-child a
{
    padding: 1px;
    margin: 0 auto 20px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 214px;
    height: 85.5px;
    background-image: url("../images/sp/main/footer/bnr01.png");
    background-repeat: no-repeat;
    background-size: 214px 85.5px;
    background-position: 0px 0px;
}

.footer .bnr li:nth-child(2) a
{
    padding: 1px;
    margin: 0 auto 20px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 214px;
    height: 85.5px;
    background-image: url("../images/sp/main/footer/bnr02.png");
    background-repeat: no-repeat;
    background-size: 214px 85.5px;
    background-position: 0px 0px;
}

.footer .xflag a
{
    margin: 0 auto 52px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    display: block;
    width: 85px;
    height: 98px;
    background-image: url("//xflag.com/common/images/promotion_logo_xflag.png");
    background-repeat: no-repeat;
    background-size: 85px 98px;
    background-position: 0px 0px;
}

.footer .link
{
    text-align: center;
}

.footer .link li
{
    display: inline-block;
    margin-right: 20px;
}

.footer .link li:last-child
{
    margin-right: 0px;
}

.footer .link li a
{
    color: #fff;
    font-size: 9px;
    text-decoration: underline;
}

.footer address
{
    font-size: 9px;
    color: #FFF;
    text-align: center;
    margin-top: 30px;
}