@charset "UTF-8";

.hometop { width: 100%; text-align: center;}
	.hometop h1 { display: block; width: 100%; max-width: 1200px; margin:0 auto; }

.recruit {width: 100%; padding: 20px 0; text-align: center;background:rgba(35,42,45,.75); color:#FFF;}
	.recruit h2 { display: block; padding:10px 20px; text-align: center;}
	.recruit p { padding: 10px 20px; font-size: 16px; margin: 0 auto;}
		.recruit p a { display: inline-block; width:100%; max-width:180px; font-size:14px; padding:6px 0; text-align: center; text-decoration: none; color:#FFF; border:1px solid #B0201E; border-radius:40px; background:#B0201E;}
			.recruit p a::before {content:"...　";}
			.recruit p a:hover { color:#B0201E; background:#FFF;}


.greetings {}
	.greetings h2 { display: block; padding:10px 0; text-align: center;}
	.greetings p { display: block; max-width:730px; padding: 10px 0; font-size: 14px; text-align: left; margin: 0 auto;}

.homenav {}
	.homenav ul { width: 100%; margin: 0 auto; padding:0 0; }
		.homenav li { text-align: center; padding:20px 0;}
		.homenav li a { display: block; width: 100%; text-decoration: none; color: #333;}
			.homenav li a::before { width: 100%; display: block; content:""; background: no-repeat center center / cover}
				.homenav li:nth-of-type(1) a::before { background-image: url("../images/homenav1.jpg")}
					.homenav li:nth-of-type(1) a:hover::before { background-image: url("../images/homenav1-bg.jpg")}
				.homenav li:nth-of-type(2) a::before { background-image: url("../images/homenav2.jpg")}
					.homenav li:nth-of-type(2) a:hover::before { background-image: url("../images/homenav2-bg.jpg")}
		.homenav h2 { display: block; padding:20px 0 5px 0; text-align: center;}
		.homenav p { display: block; padding: 5px 0; font-size: 14px; text-align: center;}
		.homenav li a p span { display: inline-block; width:100%; max-width:180px; font-size:14px; padding:6px 0; text-align: center; text-decoration: none; color:#B0201E; border:1px solid #B0201E; border-radius:40px; background:#FFF;}
			.homenav li a p span::before {content:"...　";}
			.homenav li a:hover p span { color:#FFF; background:#B0201E;}

@media all and (min-width:320px) {
	/* 320px+ settings */
	.hometop h1 { padding:80px 0; background:url("../images/hometop-bg.jpg") no-repeat center center / cover;}
	.recruit h2 { font-size: 20px;}
	.greetings h2 { font-size: 20px;}
	.homenav h2 { font-size: 20px;}
	.homenav ul { display: block;}
	.homenav li a::before { height:140px;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.hometop h1 { padding:120px 0;}
	.recruit h2 { font-size: 22px;}
	.greetings h2 { font-size: 22px;}
	.homenav h2 { font-size: 22px;}
	.homenav ul {display: flex; justify-content: space-between; max-width: 1200px; padding: 10px 0;}
	.homenav li {width: 48.5%;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.hometop { background:url("../images/hometop-bg.jpg") no-repeat center center / cover;}
	.hometop h1 { padding:160px 0; background: none;}
	.homenav li a::before { height:200px;}
}

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