body{
	background: #000 url(/common/img/background.jpg) repeat-x 0 -23px;
}
#container{
	font-size: 11px;
}

#container #main{
	width: 840px;
	margin:0 auto;
	text-align: left;
	background: none;
}

.notice{
  margin-bottom: 20px;
  text-align: center;
  color: #aaa;
}
.notice strong{
  color: #E4CE9A;
}
.notice img{
	width: 400px;
	max-width: 100%;
}


.select-area{
  border: 1px solid #555;
}
.select-area .inner{
	position: relative;
  border: 8px solid #252525;
  background: #000;
  padding: 20px 20px 0;
}
.select-area .inner .note{
	position: absolute;
	top:10px;
	left: 50%;
	font-size: 1.1em;
	color: #ccc;
	text-indent: -1em;
}
.maker-select{
  margin-bottom:20px;
  margin-left: auto;
  margin-right: auto;
}

select{
  border: none;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  outline: none;
  vertical-align: middle
}





.main-tabs{
	border: 1px solid #444;
	padding: 30px;
	width: 780px;
	margin: 0 auto 40px;
}


h3.tabs-title{
	text-align: left;
/* 	width: 640px; */
	border-bottom: 1px solid #FFF;
	font-size: 14px;
	font-weight: normal;
	padding-bottom: 5px;
	margin-bottom: 20px;
}
h3.tabs-title span{
	color: #E4CE9A;
	font-size: 12px;
}



h3.table-head{
	text-align: left;
	color: #999;
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 10px;
}


.lineup-table{
	font-size: 11px;
	border-collapse: collapse;
	table-layout: fixed;
	margin-top: 0;
}
.lineup-table thead th{
	background: #333333;
	padding: 5px 2px;
	font-weight: normal;
	text-align: center;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	white-space: nowrap;
}

.lineup-table tbody th,
.lineup-table tbody td{
	border-bottom: 1px  dotted #444;
	padding: 6px 6px;
	font-weight: normal;
}
.lineup-table tbody td{
	color:#AAA;
	border-left: 1px  dotted #222;
}
.lineup-table tbody td span{
	color: #b2a381;
}




#logo{
	text-align: center;
	position: static;
	display: block;
	width: 100%;
	padding-top: 20px;
}
.section{
	display: none;
	position: relative;
}
.section h3{
	color: #E4CE9A;
	font-size: 14px;
	margin-top: 20px;
	margin-bottom: 10px;
}
.color-number{
	position: absolute;
	top:5px;
	right: 0;
}
.selectCarList{
	margin-bottom: 20px;
}
.main-tabs{
	border: none;
}
h3.tabs-title{
	border-bottom: 3px double white;
}
label,select{
	font-size: 13px;
}
select{
	padding: 2px 4px;
}

.lineup-table{
	display: none;
	width: 100%;
}
/*.lineup-table thead th:nth-of-type(1){width: 20%;}
.lineup-table thead th:nth-of-type(2){width: 20%;}
.lineup-table thead th:nth-of-type(3){width: 30%;}
.lineup-table thead th:nth-of-type(4){width: 30%;}*/
.lineup-table strong{display: none;}
.lineup-table tbody th{
	padding: 15px 5px;
}
.lineup-table tbody th,
.lineup-table tbody td{
	word-wrap: break-word;
}
#container .lineup-table tbody td:nth-of-type(3),
#container .lineup-table tbody td:nth-of-type(4),
#container .lineup-table tbody td:nth-of-type(5),
#container .lineup-table tbody td:nth-of-type(6){
  text-align: center;
}
.lineup-table tbody td.lastChild img{
  max-width: 100%;
  height: auto;
}



.other-list{
	margin-top: 40px;
	border-top: 3px double #666;
	padding: 20px 0 10px;
}
.other-list h3{
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: .5px;
  color: #CCC;
  font-size: 1.1em;
  font-weight: normal;
}
.other-list p{
  text-align: center;
}
.other-list p a{
  display: inline-block;
  color: #B4AD9E !important;
  border:1px solid #333;
  border-radius: 4px;
	padding: 4px 5px 4px 15px;
	background: #222 url(/common/img/arrow-gray2.gif) no-repeat 7px center;
	text-decoration: none;
	margin-right: 8px;
	margin-bottom: 8px;
}
.other-list p a:hover{
  border:1px solid #444;
	background: #333 url(/common/img/arrow-gray2.gif) no-repeat 8px center;
}


.copy{
  text-align: center;
  font-size: 10px;
  color: #666;
  padding-top: 1em;
}


#close{
	text-align: center;
	margin-top: 40px;
	padding: 20px 0 10px;
	border-top: 3px double #666;
	background: none;
	font-size: 12px;
}
#close a {
	text-decoration: none;
	background: #333333;
	padding: 8px 10px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#close a:hover {
	background: #666;
}
#container .itemPriceNumber{
  color: #E4CE9A;
}

.pc{display: block;}
.mobile{display: none;}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}




/* モニター幅900px以下 */
@media only screen and (max-width:900px){
	body{
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		-o-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
}

/* iPad 縦 */
@media only screen and (max-width:768px){
	*{ @include box-sizing(border-box);}
	html,body,
	#container,
	#container #main { width: 100%;}
	.main-tabs{ width: 95%; margin: 20px auto; padding: 0;}
	img{ max-width: 100%;}

	.lineup-table{ width: 100%;}
/*
	.lineup-table thead th:nth-of-type(1){width: 10%;}
	.lineup-table thead th:nth-of-type(2){width: 10%;}
	.lineup-table thead th:nth-of-type(5){width: 20%;}
*/
}

/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	.notice{
		margin-bottom: 20px;
	}
	.notice img{
		width: 95%;
	}
	.notice-number{
		width: 90%;
		padding: 10px 10px;
	}
	.notice-number img{
		width: 100%;
	}

	.select-area .inner .note{
		position: static;
		margin-bottom: 1em;
		text-indent: 0;
	}
	.select-area .inner .note br{
		display: none;
	}


	.lineup-table{ width: 100%; word-wrap: break-word;}
  .lineup-table thead th:nth-of-type(1){width: 25%;}
  .lineup-table thead th:nth-of-type(2){width: 20%;}
  .lineup-table thead th:nth-of-type(3){}
  .lineup-table thead th:nth-of-type(4){width: 15%;}
  .lineup-table thead th:nth-of-type(5){width: 20%;}
	h3.table-head{
		margin-bottom: 0;
		border-bottom: none;
	}
	.color-number{
		position: static;
		border-bottom: 1px solid #444;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	#logo{
		padding-top: 10px;
	}
	#logo img{
		max-width: 60%;
	}
	.main-tabs{
		margin-top: 5px;
	}
	h3.tabs-title{
		margin-bottom: 10px;
	}
	.notice{
		margin-bottom: 20px;
	}
	.lineup-table thead{
		display: none;
	}
	.lineup-table tbody tr{
		display: block;
		margin-bottom: 10px;
		padding: 5px 10px;
		background: #222;
		border-top:1px solid #333;
		border-left:1px solid #333;
		-webkit-border-radius: 10px;
		border-radius: 10px;
    position: relative;
	}
	.lineup-table tbody th, .lineup-table tbody td{
	    display:list-item;
	    list-style: none;
	    padding: 0 5px;
	}
	#container .lineup-table tbody td:nth-of-type(2){
		text-align: left;
	}


	.lineup-table tbody th{
		font-weight: bold;
		font-size: 12px;
	}
	.lineup-table tbody th br{
		display: none;
	}
	.lineup-table tbody td{
		color: #888;
	}
	.lineup-table tbody td.lastChild{
		border-bottom: none;
	}
	.lineup-table strong{display: inline; color:#aaa;}
	.lineup-table tbody td:nth-of-type(3) ,
	.lineup-table tbody td:nth-of-type(4) strong{color:#FFCC00; text-align: left !important;}
	.lineup-table tbody td:nth-of-type(5) strong{color:#FFCC00; text-align: left !important;}

	.lineup-table tbody td:nth-of-type(3) ,
	.lineup-table tbody td:nth-of-type(3) strong{color:#FFCC00;}
	.lineup-table tbody td:nth-of-type(4) {color:#FFCC00; text-align: left !important;}
	.lineup-table tbody td:nth-of-type(5) {color:#FFCC00; text-align: left !important;}
	
	.pc{display: none;}
	.mobile{display: block;}


}
/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:320px){

}