:root {
     /* アニメーション時間 */
    --animation-duration: 1600ms;
    --animation-duration-quick: 300ms;
    --animation-duration-text-line: 1000ms;
    /* 遅延間隔 */
    --delay-first: 600ms;
    --delay-interval: 300ms;
    --delay-line: 30ms;
    /* 移動距離 */
    --slide-distance-left: -50px;
    --slide-distance-up: 30px;
    --slide-distance-down: -30px;
    --slide-distance-up-line: 0px;
    /* about-section 用 */
    --about-section-fade-in-duration: 1600ms;
    --about-section-fade-in-delay: 500ms;
}

/* フェードインするアニメーション */
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* 左からフェードインするアニメーション */
@keyframes fade-in-right {
    0% {
        opacity: 0;
        transform: translateX(var(--slide-distance-left));
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* 下から浮かび上がるアニメーション */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(var(--slide-distance-up));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 上から浮かび上がるアニメーション */
@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(var(--slide-distance-down));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 文字がフェードインするアニメーション */
@keyframes fade-in-up-line {
    0% {
        opacity: 0;
        transform: translateY(var(--slide-distance-up-line));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* is-hidden が取り除かれた後の、アニメーション開始前の状態  */
[data-animation="fade-in"] {
    opacity: 0;
}
[data-animation="fade-in-up"] {
    opacity: 0;
    transform: translateY(var(--slide-distance-up));
}
[data-animation="fade-in-down"] {
    opacity: 0;
    transform: translateY(var(--slide-distance-down));
}
[data-animation="fade-in-right"] {
    opacity: 0;
    transform: translateX(var(--slide-distance-left));
}

/* 一般的なアニメーションの設定*/
[data-animation="fade-in"].is-animated {
    animation: fade-in var(--animation-duration) ease-out forwards;
}
.button.is-animated[data-animation="fade-in"] {
    animation: fade-in var(--animation-duration-quick) ease-out forwards;/* ボタンはちょっと早めにしたい */
}

[data-animation="fade-in-up"].is-animated {
    animation: fade-in-up var(--animation-duration) ease-out forwards;
}

[data-animation="fade-in-down"].is-animated {
    animation: fade-in-down var(--animation-duration) ease-out forwards;
}

[data-animation="fade-in-right"].is-animated {
    animation: fade-in-right var(--animation-duration) ease-out forwards;
}

/* 個別設定 */
/* top-hero-section */
.top.text {
    animation: fade-in-right var(--animation-duration) ease-out forwards;
    animation-delay: var(--delay-first);
    opacity: 0;
}
.ytb-container iframe {
    animation: fade-in var(--animation-duration) ease-out forwards;
    animation-delay: calc(var(--delay-first) + var(--delay-interval)*3);
    opacity: 0;
}
.hero-footer-text-container .subtitle {
    animation: fade-in-up var(--animation-duration) ease-out forwards;
    animation-delay: calc(var(--delay-first) + var(--delay-interval)*5);
    opacity: 0;
}
.hero-footer-text-container .title,.titlekana {
    animation: fade-in-up var(--animation-duration) ease-out forwards;
    animation-delay: calc(var(--delay-first) + var(--delay-interval)*6);
    opacity: 0;
}
.hero-footer-text-container .button {
    animation: fade-in var(--animation-duration-quick) ease-out forwards;
    animation-delay: calc(var(--delay-first) + var(--delay-interval)*10);
    opacity: 0;
}

/* about-section */
.about-section.is-animated[data-animation="fade-in"] {
    animation: fade-in var(--about-section-fade-in-duration) ease-out forwards;
    animation-delay: var(--about-section-fade-in-delay);
}
.about-description.is-animated .line {
    animation: fade-in-up-line var(--animation-duration-text-line) ease-out forwards;
}

/* hero-video-section */
.video-background.is-animated[data-animation="vimeo-play"] {
    animation: fade-in var(--animation-duration-quick) ease-out forwards;
    animation-delay: 0;
}