: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;
}

.work-detail {
  padding: 60px 0;
  padding: 120px 0 60px;
}
.work-detail.--skew {
  transform: skew(0, -5deg);
}
.work-detail.--skew > div {
  transform: skew(0, 5deg);
}
@media screen and (max-width: 767px) {
  .work-detail {
    padding: 60px 0;
  }
}
.work-detail .parts-btn {
  margin: 0 auto;
}
.work-detail__inner {
  height: -moz-fit-content;
  height: fit-content;
  margin: 0 auto;
  max-width: 1100px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .work-detail__inner {
    width: 82.98%;
  }
}
.work-detail__inner.--wide {
  max-width: 1180px;
}
@media screen and (max-width: 767px) {
  .work-detail__inner.--wide {
    width: 100%;
  }
}
.work-detail__inner.--full {
  max-width: none;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .work-detail__inner.--full {
    width: 100%;
  }
}
.work-detail__title {
  font: 500 23px/1.4782608696 "Noto Sans JP", "sans-serif";
  letter-spacing: 0.92px;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .work-detail__title {
    font: 500 20px/1.45 "Noto Sans JP", "sans-serif";
    letter-spacing: 0.4px;
    margin-bottom: 20px;
  }
}
.work-detail__cat {
  display: none;
}
@media screen and (max-width: 767px) {
  .work-detail__cat {
    display: block;
    font: 500 11px/2.1818181818 "Noto Sans JP", "sans-serif";
    letter-spacing: 0;
    margin-bottom: 50px;
  }
}
.work-detail__kv {
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .work-detail__kv {
    margin-bottom: 50px;
  }
}
.work-detail__kv iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.work-detail__overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 100px;
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  .work-detail__overview {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 767px) {
  .work-detail__overview .parts-title-sec {
    margin-bottom: 30px;
  }
}
.work-detail__overview-text {
  letter-spacing: 0.28px;
}
.work-detail__introduction p {
  letter-spacing: 0.28px;
  margin-block-start: 2em;
  margin-block-end: 2em;
}
@media screen and (max-width: 767px) {
  .work-detail__introduction .parts-title-sec {
    margin-bottom: 30px;
  }
}
.work-detail__introduction-text {
  letter-spacing: 0.28px;
  margin-bottom: 80px;
}

.more-works {
  padding: 60px 0;
  padding: 60px 0 120px;
}
.more-works.--skew {
  transform: skew(0, -5deg);
}
.more-works.--skew > div {
  transform: skew(0, 5deg);
}
.more-works .parts-btn {
  margin: 0 auto;
  transition: 0.3s;
}
@media (hover: hover) {
  .more-works .parts-btn:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.8;
    transform: skewY(5deg);
  }
  .more-works .parts-btn:where(:any-link, :enabled, summary):hover {
    opacity: 0.8;
    transform: skewY(5deg);
  }
}
.more-works__inner {
  height: -moz-fit-content;
  height: fit-content;
  margin: 0 auto;
  max-width: 1100px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .more-works__inner {
    width: 82.98%;
  }
}
.more-works__inner.--wide {
  max-width: 1180px;
}
@media screen and (max-width: 767px) {
  .more-works__inner.--wide {
    width: 100%;
  }
}
.more-works__inner.--full {
  max-width: none;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .more-works__inner.--full {
    width: 100%;
  }
}
.more-works__contents {
  transform: skewY(-5deg);
}
.more-works__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .more-works__list {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.more-works__link .hover-has-img__wrap {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}
.more-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;
}
.more-works__link .hover-has-img__img {
  transition: 0.3s;
  width: 100%;
}
@media (hover: hover) {
  .more-works__link:where(:-moz-any-link, :enabled, summary):hover .hover-has-img__wrap::after {
    opacity: 0.2;
  }
  .more-works__link:where(:any-link, :enabled, summary):hover .hover-has-img__wrap::after {
    opacity: 0.2;
  }
  .more-works__link:where(:-moz-any-link, :enabled, summary):hover .hover-has-img__img {
    transform: scale(1.1);
  }
  .more-works__link:where(:any-link, :enabled, summary):hover .hover-has-img__img {
    transform: scale(1.1);
  }
}