.hfb{position:fixed;right:20px;bottom:20px;z-index:99990;width:min(var(--hfb-width,380px),calc(100vw - 32px));line-height:0;filter:drop-shadow(0 8px 22px rgba(0,0,0,.17));}
.hfb[hidden]{display:none!important}
.hfb__link{display:block;line-height:0;border:0;text-decoration:none;outline-offset:4px}
.hfb__link img{display:block;width:100%;height:auto;border:0;max-width:none}
/* ×印は元画像に含まれています。その位置に透明の操作ボタンを重ねます。 */
.hfb__close{position:absolute;top:1%;right:1%;width:11%;height:19%;padding:0;margin:0;cursor:pointer;z-index:2;border:0;background:transparent;appearance:none;-webkit-appearance:none;border-radius:6px}
.hfb__close:focus-visible,.hfb__link:focus-visible{outline:3px solid #111;outline-offset:3px}
@media(max-width:600px){.hfb{right:12px;bottom:12px;width:min(340px,calc(100vw - 24px))}}
@media(prefers-reduced-motion:no-preference){.hfb{animation:hfb-enter .25s ease-out both}@keyframes hfb-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}

/* バナーを閉じても右下に残る再表示タブ */
.hfb-reopen{position:fixed;right:0;bottom:26px;z-index:99990;display:flex;align-items:center;justify-content:center;gap:10px;max-width:calc(100vw - 20px);padding:14px 19px 14px 20px;background:#f5c518;color:#111;border:0;border-radius:12px 0 0 12px;box-shadow:0 6px 18px rgba(0,0,0,.20);font-size:13px;font-weight:800;letter-spacing:.03em;line-height:1.4;cursor:pointer;appearance:none;-webkit-appearance:none;transition:transform .2s ease,box-shadow .2s ease}
.hfb-reopen[hidden]{display:none!important}
.hfb-reopen:hover{transform:translateX(-3px);box-shadow:0 8px 24px rgba(0,0,0,.23)}
.hfb-reopen:focus-visible{outline:3px solid #111;outline-offset:3px}
.hfb-reopen__arrow{font-size:18px;line-height:1}
@media(max-width:600px){.hfb-reopen{bottom:18px;padding:12px 15px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.hfb-reopen{transition:none}}

/* 画像の外側の角を切り抜いて、背景色が四隅に残るのを防ぐ */
.hfb__link{border-radius:15px;overflow:hidden}
.hfb__link img{border-radius:15px}

/* マウスオーバー時に一度だけ「ブルッ」と揺れる。閉じるボタンも一緒に動く。 */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .hfb:hover { animation: hfb-shiver .48s ease-in-out both; }
  @keyframes hfb-shiver {
    0%,100% { transform:translateX(0) rotate(0deg); }
    14% { transform:translateX(-4px) rotate(-.7deg); }
    28% { transform:translateX(4px) rotate(.7deg); }
    42% { transform:translateX(-3px) rotate(-.5deg); }
    56% { transform:translateX(3px) rotate(.5deg); }
    72% { transform:translateX(-1px) rotate(-.2deg); }
    86% { transform:translateX(1px) rotate(.2deg); }
  }
}