@charset "UTF-8";

#headerArea{
	padding-bottom: 300px;	/* 背景画像の高さに合わせる */
	background-image: url(../../news/base_img/headerBg-60.jpg);
}

#contentArea{
	padding: 100px 140px 200px;
}

#pageTitle{
	/* imgRep */
	margin: 0px auto;
	height: 27px;
	background-repeat: no-repeat;
	background-position: left top;
}

.contact #pageTitle{ width: 167px; background-image: url(../base_img/pageTitle_contact.png); }
.confirm #pageTitle{ width: 165px; background-image: url(../base_img/pageTitle_confirm.png); }

#remarksArea{
	margin-top: 80px;
}

.remarks{
	font-size: 14px;
	line-height: 21px;
	text-align: justify;
	text-justify: inter-ideograph;
}

.remarks.error{
	color: rgb(237,28,36);
}

/* form */
/*============================================================================*/

#contactForm{
	margin-top: 50px; /* .remarks底辺との間隔 */
	font-size: 14px;
	line-height: 24px;
}
.debug-mode #contactForm dl{ background-color: green; }

	/* ラベル */
	/*========================================================================*/
	.inputLabel{
		margin-top: 30px;	/* 先行する.inputWrapper底辺との間隔 */
		line-height: 1;
	}
	
	/* 必須項目の場合「＊」を表示 */
	.inputLabel.required:before{
		display: inline-block;
		content: "＊";
		width: 15px;
	}
	
	/* confirm */
	.confirm .inputLabel{ color: rgb(102,102,102); }
	
	/*------------------------------------------------------------------------*/
	/* ラベル */
	
	/* input & textarea */
	/*========================================================================*/
	.inputWrapper{
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			 -o-box-sizing: border-box;
				box-sizing: border-box;
		display: table;
		margin-top: 10px;	/* .label底辺との間隔 */
		width: 100%;
		border: 1px solid rgb(203,161,38);
	}
	.debug-mode #contactForm .inputWrapper{ background-color: orange; }
	
	.inputWrapper.no-borders{ border-style: none; }
	
	/* バリデーション済み */
	.validated .inputWrapper{ border-color: rgb(0,0,0); }
	
	/* エラー時 */
	.inputWrapper.error{ border-color: rgb(237,28,36); }
	
	/* confirm */
	.confirm .inputWrapper{
		color: rgb(102,102,102);
		background-color: rgb(230,230,230);
		border-color: rgb(153,153,153);
	}
	
	/* input[text]要素 */
	.input[type=text],
	.input[data-type=text]{
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			 -o-box-sizing: border-box;
				box-sizing: border-box;
		display: table-cell;
		padding: 0px 20px;
		width: 100%;
		height: 36px;
		vertical-align: middle;
		border: none;
	}
	.debug-mode .input{ background-color: pink; }
	
	.msie8 .input{ line-height: 36px; }
	
	/* input[radio] */
	.radioWrapper{
		float: left;
		display: block;
	}
		
	.radioWrapper + .radioWrapper{
		margin-left: 30px;
	}
	
	/* エラー時 */ .error .radioWrapper{ color: rgb(237,28,36); }
	
	.input[type=radio],
	.input[data-type=radio]{
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		border: none;
	}
	.safari .input[type=radio]{ vertical-align: baseline; }
	
	.input[type=radio] + label{
		display: inline-block;
		padding-left: 10px;
		cursor: pointer;
	}
	
	
	/* textarea */
	.textarea{
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			 -o-box-sizing: border-box;
				box-sizing: border-box;
		display: block;
		padding-left: 20px;
		width: 100%;
		height: 330px;
		border: none;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		resize: none;
	}
	
	.confirm .textarea{
		min-height: 330px;
		height: auto;
		overflow-y: auto;
	}
	
	/*------------------------------------------------------------------------*/
	/* input & textarea */

/* ボタン */
#contactForm .btn{
	/* imgRep */
	margin: 0px auto;	/* 左右中央配置 */
	margin-top: 50px;	/* .textarea底辺との間隔 */
	width: 240px;		/* 背景画像に合わせる */
	height: 60px;		/* 背景画像に合わせる */
	background-repeat: no-repeat;
	background-position: left top;
	cursor: pointer;
}
.debug-mode #contactForm .btn{ background-color: blue; }

#contactForm .btn:hover{ background-position: left bottom; }

#confBtn { background-image: url(../base_img/confBtn.gif); }
#sendBtn { background-image: url(../base_img/sendBtn.gif); }

/*----------------------------------------------------------------------------*/
/* form */