@charset "utf-8";


.flex-fadeUp{
	display:flex;
	flex-wrap: wrap;
}

.box-fadeUp{
	width: 220px;
	color: #fff;
	box-sizing:border-box;
    list-style: none;
}



.flex-fadeUp2{
	flex-wrap: wrap;
}

.box-fadeUp2{
	width: 220px;
	color: #fff;
	box-sizing:border-box;
    list-style: none;
}


/*==================================================
シャドウ
===================================*/
.shadow {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .3);
}


/*==================================================
要素が揺れる
===================================*/


.fluffy {
  animation: fluffy1 2s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}



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


/* fadeUp */

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

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

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


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


/*===================================*/


/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}