/*
  FLICKS 共通案内バー（各デモサイト共通）
  設置：全ページの </footer> の直後に <aside class="fdb"> を置く
  読込：<head> で書体（IBM Plex Mono / IBM Plex Sans JP）、このCSS、flicks-demo-bar.js を読み込む
  ※デモサイト側のCSSに影響されないよう、クラス名は fdb- で始まるものだけを使用
*/
.fdb{background:#fafafa;color:#141518;border-top:1px solid #d9dbde;font-family:'IBM Plex Sans JP',sans-serif;font-size:14px;font-weight:500;line-height:1.9;text-align:left;letter-spacing:normal}
.fdb *{box-sizing:border-box}
.fdb-in{max-width:1200px;margin:0 auto;padding:28px clamp(20px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.fdb-txt{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:10px}
.fdb-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.fdb-en{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.12em;color:#4054b8}
.fdb-label{font-size:12px;letter-spacing:.08em;border:1px solid #babdc3;padding:2px 8px;border-radius:2px;color:#55585e;line-height:1.6}
.fdb-p{margin:0;color:#33363b;text-wrap:pretty}
.fdb-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.8;color:#55585e}
.fdb-list li{margin:0;padding:0 0 0 1.4em;position:relative;text-wrap:pretty}
.fdb-list li::before{content:"—";position:absolute;left:0;color:#4054b8}
.fdb-nav{flex:1 1 500px;min-width:0;max-width:520px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.fdb-btn{display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 20px;border-radius:2px;text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;line-height:1.5;transition:background .3s,border-color .3s,color .3s}
.fdb-back{border:1px solid #141518;color:#141518}
.fdb-back:hover{border-color:#4054b8;color:#4054b8}
.fdb-cta{background:#4054b8;border:1px solid #4054b8;color:#fafafa;font-weight:600}
.fdb-cta:hover{background:#141518;border-color:#141518;color:#fafafa}
.fdb-ar{font-family:'IBM Plex Mono',monospace}
@media (prefers-reduced-motion:reduce){.fdb-btn{transition:none}}

/* 画面右下に固定されたボタン（ページ上部へ など）に付けると、バーが画面に入ったぶんだけ上に逃がす
   --fdb-lift は flicks-demo-bar.js で更新 */
.fdb-lift{margin-bottom:var(--fdb-lift,0px)}