@charset "utf-8";

.block .textWrap {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    z-index: 1;
}

.block .textItem01,
.block .textItem02 {
    position: absolute;
    content: attr(data-text);
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    -webkit-clip-path: polygon(0 0, 0 0, -5% 100%, 0% 100%);
    clip-path: polygon(0 0, 0 0, -5% 100%, 0% 100%);
}

.block .textItem01 {
    color: #4FB3AF;
}

.block .textItem02 {
    color: #023130;
}

.block .is-active .textItem01,
.block .is-active .textItem02 {
    opacity: 0;
    -webkit-clip-path: polygon(0 0, 105% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 105% 0, 100% 100%, 0% 100%);
    transition: opacity 0s linear, -webkit-clip-path 1s cubic-bezier(0.42, 0.06, 0.1, 1);
    transition: clip-path 1s cubic-bezier(0.42, 0.06, 0.1, 1), opacity 0s linear;
    transition: clip-path 1s cubic-bezier(0.42, 0.06, 0.1, 1), opacity 0s linear, -webkit-clip-path 1s cubic-bezier(0.42, 0.06, 0.1, 1);
}

.block .is-active .textWrap:nth-child(1) .textItem01 {
    transition-delay: 0s, 1s;
}

.block .is-active .textWrap:nth-child(1) .textItem02 {
    transition-delay: 0.1s, 1.1s;
}

.block .is-active .textWrap:nth-child(1) .textItem03 {
    transition-delay: 0.25s;
}

.block .is-active .textWrap:nth-child(2) .textItem01 {
    transition-delay: 0.12s, 1.12s;
}

.block .is-active .textWrap:nth-child(2) .textItem02 {
    transition-delay: 0.22s, 1.22s;
}

.block .is-active .textWrap:nth-child(2) .textItem03 {
    transition-delay: 0.37s;
}

.block .is-active .textWrap:nth-child(3) .textItem01 {
    transition-delay: 0.24s, 1.24s;
}

.block .is-active .textWrap:nth-child(3) .textItem02 {
    transition-delay: 0.34s, 1.34s;
}

.block .is-active .textWrap:nth-child(3) .textItem03 {
    transition-delay: 0.49s;
}

.block .is-active .textWrap:nth-child(4) .textItem01 {
    transition-delay: 0.36s, 1.36s;
}

.block .is-active .textWrap:nth-child(4) .textItem02 {
    transition-delay: 0.46s, 1.46s;
}

.block .is-active .textWrap:nth-child(4) .textItem03 {
    transition-delay: 0.71s;
}

.block .is-active .textWrap:nth-child(5) .textItem01 {
    transition-delay: 0.48s, 1.48s;
}

.block .is-active .textWrap:nth-child(5) .textItem02 {
    transition-delay: 0.58s, 1.58s;
}

.block .is-active .textWrap:nth-child(5) .textItem03 {
    transition-delay: 0.83s;
}

.block .is-active .textWrap:nth-child(6) .textItem01 {
    transition-delay: 0.60s, 1.60s;
}

.block .is-active .textWrap:nth-child(6) .textItem02 {
    transition-delay: 0.70s, 1.70s;
}

.block .is-active .textWrap:nth-child(6) .textItem03 {
    transition-delay: 1.05s;
}

.block .textItem03 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    overflow: hidden;
}

.block .textItem03 {
    color: #fff;
    -webkit-clip-path: polygon(0 0, 0 0, -5% 100%, 0% 100%);
    clip-path: polygon(0 0, 0 0, -5% 100%, 0% 100%);
}

.block .is-active .textItem03 {
    -webkit-clip-path: polygon(0 0, 105% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 105% 0, 100% 100%, 0% 100%);
    transition: -webkit-clip-path 1s cubic-bezier(0.42, 0.06, 0.1, 1) 0.25s;
    transition: clip-path 1s cubic-bezier(0.42, 0.06, 0.1, 1) 0.25s;
    transition: clip-path 1s cubic-bezier(0.42, 0.06, 0.1, 1) 0.25s, -webkit-clip-path 1s cubic-bezier(0.42, 0.06, 0.1, 1) 0.25s;
}