@charset "utf-8";

.topiclist li article h3,
.topiclist li article .body{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#ranking #wrap h3 {
    font-weight: bold;
    padding:2% 1%;
    font-size: 1.8rem;
}

/*LIST*/


.topiclist {
  margin: 30px 0 10%;
}

.topiclist li{
  width:96%;
  display: block;
  overflow: hidden;
  position: relative;
  margin:0 auto 2%;
}
.topiclist li .ph {
  float:left;
  width: 50%;
}
.topiclist li .ph div{
  border-radius: 50%;
  height: 400px;
  overflow: hidden;
  width: 400px;
  margin:auto;
}

.topiclist li .ph img{
}

.topiclist li article{
    text-align: center;
    width: 50%;
    padding:1%;
    box-sizing: border-box;
   line-height:1.6;
   float:left;
}

#wrap article h3{
   font-size:2.8rem;
   font-weight: bold;
}
.topiclist li article .rankno{
letter-spacing: 0.4rem;
font-size: 1rem;
font-weight: bold;
}
#wrap li article .body{
   font-size:1.4rem;
}
#wrap li article .catch{
    font-size:2rem;
   text-align:center;
}
#wrap li article .comment{
  font-size:1.2rem;
  text-align:left;
  margin-top:5px;
}
#wrap li .ph .list_rank{
    left:0%;
    position: absolute;
    top: 5%;
    width: 22%;
    max-width:140px;
}

@media screen and (max-width: 980px) {
  .topiclist li .ph {
    width: 40%;
  }
  .topiclist li article{
      width: 60%;
  }
}


@media screen and (max-width: 768px) {
  #ranking #wrap h3 {
      font-size: 1.4rem;
  }

.topiclist {
    margin-top: 10px;
}
.topiclist li .ph div{
  height: 300px;
  width: 300px;
}
  .topiclist li article {
  padding: 2%;
  }

  #wrap article h3 {
      font-size: 2rem;
  }
  .topiclist li article .body{
   font-size:1.2rem;
  }
  #wrap li article .catch{
    font-size:1.4rem;
  }

#wrap li article .comment {
    font-size: 1rem;
}
#wrap li .ph .list_rank{
    max-width:100px;
    top:0;
}
}


@media screen and (max-width: 480px) {
.topiclist li{
  width:98%;
  margin: 0 auto 3%;
  }
  .topiclist li .ph {
    width: 45%;
  }
  .topiclist li article{
  width: 55%;
  }

  .topiclist li article .rankno{
  font-size: 0.8rem;
  }
.topiclist li article .body{
 font-size:1rem;
}
  #wrap li article .catch{
    font-size:1.1rem;
  }

  .topiclist li .ph div{
    height: 200px;
    width: 200px;
  }
  #wrap article h3{
   font-size:1.4rem;
  }
  #wrap li .ph .list_rank{
      max-width:60px;
  }

}