@charset "UTF-8";

#mainimg_area, #desc {
	height:100px;
}
@media only screen and (max-width: 767px) {
#mainimg_area, #desc {
	height:50px;
}
}
.dl01 {
	margin:30px 0 0 0;
	width:100%;
}
.dl01 dd { float:left}

.dl01 .td01 {
	width:388px;
	border:#999 1px solid;
	background-color:#fbf5e5;
	background-color:#f9f9f9;
	padding:15px 30px 30px 10px;
}
@media only screen and (max-width: 767px) {
	.dl01 dd { float:none}
	.dl01 .td01 {
		width:auto;
		padding:15px 20px 20px 10px;
	}
}
.dl01 .td01 p {
	margin:20px 0 0 20px;
}
.dl01 .bg01 {
	background-repeat:no-repeat;
	background-position:right top;
}
.dl01 img.right {
	margin: 0 0 0 15px;
	background:#fff;
	padding:1px;
	border:#ccc 1px solid;
}
.dl01 .h301 {
	color:#3c3c3c;
	font-size:24px;
	line-height:60px;
	font-weight:bold;
}
.dl01 .td02 {
	width:698px;
	border:#999 1px solid;
	background-color:#f9f9f9;
	padding:30px 100px 30px 100px;
	border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
	position:relative;
	behavior: url(PIE/PIE.htc);

}
@media only screen and (max-width: 767px) {
	.dl01 .td01 p {
		margin:10px 0 0 10px;
	}
	.dl01 .h301 {
		color:#3c3c3c;
		font-size:18px;
		line-height:30px;
		font-weight:bold;
	}
	.dl01 .h301 img {
		height: 30px;
		width: auto;
	}
	.dl01 .td02 {
		width:auto;
		padding:20px 20px 20px 10px;
		border-radius: 50px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;

	}
}

.dl01 .td02 p {
	margin:15px 0 0 20px;
}
.dl01 .arrow_right {
	width:27px;
	padding: 0 3px 0 10px;
}

.dl01 .arrow_left {
	width:27px;
	padding: 0 10px 0 3px;
}
.dl01 .arrow_bottom {
	width:900px;
	text-align:center;
	padding: 10px 0 5px 0;
}
.dl01 .arrow_bottom_02 {
	width:430px;
	text-align:center;
	padding: 12px 0 0 0!important;
	vertical-align:middle;
	height:45px;
}
.dl01 img.img03 {
	margin-top:-70px;
}
@media only screen and (max-width: 767px) {
	.dl01 .arrow_right, .dl01 .arrow_bottom, .dl01 .arrow_bottom_02, .dl01 .arrow_left  {
		width:100%;
		padding: 0!important;
		position: relative;
		height: 30px;
	}
	 .dl01 .arrow_left  {
		height: auto;
		text-align: center;
	}
	.dl01 .arrow_right img, .dl01 .arrow_bottom img, .dl01 .arrow_left img { display: none;}
	.dl01 .arrow_right:after, .dl01 .arrow_bottom:after, .dl01 .arrow_left:before {
		content: "";
		display: block;
		width:20px;
		height: 20px;
		border: transparent 10px solid;
		border-top: #3c3c3c 10px solid;
		box-sizing: border-box;
		position: absolute;
		left:50%;
		top:10px;
		margin-left:-10px;
	}
	.dl01 .arrow_left:before {
		border-top: #07aa39 10px solid;
		position: relative;
		height: auto;
		top:0px;
		margin-top:10px;
	}
	.dl01 .arrow_left:after {
		background: #07aa39;
		display: inline-block;
		content:"建物の種類によって過程が異なります";
		color: #fff;
		font-weight: bold;
		padding:5px 10px;
		border-radius: 5px 5px 0 0;
		-webkit-border-radius: 5px 5px 0 0;
		-moz-border-radius: 5px 5px 0 0;
		margin:-12px 0 1px;
		line-height: 150%;
	}
}


#td4-2_arrow {
	width:430px;
	background-image:url(../img/customer/arrow_down_4-2.png);
	background-repeat:no-repeat;
	background-position:center 10px;
	padding:0;
	height:57px;
	float:right;
}
#td4-2 {
	width:388px;
	background-image:url(../img/customer/arrow_down_4-2.png);
	background-repeat:no-repeat;
	background-position:center -47px;
	padding:0 30px 30px 10px;
	border:#33814b 1px solid;
	background-color:#e7f7ec;
}
.dl01 #td4-2 .h301 {
	color:#07aa39;
	font-size:24px;
	height:60px;
	line-height:60px;
	font-weight:bold;
	padding:20px 0px 0px 0px;
}
.dl01 .h301 img {
	display:inline-block;
	line-height:60px;
	vertical-align:middle;
}
.dl01 #td4-2 p {
	margin:8px 0 0 10px;
}

@media only screen and (max-width: 767px) {
	#td4-2_arrow , #td4-2 {
		background: none;
		width:auto;
	}
	#td4-2 {
		padding:0 30px 20px 10px;
	}
	.dl01 #td4-2 .h301 {
		font-size:18px;
		height:30px;
		line-height:30px;
		padding:15px 0px 0px 0px;
	}
	.dl01 .h301 img {
		display:inline-block;
		line-height:30px;
		vertical-align:middle;
	}
	.dl01 #td4-2 p {
		margin:8px 0 0 10px;
	}
}


.dl01 .td00 {
	width:900px;
	padding:0 50px;
}
.dl01 .td00 .td01 {
	width:760px;
}
dt.hide { display: none;}
h4.h401 {
	margin-top:8px;
	background:#33814b;
	color:#fff;
	font-size:12px;
	padding:12px;
	font-weight:bold;
	padding:2px 10px;
}
@media only screen and (max-width: 767px) {
	.dl01 .td00 {
		width:auto;
		padding:inherit;
	}
	.dl01 .td00 .td01 {
		width:auto;
	}
	.dl01 img.img03 {
		margin-top:0px;
		width:110px;
		height: auto;
	}
	.dl01 .td01 img.right ,.dl01 #td4-2 img.right {
		width:110px;
		height: auto;
		margin-left:7px;
	}
}