@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: 64px;
  padding: 0 28px;
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  z-index: 100;
}

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

/* ロゴ */
.header-ttl {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.header-ttl h1 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.header-ttl a {
  color: #333;
  text-decoration: none;
  display: inline;
  white-space: nowrap;
}

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

/* ヘッダーロゴ */
.header-logo {
  height: 36px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
}
.header-logo-link {
  display: inline-flex !important;
  align-items: center;
}
.header-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.header-ttl .ttl-L {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 2px solid #ccc;
  text-decoration: none;
  transition: color 0.2s;
}
.header-ttl .ttl-L:hover {
  color: #2c4f8c;
}

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

.header-name:hover {
  background: transparent;
}

.header-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #2c4f8c, #10317c);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(44, 79, 140, 0.25);
}

.header-user-name {
  color: #333;
  font-size: 13px;
  margin: 0 12px 0 8px;
}

.header-logout-form {
  display: inline;
  margin: 0;
}

.header-logout-btn {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #888;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.header-logout-btn:hover {
  background: #e8e8e8;
  border-color: #ccc;
  color: #555;
}
.header-logout-btn i {
  margin-right: 4px;
}

/* ログアウトボタン */
.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  background: #f0f2f5;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 12px;
}
.btn-logout:hover {
  background: #e2e6ea;
  color: #d8342f;
  border-color: #d8342f;
}
.btn-logout i {
  font-size: 13px;
  color: inherit;
}

/* SPメニュー内ログアウト */
.header-logout {
  display: block;
  width: calc(100% - 40px);
  margin: 12px 20px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(216, 52, 47, 0.85);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}
.header-logout:hover {
  background: rgba(216, 52, 47, 1);
}

/* ハンバーガーボタン（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 {
    display: none;
  }
}

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

.main-client {
  width: 100%;
  padding: 60px 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 8px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0;
  min-height: calc(100vh - 300px);
}

@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: 9px 10px;
    margin: 6px;
    border-radius: 8px;
  }
}

/* インナーレイアウト */
.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: 64px;
  left: 0;
  height: calc(100vh - 64px);
  width: 15%;
  background-color: #fffdfd;
  border-right: 1px solid #f7f0f0;
  overflow: hidden;
  overflow-y: auto;
  transition: 0.3s ease;
}
.sidebar.is-close {
  left: -15%;
}
.sidebar li {
  display: table;
  width: 100%;
}
.sidebar li button {
  width: 100%;
  height: 44px;
  padding: 0 20px;
  text-align: left;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  border-width: 0;
  border-left: 4px solid transparent;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}
.sidebar li button:hover {
  background-color: #e8edf5;
  color: #2c4f8c;
}
.sidebar li button.is-open {
  background-color: #e8edf5;
  color: #2c4f8c;
}
.sidebar-list {
  margin-top: 12px;
}
.sidebar-list ul {
  background-color: transparent;
}
.sidebar a {
  display: table-cell;
  width: 100%;
  height: 44px;
  vertical-align: middle;
  padding-left: 14%;
  color: #555;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  border-width: 0;
  text-decoration: none;
  transition: all 0.2s;
}
.sidebar li a:hover {
  background-color: #e8edf5;
  color: #2c4f8c;
}
.sidebar li a.is-active {
  background-color: #e8edf5;
  font-weight: 700;
  color: #2c4f8c;
  border-left: 4px solid #2c4f8c;
}
.sidebar-btn {
  position: fixed;
  width: 16px;
  height: 100%;
  left: 15%;
  top: 64px;
  background: url(/common/image/icn_close.svg) no-repeat center 48% #e0e4e8;
  background-size: 7px;
  border: none;
  transition: 0.3s ease;
  border-radius: 0 4px 4px 0;
}
.sidebar-btn:hover {
  background-color: #c7cad5;
}
.sidebar-btn.is-close {
  left: 0;
  background-image: url(/common/image/icn_open.svg);
}

/* サイドバー 右側メニュー */
.sidebar-menu {
  position: fixed;
  top: 0;
  right: -210px;
  width: 210px;
  height: 100vh;
  background: #f8f8f8;
  z-index: 200;
  transition: right 0.3s ease;
}
.sidebar-menu.is-open {
  right: 0;
}
.sidebar-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f8f8f8;
  color: #5a5a5a;
  font-weight: 600;
}
.sidebar-menu-close {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  background: transparent;
  border: none;
  color: #5a5a5a;
  font-size: 20px;
  cursor: pointer;
}
.sidebar-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-menu-list li {
  width: 100%;
  height: 40px;
  padding: 0 20px;
  color: #5a5a5a;
  font-size: 14px;
  font-weight: bold;
  border-width: 0;
  border-left: 5px solid transparent;
  background-color: #f8f8f8;
}
.sidebar-menu-list li a {
  display: inline-block;
  width: 100%;
  height: 40px;
  vertical-align: middle;
  color: #707070;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.3;
  border-width: 0;
  text-decoration: none;
}
.sidebar-menu-list li a:hover,
.sidebar-menu-list li button:hover {
  background: #f8f8f8;
}
.sidebar-menu-list li a i,
.sidebar-menu-list li button i {
  margin-right: 10px;
}
.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: 64px;
    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: 28px;
  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-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.top-bar-search {
  flex: 1;
  min-width: 0;
}
.search-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #f8f9fb;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 12px;
}
.search-inline label {
  font-size: 12px;
  font-weight: 700;
  color: #444;
  white-space: nowrap;
}
.search-inline input[type="text"],
.search-inline select {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.search-inline input:focus,
.search-inline select:focus {
  border-color: #2c4f8c;
  box-shadow: 0 0 0 2px rgba(44, 79, 140, 0.1);
  outline: none;
}
@media screen and (max-width: 768px) {
  .top-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 追従時 */
.top.is-fixed {
  position: fixed;
  top: auto;
  left: 0;
  bottom: 16px;
  /* ★.topへ記述を移動 */
  /* z-index:9999; */
  box-shadow: none;
}
.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: #f8f9fb;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 9px;
}
.search-box-header {
  background-color: #eef1f6;
  border-bottom: 1px solid #e2e8f0;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #2c4f8c;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-box-header i {
  color: #2c4f8c;
}
.search-box-body {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 10px;
}
.search-box-body.col-1 {
  grid-template-columns: 1fr;
}
.search-box-body.col-2 {
  grid-template-columns: repeat(2, 1fr);
}
.search-field {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 3px;
}
.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: 13px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.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 {
  background-color: #f5f5f5;
  color: #666;
}
.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;
  gap: 12px;
  padding: 6px 0;
}
.search-field-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: normal;
  color: #333;
  cursor: pointer;
}
.search-field .field-text {
  font-size: 13px;
  color: #333;
  padding: 6px 0;
}

@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: 14px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* 応募先の求人パネル（エントリー画面上部） */
.job-apply-box {
  background-color: #fff;
  border: 1px solid #d8dde6;
  border-left: 4px solid #d8342f;
  border-radius: 6px;
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.job-apply-box .job-apply-head {
  background-color: #eef1f6;
  border-bottom: 1px solid #d8dde6;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #2c4f8c;
}
.job-apply-box .job-apply-body {
  padding: 12px 18px 14px;
}
.job-apply-box .job-apply-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin: 0 0 8px;
  line-height: 1.4;
}
.job-apply-box .job-apply-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 18px;
  margin: 0;
}
.job-apply-box .job-apply-list > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.job-apply-box .job-apply-list dt {
  flex: 0 0 auto;
  width: 72px;
  font-size: 11px;
  font-weight: 600;
  color: #667;
}
.job-apply-box .job-apply-list dd {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  color: #333;
  word-break: break-all;
}
@media screen and (max-width: 600px) {
  .job-apply-box .job-apply-list {
    grid-template-columns: 1fr;
  }
}

/* 小～中モーダル内はグリッド2列に */
.modal-window.is-S .edit-box .edit-box-body,
.modal-window.is-M .edit-box .edit-box-body {
  grid-template-columns: repeat(2, 1fr);
}

/* ヘッダー（グループラベル） */
.edit-box .edit-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eef1f6;
  border-bottom: 1px solid #d8dde6;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #2c4f8c;
  border-radius: 6px 6px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ボディ（グリッドコンテナ） */
.edit-box .edit-box-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  padding: 14px 18px;
  box-sizing: border-box;
}
/* 応募履歴等：edit-box-body内のテーブルは全幅（グリッド全カラムを占有）*/
.edit-box .edit-box-body > .tbl-list { grid-column: 1 / -1; }

.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: 4px;
  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: 30px;
  padding: 0 8px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  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 input:disabled,
.edit-box .edit-field select:disabled,
.edit-box .edit-field textarea:disabled {
  background-color: #eef0f2;
  color: #8a93a0;
  border-color: #d6dae1;
  cursor: not-allowed;
  -webkit-text-fill-color: #8a93a0;
  opacity: 1;
}

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

.edit-box .edit-field input[type="file"].form-control {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  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.is-error,
.edit-box .edit-field select.is-error,
.edit-box .edit-field textarea.is-error,
input.is-error,
select.is-error,
textarea.is-error {
  border-color: #d3433b !important;
  background: #fff6f6;
}
.field-error {
  margin-top: 4px;
  font-size: 11px;
  color: #d3433b;
  line-height: 1.4;
}

/* 読み取り専用 */
.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;
  gap: 12px;
  padding: 5px 0;
  margin: 0;
}

.edit-box .edit-field-group label {
  align-items: center;
  font-size: 14px;
  font-weight: normal;
  color: #333;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

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

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

/* テキスト表示のみ */
.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: #f8f8f8;
  border: 1px solid #c0c8d4;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
}
.tbl-list-L {
  overflow-y: scroll;
}
.tbl-list table {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}
.tbl-list thead th {
  background-color: #f1f5f9;
  border-bottom: 1px solid #c0c8d4;
  border-right: 1px solid #c0c8d4;
  text-align: center;
  padding: 6px 8px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 700;
  color: #2c4f8c;
  height: 34px;
  letter-spacing: 0.03em;
  position: sticky;
  top: var(--header-h, 46px);
  z-index: 5;
}
.tbl-list tbody th {
  background-color: #f5f5f5;
  border-bottom: 1px solid #c0c8d4;
  border-right: 1px solid #c0c8d4;
}
.tbl-list tbody td,
.tbl-list tfoot td {
  background-color: #fff;
  vertical-align: middle;
  border-bottom: 1px solid #c0c8d4;
  border-right: 1px solid #c0c8d4;
  height: 30px;
  box-sizing: border-box;
  padding: 4px 10px;
  font-size: 12px;
}
.tbl-list tbody tr:nth-child(even) td {
  background-color: #fff;
}
.tbl-list tbody tr:hover td {
  background-color: #eef3f9;
}
.tbl-list thead th,
.tbl-list tbody th {
  vertical-align: middle;
  padding: 0 6px;
  box-sizing: border-box;
  font-size: 12px;
}
.tbl-list thead th:last-child,
.tbl-list tbody th:last-child,
.tbl-list tbody td:last-child,
.tbl-list tfoot td:last-child {
  border-right: none;
}
.tbl-list tbody tr:last-child th,
.tbl-list tbody tr:last-child td {
  border-bottom: none;
}
.tbl-list tfoot th {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: center;
  padding: 4px 8px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  height: 28px;
}

/* リスト内フォームパーツ調整 */
.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: 11px;
}

/* ※一覧ボタン調整 */
.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: 0;
  vertical-align: middle;
  margin: 0 2px 0 0;
}

/* ラジオ・チェックボックスグループ */
.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  min-height: 38px;
}
.radio-group label,
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

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: 8px;
}
.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: 6px;
  text-decoration: none;
  background-color: #e8e8e8;
  border: none !important;
  padding: 0 16px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  min-width: auto;
  height: 30px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s 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;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.btn-normal-min {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  background-color: #f2f2f2;
  color: #444;
  border-radius: 5px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  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: #2c4f8c;
  color: #fff;
  border-color: #2c4f8c;
}
.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: #f0f2f5;
  color: #555;
  border-color: #d1d5db;
}
.btn-normal-min.btn-delete:hover {
  background-color: #e2e6ea;
  color: #d8342f;
  border-color: #d8342f;
}
.btn-normal-min.btn-save {
  background-color: #2c4f8c;
  color: #fff;
  border-color: #2c4f8c;
}
/* 一覧の操作セル（編集リンク＋アーカイブ/復帰フォームを横並び） */
.op-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.op-actions .op-form {
  display: inline-block;
  margin: 0;
}
/* 新規作成・更新系 */
.btn-save {
  color: #fff;
  background-color: #d8342f;
  border-color: #c9302c;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(216, 52, 47, 0.2);
}
.btn-save:hover {
  background-color: #b62c28;
  border-color: #b62c28;
  box-shadow: 0 4px 10px rgba(216, 52, 47, 0.3);
}
.btn-add {
  color: #fff;
  background-color: #2c4f8c;
  border-color: #2c4f8c;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(44, 79, 140, 0.2);
}
.btn-add:hover {
  background-color: #26467c;
  border-color: #26467c;
  box-shadow: 0 4px 10px rgba(44, 79, 140, 0.3);
}

/* 編集系（ブルー） */
.btn-edit {
  color: #fff;
  background-color: #2c4f8c;
  border-color: #2c4f8c;
  font-size: 12px;
}
.btn-edit:hover {
  background-color: #26467c;
  border-color: #26467c;
}

/* 削除系（レッド） */
.btn-delete {
  color: #555;
  background-color: #f0f2f5;
  border: 1px solid #d1d5db !important;
  font-size: 12px;
}
.btn-delete:hover {
  background-color: #e2e6ea;
  color: #d8342f;
  border-color: #d8342f !important;
}

/* 帳票・出力系（ティール） */
.btn-csv,
.btn-output,
.btn-excel {
  color: #fff;
  background-color: #3a8a7e;
  border-color: #3a8a7e;
  font-size: 12px;
}
.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: 12px;
}
.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-secondary {
  color: #374151;
  background-color: #e5e7eb;
  padding: 10px 14px;
}

/* キャンセル系ボタン（.btn-cancel） */
.btn-cancel {
  color: #fff;
  background-color: #6b7280;
}

/* ============================================================================
   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 {
  background-color: #333e55;
  color: #fff;
  padding: 8px 15px;
  font-size: 14px;
}
.group-label-light {
  background-color: #ddeaef !important;
  text-align: left !important;
  font-size: 13px !important;
  padding: 0 15px !important;
}

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

/* 大見出し */
.main-ttl {
  display: flex;
  margin-bottom: 11px;
}
.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 {
  background-color: #333e55;
  padding: 0 8px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  min-height: 30px;
  box-sizing: border-box;
  font-size: 15px;
}
.sub-ttl-orange {
  background-color: #dc9574;
  padding: 0 8px;
  line-height: 30px;
  color: #222;
  text-align: center;
  min-height: 30px;
  box-sizing: border-box;
  font-size: 15px;
}

/* ============================================================================
   11. ボックス
============================================================================ */
.box-area {
  display: flex;
}
.box-gray {
  background-color: #f5f5f5;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.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 {
  height: 4px;
  background-color: #4a90d9;
  flex-shrink: 0;
}
.card-grid-item-accent.accent-red {
  background-color: #f44336;
}
.card-grid-item-accent.accent-yellow {
  background-color: #ffc107;
}
.card-grid-item-accent.accent-green {
  background-color: #4caf50;
} /* 高度人材（緑） */
.card-grid-item-accent.accent-orange {
  background-color: #ff9800;
} /* 特定技能（オレンジ） */
.card-grid-item-accent.accent-gray {
  background-color: #999;
}
.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. モーダル、ダイアログ
============================================================================ */
.modal {
  display: none;
}

.modal.is-full,
.modal:target {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0);
  z-index: 9999;
  animation: modalOverlayIn 0.3s ease forwards;
}

@keyframes modalOverlayIn {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.modal.is-full .modal-window,
.modal:target .modal-window {
  background-color: #fff;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  width: 80%;
  height: 80vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  animation: modalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal.is-full .modal-window.is-S,
.modal:target .modal-window.is-S {
  width: 500px;
  height: fit-content;
  max-height: 35vh;
}

.modal.is-full .modal-window.is-M,
.modal:target .modal-window.is-M {
  width: 600px;
  height: fit-content;
  max-height: 65vh;
}

.modal.is-full .modal-window.is-L,
.modal:target .modal-window.is-L {
  width: 80%;
  height: 80vh;
}

.modal-window-main,
.modal-window-main-L,
.modal-window-main-M,
.modal-window-main-S {
  margin: 15px;
  padding: 5px 5px 5px 0;
}

.modal.is-full .modal-window-main,
.modal:target .modal-window-main {
  height: calc(80vh - 90px);
  overflow-x: scroll;
}

.modal.is-full .modal-window-btn,
.modal:target .modal-window-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  text-align: right;
  padding: 10px;
  z-index: 888;
  box-shadow: none;
  background: none;
}

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

@media screen and (max-width: 768px) {
  .modal.is-full .modal-window,
  .modal:target .modal-window {
    width: calc(100% - 20px) !important;
  }
}

/* フルサイズモーダル（小） */
.modal.is-full .modal-window.is-S,
.modal:target .modal-window.is-S {
  height: 35vh !important;
}

.modal.is-full .modal-window.is-S .modal-window-main,
.modal:target .modal-window.is-S .modal-window-main {
  height: calc(35vh - 90px) !important;
  overflow-x: scroll;
}

.modal.is-full .modal-window.is-S .modal-window-main-L,
.modal:target .modal-window.is-S .modal-window-main-L {
  height: calc(35vh - 135px) !important;
  overflow-x: scroll;
}

.modal.is-full .modal-window.is-S .modal-window-main-M,
.modal:target .modal-window.is-S .modal-window-main-M {
  height: calc(35vh - 180px) !important;
  overflow-x: scroll;
}

/* フルサイズモーダル（中） */
.modal.is-full .modal-window.is-M,
.modal:target .modal-window.is-M {
  height: 65vh !important;
}

.modal.is-full .modal-window.is-M .modal-window-main,
.modal:target .modal-window.is-M .modal-window-main {
  height: calc(65vh - 90px) !important;
  overflow-x: scroll;
}

.modal.is-full .modal-window.is-M .modal-window-main-L,
.modal:target .modal-window.is-M .modal-window-main-L {
  height: calc(65vh - 135px) !important;
  overflow-x: scroll;
}

.modal.is-full .modal-window.is-M .modal-window-main-M,
.modal:target .modal-window.is-M .modal-window-main-M {
  height: calc(65vh - 180px) !important;
  overflow-x: scroll;
}

/* フルサイズモーダル（大） */
.modal.is-full .modal-window.is-L,
.modal:target .modal-window.is-L {
  height: 80vh !important;
  overflow-y: auto;
}

.modal.is-full .modal-window.is-L .modal-window-main,
.modal:target .modal-window.is-L .modal-window-main {
  height: calc(80vh - 95px) !important;
  overflow-x: scroll;
}

.modal.is-full .modal-window.is-L .modal-window-main-L,
.modal:target .modal-window.is-L .modal-window-main-L {
  height: calc(80vh - 135px) !important;
  overflow-x: scroll;
}

.modal.is-full .modal-window.is-L .modal-window-main-M,
.modal:target .modal-window.is-L .modal-window-main-M {
  height: calc(80vh - 180px) !important;
  overflow-x: scroll;
}

.modal-btn-close {
  position: absolute;
  top: -40px;
  right: 0;
  display: block;
  width: 34px;
  height: 34px;
  background: url(/common/image/icn_batsu.png) no-repeat center center;
  background-size: 18px;
  z-index: 777;
  border: none;
  cursor: pointer;
}

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

.modal-ttl {
  font-weight: 600;
  font-size: 20px;
  border-bottom: 1px solid #333;
  padding: 20px 2.5% 14px;
}

/* モーダルヘッダー：タイトル+ボタン横並び */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 24px;
}
.modal-header .modal-ttl {
  border-bottom: none;
  padding: 0;
  font-size: 18px;
}
.modal-header-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  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(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.loading img {
  display: none;
}
.loading::after {
  content: "";
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loadingSpin 0.7s linear infinite;
}
@keyframes loadingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* 汎用ローディングオーバーレイ */
.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 599999999;
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.loading-overlay.is-show {
  display: flex;
}
.loading-overlay-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loadingSpin 0.7s linear infinite;
}
.loading-overlay-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* エラー通知モーダル */
.notice-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 600000000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: noticeModalFadeIn 0.25s ease forwards;
}
@keyframes noticeModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.notice-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.notice-modal-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 32px 28px 24px;
  width: 380px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  animation: noticeModalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes noticeModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.notice-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: #fef2f2;
  border-radius: 50%;
}
.notice-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #1c2842;
  margin-bottom: 10px;
}
.notice-modal-message {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 24px;
  word-break: break-word;
}
.notice-modal-btn {
  display: inline-block;
  background: #2c4f8c;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 48px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.notice-modal-btn:hover {
  background: #1e3a6e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44, 79, 140, 0.25);
}

/* モーダル閉じアニメーション */
.notice-modal.is-closing {
  animation: noticeModalFadeOut 0.2s ease forwards;
}
.notice-modal.is-closing .notice-modal-content {
  animation: noticeModalSlideOut 0.2s ease forwards;
}
@keyframes noticeModalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes noticeModalSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

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

/* ============================================================================
   17. タブ
============================================================================ */
.tab {
  margin: 0 0 15px;
}
.tab-main {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #a5a5a5;
  border-top: none;
}
/* タブボタン */
.tab-select {
  /*margin:0 0 10px;*/
}
.tab-select ul {
  border-bottom: 1px solid #c8c6ce;
  font-size: 0;
}
.tab-select ul li {
  display: inline-block;
  position: relative;
  padding: 0;
}
.tab-select ul li button,
.tab-select ul li a {
  float: left;
  display: block;
  height: 44px;
  padding: 0 20px;
  min-width: 100px;
  background-color: #f1f1f1;
  border: 1px solid #a5a5a5;
  border-bottom: none;
}
.tab-select ul li.is-active button,
.tab-select ul li.is-active a {
  position: relative;
  background-color: #fff;
  color: #10317c;
  font-weight: 600;
}
.tab-select ul li.is-active button:before,
.tab-select ul li.is-active a:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: #fff;
  left: 0;
  bottom: -1px;
}
.tab-select ul li.is-active button:after,
.tab-select ul li.is-active a:after {
  content: "";
  display: block;
  width: calc(100% + 2px);
  height: 3px;
  position: absolute;
  background-color: #10317c;
  left: -1px;
  top: -1px;
}

/* 増減リスト
----------------------------------------------------------------------------- */
.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: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  width: 100%;
  padding: 16px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background: #f8fafc;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.upload:hover {
  border-color: #2c4f8c;
  background: #f0f4ff;
}

/* プレビューエリア */
.upload-preview {
  display: block;
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 100%;
  height: 280px;
  background-color: #f8fafc;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.upload-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.upload-input {
  position: relative;
  width: 100%;
  text-align: center;
}
.upload-input button {
  display: inline-block;
  margin: 0 5px 5px;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 13px;
  box-shadow: none;
  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;
}

/* アップロード横並び */
.upload-row {
  display: flex;
  gap: 20px;
  width: 100%;
}
.upload-col {
  flex: 1;
  min-width: 0;
}
.upload-col > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #444;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
@media screen and (max-width: 768px) {
  .upload-row {
    flex-direction: column;
  }
}

/* ファイル選択ボタン */
.file-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background-color: #2c4f8c;
  color: #fff;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.file-button:hover {
  background-color: #1e3a6e;
  box-shadow: 0 2px 8px rgba(44, 79, 140, 0.25);
}
.file-button input[type="file"] {
  display: none;
}

.file-upload-area {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 2px dashed #ccc;
  padding: 5px 10px;
  text-align: center;
  background: #fafafa;
  border-radius: 4px;
}
.file-upload-area:hover {
  border-color: #10317c;
  background: #f0f4ff;
}
.file-upload-area input[type="file"] {
  display: none;
}
.file-upload-btn {
  display: inline-block;
  padding: 5px 20px;
  background: #10317c;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

/* ============================================================================
   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;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* box */
.login-box {
  position: relative;
  margin: auto;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 48px 40px;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

/* title */
/* ログインロゴ */
.login-box-logo {
  text-align: center;
  margin-bottom: 24px;
}
.login-box-logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.login-box-ttl {
  text-align: center;
  font-size: 18px;
  padding: 0;
  margin-bottom: 32px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #333;
  line-height: 1.6;
}

/* input */
.login-box input {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  width: 100%;
  background-color: #fff;
  margin-bottom: 16px;
  padding: 12px 16px;
  font-size: 14px;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.login-box input:focus {
  outline: none;
  border-color: #2c4f8c;
  box-shadow: 0 0 0 3px rgba(44, 79, 140, 0.12);
}

/* name */
.login-box-name {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #444;
}
.login-box-name i {
  margin-right: 6px;
  color: #2c4f8c;
}

/* button */
.login-box-btn {
  position: relative;
  left: auto;
  bottom: auto;
  right: auto;
  width: auto;
  padding: 0;
  margin-top: 28px;
}
.login-box-btn button {
  width: 100%;
  border: none;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: #2c4f8c;
  font-family: inherit;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(44, 79, 140, 0.25);
}
.login-box-btn button:hover {
  background: #1a3666;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 79, 140, 0.35);
}

.login-box .box-error {
  font-size: 13px !important;
  color: #d8342f;
  background: #fef2f2;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* bg effect */
.login .bg {
  animation: slide 8s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #8b1a1a 50%, #c8252e 50%);
  bottom: 0;
  left: -50%;
  opacity: 0.4;
  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 #ddd;
  border-radius: 4px;
}

.panel-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
}

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

.panel-list-view {
  display: flex;
  gap: 5px;
}

.view-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.view-btn:hover,
.view-btn.active {
  background: #4a90a4;
  border-color: #4a90a4;
  color: #fff;
}

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

/* パネルアイテム */
.panel-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  cursor: pointer;
}

.panel-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.panel-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.panel-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
}

.panel-info {
  padding: 10px 12px;
}

.panel-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #333;
}

.panel-meta {
  margin: 0;
  font-size: 11px;
  color: #666;
  line-height: 1.5;
}

/* リスト表示時 */
.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: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px 15px;
  text-align: center;
}
.stat-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #10317c;
  line-height: 1.2;
}
.stat-value.alert {
  color: #dc3545;
}
.stat-value.success {
  color: #28a745;
}
.stat-label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 10px;
}
.stat-trend.up {
  color: #28a745;
  background: #e8f5e9;
}
.stat-trend.down {
  color: #dc3545;
  background: #fef2f2;
}
.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: 8px;
  margin-left: 2px;
  transition: transform 0.2s;
}
.btn-dropdown.is-open .btn-dropdown-toggle .caret {
  transform: rotate(180deg);
}
.btn-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  min-width: 170px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  list-style: none;
}
.btn-dropdown-menu.align-right {
  left: auto;
  right: 0;
}
.btn-dropdown.is-open .btn-dropdown-menu {
  display: block;
}
.btn-dropdown-menu li {
  display: block;
}
.btn-dropdown-menu li a,
.btn-dropdown-menu li button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  font-size: 12px;
  color: #444;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s ease;
  border-radius: 0;
  margin: 0;
}
.btn-dropdown-menu li a:hover,
.btn-dropdown-menu li button:hover {
  background-color: #f0f4f8;
  color: #2c4f8c;
}
.btn-dropdown-menu li a i,
.btn-dropdown-menu li button i {
  width: 14px;
  text-align: center;
  color: #666;
  font-size: 11px;
}
.btn-dropdown-menu .divider {
  height: 1px;
  margin: 4px 0;
  background-color: #eee;
}

/* ============================================================================
   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 6px 6px;
}

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

/* ============================================================================
   29. ファイルアップロード
============================================================================ */
.upload-pdf {
  padding: 0;
}

.upload-pdf .file-button {
  width: auto;
  padding: 5px 10px;
  line-height: normal;
}

.upload-pdf-input-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.upload-pdf-name {
  font-size: 13px;
  color: #555;
}

/* ファイルアップロード行 */
.upload-file-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0 10px;
  height: 36px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.2s, background-color 0.2s;
}
.upload-file-row.is-changed {
  border-color: #2c4f8c;
  background-color: #f0f4ff;
}
.upload-file-row .btn-normal {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  height: 24px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  line-height: 24px;
  white-space: nowrap;
  flex-shrink: 0;
}
.upload-file-row .btn-file {
  background: #2c4f8c;
  color: #fff;
  border: 1px solid #2c4f8c;
}
.upload-file-row .btn-file:hover {
  background: #1e3a6e;
}
.upload-file-row .btn-secondary {
  background: #fff;
  color: #2c4f8c;
  border: 1px solid #2c4f8c;
}
.upload-file-row .btn-secondary:hover {
  background: #eff6ff;
}
.upload-file-row .btn-del {
  background: #fff;
  color: #dc2626;
  border: 1px solid #dc2626;
}
.upload-file-row .btn-del:hover {
  background: #fef2f2;
}
.upload-file-input {
  width: 0;
  position: absolute;
  opacity: 0;
}
.upload-file-name {
  font-size: 12px;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.btn-pdf-preview,
.btn-img-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px !important;
  justify-content: center;
}

.btn-pdf-preview i,
.btn-img-preview i {
  font-size: 14px;
  margin-right: 0;
}

.btn-pdf-delete.file-button {
  background-color: #6b7280;
  color: #fff;
  border: none;
  height: 100%;
  box-sizing: border-box;
}

.btn-pdf-preview:disabled,
.btn-img-preview:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================================
   30. プレビューモーダル
============================================================================ */
#pdf-preview-modal .modal-window {
  width: 80%;
  height: 90vh;
  border-radius: 10px;
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#pdf-preview-modal .modal-window-head {
  background: #333;
  color: #fff;
  font-weight: bold;
  padding: 12px 20px;
  font-size: 16px;
  height: 50px;
  display: flex;
  align-items: center;
}

#pdf-preview-modal .modal-window-iframe-wrap {
  height: calc(90vh - 50px);
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}

#pdf-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

#pdf-preview-modal .modal-window-close {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 52px;
  height: 52px;
  text-align: center;
  background-color: #ed2e64;
  border: none;
  color: #fff;
  border-radius: 0 5px 0 0;
}

/* staff_list: stale highlight / nationality filter */
.stat-stale { color: #d33; font-weight: bold; }
.nation-filter { display: flex; flex-wrap: wrap; gap: 8px; }

/* document: 書類有無チェックアイコン */
.doc-ok { color: green; }

/* dashboard: サマリカード / アラート強調 */
.dashboard-summary { display: flex; gap: 12px; flex-wrap: wrap; }
.dashboard-card {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.dashboard-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  border-color: #c8cfe0;
  transform: translateY(-1px);
}
.dashboard-card-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.dc-blue   { background: #e8f0fe; color: #3b6fd4; }
.dc-red    { background: #fde2e2; color: #d3433b; }
.dc-orange { background: #fdf0d7; color: #c98a1a; }
.dashboard-card-label { font-size: 12px; color: #6b7280; font-weight: 600; }
.dashboard-card-value { font-size: 26px; font-weight: 800; margin-top: 2px; color: #1e293b; letter-spacing: 0.01em; }
.dashboard-card-value.is-alert { color: #dc2626; }
.dashboard-stale-stat { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:9px; background:#fdecea; color:#c0392b; font-size:11px; font-weight:600; }

/* platform: 求人一覧・詳細 ユーティリティ（inline style 置換） */
.platform-empty { color: #999; }
.id-map iframe { border: 0; }
.id-back-link { display: flex; align-items: center; gap: 8px; }
.id-btn-entry.is-block { display: block; text-align: center; }
.id-action.is-bottom { margin: 24px 0; }

/* entry/join: 応募・申込フォーム ユーティリティ（inline style 置換） */
.entry-complete-icon { color: #4CAF50; }
.entry-input-narrow { width: 200px; }
.entry-back-btn {
  display: inline-block;
  padding: 10px 30px;
  background: #666;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

/* status badge */
/* ステータスチップ（10008 .chip に完全準拠。色は draft/pending/approved/rejected） */
.badge { display:inline-flex; vertical-align:middle; align-items:center; justify-content:center; gap:4px; padding:2px 9px; border-radius:4px; font-size:11px; font-weight:700; line-height:1.5; letter-spacing:0.02em; white-space:nowrap; border:1px solid transparent; background:#f1f5f9; color:#64748b; }
.badge::before { content:"\25CF"; font-size:6px; line-height:1; }
.badge-green  { background:#d1fae5; color:#065f46; }
.badge-yellow { background:#fef3c7; color:#92400e; }
.badge-gray   { background:#f1f5f9; color:#64748b; }
.badge-red    { background:#fee2e2; color:#991b1b; }
/* 未割当など「無し」をプレーンな淡色テキストで（割当済みの氏名と表記を統一） */
.fc-unassign  { color:#9aa3b2; }
/* alert row (要対応) — 行全体を目立つ赤デザインに（左端ラインは無し） */
.tbl-list tbody tr.row-alert > td { background:#fcdcdc !important; color:#9b1c15; }
.tbl-list tbody tr.row-alert > td .fc-unassign { color:#c0392b; }
.tbl-list tbody tr.row-alert:hover > td { background:#f8cccc !important; }
/* ダッシュボード「一覧へ」導線 */
.dashboard-more { display:flex; justify-content:flex-end; margin-top:8px; }
.dashboard-more .btn { text-decoration:none; }
/* 保存・更新のローディング＋完了モーダル（共通） */
.save-loading { position:fixed; inset:0; background:rgba(255,255,255,0.55); display:none; align-items:center; justify-content:center; z-index:3000; }
.save-loading.is-show { display:flex; }
.save-loading-spin i { font-size:44px; color:var(--c-main,#10317c); }
.done-modal { position:fixed; inset:0; background:rgba(0,0,0,0.35); display:none; align-items:center; justify-content:center; z-index:3100; }
.done-modal.is-show { display:flex; }
.done-modal-box { background:#fff; border-radius:12px; padding:26px 34px; min-width:260px; text-align:center; box-shadow:0 14px 44px rgba(0,0,0,0.22); }
.done-icon { font-size:44px; color:#21a05a; }
.done-msg { margin:14px 0 18px; font-size:15px; font-weight:600; color:#2b3340; }
.done-modal-box .btn-save { min-width:90px; }

/* sticky table header (スクロール追従・固定ヘッダー直下に固定) */
.tbl-list thead th { position: sticky; top: var(--header-h, 46px); z-index: 5; }
/* status select: 選択中の色をバッジ色に合わせる */
.status-select option[value="未契約"]   { color:#d3433b; }
.status-select option[value="応募中"]   { color:#9a7400; }
.status-select option[value="打診中"]   { color:#9a7400; }
.status-select option[value="一時停止"] { color:#9a7400; }
.status-select option[value="契約中"]   { color:#1f8a4c; }
.status-select option[value="募集中"]   { color:#1f8a4c; }
.status-select option[value="契約終了"] { color:#5b6472; }
.status-select option[value="募集終了"] { color:#5b6472; }