/* btn */
.%css-ctar% .aiin-btn {
	position:relative;
	width:150px;
	height:150px;

	cursor:pointer;
	user-select:none;
	-moz-user-select:none;
	-webkit-tap-highlight-color:transparent;
	line-height:1;
	/* cut off sticking-out corners for chrome */
	overflow:hidden;
	z-index:0;
	border-radius:5px;
	xborder:1px solid #ffc5a1;
}
.%css-ctar% .aiin-btn.aiin-sel {
}
.%css-ctar% .aiin-btn.aiin-not-allowed {
	cursor:default;
}
/* board */
.%css-ctar% .aiin-board {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	animation-name:%css-ctar%-kf-board-hover;
	animation-iteration-count:infinite;
	animation-duration:30s;
	animation-timing-function:linear;
	animation-play-state:paused;
}
.%css-ctar% .aiin-btn:hover .aiin-board {
	animation-play-state:running;
}
@keyframes %css-ctar%-kf-board-hover {
	100% {
		transform:rotateZ(360deg);
	}
}
/* varea */
.%css-ctar% .aiin-varea {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:150%;
	height:150%;
	background:url("%url-tpl%img/bg.jpg");
	background-size:100% 100%;
	background-position:center center;
	opacity:1;
}
.%css-ctar% .aiin-btn:hover .aiin-contents {
	transform:translateY(-300%);
}
/* star */
.%css-ctar% .aiin-star {
	position:absolute;
	width:3px;
	height:3px;
	background:rgba(255,255,255,0.5);
	border-radius:50%;
	box-shadow:0 0 5px 0 #fff;
	opacity:0;

	animation-name:%css-ctar%-kf-star-hover;
	animation-iteration-count:infinite;
	animation-duration:8s;
	animation-timing-function:ease;
	animation-play-state:paused;
}
.%css-ctar% .aiin-btn:hover .aiin-star {
	animation-play-state:running;
}
@keyframes %css-ctar%-kf-star-hover {
	0% {
		opacity:1;
	}
	10% {
		opacity:0;
	}
}
.%css-ctar% .aiin-star-1 {
	top:31%;
	left:13%;
	animation-delay:1s;
}
.%css-ctar% .aiin-star-2 {
	top:74%;
	left:54%;
	animation-delay:2s;
}
.%css-ctar% .aiin-star-3 {
	top:12%;
	left:75%;
	animation-delay:3s;
}
.%css-ctar% .aiin-star-4 {
	top:12%;
	left:43%;
	animation-delay:4s;
}
.%css-ctar% .aiin-star-5 {
	top:74%;
	left:82%;
	animation-delay:5s;
}
.%css-ctar% .aiin-star-6 {
	top:35%;
	left:36%;
	animation-delay:6s;
}
.%css-ctar% .aiin-star-7 {
	top:69%;
	left:14%;
	animation-delay:7s;
}
.%css-ctar% .aiin-star-8 {
	top:47%;
	left:66%;
	animation-delay:8s;
}
/* panel-ctar */
.%css-ctar% .aiin-panel-ctar {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	perspective:100px;
}
/* panel-road */
.%css-ctar% .aiin-panel-road {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transform-origin:bottom center;
	transform:rotateX(60deg);
	transform:rotateX(60deg);
}
/* label */
.%css-ctar% .aiin-label {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	color:#fff;
	font-weight:bold;
	font-size:36px;
	text-shadow:0 5px 5px #888;
	text-align:center;

	animation-name:%css-ctar%-kf-label-hover;
	animation-iteration-count:infinite;
	animation-duration:6s;
	animation-timing-function:linear;
	animation-play-state:paused;
}
/* for ie9 */
@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
	.%css-ctar% .aiin-label {
		top:100px;
	}
}
.%css-ctar% .aiin-btn:hover .aiin-label {
	animation-play-state:running;
}
.%css-ctar% .aiin-label-1 {
	animation-delay:-1.6s;
}
.%css-ctar% .aiin-label-2 {
	animation-delay:-4.6s;
}
@keyframes %css-ctar%-kf-label-hover {
	0% {
		opacity:1;
		transform:rotateX(0) translateY(145px);
	}
	60% {
		opacity:1;
	}
	100% {
		opacity:0;
		transform:rotateX(30deg) translateY(0);
	}
}
/* vcnt */
.%css-ctar% .aiin-vcnt-ctar {
	position:absolute;
	top:10px;
	left:0;
	width:100%;
	height:30px;
	line-height:30px;
	text-align:center;
}
.%css-ctar% .aiin-vcnt {
	color:white;
	font-size:24px;
	text-shadow:
		0 0 1px #ff8,
		0 0 2px #ff8,
		0 0 3px #ff8;
}
.%css-ctar% .aiin-btn.aiin-sel:hover .aiin-vcnt {
	animation-name:%css-ctar%-kf-vcnt-hover;
	animation-iteration-count:1;
	animation-duration:0.6s;
	animation-timing-function:linear;
}
@keyframes %css-ctar%-kf-vcnt-hover {
	50% {
		text-shadow:
			0 0 1px #ff8,
			0 0 2px #ff8,
			0 0 3px #ff8,
			0 0 4px #ff8,
			0 0 5px #ff8,
			0 0 10px #ff8,
			0 0 20px #ff8,
			0 0 30px #ff8,
			0 0 40px #ff8,
			0 0 50px #ff8;
	}
}
/* check */
.%css-ctar% .aiin-check-ctar {
	position:absolute;
	top:50px;
	left:0;
	width:100%;
	height:20px;
	text-align:center;
}
.%css-ctar% .aiin-check {
	position:relative;
	margin:0 auto;
}
.%css-ctar% .aiin-check,
.%css-ctar% .aiin-check-back,
.%css-ctar% .aiin-check-front {
	width:18px;
	height:18px;
}
.%css-ctar% .aiin-check-back,
.%css-ctar% .aiin-check-front {
	position:absolute;
	top:0;
	left:0;
	background:url("%url-tpl%img/check.png");
	background-size:100% 100%;
	opacity:0;
	transition:transform 0.6s, opacity 0.6s;
}
.%css-ctar% .aiin-check-front {
	transform:rotateZ(-180deg) scale(20,0.1);
}
.%css-ctar% .aiin-check-back {
	transform:rotateZ(-360deg) scale(20,0.1);
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-check-front {
	opacity:0.8;
	transform: rotateZ(0) scale(1);
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-check-back {
	opacity:0.5;
	transform: rotateZ(0) scale(1.3);
}