@charset "utf-8";

/* =========================

	Loading

=========================*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  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;
  z-index: 999;
  text-align: center;
}

.loading p {
  width: 80%;
  max-width: 500px;
  text-align: center;
  animation: slideIn 1.8s forwards;
}

@keyframes slideIn {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
  }
}

.loadingBg.appear {
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: scaleY(0);
  background-color: #e60020;
  /*伸びる背景色の設定*/
  -webkit-animation-name: loadingBg;
  animation-name: loadingBg;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

}

@keyframes loadingBg {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }

  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }

  50.001% {
    transform-origin: top;
  }

  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}

/* =========================

	スクロールで表示系

=========================*/
.anime {
  opacity: 0;
}

.fadeUp {
  -webkit-animation-name: fadeUpAnime;
  animation-name: fadeUpAnime;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.delay01 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.delay02 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.delay03 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.delay04 {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.delay05 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

/* =========================

	適職診断

=========================*/
/* キティちゃん01 */
.mov01 {
  animation: mov01 2.4s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}

@keyframes mov01 {
  0% {
    transform: translateY(0)
  }

  33.33333% {
    transform: translateY(-15px)
  }

  100% {
    transform: translateY(0px)
  }
}

/* はてな01 */
.mov02 {
  animation: mov02 3s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}

@keyframes mov02 {
  0% {
    transform: scale(1, 1)
  }

  25% {
    transform: scale(0.9, 0.9)
  }

  50% {
    transform: scale(1, 1)
  }

  75% {
    transform: scale(0.9, 0.9)
  }

  100% {
    transform: translateY(0px)
  }
}

/* キティちゃん02 */
.mov03 {
  animation: mov03 2s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}

@keyframes mov03 {
  0% {
    transform: rotate(0deg)
  }

  25% {
    transform: rotate(-10deg)
  }

  50% {
    transform: rotate(0deg)
  }

  75% {
    transform: rotate(10deg)
  }

  100% {
    transform: translateY(0px)
  }
}

/* はてな02 */
.mov04 {
  animation: mov04 2s infinite ease-in-out .8s alternate;
  transform-origin: 50% 50%;
  transition: 1.5s ease-in-out;
  margin: 1rem 0 !important;
}

@keyframes mov04 {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }

  50% {
    transform: translate(0, -7px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}

.mov05 {
  animation: mov05 2.4s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}

@keyframes mov05 {
  0% {
    transform: scale(1, 1)
  }

  25% {
    transform: scale(0.9, 0.9)
  }

  50% {
    transform: scale(1, 1)
  }

  75% {
    transform: scale(0.9, 0.9)
  }

  100% {
    transform: translateY(0px)
  }
}

.mov06 {
  animation: mov06 2s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}

@keyframes mov06 {
  0% {
    transform: translateY(0)
  }

  33.33333% {
    transform: translateY(-10px)
  }

  100% {
    transform: translateY(0px)
  }
}

.mov07 {
  animation: mov07 1.2s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}

@keyframes mov07 {
  0% {
    transform: rotate(0deg)
  }

  25% {
    transform: rotate(-10deg)
  }

  50% {
    transform: rotate(0deg)
  }

  75% {
    transform: rotate(15deg)
  }

  100% {
    transform: translateY(0px)
  }
}