@charset "utf-8";

/**
 * 共通パーツ：マンションランキング部分ののスタイル
 * ※/css/index.cssから関連部分(resultBlock, ranking_area)をコピーし、
 * ※順位の背景画像部のパスを調整したもの。
 * ※今後、マンションランキング部分を表示する箇所では本cssを使用する。
 * ※ただし、MRトップのみは従来通り、/css/index.cssを使用する。
 * @since 2017-09-22
 */

/* top_rank_result_block.tpl内 */
.ranking_area {
	margin-top: 80px;
}

.ranking_area h4 {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin: 2em 3em;
	padding: .5em 0;
	letter-spacing: .1em;
	color: #222;
	position: relative;
}

.ranking_area h4:before,
.ranking_area h4:after{
	content:'';
	width: 20px;
	height: 30px;
	position: absolute;
	display: inline-block;
}
.ranking_area h4:before{
	border-left: solid 1px #222;
	border-top: solid 1px #222;
	top:0;
	left: 0;
}
.ranking_area h4:after{
	border-right: solid 1px #222;
	border-bottom: solid 1px #222;
	bottom:0;
	right: 0;
}

.ranking_area .ranking_inner {
	margin-bottom: 3em;
}

.ranking_area .rank_item {
	border-bottom: 1px dashed #B5C4D3;
}

.ranking_area .rank_item .rank_item_body {
	padding: 1em 1em 1.6em;
}

.ranking_area .rank_item .rank_item_header {
	display: table;
	width: calc(100% - 2em);
	padding: 1.5em 1em .5em;
}

.ranking_area .rank_item .rank_no:before{
	font-family: "Font Awesome 5 Free";
	content: "\f521";
	font-weight: 900;
	color: #555;
	display: block;
	font-size: 18px;
	margin-bottom: .2em;
}

.ranking_area .rank_item.gold .rank_no:before{
	color: #E0CA82;
}
.ranking_area .rank_item.silver .rank_no:before{
	color: #BDC0C2;
}
.ranking_area .rank_item.bronze .rank_no:before{
	color: #C08D5E;
}

.ranking_area .rank_item .rank_no {
	display: inline-block;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 22px;
	font-weight: 300;
	text-align: center;
	margin-right: .2em;
	vertical-align: middle;
}

.ranking_area .rank_item .rank_mansion_name{
	display: table-cell;
	width: 66%;
	vertical-align: top;
}

.ranking_area .rank_item .rank_mansion_name a{
	display: inline-block;
	max-width: 80%;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	text-align: left;
	line-height: 1.6;
	letter-spacing: .1em;
	vertical-align: middle;
}
.ranking_area .pc_sbtn:hover .rank_mansion_name a {
	color: #000;
}

.ranking_area .rank_item .rank_val{
	display: table-cell;
	width: 34%;
	font-size: 16px;
	font-weight: bold;
	vertical-align: middle;
	text-align: right;
}

.ranking_area .rank_item .deviation_name,
.ranking_area .rank_item .touraku_rate_name{
	font-size: 12px;
	letter-spacing: .1em;
	margin-right: .3em;
	line-height: 1.6;
	vertical-align: middle;
}

.ranking_area .rank_item .deviation_value_txt,
.ranking_area .rank_item .ouraku_rate_value_txt{
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 25px;
	letter-spacing: .1em;
	font-weight: 500;
	vertical-align: middle;
}

.ranking_area .rank_item .rank_mansion_image_rate {
	margin: 0 auto 20px;
	text-align: center;
}

.ranking_area .rank_item .rank_mansion_image_rate .mansion_image {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	margin: 0 3px;
}

.ranking_area .rank_item .rank_mansion_image_rate .l_bukken_image {
	margin: 0 auto;
	width: 170px;
	height: auto;
	background: url('../../images/common/bg_mansion_photo.gif') repeat;
	border: 5px solid #fff;
	box-shadow: 0px 0px 5px #d6d6d6;
	-webkit-box-shadow: 0px 0px 5px #d6d6d6;
}

.ranking_area .rank_item .rank_mansion_image_rate .deviation_chart_tpl_wrap {
	display: inline-block;
	width: 178px;
	margin: 0 1px;
	padding: 5px 0;
	background: #fff;
	border: 1px solid #d2d9eb;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	vertical-align: middle;
}

.ranking_area .rank_item .rank_mansion_image_rate .description {
	margin-top: 8px;
	font-size: 11px;
}


/* 地域毎のランキングリンクタブ設定 */
.ranking_area ul.tabs li {
	width: 18%;
}

.ranking_area ul.tabs li a {
	padding: 1em .5em;
}

.ranking_area .rank_tab {
	display: none;
}


/* 偏差値ランキング .hensachi_area */
.ranking_area .hensachi_area{
	float: left;
	width: 48%;
}

/* 騰落率ランキング .touraku_area */
.ranking_area .touraku_area{
	float: right;
	width: 48%;
}

/* ランキングの下につくリンク .rank_prefecture_links */
.ranking_area .rank_prefecture_links{
	padding: 2em 0;
}

.ranking_area .rank_prefecture_links .col1,
.ranking_area .rank_prefecture_links .col2{
	float: left;
	width: 50%;
}

.ranking_area .rank_prefecture_links .prefecture_link:before{
	font-family: "Font Awesome 5 Free";
	content: "\f559";
	font-weight: 900;
	padding-right: .4em;
	color: #334455;
}

.ranking_area .rank_prefecture_links .prefecture_link a {
	font-size: 13px;
}


.ranking_area .rank_item .rank_item_body .named_row_list li {
	margin-bottom: 3px;
}

.ranking_area .rank_item .rank_item_body .named_row_list li p {
	margin-left: 100px;
}