body{
 margin: 0; padding: 0;
 text-align: left;
 font-size: 62.5%;
 font-family: "Lucida Grande" "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"ＭＳ Ｐゴシック",sans-serif;
 color: #fff; line-height: 1.62;
 min-width: 1020px;
 background: #000;
 z-index: 0;
}

#wrap {
 position: relative;
 width: 1200px;
 margin: 0 auto;
}

.left { float: left; }
.right { float: right; }

/*clearfix関係*/
.cf:after{
 content:".";
 display:block;
 height:0;
 clear:both;
 visibility:hidden;
}
.cf { min-height:1px; }

/***** header *****/
#header {
 margin: 0; padding: 0;
 position: fixed;
 top: 0;
 width: 100%;
 height: 70px;
 background: #000;
 border-bottom: solid 1px #333;
 z-index: 9999;
}
#header .logo {
 margin-top: 30px;
 margin-left: 20px;
}
#header ul#snsb {
 margin-top: 12px;
 margin-right: 20px;
 padding-bottom: 5px;
}
#header ul#snsb li {
 float: right;
 width: 100px;
}
#header ul#snsb iframe {
 margin: 0 !important;
}
#header .copy {
 float: left;
 margin-right: 10px;
 line-height: 1.1em;
 text-align: right;
 color: #fff;
 font-size: 0.8em;
}
#nav {
 position: absolute;
 left: 200px; top: 28px;
}
#nav li { float: left; }
#nav li.s { margin: 0 5px; }

#nav li a:hover,
#nav .current a {
 padding-bottom: 5px;
 border-bottom: solid 1px #ccc;
}

/***** all *****/
#index, #intro, #story, #chara01, #chara02, #chara03, #special, #link, #sp {
 position: relative;
 height: 800px;
}

/***** top *****/
#index { background:#fff url("../img/top/bg.jpg") no-repeat; }
#index img {
 position: absolute;
 left: 46px; top: 427px;
}

/***** intro *****/
#intro { background:#fff url("../img/intro/bg.jpg") no-repeat; }
#intro img {
 position: absolute;
 left: 216px; top: 241px;
}

/***** story *****/
#story { background: url("../img/story/bg.jpg") no-repeat; }

/***** chara *****/
#chara01 a,#chara02 a {
 position: absolute;
 left: 558px; bottom: 24px;
 z-index: 9998;
}
#chara01 .chara, #chara02 .chara, #chara03 .chara { position: absolute; z-index: 999; }
#chara01 .chara { top: 100px; left: 195px; }
#chara02 .chara { top: 100px; left: 220px; }
#chara03 .chara { top: 100px; left: 200px; }
#chara01 { background: url("../img/chara/bg01.jpg") no-repeat; }
#chara02 { background: url("../img/chara/bg02.jpg") no-repeat; }
#chara03 { background: url("../img/chara/bg03.jpg") no-repeat; }

/***** sp *****/
#sp { background: url("../img/bg_sp.jpg") no-repeat; }

/***** special *****/
#special { background: url("../img/special/bg.jpg") no-repeat; }
#special .movie,
#special .paper {
 position: absolute;
 top: 120px;
}
#special .movie { left: 163px; }
#special .paper { right: 165px; }

/***** link *****/
#link { background: url("../img/link/bg.jpg") no-repeat; }
#link img {
 position: absolute;
 left: 163px; top: 200px;
}