/* =========================================================
   ローディング（ロゴがグルグル回る）
   ========================================================= */
.loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:var(--white);
  transition:opacity .7s ease, visibility .7s ease;
}

.app.is-loaded .loader{
  opacity:0;
  visibility:hidden;
}

.loader__spin{
  width:96px;
  height:96px;
  animation:spin 1.4s cubic-bezier(.6,.1,.3,1) infinite;
}

.loader__name{
  font-family: var(--serif);
  font-size:16px;
  text-align: center;
  letter-spacing:.18em;
  color:var(--text);
  animation:fadeUp .8s ease .25s forwards;
}

.loader__name small{
  display:block;
  font-size:11px;
  letter-spacing:.3em;
  color: var(--peach);
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}