:root {
    /* ボタン位置（px でも % でも可） */
    --x: 50%;
    --y: 70%;
    /* フェード時間 */
    --fade-duration: 600ms;
    /* 長押し閾値 */
    --longpress-ms: 500;
}

#bg-fader {
    position: fixed;
    inset: 0;
    pointer-events: none; /* 背景はクリック不可 */
    isolation: isolate;  /* 独立コンポジット（ブラウザによる） */
}
#bg-fader::before,
#bg-fader::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity var(--fade-duration) ease-in-out, filter var(--fade-duration) ease-in-out;
    will-change: opacity;
}
/* 下層（初期背景A） */
#bg-fader::before {
    /* background-image: url("../img/wall01-1.jpg"); */
    background-size: 120%;
    opacity: 1;
}
/* 上層（フェード先B） */
#bg-fader::after {
    /* background-image: url("../img/wall02.jpg"); */
    background-size: 120%;
    opacity: 0.2;
}
/* data-stateで切替 */
#bg-fader[data-state="b"]::after { opacity: 1; }
#bg-fader[data-state="b"]::before { opacity: 0.3; } /* うっすら残したいなら調整 */

/* もう少しドラマチックにしたい場合のフィルタ例（任意） */
#bg-fader[data-state="b"]::after { filter: saturate(1.05) contrast(1.05); }

/* 任意位置ボタン */
.longpress-btn {
    position: fixed;
    display: flex;
    width: 51px;
    height:51px;
    border-radius: 50%;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    z-index: 100;
    padding: 12px 16px;
    font-size: 16px;
    border: none;
    border-radius: 999px;
    background: #002c6d;
    color: #fff;
    box-shadow: 1 13px 3px rgba(0,0,0,0.1);
    background:linear-gradient(to top, #00000034, #13002afb);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* スクロール・ズーム抑制 */
    justify-content: center;
}
.longpress-btn:active {
    filter: brightness(0.95);
    transform: translate(-50%, -50%) scale(0.98);
}
.longpress-btn img{
    --animation: kodou;
    --times: alternate;
    --duration: cubic-bezier(0.19, 1, 0.22, 1);
    width: 200px;
    height: auto;
    opacity: 1;
    z-index: 100;
    animation: var(--animation) 2000ms var(--duration) infinite var(--times);
    animation-timeline: auto;
    animation-range: contain 0% contain 100%; 
}
@keyframes kodou {
    from {
        opacity: 0.4;
        transform: scale(2.5);
    }
    to {
        opacity: 0.7;
        transform: scale(3.0);
    }
}
@keyframes zoomUp {
    from {
        opacity: 0.4;
        transform: scale(2.5);
    }
    to {
        opacity: 0.7;
        transform: scale(200);
    }
}
/* 長押しの進行を視覚的に示すリング（任意） */
.progress-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    pointer-events: none;
}