/*
 * PLUS-FOLIO
 * WORKS LIST + WORK DETAIL
 *
 * style.cssより後に読み込みます。
 * HERO / SKILL SYSTEMには触れません。
 */

/* =========================================================
   WORKS SECTION
========================================================= */

.works-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      60rem 36rem at 14% 12%,
      rgba(221, 160, 177, 0.05),
      transparent 70%
    ),
    radial-gradient(
      60rem 40rem at 88% 30%,
      rgba(156, 180, 204, 0.07),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #faf9f7 0%,
      #f4f3f1 72%,
      #f7f6f3 100%
    );
}

.works-section .section-head {
  padding-bottom: clamp(3rem, 4vw, 4.4rem);
  border-bottom: 1px solid rgba(24, 24, 24, 0.12);
}

.works-section .section-head h2 {
  color: #59595b;
  text-transform: uppercase;
}

.works-section .section-head__copy {
  color: rgba(24, 24, 24, 0.58);
}

.works-render {
  width: 100%;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap:
    clamp(5rem, 7vw, 12rem)
    clamp(2.4rem, 4vw, 4.8rem);

  margin-top: clamp(4.2rem, 6vw, 7.6rem);
}

/* =========================================================
   WORK CARD
========================================================= */

.works-card {
  min-width: 0;
}

.works-card--featured {
  grid-column: auto;
}

.works-card__link {
  display: block;
}

.works-card__media {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  aspect-ratio: 4 / 3;

  background:
    linear-gradient(
      145deg,
      #d8d6d2,
      #aaa9ad
    );
}

.works-card__media {
  aspect-ratio: 16 / 9;
}

.works-card__media::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 64%,
      rgba(0, 0, 0, 0.09) 100%
    );
}

.works-card__image,
.works-card__placeholder {
  display: block;

  width: 100%;
  height: 100%;

  transition:
    transform 0.75s var(--ease),
    filter 0.75s ease;
}

.works-card__image {
  object-fit: cover;
  object-position: center;
}

.works-card__placeholder {
  background:
    radial-gradient(
      70% 90% at 18% 18%,
      rgba(247, 211, 220, 0.9),
      transparent 60%
    ),
    radial-gradient(
      75% 85% at 82% 22%,
      rgba(183, 203, 224, 0.88),
      transparent 62%
    ),
    radial-gradient(
      60% 75% at 62% 82%,
      rgba(237, 193, 159, 0.74),
      transparent 62%
    ),
    linear-gradient(
      135deg,
      #8f8f94 0%,
      #b3b2b7 48%,
      #7f8188 100%
    );
}

.works-card__link:hover .works-card__image,
.works-card__link:hover .works-card__placeholder {
  transform: scale(1.025);
  filter: brightness(0.96);
}

.works-card__number {
  display: none;
}

.works-card__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.6rem;
  align-items: end;

  padding-top: 1.8rem;
}

.works-card__title {
  margin: 0;

  color: #59595b;

  font-family:
    "LINE Seed JP",
    "Noto Sans JP",
    sans-serif;

  font-size: clamp(1.8rem, 1.9vw, 2.6rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.works-card__tags {
  margin-top: 1.2rem;

  color: rgba(24, 24, 24, 0.45);

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.works-card__view {
  display: inline-flex;
  align-items: center;
  gap: 1rem;

  padding-bottom: 0.5rem;

  border-bottom:
    1px solid
    rgba(24, 24, 24, 0.3);

  color: rgba(24, 24, 24, 0.76);

  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

.works-card__view > span {
  transition:
    transform 0.3s
    var(--ease);
}

.works-card__link:hover
.works-card__view > span {
  transform:
    translate(
      4px,
      -3px
    );
}

/* =========================================================
   WORK DETAIL
========================================================= */

.work-detail {
  min-height: 100svh;

  padding:
    calc(var(--header-h) + 2.4rem)
    0
    clamp(9rem, 12vw, 16rem);

  color: #59595b;

  background:
    radial-gradient(
      64rem 42rem at 9% 8%,
      rgba(223, 143, 149, 0.05),
      transparent 70%
    ),
    radial-gradient(
      72rem 50rem at 92% 26%,
      rgba(159, 185, 203, 0.065),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #faf9f7 0%,
      #f4f3f1 100%
    );
}

.work-detail__back {
  margin-bottom: clamp(2.4rem, 4.8vw, 3.2rem);
}

.work-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;

  padding-bottom: 0.5rem;

  border-bottom:
    1px solid
    rgba(24, 24, 24, 0.28);

  color: rgba(24, 24, 24, 0.66);

  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.work-detail__header {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(26rem, 0.55fr);

  gap: clamp(3.6rem, 7vw, 8rem);
  align-items: start;
}

.work-detail__title {
  margin-top: 1.4rem;

  color: #59595b;

  font-family:
    "LINE Seed JP",
    "Noto Sans JP",
    sans-serif;

  font-size: clamp(2.4rem, 4vw, 4.8rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.045em;
}

.work-detail__caption {
  margin-top: 2rem;

  color: rgba(24, 24, 24, 0.48);

  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.work-detail__meta {

}

.work-detail__meta > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.8rem;

  padding: 1.2rem 0;

  border-bottom:
    1px solid
    rgba(24, 24, 24, 0.14);

  font-size: 1.5rem;
  line-height: 1.65;
}

.work-detail__meta dt {
  color: rgba(24, 24, 24, 0.4);

  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.work-detail__meta dd {
  margin: 0;

  color: rgba(24, 24, 24, 0.67);
}

.work-detail__hero {
  margin:
    clamp(5rem, 7vw, 7.4rem)
    0
    0;

  overflow: hidden;

  background: #d8d6d2;
}

.work-detail__hero img {
  display: block;

  width: 100%;
  height: auto;

  max-width: none;
}

.work-detail__content {
  display: grid;
  grid-template-columns:
    minmax(12rem, 18rem)
    minmax(0, 72rem);

  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: start;

  margin-top: clamp(5rem, 7vw, 7.4rem);
}

.work-detail__content-label {
  padding-top: 0.4rem;

  color: rgba(24, 24, 24, 0.42);

  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.15em;
}

.work-detail__body {
  color: rgba(24, 24, 24, 0.67);

  font-size: 1.5rem;
  line-height: 2.08;
}

.work-detail__body > * + * {
  margin-top: 2rem;
}

.work-detail__body h2,
.work-detail__body h3,
.work-detail__body h4 {
  color: #59595b;

  font-family:
    "LINE Seed JP",
    "Noto Sans JP",
    sans-serif;

  line-height: 1.45;
}

.work-detail__body h2 {
  margin-top: 5.2rem;

  font-size:
    clamp(
      2.6rem,
      4vw,
      4rem
    );

  letter-spacing: -0.035em;
}

.work-detail__body h3 {
  margin-top: 4rem;

  font-size:
    clamp(
      2rem,
      2.6vw,
      2.8rem
    );

  letter-spacing: -0.025em;
}

.work-detail__body a {
  border-bottom:
    1px solid
    rgba(24, 24, 24, 0.32);
}

.work-detail__body img {
  width: 100%;
  height: auto;

  margin-top: 2rem;
}

.work-detail__gallery {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    clamp(
      2rem,
      4vw,
      4.8rem
    );

  margin-top:
    clamp(
      7rem,
      10vw,
      12rem
    );
}

.work-detail__gallery-item {
  margin: 0;
}

.work-detail__gallery-item img {
  display: block;

  width: 100%;
  height: auto;

  background: #dedcd8;
}

.work-detail__gallery-item figcaption {
  margin-top: 0.9rem;

  color: rgba(24, 24, 24, 0.34);

  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.work-detail__site-link-wrap {
  margin-top: clamp(2.8rem, 3.5vw, 4rem);
}

.work-detail__site-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 1.6rem;

  width: fit-content;
  max-width: 100%;

  padding: 1.25rem 2.1rem;

  border:
    1px solid
    rgba(24, 24, 24, 0.4);

  border-radius: 999px;

  color: rgba(24, 24, 24, 0.78);
  background: transparent;

  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.work-detail__site-link-arrow {
  display: inline-block;

  transition:
    transform 0.3s
    var(--ease);
}

.work-detail__site-link:hover {
  color: #ffffff;

  background:
    rgba(24, 24, 24, 0.88);

  border-color:
    rgba(24, 24, 24, 0.88);
}

.work-detail__site-link:hover
.work-detail__site-link-arrow {
  transform:
    translate(
      4px,
      -3px
    );
}

/* =========================================================
   NEXT PROJECT
========================================================= */

.work-detail__next {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;

  margin-top:
    clamp(
      8rem,
      12vw,
      15rem
    );

  padding-top: 2.8rem;

  border-top:
    1px solid
    rgba(24, 24, 24, 0.16);
}

.work-detail__next-label {
  color: rgba(24, 24, 24, 0.4);

  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.work-detail__next-title {
  color: #59595b;

  font-family:
    "LINE Seed JP",
    "Noto Sans JP",
    sans-serif;

  font-size:
    clamp(
      2.4rem,
      2.4vw,
      4.0rem
    );

  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.045em;
  text-align: right;
}

.work-detail__next-title > span {
  display: inline-block;

  font-size: 0.58em;

  transition:
    transform 0.35s
    var(--ease);
}

.work-detail__next:hover
.work-detail__next-title > span {
  transform:
    translate(
      6px,
      -6px
    );
}

/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 767px) {

  .works-section .section-head {
    padding-bottom: 3.2rem;
  }

  .works-grid {
    grid-template-columns: 1fr;

    gap: 5.4rem;

    margin-top: 4rem;
  }

  .works-card--featured {
    grid-column: auto;
  }

  .works-card__media,
  .works-card--featured .works-card__media {
    aspect-ratio: 16 / 9;
  }

  .works-card__number {
    top: 1.2rem;
    left: 1.3rem;

    font-size: 0.85rem;
  }

  .works-card__meta {
    grid-template-columns: 1fr;

    gap: 2.4rem;

    padding-top: 1.6rem;
  }

  .works-card__title {
    font-size: 2.2rem;
  }

  .works-card__tags {
    font-size: 0.9rem;
  }

  .works-card__view {
    justify-self: start;

    font-size: 1.2rem;
  }

  /* WORK DETAIL */

  .work-detail {
    padding:
      calc(var(--header-h) )
      0
      9rem;
  }

  .work-detail__back {
    margin-bottom: 4rem;
  }

  .work-detail__header {
    grid-template-columns: 1fr;

    gap: 3.4rem;
  }

  .work-detail__title {
    font-size: clamp(2.4rem, 9.0vw, 4.0rem);
    line-height: 1.3;
  }

  .work-detail__caption {
    margin-top: 1.6rem;
  }

  .work-detail__meta > div {
    grid-template-columns: 8.2rem 1fr;

    gap: 1.2rem;
  }

  .work-detail__hero {
    margin-top: 4rem;
    overflow: visible;
  }

  .work-detail__content {
    grid-template-columns: 1fr;

    gap: 1.4rem;

    margin-top: 4.8rem;
  }

  .work-detail__body {
    font-size: 1.45rem;
  }

  .work-detail__body h2 {
    margin-top: 4.4rem;

    font-size: 2.7rem;
  }

  .work-detail__body h3 {
    margin-top: 3.4rem;

    font-size: 2.2rem;
  }

  .work-detail__gallery {
    grid-template-columns: 1fr;

    gap: 3.6rem;

    margin-top: 6rem;
  }

  .work-detail__site-link-wrap {
    margin-top: 2.8rem;
  }

  .work-detail__site-link {
    width: fit-content;
    max-width: 100%;
  }

  .work-detail__next {
    align-items: flex-start;
    flex-direction: column;

    margin-top: 8rem;

    padding-top: 2.2rem;
  }

  .work-detail__next-title {
    font-size: 2.8rem;
    text-align: left;
  }
}

.section-kicker {
  display: none;
}

.work-detail__hero-link {
  display: block;
}
.work-detail__hero,
.work-detail__body img,
.work-detail__gallery-item img {
  border: 1px solid rgba(89, 89, 91, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

/* =========================================================
   PAST WORKS LINK
========================================================= */

.works-archive {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;

  margin-top: clamp(6rem, 9vw, 14rem);
  padding-top: 2.4rem;

  border-top: 1px solid rgba(24, 24, 24, 0.14);
}

.works-archive__text {
  max-width: 52rem;

  color: rgba(24, 24, 24, 0.52);

  font-size: 1.5rem;
  line-height: 1.9;
}

.works-archive__link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;

  padding-bottom: 0.5rem;

  border-bottom: 1px solid rgba(24, 24, 24, 0.3);

  color: #59595b;

  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;

  transition: opacity 0.25s ease;
}

.works-archive__link > span:first-child {
  color: rgba(24, 24, 24, 0.36);

  font-size: 0.9rem;
  letter-spacing: 0.14em;
}

.works-archive__link > span:last-child {
  transition: transform 0.3s var(--ease);
}

.works-archive__link:hover {
  opacity: 0.68;
}

.works-archive__link:hover > span:last-child {
  transform: translate(4px, -3px);
}

@media screen and (max-width: 767px) {

  .works-archive {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;

    margin-top: 6rem;
  }

  .works-archive__text {
    font-size: 1.3rem;
  }

  .skill-system__meta {
    display: none;
  }

}

@media screen and (max-width: 390px) {
  .skill-system__head h2 {

  font-size:3.2rem;
  }
}