/* CSS Document */

#pagetitle #head {
	background: url(img/about_topimg.jpg) center center / cover no-repeat;
}

#pagetitle #head #label {
	background: #00a214;
}

#pagetitle #head #label h2,
#outline h3,
#access h3 {
	margin: 0 auto;
}

#pagetitle #head #label h2,
#introduction #box_top .left h3,
#philosophy div h4,
#philosophy div h5,
#outline h3,
#access h3 {
	overflow: hidden;
	text-indent: -9999px;
	display: block;
}

#pagetitle #head #label h2 {
	height: 18px;
	width: 114px;
	background: url(img/about_h2.png) no-repeat;
	background-size: 114px 18px;
}

#introduction {
	padding: 40px 0 70px;
}

#introduction #box_top {
	margin: 0 0 50px;
}

#introduction #box_top .left,
#introduction #box_top .right,
#introduction #box_bottom .left,
#introduction #box_bottom .right {
	width: 460px;
}

#introduction #box_top .left,
#introduction #box_top .right {
	float: left;
}

#introduction #box_bottom .left,
#introduction #box_bottom .right {
	float: right;
}

@media screen and (max-width: 580px) {
	#introduction #box_top .left,
	#introduction #box_top .right,
	#introduction #box_bottom .left,
	#introduction #box_bottom .right {
	width: 100%;
	float: none;
	}
	
	#introduction #box_top .left,
	#introduction #box_bottom .left {
		margin: 0 0 20px;
	}
}

#introduction #box_top .left,
#introduction #box_top .right {
	height: 280px;
}

#introduction #box_bottom .left,
#introduction #box_bottom .right {
	height: 180px;
}

@media screen and (max-width: 580px) {
	#introduction #box_top .left,
	#introduction #box_top .right,
	#introduction #box_bottom .left,
	#introduction #box_bottom .right {
		height: auto;
	}
}

#introduction #box_top .left,
#introduction #box_bottom .right {
	padding: 0 40px 0 0;
}
@media screen and (max-width: 580px) {
	#introduction #box_top .left,
	#introduction #box_bottom .right {
	padding: 0;
}
}

#introduction #box_top .left h3 {
	height: 78px;
	width: 397px;
	padding: 0 0 20px;
	background: url(img/about_h3_01.png) no-repeat;
	background-size: 397px 78px;
}
@media screen and (max-width: 580px) {
	#introduction #box_top .left h3 {
	height: 62px;
	width: 100%;
	padding: 0 0 10%;
	background-size: contain;
}
}

#introduction #box_bottom .right img {
	float: left;
}

#introduction #box_top .right img {
	width: 100%;
	heght: auto;
}

#introduction #box_bottom .right img.bl {
	width: 51%;
	heght: auto;
}

#introduction #box_bottom .right img.br {
	width: 47%;
	heght: auto;
}

#introduction #box_bottom .right img:first-child {
	padding: 0 2% 0 0;
}

#philosophy div {
	float: left;
	width: 300px;
	height: 215px;
	margin: 40px 30px 0 0;
	padding: 0 20px 20px;
	border: 1px solid #00a214;
	box-sizing: border-box;
	position: relative;
}

#philosophy div:first-child {
	border: none;
}

#philosophy div:first-child,
#philosophy div:nth-child(2),
#philosophy div:nth-child(3) {
	height: 190px;
}

#philosophy div:nth-child(3n) {
	margin: 40px 0 0;
}
@media screen and (max-width: 580px) {
	#philosophy div {
	float: none;
	width: 100%;
	height: auto;
	}
	#philosophy div, 
	#philosophy div:nth-child(3n) {
	margin: 40px auto 0;
	}
	#philosophy div:first-child {
	height: 100px;
	}
	#philosophy div:nth-child(2),
	#philosophy div:nth-child(3) {
	height: auto;
}
}

#philosophy div img.no {
	width: 60px;
	height: 60px;
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	margin:0 auto;
}

#philosophy div h4 {
	margin: 52px auto 0;
	height: 71px;
	width: 250px;
	background: url(img/about_h4.png) no-repeat;
	background-size: 250px 71px;
}

#philosophy div h5 {
	margin: 40px auto 12px;
	height: 23px;
	width: 260px;
}

#philosophy div h5.no1 {
	background: url(img/about_h5_01.png) no-repeat;
	background-size: 260px 23px;
}

#philosophy div h5.no2 {
	background: url(img/about_h5_02.png) no-repeat;
	background-size: 260px 23px;
}

#philosophy div h5.no3 {
	background: url(img/about_h5_03.png) no-repeat;
	background-size: 260px 23px;
}

#philosophy div h5.no4 {
	background: url(img/about_h5_04.png) no-repeat;
	background-size: 260px 23px;
}

#philosophy div h5.no5 {
	background: url(img/about_h5_05.png) no-repeat;
	background-size: 260px 23px;
}

@media screen and (max-width: 580px) {
	#philosophy div h5.no1,
	#philosophy div h5.no2,
	#philosophy div h5.no3,
	#philosophy div h5.no4,
	#philosophy div h5.no5 {
	width: 100%;
	background-size: contain;
	background-position: center;
	}
}

#philosophy div hr {
	margin: 0 0 10px;
	height: 2px;
	background-color: #00a214;
	color: #00a214;
	border: none;
}

#philosophy div p {
	margin: 0 auto;
}

#outline h3 {
	margin: 75px auto 30px;
	height: 33px;
	width: 133px;
	background: url(img/about_h3_02.png) no-repeat;
	background-size: 133px 33px;
}
@media screen and (max-width: 580px) {
	#outline h3 {
	height: 26px;
	width: 106px;
	background-size: 106px 26px;
}
}

#access {
	padding: 0 0 60px;
}

#access h3 {
	margin: 90px auto 30px;
	height: 30px;
	width: 131px;
	background: url(img/about_h3_03.png) no-repeat;
	background-size: 131px 30px;
}
@media screen and (max-width: 580px) {
	#access h3 {
	height: 24px;
	width: 105px;
	background-size: 105px 24px;
}
}

#access .ggmap {
	position: relative;
	padding-bottom: 45%;
	padding-top: 30px;
	height: 0px;
	overflow: hidden;
}
 
#access .ggmap iframe,
#access .ggmap object,
#access .ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}