@charset "UTF-8";

/*************************************************
【忍者式メールフォーム自作CSS】
自作CSSを使用するには、HTMLとCSSの知識が必須です。
HTMLやCSSについては参考文献などを参照してください。
*************************************************/

/*メールフォーム全体を囲っているタグのid*/
#mailform_top {
	color: #999;
	font-size: 80%;
	margin: 10px;
	width: 450px;
}

/*メールフォームのパーツや送信ボタンを囲っているタグのclass（タイトル、説明文以外）*/
#mailform_top .main {
	background: #000;
	padding: 0px 10px 5px 10px;
}

/*メールフォームのタイトルを囲っているタグのclass*/
#mailform_top .title{
	background: #000;
	padding: 10px;
}

/*メールフォームの説明文を囲っているタグのclass*/
#mailform_top .explain {
	background: #000;
	padding: 10px;
}

/*『name』パーツの表示名と入力項目を囲っているタグのclass*/
#mailform_top .name_top {
	float: left;
}

/*『name』パーツの表示名を囲っているタグのclass（[ 名前 ]の部分）*/
#mailform_top .name_left{
	background: #000;
	color: #66FF00;
	font-family: "Century Gothic" ;
}

/*『name』パーツの入力項目を囲っているタグのclass*/
#mailform_top .name_right {

}

/*『name』パーツの入力項目のclass（inputなどの部分）*/
#mailform_top .name_parts {
	color: #999;
	font-size: 100%;
	border:0px solid #ddd;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background: -moz-linear-gradient(top,#f6f6f6,#fff);
	background: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#fff));
	background-color: #333;
	width: 200px;
}

/*『mail』パーツの表示名と入力項目を囲っているタグのclass*/
#mailform_top .mail_top {
	clear: left;
}

/*『mail』パーツの表示名を囲っているタグのclass（[ メールアドレス ]の部分）*/
#mailform_top .mail_left{
	background: #000;
	color: #66FF00;
	font-family: "Century Gothic" ;
}

/*『mail』パーツの入力項目を囲っているタグのclass*/
#mailform_top .mail_right {

}

/*『mail』パーツの入力項目のclass（inputなどの部分）*/
#mailform_top .mail_parts {
	color: #999;
	font-size: 100%;
	border:0px solid #ddd;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background: -moz-linear-gradient(top,#f6f6f6,#fff);
	background: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#fff));
	background-color: #333;
	width: 200px;
}

/*『textarea』パーツの表示名と入力項目を囲っているタグのclass*/
#mailform_top .textarea_top {
	float: right;
}

/*『textarea』パーツの表示名を囲っているタグのclass（[ 本文（大） ]の部分）*/
#mailform_top .textarea_left{
	background: #000;
	color: #66FF00;
	font-family: "Century Gothic" ;
}

/*『textarea』パーツの入力項目を囲っているタグのclass*/
#mailform_top .textarea_right {

}

/*『textarea』パーツの入力項目のclass（inputなどの部分）*/
#mailform_top .textarea_parts {
	color: #999;
	font-size: 100%;
	border:0px solid #ddd;
	background-color: #333;
	overflow: auto;
	width: 220px;
	height: 100px;
}

/*メールフォームの送信ボタンを囲っているタグのclass*/
#mailform_top .submit {
	text-align: right;
	color: #000;
}

/*メールフォームの送信ボタンのclass*/
#mailform_top .submit_button {
	color: #66FF00;
	font-size: 100%;
	border:0px solid #ddd;
	background-color: #333;
	width: 100px;
}

/*エラーメッセージを囲っているタグのclass*/
#mailform_top .error {
	color: red;
	padding: 10px;
}

/*エラーメッセージのリトライボタンを囲っているタグのclass*/
#mailform_top .error_submit {
	text-align: right;
	color: #000;
}

/*エラーメッセージのリトライボタンのclass*/
#mailform_top .error_submit_button {
	color: #66FF00;
	font-size: 100%;
	border:0px solid #ddd;
	background-color: #333;
	width: 100px;
}

/*送信完了メッセージを囲っているタグのclass*/
#mailform_top .result {
	color: #66FF00;
	padding: 10px;
}

/*送信完了メッセージの戻るボタンを囲っているタグのclass*/
#mailform_top .result_submit {
	text-align: right;
	color: #000;
}

/*送信完了メッセージの戻るボタンのclass*/
#mailform_top .result_submit_button {
	color: #66FF00;
	font-size: 100%;
	border:0px solid #ddd;
	background-color: #333;
	width: 100px;
}