@charset "UTF-8";


/* CSS Document */

.ontents-box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
    height: 530px;
}
.ontents-box li {
    width: 23%;
    height: 492px;
    float: left;
    margin-top: 0px;
    margin-bottom: 40px;
}
.mv_box {
	width: 100%;

}
@media screen and (max-width: 768px){
.ontents-box {
    width: 96%;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    height: 500px;
}
.ontents-box li {
    width: 40%;
    height: 380px;
    float: left;
    margin-top: 0px;
    margin-bottom: 50px;
    margin-right: 10px;    
}
}


/*-------------------swing--------------*/
.swing {
	-moz-animation: swing linear 5s infinite;
	-moz-transform-origin: center -30px 0;
	-webkit-animation: swing linear 5s infinite;
	-webkit-transform-origin: center -30px 0;
	-ms-animation: swing linear 5s infinite;
	-ms-transform-origin: center -30px 0;
	-o-animation: swing linear 5s infinite;
	-o-transform-origin: center -30px 0;
	animation: swing linear 5s infinite;
	transform-origin: center -30px 0;
	display: block;
	float: left;
	width: 100%;
}
 
@-moz-keyframes swing {
    0% { -moz-transform: rotate(0deg) }
    25% { -moz-transform: rotate(5deg); }
    50% { -moz-transform: rotate(0deg); }
    75% { -moz-transform: rotate(-5deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes swing {
    0% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(5deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}    
@-o-keyframes swing {
    0% { -o-transform: rotate(0deg); }
    25% { -o-transform: rotate(5deg); }
    50% { -o-transform: rotate(0deg); }
    75% { -o-transform: rotate(-5deg); }
    100% { -o-transform: rotate(0deg); }
}
@-ms-keyframes swing {
    0% { -ms-transform: rotate(0deg); }
    25% { -ms-transform: rotate(5deg); }
    50% { -ms-transform: rotate(0deg); }
    75% { -ms-transform: rotate(-5deg); }
    100% { -ms-transform: rotate(0deg); }
}
@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
/*-------------------swingここまで--------------*/

/*-------swing2ここから--------------*/
.swing2 {
	-moz-animation: swing2 linear 7s infinite;
	-moz-transform-origin: center -35px 0;
	-webkit-animation: swing2 linear 7s infinite;
	-webkit-transform-origin: center -35px 0;
	-ms-animation: swing2 linear 7s infinite;
	-ms-transform-origin: center -35px 0;
	-o-animation: swing2 linear 7s infinite;
	-o-transform-origin: center -35px 0;
	animation: swing2 linear 7s infinite;
	transform-origin: center -35px 0;
	display: block;
	float: left;
	width: 100%;
}
 
@-moz-keyframes swing2 {
    0% { -moz-transform: rotate(0deg) }
    25% { -moz-transform: rotate(10deg); }
    50% { -moz-transform: rotate(0deg); }
    75% { -moz-transform: rotate(-10deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes swing2 {
    0% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(10deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(0deg); }
}    
@-o-keyframes swing2 {
    0% { -o-transform: rotate(0deg); }
    25% { -o-transform: rotate(10deg); }
    50% { -o-transform: rotate(0deg); }
    75% { -o-transform: rotate(-10deg); }
    100% { -o-transform: rotate(0deg); }
}
@-ms-keyframes swing2 {
    0% { -ms-transform: rotate(0deg); }
    25% { -ms-transform: rotate(10deg); }
    50% { -ms-transform: rotate(0deg); }
    75% { -ms-transform: rotate(-10deg); }
    100% { -ms-transform: rotate(0deg); }
}
@keyframes swing2 {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}
/*-------------------swingここまで--------------*/


/*--fluffy-----------------------*/

.fluffy {
	width: 100%;
	animation: fluffy 7s ease infinite;
}

@keyframes fluffy {
  0% { transform:translateY(0) }
  5% { transform:translateY(-10px) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-10px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-10px) }
  50% { transform:translateX(-30px) }
  100% { transform:translateY(0) }
}

/*-------------------fluffyここまで--------------*/


/*--fluffy1-----------------------*/

.fluffy1 {
	width: 100%;
	animation: fluffy1 6s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-30px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-30px) }
  50% { transform:translateX(50px) }
  100% { transform:translateY(0) }
}

/*-------------------fluffy1ここまで--------------*/


/*--fluffy2-----------------------*/

.fluffy2 {
	width: 100%;
	animation: fluffy2 4s ease infinite;
}

@keyframes fluffy2 {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-30px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-30px) }
  50% { transform:translateY(50px) }
  100% { transform:translateX(0) }
}

/*-------------------fluffy2ここまで--------------*/


/* ふわふわさせたいものに fuwafuwaクラスを付与 */
.fuwa {
	-webkit-animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration:5s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:5s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -50px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -50px);}
	100% {-moz-transform:translate(0, 0);}
}

.fuwa2 {
    -webkit-animation-name: fuwa2; /* fuwafuwa2っていうアニメーションをしてね！ */
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    /*-webkit-animation-direction:alternate;*/
    -webkit-animation-timing-function: ease;
    -moz-animation-name: fuwa2;
    -moz-animation-duration: 7s;
    -moz-animation-iteration-count: infinite;
    /*-moz-animation-direction:alternate;*/
    -moz-animation-timing-function: ease;
    padding-top: 0px;
}
/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwa2 {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -50px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwa2 {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -50px);}
	100% {-moz-transform:translate(0, 0);}
}



.fuwa3 {
	-webkit-animation-name:fuwa3; /* fuwafuwa2っていうアニメーションをしてね！ */
	-webkit-animation-duration:5s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwa3;
	-moz-animation-duration:5s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwa3 {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -70px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwa3 {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -70px);}
	100% {-moz-transform:translate(0, 0);}
}



.fuwa4 {
	-webkit-animation-name:fuwa4; /* fuwa3っていうアニメーションをしてね！ */
	-webkit-animation-duration:6s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwa4;
	-moz-animation-duration:6s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwa4 {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -90px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwa4 {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -90px);}
	100% {-moz-transform:translate(0, 0);}
}