@charset "utf-8";





@media (min-width: 768px) {
/* PC用 */

#education {}
	#education .featureBox{ border: 1px solid #ccc; width: 40%; display: inline-block; margin: 2%; padding:2% 2% 0 2%; vertical-align: top;}
	#education h5{color: #82AE46; padding: 5px; font-size: 16px; margin-bottom: 5px!important; display: inline-block; margin-top: 0px;}
	#education .catch{ font-size: 30px; color: #82AE46; line-height: 150%;}	
	#education .professor{width: 20%; text-align: center; float: left; font-size: 20px; margin-right: 20px;}
	#education .professor .small{font-size: 12px;}
	#education .professorTxt{ max-width: 75%; float: right;}
	#education .features{ background-color: #ECEEF8; padding: 1%; width: 22%; margin: 1% 1% 5% 1%; display: inline-block; text-align: center; font-weight: bold; font-size: 16px; vertical-align: top;}
	
	#education .rightImg{max-width: min(60%, 400px);} 
	#education .curriculumDetail dt{width: 16%; float: left; color: #82AE46; font-family: "Arial Black", Gadget, "sans-serif"; font-size: 30px; text-align: center;}


	#education .eventDetail{ width:50%; float: left;}
	#education .eventDetail dl{clear:both; margin-bottom: 30px; overflow: hidden; padding-top:10px;}
	#education .eventDetail dt{width: 11%; float: left; color: #ECEEF9; font-family: "Arial Black", Gadget, "sans-serif"; font-size: 40px; text-align: center;}
	#education .eventDetail dt .mouth{ font-size: 16px;}
	#education .eventDetail dd{width: 70%; float: right;}
	#education .eventDetail .eventName{ font-size: 20px; color: #82AE46;}
	#education .eventDetail p{margin-bottom: 10px!important; text-align: left;}
	#education .eventImg{width:40%; float: right;}
	
	#education .voiceBox{width: 45%; display: inline-block; vertical-align: top; margin: 1%; overflow: hidden; }
	#education .voiceBox img{ width: 60px; float: left; overflow: hidden;}
	#education .voiceBox .voiceName{width:-webkit-calc(100% - 80px) ; width:calc(100% - 80px); float: right; max-width: 390px;}
	#education .voiceBox p{ width:100%; }
	
	#education .button{background-color: #82AE46; color: #fff; padding: 10px;}
}

@media (max-width: 767px) {
/* tablet用 */
#education {}
	#education .featureBox{ border: 1px solid #ccc; width: 90%; margin: 2% auto 2% auto; padding:2% 2% 0 2%; }
	#education .featureBox p{padding: 0 5% 0 5%; margin-bottom: 2%;}
	#education h5{color: #fff; background-color: #82AE46; padding: 5px; font-size: 16px; margin-bottom: 10px!important; margin-top: 0;}
	
	#education .catch{ font-size: 20px; color: #82AE46;}	
	#education .professor{width: 50%; text-align: center; margin: auto; font-size: 20px;}
	#education .professor .small{font-size: 12px;}
	#education .professorTxt{ }
	#education .features{ background-color: #ECEEF8; width: 45%; margin: 2%; text-align: center; font-weight: bold; font-size: 14px; vertical-align: top; display: inline-block;}
	
	#education .rightImg{max-width: 100%;} 
	#education .curriculumDetail dt{width: 16%; float: left; color: #ffffff; font-family: "Arial Black", Gadget, "sans-serif"; font-size: 30px; text-align: left; margin: 3px; line-height: 80%; float: left;}
	
	#education .eventDetail{ width:100%; }
	#education .eventDetail dl{clear:both; margin-bottom: 5%; overflow: hidden; width: 100%;  padding: 0;}
	#education .eventDetail dt{width: 50px; color: #ECEEF9; font-family: "Arial Black", Gadget, "sans-serif"; font-size: 40px; text-align: left; margin: 0; line-height: 80%; float: left;}
	#education .eventDetail dt .mouth{ font-size: 16px;}
	#education .eventDetail dd{width: 80%; margin: 0; float: right}
	#education .eventDetail .eventName{ font-size: 20px; color: #82AE46;}
	#education .eventDetail p{margin-bottom: 10px!important; text-align: left;}
	#education .eventImg{ display: none;}
	
	#education .voiceBox{width: 100%; display: inline-block; vertical-align: top; margin: 1%; overflow: hidden; }
	#education .voiceBox img{ width: 60px; float: left; overflow: hidden;}
	#education .voiceBox p{ overflow: hidden; width:100%; float: right; text-align: left; margin-right: -80px; font-size: 12px;}
	
	#education .button{background-color: #82AE46; color: #fff; padding: 10px;}
	
}