@charset 'UTF-8';

ul.infoList li {
	float:left;
	width:31.3333%;
	margin:0 1% 50px;
}
ul.infoList li:nth-child(3n+1) {
	clear:left;
}
ul.infoList li div {
	position: relative;
	overflow: hidden;
	min-width: 200px;
	min-height: 200px;
	background-color:#f5f5dc;
	margin-bottom:0.5em;
}
ul.infoList li div img {
	width: 400px;
	min-height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
ul.infoList div {
	padding:0 0 10px;
}
ul.infoList h3 {
	overflow:hidden;
	font-size:18px; font-size:1.8rem;
	text-overflow:ellipsis;
	white-space:nowrap;
}
ul.infoList p,ul.infoList span {
	overflow:hidden;
	font-size:16px; font-size:1.6rem;
	height:3em;
	margin:0.5em 0;
}
ul.infoList span {
	font-weight:600;
}
ul.infoList a, ul.infoList a:visited, ul.infoList a:hover {
	font-weight:normal;
	text-decoration:none;
}

/*detail*/
div.info {
	max-width:700px;
	margin:0 auto;
}
span.date,
div.article p {
	font-size:16px; font-size:1.6rem;
}
span.date {
	font-weight:600;
}
h2 {
	font-size:20px; font-size:2.0rem;
	margin-bottom:1em;
}
div.info > img {
	margin:0 auto 30px;
}
div.detail {
	text-align:center;
	font-size:14px; font-size:1.4rem;
	border:1px solid #8fb01d;
	border-radius:5px;
	padding:10px;
	margin-top:30px;
}
a.pdf {
	background:url('../images/info/ico_pdf.png') no-repeat left center;
}
a.site {
	background:url('../images/info/ico_site.png') no-repeat left center;
}
div.detail a {
	display:inline-block;
	padding-left:25px;
	margin-bottom:10px;
}
div.detail a:last-child {
	margin-bottom:0;
}
div.info+a {
	clear:both;
	width:30%;
	margin:50px auto 0;
}

@media (max-width: 800px) {
	ul.infoList {
		width:90%;
		padding:5%;
	}
	ul.infoList li {
		width:48%;
		margin:0 1% 5%;
	}
	ul.infoList li:nth-child(3n+1) {
		clear:none;
	}
	ul.infoList li:nth-child(2n+1) {
		clear:left;
	}
	div.info+a {
		margin-bottom:20px;
	}
}
@media (max-width: 500px) {
	ul.infoList li {
		float:none;
		width:100%;
		margin:5% 0;
	}
	div.info {
		max-width:90%;
		padding:5%;
	}
}