/* btn */
.%css-ctar% .aiin-btn {
	position:relative;
	width:180px;
	height:100px;
	background-color:#fff;
	background:linear-gradient(to bottom,#cef, #fff 50%);
	cursor:pointer;
	user-select:none;
	-moz-user-select:none;
	-webkit-tap-highlight-color:transparent;
	line-height:1;
	overflow:hidden;
}
.%css-ctar% .aiin-btn.aiin-sel {
}
.%css-ctar% .aiin-btn.aiin-not-allowed {
	cursor:default;
}
/* wave-box */
.%css-ctar% .aiin-wave-box {
	position:absolute;
	top:0;
	left:50%;
	transform:translate(-50%,0);
	width:600px;
	height:600px;
}
/* wave */
.%css-ctar% .aiin-wave {
	position:absolute;
	top:10%;
	left:10%;
	width:80%;
	height:80%;
	transform-origin:50% 50%;
	border-radius:43%;
	xbackground:#0af;
	animation-name:%css-ctar%-kf-wave-hover;
	animation-iteration-count:infinite;
	animation-duration:8s;
	animation-delay:-1.5s;
	animation-timing-function:linear;
	animation-play-state:paused;
}
.%css-ctar% .aiin-btn:hover .aiin-wave {
	animation-play-state:running;
}
@keyframes %css-ctar%-kf-wave-hover {
	0% {
		transform:rotateZ(0deg);
	}
	100% {
		transform:rotateZ(360deg);
	}
}
/* wave-inner */
.%css-ctar% .aiin-wave-inner {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:43%;
	xbackground:#0af;
	background:radial-gradient(#0fa 50%, #0af 75%);
	animation-name:%css-ctar%-kf-wave-inner-hover;
	animation-iteration-count:infinite;
	animation-duration:2s;
	animation-delay:-1.5s;
	animation-timing-function:linear;
	animation-play-state:paused;
}
.%css-ctar% .aiin-btn:hover .aiin-wave-inner {
	animation-play-state:running;
}
@keyframes %css-ctar%-kf-wave-inner-hover {
	0% {
		animation-timing-function:ease-out;
	}
	50% {
		animation-timing-function:ease-in;
		box-shadow:
			0 0 10px 0 #0af,
			0 0 20px 0 #0af,
			0 0 30px 0 #fff;
	}
}
/* char */
.%css-ctar% .aiin-char {
	position:absolute;
	width:30px;
	height:30px;
}
.%css-ctar% .aiin-char-1 {
	top:47px;
	left:15px;
}
.%css-ctar% .aiin-char-2 {
	top:42px;
	left:55px;
}
.%css-ctar% .aiin-char-3 {
	top:45px;
	left:95px;
}
.%css-ctar% .aiin-char-4 {
	top:55px;
	left:135px;
}
.%css-ctar% .aiin-char-inner {
	position:relative;
	width:100%;
	height:100%;
	border-radius:50%;

	color:white;
	font-size:12px;
	line-height:30px;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;

	animation-name:%css-ctar%-kf-char-inner-hover;
	animation-iteration-count:infinite;
	animation-duration:2s;
	animation-play-state:paused;
}
.%css-ctar% .aiin-btn:hover .aiin-char-inner {
	animation-play-state:running;
}
.%css-ctar% .aiin-char-1 .aiin-char-inner {
	background-color:#0c8;
	background:radial-gradient(circle at 7px 7px, #fff, #0c8 20%);
	animation-delay:-1.5s;
	transform:rotateZ(10deg);
}
.%css-ctar% .aiin-char-2 .aiin-char-inner {
	background-color:#0af;
	background:radial-gradient(circle at 7px 7px, #fff, #0af 20%);
	animation-delay:-1.4s;
	transform:rotateZ(-10deg);
}
.%css-ctar% .aiin-char-3 .aiin-char-inner {
	background-color:#fa0;
	background:radial-gradient(circle at 7px 7px, #fff, #fa0 20%);
	animation-delay:-1.3s;
	transform:rotateZ(10deg);
}
.%css-ctar% .aiin-char-4 .aiin-char-inner {
	background-color:#f0a;
	background:radial-gradient(circle at 7px 7px, #fff, #f0a 20%);
	animation-delay:-1.2s;
	transform:rotateZ(-10deg);
}
@keyframes %css-ctar%-kf-char-inner-hover {
	0% {
		top:0;
		animation-timing-function:ease-out;
	}
	50% {
		top:-35px;
		animation-timing-function:ease-in;
	}
	100% {
		top:0;
	}
}
/* char-img */
.%css-ctar% .aiin-char-img {
	position:relative;
	width:100%;
	height:100%;
}
.%css-ctar% .aiin-char-1 .aiin-char-img {
	background:url("%url-tpl%img/char-1.png");
	background-size:80% 80%;
	background-position:center center;
	background-repeat:no-repeat;
}
.%css-ctar% .aiin-char-2 .aiin-char-img {
	background:url("%url-tpl%img/char-2.png");
	background-size:80% 80%;
	background-position:center center;
	background-repeat:no-repeat;
}
.%css-ctar% .aiin-char-3 .aiin-char-img {
	background:url("%url-tpl%img/char-3.png");
	background-size:80% 80%;
	background-position:center center;
	background-repeat:no-repeat;
}
.%css-ctar% .aiin-char-4 .aiin-char-img {
	background:url("%url-tpl%img/char-4.png");
	background-size:80% 80%;
	background-position:center center;
	background-repeat:no-repeat;
}
/* vcnt */
.%css-ctar% .aiin-vcnt-ctar {
	position:absolute;
	bottom:5px;
	left:0;
	padding:2px 0;
	width:100%;
	text-align:center;
}
.%css-ctar% .aiin-vcnt {
	font-family:"arial";
	font-size:18px;
	font-weight:bold;
	color:#eee;
	text-shadow:0px 0px 5px #0af;
}
/* check */
.%css-ctar% .aiin-check {
	position:absolute;
	top:5px;
	right:5px;
	width:16px;
	height:16px;
	background:url("%url-tpl%img/check.png");
	background-size:100% 100%;
	transform:translate(0,60px) rotateX(270deg) rotateY(-360deg);
	opacity:0.2;
	transition:opacity 1s, transform 1s;
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-check {
	transform:none;
	opacity:1;
}