@charset "utf-8";
/*===============================================
●共通
===============================================*/

/* setImage
---------------------------------------- */
#setImage span {
	display:block;
	width:100%;
	height:133%;
	border:#eee 1px solid;
	box-sizing:border-box;
	background-position:center center!important;
	background-repeat:no-repeat!important;
	background-size:contain!important;
}
#setImage span:after {
	content:"";
	display:block;
	width:100%;
	padding-top:133%;
}

/* setDetail
---------------------------------------- */
/* tabList */
.tabList li a {
	display:block;
	font-weight:bold;
	line-height:2.5em;
	text-align:center;
	text-decoration:none;
	color:#000;
	background-color:#e5e5e5;
	padding:0 0.5em;
}
.tabList li a:hover,
.tabList li a.current {
	color:#fff;
	background-color:#000;
}

/* priceBox */
.priceBox {
	margin-bottom:0.85em;
	background-color:#ffeef8;
}
.priceBox td {
	font-weight:bold;
	color:#ff0000;
	line-height:2.8em;
	padding:0 0.85em;
}
.priceBox td span {
	font-size:1.15em;
}

/* .tabList */
.tabList {
	font-size:0;
	margin-bottom:10px;
}
.tabList li {
	display:inline-block;
	font-size:11px;
	text-align:center;
	margin:0 0.5em 0.5em 0;
}

/* tabBox tabImage */
.tabBox .tabImage span {
	display:block;
	width:100%;
	height:100%;
	border:#eee 1px solid;
	box-sizing:border-box;
	background-position:center center!important;
	background-repeat:no-repeat!important;
	background-size:contain!important;
}
.tabBox .tabImage span:after {
	content:"";
	display:block;
	width:100%;
	padding-top:133%;
}

/* tabBox */
.tabBox {
	display:none;
}
#tab01 {
	display:block;
}
.tabBox .code {
	margin-bottom:0.5em;
}
.tabBox .code span {
	color:#fff;
	padding:0 0.3em;
	background-color:#b2b2b2;
}
.tabBox h3 {
	font-weight:bold;
	font-size:1.15em;
	margin-bottom:0.5em;
}

/* tabBox spec */
.tabBox .spec {
	margin-bottom:0.5em;
}
.tabBox .spec th,
.tabBox .spec td {
	padding:0.3em 0.7em 0.3em 0;
	vertical-align:middle;
	border-bottom:#ccc 1px dashed;
}
.tabBox .spec th {
	line-height:2.2em;
	width:5em;
}
.tabBox .spec td select {
	width:100%;
}
.tabBox .spec td {
	text-align:right;
}
.tabBox .spec .saPrice th,
.tabBox .spec .saPrice td {
	 color:#ff0000;
}
.tabBox .spec .mbPrice th,
.tabBox .spec .mbPrice td {
	 color:#ff5f00;
}
.tabBox .spec .saPrice td,
.tabBox .spec .mbPrice td {
	text-align:right;
}
.btnTable td div button {
	width:100%;
}

/*===============================================
●画面の横幅が729px以下
===============================================*/
@media screen and (max-width: 729px){
	
	/* setImage
	---------------------------------------- */
	#setImage {
		margin-bottom:0.85em;
	}
	
	.tabBox {
		margin-bottom:1.5em;
	}
	.tabInner,
	.tabBox .tabImage {
		margin-bottom:0.85em;
	}
	.tabBox .code {
		font-size:0.8em;
		margin-bottom:0.5em;
	}
	
	/* btnTable */
	.btnTable td {
		width:100%;
		display:block;
		margin-bottom:0.85em;
		box-sizing:border-box;
	}
}

/*===============================================
●画面の横幅が730px以上
===============================================*/
@media screen and (min-width: 730px){
	
	/* setImage
	---------------------------------------- */
	#setImage {
		width:42%;
		float:left;
	}
	
	/* setDetail
	---------------------------------------- */
	#setDetail {
		width:55%;
		float:right;
	}
	
	/* tabBox */
	.tabBox {
		margin-bottom:2.8em;
	}
	.tabInner {
		margin-bottom:1.5em;
	}
	
	/* tabBox tabImage */
	.tabBox .tabImage {
		width:40%;
		float:left;
		box-sizing:border-box;
	}
	.tabBox .tabDetail {
		width:55%;
		float:right;
	}
	
	/* btnTable */
	.btnTable {
		border-collapse:separate;
		border-spacing:1em 0;
	}
	.btnTable td {
		width:50%;
		vertical-align:middle;
	}
	
	/* btnBlack */
	.btnBlack a {
		width:420px;
		font-size:16px;
		letter-spacing:1px;
		padding:0;
		margin:0 auto;
		line-height:50px!important;
		height:50px!important;
	}

}