/* 画像の場所（PHP側の設定がなくても表示されるようにCSSにも記載） */
:root{--dog-sprite:url("../../images/common/codingdog/run-sprite.webp");--dog-jump:url("../../images/common/codingdog/jump-sprite.webp");--dog-stop:url("../../images/common/codingdog/stop-sprite.webp")}
/* コーディング犬が走る */
.dog-run{--s:84px;position:absolute;left:0;width:var(--s);height:var(--s);background:var(--dog-sprite) 0 0/calc(var(--s)*8) var(--s) no-repeat;pointer-events:auto;cursor:pointer;z-index:5;will-change:transform;filter:drop-shadow(0 4px 3px rgba(0,0,0,.18))}
.dog-run.is-running{animation:dog-legs .56s steps(8) infinite}
@keyframes dog-legs{to{background-position:calc(var(--s)*-8) 0}}
.dog-run__say{position:absolute;bottom:calc(100% - 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;color:#191817;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.15);opacity:0;transition:opacity .2s;pointer-events:none}
.dog-run:hover .dog-run__say,.dog-run.is-saying .dog-run__say{opacity:1}
.dog-track{position:relative;height:0;overflow:visible}
.dog-track--footer .dog-run{top:calc(var(--s)*-1 + 6px)}
.renewal-footer{position:relative}
@media (max-width:767px){.dog-run{--s:60px}}
@media (prefers-reduced-motion:reduce){.dog-run{display:none!important}}
@media print{.dog-run{display:none!important}}
.dog-run--jump{background-image:var(--dog-jump);background-size:calc(var(--s)*5) var(--s)}
.dog-run--jump.is-jumping{animation:dog-jump var(--hop,.8s) steps(5) 1 forwards}
@keyframes dog-jump{to{background-position:calc(var(--s)*-5) 0}}
/* 止まる（0:お座り 1:立ち） */
.dog-run.is-stand,.dog-run.is-sit{animation:none!important;background-image:var(--dog-stop)!important;background-size:calc(var(--s)*2) var(--s)!important}
.dog-run.is-sit{background-position:0 0!important}
.dog-run.is-stand{background-position:calc(var(--s)*-1) 0!important}
/* フッターは画面の端から端まで */
.dog-track--footer{position:absolute;left:0;right:0;top:0;height:0}
/* スクロール中に現れる犬 */
.dog-run--free{position:absolute;left:0;z-index:40}
.dog-run--peek{z-index:55}
.dog-run--free .dog-run__say,.dog-run--peek .dog-run__say{transform:translateX(-50%) scaleX(1)}
.dog-run.is-flip .dog-run__say{transform:translateX(-50%) scaleX(-1)}
.dog-run--peek .dog-run__say{left:6px;transform:none}