/* CSS Document */
.container article.guardian{
	margin: 0 auto;
	width: 980px;
	float: none;
}

.guardian_title-area {
	height: 476px;
	background: url(../imgs/obi/guardian.jpg) no-repeat right;
	background-size: cover;
}
.guardian_title-area .title{
	padding: 300px 0 0 20px;
	font-size: 214.2%;
	display: block;
	color: #00a0e8;
	letter-spacing: 0.1em;
}


.guardian_event {
  margin-top: 4rem;
  padding: 2rem 1rem 1rem;
  background: url(https://www.umds.ac.jp/wp-content/themes/umds/imgs/top/information/bg-events.png) no-repeat center center;
  background-size: cover;
  border-radius: 0.5rem;
}

.guardian_event_list {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
	gap: 1rem;
}

.guardian_event_list .cell {
	width: calc((100% - 2rem) / 3);
	background: #fff;
	border-radius: 0.5rem;
}
.guardian_event_list .cell a {
	color: #333;
	font-size: 14px;
	line-height: 1.4;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: .3s;
}
.guardian_event_list figure {
	padding: 1rem;
	background-color: #fff;
	border-radius: 0.5rem;
}
.guardian_event_list figure img {
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
}
.guardian_event_list figcaption {
	padding: 1rem 0 0;
	background-color: #fff;
}
.guardian_event_list .event_date {
	margin-bottom: 0.25rem;
	display: flex;
	justify-content: space-between;
}
.guardian_event_list .event_day{
	font-size: 0.875rem;
	font-weight: 700;
	color: #00a0e8;
	letter-spacing: .075em;
}
.guardian_event_list .cat{
	padding: 2px 7px;
	color: #fff;
	font-size: 0.75rem;
	display: inline-block;
	border-radius: 0.2rem;
	background: #8cc31e;
}

.guardian_event_list .event_title{
	margin-bottom: 0.25rem;
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 700;
	color: #333;
}
.guardian_event .top-events__link a{line-height: 0;}

@media screen and (max-width:768px) {
	.container article.guardian{
		width: 100%;
	}
	.guardian_title-area {
		height: 220px;
		background-size: cover;
	}
	.guardian_title-area .title {
		padding: 110px 0 0 10px;
		font-size: 171.4%;
	}
	
	.guardian_event_list {
		flex-direction: column;
	}
	.guardian_event_list .cell {
		width: 100%;
	}
}