#maincolumn{
	padding: 0 0 20px;
	margin:0 auto;
}
#bar{
	padding: 30px 0 0;
}
@media only screen and (max-width: 1024px)  {
	#maincolumn{
		width: 96%;
		padding: 10% 0 0;
	}
  #bar {
		padding: 14px 0 0; 
} }
@media only screen and (max-width: 769px) {
  #maincolumn {
    width: 94%;
	padding: 17% 0 0; }
  #bar {
    padding: 14px 0 0; 
} }

.onebox{
	padding: 20px 0;
	width: 980px;
}
	.onebox .box{
		border-left: 1px solid #c8b984;
		border-right: 1px solid #c8b984;
		border-bottom: 1px solid #c8b984;
		padding:12px;
		margin-left:1px;
	}
	@media screen and (max-width: 650px) {
		.onebox .box{
			margin-left:0;
		}
	}
		.onebox .box .mail{
			background: #f5f5f5;
			padding: 25px 55px;
		}
			.onebox .box .mail table{
				width: 100%;
			}
				.onebox .box .mail table td{
					padding: 10px;
				}
				.onebox .box .mail table td.koumoku{
					padding: 10px;
					text-align: right;
				}


input {
    width: 100%;
    max-width: 400px; /* レスポンシブの場合の対策 */
    box-sizing: border-box; /* [borde-box]で右の飛び出しを回避 */
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

textarea {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

input[type="submit"]  {
    max-width: 100px; /*送信ボタンの幅を指定*/
}
input[type="reset"]  {
    max-width: 100px; /*リセットボタンの幅を指定*/
}

@media screen and (max-width: 650px) {
	.onebox{
		padding: 14px 0 0; 
		width: 100%;
	}
		.onebox .box .mail{
			padding: 20px;
		}
		.onebox .box .mail table td{
			display: block;
		}
		.onebox .box .mail table td.koumoku{
			padding: 10px;
			text-align: left;
		}
		input[type="submit"]  {
			max-width: 300px; /*送信ボタンの幅を指定*/
}
input[type="reset"]  {
			max-width: 300px; /*リセットボタンの幅を指定*/
}
 }