:root {
    --bg-color: transparent; /* 背景を完全に透明化して奥の背景画像を透過 */
    --tea-drop-color: #d46a1c; 
    --tea-glass-color: #bc611e; 
}

/* 🧱 全体のコンテナ設定 */
.tea-viewport {
    position: relative;
    width: 100%;
    background: transparent !important;
    border: none;             
    padding-top: 0px !important; 
    margin-top: 0px !important;
}

/* 🚨【今回の核心】お茶のアニメーション空間を上から250pxの位置に100%完全固定（スクロール拒否） */
#stage {
    position: fixed !important;       /* 画面に強制固定 */
    top: 250px !important;            /* ご指定通り、上から250pxの位置にロック */
    left: 0 !important;
    width: 100% !important;
    height: 400px !important;          /* 400pxの高さ空間を維持 */
    overflow: hidden !important; 
    z-index: 2147483645 !important;   /* すべての背景シートを突き破る最前面 */
    pointer-events: none !important;    /* 操作を下の本文へ突き抜けさせる */
    background: transparent !important;
    background-color: transparent !important;
}

/* 🚨【中央侵入禁止】茶葉単体の移動基準を、中央ではなく「左右の端（余白50px）」に完全隔離 */
.leaf {
    position: absolute !important;
    width: 44px !important; 
    height: 44px !important;
    transform-origin: center center;
    /* 18秒かけた優雅な集散移動アニメーション */
    transition: left 18s cubic-bezier(0.4, 0, 0.2, 1), 
                top 18s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 99999 !important;
}

/* 茶葉が常にふらふらと浮遊する無限アニメーション */
.leaf svg {
    width: 100%;
    height: 100%;
    display: block;
    animation: floatPattern 5s ease-in-out infinite alternate;
}

/* 茶葉の形状変化（よじれる・開く）の時間を1秒に設定 */
.leaf svg path {
    transition: d 1s cubic-bezier(0.2, 1, 0.3, 1) !important;
}

@keyframes floatPattern {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-7px) translateX(3px) rotate(3deg); }
    100% { transform: translateY(6px) translateX(-4px) rotate(-4deg); }
}

/* 紅茶の雫（しずく） */
.tea-drop {
    position: absolute !important;
    width: 10px !important;
    height: 15px !important;
    background-color: var(--tea-drop-color) !important;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important;
    transform-origin: top center;
    box-shadow: 0 1px 4px rgba(212, 106, 28, 0.3) !important;
    animation: dropFall 1.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards !important;
    z-index: 99990 !important;
}

@keyframes dropFall {
    0% { transform: scale(0.3) translateY(0); opacity: 0; }
    15% { transform: scale(1.1) translateY(3px); opacity: 1; }
    100% { transform: scale(0.6, 1.4) translateY(400px); opacity: 0; } 
}

/* 背景ダミー文字の非表示（本文の邪魔をしない） */
.center-title {
    display: none !important;
    visibility: hidden !important;
}

/* 📱 スマホ専用レスポンシブ最適化 */
@media (max-width: 767px) {
    #stage {
        top: 200px !important; /* スマホ時は110pxガラスの下に合わせ、上から200pxへ自動引き上げ */
        height: 350px !important;
    }
}