/* CSS Document */
@import url("reset.css");
@import url("common.css");
@import url("styles.css");

/* H2
---------------------------------------------------------- */
#h2Hanger::after{ background-image: url("../img/campuslife/bg_h2.jpg");}







/* Event
---------------------------------------------------------- */
.calendar_hanger{ background-color: rgba(243,235,229,0.50)}
.calendar_hanger + .calendar_hanger { border-top: 1px dashed var(--mainColor);}

.calendar_hanger .month_box{
	width: 11.82%;
	background-color: rgba(243,235,229,1.00);
	border-right: 2px solid var(--mainColor);
	padding: 20px 0 30px 0;
	text-align: center;
}
.calendar_hanger .month_box p.num {
	font-size: 60px;
	line-height: 100%;
}
.calendar_hanger .month_box p.en {
	font-size: 13px;
	font-weight: bold;
	line-height: 100%;
}

.calendar_hanger .calendar_date{
	width: 88.18%;
	padding: 0 20px 0 57px;
}
.calendar_hanger .calendar_date .date_text {
	width: 44.3%;
	padding-right: 60px;
}
.calendar_hanger .calendar_date .date_photo{
	width: 27.85%;
	line-height: 0;
}

@media screen and (max-width: 690px){
	.calendar_hanger{	border-left: 2px solid var(--mainColor);}
	.calendar_hanger .month_box{
		width: 100%;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		border-right: 0;
		border-bottom: 1px dashed var(--mainColor);
		padding: 10px 28px;
	}
	.calendar_hanger .month_box{
		width: 100%;
		padding: 5px 15px;
	}
	.calendar_hanger .month_box p.num{
		display: inline-block;
		font-size: 45px;
	}
	.calendar_hanger .month_box p.en{
		display: inline-block;
		font-size: 13px;
		font-weight: bold;
		line-height: 100%;
	}
	.calendar_hanger .calendar_date{
		width: 100%;
		padding: 15px;
	}
	.calendar_hanger .calendar_date .date_text,
	.calendar_hanger .calendar_date .date_photo{ width: 100%;}	
}



/* Campusview
---------------------------------------------------------- */
.campusview_hanger .wp-block-group__inner-container{
	display: -webkit-box;
	display: flex;
  -webkit-box-pack: justify;
				justify-content: space-between;
	flex-wrap: wrap;	
}
.campusview_hanger .wp-block-group__inner-container::after{
	content: "";
	display: block;
	width: 31%;
}

.campusview_item{
	width: 31%;
	margin: 20px 0;
}

.campusview_item h4{
	margin: 10px 0;
	padding: 0;
	background-color: inherit;
	border-radius: 0;
}

.campusview_item p{
	padding: 0;
}

@media screen and (max-width: 690px){
	.campusview_item{ width: 100%;}
}