@charset "UTF-8";

#recruit { text-align: center;}
	#recruit p { padding: 10px 0; font-size: 16px; text-align: center;}
	#recruit ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 0;}
		#recruit li { display: block; font-size: 18px; padding: 10px 0;}
		#recruit li a { display: block; padding: 40px 0 60px 0; background:rgba(255,255,255,.5) ; color:#000; border: 1px solid #888; text-decoration: none; position: relative;}
			#recruit li a:hover { color: #FFF;background:rgba(0,0,0,.5) ; }
			#recruit li a::after { display: block; content:""; width: 16px; height: 16px; margin:12px 0 0 0;  overflow: hidden;transform: rotate(45deg); border-right: 2px solid #000; border-bottom: 2px solid #000; position: absolute; left: calc(50% - 9px); transition: .3s;}
				#recruit li a:hover::after {border-color:#FFF;}

.art { text-align: left;}
	.art h3 { padding:30px 0 0 0; font-size:16px;}
		.art h3:first-of-type { padding-top:10px; }
	.art p { padding:10px 0 10px 0; font-size:16px;}
		.art p a { color:#000; text-decoration: none;}
			.art p a:hover { color:#999; text-decoration: underline;}
	.art table { width: 100%; border-collapse: collapse;} 
		.art th { font-size:16px; text-align: left; white-space: nowrap; vertical-align: top; }
		.art td { font-size:16px; text-align: left; vertical-align: top;}
		.art td img { padding: 5px 0;}

.figures { padding: 20px 0;}
	.figures ul { display: flex; justify-content:space-around; flex-wrap: wrap; }
		.figures li { padding: 20px 10px;}

.voice { text-align: left;}
	.voice h3 { padding:10px 0; font-size:18px;}
	.voice p { padding:10px 0 10px 0; font-size:16px;}
		.voice img { padding: 10px 0;} 


@media all and (min-width:320px) {
	/* 320px+ settings */
	#recruit { padding:20px 0;}
	#recruit li { width: 100%;}
	.art { padding:20px 0;}
		.art table { margin: 0;}
		.art th { display: block; padding:30px 0 0 0;}
			.art tr:first-of-type th { padding-top:10px; }
		.art td { display: block; padding:10px 0 10px 0; }
	.voice { padding:20px 0;}
	.figures li { width: 40%;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.figures li { width: 30%;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#recruit li { width: 32%;}
	.art { padding:20px 80px;}
		.art table {margin:10px 0;}
		.art th { display: table-cell; padding:20px 40px 20px 0; border-bottom:1px solid #CCC; width: 10em; }
			.art tr:first-of-type th { padding-top:20px; }
		.art td { display: table-cell; padding:20px 0;  border-bottom:1px solid #CCC;}
	.voice { padding:20px 80px;}
	.figures li { width: 20%;}
	.voice p:nth-of-type(1) {  display:inline-block; padding: 5px 30px 5px 0; width: 42%; float: left;}
}

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