@charset "utf-8";
body{
	color:#624B26;
}

.event_area{
	position:relative;
	margin-top:20px;
	margin-left:20px;
}

.event_area ul{
	justify-content: flex-start;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	margin-top:10px;
	position:relative;
	z-index:3;
}

.event_area ul li:first-child{
	width:50px;
}

.event_area ul li:last-child{
	flex:1;
}

.event_area ul li span{
	color:#ff0000;
}

.month_event dl{
	justify-content: flex-start;
	display:flex;
	flex-wrap:wrap;
	background:url(../image/event/line.gif) repeat-x left bottom;
	padding:10px 0;
}

.month_event dl dt{
	width:85px;
	padding:5px 0;
}

.month_event dl dt span{
	background-color:#765c2f;
	display:block;
	padding:3px 5px;
	border-radius:10px;
	color:#fff;
	text-align:center;
	width:60px;
}

.month_event dl dd{
	flex:1;
	padding:8px 0;
}

.month_event dl dd span{
	color:#ff0000;
}



@media only screen and (min-width: 768px) {
	.conetnt_area{
		padding:30px 15px;
	}


	.event_area ul.month5{
		margin-left:15px;
	}

	.event_area ul.month6{
		margin-left:30px;
	}

	.event_area ul.month7{
		margin-left:45px;
	}

	.event_area ul.month8{
		margin-left:50px;
	}

	.event_area ul.month9{
		margin-left:60px;
	}

	.event_area ul.month10{
		margin-left:75px;
	}

	.event_area ul.month11{
		margin-left:90px;
	}

	.event_area ul.month12{
		margin-left:105px;
	}

	.event_area ul.month1{
		margin-left:120px;
	}

	.event_area ul.month2{
		margin-left:135px;
	}

	.event_area ul.month3{
		margin-left:150px;
	}

	.event_line{
		border: solid 1px #624B26;
		position: absolute;
		width: 536px;
		transform: rotate(74deg);
		top: 263px;
		left: -180px;
		z-index:2;
	}

	.attend{
		position:absolute;
		left:-30px;
		bottom:0;
		z-index:1;
	}

	.event_image{
		position:absolute;
		right:0;
		top:-45px;
		z-index:1;
	}

	.month_event{
		margin-top:20px;
		margin-left:20px;
		position:relative;
	}

	.month_event dl{
		max-width:280px;
	}

	.month_image{
		position:absolute;
		top:0;
		right:-15px;
	}


}

@media only screen and (max-width: 1000px) {

}

@media only screen and (max-width: 767px) {
	.event_line{
		border: solid 1px #624B26;
		position: absolute;
		width: 536px;
		transform: rotate(90deg);
		top: 274px;
		left: -252px;
		z-index:2;
	}

}

@media only screen and (max-width: 375px) {

}

@media only screen and (max-width: 320px) {


}