/* ==========================================================================
   ローディングアニメーション(オサカベアが壁に社名を書く)
   - html.js のときだけ表示(JS無効時は出さない)
   - 同じタブで2回目以降は html.no-loader で非表示
   - 万一JSが止まっても head のインラインスクリプトが 9秒後に loader-finished を付けて消す
   ========================================================================== */

:root {
  --ld-bg: #FFFFFF;
  --ld-paint: #C9E7CE;
  --ld-paint-edge: #B7DDBE;
  --ld-ink: #1A1A1A;
  --ld-green: #1F8A47;
  --ld-green-dark: #176B37;
  --ld-green-light: #3FA563;
  --ld-roller: #D9472B;
  --ld-roller-dark: #B5361F;
  --ld-pole: #8B9399;
  --ld-face-dark: #3A2B2A;
  --ld-cheek: #F3A5A0;
}

.loader { display: none; }

.js .loader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: var(--ld-bg);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.js.no-loader .loader,
.js.loader-finished .loader { display: none; }

.js:not(.no-loader):not(.loader-finished) body { overflow: hidden; }

.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-stage {
  width: min(86vw, 500px);
  max-height: 86vh;
  aspect-ratio: 400 / 450;
}

.loader-stage svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.loader-skip {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8A9095;
  font: 500 13px/1 var(--font-base);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.loader-skip:hover,
.loader-skip:focus-visible { color: var(--ld-ink); }

.ld-char {
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 36px;
  fill: var(--ld-ink);
  fill-opacity: 0;
  stroke: var(--ld-ink);
  stroke-width: 1.2;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}