/* animation */
@-webkit-keyframes passing-barL{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-barL{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}

@-webkit-keyframes passing-barR{
	0% {
		right: 0;
		left: auto;
		width: 0;
	}
	50% {
		right: 0;
		left: auto;
		width: 100%;
	}
	51% {
		right: auto;
		left: 0;
		width: 100%;
	}
	100% {
		right: auto;
		left: 0;
		width: 0;
	}
}
@keyframes passing-barR{
	0% {
		right: 0;
		width: 0;
	}
	50% {
		right: 0;
		width: 100%;
	}
	51% {
		right: 0;
		width: 100%;
	}
	100% {
		right: 100%;
		width: 0;
	}
}

@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0.5; }
	100% { opacity:1; }
}

@keyframes passingwhite{
    0% {
        transform-origin:left;
        transform:scaleX(0);
    }
    50% {
        transform-origin:left;
        transform:scaleX(1);
    }
    50.001% {
        transform-origin:right;
        transform:scaleX(1);
    }
    80% {
        transform-origin:right;
        transform:scaleX(1);
    }
    100% {
        transform-origin:right;
        transform:scaleX(0);
    }
}

/* css */
.passing-box {
	display: block;
}
.passing-bar {
	position: relative;
	-webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	/* 任意の値 */
	/* background: rgba(255, 255, 255, 0.5); */
    background: #fff;
}
.passing-txt {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing-box.move .passing-barL:before {
    /* -webkit-animation: passing-barL 1.5s ease 0.5s 1 normal forwards;
	animation: passing-barL 1.5s ease 0.5s 1 normal forwards; */
    -webkit-animation: passing-barL 1s ease 0s 1 normal forwards;
	animation: passing-barL 1s ease 0s 1 normal forwards;
}
.passing-box.move .passing-barR:before {
	/* -webkit-animation: passing-barR 1.5s ease 0.5s 1 normal forwards;
	animation: passing-barR 1.5s ease 0.5s 1 normal forwards; */
    -webkit-animation: passing-barR 1s ease 0s 1 normal forwards;
	animation: passing-barR 1s ease 0s 1 normal forwards;
}
.passing-box.move .passing-txt {
    /* -webkit-animation: passing-txt 0s ease 1s 2 normal forwards;
	animation:passing-txt 0s ease 1s 2 normal forwards; */
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 0s ease 0.5s 1 normal forwards;
}
.passing-txt {
    position: relative
}
.passing-box.move .passing-txt:after {
    position: absolute;
    left: 0;
    width: 0;
	height: 100%;
    background-color: rgba(255, 255,255, 0.5);
    animation-name:passingwhite;
    animation-duration:1s;
    animation-delay: 2s;
}


/* 白透過がかかって消えるcss */
.js-slide-dark.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#000 0,#000 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#000 0,#000 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}

.js-slide-dark > span {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    -webkit-text-fill-color: transparent;
}

.js-slide-white.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#fff 0,#fff 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#fff 0,#fff 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
.js-slide-white > p,.js-slide-white > span {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    -webkit-text-fill-color: transparent;
}


.js-slide-blue.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#77aad9 0,#77aad9 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#77aad9 0,#77aad9 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
.js-slide-blue > p,.js-slide-blue > span {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    -webkit-text-fill-color: transparent;
}

.js-slide-btn.move {
    display: inline-block;
    animation-name:js_slider2;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}

/* 上のグラデーション部分 */
.js-slide-sky.js-slide-sky1.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#5fc6e4 0,#5fc6e4 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#5fc6e4 0,#5fc6e4 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
.js-slide-sky.js-slide-sky2.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#3bb3e5 0,#3bb3e5 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#3bb3e5 0,#3bb3e5 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
.js-slide-sky.js-slide-sky3.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#00a7e1 0,#00a7e1 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#00a7e1 0,#00a7e1 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}

.js-slide-sky.js-slide-sky4.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#0096d1 0,#0096d1 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#0096d1 0,#0096d1 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
.js-slide-sky.js-slide-sky5.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#008ac0 0,#008ac0 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#008ac0 0,#008ac0 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}

.js-slide-sky.js-slide-sky6.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#006ad0 0,#006ad0 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#006ad0 0,#006ad0 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}

.js-slide-sky.js-slide-sky7.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#007edd 0,#007edd 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#007edd 0,#007edd 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
.js-slide-sky.js-slide-sky8.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#0082ec 0,#0082ec 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#0082ec 0,#0082ec 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
.js-slide-sky.js-slide-sky9.move {
    display: inline-block;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left,#0082f0 0,#0082f0 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background: linear-gradient(to right,#0082f0 0,#0082f0 25%,#d3d3d3 25%,#d3d3d3 75%,transparent 75%,transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 400% 100%;
    background-position: 100% 0;
    animation-name:js_slider;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}

.js-slide-sky > span {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    -webkit-text-fill-color: transparent;
}

/* 上のグラデーション部分 */

.js-slide {
    background-position: 0% 0;
    opacity:1;
}
.js-slide p, .js-slide span{
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    -webkit-text-fill-color: transparent;
}

@keyframes js_slider{
    0% {
        background-position: 100% 0;
        opacity:0.5;
    }
    50% {
        background-position: 100% 0;
        opacity:1;
    }
    50.001% {
        background-position: 100% 0;
        opacity:1;
    }
    100% {
        background-position: 0% 0;
        opacity:1;
    }
}

@keyframes js_slider2{
    0% {
        opacity: 0;
        transform: translateX(-64px);
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
}