/* 公式キャラの絵を置く 3 か所(静止の絵・飾り)。殻の頁は書き換えず、殻が出す表示に重ねる。
   どれも pointer-events: none で、押す所・読む所の邪魔をしない。絵は alt の要らない飾りなので css の背景。
   位置は、置く相手の枠に対する相対(頁の長さが変わっても、相手に付いてくる)。
   - 0 件の日: 「次に催しのある日を見る」の右隣、下の線の上に車(72px)
   - 問い合わせの送信完了: 「送りました」の箱の右上にハート(40px)
   - 404: フッターの下に紙飛行機(132px) */
.nextday { position: relative; }
.nextday::after { content: ""; position: absolute; left: calc(100% + 12.5px); bottom: -7.2px; width: 72px; height: 40.07px;
  background: url(mc-car.png?v=7c65df219c) center / 100% 100% no-repeat; pointer-events: none; }
.done { position: relative; }
.done::after { content: ""; position: absolute; top: 13px; right: 16px; width: 40px; height: 39.7px;
  background: url(mc-heart.png?v=97ac75ac7e) center / 100% 100% no-repeat; pointer-events: none; }
.mc404 { margin: 15px 44px 0 0; line-height: 0; text-align: right; }
.mc404 img { display: inline-block; width: 132px; height: auto; }
/* TOP(最初の画面): メイン姿(72x67.5。もとの 48x45 の 1.5 倍)を静止で置く。飾り(絵は css の背景)で、押す所を奪わない。
   #fads は float-ads.css の 0x0 の基準点(画面の中央・頁の上)で、位置は「中央からの px」で書く。
   スマホ: 左 -187(舞台の x 8〜80)・上 140(y 140〜207.5)で、舞台の左の端。題「とびだせ、休日。」の左(題の字は x 89.5 から)・日付の帯(y 67〜121)の下・
   浮く広告の top-1(float-ads.css。x 62〜386・y 215〜296。漂いで上へ約 4px)の上に収まる。広告 2 枠(閉じる前)にも町ボタンにも被らない。背景の絵とは被ってよい。
   動き(ジャンプ)の絵は静止の絵の上へ 18px・左右へ 5px はみ出すので、y 122〜 に収まる(日付の帯に触れない)。
   test_kf_seo の test_character_is_left_and_clear_of_both_ads_and_town_buttons が数える */
#fads::after { content: ""; position: absolute; left: -187px; top: 140px; width: 72px; height: 67.5px;
  background: url(mc-main.png?v=c6c786617f) center / 100% 100% no-repeat; pointer-events: none; }
/* PC(幅 900px 以上): メイン姿は舞台の左の余白(x -303〜-231)に移る。浮く広告の枠は、幅 1100px 以上ではこの絵に被らない所(左は y 150〜231・右は舞台の外)に置く */
@media (min-width: 900px) { #fads::after { left: -303px; top: 369px; } }

/* ---- 触ると動く(1 回再生して、元の絵に戻る)。静止の絵(上の規則)はそのまま置き、その上に「押せる箱(button.mcb)」と
   動きの絵(span.mcs。mc-*-a.png の横長のコマ並べ)を重ねる。動いている間だけ静止の絵を隠す(.mcpl)。
   - 動きの絵は、触られたとき(か頁が落ち着いてから mc.js が)読む。css の url() は .ld が付くまで書いていない(最初の表示を重くしない)
   - 静止の絵と動きの絵の位置合わせ: --bx --by = 静止の絵の左上が箱の左上からずれる px。--ox --oy = コマの左上が静止の絵の左上からずれる px。--cw --ch = コマの大きさ(css px)。--n = コマ数
   - 動きを減らす設定の人には、mc.js が何もしない(動きの絵は読み込まない) */
.mcb { position: absolute; display: block; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mcb:focus-visible { outline: 3px solid #0E67B0; outline-offset: 2px; border-radius: 6px; }
.mcs { display: none; position: absolute; pointer-events: none; background: no-repeat 0 0;
  left: calc((var(--bx) + var(--ox)) * 1px); top: calc((var(--by) + var(--oy)) * 1px); width: calc(var(--cw) * 1px); height: calc(var(--ch) * 1px);
  background-size: calc(var(--n) * 100%) 100%; }
.mcb[hidden] { display: none; }
.mcb.pl .mcs { display: block; }
.mcpl::after, .mc404.mcpl img { visibility: hidden; }
@keyframes mc-play { from { background-position: 0 0; } to { background-position: 100% 0; } }
/* TOP(メイン姿): 押せる箱は幅 72・高さ 75(スマホは y 132.5〜207.5)。静止の絵(y 140〜207.5)の全部と、その上の 7.5px。広告にも町ボタンにも被らないので、閉じる前から押せる。
   押すたびに「ジャンプ」と「変身」が交互に動く(mc.js が data-m を入れ替える。最初はジャンプ) */
#fads .mcb-main { left: -187px; top: 132.5px; width: 72px; height: 75px; --bx: 0; --by: 7.5; }
@media (min-width: 900px) { #fads .mcb-main { left: -303px; top: 361.5px; } }
.mcb[data-m="hop"] { --ox: -5.24; --oy: -18.03; --cw: 82.17; --ch: 85.62; --n: 37; }
.mcb[data-m="hop"].ld .mcs { background-image: url(mc-hop-a.png?v=01bee3c532); }
.mcb[data-m="hop"].pl .mcs { animation: mc-play 1.54s steps(36, end) 1; animation: mc-play 1.54s steps(37, jump-none) 1; }
.mcb[data-m="main"] { --ox: -1.16; --oy: -2.42; --cw: 74.21; --ch: 70.01; --n: 52; }
.mcb[data-m="main"].ld .mcs { background-image: url(mc-main-a.png?v=2862930f82); }
.mcb[data-m="main"].pl .mcs { animation: mc-play 1.73s steps(51, end) 2 alternate; animation: mc-play 1.73s steps(52, jump-none) 2 alternate; }
/* 404(紙飛行機) */
.mc404 { position: relative; }
.mc404 .mcb-plane { right: 0; top: 0; width: 132px; height: 117px; --bx: 0; --by: 0; }
.mcb[data-m="plane"] { --ox: -3.57; --oy: -19.37; --cw: 159.26; --ch: 138.96; --n: 24; }
.mcb[data-m="plane"].ld .mcs { background-image: url(mc-plane-a.png?v=4c530873e2); }
.mcb[data-m="plane"].pl .mcs { animation: mc-play 2s steps(23, end) 1; animation: mc-play 2s steps(24, jump-none) 1; }
/* 0 件の日(車): 位置は mc.js が「次に催しのある日を見る」の右隣に合わせて left・top を書く */
.mcb-car { width: 72px; height: 44px; --bx: 0; --by: 1.96; }
.mcb[data-m="car"] { --ox: -0.3; --oy: -0.5; --cw: 94.54; --ch: 40.89; --n: 36; }
.mcb[data-m="car"].ld .mcs { background-image: url(mc-car-a.png?v=99e4ad04b8); }
.mcb[data-m="car"].pl .mcs { animation: mc-play 1.2s steps(35, end) 1; animation: mc-play 1.2s steps(36, jump-none) 1; }
/* 送信完了(ハート) */
.done .mcb-heart { top: 11px; right: 14px; width: 44px; height: 44px; --bx: 2; --by: 2; }
.mcb[data-m="heart"] { --ox: -1.48; --oy: -2.22; --cw: 42.95; --ch: 42.46; --n: 17; }
.mcb[data-m="heart"].ld .mcs { background-image: url(mc-heart-a.png?v=be5f0adcfa); }
.mcb[data-m="heart"].pl .mcs { animation: mc-play .6s steps(16, end) 1; animation: mc-play .6s steps(17, jump-none) 1; }