/* 画面の読み込み中（データを読んで描くまで）: 画面全体を背景色で覆ってスピナーを出す（組み立て途中のちらつき防止）
   各画面の <body> の先頭に <div class="page-loading">。描き終わったら hidePageLoading()（assets/js/page_nav.js）で外す */
.page-loading {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: inherit; /* 画面（body）と同じ背景色 */
  /* JS が失敗しても覆ったままにならないよう、8 秒で消える */
  animation: page-loading-timeout 0s linear 8s forwards;
}
.page-loading::after {
  content: "";
  width: 36px;
  height: 36px;
  border: 3px solid #cbd5e1;
  border-top-color: #0d9488;
  border-radius: 50%;
  animation: page-loading-spin 0.8s linear infinite;
}
@keyframes page-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes page-loading-timeout {
  to {
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-loading::after {
    animation-duration: 2s;
  }
}
@media print {
  .page-loading {
    display: none;
  }
}