/* ポップアップコンテナのスタイル */
#popup-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none; /* 初期状態では非表示 */
}

/* ポップアップ内のコンテンツ */
#popup-content {
    padding: 20px;
    overflow-y: auto;
    max-height: 80vh;
}

/* 各セクションのスタイル（初期状態では非表示） */
#post-form-section, #photo-upload-section, #post-list-section {
    display: none;
}

/* レスポンシブデザイン */
@media (max-width: 600px) {
    #popup-container {
        width: 100%;
        height: 100%;
        top: 0;
        transform: none;
    }
}

/* フロントエンドのボタンコンテナのスタイル */
#saikyou-frontend-popup-buttons {
    position: fixed;
    left: 10px; /* 画面の左端からの距離 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

/* 各ボタンのスタイル */
#saikyou-frontend-popup-buttons button {
    display: block; /* ブロック要素として表示 */
    margin-bottom: 10px; /* ボタン間のマージン */
    padding: 10px; /* ボタン内のパディング */
    background-color: #f8f9fa; /* ボタンの背景色 */
    color: #333; /* ボタンの文字色 */
    border: 1px solid #ddd; /* ボタンの境界線 */
    border-radius: 5px; /* ボタンの角の丸み */
    text-align: center; /* テキストを中央揃えに */
    cursor: pointer; /* マウスオーバー時のカーソル */
}

/* ボタンのホバー効果 */
#saikyou-frontend-popup-buttons button:hover {
    background-color: #e2e6ea; /* ホバー時の背景色 */
}

/* サイドバーのボックス */
.sidebar-box{
	 height:100%;
    width: 250px;
    background-color: rgba(0,0,0, 0.7);	
	　z-index:500;
}

/* サイドバーのスタイル */
#saikyou-frontend-popup-buttons {
    position: fixed;
    left: -250px; 
    top:60%;
    transition: left 0.5s ease;
}

/* トグルボタンのスタイル */
.toggle-button {
        background-color: rgba(0,0,0, 0.7);
        color: white;
        border: none;
        box-sizing: border-box;
        font-size: 20px;
        width: 100px;
        height: 3em;
        transform: rotate(90deg);
        transform-origin:left bottom;
        position: absolute;
        top:75%!important;
        left: -10px!important;
}


#saikyou-frontend-popup-buttons.open {
    left: 0; /* 開いた状態での位置 */
}