@charset "utf-8";
/* CSS Document */


#form {
	width: 100%;
	background-image: url(../img/tomozo_top_yellow03.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mailform_wrap {
	width: min(92%, 1200px);
	margin: auto;
	background: #fff;
	padding: min(4%, 50px);
	border-radius: 20px;
}

.form_ttl h3 {
	font-size: min(5vw,4rem);
	margin-bottom: 2rem;
	text-align: center;
}
.form_ttl p {
	font-size: min(3.2vw,1.8rem);
	text-align: center;
}

#mailformpro { margin-top: 2rem;}
dl.mailform:not(:last-of-type) { margin-bottom: 2rem; }
dl.mailform.al_item_flst { align-items: flex-start;}
dl.mailform {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5%;
	dt {
		width: min(100%, 300px);
		font-size: 1.8rem;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	dd {
		font-size: 1.8rem;
		flex-grow: 1;
		input[type=text],input[type=email] {
			width: 100%;
			height: 2.2em;
			padding: 4px 10px;
			display: flex;
			align-items: center;
			font-size: 1.8rem;
		}
		textarea {
			width: 100%;
			height: 20rem;
			padding: 10px;
			font-size: 1.8rem;
		}
	}
}
dl.mailform dd.upload {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	input[type=file] {
		font-size: 1.6rem;
		width: min-content;
	}
	input[type=file]:hover {
		cursor: pointer;
	}
	input[type=file]:not(:last-of-type) {
		margin-bottom: 1rem;
	}
}


span.must,
span.nini  {
	display: block;
	margin-right: 1rem;
	width: 60px;
	color: #fff;
	font-size: .8em;
	padding: .5rem;
	line-height: 1.0;
	border-radius: 4px;
	text-align: center;
}
span.must {background: #c80000;}
span.nini {background: #ccc;}

.check label {
	margin-right: 2rem;
}

.mfp_buttons button[type=submit] {
	width: min(90%, 300px);
	height: 6rem;
	margin: 2rem auto 0;
	font-size: 2rem;
	color: #fff;
	background: linear-gradient(#c80000,#a00);
	border: 2px solid #c80000;
	border-radius: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .5s;
}
.mfp_buttons button[type=submit]:hover {
	cursor: pointer;
	background: #fff;
	color: #c80000;
	transition: .5s;
}


@media (max-width:828px) {
	dl.mailform {
		dt,dd { width:100%; }
		dt {margin-bottom: 1.2rem}
	}
	dl.mailform:not(:last-of-type) {
		padding-bottom: 2rem;
		border-bottom: 2px dotted #ddd;
	}
}



.thanks {
	height: 30rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	 a {
	 	width: min(90%, 300px);
		height: 6rem;
		margin: 2rem auto 0;
		font-size: 2rem;
		color: #fff;
		background: linear-gradient(#c80000,#a00);
		border: 2px solid #c80000;
		border-radius: 8px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: .5s;
	 }
	 a:hover {
		cursor: pointer;
		background: #fff;
		color: #c80000;
		transition: .5s;
	}
}