/* body全体 */
body {
    margin: 0;
    font-family: sans-serif;
}

/* 左メニュー */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;

    width: 200px;
    height: 100vh;

    background: #333;
    color: white;

    padding: 10px;
    box-sizing: border-box;

    overflow-y: auto;
}

/* メニューリンク */
.sidebar a {
    display: block;
    color: white;
    padding: 8px;
    text-decoration: none;
}

.sidebar a:hover {
    background: #555;
}

/* 右コンテンツ */
.content {
    margin-left: 200px;
    padding: 20px;
}

/* DBから読み込んだテーブルのスタイル */
table {
    border-collapse: collapse;
    width: 100%;
    font-family: sans-serif;
}

th {
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: left;
}

td {
    padding: 10px;
    border: 1px solid #ccc;
}

tr:hover {
    background: #dff0ff;
}

/*========================
  ハンバーガーボタン
========================*/

.menu-btn{
    display:none;
}

/*========================
  スマホ
========================*/

@media (max-width:768px){

    .menu-btn{

        display:block;

        position:fixed;

        top:10px;
        left:240px;

        z-index:1001;

        background:#333;
        color:white;

        border:none;

        padding:10px 15px;

        font-size:18px;

        border-radius:5px;
    }

    .sidebar{

        left:-220px;

        transition:.3s;

        z-index:1000;

        width:200px;
    }

    .sidebar.show{

        left:0;
    }

    .content{

        margin-left:0;
        padding-top:60px;
    }

}
/*========================
  テーブル表示
========================*/
.data_table {
    width: 100%;
    border-collapse: collapse;
}

.table_scroll {
    max-height: 100vh;
    overflow-y: auto;
}

.data_table th {
    position: sticky;
    top: 0;
    background: #333;
    color: white;
    z-index: 10;
    border: 1px solid white;
}

.data_table td {
    padding: 10px;
    border: 1px solid #ccc;
}