@charset "UTF-8";
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: メディアクエリー*/
/* スマホファースト：sp・PCファースト：pc*/
/* 切り替えポイントの設定 */
/* 処理 */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/


#campuslife .lead{
	margin: 80px auto;
}
#campuslife .lead .top-img{
	margin-bottom: -5%;
}
#campuslife .lead h2{
	color: #006c54;
	text-align: center;
	font-weight: bold;
	margin: auto auto 30px;
	font-size: 1.5rem;
}
#campuslife .lead p{
	font-size: 1.2rem;
}

@media only screen and (max-width: 640px) {
	#campuslife .lead h2{
		margin: auto auto 20px;
		font-size: 1.2rem;
	}
	#campuslife .lead p{
		font-size: 1rem;
	}
}


#campuslife .event-flex{
	margin: 80px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#campuslife .event-flex .box{
	display: flex;
	flex-direction: column;
	width: calc(100%/3 - 10px);
	margin: 0 5px 40px;
}
#campuslife .event-flex .box h3{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4em;
	border-top: 4px solid;
	border-bottom: 4px solid;
	border-image: linear-gradient(to right, #008a45, #84be3f) 1;
	color: #006c54;
	font-weight: bold;
	text-align: center;
	margin: 0 0 20px;
}
#campuslife .event-flex .box p{
	flex-shrink: 0;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 640px) {
	#campuslife .event-flex .box h3{
		line-height: 1.2rem;
		font-size: 1rem;
		min-height: 3em;
	}
	#campuslife .event-flex .box{
		width: calc(100%/2 - 10px);
		margin: 0 5px 30px;
	}
}


#campuslife .qa-link{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#campuslife .qa-link .box{
	width: calc(100%/3 - 10px);
	margin: 0 5px 40px;
}
#campuslife .qa-link .box a{
	display: block;
	position: relative;
}
#campuslife .qa-link .box a:hover{
	opacity: 1;
}
#campuslife .qa-link .box a::after{
	content: "";
	position: absolute;
	width: 8%;
	height: 8%;
	background-image: url(../img/arrow.png);
	background-size: contain;
	background-repeat: no-repeat;
	bottom: 2%;
	right: 10%;
	background-position: center;
	transition: all .5s;
}
#campuslife .qa-link .box a:hover::after{
	right: 8%;
}

@media only screen and (max-width: 640px) {
	#campuslife .qa-link .box{
		width: calc(100%/2 - 10px);
		margin: 0 5px 30px;
	}
}