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

/*
- Curriculum カリキュラム
--------------------------------------------------------------------------------------------------------------------- */
#curriculum{}
#curriculum #content-header h1{
	background-image:url('/_assets/img/pc/curriculum/main_image.jpg');
}

/*
- america カリキュラム
--------------------------------------------------------------------------------------------------------------------- */

.curriculumImg{
	width: 660px;
	margin: 0 auto;
}

#curriculum.top .txt{
	margin-bottom: 40px;
}

.curriculumList{
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display: box;
	display: flex;
	-webkit-box-pack: center;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack: center;/*--- IE10 ---*/
	-webkit-justify-content: center;/*--- safari（PC）用 ---*/
	justify-content: center;
	margin-top: 50px;
}
.curriculumList li{
	position: relative;
	border: 1px solid #ff88bf;
	width: 27%;
	margin-left: 20px;
	padding: 45px 15px 15px;
	border-radius: 15px;
}
.curriculumList li:first-child{
	margin-left: 0;
}
.curriculumList li h3{
	position: absolute;
	top: -20px;
	left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
	width: 80%;
}
.curriculumList li h4{
	margin-bottom: 15px;
	color:#ff88bf;
}
.curriculumList li p{
	margin-bottom: 15px;
}



/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
	#curriculum.top .txt{
		margin-bottom: 20px;
	}
	
	.curriculumImg{
		width: 100%;
	}
	
	.curriculumList{
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.curriculumList li{
		position: relative;
		border: 1px solid #ff88bf;
		width: 100%;
		margin: 0 0 50px;
		padding: 50px 15px 15px;
		border-radius: 15px;
	}
	.curriculumList li:first-child{
		margin-left: 0;
	}
	.curriculumList li:last-child{
		margin: 0;
	}
	.curriculumList li h3{
		position: absolute;
		top: -20px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 80%;
	}
	.curriculumList li h4{
		margin-bottom: 15px;
		color: #ff88bf;
	}
	.curriculumList li p{
		margin-bottom: 15px;
	}
    
    #curriculum .content-inner .box:nth-of-type(3) .curriculumList li:nth-child(1) h3 {
    top: -30px;
}
	
}