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

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

/* 🚨【スクロール完全無視 ＆ 120px完全固定】
   最大幅の縛りがあるmainの外側（BODY直下）で動作するため、画面全体100vwの幅を使って上から120pxの位置にロックされます */
.island-group {
    position: fixed !important;       /* 画面に強制固定 */
    top: 120px !important;            /* 他のページと同じく、上から120pxの位置に完全ロック */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;         /* 1280〜1920pxの画面全体を100%カバー */
    max-width: 1920px !important;     /* テーマの幅制限を力技で完全破壊 */
    height: 450px !important;          /* 450pxの高さ空間を維持 */
    overflow: hidden !important; 
    z-index: 2147483645 !important;   /* ガラスのすぐ裏、あらゆる背景シートを突き破る最前面 */
    pointer-events: none !important;    /* 操作を下の本文へ突き抜けさせる */
    background: transparent !important;
    background-color: transparent !important;
}

/* 🚨【中央900pxを完璧に避ける：左側エリア】
   kumo1〜kumo4（左側の雲たち）が左余白100px・幅200px内に収まるように配置 */
.island.kumo1, .island.kumo2, .island.kumo3, .island.kumo4 {
    position: absolute !important;
    left: 100px !important;           /* 🚨左余白100px起点 */
    max-width: 200px !important;      /* 🚨ご指定の200px幅に制限 */
    z-index: 99999 !important;
}

/* 🚨【中央900pxを完璧に避ける：右側エリア】
   kumo5〜kumo8（右側の雲たち）が右余白100px・幅200px内に収まるように配置 */
.island.kumo5, .island.kumo6, .island.kumo7, .island.kumo8 {
    position: absolute !important;
    right: 100px !important;          /* 🚨右余白100px起点 */
    max-width: 200px !important;      /* 🚨ご指定の200px幅に制限 */
    z-index: 99999 !important;
}

/* 📱 スマホ専用レスポンシブ最適化 */
@media (max-width: 767px) {
    .island-group {
        top: 110px !important;
        height: 350px !important;
    }
    .island.kumo1, .island.kumo2, .island.kumo3, .island.kumo4 {
        left: 15px !important;
        max-width: 40px !important;
    }
    .island.kumo5, .island.kumo6, .island.kumo7, .island.kumo8 {
        right: 15px !important;
        max-width: 40px !important;
    }
}
