#do-follow-container {
    position: fixed;
    right: -220px;
    z-index: 999999 !important;
    display: flex;
    align-items: flex-start;
    transition: right 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#do-follow-container.do-active {
    right: 0;
}

.do-label {
    position: absolute;
    left: -40px;
    top: 0;
    bottom: 0;
    width: 40px;
    writing-mode: vertical-rl;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    user-select: none;
}

#do-follow-container nav {
    width: 220px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 10px;
    border-radius: 0 0 0 8px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

#do-follow-container ul { list-style: none; margin: 0; padding: 0; }
#do-follow-container li { position: relative; opacity: 0; transform: translateX(20px); transition: 0.4s ease; }

#do-follow-container.do-active li { 
    opacity: 1; 
    transform: translateX(0); 
}

#do-follow-container a { text-decoration: none; display: block; padding: 12px; transition: 0.3s; }
#do-follow-container a:hover { background: rgba(255,255,255,0.1); }

/* --- サブメニュー：ふわっと広がるアニメーション --- */
#do-follow-container .sub-menu {
    position: static;
    width: 100%;
    max-height: 0;       /* 最初は高さをゼロに */
    opacity: 0;          /* 最初は透明に */
    overflow: hidden;
    visibility: hidden;
    transform: translateY(-10px); /* 少し上から開始 */
    transition: 
        max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1), 
        opacity 0.4s ease, 
        transform 0.4s ease;
    padding-left: 20px;
    background: rgba(0,0,0,0.1) !important;
    box-shadow: none;
}

/* 親メニューにホバーした時 */
#do-follow-container li:hover > .sub-menu {
    max-height: 1000px;  /* 高さを出して展開 */
    opacity: 1;          /* 不透明に */
    visibility: visible;
    transform: translateY(0); /* 定位置に降りてくる */
}