@charset "utf-8";

#news{
margin-bottom: 60px;
}
#news h2{
font: 1.45em "游明朝", YuMincho, "ヒラギノ明朝 Pro", "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, serif;
color: #FFF;
font-weight: bold;
/*border-radius: 5px;*/
padding: 5px 20px;
/*margin-bottom: 10px;*/
background-color: #080d49;
}
#news ul{
padding: 0;
margin: 0;
}
#news ul li{
list-style: none;
color: #080d49;
}
#news ul li a {
/*margin: 0 0 30px 0;*/
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
text-decoration: none;
border-bottom: 1px solid #bebfcb;
}
#news ul li a:hover{
background-color: #eaebf4;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
-ms-transition:0.4s;
transition:0.4s;
}
#news ul li a:hover .icon:before,
#news ul li a:hover .icon:after,
#news ul li a:hover .date,
#news ul li a:hover .title {
opacity: 0.8;
transition: all 0.4s;
}

#news .icon{
width: 5%;
margin-right: 1%;
}
#news .date {
position: relative;
width: 17%;
padding: 20px 0px;
margin-right: 1%;
margin-left: 0;
}
#news .title {
width: 76%;
padding: 20px 0;
margin-left: 0;
}

#news .icon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
bottom: 0;
left: 16px;
margin: auto;
box-sizing: border-box;
border: 5px solid transparent;
border-left: 8px solid #fff;
z-index: 2;
}
#news .icon:after {
position: absolute;
top: 0;
bottom: 0;
left: 16px;
margin: auto;
content: "";
width: 16px;
height: 16px;
background-color: #080d49;
border: 1px solid #080d49;
border-radius: 9px;
z-index: 1;
margin-left: -6px;
}

#news .links{
text-align: right;
}
#news .links a{
text-decoration: none;
}
#news .links a:hover{
text-decoration: underline;
}

@media screen and (max-width:736px) {
  #news .icon{
  width: 100%;
  margin-right: 0;
  }
  #news .date {
  width: 100%;
  padding: 20px 0 0;
  margin-right: 0;
  margin-left: 40px;
  font-size: 0.9em;
  }
  #news .title {
  width: 100%;
  padding: 0 0 20px;
  margin-left: 40px;
  }
}