ul.brand{
width: 80%;
margin: 50px auto;
}
.brand li{
text-align: center;
}

/* HOVER */
.brand li a {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;    /* 中央揃え */
  text-decoration: none;
  color: #333;            /* 文字色 */
}

/* 画像を重ねるためのコンテナ */
.brand-image {
  position: relative;
  width: 70% !important;            /* 親要素（column_4）に合わせる */
  aspect-ratio: 1 / 1;    /* 正方形を維持（ロゴに合わせて調整） */
  margin-bottom: 10px;    /* 画像とテキストの間隔 */
  
}

.brand-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;    /* ロゴの比率を保つ */
  transition: opacity 0.3s ease;
}

div.box.title,
div.box.title h3{
margin: 0 !important;
padding: 0;
}

/* 画像の切り替え制御 */
.img-default { opacity: 1; z-index: 2; }
.img-hover   { opacity: 0; z-index: 1; }

.brand li a:hover .img-default { opacity: 0; }
.brand li a:hover .img-hover   { opacity: 1; }

/* ブランド名のスタイリング */
.brand li span.title{
  font-weight: bold;
  text-align: center;
  transition: color 0.3s ease;
}

/* ホバー時に文字色を変える場合 */
.brand li a:hover .brand-name {
  color: #000; /* お好みのアクセントカラーに */
}


.scroller-list li {
  /* flex: [伸長] [縮小] [ベース幅] */
  flex: 0 0 12%; 
}



.products-list_box{
padding: 20px;
background: #f4f3ef;
border-radius: 0 5px 5px 5px;
}

ul.list.product{
margin-left: 10px;
}
ul.list.product li{
margin-left: 10px;
}

ul.list.product li p.image a img{
border-radius: 10px;
}
ul.list.product li p.image{
height: auto !important;
}


ul.list.product li p.type,
ul.list.product li h3{
text-align: left !important;
}



.product-list li p.image{
margin-bottom: 1em !important;
border-radius: 5px;
/*height: 150px !important;*/
}
.product-list li{
margin-bottom: 30px !important;
}

ul.car-filter{
margin-bottom: 2em;
position: relative;
  z-index: 10;
}

ul.car-filter li{
list-style: none;
display: inline-block;
margin: 0 .5em;
padding:  10px;
  cursor: pointer;
}
.car-filter li.active,
.car-filter li:hover{
  /*font-weight: bold;}*/
  border-bottom: 1px solid #000;
}

.car-filter button {
  pointer-events: auto;
}

.car-item {
  transition: opacity .3s ease;
}


@media screen and (max-width: 800px) {


ul.brand{
margin-top: 0;
}


.brand-image{
width: 60% !important;
}


/* 外側のコンテナ */
.scroller-container {
  overflow-x: auto; /* 手動スワイプを許可 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* iOSの慣性スクロール */
  width: 100%;
}

/* リスト本体 */
.scroller-list {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  list-style: none;
  /* アニメーション：30秒で左へ。 linearで一定速度、infiniteで無限 */
  animation: scroll-left 30s linear infinite;
}

/* 各アイテムのサイズ固定 */
.scroller-list li {
    /* スマホでは画面幅の約45%にする（2枚＋αが見えるくらい） 
       12%だとスマホでは小さすぎるため、ここで数値を大きくします。
    */
    flex: 0 0 35%; 
    
    /* もし「画像3枚分くらいをチラ見せしたい」なら 30% 程度、
       「1枚をしっかり見せたい」なら 80% 程度に調整してください。
    */
  }

.scroller-list li img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

/* 自動スクロールのアニメーション */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 半分（複製した手前まで）進んだら戻る */
}

/* 指で触れている間はアニメーションを一時停止（スワイプしやすくするため） */
.scroller-container:active .scroller-list {
  animation-play-state: paused;
}


ul.list.product.column_4 {
margin-left: 0;
}

ul.list.product.column_4 li{
width: 45%;
}



.product-list li p.image{
height: 150px !important;
}
.product-list li{
margin-bottom: 20px !important;
}






.products.mazda ul.list.product li h3, .products.subaru ul.list.product li h3, .products.toyota ul.list.product li h3, .products.nissan ul.list.product li h3, .products.mitsubishi ul.list.product li h3, .products.honda ul.list.product li h3, .products.suzuki ul.list.product li h3, .products.daihatsu ul.list.product li h3, .wheels ul.list.product li h3{
font-size: 12px !important;
}
.product-list li p.image{
margin-bottom: 1em !important;
}


}