/******************************************
 * ranking CSS
 ******************************************/

/******************************************
 * ranking PC
 ******************************************/
.mc_rank_area_pc .mc_rank_title {
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 20px;
  color: #3F3F3F;
  margin-bottom: 30px;
}
.mc_rank_area_pc .mc_rank_label {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 40px
}
.mc_rank_area_pc .mc_rank_label[data-rank="1"] {
  background: url(/voi/recommend/images/rank_01.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="2"] {
  background: url(/voi/recommend/images/rank_02.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="3"] {
  background: url(/voi/recommend/images/rank_03.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="4"] {
  background: url(/voi/recommend/images/rank_04.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="5"] {
  background: url(/voi/recommend/images/rank_05.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="6"] {
  background: url(/voi/recommend/images/rank_06.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="7"] {
  background: url(/voi/recommend/images/rank_07.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="8"] {
  background: url(/voi/recommend/images/rank_08.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="9"] {
  background: url(/voi/recommend/images/rank_09.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="10"] {
  background: url(/voi/recommend/images/rank_10.svg) no-repeat;
}
.mc_rank_area_pc .mc_rank_label[data-rank="11"] {
  background: url(/voi/recommend/images/rank_11.svg) no-repeat;
}

/**
* 1位
*/
.mc_rank_area_pc .mc_rank_first {
  display: flex;
  margin-bottom: 40px;
}
.mc_rank_area_pc .mc_rank_first_left a {
  position: relative;
}
.mc_rank_area_pc .mc_rank_first_right {
  margin-left: 30px;
}
.mc_rank_area_pc .mc_rank_first_right .mc_rank_first_brand {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #3F3F3F;
}

.mc_rank_area_pc .mc_rank_first_right .mc_rank_comment {
  margin-top: 8px;
  display: flex;
  align-items: center;
}
.mc_rank_area_pc .mc_rank_first_right .mc_rank_comment .mc_rank_comaverage {
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  color: #3F3F3F;
  margin-left: 10px !important;

}
.mc_rank_area_pc .mc_rank_first_right .mc_rank_comment .mc_rank_comlink {
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  color: #3F3F3F;
}
.mc_rank_area_pc .mc_rank_first_right .mc_rank_comment .mc_rank_comlink a {
  text-decoration: underline !important;
}
.mc_rank_area_pc .mc_rank_first_right .mc_rank_first_price {
  margin-top: 13.63px !important;
}
.mc_rank_area_pc .mc_rank_first_right .mc_rank_first_price,
.mc_rank_area_pc .mc_rank_first_right .mc_rank_first_price em {
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: 19.5px;
  color: #3C3C3C;
}
.mc_rank_area_pc .mc_rank_first_right .mc_rank_first_price .mc_rank_yen {
  font-size: 10px;
  line-height: 15px;
}
.mc_rank_area_pc .mc_rank_first_right .mc_rank_first_price .mc_rank_red {
  color: #FF5C5A;
}
.mc_rank_area_pc .mc_rank_star_rating {
  position: relative;
  width: 86px;
  height: 14px;
  display: inline-block;
}
.mc_rank_area_pc .mc_rank_star_rating[data-rate="0.00"] {
  background: url(/voi/sys_img/detail/comment_star_0.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="0.50"] {
  background: url(/voi/sys_img/detail/comment_star_0_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="1.00"] {
  background: url(/voi/sys_img/detail/comment_star_1.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="1.50"] {
  background: url(/voi/sys_img/detail/comment_star_1_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="2.00"] {
  background: url(/voi/sys_img/detail/comment_star_2.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="2.50"] {
  background: url(/voi/sys_img/detail/comment_star_2_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="3.00"] {
  background: url(/voi/sys_img/detail/comment_star_3.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="3.50"] {
  background: url(/voi/sys_img/detail/comment_star_3_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="4.00"] {
  background: url(/voi/sys_img/detail/comment_star_4.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="4.50"] {
  background: url(/voi/sys_img/detail/comment_star_4_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_pc .mc_rank_star_rating[data-rate="5.00"] {
  background: url(/voi/sys_img/detail/comment_star_5.svg) no-repeat;
  background-size: 86px 14px;
}
/**
* 2位以降
*/
.mc_rank_area_pc .mc_rank_items {
  display: flex;
  margin-bottom: 40px !important;
}
.mc_rank_area_pc .mc_rank_items li {
  margin-left: 15px;
}
.mc_rank_area_pc .mc_rank_items li:first-child {
  margin-left: 0;
}
.mc_rank_area_pc .mc_rank_items li .mc_rank_img_area {
  position: relative;
}
.mc_rank_area_pc .mc_rank_items li .mc_rank_brand {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #3F3F3F;
  margin-top: 10px !important;
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc_rank_area_pc .mc_rank_price_area {
  margin-top: 8px !important;
}
.mc_rank_area_pc .mc_rank_items .mc_rank_price,
.mc_rank_area_pc .mc_rank_items .mc_rank_price em {
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: 19.5px;
  color: #3C3C3C;
}
.mc_rank_area_pc .mc_rank_items .mc_rank_price .mc_rank_yen {
  font-size: 10px;
  line-height: 15px;
}
.mc_rank_area_pc .mc_rank_items .mc_rank_price .mc_rank_red {
  color: #FF5C5A;
}
.mc_rank_area_pc .mc_rank_morebtn_area .mc_morebtn,
.mc_rank_area_pc .mc_rank_closebtn_area .mc_closebtn {
  display: block;
  width: 200px;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid #3F3F3F;
  border-radius: 6px;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  color: #3F3F3F;
  cursor: pointer;
  margin: 0 auto;
}
.mc_rank_area_pc .mc_rank_morebtn_area .mc_morebtn:hover,
.mc_rank_area_pc .mc_rank_closebtn_area .mc_closebtn:hover {
  background: #F7F7F7;
}
/******************************************
 * ranking SP
 ******************************************/
.mc_rank_area_sp .mc_rank_title {
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #3F3F3F;
  margin-left: 20px !important;
  margin-bottom: 30px !important;
}
.mc_rank_area_sp .mc_rank_label {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 40px
}
.mc_rank_area_sp .mc_rank_label[data-rank="1"] {
  background: url(/voi/recommend/images/rank_01.svg) no-repeat;
}
.mc_rank_area_sp .mc_rank_label[data-rank="2"] {
  background: url(/voi/recommend/images/rank_02.svg) no-repeat;
}
.mc_rank_area_sp .mc_rank_label[data-rank="3"] {
  background: url(/voi/recommend/images/rank_03.svg) no-repeat;
}
.mc_rank_area_sp .mc_rank_label[data-rank="4"] {
  background: url(/voi/recommend/images/rank_04.svg) no-repeat;
}
.mc_rank_area_sp .mc_rank_label[data-rank="5"] {
  background: url(/voi/recommend/images/rank_05.svg) no-repeat;
}
.mc_rank_area_sp .mc_rank_label[data-rank="6"] {
  background: url(/voi/recommend/images/rank_06.svg) no-repeat;
}
.mc_rank_area_sp .mc_rank_label[data-rank="7"] {
  background: url(/voi/recommend/images/rank_07.svg) no-repeat;
}
.mc_rank_area_sp .mc_rank_label[data-rank="8"] {
  background: url(/voi/recommend/images/rank_08.svg) no-repeat;
}
.mc_rank_area_sp .mc_rank_label[data-rank="9"] {
  background: url(/voi/recommend/images/rank_09.svg) no-repeat;
}
.mc_rank_area_sp .mc_rank_label[data-rank="10"] {
  background: url(/voi/recommend/images/rank_10.svg) no-repeat;
}
/**
* 1位
*/
.mc_rank_area_sp .mc_rank_first_left a {
  position: relative;
  display: block;
}
.mc_rank_area_sp .mc_rank_first {
  display: flex;
}
.mc_rank_area_sp .mc_rank_first .mc_rank_first_right {
  margin-left: 20px;
}
.mc_rank_area_sp .mc_rank_first .mc_rank_first_right .mc_rank_first_brand {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #3F3F3F;
}
.mc_rank_area_sp .mc_rank_comment {
  margin-top: 5px;
}
.mc_rank_area_sp .mc_rank_star_rating {
  position: relative;
  width: 86px;
  height: 14px;
  display: inline-block;
}
.mc_rank_area_sp .mc_rank_star_rating[data-rate="0.00"] {
  background: url(/voi/sys_img/detail/comment_star_0.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="0.50"] {
  background: url(/voi/sys_img/detail/comment_star_0_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="1.00"] {
  background: url(/voi/sys_img/detail/comment_star_1.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="1.50"] {
  background: url(/voi/sys_img/detail/comment_star_1_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="2.00"] {
  background: url(/voi/sys_img/detail/comment_star_2.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="2.50"] {
  background: url(/voi/sys_img/detail/comment_star_2_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="3.00"] {
  background: url(/voi/sys_img/detail/comment_star_3.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="3.50"] {
  background: url(/voi/sys_img/detail/comment_star_3_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="4.00"] {
  background: url(/voi/sys_img/detail/comment_star_4.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="4.50"] {
  background: url(/voi/sys_img/detail/comment_star_4_5.svg) no-repeat;
  background-size: 86px 14px;
}

.mc_rank_area_sp .mc_rank_star_rating[data-rate="5.00"] {
  background: url(/voi/sys_img/detail/comment_star_5.svg) no-repeat;
  background-size: 86px 14px;
}
.mc_rank_area_sp .mc_rank_comaverage {
  margin-left: 10px !important;
}
.mc_rank_area_sp .mc_rank_comlink {
  margin-left: 5px !important;
}
.mc_rank_area_sp .mc_rank_first_price,
.mc_rank_area_sp .mc_rank_first_price em {
  margin-top: 8px;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  color: #3C3C3C;
}
.mc_rank_area_sp .mc_rank_first_price .mc_rank_yen {
  font-size: 10px;
}
.mc_rank_area_sp .mc_rank_first_price .mc_rank_red {
  color: #ff2d55;
}
/**
* 2位以降
*/
.mc_rank_area_sp .mc_rank_items {
  display: flex;
  margin-top: 30px;
}
.mc_rank_area_sp .mc_rank_items a {
  text-decoration: none !important;
  position: relative;
}
.mc_rank_area_sp .mc_rank_items .mc_rank_brand {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 24px;
  color: #3F3F3F;
  margin-top: 10px;
  margin-left: 5px;
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
}
.mc_rank_area_sp .mc_rank_items .mc_rank_price_area {
  margin-left: 5px;
}
.mc_rank_area_sp .mc_rank_items .mc_rank_price,
.mc_rank_area_sp .mc_rank_items .mc_rank_price em {
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: 19.5px;
  color: #3C3C3C;
}
.mc_rank_area_sp .mc_rank_items .mc_rank_price .mc_rank_yen {
  font-size: 10px;
  line-height: 15px;
}
.mc_rank_area_sp .mc_rank_items .mc_rank_price .mc_rank_red {
  color: #ff2d55;
}
.mc_rank_area_sp .mc_rank_morebtn_area .mc_morebtn,
.mc_rank_area_sp .mc_rank_closebtn_area .mc_closebtn {
  display: block;
  width: 335px;
  height: 50px;
  background: #FFFFFF;
  border: 1px solid #3F3F3F;
  border-radius: 6px;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 50px;
  text-align: center;
  color: #3F3F3F;
  cursor: pointer;
  margin: 20px auto 0 auto;
}
.mc_rank_area_sp .mc_rank_morebtn_area .mc_morebtn:hover,
.mc_rank_area_sp .mc_rank_closebtn_area .mc_closebtn:hover {
  background: #F7F7F7;
}

.mc_rank_area_sp .mc_rank {
  margin-bottom: 30px;
}