.hero{position:relative;overflow:hidden;border-radius:12px}
.hero .slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;transition:transform .5s ease}
.hero .slide{width:100%;height:0;padding-top:42%;position:relative}
.hero .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .nav{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center}
.hero .dot{width:10px;height:10px;border-radius:50%;background:#fff8;border:1px solid #fff;cursor:pointer}
.hero .dot.active{background:#fff}
.hero .btn{position:absolute;top:50%;transform:translateY(-50%);background:#0008;color:#fff;border:0;width:36px;height:36px;border-radius:50%;cursor:pointer}
.hero .btn.prev{left:10px}.hero .btn.next{right:10px}
@media (max-width:768px){.hero .slide{padding-top:56.25%}}
<!-- Hero 最小CSS（scroll-snap版） -->
<style id="kv-css">
.kv{position:relative}
.kv-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.kv-track::-webkit-scrollbar{display:none}
.kv-track{scrollbar-width:none}
.kv-item{flex:0 0 100%;scroll-snap-align:center;position:relative}
.kv-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.kv-cap{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);text-align:center;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.28)}
.kv-h{display:block;font-weight:800;font-size:clamp(16px,4.2vw,28px);line-height:1.25;color:#fff;margin-bottom:4px}
.kv-sub{display:block;font-weight:600;font-size:clamp(12px,3.4vw,16px);line-height:1.35;color:#fff;opacity:.95}
@media (min-width:1024px){.kv-cap{bottom:10%}}
.kv-prev,.kv-next{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:40px;text-align:center}
.kv-prev{left:8px}.kv-next{right:8px}
.kv-prev:hover,.kv-next:hover{background:rgba(0,0,0,.5)}
.kv .kv-img[src=""],.kv .kv-img[src="/images/"]{display:none}
</style>
/* === HERO: モバイル白余白の根治・統一サイズ === */
section[data-hero-wrap]{ margin:10px 0 0 !important; }  /* ヘッダー直下の余白 */

.hero[data-hero]{ position:relative; overflow:hidden; }
.hero[data-hero] .slides{
  display:flex !important;   /* ← コレが肝（縦積み防止） */
  gap:0;
  will-change:transform;
  transition:transform .5s ease;
}
.hero[data-hero] .slide{
  flex:0 0 100%;
  position:relative; width:100%; height:0;
  padding-top:56.25% !important;   /* SP: 16:9 */
}
@media (min-width:769px){
  .hero[data-hero] .slide{ padding-top:42% !important; }  /* PC: 他ページと同じ高さ */
}
.hero[data-hero] .slide > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}