@charset "UTF-8";
.clearfix:after {
  content: "　";  
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  }
.clearfix {
  min-height: 1px;
  }
html { height:100%; }
body {
  margin:0;
  height:100%;
  background-repeat:repeat-x;
  background-color:#000000;
  color:#f3f3f3;
  font-size:12pt;
  line-height:1.5;
  min-width:1000px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /*-webkit-font-smoothing:antialiased;*/
  }
#wrapper {
  min-height:100%;
  position:relative;
  width:100%;
  min-width:1000px;
  }
#container {
  width:100%;
  /*  min-width:900px;*/
  margin:0 auto;
  padding-top:150px;
  padding-bottom:220px;
  }
a { color:#70aacf; }
img { border:0; }
.sub {
  font-size:80%;
  text-indent:-1em;
  margin-left:1em;
  }
#pagetop {
  display:none;
  position:fixed;
  right:10px;
  bottom:120px;
  cursor:pointer;
  z-index:103;
  }
p.jv {
  text-align:right;
  margin:-10px 0 0 0;
  color:#ff0000;
  font-size:12px;
  }
/*------ HEADER -------*/
#header {
  width:100%;
  height:111px;
  position:absolute;
  top:0;
  left:0;
  background-image:url(../images/common/menu-bg.png);
  background-repeat:repeat-x;
  background-position:bottom;
  z-index:101;
  }
#header #head {
  width:900px;
  margin:0 auto;
  margin-top:6px;
  }
#header #head #sitename {
  float:left;
  margin-top:5px;
  }
#header #head .socialbutton {
  float:right;
  padding-left:10px;
  }
/*------ MENU -------*/
#header #nav {
  width:900px;
  margin:0 auto;
  margin-top:11px;
  }
#header #nav li {
  display:block;
  height:56px;
  float:left;
  position:relative;
  }
#header #nav li a,#header #nav li span {
  height:56px;
  display:block;
  font-size:1px;
  text-indent:-9999px;
  overflow:hidden;
  background-position:center 0;
  background-repeat:no-repeat;
  }
#header #nav li a:hover {
  background-position:center -56px;
  }
#header #nav li.current {
  background-image:url(../images/common/menu-active-bg.png);
  background-repeat:repeat-x;
  }
#header #nav li#menu-top .menu { 
  width:98px;
  background-image:url(../images/common/menu0.png);
  }
#header #nav li#menu-outline .menu { 
  width:141px;
  background-image:url(../images/common/menu1.png);
  }
#header #nav li#menu-mode .menu {
  width:113px;
  background-image:url(../images/common/menu2.png);
  }
#header #nav li#menu-system .menu {
  width:141px;
  background-image:url(../images/common/menu3.png);
  }
#header #nav li#menu-newcharacter .menu {
  width:232px;
  background-image:url(../images/common/menu4.png);
  }
#header #nav li#menu-gallery .menu {
  width:141px;
  background-image:url(../images/common/menu5.png);
  }
#header #nav li .icon {
  position:absolute;
  top:-4px;
  left:50%;
  margin-left:-23px;
  background:none;
  }
/*--------Submenu-----*/
#submenu {
  height:39px;
  background-image:url(../images/common/submenu-bg.png);  
  position:absolute;
  top:-77px;
  right:0;
  padding-left:40px;
  }
#submenu:after {
  content: "　";  
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  }
#submenu li {
  float:left;
  display:block;
  height:39px;
  position:relative;
  }
#submenu li.split { width:48px; }
#submenu li a,#submenu li span {
  display:block;
  height:39px;
  width:100%;
  text-indent:-9999px;
  font-size:1px;
  background-position:center top;
  transition:background-position 0.2s ease-in-out;
  -webkit-transition:background-position 0.2s ease-in-out;
  -moz-transition:background-position 0.2s ease-in-out;
  }
#submenu li a:hover { background-position:center -39px; }
#submenu li span.inactive { background-position:center -78px; }
#submenu li span.current { background-position:center -39px; }
#submenu li .mark-check {
  position:absolute;
  top:-20px;
  left:50%;
  margin-left:-33px;
  }
/*----------CONTENT-----*/
#content {
  width:900px;
  margin:0 auto;
  }
#content #content-title {
  margin-bottom:60px;
  margin-left:-12px;
  }
#content h1 { margin:0; }
#content .image-box {
  margin-top:5px;
  margin-bottom:20px;
  margin-left:auto;
  margin-right:auto;
  }
#content .image-box td {
  padding:0 7px;
  vertical-align:top;
  font-size:80%;
  width:419px;
  }
#content .image-box td img { margin-top:10px; }
.box {
  background-image:url(../images/common/content-box-middle.jpg);
  background-position:bottom;
  background-repeat:repeat-x;
  background-size:899px 100%;
  position:relative;
  width:899px;
  padding-bottom:5px;
  }
.box:before {
  content:"";
  width:899px;
  height:9px;
  background-image:url(../images/common/content-box-top.jpg);
  position:absolute;
  top:0;
  left:0;
  height:9px;
  }
.box:after {
  content:"";
  width:899px;
  height:8px;
  background-image:url(../images/common/content-box-bottom.jpg);
  position:absolute;
  bottom:0;
  left:0;
  }
.box-text { padding:10px 20px; }
.box-text .h3 { margin-top:10px; }
.topic {
  width:822px;
  margin:30px auto;
  padding:15px;
  border-radius:7px;
  background-color:rgba(255,255,255,0.7);
  color:#333;
  }
.topic h6 {
  font-size:110%;
  font-weight:bold;
  color:#339;
  margin:0;
  padding:0;
  border:1px #333 dotted;
  border-width:0 0 1px 0;
  margin-bottom:2px;
  }
.list {
  width:858px;
  margin:10px auto;
  margin-top:30px;
  }
.list table.list-table {
  border-collapse:collapse;
  width:100%;
  }
.list table.list-table th,
.list table.list-table td {
  border:1px #333 solid;
  padding:3px;
  background-color:#C7CCD4;
  color:#003;
  }
/*---Special----*/
.board {
  background-image:url(../images/common/board-middle.jpg);
  background-size:100% 100%;
  width:896px;
  margin:0 auto;
  position:relative;
  color:#333;
  margin-bottom:15px;
  }
.board a { color:#06C; }
.board .board-top {
  position:absolute;
  top:0;
  left:0;
  }
.board .board-body {
  width:850px;
  margin:0 auto;
  padding-top:20px;
  padding-bottom:20px;
  }
.board .board-bottom {
  position:absolute;
  bottom:0;
  left:0;
  }
/*------ FOOTER -------*/
#footer {
  position:absolute;
  bottom:0;
  left:0;
  background-image:url(../images/common/footer-bg.png);
  background-repeat:repeat-x;
  background-color:#000;
  width:100%;
  height:170px;
  text-align:center;
  z-index:102;
  }
#footer #footer-inner { margin-top:10px; }
/*----custom----*/
#cboxClose {
  top:-18px !important;
  right:0 !important;
  }
#cboxLoadedContent { background-color:#000 !important; }
#cboxCurrent {
  right:auto !important;
  left:3px !important;
  }
#cboxNext { right:4px !important; }
#cboxPrevious { left:4px !important; }
/*-------Mobile-------*/
@media screen and (max-device-width: 640px) {
  body { font-size:24pt; }  
  }