@charset "UTF-8";

#hometop { background:#5C5CAD;}
	#hometop p { display: block; padding:0 40px; text-align: center;}


#intro { background:#FFF; padding:0 20px;}
	#intro h1 { display: block; padding:20px 0; width: 100%; max-width: 840px; margin: 0 auto;}

h2.title { text-align: center; padding: 20px 0; font-size: 22px; color:#333399;}
	h2.title strong { display: block; width: 100%; max-width: 260px; text-align: center; text-indent:8px; margin: 0 auto; letter-spacing:8px;}
	h2.title strong::after { display: block; width: 100%; padding: 8px 0; margin-top: 8px; border-top:1px solid #999; font-size: 12px; font-weight: normal; font-family: Arial, Helvetica, "sans-serif"; color:#999; letter-spacing:normal;}


#business { background:#F0F0F0; padding:0 20px;}
	#business .inner { max-width: 1200px;}
	#business h2.title strong::after { content: "Business";}
	.business { padding:20px 0; text-align: center;}
	.business ol { padding: 10px 0 20px 2em; margin: 0 auto; max-width:780px; text-align: left; list-style: decimal; }
		.business ol li { padding: 2px 0;}

#history { background:#FFF; padding:0 20px;}
	#history .inner { max-width: 1200px;}
	#history h2.title strong::after { content: "History";}
	.history { padding:20px 0; text-align: center;}
		.history h3 { padding:20px 0 0 0; font-size:18px;}

#aboutus { background:#F0F0F0; padding:0 20px;}
	#aboutus .inner { max-width: 1200px;}
	#aboutus h2.title strong::after { content: "About Us";}
	.aboutus { padding:20px 0; text-align: center;}

#recruit { background:#FFF; padding:40px 20px;}
	#recruit .inner { max-width: 1200px;}
	#recruit h2.title { display: block; background:#333399; color:#FFF;}
		#recruit h2.title strong::after { content: "Recruit"; border-top:1px solid #FFF; color:#FFF;}
	.recruit { text-align: left; background:url("../images/recruit-bg.jpg") center / cover no-repeat;}
		.recruit h3 { padding:10px 0; }
		.recruit h4 { padding:10px 0; color:#339933;}
		.recruit ul { padding:10px 0 10px 1em; margin:0 0 0 1em; list-style: disc;}
		.recruit p { padding:10px 0; font-size:16px;}
			.recruitbtn { text-align: center;}
			.recruitbtn a { display: inline-block; color: #000; text-decoration: none; background: #DDD; border-radius: 20px;padding:5px 20px;}
			.recruitbtn a:hover { color:#000; background:#CCCCE5;}


#inquiry { background:#F0F0F0; padding:0 20px;}
	#inquiry .inner { max-width: 960px;}
	#inquiry h2.title strong::after { content: "Inquiry";}
	.inquiry { padding:20px 0; text-align: left;}
		.inquiry p { padding:10px 0; font-size:16px;}
		.inquiry p img { vertical-align: baseline;}
		.inquiry p a { color:#888; text-decoration: none;}
			.inquiry p a:hover { color:#333399; text-decoration: underline;}
		.inquiry form { margin: 0; padding: 0;}
			.inquiry dl { width: 100%; } 
			.inquiry dt { padding:30px 0 10px 0; font-size:16px; text-align:left; vertical-align:top; font-weight:normal; }
			.inquiry dd { display:inline-block; box-sizing: border-box; padding:10px; font-size:16px; background:#FFF;}
				.inquiry input[type=text], .inquiry textarea, .inquiry select { box-sizing: border-box; padding: 0; background: rgba(0,0,0,0); border: none; }
				.wfit { width:100%;}
				.w100 { width:100%;}
				.w90 { min-width:90%;}
				.w80 { min-width:80%;}
				.w70 { min-width:70%;}
				.w60 { min-width:60%;}
				.w50 { min-width:50%;}
				.w40 { min-width:40%;}
				.w30 { min-width:30%;}
				.w20 { min-width:20%;}
				.w10 { min-width:10%;}
			#btn { display: flex; flex-wrap: wrap; justify-content:center; width:100%; margin:0; padding:20px 0 10px 0; list-style: none;}
				#btn li { padding:10px 20px; text-align:center;}
				#btn input { display:block; width:240px; margin:0 auto; padding:15px 0; overflow:hidden; border:none; text-align:center; color:#FFF; font-size:1.6rem; background:#555; cursor: pointer;}
					#btn input:hover { background:#333399;}

#privacy { background:#FFF; padding:0 20px;}
	#privacy .inner { max-width: 960px;}
	#privacy h2.title strong::after { content: "Privacy Policy";}
	.privacy { text-align: left; padding: 20px 0;}
		.privacy h3 { display: flex; padding:30px 0 0 0; font-size:16px; counter-increment:cnt-h3;}
			.privacy h3::before { display: inline-block; width:2em; text-align: right; padding-right: 10px; white-space: nowrap; content:counter(cnt-h3)"."; }
		.privacy p { padding:10px 0 10px 2em; font-size:16px;}
			.privacy p:first-of-type { padding-left:0 !important;}
		.privacy ol { padding:0 0 10px 2em; }
			.privacy ol li{ display: flex; counter-increment: cnt-ol;}
			.privacy ol li:before{ white-space: nowrap; padding-right: 1em; content: "(" counter(cnt-ol) ")"; }
		.privacy li { padding:0 0 10px 0; font-size:16px}


.photo { display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; padding: 10px 0; }
	.photo span { display: block; width: 100%; text-align: center; padding: 10px 0;}


.list { width: 100%; max-width: 780px; margin: 20px auto;}


@media all and (min-width:320px) {
	/* 320px+ settings */
	#intro h1 { text-align: left; font-size: 18px;}
	.photo span { width: calc(50% - 20px);}
	.list th { display: block; padding: 20px 0 5px 0; font-size: 16px; text-align: left; font-weight: normal; border-bottom:1px solid #999;}
	.list td { display: block; padding: 5px 0 20px 0; font-size: 16px; text-align: left;}
	.recruit { padding:20px;}
		.recruit h3 { font-size:20px;}
		.recruit h4 { font-size:20px;}
			.recruit ul li { font-size: 16px;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#intro h1 { text-align: center; font-size: 24px;}
	.photo span { width: calc(33% - 20px);}
	.business ol { columns: 2; column-gap: 40px;}
	.list th, .list td { display: table-cell; text-align: left; padding: 10px 1em; font-size: 16px; border-bottom:1px solid #999; vertical-align: top;}
	.list th { width: 160px;}
	.list tr:last-of-type th, .list tr:last-of-type td {border-bottom:1px solid transparent;}
	.recruit { padding:40px;}
		.recruit h3 { font-size:26px;}
		.recruit h4 { font-size:26px;}
			.recruit ul li { font-size: 20px;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.recruit { padding:40px 80px;}
}

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