/* 歩行GIFは右下companionと独立。移動にレイアウト再計算を使わない。 */
.hero__sprite-panel {
  --walker-size: 220px;
  position: absolute;
  inset: auto 0 24px;
  width: 100%;
  height: var(--walker-size);
  margin: 0;
  pointer-events: none;
  z-index: 2;
}
.hero__sprite-viewport {
  position: relative;
  width: var(--walker-size);
  height: var(--walker-size);
  margin: 0;
  animation: remonchi-walk-across 20s linear infinite;
  will-change: transform;
}
.hero__sprite-viewport picture { display: block; width: 100%; height: 100%; }
.hero__sprite { animation: none; transform: none; }
.hero__sprite-viewport::after {
  content: "";
  position: absolute;
  left: 110%;
  bottom: 0;
  width: calc(80% * 2 / 3);
  height: calc(80% * 2 / 3);
  background: url('../images/official/maltese-walk.gif?260908-dog-2') center bottom / contain no-repeat;
  image-rendering: pixelated;
}

/* 模様の帯の上線を歩く。頭が切れない48pxを帯の上に確保する。 */
.section { padding-top: 120px; }
.section__ribbon { top: 48px; overflow: visible; }
/* 歩行スペースは次の本文ではなく、直前のセクションの背景を引き継ぐ。
 * 背景の切替位置を模様帯の上線まで下げ、途中に白い隙間を作らない。 */
.section__pixel-layer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 48px;
  background: var(--white);
}
.section--news > .section__pixel-layer::before,
.section--profile > .section__pixel-layer::before,
.section--movie > .section__pixel-layer::before {
  background: var(--paper) url('../images/px/stock/native/pattern-b.png') 0 0 / 96px 96px repeat;
}
.section__ribbon::before,
.section__ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 48px;
  height: 48px;
  background: url('../images/official/remonchi-walk.gif') center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  animation: remonchi-walk-across 28s linear infinite;
  animation-delay: var(--walk-delay, 0s);
}
.section__ribbon::before {
  left: 52.8px;
  background-image: url('../images/official/maltese-walk.gif?260908-dog-2');
  background-size: calc(80% * 2 / 3) calc(80% * 2 / 3);
  background-position: left bottom;
}
.section__ribbon--profile { --walk-delay: -7s; }
.section__ribbon--event { --walk-delay: -14s; }
.section__ribbon--movie { --walk-delay: -21s; }
.section__ribbon--goods { --walk-delay: -4s; }
@keyframes remonchi-walk-across {
  from { transform: translate3d(100vw, 0, 0); }
  /* 後ろの犬まで完全に退場してからループを戻す。 */
  to { transform: translate3d(-210%, 0, 0); }
}
@media (max-width: 760px) {
  .hero__sprite-panel {
    --walker-size: var(--hero-sprite-size);
    top: calc(45.2vh - var(--walker-size));
    bottom: auto;
    z-index: 4;
  }
  .hero__sprite-viewport { animation-duration: 12s; }
  .section__ribbon::before,
  .section__ribbon::after { animation-duration: 18s; }
}
/* PCはHERO内の歩行と近接する最初の帯だけ省き、重複を避ける。 */
@media (min-width: 761px) {
  .section.section--news { padding-top: 72px; }
  .section--news > .section__pixel-layer::before { display: none; }
  .section__ribbon--news { top: 0; }
  .section__ribbon--news::before,
  .section__ribbon--news::after { display: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sprite-viewport { animation: none; transform: translateX(0); }
  .hero__sprite-viewport::after,
  .section__ribbon::before,
  .section__ribbon::after { display: none; animation: none; }
}