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

/* ****************************************

*Site Name : Paradise Net
*Description :news for pc

**************************************** */

/* ----------------------------------------
*	layout
---------------------------------------- */
.ranking_list_column {
	margin-top:20px;
	display:flex;
	justify-content:space-between;
}
.ranking_list_column .left_area {
	width:180px;
}
.ranking_list_column .ranking_area {
	width:calc(100% - 200px);
}



/* ----------------------------------------
*	special shops
---------------------------------------- */
div#headline_special_shops{
	width:174px;
	height:39px;
	padding:0 3px;
}
ul#special_shops{
	width:168px;
	margin:5px 0 0 5px;
	border:#666666 1px solid;
	background:#f8eef2;
}
li.special_shops_list{
	width:168px;
}
li.special_shops_list div{
	background:#f8eef2;
	padding:4px 0 0;
	border-bottom:#666666 1px solid;
}
p.special_shops_logo{
	width:160px;
	height:80px;
	margin:0 auto 0;
}
p.special_shops_name{
	width:154px;
	height:20px;
	margin:4px auto 0;
	padding:0 3px;
	border-bottom:#e63a52 2px solid;
	overflow:hidden;
}
p.special_shops_name a{
	color:#e5326e;
	font-weight:bold;
	line-height:20px;
}
p.special_shops_name a:hover{
	text-decoration:underline;
}
p.special_shops_text{
	width:154px;
	height:36px;
	margin:4px auto 0;
	padding:0 3px;
	line-height:18px;
	overflow:hidden;
}
p.special_shops_area{
	width:154px;
	height:20px;
	margin:2px auto 0;
	padding:0 3px 0;
	border-top:#e63a52 1px dotted;
	font-size:11px;
	line-height:20px;
	overflow:hidden;
}
p.special_shops_area span{
	font-weight:bold;
}
p.special_shops_charge{
	width:154px;
	height:19px;
	margin:0 auto 0;
	padding:0 3px 0;
	font-size:11px;
	line-height:19px;
	overflow:hidden;
}
p.special_shops_charge span{
	font-weight:bold;
}


/* ----------------------------------------
*	ranking headline
---------------------------------------- */
div#headline_qs_ranking{
	width:960px;
	height:36px;
	margin:0 auto 0;
	background:url(../images/shoplist/headline_qs_ranking_w960.png) no-repeat top left;
	position:relative;
}
div#headline_qs_ranking h2{
	width:200px;
	height:36px;
	padding:0 0 0 50px;
	line-height:41px;
	color:#ffffff;
	font-size:16px;
	font-weight:bold;
}
#qs_ranking_h3 {
	background:url(../../images/shoplist/qs_ranking_list__title_icon.png) no-repeat left center;
	background-size:36px auto;
	padding:5px 0 5px 46px;
}
#qs_ranking_h3 span {
	font-size:18px;
	display: inline-block;
	background: linear-gradient(to bottom,  rgba(52,183,177,0) 0%, rgba(52,183,177,0) 79%,#eb6280 80%,#eb6280 100%);
	line-height:1;
}
.qs_ranking_note {
	margin-top:20px;
	padding:10px 20px;
	background:#e6e6e6;
}



/* ----------------------------------------
*	page_navi
---------------------------------------- */

div.page_navi{
	width:760px;
	margin:20px auto 0;
	padding:0 5px;
	background:#e4004f;
}

p#page_navi_h{
	width:760px;
	border-bottom:#ffffff 2px solid;
	text-align:center;
	color:#ffffff;
	font-size:14px;
	line-height:28px;
}

div.page_navi div{
	width:760px;
	position:relative;
}

p.page_navi_prev{
	position:absolute;
	top:4px;
	left:0;
}
p.page_navi_prev a{
	display:block;
	width:42px;
	height:28px;
	padding:0 0 0 32px;
	background:url(../images/common/btn_prev.png) no-repeat top left;
	line-height:28px;
}

p.page_navi_next{
	position:absolute;
	top:4px;
	right:0;
}
p.page_navi_next a{
	display:block;
	width:58px;
	height:28px;
	padding:0 0 0 16px;
	background:url(../images/common/btn_next.png) no-repeat top left;
	line-height:28px;
}

p.page_navi_prev a:hover,
p.page_navi_next a:hover{
	background-position:bottom;
	color:#ffffff;
}

ul.page_navi_pages{
	width:600px;
	margin:0 auto;
	text-align:center;
	overflow:hidden;
}

ul.page_navi_pages li{
	display:inline;
	padding:0 10px;
	font-size:20px;
	font-weight:bold;
	line-height:34px;
}

ul.page_navi_pages li a{
	color:#ffffff;
	font-size:20px;
	font-weight:bold;
	line-height:34px;
	text-decoration:underline;
}

div#order{
	clear:both;
	padding:15px 5px 0;
	text-align:right;
}

div#order form select{
	border:#999999 1px solid;
}


/* ----------------------------------------
*	tab
---------------------------------------- */
.qs_ranking_tab{
	display:flex;
	margin:20px 0 0;
	padding:0;
	list-style:none;
}
.qs_ranking_tab li{
	flex:1;
	position:relative;
}
.qs_ranking_tab li:nth-child(2){
	margin:0 1px;
}
.qs_ranking_tab li a{
	display:block;
	background:#cccccc;
	color:#fff;
	text-align:center;
	text-decoration:none;
	padding:14px 10px;
	font-weight:bold;
	transition:all .2s ease;
	position:relative;
}

.qs_ranking_tab li a span{
	position:relative;
	z-index:2;
	color:#FFF;
	font-size:18px;
}
.qs_ranking_tab li:nth-child(1) a span{
	background:url(../../images/shoplist/qs_ranking_icon01.png) no-repeat left center;
	background-size:auto 20px;
	padding-left:30px;
}
.qs_ranking_tab li:nth-child(2) a span{
	background:url(../../images/shoplist/qs_ranking_icon02.png) no-repeat left center;
	background-size:auto 20px;
	padding-left:22px;
}
.qs_ranking_tab li:nth-child(3) a span{
	background:url(../../images/shoplist/qs_ranking_icon03.png) no-repeat left center;
	background-size:auto 20px;
	padding-left:22px;
}

/* active */
.qs_ranking_tab li.active a{
	background:#eb2d53;
	color:#fff;
}
/* activeの吹き出し（三角） */
.qs_ranking_tab li.active a::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-20px;
	transform:translateX(-50%);
	width:0;
	height:0;
	border-left:20px solid transparent;
	border-right:20px solid transparent;
	border-top:20px solid #eb2d53;
}
/* hover */
.qs_ranking_tab li:not(.active) a:hover{
	background:#eb2d53;
	color:#fff;
}
/* hover時の吹き出し */
.qs_ranking_tab li:not(.active) a:hover::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-20px;
	transform:translateX(-50%);
	width:0;
	height:0;
	border-left:20px solid transparent;
	border-right:20px solid transparent;
	border-top:20px solid #eb2d53;
}


/* ----------------------------------------
*	ranking list
---------------------------------------- */
ul.qs_ranking_list {
	margin-top:40px;
}
.qs_ranking_item {
	border:1px solid #d9d9d9;
}
.qs_ranking_item:not(:first-child) {
	margin-top:20px;
}
.rank_header {
	background:#faefed;
	padding:10px;
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.rank_header p.rank {
	width:70px;
	padding:15px 0;
	text-align:center;
	background:#eb2d53;
	font-size:14px;
	font-weight:bold;
	color:#FFF;
	line-height:1;
}
.rank_header p.rank span {
	font-size:24px;
	color:#FFF;
	margin-right:3px;
}
.shop_info {
	width:calc(100% - 80px);
}
.shop_info p.area_gyoushu {
	color:#3a63bb;
}
.shop_info p.shop_name {
	padding-right:120px;
}
.shop_info p.shop_name a {
	color:#ed2b50;
	font-size:14px;
	font-weight:bold;
}
.vote_count {
	position:absolute;
	right:20px;
	bottom:20px;
	padding:3px 20px;
	background:#f5911f;
	color:#FFF;
	font-weight:bold;
}
.vote_count span {
	color:#FFF;
	margin-left:3px;
}
.qs_ranking_body {
	padding:15px;
	display:flex;
	justify-content:space-between;
}
.qs_ranking_body .qs_ranking_image {
	width:240px;
}
.qs_ranking_body .qs_ranking_image img {
	width:100%;
	height:auto;
	display:block;
}
.qs_ranking_body .manzoku_point {
	width:calc(100% - 260px);
	border:1px solid #d9d9d9;
}
.qs_ranking_body .manzoku_point p.point_label {
	text-align:center;
	padding:5px 0;
	background:#faefed;
	border-bottom:1px solid #d9d9d9;
	font-size:14px;
	font-weight:bold;
	color:#ed2b50;
}
p.point_caption {
	padding:10px;
}
.breakdown_box {
	margin:0 10px;
	padding:10px;
	border: 1px solid #d9d9d9;
	background:#ffffed;
}
.breakdown_box p.breakdown_label {
	background:#eb2d53;
	display:inline-block;
	padding:3px 15px;
	color:#FFF;
}
.breakdown_box ul li {
	margin-top:8px;
}
.breakdown_box ul li span {
	font-weight:bold;
	font-size:13px;
	background:linear-gradient(transparent 60%, #f9ae3b 60%);
}
.shop_detail_link {
	margin:10px 0;
	text-align:center;
}
.shop_detail_link a {
	color:#FFF;
	background:#4d4948;
	padding:5px 60px;
	display:inline-block;
	border-radius:5px;
}

.qs_back_to_shop_list {
	width:360px;
	margin:10px auto;
	text-align:center;
}
.qs_back_to_shop_list a {
	background:#44639c;
	color:#FFF;
	padding:8px;
	border:2px solid #c9cbca;
	display:block;
	font-size:13px;
}

.other_ranking_links {
	margin:10px 0;
	color:#3d64c1;
	font-size:13px;
	line-height:1.6;
}
.other_ranking_links a {
	color:#3d64c1;
	font-size:13px;
}

#qs_no_result {
	margin:40px 0;
	text-align:center;
	font-size:14px;
	color:#ff0000;
}