@charset "UTF-8";

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

/*メールフォーム全体を囲っているタグのid*/
#kouryukaisanka_top
{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
}

/*メールフォームのパーツや送信ボタンを囲っているタグのclass（タイトル、説明文以外）*/
#kouryukaisanka_top .main
{
	width: 400px;
	height: 650px;
	border-radius: 20px;	/*角丸のサイズ*/
	box-shadow: 1px 1px 4px rgba(0,0,0,0.2);	/*ボックスの影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
  margin: 0 auto; 
	background: url(../images/bg1.png);	/*背景の水玉画像の読み込み*/
}

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

}

/*メールフォームの説明文を囲っているタグのclass*/
#kouryukaisanka_top .explain
{

}

/*『name』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .name_top
{
	width: 400px;
	height: 100px;
}

/*『name』パーツの表示名を囲っているタグのclass（[ 名前 ]の部分）*/
#kouryukaisanka_top .name_left
{
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『name』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .name_parts
{
  font-size: 24px;
  width: 400px;
  margin: auto;
}

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

}

/*『mail』パーツの表示名を囲っているタグのclass（[ メールアドレス ]の部分）*/
#kouryukaisanka_top .mail_left
{
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『mail』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .mail_parts
{
  font-size: 24px;
  width: 400px;
  margin: auto;
}

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

}

/*『title』パーツの表示名を囲っているタグのclass（[ ゼミ名 ]の部分）*/
#kouryukaisanka_top .title_left
{
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『title』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .title_parts
{
  font-size: 24px;
  width: 400px;
  margin: auto;
}

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

}

/*『text』パーツの表示名を囲っているタグのclass（[ 入学年度 ]の部分）*/
#kouryukaisanka_top .text_left
{
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『text』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .text_parts
{
  font-size: 24px;
  width: 400px;
  margin: auto;
}

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

}

/*『address』パーツの表示名を囲っているタグのclass（[ 住所 ]の部分）*/
#kouryukaisanka_top .address_left
{
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『address』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .address_parts
{
  font-size: 24px;
  width: 400px;
  margin: auto;
}

/*メールフォームの送信ボタンを囲っているタグのclass*/
#kouryukaisanka_top .submit
{
  text-align: center;
  margin: 0 auto; 
}

/*メールフォームの送信ボタンのclass*/
#kouryukaisanka_top .submit_button
{
  font-size: 30px;
}

/*エラーメッセージを囲っているタグのclass*/
#kouryukaisanka_top .error
{
  color: #FF0000;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

/*エラーメッセージのリトライボタンを囲っているタグのclass*/
#kouryukaisanka_top .error_submit
{
  text-align: center;
  margin: 0 auto; 
}

/*エラーメッセージのリトライボタンのclass*/
#kouryukaisanka_top .error_submit_button
{
  font-size: 30px;
}

/*送信完了メッセージを囲っているタグのclass*/
#kouryukaisanka_top .result
{
  color: #ffffff;
  font-size: 24px;
  text-align: center;
}

/*送信完了メッセージの戻るボタンを囲っているタグのclass*/
#kouryukaisanka_top .result_submit
{
  text-align: center;
  margin: 0 auto; 
}

/*送信完了メッセージの戻るボタンのclass*/
#kouryukaisanka_top .result_submit_button
{
  font-size: 30px;
}


/*画面幅550px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:550px){

/*メールフォーム全体を囲っているタグのid*/
#kouryukaisanka_top
{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
}

/*メールフォームのパーツや送信ボタンを囲っているタグのclass（タイトル、説明文以外）*/
#kouryukaisanka_top .main
{
	width: 200px;
	height: 300px;
	border-radius: 20px;	/*角丸のサイズ*/
	box-shadow: 1px 1px 4px rgba(0,0,0,0.2);	/*ボックスの影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
  margin: 0 auto; 
	background: url(../images/bg1.png);	/*背景の水玉画像の読み込み*/
}

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

}

/*メールフォームの説明文を囲っているタグのclass*/
#kouryukaisanka_top .explain
{

}

/*『name』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .name_top
{
	width: 195px;
	height: 50px;
}

/*『name』パーツの表示名を囲っているタグのclass（[ 名前 ]の部分）*/
#kouryukaisanka_top .name_left
{
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『name』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .name_parts
{
  font-size: 14px;
  width: 195px;
  margin: auto;
}

/*『mail』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .mail_top
{
	width: 195px;
	height: 50px;
}

/*『mail』パーツの表示名を囲っているタグのclass（[ メールアドレス ]の部分）*/
#kouryukaisanka_top .mail_left
{
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『mail』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .mail_parts
{
  font-size: 14px;
  width: 195px;
  margin: auto;
}

/*『title』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .title_top
{
	width: 195px;
	height: 50px;
}

/*『title』パーツの表示名を囲っているタグのclass（[ ゼミ名 ]の部分）*/
#kouryukaisanka_top .title_left
{
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『title』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .title_parts
{
  font-size: 14px;
  width: 195px;
  margin: auto;
}

/*『text』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .text_top
{
	width: 195px;
	height: 50px;
}

/*『text』パーツの表示名を囲っているタグのclass（[ 入学年度 ]の部分）*/
#kouryukaisanka_top .text_left
{
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『text』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .text_parts
{
  font-size: 14px;
  width: 195px;
  margin: auto;
}

/*『address』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .address_top
{
	width: 195px;
	height: 60px;
}

/*『address』パーツの表示名を囲っているタグのclass（[ 住所 ]の部分）*/
#kouryukaisanka_top .address_left
{
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『address』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .address_parts
{
  font-size: 14px;
  width: 195px;
  margin: auto;
}

/*メールフォームの送信ボタンを囲っているタグのclass*/
#kouryukaisanka_top .submit
{
  text-align: center;
  margin: 0 auto; 
}

/*メールフォームの送信ボタンのclass*/
#kouryukaisanka_top .submit_button
{
  font-size: 20px;
}

/*エラーメッセージを囲っているタグのclass*/
#kouryukaisanka_top .error
{
  color: #FF0000;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/*エラーメッセージのリトライボタンを囲っているタグのclass*/
#kouryukaisanka_top .error_submit
{
  text-align: center;
  margin: 0 auto; 
}

/*エラーメッセージのリトライボタンのclass*/
#kouryukaisanka_top .error_submit_button
{
  font-size: 20px;
}

/*送信完了メッセージを囲っているタグのclass*/
#kouryukaisanka_top .result
{
  color: #ffffff;
  font-size: 14px;
  text-align: center;
}

/*送信完了メッセージの戻るボタンを囲っているタグのclass*/
#kouryukaisanka_top .result_submit
{
  text-align: center;
  margin: 0 auto; 
}

/*送信完了メッセージの戻るボタンのclass*/
#kouryukaisanka_top .result_submit_button
{
  font-size: 20px;
}

/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){

/*メールフォーム全体を囲っているタグのid*/
#kouryukaisanka_top
{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
}

/*メールフォームのパーツや送信ボタンを囲っているタグのclass（タイトル、説明文以外）*/
#kouryukaisanka_top .main
{
	width: 180px;
	height: 250px;
	border-radius: 20px;	/*角丸のサイズ*/
	box-shadow: 1px 1px 4px rgba(0,0,0,0.2);	/*ボックスの影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
  margin: 0 auto; 
	background: url(../images/bg1.png);	/*背景の水玉画像の読み込み*/
}

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

}

/*メールフォームの説明文を囲っているタグのclass*/
#kouryukaisanka_top .explain
{

}

/*『name』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .name_top
{
	width: 145px;
	height: 40px;
}

/*『name』パーツの表示名を囲っているタグのclass（[ 名前 ]の部分）*/
#kouryukaisanka_top .name_left
{
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『name』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .name_parts
{
  font-size: 11px;
  width: 145px;
  margin: auto;
}

/*『mail』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .mail_top
{
	width: 145px;
	height: 40px;
}

/*『mail』パーツの表示名を囲っているタグのclass（[ メールアドレス ]の部分）*/
#kouryukaisanka_top .mail_left
{
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『mail』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .mail_parts
{
  font-size: 11px;
  width: 145px;
  margin: auto;
}

/*『title』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .title_top
{
	width: 145px;
	height: 40px;
}

/*『title』パーツの表示名を囲っているタグのclass（[ ゼミ名 ]の部分）*/
#kouryukaisanka_top .title_left
{
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『title』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .title_parts
{
  font-size: 11px;
  width: 145px;
  margin: auto;
}

/*『text』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .text_top
{
	width: 145px;
	height: 40px;
}

/*『text』パーツの表示名を囲っているタグのclass（[ 入学年度 ]の部分）*/
#kouryukaisanka_top .text_left
{
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『text』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .text_parts
{
  font-size: 11px;
  width: 145px;
  margin: auto;
}

/*『address』パーツの表示名と入力項目を囲っているタグのclass*/
#kouryukaisanka_top .address_top
{
	width: 145px;
	height: 40px;
}

/*『address』パーツの表示名を囲っているタグのclass（[ 住所 ]の部分）*/
#kouryukaisanka_top .address_left
{
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

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

}

/*『address』パーツの入力項目のclass（inputなどの部分）*/
#kouryukaisanka_top .address_parts
{
  font-size: 11px;
  width: 145px;
  margin: auto;
}

/*メールフォームの送信ボタンを囲っているタグのclass*/
#kouryukaisanka_top .submit
{
  text-align: center;
  margin: 0 auto; 
}

/*メールフォームの送信ボタンのclass*/
#kouryukaisanka_top .submit_button
{
  font-size: 15px;
}

/*エラーメッセージを囲っているタグのclass*/
#kouryukaisanka_top .error
{
  color: #FF0000;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

/*エラーメッセージのリトライボタンを囲っているタグのclass*/
#kouryukaisanka_top .error_submit
{
  text-align: center;
  margin: 0 auto; 
}

/*エラーメッセージのリトライボタンのclass*/
#kouryukaisanka_top .error_submit_button
{
  font-size: 15px;
}

/*送信完了メッセージを囲っているタグのclass*/
#kouryukaisanka_top .result
{
  color: #ffffff;
  font-size: 11px;
  text-align: center;
}

/*送信完了メッセージの戻るボタンを囲っているタグのclass*/
#kouryukaisanka_top .result_submit
{
  text-align: center;
  margin: 0 auto; 
}

/*送信完了メッセージの戻るボタンのclass*/
#kouryukaisanka_top .result_submit_button
{
  font-size: 15px;
}
}