/* =================================
	character
================================= */
div.outer {
	padding-top:10px;
	margin-top:-10px;
	position:relative;
}

figure.chara-pic p {
/*	border:2px solid #0c9a96; */
	background-color:hsla(128,77%,40%,1);
	background-color:#5c2c16;
	padding:3px;
}
figure.chara-pic p span, figure.chara-pic p span img {
	display:block;
}
figure.chara-pic p span {
	position:relative;
	height:0;
	background-repeat:no-repeat;
	background-size:cover;
	padding-top:133.3333333333%;
}
figure.chara-small p span {
	padding-top:100%;
}
figure.chara-pic p span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
figure.chara-pic p span.lazy-done {
	-webkit-animation: fadeIn 700ms;
	animation: fadeIn 700ms;
}

div.inner > dl {
	background-image:url(../img/badge.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
}
div.inner > dl dt {
	font-weight:700;
	color:#5c2c16;
}
div.inner > dl dt rt {
	font-weight:normal;
	color:#5c2c16;
}

div.inner > dl dt {
	/**/
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:baseline;
	/**/
	line-height:1.5;
	border-style:solid;
	border-bottom-width:3px;
	border-color:#5c2c16;
	padding-bottom:0.2em;
	margin-bottom:20px;
}

div.inner > dl dt span.nm {
	color:#5c2c16;
}

@media all and (min-width: 768px) {
div.outer:not(:last-child) {
	margin-bottom:30px;
}

div.inner {
	display:flex;
}

figure.chara-pic {
	width:30%;
	margin-right:3%;
}
div.inner > dl {
	width:67%;
}

div.inner > dl dt span.role {
	font-size:225%;
}
div.inner > dl dt span.nm {
	font-size:150%;
}

}
@media all and (max-width: 767px) {
div.outer {
	padding:20px 0;
}

div.outer:not(:last-child) {
	margin-bottom:30px;
}

figure.chara-pic {
	margin:0 20%;
}
figure.chara-pic p {
	margin-bottom:12px;
}

div.inner > dl dt span.role {
	font-size:150%;
}
div.inner > dl dt span.nm {
	font-size:112.5%;
}
}



@media print {
figure.chara-pic {
	display:none;
}
}