@charset "UTF-8";

@media screen and (max-width:640px) {
	h1 {
		background-image: url('images/title_bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
		background-position-x: center;
		background-position-y: top;
		width: 100% !important;
		height: 30vw !important;
	}
	h1 img{
		margin-left: 1rem;
		margin-top: 10vw;
		width: 50%;
	}
}


.art { padding: 40px 0; color: #534741; clear: both;}
	.art p { padding: 16px 0; margin: 0; font-size: 14px;}
	.contact { width:960px; padding:0;}
		.contact form { margin:0; padding:0;}
		.contact p { padding:8px 0 8px 0; margin:0; font-size:14px; }
		.contact p a { text-decoration:none; color:#333;}
			.contact p a:hover { color:#999; text-decoration:underline;}
		.contact-form { margin:16px 0 0 0; width:960px;border-collapse: collapse; }
			.contact-form th { display: block; padding:24px 0 0 0; font-size:14px; text-align:left; vertical-align:top; font-weight:normal; }
			.contact-form td { display: block;  padding:8px 0 8px 0; font-size:14px;}
				.contact-form td.wfull { padding: 16px !important; margin-top: 8px; min-height: 1.5em;}
			.wfull, .whalf, .wshort {  box-sizing: border-box;padding: 1em; background:#EEE; border: none; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
			.wfull { width:100%; background: #D6D4AF;}
			.whalf { width:50%; background: #D6D4AF;}
			.wshort {width:120px; background: #D6D4AF;}
		#btn{ width:100%;text-align:center;}
			#btn table {width:100%;margin:0 auto;}
			#btn td { padding:16px 0 0 0; text-align:center;}
		#confirm { display:block; width:300px; height:70px; margin:0 auto; padding:0; overflow:hidden; border:none; text-align:center; background:url(images/confirm.jpg) no-repeat center; cursor: pointer; text-indent:-400px;}
			#confirm:hover { color:#FFF; background-image:url(images/confirm-bg.jpg);}
		#send { display:block; width:300px; height:70px; margin:0 auto; padding:0; overflow:hidden; border:none; text-align:center; background:url(images/send.jpg) no-repeat center; cursor: pointer; text-indent:-400px;}
			#send:hover { color:#FFF; background-image:url(images/send-bg.jpg);}
		#back { display:block; width:300px; height:70px; margin:0 auto; padding:0; overflow:hidden; border:none; text-align:center; background:url(images/back.jpg) no-repeat center; cursor: pointer; text-indent:-400px;}
			#back:hover { color:#FFF; background-image:url(images/back-bg.jpg);}
@media screen and (max-width:640px) {
	.contact {width:100%;}
		.contact-form {width: 100%;}
		#confirm { width:150px;}
		#send { width:150px;}
		#back { width:150px;}
}