@charset "UTF-8";
/* @import must be at top of file, otherwise CSS will not work */
/* =========================================================

Foundation

========================================================= */
:root {
  --color-black: #040404;
  --color-white: #fff;
  --color-gray: #5d5d5d;
  --color-bg-primary: #040404;
  --color-bg-dark: #181818;
  --color-bg-white: #fff;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-family-sans: "Zen Kaku Gothic New", sans-serif;
  --font-family-eng: "Urbanist", sans-serif;
  --site-padding: 15.87vw;
  --site-padding-md: 10.87vw;
  --site-padding-sm: 10.25641vw;
  --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
  --easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
  --easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
  --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
  --easeInOutExpo: cubic-bezier(1, 0, 0, 1);
  --easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
  --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
*, :after, :before {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

address, blockquote, dl, figure, form, iframe, p, pre, table {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ol, ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  margin: 0;
  overflow: visible;
  clear: both;
  color: inherit;
  border-top-width: 1px;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

embed, iframe, img, object, svg {
  vertical-align: bottom;
}

button, input, optgroup, select, textarea {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-transform: inherit;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 0;
}

[type=button], [type=reset], [type=submit], button {
  cursor: pointer;
}

[type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled, button:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
  appearance: button;
}

[type=number] {
  -webkit-appearance: textfield;
  appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-collapse: collapse;
  border-color: inherit;
}

caption {
  text-align: left;
}

td, th {
  padding: 0;
  vertical-align: top;
}

th {
  font-weight: bold;
  text-align: left;
}

html {
  font-size: calc(7 * 1px + 0.625vw);
}

html.is-header-search-open, html.is-megamenu-open, html.is-modal-show, html.is-side-nav-open {
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 4.2666666667vw;
  }
}
/******************************************************************************

* BASIC

*******************************************************************************/
html {
  font-size: 62.5%;
}

body {
  /*height: 100%;*/
  color: var(--color-black);
  font-size: 1rem;
  font-family: var(--font-family-sans);
  position: relative;
  font-weight: 400;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  /*-moz-font-feature-settings: "palt";
  font-feature-settings: "palt";*/
  font-feature-settings: "palt";
  -ms-font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  /*letter-spacing: $letter-spacing-md;*/
  background: var(--color-bg-white);
  word-wrap: break-word;
  vertical-align: baseline;
  white-space: normal;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
  cursor: none;
}

html, body {
  cursor: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  margin: 0;
}

a {
  color: var(--color-white);
}
a:hover {
  text-decoration: none;
}
a:focus {
  text-decoration: none;
}

a,
a:focus,
a:active,
a:hover,
a:visited,
:focus,
:active,
:hover,
:visited {
  outline: none !important;
  text-decoration: none;
}

/* =========================================================

Layout

========================================================= */
/*wrapper*/
.l-wrapper {
  position: relative;
}

/*content*/
.l-content {
  width: 100%;
  position: relative;
  z-index: 101;
  background: var(--color-bg-white);
  opacity: 0;
}
.is-page-loaded .l-content {
  opacity: 1;
  transition: var(--easeOutCubic) 1.2s;
}

.l-container {
  padding: 0 var(--site-padding);
}
@media (max-width: 1440px) {
  .l-container {
    padding: 0 var(--site-padding-md);
  }
}
@media (max-width: 767px) {
  .l-container {
    padding: 0 var(--site-padding-sm);
  }
}

.l-content-header {
  padding-top: 20rem;
  margin-bottom: 14rem;
}
@media (max-width: 767px) {
  .l-content-header {
    padding-top: 11rem;
    margin-bottom: 6rem;
  }
}
.is-gnav-open .l-content-header {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
}

.l-content-header__heading {
  font-size: clamp(23px, 2vw, 30px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18rem;
  line-height: 1.4;
  margin-bottom: 5rem;
  overflow: hidden;
  width: 100%;
  color: var(--color-black);
}
@media (max-width: 767px) {
  .l-content-header__heading {
    font-size: clamp(18px, 5vw, 23px);
    width: 100%;
    margin-bottom: 6rem;
  }
}
.l-content-header__heading p {
  display: table;
  overflow: hidden;
}
.l-content-header__heading span {
  display: table;
  transform: translateY(101%);
  transition: var(--easeOutCubic) 1s;
  transition-delay: 0.8s;
}
.is-page-loaded .l-content-header__heading span {
  transform: translateY(0);
}

.l-header {
  position: fixed;
  z-index: 112;
  width: 100%;
  opacity: 0;
}
.is-page-loaded .l-header {
  transition: var(--easeOutCubic) 1.5s;
  transition-delay: 1s;
  opacity: 1;
}
.works .l-header {
  opacity: 1;
  mix-blend-mode: difference;
}
.error .l-header {
  mix-blend-mode: difference;
}
.recruit .l-header {
  mix-blend-mode: difference;
}
.contact .l-header {
  mix-blend-mode: difference;
}
.l-header.is-blend {
  mix-blend-mode: difference;
}

.l-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5.94059406vh;
}
.l-header__logo svg {
  width: clamp(85px, 5.62169312vw, 85px);
  height: clamp(12px, 0.793650794vw, 12px);
}
.is-modal-open .l-header__logo {
  transition: var(--easeOutCubic) 0.5s;
  transition-delay: 0s;
  pointer-events: none;
  opacity: 0;
}
@media (max-width: 767px) {
  .l-header__logo {
    top: 3.6rem;
  }
  .is-gnav-open .l-header__logo {
    pointer-events: none;
    opacity: 0;
  }
}

.l-header__list {
  top: 5.94059406vh;
  position: absolute;
  right: 2.96825397vw;
  display: inline-grid;
  row-gap: 1rem;
  column-gap: 3rem;
  grid-template-rows: repeat(2, fit-content(100%));
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
}
@media (max-width: 767px) {
  .l-header__list {
    display: none;
  }
}
.is-modal-open .l-header__list {
  transition: var(--easeOutCubic) 0.5s;
  transition-delay: 0s;
  pointer-events: none;
  opacity: 0;
}

.l-header__item {
  margin-bottom: 1.5rem;
}
.l-header__item a {
  color: var(--color-white);
  font-size: clamp(10px, 0.8vw, 14px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048em;
  cursor: none;
}

.l-gnav__btn {
  position: fixed;
  top: 5.83058306vh;
  left: 2.96825397vw;
  z-index: 1111;
  opacity: 0;
  transition: var(--easeOutCubic) 1.5;
}
@media (max-width: 767px) {
  .l-gnav__btn {
    left: 7vw;
    top: 3.6rem;
  }
}
.is-page-loaded .l-gnav__btn {
  opacity: 1;
}
.is-modal-open .l-gnav__btn {
  pointer-events: none;
  opacity: 0;
}
.works .l-gnav__btn {
  mix-blend-mode: difference;
}
.error .l-gnav__btn {
  mix-blend-mode: difference;
}
.recruit .l-gnav__btn {
  mix-blend-mode: difference;
}
.contact .l-gnav__btn {
  mix-blend-mode: difference;
}
.l-gnav__btn.is-blend {
  mix-blend-mode: difference;
}
.is-gnav-open .l-gnav__btn {
  pointer-events: none;
  opacity: 0;
}
.l-gnav__btn span {
  color: var(--color-white);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  font-size: clamp(10px, 0.8vw, 14px);
  letter-spacing: 0.218rem;
}
@media (max-width: 767px) {
  .l-gnav__btn span {
    font-size: clamp(12px, 3vw, 12px);
  }
}

.l-gnav__btn-icon {
  position: fixed;
  top: 5.99558306vh;
  left: 3.96825397vw;
  width: 0.595238095vw;
  height: 0.595238095vw;
  max-width: 12px;
  max-height: 12px;
  opacity: 0;
  transition: var(--easeOutCubic) 1.5s;
  z-index: 1111;
}
@media (max-width: 767px) {
  .l-gnav__btn-icon {
    left: 9.74359vw;
    top: 3.7rem;
    width: 9px;
    height: 9px;
  }
}
.is-page-loaded .l-gnav__btn-icon {
  opacity: 1;
}
.is-gnav-open .l-gnav__btn-icon {
  pointer-events: none;
  opacity: 0;
}
.l-gnav__btn-icon:after {
  content: "";
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  background: var(--color-white);
}
.is-modal-open .l-gnav__btn-icon {
  pointer-events: none;
  opacity: 0;
}

.l-gnav {
  position: fixed;
  width: 0;
  height: 0;
  top: 5.99558306vh;
  left: 2.96825397vw;
  height: 1;
  background: var(--color-black);
  z-index: 99;
  border-radius: 0.8rem;
  transition: var(--easeOutCubic) 0.5s;
  overflow: hidden;
}
@media (max-width: 767px) {
  .l-gnav {
    left: 7vw;
    top: 3.7rem;
  }
}
.is-gnav-open .l-gnav {
  width: 25vw;
  height: var(--gnav-height, 100%);
  max-width: 25vw;
  max-height: calc(100vh - 11.9911661vh);
}
@media (max-width: 767px) {
  .is-gnav-open .l-gnav {
    width: calc(100vw - 14vw);
    max-width: calc(100vw - 14vw);
  }
}

.l-gnav__inner {
  padding: 4.30033003vh 2.3227513vw;
}
@media (max-width: 767px) {
  .l-gnav__inner {
    padding: 3.30033003vh 8%;
  }
}

.l-gnav__logo {
  width: 10vw;
}
@media (max-width: 767px) {
  .l-gnav__logo {
    width: 40vw;
    margin-top: 0.5rem;
  }
}

.l-gnav__list {
  width: calc(100% - 12%);
  padding: 4rem 0 2rem;
}

.l-gnav__item {
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  font-size: clamp(20px, 1.5vw, 23px);
  margin-bottom: 2.5rem;
  letter-spacing: 0.218rem;
  position: relative;
}
.is-open .l-gnav__item {
  display: none;
}
@media (max-width: 767px) {
  .l-gnav__item {
    font-size: 5vw;
    margin-bottom: 2rem;
  }
}
.l-gnav__item a {
  display: table;
  overflow: hidden;
  transition: var(--easeOutCubic) 0.5s;
}
.l-gnav__item a:hover {
  opacity: 0.3;
}
.l-gnav__item span {
  transform: translateY(100%);
  display: table;
  transition: var(--easeOutCubic) 1s;
}
.is-gnav-open .l-gnav__item span {
  transition-delay: 0.2s;
  transform: translateY(0%);
}

.l-gnav__close {
  position: absolute;
  top: 2.20022002vh;
  right: 1.3227513vw;
  z-index: 11;
}
@media (max-width: 767px) {
  .l-gnav__close {
    top: 1rem;
    right: 1rem;
  }
}
.l-gnav__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 15px;
  height: 1px;
  content: "";
  background: #e6e6e6;
  transition: var(--easeOutCubic) 0.5s;
}
.l-gnav__close:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 1px;
  height: 15px;
  content: "";
  background: #e6e6e6;
  transition: var(--easeOutCubic) 0.5s;
}
.l-gnav__close:hover .l-gnav__close-circle {
  transform: rotate(360deg);
}
.l-gnav__close:hover .l-gnav__close-circle-front {
  stroke-dashoffset: 0px;
}
.l-gnav__close:hover:after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.l-gnav__close:hover:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

.l-gnav__close-circle {
  position: relative;
  transition: var(--easeOutCubic) 1.3s;
}
.l-gnav__close-circle svg {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transform: rotate(90deg);
}
@media (max-width: 767px) {
  .l-gnav__close-circle svg {
    width: 4.4rem;
  }
}

.l-gnav__close-circle-front {
  position: absolute;
  top: 0;
  left: 0;
  stroke-dashoffset: 200px;
  stroke-dasharray: 200px;
  transition: var(--easeOutCubic) 1.3s;
}

.l-gnav-contact__list {
  width: 100%;
  position: relative;
  padding-top: 2rem;
}
@media (max-width: 767px) {
  .l-gnav-contact__list {
    padding-top: 1rem;
  }
}
.l-gnav-contact__list:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  content: "";
  background: var(--color-white);
  height: 1px;
}

.l-gnav-contact__item {
  overflow: hidden;
  margin-top: 1rem;
}
.l-gnav-contact__item a {
  display: table;
  font-size: clamp(12px, 0.8vw, 14px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048rem;
  transition: var(--easeOutCubic) 1s;
  transform: translateY(100%);
}
@media (max-width: 767px) {
  .l-gnav-contact__item a {
    font-size: clamp(10px, 3vw, 12px);
  }
}
.is-gnav-open .l-gnav-contact__item a {
  transition-delay: 0.2s;
  transform: translateY(0%);
}

.l-gnav__copyright {
  position: absolute;
  right: 2.3227513vw;
  bottom: 4.30033003vh;
  font-size: clamp(12px, 0.8vw, 14px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048rem;
  overflow: hidden;
  color: var(--color-white);
}
@media (max-width: 767px) {
  .l-gnav__copyright {
    right: 8%;
    bottom: 3.30033003vh;
    font-size: clamp(10px, 3vw, 12px);
  }
}
.l-gnav__copyright span {
  transform: translateY(100%);
  display: table;
  transition: var(--easeOutCubic) 1s;
}
.is-gnav-open .l-gnav__copyright span {
  transition-delay: 0.2s;
  transform: translateY(0%);
}

.l-gnav-works__list {
  overflow: hidden;
  /* 高さアニメに必須 */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateZ(0);
  transition: var(--easeOutCubic) 0.5s;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.is-open .l-gnav-works__list {
  opacity: 1;
  height: auto;
  margin-top: 2rem;
}

.l-gnav-works__item {
  margin-bottom: 2rem;
}
@media (max-width: 767px) {
  .l-gnav-works__item {
    margin-bottom: 1.5rem;
  }
}
.l-gnav-works__item a {
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 1rem;
  letter-spacing: 0.048rem;
  overflow: hidden;
  transition: var(--easeOutCubic) 0.5s;
}
.l-gnav-works__item a:hover {
  opacity: 0.3;
}
.l-gnav-works__item.is-open {
  overflow: visible;
}
.l-gnav-works__item span {
  font-size: clamp(9px, 0.6666667vw, 12px);
}
.l-gnav-works__item span.l-gnav-works__name {
  font-size: clamp(12px, 0.8vw, 14px);
  line-height: 1.4;
}

.l-main {
  position: relative;
  z-index: 2;
  transition: var(--easeOutCubic) 1.2s;
}

.l-footer {
  background: var(--color-black);
  position: relative;
  z-index: 98;
  transition: var(--easeOutCubic) 0.5s;
  overflow: hidden;
  padding: 32rem 0 0;
}
.is-gnav-open .l-footer {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none;
}
@media (max-width: 767px) {
  .l-footer {
    padding: 0;
    height: 100lvh;
    transition: var(--easeOutCubic) 0s;
  }
}
.l-footer:before {
  position: absolute;
  width: 1px;
  height: 0%;
  content: "";
  top: 0;
  left: 33.333333%;
  background: #fff;
  opacity: 0.2;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 767px) {
  .l-footer:before {
    left: 33.333333%;
  }
}
.l-footer:after {
  position: absolute;
  width: 1px;
  height: 0;
  content: "";
  top: 0;
  right: 33.333333%;
  background: #fff;
  opacity: 0.2;
  pointer-events: none;
}
@media (max-width: 767px) {
  .l-footer:after {
    right: 33.333333%;
  }
}
.l-footer.is-onscreen::after {
  height: 100%;
}
.l-footer.is-onscreen::before {
  height: 100%;
}
.l-footer.is-active {
  background: #fff;
  border-top: 1px solid rgba(16, 16, 17, 0.2);
}
@media (max-width: 767px) {
  .l-footer.is-active {
    background: var(--color-black);
  }
}
.l-footer.is-active:before {
  background: var(--color-black);
}
@media (max-width: 767px) {
  .l-footer.is-active:before {
    background: var(--color-white);
  }
}
.l-footer.is-active:after {
  background: var(--color-black);
}
@media (max-width: 767px) {
  .l-footer.is-active:after {
    background: var(--color-white);
  }
}
.is-gnav-open .l-footer {
  background: #fff;
  border-top: 1px solid rgba(16, 16, 17, 0.2);
}
.is-gnav-open .l-footer:before {
  background: var(--color-black);
}
.is-gnav-open .l-footer:after {
  background: var(--color-black);
}

.l-footer-contact {
  position: relative;
  padding: 0 0 20rem;
}
@media (max-width: 767px) {
  .l-footer-contact {
    height: 100%;
  }
}

.l-footer-contact__ttl {
  margin: 0 auto;
  width: 47.0238095vw;
  color: var(--color-white);
}
@media (max-width: 767px) {
  .l-footer-contact__ttl {
    position: absolute;
    top: 32.692308vh;
    width: 1005;
  }
}
.is-active .l-footer-contact__ttl {
  mix-blend-mode: exclusion;
}
@media (max-width: 767px) {
  .is-active .l-footer-contact__ttl {
    mix-blend-mode: normal;
  }
}
.is-active .l-footer-contact__ttl svg path {
  fill: var(--color-white);
}
.is-gnav-open .l-footer-contact__ttl {
  mix-blend-mode: exclusion;
}
@media (max-width: 767px) {
  .is-gnav-open .l-footer-contact__ttl {
    mix-blend-mode: normal;
  }
}
.is-gnav-open .l-footer-contact__ttl svg path {
  fill: var(--color-white);
}
.l-footer-contact__ttl svg {
  width: 47.0238095vw;
  height: 6.28306878vw;
  overflow: visible;
}
@media (max-width: 767px) {
  .l-footer-contact__ttl svg {
    width: calc(100vw - 8rem);
    height: 50.769231vw;
    transform: translateX(4rem);
  }
}
.l-footer-contact__ttl svg path {
  transition: var(--easeOutCubic) 0.5s;
}
.l-footer-contact__ttl svg .plus {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: updown 1.5s infinite;
}

.l-footer__list {
  position: absolute;
  left: 6.61375661vw;
  bottom: 0;
}
@media (max-width: 767px) {
  .l-footer__list {
    left: 4rem;
    bottom: 13.974359vh;
    top: auto;
  }
}
.l-footer__list a {
  display: block;
  color: var(--color-white);
  font-size: clamp(12px, 0.8vw, 14px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048rem;
  margin-top: 1rem;
}
.is-active .l-footer__list a {
  color: var(--color-black);
}

.l-footer__copyright {
  position: absolute;
  right: 6.61375661vw;
  bottom: 0;
  color: var(--color-white);
  font-size: clamp(12px, 0.8vw, 14px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048rem;
}
@media (max-width: 767px) {
  .l-footer__copyright {
    right: 4rem;
    bottom: 13.974359vh;
    top: auto;
  }
}
.is-active .l-footer__copyright {
  color: var(--color-black);
}
@media (max-width: 767px) {
  .is-active .l-footer__copyright {
    color: var(--color-white);
  }
}
.is-gnav-open .l-footer__copyright {
  color: var(--color-black);
}

.l-footer-logo {
  margin-top: 9rem;
}
@media (max-width: 767px) {
  .l-footer-logo {
    position: absolute;
    bottom: 0;
  }
}
.l-footer-logo svg {
  width: 100%;
  height: 100%;
}
.is-gnav-open .l-footer-logo svg path {
  fill: var(--color-black);
}
.is-active .l-footer-logo {
  animation-name: glitch-anim-text;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.is-active .l-footer-logo svg path {
  fill: var(--color-black);
}
@media (max-width: 767px) {
  .is-active .l-footer-logo svg path {
    fill: var(--color-white);
  }
}

/*@import "layout/parallax";*/
/* =========================================================

Object

========================================================= */
/* ---------------------------------------------------------

Component

--------------------------------------------------------- */
.c-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 111;
}

.c-background__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.c-background-transition {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1111;
  opacity: 0;
}
.is-slide-in .c-background-transition {
  opacity: 1 !important;
}
.works .c-background-transition {
  position: fixed;
}
.error .c-background-transition {
  position: fixed;
}

.c-background-transition__item {
  width: 100%;
  height: 3.3333333vh;
  display: block;
  background: var(--color-black);
  position: relative;
}
@media (max-width: 767px) {
  .c-background-transition__item {
    background: transparent;
  }
}
.is-page-loaded .c-background-transition__item {
  transition: var(--easeOutCubic) 0.5s;
  transform: scaleY(0);
}
@media (max-width: 767px) {
  .is-page-loaded .c-background-transition__item {
    background: var(--color-black);
  }
}
.is-page-loaded .c-background-transition__item--1 {
  transition-delay: 0.29s;
}
.is-page-loaded .c-background-transition__item--2 {
  transition-delay: 0.28s;
}
.is-page-loaded .c-background-transition__item--3 {
  transition-delay: 0.27s;
}
.is-page-loaded .c-background-transition__item--4 {
  transition-delay: 0.26s;
}
.is-page-loaded .c-background-transition__item--5 {
  transition-delay: 0.25s;
}
.is-page-loaded .c-background-transition__item--6 {
  transition-delay: 0.24s;
}
.is-page-loaded .c-background-transition__item--7 {
  transition-delay: 0.23s;
}
.is-page-loaded .c-background-transition__item--8 {
  transition-delay: 0.22s;
}
.is-page-loaded .c-background-transition__item--9 {
  transition-delay: 0.21s;
}
.is-page-loaded .c-background-transition__item--10 {
  transition-delay: 0.2s;
}
.is-page-loaded .c-background-transition__item--11 {
  transition-delay: 0.19s;
}
.is-page-loaded .c-background-transition__item--12 {
  transition-delay: 0.18s;
}
.is-page-loaded .c-background-transition__item--13 {
  transition-delay: 0.17s;
}
.is-page-loaded .c-background-transition__item--14 {
  transition-delay: 0.16s;
}
.is-page-loaded .c-background-transition__item--15 {
  transition-delay: 0.15s;
}
.is-page-loaded .c-background-transition__item--16 {
  transition-delay: 0.14s;
}
.is-page-loaded .c-background-transition__item--17 {
  transition-delay: 0.13s;
}
.is-page-loaded .c-background-transition__item--18 {
  transition-delay: 0.12s;
}
.is-page-loaded .c-background-transition__item--19 {
  transition-delay: 0.11s;
}
.is-page-loaded .c-background-transition__item--20 {
  transition-delay: 0.1s;
}
.is-page-loaded .c-background-transition__item--21 {
  transition-delay: 0.09s;
}
.is-page-loaded .c-background-transition__item--22 {
  transition-delay: 0.08s;
}
.is-page-loaded .c-background-transition__item--23 {
  transition-delay: 0.07s;
}
.is-page-loaded .c-background-transition__item--24 {
  transition-delay: 0.06s;
}
.is-page-loaded .c-background-transition__item--25 {
  transition-delay: 0.05s;
}
.is-page-loaded .c-background-transition__item--26 {
  transition-delay: 0.04s;
}
.is-page-loaded .c-background-transition__item--27 {
  transition-delay: 0.03s;
}
.is-page-loaded .c-background-transition__item--28 {
  transition-delay: 0.02s;
}
.is-page-loaded .c-background-transition__item--29 {
  transition-delay: 0.01s;
}
.is-page-loaded .c-background-transition__item--30 {
  transition-delay: 0s;
}
.is-slide-in .c-background-transition__item {
  transition: var(--easeOutCubic) 0.5s;
  transform: scaleY(1);
}

.c-cursor {
  position: fixed;
  inset: 0;
  /* 画面全体 */
  pointer-events: none;
  z-index: 9999;
  color: #fff;
  white-space: nowrap;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  opacity: 0;
  /* 初期は非表示。mousemoveで出す */
  transition: opacity 0.2s ease;
  mix-blend-mode: exclusion;
}

.c-cursor.is-hidden {
  opacity: 0 !important;
}

/* 子要素を画面基準で個別に動かす */
.c-cursor__plus,
.c-cursor__text {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  will-change: left, top, transform;
}

.c-cursor__plus {
  display: block;
  position: relative;
  width: 15px;
  height: 15px;
}
.c-cursor__plus:after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: #fff;
  content: "";
}
.c-cursor__plus:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background: #fff;
  content: "";
}

.c-cursor__text {
  display: block;
  min-height: 1em;
  /* テキストない瞬間でも高さ維持 */
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 11px;
  font-size: 1.2rem;
  background: var(--color-bg-dark);
  border-radius: 4px;
  height: 24px;
  letter-spacing: 0.072em;
}

.c-copy {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  z-index: 112;
  pointer-events: none;
}
.is-page-loaded .c-copy {
  top: 82.2882288dvh;
  transition: var(--easeOutCubic) 1s;
}
@media (max-width: 767px) {
  .is-page-loaded .c-copy {
    top: 90dvh;
  }
}
@media (max-width: 767px) {
  .c-copy {
    width: 100%;
  }
}
.c-copy img {
  width: 26.1904762vw;
}
@media (max-width: 767px) {
  .c-copy img {
    width: 60vw;
    margin: 0 auto;
    display: table;
  }
}
.works .c-copy {
  display: none;
}
.error .c-copy {
  display: none;
}
.recruit .c-copy {
  display: none;
}
.contact .c-copy {
  display: none;
}
.is-back-return .c-copy {
  display: none;
}

.c-copy__back {
  opacity: 0.1;
}

.c-copy__inner {
  transform: scale(1);
  transition: var(--easeOutCubic) 1s;
  transition-delay: 0.5s;
}
.is-page-loaded .c-copy__inner {
  opacity: 0;
}
.is-back-return .c-copy__inner {
  display: none;
  transition-delay: 0s;
}

.c-copy__front {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: -webkit-clip-path 0.3s linear;
  transition: clip-path 0.3s linear;
  transition: clip-path 0.3s linear, -webkit-clip-path 0.3s linear;
}
@media (max-width: 767px) {
  .c-copy__front {
    width: 100%;
    margin: 0 auto;
    display: table;
  }
}

.c-loading {
  position: absolute;
  top: 5.83058306vh;
  left: 2.96825397vw;
  z-index: 112;
}
@media (max-width: 767px) {
  .c-loading {
    top: 3.7rem;
    padding-left: 0;
    left: 9.74359vw;
    padding-left: 0;
  }
}
.is-page-loaded .c-loading {
  opacity: 0;
  pointer-events: none;
}
.c-loading span {
  color: var(--color-black);
  font-family: var(--font-family-eng);
  font-size: clamp(10px, 0.8vw, 14px);
  letter-spacing: 0.218rem;
  animation: blinking 0.5s ease-in-out infinite alternate;
}
@media (max-width: 767px) {
  .c-loading span {
    font-size: clamp(12px, 3vw, 12px);
  }
}

.c-section {
  position: relative;
}

.c-section__heading {
  position: relative;
  padding-left: 2rem;
  color: var(--color-black);
}
.c-section__heading span {
  display: table;
  position: relative;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  font-size: clamp(10px, 0.8vw, 14px);
  letter-spacing: 0.218rem;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: var(--easeOutCubic) 0.8s;
}
@media (max-width: 767px) {
  .c-section__heading span {
    font-size: clamp(12px, 3vw, 13px);
  }
}
.c-section__heading span:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--color-black);
  content: "";
  transition: var(--easeOutCubic) 0.3s;
}
.c-section__heading::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  width: 0px;
  height: 1px;
  background: var(--color-black);
  transition: var(--easeOutCubic) 0.3s;
}
.c-section__heading.is-onscreen span {
  -webkit-clip-path: inset(0 0% 0 0);
          clip-path: inset(0 0% 0 0);
}
.c-section__heading.is-onscreen span:after {
  width: 0;
  transition-delay: 0.8s;
}
.c-section__heading.is-onscreen::before {
  width: 10px;
}

.c-table {
  position: relative;
  width: 100%;
}
.c-table:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--color-bg-primary);
  opacity: 0.2;
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.2s;
}
.c-table.is-onscreen:before {
  width: 100%;
}

.c-table__row {
  display: flex;
  align-items: baseline;
  position: relative;
}
.c-table__row:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--color-bg-primary);
  opacity: 0.2;
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.2s;
}
.c-table__row.is-onscreen:after {
  width: 100%;
}

.c-table__heading {
  flex: none;
  color: var(--color-gray);
  font-weight: var(--font-weight-regular);
  line-height: 2;
  padding: 3rem 0;
  text-align: left;
  width: calc(100/1512*100vw);
  font-size: clamp(12px, 0.8vw, 14px);
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
}
@media (max-width: 767px) {
  .c-table__heading {
    width: calc(80/390*100vw);
    padding: 2rem 0;
  }
}
.is-onscreen .c-table__heading {
  opacity: 1;
  filter: blur(0);
}

.c-table__desc {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-black);
  line-height: 2;
  padding: 3rem 0;
  font-size: clamp(12px, 0.8vw, 14px);
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
}
@media (max-width: 767px) {
  .c-table__desc {
    font-size: 3vw;
    padding: 2rem 0;
  }
}
.is-onscreen .c-table__desc {
  opacity: 1;
  filter: blur(0);
}
.c-table__desc a {
  color: var(--color-black);
  position: relative;
  padding-bottom: 0.3rem;
}
.c-table__desc a:after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-black);
  position: absolute;
  bottom: 0;
  left: 0;
}

.c-table__ttl {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: clamp(12.5px, 0.933333vw, 16px);
  margin-bottom: 3rem;
}
@media (max-width: 767px) {
  .c-table__ttl {
    font-size: 3vw;
  }
}

.c-table__caption {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048rem;
  font-size: clamp(9px, 0.67777vw, 10px);
  margin-top: 3rem;
}
@media (max-width: 767px) {
  .c-table__caption {
    font-size: 2.25vw;
  }
}

.c-form {
  overflow: hidden;
}

.c-form__header {
  margin: 0 0 6rem;
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .c-form__header {
    display: block;
    margin: 0 0 4rem;
  }
}

.c-form-current {
  display: flex;
  align-items: center;
}

.c-form-current__item {
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  font-size: clamp(11px, 0.8vw, 12px);
  padding: 0 4.5rem 0 1.5rem;
  position: relative;
  margin-right: 1.5rem;
  opacity: 0.2;
}
@media (max-width: 767px) {
  .c-form-current__item {
    display: block;
  }
}
.c-form-current__item.is-current {
  opacity: 1;
}
.c-form-current__item:last-child::after {
  content: none;
}
.c-form-current__item::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  left: 0;
  background: var(--color-black);
  border-radius: 1rem;
}
.c-form-current__item::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 3rem;
  right: 0;
  height: 1px;
  border-top: 1px solid var(--color-black);
}

.c-form__header-note {
  font-weight: var(--font-weight-medium);
  font-size: clamp(11px, 0.8vw, 12px);
  margin-left: auto;
}
@media (max-width: 767px) {
  .c-form__header-note {
    margin-top: 2rem;
    display: table;
  }
}

.c-form-require {
  color: #dc433b;
}

.c-form-row {
  margin-bottom: 5rem;
}
@media (max-width: 767px) {
  .c-form-row {
    margin-bottom: 3rem;
  }
}

.c-form-label {
  font-weight: var(--font-weight-medium);
  font-size: clamp(13px, 0.933333vw, 15px);
  margin-bottom: 2rem;
  display: table;
}
@media (max-width: 767px) {
  .c-form-label {
    font-size: clamp(12px, 3.25vw, 13px);
    margin-bottom: 1.5rem;
  }
}

.c-form-label__required {
  color: #dc433b;
}

.c-form-field {
  padding: 2.4rem 2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
  .c-form-field {
    width: 100%;
    padding: 1.9rem 2rem;
  }
}
.c-form-field--message {
  width: 100%;
}
.c-form-field--select {
  position: relative;
}
.c-form-field select {
  width: 100%;
}
.c-form-field textarea {
  width: 100%;
  height: 30rem;
  font-weight: var(--font-weight-medium);
  font-size: clamp(11px, 0.8vw, 12px);
}
@media (max-width: 767px) {
  .c-form-field textarea {
    height: 18rem;
  }
}
.c-form-field input {
  width: 50%;
}

.c-form-select {
  font-weight: var(--font-weight-medium);
  font-size: clamp(11px, 0.8vw, 12px);
}
@media (max-width: 767px) {
  .c-form-select {
    font-size: clamp(10px, 2.75vw, 11px);
  }
}

.c-form-input {
  font-weight: var(--font-weight-medium);
  font-size: clamp(11px, 0.8vw, 12px);
}

input::placeholder {
  color: var(--color-navy);
  /* 好きな色に変更 */
  opacity: 0.2;
  /* iOS Safari の薄すぎ問題を防ぐ */
}

/* Chrome / Safari / Edge */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-black);
  /* 文字色 */
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.c-form-select__icon {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.c-form-row--submit {
  overflow: hidden;
  display: flex;
  gap: 3rem;
  justify-content: center;
  font-weight: var(--font-weight-medium);
  font-size: clamp(13px, 0.933333vw, 14px);
}
@media (max-width: 767px) {
  .c-form-row--submit {
    font-size: clamp(13px, 3.5vw, 14px);
    justify-content: center;
    gap: 1.5rem;
    margin-top: 4rem;
  }
}
.c-form-row--submit span {
  display: table;
  margin: 0 auto;
}
.c-form-row--submit button {
  display: table;
  border-radius: 50px;
  color: var(--color-white);
  background: var(--color-black);
  padding: 2rem 6rem;
  transition: var(--easeOutCubic) 0.8s;
  min-width: 200px;
  text-align: center;
}
@media (max-width: 767px) {
  .c-form-row--submit button {
    min-width: auto;
    padding: 2rem 3rem;
    width: 100%;
  }
}
.c-form-row--submit button.c-form-back {
  color: var(--color-white);
  background: var(--color-gray);
}
.c-form-row--submit button:hover {
  opacity: 0.5;
}

.c-form-submit__inner {
  overflow: hidden;
}

.c-form-errors {
  font-weight: var(--font-weight-medium);
  font-size: clamp(15px, 1.066667vw, 16px);
  margin-bottom: 5rem;
}
@media (max-width: 767px) {
  .c-form-errors {
    font-size: clamp(13px, 3.5vw, 14px);
    line-height: 1.6;
    margin-bottom: 4rem;
  }
}
.c-form-errors span {
  color: #dc433b;
}

.c-form-confirm {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: clamp(12.5px, 0.933333vw, 16px);
  line-height: 2;
  margin-bottom: 5rem;
}
@media (max-width: 767px) {
  .c-form-confirm {
    font-size: clamp(13px, 3.5vw, 14px);
    line-height: 1.6;
    margin-bottom: 4rem;
  }
}

.c-form-complate {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: clamp(12.5px, 0.933333vw, 16px);
  line-height: 2;
}

.c-form-error-text {
  color: #dc433b;
  font-weight: var(--font-weight-medium);
  font-size: clamp(11px, 0.8vw, 12px);
  margin-top: 1.5rem;
}
@media (max-width: 767px) {
  .c-form-error-text {
    font-size: clamp(10px, 2.5vw, 11px);
    margin-top: 1rem;
  }
}

.c-form-confirm-text {
  font-weight: var(--font-weight-medium);
  font-size: clamp(13px, 0.933333vw, 14px);
}

.c-form__ttl {
  font-weight: var(--font-weight-medium);
  font-size: clamp(20px, 1.533333vw, 23px);
  margin-bottom: 3rem;
}

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

Project

--------------------------------------------------------- */
.p-top-kv {
  width: 100%;
  background: var(--color-bg-white);
}
.p-top-kv__logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1111;
}
.p-top-kv__logo svg {
  width: calc(733/1512*100vw);
  height: calc(90/1512*100vw);
}
@media (max-width: 767px) {
  .p-top-kv__logo svg {
    width: calc(330/390*100vw);
    height: calc(40/390*100vw);
  }
}
.p-top-kv__logo svg path {
  fill: #fff;
}
.is-gnav-open .p-top-kv__logo {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
}

.p-top-kv__logo-svg-1 {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.is-page-loaded .p-top-kv__logo-svg-1 {
  transform: rotateY(0deg) translateZ(0px);
}
.p-top-kv__logo-svg-1 path {
  transform: translateY(-102%);
}
.is-page-loaded .p-top-kv__logo-svg-1 path {
  transform: translateY(0%);
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.8s;
}

.p-top-kv__logo-svg-2 {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.p-top-kv__logo-svg-2 path {
  transform: translateY(102%);
}
.is-page-loaded .p-top-kv__logo-svg-2 path {
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.8s;
  transform: translateY(0%);
}

.p-top-kv__copy {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 82.2882288%;
  z-index: 111;
  pointer-events: none;
}
@media (max-width: 767px) {
  .p-top-kv__copy {
    top: 90dvh;
    width: 100%;
  }
}
.p-top-kv__copy img {
  width: 26.1904762vw;
}
@media (max-width: 767px) {
  .p-top-kv__copy img {
    width: 60vw;
    margin: 0 auto;
    display: table;
  }
}
.is-gnav-open .p-top-kv__copy {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
}

.p-top-kv__copy-img {
  opacity: 0;
  transition: var(--easeOutCubic) 1s;
}
.is-page-loaded .p-top-kv__copy-img {
  opacity: 1;
  transition-delay: 1s;
}

.p-top-kv__wrapper {
  position: relative;
}

.p-top-kv__swiper.swiper-cube .swiper-wrapper,
.p-top-kv__swiper.swiper-cube .swiper-slide {
  transition-timing-function: linear !important;
}

.p-top-kv__swiper .swiper-wrapper {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.p-top-kv__swiper .swiper-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.p-top-kv__swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

.p-top-kv__swiper .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
  background: #000;
}

.p-top-kv__vis-video-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateZ(0);
  image-rendering: auto;
  opacity: 0.9999;
}

.p-top-kv__vis {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  -webkit-clip-path: inset(50% 50% 50% 50%);
          clip-path: inset(50% 50% 50% 50%);
  transition: var(--easeOutCubic) 1.5s;
}
@media (max-width: 767px) {
  .p-top-kv__vis {
    height: 100lvh;
  }
}
.is-page-loaded .p-top-kv__vis {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.is-gnav-open .p-top-kv__vis {
  transition: var(--easeOutCubic) 1s;
  filter: blur(10px);
}

.p-top-kv__vis-video {
  perspective: 1200px;
  -webkit-perspective: 1200px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  overflow: visible;
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.p-top-kv__vis-video-item {
  transform: translateZ(0.001px);
  overflow: hidden;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.5);
  transform-origin: center;
  background-image: url(../img/top/fv.webp);
  background-size: cover;
  background-position: center top;
  transition: var(--easeOutCubic) 1.5s;
}
.is-page-loaded .p-top-kv__vis-video-item {
  transform: scale(1);
}
.p-top-kv__vis-video-item:after {
  position: absolute;
  width: 150%;
  height: 150%;
  content: "";
  background: #000;
  opacity: 0.2 !important;
  top: -25%;
  left: -25%;
  z-index: 50;
}
@media (max-width: 767px) {
  .p-top-kv__vis-video-item:after {
    content: none;
  }
}
.p-top-kv__vis-video-item video {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
@media (max-width: 767px) {
  .p-top-kv__vis-video-item video {
    opacity: 1;
  }
}

.p-top-kv__space {
  height: 270vh;
}

.p-top-kv__space-2 {
  height: 200vh;
}

.swiper-slide {
  overflow: hidden;
}

.p-top-kv__swiper {
  position: relative;
}
@media (max-width: 767px) {
  .p-top-kv__swiper:after {
    position: absolute;
    width: 150%;
    height: 150%;
    content: "";
    background: #fff;
    opacity: 0.1 !important;
    top: -25%;
    left: -25%;
    z-index: 50;
    mix-blend-mode: saturation;
  }
  .p-top-kv__swiper:before {
    position: absolute;
    width: 150%;
    height: 150%;
    content: "";
    background: #fff;
    opacity: 0.1 !important;
    top: -25%;
    left: -25%;
    z-index: 50;
  }
}

.p-top-about {
  padding: 15vh 0 0vh;
  margin-top: -215vh;
}
.is-gnav-open .p-top-about {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
}

.p-top-about__inner {
  padding: 0 var(--site-padding);
}
@media (max-width: 767px) {
  .p-top-about__inner {
    padding: 0 var(--site-padding-sm);
  }
  .p-top-about__inner .c-section__heading {
    color: var(--color-black);
  }
  .p-top-about__inner .c-section__heading span:after {
    background: var(--color-black);
  }
  .p-top-about__inner .c-section__heading:before {
    background: var(--color-black);
  }
}

.p-top-about__copy {
  margin-top: 15rem;
}
@media (max-width: 767px) {
  .p-top-about__copy {
    margin-top: 8rem;
  }
}

.p-top-about__copy-text {
  position: relative;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  font-size: clamp(40px, 3.5vw, 55px);
  mix-blend-mode: difference;
  color: var(--color-white);
}
@media (max-width: 767px) {
  .p-top-about__copy-text {
    font-size: clamp(30px, 9vw, 36px);
    mix-blend-mode: normal;
    color: var(--color-black);
  }
}
.p-top-about__copy-text span {
  position: relative;
  display: table;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: var(--easeOutCubic) 0.8s;
  margin-bottom: 0.5rem;
}
.p-top-about__copy-text span:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  content: "";
  transition: var(--easeOutCubic) 0.3s;
}
@media (max-width: 767px) {
  .p-top-about__copy-text span:after {
    background: var(--color-black);
  }
}
.is-onscreen .p-top-about__copy-text span {
  -webkit-clip-path: inset(0 0% 0 0);
          clip-path: inset(0 0% 0 0);
}
.is-onscreen .p-top-about__copy-text span:after {
  width: 0;
  transition-delay: 0.8s;
}
.p-top-about__copy-text:nth-child(2) span {
  transition-delay: 0.2s;
}
.p-top-about__copy-text:nth-child(3) span {
  transition-delay: 0.3s;
}
.p-top-about__copy-text:nth-child(4) span {
  transition-delay: 0.4s;
}

.p-top-about__lead {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .p-top-about__lead {
    margin-top: 5rem;
  }
}

.p-top-about__lead-word {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: 2vw;
  position: relative;
  line-height: 2;
  color: var(--color-black);
  mix-blend-mode: difference;
}
@media (max-width: 767px) {
  .p-top-about__lead-word {
    mix-blend-mode: normal;
    font-size: 3.25vw;
    color: #ccc;
  }
}
.p-top-about__lead-word span {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-white);
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
@media (max-width: 767px) {
  .p-top-about__lead-word span {
    color: var(--color-black);
  }
}

.p-top-about__lead-jp {
  font-family: var(--font-family-eng);
  display: table;
  margin-left: auto;
  margin-top: 6rem;
  font-size: clamp(10px, 0.7333vw, 12px);
  line-height: 1.8;
  letter-spacing: 0.025em;
  width: 26.12343386vw;
  text-align: justify;
  mix-blend-mode: difference;
  color: var(--color-white);
}
@media (max-width: 1280px) {
  .p-top-about__lead-jp {
    width: 33.33333vw;
    mix-blend-mode: normal;
  }
}
@media (max-width: 767px) {
  .p-top-about__lead-jp {
    width: 100%;
    color: var(--color-black);
    font-size: clamp(10px, 2.75vw, 12px);
  }
}

.p-top-about__space {
  height: 100vh;
}

.p-top-works {
  padding: calc(180/1512*100vw) 0;
  position: relative;
  z-index: 111;
  background: var(--color-black);
}
@media (max-width: 767px) {
  .p-top-works {
    padding: 12rem 0;
  }
}
.p-top-works .c-section__heading {
  margin-bottom: 8rem;
  color: var(--color-white);
}
.p-top-works .c-section__heading span::after {
  background: var(--color-white);
}
.p-top-works .c-section__heading::before {
  background: var(--color-white);
}
@media (max-width: 767px) {
  .p-top-works .c-section__heading {
    margin-bottom: 6rem;
  }
}
.p-top-works .p-works__name {
  color: var(--color-white);
}
.p-top-works .p-works__category {
  color: var(--color-white);
}

.is-gnav-open .p-top-works__body a {
  pointer-events: none !important;
}

.p-top-works__inner {
  width: 100%;
}

.p-top-works__btn {
  display: table;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .p-top-works__btn {
    margin: 4rem auto 0;
  }
}
.p-top-works__btn a {
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.5s;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048em;
  font-size: clamp(10px, 0.8vw, 14px);
  color: var(--color-white);
  position: relative;
  padding-bottom: 0.3rem;
}
.p-top-works__btn a:after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-white);
  position: absolute;
  bottom: 0;
  left: 0;
}

.p-top-member {
  padding: calc(180/1512*100vw) 0 0;
  position: relative;
  z-index: 111;
}
@media (max-width: 767px) {
  .p-top-member {
    padding: 12rem 0 0rem;
  }
}
@media (max-width: 767px) {
  .p-top-member .c-section__heading {
    margin-bottom: 6rem;
  }
}
.is-gnav-open .p-top-member {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none !important;
}

.p-top-member__inner {
  position: relative;
  display: flex;
}
@media (max-width: 767px) {
  .p-top-member__inner {
    display: block;
  }
}

.p-top-member__left {
  position: sticky;
  top: calc(180/1512*100vw);
  height: 100%;
}
@media (max-width: 767px) {
  .p-top-member__left {
    position: relative;
    top: 0;
    margin-bottom: 4rem;
  }
}

.p-top-member__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 10rem 0 0;
}
@media (max-width: 767px) {
  .p-top-member__filter {
    gap: 0.5rem;
    margin: 6rem 0 0;
  }
}

.p-top-member__filter-btn {
  -webkit-appearance: none;
          appearance: none;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--color-bg-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--color-black);
  font-size: clamp(11px, 0.75vw, 13px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.048rem;
  opacity: 0.4;
  transition: var(--easeOutCubic) 0.3s;
}
@media (max-width: 767px) {
  .p-top-member__filter-btn {
    font-size: 2.5vw;
    padding: 0.8rem 1.4rem;
  }
}
.p-top-member__filter-btn a {
  color: var(--color-black);
}
.p-top-member__filter-btn:hover {
  opacity: 0.7;
}
.p-top-member__filter-btn.is-active {
  opacity: 1;
  background: var(--color-bg-primary);
  color: var(--color-bg-white);
}
.p-top-member__filter-btn.is-active a {
  color: var(--color-white);
}

.p-top-member__list {
  margin-left: 13.2275132vw;
  width: 100%;
}
@media (max-width: 767px) {
  .p-top-member__list {
    margin-left: 0;
  }
}

.p-top-member__item {
  position: relative;
  margin-bottom: 4.5rem;
  padding-bottom: 4.5rem;
}
@media (max-width: 767px) {
  .p-top-member__item {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
.p-top-member__item:last-child {
  margin-bottom: 0;
}
.p-top-member__item:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--color-bg-primary);
  opacity: 0.2;
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.2s;
}
.p-top-member__item.is-onscreen:after {
  width: 100%;
}
.p-top-member__item.is-filtered-out {
  display: none;
}

.p-top-member__box {
  display: flex;
  gap: 3rem;
  align-items: center;
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
  color: var(--color-bg-primary);
}
@media (max-width: 767px) {
  .p-top-member__box {
    gap: 2rem;
  }
}
.is-onscreen .p-top-member__box {
  opacity: 1;
  filter: blur(0);
}

.p-top-member__num {
  font-size: clamp(10px, 0.666667vw, 12px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.048rem;
}

.p-top-member__profile {
  pointer-events: none;
}

.p-top-member__name {
  font-size: 1.0666667vw;
  font-size: clamp(16px, 1.0666667vw, 18px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.048rem;
  margin-bottom: 1rem;
}
@media (max-width: 767px) {
  .p-top-member__name {
    margin-bottom: 0.5rem;
    font-size: clamp(14px, 3.5vw, 16px);
  }
}

.p-top-member__job {
  font-size: clamp(12px, 0.8vw, 14px);
  color: var(--color-gray);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.048rem;
}
@media (max-width: 767px) {
  .p-top-member__job {
    font-size: clamp(10px, 2.5vw, 12px);
  }
}

.p-top-outline {
  padding: calc(180/1512*100vw) 0 0;
  position: relative;
  z-index: 111;
}
.is-gnav-open .p-top-outline {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none !important;
}
@media (max-width: 767px) {
  .p-top-outline {
    padding: 12rem 0 0rem;
  }
}
.p-top-outline .c-section__heading {
  margin-bottom: 8rem;
}
@media (max-width: 767px) {
  .p-top-outline .c-section__heading {
    margin-bottom: 6rem;
  }
}

.p-top-outline__inner {
  position: relative;
}
@media (max-width: 767px) {
  .p-top-outline__inner {
    display: block;
  }
}

.p-top-outline__content {
  display: flex;
  gap: 6rem;
}
@media (max-width: 767px) {
  .p-top-outline__content {
    display: block;
  }
  .p-top-outline__content .p-company__table--2.c-table::before {
    content: none;
  }
}

.p-top-access {
  padding: calc(180/1512*100vw) 0 calc(220/1512*100vw);
  position: relative;
  z-index: 111;
  color: var(--color-black);
}
.is-gnav-open .p-top-access {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none !important;
}
@media (max-width: 767px) {
  .p-top-access {
    padding: 12rem 0 10rem;
  }
}
.p-top-access .c-section__heading {
  margin-bottom: 8rem;
}
@media (max-width: 767px) {
  .p-top-access .c-section__heading {
    margin-bottom: 6rem;
  }
}
.p-top-access__inner {
  position: relative;
}
@media (max-width: 767px) {
  .p-top-access__inner {
    display: block;
  }
}

.p-top-access__map {
  position: relative;
}
.p-top-access__map iframe {
  width: 100%;
  height: calc(480/1512*100vw);
  min-height: 30rem;
  overflow: hidden;
  filter: grayscale(1);
}
@media (max-width: 767px) {
  .p-top-access__map iframe {
    height: calc(200/390*100vw);
    min-height: 20rem;
  }
}

.p-top-access__paragraph {
  font-weight: var(--font-weight-regular);
  line-height: 2;
  padding: 5rem 0 3rem;
  font-size: clamp(12px, 0.8vw, 14px);
}
@media (max-width: 767px) {
  .p-top-access__paragraph {
    padding: 3rem 0 1rem;
    font-size: 3vw;
  }
}

.p-top-recruit {
  padding: calc(180/1512*100vw) 0 calc(220/1512*100vw);
  position: relative;
  z-index: 111;
  color: var(--color-white);
  background: var(--color-bg-primary);
}
.p-top-recruit:after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-white);
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.2;
}
.is-gnav-open .p-top-recruit {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none !important;
}
@media (max-width: 767px) {
  .p-top-recruit {
    padding: 11rem 0 10rem;
  }
}
.p-top-recruit .c-section__heading {
  margin-bottom: 8rem;
  color: var(--color-white);
}
@media (max-width: 767px) {
  .p-top-recruit .c-section__heading {
    margin-bottom: 6rem;
  }
}
.p-top-recruit .c-section__heading::before {
  background: var(--color-white);
}
.p-top-recruit .c-section__heading span:after {
  background: var(--color-white);
}
.p-top-recruit__inner {
  position: relative;
}
@media (max-width: 767px) {
  .p-top-recruit__inner {
    display: block;
  }
}

.p-top-recruit__lead-word {
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  font-size: 6.5vw;
  position: relative;
  line-height: 1.2;
  color: #1c1c1c;
  mix-blend-mode: difference;
  display: table;
  margin: auto;
}
@media (max-width: 767px) {
  .p-top-recruit__lead-word {
    font-size: 10vw;
  }
}
.p-top-recruit__lead-word span {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-white);
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}

.p-top-recruit__lead-jp {
  display: table;
  margin: 6rem auto;
  font-size: clamp(11px, 0.8vw, 13px);
  line-height: 2;
}
@media (max-width: 767px) {
  .p-top-recruit__lead-jp {
    margin: 3rem auto;
  }
}

.p-top-recruit__btn {
  display: table;
  margin: 0 auto;
}
.p-top-recruit__btn a {
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.5s;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048em;
  font-size: clamp(10px, 0.8vw, 14px);
  color: var(--color-white);
  position: relative;
  padding-bottom: 0.3rem;
}
.p-top-recruit__btn a:after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-white);
  position: absolute;
  bottom: 0;
  left: 0;
}

.p-works {
  position: relative;
}
.is-gnav-open .p-works {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none !important;
}

.p-works__body {
  margin-bottom: 17rem;
}
@media (max-width: 767px) {
  .p-works__body {
    margin-bottom: 10rem;
  }
}
.is-gnav-open .p-works__body {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none !important;
}

.p-works__head {
  padding-top: 20rem;
  margin-bottom: 14rem;
}
@media (max-width: 767px) {
  .p-works__head {
    padding-top: 11rem;
    margin-bottom: 6rem;
  }
}
.is-gnav-open .p-works__head {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
}

.p-works__heading {
  margin-bottom: 10rem;
  overflow: hidden;
  width: 100%;
  color: var(--color-black);
}
@media (max-width: 767px) {
  .p-works__heading {
    font-size: clamp(18px, 5vw, 23px);
    width: 100%;
    margin-bottom: 6rem;
  }
}
.p-works__heading h1 {
  font-size: clamp(23px, 2vw, 30px);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18rem;
  line-height: 1.4;
  display: table;
  overflow: hidden;
}
.p-works__heading span {
  display: table;
  transform: translateY(101%);
  transition: var(--easeOutCubic) 1s;
  transition-delay: 0.8s;
}
.is-page-loaded .p-works__heading span {
  transform: translateY(0);
}

.p-works__info {
  width: 29.2328042vw;
  margin-left: auto;
  color: var(--color-black);
}
@media (max-width: 767px) {
  .p-works__info {
    width: 100%;
  }
}

.p-works__info-item {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.5s;
}
.p-works__info-item:nth-child(4) {
  margin-top: -0.5rem;
}
.p-works__info-item:after {
  position: absolute;
  content: "";
  width: 0%;
  height: 1px;
  background: var(--color-black);
  opacity: 0.2;
  bottom: 0;
  left: 0;
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.8s;
}
.is-page-loaded .p-works__info-item:after {
  width: 100%;
}
.is-page-loaded .p-works__info-item {
  opacity: 1;
  filter: blur(0);
}

.p-works__info-cat {
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  font-size: clamp(10px, 0.8vw, 14px);
  letter-spacing: 0.048rem;
}

.p-works__info-detail {
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  font-size: clamp(10px, 0.8vw, 14px);
  letter-spacing: 0.048rem;
  margin-left: auto;
  text-align: end;
  line-height: 1.3;
  background: var(--color-white);
}
.p-works__info-detail span {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  margin-left: 3px;
  background: var(--color-bg-dark);
  color: var(--color-white);
  font-size: clamp(9px, 0.666667vw, 12px);
  margin-bottom: 0.5rem;
  mix-blend-mode: exclusion;
}

.p-works__main-img {
  position: relative;
}
.is-gnav-open .p-works__main-img {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
}
.p-works__main-img:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  background: #000;
  opacity: 0.2;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: saturation;
}
.p-works__main-img.has-youtube-preview {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.p-works__main-img.has-youtube-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-works__lead {
  display: flex;
  gap: 8rem;
  padding: 15rem 0 13rem;
  color: var(--color-black);
}
@media (max-width: 767px) {
  .p-works__lead {
    padding: 4rem 0 5rem;
    display: block;
  }
}
.is-gnav-open .p-works__lead {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
}

.p-works__lead-en {
  width: 50%;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  font-size: clamp(13px, 0.8vw, 15px);
  line-height: 2;
}
@media (max-width: 767px) {
  .p-works__lead-en {
    width: 100%;
    margin-bottom: 3rem;
  }
}

.p-works__lead-jp {
  width: 50%;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: clamp(12.5px, 0.933333vw, 16px);
  line-height: 2;
}
@media (max-width: 767px) {
  .p-works__lead-jp {
    width: 100%;
  }
}

.p-works__sub-img {
  margin-bottom: 6.5rem;
  position: relative;
}
@media (max-width: 767px) {
  .p-works__sub-img {
    margin-bottom: 3.5rem;
  }
}
.is-gnav-open .p-works__sub-img {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
}
.p-works__sub-img:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  background: #000;
  opacity: 0.2;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: saturation;
}

.p-works-credit {
  display: flex;
  position: relative;
  padding-top: 7.5rem;
  color: var(--color-black);
}
@media (max-width: 767px) {
  .p-works-credit {
    padding-top: 4.5rem;
    display: block;
  }
}
.is-gnav-open .p-works-credit {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
}

.p-works-credit__list {
  margin-left: 13.2275132vw;
  width: 100%;
}
@media (max-width: 767px) {
  .p-works-credit__list {
    margin-left: 0;
    margin-top: 4rem;
  }
}

.p-works-credit__item {
  position: relative;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  align-items: baseline;
  display: flex;
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
}
@media (max-width: 767px) {
  .p-works-credit__item {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }
}
.p-works-credit__item:last-child {
  margin-bottom: 0;
}
.p-works-credit__item:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--color-black);
  opacity: 0.2;
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.2s;
}
.p-works-credit__item.is-onscreen {
  opacity: 1;
  filter: blur(0);
  pointer-events: none;
}
.p-works-credit__item.is-onscreen::after {
  width: 100%;
}

.p-works-credit__category {
  font-size: clamp(12px, 0.8vw, 14px);
  color: var(--color-gray);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.048rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  width: 15%;
}
@media (max-width: 767px) {
  .p-works-credit__category {
    font-size: clamp(10px, 2.5vw, 12px);
    width: 25%;
  }
}

.p-works-credit__name {
  font-size: clamp(12px, 0.8vw, 14px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.048rem;
  margin-bottom: 1rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .p-works-credit__name {
    font-size: clamp(10px, 2.5vw, 12px);
  }
}

.p-works-other {
  padding-top: calc(250 / 1512 * 100vw);
  color: var(--color-black);
}
@media (max-width: 767px) {
  .p-works-other {
    padding-top: calc(100 / 390 * 100vw);
  }
}
.is-gnav-open .p-works-other {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none;
}
.p-works-other .p-works__num {
  display: none;
}

.p-works__ttl {
  font-size: clamp(23px, 2vw, 32px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18rem;
  line-height: 1.4;
  margin-bottom: 5rem;
  color: var(--color-black);
  overflow: hidden;
}
@media (max-width: 767px) {
  .p-works__ttl {
    font-size: clamp(28px, 7.5vw, 32px);
  }
}
.p-works__ttl span {
  display: table;
  transform: translateY(101%);
  transition: var(--easeOutCubic) 1s;
  transition-delay: 0.2s;
}
.p-works__ttl.is-onscreen span {
  transform: translateY(0);
}

.p-works__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 5rem;
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
}
.is-page-loaded .p-works__filter {
  opacity: 1;
  filter: blur(0);
}
@media (max-width: 767px) {
  .p-works__filter {
    gap: 0.8rem;
  }
}

.p-works__filter-btn {
  -webkit-appearance: none;
          appearance: none;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--color-black);
  border-radius: 999px;
  background: transparent;
  color: var(--color-black);
  font-size: clamp(11px, 0.75vw, 13px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.048rem;
  opacity: 0.4;
  transition: var(--easeOutCubic) 0.3s;
}
.p-works__filter-btn:hover {
  opacity: 0.7;
}
.p-works__filter-btn.is-active {
  opacity: 1;
  background: var(--color-black);
  color: var(--color-white);
}

.p-works__list {
  color: var(--color-black);
  display: flex;
  flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
}
@media (max-width: 767px) {
  .p-works__list {
    margin: 0 auto;
    display: block;
  }
}
.is-gnav-open .p-works__list {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none;
}

.p-works__item {
  position: relative;
  padding: 0 1rem;
  margin-bottom: calc(80 / 1512 * 100vw);
  transition: var(--easeOutCubic) 0.5s;
  width: 33.333333%;
}
@media (max-width: 767px) {
  .p-works__item {
    margin-bottom: calc(30 / 390 * 100vw);
    width: 100%;
    padding: 0;
  }
}
.p-works__item.is-filtered-out {
  display: none;
}
.p-works__item:last-child {
  margin-bottom: 0;
}
.p-works__item a {
  display: block;
  width: 100%;
  color: var(--color-black);
}
.p-works__item a:hover .p-works__img-item {
  transform: scale(1.2);
}
.p-works__item a:hover .p-works__img::before {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .p-works__item a {
    padding-bottom: 3rem;
  }
}
.p-works__name {
  font-size: min(1.0666667vw, 18px);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048rem;
  overflow: hidden;
  line-height: 1.4;
  margin-top: calc(20 / 1512 * 100vw);
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
}
.p-works__name.is-onscreen {
  opacity: 1;
  filter: blur(0);
}
@media (max-width: 767px) {
  .p-works__name {
    font-size: clamp(13px, 3.5vw, 14px);
    line-height: 1.4;
    font-size: 3.25vw;
    margin-top: calc(20 / 390 * 100vw);
  }
}

.p-works__category {
  font-size: min(0.8vw, 14px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048rem;
  overflow: hidden;
  margin-top: calc(15 / 1512 * 100vw);
  opacity: 0.5;
}
@media (max-width: 767px) {
  .p-works__category {
    margin-top: calc(15 / 390 * 100vw);
    font-size: 2.5vw;
  }
}
.p-works__category span {
  display: table;
  transition: var(--easeOutCubic) 1s;
  transform: translateY(100%);
}
.p-works__category.is-onscreen span {
  transform: translateY(0);
}

.p-works__img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  transition: var(--easeOutCubic) 0.8s;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.p-works__img.is-onscreen {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.p-works__img.is-onscreen:after {
  width: 0;
}
.p-works__img:after {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--color-black);
  position: absolute;
  top: 0;
  right: 0;
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.8s;
}
.p-top-works .p-works__img:after {
  background: var(--color-white);
}
.p-works__img::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--color-black);
  position: absolute;
  top: 0;
  right: 0;
  transition: var(--easeOutCubic) 0.8s;
  opacity: 0;
  z-index: 11;
  mix-blend-mode: color;
}
.p-works__img img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.p-works__img-item {
  position: relative;
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: var(--easeOutCubic) 0.8s;
}

.js-youtube-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--easeOutCubic) 0.4s;
}
.js-youtube-preview.is-ready {
  opacity: 1;
}

.p-works-credit-other {
  font-size: clamp(9px, 0.67777vw, 10px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048rem;
  line-height: 2;
  margin-top: 12rem;
}
.top .p-works-credit-other {
  background: #040404;
  margin: 0;
  padding-bottom: 12rem;
}
.p-works__sub-caption {
  font-size: clamp(9px, 0.67777vw, 10px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048rem;
  line-height: 2;
  margin-top: 2rem;
}
@media (max-width: 767px) {
  .p-works__sub-caption {
    margin-top: 1rem;
  }
}

.is-works-02 .p-works-credit-other {
  display: none;
}

.p-recruit__body {
  margin-bottom: 25rem;
}
@media (max-width: 767px) {
  .p-recruit__body {
    margin-bottom: 10rem;
  }
}
.is-gnav-open .p-recruit__body {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none !important;
}

.p-recruit__heading-word {
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  font-size: 6.5vw;
  position: relative;
  line-height: 1.2;
  color: #1c1c1c;
  mix-blend-mode: difference;
  display: table;
  margin: auto;
}
@media (max-width: 767px) {
  .p-recruit__heading-word {
    font-size: 7.5vw;
  }
}
.p-recruit__heading-word span {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-white);
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.5s;
}
.is-page-loaded .p-recruit__heading-word span {
  -webkit-clip-path: inset(0 0% 0 0);
          clip-path: inset(0 0% 0 0);
}

.p-recruit__heading-jp {
  display: table;
  margin: 6rem auto 0;
  font-size: clamp(11px, 0.8vw, 13px);
  line-height: 2;
}
@media (max-width: 767px) {
  .p-recruit__heading-jp {
    margin: 3rem auto 0;
  }
}

.p-recruit__lead {
  margin: 15rem 0 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: clamp(12.5px, 0.933333vw, 16px);
  line-height: 2;
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
}
@media (max-width: 767px) {
  .p-recruit__lead {
    margin: 6rem 0 0;
  }
}
.p-recruit__lead.is-onscreen {
  opacity: 1;
  filter: blur(0);
  pointer-events: none;
}
.p-recruit__lead.is-onscreen::after {
  width: 100%;
}

.p-recruit__table {
  margin: 10rem auto 0;
}

.p-contact__body {
  margin-bottom: 25rem;
}
.is-gnav-open .p-contact__body {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none !important;
}
@media (max-width: 767px) {
  .p-contact__body {
    margin-bottom: 10rem;
  }
}

.p-contact__lead {
  margin: 0 0 8rem;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: clamp(12.5px, 0.933333vw, 16px);
  line-height: 2;
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
}
@media (max-width: 767px) {
  .p-contact__lead {
    margin: 0 0 6rem;
  }
}
.p-contact__lead.is-onscreen {
  opacity: 1;
  filter: blur(0);
  pointer-events: none;
}
.p-contact__lead.is-onscreen::after {
  width: 100%;
}

.p-contact__btn {
  display: table;
  margin-top: 3rem;
}
.p-contact__btn a {
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.5s;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048em;
  font-size: clamp(10px, 0.8vw, 14px);
  color: var(--color-black);
  position: relative;
  padding-bottom: 0.3rem;
}
.p-contact__btn a:after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-black);
  position: absolute;
  bottom: 0;
  left: 0;
}

.p-error {
  position: relative;
}
.is-gnav-open .p-error {
  transition: var(--easeOutCubic) 1s;
  filter: blur(4px);
  pointer-events: none !important;
}

.p-error__body {
  position: relative;
  width: 100%;
  height: 100vh;
}

.p-error__inner {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.p-error__heading {
  font-size: clamp(100px, 6.6666667vw, 100px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.18rem;
  line-height: 1;
  overflow: hidden;
  width: 100%;
}
.p-error__heading span {
  display: table;
  transform: translateY(101%);
  transition: var(--easeOutCubic) 1s;
  transition-delay: 0.8s;
  margin: 0 auto;
}
.is-page-loaded .p-error__heading span {
  transform: translateY(0);
}

.p-error__not_found {
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.5s;
  font-size: clamp(14px, 1.06666667vw, 16px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.18rem;
  margin: 1.1rem 0 4rem;
}
.is-page-loaded .p-error__not_found {
  opacity: 1;
  filter: blur(0px);
}

.p-error__description {
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.5s;
  font-size: clamp(11px, 0.86666667vw, 13px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.18rem;
}
.is-page-loaded .p-error__description {
  opacity: 0.5;
  filter: blur(0px);
}

.p-error__btn {
  opacity: 0;
  filter: blur(10px);
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.5s;
  font-size: clamp(10px, 0.8vw, 14px);
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048em;
  position: absolute;
  left: 50%;
  bottom: 20vh;
  transform: translateX(-50%);
}
.is-page-loaded .p-error__btn {
  opacity: 1;
  filter: blur(0px);
}
.p-error__btn a {
  transition: var(--easeOutCubic) 0.8s;
  transition-delay: 0.5s;
  font-family: var(--font-family-eng);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.048em;
  font-size: clamp(10px, 0.8vw, 14px);
  color: var(--color-black);
  position: relative;
  padding-bottom: 0.3rem;
}
.p-error__btn a:after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-black);
  position: absolute;
  bottom: 0;
  left: 0;
}

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


Utility

--------------------------------------------------------- */
.u-sp-block {
  display: none !important;
}
@media (max-width: 767px) {
  .u-sp-block {
    display: block !important;
  }
}

.u-pc-block {
  display: block !important;
}
@media (max-width: 767px) {
  .u-pc-block {
    display: none !important;
  }
}

.u-font-jp {
  font-family: var(--font-family-sans);
}

/* =========================================================
IMG
========================================================= */
.u-img-responsive {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* =========================================================
ANIMATION
========================================================= */
@keyframes blinking {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes glitch-anim-1 {
  0% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  4% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  8% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  10% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  12% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  14% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  16% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  18% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}
@keyframes glitch-anim-2 {
  0% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  3% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  5% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  7% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  9% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  11% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  13% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  15% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  17% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  19% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  20% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}
@keyframes glitch-anim-3 {
  0% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  1.5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  2% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  2.5% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  3% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  5.5% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  7% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  8% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  9% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  10.5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  11% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  13% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  14% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  14.5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  15% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  16% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  18% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}
/* Horizontal */
@keyframes glitch-anim-1-horizontal {
  0% {
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  10% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  20% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  30% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  40% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  50% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  60% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  70% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  80% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  90% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  100% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
}
@keyframes glitch-anim-2-horizontal {
  0% {
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  15% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  22% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  31% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  45% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  51% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  63% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  76% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  81% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  94% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  100% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
}
@keyframes glitch-anim-3-horizontal {
  0% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  10% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  25% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  27% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  30% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  33% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  37% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  40% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  45% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  50% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  53% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  57% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  60% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  65% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  70% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  73% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  80% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  100% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
}
/* Vertical */
@keyframes glitch-anim-1-vertical {
  0% {
    -webkit-clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
    clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
  }
  10% {
    -webkit-clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
    clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
  }
  20% {
    -webkit-clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
    clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
  }
  30% {
    -webkit-clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
    clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
  }
  40% {
    -webkit-clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
    clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
  }
  50% {
    -webkit-clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
    clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
  }
  60% {
    -webkit-clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
    clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
  }
  70% {
    -webkit-clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
    clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
  }
  80% {
    -webkit-clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
    clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
  }
  90% {
    -webkit-clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
    clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
  }
  100% {
    -webkit-clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
    clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
  }
}
@keyframes glitch-anim-2-vertical {
  0% {
    -webkit-clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
    clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
  }
  15% {
    -webkit-clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
    clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
  }
  22% {
    -webkit-clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
    clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
  }
  31% {
    -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
    clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
  }
  45% {
    -webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
    clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
  }
  51% {
    -webkit-clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
    clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
  }
  63% {
    -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
    clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
  }
  76% {
    -webkit-clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
    clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
  }
  81% {
    -webkit-clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
    clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
  }
  94% {
    -webkit-clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
    clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
  }
  100% {
    -webkit-clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
    clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
  }
}
@keyframes glitch-anim-3-vertical {
  0% {
    -webkit-clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
    clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
  }
  5% {
    -webkit-clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
    clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
  }
  10% {
    -webkit-clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
    clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
  }
  25% {
    -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
    clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
  }
  27% {
    -webkit-clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
    clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
  }
  30% {
    -webkit-clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
    clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
  }
  33% {
    -webkit-clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
    clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
  }
  37% {
    -webkit-clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
    clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
  }
  40% {
    -webkit-clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
    clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
  }
  45% {
    -webkit-clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
    clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
  }
  50% {
    -webkit-clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
    clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
  }
  53% {
    -webkit-clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
    clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
  }
  57% {
    -webkit-clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
    clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
  }
  60% {
    -webkit-clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
    clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
  }
  65% {
    -webkit-clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
    clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
  }
  70% {
    -webkit-clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
    clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
  }
  73% {
    -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
    clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
  }
  80% {
    -webkit-clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
    clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
    clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
  }
}
@keyframes glitch-anim-text {
  0% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  2% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  4% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  7% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  8% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  9.9% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1);
  }
  10%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
/* Flash */
@keyframes glitch-anim-flash {
  0%, 5% {
    opacity: 0.2;
    transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
  }
  5.5%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes updown {
  0% {
    transform: translateY(3px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(3px);
  }
}