@charset "UTF-8";
/* ローディング画面のスタイル */
#loading-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(225deg, rgb(231, 231, 231) 0%, rgb(231, 231, 231) 7%, rgb(255, 255, 255) 10%, rgb(241, 241, 241) 72%, rgb(231, 231, 231) 75%, rgb(221, 221, 221) 100%);
  background: linear-gradient(225deg, rgb(231, 231, 231) 0%, rgb(231, 231, 231) 7%, rgb(255, 255, 255) 10%, rgb(241, 241, 241) 72%, rgb(231, 231, 231) 75%, rgb(221, 221, 221) 100%);
  z-index: 9999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
#loading-screen p {
  font-family: "Zen Kurenaido", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "メイリオ", Meiryo, sans-serif;
  color: rgb(255, 79, 68);
  -webkit-filter: drop-shadow(0 0 15px rgba(17, 17, 17, 0.15));
          filter: drop-shadow(0 0 15px rgba(17, 17, 17, 0.15));
  -webkit-transform: translateZ(0px);
          transform: translateZ(0px);
  font-size: min(calc(48 / 1440 * 100vw), 4.8rem);
}
@media (max-width:1024px) {
  #loading-screen p {
    font-size: max(calc(24 / 600 * 100vw), 2.4rem);
  }
}
#loading-screen #loading-shape {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  z-index: 5000;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(213, 40, 123)), to(rgb(255, 79, 68)));
  background: -webkit-linear-gradient(top, rgb(213, 40, 123) 0%, rgb(255, 79, 68) 100%);
  background: linear-gradient(180deg, rgb(213, 40, 123) 0%, rgb(255, 79, 68) 100%);
  -webkit-animation: fadeInLeft 0.7s ease-in-out forwards 2s;
          animation: fadeInLeft 0.7s ease-in-out forwards 2s; /* アニメーションを追加 */
  overflow: hidden;
}
@media (max-width:1024px) {
  #loading-screen #loading-shape {
    -webkit-animation: fadeInLeftSp 0.6s ease-in-out forwards 2s;
            animation: fadeInLeftSp 0.6s ease-in-out forwards 2s; /* アニメーションを追加 */
  }
}

#logo {
  position: fixed;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  opacity: 0;
  -webkit-animation: appearlogo 0.4s ease-in-out forwards 2.25s, scalelogo 1.85s ease-out forwards 2.375s, disappearlogo 1.25s ease-in-out forwards 3.95s;
          animation: appearlogo 0.4s ease-in-out forwards 2.25s, scalelogo 1.85s ease-out forwards 2.375s, disappearlogo 1.25s ease-in-out forwards 3.95s;
  z-index: 9999;
  width: 20vw;
}
@media (max-width:1024px) {
  #logo {
    width: 45vw;
    -webkit-animation: appearlogo 0.35s ease-in-out forwards 2.15s, scalelogoSp 2s ease-out forwards 2.375s, disappearlogo 1.2s ease-in-out forwards 3.935s;
            animation: appearlogo 0.35s ease-in-out forwards 2.15s, scalelogoSp 2s ease-out forwards 2.375s, disappearlogo 1.2s ease-in-out forwards 3.935s;
  }
}

#loading-screen.hidden {
  pointer-events: none; /* 完全に透明になった後にクリックなどのイベントを無効化 */
  -webkit-transform: translateX(125%) skew(-30deg);
          transform: translateX(125%) skew(-30deg);
}
@media (max-width:1024px) {
  #loading-screen.hidden {
    -webkit-transform: translateX(160%) skew(-30deg);
            transform: translateX(160%) skew(-30deg);
  }
}

@-webkit-keyframes fadeInLeft {
  0% {
    left: -100%;
    opacity: 0;
    -webkit-transform: skew(45deg);
            transform: skew(45deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 0;
  }
}

@keyframes fadeInLeft {
  0% {
    left: -100%;
    opacity: 0;
    -webkit-transform: skew(45deg);
            transform: skew(45deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes fadeInLeftSp {
  0% {
    left: -180%;
    opacity: 0;
    -webkit-transform: skew(45deg);
            transform: skew(45deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 0;
  }
}
@keyframes fadeInLeftSp {
  0% {
    left: -180%;
    opacity: 0;
    -webkit-transform: skew(45deg);
            transform: skew(45deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes appearlogo {
  0% {
    opacity: 0;
    -webkit-filter: blur(30px);
            filter: blur(30px);
    left: 45%;
    rotate: -10deg;
  }
  100% {
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
    left: 50%;
    rotate: 0deg;
  }
}
@keyframes appearlogo {
  0% {
    opacity: 0;
    -webkit-filter: blur(30px);
            filter: blur(30px);
    left: 45%;
    rotate: -10deg;
  }
  100% {
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
    left: 50%;
    rotate: 0deg;
  }
}
@-webkit-keyframes scalelogo {
  0% {
    width: 25vw;
  }
  10% {
    width: 18.5vw;
  }
  100% {
    width: 17.85vw;
  }
}
@keyframes scalelogo {
  0% {
    width: 25vw;
  }
  10% {
    width: 18.5vw;
  }
  100% {
    width: 17.85vw;
  }
}
@-webkit-keyframes scalelogoSp {
  0% {
    width: 45vw;
  }
  100% {
    width: 45vw;
  }
}
@keyframes scalelogoSp {
  0% {
    width: 45vw;
  }
  100% {
    width: 45vw;
  }
}
@-webkit-keyframes disappearlogo {
  0% {
    opacity: 1;
    left: 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  100% {
    opacity: 0;
    left: 60%;
    -webkit-filter: blur(45px);
            filter: blur(45px);
  }
}
@keyframes disappearlogo {
  0% {
    opacity: 1;
    left: 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  100% {
    opacity: 0;
    left: 60%;
    -webkit-filter: blur(45px);
            filter: blur(45px);
  }
}/*# sourceMappingURL=myloading.css.map */