@charset "utf-8";
/*========= LoadingアニメーションのためのCSS ===============*/
/* Loading背景画面設定　*/
#loadingAnima {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color:#A0DCA0;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#loading_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#loading_logo img {
  width:460px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
  animation-name: fadeUpAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}

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

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


/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/

body{
  background:#A0DCA0;/*遷移アニメーションと同じ色を指定*/
}

body.appear{
  background:#fff;/*画面を開いた後の背景色を指定*/
}

.splashbg{
  display: none;
  content: "";
  position:fixed;
  transform: scale(100);
  background-color: #A0DCA0;/*伸びる背景色の設定*/
  z-index: 999;
  /*丸のスタートの形状*/
  top:calc(50% - 1rem);/*50%から円の半径を引いた値*/
  left:calc(50% - 1rem);/*50%から円の半径を引いた値*/
  width: 2rem;
  height: 2rem;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
  display: block;
  border-radius: 50%;	
  animation-name:PageAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
}

@keyframes PageAnime{
  0% {/*丸のスタート位置と形状*/
    transform: scale(100);

  }
  100% {/*丸の終了位置と形状*/
    transform: scale(0);
    display: none;/*終了時は消える*/
  }
}

/*画面遷移の後現れるコンテンツ設定*/
#com-container{
  opacity: 0;/*はじめは透過0に*/
}

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

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