/* ページトップリンク
-ページの指定の高さを超えたら下から出現- */

#go-to-top a {
  transition:all 0.3s;
}

#go-to-top a:hover {
  transform:scale(1.1);
  text-decoration: none;
}

#go-to-top {
  position: fixed;
  z-index: 200;
	opacity: 0;
	transform: translateY(150px);
}


/*　上に上がる動き　*/
#go-to-top.UpMove{
	animation: UpAnimeGtt 0.5s forwards;
  
}

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


/*　下に下がる動き　*/

#go-to-top.DownMove{
	animation: DownAnimeGtt 0.5s forwards;
}
@keyframes DownAnimeGtt{
  from {
  	opacity: 1;
	  transform: translateY(0);
  }
  to {
  	opacity: 1;
	  transform: translateY(150px);
  }

}

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
    position: fixed;
    height: 100%;
    width: 100vw;
    z-index: 999;
    background:#fff;
    text-align:center;
    color:#333;
    margin: 0 calc(50% - 50vw);
    top: 0;
    left: 0;
    right: 0;
  }
  
  /* Loading画像中央配置　*/
  #splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Loading アイコンの大きさ設定　*/
  #splash_logo img {
    width:260px;
  }
  
  /* fadeUpをするアイコンの動き */
  .fadeUp{
  animation-name: fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  
  @keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(100px);
    }
  
    to {
    opacity: 1;
    transform: translateY(0);
    }
  }

/* その場でふわっと出現 */
.fadein-pic.fadeIn {
  animation-name:fadeInAnimePic;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
}
    
  @keyframes fadeInAnimePic{
    from {
      opacity: 0;
    }
    
    to {
      opacity: 1;
    }
  }


/* for PC */
@media screen and (min-width: 768px) {
  /* PC用のスタイルを指定する */

.sidebar {
  /*stickyで固定*/
  position: -webkit-sticky;/*Safari*/
	position: sticky;
  /*固定したい位置*/
	top: 30px;
}

#go-to-top {
  bottom: 50px;
  right: 50px;
}

/* グローバルナビゲーション */
/*==ふわっと出現させるためのCSS*/

/*　上に上がる動き　*/

header.UpMove{
	position: fixed;
  top: 0;
	animation: UpAnimeNav 0.5s forwards;
  width: 100%;
  background-color: rgba(250,250,250,0.8);
  height: 60px;
  z-index: 300;
}

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

/*　下に下がる動き　*/

header.DownMove{
	position: fixed;
	animation: DownAnimeNav 0.8s forwards;
  top: 0;
  width: 100%;
  background-color: rgba(250,250,250,0.8);
  height: 60px;
  z-index: 300;
}

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

}

/* for SP */
@media screen and (max-width: 767px) {
  #go-to-top {
    bottom:  10px;
    right: 10px;
  }
}