@charset "UTF-8";

#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #1955A6;
  z-index: 9999999;
  text-align: center;
  color: #fff; 
}
#splash #splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

#splash #splash-logo img {
      width: 250px;
      height: auto;
}


/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbgUp, .splashbgDown {
  display: none; 
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbgUp,
body.appear .splashbgDown {
  display: block; 
}

/*上に消えるエリア*/
body.appear .splashbgUp {
  animation-name: PageAnime;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  bottom: 50%;
  left: 0;
  transform: scaleY(1);
  background-color: #1955A6;
  /*伸びる背景色の設定*/ 
}

@keyframes PageAnime {
  0% {
    transform-origin: top;
    transform: scaleY(1); }
  100% {
    transform-origin: top;
    transform: scaleY(0); } 
}

/*下に消えるエリア*/
body.appear .splashbgDown {
  animation-name: PageAnime2;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 50%;
  left: 0;
  transform: scaleY(1);
  background-color: #1955A6;
  /*伸びる背景色の設定*/
}

@keyframes PageAnime2 {
  0% {
    transform-origin: bottom;
    transform: scaleY(1); }
  100% {
    transform-origin: bottom;
    transform: scaleY(0); } 
}

/*画面遷移の後現れるコンテンツ設定*/
#main_contents {
  opacity: 0;
  position: relative;
  z-index: 1; 
}

/*bodyにappearクラスがついたら出現*/
body.appear #main_contents {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  opacity: 0; }

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

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0; 
}

/* 4-1 ふわっ（下から） */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; 
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } 
}