@charset "utf-8";
/*
------------------------------------------------------
ランキングページ
-------------------------------------------------------
*/
.main-article-inner {
  padding: 0;
}
.ranking {
  margin-bottom: 4px;
  color: #fff;
  border: 3px solid #2c2c2d;
  background-color: #232324;
}
.ranking .box-wrap {
  position: relative;
  padding-bottom: 22px;
  border: 1px solid #39393a;
}
.ranking h3 {
  padding: 20px 10px 15px;
  line-height: 40px;
  font-size: 200%;
  font-weight: normal;
  text-align: center;
  letter-spacing: 2px;
  background: url(https://number.ismcdn.jp/common/numberweb/v4/images/top/news-style2_bg.png) 5px 52px no-repeat;
}
.ranking h3 span {
  display: block;
  font-size: 62%;
  font-weight: 300;
  letter-spacing: 5px;
  line-height: 1.2;
}
.ranking h4 {
  padding: 35px 10px 20px;
  line-height: 40px;
  font-size: 330%;
  font-weight: normal;
  text-align: center;
  letter-spacing: 2px;
}
.ranking .border {
  position: absolute;
  top: 92px;
  left: 135px;
  width: 20px;
  height: 1px;
  line-height: 1px;
  background-color: #7b7b7c;
}
.ranking input[type="radio"]{
  display:none;
}
.ranking .tab_area{
  font-size:0;
  margin:20px 0;
}
.ranking .tab_area label{
  width:100px;
  margin:0;
  display:inline-block;
  padding:4px 0;
  color:#999;
  background:#232324;
  text-align:center;
  font-size:20px;
  cursor:pointer;
  transition:ease 0.2s opacity;
}
.ranking .tab_area label:hover{
  color: #cfaf3f;
}
.ranking .panel_area{
  margin-top:22px;
  width:100%;
  background:#232324;
}
.ranking .tab_panel {
  width:100%; 
}
.ranking .tab_area label.is-selected{background:#232324; color:#cfaf3f; border-bottom:2px solid #b8a359; margin-bottom:-2px;}
.ranking .panel_area .tab_panel li {
  position: relative;
  padding-left:60px;
  padding-right:10px;
  margin:0;
}
.ranking .panel_area .tab_panel li:after {
  position: absolute;
  top: 0;
  left: 50px;
  width: 60px;
  line-height: 1;
  font-family: "Oswald", sans-serif;
  font-size: 50px;
  letter-spacing: 0.5px;
  font-weight: 300;
  color: #b8a359;
}
.ranking .panel_area .tab_panel li:nth-child(1):after {
  padding-left: 5px;
  content: '1';
}
.ranking .panel_area .tab_panel li:nth-child(2):after {
  padding-left: 5px;
  content: '2';
}
.ranking .panel_area .tab_panel li:nth-child(3):after {
  padding-left: 5px;
  content: '3';
}
.ranking .panel_area .tab_panel li:nth-child(4):after {
  padding-left: 5px;
  content: '4';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(5):after {
  padding-left: 5px;
  content: '5';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(6):after {
  padding-left: 5px;
  content: '6';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(7):after {
  padding-left: 5px;
  content: '7';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(8):after {
  padding-left: 5px;
  content: '8';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(9):after {
  padding-left: 5px;
  content: '9';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(10):after {
  padding-left: 5px;
  content: '10';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(11):after {
  padding-left: 5px;
  content: '11';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(12):after {
  padding-left: 5px;
  content: '12';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(13):after {
  padding-left: 5px;
  content: '13';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(14):after {
  padding-left: 5px;
  content: '14';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(15):after {
  padding-left: 5px;
  content: '15';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(16):after {
  padding-left: 5px;
  content: '16';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(17):after {
  padding-left: 5px;
  content: '17';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(18):after {
  padding-left: 5px;
  content: '18';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(19):after {
  padding-left: 5px;
  content: '19';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li:nth-child(20):after {
  padding-left: 5px;
  content: '20';
  color: #cdcdcd;
}
.ranking .panel_area .tab_panel li a {
  display: block;
  padding: 0px 50px 20px 50px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  _zoom: 1;
  font-size: 130%;
}
.ranking .panel_area .tab_panel li a:hover {
  text-decoration: underline;
}
.ranking .panel_area .tab_panel li a img {
  width:120px;
  float:left;
  margin:0 20px 0 0;
}
.ranking .panel_area .tab_panel li a span {
  display:block;
  margin:0 0 0 0;
}
.ranking .tab_area_contents{
  font-size:0;
  margin:20px 0;
  position:relative;
  text-align:center;
}
.ranking .tab_area_contents label{
  width:100px;
  margin:0;
  display:inline-block;
  padding:4px 0;
  color:#999;
  background:#232324;
  text-align:center;
  font-size:20px;
  cursor:pointer;
  transition:ease 0.2s opacity;
}
.ranking .tab_area_contents label:hover{
  color: #cfaf3f;
}
.ranking .panel_area_contents{
  margin-top:22px;
  width:100%;
  background:#232324;
}
.ranking .tab_panel {
  width:100%; 
}
.ranking .tab_area_contents label.is-selected{background:#232324; color:#cfaf3f; border-bottom:2px solid #b8a359; margin-bottom:-2px;}
.ranking .panel_area_contents .tab_panel li {
  position: relative;
  padding-left:60px;
  padding-right:10px;
  margin:0;
}
.ranking .panel_area_contents .tab_panel li:after {
  position: absolute;
  top: 0;
  left: 50px;
  width: 60px;
  line-height: 1;
  font-family: "Oswald", sans-serif;
  font-size: 50px;
  letter-spacing: 0.5px;
  font-weight: 300;
  color: #b8a359;
}
.ranking .panel_area_contents .tab_panel li:nth-child(1):after {
  padding-left: 5px;
  content: '1';
}
.ranking .panel_area_contents .tab_panel li:nth-child(2):after {
  padding-left: 5px;
  content: '2';
}
.ranking .panel_area_contents .tab_panel li:nth-child(3):after {
  padding-left: 5px;
  content: '3';
}
.ranking .panel_area_contents .tab_panel li:nth-child(4):after {
  padding-left: 5px;
  content: '4';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(5):after {
  padding-left: 5px;
  content: '5';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(6):after {
  padding-left: 5px;
  content: '6';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(7):after {
  padding-left: 5px;
  content: '7';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(8):after {
  padding-left: 5px;
  content: '8';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(9):after {
  padding-left: 5px;
  content: '9';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(10):after {
  padding-left: 5px;
  content: '10';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(11):after {
  padding-left: 5px;
  content: '11';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(12):after {
  padding-left: 5px;
  content: '12';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(13):after {
  padding-left: 5px;
  content: '13';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(14):after {
  padding-left: 5px;
  content: '14';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(15):after {
  padding-left: 5px;
  content: '15';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(16):after {
  padding-left: 5px;
  content: '16';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(17):after {
  padding-left: 5px;
  content: '17';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(18):after {
  padding-left: 5px;
  content: '18';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(19):after {
  padding-left: 5px;
  content: '19';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li:nth-child(20):after {
  padding-left: 5px;
  content: '20';
  color: #cdcdcd;
}
.ranking .panel_area_contents .tab_panel li a {
  display: block;
  padding: 0px 50px 20px 50px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  _zoom: 1;
  font-size: 130%;
}
.ranking .panel_area_contents .tab_panel li a:hover {
  text-decoration: underline;
}
.ranking .panel_area_contents .tab_panel li a img {
  width:120px;
  float:left;
  margin:0 20px 0 0;
}
.ranking .panel_area_contents .tab_panel li a span {
  display:block;
  margin:0 0 0 0;
}