:root {
  --app-height: 100vh;
  --animation-duration: 1000vh;
}

.section__banner-animation {
  position: relative;
  min-height: calc(14 * var(--svh) * 100);
}

.wrap__banner-animation {
  position: relative;
  height: calc(var(--svh) * 100);
}

.animation__sections {
  transform: translateY(calc(-1 * var(--lvh) * 100));
  margin-bottom: calc(-1 * var(--lvh) * 100);
}

.banner-animation {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.banner-animation.height-expanded:before {
  content: "";
  position: absolute;
  inset: 0;
  background: black;
  z-index: 2;
  opacity: .5;
}

.layer-bg {
  /* background: url(./image-animation.webp) center/cover no-repeat; */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
}

.layer-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.layer-yellow {
  position: absolute;
  inset: 0;
  height: 100dvh;
  transform-origin: center center;
}

.mask-container {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url("/wp-content/themes/recruit/assets/img/top-page/mask-star.svg");
  mask-image: url("/wp-content/themes/recruit/assets/img/top-page/mask-star.svg");
  -webkit-mask-size: 0 0;
  mask-size: 0 0;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  will-change: mask-size;
  overflow: visible;
}

#myVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: black;
  visibility: visible !important;
  will-change: transform;
}

.section__banner-animation svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
  z-index: 1;
  pointer-events: none;
}

.animation-group {
  position: relative;
  width: 100%;
  height: 100dvh;
  z-index: 4;
}

.animation-text {
  position: absolute;
  top: 50%;
  left: 35.3472%;
  width: 33.1944%;
  height: 0;
  padding-bottom: 34.44%;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}

.animation-text.active {
  transform: translateY(-50%);
  filter: brightness(0) invert(1);
}

.animation-text.active .text-EN-right {
  opacity: 1 !important;
}

.animation-text>div {
  position: absolute;
  height: 0;
}

.animation-text>div img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0px 0px 20px #FFFFFF);
}

.animation-text .text-EN-top img,
.animation-text .text-EN-bottom img,
.animation-text .text-EN-right img {
  filter: drop-shadow(0px 0px 7px #FFFFFF);
}

.animation-text .text-JP-left {
  width: 29.7520%;
  padding-bottom: 69.0993%;
  left: 0;
  top: 0;
  margin-top: 14.8551%;
  /* l: 43,t: 251 */
  /* transform: translate(-30.2390%, 75.9961%); */
}

.animation-text .text-JP-center {
  width: 31.6874%;
  padding-bottom: 67.5552%;
  top: 0;
  left: 23.8519%;
  /* l: 181,t: 9 */
  /* transform: translate(-119.5114%, -2.7873%); */
}

.animation-text .text-animation-right {
  width: 61.7115%;
  height: 100%;
  top: 0;
  right: 0;
  /* r: 157,t: 156 */
  /* transform: translate(48.8185%, -26.4567%); */
}

.text-animation-right>div {
  position: absolute;
  height: 0;
}

.animation-text .text-JP-right {
  width: 66.5299%;
  height: 100%;
  top: 0;
  left: 0;
}

.animation-text .text-EN-right {
  width: 47.4487%;
  padding-bottom: 16.2739%;
  right: 0;
  top: 0;
  opacity: 0 !important;
  transform: translateY(370.833%);
}

.animation-text .text-EN-top {
  width: 23.7368%;
  padding-bottom: 8.141%;
  left: 21.3892%;
  top: 0;
  margin-top: -1.8433%;
}

.animation-text .text-EN-bottom {
  width: 23.7368%;
  padding-bottom: 8.141%;
  left: 32.2523%;
  bottom: 0;
  transform: translateY(100%);
  margin-bottom: -18.3282%;
}

.wrap__description {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 0;
  padding-bottom: calc(34.44% * 0.632);
  margin-top: calc(34.44% * 0.632 + 4.7rem);
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wrap__description.active {
  opacity: 1;
  visibility: visible;
}

.wrap__description p {
  color: white;
  font-size: 1.6rem;
  line-height: 3.6rem;
  min-height: 3.6rem;
}

.wrap__description p span {
  color: var(--color-yellow);
}

.animation__sections {
  position: relative;
  z-index: 3;
  background: var(--bg-overlay-page);
}

@media (min-aspect-ratio: 9/5) {
  /* .animation-text .text-JP-left {
    left: 30px;
  }

  /* .animation-text .text-JP-center {
    left: 32%;
  } */

  .animation-text .text-EN-top {
    margin-top: -11.8433%;
    left: 32%;
  }

  .animation-text .text-EN-bottom {
    margin-bottom: 0;
    bottom: -65px;
  }
}


@media screen and (max-width: 1023px) {
  /* .section__banner-animation {
    min-height: unset;
  } */

  .animation-text {
    left: 17.552%;
    width: 71.73%;
    padding-bottom: 71.73%;
  }

  .animation-text .text-JP-left {
    width: 28.6842%;
    padding-bottom: 66.5097%;
    top: 0;
    left: 0;
    margin-top: 14%;
    /* transform: translate(94.8327%, 140.1833%); */
  }

  .animation-text .text-JP-center {
    width: 30.3516%;
    padding-bottom: 64.7%;
    left: 23.4887%;
    top: 0;
    /* transform: translate(-59.4806%, 52.2209%); */
  }

  .animation-text .text-animation-right {
    width: 61.9749%;
    height: 100%;
    top: 0;
    right: 0;
    /* transform: translate(61.7494%, -51.8589%); */
  }

  .animation-text .text-JP-right {
    width: 63.4613%;
    height: 100%;
  }

  .animation-text .text-EN-right {
    width: 50.6659%;
    padding-bottom: 17.3725%;
    right: 0;
    top: 0;
    transform: translateY(326.209%);
  }

  .animation-text .text-EN-bottom {
    width: 28.6267%;
    padding-bottom: 9.8223%;
    bottom: 0;
    left: 59.29%;
    margin-bottom: 6%;
  }

  .animation-text .text-EN-top {
    width: 28.6267%;
    padding-bottom: 9.8223%;
    top: 0;
    left: -0.7435%;
    margin-top: 3.0637%;
  }

  .wrap__description {
    padding-bottom: calc(71.73% * 0.632);
    margin-top: calc(71.73% * 0.632 + 2.8rem);
  }

  .wrap__description p {
    font-size: 1.4rem;
    line-height: 3.2rem;
    min-height: 3.2rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .wrap__description {
    padding-bottom: calc(71.73% * 0.632);
    margin-top: calc(71.73% * 0.632 + 2.8rem);
  }

  .wrap__description p {
    font-size: 2.2rem;
    line-height: 4.4rem;
    min-height: 4.4rem;
  }
}

/* @media (min-height: 800px) and (max-height: 900px)  {
  .animation-text .text-EN-bottom {
    margin-bottom: 10%;
  }
  .animation-text .text-EN-top {
    margin-top: 7.0637%;
  }

} */
@media screen and (min-aspect-ratio: 392/688) and (max-width: 767px) {
  /* .animation-text {
    transform: translateY(-55%);
  } */

  .animation-text .text-EN-bottom {
    margin-bottom: 10%;
  }

  .animation-text .text-EN-top {
    margin-top: 7.0637%;
  }
}

#console {
  position: fixed;
  inset: 50px;
  width: 50%;
  height: 300px;
  overflow-y: scroll;
  z-index: 10;
  background-color: white;
}