
.fm-totop {
  position: fixed; z-index: 990; 
  right: var(--fm-totop-r, 16px);
  bottom: var(--fm-totop-b, 32px);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--fm-c-ink, #212126);
  -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--fm-t-ui, .3s) var(--fm-ease, ease-in-out),
              visibility 0s var(--fm-ease, ease-in-out) var(--fm-t-ui, .3s); 
}
.fm-totop[data-fm-dock] { bottom: var(--fm-totop-b, 88px); }
.fm-totop[data-fm-on] { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.fm-totop::before {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  border: 1px solid rgba(33, 33, 38, .55); 
  background: linear-gradient(180deg, #FFFFFF 0%, #FCF2E7 100%);
  box-shadow: 0 2px 8px rgba(33, 33, 38, .08);
  transition: border-color var(--fm-t-ui, .3s) var(--fm-ease, ease-in-out);
}
.fm-totop__icon { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .fm-totop:hover::before { border-color: #212126; }
}
@media (min-width: 768px) {
  .fm-totop { right: var(--fm-totop-r, 32px); }
}

body.gnav-active .fm-totop,
body.gnav-open .fm-totop,
html.is_nav_open .fm-totop { opacity: 0; visibility: hidden; pointer-events: none; }

.fm-noteback {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 8px 0 0; padding: 0 8px 0 0;
  border: 0; border-radius: 22px; background: none; color: var(--fm-c-ink, #212126);
  font: 400 14px/1.5 var(--fm-font-ja); letter-spacing: .04em; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fm-noteback[hidden] { display: none; }
.fm-noteback__icon { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.fm-noteback__icon::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(33, 33, 38, .55);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCF2E7 100%);
  box-shadow: 0 2px 8px rgba(33, 33, 38, .08);
  transition: border-color var(--fm-t-ui, .3s) var(--fm-ease, ease-in-out);
}
.fm-noteback__icon svg { position: relative; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .fm-noteback:hover .fm-noteback__icon::before { border-color: #212126; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-totop, .fm-totop::before { transition: none; }
  .fm-noteback__icon::before { transition: none; }
}
@media print {
  .fm-totop { display: none !important; }
  .fm-noteback { display: none !important; }
}
