/* スイング */
.swing {
    -moz-animation: swing linear 3s 1;
    -moz-transform-origin: center -2px 0;
    -webkit-animation: swing linear 3s 1;
    -webkit-transform-origin: center -2px 0;
    -ms-animation: swing linear 3s 1;
    -ms-transform-origin: center -2px 0;
    -o-animation: swing linear 3s 1;
    -o-transform-origin:center -2px 0;
    animation: swing linear 2s 1;
    transform-origin: center -2px 0;
}
 
@-moz-keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}
@-webkit-keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}    
@-o-keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}
@-ms-keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}
@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

/* フェード 右から左から*/
.fadein01 {
  opacity : 0;
  transform : translate(-50px, 0px);
  transition:all 1s;
}
 
.fadein01.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}

.fadein02 {
  opacity : 0;
  transform : translate(50px, 0px);
  transition:all 1s;
}
 
.fadein02.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}

/* フェード 時間差下から*/
.fadein {
	opacity : 0.1;
	transform : translate(0, 10px);
	transition : all 500ms;
	}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
.fadein:nth-of-type(2) {
	-moz-transition-delay:100ms;
	-webkit-transition-delay:100ms;
	-o-transition-delay:100ms;
	-ms-transition-delay:100ms;
	}
.fadein:nth-of-type(3) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
.fadein:nth-of-type(4) {
	-moz-transition-delay:300ms;
	-webkit-transition-delay:300ms;
	-o-transition-delay:300ms;
	-ms-transition-delay:300ms;
}
.fadein:nth-of-type(5) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
}
.fadein:nth-of-type(6) {
	-moz-transition-delay:500ms;
	-webkit-transition-delay:500ms;
	-o-transition-delay:500ms;
	-ms-transition-delay:500ms;
	}
	
/* 伸びる */
.purun {
}
.purun.scrollin {
  animation: purun 0.8s linear 0s 1;
	}

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 5%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -5%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/* ボタン */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
}

/* 360度 */
.heartbeat.scrollin {
    width: 987px;
    height: 175px;
    margin: 30px auto;
    animation: heartbeat 1.5s ease-in-out both;
}

@keyframes heartbeat{
    from{
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }
    10%{
        transform: scale(0.91);
        animation-timing-function: ease-in;
    }
    17%{
        transform: scale(0.98);
        animation-timing-function: ease-out;
    }
    33%{
        transform: scale(0.87);
        animation-timing-function: ease-in;

    }
    45%{
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}