/* アニメーションのCSS */

/* フェードイン */
.fadein{
  opacity: 0;
  transform : translate(0, -50px);
  transition : all 1500ms;
}
.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
  transition : all 1500ms;
}

/* 円上のリンク一覧のフェードインアニメーション */
.fadein1 img{
  opacity: 0;
  transform : translate(0, 50px);
  transition : 1500ms;
}
.fadein2 img{
  opacity: 0;
  transform : translate(-50px, 50px);
  transition : 1500ms;
}
.fadein3 img{
  opacity: 0;
  transform : translate(-50px, -50px);
  transition : 1500ms;
}
.fadein4 img{
  opacity: 0;
  transform : translate(0, -50px);
  transition : 1500ms;
}
.fadein5 img{
  opacity: 0;
  transform : translate(50px, -50px);
  transition : 1500ms;
}
.fadein6 img{
  opacity: 0;
  transform : translate(50px, 50px);
  transition : 1500ms;
}

.fadein1.scrollin img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1500ms;
  transition-property: transform,opacity;
}
.fadein2.scrollin img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1500ms;
  transition-delay: .2s;
  transition-property: transform,opacity;
}
.fadein3.scrollin img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1500ms;
  transition-delay: .4s;
  transition-property: transform,opacity;
}
.fadein4.scrollin img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1500ms;
  transition-delay: .6s;
  transition-property: transform,opacity;
}
.fadein5.scrollin img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1500ms;
  transition-delay: .8s;
  transition-property: transform,opacity;
}
.fadein6.scrollin img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1500ms;
  transition-delay: 1s;
  transition-property: transform,opacity;
}

/* ハンバーガーメニュー内部のフェードインアニメーション */
.menu-fadein1 img{
  opacity: 0;
  transform : translate(0, 50px);
  transition : 500ms;
}
.menu-fadein2 img{
  opacity: 0;
  transform : translate(-50px, 50px);
  transition : 500ms;
}
.menu-fadein3 img{
  opacity: 0;
  transform : translate(-50px, -50px);
  transition : 500ms;
}
.menu-fadein4 img{
  opacity: 0;
  transform : translate(0, -50px);
  transition : 500ms;
}
.menu-fadein5 img{
  opacity: 0;
  transform : translate(50px, -50px);
  transition : 500ms;
}
.menu-fadein6 img{
  opacity: 0;
  transform : translate(50px, 50px);
  transition : 500ms;
}

body.menu-open #menu .menu-fadein1 img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1000ms;
  transition-delay: .2s;
}
body.menu-open #menu .menu-fadein2 img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1000ms;
  transition-delay: .3s;
}
body.menu-open #menu .menu-fadein3 img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1000ms;
  transition-delay: .4s;
}
body.menu-open #menu .menu-fadein4 img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1000ms;
  transition-delay: .5s;
}
body.menu-open #menu .menu-fadein5 img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1000ms;
  transition-delay: .6s;
}
body.menu-open #menu .menu-fadein6 img{
  opacity: 1;
  transform: translate(0, 0);
  transition : 1000ms;
  transition-delay: .7s;
}



/* SCROLLの上下の動き */
@keyframes vertical {
  0% { transform:translateY(-10px); }
100% { transform:translateY(  0px); }
}