/* 電話案内の透かしは元の位置と薄さを保ち、不透明度だけで静かに現す。 */
.call { position: relative; isolation: isolate; overflow: hidden; }
.call > :not(.sakura-watermark) { position: relative; z-index: 1; }
.sakura-watermark {
  --watermark-strength: .14;
  position: absolute; top: 50%; left: calc(50% + 220px);
  transform: translate(-50%, -50%); width: 360px; height: 360px;
  opacity: var(--watermark-strength); pointer-events: none; z-index: 0;
}
.sakura-watermark img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sakura-watermark.managed { opacity: 0; transition: opacity .35s ease; }
.sakura-watermark.managed.is-visible {
  opacity: var(--watermark-strength);
  transition-duration: 1.2s; transition-delay: .12s;
}
/* 電話案内の背景色をつなげ、帯を塗り分けず一本の線で奥付を区切る。 */
footer {
  padding: 0 0 23px;
  background: rgba(109,130,103,.09);
}
footer .wrap { align-items: center; gap: 12px 24px; }
footer .wrap::before { content: ""; flex: none; width: 100%; height: 1px; background: var(--rule); }
@media (max-width: 820px) {
  .sakura-watermark { --watermark-strength: .10; left: 72%; width: 288px; height: 288px; }
  footer .wrap { align-items: flex-start; gap: 6px; }
}
/* ホイールや案内リンクで大きく移動しても、輪が急に消えないようにする。 */
@media (min-width: 1181px) and (min-height: 800px) {
  .badge-study { transition: opacity .55s cubic-bezier(.22,.61,.36,1); }
  .badge-study.is-returning { transition-duration: .9s; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-study, .sakura-watermark.managed { transition: none; }
}
@media print { .sakura-watermark.managed { opacity: var(--watermark-strength); transition: none; } }