.discription__area {
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 150px;
}
@media screen and (max-width: 767px) {
  .discription__area {
    margin-top: 30px;
    margin-bottom: 75px;
  }
}
.discription__inner {
  width: 90%;
  max-width: 1300px;
  margin-inline: auto;
}
.discription__head {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--c_black);
}
@media screen and (max-width: 767px) {
  .discription__head {
    gap: 20px;
  }
}
.discription__wrapper {
  padding-block: 60px 100px;
}
@media screen and (max-width: 767px) {
  .discription__wrapper {
    padding-block: 30px 50px;
  }
}
.discription__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.discription__cat-box {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .discription__cat-box {
    gap: 5px;
  }
}
.discription__cat {
  background: var(--c_black);
  color: var(--c_white);
  font-size: 12px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.5em 1em;
  border-radius: 14px;
}
.discription__title {
  font-size: 40px;
  font-family: var(--zen-old-mincho);
}
@media screen and (max-width: 767px) {
  .discription__title {
    font-size: 28px;
  }
}
.discription__info {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.discription__company {
  font-size: 20px;
  color: var(--c_black);
  opacity: 0.5;
}
.discription__tags {
  display: flex;
  gap: 1em;
  flex-flow: row wrap;
}
.discription__tag {
  font-size: 14px;
  opacity: 0.5;
}
.discription__mv {
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  .discription__mv {
    margin-bottom: 50px;
  }
}
.discription__list {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 42.3%);
  padding-block: 90px;
  background: var(--c_grey);
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .discription__list {
    grid-template-columns: 1fr;
    padding-block: 30px;
    padding-inline: calc(50vw - 50%);
  }
}
.discription__item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  gap: 100px;
  padding-block: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 767px) {
  .discription__item {
    grid-column: unset;
    gap: 20px;
    padding-block: 20px;
  }
}
.discription__item:first-child {
  padding-top: 0;
}
.discription__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.discription__term {
  font-size: 18px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .discription__term {
    font-size: 16px;
  }
}
.discription__disc {
  font-size: 14px;
  line-height: 2.1428571429;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .discription__disc {
    font-size: 12px;
  }
}
.discription__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.detail__area {
  margin-top: 100px;
}
@media screen and (max-width: 767px) {
  .detail__area {
    margin-top: 50px;
  }
}
.detail__inner {
  width: 90%;
  max-width: 1300px;
  margin-inline: auto;
}
.detail__top {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
@media screen and (max-width: 767px) {
  .detail__top {
    gap: 25px;
  }
}
.detail__fig--w100p {
  width: 100%;
}
.detail__fig--w50p {
  width: calc(50% - 10px);
}
.detail__cap {
  font-size: 14px;
  line-height: 2.1428571429;
  letter-spacing: 0.02em;
  margin-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .detail__cap {
    margin-bottom: 60px;
    font-size: 12px;
  }
}
.detail__cap--mb0 {
  margin-bottom: 0;
}
.detail__unit--mt {
  margin-top: 120px;
}
@media screen and (max-width: 767px) {
  .detail__unit--mt {
    margin-top: 60px;
  }
}
.detail__heading {
  display: flex;
  gap: 8px;
  align-items: center;
  transition: opacity 0.3s;
  margin-bottom: 40px;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  .detail__heading {
    margin-bottom: 20px;
  }
}
.detail__heading--mt {
  margin-top: 120px;
}
@media screen and (max-width: 767px) {
  .detail__heading--mt {
    margin-top: 60px;
  }
}
@media (hover) {
  .detail__heading:is(a):hover .detail__title {
    opacity: 0.7;
  }
  .detail__heading:is(a):hover .detail__logo {
    background: var(--c_white);
  }
  .detail__heading:is(a):hover .detail__arrow {
    background: var(--c_orange);
  }
}
@media screen and (max-width: 767px) {
  .detail__title {
    font-size: 14px;
  }
}
.detail__logo {
  background-color: var(--c_orange);
  border: 1px solid var(--c_orange);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  transition: background 0.3s;
}
.detail__arrow {
  -webkit-mask-image: url(../../img/works/common/logo_arrow.svg);
          mask-image: url(../../img/works/common/logo_arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background: #fff no-repeat;
  width: 7px;
  height: auto;
  aspect-ratio: 7/12;
}
.detail__image {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
}
.detail__video {
  width: 90%;
  height: auto;
  max-width: 1110px;
  aspect-ratio: 16/9;
  margin-inline: auto;
  border: 2px solid #f2f2f2;
  display: grid;
  place-items: center;
}

.member__list {
  padding-top: 70px;
  border-top: 1px solid var(--c_black);
  display: grid;
  grid-template-columns: auto auto;
}
@media screen and (max-width: 767px) {
  .member__list {
    padding-top: 35px;
    grid-template-columns: 1fr;
    gap: 50px;
  }
}
.member__left {
  font-size: 20px;
}
.member__right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
@media screen and (max-width: 767px) {
  .member__right {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}
.member__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
.member__term {
  font-size: 12px;
  opacity: 0.5;
}
@media screen and (max-width: 767px) {
  .member__term {
    font-size: 10px;
  }
}
.member__disc {
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .member__disc {
    font-size: 14px;
  }
}
/*# sourceMappingURL=single-works.css.map */