/* btn */
.%css-ctar% .aiin-btn {
	position:relative;
	width:160px;
	cursor:pointer;
	user-select:none;
	-moz-user-select:none;
	-webkit-tap-highlight-color:transparent;
	line-height:0;
}
.%css-ctar% .aiin-btn.aiin-sel {
}
.%css-ctar% .aiin-btn.aiin-not-allowed {
	cursor:default;
}
/* top & bottom */
.%css-ctar% .aiin-top,
.%css-ctar% .aiin-bottom {
	position:relative;
	width:100%;
}
.%css-ctar% .aiin-top {
	height:80px;
	perspective:200px;
}
.%css-ctar% .aiin-bottom {
	text-align:center;
	padding:10px 0;
}
/* char-(l,r) */
.%css-ctar% .aiin-char-l,
.%css-ctar% .aiin-char-r {
	position:absolute;
	top:0;
	width:50%;
	height:100%;
	background:#98dbc6;
	transition:transform 0.6s;
}
.%css-ctar% .aiin-char-l {
	left:0;
}
.%css-ctar% .aiin-char-r {
	right:0;
}
/* char-(l,r)-light */
.%css-ctar% .aiin-char-l-light,
.%css-ctar% .aiin-char-r-light {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	transition:opacity 0.3s;
}
.%css-ctar% .aiin-char-l-light {
	background:linear-gradient(to left,transparent,transparent 60%,#fff);
}
.%css-ctar% .aiin-char-r-light {
	background:linear-gradient(to right,transparent,transparent 60%,#fff);
}
.%css-ctar% .aiin-btn:hover .aiin-char-l-light,
.%css-ctar% .aiin-btn:hover .aiin-char-r-light {
	opacity:1;
}
/* char-(l,r)-inner */
.%css-ctar% .aiin-char-l-inner,
.%css-ctar% .aiin-char-r-inner {
	position:relative;
	width:100%;
	height:100%;
}
.%css-ctar% .aiin-char-l-inner {
	background:url("%url-tpl%img/char-l.png");
	background-size:100% 100%;
}
.%css-ctar% .aiin-char-r-inner {
	background:url("%url-tpl%img/char-r.png");
	background-size:100% 100%;
}
.%css-ctar% .aiin-btn:hover .aiin-char-l {
	transform:rotateY(40deg);
}
.%css-ctar% .aiin-btn:hover .aiin-char-r {
	transform:rotateY(-40deg);
}
/* center */
.%css-ctar% .aiin-center {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.%css-ctar% .aiin-center-inner {
	position:relative;
	padding:5px 10px;
	color:#5BC8AC;
	border:2px solid #5BC8AC;
	background-color:rgba(255,255,255,0.6);
	border-radius:12px;
	vertical-align:middle;
	opacity:0;
	transform:scale(0) rotateZ(-180deg);
	transition:opacity 0.5s, transform 0.5s;
}
.%css-ctar% .aiin-btn:hover .aiin-center-inner {
	opacity:1;
	transform:scale(1) rotateZ(0deg);
}
.%css-ctar% .aiin-btn:active .aiin-center-inner {
	top:1px;
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-center-inner {
	animation-name:%css-ctar%-kf-center-inner-flash;
	animation-duration:1.5s;
	animation-iteration-count:1;
}
@keyframes %css-ctar%-kf-center-inner-flash {
	0% {
		color:#fff;
		border-color:#fff;
		box-shadow:0 0 100px 0 #fff;
	}
	100% {
		box-shadow:0 0 0 0 #fff;
	}
}
/* label */
.%css-ctar% .aiin-label {
	position:relative;
	top:1px;
	font-size:16px;
	font-weight:bold;
	line-height:1;
	vertical-align:middle;
}
/* vcnt */
.%css-ctar% .aiin-vcnt {
	position:relative;
	vertical-align:middle;
	color:#98dbc6;
	font-family:"Verdana";
	font-weight:900;
	font-size:14px;
	letter-spacing:0.02em;
}
/* icon */
.%css-ctar% .aiin-icon {
	position:absolute;
	top:2px;
	left:3px;
	width:16px;
	height:16px;
	background:url("%url-tpl%img/icon.png");
	background-size:100% 100%;
	opacity:0;
	transform:translate(-20px,0);
	transition:opacity .6s, transform .6s;
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-icon {
	opacity:1;
	transform:translate(0,0);
}