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

}
/* Contact page: catalog request design. */
.contact-renewal #contactArea { padding: 42px 0 87px; }
.contact-renewal #contactArea > .area { width: 100%; }
.contact-renewal .catalog-intro { max-width:1228px; margin:0 auto 76px; display:flex; align-items:center; }
.contact-renewal .catalog-intro > img { width:57.25%; height:auto; display:block; }
.contact-renewal .catalog-copy { background:#eae8dd; width:48.7%; margin-left:-6%; padding:68px 5.95% 73px; box-sizing:border-box; position:relative; }
.contact-renewal .catalog-copy h3 { font-size:28px; font-weight:600; line-height:1.4; margin-bottom:29px; white-space:nowrap; }
.contact-renewal .catalog-copy p { font-size:16px; line-height:1.8; white-space:nowrap; }
.contact-renewal .catalog-copy .catalog-contents { background:#fffbf5; margin-top:24px; padding:21px 24px; font-weight:600; }
.contact-renewal .catalog-contents span { color:#a09488; font-size:14px; margin-right:24px; }
.contact-renewal #contactArea .division { max-width:1000px; margin:0 auto; }
.contact-renewal #contactArea p.message { margin-bottom:58px; }
.contact-renewal #contactArea form table.tableStyle { table-layout:fixed; }
.contact-renewal #contactArea form table.tableStyle th { box-sizing:border-box; width:25%; }
.contact-renewal #contactArea form table.tableStyle td { box-sizing:border-box; }
.contact-renewal #contactArea form .Itembox ul.list li:last-child { clear:both; }
.contact-renewal #contactArea form .Itembox td { padding-top:19px; padding-bottom:19px; height:108px; }
.contact-renewal #contactArea form textarea { height:229px; box-sizing:border-box; }
.contact-renewal #contactArea form p.privacy { margin:44px 0; }
.contact-renewal .contact-confirm { position:relative; display:block; width:452px; max-width:100%; min-height:71px; margin:auto; border:0; border-radius:8px; background:#be988d; color:#fff; font:inherit; font-size:20px; cursor:pointer; }
.contact-renewal .contact-confirm img { position:absolute; right:25px; top:50%; transform:translateY(-50%); }
.contact-renewal .contact-confirm:hover { opacity:.8; }
.contact-renewal .contact-confirm:focus-visible { outline:2px solid #574d43; outline-offset:4px; }
@media (max-width: 1279px) and (min-width: 768px) {
 .contact-renewal .catalog-intro { margin-left:4%; margin-right:4%; }
 .contact-renewal .catalog-copy { padding:40px 4%; }
 .contact-renewal .catalog-copy h3 { font-size:24px; }
 .contact-renewal .catalog-copy p { font-size:14px; white-space:normal; }
}
@media (max-width:767px) {
 .contact-renewal #contactArea { padding:24px 5% 55px; }
 .contact-renewal #contactArea > .area { padding:0; }
 .contact-renewal .catalog-intro { display:block; margin-bottom:40px; }
 .contact-renewal .catalog-intro > img { width:calc(100% / .9); max-width:none; margin-left:calc(-100% / 18); }
 .contact-renewal .catalog-copy { width:100%; margin:-20px 0 0; padding:28px 20px; }
 .contact-renewal .catalog-copy h3 { font-size:21px; margin-bottom:18px; white-space:normal; }
 .contact-renewal .catalog-copy p { font-size:14px; white-space:normal; }
 .contact-renewal .catalog-copy p br { display:none; }
 .contact-renewal .catalog-copy .catalog-contents { padding:15px; }
 .contact-renewal .catalog-contents span { display:block; margin:0 0 5px; }
 .contact-renewal #contactArea form table.tableStyle { width:110%; margin:0 -5%; }
 .contact-renewal #contactArea form table.tableStyle th { width:100%; }
 .contact-renewal #contactArea form .Itembox td { height:auto; }
 .contact-renewal #contactArea p.message { text-align:left; margin-bottom:32px; }
 .contact-renewal .contact-confirm { font-size:18px; }
}
.contact-renewal #contactArea > .area { max-width:none; }
@media (min-width:1280px) {
 .contact-renewal #contactArea { padding-top:23px; }
 .contact-renewal .catalog-copy h3 { line-height:28.8px; margin:0 0 26px; }
 .contact-renewal .catalog-copy p { margin-bottom:0; }
}

@media (min-width:1280px) { .contact-renewal .catalog-copy { min-height:355px; } }