@charset "UTF-8";
.WorksListItem__container {
  position:relative;
  height:100%
}
@media not screen and (min-width: 769px) {
  .WorksListItem__container {
    height:unset;
    width:100%
  }

}
.WorksListItem__thumbnail {
  height:100%;
  margin-bottom:21px
}
@media not screen and (min-width: 769px) {
  .WorksListItem__thumbnail {
    height:unset;
    width:100%;
    margin-bottom:0;
    opacity:0;
    transition:opacity 1s
  }
  [data-phase=ready] .WorksListItem__thumbnail {
    opacity:1
  }

}
.WorksListItem__thumbnail img {
  height:100%;
  min-width:100%;
  object-fit:cover
}
@media not screen and (min-width: 769px) {
  .WorksListItem__thumbnail img {
    height:unset;
    width:100%
  }

}
.WorksListItem__info {
  position:absolute;
  width:100%;
  font-size:12px;
  letter-spacing:.15rem;
  line-height:1.2;
  transition:opacity .3s
}
@media only screen and (min-width: 769px) {
  .WorksListItem__info {
    opacity:0
  }
  [data-phase=ready] .WorksListItem__info,[data-phase=partial-in] .WorksListItem__info,[data-phase=partial-out] .WorksListItem__info {
    opacity:1;
    transition:opacity 1s
  }

}
[data-current=true] .WorksListItem__info {
  opacity:0
}
@media not screen and (min-width: 769px) {
  .WorksListItem__info {
    display:none
  }

}
.WorksListItem__group {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  letter-spacing:.02em;
  user-select:none
}
.WorksListItem__category {
  max-width:50%;
  display:flex;
  align-items:center;
  color:#bababa;
  user-select:none;
  font-family:Google Sans Code,monospace;
  font-size:12px
}
.WorksListItem__category span {
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
@media not screen and (min-width: 769px) {
  .WorksListItem__category {
    max-width:unset
  }

}
.WorksListItem__date {
  user-select:none;
  font-family:Google Sans Code,monospace;
  font-size:14px
}
.WorksListItem__title {
  margin-top:14px;
  line-height:1.4;
  font-family:ibm-plex-sans-jp,sans-serif;
  font-size:16px;
  letter-spacing:0
}
.WorksListItem__link {
  display:block;
  width:100%;
  height:100%
}
.Pagination__pagination {
  display:flex;
  column-gap:15px;
  justify-content:flex-end;
  margin:80px 0 140px;
  font-size:12px;
  opacity:0;
  transition:opacity .5s
}
@media not screen and (min-width: 769px) {
  .Pagination__pagination {
    margin:40px 0 60px;
    justify-content:center;
    column-gap:30px
  }

}
[data-phase=ready] .Pagination__pagination {
  opacity:1
}
.Pagination__pagination_item {
  width:30px
}
.Pagination__pagination_item a {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%
}
.Pagination__pagination_item[data-active=true] {
  border:#7e7e7e 1px solid;
  border-radius:2px
}
.Pagination__pagination_next,.Pagination__pagination_prev {
  position:relative;
  width:30px;
  height:30px;
  border:#7e7e7e 1px solid;
  border-radius:2px;
  cursor:pointer
}
.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
}
.PageWorksDetail__container {
  padding-top:127px;
  overflow-x:hidden
}
.PageWorksDetail__inner {
  width:90%;
  max-width:1200px;
  padding-top:113px;
  margin:0 auto;
  letter-spacing:.08em
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__inner {
    width:100%;
    padding-top:56px
  }

}
.PageWorksDetail__head {
  font-family:acumin-pro,sans-serif;
  font-size:80px;
  line-height:.865;
  margin-bottom:50px;
  font-weight:600;
  letter-spacing:0em
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__head {
    font-size:56px;
    width:calc(100% - 30px);
    margin:0 auto;
    opacity:0;
    transition:opacity 1s
  }
  [data-phase=ready] .PageWorksDetail__head {
    opacity:1
  }

}
.PageWorksDetail__thumbnailSliderWrapper {
  width:100%;
  padding:20px 0;
  position:relative
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__thumbnailSliderWrapper {
    margin-bottom:0
  }

}
.PageWorksDetail__thumbnailSliderWrapper .swiper {
  overflow:visible
}
.PageWorksDetail__thumbnailSliderWrapper .swiper-wrapper {
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
  display:flex;
  transition-property:transform;
  box-sizing:content-box
}
.PageWorksDetail__thumbnailSliderWrapper .swiper-slide {
  width:unset;
  position:relative;
  height:50%;
  flex-shrink:0;
  opacity:1
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__thumbnailSliderWrapper .swiper-slide {
    height:unset;
    width:0%;
    height:0
  }

}
.PageWorksDetail__thumbnailSlider {
  padding-left:50px;
  height:300px
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__thumbnailSlider {
    padding:0;
    height:unset
  }

}
.PageWorksDetail__thumbnailItem {
  position:relative
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__thumbnailItem {
    height:unset
  }
  .PageWorksDetail__thumbnailItem[data-current=true] {
    width:100%
  }

}
.PageWorksDetail__thumbnailItem_link {
  height:100%;
  display:block
}
.PageWorksDetail__thumbnailFigure {
  width:100%
}
.PageWorksDetail__thumbnailFigure img {
  width:100%;
  height:auto;
  display:block
}
.PageWorksDetail__currentInfo {
  position:relative;
  padding-top:32px
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__currentInfo {
    padding-top:0;
    opacity:0;
    transition:opacity 1s
  }
  [data-phase=ready] .PageWorksDetail__currentInfo {
    opacity:1
  }

}
.PageWorksDetail__currentInfo .PageWorksDetail__bg {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-45%);
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  z-index:0
}
.PageWorksDetail__currentInfo .PageWorksDetail__bg_virtual,.PageWorksDetail__currentInfo .PageWorksDetail__bg_display {
  font-size:244px;
  font-family:big-caslon-fb,serif;
  letter-spacing:.08em
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__currentInfo .PageWorksDetail__bg_virtual,.PageWorksDetail__currentInfo .PageWorksDetail__bg_display {
    font-size:130px
  }

}
.PageWorksDetail__currentInfo .PageWorksDetail__bg_virtual {
  opacity:0
}
.PageWorksDetail__currentInfo .PageWorksDetail__bg_display {
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transform:translate(100%);
  transition:opacity 1s
}
.PageWorksDetail__currentInfo .PageWorksDetail__bg_display[data-item="1"] {
  animation:PageWorksDetail__marquee1 calc(var(--title-length) * 15s) linear infinite
}
.PageWorksDetail__currentInfo .PageWorksDetail__bg_display[data-item="2"] {
  animation:PageWorksDetail__marquee2 calc(var(--title-length) * 15s) linear infinite
}
[data-phase=ready] .PageWorksDetail__currentInfo .PageWorksDetail__bg_display,[data-phase=partial-in] .PageWorksDetail__currentInfo .PageWorksDetail__bg_display {
  opacity:.2
}
@keyframes PageWorksDetail__marquee1 {
  0% {
    transform:translate(0)
  }
  to {
    transform:translate(-100%)
  }

}
@keyframes PageWorksDetail__marquee2 {
  0% {
    transform:translate(100%)
  }
  to {
    transform:translate(0)
  }

}
.PageWorksDetail__currentInfo .PageWorksDetail__category,.PageWorksDetail__currentInfo .PageWorksDetail__date {
  position:relative;
  font-family:Google Sans Code,monospace;
  font-weight:500;
  z-index:1;
  letter-spacing:.02em;
  opacity:0;
  transition:opacity 1s;
  transition-delay:.4s
}
[data-phase=ready] .PageWorksDetail__currentInfo .PageWorksDetail__category,[data-phase=partial-in] .PageWorksDetail__currentInfo .PageWorksDetail__category,[data-phase=ready] .PageWorksDetail__currentInfo .PageWorksDetail__date,[data-phase=partial-in] .PageWorksDetail__currentInfo .PageWorksDetail__date {
  opacity:1
}
.PageWorksDetail__currentInfo .PageWorksDetail__date {
  font-size:14px
}
.PageWorksDetail__currentInfo .PageWorksDetail__category {
  flex:1;
  max-width:50%;
  display:flex;
  color:#bababa;
  font-size:12px;
  text-align:right
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__currentInfo .PageWorksDetail__category {
    max-width:unset
  }

}
.PageWorksDetail__currentInfo .PageWorksDetail__title {
  font-family:acumin-pro,sans-serif,ibm-plex-sans-jp,sans-serif;
  font-weight:500;
  line-height:1.4;
  opacity:0
}
[data-phase=ready] .PageWorksDetail__currentInfo .PageWorksDetail__title {
  animation:PageWorksDetail__titleIn 1s ease-out forwards
}
@keyframes PageWorksDetail__titleIn {
  0% {
    opacity:0;
    transform:translate(10px)
  }
  to {
    opacity:1;
    transform:translate(0)
  }

}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__currentInfo .PageWorksDetail__title {
    letter-spacing:0;
    line-height:1.3;
    font-size:28px
  }

}
.PageWorksDetail__detail {
  margin-top:60px;
  padding:0 50px
}
[data-phase=partial-in] .PageWorksDetail__detail {
  opacity:0;
  transition:opacity .3s
}
[data-phase=partial-out] .PageWorksDetail__detail {
  opacity:1;
  transition:opacity .3s
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__detail {
    padding:20px 0 0;
    width:calc(100% - 30px);
    margin:0 auto;
    transition:opacity 1s
  }
  [data-phase=ready] .PageWorksDetail__detail {
    opacity:1
  }

}
.PageWorksDetail__category {
  font-family:Google Sans Code,monospace;
  font-size:12px;
  margin-bottom:24px
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__category {
    margin-bottom:24px
  }

}
.PageWorksDetail__date {
  display:block;
  font-family:Google Sans Code,monospace;
  font-size:10px;
  margin-bottom:24px
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__date {
    margin-bottom:24px
  }

}
.PageWorksDetail__title {
  font-family:big-caslon-fb,serif;
  font-size:40px;
  line-height:1;
  letter-spacing:.08em;
  margin-bottom:84px
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__title {
    font-size:32px;
    margin-bottom:32px
  }

}
.PageWorksDetail__body {
  font-family:ibm-plex-sans-jp,sans-serif;
  font-size:16px;
  line-height:1.8;
  letter-spacing:.04em;
  opacity:0;
  transition:opacity 1s;
  transition-delay:.1s
}
[data-phase=ready] .PageWorksDetail__body,[data-phase=partial-in] .PageWorksDetail__body {
  opacity:1
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__body {
    font-size:14px;
    line-height:2.2
  }

}
.PageWorksDetail__body figure {
  width:100%;
  margin:40px auto
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__body figure {
    width:100%;
    margin:32px 0
  }

}
@media not screen and (min-width: 577px) {
  .PageWorksDetail__body figure {
    margin:24px 0
  }

}
.PageWorksDetail__body figure img {
  height:auto;
  width:100%
}
.PageWorksDetail__body h1 {
  line-height:1.3;
  margin-bottom:.8em
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__body h1 {
    font-size:24px
  }

}
.PageWorksDetail__body h2 {
  font-size:36px;
  line-height:1.2;
  letter-spacing:.08em;
  margin:56px 0 32px;
  font-weight:600
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__body h2 {
    font-size:22px;
    margin:32px 0 20px
  }

}
.PageWorksDetail__body h2:first-child {
  margin-top:0
}
.PageWorksDetail__body h3 {
  font-family:big-caslon-fb,serif;
  font-size:22px;
  line-height:1.3;
  letter-spacing:.08em;
  margin:40px 0 24px;
  font-weight:600
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__body h3 {
    font-size:18px;
    margin:24px 0 16px
  }

}
.PageWorksDetail__body p {
  margin-bottom:24px;
  min-height:1.5em
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__body p {
    margin-bottom:20px
  }

}
@media not screen and (min-width: 577px) {
  .PageWorksDetail__body p {
    margin-bottom:16px
  }

}
.PageWorksDetail__body table {
  width:100%;
  border-collapse:collapse;
  margin:32px 0;
  background:transparent
}
.PageWorksDetail__body table th,.PageWorksDetail__body table td {
  padding:12px 16px;
  text-align:left;
  border:1px solid rgba(255,255,255,.2);
  vertical-align:top
}
.PageWorksDetail__body table th {
  background:#ffffff0d;
  font-weight:600;
  font-family:Google Sans Code,monospace;
  font-size:14px;
  letter-spacing:.08em
}
.PageWorksDetail__body table th:first-child,.PageWorksDetail__body table td:first-child {
  width:20%;
  min-width:150px;
  font-weight:600;
  background:#ffffff14
}
.PageWorksDetail__body table tr:hover {
  background:#ffffff05
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__body table th,.PageWorksDetail__body table td {
    padding:10px 12px
  }
  .PageWorksDetail__body table th:first-child,.PageWorksDetail__body table td:first-child {
    width:35%;
    min-width:120px
  }

}
@media not screen and (min-width: 577px) {
  .PageWorksDetail__body table th,.PageWorksDetail__body table td {
    padding:8px 10px;
    font-size:14px
  }
  .PageWorksDetail__body table th:first-child,.PageWorksDetail__body table td:first-child {
    width:40%;
    min-width:100px
  }

}
.PageWorksDetail__links {
  margin-top:48px;
  padding-top:40px;
  border-top:1px solid rgba(255,255,255,.1)
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__links {
    margin-top:32px;
    padding-top:24px
  }

}
.PageWorksDetail__linksTitle {
  font-family:ibm-plex-sans-jp,sans-serif;
  font-size:18px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.08em;
  margin-bottom:16px
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__linksTitle {
    font-size:16px;
    margin-bottom:12px
  }

}
.PageWorksDetail__linksList {
  display:flex;
  flex-direction:column;
  gap:4px
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__linksList {
    gap:8px
  }

}
.PageWorksDetail__linkItem {
  font-family:ibm-plex-sans-jp,sans-serif;
  font-size:14px;
  line-height:1.6;
  letter-spacing:.04em;
  color:#bababa;
  text-decoration:none;
  padding:0;
  transition:color .3s ease;
  word-break:break-all
}
.PageWorksDetail__linkItem:hover {
  color:#fff
}
@media not screen and (min-width: 769px) {
  .PageWorksDetail__linkItem {
    font-size:13px;
    padding:6px 0
  }

}
.PageWorksDetail__infoGroup {
  display:flex;
  gap:30px
}