@charset "UTF-8";

#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:180%;
	font-size:1em;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
.req {
	font-size:90%;
	color:#d00;
}
input[type="text"], textarea {
	display:block;
	width:90%;
	padding:0.5rem;
	font-size:1rem;
	border:1px solid #eee;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	padding:0.7rem;
	margin:1.5rem 1rem;
	font-size:1rem;
	border-radius:5px;
}

#formWrap h4 {
	line-height:200%;
}
#formWrap .error {
	padding:2rem 0;
	color:#d00;
	line-height:200%;
}

.thanks {
	margin:3rem 0;
	padding-bottom:1rem;
	font-size:1.3rem;
	border-bottom:1px solid #aaa;
}
.thanks-note {
	margin:2rem 0 0;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:479px) {
#formWrap {
	width:95%;
	margin:1rem auto 0;
	text-align:left;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:100%;
	padding:0.5rem;
	font-size:1rem;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:inline;
	width:35%;
	height:3rem;
	margin:0 0.3rem;
}

#formWrap h4 {
	line-height:200%;
	font-size:0.9rem;
	text-align:left;
}
#formWrap .error {
	padding:2rem 0;
	color:#d00;
	line-height:200%;
	font-size:0.9rem;
	text-align:left;
}

.thanks-note {
	margin:2rem 0 0;
	text-align:left;
	font-size:0.8rem;
}
}