@charset "utf-8";

/* =================================
   ■ contact
================================== */

section#contactArea{
	padding:55px 0;
}

body .underRes ol#breadcrumbs {
    margin: 0;
}

section#contactArea p.message{
	margin-bottom:52px;
	text-align:center;
}
section#contactArea p.flow{
	margin-bottom:30px;
	text-align:center;
}

section#contactArea p.em{
	margin-bottom:14px;
	text-align:right;
	font-size:75%;
}
section#contactArea p.em span{
	color:#d0a54c;
}

section#contactArea form table.tableStyle{
	border-top:1px solid #cccccc;
	width:100%;
}

section#contactArea form table.tableStyle th,
section#contactArea form table.tableStyle td{
	padding:19px 10px;
	vertical-align:middle;
	font-size:87%;
	border-bottom:1px solid #cccccc;
}

section#contactArea form table.tableStyle th{
	width:25%;
	background: #faf1df;
    position: relative;
    padding-right: 66px;
}
section#contactArea form table.tableStyle th span.em{
	color:#fff;
	background:#e65e77;
	padding:2px 10px;
	position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
	font-size: 1.2rem;
}

section#contactArea form ul.list{
	overflow:hidden;
}

section#contactArea form ul.list li{
	display:inline;
	float:left;
	padding:5px 26px 5px 0;
}

section#contactArea form ul.list li:last-child{
	display:block;
}

section#contactArea form input.short{
	width:40%;
}

section#contactArea form input.middle{
	width:50%;
}
section#contactArea form input.long,
section#contactArea form textarea{
	width:90%;
}

section#contactArea form select{
	padding:10px;
}

section#contactArea p.error{
	background:#CE2222;
	padding:8px;
	color:#fff;
	margin:15px 0;;
}

section#contactArea form p.error{

	margin:2px;
}

section#contactArea form p.privacy{
	text-align:center;
	margin:44px 0;
}


section#contactArea form ul.submitArea li{
	display:inline;
}


@media only screen and
	(max-width : 767px) {
		
	section#contactArea{
		display: block;
		width: 100%;
		padding: 0 5%;
		margin-bottom: 50px;
		box-sizing: border-box;
		
	}
		
	section#contactArea p.message{
		margin-bottom: 32px;
		text-align: left;
	}

	section#contactArea form table.tableStyle{
		margin: 0 -5%;
		width:110%;
		border-spacing: 0;
	}
		
	section#contactArea form table.tableStyle th, 
	section#contactArea form table.tableStyle td {
		display: block;
		width: 100%;
		padding: 19px 10px;
		font-size: 14px;
		box-sizing: border-box;
	}
		
	section#contactArea form table.tableStyle th {
		padding: 12px;
	}
		
	section#contactArea form table.tableStyle th span.em {
		display: block;
		font-size: 1.2rem;
		top: 25px;
	}
		
	section#contactArea form table.tableStyle th span.note {
		display: block;
		font-size: 1.2rem;
		margin-top: 8px;
	}
		
	section#contactArea form table.tableStyle tr.optional > th{
		padding-left: 10px;
	}
		
	section#contactArea form p.privacy {
		text-align: left;
		margin: 32px 0;
		font-size: 1.4rem;
	}
		
	section#contactArea form .division.complete{
		display: block;
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
	}

	input[type="text"], input.text, textarea, input[type="image"] {
		width: 100%!important;
		box-sizing: border-box;
	}

	/* iOSでフォーム項目タップ時に自動ズームされないよう16px以上を確保 */
	section#contactArea form input[type="text"],
	section#contactArea form input[type="tel"],
	section#contactArea form input[type="email"],
	section#contactArea form input[type="password"],
	section#contactArea form select,
	section#contactArea form textarea {
		font-size: 16px;
	}

}