.news ul li a {
  display: flex;
  padding-bottom: 20px;
  align-items: center;
}
.news ul li{
  border-bottom: 1px solid #555;
  margin-bottom: 20px;

}
.news ul li a span.date{
  margin-right: 30px;
  width: 15%;
}
.news span.icon{
  padding: 5px 20px;
  color: #fff;
  border-radius: 10px;
  width: 7%;
  text-align: center;
  margin-right: 5%;
  font-size: 1.4rem;
}
.news span.icon.new{
  background-color: #0cbce2;
}
.news span.icon.update{
  background-color: #34c23e;
}
.news ul li a span.ttl{
  width: 60%;
}
.news h2:before{
  content: none;
 }
.news h2{
  font-weight: normal;
}
.news .detail{
  margin-top: 30px;
}
.news .detail .img img{
  display: block;
  max-width: 100%;
  margin: 80px auto;
}
.news .detail .flex{
  display: flex;
}
.news .detail .flex .img:nth-child(odd){
  margin-right: 3%;
}

.news .category span.icon{
  margin-right: 20px;
}
.news .btn {
  margin-top: 80px;
}
  @media screen and (max-width: 1300px){

  }

  @media screen and (max-width: 1000px){
    .news ul li a {
      display: block;
    }
    .news ul li a span.icon{
      display: inline-block;
      width: auto;
      padding: 0px 10px;
      font-size: 1.2rem;
    }    
    .news ul li a span.ttl{
      display: block;
      width: 100%;
    }
    .news ul li a span.date{
      display: block;
      width: 100%;
    }    
  }


  @media screen and (max-width: 800px){
  
  }

  @media screen and (max-width:500px){
    .about .guideline .flex .box .number{
      font-size: 5rem;
      top: -30px;
    }
    .about .guideline .flex .box .img{
      background-size: 30vw;
      right: -60px;
    }
    .news .detail .flex{
      display: block;
    }
    .news .detail .img img{
      margin: 30px auto;
      }
    }
  }