/* --------------------------------------------------
animation
-------------------------------------------------- */

/* --------------------------------------------------
animation for PC
-------------------------------------------------- */

@media screen and (min-width: 768px) {
/* --------------------------------------------------
	js-style
	-------------------------------------------------- */
	
.fx-col-in li {
	opacity: 0;
}
.fx-in,  .fx-down,  .fx-up,  .fx-left,  .fx-right,.course-col .course-pht,.course-col.even .course-pht{
	visibility: hidden;
}
}
/* --------------------------------------------------
animate
-------------------------------------------------- */


.fadeIn {
	animation-fill-mode: both;
	animation-duration: 2s;
	animation-name: fadeIn;
	visibility: visible !important;
}
 @keyframes fadeIn {
 0% {
opacity: 0;
}
 100% {
opacity: 1;
}
}
.fadeInDown {
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-name: fadeInDown;
	visibility: visible !important;
}
 @keyframes fadeInDown {
 0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
 100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-name: fadeInUp;
	visibility: visible !important;
}
 @keyframes fadeInUp {
 0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
 100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInLeft {
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-name: fadeInLeft;
	visibility: visible !important;
}
 @keyframes fadeInLeft {
 0% {
opacity: 0;
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
transform: translateX(50px);
}
 100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRight {
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-name: fadeInRight;
	visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
 100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInRight {
 0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
 100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fx-swing {
	animation: swing linear 2s infinite;
	transform-origin: center 70% 0;
}
 

@keyframes swing {
 0% {
transform: rotate(0deg);
}
 25% {
transform: rotate(2deg);
}
 50% {
transform: rotate(0deg);
}
 75% {
transform: rotate(-2deg);
}
 100% {
transform: rotate(0deg);
}
}
.fade-slow-left::before {
	background-color: #FFF;
	transition: all .8s ease;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -1;
}
.fade-slow-left.is-inviewed::before {
	left: 100%;
}
.fade-slow-right::before {
	background-color: #FFF;
	transition: all .8s ease;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	right: 0;
	top: 0;
	z-index: -1;
}
.fade-slow-right.is-inviewed::before {
	right: 100%;
}

@media screen and (max-width: 768px) {
.fade-slow-left::before {
	content: none;
}
.fade-slow-right::before {
	content: none;
}
}