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

.contact {
  padding: 40px 50px;
  font-size: 1.8rem;
  line-height: 1.6;
  box-shadow: 5px 5px 35px -10px rgba(32, 31, 27, 0.3);
  margin-top: 0;
  margin-bottom: 70px;
}

form {
  width: 80%;
  margin: 10px auto;	
}

label, textarea {
  display: inline-block;
  font-family: 'リュウミン M-KL';
  width: 210px;
  margin: 10px 30px 10px 10px;	
}

label.comment {
  vertical-align: top;	
}

input.button {
  display: block;
  margin: 20px auto;
  padding: 5px 20px;	
}

input:required, textarea:required {
  box-shadow:none;
}

.indication {
  font-family: 'リュウミン M-KL';
  font-size: 1.6rem;
  margin-left: 20px;	
}

/** inputs and textarea**/
input:not([type="submit"]),
textarea{
  outline:none;
  width:380px;
  padding:4px 8px;
  border:1px solid #666;
  color:#3F3F3F;
/*  font-family:'Droid Sans',Tahoma,Arial,Verdana sans-serif;*/
  font-size:16px;
  border-radius:3px;
  transition:background 0.2s linear,
  box-shadow 0.6s linear;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 0;
}

input:not([type="submit"]):active,
textarea:active,
input:not([type="submit"]):focus,
textarea:focus{
　background:#F7F7F7;
  border:solid 1px #333;
  box-shadow:0px 0px 6px #aaa inset;
}

input:not([type="submit"]){
  height: 30px;
  margin-bottom: 30px;
}


input[type=submit]{
  background: #fff;
  border: solid 2px #666;
  font-size: 1.8rem;
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 65px;
  margin: 40px auto;
}

input[type=submit]:hover {
  cursor: pointer;
/*  border: solid 2px #172d6d;
  background: #ebebeb;
*/
  background: #172d6d;
  color: #fff; 
  transition: all 0.5s ease;
}

textarea{
  min-height: 150px;
  resize:vertical;
  margin-right: 10px;
  border:1px solid #666;
}

/* placeholder */
::-webkit-input-placeholder  {
  color:#BABABA;
  font-style:italic;
}

input:-moz-placeholder,
textarea:-moz-placeholder{
  color:#BABABA;
  font-style:italic;
}

/* varidation error messege area */
label.error {
  display: inline;
  color: red;
  font-size: 90%;
  vertical-align: middle;
  margin: 20px 0 0 10px;
}

.comment label.error {
  vertical-align: top;
  position: relative;
  top: 10px;
}

@media screen and (max-width: 640px) {
  .container {
	 padding: 10px;  
  }
  
  .contact {
	  padding: 20px 0;  
  }
  
  label {
	 margin: 30px 0 0 0;  
  }
  
  label.error {
	 margin: 10px 0 20px 0;
  }
  
  input:not([type="submit"]), textarea {
	  width: 100%; 
	  margin-bottom: 5px; 
  }
  
  .indication {
	  margin: 20px 0 0 0;  
  }

}