@charset "utf-8";

/*---------------------------------------------------------------------- general --*/

.contact {
	width: 100%;
}

.contact th, .contact td {
	border-top: 3px solid #fff;
}


.contact th {
	padding-left: 15px;
	vertical-align: middle;
	background: #ddd;
}

.contact td {
	padding: 15px;
	background: #eee;
}

.contact input:not([type="submit"]):not([type="checkbox"]), .contact select, .contact textarea {
	width: 100%;
	padding: 5px 10px;
	border: 1px solid #ddd;
	border-radius: var(--border_radius);
	background: #fff;
	font-size: ;
}

.contact td input:nth-child(n + 2) {
	margin-top: 5px;
}

.contact textarea {
	padding: 10px;
	height: 300px;
}

.contact *::placeholder {
	color: #ccc;
}

.required {
	margin-left: 10px;
	color: #c00;
}

.required::before {
	content: '※';
}

#postal::before {
	content: '〒';
	margin-right: 5px;
}

#postal input {
	max-width: 200px;
}

@media (width <= 767px) {
	.contact tr {
		display: flex;
		flex-wrap: wrap;
	}
	
	.contact tr:nth-of-type(n + 2) {
		margin-top: 15px;
	}
	
	.contact th, .contact td {
		width: 100%;
		padding: 0;
		background: #fff;
		font-family: YuGo-B;
	}
	
	.contact th {
	}
	
	.contact td {
	}

	.contact input:not([type="submit"]):not([type="checkbox"]), .contact select, .contact textarea {
		border: 1px solid #bbb;
		border-radius: 3px;
	}
	
	#postal input {
		max-width: 150px;
	}
}

.go_back,
.submit {
	width: 25%;
	padding: 15px 0;
	border-radius: var(--border_radius);
	background: #fff;
	font-weight: bold;
	text-align: center;
}

.go_back {
	margin-right: 15px;
	border: 1px solid #c00;
	color: var(--error);
}

.submit {
	border: 1px solid #ddd;
	background: #fff;
}

.error {
	padding: 15px;
	border: 1px solid var(--error);
	border-radius: var(--border_radius);
	background: #fff;
	color: var(--error);	
}

@media (min-width: 1025px) {
	.agreement_box label, .go_back, .submit {
		transition: 0.2s;
	}

	.agreement_box label:hover {
		color: #444;
	}

	.go_back:hover {
		background: #fee;
	}

	.submit:hover {
		background: #f0f0f0;
	}
}

@media (width <= 500px) {
	.go_back,
	.submit {
		width: 100%;
		margin: 15px 0 0 0;
	}
}




/*---------------------------------------------------------------------- confirm --*/

.confirm input:not([type="submit"]):not([type="checkbox"]), .confirm select, .confirm textarea {
	background: #e0f0ff;
}