.close-of-play-text {
  white-space: nowrap;
  font-family: Bluu-Next-Bold;
  font-size: 2.3em;
  font-weight: 700;
  line-height: 134px;
}

@media (width <= 576px) {
  :root {
    --font-size-copt-1: 1.5em;
    --font-size-copt-2: 2.5em;
  }

  .close-of-play-text {
    font-size: var(--font-size-copt-2);
    align-items: flex-end;
    display: flex;
  }

  .animation-wrapper.start:before, .animation-wrapper.start:after {
    width: 0;
    display: none !important;
  }
}

@media (width >= 576px) {
  :root {
    --font-size-copt-1: 4em;
    --font-size-copt-2: 5em;
  }

  .close-of-play-text {
    font-size: var(--font-size-copt-2);
  }
}

@media (width >= 992px) {
  :root {
    --font-size-copt-1: 5em;
    --font-size-copt-2: 7em;
  }

  .close-of-play-text {
    font-size: var(--font-size-copt-2);
  }
}

@keyframes circle-fade-in {
  0% {
    opacity: 0;
    width: 100%;
    font-size: 0;
  }

  30% {
    opacity: 1;
    font-size: var(--font-size-copt-1);
  }

  50% {
    opacity: 1;
    font-size: var(--font-size-copt-2);
    width: 100%;
  }

  100% {
    opacity: 1;
    font-size: var(--font-size-copt-2);
    width: 100%;
  }
}

@keyframes circle-part-fade-out-left {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 1;
    left: -120px;
  }

  100% {
    opacity: 0;
    left: -300px;
  }
}

@keyframes circle-part-fade-out-right {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 1;
    right: -120px;
  }

  100% {
    opacity: 0;
    right: -300px;
  }
}

.fade-in-from-circle {
  opacity: 0;
  white-space: nowrap;
  width: auto;
  min-width: 110px;
  height: 120px;
  margin: auto;
  line-height: 100px;
  position: relative;
  overflow: hidden;
}

.animation-wrapper.start .fade-in-from-circle {
  opacity: 1;
  white-space: nowrap;
  width: auto;
  height: 150px;
  margin: auto;
  line-height: 100px;
  animation-name: circle-fade-in;
  animation-duration: 4s;
  position: relative;
  overflow: hidden;
}

.animation-wrapper.start:after {
  opacity: 0;
  content: "";
  cursor: pointer;
  background-image: url("close-of-play-2.16e3ec82.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 110px;
  height: 133px;
  animation-name: circle-part-fade-out-right;
  animation-duration: 4s;
  display: inline-block;
  position: absolute;
  top: calc(50% - 100px);
  right: calc(50% - 120px);
}

.animation-wrapper.start:before {
  opacity: 0;
  content: "";
  cursor: pointer;
  background-image: url("close-of-play-1.b5e646a1.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 110px;
  height: 133px;
  animation-name: circle-part-fade-out-left;
  animation-duration: 4s;
  animation-delay: .33ms;
  display: inline-block;
  position: absolute;
  top: calc(50% - 78px);
  left: calc(50% - 52px);
}

.animation-wrapper {
  margin: auto;
}

.rotating {
  animation: 2s linear infinite rotating;
}

@keyframes rotating {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.fade {
  animation-name: fade;
  animation-duration: 4s;
  animation-iteration-count: 1;
}

@keyframes fade {
  from {
    opacity: .3;
  }

  to {
    opacity: 1;
  }
}

.slideInLeft {
  animation-name: slide-in-left;
  animation-duration: 1s;
  animation-iteration-count: 1;
  visibility: visible !important;
}

@keyframes slide-in-left {
  from {
    margin-left: -40%;
  }

  to {
    margin-left: 0;
  }
}

.slideInRight {
  animation-name: slide-in-right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  visibility: visible !important;
}

@keyframes slide-in-right {
  0% {
    margin-right: -40%;
  }

  100% {
    margin-right: 0;
  }
}

/*# sourceMappingURL=index.3d16c56b.css.map */