/* ヘッダーを浮かせる */
.l-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  animation: DownAnime 0.5s forwards;
}

/* ヘッダーの次の要素の上部に余白を設定（PC） */
.l-header+* {
  margin-top: 100px;
}

/* ヘッダーの次の要素の上部に余白を設定（Tab以下） 
@media screen and (max-width:960px) {
  .l-header+* {
    margin-top: 48px;
  }
}*/

/* 上に上がる動き */
.l-header.UpMove {
  animation: UpAnime 0.5s forwards;
}

/* アニメーションを定義 */
@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

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

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