@charset "utf-8";

@import url("../../../../../css/common.css");
@import url("../common.css");
@import url("common.css");

/*===========================================

    product
	
	two_by_four
	
	medio_l.css
		
===========================================*/

/*	mainimage
===========================================*/
div#mainimage {	/* イメージの崩れを防ぐ */
}
	
#container{
padding-bottom:0 !important;
}


/*	mainimage
===========================================*/
div#mainimage {
	margin: 0 auto 20px;
	width: 980px;
	text-align: left;
	border:1px solid #e1e1e1;
	border-radius: 5px;
	overflow: hidden;
	position: relative;
}
	div#mainimage figure { float: right; margin: 0;}
	div#mainimage .txtArea {
		position: absolute;
		top: 50%;
		left: 30px;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	div#mainimage .txtArea *{
		font-family: 'Open Sans', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
		div#mainimage .txtArea h2 {
			margin-bottom: 20px;
			text-align: center;
			color: #005136;
			line-height: 100%;
			font-size: 50px;
			height: auto;
		}
			div#mainimage .txtArea h2 span { display: block; line-height: 100%; font-size: 14px; margin-top: 10px;}
		div#mainimage .txtArea p { color: #000; font-size: 28px; line-height: 130%;}	

/*	imgswitch
===========================================*/
div#imgswitch {
	width: 980px;
	margin: 3px auto 14px auto;
	text-align: left;
	}

div#imgswitch h3 {
	margin: 0 0 0 22px;
	padding: 18px 0 0 0!important;
	color: #000;
	font-size: 15px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width: auto!important;
}

div#imgswitch table {
	margin: 10px 0 0 18px;
	width: auto;
	}

div#imgswitch table tr td {
	padding: 4px;
	}
	

div#imgswitch p.text {
	font-size: 68%;
	margin: 10px 0 0 22px;
	padding-bottom: 8px;
	}
	

/*	box1
===========================================*/
#box1 {
	padding: 21px 0 0 0;
	margin: 0 0 20px 0;
}
#box1 h3,
#box2 h3,
#box3 h3{
	text-align: left;
	color: #3399cc;
	font-size: 20px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width: auto!important;
}

#box1 .pagebtm,
#box3 .pagebtm {
	background: url(../../../images/product/two_by_four/reurb/bg_foot.gif) no-repeat 0 100%;
	padding: 0 0 21px 20px;
}

#box1 .txt01 {
	padding: 0 0 15px 0;
	font-size: 0.8em;
}

#box1 .pht {
	float: left;
	padding: 0 40px 0 0;
}

#box1 dl {
	float: left;
	display: inline;
}

#box1 dl dt {
	padding: 0 0 10px 0;
	color: #3399cc;
	font-size: 14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#box1 dl dd {
	padding: 0 0 10px 0;
}

#box1 dl.sec01 {
	width: 290px;
	margin: 0 50px 0 0;
}

#box1 dl.sec02 {
	width: 340px;
}

#box1 dl.sec03 {
	width: 162px;
	margin: 0 20px 0 0;
}

#box1 dl.sec04 {
	width: 158px;
}

#box1 dl dd dl dd {
	font-size: 0.8em;
}

#box1 h3 {
	padding:0!important;
}

/*	box2
===========================================*/
#box2 {
	background: url(../../../images/product/two_by_four/reurb/box2_bg.jpg) no-repeat 0 0;
	width: 980px;
	height: 210px;
	margin: 0 0 20px 0;
}

#box2 p {
	float: left;
	display: inline;
}

#box2 h3 { padding: 20px 0 0 380px!important;}

#box2 p.txt {
	padding: 10px 0 0 380px;
	width: 355px;
}

#box2 p.pht {
	margin: -35px 0 0 20px;
}

/*	box3
===========================================*/
#box3 {
	padding: 20px 0 0 0;
}
#box3 h3{ margin-bottom: 10px; padding: 0!important;}
#box3 h4{
    text-align: left;
    color: #3399cc;
    line-height: 130%;
    font-size: 18px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-bottom: 10px;
}
	#box3 h4 small{ font-size: 10px;}

#box3 .sec01Wrap {
	background: url(../../../images/product/two_by_four/reurb/box3_bg01.gif) no-repeat 0 0;
	width: 578px;
	float: left;
	display: inline;
	margin: 0 19px 20px 0;
}

#box3 .sec01 {
	background: url(../../../images/product/two_by_four/reurb/box3_bg02.gif) no-repeat 0 100%;
	padding: 20px 0 21px 20px;
}

#box3 .sec01 p {
	padding: 0 0 17px 0;
}

#box3 .sec01 dl {
	float: left;
	display: inline;
}

#box3 .sec01 .detail01 {
	width: 298px;
	margin: 0 15px 0 0;
	font-size: 0.8em;
}

#box3 .sec01 .detail01 dt {
	margin: 0 0 19px 0;
}

#box3 .sec01 .detail02 {
	width: 230px;
}

#box3 dt {
    color: #000;
    line-height: 130%;
    font-size: 16px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-bottom: 10px;
}

#box3 .sec01 .detail02 dd.txt {
	margin: 0 0 15px 0;
}

#box3 .sec02Wrap {
	background: url(../../../images/product/two_by_four/reurb/box3_bg03.gif) no-repeat 0 0;
	width: 342px;
	float: left;
	display: inline;
	margin: 0 0 20px;
}

#box3 .sec02 {
	background: url(../../../images/product/two_by_four/reurb/box3_bg04.gif) no-repeat 0 100%;
	padding: 20px 21px 21px 14px;
}

#box3 .sec02 dl {
	padding: 10px 0 0 0;
}

#box3 .sec02 dl dt {
	margin: 0 0 10px 0;
}

#box3 .sec02 dl dd.txt {
	margin: 0 0 5px 0;
}

#box3 .sec03 {
	width: 387px;
	border-right: 1px solid #d2d2d2;
	float: left;
	display: inline;
	margin: 0 19px 0 0;
}

#box3 .sec03 dl {
	width: 365px;
}

#box3 .sec03 dl dt {
	margin: 0 0 9px;
}

#box3 .sec03 dl dd {
	margin: 0 0 5px;
}

#box3 .sec03 dl dd.txt {
	margin: 0 0 15px;
}

#box3 .sec03 dl dd.end {
	margin: 0;
}

#box3 .sec04 {
	float: left;
	display: inline;
	width: 536px;
}

#box3 .sec04 dl {
	float: left;
	display: inline;
	width: 210px;
	margin: 0 15px 0 0;
}

#box3 .sec04 p.pht01 {
	padding: 0 0 20px 0;
}

#box3 .sec04 p.pht02 {
	float: right;
	padding: 0 0 0 30px;
}

#box3 p.endTxt {
	text-align: center;
	padding: 14px 0 0 0;
}

#btn{
width:785px;
margin: 50px auto;
}

#btn img{
margin:0px auto;
}

#box3 .sec04 h3:last-of-type {
	text-align: right;
}


/*-------------------------*/
/* デバイスサイズ 889px*/
/*-------------------------*/
@media screen and (max-device-width: 889px) {
    
    div#mainimage,
    div#imgswitch{ width: auto; margin-left: 10px; margin-right: 10px; padding: 20px;}
    div#mainimage figure{ float: none; text-align: center; margin-bottom: 20px;}
    div#mainimage .txtArea{ position: static; padding: 0; transform: translateY(0%);}
    div#mainimage .txtArea h2 { font-size: 35px;}
    div#mainimage .txtArea p{ font-size: 20px; text-align: center;}
    div#imgswitch h3{ padding: 0!important; margin: 0; font-size: 16px;}
    div#imgswitch table{ margin: 10px 0 0;}
    div#imgswitch table,
    div#imgswitch tbody,
    div#imgswitch table tr,
    div#imgswitch table th,
    div#imgswitch table td{ display: block; text-align: center;}
    
    div#contents{ padding: 0;}
    #box1,
    #box2,
    #box3{ padding: 20px;}
    #box1 h3,
    #box2 h3,
    #box3 h3{ font-size: 18px; margin-bottom: 10px;}
    #box1 dl dd dl dd{ padding: 0;}
    #box1 .pagebtm,
    #box3 .pagebtm { background: none; padding: 0;}
    #box1 .pht,
    #box1 dl.sec01,
    #box1 dl.sec02{ width: auto; float: none; display: block; margin: 0 0 20px; padding: 0;}
    #box1 dl.sec02{ margin-bottom: 0;}
    #box1 dl.sec02 dd{ display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
    #box1 dl.sec03,
    #box1 dl.sec04{ width: calc(100% / 2 - 15px); float: none; display: block;}
    #box1 dl.sec03 dt,
    #box1 dl.sec04 dt{ text-align: center;}
    #box2{ width: auto; height: auto; background: none; border: 1px solid #dfdfdf; border-radius: 5px;}
    #box2 h3{ padding: 0!important;}
    #box2 p{ float: none; display: block; width: auto!important; padding: 0!important;}
    #box2 p.pht{ margin: 20px 0 0;}
    #box3 .sec01Wrap,
    #box3 .sec02Wrap{ width: auto; float: none; display: block; margin: 0 0 15px; background: none;}
    #box3 .sec01,
    #box3 .sec02{ padding: 20px; background: none; border: 1px solid #dfdfdf; border-radius: 5px;}
    #box3 .sec01 dl{ float: none; display: block;}
    #box3 .sec01 .detail01{ width: 150px; float: left; margin-right: 20px;}
    #box3 .sec01 .detail02{ width: auto; overflow: hidden;}
    #box3 .sec03,
    #box3 .sec04{ width: auto; float: none; display: block; margin: 0; border: none;}
    #box3 .sec03 dl{ width: auto;}
    #box3 .sec03 dl > dt > img{ width: 100%;}
    #box3 .sec04{ margin-top: 20px;}
    #box3 .sec04 dl{ width: auto; float: none; display: block; margin: 0;}
    #box3 .sec04 p.pht01{ padding: 0; text-align: center;}
    #box3 .sec04 p.pht02{ float: none; padding: 0; margin-bottom: 10px;}

		#box3 .sec04 h3:last-of-type {
			text-align: left;
		}

		#box2 h3 {

		}
}

@media screen and (max-device-width: 889px) {
	div#mainimage .txtArea h1 {
		margin-bottom: 20px;
		text-align: center;
		color: #005136;
		line-height: 100%;
		font-size: 50px;
		height: auto;
	}
	div#mainimage .txtArea h1 span { display: block; line-height: 100%; font-size: 14px; margin-top: 10px;}
	div#mainimage .txtArea h1 { font-size: 35px;}
	
	div#imgswitch h2 {
		margin: 0 0 0 22px;
		padding: 18px 0 0 0 !important;
		color: #000;
		font-size: 15px;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		width: auto !important;
		height: auto;
	}

	#box1 h2,
	#box2 h2,
	#box3 h2 {
		text-align: left;
		color: #3399cc;
		font-size: 20px;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		width: auto !important;
		height: auto;
	}

	#box1 h2 {
		padding: 0 !important;
	}

	#box2 h2 {
		padding: 20px 0 0 380px !important;
	}

	#box3 h2 {
		margin-bottom: 10px;
		padding: 0 !important;
	}

	#box3 .sec04 h2:last-of-type {
		text-align: right;
	}

	div#imgswitch h2 {
		padding: 0 !important;
		margin: 0;
		font-size: 16px;
	}

	#box1 h2,
	#box2 h2,
	#box3 h2 {
		font-size: 18px;
		margin-bottom: 10px;
	}

	#box2 h2 {
		padding: 0 !important;
	}

	#box3 .sec04 h2:last-of-type {
		text-align: left;
	}

	#box3 h3 {
		text-align: left;
		color: #3399cc;
		line-height: 130%;
		font-size: 18px;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		margin-bottom: 10px;
	}

	#box3 h3 small {
		font-size: 10px;
	}
}