/*	Top Character
============================== */
div.chara {
	position:relative;
}
div.chara:after {
	display:block;
	content:"";
	background-image:url(../img/kobaton1.png);
	background-size:cover;
	width:94px;
	height:102px;
	margin:0 auto;
}
div.chara article {
	text-align:left;
}
div.chara article header h2 {
	position:relative;
	text-shadow:2px 3px 4px hsla(0,0%,0%,0.6);
	font-weight:normal;
	line-height:1.25;
	text-align:center;
	margin-bottom:0.5em;
}
div.chara article header h2:before {
	position:absolute;
	content:"Character";
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image: -webkit-gradient(linear, center top, center bottom, from(#d6a000), color-stop(0.25, #edb203), color-stop(0.55, #fff0cc), color-stop(0.6, #d6a000), color-stop(0.8, #fceba5), to(#d6a000));
	background-image: linear-gradient(to bottom, #d6a000, #edb203 25%, #fff0cc 55%, #d6a000 60%, #fceba5 80%, #d6a000);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	text-shadow:none;
}
@media all and (min-width: 768px) {
div.chara {
	padding:40px 0;
}
div.chara article {
	max-width:800px;
	margin:0 auto;
}
div.chara article header h2 {
	font-size:500%;
	/* padding-left:40px; */
}
}
@media all and (max-width: 767px) {
div.chara {
	padding:25px 0;
}
div.chara article header h2 {
	font-size:12vw;
}
}

div.carousel {
	position:relative;
}
div.carousel div.outer {
	position:relative;
	margin:0 30px;
	overflow:hidden;
}
div.carousel div.outer ul {
	position:absolute;
	display:table;
	-webkit-transform: translateZ(0);
}
div.carousel div.outer ul.inner li {
	display:table-cell;
	padding-right:6px;
}
div.carousel div.outer ul.inner li > span,
div.carousel div.outer ul.inner li > span a,
div.carousel div.outer ul.inner li > span img {
	display:block;
}
div.carousel div.outer ul.inner li > span {
	text-decoration:none;
	background-color:hsla(0,0%,100%,0.5);
	/**/
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration: 0.5s;
	transition-timing-function:ease-in-out;
	transition-property:opacity, transform;
	opacity:0.5;
	transform:scale(0.7);
	/**/
	border-radius:50%;
	overflow:hidden;
}
div.carousel div.outer ul.inner li.yes > span {
	opacity:1;
	transform:scale(1);
}
div.carousel div.outer ul.inner li > span {
	position:relative;
	background-position:left top;
	background-size:cover;
}

@media all and (min-width: 768px) {
div.carousel {
	margin-bottom:30px;
}
div.carousel div.outer {
	height:340px;
}
div.carousel div.outer ul.inner li > span img {
	width:320px;
	height:320px;
}
}
@media all and (min-width: 375px) and (max-width: 767px) {
div.carousel {
	margin-bottom:20px;
}
div.carousel div.outer {
	height:220px;
}
div.carousel div.outer ul.inner li > span img {
	width:200px;
	height:200px;
}
}
@media all and (max-width: 374px) {
div.carousel {
	margin-bottom:10px;
}
div.carousel div.outer {
	height:140px;
}
div.carousel div.outer ul.inner li > span img {
	width:130px;
	height:130px;
}
}



/*	disc
============================== */
div.carousel ul.ctrl-disc {
	text-align:center;
	height:34px;
	/* background-color:hsla(0,0%,100%,0.5); */
}
div.carousel ul.ctrl-disc li {
	display:inline-block;
	width:24px;
	padding-top:9px;
}
div.carousel ul.ctrl-disc li a {
	display:inline-block;
	text-decoration:none;
	width:16px;
	height:16px;
	background-color:#fff;
	border-radius:8px;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.carousel ul.ctrl-disc li a.now {
	background-color:#fc0;
}

/*	arrow
============================== */
div.carousel ul.ctrl-arrow li {
	position:absolute;
	top:50%;
	margin-top:-17px;
}
div.carousel ul.ctrl-arrow li.ctrl-lef {
	left:0;
}
div.carousel ul.ctrl-arrow li.ctrl-rig {
	right:0;
}
div.carousel ul.ctrl-arrow li a {
	display:block;
	width:24px;
	height:34px;
	background-image:url(../img/arrow40.svg);
	background-repeat:no-repeat;
	background-size:136px 34px;
	text-indent:110%;white-space:nowrap;overflow:hidden;
	background-color:#ea7b00;
}
div.carousel ul.ctrl-arrow li a:hover {
	background-color:#fc0;
}
div.carousel ul.ctrl-arrow li.ctrl-lef a {
	background-position:-5px 0;
	background-position:-73px 0;
}
div.carousel ul.ctrl-arrow li.ctrl-rig a {
	background-position:-39px 0;
	background-position:-107px 0;
}
div.carousel ul.ctrl-arrow li.ctrl-lef a:hover {
	background-position:-73px 0;
}
div.carousel ul.ctrl-arrow li.ctrl-rig a:hover {
	background-position:-107px 0;
}
@media all and (min-width: 768px) {
div.carousel ul.ctrl-arrow li {
	/* top:101px; */
}
}
@media all and (min-width: 375px) and (max-width: 767px) {
div.carousel ul.ctrl-arrow li {
	/* top:51px; */
}
}
@media all and (max-width: 374px) {
div.carousel ul.ctrl-arrow li {
	/* top:40px; */
}
}


@media print {
div.carousel {
	display:none;
}
}