.hero-slider{ position:relative; height:50vw; min-height:420px; }

.hero-slider .swiper,
.hero-slider .swiper .swiper-slide,
.hero-slider .swiper img {
  height: 100%;
}
.hero-slider .swiper img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* 中央 50% の帯に収める場合 */
.hero-overlay{
  position:absolute;
  left:40%; right:0;
  top:40%;              /* 上から25%位置に開始 */
  width:20%;           /* 親の高さの半分だけのボックス */
  max-width: 250px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:0;
  z-index:5;
  pointer-events:none;
  color:#fff;
 /* text-shadow:0 2px 8px rgba(0,0,0,.35);
  background-color: rgb(0, 0, 0, 0.2);*/
}
.hero-overlay img{
  width:100%;
}
.hero-overlay .hero-sub   { font-size: 16px; margin: 0 0 8px; font-weight: 600; letter-spacing: .08em; }
.hero-overlay .hero-title { font-size: clamp(28px, 6vw, 56px); margin: 0 0 8px; 
  font-family: "Times New Roman", serif;
    font-weight: 700;
    text-decoration: none;}
.hero-overlay .hero-desc  { font-size: clamp(13px, 2.6vw, 18px); margin: 0; }



/*ズーム対応*/
.hero { position: relative; overflow: hidden; }
.swiper-ken { width: 100%; height: min(80vh, 900px); }

/* 画像を中央でトリミング＆サイズ差を吸収 */
.swiper-ken .swiper-slide { position: relative; }
.swiper-ken .swiper-slide img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  display: block;
  transform: scale(1) translate(0,0);
  transform-origin: center center;
  will-change: transform;
}

/* アクティブスライドだけズームを走らせる */
.swiper-ken .swiper-slide.anim img{
  animation: kenburns var(--kb-duration,7000ms) ease-in-out forwards;
}

/* ズーム＆パン（パンはCSS変数で調整） */
@keyframes kenburns {
  from { transform: scale(1) translate(var(--kb-x-from,0), var(--kb-y-from,0)); }
  to   { transform: scale(var(--kb-scale,1.2)) translate(var(--kb-x-to,0),   var(--kb-y-to,0)); }
}

/* ページネーション（お好みで） */
.swiper-ken .swiper-pagination-bullet{ background:#fff; opacity:.6; }
.swiper-ken .swiper-pagination-bullet-active{ opacity:1; }

.myFadeZoom,
.myFadeZoom .swiper-slide { height: 60vh; }

.myFadeZoom .swiper-slide { position: relative; overflow: hidden; }
.myFadeZoom .swiper-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
  /* Ken Burns（ズーム）設定 */
  transform: scale(1) translate(0,0);
  animation: kenburns var(--kb-duration, 5s) ease-out forwards;
  animation-play-state: paused;            /* 非アクティブは停止 */
  will-change: transform;
}

/* アクティブ時だけ再生（loop時の複製も対応） */
.myFadeZoom .swiper-slide-active    img,
.myFadeZoom .swiper-slide-duplicate-active img{
  animation-play-state: running;
}

/* ズームの定義（必要なら1.15や1.2に） */
@keyframes kenburns {
  from { transform: scale(1) translate(0,0); }
  to   { transform: scale(1.10) translate(0,0); }
}

@media (max-width: 1024px) { 
.hero-overlay{
      top: calc(-56px + 25%);
        width: 30%;
        left: 35%;
}
}
@media (max-width: 768px) { 
.hero-overlay{
    top: calc(-56px + 35%);
    width: 40%;
    left: 30%;
}

.hero-overlay img{
    width:100%;
}


}