@charset "utf-8";

#contentHeader {
	background : url("/common/img/bg_content_header_overlay.png"),
	url("/guide/img/img_content_header.jpg");
	background-color : #ffffff;
	background-repeat : repeat, no-repeat;
	background-position : left center, right center;
}

/* ====================================== */

#pageBody div {
	line-height : 1.8;
}

span.necessity {
	color : #cc0000;
}
.formContent > header {
	margin-bottom : 16px;
	padding : 16px;
	background-color : #f3f3f3;
}
.formContent .button {
	text-align : center;
}
.formContent .button a,
.formContent .button input[type="submit"] {
	display : inline-block;
	min-width : 200px;
	padding : 8px 16px;
	cursor : pointer;
	border : 1px solid #dddddd;
	background-color : #f3f3f3;
}
.formContent dl {
	display : flex;
	flex-wrap : wrap;
	width : 100%;
	margin-bottom : 16px;
	border-spacing : 0;
	border : 1px solid #cccccc;
}
.formContent dl dt {
	font-family : "GenShin_regular_JIS2";
	flex-basis : 20%;
	padding : 12px;
	text-align : left;
	vertical-align : mid180px;
	border-right : 1px solid #cccccc;
	border-bottom : 1px solid #cccccc;
}
.formContent dl dd {
	flex-basis : 61%;
	flex-grow : 1;
	padding : 12px;
	border-bottom : 1px solid #cccccc;
}
.formContent dl dt:last-of-type,
.formContent dl dd:last-of-type {
	border-bottom : none;
}
.formContent .errList {
	margin-bottom : 24px;
	padding : 24px;
	color : #cc0000;
	border : 1px solid #e8b6b6;
	background-color : #fff1f1;
}
.formContent .complete {
	margin-bottom : 24px;
	padding : 24px;
	border : 1px solid #dddddd;
}

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

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	.formContent dl {
		display : block;
	}
	.formContent dl dt {
		background-color : #f3f3f3;
	}
	.formContent dl dd {
		display : flex;
		flex-wrap : wrap;
	}
	.formContent dl dd.contactTitle {
		display : block;
	}
	.formContent dl dd.contactTitle input {
		width : auto;
	}
	.formContent dl dd input {
		flex-grow : 1;
		width : 1%;
		min-width : auto;
		margin-right : 16px;
		margin-left : 16px;
	}
	.formContent dl dd input:first-of-type {
		margin-left : 0;
	}
	.formContent dl dd input:last-of-type {
		margin-right : 0;
	}
	.formContent dl dd textarea {
		flex-grow : 1;
		width : 1%;
		min-width : auto;
		height : 5em;
	}
	.formContent dl dt:last-of-type,
	.formContent dl dd:last-of-type {
		border-bottom : none;
	}
}

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