:root {
  --color-black: #333;
  --color-light-black: #575757;
  --color-dark-black: #090909;
  --color-pure-black: #000;
  --color-white: #fff;
  --color-gray: #c9c9c9;
  --color-light-gray: #efefef;
  --color-dark-gray: #909090;
  --color-dark-gray-2: #8e8e8e;
}

.works {
  padding: 60px 0;
}
.works.--skew {
  transform: skew(0, -5deg);
}
.works.--skew > div {
  transform: skew(0, 5deg);
}
.works__inner {
  height: -moz-fit-content;
  height: fit-content;
  margin: 0 auto;
  max-width: 1100px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .works__inner {
    width: 82.98%;
  }
}
.works__inner.--wide {
  max-width: 1180px;
}
@media screen and (max-width: 767px) {
  .works__inner.--wide {
    width: 100%;
  }
}
.works__inner.--full {
  max-width: none;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .works__inner.--full {
    width: 100%;
  }
}
.works__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
  transform: skew(0, -5deg);
  transform-origin: left top;
  margin-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .works__list {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.works__link .hover-has-img__wrap {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}
.works__link .hover-has-img__wrap::after {
  content: "";
  background: var(--color-black);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.3s;
}
.works__link .hover-has-img__img {
  transition: 0.3s;
  width: 100%;
}
@media (hover: hover) {
  .works__link:where(:-moz-any-link, :enabled, summary):hover .hover-has-img__wrap::after {
    opacity: 0.2;
  }
  .works__link:where(:any-link, :enabled, summary):hover .hover-has-img__wrap::after {
    opacity: 0.2;
  }
  .works__link:where(:-moz-any-link, :enabled, summary):hover .hover-has-img__img {
    transform: scale(1.1);
  }
  .works__link:where(:any-link, :enabled, summary):hover .hover-has-img__img {
    transform: scale(1.1);
  }
}
.works .hover-has-img__wrap {
  margin-bottom: 4px;
}
.works__title {
  font: 500 14px/1.7857142857 "Noto Sans JP", "sans-serif";
}
.works .wp-pagenavi {
  display: flex;
}
.works .wp-pagenavi > * {
  border-left: 1px solid var(--color-black);
  font: 400 16px/1.25 "Noto Sans JP", "sans-serif";
  padding: 0 12px;
}
@media screen and (max-width: 767px) {
  .works .wp-pagenavi > * {
    font: 400 15px/1.3333333333 "Noto Sans JP", "sans-serif";
    padding: 0 8px;
  }
}
.works .wp-pagenavi > *:last-child {
  border-right: 1px solid var(--color-black);
}
.works .wp-pagenavi > *.current {
  color: var(--color-dark-gray-2);
}
.works .wp-pagenavi > a {
  transition: 0.3s;
}
@media (hover: hover) {
  .works .wp-pagenavi > a:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.8;
    color: var(--color-dark-gray-2);
    opacity: 1;
  }
  .works .wp-pagenavi > a:where(:any-link, :enabled, summary):hover {
    opacity: 0.8;
    color: var(--color-dark-gray-2);
    opacity: 1;
  }
}/*# sourceMappingURL=style.css.map */