/*----------------------------------------------

  INDEX PAGE CONTENTS

----------------------------------------------*/
.worksPage-contents {
  display: grid;
  gap: min(calc( 50 / var(--screen-width) * 100vw ), 65px);
  /*---------------------------------------
   filter
  ---------------------------------------*/
  /*---------------------------------------
   heading
  ---------------------------------------*/
  /*---------------------------------------
   articles
  ---------------------------------------*/
}
.worksPage-contents__filter {
  display: flex;
  justify-content: center;
  gap: min(calc( 10 / var(--screen-width) * 100vw ), 10px);
  font-size: min(calc( 10 / var(--screen-width) * 100vw ), 10px);
  line-height: 1.2;
  font-family: "Roboto", sans-serif;
  position: relative;
  /* a
  ----------------------------------*/
}
@media (min-width: 960px) {
  .worksPage-contents__filter {
    gap: min(calc( 45 / var(--screen-width) * 100vw ), 45px);
  }
}
.worksPage-contents__filter:after {
  content: '';
  display: block;
  width: 100vw;
  height: 1px;
  background-color: var(--color__text);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.worksPage-contents__filter a {
  display: grid;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: min(calc( 50 / var(--screen-width) * 100vw ), 50px);
  position: relative;
  color: #ddd;
  transition: color 0.3s;
}
.worksPage-contents__filter a:before {
  content: '';
  display: block;
  aspect-ratio: 1;
  width: min(calc( 35 / var(--screen-width) * 100vw ), 35px);
  background-color: #ddd;
  mask-image: var(--url);
  -webkit-mask-image: var(--url);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-repeat: no-repeat;
  transition: background 0.3s;
}
.worksPage-contents__filter a span {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateY(min(calc( 5 / var(--screen-width) * 100vw ), 5px)) translateX(-50%) scale(0.8);
}
.worksPage-contents__filter a:hover {
  color: var(--color__text);
}
.worksPage-contents__filter a:hover:before {
  background-color: var(--color__text);
}
.worksPage-contents__filter a.--active {
  color: var(--color__text);
  border: 1px solid var(--color__text);
}
.worksPage-contents__filter a.--active:before {
  background-color: var(--color__text);
}
@media (min-width: 960px) {
  .worksPage-contents__filter a span {
    transform: translateY(min(calc( 5 / var(--screen-width) * 100vw ), 5px)) translateX(-50%);
  }
}
.worksPage-contents__heading {
  display: grid;
  gap: min(calc( 10 / var(--screen-width) * 100vw ), 10px);
}
.worksPage-contents__heading h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: min(calc( 35 / var(--screen-width) * 100vw ), 35px);
  line-height: 1.2;
  color: var(--color__primary);
  text-align: center;
  letter-spacing: 0.1em;
}
.worksPage-contents__heading small {
  display: block;
  text-align: center;
  font-size: min(calc( 14 / var(--screen-width) * 100vw ), 14px);
  color: var(--color__primary);
  line-height: 1.5;
}
.worksPage-contents__articles {
  display: grid;
  gap: min(calc( 50 / var(--screen-width) * 100vw ), 60px);
}