@-webkit-keyframes bell-ring {
  0% {
    transform: rotate(0deg);
  }
  2.5% {
    transform: rotate(10deg);
  }
  7.5% {
    transform: rotate(-10deg);
  }
  12.5% {
    transform: rotate(5deg);
  }
  17.5% {
    transform: rotate(-5deg);
  }
  22.5% {
    transform: rotate(2.5deg);
  }
  25% {
    transform: rotate(0deg);
  }
}

@keyframes bell-ring {
  0% {
    transform: rotate(0deg);
  }
  2.5% {
    transform: rotate(10deg);
  }
  7.5% {
    transform: rotate(-10deg);
  }
  12.5% {
    transform: rotate(5deg);
  }
  17.5% {
    transform: rotate(-5deg);
  }
  22.5% {
    transform: rotate(2.5deg);
  }
  25% {
    transform: rotate(0deg);
  }
}

.page-wrapper {
  overflow: hidden;
  visibility: visible !important;
  opacity: 1 !important;
  background-image: url("../images/001.png");
  background-image: -webkit-image-set(
    url("../images/001.avif") type("image/avif"),
    url("../images/001.webp") type("image/webp"),
    url("../images/001.png") type("image/png")
  );
  background-image: image-set(
    url("../images/001.avif") type("image/avif"),
    url("../images/001.webp") type("image/webp"),
    url("../images/001.png") type("image/png")
  );
  background-size: 100% auto;
  background-position: 0 -66.40625vw;
}

.page-index-title > img, .page-left-bottom > img,
.page-right-bottom > picture > img, .page-link > img { 
  width: auto; height: 100%;
}

.page-index-title {
  opacity: 0; visibility: hidden;
  position: absolute; top: 19.907407vh; left: 8.4375vw; height: 46.296296vh;
}

.page-index-title > .right {
  position: absolute; right: 0; bottom: 0;
  width: 1.875vw; height: auto;
  transform: translate(35%, 45%);
}

.loaded .page-index-title {
  -webkit-animation: fadeInLeft 1s ease-in-out 2.5s forwards;
  animation: fadeInLeft 1s ease-in-out 2.5s forwards;
}

@keyframes fadeInLeftAll {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

.page-left-bottom {
  position: absolute; left: 0; bottom: -8%; height: 34.259259vh;
  -webkit-transform: translateX(-100%); transform: translateX(-100%);
}

.loaded .page-left-bottom {
  -webkit-animation: fadeInLeftAll 1.8s ease-in-out 0.5s forwards;
  animation: fadeInLeftAll 1.8s ease-in-out 0.5s forwards;
}

.page-right-bottom {
  pointer-events: none;
  position: absolute; right: 0; bottom: 0; height: 82.608696%;
  -webkit-transition: transform 3s ease-in-out;
  transition: transform 3s ease-in-out;
}

.loaded .page-right-bottom {
  -webkit-transform: scale(2); transform: scale(2);
  -webkit-transform-origin: 5% 11.5%; transform-origin: 5% 11.5%;
}

.page-right-bottom .bell {
  position: absolute; left: 29.85%; top: 31.75%;
  width: auto; height: 6.666667vh; z-index: 1;
  transform-origin: top center;
}

.loaded .page-right-bottom .bell {
  -webkit-animation: bell-ring 5s ease-in-out 2.5s infinite;
  animation: bell-ring 5s ease-in-out 2.5s infinite;
}

@-webkit-keyframes fadeInBottom {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(-50%, 30px);
    transform: translate(-50%, 30px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
  }
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(-50%, 30px);
    transform: translate(-50%, 30px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
  }
}

.page-link {
  opacity: 0; visibility: hidden; z-index: 10;
  position: absolute; left: 50%; bottom: 8.333333%; height: 5.092593vh;
}

.loaded .page-link {
  -webkit-animation: fadeInBottom 1s ease-in-out 2.5s forwards;
  animation: fadeInBottom 1s ease-in-out 2.5s forwards;
}

.fog { position: absolute; z-index: 1024; height: 103.888889vh; pointer-events: none; }

.fog > img { width: auto; height: 100%; }

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1; visibility: visible;
  }
  100% {
    opacity: 0; visibility: hidden; left: -100%;
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1; visibility: visible;
  }
  100% {
    opacity: 0; visibility: hidden; left: -100%;
  }
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1; visibility: visible;
  }
  100% {
    opacity: 0; visibility: hidden; left: 100%;
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1; visibility: visible;
  }
  100% {
    opacity: 0; visibility: hidden; left: 100%;
  }
}

.loaded .fog-1, .fog-2, .fog-3, .fog-4 {
  -webkit-animation: fadeOutRight 4s ease-in-out forwards;
  animation: fadeOutRight 4s ease-in-out forwards;
}

.loaded .fog-5, .fog-6, .fog-7, .fog-8, .fog-9, .fog-10, .fog-11 {
  -webkit-animation: fadeOutLeft 4s ease-in-out forwards;
  animation: fadeOutLeft 4s ease-in-out forwards;
}

.fog-1 {
  top: 11.574074vh; left: 52.447917vw;
}

.fog-2 {
  top: -11.666667vh; left: 51.09375vw;
}

.fog-3 {
  top: -2.037037vh; left: 50vw;
}

.fog-4 {
  top: 43.518519vh; left: 56.875vw;
}

.fog-5 {
  top: 36.018519vh; left: -29.270833vw;
}

.fog-6 {
  top: 26.851852vh; left: -33.645833vw;
  -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}

.fog-7 {
  top: 36.018519vh; left: -5.520833vw;
  -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}

.fog-8 {
  top: 31.388889vh; left: -35.052083vw;
  -webkit-animation-delay: 1s; animation-delay: 1s;
}

.fog-9 {
  top: 36.018519vh; left: -52.03125vw;
  -webkit-animation-delay: 1s; animation-delay: 1s;
}

.fog-10 {
  top: -3.888889vh; left: -35.052083vw;
  -webkit-animation-delay: 0.3s; animation-delay: 0.3s;
}

.fog-11 {
  top: -2.037037vh; left: -15.729167vw;
}

@media screen and (max-width: 768px) {
  .page-wrapper {
    background-position: 0 0; background-size: cover;
  }

  .page-index-title {
    width: 55%; height: auto; top: 100px; left: 45px; z-index: 1;
  }

  .page-index-title > .right {
    width: 20px;
    transform: translate(50%, 50%);
  }

  .page-link { width: 100px; height: auto; }

  .page-left-bottom { width: 50%; height: auto; }

  .page-right-bottom { width: 130%; height: auto; }

  .loaded .page-right-bottom {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transform-origin: 5% 11.5%;
    transform-origin: 12% 72.5%;
  }

  .page-right-bottom .bell { left: 28%; top: 30.75%; }

  .page-left-bottom, .fog { display: none; }

  .page-index-title > img, .page-left-bottom > img, .page-right-bottom > picture > img, .page-link > img {
    width: 100%; height: auto;
  }

  .loaded .page-index-title {
    -webkit-animation: fadeInLeft 1s ease-in-out 0.5s forwards;
    animation: fadeInLeft 1s ease-in-out 0.5s forwards;
  }

  .loaded .page-link {
    -webkit-animation: fadeInBottom 1s ease-in-out 1s forwards;
    animation: fadeInBottom 1s ease-in-out 1s forwards;
  }
}