.contents_card_list{
  margin:0;
  padding:0;
  display:grid;
  gap:2.4rem;
  justify-content:space-between;
}
{# カード数が3つの時は3列 #}
.three-li {
  grid-template-columns:1fr 1fr 1fr;
}
{# カード数が4つの時は4列 #}
.four-li {
  grid-template-columns:1fr 1fr 1fr 1fr;
}

.content_item{
  margin:0;
  padding:0;
  list-style:none;
  width:100%;;
  border-radius:2rem;
  overflow:hidden;
  background-color:#fff;
  box-shadow: 0 0 .9rem 0 rgba(0, 0, 0, 0.35);
}

.content_item > a{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.content_img_wrapper{
    aspect-ratio: 16 / 9;
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  overflow:hidden;
}
.content_img_wrapper > img{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  object-fit:cover;
  transition:all .3s;
}
.content_text_area{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:0;
  margin:0;
  padding: 1.4rem 1.6rem 2.4rem 1.6rem;
}
.content_heading{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:.8rem;
  margin:0;
  padding:0;
}
.content_heading > h3{
  margin:0;
  padding:0;
  font-size:2.4rem;
  font-weight:700;
  color:#DC0032;
}
.content_heading > h4{
  margin:0;
  padding:0;
  font-size:1.6rem;
  font-weight:700;
  color:#DC0032;
}

.content_text_area > p{
  margin:0;
  padding:0;
  font-size:1.6rem;
  font-weight:700;
  color:#000;
}
.content_item:hover > a > .content_img_wrapper > img{
  width:110%;
}
@media screen and (min-width: 769px){
  .content_item:hover > a > .content_img_wrapper > img{
    width:110%;
  }
}
@media screen and (max-width: 1420px){
  .contents_card_list {
    grid-template-columns:1fr 1fr;
  }
  .content_item > a{
    width:100%;
  }
  .content_img_wrapper{
    width:100%;
  }
  .content_text_area{
    width:100%;
  }
}
@media screen and (max-width: 768px){
  .contents_card_list{
    column-gap:min(1.6rem);
    row-gap:2.4rem;
  }
  .content_text_area{
    gap:1.6rem;
  }
  .content_heading{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:0;
  }
  .content_heading h3{
    font-size:2rem;
  }
  .content_heading h4{
    font-size:1.2rem;
  }
  .content_text_area p{
    font-size:1.2rem;
  }
}