@charset "utf-8";
/*===================*/
.spinner {
	width: 5rem;
	padding: .75rem .7rem 1.2rem .5rem;
	height: 3.5rem;
	text-align: center;
	background: url(../image/common/quick-box-bg.png)center 5px no-repeat;
	background-size:65%;
	position: absolute;
	top:-2.4rem;
	right:-0.6rem;
	z-index: 1;
}
.spinner > div {
	width: .5rem;
	height: .5rem;
	background-color: #b78039;
	border-radius: 100%;
	display: inline-block;
	margin:0 0 0 .2rem;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0)
	}

	40% {
		-webkit-transform: scale(1.0)
	}
}

@keyframes sk-bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}

/*===================*/
.actionType3 {
	display: none;
	z-index:9;
	position: absolute;
	bottom:5em;
	 width:100%;
	 height:auto;
	 text-align:center;
}
.actionType3 span.ac_ico {
	 display:block;
}
.actionType3 span.ac_ico img::before {
	position: absolute; 
	content:'124';
}
.actionType3 span.ac_ico img {
	position: relative;
	 transform:translate3d(0,0,0);
	 -webkit-transform:translate3d(0,0,0);
	 -moz-transform:translate3d(0,0,0);
	 opacity:1;
	 animation:translateArr 1.2s ease-out infinite;
	 -webkit-animation:translateArr 1.2s ease-out infinite;
	 -moz-animation:translateArr 1.2s ease-out infinite;
}
@keyframes translateArr {
0%{
	 transform:translate3d(0,0,0);
	 -webkit-transform:translate3d(0,0,0);
}
20%{
	 transform:translate3d(0,0,0);
	 -webkit-transform:translate3d(0,0,0);
	 opacity:1;
	  }
25% {
	 opacity:.7;
}
33% {
	 transform:translate3d(0,22px,0);
	 -webkit-transform:translate3d(0,22px,0);
	 opacity:.5;
}
75%{
	 transform:translate3d(0,-15px,0);
	 -webkit-transform:translate3d(0,-15px,0);
}
100%{
	 transform:translate3d(0,0,0);
	 -webkit-transform:translate3d(0,0,0);
}}
@-webkit-keyframes translateArr {
0%{
	 transform:translate3d(0,0,0);
	 -webkit-transform:translate3d(0,0,0);
}
20%{
	 transform:translate3d(0,0,0);
	 -webkit-transform:translate3d(0,0,0);
	 opacity:1;
	  }
25% {
	 opacity:.7;
}
33% {
	 transform:translate3d(0,22px,0);
	 -webkit-transform:translate3d(0,22px,0);
	 opacity:.5;
}
75%{
	 transform:translate3d(0,-15px,0);
	 -webkit-transform:translate3d(0,-15px,0);
}
100%{
	 transform:translate3d(0,0,0);
	 -webkit-transform:translate3d(0,0,0);
}}


/*===================*/

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count:infinite ;

  -webkit-animation-fill-mode: backwords ;
  animation-fill-mode: backwords ;
  }
  @-webkit-keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 






.animate-bg{
    -webkit-animation-name: animateBg;
    animation-name: animateBg;

}
.animate{
  -webkit-animation-duration: 5000ms;
  animation-duration: 5000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-timing-function: cubic-bezier(.3,0,.7,1);
  timing-function: cubic-bezier(.3,0,.7,1);
}

    
@-webkit-keyframes animateBg {
  from {
    -ms-transform: scale(1.45,1.45);
    transform: scale(1.45,1.45);
    visibility: visible;
  }

  to {
    -ms-transform: scale(1,1);
    transform: scale(1,1) ;
  }
}

@keyframes animateBg {
  from {
    -ms-transform: scale(1.45,1.45);
    transform: scale(1.45,1.45) translateZ(1px);;
    visibility: visible;
  }

  to {
    -ms-transform: scale(1,1);
    transform: scale(1,1) translateZ(1px);
  }
}
.mouse {
	width: 40px;
	height: 70px;
	border: 2px solid #fff;
	border-radius: 60px;
	position: relative;
	}

.mouse::before {
		content: '';
		width: 12px;
		height: 12px;
		position: absolute;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #fff;
		border-radius: 50%;
		opacity: 1;
		animation: wheel 2s infinite;
		-webkit-animation: wheel 2s infinite;
	}
}

@keyframes wheel {
	to {
		opacity: 0;
		top: 50px;
	}
}

@-webkit-keyframes wheel {
	to {
		opacity: 0;
		top: 50px;
	}
}





.bounce { 	animation: bounce .5s infinite alternate; -webkit-animation: bounce .5s infinite alternate;}
@keyframes bounce {
  from {
	transform: translateY(0px);
  }
  to {
     transform: translateY(-10px);
  }
}
@-webkit-keyframes bounce {
  from {
     transform: translateY(0px);
  }
  to {
     transform: translateY(-10px);
  }
}