:root {
        --color-bg1: #0187CE;
        --color-bg2: #001f4d;

        --color2: 0, 200, 255;
        --color3: 0, 90, 180;
        --color4: 120, 180, 255;
        --color5: 0, 160, 220;
        --color-interactive: 140, 100, 255;

        --circle-size: 120%;
        --blending: hard-light;
    }

    html {
        scrollbar-gutter: stable;
    }

    @keyframes mv-scroll-line {
        0%   { transform: translateY(-110%); }
        100% { transform: translateY(110%); }
    }

    .animate-mv-scroll-line {
        animation: mv-scroll-line 1.6s linear infinite;
    }

    #mv-catchcopy {
        -webkit-text-stroke: 1px white;
        -webkit-text-fill-color: transparent;
    }

    .marquee-inner {
        color: rgba(255, 255, 255, 0.3);

        mix-blend-mode: overlay;
        filter: drop-shadow(0 0 5px rgba(var(--color1), 0.2));
        will-change: transform, opacity;
    }

    /* テキスト3コピー分の 1/3 でシームレスループするキーフレーム */
    @keyframes marquee-text-mobile {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-33.333%);
        }
    }

    @media (max-width: 767px) {
        .marquee-inner.animate-bg-scroll {
            animation-name: marquee-text-mobile;
            animation-duration: 27s;
        }
    }

    #webgl {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        outline: none;
        opacity: 0;
        transition: opacity 0.5s ease;
        background: transparent !important;
        /* z-index: -1; */
    }

    .ui {
        position: fixed;
        left: 20px;
        top: 20px;
        z-index: 2;
        max-width: 500px;
        padding: 14px 16px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.28);
        backdrop-filter: blur(14px);
        color: #ffffff;
        line-height: 1.65;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
        font-size: 14px;
    }

    .ui strong {
        display: block;
        margin-bottom: 6px;
        font-size: 15px;
    }

    .ui code {
        background: rgba(255, 255, 255, 0.16);
        padding: 2px 6px;
        border-radius: 6px;
    }

    @media (max-width: 700px) {
        .ui {
            left: 12px;
            right: 12px;
            top: 12px;
            max-width: none;
            font-size: 13px;
        }
    }

    html,
    body {
        /* overflow-x: hidden !important; */
        width: 100% !important;
    }

    .layout-container,
    .dialog-off-canvas-main-canvas,
    .views-element-container {
        overflow-x: hidden !important;
    }

    #js-solition-area {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* #js-page-top-btn {
        display: none !important;
    } */

    /* 開発用に一旦消す */
    /* header {
        display: none !important;
    } */