@charset "UTF-8";

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


/* 0.2秒ディレイ */
.load-check.load-on.delay-200 {
    transition-delay: calc(200ms + 200ms);
}
/* 0.4秒ディレイ */
.load-check.load-on.delay-400 {
    transition-delay: calc(200ms + 400ms);
}
/* 0.6秒ディレイ */
.load-check.load-on.delay-600 {
    transition-delay: calc(200ms + 600ms);
}
/* 0.8秒ディレイ */
.load-check.load-on.delay-800 {
    transition-delay: calc(200ms + 800ms);
}
/* 1.0秒ディレイ */
.load-check.load-on.delay-1000 {
    transition-delay: calc(200ms + 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-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
}
.scroll-check.scroll-on.fade-in {
    transition-duration: 1.2s;
    transition-delay: 200ms;
    opacity: 1;
}

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

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

/* 右へフェード */
.scroll-check.fade-right {
    transition-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
    transform: translateX(-40px);
}
.scroll-check.scroll-on.fade-right {
    transition-duration: 1.2s;
    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);
}

@keyframes poyoyon {
    0%, 40% {
        transform: skew(0deg, 0deg);
    }
    5% {
        transform: skew(5deg, 5deg);
    }
    10% {
        transform: skew(-4deg, -4deg);
    }
    15% {
        transform: skew(3deg, 3deg);
    }
    20% {
        transform: skew(-2deg, -2deg);
    }
    25% {
        transform: skew(1deg, 1deg);
    }
    30% {
        transform: skew(-0.6deg, -0.6deg);
    }
    35% {
        transform: skew(0.3deg, 0.3deg);
    }
}
/* スマホはディレイ無効 */
@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;
}
}


@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}