@charset "utf-8";

/* ==================================================================
	contact.css
	
=================================================================== */

/* --------------------------------
   □ nav
-------------------------------- */ 
	#contact .contents .sub ul.list li.contact a{
		background: url("../../images/common/icon/arrow/arrow.png") 95% 50% no-repeat #F5F5F5;
	}

/* ==================================================================
	contact.css
	
=================================================================== */

.contents .accent {
    background:url("../../images/contact/accent.jpg") 50% 50% no-repeat;
    margin-bottom: 0;
}

/* --------------------------------
   □ chapter
-------------------------------- */ 

.contents .chapter > p.text{
	margin-bottom: 59px;
	text-align: center;
	line-height: 1.8;
}

.contents .chapter p.tel{
	text-align: center;
	margin-bottom: 8px;
}

.contents .chapter p.tel a{
	font-size:160%;
	line-height:1.1;
	color: #53001b;
}

/* --------------------------------
   □ section
-------------------------------- */ 

.contents .chapter > section {
	padding: 60px 40px;
	margin-bottom: 80px;
	background: #fff;
	border-bottom: 1px solid #fff;
}


.contents .chapter > section h2.title{
	text-align: center;
	margin-bottom: 50px;
}

.contents .chapter > section > p.text{
	margin-bottom: 39px;
	text-align: center;
	line-height: 1.8;
}

/* --------------------------------
   □ telArea
-------------------------------- */ 
#telArea p.tel{
	font-size:180%;
}

#telArea p.tel a{
	padding-left: 52px;
	background: url("../../images/common/icon/free.png") 0 50% no-repeat;
}



/* --------------------------------
   □ mailArea
-------------------------------- */ 
#mailArea ul.list{
	display: table;
	width: 100%;
}

#mailArea ul.list > li{
	display: table-cell;
	width: 25%;
	vertical-align: middle;
	text-align: center;
}
#mailArea ul.list > li a{
	display: block;
	width: 90%;
	box-sizing: border-box;
}


/* --------------------------------
   □ showroomArea
-------------------------------- */ 
#showroomArea ul.list{
	display: table;
	width: 100%;
}

#showroomArea ul.list > li{
	display: table-cell;
	width: 33%;
	vertical-align: middle;
	text-align: center;
}

#showroomArea ul.list > li dl dt{
	text-align: center;
	font-weight: 600;
	margin-bottom: 20px;
}
#showroomArea ul.list > li dl dd p.hour{
	text-align: center;
	font-size: 92%;
}

/* --------------------------------
   □ maintenanceArea
-------------------------------- */ 
#maintenanceArea p.buttonStyle{
	text-align: center;
}
#maintenanceArea p.buttonStyle a{
	width: 225px;
}
#maintenanceArea p.buttonStyle a span{
	padding: 0;
}

/* --------------------------------
   □ form
-------------------------------- */ 
.contents .message{
	border:0;
	padding: 0 30px 20px 30px;
	border-bottom: 1px solid #ccc;
	margin-bottom:34px;
}

.contents .privacy{
	border:0;
	background: #efefef;
	padding: 20px;
	margin-bottom:34px;
}

.contents .message span.em{
	color:#F00;
}

.contents p.error{
	display:block;
	background:#F00;
	color:#fff;
	padding:8px;
	margin:8px 0;
	font-size:84%;
}


#submitButton.disabled{
	background:#666;
	border:#666;
	opacity:0.5;
}

#submitButton.disabled span{
	background-position:95% 50%;
}

.agreement-box .scroll{
	background:#efefef;
	padding:30px;
	line-height: 2;
}
.agreement-box .checkbox{
	margin:20px 0;
}
	.agreement-box .checkbox p{
		text-align:center;
	}
	.agreement-box .checkbox p.button {
		margin-top:10px;
	}
	
	.agreement-box .checkbox p.button label {
		display: inline-block;
		padding: 11px 20px;
		background: #fafafa;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-shadow: 1px 0px 8px 1px rgba(0,0,0,0.1);
	}

/* --------------------------------
   □ .tableStyle
-------------------------------- */ 
form table.tableStyle{
	border:0;
	width:100%;
}

form table.tableStyle th,
form table.tableStyle td{
	border:0;
}
	form table.tableStyle th{
		width:30%;
		vertical-align:top;
		background: none;
	}

	form table.tableStyle th span.em{
		display:inline-block;
		line-height:1.1;
		padding:4px 10px;
		margin-left:8px;
		font-size:75%;
		font-weight:400;
		color: #64B6AC;
	    border: 1px solid #64B6AC;
		float:right;
	}
	form table.tableStyle td input.short{
		box-sizing:border-box;
		width:39%;
	}	
	
	form table.tableStyle td input.middle{
		box-sizing:border-box;
		width:80%;
	}	
	form table.tableStyle td input.long{
		box-sizing:border-box;
		width:99%;
	}
	form table.tableStyle td .select-wrap{
		width:80%;
	}	
	
	form table.tableStyle td textarea{
		box-sizing:border-box;
		width:99%;
	}
	
	form table.tableStyle td .sample{
		display:block;
	}
	form table.tableStyle .inTable{
		width:100%;
		margin-top:-17px;
	}

	
	form table.tableStyle .inTable th{
		padding-right:30px;
	}

	
	form table.tableStyle td ul.inline{
		overflow: hidden;
	}

	form table.tableStyle td ul.inline li{
		box-sizing: border-box;
		width: 49%;
		float: left;
		margin: 0 0 10px 0;
	}

/* --------------------------------
   □ .contact
-------------------------------- */ 


.checktext{
	margin-bottom:24px;
	padding-top:28px;
	text-align:center;
}

.contents ul.submitArea{
	text-align:center;
}

.contents ul.submitArea li{
	display:inline-block;
	margin:0 8px;
	width:40%;
}

.contents .buttonStyle.green button {
    padding: 13px 40px;
}

.contents .complete .buttonStyle.green a{
	width: 30%;
}
.contents ul.submitArea li.buttonStyle button,
.contents ul.submitArea li.buttonStyle a{
	width:100%;
	font-size:115%;
}

.contents ul.submitArea li.buttonStyle button span,
.contents ul.submitArea li.buttonStyle a span{
	letter-spacing:0.1em;
	font-family: 'Noto Serif JP', serif;
}

.complete h3{
	margin-bottom:24px;
}
.complete p.text{
	margin-bottom:24px;
}



@media only screen and
(max-width : 767px) {

/* --------------------------------
   □ chapter
-------------------------------- */ 

.contents .chapter > p.text{
	margin-bottom: 5%;
}

.contents .chapter p.tel a{
	font-size:130%;
}

/* --------------------------------
   □ section
-------------------------------- */ 

.contents .chapter > section {
	padding: 6% 4%;
	margin-bottom: 8%;
}


.contents .chapter > section h2.title{
	margin-bottom: 5%;
}

.contents .chapter > section > p.text{
	margin-bottom: 4%;
}

/* --------------------------------
   □ telArea
-------------------------------- */ 
#telArea p.tel{
	font-size:140%;
}


/* --------------------------------
   □ mailArea
-------------------------------- */ 
#mailArea ul.list{
	display: block;
}

#mailArea ul.list > li{
	display: block;
	width: auto;
	margin-bottom:6%;
	text-align:center;
}
#mailArea ul.list > li a{
	display: block;
	margin : 0 auto;
	width: 90%;
	box-sizing: border-box;
}

#mailArea ul.list > li a span{
	padding:0;
}

/* --------------------------------
   □ showroomArea
-------------------------------- */ 
#showroomArea ul.list{
	display: block;
	width: 100%;
}

#showroomArea ul.list > li{
	display: block;
	width: auto;
	vertical-align: middle;
	text-align: center;
	padding-bottom:6%;
	margin-bottom:11%;
	border-bottom:1px solid #efefef;
}
#showroomArea ul.list > li:last-child{
	margin-bottom:0;
	border-bottom:0;
}

/* --------------------------------
   □ maintenanceArea
-------------------------------- */ 
#maintenanceArea p.buttonStyle a{
	width: 90%;
}
#maintenanceArea p.buttonStyle a span{
	padding-right: 0;
}

	
.contents .message{
	margin-bottom:3%;
}

/* --------------------------------
   □ .tableStyle
-------------------------------- */ 

form table.tableStyle th,
form table.tableStyle td{
	display:block;
	border:0;
	padding:8px 0;
}

form table.tableStyle th{
	padding-bottom:2%;
	width:auto;
}


	form table.tableStyle th span.em{
		margin-left:8px;
		float:none;
		vertical-align:middle;
	}

	form table.tableStyle td input.middle{
		width:99%;
	}	


	form table.tableStyle td ul.inline li{
		box-sizing: border-box;
		width: auto;
		float: none;
		margin: 0 0 10px 0;
	}

ul.submitArea li.buttonStyle button span,
ul.submitArea li.buttonStyle a span{
}

.contents ul.submitArea li {
    width: 100%;
	margin: 0 0 20px;
}
/* --------------------------------
   □ .contact
-------------------------------- */ 


.checktext{
	margin-bottom:3%;
	padding-top:3%;
}

.complete h3{
	margin-bottom:3%;
}
.complete p.text{
	margin-bottom:3%;
}

}