@charset "UTF-8";

body
{
    background: url("../images/sp/common/bg.png");
}

#header
{
    background: #000;
    height: 350px;
    width: 100%;
}

#header .kv
{
    display: block;
    width: 320px;
    height: 350px;
    background-image: url("../images/sp/header/bg.png");
    background-repeat: no-repeat;
    background-size: 320px 350px;
    background-position: 0px 0px;
    position: relative;
    overflow: hidden;
}

#header .kv h1
{
    display: block;
    width: 320px;
    height: 137px;
    background-image: url("../images/sp/header/logo.png");
    background-repeat: no-repeat;
    background-size: 320px 137px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    position: absolute;
    bottom: 54px;
    left: 0;
    z-index: 6;
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
}

#header .kv h1.logoFallInAnim
{
    -webkit-animation: logoFallInAnim 0.4s ease-in 0.7s;
    animation: logoFallInAnim 0.4s ease-in 0.7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 1;
}

#header .kv h2
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 250px;
    height: 35px;
    background-image: url("../images/sp/header/event.png");
    background-repeat: no-repeat;
    background-size: 250px 35px;
    background-position: 0px 0px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -125px;
    z-index: 5;
}

#header .kv .particle
{
    display: block;
    width: 320px;
    height: 165px;
    background-image: url("../images/sp/header/particle.png");
    background-repeat: no-repeat;
    background-size: 320px 165px;
    background-position: 0px 0px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
    opacity: 0;
}

#header .kv .shadow
{
    display: block;
    width: 320px;
    height: 350px;
    background-image: url("../images/sp/header/shadow.png");
    background-repeat: no-repeat;
    background-size: 320px 350px;
    background-position: 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

#header .kv .chara_01
{
    display: block;
    width: 320px;
    height: 350px;
    background-image: url("../images/sp/header/chara_01.png");
    background-repeat: no-repeat;
    background-size: 320px 350px;
    background-position: 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
}

#header .kv .chara_02
{
    display: block;
    width: 320px;
    height: 350px;
    background-image: url("../images/sp/header/chara_02.png");
    background-repeat: no-repeat;
    background-size: 320px 350px;
    background-position: 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#header .kv .chara_03
{
    display: block;
    width: 320px;
    height: 350px;
    background-image: url("../images/sp/header/chara_03.png");
    background-repeat: no-repeat;
    background-size: 320px 350px;
    background-position: 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#currentstatus
{
    position: relative;
    width: 100%;
    height: 233px;
    background: rgba(0, 0, 0, 0.2);
    font-family: serif;
    margin: 30px 0 0;
    z-index: 10;
}

#currentstatus .container
{
    width: 100%;
    position: relative;
}

#currentstatus .container h2
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 107px;
    height: 23px;
    background-image: url("../images/sp/currentstatus/title.png");
    background-repeat: no-repeat;
    background-size: 107px 23px;
    background-position: 0px 0px;
    position: relative;
    margin: 0 auto 12px;
    top: -11px;
}

#currentstatus .container ul
{
    position: relative;
    top: -11px;
}

#currentstatus .container ul .totalbattle
{
    display: block;
    width: 247px;
    height: 82px;
    background-image: url("../images/sp/currentstatus/totalbattle.png");
    background-repeat: no-repeat;
    background-size: 247px 82px;
    background-position: 0px 0px;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

#currentstatus .container ul .totalbattle .totalbattle_num
{
    display: inline-block;
    margin: 34px 0 0 3px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .comma
{
    display: block;
    width: 9px;
    height: 11.5px;
    background-image: url("../images/sp/currentstatus/comma.png");
    background-repeat: no-repeat;
    background-size: 9px 11.5px;
    background-position: 0px 0px;
    margin-top: 20px;
    margin-left: -1px;
    display: inline-block;
}

#currentstatus .container ul .totalbattle .totalbattle_num .comma2
{
    display: block;
    width: 9px;
    height: 11.5px;
    background-image: url("../images/sp/currentstatus/comma.png");
    background-repeat: no-repeat;
    background-size: 9px 11.5px;
    background-position: 0px 0px;
    margin-top: 20px;
    margin-left: 2px;
    display: inline-block;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num_box
{
    margin: 0;
    width: 18px;
    height: 28px;
    background: url("../images/sp/currentstatus/num.png");
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num0
{
    background-position: 0 0px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num1
{
    background-position: 0 -28px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num2
{
    background-position: 0 -56px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num3
{
    background-position: 0 -84px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num4
{
    background-position: 0 -112px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num5
{
    background-position: 0 -140px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num6
{
    background-position: 0 -168px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num7
{
    background-position: 0 -196px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num8
{
    background-position: 0 -224px;
}

#currentstatus .container ul .totalbattle .totalbattle_num .num9
{
    background-position: 0 -252px;
}

#currentstatus .container ul .conquerdarea
{
    display: block;
    width: 247px;
    height: 82px;
    background-image: url("../images/sp/currentstatus/conquerdarea.png");
    background-repeat: no-repeat;
    background-size: 247px 82px;
    background-position: 0px 0px;
    position: relative;
    margin: 7px  auto 0;
}

#currentstatus .container ul .conquerdarea .current_num_wrap
{
    display: inline-block;
    text-align: center;
    width: 42px;
    height: 56px;
    position: absolute;
    top: 37px;
    left: 59px;
}

#currentstatus .container ul .conquerdarea .current_num
{
    display: inline-block;
}

#currentstatus .container ul .conquerdarea .total_num
{
    display: inline-block;
    width: 72px;
    height: 56px;
    position: absolute;
    top: 37px;
    left: 150px;
}

#currentstatus .container ul .conquerdarea .total_num .num1
{
    position: absolute;
    left: 0;
}

#currentstatus .container ul .conquerdarea .total_num .num0
{
    position: absolute;
    right: 40px;
}

#currentstatus .container ul .conquerdarea .num_box
{
    display: inline-block;
    margin: 0 auto;
    width: 18px;
    height: 28px;
    background: url("../images/sp/currentstatus/num.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

#currentstatus .container ul .conquerdarea .num0
{
    background-position: 0 0px;
}

#currentstatus .container ul .conquerdarea .num1
{
    background-position: 0 -28px;
}

#currentstatus .container ul .conquerdarea .num2
{
    background-position: 0 -56px;
}

#currentstatus .container ul .conquerdarea .num3
{
    background-position: 0 -84px;
}

#currentstatus .container ul .conquerdarea .num4
{
    background-position: 0 -112px;
}

#currentstatus .container ul .conquerdarea .num5
{
    background-position: 0 -140px;
}

#currentstatus .container ul .conquerdarea .num6
{
    background-position: 0 -168px;
}

#currentstatus .container ul .conquerdarea .num7
{
    background-position: 0 -196px;
}

#currentstatus .container ul .conquerdarea .num8
{
    background-position: 0 -224px;
}

#currentstatus .container ul .conquerdarea .num9
{
    background-position: 0 -252px;
}

#currentstatus .container ul .conquerdarea .complete .num0
{
    margin: 0 0 0 -2px;
}

#currentstatus .container .button_wrap
{
    width: 320px;
    margin: -8px auto 0;
    position: relative;
}

#currentstatus .container .button_wrap .button
{
    display: block;
    width: 70px;
    height: 70px;
    background-image: url("../images/sp/currentstatus/btn.png");
    background-repeat: no-repeat;
    background-size: 70px 70px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 92px;
}

#currentstatus .container .button_wrap .button_facebook
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 70px;
    height: 70px;
    background-image: url("../images/sp/currentstatus/btn_to_facebook.png");
    background-repeat: no-repeat;
    background-size: 70px 70px;
    background-position: 0px 0px;
    position: absolute;
    top: 0;
    left: 160px;
}

#info .event p
{
    display: block;
    width: 320px;
    height: 400px;
    background-image: url("../images/sp/info/eventinformation.png");
    background-repeat: no-repeat;
    background-size: 320px 400px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    position: relative;
    z-index: 5;
}

#info .game
{
    width: 100%;
}

#info .game li:nth-of-type(1)
{
    display: block;
    width: 320px;
    height: 298px;
    background-image: url("../images/sp/info/step1.png");
    background-repeat: no-repeat;
    background-size: 320px 298px;
    background-position: 0px 0px;
    position: relative;
    margin-top: -35px;
    z-index: 3;
}

#info .game li:nth-of-type(1) a
{
    display: block;
    position: absolute;
    width: 68px;
    height: 22px;
    top: 236px;
    left: 154px;
}

#info .game li:nth-of-type(2)
{
    display: block;
    width: 320px;
    height: 298px;
    background-image: url("../images/sp/info/step2.png");
    background-repeat: no-repeat;
    background-size: 320px 298px;
    background-position: 0px 0px;
    position: relative;
    margin-top: -13px;
    z-index: 2;
}

#info .game li:nth-of-type(3)
{
    display: block;
    width: 320px;
    height: 274px;
    background-image: url("../images/sp/info/step3.png");
    background-repeat: no-repeat;
    background-size: 320px 274px;
    background-position: 0px 0px;
    position: relative;
    margin-top: -15px;
}

#info .game li:nth-of-type(1) p,
  #info .game li:nth-of-type(2) p,
  #info .game li:nth-of-type(3) p
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#info .incentiveinfo
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 273px;
    height: 63px;
    background-image: url("../images/sp/info/incentiveinfo.png");
    background-repeat: no-repeat;
    background-size: 273px 63px;
    background-position: 0px 0px;
    margin: 9px auto 20px;
}

#info .line
{
    display: block;
    width: 300px;
    height: 20px;
    background-image: url("../images/sp/info/line.png");
    background-repeat: no-repeat;
    background-size: 300px 20px;
    background-position: 0px 0px;
    margin: 0 auto 19px;
}

#map h2
{
    display: block;
    width: 320px;
    height: 74px;
    background-image: url("../images/sp/map/title.png");
    background-repeat: no-repeat;
    background-size: 320px 74px;
    background-position: 0px 0px;
    margin: 0 auto 13px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#map .container
{
    background-image: url("../images/sp/map/bg2.png");
    background-size: 64px 391px;
    height: 391px;
    width: 100%;
    position: relative;
}

#map .container .masu
{
    height: 391px;
    width: 100%;
    background: url("../images/sp/map/bg.png");
    background-size: 24.5px 24.5px;
}

#map .container .map_wrap
{
    display: block;
    width: 307px;
    height: 333.5px;
    background-image: url("../images/pc/map/map_base.png");
    background-repeat: no-repeat;
    background-size: 307px 333.5px;
    background-position: 0px 0px;
    position: absolute;
    top: 19px;
    left: 50%;
    margin-left: -153.5px;
}

#map .container .map_wrap .area1
{
    display: block;
    width: 314px;
    height: 142.5px;
    background-image: url("../images/pc/map/map_area_1.png");
    background-repeat: no-repeat;
    background-size: 314px 142.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 157px;
    height: 142.5px;
    position: absolute;
    top: 4px;
    left: 147px;
}

#map .container .map_wrap .area1 .pin1
{
    display: block;
    width: 91px;
    height: 64.5px;
    background-image: url("../images/pc/map/map_pin_1.png");
    background-repeat: no-repeat;
    background-size: 91px 64.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 45.5px;
    height: 64.5px;
    position: absolute;
    top: 31px;
    left: 46px;
    z-index: 5;
}

#map .container .map_wrap .area2
{
    display: block;
    width: 217px;
    height: 107.5px;
    background-image: url("../images/pc/map/map_area_2.png");
    background-repeat: no-repeat;
    background-size: 217px 107.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 108.5px;
    height: 217px;
    position: absolute;
    top: 64px;
    left: 44px;
}

#map .container .map_wrap .area2 .pin2
{
    display: block;
    width: 91px;
    height: 64.5px;
    background-image: url("../images/pc/map/map_pin_2.png");
    background-repeat: no-repeat;
    background-size: 91px 64.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 45.5px;
    height: 64.5px;
    position: absolute;
    top: 73px;
    left: 28px;
    z-index: 5;
}

#map .container .map_wrap .area3
{
    display: block;
    width: 336px;
    height: 126.5px;
    background-image: url("../images/pc/map/map_area_3.png");
    background-repeat: no-repeat;
    background-size: 336px 126.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 168px;
    height: 126.5px;
    position: absolute;
    top: 205px;
    left: 85px;
    z-index: 100;
}

#map .container .map_wrap .area3 .pin3
{
    display: block;
    width: 91px;
    height: 64.5px;
    background-image: url("../images/pc/map/map_pin_3.png");
    background-repeat: no-repeat;
    background-size: 91px 64.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 45.5px;
    height: 64.5px;
    position: absolute;
    top: -23px;
    left: 90px;
    z-index: 10;
}

#map .container .map_wrap .area4
{
    display: block;
    width: 170px;
    height: 95.5px;
    background-image: url("../images/pc/map/map_area_4.png");
    background-repeat: no-repeat;
    background-size: 170px 95.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 85px;
    height: 95.5px;
    position: absolute;
    top: 129px;
    left: 193px;
}

#map .container .map_wrap .area4 .pin4
{
    display: block;
    width: 91px;
    height: 64.5px;
    background-image: url("../images/pc/map/map_pin_4.png");
    background-repeat: no-repeat;
    background-size: 91px 64.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 45.5px;
    height: 64.5px;
    position: absolute;
    top: -6px;
    left: 22px;
    z-index: 5;
}

#map .container .map_wrap .area5
{
    display: block;
    width: 188px;
    height: 71px;
    background-image: url("../images/pc/map/map_area_5.png");
    background-repeat: no-repeat;
    background-size: 188px 71px;
    background-position: 0px 0px;
    background-position: left;
    width: 94px;
    height: 71px;
    position: absolute;
    top: 67px;
    left: 52px;
}

#map .container .map_wrap .area5 .pin5
{
    display: block;
    width: 91px;
    height: 64.5px;
    background-image: url("../images/pc/map/map_pin_5.png");
    background-repeat: no-repeat;
    background-size: 91px 64.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 45.5px;
    height: 64.5px;
    position: absolute;
    top: -12px;
    left: 31px;
    z-index: 5;
}

#map .container .map_wrap .area6
{
    display: block;
    width: 185px;
    height: 87.5px;
    background-image: url("../images/pc/map/map_area_6.png");
    background-repeat: no-repeat;
    background-size: 185px 87.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 92.5px;
    height: 87.5px;
    position: absolute;
    top: 145px;
    left: 123px;
}

#map .container .map_wrap .area6 .pin6
{
    display: block;
    width: 91px;
    height: 64.5px;
    background-image: url("../images/pc/map/map_pin_6.png");
    background-repeat: no-repeat;
    background-size: 91px 64.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 45.5px;
    height: 64.5px;
    position: absolute;
    top: 6px;
    left: 16px;
    z-index: 5;
}

#map .container .map_wrap .area7
{
    display: block;
    width: 164px;
    height: 70.5px;
    background-image: url("../images/pc/map/map_area_7.png");
    background-repeat: no-repeat;
    background-size: 164px 70.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 82px;
    height: 70.5px;
    position: absolute;
    top: 85px;
    left: 128px;
}

#map .container .map_wrap .area7 .pin7
{
    display: block;
    width: 91px;
    height: 64.5px;
    background-image: url("../images/pc/map/map_pin_7.png");
    background-repeat: no-repeat;
    background-size: 91px 64.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 45.5px;
    height: 64.5px;
    position: absolute;
    top: -15px;
    left: 18px;
    z-index: 5;
}

#map .container .map_wrap .area8
{
    display: block;
    width: 176px;
    height: 75px;
    background-image: url("../images/pc/map/map_area_8.png");
    background-repeat: no-repeat;
    background-size: 176px 75px;
    background-position: 0px 0px;
    background-position: left;
    width: 88px;
    height: 75px;
    position: absolute;
    top: 3px;
    left: 6px;
}

#map .container .map_wrap .area8 .pin8
{
    display: block;
    width: 91px;
    height: 64.5px;
    background-image: url("../images/pc/map/map_pin_8.png");
    background-repeat: no-repeat;
    background-size: 91px 64.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 45.5px;
    height: 64.5px;
    position: absolute;
    top: -16px;
    left: 29px;
    z-index: 5;
}

#map .container .map_wrap .area9
{
    display: block;
    width: 239px;
    height: 93px;
    background-image: url("../images/pc/map/map_area_9.png");
    background-repeat: no-repeat;
    background-size: 239px 93px;
    background-position: 0px 0px;
    background-position: left;
    width: 119.5px;
    height: 93px;
    position: absolute;
    top: 178px;
    left: 3px;
}

#map .container .map_wrap .area9 .pin9
{
    display: block;
    width: 91px;
    height: 64.5px;
    background-image: url("../images/pc/map/map_pin_9.png");
    background-repeat: no-repeat;
    background-size: 91px 64.5px;
    background-position: 0px 0px;
    background-position: left;
    width: 45.5px;
    height: 64.5px;
    position: absolute;
    top: -9px;
    left: 25px;
    z-index: 5;
}

#map .container .map_wrap .area.conquerd
{
    background-position: right;
    opacity: 0;
}

#map .container .map_wrap .area.conquerd .pin
{
    background-position: right;
    opacity: 0;
}

#map .container .scale
{
    display: block;
    width: 76px;
    height: 10px;
    background-image: url("../images/sp/map/scale.png");
    background-repeat: no-repeat;
    background-size: 76px 10px;
    background-position: 0px 0px;
    position: absolute;
    left: 10px;
    bottom: 40px;
}

#map .container .text
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 152px;
    height: 22px;
    background-image: url("../images/sp/map/text.png");
    background-repeat: no-repeat;
    background-size: 152px 22px;
    background-position: 0px 0px;
    position: absolute;
    bottom: 36px;
    right: 11px;
}

#map .container .guide
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 270px;
    height: 47px;
    background-image: url("../images/sp/map/guide.png");
    background-repeat: no-repeat;
    background-size: 270px 47px;
    background-position: 0px 0px;
    position: absolute;
    bottom: -11px;
    left: 50%;
    margin-left: -135px;
}

#list .list_box
{
    background: url("../images/sp/list/bg.png") top center no-repeat;
    background-size: 300px 1631px;
    width: 100%;
    height: 1631px;
    margin: 19px auto 20px;
    padding: 5px 0;
    box-sizing: border-box;
}

#list .list_box li
{
    background: url("../images/sp/list/list_01.png");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 580px 164px;
    width: 290px;
    height: 164px;
    margin: 0 auto 5px;
    position: relative;
}

#list .list_box li p
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#list .list_box li .bar
{
    width: 273px;
    height: 45px;
    position: absolute;
    left: 9px;
    top: 67px;
}

#list .list_box li .bar .frame
{
    display: block;
    width: 273px;
    height: 28px;
    background-image: url("../images/sp/list/frame.png");
    background-repeat: no-repeat;
    background-size: 273px 28px;
    background-position: 0px 0px;
    z-index: 5;
}

#list .list_box li .bar .gauge-wrap
{
    position: absolute;
    z-index: 4;
    left: 8px;
    top: 8px;
    width: 255px;
}

#list .list_box li .bar .gauge
{
    width: 0;
    background-image: url("../images/sp/list/bar2.png");
    background-size: 13px 11px;
    height: 11px;
    border-radius: 12px;
    box-shadow: inset 1px 0 1px 0 #ffff4d,inset -1px 0px 1px 0px #ffff4d;
}

#list .list_box li .bar .gauge.conquerd
{
    display: block;
    width: 256px;
    height: 11px;
    background-image: url("../images/sp/list/bar.png");
    background-repeat: no-repeat;
    background-size: 256px 11px;
    background-position: 0px 0px;
    opacity: 0;
}

#list .list_box li .bar .bg
{
    display: block;
    width: 260px;
    height: 15px;
    background-image: url("../images/sp/list/barguide.png");
    background-repeat: no-repeat;
    background-size: 260px 15px;
    background-position: 0px 0px;
    position: absolute;
    z-index: 3;
    left: 6px;
    top: 6px;
}

#list .list_box li .bar .num
{
    font-size: 8px;
    color: #FFF;
    z-index: 5;
    display: inline-block;
    width: 273px;
    text-align: center;
    text-indent: 0;
    position: absolute;
    bottom: 0;
}

#list .list_box li .incentive
{
    box-sizing: border-box;
    width: 185px;
    height: 45px;
    position: absolute;
    left: 0;
    bottom: 0;
}

#list .list_box li .incentive .item
{
    display: block;
    width: 23px;
    height: 23px;
    background-image: url("../images/pc/list/orb.png");
    background-repeat: no-repeat;
    background-size: 23px 23px;
    background-position: 0px 0px;
    position: absolute;
    left: 63px;
    top: 11px;
}

#list .list_box li .incentive .x
{
    display: block;
    width: 6px;
    height: 5px;
    background-image: url("../images/pc/list/x.png");
    background-repeat: no-repeat;
    background-size: 6px 5px;
    background-position: 0px 0px;
    position: absolute;
    top: 21px;
    left: 96px;
}

#list .list_box li .incentive .num_wrap .num_box
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 11.5px;
    height: 16.5px;
    background-image: url("../images/pc/list/num_0.png");
    background-repeat: no-repeat;
    background-size: 11.5px 16.5px;
    background-position: 0px 0px;
    position: absolute;
    top: 15px;
    left: 112px;
}

#list .list_box li .incentive .num_wrap .num0
{
    background-image: url("../images/pc/list/num_0.png");
}

#list .list_box li .incentive .num_wrap .num1
{
    background-image: url("../images/pc/list/num_1.png");
}

#list .list_box li .incentive .num_wrap .num2
{
    background-image: url("../images/pc/list/num_2.png");
}

#list .list_box li .incentive .num_wrap .num3
{
    background-image: url("../images/pc/list/num_3.png");
}

#list .list_box li .incentive .num_wrap .num4
{
    background-image: url("../images/pc/list/num_4.png");
}

#list .list_box li .incentive .num_wrap .num5
{
    background-image: url("../images/pc/list/num_5.png");
}

#list .list_box li .incentive .num_wrap .num6
{
    background-image: url("../images/pc/list/num_6.png");
}

#list .list_box li .incentive .num_wrap .num7
{
    background-image: url("../images/pc/list/num_7.png");
}

#list .list_box li .incentive .num_wrap .num8
{
    background-image: url("../images/pc/list/num_8.png");
}

#list .list_box li .incentive .num_wrap .num9
{
    background-image: url("../images/pc/list/num_9.png");
}

#list .list_box li .button
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 50px;
    height: 40px;
    background-image: url("../images/sp/list/btn.png");
    background-repeat: no-repeat;
    background-size: 50px 40px;
    background-position: 0px 0px;
    position: absolute;
    right: 27px;
    bottom: 3px;
}

#list .list_box li.chara_01
{
    background-image: url("../images/sp/list/list_01.png");
}

#list .list_box li.chara_02
{
    background-image: url("../images/sp/list/list_02.png");
}

#list .list_box li.chara_03
{
    background-image: url("../images/sp/list/list_03.png");
}

#list .list_box li.chara_04
{
    background-image: url("../images/sp/list/list_04.png");
}

#list .list_box li.chara_05
{
    background-image: url("../images/sp/list/list_05.png");
}

#list .list_box li.chara_06
{
    background-image: url("../images/sp/list/list_06.png");
}

#list .list_box li.chara_07
{
    background-image: url("../images/sp/list/list_07.png");
}

#list .list_box li.chara_08
{
    background-image: url("../images/sp/list/list_08.png");
}

#list .list_box li.chara_09
{
    background-image: url("../images/sp/list/list_09.png");
}

#list .list_box li.chara_09 .incentive .item
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 185px;
    height: 45px;
    background-image: url("../images/sp/list/incentive.png");
    background-repeat: no-repeat;
    background-size: 185px 45px;
    background-position: 0px 0px;
    left: 0;
    top: 0;
}

#list .list_box li.chara_09 .incentive .x
{
    left: 150px;
}

#list .list_box li.chara_09 .incentive .num_wrap
{
    width: 46px;
    position: absolute;
    right: 2px;
}

#list .list_box li.chara_10
{
    background-image: url("../images/sp/list/list_10.png");
    background-size: 580px 100px;
    width: 290px;
    height: 100px;
}

#list .list_box li.chara_10 .incentive .item
{
    display: block;
    width: 23px;
    height: 23px;
    background-image: url("../images/sp/list/orb.png");
    background-repeat: no-repeat;
    background-size: 23px 23px;
    background-position: 0px 0px;
    top: 13px;
    left: 109px;
}

#list .list_box li.chara_10 .incentive .x
{
    top: 23px;
    left: 141px;
}

#list .list_box li.chara_10 .incentive .num_box.num0
{
    position: absolute;
    top: 17px;
    left: 170px;
}

#list .list_box li.chara_10 .incentive .num_box.num1
{
    position: absolute;
    top: 16px;
    left: 156px;
}

#list .list_box li.conquerd
{
    background-position: right;
    opacity: 0;
}

#facebook hr
{
    display: block;
    width: 300px;
    height: 20px;
    background-image: url("../images/sp/caution/line.png");
    background-repeat: no-repeat;
    background-size: 300px 20px;
    background-position: 0px 0px;
    border: none;
    margin: 0 auto 18px;
}

#facebook h2
{
    display: block;
    width: 320px;
    height: 50px;
    background-image: url("../images/sp/facebook/title.png");
    background-repeat: no-repeat;
    background-size: 320px 50px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    margin: 0 auto 20px;
}

#facebook .banner a
{
    display: block;
    width: 270px;
    height: 72px;
    background-image: url("../images/sp/facebook/banner.png");
    background-repeat: no-repeat;
    background-size: 270px 72px;
    background-position: 0px 0px;
    margin: 0 auto 12px;
    cursor: pointer;
}

#facebook .info
{
    display: block;
    width: 253px;
    height: 14.5px;
    background-image: url("../images/sp/facebook/h3.png");
    background-repeat: no-repeat;
    background-size: 253px 14.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    margin: 0 auto 33px;
}

#facebook ul
{
    text-align: center;
    width: 256px;
    margin: 5px auto 0;
}

#facebook ul li
{
    display: inline-block;
    width: 256px;
    margin-bottom: 40px;
}

#facebook ul li.live-0422 h4
{
    display: block;
    width: 156.5px;
    height: 11.5px;
    background-image: url("../images/sp/facebook/h4_0422.png");
    background-repeat: no-repeat;
    background-size: 156.5px 11.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    margin: 0 auto 10px;
}

#facebook ul li.live-0423 h4
{
    display: block;
    width: 156.5px;
    height: 11.5px;
    background-image: url("../images/sp/facebook/h4_0423.png");
    background-repeat: no-repeat;
    background-size: 156.5px 11.5px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    margin: 0 auto 10px;
}

#facebook ul li img
{
    width: 256px;
    height: 144px;
}

#facebook ul li iframe
{
    width: 256px;
    height: 144px;
}

#caution h2
{
    display: block;
    width: 320px;
    height: 50px;
    background-image: url("../images/sp/caution/title.png");
    background-repeat: no-repeat;
    background-size: 320px 50px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#caution .container
{
    padding: 14px 26px 10px;
    margin: 0 auto;
    font-size: 8px;
    line-height: 1.6;
    color: #FFF;
    font-weight: normal;
}

#caution hr
{
    display: block;
    width: 300px;
    height: 20px;
    background-image: url("../images/sp/caution/line.png");
    background-repeat: no-repeat;
    background-size: 300px 20px;
    background-position: 0px 0px;
    margin: 0 auto;
    border-width: 0;
}

#sns
{
    width: 100%;
    position: relative;
    margin: 37px 0 35px;
}

#sns .title
{
    pointer-events: none;
    display: block;
    width: 78px;
    height: 78px;
    background-image: url("../images/sp/sns/title.png");
    background-repeat: no-repeat;
    background-size: 78px 78px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    position: relative;
    z-index: 5;
    margin: 0 auto;
}

#sns .facebook
{
    display: block;
    width: 148px;
    height: 58px;
    background-image: url("../images/sp/sns/facebook.png");
    background-repeat: no-repeat;
    background-size: 148px 58px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    position: absolute;
    left: 12px;
    top: 10px;
}

#sns .youtube_btn
{
    display: block;
    width: 148px;
    height: 58px;
    background-image: url("../images/sp/sns/youtube.png");
    background-repeat: no-repeat;
    background-size: 148px 58px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    position: absolute;
    right: 12px;
    top: 10px;
}

#footer
{
    display: block;
    width: 320px;
    height: 400px;
    background-image: url("../images/sp/footer/pattern.png");
    background-repeat: no-repeat;
    background-size: 320px 400px;
    background-position: 0px 0px;
}

#footer .link
{
    background-image: url("../images/sp/footer/bg.png");
    background-repeat: repeat-x;
    background-size: 5px 35px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 0;
    height: 35px;
    overflow: hidden;
}

#footer .link li
{
    display: inline-block;
    color: #FFF;
    font-size: 8px;
}

#footer .link li a
{
    color: #FFF;
    margin: 0 8px;
}

#footer .download ul
{
    width: 152px;
    margin: 30px auto 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#footer .download ul li:nth-of-type(1) a
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 71px;
    height: 21px;
    background-image: url("../images/sp/download/appstore.png");
    background-repeat: no-repeat;
    background-size: 71px 21px;
    background-position: 0px 0px;
}

#footer .download ul li:nth-of-type(2) a
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 71px;
    height: 21px;
    background-image: url("../images/sp/download/googleplay.png");
    background-repeat: no-repeat;
    background-size: 71px 21px;
    background-position: 0px 0px;
}

#footer .download p
{
    width: 280px;
    margin: 0 auto;
    color: #FFF;
    text-align: center;
    font-size: 8px;
    line-height: 16px;
}

#footer .download p:last-child
{
    margin-top: 8px;
}

#footer .xflag
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    display: block;
    width: 61.25px;
    height: 70.7px;
    background-image: url("//www.monster-strike.com/assets/images/common/common_xflag_logo.png");
    background-repeat: no-repeat;
    background-size: 61.25px 70.7px;
    background-position: 0px 0px;
    margin: 35px auto 13px;
}

#footer address
{
    font-size: 8px;
    text-align: center;
    color: #FFF;
}

#dialog
{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    outline: 0;
    z-index: 999;
    opacity: 0;
    pointer-events: auto;
}

#dialog .dialog-box
{
    width: 100%;
    overflow-x: hidden;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    display: -webkit-box;
    display: -moz-box;
    height: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.8);
}

#dialog .dialog-box.firefox
{
    display: block;
    padding: 70px 0 0;
}

#dialog .bg-layer
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    left: 0;
    top: 0;
}

#dialog .dialog-contents .chara
{
    display: none;
    background: url("../images/sp/dialog/chara01.png");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 600px 324px;
    width: 300px;
    height: 324px;
    margin: 0 auto;
    position: relative;
}

#dialog .dialog-contents .chara.chara_01
{
    background-image: url("../images/sp/dialog/chara01.png");
}

#dialog .dialog-contents .chara.chara_02
{
    background-image: url("../images/sp/dialog/chara02.png");
}

#dialog .dialog-contents .chara.chara_03
{
    background-image: url("../images/sp/dialog/chara03.png");
}

#dialog .dialog-contents .chara.chara_04
{
    background-image: url("../images/sp/dialog/chara04.png");
}

#dialog .dialog-contents .chara.chara_05
{
    background-image: url("../images/sp/dialog/chara05.png");
}

#dialog .dialog-contents .chara.chara_06
{
    background-image: url("../images/sp/dialog/chara06.png");
}

#dialog .dialog-contents .chara.chara_07
{
    background-image: url("../images/sp/dialog/chara07.png");
}

#dialog .dialog-contents .chara.chara_08
{
    background-image: url("../images/sp/dialog/chara08.png");
}

#dialog .dialog-contents .chara.chara_09
{
    background-image: url("../images/sp/dialog/chara09.png");
}

#dialog .dialog-contents .chara.conquerd
{
    background-position: right;
}

#dialog .dialog-contents .bar
{
    width: 273px;
    height: 45px;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#dialog .dialog-contents .bar .frame
{
    display: block;
    width: 273px;
    height: 28px;
    background-image: url("../images/sp/list/frame.png");
    background-repeat: no-repeat;
    background-size: 273px 28px;
    background-position: 0px 0px;
    z-index: 5;
}

#dialog .dialog-contents .bar .gauge-wrap
{
    position: absolute;
    z-index: 4;
    left: 8px;
    top: 8px;
    width: 255px;
}

#dialog .dialog-contents .bar .gauge
{
    width: 0;
    background-image: url("../images/sp/list/bar2.png");
    background-size: 13px 11px;
    height: 11px;
    border-radius: 12px;
    box-shadow: inset 1px 0 1px 0 #ffff4d,inset -1px 0px 1px 0px #ffff4d;
}

#dialog .dialog-contents .bar .gauge.conquerd
{
    display: block;
    width: 256px;
    height: 11px;
    background-image: url("../images/sp/list/bar.png");
    background-repeat: no-repeat;
    background-size: 256px 11px;
    background-position: 0px 0px;
}

#dialog .dialog-contents .bar .bg
{
    display: block;
    width: 260px;
    height: 15px;
    background-image: url("../images/sp/list/barguide.png");
    background-repeat: no-repeat;
    background-size: 260px 15px;
    background-position: 0px 0px;
    position: absolute;
    z-index: 3;
    left: 6px;
    top: 6px;
}

#dialog .dialog-contents .bar .num
{
    font-size: 8px;
    color: #FFF;
    z-index: 5;
    display: inline-block;
    width: 273px;
    text-align: center;
    text-indent: 0;
    position: absolute;
    bottom: 0;
}

#dialog .dialog-contents .schedule
{
    width: 260px;
    height: 166px;
    overflow-y: scroll;
    position: absolute;
    top: 138px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 11px;
}

#dialog .dialog-contents .schedule .time
{
    margin: 10px 0 0;
}

#dialog .dialog-contents .dialog-close
{
    display: block;
    width: 79px;
    height: 39px;
    background-image: url("../images/sp/dialog/close.png");
    background-repeat: no-repeat;
    background-size: 79px 39px;
    background-position: 0px 0px;
    margin: 8px auto 0;
    display: none;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
KEYFRAMES_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* KV */
@-webkit-keyframes logoFallInAnim
{
    0%
    {
        opacity: 0;
        -webkit-transform: scale3d(10, 10, 10);
        transform: scale3d(10, 10, 10);
    }

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

@keyframes logoFallInAnim
{
    0%
    {
        opacity: 0;
        -webkit-transform: scale3d(10, 10, 10);
        transform: scale3d(10, 10, 10);
    }

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