@charset "UTF-8";

/*-------------------------------------------------------
	#news
-------------------------------------------------------*/
#news{
  padding: 100px 0;
}
#news .row{
  display: flex;
  width: 100%;
  padding: 50px 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #BABABA;
}
#news .block{
  display: flex;
  flex-wrap: nowrap;
}
#news .block:hover .thumbnail,
#news .block:active .thumbnail{
  opacity: 0.6;
}
#news .block:hover .text,
#news .block:active .text{
  color: #404040;
}
#news .block:hover .text h3,
#news .block:active .text h3{
  text-decoration: underline;
}
#news .thumbnail{
  width: 225px;
  min-width: 225px;
  height: 144px;
  min-height: 144px;
  background-color: #fff;
  box-shadow: 0px 0px 14px 0px #0000000D;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
#news .thumbnail img {
  object-fit: contain;
  width: 225px;
}
#news .text{
  width: 100%;
  max-height: 144px;
  overflow: hidden;
  padding-left: 20px;
  margin: auto 0;
}
#news .text h3{
  width: 100%;
  padding-bottom: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 24px;
}
#news .text p{
  text-align: justify;
  font-size: 14px;
  color: #777;
}
#news .text a,
#news .text div {
  display: block;
}
#news .substr{
  visibility: hidden;
  line-height: 1.75;
  color: #707070;
}
#news .not-found{
  width: 100%;
}

/*-------------------------------------------------------
	#pagination
-------------------------------------------------------*/
#pagination{
  display: flex;
  padding-top: 100px; 
  margin: 0 auto;
}
#pagination .page-numbers{
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  padding: 1.2rem 0.8rem;
  color: #f7f7f1;
  background-color: #e60012;
  cursor: pointer;
}
#pagination .page-numbers:not(:last-child){
  margin-right: 0.75rem;
}
#pagination .current{
  background-color: #a0a0a0;
}
#pagination .prev,
#pagination .next{
  padding: 0.9rem 0.75rem 1.5rem;
}
/*-------------------------------------------------------
	1023px以下で適用する内容.
-------------------------------------------------------*/
@media screen and (max-width:1023px){
  #news .text h3 {
    font-size: 20px;
  }
}
/*-------------------------------------------------------
	767px以下で適用する内容.
-------------------------------------------------------*/
@media screen and (max-width:767px){
  
  #news .block{
    flex-wrap: wrap;
    width: 100%;
  }
  #news .row{
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  #news .thumbnail{
    width: 100%;
    height: auto;
    text-align: center;
    display: block;
  }
  #news .text{
    width: 100%;
    max-height: none;
    padding-left: 0;
    margin-top: 1rem;
  }
  
}