@charset "utf-8";

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

section.contact {
	width: 100%;
	background-color: #d8e5e0;
	padding: 45px 0 60px;
}

	section.contact > div {
		width: calc(100% - 20px);
		max-width: 750px;
		margin: 0 auto;
	}
	
		section.contact > div > h1 {
			font-size: 1.5em;
			text-align: center;
			font-weight: 500;
			letter-spacing: 0.5em;
			text-indent: 0.5em;
		}
		
		section.contact > div > p {
			margin: 30px auto 0;
			font-size: 1.2em;
			font-weight: 500;
			line-height: 1.8em;
		}
		
		section.contact > div > div {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 40px auto 0;
		}
		
			section.contact > div > div > a,
			section.contact > div > div > p {
				display: block;
				width: 50%;
			}
			
				section.contact > div > div > a > img,
				section.contact > div > div > p > img {
					width: 100%;
				}
			
		
	
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
form
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section.form {
	width: calc(100% - 20px);
	max-width: 1000px;
	margin: 50px auto 120px;
}

	section.form > h2 {
		font-size: 1.5em;
		text-align: center;
		font-weight: 500;
		letter-spacing: 0.5em;
		text-indent: 0.5em;
		color: #005936;
	}
	
	section.form > h2::before {
		content: '○';
	}
	
	section.form > h2::after {
		content: '○';
	}
	

		section.form > form > dl {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			margin: 35px auto 0;
		}
		
			section.form > form > dl > dt {
				width: 280px;
				border-bottom: 1px #808080 solid;
				box-sizing: border-box;
				padding: 0 20px 0 55px;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				font-weight: 500;
				position: relative;
			}
			
			section.form > form > dl > dt.required::after {
				content: '*必須';
				display: inline-block;
				position: absolute;
				font-size: 0.8em;
				color: #9f0e15;
				right: 0;
				top: calc(50% - 12px);
			}
			
					section.form > form > dl > dt > div.cate_box > span {
						font-size: 0.8em;
					}
			
			section.form > form > dl > dd {
				width: calc(100% - 280px);
				border-bottom: 1px #808080 solid;
				box-sizing: border-box;
				padding: 10px 35px;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				font-weight: 500;
			}
			
			section.form > form > dl > dt:first-child,
			section.form > form > dl > dt:first-child + dd {
				padding-bottom: 40px;
			}
			
				section.form > form > dl > dd > div.radio_box {
					margin: 0 25px 10px 0;
				}
				
				section.form > form > dl > dd > div.radio_box:nth-child(4) {
					margin: 0 50% 0 0;
				}
				
					section.form > form > dl > dd > div.radio_box > label {
						display: inline-block;
						margin: 0 0 0 12px;
						letter-spacing: 0.1em;
					}
				
				section.form > form > dl > dd input[type=text],
				section.form > form > dl > dd input[type=email],
				section.form > form > dl > dd input[type=tel],
				section.form > form > dl > dd textarea,
				section.form > form > dl > dd select {
					display: block;
					width: 100%;
					padding: 5px 10px;
					box-sizing: border-box;
					border: 1px #808080 solid;
				}
				
				section.form > form > dl > dd select {
					max-width: 200px;
				}
				
				section.form > form > dl > dd input[type=text].short,
				section.form > form > dl > dd input[type=tel].short {
					max-width: 300px;
				}
				
				section.form > form > dl > dd textarea {
					min-height: 12em;
				}

div.zip_box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

	section.form > form > dl > dd > div.zip_box > input[type=tel] {
		width: calc(100% - 100px);
		max-width: 200px;
	}
	
	div.zip_box > button {
		width: 95px;
		background-color: #d8e5e0;
		border: none;
		margin: 0 0 0 5px;
	}
	

button[type=submit],
button[type=submit] + button {
	display: block;
	border: 1px #1a1a1a solid;
	background-color: #1a1a1a;
	color: #fff;
	font-size: 0.9em;
	padding: 3px 0;
	width: 100%;
	max-width: 150px;
	margin: 20px auto 0;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	cursor: pointer;
	font-weight: 500;
}

button[type=submit]:hover,
button[type=submit] +button:hover {
	background-color: #fff;
	color: #1a1a1a;
}

	section.form > div {
		width: 100%;
		max-width: 500px;
		margin: 55px 0 0 auto;
		font-size: 1.2em;
		font-weight: 500;
		line-height: 1.8em;
	}
	
		section.form > div > a {
			display: block;
			width: 100%;
			max-width: 380px;
			margin: 10px 0 0;
		}
		
		section.form > div > a:hover {
			opacity: 0.5;
		}
		
			section.form > div > a > img {
				width: 100%;
			}
		
	

@media screen and (max-width: 700px) {
			section.form > form > dl > dt {
				width: 200px;
				padding: 0 20px 0 20px;
			}
			
			section.form > form > dl > dd {
				width: calc(100% - 200px);
			}
}

@media screen and (max-width: 600px) {
		section.contact > div > div {
			max-width: 400px;
		}
		
			section.contact > div > div > a,
			section.contact > div > div > p {
				width: 100%;
			}
			
			section.contact > div > div > p {
				margin: 20px 0 0;
			}
}

@media screen and (max-width: 550px) {
			section.form > form > dl > dt {
				width: 100%;
				max-width: 200px;
				border-bottom: none;
				margin: 15px 0 0;
				font-weight: bold;
			}
			section.form > form > dl > dd {
				width: 100%;
				padding: 5px 10px 15px;
			}
			
			section.form > form > dl > dt:first-child {
				padding-bottom: 0;
			}
			
			section.form > form > dl > dt:first-child + dd {
				padding-bottom: 10px;
			}

}

@media screen and (max-width: 450px) {
		section.contact > div > h1 {
			font-size: 1.3em;
			letter-spacing: 0.1em;
			text-indent: 0.1em;
		}
		
		section.contact > div > p {
			font-size: 1.1em;
			margin: 20px auto 0;
		}
	
	section.form > h2 {
		font-size: 1.3em;
		letter-spacing: 0.1em;
		text-indent: 0.1em;
	}
}