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

/***** フォーム *********************************************************/

#contact{
	width: 100%;
	overflow: hidden;
	margin: 20px auto 0;
}

#contact ul{
  clear: both;
  margin: 0 auto 10px auto;
  width: 98%;
  border: 1px solid #ccc;
}

#contact li{
  box-sizing: border-box;
  padding: 5px 10px;
  line-height: 2;
  background: #fff0d7;
}

#contact li:last-child{
  background: #ffffd7;
}

#contact li.jidou{
  background: #fff0f5;
}

#contact li.other{
  background: #f0ffd7;
}

.red{
  color: #C00;
}

.submit{
  text-align: center;
  margin-top: 5px;
  line-height: 2;
}

input,select,textarea{
  border: 1px solid #ccc;
  border-radius:	5px;
  -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 5px; 		/* Firefox用 */
  color: #333;
  font-size: 120%;
  background: #fff;
}

input[type="text"] , textarea{
  width: 100%;
  height: 45px;
  padding-left: 0.5em;
  box-sizing: border-box;
}

textarea{
  height: auto;
}

input[type="text"].n{
  width: auto;
}

.contact-head, .contact-head2{
  width: 98%;
  margin: 10px auto;
  overflow: hidden;
  box-sizing: border-box;
  border: 5px solid #f1f1f1;
  border-radius: 10px;
}

.contact-head ul{
  background:#fff;

} 

.contact-head ul li{
  float: none;
  box-sizing: border-box;
  line-height: 1.6;
  padding: 0.3rem 0.5rem;;
}

.contact-head ul li:first-child{
  font-size: 140%;
  line-height: 1.8;
  font-family: 'Shin Go Medium';
  color: #f69;
}

.contact-head ul li:last-child{
	margin-top: 1rem;
}

.contact-head2{
  padding: 0.5em;
  line-height: 1.4;
  text-align: center;
  margin: 20px auto 10px auto;
}

.big{
	font-size: 1.6rem;
	line-height: 1.2;
}

input[type="submit"],input[type="reset"]{
  background: #fff;
  border: 2px solid #ccc;
  padding: 0.3em 0.5em;
}

input[type="submit"]:hover,input[type="reset"]:hover{
  background: #f1f1f1;
}

select{
	padding: 0 1rem;
}

		/** res@onsiv 900px OVER **********************/
			@media only screen and (min-width: 600px) {
				#contact{
					width: 90%;
				}
				
				#contact ul{
				  clear: both;
				  border-right: none;
				  border-bottom: none;
				  overflow: hidden;
				}
				
				#contact li{
				  width: 25%;
				  height: 45px;
				  line-height: 2.5;
				  background: #fff0d7;
				  float: left;
				  border-right: 1px solid #ccc;
				  border-bottom: 1px solid #ccc; 
				}
				
				#contact li.area{
				  height: 20vh;
				}
				
				#contact li:last-child{
				  float: right;
				  width: 75%;
				}
				
				#contact li.heigh , #contact li:last-child.heigh{
				  height: 50px;
				  line-height: 1.4;
				}
				
				input[type="text"] , textarea{
				  width: auto;
				  height: 30px;
				  padding-left: 0.5em;
				  box-sizing: border-box;
				}
				
				input[type="text"].size{
				  width: auto;
				}
				
				textarea{
					height: auto;
					width: 100%;
				}
				
				/*#contact li dt{
				  float: left;
				  width: 60%;
				}*/
				
				.contact-head{
				  width: 90%;
				}
				
				.contact-head ul li{
				  float: left;
				  width: 70%;
				  padding: 0.3em;
				}
				
				.contact-head ul li:first-child{
				  width: 30%;
				  font-size: 200%;
				  line-height: 250%;
				}
			}
			
		/** res@onsiv 900px OVER **********************/
			@media only screen and (min-width: 900px) {
				#contact{
				  width: 60%;
				}
				
				.contact-head{
				  width: 59%;
				}
				
				input,select,textarea{
				  font-size: 100%;
				}			
			}