/* ■■■■■■■■■■■■■■ フィルター 価格サンプル ■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■ Preset Poseと一部共通 ■■■■■■■■■■■■■■ */
/* ■■■■■■■■ フィルター基部 ■■■■■■■■ */
        .filter-drawer {
            margin-bottom: 0vh;
            margin-left: 2em;
            margin-right: 2em;
        }
        .filter-drawer P{
        color: #f0653abb;
        text-align: center;
        }
    /* ■■■ フィルターの開閉ボタン部分 上段 ■■ */
        .drawer-toggle {
            background-color: #ee888821;
            color: white;
            border: none;
            padding: 0vw;
            cursor: pointer;
            width: 100%;
            text-align: left;
        }        
        .drawer-toggle p{
            font-size: clamp(10px, 1vw, 36px); 
        }
        .drawer-toggle:hover {
            background-color: #ffb45fd7; /* マウスホバー時の背景色を変更 */
        }
    /* ■■ フィルターの中段 ボタンの並ぶ部分 ■■ */
         .filter-content {
              margin-top: 0vw;
              display: none;
              background-color: #ee888821;
              border: 1px solid #cccccc00;
              padding: 0.25vw; /* パディングを追加 */
              width: 100%;
              height: auto; /* 高さを自動調整 */
              align-items: center; /* 水平方向に中央揃え */

          }
                  /* ■■ フィルターの中段 ボタンカテゴリごとの枠 jsでも拾っているので名前変えると壊れる■■ */
                      .samplefilter {
                          padding: 0.25vw;
                          flex: 1;
                          display: flex;
                          height: 6.5dvh;
                      flex-wrap: nowrap; /* カードが折り返さないようにする */
                      align-items: center;
                      justify-content: center; /* 水平方向に中央揃え */
                      }
                       .samplefilter-group {
                           flex: 1;
                           display: flex; /* 横並びにするための設定 */
                           align-items: center;
                           justify-content: center; /* 水平方向に中央揃え */
                           gap: 0.5vw; /* ボタン間の間隔 */
                           padding: 0.5vw;
                       }
                           /* ■■ フィルター切り替え用の画像ボタン ■■ */
                                .toggle-button-filter {
                                    width: 2.7vw;
                                    height: 3.6vw;
                                    cursor: pointer;
                                }

                           /* ■■ フィルターの中段 ボタンカテゴリごとの枠 の間に入るソート機能部分  ■■ */
                        .samplefilter-group-middle {
                           width: 100%;
                           display: flex; /* flexbox に変更 */
                           justify-content: center; /* 水平方向に中央揃え */
                           align-items: center; /* 垂直方向に中央揃え */
                           gap: 0.5vw; /* ラベルとセレクトボックスの間隔 */
                           height :1vh;
                         }
                       .samplefilter-group-middle select{
                            font-size: 0.8vw;
                            padding: 0.25vw; /* パディングを追加 */
                            border: 1px solid #ccc; /* ボーダーを追加 */
                            border-radius: 4px; /* 角を丸くする */
                         }
                        #filterPose {
                            min-width: 8.5vw;
                            padding-right: 2vw;
                        }
                            /* ■■ フィルターリセットボタン用 ■■ */
                             .samplefilter-bottom {
                          padding: 0.5vw 0.5vw 0.25vw; /* 下だけ少し詰める */
                            flex: 1;
                            display: flex;
                            height: auto;
                           flex-wrap: nowrap; /* カードが折り返さないようにする */
                           align-items: center;
                           justify-content: center; /* 水平方向に中央揃え */
                           }
                                  /* Reset ボタン */
                                   #resetButton {
                                      font-size:  clamp(8px, 0.9vw, 25px); 
                                       color: #ff8661;
                                       background-color: #ff6d495e;
                                       padding: 0vw 4vw;
                                       display: inline-block; /* 行内要素として表示　２行にしない */
                                       border: none; /* ボーダーを削除 */
                                       border-radius: 4px; /* 角を丸くする */
                                       cursor: pointer; /* カーソルをポインターに */
                                  }
                                #resetButton:hover {
                                    color: #283027;
                                    background-color: #88ff98;
                                }