@charset "UTF-8";

div#of_wrapper {
	width: 780px;
	text-align: left;
	margin: 0px auto;
	font-family: "游ゴシック", "游ゴシック体", YuGothic;
	line-height:1.5;
}
div#of_header h1 {
	font-size: 18px;
	border-bottom: solid 1px #999;
	margin: 0px;
	padding: 0px;
}

form#mailform {
	padding: 5px;
}
table{
	margin:2em auto;
	border-collapse:collapse;
	border-top:1px #000 solid;
	}
table th,table td{
	border-bottom:1px silver dotted;
	}
	
table.mailform,
table#of_Item,
table#of_Data {
	width: 100%;
	box-sizing: border-box;
}
table tr th,table tr td {
	text-align: left;
	font-size: 14px;
	padding: 7px;
	box-sizing: border-box;
}
table.mailform tr th {
	width: 12em;
}
table.mailform input[type="text"] {
	width: 80%;
	}
table caption{
	text-align:left;
	}
table caption b{
	color:#8fc31f;
	}
table.mailform span {
	color: #C00;
	font-size: 10px;
}
table#of_Item br{
	display:none;
	}
table#of_Item span.sp_orderttl,
table#of_Item span.sp_order {
	display:none;
	}
dl#attention {
	margin:1em auto;
	padding:1em;
	width:96%;
	border:1px solid #a9a9a9;
	}
dl#attention dt {
	margin:0;
	padding:2px 0 3px 0;
	border-bottom:1px solid #8fc31f;
	font-weight:bold;
	font-size:16px;
	}
dl#attention dd {
	margin:1em 0 0 0;
	padding:0 0 0 0.5em;
	font-size:14px;
	line-height:1.5;
	}
p#of_Btn{
	width:100%;
	text-align:center;
	}
p#of_Btn input{
	margin:5px;
	padding:8px 12px;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	border:none;	
	}
p#of_Btn input.of_submit{
	background-color:#8fc31f;
	}
p#of_Btn input.of_reset{
	background-color:#a9a9a9;
	}
/* ################ SP ############### */	
@media screen and (max-width: 640px) {
	div#of_wrapper {
		width: 100%;
	}
	table#of_Item thead {
	display:none;
	}
	table#of_Item br {
	display:inline;
	}
	table#of_Item span.sp_orderttl {
	display:block;
	background-color:#d3d3d3;
	font-weight:bold;
	margin:3px 0;
	}
	table#of_Item span.sp_order {
	display:inline;
	}
	table#of_Item td span.price {
	display:none;
	}
	table tr th,table tr td {
		display: block;
		width: auto;
		max-width: 100%;
		padding: 0px;
		box-sizing: border-box;
	}
	table.mailform tr th {
		border: none;
		padding: 7px 5px 2px 5px;
	}
	table.mailform tr th p {
		display: inline-block;
	}
	table.mailform tr th span {
		display: inline-block;
		margin: 0px 3px;
	}
	table.mailform tr td {
		padding: 2px 5px 7px 5px;
	}
	table.mailform tr td input[type="text"] {
		width: 20em;
		box-sizing: border-box;
	}
	table#of_Data {
	width:100%;
	}
	table#of_Item caption b,table#of_Data caption b{
	display:block;
	}
	table#of_Data tr th {
	border:none;
	border-top:1px solid #000;
	padding:5px 0 ;	
	}
	table#of_Data tr td {
	border:none;
	padding:5px 0 ;	
	}
	form#mailform {
	padding: 5px 0;
}
}