/* =========================
   HERO SLIDER（PC前提 / メディアクエリ無し）
   ========================= */

/* ラッパー */
.hero-slider-wrap{ margin:0; }

/* 変数（--mask-w-px は JS で上書き） */
.hero-slider{
  --mask-w-px: 300px;   /* JS が画面幅から計算して上書き */
  --mask-bleed: 16px;   /* マスクの“かぶせ”量（境目潰し）←少し増やして安全側に */
  --edge-solid: 12px;   /* 不透明帯（境目を確実に隠す） */
  --nav-size: 44px;     /* 矢印の直径 */
  --nav-inset: 8px;     /* 矢印を中央寄りに寄せるオフセット */
}

/* 本体 */
.hero-slider{
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* 横スライド：隙間対策（+2px 幅 & 左右 -1px 重ね） */
.hero-slider__track{
  display:flex;
  align-items:center;
  gap:0;
  transition:transform .6s ease;
  will-change:transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.hero-slide{
  flex: 0 0 calc(100% + 2px);
  margin: 0 -1px;
  position: relative;
  backface-visibility: hidden;
}
.hero-slide__link{ display:block; }

/* 画像“見せ幅”用の内側ラッパ */
.hero-slide__inner{
  width: 100%;
  max-width: var(--center-w-px, 980px);  /* JSで 980 / 600 / 100% 相当を設定 */
  margin: 0 auto;                        /* 常に中央寄せ */
}

/* 画像は素直に拡大縮小（高さは未固定） */
.hero-slide__img{
  width: 100%;
  height: auto;
  display: block;
}

/* ========== peek（次/前のチラ見せ：マスクの下に敷く） ========== */
.hero-peek{
  position: absolute;
  top: 0; bottom: 0;
  width: var(--mask-w-px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 12;                    /* スライドより上、マスクより下 */
  pointer-events: none;
  opacity: .95;
}
.hero-peek.is-left{  left: 0; }
.hero-peek.is-right{ right: 0; }

/* ========== マスク（黒透過で“かぶせ”て境目を消す） ========== */
.hero-slider__mask{
  position: absolute;
  top: 0; bottom: 0;
  width: calc(var(--mask-w-px) + var(--mask-bleed)); /* かぶせ量ぶん広げる */
  pointer-events: none;
  z-index: 20;
}
.hero-slider__mask.is-left{  left: calc(-1 * var(--mask-bleed)); }
.hero-slider__mask.is-right{ right: calc(-1 * var(--mask-bleed)); }

/* グラデ無しの黒透過 + 内側の不透明帯（念のため境目確実に隠す） */
.hero-slider__mask::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  
}

/* ========== 矢印（マスクの“上”、中央寄り） ========== */
.hero-slider__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;                           /* マスクの上 */
  width: var(--nav-size);
  height: var(--nav-size);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  cursor: pointer;
}
.hero-slider__nav.is-prev{
  left: calc(var(--mask-w-px) - var(--nav-size) - var(--nav-inset));
}
.hero-slider__nav.is-next{
  right: calc(var(--mask-w-px) - var(--nav-size) - var(--nav-inset));
}
.hero-slider__nav::before{
  content:"";
  display:block;
  width: 0; height: 0; margin: auto;
  border-style: solid;
  border-width: 8px 10px 8px 0;
  border-color: transparent #666 transparent transparent;
}
.hero-slider__nav.is-next::before{ transform: rotate(180deg); }
.hero-slider__nav:active{ transform: translateY(-50%) scale(.98); }

/* ========== ドット ========== */
.hero-slider__dots{
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 8px;
  z-index: 25;
}
.hero-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  cursor: pointer;
}
.hero-dot.is-active{ background: var(--blue); }

/* ========== サムネ（現状のまま） ========== */
.hero-thumbs{
  max-width: 800px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin:10px auto;
}
.hero-thumb{
  appearance: none;
  border:0; padding:0;
  background: transparent;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.hero-thumb:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.10); }
.hero-thumb.is-active{ outline: 2px solid var(--blue); }
.hero-thumb__img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display:block;
}

/* アクセシビリティ（隠しテキスト） ※重複定義を1つに集約 */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}