/* css-ctar */
.%css-ctar% {
	display:block;
	width:100%;
}
/* btn-group */
.%css-ctar% .aiin-btn-group {
	position:relative;
	line-height:0;
	text-align:left;
}
/* btn-item */
.%css-ctar% .aiin-btn-item {
	display:inline-block;
	position:relative;
	width:100%;/* <<< column width */
}
/* btn */
.%css-ctar% .aiin-btn {
	position:relative;
	padding-bottom:60%; /* <<< height/width ratio  */
	width:100%;
	height:100%;
	font-weight:bold;
	color:#333;
	background-color:#eee;
	border:0px solid #888;
	overflow:hidden;

	cursor:pointer;
	user-select:none;
	-moz-user-select:none;
	-webkit-tap-highlight-color:transparent;
	line-height:1;
}
.%css-ctar% .aiin-btn.aiin-sel {
}
.%css-ctar% .aiin-btn.aiin-unsel {
}
.%css-ctar% .aiin-btn.aiin-not-allowed {
	cursor:default;
}
/* bg */
.%css-ctar% .aiin-bg {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-size:cover !important;
	background-position:center center !important;
}
/* cover */
.%css-ctar% .aiin-cover {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.5);
	transform:translate(0,-100%);
	transition:transform 0.6s;
}
.%css-ctar% .aiin-btn-group.aiin-dim-unsel .aiin-btn.aiin-unsel .aiin-cover {
	transform:translate(0,0);
}
/* label */
.%css-ctar% .aiin-label-sect {
	position:absolute;
	top:0;
	left:0;
	right:0;

	text-align:center;
	color:white;
	background-color:rgba(0,0,0,0.3);
}
.%css-ctar% .aiin-label {
	font-size:15px;
	line-height:1.2;
	vertical-align:-25%;
}
/* vcnt */
.%css-ctar% .aiin-vcnt-sect {
	position:absolute;
	bottom:3%;
	width:100%;
	text-align:center;

	transition:transform 0.6s, opacity 0.6s;
}
.%css-ctar% .aiin-btn-group.aiin-hide-vcnt-initially .aiin-vcnt-sect {
	opacity:0;
	transform:translate(0,300%);
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-vcnt-sect,
.%css-ctar% .aiin-btn.aiin-unsel .aiin-vcnt-sect {
	opacity:1;
	transform:translate(0,0);
}
.%css-ctar% .aiin-vcnt {
	display:inline-block;
	padding:2px 12px 1px 12px;

	font-family:"Arial";
	font-size:13px;
	line-height:1;
	letter-spacing:0.05em;

	color:white;
	background-color:rgba(0,0,0,0.3);
	border-radius:10px;
}
/* hover for label & vcnt */
.%css-ctar% .aiin-btn:hover .aiin-vcnt,
.%css-ctar% .aiin-btn:hover .aiin-label-sect {
	animation-name:%css-ctar%-kf-glowtxt;
	animation-iteration-count:1;
	animation-duration:2s;
}
@keyframes %css-ctar%-kf-glowtxt {
	20% {
		text-shadow:
			0 0 1px #ffc0cb,
			0 0 2px #ffc0cb,
			0 0 4px #ffc0cb,
			0 0 8px #ffc0cb,
			0 0 16px #ffc0cb;
		background-color:rgba(0,0,0,0.6);
	}
}
/* check */
.%css-ctar% .aiin-check-board {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
.%css-ctar% .aiin-check {
	position:absolute;
	bottom:4%;
	right:4%;
	width:12px;
	height:12px;
	background:url("%url-tpl%img/check.png");
	background-size:cover;
	background-position:center center;
	opacity:0;
	transform:rotateZ(-30deg) translate(-200px,-200px) scale(10);
	transition:opacity 1s, transform 1s;
}
.%css-ctar% .aiin-btn.aiin-sel .aiin-check {
	opacity:1;
	transform:rotateZ(0deg) translate(0px,0px) scale(1);
}
/* responsive */
@media (min-width:480px) {
	.%css-ctar% {
		display:inline-block;
		width:auto;
	}
	.%css-ctar% .aiin-btn-item {
		display:inline-block;
		width:210px; /* <<< width in inline mode */
		padding-right:0px; /* <<< right space in inline mode */
		padding-bottom:0px; /* <<< bottom space in inline mode */
	}
	.%css-ctar% .aiin-btn {
		display:inline-block;
	}
}