/* ===== 音符パララックスの土台 ===== */
.has-notes-parallax {
    position: relative;
    overflow: hidden;
    /* はみ出しを隠す */
}

/* 文字やコンテンツを音符より前に出したい場合 */
.has-notes-parallax > * {
    position: relative;
    z-index: 2;
}

/* 音符レイヤー：疑似要素で3レイヤー作る */
.has-notes-parallax::before {
    content: '';
    position: absolute;
    inset: -40px;
    /* 余白：動かしても端が見えないように */
    pointer-events: none;
    z-index: -100;
    opacity: 0.25;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));

    background-image:
        url('../images/onpu_1.webp'), 
        url('../images/onpu_2.webp'),
        url('../images/onpu_3.webp'),
        url('../images/onpu_4.webp'),
        url('../images/onpu_2.webp'),
        url('../images/onpu_3.webp'),
        url('../images/onpu_4.webp');

    background-position:
        6% 7%,
        92% 13%,
        2% 40%,
        92% 35%,
        8% 60%,
        92% 90%,
        8% 94%;

    /* ★ 各画像ごとにサイズ指定 */
    background-size:
        50% auto,
        15% auto,
        20% auto,
        10% auto,
        15% auto,
        15% auto,
        8% auto;

    background-repeat: no-repeat;
}

/* 動きが苦手な人向け：止める */
@media (prefers-reduced-motion: reduce) {
    .has-notes-parallax::before,
    .has-notes-parallax::after {
        transform: none !important;
        will-change: auto;
    }
}

.has-notes-parallax::before {
    transform: translate3d(0, var(--np-y2, 0px), 0);
}