#sub_main .ttl span::before {
  background: url(../img/media/icon_media.svg) no-repeat;
  background-size: contain;
}
.media_list {
  gap: 40px 3.5%;
}
.media_list > li {
  width: 31%;
  display: flex;
  flex-direction: column;
}
.media_list > li a {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.media_list > li .ttl {
  font-size: 18px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  text-align: center;
}
.media_list > li .photo {
  margin-bottom: 15px;
}
.media_list > li .photo img {
  aspect-ratio: 1.618 / 1;
  object-position: center;
}
.media_list > li .content_inner {
  padding: 24px 26px 24px;
  flex: auto;
}
.media_list > li a::before {
  content: '';
  background: url(../img/voice/icon_circle_arrow.svg) no-repeat;
  background-size: contain;
  width: 41px;
  height: 32px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.media_list .post_terms {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.media_list .post_terms li {
  color: #fff;
  font-size: 14px;
  line-height: 1.0;
  background: #06b7a8;
  padding: 0.35em 0.75em 0.45em;
}
.media_list .video_wrapper {
  margin-bottom: 15px;
}
.media_list .video_wrapper video {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1.618 / 1;
  max-width: 100%;
  display: block;
}

@media only screen and (max-width: 960px) {
  .media_list {
    gap: 30px 4%;
  }
  .media_list > li {
      width: 48%;
  }
}
@media only screen and (max-width: 568px) {
  .media_list {
    gap: 30px;
  }
  .media_list > li {
      width: 100%;
  }
  .media_list > li .ttl {
    padding: 11px 20px 12px;
  }
  .media_list > li .content_inner {
    padding: 15px 20px 25px;
  }
}