@charset "UTF-8";
/* CSS Document */
/*
Web design and Coding by O37*Works(Shizuki Hinase)
http://m37s.com/
*/
body{
	font-size:14px;
	background:url(images/bg_body.gif) repeat center top;
	color:#707070;}

h1{
	display:none;}
h3{
	color:#f02f5b;}
dt{
	color:#f02f5b;
	float:left;
	clear:both;}

a#top{
	display:block;
	border-radius:5px 5px 0 0 ;
	background:#f02f5b;
	color:#fff;
	position:fixed;
	right:15px;
	bottom:0;
	opacity:1;
	padding:3px 10px;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	text-decoration:none;}
a#top:hover{
	background:#ff9999;}

/*==================================================================*/

div#wrap,div#header{
	width:100%;}
div#wrap{
	/*height:100%;
	text-align: left;*/
	background:url(images/top.png) no-repeat center top;}

/*==================================================================*/

div#header{
	position:fixed;
	background:url(images/bg_header.png) repeat;
	color:#fff;
	top:0;
	left:0;
	z-index:5;}
div#menu{
	width:880px;
	margin:0 auto;
	padding:0 0 10px 0;}
div#menu a{
	text-decoration:none;
	color:#fff;
	font-weight:bold;}
div#menu a:hover{}
div#menu p{
	text-shadow:2px 2px 4px #f02f5b;
	font-size:14px;}
div#menu p.tw{
	margin:8px 20px 0 0;
	float:left;}
div#menu p.ls{
	margin:5px 0;
	float:left;}
div#menu p.lo{
	text-align:right;
	padding:15px 0 0 0;}

/*==================================================================*/

div#container{
	width:880px;
	margin:0 auto;
	padding-top:740px;
	position:relative;
	}
div#container h2{
	clear:both;
	margin:0;
	padding:0 0 15px 0;}

/*==================================================================*/

h2#copy{
	top:0px;
	left:140px;
	position:absolute;
	display:block;
	height:740px;
	width:166px;
	opacity:0;
	padding:0;}

/*==================================================================*/
	
div#story{
	text-align:center;}
div#story p{
	text-indent:-9999px;
	width:754px;
	display:block;
	margin:0 63px;
	padding:0;}
div#story p#s1{
	height:78px;
	background:url(images/story_02.png) no-repeat center top;}
div#story p#s2{
	height:225px;
	background:url(http://crevasselamp.net/surge6/images/story_03.png) no-repeat center top;}
div#story p#s3{
	height:302px;
	background:url(images/story_04.png) no-repeat center top;}
div#story p#s4{
	height:155px;
	background:url(images/story_05.png) no-repeat center top;}

/*==================================================================*/


div#info,div#track,div#xfd,div#credit,div#banner,div#story{
	margin:0 auto;
	width:860px;
	border:none;
	padding:80px 20px 0 20px;
	clear:both;}
div#banner,div#xfd{
	text-align:center;
	color:#f02f5b;}
div#story{
	padding:100px 20px 0 20px;
	margin:80px 0 0 0 ;}
div#info{
	padding:120px 20px 0 20px;}

/*==================================================================*/
div#info img.j{
	float:left;
	margin:0 15px 0 0;}
div#info div#right{
	font-size:14px;
	float:right;
	width:480px;}
div#info .s{
	font-size:12px;}
div#info h2{
	font-family:Impact,HelveticaNeue-CondensedBlack;
	color:#f02f5b;
	font-size:48px;
	text-align:right;
	line-height:1;
	margin:0;
	padding:0;}
div#info h2 .s{
	font-size:24px;}
	
div#info div#right dl{
	padding:0 0 20px 0;
	line-height:1.6;}
div#info div#right dt{
	padding:15px 0 0 0 ;}
div#info div#right dd{
	margin:0 0 0 150px;
	padding:15px 0 0 0 ;}

div#info div#ssb1{
	background:#f02f5b;
	border-radius:10px;
	color:#fff;
	clear:both;
	text-align:center;
	line-height:1.6;
	padding:10px;}
div#info div#ssb1 a{
	color:#fff;
	text-decoration:underline;}

/*==================================================================*/


div#track{
	font-size:12px;}
div#track .s{
	font-size:10px;
	line-height:1.2;}
div#track h3{
	font-size:18px;
	font-weight:bold;
	margin:0 0 5px 0;}
div#disc1,div#disc2{
	border-radius:10px;
	border:solid 1px #f02f5b;
	color:#f02f5b;
	width:380px;
	padding:20px;
	margin:0 0 15px 0;
	
/*　サントラ部分の都合で高さが足りない場合は下のheightを増やしてください　*/

	height:600px;
	overflow:auto;}
	

div#disc2 div#ost{
	width:190px;}
div#track p{
	line-height:1.6;}

/*白髪交響曲リスト*/
a#shirokami_list{
	border-radius:10px;
	border:solid 1px #f02f5b;
	display:block;
	width:100%;
	padding:10px 0;
	text-align:center;
	clear:both;
	margin:10px 0;}
a#shirokami_list:hover{
	background: #f02f5b;
	}
a#shirokami_list img:hover{
	opacity:1;}

/*==================================================================*/
/*右寄せボックス*/
div#box h3{
	width:180px;
	text-align:left;
	display:block;
	float:left;
	clear:both;}
div#box p{
	border-radius:10px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	border:solid 1px #f02f5b;
	padding:20px;
	margin:0 0 20px 200px;}
	
/*右寄せボックス　背景色つき*/
div#box p.bg{
	background: #f02f5b;
	text-align:center;}
div#box p.bg img{
	margin:2px 0;}
	
div#box a{
	text-decoration:underline;
	color:#f02f5b;}

/*==================================================================*/

div#credit{
	font-size:14px;
	color:#f02f5b;}
div#credit h3{
	font-size:18px;
	line-height:1.8;}
div#credit div#box{
	width:230px;
	height:480px;
	margin:0 0 0 10px;
	border-radius:10px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	border:solid 1px #f02f5b;
	padding:20px;
	float:left;}

div#credit div#box h3{
	float:none;
	font-weight:bold;
	width:auto;}
div#credit div#box p{
	font-size:14px;
	font-weight:normal;
	margin:0;
	padding:0;
	border:none;}

/*==================================================================*/


div#banner{
	text-align:left;}
div#banner input{
	width:488px;
	padding:5px;
	border:#f02f5b 1px solid;
	color:#f02f5b;
	font-size:14px;
	font-style:italic;
	margin:0 0 5px 0;}
div#banner p.bn{
	width:500px;
	height:100px;
	background:url(images/bg_box.png) repeat left top;
	margin:2px 0;
	}

div#banner p#chara{
	width:300px;
	float:right;}
div#banner p#chara img{
	margin:2px;}

/*==================================================================*/

div#footer{
	width:100%;
	text-align:center;
	clear:both;
	font-size:12px;
	padding:100px 0 5px 0;
	background:url(images/bg_footer.png) repeat-x center bottom;}
div#footer p{
	margin:10px 0;}

/*==================================================================*/
.l{
	float:left;}
.r{
	float:right;}
.c{
	text-align:center;}