:root {
            --text-main: #555;
            --box-bg: rgba(255, 255, 255, 0.8); /* リクエスト通り：白の80% */
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'M PLUS Rounded 1c', sans-serif;
            color: var(--text-main);
            line-height: 1.6;
            background-color: transparent;
        }

/* --- iPhone対応：背景固定 --- */
        body::before {
            content: "";
            display: block;
            position: fixed; /* これが固定の魔法 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            /* ▼▼▼ ここで【PC用】の画像を指定 ▼▼▼ */
            background: url('/teaser/assets/onegai/img/bg.webp') no-repeat center center; 
            background-size: cover;
        }

        /* ▼▼▼ ここを追加！【スマホ用】の画像切り替え ▼▼▼ */
        @media (max-width: 768px) {
            body::before {
                /* スマホ用の縦長画像を指定 */
                background-image: url('/teaser/assets/onegai/img/bg_sp.webp');
                /* スマホは顔などが上に来ることが多いので、位置を「上寄せ」にすると安全 */
                background-position: center top;
            }
        }

        .wrapper {
            width: 100%;
            overflow: hidden;
        }
        @media (min-width: 767px) {
            .wrapper {
                margin-top: -10vw;
            }
        }
        @media (max-width: 768px) {
            .wrapper {
                margin-top: -8vw;
            }
        }

        /* --- 共通BOXスタイル（ベースは白80%） --- */
        .glass-box {
            max-width: 820px;
            margin: 20px auto 60px;
            padding: 30px 32px 50px 32px;
            /* 【重要】ここを白の80%に統一 */
            background: var(--box-bg);
            border-radius: 30px;
            /* ガラスの縁（白の半透明） */
            border: 1px solid rgba(255, 255, 255, 0.5);
            text-align: left;
            /* すりガラス効果 */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        /* --- 【発光（グロウ）のカラーバリエーション】 --- */
        /* BOX自体の色は変えず、box-shadow（影・発光）だけ色を変えます */

        /* 1. ピンク発光 */
        .glow-pink {
            box-shadow: 
                0 0 15px rgba(255, 105, 180, 0.6), /* 内側の濃い光 */
                0 0 40px rgba(255, 105, 180, 0.4), /* 外側のぼんやりした光 */
                inset 0 0 10px rgba(255, 255, 255, 0.5); /* BOX内側のツヤ */
        }

        /* 2. ブルー発光 */
        .glow-blue {
            box-shadow: 
                0 0 15px rgba(0, 191, 255, 0.6),
                0 0 40px rgba(0, 191, 255, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.5);
        }

        /* 3. イエロー発光 */
        .glow-yellow {
            box-shadow: 
                0 0 15px rgba(255, 215, 0, 0.6),
                0 0 40px rgba(255, 215, 0, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.5);
        }

        /* アニメーション */
        .fade-in {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1.0s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* グリッドレイアウト */
        .grid-gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /*grid-template-columns: 7fr 3fr;*/
            gap: 12px;
            place-items: center;
        }
        .grid-gallery.start { place-items: start; }
        
        .grid-item {
            background: #fff;
            border-radius: 15px;
            padding: 15px;
            font-size: 0.9rem;
            color: #666;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .grid-full { grid-column: span 2; }

        .txt,
        .txt--middle,
        .txt--small { padding: 0 0.8em; }
        .btn { display: block; width: 222px; margin-top: 20px; margin: 20px auto 0 auto; }
        .btn img { margin: 0 auto; }
        .box01 h2 { margin: 10px 10px 10px 0;}
        .mb--05em { margin-bottom: 0.5em; }
        .icn--link::after { background-image: url(/assets/img/icn_link-blue.webp); }

        @media (max-width: 768px) {
            .glass-box { padding: 5vw 3vw 10vw 3vw; margin: 8vw 5vw; text-align: center; }
            .grid-gallery { grid-template-columns: 1fr; }
            .grid-full { grid-column: span 1; }
            .btn { display: block; width: 50vw; margin-top: 5vw auto 0 auto; }
            ul.txt--small li { text-align: left!important; }
            .font-small { font-size: 2.5vw; }
            .aside--bnr { width: auto; margin: 8vw 5vw;  }
        }