/* ===================== FORMレイアウト ===================== */
form.form {
  background    : #FFFFFF;
  border        : 1px solid #E9E5DF;
  border-radius : 14px;
  box-shadow    : 0 8px 24px rgba(17, 19, 21, 0.06);
  font-family   : "Noto Sans JP", sans-serif;
  margin        : 10px auto 80px;
  padding       : 40px 36px;
  position      : relative;
  text-align    : left;
  width         : 100%;
  z-index       : 1;
}

/* 背景 */
body {
  background : linear-gradient(180deg, #FAF9F8 0%, #F6F4F2 100%);
}

/* 各入力ブロック */
.formContainer {
  display        : flex;
  flex-direction : column;
  gap            : 8px;
  margin-bottom  : 22px;
}


/* ラベル全体を左寄せに戻す */
.formName label {
  align-items : center;
  color       : var(--color-accent-dark);
  display     : inline-flex;
  font-size   : 0.95rem;
  font-weight : 700;
  gap         : 6px;
}

/* 必須アイコン（赤丸） */
.formName label .required::before {
  color       : #E74C3C;
  content     : "●";
  display     : inline-block;
  font-size   : 0.6rem;
  margin-left : 2px;
  transform   : translateY(-1px);
}

.required {
  font-size : 0;
}

/* 入力欄 */
.formInput input.formCss {
  background    : #FAF9F8;
  border        : 1px solid #DCD6CF;
  border-radius : 8px;
  color         : #333333;
  display       : block;
  font-size     : 0.95rem;
  min-width     : 300px; /* ← 狭すぎる環境用フォールバック */
  padding       : 10px 14px;
  transition    : border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  width         : 100%; /* ← スマホでformが狭いときは親に合わせる */
}

/* フォーカス時 */
.formInput input.formCss:focus {
  background   : #FFFFFF;
  border-color : var(--color-accent);
  box-shadow   : 0 0 0 3px rgba(181, 148, 114, 0.25);
  outline      : none;
}

/* エラー想定 */
.formInput input.formCss.error {
  border-color : var(--danger);
  box-shadow   : 0 0 0 3px rgba(199, 52, 52, 0.2);
}

.formInput select.formCss {
  background    : linear-gradient(180deg, #FFFFFF 0%, #F5F3F2 100%);
  border        : 1px solid #CCCCCC;
  border-radius : 6px;
  color         : #333333;
  cursor        : pointer;
  font-size     : 0.9rem;
  padding       : 6px 10px;
  transition    : all 0.2s ease;
  width         : 100%;
}

/* textarea を横100%、高さ≈8行に */
.formInput textarea.formCss,
textarea.formCss {
  box-sizing  : border-box;
  height      : calc(1.4em * 8 + 22px); /* 8行 + 既定の上下パディング分を加算 */
  line-height : 1.4; /* 1行の高さ */
  min-height  : calc(1.4em * 8 + 22px);
  resize      : vertical; /* 縦方向のリサイズのみ許可（任意） */
  width       : 100%;
}

/* ========= ファイル入力（.fileUpload） 基本 ========= */
.formInput .fileUpload {
  /* 既存の formCss の幅指定をこの要素だけ解除 */
  background    : #FAF9F8;
  border        : 1px solid #DCD6CF;

  /* 見た目 */
  border-radius : 8px;
  box-sizing    : border-box;
  color         : #333333;
  cursor        : pointer;
  font-size     : 0.95rem;
  line-height   : 1.2;
  max-width     : 100%;
  min-width     : 0 !important;
  padding       : 6px 10px; /* ファイル名の余白 */
  width         : auto !important;
}

/* フォーカス時のアクセシビリティ */
.formInput .fileUpload:focus {
  border-color : var(--color-accent, #B59472);
  box-shadow   : 0 0 0 3px rgba(181, 148, 114, 0.2);
  outline      : none;
}

/* ========= ボタン部分のスタイリング（モダンブラウザ） ========= */
.formInput .fileUpload::file-selector-button {
  appearance    : none;
  background    : linear-gradient(180deg, var(--color-accent, #B59472), var(--color-accent-dark, #8C6C4A));
  border        : 0;
  border-radius : 6px;
  box-shadow    : 0 2px 6px rgba(140, 108, 74, .2);
  color         : #FFFFFF;
  cursor        : pointer;
  font-weight   : 700;
  margin-right  : 10px;
  padding       : 8px 14px;
  transition    : transform .05s ease, filter .2s ease, box-shadow .2s ease;
  white-space   : nowrap;
}

.formInput .fileUpload:hover::file-selector-button {
  filter : brightness(1.05);
}

.formInput .fileUpload:active::file-selector-button {
  box-shadow : 0 1px 3px rgba(140, 108, 74, .2);
  transform  : translateY(1px);
}

/* ========= WebKit 旧仕様（Safari/旧Edge対策） ========= */
.formInput .fileUpload::-webkit-file-upload-button {
  appearance    : none;
  background    : linear-gradient(180deg, var(--color-accent, #B59472), var(--color-accent-dark, #8C6C4A));
  border        : 0;
  border-radius : 6px;
  box-shadow    : 0 2px 6px rgba(140, 108, 74, .2);
  color         : #FFFFFF;
  cursor        : pointer;
  font-weight   : 700;
  margin-right  : 10px;
  padding       : 8px 14px;
  transition    : transform .05s ease, filter .2s ease, box-shadow .2s ease;
  white-space   : nowrap;
}

.formInput .fileUpload:hover::-webkit-file-upload-button {
  filter : brightness(1.05);
}

.formInput .fileUpload:active::-webkit-file-upload-button {
  box-shadow : 0 1px 3px rgba(140, 108, 74, .2);
  transform  : translateY(1px);
}

/* ========= 無効状態 ========= */
.formInput .fileUpload:disabled,
.formInput .fileUpload[disabled] {
  cursor  : not-allowed;
  opacity : .6;
}

.formInput .fileUpload:disabled::file-selector-button,
.formInput .fileUpload[disabled]::file-selector-button,
.formInput .fileUpload:disabled::-webkit-file-upload-button,
.formInput .fileUpload[disabled]::-webkit-file-upload-button {
  cursor : not-allowed;
  filter : grayscale(40%);
}

/* ========= ファイル名の可読性向上（長いファイル名省略） ========= */
.formInput .fileUpload {
  display       : inline-block;
  max-width     : 100%;
  overflow      : hidden;
  text-overflow : ellipsis;
}

/* 親が横並びの時の間隔微調整（任意） */
.formInput .fileUpload + .helpText,
.formInput .fileUpload + .last-rows {
  margin-left : 10px;
}


/* ===================== SUBMIT BUTTON ===================== */
.submitBox {
  margin-top : 28px;
  text-align : center;
}

.submitBox .btn-switch {
  align-items     : center;
  background      : var(--color-accent);
  border          : none;
  border-radius   : 999px;
  box-shadow      : 0 6px 16px rgba(140, 108, 74, 0.25);
  color           : #FFFFFF;
  cursor          : pointer;
  display         : inline-flex;
  font-size       : 1rem;
  font-weight     : 700;
  justify-content : center;
  padding         : 12px 0;
  transition      : all 0.3s ease;
  width           : 100%;
}

.submitBox .btn-switch:hover {
  background : var(--color-accent-dark);
  box-shadow : 0 8px 20px rgba(140, 108, 74, 0.3);
  transform  : translateY(-2px);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width : 640px) {
  form.form {
    margin    : 100px auto 60px;
    max-width : 90%;
    padding   : 28px 24px;
  }

  .formInput input.formCss {
    min-width : unset;
    width     : 100%; /* ← スマホでは画面幅いっぱいに拡大 */
  }
}

/* ===================== 見出し ===================== */
.pageNote {
  background    : #FFFFFF;
  border        : 1px solid #E5E0DB;
  border-radius : 10px;
  box-shadow    : 0 3px 12px rgba(0, 0, 0, 0.04);
  color         : #444444;
  font-size     : 0.9rem;
  line-height   : 1.7;
  margin        : 0 auto 40px;
  max-width     : 800px;
  padding       : 16px 20px;
}

.pageNote p {
  margin : 0.3em 0;
}

/* ===================== 選択ボタン風（ラジオ・チェック共通） ===================== */
.selectContainer {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 12px;
  margin-top : 10px;
}

/* 各ボタンをラベル単位で表示 */
.selectBox {
  display  : inline-block;
  position : relative;
}

.selectBox input[type="radio"],
.selectBox input[type="checkbox"] {
  /* ボタンそのものは非表示に */
  display : none;
}

/* ボタン風に見せるラベル */
.selectBox label {
  background    : linear-gradient(to bottom, #FFFFFF, #F2F2F2);
  border        : 1px solid #CCCCCC;
  border-radius : 999px;
  box-shadow    : 0 2px 4px rgba(0, 0, 0, 0.05);
  color         : #555555;
  cursor        : pointer;
  display       : inline-block;
  font-size     : 0.9rem;
  font-weight   : 600;
  padding       : 10px 20px;
  transition    : all 0.2s ease-in-out;
}

/* hover時の光沢 */
.selectBox label:hover {
  background   : linear-gradient(to bottom, #FAFAFA, #F0F0F0);
  border-color : #BBBBBB;
}

/* チェックON時のスタイル */
.selectBox input:checked + label {
  background   : linear-gradient(to bottom, var(--color-accent, #B59472), var(--color-accent-dark, #8C6C4A));
  border-color : var(--color-accent-dark, #8C6C4A);
  box-shadow   : inset 0 2px 6px rgba(0, 0, 0, 0.15);
  color        : #FFFFFF;
  transform    : translateY(1px);
}

/* フォーカス時（キーボード操作対応） */
.selectBox input:focus-visible + label {
  outline        : 2px solid var(--color-accent, #B59472);
  outline-offset : 3px;
}

/* チェックボックス複数行対応 */
.selectContainer.multi-line {
  align-items    : flex-start;
  flex-direction : column;
  gap            : 8px;
}

/* ===================== 検索フォーム全体 ===================== */
/* ローカルメニューを持つページでh2が埋もれないように余白を確保 */
#search {
  background    : #FFFFFF;
  border-radius : 8px;
  box-shadow    : 0 3px 8px rgba(0, 0, 0, 0.04);
  box-sizing    : border-box;
  margin        : 0 auto 24px;
  max-width     : 1200px;
  padding       : 10px 16px;
}

/* ===================== 内部フォーム ===================== */
#search form {
  align-items : center;
  display     : flex;
  flex-wrap   : wrap; /* 狭い画面で折り返し */
  gap         : 12px 16px;
}

/* ========= #search 内のテキスト入力を小さく（1行コンパクト） ========= */
#search .formContainer {
  align-items   : center;
  display       : flex;
  flex-wrap     : nowrap;
  gap           : 6px;
  margin-bottom : 0;
}

#search .formInput {
  align-items : center;
  display     : flex;
}

/* 入力・選択サイズを強制上書き（既存の min-width:320px 等を打ち消す） */
#search .formInput input.formCss[type="text"],
#search .formInput select.formCss {
  flex            : 0 0 auto; /* 伸びない */
  font-size       : .85rem;
  height          : 28px;
  inline-size     : 14ch; /* お好みで 12–16ch に調整 */
  max-inline-size : 18ch;
  min-inline-size : 0; /* 既存の min-width を無効化 */
  padding         : 2px 6px;
}

/* 余白を少し詰める（横一列に収めやすく） */
#search .formName label {
  font-size   : .85rem;
  font-weight : 600;
  white-space : nowrap;
}

#search .formContainer + .formContainer {
  margin-left : 2px;
}

/* ボタンは右端固定（既出） */
#search .submitBox {
  margin-left : auto;
}

#search .submitBox .searchBtn {
  font-size : .85rem;
  height    : 30px;
  padding   : 6px 16px;
}

/* 画面が狭いときは折返し */
@media (max-width : 900px) {
  #search form {
    flex-wrap : wrap;
  }

  #search .formContainer {
    width : calc(50% - 8px);
  }

  #search .submitBox {
    margin-top : 8px;
    text-align : center;
    width      : 100%;
  }

  #search .submitBox .searchBtn {
    width : 100%;
  }
}

/* ===================== ラベル ===================== */
#search .formName label {
  color       : #6D5B46;
  font-size   : 0.85rem;
  font-weight : 600;
  white-space : nowrap;
}

/* ===================== 入力・選択フィールド ===================== */
#search .formInput input.formCss {
  background    : #FAFAFA;
  border        : 1px solid #CCCCCC;
  border-radius : 4px;
  color         : #333333;
  font-size     : 0.85rem;
  height        : 28px;
  padding       : 2px 6px;
  transition    : border-color 0.2s ease, background 0.2s ease;
  width         : 120px;
}

#search .formInput input.formCss:focus,
#search .formInput select.formCss:focus {
  background   : #FFFFFF;
  border-color : #B59472;
  outline      : none;
}

/* ===================== セレクト装飾 ===================== */
#search .formInput select.formCss {
  width : auto;
}

/* ===================== 検索ボタン（視認性を確保） ===================== */
#search .submitBox {
  margin : 0 0 0 auto;
}

#search .searchBtn {
  align-items     : center;
  background      : #B59472;
  border          : none;
  border-radius   : 6px;
  color           : #FFFFFF;
  cursor          : pointer;
  display         : inline-flex;
  font-size       : 0.9rem; /* ← 文字が読める大きさに調整 */
  font-weight     : 700;
  height          : 34px; /* ← 高さを少し戻す */
  justify-content : center;
  letter-spacing  : 0.03em;
  min-width       : 90px; /* ← ボタンが潰れないように */
  padding         : 6px 22px; /* ← わずかに余白拡大 */
  transition      : background 0.3s ease, transform 0.1s ease;
  white-space     : nowrap;
}

#search .searchBtn:hover {
  background : #8C6C4A;
  transform  : translateY(-1px);
}

/* ===================== レスポンシブ対応 ===================== */
@media (max-width : 900px) {
  #search form {
    flex-wrap : wrap;
  }

  #search .formContainer {
    width : calc(50% - 8px);
  }

  #search .submitBox {
    margin-top : 8px;
    text-align : center;
    width      : 100%;
  }

  #search .searchBtn {
    width : 100%;
  }
}

@media (max-width : 600px) {
  #search .formContainer {
    width : 100%;
  }
}

/* ===================== DATA TABLE AREA ===================== */
main.listMain {
  max-width : 100%;
  width     : 100%;
}

main.has-localmenu > :first-child {
  margin-top : 40px;
}

#dataTableArea {
  background    : #FFFFFF;
  border        : 1px solid #E6E1DB;
  border-radius : 12px;
  box-shadow    : 0 4px 12px rgba(0, 0, 0, .05);
  font-size     : 0.95rem;
  margin-top    : 40px;
  padding       : 22px 26px;
  width         : 98% !important;
}

/* --- コントロールパネル（上部） --- */
.control-panel {
  display        : flex;
  flex-direction : column;
  gap            : 12px;
  margin-bottom  : 16px;
}

.action-group {
  align-items   : center;
  background    : #FBFAF8;
  border        : 1px solid #EAE4DD;
  border-radius : 10px;
  display       : flex;
  flex-wrap     : wrap;
  gap           : 8px;
  padding       : 10px 14px;
}

.actionFormGroup {
  align-items : center;
  display     : flex;
  flex-wrap   : wrap;
  gap         : 8px;
}

.actionFormGroup form {
  background : none;
  border     : none;
  display    : inline-flex !important;
  margin     : 0;
  padding    : 0;
}

/* --- 上部ボタン --- */
.dataFormButton {
  background    : #FFFFFF;
  border        : 1px solid #D9D2CA;
  border-radius : 8px;
  color         : #4A3B2C;
  cursor        : pointer;
  font-size     : 0.9rem;
  font-weight   : 600;
  padding       : 7px 18px;
  transition    : background .2s, box-shadow .2s;
}

.dataFormButton:hover {
  background : #F7F5F2;
  box-shadow : 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dataFormButton.btnLock {
  background : #F3EFEA;
  color      : #8C7B67;
}

/* ---------------------------------------------------------
   #itemBox：ページング＋件数＋ソート領域
--------------------------------------------------------- */
#itemBox.item-group {
  align-items           : center;
  border-bottom         : 1px solid rgba(0, 0, 0, 0.05);
  display               : grid;
  gap                   : 14px 20px;
  grid-template-columns : 1fr auto auto;
  padding               : 12px 0;
}

/* ページング */
.pagingBox {
  align-items : center;
  display     : flex;
  gap         : 12px;
}

.pagingCnt {
  color     : #777777;
  font-size : 0.85rem;
}

.pagingBox div {
  align-items : center;
  display     : flex;
  gap         : 6px;
}

.pagingBox a,
.pagingBox span {
  align-items     : center;
  background      : linear-gradient(180deg, #FFFFFF 0%, #F3F1EF 100%);
  border          : 1px solid #CCCCCC;
  border-radius   : 6px;
  color           : #555555;
  display         : flex;
  font-size       : 0.85rem;
  height          : 30px;
  justify-content : center;
  text-decoration : none;
  transition      : all 0.2s ease;
  width           : 30px;
}

.pagingBox a:hover,
.pagingBox span:hover {
  background   : linear-gradient(180deg, #B59472 0%, #8C6C4A 100%);
  border-color : #8C6C4A;
  color        : #FFFFFF;
  transform    : translateY(-1px);
}

.pagingBox .current {
  background   : linear-gradient(180deg, #B59472 0%, #8C6C4A 100%);
  border-color : #8C6C4A;
  color        : #FFFFFF;
  font-weight  : 700;
}

/* 件数セレクト */
#limitBox select {
  background    : linear-gradient(180deg, #FFFFFF 0%, #F5F3F2 100%);
  border        : 1px solid #CCCCCC;
  border-radius : 6px;
  color         : #333333;
  cursor        : pointer;
  font-size     : 0.9rem;
  padding       : 6px 10px;
  transition    : all 0.2s ease;
}

#limitBox select:hover {
  border-color : #B59472;
}

/* 並び替えエリア */
#orderBox {
  display         : flex;
  gap             : 10px;
  justify-content : flex-end;
}

/* --- 並び替えボタン群 --- */
.orderBox {
  align-items : center;
  display     : flex;
}

.orderControls {
  align-items : center;
  display     : flex;
  gap         : 6px;
}

.orderBtnCancel,
.orderResetBtn {
  background    : #FFFFFF;
  border        : 1px solid #D9D2CA;
  border-radius : 6px;
  color         : #4A3B2C;
  cursor        : pointer;
  font-size     : 0.85rem;
  font-weight   : 600;
  padding       : 5px 12px;
  transition    : background .2s, box-shadow .2s;
}

.orderBtnCancel:hover,
.orderResetBtn:hover {
  background : #F7F5F2;
  box-shadow : 0 1px 3px rgba(0, 0, 0, 0.05);
}

.orderResetBtn {
  color : #8C7B67;
}

/* --- レイアウト調整（狭い画面で縦配置） --- */
@media (max-width : 800px) {
  .item-group {
    align-items    : flex-start;
    flex-direction : column;
    gap            : 12px;
  }

  .pagingBox,
  #limitBox,
  .orderBox {
    justify-content : space-between;
    width           : 100%;
  }
}


/* --- レイアウト調整（狭い画面で縦配置） --- */
@media (max-width : 800px) {
  .item-group {
    align-items    : flex-start;
    flex-direction : column;
  }

  .pagingBox, #limitBox, .orderBox {
    justify-content : space-between;
    width           : 100%;
  }
}

/* --- テーブル全体のラッパー --- */
.data-table-box {
  margin     : 0 auto;
  padding    : 10px 0;
  text-align : center; /* ✅ 中央寄せ補助 */
  width      : 100%;
}

/* --- テーブル本体 --- */
.data-table-box table {
  background      : #FFFFFF;
  border-collapse : collapse;
  border-radius   : 8px;
  box-shadow      : 0 1px 4px rgba(0, 0, 0, 0.05);
  display         : table; /* ✅ 通常のテーブルモデルを強制 */
  font-family     : "Noto Sans JP", sans-serif;
  font-size       : 0.9rem;
  margin          : 0 auto; /* ✅ 横中央寄せ */
  min-width       : 900px;
  overflow        : hidden;
  table-layout    : auto; /* ✅ セル幅の自動調整を有効化 */
  width           : auto; /* ✅ 不要な圧縮を防止 */
}

/* --- ヘッダー（th）全体 --- */
.data-table-box table th {
  background     : linear-gradient(to bottom, #F7F6F4, #EFECE9);
  border-bottom  : 1px solid #DDD6CC;
  color          : #3A2F25;
  font-weight    : 700;
  letter-spacing : 0.02em;
  padding        : 8px 10px;
  text-align     : center;
  user-select    : none;
  vertical-align : middle;
  white-space    : nowrap;
}

/* --- 並び替え可能なヘッダー --- */
.data-table-box th.orderColumnBtn {
  align-items     : center; /* ✅ 縦中央揃え */
  cursor          : pointer;
  gap             : 6px; /* テキストと矢印の間隔 */
  justify-content : center; /* ✅ 横中央揃え */
  transition      : background 0.2s ease, box-shadow 0.2s ease;
}

.data-table-box th.orderColumnBtn:hover {
  background : linear-gradient(to bottom, #F3EDE8, #E8E2DC);
  box-shadow : inset 0 -2px 0 var(--color-accent, #B59472);
}

/* --- 並び替えボタンコンテナ --- */
.data-table-box th.orderColumnBtn > div {
  align-items     : center;
  display         : flex; /* ✅ 横方向 */
  flex-direction  : row; /* ←縦並びを解消 */
  gap             : 2px;
  justify-content : center;
  margin          : 0;
}

/* --- 並び替えボタン（△▽） --- */
.data-table-box th.orderColumnBtn .orderBtn {
  color           : #6A4F36; /* ✅ 濃いブラウンで視認性UP */
  font-size       : 0.8rem;
  line-height     : 1;
  opacity         : 0.75;
  text-decoration : none;
  transition      : opacity 0.2s ease, transform 0.15s ease, color 0.25s ease;
}

.data-table-box th.orderColumnBtn .orderBtn:hover {
  color     : var(--color-accent-dark, #8C6C4A);
  opacity   : 1;
  transform : scale(1.2);
}

.data-table-box th.orderColumnBtn .orderBtn.active {
  color       : var(--color-accent, #B59472);
  font-weight : bold;
  opacity     : 1;
}

/* --- 操作列 (1列目) --- */
.data-table-box table td:first-child,
.data-table-box table th:first-child {
  background : #FAF9F7;
  text-align : center;
}

/* --- テーブル本体 --- */
.data-table-box table td {
  border-bottom : 1px solid #EEE7E0;
  color         : #333333;
  padding       : 8px 10px;
}

.data-table-box table tr:nth-child(even) td {
  background : #FAF9F8;
}

.data-table-box table tbody tr:hover td {
  background : #F5F2EF;
  transition : background 0.2s ease;
}

/* --- 行操作パネル（operationBox） --- */
.operationBox {
  align-items    : center;
  background     : #FBFAF8;
  border         : 1px solid #EAE4DD;
  border-radius  : 8px;
  display        : flex;
  flex-direction : column; /* ✅ 2段構成に修正 */
  flex-wrap      : nowrap; /* 折り返さない */
  gap            : 6px;
  padding        : 6px 10px;
}

/* --- 1段目（編集・削除など） --- */
.operationBox .opFormRow {
  align-items     : center;
  display         : flex;
  flex-wrap       : wrap;
  gap             : 6px;
  justify-content : center; /* ✅ 横並び中央揃え */
  width           : 100%;
}

/* --- 各フォーム共通設定 --- */
.operationBox form {
  align-items : center;
  background  : none;
  border      : none;
  display     : inline-flex !important;
  margin      : 0;
  padding     : 0;
  white-space : nowrap; /* 改行防止 */
}

/* --- 行ボタン --- */
.dataTableBtnEdit,
.dataTableBtnDelete,
.dataTableBtn {
  border        : 1px solid #D9D2CA;
  border-radius : 6px;
  cursor        : pointer;
  font-size     : 0.85rem;
  font-weight   : 600;
  line-height   : 1.2;
  padding       : 5px 12px;
  transition    : background 0.2s, box-shadow 0.2s;
  white-space   : nowrap;
}

.dataTableBtnEdit {
  background : var(--color-accent);
  border     : none;
  color      : #FFFFFF;
}

.dataTableBtnEdit:hover {
  background : var(--color-accent-dark);
}

.dataTableBtnDelete {
  background : #FCEDEA;
  color      : #B5473E;
}

.dataTableBtnDelete:hover {
  background : #F7E2DD;
}

.dataTableBtn {
  background : #FFFFFF;
  color      : #4A3B2C;
}

.dataTableBtn[disabled] {
  cursor  : not-allowed;
  opacity : 0.5;
}

/* --- 2段目（opFormGroup） --- */
.operationBox .opFormGroup {
  align-items     : center;
  border-top      : 1px solid #E3DFDA;
  display         : flex;
  flex-wrap       : wrap;
  gap             : 4px;
  justify-content : center; /* ✅ 横並び中央揃え */
  margin-top      : 3px;
  padding-top     : 3px;
  width           : 100%;
}

/* --- operationBox 内のフォーム幅をリセット --- */
.operationBox form.form {
  flex  : 0 0 auto; /* ✅ 横並び維持（伸縮させない） */
  width : auto !important; /* ✅ 強制的に幅指定を解除 */
}

/* --- 下部ページング --- */
#dataTableArea > .pagingBox:last-of-type {
  justify-content : center;
  margin-top      : 20px;
}

#deleteConfirmDialog,
#stockConfirmDialog {
  display : none;
}

/* --- 一覧画面に表示させる画像は幅を固定する --- */
.imgThumbnail {
  width : 100px;
}

/* =========================================================
   戻るバー＋タイトル付きヘッダー
========================================================= */
.formHeader {
  align-items     : center;
  background      : linear-gradient(180deg, #FFFFFF 0%, #FAF9F7 100%);
  border          : 1px solid #E2DED8;
  border-bottom   : none;
  border-radius   : 14px 14px 0 0;
  box-shadow      : 0 8px 24px rgba(17, 19, 21, 0.06);
  box-sizing      : border-box;
  display         : flex;
  justify-content : space-between; /* ✅ タイトル左／ボタン右 */
  margin          : 0;
  padding         : 12px 24px;
  position        : relative;
  width           : 100%;
  z-index         : 2;
}

/* タイトル（左） */
.formHeader .formTitle {
  color          : #4A3B2C;
  font-size      : 1.2rem;
  font-weight    : 700;
  letter-spacing : 0.03em;
  margin         : 0;
}

/* 戻るボタン（右） */
.formHeader .backBtn {
  align-items     : center;
  background      : #FFFFFF;
  border          : 1px solid var(--color-accent, #B59472);
  border-radius   : 6px;
  box-shadow      : 0 1px 2px rgba(0, 0, 0, 0.05);
  color           : var(--color-accent-dark, #8C6C4A);
  cursor          : pointer;
  display         : inline-flex;
  font-size       : 0.9rem;
  font-weight     : 600;
  gap             : 6px;
  justify-content : center;
  padding         : 8px 18px;
  text-decoration : none;
  transition      : all 0.25s ease;
}

.formHeader .backBtn:hover {
  background : var(--color-accent, #B59472);
  color      : #FFFFFF;
  transform  : translateY(-1px);
}

/* ←アイコン削除（タイトルと干渉しやすいため控えめに） */
.formHeader .backBtn::before {
  content : none;
}

/* 下のフォームと連結 */
.formSection > form.form {
  border-top              : none !important;
  border-top-left-radius  : 0 !important;
  border-top-right-radius : 0 !important;
  margin-top              : 0 !important;
  position                : relative;
  top                     : -1px;
}

/* =========================================================
   入力項目の補足説明文（p.last-rows）
========================================================= */
p.last-rows {
  color        : #777777; /* ✅ 灰色（控えめで可読性あり） */
  font-size    : 0.85rem; /* ✅ 小さめの文字 */
  line-height  : 1.6; /* ✅ 行間を広めに */
  margin       : 6px 0 0; /* ✅ 上だけ少し余白 */
  padding-left : 4px; /* ✅ 左にわずかにインデント */
  text-align   : left;
  word-break   : break-word;
}

/* 強調部分（例：数値・キーワード） */
p.last-rows .bold {
  color       : #555555;
  font-weight : 600;
}

/* 補足説明文の中で <br> が続くときの間隔を自然に */
p.last-rows br + br {
  line-height : 2;
}

/* =========================================================
   料金設定フォームブロック（listForm） - 横並び版
========================================================= */
.listForm {
  align-items   : center;
  background    : #FAF9F8;
  border        : 1px solid #E6E1DB;
  border-radius : 8px;
  box-shadow    : 0 2px 4px rgba(0, 0, 0, 0.03);
  display       : flex;
  flex-wrap     : nowrap; /* ✅ 折り返し禁止で横並び維持 */
  gap           : 10px;
  margin-bottom : 10px;
  overflow-x    : auto; /* ✅ 画面幅が狭いときは横スクロール */
  padding       : 10px 14px;
}

/* --- 行追加・削除ボタンブロック --- */
.listFormOperation {
  align-items     : center;
  display         : flex;
  flex-direction  : column;
  gap             : 4px;
  justify-content : center;
  margin-right    : 8px;
}

.listFormButton {
  background    : linear-gradient(180deg, #FFFFFF 0%, #F5F3F2 100%);
  border        : 1px solid #D1C8BE;
  border-radius : 6px;
  box-shadow    : 0 1px 2px rgba(0, 0, 0, 0.05);
  color         : #4A3B2C;
  cursor        : pointer;
  font-size     : 1rem;
  font-weight   : 700;
  height        : 28px;
  line-height   : 1;
  text-align    : center;
  transition    : all 0.2s ease;
  width         : 28px;
}

.listFormButton:hover:not(:disabled) {
  background   : linear-gradient(180deg, #F9F6F3 0%, #EFEAE4 100%);
  border-color : var(--color-accent, #B59472);
  color        : var(--color-accent-dark, #8C6C4A);
  transform    : translateY(-1px);
}

.listFormButton:disabled {
  cursor  : not-allowed;
  opacity : 0.4;
}

/* =========================================================
   .listForm 内の入力欄だけ、標準フォーム設定を上書き
========================================================= */
.listForm input.formCss,
.listForm select.formCss {
  background    : #FFFFFF;
  border        : 1px solid #D9D2CA;
  border-radius : 6px;
  flex          : 0 0 auto; /* ✅ 幅固定で横並び維持 */
  font-size     : 0.9rem;
  min-width     : unset !important; /* ✅ 標準の300pxを解除 */
  padding       : 6px 10px; /* ✅ コンパクト化 */
  width         : auto !important; /* ✅ 幅100%を解除して横並び可能に */
}

/* --- フォーカス時の共通効果 --- */
.listForm input.formCss:focus,
.listForm select.formCss:focus {
  border-color : var(--color-accent, #B59472);
  box-shadow   : 0 0 0 3px rgba(181, 148, 114, 0.2);
  outline      : none;
}

/* --- 各項目の幅を固定して整列 --- */
.reserve_set_charge_price_name {
  width : 180px;
}

.reserve_set_charge_price_num {
  text-align : right;
  width      : 100px;
}

.reserve_set_charge_price_tax {
  text-align : right;
  width      : 80px;
}

.reserve_set_charge_price_status {
  width : 150px;
}

/* --- 横並びが潰れないように制御 --- */
.listForm > * {
  flex-shrink : 0; /* ✅ 要素が圧縮されない */
}

/* --- レスポンシブ対応 --- */
@media (max-width : 768px) {
  .listForm {
    flex-wrap : wrap; /* 狭い画面では折り返し許可 */
  }

  .listFormOperation {
    flex-direction  : row;
    justify-content : flex-end;
    margin-top      : 8px;
    order           : 99; /* ボタンを下端に移動 */
    width           : 100%;
  }

  .listForm input.formCss,
  .listForm select.formCss {
    width : 100%;
  }
}

/* =========================================================
   #bMes（共通メッセージ領域）
   ========================================================= */
#bMes {
  box-sizing    : border-box;
  color         : #6A5E4B; /* 落ち着いたブラウン系で高級感 */
  font-size     : 0.85rem; /* ✅ やや小さめ */
  line-height   : 1.5;
  margin-bottom : 12px;
  margin-top    : 12px;
  padding-right : 6px;
  text-align    : right; /* ✅ 右寄せ */
}

#bMes div {
  display        : inline-block; /* ✅ コンパクトにまとまる */
  font-weight    : 400;
  letter-spacing : 0.02em;
  text-align     : right;
}