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

.person01,.person02,.person03,.person04,.person05,.reset{float: left;
width: 20%;
text-align: center;}
.autoInput div input {
	display: none;
}
.autoInput{
	padding: 2%;
	border: 3px solid #02AEEB;
	background: #C8F0FC;
	border-radius: 8px
}
.autoInput div label{width: 100%;}
.autoInput p{
	font-size: 90%;
	font-weight: bold;}

.step02_form_table{
	border: 1px solid #CBC9C9;
width: 100%;}
.step02_form_table tr{
	border: 1px dotted #CBC9C9;

}
.step02_form_table td {
	border: none;
	padding: 0 2%;
}
.step02_form_table td.item{
	padding: 0px 5px;
	width: 8%;
}
.step02_form_table td.item img{
	padding: 2px;
	width: 54px;
	height: 54px;
}
.step02_form_table td.itemName{
	padding: 1% 0;
	width: 10%;
	vertical-align: middle;
	line-height: 1.2;
	font-size: 1.3rem;
}
.step02_form_table span.subName{
	font-size: 1.0rem;
}
.step02_form_table td.quantity{
	border-right: 1px dotted #ccc;
	width: 15.5%;
	padding: 1%;
}
.step02_form_table td.quantity input{
	margin: 0 5px;
	background-color: #fff;
	width: 34px;
	height: 34px;
	border: 1px solid #BBB;
	text-align: center;
	vertical-align: middle;
	border-radius: 4px;

}
.step02_form_table td a.button{
	display: inline-block;
	width: 20px;
	height: 20px;
	color: #555;
	font-size: 100%;
	text-align: center;
	text-decoration: none;
	background-image: -webkit-linear-gradient(-90deg,#eee 0,#ddd 100%);
	background-image: linear-gradient(180deg,#eee 0,#ddd 100%);
	border-radius: 4px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.5);
	line-height: 1.2;
	vertical-align: text-bottom;
}
td.lastColumn{line-height: 1.5;}
td.other{padding: 2%;}
td.other textarea{
	margin:2% 0 0;
	width: 100%;}
table.option tr{border: none;}
table.option td{border-right: 1px solid #CBC9C9;
	max-width:  25%;
	font-size: 80%;
	text-align: center;
}
section.sec_sp tr{border: none;}
section.sec_sp td{
	text-align: center;
	border-right: 1px dotted #CBC9C9;
	padding: 0 5% 0 5%;
	font-size: 88%;
}
section.sec_sp td.itemName{width: 20%;}

section.sec_sp .step02_form_table td img{
	padding: 0% 0% 0% 0%;
	width: 30%;
	margin-right:5%;
	float: left;}
section.sec_sp td.quantity{
	border: 1px dotted #CBC9C9;
border-top:none;
border-left:none;
padding-bottom:2%;}
section.sec_sp td span{
	float: left;
	line-height: 1.2;
	padding-right: 3%;
	margin-top: 5%;
	text-align: left;
	font-size: 90%;
		width: 60%;
}
section.sec_sp table.option td{
	padding: 0 1.5%; }

section.sec_sp tr.option-name td{
	padding: 2% 2% 0%!important;}
section.sec_sp .option td img{
	text-align: center;
	float: none;
	width: 100%;
}
section.sec_sp .step02_form_table td a.button{
	width: 40px;
	height: 40px;
	line-height: 2.5;
}
section.sec_sp .step02_form_table td.quantity input{
		width: 40px;
	height: 43px;
	vertical-align: top;
}

.sec_sp{display: none;}







/******レスポンシブ******/

@media (max-width: 870px){
.step02_form_table td.itemName{
	width: 9%;
}
	.step02_form_table td.item{

			padding: 0 1% 0 1%;
	}
	.step02_form_table td.item img{
	padding: 0;
	width: 30px;
	height: 30px;
	}
	.step02_form_table td.quantity{
		padding: 1% 1% 1% 1%;
			width: 16%;
	}

}

@media (max-width: 640px){

	.sec_pc{display: none;}
	.sec_sp{display: block;}
	.person01, .person02, .person03, .person04, .person05, .reset{
		width: 50%;
	}
	table.option td {
		border-right: 1px solid #CBC9C9;
		width: 25%;
		font-size: 80%;
		text-align: center;
		display: table-cell;
	}

}

@media (max-width: 530px){
.sec_sp .step02_form_table td{
	width: 50%;
	display: inline-block;
}
.cardboard .step02_form_table td.itemName{
	width: 30%;
	display: inline-block;
}
.cardboard .step02_form_table td.item{
			display: inline-block;
			padding: 2% 1% 1% 3%;
			width: 20%;
	}
.cardboard .step02_form_table td.item img{
	padding: 0;
	width: 55px;
	height: 55px;
	}
.cardboard .step02_form_table td.quantity{
	padding: 1% 1% 1% 1%;
	width: 40%;
	display: inline-block;
	border: none;

}