/* レスポンシブテーブルのスタイル */
@media screen and (max-width: 768px) {
We 
    .reservation-table {
        width: 100%;
    }


    .reservation-table tbody tr {
        display: block;
        margin-bottom: 1em;
        border: 1px solid #ddd;
    }

  
    .reservation-table th {
        display: block;
        background: #f5f5f5;
        padding: 0.5em;
    }


    .reservation-table td {
        display: flex;
        align-items: center;
        min-height: 3em; /* 最小の高さを確保 */
        padding: 0.5em;
        border-bottom: 1px solid #eee;
    }

   
    .reservation-table td:last-child {
        border-bottom: none;
    }


    .reservation-table td::before {
        content: attr(data-label);
        font-weight: bold;
        width: 120px; /* データラベルの幅を統一 */
        min-width: 120px; /* 最小幅を固定 */
        margin-right: 1em;
        color: #666;
    }

    /* 空のセルでも高さを確保 */
  
    .reservation-table td:empty {
        min-height: 3em;
        display: flex;
    }

    /* 空のセルでもdata-labelを表示 */
 
    .reservation-table td:empty::before {
        content: attr(data-label);
    }

    /* セル内のコンテンツエリア */
    
    .reservation-table td > *:not(:first-child) {
        flex: 1;
        margin-left: 1em;
    }
}