@charset "UTF-8";

/* COMMON
---------------------------------------------------*/
#page-header {
	background-image: url('../images/contact/bg_header.jpg');
}

/* media <= 768px */
@media screen and (min-width:1px) and (max-width: 768px) {
	#page-header {
		background-image: url('../images/contact/bg_header_sp.jpg');
	}
}


/* contact
---------------------------------------------------*/
#contact {
	width: 100%;
	margin-bottom: 80px;
}
#contact .inner {
	width: 100%;
	max-width: 980px;
	background-color: #FFF;
	border: 5px solid #5bbbe8;
	border-radius: 30px;
	padding: 40px;
	margin: 0 auto;
}
#contact .inner dl {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin-bottom: 24px;
}
#contact .inner dl dt {
	font-weight: bold;
}
#contact .inner dl dt span{
	color: #FFF;
	font-size: 0.6em;
	padding: 0.1em 0.5em;
	margin-left: 1em;
	background-color: #FF3B3B;
	border-radius: 3px;
	vertical-align: middle;
}
#contact .inner dl dd {
	width: 68%;
	text-align: left;
}
#contact .inner dl dd ul.checkbox-list {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#contact .inner dl dd ul.checkbox-list li {
	margin-right: 2em;
	margin-bottom: 1em;
}

#contact .inner .privacy {
	margin-bottom: 20px;
}
#contact .inner .privacy p {
	margin-bottom: 1em;
}
#contact .inner .privacy p:last-of-type {
	margin-bottom: 0;
}
#contact .inner .agreement {
	text-align: center;
	margin-bottom: 40px;
}

/* confirm */
#contact.confirm .inner dl {
	line-height: 1.6em;
}
#contact.confirm .inner .btn-submit {
	margin: 80px auto 40px;
}

/* media <= 768px */
@media screen and (min-width:1px) and (max-width: 768px) {
	#contact {
		margin-bottom: 12.5vw;
	}
	#contact .inner {
		border-radius: 4.6875vw;
		border: 2px solid #5bbbe8;
		padding: 6.25vw 3.125vw;
	}
	#contact .inner dl {
		display: block;
		margin-bottom: 6.25vw;
	}
	#contact .inner dl dt {
		margin-bottom: 0.5em;
	}
	#contact .inner dl dt span{
		border-radius: 0.46875vw;
	}
	#contact .inner dl dd {
		width: 100%;
	}
	#contact .inner .privacy {
		margin-bottom: 3.125vw;
	}
	#contact .inner .agreement {
		margin-bottom: 6.25vw;
	}

	/* confirm */
	#contact.confirm .inner .btn-submit {
		margin: 12.5vw auto 6.25vw;
	}
}