@charset "UTF-8";

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

/*メールフォーム全体を囲っているタグのid*/
#unmimicform_top {
 width:475px;
 color:#FFFFFF;
}

/*メールフォームのパーツや送信ボタンを囲っているタグのclass（タイトル、説明文以外）*/
#unmimicform_top .main {
 width:100%;
 font-size:12px;
 color:#cccccc;
 padding: 0px;
 border: 0px solid #999999;
}

<!-- ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ -->
/*『name』パーツの表示名と入力項目を囲っているタグのclass*/
#unmimicform_top .name_top {
 width:100%;
 height:32px;
 margin: 0px 0px 5px 0px;
 text-align:left;
 background-color:#222222;
 border: 1px solid #666666;
}

/*『name』パーツの表示名を囲っているタグのclass（[ お名前.※ ]の部分）*/
#unmimicform_top .name_left{
 width:30%;
 padding:10px 0px 0px 10px;
 text-align:left;
 float:left; display:inline;
}

/*『name』パーツの入力項目を囲っているタグのclass*/
#unmimicform_top .name_right {
 width:70%;
 padding: 5px 10px 0px 10px;
 text-align:left;
 float:left; display:inline;
}

/*『name』パーツの入力項目のclass（inputなどの部分）*/
#unmimicform_top .name_parts {
 width:100%;
 border: 1px solid #666666;
}

<!-- ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ -->
/*『mail』パーツの表示名と入力項目を囲っているタグのclass*/
#unmimicform_top .mail_top {
 width:100%;
 height:32px;
 margin: 0px 0px 5px 0px;
 text-align:left;
 background-color:#222222;
 border: 1px solid #666666;
}

/*『mail』パーツの表示名を囲っているタグのclass（[ メールアドレス.※ ]の部分）*/
#unmimicform_top .mail_left{
 width:30%;
 padding:10px 0px 0px 10px;
 text-align:left;
 float:left; display:inline;
}

/*『mail』パーツの入力項目を囲っているタグのclass*/
#unmimicform_top .mail_right {
 width:70%;
 padding: 5px 10px 0px 10px;
 text-align:left;
 float:left; display:inline;
}

/*『mail』パーツの入力項目のclass（inputなどの部分）*/
#unmimicform_top .mail_parts {
 width:100%;
 border: 1px solid #666666;
}

<!-- ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ -->
/*『textarea』パーツの表示名と入力項目を囲っているタグのclass*/
#unmimicform_top .textarea_top {
 width:100%;
 margin: 0px 0px 5px 0px;
 text-align:left;
 background-color:#222222;
 border: 1px solid #666666;
}

/*『textarea』パーツの表示名を囲っているタグのclass（[ お問合せ内容 ]の部分）*/
#unmimicform_top .textarea_left{
 width:30%;
 padding:10px 0px 0px 10px;
 text-align:left;
 float:left; display:inline;
}

/*『textarea』パーツの入力項目を囲っているタグのclass*/
#unmimicform_top .textarea_right {
 width:70%;
 padding: 5px 10px 10px 10px;
 text-align:left;
 float:left; display:inline;
}

/*『textarea』パーツの入力項目のclass（inputなどの部分）*/
#unmimicform_top .textarea_parts {
 width:100%;
 height:125px;
 border: 1px solid #666666;
}

<!-- ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ -->
/*メールフォームの送信ボタンを囲っているタグのclass*/
#unmimicform_top .submit {
 text-align:center;
 padding: 5px;
 background-color:#222222;
 border: 1px solid #666666;
}

/*メールフォームの送信ボタンのclass*/
#unmimicform_top .submit_button {
 width:60px;
 height:24px;
 text-align:center;
 color:#FFFFFF;
 background-image: url(image/submit.gif);
 border: 0px;
}

<!-- ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ -->
/*エラーメッセージを囲っているタグのclass*/
#unmimicform_top .error {

}

/*エラーメッセージのリトライボタンを囲っているタグのclass*/
#unmimicform_top .error_submit {
 text-align:center;
 padding: 5px;
 background-color:#222222;
 border: 1px solid #666666;
}

/*エラーメッセージのリトライボタンのclass*/
#unmimicform_top .error_submit_button {
 width:60px;
 height:24px;
 text-align:center;
 color:#FFFFFF;
 background-image: url(image/submit.gif);
 border: 0px;
}

<!-- ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ -->
/*送信完了メッセージを囲っているタグのclass*/
#unmimicform_top .result {

}

/*送信完了メッセージの戻るボタンを囲っているタグのclass*/
#unmimicform_top .result_submit {
 text-align:center;
 padding: 5px;
 background-color:#222222;
 border: 1px solid #666666;
}

/*送信完了メッセージの戻るボタンのclass*/
#unmimicform_top .result_submit_button {
 width:60px;
 height:24px;
 text-align:center;
 color:#FFFFFF;
 background-image: url(image/submit.gif);
 border: 0px;
}