:root{
--slide-duration: 5200ms;   /* 1枚の表示時間 */
--fade: 1000ms;             /* 切替アニメ時間 */
--zoom-scale: 1.15;         /* 拡大率 */
--zoom-duration: 20000ms;   /* 拡大にかける時間 */
--shift: 200px;             /* 横方向モーション距離 */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:#FFF;
color:#000;
font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",Meiryo,sans-serif;
}
.hero{
position:relative;
width: 100%;
height: 40vw;
aspect-ratio: 16/9;
overflow:hidden;
}
@media screen and (min-width: 0px) and (max-width: 640px) {
:root{
--zoom-scale: 1.3;         /* 拡大率 */
--zoom-duration: 10000ms;   /* 拡大にかける時間 */
--shift: 50px;             /* 横方向モーション距離 */
}
.hero{
height: 70vw;
aspect-ratio: 4/3;
}
}
/* 親レイヤー：横移動＋フェード */
.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(0);
  transition: opacity var(--fade) ease-in-out, transform var(--fade) ease-in-out;
  will-change: transform, opacity;
}
.layer.is-top{ opacity:1; transform:translateX(0) }
.layer.enter-left{ opacity:0; transform:translateX(calc(-1 * var(--shift))) }
.layer.exit-right{ opacity:0; transform:translateX(var(--shift)) }
/* 子ラッパ：Ken Burns拡大 */
.zoomwrap{
position:absolute; inset:0;
transform-origin:center;
will-change: transform;
animation: kbZoom var(--zoom-duration) linear forwards;
}
.zoomwrap,
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@keyframes kbZoom{
from{transform:scale(1)}
to{transform:scale(var(--zoom-scale))}
}
/* スライド画像 */
.slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
}
/* グラデーションマスク */
.scrim{
position:absolute; inset:0; pointer-events:none; z-index:3;
background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 62%,rgba(0,0,0,.45) 100%);
}
@media (prefers-reduced-motion: reduce){
.layer{transition:none}
.zoomwrap{animation:none}
}