@charset "utf-8";
/* CSS Document */


/* 全体 */
#wordpress_blog{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;    
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}    

/* カード */
.wp-article{
  display:flex;
  flex-direction:column;
  height:100%;
}    
/* サムネ */
.eyecatch{
  display:block;
  overflow:hidden;
  border-radius:5px;
  margin-bottom:16px;
}    
.eyecatch img{
  width:100%;
  aspect-ratio: 16 / 10;
  object-fit:cover;
  display:block;
  transition:0.3s;
}
.eyecatch:hover img{
  transform:scale(1.05);
}  
    

/* タイトル */
.wp-article h3{
  font-size:20px;
  line-height:1.6;
  margin:0 0 14px;
  font-weight:700;
　text-align: left;
}
.wp-article h3 a{
  color:#5c3b3b;
  text-decoration:none;
}
/* 抜粋 */
.wp-article p{
  font-size:14px;
  line-height:1.8;
  margin:0 0 24px;
  color:#666;
    
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;

  overflow:hidden;

}
/* excerpt内のpタグ対策 */
.wp-article p p{
  margin:0;
}    
.readmore{
  margin-top:auto;
  display:inline-block;
  padding:14px 24px;
  border-radius:3px;

  background-color:#e6dedf;

  text-decoration:none;
  color:#5c3b3b;
  font-size:16px;

  transition:.4s;

  width:60%;
  text-align:center;
  margin:0 auto;

  border:1px solid transparent;
  box-sizing:border-box;
}

.readmore:hover{
  background:#FFF;
  border:1px solid #5c3b3b;
  color:#3f2525;
}
    
/* タブレット */
@media screen and (max-width:1024px){

  #wordpress_blog{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }

}
/* スマホ */
@media screen and (max-width:767px){

  #wordpress_blog{
    grid-template-columns:1fr;
    gap:40px;
  }

  .wp-article h3{
    font-size:18px;
  }

}