@charset "utf-8";

/* ==================================================================
	simplyestimate.css
	
=================================================================== */

/* =================================
   ■ 共通指定
================================== */


/* --------------------------------
   □ form
-------------------------------- */
.contents article{
	margin:0 0 35px 0;
}


.contents .step{
	text-align:center;
	margin:22px 0 39px 0;
}

.contents .selecter h3{
	margin-bottom:21px;
}

.contents table.tableStyle td span.error,
.contents p.error{
	margin:4px 0;
	padding:2px 2px 2px 15px;
	color:#fff;
	background:#F00 url(../../images/common/icon/arrow/white.gif) 5px 50% no-repeat;
}

.contents .main h4.imagetitle{
	padding:0;
	background:none;
	border:0;
	text-align:center;
}

/* □ dl.section
-------------------------------- */
.contents dl.section{
	margin:17px 0;
	margin-left:68px;
}

.contents dl.section dt{
	margin-bottom:10px;
}

.contents dl.section dd{
}

/* ◇ itemlist
-------------------------------- */
.contents ul.itemList li{
	position:relative;
	z-index:1;
	border:2px solid #d6d6d6;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

.contents ul.itemList li.selected{
	border-color:#ff8400;
}

.contents form ul.itemList li label{
	display:block;
	width:100%;
	height:100%;
}

	.contents ul.itemList li dl.fukidashi{
		display:none;
		position:absolute;
		z-index:2;
		top:88px;
		left:56px;
		width:318px;
		text-align:left;
	}

	.contents ul.itemList li dl.fukidashi dt{
		padding:59px 0 0 0;
		text-align:left;
		background:url(../../images/estimate/simply/fukidashi-header.png) 0 0 no-repeat;
	}

	.contents ul.itemList li dl.fukidashi dt em{
		display:block;
		padding:0 4px;
		margin:0 22px 0 22px;
		border-bottom:2px solid #25917d;
	}

	.contents ul.itemList li dl.fukidashi dd{

		padding:17px 22px 25px 22px;
		background:url(../../images/estimate/simply/fukidashi-body.png) 0 100% no-repeat;
	}

/* □ step1
-------------------------------- */
#step1 ul.itemList{
	margin-left:65px;
}

#step1 ul.itemList li{
	display:inline;
	float:left;
	width:186px;
	margin-left:10px;
	padding:3px;
}

#step1 ul.itemList > li{
	width:176px;
}

	#step1 ul.itemList li dl.fukidashi{
		top:158px;
	}

/* □ step2-wa
-------------------------------- */
#step2-wa ul.itemList{
	margin-top:-17px;
	margin-left:65px;
}

#step2-wa ul.itemList li{
	display:inline;
	float:left;
	width:135px;
	margin-top:17px;
	margin-left:13px;
	padding:3px;
}
#step2-wa ul.itemList > li{
	width:125px;
}

#step2-wa ul.itemList li.other{
	width:282px;
}
	#step2-wa ul.itemList > li.other{
		width:272px;
	}
#step2-wa ul.itemList li.other dl{
	height:159px;
}
	
#step2-wa ul.itemList li.other dl dt{
	margin-bottom:15px;
}
#step2-wa ul.itemList li.other dl dd{
	overflow:hidden;
}
		
	#step2-wa ul.itemList li.other dl dd p.image{
		display:inline;
		float:left;
		margin:0 0 0 16px;
	}
	#step2-wa ul.itemList li.other dl dd .explain{
		display:inline;
		float:right;
		width:173px;
		margin-right:5px;
		
	}
	#step2-wa ul.itemList li.other dl dd .explain input{
		vertical-align:middle;
	}
	
	#step2-wa ul.itemList li.other dl dd .explain input.text{
		width:104px;
	}

/* □ step2-tower
-------------------------------- */
#step2-tower ul.itemList{
	margin-top:-17px;
	margin-left:65px;
	margin-right:-8px;
}

#step2-tower ul.itemList li{
	display:inline;
	float:left;
	width:136px;
	margin-top:17px;
	margin-left:13px;
	padding:3px;
}
#step2-tower ul.itemList > li{
	width:126px;
}

#step2-tower ul.itemList li.long{
	width:176px;
	margin-right:12px
}
#step2-tower ul.itemList > li.long{
	width:166px;
}

/* □ step2-design
-------------------------------- */
#step2-design ul.itemList{
	margin-top:-17px;
	margin-left:65px;
}

#step2-design ul.itemList li{
	display:inline;
	float:left;
	width:135px;
	margin-top:17px;
	margin-left:13px;
	padding:3px;
}
#step2-design ul.itemList > li{
	width:126px;
}

/* □ step3-wa step3-design
-------------------------------- */
#step3-wa ul.itemList,
#step3-design ul.itemList{
	margin-top:-17px;
	margin-left:48px;
}

#step3-wa ul.itemList li,
#step3-design ul.itemList li{
	display:inline;
	float:left;
	width:176px;
	margin-top:17px;
	margin-left:27px;
	padding:3px;
}
#step3-wa ul.itemList > li,
#step3-design ul.itemList > li{
	width:166px;
}

/* □ step4
-------------------------------- */
#step4-box ul.itemList{
	margin-top:-17px;
	margin-left:48px;
}

#step4-box ul.itemList li{
	display:inline;
	float:left;
	width:176px;
	margin-top:17px;
	margin-left:27px;
	padding:3px;
}
#step4-box ul.itemList > li{
	width:166px;
}

#step4-box ul.itemList li input.checkbox{
	position:absolute;
	top:5px;
	left:5px;
}

	#step4-box ul.itemList li dl.fukidashi{
		top:118px;
	}


/* ■ clearfix
-------------------------------- */
.contents ul.itemList:after{
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
	line-height:0;
	font-size:0;
}

/* WIN用IE \*/
.contents ul.itemList { 
	zoom:1;
}


/* --------------------------------
   □ user
-------------------------------- */
.contents table.tableStyle{
	width:100%;
	border:1px solid #757575;
}

.contents table.tableStyle th,
.contents table.tableStyle td{
	border:1px solid #dddddd;
	padding:17px 9px;
	background:#fcfcfc url(../../images/estimate/simply/user-background.gif) 0 0 repeat;
}
	
.contents table.tableStyle th{
	width:13em;
	vertical-align:top;
}

.contents .indispensable span,	
.contents table.tableStyle th span{
	zoom:1;
	display:inline-block;
	background:#b70000;
	color:#fff;
	margin-left:5px;
	padding:1px 7px;
	font-size:84%;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.contents table.tableStyle td span.sample{
	display:block;
	font-size:84%;
	color:#666;
}

.contents table.tableStyle td span.note{
	display:block;
	font-size:90%;
}
	
.contents table.tableStyle td input.short{
	width:30%;
}	
	
.contents table.tableStyle td input.middle,
.contents table.tableStyle td textarea{
	width:95%;
}

.contents table.tableStyle table.inTable th,
.contents table.tableStyle table.inTable td{
	border:0;
	padding:7px 4px;
}
	
.contents table.tableStyle table.inTable th{
	width:9em;
	vertical-align:middle;
}

.contents .indispensable{
	text-align:right;
}

.contents .submitMessage{
	margin-top:20px;
	text-align:center;
}

/* --------------------------------
   □ check
-------------------------------- */

.contents .check-box{
	margin-bottom:20px;
}

.contents .check-box h3{
	margin-bottom:8px;
}
.contents .returnArea{
	margin-top:-15px;
	margin-bottom:15px;
	text-align:right;
}

@media only screen and
(max-width : 640px) {
	
		
	/* --------------------------------
	   □ form
	-------------------------------- */
	.contents article{
		margin:0 0 35px 0;
	}
	
	/* □ dl.section
	-------------------------------- */
	.contents dl.section{
		margin:17px 0;
	}
	
	/* ◇ itemlist
	-------------------------------- */
	.contents ul.itemList li{
		box-sizing:border-box;
	}
	
		.contents ul.itemList li dl.fukidashi{
			display:none;
			position:absolute;
			z-index:2;
			top:88px;
			left:56px;
			width:318px;
			text-align:left;
		}
	
		.contents ul.itemList li dl.fukidashi dt,
		.contents ul.itemList li dl.fukidashi dd{
			display:none;
		}
	
	/* □ step1
	-------------------------------- */
	#step1 ul.itemList{
		margin-left:-1%;
	}
	
	#step1 ul.itemList li,
	#step1 ul.itemList > li{
		width:32%;
		margin-left:1%;
		padding:3px;
	}
	
	/* □ step2-wa
	-------------------------------- */
	#step2-wa ul.itemList{
		margin-left:0;
	}
	
	#step2-wa ul.itemList li,
	#step2-wa ul.itemList > li{
		width:32%;
		margin-left:1%;
		padding:3px;
	}

	#step2-wa ul.itemList > li img{
		width:100%;
	}
	
	#step2-wa ul.itemList li.other,
	#step2-wa ul.itemList > li.other{
		width:65%;
	}
	#step2-wa ul.itemList li.other dl{
		height:60%;
	}
		
	#step2-wa ul.itemList li.other dl dt{
		margin-bottom:15px;
	}
			
		#step2-wa ul.itemList li.other dl dd p.image{
			width:27.5%;
		}
		
		#step2-wa ul.itemList li.other dl dd p.image img{
			width:100%;
		}
		
		#step2-wa ul.itemList li.other dl dd .explain{
			width:65%;
			margin-right:0;
			
		}
		#step2-wa ul.itemList li.other dl dd .explain input{
			width:25%;
		}
		
		#step2-wa ul.itemList li.other dl dd .explain input.text{
			width:65%;
		}
	
	/* □ step2-tower
	-------------------------------- */
	#step2-tower ul.itemList{
		margin-left:0;
		margin-right:0;
	}
	
	#step2-tower ul.itemList li,
	#step2-tower ul.itemList > li{
		width:32%;
		margin-left:1%;
		padding:3px;
	}
	#step2-tower ul.itemList > li img{
		width:100%;
	}
	
	#step2-tower ul.itemList > li.long{
		width:41.9%;
		margin-right:0;
	}
	
	#step2-tower ul.itemList > li.item4{
		margin-left:14%;
	}
	#step2-tower ul.itemList > li.item6{
		margin-left:8%;
	}
	
	/* □ step2-design
	-------------------------------- */
	#step2-design ul.itemList{
		margin-left:0;
		margin-right:0;
	}
	
	#step2-design ul.itemList > li{
		width:32%;
		margin-left:1%;
		padding:3px;
	}

	#step2-design ul.itemList > li img{
		width:100%;
	}
	
	/* □ step3-wa step3-design
	-------------------------------- */
	#step3-wa ul.itemList,
	#step3-design ul.itemList{
		margin-left:-2%;
		margin-right:0;
	}
	
	#step3-wa ul.itemList li,
	#step3-design ul.itemList li{

	}
	#step3-wa ul.itemList > li,
	#step3-design ul.itemList > li{
		width:48%;
		margin-left:2%;
		padding:3px;
	}

	#step3-wa ul.itemList > li img,
	#step3-design ul.itemList > li img{
		width:100%;
	}
	
	/* □ step4
	-------------------------------- */
	#step4-box ul.itemList{
		margin-left:0;
		margin-right:0;
	}
	
	#step4-box ul.itemList > li{
		width:32%;
		margin-left:1%;
	}

	#step4-box ul.itemList > li img{
		width:100%;
	}



	/* --------------------------------
	   □ user
	-------------------------------- */
	ontents table.tableStyle tr{
		display:block;
	}
	
	.contents table.tableStyle th,
	.contents table.tableStyle td{
		display:block;
		border:1px solid #dddddd;
		padding:9px 9px;
		overflow:hidden;
	}
	
	.contents table.tableStyle th{
		width:auto;
		vertical-align:top;
		background:#dddddd;
	}
	
		
	.contents table.tableStyle td input.short{
		width:95%;
	}

	.contents table.tableStyle td input.spshort{
		width:45%;
	}
		
	.contents table.tableStyle td input.middle,
	.contents table.tableStyle td textarea{
		width:95%;
	}

	
	.contents table.tableStyle table.inTable th,
	.contents table.tableStyle table.inTable td{
		border:0;
		padding:2px 2px;
	}
		
	.contents table.tableStyle table.inTable th{
		background:#fcfcfc url(../../images/estimate/simply/user-background.gif) 0 0 repeat;
	}
		
	.contents .indispensable{
		text-align:right;
	}

	
	/* 個別 */
	.contents table.tableStyle td input#frontage,
	.contents table.tableStyle td input#depth,
	.contents table.tableStyle td input#graveyardAddress,
	.contents table.tableStyle td input#graveyardName,
	.contents table.tableStyle td input#budgetMin,
	.contents table.tableStyle td input#budgetMax
	{
		margin:4px 8px;	
	}


	.contents table.tableStyle td #graveyardPref{
		margin-left:8px;
		margin-bottom:8px;
	}
	
	.contents table.tableStyle td input#graveyardAddress{
		margin-left:3.5em;
	}

	.contents table.tableStyle td input#graveyardName,
	.contents table.tableStyle td input#graveyardAddress{
		width:65%;	
	}

	.contents table.tableStyle td label
	{
		display:inline-block;
		white-space:nowrap;
		margin-right:2em;
		margin-bottom:8px;
	}

}