@charset "utf-8";

/* 目次
-----------------------------------------------
	相談内容ランキング
-----------------------------------------------*/
.consul_ranking *{
	box-sizing: border-box;
}
.consul_ranking{
	width: 1040px;
	margin: auto;
	font-size: 14px;
	font-family: Century Gothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",Osaka,Helvetica,sans-serif;
}
.consul_ranking strong{
	font-weight: bold;
}
.ranking_wrapper {
	position: relative;
}
.ranking_wrapper::after{
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #f4f2ea;
	content: "";
}
.ranking_wrapper .mv{
	position: relative;
	padding: 5vw 0 0;
	height:490px;
}
.ranking_wrapper .mv .txt_wrap{
	display: inline-block;
	position: absolute;
	top:100px;
	left:70px;
}
.ranking_wrapper .mv .ttl_wrap{
	position: relative;
	display: inline-block;
}
.ranking_wrapper .mv .ttl_wrap h1{
	display: inline-block;
	position: relative;
	font-size:3.429em;
	font-weight: bold;
	color: #625635;
}
.ranking_wrapper .mv .ttl_wrap::after{
	display: block;
	position: absolute;
	width:65px;
	height:47px;
	top:-47px;
	left:50%;
	margin-left: -33px;
	background: url(images/ico_crown.png) no-repeat;
	background-size: contain;
	content:"";
}
.ranking_wrapper .mv .lead{
	color: #666;
	font-size: 1.214em;
	text-align: center;
}
.ranking_wrapper .mv .lead span{
	display: block;
	margin: auto;
}
.ranking_wrapper .mv picture > *{
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	z-index: -1;
}
.consul_ranking .ranking_list{
	position: relative;
	padding: 15px 50px 10px;
	background: #f4f2ea;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.consul_ranking .ranking_list > li{
	margin:0 0 30px;
	counter-increment : chapter;
	width: calc((100% - 30px) / 2);
}
.consul_ranking .ranking_list .box{
	padding: 30px 20px;
	background: #fff;
	border-radius: 4px;
}
.consul_ranking .ranking_list > li:first-child{
	margin-top: -105px;
	background: rgba(255,255,255,.95);
	width: 100%;
}
.consul_ranking .ranking_list .box .txt{
	line-height: 1.5;
	font-size: 1.143em;
	padding: 0 5px;
}
.consul_ranking .ranking_list .ttl_wrap{
	border-bottom:2px solid #e9e9e9;
	margin: 0 0 15px;
	padding: 0 0 10px;
}
.consul_ranking .ranking_list .ttl{
	position: relative;
	font-size: 1.571em;
	padding-left: 60px;
	line-height: 1.2;
	color: #625635;
}
.consul_ranking .ranking_list > li:first-child .ttl{
	font-size: 2.071em;
}
.ranking_list li:not(.box) .ttl{
	padding-left: 50px;
	color: #333;
}
.ranking_list .box .ttl:before{
	display: block;
	position: absolute;
	width: 49px;
	height:40px;
	top:50%;
	left:0;
	margin-top: -20px;
	background-repeat: no-repeat;
	content: "";
	background-size: contain;
}
.consul_ranking .no1 .ttl::before{background-image:url(images/ico_no1.png);}
.consul_ranking .no2 .ttl::before{background-image:url(images/ico_no2.png);}
.consul_ranking .no3 .ttl::before{background-image:url(images/ico_no3.png);}

.ranking_list li .ttl:after,
.ranking_list li:not(.box) .ttl:before{
	display: block;
	position: absolute;
	width: 34px;
	height:34px;
	top:50%;
	left:10px;
}
.ranking_list li:not(.box) .ttl:before{
	margin-top: -17px;
	border-radius:34px;
	background: #999;
	content: "";
}
.ranking_list li .ttl:after{
	content:counter(chapter);
	text-align: center;
	font-size: 21px;
	line-height: 1;
	margin-top: -11px;
	font-weight: bold;
	color: #fff;
}
.ranking_list li.box .ttl:after{
	display: none;
}
.ranking_list ~ .note{
	display: block;
	text-align: right;
	padding: 5px 15px;
	font-size: .857em;
	color: #666;
	background: #f4f2ea;
}
.consul_ranking .cv_area{
	padding: 30px 0 50px;
}
.consul_ranking .cv_area p.lead{
	text-align: center;
	font-size: 1.429em;
}
.consul_ranking a.request-btn{
	font-size: 2.143em;
	display: block;
    position: relative;
    width: 70%;
    margin: 0 auto 6px;
    padding: 7px;
    border: none;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    background: #fd5925;
    box-shadow: 0 3px 0 #dc350c;
    border-radius: 4px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	text-decoration: none;
	text-align: center;
}
.consul_ranking a.request-btn:hover {
    background: #dc350c;
    box-shadow: 0 3px 0 #b72501;
}