/*	Top Character
============================== */
div.chara {
	background-image: url(../img/bg_character.jpg?１);
	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-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);*/
	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 {
	font-weight:normal;
	line-height:1.25;
	margin-bottom:0.25em;
}
div.chara article header h2 span {
	/*background-image: -webkit-gradient(linear, left top, right bottom, from(hsla(280,56%,59%,1)), to(hsla(336,75%,62%,1)));
	background-image: linear-gradient(135deg, hsla(280,56%,59%,1), hsla(336,75%,62%,1));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;*/
	color: hsla(0,0%,100%,1.00);
	display:inline-block;
	position:relative;
	padding-bottom:0.1em;
	border-bottom:3px solid hsla(0,0%,100%,1.00);
}
/*div.chara article header h2 span:after{
  content: "";
  height: 3px;
  width: 100%;
  display: block;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, hsla(280,56%,59%,1), hsla(336,75%,62%,1));
  border-image-slice: 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:4380px;
	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:3780px;
/*	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;
}
}