@charset "utf-8";

/* フォームメール2 CSS */

/* フォームを囲んでいる外枠　部分　幅860px
　------------------------- */
div#sfm-container {
		width: auto;
		margin: 15px auto;
		border: 1px solid #ccc;
}

/* フォーム枠　部分　幅834px　左右12pxづつスペース
　------------------------- */
div#sfm-layout {
		margin: 12px 12px;
		border: 1px solid #ccc;
}



dl {
		width: auto;
		text-align: left;
}

div#sfm-layout form {
		margin: 0px;
}

div#sfm-layout input,
div#sfm-layout select,
div#sfm-layout textarea {
		font-size: 1.0em;
}

div#sfm-layout dt, div#sfm-layout dd {
		font-size: 1.0em;
		text-align: left;
}

div#sfm-layout dt {
		font-weight: normal;
		background-color: #e4e4e4;
		white-space: normal;
		padding: 5px;
		border-left: 2px solid #bbb;
}

div#sfm-layout dd {
		background: #f1f1f1;
		width: auto;
		padding: 5px;
}

/*住所部分の右データ部分を非表示にする
	------------------------- */
div#sfm-layout dd.jyusho_dd01 {
		display: none;
	}

/* （半角英数字）（半角数字）部分
	------------------------- */
div#sfm-layout span {
		font-size: 0.8em;
}

/* 入力必修項目の左赤い線の設定部分
　------------------------- */
div#sfm-layout .border-red {
			border-left: solid 2px red;
}

div#sfm-layout .ERR {
		color: red;
}

/* フォーム整形 */
.w300 { 
		width: 90%;
}

.w80 {
		width: 45px;
}

.w70 {
		width: 40px;
}

#message { width: 90%; height: 150px; }



.company_red {
		font-size: 0.8em;
		color: red;
}

/* フォーム部分　最下段『赤い印の入った項目は必須入力となります。』部分
　------------------------- */
div#sfm-layout p {
		font-size: 0.9em;
		font-weight: normal;
		margin-bottom: 5px;
		padding-bottom: 5px;
}

div#sfm-layout .type-red {
		color: red;
}

/* 送信　リセット　部分
	------------------------- */
div#sfm-layout .submit {
		text-align: center;
		background: #fff;
		width: auto;
		border-left: none;
}

div#sfm-layout .submit input {
		font-size: 1.0em;
		width: 80px;
		height: 30px;
}

/* 著作権表記 */
div#copyright { font-size: 10px; text-align: right; margin-top: 2px; padding-right: 6px;}
div#copyright a:link, div#copyright a:visited { color: #999; text-decoration: none; }
div#copyright a:hover { text-decoration: underline; }



/* 完了画面 『送信完了しました。』　部分
　------------------------- */
div#sfm-layout h3.kanryou_bun {
		width: auto;
		font-size: 1.1em;
		font-weight: normal;
		text-align: center;
		padding: 10px 0;
		background: #f1f1f1;
}

/* 完了画面 『トップページへ戻ります。』　部分
　------------------------- */
div#sfm-layout p.modoru_moji {
		width: auto;
		font-size: 1.0em;
		font-weight: normal;
		text-align: center;
		padding: 10px 0;
}

div#sfm-layout p.modoru_moji a {
		color: #000000;
		text-decoration: none;
}

/* 現状フォーム　部分　にリンクは無いので　以下は不要と思われる
　------------------------- */
div#sfm-layout a:link,
div#sfm-layout a:visited {
		color: #00d;
		text-decoration: none;
}
div#sfm-layout a:hover {
		color: #f22;
		text-decoration: underline;
}



/*media Queries
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*　メディアクエリー
================================================================== 400px以上
*/

@media only screen and (min-width: 400px) {
	
	/*
	====================== Wrapper ==========================
	*/
	
	/*
	====================== header ===========================
	*/
	
	
	/*
	====================== content ==========================
	*/
	
	
	/*
	====================== footer ===========================
	*/

}


/*　メディアクエリー
================================================================== 500px以上
*/

@media only screen and (min-width: 500px) {
	
	/*
	====================== content ==========================
	*/
	
	


}



/*　メディアクエリー
================================================================== 768px以上
*/

@media only screen and (min-width: 768px) {
	
	/*
	====================== content ==========================
	*/
	/* フォーム内　　項目と入力部分
　------------------------- */
	/* 表内に余白を設定
　------------------------- */
	div#sfm-layout dt, div#sfm-layout dd {
		padding: 0px 0;
	}
	
	/* 表内の項目部分を左へ振り項目と入力部分を一行にする
　------------------------- */
	div#sfm-layout dt.gyou1 {
		clear: both;
		width: 170px;
		height: 32px;
		float: left;
		line-height: 2.1em;
		border-right: 1px solid #ffffff;
		padding: 6px 8px 0px;
		background-color: #e4e4e4;
	}
	
	div#sfm-layout dt.gyou2 {
		clear: both;
		width: 170px;
		height: 40px;
		float: left;
		border-right: 1px solid #ffffff;
		padding: 8px 8px 0px;
		background-color: #e4e4e4;
	}
	
	div#sfm-layout dt.gyou5 {
		clear: both;
		width: 170px;
		height:170px;
		float: left;
		border-right: 1px solid #ffffff;
		padding: 8px 8px 0px;
		background-color: #e4e4e4;
	}

	div#sfm-layout dd.gyou1-2-top {
		height: 32px;
		border-bottom: 1px solid #ffffff;
		padding: 6px 8px 0px 200px;
		background-color: #f1f1f1;
	}
	
	div#sfm-layout dd.gyou1-2 {
		height: 32px;
		border-top: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		padding: 6px 8px 0px 200px;
		background-color: #f1f1f1;
	}
	
	div#sfm-layout dd span.moji-last {
		font-size: 1.0em;
		line-height: 2.1em;
	}
	
	div#sfm-layout dd.gyou2-2 {
		height: 40px;
		border-top: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		padding: 8px 8px 0px 200px;
		background-color: #f1f1f1;
	}
	
	div#sfm-layout dd.gyou5-2 {
		height: 170px;
		border-top: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		padding: 8px 8px 0px 200px;
		background-color: #f1f1f1;
	}
	
	
	/* IE6対策
	------------------------- */
	.ie6 div#sfm-layout dd.gyou1-2-top {
		padding: 6px 8px 0px 20px;
	}
	
	.ie6 div#sfm-layout dd.gyou1-2 {
		padding: 6px 8px 0px 20px;
	}
	
	.ie6 div#sfm-layout dd.gyou2-2 {
		padding: 8px 8px 0px 20px;
	}
	
	.ie6 div#sfm-layout dd.gyou5-2 {
		padding: 8px 8px 0px 20px;
	}
	
	/* IE7対策
　------------------------- */
	.ie7 div#sfm-layout dd.gyou1-2-top {
		padding: 6px 8px 0px 20px;
	}
	
	.ie7 div#sfm-layout dd.gyou1-2 {
		padding: 6px 8px 0px 20px;
	}
	
	.ie7 div#sfm-layout dd.gyou2-2 {
		padding: 8px 8px 0px 20px;
	}
	
	.ie7 div#sfm-layout dd.gyou5-2 {
		padding: 8px 8px 0px 20px;
	}
	
	/* 表内の項目部分を左へ振り項目と入力部分を一行にする
　------------------------- */
	div#sfm-layout dt.jyusho_dt01 {
		clear: both;
		width: 170px;
		height: 34px;
		float: left;
		line-height: 2.1em;
		border-right: 1px solid #ffffff;
		padding: 6px 8px 0px;
		background-color: #e4e4e4;
	}
	
	div#sfm-layout dd.jyusho_dd01 {
		display: block;
		height: 32px;
		border-top: 1px solid #ffffff;
		border-bottom: 1px solid #f1f1f1;
		padding: 6px 8px 0px 200px;
		background-color: #f1f1f1;
	}
	
	div#sfm-layout dt.jyusho_dt02,
	div#sfm-layout dt.jyusho_dt03 {
		clear: both;
		width: 170px;
		height: 34px;
		float: left;
		line-height: 2.1em;
		border-right: 1px solid #ffffff;
		padding: 6px 8px 0px;
		background-color: #e4e4e4;
	}
	
	div#sfm-layout dd.jyusho_dd02 {
		height: 32px;
		border-top: 1px solid #f1f1f1;
		border-bottom: 1px solid #ffffff;
		padding: 6px 8px 0px 200px;
		background-color: #f1f1f1;
	}
	
	div#sfm-layout dd.jyusho_dd03 {
		height: 32px;
		border-top: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		padding: 6px 8px 0px 200px;
		background-color: #f1f1f1;
	}
	
	div#sfm-layout dt.jyusho_dt04 {
		clear: both;
		width: 170px;
		height: 32px;
		float: left;
		line-height: 2.1em;
		border-right: 1px solid #ffffff;
		padding: 6px 8px 0px;
		background-color: #e4e4e4;
	}
	
	div#sfm-layout dd.jyusho_dd04 {
		height: 32px;
		border-top: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		padding: 6px 8px 0px 200px;
		background-color: #f1f1f1;
	}
	
	
	/* IE6対策
	------------------------- */
	.ie6 div#sfm-layout dd.jyusho_dd01 {
		padding: 6px 8px 0px 20px;
	}
	
	.ie6 div#sfm-layout dd.jyusho_dd02 {
		padding: 6px 8px 0px 20px;
	}
	
	.ie6 div#sfm-layout dd.jyusho_dd03 {
		padding: 6px 8px 0px 20px;
	}
	
	.ie6 div#sfm-layout dd.jyusho_dd04 {
		padding: 6px 8px 0px 20px;
	}
	
	
	/* IE7対策
　------------------------- */
	.ie7 div#sfm-layout dd.jyusho_dd01 {
		padding: 6px 8px 0px 20px;
	}
	
	.ie7 div#sfm-layout dd.jyusho_dd02 {
		padding: 6px 8px 0px 20px;
	}
	
	.ie7 div#sfm-layout dd.jyusho_dd03 {
		padding: 6px 8px 0px 20px;
	}
	
	.ie7 div#sfm-layout dd.jyusho_dd04 {
		padding: 6px 8px 0px 20px;
	}
	
	
	
	
	/* フォーム整形 */
	.w300 { 
		width: 360px;
	}

	.w80 {
		width: 50px;
	}

	.w70 {
		width: 50px;
	}

	#message { width: 400; height: 150px; }

	}
	
	
	div#sfm-layout .submit {
		font-size: 1.0em;
		text-align: center;
		padding: 8px 8px 8px 8px;
}


/*　メディアクエリー
================================================================== 900px以上
*/

@media only screen and (min-width: 900px) {
	
	/*
	====================== content ==========================
	*/
	
	
	
	
}





/*　メディアクエリー
================================================================== 980px以上
*/

@media only screen and (min-width: 980px) {
	
	/*
	====================== content ==========================
	*/
	
	/* ▼メイン部　一段目　部分
　---------------------------------------------------- */
	#contentA {
		width: 860px;
		margin: 0 auto;
	}

	/* ▼メイン部　二段目　部分
　---------------------------------------------------- */
	#contentB {
		width: 860px;
		margin: 0 auto;
	}
	
	/* 完了画面 『トップページへ戻ります。』　部分
　------------------------- */
	div#sfm-layout p.modoru_moji a {
		color: #0A40ED;
	}
	
	div#sfm-layout p.modoru_moji a:hover {
		color: #ff0000;
		text-decoration: underline;
	}
		
}







/*　メディアクエリー　プリントアウト用
================================================================== 980px以上
*/
@media only print {


	div#sfm-layout dt, div#sfm-layout dd {
		font-size: 1.25em;
	}

	/* （半角英数字）（半角数字）部分
	------------------------- */
	div#sfm-layout span {
		font-size: 1.0em;
	}

	
	/* フォーム部分　最下段『赤い印の入った項目は必須入力となります。』部分
　	------------------------- */
	div#sfm-layout p {
		font-size: 1.1em;
}
	
	
	
	

}