@charset "UTF-8";
/* --------------------
  contact
-------------------- */
#contact .visual{
	background: url(../images/contact/contact.png) no-repeat;
	background-size: cover;
	background-position: bottom right;
	min-height: 440px;
}
#contact .contents-inner.visual-info{
	width: 90%;
	text-align: left;
}
#contact .visual-info{
	width: 520px;
}
#contact .visual-info p{
	color: #FFFFFF;
	font-weight: normal;
	font-size: 15px;
}
#contact .contents-inner{
	width: 90%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
#contact .message.submit{
	margin: 20px auto;
	letter-spacing: 5px;
}
#contact p.submit-ok,
#contact p.submit-ng{
	font-size: 15px;
	color: #FFFFFF;
	/*visibility: hidden;*/
}
/* --------------------
  form
-------------------- */
#contact #inquiry-form,
#contact #inquiry-form select,
#contact #inquiry-form tr td input,
#contact textarea,
#contact th,
#contact td p {
	font-size: 15px;
}
#contact #inquiry-form{
	width: 520px;
	color: #FFFFFF;
	letter-spacing: 4px;
	line-height: 50px;
	margin-right: 100px;
	margin-bottom: 30px;
	border: 0;
	cellspacing: 0;
	cellpadding: 5;
}
#inquiry-type{
	width: 517px;
	height: 40px;
	background-color: #FFFFFF;
	border: 0;
  outline: 1px solid #FFFFFF;
  outline-offset: -1px;
	margin-left: -1px;
}
#contact select.prefectures{
	width: 313px;
	height: 50px;
	background-color: #FFFFFF;
	border: 0;
  outline: 1px solid #FFFFFF;
  outline-offset: -1px;
	margin-left: -1px;
}
#contact #inquiry-form tr td input{
	width: 308px;
	height: 45px;
}
#contact table,
#contact tr{
	width: 520px;
}
#contact th{
	background-color: #22313f;
	font-weight: normal;
	text-align: left;
	padding-left: 5px;
	width: 200px;
	height: 45px;
}
#contact td{
	width: 319px;
}
#contact textarea{
	width: 514px;
	letter-spacing: 0.2em;
}
#contact td p{
	width: 515px;
	background-color: #22313f;
	margin-top: 5px;
	padding-left: 5px;
	text-align: left;
}
#contact td input{
	border: 3px solid #FFFFFF;
	padding: 0;
	margin-left: -2px;
}
/* --------------------
  button
-------------------- */
#contact .btn-wrap{
	width: 100%;
}
#contact-button{
	cursor: pointer;
	color: #FFFFFF;
	background-color: rgba(0,0,0,0);
	border-color: #FFFFFF;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
#contact button.btn-midium:hover{
	color: #202020;
	border: none;
	color: #fff;
}
#contact button.btn-midium:hover::after{
	top: 0;
	left: 0;
	background-color: rgb(34, 49, 63);
}
/* --------------------
  tel-info
-------------------- */
#contact .contents .tel-info-inner{
	color: #FFFFFF;
	letter-spacing: 0.05em;
}
@media screen and (max-width:1024px){
	#contact .visual-info{
		height: 100px;
	}
	#contact .visual-info-inner{
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	#contact .visual-info h2,
	#contact .visual-info p{
		padding-left: 10px;
	}
	#contact textarea{
		font-size: 16px;
	}
}
@media screen and (max-width:767px){
/*　画面サイズが767px以下の場合、このスタイルを読み込む　*/
	#contact .visual-info{
		height: 75px;
	}
	#contact #inquiry-form,
	#contact #inquiry-form select,
	#contact #inquiry-form tr td input,
	#contact textarea,
	#contact th,
	#contact td p,
	#contact .visual-info p{
		font-size: 11px;
	}
	#contact .visual-info h2,
	#contact .visual-info p{
		padding-left: 10px;
	}
	#contact th{
		letter-spacing: 3px;
	}
	#contact p.submit-ok,
	#contact p.submit-ng{
		font-size: 11px;
	}
}