@charset "UTF-8";
/* =====================================================================================================================
=
= なにわ歯科衛生専門学校
= facility
=
===================================================================================================================== */

/*
- About 共通
--------------------------------------------------------------------------------------------------------------------- */
#about{}
#about #content-header h1{
	background-image:url('/_assets/img/pc/about/main_image.jpg');
}

/*
- facility 施設紹介
--------------------------------------------------------------------------------------------------------------------- */
#about.facility{}

#about.facility .box{
	margin-top:40px;
}

#about.facility #facility-list{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:stretch;
}

#about.facility #facility-list .item .text-lead{
	font-size:1.6rem;
}

#about.facility #facility-list .item{
	width:32%;
	margin-bottom:20px;
}

#about.facility #facility-list .item .image{
	position:relative;
	overflow:hidden;
	margin-bottom:10px;
	border-radius:10px;
}

#about.facility #facility-list .item .image .circle{
	position:absolute;
	top:5px;
	left:5px;
	overflow:hidden;
	width:96px;
	height:96px;
	/*padding:4px;*/
	background-color:#ffffff;
	border:2px solid #ee869a;
	border-radius:50%;

}

#about.facility #facility-list .item .image .circle img{
	overflow:hidden;
	border-radius:50%;
	/*border:1px dashed #ee869a;*/
}

#about.facility #facility-list .item .name{
	font-size:1.8rem;
}

#about.facility #facility-list .item .name .floor{
	display:inline-block;
	margin:0 4px 10px 0;
	padding:2px 10px;
	border-radius:6px;
	color:#ffffff;
	font-size:1.6rem;
	text-align:center;
}

#about.facility #facility-list .item:nth-of-type(1) .name .floor{background-color:#c2da69;}
#about.facility #facility-list .item:nth-of-type(2) .name .floor{background-color:#f5b2b2;}
#about.facility #facility-list .item:nth-of-type(3) .name .floor{background-color:#5dc2d0;}
#about.facility #facility-list .item:nth-of-type(4) .name .floor{background-color:#66bf97;}
#about.facility #facility-list .item:nth-of-type(5) .name .floor{background-color:#f6ae54;}
#about.facility #facility-list .item:nth-of-type(6) .name .floor{background-color:#9fd9f6;}

#about.facility .special{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:10px;
	background-color:#fffabc;
	color:#ff88bf;
	font-size:2.4rem;
	border-radius:48px;
}

/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
	#about.facility{}

	#about.facility .box{
		margin-top:20px;
	}

	#about.facility #facility-list{
		display:flex;
		flex-flow:column wrap;
		justify-content:flex-start;
		align-items:flex-start;
	}

	#about.facility #facility-list .item .text-lead{
		font-size:1.6rem;
		margin-bottom:0;
	}

	#about.facility #facility-list .item{
		width:100%;
		margin-bottom:20px;
	}

	#about.facility #facility-list .item .image{
	}

	#about.facility #facility-list .item .image .circle{
		position:absolute;
		top:5px;
		left:5px;
		overflow:hidden;
		width:96px;
		height:96px;
		padding:4px;
		background-color:#ffffff;
		border:1px solid #ee869a;
		border-radius:50%;

	}

	#about.facility #facility-list .item .image .circle img{
	}

	#about.facility #facility-list .item .name{
		font-size:1.8rem;
	}

	#about.facility #facility-list .item .name .floor{
	}

	#about.facility .special{
		display:flex;
		justify-content:center;
		align-items:center;
		padding:10px;
		background-color:#fffabc;
		color:#ff88bf;
		font-size:1.6rem;
		border-radius:40px;
		text-align:center;
	}

}