body{
    font-family:"游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    line-height:1.5;
    color:#111;
    font-size:1.6rem;
    font-style:normal;
    font-weight:200;
    background: url(../img/main_bg.jpg) center center / cover no-repeat fixed;
    background-color: #000;
}
p{
    margin:0 0 8px;
}
h1,h2,h3,h4,h5,h6{
    font-family:"Robot","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.cf {zoom:1;}
.wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
img{
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0;
}
a:hover,
a:hover img {
    opacity: .8;
    -webkit-opacity: .8;
    -moz-opacity: .8;
    filter: alpha(opacity=80);	/* IE lt 8 */
    -ms-filter: "alpha(opacity=80)"; /* IE 8 */
}
.flex-container {
    display: -webkit-inline-flex; /* Safari */
    display: inline-flex;
}
#pageTop {
    position: fixed;
    bottom: 20px;
    right: 10px;
}
#pageTop a {
    display: block;
    z-index: 999;
    text-decoration: none;
    text-align: center;
}
#pageTop a:hover {
    text-decoration: none;
    opacity: 0.7;
}
*:focus {
    outline: none;
}

.d_pc{ display: block !important;}
.d_sp{ display: none !important;}



/*================================================

            Global Navigation

================================================*/
.global_nav{
    width: 100%;
    background: rgba(0,0,0,0.9);
    position: fixed;
    top: 0;
    font-size: 12px;
    z-index: 999;
}
.global_nav ul{
    width: 900px;
    margin: 0 auto;
}
.global_nav ul li{
    width: 19%;/*24*/
    display: inline-block;
    text-align: center;
    margin: 10px 0;
    box-shadow: 1px 0 rgba(255,255,255,1);
}
.global_nav ul li:last-child{
    box-shadow: none;
}
.global_nav ul li a{
    width: 100%;
    padding: 5px 0;
    display: block;
    color: #fff;
}

.accordion{
    display: none;
}





/*================================================

        Header Contents

================================================*/
header{
    width: 100%;
    min-width: 1034px;
    padding-top:80px;
    padding-bottom: 25px;
    background: url(../img/header_chara.png) center top no-repeat;
}
.container{
    width: 1100px;
    min-width: 1034px;
    margin: 0 auto;
}

.site_logo{
    width: 600px;
    margin-bottom: 150px;
}
.site_logo img{
    width:100%;
}
.site_logo a:hover,
.site_logo a:hover img {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);	/* IE lt 8 */
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
}

/*   App Store Link Space
================================================*/
.header_app_store{
    width: 398px;
    height: 150px;
    background: url(../img/store_bg_sale.png) center top no-repeat;
    background-size: contain;
    overflow: hidden;
}
.header_app_store ul{
    width: 88%;
    margin: 75px auto 0 auto;
}
.header_app_store ul li{
    width: 48.9%;
    display: inline-block;
}
.header_app_store ul li img{
    width: 100%;
}


/*   News & movie Space
================================================*/
.news_tw_sp{ display: none; }
.sub_cont .news_tw,
.sub_cont .movie,
.sub_cont .wn_space{
    float: left;
}
.news_tw{
    width: 398px;
    height: 261px;
    background: url(../img/tw_bg.png) center top no-repeat;
    overflow: hidden;
}
.news_tw div{
    width: 351px;
    margin: 55px 0 0 24px;
    height: 185px;
    overflow: hidden;
}
.news_tw a{
    margin: 0 auto 0 auto;
    display: block;
}
.movie{
    background: url(../img/movie_bg.png) center center no-repeat;
    background-size: contain;
}
.movie a{
    width: 450px;
    display: block;
}
.movie img{
    width: 100%;
}







/*   What'S New
================================================*/
.wn_space{
    width: 653px;
    height: 211px;
    padding: 0 23px 50px;
    background: url("../img/news_bg.png") center top no-repeat;
    background-size: cover;
    color: #fff;
    line-height: 1;
}
a.news_list{
    padding: 3px ;
    color: #f7ca6b !important;
    position: relative;
    top: 14px;
    left: 83%;
}
.wn_space ul{
    width: 100%;
    height: 194px;
    margin: 20px 0px 0px 0px;
    overflow: hidden;
}
.wn_space ul li{
    height: 50px;
    padding: 7px 0 8px 0;
    border-bottom: solid 1px #64472c;
    overflow: hidden;
}
.wn_space ul li:last-child{
    border: none;
}
.wn_space a{
    color: #fff;
    font-size: 14px;
}
.category{
    padding: 3px 20px;
    font-size: 13px;
}
.important{ background: #d20000; }
.maintenance{ background: #d87500; }
.bug{ background: #4d4d4d; }
.day{
    padding: 3px 5px;
    font-size: 14px;
}

/*   What's New List & Detail
================================================*/
.regis_page_wn{
    width: 914px;
    min-height: 414px;
    margin: 150px auto 0;
    overflow: hidden;
    color: #fff;
}
.wn_body{
    width: 100%;
    min-height: 414px;
    background: url("../img/wn_body.png") center center repeat-y;
    background-size: contain;
    line-height: 1;
}
.wn_body ul{
    width: 93%;
    margin: 0 auto;
}
.wn_body ul a{
    padding: 7px 0 0 10px;
    color: #fff;
    font-size: 17px;
    display: block;
}
.wn_body ul li{
    padding: 15px 0 18px;
    border-bottom: solid 1px #64472c;
}
.wn_body ul li:last-child{
    border: none;
}
/*
.wn_body div,
.wn_body a{
    width: 85%;
    margin: 0 auto;
}
.wn_body a{
    padding: 10px 0 0;
    display: block;
}
*/
.wn_detail_header{
    width: 100%;
    font-size: 18px;
    text-align: center;
    color: #f7ca6b;
    background: url("../img/wn_detail_header.png") center top no-repeat;
    background-size: 100%;
    overflow: hidden;
}
.wn_detail_header p{
    width: 93%;
    margin: 0 auto;
    padding: 30px 0 10px;
    border-bottom: solid 1px #64472c;
    overflow: hidden;
}
.wn_detail{
    width: 90%;
    padding: 20px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
}
.wm_backtop{
    width: 500px;
    height: 50px;
    margin: 20px auto 100px;
}
.wm_backtop a{
    float: left;
    margin: 0 10px;
}
.backtop a img{ width: 100%; display: block; }




/*   事前登録受付中 < .header_pre_regis
================================================*/
.header_pre_regis_sp{ display: none; }
.header_pre_regis{
    width: 100%;
    height: 222px;
    margin-top: 30px;
    background: url(../img/pre-regis_bg.png) center bottom repeat-x;
}
.header_pre_regis_title{
    width: 456px;
    margin: 0 auto;
}
.header_pre_regis_title img{
    width: 100%;
    text-align: center;
}
.header_pre_regis ul{
    width: 900px;
    margin: 15px auto 0;
}
.header_pre_regis ul li{
    width: 49%;
    display: inline-block;
    text-align: center;
}
.header_pre_regis ul li img{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.header_pre_regis ul li:first-child{
    box-shadow: 2px 0 rgba(84,64,40,1);
}
.header_pre_regis ul li a{
    width: 100%;
    display: block;
}








/*================================================

        Main Contents

================================================*/
main{
    width: 100%;
    overflow: hidden;
}



/*   World
================================================*/
section.world{
    width: 100%;
    min-width: 1034px;
    height: 1050px;
    padding-top:180px;
    background: url(../img/world_bg.png) center top no-repeat;
    background-size: cover;
}
section.world .container img{
    margin: 0 auto;
}
section.world .title{
    margin-bottom: 60px;
}


/*   System
================================================*/
.slider_sp{ display: none !important;}
section.system{
    width: 100%;
    min-width: 1034px;
    height: 900px;
    padding-top:160px;
    overflow: hidden;
}
section.system .title{
    margin-bottom: 60px;
}
section.system .title img{
    margin: 0 auto;
}


/*   Character
================================================*/
section.character{
    width: 100%;
    min-width: 1034px;
    height: 980px;
    background: url(../img/chara_bg.png) center top no-repeat;
    background-size: cover;
    padding-top:100px;
    padding-bottom:100px;
    overflow: hidden;
}
section.character .title{
    z-index: 99;
    position: relative;
}
section.character .title img{
    margin: 0 auto;
}
#character div.container{
    width:100%;
    position: relative;
}
.cahara_nav{
    width: 100%;
    height: 89px;
    padding-top: 4px;
/*    background: url(../img/chara_nav_bg.jpg) center top repeat-x;*/
    position:absolute;
    top:50px;
}
.tab{
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}
.tab li{
    width:20%;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);	/* IE lt 8 */
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    transition: 0.2s linear;
    float: left;
}
.tab li img{
    width:100%;
    margin: 0 auto;
}
.tab li.select img{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);	/* IE lt 8 */
    -ms-filter: "alpha(opacity=0)"; /* IE 8 */
    filter: grayscale(0%);
    filter: none;
}
.charanav01{
    background: url(../img/chara_nav01_on.png) center top no-repeat;
    background-size: cover;
}
.charanav02{
    background: url(../img/chara_nav02_on.png) center top no-repeat;
    background-size: cover;
}
.charanav03{
    background: url(../img/chara_nav03_on.png) center top no-repeat;
    background-size: cover;
}
.charanav04{
    background: url(../img/chara_nav04_on.png) center top no-repeat;
    background-size: cover;
}
.charanav05{
    background: url(../img/chara_nav05_on.png) center top no-repeat;
    background-size: cover;
}
.content li{
    width: 100%;/*1900*/
    min-width: 1034px;
    height: 1199px;
    margin: 0 auto;
    position: relative;
    top: 0px;/*-136*/
    z-index: 0;
}
.content li img{display: none;}
.chara01{
    background: url(../img/chara01.png) center top no-repeat;
}
.chara02{
    background: url(../img/chara02.png) center top no-repeat;
}
.chara03{
    background: url(../img/chara03.png) center top no-repeat;
}
.chara04{
    background: url(../img/chara04.png) center top no-repeat;
}
.chara05{
    background: url(../img/chara05.png) center top no-repeat;
}
.hide {display:none;}


/*   Pre Regis
================================================*/
section.pre_regis{
    width: 100%;
    min-width: 1034px;
    padding-top: 150px;
}
section.pre_regis .title img{
    margin: 0 auto;
}
.incentive{
    width: 1034px;
/*    height: 837px;*/
    margin: 0 auto;
/*    padding-top: 40px;*/
/*    background: url(../img/pre-regis_incentive_bg.png) center center no-repeat;*/
}
.incentive img{
    margin:  13px auto;
}

.pre_regis_mini{
    width: 1034px;
    margin:  0 auto;
    padding-top: 93px;
    padding-bottom: 20px;
    background: url(../img/pre-regis_bg_min.png) center top no-repeat;
}
.pre_regis_mini ul{
    width:100%;
    
}
.pre_regis_mini ul li{
    width: 49%;
    display: inline-block;
}
.pre_regis_mini ul li:first-child{
    box-shadow: 2px 0 rgba(84,64,40,1);
}
.pre_regis_mini ul li img{
    width: 70%;
    margin:  0 auto;
}




/*================================================

        Regis Page

================================================*/
.regis_page_sp{ display: none; }
.regis_main_title{
    margin: 150px 0 20px;
}
.regis_main_title img{
    margin: 0 auto;
}
.backtop{
    width: 221px;
    height: 50px;
    margin: 20px auto 100px;
}
.backtop img{ width: 100%; display: block; }
.regis_page{
    width: 914px;
    height: 414px;
    margin: 0 auto;
    background: url(../img/regis_bg.png) no-repeat;
    overflow: hidden;
    color: #fff;
}
.regis_container{
    width: 100%;
    overflow: hidden;
}
.regis_page .title{
    width: 850px;
    margin: 35px auto 0;
    padding:0 0 15px;
    border-bottom:solid 1px #64472c;
}
.regis_page .title img{
    margin: 0 auto;
}
.regis_cont{
    width: 914px;
    margin: 0 auto;
    overflow: hidden;
}
.rc_tw{ margin-top: 30px; }

.rc_tw .submit_area{
    width: 50%;
    margin: 10px auto 0;
    overflow: hidden;
    text-align: center;
}
.rc_tw .submit_area input{
    width: 100%;
    margin: 0 auto;
}
.tw_cbox{
    width: 100%;
    text-align: center;
    font-size: .7em;
}


.regis_cont .regis_tw{
    width: 50%;
    margin: 0 auto;
    display: block;
}
.regis_cont a img{
    width: 100%;
    margin: 0 auto;
}
.regis_message{
    width: 100%;
    margin: 10px 0 10px 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
}
.regis_message span{
    color: #f7ca6b;
    font-size: 25px;
}
.regis_caution{
    width: 70%;
    margin: 10px auto 0;
    font-size: 12px;
}
.regis_caution a{
    color: #fff;
    text-decoration: underline;
}










/*   Regis Mail
================================================*/
.input_area{
    width: 70%;
    margin: 0 auto;
    border-radius:10px;
    overflow: hidden;
}
.input_area input{
    width: 98%;
    padding: 1.7% 1%;
    font-size: 15px;
    border: none;
    border-radius:10px;
}
.error_red{
    color: red;
    font-size: 0.6em;
    text-align: center;
    margin-bottom: 0;
}
.input_area p{
    width: 98%;
    padding: 1.7% 1%;
    font-size: 15px;
    border-radius:10px;
    color: #fff;
    background: #000;
    text-align: center;
}
.submit_area{
    margin: 10px auto 0;
    overflow: hidden;
    text-align: center;
}
.submit_area input{
    width: 25%;
    margin: 0 auto;
}
.rc_mail{
    margin-top:20px;
}


.tw_bn{
    width: 50%;
    display: block;
    margin: 0 auto;
}
.tw_bn img{
    width: 100%;
}





/*================================================

        Footer

================================================*/
footer{
    width: 100%;
/*    margin-top: 150px;*/
    padding-top: 10px;
    background: rgba(0,0,0,0.9);
}
.app_detail{
    width: 520px;
    margin: 0 auto 50px;
}
.app_detail .title{
    padding-bottom: 13px;
    margin-bottom: 20px;
    border-bottom: solid 1px #fff;
}
.app_detail .title img{
    margin: 0 auto;
}
.app_detail ul li{
    display: inline-block;
}
.icon{
    margin-right: 10px;
}
.detail{
    padding-top: -10px;
}
.app_dl{
    width: 100%;
    margin: 20px auto 0;
}
.app_dl li{
    width:48%;
    margin: 0 auto;
    padding: 0;
}
.app_dl li:first-child{
    margin-right:2%;
}
.app_dl li img{
    width: 100%;
    margin: 0 auto;
}
.footer_nav{
    width: 100%;
    background: #000;
    color:#fff;
    font-size: 15px;
}
.footer_nav a{
    color: #fff;
    vertical-align: top;
}
.footer_nav div{
    width: 1034px;
    margin: 0 auto;
    padding: 10px 0 0;
    vertical-align: top;
}
.footer_nav ul{
    float: left;
}
.footer_nav p{
    padding: 5px 0 0;
}
.footer_nav p,
.company_logo{
    float: left;
    margin-right: 30px;
}
.footer_nav div.company_logo{
    width: auto;
    padding: 0;
    margin: 0 0 8px;
}
.footer_nav p.copy{
    float: right;
    margin-right: 0px;
}
.footer_nav li{
    display: inline-block;
    text-align: left;
    margin-right: 30px;
}
.footer_nav .company_logo img{
    width: 80%;
}
.sc_id{
    width: 1034px;
    margin: 0 auto 60px;
    text-align: right;
    font-size: 0.6em;
    color: #fff;
    font-weight: bold;
}


.company_logo a:hover,
.company_logo a:hover img {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);	/* IE lt 8 */
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
}





/*================================================

        Privacy Policy

================================================*/
.privacypolicy{
    width: 960px;
    margin: 180px  auto 0;
    padding: 3% 0;
/*    background: rgba(255,255,255,0.8);*/
}
.privacypolicy h2{
    width: 80%;
    margin: 0 auto 2%;
    padding: 0 0 1%;
    text-align: center;
}
.privacypolicy h3,
.pp_cont{
    width: 70%;
}

.privacypolicy h3{
    margin: 0 auto 1%;
    text-align: left;
    font-size: 20px;
    border-bottom: solid 1px #000;
}
.pp_cont{
    margin: 0 auto 3%;
    font-size: 15px;
}
.cp ul{
    width: 40%;
    margin: 0 auto;
    padding:1% 0;
}
.cp ul:first-child{ padding-top: 0; }
.cp ul li{
    display: block;
    font-size: 15px;
}
.cp .cp_title{
    width: 20%;
    text-align: left;
    vertical-align: top;
    border-right: solid 1px #000;
}
.cp .cp_cont{
    width: 69%;
    padding: 0 0 0 3%;
    text-align: left;
    vertical-align: top;
}


.ct ul{
    width: 60%;
    margin: 0 auto;
    padding:1% 0;
}
.ct ul li{
    display: block;
    font-size: 15px;
}
div.ct .cp_title{
    width: 100%;
    font-size: 0.6em;
    border-right: none;
    padding: 5px 0 0 0;
}
.privacypolicy span{
    font-size: 1em;
    display: inline-block;
    padding:1px 0;
    
}
.privacypolicy span.required{
    font-size: 0.7em;
    color:#fff;
    background:red;
    border-radius: 5px;
    margin-top: -10px;
    padding:1px 5px 2px 5px;
    position: relative;
    top: -3px;
}
div.cp .cp_cont{
    width: 100%;
    padding: 0;
}
.ct h2{
    width: 90%;
    margin: 0 auto 0;
    padding: 0 0 1%;
    text-align: center;
    color:#fff;
    border-bottom: solid 1px #64472c;
    font-weight: 200;
}
.ct h3{
    border:none;
    text-align: center;
    font-size: 0.5em;
    font-weight: 200;
}
.ct a{
    color: #fff;
    text-decoration: underline;
}
.ct input{
    width: 97.5%;
    padding:2% 1%;
    border-radius: 5px;
    border: solid 1px #999;
}
.ct textarea{
    width: 97.5%;
    resize: vertical;
    padding:2% 1%;
    border-radius: 5px;
    border: solid 1px #999;
    
}
.ct .tw_cbox{
    padding: 1% 0 2%;
}
.ct .tw_cbox input{
    width: auto;
    text-align: center;
}
.ct .tw_cbox label{
    font-size: 1em;
}
.error_area{
    width: 90%;
    margin: 0 auto;
    margin-top:30px;
}
.ct_submit{
    width: 29%;
    margin: 10px auto 0;
}
.ct_submit input{
    padding: 4% 2%;
    font-size: .6em;
    text-align: center;
    color: #fff;
    background: #000;
}
.fin_check{
    width:50%;
}
.fin_check input{
    padding: 3% 2%;
    width: 49%;
    display: inline-block;
}
input.send{
    background: #F8B62D;
    color: #000;
    font-weight: bold;
    border: solid 2px #000;
}
.m_check{
    padding:1.2%;
    color:#000;
    background: #fff;
    border-radius: 5px;
    line-height: 1.7;
}
.ct .rc_tw{
    margin:0;
}
.regis_top{
    width: 100%;
    padding: 5% 0 0;
    background: url(../img/regis_bg_top.png) center top no-repeat;
    background-size:cover;
}
.regis_bottom{
    width: 100%;
}
.regis_bottom img{
    width: 100%;
    display: inline;
    line-height: 0;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.regis_body{
    width: 100%;
    padding: 3% 0;
    background: url(../img/regis_bg_body.png) center top repeat-y;
    background-size: contain;
    color: #fff;
}

















/*================================================
==================================================

        条件切替以下SP用CSS

==================================================
================================================*/
@media screen and (max-width: 828px) {
    body::before {
        background:url('../img/main_bg_sp.jpg') no-repeat left top;
        background-size: 100% auto;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-bottom: 108px;
        content: "";
        z-index: -1;
    }
    
    .d_pc{ display: none !important;}
    .d_sp{ display: block !important;}
    
    #pageTop{ display: none !important; }
    /*================================================

    Global Navigation

    ================================================*/
    .global_nav{
        width: 100%;
        background: rgba(0,0,0,0.9);
        position: fixed;
        top: 0;
        font-size: 12px;
        z-index: 9999;
        display: none;
    }
    .global_nav ul{
        width: 100%;
        margin: 0 auto;
    }
    .global_nav ul li{
        width: 24%;
        display: inline-block;
        text-align: center;
        margin: 10px 0;
/*        box-shadow: 1px 0 rgba(255,255,255,1);*/
    }
    .global_nav ul li:last-child{
        box-shadow: none;
    }
    .global_nav ul li a{
        width: 100%;
        padding: 5px 0;
        display: block;
        color: #fff;
    }
    
    
    /*ACCORDION*/
    div.accordion {
        width: 100%;
        display: block;
        position: fixed;
        top:0;
        z-index: 999;
    }
    div.accordion .toggle{
        text-align: center;
    }
    div.accordion > ul > li > a {
        display: block;
        color: #fff;
        font-size: 16px;
        text-decoration: none;
        background-color: #000;
        border-bottom: 1px solid #fff;
        cursor: pointer;
        padding: 10px 12px;
        position: relative;
    }
    div.accordion > ul > li > a:hover{
        background-color: #000;
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);	/* IE lt 8 */
        -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    }
    div.accordion > ul > li > a:after, div.accordion > ul > li > a.active:after{
        font-size: 12px;
        position: absolute;
        right: 12px;
        top: 12px;
        color: #fff;
    }
    div.accordion > ul > li > a:after{
        content: "▼";
    }
    div.accordion > ul > li > a.active:after{
        content: "▲";
    }
    div.accordion > ul > li > ul {
        display: none;
    }
    div.accordion > ul > li > ul > li > a{
        display: block;
        color: #fff;
        font-size: 14px;
        text-align: center;
        background-color: #000;
        border-bottom: 1px solid #fff;
        padding: 6px 12px;
        position: relative;
    }
    div.accordion > ul > li > ul > li > a:hover{
        background-color: #000;
        color:#fff;
    }
    
    
    /*================================================

    Header Contents

    ================================================*/
    header{
        width: 100%;
        min-width: 100%;
        padding-top:130%;
        background: url(../img/header_chara_sp.png) center top no-repeat;
        background-size: contain;
    }
    .container{
        width: 100%;
        min-width: 100%;
        margin: 0 auto;
    }

    .site_logo{
        width: 736px;
        height: 427px;
        display: none;
    }
    .site_logo img{
        width:100%;
    }
    .site_logo a:hover,
    .site_logo a:hover img {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);	/* IE lt 8 */
        -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    }

    /*   App Store Link Space
    ================================================*/
    .header_app_store{
        width: 100%;
        height: auto;
        padding-bottom:6%;
        background: url(../img/store_bg_sale.png) center top no-repeat;
        background-size: cover;
        clear: both;
        position: static;
        top: 0;
        left: 0;
    }
    .header_app_store ul{
        width: 88%;
        margin: 19% auto 5% auto;
        clear: both;
    }
    .header_app_store ul li{
        width: 50%;
        display: block;
        float: left;
    }
    .header_app_store ul li img{
        width: 96%;
        margin: 0 auto;
    }


    /*   News & movie Space
    ================================================*/
    .sub_cont div{
        display: block;
    }
    .news_tw{
        width: 100%;
        height: auto;
        background: url(../img/news_bg.png) center top no-repeat;
        background-size: 100% 100%;
        display: none !important;
    }
    .news_tw div{
        width: 87%;
        margin: 15% auto 5%;
        overflow: hidden;
    }
    .news_tw a{
        margin: 0 auto 0 auto;
        display: block;
    }
    
    .news_tw_sp,
    .news_top,
    .news_body,
    .news_bottom{
        width: 99.4%;
        margin: 0 auto;
    }
    .news_tw_sp{
        display: block;
    }
    .news_top img,
    .news_bottom img{
        width: 100%;
    }
    .news_body{
        padding-top: 1%;
        overflow: hidden;
        background: url(../img/news_sp_body.png) center center repeat-y;
        background-size: contain;
    }
    .tw_tl{
        width: 90%;
        margin: 0 auto;
    }
    
    
    
    .movie{
        width: 100%;
        height: auto;
        padding-top: 0px;
        margin-left: 0;
        background: url(../img/movie_bg.png) center center no-repeat;
        background-size: cover;
    }
    .movie a,
    .movie img{
        width: 100%;
    }
    
    
    
    
    
    
    
    /*   What'S New
    ================================================*/
    .wn_space{
        width: 99%;
        height: auto;
        margin: 0 auto;
        padding: 0 0 0 0.6%;
        background: none;
        color: #fff;
        line-height: 1;
    }
    .wn_space img{
        width: 100%;
    }
    .wn_space_body{
        background: url("../img/news_sp_body.png") center center repeat-y;
        background-size: contain
    }
    a.news_list{
        padding: 3px ;
        color: #f7ca6b !important;
        position: relative;
        top: 0;
        left: 65%;
    }
    .wn_space ul{
        width: 90%;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
    }
    .wn_space ul li{
        height: auto;
        padding: 7px 0 8px 0;
        border-bottom: solid 1px #64472c;
        overflow: hidden;
    }
    .wn_space ul li:last-child{
        border-bottom: solid 1px #64472c;
    }
    .wn_space a{
        color: #fff;
        font-size: 14px;
    }
    .category{
        padding: 3px 20px;
        font-size: 13px;
    }
    .important{ background: #d20000; }
    .maintenance{ background: #d87500; }
    .bug{ background: #4d4d4d; }
    .day{
        padding: 3px 5px;
        font-size: 14px;
    }

    /*   What's New List & Detail
    ================================================*/
    .regis_page_wn{
        width: 100%;
        min-height: auto;
        margin: 20% auto 0;
        overflow: hidden;
        color: #fff;
    }
    .regis_page_wn ul li:last-child{
        border: none;
    }
    .wn_body{
        width: 100%;
        min-height: 414px;
        background: url("../img/wn_body.png") center center repeat-y;
        background-size: contain;
        line-height: 1;
    }
    .wn_body ul{
        width: 93%;
        margin: 0 auto;
    }
    .wn_body ul a{
        padding: 7px 0 0 10px;
        color: #fff;
        font-size: 17px;
        display: block;
    }
    .wn_body ul li{
        padding: 15px 0 18px;
        border-bottom: solid 1px #64472c;
    }
    .wn_body ul li:last-child{
        border: none;
    }
    .wn_detail_header{
        width: 100%;
        font-size: .6em;
        text-align: center;
        color: #f7ca6b;
        background: none;
        background-size: cover;
        overflow: hidden;
        line-height: 1.3;
    }
    .wn_detail_header p{
        width: 90%;
        margin: 0 auto;
        padding: 0px 0 10px;
        border-bottom: solid 1px #64472c;
        overflow: hidden;
    }
    .wn_detail{
        width: 90%;
        padding: 20px;
        margin: 0 auto;
        font-size: 14px;
        line-height: 1.5;
    }
    .wm_backtop{
        width: 90%;
        height: auto;
        margin: 2% auto 8%;
    }
    .wm_backtop a{
        width: 48%;
        float: left;
        margin: 0 1%;
    }
    .wm_backtop a img{ width: 100%; display: block; }


    
    
    
    
    
    

    /*   事前登録受付中 < .header_pre_regis
    ================================================*/
    .header_pre_regis{ display: none; }
    .header_pre_regis_sp{
        width: 100%;
        height: auto;
        margin-top: 3%;
        background: url(../img/pre-regis_bg.png) center bottom repeat-x;
        background-size:contain;
        display: block;
        overflow: hidden;
    }
    .header_pre_regis_title{
        width: 70%;
        margin: 0 auto;
    }
    .header_pre_regis_title img{
        width: 100%;
        text-align: center;
    }
    .header_pre_regis_sp ul{
        width: 95%;
        margin: 2% auto 2%;
    }
    .header_pre_regis_sp ul li{
        width: 50%;
        display: block;
        text-align: center;
        float: left;
    }
    .header_pre_regis_sp ul li img{
        width: 95%;
        margin: 0 auto;
        text-align: center;
    }
    .header_pre_regis_sp ul li:first-child{
/*        box-shadow: 1px 0 rgba(84,64,40,1);*/
    }
    .header_pre_regis_sp ul li a{
        width: 100%;
        display: block;
    }


    
    
    
    
    
    /*================================================

    Main Contents

    ================================================*/
    main{
        width: 100%;
        overflow: hidden;
    }


    /*   World
    ================================================*/
    section.world{
        width: 100%;
        min-width: 100%;
        height: auto;
        margin-top: 5%;
        padding:20% 0;
        background: url(../img/world_bg.png) center top no-repeat;
        background-size: cover;
        overflow: hidden;
    }
    section.world .container img{
        width: 90%;
        margin: 0 auto;
    }
    section.world .title{
        width: 60%;
        margin: 0 auto;
        margin-bottom: 5%;
    }



    /*   System
    ================================================*/
    .slider_sp{ display: block !important;}
    .slider{display: none !important;}    
    section.system{
        width: 100%;
        min-width: 100%;
        height: auto;
        padding:20% 0;
    }
    section.system .title{
        width: 60%;
        margin: 0 auto;
        margin-bottom: 5%;
    }
    section.system .title img{
        width: 90%;
        margin: 0 auto;
    }
    section.system .slider_sp,
    section.system .slider_sp div,
    section.system .slider_sp img{
        width: 90%;
        margin: 0 auto;
    }


    /*   Character
    ================================================*/
    section.character{
        width: 100%;
        min-width: 100%;
        height: 100%;
        background: url(../img/chara_bg_sp.png) center top no-repeat;
        background-size: cover;
        padding:0% 0 0;
        overflow: hidden;
    }
    section.character .title{
        width: 60%;
        margin: 10% auto 0;
        position: relative;
    }
    section.character .title img{
        width: 90%;
        margin: 0 auto;
    }
    #character div.container{
        width:100%;
        position: relative;
    }
    .cahara_nav{
        width: 100%;
        height: auto;
        padding: 1% 0;
/*        background: url(../img/chara_nav_bg.jpg) center top repeat-x;*/
        background-size: contain;
        position:absolute;
        bottom:4%;
    }
    .tab{
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .tab li{
        width:20%;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        filter: grayscale(100%);
        transition: 0.2s linear;
/*        float: left;*/
        display: inline-block;
    }
    .tab li img{
        width:100%;
        margin: 0 auto;
    }
    .tab li.select{
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        filter: grayscale(0%);
    }
    .content{ 
        width:100%;
        height:auto;
        display: block;
    }
    .content li{
        width: 100%;/*1900*/
        min-width: 100%;
        height: auto;
        margin: 0% auto 0;
        position: relative;
        overflow: hidden;
        top: 60px;
    }
    .content li img{
        width: 100%;
        display: block;
    }
    .chara01{
        background: none;
     }
    .chara02{
        background: none;
     }
    .chara03{
        background: none;
     }
    .chara04{
        background: none;
     }
    .chara05{
        background: none;
     }
    .hide {display:none;}


    /*   Pre Regis
    ================================================*/
    section.pre_regis{
        width: 100%;
        min-width: 100%;
        height:auto;
        padding: 10% 0;
    }
    section.pre_regis .title{
        width: 98%;
        margin: 0 auto;
        margin-bottom: 2%;
    }
    section.pre_regis .title img{
        width: 100%;
        margin: 0 auto;
    }
    .incentive{
        width: 98%;
        height: auto;
        margin: 0 auto;
        padding: 0% 0;
/*        background: url(../img/pre-regis_incentive_bg.png) center center no-repeat;*/
        background-size:100% 100%;
    }
    .incentive img{
     width: 100%;
    }
    .incentive ul{
        padding: 2% 0;
    }
    .incentive ul li img{
        width:98%;
        margin: 2% auto;
    }

    .pre_regis_mini{
        display: none;
/*
        width: 1034px;
        margin:  0 auto;
        padding-top: 93px;
        padding-bottom: 20px;
        background: url(../img/pre-regis_bg_min.png) center top no-repeat;
*/
    }
    .pre_regis_mini ul{
        width:100%;

    }
    .pre_regis_mini ul li{
        width: 49%;
        display: inline-block;
    }
    .pre_regis_mini ul li:first-child{
        box-shadow: 2px 0 rgba(84,64,40,1);
    }
    .pre_regis_mini ul li img{
        width: 70%;
        margin:  0 auto;
    }

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /*================================================

            Regis Page

    ================================================*/
    .regis_main_title{
        width: 98%;
        margin: 25% auto 3%;
    }
    .regis_main_title img{
        width: 100%;
        margin: 0 auto;
    }
    .backtop{
        width: 50%;
        height: auto;
        margin: 0 auto 3%;
    }
    .backtop img{
        width: 100%;
        display: block;
    }
    .regis_page{
        width: 90%;
        height: 100%;
        margin: 0 auto;
        background: url(../img/regis_bg_min.png) no-repeat;
        background-size: contain;
        overflow: hidden;
        color: #fff;
        display: none;
    }
    .regis_container{
        width: 100%;
        overflow: hidden;
    }
    .regis_page .title{
        width: 85%;
        margin: 35px auto 0;
        padding:0 0 15px;
        border-bottom:solid 1px #64472c;
    }
    .regis_page .title img{
        width: 100%;
        margin: 0 auto;
    }
    .regis_cont{
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .rc_tw{ margin-top: 0%; }
    
    .rc_tw .submit_area{
        width: 70%;
        margin: 0 auto 3%;
        overflow: hidden;
        text-align: center;
    }
    .rc_tw .submit_area input{
        width: 100%;
        margin: 0 auto;
    }
    .tw_cbox{
        width: 100%;
        text-align: center;
        font-size: .5em;
    }
    
    
    .regis_cont a img{
        width: 90%;
        margin: 0 auto;
    }
    .regis_message{
        width: 90%;
        margin: 10px auto;
        text-align: center;
        font-size: 0.5em;
        line-height: 1.6;
    }
    .regis_message span{
        color: #f7ca6b;
        font-size: 1.5em;
    }
    .regis_caution{
        width: 90%;
        margin: 10px auto 0;
        font-size: 12px;
    }
    .regis_caution a{
        width: 100%;
        color: #fff;
        text-decoration: underline;
    }

    /*   Regis Mail
    ================================================*/
    .input_area{
        width: 90%;
        margin: 0 auto;
        border-radius:5px;
        overflow: hidden;
    }
    .error_red{
        color: red;
        font-size: 0.5em;
        text-align: center;
        margin-bottom: 0;
    }
    .input_area input{
        width: 98%;
        padding: 1.7% 1%;
        font-size: 15px;
        border: none;
        border-radius:5px;
    }
    .input_area p{
        width: 98%;
        margin:0;
        padding: 1.7% 1%;
        font-size: 0.5em;
        border-radius:10px;
        color: #fff;
        background: #000;
        text-align: center;
    }
    .submit_area{
        margin: 1% auto 0;
        overflow: hidden;
        text-align: center;
    }
    .submit_area input{
        width: 40%;
        margin: 0 auto;
    }
    .rc_mail{
        margin-top:20px;
    }
    
    
    /*   Regis Page SP
    ================================================*/
    .ds_none{ display: none;}
    .regis_page_sp{
        width: 100%;
        display: block;
    }
    .regis_top{
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 5% 0 0;
        background: url(../img/regis_bg_top.png) center top no-repeat;
        background-size:cover;
    }
    .regis_top h3{
        width: 90%;
        margin: 0 auto;
        padding:0 0 1%;
        border-bottom:solid 1px #64472c;
        font-size: 0.3em;
    }
    .regis_top h3 img{
        width: 50%;
        margin: 0 auto;
    }
    
    .regis_bottom{
        width: 100%;
    }
    .regis_bottom img{
        width: 100%;
        display: inline;
        line-height: 0;
        margin: 0;
        padding: 0;
        vertical-align: top;
    }
    
    .regis_body{
        width: 100%;
        padding: 3% 0;
        background: url(../img/regis_bg_body.png) center top repeat-y;
        background-size: contain;
        color: #fff;
    }
    .regis_body .regis_tw{
        width: 80%;
        margin: 0 auto;
        display: block;
    }
    .regis_body .regis_tw img{
        width: 100%;
    }
    
    .tw_bn{
        width: 80%;
        display: block;
        margin: 0 auto;
    }
    .tw_bn img{
        width: 100%;
    }
    
    
    
    
    
    
    
    
    /*================================================

    Footer

    ================================================*/
    footer{
        width: 100%;
        margin-top: 0px;
        padding-top: 5%;
        background: rgba(0,0,0,0.9);
    }
    .app_detail{
        width: 90%;
        margin: 10% auto 5%;
    }
    .app_detail .title{
        padding-bottom: 4%;
        margin-bottom: 4%;
        border-bottom: solid 1px #fff;
    }
    .app_detail .title img{
        margin: 0 auto;
    }
    .app_detail ul{
        clear: both;
    }
    .app_detail ul li{
        display: block;
        float:left;
    }
    .app_detail ul li img{
        width: 100%;
        margin: 0 auto;
    }
    .icon{
        width: 25%;
        margin-right: 2%;
    }
    .detail{
        width: 70%;
        padding-top: 0px;
    }
    .app_dl{
        width: 100%;
        margin: 3% 0 0;
        clear: both;
    }
    .app_dl li{
        width:50%;
        margin: 0 0 10%;
        padding: 0;
        display: block;
    }
    .app_dl li:first-child{
        margin-right:0;
    }
    .app_dl li img{
        width: 95% !important;
        margin: 0 auto;
        text-align: center;
    }
    .footer_nav{
        width: 100%;
        background: #000;
        color:#fff;
        font-size: 0.4em;
        clear: both;
    }
    .footer_nav a{ color: #fff; }
    .footer_nav div{
        width: 100%;
        margin: 0 auto;
        padding: 10px 0 0;
    }
    .footer_nav ul{
        width: 95%;
        float: none;
        margin: 0 auto 10px;
        font-size: 1em;
    }
    .footer_nav li{
        width: 33%;
        margin: 0 auto;
        float: left;
        margin-right: 0;
        text-align: center;

    }
    .footer_nav p,
    .company_logo{
        width: 33%;
        text-align: center;
        float: left;
        margin-right: 0px;
    }
    .footer_nav div.company_logo{
        width: 33%;
        padding: 0;
        margin: 0 0 8px;
    }
    .footer_nav p.copy{
        width: 100%;
        float: right;
        margin-right: 0px;
        text-align: center;
    }
    .footer_nav .company_logo img{
        width: 60%;
        margin: 0 auto;
    }
    .sc_id{
        width: 100%;
        margin: 0 auto;
        text-align: right;
        font-size: 0.5em;
        color: #fff;
    }
    
    
    
    
    
    /*================================================

    Privacy Policy

    ================================================*/
    .privacypolicy{
        width: 90%;
        margin: 18% auto 8%;
        padding: 3% 0;
/*        background: rgba(255,255,255,0.8);*/
    }
    .privacypolicy h2{
        width: 80%;
        margin: 0 auto ;
        padding: 0 0 0%;
        text-align: center;
        font-size: 0.8em;
    }
    .privacypolicy h3,
    .pp_cont{
        width: 90%;
    }

    .privacypolicy h3{
        margin: 0 auto 1%;
        text-align: left;
        font-size: 0.5em;
/*        border-bottom: solid 1px #000;*/
    }
    .pp_cont{
        margin: 0 auto 4%;
        font-size: 0.5em;
    }
    .cp ul{
        width: 90%;
        margin: 0 auto;
        padding:1% 0;
    }
    .cp ul:first-child{ padding-top: 0; }
    .cp ul li{
        display: inline-block;
        font-size: 0.5em;
    }
    .cp .cp_title{
        width: 25%;
        text-align: left;
        vertical-align: top;
        border-right: solid 1px #000;
    }
    .cp .cp_cont{
        width: 40%;
        padding: 0 0 0 3%;
        text-align: left;
        vertical-align: top;
    }


    .ct ul{
        width: 90%;
        margin: 0 auto;
        padding:1% 0;
    }
    .ct ul li{
        display: block;
        font-size: 0.5em;
    }
    div.ct .cp_title{
        width: 100%;
        border-right: none;
    }
    div.ct .cp_cont{
        width: 100%;
        padding: 0;
    }
    .ct input{
        width: 97%;
        padding:2% 1%;
        border-radius: 5px;
        border: solid 1px #999;
    }
    .ct .tw_cbox{
        padding: 1% 0 5%;
    }
    .ct .tw_cbox input{
        width: auto;
        text-align: center;
    }
    .ct .tw_cbox label{
        font-size: 1em;
    }
    .ct textarea{
        width: 97%;
        resize: vertical;
        padding:2% 1%;
        border-radius: 5px;
        border: solid 1px #999;
    }
    .ct_submit{
        width: 60%;
        margin: 0 auto;
    }
    .ct_submit input{
        width: 100%;
        padding: 5% 2%;
        text-align: center;
        color: #fff;
        background: #000;
    }
    .fin_check{
        width:90%;
        margin: 3% auto 0;
        margin: 3% auto 0;
        padding-left:1%;
    }
    .fin_check input{
        padding: 3% 2%;
        width: 48%;
        display: inline-block;
    }


}