.mask-fade {
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
}

img.mask-fade {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 33%, black 66%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 33%, black 66%, black 100%);
    -webkit-mask-position: 0 0%;
    mask-position: 0 0%;
    transition:  mask-position 2s ease-out, -webkit-mask-position 2s ease-out;
}

img.show {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
}

h2.mask-fade, h3.mask-fade, h4.mask-fade, p.mask-fade, ul.mask-fade {
    -webkit-mask-image: linear-gradient(170deg, black 0%, black 40%, transparent 60%, transparent 100%);
    mask-image: linear-gradient(170deg, black 0%, black 40%, transparent 60%, transparent 100%);
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transition: transform 1s ease-out, mask-position 1s ease-out, -webkit-mask-position 1s ease-out;
    transform: translateY(2rem);
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}

h2.mask-fade.show, h3.mask-fade.show, h4.mask-fade.show, p.mask-fade.show, ul.mask-fade.show {
    animation-name: kr-default-fade-in;
}

@keyframes kr-default-fade-in {
    0% {
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
        transform: translateY(2rem);
    }
    99% {
        -webkit-mask-image: linear-gradient(170deg, black 0%, black 40%, transparent 60%, transparent 100%);
        mask-image: linear-gradient(170deg, black 0%, black 40%, transparent 60%, transparent 100%);
        -webkit-mask-position: 0 0%;
        mask-position: 0 0%;
        transform: translateY(0);
    }
    100% {
        -webkit-mask-image: linear-gradient(170deg, black 0%, black 100%);
        mask-image: linear-gradient(170deg, black 0%, black 100%);
        transform: translateY(0);
    }
}


/* 左側の要素 - fade */
.kr-background_inner, .kr-background_inner .kr-background_content {
    -webkit-mask-size: 100% 500%;
    mask-size: 100% 500%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 20%, black 40%, black 60%, transparent 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 20%, black 40%, black 60%, transparent 80%, transparent 100%);
    animation-name: kr-background-fade-in;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.kr-background_inner.fade-out, .kr-background_inner.fade-out .kr-background_content  {
    animation-name: kr-background-fade-out;
    animation-duration: 0.25s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes kr-background-fade-in {
    0%, 33% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    100% {
        -webkit-mask-position: 0 50%;
        mask-position: 0 50%;
    }
}

@keyframes kr-background-fade-out {
    0% {
        -webkit-mask-position: 0 50%;
        mask-position: 0 50%;
    }
    100% {
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
    }
}
/* 左側の要素 fade ends */

/* .kr-heading */

.kr-heading.mask-fade {
    overflow: hidden;
}

.kr-heading.mask-fade > .pseudo {
    transform: translateX(-100%);
    transition: 1s ease;
}

.kr-heading.show > .pseudo {
    transform: translateX(0);
}

.kr-heading.mask-fade span > .pseudo {
    left: 100%;
    transition: 1s ease;
}

.kr-heading.mask-fade.show span > .pseudo {
    left: 0;
}

/* scroll cta */
    .kr-scrollcta {
        position: relative;
        width: 2px;
        height: 50px;
        overflow: hidden;
        margin-top: 4rem;
    }
    .kr-scrollcta span {
        position: absolute;
        top: -24px;
        left: 0;
        width: 2px;
        height: 24px;
        background-color: #a98c4b;
        border-radius: 1px;
        animation-name: kr-scrollcta-drop;
        animation-timing-function: linear;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    .kr-scrollcta_02 {
        animation-delay: 1s;
    }
    @keyframes kr-scrollcta-drop {
        0% {
            top: -24px;
        }
        100% {
            top: 100%;
        }
    }
/* scroll cta ends */


/* LOADER */

#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    color: #a98c4b;
    font-size: 1rem;
    font-family: "Zen Old Mincho", "PT Serif", serif;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 33%, black 66%, black 100%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 33%, black 66%, black 100%);
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transition:  mask-position 1s ease-out, -webkit-mask-position 1s ease-out;
}

#loader.fadeaway {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    pointer-events: none;
}

#loading-text {
    font-family: monospace;
}

#loader.fadeaway #loading-text {
    opacity: 0;
    transition:  opacity 0.25s ease-out;
}