@charset "utf-8";

/*  */

#contactForm .content {
	text-align : center;
}
#contactForm .content .button {
	margin-bottom : 32px;
}
#contactForm .content .button a {
	display : inline-block;
	font-size : 1.2em;
	padding : 1.4em 2em;
	text-decoration : none;
	color : #ffffff;
	background-color : #000000;
}
#contactForm .content .button a:hover {
	background-color : #444444;
}

#contactForm .submitBtn > button.back {
	background-color : #888888;
}
#contactForm .submitBtn > button.confirm,
#contactForm .submitBtn > button.submit {
	background-color : #000000;
}
#contactForm .submitBtn > button.confirm[disabled="disabled"] {
	background-color : #aaaaaa;
}

#contactForm .complete {
	padding : 2em;
	text-align : center;
}
#contactForm .complete > p:not(:last-child) {
	margin-bottom : 1em;
}
#contactForm .complete .button {
	display : block;
}
#contactForm .complete .button a {
	display : inline-block;
	min-width : 10em;
	padding : 1.5em;
	color : #ffffff;
	background-color : #000000;
}

#contactForm .mw_wp_form .error {
	display : inline-block;
	position : relative;
	font-size : 1em;
	margin : 0.5em 0 0;
	padding : 0.4em 1em;
	text-align : left;
	color : #ffffff;
	border : none;
	border-radius : 2px;
	background-color : #d65d5d;
}

#contactForm .mw_wp_form .error::after {
	position : absolute;
	top : -0.25em;
	left : 50%;
	width : 0;
	height : 0;
	content : "";
	transform : translateX(-50%);
	border-width : 0 0.45em 0.45em 0.45em;
	border-style : solid;
	border-color : transparent transparent #d65d5d transparent;
}

/*  */
#contactForm > .inner > header {
	padding : 60px 440px 60px 32px;
	border-radius : 8px;
	background : url(/support/wp-content/themes/wraymer_faq/contact/img/bg_contact.png)
	95% 50% #f4f0f1 no-repeat;
	background-size : 40%;
}

#contactForm > .inner > header h2 {
	font-size : 3em;
	margin-bottom : 0.4em;
	padding : 6px 0 6px 84px;
	background : url(/support/wp-content/themes/wraymer_faq/contact/img/icon_contact.svg)
	0 50% no-repeat;
	background-size : contain;
}
#contactForm > .inner > header > p:not(:last-child) {
	margin-bottom : 1em;
}

#contactForm .table {
	display : grid;
	grid-template-columns : 14em 1fr;
	margin-bottom : 32px;
	border : 1px solid #dddddd;
}
#contactForm .table > dt {
	display : flex;
	align-items : center;
	padding : 1em;
	border-bottom : 1px solid #dddddd;
	background-color : #f3f3f3;
}
#contactForm .table > dt span {
	font-size : 0.8em;
	margin-left : 0.4em;
	padding : 0.4em;
	color : #ffffff;
	background-color : #000000;
}
#contactForm .table > dd {
	padding : 1.4em;
	border-bottom : 1px solid #dddddd;
}
#contactForm .table > dt:last-of-type,
#contactForm .table > dd:last-of-type {
	border-bottom : none;
}
#contactForm .table > dd .note {
	font-size : 0.8em;
	padding : 0.8em 0;
	color : #888888;
}
#contactForm .table > dd .mailConfirm {
	padding-top : 1em;
	color : #888888;
	border-top : 1px dotted #000000;
}
#contactForm .table > dd textarea {
	box-sizing : border-box;
	width : 100%;
	height : 14em;
}

#contactForm .submitBtn {
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
}
#contactForm .captchaMessage {
	margin-bottom : 12px;
	text-align : center;
}
#contactForm .submitBtn > .g-recaptcha {
	flex-basis : 100%;
	margin : 0 0 24px;
}
#contactForm .submitBtn > *:not(.g-recaptcha) {
	min-width : 10em;
	margin : 0 1em;
	padding : 1em;
	cursor : pointer;
	color : #ffffff;
	background-color : #000000;
}
#contactForm.confirm .note,
#contactForm.confirm .mailConfirm,
#contactForm.confirm .captchaMessage {
	display : none;
}

/* --- for 2K or more pc --- */
@media screen and (min-width: 1980px) {
}

/* --- for HD pc --- */
@media screen and (min-width: 1440px) and (max-width: 1979px) {
}

/* --- for normal pc --- */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
}

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	#contactForm > .inner > header {
		padding : 24px;
		background-image : none;
	}
	#contactForm > .inner > header h2 {
		font-size : 1.7em;
		margin-bottom : 0.6em;
		padding : 4px 0 4px 2.2em;
	}
	#contactForm > .inner > header > p {
		font-size : 0.8em;
	}
	#contactForm > .inner > header > p br {
		display : none;
	}

	#contactForm {
		padding : 0;
	}
	#contactForm > .inner img {
		width : 100%;
	}
	#contactForm .table {
		display : block;
	}
}