@charset "UTF-8";

/* ------------------------------------- /
/  ページロードアニメーション
/* ------------------------------------- */
/* フェードイン */
.load-check.fade-in {
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-in;
    transition-delay: 2200ms;
    opacity: 0;
}
.load-check.load-on.fade-in {
    opacity: 1;
}

/* フェードアップ */
.load-check.fade-up {
    transition-property: opacity, transform;
    transition-duration: 0.8s;
    transition-timing-function: ease-out;
    transition-delay: 400ms;
    opacity: 0;
    transform: translateY(30px);
}
.load-check.load-on.fade-up {
    opacity: 1;
    transform: translateY(0);
}

/* 右から左へフェード */
.load-check.fade-left {
    transition-property: opacity, transform;
    transition-duration: 0.8s;
    transition-timing-function: ease-out;
    transition-delay: 400ms;
    opacity: 0;
    transform: translateX(30px);
}
.load-check.load-on.fade-left {
    opacity: 1;
    transform: translateX(0);
}

/* 左から右へフェード */
.load-check.fade-right {
    transition-property: opacity, transform;
    transition-duration: 0.8s;
    transition-timing-function: ease-out;
    transition-delay: 400ms;
    opacity: 0;
    transform: translateX(-30px);
}
.load-check.load-on.fade-right {
    opacity: 1;
    transform: translateX(0);
}

/* 左から右へワイプ */
.load-check.wipe-right {
    transition-property: width;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    transition-delay: 400ms;
    width: 0;
    overflow: hidden;
}
.load-check.load-on.wipe-right {
    width: 100%;
}


/* 0.2秒ディレイ */
.load-check.load-on.delay-200 {
    transition-delay: calc(400ms + 200ms);
}
/* 0.4秒ディレイ */
.load-check.load-on.delay-400 {
    transition-delay: calc(400ms + 400ms);
}
/* 0.6秒ディレイ */
.load-check.load-on.delay-600 {
    transition-delay: calc(400ms + 600ms);
}
/* 0.8秒ディレイ */
.load-check.load-on.delay-800 {
    transition-delay: calc(400ms + 800ms);
}
/* 1.0秒ディレイ */
.load-check.load-on.delay-1000 {
    transition-delay: calc(400ms + 1000ms);
}

/* スマホはディレイ無効 */
@media (max-width: 600px) {
.load-check.load-on.delay-200,
.load-check.load-on.delay-400,
.load-check.load-on.delay-600,
.load-check.load-on.delay-800,
.load-check.load-on.delay-1000 {
    transition-delay: 200ms;
}
}

/* ------------------------------------- /
/  スクロールアニメーション
/* ------------------------------------- */
/* フェードイン */
.scroll-check.fade-in {
    transition-property: opacity;
    transition-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
}
.scroll-check.scroll-on.fade-in {
    transition-duration: 1.0s;
    transition-delay: 200ms;
    opacity: 1;
}

/* フェードアップ */
.scroll-check.fade-up {
    transition-property: opacity, transform;
    transition-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
    transform: translateY(40px);
}
.scroll-check.scroll-on.fade-up {
    transition-duration: 0.8s;
    transition-delay: 200ms;
    opacity: 1;
    transform: translateY(0);
}

/* 右から左へフェード */
.scroll-check.fade-left {
    transition-property: opacity, transform;
    transition-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
    transform: translateX(40px);
}
.scroll-check.scroll-on.fade-left {
    transition-duration: 0.8s;
    transition-delay: 200ms;
    opacity: 1;
    transform: translateX(0);
}

/* 左から右へフェード */
.scroll-check.fade-right {
    transition-property: opacity, transform;
    transition-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
    transform: translateX(-40px);
}
.scroll-check.scroll-on.fade-right {
    transition-duration: 0.8s;
    transition-delay: 200ms;
    opacity: 1;
    transform: translateX(0);
}

/* カラー */
/*
.scroll-check.color {
    transition-property: filter;
    transition-duration: 0s;
    transition-timing-function: ease-out;
    filter: grayscale(100%);
}
.scroll-check.scroll-on.color {
    transition-duration: 0.5s;
    transition-delay: 200ms;
    filter: grayscale(0);
}
*/
.scroll-check.color {
    opacity: 0;
    filter: grayscale(100%);
}
.scroll-check.scroll-on.color {
    animation-name: color_change;
    animation-delay: 0.2s;
    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes color_change {
    0% {
        opacity: 0;
        filter: grayscale(100%);
    }
    30% {
        opacity: 1;
        filter: grayscale(100%);
    }
    60% {
        opacity: 1;
        filter: grayscale(100%);
    }
    100% {
        opacity: 1;
        filter: grayscale(0);
    }
}


/* 0.2秒ディレイ */
.scroll-check.scroll-on.delay-200 {
    transition-delay: calc(200ms + 200ms);
}
/* 0.4秒ディレイ */
.scroll-check.scroll-on.delay-400 {
    transition-delay: calc(200ms + 400ms);
}
/* 0.6秒ディレイ */
.scroll-check.scroll-on.delay-600 {
    transition-delay: calc(200ms + 600ms);
}
/* 0.8秒ディレイ */
.scroll-check.scroll-on.delay-800 {
    transition-delay: calc(200ms + 800ms);
}
/* 1.0秒ディレイ */
.scroll-check.scroll-on.delay-1000 {
    transition-delay: calc(200ms + 1000ms);
}
/* 1.2秒ディレイ */
.scroll-check.scroll-on.delay-1200 {
    transition-delay: calc(200ms + 1200ms);
}
/* 1.4秒ディレイ */
.scroll-check.scroll-on.delay-1400 {
    transition-delay: calc(100ms + 1400ms);
}

/* スマホはディレイ無効 */
@media (max-width: 600px) {
.scroll-check.scroll-on.delay-200,
.scroll-check.scroll-on.delay-400,
.scroll-check.scroll-on.delay-600,
.scroll-check.scroll-on.delay-800,
.scroll-check.scroll-on.delay-1000,
.scroll-check.scroll-on.delay-1200,
.scroll-check.scroll-on.delay-1400 {
    transition-delay: 200ms;
}
}