@charset "utf-8";

.event {
	max-width: 1000px;
	margin: auto;
	padding-top: 100px;
}
.event h2 {
	margin-bottom: 50px;
}
.event p {
	margin-bottom: 20px;
}
.event-detail {
	background: rgba(255, 255, 255, 0.5);
	border: 2px solid #9e7f5d;
	border-radius: 20px;
	max-width: 900px;
	margin: 30px auto 50px;
	padding: 30px 40px;
}
.event-detail dl {
	display: flex;
}
.event-detail dl + dl {
	margin-top: 20px;
}
.event-detail dl dt {
	width: 180px;
	text-align: right;
}
.event-detail dl dd {
	padding-left: 20px;
}
.event .eventLink {
	color: #fff;
	background: #6a3906;
	border-radius: 5px;
	font-weight: bold;
	padding: 10px 30px;
	display: block;
	width: 450px;
	margin: 30px auto 50px;
	text-align: center;
	border: #6a3906 2px solid;
}
.event figure {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
.event figure a {
	display: block;
	width: calc(50% - 15px);
}
.event figure a img {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 767px) {
	.event {
		max-width: 100%;
		padding-top: 50px;
	}
	.event h2 {
		margin-bottom: 20px;
	}
	.event p {
		width: 90%;
		margin: 0 auto 15px;
	}
	.event-detail {
		border-radius: 15px;
		max-width: 90%;
		margin: 20px auto 40px;
		padding: 20px;
	}
	.event-detail dl {
		flex-direction: column;
	}
	.event-detail dl + dl {
		margin-top: 20px;
	}
	.event-detail dl dt {
		width: 100%;
		text-align: center;
		margin-bottom: 5px;
	}
	.event-detail dl dd {
		text-align: center;
		padding-left: 0;
	}
	.event .eventLink {
		width: 90%;
		padding: 10px 0;
	}
	.event figure {
		flex-direction: column;
	}
	.event figure a {
		width: 90%;
		max-width: 640px;
		margin: 0 auto;
	}
	.event figure a + a {
		margin-top: 20px;
	}
}