@charset "UTF-8";

#pageBody > section {
	max-width : 100%;
	margin : 0;
	padding : 30px 0 120px;
	background-color : #f0f0f0;
}
#pageBody > section > .inner {
	max-width : 1200px;
	margin : 0 auto;
}

/* ======================================
   customer
====================================== */

#customer {
	max-width : 100%;
	margin : 0;
	padding : 60px 0 160px;
	background-color : #f0f0f0;
}

#customer > .inner {
	max-width : 1200px;
	margin : 0 auto;
}

#customer .guide_title {
	display : flex;
	justify-content : space-between;
	align-items : center;
	margin-bottom : 40px;
	padding : 45px 55px;
	text-shadow : 0 0 5px rgba(0, 0, 0, 0.5);
	color : #ffffff;
	border-radius : 10px;
	background-color : #333333;
	box-shadow : 0 2px 8px rgba(0, 0, 0, 0.2);
}

#customer .guide_title h3 {
	font-family : "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho",
	"MS PMincho", serif;
	font-size : 1.875rem;
	margin-bottom : 25px;
}

#customer .guide_title h3 span:first-of-type {
	display : block;
	font-family : Futura, "Century Gothic", "Questrial", sans-serif;
	font-size : 0.875rem;
	font-weight : 600;
	margin-bottom : 20px;
	letter-spacing : 0.1em;
}

#customer .guide_title h3 span:nth-of-type(2) {
	display : block;
	font-size : 1.25rem;
	margin-bottom : 10px;
}

#customer .guide_title p {
	font-size : 1rem;
}
#customer .message {
	font-size : 1.2em;
	line-height : 1.75;
	margin-bottom : 40px;
	text-align : center;
}
#customer #error {
	margin : 0 auto;
	margin-bottom : 24px;
	padding : 24px;
	color : #d81417;
	background-color : #f7d5d5;
}
#customer #error > li:not(:last-child) {
	margin-bottom : 0.5em;
}
#customer #form {
	display : flex;
	flex-direction : column;
	justify-content : center;
}
#customer #form dl {
	display : grid;
	grid-template-columns : 360px 1fr;
	margin-bottom : 40px;
	border-top : #333333 solid 1px;
}
#customer #form dl dt {
	display : flex;
	font-family : "Meiryo", "Helvetica Neue", "Helvetica", "Hiragino Sans",
	"Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", sans-serif;
	font-size : 1.2em;
	align-items : center;
	padding : 25px 40px;
	border-bottom : #333333 solid 1px;
}
#customer #form dl dt .required {
	display : inline-block;
	font-size : 0.8em;
	margin-left : 1.5em;
	padding : 0.5em 0.75em;
	color : #ffffff;
	background-color : #d81417;
}

#customer #form dl dd {
	min-width : 400px;
	padding : 25px 40px;
	border-bottom : #333333 solid 1px;
}
#customer #form dl dd input,
#customer #form dl dd textarea,
#customer #form dl dd select {
	padding : 0.5em 0.75em;
	border : #cccccc solid 1px;
	border-radius : 6px;
}
#customer #form dl dd input,
#customer #form dl dd textarea {
	width : 100%;
	max-width : 100%;
}
#customer #form dl dd.name input {
	width : 14em;
	max-width : 100%;
}
#customer #form dl dd.comment textarea {
	height : 10em;
}

#customer #form .button {
	display : flex;
	justify-content : center;
}
#customer #form .button .linkBtn {
	font-size : 1.2em;
	min-width : 300px;
	margin : 0 auto;
	padding : 1.4em;
	cursor : pointer;
	text-align : center;
	letter-spacing : 0.05em;
}
#customer #form .button .linkBtn:hover {
	background-color : #f59400;
}
#customer #form .button input.linkBtn:focus {
	color : #ffffff;
	background-color : #f59400;
}

#customer #form .err_required,
#customer #form .err_sizeover,
#customer #form .err_invalid {
	display : none !important;
}
#customer #form .required .err_required {
	display : block !important;
	margin-top : 0.5em;
	color : #d81417;
}
#customer #form .sizeover .err_sizeover {
	display : block !important;
	margin-top : 0.5em;
	color : #d81417;
}
#customer #form .invalid .err_invalid {
	display : block !important;
	margin-top : 0.5em;
	color : #d81417;
}

@media screen and (max-width: 767px) {
	#customer .guide_title {
		flex-direction : column;
		padding : 40px 20px;
	}
	#customer .guide_title > div:first-of-type {
		margin-bottom : 40px;
	}
	/*  */
	#customer h3 {
		font-size : 10vw;
		margin-bottom : 0;
		padding : 0 24px;
		letter-spacing : 0.05em;
	}
	#customer h3::before {
		top : -3em;
	}
	#customer .message {
		padding : 24px;
	}
	#customer #form dl {
		grid-template-columns : 1fr;
		width : 100%;
	}
	#customer #form dl dt,
	#customer #form dl dd {
		min-width : auto;
		padding : 24px;
	}
	#customer #form dl dd input,
	#customer #form dl dd textarea {
		width : 100%;
	}
	#customer #form dl dd.name > div {
		grid-template-columns : 1fr;
	}
	#customer #form dl dd.name input {
		width : 100%;
	}
	#customer #form .linkBtn {
		width : 80%;
		min-width : auto;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	#customer #form dl dd input,
	#customer #form dl dd textarea {
		width : 100%;
	}
}