:root {
  --color--main: #27813f;
  --color--accent: #ff8834;
  --color-works--main: #23a83b;
}

body:has([data-title--en="works"]) {
  --background-image: url("../images/works/page_header_bg_works.svg");

  background-image: var(--background-image);
  background-repeat: no-repeat;
  background-size: contain;

  @media(width <=1150px) {
    background-size: auto 340px;
  }

  @media(width <=767px) {
    --background-image: url("../images/works/md_page_header_bg__works.svg");
    background-size: auto;
  }

}

/* body.tax-works-category:has([data-title--en="works"]) {
  @media (width <=1050px) {
    background-size: auto 15%;
  }

  @media(width <=767px) {
    background-size: auto;
  }

} */

img {
  max-width: 100%;
  height: auto;
}

.page-header {
  --row-gap: min(3.2svw, 45px);

  display: flex;
  flex-direction: column;
  row-gap: var(--row-gap);
  width: min(1070px, calc(100% - 32px));
  padding-block-end: min(14.4svw, 208px);
  margin: 100px auto 30px;

  @media (width <=1600px) {
    margin: 0 auto 30px;
  }

  @media(width <=767px) {
    padding-block-end: 50svw;
  }

  @media(width <=480px) {
    padding-block-start: 8svw;
    padding-block-end: 35svw;
  }

}

@media (max-width: 480px) {
  .page-header.category {
    padding-block-end: 25svw;
  }
}

.page-title {
  --font-size--en: clamp(2rem, 1.2571rem + 3.0476vw, 4rem);

  span {
    color: #555;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    --column-gap: 58px;
    --font-size: 20px;

    display: flex;
    column-gap: var(--column-gap);
    align-items: flex-end;
    font-size: var(--font-size);
    font-weight: 400;

    @media(width <=480px) {
      --column-gap: 16px;
      --font-size: 15px;
    }


    &::before {
      font-size: var(--font-size--en);
      font-weight: 700;
      line-height: 1;
      color: var(--color--main);
      text-transform: uppercase;
      letter-spacing: 0.13em;
      content: attr(data-title--en);
    }
  }

}

.ace-breadcrumbs {
  --font-size: 15px;

  &>ul {
    display: flex;
    flex-wrap: wrap;

    li {
      font-size: var(--font-size);

      @media(width <=480px) {
        --font-size: 13px;
      }

      :is(a, span) {
        color: var(--color--main);
      }

      &:not(:last-child) {
        &::after {
          --padding-inline: 12px;
          --font-size-after: 1em;

          padding-inline: var(--padding-inline);
          font-size: var(--font-size-after);
          content: "＞";
          color: #666;

          @media(width <=480px) {
            --padding-inline: 8px;
            --font-size-after: 10px;
          }
        }
      }
    }
  }
}

.works {
  margin-bottom: 80px;
}

.intro {
  display: flex;
  column-gap: 25px;
  width: min(1050px, calc(100% - 32px));
  margin-inline: auto;

  @media(width <=767px) {
    flex-direction: column-reverse;
  }
}

.intro-desc {
  margin-top: 80px;

  @media (width <=480px) {
    margin-top: 30px;
  }
}

:is(.intro-desc, .intro-image) {
  flex: 1;
}

.intro-desc__title {
  --margin-block-end: 40px;
  --font-size: 25px;

  margin-block-end: var(--margin-block-end);
  font-size: var(--font-size);

  @media(width <=767px) {
    --margin-block-end: 20px;
    --font-size: 22px;
  }


  :is(span, b) {
    font-weight: 700;
  }

  span {
    color: #23a83b;
  }

  b {
    color: var(--color--accent);
  }

  span.intro-desc__sub {
    color: #555;
    font-size: 21px;

    @media (width <=480px) {
      font-size: 18px;
    }
  }
}

.intro-desc__content {
  flex: 1;

  p {
    font-size: 14px;
    line-height: 1.8;

    &+p {
      margin-block-start: 25px;
    }

    b {
      font-weight: 700;
      color: var(--color--main);
    }
  }
}

.works-container {
  width: min(1230px, calc(100% - 32px));
  margin-inline: auto;
  margin-block: 30px;

  @media (width <=480px) {
    margin-block: 50px;
  }
}

.works.category .works-container {
  margin-block: 50px 0;
}

.works-category-links {
  padding: 0 min(7svw, 102px) 110px;

  @media(width <=860px) {
    padding: 50px 0;
  }

  @media(width <=480px) {
    padding: 0;
  }
}

.works-category-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 3.3%;
  justify-content: flex-start;

  @media(width <=860px) {
    gap: 16px 0;
    justify-content: space-between;
  }
}

.works-category-links__item {
  flex: 31% 0 0;
  text-align: center;

  @media(width <=860px) {
    flex-basis: calc(50% - 4px);
  }

}

.works-category-links__link {
  --font-size: 1rem;

  display: block;
  align-content: center;
  height: stretch;
  padding: 14px;
  font-size: var(--font-size);
  font-weight: 700;
  line-height: 1;
  color: var(--color-works--main);
  border: 1px solid var(--color-works--main);
  border-radius: 6px;
  transition: color .25s, background-color .25s;

  @media(width <=480px) {
    --font-size: 15px;
  }

  @media (any-hover: hover) {
    &:hover {
      color: #fff;
      background-color: var(--color-works--main);
    }
  }

  &.is-active {
    color: #fff;
    background-color: var(--color-works--main);
  }
}

.works-list {
  --gap: 128px;

  display: flex;
  flex-direction: column;
  gap: var(--gap);

  @media(width <=767px) {
    --gap: 92px;
  }

}

.works-category__title {
  display: flex;
  margin-block-end: 36px;

  /* letter-spacing: 0.19em; */
  border-bottom: solid 1px var(--color-works--main);
}

.works-category-child__title {
  padding-block-end: 4px;
  margin-block-end: 25px;
  border-bottom: solid 1px #666;
  color: #555;

  @media (width <=480px) {
    font-size: 15px;
  }
}

.works-category__slug {
  --font-size: 24px;

  align-content: center;
  padding-inline: 14px 28px;
  font-size: var(--font-size);
  color: #fff;
  text-transform: uppercase;
  background-color: var(--color-works--main);
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);

  @media(width <=480px) {
    --font-size: 16px;
  }

}

.works-category__name {
  --padding-inline-start: 18px;
  --font-size-span: 1em;

  align-self: flex-end;
  padding-inline-start: var(--padding-inline-start);
  font-size: var(--font-size);
  color: #555;

  @media(width <=480px) {
    --padding-inline-start: 8px;
    --font-size: 16px;
  }

  >span {
    font-size: var(--font-size-span);
  }
}

.works-cateory--landing-page,
.works-cateory--special-offer-movie,
.works-cateory--brand-logo {
  margin-bottom: -120px;

  @media (width <=480px) {
    margin-bottom: -100px;
  }
}

.works-cateory--client-lp,
.works-cateory--our-company-lp,
.works-cateory--special-offer-site,
.works-cateory--pr-movie,
.works-cateory--sns-ad-movie,
.works-cateory--corporate,
.works-cateory--service {
  padding: 0 30px;

  @media (width <=480px) {
    padding: 0;
  }
}

.works-category__items {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 6px;
  justify-content: flex-start;
  width: fit-content;
}

.works-cateory--rich-menu .works-category__items {
  gap: 30px 30px;
}

.works-item {
  flex: 0 0 calc((100% - 6px) / 2);
}

.works-item__thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: .5rem;

  img {
    vertical-align: bottom;
    transition: .3s;
  }
}

.works-item__link {
  @media (any-hover: hover) {
    &:hover {
      .works-item__thumbnail img {
        transform: scale(1.1);
      }
    }
  }
}


.works-cateory--our-company-lp .works-item,
.works-cateory--website .works-item,
.works-cateory--special-offer-site .works-item,
.works-cateory--pr-movie .works-item {
  flex: 0 0 calc((100% - 12px) / 3);

  @media (width <=950px) {
    flex: 0 0 calc((100% - 6px) / 2);
  }

  @media (width <=480px) {
    flex: 0 0 100%;
  }
}

.works-cateory--menu-design .works-category__items {
  gap: 30px 20px;
}

.works-cateory--menu-design .works-item {
  flex: 0 0 calc((100% - 40px) / 3);

  @media (width <=950px) {
    flex: 0 0 calc((100% - 20px) / 2);
  }

  @media (width <=480px) {
    flex: 0 0 100%;
  }
}

.works-cateory--menu-design .works-item img {
  width: 100%;
}

:where(.works-cateory--website, .term-website) .works-item {
  flex: 0 0 calc((100% - 6px) / 2);
}

.works-cateory--rich-menu .works-item {
  flex: 0 0 calc((100% - 60px) / 3);

  @media (width <=950px) {
    flex: 0 0 calc((100% - 30px) / 2);
  }

  @media (width <=480px) {
    flex: 0 0 100%;
  }
}

.works-cateory--flyer-pop-design .works-item {
  flex: 0 0 calc((100% - 18px) / 4);

  @media (width <=950px) {
    flex: 0 0 calc((100% - 12px) / 3);
  }

  @media (width <=480px) {
    flex: 0 0 calc((100% - 6px) / 2);
  }
}

.works-cateory--service .works-item,
.works-cateory--corporate .works-item {
  flex: 0 0 calc((100% - 30px) / 6);

  @media (width <=950px) {
    flex: 0 0 calc((100% - 24px) / 5);
  }

  @media (width <=480px) {
    flex: 0 0 calc((100% - 18px) / 4);
  }
}

:where(.works-cateory--movie, .term-movie) .works-item {
  flex: 406px 0 1;
}

.works-cateory--sns-ad-movie .works-item {
  flex: 0 0 calc((100% - 24px) / 5);

  @media (width <=950px) {
    flex: 0 0 calc((100% - 12px) / 3);
  }

  @media (width <=480px) {
    flex: 0 0 calc((100% - 6px) / 2);
  }
}

/* client-lp */
.works-cateory--client-lp .works-item {
  flex: 0 0 calc((100% - 24px) / 5);

  @media (width <=950px) {
    flex: 0 0 calc((100% - 12px) / 3);
  }

  @media (width <=480px) {
    flex: 0 0 calc((100% - 6px) / 2);
  }
}

/* .works-cateory--client-lp .works-category__items {
  width: 100%;
}

.works-cateory--client-lp .works-item__thumbnail {
  height: 490px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
} */

/* 丸角解除 */
.works-cateory--rich-menu .works-item__thumbnail,
.works-cateory--menu-design .works-item__thumbnail,
.works-cateory--flyer-pop-design .works-item__thumbnail,
.works-cateory--service .works-item__thumbnail,
.works-cateory--corporate .works-item__thumbnail {
  border-radius: initial;
}



.works-item__meta {
  --row-gap: 16px;
  --font-size: 16px;

  display: flex;
  row-gap: var(--row-gap);
  justify-content: space-between;
  font-size: var(--font-size);
  font-weight: 500;
  color: #666;

  @media(width <=480px) {
    --row-gap: 10px;
    --font-size: 14px;
  }
}

.works-cateory--client-lp .works-item__meta,
.works-cateory--sns-ad-movie .works-item__meta {
  flex-direction: column;
  align-items: center;
}

.works-category__demo-link {
  --font-size: 15px;

  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--font-size);
  font-weight: 600;
  color: var(--color-works--main);
  letter-spacing: 0.25em;

  @media(width <=480px) {
    --font-size: 14px;
  }

  &::before {
    width: 19px;
    aspect-ratio: 1;
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMzggMTguNzYwM0MxNC41NjA0IDE4Ljc2MDMgMTguNzU5OSAxNC41NjA4IDE4Ljc1OTkgOS4zODAzN0MxOC43NTk5IDQuMTk5OTQgMTQuNTYwNCAwIDkuMzggMEM0LjE5OTU3IDAgMCA0LjE5OTk0IDAgOS4zODAzN0MwIDE0LjU2MDggNC4xOTk1NyAxOC43NjAzIDkuMzggMTguNzYwM1oiIGZpbGw9IiMwNEFBM0EiLz4KPHBhdGggZD0iTTcuNzU5OTUgNS4zNzk4OEwxMi4xODk5IDkuODAwMjlMNy43NTk5NSAxNC4yMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    translate: 0 1px;
  }
}

.page-numbers__list {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-block: 16px;

  li {
    line-height: 1;

    :where(a, span) {
      display: block;
      align-content: center;
      width: 36px;
      aspect-ratio: 1;
      color: #fff;
      text-align: center;
      border-radius: 50%;
    }

    a {
      background-color: #dedede;
      transition: color .25s, background-color .25s;

      @media (any-hover: hover) {
        &:hover {
          background-color: var(--color-works--main);
        }
      }
    }

    span {
      background-color: var(--color-works--main);
    }
  }
}