html,body { margin:0; padding:0; font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; }
header { width:100%; height:64px;  margin:0 auto; position:fixed; top:0; background-color: rgba(255,0,0,0.5);  z-index:99;}
h1  { margin:2px 24px; padding:0; float:left;}
header ul { margin:0; padding:0; }
header li { list-style-type:none; float:left; border-right:1px solid #CCC; margin:0; height:64px; }
header li:first-child { border-left:1px solid #CCC; }
header li a { display:block; padding:0 24px; height:64px; text-decoration:none; background-color:rgba(255,0,0,0.8); }
header li a:hover { background-color:rgba(255,0,0,0.4); }

article {
	min-height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
article#top { 
	background-image: url("images/top_bk.jpg");
}

article#works { 
	background-image: url("images/background-works.jpg");
}

article#works dl { width:90%; margin:24px auto; font-size:80%; }
article#works dt { border-left:8px solid #999; padding-left:8px; }
article#works dd { }

article#company { 
	background-image: url("images/background-company.jpg");
}
article#company table { width:90%; margin:24px auto; font-size:80%; }


article#contact { 
	background-image: url("images/background-contact.jpg");
}

article#contact table { width:80%; margin:24px auto; font-size:80%; }
article#contact table th { text-align:right; padding-right:1em; background-color:#FFF; padding:4px; }
article#contact table td { background-color:#FFF; width:80%;  padding:4px; }
input.company { width:99%; }
input.name { width:50%; }
input.email { width:60%; }
input.tel { width:6em%; }
article#contact table td textarea { width:99%; height:8em; }

article#contact button { }
article#contact dl { width:80%; font-size:80%; margin:0 auto; }
#btnBox { text-align:center; margin:24px;}

.msgbox,.errbox { width:80%; margin:24px auto; padding:4px 0; text-align:center; }
.msgbox { border:1px solid blue; color:blue;}
.errbox { border:1px solid red; color:red; }

.contents { width:80%; margin: 0 auto; padding:0; border:1px solid #EEEEEE; background-color: rgba(255,255,255,0.8); }


#topBox { padding:14px; background-color:rgba(255,255,255,0.6); color:#000; width:100%; margin:0 auto; text-align:center; }
/*
article { width: 100vw; height: 100vh; margin:0; }
article#top { 
	min-height: 100%;
	background-image: url("images/top_bk.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.contents { width:80%; margin: 64px auto 48px; padding:0; border:1px solid #EEEEEE; background-color: rgba(255,255,255,0.5); }
*/
/*
article#contact table { width:640px; margin:0 auto; border-collapse:collapse; font-size:80%; }
article#contact table th, article#contact table td { padding:4px; border:1px solid #EEE; }
article#contact table th { width:120px; background-color:#E7E7E7; }
article#contact table td { }
article#contact table td input { width:99%; }
article#contact table td textarea { width:99%; height:6.5em; }
*/
footer { width:100%; height:48px; margin:0 auto; position:fixed; bottom:0; left:0; background-color: rgba(255,0,0,0.5);  }
address { color:#FFF; font-size:12px; margin:4px 16px 0 16px; text-align:right; }