/*
Theme Name: Animation
*/
/* read me */
/*
01.animationさせたい要素のclassに「animation」をセットさせ、jQueryで要素出現時にon、要素画面外でoffをセットできるようにする。
02.animationさせたい要素にanime-styleを付与し、styleにある要素名をセットする
03.animationさせたい要素にanime-duraを付与し、durationにある要素名をセットする（持続時間）
04.animationさせたい要素にanime-delayを付与し、delayにある要素名をセットする（遅延実行）
	delayはslideInやzoomInでは使えないので注意
*/
/* common */
.animation{
	visibility: hidden;
}
.animation.on {
	visibility: visible;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-fill-mode: none;
	animation-play-state: running;
}

/* style */
/* -slideIn slideOut*/
.animation.on[anime-style="slideInLeftRight"]{
	animation-name: slideInLeftRight;
}
.animation.off[anime-style="slideInLeftRight"]{
	animation-name: slideOutLeftRight;
}
.animation.on[anime-style="slideInRightLeft"]{
	animation-name: slideInRightLeft;
}
.animation.off[anime-style="slideInRightLeft"]{
	animation-name: slideOutRightLeft;
}
.animation.on[anime-style="slideInBottomTop"]{
	animation-name: slideInBottomTop;
}
.animation.off[anime-style="slideInBottomTop"]{
	animation-name: slideOutBottomTop;
}
.animation.on[anime-style="slideInTopBottom"]{
	animation-name: slideInTopBottom;
}
.animation.off[anime-style="slideInTopBottom"]{
	animation-name: slideOutTopBottom;
}
.animation.on[anime-style="slideInFromLeftTop"]{
	animation-name: slideInFromLeftTop;
}
.animation.off[anime-style="slideInFromLeftTop"]{
	animation-name: slideOutFromLeftTop;
}
.animation.on[anime-style="slideInFromRightTop"]{
	animation-name: slideInFromRightTop;
}
.animation.off[anime-style="slideInFromRightTop"]{
	animation-name: slideOutFromRightTop;
}
/* -zoomIn zoomOut */
.animation.on[anime-style="zoomInTopBottom"]{
	animation-name: zoomInTopBottom;
}
.animation.off[anime-style="zoomInTopBottom"]{
	animation-name: zoomOutTopBottom;
}
.animation.on[anime-style="zoomInBottomTop"]{
	animation-name: zoomInBottomTop;
}
.animation.off[anime-style="zoomInBottomTop"]{
	animation-name: zoomOutTopBottom;
}
.animation.on[anime-style="zoomInCenter"]{
	animation-name: zoomInCenter;
}
.animation.off[anime-style="zoomInCenter"]{
	animation-name: zoomOutCenter;
}
.animation.on[anime-style="zoomOutCenter"]{
	animation-name: zoomInCenter;
}
.animation.off[anime-style="zoomOutCenter"]{
	animation-name: zoomOutCenter;
}
.animation.on[anime-style="zoomOutCenter2"]{
	animation-name: zoomInCenter2;
}
.animation.off[anime-style="zoomOutCenter2"]{
	animation-name: zoomInCenter2;
}

/*無限ループ*/
.animation.on[iteration-count="infinite"]{
	animation-iteration-count:infinite;
}

/* duration */
[anime-dura="0s"]{
	animation-duration:0s;
}
[anime-dura="1s"]{
	animation-duration:1s;
}
[anime-dura="1.5s"]{
	animation-duration:1.5s;
}
[anime-dura="2s"]{
	animation-duration:2s;
}
[anime-dura="3s"]{
	animation-duration:3s;
}
[anime-dura="4s"]{
	animation-duration:4s;
}
[anime-dura="5s"]{
	animation-duration:5s;
}
[anime-dura="6s"]{
	animation-duration:6s;
}
[anime-dura="7s"]{
	animation-duration:7s;
}
[anime-dura="8s"]{
	animation-duration:8s;
}
[anime-dura="9s"]{
	animation-duration:9s;
}
[anime-dura="10s"]{
	animation-duration:10s;
}

/* delay */
[anime-delay="0s"]{
	animation-delay: 0s;
}
[anime-delay="1s"]{
	animation-delay: 1s;
}
[anime-delay="2s"]{
	animation-delay: 2s;
}
[anime-delay="3s"]{
	animation-delay: 3s;
}
[anime-delay="4s"]{
	animation-delay: 4s;
}
[anime-delay="5s"]{
	animation-delay: 5s;
}

/* keyframes */
/* -slideIn slideOut */
@keyframes slideInLeftRight {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes slideOutLeftRight {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(100%);
	}
}
@keyframes slideInRightLeft {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes slideOutRightLeft {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(-100%);
	}
}
@keyframes slideInTopBottom {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes slideOutTopBottom {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-100%);
	}
}
@keyframes slideInBottomTop {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes slideOutBottomTop {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}
@keyframes slideInFromLeftTop{
	0% {
		opacity: 0;
		transform: translateX(-100%) translateY(-100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateX(0);
	}
}
@keyframes slideOutFromLeftTop {
	0% {
		opacity: 1;
		transform: translateX(0) translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(-100%) translateY(-100%);
	}
}
@keyframes slideInFromRightTop{
	0% {
		opacity: 0;
		transform: translateX(100%) translateY(-100%);
		visibility: hidden;
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateX(0);
		visibility: visible;
	}
}
@keyframes slideOutFromRightTop {
	0% {
		opacity: 1;
		transform: translateX(0) translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(100%) translateY(-100%);
	}
}
/* -zoomIn zoomOut */
@keyframes zoomInTopBottom {
	0% {
		opacity: 0;
		transform: translateY(-100%) scale(.8);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
@keyframes zoomOutTopBottom {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-100%) scale(.8);
	}
}
@keyframes zoomInBottomTop {
	0% {
		opacity: 0;
		transform: translateY(100%) scale(.8);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
@keyframes zoomOutBottomTop {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(10%) scale(.8);
	}
}
@keyframes zoomInCenter {
	0% {
		opacity: 0;
		transform: scale(.8);
	}
	80% {
		opacity: 1;
		transform:  scale(1.2);
	}
	100% {
		opacity: 1;
		transform:  scale(1);
	}
}
@keyframes zoomOutCenter {
	0% {
		opacity: 1;
		transform:  scale(1);
	}
	20% {
		opacity: 1;
		transform:  scale(1.2);
	}
	100% {
		opacity: 0;
		transform: scale(.8);
	}
}
@keyframes zoomInCenter2 {
	0% {
		opacity: 1;
		transform:  scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes horizontal {
	0% {
		transform:translateX( -3px) rotate(2deg);
		}
	100% { transform:translateX(  0px); }
}
@keyframes vertical {
	0% { transform:translateY(-1px) rotate(-2deg); }
	100% { transform:translateY(  0px); }
}



@keyframes slideIn {
	0% {
		transform: scale(.3);
	}

	50% {
		transform: scale(.6) rotate(-45deg);
		background: red;
	}

	100% {
		transform: scale(1) rotate(180deg);
		background: blue;
	}
}




span.inlineAnime {
	padding: 3px 1px;
	background-repeat: repeat-x;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
}
.inlineAnime.line {
	background-size: 200% 3px;
	background-position: 0 22px;
}
.inlineAnime.animateLine.line{
	background-position: -100% 22px;
}
.inlineAnime.animateOutLine.line{
	background-position: 0% 22px;
}
#sp .inlineAnime.line {
	background-size: 200% 3px;
	background-position: 0 22px;
}
#sp .inlineAnime.animateLine.line{
	background-position: -100% 22px;
}
#sp .inlineAnime.animateOutLine.line{
	background-position: 0% 22px;
}
.inlineAnime.marker {
	background-size: 200% 12px;
	background-position: 0 10px;
}
.inlineAnime.animateLine.marker{
	background-position: -100% 10px;
}
.inlineAnime.animateOutLine.marker{
	background-position: 0% 10px;
}

span.lineColorRed {
	background-image: -webkit-linear-gradient(left, rgba(231, 208, 15, 0) 50%, rgba(245, 173, 205, 0.75) 50%);
	background-image: -moz-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(245, 173, 205, 0.75) 50%);
	background-image: -o-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(245, 173, 205, 0.75) 50%);
	background-image: -ms-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(245, 173, 205, 0.75) 50%);
}
span.lineColorBlue {
	background-image: -webkit-linear-gradient(left, rgba(6, 25, 255,0) 50%, rgba(195, 199, 249, 0.75) 50%);
	background-image: -moz-linear-gradient(left, rgba(6, 25, 255,0) 50%, rgba(195, 199, 249, 0.75) 50%);
	background-image: -o-linear-gradient(left, rgba(6, 25, 255,0) 50%, rgba(195, 199, 249, 0.75) 50%);
	background-image: -ms-linear-gradient(left, rgba(6, 25, 255,0) 50%, rgba(195, 199, 249, 0.75) 50%);
}
span.lineColorLightBlue {
	background-image: -webkit-linear-gradient(left, rgba(6, 25, 255,0) 50%, rgb(177, 224, 255, 0.7) 50%);
	background-image: -moz-linear-gradient(left, rgba(6, 25, 255,0) 50%, rgba(177, 224, 255, 0.7) 50%);
	background-image: -o-linear-gradient(left, rgba(6, 25, 255,0) 50%, rgba(177, 224, 255, 0.7) 50%);
	background-image: -ms-linear-gradient(left, rgba(6, 25, 255,0) 50%, rgba(177, 224, 255, 0.7) 50%);
}
span.lineColorYellow {
	background-image: -webkit-linear-gradient(left, rgba(231, 208, 15, 0) 50%, rgba(255, 233, 49,0.75) 50%);
	background-image: -moz-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(255, 233, 49,0.75) 50%);
	background-image: -o-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(255, 233, 49,0.75) 50%);
	background-image: -ms-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(255, 233, 49,0.75) 50%);
}
span.lineColorLightYellow {
	background-image: -webkit-linear-gradient(left, rgba(248,254,25,0) 50%, rgba(248,254,25,0.75) 50%);
	background-image: -moz-linear-gradient(left, rgba(248,254,25,0) 50%, rgba(248,254,25,0.75) 50%);
	background-image: -o-linear-gradient(left, rgba(248,254,25,0) 50%, rgba(248,254,25,0.75) 50%);
	background-image: -ms-linear-gradient(left, rgba(248,254,25,0) 50%, rgba(248,254,25,0.75) 50%);
}
span.lineColorLightOrange {
	background-image: -webkit-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(241, 195, 132, .3) 50%);
	background-image: -moz-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(241, 195, 132, .3) 50%);
	background-image: -o-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(241, 195, 132, .3) 50%);
	background-image: -ms-linear-gradient(left, rgba(231,208,15,0) 50%, rgba(241, 195, 132, .3) 50%);
}
span.lineColorGray {
	background-image: -webkit-linear-gradient(left, rgba(103, 103, 103,0) 50%, rgba(210, 210, 210,0.75) 50%);
	background-image: -moz-linear-gradient(left, rgba(103, 103, 103,0) 50%, rgba(210, 210, 210,0.75) 50%);
	background-image: -o-linear-gradient(left, rgba(103, 103, 103,0) 50%, rgba(210, 210, 210,0.75) 50%);
	background-image: -ms-linear-gradient(left, rgba(103, 103, 103,0) 50%, rgba(210, 210, 210,0.75) 50%);
}
span.lineColorPink {
	background-image: -webkit-linear-gradient(left, rgba(103, 103, 103,0) 50%, rgba(254,226,245,1) 50%);
	background-image: -moz-linear-gradient(left, rgba(103, 103, 103,0) 50%, rgba(254,226,245,1) 50%);
	background-image: -o-linear-gradient(left, rgba(103, 103, 103,0) 50%, rgba(254,226,245,1) 50%);
	background-image: -ms-linear-gradient(left, rgba(103, 103, 103,0) 50%, rgba(254,226,245,1) 50%);
}