/* CSS Document */

html{
	height: 100%;
	background: #0b0d19;
}

/*body*/
body{
	background: #0b0d19;
	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%;
	background-color: #000135;
	background-repeat: repeat-y;
	background-position: center;
	text-align: center;
	background-size: auto 100%;

}

.head_title img{
  width: 95%;
  max-width: 1000px;
	padding: 0;
	display: block;
	margin: 0 auto;
}

.head_txt{
	text-align: center;
	font-size: 120%;
	line-height: 1.7em;
	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/quest/back.jpg) repeat-y;
	background-position: center top;
	padding-bottom: 5em;
	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;
}


/*busyou*/

.b_char{
	padding: 5em 0;
}

.b_char h2{
	color: rgb(236, 204, 66);
	text-align: center;
	padding:0.5em 0.5em;
}

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

.b_rank img{
	width: 100%;
}

.b_wrap{
  width: 100%;
  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: 0;
	float: left;
}

.b_name img{
	width: 100%;
}

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

.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-color: rgba(5, 3, 36, 0.57);
	padding: 1.2em 5% 1.2em;
	box-sizing:border-box;
	border:3px #a48c59 double;
	margin-top: 1em;
}

.blue{
	background: rgba(38, 39, 115, 0.5);
}

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

.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: 90%;
	margin: 0 auto;
	display: flex;
	justyify-content:center;
	align-items: center;
	background-color: rgba(5, 3, 36, 0.57);
}

.rank_list .box{
	margin: 0 1em;
	width: 30%;
	font-size: 120%;
	color: rgb(241, 232, 188);
}

.rank_list .box:first-child{
	width: 70%
}

.rank_list .box img{
	width: 100%;
	max-width: 500px;
}

.rank_list .box li{
	margin: 0.2em 0;
}

.box span{
	font-size: 0.8em;
}

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

/*footer*/
/* footer */

.fotter_wrap
{   font-size: 0.8em;
    position: relative;
    clear: both;
    top:0;
    width: 100%;
    height: auto;
    min-height: 80px;
    padding: 1.5em 3%;
    color: #fff4d1;
    border-top: solid 1px #66664e;
    background: rgb(0, 0, 0);
    margin: 0 auto;
    display: inline-block;
}

.footer_item{
  max-width: 1050px;
  margin: 0 auto;
  display: block;
}

.fotter_wrap .plat_bottom
{
    font-size: 10px;

    display: block;
    float: left;

    width: 100%;
    max-width: 650px;
    margin-right: 3em;
    margin-bottom: 0;
}

.fotter_wrap .plat_bottom_txt
{
    display: block;
    float: left;
    width: 100%;
    max-width: 540px;
    margin: .2em 0 .8em 0;
}

.reg_txt{
  font-size: 10.5px !important;
  text-indent: 0 !important;
  color:#CCC;
  display: inline-block;
}

.textLink
{
    font-size: 16;
    display: inline-block;
    text-align: left;
    text-indent: 0.5em;
    color: rgb(226, 226, 226);
    margin-right: 2em;
}

.textLink a
{
    color: rgb(226, 226, 226);
}

.textLink a:hover
{
    text-decoration: underline;

    color: rgb(255, 233, 116);
}



/*footer END*/








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

	.head_txt{
		font-size: 90%;
	}

	.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: 88% !important;
	}

	.b_minitxt{
		font-size: 60%;
	}

	.bnr img{
		width: 95%;
	}

	.rank_list .box{
		margin: 0 auto;
		width: 100%;
		display: block;
		text-align: center;
		font-size: 90%;
	}

	.rank_list .box:first-child{
		width: 100%;
		margin-top:1em;

	}



}


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

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

	.b_char h2{
		color: rgb(236, 204, 66);
		text-align: center;
		padding:0.5em 0.5em;
		font-size: 1em;
	}

	.b_txt{
		font-size: 90%;
	}

	.rank_list .box{
		margin: 0 auto;
		width: 100%;
		display: block;
		text-align: center;
		font-size: 85%;
	}

	.rank_list .box:first-child{
		width: 100%;
		margin-top:1em;

	}


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

	}

	.rank_list .box{
		margin: 0 auto;
	}

	.rank_list .box img{
		width: 100%;
		max-width: 200px;
		display: block;
		margin: 0 auto 1.5em;
	}


}