/*flexboxに<a>要素を最適化*/
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    height: 100%; /*Flexboxで高さを計算するための基準 */
    width: 100%;
    margin: 0;
    padding: 0;
}


body {
    height: 100%; /* ビューポートの高さ全体を使用 */
    position: relative; /* ホームボタンの絶対配置の基準点とする */
    min-height: 100vh;
    margin: 0;
    padding: 40px; 
    box-sizing: border-box;
    background-color: #fff5ee; /* 背景色を設定 */
    
}

.header-top-flex {
    display: flex;
    justify-content: space-between; /* 両端に寄せる */
    align-items: center; /* 垂直方向の中央揃え */
    width: 100%;
    margin-bottom: 10px;
}

.header-button {
    display: flex;
    gap: 10px;/*ボタンどうしの間隔*/
    align-items: center; /* 垂直方向の中央揃え */
}

#header-content {
    /* h1が大きすぎた場合に縮まないようにする */
    flex-shrink: 0; 
}

.toggle-header{
    background-color: #f4f4f4; /* 背景色 */
    color: #333; /* 文字色 */
    padding: 10px 15px;
    border: 1px solid #ddd;
    cursor: pointer; /* マウスオーバー時にカーソルをポインターにする */
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 1.1rem;
    user-select: none; /* テキスト選択を無効化 */
    transition: background-color 0.2s;
}

.toggle-header:hover {
    background-color: #e0e0e0; /* ホバー時の色 */
}

.hidden-content{
    display: none; /* 要素を完全に非表示にする */
    padding: 10px 0;
    border: 1px solid #ddd;
    border-top: none; /* トグルボタンと一体感を出すため */
    border-radius: 0 0 5px 5px;
    background-color: #fff;
}

#description-container {
    border: 1px solid #c0c0c0; /* 枠線でコンテンツを囲む */
    padding: 3px;
    border-radius: 5px;
    background-color: #ffffff; /* 背景を白くして目立たせる */
    width: 100%;
    max-width: 100%;
    margin-bottom: 5px;
}


/* リスト全体のスタイル */
#description-container ul {
    padding-left: 5px;
    list-style: none; /* デフォルトの点を消す */
}

/* リストアイテムのスタイル（視認性向上） */
#description-container ul li {
    margin-bottom: 5px;
    position: relative;
    padding-left: 5px;
}

/* 2階層目のリスト（マップ、データ一覧の具体的な説明）の点を復活 */
#description-container ul ul {
    list-style: disc; /* デフォルトのリストスタイルに戻す */
    margin-top: 5px;
    margin-bottom: 10px;
}

/* 説明コンテナの位置調整（header-main-flexの下に配置） */
#description-container {
    /* width: fit-content; は維持 */
    margin-bottom: 20px; /* 他のコンテンツとの間に余白を追加 */
    /* 必要であれば width を調整 */
    max-width: 100%; 
}

/* 各コントロールグループ（ファイル選択と年度選択）のスタイル */
.control-group {
    display: flex;
    flex-direction: column; /* ラベルと選択を縦に並べる */
    flex-shrink: 0;/*セレクトボックスの表示幅をコントロール*/
    margin-bottom: 20px;
}

.control-group label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.9em;
}

/* ファイル選択と年度選択のドロップダウンのスタイルを揃える */
#fileSelect,
#yearSelector {
    padding: 8px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    min-width: 150px;
    height: 38px; /* 高さを揃える */
}

h1{
    margin: 0; /* マージンをリセット */
    flex-shrink: 0; /* タイトルが縮まないようにする */
    font-size: 2em; /* 必要に応じてフォントサイズを調整 */
}

#title-and-description p{
    margin: 0;/*pのデフォルトマージンをリセット*/
    font-size: 0.9em;
    line-height: 1.6;
}

#main-content-flex {
    display: flex;
    gap: 20px; /* 地図と表の間の間隔 */
    width: 100%;
    /* ホームボタンがコンテンツに重ならないように下部に余白を確保 */
    padding-bottom: 20px;
}

#map {
    width: 60%; /* 指定された幅60% */
    height: 700px; /*高さを固定*/
    flex-shrink: 0; 
}

#data-table-container {
    width: auto; /* テーブルに40%の幅を割り当て */
    max-height: 700px; /* 地図と同じ高さに制限 */
    flex-grow: 0;
    overflow-y: auto; /* データが多い場合はスクロール可能にする */
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

#data-table th:hover {
    background-color: #dcdcdc; /* ホバー時の色 */
}


.to-home {
    display: flex; 
    width: fit-content;     
    padding: 8px 10px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.to-home:hover{
    background-color: #013ab4; 
}

#return-button {
    display: block;
    width: fit-content;
    padding: 10px 15px;
    box-sizing: border-box;
    line-height: normal;
    background-color: #ff5722;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#fileSelect {
    /* 絶対配置を解除し、通常の Flexbox フローに戻す */
    box-sizing: border-box; 
    background: white;
    padding: 8px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    min-width: 200px; /* 幅を少し広げても良い */
    height: 38px;
    /* 一部のブラウザでカスタムスタイルが適用されるのを防ぐ */
    -webkit-appearance: menulist; 
    -moz-appearance: menulist;
    appearance: menulist;
    background-color: white; /* 下の要素が透けないように */
}

#data-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse; /* セルの境界線を結合 */
    margin-top: 15px;
}

#data-table th {
   border: 1px solid #ddd;
    padding: 8px 10px; /* 左右のパディング */
    padding-bottom: 35px; /* ボタンのための下部スペース */
    text-align: left;
    position: relative;
    background-color: #e0e0e0;
    font-weight: bold;
    white-space: nowrap;
}

#data-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    white-space: normal; /* データが長ければ折り返す */
    word-break: break-word; /* 長い単語でも強制的に折り返し */
}

/*常にソート可能な列に見せるためのデフォルト表示*/ 
#data-table th::after {
    content: "並べ替え"; 
    color: #ffffff; 
    background-color: #078f2f;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    /* 位置の調整 */
    position: absolute;
    bottom: 5px;
    left: 50%;        
    text-align:center;          
    transform: translateX(-50%);
    
    /* サイズとフォントの調整 */
    font-size: 15px;        /* 文字サイズを指定 */
    padding: 1px 4px;      /* 内側の余白 */
    white-space: nowrap;   /* テキストが折り返されないようにする */
}


/* ポップアップの最大幅を設定 */
.maplibregl-popup-content {
    max-width: 800px; /*幅変更 */
    padding: 10px 15px; /* 内側の余白も調整可能 */
    font-size: 20px;
}