/*	Top Character
============================== */
div.chara {
	background-color:#14321e;
	background-image: url(../img/bg_top_character.jpg);
	background-size:cover;
	background-position:center center;
	text-align:left;
	/**/
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	/**/
	overflow:hidden;
}
div.chara:before, div.chara:after {
	content:"";
	display:block;
	background-color:hsla(99,47%,35%,0.8);
	background-repeat:repeat-x;
	background-position:center center;
	width:100vw;
	z-index:1;
}
div.chara:before {
	-webkit-box-shadow:0 12px 32px 0 hsla(140,42%,13%,.6);
	box-shadow:0 12px 32px 0 hsla(140,42%,13%,.6);
}
div.chara:after {
	-webkit-box-shadow:0 -12px 32px 0 hsla(140,42%,13%,.6);
	box-shadow:0 -12px 32px 0 hsla(140,42%,13%,.6);
}
div.chara article {
	background-color:hsla(71,100%,92%,0.5);
	position:relative;
}
div.chara article header {
	/**/
	display:flex;
	justify-content: center;
	align-items: flex-end;
	/**/
	position:absolute;
	top:0;
	width:100vw;
	height:25%;
}
div.chara article header h2 {
	-webkit-transform: rotate(-4deg);
	transform: rotate(-4deg);
	font-weight:normal;
	line-height:1;
	text-align:center;
	margin-bottom:0.5em;
}
div.chara article header h2 span {
	display:inline-block;
	position:relative;
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.2, transparent), color-stop(0.2, hsla(56,48%,93%,0.8)), to(hsla(56,48%,93%,0.8)));
	background-image: linear-gradient(transparent 20%, hsla(56,48%,93%,0.8) 20%);
}
div.chara article ul {
	display:flex;
	align-items:center;
	position:absolute;
	bottom:0;
	height:70%;
}
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 {
	/**/
	-webkit-mask-image: url(../img/mask2.png);
	mask-image: url(../img/mask2.png);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/**/
	background-position:center top;
}
div.chara article ul li a.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}

div.chara article ul li.usa span {
	background-repeat:no-repeat;
	background-position:center center;
	background-size:50%;
}

@media all and (min-width: 768px) {
div.chara {
	height:100vh;
	min-height:720px;
}
div.chara:before, div.chara:after {
	height:30px;
}
div.chara article {
	height:calc(100vh - 60px);
}
div.chara article header h2 {
	font-size:600%;
}
div.chara article ul {
	width:4980px;
}
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.usa span {
	width: 180px;
}
div.chara article ul li:not(:last-child) {
	margin-right:60px;
}
}
@media all and (max-width: 767px) {
div.chara {
	height:calc(100vh - 72px);
}
div.chara:before, div.chara:after {
	height:24px;
}
div.chara article {
	height:calc(100vh - 48px);
}
div.chara article header h2 {
	font-size:14vw;
}
div.chara article ul {
	width:3500px;
}
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.usa span {
	width: 140px;
}
div.chara article ul li:not(:last-child) {
	margin-right:40px;
}
div.chara article ul li a {
	background-size:cover;
}
}

div.chara article ul li.usa,
div.chara article ul li.mgr0 {
	margin-right:0;
}