@charset "UTF-8";
.works_sort {
  position: relative;
  z-index: 1;
  font-family: var(--en_mds_sans);
}
.works_sort_inner {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
}
@media (max-width: 768px) {
  .works_sort_inner {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    margin-bottom: clamp(-1.25rem, -5.333333333333334vw, 0rem);
  }
  .works_sort_inner >* {
    margin-bottom: clamp(0rem, 5.333333333333334vw, 1.25rem);
  }
}
.works_filter {
  --tdu: 0.3s;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
}
.works_filter_head {
  font-weight: 700;
}
.works_filter_head:after {
  content: ":";
}
.works_filter_button {
  border: 1px solid #262627;
  color: #fff;
  border-radius: 9999px;
  background-color: #262627;
  -webkit-transition-property: color, background-color;
  -moz-transition-property: color, background-color;
  -o-transition-property: color, background-color;
  -ms-transition-property: color, background-color;
  transition-property: color, background-color;
  -webkit-transition-duration: var(--tdu);
  -moz-transition-duration: var(--tdu);
  -o-transition-duration: var(--tdu);
  -ms-transition-duration: var(--tdu);
  transition-duration: var(--tdu);
}
.works_filter_list {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition-property: opacity, visibility;
  -moz-transition-property: opacity, visibility;
  -o-transition-property: opacity, visibility;
  -ms-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: var(--tdu);
  -moz-transition-duration: var(--tdu);
  -o-transition-duration: var(--tdu);
  -ms-transition-duration: var(--tdu);
  transition-duration: var(--tdu);
}
.works_filter_cat {
  -webkit-transition-duration: var(--tdu);
  -moz-transition-duration: var(--tdu);
  -o-transition-duration: var(--tdu);
  -ms-transition-duration: var(--tdu);
  transition-duration: var(--tdu);
  translate: -1em 0;
  font-weight: 700;
}
.works_filter_cat:not(:has(a)) {
  opacity: 0.5;
}
@media (min-width: 769px) {
  .works_filter_head {
    font-size: clamp(0.625rem, 1.041666666666667vw, 0.9375rem);
    margin-right: clamp(0rem, 0.694444444444444vw, 0.625rem);
  }
  .works_filter_list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    margin-left: clamp(0rem, 0.555555555555556vw, 0.5rem);
    max-width: clamp(0rem, 62.5vw, 56.25rem);
  }
  .works_filter_list_cntnr {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: clamp(0.625rem, 0.694444444444444vw, 0.625rem);
    line-height: 1.6;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
  }
  .works_filter_button {
    height: clamp(0rem, 2.083333333333333vw, 1.875rem);
    padding-inline: clamp(0rem, 2.083333333333333vw, 1.875rem);
  }
  .works_filter_cat {
    margin-left: clamp(0rem, 1.111111111111111vw, 1rem);
  }
  .works_filter:hover .works_filter_list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .works_filter:hover .works_filter_cat {
    translate: 0;
  }
}
@media (max-width: 768px) {
  .works_filter_head {
    font-size: clamp(0.625rem, 3.733333333333334vw, 0.875rem);
    margin-right: clamp(0rem, 2.666666666666667vw, 0.625rem);
  }
  .works_filter_list {
    position: absolute;
    width: clamp(0rem, 53.333333333333336vw, 12.5rem);
    padding: clamp(0rem, 4.266666666666667vw, 1rem) clamp(0rem, 8.533333333333333vw, 2rem);
    color: #fff;
    inset: 0 auto auto 0;
    background-color: #262627;
    border-radius: clamp(0rem, 4.266666666666667vw, 1rem);
  }
  .works_filter_list_cntnr {
    position: relative;
  }
  .works_filter_button {
    height: clamp(0rem, 8vw, 1.875rem);
    font-size: clamp(0.625rem, 0.694444444444444vw, 0.625rem);
    padding-inline: clamp(0rem, 8vw, 1.875rem);
  }
  .works_filter_cat {
    font-size: clamp(0.625rem, 3.2vw, 0.75rem);
    line-height: 3.666666666666667;
  }
  .works_filter.opened .works_filter_list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .works_filter.opened .works_filter_cat {
    translate: 0;
  }
}
.works_layout {
  margin-left: auto;
}
.works_layout_button {
  --color: #262627;
  --background: transparent;
  --background-hover: #f0f0f0;
  --icon-color: var(--color);
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  margin: 0;
  padding: 0.6em 1.2em 0.6em 0.8em;
  background: var(--b, var(--background));
  outline: none;
  border-radius: 9999px;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: scale(var(--scale, 1)) translateZ(0);
  -moz-transform: scale(var(--scale, 1)) translateZ(0);
  -o-transform: scale(var(--scale, 1)) translateZ(0);
  -ms-transform: scale(var(--scale, 1)) translateZ(0);
  transform: scale(var(--scale, 1)) translateZ(0);
  -webkit-transition: -webkit-transform 0.15s, background 0.4s;
  -moz-transition: -moz-transform 0.15s, background 0.4s;
  -o-transition: -o-transform 0.15s, background 0.4s;
  -ms-transition: -ms-transform 0.15s, background 0.4s;
  transition: transform 0.15s, background 0.4s;
}
.works_layout_button:active {
  --scale: 0.95;
}
.works_layout_button:hover {
  --b: var(--background-hover);
}
.works_layout_button .icon {
  position: relative;
  width: 2.4em;
  height: 2.4em;
}
.works_layout_button .icon i {
  position: absolute;
  top: var(--top, 0.4em);
  left: var(--left, 0.4em);
  display: block;
  width: var(--width, 0.7em);
  height: var(--height, 0.7em);
  background: var(--icon-color);
  border-radius: 0.2em;
  -webkit-animation-name: var(--name, var(--dots-name, none));
  -moz-animation-name: var(--name, var(--dots-name, none));
  -o-animation-name: var(--name, var(--dots-name, none));
  -ms-animation-name: var(--name, var(--dots-name, none));
  animation-name: var(--name, var(--dots-name, none));
  -webkit-animation-duration: var(--duration, var(--dots-duration, 0.5s));
  -moz-animation-duration: var(--duration, var(--dots-duration, 0.5s));
  -o-animation-duration: var(--duration, var(--dots-duration, 0.5s));
  -ms-animation-duration: var(--duration, var(--dots-duration, 0.5s));
  animation-duration: var(--duration, var(--dots-duration, 0.5s));
  -webkit-animation-timing-function: var(--easing, var(--dots-easing, linear));
  -moz-animation-timing-function: var(--easing, var(--dots-easing, linear));
  -o-animation-timing-function: var(--easing, var(--dots-easing, linear));
  -ms-animation-timing-function: var(--easing, var(--dots-easing, linear));
  animation-timing-function: var(--easing, var(--dots-easing, linear));
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: var(--delay, var(--dots-delay, 0s));
  -moz-animation-delay: var(--delay, var(--dots-delay, 0s));
  -o-animation-delay: var(--delay, var(--dots-delay, 0s));
  -ms-animation-delay: var(--delay, var(--dots-delay, 0s));
  animation-delay: var(--delay, var(--dots-delay, 0s));
}
.works_layout_button .icon .dots i:nth-child(1) {
  --x-middle: -0.8em;
  --y-middle: 1em;
  --x-end: -0.2em;
  --y-end: 1.2em;
  --x-back: 1em;
  --y-back: 0.7em;
  --x-back-end: 0.9em;
  --y-back-end: 0;
}
.works_layout_button .icon .dots i:nth-child(2) {
  --left: 1.3em;
  --x-middle: -1.2em;
  --y-middle: 0.5em;
  --x-end: -1.1em;
  --y-end: 0.7em;
  --x-back: -0.3em;
  --y-back: 0.1em;
  --x-back-end: -0.9em;
  --y-back-end: 0;
}
.works_layout_button .icon .dots i:nth-child(3) {
  --top: 1.3em;
  --x-middle: 0.4em;
  --y-middle: -0.5em;
  --x-end: -0.2em;
  --y-end: -0.7em;
  --x-back: -0.5em;
  --y-back: 0em;
  --x-back-end: 0.9em;
  --y-back-end: 0;
}
.works_layout_button .icon .dots i:nth-child(4) {
  --left: 1.3em;
  --top: 1.3em;
  --x-middle: 0;
  --y-middle: -1em;
  --x-end: -1.1em;
  --y-end: -1.2em;
  --x-back: -1.4em;
  --y-back: -0.8em;
  --x-back-end: -0.9em;
  --y-back-end: 0;
}
.works_layout_button .icon .lines {
  --name: var(--lines-name, none);
  --duration: var(--lines-duration, 0.15s);
  --easing: var(--lines-easing, linear);
  --delay: var(--lines-delay, 0s);
}
.works_layout_button .icon .lines i {
  --left: 0.9em;
  --top: 0.3em;
  --height: 0.2em;
  --width: 1.1em;
  -webkit-transform: translateY(20%) translateZ(0) scaleX(0);
  -moz-transform: translateY(20%) translateZ(0) scaleX(0);
  -o-transform: translateY(20%) translateZ(0) scaleX(0);
  -ms-transform: translateY(20%) translateZ(0) scaleX(0);
  transform: translateY(20%) translateZ(0) scaleX(0);
}
.works_layout_button .icon .lines i:nth-child(2) {
  --top: 0.8em;
}
.works_layout_button .icon .lines i:nth-child(3) {
  --top: 1.3em;
}
.works_layout_button .icon .lines i:nth-child(4) {
  --top: 1.8em;
}
.works_layout_button .text {
  position: relative;
  line-height: 2.4em;
  color: var(--color);
  margin-left: 0.4em;
  font-weight: 600;
  min-width: 2.8em;
}
.works_layout_button .text span {
  --y-default: 0;
  --o-default: 1;
  --y-active: -1.2em;
  --o-active: 0;
  display: block;
  font-size: 1.4em;
  opacity: var(--o-default);
  -webkit-transform: translateY(var(--y-default)) translateZ(0);
  -moz-transform: translateY(var(--y-default)) translateZ(0);
  -o-transform: translateY(var(--y-default)) translateZ(0);
  -ms-transform: translateY(var(--y-default)) translateZ(0);
  transform: translateY(var(--y-default)) translateZ(0);
  -webkit-animation: var(--span-name, none) 0.4s ease forwards;
  -moz-animation: var(--span-name, none) 0.4s ease forwards;
  -o-animation: var(--span-name, none) 0.4s ease forwards;
  -ms-animation: var(--span-name, none) 0.4s ease forwards;
  animation: var(--span-name, none) 0.4s ease forwards;
}
.works_layout_button .text span:last-child {
  --y-default: 1.2em;
  --o-default: 0;
  --y-active: 0;
  --o-active: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.works_layout_button.animation {
  --span-name: text;
  --dots-name: back;
  --lines-name: scale-down;
}
.works_layout_button.animation .lines i {
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.works_layout_button.animation .lines i:nth-child(3),
.works_layout_button.animation .lines i:nth-child(4) {
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.works_layout_button.animation.active {
  --span-name: text-active;
  --dots-name: move;
  --lines-name: scale;
  --lines-duration: 0.15s;
  --lines-delay: 0.3s;
}
.works_layout_button.animation.active .lines i {
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.works_layout_button.animation.active .lines i:nth-child(3),
.works_layout_button.animation.active .lines i:nth-child(4) {
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.works_layout_button.listfirst .dots i,
.works_layout_button.listfirst .lines i,
.works_layout_button.listfirst .text span {
  -webkit-animation-duration: 0s;
  -moz-animation-duration: 0s;
  -o-animation-duration: 0s;
  -ms-animation-duration: 0s;
  animation-duration: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
@media (min-width: 769px) {
  .works_layout_button {
    font-size: clamp(0rem, 0.694444444444444vw, 0.625rem);
  }
  .works_layout_button .text span {
    font-size: clamp(0.625rem, 0.972222222222222vw, 0.875rem);
  }
}
@media (max-width: 768px) {
  .works_layout_button {
    font-size: clamp(0rem, 2.666666666666667vw, 0.625rem);
  }
  .works_layout_button .text span {
    font-size: clamp(0.625rem, 3.733333333333334vw, 0.875rem);
  }
}
@media (max-width: 768px) {
  .works_list {
    margin-top: clamp(0rem, 10.666666666666668vw, 2.5rem);
  }
}
.works_item {
  line-height: 1.6;
}
.works_item_title {
  font-family: var(--mds_sans);
  font-weight: 700;
}
.works_item_detail {
  font-family: var(--en_mds_sans);
}
.works_item_detail li {
  display: inline-block;
}
.works_item_detail li:not(:last-child):after {
  content: "/";
  margin-inline: 0.5em;
}
.works[data-view="grid"] .works_item_detail {
  margin-top: 0.5em;
}
@media (min-width: 769px) {
  .works[data-view="grid"] .works_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    margin-top: clamp(0rem, 3.888888888888889vw, 3.5rem);
  }
  .works[data-view="grid"] .works_item:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/3;
  }
  .works[data-view="grid"] .works_item:nth-child(2) {
    grid-column: 3/4;
    grid-row: 1/2;
  }
  .works[data-view="grid"] .works_item:nth-child(3) {
    grid-column: 3/4;
    grid-row: 2/3;
  }
  .works[data-view="grid"] .works_item:nth-child(4) {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  .works[data-view="grid"] .works_item:nth-child(5) {
    grid-column: 2/3;
    grid-row: 3/4;
  }
  .works[data-view="grid"] .works_item:nth-child(6) {
    grid-column: 3/4;
    grid-row: 3/4;
  }
  .works[data-view="grid"] .works_item:nth-child(7) {
    grid-column: 1/2;
    grid-row: 4/5;
  }
  .works[data-view="grid"] .works_item:nth-child(8) {
    grid-column: 1/2;
    grid-row: 5/6;
  }
  .works[data-view="grid"] .works_item:nth-child(9) {
    grid-column: 2/4;
    grid-row: 4/6;
  }
  .works[data-view="grid"] .works_item:nth-child(10) {
    grid-column: 1/3;
    grid-row: 6/8;
  }
  .works[data-view="grid"] .works_item:nth-child(11) {
    grid-column: 3/4;
    grid-row: 6/7;
  }
  .works[data-view="grid"] .works_item:nth-child(12) {
    grid-column: 3/4;
    grid-row: 7/8;
  }
  .works[data-view="grid"] .works_item:nth-child(13) {
    grid-column: 1/2;
    grid-row: 8/9;
  }
  .works[data-view="grid"] .works_item:nth-child(14) {
    grid-column: 2/3;
    grid-row: 8/9;
  }
  .works[data-view="grid"] .works_item:nth-child(15) {
    grid-column: 3/4;
    grid-row: 8/9;
  }
  .works[data-view="grid"] .works_item:nth-child(16) {
    grid-column: 1/2;
    grid-row: 9/10;
  }
  .works[data-view="grid"] .works_item:nth-child(17) {
    grid-column: 1/2;
    grid-row: 10/11;
  }
  .works[data-view="grid"] .works_item:nth-child(18) {
    grid-column: 2/4;
    grid-row: 9/11;
  }
  .works[data-view="grid"] .works_item:nth-child(1) .works_item_inner,
  .works[data-view="grid"] .works_item:nth-child(9) .works_item_inner,
  .works[data-view="grid"] .works_item:nth-child(10) .works_item_inner,
  .works[data-view="grid"] .works_item:nth-child(18) .works_item_inner {
    padding: clamp(0rem, 8.533333333333333vw, 2rem);
  }
  .works[data-view="grid"] .works_item_link {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    -moz-transition-property: color, background-color;
    -o-transition-property: color, background-color;
    -ms-transition-property: color, background-color;
    transition-property: color, background-color;
  }
  .works[data-view="grid"] .works_item_link:after {
    position: absolute;
    display: block;
    margin: auto;
    content: "";
    inset: 0;
    opacity: 0;
    -webkit-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -ms-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
  .works[data-view="grid"] .works_item_link:hover,
  .works[data-view="grid"] .works_item_link:focus-visible {
    opacity: 1;
  }
  .works[data-view="grid"] .works_item_link:hover .works_item_inner,
  .works[data-view="grid"] .works_item_link:focus-visible .works_item_inner {
    opacity: 1;
  }
  .works[data-view="grid"] .works_item_link:hover .works_item_thumbnail,
  .works[data-view="grid"] .works_item_link:focus-visible .works_item_thumbnail {
    scale: 1.05;
  }
  .works[data-view="grid"] .works_item_link:hover:after,
  .works[data-view="grid"] .works_item_link:focus-visible:after {
    background-color: rgba(38,38,39,0.4);
    opacity: 1;
  }
  .works[data-view="grid"] .works_item_link:focus-visible .works_item_title {
    opacity: 1;
  }
  .works[data-view="grid"] .works_item_thumbnail {
    -webkit-transition: scale 1s ease-in-out;
    -moz-transition: scale 1s ease-in-out;
    -o-transition: scale 1s ease-in-out;
    -ms-transition: scale 1s ease-in-out;
    transition: scale 1s ease-in-out;
  }
  .works[data-view="grid"] .works_item_thumbnail img {
    object-fit: cover;
    object-position: center;
  }
  .works[data-view="grid"] .works_item_inner {
    position: absolute;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin: auto;
    padding: clamp(0rem, 4.266666666666667vw, 1rem);
    color: #fff;
    inset: 0;
    opacity: 0;
    -webkit-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -ms-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -o-box-pack: end;
    -ms-flex-pack: end;
    -webkit-box-align: start;
    -moz-box-align: start;
    -o-box-align: start;
    -ms-flex-align: start;
  }
  .works[data-view="grid"] .works_item_title {
    font-size: clamp(0.625rem, 0.972222222222222vw, 0.875rem);
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
  }
  .works[data-view="grid"] .works_item_detail {
    font-size: clamp(0.625rem, 0.694444444444444vw, 0.625rem);
  }
}
@media (max-width: 768px) {
  .works[data-view="grid"] .works_item +.works_item {
    margin-top: clamp(0rem, 9.6vw, 2.25rem);
  }
  .works[data-view="grid"] .works_item_inner {
    padding: clamp(0rem, 4.266666666666667vw, 1rem) clamp(0rem, 6.4vw, 1.5rem) 0;
  }
  .works[data-view="grid"] .works_item_title {
    font-size: clamp(0.625rem, 3.2vw, 0.75rem);
  }
  .works[data-view="grid"] .works_item_detail {
    font-size: clamp(0.625rem, 2.666666666666667vw, 0.625rem);
  }
}
.works[data-view="list"] .works_item {
  border-bottom: 1px solid #f0f0f0;
}
.works[data-view="list"] .works_item_link {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.works[data-view="list"] .works_item_link:hover {
  opacity: 1;
}
.works[data-view="list"] .works_item_link:hover .works_item_thumbnail img {
  scale: 1.1;
}
.works[data-view="list"] .works_item_thumbnail {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.works[data-view="list"] .works_item_thumbnail img {
  -webkit-transition: scale 0.3s;
  -moz-transition: scale 0.3s;
  -o-transition: scale 0.3s;
  -ms-transition: scale 0.3s;
  transition: scale 0.3s;
}
.works[data-view="list"] .works_item_inner {
  width: 100%;
}
.works[data-view="list"] .works_item_title {
  margin-top: calc((1em - 1lh) / 2);
}
.works[data-view="list"] .works_item_detail {
  font-size: 0.625rem;
  margin-bottom: calc((1em - 1lh) / 2);
}
@media (min-width: 769px) {
  .works[data-view="list"] .works_list {
    padding-inline: clamp(0rem, 5.902777777777778vw, 5.3125rem);
    margin-top: clamp(0rem, 2.222222222222222vw, 2rem);
  }
  .works[data-view="list"] .works_item_link {
    -webkit-align-items: center;
    align-items: center;
    padding: clamp(0rem, 2.777777777777778vw, 2.5rem) clamp(0rem, 1.666666666666667vw, 1.5rem);
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
  }
  .works[data-view="list"] .works_item_thumbnail {
    width: clamp(0rem, 12.5vw, 11.25rem);
  }
  .works[data-view="list"] .works_item_inner {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    padding-left: clamp(0rem, 3.333333333333333vw, 3rem);
  }
  .works[data-view="list"] .works_item_title {
    width: clamp(0rem, 41.66666666666667vw, 37.5rem);
    font-size: clamp(0.625rem, 1.388888888888889vw, 1.25rem);
  }
  .works[data-view="list"] .works_item_detail {
    width: clamp(0rem, 17.36111111111111vw, 15.625rem);
    text-align: right;
  }
}
@media (max-width: 768px) {
  .works[data-view="list"] .works_list {
    padding-inline: clamp(0rem, 6.4vw, 1.5rem);
  }
  .works[data-view="list"] .works_item_link {
    padding-block: clamp(0rem, 6.4vw, 1.5rem);
  }
  .works[data-view="list"] .works_item_thumbnail {
    width: clamp(0rem, 30.4vw, 7.125rem);
  }
  .works[data-view="list"] .works_item_inner {
    padding-left: clamp(0rem, 4.266666666666667vw, 1rem);
  }
  .works[data-view="list"] .works_item_title {
    font-size: clamp(0.625rem, 3.733333333333334vw, 0.875rem);
  }
  .works[data-view="list"] .works_item_detail {
    margin-top: clamp(0rem, 1.333333333333333vw, 0.3125rem);
  }
}
.works_stalker:before {
  content: attr(data-label);
}
@-moz-keyframes text {
  0% {
    opacity: var(--o-active);
    -webkit-transform: translateY(var(--y-active)) translateZ(0);
    -moz-transform: translateY(var(--y-active)) translateZ(0);
    -o-transform: translateY(var(--y-active)) translateZ(0);
    -ms-transform: translateY(var(--y-active)) translateZ(0);
    transform: translateY(var(--y-active)) translateZ(0);
  }
  100% {
    opacity: var(--o-default);
    -webkit-transform: translateY(var(--y-default)) translateZ(0);
    -moz-transform: translateY(var(--y-default)) translateZ(0);
    -o-transform: translateY(var(--y-default)) translateZ(0);
    -ms-transform: translateY(var(--y-default)) translateZ(0);
    transform: translateY(var(--y-default)) translateZ(0);
  }
}
@-webkit-keyframes text {
  0% {
    opacity: var(--o-active);
    -webkit-transform: translateY(var(--y-active)) translateZ(0);
    -moz-transform: translateY(var(--y-active)) translateZ(0);
    -o-transform: translateY(var(--y-active)) translateZ(0);
    -ms-transform: translateY(var(--y-active)) translateZ(0);
    transform: translateY(var(--y-active)) translateZ(0);
  }
  100% {
    opacity: var(--o-default);
    -webkit-transform: translateY(var(--y-default)) translateZ(0);
    -moz-transform: translateY(var(--y-default)) translateZ(0);
    -o-transform: translateY(var(--y-default)) translateZ(0);
    -ms-transform: translateY(var(--y-default)) translateZ(0);
    transform: translateY(var(--y-default)) translateZ(0);
  }
}
@-o-keyframes text {
  0% {
    opacity: var(--o-active);
    -webkit-transform: translateY(var(--y-active)) translateZ(0);
    -moz-transform: translateY(var(--y-active)) translateZ(0);
    -o-transform: translateY(var(--y-active)) translateZ(0);
    -ms-transform: translateY(var(--y-active)) translateZ(0);
    transform: translateY(var(--y-active)) translateZ(0);
  }
  100% {
    opacity: var(--o-default);
    -webkit-transform: translateY(var(--y-default)) translateZ(0);
    -moz-transform: translateY(var(--y-default)) translateZ(0);
    -o-transform: translateY(var(--y-default)) translateZ(0);
    -ms-transform: translateY(var(--y-default)) translateZ(0);
    transform: translateY(var(--y-default)) translateZ(0);
  }
}
@keyframes text {
  0% {
    opacity: var(--o-active);
    -webkit-transform: translateY(var(--y-active)) translateZ(0);
    -moz-transform: translateY(var(--y-active)) translateZ(0);
    -o-transform: translateY(var(--y-active)) translateZ(0);
    -ms-transform: translateY(var(--y-active)) translateZ(0);
    transform: translateY(var(--y-active)) translateZ(0);
  }
  100% {
    opacity: var(--o-default);
    -webkit-transform: translateY(var(--y-default)) translateZ(0);
    -moz-transform: translateY(var(--y-default)) translateZ(0);
    -o-transform: translateY(var(--y-default)) translateZ(0);
    -ms-transform: translateY(var(--y-default)) translateZ(0);
    transform: translateY(var(--y-default)) translateZ(0);
  }
}
@-moz-keyframes text-active {
  0% {
    opacity: var(--o-default);
    -webkit-transform: translateY(var(--y-default)) translateZ(0);
    -moz-transform: translateY(var(--y-default)) translateZ(0);
    -o-transform: translateY(var(--y-default)) translateZ(0);
    -ms-transform: translateY(var(--y-default)) translateZ(0);
    transform: translateY(var(--y-default)) translateZ(0);
  }
  100% {
    opacity: var(--o-active);
    -webkit-transform: translateY(var(--y-active)) translateZ(0);
    -moz-transform: translateY(var(--y-active)) translateZ(0);
    -o-transform: translateY(var(--y-active)) translateZ(0);
    -ms-transform: translateY(var(--y-active)) translateZ(0);
    transform: translateY(var(--y-active)) translateZ(0);
  }
}
@-webkit-keyframes text-active {
  0% {
    opacity: var(--o-default);
    -webkit-transform: translateY(var(--y-default)) translateZ(0);
    -moz-transform: translateY(var(--y-default)) translateZ(0);
    -o-transform: translateY(var(--y-default)) translateZ(0);
    -ms-transform: translateY(var(--y-default)) translateZ(0);
    transform: translateY(var(--y-default)) translateZ(0);
  }
  100% {
    opacity: var(--o-active);
    -webkit-transform: translateY(var(--y-active)) translateZ(0);
    -moz-transform: translateY(var(--y-active)) translateZ(0);
    -o-transform: translateY(var(--y-active)) translateZ(0);
    -ms-transform: translateY(var(--y-active)) translateZ(0);
    transform: translateY(var(--y-active)) translateZ(0);
  }
}
@-o-keyframes text-active {
  0% {
    opacity: var(--o-default);
    -webkit-transform: translateY(var(--y-default)) translateZ(0);
    -moz-transform: translateY(var(--y-default)) translateZ(0);
    -o-transform: translateY(var(--y-default)) translateZ(0);
    -ms-transform: translateY(var(--y-default)) translateZ(0);
    transform: translateY(var(--y-default)) translateZ(0);
  }
  100% {
    opacity: var(--o-active);
    -webkit-transform: translateY(var(--y-active)) translateZ(0);
    -moz-transform: translateY(var(--y-active)) translateZ(0);
    -o-transform: translateY(var(--y-active)) translateZ(0);
    -ms-transform: translateY(var(--y-active)) translateZ(0);
    transform: translateY(var(--y-active)) translateZ(0);
  }
}
@keyframes text-active {
  0% {
    opacity: var(--o-default);
    -webkit-transform: translateY(var(--y-default)) translateZ(0);
    -moz-transform: translateY(var(--y-default)) translateZ(0);
    -o-transform: translateY(var(--y-default)) translateZ(0);
    -ms-transform: translateY(var(--y-default)) translateZ(0);
    transform: translateY(var(--y-default)) translateZ(0);
  }
  100% {
    opacity: var(--o-active);
    -webkit-transform: translateY(var(--y-active)) translateZ(0);
    -moz-transform: translateY(var(--y-active)) translateZ(0);
    -o-transform: translateY(var(--y-active)) translateZ(0);
    -ms-transform: translateY(var(--y-active)) translateZ(0);
    transform: translateY(var(--y-active)) translateZ(0);
  }
}
@-moz-keyframes move {
  50% {
    -webkit-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -moz-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -o-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -ms-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
  }
  100% {
    -webkit-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -moz-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -o-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -ms-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
}
@-webkit-keyframes move {
  50% {
    -webkit-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -moz-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -o-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -ms-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
  }
  100% {
    -webkit-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -moz-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -o-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -ms-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
}
@-o-keyframes move {
  50% {
    -webkit-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -moz-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -o-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -ms-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
  }
  100% {
    -webkit-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -moz-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -o-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -ms-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
}
@keyframes move {
  50% {
    -webkit-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -moz-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -o-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    -ms-transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
    transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
  }
  100% {
    -webkit-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -moz-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -o-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -ms-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
}
@-moz-keyframes back {
  0%, 15% {
    -webkit-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -moz-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -o-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -ms-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
  50% {
    -webkit-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -moz-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -o-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -ms-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
  }
  100% {
    -webkit-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -moz-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -o-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -ms-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
  }
}
@-webkit-keyframes back {
  0%, 15% {
    -webkit-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -moz-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -o-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -ms-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
  50% {
    -webkit-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -moz-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -o-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -ms-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
  }
  100% {
    -webkit-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -moz-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -o-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -ms-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
  }
}
@-o-keyframes back {
  0%, 15% {
    -webkit-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -moz-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -o-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -ms-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
  50% {
    -webkit-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -moz-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -o-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -ms-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
  }
  100% {
    -webkit-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -moz-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -o-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -ms-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
  }
}
@keyframes back {
  0%, 15% {
    -webkit-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -moz-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -o-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    -ms-transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
  50% {
    -webkit-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -moz-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -o-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    -ms-transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
    transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
  }
  100% {
    -webkit-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -moz-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -o-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    -ms-transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
  }
}
@-moz-keyframes scale {
  100% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(1);
    -moz-transform: translateY(20%) translateZ(0) scaleX(1);
    -o-transform: translateY(20%) translateZ(0) scaleX(1);
    -ms-transform: translateY(20%) translateZ(0) scaleX(1);
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
}
@-webkit-keyframes scale {
  100% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(1);
    -moz-transform: translateY(20%) translateZ(0) scaleX(1);
    -o-transform: translateY(20%) translateZ(0) scaleX(1);
    -ms-transform: translateY(20%) translateZ(0) scaleX(1);
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
}
@-o-keyframes scale {
  100% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(1);
    -moz-transform: translateY(20%) translateZ(0) scaleX(1);
    -o-transform: translateY(20%) translateZ(0) scaleX(1);
    -ms-transform: translateY(20%) translateZ(0) scaleX(1);
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
}
@keyframes scale {
  100% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(1);
    -moz-transform: translateY(20%) translateZ(0) scaleX(1);
    -o-transform: translateY(20%) translateZ(0) scaleX(1);
    -ms-transform: translateY(20%) translateZ(0) scaleX(1);
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
}
@-moz-keyframes scale-down {
  0% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(1);
    -moz-transform: translateY(20%) translateZ(0) scaleX(1);
    -o-transform: translateY(20%) translateZ(0) scaleX(1);
    -ms-transform: translateY(20%) translateZ(0) scaleX(1);
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
  100% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(0);
    -moz-transform: translateY(20%) translateZ(0) scaleX(0);
    -o-transform: translateY(20%) translateZ(0) scaleX(0);
    -ms-transform: translateY(20%) translateZ(0) scaleX(0);
    transform: translateY(20%) translateZ(0) scaleX(0);
  }
}
@-webkit-keyframes scale-down {
  0% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(1);
    -moz-transform: translateY(20%) translateZ(0) scaleX(1);
    -o-transform: translateY(20%) translateZ(0) scaleX(1);
    -ms-transform: translateY(20%) translateZ(0) scaleX(1);
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
  100% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(0);
    -moz-transform: translateY(20%) translateZ(0) scaleX(0);
    -o-transform: translateY(20%) translateZ(0) scaleX(0);
    -ms-transform: translateY(20%) translateZ(0) scaleX(0);
    transform: translateY(20%) translateZ(0) scaleX(0);
  }
}
@-o-keyframes scale-down {
  0% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(1);
    -moz-transform: translateY(20%) translateZ(0) scaleX(1);
    -o-transform: translateY(20%) translateZ(0) scaleX(1);
    -ms-transform: translateY(20%) translateZ(0) scaleX(1);
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
  100% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(0);
    -moz-transform: translateY(20%) translateZ(0) scaleX(0);
    -o-transform: translateY(20%) translateZ(0) scaleX(0);
    -ms-transform: translateY(20%) translateZ(0) scaleX(0);
    transform: translateY(20%) translateZ(0) scaleX(0);
  }
}
@keyframes scale-down {
  0% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(1);
    -moz-transform: translateY(20%) translateZ(0) scaleX(1);
    -o-transform: translateY(20%) translateZ(0) scaleX(1);
    -ms-transform: translateY(20%) translateZ(0) scaleX(1);
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
  100% {
    -webkit-transform: translateY(20%) translateZ(0) scaleX(0);
    -moz-transform: translateY(20%) translateZ(0) scaleX(0);
    -o-transform: translateY(20%) translateZ(0) scaleX(0);
    -ms-transform: translateY(20%) translateZ(0) scaleX(0);
    transform: translateY(20%) translateZ(0) scaleX(0);
  }
}