/* ■■■■■■■■ ベース ■■■■■■■■ */
        ul {
            margin-left: 0;
            padding-left: 0; /* 必要に応じてパディングもリセット */
        }
        body {
            margin: 0;
            padding: 0;
            /* height: 100vh; 　背景にスクロールバーが出るので*/
            background-image: url('background_all.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            font-family: Arial, sans-serif;
            color: #ffffff;
        }
        header, footer {
            background-color: transparent;
            color: white;
            text-align: center;
            padding: 5px 0;
            height: 7%;
            display: flex;
            align-items: center; /* 垂直方向に中央揃え */
            justify-content: center; /* 水平方向に中央揃え */
        }
        button {
            display: block;
            margin: 0.25vw auto; /*アップロードタイプ切り替えボタンの文字からどこまでボタンを広げるか*/
            padding: 0.3vw 0.5vw;
            background-color: #3bb88a7c;
            color: rgb(148, 250, 155);
            border: none;
            cursor: pointer;
            border-radius: 3px;
            /*font-size: 1vw; */
        }
        button:hover {
            background-color: #3b48ff;
        }
        h1 {
            font-style: normal;
            font-size: 2.0vw;
            letter-spacing: 0.1vw;
            margin-top: 0.25vw;
            margin-bottom: 0.25vw;
            margin-left: 29vw;   /*まず下のフレームのメニュー部分で８ｖｗ　さらに、右のボタンが入っている箱が２１ｖｗ*/
        }
        h2 {
            font-style: normal;
            font-size: 1.5vw;
            letter-spacing: 0.075vw;
            margin-top: 0.5vw;
            margin-bottom: 0.5vw; 
            align-self: center;
        }
        h3 {
            font-style: normal;
            font-size: 1.2vw;
            letter-spacing: 0.06vw;
            margin-top: 0.06vw;
            margin-bottom: 0.06vw;
        }
        h5 {
            font-style: normal;
            font-size: 1.5vw;
            letter-spacing: 0.075vw;
            margin-top: 0.5vw;
            margin-bottom: 0.5vw; 
            align-self: left;
        }


        .select {
            font-size: 1vw;
        }
        .center {
            text-align: center;
        }
    /* スクロールバーの全体の幅と高さを設定 */
        ::-webkit-scrollbar {
            width: 14px; /* 縦スクロールバーの幅 */
            height: 14px; /* 横スクロールバーの高さ */
        }
    /* スクロールバーのトラック（背景）を設定 */
        ::-webkit-scrollbar-track {
            background: #1e1e1e; /* ダークカラーの背景 */
            border-radius: 10px; /* 角を丸くする */
        }
    /* スクロールバーのハンドル（動く部分）を設定 */
        ::-webkit-scrollbar-thumb {
            background: #4a4a4a; /* ダークグレーのハンドル */
            border-radius: 10px; /* 角を丸くする */
            border: 3px solid #1e1e1e; /* トラックとの境界線 */
        }
    /* スクロールバーのハンドルにホバーした時のスタイル */
        ::-webkit-scrollbar-thumb:hover {
            background: #6a6a6a; /* ホバー時の色 */
        }

    /* Firefox用のスクロールバースタイル */
        * {
            scrollbar-width: thin; /* スクロールバーの幅を細くする */
            scrollbar-color: #4a4a4a #1e1e1e; /* ハンドルとトラックの色 */
        }

/* ■■■■■■■■■■■■■■■■ メインパネル ■■■■■■■■■■■■■■■■ */
    /*外周以外を暗くするためのパネルの設定*/
        .main-panel {
            background-color: rgba(11, 0, 0, 0.82); /* 黒い板を乗算効果で表現 */
            border-radius: 10px; /* 角を丸める */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
            padding: 2vw; /* 内側のパディング */
            box-sizing: border-box; /* パディングを含めてサイズを計算 */
            /* height: calc(100vh - 8vw); 上下の余白を差し引いた高さ */
            /* width: calc(100vw - 8vw - var(--scrollbar-width, 17px)); 左右の余白とスクロールバーの幅を差し引いた幅 */
            overflow-y: hidden; /* 縦方向のスクロールバーを非表示 */
            overflow-x: hidden; /* 横方向のスクロールバーを非表示 */
            position: absolute; /* 要素を絶対位置に設定 */
            top: 1vw; /* 上に4vwの隙間 */
            left: 1vw; /* 左に4vwの隙間 */
            right: 1vw; /* 右に4vwの隙間 */
            bottom: 1vw; /* 下に4vwの隙間 */
            margin: auto; /* 中央揃え */
        }
    /* パネルの設定のための数値の定義　スクロールバーの幅をカスタムプロパティとして定義 */
        :root {
            --scrollbar-width: 17px; /* 標準的なスクロールバーの幅（ブラウザによって異なる） */
        }



    /*言語スイッチ*/
        .language-toggle {
            background-color: #4CAF50; /* 緑色の背景 */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 1vw;
            margin: 4px 2px;
            cursor: pointer;
            transition-duration: 0.4s;
        }

        .language-toggle:hover {
            background-color: white;
            color: black;
        }


























/* ■■■■■■■■ メインコンテナ（section-a,b,cが入っている） ■■■■■■■■ */
    /*３分割パネル*/
        .container {
            display: flex;
            width: 100%;
            height: 93%; /* ヘッダーとフッターの高さを考慮 */
            /*height: calc(100vh - 60px); /* ヘッダーとフッターの高さを考慮 */
            /*padding: 0 10px; /* オーバーフロー防止用パディング　これを消したら左側もちゃんと詰まった　これがあると一番外側の白線の外側に空間ができる */
            flex-grow: 1; /* 追加 */
        }
/* ■■■■■■■■ section 共通 ■■■■■■■■ */
    /* section-a と section-c に適用するスタイル */
        .section-a, .section-b, .section-c, .section-a-top, .section-a-bottom {
            border: 1px solid #ddd; /* 白い枠線 */
            background-color: transparent; /* 背景色を透明にする */
        }
        .section-a, .section-b, .section-c {
            border: 1px solid #ddd;
            background-color: transparent;
            margin: 0vw;
            padding: 0px; /* セクション内側に余白 */
        }


/* ■■■■■■■■■■■■■■■■ section a ■■■■■■■■■■■■■■■■ */
        .section-a {
            display: flex; /* 要素をフレックスコンテナとして設定 これによって、子要素のレイアウトを柔軟に制御できる*/
            flex-direction: column; /* フレックスコンテナ内の子要素を縦方向に配置する */
            align-items: center; /* フレックスコンテナ内の子要素を水平方向に中央ぞろえ */
            justify-content: space-between; /* フレックス内の子要素を均等間隔で配置する */
            box-sizing: border-box; /*要素の幅と高さがコンテンツ、パディング、ボーダーを含めることを指定*/
            width: 10vw;
        }
    /* ■■■■ パネル A メニュー部分 ■■■■ */
        main {
            padding: 0px;
            margin: 0;
            background-color: rgba(255, 255, 255, 0);
            box-sizing: border-box; /* パディングとボーダーを含めてサイズ計算 */
            width: 100%;
            height: 100%;
            display: flex; /* 追加 */
            flex-direction: column; /* 追加 */
        }
        .section-a-top, .section-a-bottom {
            /*width: 100%;  子要素の幅をコンテナに合わせる 内側の箱も外にくっついたり、padding含めて100%なので飛び出したりする */
            text-align: center; /* テキストを中央に配置 */
            padding: 0.25vw; /* 内側のパディング（必要に応じて調整） */
            box-sizing: border-box; /* パディングとボーダーを含めてサイズ計算 */
            margin: 1vw;
            width: 8vw;
        }
        .section-a-top {
            text-align: center;
            box-sizing: border-box;
            flex-grow: 1; /* 上部セクションが可用スペースを占有 */
            margin-bottom: 0.5vw;
        }
        .section-a-bottom {
            text-align: center;
            box-sizing: border-box;
            flex-shrink: 0;
            margin-top: 0.5vw; 

        }
    /* ■■■■ メニューのスタイル ■■■■ */
        .section-a nav ul {
            list-style-type: none; /* デフォルトの箇条書きスタイルを消す */
            padding: 0;
            margin: 0;
            align-items: center;
            /*display: flex; /* 水平に並べる */
            justify-content: space-around; /* 項目を均等に配置 */
            background-color: #333; /* 背景色 */
            gap: 3vw;
        }
    /* ■■■■ メニューの各項目のスタイル ■■■■ */
        .section-a nav ul li {
            flex: 1; /* 各項目を等しく伸ばす */
            height: 4vh;
            display: flex; /* フレックスボックスを使用 */
            align-items: center; /* 垂直方向に中央揃え */
            justify-content: center; /* 水平方向に中央揃え */
        }
    /* ■■■■ メニューの各リンクのスタイル ■■■■ */
        .section-a nav ul li a {
            display: flex; /* フレックスボックスを使用 */
            align-items: center; /* 垂直方向に中央揃え */
            justify-content: center; /* 水平方向に中央揃え */
            padding: 0px;
            color: white; /* テキストの色 */
            font-size: clamp(10px, 1vw, 20px); /* 最小フォントサイズ12px、通常1vw、最大18px */
                    text-align: center;
            text-decoration: none; /* 下線を消す */
            transition: background-color 0.2s; /* 背景色のホバー時変更 */
            height: 100%; /* リンクの高さを親要素に合わせる */
            width: 100%; /* リンクの幅を親要素に合わせる */
        }
        /* ■■■■ マウスが乗っているメニューの色 ■■■■ */
        .section-a nav ul li a:hover {
            background-color: #f0773f; /* ホバー時の背景色 */    
            /*background-color: #555; /* ホバー時の背景色 */
        }
        /* ■■■■ 選択中のメニューの色 ■■■■ */
        .section-a nav ul li a.active-menu {
            background-color: #555; /* アクティブなメニューの背景色 */
        }

/* ■■■■■■■■■■■■■■■■ section b ■■■■■■■■■■■■■■■■ */
        .section-b {
            display: flex;
            flex-grow: 1; /*は、フレックスコンテナ内の子要素が利用可能なスペースを均等に占めるように指定します。*/
            flex-direction: column;
            box-sizing: border-box;
            margin-left: 1vw; /* 左の余白 */
            margin-right: 1vw; /* 右の余白 */
            overflow-x: auto; /* もしくは overflow-x: auto; */
            justify-content: center; /* 垂直方向で中央に配置 */
            /*align-items: center; /* 横方向でも中央に配置 */
            /*height: 100vh; /* 全体の高さに対して中央配置を適用 */
        }
        .section-b-top, .section-b-middle, .section-b-bottom {
            /*display: flex; */
            flex-direction: column;
            justify-content: space-around;
            /*margin: 5px 0;*/
            align-items: center;
            justify-content: center;
            height: 100%;
            border: 1px solid #ddd; /* 白い枠線 */
            margin-left: 1vw;
            margin-right: 1vw;
            box-sizing: border-box; /* パディングとボーダーを含めてサイズ計算 */
        }
        .section-b-top {
            margin: 0;
            flex: 6; 
            padding: 0;
            border: 1px solid #dddddd00;
            display: flex;
            flex-wrap: nowrap; /* 折り返しを許可 */
            overflow-x: auto; /* 横スクロールを許可 */
            align-items: center; /* 要素を中段揃えにする */
            justify-content: center; /* 中央揃えにする */
        }
        .section-b-middle {
            display: flex;
            flex-direction: row; /* 合計金額の表示 中段は横並び */
            align-items: center; /* 要素を中段揃えにする */
            flex: 0.5;
            margin-top: 0.5vw;
            margin-bottom: 0.5vw;
            padding: 0.2vw;
            }
        .section-b-bottom {
            flex: 3.5;
            margin-top: 0.5vw; 
            margin-bottom:1vw;
            /*overflow: auto;*/
        }
        .botton-submit{
            margin: 40px;
        }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ About ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
        .content-about {
            padding: 14px; /* 縮小に合わせたパディング */
            border: 1px solid #72b4ff;
            border-radius: 8px;
            margin: 1vw;
            font-family: Arial, sans-serif;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            max-width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
        #content-about h2 {
            font-size: 1.4vw; /* サイズを縮小 */
            color: #444;
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: center;
        }
        #content-about h3 {
            font-size: 1.12vw; /* サイズを縮小 */
            color: #555;
            margin-top: 7px;
            margin-bottom: 7px;
        }
        #content-about p {
            font-size: clamp(10px, 0.98vw, 48px);
            line-height: 1.4; /* 縦方向のスペースを詰める */
            margin-bottom: 7px;
        }
        #content-about a {
            color: #007BFF;
            text-decoration: none;
        }
        #content-about a:hover {
            text-decoration: underline;
        }
        #content-about ul {
            list-style-type: disc;
            list-style-position: inside;
            margin-left: 14px;
            margin-bottom: 10px;
            padding-left: 14px; /* リストの左端の距離を統一 */
        }
        .content-about li {
            font-size: 0.63vw; /* サイズを縮小 */
            line-height: 1.4; /* 縦方向のスペースを詰める */
            margin-bottom: 3.5px;
            color: #ff98ee;
        }
        .content-about-top {
            flex: 1;
            margin: 0vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .content-about-top p {
            font-size: clamp(10px, 0.98vw, 48px);
            line-height: 1.4;
            margin-top: 1vw;
            color: #b4bcc5;
        }
        .content-about-bottom {
            display: flex;
            margin: 3.5px;
            flex: 0.5;
            flex-wrap: nowrap;
        }
        .content-about-bottom li {
            list-style-type: disc;
            list-style-position: inside;
            font-size: clamp(7px, 0.8vw, 40px);  /* サイズを縮小 */
            line-height: 1.2;
            margin-bottom: 1.4px;
        }
/* About の下 ３色のカード内のリストと左端の距離を統一 */
        .content-about-often, .content-about-likes, .content-about-notgood {
            align-items: center;
            justify-content: space-between;
            flex: 1;
            padding-top : 1vw;
            padding-left :1vw;
            padding-right : 1vw;
            padding-bottom : 1vw;  
            margin-top: 0vw;
            margin-bottom: 1vw;
            margin-left: 1vw;
            margin-right: 1vw;
            border-radius: 15px;
            box-sizing: border-box;
        }
        .content-about-often {
            border: 1px solid #7dffb7;
        }
        .content-about-likes {
            border: 1px solid #d5ff73;
        }
        .content-about-notgood {
            border: 1px solid #ff8f63;
        }
/* タイトルとリストの距離を一定にする */
        .content-about-often-title, .content-about-likes-title, .content-about-notgood-title {
            font-size: clamp(8px, 0.9vw, 48px);  /* サイズを縮小 */ /* サイズを縮小 */
            margin-top: 5px;
            margin-bottom: 0px; /* タイトルとリストの距離を統一 */
            margin-left: 14px;
        }
        .content-about-often-title, .often-dual-box {
            color: #7dffb7;
        }
        .content-about-likes-title {
            color: #d5ff73;
        }
        .content-about-notgood-title {
            color: #ff8f63;
        }

/* OFTEN DRAW だけ２列にしたくて追加したボックス */
        .often-dual-box {
            gap: 1vw;
            display: flex;
            padding-top: 1vw;
            padding-left: 1vw;
            border: 0px;
            margin: 0px;
        }
        .about-single-box {
            display: flex;
            padding-top: 1vw;
            padding-left: 1vw;
            border: 0px;
            margin: 0px;
        }
/* ■■■■■■■■ プロフ画像 ■■■■■■■■ */
        .profile-square {
            width: clamp(240px, 14vw, 100vw);  /* サイズを縮小 */
            height: clamp(240px, 14vw, 100vw); /* サイズを縮小 */

            margin: 2px auto;
            position: relative;
            background-image: url('img/profile_crude.png');
            background-size: cover;
            background-position: center;
        }
        .description {
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(30, 31, 39, 0.822);
            color: white;
            padding: 7px; /* 縮小に合わせたパディング */
            text-align: left;
            font-size: clamp(12px, 0.6vw, 30px); /* サイズを縮小 */
            width: 180%;
            box-sizing: border-box;
        }
        .profile-square:hover .description {
            display: block;
        }



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Process ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
        body {
            background-color: rgba(51, 51, 51, 0.8);
            color: #F57C00;
            font-family: Arial, sans-serif;
        }

        #process-main-container {
            display: flex;
            padding: 1vw;
            overflow-x: auto;
            height: 60vh;
            line-height: 1.2; /* 行間を1.6倍に設定する（お好みに応じて調整可） */
        }

        .step {
            background: rgba(68, 68, 68, 0);
            border: 1px solid #ff5b5b;
            border-radius: 0.25vw;
            padding: 0.25vw;
            margin: 0.25vw;
            width: calc(100vw / 10);    /*ウインドウサイズの９分の１*/
            min-width: 50px; 
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            position: relative;
            display: flex; 
            flex-direction: column;
            font-size: clamp(8px, 0.8vw, 48px);
            padding-bottom: 1.5vw;
        }

        .step h3 {
            margin-top: 0;
            margin-bottom: 2vw;
            color: #fff;
            font-size: clamp(9px, 0.9vw, 56px);
        }

     

        .arrow {
            display: flex;
            align-items: center;
            color: #F57C00;
            font-size: clamp(8px, 1vw, 48px);
            margin-right: 0.25vw;
        }


        .arrow img{
            width:1.2vw
        }




        .hover-image {
            transition: transform 0.3s ease;
            position: relative;
            z-index: 1; /* サムネイルがオーバーレイよりも上になるよう設定 */
        }
        
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            visibility: hidden;
            opacity: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none; /* マウスイベントを無効にする */
           /*  z-index: 0; サムネイルよりも下に設定 */
        }
        
        .overlay-image {
            max-width: 90%;
            max-height: 90%;
        }

        .overlay {
            transition: opacity 0.3s ease;
            opacity: 0;
        }

        .overlay.show {
            opacity: 1;
        }


      
        .step {
            background: #44444400;
            border: 1px solid #F57C00;
            border-radius: 0.25vw;
            padding: 0.25vw;
            width: calc(100%/3 - 2rem); /* 3列レイアウトとパディングに応じた幅 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin: 0.5rem 0; /* 各ステップの上下間隔 */
        }
        
       






        .image-gallery-process {
            position: relative;
            display: flex;
            justify-content: center; /* 水平方向に中央揃え */
            align-items: flex-end; /* 垂直方向にボックスの下端に揃える */
            height: auto; /* コンテナ自体の高さを画像に合わせる */
            margin-top: auto; /* これにより、上部の余白はテキストと画像の高さに依存 */
        }




/* ■■ 説明用の小さな画像 ■■ */
.image-gallery-process img.thumbnail {
    max-width: 100%; /* ボックスの横幅にフィット */
    max-height: 100%; /* ボックスの高さにフィット */
    object-fit: contain; /* 縦横比を維持しながら最大サイズで表示 */
    position: relative; /* 位置調整用の絶対設定を解除 */
}


/* ■■ 説明用の小さな画像 オンマウスで拡大時 ■■ */
.image-gallery-process img.full-size {
    position: fixed; /* 画面に対して固定位置に配置 */
    bottom: 25vh; /* 画面の下から25%の位置に開始 */
    left: 50%; /* 水平方向に中央揃え */
    transform: translateX(-50%); /* 水平方向の中央揃え補正 */
    width: auto; /* 画像の幅をビューポート幅の60%に設定、必要に応じて変更可能 */
    height: 60vh; /* 縦横比を維持 */
    z-index: 100; /* 前面に表示 */
    display: none; /* 初期状態では非表示にする必要あり */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* ボックスシャドウを追加 */
    border-radius: 8px; /* 角を少し丸める */
}

























/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Sample ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
        /* ■■■■■■■■■■■■ SampleArt の カード ■■■■■■■■■■■■*/

        .card-container {
            display: flex;
            flex-wrap: wrap; /* カードが折り返さないようにする */
            gap: 1vw;
            padding: 1.5vw;
            /*justify-content: flex-start; サイズ固定*/
            justify-content: left; /*サイズフレックス*/
            overflow-y: auto; /* 縦方向のスクロールバーを表示auto 非表示hidden */
            overflow-x: auto;
            flex: 1;
     
        }
        .card {
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            width: 23.7%; /* 23.7%だと４枚ぎりぎり並ぶ 32.1%だと3毎*/
            height: 100%;
            min-width: 140px; /* 最小幅 */
            max-width: 440px;
            max-height: 680px;
        }
        
        .card img {
                 justify-content: center;
            height: 60%; /* 画像部分の高さを40%に固定 */
            object-fit: contain; /* 画像の比率を維持し、領域内に収める */
            background-color: transparent; /* 画像領域の背景色（任意） */
            flex-shrink: 1; /* 画像部分が縮小されるように */
        }

        .card-content {
            flex-grow: 1; /* テキスト部分が余ったスペースを埋めるように */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* テキスト部分を上下に均等に配置 */
            padding: 0.5vw;
            text-align: left; /* Ensure text alignment is left for all content */
        }
        
    
        .card-content h5 {
            margin-left: 0;
            font-size: clamp(16px, 1vw, 24px);
            margin-bottom: 0;
            text-align: left; /* Align the price to the left */
        }
        
        .card-content p {
            margin-left: 20px; /* 左の余白 */
            font-size: clamp(12px, 0.75vw, 18px); /* 12px - 18pxに制約 */
        }


        
        .edit-button,
        .delete-button,
        .preset-edit-button {
            width: 6vw;
            height: 1.6vw;
            flex: 1;
            margin: 0px;
        }

        .card-content a {
            color: #e0662d;
            text-decoration: none;
            font-size: 0.75vw; /* 画面幅の1.5% */
            font-size: clamp(12px, 0.75vw, 18px); /* 12px - 18pxに制約 */
        }

        .card-content a:hover {
            text-decoration: underline;
        }

        /* カードの編集と削除ボタン */
        .card-actions {
            display: flex;
            justify-content: space-between;
        }

        .edit-button,
        .delete-button {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;
            border: 0;
            font-size: clamp(6px, 0.6vw, 18px);
            font-family: inherit;
            vertical-align: baseline;
        }

        /*価格表示部分の小文字*/
        h5 .price-integer {
            /* 整数部分のフォントサイズ */
            font-size: clamp(14px, 1vw, 20px); /* 16px - 24pxに制約 */ /* `clamp()`関数について    - 第1引数: 最小フォントサイズ    - 第2引数: 推奨フォントサイズ（デフォルトサイズ）    - 第3引数: 最大フォントサイズ*/ 
            /*color: #98ff9e;*/
            color: #ff995f;
        }

        h5 .price-decimal {
            /* 小数部分のフォントサイズ */
            font-size: clamp(11px, 0.8vw, 17px); /* 16px - 24pxに制約 */ /* `clamp()`関数について    - 第1引数: 最小フォントサイズ    - 第2引数: 推奨フォントサイズ（デフォルトサイズ）    - 第3引数: 最大フォントサイズ*/ 
            /*color: #98ff9e;*/
            vertical-align: super; /* 少し上にずらす */
            color: #ffc4444d;
        }


        .edit-button:hover,
        .delete-button:hover {
        
            color: #283027;
            background-color: #88ff98;

            font-size: clamp(6px, 0.6vw, 18px); /* 16px - 24pxに制約 */ /* `clamp()`関数について    - 第1引数: 最小フォントサイズ    - 第2引数: 推奨フォントサイズ（デフォルトサイズ）    - 第3引数: 最大フォントサイズ*/ 
            /*color: #98ff9e;*/
        }

/* ■■■■■■■■■■■■■■■■■■■■■■ モーダル Sample ■■■■■■■■■■■■■■■■■■■■■■ */
        /*SampleArtのカードの原寸大をポップアップで表示*/
        .modal {
            display: none; /* モーダルのデフォルトは非表示 */
            position: fixed; 
            z-index: 1000; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%;
            overflow: auto; 
            background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明 */
        }
        .modal-content {
            margin: auto;
            display: block;
            max-width: 90%; /* Adaptive to larger screens */
            max-height: 90%; /* Maintain aspect ratio */
            /* 上下・左右中央配置 */
            position: absolute;
            top: 50%; /* 縦中央寄せ */
            left: 50%; /* 横中央寄せ */
            transform: translate(-50%, -50%); /* 中央寄せに必要な変形 */
        }
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }
        .close:hover, .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }





/* ■■■■■■■■■■■■■■ フィルター 価格サンプル ■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■ 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; /* 角を丸くする */
                    }                                        
                        /* ■■ フィルターリセットボタン用 ■■ */      
                        .samplefilter-bottom {
                        
                        padding: 0.5vw;
                        flex: 1;
                        display: flex;
                        height: 1vw;
                        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;
                                }



/* ■■■■■■■■■■■■■■ 参考価格のコピペ用のモーダルのスタイル ■■■■■■■■■■■■■■ */

            /* Unique Modal (background) */
            .unique-modal {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 100; /* Sit on top */
                left: 0;
                top: 0;
                width: 100%; /* Full width */
                height: 100%; /* Full height */
                overflow: auto; /* Enable scroll if needed */
                background-color: rgb(0,0,0); /* Fallback color */
                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            }
            /* Unique Modal Content */
            .unique-modal-content {
                background-color: #fefefe;
                margin: auto; /* 中央揃え */
                padding: 5vw;
                border: 1px solid #888;
                width: 30%; /* Could be more or less, depending on screen size */
                position: relative; /* 閉じるボタンの位置調整用 */
                top: 50%; /* 垂直方向の中央揃え */
                transform: translateY(-50%); /* 垂直方向の中央揃え */
            }
            /* The Close Button */
            .unique-close {
                color: #aaa;
                float: right; /* 右寄せに変更 */
                font-size: 75px; /* 75%の大きさ */
                font-weight: bold;
                line-height: 0.6; /* ボタンの位置を調整 */
                margin-right: 10px; /* 右側の余白 */
                margin-top: -10px; /* 上側の余白 */
                cursor: pointer;
            }
            .unique-close:hover,
            .unique-close:focus {
                color: black;
                text-decoration: none;
            }
            /* モーダル内のテキストをダークグレーに */
            #uniqueModalText {
                color: #333; /* ダークグレーに設定 */
                font-size: 0.8vw;
            }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Preset Pose ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */






        .preset-card-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1vw;
            padding: 1vw;
            justify-content: left;
            overflow-y: auto;
            overflow-x: auto;
            flex: 1; /* サイズがあってもフィルター部分が移動しないように調整 */
        }
        .preset-card {
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            width: 15vw;
            min-width: 250px;
        }
        .preset-card img {
            padding: 2%;
            justify-content: center;
            /*width: 96%; これも中央からずれるので*/
            height: 80%;
            object-fit: contain;
            background-color: #00000054;
        }
.preset-card-content h2 {
            margin-left: 20px;
            font-size: clamp(16px, 1vw, 24px);
            margin-bottom: 10px;
        }
        
/* Preset card identifier styling */
.preset-card-identifier {
    background-color: #ff9d4d36;
    color: white;
    padding: 2px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

.preset-card-identifier p {
    margin: 0;
    font-size: clamp(6px, 0.8vw, 18px);
}
        .preset-card-content p {
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 20px;
            font-size: clamp(12px, 0.75vw, 18px);
        }
        /* カードの編集と削除ボタン */
        .preset-card-actions {
            display: flex;
            justify-content: space-between;
        }
        /*サンプルポーズの拡大画像をモーダルで表示*/
        /* モーダルスタイル */
        .preset-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%;
            overflow: auto; 
            background-color: rgba(0, 0, 0, 0.8);
        }
        .preset-modal-content {
            margin: auto;
            display: block;
            max-width: 90%; /* Adaptive to larger screens */
            max-height: 90%; /* Maintain aspect ratio */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .preset-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }
        .preset-close:hover, .preset-close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }


/* ■■■■■■■■ Preset Pose 用のフィルターボタンスタイル ■■■■■■■■ */
.samplefilter-group-preset .toggle-button-filter-preset {
    width: 2.7vw;
    height: 3.6vw;
    cursor: pointer;
}

#resetButtonPreset {
    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;
}

#resetButtonPreset:hover {
    color: #283027;
    background-color: #88ff98;
}




/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Price ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■ 価格計算用フォーム ■■■■■■■■ */

        #commission-form {
            height: 8vw;
            display: flex;
            flex-wrap: nowrap; /* 折り返しを許可 */
        /*    overflow-x: hidden; 横スクロールを許可 */
            align-items: center; /* 要素を中段揃えにする */
            justify-content: center; /* 中央揃えにする */
            font-size: 0.7vw;
        }
        .spinbox-group {
            display: flex;
            flex-direction: column; /* 縦に並べる */
            align-items: center; /* 要素を中段揃えにする */
        }
        #commission-form .spinbox {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #ffffff00;
            padding: 2px; /* パディングを追加 */
            border-radius: 0px;
            background-color: #5db6aa00;
            width: 5.5vw; /* 最小幅を設定 */
            
        }
        .spinbox label {
            margin-bottom: 5px;
            font-weight: bold;
            font-size: 0.7vw;    /* 価格計算機の項目の */
        }
        

        #totalPriceContainer {
            display: flex;
            align-items: center;
            font-size: clamp(10px, 1vw, 40px);
        }
        
        #totalPriceInteger {
            /* 整数部分のフォントサイズ */
           /* 16px - 24pxに制約 */  /* `clamp()`関数について    - 第1引数: 最小フォントサイズ    - 第2引数: 推奨フォントサイズ（デフォルトサイズ）    - 第3引数: 最大フォントサイズ*/ 
           margin-left: 0.5vw;
            color: #ff995f !important; /* オレンジ色 */
   
        }
        
        #totalPriceDecimal {
            /* 小数部分のフォントサイズ */
            font-size: clamp(11px, 0.8vw, 36px); /* 16px - 24pxに制約 */
            color: #ffc4444d; /* 薄いオレンジ色 */
            vertical-align: super; /* 少し上にずらす */
        }


        /*円表示*/

        #totalPriceYenContainer {
            display: flex;
            align-items: center;
            font-size: clamp(10px, 1vw, 40px);
        }
        
        #totalPriceYenInteger {
            /* 整数部分のフォントサイズ */
           /* 16px - 24pxに制約 */  /* `clamp()`関数について    - 第1引数: 最小フォントサイズ    - 第2引数: 推奨フォントサイズ（デフォルトサイズ）    - 第3引数: 最大フォントサイズ*/ 
           margin-left: 0.5vw;
            color: #ff995f !important; /* オレンジ色 */
   
        }
        
        #totalPriceYenDecimal {
            /* 小数部分のフォントサイズ */
            font-size: clamp(11px, 0.8vw, 36px); /* 16px - 24pxに制約 */
            color: #ffc4444d; /* 薄いオレンジ色 */
            vertical-align: super; /* 少し上にずらす */
        }





















        /*価格計算フォームのおまけ*/
        #commission-form-price {
            height: 5vw;
            display: flex;
            flex-wrap: nowrap; /* 折り返しを許可 */
            align-items: center; /* 要素を中段揃えにする */
            justify-content: center; /* 中央揃えにする */
            font-size: 0.65vw;
        }
        #commission-form-price .spinbox {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #ffffff00;
            padding: 2px; /* パディングを追加 */
            border-radius: 0px;
            background-color: #5db6aa00;
            width: 3vw; /* 最小幅を設定 */  
        }
        #commission-form-price .symbol {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #09032500;
            padding: 2px; /* パディングを追加 */
            border-radius: 0px;
            background-color: #5db6aa00;
            width: 2.5vw; /* 最小幅を設定 */  
        }
        #commission-form-price .spacer {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #09032500;
            padding: 2px; /* パディングを追加 */
            border-radius: 0px;
            background-color: #5db6aa00;
            width: 1.25vw; /* 最小幅を設定 */  
        }
        label {
            align-items: center; /* 要素を中段揃えにする */
            font-weight: bold;
        }

        /* ■■■■ Price 中段 ■■■■ */  
        #totalPriceContainer label{
            margin-left: 8vw;
        }

        #uniqueCopyButtonContainer button {
            margin-left: 2vw;
            margin-right: 2vw;
        }



        /* ■■■■ Price 下段 ■■■■ */
        .custom-price-gallery {
            display: flex;
            gap: 0vw;
            justify-content: center;
            align-items: center;
            height: 30vh; /* 高さを指定します (必要に応じて調整してください) */
            align-self: center; /* 中段に配置 */
        }
        .custom-price-gallery {
            display: flex;
            gap: 0vw;
            justify-content: center;
            align-items: center;
        }
    
        .custom-price-item {
            text-align: center;
        }
        .custom-price-item span {
            display: block;
            margin-bottom: 5px;
        }
    
        .custom-price-thumb {
            display: block;
            width: 10vw;
            height: auto;
            position: relative;
            z-index: 1;
            transition: opacity 0.3s ease;
            cursor: pointer;
        }
    
        .price-full-size {
            position: fixed; /* 画面に対して固定位置に配置 */
            bottom: 25vh; /* 画面の下から25%の位置に開始 */
            left: 50%; /* 水平方向に中央揃え */
            transform: translateX(-50%); /* 水平方向の中央揃え補正 */
            width: auto; /* 画像の幅をビューポート幅の60%に設定、必要に応じて変更可能 */
            height: 60vh; /* 縦横比を維持 */
            z-index: 100; /* 前面に表示 */
            display: none; /* 初期状態では非表示にする必要あり */
            border-radius: 8px; /* 角を少し丸める */
            cursor: pointer; /* クリックできることを示すためにカーソルをポインターに */
        }

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Note ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Progress ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
    /* ■■■■■■■■ 全体 ■■■■■■■■ */
        #progress-main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1vw;
            padding-top: 2vw; /* 上部に余白を追加してスクロール時に見えるようにする */
            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: 90%; /* 幅を画面に対して適切に設定 */
            overflow: 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;        
        }
        
        /* ■■ 進捗の増減ボタンの横幅を広げる ■■ */
        .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; /* 角を丸くする */
        }






























        


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ パネル C = control-panel ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* */
.section-c {
    width: 0; /* 初期幅を0にして閉じた状態に */
    min-width: 0;
    overflow-x: hidden;
    transition: width 0.8s ease, min-width 0.8s ease; /* 複数のプロパティを同時にアニメーション */
    justify-content: center;
    box-sizing: border-box;
    margin-left: 0vw; /* 左の余白 */
    margin-right: 0vw; /* 右の余白 */
    overflow-y: auto; /* 内容が多い場合にスクロール可能にする */
}

#control-panel {
    position: relative;
    padding: 1vw;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 0vw; /* デフォルトは閉じた状態 */
    min-width: 0vw;
    transition: width 0.8s ease, min-width 0.8s ease; /* 複数のプロパティを同時にアニメーション */
}

#control-panel.active {
    width: 20vw; /* コントロールパネルが開いた時の横幅の最大値 */
    min-width: 20vw; /* コントロールパネルが開いた時の最小幅 */
}

#toggle-panel {
    position: absolute;
    top: 50%; /* 垂直中央揃え */
    transform: translateY(-50%);
    /* rightの値を調整 */
    right: 10px; /* 元々の位置を領域B内に調整 */
    z-index: 10;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0; /* 余白をなくす */
}

#toggle-panel img {
    width: 30px; /* 画像サイズを設定、必要に応じて変更 */
    height: auto;
}

/* パネルCを開いたときのボタン位置 */
#control-panel.active + #toggle-panel {
    right: calc(25% + 90px); /* Cが開かれたら移動 */
    transition: right 0.3s ease;
}

/*コントロールパネルのアップロード用フォームの切り替えボタン用*/
/*.user-info {*/
 /*   position: absolute; */
  /*   top: 10px;*/
  /*   right: 50px;*/
  /*   text-align: right;*/
/*}*/

.button-container {
    /*縦配置用 text-align: center;/*ボタンの文字の位置*/
    /*縦配置用 margin: 10px 0;    /*アップロードタイプ切り替えボタンの文字からどこまでボタンを広げるか*/
    /*縦配置用 max-width: 84px;   /*アップロードタイプ切り替えボタンの横幅*/
    display: flex; /* フレックスボックスに変更 */ /*横配置用*/
    justify-content: center; /* ボタンを中央に配置する *//*横配置用*/
    margin: 10px 0;/*横配置用*/
    max-width: none; /* 最大幅の制限を解除 *//*横配置用*/
}
.toggle-button {
    display: block;
    /*縦配置用 width: 100%; */
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 8px;
    /*縦配置用margin-bottom: 10px;　*/
    font-size: 0.8vw;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    flex: 1; /* 各ボタンが均等にスペースを取るようにする *//*横配置用*/
    width: auto; /* ボタンの幅を自動調整 *//*横配置用*/
    margin: 0 5px; /* ボタンの間にスペースを追加 *//*横配置用*/
}

.toggle-button:hover {
    background-color: #555;
    transform: scale(1.02);
    font-size: 0.8vw;
    
}


/* コンパネ　進捗更新用　（updateprogress） */














/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sample art 更新用モーダル ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* 専用モーダルスタイル */
.modal-sample-update {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(10, 31, 51, 0.24);
}

.modal-sample-update-content {
    background-color: #0e1a507e;
    color: #eee;
    position: absolute; /* absolute に変更 */
    left: 50%;
    transform: translateX(-50%); /* 水平方向の中央編集 */
    padding: 20px;
    border: 2px solid #444;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 55, 175, 0.685);
    font-family: 'Arial', sans-serif;
    bottom: 5%; /* 下部基準で5%に配置 */
    width: 25vw;
}



.modal-sample-update .close {
    color: #60ff75;
    position: absolute; /* 絶対配置に設定 */
    top: -5%; /* 上から15% */
    right: -5%; /* 右から15% */
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.modal-sample-update .close:hover,
.modal-sample-update .close:focus {
    color: #f44336;
}



button[type="submit"] {
    background-color: #4065e065;
    color: white;
    padding: 0.2vw 0.2vw; /* パディングを調整 */
    border: none;
    font-size: clamp(5.5px, 0.8vw, 18px);
    border-radius: 0.2vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: #3eff9e;
}


.modal-preset-update {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(10, 31, 51, 0.24);
}

.modal-preset-update-content {
    background-color: #0e1a507e;
    color: #eee;
    position: absolute; /* absolute に変更 */
    left: 50%;
    transform: translateX(-50%); /* 水平方向の中央編集 */
    padding: 20px;
    border: 2px solid #444;
    border-radius: 8px;
    width: 25%;
    box-shadow: 0 0 20px rgba(0, 55, 175, 0.685);
    font-family: 'Arial', sans-serif;
    bottom: 5%; /* 下部基準で5%に配置 */
    
}

.modal-preset-update-content .close {
    color: #60ff75;
    position: absolute;
    top: -5%;
    right: -5%;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}












/* ■■■■■■■■ スロット管理機能のスタイル ■■■■■■■■ */
.slot-manager-container {
    padding: 1vw;
    max-height: 60vh;
    overflow-y: auto;
}

.slot-list {
    margin-bottom: 1vw;
}

.slot-item {
    border: 1px solid #444;
    border-radius: 5px;
    margin-bottom: 0.5vw;
    padding: 0.5vw;
    background-color: rgba(68, 68, 68, 0.1);
}

.slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5vw;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.slot-header h4 {
    margin: 0;
    font-size: 1vw;
    color: #fff;
    text-align: center;
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 1.5vw !important;
}

.slot-controls {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    flex-wrap: wrap;
}

.slot-controls-horizontal {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    flex-direction: row;
    justify-content: flex-end;
}

.slot-controls .status-toggle,
.slot-controls-horizontal .status-toggle {
    font-size: 0.8vw;
    cursor: pointer;
    padding: 0.2vw 0.4vw;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    user-select: none;
}

.slot-controls .status-toggle.status-public,
.slot-controls-horizontal .status-toggle.status-public {
    color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}

.slot-controls .status-toggle.status-private,
.slot-controls-horizontal .status-toggle.status-private {
    color: #f44336;
    background-color: rgba(244, 67, 54, 0.1);
}

.slot-controls .status-toggle:hover,
.slot-controls-horizontal .status-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.slot-controls button,
.slot-controls-horizontal button {
    font-size: 0.7vw;
    padding: 0.2vw 0.5vw;
    margin: 0;
}

.slot-controls .delete-btn,
.slot-controls-horizontal .delete-btn {
    background-color: #ff4444;
}

.slot-controls .delete-btn:hover,
.slot-controls-horizontal .delete-btn:hover {
    background-color: #ff6666;
}

/* インライン編集用の入力フィールド */
.inline-edit-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #555;
    color: #fff;
    padding: 0.2vw 0.4vw;
    border-radius: 3px;
    font-size: 0.8vw;
    width: 100%;
    max-width: 200px;
}

.inline-edit-input:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #4CAF50;
    outline: none;
}

.slot-details {
    font-size: 0.8vw;
    color: #bbb;
}

.slot-details p {
    margin: 0.2vw 0;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ コントロールパネル ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■ ログインフォーム ■■■■■■■■ */
    /* ■■■■ ログインフォームの表示切替 ■■■■ */
            #control-panel.active #login-form {
                display: block;
            }
    /* ■■■■ ログインフォーム スタイル ■■■■ */
        #login-form {
            display: none;
            color: rgb(129, 129, 129);
            padding: 10px;
            text-align: center;
            /*background-color: rgb(62, 55, 73,);*/  
            background-color: transparent;
            width: 90%;
        }
    /* ■■■■ コントロールパネル 画像 ■■■■ */
        #login-form img {
                display: block; /* ブロック要素に設定 */
                margin-left: auto; /* 自動マージンで中央揃え */
                margin-right: auto;
                max-width: 90%; /* 必要に応じて画像の幅を調整 */
                height: auto;
        }
    /* ■■■■ コントロールパネル スタイル全般 ■■■■ */
        label, input {            font-size: 1vw;            display: block;            margin: 5px auto;            text-align: center;        }
        #login-form p {
            font-size: 0.9vw;
            color: #615a55;
            margin: 0.5vw;
        }
        #login-form h4 {
            font-size: 0.8vw;
            color: #ff8e4d;
            text-align: right;
            margin-right: 7.5vw;
        }
    /* ■■■■ コントロールパネル アップロードフォーム ■■■■ */
        .form-group {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 0.02vw;
            font-size: clamp(8px, 0.8vw, 14px); /* 最小フォントサイズ12px、通常1vw、最大18px */
        }
        .form-group label {
            flex: 1;
            margin-right: 0px;
            text-align: right;
            font-size: 0.8vw;
            font-size: clamp(8px, 0.8vw, 14px); /* 最小フォントサイズ12px、通常1vw、最大18px */
        }
        .form-group input, .form-group select, .form-group textarea {
            width: 5.5vw;
            flex: 1;
            font-size: 0.8vw;
        }
        .form-group textarea {
            max-width: 6vw;
            height: 15px; /* テキストエリアの高さを調整 */
        }
/* ■■■■■■■■■■■■■■ トースト ■■■■■■■■■■■■■■ */
    /* ■■■■ 通知のベーススタイル ■■■■ */
        .toast {
            visibility: hidden;
            min-width: 250px;
            margin-left: -125px; /* 横幅の半分 */
            background-color: #333; /* デフォルト背景色 */
            color: white;
            text-align: center;
            border-radius: 4px;
            padding: 16px;
            position: fixed;
            z-index: 1;
            left: 50%;
            bottom: 30px;
            font-size: 16px;
        }
    /* ■■■■ 表示時のスタイル ■■■■ */
        .toast.show {
            visibility: visible;
            /* フェードイン・アウトのアニメーション */
            animation: fadein 0.5s, fadeout 0.5s 2.0s;
        }
    /* ■■■■ keyframes for animation ■■■■ */
        @keyframes fadein {
            from { bottom: 0; opacity: 0; }
            to { bottom: 30px; opacity: 1; }
        }
        @keyframes fadeout {
            from { bottom: 30px; opacity: 1; }
            to { bottom: 0; opacity: 0; }
        }
    /* ■■■■ 状態別のスタイル ■■■■ */
        .toast.success {
            background-color: #4CAF50; /* 成功時の背景色 */
        }
        .toast.error {
            background-color: #f44336; /* エラー時の背景色 */
        }