@charset "UTF-8";
/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 99999;
  text-align: center;
  color: rgb(0, 0, 0);
}

@-webkit-keyframes bgAnime {
  0% {
    opacity: 1;
    z-index: 99999;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}

@keyframes bgAnime {
  0% {
    opacity: 1;
    z-index: 99999;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  #splash-logo {
    width: 700px;
  }
}

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
#splash::before {
  display: none;
  content: "";
}

/*bodyにappearクラスがついたら出現*/
body.loading #splash::before {
  opacity: 0;
  display: block;
  position: fixed;
  width: 200%;
  height: 100vh;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-120%) skewX(-26.5deg);
      -ms-transform: translateX(-120%) skewX(-26.5deg);
          transform: translateX(-120%) skewX(-26.5deg);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  background-color: rgb(255, 0, 0);
  /*伸びる背景色の設定*/
  -webkit-animation: PageInAnime 1s cubic-bezier(1, 0, 0, 1) 0.4s forwards, PageOutAnime 0.6s ease-in 1.6s forwards;
          animation: PageInAnime 1s cubic-bezier(1, 0, 0, 1) 0.4s forwards, PageOutAnime 0.6s ease-in 1.6s forwards;
  /* アニメーション開始からここまで1.4秒 */
  /* アニメーション開始からここまで2.2秒 */
}
@media screen and (max-width: 768px) {
  body.loading #splash::before {
    width: 300%;
  }
}

@-webkit-keyframes PageInAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-120%) skewX(-26.5deg);
            transform: translateX(-120%) skewX(-26.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-50%) skewX(-26.5deg);
            transform: translateX(-50%) skewX(-26.5deg);
  }
}

@keyframes PageInAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-120%) skewX(-26.5deg);
            transform: translateX(-120%) skewX(-26.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-50%) skewX(-26.5deg);
            transform: translateX(-50%) skewX(-26.5deg);
  }
}
@-webkit-keyframes PageOutAnime {
  0% {
    opacity: 1;
    -webkit-transform: translateX(-50%) skewX(-26.5deg);
            transform: translateX(-50%) skewX(-26.5deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(50%) skewX(-26.5deg);
            transform: translateX(50%) skewX(-26.5deg);
  }
}
@keyframes PageOutAnime {
  0% {
    opacity: 1;
    -webkit-transform: translateX(-50%) skewX(-26.5deg);
            transform: translateX(-50%) skewX(-26.5deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(50%) skewX(-26.5deg);
            transform: translateX(50%) skewX(-26.5deg);
  }
}
body.loading .splash-copy {
  opacity: 0;
  display: block;
  width: 960px;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /* キャッチコピーの設定 */
  -webkit-animation: CopyInAnime 1s cubic-bezier(1, 0, 0, 1) 0.4s forwards, CopyOutAnime 0.6s ease-in 1.6s forwards;
          animation: CopyInAnime 1s cubic-bezier(1, 0, 0, 1) 0.4s forwards, CopyOutAnime 0.6s ease-in 1.6s forwards;
  /* アニメーション開始からここまで1.4秒 */
  /* アニメーション開始からここまで2.2秒 */
}
body.loading .splash-copy img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  body.loading .splash-copy {
    width: 80%;
  }
}

@-webkit-keyframes CopyInAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes CopyInAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes CopyOutAnime {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-120%, -50%);
            transform: translate(-120%, -50%);
  }
}
@keyframes CopyOutAnime {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-120%, -50%);
            transform: translate(-120%, -50%);
  }
}
/*画面遷移の後現れるコンテンツ設定*/
body.loading > :not(#splash) {
  opacity: 0;
  -webkit-animation: disableScroll 0.1s ease-in 2.2s both;
          animation: disableScroll 0.1s ease-in 2.2s both;
  overflow: hidden;
}

@-webkit-keyframes disableScroll {
  0% {
    height: 0;
  }
  100% {
    height: auto;
  }
}

@keyframes disableScroll {
  0% {
    height: 0;
  }
  100% {
    height: auto;
  }
}
/*bodyにappearクラスがついたら出現*/
body.appear > :not(#splash) {
  opacity: 0;
  -webkit-animation: PageAnimeAppear 0.4s ease-in 0s forwards;
          animation: PageAnimeAppear 0.4s ease-in 0s forwards;
}

@-webkit-keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}