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

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

/*
- About トップ
--------------------------------------------------------------------------------------------------------------------- */
#about.top{}

.aboutTopList{
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display: box;
	display: flex;
	-webkit-box-align: center;/*--- Androidブラウザ用 ---*/
	-ms-flex-align: center;/*--- IE10 ---*/
	-webkit-align-items: center;/*--- safari（PC）用 ---*/
	align-items: center;
	-webkit-box-pack: justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack: justify;/*--- IE10 ---*/
	-webkit-justify-content: space-between;/*--- safari（PC）用 ---*/
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.aboutTopList dt{
	width: 100px;
	height: 100px;
	margin-bottom: 30px;
	padding: 35px 0 0;
	color: #ffffff;
	text-align: center;
}
.aboutTopList dd{
	width: 864px;
	margin-bottom: 30px;
	padding: 0 20px;
}
.aboutTopList dd span{
	display: block;
	color: #ff88bf;
}

.aboutTopList dt:nth-of-type(1){ background: #F5B090;}
.aboutTopList dt:nth-of-type(2){ background: #F29C97;}
.aboutTopList dt:nth-of-type(3){ background: #ff88bf; padding-top: 23px;}
.aboutTopList dt:nth-of-type(4){ background: #EE869A; padding-top: 23px;}
.aboutTopList dt:nth-of-type(5){ background: #D796C0; padding-top: 15px;}
.aboutTopList dt:nth-of-type(6){ background: #8D93C8; margin-bottom: 0;}

.aboutTopList dd:nth-of-type(6){ margin-bottom: 0;}


/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
.aboutTopList{
	align-items: stretch;
	width: 100%;
}
.aboutTopList dt{
	width: 100%;
	height: auto;
	margin-bottom: 15px;
	padding: 10px 0;
}
.aboutTopList dd{
	width: 100%;
	margin-bottom: 20px;
	padding: 0;
}
.aboutTopList dd span{
	display: block;
	margin-bottom: 5px;
}
	
.aboutTopList dt:nth-of-type(3){ padding-top: 10px;}
.aboutTopList dt:nth-of-type(4){ padding-top: 10px;}
.aboutTopList dt:nth-of-type(5){ padding-top: 10px;}
.aboutTopList dt:nth-of-type(6){ margin-bottom: 15px;}
.aboutTopList dd:nth-of-type(6){ margin-bottom: 0;}
}