@charset "utf-8";

/* ==================================
brandlist.css
================================== */
#brandlist #contents {
  padding-top:30px;
}

/* ==================================
brandlist-nav
================================== */
#brandlist .tab-list {
  width:1000px;
  margin:0 auto;
  font-size:0;
}
#brandlist .tab-list li {
  display:inline-block;
  font-size:16px;
}
#brandlist .tab-list a {
  display:block;
  width:225px;
  padding:15px 0;
  background:#757575;
  color:#fff;
  text-align:center;
}
#brandlist .tab-list a:hover {
  background:#999;
}
#brandlist .tab-list .active a {
  background:#000;
}
#brandlist .tab-list .active a:hover {
  background:#333;
}

/* ==================================
brandlist-nav
================================== */
#brandlist .brandlist-nav {
  background:#000;
  color:#fff;
}
#brandlist .brandlist-nav .inner {
  width:1000px;
  margin:0 auto;
  padding:40px 0 50px;
}
#brandlist .brandlist-nav .inner {
  width:1000px;
  margin:0 auto;
  padding:40px 0 50px;
}
#brandlist .brandlist-nav .tab-header {
  display:none;
}
#brandlist .brandlist-nav .tab-header:first-child {
  display:block;
}
#brandlist .brandlist-nav ul {
  width:672px;
  font-size:0;
}
#brandlist .brandlist-nav li {
  display:inline-block;
  margin:10px 0 0 10px;
  font-size:16px;
}
#brandlist .brandlist-nav li a,
#brandlist .brandlist-nav li span {
  display:block;
  width:36px;
  line-height:36px;
  border:1px solid #fff;
  text-align:center;
  background:#000;
  color:#fff;
}
#brandlist .brandlist-nav span {
  opacity:.5;
}
#brandlist .brandlist-nav a:hover {
  background:#666;
}
#brandlist .brandlist-nav li:last-child a,
#brandlist .brandlist-nav li:last-child span {
  width:84px;
}
#brandlist .tab-header li:nth-child(1),
#brandlist #brandlist-alphabet li:nth-child(15) {
  margin-left:0;
}

/* ==================================
brandlist-detail
================================== */
.brandlist-detail {
  width:1000px;
  margin:0 auto;
  padding:40px 0;
}
.brandlist-detail .tab-body {
  display:none;
}
.brandlist-detail .tab-body:first-child {
  display:block;
}
.brandlist-detail .ttl {
  margin-bottom:30px;
  border-bottom:1px solid #bdbdbd;
}
.brandlist-detail .ttl + .ttl {
  margin-top:60px;
}
.brandlist-detail .ttl span {
  padding-right:5px;
  font-size:40px;
}
.brandlist-detail ul {
  margin-bottom:30px;
}
.brandlist-detail li {
  float:left;
  width:176px;
  margin:25px 0 0 30px;
}
.brandlist-detail li:nth-child(5n+1) {
  clear:both;
  margin-left:0;
}
.brandlist-detail li:nth-child(-n+5) {
  margin-top:0;
}
.brandlist-detail li a,
.brandlist-detail li a span {
  display:block;
  width:100%;
  color:#757575;
  font-size:12px;
  word-wrap:break-word;
}
.brandlist-detail li a img + span {
  color:#000;
  font-size:14px;
}
.brandlist-detail li a:hover span {
  color:#aaa;
}
.brandlist-detail li a:hover img + span {
  color:#757575;
}
.brandlist-detail li a img {
  margin-bottom:10px;
}

/* ==================================
brandlist / breadcrumbs
================================== */
#brandlist #breadcrumbs li > h1 {
  display: inline-block;
  font-weight: normal;
}

/* ==================================
clearfix
================================== */
#brandlist .brandlist-nav .inner:after,
.brandlist-detail ul:after {
  content:"";
  clear:both;
  display:block;
}