@keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}
.banner.blog-listing-banner {
  padding: 172px 0 92px;
}
@media only screen and (max-width: 675px) {
  .banner.blog-listing-banner {
    padding: calc(var(--headerheight) + 5rem) 0 3rem;
  }
}
.banner.blog-listing-banner .content {
  max-width: 555px;
  margin-left: auto;
  margin-right: auto;
}

.blog-col .figure {
  display: block;
  line-height: 0;
  position: relative;
}
.blog-col .figure::before {
  content: "";
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: white;
  box-shadow: 0 0 55px 12px white;
  transform: skewX(-20deg);
  z-index: 1;
}
.blog-col .figure:hover::before {
  animation: shine 0.4s linear;
  animation-fill-mode: none;
}
.blog-col .figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1.4;
  -o-object-fit: cover;
     object-fit: cover;
}
.blog-col .figcaption {
  padding-top: 1rem;
}
.blog-col .figcaption .ttl {
  font-size: 24px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media only screen and (max-width: 675px) {
  .blog-col .figcaption .ttl {
    font-size: 22px;
  }
}
.blog-col .figcaption .ttl:is(a) {
  color: var(--black);
}
.blog-col .figcaption .ttl:hover {
  color: var(--primary);
}
.blog-col .figcaption p {
  line-height: 20px;
  color: var(--text);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media only screen and (max-width: 675px) {
  .blog-col .figcaption p {
    font-size: 14px;
  }
}

.blog-listing-secA .blog-list-wrap {
  grid-gap: 60px 20px;
}/*# sourceMappingURL=blog.css.map */