@charset "utf-8";

/* ==============
header
============== */
/*  下から */
.load--fadeUp--header {
    animation-name: load--fadeUp--header;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes load--fadeUp--header {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============
article__header
============== */
/* mainVisual その場で */
.load--fadeIn--mainVisual {
    animation-name: load--fadeIn--mainVisual;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 0.8s;
    opacity: 0;
}

@keyframes load--fadeIn--mainVisual {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* mainCopy 下から */
.load--fadeUp--mainCopy {
    animation-name: load--fadeUp--mainCopy;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
    opacity: 0;
}

@keyframes load--fadeUp--mainCopy {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* scrollDown 下から */
.load--fadeUp--scrollDown {
    animation-name: load--fadeUp--scrollDown;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 1.4s;
    opacity: 0;
}

@keyframes load--fadeUp--scrollDown {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* scrollDown カタカタ */
.load--ticktac {
    animation-name: load--ticktac--scrollDown;
    animation-duration: 4s;
    animation-delay: 2.4;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 1;
}

@keyframes load--ticktac--scrollDown {
    0% {
        transform: rotate(0deg);
    }

    21% {
        transform: rotate(0deg);
    }

    23% {
        transform: rotate(-2deg);
    }

    25% {
        transform: rotate(2deg);
    }

    27% {
        transform: rotate(-2deg);
    }

    29% {
        transform: rotate(2deg);
    }

    31% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* scroll */
/* ==============
top
============== */
/* 下から */
.scroll--fadeUp {
    animation-name: scroll--fadeUp;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes scroll--fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============
line up
============== */