@charset "UTF-8";

/* ------------------------------------- /
/  ページロードアニメーション
/* ------------------------------------- */
/* フェードイン */
.load-check.fade-in {
    transition-property: opacity;
    transition-duration: 0.8s;
    transition-timing-function: ease-in;
    transition-delay: 400ms;
    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);
}


/* 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);
}

/* 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;
}
}