@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&family=Noto+Serif+JP:wght@300&display=swap');
@charset "utf-8";

body {
  min-width: 1024px;
  color: #cccccc;
  background: #000000;
  font-size: 14px;
  font-family: "Noto Serif JP";
  line-height: 1.5;
}

ruby {
  ruby-align: distribute-letter;
}

strong { color: #ffffff; }

a:link { color: #00aadd; }
a:visited { color: #0088aa; }
a:hover { color: #00ccff; }

.mainblock {
  width: 1000px;
  margin: 0 auto;
}

#header {
  position: relative;
  height: 180px;
}
#header .logo {
  position: absolute;
  top: 15px;
  left: -7px;
  z-index: 1;
}
#header .logo a {
  display: block;
}

#pagetitle {
  position: absolute;
  top: -100px;
  right: 90px;
  height: 220px;
  z-index: -1;
}

#poster {
  background: url("../img/nem-poster.png");
  width: 572px;
  height: 660px;
  margin: auto;
}

.menunav {
  list-style: none;
  float: left;
  width: 180px;
  position: relative;
  top: 10px;
  left: -10px;
  z-index: 100;
}

.menunav li a {
  display: block;
  height: 48px;
  text-indent: -2000px;
  background: url("../img/menu.png") no-repeat;
}

.footmenu {
  position: absolute;
  bottom: 10px;
  float: left;
}

.footmenu li {
  display: inline-block;
  width: 160px;
}

.footmenu li a {
  display: block;
  height: 48px;
  text-indent: -2000px;
  background: url("../img/menu.png") no-repeat;
}

div.copyright {
  width: 100%;
  text-align: right;
  color: #999999;
  font-size: 10px;
}

li.nav01 a { background-position: 0    0px; }
li.nav02 a { background-position: 0  -48px; }
li.nav03 a { background-position: 0  -96px; }
li.nav04 a { background-position: 0 -144px; }
li.nav05 a { background-position: 0 -192px; }
li.nav06 a { background-position: 0 -240px; }

li.nav01 span { background-position: 0    0px; }
li.nav02 span { background-position: 0  -48px; }
li.nav03 span { background-position: 0  -96px; }
li.nav04 span { background-position: 0 -144px; }
li.nav05 span { background-position: 0 -192px; }
li.nav06 span { background-position: 0 -240px; }

li.nav01 a:hover { background-position: -360px    0px; }
li.nav02 a:hover { background-position: -360px  -48px; }
li.nav03 a:hover { background-position: -360px  -96px; }
li.nav04 a:hover { background-position: -360px -144px; }
li.nav05 a:hover { background-position: -360px -192px; }
li.nav06 a:hover { background-position: -360px -240px; }

li.nav01.current a { background-position: -180px    0px; }
li.nav02.current a { background-position: -180px  -48px; }
li.nav03.current a { background-position: -180px  -96px; }
li.nav04.current a { background-position: -180px -144px; }
li.nav05.current a { background-position: -180px -192px; }
li.nav06.current a { background-position: -180px -240px; }

#content {
  position: relative;
  float: right;
  width: 820px;
  padding-top: 20px;
  padding-bottom: 0px;
}

#submenu {
  padding-right:10px;
  padding-left: 200px;
  min-height: 120px;
  clear: both;
}

#submenu_mecha {
  padding-right:100px;
  padding-left: 100px;
  min-height: 120px;
  clear: both;
}

#space {
  background: url('../img/bg.jpg');
  position: absolute;
  top: -210px;
  width: 840px;
  height: 600px;
  z-index: -1;
}

section.char {
  display: none;
  padding-top: 0px;
  margin-left: 10px;
  height: 225px;
}

div.selectitem {
  float: right;
  display: block;
  margin: 1px 1px 1px 1px;
  width: 200px;
  height: 100px;
  cursor: pointer;
}

div.nodata {
  float: right;
  display: block;
  margin: 1px 1px 1px 1px;
  width: 200px;
  height: 100px;
}

div.returntop {
  position: absolute;
  bottom: -24px;
  width: 100%;
  height: 24px;
  background-image: url('../img/charsbar.png');
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: bottom 0.5s; /* Safari 3.1 to 6.0 */
  transition: bottom 0.5s;
}

div.charintro {
  width: 540px;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-top: 64px;
  line-height: 200%;
  white-space: pre-line;
}

div.charline {
  font-style: italic;
  font-weight: bold;
  padding-top: 24px;
  line-height: 200%;
  white-space: pre-line;
}

div.charimg {
  position: absolute;
  display: block;
  width: 300px;
  height: 500px;
  right: 10px;
  margin: 0 0 0 0;
  z-index: -1;
}

h1.etitle {
  clear: both;
  letter-spacing: 5px;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom: thin solid #ffffff;
}

div.einfo {
  position: absolute;
  line-height: 200%;
  margin-left: 10px;
  white-space: pre-line;
}

div.eimg {
  float: right;
  width: 480px;
  height: 270px;
  margin: 0 0 0 0;
  background-repeat: no-repeat;
  z-index: -1;
}

.staffinfo, .storyinfo {
  text-align: center;
  margin-left: 10px;
  margin-bottom: 20px;
}

.storyinfo {
  font-weight: bold;
  white-space: pre-line;
  line-height: 200%;
}

.epinav {
  position: absolute;
  width: 448px;
  height: 33px;
  bottom: -66px;
  left: 175px;
}

.epinav li {
  display: inline-block;
  width: 56px;
  float: right;
}

.epinav li a {
  display: block;
  text-indent: -2000px;
  height: 33px;
  background: url("../img/epibutton.png") no-repeat;
  cursor: pointer;
}

li.epi1 a { background-position: -392px 0; }
li.epi2 a { background-position: -336px 0; }
li.epi3 a { background-position: -280px 0; }
li.epi4 a { background-position: -224px 0; }
li.epi5 a { background-position: -168px 0; }
li.epi6 a { background-position: -112px 0; }
li.epi7 a { background-position: -56px 0; }
li.epi8 a { background-position: 0 0; cursor: auto; }

li.epi1.current a { background-position: -392px -33px;; }
li.epi2.current a { background-position: -336px -33px;; }
li.epi3.current a { background-position: -280px -33px;; }
li.epi4.current a { background-position: -224px -33px;; }
li.epi5.current a { background-position: -168px -33px;; }
li.epi6.current a { background-position: -112px -33px;; }
li.epi7.current a { background-position: -56px -33px; }
li.epi8.current a { background-position: 0 -33px;; }