#pagination {
    text-align: center;
    margin-top: 20px;
    overflow-x: auto; /* ←追加 */
    white-space: nowrap; /* ←追加 */
}

#pagination a {
    display: inline-block; /* ←追加 */
    margin: 0 5px;
    padding: 5px 10px;
    text-decoration: none;
    color: #007BFF;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

#pagination a.active {
    background-color: #007BFF;
    color: #fff;
    font-weight: bold;
}

#pagination a:hover {
    background-color: #0056b3;
    color: #fff;
}

/*==========動画用の構成プログラム==========*/

.video-item {
    width: 95%;
    margin: 10px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

iframe {
    width: 100%;
    height: 600px;
    border: none;
}

.video-details {
    padding: 10px;
    text-align: center;
}

.sensitive {
  position: relative;
  overflow: hidden;
}

.sensitive::before {
  content: "⚠ センシティブな内容";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.99); /* ほぼ黒で覆う */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  padding: 1em;
  z-index: 2;
}

.sensitive.unblur::before {
  display: none; /* 解除したらカバーを消す */
}

/*==========スマホ版用の検索フォームのサイズ調整==========*/
@media screen and (max-width: 480px) {
    /*==========検索フォーム==========*/
    #search-form {
        flex-direction: column;
        align-items: stretch;
    }

    #search-form input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
    }

    #search-form button {
        width: 100%;
        padding: 10px 0;
    }

    #login-section label,
    #login-section input {
        color: #000; /* フォントカラーを黒に設定 */
    }

    /*==========ナビゲーションボタンの位置を調整==========*/
    #navigation-buttons {
        position: fixed;
        right: 110px;
        bottom: 10px;
        z-index: 1000; /* 最前面に表示 */
        text-align: center;
    }

    /*==========ヘッダー構成要素==========*/
    nav ul {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    nav ul li {
        flex: none;
        margin: 0; /* li要素の余白を削除 */
    }
    
    nav ul li a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #fff; /* リンクの文字色を白に設定 */
        background-color: #000; /* リンクの囲いの色を黒に設定 */
        border: 1px solid #000; /* リンクの囲い */
        margin: -1px; /* 余白をなくして隣接要素とくっつける */
    }
    
    nav ul li a:hover {
        background-color: #ddd; /* 選択時の背景色を青に設定 */
    }

    /*==========サブメニューのデフォルトスタイル==========*/
    nav ul ul {
        list-style: none;
        padding: 0px; /* サブメニュー内の余白 */
        margin: 0;
        background-color: #fff;
        border: 1px solid #ddd; /* 境界線で区切りを追加 */
        position: absolute;
        top: 24%; /* 親項目から下に35px移動 */
        left: 65%; /* 親項目から右に20px移動 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加して見栄えを向上 */
        z-index: 1000; /* 他の要素の上に表示 */
    }

    iframe {
    width: 100%;
    height: 300px;
    border: none;
    }

}

@media screen and (max-width: 1600px) {
    /*==========ヘッダー構成要素==========*/
    nav ul {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    nav ul li {
        flex: none;
        margin: 0; /* li要素の余白を削除 */
    }
    
    nav ul li a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #fff; /* リンクの文字色を白に設定 */
        background-color: #000; /* リンクの囲いの色を黒に設定 */
        border: 1px solid #000; /* リンクの囲い */
        margin: -1px; /* 余白をなくして隣接要素とくっつける */
    }
    
    nav ul li a:hover {
        background-color: #ddd; /* 選択時の背景色を青に設定 */
    }
}