@charset "utf-8";

.f-fade-in {
    opacity: 0;
    animation: fadeInAnimation .7s ease-in-out forwards;
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

@keyframes blur {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blur {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 右からふわっと現れる */
/* jQueryで追加・削除 */
.fadeInRight {
    -webkit-animation-name: fadeInRightAnime;
    animation-name: fadeInRightAnime;
    /*アニメーションの名前*/
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    /*アニメーションの時間を1.5秒に設定*/
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    /*アニメーション実行後、要素が表示されたままにする*/
    opacity: 1;
}

@-webkit-keyframes fadeInRightAnime {
    0% {
        opacity: 0;
        /*非表示*/
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
        /*100px分横にずれる*/
    }

    100% {
        opacity: 1;
        /*表示*/
        -webkit-transform: translateX(0);
        transform: translateX(0);
        /*元の位置*/
    }
}

@keyframes fadeInRightAnime {
    0% {
        opacity: 0;
        /*非表示*/
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
        /*100px分横にずれる*/
    }

    100% {
        opacity: 1;
        /*表示*/
        -webkit-transform: translateX(0);
        transform: translateX(0);
        /*元の位置*/
    }
}

.fadeInRightTrigger {
    opacity: 0;
    /*非表示*/
}

/* 左からふわっと現れる */
/* jQueryで追加・削除 */
.fadeInLeft {
    -webkit-animation-name: fadeInLeftAnime;
    animation-name: fadeInLeftAnime;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 1;
}

@-webkit-keyframes fadeInLeftAnime {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInLeftAnime {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.fadeInLeftTrigger {
    opacity: 0;
}

/* だんだんと現れる */
/* jQueryで追加・削除 */
.fadeIn-delay {
        -webkit-animation: fadeUpAnime forwards 1.3s cubic-bezier(.4,.4,0,1);
        animation: fadeUpAnime forwards 1.3s cubic-bezier(.4,.4,0,1);
}


    @-webkit-keyframes fadeInAnime {
        from {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateY(15px);
            transform: translateY(15px);
            /*縦方向に30pxずらす*/
        }
    
        to {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateY(0);
            transform: translateY(0);
            /*元の位置*/
        }
    }
    
    @keyframes fadeInAnime {
        from {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateY(15px);
            transform: translateY(15px);
            /*縦方向に100pxずらす*/
        }
    
        to {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateY(0);
            transform: translateY(0);
            /*元の位置*/
        }
}

.fadeInTrigger {
    opacity: 0;
    /*非表示*/
}

/* 下からふわっと現れる */
/* jQueryで追加、削除 */
.fadeUp {
    -webkit-animation: fadeUpAnime forwards 1s .1s cubic-bezier(.4,.4,0,1);
    animation: fadeUpAnime forwards 1s .1s cubic-bezier(.4,.4,0,1);
}

@-webkit-keyframes fadeUpAnime {
    from {
        opacity: 0;
        /*非表示*/
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
        /*縦方向に30pxずらす*/
    }

    to {
        opacity: 1;
        /*表示*/
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /*元の位置*/
    }
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        /*非表示*/
        -webkit-transform: translateY(15px);
        transform: translateY(20px);
        /*縦方向に100pxずらす*/
    }

    to {
        opacity: 1;
        /*表示*/
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /*元の位置*/
    }
}

.fadeUpTrigger {
    opacity: 0;
    /*非表示*/
}

/* 段々と表示 */

/* ここからスクロール促す */
.scrolldown1 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    right: 10vw;
    top: 34vh;
    /*全体の高さ*/
    height: 50px;
    z-index: 10;
}

/*Scrollテキストの描写*/
.scrolldown1 span {
    /*描画位置*/
    position: absolute;
    left: -15px;
    top: -15px;
    /*テキストの形状*/
    color: #eee;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

@media (min-width:860px) {

    .scrolldown1 {
        right: 10vw;
        top: 43vh;
    }
}

/* 線の描写 */
.scrolldown1::after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0;
    /*線の形状*/
    width: 1px;
    height: 30px;
    background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
    0% {
        height: 0;
        top: 0;
        opacity: 0;
    }

    30% {
        height: 30px;
        opacity: 1;
    }

    100% {
        height: 0;
        top: 50px;
        opacity: 0;
    }
}

/* ここからFV流れるテキスト */
@keyframes text-flowing {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}