/* 共通スタイル */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
}

.page-wrapper { display: flex; }

/* サイドバー */
.sidebar { width: 220px; background-color: #343a40; color: #fff; height: 100vh; position: fixed; top: 0; left: 0; }
.sidebar-header { padding: 20px; text-align: center; font-size: 1.2em; font-weight: bold; border-bottom: 1px solid #495057; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li a { display: block; padding: 15px 20px; color: #ced4da; text-decoration: none; border-bottom: 1px solid #495057; transition: background-color 0.2s; }
.sidebar-menu li a:hover { background-color: #495057; color: #fff; }
.sidebar-menu li a.active { background-color: #0d6efd; color: #fff; }

/* メインコンテンツ */
.main-content { margin-left: 220px; width: calc(100% - 220px); padding: 20px; }
.container { max-width: 100%; margin: 0 auto; background: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 8px; }

/* 見出し */
h1 { border-bottom: 2px solid #4285f4; padding-bottom: 10px; color: #4285f4; margin-top: 0; }
h2 { font-size: 1.5em; margin-top: 40px; border-bottom: 2px solid #4285f4; padding-bottom: 10px; color: #4285f4; }
h1.blue-theme, h2.blue-theme { border-color: #0d6efd; color: #0d6efd; }

/* テーブル */
.table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; vertical-align: top; font-size: 14px; }
th { font-weight: 600; white-space: nowrap; }
tbody tr:nth-child(odd) { background-color: #f9f9f9; }
tbody tr:hover { background-color: #f1f1f1; }

/* スティッキーカラム */
.sticky-col { position: -webkit-sticky; position: sticky; background-color: #ffffff; z-index: 1; }
td.sticky-col { word-wrap: break-word; word-break: break-all; }
tbody tr:nth-child(odd) .sticky-col { background-color: #f9f9f9; }
tbody tr:hover .sticky-col { background-color: #f1f1f1; }

thead th { position: -webkit-sticky; position: sticky; top: 0; background-color: #f8f9fa; z-index: 2; }
thead th.sticky-col { z-index: 3; }

/* 合計行 */
.total-row td { position: -webkit-sticky; position: sticky; top: 48px; background-color: #e9ecef; font-weight: bold; z-index: 2; }
.total-row td.sticky-col { z-index: 3; }

/* カラム幅バリエーション */
.first-col-120 { width: 120px; min-width: 120px; left: 0; }
.first-col-150 { width: 150px; min-width: 150px; left: 0; }
.first-col-200 { width: 200px; min-width: 200px; left: 0; }
.first-col-300 { width: 300px; min-width: 300px; left: 0; }
.second-col-120 { width: 120px; min-width: 120px; left: 200px; }
.second-col-200-at150 { width: 200px; min-width: 200px; left: 150px; }
.second-col-200-at200 { width: 200px; min-width: 200px; left: 200px; }
.second-col-250 { width: 250px; min-width: 250px; left: 150px; }
.third-col-200 { width: 200px; min-width: 200px; left: 400px; }

/* メッセージ */
.message { padding: 15px; border-radius: 4px; margin-top: 20px; }
.message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.message.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* グラフ関連 */
.chart-controls { margin: 20px 0; display: flex; align-items: center; gap: 10px; }
.chart-controls label { font-weight: bold; }
.chart-controls select { padding: 8px; border-radius: 4px; border: 1px solid #ccc; font-size: 1em; }
.chart-container { position: relative; height: 350px; width: 100%; margin-top: 10px; }

/* 幅広テーブル */
table.wide-table { min-width: 1800px; }