﻿div#form { width:90%; max-width:1200px; margin:0 auto;  background:url(../img/audition/cover_opacity.png); }

	div#form p { font-size:14px; }
	/*必須項目*/
	div#form span.essential { white-space:nowrap; padding:3px 7px 3px 7px; font-size:11px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #FFFFFF; background-color:#D34A4A; font-weight:normal; margin:0px 5px 0px 10px; }


@media only screen and (max-width: 480px) {

	div#form { width:90%; margin: 0 auto;}
	div#form span.essential {padding:2px 7px 2px 7px; font-size:10px; }
}

/*……………………………TABLE CSS……………………………*/

div#form table { width:100%; margin:20px auto; }
div#form table th,div#form table td { vertical-align:top; }
div#form table td p { font-size:12px; }

@media only screen and (max-width:600px){

		div#form table th,div#form table td { padding:10px 0px 0px 5px; }
		div#form table td p { font-size:10px; }
}


/*……………………………FORM CSS……………………………*/

input[type="text"]:focus,
select:focus,
textarea:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus { outline: 0; border-color: orange; }

/*…………………………入力…………………………*/

input[type="text"] { width:100%; padding:20px 4px; text-indent:5px; border:#8c8c8c 1px solid;
margin:0px 0px 5px 0px; -webkit-appearance:none; background:#FFFFFF; }

		/*IE*/
		::-webkit-input-placeholder { font-size:12px; }
		:-moz-placeholder { font-size:12px; }


@media only screen and (max-width:480px){

	input[type="text"] { line-height:3em; padding:0px 0px 0px 5px; }
}


/*…………………………テキストエリア…………………………*/

textarea { width:100%; border:1px solid #8c8c8c; padding:10px; resize:vertical; -webkit-appearance:none; background:#FFFFFF; }


/*…………………………セレクトボタン…………………………*/

select { width:70%; max-width:350px; height: 40px; padding:0px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:#ff9933 url(../img/common/arrow.svg) no-repeat right center; background-size:25px 25px; vertical-align: middle; color:#FFF; border:none; margin-bottom:8px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; }

		/*IE*/
		select::-ms-expand { display: none; }
		.ie8 select { background:#ff9933; padding:15px 10px; height:auto; }
		.ie9 select { background:#ff9933; padding:0px 0px 0px 10px; }

@media only screen and (max-width:480px){

	select { width:100%; max-width:none; }
}


/*…………………………ラジオボタン…………………………*/

input[type="radio"],input[type="checkbox"] { width:20px; height:20px; border:1px solid #ff9933; border-radius:50%; background:transparent; vertical-align:middle; margin:5px; -webkit-appearance: none; }
input[type="radio"]:checked,input[type="checkbox"]:checked { background:#ff9933; }

		/*IE*/
		.ie8 input[type="radio"],.ie8 input[type="checkbox"]  { border:none; }
		.ie9 input[type="radio"],.ie9 input[type="checkbox"]  { border:none; }


/* …………………………ファイル選択…………………………*/

input[type=file] { padding:20px 0px; cursor:pointer; }


		/*IE10以降に適用*/
		@media all and (-ms-high-contrast:none){
 		 input[type=file] { padding:0px; margin-bottom:10px; }
		}

		.ie9 input[type=file] { padding:inherit; margin-bottom:10px; }
		.ie8 input[type=file] { padding:inherit; margin-bottom:10px; }

@media only screen and (max-width:480px){

		input[type=file] { width:100%; padding:10px 0px; }
}


/*…………………………送信ボタン…………………………*/

input[type="submit"],input[type="reset"],input[type="button"] { text-align:center; border:none; cursor:pointer; background:#ff9933; color:#FFFFFF; transition: 0.8s; -webkit-appearance: none; }
input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover { background:#FF7F00; color:#FFFFFF; transition: 0.8s; }

/*YES*/
input[type="submit"] { padding:12px 100px; font-size: 16px;}

/*NO*/
input[type="button"] { padding:12px 70px; font-size: 18px;}

/*BACK*/
input[type="reset"] { padding:12px 70px; font-size: 18px;}

@media only screen and (max-width:800px){
	/*YES*/
	input[type="submit"] { padding:12px 50px; font-size: 12px;}
}

/*ボタンを並べる*/
ul#transmission { text-align:center; padding-bottom: 20px;}
ul#transmission li { margin:10px 10px 0px 10px; display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; }

/*郵便番号*/
input#btn3{ background-color:#D67A73; padding:7px 10px; margin:auto; }
input#btn3:hover{ transition: 0.8s;  }


@media only screen and (max-width:480px){

	input[type="submit"]:hover,input[type="reset"]:hover { transition:0s; }
	input[type="submit"] { padding:10px 40px; }
	input[type="button"] { padding:10px 40px; }
	input[type="reset"] { padding:10px 30px; }

	ul#transmission li { margin:0px 5px 0px 5px; }
}

@media only screen and (max-width:380px){

	input[type="submit"] { padding:10px 20px; }
	input[type="button"] { padding:10px 20px; }
	input[type="reset"] { padding:10px 10px; }
}


div#form div.comp_box { width:95%; max-width:800px; margin:50px auto; }

		div#form div.comp_box h3 { font-weight:bold; text-align:center; padding:0px 0px 10px 0px; border-bottom:#eeeeee 1px solid; }
		div#form div.comp_box p { margin:20px 0px 40px 0px; }

@media only screen and (max-width:480px){

	div#form div.comp_box { width:100%; margin:0px auto 20px auto; }
	div#form div.comp_box p { font-size:12px; }
}


/*…………………………確認画面…………………………*/

div.confirmation div#form { width:95%; margin:50px auto 10px auto; padding:20px 0px 40px 0px; border:#e1e1e1 1px solid; }

		div.confirmation div#form p.txt { text-align:center; margin:20px; }
		div.confirmation div.cover { width:95%; max-width:800px; margin:auto; padding:10px 0px 20px 0px; }
		div.confirmation div.cover img.logo { width:100px; height:auto; float:right; }

		/*エラー文表示*/
		div.error_messe { width:95%; max-width:500px; margin:30px auto; padding:20px; background:#F3F3F3; }
		p.error_messe { padding:5px 0px; color:#C9383B; }
		p.error_messe span { padding:0px 3px; font-weight:bold; }


@media only screen and (max-width: 600px) {

		div.confirmation div.cover img.logo { width:80px; }
}

@media only screen and (max-width: 480px) {

	div.confirmation div#form { padding:10px 10px 30px 10px; margin:0px auto 10px auto; }
	div#form span.essential {padding:2px 7px 2px 7px; font-size:10px; }
	div.error_messe { margin:15px auto 30px auto; padding:20px 10px; }
}
