@charset "utf-8";
div {
    z-index : 10;
}

.blur_b {
    -webkit-filter : blur(5px);
    -moz-filter    : blur(5px);
    -o-filter      : blur(5px);
    -ms-filter     : blur(5px);
    filter         : blur(5px);
    z-index : 1;
}

#ctn_wrapper {
    min-width      : 100%;
    height         : 100%;
    opacity        : 0;
}

.ctn {
    width            : 100%;
    position         : relative;
    margin           : 0px auto 0px auto;
    background-color : #fff;
    /* background-image : url("../images/bg_1.png"); */
    background-position: center;
}

#menu_bar {
    white-space: nowrap;
    width            : 95%;
    margin           : 8px auto 12px auto;
    height : 16px;
    background-color : #fff;
    line-height: 0;
    font-size  : 0;
    vertical-align: middle;

    display:table;
}

#menu_bar>div {
    display:table-row;
    width : 100%;
    line-height: 0;
    font-size  : 0;
}

#menu_bar>div>div {
    line-height: 0;
    font-size  : 0;
    display      : table-cell;
    vertical-align: middle;
    height  : 42px;
}
#menu_bar>div>div>a {
    margin: 0px 15px;
}
#menu_bar>div>div>a>div {
}
#menu_bar>div>div>a>div img {
}


.menu_icon {
    text-align  : right;
    max-width   : 35%;
}

.menu_icon a {
    width : 42px;
}

.menu {
    white-space: nowrap;
    height: 16px;
    display : inline-block;
    line-height: 0;
    font-size  : 0;
}

.menu_wrap {
    position:relative;
}

#header_wrap {
    background          : no-repeat url("../images/PC/TOP/fast_view_00.png");
    background-position : 0px 0px ;
    background-size     : 100%;
    width               : 100%;
    background-color    : #f55;
    position            : relative;
}

#header_wrap>img {
    background-size     : 100%;
    width               : 100%;
    height              : auto;
    display             : block;
    position            : relative;
}

#header {
    background-size     : 100%;
    width               : 100%;
    height              : auto;
    display             : block;
    position            : absolute;
    top : 0px;
}

#header img {
    position : absolute;
}

#navi_btn {
    display : none;
    width            : 132px;
    height           : 132px;
    position         : fixed;
    top              : 65px;
    right            : 15px;
    border           : 1px solid #000;
    background-color : #999;
    z-index          : 20000;
}

#navi {
    width            : 100%;
    height           : 100%;
    position         : fixed;
    top              : 0px;
    border           : 1px solid #000;
    display          : none;
    background: rgba(45,45,45, 0.5);
    z-index          : 10000;

}

#navi ul {
    width            : 100%;
    height           : 90%;
    position         : relative;
    display          : table;
    vertical-align: middle;
    text-align : center;
    table-layout: fixed;
    margin-top : 3%;
}

#navi li {
    width            : 94%;
    border           : 1px solid #000;
    position         : relative;
    display          : table-row;
    text-align       : center;
    vertical-align   : middle;
}

#navi li>div {
    margin : auto auto;
    display : table-cell;
    text-align       : center;
    vertical-align   : middle;
}
#navi li a {
    margin : auto auto;
    display : inline-block;
    width            : 90%;
    height            : 80%;
    vertical-align   : middle;
    background-color : #f55;
}

.mask {
    -webkit-mask:url("../images/mask.png") no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("../images/mask.png");
}

#mask_news {
    -webkit-mask:url("../images/PC/TOP/menu_bar_NEWS.png") no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("../images/PC/TOP/menu_bar_NEWS.png");
}

#mask_sp {
    -webkit-mask:url("../images/PC/TOP/menu_bar_SP.png") no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("../images/PC/TOP/menu_bar_SP.png");
}

#mask_story {
    -webkit-mask:url("../images/PC/TOP/menu_bar_STORY.png") no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("../images/PC/TOP/menu_bar_STORY.png");
}

#mask_top {
    -webkit-mask:url("../images/PC/TOP/menu_bar_TOP.png") no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("../images/PC/TOP/menu_bar_TOP.png");
}

#mask_chara {
    -webkit-mask:url("../images/PC/TOP/menu_bar_CHARA.png") no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("../images/PC/TOP/menu_bar_CHARA.png");
}

#mask_system {
    -webkit-mask:url("../images/PC/TOP/menu_bar_SYSTEM.png") no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("../images/PC/TOP/menu_bar_SYSTEM.png");
}

#char_list {
    margin : 0px;
    padding : 0px;
    line-height: 0;
    font-size  : 0;
    vertical-align: middle;
    position : relative;
}

#char_list ul {
    width : 100%;
    white-space: nowrap;
    overflow : hidden;
}

#char_list li {
    position : relative;
    display : inline-block;
    width  : 16.67%;
}

.char_list div {
}

#char_list img {
    width  : 100%;
}

.char_list_wall {
    width  : 100%;
    height : 100%;
    position : absolute;
    top : 0;
    background-repeat : repeat-x;
    background-size : 100% 200%;
}

.char_list_button {
    width  : 100%;
    height : 200%;
    position : absolute;
    top : -100%;
    background-repeat : repeat-x;
    background-repeat-y : no-repeat;
    background-size : 100% 50%;
    background-position : 0% 0%;
    
}

#char_other > a {
    display : inline-block;
    width   : 50%;
}

.see_btn {
    margin-top   : 1.5%; 
    margin-left  : auto; 
    margin-right : auto; 
    display : block;
    color : #000;
    text-align :center;
    pointer-events: auto;
}

.wrap_cont {
    margin-left  : auto; 
    margin-right : auto; 
    display : block;
    color : #000;
    text-align :center;
    pointer-events: auto;
}

.inner_wrap {
    background-size     : 100%;
    width               : 100%;
    height              : 100%;
    display             : block;
    position            : absolute;
    top : 0px;
    bottom : 0px;
    overflow : hidden;
    pointer-events: none;
}
.inner_wrap img {
    width               : 100%;
}

.inner_wrap > div {
}

#pv_front {
}

#pvp {
    width               : 100%;
}


#news {
    margin : 0px;
    padding : 0px;
    line-height: 1.0;
    font-size  : 100%;
    letter-spacing: -.4em;
    vertical-align: middle;
    position : relative;
    text-align : center;
}

#news ul {
    margin : 0% auto;
    display : block;
    position : relative;
    width : 80%;
}

#news li {
    position : relative;
    display : inline-block;
    width  : 23%;
    margin : 0 1% 2% 1%;
    pointer-events: auto;
    text-align: left;
    background-color : #fff;
    -webkit-mask:url("../images/rect_mask.png") no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("../images/rect_mask.png");
    overflow: hidden;
}


#news li div {
    border : 5px solid #f53;
    position : absolute;
    top : 0;
    height : 98%;
    width : 98%;
}

.news_msg {
    font-size:35%;
    letter-spacing: 0.03em;
    line-height : 1.2;
    text-align : center;
    color : #050553;
    font-weight : bold;
    position : absolute;
    display  : block;
    pointer-events: auto;
    width : 90%;
    height : 22%;
    top: 72%;
    left : 4%;
    word-wrap: break-word;
    overflow-y : auto;
}

.news_date {
    font-size:25%;
    font-weight : bold;
    line-height : 1;
    letter-spacing: 0.01em;
    color : #000;
    position : absolute;
    display : inline-display;
    pointer-events: auto;
    left : 5%;
    top : 65%;
    width : 88%;
    height : 20%;
    text-align : right;
}

#news .news_bg {
    position : relative;
    left : 0;
    width  : 100%;
}

#news li > div > img {
    position : absolute;
    left : 0;
}

#news li .news_tag {
    top : 57.5%;
    width  : 50%;
}

#news li .news_over {
    position : absolute;
    pointer-events: none;
}

#news img {
    width  : 100%;
}

#story {
    margin : 0px;
    padding : 0px;
    line-height: 0;
    font-size  : 0;
    vertical-align: middle;
    position : relative;
}

#story ul {
    width : 100%;
    white-space: nowrap;
}

#story li {
    position : relative;
    display : inline-block;
    width  : 16.67%;
}

#story img {
    width  : 100%;
}

.story_l {
    display : inline;
    position : absolute;
    top  : 40%;
    left : -10%;
    opacity: 0;
}

.story_r {
    display : inline;
    position : absolute;
    top  : 30%;
    right : -10%;
    opacity: 0;
}

.bg {
    pointer-events: none;
}

#footer * {
    color: #fff;
    pointer-events: auto;
    line-height: 2.0;
}

#footer_wrap {
    width            : 100%;
    border           : 1px solid #000;
    background-color : #fff;
    position : relative;
}

#footer {
    width            : 100%;
    position : relative;
    top: 0;
    margin : 0 auto;
}

#footer .inner_wrap div {
    position : absolute;
    font-size: 100%;
    color : #fff;
}

#footer .icon {
    display : inline-block;
    position : absolute;
}

#footer img {
    width            : 100%;
}

.footer_bg {
    display : block;
    margin : 0 auto;
}


.footer_icon {
    position : absolute;
    top : 10%;
    right : 6%;
    width            : 30%;
}

.footer_icon a {
    margin-right : 18%;
    display: inline-block;
    width            : 10%;
}

#footer .inner_wrap {
    font-size: 30%;
    
}


#twitter_box {
    height : 52%;
    width  : 24%;
    margin : 10.5% auto 4% auto;
    overflow : auto;
    pointer-events: auto;
}


#menu_bar2 {
    width            : 100%;
    position         : fixed;
    background-color : #fff;
    background-position: center;
    z-index:100000;
}

#menu_bar2 table {
    position         : relative;
}
#menu_bar2 tr {
    position         : relative;
    height: 100%;
}
#menu_bar2 td {
    position         : relative;
    height: 100%;
    padding-top : 0.4%;
    padding-bottom : 0.5%;
    vertical-align : middle;
}
#menu_bar2 a {
    position         : relative;
}

#menu_bar_left img {
    width : 80%;
}

#mask_top2 {
    -webkit-mask:url("../images/PC/TOP/menu_bar_TOP.png") no-repeat;
    -webkit-mask-size: 80%;
    mask-image: url("../images/PC/TOP/menu_bar_TOP.png");
}
#mask_news2 {
    -webkit-mask:url("../images/PC/TOP/menu_bar_NEWS.png") no-repeat;
    -webkit-mask-size: 80%;
    mask-image: url("../images/PC/TOP/menu_bar_NEWS.png");
}
#mask_story2 {
    -webkit-mask:url("../images/PC/TOP/menu_bar_STORY.png") no-repeat;
    -webkit-mask-size: 80%;
    mask-image: url("../images/PC/TOP/menu_bar_STORY.png");
}
#mask_character2 {
    -webkit-mask:url("../images/PC/TOP/menu_bar_CHARA.png") no-repeat;
    -webkit-mask-size: 80%;
    mask-image: url("../images/PC/TOP/menu_bar_CHARA.png");
}
#mask_sp2 {
    -webkit-mask:url("../images/PC/TOP/menu_bar_SP.png") no-repeat;
    -webkit-mask-size: 80%;
    mask-image: url("../images/PC/TOP/menu_bar_SP.png");
}
#mask_system2 {
    -webkit-mask:url("../images/PC/TOP/menu_bar_system.png") no-repeat;
    -webkit-mask-size: 80%;
    mask-image: url("../images/PC/TOP/menu_bar_system.png");
}

#mask_top2 .menu_over{background-color:#ff47d1;}
#mask_news2 .menu_over{background-color:#47c5ff;}
#mask_story2 .menu_over{background-color:#ff474d;}
#mask_character2 .menu_over{background-color:#47ff80;}
#mask_sp2 .menu_over{background-color:#ab47ff;}
#mask_system2 .menu_over{background-color:#ffbe47;}

#menu_bar>div {
    display:table-row;
    width : 100%;
    line-height: 0;
    font-size  : 0;
}

#menu_bar>div>div {
    line-height: 0;
    font-size  : 0;
    display      : table-cell;
    vertical-align: middle;
    height  : 42px;
}
#menu_bar>div>div>a {
    margin: 0px 15px;
}
#menu_bar>div>div>a>div {
}
#menu_bar>div>div>a>div img {
}

.menu_child {
    display:block;
    position:absolute;
    /*background-color:#005;*/
    top:-10%;
    width:80%;
    height:110%;
}

.menu_over {
    display:block;
    position:absolute;
    top:-150%;
    width:80%;
    height:110%;
}

.menu2 {
    white-space: nowrap;
    line-height: 0;
    font-size  : 0;
    display: block;
    height: 100%;
}

#info_title {
    margin : 0.2% auto 0 auto; 
    display : block;
    color : #000;
    text-align :center;
}

#info_banner {
    margin : 0.2% auto 0 auto; 
    display : block;
    color : #000;
    text-align :center;
}

#info_banner img {
    width : 17.2%;
}

#info_banner a {
    pointer-events: auto;
}

#info_banner a:hover {
    opacity : 0.5;
    pointer-events: auto;
}

#hover img:hover {
  opacity: 0.7;
  filter: alpha(opacity=60);
  -moz-opacity:0.6;
}

.space {
    height : 0;
    margin-bottom : 4%;
}

#scroll img {
    position : absolute;
    opacity : 0.0;
}

#pv_btn {
    pointer-events: auto;
}