@charset "UTF-8";
.loading {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
}
.loading__inner {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.loading__image {
  width: 100%;
  max-width: 75vw;
  /* アイコン部分 - ふわっと現れる */
  /* 文字要素 - 下からふわっと上がってくる */
  /* Lead文字の遅延 */
  /* Campus文字の遅延 */
  /* WE ARE THE FUTURE部分 */
}
.loading__image .icon {
  opacity: 0;
  -webkit-animation: iconFadeIn 0.8s ease-out forwards;
          animation: iconFadeIn 0.8s ease-out forwards;
  -webkit-transform-origin: 25% center;
          transform-origin: 25% center;
}
@-webkit-keyframes iconFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-filter: blur(3px);
            filter: blur(3px);
  }
  70% {
    opacity: 0.8;
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
    -webkit-filter: blur(1px);
            filter: blur(1px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes iconFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-filter: blur(3px);
            filter: blur(3px);
  }
  70% {
    opacity: 0.8;
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
    -webkit-filter: blur(1px);
            filter: blur(1px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
.loading__image .letter {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-animation: letterSlideUp 0.5s ease-out forwards;
          animation: letterSlideUp 0.5s ease-out forwards;
}
@-webkit-keyframes letterSlideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
  50% {
    opacity: 0.7;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-filter: blur(1px);
            filter: blur(1px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes letterSlideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
  50% {
    opacity: 0.7;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-filter: blur(1px);
            filter: blur(1px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
.loading__image .lead-l {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.loading__image .lead-e {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.loading__image .lead-a {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.loading__image .lead-d {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.loading__image .campus-c {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.loading__image .campus-a {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.loading__image .campus-m {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.loading__image .campus-p {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.loading__image .campus-u {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.loading__image .campus-s {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.loading__image .subtitle {
  opacity: 0;
  -webkit-animation: subtitleFadeIn 0.4s ease-out forwards;
          animation: subtitleFadeIn 0.4s ease-out forwards;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
@-webkit-keyframes subtitleFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes subtitleFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}