
/*=================================================
 * CSS for PC
 * ================================================= */

.kbtop_bt{
	text-align: center;
	padding: 20px 0;
}
.kbtop_bt a{
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 220px;
	height: 40px;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background: #ff3399;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}


/** kbtop_shoprank **/

.kbtop_shoprank{
	padding: 20px 0 0 0;
}
.kbtop_shoprankbox{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	color: currentColor;
	margin: 0 0 20px 0;
	padding: 0 0 0 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_shoprankbox:hover{	text-decoration: none;}
.kbtop_shoprankbox:last-of-type{	margin-bottom: 0;}
.kbtop_shoprankbox .img{
	width: 106px;
	height: 106px;
	overflow: hidden;
	padding: 3px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_shoprankbox .img img{
	width: 100%;
	height: auto;
}
.kbtop_shoprankbox .txt{
	width: calc(100% - 106px);
	padding: 5px 0 0 0;
}
.kbtop_shoprankbox .txt .rank{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
	font-size: 13px;
	font-weight: bold;
	line-height: 20px;
	padding: 0 0 0 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_shoprankbox .txt .rank em{
	width: 65px;
	text-align: center;
	margin-right: 10px;
	border-radius: 10px;
}
.kbtop_shoprankbox:nth-of-type(1) .txt .rank em{	background: #ff3ca2; box-shadow: none;}
.kbtop_shoprankbox:nth-of-type(2) .txt .rank em{	background: #bc9732; box-shadow: none;}
.kbtop_shoprankbox:nth-of-type(3) .txt .rank em{	background: #697489; box-shadow: none;}

.kbtop_shoprankbox .txt .rank span{
	flex: 1;
}
.kbtop_shoprankbox .txt h4{
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	padding: 10px 0 10px 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
}
.kbtop_shoprankbox .txt h4 a{	color: currentColor;}
.kbtop_shoprankbox_link{
	font-size: 0;
	line-height: 0;
	text-align: center;
}
.kbtop_shoprankbox_link a,
.kbtop_shoprankbox_link span{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 4 - 1px);
	height: auto;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	border-right: 1px solid #3e3e41;
	padding-top: 3px;
	padding-bottom: 3px;
	-webkit-transition	: 0.2s ease-in-out;
	-moz-transition	: 0.2s ease-in-out;
	-o-transition	: 0.2s ease-in-out;
	transition		: 0.2s ease-in-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_shoprankbox_link a:last-child,
.kbtop_shoprankbox_link span:last-child{	border-right: none;}
.kbtop_shoprankbox_link a{	color: #fff;}
.kbtop_shoprankbox_link a:hover{
	text-decoration: none;
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.kbtop_shoprankbox_link span{
	color: #3e3e41;
}
.kbtop_shoprankbox_link span i{
	font-size: 18px;
	font-weight: bold;
}
.kbtop_shoprankbox_link em i{
	font-size: 18px;
	font-style: normal;
	color: #ff98de;
}
.kbtop_shoprankbox_link em{
	font-weight: bold;
	color: #999;
}
@media screen and (max-width: 650px) {
	.kbtop_shoprankbox .txt .rank em{
		width: 55px;
	}
	.kbtop_shoprankbox .txt h4{	font-size: 16px;}
	.kbtop_shoprankbox_link a,
	.kbtop_shoprankbox_link span{
		font-size: 11px;
	}
	.kbtop_shoprankbox_link span i,
	.kbtop_shoprankbox_link em i{
		font-size: 15px;
	}
}
@media screen and (max-width: 355px) {
	.kbtop_shoprankbox .txt .rank{
		font-size: 11px;
	}
	.kbtop_shoprankbox .txt .rank em{
		width: 42px;
		font-size: 10px;
	}
	.kbtop_shoprankbox .txt h4{
		font-size: 15px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.kbtop_shoprankbox_link a,
	.kbtop_shoprankbox_link span{
		font-size: 10px;
	}
	.kbtop_shoprankbox_link span i,
	.kbtop_shoprankbox_link em i{
		font-size: 12px;
	}
}


/** kbtop_castrank **/

.kbtop_castrank{
	padding: 20px 0 0 0;
}
.kbtop_castrank+.kbtop_bt{	padding-top: 0;}
.kbtop_castrankbox{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: calc(100% - 20px);
	max-width: 440px;
	color: currentColor;
	margin: 0 auto;
	padding: 0 0 20px 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_castrankbox:hover{	text-decoration: none;}
.kbtop_castrankbox:nth-of-type(1){	background: url(../../../img/all/rankno_01b.png) no-repeat top right;	background-size: 110px auto;}
.kbtop_castrankbox:nth-of-type(2){	background: url(../../../img/all/rankno_02b.png) no-repeat top right;	background-size: 110px auto;}
.kbtop_castrankbox:nth-of-type(3){	background: url(../../../img/all/rankno_03b.png) no-repeat top right;	background-size: 110px auto;}
.kbtop_castrankbox .img{
	width: 96px;
	height: 96px;
	padding: 3px;
	margin-right: 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_castrankbox .img em{
	display: inline-block;
	vertical-align: top;
	width: 90px;
	height: 90px;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_castrankbox .img img{
	width: 100%;
	height: auto;
}
.kbtop_shoprankbox:nth-of-type(1) .img,
.kbtop_castrankbox:nth-of-type(1) .img{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff34a7+0,ff6ec0+50,ff34a7+100 */
	background: #ff34a7; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #ff34a7 0%, #ff6ec0 50%, #ff34a7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #ff34a7 0%,#ff6ec0 50%,#ff34a7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #ff34a7 0%,#ff6ec0 50%,#ff34a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff34a7', endColorstr='#ff34a7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.kbtop_shoprankbox:nth-of-type(2) .img,
.kbtop_castrankbox:nth-of-type(2) .img{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bc9732+0,fedc20+50,bc9732+100 */
	background: #bc9732; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #bc9732 0%, #fedc20 50%, #bc9732 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #bc9732 0%,#fedc20 50%,#bc9732 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #bc9732 0%,#fedc20 50%,#bc9732 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc9732', endColorstr='#bc9732',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.kbtop_shoprankbox:nth-of-type(3) .img,
.kbtop_castrankbox:nth-of-type(3) .img{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#697489+0,bec6d5+50,697489+100 */
	background: #697489; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #697489 0%, #bec6d5 50%, #697489 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #697489 0%,#bec6d5 50%,#697489 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #697489 0%,#bec6d5 50%,#697489 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#697489', endColorstr='#697489',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.kbtop_castrankbox .txt{
	width: calc(100% - 106px);
}
.kbtop_castrankbox .name{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: 0 0 10px 0;
	text-shadow: 1px 1px 0 rgba(28,28,31,1);
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_castrankbox .name div{
	width: 100%;
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
	text-align: left;
}
.kbtop_castrankbox .name div .a_girl{
	display: inline-block;
	vertical-align: top;
	width: auto;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
}
.kbtop_castrankbox .name p{
	width: 100%;
	font-size: 12px;
	line-height: 15px;
}
.kbtop_castrankbox .name p span{	color: #999;}
.kbtop_castrankbox .name p br{	display: none;}
.kbtop_castrankbox .name p.shop{
	font-size: 12px;
	font-weight: bold;
	line-height: 16px;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
}
.kbtop_castrankbox .point{
	text-align: left;
}
.kbtop_castrankbox .point div{
	display: inline-block;
	vertical-align: top;
	margin: 0 1px 0 0;
}
.kbtop_castrankbox .point div:last-of-type{	margin: 0;}
.kbtop_castrankbox .point div.no{
	width: 30px;
	height: 30px;
	background: #28282a;
	border-radius: 2px;
}
.kbtop_castrankbox .point .cp > em{
	width: 30px;
	height: 30px;
	font-size: 12px;
	font-weight: normal;
	line-height: 12px;
	border-radius: 2px;
	padding: 0;
}
.kbtop_castrankbox .point .cp0{	background: #28282a;}
@media screen and (max-width: 650px) {
	.kbtop_castrankbox .point div.no{
		width: 25px;
		height: 25px;
	}
	.kbtop_castrankbox .point .cp > em{
		width: 25px;
		height: 25px;
		font-size: 10px;
		line-height: 10px;
	}
}
@media screen and (max-width: 355px) {
	.kbtop_castrankbox .name div{
		font-size: 15px;
	}
	.kbtop_castrankbox .name p,
	.kbtop_castrankbox .name p.shop{
		font-size: 11px;
	}
	.kbtop_castrankbox .point div.no{
		width: 20px;
		height: 20px;
	}
	.kbtop_castrankbox .point .cp > em{
		width: 20px;
		height: 20px;
	}
}


/** kbtop_exp **/

.kbtop_exp{
	padding: 20px 0 0 0;
}
.kbtop_expbox{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: calc(100% - 20px);
	max-width: 340px;
	color: currentColor;
	margin: 0 auto 20px auto;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_expbox:hover{	text-decoration: none;}
.kbtop_expbox:last-of-type{	margin-bottom: 0;}
.kbtop_expbox .img{
	width: 90px;
	height: 90px;
	overflow: hidden;
	border: 3px solid #3e3e41;
	margin-right: 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_expbox .img img{
	width: 100%;
	height: auto;
}
.kbtop_expbox .txt{
	width: calc(100% - 106px);
}
.kbtop_expbox .txt .usinfo{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
	font-size: 0;
	line-height: 0;
	padding: 2px 0;
}
.kbtop_expbox .txt .usinfo_l{
	width: 30px;
	position: relative;
}
.kbtop_expbox .txt .usinfo_r{
	width: calc(100% - 30px);
	padding: 0 0 2px 0;
}
.kbtop_expbox .txt .usinfo_r > p{
	font-size: 12px;
	line-height: 14px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	color: #d3b565;
	padding: 0 0 0 0;
}
.kbtop_expbox .txt .usbox_l img{
	width: 22px;
	height: auto;
	border-radius: 50%;
}
.kbtop_expbox .txt_in{
	position: relative;
	padding: 3px 0 0 0;
}
.kbtop_expbox .txt_in .score{
	width: 85px;
	vertical-align: top;
	text-align: left;
	position: absolute;
	top: 5px;
	left: 0;
}
.kbtop_expbox .txt_in .score p{
	display: inline-block;
	vertical-align: top;
	width: 80px;
	padding: 1px;
	text-align: center;
	border-radius: 7px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_expbox .txt_in .score p span{
	display: block;
	font-size: 12px;
	line-height: 12px;
	padding-top: 1px;
	border-radius: 8px;
	background: #1c1c1e;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.kbtop_expbox .txt_in .score div{
	width: 85px;
	font-size: 20px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	padding: 2px 0 0 0;
}
.kbtop_expbox .txt_in .score div span{
	display: inline-block;
	font-family: "FontA";
	font-size: 38px;
	font-weight: normal;
	line-height: 1;
}
.kbtop_expbox .txt_in .score div .off{	color: #666 !important;}
.kbtop_expbox .txt_in table{
	width: calc(100% - 95px);
	font-size: 13px;
	line-height: 20px;
	margin-left: auto;
}
.kbtop_expbox .txt_in th{
	width: 55px;
	font-weight: bold;
	text-align: left;
	padding: 0;
}
.kbtop_expbox .txt_in td{
	color: #3e3e41;
	padding: 0;
}
.kbtop_expbox .txt_in td span{	font-weight: bold; color: #fff;}
.kbtop_expbox .txt_in td em{	color: #ffcc00;}

@media screen and (max-width: 374px) {
	.kbtop_expbox .txt_in table{
		font-size: 12px;
	}
	.kbtop_expbox .txt_in th{
		width: 50px;
	}
}
@media screen and (max-width: 355px) {
	.kbtop_expbox .txt_in .score{
		width: 70px;
		position: absolute;
		top: 5px;
		left: -2px;
	}
	.kbtop_expbox .txt_in .score p{
		width: 65px;
	}
	.kbtop_expbox .txt_in .score p span{
		font-size: 10px;
		line-height: 10px;
	}
	.kbtop_expbox .txt_in .score div{
		width: 70px;
		font-size: 15px;
	}
	.kbtop_expbox .txt_in .score div span{
		font-size: 30px;
	}
	.kbtop_expbox .txt_in .score div .off{	color: #666 !important;}
	.kbtop_expbox .txt_in table{
		width: calc(100% - 70px);
		line-height: 17px;
	}
	.kbtop_expbox .txt_in table{
		font-size: 10px;
	}
	.kbtop_expbox .txt_in th{
		width: 41px;
	}
}


/** other **/

.li a.kbtop_acdbt{
	padding: 12px 10px 12px 8px;
}
.li a.kbtop_acdbt:after{	display: none;}

#top_main > .support_shop_ex:first-child{
	border-top: 1px solid #3e3e41;
}
#top_tokusyu .support_shop_ex{	background: none;}
#top_tokusyu .support_shop_ex:nth-of-type(1) ul{
	padding-top: 20px;
	padding-bottom: 20px;
}
#top_tokusyu .support_shop_ex:nth-of-type(2) ul{
	padding-top: 0;
	padding-bottom: 20px;
}



/*=================================================
 * CSS for SP
 * ================================================= */

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



}

