/* 最初の画面(TOP)に浮く広告の枠 2 つ。絵(舞台 390x844)は動かさず、その上に重ねる。
   座標は「画面の中央」からの px。舞台は常に中央に 390 幅で立つので、画面が広くても狭くても絵に合う。
   - top-1 は 120x60 の楽天バナー(外枠 124x81)。舞台の中の、かみすけの吹き出しの右・東栄の札の上の空き(座標 x 255〜379・y 204〜285)に、どの幅でも置く。絵本の山と木の先には少し重なる(少しなら重なってよい、と決まっている)。吹き出し・タップの札・題・サブの字・町の札には被らない(6px の余白を取って測った)
   - top-2 は横長(中身 320x60。AdSense 320x50・楽天の動くウィジェット 320x48 が入る。外枠 324x81)。スマホ(幅 1100px 未満)は舞台の真下、1100px 以上は舞台の右の余白(PC)
   2 枠とキャラ(mc.css)・吹き出し(kmenu.css)は、どの町ボタンにも被らず、広告 2 枠どうしも被らない(閉じる前から)。top-1 はもと舞台の中(y 215〜296)にあってキャラの吹き出しと取り合っていたので、舞台の下へ移した。町ボタン・下端の注記は舞台の canvas に描かれ、位置が変わらないので、
   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 13px/1 "Zen Maru Gothic", "BIZ UDPGothic", sans-serif; color: var(--ink, #143048); }

/* 広告1(楽天のバナー 120x60 の画像)。ads.js の既定 `.ad .ad-body img{max-width:calc(100% - 4px)}` は画像を 116 幅に縮めるので、ここで外す。
   外枠 124x81 = 中身 120x60 + 破線 2px×2 + 札の行 17px。リンクの <a> は行内なので block にして、画像の下に行の余白(文字の下端)が出ないようにする */
#fads .fa .ad-body a { display: block; width: 120px; height: 60px; }
#fads .fa .ad-body img { display: block; max-width: none; width: 120px; height: 60px; margin: 0; }

/* 閉じる ×。枠の上の角に出っ張らせる(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; }
/* 広告1だけ ×(kmenu.css で 44x44)を 3px 上げる: 枠が小さく、44px の × の下端が画像の上端に 3px 食い込んでいた */
#fads .fa.fa1 > .fw > .fa-x { top: -25px; }
#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-2: 舞台の真下(舞台は高さ 844)。x 33〜357・y 868〜949(漂い・傾きを含めて DOM で測ると x 30.7〜359.3・y 863.9〜953.1)。
   top-1: 舞台の中(上の説明)。x 60〜184 は画面の中央から(舞台の左端から 255〜379)・y 204〜285。× は枠の上へ 25px 出る(y 179〜。kmenu.css の 44x44 の × は、下端が広告の画像の上端 y 223 に着く高さまで上げた)。幅 1100px 以上でも同じ場所。頁の高さは top-2 だけで決まる(965px。top-2 が無いときは 844px)。
   町ボタンと下端の注記は舞台の中に描かれ、動かせないので、舞台の外へ出した。広告が出ない(空・遮断)ときと閉じたときは頁を伸ばさない: 非表示の間は枠を頁の上(top 0)に退かせる */
#fads .fa1 { --x: 60; --y: 204; --w: 124; --h: 81; --ax: 1; --ay: 2; --r: .3; --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) .fa1, #fads .fa1:not(.has), #fads:not(.on) .fa2, #fads .fa2:not(.has) { top: 0; }
#fads .fa1::after, #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 .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; }
}