/* --- コンテンツセレクトボタンのスタイル調整 --- */
/* 既存の .select-buttons スタイルを置き換えまたは上書き */
.select-buttons {
    /* sticky に戻す */
    position: sticky;
    top: 0; /* ページ上部に張り付く */
    display: flex;
    justify-content: center;
    gap: 8px; /* ギャップを少し小さく */
    padding: 10px; /* パディングを小さく */
    background-color: white; /* 背景を白に */
    z-index: 1000; /* 他の要素より前に */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 影をつけて浮かせる */
    flex-wrap: wrap;
    border-radius: 8px; /* 角丸を少し小さく */
    margin-bottom: 20px;
    /* 初期状態では表示 */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease; /* 表示/非表示のアニメーション */
}

/* ボタンを非表示にするクラス (必要に応じて使用) */
.select-buttons.hidden {
    opacity: 0;
    transform: translateY(-100%); /* 上に隠す */
    pointer-events: none; /* クリックも無効化 */
}

.content-btn {
    padding: 8px 16px; /* パディングを小さく */
    border: 2px solid #ddd;
    border-radius: 20px; /* 角丸を少し小さく */
    cursor: pointer;
    font-size: 14px; /* フォントサイズは維持 */
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    color: #333;
    /* 幅の指定を削除して、内容に応じて自動調整 */
    white-space: nowrap; /* テキストが折り返さないように */
    /* モバイル用に少し調整 */
    flex: 0 0 auto; /* ボタンが縮まないように */
}

.content-btn.active {
    font-weight: bold;
    border-color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

.content-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* コンテンツ表示エリア */
.content-area {
    padding: 0;
    /* ボタンの高さ分の余白は sticky なので不要になったが、
       念のため少し余白を確保 */
    margin-top: 10px;
}

/* 他の既存のCSSは変更なし */
/* コンテンツセクションのスタイル */
.content-section {
    margin-bottom: 30px;
    border-radius: 10px;
    background-color: #ffffff; /* デフォルト背景色 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;

    /* アニメーション設定 */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    max-height: 0;
    padding: 0;
}

/* 表示状態 */
.content-section.is-visible {
    opacity: 1;
    transform: translateY(0);
    max-height: none;
    padding: 25px;
    margin-bottom: 30px;
}

.content-section h2 {
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 24px;
}

.content-section h3 {
    color: #555;
    margin-bottom: 10px;
    font-size: 18px;
}

.content-section p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 15px;
}

.feature-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

/* レスポンシブ対応 (モバイル) */
@media (max-width: 768px) {
    .select-buttons {
        /* モバイルでは横スクロールを許可する例 */
        flex-direction: row; /* デフォルトを row に戻す */
        align-items: center;
        /* 横スクロールを許可 */
        overflow-x: auto;
        white-space: nowrap; /* ボタンが折り返さないように */
        /* スクロールバーを非表示にする場合 */
        -ms-overflow-style: none;
        scrollbar-width: none;
        /* 幅をほぼ画面いっぱいに */
        /* width: calc(100% - 20px); これは sticky では不要 */
        padding: 8px; /* パディングを少し大きく */
        gap: 6px; /* ギャップをさらに小さく */
    }
    .select-buttons::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera*/
    }

    .content-btn {
        /* モバイル用ボタンスタイルも調整 */
        padding: 6px 12px;
        font-size: 13px;
        flex: 0 0 auto; /* ボタンが縮まないように */
        white-space: nowrap;
    }

    .content-area {
        margin-top: 10px; /* モバイル用にマージン */
    }

    .content-section.is-visible {
        padding: 20px;
    }
}

/* --- 削除: 古いカテゴリ別背景色セレクタ ---
.content-section[data-category*="a"].is-visible { ... }
.content-section[data-category*="b"].is-visible { ... }
.content-section[data-category*="c"].is-visible { ... }
--- ここまで削除 --- */

/* --- 新しい、ボタンに対応する背景色クラスを定義 --- */
/* 全表示ボタン用のデフォルト背景（必要に応じて） */
/* この例では、全表示時は特別な背景色を適用しない */
.content-section.is-visible.category-all-bg {
    /* background: linear-gradient(135deg, #ffffff, #f9f9f9); */
    /* border-left: 4px solid #ccc; */
    /* 必要に応じてデフォルトの全表示用スタイルをここに定義 */
}

/* カテゴリ a (安眠サポート) 用背景 */
.content-section.is-visible.category-a-bg {
    background: linear-gradient(135deg, #ffebee, #fff); /* 赤系の薄いグラデーション */
    border-left: 4px solid #e91e63; /* 赤系の左ボーダー */
}

/* カテゴリ b (寝ながら動画視聴) 用背景 */
.content-section.is-visible.category-b-bg {
    background: linear-gradient(135deg, #e8f5e9, #fff); /* 緑系の薄いグラデーション */
    border-left: 4px solid #4caf50; /* 緑系の左ボーダー */
}

/* カテゴリ c (睡眠学習&集中力UP) 用背景 */
.content-section.is-visible.category-c-bg {
    background: linear-gradient(135deg, #fff3e0, #fff); /* オレンジ系の薄いグラデーション */
    border-left: 4px solid #ff9800; /* オレンジ系の左ボーダー */
}
/* --- ここまで新しい背景色クラス --- */