/* =================================
	COMICS CSS
================================= */

/*	images
============================== */
p.imgs span {
	display:block;
}
p.imgs > span {
	position:relative;
	height:0;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
p.imgs span span {
	text-indent:110%;white-space:nowrap;overflow:hidden;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
p.imgs span.lazy-done,
div.flo-wrap figure span.lazy-done {
	-webkit-animation: fadeIn 1000ms;
	animation: fadeIn 1000ms;
}
p.comics-main > span {
	padding-top:50.8658008658009%;
}
p.comics-comic > span {
	padding-top:28.3%;
}


/*	inner
============================== */
@media all and (min-width: 768px) {
main > article div.wrap div.contents > div.inner {
	padding:40px 32px;
}
}
@media all and (max-width: 767px) {
main > article div.wrap div.contents > div.inner {
	padding:20px 12px;
}
}


/*	.subox
============================== */
section.subox {
	background-color:hsla(0,0%,100%,0.5);
}
section.subox h2 {
	color:#ff3366;
	text-shadow:1px 1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff;
	line-height:1.5;
	margin-bottom:1.25em;
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(56,100%,50%,0.9)), to(hsla(56,100%,50%,0.9)));
	background-image: linear-gradient(transparent 50%, hsla(56,100%,50%,0.9) 50%);
}
@media all and (min-width: 768px) {
section.subox {
	padding:24px;
}
div.inner section.subox:not(:last-child) {
	margin-bottom:30px;
}
section.subox h2 {
	font-size:150%;
	margin-right:70%;
	margin-left:-24px;
	padding-left:24px;
}
}
@media all and (max-width: 767px) {
section.subox {
	padding:10px;
}
div.inner section.subox:not(:last-child) {
	margin-bottom:20px;
}
section.subox h2 {
	font-size:112.5%;
	margin-right:40%;
	margin-left:-10px;
	padding-left:10px;
}
}

/*	.profile
============================== */

div.flo-wrap figure span, div.flo-wrap figure span img {
	display:block;
}
div.flo-wrap figure span {
	background-size:cover;
}
@media all and (min-width: 768px) {
div.flo-wrap figure {
	width:220px;
	float:left;
}
div.flo-wrap figure span, div.flo-wrap figure span img {
	width:220px;
	height:220px;
}
div.flo-wrap div.flo-rig {
	width:568px;
	float:right;
}
}
@media all and (max-width: 767px) {
div.flo-wrap figure {
	margin:0 60px 12px;
}
div.flo-wrap figure span {
	position:relative;
	height:0;
	padding-top:100%;
}
div.flo-wrap figure span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
}