.top {
  --bg: #000;                /* 黒帯背景 */
  --accent: #ff8c00;         /* アクセント */

  /* カードまわり */
  --card-radius: 18px;
  --card-pad: 10px;
  --img-width-pc: 65%; 
  --img-width-sp: clamp(116px, 38vw, 130px); /* SP 幅の既定 */

  /* 画像ボックス */
  --img-aspect-w: 2;         /* 画像比率 2:1（PNG 288x144） */
  --img-aspect-h: 1;
  
  /* 画像ボックスの内側余白（上下・左右で独立） */
  --img-pad-top: 6px;
  --img-pad-x: 10px;
  --img-pad-bottom: 14px; 

  --hover-scale: 1.18;       /* ホバー時の拡大率 */
  /* ホバー時の“逃げ”余白（上下別） */
  --hover-bleed-top: 8px;
  --hover-bleed-bottom: 18px;
  --hover-bleed-x: 12px;
  --hover-box-scale: 1.06; 

  /* ラベル */
  --label-fs-pc: 1.5rem;
  --label-fs-sp: 1rem;
  --label-lh-pc: 1.5;
  --label-lh-sp: 1.25;
}

/* ========== ヒーロー / イントロ ========== */
.top-hero { padding: 24px 0; text-align: center; }
.top-hero .lead { color: #555; }

/* 黒帯（ヒーロー／カテゴリ）をフルブリード */
body.top .hero-dark,
body.top .top-cats {
  background: var(--bg);
  color: #fff;
  position: relative;
  left: 50%; right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* カテゴリ帯 */
.top .top-cats { padding: 20px 0; }
.top .text-orange { color: var(--accent) !important; }
.top .text-muted-80 { color: rgba(255,255,255,.7) !important; }

/* 白帯（一覧ブロック） */
body.top .top-light {
  background: #fff;
  color: #111;
  padding: 24px 0;
}

/* ヒーロー内ロゴ（アニメ） */
.top .hero-logo {
  --site-fs-min: 24px;
  --site-fs-ideal: 2.2vw;
  --site-fs-max: 30px;
  --site-font-style: italic;
  --site-letter-spacing: .12em;
  position: relative;
  display: inline-block;
  --car-min: 200px; --car-ideal: 20vw; --car-max: 450px;
}
.top .hero-logo > .site-name {
  margin-top: .5rem;
  font-weight: 800;
  font-size: clamp(var(--site-fs-min), var(--site-fs-ideal), var(--site-fs-max));
  font-style: var(--site-font-style);
  letter-spacing: var(--site-letter-spacing);
  color: var(--accent);
  text-align: center;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}
.top .hero-logo > .site-name.is-visible { opacity: 1; transform: none; }
.top .car-logo {
  width: clamp(var(--car-min), var(--car-ideal), var(--car-max));
  height: auto; display: block;
  transform: translateX(120%);
  animation: carSlideIn var(--car-dur,1.8s) cubic-bezier(.25,.9,.25,1) forwards;
  will-change: transform;
}
@keyframes carSlideIn { to { transform: translateX(0); } }
.hero-dark .display-6 { background: var(--bg); text-align: center; }
.hero-dark .hero-logo { margin-inline: auto; }

/* カテゴリボタン */
body.top {
  --cat-font-size: 1.3rem;
  --cat-pad-y: .45rem;
  --cat-pad-x: 1rem;
}
@media (max-width:576px){
  body.top { --cat-font-size: 1.1rem; }
}
.top-cats #category-group { justify-content: center; }
body.top .top-cats #category-group .btn-cat {
  color: #fff !important;
  background: transparent !important;
  border: 2px solid transparent !important;
  font-size: var(--cat-font-size);
  padding: var(--cat-pad-y) var(--cat-pad-x);
  border-radius: 999px;
  font-weight: 700; line-height: 1;
  cursor: pointer;
}
body.top .top-cats #category-group .btn-cat:hover,
body.top .top-cats #category-group .btn-cat:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset;
  outline: none;
}
body.top .top-cats #category-group .btn-cat.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent);
}
.top .cat-heading { font-size: 1.5rem; letter-spacing: .06em; }
.cat-heading .hero-marker { color: var(--accent); }

/* ========== カード（共通） ========== */
.top-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  text-align: center;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.top-card:not(.car-tile):hover { box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.top-card:not(.car-tile):focus-within {
  transform: translateY(-2px);
  border-color: #ddd;
}

/* ラベル */
.top-card .car-name{
  margin-top: 10px;
  font-weight: 700;
  font-size: var(--label-fs-pc);
  line-height: var(--label-lh-pc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* 超長文だけ省略（PC） */
}

/* SPは2行まで許容 */
@media (max-width:576px){
  .top-card .car-name{
    font-size: var(--label-fs-sp);
    line-height: var(--label-lh-sp);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* タグ（共通） */
.top-card .tag{
  display: inline-block;
  font-size: .75rem;
  color: #555;
  background: #f6f6f6;
  border-radius: 99px;
  padding: .15rem .5rem;
}

/* ========== TOP専用カード（画像だけホバー）：.top-card.car-tile ========== */

/* 枠（カード全体）は決して動かさない */
.top-grid a:hover .top-card.car-tile,
.top-card.car-tile:hover,
.top-card.car-tile:focus,
.top-card.car-tile:focus-within {
  transform: none !important;
  box-shadow: none !important;
  border-color: #eee !important;
}

/* 画像ボックス（通常時） */
.top-card.car-tile .car-image{
  aspect-ratio: var(--img-aspect-w) / var(--img-aspect-h); /* 2:1 */
  width: var(--img-width-pc);
  margin-inline: auto;
  background: #fff;
  display: grid; place-items: center;
  padding:
    clamp(var(--img-pad-top), 2.5vw, calc(var(--img-pad-top) + 2px))
    var(--img-pad-x)
    clamp(var(--img-pad-bottom), 3.5vw, calc(var(--img-pad-bottom) + 4px));
  overflow: hidden; 
  border-radius: var(--card-radius);
  transition: transform .18s ease, box-shadow .18s ease, padding .18s ease, margin .18s ease;
  will-change: transform, box-shadow;
}

@media (max-width:576px){
  .top-card.car-tile .car-image{
    width: var(--img-width-sp);
  }
}

/* 画像だけ浮かせる */
.top-card.car-tile:hover .car-image,
.top-grid a:focus-visible .top-card.car-tile .car-image{
  transform: translateY(-4px) scale(var(--hover-box-scale));
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
  position: relative;
  z-index: 1;
}

/* 拡大時に切れないよう“逃げ”余白を付与（外寸は維持） */
.top-card.car-tile:hover .car-image,
.top-card.car-tile:focus-within .car-image{
  padding-top:    calc(clamp(var(--img-pad-top),    2.5vw, calc(var(--img-pad-top) + 2px)) + var(--hover-bleed-top));
  padding-right:  calc(var(--img-pad-x)    + var(--hover-bleed-x));
  padding-bottom: calc(clamp(var(--img-pad-bottom), 3.5vw, calc(var(--img-pad-bottom) + 4px)) + var(--hover-bleed-bottom));
  padding-left:   calc(var(--img-pad-x)    + var(--hover-bleed-x));
  margin-top:     calc(-1 * var(--hover-bleed-top));
  margin-right:   calc(-1 * var(--hover-bleed-x));
  margin-bottom:  calc(-1 * var(--hover-bleed-bottom));
  margin-left:    calc(-1 * var(--hover-bleed-x));
}

/* 画像本体 */
.top-card.car-tile .car-image img,
.top-card.car-tile .car-image .car-ico{
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  transform: scale(1);
  transform-origin: 50% 70%;
  object-position: 50% 40%;
  transition: transform .18s ease;
}
.top-card.car-tile:hover .car-image img,
.top-card.car-tile:hover .car-image .car-ico,
.top-card.car-tile:focus-within .car-image img,
.top-card.car-tile:focus-within .car-image .car-ico{
  transform: scale(var(--hover-scale));
}

/* キーボード操作時のリングは画像ボックスにだけ */
.top-grid a:focus-visible .top-card .car-image{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--card-radius);
}

/* 行の中央寄せ（Bootstrapのrowはflex） */
#car-container { justify-content: center; }