/* =============================================================
   components/banner.css
   ヒーローバナー横スクロールスライダー（new_hero ピークカルーセル）
   各スライド W270 × H390（比0.692）。pl.jpg連結の表紙継ぎ目は実測 x412〜426 に集中。
   270×390 cover＋object-position:right は右46.6%表示＝左端x427.5（最悪継ぎ目426を+1.5pxでクリア）。
   coverで枠を必ず充填＝上下隙間ゼロ／右端=表紙右端固定／左端は継ぎ目より内側で背表紙ゼロ。
   狭継ぎ目作品は表紙左マージンを数px削るが被写体は無傷（背が出るよりマシ・合意済み）。
   gap 25px / 左右padding 52.5px / 375px幅で隣スライドが左右27.5pxずつ覗く
   中央スナップ＋無限ループ（script.js）
   画像: 標準連結=pl.jpg を hero-crop-right で表紙(右側)だけ表示／
         外れ値=ps.jpg を hero-crop-center でフォールバック（index.php HeroCoverCache）
   ============================================================= */

.hero-banner {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 25px;            /* スライド間ギャップ */
  padding: 0 52.5px;    /* (375-270)/2。375px幅で隣スライドが左右27.5pxピーク見え */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hero-banner::-webkit-scrollbar { display: none; }

.hero-banner__slide {
  flex: 0 0 270px;          /* W270 固定 */
  height: 390px;            /* H390（cover右揃えで左端x427.5・隙間ゼロ・背表紙ゼロ） */
  scroll-snap-align: center;
  overflow: hidden;
  position: relative;
  background: #E8E8E8;
}

.hero-banner__slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-banner__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 標準連結 pl.jpg：右側=表紙パネルを表示（裏コラージュは枠外へ） */
.hero-banner__slide.hero-crop-right img {
  object-position: right center;
}

/* 外れ値フォールバック ps.jpg：表紙そのものを中央表示 */
.hero-banner__slide.hero-crop-center img {
  object-position: center;
}

/* ヒーローバナーのカルーセルドット上下余白 */
.js-hero-wrap .carousel-dots {
  margin-top: var(--space-hero-dots);  /* 20px: バナー画像 → ドット */
  margin-bottom: -5px;                 /* 20px - 25px: ドット → 次セクション */
}