@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

.wrapper{
	overflow: hidden;
}


.box{
	width: 520px;
	padding: 20px;
	margin:0 20px 20px 0;
	background: #666;
	color: #fff;
	box-sizing:border-box;
}



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


/* fadeUp */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.1s;
animation-fill-mode:forwards;
opacity:0;
}

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

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


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}