@charset "UTF-8";

#layout .inner { max-width:1200px;}

.introtitle { padding: 10px 0; border-bottom: 1px solid #CCC; text-align: center; font-size: 22px;}

.intro { text-align: left; padding: 20px 0;}
	.introtext { width: 100%; max-width: 600px; background: rgba(0,164,101,.8); color: #FFF; position: relative; z-index: 1;}
		.introtext h2 { padding: 10px 0; text-align: left;}
		.introtext p { padding: 10px 0;}
	.introphoto { width: 100%; max-width: 905px; z-index: 0; margin-left: auto;}


.aboutusbox { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; }
	.aboutus { text-align: left; padding: 20px 0;}
		.aboutus h3 { padding: 10px 0; text-align: center; font-size: 20px; }
			.aboutus h3::before { display: block; content: ""; overflow: hidden; width:110px; height: 90px; background-repeat: no-repeat; background-position: center; margin: 0 auto;}
			.aboutus1 h3::before { background-image: url("images/aboutus1.svg");}
			.aboutus2 h3::before { background-image: url("images/aboutus2.svg");}
			.aboutus3 h3::before { background-image: url("images/aboutus3.svg");}
			.aboutus4 h3::before { background-image: url("images/aboutus4.svg");}
		.aboutus p { padding: 10px 0;}

.merit { max-width: 1080px; margin:60px auto  0 auto; border: 1px solid #009245; border-radius: 20px;}
	.merit::before {display: block; content: ""; overflow: hidden; width:60px; height: 60px; background: url("images/merit.svg") top center no-repeat; margin:-45px auto 0 auto;}
	.merit h3 { padding: 5px 0; text-align: center; font-size: 20px; background: linear-gradient(#FFF 60%, #FFFFCC 60%); color:#009245; margin: 10px 0;}
	.merit p { padding: 10px 0; text-align: left;}

.gocareer { padding: 20px 0; text-align: left; max-width: 670px; margin: 0 auto;}
	.gocareer p { padding: 20px 0; }
	.gocareer p a img { box-shadow: 0 4px 6px 0 #999; border: 2px solid #000; border-radius: 10px; transition: .3s; margin: 5px 0 0 0; }
	.gocareer p a:hover img { box-shadow: 0 4px 6px 0 #999; border: 2px solid #039348; margin: 0 0 5px 0;}

.interview { padding: 20px 0; text-align: left; max-width: 980px; margin: 0 auto;}
	.interview ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
	.interview li a { display: block; padding: 10px 0 0 0;}
	.interview li a:hover { display: block; padding: 0 0 10px 0;}

.info { padding: 20px 0; text-align: left; max-width: 820px; margin: 0 auto;}
	.info table { margin: 20px 0; width: 100%; border-collapse: collapse;}


@media all and (min-width:320px) {
	/* 320px+ settings */
	.introtext { padding: 20px 30px; font-size: 16px;}
	.aboutus { width: 100%;}
	.merit { padding: 20px 30px;}
	.info th { display: block; padding: 20px 0 5px 0; font-size: 16px; text-align: left; border-bottom:1px solid #CCC;}
	.info td { display: block; padding: 5px 0 20px 0; font-size: 16px; text-align: left;}
	.interview li { width: 100%; padding: 10px 0;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.introtext { padding: 30px 40px;font-size: 20px;}
	.introphoto { margin-top: -80px;}
	.aboutus { width: calc(50% - 20px);}
	.merit { padding: 20px 40px;}
	.info th, .info td { display: table-cell; text-align: left; padding: 20px 20px; font-size: 16px; border-bottom:1px solid #CCC; vertical-align: top;}
	.info th { width: 200px;}
	.interview li { width: calc(50% - 20px); padding: 20px 0;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.introtext { padding: 40px 60px;}
	.introphoto { margin-top: -120px;}
	.aboutus { width: calc(50% - 40px);}
	.merit { padding: 20px 120px;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}