.ranking{
padding: 20px;
}

.ranking .r_h{
display: flex;
align-items: center;
background: #fff;
margin-bottom: 20px;
}

.ranking .r_h h1{
width: 55%;
}

.ranking .r_h h1 img{
display: block;
}

.ranking .r_h p{
width: 45%;
font-size: .8rem;
padding: 10px;
}

.ranking .girls{
padding: 0;
}

.ranking .girls:after{
content: "";
display: table;
clear: both;
}



.ranking .girl:before{
content: "";
display: block;
height: 60px;
width: 60px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
position: absolute;
top:5px;
left: 5px;
}

.ranking .girl{
width: calc(50% / 2);
float: left;
position: relative;
}

.ranking .girl:nth-of-type(1):before{background-image: url(../images/ranking/cs_no_1.png);}
.ranking .girl:nth-of-type(2):before{background-image: url(../images/ranking/cs_no_2.png);}
.ranking .girl:nth-of-type(3):before{background-image: url(../images/ranking/cs_no_3.png);}
.ranking .girl:nth-of-type(4):before{background-image: url(../images/ranking/cs_no_4.png);}
.ranking .girl:nth-of-type(5):before{background-image: url(../images/ranking/cs_no_5.png);}


.ranking .girl:nth-of-type(1){
width: 50%;
}


@media (max-width: 767px){
  .ranking{
    padding: 0;
  }
  .ranking .r_h{
    display: block;
  }
  
  .ranking .r_h h1,
  .ranking .r_h p{
    width: 100%;
  }
  
  .ranking .girl:nth-of-type(1),
  .ranking .girl:nth-of-type(2){
    width: 50%;
  }
  .ranking .girl{
    width: calc(100% / 3);
  }
}