@charset "utf-8";
/* CSS Document */

/*----------------------------------------


共通


----------------------------------------*/

.clf:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
	
.clf{display: inline-block;} 

/* Hides from IE Mac \*/
* html .clf {height: 1%;}
.clf{display:block;}
/* End Hack */

a.link{
	color:#2682e9;
	text-decoration:underline;
}
a.link:hover{
	text-decoration:none;
}

/*----------------------------------------

メインタイトル

----------------------------------------*/
#contents{
	background: #FFF;
}
#contents #mainTitle{
	padding-top:30px;
	background: #f4f4f4 url(../img/main_bg.png) no-repeat center top;
}
#contents #mainTitle .inr{
	width:960px;
	margin:0 auto;
}

#contents #mainTitle p.catagory{
	float:left;
	color:#009ee9;
	font-weight:bold;
	margin:20px 0; 
	font-size:1.4em;
}
#contents #mainTitle h1{
	clear:both;
	border-top:1px solid #ededed;
	font-size:2.8em;
	padding-top:30px;
	margin:30px 0 10px;
	font-weight:normal;
}
#contents #mainTitle .mainVisual{
	margin-top:30px;
}
#contents #mainTitle .mainVisual img{
	width:100%;
	height:auto;
}
#contents #mainTitle .mainVisual p{
	background:#000;
	padding:10px;
	color:#FFF;
	text-align:center;
}

/*--- SNS ---*/

#contents #mainTitle .sns-container {
	position:relative;
}
	#contents #mainCont .sns-container {
		padding: 20px 0;
		border-top:1px solid #ededed;
		border-bottom:1px solid #ededed;
	}
	#contents #mainCont .sns-container p{
		text-align:center;
		margin-bottom: 10px;
		color:#000;
		font-weight:bold;
	}
#contents #mainTitle .sns-container .sns{
	position:absolute;
	top:-222px;
	right:0;
	float:right;
	zoom:1;
}
	#contents #mainCont .sns-container .sns{
		text-align:center;
		zoom:1;
		z-index: 999;
		width:115px;
		margin:0 auto;
	}
.sns-container .sns:after {
  content: ""; 
  display: block; 
  clear: both;
}
#contents #mainTitle .sns-container .sns li{
	position:relative;
	float:left;
	width:35px;
}
	#contents #mainCont .sns-container .sns li{
		position:relative;
		float:left;
	}

	#contents #mainCont .sns-container .sns{
		text-align:center;
		zoom:1;
		z-index: 999;
		width:155px;
		margin:0 auto;
	}


.sns-container .sns li img{
	width:100%;
	text-align:center;
}
#line img{ width:auto !important; }
.sns-container .sns .serif{
	position:absolute;
	top: -38px;
	left: -48px;
	width:140px;
	height: 41px;
	display:none;
	padding: 5px 0 0 10px;
	text-align: center;
}
#contents #mainCont .sns-container .sns .serif{
	left: -42px !important;
}


#contents #mainTitle .sns .serif{ background: url(../img/sns_bg.png) no-repeat; }
#contents #mainCont .sns .serif{ background: url(../img/sns_bg02.png) no-repeat; }

.sns-container .sns li.tw{
	margin: 0 5px;
}

/*--- h1が3行になったのときのSNS ---*/
#contents #mainTitle .sns-container .sns.line3{
	top:-277px;
}


@media screen and (max-width:1000px) {
	#contents #mainTitle{
		background-size:120%;
	}

	#contents #mainTitle .inr{
		width:100%;
	}

	#contents #mainTitle .sns-container .sns{
		position:static;
		margin:0 auto;
		width:155px;
		float:none;
	}

	#contents #mainTitle p.catagory{
		float:none;
		margin:20px 0; 
		text-align:center;
	}

	.sns-container .sns li{
		position:relative;
		float:left;
		width: auto !important;
	}
	#contents #mainTitle .sns-container{
		padding: 10px 0;
		}

	#line img{ width: 82px !important; }


}
@media screen and (max-width:800px) {
	#contents #mainTitle h1,
	#contents #mainTitle p{
		padding-left: 3% ;
		padding-right: 3% ;
	}

	}


@media screen and (max-width:480px) {


#contents #mainTitle h1{
	font-size:1.8em;
}


}


/*----------------------------------------

メインコンテンツ

----------------------------------------*/

#contents #mainCont{
	width:960px;
	margin:0 auto ;
	padding:50px 0;
	font-size:108%;
}

@media screen and (max-width:1000px) {
	#contents #mainCont{
		width:95%;
		margin:0 auto;
	}
}



/*----------------------------------------

メインテキスト

----------------------------------------*/


#contents #mainCont .clmText{
	margin-bottom:40px;
	clear:both;
}
#contents #mainCont .clmLeftImg,
#contents #mainCont .clmRightImg{
	margin-bottom:20px;
}

#contents #mainCont .thumb img{ width:100%; left:0; top:0;  }
#contents #mainCont .thumb p{ background:url(../img/bg_caption.png); color:#FFF; position:absolute; bottom:0; width:90%;  padding:10px 5%;  }

#contents #mainCont .clmLeftImg .thumb{
	float:left;
	width:47%;
	height:auto;
	position:relative;
	}
	#contents #mainCont .clmLeftImg .txt{
		float:right;
		width:47%;
		}
		#contents #mainCont .clmLeftImg .txt h2:first-child,
		#contents #mainCont .clmLeftImg .txt .q:first-child{
			margin-top:0;
			}
#contents #mainCont .clmRightImg .thumb{
	float:right;
	width:47%;
	height:auto;
	position:relative;
	}
	#contents #mainCont .clmRightImg .txt{
		float:left;
		width:47%;
		}
		#contents #mainCont .clmRightImg .txt h2:first-child,
		#contents #mainCont .clmRightImg .txt .q:first-child{
			margin-top:0;
			}

#contents #mainCont h2{
		margin-top:20px;
		margin-bottom:20px;
		font-size:1.4em;
	}
#contents #mainCont .q{
		font-weight:bold;
	}
#contents #mainCont .txt p,
#contents #mainCont .clmText p{
		margin-bottom:10px;
	}


@media screen and (max-width:480px) {

	#contents #mainCont .clmLeftImg .thumb{
		float:none;
		width:100%;
		margin-bottom:40px;
		}
		#contents #mainCont .clmLeftImg .txt{
			float:none;
			width:100%;
			
		}
	#contents #mainCont .clmRightImg .thumb{
		float:none;
		width:100%;
		margin-bottom:40px;
		}
		#contents #mainCont .clmRightImg .txt{
			float:none;
			width:100%;
		}

}



/*----------------------------------------

ページング

----------------------------------------*/
#contents #mainCont .clmText p#pgnBtn{
	margin:40px auto;
	}
	#contents #mainCont .clmText p#pgnBtn a:hover img {
		opacity: 0.7;
		filter: alpha(opacity=70);
		-ms-filter: "alpha(opacity=70)";
		}


/*----------------------------------------

プロフィール

----------------------------------------*/
#prfBox{
	border:1px solid #ccc;
	outline:3px solid #eee;
	padding:1em;
	margin-bottom:1em;
	margin-top:2em;
	}
	#contents #mainCont .clmText #prfBox p:first-child{
		margin:0 0 10px;
		}
	#contents #mainCont .clmText #prfBox p:last-child{
		margin:0;
		}



/*----------------------------------------

ゲームリスト

----------------------------------------*/
.gameList h3{
	font-size:1.4em;
	margin-bottom:1em;
	}

.gameList .small{
	font-size:0.8em;
	}
.gameList .clmLeftImg{
	border-top:1px solid #CCC;
	padding-top:2em; 
	}
.gameList .clmLeftImg .thumb{
	width:40% !important;
	}
	.gameList .clmLeftImg .thumb p{
		position:static !important;
		background:none !important;
		color:#333 !important;
		padding:0 !important;
		margin-top:0.5em;
		}
	.gameList .clmLeftImg .txt{
		width:55% !important;
		}


@media screen and (max-width:480px) {
.gameList .clmLeftImg .thumb{
	width: auto !important;
	margin-bottom:20px !important;
	}
	.gameList .clmLeftImg .txt{
		width:auto !important;
		}
}
/*----------------------------------------

バナー領域

----------------------------------------*/

#contents #mainCont .ClmBnr{
	margin-top:40px;
	}
	#contents #mainCont .ClmBnr li{
		float:left;
		width:32%;
		margin-left:2%;
		}
		#contents #mainCont .ClmBnr li:first-child{
			margin-left:0;
			}
		#contents #mainCont .ClmBnr li img{
			width:100%;
			height:auto;
			}


@media screen and (max-width:480px) {
	#contents #mainCont .ClmBnr li{
		float:none;
		width:100%;
		margin:0 0 20px 0;
		}
	

}


/*----------------------------------------

コピーライト

----------------------------------------*/
#contents #mainCont .copyright{
	clear:both;
	margin-top:40px;
	font-size:0.9em;
	}



/*----------------------------------------

コンテンツリンク

----------------------------------------*/
#contList{
	margin-top:20px;	}

#contList li{
	border-bottom:1px dotted #CCC;
	padding-bottom:1em;
	margin-bottom:1em;
	}


/*----------------------------------------

イメージがメインのコンテンツ

----------------------------------------*/
.mainImgCont #mainTitle{
	padding-bottom:20px;
	}

.mainImgCont #mainCont img.wd550{
	width:550px;
	height:auto;
	}
.mainImgCont #mainCont img.wdauto{
	width:100%;
	height:auto;
	}
.mainImgCont #mainCont .cnt{
	text-align:center;
	}
@media screen and (max-width:480px) {
.mainImgCont #mainCont img.wd550{
	width:100%;
	height:auto;
	}
.mainImgCont #mainCont .cnt{
	text-align:left;
	}

}


/*----------------------------------------

引用

----------------------------------------*/
.qt{
	margin:20px 0 !important;
	padding:20px 60px;
	position:relative;
	background-color:#f3f3f3;
	}
.qt:before{
	content: "“";
	position:absolute;
	left:10px;
	top:10px;
	font-size:90px;
	color:#a0a0a0;
	line-height:100%;
	}
.qt:after{
	content: "”";
	position:absolute;
	right:10px;
	bottom:-40px;
	font-size:90px;
	color:#a0a0a0;
	line-height:100%;
	}
@media screen and (max-width:480px) {
.qt{
	padding:10px 40px;
	}
.qt:before{
	font-size:60px;
	}
.qt:after{
	bottom:-20px;
	font-size:60px;
	}
}


/*----------------------------------------

ランキングテーブル

----------------------------------------*/
.rankTable{
	max-width: 700px;
	width: 100%;
	margin:50px auto;
	font-size:18px;
	}
.rankTable caption{
	margin-bottom:20px;
	}
.rankTable tr{
	border-bottom: 1px solid #dddddd;
	}
.rankTable th, .rankTable td{
	vertical-align:middle;
	}
.rankTable th{
	box-sizing:border-box;
	width:40px;
	height:40px;
	border-bottom:1px solid #ffffff;
	background-color:#006699;
	color:#ffffff;
	text-align:center;
	}
.rankTable td{
	padding:5px 20px;
	}
.rankTable .vote{
	box-sizing:border-box;
	width:100px;
	text-align:center;
	}
@media screen and (max-width:480px) {
.rankTable{
	margin:20px auto;
	font-size:14px;
	}
.rankTable td{
	padding:5px 10px;
	}
.rankTable .vote{
	width:80px;
	}
}