body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background: url('./img/width_1600.webp') no-repeat center center fixed;
    background-size: cover;
}

.header {
    background-color: rgba(0, 0, 0, 0);
    text-align: right;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999; /* ヘッダーを最上位に表示 */
    padding-right: 20px;
}

.logo {
    font-size: 32px;
    font-weight: bold;
    font-family: 'Arial Black', Gadget, sans-serif;
}

.bg-purple {
    background-color: #792BA7 !important;
}

.profile {
    margin-top: 60px; /* 左側のコンテンツの上部に余白を追加 */
}

.profile-img {
    width: 100px;
    height: 100px;
}

.tag-category {
    font-weight: bold;
}

.search-results {
    max-height: none; /* スクロールバーを表示しない */
}

.search-results .result-item {
    display: flex;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    margin-bottom: 10px;
    cursor: pointer;
}

.search-results .result-item img {
    width: 100px; /* サムネイルの幅を統一 */
    height: 75px; /* サムネイルの高さを統一 */
    object-fit: cover;
    margin-right: 10px;
}

.search-results .result-item div {
    flex: 1;
}

.loading {
    display: none;
    text-align: center;
    margin-top: 20px;
}

.sidebar {
    width: 25%; /* サイドバーの幅を25%に設定 */
    border-radius: 15px;
    position: sticky;
    top: 60px; /* 左右のコンテンツの上部を揃える */
    height: auto; /* スクロールバーを表示しない */
    overflow-y: visible; /* スクロールバーを表示しない */
}

.credits {
    border-top: 1px solid white;
    text-align: center;
}

.video-container {
    position: fixed; /* 固定 */
    top: 60px; /* 上部からの位置 */
    right: 0; /* 右端まで */
    width: 75%; /* 動画コンテナの幅を75%に設定 */
    height: calc(100vh - 60px); /* 高さを設定 */
    z-index: 9998; /* ヘッダーの下に配置 */
    overflow: hidden; /* 動画が画面外に出ないように */
    padding: 10px; /* 動画周りの余白を追加 */
    box-sizing: border-box; /* パディングを含む */
}

.video-player {
    width: 100%;
    height: calc(100vh - 60px); /* 動画プレーヤーの高さを設定 */
}

.video-player iframe {
    width: 100%;
    height: calc(100vh - 60px);
    border-radius: 8px; /* 角を丸くする */
}

@media (min-width: 768px) {
    .content {
        backdrop-filter: blur(8px);
    }
}

@media (max-width: 768px) {
    .header {
        text-align: center;
        position: relative;
    }

    .sidebar {
        display: block;
        width: 100%; /* モバイルではサイドバーの幅を100%に */
    }

    .search {
        display: block !important;
    }

    #searchResults{
        margin-top: 1.5rem !important;
    }

    .results {
        max-height: calc(100vh - 200px); /* 必要に応じてこの値を調整 */
    }
    .sidebar{
        margin-top: 110px;
        top: 0px;
    }

    .video-container {
        position: fixed; /* 固定 */
        top: 0px; /* 上部からの位置 */
        left: 0; /* 左端から始める */
        width: 100%;
        height: 200px; /* 動画コンテナの高さを300pxに設定 */
        z-index: 9998; /* ヘッダーの下に配置 */
        overflow: hidden; /* 動画が画面外に出ないように */
        padding: 10px; /* 動画周りの余白を追加 */
        box-sizing: border-box; /* パディングを含む */
    }
    .video-player iframe {
        height: 100%;
    }

    .video-player {
        height: 100%; /* 動画プレーヤーの高さを設定 */
    }
}