/*
 * 動き（お試し・2026-10-02）。inc/layout.php の SITE_MOTION を false にすると、このファイルと motion.js は読まれなくなる。
 * 規範: 400ms 以内／動かすのは transform と opacity だけ／40〜80ms のずらし／見せ場は1画面に1つ（単価ページの冒頭）。
 * html に .motion が付いたときだけ動く（「視差効果を減らす」設定の人や、スクリプトが動かない環境では何も起きない）。
 */
@keyframes kk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ランキングの上位10行: 上から順に出る */
.motion #rank-list > .item:not([hidden]) { animation: kk-rise .32s cubic-bezier(.16, 1, .3, 1) both; }
.motion #rank-list > .item:nth-child(1) { animation-delay: 40ms; }
.motion #rank-list > .item:nth-child(2) { animation-delay: 80ms; }
.motion #rank-list > .item:nth-child(3) { animation-delay: 120ms; }
.motion #rank-list > .item:nth-child(4) { animation-delay: 160ms; }
.motion #rank-list > .item:nth-child(5) { animation-delay: 200ms; }
.motion #rank-list > .item:nth-child(6) { animation-delay: 240ms; }
.motion #rank-list > .item:nth-child(7) { animation-delay: 280ms; }
.motion #rank-list > .item:nth-child(8) { animation-delay: 320ms; }
.motion #rank-list > .item:nth-child(9) { animation-delay: 360ms; }
.motion #rank-list > .item:nth-child(10) { animation-delay: 400ms; }
.motion #rank-list > .item:nth-child(n+11) { animation: none; }


@media (prefers-reduced-motion: reduce) {
  .motion #rank-list > .item { animation: none !important; }
}