@charset "utf-8";

/************************************************
 tables
************************************************ */
/* デフォルトテーブル
----------------------------------------------- */
table {
	width: 100%;
	text-align: left;
	margin: 0 auto;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-collapse: collapse;
}
table th {
	padding: 8px;
	font-size: 12px;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background-color: #f0f0f0;
	font-weight: normal;
}
table td {
	/* width: 50px; */
	padding: 8px;
	font-size: 12px;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

/* 見出し
----------------------------------------------- */
div#undercolumn_shopping table th[scope=col] {
	text-align: center;
}

/* MYページ */
div#mycontents_area table th {
	text-align: left;
}
div#mycontents_area table th.alignR {
	text-align: right;
}
div#mycontents_area table th.alignL {
	text-align: left;
}
div#mycontents_area table th.alignC {
	text-align: center;
}
div#mycontents_area table th.resulttd {
	text-align: right;
}
div#mycontents_area table caption {
	padding: 8px;
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-left: 1px solid #ddd;
	color: #000;
	background-color: #f0f0f0;
	text-align: left;
	font-weight: bold;
}


/* その他
----------------------------------------------- */
table select {
	height: 28px;
	padding: 3px;
	border: 1px solid #ddd;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #f0f0f0;
	outline: none;
	cursor: pointer;
	
	background: #efebe1;
	/*
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#efebe1));
	background: -webkit-linear-gradient(#ffffff, #efebe1);
	background: -moz-linear-gradient(#ffffff, #efebe1);
	background: -ms-linear-gradient(#ffffff, #efebe1);
	background: -o-linear-gradient(#ffffff, #efebe1);
	background: linear-gradient(#ffffff, #efebe1);
	-pie-background: linear-gradient(#ffffff, #efebe1);
	
	background: -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	*/
}



/* お客様情報入力 >> 配下
----------------------------------------------- */
.ie8 #undercolumn_cart .tbCart .trItems td.td01{
	width: 98px;
}
.ie8 #undercolumn_cart .tbCart .trItems td.td02{
	width: 102px;
}
.ie8 #undercolumn_cart .tbCart .trItems td.td03{
	width: 112px;
}
.ie8 #undercolumn_cart .tbCart .trItems td.td04{
	width: 112px;
}
.ie8 #undercolumn_cart .tbCart .trItems td.td05{
	width: 112px;
}
.ie8 #undercolumn_cart .tbCart .trItems td.td06{
	width: 112px;
}
.ie8 #undercolumn_cart .tbCart .trItems td.td07{
	width: 187px;
}
.ie8 #undercolumn_cart .tbCart .trItems td.td08{
	width: 84px;
}



.ie7 .paytr02 img{
	float:left;
}
.ie7 .paytab td{
	width: 75%;
}

.column_step3 .td02,
.column_step3 .td03,
.column_step3 .td04,
.column_step3 .td05,
.column_step3 .td06{
	_width: 164px;
	*width: 164px;
}
.column_step1 table{
	border: 1px solid #ddd;
}
.column_step1 table th,
.column_step3 .custDelivname table th{
	width: 25%;
}
.column_step1 table td,
.column_step3 .custDelivname table td{
	width: 75%;
}
.column_step2 table th{
	width: 75%;
}
.column_step2 table td{
	width: 75%;
}
.column_step1 table tr input{
	padding: 5px;
}
.trItem01 input,
.trItem02 input,
.trItem03 input,
.trItem07 input,
.trItem10 input{
	width: 100%;
	max-width: 310px;
	*width: 310px;
	*display: inline-block;
}
.trItem10 input{
	margin-bottom: 5px;
}
.trItem04 td input,
.trItem05 td input,
.trItem06 td input{
	width: 100%;
	max-width: 119px;
	*width: 119px;
	*display: inline-block;
}
.trItem04 td input,
.trItem06 td input{
	margin-left: 12px;
}
.trItem06 td input{
	margin-right: 6px;
}
.trItem06 td .top{
	margin-bottom: 5px;
}
.trItem06 td .zipimg{
	margin-left: 28px;
}
.trItem07 td select{

}
.trItem07 td input{
	margin-bottom: 5px;
}
#undercolumn_customer.column_step1 table tbody tr.trItem07 td p input{
	margin-right: -80px;
	background: #ffffff;
	position: relative;
	z-index: 10000;
}
.trItem07 td .top{
	margin-top: 5px;
}
.trItem08 td input,
.trItem09 td input{
	width: 23%;
	max-width: 86px;
	*width: 86px;
	*display: inline-block;
}
.trAddreClick th{
}
.trAddreClick th input{
	position: relative;
	float: left;
	margin: 0;
	min-width: 20px;
	max-width: 20px;
	height: 20px;
	width: 10%;
}
.trAddreClick th label{
	margin-left: 5px;
	position: relative;
	float: left;
	width: 85%;
	line-height: 20px;
}
.column_step3 table.tbCart,
.column_step3 table.delivname,
.column_step3 table.customer{
	margin-bottom: 30px;
}
#undercolumn_company table.customer tr th,
.column_step3 table.delivname tr th,
.column_step3 table.customer tr th{
	width: 30%;
}
/*
.column_step3 form{
	padding-top: 20px !important;
}
*/



/*------------------- 768px以下の場合 ---*/
@media (max-width: 768px){
	.column_step3 form{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.column_step3 .custDelivname{
		margin-left: 20px;
		margin-right: 20px;
	}
}



/*------------------- 640px以下の場合 ---*/
@media (max-width: 640px){
	.column_step4 table.paytab,
	#undercolumn_company table.customer,
	.column_step3 table.delivname,
	.column_step3 table.customer,
	.column_step1 table{
		border: none;
	}
	.column_step4 table.paytab tr,
	#undercolumn_company table.customer tr,
	.column_step3 table.delivname tr,
	.column_step3 table.customer tr,
	.column_step1 table tr{
		display: block;
		overflow: hidden;
		margin-bottom: 10px;
		border: none;
	}
	.column_step4 table.paytab th,
	#undercolumn_company table.customer tr th,
	.column_step3 table.delivname tr th,
	.column_step3 table.customer tr th,
	.column_step1 table tr th{
		position: relative;
		overflow: hidden;
		display: block;
		vertical-align: middle;
		float: none;
		width: auto;
		font-size: 12px;
		border: 1px solid #ddd;
	}
	.column_step4 table.paytab td,
	#undercolumn_company table.customer tr td,
	.column_step3 table.delivname tr td,
	.column_step3 table.customer tr td{
		min-height: 20px;
		line-height: 20px
	}
	.column_step4 table.paytab td,
	#undercolumn_company table.customer tr td,
	.column_step3 table.delivname tr td,
	.column_step3 table.customer tr td,
	.column_step1 table tr td{
		position: relative;
		display: block;
		vertical-align: middle;
		float: none;
		/*width: 640px;*/
		width:calc(100% - 18px);
		font-size: 12px;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	.trItem01 input, .trItem02 input, .trItem03 input, .trItem07 input, .trItem10 input {
		width: 99.5%;
		padding: 5px 0 !important;
		text-indent: 5px;
		max-width: 100%;
	}
	.trItem04 td input, .trItem05 td input{
		width: 31%;
		max-width: 100%;
	}
	.trItem06 td input {
		width: 31%;
		max-width: 100%;
	}
	.trItem06 td .top a{
		display: block;
		text-align: center;
		margin-top: 10px;
	}
	.trItem06 td .zipimg {
		margin-left: 0;
		text-align: center;
	}
	.trItem06 td .zipimg a{
		display: block;
		margin-bottom: 5px;
	}
	.trItem10 td br,
	.trItem07 td .top:last-child br{
		display: none;
	}
	.trItem07 td .top {
		margin-top: 10px;
	}
	
	
	
	.column_step4 table.paytab th{
		max-width: 100% !important;
		text-align: left;
	}
	.column_step4 .paytr01{
		margin-bottom: 1px !important;
	}
	.column_step4 .paytr01 th{
		background: #dddddd !important;
		text-align: center !important;
	}
	.paytr06 td input{
		
	}
	.paytr03 td input {
		width: 14.6% !important;
	}
}
.column_step4 .payTest{
	margin-top: 10px;
	margin-bottom: 20px;
}
.column_step4 table.paytab td input{
	border: 1px solid #ddd;
	padding: 5px;
}
.column_step4 table.paytab th{
	min-width: 158px;
	max-width: 160px;
}
.column_step4 .paytr01 th{
	font-size: 15px;
	font-weight: bold;
}
.paytr02 td{
	padding: 15px 15px 10px;
}
.paytr03 td input,
.paytr06 td input{
	width: 52px;
}



/*------------------- 480px以下の場合 ---*/
@media (max-width: 480px){
	.column_step4 table.paytab .paytr05 input	{width: 35%;}
}



/*------------------- 380px以下の場合 ---*/
@media (max-width: 380px){
	.column_step3 .custDelivname{
		margin-left: 10px;
		margin-right: 10px;
	}
	#undercolumn_company .companyCtBox {
		padding: 10px 10px 0;
	}
	.column_step4 table.paytab td{
		text-align: center !important;
	}
	.column_step4 table.paytab .paytr04 select	{width: 35% !important;}
	.column_step4 table.paytab .paytr06 input	{width: 96% !important;}
	.column_step4 table.paytab .paytr08 select	{width: 100% !important;}
	.mini{ text-align: left !important;}
}