@charset "UTF-8";

:root {
    --load-duration: 0.8s;
    --load-delay: 400ms;
    --scroll-duration: 400ms;
    --scroll-delay: 200ms;
}

/* ------------------------------------- /
/  ページロードアニメーション
/* ------------------------------------- */
.load-check {
    animation-duration: var(--load-duration);
    animation-timing-function: ease-out;
    animation-delay: var(--load-delay);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    &.fade-in {
        opacity: 0;
        &.load-on {
            animation-name: load-check-fade-in;
        }
    }
    &.fade-up {
        transform: translateY(20px);
        opacity: 0;
        &.load-on {
            animation-name: load-check-fade-up;
        }
    }
    &.delay-100 { animation-delay: calc(var(--scroll-delay) + 100ms); }
    &.delay-200 { animation-delay: calc(var(--scroll-delay) + 200ms); }
    &.delay-300 { animation-delay: calc(var(--scroll-delay) + 300ms); }
    &.delay-400 { animation-delay: calc(var(--scroll-delay) + 400ms); }
    &.delay-500 { animation-delay: calc(var(--scroll-delay) + 500ms); }
    &.delay-600 { animation-delay: calc(var(--scroll-delay) + 600ms); }
    &.delay-700 { animation-delay: calc(var(--scroll-delay) + 700ms); }
    &.delay-800 { animation-delay: calc(var(--scroll-delay) + 800ms); }
    &.delay-900 { animation-delay: calc(var(--scroll-delay) + 900ms); }
    &.delay-1000 { animation-delay: calc(var(--scroll-delay) + 1000ms); }
}

/* スマホはディレイ無効 */
@media (max-width: 600px) {
.load-check {
    &.delay-100,
    &.delay-200,
    &.delay-300,
    &.delay-400,
    &.delay-500,
    &.delay-600,
    &.delay-700,
    &.delay-800,
    &.delay-900,
    &.delay-1000 {
        animation-delay: var(--scroll-delay);
    }
}
}
/* フェードイン */
@keyframes load-check-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* フェードアップ */
@keyframes load-check-fade-up {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* ------------------------------------- /
/  スクロールアニメーション
/* ------------------------------------- */
.scroll-check {
    animation-duration: var(--scroll-duration);
    animation-timing-function: ease-out;
    animation-delay: var(--scroll-delay);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    /* フェードイン */
    &.fade-in {
        opacity: 0;
        &.scroll-on {
            animation-name: scroll-check-fade-in;
        }
    }
    /* フェードアップ */
    &.fade-up {
        opacity: 0;
        transform: translateY(40px);
        &.scroll-on {
            animation-name: scroll-check-fade-up;
        }
    }
    /* ディレイ */
    &.delay-100 { animation-delay: calc(var(--scroll-delay) + 100ms); }
    &.delay-200 { animation-delay: calc(var(--scroll-delay) + 200ms); }
    &.delay-300 { animation-delay: calc(var(--scroll-delay) + 300ms); }
    &.delay-400 { animation-delay: calc(var(--scroll-delay) + 400ms); }
    &.delay-500 { animation-delay: calc(var(--scroll-delay) + 500ms); }
    &.delay-600 { animation-delay: calc(var(--scroll-delay) + 600ms); }
    &.delay-700 { animation-delay: calc(var(--scroll-delay) + 700ms); }
    &.delay-800 { animation-delay: calc(var(--scroll-delay) + 800ms); }
    &.delay-900 { animation-delay: calc(var(--scroll-delay) + 900ms); }
    &.delay-1000 { animation-delay: calc(var(--scroll-delay) + 1000ms); }

}

/* スマホはディレイ無効 */
@media (max-width: 600px) {
.scroll-check {
    &.delay-100,
    &.delay-200,
    &.delay-300,
    &.delay-400,
    &.delay-500,
    &.delay-600,
    &.delay-700,
    &.delay-800,
    &.delay-900,
    &.delay-1000 {
        animation-delay: var(--scroll-delay);
    }
}
}

/* フェードイン */
@keyframes scroll-check-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* フェードアップ */
@keyframes scroll-check-fade-up {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}