/* style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Meiryo, sans-serif;
    margin: 0; 
    padding: 20px; 
    background-color: #f9f9f9;
}

/* --- ヘッダーレイアウト (2行構成) --- */
.page-header {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.hamburger-btn {
    position: relative;
    z-index: 2000;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 15px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #333; /* ダークグレーの線 */
    transition: all 0.3s ease;
}

/* メニュー展開時のボタン変化（×になる） */
.hamburger-btn.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* メニュー本体（スライドイン） */
.nav-overlay {
    position: fixed;
    top: 0;
    left: -100%; /* 初期状態は画面外 */
    width: 300px;
    height: 100vh;
    background-color: #fff;
    box-shadow: 2px 0 15px rgba(0,0,0,0.1);
    z-index: 1999;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding-top: 80px; /* ボタンを避ける */
}

.nav-overlay.open {
    left: 0;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-list li a {
    display: block;
    padding: 15px 30px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid transparent;
    transition: background 0.2s;
}

.nav-list li a:hover {
    background-color: #f5f5f5;
    border-left-color: #4682b4; /* テーマカラー */
}

.nav-list li a span {
    display: block;
    font-size: 11px;
    color: #888;
    font-weight: normal;
    margin-top: 2px;
}

.nav-divider {
    height: 1px;
    background-color: #eee;
    margin: 10px 30px;
}


/* ヘッダーのレイアウト微調整（ボタンが入るため） */
.page-header {
    /* もし display: flex; になっていなければ追加 */
    display: flex; 
    flex-wrap: wrap;
    align-items: center;
}
.header-title-row {
    /* タイトルとボタンが並ぶように調整 */
    flex-grow: 1;
    border-bottom: none; /* レイアウト崩れ防止のため既存の下線を消す等の調整が必要かも */
}

/* 1行目: タイトル */
.header-title-row {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.header-title-row h1 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

/* 2行目: コントロール群 */
.header-controls-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 検索ボックス */
.search-container {
    position: relative;
}
#search-input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 200px;
}
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
    display: none; 
    z-index: 3000;
}
.search-result-item {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.search-result-item:hover {
    background-color: #f0f8ff;
    color: #007bff;
}

/* フィルターボタン群 */
.main-filter-buttons {
    display: flex;
    gap: 5px;
}
.main-filter-btn {
    padding: 8px 16px;
    font-size: 13px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
}
.main-filter-btn:hover {
    background-color: #f0f0f0;
}
.main-filter-btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

/* --- カスタムドロップダウン（チェックボックス付き） --- */
.custom-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.dropdown-toggle-btn {
    padding: 8px 16px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    min-width: 120px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dropdown-toggle-btn:hover {
    background-color: #f9f9f9;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 3000;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 5px;
}
.dropdown-content.show {
    display: block;
}

.dropdown-header {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    background-color: #f5f5f5;
    font-weight: bold;
    font-size: 12px;
}

.dropdown-list label {
    display: block;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f9f9f9;
    color: #333;
}
.dropdown-list label:hover {
    background-color: #f0f8ff;
}
.dropdown-list input[type="checkbox"] {
    margin-right: 8px;
}

/* ツールグループ（右寄せ） */
.tools-group {
    margin-left: auto; /* 右に寄せる */
}

/* ズームコントロール */
.zoom-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px;
}
.zoom-label {
    font-size: 12px;
    color: #555;
    margin-right: 5px;
    min-width: 80px; /* 数字が変わってもガタつかないように */
}
.zoom-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}
.zoom-btn:hover {
    background-color: #e0e0e0;
}
#btn-zoom-reset {
    width: auto;
    padding: 0 8px;
    font-size: 11px;
}

/* 総合ランキングボタン */
.ranking-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.ranking-btn:hover {
    background-color: #0056b3;
}

/* --- チャート全体レイアウト --- */
.chart-wrapper {
    display: flex;
    overflow: hidden; 
    border: none;
    background-color: #fff;
    height: 75vh; /* 固定高さにする（スクロールしやすくするため） */
    min-width: 100%; 
}

/* --- Y軸ラベル固定エリア (左側) --- */
.y-axis-fixed {
    width: 180px; 
    flex-shrink: 0;
    overflow: hidden; /* 縦スクロールはJSで同期させるためhidden */
    border-right: none !important;
    border-left: none !important;
    background-color: #f9f9f9;
    position: relative;
    z-index: 50;
}

/* Y軸ヘッダー */
.y-axis-header {
    height: 40px; 
    padding: 0 10px; 
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    background-color: #eee; 
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: absolute; /* 固定 */
    top: 0;
    width: 100%;
    z-index: 51;
}

/* Y軸ラベルコンテナ（スクロールする部分） */
#y-axis-labels {
    margin-top: 40px; /* ヘッダー分空ける */
    display: flex;
    flex-direction: column;
    /* transformで動かすのでposition不要 */
}

/* 各Y軸ラベル */
.y-axis-label {
    padding: 0 5px; 
    border-bottom: 1px solid #eee;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box; 
    border: 1px solid #ccc;
    background-color: #fff;
    transition: background-color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.y-axis-label.clickable:hover {
    background-color: #e0e8f0; 
    cursor: pointer;
    text-decoration: underline;
    color: #0056b3;
}

/* スペーサー・タイトル行（Y軸側） */
.y-axis-label.spacer-row-gap {
    background-color: #f9f9f9 !important; 
    border: none !important; /* 上下左右すべての線を消す */
}
.y-axis-label.spacer-row-title {
    background-color: #eaeaea !important; /* 区切りのタイトル背景 */
    border-bottom: 1px solid #ccc !important;
    border-top: 1px solid #ccc !important;
    font-weight: bold;
    font-size: 11px;
    color: #333;
    justify-content: center !important;
}
/* 政党ヘッダーなど */
.y-axis-label.header-row {
    background-color: #f0f0f0;
    font-weight: bold;
    font-size: 11px;
    color: #333;
    border-bottom: 1px solid #ccc;
}

/* --- グラフスクロールエリア (右側) --- */
.chart-scroll-area {
    overflow: auto; /* 両方向にスクロール */
    flex-grow: 1;
    position: relative;
}

/* X軸タイムライン */
#x-axis-timeline {
    height: 40px; 
    position: sticky; 
    top: 0; 
    z-index: 40;
    border-bottom: 1px solid #ccc;
    background-color: #e5e5e5;
    white-space: nowrap; 
    /* widthはJSで設定 */
}
.x-axis-mark {
    position: absolute;
    top: 0;
    font-size: 10px;
    color: #666;
    height: 100%;
    border-left: 1px solid transparent; 
}
.x-axis-mark span {
    position: absolute;
    top: 5px;
    left: 0;
    transform: translateX(-50%);
    font-size: 10px;
}
.x-axis-mark.minor::before { content: ''; position: absolute; top: 25px; left: -1px; height: 5px; border-left: 1px solid #aaa; }
.x-axis-mark.medium::before { content: ''; position: absolute; top: 20px; left: -1px; height: 10px; border-left: 1px solid #888; }
.x-axis-mark.major { color: #000; font-weight: bold; height: 100%; border-left: 1px solid #666; }
.x-axis-mark.major::before { content: ''; position: absolute; top: 20px; left: -1px; height: 20px; border-left: 1px solid #666; }

/* プロットエリア */
#chart-plot-area {
    position: relative;
    /* height, widthはJSで設定 */
}

/* チャート内の罫線（JSで生成） */
.chart-spacer-border {
    /* position等はJSで指定 */
    pointer-events: none;
}

/* グラフバー */
.chart-bar {
    position: absolute;
    background-color: #4682b4;
    border-radius: 4px;
    opacity: 0.9;
    font-size: 10px;
    color: white; 
    font-weight: bold;
    text-align: center;
    overflow: hidden; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box; 
    line-height: 1.1; 
    white-space: nowrap;
    z-index: 10;
}
.chart-bar:hover {
    z-index: 100; /* ホバー時に最前面へ */
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 色設定 */
.chart-bar.non-pm {
    color: #000; 
    background-color: white;
    border: 1px solid #4682b4;
}

.chart-bar.deputy-pm-bar {
    font-weight: 900; 
    border-width: 2px;
    border-color: #333;
}

/* 現職スタイル */
.chart-bar.incumbent.non-pm {
    border-style: solid;
    border-width: 2px;
    border-right: 0;
    border-image: linear-gradient(to right, #4682b4 10%, rgba(70, 130, 180, 0) 100%) 1;
    background-color: white !important;
    color: #000 !important;
    border-radius: 0 !important;
}

.chart-bar.incumbent.highlight-pm {
    border-right: none !important;
}

/* 小さい文字 */
.chart-bar.font-tiny {
    font-size: 8px; 
    font-weight: normal;
}
.chart-bar.vertical-text-lastname {
    writing-mode: vertical-rl; 
    text-orientation: mixed;   
    font-size: 8px;            
}

/* --- カスタムツールチップ --- */
#custom-tooltip {
    position: absolute;
    display: none;
    background-color: rgba(20, 20, 20, 0.95);
    color: white;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-family: sans-serif;
    z-index: 9999;
    pointer-events: none;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    max-width: 320px;
    border: 1px solid rgba(255,255,255,0.1);
}
#custom-tooltip .tooltip-name {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
    border-bottom: 1px solid #555;
    padding-bottom: 4px;
}
#custom-tooltip .tooltip-deputy {
    font-size: 11px;
    color: #f1c40f;
    font-weight: bold;
    margin-bottom: 4px;
}
#custom-tooltip .tooltip-post {
    font-size: 14px;
    color: #eee;
    margin-bottom: 4px;
}
#custom-tooltip .tooltip-kennin {
    font-size: 12px;
    color: #bbb;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #444;
}
#custom-tooltip .tooltip-period {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    text-align: right;
}

/* --- オーバーレイ --- */
#global-overlay { 
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 1999;
}
#global-overlay.open { 
    display: block;
}

/* --- サイドバー共通 --- */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9;
}
.sidebar-header h2 {
    margin: 0;
    font-size: 18px;
}
.close-sidebar-btn {
    font-size: 24px;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
}
.close-sidebar-btn:hover { color: #000; }

.sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

/* --- 右側詳細サイドバー --- */
#details-sidebar {
    position: fixed;
    top: 0;
    right: -600px; /* 幅に合わせて調整 */
    width: 550px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -4px 0 15px rgba(0,0,0,0.1);
    z-index: 2000;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}
#details-sidebar.open {
    right: 0;
}

/* タイムライン（右サイドバー内） */
.sidebar-timeline-container {
    padding: 20px 10px;
    position: relative;
}
.sidebar-timeline-container::before {
    content: '';
    position: absolute;
    /* 線に関する設定を削除または none にします */
    display: none; 
}

.timeline-block {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    min-height: 30px;
}

.timeline-left {
    width: 110px;
    text-align: right;
    padding-right: 15px;
    position: relative;
}
.timeline-date-label {
    font-family: monospace;
    font-size: 11px; 
    color: #666;
    position: absolute;
    right: 15px;
    background-color: rgba(255,255,255,0.9); 
    z-index: 5;
}
.timeline-date-label.start-date { transform: translateY(0); }
.timeline-date-label.end-date { transform: translateY(-100%); }

.timeline-center {
    width: 30px;
    flex-shrink: 0;
    position: relative;
    /* ▼▼▼ 修正: z-indexを0から1に変更して、線(0)より手前にする ▼▼▼ */
    z-index: 1; 
    /* ▲▲▲ 修正 ▲▲▲ */
    border-left: none; 
}

.timeline-center::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* Lane 0 のバー(幅10px)の中心に合わせる */
    left: 4px; 
    width: 2px;
    background-color: #ddd;
    z-index: -1; /* バーより奥に表示 */
}
.timeline-bar {
    width: 10px;
    background-color: #4682b4; 
    z-index: 10; 
    border-radius: 4px; 
    position: absolute;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* カテゴリ別の色 */
.bar-party { background-color: #27ae60; }
.bar-cabinet { background-color: #2c3e50; }
.bar-sub-cabinet { background-color: #647a8f !important; } /* 副長官・補佐官 */
.bar-diet { background-color: #7f8c8d; }
.bar-local { background-color: #e67e22; }

/* 現職グラデーション */
.bar-party.incumbent { background: linear-gradient(to bottom, #27ae60 30%, rgba(39, 174, 96, 0) 100%); }
.bar-cabinet.incumbent { background: linear-gradient(to bottom, #2c3e50 30%, rgba(44, 62, 80, 0) 100%); }
.bar-sub-cabinet.incumbent { background: linear-gradient(to bottom, #647a8f 30%, rgba(100, 122, 143, 0) 100%); }
.bar-diet.incumbent { background: linear-gradient(to bottom, #7f8c8d 30%, rgba(127, 140, 141, 0) 100%); }
.bar-local.incumbent { background: linear-gradient(to bottom, #e67e22 30%, rgba(230, 126, 34, 0) 100%); }

.highlight-pm .timeline-bar { background-color: #c0392b !important; z-index: 20 !important; }
.highlight-pm .timeline-bar.incumbent { background: linear-gradient(to bottom, #c0392b 30%, rgba(192, 57, 43, 0) 100%) !important; }
.highlight-pm .timeline-role-name { color: #c0392b; font-size: 1.1em; }

.timeline-right {
    flex-grow: 1;
    padding-left: 15px;
    position: relative;
    padding-bottom: 10px;
}
.timeline-text-item {
    position: absolute;
    width: 100%;
}
.timeline-role-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.timeline-cabinet-name {
    font-size: 11px;
    color: #666;
}
.president-info { font-size: 11px; color: #555; }
.role-deputy {
    font-size: 10px; 
    border: 1px solid #c0392b; 
    color: #c0392b; 
    padding: 0 2px; 
    border-radius: 2px;
    margin-left: 5px;
}

.timeline-spacer {
    /* 空白期間のスペーサー */
}

/* --- 左側ランキングサイドバー --- */
#ranking-sidebar {
    position: fixed;
    top: 0;
    left: -410px;
    width: 400px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    z-index: 2000;
    transition: left 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}
#ranking-sidebar.open {
    left: 0;
}

.ranking-mode-toggle {
    display: flex;
    background-color: #f9f9f9;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.toggle-btn-rank {
    flex: 1;
    padding: 8px;
    font-size: 13px;
    background: none;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 0 2px;
    border-radius: 4px;
}
.toggle-btn-rank.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.ranking-scope-container {
    padding: 15px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
}
.ranking-scope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.scope-btn {
    padding: 8px;
    font-size: 13px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}
.scope-btn.active {
    background-color: #333;
    color: white;
    border-color: #333;
}

/* ランキングリスト */
#ranking-sidebar-content ol {
    padding-left: 30px;
    margin: 0;
}
.ranking-item {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.ranking-name-link {
    color: #0056b3;
    cursor: pointer;
    text-decoration: underline;
}
.ranking-value {
    font-weight: bold;
}

/* フッター */
.site-footer {
    margin-top: 40px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    border-top: 1px solid #ddd;
    font-size: 12px;
    color: #666;
}
.site-footer a {
    color: #444;
    text-decoration: none;
    margin: 0 5px;
}
.site-footer a:hover { text-decoration: underline; }

.timeline-text-item {
    /* 念のためベースの行間を設定 */
    line-height: 1.2; 
}

.timeline-role-name {
    font-size: 14px;
    line-height: 22px; /* JSの計算(22px)と合わせる */
    margin-bottom: 2px;
}

.timeline-cabinet-name,
.president-info,
.timeline-text-item div {
    font-size: 12px;
    line-height: 16px; /* JSの計算(16px)と合わせる */
}