/* --------------------------------------------------------------------------------
 shine
-------------------------------------------------------------------------------- */
.js-shiny {
	position: relative;
	overflow: hidden;
	&.is-inview {
		&::after {
			content: '';
			width: 100%;
			height: 100%;
			animation: 4s .5s shine linear 2;
			background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 30%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.25) 85%,rgba(255,255,255,0) 100%);
			position: absolute;
			top: 0;
			left: -100%;
			transform: skewX(35deg);
		}
	}
	&.shiny-done::after {
		content: none;
	}
}
@keyframes shine {
	30% { left: 150%; }
	100% { left: 150%; }
}


.js-vib.is-inview {
	animation: vibration 2.3s ease 0s 2 normal !important;
	will-change: transform;
}
@keyframes vibration {
	from { transform: translateX(0); }
	5% { transform: translateX(.25rem); }
	10% { transform: translateX(0); }
	to { transform: translateX(0); }
}

.js-shake.is-inview {
	animation: shake 1s ease 0s 1 normal !important;
	will-change: transform;
}
@keyframes shake {
	from { transform: translateX(0); }
	12.5% { transform: translateX(.25rem); }
	37.5% { transform: translateX(-0.25rem); }
	62.5% { transform: translateX(.25rem); }
	87.5% { transform: translateX(-0.25rem); }
	to { transform: translateX(0); }
}


/* --------------------------------------------------------------------------------
 animation
-------------------------------------------------------------------------------- */
.js-fadeIn {
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 2s ease, transform 2s ease;
	will-change: opacity, transform;
	&.is-inview {
		opacity: 1;
		transform: scale(1);
	}
}

.js-fadeInUp,
.js-fadeInDown,
.js-fadeInLeft,
.js-fadeInRight {
	opacity: 0;
	transition: transform 2s ease, opacity 1s ease;
	will-change: transform, opacity;
}


/* フェードイン */
.js-fadeInUp {
	transform: translateY(1.5rem);
	&.is-inview {
		opacity: 1;
		transform: translateY(0);
	}
}

.js-fadeInDown {
	transform: translateY(-1.5rem);
	&.is-inview {
		opacity: 1;
		transform: translateY(0);
	}
}

.js-fadeInLeft {
	transform: translateX(-3rem);
	&.is-inview {
		transform: translateX(0);
		opacity: 1;
	}
}

.js-fadeInRight {
	transform: translateX(3rem);
	&.is-inview {
		transform: translateX(0);
		opacity: 1;
	}
}


.delay_01 { transition-delay: .1s; }
.delay_02 { transition-delay: .2s; }
.delay_03 { transition-delay: .3s; }
.delay_04 { transition-delay: .4s; }
.delay_05 { transition-delay: .5s; }
.delay_06 { transition-delay: .6s; }
.delay_08 { transition-delay: .8s; }
.delay_10 { transition-delay: 1.0s; }
.delay_20 { transition-delay: 2.0s; }
.delay_30 { transition-delay: 3.0s; }
.delay_35 { transition-delay: 3.5s; }
.delay_40 { transition-delay: 4.0s; }
.delay_80 { transition-delay: 8s; }
.delay_85 { transition-delay: 8.5s; }
.delay_90 { transition-delay: 9s; }