/* 非表示のスタイル */
.hidden {
    display: none; /* 完全に領域を消す */
}

/* グラフ */
.chart-container {
    width: 80%;
    max-width: 600px;
    height: 600px;
    margin: 20px auto;
}

/* ランキング */
.ranking-container {
    width: 80%; /* 表全体の幅を円グラフと同じくらいに調整 */
    max-width: 600px; /* 最大幅を円グラフと一致させる */
    margin: 20px auto; /* 自動で中央揃え */
}

.ranking-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    table-layout: auto;
}

.ranking-container th,
.ranking-container td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.ranking-container th {
    background-color: #4CAF50;
    color: white;
    text-align: center;
}

.rank {
    width: 15%;
    text-align: center;
    vertical-align: middle; /* 垂直方向の中央揃え */
}

.image img {
    max-width: 50px;
    max-height: 50px;
}

/* キャラクター情報セル */
td.bar {
    display: flex; /* 横並びのレイアウト */
    align-items: center; /* 垂直方向を中央揃え */
    gap: 10px; /* 画像とテキストの間に余白 */
    width: 100%; /* 親要素の幅を占有 */
    padding: 5px; /* 余白を追加 */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}

/* キャラクター画像のスタイル */
.bar img {
    height: 50px; /* 画像の高さを調整 */
    width: auto; /* アスペクト比を維持 */
    object-fit: contain; /* 画像を縮小して比率を保つ */
    flex-shrink: 0; /* 画像が縮まないようにする */
}

/* キャラクター名と採用率バーを縦並びに配置 */
.bar-content {
    display: flex;
    flex-direction: column; /* 縦並び */
    gap: 5px; /* 名前とバーの間に余白 */
    flex-grow: 1; /* テキスト領域が残りの幅を埋める */
}

/* キャラクター名と採用率 */
.bar-content .info {
    font-size: 14px; /* フォントサイズ */
    line-height: 1.5; /* 行間を調整 */
    white-space: nowrap; /* 改行を防止 */
    overflow: hidden; /* はみ出たテキストを隠す */
    text-overflow: ellipsis; /* 長いテキストは省略記号を表示 */
    text-align: left; /* 左寄せ */
}

/* 採用率バー */
.bar-progress {
    position: relative;
    height: 10px; /* バーの高さ */
    background-color: #ddd; /* 背景色（灰色） */
    width: 100%; /* 親要素の幅に合わせる */
    border-radius: 5px; /* 丸みを付ける */
    overflow: hidden; /* はみ出しを隠す */
}

.bar-progress div {
    position: absolute;
    height: 100%; /* バーの高さを親要素に合わせる */
    background-color: #4CAF50; /* 緑色のバー */
    width: 50%; /* 使用率に応じた幅を動的に調整 */
    border-radius: 5px; /* 丸みを一致させる */
}

.count {
    width: 15%;
    text-align: center;
    vertical-align: middle; /* 垂直方向の中央揃え */
}

/* 全て表示ボタン */
.ranking-toggle-button {
    font-size: 14px; /* ボタンのフォントサイズを調整 */
    padding: 10px 20px; /* ボタンの余白を広げる */
    width: 80%; /* ボタンの幅を適度に広げる */
    margin: 10px auto; /* 中央揃え */
}

/* 小さい画面用のスタイル */
@media (max-width: 768px) {
    .ranking-container {
        width: 100%; /* 画面幅に合わせて広げる */
        max-width: none; /* 最大幅の制限を解除 */
        margin: 10px auto; /* 少しコンパクトに */
    }

    .chart-container {
        width: 100%; /* グラフの幅を画面に合わせる */
        height: auto; /* 高さを自動調整 */
    }

    .ranking-container th,
    .ranking-container td {
        font-size: 12px; /* フォントサイズを小さく調整 */
        padding: 8px; /* 余白を調整 */
    }

    .count {
        display: none; /* 採用数を非表示（必要に応じて調整） */
    }

    .rank, .count {
        width: auto; /* 列幅を動的に調整 */
        text-align: center; /* 中央揃えを維持 */
    }

    .bar-content {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 左揃え */
    }

    .bar img {
        max-width: 40px; /* キャラクター画像を縮小 */
        max-height: 40px;
    }

    .bar-content .info {
        font-size: 12px; /* テキストのサイズを小さく */
        line-height: 1.2; /* 行間を調整 */
    }

    .ranking-toggle-button {
        font-size: 12px;
        padding: 8px 16px;
        width: 90%; /* スマホで少し広めに */
    }
}