/*
 Theme Name:   Twenty Twenty-five Child
 Template:     twentytwentyfive
 Version:      1.0
*/

#custom-files-list li {
    cursor: pointer; /* ホバー時にカーソルをポインターに変更 */
    transition: background-color 0.3s ease; /* 背景色の変更にスムーズなトランジションを追加 */
    display: flex; /* フレックスボックスを有効にして、子要素を並べる */
    justify-content: space-between; /* 子要素（ファイル名と削除ボタン）を両端に配置 */
    align-items: center; /* 垂直方向で中央揃え */
    padding: 5px 0; /* 上下に少し余白を追加 */

}
/* モバイル用のスタイル（768px以下のとき適用） */
@media screen and (max-width: 768px) {
    #custom-files-list li {
        font-size: 10px; /* フォントサイズを小さく */
        padding: 1px 0; /* 余白を調整 */
    }

}

#custom-files-list li:hover {
    background-color: #f0f0f0; /* ホバー時に背景色を変更 */
}

#custom-files-list li.active {
    background-color: #d0d0d0; /* 選択された項目の背景色を強調 */
}

.delete-btn {
    background-color: transparent; /* 赤色 */
    color: #a0a0a0;
    border: none;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
}

.delete-btn:hover {
    background-color: transparent; /* ホバー時に少し濃い赤色 */
    color: red;
}


.progress_header {
    position: sticky;   /* または fixed */
    top: 0;
    z-index: 1000;      /* 他の要素より上に表示されるように */
    background-color: white;  /* 背景を白などにして透け防止 */
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* 任意の影で立体感 */
  }
  
.su-spoiler-title{
    font-weight: 500 !important;
    font-size: 18px !important;
}
.bordered-img{
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}