@charset "UTF-8";

form#mailform {
	padding: 5px;
}
/*↓ここから書き足し*/
form#mailform ul li {
	padding:10px;
	border-top: 1px solid #999999;
	font-size: 14px;
}
form#mailform ul li.form_btn {
	text-align:center;
	padding-top:25px;
}
/*最初の<li>にはボーダーをつけない（:first-child疑似クラスによる指定）*/
form#mailform ul li:first-child {
	border-top:none;
}
/* span要素をブロック化しフロートでフォーム部品と横に並べる*/
form#mailform ul li span {
	width: 12em;
	margin:0px;
	display:block;
	float:left;
/* floatでなく、CSS3 の「display: inline-block」を使う手もアリ
	display: inline-block;*/
}
/*「:after」で <li>の末尾でフロートをクリア*/
form#mailform ul li:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;     /*←フロートをクリア*/
}
/* テキスト入力部品の見た目を統一する */
form#mailform ul li label .txtfiled, form#mailform select {
	width:320px;
	padding:3px 5px;
	margin:0px;
	border: solid 1px #ccc;
	/*テキストエリア内にシャドウをつける。最初にbackground初期化が必要*/
    background: #fff;
	-webkit-box-shadow: 2px 3px 5px -2px #ddd inset;
	-moz-box-shadow: 2px 3px 5px -2px #ddd inset;
	box-shadow: 2px 3px 5px -2px #ddd inset;
	/*角丸にする*/
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
}
form#mailform ul li label .p_code {
	width:70px;
	padding:3px 5px;
	margin-right:10px;
	border: solid 1px #ccc;
	/*テキストエリア内にシャドウをつける。最初にbackground初期化が必要*/
    background: #fff;
	-webkit-box-shadow: 2px 3px 5px -2px #ddd inset;
	-moz-box-shadow: 2px 3px 5px -2px #ddd inset;
	box-shadow: 2px 3px 5px -2px #ddd inset;
	/*角丸にする*/
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
}
form#mailform select {
	/*selectは250では大きすぎるので*/
	width:100px;
}

/*チェックボックス、ラジオボタンのブロックの指定*/
form#mailform ul li p {
	margin:5px 0 0 100px;
}
/*チェックボックス、ラジオボタンの label要素を横に並べる*/
form#mailform ul li p label {
	margin-right: 2em;
	display: block;
	float: left;
}
/*input要素とテキストがくっつかないように右にマージンを少し*/
form#mailform ul li p label input {
	margin-right:0.5em;
}
/*チェックボックス、ラジオボタンの label要素にロールオーバー時の変化を指定する*/
form#mailform ul li p label:hover {
	background : #FFF;
	color: #096;
	font-weight:bold;
}
/*チェックボックスの<label>の横幅を統一する（<p>にクラス名.checkをつけて）*/
form#mailform ul li p.check label {
	width: 9em;
}
/*送信・リセットボタンの体裁を指定（[type="○○"]で属性の値でセレクト）*/
form#mailform ul li input[type="submit"] ,
form#mailform ul li input[type="reset"] {
	cursor:pointer;     /*←これでカーソルを指先型に変化させる*/
	/*font-size:130%;*/
	font-weight: bold;
	width:150px;
	padding: 5px 0;
	margin-right:0.5em;
	border-style:none;
	color: #fff;
	background:#3c3c94;
/*↓背景グラデーションの指定です*/
	background: -moz-linear-gradient(top, #3c3c94, #000042 50%, #3c3c94);
	background: -webkit-linear-gradient(top, #3c3c94, #000042 50%, #3c3c94);
	background: linear-gradient(#3c3c94, #000042 50%, #3c3c94);
/*↓以下、ボックスの角丸、シャドウ、テキストシャドウの指定*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 2px 2px 3px 1px #666;
	-webkit-box-shadow: 2px 2px 3px 1px #666;
	box-shadow: 2px 2px 3px 1px #666;
	text-shadow: 1px 1px 2px #000;
}

form#mailform ul li input[type="submit"]:hover ,
form#mailform ul li input[type="reset"]:hover {
/*↓ここではロールオーバー時の透明度を変更。もちろんグラデーションを指定してもOK*/
	opacity: 0.7;
	font-size:105%;
}
/*ここからタブレット用（481px～800px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:481px) and (max-width:800px){
	form#mailform ul li label span, form#mailform ul li label input, form#mailform ul li label .txtfiled, form#mailform ul li label .p_code, form#mailform ul li input[type="submit"] ,
form#mailform ul li input[type="reset"]  {
	width:100%;
	margin-bottom: 10px;
}
}
/*ここからスマートフォン用（480px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width : 480px){
	form#mailform ul li label span, form#mailform ul li label input, form#mailform ul li label .txtfiled, form#mailform ul li label .p_code, form#mailform ul li input[type="submit"] ,
form#mailform ul li input[type="reset"]  {
	width:100%;
	margin-bottom: 10px;
}
}



#error {
	width: 100%;
	border: solid 2px #f00;
	color: #f00;
	padding: 6px;
	box-sizing: border-box;
}

form#mailform #form-contact {
	margin-left: 0;
}

form#mailform .form-sex {
	display: inline;
	width: auto;
}

@media (min-width:801px) {
	form#mailform #form-contact {
		margin-left: 12em;
	}
}