/*inview用　.activeが必要*/

.animate.active {
	font-size: 50px;
	margin: 100px 0 0;
	border-bottom: 2px solid #ccc;
}

.animate.active span {
	display: inline-block;
}

.animate.active span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate.active span:nth-of-type(3) {
	animation-delay: .1s;
}
.animate.active span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate.active span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate.active span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate.active span:nth-of-type(7) {
	animation-delay: .3s;
}
.animate.active span:nth-of-type(8) {
	animation-delay: .35s;
}
.animate.active span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate.active span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate.active span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate.active span:nth-of-type(12) {
	animation-delay: .55s;
}
.animate.active span:nth-of-type(13) {
	animation-delay: .6s;
}
.animate.active span:nth-of-type(14) {
	animation-delay: .65s;
}
.animate.active span:nth-of-type(15) {
	animation-delay: .7s;
}
.animate.active span:nth-of-type(16) {
	animation-delay: .75s;
}
.animate.active span:nth-of-type(17) {
	animation-delay: .8s;
}
.animate.active span:nth-of-type(18) {
	animation-delay: .85s;
}
.animate.active span:nth-of-type(19) {
	animation-delay: .9s;
}
.animate.active span:nth-of-type(20) {
	animation-delay: .95s;
}


/* Animation One */

.one.active span {
	color: #24a8e6;
	opacity: 0;
	transform: translate(-150px, -50px) rotate(-180deg) scale(3);
	animation: revolveScale .4s forwards;
}

@keyframes revolveScale {
	60% {
		transform: translate(20px, 20px) rotate(30deg) scale(.3);
	}

	100% {
		transform: translate(0) rotate(0) scale(1);
		opacity: 1;
	}
}


/* Animation Two */

.two.active span {
	color: #a5cb21;
	opacity: 0;
	transform: translate(200px, -100px) scale(2);
	animation: ballDrop .3s forwards;
}

@keyframes ballDrop {
	60% {
		transform: translate(0, 20px) rotate(-180deg) scale(.5);
	}

	100% {
		transform: translate(0) rotate(0deg) scale(1);
		opacity: 1;
	}
}


/* Animation Three */


.three.active span {
	color: #b10e81;
	opacity: 0;
	transform: translate(-300px, 0) scale(0);
	animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
	60% {
		transform: translate(20px, 0) scale(1);
		color: #b10e81;
	}

	80% {
		transform: translate(20px, 0) scale(1);
		color: #b10e81;
	}

	99% {
		transform: translate(0) scale(1.2);
		color: #00f0ff;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
		color: #b10e81;
	}
}


/* Animation Four */


.four.active span {
	color: #8d6a00;
	opacity: 0;
	transform: translate(0, -100px) rotate(360deg) scale(0);
	animation: revolveDrop .3s forwards;
}


@keyframes revolveDrop {
	30% {
		transform: translate(0, -50px) rotate(180deg) scale(1);
	}

	60% {
		transform: translate(0, 20px) scale(.8) rotate(0deg);
	}

	100% {
		transform: translate(0) scale(1) rotate(0deg);
		opacity: 1;
	}
}


/* Animation Five */


.five.active span {
	color: #dd3f0f;
	opacity: 0;
	transform: translate(0, -100px) rotate(360deg) scale(0);
	animation: dropVanish .5s forwards;
}


@keyframes dropVanish {
	30% {
		transform: translate(0, -50px) rotate(180deg) scale(1);
	}

	50% {
		transform: translate(0, 20px) scale(.8) rotate(0deg);
		opacity: 1;
	}

	80% {
		transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
		opacity: 0;
	}

	100% {
		transform: translate(0) scale(1) rotate(0deg);
		opacity: 1;
	}
}



/* Animation Six */


.six.active span {
	color: #ddb40f;
	opacity: 0;
	transform: rotate(-180deg) translate(150px, 0);
	animation: twister .5s forwards;
}


@keyframes twister {
	10% {
		opacity: 1;
	}
	100% {
		transform: rotate(0deg) translate(0);
		opacity: 1;
	}
}



/* Animation Seven */


.seven.active span {
	color: #348c04;
	opacity: 0;
	transform: translate(-150px, 0) scale(.3);
	animation: leftRight .5s forwards;
}


@keyframes leftRight {
	40% {
		transform: translate(50px, 0) scale(.7);
		opacity: 1;
		color: #348c04;
	}

	60% {
		color: #0f40ba;
	}

	80% {
		transform: translate(0) scale(2);
		opacity: 0;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
	}
}

/*犬も歩けば棒に当たる*/
/*目隠し→文字表示*/
.c01 {
    position: relative;
    color: transparent;
    font-size:300%;
    font-weight:bold;
}
.c01::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0%;
    right: 100%;
    bottom: 0%;
    left: 0%;
    background: #a675a5;
}
.c01.active {
    animation-name: kf_c01a;
    animation-duration: 0s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}
.c01.active::before {
    animation-name: kf_c01b;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes 	kf_c01a {
    100% {
        color: inherit;
    }
}
@keyframes kf_c01b {
    50% {
        left: 0%;
        right: 0%;
    }
    100% {
        left: 100%;
        right: 0%;
    }
}


/*複数行に線を引く*/
.c06 {
    background-image: linear-gradient(to top, #a675a5 3px, transparent 3px);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    font-size:200%;
    font-weight:bold;
}
.c06.active {
    animation-name: kf_c06a, kf_c06b;
    animation-duration: 1s, 0s;
    animation-delay: 0s, 0.5s;
    animation-fill-mode: forwards;
}
@keyframes kf_c06a {
    50% {
        background-size: 100% 100%;
    }
    100% {
        background-size: 0% 100%;
    }
}
@keyframes kf_c06b {
    100% {
        background-position: right bottom;
    }
}


/*複数の線を引く*/
.c07 {
    padding: 26px 26px;
    background-image: linear-gradient(to bottom, transparent 10px, #a675a5 10px, #a675a5 13px, transparent 13px), linear-gradient(to left, transparent 10px, #a675a5 10px, #a675a5 13px, transparent 13px), linear-gradient(to top, transparent 10px, #a675a5 10px, #a675a5 13px, transparent 13px), linear-gradient(to right, transparent 10px, #a675a5 10px, #a675a5 13px, transparent 13px);
    background-repeat: no-repeat;
    background-size: 0% 100%, 100% 0%, 0% 100%, 100% 0%;
    background-position: top left, top left, right bottom, right bottom;
    font-size:300%;
    font-weight:bold;
}
.c07.active {
    animation-name: kf_c07a, kf_c07b;
    animation-duration: 1.5s, 0s;
    animation-delay: 0s, 0.75s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes kf_c07a {
    50% {
        background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    }
    100% {
        background-size: 0% 100%, 100% 0%, 0% 100%, 100% 0%;
    }
}
@keyframes kf_c07b {
    100% {
        background-position: right bottom, right bottom, top left, top left;
    }
}

/*下から徐々に表示する*/
.c02 {
    background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0) 0%, #333333 50%);
    background-size: 100% 200%;
    background-position: 0% -100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size:300%;
    font-weight:bold;
}
.c02.active {
    animation-name: kf_c02;
    animation-duration: 8s;/*数が大きいほどゆっくり*/
    animation-fill-mode: forwards;
}
@keyframes kf_c02 {
    100% {
        background-position: 0% 100%;
    }
}

/*真ん中から開く*/
.c03 {
    color: #e7d4e3;
    background: #a675a5;
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    font-size:300%;
    font-weight:bold;
}
.c03.active {
    animation-name: kf_c03;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes kf_c03 {
    100% {
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    }
}

/*真ん中から色を反転させる*/
.c04 {
    position: relative;
    color: #a675a5;
    background: #e7d4e3;
    font-size:300%;
    font-weight:bold;
}
.c04::after {
    content: attr(data-text);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #e7d4e3;
    background: #a675a5;
    clip-path: circle(0% at 50% 50%);
}
.c04.active::after {
    animation-name: kf_c04b;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes kf_c04b {
    100% {
        clip-path: circle(75% at 50% 50%);
    }
}

/*スクロールするとマーカーを引く*/
.scroll_marker {
  position: relative;
  color: transparent;
}
.scroll_marker::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0.9rem;/*値が大きいほど線が細くなる ～1.1rem*/
  right: 100%;
  bottom: 0%;
  left: 0%;
  background: rgba(255,255,0,0.5);/*カラー#a675a5*/
}
.scroll_marker.active {
  animation-name: kf_scroll_markera;
  animation-duration: 0s;
  animation-delay: 0.0s;
  animation-fill-mode: forwards;
}
.scroll_marker.active::before {
  animation-name: kf_scroll_markerb;
  animation-duration: 2s;/*線を引く時間*/
  animation-delay: 0.5s;/*線引きの開始時間*/
  animation-fill-mode: forwards;
}
@keyframes kf_scroll_markera {
  100% {
    color: inherit;
  }
}
@keyframes kf_scroll_markerb {
  50% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 0%;
    right: 0%;
  }
}


/*ヘアーCOCO*/
.c001 {
  position: relative;
  /*color: transparent;*/
  color: #FFF;
  font-size:calc(1.1rem + 1vw);
  padding:10px;
}
.c001::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0%;
  right: 100%;
  bottom: 0%;
  left: 0%;
  background: #CBC179;/*最初の色*/
}
.c001.active {
  animation-name: kf_c001a;
  animation-duration: 0s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}
.c001.active::before {
  animation-name: kf_c001b;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes kf_c001a {
  100% {
    color: #FFF;
	background: rgba(80, 62, 47, 0.7);/*最後の色*/
  }
}
@keyframes kf_c001b {
  50% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 100%;
    right: 0%;
  }
}