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


/* ================================================================================================================================
   COMMON SCROLL ANIMATION - クラス早見表
================================================================================================================================

【 基本仕様 】

    画面内に入ると .is-visible が自動付与され、一度だけアニメーションします。
    基本アニメーション + Delay + 補助アニメーションを組み合わせて使用できます。


--------------------------------------------------------------------------------------------------------------------------------
   基本アニメーション
--------------------------------------------------------------------------------------------------------------------------------

    CLASS                           動き

    .anim-fade-up                   下から上へ移動しながらフェードイン
    .anim-fade-down                 上から下へ移動しながらフェードイン
    .anim-fade                      その場でフェードイン
    .anim-left                      左から右へ移動しながらフェードイン
    .anim-right                     右から左へ移動しながらフェードイン
    .anim-scale                     少し小さい状態から拡大しながらフェードイン


--------------------------------------------------------------------------------------------------------------------------------
   補助アニメーション
--------------------------------------------------------------------------------------------------------------------------------

    CLASS                           動き                                      組み合わせ例

    .anim-float                     表示後、その場で上下に繰り返し             .anim-fade-up .anim-float


--------------------------------------------------------------------------------------------------------------------------------
   DELAY - アニメーション開始時間
--------------------------------------------------------------------------------------------------------------------------------

    CLASS                           DELAY               CLASS                           DELAY

    .anim-delay-1                   0.1s                .anim-delay-11                  1.1s
    .anim-delay-2                   0.2s                .anim-delay-12                  1.2s
    .anim-delay-3                   0.3s                .anim-delay-13                  1.3s
    .anim-delay-4                   0.4s                .anim-delay-14                  1.4s
    .anim-delay-5                   0.5s                .anim-delay-15                  1.5s
    .anim-delay-6                   0.6s                .anim-delay-16                  1.6s
    .anim-delay-7                   0.7s                .anim-delay-17                  1.7s
    .anim-delay-8                   0.8s                .anim-delay-18                  1.8s
    .anim-delay-9                   0.9s                .anim-delay-19                  1.9s
    .anim-delay-10                  1.0s                .anim-delay-20                  2.0s


--------------------------------------------------------------------------------------------------------------------------------
   使用例
--------------------------------------------------------------------------------------------------------------------------------

    ▼ 通常のフェードアップ

        <div class="anim-fade-up">
            CONTENT
        </div>


    ▼ 0.3秒遅れてフェードアップ

        <div class="anim-fade-up anim-delay-3">
            CONTENT
        </div>


    ▼ 左からフェードイン

        <div class="anim-left">
            CONTENT
        </div>


    ▼ フェードアップ後、その場で上下に動き続ける

        <div class="anim-fade-up anim-float">
            CONTENT
        </div>


    ▼ 複数要素を順番に表示

        <div class="anim-fade-up anim-delay-1">01</div>
        <div class="anim-fade-up anim-delay-2">02</div>
        <div class="anim-fade-up anim-delay-3">03</div>
        <div class="anim-fade-up anim-delay-4">04</div>


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



/* ========================================
   Fade Up
   下 → 上
======================================== */

.anim-fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.anim-fade-up.is-visible{
    opacity:1;
    transform:translateY(0);
}


/* ========================================
   Fade Down
   下 → 上
======================================== */

.anim-fade-down{
    opacity:0;
    transform:translateY(-40px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.anim-fade-down.is-visible{
    opacity:1;
    transform:translateY(0);
}


/* ========================================
   Fade
   その場でフェード
======================================== */

.anim-fade{
    opacity:0;
    transition:opacity .8s ease;
}

.anim-fade.is-visible{
    opacity:1;
}


/* ========================================
   Left
   左 → 右
======================================== */

.anim-left{
    opacity:0;
    transform:translateX(-50px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.anim-left.is-visible{
    opacity:1;
    transform:translateX(0);
}


/* ========================================
   Right
   右 → 左
======================================== */

.anim-right{
    opacity:0;
    transform:translateX(50px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.anim-right.is-visible{
    opacity:1;
    transform:translateX(0);
}


/* ========================================
   Scale
   小 → 大
======================================== */

.anim-scale{
    opacity:0;
    transform:scale(.94);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.anim-scale.is-visible{
    opacity:1;
    transform:scale(1);
}


/* ========================================
   Float
   表示後、その場で上下に繰り返す
   anim-fade-up 等と組み合わせて使用
======================================== */

.anim-float.is-visible{
    animation:anim-float 2.5s ease-in-out infinite;
}

@keyframes anim-float{

    0%,
    100%{
        translate:0 0;
    }

    50%{
        translate:0 -10px;
    }

}


/* ========================================
   Delay
======================================== */

.anim-delay-1{
    transition-delay:.1s;
}

.anim-delay-2{
    transition-delay:.2s;
}

.anim-delay-3{
    transition-delay:.3s;
}

.anim-delay-4{
    transition-delay:.4s;
}

.anim-delay-5{
    transition-delay:.5s;
}

.anim-delay-6{
    transition-delay:.6s;
}

.anim-delay-7{
    transition-delay:.7s;
}

.anim-delay-8{
    transition-delay:.8s;
}

.anim-delay-9{
    transition-delay:.9s;
}

.anim-delay-10{
    transition-delay:1s;
}

.anim-delay-11{
    transition-delay:1.1s;
}

.anim-delay-12{
    transition-delay:1.2s;
}

.anim-delay-13{
    transition-delay:1.3s;
}

.anim-delay-14{
    transition-delay:1.4s;
}

.anim-delay-15{
    transition-delay:1.5s;
}

.anim-delay-16{
    transition-delay:1.6s;
}

.anim-delay-17{
    transition-delay:1.7s;
}

.anim-delay-18{
    transition-delay:1.8s;
}

.anim-delay-19{
    transition-delay:1.9s;
}

.anim-delay-20{
    transition-delay:2s;
}