/* =========================
   HERO SLIDER (PC+SP)
   - 中央スライド max 1140
   - PC: 16:9
   - SP(<=767): 3:2（素材16:9は左右均等トリミング）
========================= */

.heroSlider{
  width:100%;
  position:relative;
  margin-bottom:30px;
}

/* viewportの高さを「中央スライド幅 × 比率」で決める */
.heroSlider__viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  box-sizing:border-box;

  /* peek */
  --peekPad: clamp(16px, 4vw, 72px);

  /* 中央スライドの幅（PCは最大1240） */
  --slideW: min(940px, calc(100% - (var(--peekPad) * 2)));

  /* ★比率（PCデフォルト 16:9） */
  --ratioW: 16;
  --ratioH: 8;

  padding-left: var(--peekPad);
  padding-right: var(--peekPad);

  /* ★高さ = slideW * ratioH / ratioW */
  height: calc(var(--slideW) * var(--ratioH) / var(--ratioW));
}

.heroSlider__track{
  height:100%;
  display:flex;
  align-items:stretch;
  gap:8px;

  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 600ms ease;
  touch-action: pan-y;
}

/* スライド：幅は slideW、高さは viewport に100%追従 */
.heroSlider__slide{
  flex: 0 0 var(--slideW);
  height:100%;

  display:block;
  line-height:0;
  overflow:hidden;

  user-select:none;
  -webkit-user-drag:none;
  background:#eee;
}

/* mediaラッパーは全面 */
.heroSlider__media{
  display:block;
  width:100%;
  height:100%;
}

/* 素材は16:9でも、枠に合わせて cover（左右均等に切れる） */
.heroSlider__media img{
  width:100%;
  height:100%;
  display:block;

  object-fit: cover;
  object-position: center center; /* ★左右均等トリミングの要 */
  user-select:none;
  -webkit-user-drag:none;
}

/* arrows */
.heroSlider__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:0;
  color:#fff;
  cursor:pointer;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:center;
}
.heroSlider__arrow span{
  font-size:44px;
  font-weight:100;
  line-height:1;
  transform: translateY(-1px);
}
.heroSlider__arrow--prev{ left: 12px; }
.heroSlider__arrow--next{ right: 12px; }



/* arrowいったん消去 */
.heroSlider__arrow{
  display:none;
}

/* progress */
.heroSlider__progress{
  margin-top: 30px;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  padding: 0 12px;
  box-sizing:border-box;
}
.heroSlider__pseg{
  height:4px;
  flex: 0 0 74px;
  border-radius:999px;
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.heroSlider__pfill{
  height:100%;
  width:100%;
  transform: translateX(-100%);
  background: rgba(0,0,0,.6);
  will-change:transform;
}

/* =========================
   SP (<=767): 3:2
========================= */
@media (max-width: 767px){
  .heroSlider__viewport{
    --peekPad: 14px;

    /* SPは中央もフル寄り（必要ならmin(…)を外す） */
    --slideW: calc(100% - (var(--peekPad) * 2));

    /* ★比率を 3:2 に切替 */
    --ratioW: 3;
    --ratioH: 2;

    height: calc(var(--slideW) * var(--ratioH) / var(--ratioW));
  }

  .heroSlider__track{ gap:12px; }
}


@media (max-width: 767px){

  /* 高さ計算方式を捨てる：autoに戻す */
  .heroSlider__viewport{
    height: auto;
  }
  .heroSlider__track{
    height: auto;
  }

  /* ★ここで3:2を確定させる */
  .heroSlider__slide{
    aspect-ratio: 3 / 2;
    height: auto;
   flex: 0 0 100%;
  }

  .heroSlider__viewport{
    padding-left: 0;
    padding-right: 0;
  }

  /* 枠に対して16:9素材を左右均等トリミング */
  .heroSlider__media{
    width: 100%;
    height: 100%;
    display: block;
  }
  .heroSlider__media img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: 50% 50%;
    display:block;
  }

  .heroSlider__track{ gap:3px;margin-top:24px; }

.heroSlider__arrow{
  display:none;
}
  
  
}


.heroSlider__media img {
transition:0.3s;
}

.heroSlider__media img:hover {
opacity:0.7;
} 

@media (max-width: 767px){
.heroSlider__pseg {
    flex: 0 0 61px;
    }
    }
    
    
/* SP：ヒーロースライダーだけ画面左右いっぱいに広げる */
@media (max-width: 767px){

  .sp-visible .heroSlider{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .sp-visible .heroSlider__viewport{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sp-visible .heroSlider__slide{
    flex: 0 0 100% !important;
  }

  .sp-visible .heroSlider__track{
    gap: 0;
  }
}