#closePanelBtn {
  display: none; /* PCでは非表示 */
}

/* デフォルトでモバイル用のボタン類を非表示 */
#mobile-bottom-menu,
#mobile-tools {
  display: none;
}

/* 全体フォント: notsanjp */
* {
  box-sizing: border-box;
  font-family: 'notsanjp', sans-serif;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #4e4e4e;
}

/* ヘッダー */
#app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  height: 80px;
  padding: 0 16px;
}
#app-header .header-left,
#app-header .header-right {
  display: flex;
  align-items: center;
}
#app-header .header-right {
  position: static;
}

.header-btn {
  margin-left: 8px;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* アニメーション用のトランジションを設定 */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* ホバー時のアニメーション */
.header-btn:hover {
  background-color: #555;  /* 背景色を少し明るく */
  transform: scale(1.05);  /* 少し拡大 */
}

/* クリック時に少し戻す */
.header-btn:active {
  transform: scale(1.0);
}
.logo {
  font-weight: bold;
  font-size: 1.2rem;
}

/* メインコンテナ: 横並び */
#main-container {
  display: flex;
  width: 100%;
  height: calc(100vh - 80px); /* ヘッダー高さを引く */
}

/* サイドバー */
#app-sidebar {
  width: 90px;
  background-color: #333;
  color: #fff;
  flex-shrink: 0; /* 幅固定 */
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}
.sidebar-menu {
  display: flex;
  flex-direction: column;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  border-bottom: 1px solid #444;
}
.sidebar-menu:hover {
  background-color: #444;
}

.sidebar-icon {
  width: 40px;  /* お好みで調整 */
  height: 40px;
  margin-bottom: 5px;
  margin-left: 12px;
}
.menu-group button {

  padding: 6px 20px;
}
/* メニュー詳細パネル: 幅400px固定、常時表示 */
#menu-panel {
  width: 400px;
  background-color: #f9f9f9;
  border-left: 1px solid #ccc;
  overflow-y: auto;
  flex-shrink: 0; /* 幅固定 */
  padding: 16px; /* パネル内の余白 */
  /* 常時表示にするため、以前の transform/opacity アニメは削除 */

}
.menu-group {
  margin-bottom: 16px; /* 下マージン */
}
.menu-group-label {
  font-weight: bold;
  margin-bottom: 8px;
}
.menu-group button {
  margin: 4px;              /* ボタン間に隙間 */
  background-color: #fff;   /* 白背景 */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: #333;
}

.menu-group button:hover {
  background-color: #f4f4f4; /* ホバー時、少し明るく */
}
/* 丸いカラーボタン用クラス */
.color-circle {
  width: 24px;
  height: 24px;
  min-width: 24px;  /* 幅が縮まないように */
  border-radius: 50%;
  margin: 4px;
  padding: 0;       /* ボタンの余白を無くす */
  border: 2px solid #b4b4b4; /* 白い縁取りを付ける例 */
  box-sizing: border-box;  /* 枠も含めて円形 */
}
.color-circle:hover {
  /* ボタン全体の背景変化を抑えたい場合は独自に調整 */
  filter: brightness(90%);
}
.menu-group button.color-circle.selected {
  /* 選択中の色を強調したい */
  border-color: #ff9f00; 
}
/* 選択状態（例：カラーが選択されている）を視覚化するクラス */
.menu-group button.selected {
  border-color: #ff9f00;    /* 選択時に枠線を目立たせる */
  background-color: #ff9f00;/* 薄いオレンジ系の背景色にする例 */
  color: #ffffff;
}

/* テキスト入力の textarea を大きめに */
.text-input-area {
  width: 100%;
  min-height: 2em; /* 2～3行分以上なら、6emくらいにする例 */
  padding: 8px;
  margin: 4px 0;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none; /* ユーザーによるリサイズを禁止するなら */
}
/* 選択中のテキスト色を表示する小さなプレビュー例 */
.selected-color-preview {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  vertical-align: middle;
  background-color: #000; /* 初期値は黒など */
  cursor: pointer;
}

.menu-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  font-size: 1rem;
  /* デフォルトの矢印を非表示 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* カスタムの背景アイコン（オプション） */
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5"><path fill="%23333" d="M0 0l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 5px;
}









/* プレビューエリア: 残りスペースを使用 */
#preview-area {
  flex: 1;
  position: relative;
  background-color: #fafafa;
  overflow: hidden;
}

/* キャンバスコンテナ */
#canvas-container {
  width: 994px;
  height: 838px;
  position: relative; /* 印刷範囲も絶対配置しやすくする */
}

/* デザイン要素 */
.design-element {
  position: absolute;
  transform-origin: center center;
  border: 1px dashed transparent;
  cursor: move;
}
.design-element.selected {
  border-color: red;
}

/* モーダル */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.4);
  z-index: 999;
}
.modal.hidden {
  display: none;
}
.modal-content {
  background-color: #fff;
  padding: 16px;
  width: 800px;           /* 横長に設定 */
  max-height: 80vh;       /* ビューポートの80%を上限に高さを制限 */
  overflow-y: auto;       /* 高さ超過時は縦スクロール */
  border-radius: 8px;
}

#final-design-modal .modal-content {
  display: flex;
  flex-direction: column;
}

#final-design-images {
  display: flex;
  flex-direction: row;
  gap: 16px; /* 画像間の隙間 */
  justify-content: center;
  align-items: center;
}


#final-design-images img:nth-child(2) {
  margin-left: -200px; /* この値を大きくすると、より重なる */
}


.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.modal-actions button {
  margin-left: 8px;
}
/* ----- transform-box全体の枠 ----- */
.transform-box {
  position: absolute;
  border: 1px dashed transparent; 
  box-sizing: border-box;
  cursor: move; /* ドラッグ移動できるようにカーソル */
}

/* 選択時に枠を表示 */
.transform-box.selected {
  border-color: #00f; /* 青枠にする例 */
}


.transform-handle svg {
  /* 幅・高さ等の固定 */
  width: 24px;
  height: 24px;
  padding: 12px;   /* 四方に余白を付ける */
  /* 例: z-index, cursor など */
  z-index: 9999;
  cursor: pointer;
}

/* ラッパ（非選択時）: 枠線は透明 */
.element-transformer {
  border: 1px dashed transparent;
  position: absolute;
}

/* ハンドル（非選択時）: 非表示 */
.element-transformer .transform-handle {
  display: none;
}

/* 選択時のみ、枠線とハンドルを表示 */
.element-transformer.selected {
  border: 1px dashed #00f !important; /* 例: 青枠 */
}
.element-transformer.selected .transform-handle {
  display: block;
}
@font-face {
  font-family: 'KsoHakuryu';
  src: url('https://my-simulator.com/fonts/KsoHakuryu.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: '07NikumaruFont';
  src: url('https://my-simulator.com/fonts/./fonts/07NikumaruFont.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KozMinPro-Bold';
  src: url('https://my-simulator.com/fonts/KozMinPro-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KsoGokubutokaisho';
  src: url('https://my-simulator.com/fonts/KsoGokubutokaisho.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KsoTouryu';
  src: url('https://my-simulator.com/fonts/KsoTouryu.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HGRSGU';
  src: url('https://my-simulator.com/fonts/HGRSGU.TTC') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'jkan00h4';
  src: url('https://my-simulator.com/fonts/kan00h4.ttc') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Hightide for free';
  src: url('https://my-simulator.com/fonts/Hightide for free.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'nicoca_v1';
  src: url('https://my-simulator.com/fonts/nicoca_v1.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'APJAPANESEFONTF';
  src: url('https://my-simulator.com/fonts/APJAPANESEFONTF.TTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GOTHICB';
  src: url('https://my-simulator.com/fonts/GOTHICB.TTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'High_School_USA_San';
  src: url('https://my-simulator.com/fonts/High_School_USA_Sans.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Housegrind_Personal_Use_Only';
  src: url('https://my-simulator.com/fonts/Housegrind_Personal_Use_Only.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'nether';
  src: url('https://my-simulator.com/fonts/nether.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Ginchiest';
  src: url('https://my-simulator.com/fonts/Ginchiest.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CENTAUR';
  src: url('https://my-simulator.com/fonts/CENTAUR.TTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CALIFB';
  src: url('https://my-simulator.com/fonts/CALIFB.TTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}





.my-text-element {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;     /* 行間を詰める */
  margin: 0;
  padding: 0;
  overflow: visible;  /* はみ出しを許容 */
}
.loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
}
.loader.hidden {
  display: none;
}
/* spinner表示などは任意で */
.spinner {
  color: #fff;
  font-size: 1.5rem;
}
.final-preview-front {
  margin-right:-400px;
}


#canvas-container img {
  width: 994px;      /* 固定サイズを指定 */
  height: 838px;
}
/* 最終確認モーダル内の注意事項・チェックボックス */
#final-design-footer {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  box-sizing: border-box;
}

.caution-text {
  width: 100%;
  text-align: left;  /* 注意事項のテキストは左寄せ */
  font-size: 0.9rem;
  color: #d9534f;
  margin-bottom: 12px;
}

.checkbox-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;  /* チェックボックスを中央寄せ */
}

.confirm-checkbox-label {
  display: flex;
  align-items: center;
}

.confirm-checkbox-label input[type="checkbox"] {
  transform: scale(1.5);  /* チェックボックスを大きく */
  margin-right: 10px;
}

.checkbox-text {
  font-size: 1.2rem;
  /* 必要ならテキスト部分のスタイルも追加 */
}

/* モーダルアクションのボタン装飾 */
.modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.modal-actions button {
  background-color: #444;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 8px;
}

.modal-actions button:hover {
  background-color: #0056b3;
}
/* 最終確認モーダル内のタイトル専用 */
.final-modal-title {
  font-size: 2rem;            /* 大きめの文字サイズ */
  font-weight: bold;
  color: #333;
  text-align: center;
  padding: 16px 0;

  margin-bottom: 16px;
}/* デザインキー入力モーダル本体 */
.design-key-modal-content {
  background-color: #fff;
  width: 600px;             /* モーダルの横幅 */
  padding: 24px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  /* 既存の .modal-content と重複しないようにする */
}

/* モーダルのヘッダー部分 */
.design-key-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* タイトル左、×ボタン右 */
  margin-bottom: 16px;
}

/* タイトル */
.design-key-modal-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;            /* 余白をリセット */
  color: #333;
}

/* 閉じるボタン(×) */
.design-key-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  transition: color 0.2s;
}
.design-key-modal-close:hover {
  color: #333;
}

/* タイトルとボディの間の仕切り線 */
.design-key-modal-divider {
  border: none;
  margin: 0 -24px 16px; /* 左右に -24px してモーダル全体の幅まで線を伸ばす */
}

/* モーダルのボディ */
.design-key-modal-body {
  display: flex;
  align-items: center;
  gap: 8px; /* 要素間の間隔 */
}

/* 左側のラベル */
.design-key-modal-label {
  white-space: nowrap; /* 改行を防ぐ */
  font-size: 1rem;
  color: #333;
}

/* 入力欄 */
.design-key-modal-input {
  flex: 1;              /* 残りスペースを埋める */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 読込ボタン */
.design-key-modal-loadbtn {
  background-color: #7b7b7b;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.design-key-modal-loadbtn:hover {
  background-color: #3a3a3a;
}

/* モーダル背景(既存 .modal があるなら上書きor調整) */
/* モーダル全体 */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.4);
  z-index: 9999;
}
.modal.hidden {
  display: none;
}

/* 保存モーダル本体 */
.save-result-modal-content {
  background-color: #fff;
  width: 1000px;               /* お好みの横幅 */
  max-width: 90%;            /* 画面が狭い時は縮小 */
  padding: 24px 32px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  font-size: 1rem; /* 全体の文字サイズ */
}

/* ヘッダー */
.save-result-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* タイトル */
.save-result-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
  color: #333;
}

/* 右上の×ボタン */
.save-result-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  transition: color 0.2s;
  padding: 0 4px;
}
.save-result-close-btn:hover {
  color: #333;
}

/* タイトル下の区切り線 */
.save-result-divider {
  margin: 16px -32px;
  border: none;
  border-top: 1px solid #ccc;
}

/* ボディ */
.save-result-body {
  margin-top: 8px;
  margin-bottom: 16px;
}
.save-result-text {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: #333;
}
.save-result-desc {
  margin: 0 0 16px;
  color: #666;
  line-height: 1.4;
}

/* メール送信フォーム */
.save-result-sendemail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.save-result-sendemail label {
  white-space: nowrap;
}
.save-result-sendemail input[type="email"] {
  flex: 1; /* 残りスペースを埋める */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.save-result-sendemail button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background-color: #b5b5b5;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.save-result-sendemail button:hover {
  background-color: #5c5c5c;
}

/* フッター(閉じるボタン) */
.modal-actions {
  display: flex;
  justify-content: flex-end;
}
.modal-actions button {
  padding: 10px 20px;
  margin-left: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* セカンダリボタン */
.btn-secondary {
  background-color: #444;
  color: #fff;
}
.btn-secondary:hover {
  background-color: #666;
}

/* プライマリボタン例 (必要なら) */
.btn-primary {
  background-color: #007bff;
  color: #fff;
}
.btn-primary:hover {
  background-color: #0056b3;
}
#final-result-modal .final-result-modal-content {
  background-color: #fff;
  width: 600px;
  max-width: 90%;
  padding: 24px 32px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
}

.final-result-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.final-result-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
  color: #333;
}

.final-result-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

.final-result-divider {
  margin: 16px -32px;
  border: none;
  border-top: 1px solid #ccc;
}

.final-result-body {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 1rem;
  color: #444;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
}

.modal-actions button {
  padding: 10px 20px;
  margin-left: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.final-result-sendemail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px; /* 適宜 */
}
.final-result-sendemail input[type="email"] {
  flex: 1;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.final-result-sendemail button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background-color: #7d7d7d;
  color: #ffffff;
  cursor: pointer;
}
.final-result-sendemail button:hover {
  background-color: #0056b3;
}
.design-history-list {
  position: absolute;
  top: 80px; /* ヘッダー下あたり */
  right: 0;
  width: 300px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 12px;
  z-index: 2000; 
  max-height: 300px;
  overflow-y: auto;
}
.design-history-list.hidden {
  display: none;
}
.design-history-list ul {
  list-style: none;
  padding: 0;
}
.design-history-list li {
  margin-bottom: 8px;
}

.design-list-modal-content {
  width: 80vw;
  max-width: 1200px;
  padding: 24px;
  border-radius: 8px;
  background: #fff;
}
.design-list-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.design-card {
  width: 200px;
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
  text-align: center;
}
.design-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.design-card .design-key {
  font-weight: bold;
  margin: 4px 0;
}
.design-card {
  width: 180px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 16px;
  margin: 8px;
  text-align: center;
}

.edit-btn {
  display: inline-block;
  margin-top: 8px;
  background-color: #328c94;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.edit-btn:hover {
  background-color: #218838;
}

.delete-btn {
  display: inline-block;
  margin-left: 8px;
  margin-top: 8px;
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.delete-btn:hover {
  background-color: #c82333;
}

.design-list-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 必要に応じて justify-content: center; など */
}

#design-list-notice {
  border-top: 1px solid #ddd;
  margin-top: 16px;
  padding-top: 8px;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.4;
  text-align: left;
}
.design-key-label {
  text-align: left;
  display: block;
  width: 100%;
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
  margin: 4px 0;
  font-size: 14px;
}
.design-list-modal-content h2 {
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.design-date-info {
  text-align: left;
  font-size: 14px;
}
#finalConfirmedKey2 {
  font-size: 1.5em;         /* フォントサイズを大きく */
  background-color: #eee;   /* グレーの背景色 */
  padding: 4px 8px;         /* 少し余白を追加 */
  border-radius: 4px;       /* 丸みを付ける */
}
#confirm-result-modal .final-result-body > p:first-of-type {
  margin-bottom: 16px;
  color: #18869E; /* 好みのカラーコードに変更 */
  font-size: 26px;
  margin-bottom: -10px;
}
.key-box {
  display: inline-flex;       /* インライン要素として横並び */
  align-items: center;        /* ボタンやテキストを縦中央揃え */
  background-color: #eee;     /* グレー背景 */
  padding: 4px 8px;           /* 内側の余白 */
  border-radius: 4px;         /* 角丸 */
  margin-bottom: 8px;         /* 下部に少し余白 (任意) */
}

.key-text {
  font-weight: bold;          /* 太字 */
  margin-left: 4px;           /* 「デザインキー:」とキーの間に少し余白 */
}

.copy-btn {
  margin-left: 8px;           /* キーとボタンの間の余白 */
  background-color: #ffffff;     /* ボタンの背景色(薄いグレー) */
  color: #333;
  border: 1px solid #ccc;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.copy-btn:hover {
  background-color: #aaaaaa;     /* ホバー時に少し濃く */
}
#final-design-modal .modal-content {
  width: 1200px;       /* 任意の固定幅 */
  max-width: 90%;     /* 画面幅が狭い場合は90%まで縮小 */
  z-index: 9999;
}
.element-transformer {
  color: initial; /* または、color: #000; などお好みの色を指定 */
}/*---------------------------------------
  textMenu.js で付与した .text-menu 
  修正点①～④に対応したスタイル群
---------------------------------------*/

/* (①) テキスト入力欄: textarea */
.text-menu .text-input-field {
  display: block;
  width: 100%;
  min-height: 3.5em;  /* 2行～3行分くらいの高さ */
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
  resize: vertical; /* ユーザーがサイズを変えられるようにするなら。禁止なら none */
}

/* (②) カラーパレット（.color-palette-wrapper） */
.color-palette-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.color-palette-wrapper .color-circle {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  padding: 0;
  box-shadow: 0 0 0 1px #ccc inset;
  transition: transform 0.2s ease;
}
.color-palette-wrapper .color-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px #888 inset;
}

/* 選択中の色プレビュー */
.selected-color-preview {
  display: inline-block;
  width: 40px;
  height: 24px;
  margin-bottom: 8px;
  margin-left: 4px;
  border: 2px solid #666;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}

/* (③) テキスト変形ボタンがわかるよう .selected を付与すると強調 */
.transform-buttons button.selected {
  background-color: #fff7e6; /* 薄いオレンジ系 */
  border-color: #ff9f00;
}

/* (④) フォント選択UIレイアウト */
.font-switch-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.text-menu select {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  box-sizing: border-box;
  cursor: pointer;
}
.text-menu select:hover {
  border-color: #999; /* hover時に枠線濃くする例 */
}
.apply-font-button {
  background-color: #fff; 
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  color: #333;
  margin: 4px 0 16px 0;
  transition: background-color 0.3s ease;
}
.apply-font-button:hover {
  background-color: #f4f4f4;
}
.color-palette-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}
.text-menu button {
  /* すでに .menu-group button や header-btn など共通のデザインがある場合は、
     そちらのスタイルが上書きされないように注意します。
     必要に応じて !important などを付与 */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  color: #333;
  margin: 4px 4px 0 0;  /* ボタン間の隙間を空ける例 */
  transition: background-color 0.3s ease;
}
.text-menu input[type="number"] {
  margin-right: 8px; /* ボタンとの間に8px */
  padding: 5px;
}
.text-menu button.selected {
  background-color: #ff9f00;
  color: #fff;
  border-color: #cc7f00;
}
.text-menu .apply-font-button {
  display: block;
  margin-left: auto;
}


/* クリップアート一覧のスタイリング例 */
.clipart-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clipart-item {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 4px;
  cursor: pointer;
}

.clipart-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}
.upload-menu {
  /* 全体の枠・余白など */
  padding: 16px;
  font-family: sans-serif;
  position: relative; /* for close-btn positioning */
}

.upload-menu h2 {
  margin: 0;
  font-size: 18px;
  text-align: center;
  position: relative;
  color: #333;
}

/* 閉じるボタン（右上に配置） */
.upload-close-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: #999;
}

/* ドラッグ＆ドロップ領域 */
.upload-drop-area {
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 24px;
  text-align: center;
  margin: 16px 0;
  cursor: pointer;
  transition: border-color 0.3s;
}

.upload-drop-area.dragover {
  border-color: #f25caa; /* ピンク色など */
}

.upload-drop-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* テキスト */
.upload-drop-text {
  font-size: 14px;
  line-height: 1.5;
  color: #545454; /* ピンク系 */
  margin: 8px 0 0;
}
.upload-preview-wrapper {
  margin: 12px 0;
  text-align: center;
}
.upload-preview-img {
  max-width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.upload-preview-msg {
  color: #666;
  font-size: 12px;
}

.upload-button {
  display: block;
  margin: 0 auto 12px auto;
  padding: 10px 16px;
  background-color: #545454;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.upload-button:hover {
  background-color: #252525;
}

/* 注意書き */
.upload-note {
  font-size: 12px;
  color: #555;
  margin-top: 8px;
  line-height: 1.6;
}

.note-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.note-text {
  margin: 0;
}
/* ページ本体レイアウト等は省略し、ローダー関連のみ示す */

/* 全画面ローダー */
#global-loader {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 1); /* 白背景 */
  z-index: 999999;  /* 最前面に */
  /* 初期状態は表示されたまま */
}

/* ローダーのスピナー */
.loader-spinner {
  width: 50px;  /* 任意サイズ */
  height: 50px;
  border: 5px solid #ccc;
  border-top-color: #3498db; /* 青色のリング */
  border-radius: 50%;
  animation: spin 1s infinite linear;
  margin-bottom: 12px; /* テキストとの隙間 */
}

/* アニメーション定義 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ページコンテンツ */
#app-content {
  /* 読み込み完了するまで非表示でも可: 
     display: none; あるいは visibility: hidden; 
     後ほどJSで表示に切り替える 
  */
}
.beta-modal-actions{
  text-align: right;
}
.beta-modal-actions button {
  padding: 10px 20px;
  margin-left: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.beta-modal {
  /* 必須: ページの最前面でフルスクリーン表示 */
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 背景を半透明に */
  background-color: rgba(0, 0, 0, 0.5);
}

.beta-modal.hidden {
  display: none;
}
.btn-primary {
  background-color: #d93025;
  color: #fff;
  border: none;
  padding: 8px 16px;
  margin-top: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-primary:hover {
  background-color: #6e140e;
}
.beta-modal-content {
  background: #fff;
  padding: 24px 32px;
  border-radius: 8px;
  max-width: 90%;
  width: 800px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  text-align: center;
}
/* 不具合報告ボタン (PC用: 画面右端に固定) */
.bug-report-button {
  position: fixed;  /* PC時には固定 */
  top: 15%;
  right: 0;
  transform: translateY(-50%);
  background-color: #e74c3c;
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
}

/* スマホでプレビュー右上に表示したい場合: メディアクエリで書き換え */
@media (max-width: 768px) {
  .bug-report-button {
    position: absolute;  /* あるいは preview-area 内に相対配置したいなら relativeとの組み合わせ */
    top: 120px;
    right: 0px;
    transform: none;
    z-index: 200;
  }
}

/* 不具合モーダルのデザイン例 */
.bug-report-modal-content {
  width: 500px;
  max-width: 90%;
  padding: 16px 24px;
  border-radius: 8px;
  background: #fff;
}
.bug-report-textarea {
  width: 100%;
  height: 120px;
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  resize: vertical;
}
/* .font-list-container: スクロール領域 */
.font-list-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 300px; /* 10件ほど表示できる高さ: 調整 */
  overflow-y: auto;
  margin-top: 8px;
  background-color: #fff;
}

/* .font-list-item: リストの各項目 */
.font-list-item {
  padding: 6px 8px;
  cursor: pointer;
  border-bottom: 1px solid #eee; 
  position: relative; /* labelSpanを右寄せ */
}

.font-list-item:hover {
  background-color: #f0f0f0;
}

.font-list-label {
  font-size: 14px;
  color: #666;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.design-card p {
  /* 折り返しが起こるように */
  overflow-wrap: break-word;
  white-space: normal;
  text-align: left;
}
#disclaimer-modal .beta-modal-content {
  text-align: left;
  /* 必要に応じてpaddingやmarginも調整 */
}
/* チェックボックスのラベルとボタンは中央寄せ */
#disclaimer-modal .beta-modal-content label,
#disclaimer-modal .beta-modal-content button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* flowInfo 全体のコンテナ */
.flow-info-container {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #ccc;       /* 枠線 */
  border-radius: 8px;          /* 角丸 */
  background-color: #f9f9f9;   /* 薄い背景色 */
  font-family: sans-serif;     /* フォント */
}

/* タイトル */
.flow-info-container h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.2rem;
  color: #eb0000;
  text-align: center;    /* 中央寄せ */
  text-decoration: underline; /* 下線を引く */
}

/* リスト */
.flow-info-list {
  margin: 0;
  padding-left: 1.5em; /* 左インデント */
}

/* リストアイテム */
.flow-info-list li {
  margin-bottom: 8px;
  line-height: 1.6;
  color: #555; /* 文字色 */
}

/* スマホ (768px以下) */
@media only screen and (max-width: 768px) {
  .flow-info-container {
    padding: 12px;
    border-radius: 6px;
  }
  .flow-info-container h3 {
    font-size: 1.1rem;
  }
  .flow-info-list li {
    margin-bottom: 6px;
    font-size: 0.95rem;
  }
}
  /* ロゴ全体のスタイル */
  .logo {
    display: inline-block;
    /* 必要に応じてマージンやパディングを追加 */
  }
  /* リンクは下線なし */
  .logo a {
    text-decoration: none;
  }
  /* 画像ロゴのスタイル（デスクトップ用） */
  .logo img {
    max-height: 20px;  /* デスクトップでは80pxまでの高さ */
    height: auto;
    display: block;
  }
  /* オーバーレイ全体: 画面操作をブロック */
.tutorial-overlay {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.2); /* 画面を薄暗く */
  z-index: 9998;              /* シミュレーターより前面に表示 */
  display: flex;
  justify-content: center;  /* 吹き出し自体を中央寄せするなら */
  align-items: center;      /* ただし今回の例はJSで座標を計算するのでセンター寄せは任意 */
}

/* 初期は非表示 */
.hidden {
  display: none !important;
}

/* 吹き出し本体 */
.tutorial-tooltip {
  position: absolute; /* JSで位置指定するので absolute */
  background: #fff;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 16px;
  color: #333;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  font-size: 14px;
  line-height: 1.6;
  z-index: 9999;
}

/* ツールチップ内の×ボタン */
.tutorial-close-btn {
  position: absolute;
  top: 5px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* 矢印を左側につける (▲が右を向く) */
.tutorial-tooltip::before {
  content: "";
  position: absolute;
  left: -26px; /* 吹き出し枠から左へ 16px */
  top: 10px;   /* お好みで調整 */
  border-width: 13px;
  border-style: solid;
  border-color: transparent #333 transparent transparent; 
  /*   ↑矢印の先が右向きになるよう配置(右が#333) */
}
.save-result-notice {
  margin-top: 8px;
  color: #d9534f;  /* ブートストラップの .text-danger 相当の赤色 */
  font-weight: bold; /* 太字にする場合 */
  line-height: 1.6;  /* 行間を少し広めに */
}

  /* スマホ用（画面幅768px以下） */
  @media only screen and (max-width: 768px) {
    .logo img {
      max-height: 15px; /* スマホでは60pxまでの高さに調整 */
    }
    /* 吹き出し本体 */
.tutorial-tooltip {
  top: 50px !important;
  left: 130px !important;
  padding:10px !important;
}
.tutorial-tooltip::before {
  display: none;
}
#confirm-result-modal .final-result-body > p:first-of-type {
  font-size: 22px;
  margin-bottom: -5px;
}
.save-result-notice {
font-size: 15px;
}
  }
/* 表裏インジケーター */
#current-side-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font: 600 13px/1.2 "notsanjp", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  z-index: 999;          /* デザインより上に */
  pointer-events: none;  /* クリックを邪魔しない */
}
#current-side-indicator.back { background: rgba(34,139,230,0.8); } /* 裏面の色(任意) */
#current-side-indicator.front { background: rgba(0,0,0,0.6); }      /* 表面の色(任意) */

/* モバイルだけ丸バッジ(35px)にする */
@media (max-width: 768px) {
  #current-side-indicator {
    min-width: 70px;           /* 横長にする（例：70px） */
    height: auto;              /* 高さは内容に応じて */
    padding: 5px 30px;         /* 横に余白を持たせる */
    font-size: 14px;           /* 見やすい大きさ */
    line-height: 1.4;          /* 縦の余裕 */
    border-radius: 16px;       /* 角丸でラベルっぽく */
    display: inline-block;     /* 横幅が伸びるように */
    text-align: center;
    z-index: 10;               /* フッターメニューより背面 */
  }
}
@media (max-width: 768px){
  #current-side-indicator { transform: translateX(10px); }
}