* { margin: 0; padding: 0; box-sizing: border-box; }
    /* body { background: #0A0A12; overflow: hidden; } */
    #hero { background: #0A0A12; }

    #hero {
      width: 100vw;
      height: 100vh;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 背景画像：暗めで固定 */
    #bg-image {
      position: absolute;
      inset: 0;
      background: url('/assets/img/mv-bg.jpeg') center/cover no-repeat;
      /* filter: brightness(0.3); */
      z-index: 1;
    }

    /* ロゴの配置と初期状態（アニメーション前） */
    #logo-wrap {
      position: relative;
      z-index: 10;
      opacity: 0; /* 最初は透明 */
      /* アニメーション：名前 時間 タイミング関数 遅延 終了時の状態保持 */
      animation: logoEntry 2.0s cubic-bezier(0.22, 2, 0.1, 1) 0.5s forwards;
      will-change: transform, opacity, filter;
    }

    #logo-wrap img {
      width: clamp(320px, 48vw, 1000px);
      height: auto;
      display: block;
    }

    /* ロゴのアニメーション定義 */
    @keyframes logoEntry {
      0% {
        opacity: 0;
        transform: scale(3.3); /* 奥（アップ）から */
        filter: blur(15px);   /* 深いぼかし */
      }
      /* 動き出しを滑らかにするための中間点 */
      30% {
        opacity: 0.5;
        filter: blur(5px);
      }
      100% {
        opacity: 1;
        transform: scale(1);   /* 中央の定位置へ */
        filter: blur(0px);    /* ぼかしなし */
      }
    }

    /* SCROLLインジケーター */
    .mv__scroll {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      color: #ffffff;
      opacity: 0;
      z-index: 10;
      /* ロゴアニメーションが落ち着いた後に表示 */
      animation: scrollFadeIn 1s ease 2.5s forwards;
    }

    @keyframes scrollFadeIn {
      to { opacity: 0.8; }
    }

    .mv__scroll span {
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.15em;
    }

    /* 矢印のゆっくりとした上下動（目の負担にならないよう低速に） */
    .mv__scroll i {
      font-size: 14px;
      animation: bounce 2s ease-in-out infinite;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(6px); }
    }