@charset "utf-8";

/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(169, 126, 217, 1) 68%, rgba(22, 30, 139, 1));
  z-index: 9999999;
  text-align: center;
  color: #f7f5ed;
  font-weight: bold;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img#loading {
  display: block;
  width: 80px;
  transform-origin: center bottom;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  0%, 100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}


/*========= ヘッダー部分アニメーションのCSS ===============*/
img#HNY, img#Year {
  opacity: 0;
}

@keyframes HNY_anime {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(10px);
  }
}
img#HNY {
  animation: HNY_anime 1.5s linear 4s forwards;
}

@keyframes Year_anime {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(25px);
  }
}

/* メディアクエリ内でのYearアニメーションの変更 */
@media screen and (min-width: 990px) {
  @keyframes Year_anime {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    50% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

img#Year {
  animation: Year_anime 1s linear 5s forwards;
}

/*========= 音符アニメーションのCSS ===============*/
@media screen and (min-width: 990px) {
  div#onpuB_1, div#onpuB_2 {
                                animation: onpuB_1 3s 1 2.5s forwards;
                                opacity: 0;
                                z-index:1;
  }
  @keyframes onpuB_1 {
    0% {
      transform: translateY(300px) translateX(300px);
                                opacity: 0;
    }
    50% {
      transform: translateY(0) translateX(0);
                                opacity: 1;
    }
    100% {
      transform: translateY(0) translateX(0);
                                opacity: 1;
    }
  }

  div#onpuB_2 {
    animation: onpuB_2 2s 1 3s forwards;
  }

  @keyframes onpuB_2 {
    0% {
      transform: translateY(300px);
                                opacity: 0;
    }
    100% {
      transform: translateY(0);
                                opacity: 1;
    }
  }

  div#onpuB_3 {
                                animation: onpuB_3 4s 1 3s forwards;
                                opacity: 0;
                                z-index: 1
  }

  @keyframes onpuB_3 {
    0% {
      transform: translateY(100px) translateX(200px);
                                opacity: 0;
    }
    40% {
      transform: translateY(-180px) translateX(140px);
                                opacity: 1;
    }
    60% {
      transform: translateY(-100px) translateX(100px);
                                opacity: 1;
    }
    100% {
      transform: translateY(0) translateX(0);
                                opacity: 1;
    }
  }

  div#onpuB_4 {
                                animation: onpuB_4 3s 1 1.5s forwards;
                                opacity: 0;
                                z-index: 1
  }

  @keyframes onpuB_4 {
    0% {
      transform: translateY(100px) translateX(-100px);
                                opacity: 0;
    }
    40% {
      transform: translateY(-180px) translateX(-100px);
                                opacity: 1;
    }
    100% {
      transform: translateY(-10px) translateX(20px);
                                opacity: 1;
    }
  }
}

#onpuB_1 img, #onpuB_4 img {
  animation: onpu_anime 1.5s infinite;
}

@keyframes onpu_anime {
  0%, 100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

#onpuB_2 img, #onpuB_3 img {
  animation: onpu_animeB 3.5s linear infinite;
}

@keyframes onpu_animeB {
  0%, 100% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(-4deg);
  }
}

#onpuW_1 img, #onpuW_2 img {
  animation: onpu_animeC 1.5s linear infinite;
}

@keyframes onpu_animeC {
  0%, 100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

#onpuW_3 img, #onpuW_4 img {
  animation: onpu_animeD 1.5s linear infinite;
  animation-delay: 2s;
}

@keyframes onpu_animeD {
  0%, 100% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(12deg);
  }
}


/*========= コロちゃんアニメーションのCSS ===============*/
div.colomichan img {
  animation: colocolo 1.6s linear infinite;
}
div.colo_kemuri2 img, div.colochan img {
  animation: colocolo 2s linear infinite;
}

@keyframes colocolo {
  0%, 100% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-2deg);
  }
}

div.colo_kemuri1 img {
  animation: colocolo2 3s linear infinite;
}

@keyframes colocolo2 {
  0%, 100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(4deg);
  }
}



/*========= 煙 アニメーション ===============*/
@media screen and (min-width: 990px) {

  @keyframes kemuri_1 {
    0% {
      transform: scale(0);
                                opacity: 0;
    }
    80% {
      transform: scale(0.3);
                                opacity: 0;
    }
    100% {
      transform: scale(1);
                                opacity: 1;
    }
  }
}
  @keyframes kemuri_2 {
    0% {
      transform: scale(0);
                                opacity: 0;
    }
    70% {
      transform: scale(0.3);
                                opacity: 0;
    }
    100% {
      transform: scale(1);
                                opacity: 1;
    }
  }
}
div.colo_kemuri1, div.colo_kemuri2 {
                                opacity: 0;
}
div.colo_kemuri1 {
                                animation: kemuri_1 2s 1 0.5s forwards;
}
div.colo_kemuri2 {
                                animation: kemuri_2 2s 1 0.8s forwards;
}


/*========= スネークアニメーション ===============*/
@media screen and (min-width: 990px) {
  div.colochan img.snake {
    animation: snake_anime 3s linear 2s 1 forwards;
    animation-fill-mode: forwards;
    position: absolute;
    top: 240px;
    left: 110px;
      transform: scale(0.3);
  }

  @keyframes snake_anime {
    0% {
      transform: rotate(10deg) translateY(0) translateX(0) scale(0.3);
    }
    30% {
      transform: rotate(0) translateY(-140px) translateX(-30px) scale(0.4);
    }
    50% {
      transform: rotate(-10deg) translateY(-160px) translateX(-40px) scale(0.5);
    }
    70% {
      transform: rotate(10deg) translateY(-200px) translateX(-75px) scale(0.75);
    }
    100% {
      transform: rotate(0) translateY(-240px) translateX(-110px) scale(1);
    }
  }

  div.colochan {
    animation: colocolo_box 2s linear infinite;
  }

  @keyframes colocolo_box {
    0%, 100% {
      transform: rotate(2deg);
    }
    50% {
      transform: rotate(-2deg);
    }
  }
}

/*========= 動きの少ないアニメーション設定 ===============*/
@media (prefers-reduced-motion: reduce) {
  /* すべてのアニメーションをオフ */
  * {
    animation: none !important;
    transition: none !important;
  }
}