/* 隣のコマが混ざらない完全透過の男性歩行素材。各160×240px、外周8px以上を透明にする。 */
.lhc-trail .lhc-trail-walker.lhc-sprite-walk{
 --sheet:url('/assets/lh-walker-male-clean-8.webp');
 --n:8;
 --sw:160;
 --sh:240;
 background-image:var(--sheet);
 background-size:100% 100%;
 background-repeat:no-repeat;
 background-color:transparent;
}

/* 8コマを時間でループさせず、JSで歩いた距離に応じて切り替える。*/
.lhc-trail .lhc-trail-walker.lhc-sprite-walk,
.lhc-trail.lhc-walking .lhc-trail-walker.lhc-sprite-walk{
 animation:none!important;
}
/* 振り向く方向と、PC/スマホの元の配置・スクロール位置は保持。*/
.lhc-trail[data-lh-walk-direction="up"] .lhc-trail-walker{
 transform:translateY(-100%) scaleX(-1);
}
@media(max-width:760px){
 body[data-lh-flow-page="top"] .lhc-trail[data-lh-walk-direction="up"] .lhc-trail-walker{
  transform:translate(-50%,-100%) scaleX(-1);
 }
}
@media(max-width:1399px){
 body[data-lh-flow-page="web"] .lhc-trail[data-lh-walk-direction="up"] .lhc-trail-walker,
 body[data-lh-flow-page="improvement"] .lhc-trail[data-lh-walk-direction="up"] .lhc-trail-walker{
  transform:translate(-50%,-100%) scaleX(-1);
 }
}
@media(prefers-reduced-motion:reduce){
 .lhc-trail-walker{transition:none!important}
}