@charset "utf-8";

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

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

/* --------------------------------
   □ form
-------------------------------- */
.contents .appeal{
	margin:0 0 40px 0;
	text-align:center;
}

.contents .tel{
	margin:0 0 10px 0;
	text-align:center;
}

.contents h2{
	margin-right:-5px;
	margin-bottom:15px;
}

.contents article{
	margin:0 ;
}

.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;
}

/* □ dl.section
-------------------------------- */
.contents dl.section{
	margin-bottom:17px;
}

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

.contents dl.mail dd{
	padding:17px 13px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	background:#f3efde url(../../images/estimate/simply/background.gif) 0 0 repeat;
}

.contents dl.mail dd em{
	color:#d50000;
}

.contents div.mail{
	padding:5px;
}


/* □ selectedEstimate
-------------------------------- */
.contents .selectedEstimate{
	margin-bottom:20px;
	text-align:right;
}

.contents ul.selecter{
	margin:3px 0 20px 0;
	text-align:center;
}

.contents ul.selecter li{
	display:inline;
}

.contents ul.selecter li.particular{
	margin-left:32px;
}
/* □ form
-------------------------------- */
.contents form{
	border-top:1px solid #dddddd;
	padding-top:22px;
}

.contents form h3{
	margin:0;
}

.contents form .shortcut{
	position:relative;
	margin:0 0 37px 0;
}

.contents form .shortcut a{
	position:absolute;
	top:-29px;
	right:0;
	margin:0;
}

.contents form .step{
	margin:0 0 37px 50px;
}

.contents .stepmessage{
	margin:0 0 37px 0;

}

/* □ section
-------------------------------- */
.contents form .division{
	padding-bottom:26px;
	margin-bottom:26px;
	border-bottom:1px solid #dddddd;
}

.contents form .division h4{
	margin-bottom:23px;
}

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

.contents form .division p.error{
	margin:8px 0;
}

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

	.contents form .division ul.itemList li.selected{
		border-color:#ff8400;
		background:#fff5e6;
	}
	
	.contents form .division ul.itemList li label{
		display:block;
		width:100%;
		height:100%;
	}

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

	.contents form .division 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 form .division ul.itemList li dl.fukidashi dt em{
		display:block;
		padding:0 4px;
		margin:0 22px 0 22px;
		border-bottom:2px solid #25917d;
	}

	.contents form .division ul.itemList li dl.fukidashi dd{

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


/* □ #item-box
-------------------------------- */
#item-box h3{
	margin-bottom:20px;
}


#item-box div.article{
	border:2px solid #d6d6d6;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
	margin:3px 26px;
	padding:10px;
}

#item-box div.article p{
	margin:3px 0;
	color:#CCC;
}

#item-box div.article p strong{
	display:inline-block;
	padding-left:2px;
	color:#333;
	font-size:120%;
}


/* □ #graveyard-box
-------------------------------- */
#graveyard-box ul li{
	border:2px solid #d6d6d6;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
	margin:3px 26px;
	padding:10px;
}

#graveyard-box ul li p{
	margin:3px 30px;
}
#graveyard-box ul li p span{
	font-size:90%;
}

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

#type-box ul.itemList li{
	display:inline;
	float:left;
	width:179px;
	margin-top:17px;
	margin-left:4px;
	padding:7px 0;
	text-align:center;
}

#type-box ul.itemList > li{
	width:175px;
}

#type-box ul.itemList li img{
	display:block;
	margin:0 auto;
}

#typeSendBox{
	margin-top:15px;
	overflow:hidden;
	padding:10px;
	border:0;
	background:#f3efde url(../../images/estimate/simply/background.gif) 0 0 repeat;
}

#typeSendBox  ul.radio li{
	display:block;
	float:none;
	width:auto;
	margin:9px 0;
	padding:0;
	border:0;
	text-align:left;
}

#typeSendBox  ul.radio li p{
	margin:0 0 10px 20px;
}

#typeSendBox  ul.radio li label{
	display:inline;
	width:auto;
	height:auto;
}
#typeSendBox  ul.radio li img{
	display:inline;
	margin:0;
}

#typeSendBox  ul.radio li input.file{
	margin-top:5px;
	width:90%;
	background:#fff;
}


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

#kind-box ul.itemList li{
	display:inline;
	float:left;
	width:109px;
	margin-top:17px;
	margin-left:7px;
	padding:4px;
	text-align:center;
}

#kind-box ul.itemList > li{
	width:97px;
}

	.contents form #kind-box ul.itemList li dl.fukidashi{
		top:68px;
		left:36px;
	}


/* □ #budget-box
-------------------------------- */
#budget-box ul{
	margin:0px 26px;
}

/* □ #decided-box
-------------------------------- */
#decided-box textarea{
	width:98%;
}


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

/* WIN用IE \*/
.contents form .division 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 input.short{
	width:35%;
}	
	
.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;
}


/* --------------------------------
   □ 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;
}


/* --------------------------------
   □ complete
-------------------------------- */


#typeSend{
	margin-top:30px;
	border:1px solid #ccc;
	padding:10px;
}

#typeSend h3{
	margin-bottom:10px;
	padding:5px;
	border-bottom:1px dotted #333;
}

#typeSend p{
	padding:0 10px;
}	

#typeSend p.value{
	font-size:120%;
	font-weight:700;
	color:#2E6F5C;
}	


@media only screen and
(max-width : 640px) {
	.contents{
		overflow:hidden;
	}
	
	/* □ selectedEstimate
	-------------------------------- */
	.contents .selectedEstimate{
		margin-bottom:20px;
		text-align:right;
	}
	
	.contents ul.selecter{
		margin:3px 0 20px 0;
		text-align:center;
	}
	
	.contents ul.selecter li{
		display:block;
		margin:8px 0;
	}
	.contents ul.selecter li img{
	}
	
	.contents ul.selecter li.particular{
		margin-left:2%;
	}


	/* ◇ itemlist
	-------------------------------- */

	.contents form .division ul.itemList li dl.fukidashi{
		position:static;
		width:auto;
		text-align:left;
	}

	.contents form .division ul.itemList li dl.fukidashi dt{
		padding:0;
		background:none;
	}

	.contents form .division ul.itemList li dl.fukidashi dt em{
		margin:0 22px 0 22px;
	}

	.contents form .division ul.itemList li dl.fukidashi dd{
		padding:17px 22px 25px 22px;
		background:none;
	}


	/* □ #graveyard-box
	-------------------------------- */
	#graveyard-box ul li{
		margin:3px 0;
		padding:10px;
	}
	
	#graveyard-box ul li p{
		margin:3px 10px;
		line-height:2;
	}
	#graveyard-box ul li p input{
		margin:6px 4px;
	}

	/* □ #type-box
	-------------------------------- */
	#type-box ul.itemList{
		margin-top:30px;
		margin-left:0;
	}
	
	#type-box ul.itemList li{
		display:block;
		float:none;
		width:auto;
		margin-top:17px;
		margin-left:0;
		padding:7px 0;
		text-align:center;
	}
	
	#type-box ul.itemList > li{
		width:auto;
	}
	
	#type-box ul.itemList li img{
		display:block;
		margin:0 auto;
	}

	
	#typeSendBox  ul.radio li{
		margin:15px 0;
	}

	
	/* □ #kind-box
	-------------------------------- */
	#kind-box ul.itemList{
		margin-top:30px;
		margin-left:0;
	}
	
	#kind-box ul.itemList li{
		display:block;
		float:none;
		width:auto;
		margin:17px 0 0 0;
		padding:7px 0;
		text-align:center;
	}
	
	#kind-box ul.itemList > li{
		width:auto;
	}

	#kind-box ul.itemList li img{
		display:block;
		margin: 8px auto 0 auto;
	}	
	
	/* □ #budget-box
	-------------------------------- */
	#budget-box ul{
		margin:0px 10px;
	}

	#budget-box ul li{
		margin:8px 0px ;
	}

	#budget-box ul li input{
		margin:6px 4px;
	}
	
	/* □ #decided-box
	-------------------------------- */
	#decided-box textarea{
		box-sizing:border-box;
		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;
	}
	
	.contents table.tableStyle th{
		width:auto;
		vertical-align:top;
		background:#dddddd;
	}
	
		
	.contents table.tableStyle td input.short{
		width:95%;
	}	
		
	.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;
	}


}