/* フィルタボタンのコンテナ */
.filter-buttons {
    margin-bottom: 20px;
    display: flex; /* ボタンを横並びにする */
    gap: 10px;    /* ボタン間のスペース */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
}

/* 共通のフィルタボタンのスタイル */
.filter-buttons button {
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s, border-color 0.2s;
}

/* ホバー時のスタイル */
.filter-buttons button:hover {
    background-color: #e0e0e0;
}


.tooltip { /* 補足説明するテキストのスタイル */
    position: relative;
    cursor: pointer;
    padding: 2px;
    font-size: 0.7em;
    color: #4682b4;
}

.description_top { /* ツールチップのスタイル */
    z-index: 10000;
    width: 80px; /* 横幅 */
    position: absolute;
    left: 50%;
    bottom: 0%; /* Y軸の位置 */
    transform: translateX(-50%);
    margin-bottom: 8px; /* テキストとの距離 */
    padding: 8px;
    border-radius: 10px; /* 角の丸み */
    background-color: #666;
    font-size: 1em;
    color: #fff;
    text-align: center;
    visibility: hidden; /* ツールチップを非表示に */
    opacity: 0; /* 不透明度を0％に */
    transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
}

.tooltip:hover .description_top { /* マウスオーバー時のスタイル */
    bottom: 50%; /* Y軸の位置 */
    visibility: visible; /* ツールチップを表示 */
    opacity: 1; /* 不透明度を100％に */
}