@charset "utf-8";
/* --------------------------------
アニメーション css
-------------------------------- */
/*
class,id側
animation-duration: 1s;
animation: cmnObjFadeIn 0.3s linear 0s forwards;
*/
@keyframes cmnObjFadeIn { from {opacity: 0;} to {opacity: 1;}}
@keyframes cmnObjFadeOut { from {opacity: 1;} to {opacity: 0;}}



/*animation-duration: 1s;
animation-name: RightToLeft;*/

/*animation-duration: 1s;
animation-name: LeftToRight;*/

/*animation-duration: 1s;
animation-name: BottomToTop;*/

/*animation-duration: 1s;
animation-name: FadeInToTop;*/

/*animation-duration: 3s;
animation-name: FadeIn;*/
/*animation-duration: 10s;
animation-name: ZoomOut;*/
@keyframes RightToLeft {
  0% {
    opacity: 0;/* 透明 */
	-ms-transform: translateX(30px);
	-webkit-transform: translateX(30px);
    transform: translateX(30px);/* X軸方向に数px */
  }
  100% {
    opacity: 1;/* 不透明 */
	-ms-transform: translateX(0);
	-webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes LeftToRight {
  0% {
    opacity: 0;/* 透明 */
	-ms-transform: translateX(-30px);
	-webkit-transform: translateX(-30px);
    transform: translateX(-30px);/* X軸方向に数px */
  }
  100% {
    opacity: 1;/* 不透明 */
	-ms-transform: translateX(0);
	-webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes BottomToTop {
  0% {
    opacity: 0;/* 透明 */
	-ms-transform: translateY(10px);
	-webkit-transform: translateY(10px);
    transform: translateY(10px);/* X軸方向に数px */
  }
  100% {
    opacity: 1;/* 不透明 */
	-ms-transform: translateY(0);
	-webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes BottomToTop2 {
  0% {
    opacity: 0;/* 透明 */
	-ms-transform: translateY(10px);
	-webkit-transform: translateY(10px);
    transform: translateY(10px);/* X軸方向に数px */
  }
  20% {
    opacity: 0;/* 透明 */
	-ms-transform: translateY(10px);
	-webkit-transform: translateY(10px);
    transform: translateY(10px);/* X軸方向に数px */
  }
  100% {
    opacity: 1;/* 不透明 */
	-ms-transform: translateY(0);
	-webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes FadeIn {
  0% {
    opacity: 0;/* 透明 */
  }
  100% {
    opacity: 1;/* 不透明 */
  }
}
@keyframes FadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;/* jsを併用してdisplay:none にする。 */
  }
}

}
@keyframes ZoomOut {
  0% {
    -ms-transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  100% {
    -ms-transform: scale(1.0, 1.0);
    -webkit-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
}