@charset "utf-8";
/* -----------------------------
 contact.css
----------------------------- */

/* -----------------------------
 form general
----------------------------- */
form #alert {
	display: none;
	margin: 20px auto;
	padding: 5px;
	border: 1px solid #FF0000;
	background-color: #FFCCFF;
	color: #FF0000;
}

form #message {
	display: none;
	margin: 20px auto;
	padding: 5px;
	border: 1px solid #0000FF;
	background-color: #CCCCFF;
	color: #0000FF;
}

form .error:not(.errDtl) {
	border: 1px solid #FF0000;
	background-color: #FFCCFF;
}

form .errDtl {
	display: none;
	color: var(--impact-color);
	font-size: small;
}

/* -----------------------------
 main
----------------------------- */

main .block {
	font-family: var(--font-sans-serif);
}

main table {
	width: 100%;
	margin-top: 20px;
}

main caption {
	margin-bottom: 20px;
	color: var(--impact-color);
}

main input[type=text],
main input[type=email],
main input[type=tel],
main input[type=number],
main input[type=url],
main textarea,
main select {
	padding: 3px 5px;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
}

main label:not(:last-child) {
	margin-right: 20px;
}

main .required {
	margin-left: 5px;
	font-size: x-large;
	font-weight: bold;
	color: var(--impact-color);
	vertical-align: middle;
}

main .privacy {
	max-width: 500px;
	height: 250px;
	margin: 30px auto;
	padding: 10px;
	border: 1px solid #CCCCCC;
	line-height: 200%;
	overflow: auto;
}

main .privacy h3 {
	font-weight: bold;
}

main .privacy h3:not(:first-child) {
	margin-top: 20px;
}

main .send {
	text-align: center;
}

main .send button {
	padding: 5px 10px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	background: linear-gradient(#CCCCCC, #EEEEEE);
}

/* -----------------------------
 PC
----------------------------- */
@media not screen and (max-width:1200px) {
	main tr:nth-child(2n - 1) {
		background-color: #EDE9DC;
	}

	main th {
		width: 200px;
		padding: 5px;
	}

	main td > p {
		padding: 5px;
	}

	main .ex label > span:first-child {
		display: inline-block;
		width: 200px;
	}

	main label :not(:last-child) {
		margin-right: 10px;
	}
}

/* -----------------------------
 SP
----------------------------- */
@media screen and (max-width:1200px) {
	main th {
		display: block;
		padding: 5px;
		background-color: #EDE9DC;
	}

	main td {
		display: block;
		padding: 5px;
	}

	main td > p {
		padding: 5px 0px;
	}

	main .ex input {
		width: 100%!important;
	}

	main .ex2 {
		display: flex;
		flex-wrap: wrap;
	}

	main .ex2 input {
		margin-right: 5px;
	}

	main .ex2 label {
		float: left;
		display: flex;
		align-content: center;
	}

	main textarea {
		width: 100%!important;
	}
}