@charset "utf-8";

/* ANIMATION CSS =============================== */
#text-slide .carousel-item {
    transition: transform .5s ease !important;
}

#omoi-text {
    mask: url(#omoi-mask-ani);
}

#omoi-mask-line {
    stroke-dasharray: 2600px;
    fill: none;
    stroke: #fff;
    stroke-width: 7px;
    animation: h-written 10s ease, fade-out 6s ease-in-out;
}

#chiiki-text {
    mask: url(#chiiki-mask-ani);
}

#chiiki-mask-line {
    stroke-dasharray: 2600px;
    fill: none;
    stroke: #fff;
    stroke-width: 7px;
    animation: h-written 10s ease, fade-out 6s ease-in-out;
}

#chishiki-text {
    mask: url(#chishiki-mask-ani);
}

#chishiki-mask-line {
    stroke-dasharray: 2600px;
    fill: none;
    stroke: #fff;
    stroke-width: 7px;
    animation: h-written 10s ease, fade-out 6s ease-in-out;
}

#kibou-text {
    mask: url(#kibou-mask-ani);
}

#kibou-mask-line {
    stroke-dasharray: 2600px;
    fill: none;
    stroke: #fff;
    stroke-width: 7px;
    animation: h-written 10s ease, fade-out 6s ease-in-out;
}

#kaisya-text {
    mask: url(#kaisya-mask-ani);
}

#kaisya-mask-line {
    stroke-dasharray: 2600px;
    fill: none;
    stroke: #fff;
    stroke-width: 7px;
    animation: h-written 10s ease, fade-out 6s ease-in-out;
}

#bunka-text {
    mask: url(#bunka-mask-ani);
}

#bunka-mask-line {
    stroke-dasharray: 2600px;
    fill: none;
    stroke: #fff;
    stroke-width: 7px;
    animation: h-written 10s ease, fade-out 6s ease-in-out;
}

#rekishi-text {
    mask: url(#rekishi-mask-ani);
}

#rekishi-mask-line {
    stroke-dasharray: 2600px;
    fill: none;
    stroke: #fff;
    stroke-width: 7px;
    animation: h-written 10s ease, fade-out 6s ease;
}

#kizuna-text {
    mask: url(#kizuna-mask-ani);
}

#kizuna-mask-line {
    stroke-dasharray: 2600px;
    fill: none;
    stroke: #fff;
    stroke-width: 7px;
    animation: h-written 10s ease, fade-out 6s ease;
}

@keyframes h-written {
    0% {
        stroke-dashoffset: 2600px;
    }

    100% {
        stroke-dashoffset: 0px;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}