@charset "utf-8";

/* shippei.jp : report.css */


.mfp-close, 
.mfp-counter {
	color: #000 !important;
}


.linkTOP {
	display: block;
	width: 220px;
	margin: 0 auto 30px auto;
	padding: 10px;
	border: 1px solid #f9be00;
	font-size: 1.4rem;
}
.linkTOP:hover,
.linkTOP:active {
	color: #e83421;
}


/*======================================================================*
*  [ reportImg ] 
*======================================================================*/

.reportImg {
	background-color: #fdede4;
	background-image: url(../img/report_bg.png), url(../../img/main_deco.png), url(../../img/main_bg.png);
	background-position: center bottom, center center, center center;
	background-repeat: repeat-x, no-repeat, no-repeat;
	background-size: auto 30%, auto 100%, auto 120%;
}
.reportImg > div {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px 0 20px 0;
	background: url(../img/report_shippei.png) left bottom no-repeat;
	background-size: 32% auto;
}
.reportImg h1 {
	margin-bottom: 6.3%;
	padding: 0 3.5% 0 25.5%;
}
.reportImg h1 + div {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	padding: 0 3.5% 0 30%;
}
.reportImg .date {
	padding-right: 1.2%;
	margin-right: 1.2%;
	border-right: 1px solid #fff;
}
.reportImg img { display: block; }

@media screen and (max-width: 568px) {
	.reportImg {
		background-size: auto 50%, auto 100%, auto 120%;
	}
	.reportImg > div {
		padding: 15px 0;
		background-position: left -5% bottom -50%;
		background-size: 40% auto;
	}
	.reportImg > div > * {
		padding: 0 3.5%;
	}
	.reportImg h1 {
		margin-bottom: 12%;
	}
	.reportImg h1 + div {
		display: block;
		padding: 0 8% 0 42%;
	}
	.reportImg .date {
		padding-right: 0;
		margin: 0 0 3%;
		border-right: none;
	}
} /* */



/*======================================================================*
 *  [ mainContent ] 
 *======================================================================*/

.mainContent {
	padding-top: 50px;
}


/*======================================================================*
 *  [ reportBox ] 
 *======================================================================*/

.reportBox {
	margin: 0 0 50px 0;
}
.reportBox p {
	margin: 0 0 30px 0;
}

.reportBox ul {
	list-style: none;
	max-width: 960px;
	margin: 0 auto;
}
.reportBox li {
	float: left;
	width: calc(25% - 10px);
	margin: 5px;
	padding: 0;
}
.reportBox li img {
	display: block;
}

@media screen and (max-width: 568px) {
	.reportBox ul {
		margin: 0 -15px;
	}
	.reportBox li {
		width: calc(33.33% - 10px);
	}	
} /* */

