/* ============================================================
   追従メニュー（右下の丸いクイックメニュー）― 共通部品
   ============================================================
   eichinomizu-a（ドメイントップ・howto.html）と eichinomizu-blog の
   両方から <link> で読み込む、たった1つの実体。
   ここを直せば両サイトに同時に反映される。他のファイルに同じ内容を
   コピーして持たないこと（過去に片方だけ更新して食い違う事故があった）。

   サイトごとの色の違いは var(--ink) / var(--line) / var(--paper) / var(--gold)
   という、両サイトの:rootで共通して定義されている変数名で吸収する。
   このファイル内で新しい変数名は増やさない（両方に定義がある名前だけ使う）。
   ============================================================ */
.floating{position:fixed;right:22px;bottom:22px;z-index:70;
  display:flex;align-items:center;gap:0;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;padding:7px 6px;
  box-shadow:0 12px 28px -16px rgba(58,42,33,.5);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.floating.show{opacity:1;transform:none;pointer-events:auto}
.fl-ico{display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;color:var(--ink);padding:0 11px;position:relative;
  background:none;border:none;font:inherit;-webkit-appearance:none;appearance:none;
  transition:color .35s ease,transform .35s ease}
.fl-ico:not(:first-child)::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.fl-ico svg{width:16px;height:16px;stroke-linecap:round;stroke-linejoin:round}
.fl-cap{font-size:10px;letter-spacing:.03em;line-height:1;white-space:nowrap;font-weight:500}
.fl-ico:hover{color:var(--gold);transform:translateY(-2px)}

@media(max-width:760px){
  .floating{right:12px;bottom:12px;padding:6px 4px}
  .fl-ico{padding:0 8px}
  .fl-ico svg{width:15px;height:15px}
}