@charset "utf-8";

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
contact
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section#contact_header {
	background-color: rgba(0,85,115,0.2);
	padding: 70px 0;
}

		section#contact_header > h1 > img {
			display: block;
			width: calc(100% - 20px);
			max-width: 336px;
			margin: 0 auto;
		}
	
	section#contact_header > p {
		width: calc(100% - 20px);
		max-width: 810px;
		margin: 60px auto 0;
		font-size: 1.1em;
		line-height: 1.8em;
	}
	
	

@media screen and (max-width: 750px) {
	section#contact_header > p {
		font-size: 1.0em;
	}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
contact_form
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

dl#contact_form {
	width: calc(100% - 20px);
	max-width: 750px;
	margin: 60px auto 0;
	font-size: 1.1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

	dl#contact_form > dt,
	dl#contact_form > dd {
		border-bottom: 1px #b3b3b3 solid;
	}
	
	dl#contact_form > dt {
		width: 220px;
		padding: 21px 25px;
		box-sizing: border-box;
		position: relative;
	}
	
	dl#contact_form > dt.required::after {
		content: '必須';
		color: #d15a24;
		display: block;
		position: absolute;
		right: 0;
		top: calc(50% - 12px);
		font-size: 0.7em;
	}
	
	dl#contact_form > dd {
		width: calc(100% - 220px);
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0 0 20px;
	}
	
	dl#contact_form > dt.textarea,
	dl#contact_form > dd.textarea {
		border-bottom: none;
	}
	
	
	dl#contact_form > dd.textarea + dd {
		width: 100%;
		border-bottom: none;
	}
	
	
		dl#contact_form > dd > input,
		dl#contact_form > dd > textarea,
		dl#contact_form > dd > select {
			display: block;
			width: 100%;
			box-sizing: border-box;
			margin: 0 auto;
			padding: 5px 10px;
			border: 1px #03556f solid;;
		}
		
		dl#contact_form > dd > select {
			padding: 5px 10px;
			border: none;
			background-color: #e6e6e6;
			font-size: 0.8em;
		}
		
		dl#contact_form > dd > textarea {
			max-width: 700px;
			margin: 0 0 0 auto;
			height: 200px;
		}
		
	
	section > form > p {
		width: calc(100% - 20px);
		margin: 10px auto 0;
		text-align: center;
		font-size: 0.9em;
	}
	
	section > form > dl + p {
		margin-top: 65px;
	}
	
	section > form > button {
		display: block;
		width: calc(100% - 20px);
		max-width: 800px;
		margin: 65px auto;
		color: #fff;
		border: none;
		background-color: #669aab;
		border: 1px #669aab solid;;
		font-size: 0.95em;
		letter-spacing: 0.1em;
		text-indent: 0.1em;
		padding: 21px 0;
		cursor: pointer;
		box-sizing: border-box;
	}
	
	section > form > button:hover {
		background-color: #fff;
		color: #669aab;
	}
	
	
@media screen and (max-width: 750px) {
dl#contact_form {
	font-size: 1.0em;
}

	dl#contact_form > dt {
		width: 180px;
	}
	
	dl#contact_form > dd {
		width: calc(100% - 180px);
	}
}
	
@media screen and (max-width: 450px) {
	dl#contact_form {
		flex-direction: column;
	}
	
	dl#contact_form > dt {
		width: 100%;
		padding: 10px 0 5px;
		border-bottom: none;
	}
	dl#contact_form > dd {
		width: 100%;
		padding: 0 0 10px;
	}
	
	dl#contact_form > dt.required::after {
		display: inline-block;
		position: relative;
		right: 0;
		top: 0;
		margin: 0 0 0 10px;
	}
	
		dl#contact_form > dd > textarea {
			height: 150px;
		}

}