@charset "utf-8";
#bread {margin-bottom: 20px;}
#bread ul li {
	color: #000;
	font-size: 1.2em;
	padding-right: 20px;
	margin-right: 5px;
	display: inline-block;
	background: url(images/arrow-bread.gif) 100% 50% no-repeat;
}
#bread ul li:last-child {
	background: none;
	margin-right: 0;
	padding-right: 0;
}
#bread ul li a {color: #000;}
#bread ul li a:hover {text-decoration: none;}

#contents h1 {background: url(images/h-line.gif) 0 50% repeat-x;}
#contents h1 span {
	display: inline-block;
	background-color: #fff;
}

#brandList .wrapBrand {background: url(images/line01.gif) 0 bottom repeat-x;}
#brandList .wrapBrand::after {
	content: '';
	clear: both;
}
#brandList .txt,
#brandList .linkBrand,
#brandList .linkBrand_out {font-size: 1.6em;}
#brandList .linkBrand a,
#brandList .linkBrand_out a {
	color: #fff;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	height: 32px;
	line-height: 34px;
	min-width: 190px;
	background:#987748;
	-webkit-background-size: 22px 18px;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
}
#brandList .linkBrand_out a {
	padding-left: 20px;
	background:#987748  url(images/icon-link.gif) 20px 50% no-repeat;
	background-size:22px 18px ;
}
#brandList .img a:hover,
#brandList .linkBrand a:hover,
#brandList .linkBrand_out a:hover {opacity: 0.7;}

#brandList .btn-center {
	text-align: center;
}
#brandList .btn-center li {
	display: inline-block;
	font-size: 1.5em;
}
#brandList .btnBack a {
	color: #000;
	text-decoration: none;
	display: block;
	padding: 6px 30px;
	min-width: 200px;
	background-color: #dcd3bc;
}
#brandList .btnBack a span {
	display: inline-block;
	min-height: 15px;
	padding-left: 17px;
	background: url(images/btn02.png) 0 50% no-repeat;
}
#brandList .btnBack a:hover {opacity: 0.7;}



/** min 768px **/
@media screen and (min-width:768px) {
	#bread ul,
	#contents {
		width: 960px;
		margin: auto;
		display: block;
	}
	#bread ul {padding: 10px 5px;}
	#contents .section {padding:0 5px;}
	#brandList {margin: 10px 0 50px;}

	#contents h1 {margin-bottom: 35px;}
	#contents h1 span {padding-right: 30px;}
	#contents > .section:first-of-type  h1 img {width: 230px;}

	#brandList .wrapBrand {
		padding-bottom: 25px;
		margin-bottom: 27px;
	}
	#brandList .wrapBrand .img {
		float: left;
	}
	#brandList .wrapBrand .txt,
	#brandList .wrapBrand .linkBrand,
	#brandList .wrapBrand .linkBrand_out {padding:0 15px 0 400px;}
	#brandList .wrapBrand .txt {margin-bottom: 15px;}
}/** // min 768px **/

/** min 961x **/
@media screen and (min-width:961px) {
	#bread ul,
	#contents {width: 100%;}
}/** // min 961x **/

/** min 1164px **/
@media screen and (min-width:1164px) {
	#bread ul,
	#contents {width: 1164px;}
	#contents .section {padding:0;}
}/** // min 1164px **/
/** min 1164px **/
@media screen and (min-width:1165px) {
	#bread ul {padding: 10px 0px;}
	#brandList {margin: 10px 0px 50px;}
}


/** max 767px **/
@media screen and (max-width:767px) {
	#bread {padding:10px;}
	#contents .section .wrap {padding:0 10px;}
	#brandList {padding: 10px 0 40px;}
	#contents h1 {
		text-align: center;
		margin-bottom: 25px;
		padding-bottom: 5px;
	}
	#contents h1 span {padding:0 30px;}
	#contents > .section:first-of-type  h1 img  {width: 186px;}

	#brandList .wrapBrand {
		padding-bottom: 30px;
		margin-bottom: 30px;
	}
	#brandList .wrapBrand .img,
	#brandList .wrapBrand .txt {margin-bottom: 15px;}

}/** // max 767px **/

/** max 610x **/
@media screen and (max-width:610px) {
}

/** max 540x **/
@media screen and (max-width:540px) {
	#contents > .section:first-of-type  h1 img {width: 150px;}
}