/*====================================
	tag-reset
====================================*/
html,body,h1,h2,h3,h4,h5,h6,
p,ul,ol,li,dl,dt,dd,table,address,blockquote,form {
	margin:0;
	padding:0;
	font-size:100%;
	}

/*====================================
	common-tag
====================================*/

body{
	font-family: Arial, Helvetica,"メイリオ","ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
	line-height:1.5;
	font-size:14px;
	*font-size:86%;/*IE*/
	color:#333;
	text-align:center;
	background-color:#000;
}
ul{
	list-style:none;
}
a{
	color:#FF0;
	text-decoration:underline;
	outline:none;
}
img{
	border:0;
}
del{
	color:#999;
}


/*====================================
	layouts
====================================*/
div#container{
	width:100%;
	text-align:right;
	position:relative;
}
canvas{
	width:1000px;
	position:fixed;
	right:0;
	background-color:#000;
}

div#wrapper{
	position:absolute;
	top:0;
	left:60px;
	text-align:left;
}

/*------------------------------------
	div#outline
------------------------------------*/

div#outline{
	width:460px;
	padding:20px;
	color:#fff;
    background-image: -moz-linear-gradient(top , 
										   rgba(0, 0, 0, .6),
										   rgba(0, 0, 0, .6));
    background-image: -webkit-gradient(linear, left top, left bottom,
                                   color-stop(0, rgba(0, 0, 0, .7)),
                                   color-stop(50%, rgba(0, 0, 0, .7)),
                                   color-stop(90%, rgba(0, 0, 0, .6)));
	-moz-box-shadow: 0 0 5px rgba(255,255,255,1);
	-webkit-box-shadow: 0 0 5px rgba(255,255,255,1);
	box-shadow: 0 0 5px rgba(255,255,255,1);
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}
div#outline h1{
	font-size:1.4em;
	margin-bottom:10px;
}

div#outline p{
	margin-left:30px;
}
div#outline p span{
	font-size:0.8em;
}

/*------------------------------------
	#content
------------------------------------*/
div.content{
	width:460px;
	padding:20px;
	margin:30px 0 0 0;
	color:#FFF;
    background-image: -moz-linear-gradient(top , 
										   rgba(0, 0, 0, .6),
										   rgba(0, 0, 0, .6));
    background-image: -webkit-gradient(linear, left top, left bottom,
                                   color-stop(0, rgba(0, 0, 0, .7)),
                                   color-stop(50%, rgba(0, 0, 0, .7)),
                                   color-stop(90%, rgba(0, 0, 0, .6)));
	-moz-box-shadow: 0 0 5px rgba(255,255,255,1);
	-webkit-box-shadow: 0 0 5px rgba(255,255,255,1);
	box-shadow: 0 0 5px rgba(255,255,255,1);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

/*------------------------------------
	section#head
------------------------------------*/

div.content section.head{
	margin-top:10px;
}
div.content section.head h1{
    background-image: -moz-linear-gradient(top , 
										   rgba(0, 0, 0, .5),
										   rgba(0, 0, 0, .5));
    background-image: -webkit-gradient(linear, left top, left bottom,
                                   color-stop(0, rgba(0, 0, 0, .6)),
                                   color-stop(50%, rgba(0, 0, 0, .6)),
                                   color-stop(90%, rgba(0, 0, 0, .5)));
	-webkit-text-shadow: #000 1px 1px 2px;
	-moz-text-shadow: #000 1px 1px 2px;
	text-shadow: #000 1px 1px 2px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width:210px;
	padding:15px 30px;
	float:right;
	margin-left:30px;
	font-size:2.2em;
}
div.content section.head h1 span{
	font-size:12px;
}

div.content section.head p{
	width:120px;
	float:right;
}

/*------------------------------------
	section#main
------------------------------------*/

div.content section.main h1{
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-moz-transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	font-size:1.8em;
	letter-spacing:-0.2em;
	margin-left:-5px;
}
div.content section.main h2{
	margin-left:35px;
	margin-bottom:5px;
}

div.content section.main p{
	margin-left:40px;
	margin-bottom:10px;
}


/*------------------------------------
	btn
------------------------------------*/
div#apply,
div#back{
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-moz-transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	position:fixed;
}

div#apply a,
div#back a{
	color:#FFF;
	text-decoration:none;
	display:block;
	padding:10px;
    background-image: -moz-linear-gradient(top , 
										   rgba(0, 0, 0, .3),
										   rgba(0, 0, 0, .6));
    background-image: -webkit-gradient(linear, left top, left bottom,
                                   color-stop(0, rgba(0, 0, 0, .3)),
                                   color-stop(50%, rgba(0, 0, 0, .4)),
                                   color-stop(90%, rgba(0, 0, 0, .6)));
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
}

div#apply{
	top:-10px;
	left:0;
	z-index:1;
}
div#apply a{
	background-color:#666;
}
/*div#apply a:hover{
	background-color:#F60;
}
*/
div#back{
	top:130px;
	left:0;
	z-index:2;
}
div#back a{
	background-color:#36C;
}
div#back a:hover{
	background-color:#36F;
}


/*====================================
	clearfix
====================================*/

.cf:after {  
	content: ".";  
	display: block;  
	visibility: hidden;  
	height: 0.1px;  
	font-size: 0.1em;  
	line-height: 0;  
	clear: both;  
	}

.cf{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
	}

.cf { display: block;　/* for Mac IE */
	}