/* CSS Document */

html{
	height: 100%;
	background: #181614;
}

/*body*/
body{
	background: #181614;
	padding: 0;
	margin: 0;
	height: 100%;
}


/*switch*/
.pc{
	display: block;
}

.sp{
	display: none;
}

/*header*/

.head_base{
  width: 100%;
  padding:0;
	background: #917d3d;
	display: block;
	position: relative;
	text-align: center;
}

.head_title{
  width: 100%;
	height: calc(100vw * 0.27);
  background-image: url(../images/sekigahara/top_title.jpg);
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	background-size: auto 100%;
	position: relative;
}

.head_title img{
  width: 90%;
	max-width: 1300px;
	position:absolute;
	display:block;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}

.w-50{
	width: 50%;
}

.kaitou{
	max-width:200px;
	top:18%;
	left: 0;
	right: 0;
	margin: auto;
	z-index:50;
}

.head_txt{
	text-align: center;
	font-size: 140%;
	line-height: 1.9em;
	width: 92%;
	padding: 1.8em 4% 0;
	margin: 0;
	color:#fffae4;
	font-family: "Roboto Slab", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
	text-shadow:0px 0px 3px rgba(0,0,0,1),
							0px 0px 3px rgba(0,0,0,1),
							0px 0px 7px rgba(0,0,0,1),
							0px 0px 10px rgba(0,0,0,1),
							0px 0px 13px rgba(0,0,0,1),
							0px 0px 16px rgba(0,0,0,1),
							0px 0px 23px rgba(0,0,0,1),
							0px 0px 26px rgba(0,0,0,1);
}



/*content*/

.wrap{
  font-family: "Roboto Slab", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
  width: 100%;
  color: #FFF;
	background: url(../images/sekigahara/back.jpg) repeat-y;
	background-position: center top;
	background-size: contain;
	padding-bottom: 0;
	position: relative;
}

.content{
  width: 100%;
  height: 100%;
  max-width: 1020px;
  display: block;
  position: relative;
	margin: 0 auto;
}

.intro-txt{
	text-align: center;
	font-size: 16px;
}


.top_share{
	display: block;
	padding: 0;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0%;
}

.bottom_sns_button{
	background: url(../images/father/comment_base.png);
	width: 100%;
	padding: 0;
	text-align: center;
	display: block;
	float: left;
	border-top: 1px solid #a48c59;
}

.bottom_sns_button dd{
	margin: 0;
	padding: 0;
}

.btn2_img {
	display: block;
	margin-bottom: 1em;
	float: right;
	margin-right: 5%;
	width: 25%;
	max-width: 135px;
}

.btn2_img img{
	width: 100%;
}

.share_top_icon{
	width: 100%;
	display: block;
	margin: 1em auto;
}

.share_top_icon img{
	margin: 0 0.8%;
}

.share_top_icon .bnr{
	display: inline-block;
	max-width: 200px;
}

.top_sns_icons{
	width: auto;
	display: inline;
}


.top_box{
	width: 100%;
	max-width: 100%;
	text-align: center;
	margin: 2em auto;
}

.top_box .tag{
	width: 100%;
	max-width: 1300px;
}

/*busyou*/

.b_char{
	padding: 5em 0;
}

.b_rank{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.b_rank img{
	width: 100%;
}

.b_wrap{
  width: 92%;
  display: block;
	padding: 0 4%;
	margin: 20px 0;
}

.b_left{
  width: 45%;
  float: left;
  display: block;
}

.b_left img{
  width: 100%;
}

.b-right{
  width: 55%;
  display: block;
	float: left;
}

.b_name{
  width: 100%;
	display: block;
	padding-top: 1em;
	float: left;
}

.b_name img{
	width: 100%;
}

.b_txt{
  width: 90%;
  padding: 3% 0 6%;
	display: block;
	margin:0 6%;
	float: left;
	line-height: 2em;
	text-shadow:0px 0px 3px rgba(54,12,0,1),
							0px 0px 3px rgba(54,12,0,1),
							0px 0px 7px rgba(54,12,0,1),
							0px 0px 10px rgba(54,12,0,1),
							0px 0px 13px rgba(54,12,0,1),
							0px 0px 16px rgba(54,12,0,1),
							0px 0px 23px rgba(54,12,0,1),
							0px 0px 26px rgba(54,12,0,1);
	color: #fff8dc;
	font-size: 120%;
}

.b_status{
	width: 90%;
  padding: 3% 5%;
	display: block;
	margin:0 5% 0.4em;
	float: left;
	font-size: 110%;
	background: linear-gradient(to bottom, rgb(222,202,161) 0%,rgb(164,123,63) 100%);

	box-sizing:border-box;
	border:3px #856f50 double;
	text-align: center;
}

.b_status table{
	margin: 0 auto;
	color: #000;
	text-align: center;
	display:inline;
}

.b_status tr{
	width: 5em;
	display: inline-block;
	margin:0.1em;
	text-align: center;
	}
.b_status td{
	display: inline;
	vertical-align: middle;
	text-align: center;
	font-family:"メイリオ","Meiryo","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック", "MS P Gothic",Verdana, Arial, Helvetica, sans-serif;
}

.b_nouryoku{
	margin-left: 0.1em;
	font-weight: bold;
	line-height: 0;
}

.b_minitxt{
	font-size: 70%;
	color: #CCC;
	width: 92%;
	text-align: right;
	margin: 0.5em auto;
	font-family:"メイリオ","Meiryo","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック", "MS P Gothic",Verdana, Arial, Helvetica, sans-serif;
}

.b_comment{
	width: 100%;
	background: url(../images/father/comment_base.png);
	padding: 1.2em 5% 0.5em;
	box-sizing:border-box;
	border:3px #a48c59 double;
	margin-top: 1em;
}

.blue{
	background: rgba(0, 1, 51, 0.6);
}

.red{
	background: rgba(78, 19, 19, 0.5);
}

.black{
	background: rgba(18, 12, 32, 0.69);
}


.b_comment li{
	list-style-type: disc;
	color: #ecce8c;
	font-family:"メイリオ","Meiryo","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック", "MS P Gothic",Verdana, Arial, Helvetica, sans-serif;
	margin-left: -1em;
	margin-top: 0.3em;
}

.share_btn{
	width: 80%;
	text-align: center;
	margin: 2em auto;
}

.btn_img img{
	width: 100%;
	max-width: 384px;
	box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 1);
}

.sns_base{
	background: url(../images/father/comment_base.png);
	width: 100%;
	padding: 10px 0;
	margin: 1em auto;
	border-radius: 1em;
}

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

.bnr img{
	width: 85%;
}

/*---share--*/

.share{
	width: 100%;
	margin: 0 auto 2em;
}

.share_btn .share{
	margin: 1em 0;
}

.share img{
	margin: 0 0.8%;
}


.rank_list{
	padding: 3% 5%;
	box-sizing:border-box;
	border:3px #a48c59 double;
	width: 95%;
	margin: 0 auto;
}

.rank_list img{
	width: 100%;
}

.rank_list table{
	width: 100%;
	margin: 1.5em 0;
}

.rank_list tr{
	display: block;
	width: 20%;
	float: left;
	margin: 0.5em 2%;
	border-bottom: 1px solid #a48c59;
	border-left: 3px solid #a48c59;
}

.rank_list td{
	/*border: 1px solid #a48c59;*/
	padding: 0.2em 0em 0 0.5em;

	display: block;
	text-align: center;
	font-size: 110%;
	color: #eee1cd;
	float: left;
}

.link_hover:hover{
	opacity: 0.7;
	cursor: pointer;
}

/*footer*/

.foot{
	width: 90%;
	background: #000;
	color: #FFF;
	font-size: 12px;
	text-align: center;
	padding: 2em 5% 4em;
	margin-top: 0;
}

.foot a{
	color: #FFF;
	text-decoration: none;
	font-size: 14px;
	display: inline;
	width: 100%;
}

.foot a:hover{
	color: #A64648;
}


.y_line{
	background: url(../images/father/y_line.jpg) repeat-x;
	height: 8px;
	box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 1);
}

.plat{
	width: 100%;
	margin: 3em auto 2em;
	display: inline-block;
	text-align: center;
}

.plat img{
	width: 100%;
	max-width: 830px;

}


.share{
	width: 100%;
	margin: 0 auto 2em;
}

.share img{
	margin: 0 0.8%;
}

.new_grap{
	left:-1%;
	top:14%;
	z-index:50;
	width:15%;
}

.bnr_pos{
	padding:2em 0 3em;
}

.txt_pos{
	margin-bottom:3em;
}

/*footer END*/






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

	.head_txt,.head_txt2{
		font-size: 100%;
	}

	.b_char{
		padding: 3em 0;
	}


	.b_left{
	  width: 100%;
	}

	.b_left img{
		width: 85%;
		margin-left:7.5%;
	}

	.b-right{
	  width: 100%;
	}

	.b_txt{
	  width: 90%;
		line-height: 1.7em;
		font-size: 105%;
	}

	.b_status{
	  padding: 1% 5%;
		margin:0 5%;
		font-size: 100%;
	}

	.b_status tr{
		width: 3em;
		}

	.b_comment img{
		width: 115px !important;
	}

	.b_comment li{
		font-size: 92% !important;
	}

	.b_minitxt{
		font-size: 60%;
	}

	.bnr img{
		width: 95%;
	}

	.rank_list tr{
		display: block;
		width: 45%;
		padding:0 0 0 0.5%;
		margin:0.5em 1.5%;
		float: left;
		border-bottom: 1px solid #a48c59;
		border-left: 3px solid #a48c59;
	}

	.rank_list td{
		/*border: 1px solid #a48c59;*/
		padding: 0.2em 0em;
		display: block;
		text-align: center;
		font-size: 90%;
		color: #eee1cd;
	}

	.new_grap{
		left:4%;
		top:6%;
		z-index:50;
		width:30%;
	}

	.kaitou{
		max-width:150px;
		top:19%;
		left: 0;
		right: 0;
		margin: auto;
		z-index:50;
	}

	.bnr_pos{
		padding:1em 0 0em;
	}

	.txt_pos{
		margin-bottom:1.5em;
	}

	/*switch*/
	.pc{
		display: none;
	}

	.sp{
		display: block;
	}




}


@media screen and (max-width: 370px) {
	.share_top_icon{
		display: block;
	}

	.top_sns_icons{
		float: left;
		width: 100%;
		display: block;
		margin: 0.8em 0;
	}
	.bnr{
		width: 100%;
	}

	.b_char{
		padding: 1em 0;
	}

	.kaitou{
		max-width:120px;
		top:15%;
		left: 0;
		right: 0;
		margin: auto;
		z-index:50;
	}

}