@charset "UTF-8";

#hometop { width: 100%;position: relative; z-index: 0; background:#FFF;}
	#hometop h1 { display: flex; position: absolute; z-index: 1; padding:0 20px; text-align: center;}

#home { padding: 20px;}
	#home .inner { }
	#home h2 { display: block; padding: 10px 0; font-size: 20px; width: 100%; max-width: 640px; margin: 0 auto;}
	#home p { display: block; padding: 10px 0; font-size: 16px; width: 100%; max-width: 700px; margin: 0 auto;}
	#home ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; max-width: 960px; margin: 0 auto; padding:40px 0 20px 0;}
		#home li { margin:20px 0 0 0; display: block;}
		li.business { background:url("../images/business-bg.jpg") center / cover no-repeat;}
		li.aboutus { background:url("../images/aboutus-bg.jpg") center / cover no-repeat;}
		#home li a { display: flex; justify-content: center; align-items: center; padding: 20px; background: rgba(255,255,255,0);}
		#home li a:hover { background: rgba(255,255,255,.5);}


@media all and (min-width:320px) {
	/* 320px+ settings */
	#hometop h1 { top:14vw;}
	#home h2 { text-align: left;}
	#home p { text-align: left;}
	#home li { width: 100%;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#hometop h1 { top:16vw; left:calc(50% - 270px); }
	#home h2 { text-align: center;}
	#home p { text-align: center;}
	#home li { width: calc(50% - 10px);}
}

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


@media all and (min-width:1200px) {
	/* 1200px+ settings */
	#hometop h1 {top:10vw;}
}

@media all and (min-width:1960) {
	/* 1960px+ settings */
	#hometop h1 {top:240px;}
}