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: 800px;
 background: #000 url(../img/bg.jpg) no-repeat top center;
 z-index: 0;
}
#wrap {
 width: 800px;
 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: 44px;
 background: #000;
 border-bottom: solid 1px #202020;
 z-index: 9999;
}
#header #area {
 position: relative;
 margin: 0 auto;
 width: 800px;
}
#header #logo {
 position: absolute;
 top: 8px; left: 0;
}
#nav {
 position: absolute;
 left: 140px; top: 8px;
}
#nav li {
 float: left;
 margin-right: 15px;
}
#nav li a:hover,
#nav .current a {
 display: block;
 height: 36px;
 border-bottom: solid 1px #8b0000;
}
#header ul#link {
 position: absolute;
 top: 8px; right: 0;
}
#header ul#link li { float: left; }
#header .right p {
 position: absolute;
 top: 24px; right: 0;
 color: #8b0000;
}

/***** footer *****/
#footer {
 position: relative;
 width: 100%; height: 220px;
 border-top: solid 1px #202020;
 background: #000;
}
#footer #area {
 position: relative;
 margin: 0 auto;
 width: 800px;
}
#footer #logo {
 position: absolute;
 top: 40px; left: 68px;
}
#footer ul#sns {
 position: absolute;
 top: 170px; left: 80px;
}
#footer ul#sns li {
 float: left;
 margin-right: 10px;
}
#footer ul#link {
 position: absolute;
 top: 25px; right: 0;
}
#footer ul#link li {
 margin-bottom: 10px;
}


#top,#story,#chara {
 position: relative;
 padding-top: 45px;
}
/***** top *****/
#top #keyvisual {
 margin-bottom: 30px;
}
#top #left,
#top #center,
#top #right {
 float: left;
 width: 250px;
}
#top #left { margin-right: 20px; }
#top #center { margin-right: 20px; }
#top #right img { display: block; }
#top #right .s { margin-bottom: 5px; }
#top #right .m { margin-bottom: 10px; }

#top #left img,
#top #center img {
 margin-bottom: 20px;
}

/***** story *****/
#story {
}
#story .btn {
 margin-left: 345px;
}

/***** character *****/
#chara {
 margin-bottom: 30px;
}

/***** guideline page *****/
#guide {
 position: relative;
 margin: 100px auto 0;
 width: 400px; height: 600px;
}
#guide .close {
 position: absolute;
 top: -50px; right: 0;
}
#guide img {
 display: block;
 margin-bottom: 20px;
}