@charset "UTF-8";

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

/*メールフォーム全体を囲っているタグのid*/
#showy_top {
	width: 500px;
	text-align: left;
}

/*メールフォームのパーツや送信ボタンを囲っているタグのclass（タイトル、説明文以外）*/
#showy_top .main {
}

/*メールフォームのタイトルを囲っているタグのclass*/
#showy_top .title{

}

/*メールフォームの説明文を囲っているタグのclass*/
#showy_top .explain {
	line-height: 1.5;
	margin: 10px 0 10px 0;
}

/*『name』パーツの表示名と入力項目を囲っているタグのclass*/
#showy_top .name_top {
	height: 50px;
	background-color: #669999;
	border: 1px solid #ffffff;
	color: #ffffff;
}

/*『name』パーツの表示名を囲っているタグのclass（[ 名前 ]の部分）*/
#showy_top .name_left{
	float: left;
	width: 120px;
	height: 20px;
	_height: 50px;
	padding: 15px 0px 15px 0px;
	font-weight: bold;
}

/*『name』パーツの入力項目を囲っているタグのclass*/
#showy_top .name_right {
	float: right;
	width: 372px;
	height: 20px;
	_height: 50px;
	padding: 15px 0px 15px 0px;
}

/*『name』パーツの入力項目のclass（inputなどの部分）*/
#showy_top .name_parts {
	border: 1px solid #ffffff;
	width: 200px;
	height: 20px;
}

/*『tel』パーツの表示名と入力項目を囲っているタグのclass*/
#showy_top .tel_top {
	height: 50px;
	background-color: #669999;
	border: 1px solid #ffffff;
	color: #ffffff;
}

/*『tel』パーツの表示名を囲っているタグのclass（[ TEL ]の部分）*/
#showy_top .tel_left{
	float: left;
	width: 120px;
	height: 20px;
	_height: 50px;
	padding: 15px 0px 15px 0px;
	font-weight: bold;
}

/*『tel』パーツの入力項目を囲っているタグのclass*/
#showy_top .tel_right {
	float: right;
	width: 372px;
	height: 20px;
	_height: 50px;
	padding: 15px 0px 15px 0px;
}

/*『tel』パーツの入力項目のclass（inputなどの部分）*/
#showy_top .tel_parts {
	border: 1px solid #ffffff;
	width: 200px;
	height: 20px;
}

/*『mail』パーツの表示名と入力項目を囲っているタグのclass*/
#showy_top .mail_top {
	height: 50px;
	background-color: #669999;
	border: 1px solid #ffffff;
	color: #ffffff;
}

/*『mail』パーツの表示名を囲っているタグのclass（[ メールアドレス ]の部分）*/
#showy_top .mail_left{
	float: left;
	width: 120px;
	height: 20px;
	_height: 50px;
	padding: 15px 0px 15px 0px;
	font-weight: bold;
}

/*『mail』パーツの入力項目を囲っているタグのclass*/
#showy_top .mail_right {
	float: right;
	width: 372px;
	height: 20px;
	_height: 50px;
	padding: 15px 0px 15px 0px;
}

/*『mail』パーツの入力項目のclass（inputなどの部分）*/
#showy_top .mail_parts {
	border: 1px solid #ffffff;
	width: 200px;
	height: 20px;
}

/*『title』パーツの表示名と入力項目を囲っているタグのclass*/
#showy_top .title_top {
	height: 50px;
	background-color: #669999;
	border: 1px solid #ffffff;
	color: #ffffff;
}

/*『title』パーツの表示名を囲っているタグのclass（[ 件名 ]の部分）*/
#showy_top .title_left{
	float: left;
	width: 120px;
	height: 20px;
	_height: 50px;
	padding: 15px 0px 15px 0px;
	font-weight: bold;
}

/*『title』パーツの入力項目を囲っているタグのclass*/
#showy_top .title_right {
	float: right;
	width: 372px;
	height: 20px;
	_height: 50px;
	padding: 15px 0px 15px 0px;
}

/*『title』パーツの入力項目のclass（inputなどの部分）*/
#showy_top .title_parts {
	border: 1px solid #ffffff;
	width: 200px;
	height: 20px;
}

/*『textarea』パーツの表示名と入力項目を囲っているタグのclass*/
#showy_top .textarea_top {
	height: 220px;
	background-color: #669999;
	border: 1px solid #ffffff;
	border-bottom: none;
	color: #ffffff;
}

/*『textarea』パーツの表示名を囲っているタグのclass（[ 本文（大） ]の部分）*/
#showy_top .textarea_left{
	float: left;
	width: 120px;
	height: 220px;
	padding: 15px 0px 15px 0px;
	font-weight: bold;
}

/*『textarea』パーツの入力項目を囲っているタグのclass*/
#showy_top .textarea_right {
	float: right;
	width: 372px;
	height: 210px;
	padding: 15px 0px 15px 0px;
}

/*『textarea』パーツの入力項目のclass（inputなどの部分）*/
#showy_top .textarea_parts {
	border: 1px solid #ffffff;
	width: 300px;
	height: 200px;
}

/*メールフォームの送信ボタンを囲っているタグのclass*/
#showy_top .submit {
	background-color: #669999;
	border: 1px solid #ffffff;
	border-top: none;
	padding-left: 210px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/*メールフォームの送信ボタンのclass*/
#showy_top .submit_button {
	width: 80px;
}

/*エラーメッセージを囲っているタグのclass*/
#showy_top .error {
	color: #ff3333;
}

/*エラーメッセージのリトライボタンを囲っているタグのclass*/
#showy_top .error_submit {

}

/*エラーメッセージのリトライボタンのclass*/
#showy_top .error_submit_button {
	width: 80px;
}

/*送信完了メッセージを囲っているタグのclass*/
#showy_top .result {
	background-color: #669999;
	border: 1px solid #ffffff;
	border-top: none;
	padding-left: 210px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/*送信完了メッセージの戻るボタンを囲っているタグのclass*/
#showy_top .result_submit {
	width: 80px;
}

/*送信完了メッセージの戻るボタンのclass*/
#showy_top .result_submit_button {
	width: 80px;
}