@charset "UTF-8";

#faboutus { display: block;}

#hometop { width: 100%; background:url("../images/hometop-bg.jpg") center / cover no-repeat; display: flex; justify-content: center; align-items: center;}
	#hometop h1 { width: 100%; max-width: 1200px; text-align: center; padding:0 30px; margin: 0;}

#greetings { padding:40px 30px 0 30px; background:#EBEBEB; }
	#greetings .inner { max-width:1200px; background: url("../images/greetings-bg.png") center center / contain no-repeat;}
		#greetings h2 { padding: 20px 0;}
		#greetings p { padding: 10px 0;}


#news { padding:0 30px 40px 30px; background:#EBEBEB; }
	#news .inner { max-width: 600px;}
		#news h2 { padding: 10px 0; font-size: 22px;}
		#news p { padding: 10px 0;}

.homenav { position: relative;}
	.homenav::before { display: block; content: ""; overflow: hidden; background-repeat: no-repeat; background-size: cover; position: absolute;}
		#business::before { background-image: url("../images/business-bg.jpg"); right: 0;}
		#works::before { background-image: url("../images/works-bg.jpg"); left: 0;}
		#recruit::before { background-image: url("../images/recruit-bg.jpg"); right: 0;}
	.homenav .inner { background: rgba(0,0,0,.85); color: #FFF; display: flex; align-items: center; position: relative; z-index: 0;}
		#business .inner { margin: 0 auto 0 0;}
		#works .inner { margin: 0 0 0 auto;}
		#recruit .inner { margin: 0 auto 0 0;}
	.homenavinner { padding: 20px; width: 100%; max-width: 400px;}
		#business .homenavinner { margin: 0 2vw 0 auto;}
		#works .homenavinner { margin: 0 auto 0 2vw;}
		#recruit .homenavinner { margin: 0 2vw 0 auto;}
		.homenav h2 {padding:0 0 10px 0;}
		.homenav h3 {padding: 10px 0; font-size: 15px; font-weight: normal; text-align: left;}
			#works h3 { text-align: center;}
		.homenav p {padding: 10px 0; font-size: 15px;}
			.homenav p a { color:#e1af33; text-decoration: none;}
				.homenav p a::after { content:"　〉";}
				.homenav p a:hover { text-decoration: underline;}


@media all and (min-width:320px) {
	/* 320px+ settings */
	#hometop { height:68vw;}
	#greetings p { font-size: 16px; text-align: left; font-weight: normal;}
		#greetings p br { display: none;}
	.homenav { padding: 10vw 0; height: 100vw; }
		.homenav::before { top: 0;}
	.homenav::before { width: 100vw; padding-top: 100vw;}
	.homenav .inner { width:90vw; height: 82vw;}
	.homenav h3 br { display: none;}
	#news .inner { text-align: left;}
}

@media all and (min-width:480px) {
	.homenav { padding: 8vw 0; height: 64vw; }
	.homenav::before { width: 100vw; padding-top: 64vw;}
	.homenav .inner { width:90vw; height: 50vw;}
	.homenav h3 br { display: inline-block;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#greetings p { font-size: 2.2vw; font-weight: bold; text-align: center;}
		#greetings p br { display: inline-block;}
	#business { margin-top: 2vw;}
	.homenav { padding: 8vw 0; height: 56vw; }
		.homenav::before { top: 2vw;}
	.homenav::before { width: 100vw; padding-top: 52vw;}
	.homenav .inner { width:80vw; height: 40vw;}
	#news .inner { text-align: center;}
	
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#hometop { height:680px;}
	#greetings p { font-size: 18px;}
	.homenav { padding: 6vw 0; height:36vw;}
	.homenav::before { width: 60vw; padding-top: 32vw;}
	.homenav .inner { width:48vw; height: 24vw;}
}

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