/* ===== Carousel base ===== */

#footer_case-carousel

.case-carousel {
  --card-w: 320px;
  --gap: 16px;
  position: relative;
  padding: 24px 0;
}

.case-carousel__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:0 16px 12px;
}

.case-carousel__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:var(--card-w);
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:8px 56px;
  scroll-padding-inline:56px;
}

.case-carousel__card{
  scroll-snap-align:start;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
}

/* サムネイル画像表示用 */
.thumb{
  position: relative;
  overflow: hidden; /* はみ出しを隠す */
}

.thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;   /* 枠に合わせてトリミング */
  object-position: center;
}

.thumb{aspect-ratio:16/9;background:#e5e7eb}
.body{padding:12px;display:grid;gap:8px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:12px;padding:4px 8px;border-radius:999px;background:#f1f5f9}
.title{font-size:16px}
.meta{font-size:13px;color:#475569}
.result{font-weight:600;font-size:13px}

/* Arrow buttons */
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  cursor:pointer;
}
.carousel-btn.left{left:8px}
.carousel-btn.right{right:8px}
.carousel-btn:disabled{opacity:.3}

/* Responsive */
@media(max-width:768px){
  .case-carousel{--card-w:78vw}
  .carousel-btn{display:none}
}


/* スクロールボタンを最前面に */
.carousel-btn{
  z-index: 10;
}

/* =========================
   Carousel arrow hover show
   ========================= */

/* 初期状態：非表示 */
.carousel-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* カルーセルにホバーしたら表示（PC想定） */
.case-carousel:hover .carousel-btn {
  opacity: 1;
  pointer-events: auto;
}

/* disabled 時は表示しない（端でチラつかないように） */
.carousel-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

/* SPでは常に非表示（既存ルールの補強） */
@media (max-width: 768px) {
  .carousel-btn {
    display: none;
  }
}

/*端のバウンス抑制*/
.case-carousel__track{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}