@charset "UTF-8";

/*========================================
	1-1.Forms Module
========================================*/

form {
	margin: 0.5em 10px;
}

fieldset {
	padding 0 10px 0.3em 10px;
	border: 1px solid #999;
}

legend {
	margin-left: 1em;
	padding: 0 10px;
	font-size: 90%;
}

textarea,
input {
	font-size: 110%;
	padding: 5px;
}

#botton .input {
	padding: 10px;
}

/*========================================
	2-1.div#main
========================================*/

div#main {
	margin: 0;
	width: 650px;
}

/*========================================
	2-3-2.メールフォーム
========================================*/

div#main p {
	margin: 10px;
	color: #990000;
}

div#mailForm table {
	margin-top: 0;
	margin-left: 10px;
	width: 600px;
	border-collapse: collapse;
	color: #999;
	font-size : 90%;
}

div#mailForm td.title {
	margin: 0;
	padding: 0.6em;
	width: 25%;
	border: 1px solid #eee;
  	color: #fff;
  	background-color: #0577cf;
	font-weight: bold;
}

div#mailForm td.box {
	margin: 0;
	padding: 0.6em;
	border: 1px solid #ccc;
  	color : #990000;
  	background-color : #f5f5f5;
}

div#mailForm td#botton {
	padding-top: 10px;
}

input#name,
input#email,
select,
textarea {
	border: 1px solid #666;
	border-bottom-color: #ccc;
	border-right-color: #ccc;
}

input:focus,
textarea:focus {
	background-color: #fffacd;
}

/*========================================
	2-3-3.メールフォームチェック
========================================*/

div#mailForm td.title p#charsTitle{
	color: #fff;
	font-weight: normal;
}
div#mailForm td.title span.charsLeft{
	color: #fff;
}

td.box.error input , 
td.box.error textarea , 
td.box.error label {
	background: #ffcccc;
}

div#mailForm td.box p.error{
	color: #990000;
	font-weight: bold;
	margin-bottom: 0.4em;
}