/* ===========================
   Reset & Base
=========================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* hidden 属性を CSS の display 値より優先して非表示にする */
[hidden] {
  display: none !important;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif;
  background-color: #fafffb;
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ===========================
   Header
=========================== */
.site-header {
  background-color: #4c9e51;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.header-inner {
  display: flex;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
}

/* Logo — flex: 1 で左半分を占有し、nav-list を中央に押し出す */
.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  flex: 1;
  letter-spacing: 0.02em;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.2);
  border-radius: 18px;
}

.logo-text {
  white-space: nowrap;
}

.header-logo-img {
  height: 46px;
  width: auto;
  display: block;
}

.logo-role {
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 4px;
  background: rgba(255,255,255,0.18);
  padding: 2px 8px;
  border-radius: 14px;
}

/* Nav — 中央配置（ロゴとアクションが両側でflex:1を取るため自然に中央へ） */
.header-nav {
  display: contents;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-item .nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.85);
  padding: 6px 9px;
  border-radius: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.nav-item .nav-link:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.nav-item--active .nav-link {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.nav-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-text {
  font-size: 15px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 19px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.badge--red {
  background: #fff;
  color: #c62828;
}

/* 右側アクション — flex: 1 で右半分を占有し、コンテンツを右端へ寄せる */
.nav-actions {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

/* 通知ベル */
.nav-bell {
  position: relative;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.85);
  transition: color 0.15s;
}
.nav-bell:hover  { color: #fff; }
.nav-bell--active { color: #fff; }
.nav-bell .badge {
  position: absolute;
  top: -4px;
  right: -6px;
}

/* アカウント情報グループ */
.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-username {
  color: rgba(255,255,255,0.95);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

/* アカウント情報グループ全体をクリッカブルに見せる */
.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* アイコンのみを丸で囲む */
.header-avatar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
  transition: background 0.15s;
}
.nav-user:hover .header-avatar-icon {
  background: rgba(255,255,255,0.35);
}

/* アカウント名の右に並ぶ arrow */
.chevron-down {
  flex-shrink: 0;
  color: rgba(255,255,255,0.85);
}

/* nav-user をリンクとして使う場合 */
a.nav-user {
  text-decoration: none;
}

a.nav-user--active .header-avatar-icon {
  background: rgba(255,255,255,0.35);
}

.btn-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 34px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.btn-help:hover {
  opacity: 0.85;
}

.btn-help--teal {
  background: #26a69a;
  color: #fff;
}

.btn-help--blue {
  background: #0f569f;
  color: #fff;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  margin-left: auto;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 8px;
  transition: transform 0.2s;
}

/* ===========================
   Main Layout (sidebar + content)
=========================== */
.site-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 24px auto;
  padding: 0 16px;
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* ===== Sidebar ===== */
.sidebar {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 72px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-primary--full {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}

/* Sidebar nav */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.sidebar-nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 !important;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  font-family: inherit;
}

.sidebar-nav-btn:hover {
  color: #4c9e51;
  background: #eef8ef;
  border-left-color: #a5d6a7;
}

.sidebar-nav-btn.tab-btn--active {
  color: #4c9e51;
  background: #eaf6eb;
  border-left-color: #4c9e51;
  font-weight: 700;
}

/* ===== Main Content ===== */
.main-content {
  flex: 1;
  min-width: 0;
  background-color: transparent;
  padding: 20px;
}

/* ===========================
   Page Header
=========================== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* タイトルのテキストのみ中央、アイコン/リンクは左のまま */
.page-header .page-title { flex: 1; text-align: center; }

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #222;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #4c9e51;
  color: #fff;
  padding: 9px 18px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-primary:hover {
  background: #3d8042;
}

.btn-primary--locked {
  background: #bdbdbd;
  color: #fff;
  cursor: pointer;
}

.btn-primary--locked:hover {
  background: #9e9e9e;
}

/* ===========================
   List Controls
=========================== */
.list-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.list-controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list-count {
  font-size: 16px;
  color: #555;
  white-space: nowrap;
}

.list-count strong {
  font-weight: 700;
  color: #333;
}

.per-page-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  background: #fff;
  cursor: pointer;
  color: #333;
}

/* ===========================
   Status Filter Pills
=========================== */
.status-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 34px;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid #ccc;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  --pill-color: #4c9e51;
  --pill-badge-bg: #888;
}

/* タグ別アクセント色 — proj-tag パレットと統一 */
.filter-pill--no-hire        { --pill-color: #c62828; color: #c62828; border-color: #c62828; --pill-badge-bg: #c62828; }
.filter-pill--need-action    { --pill-color: #f57c00; color: #f57c00; border-color: #f57c00; --pill-badge-bg: #f57c00; }
.filter-pill--accepting      { --pill-color: #2e7d32; color: #2e7d32; border-color: #2e7d32; --pill-badge-bg: #2e7d32; }
.filter-pill--contracted     { --pill-color: #0f569f; color: #0f569f; border-color: #0f569f; --pill-badge-bg: #0f569f; }
.filter-pill--need-inspection { --pill-color: #f57c00; color: #f57c00; border-color: #f57c00; --pill-badge-bg: #f57c00; }
.filter-pill--unread-msg     { --pill-color: #6a1b9a; color: #6a1b9a; border-color: #6a1b9a; --pill-badge-bg: #6a1b9a; }

/* ホバー: 各ピル固有の色に変化（一律赤を廃止） */
.filter-pill:hover {
  border-color: var(--pill-color);
  color: var(--pill-color);
  --pill-badge-bg: var(--pill-color);
}

/* アクティブ: 固有色を背景に */
.filter-pill--active {
  background: var(--pill-color);
  border-color: var(--pill-color);
  color: #fff;
  --pill-badge-bg: rgba(0,0,0,0.22);
}

/* アクティブ＋ホバー: 白文字を維持（accent色文字→背景同色で不可視になるのを防ぐ） */
.filter-pill--active:hover {
  color: #fff;
  --pill-badge-bg: rgba(0,0,0,0.22);
}

.filter-pill--red    { --pill-color: #c62828; color: #c62828; border-color: #c62828; --pill-badge-bg: #c62828; }
.filter-pill--orange { --pill-color: #f57c00; color: #f57c00; border-color: #f57c00; --pill-badge-bg: #f57c00; }
.filter-pill--detail { border-color: #888; color: #555; }

.filter-pill .pill-count {
  background: var(--pill-badge-bg, #888);
  color: #fff;
  font-size: 13px;
  padding: 1px 5px;
  border-radius: 20px;
  font-weight: 700;
}

/* ===========================
   Project Card List
=========================== */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-card {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 18px;
  padding: 16px;
  transition: box-shadow 0.15s;
}

.project-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.project-card--alert {
  border-left: 4px solid #c62828;
}

/* Card top row */
.card-top {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
}

.card-thumbnail {
  width: 100px;
  height: 70px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.card-thumbnail-placeholder {
  color: #bbb;
  font-size: 28px;
}

.card-meta {
  flex: 1;
  min-width: 0;
}

.card-dates {
  font-size: 15px;
  color: #666;
  margin-bottom: 6px;
}

.card-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}

.status-badge--green {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.status-badge--blue {
  background: #e3f2fd;
  color: #0f569f;
  border: 1px solid #90caf9;
}

.status-badge--red {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

.status-badge--gray {
  background: #eaf6eb;
  color: #616161;
  border: 1px solid #d6eed7;
}

/* Toggle switch */
.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.toggle-label {
  font-size: 14px;
  color: #555;
}

.toggle-switch {
  position: relative;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #ccc;
  border-radius: 34px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #4c9e51;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Card title */
.card-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card info row */
.card-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.card-info-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  color: #555;
}

.card-info-item svg {
  color: #888;
  flex-shrink: 0;
}

/* Contract stats */
.card-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.proj-name-info .card-stats {
  margin-bottom: 0;
  margin-top: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
}

.stat-label {
  color: #666;
}

.stat-value {
  font-weight: 700;
  color: #333;
}

.stat-value--green { color: #2e7d32; }
.stat-value--orange { color: #e65100; }
.stat-value--red { color: #c62828; }

.stat-sep {
  color: #ddd;
}

/* Card ID & alert */
.card-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.card-id {
  font-size: 14px;
  color: #999;
}

.alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #c62828;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 24px;
}

/* Card action buttons */
.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid;
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
}

.btn-action--outline-red {
  border-color: #4c9e51;
  color: #4c9e51;
  background: #fff;
}

.btn-action--outline-red:hover {
  background: #4c9e51;
  color: #fff;
}

.btn-action--outline-gray {
  border-color: #bbb;
  color: #555;
  background: #fff;
}

.btn-action--outline-gray:hover {
  background: #eaf6eb;
  border-color: #888;
}

.btn-action--outline-blue {
  border-color: #0f569f;
  color: #0f569f;
  background: #fff;
}

.btn-action--outline-blue:hover {
  background: #0f569f;
  color: #fff;
}

/* ===========================
   Empty State
=========================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: #bbb;
  font-size: 17px;
}

/* ===========================
   Pagination
=========================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
}

.pagination-pages {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  background: #fff;
  border: 1px solid #6fb373;
  cursor: pointer;
  transition: all 0.15s;
}

.page-btn:hover {
  border-color: #4c9e51;
  color: #4c9e51;
}

.page-btn--active {
  background: #4c9e51;
  border-color: #4c9e51;
  color: #fff;
}

.page-btn--prev,
.page-btn--next {
  width: auto;
  padding: 0 12px;
}

/* ===========================
   Footer Pagination
=========================== */
.footer-pagination {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 40px 0;
  padding: 14px 0 4px;
  width: 100%;
  justify-content: center;
}

.btn-footer-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 1.5px solid #bbb;
  border-radius: 16px;
  background: #fff;
  color: #444;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.btn-footer-page:hover:not(:disabled) {
  border-color: #4c9e51;
  color: #4c9e51;
}

.btn-footer-page:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.footer-page-info {
  font-size: 16px;
  color: #555;
  white-space: nowrap;
  min-width: 140px;
  text-align: center;
}

/* ===========================
   Footer
=========================== */
.site-footer {
  background: #fff;
  border-top: 1px solid #d6eed7;
  margin-top: auto;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav-list li {
  display: flex;
  align-items: center;
}

.footer-nav-list li:not(:last-child)::after {
  content: '|';
  margin-left: 4px;
  color: #ccc;
}

.footer-nav-list a {
  font-size: 15px;
  color: #555;
  padding: 2px 6px;
  transition: color 0.15s;
}

.footer-nav-list a:hover {
  color: #4c9e51;
}

.footer-copy {
  font-size: 15px;
  color: #999;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 900px) {
  .header-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: #4c9e51;
    padding: 12px 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    gap: 0;
  }

  .header-nav.is-open {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }

  .nav-item {
    width: 100%;
  }

  .nav-item .nav-link {
    width: 100%;
    padding: 10px 8px;
    font-size: 17px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* nav-actions はヘッダー内に常駐（ドロップダウンに入らない） */
  .nav-actions {
    flex: 0 0 auto;
    gap: 12px;
  }

  .header-username {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .site-header {
    position: relative;
  }
}

@media (max-width: 780px) {
  .site-main {
    flex-direction: column;
    gap: 0;
  }

  .sidebar {
    width: 100%;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
    gap: 8px;
    border-right: none;
    border-bottom: 1px solid #DCDCDC;
  }

  .main-content {
    padding: 16px;
  }

  .btn-primary--full {
    width: auto;
  }

  .sidebar-nav {
    flex-direction: row;
    border-top: none;
    border-left: 1px solid #eee;
    padding-top: 0;
    padding-left: 8px;
  }

  .sidebar-nav-btn {
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 14px 4px 0 0;
    padding: 6px 12px;
  }

  .sidebar-nav-btn.tab-btn--active {
    border-left-color: transparent;
    border-bottom-color: #4c9e51;
  }
}

@media (max-width: 600px) {
  .card-thumbnail {
    width: 72px;
    height: 54px;
  }

  .card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-action {
    justify-content: center;
  }

  .list-controls-right {
    flex-wrap: wrap;
  }
}

/* ===========================
   Filter Bar
=========================== */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
}

.filter-bar .status-filters {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.filter-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.filter-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1.5px solid #ccc;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  color: #555;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: inherit;
}

.filter-ctrl-btn:hover {
  border-color: #888;
  color: #333;
}

/* ===========================
   Project Toolbar
=========================== */
.proj-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #d6eed7;
  border-bottom: none;
  border-radius: 16px 6px 0 0;
  gap: 12px;
  margin-top: 10px;
}

.toolbar-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #6fb373;
  border-radius: 16px;
  background: #fafafa;
  cursor: text;
}

.search-input {
  border: none;
  background: none;
  outline: none;
  font-size: 16px;
  color: #333;
  font-family: inherit;
  width: 180px;
}

.search-input::placeholder {
  color: #aaa;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-page-info {
  font-size: 15px;
  color: #666;
  white-space: nowrap;
}

.toolbar-page-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.toolbar-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #6fb373;
  border-radius: 14px;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
}

.toolbar-nav-btn:hover:not(:disabled) {
  border-color: #4c9e51;
  color: #4c9e51;
}

.toolbar-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.view-toggle {
  display: flex;
  border: 1px solid #6fb373;
  border-radius: 14px;
  overflow: hidden;
}

.view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fff;
  color: #888;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.view-btn + .view-btn {
  border-left: 1px solid #6fb373;
}

.view-btn--active {
  background: #f0f0f0;
  color: #333;
}

/* ===========================
   Project Table
=========================== */
.proj-table-wrap {
  background: #fff;
  border: 1px solid #d6eed7;
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow-x: auto;
}

.proj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.proj-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: #888;
  background: #fafafa;
  border-bottom: 1px solid #bfe5c1;
  white-space: nowrap;
}

.proj-table td {
  padding: 12px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}

.proj-table tbody tr:last-child td {
  border-bottom: none;
}

.proj-table tbody tr:hover {
  background: #fafafa;
}

/* 募集停止行は行全体を灰色にして、トグルOFFの状態と揃える */
.proj-table tbody tr.proj-row[data-recruitment="closed"] {
  background: #f0f0f0;
}

.proj-table tbody tr.proj-row[data-recruitment="closed"]:hover {
  background: #e9e9e9;
}

/* demo-wk 見本と同じく案件名列に余白を渡し、統計行の折り返しを防ぐ */
.col-name {
  min-width: 220px;
}

.proj-table .col-date {
  width: 1%;
  white-space: nowrap;
}

.proj-table .col-state {
  width: 1%;
  white-space: nowrap;
}

.proj-table .col-actions {
  width: 1%;
  white-space: nowrap;
}

/* トグルとバッジを横並び（列幅は中身に任せる） */
.proj-row__state-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 28px;
}

.proj-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.proj-thumb {
  width: 52px;
  height: 36px;
  border-radius: 14px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.order-list-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.proj-title--link:hover { color: #4c9e51; text-decoration: underline; }

.proj-title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.proj-sub {
  font-size: 14px;
  color: #888;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-type {
  width: 1%;
  white-space: nowrap;
}

.col-date {
  font-size: 15px;
  color: #555;
  white-space: nowrap;
}

/* Type badge */
.type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  align-self: flex-start;
}

.type-badge--blue   { background: #e3f2fd; color: #0f569f; }
.type-badge--orange { background: #fff3e0; color: #e65100; }
.type-badge--purple { background: #f3e5f5; color: #6a1b9a; }
.type-badge--teal   { background: #e0f2f1; color: #00695c; }
.type-badge--indigo { background: #e8eaf6; color: #283593; }
.type-badge--amber  { background: #fff8e1; color: #f57f17; }
.type-badge--gray   { background: #eaf6eb; color: #616161; }

/* State badge (solid) */
.state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  min-width: 4.5em;
  flex: 0 0 auto;
}

.state-badge--active  { background: #2e7d32; color: #fff; }
.state-badge--stopped { background: #e65100; color: #fff; }
.state-badge--done    { background: #757575; color: #fff; }

/* Row action buttons */
.col-actions {
  width: 200px;
  text-align: center;
  vertical-align: middle;
}

.row-action-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.row-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  justify-content: center;
}

.row-action-btn--applicants {
  background: #fff;
  border: 1px solid #0f569f;
  color: #0f569f;
}
.row-action-btn--applicants:hover {
  background: #0f569f;
  color: #fff;
}

.row-action-btn--procedure {
  background: #fff;
  border: 1px solid #2e7d32;
  color: #2e7d32;
}
.row-action-btn--procedure:hover {
  background: #2e7d32;
  color: #fff;
}

.row-action-btn--renew {
  background: #fff;
  border: 1px solid #d6eed7;
  color: #4c9e51;
}
.row-action-btn--renew:hover:not(:disabled) {
  background: #4c9e51;
  color: #fff;
}
.row-action-btn--renew:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.row-action-btns--draft .order-draft-action-form,
.row-action-btns--draft .row-action-btn {
  width: 100%;
  box-sizing: border-box;
}

.row-action-btn--publish {
  background: #4c9e51;
  border: 1px solid #4c9e51;
  color: #fff;
}
.row-action-btn--publish:hover {
  background: #3d8142;
  border-color: #3d8142;
}

.row-action-btn--delete {
  background: #fff;
  border: 1px solid #9e9e9e;
  color: #616161;
}
.row-action-btn--delete:hover {
  background: #f5f5f5;
  border-color: #757575;
  color: #424242;
}

.order-draft-action-form {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

/* ===========================
   Sort Panel
=========================== */
.sort-ctrl-wrap {
  position: relative;
}

.filter-ctrl-btn--active {
  border-color: #4c9e51;
  color: #4c9e51;
  background: #eaf6eb;
}

.sort-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  min-width: 200px;
  padding: 4px;
  z-index: 200;
  flex-direction: column;
}

.sort-panel.is-open {
  display: flex;
}

.sort-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
  font-family: inherit;
  white-space: nowrap;
}

.sort-option:hover {
  background: #eaf6eb;
}

.sort-option--active {
  color: #4c9e51;
  font-weight: 700;
}

.sort-option--active::before {
  content: '✓';
  margin-right: 6px;
  font-size: 14px;
}

/* ===========================
   Icon Grid View
=========================== */
.proj-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 12px;
}

.proj-icon-card {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 18px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s;
  cursor: default;
  min-width: 0;
}

.proj-icon-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.pic-thumb {
  width: 100%;
  height: 72px;
  border-radius: 14px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  overflow: hidden;
}

.pic-title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pic-id {
  font-size: 13px;
  color: #bbb;
  font-family: monospace;
}

.pic-dates {
  font-size: 14px;
  color: #888;
}

.pic-state {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* デモ同様、契約者｜要検収｜報告中は横並び固定（折り返しなし） */
.proj-icon-card .card-stats {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.proj-icon-card[data-recruitment="closed"] {
  background: #f0f0f0;
}

/* ===========================
   Project List: View/Filter/Sort utility classes
   （JSで動的生成せず、クラス付与で表示制御）
=========================== */
.is-hidden {
  display: none !important;
}

.proj-row.is-filtered-out,
.proj-icon-card.is-filtered-out,
.proj-row.is-paged-out,
.proj-icon-card.is-paged-out {
  display: none;
}

/* 並び替えボタン内のアイコン切り替え */
.sort-btn-icon {
  display: none;
  align-items: center;
}
.sort-btn-icon.is-active {
  display: inline-flex;
}
.filter-ctrl-btn.filter-ctrl-btn--active .sort-btn-label {
  display: none;
}

.pic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid #f0f0f0;
}

.pic-contracts {
  font-size: 14px;
  color: #555;
}

.pic-contracts strong {
  font-weight: 700;
  color: #333;
}

/* ===========================
   Case ID in name cell
=========================== */
.proj-id {
  font-size: 13px;
  color: #bbb;
  margin-top: 2px;
  font-family: monospace;
  letter-spacing: 0.02em;
}

.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.proj-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.proj-tag--no-hire       { color: #c62828; }
.proj-tag--need-action   { color: #f57c00; }
.proj-tag--accepting     { color: #2e7d32; }
.proj-tag--contracted    { color: #0f569f; }
.proj-tag--need-inspection { color: #f57c00; }
.proj-tag--unread-msg    { color: #6a1b9a; }

/* ============================================================
   通知ページ (notification/list.html)
============================================================ */

/* ページ全体 */
.notif-body {
  background: #eaf6eb;
  min-height: 100vh;
  margin: 0;
}

.notif-layout {
  display: flex;
  min-height: 100vh;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ===========================
   サイドバー
=========================== */
.notif-sidebar {
  width: 232px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #d6eed7;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* 役割バナー */
.notif-role-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fafafa;
  border-bottom: 1px solid #bfe5c1;
  font-size: 14px;
  font-weight: 700;
  color: #555;
}

/* ロゴ */
.notif-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #bfe5c1;
  text-decoration: none;
}

.notif-logo-icon {
  width: 34px;
  height: 34px;
  background: #4c9e51;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.02em;
}

/* ナビゲーション */
.notif-nav {
  flex: 1;
  padding: 6px 0;
}

.notif-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: 16px;
  color: #444;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
  border-left: 3px solid transparent;
}

.notif-nav-item:hover {
  background: #eef8ef;
  color: #4c9e51;
}

.notif-nav-item--active {
  color: #4c9e51;
  font-weight: 700;
  background: #eef8ef;
  border-left-color: #4c9e51;
}

.notif-nav-badge {
  margin-left: auto;
  background: #4c9e51;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
}

/* CTAボタン */
.notif-cta-area {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #bfe5c1;
}

.notif-cta-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1.5px solid #ccc;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.12s;
}

.notif-cta-btn:hover {
  background: #eaf6eb;
}

.notif-cta-btn--help {
  color: #e65100;
  border-color: #e65100;
}

.notif-cta-btn--apply {
  color: #4c9e51;
  border-color: #4c9e51;
}

/* ===========================
   メインエリア
=========================== */
.notif-body-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.notif-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 36px;
  width: 100%;
  box-sizing: border-box;
}

/* ページヘッダー */
.notif-page-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d6eed7;
  margin-bottom: 0;
}

.notif-back-link {
  display: flex;
  align-items: center;
  color: #555;
  text-decoration: none;
  padding: 4px;
  border-radius: 14px;
  transition: color 0.12s;
}

.notif-back-link:hover {
  color: #4c9e51;
}

/* タイトルのテキストのみ中央、戻るリンク/アイコンは左のまま */
.notif-page-header .notif-page-title { flex: 1; text-align: center; }

.notif-page-title {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

/* ===========================
   通知リスト
=========================== */
.notif-list {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 18px;
  margin-top: 20px;
  overflow: hidden;
}

.notif-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  gap: 16px;
  transition: background 0.1s;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background: #fafafa;
}

.notif-item-body {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  display: block;
  font-size: 17px;
  color: #0f569f;
  text-decoration: underline;
  margin-bottom: 5px;
  cursor: pointer;
  word-break: break-all;
}

.notif-item-title:hover {
  color: #0f569f;
}

.notif-item-date {
  font-size: 15px;
  color: #999;
}

/* ステータスバッジ */
.notif-status {
  flex-shrink: 0;
  padding: 3px 12px;
  border-radius: 34px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.notif-status--read {
  border: 1px solid #86a688;
  color: #999;
  background: #fff;
}

.notif-status--unread {
  border: 1px solid #d6eed7;
  color: #4c9e51;
  background: #fff;
}

/* ===========================
   ページネーション
=========================== */
.notif-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.notif-total {
  font-size: 16px;
  color: #555;
}

.notif-total strong {
  font-size: 20px;
  font-weight: 700;
  color: #4c9e51;
}

.notif-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.notif-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid #6fb373;
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  color: #444;
  cursor: pointer;
  transition: all 0.12s;
}

.notif-page-btn:hover:not(:disabled) {
  border-color: #4c9e51;
  color: #4c9e51;
}

.notif-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.notif-page-btn--current {
  background: #4c9e51;
  border-color: #4c9e51;
  color: #fff;
  font-weight: 700;
}

.notif-page-btn--nav {
  color: #555;
  font-size: 15px;
}

.notif-page-ellipsis {
  color: #aaa;
  padding: 0 4px;
  font-size: 16px;
}

/* ============================================================
   案件新規作成フォーム (order/create.html)
============================================================ */

.create-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 32px 48px;
  width: 100%;
  box-sizing: border-box;
}

/* ページヘッダー */
.create-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d6eed7;
  gap: 16px;
}

/* タイトルのテキストのみ中央、戻るリンク/アイコンは左のまま */
.create-page-header .create-page-header-left { flex: 1; }
.create-page-header .create-title { flex: 1; text-align: center; }

.create-page-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.create-back-link {
  display: flex;
  align-items: center;
  color: #555;
  text-decoration: none;
  padding: 4px;
  border-radius: 14px;
  transition: color 0.12s;
}

.create-back-link:hover { color: #4c9e51; }

.create-title {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

/* 案件複製完了バナー（デモ copy.html のインライン指定に合わせる） */
.order-copy-banner {
  background: #e6f4ea;
  border: 1px solid #a8d5b5;
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 16px;
  color: #2d6a4f;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.create-type-select {
  padding: 7px 12px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  color: #333;
  font-family: inherit;
  background: #fff;
  min-width: 260px;
}

/* ===========================
   フォーム本体
=========================== */
.proj-form {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 16px;
  overflow: hidden;
}

.form-row {
  display: grid;
  grid-template-columns: 196px 1fr;
  border-bottom: 1px solid #ececec;
}

.form-row:last-child { border-bottom: none; }

.form-label-cell {
  background: #f7f7f7;
  border-right: 1px solid #ececec;
  padding: 14px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.form-label-text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.45;
}

.form-field-cell {
  padding: 12px 16px;
  background: #fff;
}

.form-field-error,
span.form-field-error.field-validation-error {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #c0111f;
  line-height: 1.4;
}

span.form-field-error.field-validation-valid {
  display: none;
}

/* 案件作成: 作業手順は確認ボタンのみ（本体テキストは非表示の送信用） */
.jobform-procedure-actions {
  display: flex;
  align-items: center;
}

.jobform-procedure-hidden-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jobform-procedure-hidden-field textarea {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 必須 / 任意バッジ */
.field-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 12px;
  width: fit-content;
}

.field-badge--required {
  background: #c62828;
  color: #fff;
}

.field-badge--optional {
  background: #888;
  color: #fff;
}

/* ===========================
   フォームコントロール
=========================== */
.form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
  color: #333;
  transition: border-color 0.12s;
}

.form-input:focus {
  outline: none;
  border-color: #4c9e51;
}

.form-input--short  { width: 100px; }
.form-input--xshort { width: 70px; }
.form-input--date   { width: 160px; }
.form-input--time   { width: 120px; }

.form-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.7;
  color: #333;
  transition: border-color 0.12s;
}

.form-textarea:focus {
  outline: none;
  border-color: #4c9e51;
}

.form-select {
  padding: 8px 10px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  color: #333;
  transition: border-color 0.12s;
}

.form-select:focus {
  outline: none;
  border-color: #4c9e51;
}

.form-select--short { min-width: 100px; }
.form-select--wide  { flex: 1; min-width: 200px; }

@media (max-width: 600px) {
  .form-select {
    width: 100%;
    box-sizing: border-box;
  }
}

/* インライン配置 */
.form-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.form-unit {
  font-size: 16px;
  color: #555;
  white-space: nowrap;
}

/* チェックボックス */
.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.form-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #4c9e51;
  cursor: pointer;
  flex-shrink: 0;
}

/* ラジオボタン */
.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.form-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.form-radio-label input[type="radio"] {
  accent-color: #4c9e51;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* セカンダリボタン（案件作成の「作業手順を確認する」等） */
.btn-secondary,
button.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: #fff;
  border: 1.5px solid #4c9e51;
  border-radius: 16px;
  color: #4c9e51;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-secondary:hover,
button.btn-secondary:hover {
  background: #4c9e51;
  color: #fff;
}

/* プレーンテキスト表示 */
.form-plain-text {
  display: inline-block;
  font-size: 17px;
  color: #333;
  padding: 8px 0;
}

.form-plain-text--block {
  display: block;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  background: #f8f8f8;
  border: 1px solid #bfe5c1;
  border-radius: 16px;
  padding: 10px 12px;
  margin: 0;
}

/* ボーダーなし・背景なしの純テキスト表示（作業概要など） */
.form-plain-text--bare {
  display: block;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.8;
  color: #333;
  margin: 0;
  padding: 4px 0;
}

/* ===========================
   請求予定金額サマリー
=========================== */
.billing-summary {
  width: 100%;
  border: 1px solid #d6eed7;
  border-radius: 18px;
  overflow: hidden;
  background: #fafafa;
}

.billing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #bfe5c1;
  gap: 16px;
}

.billing-row:last-child {
  border-bottom: none;
}

@media (max-width: 600px) {
  .billing-row:has(#summaryPeriod) {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.billing-row--total {
  background: #eef8ef;
  border-top: 2px solid #4c9e51;
}

.billing-label {
  font-size: 16px;
  color: #555;
}

.billing-row--total .billing-label {
  font-weight: 700;
  color: #1a1a1a;
}

.billing-value {
  font-size: 17px;
  color: #333;
  white-space: nowrap;
}

.billing-row--total .billing-value {
  font-size: 20px;
  font-weight: 700;
  color: #4c9e51;
}

.form-row--summary-header .form-label-cell {
  padding-top: 14px;
}

/* 期間フィールド */
.form-period {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-period-label {
  font-size: 16px;
  color: #555;
  min-width: 2.5em;
}

/* ファイルinput */
.form-input-file {
  font-size: 16px;
  color: #333;
}

/* 補足テキスト */
.form-note {
  font-size: 14px;
  color: #888;
  margin-top: 6px;
  line-height: 1.6;
}

/* 情報ボックス */
.form-info-box {
  background: #e8f4fd;
  border: 1px solid #90caf9;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 15px;
  color: #333;
  margin-top: 10px;
  line-height: 1.7;
}

.form-info-box--warning {
  background: #fffde7;
  border-color: #ffd54f;
}

/* ファイルアップロード */
.form-upload-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-upload-thumb {
  width: 72px;
  height: 72px;
  border: 1px solid #d6eed7;
  border-radius: 14px;
  background: #eaf6eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px dashed #86a688;
  border-radius: 14px;
  font-size: 16px;
  color: #555;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s;
}

.form-upload-btn:hover {
  border-color: #4c9e51;
  color: #4c9e51;
  background: #eaf6eb;
}

.form-upload-btn--pick:hover,
.form-upload-btn--pick:focus-within,
.form-upload-btn--pick:has(.form-upload-btn__file:hover),
.form-upload-btn--pick:has(.form-upload-btn__file:focus) {
  border-color: #4c9e51;
  color: #4c9e51;
  background: #eaf6eb;
}

.form-upload-btn--pick {
  position: relative;
  overflow: hidden;
}

.form-upload-btn--pick .form-upload-btn__body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.form-upload-btn--pick .form-upload-btn__body * {
  pointer-events: none;
}

/* ネイティブの「ファイルを選択」を隠し、見た目は「画像を追加」だけにする */
.form-upload-btn__file {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0 !important;
  opacity: 0;
  font-size: 0;
  cursor: pointer !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  box-shadow: none !important;
}

.form-upload-btn__file::-webkit-file-upload-button {
  cursor: pointer !important;
  appearance: none;
  -webkit-appearance: none;
}

.form-upload-btn__file::file-selector-button {
  cursor: pointer !important;
  appearance: none;
}

.form-upload-btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.form-upload-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.form-upload-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.form-upload-thumb--filled {
  padding: 0;
  overflow: hidden;
  background: #f0f0f0;
}

.form-upload-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-upload-thumb-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #666;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.form-upload-thumb-remove:hover {
  color: #c62828;
}

.form-upload-file-name {
  margin: 8px 0 0;
  font-size: 14px;
  color: #666;
}

/* コピーボタン */
.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid #ccc;
  border-radius: 14px;
  background: #fff;
  font-size: 16px;
  font-family: inherit;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}

.btn-copy:hover {
  border-color: #0f569f;
  color: #0f569f;
}

/* 報酬サブグリッド */
.form-wage-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-wage-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.form-wage-label {
  font-size: 16px;
  color: #555;
  width: 200px;
  flex-shrink: 0;
}

/* ===========================
   アクションエリア
=========================== */
.create-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #d6eed7;
}

.create-actions-note {
  font-size: 15px;
  color: #888;
  margin-bottom: 16px;
}

.create-btn-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 600px) {
  .create-btn-group {
    flex-direction: column;
    align-items: stretch;
  }
}

.btn-create-submit {
  flex: 1;
  padding: 14px 24px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-create-submit:hover { background: #3d8042; }

.btn-save-confirm {
  padding: 14px 24px;
  background: #fff;
  color: #333;
  border: 1.5px solid #ccc;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.btn-save-confirm:hover {
  border-color: #555;
  color: #111;
}

/* ===========================
   案件新規作成 モーダル
=========================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

.modal-overlay.is-open {
  display: flex;
}

.modal-dialog {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  margin: auto;
}

/* ── モーダルヘッダー ── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #bfe5c1;
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-title {
  font-size: 21px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  white-space: nowrap;
}

.modal-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 16px;
  cursor: pointer;
  color: #555;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.modal-close:hover {
  background: #f0f0f0;
  color: #111;
}

/* ── モーダルボディ（スクロール領域） ── */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.modal-body .proj-form {
  border-radius: 0;
  box-shadow: none;
  border: none;
  padding: 24px 32px;
}

/* ── モーダルフッター ── */
.modal-footer {
  padding: 16px 32px 20px;
  border-top: 1px solid #d6eed7;
  background: #fafafa;
  flex-shrink: 0;
}

/* ===========================
   案件詳細ページ — 全体レイアウト
=========================== */
.body--detail {
  background: #fafffb;
}

.detail-page {
  display: flex;
  min-height: 100vh;
}

/* ===========================
   左サイドバーナビ
=========================== */
.det-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e4e4e4;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* ロゴエリア */
.det-sidebar-logo {
  padding: 16px 16px 12px;
  border-bottom: 1px solid #f2f2f2;
}

.det-logo-role {
  font-size: 13px;
  color: #aaa;
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}

.det-logo-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
}

.det-logo-icon {
  display: flex;
  align-items: center;
}

/* ナビゲーション */
.det-nav {
  flex: 1;
  padding: 8px 0;
}

.det-nav-new-wrap {
  padding: 6px 12px;
}

.det-nav-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.det-nav-new-btn:hover { background: #3d8042; }

.det-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #555;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.det-nav-link:hover {
  background: #f7f7f7;
  color: #1a1a1a;
}

.det-nav-link.is-active {
  background: #eef8ef;
  color: #4c9e51;
  font-weight: 700;
}

.det-nav-text { flex: 1; }

.det-nav-badge {
  background: #4c9e51;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  line-height: 1.6;
}

/* ヘルプボタン */
.det-help-area {
  padding: 12px;
  border-top: 1px solid #f2f2f2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.det-help-btn {
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-align: center;
  transition: opacity 0.15s;
}

.det-help-btn:hover { opacity: 0.85; }
.det-help-btn--orange { background: #f57c00; color: #fff; }
.det-help-btn--red    { background: #c62828; color: #fff; }

/* マスコット */
.det-mascot {
  padding: 12px 12px 16px;
  text-align: center;
}

/* ===========================
   メインコンテンツ領域
=========================== */
.det-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  min-height: calc(100vh - 56px);
}

/* トップバー（メッセージ一覧・詳細）— 正は demo-wk.com/corecara-work */
.det-topbar {
  margin-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center;
}

.det-back-link {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #0f569f;
  font-size: 16px;
  text-decoration: none;
}

.det-back-link:hover { text-decoration: underline; }

.det-topbar-chevron { flex-shrink: 0; }

/* メッセージ詳細：戻るリンクを中央配置（字号は .det-back-link の 16px のまま＝デモ準拠） */
.det-topbar .det-back-link {
  position: relative;
  justify-content: center;
}

.det-topbar .det-back-link .det-topbar-chevron {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 案件ヘッダーカード */
.proj-detail-header {
  background: #fff;
  margin: 16px 20px 0;
  border-radius: 18px 8px 0 0;
  padding: 18px 20px;
  box-shadow: 0 1px 0 #e4e4e4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.proj-detail-meta { flex: 1; min-width: 0; }

.proj-detail-id-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 7px;
}

.proj-detail-id {
  font-size: 15px;
  color: #999;
  background: #eaf6eb;
  padding: 2px 8px;
  border-radius: 14px;
}

.proj-detail-date {
  font-size: 15px;
  color: #666;
}

.proj-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.55;
  margin-bottom: 7px;
}

.proj-detail-location {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  font-size: 15px;
  color: #777;
  line-height: 1.5;
}

.proj-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.proj-detail-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-status-stop {
  padding: 7px 16px;
  background: #fff;
  color: #4c9e51;
  border: 1.5px solid #4c9e51;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.btn-status-stop:hover {
  background: #4c9e51;
  color: #fff;
}

/* タブバー */
.det-tabs-wrap {
  background: #fff;
  margin: 0 20px;
  border-bottom: 2px solid #f0f0f0;
}

.det-tabs {
  display: flex;
  gap: 0;
}

.det-tab-btn {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #999;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.12s, border-color 0.12s;
  font-family: inherit;
  white-space: nowrap;
}

.det-tab-btn:hover { color: #555; }

.det-tab-btn.is-active {
  color: #4c9e51;
  border-bottom-color: #4c9e51;
}

/* タブ本体 */
.det-tab-body {
  background: #fff;
  margin: 0 20px 20px;
  border-radius: 0 0 8px 8px;
  padding: 24px 24px 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* セクション */
.det-section { margin-bottom: 32px; }
.det-section:last-child { margin-bottom: 0; }

.det-section-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  padding-bottom: 8px;
  border-bottom: 2px solid #4c9e51;
  margin-bottom: 14px;
  display: inline-block;
}

/* 募集セクション */
.recruit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.recruit-note { font-size: 16px; color: #555; }

.recruit-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-duplicate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  color: #555;
  border: 1.5px solid #ccc;
  border-radius: 16px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-duplicate:hover { border-color: #888; color: #1a1a1a; }

.btn-copy-url,
.profile-consent-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 5px;
  font-size: 16px;
  color: #0f569f;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
}

.btn-copy-url:hover,
.profile-consent-link:hover { text-decoration: underline; }

.profile-consent-link svg {
  stroke: #0f569f;
}

/* 掲載内容ノート */
.det-content-note {
  font-size: 15px;
  color: #7a5700;
  background: #fffde7;
  border: 1px solid #ffe082;
  border-radius: 14px;
  padding: 9px 13px;
  margin-bottom: 16px;
}

/* 詳細テーブル */
.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-row { border-bottom: 1px solid #f0f0f0; }
.info-row:last-child { border-bottom: none; }

.info-label {
  width: 220px;
  padding: 13px 16px 13px 0;
  vertical-align: top;
  font-size: 15px;
  color: #777;
  font-weight: 600;
  line-height: 1.6;
}

.info-value {
  padding: 13px 0;
  vertical-align: top;
  font-size: 16px;
  color: #333;
  line-height: 1.7;
}

/* 公開範囲バッジ */
.visibility-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 12px;
  line-height: 1.7;
}

.visibility-badge--contractor { background: transparent; color: #4c9e51; }
.visibility-badge--worker     { background: transparent; color: #4c9e51; }
.visibility-badge--all        { background: transparent; color: #4c9e51; }

/* 画像サムネイル */
.info-image-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #eaf6eb;
  border: 1px solid #d6eed7;
  border-radius: 16px;
}

.det-job-image-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.det-job-image-zoom-trigger {
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid #d6eed7;
  border-radius: 16px;
  background: #f5f5f5;
  overflow: hidden;
  cursor: zoom-in;
  line-height: 0;
}

.det-job-image {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.det-job-image-file-name {
  margin: 0;
  font-size: 13px;
  color: #666;
  word-break: break-all;
}

/* 掲載用画像の拡大プレビュー：画面全体オーバーレイ＋中央表示 */
.det-job-image-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.65);
  overflow: auto;
}

.det-job-image-zoom-overlay[hidden] {
  display: none;
}

.det-job-image-zoom-shell {
  position: relative;
  flex: 0 1 auto;
  max-width: min(92vw, 960px);
  max-height: calc(100vh - 56px);
  padding: 14px;
  box-sizing: border-box;
  line-height: 0;
}

.det-job-image-zoom-img {
  display: block;
  max-width: min(88vw, 920px);
  max-height: calc(100vh - 84px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.det-job-image-zoom-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50% !important;
  background: #fff;
  color: #666;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-family: inherit;
}

.det-job-image-zoom-close:hover {
  color: #c62828;
}

/* 編集ボタンエリア */
.det-edit-action {
  display: flex;
  justify-content: center;
  padding: 24px 20px 8px;
}

/* フッターノート */
.det-footer-note {
  font-size: 15px;
  color: #999;
  padding: 0 20px 28px;
  line-height: 1.8;
}

/* ===========================
   メッセージ一覧ページ
=========================== */
.msg-wrap {
  padding: 20px 20px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* フィルターバー */
.msg-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.msg-count-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #555;
}

.msg-count-total { font-weight: 700; }

.msg-per-page {
  padding: 3px 8px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  background: #fff;
}

.msg-filter-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.msg-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1.5px solid #ccc;
  border-radius: 34px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 0.12s;
}

.msg-filter-btn:hover { border-color: #888; color: #333; }

.msg-filter-btn--active {
  background: #4c9e51;
  border-color: #4c9e51;
  color: #fff;
}

.msg-filter-btn--active:hover { background: #3d8042; border-color: #3d8042; }

/* テーブル */
.msg-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid #bfe5c1;
  background: #fff;
}

.msg-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.msg-th {
  padding: 10px 12px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background-color: #4c9e51;
  border-bottom: 1px solid #bfe5c1;
  white-space: nowrap;
}

.msg-th--name    { width: 88px; }
.msg-th--id      { width: 90px; }
.msg-th--period  { width: 100px; }
.msg-th--course  { width: 180px; }
.msg-th--address { width: 160px; }
.msg-th--message { }
.msg-th--action  { width: 76px; }

.msg-row { border-bottom: 1px solid #f0f0f0; transition: background 0.1s; }
.msg-row:last-child { border-bottom: none; }
.msg-row:hover { background: #fafafa; }

/* 未読行：左ボーダー + ごく薄い背景 */
.msg-row--unread { background: #f1faf2; }
.msg-row--unread:hover { background: #eef8ef; }
.msg-row--unread .msg-td:first-child {
  border-left: 3px solid #4c9e51;
}

.msg-td {
  padding: 11px 12px;
  font-size: 15px;
  color: #333;
  vertical-align: top;
}

.msg-td--period { white-space: nowrap; line-height: 1.7; }

.msg-td--course,
.msg-td--address {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-person-link {
  color: #0f569f;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.msg-person-link:hover { text-decoration: underline; }

.msg-proj-id {
  display: block;
  color: #0f569f;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 4px;
}

.msg-proj-id:hover { text-decoration: underline; }

.msg-status-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
}

.msg-status-badge--active { background: #e8f5e9; color: #2e7d32; }
.msg-status-badge--done   { background: #eaf6eb; color: #757575; }

/* メッセージセル */
.msg-td--message { max-width: 240px; }

.msg-text {
  font-size: 15px;
  color: #444;
  line-height: 1.55;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.msg-sender {
  font-size: 14px;
  color: #999;
}

/* 確認するボタン */
.btn-confirm {
  display: inline-block;
  padding: 6px 12px;
  border: 1.5px solid #4c9e51;
  border-radius: 14px;
  color: #4c9e51;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.12s;
}

.btn-confirm:hover { background: #4c9e51; color: #fff; }

/* ページネーション */
.msg-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.msg-page-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.msg-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1.5px solid #ddd;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 0.12s;
}

.msg-page-btn:hover:not(:disabled) { border-color: #999; color: #333; }
.msg-page-btn:disabled { opacity: 0.4; cursor: default; }

.msg-page-num {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ddd;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 0.12s;
}

.msg-page-num:hover { border-color: #4c9e51; color: #4c9e51; }

.msg-page-num.is-active {
  background: #4c9e51;
  border-color: #4c9e51;
  color: #fff;
}

.msg-page-ellipsis { font-size: 16px; color: #aaa; padding: 0 4px; }

/* チャットウィジェット */
.chat-widget {
  position: fixed;
  bottom: 80px;
  left: 12px;
  width: 180px;
  background: #fff;
  border: 1.5px solid #4c9e51;
  border-radius: 24px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(76,158,81,0.15);
  z-index: 200;
}

.chat-widget-close {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 20px;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.chat-widget-close:hover { color: #555; }

.chat-widget-mascot {
  margin-bottom: 6px;
  cursor: pointer;
}

.chat-widget-text {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* ===========================
   報酬支払い情報ページ
=========================== */
/* 報酬支払い情報ページ外枠 */
.pay-page-main {
  flex: 1;
  padding: 28px 36px 40px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* 報酬タイトル＋メッセージ一覧トップバー（デモ: 同一ルール） */
.pay-page-title,
.det-topbar {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d6eed7;
  text-align: center;
}

/* 一覧タイトル用 span（装飾は親 .det-topbar。二重線にしない） */
.det-topbar-title {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
}

.pay-wrap {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pay-import-result {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.pay-import-result--success {
  background: #ecfdf3;
  border-color: #86efac;
  color: #166534;
}

.pay-import-result--error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.pay-import-result-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
}

.pay-import-result-message {
  margin: 0;
  font-size: 14px;
}

.pay-import-result .pay-import-details-list {
  margin: 8px 0 0;
  padding-left: 1.2em;
  font-size: 13px;
}

.pay-import-result--success .pay-import-details-list {
  color: #166534;
}

.pay-import-result--error .pay-import-details-list {
  color: #991b1b;
}

.pay-import-result .pay-import-details-list li + li {
  margin-top: 4px;
}

/* ヘッダー：年選択 + 注記 */
.pay-header {
  margin-bottom: 14px;
}

.pay-year-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pay-year-select {
  padding: 6px 28px 6px 10px;
  border: 1.5px solid #ccc;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  appearance: auto;
}

.pay-year-note {
  font-size: 16px;
  color: #333;
}

/* テーブルコントロールバー */
.pay-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.pay-count-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  color: #555;
}

.pay-count-num {
  font-size: 22px;
  font-weight: 700;
  color: #4c9e51;
}

.pay-per-page {
  padding: 3px 8px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  background: #fff;
}

.pay-csv-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-csv-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  color: #0f569f;
  border: 1.5px solid #0f569f;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-csv-download:hover {
  background: #0f569f;
  color: #fff;
}

.btn-csv-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  color: #2e7d32;
  border: 1.5px solid #2e7d32;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-csv-upload:hover {
  background: #2e7d32;
  color: #fff;
}

.pay-csv-file-input {
  display: none;
}

/* テーブル */
.pay-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid #bfe5c1;
  background: #fff;
}

.pay-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 2200px;
  background-color: #fff;
}

.pay-th {
  padding: 10px 12px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background-color: #4c9e51;
  border-bottom: 1px solid #bfe5c1;
  white-space: nowrap;
}

.pay-th--id       { width: 80px; }
.pay-th--name     { width: 100px; }
.pay-th--address  { }
.pay-th--mynumber { width: 130px; }
.pay-th--category { width: 52px; }
.pay-th--detail   { width: 90px; }
.pay-th--amount   { width: 90px; text-align: right; }
.pay-th--tax      { width: 90px; text-align: right; }

.pay-row {
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.1s;
}

.pay-row:last-child { border-bottom: none; }
.pay-row:hover { background: #fafafa; }

.pay-td {
  padding: 11px 12px;
  font-size: 15px;
  color: #333;
  vertical-align: middle;
}

.pay-td--id {
  font-size: 14px;
  color: #999;
  white-space: nowrap;
}
.pay-td--id a {
  color: #0f569f;
  text-decoration: underline;
}
.pay-td--id a:hover {
  color: #0f569f;
}

.pay-td--address {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}

.pay-td--amount {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.pay-td--mynumber-num {
  font-family: monospace;
  font-size: 15px;
  color: #444;
  letter-spacing: 0.03em;
}

.pay-person-link {
  color: #0f569f;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.pay-person-link:hover { text-decoration: underline; }

.pay-mynumber {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}

.pay-mynumber--unregistered {
  background: #fff3e0;
  color: #e65100;
}

.pay-mynumber--unknown {
  background: #eaf6eb;
  color: #757575;
}

/* ページネーション */
.pay-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px 20px;
  flex-wrap: wrap;
  gap: 8px;
}

/* 絞り込みバー */
.pay-filter-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 14px 16px;
  background: #f9f9f9;
  border: 1px solid #bfe5c1;
  border-radius: 18px;
  margin-bottom: 14px;
}

.pay-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

@media (max-width: 600px) {
  .pay-filter-group {
    flex-direction: column;
    align-items: stretch;
  }
}

.pay-filter-label {
  font-size: 15px;
  font-weight: 700;
  color: #555;
  white-space: nowrap;
}

.pay-filter-select {
  padding: 5px 28px 5px 8px;
  border: 1.5px solid #ccc;
  border-radius: 16px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  appearance: auto;
  /* 長いコース名で intrinsic 幅が伸びると半画面で1行1項目に折れる */
  max-width: 200px;
  box-sizing: border-box;
}

.pay-filter-date {
  padding: 5px 8px;
  border: 1.5px solid #ccc;
  border-radius: 16px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
}

.pay-filter-range-sep {
  font-size: 16px;
  color: #888;
}

.pay-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pay-filter-btn {
  padding: 6px 18px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}

.pay-filter-btn:hover {
  background: #3d8042;
}

.pay-filter-reset {
  padding: 6px 14px;
  background: #fff;
  color: #666;
  border: 1.5px solid #ccc;
  border-radius: 16px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}

.pay-filter-reset:hover {
  border-color: #999;
  color: #333;
}

/* ソート可能ヘッダー */
.pay-th--sortable {
  cursor: pointer;
  user-select: none;
}

.pay-th--sortable:hover {
  background: #eef8ef;
}

.pay-sort-icon {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
  color: #4c9e51;
  opacity: 1;
}

.pay-sort-icon--neutral {
  color: #bbb;
  transform: rotate(0deg);
}

.pay-th--sort-asc .pay-sort-icon {
  transform: rotate(0deg);
}

.pay-th--sort-desc .pay-sort-icon {
  transform: rotate(180deg);
}

/* 新規列のヘッダー幅 */
.pay-th--workdate  { width: 90px; white-space: nowrap; }
.pay-th--course    { min-width: 120px; }
.pay-th--location  { min-width: 160px; }
.pay-th--expense   { min-width: 110px; }

/* ステータス列 */
.pay-th--status { width: 80px; white-space: nowrap; }

.pay-status {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.pay-status--none {
  background: #eaf6eb;
  color: #999;
}

.pay-status--requested {
  background: #fff8e1;
  color: #f57f17;
}

.pay-status--done {
  background: #e8f5e9;
  color: #2e7d32;
}

/* 全銀フォーマット列 */
.pay-th--bank-code    { width: 72px; text-align: center; white-space: nowrap; }
.pay-th--bank-name    { min-width: 100px; }
.pay-th--branch-code  { width: 60px; text-align: center; white-space: nowrap; }
.pay-th--branch-name  { min-width: 90px; }
.pay-th--account-type { width: 60px; text-align: center; white-space: nowrap; }
.pay-th--account-num  { width: 80px; text-align: right; white-space: nowrap; }
.pay-th--account-kana { min-width: 130px; white-space: nowrap; }

.pay-td--bank-code {
  text-align: center;
  font-family: monospace;
  font-size: 15px;
  color: #555;
  letter-spacing: 0.05em;
}

.pay-td--account-num {
  text-align: right;
  font-family: monospace;
  font-size: 15px;
  color: #444;
  letter-spacing: 0.05em;
}

.pay-td--account-kana {
  font-size: 15px;
  color: #333;
  white-space: nowrap;
}

/* 新規列のセルスタイル */
.pay-person-name {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #1a1a1a;
  white-space: nowrap;
}

.pay-worker-id {
  display: block;
  font-size: 13px;
  color: #bbb;
  margin-top: 2px;
}

.pay-td--workdate {
  white-space: nowrap;
  font-size: 15px;
  color: #444;
}

.pay-td--course {
  font-size: 15px;
  color: #444;
}

.pay-td--location {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}

.pay-td--expense {
  font-size: 15px;
  color: #333;
  white-space: nowrap;
}

.pay-td--expense-none {
  color: #bbb;
}

/* ===========================
   報酬支払詳細
=========================== */
.paydet-person-card {
  background: #fff;
  border: 1px solid #bfe5c1;
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.paydet-person-id {
  font-size: 15px;
  color: #999;
  white-space: nowrap;
}

.paydet-person-name {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}

.paydet-person-address {
  font-size: 16px;
  color: #555;
}

.paydet-person-mynumber {
  font-size: 16px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pay-year-back-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  border: 1.5px solid #bbb;
  border-radius: 16px;
  background: #fff;
  color: #444;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.btn-back:hover {
  border-color: #888;
  color: #1a1a1a;
}

/* 詳細テーブル列幅 */
.pay-th--order-id     { width: 70px; }
.pay-th--course       { min-width: 100px; }
.pay-th--job-type     { min-width: 100px; }
.pay-th--order-addr   { }
.pay-th--period       { width: 160px; white-space: nowrap; }
.pay-th--approval     { width: 90px; white-space: nowrap; }
.pay-th--unit-price   { width: 80px; text-align: right; }
.pay-th--qty          { width: 60px; text-align: right; }

/* ===========================
   メッセージ詳細
=========================== */

/* ラッパー */
.msgd-wrap {
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* ==============================
   上部カード: ユーザー情報 + ボタン
============================== */
.msgd-top-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  overflow: hidden;
}

/* ユーザー情報バー */
.msgd-user-bar {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.msgd-user-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}

.msgd-user-link {
  font-size: 18px;
  font-weight: 700;
  color: #0f569f;
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msgd-user-link:hover { text-decoration: underline; }

.msgd-repeat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1.5px solid #e65100;
  color: #e65100;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.msgd-status-badge {
  display: inline-block;
  padding: 3px 13px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}

.msgd-status-badge--applying {
  border: 1.5px solid #2e7d32;
  color: #2e7d32;
  background: transparent;
}

.msgd-status-badge--active {
  border: 1.5px solid #0f569f;
  color: #0f569f;
  background: transparent;
}

/* アクションボタン行 */
.msgd-action-row {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #f0f0f0;
}

.msgd-btn-order {
  padding: 7px 20px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.msgd-btn-order:hover { background: #3d8042; }

.msgd-btn-reject {
  padding: 7px 20px;
  background: #fff;
  color: #555;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.msgd-btn-reject:hover { background: #eaf6eb; color: #1a1a1a; }

/* ==============================
   チャットカード
============================== */
.msgd-thread {
  background: #fff;
  border-radius: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  overflow: hidden;
}

/* メッセージ表示領域 */
.msgd-messages {
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

/* 各メッセージ行 */
.msgd-row {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  min-width: 0;
}

.msgd-row--recv {
  align-self: flex-start;
  align-items: flex-start;
}

.msgd-row--sent {
  align-self: flex-end;
  align-items: flex-end;
}

.msgd-sender-name {
  font-size: 15px;
  color: #888;
  margin-bottom: 6px;
  font-weight: 600;
}

/* アイコン付きメッセージ（自動メッセージ用） */
.msgd-msg-with-icon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

/* システムアイコン（小アバター） */
.msgd-sys-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #bbb;
  margin-top: 1px;
}

.msgd-sys-icon--person {
  background: #f0f0f0;
  border-color: #e0e0e0;
  color: #bbb;
}

/* 自動メッセージ（システム）ボックス */
.msgd-auto-box {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 0 10px 10px 10px;
  padding: 14px 18px;
  font-size: 12.5px;
  color: #444;
  line-height: 1.85;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msgd-auto-link {
  color: #0f569f;
  text-decoration: underline;
}

/* 通常の受信バブル */
.msgd-bubble--recv {
  background: #f0f2f5;
  border-radius: 0 10px 10px 10px;
  padding: 12px 16px;
  font-size: 16px;
  color: #1a1a1a;
  line-height: 1.7;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 送信バブル */
.msgd-bubble--sent {
  background: #4c9e51;
  color: #fff;
  border-radius: 20px 0 10px 10px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.7;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 添付ありは画像／PDF幅に合わせて縮める（横の緑余白を抑える） */
.msgd-bubble--has-attach {
  display: inline-block;
  width: fit-content;
  max-width: min(100%, 316px);
  padding: 8px;
  line-height: 1.4;
}

.msgd-bubble--has-attach .msgd-attach-caption {
  margin: 8px 0 0;
  line-height: 1.5;
}

/* バブル下メタ情報（日時 + 既読バッジ） */
.msgd-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.msgd-time {
  font-size: 14px;
  color: #bbb;
}

.msgd-read-badge {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.msgd-read-badge--read {
  border: 1px solid #86a688;
  color: #999;
  background: transparent;
}

.msgd-read-badge--unread {
  border: 1px solid #d6eed7;
  color: #4c9e51;
  background: transparent;
}

/* ==============================
   メッセージ入力エリア
============================== */
.msgd-compose {
  border-top: 1px solid #f0f0f0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
}

.msgd-compose-input {
  flex: 1;
  border: 1.5px solid #e0e0e0;
  border-radius: 34px;
  padding: 9px 16px;
  font-size: 16px;
  font-family: inherit;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.15s;
  background: #fafafa;
  height: 40px;
}

.msgd-compose-input:focus { border-color: #4c9e51; background: #fff; }

.msgd-compose-attach {
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s;
}

.msgd-compose-attach:hover { color: #888; }

.msgd-attach-link {
  display: block;
  max-width: 100%;
  line-height: 0;
}

.msgd-attach-img {
  display: block;
  max-width: 300px;
  max-height: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.msgd-attach-file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(300px, 100%);
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #f7f7f7;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.msgd-attach-file:hover {
  background: #efefef;
}

.msgd-attach-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: #c62828;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.msgd-attach-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msgd-compose-send {
  padding: 9px 22px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}

.msgd-compose-send:hover:not(:disabled) { background: #3d8042; }

.msgd-compose-send:disabled,
.msgd-compose-send.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ccc;
}

/* ===========================
   絞り込み検索モーダル
=========================== */

/* オーバーレイ */
.search-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.search-modal-overlay.is-open {
  display: flex;
}

/* モーダル本体 */
.search-modal {
  background: #fff;
  border-radius: 20px;
  width: 480px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ヘッダー */
.search-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.search-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.search-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  border-radius: 16px;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}

.search-modal-close:hover {
  background: #eaf6eb;
  color: #333;
}

/* フォーム */
.search-modal-form {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.search-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-form-label {
  width: 100px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.search-form-input {
  flex: 1;
  height: 38px;
  border: 1.5px solid #ddd;
  border-radius: 16px;
  padding: 0 12px;
  font-size: 16px;
  font-family: inherit;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.15s;
  background: #fafafa;
}

.search-form-input:focus {
  border-color: #4c9e51;
  background: #fff;
}

/* チェックボックス行 */
.search-form-row--check {
  padding-left: 0;
}

.search-form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding-left: 112px;
}

.search-form-check {
  width: 16px;
  height: 16px;
  accent-color: #4c9e51;
  cursor: pointer;
  flex-shrink: 0;
}

.search-form-check-text {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  user-select: none;
}

/* フッターボタン */
.search-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 20px;
  border-top: 1px solid #f0f0f0;
}

.search-btn-clear {
  padding: 9px 28px;
  background: #fff;
  color: #555;
  border: 1.5px solid #bbb;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.search-btn-clear:hover {
  border-color: #888;
  color: #1a1a1a;
}

.search-btn-submit {
  padding: 9px 28px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.search-btn-submit:hover { background: #3d8042; }


/* ===========================
   アカウント情報ページ
=========================== */

.acct-wrap {
  padding: 32px 28px 48px;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

.acct-title-area {
  margin-bottom: 24px;
}

.acct-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
}

.acct-divider {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0;
}

.acct-menu-card {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 18px;
  overflow: hidden;
}

.acct-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 17px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.12s;
}

.acct-menu-item:last-child {
  border-bottom: none;
}

.acct-menu-item:hover {
  background: #fafafa;
}

.acct-menu-text {
  font-weight: 500;
}

.acct-menu-chevron {
  color: #bbb;
  flex-shrink: 0;
}

/* ===========================
   決済履歴一覧 (payment/history-list.html)
=========================== */

.phistory-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 36px;
  width: 100%;
}

.phistory-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.phistory-card {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 18px;
  padding: 20px 24px 16px;
}

.phistory-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.phistory-date {
  font-size: 16px;
  color: #555;
}

.btn-dunning {
  padding: 4px 14px;
  border: 1.5px solid #4c9e51;
  border-radius: 14px;
  background: #fff;
  color: #4c9e51;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-dunning:hover {
  background: #4c9e51;
  color: #fff;
}

.phistory-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 14px;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

.phistory-row {
  display: flex;
  gap: 6px;
}

.phistory-label {
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
}

.phistory-link {
  color: #4c9e51;
  text-decoration: underline;
}

.phistory-link:hover {
  opacity: 0.75;
}

.phistory-actions {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.btn-detail-view {
  padding: 10px 48px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.btn-detail-view:hover {
  background: #3d8042;
}

.phistory-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.phistory-total {
  font-size: 16px;
  color: #555;
}

/* ===========================
   退会ページ (account/withdrawal.html)
=========================== */

.withdrawal-section {
  margin-top: 32px;
  padding: 32px 0;
  border-top: 1px solid #d6eed7;
  border-bottom: 1px solid #d6eed7;
}

.withdrawal-desc {
  font-size: 17px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 32px;
}

.btn-withdrawal {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 18px 0;
  background: #c62828;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.btn-withdrawal:hover {
  background: #a02020;
}

/* ===========================
   決済履歴詳細 (payment/history-detail.html)
=========================== */

.phdet-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.phdet-card {
  margin-top: 24px;
  border: 1px solid #6fb373;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.phdet-badge-row {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 4px;
}

.phdet-badge {
  display: inline-block;
  padding: 3px 14px;
  border: 1px solid #555;
  border-radius: 34px;
  font-size: 15px;
  color: #555;
}

/* 詳細テーブル */
.phdet-table {
  margin: 0;
}

.phdet-row {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #bfe5c1;
  padding: 14px 20px;
}

.phdet-row:last-child {
  border-bottom: none;
}

.phdet-label {
  width: 160px;
  min-width: 160px;
  font-size: 16px;
  color: #555;
  padding-top: 2px;
}

.phdet-value {
  flex: 1;
  font-size: 17px;
  color: #333;
}

.phdet-link {
  color: #4c9e51;
  text-decoration: none;
}

.phdet-link:hover {
  text-decoration: underline;
}

/* 請求金額サブ行 */
.phdet-row--billing {
  align-items: flex-start;
}

.phdet-billing {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.phdet-billing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dotted #d6eed7;
  font-size: 16px;
  color: #333;
}

.phdet-billing-row:last-child {
  border-bottom: none;
}

.phdet-billing-name {
  color: #555;
}

.phdet-billing-amount {
  text-align: right;
  min-width: 72px;
}

/* 合計行 */
.phdet-total-row {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0 4px;
  border-top: 1px solid #d6eed7;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

/* ===========================
   絞り込み検索モーダル (order/list.html)
=========================== */

/* ダイアログサイズ上書き */
.fmodal-dialog {
  max-width: 780px;
  width: 90%;
}

/* ボディ：スクロールなし・パディング */
.fmodal-body {
  padding: 8px 32px 24px;
}

/* フォームコンテナ */
.fmodal-form {
  border-top: 1px solid #d6eed7;
}

/* 各行 */
.fmodal-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #efefef;
}

.fmodal-row--last {
  border-bottom: none;
}

/* ラベル */
.fmodal-label {
  width: 130px;
  min-width: 130px;
  font-size: 16px;
  color: #333;
}

/* フィールド */
.fmodal-field {
  flex: 1;
}

/* テキスト入力 */
.fmodal-input {
  width: 100%;
  max-width: 340px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
}

.fmodal-input--id {
  border-color: #4c9e51;
}

.fmodal-input:focus {
  outline: none;
  border-color: #4c9e51;
}

/* チェックボックス行 */
.fmodal-field--checks {
  display: flex;
  align-items: center;
  gap: 20px;
}

.fmodal-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.fmodal-checkbox {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* 期間フィールド */
.fmodal-field--period {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.fmodal-period-sep {
  font-size: 16px;
  color: #555;
  padding: 0 4px;
}

/* セレクト */
.fmodal-select {
  height: 34px;
  padding: 0 6px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
}

.fmodal-select--year  { width: 72px; }
.fmodal-select--month { width: 58px; }
.fmodal-select--day   { width: 58px; }
.fmodal-select--sort  { width: 200px; }

/* アクションボタン行 */
.fmodal-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.btn-fmodal-clear {
  min-width: 120px;
  height: 40px;
  padding: 0 24px;
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
  border-radius: 14px;
  font-size: 17px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-fmodal-clear:hover {
  background: #eaf6eb;
}

.btn-fmodal-submit {
  min-width: 160px;
  height: 40px;
  padding: 0 32px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-fmodal-submit:hover {
  background: #3d8042;
}

/* ===========================
   応募者・契約者一覧 (order/applicants.html)
=========================== */

.applist-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* 案件情報カード */
.applist-proj-card {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 14px;
  padding: 16px 18px;
}

.applist-proj-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.applist-proj-id {
  font-size: 17px;
  font-weight: 700;
  color: #111;
}

/* アウトラインバッジ（進行中/募集停止、契約中 等） */
.applist-ol-badge {
  display: inline-block;
  padding: 3px 14px;
  border: 1px solid #555;
  border-radius: 34px;
  font-size: 15px;
  color: #555;
  white-space: nowrap;
}

.applist-ol-badge--rejected {
  border-color: #999;
  color: #999;
}

.applist-proj-date {
  font-size: 17px;
  color: #333;
  margin-bottom: 4px;
}

.applist-proj-title {
  font-size: 17px;
  color: #333;
  margin-bottom: 4px;
}

.applist-proj-addr {
  font-size: 16px;
  color: #555;
}

/* タブバー */
.applist-tabs-wrap {
  background: #eaf7ec;
  border-radius: 16px;
  padding: 6px;
  overflow-x: auto;
}

.applist-tabs {
  display: flex;
  width: 100%;
  gap: 5px;
}

.applist-tab-btn {
  flex: 1;
  display: block;
  text-align: center;
  padding: 15px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #5a8560;
  text-decoration: none;
  border: none;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s, box-shadow 0.18s;
}

.applist-tab-btn:not(.applist-tab-btn--active):hover {
  color: #4caf50;
  background: #fff;
}

.applist-tab-btn--active {
  color: #fff;
  background: #4caf50;
  box-shadow: 0 3px 10px rgba(76,175,80,0.35);
}

/* 応募者カード */
.applist-card {
  margin-top: 20px;
  padding: 20px 20px 20px;
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 14px;
}

.applist-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.applist-worker-name {
  font-size: 20px;
  font-weight: 700;
  color: #4c9e51;
  text-decoration: none;
}

.applist-worker-name:hover {
  text-decoration: underline;
}

/* 情報リスト */
.applist-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.applist-info-row {
  display: flex;
  align-items: baseline;
  padding: 7px 0;
  font-size: 16px;
  color: #333;
}

.applist-info-row--block {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.applist-info-label {
  min-width: 160px;
  color: #555;
  flex-shrink: 0;
}

.applist-info-value {
  color: #333;
  flex: 1;
}

.applist-addr-note {
  font-size: 14px;
  color: #888;
  margin-left: 8px;
}

.applist-tel-link {
  color: #0f569f;
  text-decoration: none;
}

.applist-tel-link:hover {
  text-decoration: underline;
}

.applist-sub-link {
  color: #0f569f;
  text-decoration: none;
  font-size: 16px;
  margin-left: 8px;
}

.applist-sub-link:hover {
  text-decoration: underline;
}

/* 応募時登録情報ボックス */
.applist-register-box {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #6fb373;
  border-radius: 14px;
  background: #fafafa;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  box-sizing: border-box;
}

.applist-register-box p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* メモ */
.applist-memo-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.applist-memo-area {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #6fb373;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  color: #333;
  resize: vertical;
  box-sizing: border-box;
}

/* メッセージするボタン */
.applist-card-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.btn-applist-order {
  display: inline-block;
  padding: 12px 32px;
  background: #0f569f;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-applist-order:hover {
  background: #0c4782;
}

.btn-applist-order--change {
  background: #f57c00;
}

.btn-applist-order--change:hover {
  background: #c46200;
}

/* 発注確認モーダル */
.order-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.order-modal-overlay[hidden] {
  display: none;
}

.order-modal {
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.order-modal-caution {
  font-size: 16px;
  color: #666;
  line-height: 1.7;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #fff8e1;
  border-left: 3px solid #f57c00;
  border-radius: 8px;
}

.order-modal-question {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin: 0 0 24px;
}

.order-modal-complete {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin: 0 0 16px;
}

.order-modal-message {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  line-height: 1.7;
  text-align: center;
  margin: 0 0 28px;
}

.order-modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-order-modal-yes {
  flex: 1;
  padding: 12px;
  background: #0f569f;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-order-modal-yes:hover {
  background: #0c4782;
}

.btn-order-modal-no {
  flex: 1;
  padding: 12px;
  background: #fff;
  color: #555;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-order-modal-no:hover {
  background: #eaf6eb;
}

.btn-order-modal-continue {
  flex: 1;
  padding: 12px;
  background: #fff;
  color: #555;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-order-modal-continue:hover {
  background: #eaf6eb;
}

.btn-order-modal-stop {
  flex: 1;
  padding: 12px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-order-modal-stop:hover {
  background: #3d8042;
}

.btn-applist-reject {
  display: inline-block;
  padding: 12px 32px;
  background: #757575;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-applist-reject:hover {
  background: #555;
}

.btn-applist-message {
  display: inline-block;
  padding: 12px 32px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-applist-message:hover {
  background: #3d8042;
}

/* 詳細検索モーダル */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.search-modal-overlay[hidden] {
  display: none;
}

.search-modal {
  background: #fff;
  border-radius: 18px;
  width: calc(100% - 32px);
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.search-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #d6eed7;
}

.search-modal-title {
  font-size: 21px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

.search-modal-close {
  background: none;
  border: none;
  font-size: 26px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.search-modal-close:hover {
  color: #333;
}

.search-modal-body {
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-modal-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-modal-label {
  width: 72px;
  flex-shrink: 0;
  font-size: 17px;
  color: #333;
}

.search-modal-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-family: inherit;
  outline: none;
}

.search-modal-input:focus {
  border-color: #0f569f;
}

.search-modal-select {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-family: inherit;
  background: #fff;
  outline: none;
  cursor: pointer;
}

.search-modal-select:focus {
  border-color: #0f569f;
}

.search-modal-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px 24px;
}

.btn-search-modal-clear {
  padding: 10px 36px;
  background: #fff;
  color: #333;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-search-modal-clear:hover {
  background: #eaf6eb;
}

.btn-search-modal-submit {
  padding: 10px 36px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-search-modal-submit:hover {
  background: #3d8042;
}

/* 契約更新ページ */
.renew-body {
  padding: 0 16px 40px;
  max-width: 800px;
  margin: 0 auto;
}

.renew-create-wrap {
  margin: 24px 0 20px;
}

.btn-renew-create {
  display: inline-block;
  padding: 13px 32px;
  background: #0f569f;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-renew-create:hover {
  background: #0c4782;
}

.renew-info-box {
  background: #f5f7fa;
  border: 1px solid #dce3ed;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.8;
  color: #333;
}

.renew-info-box p {
  margin: 0 0 4px;
}

.renew-info-box p:last-child {
  margin-bottom: 0;
}

.renew-info-link {
  color: #0f569f;
  text-decoration: underline;
}

.renew-info-link:hover {
  color: #0f569f;
}

.btn-renew-order {
  display: inline-block;
  padding: 12px 32px;
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-renew-order:hover {
  background: #1b5e20;
}

.btn-renew-order:disabled {
  background: #bdbdbd;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-renew-order:disabled:hover {
  background: #bdbdbd;
}

/* ページネーション */
.applist-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #d6eed7;
  font-size: 16px;
  color: #333;
}

.applist-pager-total {
  font-weight: 700;
  color: #4c9e51;
  font-size: 18px;
}

.applist-pager-range {
  font-weight: 700;
  color: #4c9e51;
}

.applist-pager-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.applist-pager-btn {
  padding: 4px 10px;
  background: none;
  border: none;
  font-size: 16px;
  font-family: inherit;
  color: #555;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.15s;
}

.applist-pager-btn:hover:not(:disabled) {
  background: #f0f0f0;
}

.applist-pager-btn:disabled {
  color: #bbb;
  cursor: default;
}

.applist-pager-btn--active {
  background: #4c9e51;
  color: #fff;
  font-weight: 700;
}

.applist-pager-btn--active:hover {
  background: #3d8042 !important;
}

/* ===========================
   作業手順・報告 (order/procedure.html)
=========================== */

/* コンテンツ本体 */
.proc-body {
  margin-top: 20px;
}

/* コントロールバー */
.proc-ctrl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* 作業手順を確認するボタン */
.btn-proc-outline {
  padding: 8px 16px;
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-proc-outline:hover {
  background: #eaf6eb;
}

/* フィルターボタン群 */
.proc-filter-btns {
  display: flex;
  gap: 8px;
}

.btn-proc-filter {
  padding: 8px 18px;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-proc-filter--active {
  background: #4c9e51;
  color: #fff;
  border: none;
  font-weight: 700;
}

.btn-proc-filter--active:hover {
  background: #3d8042;
}

.btn-proc-filter--outline {
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
}

.btn-proc-filter--outline:hover {
  background: #eaf6eb;
}

/* 作業リスト */
.proc-list {
  border: 1px solid #d6eed7;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

/* ヘッダー行 */
.proc-row--header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: #fafafa;
  border-bottom: 1px solid #d6eed7;
  font-size: 15px;
  color: #777;
  gap: 0;
}

/* データ行 */
.proc-row--data {
  padding: 12px 16px 14px;
}

.proc-cells {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
}

/* カラム幅 */
.proc-col {
  flex-shrink: 0;
  line-height: 1.5;
}

.proc-col--id             { width: 90px; }
.proc-col--worker         { width: 130px; }
.proc-col--complete-date  { width: 160px; }
.proc-col--approved-date  { width: 160px; }
.proc-col--status         { flex: 1; }

/* 契約者リンク */
.proc-worker-link {
  color: #0f569f;
  text-decoration: none;
}

.proc-worker-link:hover {
  text-decoration: underline;
}

/* アクションボタン群 */
.proc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-proc-action {
  padding: 6px 14px;
  background: #fff;
  color: #333;
  border: 1px solid #2e7d32;
  border-radius: 14px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-proc-action:hover {
  background: #eaf6eb;
}

.btn-proc-kenshu {
  padding: 6px 18px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-proc-kenshu:hover {
  background: #3d8042;
}

.proc-kenshu-note {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  flex: 1;
}

.proc-deadline {
  color: #4c9e51;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

/* ===========================
   案件情報カード右側 ステータス操作
   (detail.html 共通 applist-proj-card 内)
=========================== */
.proj-status-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ===========================
   Dashboard (発注者ダッシュボード)
=========================== */
.dashboard-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 28px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-welcome {
  background: #fff;
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d6eed7;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.dashboard-welcome__text h1 {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.dashboard-welcome__text p {
  font-size: 16px;
  color: #666;
}

.dashboard-welcome__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #4c9e51;
  color: #fff;
  padding: 10px 20px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.dashboard-welcome__action:hover {
  background: #3d8042;
}

/* Stats grid */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s;
}

.stat-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

.stat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card__icon--red    { background: #fdecea; color: #c62828; }
.stat-card__icon--orange { background: #fff3e0; color: #f57c00; }
.stat-card__icon--blue   { background: #e3f2fd; color: #0f569f; }
.stat-card__icon--green  { background: #e8f5e9; color: #2e7d32; }

.stat-card__body {
  flex: 1;
  min-width: 0;
}

.stat-card__value {
  font-size: 30px;
  font-weight: 700;
  color: #333;
  line-height: 1.1;
}

.stat-card__unit {
  font-size: 16px;
  font-weight: 400;
  color: #666;
  margin-left: 2px;
}

.stat-card__label {
  font-size: 15px;
  color: #777;
  margin-top: 4px;
}

.stat-card__link {
  font-size: 14px;
  color: #4c9e51;
  font-weight: 600;
  margin-top: 6px;
  display: inline-block;
  text-decoration: underline;
}

/* Dashboard section */
.dashboard-section {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.dashboard-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.dashboard-section__title {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-section__title-icon {
  color: #4c9e51;
}

.dashboard-section__link {
  font-size: 15px;
  color: #4c9e51;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}

.dashboard-section__link:hover {
  text-decoration: underline;
}

/* Quick actions */
.dashboard-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border: 1.5px solid #e8e8e8;
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  text-align: center;
  color: #333;
}

.action-card:hover {
  border-color: #4c9e51;
  box-shadow: 0 2px 8px rgba(76,158,81,0.12);
  background: #f1faf2;
  color: #4c9e51;
}

.action-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eaf6eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4c9e51;
  transition: background 0.15s;
}

.action-card:hover .action-card__icon {
  background: #4c9e51;
  color: #fff;
}

.action-card__label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* Recent orders table */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
}

.dashboard-table th,
.dashboard-table td {
  padding: 10px 16px;
  text-align: left;
  font-size: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.dashboard-table th {
  font-weight: 700;
  color: #666;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #fafafa;
  white-space: nowrap;
}

.dashboard-table td {
  color: #333;
  vertical-align: middle;
}

.dashboard-table tr:last-child td {
  border-bottom: none;
}

.dashboard-table tr:hover td {
  background: #fafafa;
}

.dashboard-table__title-link {
  color: #333;
  font-weight: 600;
}

.dashboard-table__title-link:hover {
  color: #4c9e51;
  text-decoration: underline;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.order-status-badge--accepting  { background: #e8f5e9; color: #2e7d32; }
.order-status-badge--contracted { background: #e3f2fd; color: #0f569f; }
.order-status-badge--inspection { background: #fff3e0; color: #f57c00; }
.order-status-badge--done       { background: #eaf6eb; color: #777; }

/* Alerts panel */
.dashboard-alerts {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
  cursor: pointer;
}

.alert-item:last-child {
  border-bottom: none;
}

.alert-item:hover {
  background: #fafafa;
}

.alert-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.alert-item__dot--red    { background: #c62828; }
.alert-item__dot--orange { background: #f57c00; }
.alert-item__dot--blue   { background: #0f569f; }

.alert-item__body {
  flex: 1;
  min-width: 0;
}

.alert-item__title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.alert-item__sub {
  font-size: 14px;
  color: #888;
}

.alert-item__arrow {
  color: #bbb;
  flex-shrink: 0;
}

/* Two column layout */
.dashboard-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Responsive */
@media (max-width: 900px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .dashboard-stats {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-welcome {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ===========================================================
   テーマ刷新（白背景ヘッダー対応の上書き）
   ※ HTML/JS を変更せず、ヘッダーを赤背景・白文字から
     白背景・濃色文字へ切り替えるための調整
=========================================================== */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e3efe4;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

/* ロゴ・ロール */
.header-logo { color: #2e7d32; }
.logo-icon {
  background: rgba(76,158,81,0.14);
  color: #4c9e51;
}
.logo-role {
  color: #4c9e51;
  background: rgba(76,158,81,0.12);
  font-size: 10px;
  width: 8em;
  white-space: normal;
  text-align: center;
}

/* ナビゲーションリンク */
.nav-item .nav-link { color: #555; }
.nav-item .nav-link:hover {
  background: rgba(76,158,81,0.12);
  color: #4c9e51;
}
.nav-item--active .nav-link {
  background: rgba(76,158,81,0.16);
  color: #4c9e51;
}

/* 通知ベル */
.nav-bell { color: #666; }
.nav-bell:hover  { color: #4c9e51; }
.nav-bell--active { color: #4c9e51; }

/* アカウント情報 */
.header-username { color: #333; }
.header-avatar-icon {
  background: rgba(76,158,81,0.16);
  color: #4c9e51;
}
.nav-user:hover .header-avatar-icon { background: rgba(76,158,81,0.28); }
a.nav-user--active .header-avatar-icon { background: rgba(76,158,81,0.28); }
.chevron-down { color: #888; }

/* ハンバーガー（モバイル） */
.hamburger span { background: #4c9e51; }

/* 通知バッジ：アラート表示のため赤地・白文字に（白背景ヘッダー上でも視認可） */
.badge--red {
  background: #c62828;
  color: #fff;
}

/* =========================================================
   レイアウト刷新（カード型・余白広め）
   ※ HTML/JS は変更せず、主要コンテナ・カード・余白のみ調整
========================================================= */
/* ヘッダー: ややゆとりを持たせ、やわらかい影に */
.header-inner { height: 64px; }
.site-header {
  border-bottom: 1px solid #e5ffe6;
  box-shadow: 0 2px 16px rgba(36,80,40,0.06);
}

/* メインレイアウト: 全体の余白とサイド〜本文のギャップを拡大 */
.site-main {
  max-width: 1280px;
  margin: 32px auto 56px;
  padding: 0 24px;
  gap: 28px;
}

/* サイドバー: 白カード化（本文と分離） */
.sidebar {
  background: #fff;
  border: 1px solid #e5ffe6;
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(36,80,40,0.06);
  padding: 18px 14px;
  top: 88px;
}

/* メインコンテンツ: 淡いトレイ + 余白広め（内側の白カードを際立たせる） */
.main-content {
  background-color: #edf5ee;
  border-radius: 20px;
  padding: 26px 28px;
}

/* ページ見出し: 余白と区切りでセクション感を強調 */
.page-header {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #dfeae0;
}
.list-controls { margin-bottom: 18px; }

/* カード類: やわらかい影・ホバーで浮き上がる */
.project-card {
  border-color: #e5ffe6;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 3px 12px rgba(36,80,40,0.06);
  transition: box-shadow 0.18s, transform 0.18s;
}
.project-card:hover {
  box-shadow: 0 10px 26px rgba(36,80,40,0.13);
  transform: translateY(-3px);
}
.stat-card {
  border-color: #e5ffe6;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 3px 12px rgba(36,80,40,0.06);
  transition: box-shadow 0.18s, transform 0.18s;
}
.stat-card:hover {
  box-shadow: 0 10px 26px rgba(36,80,40,0.13);
  transform: translateY(-3px);
}

/* テーブルを独立した白カードに */
.proj-table-wrap {
  border: 1px solid #e5ffe6;
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(36,80,40,0.06);
  overflow: hidden;
}
.pay-table-wrap {
  border-color: #e5ffe6;
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(36,80,40,0.06);
}

/* 詳細ページ: サイドバーの硬い境界線をやわらかい影に */
.det-sidebar {
  border-right: none;
  box-shadow: 1px 0 14px rgba(36,80,40,0.05);
}

/* =========================================================
   共通デザインシステム層（デザイントークン + 横断統一ルール）
   ※ HTML/JS は変更せず、別要素のセレクタをまとめて同一スタイルを付与し、
     共通のスタイルガイドから生成されたような一貫性を持たせる
   ※ 受注者ページは worker.css が後読みのため、両CSSの末尾に同一内容を配置
========================================================= */
:root {
  --ds-primary: #4c9e51;
  --ds-primary-dark: #3d8042;
  --ds-danger: #c62828;
  --ds-border: #e5ffe6;
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 20px;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 2px 10px rgba(36,80,40,0.06);
  --ds-shadow-md: 0 6px 20px rgba(36,80,40,0.10);
  --ds-ease: 0.18s ease;
}

/* ボタン: 角丸・トランジション・フォントを全ボタンで統一 */
[class*="btn"],
button[class] {
  border-radius: var(--ds-radius-md);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--ds-ease), color var(--ds-ease),
              border-color var(--ds-ease), box-shadow var(--ds-ease),
              transform var(--ds-ease), opacity var(--ds-ease);
}

/* フォーム部品: 角丸・フォント・フォーカスリングを統一 */
input, select, textarea,
input[class], select[class], textarea[class] {
  border-radius: var(--ds-radius-sm);
  font-family: inherit;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus,
input[class]:focus, select[class]:focus, textarea[class]:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(76,158,81,0.15);
}

/* バッジ/ピル: ピル形状・太字で統一 */
[class*="badge"],
[class*="pill"] {
  border-radius: var(--ds-radius-pill);
  font-weight: 700;
}

/* カード/サーフェス: 角丸を共通トークンで統一 */
.sidebar, .main-content,
.project-card, .stat-card,
.proj-table-wrap, .pay-table-wrap,
.worker-card, .wdetail-inner, .wmylist-card,
.wlist-item, .wsearch-list-item {
  border-radius: var(--ds-radius-lg);
}

/* テーブルヘッダー: 全テーブル共通の緑ヘッダーに統一 */
.proj-table th, .dashboard-table th, .msg-th, .pay-th,
.wmsg-th, .wreward-th, .confirm-th,
.wth-table th, .wprocedure-modal-table th,
.wconfirm-table th, .wreport-table th {
  background-color: var(--ds-primary);
  color: #fff;
  font-weight: 700;
  border-bottom: none;
}

/* =========================================================
   余白設計の統一（コンテナ所有のスタックスペーシング）
   ※ 子要素の margin-top に依存していたため、直後にくる要素次第で
     下余白が変わっていた問題を解消する。
     コンテナ側が「要素間の余白」を所有し、子の組み合わせに依存しない。
========================================================= */
:root { --ds-stack-gap: 20px; }

/* applist系ページ（案件詳細/応募者・契約者/作業手順/契約更新）の本文スタック */
.applist-main { padding-top: 24px; }
.applist-main > * { margin-top: 0; margin-bottom: 0; }
.applist-main > * + * { margin-top: var(--ds-stack-gap); }

/* --- 余白設計の全体展開（発注者）: コンテナ所有のスタックスペーシング ---
   ※ block の縦積みコンテナに限定（flexの .det-main は対象外） */
.main-content > * { margin-top: 0; margin-bottom: 0; }
.main-content > * + * { margin-top: var(--ds-stack-gap); }

.det-tab-body > * { margin-top: 0; margin-bottom: 0; }
.det-tab-body > * + * { margin-top: var(--ds-stack-gap); }

/* =========================================================
   コンテナ幅の統一（PC閲覧時 約1200px）
   ※ 主要なページ本文/ヘッダー/フッターの最大幅を単一トークンに統一。
     max-width のためビューポートが狭い端末では自動的に縮小（モバイル無害）。
     モーダル(.modal-dialog/.fmodal-dialog)は対象外。
========================================================= */
:root { --ds-container: 1200px; }

.header-inner,
.site-main,
.footer-inner,
.notif-main,
.create-wrap,
.pay-page-main,
.acct-wrap,
.phistory-main,
.phdet-main,
.applist-main,
.renew-body,
.dashboard-main {
  max-width: var(--ds-container);
  width: 100%;
}

/* コンテナ幅統一の追補: 全幅だったメッセージ系レイアウト(.det-main)を中央1200pxに */
.det-main {
  max-width: var(--ds-container);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   1カラムページのコンテンツ幅を統一
   ※ コンテナ最大幅は1200pxのまま、横ガターを24pxに揃え、
     ページごとに20〜36pxと異なっていた実効コンテンツ幅を均一化(約1152px)。
     renewのapplist-main+renew-body二重ネストによる過剰な縮小も解消。
========================================================= */
.applist-main,
.dashboard-main,
.notif-main,
.acct-wrap,
.phistory-main,
.phdet-main,
.create-wrap,
.msg-wrap,
.msgd-wrap {
  padding-left: 24px;
  padding-right: 24px;
}
.renew-body {
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
   レスポンシブ調整（スマホ ~768px）
   ※ レイアウトは大きく変えず、横長要素をカラム落ち/縦積みさせる単純設計。
     既存メディアクエリ・再設計上書きより後に配置し確実に最終適用。
========================================================= */
@media (max-width: 768px) {
  .header-inner { padding: 0 12px; }

  /* メイン: サイドバー+本文を縦積み */
  .site-main {
    flex-direction: column;
    gap: 16px;
    margin: 16px auto;
    padding: 0 12px;
  }
  .sidebar { width: 100%; position: static; top: auto; }
  .main-content { padding: 16px; }

  /* フォーム: ラベルと入力を縦積み */
  .form-row { grid-template-columns: 1fr; }
  .form-label-cell { border-right: none; }

  /* ダッシュボードの多列グリッドを1列に */
  .dashboard-stats,
  .dashboard-actions { grid-template-columns: 1fr; }

  /* ツールバー/見出し/タブは折り返し */
  .page-header,
  .list-controls,
  .list-controls-right,
  .det-topbar,
  .det-tabs { flex-wrap: wrap; }

  /* 詳細タブ本文の余白を縮小 */
  .det-tab-body { margin: 0 0 16px; padding: 16px; }

  /* アクション行は縦並び */
  .card-actions { flex-direction: column; align-items: stretch; }

  /* 1カラムページの左右ガターを縮小 */
  .applist-main,
  .dashboard-main,
  .notif-main,
  .acct-wrap,
  .phistory-main,
  .phdet-main,
  .create-wrap,
  .pay-page-main,
  .msg-wrap,
  .msgd-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* =========================================================
   発注者ヘッダー: スマホで受注者側と同一のオーバーレイ挙動に
   （.nav-actions を <nav> 内へ移したHTML構造に対応。ナビ+アカウントを
     白いドロップダウンとしてオーバーレイ表示し、バーはロゴ+ハンバーガーのみ）
   ※ 既存の発注者モバイル指定(緑)を上書きするため末尾に配置。
========================================================= */
@media (max-width: 900px) {
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }
  /* ナビ(+アカウント)を白いオーバーレイのドロップダウンに */
  .header-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 6px 14px rgba(36,80,40,0.12);
    border-top: 1px solid #e5ffe6;
    padding: 8px 16px;
    z-index: 200;
  }
  .header-nav.is-open { display: flex; }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .nav-item { width: 100%; }
  .nav-item .nav-link {
    width: 100%;
    padding: 12px 8px;
    border-radius: 0;
    border-bottom: 1px solid #eef2ee;
    color: #555;
  }
  .nav-item .nav-link:hover { background: rgba(76,158,81,0.08); color: #4c9e51; }
  .nav-item--active .nav-link { color: #4c9e51; background: rgba(76,158,81,0.12); }

  /* アカウント: スマホのハンバーガーメニュー内では非表示 */
  .nav-actions {
    display: none;
  }

  .hamburger { display: flex; }
  .site-header {
    position: relative;
    overflow: visible;
  }
}

/* =========================================================
   案件一覧フィルターピル: デモ準拠（狭い幅は横スクロール）
   ※ flex 子が縮むと overflow-x が効かず文字が潰れるため、
     ピルは縮小禁止・コンテナは幅制約＋横スクロールにする
========================================================= */
.filter-bar {
  min-width: 0;
  width: 100%;
}

.filter-bar .status-filters {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

button.filter-pill,
.filter-pill {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: var(--ds-radius-pill, 999px);
}

/* No.26 発注者・案件一覧（スマホ） */
@media (max-width: 600px) {
  .site-main { align-items: stretch; }
  .main-content { width: 100%; }

  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar > * { min-width: 0; max-width: 100%; }
  .status-filters { overflow-x: auto; }
  .filter-bar-right { flex-wrap: wrap; justify-content: flex-end; }

  .proj-toolbar {
    flex-wrap: wrap;
    border-bottom: 1px solid #d6eed7;
    border-radius: 14px;
    margin-bottom: 12px;
  }
  .toolbar-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }

  .proj-table-wrap {
    overflow-x: visible;
    border: none;
    background: transparent;
    border-radius: 0;
  }
  .proj-table:not(.is-hidden) { display: block; }
  .proj-table thead { display: none; }
  .proj-table tbody { display: block; }
  .proj-table tr.proj-row {
    display: block;
    background: #fff;
    border: 1px solid #d6eed7;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
  }
  .proj-table td {
    display: block;
    width: 100% !important;
    white-space: normal !important;
    padding: 6px 0;
    border-bottom: none;
  }
  .proj-table tbody tr:hover { background: #fff; }

  .col-name { min-width: 0; }
  .col-date { white-space: normal; }

  .col-actions { width: auto; text-align: left; }
  .row-action-btns { gap: 8px; }
  .row-action-btn { width: 100%; justify-content: center; }
}