/* 最初の画面(TOP)に浮く広告の枠 2 つ。絵(舞台 390x844)は動かさず、その上に重ねる。
   座標は「画面の中央」からの px。舞台は常に中央に 390 幅で立つので、画面が広くても狭くても絵に合う。
   - top-1・top-2 とも同じ横長(中身 320x60。AdSense 320x50・楽天の動くウィジェット 320x48・楽天バナー 360x60 を縮めた 316x53 が入る。外枠 324x81)
   大きさは画面の幅によらず同じ。置き場だけ変わる: 幅 1100px 未満(スマホ)は top-1 が舞台の中・top-2 が舞台の真下、1100px 以上は舞台の左右の余白(PC)。
   top-2 とキャラ(mc.css)は、どの町ボタンにも被らず、広告 2 枠どうしも被らない(閉じる前から)。top-1 だけ、漂いの下の振れの間は町ボタン「東栄」の上端に約 4px 触れる(昔からの置き場)。町ボタン・下端の注記は舞台の canvas に描かれ、位置が変わらないので、
   top-2 は舞台(高さ 844)の下に置いて頁を縦に伸ばす。
   各枠の × は、枠の上の角に出っ張らせた別のボタン(.fa-x)。広告の中身(.ad)には重ねない。閉じた枠は float-ads.js が頁から外す(覚えるのはその頁を開いている間だけ。再読み込みでまた出る)。
   中身が入る(.ad.filled)まで枠は出さない。入れ物だけが「広告」の札つきで絵に被って居座るのを避ける。
   登場(0.7 秒・最大 5% の弾み)と漂い(約 2〜3px・傾き 0.4 度以内)は、動きを減らす設定の人には出さない。
   中身は ads.js の POPBOOK_ADS の top(top-1・top-2)に入れる。 */
#fads { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
/* z-index: 2 = キャラの押せる箱(mc.css の .mcb-main)と静止の絵(#fads::after)より上 */
#fads .fa { position: absolute; z-index: 2; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); visibility: hidden; pointer-events: none; }
#fads.on .fa.has { visibility: visible; }
#fads .fa > .fw { position: absolute; inset: 0; pointer-events: none; }

/* 枠。殻の .ad(一覧用: 高さ 92px・余白あり)と ads.js の .ad.filled(中身が入ったとき)を、浮く枠の大きさに合わせて上書きする。
   外枠 = 中身 + 破線 2px の左右 4px + 札の行 17px + 上下 4px(324x81) */
#fads .fa > .fw > .ad { position: absolute; inset: 0; box-sizing: border-box; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; overflow: hidden;
  background: #FCFCF8; border: 2px dashed rgba(20, 48, 72, .5); border-radius: 10px; pointer-events: auto; }
#fads .fa > .fw > .ad.filled { height: auto; min-height: 0; padding: 17px 0 0; overflow: hidden; }
#fads .fa > .fw > .ad .ad-body { display: block; width: 100%; height: 100%; overflow: hidden; text-align: center; }
#fads .fa .ad .tag { position: absolute; left: 6px; top: 3px; z-index: 1; font: 700 11px/1 "Zen Maru Gothic", "BIZ UDPGothic", sans-serif; color: var(--ink, #143048); }

/* 閉じる ×。枠の上の角に出っ張らせる(30x30。枠の上端から 16px 上〜14px 下。広告の中身は枠の上端から 19px 下から始まるので、5px 離れる)。
   広告の中身の外にあり、押せる範囲を広げて中身へ食い込ませない。濃い紺に白い十字、まわりに 2px の淡い輪(広告の地とも絵とも分かれる) */
#fads .fa > .fw > .fa-x { position: absolute; top: -16px; right: 4px; width: 30px; height: 30px; box-sizing: border-box; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 2px solid #FCFCF8; border-radius: 10px; background: #143048; color: #fff;
  cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#fads .fa-x svg { display: block; width: 12px; height: 12px; pointer-events: none; }
#fads .fa-x:focus-visible { outline: 3px solid #0E67B0; outline-offset: 2px; }

/* スマホ(幅 1100px 未満): x は画面の中央から、y は頁の上から
   top-1: 舞台の x 62〜386・y 215〜296(漂い・傾きを含めて DOM で測ると x 59.7〜388.3・y 210.9〜300.1)。上は題「とびだせ、休日。」の下。下の縁は町ボタン「東栄」の上端(y 296)に接していて、漂いの下の振れ(約 4px)の間だけ東栄の上端に被る(10-13 より前からの置き場。動かしていない)。
   top-2: 舞台の真下(舞台は高さ 844)。x 33〜357・y 868〜949(漂い・傾きを含めて DOM で測ると x 30.7〜359.3・y 863.9〜953.1)。頁は 965px まで伸びる(枠の下に 16px の余白)。
   町ボタンと下端の注記は舞台の中に描かれ、動かせないので、舞台の外へ出した。広告が出ない(空・遮断)ときと閉じたときは頁を伸ばさない: 非表示の間は枠を頁の上(top 0)に退かせる */
#fads .fa1 { --x: -133; --y: 215; --w: 324; --h: 81; --ax: 2; --ay: 3; --r: .4; --p: 5.2s; --d: .2s; }
#fads .fa2 { --x: -162; --y: 868; --w: 324; --h: 81; --ax: 2; --ay: 3; --r: .4; --p: 4.6s; --d: .45s; }
#fads:not(.on) .fa2, #fads .fa2:not(.has) { top: 0; }
#fads .fa2::after { content: ""; position: absolute; left: 0; top: 100%; width: 1px; height: 16px; }

/* PC(幅 1100px 以上): 舞台の左右の余白。320 幅の横長がおさまる余白(片側 355px 以上)がある幅から。top-2 は top-1 の鏡(右の余白) */
@media (min-width: 1100px) {
  #fads .fa1 { --x: -535; --y: 150; }
  #fads .fa2 { --x: 211; --y: 200; }
}

/* 動き。html の data-fm は float-ads.js が付ける(殻と同じ決め方: ?motion=full|reduced を優先し、無ければ OS の設定) */
@keyframes fapop { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 55% { transform: scale(1.05); } 80% { transform: scale(.99); } 100% { transform: scale(1); } }
@keyframes fadrift {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(calc(var(--ax) * 1px), calc(var(--ay) * 1px)) rotate(calc(var(--r) * 1deg)); }
  75% { transform: translate(calc(var(--ax) * -1px), calc(var(--ay) * -1px)) rotate(calc(var(--r) * -1deg)); }
  100% { transform: translate(0, 0) rotate(0); }
}
html[data-fm="full"] #fads.on .fa.has { animation: fapop .7s ease-out both; animation-delay: var(--d); }
html[data-fm="full"] #fads.on .fa.has > .fw { animation: fadrift var(--p) ease-in-out infinite; animation-delay: calc(var(--d) + .8s); }
@media (prefers-reduced-motion: reduce) {
  html:not([data-fm="full"]) #fads .fa, html:not([data-fm="full"]) #fads .fa > .fw { animation: none; }
}