@charset "UTF-8";

/*  Default
----------------------------------------------------*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,div,table,th,td,address,noscript,form {
  margin: 0;
  padding: 0;
}
html {
  overflow-y: scroll;
  height: 100%;
}
body {
  font-size: 75%;
  line-height: 1.5;
  color: #333333;
  background: #ffffff;
}
img {
  border: none;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul,ol {
  list-style: none;
}


/*  Common Class
----------------------------------------------------*/
.txtL { text-align:left; }
.txtR { text-align:right; }
.txtC { text-align:center; }



/*  Common Layout
----------------------------------------------------*/
#wrapper {
  min-width: 1280px;
  position: relative;
  overflow: hidden;
}

#contents {
  height: 590px;
  position:relative;
  overflow: hidden;
  background: url(../images/bg01.gif) center top repeat-y;
}

div#contents div.main {
  width: 1280px;
  height: 590px;
  margin: 0 auto;
  position: relative;
}

div.main ul.pagebtn {
  width: 45px;
  padding-left: 14px;
}
div#contents div.main ul.pagebtn li.up {
  margin: -31px 0 0 -15px;
}
div#contents div.main ul.pagebtn li.down {
  margin: -2px 0 0 21px;
}

/* ###### キャンペーンメニュー ###### */
div#campbtn {
  width: 100%; height:142px;
  position: fixed;
  top: 300px; left: -100%;
  z-index: 10;
  background:url(../images/ph02.png) repeat-x left top;
}
div#campbtn div.closenavi{
  width: 36px; height:142px;
  position: absolute;
  top: 0; left: 0;
  text-indent:-10000px;
  background:url(../images/ph02.png) no-repeat left -142px;
}
div#campbtn div.closebutton{
  width: 36px; height:36px;
  position: absolute;
  top: 0; right: 0;
  text-indent:-10000px;
  background:url(../images/ph02.png) no-repeat left -426px;
}
div#campbtn div.opennavi{
  width: 36px; height:142px;
  position: absolute;
  top: 0; right: -36px;
  text-indent:-10000px;
  background:url(../images/ph02.png) no-repeat left -284px;
}
div#campbtn ul {
  margin-top: 32px;
  text-align: center;
}
div#campbtn li {
  display: inline;
  margin-right: 15px;
}



#header {
  width: 100%;
  height: 42px;
  padding-top: 8px;
  background: url(../images/ph01.png) repeat-x left top;
  z-index: 10;
  position: absolute;
}

/* ###### ナビゲーション ###### */
div#nav {
  width: 1000px;
  height: 27px;
  margin: 0 auto;
  padding-top: 6px;
  background: url(../images/ph01.png) repeat-x left -50px;
}

div#nav ul {
  float: left;
  width: 604px;
  padding: 0 0 0 10px;
}

div#nav li {
  float: left;
  margin: 0 18px 0 0;
  font-size: 1px; line-height: 0;
  text-indent: -10000px;
  background: url(../images/ph01.png) repeat-x left top;
}
div#nav li.top {
  width: 31px; height: 20px;
  background-position: 0 -83px;
}
div#nav li.top.on {
  background-position: -76px -83px;
}
div#nav li.top:hover {
  background-position: -76px -83px;
}
div#nav li.prologue {
  width: 69px; height: 20px;
  background-position: 0 -103px;
}
div#nav li.prologue.on {
  background-position: -76px -103px;
}
div#nav li.prologue:hover {
  background-position: -76px -103px;
}
div#nav li.character {
  width: 76px; height: 20px;
  background-position: 0 -123px;
}
div#nav li.character.on {
  background-position: -76px -123px;
}
div#nav li.character:hover {
  background-position: -76px -123px;
}
div#nav li.system {
  width: 53px; height: 20px;
  background-position: 0 -143px;
}
div#nav li.system.on {
  background-position: -76px -143px;
}
div#nav li.system:hover {
  background-position: -76px -143px;
}
div#nav li.gallery {
  width: 59px; height: 20px;
  background-position: 0 -163px;
}
div#nav li.gallery.on {
  background-position: -76px -163px;
}
div#nav li.gallery:hover {
  background-position: -76px -163px;
}
div#nav li.trailer {
  width: 70px; height: 20px;
  margin: 0 6px 0 0;
  background-position: 0 -183px;
}
div#nav li.trailer.on {
  background-position: -76px -183px;
}
div#nav li.trailer:hover {
  background-position: -76px -183px;
}
div#nav li.download {
  width: 71px; height: 20px;
  background-position: 0 -203px;
}
div#nav li.download.on {
  background-position: -76px -203px;
}
div#nav li.download:hover {
  background-position: -76px -203px;
}
div#nav li.spec {
  width: 39px; height: 20px;
  background-position: 0 -223px;
}
div#nav li.spec.on {
  background-position: -76px -223px;
}
div#nav li.spec:hover {
  background-position: -76px -223px;
}

#sound {
  float: left;
  width: 72px;
  height: 20px;
  margin-right: 4px;
}

#topics {
  float: left;
  width: 310px;
  height: 20px;
  background: url(../images/topics_title.png) no-repeat;
  overflow-y: hidden;
}

#topics-display-area {
  float: left;
  width: 225px;
  margin: 0 0 0 59px;
  padding: 2px 5px 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  color: #ffffff;
  background: url(../images/topics_bg.png) no-repeat;
}

#topics-expand-button {
  float: left;
  width: 10px;
  height: 20px;
  cursor: pointer;
  background: url(../images/topics_btn.png) no-repeat;
}