/* =================================
	drama report CSS
================================= */

/*	reset
============================== */

div.board {
	/*background-color:transparent;*/
}
@media all and (min-width: 768px) {
div.board {
	/* padding:0; */
}
main > article > header {
	height:110px;
}
}
@media all and (max-width: 767px) {
div.board {
	/* padding:0; */
}
}


/*	copy
============================== */

div.copy {
	position:relative;
}
div.copy > span, div.copy > span > img {
	display:block;
}
div.copy > span {
	position:absolute;
	top:50%;
}
div.copy p {
	text-align:center;
	background-color:hsla(0,0%,100%,0.7);
	line-height:1.5;
	font-size:87.5%;
}
div.copy > span.lazy-done {
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
}
@media all and (min-width: 768px) {
div.copy {
	margin-bottom:12px;
}
div.copy > span {
	width:200px;
	height:63px;
	margin-top:-32px;
	left:28px;
	z-index:6;
}
div.copy p {
	font-size:100%;
	text-align:right;
	/* border-radius:20px; */
	padding:12px 20px;
}
}
@media all and (max-width: 767px) {
div.copy {
	margin-bottom:12px;
}
div.copy > span {
	background-size:cover;
	width:127px;
	height:40px;
	margin-top:-20px;
	left:16px;
	z-index:6;
}
div.copy p {
	text-align:right;
	/* border-radius:12px; */
	padding:8px 12px;
	/* padding-right:63px; */
	padding-left:146px;
}
}



article.unit {
	background-image:url(../img/bg_dot_trans.png);
}
article.house {
	background-color:#8cdcbe;
}
article.fish {
	background-color:#fce682;
}
article.flower {
	background-color:#ffc2c2;
}
article.bugs {
	background-color:#7be0e0;
}
article.unit header {
	color:#000;
}
article.unit header h2 {
	line-height:1.5;
}
article.unit header p {
	background-color:hsla(0,0%,100%,0.5);
	line-height:1.5;
/*	font-family:'Passion One', 'sans serif';
	font-weight:normal; */
	text-align:right;
	font-size:75%;
}
article.unit div.unit-inner {
	background-color:hsla(0,0%,100%,0.9);
	-webkit-background-clip:padding-box;
	background-clip:padding-box;
}
article.unit div.unit-inner p.txt {
	line-height:1.6;
	font-size:87.5%;
}
article.unit div.unit-inner p.txt:not(:last-child) {
	margin-bottom:1.6em;
}
@media all and (min-width: 768px) {
article.unit {
	position:relative;
	-webkit-background-clip:content-box;
	background-clip:content-box;
}
div.board article.unit:not(:last-child) {
	margin-bottom:30px;
}
article.house, article.fish {
	padding-right:90px;
}
article.bugs, article.flower {
	padding-left:90px;
}
article.unit header h2 {
	padding:10px 25px;
}
article.unit header p {
	padding-right:25px;
}
article.unit div.unit-inner {
	padding:20px;
	border:5px solid transparent;
}
}
@media all and (max-width: 767px) {
div.board article.unit:not(:last-child) {
	margin-bottom:20px;
}
article.unit header h2 {
	font-size:87.5%;
	padding:6px 14px;
}
article.unit header p {
	padding-right:14px;
}
article.unit div.unit-inner {
	padding:12px;
	border:5px solid transparent;
}
}



article.unit > span,
article.unit > span > img {
	display:block;
}
article.unit > span.lazy-done {
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
}
@media all and (min-width: 768px) {
article.unit > span {
	position:absolute;
	bottom:0;
	background-position:left top;
}
article.fish > span,
article.house > span {
	right:0;
}
article.bugs > span,
article.flower > span {
	left:0;
}
article.unit > span,
article.unit > span > img {
	width:120px;
}
article.fish > span,
article.fish > span > img {
	height:129px;
}
article.house > span,
article.house > span > img {
	height:111px;
}
article.flower > span,
article.flower > span > img {
	height:80px;
}
article.bugs > span,
article.bugs > span > img {
	height:120px;
}
}
@media all and (max-width: 767px) {
article.unit {
	overflow:hidden;
}
article.unit > span {
	background-position:left center;
	background-repeat:repeat-x;
}
article.fish > span {
	background-size:78px 50px;
}
article.house > span {
	background-size:83px 44px;
}
article.flower > span {
	background-size:117px 44px;
}
article.bugs > span {
	background-size:68px 44px;
}
article.unit > span > img {
	height:50px;
}
}




/*	figure
============================== */

article.unit figure p span,
article.unit figure p span img {
	display:block;
}
article.unit figure p span {
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
article.unit figure p span.lazy-done {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
article.unit figure p {
	overflow:hidden;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin:0 auto 6px;
	border-style:solid;
}
article.unit figure figcaption {
	text-align:center;
	line-height:1.5;
}
article.unit figure figcaption span {
	padding:0.2em 0.5em;
}
article.house figure p {
	background-color:#89d9bd;
	border-color:#89d9bd;
}
article.house figure figcaption span {
	background-color:#c4ecde;
}
article.flower figure p {
	background-color:#ffc2c2;
	border-color:#ffc2c2;
}
article.flower figure figcaption span {
	background-color:#ffe0e0;
}
article.fish figure p {
	background-color:#fce682;
	border-color:#fce682;
}
article.fish figure figcaption span {
	background-color:#faf0be;
}
article.bugs figure p {
	background-color:#7be0e0;
	border-color:#7be0e0;
}
article.bugs figure figcaption span {
	background-color:#bef0f0;
}

@media all and (min-width: 768px) {
article.unit figure:not(:last-child) {
	margin-bottom:25px;
}
article.unit figure p.yoko {
	width:430px;
}
article.unit figure p.yoko span,
article.unit figure p.yoko span img {
	width:420px;
	height:280px;
}
article.unit figure p.tate {
	width:290px;
}
article.unit figure p.tate span,
article.unit figure p.tate span img {
	width:280px;
	height:420px;
}
article.unit figure figcaption {
	font-size:83%;
}
}
@media all and (max-width: 767px) {
article.unit figure:not(:last-child) {
	margin-bottom:20px;
}
article.unit figure p.tate {
	width:180px;
}
article.unit figure p.tate span,
article.unit figure p.tate span img {
	width:172px;
	height:258px;
}
article.unit figure figcaption {
	font-size:75%;
}
}
@media all and (min-width: 375px) {
article.unit figure p {
	border-width:5px;
}
}
@media all and (min-width: 375px) and (max-width: 767px) {
article.unit figure p.yoko {
	width:292px;
}
article.unit figure p.yoko span,
article.unit figure p.yoko span img {
	width:282px;
	height:188px;
}
}
@media all and (max-width: 374px) {
article.unit figure p {
	border-width:4px;
}
article.unit figure p.yoko {
	width:234px;
}
article.unit figure p.yoko span,
article.unit figure p.yoko span img {
	width:226px;
	height:151px;
}
}


/*	prevnext
============================== */

div.prevnext ul {
	list-style-type:none;
}
div.prevnext ul li {
	width:40px;
}
div.prevnext ul li a,
div.prevnext ul li span {
	display:block;
	background-image:url(../img/arrow40.svg);
	background-repeat:no-repeat;
	background-size:160px 40px;
	text-indent:110%;white-space:nowrap;overflow:hidden;
	height:40px;
}
div.prevnext ul li a {
	background-color:#f0d6a8;
}
div.prevnext ul li span {
	background-color:hsla(60,54%,81%,0.25);
}
div.prevnext ul li:first-child {
	float:right;
}
div.prevnext ul li:last-child {
	float:left;
}
div.prevnext ul li:first-child a {
	background-position:-40px 0;
}
div.prevnext ul li:last-child a {
	background-position:left top;
}
div.prevnext ul li:first-child span {
	background-position:-120px 0;
}
div.prevnext ul li:last-child span {
	background-position:-80px 0;
}
@media all and (min-width: 768px) {
div.prevnext {
	margin-bottom:30px;
}
div.prevnext ul li a:hover {
	background-color:#e5b36d;
}
}
@media all and (max-width: 767px) {
div.prevnext {
	margin-bottom:20px;
}
}


/*	btn-s
============================== */
@media all and (min-width: 768px) {
p.btn-s {
	margin-left:140px;
	margin-right:140px;
}
}