@charset "UTF-8";

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

/*メールフォーム全体を囲っているタグのid*/
#itaku_join_top {
margin: 530px auto 0px auto;
border: 0px solid #000000;
width: 460px;
}

/*メールフォームのパーツや送信ボタンを囲っているタグのclass（タイトル、説明文以外）*/
#itaku_join_top .main {
margin: -510px auto 0 auto;
height: 550px;
width: 450px;
border: 0px solid #ff0000;
}


/**********************************/

/*『name』パーツの表示名と入力項目を囲っているタグのclass*/
#itaku_join_top .name_top {
border-bottom: 1px dashed #833;
width: 360px;
}

/*『name』パーツの表示名を囲っているタグのclass（[ 名前（HN） ]の部分）*/
#itaku_join_top .name_left{
float: left;
width: 100px;
margin: 10px;
border: 0px solid #00ff00;
}

/*『name』パーツの入力項目を囲っているタグのclass*/
#itaku_join_top .name_right {
float: left;
border: 0px solid #0000ff;
padding: 5px;
}

/*『name』パーツの入力項目のclass（inputなどの部分）*/
#itaku_join_top .name_parts {
border: 0;
width: 200px;  
height: 30px; 
background-color:rgba(250,245,210,0.7);
border-bottom: 0px solid #833;
padding-left: 10px;
}

/**********************************/


/*『address』パーツの表示名と入力項目を囲っているタグのclass*/
#itaku_join_top .address_top {
border-bottom: 1px dashed #833;
width: 360px;
}

/*『address』パーツの表示名を囲っているタグのclass（[ サークル名 ]の部分）*/
#itaku_join_top .address_left{
float: left;
width: 100px;
margin: 10px;
border: 0px solid #00ff00;
}

/*『address』パーツの入力項目を囲っているタグのclass*/
#itaku_join_top .address_right {
float: left;
border: 0px solid #0000ff;
padding: 5px;
}

/*『address』パーツの入力項目のclass（inputなどの部分）*/
#itaku_join_top .address_parts {
border: 0;
width: 200px;  
height: 30px; 
background-color:rgba(250,245,210,0.7);
border-bottom: 0px solid #833;
padding-left: 10px;
}

/*『mail』パーツの表示名と入力項目を囲っているタグのclass*/
#itaku_join_top .mail_top {
border-bottom: 1px dashed #833;
width: 360px;
}

/*『mail』パーツの表示名を囲っているタグのclass（[ メールアドレス ]の部分）*/
#itaku_join_top .mail_left{
float: left;
width: 100px;
margin: 10px;
border: 0px solid #00ff00;
}

/*『mail』パーツの入力項目を囲っているタグのclass*/
#itaku_join_top .mail_right {
float: left;
border: 0px solid #0000ff;
padding: 5px;
}

/*『mail』パーツの入力項目のclass（inputなどの部分）*/
#itaku_join_top .mail_parts {
border: 0;
width: 200px;  
height: 30px; 
background-color:rgba(250,245,210,0.7);
border-bottom: 0px solid #833;
padding-left: 10px;
}

/*『sex』パーツの表示名と入力項目を囲っているタグのclass*/
#itaku_join_top .sex_top {
border-bottom: 1px dashed #833;
width: 360px;
}

/*『sex』パーツの表示名を囲っているタグのclass（[ 性別 ]の部分）*/
#itaku_join_top .sex_left{
float: left;
width: 100px;
margin: 10px;
border: 0px solid #00ff00;
}

/*『sex』パーツの入力項目を囲っているタグのclass*/
#itaku_join_top .sex_right {
float: left;
border: 0px solid #0000ff;
padding: 5px;
}

/*『sex』パーツの入力項目のclass（inputなどの部分）*/
#itaku_join_top .sex_parts {
border: 0;
width: 200px;  
height: 30px; 
background-color:rgba(250,245,210,0.7);
border-bottom: 0px solid #833;
padding-left: 10px;
}

/*『url』パーツの表示名と入力項目を囲っているタグのclass*/
#itaku_join_top .url_top {
border-bottom: 1px dashed #833;
width: 360px;
}

/*『url』パーツの表示名を囲っているタグのclass（[ サイトURL ]の部分）*/
#itaku_join_top .url_left{
float: left;
width: 100px;
margin: 10px;
border: 0px solid #00ff00;
}

/*『url』パーツの入力項目を囲っているタグのclass*/
#itaku_join_top .url_right {
float: left;
border: 0px solid #0000ff;
padding: 5px;
}

/*『url』パーツの入力項目のclass（inputなどの部分）*/
#itaku_join_top .url_parts {
border: 0;
width: 200px;  
height: 30px; 
background-color:rgba(250,245,210,0.7);
border-bottom: 0px solid #833;
padding-left: 10px;
}

/*『title』パーツの表示名と入力項目を囲っているタグのclass*/
#itaku_join_top .title_top {
border-bottom: 1px dashed #833;
width: 360px;
}

/*『title』パーツの表示名を囲っているタグのclass（[ ピクシブ ]の部分）*/
#itaku_join_top .title_left{
float: left;
width: 100px;
margin: 10px;
border: 0px solid #00ff00;
}

/*『title』パーツの入力項目を囲っているタグのclass*/
#itaku_join_top .title_right {
float: left;
border: 0px solid #0000ff;
padding: 5px;
}

/*『title』パーツの入力項目のclass（inputなどの部分）*/
#itaku_join_top .title_parts {
border: 0;
width: 200px;  
height: 30px; 
background-color:rgba(250,245,210,0.7);
border-bottom: 0px solid #833;
padding-left: 10px;
}

/*『text』パーツの表示名と入力項目を囲っているタグのclass*/
#itaku_join_top .text_top {
}

/*『text』パーツの表示名を囲っているタグのclass（[ 作品傾向 ]の部分）*/
#itaku_join_top .text_left{
width: 400px;
margin: 20px 10px 0px 10px;
border-bottom: 1px dashed #833;
}

/*『text』パーツの入力項目を囲っているタグのclass*/
#itaku_join_top .text_right {
border: 0px solid #0000ff;
padding: 10px 5px 0 0;
margin-left: 10px;
}

/*『text』パーツの入力項目のclass（inputなどの部分）*/
#itaku_join_top .text_parts {
border: 0;
width: 400px; 
height: 30px;
background-color:rgba(250,245,210,0.7);
border-bottom: 0px solid #833;
padding-left: 10px;
}




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

/*『textarea』パーツの表示名を囲っているタグのclass（[ 備考 ]の部分）*/
#itaku_join_top .textarea_left{
width: 150px;
margin: 0px 10px 10px 10px;
border-bottom: 1px dashed #833;
}

/*『textarea』パーツの入力項目を囲っているタグのclass*/
#itaku_join_top .textarea_right {
border: 0px solid #0000ff;
margin-left: 10px;
padding: 10px 5px 0 0;
}

/*『textarea』パーツの入力項目のclass（inputなどの部分）*/
#itaku_join_top .textarea_parts {
border: 0;
width: 400px; 
height: 50px;  
background-color:rgba(250,245,210,0.7);
border-bottom: 0px solid #833;
padding: 5px;
}





/*メールフォームの送信ボタンを囲っているタグのclass*/
#itaku_join_top .submit {
text-align: right;
width: 400px;  
border: 0px solid #00ff00;}

/*メールフォームの送信ボタンのclass*/
#itaku_join_top .submit_button {
background-color:rgba(250,245,210,0.8);
border: 0px solid #00ff00;
border-bottom: 0px solid #833;
}




/*エラーメッセージを囲っているタグのclass*/
#itaku_join_top .error {
border: 0px solid #00ff00;}

/*エラーメッセージのリトライボタンを囲っているタグのclass*/
#itaku_join_top .error_submit {
text-align: right;
width: 400px;  
border: 0px solid #00ff00;
}

/*エラーメッセージのリトライボタンのclass*/
#itaku_join_top .error_submit_button {
background-color:rgba(250,245,210,0.8);
padding: 8px;
border: 0px solid #00ff00;
border-bottom: 0px solid #833;
}



/*送信完了メッセージを囲っているタグのclass*/
#itaku_join_top .result {
border: 0px solid #00ff00;}

/*送信完了メッセージの戻るボタンを囲っているタグのclass*/
#itaku_join_top .result_submit {
text-align: right;
width: 400px;  
border: 0px solid #00ff00;
}

/*送信完了メッセージの戻るボタンのclass*/
#itaku_join_top .result_submit_button {
background-color:rgba(250,245,210,0.8);
padding: 8px;
border: 0px solid #00ff00;
border-bottom: 0px solid #833;
}