@charset "utf-8";

/*========= 上部固定させるためのCSS ===============*/

#header{
  position: fixed;/*fixedを設定して固定*/
  top: 0px;
  left: 0px;
  height: 60px;/*高さ指定*/
  width:100%;/*横幅指定*/
  z-index: 999;/*最前面へ*/
}

/*fixedでブロックがなくなるのではじめの要素のトップに余白を持たせる*/
section#area-1{
  padding-top:100px;
}

/*==ふわっと出現させるためのCSS*/

/*　上に上がる動き　*/

#header.UpMove{
  position: fixed;
  width:100%;
  animation: UpAnime 0.5s forwards;
}

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

/*　下に下がる動き　*/

#header.DownMove{
  position: fixed;
  width:100%;
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}