/* category-tabs.css (v2)
   乗用車 / 商用車 / バス の小見出し＆ページ内リンクタブ
   ※固定ヘッダーがある場合は --fixed-header-h を調整してください
*/
:root{
  --fixed-header-h: 0px;
  --tabs-h: 44px;
}

/* ▼ タブ（スライダー直下） */
.category-tabs{
  position: sticky;
  top: var(--fixed-header-h);
  z-index: 50;

  background: #fff;
  padding: 10px 12px;
  border-bottom: 1px solid #e6e6e6;

  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.category-tabs__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tabs-h);
  padding: 0 18px;

  background: #1D7ED6;
  border: 2px solid #155FA3;
  border-radius: 6px;

  color: #FFFFFF;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* 触った時だけ分かるように（状態保持はしない） */
.category-tabs__item:hover,
.category-tabs__item:focus-visible{
  filter: brightness(0.92);
  outline: none;
}

/* ▼ カテゴリ見出し（“効いてる感”を強める） */
.category-heading{
  margin: 26px 0 14px;
  padding: 10px 14px;
  color: #FFFFFF;

  display: inline-block;
  background: #1D7ED6;
  border: 2px solid #155FA3;
  border-radius: 8px;

  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

/* ▼ 商用車が未追加の時の注意文 */
.category-note{
  margin: 10px 0 18px;
  font-size: 14px;
  opacity: 0.85;
}

/* ▼ アンカー遷移時に上部UIに隠れないようにする */
.category-section{
  scroll-margin-top: calc(var(--fixed-header-h) + var(--tabs-h) + 22px);
}

/* スマホ最適化 */
@media (max-width: 768px){
  .category-tabs{
    justify-content: flex-start;
    padding: 8px 10px;
    gap: 8px;
  }
  .category-tabs__item{
    height: 40px;
    padding: 0 14px;
  }
  .category-heading{
    font-size: 20px;
    padding: 9px 12px;
  }
}

/* PCでタブを大きく・同幅にする */
@media (min-width: 769px){
  .category-tabs{
    padding: 16px 12px;
    gap: 14px;
  }
  .category-tabs__item{
    flex: 1 1 0;          /* 3つを均等割り */
    max-width: 220px;     /* 広すぎ防止 */
    height: 52px;
    font-size: 18px;
    border-radius: 8px;
  }
}

/* 見出しが画像に潜るのを防ぐ + 帯を右端まで伸ばす */
.category-heading{
  position: relative;
  z-index: 5;          /* これで「後ろに行く」見え方を止める */
  display: block;
  clear: both;         /* float系の影響を受けてる場合の保険 */
  margin: 18px 0 14px;
  padding: 10px 16px;
  color: #FFFFFF;
  background: transparent;  /* 背景は下の擬似要素で作る */
  border: none;             /* 枠も擬似要素側へ */
}

/* “帯”を画面右端（実質100vw）まで伸ばす */
.category-heading::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;

  left:0;
  right:0;          /* ← これで親要素の幅いっぱい。vwを使わない */

  background:#1D7ED6;
  border:2px solid #155FA3;
  border-left:none;
  border-right:none;

  z-index:-1;
  border-radius:0;
}

/* ページ内リンクをスムーズスクロールに */
html{
  scroll-behavior: smooth;
}

/* 動きが苦手な人の設定が有効なら無効化（今どきの配慮） */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}