@charset "UTF-8";
/* CSS Document */
/* path */
#path{
  margin-bottom: 0;
}
#path h1 {
  display: inline-block;
  font-size: 11px;
  font-weight: lighter;
  white-space: nowrap;
}

#container2{
  overflow: hidden;
  width: 100%;
}

#main-content{
  color: #333;
  font-family: "ŸàƒSƒVƒbƒN", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "‚l‚r ƒSƒVƒbƒN", sans-serif;
  font-weight: 500;
  margin: 0 auto;
  width: 970px;
}
#main-content a,
#main-content a img{
  transition: .3s;
}

/* section */

.brand-list{
  margin: 50px 0 0 0;
  width: 100%;
}

.brand-list li{
  float: left;
  height: 400px;
  margin: 0 20px 50px 0;
  overflow: hidden;
  width: 310px;
}
.brand-list li:nth-of-type(3n){
  margin-right: 0;
}
.brand-list li a{
  color: #333;
  display: block;
  font-size: 12px;
  line-height: 1.8em;
}
.brand-list li a span{
  display: block;
  margin: 10px 0 0 0;
  text-align: justify;
}
.brand-list li img{
  width: 100%;
}




/* under link */
.under_link{
  padding: 30px 0 50px 0;
  text-align:center;
  width: 100%;
}
.under_link li{
  display: inline-block;
  margin: 0 20px 20px auto;
  text-align: center;
  transition: .3s;
  width: 227px;
}
.under_link li a{
  background: #eee;
  color: #574945;
  display: block;
  font-size: 93%;
  padding: 14px 0;
}


/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
@media screen and (max-width: 640px) {
/* window??640px?È???Å????*/
#path {
  width: 300%;
}
#path h1{
  font-size: 75%;
}
#main-content{
  padding: 0;
  width:100%;
}

/* SMP ection */

.title-box img{
  width: 100%;
}

.brand-list{
  margin: 40px 0 0 0;
}

.brand-list li{
  height: 75vw;
  margin: 0 0 10px 2%;
  width: 47%;
}
.brand-list li a{
  color: #333;
  display: block;
  font-size: 10px;
  line-height: 1.4em;
}
.brand-list li a span{
  box-sizing: border-box;
  display: block;
  margin: 10px 0 0 0;
  padding: 0 5px;
  text-align: justify;
}
.brand-list li img{
  width: 100%;
}


/* SMP under link */
ul.under_link {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  width:90%;
}
ul.under_link li {
  box-sizing: border-box;
  margin-bottom: 5px;
  margin-right: 0;
  width: 100%;
}


}

@media screen and (min-width: 641px) {
/* hover settings */

.brand-list li a:hover img{
  opacity: .5;
}
.brand-list li a:hover{
  color: #aaa;
}
/* HOVER under_link */
ul.under_link li a:hover{
  background-color: #666;
  color: #fff;
  font-size: 93%;
}
ul.under_link li a:hover b{
  color: #fff;
}

}