/* １．レイアウト */
.layout {
  display: flex;
  gap:30px;               /* テーブル間の余白 */
  align-items: flex-start; /* 高さが強制されず自然に */
  margin: 30px;
}

/* ２．テーブル共通スタイル */
.my-table {
  border-collapse: collapse; 
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;           /* 横中央 */
  vertical-align: middle;       /* 縦中央 */
  white-space: normal;          /* 折り返し有効 */
}

.my-table th,
.my-table td{
  box-sizing: border-box; 
  width: 10px;
  border: 1px solid #000;      /* 枠線 */
  padding: 2px;                /* セル内余白 */
}
.my-table + .my-table th,
.my-table + .my-table td {
  border-top: none;
}

.my-table2 {
  border-collapse: collapse; 
  border-spacing: 0;
  border-bottom: none;
  table-layout: fixed;
  text-align: center;           /* 横中央 */
  vertical-align: middle;       /* 縦中央 */
  white-space: normal;          /* 折り返し有効 */
}

.my-table2 th,
.my-table2 td{
  box-sizing: border-box; 
  width: 10px;
  border: 1px solid #000;      /* 枠線 */
  padding: 2px;                /* セル内余白 */
}
.my-table2 td,
.my-table2 th {
  border-bottom: none !important;
}

/* プルダウン用 */
.my-select {
  text-align: center; 
  display: inline-block;
  vertical-align: middle;  
  width: auto;              /* 横幅 */
  height: auto;              /* 高さ */
  font-size: 1rem;           /* 文字サイズ */
  color: #333;               /* 文字色 */
  background-color: #f5f5f5; /* 背景色 */
  border: 1px solid #000000; /* 枠線 */
  border-radius: 0px;        /* 角丸 */
  appearance: auto;          /* デフォルト矢印を隠す */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg…%3E"); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px 10px;
  padding: 2px;  
}
.my-select:focus {
  border-color: #0095ff;
  box-shadow: 0 0 0 2px rgba(0,122,204,0.3);
}

.my-select2 {
  width: min-width ;              /* 横幅 */
  height: min-width ;              /* 高さ */
  font-size: 1rem;           /* 文字サイズ */
  color: #333;               /* 文字色 */
  background-color: #f5f5f5; /* 背景色 */
  border: 1px solid #000000; /* 枠線 */
  border-radius: 0px;        /* 角丸 */
  appearance: auto;          /* デフォルト矢印を隠す */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg…%3E"); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px 10px;
}
.my-select2:focus {
  border-color: #0095ff;
  box-shadow: 0 0 0 2px rgba(0,122,204,0.3);
}

/* テキスト入力用 */
.my-input {
  text-align: center; 
  width: auto;            /* 横幅を自動調整 */
  height: auto;              /* 高さ */
  font-size: 1rem;        /* 文字サイズ */
  color: #333;/* 色・背景 */
  background-color: #f5f5f5;
  border: 1px solid #000;/* 枠線 */
  box-sizing: border-box; /* padding込みで幅を計算 */
}
.my-input:focus {
  border-color: #0095ff;                 /* 枠線をブルーに */
  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.3);
}


.clear-button {
  position: fixed;
  bottom: 20px;         /* 下からの距離 */
  left: 50%;            /* 中央寄せの基点 */
  transform: translateX(-50%); /* 完全に中央に配置 */
  background-color: #007BFF;
  color: white;
  font-size: 14px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* 他の要素より上に */
  transition: background-color 0.3s;
}

.clear-button:hover {
  background-color: #0056b3;
}

.clear-button:active {
  background-color: #004a99;
}

/* 画像プレビュー（IDに合わせる） */
#imagePreview {
  position: fixed;          /* カーソル基準で追随 */
  left: 0;
  top: 0;
  display: none;            /* JSで表示制御 */
  z-index: 9999;
  pointer-events: none;     /* マウス操作を邪魔しない */
  padding: 2px;
  background: #565656;
  border-radius: 4px;
  box-shadow: 8px 8px 10px rgba(56,56,56,0.5);
  opacity: 0;
  transition: opacity .15s ease;
}

/* 表示時 */
#imagePreview.show {
  display: block;
  opacity: 1;
}