/*	Top Character
============================== */
div.chara {
	background-image: url(../img/bg_character.jpg?0);
	background-color:hsla(51,82%,66%,1);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	text-align:left;
}
div.chara article {
	background-color:hsla(51,82%,66%,0.4);
	position:relative;
	/**/
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	justify-content: center;
	/**/
	overflow:hidden;
}
div.chara article header {
	/**/
	display:flex;
	justify-content: center;
	align-items: flex-end;
	/**/
}
div.chara article header h2 {
	color:hsla(357,84%,74%,1);
	font-weight:normal;
	line-height:1;
	text-align:center;
	margin-bottom:0.5em;
}
div.chara article header h2 span {
	display:inline-block;
	position:relative;
	color:hsla(357,84%,74%,1);
/*	text-shadow:0 0 6px hsla(21,28%,34%,0.6); */
	padding-bottom:0.2em;
	border-bottom:2px solid hsla(357,84%,74%,1);
}
div.chara article ul {
	display:flex;
}
div.chara article ul li.nth-child(even) {
	transform:translateY(20px);
}
div.chara article ul li a, div.chara article ul li span {
	display:block;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.chara article ul li a {
	background-position:center top;
	background-size:cover;
	border-radius:50%;
	overflow:hidden;
}
div.chara article ul li a.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}


@media all and (min-width: 768px) {
div.chara {
}
div.chara article {
	height:100vh;
}
div.chara article header {
/*	padding-top:40px; */
	padding-bottom:60px;
}
div.chara article header h2 {
	font-size:600%;
}
div.chara article ul {
	width:4800px;
	padding-bottom:20px;
}
div.chara article ul li:first-child {
	margin-left:360px;
}
div.chara article ul li a, div.chara article ul li span {
	width: 360px;
	height: 360px;
}
div.chara article ul li:not(:last-child) {
	margin-right:60px;
}
}
@media all and (max-width: 767px) {
div.chara {
}
div.chara article {
	height:100vh;
/*	height:calc(100vh - 72px);*/
	height:100dvh;
/*	height:calc(100dvh - 72px);*/
}
div.chara article header {
/*	padding-top:5vh;*/
	padding-bottom:5vh;
}
div.chara article header h2 {
	font-size:14vw;
}
div.chara article ul {
	width:3400px;
/*	padding-bottom:2.5vh;*/
}
div.chara article ul li:first-child {
	margin-left:280px;
}
div.chara article ul li a, div.chara article ul li span {
	width: 280px;
	height: 280px;
}
div.chara article ul li:not(:last-child) {
	margin-right:40px;
}
}