:root {
  --color-white: #fff;
  --color-black: #000;
  --color-pink: #d3526a;
}

/*
* top.css
*
*/
.a11y_txt {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

@-webkit-keyframes fall01 {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -10.4166666667vw) rotate(30deg);
            transform: translate(0, -10.4166666667vw) rotate(30deg);
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0.5208333333vw, 3.6458333333vw) rotate(-30deg) rotateX(180deg);
            transform: translate(0.5208333333vw, 3.6458333333vw) rotate(-30deg) rotateX(180deg);
  }
}

@keyframes fall01 {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -10.4166666667vw) rotate(30deg);
            transform: translate(0, -10.4166666667vw) rotate(30deg);
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0.5208333333vw, 3.6458333333vw) rotate(-30deg) rotateX(180deg);
            transform: translate(0.5208333333vw, 3.6458333333vw) rotate(-30deg) rotateX(180deg);
  }
}
@-webkit-keyframes fall02 {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -8.8541666667vw) rotate(-30deg);
            transform: translate(0, -8.8541666667vw) rotate(-30deg);
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-1.5625vw, 5.2083333333vw) rotate(30deg) rotateX(-180deg);
            transform: translate(-1.5625vw, 5.2083333333vw) rotate(30deg) rotateX(-180deg);
  }
}
@keyframes fall02 {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -8.8541666667vw) rotate(-30deg);
            transform: translate(0, -8.8541666667vw) rotate(-30deg);
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-1.5625vw, 5.2083333333vw) rotate(30deg) rotateX(-180deg);
            transform: translate(-1.5625vw, 5.2083333333vw) rotate(30deg) rotateX(-180deg);
  }
}
[data-hidden] {
  opacity: 0;
}

.main-box {
  overflow: hidden;
  position: relative;
}
.main-box .fix-scroll {
  position: fixed;
  z-index: 8;
  right: 0;
  bottom: 0;
  width: 100%;
}
.main-box .fix-scroll .progress-bar {
  width: 100%;
  height: 3px;
  background-color: var(--color-white);

  -webkit-clip-path: inset(0 100% 0 0);

          clip-path: inset(0 100% 0 0);
}
@media (min-width: 768px) {
  .main-box .fix-scroll .progress-bar {
    height: 6px;
  }
}
.main-box .bg-texture {
  position: absolute;
  z-index: 10;
  margin: auto;
  background-repeat: repeat;
  background-position: top left;
  background-size: 375px;
  pointer-events: none;

  inset: 0;
}
.main-box .bg-texture.bg-texture-01 {
  opacity: 0.1;
  background-image: url(/newyear2025/assets/img//before/bg_texture_01_sm.webp);

  mix-blend-mode: screen;
}
.main-box .bg-texture.bg-texture-02 {
  background-image: url(/newyear2025/assets/img//before/bg_texture_02_sm.webp);

  mix-blend-mode: multiply;
}
.main-box .bg-texture.bg-texture-03 {
  opacity: 0.4;
  background-image: url(/newyear2025/assets/img//before/bg_texture_03_sm.webp);

  mix-blend-mode: color-burn;
}
.main-box .bg-texture.bg-texture-04 {
  background-image: url(/newyear2025/assets/img//before/bg_texture_04_sm.webp);
}
.main-box > .loading-ctn {
  display: -ms-grid;
  display: grid;
  position: fixed;
  z-index: 100;
  margin: auto;
  width: 100%;
  height: 100svh;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: url(/newyear2025/assets/img//before/loading_bg_sm.webp) no-repeat center center/cover;

  place-content: center;
  inset: 0;
}
@media (min-width: 768px) {
  .main-box > .loading-ctn {
    background-image: url(/newyear2025/assets/img//before/loading_bg_lg.webp);
  }
}
@-webkit-keyframes loading {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.3;
  }
}
@keyframes loading {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.3;
  }
}
.main-box > .loading-ctn > .txt {
  margin-top: -25%;
  width: 53.8666666667vw;
  -webkit-animation: loading 6s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
          animation: loading 6s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
@media (min-width: 768px) {
  .main-box > .loading-ctn > .txt {
    width: 14.6354166667vw;
  }
}
.main-box > .loading-ctn.-loaded {
  opacity: 0;
  pointer-events: none;
}
.main-box > .fix-video {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}
.main-box > .fix-video video {
  width: inherit;
  height: inherit;

  -o-object-fit: cover;

     object-fit: cover;
}
.main-box > .opening-ctn {
  z-index: 3;
}
.main-box > .opening-ctn:not(:has(.-canplay)) video {
  opacity: 0;
}
.main-box > .transition-ctn {
  opacity: 0;
  z-index: 6;
}
.main-box > .transition-ctn.-active {
  opacity: 1;
  transition: opacity 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.before-ctn {
  opacity: 0;
  position: relative;
  background: url(/newyear2025/assets/img//before/bg_before_sm.webp) no-repeat center top/100% auto;
}
@media (min-width: 768px) {
  .before-ctn {
    background: url(/newyear2025/assets/img//before/bg_before_lg.webp) no-repeat center top/100% auto;
  }
}
.before-ctn.is-play {
  opacity: 1;
}
.-playing .before-ctn {
  display: none;
}
.-playing .before-ctn .bg-texture {
  display: none;
}
.before-ctn > .kv-ctn {
  position: relative;
  min-height: 245.3333333333vw;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn {
    min-height: 75vw;
  }
}
.before-ctn > .kv-ctn::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 79.6vw;
  height: 174.8vw;
  -webkit-transform: translate(calc(-50% + 1.3333333333vw), calc(-50% - 26.1333333333vw));
          transform: translate(calc(-50% + 1.3333333333vw), calc(-50% - 26.1333333333vw));
  background: url(/newyear2025/assets/img/before/tsubu_sm.webp) no-repeat center center/cover;
  pointer-events: none;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn::before {
    width: 93.5416666667vw;
    height: 44.5833333333vw;
    -webkit-transform: translate(calc(-50% - 0.7291666667vw), calc(-50% - 13.6979166667vw));
            transform: translate(calc(-50% - 0.7291666667vw), calc(-50% - 13.6979166667vw));
    background-image: url(/newyear2025/assets/img/before/tsubu_lg.webp);
  }
}
.before-ctn > .kv-ctn .scroll-box {
  display: flex;
  opacity: 0;
  align-items: flex-end;
  position: fixed;
  z-index: 2;
  bottom: 8vw;
  left: 50%;
  transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s;
  -webkit-transform: translateX(calc(-50% + 2.6666666667vw));
          transform: translateX(calc(-50% + 2.6666666667vw));
  pointer-events: none;

  gap: 0.5333333333vw;
  scale: 1.5;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn .scroll-box {
    bottom: 2.6041666667vw;
    -webkit-transform: translateX(calc(-50% + 1.0416666667vw));
            transform: translateX(calc(-50% + 1.0416666667vw));

    gap: 0.625vw;
  }
}
@-webkit-keyframes soul {
  0%,
  50%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  12.5% {
    -webkit-transform: translate(-4%, -4%);
            transform: translate(-4%, -4%);
  }
  25% {
    -webkit-transform: translate(0, -8%);
            transform: translate(0, -8%);
  }
  37.5% {
    -webkit-transform: translate(5%, -4%);
            transform: translate(5%, -4%);
  }
  62.5% {
    -webkit-transform: translate(-4%, 5%);
            transform: translate(-4%, 5%);
  }
  75% {
    -webkit-transform: translate(0, 8%);
            transform: translate(0, 8%);
  }
  87.5% {
    -webkit-transform: translate(5%, 5%);
            transform: translate(5%, 5%);
  }
}
@keyframes soul {
  0%,
  50%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  12.5% {
    -webkit-transform: translate(-4%, -4%);
            transform: translate(-4%, -4%);
  }
  25% {
    -webkit-transform: translate(0, -8%);
            transform: translate(0, -8%);
  }
  37.5% {
    -webkit-transform: translate(5%, -4%);
            transform: translate(5%, -4%);
  }
  62.5% {
    -webkit-transform: translate(-4%, 5%);
            transform: translate(-4%, 5%);
  }
  75% {
    -webkit-transform: translate(0, 8%);
            transform: translate(0, 8%);
  }
  87.5% {
    -webkit-transform: translate(5%, 5%);
            transform: translate(5%, 5%);
  }
}
.before-ctn > .kv-ctn .scroll-box.-active {
  opacity: 1;
}
.before-ctn > .kv-ctn .scroll-box.scroll-box-01:not([current="2"]) {
  pointer-events: all;
}
.before-ctn > .kv-ctn .scroll-box.scroll-box-02[current="2"] {
  pointer-events: all;
}
.before-ctn > .kv-ctn .scroll-box.-hidden {
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}
.before-ctn > .kv-ctn .scroll-box .deco {
  width: 5.6vw;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: soul 2s cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
          animation: soul 2s cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn .scroll-box .deco {
    width: 2.0833333333vw;
  }
}
.before-ctn > .kv-ctn .scroll-box .txt {
  width: 13.3333333333vw;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn .scroll-box .txt {
    width: 5.5208333333vw;
    -webkit-transform: translateY(-0.3125vw);
            transform: translateY(-0.3125vw);

    -webkit-filter: drop-shadow(0 0 0.2083333333vw rgba(0, 0, 0, 0.4));

            filter: drop-shadow(0 0 0.2083333333vw rgba(0, 0, 0, 0.4));
  }
}
.before-ctn > .kv-ctn > .moya {
  position: absolute;
  top: 50%;
  left: 50%;

  mix-blend-mode: screen;
}
.before-ctn > .kv-ctn > .moya.moya-01 {
  width: 31.4666666667vw;
  -webkit-transform: translate(calc(-50% - 18.1333333333vw), calc(-50% - 100.5333333333vw));
          transform: translate(calc(-50% - 18.1333333333vw), calc(-50% - 100.5333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .moya.moya-01 {
    width: 11.71875vw;
    -webkit-transform: translate(calc(-50% + 18.75vw), calc(-50% - 24.5833333333vw));
            transform: translate(calc(-50% + 18.75vw), calc(-50% - 24.5833333333vw));
  }
}
.before-ctn > .kv-ctn > .moya.moya-02 {
  width: 34.6666666667vw;
  -webkit-transform: translate(calc(-50% + 1.0666666667vw), calc(-50% - 95.2vw));
          transform: translate(calc(-50% + 1.0666666667vw), calc(-50% - 95.2vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .moya.moya-02 {
    width: 12.6041666667vw;
    -webkit-transform: translate(calc(-50% - 12.8125vw), calc(-50% - 23.0208333333vw));
            transform: translate(calc(-50% - 12.8125vw), calc(-50% - 23.0208333333vw));
  }
}
.before-ctn > .kv-ctn > .moya.moya-03 {
  width: 31.4666666667vw;
  -webkit-transform: translate(calc(-50% - 40.5333333333vw), calc(-50% - 39.7333333333vw));
          transform: translate(calc(-50% - 40.5333333333vw), calc(-50% - 39.7333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .moya.moya-03 {
    width: 13.125vw;
    -webkit-transform: translate(calc(-50% - 25vw), calc(-50% - 18.5416666667vw));
            transform: translate(calc(-50% - 25vw), calc(-50% - 18.5416666667vw));
  }
}
.before-ctn > .kv-ctn > .moya.moya-04 {
  width: 43.4666666667vw;
  -webkit-transform: translate(calc(-50% - 36.2666666667vw), calc(-50% + 27.7333333333vw));
          transform: translate(calc(-50% - 36.2666666667vw), calc(-50% + 27.7333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .moya.moya-04 {
    width: 11.875vw;
    -webkit-transform: translate(calc(-50% - 41.5625vw), calc(-50% - 6.3541666667vw));
            transform: translate(calc(-50% - 41.5625vw), calc(-50% - 6.3541666667vw));
  }
}
.before-ctn > .kv-ctn > .cloud img {
  opacity: 0;
  -webkit-transform: translateX(-8vw);
          transform: translateX(-8vw);
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .cloud img {
    -webkit-transform: translateX(-1.5625vw);
            transform: translateX(-1.5625vw);
  }
}
.before-ctn > .kv-ctn > .cloud.cloud-01 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24.8958333333vw;
  -webkit-transform: translate(calc(-50% - 48.3333333333vw), calc(-50% - 0.2604166667vw));
          transform: translate(calc(-50% - 48.3333333333vw), calc(-50% - 0.2604166667vw));
}
.before-ctn > .kv-ctn > .cloud.cloud-02 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19.2708333333vw;
  -webkit-transform: translate(calc(-50% + 17.0833333333vw), calc(-50% - 18.3333333333vw));
          transform: translate(calc(-50% + 17.0833333333vw), calc(-50% - 18.3333333333vw));
}
.before-ctn > .kv-ctn > .signboard {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20.2666666667vw;
  -webkit-transform: translate(calc(-50% + 34.1333333333vw), calc(-50% - 91.2vw));
          transform: translate(calc(-50% + 34.1333333333vw), calc(-50% - 91.2vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .signboard {
    z-index: 1;
    width: 9.5833333333vw;
    -webkit-transform: translate(calc(-50% + 36.1979166667vw), calc(-50% - 21.09375vw));
            transform: translate(calc(-50% + 36.1979166667vw), calc(-50% - 21.09375vw));
  }
}
.before-ctn > .kv-ctn > .char {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.before-ctn > .kv-ctn > .char.char-10 img {
  transition-duration: 0.6s;
}
.before-ctn > .kv-ctn > .char img {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.before-ctn > .kv-ctn > .char.-active.char-01 img {
  opacity: 1;
  transition-delay: 0.14s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-01 img {
    transition-delay: 0.11s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-02 img {
  opacity: 1;
  transition-delay: 0.28s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-02 img {
    transition-delay: 0.22s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-03 img {
  opacity: 1;
  transition-delay: 0.42s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-03 img {
    transition-delay: 0.33s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-04 img {
  opacity: 1;
  transition-delay: 0.56s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-04 img {
    transition-delay: 0.44s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-05 img {
  opacity: 1;
  transition-delay: 0.7s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-05 img {
    transition-delay: 0.55s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-06 img {
  opacity: 1;
  transition-delay: 0.84s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-06 img {
    transition-delay: 0.66s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-07 img {
  opacity: 1;
  transition-delay: 0.98s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-07 img {
    transition-delay: 0.77s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-08 img {
  opacity: 1;
  transition-delay: 1.12s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-08 img {
    transition-delay: 0.88s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-09 img {
  opacity: 1;
  transition-delay: 1.26s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-09 img {
    transition-delay: 0.99s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-10 img {
  opacity: 1;
  transition-delay: 1.4s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-10 img {
    transition-delay: 1.1s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-11 img {
  opacity: 1;
  transition-delay: 1.54s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-11 img {
    transition-delay: 1.21s;
  }
}
.before-ctn > .kv-ctn > .char.-active.char-10 {
  -webkit-animation: 0.82s char10Anim cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.8s forwards;
          animation: 0.82s char10Anim cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.8s forwards;
}
@-webkit-keyframes char10Anim {
  0% {
    rotate: 2.4deg;
  }
  50% {
    rotate: -2.4deg;
  }
  100% {
    rotate: 0deg;
  }
}
@keyframes char10Anim {
  0% {
    rotate: 2.4deg;
  }
  50% {
    rotate: -2.4deg;
  }
  100% {
    rotate: 0deg;
  }
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.-active.char-10 {
    -webkit-animation: 0.72s char10Anim cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.6s forwards;
            animation: 0.72s char10Anim cubic-bezier(0.445, 0.05, 0.55, 0.95) 1.6s forwards;
  }
}
@-webkit-keyframes shakeLanthanum {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  33% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  66% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
@keyframes shakeLanthanum {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  33% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  66% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
.before-ctn > .kv-ctn > .char.-active.char-10 .lanthanum-box {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  -webkit-animation: shakeLanthanum 8s linear 1.8s infinite alternate;
          animation: shakeLanthanum 8s linear 1.8s infinite alternate;
}
.before-ctn > .kv-ctn > .char.-active.char-10 .lanthanumlight {
  -webkit-animation: tomoshibi 6s linear infinite;
          animation: tomoshibi 6s linear infinite;
}
@-webkit-keyframes tomoshibi {
  0%,
  100% {
    opacity: 1;
  }
  25% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.4;
  }
  75% {
    opacity: 0.8;
  }
}
@keyframes tomoshibi {
  0%,
  100% {
    opacity: 1;
  }
  25% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.4;
  }
  75% {
    opacity: 0.8;
  }
}
.before-ctn > .kv-ctn > .char.char-01 {
  width: 30.9333333333vw;
  -webkit-transform: translate(calc(-50% - 37.3333333333vw), calc(-50% - 112vw));
          transform: translate(calc(-50% - 37.3333333333vw), calc(-50% - 112vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-01 {
    width: 23.9583333333vw;
    -webkit-transform: translate(calc(-50% + 34.0104166667vw), calc(-50% - 32.8645833333vw));
            transform: translate(calc(-50% + 34.0104166667vw), calc(-50% - 32.8645833333vw));
  }
}
.before-ctn > .kv-ctn > .char.char-02 {
  width: 17.3333333333vw;
  -webkit-transform: translate(calc(-50% - 14.6666666667vw), calc(-50% - 108.8vw));
          transform: translate(calc(-50% - 14.6666666667vw), calc(-50% - 108.8vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-02 {
    width: 11.3020833333vw;
    -webkit-transform: translate(calc(-50% + 17.0833333333vw), calc(-50% - 30.46875vw));
            transform: translate(calc(-50% + 17.0833333333vw), calc(-50% - 30.46875vw));
  }
}
.before-ctn > .kv-ctn > .char.char-03 {
  width: 13.3333333333vw;
  -webkit-transform: translate(calc(-50% - 1.6vw), calc(-50% - 104vw));
          transform: translate(calc(-50% - 1.6vw), calc(-50% - 104vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-03 {
    width: 8.5416666667vw;
    -webkit-transform: translate(calc(-50% - 10.3125vw), calc(-50% - 29.21875vw));
            transform: translate(calc(-50% - 10.3125vw), calc(-50% - 29.21875vw));
  }
}
.before-ctn > .kv-ctn > .char.char-04 {
  width: 15.4666666667vw;
  -webkit-transform: translate(calc(-50% + 8vw), calc(-50% - 102.6666666667vw));
          transform: translate(calc(-50% + 8vw), calc(-50% - 102.6666666667vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-04 {
    width: 10.0520833333vw;
    -webkit-transform: translate(calc(-50% - 16.6666666667vw), calc(-50% - 28.4895833333vw));
            transform: translate(calc(-50% - 16.6666666667vw), calc(-50% - 28.4895833333vw));
  }
}
.before-ctn > .kv-ctn > .char.char-05 {
  width: 9.7333333333vw;
  -webkit-transform: translate(calc(-50% + 17.6vw), calc(-50% - 91.7333333333vw));
          transform: translate(calc(-50% + 17.6vw), calc(-50% - 91.7333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-05 {
    width: 7.1354166667vw;
    -webkit-transform: translate(calc(-50% - 23.9583333333vw), calc(-50% - 27.96875vw));
            transform: translate(calc(-50% - 23.9583333333vw), calc(-50% - 27.96875vw));
  }
}
.before-ctn > .kv-ctn > .char.char-06 {
  width: 17.6vw;
  -webkit-transform: translate(calc(-50% + 12.2666666667vw), calc(-50% - 82.9333333333vw));
          transform: translate(calc(-50% + 12.2666666667vw), calc(-50% - 82.9333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-06 {
    width: 12.7604166667vw;
    -webkit-transform: translate(calc(-50% - 30.2083333333vw), calc(-50% - 25.15625vw));
            transform: translate(calc(-50% - 30.2083333333vw), calc(-50% - 25.15625vw));
  }
}
.before-ctn > .kv-ctn > .char.char-07 {
  width: 28.6666666667vw;
  -webkit-transform: translate(calc(-50% - 27.7333333333vw), calc(-50% - 73.8666666667vw));
          transform: translate(calc(-50% - 27.7333333333vw), calc(-50% - 73.8666666667vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-07 {
    width: 20.15625vw;
    -webkit-transform: translate(calc(-50% - 37.7083333333vw), calc(-50% - 17.2395833333vw));
            transform: translate(calc(-50% - 37.7083333333vw), calc(-50% - 17.2395833333vw));
  }
}
.before-ctn > .kv-ctn > .char.char-08 {
  width: 34.2666666667vw;
  -webkit-transform: translate(calc(-50% - 36.2666666667vw), calc(-50% - 53.8666666667vw));
          transform: translate(calc(-50% - 36.2666666667vw), calc(-50% - 53.8666666667vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-08 {
    width: 20.7291666667vw;
    -webkit-transform: translate(calc(-50% - 26.9791666667vw), calc(-50% - 4.2708333333vw));
            transform: translate(calc(-50% - 26.9791666667vw), calc(-50% - 4.2708333333vw));
  }
}
.before-ctn > .kv-ctn > .char.char-09 {
  width: 51.8666666667vw;
  -webkit-transform: translate(calc(-50% - 26.1333333333vw), calc(-50% + 1.3333333333vw));
          transform: translate(calc(-50% - 26.1333333333vw), calc(-50% + 1.3333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-09 {
    width: 20.7291666667vw;
    -webkit-transform: translate(calc(-50% - 14.5833333333vw), calc(-50% - 3.90625vw));
            transform: translate(calc(-50% - 14.5833333333vw), calc(-50% - 3.90625vw));
  }
}
.before-ctn > .kv-ctn > .char.char-10 {
  z-index: 1;
  width: 62.9333333333vw;
  -webkit-transform: translate(calc(-50% + 28vw), calc(-50% + 1.6vw));
          transform: translate(calc(-50% + 28vw), calc(-50% + 1.6vw));
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;

  rotate: 2.4deg;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-10 {
    width: 30.3645833333vw;
    -webkit-transform: translate(calc(-50% + 17.8125vw), calc(-50% - 7.03125vw));
            transform: translate(calc(-50% + 17.8125vw), calc(-50% - 7.03125vw));
  }
}
.before-ctn > .kv-ctn > .char.char-10 .lanthanum-box {
  position: absolute;
  top: -3.4666666667vw;
  left: -57.6vw;
  width: 91.4666666667vw;
  -webkit-transform-origin: 68% 2%;
          transform-origin: 68% 2%;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-10 .lanthanum-box {
    top: 0.7291666667vw;
    left: -34.1666666667vw;
    width: 46.6666666667vw;
    -webkit-transform-origin: 73% 0%;
            transform-origin: 73% 0%;
  }
}
.before-ctn > .kv-ctn > .char.char-10 .lanthanumlight {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 93.0666666667vw;
  -webkit-transform: translate(calc(-50% + 18.6666666667vw), calc(-50% - 29.6vw));
          transform: translate(calc(-50% + 18.6666666667vw), calc(-50% - 29.6vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-10 .lanthanumlight {
    width: 32.6041666667vw;
    -webkit-transform: translate(calc(-50% + 10.9375vw), calc(-50% - 8.0729166667vw));
            transform: translate(calc(-50% + 10.9375vw), calc(-50% - 8.0729166667vw));
  }
}
.before-ctn > .kv-ctn > .char.char-11 {
  width: 32.8vw;
  -webkit-transform: translate(calc(-50% + 48.5333333333vw), calc(-50% - 56.8vw));
          transform: translate(calc(-50% + 48.5333333333vw), calc(-50% - 56.8vw));
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn > .char.char-11 {
    z-index: 1;
    width: 11.875vw;
    -webkit-transform: translate(calc(-50% + 44.0104166667vw), calc(-50% - 2.2395833333vw));
            transform: translate(calc(-50% + 44.0104166667vw), calc(-50% - 2.2395833333vw));
  }
}
.before-ctn > .kv-ctn.-active > .cloud img {
  opacity: 1;
  transition: opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.before-ctn > .kv-ctn.-active > .cloud.cloud-01 img {
  transition-delay: 0.48s;
}
.before-ctn > .kv-ctn.-active > .cloud.cloud-02 img {
  transition-delay: 0.12s;
}
@-webkit-keyframes draw {
  0% {
    rotate: 0deg;
  }
  33% {
    rotate: 5deg;
  }
  66% {
    rotate: -5deg;
  }
  100% {
    rotate: 0deg;
  }
}
@keyframes draw {
  0% {
    rotate: 0deg;
  }
  33% {
    rotate: 5deg;
  }
  66% {
    rotate: -5deg;
  }
  100% {
    rotate: 0deg;
  }
}
.before-ctn > .kv-ctn.-active > .char:not(.char-10) img {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: draw 1.4s cubic-bezier(0.39, 0.575, 0.565, 1) 2;
          animation: draw 1.4s cubic-bezier(0.39, 0.575, 0.565, 1) 2;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn.-active > .char:not(.char-10) img {
    -webkit-animation: draw 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) 2;
            animation: draw 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) 2;
  }
}
.before-ctn > .kv-ctn.-active > .char.char-11 img {
  opacity: 1;
  transition-delay: 1.2s;
}
@media (min-width: 768px) {
  .before-ctn > .kv-ctn.-active > .char.char-11 img {
    transition-delay: 0.8s;
  }
}
.before-ctn > .kv-ctn.-active > .signboard {
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s;
}
.before-ctn > .lead-ctn {
  position: relative;
  padding-top: 13.3333333333vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn {
    padding-top: 2.6041666667vw;
  }
}
.before-ctn > .lead-ctn.-active > .lead-box > .ttl .img.img-01 img {
  opacity: 1;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 1s;
  transition-property: opacity, scale, -webkit-filter;
  transition-property: opacity, scale, filter;
  transition-property: opacity, scale, filter, -webkit-filter;

  -webkit-filter: blur(0);

          filter: blur(0);
  scale: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: filter, scale;
}
.before-ctn > .lead-ctn.-active > .lead-box > .ttl .img.img-02 img {
  opacity: 1;
  transition-delay: 0.24s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 1s;
  transition-property: opacity, scale, -webkit-filter;
  transition-property: opacity, scale, filter;
  transition-property: opacity, scale, filter, -webkit-filter;

  -webkit-filter: blur(0);

          filter: blur(0);
  scale: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: filter, scale;
}
.before-ctn > .lead-ctn.-active > .lead-box > .ttl .img.img-03 img {
  opacity: 1;
  transition-delay: 0.48s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 1s;
  transition-property: opacity, scale, -webkit-filter;
  transition-property: opacity, scale, filter;
  transition-property: opacity, scale, filter, -webkit-filter;

  -webkit-filter: blur(0);

          filter: blur(0);
  scale: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: filter, scale;
}
.before-ctn > .lead-ctn.-active > .lead-box > .ttl .img.img-04 img {
  opacity: 1;
  transition-delay: 1.08s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 1s;
  transition-property: opacity, scale, -webkit-filter;
  transition-property: opacity, scale, filter;
  transition-property: opacity, scale, filter, -webkit-filter;

  -webkit-filter: blur(0);

          filter: blur(0);
  scale: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: filter, scale;
}
.before-ctn > .lead-ctn.-active > .lead-box > .ttl .img.img-05 img {
  opacity: 1;
  transition-delay: 1.32s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 1s;
  transition-property: opacity, scale, -webkit-filter;
  transition-property: opacity, scale, filter;
  transition-property: opacity, scale, filter, -webkit-filter;

  -webkit-filter: blur(0);

          filter: blur(0);
  scale: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: filter, scale;
}
.before-ctn > .lead-ctn.-active > .lead-box > .ttl .img.img-06 img {
  opacity: 1;
  transition-delay: 1.56s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 1s;
  transition-property: opacity, scale, -webkit-filter;
  transition-property: opacity, scale, filter;
  transition-property: opacity, scale, filter, -webkit-filter;

  -webkit-filter: blur(0);

          filter: blur(0);
  scale: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: filter, scale;
}
.before-ctn > .lead-ctn.-active > .lead-box > .ttl .img.img-07 img {
  opacity: 1;
  transition-delay: 1.8s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 1s;
  transition-property: opacity, scale, -webkit-filter;
  transition-property: opacity, scale, filter;
  transition-property: opacity, scale, filter, -webkit-filter;

  -webkit-filter: blur(0);

          filter: blur(0);
  scale: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: filter, scale;
}
.before-ctn > .lead-ctn.-active > .lead-box > .txt {
  opacity: 1;
  transition: opacity 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.84s, -webkit-transform 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.84s;
  transition: opacity 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.84s, transform 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.84s;
  transition: opacity 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.84s, transform 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.84s, -webkit-transform 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.84s;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn.-active > .lead-box > .txt {
    -webkit-transform: translate(-0.2083333333vw, 0);
            transform: translate(-0.2083333333vw, 0);
  }
}
.before-ctn > .lead-ctn.-active [data-petal-01] img {
  -webkit-animation: fall02 4s ease-in-out 0.2s infinite;
          animation: fall02 4s ease-in-out 0.2s infinite;
}
.before-ctn > .lead-ctn.-active [data-petal-02] img {
  -webkit-animation: fall01 4s ease-in-out 0.8s infinite;
          animation: fall01 4s ease-in-out 0.8s infinite;
}
.before-ctn > .lead-ctn.-active [data-petal-07] img {
  -webkit-animation: fall02 4s ease-in-out 3s infinite;
          animation: fall02 4s ease-in-out 3s infinite;
}
.before-ctn > .lead-ctn.-active [data-petal-06] img {
  -webkit-animation: fall01 4s ease-in-out 4s infinite;
          animation: fall01 4s ease-in-out 4s infinite;
}
.before-ctn > .lead-ctn.-active [data-petal-03] img {
  -webkit-animation: fall02 4s ease-in-out 5s infinite;
          animation: fall02 4s ease-in-out 5s infinite;
}
.before-ctn > .lead-ctn.-active [data-petal-04] img {
  -webkit-animation: fall01 4s ease-in-out 0.6s infinite;
          animation: fall01 4s ease-in-out 0.6s infinite;
}
.before-ctn > .lead-ctn.-active [data-petal-05] img {
  -webkit-animation: fall02 4s ease-in-out 4.2s infinite;
          animation: fall02 4s ease-in-out 4.2s infinite;
}
@-webkit-keyframes sway {
  0% {
    rotate: -3deg;
  }
  50% {
    rotate: 3deg;
  }
  100% {
    rotate: -3deg;
  }
}
@keyframes sway {
  0% {
    rotate: -3deg;
  }
  50% {
    rotate: 3deg;
  }
  100% {
    rotate: -3deg;
  }
}
.before-ctn > .lead-ctn.-active > .lanthanum img {
  -webkit-animation: sway 5.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
          animation: sway 5.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
}
.before-ctn > .lead-ctn > .lead-box > .ttl {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .ttl {
    -webkit-transform: translateX(-0.5208333333vw);
            transform: translateX(-0.5208333333vw);
  }
}
.before-ctn > .lead-ctn > .lead-box > .ttl .img {
  display: block;
}
.before-ctn > .lead-ctn > .lead-box > .ttl .img.img-01 {
  width: 10.6666666667vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .ttl .img.img-01 {
    margin-right: 0.2083333333vw;
    width: 5.8333333333vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .ttl .img.img-02 {
  margin-right: 0.8vw;
  width: 10.4vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .ttl .img.img-02 {
    margin-right: 0.3125vw;
    width: 5.5729166667vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .ttl .img.img-03 {
  margin-right: 1.0666666667vw;
  width: 12.8vw;
  -webkit-transform: translateY(-0.5333333333vw);
          transform: translateY(-0.5333333333vw);
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .ttl .img.img-03 {
    margin-right: 0.7291666667vw;
    width: 7.03125vw;
    -webkit-transform: translateY(-0.15625vw);
            transform: translateY(-0.15625vw);
  }
}
.before-ctn > .lead-ctn > .lead-box > .ttl .img.img-04 {
  margin-right: 0.5333333333vw;
  width: 10.1333333333vw;
  -webkit-transform: translateY(-0.2666666667vw);
          transform: translateY(-0.2666666667vw);
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .ttl .img.img-04 {
    margin-right: 0.3125vw;
    width: 5.625vw;
    -webkit-transform: translateY(-0.1041666667vw);
            transform: translateY(-0.1041666667vw);
  }
}
.before-ctn > .lead-ctn > .lead-box > .ttl .img.img-05 {
  margin-right: 1.0666666667vw;
  width: 10.4vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .ttl .img.img-05 {
    margin-right: 0.625vw;
    width: 5.6770833333vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .ttl .img.img-06 {
  margin-right: 0.5333333333vw;
  width: 10.4vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .ttl .img.img-06 {
    margin-right: 0.3125vw;
    width: 5.78125vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .ttl .img.img-07 {
  width: 10.4vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .ttl .img.img-07 {
    width: 5.8333333333vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .ttl .img img {
  opacity: 0;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;

  scale: 1.2;
  -webkit-filter: blur(4px);
          filter: blur(4px);
}
.before-ctn > .lead-ctn > .lead-box > .txt {
  position: relative;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .txt {
    -webkit-transform: translateX(-0.2083333333vw);
            transform: translateX(-0.2083333333vw);
  }
}
.before-ctn > .lead-ctn > .lead-box > .txt.txt-01,
.before-ctn > .lead-ctn > .lead-box > .txt.txt-02,
.before-ctn > .lead-ctn > .lead-box > .txt.txt-03 {
  -webkit-transform: translateX(-1.0666666667vw);
          transform: translateX(-1.0666666667vw);
}
.before-ctn > .lead-ctn > .lead-box > .txt.txt-01 {
  margin: 6.4vw auto 0;
  width: 37.8666666667vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .txt.txt-01 {
    margin-top: 4.7916666667vw;
    width: 20.6770833333vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .txt.txt-02 {
  margin: 0.8vw auto 0;
  width: 34.6666666667vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .txt.txt-02 {
    margin-top: 1.9791666667vw;
    width: 18.75vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .txt.txt-03 {
  margin: 0.8vw auto 0;
  width: 44.2666666667vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .txt.txt-03 {
    margin-top: 2.0833333333vw;
    width: 24.21875vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .txt.txt-04 {
  margin: 2.9333333333vw auto 0;
  width: 49.6vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .txt.txt-04 {
    margin-top: 3.75vw;
    width: 26.875vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .txt.txt-05 {
  margin: 1.0666666667vw auto 0;
  width: 32vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .txt.txt-05 {
    margin-top: 2.0833333333vw;
    width: 17.4479166667vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .txt.txt-06 {
  margin: 0.5333333333vw auto 0;
  width: 56vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lead-box > .txt.txt-06 {
    margin-top: 2.0833333333vw;
    width: 31.1458333333vw;
  }
}
.before-ctn > .lead-ctn > .lead-box > .txt.-active .front {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.before-ctn > .lead-ctn > .lead-box > .txt .front {
  display: block;
  position: absolute;
  margin: auto;
  transition: -webkit-clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transform-origin: left center;
          transform-origin: left center;

  inset: 0;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.before-ctn > .lead-ctn > .lead-box > .txt .back {
  display: block;
  opacity: 0.1;
}
.before-ctn > .lead-ctn > .char:not(.char-06) {
  position: absolute;
  top: 50%;
  left: 50%;
}
.before-ctn > .lead-ctn > .char.char-01 {
  z-index: 1;
  width: 25.6vw;
  -webkit-transform: translate(calc(-50% - 33.8666666667vw), calc(-50% + 22.9333333333vw));
          transform: translate(calc(-50% - 33.8666666667vw), calc(-50% + 22.9333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .char.char-01 {
    width: 16.9270833333vw;
    -webkit-transform: translate(calc(-50% - 32.0833333333vw), calc(-50% - 16.25vw));
            transform: translate(calc(-50% - 32.0833333333vw), calc(-50% - 16.25vw));
  }
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .char.char-02 {
    z-index: 1;
    width: 8.125vw;
    -webkit-transform: translate(calc(-50% - 38.3854166667vw), calc(-50% + 1.1979166667vw));
            transform: translate(calc(-50% - 38.3854166667vw), calc(-50% + 1.1979166667vw));
  }
}
.before-ctn > .lead-ctn > .char.char-03 {
  width: 17.0666666667vw;
  -webkit-transform: translate(calc(-50% - 36.2666666667vw), calc(-50% + 61.3333333333vw));
          transform: translate(calc(-50% - 36.2666666667vw), calc(-50% + 61.3333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .char.char-03 {
    width: 14.5833333333vw;
    -webkit-transform: translate(calc(-50% - 23.125vw), calc(-50% + 16.25vw));
            transform: translate(calc(-50% - 23.125vw), calc(-50% + 16.25vw));
  }
}
.before-ctn > .lead-ctn > .char.char-04 {
  z-index: 1;
  width: 20.8vw;
  -webkit-transform: translate(calc(-50% + 28.5333333333vw), calc(-50% + 6.4vw));
          transform: translate(calc(-50% + 28.5333333333vw), calc(-50% + 6.4vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .char.char-04 {
    width: 13.0208333333vw;
    -webkit-transform: translate(calc(-50% + 29.1666666667vw), calc(-50% - 17.7083333333vw));
            transform: translate(calc(-50% + 29.1666666667vw), calc(-50% - 17.7083333333vw));
  }
}
.before-ctn > .lead-ctn > .char.char-05 {
  z-index: 1;
  width: 15.4666666667vw;
  -webkit-transform: translate(calc(-50% + 40.2666666667vw), calc(-50% + 60.5333333333vw));
          transform: translate(calc(-50% + 40.2666666667vw), calc(-50% + 60.5333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .char.char-05 {
    width: 12.8125vw;
    -webkit-transform: translate(calc(-50% + 35.7291666667vw), calc(-50% - 0.7291666667vw));
            transform: translate(calc(-50% + 35.7291666667vw), calc(-50% - 0.7291666667vw));
  }
}
.before-ctn > .lead-ctn > .char.char-06 {
  position: relative;
  z-index: 5;
  margin: 27.2vw auto 0;
  width: 46.6666666667vw;
}
@media (max-width: 767.98px) {
  .before-ctn > .lead-ctn > .char.char-06 {
    -webkit-transform: translateX(0.8vw);
            transform: translateX(0.8vw);
  }
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .char.char-06 {
    margin-top: 3.4375vw;
    width: 36.9791666667vw;
  }
}
.before-ctn > .lead-ctn > .char.char-06 img {
  position: relative;
  left: 4.8vw;
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .char.char-06 img {
    left: 6.5625vw;
  }
}
.before-ctn > .lead-ctn > .deco {
  position: absolute;
  top: 50%;
  left: 50%;
}
.before-ctn > .lead-ctn > .deco.deco-01 {
  width: 31.4666666667vw;
  -webkit-transform: translate(calc(-50% - 40.5333333333vw), calc(-50% + 8vw));
          transform: translate(calc(-50% - 40.5333333333vw), calc(-50% + 8vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .deco.deco-01 {
    width: 22.3958333333vw;
    -webkit-transform: translate(calc(-50% - 33.6458333333vw), calc(-50% - 5.4166666667vw));
            transform: translate(calc(-50% - 33.6458333333vw), calc(-50% - 5.4166666667vw));
  }
}
.before-ctn > .lead-ctn > .deco.deco-02 {
  width: 33.6vw;
  -webkit-transform: translate(calc(-50% + 42.1333333333vw), calc(-50% + 5.3333333333vw));
          transform: translate(calc(-50% + 42.1333333333vw), calc(-50% + 5.3333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .deco.deco-02 {
    width: 25.2083333333vw;
    -webkit-transform: translate(calc(-50% + 38.3333333333vw), calc(-50% - 21.0416666667vw));
            transform: translate(calc(-50% + 38.3333333333vw), calc(-50% - 21.0416666667vw));
  }
}
.before-ctn > .lead-ctn > .petal {
  position: absolute;
  top: 50%;
  left: 50%;
}
.before-ctn > .lead-ctn > .petal.petal-01 {
  width: 9.6vw;
  -webkit-transform: translate(calc(-50% + 0.5333333333vw), calc(-50% - 83.7333333333vw));
          transform: translate(calc(-50% + 0.5333333333vw), calc(-50% - 83.7333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .petal.petal-01 {
    width: 5vw;
    -webkit-transform: translate(calc(-50% + 5.2083333333vw), calc(-50% - 43.6458333333vw));
            transform: translate(calc(-50% + 5.2083333333vw), calc(-50% - 43.6458333333vw));
  }
}
.before-ctn > .lead-ctn > .petal.petal-02 {
  width: 6.4vw;
  -webkit-transform: translate(calc(-50% - 35.7333333333vw), calc(-50% - 18.6666666667vw));
          transform: translate(calc(-50% - 35.7333333333vw), calc(-50% - 18.6666666667vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .petal.petal-02 {
    width: 4.8958333333vw;
    -webkit-transform: translate(calc(-50% - 31.7708333333vw), calc(-50% - 28.3854166667vw));
            transform: translate(calc(-50% - 31.7708333333vw), calc(-50% - 28.3854166667vw));
  }
}
.before-ctn > .lead-ctn > .petal.petal-03 {
  width: 5.3333333333vw;
  -webkit-transform: translate(calc(-50% - 12.2666666667vw), calc(-50% + 13.8666666667vw));
          transform: translate(calc(-50% - 12.2666666667vw), calc(-50% + 13.8666666667vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .petal.petal-03 {
    width: 2.8125vw;
    -webkit-transform: translate(calc(-50% - 12.6041666667vw), calc(-50% - 30.5208333333vw));
            transform: translate(calc(-50% - 12.6041666667vw), calc(-50% - 30.5208333333vw));
  }
}
.before-ctn > .lead-ctn > .petal.petal-04 {
  width: 6.9333333333vw;
  -webkit-transform: translate(calc(-50% + 36.2666666667vw), calc(-50% - 43.2vw));
          transform: translate(calc(-50% + 36.2666666667vw), calc(-50% - 43.2vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .petal.petal-04 {
    width: 2.8125vw;
    -webkit-transform: translate(calc(-50% - 20.3125vw), calc(-50% - 12.7604166667vw));
            transform: translate(calc(-50% - 20.3125vw), calc(-50% - 12.7604166667vw));
  }
}
.before-ctn > .lead-ctn > .petal.petal-05 {
  width: 6.6666666667vw;
  -webkit-transform: translate(calc(-50% + 48.5333333333vw), calc(-50% - 19.2vw));
          transform: translate(calc(-50% + 48.5333333333vw), calc(-50% - 19.2vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .petal.petal-05 {
    width: 3.5416666667vw;
    -webkit-transform: translate(calc(-50% - 22.9166666667vw), calc(-50% + 1.0416666667vw));
            transform: translate(calc(-50% - 22.9166666667vw), calc(-50% + 1.0416666667vw));
  }
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .petal.petal-06 {
    width: 4.5833333333vw;
    -webkit-transform: translate(calc(-50% + 21.7708333333vw), calc(-50% - 23.4375vw));
            transform: translate(calc(-50% + 21.7708333333vw), calc(-50% - 23.4375vw));
  }
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .petal.petal-07 {
    width: 2.3958333333vw;
    -webkit-transform: translate(calc(-50% + 33.75vw), calc(-50% - 31.5625vw));
            transform: translate(calc(-50% + 33.75vw), calc(-50% - 31.5625vw));
  }
}
.before-ctn > .lead-ctn > .petal img {
  opacity: 0;
}
.before-ctn > .lead-ctn > .lanthanum {
  position: absolute;
  z-index: 3;
  bottom: -67.7333333333vw;
  left: 50%;
  width: 58.6666666667vw;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .lanthanum {
    bottom: -31.5625vw;
    width: 29.5833333333vw;
  }
}
.before-ctn > .lead-ctn > .lanthanum img {
  -webkit-transform-origin: top center;
          transform-origin: top center;

  rotate: -3deg;
}
.before-ctn > .lead-ctn > .partition {
  position: absolute;
}
.before-ctn > .lead-ctn > .partition.partition-01 {
  z-index: 2;
  bottom: -28.2666666667vw;
  left: 50%;
  width: 83.7333333333vw;
  -webkit-transform: translateX(calc(-50% + 2.1333333333vw));
          transform: translateX(calc(-50% + 2.1333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .partition.partition-01 {
    z-index: 1;
    bottom: -9.1145833333vw;
    width: 62.1875vw;
    -webkit-transform: translateX(calc(-50% - 2.7083333333vw));
            transform: translateX(calc(-50% - 2.7083333333vw));
  }
}
.before-ctn > .lead-ctn > .partition.partition-02 {
  bottom: -20.2666666667vw;
  left: 50%;
  width: 134.4vw;
  -webkit-transform: translateX(calc(-50% + 2.1333333333vw));
          transform: translateX(calc(-50% + 2.1333333333vw));
}
@media (min-width: 768px) {
  .before-ctn > .lead-ctn > .partition.partition-02 {
    z-index: 2;
    bottom: -10.5208333333vw;
    width: 118.75vw;
    -webkit-transform: translateX(calc(-50% + 3.3333333333vw));
            transform: translateX(calc(-50% + 3.3333333333vw));
  }
}
.before-ctn > .transition-trigger {
  height: 150vh;
}
@media (min-width: 768px) {
  .before-ctn > .transition-trigger {
    margin-top: 5.2083333333vw;
  }
}

.after-ctn {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: url(/newyear2025/assets/img/after/bg_after_sm.webp) no-repeat center top/cover;
  pointer-events: none;
}
@media (min-width: 768px) {
  .after-ctn {
    background-image: url(/newyear2025/assets/img/after/bg_after_lg.webp);
  }
}
.-playing .after-ctn {
  opacity: 1;
  position: relative;
  pointer-events: all;
}
.after-ctn > .kv-ctn.-active > .txt img {
  opacity: 1;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, scale 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, -webkit-filter 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, filter 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, scale 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, filter 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, scale 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, -webkit-filter 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;

  -webkit-filter: blur(0);

          filter: blur(0);
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn.-active > .txt img {
    transition-delay: 1s;
  }
}
.after-ctn > .kv-ctn.-active > .ttl {
  opacity: 1;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s;
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn.-active > .ttl {
    transition-delay: 1.6s;
  }
}
.after-ctn > .kv-ctn.-active > .cloud.cloud-01 img {
  opacity: 1;
  transition: opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s, -webkit-transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s;
  transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s, opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s;
  transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s, opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s, -webkit-transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn.-active > .cloud.cloud-01 img {
    transition-delay: 0s;
  }
}
.after-ctn > .kv-ctn.-active > .cloud.cloud-02 img {
  opacity: 1;
  transition: opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s, -webkit-transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s;
  transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s, opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s;
  transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s, opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s, -webkit-transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn.-active > .cloud.cloud-02 img {
    transition-delay: 0.4s;
  }
}
.after-ctn > .kv-ctn.-active > .cloud.cloud-03 img {
  opacity: 1;
  transition: opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s, -webkit-transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s;
  transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s, opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s;
  transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s, opacity 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s, -webkit-transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn.-active > .cloud.cloud-03 img {
    transition-delay: 0.8s;
  }
}
.after-ctn > .kv-ctn {
  position: relative;

  padding-block: 39.2vw 49.3333333333vw;
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn {
    padding-block: 6.09375vw 15.8333333333vw;
  }
}
.after-ctn > .kv-ctn > .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35.2vw;
  -webkit-transform: translate(calc(-50% - 21.0666666667vw), calc(-50% - 53.3333333333vw));
          transform: translate(calc(-50% - 21.0666666667vw), calc(-50% - 53.3333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn > .txt {
    width: 13.125vw;
    -webkit-transform: translate(calc(-50% - 20.78125vw), calc(-50% - 1.3020833333vw));
            transform: translate(calc(-50% - 20.78125vw), calc(-50% - 1.3020833333vw));
  }
}
.after-ctn > .kv-ctn > .txt img {
  opacity: 0;

  -webkit-filter: blur(5px);

          filter: blur(5px);
  will-change: filter;
  scale: 1.1;
}
.after-ctn > .kv-ctn > .ttl {
  opacity: 0;
  position: relative;
  z-index: 3;
  width: 34.1333333333vw;

  margin-inline: auto;
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn > .ttl {
    width: 11.875vw;
  }
}
.after-ctn > .kv-ctn > .ttl img {
  -webkit-transform: translateX(1.0666666667vw);
          transform: translateX(1.0666666667vw);
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn > .ttl img {
    -webkit-transform: translateX(0.9375vw);
            transform: translateX(0.9375vw);
  }
}
.after-ctn > .kv-ctn > .cloud {
  position: absolute;
  top: 50%;
  left: 50%;
}
.after-ctn > .kv-ctn > .cloud img {
  opacity: 0;
}
.after-ctn > .kv-ctn > .cloud.cloud-01 {
  z-index: 1;
  width: 70.4vw;
  -webkit-transform: translate(calc(-50% + 44.8vw), calc(-50% - 0.5333333333vw));
          transform: translate(calc(-50% + 44.8vw), calc(-50% - 0.5333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn > .cloud.cloud-01 {
    width: 32.2916666667vw;
    -webkit-transform: translate(calc(-50% - 37.5vw), calc(-50% - 12.8125vw));
            transform: translate(calc(-50% - 37.5vw), calc(-50% - 12.8125vw));
  }
}
.after-ctn > .kv-ctn > .cloud.cloud-01 img {
  -webkit-transform: translateX(8vw);
          transform: translateX(8vw);
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn > .cloud.cloud-01 img {
    -webkit-transform: translateX(-1.5625vw);
            transform: translateX(-1.5625vw);
  }
}
.after-ctn > .kv-ctn > .cloud.cloud-02 {
  width: 94.9333333333vw;
  -webkit-transform: translate(calc(-50% - 29.8666666667vw), calc(-50% + 69.8666666667vw));
          transform: translate(calc(-50% - 29.8666666667vw), calc(-50% + 69.8666666667vw));
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn > .cloud.cloud-02 {
    width: 21.4583333333vw;
    -webkit-transform: translate(calc(-50% + 33.3333333333vw), calc(-50% - 4.4791666667vw));
            transform: translate(calc(-50% + 33.3333333333vw), calc(-50% - 4.4791666667vw));
  }
}
.after-ctn > .kv-ctn > .cloud.cloud-02 img {
  -webkit-transform: translateX(-13.3333333333vw);
          transform: translateX(-13.3333333333vw);
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn > .cloud.cloud-02 img {
    -webkit-transform: translateX(2.6041666667vw);
            transform: translateX(2.6041666667vw);
  }
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn > .cloud.cloud-03 {
    width: 41.3541666667vw;
    -webkit-transform: translate(calc(-50% - 26.5625vw), calc(-50% + 14.7916666667vw));
            transform: translate(calc(-50% - 26.5625vw), calc(-50% + 14.7916666667vw));
  }
}
@media (min-width: 768px) {
  .after-ctn > .kv-ctn > .cloud.cloud-03 img {
    -webkit-transform: translateX(2.6041666667vw);
            transform: translateX(2.6041666667vw);
  }
}
.after-ctn > .project-ctn {
  position: relative;
  padding-top: 190.9333333333vw;
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn {
    padding-top: 45.8333333333vw;
  }
}
.after-ctn > .project-ctn .petal {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
}
.after-ctn > .project-ctn .petal.petal-01 {
  width: 8.5333333333vw;
  -webkit-transform: translate(calc(-50% + 21.3333333333vw), calc(-50% - 173.3333333333vw));
          transform: translate(calc(-50% + 21.3333333333vw), calc(-50% - 173.3333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .petal.petal-01 {
    width: 2.4479166667vw;
    -webkit-transform: translate(calc(-50% + 11.25vw), calc(-50% - 55.3125vw));
            transform: translate(calc(-50% + 11.25vw), calc(-50% - 55.3125vw));
  }
}
.after-ctn > .project-ctn .petal.petal-02 {
  width: 9.0666666667vw;
  -webkit-transform: translate(calc(-50% - 23.4666666667vw), calc(-50% - 121.0666666667vw));
          transform: translate(calc(-50% - 23.4666666667vw), calc(-50% - 121.0666666667vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .petal.petal-02 {
    width: 2.6041666667vw;
    -webkit-transform: translate(calc(-50% - 12.7083333333vw), calc(-50% - 38.5416666667vw));
            transform: translate(calc(-50% - 12.7083333333vw), calc(-50% - 38.5416666667vw));
  }
}
.after-ctn > .project-ctn .petal.petal-03 {
  width: 6.6666666667vw;
  -webkit-transform: translate(calc(-50% + 8.5333333333vw), calc(-50% - 58.9333333333vw));
          transform: translate(calc(-50% + 8.5333333333vw), calc(-50% - 58.9333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .petal.petal-03 {
    width: 3.1770833333vw;
    -webkit-transform: translate(calc(-50% + 5.2083333333vw), calc(-50% - 21.1458333333vw));
            transform: translate(calc(-50% + 5.2083333333vw), calc(-50% - 21.1458333333vw));
  }
}
.after-ctn > .project-ctn .petal.petal-04 {
  width: 5.0666666667vw;
  -webkit-transform: translate(calc(-50% + 21.8666666667vw), calc(-50% + 68.2666666667vw));
          transform: translate(calc(-50% + 21.8666666667vw), calc(-50% + 68.2666666667vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .petal.petal-04 {
    width: 4.6354166667vw;
    -webkit-transform: translate(calc(-50% - 30.625vw), calc(-50% - 18.4375vw));
            transform: translate(calc(-50% - 30.625vw), calc(-50% - 18.4375vw));
  }
}
.after-ctn > .project-ctn .petal.petal-05 {
  width: 7.4666666667vw;
  -webkit-transform: translate(calc(-50% - 31.4666666667vw), calc(-50% + 82.1333333333vw));
          transform: translate(calc(-50% - 31.4666666667vw), calc(-50% + 82.1333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .petal.petal-05 {
    width: 3.1770833333vw;
    -webkit-transform: translate(calc(-50% - 26.5625vw), calc(-50% + 16.1458333333vw));
            transform: translate(calc(-50% - 26.5625vw), calc(-50% + 16.1458333333vw));
  }
}
.after-ctn > .project-ctn .petal.petal-06 {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .petal.petal-06 {
    width: 4.6354166667vw;
    -webkit-transform: translate(calc(-50% + 21.875vw), calc(-50% + 16.4583333333vw));
            transform: translate(calc(-50% + 21.875vw), calc(-50% + 16.4583333333vw));
  }
}
.after-ctn > .project-ctn .petal img {
  opacity: 0;
}
.after-ctn > .project-ctn .project-item {
  position: absolute;
  top: 50%;
  left: 50%;
}
.after-ctn > .project-ctn .project-item.project-item-01 {
  z-index: 2;
  width: 49.7333333333vw;
  -webkit-transform: translate(calc(-50% - 22.4vw), calc(-50% - 24.8vw));
          transform: translate(calc(-50% - 22.4vw), calc(-50% - 24.8vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-01 {
    z-index: 3;
    width: 22.7604166667vw;
    -webkit-transform: translate(calc(-50% + 5.2083333333vw), calc(-50% - 1.4583333333vw));
            transform: translate(calc(-50% + 5.2083333333vw), calc(-50% - 1.4583333333vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-02 {
  z-index: 1;
  width: 50.1333333333vw;
  -webkit-transform: translate(calc(-50% + 21.8666666667vw), calc(-50% - 30.4vw));
          transform: translate(calc(-50% + 21.8666666667vw), calc(-50% - 30.4vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-02 {
    width: 24.1666666667vw;
    -webkit-transform: translate(calc(-50% + 31.7708333333vw), calc(-50% - 22.1875vw));
            transform: translate(calc(-50% + 31.7708333333vw), calc(-50% - 22.1875vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-03 {
  z-index: 2;
  width: 50.1333333333vw;
  -webkit-transform: translate(calc(-50% + 19.7333333333vw), calc(-50% - 90.1333333333vw));
          transform: translate(calc(-50% + 19.7333333333vw), calc(-50% - 90.1333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-03 {
    z-index: 3;
    width: 23.8020833333vw;
    -webkit-transform: translate(calc(-50% - 6.5104166667vw), calc(-50% - 15.7291666667vw));
            transform: translate(calc(-50% - 6.5104166667vw), calc(-50% - 15.7291666667vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-04 {
  z-index: 1;
  width: 48.9333333333vw;
  -webkit-transform: translate(calc(-50% - 24vw), calc(-50% - 76vw));
          transform: translate(calc(-50% - 24vw), calc(-50% - 76vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-04 {
    width: 23.2291666667vw;
    -webkit-transform: translate(calc(-50% - 25.8333333333vw), calc(-50% - 24.375vw));
            transform: translate(calc(-50% - 25.8333333333vw), calc(-50% - 24.375vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-05 {
  z-index: 1;
  width: 49.3333333333vw;
  -webkit-transform: translate(calc(-50% + 19.2vw), calc(-50% + 25.0666666667vw));
          transform: translate(calc(-50% + 19.2vw), calc(-50% + 25.0666666667vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-05 {
    z-index: 5;
    width: 24.21875vw;
    -webkit-transform: translate(calc(-50% + 21.9270833333vw), calc(-50% + 7.1875vw));
            transform: translate(calc(-50% + 21.9270833333vw), calc(-50% + 7.1875vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-06 {
  width: 48.9333333333vw;
  -webkit-transform: translate(calc(-50% + 27.7333333333vw), calc(-50% + 51.7333333333vw));
          transform: translate(calc(-50% + 27.7333333333vw), calc(-50% + 51.7333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-06 {
    z-index: 2;
    width: 23.59375vw;
    -webkit-transform: translate(calc(-50% - 23.6458333333vw), calc(-50% - 5.4166666667vw));
            transform: translate(calc(-50% - 23.6458333333vw), calc(-50% - 5.4166666667vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-07 {
  width: 49.7333333333vw;
  -webkit-transform: translate(calc(-50% + 25.3333333333vw), calc(-50% - 7.4666666667vw));
          transform: translate(calc(-50% + 25.3333333333vw), calc(-50% - 7.4666666667vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-07 {
    z-index: 4;
    width: 24.6875vw;
    -webkit-transform: translate(calc(-50% + 31.875vw), calc(-50% - 3.4375vw));
            transform: translate(calc(-50% + 31.875vw), calc(-50% - 3.4375vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-08 {
  width: 49.7333333333vw;
  -webkit-transform: translate(calc(-50% - 28.8vw), calc(-50% - 56.8vw));
          transform: translate(calc(-50% - 28.8vw), calc(-50% - 56.8vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-08 {
    z-index: 2;
    width: 23.8020833333vw;
    -webkit-transform: translate(calc(-50% + 19.0625vw), calc(-50% - 12.0833333333vw));
            transform: translate(calc(-50% + 19.0625vw), calc(-50% - 12.0833333333vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-09 {
  z-index: 1;
  width: 49.3333333333vw;
  -webkit-transform: translate(calc(-50% - 22.4vw), calc(-50% + 55.4666666667vw));
          transform: translate(calc(-50% - 22.4vw), calc(-50% + 55.4666666667vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-09 {
    width: 23.59375vw;
    -webkit-transform: translate(calc(-50% - 9.2708333333vw), calc(-50% + 5.4166666667vw));
            transform: translate(calc(-50% - 9.2708333333vw), calc(-50% + 5.4166666667vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-10 {
  width: 52.9333333333vw;
  -webkit-transform: translate(calc(-50% - 26.1333333333vw), calc(-50% + 30.9333333333vw));
          transform: translate(calc(-50% - 26.1333333333vw), calc(-50% + 30.9333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-10 {
    width: 24.6875vw;
    -webkit-transform: translate(calc(-50% - 31.0416666667vw), calc(-50% + 6.4583333333vw));
            transform: translate(calc(-50% - 31.0416666667vw), calc(-50% + 6.4583333333vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-11 {
  width: 49.0666666667vw;
  -webkit-transform: translate(calc(-50% - 28.8vw), calc(-50% - 2.9333333333vw));
          transform: translate(calc(-50% - 28.8vw), calc(-50% - 2.9333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-11 {
    width: 23.8020833333vw;
    -webkit-transform: translate(calc(-50% - 34.1666666667vw), calc(-50% - 14.0625vw));
            transform: translate(calc(-50% - 34.1666666667vw), calc(-50% - 14.0625vw));
  }
}
.after-ctn > .project-ctn .project-item.project-item-12 {
  width: 48.5333333333vw;
  -webkit-transform: translate(calc(-50% + 24.5333333333vw), calc(-50% - 62.9333333333vw));
          transform: translate(calc(-50% + 24.5333333333vw), calc(-50% - 62.9333333333vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .project-item.project-item-12 {
    width: 23.1770833333vw;
    -webkit-transform: translate(calc(-50% + 5.2083333333vw), calc(-50% - 26.1458333333vw));
            transform: translate(calc(-50% + 5.2083333333vw), calc(-50% - 26.1458333333vw));
  }
}
.after-ctn > .project-ctn .project-item img {
  opacity: 0;
}
.after-ctn > .project-ctn .foot-box {
  overflow: hidden;
  position: relative;

  padding-block: 8vw 6.4vw;
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .foot-box {
    padding-block: 3.6458333333vw 2.6041666667vw;
  }
}
.after-ctn > .project-ctn .foot-box.-active > .mark {
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.28s, scale 0.64s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.32s;

  scale: 1;
}
.after-ctn > .project-ctn .foot-box.-active > .deco img {
  transition: -webkit-transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.after-ctn > .project-ctn .foot-box > .mark {
  width: 31.4666666667vw;

  margin-inline: auto;
  scale: 1.1;
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .foot-box > .mark {
    width: 15.625vw;
  }
}
.after-ctn > .project-ctn .foot-box > .deco {
  position: absolute;
  left: 50%;
}
.after-ctn > .project-ctn .foot-box > .deco.deco-01 {
  bottom: 0;
  width: 23.4666666667vw;
  -webkit-transform: translateX(calc(-50% - 24vw));
          transform: translateX(calc(-50% - 24vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .foot-box > .deco.deco-01 {
    width: 12.34375vw;
    -webkit-transform: translateX(calc(-50% - 16.5104166667vw));
            transform: translateX(calc(-50% - 16.5104166667vw));
  }
}
.after-ctn > .project-ctn .foot-box > .deco.deco-02 {
  bottom: 0;
  width: 26.1333333333vw;
  -webkit-transform: translateX(calc(-50% + 23.4666666667vw));
          transform: translateX(calc(-50% + 23.4666666667vw));
}
@media (min-width: 768px) {
  .after-ctn > .project-ctn .foot-box > .deco.deco-02 {
    width: 14.4791666667vw;
    -webkit-transform: translateX(calc(-50% + 16.6666666667vw));
            transform: translateX(calc(-50% + 16.6666666667vw));
  }
}
.after-ctn > .project-ctn .foot-box > .deco img {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.after-ctn > .project-ctn.-active [data-project-petal-01] img {
  -webkit-animation: fall02 4s ease-in-out 0s infinite;
          animation: fall02 4s ease-in-out 0s infinite;
}
.after-ctn > .project-ctn.-active [data-project-petal-02] img {
  -webkit-animation: fall01 4s ease-in-out 0.5s infinite;
          animation: fall01 4s ease-in-out 0.5s infinite;
}
.after-ctn > .project-ctn.-active [data-project-petal-03] img {
  -webkit-animation: fall02 4s ease-in-out 1.6s infinite;
          animation: fall02 4s ease-in-out 1.6s infinite;
}
.after-ctn > .project-ctn.-active [data-project-petal-04] img {
  -webkit-animation: fall01 4s ease-in-out 0.9s infinite;
          animation: fall01 4s ease-in-out 0.9s infinite;
}
.after-ctn > .project-ctn.-active [data-project-petal-05] img {
  -webkit-animation: fall02 4s ease-in-out 1.2s infinite;
          animation: fall02 4s ease-in-out 1.2s infinite;
}
.after-ctn > .project-ctn.-active [data-project-petal-06] img {
  -webkit-animation: fall01 4s ease-in-out 3s infinite;
          animation: fall01 4s ease-in-out 3s infinite;
}
.after-ctn > .project-ctn.-active .project-item img {
  opacity: 1;
  transition: opacity 0.56s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.after-ctn > .footer-ctn {
  position: relative;
  background-color: var(--color-pink);

  padding-block: 5.8666666667vw 20.8vw;
}
@media (min-width: 768px) {
  .after-ctn > .footer-ctn {
    padding-block: 7.2916666667vw 10.9375vw;
  }
}
.after-ctn > .footer-ctn > .logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -2.1333333333vw;
}
@media (min-width: 768px) {
  .after-ctn > .footer-ctn > .logo-box {
    margin-left: 0;
  }
}
.after-ctn > .footer-ctn > .logo-box > .logo {
  display: block;
}
.after-ctn > .footer-ctn > .logo-box > .logo:not(.logo-unt) {
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (any-hover: hover) {
  .after-ctn > .footer-ctn > .logo-box > .logo:not(.logo-unt):hover {
    opacity: 0.6;
  }
}
.after-ctn > .footer-ctn > .logo-box > .logo.logo-unt {
  margin: 0 2.1333333333vw 0 2.6666666667vw;
  width: 11.2vw;
  -webkit-transform: translateY(0.5333333333vw);
          transform: translateY(0.5333333333vw);
}
@media (min-width: 768px) {
  .after-ctn > .footer-ctn > .logo-box > .logo.logo-unt {
    margin: 0 1.25vw 0 0;
    width: 8.2291666667vw;
    -webkit-transform: translateY(0.1041666667vw);
            transform: translateY(0.1041666667vw);
  }
}
.after-ctn > .footer-ctn > .logo-box > .logo.logo-design {
  margin: 0 0.8vw;
  width: 5.8666666667vw;
}
@media (min-width: 768px) {
  .after-ctn > .footer-ctn > .logo-box > .logo.logo-design {
    margin: 0 0.625vw 0 0.5208333333vw;
    width: 4.1666666667vw;
  }
}
.after-ctn > .footer-ctn > .logo-box > .logo.logo-factory {
  margin-right: 1.0666666667vw;
  width: 5.6vw;
}
@media (min-width: 768px) {
  .after-ctn > .footer-ctn > .logo-box > .logo.logo-factory {
    margin-right: 0.625vw;
    width: 3.90625vw;
    -webkit-transform: translateY(-0.1041666667vw);
            transform: translateY(-0.1041666667vw);
  }
}
.after-ctn > .footer-ctn > .logo-box > .logo.logo-system {
  margin-right: 0.5333333333vw;
  width: 5.3333333333vw;
}
@media (min-width: 768px) {
  .after-ctn > .footer-ctn > .logo-box > .logo.logo-system {
    margin-right: 0.2083333333vw;
    width: 3.90625vw;
    -webkit-transform: translateY(-0.1041666667vw);
            transform: translateY(-0.1041666667vw);
  }
}
.after-ctn > .footer-ctn > .logo-box > .mustache {
  width: 1.8666666667vw;
}
@media (min-width: 768px) {
  .after-ctn > .footer-ctn > .logo-box > .mustache {
    width: 1.3020833333vw;
  }
}
.after-ctn > .footer-ctn > .deco {
  position: absolute;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}