/* === カテゴリー用のリンクスタイル === */
.c-categoryList__link {
    display: inline-block;
    font-size: 0.9em;
    color: #d9534f; /* 赤系の色 */
    margin: 3px;
    padding: 5px 5px;
    background-color: #fff;
    border: 1px solid #d9534f;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.c-categoryList__link:hover {
    background-color: #f2dede;
}

/* === タグ用のリンクスタイル === */
.c-tagList__link {
    display: inline-block;
    font-size: 0.9em;
    color: #007bff; /* 青系の色 */
    margin: 3px;
    padding: 5px 5px;
    background-color: #fff;
    border: 1px solid #007bff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.c-tagList__link:hover {
    background-color: #e0e0e0;
}



/* サイドバー全体のスタイル */
.l-sidebar {
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff; /* 背景色 */
    border-radius: 5px; /* 角を丸くする */
}

/* 全体のコンテナを定義 */
.content2 {
    display: flex;
}

/* メインコンテンツのスタイル */
#main_content2 {
    flex: 0 0 80%; /* flex-grow: 0, flex-shrink: 0, flex-basis: 80% */
    width: 80%;
    padding: 0px; /* 内側の余白 */
}

/* サイドバーのスタイル */
#sidebar2 {
    position: sticky; /* 位置をスクロールに応じて固定 */
    top: 60px; /* 上部から60pxの位置に固定 */
    flex: 0 0 20%; /* flex-grow: 0, flex-shrink: 0, flex-basis: 20% */
    width: 20%; /* 幅を20%に設定 */
    height: calc(100vh - 80px); /* ビューポート高さから80pxを引いた高さを設定 */
    overflow-y: auto; /* 縦方向にスクロールバーを表示 */
    overflow-x: hidden; /* 横方向のスクロールバーは非表示 */
}


/* スクロールバーのスタイル */
#sidebar2::-webkit-scrollbar {
    width: 8px; /* スクロールバーの幅 */
}

#sidebar2::-webkit-scrollbar-track {
    background: #f1f1f1; /* トラック部分の背景色 */
}

#sidebar2::-webkit-scrollbar-thumb {
    background: #888; /* スクロールバーの色 */
}

#sidebar2::-webkit-scrollbar-thumb:hover {
    background: #555; /* スクロールバーをホバーした時の色 */
}


/* 検索ハイライト */
.highlight {
    background-color: yellow;
}


/* サイドバーの各リストのタイトル */
.sidebar-list__title {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 10px; /* タイトルとリストの間隔 */
    padding: 5px 0; /* タイトルの上下パディング */
    color: #333; /* テキストカラー */
}

/* サイドバーのリストコンテンツ */
.sidebar-list__content, .sidebar-list {
    margin-bottom: 20px; /* 各リスト間の間隔 */
}

.sidebar-list .sidebar-list__content {
    padding-left: 0; 
}



/* カテゴリーのリスト間 */
.sidebar-list__content ul li {
    margin-bottom: 5px; /* liの下部の余白を5pxに設定 */
    line-height: 1.2; /* liの行間を少し狭めに設定 */
}

.sidebar-list__content ul {
    padding-left: 0; /* ulの左パディングを0に設定 */
    list-style-type: none; /* リストマーカーを非表示に */
}


/* 各タグラベルのスタイル */
.sidebar-list .checkbox label {
    display: inline-block; /* ラベルをインラインブロック要素に */
    margin: 0 2px 2px 0;
    background-color: #eee; /* 背景色 */
    border: 1px solid #ddd; /* 境界線 */
    padding: 2px5px; /* パディング */
    border-radius: 3px; /* 角を丸くする */
    cursor: pointer; /* カーソルをポインタに */
}

/* チェックボックスを非表示に */
.sidebar-list .checkbox-input {
    display: none;
}

/* チェックボックスがチェックされた時のラベルスタイル */
.sidebar-list .checkbox-input:checked + label {
    background-color: #d9edf7; /* チェック時の背景色 */
    border-color: #bce8f1; /* チェック時の境界線の色 */
}

/* 検索バーのスタイル */
.sidebar-search {
    margin-bottom: 20px; /* 検索バーと下のリスト間の間隔 */
}

.search__ret {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px; /* 入力フィールドの角丸 */
}

/* ボタンの基本スタイル */
/* カテゴリーのボタンスタイル */
.category-btn {
    display: inline-block;
    font-size: 0.9em;
    color: #007bff;
    margin: 3px;
    padding: 5px 5px;
    background-color: #fff;
    border: 1px solid #007bff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s; /* 背景色とボーダー色の変更を滑らかに */
}

.category-btn:hover {
    background-color: #e0e0e0;
}

/* 選択時の背景色とボーダー色 */
.category-btn.selected {
    background-color: #007bff;
    border-color: #007bff; 
    color: #ffffff;
}

/* タグのボタン */
.tag-btn {
    display: inline-block;
    font-size: 0.8em;
	 color:#28a745;
    margin: 3px;
    padding: 3px 5px;
    background-color: #fff;
    border: 1px solid #28a745;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.tag-btn:hover {
    background-color: #e0e0e0; /* ホバー時の背景色 */
}

/* タグボタンが選択されたときのスタイル */
.tag-btn.selected {
    background-color: #28a745;
    border-color: #28a745; 
    color: #ffffff;
}