* {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }

  /* ============== ② CSS（ここから） ============== */
  :root {
    --iol-logo: #2FA8D8;
    /* ロゴのブルー（固定） */
    --iol-accent: #C99230;
    /* 「4」の色 → ゴールド #C99230 / ブルー #2FA8D8 に切替可 */
    --iol-bg: #FFFFFF;
    /* ローダー背景 */
  }

  #io-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--iol-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    will-change: transform;
  }

  #io-loader.is-done {
    animation: iol-exit .85s cubic-bezier(.7, 0, .2, 1) forwards;
    pointer-events: none;
  }

  @keyframes iol-exit {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(-101%);
      opacity: 0;
    }
  }

  #io-loader .iol-mark {
    width: min(300px, 54vw);
    height: auto;
    overflow: visible;
  }

  #io-loader .iol-io rect,
  #io-loader .iol-dot {
    fill: var(--iol-logo);
  }

  #io-loader .iol-4-diag rect,
  #io-loader .iol-4-cross rect {
    fill: var(--iol-accent);
  }

  #io-loader .iol-io {
    animation: iol-scan .9s cubic-bezier(.2, .8, .3, 1) .15s both;
  }

  #io-loader .iol-dot {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: iol-pop .5s cubic-bezier(.3, 1.5, .5, 1) .35s both, iol-dotfade .4s ease 1.05s forwards;
  }

  #io-loader .iol-4-diag {
    animation: iol-grow-down .6s cubic-bezier(.4, 0, .2, 1) .5s both;
  }

  #io-loader .iol-4-cross {
    animation: iol-grow-right .8s cubic-bezier(.4, 0, .2, 1) .75s both;
  }

  #io-loader .iol-cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: iol-cap .6s cubic-bezier(.2, .7, .2, 1) 1.7s both;
  }

  #io-loader .iol-cap .a {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: clamp(13px, 2vw, 16px);
    letter-spacing: 8px;
    color: #3d8aa8;
  }

  #io-loader .iol-cap .a i {
    display: block;
    width: 36px;
    height: 1px;
    background: #9bcfe2;
  }

  #io-loader .iol-cap .y {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 4px;
    color: #8aa0b5;
  }

  #io-loader .iol-bar {
    width: 170px;
    height: 2px;
    background: #e1edf1;
    border-radius: 2px;
    overflow: hidden;
  }

  #io-loader .iol-bar i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--iol-logo);
    transform-origin: 0% 50%;
    transform: scaleX(0);
    animation: iol-fill 1.9s cubic-bezier(.5, .1, .2, 1) .12s both;
  }

  @keyframes iol-scan {
    from {
      clip-path: inset(0 0 100% 0);
    }

    to {
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes iol-grow-down {
    from {
      clip-path: inset(0 0 100% 0);
    }

    to {
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes iol-grow-right {
    from {
      clip-path: inset(0 100% 0 0);
    }

    to {
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes iol-pop {
    0% {
      opacity: 0;
      transform: scale(0);
    }

    70% {
      opacity: 1;
      transform: scale(1.12);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes iol-dotfade {
    to {
      opacity: 0;
      transform: scale(.4);
    }
  }

  @keyframes iol-cap {
    from {
      opacity: 0;
      transform: translateY(16px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes iol-fill {
    to {
      transform: scaleX(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {

    #io-loader .iol-io,
    #io-loader .iol-4-diag,
    #io-loader .iol-4-cross,
    #io-loader .iol-bar i {
      clip-path: none;
      animation: none !important;
    }

    #io-loader .iol-dot,
    #io-loader .iol-cap {
      opacity: 1;
      transform: none;
      animation: none !important;
    }
  }