@charset 'UTF-8';

#headContainer > img {
	float:left;
	width:48%;
}
#headContainer .article {
	float:right;
	width:48%;
}
#headContainer h2 {
	font-size:18px;font-size:1.8rem;
	color: #46821e;
	padding: 10px 0;
}
#headContainer p {
	font-size:16px;font-size:1.6rem;
}

#calendar h2 {
	font-size:24px; font-size:2.4rem;
	text-align:center;
	color:#fff;
	background-color:#8fb01d;
	border-radius:5px;
	margin-bottom:30px;
	position:relative;
}
#calendar h2:before {
	content:'';
	position:absolute;
	bottom:-34px;
	left:50%;
	border:20px solid transparent;
	border-top:20px solid #8fb01d;
	margin-left:-20px;
}
#calendar ul {
	text-align:center;
	font-size:16px;font-size:1.6rem;
}
#calendar li {
	display:inline-block;
	width:4em;
	border:1px solid #46821e;
	border-radius:5px;
	margin:0 10px;
}
#calendar li a {
	color:#46821e;
}
#calendar li a:hover {
	text-decoration:none;
}
#headContainer, #calendar, .month {
	margin-bottom:50px;
}

.month h2 {
	font-size:16px; font-size:1.6rem;
	text-align:center;
	border:1px solid #8fb01d;
	border-radius:5px;
	margin-bottom:30px;
	position:relative;
}
.month h2:before {
	content:'';
	position:absolute;
	bottom:-32px;
	left:50%;
	border:16px solid transparent;
	border-top:16px solid #8fb01d;
	margin-left:-16px;
}
.month h2:after {
	content:'';
	position:absolute;
	bottom:-30px;
	left:50%;
	border:16px solid transparent;
	border-top:16px solid #fff;
	margin-left:-16px;
}

.month li {
	float:left;
	width:31.3333%;
	margin:0 1% 50px;
}
.month li:nth-child(3n+1) {
	clear:left;
}
.month li > a:first-child {
	position: relative;
	overflow: hidden;
	min-width: 200px;
	min-height: 200px;
	background-color:#f5f5dc;
}
.month li > a 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%);
}
.month h3 {
	overflow:hidden;
	font-size:18px; font-size:1.8rem;
	text-overflow:ellipsis;
	white-space:nowrap;
	margin-top:0.5em;
}
.month p {
	font-size:16px; font-size:1.6rem;
	margin:0.5em 0;
}
.month+a {
	width:30%;
	margin:0 auto;
}

@media (max-width: 800px) {
	#headContainer > img,
	#headContainer .article {
		float:none;
	}
	#headContainer > img,
	#headContainer .article {
		width:90%;
		padding:5% 5% 0;
	}
	#calendar h2 {
		font-size:2.0rem;
		width:90%;
		margin:0 auto 30px;
	}
	#calendar li {
		margin-bottom:1em;
	}
	#calendar li a {
		padding:1em 0;
	}
	.month h2 {
		width:90%;
		margin:0 auto 30px;
	}
	.month ul {
		width:90%;
		padding:5%;
	}
	.month li {
		float:none;
		width:100%;
		margin:0 0 30px 0;
	}
	.month li:last-child {
		margin-bottom:0;
	}
}