.textarea-with-button {
  display: flex;
  gap: 8px;
  width: 70%; /* 入力エリアの幅に合わせる */
  margin-left: auto; /* ラベル分右にずらす */
}
/* 丸型アイコンボタン共通 */
.icon-round-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border: 2px solid #0075C2;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.icon-round-button:hover {
  background-color: #f0f8ff;
  box-shadow: 0 0 5px rgba(0,117,194,0.5);
}

/* アイコン画像の調整 */
.icon-round-button .icon-img {
  width: 20px;
  height: 20px;
}

/* ナビゲーションバー内のロゴ画像 */
.logo-img {
  height: 50px;
  max-width: 100%;
}

/* ===== 共通 ===== */
/* ===== キービジュアル全体エリア ===== */
.keyvisual-container {
  position: relative;
  width: 100%;
  height: 90vh; /* フル画面の80%に高さを固定 */
  overflow: hidden; /* 背景画像のはみ出しを防ぐ。動画表示は内側のoverlayで調整 */
}

/* 背景画像設定 */
.keyvisual-image {
  width: 100%;
  height: 100%;
  background-image: url("/static/image/twocat.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* ===== 動画オーバーレイ：スクロール可能にする ===== */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto; /* 垂直スクロール許可 */
  padding: 24px; /* 上下左右の余白 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明で背景画像を透かす */
  box-sizing: border-box;
}

/* スクロールバーが重ならないように */
.video-overlay::-webkit-scrollbar {
  width: 8px;
}
.video-overlay::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

/* 動画要素のデザイン */
.video-overlay video {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}

/* ===== モバイル対応（高さ調整）===== */
@media (max-width: 768px) {
  .keyvisual-container {
    height: 60vh;
  }
}


/* ログインカード */
.login-card {
  width: 100%;
  max-width: 400px;
  z-index: 2; /* 背景の上に表示 */
}





/* 案件登録 */



/* 設定ポップアップの基本スタイル */
#generationOptions {
  position: fixed;
  bottom: 90px; /* ボタンの上に表示 */
  right: 10px; /* ボタンから少し離れた位置に表示 */
  background-color: white; /* 白背景で清潔感を演出 */
  border: 1px solid #0075C2; /* 青色の薄い枠線 */
  border-radius: 12px; /* 丸みをつけたモダンなデザイン */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 滑らかな影 */
  padding: 20px; /* 内側の余白を増やす */
  z-index: 1000; /* 他の要素より前面に表示 */
  display: none; /* 初期は非表示 */
  transform: translateY(10px); /* 初期位置を少し下に */
  opacity: 0; /* 初期は透明 */
  transition: opacity 0.3s ease, transform 0.3s ease; /* 表示時にアニメーション */

  /* 幅を広げる */
  width: 550px; /* 必要な幅に変更してください */
}

/* ポップアップ表示時のスタイル */
#generationOptions.show {
  display: block;
  opacity: 1; /* 透明度を戻す */
  transform: translateY(0); /* 元の位置に移動 */
}

/* ポップアップ内の選択肢 */
#generationOptions ul {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  margin: 0;
  padding: 0;
}

#generationOptions li {
  margin-bottom: 15px; /* 各選択肢の間に適度な間隔を追加 */
}

/* ボタンスタイル */
#generationOptions button {
  width: 100%; /* 幅を親要素に合わせる */
  padding: 12px 16px; /* 十分なパディングを追加 */
  background-color: #0075C2; /* 青色背景 */
  color: white; /* 白文字 */
  border: none; /* 枠線なし */
  border-radius: 8px; /* 柔らかい角丸 */
  font-size: 14px; /* 読みやすいフォントサイズ */
  font-weight: bold; /* 太字で視認性を向上 */
  cursor: pointer; /* カーソルをポインタに設定 */
  transition: background-color 0.3s ease, transform 0.2s ease; /* ホバーアニメーション */
}

/* ボタンのホバー時のスタイル */
#generationOptions button:hover {
  background-color: #0056b3; /* 濃い青に変更 */
  transform: scale(1.05); /* 少し大きくする */
}

/* ボタンのアクティブ状態 */
#generationOptions button:active {
  transform: scale(0.95); /* 押されたときに縮小 */
}

/* ボタン間の仕切り線 */
#generationOptions li + li {
  border-top: 1px solid #e0e0e0; /* 薄いグレーの仕切り線 */
  padding-top: 10px; /* 線と次のボタンに間隔を追加 */
}

/* ポップアップヘッダー（タイトル） */
#generationOptions h3 {
  margin: 0 0 15px; /* 下部に余白を追加 */
  font-size: 16px; /* ヘッダーを少し大きめに */
  font-weight: bold; /* 太字で強調 */
  color: #0075C2; /* 青色テキスト */
  text-align: center; /* 中央揃え */
}

#generationOptions .requirement {
  width: 100%; /* 各要件の幅を広げる */
  display: flex; /* フレックスボックスを使用 */
  align-items: center; /* 垂直方向に中央揃え */
}

#generationOptions .requirement label {
  width: 20%; /* ラベルの幅を固定 */
  text-align: right; /* 右揃えに設定 */
  margin-right: 10px; /* ラベルと入力フィールドの間隔 */
  font-size: 14px; /* 画面幅に応じたフォントサイズ */
  font-weight: bold; /* ラベルを太字に */
  white-space: nowrap; /* 改行を防止 */
  overflow: hidden; /* ラベルが収まらない場合に隠す */
  text-overflow: ellipsis; /* ラベルが長い場合に省略記号を追加 */
}



#addMediaButton {
  background-color: white; /* 背景色を白に */
  color: #0075C2; /* テキストの色 */
  border: 1px solid #0075C2; /* 黒いボーダーを追加 */
  font-size: 14px; /* フォントサイズ */
  padding: 5px 5px; /* 内側の余白 */
  border-radius: 0px; /* 四角形に */
  width: 150px; /* ボタン幅を画像に合わせる */
  text-align: center; /* テキスト中央揃え */
}

.hidden-file-input {
  display: none; /* 要素を非表示にする */
}


/* アイコンエリアの基本レイアウト */
/* ツールエリアの背景色を変更 */
.tool-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px; /* 内側の余白 */
  background-color: rgba(56, 56, 255, 0.2); /* 明るいグレー、透明度80% */
  border-radius: 5px; /* コーナーを丸める */
}

.catch-copy-analysis-area {
  margin-top: 15px;
  text-align: left;
}

#catchCopyResultsArea {
  margin: 20px 10px; /* 上下20px、左右10px */
  margin-top: 10px; /* 上部のみ10px */
}

#analyzeCatchCopyButton {
  padding: 10px 20px;
  font-size: 14px;
  color: #3085d6;
  background-color: white;
  border: 1px solid #0075C2; /* 黒いボーダーを追加 */
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#analyzeCatchCopyButton:hover {
  background-color: white;
}

#analyzeCatchCopyButton:active {
  background-color: white;
}


#saveObjects {
  padding: 10px 20px;
  font-size: 14px;
  color: #3085d6;
  background-color: white;
  border: 1px solid #0075C2; /* 黒いボーダーを追加 */
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#saveObjects:hover {
  background-color: white;
}

#saveObjects:active {
  background-color: white;
}

#deleteObjectButton {
  padding: 10px 20px;
  font-size: 14px;
  color: #3085d6;
  background-color: white;
  border: 1px solid #0075C2; /* 黒いボーダーを追加 */
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#deleteObjectButton:hover {
  background-color: white;
}

#deleteObjectButton:active {
  background-color: white;
}

/* ツールエリアとアクションエリアの共通スタイル */
.font-selection-area,
.color-selection-area,
.text-background-toggle-area,
.action-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-toggle label {
  font-size: 14px;
}

.text-toggle select {
  padding: 5px;
  font-size: 14px;
  width: 150px; /* 適切な幅を設定 */
}

/* フォント選択エリアのスタイル */
.font-selection {
  display: flex;
  align-items: center;
  gap: 5px;
}

.font-selection label {
  font-size: 14px;
}

.font-selection select {
  padding: 5px;
  font-size: 14px;
  width: 150px; /* 適切な幅を設定 */
}

/* 色選択エリアのスタイル */
.color-selection {
    display: flex;
    align-items: center;
    gap: 5px;
}

.color-selection label {
    font-size: 14px;
}

.color-selection input[type="color"] {
    width: 30px;
    height: 30px;
    border: none;
    cursor: pointer;
}

/* キャプションのスタイル */
.caption {
    flex-shrink: 0; /* テキストがアイコンに押されないように固定 */
    font-size: 14px;
    color: white;
    margin: 0;
}

/* アイコンコンテナのスタイル */
.tool-icons,
.action-icons {
    display: flex;
    gap: 10px;
    justify-content: flex-end; /* アイコンを右揃え */
}

/* アイコンのスタイル */
.tool-icon,
.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: none;
    padding: 0;
    border: none;
}

.tool-icon {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.tool-icon img,
.action-icon img {
    max-width: 100%;
    max-height: 100%;
}

/* ホバー効果 */
.tool-icon:hover,
.action-icon:hover {
    opacity: 0.8;
}

.tool-icon:active,
.action-icon:active {
    transform: scale(0.95);
}


.tool-icon.selected {
  border: 2px solid #007BFF; /* 選択中のツールに青い枠線を追加 */
  border-radius: 5px; /* 枠を丸める */
  transform: scale(1.1); /* 選択中のツールを少し拡大 */
}

/* モーダル全体のスタイル */
.modal_twocat {
  display: none; /* デフォルトでは非表示 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 背景の暗いオーバーレイ */
  justify-content: center;
  align-items: center;
}

/* モーダルコンテナ */
.modal-container {
    display: flex; /* 横並びの設定 */
    flex-direction: row; /* 左右並び */
    width: 85%; /* 全体幅の80%を使用 */
    max-width: 1200px; /* 最大幅を設定 */
    border-radius: 0px;
    overflow: hidden; /* コンテンツの溢れを防止 */
}



/* 左パネル: 選択中画像 */
.left-panel {
    width: 50%; /* 横幅を半分に設定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* 右パネル: 画像要素編集とCanvas */
.right-panel {
  width: 50%; /* 横幅を半分に設定 */
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* モーダルの内容（画像コンテナ） */
.modal-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* 固定幅 */
  object-fit: contain; /* 縦横比を保つ */
  background-color: white; /* 背景色（任意） */
  border-radius: 10px; /* 角を丸くする（任意） */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 視覚的な影 */
  overflow: hidden; /* 内容がはみ出さないようにする */
}

/* モーダル内の画像 */
.modal-content img {
  display: block;
  max-width: 100%; /* コンテナ内に収まるよう調整 */
  max-height: 100%; /* コンテナ内に収まるよう調整 */
  object-fit: contain; /* 縦横比を保つ */
}

.caption {
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  font-size: 16px;
}

.close_modal {
  position: absolute;
  top: 10px;
  right: 25px;
  color: white;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 10px;
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}




/* 音声入力トグルエリア */
#voice-input-area {
  position: fixed;
  bottom: 20px; /* 下から20px */
  left: 20px; /* 左から20px */
  background-color: white; /* 背景色を白に設定 */
  color: black; /* テキストの色を黒に設定 */
  padding: 10px 15px; /* 内側の余白 */
  border: 2px solid black; /* 黒いボーダー */
  border-radius: 4px; /* 四角い形状 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を追加 */
  z-index: 10; /* 他の要素より前面に表示 */
  font-size: 0.9em; /* フォントサイズを設定 */
  align-items: center; /* 垂直方向に中央揃え */
  justify-content: space-between; /* ラベルを左、トグルを右に配置 */
  width: 200px; /* エリアの幅を調整 */
}

/* ラベルのスタイル */
.voice-input-label {
  font-weight: bold; /* フォントを太字に */
  color: black; /* テキスト色を黒に */
  text-align: left; /* 左揃えに設定 */
  flex-grow: 1; /* ラベルを可能な限り広げる */
  margin: 0; /* マージンをリセット */
}

/* トグルスイッチ */
.toggle-switch {
  position: absolute;
  right: 10px;
  top: 4px;
  display: flex; /* フレックスボックスを適用 */
  align-items: center; /* 垂直方向に中央揃え */
  justify-content: flex-end; /* 水平方向に右揃え */
  width: 60px; /* トグルスイッチの幅 */
  height: 42px; /* トグルスイッチの高さ */
}


/* チェックボックス本体を非表示に */
.toggle-switch .checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

/* トグルスイッチの外観 */
.toggle-switch .label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px; /* 丸みを追加 */
}

/* トグルスイッチの丸い部分 */
.toggle-switch .label:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* チェック時のスイッチデザイン */
.toggle-switch .checkbox:checked + .label {
  background-color: #2196F3;
}

.toggle-switch .checkbox:checked + .label:before {
  transform: translateX(26px);
}





#image-upload {
  display: none;
}
.requirement label span.required {
    color: red;
}
.requirement label span.optional {
    color: blue;
}
#swal-progress {
  background-color: #eee;
  width: 100%;
  border-radius: 3px;
}
#swal-progress-bar {
  background-color: #3085d6;
  width: 0%;
  height: 20px;
  border-radius: 3px;
}


        /* 画像リストのスタイルを調整 */
        #keyimage-list {
          display: flex; /* フレックスボックスを使用 */
          justify-content: center; /* 左端から配置 */
          flex-wrap: wrap; /* コンテンツがコンテナを超えると折り返す */
          gap: 10px; /* 画像間の隙間 */
          margin: 0 auto; /* 中央揃え */
          padding: 10px;
      }
      
#keyimage-list img {
  transition: transform 0.2s;
}

#keyimage-list img:hover {
  transform: scale(1.1);
}

/* キーイメージのリスト */
#keyimage-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* キーイメージコンテナ */
.recieved-image {
  flex: 0 1 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* キーイメージ画像 */
.key-image {
  width: 100%;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: transform 0.2s;
}

.key-image:hover {
  transform: scale(1.05);
}

/* まだ画像がない場合のメッセージ */
.no-image-message {
  color: #999;
  font-style: italic;
}

/* 案件一覧 */
.list-key-image {
  width: 100px;
  height: auto;
  border-radius: 10px;
}
.table-hover tbody tr:hover {
  background-color: #f5f5f5;
}
.custom-rounded-table th,
.custom-rounded-table td {
  border-top: 1px solid #dee2e6;
}
.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}
.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

/* NaviBar */
.navbar-custom {
  background-color: rgb(0, 0, 0);
}

.navbar-custom .navbar-brand, .navbar-custom .nav-link {
  color: white;
}

.dropdown-menu {
  right: 0;
  left: auto;
}


/* 全体のスタイリング */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: white;
}

.tc-container {
    display: flex;
    background-color: #fff;
    border-radius: 10px 10px 10px 10px; /* タブバーの角を丸くする */
}

/* 丸形ボタンのスタイル */
.round-button {
  position: absolute;
  right: 0; /* コンテナの右端に配置 */
  top: 50%; /* 縦方向の中央に配置 */
  transform: translateY(-50%); /* 縦方向中央にするための調整 */
  background-color: #007bff; /* ボタンの背景色 */
  color: white; /* ボタンのテキスト色 */
  border: none;
  border-radius: 50%; /* 丸形にする */
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 影を追加して立体感 */
  transition: background-color 0.3s ease;

  /* テキストをボタンの中央に配置する */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1; /* テキストの高さを調整 */
}

/* ボタンのホバー時のスタイル */
.round-button:hover {
  background-color: #0056b3; /* ホバー時に背景色を変える */
}


/* 左側の領域を全画面に広げるクラス */
#left-container.fullscreen-left {
  width: 100% !important; /* ビューポート全体に広げる */
  transition: width 0.5s ease-in-out !important;
}

/* 右側の領域を非表示にするクラス */
#right-container.hidden {
  display: none;
}

/* 初期状態 */
#left-container {
  width: 50%;
  background: white;
  padding: 20px;
  display: flex;
  justify-content: center;
  position: relative; /* ボタンの位置を基準にするために relative を設定 */
  transition: width 0.5s ease-in-out;
}

#right-container {
  width: 50%;
  background: white;
  padding: 20px;
  display: flex;
  justify-content: center;
  transition: opacity 0.5s ease-in-out, width 0.5s ease-in-out;
}

/* hidden クラスで非表示 */
.hidden {
  display: none;
}


/* タブコンテンツのスタイル */
#sub_content {
  width: 100%; /* フレックスコンテナに合わせて幅を調整 */
  padding: 20px 20px;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 10px 10px 10px 10px; /* タブバーの角を丸くする */
  background-color: #f9f9f9; /* 背景色を明るいグレーに設定 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ソフトな影を追加 */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
}

#sub_content .requirement {
    width: 100%; /* 各要件の幅を広げる */
    display: flex; /* フレックスボックスを使用 */
    align-items: center; /* 垂直方向に中央揃え */
    margin-bottom: 15px; /* 各項目の間隔を調整 */
}

#sub_content .requirement label {
    width: 30%; /* ラベルの幅を固定 */
    text-align: right; /* 右揃えに設定 */
    margin-right: 10px; /* ラベルと入力フィールドの間隔 */
    font-size: 14px; /* 画面幅に応じたフォントサイズ */
    font-weight: bold; /* ラベルを太字に */
    white-space: nowrap; /* 改行を防止 */
    overflow: hidden; /* ラベルが収まらない場合に隠す */
    text-overflow: ellipsis; /* ラベルが長い場合に省略記号を追加 */
}

#sub_content .requirement textarea {
    width: 70%; /* 入力エリアを残りの幅に設定 */
    resize: none; /* サイズ変更を無効化 */
    padding: 8px; /* 内側の余白 */
    border: 1px solid #ccc; /* 境界線 */
    border-radius: 4px; /* 角丸形状 */
    font-size: 14px; /* フォントサイズ */
    box-sizing: border-box; /* パディングを含むボックスサイズ計算 */
}

/* 要件エリアのスタイリングを改善 */
.requirements-area {
    width: 50%;
    display: flex;
    flex-direction: column;
    background-color: #fff; /* 白色の背景 */
    border-radius: 8px; /* 角丸のデザイン */
    border: 1px solid #ccc; /* 境界線のスタイル */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影の追加 */
    padding: 20px; /* 内側の余白 */
    margin-top: 20px; /* 上の余白 */
}

/* ラベルとテキストボックスのスタイル改善 */
.requirement label {
    font-weight: bold; /* ラベルのフォントを太字に */
    margin-bottom: 5px; /* ラベルとテキストボックスの間隔 */
    display: block; /* ラベルをブロック要素として表示 */
}

.requirement input[type="text"] {
    width: 95%; /* テキストボックスの幅を親要素に合わせる */
    padding: 8px 10px; /* テキスト入力のパディング */
    border: 1px solid #ccc; /* 境界線のスタイル */
    border-radius: 4px; /* 角丸のデザイン */
    margin-bottom: 15px; /* 各入力フィールドの間隔 */
    font-size: 16px; /* フォントサイズを大きくして読みやすく */
}

/* 入力フィールドのフォーカス時のスタイル */
.requirement input[type="text"]:focus {
    border-color: #0075C2; /* フォーカス時の境界線の色を変更 */
    box-shadow: 0 0 5px rgba(0,117,194,0.5); /* フォーカス時に影を追加 */
    outline: none; /* デフォルトのアウトラインを無効化 */
}

#checkReport {
    position: fixed; /* ビューポートに対して固定位置 */
    bottom: 20px; /* 下から20pxの位置 */
    right: 332px; /* 右から20pxの位置 */
    background-color: #0075C2; /* ボタンの背景色 */
    color: white; /* テキストの色 */
    padding: 15px 30px; /* パディング */
    border: none; /* 枠線なし */
    border-radius: 50px; /* 角丸形状 */
    cursor: pointer; /* カーソルスタイル */
    font-size: 1.2em; /* フォントサイズ */
    z-index: 10; /* 他の要素より前面に表示 */
}


/* #keyImageButton全体のスタイル */
#keyImageButton {
  position: fixed;
  display: flex;
  bottom: 20px;
  right: 20px;
  gap: 10px; /* ボタン間の間隔 */
}

/* キーイメージの生成ボタンのスタイル */
#keyImage {
  background-color: #0075C2;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
}

#keyImage:hover {
  background-color: #0056b3;
}

/* キーイメージの生成ボタンのスタイル */
#WebMail {
  background-color: #0075C2;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
}

#WebMail:hover {
  background-color: #0056b3;
}

/* 設定ボタンの通常状態 */
#settingsButton {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white; /* 背景を白に */
  border: 2px solid #0075C2; /* 枠線を青に */
  border-radius: 50%; /* 丸型にする */
  width: 58px; /* ボタン内での表示サイズ */
  height: 58px; /* ボタン内での表示サイズ */
  padding: 0; /* 余白をなくす */
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時の状態 */
#settingsButton:hover {
  background-color: #f0f8ff; /* ホバー時に薄い青背景 */
  border-color: #0056b3; /* 枠線を濃い青に */
}

/* アクティブ状態（光る効果） */
#settingsButton.active {
  background-color: #f0f8ff; /* ボタン背景を青に */
  border-color: #0056b3; /* 枠線を濃い青に */
  color: white; /* テキストやアイコンを白に */
  box-shadow: 0 0 50px rgba(0, 117, 194, 0.6); /* 光るように見える影 */
}

#ModalSettingsButton {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white; /* 背景を白に */
  border: 2px solid #0075C2; /* 枠線を青に */
  border-radius: 50%; /* 丸型にする */
  width: 58px; /* ボタン内での表示サイズ */
  height: 58px; /* ボタン内での表示サイズ */
  padding: 0; /* 余白をなくす */
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#ModalSettingsButton:hover {
  background-color: #f0f8ff; /* ホバー時に薄い青背景 */
  border-color: #0056b3; /* 枠線を濃い青に */
}

/* アクティブ状態（光る効果） */
#ModalSettingsButton.active {
  background-color: #f0f8ff; /* ボタン背景を青に */
  border-color: #0056b3; /* 枠線を濃い青に */
  color: white; /* テキストやアイコンを白に */
  box-shadow: 0 0 50px rgba(0, 117, 194, 0.6); /* 光るように見える影 */
}

/* 歯車アイコンのスタイル */
#gear-icon {
  width: 50px; /* ボタン内での表示サイズ */
  height: 50px; /* ボタン内での表示サイズ */
}



/* #modalImageButtonのスタイル */
#modalImageButton {
  position: fixed;
  display: flex;
  bottom: 20px;
  right: 20px;
  gap: 10px; /* ボタン間の間隔 */
}

/* キーイメージの生成ボタンのスタイル */
#ModalkeyImage {
  background-color: #0075C2;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
  display: none;
}

#ModalkeyImage:hover {
  background-color: #0056b3;
}

/* キーイメージの生成ボタンのスタイル */
#Fusion {
  background-color: #0075C2;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
  display: none;
}

#Fusion:hover {
  background-color: #0056b3;
}

/* 各条件で表示するスタイル */
#modalImageButton #ModalkeyImage.active {
  display: inline-block; /* 表示 */
}

#modalImageButton #Fusion.active {
  display: inline-block;
}

#modalImageButton #ModalSettingsButton.active {
  display: inline-block;
}

/* 画像とボタンのコンテナ */
.image-and-buttons {
  display: flex;
  align-items: flex-start; /* 画像とボタンを上端揃え */
  gap: 20px; /* 画像とボタンの間隔を設定 */
}

/* 選択中の画像エリア */
#selected-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-top: 0px; /* ボタンコンテナとの間隔 */
  width: 100%; /* 内容の幅を統一 */
  max-width: 200px; /* 最大幅を小さく調整 */
  box-sizing: border-box;
}

/* 画像のスタイル */
#selected-image img {
  max-width: 150px; /* 枠の幅に合わせる */
  max-height: 100%; /* 高さを小さく制限 */
  object-fit: contain; /* 画像を枠内にフィット */
}

        button {
            background-color: #0075C2;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #00528A;
        }



/* ボタンコンテナ */
.button-container {
  display: flex;
  flex-direction: column; /* ボタンを縦に並べる */
  gap: 10px; /* ボタン間の隙間を設定 */
}

/* アップロードボタンのスタイル */
#uploadButton {
  background-color: white; /* 背景色を白に */
  color: #0075C2; /* テキストの色 */
  border: 1px solid #0075C2; /* 黒いボーダーを追加 */
  font-size: 14px; /* フォントサイズ */
  padding: 5px 5px; /* 内側の余白 */
  border-radius: 0px; /* 四角形に */
  width: 150px; /* ボタン幅を画像に合わせる */
  text-align: center; /* テキスト中央揃え */
}

/* リセットボタンのスタイル */
#resetButton {
  background-color: white; /* 背景色を白に */
  color: #0075C2; /* テキストの色 */
  border: 1px solid #0075C2; /* 黒いボーダーを追加 */
  font-size: 14px; /* フォントサイズ */
  padding: 5px 5px; /* 内側の余白 */
  border-radius: 0px; /* 四角形に */
  width: 150px; /* ボタン幅を画像に合わせる */
  text-align: center; /* テキスト中央揃え */
}

#registerMediaButton {
  background-color: white; /* 背景色を白に */
  color: #0075C2; /* テキストの色 */
  border: 1px solid #0075C2; /* 黒いボーダーを追加 */
  font-size: 14px; /* フォントサイズ */
  padding: 5px 5px; /* 内側の余白 */
  border-radius: 0px; /* 四角形に */
  width: 150px; /* ボタン幅を画像に合わせる */
  text-align: center; /* テキスト中央揃え */
}

/* ガイダンス画像エリア */
.guidance-block {
  align-items: flex-start;
}

.guidance-block label {
  width: 30%;
  text-align: right;
  margin-right: 10px;
}

.guidance-body {
  width: 70%;
}

.guidance-block .guidance-text {
  max-width: 420px;
  line-height: 1.6;
  flex: 1 1 auto;
  text-align: left;
}

.guidance-actions {
  align-items: flex-start;
  gap: 20px;
}

.guidance-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.guidance-row .select-box {
  min-width: 160px;
}

#guidancePreviewContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 100%;
}

#guidancePreviewContainer img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#guidanceUploadButton {
  background-color: white;
  color: #0075C2;
  border: 1px solid #0075C2;
  font-size: 14px;
  padding: 5px 5px;
  border-radius: 0px;
  width: 150px;
  text-align: center;
}


/* 無効化されたボタンのスタイル */
.button-container button:disabled {
  opacity: 0.5; /* 半透明に */
  cursor: not-allowed; /* 選択不可に */
  color: grey; /* テキストの色 */
  border: 1px solid grey; /* 無効化時もボーダーを保持 */
  display: none; /* 非表示にする */
}

#keyImage:hover {
    background-color: #00528A; /* ホバー時の背景色 */
}

#checkReport:hover {
    background-color: #00528A; /* ホバー時の背景色 */
}


#back {
  background-color: #0075C2; /* ボタンの背景色 */
  color: white; /* テキストの色 */
  padding: 15px 30px; /* パディング */
  border: none; /* 枠線なし */
  border-radius: 50px; /* 角丸形状 */
  cursor: pointer; /* カーソルスタイル */
  font-size: 1.2em; /* フォントサイズ */
  z-index: 10; /* 他の要素より前面に表示 */
}
#back:hover {
    background-color: #00528A; /* ホバー時の背景色 */
}

#requirementsHeading {
    font-size: 1.5em; /* フォントサイズを大きく */
    color: #333; /* 見出しのテキストカラー */
    margin-top: 0; /* 上の余白をなくす */
    margin-bottom: 1em; /* 見出しとリストの間に余白を設定 */
    text-align: center; /* 中央揃え */
}


/* CSS styles */
.selected {
    border: 2px solid blue;
    transform: scale(1.1);
}

.recieved-image {
  position: relative;
  display: inline-block;
  width: 24%;
  margin-right: 1%;
  margin-bottom: 1%;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}
.recieved-image img {
  width: 100%;
}
.delete-text {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  display: none;
}
.recieved-image:hover .delete-text {
  display: flex;
}
.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* 商談メモテキストエリア */
#discussion-memo {
  border: 1px solid #ccc;      /* 枠線を薄いグレーに設定 */
  border-radius: 4px;          /* 角を丸める */
  font-size: 14px;             /* フォントサイズを設定 */
  padding: 10px;               /* 内側の余白を設定 */
  width: 100%;                 /* 幅を全体に合わせる */
  height: 500px;               /* 初期高さを設定 */
  box-sizing: border-box;      /* パディングを含めたサイズを適用 */
  overflow-y: auto;            /* 縦方向のスクロールを必要時に表示 */
}

/* 商談メモテキストエリア */
#image-memo {
  border: 1px solid #ccc;      /* 枠線を薄いグレーに設定 */
  border-radius: 4px;          /* 角を丸める */
  font-size: 14px;             /* フォントサイズを設定 */
  padding: 10px;               /* 内側の余白を設定 */
  width: 100%;                 /* 幅を全体に合わせる */
  height: 300px;               /* 初期高さを設定 */
  box-sizing: border-box;      /* パディングを含めたサイズを適用 */
  overflow-y: auto;            /* 縦方向のスクロールを必要時に表示 */
}

/* ここから先Detail用 */
/* タブ全体のスタイル */
.bg {
  position: relative;
}

.mask-image {
  mask-size: cover;
  -webkit-mask-size: cover;
}

.overlay {
  position: absolute; /* 必要に応じて位置を調整 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.text-overlay {
  background-size: cover;
  background-repeat: no-repeat;
}

.tab-area {
    width: 50%;
    display: flex;
    flex-direction: column;
    border: none; /* 境界線のスタイル */
    margin-top: 20px; /* 上の余白 */
}

/* 通常画面のタブバー */
.normal-tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f0f0f0; /* 通常画面のタブバー背景を淡いグレーに設定 */
  border-radius: 10px 10px 0 0; /* タブバーの角を丸くする */
}

/* モーダル画面のタブバー */
.modal-tab {
  overflow: hidden;
  border: 1px solid transparent; /* モーダルではやや濃いボーダー */
  background-color: transparent; /* モーダル画面は背景を透明に */
  border-radius: 0px 0px 0 0; /* タブバーの角を丸くする */
}


/* 通常画面のタブボタン */
.normal-tab button {
  background-color: #f0f0f0;
  float: left;
  border: 1px solid #ccc;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  border-bottom: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  font-size: 14px;
}

/* 通常画面のホバー時のスタイル */
.normal-tab button:hover {
  background-color: #e0e0e0;
  border-bottom: 3px solid #333; /* 通常画面ではホバー時のボーダーを控えめに */
}

/* 通常画面のアクティブなタブ */
.normal-tab button.active {
  background-color: #fff;
  border-bottom: 3px solid #000; /* アクティブなタブを明確にする */
  font-weight: bold;
}

/* モーダル画面のタブボタン */
.modal-tab button {
  background-color: transparent; /* 背景色を透明に設定 */
  color: white;
  float: left;
  border: 1px solid white;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  border-bottom: 3px solid transparent;
  border-radius: 0px 0px 0 0;
  font-size: 14px;
}

/* モーダル画面のホバー時のスタイル */
.modal-tab button:hover {
  background-color: rgba(255, 255, 255, 0.2); /* 半透明の白を指定 */
  color: white;
  border-bottom: 3px solid #007bff; /* モーダルでは鮮やかな色を使用 */
}

/* モーダル画面のアクティブなタブ */
.modal-tab button.active {
  background-color: transparent; /* 半透明の白を指定 */
  color: white;
  border-bottom: 3px solid #0056b3; /* アクティブなタブに強調色を適用 */
  font-weight: bold;
}



/* タブコンテンツのスタイル */
#image_content {
  width: 100%; /* フレックスコンテナに合わせて幅を調整 */
  padding: 20px 20px;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 10px 10px 10px 10px; /* タブバーの角を丸くする */
  background-color: #f9f9f9; /* 背景色を明るいグレーに設定 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ソフトな影を追加 */
    text-align: center;
}

/* 通常画面のタブコンテンツスタイル */
.normal-tabcontent {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

/* モーダル画面のタブコンテンツスタイル */
.modal-tabcontent {
  padding: 10px 15px;
  border: 1px solid #aaa;
  border-radius: 0px;
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* やや強い影を追加 */
  display: flex;
  flex-direction: column;

  /* 縦幅を固定し、あふれる場合はスクロール可能に */
  height: 400px; /* 必要な高さに調整 */
  width: 100%;
  overflow-y: auto; /* 縦方向のスクロールを有効化 */
}

/* タブコンテンツ内の文字サイズを調整 */
.modal-tabcontent * {
  font-size: 95%; /* フォントサイズを70%に縮小 */
}

/* セレクトボックスのスタイル */
.select-box {
  margin-right: 10px; /* セレクトボックスの間隔を設定 */
}

/* セレクトメニューのスタイル */
.select-box select {
  width: 100%; /* フレックスコンテナに合わせて幅を調整 */
  padding: 7px;
  margin-top: 0px; /* ラベルとの間隔を設定 */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

/* セレクトメニューのスタイル */
#itemList {
  margin: 0px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

/* セレクトメニューのドロップダウン部分のスタイル */
#itemList option {
  padding: 10px;
  background: white;
  border-bottom: 1px solid #eee;
}

/* 最初のタブコンテンツを表示 */
#ToneManner { display: block; }

/* ボタンとリストコンテナのスタイル */
.elements-container {
  align-items: flex-start; /* ボタンとリストの上端を揃える */
  gap: 10px; /* ボタンとリストの間隔 */
}

/* コンテナのスタイル */
.container_tab {
  display: flex;
    justify-content: space-between; /* コンテナ間のスペースを均等に分配 */
  padding: 10px;
}

#image-container {
    width: 50%;
    background: white;
    padding: 20px;
    display: flex;
    justify-content: center;
}

        /* 画像リストのスタイルを調整 */
        #image-list {
            display: flex; /* フレックスボックスを使用 */
            justify-content: center; /* 左端から配置 */
            flex-wrap: wrap; /* コンテンツがコンテナを超えると折り返す */
            gap: 10px; /* 画像間の隙間 */
            margin: 0 auto; /* 中央揃え */
            padding: 10px;
        }
        
#image-list img {
    flex: 1 0 calc(25% - 30px); /* flex-grow, flex-shrink, flex-basisを設定 */
    max-width: calc(25% - 30px); /* コンテナ幅の25%から隙間の幅を引いた値 */
    margin-bottom: 10px; /* 下マージンを追加して、行間の隙間を作成 */
    width: 100px;
    margin: 10px;
    transition: transform 0.2s;
}

#image-list img:hover {
    transform: scale(1.1);
}






.elements-section {
  margin-bottom: 20px;
}

.elements-section h3 {
  margin-bottom: 10px;
  font-size: 14px;
  color: white;
}

.elements-container, .exclude-elements-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  padding: 10px;
}

.list-container {
  list-style: none;
  padding: 0;
}

.list-container li {
  padding: 2px;
  margin-bottom: 2px;
  background-color: #fff;
  border: 0px;
  cursor: move;
}

.add-button {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

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



  .list-container {
    list-style-type: none;
    padding: 0;
  }
  .draggable-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    cursor: move;
    position: relative; /* for absolute positioning of add-modifier */
  }
  .noun {
    background-color: #efdb54;
    color: black;
    border-radius: 16px;
    padding: 5px 10px;
    margin-right: 15px;
    cursor: pointer; /* Change cursor to indicate editable */
  }
  .modifier {
    background-color: #c9e1b0;
    color: black;
    border-radius: 8px;
    padding: 5px 10px;
    margin-right: 15px;
    cursor: pointer; /* Change cursor to indicate editable */
  }
  .add-modifier {
    display: none; /* Default to hidden */
    cursor: pointer;
    margin-left: 5px;
    font-size: 16px;
    user-select: none;
  }
  .add-button {
    cursor: pointer; /* マウスカーソルがホバーしたときにポインターを表示 */
    /* 他のスタイル設定があればここに追加 */
  }
  .draggable-item:hover .add-modifier {
    display: inline-block; /* Show the button on hover */
  }
#idea-assist-popup {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.7); /* 白色の背景に透明度90%を設定 */
  border: 1px solid #ddd;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 14px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
  opacity: 0;
}

#idea-assist-popup.show {
  transform: translateY(0);
  opacity: 1;
}

#idea-assist-popup ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#idea-assist-popup ul li {
  margin: 5px 0;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#idea-assist-popup ul li:hover {
  background-color: #f0f0f0;
}

  /* ポップアップ内の名詞のスタイル */
  #idea-assist-popup .noun {
    background-color: #efdb54; /* 背景を白に */
    color: black; /* 文字を青色に */
  }

  /* ポップアップ内の修飾句のスタイル */
  #idea-assist-popup .modifier {
    background-color: #c9e1b0; /* 背景を白に */
    color: black; /* 文字を緑色に */
  }

#outputButton {
    position: fixed; /* ビューポートに対して固定位置 */
    bottom: 20px; /* 下から20pxの位置 */
    right: 20px; /* 右から20pxの位置 */
    background-color: #0075C2; /* ボタンの背景色 */
    color: white; /* テキストの色 */
    padding: 15px 30px; /* パディング */
    border: none; /* 枠線なし */
    border-radius: 50px; /* 角丸形状 */
    cursor: pointer; /* カーソルスタイル */
    font-size: 1.2em; /* フォントサイズ */
    z-index: 10; /* 他の要素より前面に表示 */
}

#processButton {
    color: white; /* テキストの色 */
    border: none; /* 枠線なし */
    border-radius: 20px; /* 角丸形状 */
}

#analysisAttentionButton {
    color: black; /* テキストの色 */
    border: none; /* 枠線なし */
    border-radius: 20px; /* 角丸形状 */
    background-color: #f9f9f9; /* ホバー時の背景色 */
    cursor: default;
}

#outputButton:hover {
    background-color: #00528A; /* ホバー時の背景色 */
}

#requirementsHeading {
    font-size: 1.5em; /* フォントサイズを大きく */
    color: #333; /* 見出しのテキストカラー */
    margin-top: 0; /* 上の余白をなくす */
    margin-bottom: 1em; /* 見出しとリストの間に余白を設定 */
    text-align: center; /* 中央揃え */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.mask-overlay {
  -webkit-mask-image: url(''); /* Webkitブラウザ向け */
  mask-image: url(''); /* その他のブラウザ向け */
}

.text-overlay {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#selected-image {
    position: relative;
    display: inline-block;
}

/* 選択中の画像のスタイル */
#selected-image img {
    max-width: 100%; /* 枠の幅に合わせて最大幅を設定 */
    width: auto; /* 自動で幅を調整 */
    height: auto; /* 自動で高さを調整 */
    margin-bottom: 20px; /* 下部に余白を設定 */
}

.select-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%; /* 上位コンテナに対して30%の幅 */
    margin-bottom: 20px; /* 下方向へのマージンを追加 */
}

.select-box {
    margin-bottom: 10px; /* セレクトボックスと画像の間の余白 */
}

.image-wrapper {
    text-align: center; /* 画像とキャプションを中央揃え */
}

.images-container {
    display: flex; /* Flexboxを適用 */
    align-items: flex-start; /* 要素を上部に揃える */
    gap: 10px; /* 画像間の隙間 */
}

.layout_image {
    width: 100%; /* 画像の最大幅 */
    height: auto; /* 高さを自動調整 */
    background: /* 透明な背景の格子模様 */
        linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
        linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.caption {
    margin-top: 5px; /* キャプションの上の隙間 */
    font-size: 14px; /* キャプションのフォントサイズ */
}

/* タブコンテンツのスタイル */
#sub_content_detail {
  width: 100%; /* フレックスコンテナに合わせて幅を調整 */
  padding: 5px;
  overflow: hidden;
    display: flex;
    flex-direction: column;
}

#sub_content_detail .requirement {
    width: 100%; /* 各要件の幅を広げる */
}

#sub_content_detail .requirement label {
    text-align: left; /* ラベルのテキストを左寄せに */
    width: 100%; /* ラベルの幅を広げる */
    margin-bottom: 5px; /* ラベルと入力フィールドの間隔を調整 */
}

#sub_content_detail .requirement textarea {
    resize: none; /* テキストエリアのサイズ変更を禁止 */
    width: 100%; /* 幅を広げる */
    padding: 8px; /* 入力の余白を調整 */
    margin-bottom: 15px; /* 入力フィールド間の間隔を調整 */
    border: 1px solid #ccc; /* 境界線のスタイル */
    border-radius: 4px; /* 角丸のデザイン */
    box-sizing: border-box; /* ボックスサイズの計算方法を指定 */
}

#sub_content_detail .requirement textarea {
  resize: none; /* テキストエリアのサイズ変更を禁止 */
  width: 100%; /* 幅を広げる */
  padding: 8px; /* 入力の余白を調整 */
  margin-bottom: 15px; /* 入力フィールド間の間隔を調整 */
  border: 1px solid #ccc; /* 境界線のスタイル */
  border-radius: 4px; /* 角丸のデザイン */
  box-sizing: border-box; /* ボックスサイズの計算方法を指定 */
}

/* チェックボックスを非表示にする */
#adjust-checkbox {
    display: none;
}

/* カプセルボタンのONスタイル */
#adjust-checkbox:checked + label {
    background-color: #00c21091; /* ON時の背景色 */
    color: white; /* ON時のテキスト色 */
    box-shadow: 0 0 15px rgb(134, 200, 144); /* 明るい光のハイライト */
}

/* カプセルボタンのOFFスタイル */
#adjust-checkbox + label {
    background-color: #ccc; /* OFF時の背景色 */
    color: black; /* OFF時のテキスト色 */
    display: inline-block;
    border-radius: 20px;
    padding: 15px 15px;
    user-select: none; /* テキスト選択を無効化 */
    transition: background-color 0.3s, color 0.3s; /* 色の変化にトランジション効果を追加 */
    cursor: pointer;
}

/* サリエンシーマップコンテナのスタイルをimage-listと同じにする */
#saliencyMapsContainer {
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 中央揃え */
    gap: 10px; /* 画像間の隙間 */
    flex-wrap: wrap; /* 画像が多い場合は折り返す */
    margin-bottom: 20px; /* コンテナの下部に余白を設定 */
    padding: 15px 15px;
}

#saliencyMapsContainer img {
    width: calc(20% - 8px); /* 全体の20%の幅を持つが、隙間分を引く */
    cursor: pointer; /* カーソルをポインタに設定 */
    opacity: 0.6; /* 透明度を設定 */
    transition: opacity 0.3s; /* ホバー時の透明度変化をスムーズに */
}

#saliencyMapsContainer img:hover {
    opacity: 1; /* ホバー時に透明度を100%に */
}



#selected-image:hover .buttons-overlay {
    display: block;
}

.buttons-container {
    position: absolute;
    top: 120px;
    display: flex; /* ボタンを配置する */
    flex-direction: column; /* ボタンを縦に並べる */
    gap: 10px; /* ボタン間の間隔 */
    z-index: 10; /* 画像の上に表示 */
}

/* モーダルボタンの配置 */
.modal-buttons-container {
  position: absolute;
  top: 10px; /* モーダル内の上からの距離 */
  left: 10px; /* モーダル内の左からの距離 */
  display: flex;
  gap: 10px; /* ボタン間の間隔 */
  z-index: 100; /* ボタンを最前面に表示 */
}

/* モーダルボタンの配置 */
.modal-buttons-container {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 10px;
  z-index: 100;
}

/* フラグ表示用のボタン */
.flag-indicator {
  position: absolute;
  top: 8px; /* 画像の左上に配置 */
  left: 8px;
  z-index: 1;
}

.flag-button {
  display: inline-block;
  font-size: 12px;
  padding: 2px 5px;
  color: white;
  border-radius: 4px;
  margin-right: 4px;
  cursor: pointer;
}

.good-flag-img {
  background-color: #00BFFF; /* 水色 */
}

.bad-flag-img {
  background-color: #FF69B4; /* ピンク */
}

.keep-flag {
  background-color: #00ff0063;
}

/* 共通ボタンスタイル */
.good-button, .bad-button, .keep-button, .delete-button {
  opacity: 0.7;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 5px 15px;
  cursor: pointer;
  font-size: 14px;
}

/* 各ボタンの色設定 */
.good-button {
  background-color: #00BFFF; /* 水色 */
}

.bad-button {
  background-color: #FF69B4; /* ピンク */
}

.keep-button {
  background-color: #00ff0063;
}

.delete-button {
  background-color: #FF4500; /* オレンジ */
}

/* ホバー時のスタイル */
.good-button:hover, .bad-button:hover, .keep-button:hover, .delete-button:hover {
  opacity: 1; /* ホバー時に透明度を100%に */
}

/* クリック時にボタンが光るスタイル */
.modal-buttons-container span.active {
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.8);
  opacity: 1; /* 強調表示 */
}

.good-button.selected {
    background-color: #00BFFF; /* 水色系の背景色 */
    opacity: 1; /* ホバー時に透明度を100%に */
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.6); /* 明るい光のハイライト */
}

.bad-button.selected {
    background-color: #FF69B4; /* ピンク系の背景色 */
    opacity: 1; /* ホバー時に透明度を100%に */
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.6); /* 明るい光のハイライト */
}

#historyButton {
    position: fixed; /* ビューポートに対して固定位置 */
    bottom: 20px; /* 下から20pxの位置 */
    right: 190px; /* 右から20pxの位置 */
    background-color: #0075C2; /* ボタンの背景色 */
    color: white; /* テキストの色 */
    padding: 15px 30px; /* パディング */
    border: none; /* 枠線なし */
    border-radius: 50px; /* 角丸形状 */
    cursor: pointer; /* カーソルスタイル */
    font-size: 1.2em; /* フォントサイズ */
    z-index: 10; /* 他の要素より前面に表示 */
}






.menu-tab-area {
    width: 80%;
    display: flex;
    flex-direction: column;
    border: none; /* 境界線のスタイル */
    margin-top: 20px; /* 上の余白 */
    margin-left: auto; /* 左のマージンを自動調整 */
    margin-right: auto; /* 右のマージンを自動調整 */
}

/* 履歴 */
.detail-container {
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
}
.detail-section {
  page-break-inside: avoid;
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}
.image-info-container {
  flex: 1;
  text-align: center;
  margin-right: 20px;
  background-color: #f8f9fa;
}
.image-container img {
  max-width: 20%;
  height: auto;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.info-text {
  margin-top: 10px;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}
.comments-text {
  margin-top: 10px;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 4px;
}
.comments-container {
  flex: 1;
  text-align: left;
  margin-right: 20px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.image-with-flag-container {
  position: relative;
  display: inline-block;
}
.detail-image {
  width: 100px;
  height: auto;
  border-radius: 4px;
}
.image-flag {
  position: absolute;
  bottom: -26px;
  left: -5px;
  background-color: none;
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 9999px;
  font-size: 1em;
  font-weight: bold;
}
.good-flag {
  color: #28a745;
}
.bad-flag {
  color: #dc3545;
}

/* 設定 */
.explanation-image {
  width: 60%;
}

.client-column-width {
  width: 300px;
}

.action-column-width {
  width: 200px;
}

.custom-mt-20 {
  margin-top: 20px;
}

.image-upload-container {
  display: flex;
  width: 40%;
  flex-direction: column;
  gap: 10px;
}

.image-input {
  /* ファイル入力フィールドのスタイリング（必要に応じて） */
}

.update-button {
  background-color: #007bff;
  color: white;
  border-radius: 20px;
  font-size: 0.8rem;
  padding: 5px 10px;
  margin-right: 5px;
  border: none;
}

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

.delete-button {
  background-color: #dc3545;
  color: white;
  border-radius: 20px;
  font-size: 0.8rem;
  padding: 5px 10px;
  border: none;
}

.delete-button:hover {
  background-color: #c82333;
}

.select-box {
  margin-bottom: 1em;
}

.form-group {
  margin-bottom: 1em;
}

#swal-progress {
  background-color: #eee;
  width: 100%;
  border-radius: 3px;
}
#swal-progress-bar {
  background-color: #3085d6;
  width: 0%;
  height: 20px;
  border-radius: 3px;
}
#stop-button {
  margin-top: 10px;
  background-color: #6c757d;
  color: white;
}
#stop-button:hover {
  background-color: #3085d6;
  color: white;
}



.progress {
  height: 20px;
  border-radius: 10px;
  background-color: #e9ecef; /* バーの背景色 */
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  text-align: center;
  color: white;
  font-weight: bold;
  line-height: 20px; /* バーの中央に文字 */
  transition: width 0.5s ease-in-out;
}
.progress {
  position: relative;
}

.progress-text-outside {
  position: absolute;
  top: 10px; /* バーの上に表示する */
  right: 10px;
  font-size: 12px;
  color: #000; /* 外側は黒で表示 */
}

/* 色分け（JavaScript で適用されるためクラスを準備） */
.bg-success {
  background-color: #28a745 !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}





.editable {
  display: inline-block;
  min-width: 150px;    /* 必要に応じて調整 */
  min-height: 1.5em;   /* 行の高さを確保 */
  border: 1px dashed transparent;
  cursor: pointer;
}
.editable:empty:before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none; /* プレースホルダー自体がイベントをブロックしない */
}
.editable:focus {
  border-color: #007bff;
  outline: none;
}
/* JSON 項目用 */
.capsule-key, .capsule-value {
  display: inline-block;
  min-width: 100px;
  min-height: 1.5em;
  border: 1px dashed transparent;
  cursor: pointer;
}
.capsule-key:empty:before,
.capsule-value:empty:before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}
.capsule-key:focus, .capsule-value:focus {
  border-color: #007bff;
  outline: none;
}


  .editable-comment {
    display: inline-block;
    min-width: 100px;
    min-height: 1em;
    border: 1px dashed #f0b429;
    background-color: #fff8d6;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: text;
  }
  .editable-comment:empty:before {
    content: attr(data-placeholder);
    color: #aaa;
  }
  .editable-comment:focus {
    border-color: #1a73e8;
    background-color: #fff3b0;
    outline: none;
  }
  .editable-comment:hover {
    background-color: #fff3b0;
  }



/* 左メニューの基本スタイル */
#left-menu {
  border-radius: 8px;
  background-color: #f8f9fa;
  padding: 10px;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
  font-size: 16px;
  color: #333;
}

/* アイコンのサイズと余白 */
.menu-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

/* ホバー時のスタイル */
.menu-item:hover {
  background-color: #e2e6ea;
  color: #000;
}

/* アクティブなメニューのスタイル */
.menu-item.active {
  background-color: #343a40;
  color: #fff;
  font-weight: bold;
}

/* クライアント管理・チケット管理（将来的に有効化） */
.menu-item.future-feature {
  color: #adb5bd;
}

/* クライアント管理・チケット管理のホバー時の色変更を許可 */
.menu-item.future-feature:hover {
  background-color: #e2e6ea;
  color: #000;
}

/* クリック時のアニメーション */
.menu-item:active {
  transform: scale(0.98);
}

/* プレビュー用スタイル */
.preview-item {
  display: inline-block;
  position: relative;
}




/* Bootstrap のカスタムファイル入力を調整 */
.custom-file {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
}

.custom-file-input {
  width: 100%;
  height: 40px;
  opacity: 0; /* input[type="file"] を隠す */
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.custom-file-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 4px;
  cursor: pointer;
}

.custom-file-label:hover {
  background-color: #e9ecef;
}