@charset "UTF-8";
/* CSS Document */

header{
	background-color: #fff;
}

header h1{
	width: 960px;
	margin: auto;
	padding: 20px 20px 40px 0;
}

.upper{
	background-color: #fff;
	padding-top: 75px;
	text-align: center;
	overflow: hidden;
}

.upper .upper_txt{
	position: relative;
}

.upper .upper_txt h2{
	margin: 0;
}

.upper .upper_txt h3{
	color: rgb(58, 133, 39);
	letter-spacing: 1.6px;
	margin: 25px 0px 50px;
}

.upper .upper_txt p{
	margin-bottom: 0;
	line-height: 2;
	color: #545454;
	position: relative;
	z-index: 10;
	/*font-size: .875rem;*/
}

.ball_01,
.ball_02,
.ball_03,
.ball_04,
.ball_05,
.ball_06,
.ball_07,
.ball_08,
.ball_09,
.ball_10{
	position: absolute;
}

.ball_01{
	top: 380px;
	left: -100px;
}

.ball_02{
	top: 320px;
	left: -49px;
}

.ball_03{
	top: 243px;
	left: -13px;
}

.ball_04{
	top: 292px;
	left: 49px;
}

.ball_05{
	top: 280px;
	left: 374px;
}

.ball_06{
	top: 230px;
	right: 170px;
}

.ball_07{
	top: 253px;
	right: 128px;
}

.ball_08{
	top: 298px;
	right: 48px;
}

.ball_09{
	top: 261px;
	right: -17px;
}

.ball_10{
	top: 378px;
	right: -71px;
}

.centerimg_group{
	padding: 20px 0 80px;
}

.centerimg_group img:nth-child(1){
	vertical-align: bottom;
}

.centerimg_group img:nth-child(3){
	vertical-align: top;
}

.forte{
	max-width: 780px;
	margin: auto;
	padding: 0 20px;
}

.forte h3{
	position: relative;
	margin: 0 0 0 17px;
	line-height: 1;
	text-align: left;
	font-size: 2rem;
	padding-left: 50px;
	border-bottom: solid 9px #edf1b0;
}

.forte h3:before{
	position: absolute;
	content: '';
	background: url(../img/about/circle_ttl.png);
	width: 53px;
	height: 53px;
	top: -10px;
	left: -16px;
}

.forte .content{
	padding: 50px 0 0;
}

.forte .content .img_area{
	float: left;
	max-width: 25.131578%;
	text-align: left;
}

.forte .content .img_area img {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
}

.forte .content .txt_area01,.forte .content .txt_area02,.forte .content .txt_area03,.forte .content .txt_area04,.forte .content .txt_area05{
	float: right;
	max-width: 70.394736%;
	text-align: left;
}

.forte .content div h4{
	position: relative;
	font-size: 1.188rem;
	padding-left: 60px;
	margin-bottom: 25px;
}

.forte .content .txt_area01 h4:before{
	position: absolute;
	content: '';
	background: url(../img/about/circle_01.png);
	width: 52px;
	height: 52px;
	top: -16px;
	left: 0;
}

.forte .content .txt_area02 h4:before{
	position: absolute;
	content: '';
	background: url(../img/about/circle_02.png);
	width: 52px;
	height: 52px;
	top: -16px;
	left: 0;
}

.forte .content .txt_area03 h4:before{
	position: absolute;
	content: '';
	background: url(../img/about/circle_03.png);
	width: 52px;
	height: 52px;
	top: -16px;
	left: 0;
}

.forte .content .txt_area04 h4:before{
	position: absolute;
	content: '';
	background: url(../img/about/circle_04.png);
	width: 52px;
	height: 52px;
	top: -16px;
	left: 0;
}

.forte .content .txt_area05 h4:before{
	position: absolute;
	content: '';
	background: url(../img/about/circle_05.png);
	width: 52px;
	height: 52px;
	top: -16px;
	left: 0;
}

.forte .content div p{
	font-size: .875rem;
}

.comments{
	padding: 100px 0px 35px;
}

.comments p{
	color: #9fb861;
	font-size: 10px;
	margin-right: 17%;
	margin-bottom: 0px;
	text-align: right;
}

footer .row{
	position: relative;
}

footer .row:before{
	position: absolute;
	content: '';
	top: -94px;
	right: 10%;
	width: 104px;
	height: 95px;
	background: url(../img/curriculum/footer_wood.png);
}









@media only screen and ( max-width : 959px ){
	header h1{
		padding: 40px 20px 70px;
	}
	#main_content .upper .upper_txt{
		padding: 0 15px;
	}
	#main_content .upper .upper_txt .ball_gl{
		display: none;
	}
	.upper{
		padding-top: 35px;
	}
	.comments p{
		margin-right: 0;
		text-align: center;
	}
}

@media only screen and ( max-width : 767px ){
	.forte .content .img_area{
		max-width: 100%;
		float: none;
		display: none;
	}
	.forte .content .txt_area01, .forte .content .txt_area02, .forte .content .txt_area03, .forte .content .txt_area04, .forte .content .txt_area05{
		max-width: 100%;
		float: none;
	}
}


@media only screen and (max-width : 640px){
	footer .row::before{
		background: none;
	}
}