@charset "UTF-8";

/* ======================================
   section
====================================== */

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

/* ======================================
   inquiry
====================================== */

#inquiry h2 {
	position : relative;
	font-family : "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho",
	"MS PMincho", serif;
	font-size : 2em;
	font-weight : 600;
	margin-bottom : 30px;
	padding-top : 1.25em;
	text-align : center;
	color : #334666;
}
#inquiry h2::before {
	display : inline-block;
	position : absolute;
	top : 0;
	left : 50%;
	font-family : "Meiryo", "Helvetica Neue", "Helvetica", "Hiragino Sans",
	"Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", sans-serif;
	font-size : 0.45em;
	font-weight : 400;
	line-height : 0.5;
	padding : 0.75em 1em;
	content : "無料";
	transform : translateX(-50%);
	letter-spacing : 0;
	background-color : #fbcf49;
}
#inquiry h2 span {
	font-family : "Meiryo", "Helvetica Neue", "Helvetica", "Hiragino Sans",
	"Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", sans-serif;
	font-size : 0.5em;
	font-weight : normal;
	letter-spacing : 0.08em;
	color : #787878;
}
#inquiry .message {
	font-size : 1.2em;
	line-height : 1.75;
	margin-bottom : 40px;
	text-align : center;
}
#inquiry #error {
	margin : 0 auto;
	margin-bottom : 24px;
	padding : 24px;
	color : #d81417;
	background-color : #f7d5d5;
}
#inquiry #error > li:not(:last-child) {
	margin-bottom : 0.5em;
}
#inquiry #form {
	display : flex;
	flex-direction : column;
	justify-content : center;
}
#inquiry #form > * {
	min-width : 768px;
}
#inquiry #form dl {
	display : grid;
	grid-template-columns : 280px 1fr;
	margin : 0 auto;
	margin-bottom : 40px;
	border-top : #333333 solid 1px;
}
#inquiry #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;
}
#inquiry #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;
}

#inquiry #form dl dd {
	min-width : 400px;
	padding : 25px 40px;
	border-bottom : #333333 solid 1px;
}
#inquiry #form dl dd input,
#inquiry #form dl dd textarea,
#inquiry #form dl dd select {
	padding : 0.5em 0.75em;
	border : #cccccc solid 1px;
	border-radius : 6px;
}
#inquiry #form dl dd input,
#inquiry #form dl dd textarea {
	width : 30em;
	max-width : 100%;
}
#inquiry #form dl dd.name input {
	width : 14em;
	max-width : 100%;
}
#inquiry #form dl dd.name > div {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 1em;
	width : 100%;
}
#inquiry #form dl dd.name > div > span {
	display : flex;
	flex-direction : column;
}
#inquiry #form dl dd.comment textarea {
	height : 10em;
}

#inquiry #form .err_family_name_required,
#inquiry #form .err_sir_name_required,
#inquiry #form .err_family_name_sizeover,
#inquiry #form .err_sir_name_sizeover,
#inquiry #form .err_family_kana_required,
#inquiry #form .err_sir_kana_required,
#inquiry #form .err_family_kana_sizeover,
#inquiry #form .err_sir_kana_sizeover,
#inquiry #form .err_required,
#inquiry #form .err_sizeover,
#inquiry #form .err_invalid {
	display : none !important;
}
#inquiry #form .family_name_required .err_family_name_required,
#inquiry #form .sir_name_required .err_sir_name_required,
#inquiry #form .family_kana_required .err_family_kana_required,
#inquiry #form .sir_kana_required .err_sir_kana_required,
#inquiry #form .required .err_required {
	display : block !important;
	margin-top : 0.5em;
	color : #d81417;
}
#inquiry #form .family_name_sizeover .err_family_name_sizeover,
#inquiry #form .sir_name_sizeover .err_sir_name_sizeover,
#inquiry #form .family_kana_sizeover .err_family_kana_sizeover,
#inquiry #form .sir_kana_sizeover .err_sir_kana_sizeover,
#inquiry #form .sizeover .err_sizeover {
	display : block !important;
	margin-top : 0.5em;
	color : #d81417;
}
#inquiry #form .invalid .err_invalid {
	display : block !important;
	margin-top : 0.5em;
	color : #d81417;
}

#inquiry #form .button {
	display : flex;
	justify-content : center;
}
#inquiry #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;
}
#inquiry #form .button .linkBtn:hover {
	background-color : #f59400;
}
#inquiry #form .button input.linkBtn:focus {
	color : #ffffff;
	background-color : #f59400;
}

@media screen and (max-width: 767px) {
	#inquiry h3 {
		margin-bottom : 1em;
	}
	#inquiry .message {
		padding : 0 24px;
	}
	#inquiry #form > * {
		min-width : auto;
	}
	#inquiry #form dl {
		grid-template-columns : 1fr;
		width : 100%;
	}
	#inquiry #form dl dt,
	#inquiry #form dl dd {
		min-width : auto;
		padding : 24px;
	}
	#inquiry #form dl dd input,
	#inquiry #form dl dd textarea,
	#inquiry #form dl dd select {
		width : 100%;
		padding : 1em 0.75em;
	}
	#inquiry #form dl dd.name > div {
		grid-template-columns : 1fr;
	}
	#inquiry #form dl dd.name input {
		width : 100%;
	}
	#inquiry #form .linkBtn {
		width : 80%;
		min-width : auto;
	}
}

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