@charset "utf-8";

/* ============================================================================
   パーツ定義（module.css）
   ============================================================================
   
   セクション構成
   1. ヘッダー
   2. メインエリア
   3. サイドバー
   4. ページタイトル
   5. 検索エリア
   6. テーブル
   7. フォーム要素
   8. ボタン
   9. ラベル
   10. 見出し
   11. ボックス
   12. カード
   13. アコーディオン
   14. ダイアログ、モーダル
   15. ローディング
   16. ページャー
   17. タブ
   18. アップロード
   19. カレンダー
   20. ログイン
   
============================================================================ */

/* ============================================================================
   1. ヘッダー
============================================================================ */
.header {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  z-index: 100;
}

.header-R {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ロゴ */
.header-ttl {
  font-size: 16px;
  font-weight: 600;
}

.header-ttl a {
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.header-ttl a:hover {
  opacity: 0.8;
}

.header-ttl .ttl-L {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid #ddd;
  line-height: 1;
}

/* ユーザー名 */
.header-name {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.header-name:hover {
  background: #f5f5f5;
}

.header-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #10317c;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.header-name > span:not(.header-avatar) {
  color: #333;
  font-size: 13px;
}

.header-name i {
  color: #999;
  font-size: 10px;
  margin-left: 3px;
}

/* ハンバーガーボタン（SP） */
.header-sp {
  float: right;
}

.header-sp-btn {
  position: relative;
  width: 36px;
  height: 23px;
  display: inline-block;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.header-sp-btn span {
  width: 36px;
  height: 2px;
  display: block;
  background-color: #333;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.header-sp-btn span:nth-child(1) {
  top: 0;
}
.header-sp-btn span:nth-child(2) {
  top: calc(50% - 1px);
}
.header-sp-btn span:nth-child(3) {
  bottom: 0;
}

@media screen and (max-width: 1200px) {
  .header {
    padding: 0 16px;
  }

  .header-ttl .ttl-L {
    font-size: 15px;
    margin-left: 10px;
    padding-left: 10px;
  }
}

@media screen and (max-width: 768px) {
  .header-ttl .ttl-L {
    display: none;
  }
}

/* ============================================================================
   2. メインエリア
============================================================================ */
.main {
  width: 86%;
  margin-left: 14%;
  padding: 52px 0 0 0;
  transition: 0.3s ease;
  background-color: #f5f6fa;
  min-height: 100vh;
}

.main-client {
  width: 100%;
  padding: 52px 0 0 0;
  transition: 0.3s ease;
  background-color: #f5f6fa;
  min-height: 100vh;
}

.main.is-close {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  transition: 0.3s ease;
}

/* メインボックス
   - 一画面に多くのコンテンツを収めるため余白を圧縮
*/
.main-inner {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  padding: 14px 20px 24px;
  min-height: calc(100vh - 100px);
}
@media screen and (max-width: 1200px) {
  .main-inner {
    padding: 12px 14px 20px;
  }
}

@media screen and (max-width: 1200px) {
  .main {
    width: 100%;
    margin-left: 0;
    padding: 100px 3% 45px 3%;
    transition: 0.3s ease;
  }
  .main.is-close {
    width: 100%;
    margin-left: 0;
    padding-left: 60px;
    transition: 0.3s ease;
  }
  .main-inner {
    padding: 15px;
  }
}

/* インナーレイアウト */
.inner {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0;
}
@media screen and (max-width: 768px) {
  .inner {
    width: 100%;
  }
}

/* ２カラム */
.l-2col {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}
.l-2col form {
  width: 100%;
}
.l-2col-box {
  width: 49.5%;
}
.l-2col-L {
  width: 20%;
}
.l-2col-R {
  width: 79%;
}
.edit-2col {
  display: flex;
  gap: 20px;
}
.edit-2col > div {
  flex: 1;
}
/* ３カラム */
.l-3col {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}
.l-3col-box {
  width: 33%;
}
/* ４カラム */
.l-4col {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}
.l-4col-box {
  width: 25%;
}

@media screen and (max-width: 768px) {
  .l-2col {
    display: block;
  }
  .l-2col-box {
    display: block;
    width: 100%;
  }
}

/* ============================================================================
   3. サイドバー
============================================================================ */
.sidebar {
  position: fixed;
  top: 52px;
  left: 0;
  height: calc(100vh - 52px);
  width: 14%;
  background-color: #f8f8f8;
  overflow: hidden;
  overflow-y: auto;
  transition: 0.3s ease;
}
.sidebar.is-close {
  left: -14%;
}
.sidebar li {
  display: table;
  width: 100%;
}
.sidebar li button {
  width: 100%;
  height: 36px;
  padding: 0 16px;
  text-align: left;
  color: #5a5a5a;
  font-size: 13px;
  font-weight: bold;
  border-width: 0;
  border-left: 4px solid transparent;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar li button.is-open {
  background-color: #ededed;
}
.sidebar-list {
  margin-top: 5px;
}
.sidebar-list ul {
  background-color: #f8f8f8;
}
.sidebar a {
  display: table-cell;
  width: 100%;
  height: 34px;
  vertical-align: middle;
  padding-left: 14%;
  color: #707070;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.3;
  border-width: 0;
  text-decoration: none;
}
.sidebar li a:hover {
  background-color: #ededed;
}
.sidebar li a.is-active {
  background: url(/common/image/icn_check.svg) no-repeat 6.5% center #0f172a;
  background-size: 14px;
  font-weight: 600;
}
.sidebar-btn {
  position: fixed;
  width: 13px;
  height: 100%;
  left: 14%;
  top: 52px;
  background: url(/common/image/icn_close.svg) no-repeat 2px 48% #c5c5c5;
  background-size: 7px;
  border: none;
  transition: 0.3s ease;
}
.sidebar-btn.is-close {
  left: 0;
  background-image: url(/common/image/icn_open.svg);
}

/* ============================================================================
   サイドバー 右側メニュー（ユーザーアカウント）
   - シンプル & かっこいい：センター揃えアバター・ガラス感閉じるボタン・
     アイコンタイル・滑らかなスライドイン
============================================================================ */
.sidebar-menu {
  position: fixed;
  top: 0;
  right: -340px;
  width: 320px;
  height: 100vh;
  background: #fff;
  box-shadow: -16px 0 48px rgba(15, 23, 42, 0.12);
  z-index: 200;
  transition: right 0.32s cubic-bezier(0.22, 0.94, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-menu.is-open {
  right: 0;
}

/* ----- 閉じるボタン（パネル右上に絶対配置・ガラスフレーム） ----- */
.sidebar-menu-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  cursor: pointer;
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: 0.18s ease;
}
.sidebar-menu-close:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: rotate(90deg);
}

/* ----- ユーザー情報パネル（センター揃え・グラデーション + 装飾光） ----- */
.sidebar-menu-user {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 24px 26px;
  background:
    radial-gradient(circle at 20% -20%, rgba(237, 46, 100, 0.28) 0%, transparent 55%),
    radial-gradient(circle at 100% 110%, rgba(99, 132, 220, 0.32) 0%, transparent 55%),
    linear-gradient(135deg, #10317c 0%, #0a2358 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.sidebar-menu-user::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

/* アバター: 大きめ＋白枠＋オンラインドット */
.sidebar-menu-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: #fff;
  color: var(--color-secondary);
  border-radius: 50%;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.25);
}
.sidebar-menu-avatar::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #22c55e;
  border: 2.5px solid #10317c;
  border-radius: 50%;
}

.sidebar-menu-user-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-top: 4px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-menu-user-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
}
.sidebar-menu-user-role i {
  font-size: 9px;
  opacity: 0.9;
}

/* ----- メニュー本体（カード型・アイコンタイル付き） ----- */
.sidebar-menu-list {
  list-style: none;
  margin: 0;
  padding: 14px 14px 6px;
  flex: 1;
  overflow-y: auto;
  background: #fafbfd;
}
.sidebar-menu-list li {
  width: 100%;
  height: auto;
  padding: 0;
  color: #1e293b;
  font-size: 13px;
  border-left: none;
  background-color: transparent;
  margin-bottom: 2px;
}
.sidebar-menu-list li:hover {
  background: transparent;
  border-left-color: transparent;
}
.sidebar-menu-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  color: #1e293b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border-radius: 10px;
  transition: 0.18s ease;
}
.sidebar-menu-list li a:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  color: var(--color-secondary);
}

/* アイコンタイル（角丸ボックス内のアイコン） */
.sidebar-menu-icn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #eef1f7;
  border-radius: 8px;
  color: #64748b;
  font-size: 14px;
  flex-shrink: 0;
  transition: 0.18s ease;
}
.sidebar-menu-icn i {
  width: auto;
  text-align: center;
  color: inherit;
  font-size: inherit;
  margin: 0;
}
.sidebar-menu-list li a:hover .sidebar-menu-icn {
  background: var(--color-secondary);
  color: #fff;
  transform: scale(1.04);
}

.sidebar-menu-lbl {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右矢印（hover時に滑らかに表示） */
.sidebar-menu-arrow {
  color: #cbd5e1;
  font-size: 10px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: 0.2s ease;
}
.sidebar-menu-list li a:hover .sidebar-menu-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-secondary);
}

/* お知らせバッジ */
.sidebar-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 8px;
  height: 18px;
  border-radius: 9px;
  line-height: 1;
  min-width: 22px;
  box-shadow: 0 2px 6px rgba(237, 46, 100, 0.35);
}

/* ----- フッター（ゴーストアウトラインのログアウトボタン） ----- */
.sidebar-menu-footer {
  padding: 14px 16px 18px;
  background: #fafbfd;
  border-top: 1px solid #eef1f7;
}
.sidebar-menu-footer form {
  margin: 0;
}
.sidebar-menu-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.18s ease;
}
.sidebar-menu-logout:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.28);
  transform: translateY(-1px);
}
.sidebar-menu-logout i {
  font-size: 13px;
  transition: transform 0.18s ease;
}
.sidebar-menu-logout:hover i {
  transform: translateX(2px);
}
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
  display: none;
}
.sidebar-overlay.is-open {
  display: block;
}
.sidebar-toggle {
  cursor: pointer;
}
.sidebar-toggle:hover {
  opacity: 0.8;
}

@media screen and (max-width: 1200px) {
  .sidebar {
    position: fixed;
    top: 60px;
    right: -450px;
    left: auto;
    width: 450px;
    z-index: 100;
  }
  .sidebar-btn {
    display: none;
  }
  .sidebar.is-open {
    left: auto;
    right: 0;
    z-index: 9999;
  }

  /* SPメニュー開閉時背景 */
  .sp-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    content: "";
    opacity: 0;
    transition: 0.3s ease;
    z-index: 88;
  }
  .sp-bg.is-open {
    opacity: 1;
    display: block;
  }

  .sidebar .header-R {
    background-color: #fff;
    font-size: 12px;
    padding: 30px 0 10px;
  }
  .sidebar .header-R .header-setting {
    margin-right: 10px !important;
  }
}

/* ============================================================================
   4. ページタイトル
============================================================================ */

.top {
  display: table;
  width: 100%;
  height: 35px;
  background-repeat: repeat;
  background-position: center center;
  z-index: 9999;
}
.top-ttl,
.top-btn {
  display: table-cell;
  vertical-align: middle;
}

/* ページタイトル */
.top-ttl {
  font-size: 20px;
  font-weight: bold;
  padding: 0 20px;
  letter-spacing: 2px;
}

/* ページタイトルセレクト&インプットボックス */
.top-ttl select,
.top-ttl input {
  border-radius: 10px;
  height: 40px;
}

/* 検索条件表示エリア */
.top-ttl-filter {
  font-size: 13px;
  padding-left: 15px;
  color: #888;
  vertical-align: middle;
  font-weight: normal;
  letter-spacing: 1px;
}

.top-ttl-filter i {
  color: #444;
}

/* ボタン */
.top-btn {
  text-align: right;
  padding: 0 5px;
}

/* 追従時 */
.top.is-fixed {
  position: fixed;
  top: auto;
  left: 0;
  bottom: 0;
  /* ★.topへ記述を移動 */
  /* z-index:9999; */
  box-shadow: 1.5px 0 3px 1.5px rgba(0, 0, 0, 0.1);
}
.top.is-fixed .top-ttl {
  display: none;
}
.top.is-fixed .top-btn {
  text-align: center;
  width: 100%;
}

/* ============================================================================
   5. 検索エリア
============================================================================ */
.search {
  margin-bottom: -25px;
  background-color: #f8f8f8;
  position: relative;
  padding-top: 50px;
  /* ★追記 */
  z-index: 9998;
}

/* form */
.search-form {
  padding: 15px;
  display: none;
}
.search-form dl {
  width: 100%;
  margin-bottom: 10px;
}
.search-form dl dt,
.search-form dl dd {
  display: table-cell;
  vertical-align: middle;
}
.search-form dl dt {
  min-width: 150px;
  font-weight: bold;
  padding-right: 10px;
}
.search-form dl dt i {
  vertical-align: middle;
  margin-right: 5px;
  color: #777;
}
.search-form dl dd {
  width: 100%;
  padding-right: 20px;
}

/* button */
.search-btn {
  text-align: center;
}
.search-btn i {
  vertical-align: middle;
  margin-right: 5px;
}

/* 検索開閉 */
.search-open {
  position: absolute;
  right: 0;
  bottom: -40px;
}
.search-open button {
  width: 40px;
  height: 40px;
  background-color: #f8f8f8;
  border: none;
  border-bottom: 2px solid #e2e2e2;
}

/* ============================================================================
   検索条件ボックス
============================================================================ */
.search-box {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 15px;
}
.search-box-header {
  background-color: #f0f0f0;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-box-header i {
  color: #666;
}
.search-box-body {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.search-box-body.col-1 { grid-template-columns: 1fr; }
.search-box-body.col-2 { grid-template-columns: repeat(2, 1fr); }
.search-box-body.col-3 { grid-template-columns: repeat(3, 1fr); }
.search-box-body.col-4 { grid-template-columns: repeat(4, 1fr); }
.search-box-body.col-5 { grid-template-columns: repeat(5, 1fr); }
.search-box-body.col-6 { grid-template-columns: repeat(6, 1fr); }
.search-field {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}
.search-field > label:first-child {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  letter-spacing: 0.3px;
}
.search-field input[type="text"],
.search-field input[type="date"],
.search-field input[type="month"],
.search-field input[type="number"],
.search-field select {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}
.search-field input:focus,
.search-field select:focus {
  border-color: #10317c;
  box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.1);
  outline: none;
}
.search-field input.readonly,
.search-field input[readonly] {
  background-color: #eef2f7 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  cursor: default;
}
.search-field-range {
  display: flex;
  align-items: center;
  gap: 5px;
}
.search-field-range input {
  flex: 1;
  min-width: 0;
}
.search-field-range .range-separator {
  color: #999;
  font-size: 12px;
}
.search-field-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 4px 0;
  min-height: 32px;
}
.search-field-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: normal;
  color: #333;
  cursor: pointer;
  line-height: 1;
}
.search-field-group input[type="checkbox"],
.search-field-group input[type="radio"] {
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
}
.search-field .field-text {
  font-size: 13px;
  color: #333;
  padding: 6px 0;
}
/* search-field 内に chip 等の表示要素を入れるためのラッパ（input と同じ高さで縦中央寄せ） */
.search-field .field-chip {
  display: flex;
  align-items: center;
  height: 28px;
}
.search-box.is-dense .search-field .field-chip { height: 24px; }

@media screen and (max-width: 1200px) {
  .search-box-body.col-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .search-box-body,
  .search-box-body.col-3,
  .search-box-body.col-4,
  .search-box-body.col-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .search-box-body,
  .search-box-body.col-2,
  .search-box-body.col-3,
  .search-box-body.col-4,
  .search-box-body.col-6 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   編集ボックス
============================================================================ */

/* コンテナ */
.edit-box {
  background-color: #fff;
  border-radius: 6px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* ヘッダー（グループラベル） */
.edit-box .edit-box-header {
  display: flex;
  justify-content: space-between;
  background-color: #ddeaef;
  border-bottom: 1px solid #c5d9e8;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  border-radius: 6px 6px 0 0;
}

/* ボディ（グリッドコンテナ） */
.edit-box .edit-box-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 20px;
  padding: 10px;
  box-sizing: border-box;
}

.edit-box .edit-box-body.col-1 {
  grid-template-columns: 1fr;
}

.edit-box .edit-box-body.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.edit-box .edit-box-body.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 各フィールド */
.edit-box .edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* 幅広フィールド */
.edit-box .edit-field.wide {
  grid-column: span 2;
}

.edit-box .edit-field.full {
  grid-column: 1 / -1;
}

/* ラベル */
.edit-box .edit-field > label:first-child {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  letter-spacing: 0.3px;
}

/* 必須マーク */
.edit-box .edit-field > label .required {
  color: #e53935;
  margin-left: 4px;
  font-size: 11px;
}

/* 入力フィールド共通 */
.edit-box .edit-field input[type="text"],
.edit-box .edit-field input[type="date"],
.edit-box .edit-field input[type="month"],
.edit-box .edit-field input[type="time"],
.edit-box .edit-field input[type="number"],
.edit-box .edit-field input[type="tel"],
.edit-box .edit-field input[type="email"],
.edit-box .edit-field input[type="password"],
.edit-box .edit-field input[type="url"],
.edit-box .edit-field select,
.edit-box .edit-field textarea {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
  margin: 0;
  font-family: inherit;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.edit-box .edit-field textarea {
  height: auto;
  min-height: 80px;
  padding: 10px;
  resize: vertical;
}

.edit-box .edit-field input[type="file"].form-control {
  padding: 6px 12px;
  border: 1px solid #ccc;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}

.edit-box .edit-field select[multiple].form-control {
  background-image: none;
  padding-right: 12px;
  min-height: 80px;
}

/* フォーカス時 */
.edit-box .edit-field input:focus,
.edit-box .edit-field select:focus,
.edit-box .edit-field textarea:focus {
  border-color: #10317c;
  box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.15);
  outline: none;
}

/* 読み取り専用 */
.edit-box .edit-field input[readonly],
.edit-box .edit-field input.readonly {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
}

/* セレクトボックス矢印 */
.edit-box .edit-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* From～To範囲入力 */
.edit-box .edit-field-range {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.edit-box .edit-field-range input,
.edit-box .edit-field-range select {
  flex: 1;
  min-width: 0;
}

.edit-box .edit-field-range .range-separator {
  color: #888;
  font-size: 14px;
  flex-shrink: 0;
}

/* ラジオ・チェックボックスグループ（上下中央揃え徹底） */
.edit-box .edit-field-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 6px 0;
  margin: 0;
}

.edit-box .edit-field-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: normal;
  color: #333;
  cursor: pointer;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.edit-box .edit-field-group label span {
  margin-left: 0;
}

.edit-box .edit-field-group input[type="radio"],
.edit-box .edit-field-group input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: auto;
  height: auto;
  vertical-align: middle;
}

/* テキスト表示のみ */
.edit-box .edit-field .field-text {
  font-size: 14px;
  color: #333;
  padding: 8px 0;
  line-height: 1.5;
}

.edit-box .edit-field input[list] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* ファイルアップロード */
.edit-box .edit-file-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background-color: #f8f9fa;
  border: 2px dashed #ccc;
  border-radius: 6px;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.edit-box .edit-file-upload:hover {
  border-color: #10317c;
  background-color: #f0f4ff;
}

.edit-box .edit-file-upload input[type="file"] {
  display: none;
}

.edit-box .edit-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background-color: #10317c;
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.edit-box .edit-file-btn:hover {
  background-color: #0a2460;
}

.edit-box .edit-file-text {
  font-size: 12px;
  color: #888;
}

@media screen and (max-width: 768px) {
  .edit-box .edit-box-body,
  .edit-box .edit-box-body.col-2,
  .edit-box .edit-box-body.col-3 {
    grid-template-columns: 1fr;
  }
  .edit-box .edit-field.wide {
    grid-column: span 1;
  }
  .edit-box .edit-file-upload {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================================================
   6. テーブル
============================================================================ */

/* 分類：一覧テーブル
   - 上下の色帯を廃止。横罫線のみのモダンなデータテーブル
   - 偶数行ストライプ + 行ホバーで操作対象を明確化
*/
.tbl-list {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tbl-list-L {
  overflow-y: auto;
}
.tbl-list table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.tbl-list thead th {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
  padding: 0 10px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 700;
  color: #2c4f8c;
  height: 36px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tbl-list tbody th {
  background-color: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}
.tbl-list tbody td,
.tbl-list tfoot td {
  background-color: #fff;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 12.5px;
  color: #1e293b;
  white-space: nowrap;
}
/* 折り返したい列は <td class="tbl-wrap"> で個別指定 */
.tbl-list td.tbl-wrap,
.tbl-list th.tbl-wrap {
  white-space: normal;
}
.tbl-list tbody tr:nth-child(even) td {
  background-color: #fafbfd;
}
.tbl-list tbody tr:hover td {
  background-color: #eef3f9;
}
.tbl-list tbody tr:last-child td,
.tbl-list tbody tr:last-child th {
  border-bottom: none;
}
.tbl-list thead th,
.tbl-list tbody th {
  vertical-align: middle;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 12px;
}
.tbl-list tfoot th {
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  padding: 0 10px;
  vertical-align: middle;
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  height: 36px;
}

/* リスト内フォームパーツ調整 */
.tbl-list input[type="text"],
.tbl-list input[type="date"],
.tbl-list input[type="month"],
.tbl-list input[type="time"],
.tbl-list input[type="number"],
.tbl-list input[type="tel"],
.tbl-list input[type="email"],
.tbl-list select {
  border: none;
  width: 100%;
  outline: none;
  vertical-align: middle;
  background-color: transparent;
  position: relative;
  height: 100%;
}
.tbl-list tbody textarea {
  margin-bottom: 0 !important;
  border: none;
  min-height: 30px;
  height: 30px;
  background-color: transparent;
}
.tbl-list input[type="text"]:focus-within,
.tbl-list input[type="date"]:focus-within,
.tbl-list input[type="month"]:focus-within,
.tbl-list input[type="time"]:focus-within,
.tbl-list input[type="number"]:focus-within,
.tbl-list input[type="tel"]:focus-within,
.tbl-list input[type="email"]:focus-within,
.tbl-list select:focus-within {
  border: #10317c solid 1px;
}
.tbl-list tbody textarea:focus-within {
  border: #10317c solid 1px;
}
.tbl-list .input-min {
  height: 100%;
}
.tbl-list span {
  font-size: 13px;
}

/* ※一覧ボタン調整 */
.tbl-list tbody .btn-normal {
  min-width: 50px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
}
.tbl-list tbody .btn-search {
  vertical-align: middle;
  position: relative;
  top: 0.5px;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .tbl-list {
    min-width: 100% !important;
  }
  .tbl-list thead {
    display: none;
  }
  .tbl-list tbody th,
  .tbl-list tbody td {
    display: table;
    width: 100% !important;
    border-bottom: 1px solid #ccc;
    border-right: none;
  }
  .tbl-list tbody tr th:last-child,
  .tbl-list tbody tr td:last-child {
    border-bottom: none;
  }
  .tbl-list-L,
  .tbl-list-R {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    font-size: 13px;
  }
  .tbl-list-L {
    width: 25%;
    background-color: #f2f2f4;
    padding: 5px;
  }
  .tbl-list-R {
    background-color: #fff;
    padding: 2px 4px;
  }
  .tbl-list tbody tr th:first-child .tbl-list-L,
  .tbl-list tbody tr th:first-child .tbl-list-R,
  .tbl-list tbody tr td:first-child .tbl-list-L,
  .tbl-list tbody tr td:first-child .tbl-list-R {
    background-color: #23232d !important;
    color: #fff;
  }
}

/* 分類：編集テーブル */
.tbl-edit {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: #fff;
  font-size: 13px;
}
.tbl-edit table {
  width: 100%;
  white-space: nowrap;
}
.tbl-edit tbody tr {
  width: 100%;
  height: 45px !important;
  box-sizing: border-box;
  border-bottom: 1px dashed #ccc;
  border-top: 1px dashed #ccc;
}
.tbl-edit tr:first-child {
  border-top: none;
}
.tbl-edit tr:last-child {
  border-bottom: none;
}
.tbl-edit tbody tr input[type="text"],
.tbl-edit tbody tr input[type="date"],
.tbl-edit tbody tr input[type="month"],
.tbl-edit tbody tr input[type="time"],
.tbl-edit tbody tr input[type="password"],
.tbl-edit tbody tr input[type="number"],
.tbl-edit tbody tr input[type="tel"],
.tbl-edit tbody tr input[type="email"],
.tbl-edit tbody tr select,
.tbl-edit tbody tr textarea {
  height: 30px;
}
.tbl-edit tbody th {
  border-color: #ccc;
  background-color: #f5f5f5;
  font-weight: 600;
  vertical-align: middle;
  padding: 0 5px;
  width: 12%;
}
.tbl-edit tbody td {
  padding: 0 10px;
  vertical-align: middle;
}
.tbl-edit button {
  vertical-align: middle;
  position: relative;
  top: -1.5px;
  height: 35px;
  min-width: 75px;
  font-size: 12px;
}
.tbl-edit span {
  color: #666;
  font-size: 14px !important;
}
.tbl-edit input[type="text"]:focus-within,
.tbl-edit input[type="date"]:focus-within,
.tbl-edit input[type="month"]:focus-within,
.tbl-edit input[type="time"]:focus-within,
.tbl-edit input[type="number"]:focus-within,
.tbl-edit input[type="tel"]:focus-within,
.tbl-edit input[type="email"]:focus-within,
.tbl-edit select:focus-within {
  border: #10317c solid 1px;
}
.tbl-edit tbody textarea:focus-within {
  border: #10317c solid 1px;
}
.tbl-edit.min {
  font-size: 12px;
}
.tbl-edit.min tbody tr {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  height: 35px !important;
  box-sizing: border-box;
}
.tbl-edit.min tbody tr input[type="text"],
.tbl-edit.min tbody tr input[type="date"],
.tbl-edit.min tbody tr input[type="month"],
.tbl-edit.min tbody tr input[type="time"],
.tbl-edit.min tbody tr input[type="password"],
.tbl-edit.min tbody tr input[type="number"],
.tbl-edit.min tbody tr input[type="tel"],
.tbl-edit.min tbody tr input[type="email"],
.tbl-edit.min tbody tr select,
.tbl-edit.min tbody tr textarea {
  height: 30px;
}
.tbl-edit.min tbody th,
.tbl-edit.min tbody td {
  padding: 0 5px;
  vertical-align: middle;
  border-left: 1px solid #ccc;
}
.tbl-edit.min tbody th:first-child {
  border-left: none;
}
.tbl-edit.min tbody th {
  width: 7%;
}
.tbl-edit.min button {
  vertical-align: middle;
  position: relative;
  top: -1.5px;
  height: 30px;
  min-width: 30px;
  font-size: 13px;
}
.tbl-edit.min span {
  font-size: 12px !important;
}
@media screen and (max-width: 1500px) {
  .tbl-edit.min {
    font-size: 12px;
    overflow-y: scroll;
  }
}
@media screen and (max-width: 1300px) {
  .tbl-edit {
    font-size: 12px;
    overflow-y: scroll;
  }
  .tbl-edit button {
    font-size: 13px;
    padding: 0 3px;
  }
  .tbl-edit span,
  .tbl-edit.min span {
    font-size: 11px !important;
  }
}

/* 分類：汎用テーブル */
.tbl-normal {
  border-top: 2px solid #10317c;
  border-bottom: 1px solid #10317c;
  background-color: #fff;
  width: 100%;
  font-size: 15px;
}
.tbl-normal table {
  width: 100%;
  white-space: nowrap;
}
.tbl-normal.min {
  font-size: 12px;
}
.tbl-normal.min tbody tr {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  height: 30px !important;
  box-sizing: border-box;
}
.tbl-normal thead th,
.tbl-normal tbody th {
  background-color: #f5f5f5;
  height: 40px;
  border-bottom: 1px solid #e5e5e5;
  border-right: 1px solid #ccc;
  font-weight: 600;
  padding: 4px;
  vertical-align: middle;
  font-size: 13px;
}
.tbl-normal tbody th {
  background-color: #f5f5f5;
  height: 40px;
  border-bottom: 1px solid #e5e5e5;
  border-right: 1px solid #ccc;
  font-weight: 600;
  padding: 4px;
  vertical-align: middle;
}
.tbl-normal td {
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px dashed #e5e5e5;
  height: 35px;
  text-align: left;
  padding: 4px;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 12px;
}
.tbl-normal tbody tr input[type="text"],
.tbl-normal tbody tr input[type="date"],
.tbl-normal tbody tr input[type="month"],
.tbl-normal tbody tr input[type="time"],
.tbl-normal tbody tr input[type="password"],
.tbl-normal tbody tr input[type="number"],
.tbl-normal tbody tr input[type="tel"],
.tbl-normal tbody tr input[type="email"],
.tbl-normal tbody tr select,
.tbl-normal tbody tr textarea {
  height: 40px;
}
.tbl-normal td:last-child {
  border-right: none;
}
.tbl-normal input[type="text"]:focus-within,
.tbl-normal input[type="date"]:focus-within,
.tbl-normal input[type="month"]:focus-within,
.tbl-normal input[type="time"]:focus-within,
.tbl-normal input[type="number"]:focus-within,
.tbl-normal input[type="tel"]:focus-within,
.tbl-normal input[type="email"]:focus-within,
.tbl-normal select:focus-within {
  border: #10317c solid 1px;
}
.tbl-normal tbody textarea:focus-within {
  border: #10317c solid 1px;
}
.tbl-normal.min thead tr,
.tbl-normal.min thead th,
.tbl-normal.min thead td,
.tbl-normal.min tbody tr,
.tbl-normal.min tbody th,
.tbl-normal.min tbody td,
.tbl-normal.min tfoot tr,
.tbl-normal.min tfoot th,
.tbl-normal.min tfoot td {
  height: 35px !important;
}
.tbl-normal.min tbody tr input[type="text"],
.tbl-normal.min tbody tr input[type="date"],
.tbl-normal.min tbody tr input[type="month"],
.tbl-normal.min tbody tr input[type="time"],
.tbl-normal.min tbody tr input[type="password"],
.tbl-normal.min tbody tr input[type="number"],
.tbl-normal.min tbody tr input[type="tel"],
.tbl-normal.min tbody tr input[type="email"],
.tbl-normal.min tbody tr select,
.tbl-normal.min tbody tr textarea {
  height: 30px;
}
.tbl-normal.min tbody td {
  padding: 0 5px;
  vertical-align: middle;
}
.tbl-normal.min button {
  vertical-align: middle;
  position: relative;
  top: -1.5px;
  height: 30px;
  min-width: 30px;
  font-size: 13px;
}

/* テーブル非表示 */
.tbl-none {
  border: none !important;
  background-color: transparent !important;
}

/* テーブルホバー */
.tbl-list tbody tr:hover,
.tbl-normal tbody tr:hover,
.tbl-edit tbody tr:hover {
  background-color: #f8fbfd;
}

/* テーブルヘッダー固定 */
.tbl-fix {
  border-collapse: collapse;
}
.tbl-fix th {
  position: sticky;
  white-space: nowrap;
  z-index: 1;
}
.tbl-fix thead tr:nth-child(1) th {
  /*top: -10px;*/
  top: 0px;
  z-index: 2;
}
.tbl-fix thead tr:nth-child(2) th {
  top: 30px;
}
.tbl-fix th:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

/* テーブルスクロール */
.tbl-scroll {
  overflow-y: scroll;
}
.tbl-normal.tbl-fix thead th:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #10317c;
  box-sizing: border-box;
}

/* テーブル青枠 */
.tbl-blue {
  border: 2px solid #10317c;
  height: fit-content;
}
.tbl-blue-ttl {
  text-align: center;
  height: 30px;
  background-color: #10317c;
  color: #fff;
  line-height: 30px;
  box-sizing: border-box;
  font-size: 15px;
}

/* テーブルクリック遷移 */
.tbl-clickable th .tbl-clickable tbody tr,
.tbl-clickable tbody td input {
  cursor: pointer;
}
.tbl-click:hover {
  background-color: #9ec3d2;
  cursor: pointer;
}

@media screen and (max-width: 1200px) {
  .tbl-normal {
    font-size: 13px;
  }
}

/* ============================================================================
   7. フォーム要素
============================================================================ */
input[type="text"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
select,
textarea {
  font-family: inherit;
  border: 1px solid #ccc;
  font-size: 12px;
  padding: 0 5px;
  height: 30px;
}
select {
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 10px 5px;
  background-position: right 10px center;
}
input[type="radio"],
input[type="checkbox"] {
  position: relative;
  top: 2.25px;
}

textarea {
  width: 100%;
  height: 100%;
  min-height: 60px;
  resize: vertical;
  padding: 5px;
}
@media screen and (max-width: 1100px) {
  input[type="text"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="password"],
  input[type="number"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    padding: 5px;
  }
}

/* フリー入力付きセレクトボックス */
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select details {
  position: relative;
}
.custom-select summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #aaa;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.custom-select summary::-webkit-details-marker {
  display: none;
}
.custom-select details[open] summary {
  border-bottom: none;
}
.custom-select summary .selected-text {
  color: #333;
}
.custom-select summary .selected-text.empty {
  color: #999;
}
.custom-select summary .arrow {
  width: 16px;
  height: 16px;
  color: #666;
  transition: transform 0.2s ease;
}
.custom-select details[open] summary .arrow {
  transform: rotate(180deg);
}
.custom-select .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #aaa;
  border-top: none;
  z-index: 100;
}
.custom-select .dropdown .search-box {
  border-radius: 0;
  margin-bottom: 0;
}
.custom-select .search-box input {
  width: 100%;
  padding: 8px 10px;
  border: none;
  font-size: 12px;
  outline: none;
  background: transparent;
  color: #333;
}
.custom-select .search-box input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.custom-select .options {
  max-height: 280px;
  overflow-y: auto;
}
.custom-select .options label {
  display: block;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #333;
  border-bottom: 1px solid #eee;
}
.custom-select .options label:last-child {
  border-bottom: none;
}
.custom-select .options label:hover {
  background: #f5f5f5;
}
.custom-select .options input[type="radio"] {
  display: none;
}
.custom-select .options input[type="radio"]:checked + span {
  color: #4a8a99;
  font-weight: 600;
}
.custom-select .no-result {
  display: none;
  padding: 16px;
  text-align: center;
  color: #999;
}

/* ============================================================================
   8. ボタン、リンク系
============================================================================ */
.buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}
.btn-search {
  border-radius: 3px;
  border: 1px solid #c5c5c5;
  background-color: #ddd;
}
.btn-search-edit {
  border-radius: 5px;
  border: 1px solid #c0c0c0;
  background-color: #e8e8e8;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  background-color: #e8e8e8;
  border: none !important;
  padding: 0 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  min-width: auto;
  height: 25px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
  letter-spacing: 0.3px;
  position: relative;
}
.btn i {
  color: #fff;
  font-size: 11px;
}
.btn img {
  width: 16px;
  height: auto;
  position: absolute;
  top: 6px;
  left: 3px;
}
.btn-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 2px;
  width: 40px;
  height: 25px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;
  position: relative;
  border: none !important;
}
.btn-tbl-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 2px;
  padding: 0 8px;
  width: auto;
  height: 25px;
  line-height: 1;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;
  position: relative;
  border: none !important;
}
.btn:hover {
  opacity: 0.85;
}
.btn-normal-min {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  background-color: #f2f2f2;
  color: #444;
  padding: 0 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  min-width: 30px;
  height: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border: none !important;
}
.btn-normal-min:hover {
  opacity: 0.85;
}
/* ミニボタン色バリエーション */
.btn-normal-min.btn-edit {
  background-color: #4a90d9;
  color: #fff;
  border-color: #4a90d9;
}
.btn-normal-min.btn-output {
  background-color: #3a8a7e;
  color: #fff;
  border-color: #3a8a7e;
}
.btn-normal-min.btn-csv {
  background-color: #3a8a7e;
  color: #fff;
  border-color: #3a8a7e;
}
.btn-normal-min.btn-excel {
  background-color: #3a8a7e;
  color: #fff;
  border-color: #3a8a7e;
}
.btn-normal-min.btn-delete {
  background-color: #c9302c;
  color: #fff;
  border-color: #c9302c;
}
.btn-normal-min.btn-save {
  background-color: #2c4f8c;
  color: #fff;
  border-color: #2c4f8c;
}
/* 新規作成・更新系（ネイビー） */
.btn-save {
  color: #fff;
  background-color: #d8342f;
  border-color: #c9302c;
  font-size: 10px;
}
.btn-save:hover {
  background-color: #b62c28;
  border-color: #b62c28;
}
.btn-add {
  color: #fff;
  background-color: #2c4f8c;
  border-color: #2c4f8c;
  font-size: 10px;
}
.btn-add:hover {
  background-color: #26467c;
  border-color: #26467c;
}

/* 編集系（ブルー） */
.btn-edit {
  color: #fff;
  background-color: #4a90d9;
  border-color: #4a90d9;
  font-size: 10px;
}
.btn-edit:hover {
  background-color: #3f83cc;
  border-color: #3f83cc;
}

/* 削除系（ゴーストアウトライン: 通常時は灰色、ホバーで赤反転）
   - サイドバーのログアウトボタンと統一感のあるデザイン
*/
.btn-delete {
  color: #64748b !important;
  background-color: #fff !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 10px;
  transition: all 0.15s ease;
}
.btn-delete i {
  color: inherit !important;
}
.btn-delete:hover {
  color: #fff !important;
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.btn-delete:hover i {
  color: #fff !important;
}
.btn-normal-min.btn-delete {
  color: #64748b;
  background-color: #fff;
  border: 1px solid #cbd5e1;
}
.btn-normal-min.btn-delete:hover {
  color: #fff;
  background-color: #dc2626;
  border-color: #dc2626;
}

/* 帳票・出力系（ティール） */
.btn-csv,
.btn-output,
.btn-excel {
  color: #fff;
  background-color: #3a8a7e;
  border-color: #3a8a7e;
  font-size: 10px;
}
.btn-csv:hover,
.btn-output:hover,
.btn-excel:hover {
  background-color: #327d72;
  border-color: #327d72;
}

/* 戻る（グレー） */
.btn-back {
  background-color: #9f9f9f;
  border-color: #9f9f9f;
  color: #fff;
  font-size: 10px;
}
.btn-back:hover {
  background-color: #5f6870;
  border-color: #5f6870;
}
.btn-back i {
  color: #fff;
}
.is-select {
  border: 1px solid #10317c !important;
}
.btn-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
  border-color: #dc3545 !important;
}
.btn-danger:hover {
  background-color: #c82333 !important;
  border-color: #c82333 !important;
}

/* -------------------------------------------------
   ボタンバリエーション（既存の .btn-* に追加できる修飾子）
   ------------------------------------------------- */

/* outline: 背景透明・色付き枠 */
.btn-outline {
  background-color: #fff !important;
  color: var(--color-secondary) !important;
  border: 1px solid var(--color-secondary) !important;
  transition: 0.15s ease;
}
.btn-outline i { color: var(--color-secondary) !important; }
.btn-outline:hover {
  background-color: var(--color-secondary) !important;
  color: #fff !important;
}
.btn-outline:hover i { color: #fff !important; }
.btn-outline.btn-save { color: #d8342f !important; border-color: #d8342f !important; }
.btn-outline.btn-save i { color: #d8342f !important; }
.btn-outline.btn-save:hover { background-color: #d8342f !important; color: #fff !important; }
.btn-outline.btn-save:hover i { color: #fff !important; }
.btn-outline.btn-edit { color: #4a90d9 !important; border-color: #4a90d9 !important; }
.btn-outline.btn-edit i { color: #4a90d9 !important; }
.btn-outline.btn-edit:hover { background-color: #4a90d9 !important; color: #fff !important; }
.btn-outline.btn-edit:hover i { color: #fff !important; }

/* pill: 角を完全に丸く */
.btn-pill,
.btn-pill.btn,
.btn.btn-pill {
  border-radius: 99px !important;
  padding: 0 16px !important;
}

/* sizes - 既存の高さに上書き */
.btn-xs,
.btn.btn-xs   { height: 22px !important; padding: 0 8px !important; font-size: 10px !important; }
.btn-lg,
.btn.btn-lg   { height: 36px !important; padding: 0 20px !important; font-size: 13px !important; }

/* icon-only: アイコンだけの正方形ボタン */
.btn-icon-only,
.btn.btn-icon-only {
  width: 28px !important;
  padding: 0 !important;
  justify-content: center;
}
.btn-icon-only.btn-lg { width: 36px !important; height: 36px !important; }
.btn-icon-only.btn-xs { width: 22px !important; height: 22px !important; }

/* ghost: 背景なし・テキストのみ（hover時に背景） */
.btn-ghost {
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
}
.btn-ghost i { color: #64748b !important; }
.btn-ghost:hover {
  background: var(--color-secondary-light) !important;
  color: var(--color-secondary) !important;
}
.btn-ghost:hover i { color: var(--color-secondary) !important; }


/* -------------------------------------------------
   パーツ集の カテゴリ見出し
   - sub-ttl とは別のレベル（章見出し）
   ------------------------------------------------- */
.parts-category {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(16, 49, 124, 0.2);
}
.parts-category::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 2px;
}
.parts-category i {
  font-size: 12px;
  opacity: 0.9;
  margin-right: 2px;
}
.parts-category .parts-category-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.parts-category-desc {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  margin-left: auto;
  letter-spacing: 0;
}
.parts-category:first-child {
  margin-top: 0;
}

/* ============================================================================
   9. ラベル
============================================================================ */
.lbl {
  display: inline-block;
  margin: 0 2.5px 5px;
  border: none;
  text-decoration: none;
  color: #333;
  background-color: #ddd;
  font-family: inherit;
  vertical-align: middle;
  border-radius: 5px;
  min-width: 60px;
  font-size: 13px;
  padding: 0 5px;
  height: 40px;
  line-height: 40px;
}
input:checked + .lbl {
  color: #fff;
  background-color: #50505b;
}
.group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 6px 10px;
  margin: 8px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #2c4f8c;
  background: transparent;
  border-left: 3px solid #2c4f8c;
  letter-spacing: 0.03em;
}
.group-label-light {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  margin: 6px 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  text-align: left !important;
}

/* ============================================================================
   10. 見出し
============================================================================ */

/* 大見出し */
.main-ttl {
  display: flex;
  margin-bottom: 15px;
}
.ttl-L {
  padding-left: 20px;
  background: url(/common/image/icn_maru.png) no-repeat left 3px;
  background-size: 15px;
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
}
.ttl-sub {
  float: left;
  margin: 3px 0 0 20px;
  color: #666;
  font-size: 12px;
}
.ttl-sub span {
  font-size: 12px;
  background: url(/common/image/icn_home.svg) no-repeat left top;
  background-size: 13px;
  padding: 0 0 0 16px;
}
.ttl-sub span:after {
  content: "";
  color: #666;
  margin-left: 10px;
  padding-left: 15px;
  background: url(/common/image/icn_next.svg) no-repeat left 2px;
  background-size: 6px;
  text-decoration: none;
}
.sub-ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px 0;
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  background: transparent;
  text-align: left;
  line-height: 1.4;
  min-height: auto;
  border-bottom: 1px solid #e2e8f0;
  letter-spacing: 0.02em;
}
.sub-ttl:first-child {
  margin-top: 4px;
}
.sub-ttl-orange {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px 0;
  margin: 12px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #c25a30;
  background: transparent;
  text-align: left;
  min-height: auto;
  border-bottom: 1px dashed #e8a07e;
}

/* ============================================================================
   11. ボックス
============================================================================ */
.box-area {
  display: flex;
}
.box-gray {
  background-color: #f8fafc;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.6;
}
.box-gray p {
  margin: 0 0 4px;
}
.box-gray p:last-child {
  margin-bottom: 0;
}
.box-skyblue {
  background-color: #ddeaef;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.box-blue {
  background: #bce9f7;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  width: 15%;
  height: 35px;
}
.box-area span {
  vertical-align: middle;
  text-align: center;
  margin: 0 10px;
  padding-top: 7.5px;
}

/* ============================================================================
   12. カード（カードグリッド）
   ========================================================================== */

.card-grid-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.card-grid-count {
  font-size: 13px;
  color: #666;
}
.card-grid-count strong {
  color: #333;
  font-size: 15px;
}
.card-grid-count i {
  color: #999;
  margin-right: 4px;
}
.card-grid-actions {
  display: flex;
  gap: 5px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

@media screen and (max-width: 1400px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 1000px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}
.card-grid-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  cursor: default;
  /* button要素リセット */
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.card-grid-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
/* クリック可能カード */
.card-grid-item.card-clickable {
  cursor: pointer;
}
.card-grid-item.card-clickable:focus {
  outline: 2px solid #4a90d9;
  outline-offset: 2px;
}
.card-grid-item.card-clickable:focus:not(:focus-visible) {
  outline: none;
}
/* 上部色帯は廃止（フラットなカードに統一） */
.card-grid-item-accent {
  display: none;
}
.card-grid-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px 0;
}
.card-grid-item-id {
  font-size: 12px;
  color: #999;
  font-family: "Courier New", monospace;
}
.card-grid-item-company {
  padding: 6px 15px 0;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-grid-item-title {
  padding: 4px 15px 0;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  line-height: 1.4;
  min-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-grid-item-body {
  padding: 10px 15px;
  flex: 1;
}
.card-grid-item-salary {
  background: #f5f6fa;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.card-grid-item-salary-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.card-grid-item-salary-label i {
  color: #999;
  margin-right: 2px;
}
.card-grid-item-salary-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
}
.card-grid-item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-grid-item-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
}
.card-grid-item-meta-row i {
  width: 14px;
  text-align: center;
  color: #999;
  font-size: 11px;
  flex-shrink: 0;
}
.card-grid-item-meta-row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-grid-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}
.card-grid-item-type {
  display: flex;
  align-items: center;
}
.card-grid-item-manager {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #888;
}
.card-grid-item-manager i {
  font-size: 11px;
  color: #bbb;
}
.card-grid-item-link {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.card-grid-item-link:hover,
.card-grid-item:hover .card-grid-item-link {
  color: #10317c;
}
.card-grid-item-link i {
  font-size: 10px;
  margin-left: 3px;
  color: #333;
}
.card-grid-item-link:hover i,
.card-grid-item:hover .card-grid-item-link i {
  color: #10317c;
}
.card-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.card-badge-active {
  background-color: #e8f4fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}
.card-badge-closed {
  background-color: #fce4ec;
  color: #c62828;
  border: 1px solid #f8bbd0;
}
.card-badge-hold {
  background-color: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffecb3;
}
.card-badge-new {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}
.card-badge-draft {
  background-color: #f5f5f5;
  color: #616161;
  border: 1px solid #e0e0e0;
}
.card-badge-mini {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.badge-haken {
  background-color: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}
.badge-tokutei {
  background-color: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}
.badge-koudo {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.card-detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.card-detail-modal-id {
  font-size: 12px;
  color: #999;
  font-family: "Courier New", monospace;
}
.card-detail-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  line-height: 1.4;
  margin: 0 0 2px;
}
.card-detail-modal-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.card-detail-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.card-detail-modal-col {
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .card-detail-modal-body {
    grid-template-columns: 1fr;
  }
}
.card-detail-modal-map {
  width: 100%;
  height: 260px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #e0e0e0;
}
.card-detail-modal-map iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.card-detail-row {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.card-detail-row:last-child {
  border-bottom: none;
}
.card-detail-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.card-detail-label i {
  width: 16px;
  text-align: center;
  margin-right: 4px;
  color: #bbb;
}
.card-detail-value {
  display: block;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
.card-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4caf50;
  margin-bottom: 4px;
}
.card-detail-status i {
  font-size: 8px;
}
.card-detail-note {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}

/* ============================================================================
   13. アコーディオン
============================================================================ */
/* 開閉ボタン */
.accordion-L,
.accordion-M,
.accordion-S {
  width: 100%;
  border: none;
  padding: 5px 10px;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.accordion-L {
  font-weight: bold;
  color: #fff;
  background-color: #50505b;
  padding: 10px;
  border-left: 4px solid #ed2e64;
  background-image: url("/common/image/icn_acc_l_close.png");
}
.accordion-L.is-close {
  background-image: url("/common/image/icn_acc_l_open.png");
}
.accordion-L span {
  font-size: 12px;
  padding-left: 15px;
  color: #bbb;
}
.accordion-M {
  font-weight: bold;
  background-color: #c8c6ce;
  border-bottom: 1px solid #fff;
  background-image: url("/common/image/icn_acc_m_close.png");
}
.accordion-M.is-close {
  background-image: url("/common/image/icn_acc_m_open.png");
}
.accordion-S {
  background-color: #f2f2f4;
  border-bottom: 1px solid #fff;
  background-image: url("/common/image/icn_acc_s_close.png");
}
.accordion-S.is-close {
  background-image: url("/common/image/icn_acc_s_open.png");
}

/* 開閉先 */
.accordion-tgt {
  padding: 0;
}
.accordion-tgt.is-close {
  display: none;
}

/* ============================================================================
   13. モーダル、ダイアログ
============================================================================ */
/* モーダル（flexbox型でシンプル＆崩れない） */
.modal {
  display: none;
}

.modal.is-full,
.modal:target {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  animation: modal-bg-in 0.16s ease;
}
@keyframes modal-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal.is-full .modal-window,
.modal:target .modal-window {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 40px);
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.modal.is-full .modal-window.is-S,
.modal:target .modal-window.is-S { max-width: 480px; }
.modal.is-full .modal-window.is-M,
.modal:target .modal-window.is-M { max-width: 640px; }
.modal.is-full .modal-window.is-L,
.modal:target .modal-window.is-L { max-width: 1000px; }

.modal-window-main,
.modal-window-main-L,
.modal-window-main-M,
.modal-window-main-S {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px;
  margin: 0;
  height: auto !important;
  box-sizing: border-box;
}

.modal-window-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

.is-full.newpass-modal {
  z-index: 1000;
}

@media screen and (max-width: 768px) {
  .modal.is-full,
  .modal:target {
    padding: 12px;
  }
}

/* 閉じるボタン（×）：ヘッダー内右上に配置 */
.modal-btn-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  z-index: 10;
  font-size: 12px;
  transition: 0.15s ease;
}
.modal-btn-close::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.modal-btn-close:hover {
  background: #f1f5f9;
  color: #1e293b;
  transform: rotate(90deg);
}

.modal-btn {
  border-left: 1px solid #e2e8f0;
  text-align: center;
}

.modal-ttl {
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
  border-bottom: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* モーダルヘッダー：タイトル+ボタン横並び */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 18px;
  background: #fafbfd;
  flex-shrink: 0;
}
.modal-header .modal-ttl {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}
.modal-header-btns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

@media screen and (max-width: 1200px) {
  .modal-window.w70,
  .modal-window.w40 {
    width: 90% !important;
  }
}

/* 登録完了ポップアップ */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}
.popup-window {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 250px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 11px -3px #777777;
  border-top: 3px solid #10317c;
}

/* ============================================================================
   15. ローディング
============================================================================ */
.loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 599999999;
  top: 0;
  left: 0;
  background-color: rgba(96, 96, 96, 0.5);
}
.loading img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* ============================================================================
   16. ページャー
============================================================================ */

/* ============================================================================
   17. タブ
============================================================================ */
/* タブ（モダンアンダーライン型） */
.tab {
  margin: 0 0 12px;
}
.tab-main {
  padding: 12px 0 0;
  background: transparent;
  border: none;
}
.tab-select {
  margin-bottom: 0;
}
.tab-select ul {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid #e2e8f0;
  font-size: 0;
}
.tab-select ul li {
  display: inline-flex;
  position: relative;
  padding: 0;
  margin-bottom: -2px;
}
.tab-select ul li button,
.tab-select ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 18px;
  min-width: auto;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: 0.18s ease;
  float: none;
}
.tab-select ul li button:hover,
.tab-select ul li a:hover {
  color: #1e293b;
  background: #f8fafc;
}
.tab-select ul li.is-active button,
.tab-select ul li.is-active a {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
  background: transparent;
  font-weight: 700;
}
.tab-select ul li button::before,
.tab-select ul li button::after,
.tab-select ul li a::before,
.tab-select ul li a::after {
  display: none;
}
.tab-select ul li button i,
.tab-select ul li a i {
  font-size: 11px;
  color: inherit;
}

/* 増減リスト
----------------------------------------------------------------------------- */
.list-add li {
  background-color: #f1f1f1;
  margin: 0 0 5px;
  padding: 5px;
  clear: both;
}
.list-add li.list-add-btn {
  background-color: #fff;
  text-align: center;
}
.list-add li input,
.list-add li select {
  margin-right: 5px;
}

/* コピー元 */
.list-add-copy {
  display: none !important;
}

/* del btn */
.list-add li .list-add-del {
  float: right;
  width: 30px;
  height: 30px;
  border: none;
  color: #fff;

  background-color: #ed2e64;
  font-size: 25px;
}

/* add btn */
.list-add li.list-add-btn {
  display: block;
  width: 150px;
  margin: 0 auto;
}
.list-add li.list-add-btn button {
  width: 150px;
  background-color: #50505b;
  color: #fff;
  font-size: 20px;
  border: none;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  vertical-align: middle;
}

/* ============================================================================
   18. 画像アップロード
============================================================================ */
.upload {
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0 10%;
  margin: 0 10px 10px 0;
}

/* プレビューエリア */
.upload-preview {
  display: block;
  border: 5px solid #eee;
  width: 100%;
  height: 400px;
  background-image: url("/common/image/noimage.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 125px 125px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.upload-preview img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 99999px;
  height: 100%;
}

.upload-input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
}
.upload-input button {
  display: inline-block;
  margin: 0 5px 5px;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 14px;
  box-shadow: 0px 1px 0px 1px #bbb;
  border: none;
  font-family: inherit;
}
.upload-input-file {
  width: 0;
}
.upload-input-file-btn {
  background-color: #333;
  color: #fff;
}
.upload-clear {
  background-color: #ccc;
  color: #444;
}

.file-upload-area {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px dashed #cbd5e1;
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: 6px;
  transition: 0.15s ease;
}
.file-upload-area:hover {
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
}
.file-upload-area input[type="file"] {
  display: none;
}
.file-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  height: 26px;
  background: var(--color-secondary);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  transition: 0.15s ease;
}
.file-upload-btn:hover {
  background: var(--color-secondary-dark);
}
.file-upload-btn i {
  font-size: 11px;
}
.file-upload-area p {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
}

/* ============================================================================
   19. カレンダー
============================================================================ */
.tbl-calendar {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f1f1f1;
}
.tbl-calendar table {
  width: 100%;
  white-space: nowrap;
}
.tbl-calendar thead th,
.tbl-calendar tbody th {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  text-align: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  height: 30px;
  vertical-align: middle;
  padding: 0 3px;
  box-sizing: border-box;
}
.tbl-calendar tbody td {
  background-color: #fff;
  vertical-align: middle;
  border: 1px solid #ccc;
  height: 30px !important;
  box-sizing: border-box;
  padding: 0;
}
.tbl-calendar tbody td input[type="number"] {
  border-right: 1px solid #ccc;
}

/* リスト内フォームパーツ調整 */
.tbl-calendar tbody input[type="text"],
.tbl-calendar tbody input[type="date"],
.tbl-calendar tbody input[type="month"],
.tbl-calendar tbody input[type="time"],
.tbl-calendar tbody input[type="number"],
.tbl-calendar tbody input[type="tel"],
.tbl-calendar tbody input[type="email"],
.tbl-calendar tbody select {
  border: none;
  width: 100%;
  outline: none;
  vertical-align: middle;
  background-color: transparent;
  position: relative;
  height: 30px;
  box-sizing: border-box;
}
.tbl-calendar tbody textarea {
  margin-bottom: 0 !important;
  border: none;
  min-height: 30px;
  height: 30px;
  background-color: transparent;
}
.tbl-calendar tbody input[type="text"]:focus-within,
.tbl-calendar tbody input[type="date"]:focus-within,
.tbl-calendar tbody input[type="month"]:focus-within,
.tbl-calendar tbody input[type="time"]:focus-within,
.tbl-calendar tbody input[type="number"]:focus-within,
.tbl-calendar tbody input[type="tel"]:focus-within,
.tbl-calendar tbody input[type="email"]:focus-within,
.tbl-calendar tbody select:focus-within {
  outline: #10317c solid 1px;
}
.tbl-calendar tbody textarea:focus-within {
  outline: #10317c solid 1px;
}
.tbl-calendar .input-min {
  height: 17px !important;
}

/* 表示条件操作（ナビゲーション） */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 5px 0;
  background: #f5f5f5;
  border-radius: 4px;
}
.calendar-nav-title {
  font-size: 14px;
  font-weight: 600;
  min-width: 200px;
  text-align: center;
}
.calendar-nav-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.calendar-nav-btn:hover {
  background: #e5e5e5;
}
.calendar-nav-today {
  padding: 5px 10px;
  font-size: 12px;
  background: #2c4f8c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.calendar-nav-today:hover {
  background: #1e3a6e;
}

/* マーク選択 */
.mark-selector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.mark-item {
  display: flex;
  align-items: center;
  font-size: 11px;
  gap: 5px;
  padding: 5px 12px;
  border: 2px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s;
}
.mark-item:hover {
  border-color: #10317c;
}
.mark-item.is-active {
  border-color: #10317c;
  background: #f0f4ff;
}
.mark-item input {
  display: none;
}
.mark-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.mark-dot.red {
  background: #dc3545;
}
.mark-dot.blue {
  background: #10317c;
}
.mark-dot.green {
  background: #28a745;
}
.mark-dot.yellow {
  background: #ffc107;
}
.mark-dot.purple {
  background: #6f42c1;
}
.mark-dot.orange {
  background: #fd7e14;
}

/* 月別リストカレンダー */
.calendar-list {
  width: 100%;
  border-collapse: collapse;
}
.calendar-list th,
.calendar-list td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}
.calendar-list th {
  background: #f5f5f5;
  font-weight: 600;
  color: #444;
}
.calendar-list .day-header {
  width: 50px;
}
.calendar-list .date-cell {
  font-weight: 600;
  font-size: 14px;
}
.calendar-list .date-cell.sunday {
  color: #dc3545;
}
.calendar-list .date-cell.saturday {
  color: #10317c;
}
.calendar-list .date-cell.holiday {
  color: #dc3545;
}
.calendar-list .input-cell {
  padding: 2px;
}
.calendar-list .input-cell input,
.calendar-list .input-cell select {
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  height: 28px;
}
.calendar-list .input-cell input:focus,
.calendar-list .input-cell select:focus {
  outline: 2px solid #10317c;
}
.calendar-list .mark-cell {
  position: relative;
}
.calendar-list .mark-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 2px;
}

/* 週折り返しカレンダー */
.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calendar-grid th {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  color: #444;
}
.calendar-grid th.sunday {
  color: #dc3545;
}
.calendar-grid th.saturday {
  color: #10317c;
}
.calendar-grid td {
  border: 1px solid #ccc;
  height: 100px;
  vertical-align: top;
  padding: 5px;
  background: #fff;
}
.calendar-grid td.other-month {
  background: #f9f9f9;
}
.calendar-grid td.today {
  background: #fffde7;
}
.calendar-grid .grid-date {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
}
.calendar-grid .grid-date.sunday {
  color: #dc3545;
}
.calendar-grid .grid-date.saturday {
  color: #10317c;
}
.calendar-grid .grid-date.holiday {
  color: #dc3545;
}
.calendar-grid .grid-content {
  font-size: 11px;
}
.calendar-grid .grid-event {
  display: block;
  padding: 2px 5px;
  margin-bottom: 2px;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-grid .grid-event.red {
  background: #dc3545;
}
.calendar-grid .grid-event.blue {
  background: #10317c;
}
.calendar-grid .grid-event.green {
  background: #28a745;
}
.calendar-grid .grid-event.yellow {
  background: #ffc107;
  color: #333;
}
.calendar-grid .grid-event:hover {
  opacity: 0.8;
}
.calendar-grid td:hover {
  background: #f8fbfd;
}

/* ============================================================================
   20. ログイン
============================================================================ */
.login {
  position: relative;
  height: 100vh;
}

/* box */
.login-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 320px;
  height: 450px;
  box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.4);
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.7);
}

/* title */
.login-box-ttl {
  text-align: center;
  font-size: 25px;
  padding: 10px;
  margin-bottom: 20px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* input */
.login-box input {
  border: none;
  border-bottom: 1px solid #ddd;
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 1px 0;
}

/* name */
.login-box-name {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #333;
}
.login-box-name i {
  margin-right: 5px;
  color: #777;
}

/* button */
.login-box-btn {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto;
  padding: 20px;
}
.login-box-btn button {
  width: 100%;
  border: none;
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  background-color: #50505b;
  font-family: inherit;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.login-box-btn button:hover {
  transform: translateY(-5px);
}

.login-box .box-error {
  font-size: 14px !important;
}

/* bg effect */
.login .bg {
  animation: slide 8s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #50505b 50%, #ed2e64 50%);
  bottom: 0;
  left: -50%;
  opacity: 0.5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}

.login .bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 9s;
}

.login .bg3 {
  animation-duration: 11s;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

/* ============================================================================
   21. ソート、ツールチップ
============================================================================ */

/* ソート機能 */
th.sortable {
  cursor: pointer;
  color: #2c4f8c;
  user-select: none;
}

th.sortable:hover {
  text-decoration: underline;
  background-color: #eaeaea;
}

th.sortable.asc:after {
  content: " ▲";
  font-size: 9px;
}

th.sortable.desc:after {
  content: " ▼";
  font-size: 9px;
}

/* ツールチップ */
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip a {
  color: #10317c;
  text-decoration: underline;
}
.tooltip .tooltip-text {
  all: initial;
  box-sizing: border-box;
  visibility: hidden;
  display: inline-block;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  position: absolute;
  z-index: 9999;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-family: inherit;
  line-height: 1.6;
}
.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}

/* ============================================================================
   22. パネルリスト
============================================================================ */
/* パネルリスト（コンパクト） */
.panel-list {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.panel-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.panel-list-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.panel-list-header h3 i {
  color: #64748b;
  font-size: 12px;
}

.panel-list-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  transition: 0.15s ease;
}

.view-btn:hover,
.view-btn.active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* グリッドサイズを縮小（最小160px） */
.panel-list-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 10px;
}

/* パネルアイテム（コンパクト） */
.panel-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  transition: 0.18s ease;
  cursor: pointer;
}

.panel-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.panel-thumbnail {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f8fafc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* file-icon 内のアイコンを少し小さく（コンパクト化） */
.panel-thumbnail .file-icon {
  font-size: 28px;
}

.panel-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}

.panel-info {
  padding: 7px 10px 8px;
}

.panel-title {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #1e293b;
}

.panel-meta {
  margin: 0;
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.4;
}

/* リスト表示時 */
.panel-list-body.view-list {
  grid-template-columns: 1fr;
}

.panel-list-body.view-list .panel-item {
  display: flex;
  align-items: center;
}

.panel-list-body.view-list .panel-thumbnail {
  width: 160px;
  min-width: 160px;
  aspect-ratio: 16 / 9;
}

.panel-list-body.view-list .panel-info {
  flex: 1;
}

/* ============================================================================
   23. ファイルプレビュー
============================================================================ */
.preview-section {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
}

.preview-section-title {
  margin: 0 0 15px;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* プレビューボックス */
.preview-box {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.preview-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.preview-box-name {
  font-size: 13px;
  font-weight: bold;
}

.preview-box-name i {
  margin-right: 6px;
  color: #e74c3c;
}

.preview-box-name i.fa-file-image {
  color: #3498db;
}

.preview-box-body {
  background: #f0f0f0;
  text-align: center;
  padding: 10px;
}

.preview-box-body embed {
  border: none;
  background: #fff;
}

.preview-box-body img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}

/* 画像グリッド */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.preview-grid-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.preview-grid-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.preview-grid-name {
  display: block;
  padding: 6px 8px;
  font-size: 11px;
  color: #666;
  background: #f8f9fa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* アイコンボタン */
.btn-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  color: #666;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #4a90a4;
  border-color: #4a90a4;
  color: #fff;
}

@media (max-width: 768px) {
  .panel-list-body {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

.preview-list {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.preview-list-header {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
}

.preview-list-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

.preview-list-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 15px;
}

.preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 6px;
  transition: background 0.2s;
}

.preview-item:hover {
  background: #f0f4f7;
}

/* サムネイル */
.preview-thumb {
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 22px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.preview-thumb:hover {
  opacity: 0.8;
}

.preview-thumb.pdf {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
}

.preview-thumb.image {
  background: #eee;
  overflow: hidden;
}

.preview-thumb.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-thumb.excel {
  background: linear-gradient(135deg, #27ae60, #1e8449);
  color: #fff;
}

.preview-thumb.word {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: #fff;
}

.preview-info {
  flex: 1;
  min-width: 0;
}

.preview-name {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-meta {
  margin: 0;
  font-size: 11px;
  color: #888;
}

.preview-actions {
  display: flex;
  gap: 5px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  color: #666;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #4a90a4;
  border-color: #4a90a4;
  color: #fff;
}

/* ========================================
   プレビューモーダル
======================================== */
.preview-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.preview-modal-title {
  font-size: 14px;
  font-weight: bold;
}

.preview-modal-title i {
  margin-right: 8px;
}

.preview-modal-title i.fa-file-pdf {
  color: #e74c3c;
}

.preview-modal-title i.fa-file-image {
  color: #3498db;
}

.preview-modal-actions {
  display: flex;
  gap: 8px;
}

.preview-modal-body {
  background: #f0f0f0;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.preview-modal-body embed {
  width: 100%;
  height: 600px;
  border: none;
  background: #fff;
}

.preview-modal-body img {
  max-width: 100%;
  max-height: 600px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .panel-list-body {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .preview-list-body {
    grid-template-columns: 1fr;
  }

  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .preview-modal-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .preview-modal-body embed {
    height: 400px;
  }
}

/* ============================================================================
   24. ダッシュボード統計カード
============================================================================ */
/* 統計カード（コンパクト＋スタイリッシュ） */
.stat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: 0.18s ease;
}
.stat-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-value.alert {
  color: var(--color-error);
}
.stat-value.success {
  color: var(--color-success);
}
.stat-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}
.stat-label i {
  color: #94a3b8;
  font-size: 11px;
}
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 8px;
  align-self: flex-start;
  line-height: 1.4;
}
.stat-trend.up {
  color: #047857;
  background: #d1fae5;
}
.stat-trend.down {
  color: #b91c1c;
  background: #fee2e2;
}
.stat-trend i { font-size: 9px; }
.notification-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}
.notification-badge.important {
  background: #fef2f2;
  color: #dc3545;
  border: 1px solid #f8bbd0;
}
.notification-badge.info {
  background: #e8f4fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}
.notification-badge.normal {
  background: #f5f5f5;
  color: #616161;
  border: 1px solid #e0e0e0;
}
.notification-unread {
  font-weight: 700;
  color: #333;
}
.notification-read {
  color: #999;
}
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.activity-item:last-child {
  border-bottom: none;
}
.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.activity-icon.edit {
  background: #e3f2fd;
  color: #1976d2;
}
.activity-icon.create {
  background: #e8f5e9;
  color: #2e7d32;
}
.activity-icon.delete {
  background: #fef2f2;
  color: #dc3545;
}
.activity-content {
  flex: 1;
}
.activity-content strong {
  color: #333;
}
.activity-time {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
  align-self: center;
}

/* ============================================================================
   25. 帳票プレビュー（スクリーン用）
============================================================================ */
.doc-preview {
  background: #fff;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
}
.doc-preview-header {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 3px double #333;
  padding-bottom: 15px;
}
.doc-preview-title {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 8px;
  margin: 0 0 10px;
}
.doc-preview-meta {
  font-size: 12px;
  color: #666;
}
.doc-preview-meta p {
  margin: 2px 0;
}
.doc-preview-amount-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f6fa;
  border: 2px solid #333;
  padding: 12px 20px;
  margin: 20px 0;
}
.doc-preview-amount-label {
  font-size: 16px;
  font-weight: 700;
}
.doc-preview-amount-value {
  font-size: 24px;
  font-weight: 700;
  color: #10317c;
}
.doc-preview-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}
.doc-preview-to {
  flex: 1;
}
.doc-preview-client {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
  display: inline-block;
  margin-bottom: 5px;
}
.doc-preview-from {
  text-align: right;
  font-size: 12px;
  line-height: 1.8;
}
.doc-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.doc-preview-table th,
.doc-preview-table td {
  border: 1px solid #999;
  padding: 8px 12px;
  font-size: 13px;
}
.doc-preview-table thead th {
  background-color: #f0f0f0;
  font-weight: bold;
  text-align: center;
}
.doc-preview-table tbody td {
  background: #fff;
}
.doc-preview-table tfoot th,
.doc-preview-table tfoot td {
  background-color: #f8f8f8;
}
.doc-preview-note {
  margin-top: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  font-size: 12px;
  line-height: 1.8;
  background: #fafafa;
}
.doc-preview-note p {
  margin: 2px 0;
}
.doc-preview-stamp {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 15px 0;
}
.doc-preview-stamp-box {
  width: 60px;
  height: 60px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #999;
}

/* is-changed for individual inputs */
input.is-changed,
select.is-changed,
textarea.is-changed {
  background-color: #f7ecb0 !important;
}

/* Tooltip top arrow variant */
.tooltip .tooltip-text.tooltip-top::after {
  bottom: auto;
  top: 100%;
  border-color: #333 transparent transparent transparent;
}

/* ============================================================================
   26. ドロップダウンボタン（クリック時メニュー表示）
============================================================================ */
.btn-dropdown {
  position: relative;
  display: inline-block;
}
.btn-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.btn-dropdown-toggle .caret {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.85;
  transition: transform 0.2s ease;
}
.btn-dropdown.is-open .btn-dropdown-toggle .caret {
  transform: rotate(180deg);
}
/* メニュー本体 - フェードイン + スライド + 強化シャドウ */
.btn-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  min-width: 180px;
  padding: 6px 0;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  list-style: none;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.14),
    0 4px 8px rgba(15, 23, 42, 0.06);
  margin: 0;
  /* 開閉アニメーション（display:none ではなく opacity/visibility） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
  pointer-events: none;
}
/* 三角の指針（ドロップダウン上部） */
.btn-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 16px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  transform: rotate(45deg);
}
.btn-dropdown-menu.align-right {
  left: auto;
  right: 0;
  transform-origin: top right;
}
.btn-dropdown-menu.align-right::before {
  left: auto;
  right: 16px;
}
.btn-dropdown.is-open .btn-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.btn-dropdown-menu li {
  display: block;
  padding: 0 6px;
}
.btn-dropdown-menu li a,
.btn-dropdown-menu li button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  font-size: 12.5px;
  color: #1e293b;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  font-family: inherit;
  transition: 0.12s ease;
  border-radius: 5px;
  margin: 0;
  font-weight: 500;
  line-height: 1;
  min-height: 30px;
}
.btn-dropdown-menu li a:hover,
.btn-dropdown-menu li button:hover {
  background-color: var(--color-secondary-light);
  color: var(--color-secondary);
}
.btn-dropdown-menu li a i,
.btn-dropdown-menu li button i {
  width: 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  transition: color 0.12s ease;
}
.btn-dropdown-menu li a:hover i,
.btn-dropdown-menu li button:hover i {
  color: var(--color-secondary);
}
.btn-dropdown-menu .divider {
  height: 1px;
  margin: 4px 8px;
  background-color: #f1f5f9;
}
/* 危険系アクション（削除等） */
.btn-dropdown-menu li a.is-danger,
.btn-dropdown-menu li button.is-danger {
  color: #dc2626;
}
.btn-dropdown-menu li a.is-danger i,
.btn-dropdown-menu li button.is-danger i {
  color: #f87171;
}
.btn-dropdown-menu li a.is-danger:hover,
.btn-dropdown-menu li button.is-danger:hover {
  background-color: #fef2f2;
  color: #b91c1c;
}
.btn-dropdown-menu li a.is-danger:hover i,
.btn-dropdown-menu li button.is-danger:hover i {
  color: #b91c1c;
}

/* ============================================================================
   27. 必須マーク（.is-required をlabelに付与するだけで表示）
============================================================================ */
label.is-required::after {
  content: "必須";
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background-color: #c9302c;
  border-radius: 3px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ============================================================================
   28. インライン置き換え用ユーティリティクラス
============================================================================ */
.icon-gap-r {
  margin-right: 5px;
}
.icon-color-sub {
  color: #666;
}
.icon-size-s {
  font-size: 10px;
}
.link-primary {
  color: #2c4f8c;
  text-decoration: underline;
}
.textarea-m {
  height: 80px;
}
.label-field {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  letter-spacing: 0.3px;
}
.modal-p-center {
  padding: 20px;
  text-align: center;
  font-size: 14px;
}
.summary-table {
  width: 350px;
  border-collapse: collapse;
}
.summary-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13px;
}
.summary-table td {
  text-align: right;
  padding: 8px 12px;
  font-size: 14px;
}
.summary-table tr {
  border-bottom: 1px solid #ddd;
}
.summary-table tr.total-row {
  background: #f8f9fa;
  border-bottom: 2px solid #333;
}
.summary-table tr.total-row th {
  font-weight: 700;
  font-size: 15px;
  padding: 10px 12px;
}
.summary-table tr.total-row td {
  font-size: 16px;
  font-weight: 700;
  color: #2c4f8c;
  padding: 10px 12px;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.detail-actions {
  margin: 5px 0;
  display: flex;
  gap: 8px;
}
.buttons-left {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.search-box-footer {
  padding: 0 8px 8px;
}

/* modal-inner: modal-window-main互換 */
.modal-inner {
  padding: 10px 15px;
  overflow-y: auto;
}


/* ============================================================================
   29. 拡張パーツ（10011 由来）
   ----------------------------------------------------------------------------
   - チップ / アラートボックス / トースト / アコーディオンカード
   - お知らせリスト / アクションリスト / セグメント
   - 統計カードバリエーション / レジェンド / 進捗サマリー
   - ローディング / エラーダイアログ
   - インライン置換用ユーティリティ（列幅・最大高さ・状態色 等）
============================================================================ */

/* ----------------------------------------------------------------------------
   29-1. ステータスチップ（.chip）+ サイズ/スタイルバリエーション
---------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 12px;
  background: var(--st-draft-bg);
  color: var(--st-draft-fg);
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}
.chip i { font-size: 10px; line-height: 1; }
.chip-draft    { background: var(--st-draft-bg);    color: var(--st-draft-fg); }
.chip-pending  { background: var(--st-pending-bg);  color: var(--st-pending-fg); }
.chip-approved { background: var(--st-approved-bg); color: var(--st-approved-fg); }
.chip-rejected { background: var(--st-rejected-bg); color: var(--st-rejected-fg); }
.chip-paid     { background: var(--st-paid-bg);     color: var(--st-paid-fg); }
.chip-overdue  { background: var(--st-overdue-bg);  color: var(--st-overdue-fg); }
.chip-info     { background: var(--st-info-bg);     color: var(--st-info-fg); }
.chip-warn     { background: var(--st-warn-bg);     color: var(--st-warn-fg); }

/* サイズバリエーション */
.chip-sm  { padding: 1px 7px; font-size: 10px; gap: 3px; border-radius: 9px; }
.chip-sm i { font-size: 9px; }
.chip-lg  { padding: 5px 14px; font-size: 13px; gap: 6px; border-radius: 14px; }
.chip-lg i { font-size: 12px; }

/* outline スタイル（背景透明・色付きボーダー） */
.chip-outline               { background: #fff; border-color: #cbd5e1; color: #64748b; }
.chip-outline.chip-pending  { border-color: #fcd34d;       color: var(--st-pending-fg); }
.chip-outline.chip-approved { border-color: #6ee7b7;       color: var(--st-approved-fg); }
.chip-outline.chip-rejected { border-color: #fca5a5;       color: var(--st-rejected-fg); }
.chip-outline.chip-paid     { border-color: #6ee7b7;       color: var(--st-paid-fg); }
.chip-outline.chip-overdue  { border-color: #fca5a5;       color: var(--st-overdue-fg); }
.chip-outline.chip-info     { border-color: #93c5fd;       color: var(--st-info-fg); }
.chip-outline.chip-warn     { border-color: #fcd34d;       color: var(--st-warn-fg); }

/* solid スタイル（強調表示） */
.chip-solid                 { background: #64748b; color: #fff; border-color: transparent; }
.chip-solid.chip-pending    { background: #d97706; }
.chip-solid.chip-approved   { background: #059669; }
.chip-solid.chip-rejected   { background: #dc2626; }
.chip-solid.chip-paid       { background: #059669; }
.chip-solid.chip-overdue    { background: #dc2626; }
.chip-solid.chip-info       { background: var(--color-secondary); }
.chip-solid.chip-warn       { background: var(--color-warning); }

/* ドット付き（左に色丸） */
.chip-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
  flex-shrink: 0;
}


/* ----------------------------------------------------------------------------
   29-2. アラートボックス（.alert-box）
---------------------------------------------------------------------------- */
.alert-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--st-info-bg);
  color: #1e293b;
  font-size: 12px;
  line-height: 1.5;
}
.alert-box > i {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.alert-box > div { flex: 1; min-width: 0; }
.alert-ttl {
  display: inline;
  font-size: 12.5px;
  font-weight: 700;
  margin-right: 6px;
  line-height: 1.5;
}
.alert-desc {
  display: inline;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}
.alert-box.is-info    { background: var(--st-info-bg);     border-color: #bfdbfe; }
.alert-box.is-info > i    { color: var(--color-info); }
.alert-box.is-warn    { background: var(--st-warn-bg);     border-color: #fde68a; }
.alert-box.is-warn > i    { color: var(--color-warning); }
.alert-box.is-error   { background: var(--st-rejected-bg); border-color: #fecaca; }
.alert-box.is-error > i   { color: var(--color-error); }
.alert-box.is-success { background: var(--st-approved-bg); border-color: #a7f3d0; }
.alert-box.is-success > i { color: var(--color-success); }

/* バリエーション: ミニ（1行・極コンパクト） */
.alert-box.is-mini {
  padding: 5px 10px;
  font-size: 11.5px;
  gap: 6px;
}
.alert-box.is-mini > i { font-size: 12px; }

/* バリエーション: フラット（背景なし・左ボーダーのみ） */
.alert-box.is-flat {
  background: transparent;
  border: none;
  border-left: 3px solid #cbd5e1;
  border-radius: 0;
  padding: 6px 12px;
}
.alert-box.is-flat.is-info    { border-left-color: var(--color-info); }
.alert-box.is-flat.is-warn    { border-left-color: var(--color-warning); }
.alert-box.is-flat.is-error   { border-left-color: var(--color-error); }
.alert-box.is-flat.is-success { border-left-color: var(--color-success); }

/* バリエーション: 強調（左に色付きアイコン枠） */
.alert-box.is-strong > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
}


/* ----------------------------------------------------------------------------
   29-3. トースト通知（.toast）
   - JS から動的生成: App.toast.success('...') / .error / .warn / .info
---------------------------------------------------------------------------- */
.toast-area {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10001;
  pointer-events: none;
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  max-width: 360px;
  padding: 12px 18px;
  background: #fff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  border-left: 4px solid #94a3b8;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease;
  pointer-events: auto;
  animation: toast-in 0.25s ease;
}
.toast i {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.toast-success { border-left-color: var(--color-success); }
.toast-success i { color: var(--color-success); }
.toast-error   { border-left-color: var(--color-error); }
.toast-error i   { color: var(--color-error); }
.toast-warn    { border-left-color: var(--color-warning); }
.toast-warn i    { color: var(--color-warning); }
.toast-info    { border-left-color: var(--color-info); }
.toast-info i    { color: var(--color-info); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ----------------------------------------------------------------------------
   29-4. アコーディオンカード（.accordion-card）
   - 既存「13. アコーディオン」とは別パターン（カード型・補助情報用）
---------------------------------------------------------------------------- */
.accordion-card {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
}
.accordion-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: #f8fafc;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.accordion-card-head:hover {
  background: #f1f5f9;
}
.accordion-card-head i {
  color: var(--color-secondary);
  font-size: 14px;
  transition: transform 0.2s ease;
}
.accordion-card.is-open .accordion-card-head i {
  transform: rotate(45deg);
}
.accordion-card-body {
  display: none;
  padding: 16px 18px;
  border-top: 1px solid #e2e8f0;
}
.accordion-card.is-open .accordion-card-body {
  display: block;
}


/* ----------------------------------------------------------------------------
   29-5. お知らせリスト（.notice-list）
---------------------------------------------------------------------------- */
/* お知らせリスト（コンパクト） */
.notice-list {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.notice-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s ease;
  cursor: pointer;
}
.notice-item:last-child {
  border-bottom: none;
}
.notice-item:hover {
  background: #f8fafc;
}
.notice-icn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-size: 11px;
  flex-shrink: 0;
}
.notice-item.kind-warn .notice-icn  { background: var(--st-warn-bg);  color: var(--color-warning); }
.notice-item.kind-error .notice-icn { background: var(--st-rejected-bg); color: var(--color-error); }
.notice-item.kind-info .notice-icn  { background: var(--st-info-bg);  color: var(--color-info); }
.notice-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.notice-ttl-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.notice-ttl {
  font-size: 12.5px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-item.is-unread .notice-ttl {
  font-weight: 700;
}
.notice-item.is-unread .notice-ttl::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.notice-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: #94a3b8;
  flex-shrink: 0;
}
.notice-meta .cat {
  padding: 1px 6px;
  background: #f1f5f9;
  border-radius: 3px;
  color: #475569;
  font-size: 10px;
}
.notice-meta i { font-size: 9px; margin-right: 2px; }


/* ----------------------------------------------------------------------------
   29-6. アクションリスト（.action-list）
---------------------------------------------------------------------------- */
/* アクションリスト（カード型グリッド・大きな数値で視認性UP） */
.action-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.action-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: 0.18s ease;
  overflow: hidden;
}
.action-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-secondary);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.action-row:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.action-row:hover::before {
  opacity: 1;
}
.action-row .badge-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-size: 16px;
  font-weight: 800;
  border-radius: 8px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.action-row .badge-num.kind-warn   { background: #fef3c7; color: #b45309; }
.action-row .badge-num.kind-error  { background: #fee2e2; color: #b91c1c; }
.action-row .badge-num.kind-success { background: #d1fae5; color: #047857; }
.action-row .lbl {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  min-width: 0;
}
.action-row .arrow {
  color: #cbd5e1;
  font-size: 11px;
  transition: 0.18s ease;
  flex-shrink: 0;
}
.action-row:hover .arrow {
  color: var(--color-secondary);
  transform: translateX(3px);
}


/* ----------------------------------------------------------------------------
   29-7. セグメント（.segment）— ラジオボタンの代替
---------------------------------------------------------------------------- */
.segment {
  display: inline-flex;
  align-items: stretch;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}
.segment > button,
.segment > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 14px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
}
.segment > button:hover,
.segment > label:hover {
  color: var(--color-secondary);
}
.segment > button.is-active,
.segment > label.is-active {
  background: var(--color-secondary);
  color: #fff;
}
.segment > button i,
.segment > label i {
  font-size: 11px;
}


/* ----------------------------------------------------------------------------
   29-8. 統計カードバリエーション（.stat-card.kind-*）
   - 左色バーは廃止（フラットでミニマル）
   - 種別色は .stat-value.alert / .stat-value.success で表現
---------------------------------------------------------------------------- */
/* kind-* クラスはHTML互換のため受けるが、視覚的な装飾は数値色のみ */


/* ----------------------------------------------------------------------------
   29-9. レジェンド（.legend）— 凡例
---------------------------------------------------------------------------- */
.legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #cbd5e1;
}
.legend-swatch.draft     { background: #cbd5e1; }
.legend-swatch.tentative { background: var(--color-warning); }
.legend-swatch.confirmed { background: var(--color-secondary); }
.legend-swatch.completed { background: var(--color-success); }


/* ----------------------------------------------------------------------------
   29-10. 進捗サマリー（.progress-summary）
---------------------------------------------------------------------------- */
.progress-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 8px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.progress-summary .ps-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}
.progress-summary .ps-item b {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.progress-summary .ps-item i {
  font-size: 13px;
}
.progress-summary .ps-item.ps-total {
  margin-left: auto;
  padding-left: 14px;
  border-left: 1px solid #cbd5e1;
}


/* ----------------------------------------------------------------------------
   29-11. ローディングオーバーレイ + エラーダイアログ
---------------------------------------------------------------------------- */
#loading {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
#loading.active {
  display: flex;
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #ddd;
  border-top-color: var(--color-secondary);
  border-radius: 50%;
  animation: spinner-rot 0.7s linear infinite;
}
@keyframes spinner-rot {
  to { transform: rotate(360deg); }
}

#error-dialog {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
#error-dialog.active {
  display: flex;
}
.dialog-box {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-error);
  margin-bottom: 12px;
}
.dialog-message {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #334155;
}
.dialog-box .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}


/* ----------------------------------------------------------------------------
   29-12. select-editable（編集可能セレクト）の標準スタイル
---------------------------------------------------------------------------- */
.select-editable {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 120px;
}
.select-editable select,
.select-editable input {
  width: 100%;
  box-sizing: border-box;
}
.select-editable select {
  position: absolute;
  inset: 0;
  opacity: 0.01;
}
.select-editable input {
  position: relative;
  z-index: 1;
  background: transparent;
  pointer-events: none;
}
.select-editable.is-editing input {
  background: #fff;
  pointer-events: auto;
}


/* ----------------------------------------------------------------------------
   29-13. インライン置換用ユーティリティ
---------------------------------------------------------------------------- */
/* テーブル列幅 */
.col-w30  { width: 30px; }
.col-w34  { width: 34px; }
.col-w40  { width: 40px; }
.col-w45  { width: 45px; }
.col-w50  { width: 50px; }
.col-w60  { width: 60px; }
.col-w70  { width: 70px; }
.col-w80  { width: 80px; }
.col-w90  { width: 90px; }
.col-w100 { width: 100px; }
.col-w120 { width: 120px; }
.col-w140 { width: 140px; }
.col-w220 { width: 220px; }

/* テーブル最大高さ（スクロールコンテナ） */
.tbl-mh200 { max-height: 200px; }
.tbl-mh250 { max-height: 250px; }
.tbl-mh300 { max-height: 300px; }

/* マークバッジ（カレンダー/明細の状態色丸） */
.mark-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  vertical-align: middle;
  margin-right: 3px;
}
.mark-badge.is-error   { background: var(--color-error); }
.mark-badge.is-main    { background: var(--color-secondary); }
.mark-badge.is-success { background: var(--color-success); }
.mark-badge.is-warn    { background: var(--color-warning); }

/* 半幅日付入力（from-to を1セルに収める時） */
.input-date-half {
  width: 45%;
  display: inline-block;
}

/* 4列グリッド（コンパクト） */
.grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 4px 0;
}
@media screen and (max-width: 1200px) {
  .grid-4col { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px) {
  .grid-4col { grid-template-columns: 1fr; }
}

/* readonly input: 標準でグレー背景 */
input[readonly]:not([type="checkbox"]):not([type="radio"]),
textarea[readonly] {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* モーダル内プレビューエリア（請求書プレビュー等） */
.modal-preview {
  overflow-y: auto;
  background: #e5e5e5;
  padding: 20px;
}

/* 帳票プレビューモーダル: 90% 幅、最大 900px */
.modal.is-full .modal-window.is-L.modal-preview-window,
.modal:target .modal-window.is-L.modal-preview-window {
  width: 90%;
  max-width: 900px;
}

/* 白背景＋薄ボーダーの汎用カードボックス */
.box-light {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* アイコン余白（label is-required アイコンと組み合わせる時） */
.icon-mr6 { margin-right: 6px; }

/* ファイルタイプ別アイコン色（panel-thumbnail 等で使用） */
.file-icon       { font-size: 36px; line-height: 1; }
.file-icon.is-pdf   { color: #e74c3c; }
.file-icon.is-image { color: #3498db; }
.file-icon.is-excel { color: #27ae60; }
.file-icon.is-word  { color: #2980b9; }


/* ----------------------------------------------------------------------------
   29-15. 編集画面のスティッキーアクションバー
   - スクロールしても常に右上に「保存」ボタンが追従する
---------------------------------------------------------------------------- */
.edit-actions-bar {
  position: sticky;
  top: 60px; /* ヘッダー高さ */
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: -14px -20px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e2e8f0;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.edit-actions-bar .edit-actions-ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.edit-actions-bar .edit-actions-ttl i {
  color: var(--color-secondary);
}
.edit-actions-bar .edit-actions-btns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ----------------------------------------------------------------------------
   29-16. トグルスイッチ（PICKUP等のON/OFF）
   - <input type="checkbox" name="upAry[xxx]" value="1"> でフォーム送信される
   - JSなしでHTML/CSSだけで動作
---------------------------------------------------------------------------- */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.toggle-switch input[type="checkbox"] {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background-color: #cbd5e1;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.25s ease;
  margin: 0;
  flex-shrink: 0;
}
.toggle-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
}
.toggle-switch input[type="checkbox"]:checked {
  background-color: var(--color-secondary);
}
.toggle-switch input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}
.toggle-switch input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 49, 124, 0.18);
}
.toggle-switch-lbl {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  min-width: 28px;
  transition: color 0.18s ease;
}
.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-lbl {
  color: var(--color-secondary);
}


/* ----------------------------------------------------------------------------
   29-17. メッセージUI（チャット風 - 左:相手 / 右:自分）
   - .msg-list で会話を縦並び
   - .msg-item.is-mine で自分の発言（右寄せ・色付き吹き出し）
---------------------------------------------------------------------------- */
.msg-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  max-height: 480px;
  overflow-y: auto;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.msg-item {
  display: flex;
  gap: 10px;
  max-width: 75%;
  align-self: flex-start;
}
.msg-item.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.msg-day-sep {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.msg-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #e2e8f0;
  color: #475569;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  align-self: flex-end;
}
.msg-item.is-mine .msg-avatar {
  background: var(--color-secondary);
  color: #fff;
}
.msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  padding: 0 4px;
}
.msg-item.is-mine .msg-meta {
  flex-direction: row-reverse;
}
.msg-meta .msg-name {
  font-weight: 700;
  color: #475569;
}
.msg-bubble {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px 14px 14px 4px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e293b;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.msg-item.is-mine .msg-bubble {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 2px 6px rgba(16, 49, 124, 0.15);
}
.msg-bubble .msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  font-size: 11px;
  color: inherit;
  text-decoration: none;
}
.msg-item:not(.is-mine) .msg-bubble .msg-attachment {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: var(--color-secondary);
}
.msg-input {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-top: 10px;
}
.msg-input textarea {
  flex: 1;
  min-height: 44px;
  max-height: 160px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.msg-input textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.12);
}
.msg-input-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.msg-input-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  transition: 0.15s ease;
}
.msg-input-tool:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.msg-input-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: var(--color-secondary);
  color: #fff;
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s ease;
}
.msg-input-send:hover {
  background: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  box-shadow: 0 4px 12px rgba(16, 49, 124, 0.25);
}


/* ----------------------------------------------------------------------------
   29-18. 上部検索バー（一覧画面用キーワード検索）
   - 9999 風: 1行に検索アイコン + キーワード入力 + 絞り込みセレクト + 検索ボタン
---------------------------------------------------------------------------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.search-bar-icn {
  color: var(--color-secondary);
  font-size: 14px;
  flex-shrink: 0;
}
.search-bar input[type="search"],
.search-bar input[type="text"] {
  flex: 1;
  min-width: 100px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  transition: 0.15s ease;
  box-sizing: border-box;
}
.search-bar input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.1);
}
.search-bar select {
  height: 32px;
  padding: 0 30px 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 130px;
}
.search-bar select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.1);
}
.search-bar .btn-search,
.search-bar button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  background: var(--color-secondary);
  color: #fff;
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.search-bar .btn-search:hover,
.search-bar button[type="submit"]:hover {
  background: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  box-shadow: 0 4px 12px rgba(16, 49, 124, 0.2);
}
.search-bar .btn-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  background: #fff;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
}
.search-bar .btn-clear:hover {
  background: #f1f5f9;
  color: #1e293b;
}


/* ----------------------------------------------------------------------------
   29-19. 詳細画面（読み取り専用フィールド）
   - .edit-box の input を <p> に置き換える運用
   - 横並びの縦積み（grid 3列）でコンパクトに情報表示
---------------------------------------------------------------------------- */
.edit-box .edit-field .field-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  min-height: 32px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 4px;
  font-size: 13px;
  color: #1e293b;
  line-height: 1.5;
  word-break: break-word;
  box-sizing: border-box;
}
.edit-box .edit-field .field-value:empty::before {
  content: "—";
  color: #cbd5e1;
}
.edit-box .edit-field .field-value.is-multiline {
  display: block;
  min-height: 64px;
  padding: 8px 10px;
  white-space: pre-wrap;
  line-height: 1.6;
}


/* ----------------------------------------------------------------------------
   29-21. パンくずリスト（.breadcrumb）
---------------------------------------------------------------------------- */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 6px 0;
  margin: 0 0 8px;
  font-size: 12px;
  color: #94a3b8;
  list-style: none;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb li:not(:last-child)::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 9px;
  color: #cbd5e1;
  margin: 0 8px;
}
.breadcrumb a {
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}
.breadcrumb a:hover {
  color: var(--color-secondary);
}
.breadcrumb a i { font-size: 11px; }
.breadcrumb li.is-current,
.breadcrumb li[aria-current="page"] {
  color: #1e293b;
  font-weight: 700;
}


/* ----------------------------------------------------------------------------
   29-22. ページネーション（.pagination）
---------------------------------------------------------------------------- */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination li {
  display: inline-flex;
}
.pagination a,
.pagination button,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  background: #fff;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.pagination a:hover,
.pagination button:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.pagination .is-active a,
.pagination .is-active button,
.pagination .is-active span {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
  cursor: default;
}
.pagination .is-disabled a,
.pagination .is-disabled button,
.pagination .is-disabled span {
  color: #cbd5e1;
  background: #f8fafc;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination .pagination-ellipsis {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: default;
  pointer-events: none;
}

/* ページャー全体（情報 + ページネーション + 件数選択） */
.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  margin-top: 8px;
}
.pagination-info {
  font-size: 12px;
  color: #64748b;
}
.pagination-info b {
  color: #1e293b;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pagination-perpage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}
.pagination-perpage select {
  height: 28px;
  padding: 0 24px 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 12px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E")
    no-repeat right 6px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}


/* ----------------------------------------------------------------------------
   29-23. 空状態 (.empty-state)
---------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #fff;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
  text-align: center;
}
.empty-state-icn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #f1f5f9;
  border-radius: 50%;
  color: #94a3b8;
  font-size: 24px;
  margin-bottom: 12px;
}
.empty-state-ttl {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px;
}
.empty-state-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 16px;
  max-width: 360px;
  line-height: 1.6;
}
.empty-state-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* コンパクト版（テーブル空行など） */
.empty-state.is-mini {
  padding: 18px 20px;
  flex-direction: row;
  gap: 12px;
  text-align: left;
}
.empty-state.is-mini .empty-state-icn {
  width: 36px;
  height: 36px;
  font-size: 16px;
  margin: 0;
}
.empty-state.is-mini .empty-state-ttl { font-size: 12.5px; }
.empty-state.is-mini .empty-state-desc { font-size: 11.5px; margin-bottom: 0; }


/* ----------------------------------------------------------------------------
   29-24. プログレスバー (.progress-bar)
---------------------------------------------------------------------------- */
.progress-bar {
  display: block;
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.progress-bar-fill {
  display: block;
  height: 100%;
  background: var(--color-secondary);
  border-radius: 4px;
  transition: width 0.4s ease;
  position: relative;
}
.progress-bar-fill.is-success { background: var(--color-success); }
.progress-bar-fill.is-warn    { background: var(--color-warning); }
.progress-bar-fill.is-error   { background: var(--color-error); }
.progress-bar-fill.is-info    { background: var(--color-info); }

/* パーセンテージ値（5%刻み） */
.progress-bar-fill.is-p0   { width: 0%; }
.progress-bar-fill.is-p5   { width: 5%; }
.progress-bar-fill.is-p10  { width: 10%; }
.progress-bar-fill.is-p15  { width: 15%; }
.progress-bar-fill.is-p20  { width: 20%; }
.progress-bar-fill.is-p25  { width: 25%; }
.progress-bar-fill.is-p30  { width: 30%; }
.progress-bar-fill.is-p35  { width: 35%; }
.progress-bar-fill.is-p40  { width: 40%; }
.progress-bar-fill.is-p45  { width: 45%; }
.progress-bar-fill.is-p50  { width: 50%; }
.progress-bar-fill.is-p55  { width: 55%; }
.progress-bar-fill.is-p60  { width: 60%; }
.progress-bar-fill.is-p65  { width: 65%; }
.progress-bar-fill.is-p70  { width: 70%; }
.progress-bar-fill.is-p75  { width: 75%; }
.progress-bar-fill.is-p80  { width: 80%; }
.progress-bar-fill.is-p85  { width: 85%; }
.progress-bar-fill.is-p90  { width: 90%; }
.progress-bar-fill.is-p95  { width: 95%; }
.progress-bar-fill.is-p100 { width: 100%; }

/* 縞模様アニメ（処理中表現） */
.progress-bar-fill.is-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.18) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progress-stripe 1s linear infinite;
}
@keyframes progress-stripe {
  from { background-position: 1rem 0; }
  to   { background-position: 0 0; }
}

/* サイズバリエーション */
.progress-bar.is-sm { height: 5px; }
.progress-bar.is-lg { height: 12px; }

/* ラベル付き */
.progress-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.progress-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #64748b;
}
.progress-bar-meta b {
  color: #1e293b;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------------------
   29-25. アバター + アバターグループ (.avatar / .avatar-group)
---------------------------------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-secondary);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  border: 2px solid transparent;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar.is-xs { width: 22px; height: 22px; font-size: 10px; }
.avatar.is-sm { width: 26px; height: 26px; font-size: 11px; }
.avatar.is-lg { width: 40px; height: 40px; font-size: 15px; }
.avatar.is-xl { width: 56px; height: 56px; font-size: 20px; }

/* カラーバリエーション */
.avatar.is-pink    { background: var(--color-primary); }
.avatar.is-success { background: var(--color-success); }
.avatar.is-warn    { background: var(--color-warning); }
.avatar.is-info    { background: var(--color-info); }
.avatar.is-gray    { background: #94a3b8; }

/* オンラインドット */
.avatar.is-online,
.avatar.is-offline,
.avatar.is-busy {
  position: relative;
  overflow: visible;
}
.avatar.is-online::after,
.avatar.is-offline::after,
.avatar.is-busy::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
}
.avatar.is-offline::after { background: #94a3b8; }
.avatar.is-busy::after    { background: var(--color-error); }

/* グループ（重なって表示） */
.avatar-group {
  display: inline-flex;
  align-items: center;
}
.avatar-group .avatar {
  border-color: #fff;
  margin-left: -8px;
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}
.avatar-group .avatar-more {
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
}


/* ----------------------------------------------------------------------------
   29-26. スケルトンローダー (.skeleton)
---------------------------------------------------------------------------- */
.skeleton {
  display: block;
  width: 100%;
  height: 14px;
  background: linear-gradient(
    90deg,
    #f1f5f9 0%,
    #e2e8f0 50%,
    #f1f5f9 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton.is-circle { border-radius: 50%; }
.skeleton.is-text { height: 12px; }
.skeleton.is-title { height: 18px; width: 50%; }
.skeleton.is-button { height: 28px; width: 90px; border-radius: 6px; }
.skeleton.is-avatar { width: 32px; height: 32px; border-radius: 50%; }
.skeleton.is-thumbnail { aspect-ratio: 16 / 9; height: auto; }
.skeleton.is-w80 { width: 80%; }
.skeleton.is-w75 { width: 75%; }
.skeleton.is-w60 { width: 60%; }
.skeleton.is-w50 { width: 50%; }
.skeleton.is-w40 { width: 40%; }

/* スケルトンデモ用の親レイアウト */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.skeleton-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skeleton-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.skeleton-btns {
  display: flex;
  gap: 6px;
}
@media screen and (max-width: 768px) {
  .skeleton-grid-3 { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------------------
   29-27. テーブル選択行ハイライト + テキストエリアサイズ
---------------------------------------------------------------------------- */
.tbl-list tbody tr.is-checked td,
.tbl-list tbody tr.is-selected td {
  background-color: #fef2f4 !important;
  color: #1e293b;
}
.tbl-list tbody tr.is-checked:hover td,
.tbl-list tbody tr.is-selected:hover td {
  background-color: #fee7eb !important;
}

/* テキストエリアの汎用サイズ */
.textarea-s { min-height: 60px !important; }
.textarea-m { min-height: 100px !important; }
.textarea-l { min-height: 200px !important; }


/* ----------------------------------------------------------------------------
   29-20. 週単位カレンダー（.cal-week-list）
   - 月別を週単位の集約リストで表示。各日にチップで予定を並べる
---------------------------------------------------------------------------- */
.cal-week-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-week {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.cal-week-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.cal-week-no {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--color-secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cal-week-range {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  flex: 1;
}
.cal-week-summary {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}
.cal-week-days {
  display: flex;
  flex-direction: column;
}
.cal-day {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-bottom: 1px solid #f1f5f9;
  min-height: 36px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cal-day:last-child { border-bottom: none; }
.cal-day:hover { background: #f8fafc; }
.cal-day.is-today { background: #eaf0fa; }
.cal-day.is-today:hover { background: #dde7f5; }
.cal-day.is-other { opacity: 0.45; cursor: default; }
.cal-day-date {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  width: 56px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.cal-day-date .dnum {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  min-width: 22px;
}
.cal-day-date .dwk {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}
.cal-day.is-saturday .dnum,
.cal-day.is-saturday .dwk { color: #2563eb; }
.cal-day.is-sunday .dnum,
.cal-day.is-sunday .dwk,
.cal-day.is-holiday .dnum,
.cal-day.is-holiday .dwk { color: var(--color-error); }
.cal-day-events {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.cal-day-empty {
  font-size: 11px;
  color: #cbd5e1;
}
.cal-day-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 2px 8px;
  height: 22px;
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: 0.15s ease;
}
.cal-day-add i { font-size: 9px; }
.cal-day:hover .cal-day-add {
  opacity: 1;
}
.cal-day-add:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  border-style: solid;
}


/* ----------------------------------------------------------------------------
   29-14. 上下中央揃えの徹底（既存パーツへの安全な追補）
---------------------------------------------------------------------------- */
/* テーブルセル内 input/select は垂直中央 */
.tbl-list td,
.tbl-list th {
  vertical-align: middle;
}

/* ボタン共通: アイコン+テキストの中央揃え */
.btn,
.btn-tool,
.btn-tbl-tool,
.btn-normal-min {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}
.btn i,
.btn-tool i,
.btn-tbl-tool i,
.btn-normal-min i {
  vertical-align: middle;
}

/* search-field-range の "～" 区切り */
.search-field-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.range-separator {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
}

/* search-field-group (radio/checkbox の横並び) */
.search-field-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.search-field-group label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}


/* ============================================================================
   ドキュメントヘッダー（伝票・帳票・カード等、画面トップに置く情報帯）
============================================================================ */
.doc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--color-secondary);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.doc-header-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-shrink: 0;
}
.doc-header-type {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-secondary);
    background: #eaf0fa;
    padding: 3px 9px;
    border-radius: 3px;
    letter-spacing: 0.06em;
}
.doc-header-no {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.doc-header-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    color: #475569;
    font-size: 11.5px;
}
.doc-header-meta dl {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    line-height: 1;
}
.doc-header-meta dt {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.doc-header-meta dd {
    margin: 0;
    color: #1e293b;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.doc-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}


/* ============================================================================
   Functionキーバー（F1〜F12 + ESC のキーボードショートカット帯）
============================================================================ */
.fkey-bar {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 3px;
    padding: 5px 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
/* 画面最下部固定モディファイア（v2 など）。サイドバー開閉に追従 */
.fkey-bar.is-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 14%;
    right: 0;
    z-index: 50;
    border-radius: 0;
    border-left: 1px solid #e2e8f0;
    border-right: none;
    margin: 0 !important;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08);
    transition: left 0.3s ease;
}
.fkey-bar.is-fixed-bottom.is-expanded { left: 0; }
@media (max-width: 1200px) {
    .fkey-bar.is-fixed-bottom { left: 0; }
}
.fkey {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 3px 2px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    color: #475569;
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
    line-height: 1.15;
}
.fkey:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    background: #f8fafc;
}
.fkey.is-off {
    opacity: 0.45;
    pointer-events: none;
    background: #f8fafc;
}
.fkey-num {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.04em;
}
.fkey-lbl {
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* 配色グループ（意味別に視認性を確保）:
     is-primary  navy   : 検索/参照系
     is-info     green  : 出力系
     is-danger   red    : 破壊（現状未使用）
     is-save     pink   : 主CTA */
.fkey.is-primary { background: #eef2fa; border-color: #b8cce6; color: #10317c; }
.fkey.is-primary:hover { background: #dbe5f1; border-color: #10317c; color: #0a2050; }
.fkey.is-info    { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.fkey.is-info:hover    { background: #d1fae5; border-color: #059669; color: #065f46; }
.fkey.is-info .fkey-num { color: #34a378; }
.fkey.is-danger  { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.fkey.is-danger:hover  { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
/* THE 主要 CTA — ブランドピンクで唯一性を確保 */
.fkey.is-save {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(237, 46, 100, 0.25);
}
.fkey.is-save:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}
.fkey.is-save .fkey-num { color: rgba(255,255,255,0.7); }


/* ============================================================================
   コンパクトグリッド（.tbl-list のコンパクト変種・明細入力等）
   - .tbl-list.tbl-grid : 行高22px・thead 固定・内部スクロール
============================================================================ */
.tbl-list.tbl-grid {
    max-height: calc(100vh - 320px);
    min-height: 200px;
    overflow-y: auto;
}
/* 5列目（数量）の左罫線を太く＝商品名称と数量の境界を強調（受注伝票の明細のみ） */
#oe-detail-table thead th:nth-child(5),
#oe-detail-table tbody td:nth-child(5) {
    border-left: 2px solid #94a3b8;
}
/* 商品コード列：右端に検索アイコンを置くため相対配置 */
.tbl-list.tbl-grid td.oe-cell-search { position: relative; }
.tbl-list.tbl-grid td.oe-cell-search input { padding-right: 22px !important; }
.oe-cell-search-btn {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-size: 10px;
    transition: background 0.1s ease, color 0.1s ease;
}
.oe-cell-search-btn:hover {
    background: #dde6f3;
    color: var(--color-secondary);
}
.tbl-list.tbl-grid table { table-layout: fixed; }
.tbl-list.tbl-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 28px;
    padding: 0 6px;
    font-size: 11.5px;
    background: #eef2f7;
    color: var(--color-secondary);
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #94a3b8;
    box-shadow: 0 1px 0 #94a3b8;
}
.tbl-list.tbl-grid thead th:last-child { border-right: none; }
.tbl-list.tbl-grid tbody td {
    height: 26px;
    padding: 0;
    border-right: 1px solid #d8dee8;
    border-bottom: 1px solid #d8dee8;
    font-size: 12px;
}
.tbl-list.tbl-grid tbody td:last-child { border-right: none; }
.tbl-list.tbl-grid tbody tr:nth-child(even) td { background-color: #fafbfd; }
/* No 列はテキストスタイルのみ。背景は行の交互色をそのまま継承 */
.tbl-list.tbl-grid tbody td:first-child {
    color: var(--color-secondary);
    font-weight: 600;
    text-align: center;
}
/* 行ホバー：非アクティブ行のみ。全セル同色で統一 */
.tbl-list.tbl-grid tbody tr:not(.is-active):hover td {
    background-color: #d8e3ef;
}
/* アクティブ行：くっきりとした青ベース＋ネイビーの太い左帯＋No列ボールド
   選択中であることが一目で判別できるよう、コントラストを強める */
.tbl-list.tbl-grid tbody tr.is-active td {
    background: #bfdbfe !important;
    border-bottom: 1px solid #60a5fa !important;
}
.tbl-list.tbl-grid tbody tr.is-active td:first-child {
    box-shadow: inset 4px 0 0 0 var(--color-secondary);
    color: var(--color-secondary) !important;
    font-weight: 800;
}
.tbl-list.tbl-grid tbody tr.is-active input[readonly] {
    color: #0f172a !important;
}
.tbl-list.tbl-grid tbody input[type="text"],
.tbl-list.tbl-grid tbody input[type="number"],
.tbl-list.tbl-grid tbody select {
    height: 24px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 12px;
    box-sizing: border-box;
    background: transparent;
}
.tbl-list.tbl-grid tbody input:focus,
.tbl-list.tbl-grid tbody select:focus {
    border-color: var(--color-secondary);
    background: #f5f8fc;
    box-shadow: inset 0 0 0 1px var(--color-secondary);
    position: relative;
    z-index: 1;
}


/* ============================================================================
   識別コード入力（マスタ照会のキーとなるコード番号入力）
   - 入力可能 = 白背景（他の編集欄と統一）
   - 等幅・太字 + 文字色 navy で「機械可読のキー」を typographic に表現
   - 値が入っている = .is-modified（赤系）で「入力済み」を可視化
============================================================================ */
.input-code {
    background: #ffffff !important;
    border-color: #c8d4e6 !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-weight: 700;
    color: #1e3a72 !important;
    letter-spacing: 0.04em;
}
.input-code:focus {
    background: #ffffff !important;
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 0 2px rgba(16, 49, 124, 0.22) !important;
}
.input-code::placeholder {
    color: #94a3b8;
    opacity: 1;
}
/* readonly な input-code（採番予定の伝票コード等）は灰青背景に */
.input-code[readonly] {
    background: #eef2f7 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}
/* テーブルセル内の input-code は背景透明（行の交互色に同化）＋ typographic で識別 */
.tbl-list.tbl-grid .input-code {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #1e3a72 !important;
}
.tbl-list.tbl-grid .input-code:focus {
    background: #f5f8fc !important;
    border-color: var(--color-secondary) !important;
    box-shadow: inset 0 0 0 1px var(--color-secondary) !important;
}


/* ============================================================================
   変更マーク（.is-modified）
   - ユーザー入力・Ajax 補完で値が入った/書き換わったセルに付与
   - 既存 .is-changed（黄）と区別して 赤系の極薄ピンクで「変更あり」を示す
============================================================================ */
.is-modified {
    background-color: #fef5f5 !important;
    border-color: #f5c8c8 !important;
    color: #1e293b !important;
}
.is-modified:focus {
    background-color: #fef5f5 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18) !important;
}
/* グリッド内の input.is-modified（透明背景の上書き） */
.tbl-list.tbl-grid tbody input.is-modified,
.tbl-list.tbl-grid tbody select.is-modified {
    background: #fef5f5 !important;
    color: #1e293b !important;
}
/* アクティブ行 × 変更マーク：青に薄ピンクが乗る形で両者の意味を両立 */
.tbl-list.tbl-grid tbody tr.is-active input.is-modified,
.tbl-list.tbl-grid tbody tr.is-active select.is-modified {
    background: #fde9e9 !important;
}


/* ============================================================================
   検索モーダルの結果行（行クリックで選択）／一覧の余白も読みやすく
============================================================================ */
.modal .tbl-list.tbl-grid tbody tr.js-master-pick { cursor: pointer; }
.modal .tbl-list.tbl-grid tbody tr.js-master-pick:hover td {
    background: #eef4fb !important;
    color: var(--color-secondary);
}
/* モーダル内グリッドは明細より密度を下げて見やすく */
.modal .tbl-list.tbl-grid thead th {
    height: 36px;
    padding: 0 14px;
    font-size: 12px;
}
.modal .tbl-list.tbl-grid tbody td {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 36px;
    border-right-color: #e2e8f0;
    border-bottom-color: #e2e8f0;
}
.modal .tbl-list.tbl-grid thead th:nth-child(5),
.modal .tbl-list.tbl-grid tbody td:nth-child(5) {
    border-left: 1px solid #e2e8f0;
}

/* form 末尾は固定の totals-bar / fkey-bar に隠れないよう余白を確保 */
#oe-form { padding-bottom: 56px; }
/* 一覧画面は固定フッターを持たないので余白不要。明細を画面下部まで広げる */
#ol-form { padding-bottom: 0; }
.main:has(#ol-form) .main-inner { padding-bottom: 6px; }


/* ============================================================================
   一覧テーブル ultra-mini モディファイア（受注一覧 #ol-table 等）
   入力モーダル内のグリッド（.modal .tbl-list.tbl-grid）と同じ余白感
============================================================================ */
/* 一覧テーブル：スクロール時 thead 固定、行高は中庸 */
#ol-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px;
    background: #eef2f7;
    box-shadow: 0 1px 0 #94a3b8, inset 0 -1px 0 #94a3b8;
}
#ol-table tbody td {
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 12.5px;
    line-height: 30px;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
#ol-table tbody td:first-child {
    text-align: center;
}
/* 行クリック → 選択（.is-active と同じ表現を流用）。クリッカブルを明示 */
#ol-table tbody tr { cursor: pointer; }


/* ============================================================================
   検索ボックス mini（一覧画面のフィルタ用）— 見出しなし・1 行レイアウト
============================================================================ */
.search-box.is-mini { margin-bottom: 10px; }
.search-box.is-mini .search-box-body {
    padding: 10px 12px;
    gap: 6px 10px;
}
.search-box.is-mini .search-field { gap: 3px; }
.search-box.is-mini .search-field > label:first-child {
    font-size: 11px;
    line-height: 1.3;
    color: #475569;
    font-weight: 600;
}
.search-box.is-mini .search-field input,
.search-box.is-mini .search-field select {
    height: 28px;
    font-size: 12.5px;
    padding: 0 8px;
}
/* 7 カラムのグリッド（1 行で 7 つの絞り込み項目を並べる） */
.search-box-body.col-7 { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1200px) {
    .search-box-body.col-7 { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================================
   列ソート（thead th.js-sort）／列表示切替（.col-hidden）
============================================================================ */
.tbl-list thead th.js-sort {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px !important;
}
.tbl-list thead th.js-sort::after {
    content: "\f0dc"; /* fa-sort */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.35;
    font-size: 9px;
}
.tbl-list thead th.js-sort[data-sort-dir="asc"]::after  { content: "\f0de"; opacity: 1; }
.tbl-list thead th.js-sort[data-sort-dir="desc"]::after { content: "\f0dd"; opacity: 1; }
.tbl-list thead th.js-sort:hover { background: #dde6f3 !important; }

/* 列の非表示（col/th/td すべてに data-col-key を一致させてトグル） */
.col-hidden { display: none !important; }


/* ============================================================================
   表示項目モーダル（#modal-col-toggle）
============================================================================ */
.col-toggle-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
}
.col-toggle-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.col-toggle-item:hover {
    background: #eef4fb;
    border-color: var(--color-secondary);
}
.col-toggle-item input[type="checkbox"] {
    accent-color: var(--color-secondary);
    cursor: pointer;
}

/* 明細グリッド内の行クリア × ボタンは色なし（赤ホバーを上書き、ニュートラル） */
.tbl-list.tbl-grid .btn-normal-min.btn-delete {
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.tbl-list.tbl-grid .btn-normal-min.btn-delete:hover {
    color: #64748b !important;
    background: #e2e8f0 !important;
}

/* Chrome / Edge / Safari の autofill 黄背景を無効化（クリア後にも残らないように） */
#oe-form input:-webkit-autofill,
#oe-form input:-webkit-autofill:hover,
#oe-form input:-webkit-autofill:focus,
#oe-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1e293b !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* ============================================================================
   金額表示セル（readonly な集計結果欄）
============================================================================ */
.input-amount {
    background: #f8fafc;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}
/* グリッド内の金額セル：背景は透明（行の交互色を継承）、太字で強調 */
.tbl-list.tbl-grid tbody input.input-amount {
    background: transparent;
    font-weight: 700;
    color: #1e293b;
}
/* 明細セルの readonly 入力（品番・商品名称など、ID入力で補完される項目）
   → 背景は透明にして「行と同じ色」を継承。文字色のトーンで操作不可を表現 */
.tbl-list.tbl-grid tbody input[readonly] {
    background: transparent;
    color: #475569;
    cursor: default;
}
.tbl-list.tbl-grid tbody tr.is-active input[readonly] {
    color: #1e293b;
}
/* disabled な入力（数量・単価・消費税：商品コードヒット前は操作不可）
   → 背景は透明（行の交互色を継承）、操作不可は cursor / 文字色で表現 */
.tbl-list.tbl-grid tbody input:disabled,
.tbl-list.tbl-grid tbody select:disabled {
    background: transparent;
    color: #cbd5e1;
    cursor: not-allowed;
}
.tbl-list.tbl-grid tbody tr.is-active input:disabled,
.tbl-list.tbl-grid tbody tr.is-active select:disabled {
    color: #94a3b8;
}


/* ============================================================================
   合計フッター（伝票・見積画面の画面下部に置く集計バー）
============================================================================ */
.totals-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 4px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
}
.totals-bar-L {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 8px;
}
.totals-bar-L .search-field { gap: 0; }
.totals-bar-L .search-field > label:first-child { font-size: 10px; line-height: 1.2; }
.totals-bar-L .search-field input,
.totals-bar-L .search-field select {
    height: 22px;
    font-size: 11.5px;
    padding: 0 6px;
}
/* 画面最下部に固定（v1）。サイドバー開閉に追従 */
.totals-bar.is-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 14%;
    right: 0;
    z-index: 50;
    border-radius: 0;
    border-left: 1px solid #e2e8f0;
    border-right: none;
    border-bottom: none;
    margin: 0 !important;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08);
    transition: left 0.3s ease;
}
.totals-bar.is-fixed-bottom.is-expanded { left: 0; }
@media (max-width: 1200px) {
    .totals-bar.is-fixed-bottom { left: 0; }
}
.totals-bar-R {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding-left: 16px;
    border-left: 1px solid #e2e8f0;
}
.totals-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 110px;
}
.totals-lbl {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.totals-val {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}
.totals-cell.is-grand {
    padding-left: 14px;
    margin-left: 4px;
    border-left: 1px dashed #cbd5e1;
}
.totals-cell.is-grand .totals-lbl { color: #475569; }
/* 総合計はブランドネイビー。赤は実マイナス値（値引・返品）に温存 */
.totals-cell.is-grand .totals-val {
    font-size: 22px;
    color: var(--color-secondary);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.01em;
}


/* ============================================================================
   入力密度 modifier（既存 .search-box / .search-field のコンパクト版）
   - .is-dense を search-box に付ければ余白・高さが詰まる
============================================================================ */
.search-box.is-dense .search-box-body {
    padding: 6px 8px;
    gap: 4px 8px;
}
.search-box.is-dense .search-field { gap: 2px; }
.search-box.is-dense .search-field > label:first-child { font-size: 10.5px; }
.search-box.is-dense .search-field input,
.search-box.is-dense .search-field select {
    height: 24px;
    font-size: 12px;
    padding: 0 6px;
}