/* btn */
.%css-ctar% .aiin-btn {
	position:relative;
	display:inline-block;
	text-align:center;

	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;
}
/* balloon */
.%css-ctar% .aiin-balloon {
	position:relative;
	top:0;
}
/* balbox */
.%css-ctar% .aiin-balbox {
	position:relative;
	border:4px solid #ccc;
	background-color:white;
	border-radius:5px;
}
/* label */
.%css-ctar% .aiin-label-ctar {
	position:relative;
	padding:15px 5px;
	text-align:center;
}
.%css-ctar% .aiin-label {
	position:relative;
	top:1px;
	display:inline-block;
	color:#aaa;
	font-size:15px;
	line-height:1;
	font-weight:bold;
	letter-spacing:1px;
}
/* vcnt */
.%css-ctar% .aiin-vcnt-ctar {
	position:relative;
	margin-top:5px;
}
.%css-ctar% .aiin-vcnt-front {
	position:relative;
	width:100%;
	height:100%;
	padding:5px 5px;
	text-align:center;
}
.%css-ctar% .aiin-vcnt {
	color:white;
	font-size:15px;
	line-height:1;
	font-family:"Arial";
	font-weight:bold;
	letter-spacing:1px;
	text-shadow:1px 1px 1px #888;
}
.%css-ctar% .aiin-vcnt-bg-off,
.%css-ctar% .aiin-vcnt-bg-on {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
/* triangle */
.%css-ctar% .aiin-triangle-ctar {
	position:relative;
	height:15px;
}
.%css-ctar% .aiin-triangle {
	position:absolute;
	top:0;
	left:50%;
	width:20px;
	height:20px;
	border:4px solid #ccc;
	border-width:0 4px 4px 0;
	transform:translate(-50%,-55%) rotateZ(45deg);
	background:linear-gradient(-45deg, white 55%, transparent 55.1%);
}
.%css-ctar% .aiin-triangle-inner {
	position:relative;
	width:100%;
	height:100%;
	transform:translate(-50%,-50%) rotateZ(90deg);
}
/* pic */
.%css-ctar% .aiin-pic {
	position:relative;
	display:inline-block;
	width:100px;
	height:100px;
	border:5px solid #ccc;
	border-radius:50%;
	overflow:hidden;
	z-index:0;
}
/* pic1/pic2 */
.%css-ctar% .aiin-pic1,
.%css-ctar% .aiin-pic2 {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:transform .6s, opacity .6s;
}
.%css-ctar% .aiin-pic1 {
	background:url("%url-tpl%img/pic1.jpg");
	background-size:cover;
	background-position:center center;

	transform:rotateZ(0deg);
	opacity:1;
}
.%css-ctar% .aiin-pic2 {
	background:url("%url-tpl%img/pic2.jpg");
	background-size:cover;
	background-position:center center;

	transform:rotateZ(-180deg);
}
/* check */
.%css-ctar% .aiin-check-ctar {
	position:absolute;
	bottom:-15%;
	left:50%;
	width:100%;
	height:15%;
	transform:translate(-50%,0);
	background-color:rgba(255,255,255,0.7);
	transition:transform .6s;
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-check-ctar {
	transform:translate(-50%,-100%);
}
.%css-ctar% .aiin-check {
	position:relative;
	width:100%;
	height:100%;
	background:url("%url-tpl%img/check.png");
	background-size:12px 12px;
	background-position:top 1px center;
	background-repeat:no-repeat;
}
/* hover : pic1, pic2 */
.%css-ctar% .aiin-btn:hover .aiin-pic1 {
	transform:rotateZ(180deg);
	opacity:0;
}
.%css-ctar% .aiin-btn:hover .aiin-pic2 {
	transform:rotateZ(0deg);
}
/* hover : pic */
.%css-ctar% .aiin-btn:hover .aiin-pic {
	animation-name:%css-ctar%-kf-pic-hover;
	animation-iteration-count:4;
	animation-duration:0.5s;
	animation-delay:0.6s;
}
@keyframes %css-ctar%-kf-pic-hover {
	50% {
		transform:scale(1.05)
	}
}
/* hover : balbox, triangle, pic */
.%css-ctar% .aiin-balbox,
.%css-ctar% .aiin-triangle,
.%css-ctar% .aiin-pic {
	transition:border-color 0.6s;
}
.%css-ctar% .aiin-btn:hover .aiin-balbox,
.%css-ctar% .aiin-btn:hover .aiin-triangle,
.%css-ctar% .aiin-btn:hover .aiin-pic {
	border-color:#FF69B4;
}
.%css-ctar% .aiin-btn:hover .aiin-pic {
	box-shadow:0 0 2px 0 #FF69B4;
}
/* hover : balloon */
.%css-ctar% .aiin-btn:hover .aiin-balloon {
	animation-name:%css-ctar%-kf-balloon-hover;
	animation-iteration-count:2;
	animation-duration:1s;
	animation-delay:0.6s;
	animation-timing-function:linear;
	transform-origin:50% 100%;
}
@keyframes %css-ctar%-kf-balloon-hover {
	25% {
		transform:scale(1.2) rotateZ(10deg);
	}
	50% {
		transform:scale(1) rotateZ(0);
	}
	75% {
		transform:scale(1.2) rotateZ(-10deg);
	}
}
/* hover : label */
.%css-ctar% .aiin-label {
	transition:color 0.6s;
}
.%css-ctar% .aiin-btn:hover .aiin-label {
	color:#FF69B4;
	text-shadow:0 0 1px #FF69B4;
}
.%css-ctar% .aiin-btn:hover .aiin-label {
	animation-name:%css-ctar%-kf-label-hover;
	animation-iteration-count:2;
	animation-delay:0.6s;
	animation-duration:1s;
	animation-timing-function:linear;
}
@keyframes %css-ctar%-kf-label-hover {
	25% {
		transform:scale(1.25) rotateZ(15deg);
	}
	50% {
		transform:scale(1) rotateZ(0);
	}
	75% {
		transform:scale(1.25) rotateZ(-15deg);
	}
}
/* hover : vcnt-ctar */
.%css-ctar% .aiin-btn:hover .aiin-vcnt-ctar {
	animation-name:%css-ctar%-kf-vcnt-ctar-hover;
	animation-iteration-count:4;
	animation-duration:0.5s;
	animation-delay:0.6s;
}
@keyframes %css-ctar%-kf-vcnt-ctar-hover {
	50% {
		transform:scale(1.05)
	}
}
/* hover : aiin-vcnt-bg-off */
.%css-ctar% .aiin-vcnt-bg-off {
	background-color:#ccc;
	background:linear-gradient(to left,
		transparent,
		#ccc 20%,
		#ccc 80%,
		transparent);
	opacity:1;
	transition:opacity 0.6s;
}
.%css-ctar% .aiin-btn:hover .aiin-vcnt-bg-off {
	opacity:0;
}
/* hover : aiin-vcnt-bg-on */
.%css-ctar% .aiin-vcnt-bg-on {
	background-color:#FF69B4;
	background:linear-gradient(to left,
		transparent,
		#FF69B4 20%,
		#FF69B4 80%,
		transparent);
	text-shadow:0 0 1px #FF69B4;
	opacity:0;
	transition:opacity 0.6s;
}
.%css-ctar% .aiin-btn:hover .aiin-vcnt-bg-on {
	opacity:1;
}