body{
	background: #000 url(/common/img/background.jpg) repeat-x 0 -20px;
}
#container #main{
	background: none;
	width: 960px;
}
#logo{
	text-align: center;
	position: static;
	display: block;
	width: 100%;
	padding-top: 20px;
}

#logo img{
	max-width:235px;
}

.design-list{
  width: 961px;
  padding-top: 10px;
  margin-bottom: 40px;
}
.design-list li{
  float: left;
  width: 480px;
}
.design-list li img{
  max-width: 98%; 
  margin-bottom: 5%;
}
.design-list li:nth-child(1),
.design-list li:nth-child(3){
  border-right: 1px solid #333;
}
.design-list li:nth-child(1),
.design-list li:nth-child(2){
  border-bottom: 1px solid #333;
}
.design-list li:nth-child(odd) img{
  margin-right: 2%;
}
.design-list li:nth-child(even) img{
  margin-left: 2%;
}


.notice{
  text-align: left;
  margin-bottom: 60px;
}
.notice img{
	width: 750px;
	height: auto;
	text-align: left;
}
.notice-number{
	border: 1px solid #444;
	background: black;
	width: 920px;
	margin: 0 auto;
	padding: 20px 20px;
	margin-bottom: 30px;
	text-align: center;
}
.notice-number img{
	width: 830px;
	margin-bottom: 20px;
}
.notice-number p{
	width: 100%;
	max-width: 830px;
	margin: 0 auto 0;
	text-align: left;
	color: #aaa;
	font-size: 12px;
}
.notice-ordermade {
  padding: 40px 20px;
}
.notice-ordermade p{
  font-size: 1.4em;
}

.section{
	display: none;
	position: relative;
}
.section h3{
	color: #E4CE9A;
	font-size: 13px;
	border-bottom: 1px solid #444;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
#container .grade-search{
	position: absolute;
	right: 0;
	top: 55px;
	font-size: 1.1em;
}
#container .grade-search a{
	text-decoration: none;
}
#container .grade-search a:hover{
	color: #FFF;
	text-decoration: underline;
}
#container .grade-search a i{
	color: #A3916D;
}

.color-number{
	position: absolute;
	top:5px;
	right: 0;
}
.selectCarList{
	margin-bottom: 15px;
}
.color-number{
	text-align: left;
}
.main-tabs{
	border: none;
	width: 100%;
}
h3.tabs-title{
	border-bottom: 3px double white;
}
label,select{
	font-size: 13px;
}
select{
	padding: 2px 4px;
	font-size: 13px;
  border: none;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
}

.notice-message {
  text-align: center;
  padding: 50px;
  background: #191919;
  font-size: 18px;
  color: #E4CE9A;
}

.lineup-table{
	display: none;
	width: 100%;
}
.lineup-table thead th:nth-of-type(1){width: 95px;}
.lineup-table thead th:nth-of-type(2){width: 95px;}
.lineup-table thead th:nth-of-type(3){width: 60px;}
.lineup-table thead th:nth-of-type(4){width: 40px;}
.lineup-table thead th:nth-of-type(5){width: 155px;}
.lineup-table thead th:nth-of-type(6){width: 140px;}
.lineup-table thead th:nth-of-type(7){width: 140px;}
.lineup-table thead th:nth-of-type(8){width: 90px;}
.lineup-table thead th:nth-of-type(9){width: 90px;}
.lineup-table strong{display: none;}
.lineup-table tbody td:nth-of-type(7){
	color:#FFCC00;
	text-align: center;
}
.lineup-table tbody td img{
	max-width: 100%;
}
.lineup-table tbody th{
	padding: 15px 5px;
}
.lineup-table tbody td:nth-of-type(1),
.lineup-table tbody td:nth-of-type(2){
	word-wrap: break-word;
}
#container .lineup-table tbody td:nth-of-type(3),
#container .lineup-table tbody td:nth-of-type(7){
	text-align: center;
}


.lineup_index{
}
.lineup_index a{
  text-decoration: none;
}
.lineup_index a:hover{
  text-decoration: underline;
}

.lineup-list {
  text-align: left;
  width: 830px;
  max-width: 100%;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}
.lineup-list .inner{
  float: left;
  width: 48%;
}
.lineup-list .inner:first-child{
  margin-right: 4%;
}
.lineup-list h3{
  margin-bottom: 10px;
  overflow: hidden;
}
.lineup-list ul{
  margin-bottom: 20px;
  margin-left: 16px;
}
.lineup-list li{
  font-size: 11px;
}
.lineup-list a{
  background: url(/common/img/arrow-gray2.gif) no-repeat scroll 3px 5px transparent;
  margin-bottom: 3px;
  padding-left: 12px;
  font-size: 1.1em;
  color: #DDD;
  display: block;
}
.lineup-list a:hover{
  background: url(/common/img/arrow-gray2.gif) no-repeat scroll 4px 5px transparent;
  color: #FFF;
}

p.btn {
  font-size: 1.4em;
  text-align: center;
}
p.btn a {
  display: inline-block;
  text-decoration: none;
  background: #222;
  padding: 15px 25px;
  border: 1px solid #333;
  color: #EEE;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
p.btn a span {
  font-size: 11px;
}
p.btn a:hover {
  background: #333;
}
p.btn.btn-pdf a {
  background: #222 url(/seatcover/list/icon-pdf.png) no-repeat 20px center;
  padding-left: 53px;
  width: 290px;
  max-width: 100%;
}
p.btn.btn-pdf a:hover {
  background-color: #333;
}




.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;
}
label, select {
  font-size: 14px;
  vertical-align: baseline;
}

.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%;}

  .design-list{
    width: 100%;
  }
  .design-list li{
    width: 49.9%;
  }
  .notice-number{
    width: auto;
  	max-width: 100%;
  }
  .notice img{
    width: 100%;
  	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%;}
	.lineup-table thead th:nth-of-type(6){width: 20%;}
	.lineup-table thead th:nth-of-type(7){width: 8%;}
}

/* スマートフォン 横(ランドスケープ) */
@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%;
	}
  .notice-number p{
  	font-size: 11px;
  	line-height: 1.3;
  	text-indent: -1em;
  	margin: 10px 1em;
  	width: 97%;
  }
	#container .grade-search{
		position: inherit;
		top: auto;
		left: auto;
		margin-bottom: 1.5em;
	}
	.lineup-table{ width: 100%; word-wrap: break-word;}
	.lineup-table thead th:nth-of-type(1){width: 15%;}
	.lineup-table thead th:nth-of-type(2){width: 15%;}
	.lineup-table thead th:nth-of-type(3){width: 10%;}
	.lineup-table thead th:nth-of-type(4){width: 5%;}
	.lineup-table thead th:nth-of-type(5){width: 20%;}
	.lineup-table thead th:nth-of-type(6){width: 20%;}
	.lineup-table thead th:nth-of-type(7){width: 15%;}
	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;
	}
	h2.main-image{
  	margin-bottom: 15px;
	}
	h3.tabs-title{
		margin-bottom: 10px;
	}
	.design-list {
  	margin-top: 0;
	}
  .design-list li{
    width: 100%;
    border: none !important;
    text-align: center;
  }
  .design-list li img{
    max-width: 95%;
  }
  .design-list li:nth-child(odd) img{
    margin-right: 0;
  }
  .design-list li:nth-child(even) img{
    margin-left: 0;
  }

	.notice{
		margin-bottom: 40px;
	}
	
	.notice-message{
  	padding: 20px;
  	font-size: 14px;
	}
	
	.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;
	}
	.lineup-table tbody th, .lineup-table tbody td{
	    display:list-item;
	    list-style: none;
	    width: 95%;
	    padding: 0 5px;
	}
	.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(7) strong{color:#FFCC00;}
  .lineup-table tbody td:nth-of-type(3),
  .lineup-table tbody td:nth-of-type(7){
  	text-align: left !important;
  }
	.lineup-table tbody td.empty:last-child{
		display: none;
	}
	.lineup-table tbody td img {
		max-width: 70%;
		display: block;
		margin: 10px auto;
	}
  
  

  .lineup-list{
    width: 90%;
  }
  .lineup-list .inner{
    width: 100%;
    float: none;
  }
  .lineup-list h3 img{
    max-width: inherit;
    width: auto;
    height: 15px;
  }
  .lineup-list li{
    line-height: 1.3;
    margin-bottom: 8px;
  }


  p.btn{
    max-width: 100%;
    font-size: 1.2em;
  }
  p.btn.btn-pdf a{
    padding: 7px 15px 7px 60px;
    max-width: 100%;
    width: auto;
  }

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


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

}