/* ==========================================================================
   ヒーローの横スクロール（フィルムストリップ）
   ・写真の高さをそろえ、幅は写真の縦横比のまま → 縦長・横長が混在しても切れずに並ぶ
   ・自動で左へゆっくり流れ、ボタン・ドラッグ・スワイプで左右どちらへも動かせる
   ========================================================================== */
.hero.hero-strip{
  display:block;min-height:0;color:#fff;
  position:relative;overflow:hidden;background:#0F2742;
  --strip-h:clamp(240px,34vw,420px);
  padding:14px 0 0;
}
.hs2-viewport{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.hs2-viewport.dragging{cursor:grabbing;}
.hs2-track{display:flex;gap:10px;width:max-content;will-change:transform;}
.hs2-item{flex:none;height:var(--strip-h);margin:0;border-radius:14px;overflow:hidden;background:#16365A;}
.hs2-item img{height:100%;width:auto;display:block;pointer-events:none;-webkit-user-drag:none;}

/* 見出し（写真の下に配置：流れる写真の上に文字を重ねないので読みやすい） */
.hero-strip .hero-inner{position:relative;padding-top:18px;padding-bottom:26px;color:#fff;}
.hero-strip h1{margin:0 0 8px;}

/* 操作ボタン */
.hs2-btn{
  position:absolute;top:calc(14px + var(--strip-h) / 2);z-index:3;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:2.5px solid #0F2742;cursor:pointer;
  background:#fff;color:#0F2742;font-size:24px;line-height:40px;text-align:center;
  box-shadow:4px 4px 0 #FFC23D;
}
.hs2-btn:hover{background:#FFF7E0;}
.hs2-prev{left:14px;}
.hs2-next{right:14px;}
.hs2-pause{
  position:absolute;right:14px;top:calc(14px + var(--strip-h) - 44px);z-index:3;
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.85);color:#0F2742;font-size:12px;
}
/* ---- 写真が少ないときの表示（hero-strip.js が data-mode と hs2-○○ クラスを付ける） ---- */
/* 写真が1枚もない時（hs2-empty）は写真の枠を出さない */
.hs2-empty .hs2-viewport{display:none;}
/* 操作ボタンは流れる表示（flow）のときだけ */
.hero-strip:not(.hs2-flow) .hs2-btn,.hero-strip:not(.hs2-flow) .hs2-pause{display:none;}
.hero-strip:not(.hs2-flow) .hs2-viewport{cursor:default;}
.hs2-item{position:relative;}

/* one：1枚を画面幅いっぱいに（上下は切れる。残す位置は hero-strip.js が data-pos から設定） */
.hs2-one .hs2-viewport{padding:0 14px;}
.hs2-one .hs2-track{width:auto;}
.hs2-one .hs2-item{flex:1 1 auto;width:100%;}
.hs2-one .hs2-item img{width:100%;height:100%;object-fit:cover;}

/* row：中央にそろえて並べる（動かさない） */
.hs2-row .hs2-track{width:auto;justify-content:center;align-items:center;padding:0 14px;}

/* swipe：指で横にめくる（自動では動かない） */
.hs2-swipe .hs2-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:auto;}
.hs2-swipe .hs2-viewport::-webkit-scrollbar{display:none;}
.hs2-swipe .hs2-track{padding:0 14px;}
.hs2-swipe .hs2-item{scroll-snap-align:center;}

@media (max-width:640px){
  .hs2-one .hs2-viewport{padding:0 10px;}
  .hs2-row .hs2-track,.hs2-swipe .hs2-track{padding:0 10px;}
  .hero.hero-strip{--strip-h:clamp(200px,58vw,300px);padding-top:10px;}
  .hs2-track{gap:8px;}
  .hs2-item{border-radius:10px;}
  .hs2-btn{width:38px;height:38px;line-height:32px;font-size:20px;top:calc(10px + var(--strip-h) / 2);}
  .hs2-prev{left:8px;}
  .hs2-next{right:8px;}
  .hs2-pause{top:calc(10px + var(--strip-h) - 40px);right:8px;}
}