@charset "UTF-8";
/*base*/
body{
	padding:0;
	margin:0;
	background:black;
}
div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,dialog,figure,footer,header,
hgroup,menu,nav,section,
time,mark,audio,video{
	font-size:1em;
	font-weight:normal;
	font-style:normal;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	color:rgb(255,255,255);
	line-height:1.1;
	vertical-align:baseline;
	text-decoration:none;
	border:none;
	outline:0;
	margin:0;
	padding:0;
	background:transparent;
}
article,aside,dialog,figure,figcaption,footer,header,hgroup,menu,nav,section{display:block}


#header,
#footer{
	background:black;
	width:100%;
	box-shadow:0 0 30px rgba(255,255,255,.5);
	padding:0.5em 0 0.3em;
	clear:both;
}
#header >p,
#footer >div,
#content{
	width:980px;
	margin:0 auto;
}

/*header*/
#header >p{text-align:right}

/*content*/
/**main**/
#content h1{
	text-align:center;
	margin-top:2.5em;
}
#playerbox{
	display:inline-block;
	border:10px solid rgb(50,50,50);
	margin-top:1em;
}

/**lead**/
#lead{
	margin:2em 0 2.5em;
	overflow:hidden;
	width:100%;
}
#lead >div{float:left}
#lead h2 + p{
	margin-top:0.7em;
	font-weight:bold;
	font-size:1em;
	line-height:1.6;
}
#lead p.banner{
	float:right;
	border:1px solid rgb(50,50,50);
}

/**explain**/
#explain{
	float:left;
	width:48%;
	margin-bottom:4em;
}
#rule{
	background:rgb(0,0,100);
	padding:2.5em 2em;
	overflow:hidden;
}
#rule h3{
	color:rgb(255,255,0);
	font-size:1.2em;
	font-weight:bold;
	padding-bottom:0.5em;
	margin-left:-0.4em;
}
#rule ol{
	padding-left:1.5em;
	margin-bottom:2em;
}
#rule ol li{
	font-size:0.9em;
	line-height:1.5;
	margin-bottom:0.1em;
}
#rule dl{
	float:left;
	width:65%;
}
#rule dt{
	color:rgb(255,150,0);
	font-size:1em;
	margin-bottom:0.3em;
}
#rule dd{
	font-size:0.8em;
	line-height:1.5;
	margin-bottom:1em;
}
#rule table{
	border-collapse:collapse;
	table-layout:auto;
	font-size:0.8em;
	border-bottom:1px solid rgb(100,100,100);
	float:right;
}
#rule caption{color:rgb(150,150,150)}
#rule tr > *{
	border-top:1px solid rgb(100,100,100);
	padding:0.3em 0.6em 0.1em;
}
#rule th{text-align:left}
#rule td{text-align:right}
#rule ul{
	background:rgb(90,120,255);
	padding:0.8em 0.5em 0.6em;
	list-style:none;
	margin-top:1.5em;
	text-align:center;
	clear:both;
}
#rule ul li{
	color:rgb(0,0,100);
	font-weight:bold;
	font-size:1.1em;
	display:inline-block;
	padding:0 0.3em;
}
#rule ul li span{
	color:inherit;
	font-weight:inherit;
	font-size:0.8em;
}
#rule .score{
	font-size:1.8em;
	font-weight:bold;
	margin-top:0.6em;
	text-align:center;
}
#rule .score strong{
	font-size:1.2em;
	font-weight:inherit;
	color:rgb(255,255,0);
}
#rule .example{
	font-size:0.9em;
	line-height:1.5;
	text-indent:-1.5em;
	padding-left:1.5em;
	margin-top:0.7em;
}
#rule .example strong{
	font-weight:bold;
	font-size:1.1em;
}
#explain .banner{
	margin-top:5em;
	text-align:right;
	font-size:0.8em;
}
#explain .banner img{margin-left:44px}
#explain .banner span{
	display:block;
	border-bottom:1px solid rgb(150,0,0);
	text-align:center;
	margin-bottom:0.5em;
	padding-bottom:2em;
}


/**tag**/
#tag{
	list-style:none;
	width:48%;
	float:right;
	font-size:0.8em;
	margin-bottom:4em;
}
#tag li{
	border:1px solid rgb(100,100,100);
	margin-bottom:1.3em;
	float:left;
}
#tag li.count{border-color:rgb(255,80,0)}

#tag li h3{
	float:left;
	color:rgb(255,80,0);
	font-size:1.2em;
	padding:1.3em 0 1.2em 0.8em;
}
#tag li h3 strong{
	font-size:1.2em;
	color:inherit;
	font-weight:inherit;
}

#tag li h3 img{
	display:block;
	padding-top:1em;
}
#tag li div{
	float:right;
	width:51%;
	padding:1.7em 0 1em;
}
#tag li div p{
	line-height:1.35;
	text-align:justify;
	padding-right:1em;
	color:rgb(150,150,150);
}

#tag .button{
	background:rgb(200,200,200);
	position:relative;
	text-align:right;
	padding:0.3em 0.5em 0.35em;
}
#tag .count .button{background:rgb(255,80,0)}
#tag .button span{
	float:left;
	display:block;
	margin:0.3em 0 0 3.5em;
}
#tag .button img{
	position:absolute;
	top:-30px;
	left:-25px;
}
#tag .button a,#tag .button a:visited{
	display:inline-block;
	background:rgb(255,255,0);
	border-radius:0.9em;
	padding:0.3em 1em 0.1em;
	color:rgb(255,80,0)
}
#tag .button a:hover{background:rgb(150,0,0)}


/**footer**/
#sns{
	float:left;
	list-style:none;
}
#links{
	text-align:right;
	font-size:0.7em;
	padding-bottom:0.5em;
	color:rgb(150,150,150);
}
#links a,#links a:visited{color:rgb(200,200,200)}


/*link*/
a,a:visited{
	color:inherit;
	text-decoration:none;
	transition:all ease 0.5s;
}
a img,a:visited img{transition:opacity ease 0.5s}
a:hover{color:rgb(250,100,50)!important}
a:hover img{opacity:.5}