body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('../背景画像候補/_390e6f9c-4337-41de-9a6d-a561e8b4f39d.jpg');
    background-size: cover; /* 画像を画面全体にフィットさせる */
    background-repeat: no-repeat; /* 繰り返しを防止 */
    background-position: center center; /* 画像を中央揃え */
    height: 100vh;
}

  #taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #333;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    color: white;
  }
  
  #taskbar .settings-btn {
    margin-left: auto; /* タスクバーの右端に表示 */
    cursor: pointer;
    width: 35px;
    height: 35px;
    background-image: url('https://www.scgcommunity.com/image/images/%E8%A8%AD%E5%AE%9A.jpg'); /* 設定用アイコン画像 */
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    border-radius: 50%; /* アイコンを丸くする */
    margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

  #taskbar .settings-btn-MUSIC {
    cursor: pointer;
    width: 35px;
    height: 35px;
    background-image: url('https://www.scgcommunity.com/image/images/%E8%A8%AD%E5%AE%9A.jpg'); /* 設定用アイコン画像 */
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    border-radius: 50%; /* アイコンを丸くする */
    margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-1 {
    cursor: pointer;
    width: 35px;
    height: 35px;
    background-image: url('https://www.scgcommunity.com/image/images/_d330623d-486d-48e3-8959-4abd64a56a67.jpg'); /* 設定用アイコン画像 */
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    border-radius: 50%; /* アイコンを丸くする */
    margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-2 {
    cursor: pointer;
    width: 35px;
    height: 35px;
    background-image: url('https://www.scgcommunity.com/image/images/_5050f241-717a-45fb-802c-a8753b461d43.jpg'); /* 設定用アイコン画像 */
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    border-radius: 50%; /* アイコンを丸くする */
    margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-3 {
    cursor: pointer;
    width: 35px;
    height: 35px;
    background-image: url('https://www.scgcommunity.com/image/images/%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%97%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png'); /* 設定用アイコン画像 */
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    border-radius: 50%; /* アイコンを丸くする */
    margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-4 {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/gqJYV6uqA0vwAce1755710974_1755710985.png'); /* 設定用アイコン画像 */ /*SCG キャプチャ*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-5 {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/nmUa7xfgsdw5ZCj1755709030_1755709050.png'); /* 設定用アイコン画像 */ /*SCG 電卓*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-6 {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/ivLgMI5rscxNmws1755709482_1755709508.png'); /* 設定用アイコン画像 */ /*SCG Clock*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-7 {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/YQxRvygp8ovBOZP1755710002_1755710014.png'); /* 設定用アイコン画像 */ /*SCG Memo*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-8 {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/rmxxccACkQ1z8gL1755710182_1755710195.png'); /* 設定用アイコン画像 */ /*SCGDatabase*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-9 {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/qQHOT87lFkbnoif1755710654_1755710664.png'); /* 設定用アイコン画像 */ /*SCG OSS*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-10 {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/7PFFD7FDElbylDd1755710395_1755710411.png'); /* 設定用アイコン画像 */ /*SCG images Search*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}
  
#taskbar .settings-btn-TEXT {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/8ijusrI3THzdXJl1755620275_1755620300.png'); /* 設定用アイコン画像 */ /*SCG Text*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-ShortCut {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/wVVEkjaafCfVkZw1752761369_1752761395.png'); /* 設定用アイコン画像 */ /*SCG ShortCut*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

#taskbar .settings-btn-Copy {
  cursor: pointer;
  width: 35px;
  height: 35px;
  background-image: url('https://www.scgcommunity.com/image/images/wVVEkjaafCfVkZw1752761369_1752761395.png'); /* 設定用アイコン画像 */ /*SCG ShortCut*/
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%; /* アイコンを丸くする */
  margin-right: 10px; /* アイコン同士の間隔を10pxに設定 */
}

/* 7. タスクバーの設定ボタンにホバー効果を追加 */
#taskbar button.settings-btn:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-1:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-2:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-3:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-4:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-5:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-6:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-7:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-8:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-9:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar button.settings-btn-10:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar .settings-btn-TEXT:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar .settings-btn-ShortCut:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar .settings-btn-MUSIC:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

#taskbar .settings-btn-Copy:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: transform 0.2s, filter 0.2s;
}

/* 8. タスクバーの全体を少し透過して奥行きを出す */
#taskbar {
  background: rgba(51, 51, 51, 0.85);
  backdrop-filter: blur(6px);
}

  .icon {
    position: absolute;
    width: 90px;
    height: 90px;
    text-align: center;
    cursor: grab;
  }
  
  .icon img {
    border-radius: 50%; /* 画像を丸くする */
    width: 70px;
    height: 70px;
  }
  
  .icon span {
    font-size: 14px;
    color: #333; /* 基本フォント色 */
    text-shadow: 
        -1px -1px 1px #fff, /* 左上に白の縁取り */
        1px -1px 1px #fff, /* 右上に白の縁取り */
        -1px 1px 1px #fff, /* 左下に白の縁取り */
        1px 1px 1px #fff; /* 右下に白の縁取り */
    font-family: 'Yu Gothic', '游ゴシック', sans-serif; /* ゴシック体 */
}
  
.window {
  position: absolute;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.resizer {
  position: absolute;
  z-index: 10;
  background: transparent;
}

.resizer-top {
  top: -5px;
  left: 0;
  height: 10px;
  width: 100%;
  cursor: n-resize;
}

.resizer-right {
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: e-resize;
}

.resizer-bottom {
  bottom: -5px;
  left: 0;
  height: 10px;
  width: 100%;
  cursor: s-resize;
}

.resizer-left {
  top: 0;
  left: -5px;
  width: 10px;
  height: 100%;
  cursor: w-resize;
}

/* 斜め方向のリサイズも必要であれば追加 */
.resizer-top-right {
  top: -5px;
  right: -5px;
  cursor: ne-resize;
}

.resizer-bottom-right {
  bottom: -5px;
  right: -5px;
  cursor: se-resize;
}

.resizer-bottom-left {
  bottom: -5px;
  left: -5px;
  cursor: sw-resize;
}

.resizer-top-left {
  top: -5px;
  left: -5px;
  cursor: nw-resize;
}
  
  .window-header {
    background: #444;
    color: white;
    padding: 10px;
    cursor: move;
    display: flex;
    justify-content: space-between;
  }
  
  .close-btn {
    cursor: pointer;
    background: #f44336;
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
  }

  /* フルスクリーンボタンのスタイリング */
.fullscreen-btn {
  padding: 5px 10px;
  font-size: 12px;
  color: #ffffff;
  background-color: #0078D7;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.fullscreen-btn:hover {
  background-color: #005A9E;
  transform: scale(1.05);
}

.fullscreen-btn:active {
  background-color: #003E73;
  transform: scale(0.95);
}

/* フルスクリーンモード時のウィンドウ */
.window.fullscreen {
  box-shadow: none;
  border: none;
}

/* ウィンドウヘッダーのスタイリング */
.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background-color: #333333;
  color: #ffffff;
  border-bottom: 1px solid #555555;
}

.window-content {
    display: flex;
    /* ヘッダーの高さに応じて計算 */
    height: calc(100% - 30px); 
    overflow: hidden;
  }
  
  .window.fullscreen .window-content {
    height: 100%; /* フルスクリーン時は全高に設定 */
  }
  
  iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
  }

  button{
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover{
    background-color: #aaa;
}

button::after{
    content: attr(data-tooltip);
    position: absolute;
    top: -40px; /* 吹き出しの位置 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

button:hover::after, a:hover::after {
    opacity: 1;
}

/* フォルダの基本スタイル */
.folder {
    position: absolute;
    width: 95px; /* アイコンサイズより少し大きめ */
    height: 95px;
    background-color: rgba(128, 128, 128, 0.7); /* 半透明の背景 */
    backdrop-filter: blur(5px); /* 背景をぼかす（スマホ風） */
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    padding: 5px;
    box-sizing: border-box;
    transition: transform 0.1s;
}

/* フォルダ名 */
.folder-name {
    font-size: 10px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    word-break: break-all;
    text-align: center;
    line-height: 1.2;
    margin-top: 2px;
}

/* フォルダ内のサムネイルコンテナ */
.folder-thumbnails {
    width: 80px;
    height: 80px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

/* フォルダ内の小さなアイコン */
.folder-thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
}
.folder-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ドラッグオーバー時のハイライト */
.drag-over {
    box-shadow: 0 0 0 3px #FFA500; /* オレンジ色の枠線 */
}

/* フォルダウィンドウのスタイル */
.folder-window {
    /* 修正: 黒の半透明とぼかし効果を適用 */
    background-color: rgba(0, 0, 0, 0.7); /* 黒の半透明 */
    backdrop-filter: blur(10px); /* ぼかし効果 */
    -webkit-backdrop-filter: blur(10px); /* Safari対応 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 枠線を薄く白く */
    border-radius: 10px; /* 角を丸く */
    padding: 0;
    overflow: hidden;
}

.folder-window .window-header {
    /* 修正: ヘッダーも透明にし、統一感を出す */
    background-color: rgba(255, 255, 255, 0.1); /* 非常に薄い透明 */
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    cursor: move;
}

.folder-window .folder-name-input {
    flex-grow: 1;
    border: 1px solid #ccc;
    padding: 2px 5px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.9); /* 入力フィールドは白に近い色で視認性を確保 */
    border-radius: 3px;
}

.folder-content-area {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow-y: auto;
    height: calc(100% - 50px); /* ヘッダーの高さに応じて調整 */
}

/* フォルダウィンドウ内のアイコン */
.folder-internal-icon {
    width: 100px; /* 小さく表示 */
    height: 100px;
    margin: 5px;
    cursor: pointer;
    position: static !important; /* 絶対配置を解除 */
    display: flex !important; /* 🌟 修正: インラインスタイル(display: none)を上書きして強制表示 */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: none !important;
}
.folder-internal-icon img {
    width: 80px;
    height: 80px;
}
.folder-internal-icon span {
    padding: 10px 5px;
    font-size: 14px;
    text-align: center;
    color: black;
}

/* 🌟 追加: デスクトップのフォルダアイコンの名前編集用インプット */
.folder-name .folder-name-input-desktop {
    width: 100%;
    box-sizing: border-box;
    font-size: 11px; /* アイコン名と合わせる */
    text-align: center;
    border: 1px solid #0078D7;
    background-color: white;
    padding: 0;
    margin: -1px 0; /* 枠線がアイコン内に収まるように微調整 */
}

/* 閉じるボタンを赤から白に変更して統一感を出す */
.folder-window .close-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 3px 8px; /* サイズ調整 */
    line-height: 1;
}
.folder-window .close-btn:hover {
    background: #f44336; /* ホバーで赤に */
}

/* フォルダウィンドウ内のアイコン (.folder-internal-icon) にホバー効果を適用 */
.folder-internal-icon:hover {
    /* 選択されていないデスクトップアイコンのホバー効果と同じものを適用 */
    border: 2px dashed #99C5F5 !important;
    /* 背景色を少し変えるなど、別の視覚効果を追加しても良い */
    /* background-color: rgba(255, 255, 255, 0.1); */
}

/* 選択状態にある場合はホバー効果を上書き（ここでは青い実線ボーダー） */
.folder-internal-icon.selected:hover {
    border: 2px solid #0078D7 !important;
}

/* 内部アイコンのborderを初期化 */
.folder-internal-icon {
    border: 2px solid transparent; /* 初期状態で透明なボーダーを設定し、ガタつきを防ぐ */
}

/* ドラッグオーバー効果が残らないように、念のため解除 */
.folder-internal-icon.drag-over {
    border: none;
}

/* ========================================= */
/* ★ 設定ウィンドウのUI/UX改善用CSS (カテゴリー対応) ★ */
/* ========================================= */

/* 1. ウィンドウのサイズとレイアウトの調整 */
/* ウィンドウを横長に固定し、カテゴリーリストとコンテンツエリアを確保 */
.settings-window {
    width: 700px !important; 
    height: 500px !important; /* 高さを固定 */
}

/* Flexコンテナ化: サイドバーとメインコンテンツを横並びに */
/* window-contentにこのクラスを付与することを想定 */
.settings-content-flex {
    display: flex;
    height: 100%; /* ウィンドウ全体に広げる */
    padding: 0 !important; /* 親要素のパディングを解除 */
    background-color: #f0f0f0;
}

/* 2. 左側のサイドバー (カテゴリーリスト) */
.settings-sidebar {
    width: 35%; /* 左側に30%の幅を割り当てる */
    min-width: 200px;
    background-color: #e9e9e9;
    padding: 10px 0;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    overflow-y: auto;
}

.category-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.95em;
    color: #333;
    transition: background-color 0.2s, color 0.2s;
    border-left: 3px solid transparent; /* 選択状態のマーク用 */
}

.category-item:hover {
    background-color: #ddd;
}

.category-item.selected {
    background-color: #fff; /* 選択されたカテゴリーの背景色 */
    border-left-color: #007bff; /* 青いマーク */
    font-weight: bold;
    color: #000;
}

/* 3. 右側のメインコンテンツ */
.settings-main-content {
    flex-grow: 1; /* 残りの幅をすべて使用 */
    padding: 20px;
    overflow-y: auto; /* 内容が多い場合はスクロール可能にする */
    background-color: #fff; /* メインコンテンツの背景を白く */
}

/* 4. カテゴリーセクションの表示/非表示 */
/* JavaScriptでhidden/activeクラスを切り替えます */
.settings-section.hidden {
    display: none !important;
}
.settings-section.active {
    /* アクティブなセクションはブロック表示 */
    display: block !important; 
}


/* 5. 既存スタイルの調整 (新しいレイアウトに合わせる) */

/* メインコンテンツ内では各セクションの装飾を解除し、コンテンツの表示/非表示のみに集中 */
.settings-main-content .settings-section {
    margin-bottom: 0; /* メインコンテンツのスクロールに対応するため、マージンを減らす */
    padding: 0; 
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    /* .settings-main-content にパディングがあるため、ここで再設定は不要 */
}

/* H2の区切り線を復元 (メインコンテンツ内で見栄えを良くするため) */
.settings-main-content .settings-section h2 {
    border-bottom: 2px solid #eee; /* 薄い区切り線 */
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 1.3em;
}

/* 区切り線はカテゴリ切り替えで不要になるため非表示 */
.settings-ui hr {
    display: none; 
}

/* 背景プレビューのスタイルはそのまま維持 */
#backgroundPreview {
    height: 100px;
    width: 100%;   
    border: 1px solid #ccc;
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    border-radius: 4px;
}

/* ボタンとラベルの幅をメインコンテンツの幅いっぱいに調整 */
.settings-main-content button:not(.preset-buttons button),
.settings-main-content .file-label {
    width: 100%; /* 親要素のパディングがあるため95%から100%に変更 */
    box-sizing: border-box; /* パディングを含めて幅100%にする */
}

/* プリセットボタンのコンテナはそのまま維持 */
.preset-buttons {
    display: flex;
    flex-wrap: wrap; 
    gap: 5px; 
    margin-top: 10px;
}

/* プリセットボタンのサイズ調整（1行に3つ並べる） */
.preset-buttons button {
    background-color: #6c757d; 
    flex-basis: calc(33.333% - 8px); /* 3つ並べた時に隙間を考慮した幅 (gap: 5pxなので微調整) */
    font-size: 0.85em;
    padding: 6px 5px;
    box-sizing: border-box;
}

/* ファイル選択ラベル（ボタン風）のスタイル */
.file-label {
    display: block; /* ブロック要素にして縦に並べる */
    width: 100%; 
    text-align: center;
    background-color: #4CAF50; /* 緑色 */
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* 実際のファイルインプットを非表示にする */
.file-label input[type="file"] {
    display: none;
}

/* 💡 <label>要素全体にホバーした時のスタイル */
.file-label:hover {
    opacity: 1;
    /* 例: 背景色を少し濃くする */
    background-color: #0056b3;
    /* 例: わずかに影をつけて立体感を出す */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.file-label-db{
  display: block; /* ブロック要素にして縦に並べる */
  width: 100%; 
  text-align: center;
  margin-bottom: 10px;
  margin-top: 10px;
}