.top_ranking{
  width:100%;
  margin-bottom:80px;
}
@media screen and (max-width: 768px) {
  .top_ranking{
    margin-bottom:45px;
  }
}
.top_ranking__area{
  max-width:960px;
  margin:auto;
}
@media screen and (max-width: 960px) {
  .top_ranking__area{
    padding:0 15px;
  }
}
@media screen and (max-width: 768px) {
  .top_ranking__area{
    padding:0 15px;
  }
}
.top_ranking__title{
  text-align:center;
  margin-bottom:50px;
}
@media screen and (max-width: 768px) {
  .top_ranking__title{
    margin-bottom:25px;
  }
}
.top_ranking__title h2{
  font-size:36px;
  font-weight:bold;
  text-align:center;
}
@media screen and (max-width: 768px) {
  .top_ranking__title h2{
    font-size:23px;
  }
}
.top_ranking__title span{
  font-size:15px;
  font-weight:normal;
  text-align:center;
  color:#666;
}
@media screen and (max-width: 768px) {
  .top_ranking__title span{
    font-size:11px;
    color:#828282;
  }
}
.top_ranking__contentarea{
  margin-bottom:50px;
}
@media screen and (max-width: 768px) {
  .top_ranking__contentarea{
    margin-bottom:25px;
  }
}
.top_ranking__contentarea:last-child{
  margin-bottom:0px;
}
.top_ranking__content-title{
  margin-bottom:30px;
}
@media screen and (max-width: 768px) {
  .top_ranking__content-title{
    margin-bottom:15px;
  }
}
.top_ranking__content-title h3{
  display: flex;
  align-items: center;
  font-size:26px;
  color:#333;
}
@media screen and (max-width: 768px) {
  .top_ranking__content-title h3{
    font-size:16px;
  }
}
.top_ranking__content-title h3:before, .top_ranking__content-title h3:after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: #ddd;
  display: block;
}
.top_ranking__content-title h3:before {
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .top_ranking__content-title h3:before {
    margin-right: 5px;
  }
}
.top_ranking__content-title h3:after {
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .top_ranking__content-title h3:after {
    margin-left: 5px;
  }
}
.top_ranking__content{
  display:flex;
}
@media screen and (max-width: 768px) {
  .top_ranking__content{
    justify-content: space-around;
  }
}
.top_ranking__block{
  width:20%;
  margin-right:20px;
  position:relative;
}
@media screen and (max-width: 768px) {
  .top_ranking__block{
    width:33%;
    margin-right:10px;
  }
}
.top_ranking__block:last-child{
  margin-right:0px;
}
@media screen and (max-width: 768px) {
  .top_ranking__block:nth-child(3){
    margin-right:0px;
  }
  .top_ranking__block:nth-child(4){
    display:none;
  }
  .top_ranking__block:nth-child(5){
    display:none;
  }
}
.top_ranking__block-name{
  font-size:14px;
  color:#333;
  margin-bottom:10px;
  font-weight:normal;
}
@media screen and (max-width: 768px) {
  .top_ranking__block-name{
    font-size:12px;
  }
}
.top_ranking__block-price{
  font-size:12px;
  color:#828282;
  font-weight:normal;
}
@media screen and (max-width: 768px) {
  .top_ranking__block-price{
    font-size:11px;
  }
}
.top_ranking__block-image{
  margin-bottom:10px;
}
.top_ranking__block-rank{
  color:#fff;
  padding:2px 10px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .top_ranking__block-rank{
    font-size:11px;
    padding:2px 10px;
    
  }
}
.top_ranking__block:nth-child(1) .top_ranking__block-rank{
  background-color:#fdc116;
}
.top_ranking__block:nth-child(2) .top_ranking__block-rank{
  background-color:#aac0d2;
}
.top_ranking__block:nth-child(3) .top_ranking__block-rank{
  background-color:#a87156;
}
.top_ranking__block:nth-child(4) .top_ranking__block-rank{
  background-color:#a6a6a6;
}
.top_ranking__block:nth-child(5) .top_ranking__block-rank{
  background-color:#a6a6a6;
}