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

body{
    background:url(../images/bg.jpg) center top;
	background-attachment:fixed;
    background-color:#000;
	min-width:380px;
}



#wrapper{
    width:100%;
    max-width:850px;
    margin:0 auto;
    padding:0;
    position:relative;
	background:#EEE;
	border-left:solid 2px #C93;
	border-right:solid 2px #C93;
	box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);
}


/*ヘッダー*/

.head{
	display:block;
	width:100%;
	position:relative;
	background:url(../images/head/head_base.jpg) top center repeat-y;
	background-size:contain;
}


/*コンテンツ大枠*/

.content{
	width:100%;
	position:static;
	text-align:center;
	margin:0 auto;
}



/*ナビ*/

.gn{
	width:100%;
	display:inline-block;
	background-color:#300;
	float:left;
	margin-bottom:3%;
}

.gn ul{
	width:100%;
	padding:0 2%;
}

.gn li{
	float:left;
	width:32%;
	border-left:solid 1px #aaa;
	border-right:solid 1px #aaa;
}


/*ピックアップエリア*/

.pickup{
	width:96%;
	margin:1% auto 2%;
}

.pickup img{
	width:100%;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
}

/*武将エリア*/


.b_area{
	width:96%;
	margin:2% auto;
}

.num{
	width:100%;
	text-align:center;
	
}

.num img{
	width:100%;
	max-width:640px;
	margin:3% 0 1.5%;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
	cursor:pointer;
}


.num img:hover{
	opacity:0.5;
}


/*1〜10*/

.num2{
	width:100%;
	text-align:center;
	
}

.num2 img{
	width:100%;
	max-width:640px;
	margin:3% 0 1.5%;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.4);

}


.num2 img:hover{
	opacity:1;
}




/*41〜100*/

.b-box3{
	float:left;
	width:100%;
	margin:1% 0.5%;
	
}

/*テーブル設定*/

.b-box1{
	width:99%;
	height:auto;
	margin:1% 0.5%;
	background:#3C3324;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	-webkit-transform-origin: 0 0;
  	-webkit-transform: scale(1, 1.01);
    -moz-transform-origin: 0 0;
    -moz-transform: scale(1, 1.01);
    -ms-transform-origin: 0 0;
    -ms-transform: scale(1, 1.02); /* IE9だけ1.02 */
    -o-transform-origin: 0 0;
    -o-transform: scale(1, 1.01);
	border:double 3px #C90;
}

.red{
	background:#900;
}

table{
	width:100%;
	
}


.rank_num{
	width:10%;
	text-align:center;
	color:#FC3;
	font-size:2em;
	font-weight:bold;
	font-family: "HG明朝E","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
	background:#000;

}

.face1{
	text-align:center;
	width:15%;
}

.face1 img{
		max-width:80px;
}

.face2{
	text-align:center;
	width:10%;
	max-width:82px;
	border-left:2px;
	background:#666; 
}

.face2 img{
	max-width:82px;
	width:70%;
}


.rank_arrow{
	text-align:center;
	width:5%;
	max-width:40px;
	background:#000;
}

.rank-before{
	text-align:center;
	color:#EEE;
	font-size:1.5em;
	font-weight:bold;
	background:#666;
}


.rank_name{
	width:35%;
	text-align:left;
	padding-left:3%;
	color:#FFF;
	font-size:2.5em;
	font-weight:bold;
	font-family: "HG明朝E","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
	text-shadow:4px 4px 4px rgba(0,0,0,0.4);
	font-weight:bold;
}

.rank-before{
	text-align:center;
	width:10%;
}


.fspace{
	width:5%;
	background:#000;
}

.espace{
	width:8%;
	text-align:center;
}

.mspace{
	width:2%;
	background:#CCC;
}


.img-name p{
	 font-weight:bold; font-size:2em;
}



.b_name{
	font-size:1.5em;
	color:#FFF;
	text-align:left;
}


.pu{
	background:#900;
	position:relative;
	display:block;
}

.pp{
	left: -5%; top: -10%; width:30%; max-width: 35px;
}


.rank{
	font-size:0.8em;
	color:#FC3;
	font-family: "HG明朝E","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
	line-height:0.4em;
}

.rankm{
	font-size:0.8em;
	color:#FC3;
	font-family: "HG明朝E","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
	line-height:1em;
}

.rank-up{
	font-size:0.8em;
	color:#F96;
	font-weight:bold;
}

.rank-down{
	font-size:0.8em;
	color:#6CF;
	font-weight:bold;
}

.rank-mama{
	font-size:0.8em;
	color:#CCC;
	font-weight:bold;
}

.rankzone table{
	width:100%;
}

.rankzone td{
	text-align:center;
	font-size:14px;
	font-weight:bold;
	color:#FFF;
	padding:0.4% 0;
}


.td01{
	width:22.3%;
}

.td02{
	width:55.5%;
}




/*フッター*/

.footer{
	width:100%;
	background-color:#300;
	padding:2% 0%;
	color:#fff;
	text-align:center;
	min-height:3em;
	font-size:13px;
	margin-top:5%;
}


.under-link{
	width:96%;
	margin:5% auto 2%;
	border-top:#3C3224 solid 2px;
	padding-top:4%;
	text-align:center;
}

.under-link2{
	width:96%;
	margin:5% auto 2%;
	border-top:#3C3224 solid 2px;
	padding-top:4%;
	text-align:center;
}

.under-link img{
	width:40%;
}

.under-link2 img{
	width:100%;
}

.under-link p{
	font-size:14px;
	padding-top:1%;
}

.under-link2 p{
	font-size:14px;
	padding-top:1%;
}

.sns{
	width:100%;
	text-align:center;
	padding:3% 0;
	margin:4% auto 0;
	background:url(../images/head/head_base.jpg) top center repeat-y;
	background-size:cover;
	border-top:2px solid #888;
	border-bottom:2px solid #888;
}

.sns img{
	margin:0 1%;
}



@media screen and (max-width: 421px) {
	
	body{
    background:none;
    background-color:#000;
	min-width:100%;
	}
	
	#wrapper{
    width:100%;
	background:#EEE;
	border-left:0px;
	border-right:0px;
	box-shadow: 0px;
	}
	
	.gn ul{
	padding:0 0%;
	}
	
	.gn li{
	float:left;
	width:32.5%;
	border-left:solid 1px #aaa;
	border-right:solid 1px #aaa;
	}
	
	
	/*ピックアップエリア*/

	.pickup{
		width:100%;
		margin:0 auto;
	}
	
	.pickup img{
		width:100%;
		box-shadow: 0px;
	}
	
	/*武将エリア*/
	
	
	.b_area{
		width:99%;
		margin:0%;
	}
	
	.b-box1{
	float:left;
	width:100%;
	margin:1% 0% 1% -1px;
	
	}
	
	.rank_num{
	width:9%;
	font-size:1.2em;
	}
	
	.rank_arrow{
	text-align:center;
	width:6%;
	max-width:40px;
	}
	
	
	.rank_name{
	width:30%;
	text-align:left;
	padding-left:1.5%;
	color:#FFF;
	font-size:1.4em;
	}
	
	.face1{
	text-align:left;
	}
	
	.face1 img{
		max-width:56px;
	}
	
	.face2{
	text-align:center;
	width:10%;
	max-width:82px;
	border-left:2px;
	background:#666; 
	}
	
	.face2 img{
	width:100%;
	}
	
	.rank-before{
	font-size:0.9em;
	}
	
	.rank{
	font-size:0.4em;
	color:#FC3;
	font-family: "HG明朝E","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
	line-height:1em;
	}
	
	.rankzone td{
	font-size:11px;
	padding:0.4% 0;
	}
	
	.td01{
	width:23.5%;
	}
	
	.td02{
		width:53%;
	}
	
	.under-link img{
	width:65%;
	}
	
	.under-link p{
	font-size:12px;
	}
	
	.under-link2 p{
	font-size:12px;
	}

	
}






.gn a:hover{
    opacity:1;
}