/* ===== 背景のビデオとシェーダー ===== */
    .video-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background: #000;
      pointer-events: none;
    }

    .video-fallback {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.3s ease;
      background: #000;
    }

    .video-fallback img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.05);
    }

    body.is-mobile-poster #youtube-player {
      display: none;
    }

    body.is-mobile-poster .video-fallback {
      opacity: 1;
    }

    #youtube-player {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 177.78vh;
      height: 100vh;
      min-width: 100vw;
      min-height: 56.25vw;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    #youtube-player iframe {
      width: 100% !important;
      height: 100% !important;
      border: 0;
      pointer-events: none;
    }

    .shader-bg {
      position: fixed;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
    }

    .shader-inner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: max(100vw, 100vh);
      height: max(100vw, 100vh);
      transform: translate3d(-50%, -50%, 0) scale(1);
      transform-origin: center center;
      will-change: transform;
      overflow: hidden;
      pointer-events: none;
      opacity: 0.7;
    }

    #shaderSlot,
    #shaderSlot > * {
      width: 100%;
      height: 100%;
    }

    #shaderSlot media-shader {
      width: 100% !important;
      height: 100% !important;
      border: 0;
      pointer-events: none;
    }

    /* ===== text reveal ===== */
    .js-text-reveal {
      white-space: pre-wrap;
    }

    .js-text-reveal .char {
      opacity: 0;
      display: inline-block;
      transition: opacity 0.3s ease;
    }

    .js-text-reveal .char.show {
      opacity: 1;
    }

    /* ===== blur reveal ===== */
    .js-blur-reveal {
      opacity: 0;
      /* filter: blur(24px);
      transform: scale(0.98); */
      transition: opacity 0.1s ease, filter 0.8s ease, transform 0.5s ease;
      will-change: opacity, filter;
    }

    .js-blur-reveal[data-visible="true"] {
      opacity: 1;
      /* filter: blur(0);
      transform: scale(1); */
    }


    /* ===== card ===== */

    /* JSで準備完了時に付与するクラス */
    .js-rotate-card.is-ready {
      opacity: 0;
      transform:
        rotateY(-180deg);
      will-change: transform, opacity;
    }

    /* 画面に入ったらJSで付与するクラス */
    .js-rotate-card.is-inview {
      animation: cardRotateIn 0.8s cubic-bezier(.2, .8, .2, 1) forwards;
      animation-delay: calc(var(--col-order, 0) * 120ms);
    }

    @keyframes cardRotateIn {
      100% {
        opacity: 1;
        transform:
          rotateY(0);
      }
    }