/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}

.delay-time03{
animation-delay: 0.3s;
}

.delay-time04{
animation-delay: 0.4s;
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
    opacity: 0;
    margin-left: auto;
    width: 1200px;
    margin-right: auto;
}

/*==================================================
ふわっ
===================================*/

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    width: auto;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(300px);
  }

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

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  transform-origin:left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform:translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

img:hover {
	opacity: 0.5 ;
}

a { text-decoration:none; }