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


/* -----------------------------
 PC
----------------------------- */
@media screen and (min-width:1000px) {

/* --------------------------------------- #mainimg --------------------------------------- */

	#mainimg {
		position: relative;

		margin: 0px auto 50px;
height: 300px;
	}

	#mainimg h1 {
		position: absolute;
		bottom: 0;
		left: 0;

		padding: 20px 30px;
		width: 80%;
		background: 
			linear-gradient(
				to right,
				rgba(0, 26, 75, 0.6),
				rgba(0, 26, 75, 0.6),
				transparent
			)
		;

		letter-spacing: 2px;
		font-size: 3vw;
		color: #FFFFFF;
	}

	#mainimg img {
		width: 100%;
		height: auto;
	}

/* --------------------------------------- #contact --------------------------------------- */

	#contact h2 {
		margin-bottom: 20px;

		text-align: center;
		font-size: x-large;
	}

	#contact > p {
		margin: 0px auto 10px;
		width: 80%;
	}

	#contact dl {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		margin: 0px auto 50px;
		width: 80%;
	}

	#contact dl dt {
		margin-bottom: 30px;
		width: 30%;
	}

	#contact dl dd {
		margin-bottom: 30px;
		width: 70%;
	}

	#contact dl dd input,
	#contact dl dd textarea {
		padding: 3px 5px;
		width: 100%;
		border: 1px solid #adadad;
		border-radius: 5px;

		resize: none;
	}

	#contact form > div {
		text-align: center;
	}

	#contact form > div:first-of-type {
		margin-bottom: 50px;
	}

	#contact form > div:first-of-type a { text-decoration: underline; }

	input[type="button"],
	input[type="submit"],
	button {
		padding: 20px 30px;
		border-radius: 2px;
		background:
			linear-gradient(
				to bottom,
				#afafaf 0%,
				#777777 100%
			);
		letter-spacing: 2px;
		color: #FFFFFF;
	}

	input[type="button"] { margin-right: 10px; }

	#description {
		margin-bottom: 50px;
		width: 100%;
		text-align: center;
	}

	.complateMsg p { line-height: 150%; }

	.complateMsg p:last-of-type { margin-bottom: 20px; }

	.complateMsg div { margin-bottom: 10px; }

	.complateMsg div a { text-decoration: underline; }

}

/* -----------------------------
 SP
----------------------------- */
@media screen and (max-width:999px) {

/* --------------------------------------- #mainimg --------------------------------------- */

	#mainimg {
		position: relative;

		margin: 0px auto 50px;
	}

	#mainimg h1 {
		position: absolute;
		bottom: 0;
		left: 0;

		padding: 20px 30px;
		width: 80%;
		background: 
			linear-gradient(
				to right,
				rgba(0, 26, 75, 0.6),
				rgba(0, 26, 75, 0.6),
				transparent
			)
		;

		letter-spacing: 2px;
		font-size: 8vw;
		color: #FFFFFF;
	}

	#mainimg img {
		width: 100%;
		height: auto;
	}

/* --------------------------------------- #contact --------------------------------------- */

	#contact h2 {
		margin-bottom: 20px;

		text-align: center;
		font-size: x-large;
	}

	#contact > p {
		margin: 0px auto 30px;
		width: 90%;
	}

	#contact dl {
		margin: 0px auto 50px;
	}

	#contact dl dt {
		margin-bottom: 30px;
		padding: 10px;
		width: 100%;
		background-color: #575757;
		color: #FFFFFF;
	}

	#contact dl dd {
		margin-bottom: 30px;
		padding: 0px 10px;
		width: 100%;
	}

	#contact dl dd input,
	#contact dl dd textarea {
		padding: 3px 5px;
		width: 100%;
		border: 1px solid #adadad;
		border-radius: 5px;

		resize: none;
	}

	#contact form > div {
		text-align: center;
	}

	#contact form > div:first-of-type {
		margin-bottom: 50px;
	}

	#contact form > div:first-of-type a { text-decoration: underline; }

	input[type="button"],
	input[type="submit"],
	button {
		padding: 20px 30px;
		border-radius: 2px;
		background:
			linear-gradient(
				to bottom,
				#afafaf 0%,
				#777777 100%
			);
		letter-spacing: 2px;
		color: #FFFFFF;
	}

	input[type="button"] { margin-right: 10px; }

	#description {
		margin-bottom: 50px;
		width: 100%;
		text-align: center;
	}

	.complateMsg p { line-height: 150%; }

	.complateMsg p:last-of-type { margin-bottom: 20px; }

	.complateMsg div { margin-bottom: 10px; }

	.complateMsg div a { text-decoration: underline; }


/* --------------------------------------- #footer --------------------------------------- */

	footer nav ul li a {
		display: block;
		width: 100%;
		height: auto;
	}


}