/* --- リセット & 基本設定 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: #f8f7fa;
    color: #333;
    display: flex;
    flex-direction: column;
}

/* --- ナビゲーション --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4b0082;
    color: #fff;
    padding: 0 20px;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.logo { font-weight: bold; font-size: 1.2rem; }
.menu { display: flex; list-style: none; }
.menu li a { color: white; text-decoration: none; padding: 20px 15px; display: block; transition: 0.3s; }
.menu li a:hover { background: #6a0dad; }

/* ドロップダウン */
.dropdown { position: relative; }
.dropdown-content {
    display: none; position: absolute; background: #5d2d91;
    min-width: 200px; list-style: none; top: 100%; left: 0;
}
.dropdown-content li a { padding: 12px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.dropdown:hover .dropdown-content { display: block; }

.menu-btn, .menu-icon { display: none; }

/* --- メインコンテンツ --- */
main {
    flex: 1 0 auto;
    padding: 40px 15px;
    max-width: 1300px; /* カラムが増えたため少し広めに設定 */
    margin: 0 auto;
    width: 100%;
}

.page-title {
    text-align: center;
    color: #4b0082;
    font-size: 2rem;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

/* --- テーブルデザイン --- */
.table-scroll {
    overflow-x: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.jazz-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px; /* 項目が多いため最小幅を確保 */
}

.jazz-table th {
    background-color: #4b0082;
    color: #fff;
    padding: 18px 15px;
    text-align: left;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
}

.jazz-table td {
    padding: 18px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    font-size: 0.9rem;
    line-height: 1.6;
}

.jazz-table tr:last-child td { border-bottom: none; }
.jazz-table tr:hover { background-color: #fcfaff; }

/* 各列の幅・装飾調整 */
.col-date { font-weight: bold; color: #4b0082; width: 140px; }
.col-time { width: 140px; color: #666; font-size: 0.85rem; }
.col-shop { font-weight: bold; color: #d63384; width: 160px; }
.col-price { width: 130px; color: #555; }
.col-title { font-weight: bold; color: #222; width: 220px; }
.col-members { color: #555; min-width: 200px; }

/* --- フッター --- */
footer {
    background: #4b0082; color: #fff; text-align: center;
    padding: 40px 20px; flex-shrink: 0;
}
.facebook-link {
    color: #e0b0ff; text-decoration: none; border: 1px solid #e0b0ff;
    padding: 8px 20px; border-radius: 4px; display: inline-block; transition: 0.3s;
}
.facebook-link:hover { background: #e0b0ff; color: #4b0082; }

/* --- レスポンシブ --- */
@media screen and (max-width: 768px) {
    .menu {
        display: none; flex-direction: column; position: absolute;
        top: 60px; left: 0; width: 100%; background: #4b0082;
    }
    .menu-btn:checked ~ .menu { display: block; }
    .menu-icon { display: block; cursor: pointer; padding: 10px; }
    .navicon { background: #fff; display: block; height: 2px; width: 20px; position: relative; }
    .navicon:before, .navicon:after { background: #fff; content: ''; position: absolute; width: 100%; height: 100%; }
    .navicon:before { top: 6px; } .navicon:after { top: -6px; }

    .page-title { font-size: 1.5rem; margin-bottom: 20px; }
}