@charset "UTF-8";

#hometop { width: 100%; min-width: 1200px; height: 600px; overflow: hidden; text-align: center; background:url(../images/hometop-bg.jpg) no-repeat center; }
	#hometop h1 { display: block; width:1200px; text-align: left; margin: 0 auto; padding:0;}
	#hometop h1 img { padding:220px 30px;}

#products { width: 100%; min-width: 1200px; text-align: center; background:url(../images/products-bg.jpg) no-repeat top; padding:0 0 60px 0;}
	#products h2 { display:block; width:1200px; padding:40px 0 0 0; margin: 0 auto;}
	#products p { display:block; width:1200px; padding: 20px 0; margin: 0 auto; font-size: 14px; text-align: center;}
		#products-btn { text-align: center;}
			#products-btn a { display: block; width:340px; padding: 20px 0; margin: 0 auto; text-align: center; color: #333; background: #EEE; text-decoration: none;}
			#products-btn a:hover {color: #FFF; background: #B3C500;}
	#products ul { display:flex; justify-content: flex-start; flex-wrap: wrap; width:1080px; padding:10px 0 20px 0; margin: 0 auto; list-style: none; }
		#products li { width:250px; text-align: left;font-size: 14px; padding:10px 10px;}
		#products li a { display: block; width:250px; color: #333; text-decoration: none;}
			#products li a strong { display: block; font-size: 16px;}
			#products li a img { position: relative; z-index: 0; opacity: 1;}
				#products li a:hover img { opacity: .7;}
			#products li a::after { display:block;content:"詳細へ"; width:108px; margin:4px 70px; text-align: center; color:#999; border:1px solid #CCC; border-radius: 12px;}
				#products li a:hover::after {color: #FFF; border-color: #B3C500; background: #B3C500;}
			#products li span {display:block; width: 200px; min-height: 60px; padding:10px 25px; margin-top: -60px; background:rgba(255,255,255,.6); position: relative; z-index: 10;}

#production { width: 100%; min-width: 1200px; text-align: center; background:#F2F2F0 url(../images/production-bg.jpg) no-repeat center; padding: 60px 0;}
	#production h2 { display:block; width:1200px; padding:40px 0 0 0; margin: 0 auto;}
	#production p { display:block; width:1200px; padding: 20px 0; margin: 0 auto; font-size: 14px; text-align: center;}
		#production-btn { text-align: center;}
			#production-btn a { display: block; width:340px; padding: 20px 0; margin: 0 auto; text-align: center; color: #333; background: #EEE; text-decoration: none;}
			#production-btn a:hover {color: #FFF; background: #B3C500;}

main::after { display: block; width: 100%; min-width: 1200px; height:260px; content:""; background:url(../images/home-end.jpg) repeat-x center;}