@charset "UTF-8";

/*
アニメーションを付与したい要素にtriggerクラス、使用したいアニメーションクラスを指定してください。
javascriptにて画面スクロールを監視し、その要素が画面下部から40%の位置に到達した際にアニメーションが実行されます。
アニメーションの数値について変更したい場合は下記「ユーティリティ」を参照してください。
*/


/*
--------------------------------------------
アニメーションクラス
triggerクラスとともに下記に記載するクラスをアニメーションさせたい要素に追加してください。
--------------------------------------------
*/

/* 
 class:fade-in
 浮き上がるように表示される
*/

.fade-in.trigger {
    transition: 1s;
    opacity: 0;
}
.fade-in.trigger.move {
    opacity: 1;
}

/* class:fade-in-up
 浮き上がりながら下から上に移動して表示される
 */
.fade-in-up.trigger {
    transition: 1s;
    opacity: 0;
    transform: translateY(10px);
}
.fade-in-up.trigger.move {
    opacity: 1;
    transform: translateY(0px);
}

/* class:fade-in-down
 浮き上がりながら上から下に移動して表示される
*/
.fade-in-down.trigger {
    transition: 1s;
    opacity: 0;
    transform: translateY(-10px);
}
.fade-in-down.trigger.move {
    opacity: 1;
    transform: translateY(0px);
}

/* class:slide-in-left
 画面外からスライドして表示（左から右）
*/
.slide-in-left.trigger {
    transition: 1s;
    transform: translateX(-120%);
}
.slide-in-left.trigger.move {
    transform: translateX(0%);
}
.fade-in-left.trigger {
    transition: 1s;
    opacity: 0;
    transform: translateX(-10px);
}
.fade-in-left.trigger.move {
    opacity: 1;
    transform: translateX(0%);
} 

/* class:slide-in-right
 画面外からスライドして表示（右から左）
*/
.slide-in-right.trigger {
    transition: 1s;
    transform: translateX(120%);
}
.slide-in-right.trigger.move {
    transform: translateX(0%);
}
.fade-in-right.trigger {
    transition: 1s;
    opacity: 0;
    transform: translateX(10px);
}
.fade-in-right.trigger.move {
    opacity: 1;
    transform: translateX(0%); 
} 

/* class:step-fade-in
 複数のli要素を順繰りに表示する(挙動はfade-inと同様)
 ※ul要素に本クラスを追加し、先頭のli要素にtriggerクラスを追加することで、内側のli要素が順に表示される。(最大10個)
*/
ul.step-fade-in li {
    opacity: 0;
}
ul.step-fade-in li:nth-child(1) {
    transition: 1s;
}
ul.step-fade-in li:nth-child(2) {
    transition: 1s 0.2s;
}
ul.step-fade-in li:nth-child(3) {
    transition: 1s 0.4s;
}
ul.step-fade-in li:nth-child(4) {
    transition: 1s 0.6s;
}
ul.step-fade-in li:nth-child(5) {
    transition: 1s 0.8s;
}
ul.step-fade-in li:nth-child(6) {
    transition: 1s 1.0s;
}
ul.step-fade-in li:nth-child(7) {
    transition: 1s 2.4s;
}
ul.step-fade-in li:nth-child(8) {
    transition: 1s 2.8s;
}
ul.step-fade-in li:nth-child(9) {
    transition: 1s 3.2s;
}
ul.step-fade-in li:nth-child(10) {
    transition: 1s 3.6s;
}

.step-fade-in li.trigger.move,
.step-fade-in li.trigger.move ~ li {
    opacity: 1;
}

/*
// --------------------------------------------
// ユーティリティ
// --------------------------------------------
*/

/*
class: per**

デバイス画面下部から何%まで、要素がスクロールされた場合にアニメーションを開始するかを設定する。
通常指定しない場合、下部から40%の位置にスクロールされた場合にアニメーションを開始する。
CSSは特に存在せずJavascriptのみで使用するため、本ファイルでのstyle指定はなし。
設定可能な値：per20, per60
*/

/*
class:.transition-***ms
指定した要素のアニメーション時間を***ミリ秒に変更する。
通常指定しない場合、1000msでアニメーションする。
*/
.transition-200ms.trigger {
	transition: 0.2s;
}

.transition-600ms.trigger {
	transition: 0.6s;
}

.transition-1600ms.trigger {
	transition: 1.6s;
}

/*
class:transition-delay-***ms
指定した要素を***ミリ秒遅らせてアニメーション開始させる。
ただし、いくつかの要素を順にアニメーションさせる場合、要素の上端を揃える必要があるため、margin等で別途調整が必要。
transition-***ms、step-fade-inとは併用不可。
*/

.transition-delay-200ms.trigger {
	transition: 1s 0.2s;
}

.transition-delay-400ms.trigger {
	transition: 1s 0.4s;
}

.transition-delay-1000ms.trigger {
	transition: 1s 1.0s;
}

/*
class: translateX-***per-[plus/minus] 
slide-in系のX軸方向の初期位置（スライド幅）を調整する。
***%の移動とする。
*/

.translateX-200per-plus.trigger {
	transform: translateX(200%);
}

.translateX-500per-plus.trigger {
	transform: translateX(500%);
}

.translateX-200per-minus.trigger {
	transform: translateX(-200%);
}

/*
class: translateY-***per-[plus/minus] 
fade-in-downなどのY軸方向の初期位置（スライド幅）を調整する。
***%の移動とする。
*/

.translateY-200per-plus.trigger {
	transform: translateY(200%);
}

.translateY-200per-minus.trigger {
	transform: translateY(-200%);
}