@charset "utf-8";

/* フェードイン(初期値) */
.js-fadeUp {
    opacity: 0;
    /*  最初は非表示 */
    transform: translateY(30px);
    /* 下に30pxの位置から */
    transition: opacity .8s, transform .8s;
    /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translateY(0);
    /* 30px上に移動する */
    transition-delay: .5s;
    /* フェード開始を0.5秒遅らせる */
}

/* フェードイン2(初期値) */
.js-fadeUp2 {
    opacity: 0;
    /*  最初は非表示 */
    transform: translateY(30px);
    /* 下に30pxの位置から */
    transition: opacity .8s, transform .8s;
    /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン2(スクロールした後) */
.js-fadeUp2.is-inview {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translateY(0);
    /* 30px上に移動する */
    transition-delay: 1.2s;
    /* フェード開始を1.2秒遅らせる */
}


/* フェードイン(初期値) */
.js-fadeLeft {
    opacity: 0;
    /* 最初は非表示 */
    transform: translatex(-30px);
    /* 下に30pxの位置から */
    transition: opacity .8s, transform .8s;
    /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeLeft.is-inview {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translatex(0);
    /* 30px上に移動する */
    transition-delay: .5s;
    /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-fadeRight {
    opacity: 0;
    /* 最初は非表示 */
    transform: translatex(30px);
    /* 下に30pxの位置から */
    transition: opacity .8s, transform .8s;
    /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeRight.is-inview {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translatex(0);
    /* 30px上に移動する */
    transition-delay: .5s;
    /* フェード開始を0.5秒遅らせる */
}

.fadeIn {
    opacity: 0;
    transition: 5s;
}

.fadeIn.is-inview {
    opacity: 1;
}


/* フォントカラー(初期値) */
.js-color {
    color: blue;
    /* 最初は青色 */
    font-size: 15px;
    /* 最初は15px */
    transition: color .8s, font-size .8s;
    /* 色の変化を0.8秒かける */
}

/* フォントカラー変更(スクロールした後) */
.js-color.is-inview {
    color: green;
    /* 表示領域に入ったら色を変える */
    font-size: 25px;
    /* 表示領域に入ったら25px */
    transition-delay: .5s;
    /* 開始を0.5秒遅らせる */
}