/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Progress ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
    /* ■■■■■■■■ 全体 ■■■■■■■■ */
        #progress-main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1vw;
            height: 90%;
            padding-top: 0vw; /* 上部に余白を追加してスクロール時に見えるようにする */
            /*min-height: 100%; /* 最小高さを確保 */
            box-sizing: border-box;
        }
    /* ■■■■■■■■ 枠色 Slotのタイプに応じて ■■■■■■■■ */
        .empty-border {
            border-color: rgb(78, 69, 69);
        }
        .client-border {
            border-color: rgb(142, 226, 180);
        }
        .supporter-border {
            border-color: rgb(255, 168, 98);
        }
        .default-border {
            border-color: #ff0000;
        }
    /* ■■■■■■■■ 横長のボックス 外側 ■■■■■■■■ */
        .progress-main-card {
            width: 95%;
            padding: 1vh;
            border: 1px solid #ccc;
            border-radius: 1px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            background-color: transparent;
            white-space: nowrap; /* 折り返しを防止 */
            overflow: visible; /* 背景や境界線に影響しないよう設定 */
        }
    /* ■■■■■■■■ 横長のボックス 内側 ■■■■■■■■ */
        .field-container {
            font-size: 12px;
            display: flex;
            flex-wrap: nowrap; /* 折り返しを防止 */
            gap: 5px;
            overflow-x: hidden; /* スクロール可能に */
        }
    /* ■■■■■■■■ 横長のボックス 個別の四角 ■■■■■■■■ */
        .field-box {
            flex-grow: 1; /* 可能な限り横幅を広げる */
            flex-shrink: 1; /* 必要に応じて横幅を縮小 */
            border: 1px solid #2f6438;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin: 0px;
            width:5%;
            padding: 0px;
            box-sizing: border-box;
            border-radius: 0.2vw;
            /* 他の要素が見えなくなる問題の調整 */
            overflow: visible; /* 必要に応じて変更 */
        }
    /* ■■■■■■■■ 横長のボックス 見出し以外の文字 ■■■■■■■■ */          
        .progress-main-card p {
            margin: 0.1vw;
        }
    /* ■■■■■■■■ 横長のボックス 完了済みボックスの塗りつぶしの色 ■■■■■■■■ */  
        .highlight {
            background-color: #80ffa673;
        }
        /*progress追加分*/
        .header-box, .field-container, .footer-box {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            overflow: hidden; /* 画像の制約、調整が必要なら visible や auto に変更 */
        }
        /* ■■■■■■■■ 横長のボックス 見出し 四角 ■■■■■■■■ */     
        .header-field  {
            background-color: transparent; /* 見出しとフッターの背景色 */
            flex-wrap: wrap;
            border: 0px;
        }
        /* ■■■■■■■■ 横長のボックス 下段 四角 ■■■■■■■■ */     
        .footer-field {
            background-color: transparent; /* 見出しとフッターの背景色 */
            min-height: 5em;
            flex-wrap: wrap;
            border: 0px;
            overflow: hidden; /* 画像がカードをはみ出ないようにする */
        }
        /* ■■ 説明用の小さな画像 ■■ */
        .footer-field img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 画像をカードのサイズにフィットさせる */
            transition: transform 0.3s ease;
        }
        /* ■■ 説明用の小さな画像 オンマウスで拡大時 ■■ */
        .footer-field img.full-size {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: auto;
            height: auto;
            max-width: none;
            max-height: none;
            z-index: 10;
            display: none; /* 初期状態では表示しない */
        }
        .special-style {
            background-color: #33343b; /* Slot と Client のボックスの背景色 */
        }
        .field-label, .field-value {
            margin: 0;
            font-size: 1em; /* 親要素のフォントサイズに合わせる */
        }











        .progress-main-card {
            display: flex;
            flex-direction: column;
            width: 90%;
            font-size: 0.9vw; /* 画面幅に応じて文字サイズを調整 */
        }
        .progress-header, .progress-body, .progress-footer {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
        }
        .progress-box {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
            box-sizing: border-box;
        }
        .progress-header-box, .progress-footer-box {
            background-color: #f0f0f0; /* 見出しとフッターの背景色 */
            font-weight: bold;
        }
        .progress-special {
            background-color: #e0e0e0; /* SlotとClientの特別なスタイル */
        }
        .progress-highlight {
            background-color: #a0d8ef; /* ハイライト用の背景色 */
        }
        .progress-label, .progress-value {
            margin: 0;
            font-size: 1em; /* 親要素のフォントサイズに合わせる */
        }






        .progress-list {
            width: 95%; /* 幅を画面に対して適切に設定 */
            padding: 1vw;
            overflow-y: scroll; /* 余分な内容を非表示にしない */
            overflow-x: visible; 
        }
        
        .custom-filter-drawer {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #333;
            color: white;
            border-radius: 10px;
            overflow: hidden;
            width: 200px;
        }
        
            
        .samplefilter-group {
            padding: 10px;
        }
        

            .progress-items {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap; /* 折り返しを防止し、水平スクロールなし */
                justify-content: center; 
                width: 100%;
                overflow: visible; /* 余分な内容を非表示にしない */
            }
            .progress-update {
                display: flex;
                align-items: center;
                justify-content: space-around; /* ボタンを左右に配置 */
                gap: 0.1vw;
            }
            /*ボタンの横幅*/
            .progress-update-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;/* 項目を均等に配置 */
                height: auto; /* 高さの自動調整 */
                margin: 0.25vw;
                width: 9em; /* 必要に応じて調整 */
                text-align: center;
            }
    
              
        /*横の列*/
        .progress-row {
            width: 100%; /* 親要素に対して幅をフルに使用 */
            margin-bottom: 1vw;
            margin-top: 1vw;
            display: flex;
            flex-direction: column; /* 必要に応じて表示を調整 */
                border: 1px solid #ff7e347c;
                padding: 0.25vw;
        }

        .progress-row  p{
            margin: 0.1vw;
            font-size: clamp(5.5px, 0.8vw, 18px); 
        }

        .progress-row  h3{
            margin: 0.1vw;
            font-size: clamp(8px, 0.8vw, 24px); 
        }
        


 /* ■■ 増減ボタン設定 ■■ */
        .progress-row button{
            background-color: #5258a546;
            border: none;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
            font-size: clamp(5.5px, 0.8vw, 18px);
            padding: 0.2vw 0.2vw; /* パディングを調整 */
            transition: background-color 0.3s ease;        
        }
        
        /* ■■ 並び替えボタン（▲▼）のスタイル ■■ */
        .reorder-btn-up,
        .reorder-btn-down {
            background-color: #6b4da5;
            color: #d4c3ff;
            border: none;
            cursor: pointer;
            border-radius: 3px;
            font-size: clamp(10px, 1vw, 20px);
            padding: 0.3vw 0.6vw;
            min-width: 2vw;
            transition: all 0.3s ease;
        }
        
        .reorder-btn-up:hover {
            background-color: #8b6ac5;
            color: #fff;
            transform: translateY(-2px);
        }
        
        .reorder-btn-down:hover {
            background-color: #8b6ac5;
            color: #fff;
            transform: translateY(2px);
        }
        
        .reorder-btn-up:active {
            transform: translateY(-1px);
            background-color: #5a3d85;
        }
        
        .reorder-btn-down:active {
            transform: translateY(1px);
            background-color: #5a3d85;
        }
        
        /* ■■ 進捗の増減ボタンの横幅を広げる ■■ */
        .progress-btn-minus, .progress-btn-plus, .progress-btn-max {
            min-width: 1.5vw;
            padding: 0.2vw 0.8vw;
        }
        .apply-button {
            width: 100%; /* 幅をフル使用 */
            margin-top: 0.5vw;
            background-color: rgba(45, 187, 140, 0.377); /* 緑系の色 */
        }
                .apply-button:hover {
            background-color: rgba(0, 200, 100, 0.9);
        }
    

        .progress-row button:hover {
            background-color: rgba(70, 70, 250, 0.9);
        }   
        .progress-row button:disabled {
            background-color: #cccccc;
        }       
    
        body {
            background-color: #2a2a2a; /* ベースカラーの設定 */
            color: #f1f1f1;
            font-family: Arial, sans-serif;
        }
        
        
 /* ■■ プログレスバー設定 ■■ */
        progress {
            width: 100%;
            height: 0.5vw;
            -webkit-appearance: none;
            appearance: none;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(48, 145, 255, 0.5), 0 0 5px rgba(0, 17, 255, 0.9);
         /*   box-shadow: 0 0 15px rgba(255, 42, 0, 0.5), 0 0 5px rgba(0, 220, 255, 0.9);*/
        }
        progress::-webkit-progress-bar {
            background-color: #111; /* 背景色をより暗めに */
        }
                
        progress::-webkit-progress-value {
            background: linear-gradient(90deg, rgb(67, 111, 255) ,rgb(57, 60, 230));
            box-shadow: 0 0 10px rgba(83, 255, 154, 0.74); /* SF風の光るエフェクト */
            border-radius: 0px; /* 角を丸くする */
        }