@charset "utf-8";

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


/*LIST*/


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

#wrap ul li .ph img{
}

#wrap ul 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;
   color:#DC001D;
   font-weight: bold;
}
#wrap ul 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;
   color:#844600;
   text-align:center;
}
#wrap li article .comment{
  font-size:1.2rem;
  text-align:left;
}
#wrap li .ph .list_rank{
    left:0%;
    position: absolute;
    top: 5%;
    width: 22%;
    max-width:150px;
}






@media screen and (max-width: 768px) {
#wrap ul {
    margin-top: 10px;
}
#wrap ul li .ph div{
  height: 300px;
  width: 300px;
}
  #wrap ul li article {
  padding: 2%;
  /* border-radius: 20px; */
  }

  #wrap article h3 {
      font-size: 2rem;
  }
  #wrap ul 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;
}
}


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

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

  #wrap ul li .ph div{
    height: 200px;
    width: 200px;
  }
  #wrap article h3{
   font-size:1.4rem;
  }
  #wrap li .ph .list_rank{
      /*top:60%;*/
  }

}