html{
  margin:0;
  padding:0;
  background-color:black;
}

body{
  margin:0;
  padding:0;  
  background-color:black;
}

#header{
  width:100%;
  position:relative;
  color:white;
  background:url(../img/header_bg.png),#000;
  height:46px;
  background-repeat:repeat-x;
  z-index:500;
}

#header_area{
  width:962px;
  margin:auto;
}

#header_left{
  width:500px;
  float:left;
  margin-top:5px;
}

#header_left > div{
  float:left;
}

#header_right{
  text-align:right;
}

#header_right img {
  max-height: 35px;
}


#sns_wrapper{
    float: right;
    margin-top: 10px;
    z-index: 102;
    right: 0px;
}

#sns_wrapper li{
    margin-right:5px;
    float:left;
}

#footer{
  width:100%;
  position:relative;
  height:250px;
  z-index:500;
  background:url(../img/footer_line.png),#000;
  background-position:0px 15px;
  background-repeat:repeat-x;
  margin : auto;
  padding:45px 0px;
  color: #fff;
  text-align: center;
}

#footer .specs strong {
  font-weight: bold;
}

#footer .rating-logo,
#footer .company-logo,
#footer .social {
  display: inline-block;
  float: none;
  vertical-align: middle;
  margin: 20px 0;
}

#footer .company-logo img {
  max-width: 30%;
  margin-right: 10px;
}

#footer .company-logo img:last-child{
  margin-right: 0;
}

#footer .social a{
  color: #fff;
  margin-right: 10px;
}

#footer .social a:last-child{
  margin-right: 0;
}

#footer .social a:hover {
  color: rgb(252, 218, 99);
}

#footer .copyright {
  margin: 20px 0;
  font-size: 12px;
  padding-bottom: 20px;
}

#footer .systeminfo{
  width:962px;
  margin:auto;
  height:100%;
}

#paper{
  width:962px;
  min-width:962px;
  margin:auto;
  position: relative;
  background-color:#000;
}

#paper .top{
  height:106px;
  background-image:url(../img/frame_top.png);
  background-repeat:no-repeat;
  position: relative;
}

#paper .middle{
  height:1400px;
  margin-left:2px;
  background-image:url(../img/frame_middle.png);
  background-repeat:repeat-y;
  position: relative;
}

#paper .bottom{
  width:962px;
  height:91px;
  background-image:url(../img/frame_bottom.png);
  background-repeat:no-repeat;
  position: relative;
}

.flasharea{
  position:relative;
  width:960px;
  height:700px;
  min-width:962px;
  margin:auto;
  //background-color:#222222;
  background: url(../img/flash-bg.jpg) top center / contain no-repeat;
}

#rowmenu{
  position:absolute;
  margin-left:30px;
  right:10px;
  bottom:10px;
}

#rowmenu li{
  width:248px;
  height:63px;
  color:white;
  background-position: 0 0;
  background-repeat:no-repeat;
}

#rowmenu li > a{
  display:block;
  width:248px;
  height:88px;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 0.5s linear;
  background-position:0 -88px;
  outline: none;
  filter: alpha(opacity=0); /* IE lt 8 */
  color: transparent;
  overflow: visible;
}




#rowmenu li a:hover{
  opacity:1;
  filter: alpha(opacity=100); /* IE lt 8 */
}

#rowmenu li.story{
  background-image:url(../img/top_btn_story.png);
  right:0;
}

#rowmenu li.character{
  background-image:url(../img/top_btn_character.png);
  right:47px;
}

#rowmenu li.system{
  background-image:url(../img/top_btn_system.png);
  right:99px;
}

#rowmenu li.gyallery{
  background-image:url(../img/top_btn_gyallery.png);
  right:150px;
}

#rowmenu li.special{
  background-image:url(../img/top_btn_special.png);
  right:200px;
}

#rowmenu li.story > a{
  background-image:url(../img/top_btn_story.png);
}
#rowmenu li.character > a{
  background-image:url(../img/top_btn_character.png);
}
#rowmenu li.system > a{
  background-image:url(../img/top_btn_system.png);
}
#rowmenu li.gyallery > a{
  background-image:url(../img/top_btn_gyallery.png);
}
#rowmenu li.special > a{
  background-image:url(../img/top_btn_special.png);
}


.bannerarea{
  width:962px;
  min-width:962px;
  height:85px;
  margin:10px auto 0px;
}

.bannerarea li{
  float:left;
  margin-left:10px;
}
/*
#news{
  width:962px;
  min-width:962px;
  margin:auto;
  position: relative;
  background-blend-mode:screen;
}

#news .top{
  height:17px;
  background-image:url(../img/news_frame_top.png);
  background-repeat:no-repeat;
  background-position:center center;
  position: relative;
}

#news .middle{
  height:29px;
  background-image:url(../img/news_frame_middle.png);
  background-repeat:repeat-y;
  background-position:center center;
  position: relative;
  text-indent:30px;
  line-height:29px;
  overflow:hidden;
  color:white;
  -webkit-transition: height 0.3s linear;
  -moz-transition: height 0.3s linear;
  transition: height 0.3s linear;
}

#news .middle li:first-child{
  cursor:pointer;
  background-image:url(../img/news_open.png);
  background-position:830px 3px;
  background-repeat:no-repeat;
}

#news .middle li{
  width:100%;
}

#news .bottom{
  width:962px;
  height:14px;
  background-image:url(../img/news_frame_bottom.png);
  background-repeat:no-repeat;
  background-position:center center;
  position: relative;
}*/

.dark{
    position:fixed;
    background-color:black;
    top:0;
    left:0;
    z-index:400;
    pointer-events: none;
}

.darkX{
    width:100%;
    height:100%;
}

.darkY{
    width:100%;
    height:100%;
}


#light{
    position:fixed;
    width:1246px;
    height:1211px;
    top:0;
    left:0;
    border:none;
    background:url(../img/light_bg.png) no-repeat;
    z-index:400;
    pointer-events: none;
}

#light2{
    position:fixed;
    width:100%;
    height:1200px;
    top:0;
    left:0;
    border:none;
    background:black;
    z-index:500;
    pointer-events: none;
    transition:opacity 0.64s;
}


#darkLayerTop{
  background:url(../img/light_bg.png);
}
#darkLayerBottom{
  background:url(../img/light_bg.png);
}

/*----- BGM -----*/
#volume{
  width:143px;
  height:22px;
  background-image:url(../img/bgm.png);
  background-repeat:no-repeat;
}

#volume_on{
  width:47px;
  height:22px;
  background-repeat:no-repeat;
  background-image:url(../img/bgm.png);
  background-position:-145px 0%;
  cursor:pointer;
}

#volume_on.active{
  background-image:url(../img/bgm.png);
  background-position:-145px -22px;
}

#volume_separate{
  width:15px;
  height:22px;
  background-repeat:no-repeat;
  background-image:url(../img/bgm.png);
  background-position:-191px 0%;
}

#volume_off{
  width:40px;
  height:22px;
  background-repeat:no-repeat;
  background-image:url(../img/bgm.png);
  background-position:-205px 0%;
  cursor:pointer;
}

#volume_off.active{
  background-image:url(../img/bgm.png);
  background-position:-205px -22px;
}


#to_pagetop{
  position:fixed;
  bottom:-250px;
  left:90%;
  width:79px;
  height:146px;
  #background-image:url(../img/btn_to_top.png);
  z-index:600;
  opacity:0;
  transition: all 0.7s ease-out;
}
#to_pagetop a{
  display:block;
  width:79px;
  height:146px;
  background-image:url(../img/btn_to_top.png);
  background-position:0px 0px;
  z-index:601;
}

#to_pagetop a:hover{
  background-position:-79px 0px;
}

/*
#to_pagetop{
  position:fixed;
  bottom:-250px;
  left:90%;
  width:79px;
  height:146px;
  #background-image:url(../img/btn_to_top.png);
  z-index:600;
  opacity:0;
  transition: all 0.5s;
}
#to_pagetop a{
  display:block;
  width:79px;
  height:146px;
  background-image:url(../img/btn_to_top.png);
  background-position:0px 0px;
  z-index:601;
}

#to_pagetop a:hover{
  background-position:-79px 0px;
}*/

.cboxElement{
  outline: none !important;
}