
/*---カルーセル用---*/
/*フェードイン*/
.crs-fade-in,
.crs-fade-in-5s,
.crs-fade-in-7s {
  animation-name: crs-fade-in;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
}
.crs-fade-in {animation-duration: 3s;}
.crs-fade-in-5s {animation-duration: 4s;}
.crs-fade-in-7s {animation-duration: 6s;}

@keyframes crs-fade-in {
	0% {opacity:0;}
	100% {opacity:1;}
}

/*拡大*/
.crs-expand,
.crs-expand-5s,
.crs-expand-7s {
  animation-name: crs-expand;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
}
.crs-expand {animation-duration: 3s;}
.crs-expand-5s {animation-duration: 4s;}
.crs-expand-7s {animation-duration: 6s;}

@keyframes crs-expand {
	0% {
    transform:scale(0.9,0.9);
		opacity:0;
	}
	100% {
    transform:scale(1,1);
		opacity:1;
	}
}

/*上から移動*/
.crs-move-from-above,
.crs-move-from-above-5s,
.crs-move-from-above-7s {
  animation-name: crs-move-from-above;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
}
.crs-move-from-above {animation-duration: 3s;}
.crs-move-from-above-5s {animation-duration: 4s;}
.crs-move-from-above-7s {animation-duration: 6s;}

@keyframes crs-move-from-above {
  0% {
    transform:translateY(-15px);
    opacity:0;
  }
  100% {
    transform:translateY(0px);
    opacity:1;
  }
}

/*下から移動*/
.crs-move-from-bottom,
.crs-move-from-bottom-5s,
.crs-move-from-bottom-7s {
  animation-name: crs-move-from-bottom;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
}
.crs-move-from-bottom {animation-duration: 3s;}
.crs-move-from-bottom-5s {animation-duration: 4s;}
.crs-move-from-bottom-7s {animation-duration: 6s;}

@keyframes crs-move-from-bottom {
  0% {
    transform:translateY(15px);
    opacity:0;
  }
  100% {
    transform:translateY(0px);
    opacity:1;
  }
}

/*左から移動*/
.crs-move-from-left,
.crs-move-from-left-5s,
.crs-move-from-left-7s {
  animation-name: crs-move-from-left;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
}
.crs-move-from-left {animation-duration: 3s;}
.crs-move-from-left-5s {animation-duration: 4s;}
.crs-move-from-left-7s {animation-duration: 6s;}

@keyframes crs-move-from-left {
  0% {
    transform:translateX(-15px);
    opacity:0;
  }
  100% {
    transform:translateX(0px);
    opacity:1;
  }
}

/*右から移動*/
.crs-move-from-right,
.crs-move-from-right-5s,
.crs-move-from-right-7s {
  animation-name: crs-move-from-right;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
}
.crs-move-from-right {animation-duration: 3s;}
.crs-move-from-right-5s {animation-duration: 4s;}
.crs-move-from-right-7s {animation-duration: 6s;}

@keyframes crs-move-from-right {
  0% {
    transform:translateX(15px);
    opacity:0;
  }
  100% {
    transform:translateX(0px);
    opacity:1;
  }
}

/*挿入ワイプ*/
.crs-wipe-in,
.crs-wipe-in-5s,
.crs-wipe-in-7s {
  animation-name: crs-wipe-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
}

@keyframes crs-wipe-in {
	0% {
    transform:scale(4,4);
		opacity:0;
	}
	100% {
    transform:scale(1,1);
		opacity:1;
	}
}

/*ズームイン*/
.crs-zoom-in,
.crs-zoom-in-5s,
.crs-zoom-in-7s {
  animation-name: crs-zoom-in;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.crs-zoom-in {animation-duration: 10s;}
.crs-zoom-in-5s,
.crs-zoom-in-7s {animation-duration: 15s;}

@keyframes crs-zoom-in {
	0% {
    transform:scale(1,1);
		opacity:1;
	}
	100% {
    transform:scale(1.2,1.2);
		opacity:1;
	}
}

/*ズームイアウト*/
.crs-zoom-out,
.crs-zoom-out-5s,
.crs-zoom-out-7s {
  animation-name: crs-zoom-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.crs-zoom-out {animation-duration: 10s;}
.crs-zoom-out-5s,
.crs-zoom-out-7s {animation-duration: 15s;}

@keyframes crs-zoom-out {
	0% {
    transform:scale(1.2,1.2);
		opacity:1;
	}
	100% {
    transform:scale(1,1);
		opacity:1;
	}
}

/*---共通---*/
/*ズームイン*/
.zoom-in {
  animation-name: zoom-in;
  animation-duration: 15s;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes zoom-in {
	0% {
    transform:scale(1,1);
		opacity:1;
	}
	100% {
    transform:scale(1.1,1.1);
		opacity:1;
	}
}

/*ズームイアウト*/
.zoom-out {
  animation-name: zoom-out;
  animation-duration: 15s;
  animation-direction: normal;
  animation-play-state: running;
  animation-timing-function: ease;
	animation-fill-mode: forwards;
}

@keyframes zoom-out {
	0% {
    transform:scale(1.2,1.2);
		opacity:1;
	}
	100% {
    transform:scale(1,1);
		opacity:1;
	}
}
