@charset "utf-8";

/*▼元のアニメーション▼*/
.animate {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate.from-bottom {
    transform: translateY(100px);
    display: block;
}

.animate.scale-up {
    display: block;
    height: auto;
    transform: scale(0.8);
}

.animate.fade-in {
    display: block;
    height: auto;
    opacity: 0;
    transform: none;
    transition: opacity 2s ease-out;
    /* 2秒でフェードイン */
}

.animate.visible {
    opacity: 1;
    transform: none;
    /* 透明度のみを変化させる */
}

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

.fadeUp {
    animation-name: fadeUpAnime;/*アニメーションの定義名*/
    animation-duration:1s;/*アニメーション変化時間 ※デフォルト*/
    animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
    opacity:0;
    display: block;
    text-align: center;

}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

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

/*==================================================
アニメーション設定
===================================*/

/* アニメーション１回分の時間の長さを指定するCSS*/

.change-time05{
  animation-duration: 0.5s;
}

.change-time1{
  animation-duration: 1s;
}

.change-time15{
  animation-duration: 1.5s;
}

.change-time2{
 animation-duration: 2s;
}

.change-time25{
animation-duration: 2.5s;
}


/* 動きをループさせるCSS*/

.count2{
animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{
 animation-iteration-count: infinite;/*無限ループ*/
}


/* アニメーションの開始を遅らせるCSS*/

.delay-time05{
animation-delay: 0.5s;
}

.delay-time1{
animation-delay: 1s;
}

.delay-time15{
animation-delay: 1.5s;
}

.delay-time2{
animation-delay: 2s;
}

.delay-time25{
  animation-delay: 2.5s;
}


/* アニメーションの進行具合を操作するCSS*/

.timing-ease{
animation-timing-function:ease;
}

.timing-ease-in{
animation-timing-function:ease-in;
}

.timing-ease-out{
animation-timing-function:ease-out;
}

.timing-ease-in-out{
animation-timing-function:ease-in-out;	
}

.timing-linear{
animation-timing-function:linear;	
}

.timing-steps{
animation-timing-function:steps(4, end);	
}

.timing-cubic-bezier{
animation-timing-function:cubic-bezier(.17,.67,.67,.51);	
}

/*==================================================
アニメーションをまとめて設定する
===================================*/

.fadeDown{
animation: fadeDownAnime 1s ease 1.5s forwards;/*アニメーションの定義名、アニメーション１回分の時間の長さ、アニメーションの進行具合、アニメーションの開始を遅らせる、アニメーションの開始と終了時の状態を指定をまとめて設定*/
opacity:0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

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


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

/* .wrapper{
	overflow: hidden;
}

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

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