@charset "utf-8";

/* ===================================================================
css information

File Name  : layout.css
Author     : 
Style Info : 
=================================================================== */

#mainCont01 { padding: 0 3px 0 3px; }
.p_infoWrap_01 { padding: 25px 10px 0 10px; }
.p_infoWrap_01 > article header { padding: 40px 110px; text-align: center; }
.p_infoWrap_01 > article header h2{ padding: 0 50px 40px;}
.p_infoWrap_01 > article header * img { width: 100%; }

main header { background:#000; }
main figure { padding: 20px 0 30px; }
main figure img { width: 100%; }

.contBox01 { border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 20px 0; }
.contBox01 figure { overflow: hidden; }
.contBox01 figure > .txtWrap { float: left; width: 40%; padding-right: 15px; }
.contBox01 figure > .txtWrap * { line-height: 170%; }
.contBox01 figure > .txtWrap p { padding-bottom: 10px; }
.contBox01 figure > .txtWrap small { display: inline-block; font-size: 85.7%; }
.contBox01 figure > .imgWrap { float: right; width: 60%; }
.contBox01 figure > * > img { width: 100%; }

#productBtnWrap { margin-top: 40px; }
	
	@media screen and (max-width:800px) {
		.p_infoWrap_01 { padding: 10px 10px 0 10px; }
		.p_infoWrap_01 > article header { padding: 25px 20px 20px; }
		.p_infoWrap_01 > article header h2 { padding: 0 0 15px; margin:0; }
		.p_infoWrap_01 > article header h2 img { max-width: 250px; }
		.p_infoWrap_01 > article header p span { font-size: 100%; line-height: 180%; color: #fff;  }

		main figure { padding: 10px 0 20px; }

		.contBox01 { padding: 15px 0; }
		.contBox01 figure > .txtWrap { float: none; width: 100%; padding-right: 0; }
		.contBox01 figure > .txtWrap p { padding-bottom: 5px; }
		.contBox01 figure > .imgWrap { float: none; width: 100%; padding: 10px 11px 4px 0; }

		#productBtnWrap { margin-top: 20px; }
	}