@charset "UTF-8";
/* CSS Document */

 


/*----
.sa　をふわっと表示したい要素全てに追加
		.sa–lr　左から右にフェードイン
		.sa–rl　右から左にフェードイン
		.sa–up　下から上にフェードイン
		.sa–down　上から下にフェードイン
		.sa–scaleUp　縮小した状態から拡大しながらフェードイン
		.sa–scaleDown　拡大した状態から縮小しながらフェードイン
		.sa–rotateL　左に回転しながらフェードイン
		.sa–rotateR　右に回転しながらフェードイン


		表示タイミングの基準の要素を指定
			基準：ID
			基準位置を変更したい要素：data-sa_trigger

		表示のタイミングを位置でずらす
			data-sa_margin="数値（単位はいらない）"
			指定がない場合は300px

		表示のタイミングを時間でずらす
			data-sa_delay
---- */
.sa {
  opacity: 0;
  transition: all .5s ease;
}
.sa2 {
  opacity: 0;
  transition: all .2s ease;
}
.sa.show {
  opacity: 1;
  transform: none;
}

.sa--lr {
  transform: translate(-300px, 0);
}

.sa--rl {
  transform: translate(300px, 0);
}

.sa--up {
  transform: translate(0, 200px);
}

.sa--down {
  transform: translate(0, -200px);
}

.sa--scaleUp {
  transform: scale(.5);
}

.sa--scaleDown {
  transform: scale(1.5);
}

.sa--rotateL {
  transform: rotate(180deg);
}

.sa--rotateR {
  transform: rotate(-180deg);
}
.sa--fade {
	opacity: 0;
}