@charset "UTF-8";
.WorksListItem__container {
  position:relative;
  width:100%
}
.WorksListItem__thumbnail {
  margin-bottom:21px
}
.WorksListItem__thumbnail img {
  width:100%;
  height:auto;
  display:block
}
.WorksListItem__info {
  font-size:10px;
  letter-spacing:0rem;
  line-height:1.2;
  font-family:Google Sans Code,monospace
}
.WorksListItem__group {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  letter-spacing:.02em
}
.WorksListItem__category {
  color:#bababa;
  font-family:Google Sans Code,monospace;
  font-size:12px;
  flex:1;
  text-align:right;
  line-height:1.3em
}
.WorksListItem__date {
  font-family:Google Sans Code,monospace;
  font-size:14px
}
.WorksListItem__title {
  margin-top:14px;
  line-height:1.6;
  font-family:ibm-plex-sans-jp,sans-serif;
  font-size:18px
}
.WorksListItem__link {
  display:block;
  width:100%;
  height:100%
}
.Pagination__pagination {
  display:flex;
  column-gap:15px;
  justify-content:center;
  padding:80px 0 140px;
  font-size:12px
}
@media not screen and (min-width: 769px) {
  .Pagination__pagination {
    margin:10px 0 80px
  }

}
@media not screen and (min-width: 577px) {
  .Pagination__pagination {
    margin:10px 0 60px
  }

}
.Pagination__pagination_button {
  width:100%;
  height:100%
}
.Pagination__pagination_item {
  width:30px;
  border-radius:2px;
  overflow:hidden
}
.Pagination__pagination_item a {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  transition:color .3s ease
}
.Pagination__pagination_item[data-active=true] {
  border:#7e7e7e 1px solid
}
.Pagination__pagination_item:hover {
  background-color:#fff;
  transition:background-color .3s ease
}
.Pagination__pagination_item:hover a {
  color:#000
}
.Pagination__pagination_next,.Pagination__pagination_prev {
  position:relative;
  width:30px;
  height:30px;
  border:#7e7e7e 1px solid;
  border-radius:2px
}
.Pagination__pagination_next svg,.Pagination__pagination_prev svg {
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  pointer-events:none;
  content:""
}
.Pagination__pagination_next a,.Pagination__pagination_prev a {
  display:block;
  width:100%;
  height:100%
}
.Pagination__pagination_next:hover,.Pagination__pagination_prev:hover {
  background-color:#fff;
  transition:background-color .3s ease
}
.Pagination__pagination_next:hover svg,.Pagination__pagination_prev:hover svg {
  transition:color .3s ease
}
.Pagination__pagination_next:hover svg path,.Pagination__pagination_prev:hover svg path {
  fill:#000
}
.Pagination__pagination_next svg {
  transform:translate(-50%,-50%)
}
.Pagination__pagination_prev svg {
  transform:translate(-50%,-50%) rotate(180deg)
}
.Pagination__pagination_noActive {
  opacity:.5;
  pointer-events:none
}
.PageWorks__container {
  padding-top:127px
}
.PageWorks__inner {
  width:90%;
  max-width:1800px;
  padding-top:113px;
  margin:0 auto;
  letter-spacing:.08em
}
@media not screen and (min-width: 769px) {
  .PageWorks__inner {
    width:calc(100% - 50px);
    padding-top:56px
  }

}
.PageWorks__head {
  font-family:acumin-pro,sans-serif;
  font-size:80px;
  line-height:.865;
  font-weight:600;
  letter-spacing:0em
}
@media not screen and (min-width: 769px) {
  .PageWorks__head {
    font-size:56px
  }

}
.PageWorks__content {
  display:grid;
  grid-template-columns:.5fr 1fr;
  gap:100px
}
@media not screen and (min-width: 769px) {
  .PageWorks__content {
    grid-template-columns:1fr;
    gap:50px
  }

}
.PageWorks__category {
  position:relative
}
.PageWorks__category_inner {
  margin-top:108px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start
}
@media only screen and (min-width: 769px) {
  .PageWorks__category_inner {
    position:sticky;
    left:0;
    top:200px
  }

}
@media not screen and (min-width: 769px) {
  .PageWorks__category_inner {
    margin-top:54px
  }

}
.PageWorks__category_list {
  display:flex;
  gap:15px;
  flex-direction:column;
  flex-wrap:wrap;
  position:relative
}
@media not screen and (min-width: 769px) {
  .PageWorks__category_list {
    padding-left:0;
    flex-direction:row;
    gap:10px 25px
  }

}
.PageWorks__category_item {
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:flex-start;
  white-space:nowrap;
  cursor:pointer;
  transition:opacity .3s ease;
  position:relative;
  font-family:acumin-pro,sans-serif
}
.PageWorks__category_item:hover {
  opacity:.7
}
.PageWorks__category_item[data-active=true] {
  opacity:.5
}
.PageWorks__category_item_name {
  font-family:acumin-pro,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1;
  letter-spacing:.08em
}
@media not screen and (min-width: 769px) {
  .PageWorks__category_item_name {
    font-size:14px
  }

}
.PageWorks__category_item_count {
  align-self:flex-start;
  font-family:ten-mincho;
  font-size:8px;
  line-height:1
}
@media not screen and (min-width: 769px) {
  .PageWorks__category_item_count {
    font-size:8px
  }

}
.PageWorks__worksList {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:50px 30px;
  opacity:1;
  transition:opacity .3s ease
}
@media not screen and (min-width: 769px) {
  .PageWorks__worksList {
    grid-template-columns:repeat(1,1fr);
    gap:40px
  }

}
[data-phase=partial-in] .PageWorks__worksList,[data-phase=partial-out] .PageWorks__worksList {
  opacity:0
}