html.opening-active, html.opening-active body { overflow: hidden; }
  /* ---------- オープニング ---------- */
  #site-intro {
    position: fixed; inset: 0; z-index: 2147483645;
    background: #fff;
    overflow: hidden;
    transition: background-color .9s ease;
  }
  #site-intro.is-green { background: #77dad6; }

  /* ロゴ(差し替え用:SVGやimgに置き換えてください) */
  .opening-logo {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: clamp(32px, 7vw, 64px);
    font-weight: 700; letter-spacing: .18em;
    color: #77dad6;
    opacity: 0; transform: translateY(8px);
    transition: opacity 1s ease, transform 1s ease, color .9s ease;
    z-index: 2;
  }
  #site-intro.is-logo .opening-logo { opacity: 1; transform: none; }
  #site-intro.is-logo-out .opening-logo { opacity: 0; transform: translateY(-8px); transition-duration: .6s; }   /* ロゴは泡が出る前に先に消す */
  #site-intro.is-bubbles .opening-logo { opacity: 0; transition-duration: 1.2s; }

  /* 泡 */
  .opening-bubble {
    position: absolute; bottom: -20vmin;
    width: var(--s); height: var(--s);
    border-radius: 50%;
    background: #fff;               /* 白ベタ */
    opacity: 0;
    animation: opening-rise var(--d) linear var(--delay) infinite;  /* 等速で止まらず上へ */
    animation-play-state: paused;
  }
  #site-intro.is-bubbles .opening-bubble { animation-play-state: running; }
  @keyframes opening-rise {
    0%   { transform: translate(0, 0); opacity: 0; }
    6%   { opacity: .95; }
    50%  { transform: translate(var(--sway), -75vh); opacity: .95; }
    100% { transform: translate(calc(var(--sway) * -1), -150vh); opacity: .95; }
  }

  .opening-bubbles { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
  #site-intro.is-bubbles .opening-bubbles { opacity: 1; }

  /* ホワイトアウト(intro の外側にあるので縮小に巻き込まれない) */
  .opening-flash {
    position: fixed; inset: 0; z-index: 2147483646;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.1s ease;
  }
  .opening-flash.is-white { opacity: 1; }
  .opening-flash.is-clear { opacity: 0; transition-duration: 1s; }

  @media (prefers-reduced-motion: reduce) {
    .opening-bubble { display: none; }
  }

#site-intro { display: none; }
html.opening-active #site-intro { display: block; }
.opening-bubbles canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#site-intro .opening-logo img { display: block; width: min(72vw, 480px); height: auto; max-width: 100%; }