/* ===========================
   受注者画面 共通スタイル (worker.css)
=========================== */

/* ボディ */
.worker-body {
  background: #fafffb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===========================
   ヘッダー（受注者用・シンプル）
=========================== */
.worker-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #bfe5c1;
}

.worker-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
}

/* ロゴ */
.worker-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.worker-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid #4c9e51;
}

.worker-logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.02em;
}

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

/* ログインボタン（右上） */
.worker-header-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 14px;
  transition: color 0.15s;
}

.worker-header-login:hover {
  color: #4c9e51;
}

.worker-header-login svg {
  flex-shrink: 0;
}

/* ===========================
   メインコンテンツ
=========================== */
.worker-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 40px 24px 60px;
}

.worker-card {
  width: 100%;
  max-width: 760px;
}

/* ページタイトル */
.worker-page-title {
  font-size: 26px;
  font-weight: 700;
  color: #222;
  margin: 0 0 14px;
  line-height: 1.4;
  text-align: center;
}

.worker-title-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 32px;
}

/* リード文 */
.worker-lead {
  font-size: 17px;
  color: #333;
  margin: 0 0 24px;
  line-height: 1.7;
}

/* ===========================
   フォーム
=========================== */
.worker-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.worker-form-group {
  margin-bottom: 24px;
}

.worker-label {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}

.worker-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-family: inherit;
  color: #333;
  background: #fff;
  transition: border-color 0.15s;
  outline: none;
}

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

.worker-input:focus {
  border-color: #4c9e51;
}

/* 次へボタン */
.btn-worker-primary {
  display: block;
  width: 100%;
  padding: 14px 0;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 20px;
}

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

/* ログインリンク */
.worker-login-link-wrap {
  text-align: center;
  margin-bottom: 32px;
}

.worker-login-link {
  font-size: 16px;
  color: #333;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.worker-login-link:hover {
  color: #4c9e51;
}

/* ===========================
   注意書きボックス
=========================== */
/* .worker-notice は .complete-notice-box と共通化（下部でグループ定義） */

/* ===========================
   ヘッダー左側レイアウト
=========================== */
.worker-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ===========================
   エリア選択ドロップダウン
=========================== */
.worker-area-select {
  position: relative;
  display: flex;
  align-items: center;
}

.worker-area-dropdown {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 32px 6px 12px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  color: #333;
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.worker-area-dropdown:focus {
  border-color: #4c9e51;
}

.worker-area-chevron {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: #555;
}

/* ===========================
   ログインフォーム専用
=========================== */

/* フィールド間の区切り線 */
.worker-field-rule {
  border: none;
  border-top: 1px solid #d6eed7;
  margin: 4px 0 24px;
}

/* ログインフォーム: フィールド下余白調整 */
.worker-form--login .worker-form-group {
  margin-bottom: 24px;
}

/* ログイン／会員登録エラー（デモ login-error.html のインライン指定） */
.login-error-banner,
.register-error-banner,
.wpr-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff5f5;
  border: 1px solid #f5c6c6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #c0392b;
  font-size: 14px;
  line-height: 1.5;
}

.login-error-banner svg,
.register-error-banner svg,
.wpr-error-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.worker-input--error {
  border-color: #e8192c !important;
  background: #fff8f8;
}

.worker-input--error:focus {
  outline-color: #e8192c;
  box-shadow: 0 0 0 3px rgba(232, 25, 44, 0.15);
}

/* ログインボタン（中央寄せ・幅固定） */
.worker-btn-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.btn-worker-login {
  display: inline-block;
  width: 280px;
  padding: 14px 0;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}

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

/* ログアウト完了メッセージ */
.worker-logout-message {
  text-align: center;
  margin: 24px 0 32px;
}

.worker-logout-text {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.worker-logout-subtext {
  font-size: 17px;
  color: #666;
}

/* テキストリンク群（中央寄せ・縦並び） */
.worker-form-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.worker-text-link {
  font-size: 16px;
  color: #333;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.worker-text-link:hover {
  color: #4c9e51;
}

/* ===========================
   基本情報入力 (worker/profile.html)
=========================== */

.worker-main--profile {
  padding: 32px 24px 60px;
  align-items: flex-start;
  justify-content: center;
}

.worker-card--wide {
  max-width: 900px;
}

/* リード文 */
.profile-lead {
  font-size: 17px;
  color: #333;
  line-height: 1.8;
  margin: 0 0 24px;
}

/* フォーム本体 */
.profile-form {
  border-top: 1px solid #d6eed7;
}

/* 各行 */
.profile-row {
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #d6eed7;
  gap: 24px;
}

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

/* ラベルセル */
.profile-label-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 260px;
  flex-shrink: 0;
  padding-top: 2px;
}

.profile-label {
  font-size: 17px;
  color: #222;
  font-weight: 400;
}

/* 必須・任意バッジ */
.badge-required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: #c62828;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

.badge-optional {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: #fff;
  color: #888;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #4c9e51;
  border-radius: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 入力セル */
.profile-input-cell {
  flex: 1;
  min-width: 0;
}

/* 静的テキスト（メールアドレス表示） */
.profile-static-value {
  font-size: 17px;
  color: #333;
  line-height: 2;
}

/* テキスト入力 */
.profile-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-family: inherit;
  color: #333;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.profile-input::placeholder { color: #aaa; }
.profile-input:focus { border-color: #4c9e51; }

/* 氏名ペア */
.profile-name-inputs {
  display: flex;
  gap: 8px;
}

.profile-input--name { flex: 1; width: auto; min-width: 0; }
.profile-input--phone { width: 100%; }
.profile-input--city { width: 100%; }
.profile-input--password { width: 100%; }

/* ヒントテキスト */
.profile-hint {
  font-size: 15px;
  color: #888;
  margin: 6px 0 0;
}

/* 基本情報入力（profile-error.html）: バリデーションエラー */
.profile-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff5f5;
  border: 1px solid #f5c6c6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
  color: #c0392b;
  font-size: 14px;
  line-height: 1.5;
}

.profile-error-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.profile-input--error {
  border-color: #e8192c !important;
  background: #fff8f8 !important;
}

.profile-input--error:focus {
  outline-color: #e8192c;
  box-shadow: 0 0 0 3px rgba(232, 25, 44, 0.15);
}

.profile-select--error {
  border-color: #e8192c !important;
  background-color: #fff8f8 !important;
}

.profile-error-msg {
  font-size: 12px;
  color: #c0111f;
  margin: 6px 0 0;
}

/* =========================================================
   フォームバリデーションエラー（モック *-error.html 由来）
   ※ デモ CSS 取り込みで欠落していたスタイルを復元
========================================================= */

/* Bootstrap 未読込ページ向け（Login / Register / 案件作成 等） */
.text-danger {
  color: #c62828;
}

.text-danger ul {
  margin: 0;
  padding-left: 1.2em;
}

.create-validation-summary {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* お問い合わせ（contact-error.html） */
.wcontact-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff5f5;
  border: 1px solid #f5c6c6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
  color: #c0392b;
  font-size: 14px;
  line-height: 1.5;
}

.wcontact-error-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.wcontact-error-msg {
  font-size: 12px;
  color: #c62828;
  margin: 6px 0 0;
}

.wcontact-checkbox--error + span {
  color: #c62828;
}

/* アカウント設定（account-*-error.html） */
.wbasic-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff5f5;
  border: 1px solid #f5c6c6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
  color: #c0392b;
  font-size: 14px;
  line-height: 1.5;
}

.wbasic-error-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.wbasic-error-msg {
  display: block;
  font-size: 12px;
  color: #c62828;
  margin-top: 6px;
}

/* ラジオボタン */
.profile-radio-group {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 4px;
}

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

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

/* 生年月日 */
.profile-age-notice,
.wbasic-birth-note-bg {
  background: #f0f0f0;
  color: #555;
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 10px;
}

.profile-birthday-selects {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 28px 9px 12px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-family: inherit;
  color: #333;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.profile-select:focus { border-color: #4c9e51; }

.profile-select--year  { flex: 1; width: auto; min-width: 0; }
.profile-select--month { flex: 1; width: auto; min-width: 0; }
.profile-select--day   { flex: 1; width: auto; min-width: 0; }
.profile-select--pref  { width: 100%; }

/* 郵便番号 + 住所入力ボタン */
.profile-zip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-input--zip { flex: 1; width: auto; min-width: 0; }

.btn-zip-search {
  padding: 9px 14px;
  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-zip-search:hover { background: #3d8042; }

/* 同意テキスト */
.profile-consent {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  margin: 24px 0 12px;
}

.profile-consent-checks {
  margin: 0 0 20px;
}

.profile-consent-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin: 10px 0 0;
  cursor: pointer;
}

.profile-consent-checkbox {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* .profile-consent-link は .btn-copy-url と共通化（style.css 側で定義） */

/* 送信ボタン */
.btn-worker-submit {
  width: 280px;
  padding: 14px 0;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

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

/* ===========================
   入力確認画面 (worker/profile-confirm.html)
=========================== */

/* 確認テーブル */
.confirm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  margin-bottom: 16px;
  border-top: 1px solid #d6eed7;
  border-bottom: 1px solid #d6eed7;
  border-radius: 14px;
  overflow: hidden;
}

.confirm-row {
  border-bottom: 1px solid #d6eed7;
}

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

.confirm-th {
  width: 40%;
  padding: 24px 28px;
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #d6eed7;
}

.confirm-td {
  padding: 24px 28px;
  color: #333;
  vertical-align: middle;
  border-bottom: 1px solid #d6eed7;
}

@media (max-width: 600px) {
  /* 表の上下ボーダーを削除 */
  .confirm-table {
    border-top: none;
    border-bottom: none;
  }

  /* 行のボーダーを削除 */
  .confirm-table .confirm-row {
    border-bottom: none;
  }

  /* セルを縦積みし、行ごとに区切り線は1本だけ（値セルの下）に統一
     ※詳細度を上げて後続の非メディア .confirm-th ルールに勝たせる */
  .confirm-table .confirm-row { display: block; }
  .confirm-table .confirm-th,
  .confirm-table .confirm-td {
    display: block;
    width: 100%;
    white-space: normal;
    border-bottom: none;
  }
  .confirm-table .confirm-th {
    padding: 16px 20px 0;
  }
  .confirm-table .confirm-td {
    padding: 4px 20px 16px;
    border-bottom: 1px solid #d6eed7;
  }
  .confirm-table .confirm-row:last-child .confirm-td {
    border-bottom: none;
  }
}

/* ボタン群（戻る＋登録する） */
.confirm-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 32px;
}

.btn-confirm-back {
  font-size: 17px;
  color: #0f569f;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 0;
}

.btn-confirm-back:hover {
  text-decoration: underline;
}

.btn-confirm-submit {
  width: 200px;
  padding: 14px 0;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

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

/* ===========================
   登録完了画面 (worker/profile-complete.html)
=========================== */

/* ログイン中バー */
.worker-login-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fdf5e0;
  color: #555;
  font-size: 16px;
  padding: 7px 16px;
  border-bottom: 1px solid #eee;
}

/* ヘッダー右側アイコン群 */
.worker-header-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.worker-header-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #333;
  text-decoration: none;
  transition: color 0.15s;
}

.worker-header-icon-btn:hover {
  color: #4c9e51;
}

.worker-header-icon-label {
  font-size: 14px;
}

/* 完了画面メイン */
.worker-main--complete {
  padding: 32px 24px 60px;
  align-items: flex-start;
  justify-content: center;
}

/* セクション */
.complete-section {
  margin: 28px 0;
}

.complete-section--mail {
  margin-top: 20px;
}

.complete-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 700;
  color: #4c9e51;
  margin: 0 0 14px;
}

.complete-section-heading--mail {
  color: #222;
}

/* [重要] バッジ */
.badge-important {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  background: #4c9e51;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

.complete-p {
  font-size: 17px;
  color: #333;
  line-height: 1.8;
  margin: 0 0 8px;
}

/* グレー注意ボックス */
.complete-notice-box,
.wpr-note-box,
.worker-notice {
  background: #f3f3f3;
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 14px;
}

.complete-notice-box p,
.wpr-note-box,
.worker-notice p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin: 0;
}

/* マイページボタン（aタグ版） */
.btn-worker-submit--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 14px 32px;
  text-decoration: none;
}

/* ===========================
   受注者ホーム (worker/mypage.html / notification.html)
=========================== */

/* body */
.wmypage-body {
  font-family: 'Noto Sans JP', sans-serif;
  background: #fafffb;
  color: #333;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── メインコンテンツ ── */
.wmypage-main {
  flex: 1;
  padding: 32px 24px 48px;
}

.wmypage-content {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px 40px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

@media (max-width: 600px) {
  .wmypage-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ページタイトル */
.wmypage-page-title {
  font-size: 26px;
  font-weight: 700;
  color: #222;
  margin: 0 0 16px;
  text-align: center;
}

.wmypage-title-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 24px;
}

/* ── アカウント情報カード ── */
.wmypage-account-card {
  border: 1px solid #6fb373;
  border-radius: 14px;
  overflow: hidden;
}

/* 残高行 */
.wmypage-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #eef8ef;
  border-bottom: 2px solid #4c9e51;
}

.wmypage-balance-label {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
}

.wmypage-balance-value {
  font-size: 20px;
  font-weight: 700;
  color: #4c9e51;
}

/* メニューリスト */
.wmypage-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wmypage-menu-item {
  border-bottom: 1px solid #eee;
}

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

.wmypage-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  color: #333;
  text-decoration: none;
  font-size: 17px;
  transition: background 0.12s;
}

.wmypage-menu-link:hover {
  background: #fafafa;
}

/* ===========================
   通知画面 (worker/notification.html)
=========================== */

/* タイトル行（戻るリンク ＋ 見出し） */
.wnotif-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

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

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

/* タイトル行内の h1：戻るは左、文言は中央（.wbasic-title / .wth-title と同型） */
.wnotif-title-row .wmypage-page-title {
  margin: 0;
  flex: 1;
  text-align: center;
}

/* 空状態 */
.wnotif-empty {
  min-height: 120px;
}

/* ===========================
   受注者ヘッダー：ナビリスト中央配置
=========================== */

/* header-inner を 3列グリッドに変更（ロゴ左 ｜ ナビ中央 ｜ アクション右） */
.wmypage-body .header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
}

/* header-logo を grid の 1列目に（flex 値をリセット） */
.wmypage-body .header-logo {
  flex: none;
}

/* header-nav を透過させ、nav-list と nav-actions を grid の子として扱う */
.wmypage-body .header-nav {
  display: contents;
}

/* nav-list を grid の 2列目に（中央配置） */
.wmypage-body .nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* nav-actions を grid の 3列目に（右端） */
.wmypage-body .nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex: none;
}

/* ===========================
   案件検索画面 (worker/search.html)
=========================== */

/* body: ヘッダー・地図・フッターを縦に並べる（地図を最大化） */
.wsearch-body.wmypage-body {
  background: #fff;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wsearch-body > .site-header,
.wsearch-body > .site-footer {
  flex-shrink: 0;
}

/* 地図上UIよりヘッダー／ハンバーガーメニューを前面に */
.wsearch-body > .site-header {
  position: relative;
  z-index: 2000;
  overflow: visible;
}

.wsearch-body > .wsearch-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.wsearch-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===========================
   検索コントロールパネル
=========================== */
.wsearch-controls {
  flex-shrink: 0;
  margin-top: 24px;
}

/* 1248px以下は余白をラッパー側で確保 */
@media (max-width: 1248px) {
  .wsearch-controls { padding: 12px; }
}

.wsearch-controls-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  gap: 24px;
}

/* 左カラム：日付タイトル＋フィルター */
.wsearch-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wsearch-date-title {
  font-size: 24px;
  font-weight: 700;
  color: #222;
  margin: 0;
  white-space: nowrap;
}

.wsearch-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 応募可のみ トグルスイッチ */
.wsearch-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.wsearch-toggle-text {
  font-size: 16px;
  color: #333;
  white-space: nowrap;
}

.wsearch-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.wsearch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.wsearch-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.2s;
  cursor: pointer;
}

.wsearch-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.wsearch-toggle input:checked + .wsearch-toggle-slider {
  background: #4caf50;
}

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

/* 在宅ワークボタン */
.wsearch-remote-btn {
  padding: 5px 14px;
  border: 1.5px solid #aaa;
  border-radius: 34px;
  background: #fff;
  color: #444;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

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

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

/* 右カラム：日付ピッカー */
.wsearch-right {
  flex-shrink: 0;
}

.wsearch-datepicker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #6fb373;
  border-radius: 18px;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s;
}

.wsearch-datepicker-wrap:focus-within {
  border-color: #4c9e51;
}

.wsearch-datepicker-icon {
  color: #888;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wsearch-datepicker {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 17px;
  color: #333;
  background: transparent;
  cursor: pointer;
  min-width: 120px;
}

.wsearch-datepicker-suffix {
  font-size: 15px;
  color: #555;
  line-height: 1.4;
  min-width: 0;
}

/* Flatpickr テーマオーバーライド */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #4c9e51;
  border-color: #4c9e51;
}

.flatpickr-day:hover {
  background: #eaf6eb;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #4c9e51;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #4c9e51;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #4c9e51;
}

.wsearch-calendar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 曜日ヘッダー行 */
.wsearch-weekdays {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 32px; /* nav-btn 幅分のオフセット */
}

.wsearch-wd {
  width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #555;
}

.wsearch-wd--sat {
  color: #0f569f;
}

/* 日付ナビ行（← 日付群 →） */
.wsearch-date-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wsearch-nav-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #555;
  cursor: pointer;
  border-radius: 14px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.wsearch-nav-btn:hover {
  background: #f0f0f0;
  color: #4c9e51;
}

.wsearch-dates {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 日付セル */
.wsearch-date-cell {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

.wsearch-date-cell:hover {
  background: #f0f0f0;
}

.wsearch-date-cell--sat {
  color: #0f569f;
}

.wsearch-date-cell--sun {
  color: #4c9e51;
}

.wsearch-date-cell--other {
  color: #bbb;
  font-weight: 400;
}

.wsearch-date-cell--active {
  background: #4c9e51 !important;
  color: #fff !important;
}

/* ===========================
   マップセクション
=========================== */
.wsearch-map-section {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  width: 100%;
}

.wsearch-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  z-index: 1;
}

/* Leaflet タイルが site 共通スタイルで潰れないようにする */
.wsearch-map .leaflet-tile-pane img {
  max-width: none !important;
  max-height: none !important;
}

.wsearch-marker-leaflet {
  background: transparent;
  border: none;
}

/* カスタムマップマーカー（レガシー） */
.wsearch-marker {
  width: 28px;
  height: 28px;
  background: #4c9e51;
  border: 2.5px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.15s;
}

.wsearch-marker:hover {
  transform: scale(1.15);
}

.wsearch-marker--active {
  background: #3d8042;
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(76,158,81,0.5);
}

/* 現在地マーカー */
.wsearch-marker-current {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(66, 133, 244, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.28);
}

.wsearch-marker-current-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4285f4;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* 地図ポップアップ（案件バナーカード） */
.wsearch-leaflet-popup .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.wsearch-leaflet-popup .leaflet-popup-content {
  margin: 0;
  line-height: 1.4;
}

.wsearch-leaflet-popup .leaflet-popup-tip {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.wsearch-popup-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  min-width: 280px;
  max-width: 340px;
  text-decoration: none;
  color: inherit;
  background: #fff;
}

.wsearch-popup-card:hover {
  background: #f5fbf5;
}

.wsearch-popup-card-thumb {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 4px;
  overflow: hidden;
  background: #e8e8e8;
}

.wsearch-popup-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wsearch-popup-card-thumb-ph {
  width: 100%;
  height: 100%;
  background: #e8e8e8;
}

.wsearch-popup-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.wsearch-popup-card-body .wsearch-list-top {
  margin-bottom: 2px;
}

.wsearch-popup-card-body .wsearch-list-title {
  font-size: 15px;
  line-height: 1.35;
}

.wsearch-popup-card-body .wsearch-list-price {
  font-size: 17px;
}

.wsearch-popup-card-address {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

/* 案件マーカー（小さなピン＋任意で時間帯ラベル） */
.wsearch-job-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.wsearch-job-marker-time {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: #fff;
  color: #4c9e51;
  border: 1px solid #4c9e51;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.wsearch-job-marker-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4c9e51;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.wsearch-marker-leaflet--job {
  background: transparent;
  border: none;
}

/* ===========================
   地図上フィルター（右上）
=========================== */
.wsearch-map-filter {
  position: absolute;
  top: 12px;
  right: 12px;
  /* Leaflet 地図内(z-index:1)より上。ヘッダー(2000)より下 */
  z-index: 5;
  background: #fff;
  border-radius: 32px;
  padding: 6px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ===========================
   エリア選択ラッパー（上部中央）
=========================== */
.wsearch-area-wrap {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  pointer-events: none;
}

.wsearch-area-wrap > * {
  pointer-events: auto;
}

@media (max-width: 600px) {
  .wsearch-area-wrap {
    flex-direction: column;
    align-items: stretch;
    left: 0;
    right: 0;
    transform: none;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  /* 子要素（ドロップダウン・ボタン）を横幅いっぱいに */
  .wsearch-area-wrap > * {
    width: 100%;
    box-sizing: border-box;
  }
  .wsearch-area-wrap .wsearch-area-select-wrap {
    display: flex;
  }
  .wsearch-area-wrap .wsearch-area-select {
    width: 100%;
  }
}

/* エリア選択ドロップダウン */
.wsearch-area-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.wsearch-area-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 36px 8px 16px;
  background: #fff;
  color: #333;
  font-size: 17px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  white-space: nowrap;
  outline: none;
}
.wsearch-area-select:hover {
  background: #f9f9f9;
}
.wsearch-area-select-chevron {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: #888;
}

/* 一覧でみるボタン（ドロップダウン横） */
.wsearch-list-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  color: #4c9e51;
  font-size: 17px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.wsearch-list-view-btn:hover {
  background: #eef8ef;
}

/* ===========================
   地図右下ボタン群
=========================== */
.wsearch-map-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wsearch-map-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 20px 0 0;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 36px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transition: background 0.15s, transform 0.1s;
  overflow: hidden;
}

.wsearch-map-action-btn:hover {
  background: #3d8042;
  transform: translateY(-1px);
}

.wsearch-map-action-btn--active {
  background: #3d8042;
}

.wsearch-map-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ===========================
   リスト表示セクション（wsearch-list-*）
=========================== */

.wsearch-list-section {
  background: #fff;
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* hidden属性がdisplay:flexに上書きされるのを防ぐ */
.wsearch-list-section[hidden] {
  display: none;
}

/* ヘッダー行 */
.wsearch-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px 12px;
  border-bottom: 1px solid #bfe5c1;
  gap: 12px;
}

.wsearch-list-heading {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.wsearch-list-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* ソート選択 */
.wsearch-sort-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.wsearch-sort-select {
  appearance: none;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 16px;
  padding: 6px 28px 6px 10px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  line-height: 1.4;
}

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

.wsearch-sort-chevron {
  position: absolute;
  right: 8px;
  pointer-events: none;
  color: #666;
}

/* 検索基準地点の通知 */
.wsearch-base-notice {
  padding: 8px 32px;
  font-size: 15px;
  color: #666;
  background: #f8f8f8;
  border-bottom: 1px solid #bfe5c1;
}

/* 距離表示 */
.wsearch-list-distance {
  color: #4c9e51;
  font-weight: 600;
}

.wsearch-list-toggles {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 案件リスト */
.wsearch-list-items {
  flex: 1;
  padding: 0 32px 100px;
}

/* 各案件行 */
.wsearch-list-item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #bfe5c1;
  padding: 16px 0;
  gap: 20px;
}

/* サムネイル */
.wsearch-list-thumb {
  flex-shrink: 0;
  width: 130px;
  min-height: 110px;
  background: #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wsearch-list-thumb-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

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

/* 本文 */
.wsearch-list-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  justify-content: center;
}

.wsearch-list-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wsearch-list-date {
  font-size: 16px;
  color: #444;
}

/* バッジ（枠線のみ） */
.wsearch-list-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 34px;
  border: 1px solid;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.wsearch-list-badge--red {
  color: #4c9e51;
  border-color: #4c9e51;
}

.wsearch-list-badge--gray {
  color: #555;
  border-color: #aaa;
}

.wsearch-list-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}

.wsearch-list-price {
  font-size: 22px;
  font-weight: 700;
  color: #4c9e51;
}

.wsearch-list-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.wsearch-list-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  color: #555;
}

.wsearch-list-meta-item svg {
  flex-shrink: 0;
  color: #777;
}

/* 詳細ボタン */
.wsearch-list-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
}

.wsearch-list-detail-btn {
  display: inline-block;
  padding: 10px 24px;
  background: #4c9e51;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  border-radius: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

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

.wsearch-list-detail-btn--red {
  background: #4c9e51;
  color: #fff;
  border-color: #4c9e51;
}
.wsearch-list-detail-btn--red:hover {
  background: #3d8042;
  border-color: #3d8042;
  color: #fff;
}


/* ===========================
   案件一覧画面 (worker/list.html)
=========================== */

.wlist-body {
  background: #fafffb;
}

.wlist-page {
  width: 100%;
}

.wlist-page-main {
  display: block;
  padding: 0;
}

/* ===========================
   メインコンテンツ
=========================== */
.wlist-main {
  flex: 1;
  padding: 0 24px 48px;
}

.wlist-inner {
  max-width: 1000px;
  margin: 0 auto;
}

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

/* ===========================
   案件リスト
=========================== */
.wlist-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wlist-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid #bfe5c1;
}

.wlist-item--last {
  border-bottom: none;
}

/* サムネイル */
.wlist-item-img {
  flex-shrink: 0;
  width: 130px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wlist-item-img-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wlist-item-img--brand {
  background: #eaf6eb;
}

/* カラープレースホルダー（画像の代替） */
.wlist-item-img-ph {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.wlist-item-img-ph--books {
  background-color: #8fa8c8;
  background-image: linear-gradient(135deg, #7a9abc 25%, #a0b8d0 50%, #6e8eb4 75%);
}

.wlist-item-img-ph--notebooks {
  background-color: #8fa87a;
  background-image: linear-gradient(135deg, #7a9a6a 25%, #a0b880 50%, #6e8a5e 75%);
}

.wlist-item-img-ph--phone {
  background-color: #a8a87a;
  background-image: linear-gradient(135deg, #9a9a6a 25%, #b8b880 50%, #8a8a5e 75%);
}

/* 本文エリア */
.wlist-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 日付 ＋ バッジ行 */
.wlist-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wlist-item-period {
  font-size: 15px;
  color: #555;
  white-space: nowrap;
}

/* 募集終了バッジ（赤枠ピル） */
.wlist-item-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1.5px solid #4c9e51;
  border-radius: 34px;
  color: #4c9e51;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: #fff;
}

/* タイトル */
.wlist-item-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 報酬 */
.wlist-item-price {
  font-size: 22px;
  font-weight: 700;
  color: #4c9e51;
  letter-spacing: 0.01em;
}

.wlist-item-duration {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  margin-left: 5px;
}

/* 住所 */
.wlist-item-address {
  font-size: 15px;
  color: #777;
  margin-top: 3px;
}

/* 時間帯 */
.wlist-item-time {
  font-size: 15px;
  color: #777;
  margin-top: 2px;
}

/* 募集終了系バッジ */
.wlist-item-deadline {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.wlist-item-deadline--soon {
  color: #e07800;
}

.wlist-item-deadline--closed {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1.5px solid #4c9e51;
  border-radius: 34px;
  color: #4c9e51;
  background: #fff;
}

/* タグ行（いつでも / 在宅ワーク） */
.wlist-item-tags {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.wlist-item-tag svg {
  flex-shrink: 0;
  color: #888;
}

/* 詳細ボタン */
.wlist-item-action {
  flex-shrink: 0;
  margin-left: auto;
}

.btn-wlist-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 10px 24px;
  background: #4c9e51;
  color: #fff;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

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

/* ===========================
   ページネーション
=========================== */
.wlist-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 12px;
}

@media (max-width: 600px) {
  .wlist-pagination {
    flex-wrap: wrap;
    gap: 12px;
  }
  /* 件数表示を上段で全幅、前へ・次へは下段で横並び */
  .wlist-pagination .wlist-count {
    order: -1;
    flex: 1 1 100%;
  }
}

/* 件数表示（中央） */
.wlist-count {
  flex: 1;
  text-align: center;
  font-size: 17px;
  color: #555;
  white-space: nowrap;
}

.wlist-count-num {
  font-size: 17px;
  font-weight: 700;
  color: #333;
}

.wlist-count-range {
  font-weight: 700;
  color: #333;
}

/* ページャーボタン（< 前の10件 / 次の10件 >） */
.wlist-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: 1px solid #86a688;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: #555;
  cursor: pointer;
  border-radius: 16px;
  transition: background 0.15s;
  white-space: nowrap;
}

.wlist-pager-btn:hover:not(:disabled) {
  background: #f0f0f0;
}

.wlist-pager-btn:disabled {
  color: #bbb;
  border-color: #4c9e51;
  cursor: default;
}


/* ===========================
   案件詳細画面 (worker/job-detail.html)
=========================== */

.wdetail-body {
  background: #fafffb;
  padding-bottom: 72px; /* 固定バー分の余白 */
}

/* ===========================
   メインコンテンツ
=========================== */
.wdetail-main {
  flex: 1;
  padding: 0 24px 32px;
}

.wdetail-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* 操作結果メッセージ（作業手順 .wprocedure-info-banner と同系） */
.wdetail-flash {
  background: #e8f4fd;
  border: 1px solid #b3d7f5;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 700;
  color: #0f569f;
  margin-bottom: 16px;
}

.wdetail-flash--error {
  background: #fdecea;
  border-color: #f5c6cb;
  color: #c62828;
}

/* 戻るリンク */
.wdetail-back-row {
  padding: 16px 0 10px;
}

.wdetail-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: #555;
  text-decoration: none;
  transition: color 0.15s;
}

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

.wdetail-top-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 28px;
}

/* ===========================
   ヒーローエリア（画像 ＋ タイトル/価格）
=========================== */
.wdetail-hero {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  margin-bottom: 36px;
}

/* 画像コンテナ */
.wdetail-hero-img {
  flex-shrink: 0;
  width: 240px;
}

.wdetail-img-wrap {
  width: 240px;
  min-height: 180px;
  border: 1px solid #d6eed7;
  border-radius: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.wdetail-hero-image {
  display: block;
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.wdetail-img-label {
  font-size: 17px;
  font-weight: 700;
  color: #3d8042;
  letter-spacing: 0.05em;
}

/* タイトル・価格 */
.wdetail-hero-info {
  flex: 1;
  padding-top: 8px;
}

.wdetail-job-title {
  font-size: 26px;
  font-weight: 700;
  color: #222;
  margin: 0 0 10px;
  line-height: 1.4;
}

.wdetail-job-price {
  font-size: 30px;
  font-weight: 700;
  color: #4c9e51;
  letter-spacing: 0.01em;
}

/* ===========================
   詳細セクション群
=========================== */
.wdetail-sections {
  border-top: 1px solid #d6eed7;
}

.wdetail-section {
  padding: 20px 0 0;
}

.wdetail-section--last {
  padding-bottom: 0;
}

/* セクションラベル */
.wdetail-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin: 0 0 10px;
}

/* 長期継続予定バッジ */
.wdetail-badge-long {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: #4c9e51;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* セクション内区切り線 */
.wdetail-section-rule {
  border: none;
  border-top: 1px solid #bfe5c1;
  margin: 0 0 14px;
}

/* セクション本文 */
.wdetail-section-body {
  padding-bottom: 20px;
}

.wdetail-section-body p {
  font-size: 17px;
  color: #333;
  line-height: 1.8;
  margin: 0 0 8px;
}

.wdetail-section-body p:last-child {
  margin-bottom: 0;
}

/* 改行を保持する本文（作業概要・補足など） */
.wdetail-pre {
  white-space: pre-wrap;
}

/* 注記テキスト */
.wdetail-note {
  font-size: 15px;
  color: #888;
}

/* リッチテキスト（補足情報） */
.wdetail-section-body--rich {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wdetail-section-body--rich p {
  margin: 0;
}

.wdetail-sub-heading {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin-top: 4px !important;
}

.wdetail-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wdetail-ul li {
  font-size: 17px;
  color: #333;
  line-height: 1.8;
}

.wdetail-ul-indent {
  padding-left: 16px;
  color: #666 !important;
}

/* ===========================
   固定底部アクションバー
=========================== */
.wdetail-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  background: #fff;
  border-top: 1px solid #e5ffe6;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  gap: 24px;
}

.wdetail-action-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wdetail-action-price {
  font-size: 26px;
  font-weight: 700;
  color: #4c9e51;
  letter-spacing: 0.01em;
}

.wdetail-action-meta {
  font-size: 15px;
  color: #666;
}

/* 応募するボタン */
.btn-wdetail-apply {
  padding: 14px 48px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}

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

.btn-wdetail-apply--applied,
.btn-wdetail-apply--applied:hover {
  background: #b0b0b0;
  color: #fff;
  cursor: not-allowed;
}


/* =============================================
   案件一覧（my-list.html） wmylist-*
   ============================================= */

/* 2カラムレイアウト */
.wmylist-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* 左: 縦並びタブ */
.wmylist-sidetabs {
  flex-shrink: 0;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
}

.wmylist-sidetab {
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #555;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  line-height: 1.4;
}

.wmylist-sidetab--active {
  color: #fff;
  background: #4c9e51;
  border-color: #4c9e51;
  font-weight: 700;
}

.wmylist-sidetab:not(.wmylist-sidetab--active):hover {
  color: #3d8042;
  background: #eaf6eb;
  border-color: #a5d6a7;
}

/* 右: コンテンツエリア */
.wmylist-content {
  flex: 1;
  min-width: 0;
}

.wmylist-body {
  background: #fafffb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wmylist-main {
  flex: 1;
  padding: 40px 0 60px;
}

.wmylist-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 600px) {
  .wmylist-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* タイトル */
.wmylist-title-row {
  margin-bottom: 12px;
}

.wmylist-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  text-align: center;
}

.wmylist-title-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 24px;
}

/* タブ */
.wmylist-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #86a688;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.wmylist-tab {
  padding: 14px 0;
  font-size: 18px;
  font-weight: 400;
  color: #333;
  background: #fff;
  border: none;
  border-right: 1px solid #86a688;
  cursor: pointer;
  transition: background 0.15s;
}

.wmylist-tab:last-child {
  border-right: none;
}

.wmylist-tab--active {
  background: #3d8042;
  color: #fff;
  font-weight: 700;
}

.wmylist-tab:not(.wmylist-tab--active):hover {
  background: #f9f9f9;
}

/* アクション行（案件ID検索 + 地図トグル） */
.wmylist-action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.wmylist-id-search-btn {
  padding: 8px 20px;
  font-size: 16px;
  color: #333;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 34px;
  cursor: pointer;
  transition: background 0.15s;
}

.wmylist-id-search-btn:hover {
  background: #f0f0f0;
}

/* 地図トグルボタン */
.wmylist-map-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 16px;
  color: #333;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 34px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wmylist-map-toggle-btn:hover {
  background: #f0f0f0;
}

.wmylist-map-toggle-btn--active {
  background: #4c9e51;
  color: #fff;
  border-color: #4c9e51;
}

.wmylist-map-toggle-btn--active:hover {
  background: #3d8042;
}

/* マップコンテナ */
.wmylist-map-wrap {
  margin-bottom: 16px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #6fb373;
}

.wmylist-map {
  height: 300px;
  width: 100%;
}

/* マップマーカー */
.wmylist-map-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4c9e51;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.15s;
}

.wmylist-map-marker--active {
  background: #3d8042;
  transform: scale(1.25);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ハイライトカード */
.wmylist-card--highlighted {
  outline: 2px solid #4c9e51;
  outline-offset: -2px;
  border-radius: 18px;
}

/* 空状態 */
.wmylist-empty {
  background: #f0f0f0;
  border-radius: 14px;
  padding: 20px 24px;
  color: #666;
  font-size: 17px;
}

.wmylist-empty p {
  margin: 0;
}


/* =============================================
   案件ID検索モーダル (.wmylist-modal-*)
   ============================================= */

.wmylist-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(80, 80, 80, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

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

.wmylist-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 760px;
  padding: 28px 36px 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.wmylist-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 26px;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}

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

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

.wmylist-modal-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 28px;
}

.wmylist-modal-body {
  margin-bottom: 32px;
}

.wmylist-modal-field {
  display: flex;
  align-items: center;
  gap: 24px;
}

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

.wmylist-modal-input {
  flex: 1;
  max-width: 340px;
  height: 40px;
  padding: 0 12px;
  font-size: 17px;
  border: 1px solid #86a688;
  border-radius: 14px;
  outline: none;
  font-family: inherit;
}

.wmylist-modal-input:focus {
  border-color: #3d8042;
  box-shadow: 0 0 0 2px rgba(192,17,31,0.12);
}

.wmylist-modal-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.wmylist-modal-btn {
  padding: 10px 40px;
  font-size: 17px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 400;
  transition: background 0.15s, opacity 0.15s;
}

.wmylist-modal-btn--clear {
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
}

.wmylist-modal-btn--clear:hover {
  background: #f0f0f0;
}

.wmylist-modal-btn--submit {
  background: #3d8042;
  color: #fff;
  border: none;
}

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


/* 案件カード */
.wmylist-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wmylist-card {
  background: #fff;
  border: 1px solid #6fb373;
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}

.wmylist-card-body {
  display: flex;
  gap: 0;
  padding: 0;
}

.wmylist-card-thumb {
  width: 140px;
  flex-shrink: 0;
  background: #e0e0e0;
  overflow: hidden;
}

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

.wmylist-card-info {
  flex: 1;
  padding: 14px 16px 10px;
  position: relative;
}

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

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

.wmylist-card-status {
  font-size: 15px;
  color: #888;
  border: 1px solid #bbb;
  border-radius: 34px;
  padding: 2px 10px;
  white-space: nowrap;
}

.wmylist-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.wmylist-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wmylist-card-location,
.wmylist-card-price {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  color: #444;
}

.wmylist-card-meta-icon {
  flex-shrink: 0;
  color: #888;
}

.wmylist-card-id {
  font-size: 15px;
  color: #888;
  text-align: right;
  margin-top: 8px;
}

.wmylist-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #6fb373;
}

.wmylist-card-action-btn {
  display: block;
  padding: 13px 0;
  text-align: center;
  font-size: 17px;
  color: #333;
  background: #fff;
  border: none;
  border-right: 1px solid #6fb373;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  font-family: inherit;
}

.wmylist-card-action-btn:last-child {
  border-right: none;
}

.wmylist-card-action-btn:hover {
  background: #eaf6eb;
}

/* ページネーション */
.wmylist-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .wmylist-pagination-wrap {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

.wmylist-count {
  font-size: 17px;
  color: #333;
}

.wmylist-count strong {
  color: #3d8042;
  font-weight: 700;
}

.wmylist-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wmylist-page-btn {
  padding: 6px 12px;
  font-size: 16px;
  color: #333;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.wmylist-page-btn:hover:not(.wmylist-page-btn--active):not(:disabled) {
  background: #f0f0f0;
}

.wmylist-page-btn--active {
  background: #3d8042;
  color: #fff;
  border-color: #3d8042;
  font-weight: 700;
  cursor: default;
}

.wmylist-page-btn:disabled {
  color: #bbb;
  cursor: default;
  border-color: #4c9e51;
}

/* タブコンテンツの切り替え */
.wmylist-tab-content {
  display: none;
}

.wmylist-tab-content--active {
  display: block;
}


/* =============================================
   報酬情報 (reward.html) wreward-*
   ============================================= */

.wreward-body {
  background: #fafffb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wreward-main {
  flex: 1;
  padding: 40px 0 60px;
}

.wreward-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 600px) {
  .wreward-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.wreward-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
  text-align: center;
}

.wreward-title-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 24px;
}

/* 年選択 */
.wreward-year-row {
  margin-bottom: 16px;
}

.wreward-year-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.wreward-year-dropdown {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 40px 10px 16px;
  font-size: 18px;
  font-family: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 14px;
  cursor: pointer;
  outline: none;
}

.wreward-year-dropdown:focus {
  border-color: #3d8042;
}

.wreward-year-chevron {
  position: absolute;
  right: 14px;
  pointer-events: none;
  color: #555;
}

/* 集計期間説明 */
.wreward-period-note {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
}

/* 立替金注意書き */
.wreward-advance-note {
  font-size: 17px;
  color: #3d8042;
  margin: 0 0 20px;
  line-height: 1.7;
}

.wreward-link {
  color: #5a5aaa;
  text-decoration: underline;
}

.wreward-link:hover {
  color: #333;
}

/* ツールバー（件数 + PDFボタン） */
.wreward-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .wreward-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

.wreward-count-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.wreward-count-num {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
}

.wreward-count-text {
  font-size: 16px;
  color: #333;
}

.wreward-count-range {
  color: #3d8042;
  font-weight: 700;
}

.wreward-per-page-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}

.wreward-per-page-dropdown {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 28px 4px 8px;
  font-size: 16px;
  font-family: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 14px;
  cursor: pointer;
  outline: none;
}

.wreward-per-page-dropdown:focus {
  border-color: #3d8042;
}

.wreward-per-page-chevron {
  position: absolute;
  right: 8px;
  pointer-events: none;
  color: #555;
}

.wreward-pdf-btn {
  padding: 7px 18px;
  font-size: 16px;
  font-family: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.wreward-pdf-btn:hover {
  background: #f0f0f0;
}

/* テーブル */
.wreward-table-wrap {
  overflow-x: auto;
  border: 1px solid #6fb373;
  border-radius: 14px;
  margin-bottom: 20px;
}

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

.wreward-th {
  padding: 12px 14px;
  background: #f8f8f8;
  color: #333;
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  border-bottom: 1px solid #6fb373;
  white-space: nowrap;
}

.wreward-th--num {
  text-align: right;
}

.wreward-tr {
  border-bottom: 1px solid #eee;
}

.wreward-tr:last-child {
  border-bottom: none;
}

.wreward-tr:hover {
  background: #fafafa;
}

.wreward-td {
  padding: 14px;
  vertical-align: top;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.wreward-td--num {
  text-align: right;
  white-space: nowrap;
}

.wreward-cell-link {
  color: #0f569f;
  text-decoration: none;
}

.wreward-cell-link:hover {
  text-decoration: underline;
}

/* ページネーション */
.wreward-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 12px;
}

@media (max-width: 600px) {
  .wreward-pagination-wrap {
    flex-wrap: wrap;
    gap: 12px;
  }
  /* 件数表示を上段で全幅、前へ・次へは下段で横並び
     （※後続の .wreward-count-center { flex:1 } に勝つため詳細度を上げる） */
  .wreward-pagination-wrap .wreward-count-center {
    order: -1;
    flex: 1 1 100%;
  }
}

.wreward-count-center {
  flex: 1;
  text-align: center;
  font-size: 17px;
  color: #555;
  white-space: nowrap;
}

.wreward-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 16px;
  color: #555;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  white-space: nowrap;
}

.wreward-page-btn:hover:not(:disabled) {
  background: #f0f0f0;
}

.wreward-page-btn:disabled {
  color: #bbb;
  cursor: default;
  border-color: #4c9e51;
}

/* 空状態 */
.wreward-empty {
  background: #f0f0f0;
  border-radius: 14px;
  padding: 20px 24px;
  color: #666;
  font-size: 17px;
}

.wreward-empty p {
  margin: 0;
}


/* =============================================
   メッセージ一覧 (messages.html) wmsg-*
   ============================================= */

.wmsg-body {
  background: #fafffb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wmsg-main {
  flex: 1;
  padding: 40px 0 60px;
}

.wmsg-detail-main {
  display: block;
  padding: 0;
}

.wmsg-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 600px) {
  .wmsg-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.wmsg-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
  text-align: center;
}

.wmsg-title-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 24px;
}

/* ツールバー（件数 + フィルターボタン） */
.wmsg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

/* 件数行 */
.wmsg-count-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wmsg-count-num {
  font-size: 24px;
  font-weight: 700;
  color: #3d8042;
}

.wmsg-count-text {
  font-size: 16px;
  color: #555;
}

/* 表示件数セレクト */
.wmsg-per-page-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.wmsg-per-page-dropdown {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 28px 4px 10px;
  font-size: 16px;
  font-family: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 14px;
  cursor: pointer;
  outline: none;
}

.wmsg-per-page-dropdown:focus {
  border-color: #3d8042;
}

.wmsg-per-page-chevron {
  position: absolute;
  right: 8px;
  pointer-events: none;
  color: #555;
}

/* フィルターボタン群 */
.wmsg-filter-btns {
  display: flex;
  gap: 8px;
}

.wmsg-filter-btn {
  padding: 8px 22px;
  font-size: 16px;
  font-family: inherit;
  border-radius: 34px;
  cursor: pointer;
  transition: background 0.15s;
  background: #fff;
  color: #333;
  border: 1px solid #86a688;
}

.wmsg-filter-btn--active {
  background: #3d8042;
  color: #fff;
  border-color: #3d8042;
}

.wmsg-filter-btn:not(.wmsg-filter-btn--active):hover {
  background: #f0f0f0;
}

/* 件数ハイライト */
.wmsg-count-range {
  color: #3d8042;
  font-weight: 700;
}

/* テーブル */
.wmsg-table-wrap {
  overflow-x: auto;
  margin-bottom: 20px;
  border: 1px solid #6fb373;
  border-radius: 14px;
}

.wmsg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background-color: #fff;
}

.wmsg-th {
  padding: 12px 14px;
  background: #f8f8f8;
  color: #333;
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  border-bottom: 1px solid #6fb373;
  white-space: nowrap;
}

.wmsg-th--msg {
  min-width: 260px;
}

.wmsg-tr {
  border-bottom: 1px solid #eee;
}

.wmsg-tr:last-child {
  border-bottom: none;
}

.wmsg-tr:hover {
  background: #fafafa;
}

.wmsg-td {
  padding: 14px;
  vertical-align: top;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.wmsg-td--id {
  white-space: nowrap;
}

.wmsg-td--period {
  white-space: nowrap;
}

.wmsg-td--msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wmsg-orderer-link {
  color: #0f569f;
  text-decoration: none;
  line-height: 1.6;
}

.wmsg-orderer-link:hover {
  text-decoration: underline;
}

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

.wmsg-job-id-link:hover {
  text-decoration: underline;
}

.wmsg-status-badge {
  display: inline-block;
  padding: 2px 10px;
  background: #555;
  color: #fff;
  font-size: 14px;
  border-radius: 12px;
}

.wmsg-msg-content {
  flex: 1;
  min-width: 0;
}

.wmsg-msg-text {
  margin: 0 0 4px;
  color: #333;
}

.wmsg-msg-date {
  margin: 0;
  font-size: 15px;
  color: #888;
}

.wmsg-confirm-btn {
  flex-shrink: 0;
  padding: 6px 16px;
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s;
}

.wmsg-confirm-btn:hover {
  background: #f0f0f0;
}

/* ページネーション */
.wmsg-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 12px;
}

@media (max-width: 600px) {
  .wmsg-pagination-wrap {
    flex-wrap: wrap;
    gap: 12px;
  }
  /* 件数表示を上段で全幅、前へ・次へは下段で横並び */
  .wmsg-pagination-wrap .wmsg-count-center {
    order: -1;
    flex: 1 1 100%;
  }
}

.wmsg-count-center {
  flex: 1;
  text-align: center;
  font-size: 17px;
  color: #555;
  white-space: nowrap;
}

.wmsg-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 16px;
  color: #555;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  white-space: nowrap;
}

.wmsg-page-btn:hover:not(:disabled) {
  background: #f0f0f0;
}

.wmsg-page-btn:disabled {
  color: #bbb;
  cursor: default;
  border-color: #4c9e51;
}

/* 空状態 */
.wmsg-empty {
  background: #f0f0f0;
  border-radius: 14px;
  padding: 20px 24px;
  color: #666;
  font-size: 17px;
}

.wmsg-empty p {
  margin: 0;
}


/* =============================================
   絞り込み検索モーダル (wmsg-modal-*)
   ============================================= */

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

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

/* モーダル本体 */
.wmsg-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  padding: 28px 36px 32px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* モーダルヘッダー */
.wmsg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

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

.wmsg-modal-close {
  background: none;
  border: none;
  font-size: 26px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 14px;
  transition: color 0.15s;
}

.wmsg-modal-close:hover {
  color: #555;
}

.wmsg-modal-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 20px;
}

/* フォーム行 */
.wmsg-modal-field {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.wmsg-modal-field--check {
  margin-bottom: 20px;
}

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

.wmsg-modal-input {
  flex: 1;
  height: 38px;
  padding: 0 10px;
  font-size: 17px;
  font-family: inherit;
  color: #333;
  border: 1px solid #86a688;
  border-radius: 14px;
  outline: none;
  transition: border-color 0.15s;
}

.wmsg-modal-input:focus {
  border-color: #3d8042;
}

.wmsg-modal-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #3d8042;
}

/* ボタン行 */
.wmsg-modal-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.wmsg-modal-btn-clear,
.wmsg-modal-btn-submit {
  padding: 10px 40px;
  font-size: 17px;
  font-family: inherit;
  font-weight: 700;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.wmsg-modal-btn-clear {
  background: #fff;
  color: #333;
  border: 1px solid #86a688;
}

.wmsg-modal-btn-clear:hover {
  background: #f0f0f0;
}

.wmsg-modal-btn-submit {
  background: #3d8042;
  color: #fff;
  border: 1px solid #3d8042;
}

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


/* =============================================
   地域選択モーダル (wregion-*)
   ============================================= */

/* 地域を選択ボタン（検索コントロール内） */
.wsearch-date-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.wsearch-region-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
  color: #3d8042;
  background: #fff;
  border: 1.5px solid #3d8042;
  border-radius: 34px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.wsearch-region-btn:hover {
  background: #3d8042;
  color: #fff;
}

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

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

/* モーダル本体 */
.wregion-modal {
  background: #fff;
  width: 420px;
  max-width: calc(100vw - 32px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

/* 全国 / 閉じる タブ行 */
.wregion-tab-row {
  display: flex;
}

.wregion-tab {
  flex: 1;
  padding: 14px 0;
  font-size: 18px;
  font-family: inherit;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.wregion-tab--all {
  background: #fff;
  color: #333;
  border-right: 1px solid #6fb373;
  border-bottom: 2px solid #ddd;
}

.wregion-tab--all:hover {
  background: #eaf6eb;
}

.wregion-tab--close {
  background: #fff;
  color: #333;
  border-bottom: 2px solid #ddd;
}

.wregion-tab--close:hover {
  background: #eaf6eb;
}

/* 地域グリッド */
.wregion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
  background: #fff;
}

/* 地域ボタン */
.wregion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
  font-size: 18px;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background: #3d8042;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: background 0.15s;
}

.wregion-item:hover {
  background: #3d8042;
}

.wregion-item svg {
  flex-shrink: 0;
  margin-left: 4px;
}


/* =============================================
   振込申請履歴一覧 (transfer-history.html) wth-*
   ============================================= */

.wth-body {
  background: #fafffb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wth-main {
  flex: 1;
  padding: 36px 0 60px;
}

.wth-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 600px) {
  .wth-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* タイトル行 */
.wth-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.wth-back-link {
  display: inline-flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  padding: 4px;
  border-radius: 14px;
  transition: color 0.15s;
}

.wth-back-link:hover {
  color: #3d8042;
}

.wth-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  flex: 1;
  text-align: center;
}

.wth-title-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 24px;
}

/* テーブル領域 */
.wth-table-area {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 14px;
  min-height: 80px;
  margin-bottom: 20px;
}

/* 件数 + ページネーション行 */
.wth-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 12px;
}

.wth-count-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.wth-count-num {
  font-size: 26px;
  font-weight: 700;
  color: #3d8042;
}

.wth-count-text {
  font-size: 16px;
  color: #555;
}

/* ページネーション */
.wth-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wth-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  font-size: 16px;
  font-family: inherit;
  color: #555;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 14px;
  transition: color 0.15s;
  text-decoration: none;
}

a.wth-page-nav {
  color: #555;
}

.wth-page-nav:hover:not(:disabled) {
  color: #3d8042;
}

a.wth-page-nav:hover {
  color: #3d8042;
}

.wth-page-nav:disabled {
  color: #bbb;
  cursor: default;
}

.wth-page-num {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
  color: #555;
  background: none;
  border: none;
  border-radius: 14px;
  cursor: default;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

.wth-page-num--active {
  background: #3d8042;
  color: #fff;
}

.wth-page-num:not(.wth-page-num--active):hover {
  background: #f0f0f0;
}

.wth-footer-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0;
}

/* テーブル */
.wth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}

.wth-table thead tr {
  background: #f8f8f8;
  border-bottom: 2px solid #e0e0e0;
}

.wth-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: #555;
  white-space: nowrap;
}

.wth-table th.wth-th--num {
  text-align: right;
}

.wth-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #ececec;
  color: #1a1a1a;
  vertical-align: middle;
}

.wth-table td.wth-td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

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

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

/* ステータスバッジ */
.wth-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 34px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.wth-status--pending {
  background: #fff3cd;
  color: #856404;
}

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

/* =============================================
   基本情報 / メール・パスワード変更 (wbasic-*)
============================================= */

.wbasic-body {
  background: #fafffb;
  min-height: 100vh;
}

.wbasic-main {
  padding: 32px 24px 60px;
}

.wbasic-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* タイトル行 */
.wbasic-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.wbasic-back-link {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  flex-shrink: 0;
}

.wbasic-back-link:hover {
  color: #3d8042;
}

.wbasic-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  flex: 1;
  text-align: center;
}

.wbasic-title-rule {
  border: none;
  border-top: 1px solid #6fb373;
  margin: 0 0 20px;
}

/* カード */
.wbasic-card {
  background: #fff;
  border: 1px solid #e5ffe6;
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(36,80,40,0.06);
  margin-bottom: 16px;
  padding: 22px 32px;
  overflow: hidden;
}

/* 行 */
.wbasic-row {
  display: flex;
  align-items: flex-start;
  padding: 16px 8px;
  gap: 24px;
}

.wbasic-label-col {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
}

.wbasic-label {
  font-size: 17px;
  color: #333;
}

.wbasic-badge-required {
  font-size: 14px;
  color: #fff;
  background: #c62828;
  padding: 1px 5px;
  border-radius: 8px;
  white-space: nowrap;
}

.wbasic-field-col {
  flex: 1;
  min-width: 0;
}

.wbasic-row-rule {
  border: none;
  border-top: 1px solid #eee;
  margin: 0 24px;
}

/* 入力フィールド */
.wbasic-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 17px;
  font-family: inherit;
  color: #333;
  border: 1px solid #86a688;
  border-radius: 14px;
  box-sizing: border-box;
  background: #fff;
  transition: border-color 0.2s;
}

.wbasic-input:focus {
  outline: none;
  border-color: #888;
}

.wbasic-input-group {
  display: flex;
  gap: 8px;
}

.wbasic-input-group .wbasic-input--name {
  flex: 1;
}

.wbasic-input--mynumber {
  max-width: 360px;
}

.wbasic-input--email-readonly {
  background: #eef2f7;
  color: #555;
  cursor: default;
}

.wbasic-input--password {
  width: 100%;
}

/* メールアドレス行 */
.wbasic-email-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wbasic-email-value {
  font-size: 17px;
  color: #333;
}

.wbasic-btn-change {
  padding: 5px 14px;
  font-size: 16px;
  font-family: inherit;
  color: #3d8042;
  background: #fff;
  border: 1px solid #3d8042;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.wbasic-btn-change:hover {
  background: #3d8042;
  color: #fff;
}

/* インラインアクションボタン（赤塗り・変更/住所入力など） */
.wbasic-btn-inline {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background: #3d8042;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}

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

/* ヒント */
.wbasic-hint {
  font-size: 15px;
  color: #888;
  margin-top: 6px;
}

.wbasic-hint--red {
  color: #3d8042;
}

/* 郵便番号 */
.wbasic-zip-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wbasic-btn-zip {
  padding: 8px 14px;
  font-size: 16px;
  font-family: inherit;
  color: #fff;
  background: #3d8042;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

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

/* セレクト */
.wbasic-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wbasic-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 28px 8px 10px;
  font-size: 17px;
  font-family: inherit;
  color: #333;
  border: 1px solid #86a688;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.wbasic-input.wbasic-input--error,
.wbasic-select.wbasic-select--error {
  border-color: #c62828 !important;
  background-color: #fff8f8 !important;
  color: #333;
}

.wbasic-input.wbasic-input--error:focus,
.wbasic-select.wbasic-select--error:focus {
  border-color: #c62828 !important;
  background-color: #fff8f8 !important;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}

.wbasic-select--year { width: 90px; }
.wbasic-select--month { width: 70px; }
.wbasic-select--day { width: 70px; }
.wbasic-select--pref { width: 160px; }

.wbasic-select-chevron {
  position: absolute;
  right: 28px;
  pointer-events: none;
  color: #888;
}

.wbasic-select-unit {
  font-size: 17px;
  color: #555;
}

/* 生年月日 */
/* .wbasic-birth-note-bg は .profile-age-notice と共通化（上部でグループ定義） */

.wbasic-birth-selects {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.wbasic-birth-age {
  font-size: 16px;
  color: #555;
  margin-bottom: 4px;
}

.wbasic-birth-caution {
  font-size: 15px;
  color: #3d8042;
}

/* ラジオ */
.wbasic-radio-group {
  display: flex;
  gap: 20px;
  padding-top: 6px;
}

.wbasic-radio-label {
  font-size: 17px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* チェックボックス */
.wbasic-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding-top: 6px;
}

.wbasic-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 保存ボタン行 */
.wbasic-submit-row {
  padding: 24px 24px 28px;
  display: flex;
  justify-content: center;
}

.wbasic-btn-submit {
  padding: 12px 80px;
  font-size: 18px;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background: #3d8042;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

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

.wbasic-btn-submit:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
}

.wbasic-btn-submit:disabled:hover {
  background: #ccc;
}

.wbasic-btn-submit--wide {
  padding-left: 120px;
  padding-right: 120px;
}

@media (max-width: 600px) {
  .wbasic-btn-submit,
  .wbasic-btn-submit.wbasic-btn-submit--wide {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
  }
}

/* 銀行口座ページ */
.wbank-notice {
  margin: 0;
  font-size: 17px;
  color: #333;
  line-height: 1.6;
}

/* 銀行口座登録ページ */
.wbank-section {
  margin-bottom: 8px;
}

.wbank-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #3d8042;
  margin: 0 0 0 0;
  padding: 20px 0 10px;
}

.wbank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 14px;
  overflow: hidden;
}

.wbank-list-item {
  border-bottom: 1px solid #bfe5c1;
}

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

.wbank-list-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  font-size: 17px;
  font-family: inherit;
  color: #333;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.wbank-list-btn:hover {
  background: #f7f7f7;
}

.wbank-kana-card {
  background: #fff;
  border: 1px solid #d6eed7;
  border-radius: 14px;
  padding: 16px;
}

.wbank-kana-input {
  max-width: 100%;
}

.wbank-kana-submit {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.wbank-kana-btn {
  padding-left: 80px;
  padding-right: 80px;
}

/* 銀行口座入力フォーム */
.wbankform-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 8px;
}

.wbankform-label {
  flex: 0 0 170px;
  font-size: 17px;
  color: #555;
}

.wbankform-label .wbasic-badge-required {
  margin-left: 8px;
}

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

.wbankform-action {
  flex-shrink: 0;
}

.wbankform-btn-change {
  display: inline-block;
  padding: 6px 16px;
  font-size: 16px;
  color: #333;
  border: 1px solid #86a688;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}

.wbankform-btn-change:hover {
  background: #eaf6eb;
}

.wbankform-input-col {
  flex: 1;
}

.wbankform-select {
  appearance: auto;
}

/* 振込申請ページ */

/* 振込申請完了メッセージ */
.wtransfer-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 28px;
  background-color: #fff;
  border: 1px solid #d6eed7;
  border-radius: 16px;
  margin-bottom: 24px;
  gap: 12px;
}

.wtransfer-complete-icon {
  color: #0f569f;
}

.wtransfer-complete-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.wtransfer-complete-text {
  font-size: 17px;
  color: #555;
  line-height: 1.8;
  margin: 0;
}

.wtransfer-alert {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 17px;
  color: #c62828;
  margin-bottom: 12px;
}

.wtransfer-summary {
  border: 1px solid #d6eed7;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
}

.wtransfer-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eef8ef;
  border-bottom: 2px solid #4c9e51;
  padding: 18px 24px;
}

.wtransfer-balance-label {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

.wtransfer-balance-amount {
  font-size: 20px;
  font-weight: 700;
  color: #4c9e51;
}

.wtransfer-detail {
  background: #fff;
  padding: 0 24px;
}

.wtransfer-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.wtransfer-detail-label {
  font-size: 17px;
  color: #333;
}

.wtransfer-detail-value {
  font-size: 17px;
  color: #333;
}

.wtransfer-detail-value--total {
  font-weight: 700;
}

.wtransfer-detail-rule {
  border: none;
  border-top: 1px solid #eee;
  margin: 0;
}

/* 振込申請確認ポップアップ */
.wtransfer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

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

.wtransfer-modal {
  background: #fff;
  border-radius: 14px;
  width: 92%;
  max-width: 400px;
  padding: 36px 32px 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.wtransfer-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 14px;
}

.wtransfer-modal-note {
  font-size: 16px;
  color: #666;
  text-align: center;
  line-height: 1.7;
  margin: 0 0 28px;
}

.wtransfer-modal-actions {
  display: flex;
  gap: 12px;
}

.wtransfer-modal-btn {
  flex: 1;
  padding: 13px 0;
  font-size: 18px;
  font-family: inherit;
  font-weight: 700;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.wtransfer-modal-btn:hover {
  opacity: 0.85;
}

.wtransfer-modal-btn--cancel {
  background: #f0f0f0;
  color: #555;
}

.wtransfer-modal-btn--submit {
  background: #3d8042;
  color: #fff;
}

/* ===================================================
   ログイン後 業種選択ポップアップ (.wlogin-select-*)
   =================================================== */

.wlogin-select-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.wlogin-select-overlay[hidden] {
  display: none;
}

.wlogin-select-modal {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: 92%;
  max-width: 400px;
  padding: 40px 32px 36px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.wlogin-select-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #aaa;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.wlogin-select-close:hover {
  background: #888;
}

.wlogin-select-close-icon {
  width: 18px;
  height: 18px;
  stroke: #fff;
  stroke-width: 2.5;
}

.wlogin-select-title {
  text-align: center;
  font-size: 17px;
  color: #333;
  margin: 0 0 20px;
  font-weight: 400;
}

.wlogin-select-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wlogin-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  min-height: 56px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  line-height: 1.4;
}

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

.wlogin-select-btn--tall {
  min-height: 80px;
  padding: 14px 20px;
  text-align: center;
  justify-content: space-between;
}

.wlogin-select-btn-label {
  flex: 1;
}

.wlogin-select-btn--tall .wlogin-select-btn-label {
  text-align: center;
}

.wlogin-select-arrow {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-left: 8px;
}

/* ===================================================
   パスワード再設定ページ (.wpr-*)
   =================================================== */

/* インフォメーションボックス（青） */
.wpr-info-box {
  background: #f3f3f3;
  color: #555;
  font-size: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: 28px;
  line-height: 1.8;
}

/* メールアドレス入力幅 */
.wpr-email-input {
  width: 100%;
  max-width: 100%;
}

/* 送信ボタン余白調整 */
.wpr-btn-wrap {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* 注意書きボックス（.complete-notice-box と共通化：上部で定義） */

/* 送信完了ビュー */
.wpr-sent-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin: 0 0 16px;
}

.wpr-sent-text {
  font-size: 17px;
  color: #333;
  margin: 0 0 8px;
  line-height: 1.7;
}

.wpr-back-login {
  display: inline-block;
  margin-top: 20px;
  font-size: 17px;
  color: #0f569f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wpr-back-login:hover {
  text-decoration: none;
}


/* =============================================
   ご利用マニュアル（manual.html） wmanual-*
   ============================================= */

.wmanual-body {
  background: #fafffb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wmanual-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wmanual-iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: none;
  min-height: calc(100vh - 72px);
}

.wmanual-placeholder {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 72px);
  background: #eaf6eb;
}

.wmanual-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 48px 24px;
}

.wmanual-placeholder-icon {
  opacity: 0.35;
}

.wmanual-placeholder-title {
  font-size: 20px;
  font-weight: 700;
  color: #555;
  margin: 0;
}

.wmanual-placeholder-text {
  font-size: 17px;
  color: #888;
  line-height: 1.75;
  margin: 0;
}


/* =============================================
   お問い合わせ（contact.html） wcontact-*
   ============================================= */

.wcontact-body {
  background: #fafffb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wcontact-main {
  flex: 1;
  padding: 40px 24px 60px;
}

.wcontact-inner {
  max-width: 720px;
  margin: 0 auto;
}

.wcontact-heading {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 24px;
  text-align: center;
}

.wcontact-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 40px 40px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

@media (max-width: 600px) {
  .wcontact-card {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ステッパー */
.wcontact-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.wcontact-step {
  display: flex;
  align-items: center;
  flex: 1;
}

.wcontact-step:last-child {
  flex: 0;
}

.wcontact-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ddd;
  color: #aaa;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wcontact-step-circle--active {
  background: #3d8042;
  color: #fff;
}

.wcontact-step-line {
  flex: 1;
  height: 3px;
  background: #ddd;
  margin: 0 6px;
}

.wcontact-step-line--active {
  background: #3d8042;
}

.wcontact-stepper-labels {
  display: flex;
  margin-bottom: 28px;
}

.wcontact-stepper-label {
  flex: 1;
}

.wcontact-stepper-label:last-child {
  flex: 0;
  min-width: 90px;
  text-align: right;
}

.wcontact-stepper-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #333;
}

.wcontact-stepper-label--inactive .wcontact-stepper-title {
  color: #bbb;
  font-weight: 400;
}

.wcontact-stepper-desc {
  display: block;
  font-size: 14px;
  color: #aaa;
  margin-top: 3px;
}

/* 案内文 */
.wcontact-notice {
  font-size: 16px;
  color: #444;
  line-height: 1.85;
  margin: 0 0 20px;
}

/* 区切り線 */
.wcontact-rule {
  border: none;
  border-top: 1px solid #bfe5c1;
  margin: 0 0 24px;
}

/* フォームフィールド */
.wcontact-field {
  margin-bottom: 28px;
}

.wcontact-label {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.wcontact-required {
  color: #c62828;
  margin-left: 4px;
}

.wcontact-select-wrap {
  position: relative;
  display: block;
}

.wcontact-select {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 12px;
  font-size: 17px;
  color: #333;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wcontact-select:focus {
  border-color: #3d8042;
  box-shadow: 0 0 0 2px rgba(192, 17, 31, 0.12);
}

.wcontact-select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* 注意・案内テキスト */
.wcontact-warn {
  font-size: 16px;
  color: #444;
  line-height: 1.85;
  margin: 0 0 14px;
}

.wcontact-info {
  font-size: 16px;
  color: #555;
  line-height: 1.85;
  margin: 0 0 8px;
}

/* 次へボタン */
.wcontact-btn-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

.wcontact-btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  background: #3d8042;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

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

/* フッター */
.wcontact-footer {
  text-align: center;
  padding: 14px 24px;
  background: #fff;
  border-top: 1px solid #bfe5c1;
}

.wcontact-footer-text {
  font-size: 15px;
  color: #aaa;
  margin: 0;
}

/* ステッパー追加状態（contact-detail.html） */
.wcontact-step-circle--done {
  background: #43a047;
  color: #fff;
}

.wcontact-step-circle--current {
  background: #fff;
  color: #3d8042;
  border: 2px solid #3d8042;
}

.wcontact-stepper-label--done .wcontact-stepper-title {
  color: #43a047;
  font-weight: 700;
}

.wcontact-stepper-label--done .wcontact-stepper-desc {
  color: #43a047;
}

.wcontact-stepper-label--active .wcontact-stepper-title {
  color: #3d8042;
  font-weight: 700;
}

.wcontact-stepper-label--active .wcontact-stepper-desc {
  color: #3d8042;
}

/* 詳細フォーム入力フィールド */
.wcontact-name-row {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
}

.wcontact-name-row .wcontact-field {
  flex: 1;
  margin-bottom: 0;
}

.wcontact-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 17px;
  color: #333;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wcontact-input:focus {
  border-color: #3d8042;
  box-shadow: 0 0 0 2px rgba(192, 17, 31, 0.12);
}

.wcontact-input--medium {
  max-width: 100%;
}

.wcontact-input-hint {
  font-size: 15px;
  color: #888;
  margin: 6px 0 0;
  line-height: 1.6;
}

.wcontact-textarea {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 17px;
  color: #333;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wcontact-textarea:focus {
  border-color: #3d8042;
  box-shadow: 0 0 0 2px rgba(192, 17, 31, 0.12);
}

/* バリデーションエラー時は入力欄全体を薄赤背景に（通常スタイルより後に定義） */
.wcontact-select.wcontact-select--error,
.wcontact-input.wcontact-input--error,
.wcontact-textarea.wcontact-textarea--error {
  border-color: #c62828 !important;
  background-color: #fff8f8 !important;
  color: #333;
}

.wcontact-input.wcontact-input--error:focus,
.wcontact-select.wcontact-select--error:focus,
.wcontact-textarea.wcontact-textarea--error:focus {
  border-color: #c62828 !important;
  background-color: #fff8f8 !important;
  outline-color: #c62828;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}

/* ファイルアップロード */
.wcontact-file-wrap {
  display: inline-block;
}

.wcontact-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 10px 16px;
  background: #fff;
  color: #666;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.wcontact-file-btn:hover {
  background: #eaf6eb;
  border-color: #aaa;
}

.wcontact-file-input {
  display: none;
}

.wcontact-attachment-list {
  margin-top: 10px;
}

.wcontact-attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.wcontact-attachment-name {
  font-size: 15px;
  color: #333;
  margin: 4px 0 0;
  line-height: 1.5;
  word-break: break-all;
}

.wcontact-attachment-item .wcontact-attachment-name {
  flex: 1;
  margin: 0;
}

.wcontact-attachment-remove {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 14px;
  color: #666;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.wcontact-attachment-remove:hover {
  background: #eaf6eb;
  border-color: #6fb373;
  color: #333;
}

.wcontact-confirm-attachment-name {
  line-height: 1.7;
  word-break: break-all;
}

.wcontact-attachment-name + .wcontact-attachment-name,
.wcontact-confirm-attachment-name + .wcontact-confirm-attachment-name {
  margin-top: 4px;
}

/* プライバシーポリシー */
.wcontact-privacy-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 28px;
}

.wcontact-privacy-link-wrap {
  order: 1;
  font-size: 16px;
  color: #444;
  line-height: 1.7;
}

.wcontact-privacy-link {
  color: #3d8042;
  text-decoration: underline;
}

.wcontact-privacy-link:hover {
  color: #2e7d32;
}

.wcontact-privacy-check-wrap {
  order: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcontact-privacy-check-wrap .wcontact-label {
  margin-bottom: 0;
}

.wcontact-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  color: #333;
  cursor: pointer;
}

.wcontact-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #4caf50;
}

/* 戻る・確認ボタン */
.wcontact-detail-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.wcontact-btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  padding: 13px 30px;
  background: #888;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.15s;
}

.wcontact-btn-back:hover {
  background: #666;
}

.wcontact-btn-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  padding: 13px 30px;
  background: #3d8042;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.15s;
}

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

/* 確認画面 */
.wcontact-confirm-table {
  border-top: 1px solid #bfe5c1;
}

.wcontact-confirm-row {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #bfe5c1;
}

@media (max-width: 600px) {
  /* ボタン行は縦積み・全幅 */
  .wcontact-detail-btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .wcontact-detail-btn-row > * {
    width: 100%;
    box-sizing: border-box;
  }
  /* 確認行（ラベル＋値）は縦積み */
  .wcontact-confirm-row {
    flex-direction: column;
    gap: 8px;
  }
}

.wcontact-confirm-label {
  flex-shrink: 0;
  width: 200px;
  font-size: 17px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.wcontact-confirm-value {
  flex: 1;
  font-size: 17px;
  color: #333;
  line-height: 1.7;
  word-break: break-all;
}

/* 送信完了画面 */
.wcontact-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  text-align: center;
  gap: 16px;
}

.wcontact-complete-icon {
  color: #0f569f;
}

.wcontact-complete-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.wcontact-complete-text {
  font-size: 17px;
  color: #444;
  line-height: 1.85;
  margin: 0;
}

/* ===========================
   サイドバー（マイページ系）
=========================== */
.wsidebar-layout {
  display: flex;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

.wsidebar-layout .wbasic-inner,
.wsidebar-layout .wmypage-content,
.wsidebar-layout .wth-inner {
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.wsidebar {
  width: 200px;
  flex-shrink: 0;
}

.wsidebar-balance {
  background: #eaf6eb;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 4px;
}

.wsidebar-balance-label {
  display: block;
  font-size: 15px;
  color: #888;
  margin-bottom: 4px;
}

.wsidebar-balance-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
}

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

.wsidebar-item {
  border-bottom: 1px solid #eee;
}

.wsidebar-link {
  display: block;
  padding: 12px 8px 12px 12px;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.wsidebar-link:hover {
  background: #eaf6eb;
  color: #3d8042;
}

.wsidebar-link--active {
  color: #3d8042;
  font-weight: 700;
  background: #eaf6eb;
}

.wsidebar-link--danger {
  color: #999;
  font-size: 15px;
}

.wsidebar-link--danger:hover {
  color: #3d8042;
  background: #eaf6eb;
}

@media (max-width: 960px) {
  .wsidebar-layout {
    flex-direction: column;
    gap: 16px;
  }

  .wbasic-inner {
    max-width: none;
    order: 0;
  }

  .wsidebar {
    width: 100%;
    order: 1;
  }
}

@media (max-width: 600px) {
  /* カード/表の余白をスマホ向けに縮小 */
  .wbasic-card {
    padding: 14px 18px;
  }
  .wbasic-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px 8px;
  }
  .wbasic-label-col {
    width: auto;
    padding-top: 0;
  }
  .wbasic-email-row {
    flex-wrap: wrap;
  }

  /* account-bank: 行を縦積みに */
  .wbankform-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 16px 8px;
  }
  .wbankform-label {
    flex: none;
    width: auto;
  }
  .wbankform-input-col {
    flex: none;
  }
}

/* ===========================
   応募モーダル (job-detail)
=========================== */
.apply-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

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

.apply-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.apply-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #bfe5c1;
}

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

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

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

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

.apply-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apply-modal-field-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.apply-modal-field-label {
  font-size: 17px;
  font-weight: 700;
  color: #222;
}

.apply-modal-badge {
  font-size: 14px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
}

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

.apply-modal-badge--optional {
  background: #e0e0e0;
  color: #555;
}

.apply-modal-field-note {
  font-size: 15px;
  color: #666;
  margin: 0;
}

.apply-modal-radios {
  display: flex;
  gap: 20px;
}

.apply-modal-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  cursor: pointer;
}

.apply-modal-textarea {
  width: 100%;
  height: 90px;
  padding: 10px 12px;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  line-height: 1.6;
}

.apply-modal-textarea:focus {
  border-color: #4c9e51;
}

.apply-modal-count {
  font-size: 15px;
  color: #999;
  text-align: right;
}

.apply-modal-footer {
  padding: 0 20px 20px;
}

.apply-modal-terms {
  text-align: center;
  margin: 0 0 14px;
}

.apply-modal-terms-link {
  font-size: 16px;
  color: #0f569f;
  text-decoration: underline;
}

.apply-modal-actions {
  display: flex;
  gap: 0;
}

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

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

.btn-apply-modal-cancel {
  flex: 1;
  padding: 14px 0;
  background: #fff;
  color: #333;
  border: 1px solid #86a688;
  border-left: none;
  border-radius: 0 4px 4px 0;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-apply-modal-cancel:hover {
  background: #eaf6eb;
}

.apply-complete-text {
  font-size: 17px;
  line-height: 1.8;
  color: #333;
  margin: 0;
}

.apply-complete-flow {
  background: #f5f7fa;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 17px;
  line-height: 2;
  color: #333;
}

.apply-complete-flow p {
  margin: 0;
}

/* 応募キャンセルボタン（アクションバー） */
.btn-wdetail-cancel {
  padding: 12px 24px;
  background: #fff;
  color: #555;
  border: 2px solid #ccc;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.btn-wdetail-cancel:hover {
  background: #eaf6eb;
  border-color: #aaa;
}

/* キャンセルモーダル：危険アクションボタン */
.btn-apply-modal-submit--danger {
  background: #555;
}

.btn-apply-modal-submit--danger:hover {
  background: #333;
}

/* 案件一覧へ移動するリンク */
.cancel-to-list-link {
  display: inline-block;
  font-size: 17px;
  color: #0f569f;
  text-decoration: underline;
}

.cancel-to-list-link:hover {
  color: #0f569f;
}

/* ===========================
   案件詳細ページ (my-list-detail)
=========================== */
.wmld-main {
  padding-bottom: 80px;
}

.wmld-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

@media (max-width: 600px) {
  .wmld-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.wmld-page-header {
  padding: 20px 0 12px;
}

.wmld-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
  color: #222;
  text-decoration: none;
}

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

/* 戻るリンク: テキストは中央、シェブロンは左に固定（正デモ寄せ） */
.wmld-page-header .wmld-back-link {
  display: flex;
  position: relative;
  justify-content: center;
}

.wmld-page-header .wmld-back-link svg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 案件タイトル（.wmld-inner 直下の先頭 p）: 見出しとして強調 */
.wmld-inner > p:first-of-type {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin: 14px 0 30px;
  border-left: 4px solid #4caf50;
  padding: .1em .75em;
}

/* 案件IDバー: ピルと調和する角丸の薄グレーバー */
.wmld-id-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #4c9e51;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 30px;
}

.wmld-id-bar-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}

.wmld-id {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}

.wmld-orderer {
  font-size: 15px;
  color: #666;
}

.wmld-status-badge {
  display: inline-block;
  padding: 5px 16px;
  background: #fff;
  border: 1px solid #0f569f;
  border-radius: 34px;
  font-size: 14px;
  font-weight: 700;
  color: #0f569f;
  white-space: nowrap;
}

/* セグメント型タブ（明るい緑系） */
.wmld-tabs {
  display: flex;
  width: 100%;
  gap: 5px;
  padding: 6px;
  background: #eaf7ec;
  border-radius: 16px;
  margin-bottom: 30px;
}

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

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

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

.wmld-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
}

.wmld-row {
  border-bottom: 1px solid #bfe5c1;
}

.wmld-label {
  width: 170px;
  padding: 24px 40px 24px 4px;
  font-size: 16px;
  font-weight: 400;
  color: #555;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.wmld-value {
  padding: 24px 4px 24px 24px;
  font-size: 16px;
  color: #222;
  line-height: 1.9;
  vertical-align: top;
}

.wmld-value--rich p {
  margin: 0 0 12px;
}

.wmld-value--rich p:last-child {
  margin-bottom: 0;
}

.wmld-subheading {
  font-weight: 700;
  margin-top: 14px !important;
}

.wmld-section-hr {
  border: none;
  border-top: 1px dashed #86a688;
  margin: 16px 0;
}

/* =========================================================
   クリッカブルカード: レイアウトを一から再構築
   横並びメディアカード → 上部ワイドバナー型の縦構成カードへ
   ========================================================= */
.wmylist-card.wmylist-card--clickable {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5ffe6;
  border-radius: 22px;
  box-shadow: 0 6px 22px rgba(36,80,40,0.08);
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.wmylist-card.wmylist-card--clickable:hover {
  box-shadow: 0 18px 40px rgba(36,80,40,0.18);
  transform: translateY(-5px);
}

/* 本体を縦積みに（バナー → 情報） */
.wmylist-card.wmylist-card--clickable .wmylist-card-body {
  flex-direction: column;
}

/* サムネを上部のワイドバナーへ */
.wmylist-card.wmylist-card--clickable .wmylist-card-thumb {
  width: 100%;
  height: 180px;
  position: relative;
}

/* バナー下部にグラデーションを重ねて締まりを出す */
.wmylist-card.wmylist-card--clickable .wmylist-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}

/* ステータスをバナー右上にフロートするバッジへ */
.wmylist-card.wmylist-card--clickable .wmylist-card-info {
  position: static;
  padding: 20px 22px 14px;
}

.wmylist-card.wmylist-card--clickable .wmylist-card-status {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: #4c9e51;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}

/* 日付をピル型チップに */
.wmylist-card.wmylist-card--clickable .wmylist-card-top-row {
  margin-bottom: 12px;
}

.wmylist-card.wmylist-card--clickable .wmylist-card-date {
  display: inline-flex;
  align-items: center;
  background: #eef6ef;
  color: #3d8042;
  font-weight: 600;
  font-size: 14px;
  padding: 5px 13px;
  border-radius: 30px;
}

/* タイトルを大きく */
.wmylist-card.wmylist-card--clickable .wmylist-card-title {
  font-size: 22px;
  margin-bottom: 14px;
  line-height: 1.35;
}

/* メタ情報を横並びのチップ列に */
.wmylist-card.wmylist-card--clickable .wmylist-card-meta {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.wmylist-card.wmylist-card--clickable .wmylist-card-meta-icon {
  color: #4c9e51;
}

.wmylist-card.wmylist-card--clickable .wmylist-card-price {
  color: #3d8042;
  font-weight: 700;
}

/* 案件IDを左寄せの控えめ表示に */
.wmylist-card.wmylist-card--clickable .wmylist-card-id {
  text-align: left;
  margin-top: 14px;
}

/* アクションを角丸ピルボタンの横並びに（仕切り線を撤廃） */
.wmylist-card.wmylist-card--clickable .wmylist-card-actions {
  display: flex;
  gap: 10px;
  border-top: none;
  padding: 0 22px 20px;
}

.wmylist-card.wmylist-card--clickable .wmylist-card-action-btn {
  flex: 1;
  padding: 12px 0;
  border: 1.5px solid #4c9e51;
  border-radius: 12px;
  color: #3d8042;
  font-weight: 700;
  background: #fff;
}

.wmylist-card.wmylist-card--clickable .wmylist-card-action-btn:hover {
  background: #4c9e51;
  color: #fff;
}

@media (max-width: 600px) {
  .wmld-label {
    width: 110px;
    font-size: 15px;
  }
  .wmld-tabs {
    overflow-x: auto;
  }
  .wmld-tab {
    padding: 10px 14px;
    white-space: nowrap;
  }
}

/* ===========================
   作業手順・報告ページ (wprocedure)
=========================== */
.wmld-status-badge--green {
  border-color: #2e7d32;
  color: #2e7d32;
}

.wprocedure-body {
  padding: 36px 0 48px;
  max-width: 760px;
}

@media (max-width: 600px) {
  .wprocedure-body {
    padding-top: 18px;
    padding-bottom: 24px;
  }
}

.wprocedure-body--center {
  text-align: center;
  margin: 0 auto;
}

.wprocedure-lead {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.7;
  color: #1a1a1a;
  margin: 0 0 18px;
}

.wprocedure-lead--center {
  text-align: center;
}

/* 補足の本文コピー（リード文より一段下の階層） */
.wprocedure-text {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin: 0 0 24px;
}

.wprocedure-text--center {
  font-size: 17px;
  line-height: 1.9;
  color: #222;
  margin: 0 0 24px;
  text-align: center;
}

.wprocedure-flow {
  display: inline-block;
  text-align: left;
  background: #f3f9f4;
  border-radius: 16px;
  padding: 18px 28px;
  margin: 4px 0 28px;
  font-size: 18px;
  line-height: 2.1;
  color: #333;
}

.wprocedure-flow p {
  margin: 0;
}

.wprocedure-flow p:first-child {
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.wprocedure-note {
  font-size: 14px;
  color: #888;
  margin: 20px 0;
  line-height: 1.8;
}

.wprocedure-note--center {
  text-align: center;
}

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

.wprocedure-link:hover {
  color: #0f569f;
}

.wprocedure-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 44px;
  margin-bottom: 44px;
}

.wprocedure-actions--center {
  justify-content: center;
}

@media (max-width: 600px) {
  .wprocedure-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .wprocedure-actions > * {
    width: 100%;
    box-sizing: border-box;
  }
}

.btn-wprocedure-outline {
  padding: 15px 36px;
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-wprocedure-outline:hover {
  background: #eaf6eb;
}

.btn-wprocedure-primary {
  padding: 15px 36px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

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

.btn-wprocedure-ghost {
  padding: 15px 36px;
  background: #fff;
  color: #555;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-wprocedure-ghost:hover {
  background: #eaf6eb;
}

/* ===========================
   作業手順確認モーダル (wprocedure-modal-*)
=========================== */
.wprocedure-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 20px 16px;
  overflow-y: auto;
}

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

.wprocedure-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  margin: auto;
}

.wprocedure-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #d6eed7;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  border-radius: 16px 6px 0 0;
}

.wprocedure-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

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

.wprocedure-modal-close:focus {
  outline: none;
}

.wprocedure-modal-close:focus-visible {
  outline: 2px solid #4c9e51;
  outline-offset: 2px;
}

.wprocedure-modal:focus,
.wprocedure-modal:focus-visible {
  outline: none;
}

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

.wprocedure-modal-body {
  padding: 20px 20px 8px;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
}

.wprocedure-modal-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin: 0 0 14px;
}

/* デモにない「作業手順を編集」：右寄せの緑枠ボタン */
.wprocedure-modal-section-title--with-edit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-procedure-html-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 16px;
  background: #fff;
  border: 1.5px solid #4c9e51;
  border-radius: 14px;
  color: #4c9e51;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.btn-procedure-html-edit:hover {
  background: #4c9e51;
  color: #fff;
}

/* 確認モーダルは見本表示。入力欄に見えないよう操作不可にする（HTML編集のtextareaは除外）
   受注者の作業報告モード（.wprocedure-modal--report）では入力可能にする
   発注者検収の納品アンケート（.kenshu-confirm-survey）は入力可能にする */
.wprocedure-modal-body input,
.wprocedure-modal-body select,
.wprocedure-modal-body textarea:not(.wprocedure-html-editor-textarea) {
  pointer-events: none;
  caret-color: transparent;
  background: #f5f5f5 !important;
  color: #666 !important;
  box-shadow: none !important;
}

.wprocedure-modal-body .kenshu-confirm-survey input,
.wprocedure-modal-body .kenshu-confirm-survey select,
.wprocedure-modal-body .kenshu-confirm-survey textarea {
  pointer-events: auto;
  caret-color: auto;
  background: #fff !important;
  color: #222 !important;
}

.wprocedure-modal-body .wprocedure-modal-photo-box,
.wprocedure-modal-body .wprocedure-modal-photo-action {
  pointer-events: none;
  cursor: default;
}

.wprocedure-modal--report .wprocedure-modal-body #procedure-modal-report-panel input,
.wprocedure-modal--report .wprocedure-modal-body #procedure-modal-report-panel select,
.wprocedure-modal--report .wprocedure-modal-body #procedure-modal-report-panel textarea {
  pointer-events: auto;
  caret-color: auto;
  background: #fff !important;
  color: #222 !important;
}

.wprocedure-modal--report .wprocedure-modal-body #procedure-modal-report-panel .wprocedure-modal-photo-box,
.wprocedure-modal--report .wprocedure-modal-body #procedure-modal-report-panel .wprocedure-modal-photo-action,
.wprocedure-modal--report .wprocedure-modal-body #procedure-modal-report-panel .wreport-photo-box {
  pointer-events: auto;
  cursor: pointer;
}

.wprocedure-modal--report .wprocedure-modal-body #procedure-modal-report-panel .wprocedure-modal-input {
  width: 100%;
  margin: 0 0 16px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.wprocedure-modal--report .wprocedure-modal-body #procedure-modal-report-panel .wprocedure-report-textarea {
  min-height: 120px;
  resize: vertical;
}

/* HTML手順をそのまま報告フォームにする */
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root input,
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root select,
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root textarea {
  pointer-events: auto;
  caret-color: auto;
  background: #fff !important;
  color: #222 !important;
}

.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root .wprocedure-modal-photo-box,
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root .wprocedure-modal-photo-action,
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root .wreport-photo-box {
  pointer-events: auto;
  cursor: pointer;
}

.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root .wprocedure-modal-input,
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root .wreport-section-date-input {
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root .wreport-section-date-input {
  max-width: 220px;
}

.wprocedure-modal-check-content {
  display: block;
}

.wprocedure-modal--report .wprocedure-modal-check-content {
  display: none !important;
}

.wprocedure-modal-report-content[hidden] {
  display: none !important;
}

.wprocedure-modal-body > #wreportPhotoRoot[hidden] {
  display: none !important;
}

.wreport-photo-box--filled {
  border-style: solid;
  border-color: #ccc;
  background: #fff;
  padding: 0;
  overflow: hidden;
}

.wreport-photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 13px;
}

.wprocedure-modal-date-select {
  width: auto;
  max-width: 4.5em;
  flex: 0 0 auto;
}

.wprocedure-modal-photo-badge {
  border-radius: 50% !important;
}

.wprocedure-modal-input--readonly {
  width: 100%;
  margin: 0 0 16px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}

.wprocedure-modal-html-user,
.wprocedure-modal-html {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wprocedure-modal-html-user img,
.wprocedure-modal-html img {
  max-width: 100%;
  height: auto;
}

.wprocedure-modal-html-user table,
.wprocedure-modal-html table {
  max-width: 100%;
}

/* ---- 作業手順 HTML 編集モーダル（デモにない独自UI） ---- */
.wprocedure-modal-overlay--html-editor {
  z-index: 12000;
  align-items: center;
}

.wprocedure-modal--html-editor {
  max-width: min(1100px, 98vw);
  width: 100%;
  height: min(780px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wprocedure-modal--html-editor .wprocedure-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding-bottom: 0;
}

.wprocedure-html-editor-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.wprocedure-html-editor-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  flex-shrink: 0;
}

.wprocedure-html-editor-lead--secondary {
  font-size: 13px;
  color: #666;
}

.wprocedure-html-editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
}

.wprocedure-html-editor-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid #d6eed7;
  border-radius: 12px;
  overflow: hidden;
  background: #f7faf7;
}

.wprocedure-html-editor-pane-label {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #3d8042;
  background: #eef8ef;
  border-bottom: 1px solid #d6eed7;
}

.wprocedure-html-editor-preview-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px;
  background: #fff;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wprocedure-html-editor-textarea {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  resize: none;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  background: #1f2421;
  color: #e8eee8;
  outline: none;
}

.wprocedure-html-editor-textarea:focus {
  box-shadow: none;
  border-color: transparent;
}

.wprocedure-html-editor-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 20px 16px;
  border-top: 1px solid #bfe5c1;
  background: #fff;
  border-radius: 0 0 6px 6px;
}

.wprocedure-html-editor-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.wprocedure-html-editor-btn-row-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.wprocedure-html-editor-footer .btn-secondary,
.wprocedure-html-editor-footer .wprocedure-modal-start-btn {
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 20px;
  font-size: 16px;
  line-height: 1.25;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wprocedure-html-editor-footer .btn-secondary {
  border-width: 1.5px;
}

.wprocedure-html-editor-toast {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(100% + 8px);
  z-index: 3;
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.wprocedure-html-editor-toast[hidden] {
  display: none !important;
}

.wprocedure-html-editor-toast.wprocedure-template-save-status--ok {
  background: #e8f5e9;
  color: #1a6b3a;
  border: 1px solid #bfe5c1;
}

.wprocedure-html-editor-toast.wprocedure-template-save-status--error {
  background: #fef3f2;
  color: #b42318;
  border: 1px solid #fecdca;
}

.wprocedure-template-save-note-label {
  font-weight: 700;
  color: #3d8042;
}

.wprocedure-modal-footer--actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: flex-start;
}

.wprocedure-modal-footer-primary {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.wprocedure-template-save-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .wprocedure-html-editor-split {
    grid-template-columns: 1fr;
  }

  .wprocedure-html-editor-preview-box,
  .wprocedure-html-editor-textarea {
    max-height: min(36vh, 320px);
  }
}

.wprocedure-modal-h2 {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  background: #f5f7fa;
  border-left: 3px solid #4c9e51;
  padding: 6px 10px;
  margin: 20px 0 10px;
}

.wprocedure-modal-overview {
  background: #fafafa;
  border: 1px solid #bfe5c1;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.8;
}

.wprocedure-modal-overview p {
  margin: 0 0 6px;
}

.wprocedure-modal-overview p:last-child {
  margin: 0;
}

.wprocedure-modal-note {
  font-size: 15px;
  color: #4c9e51;
  margin: 0 0 4px;
}

.wprocedure-modal-divider {
  border: none;
  border-top: 1px solid #bfe5c1;
  margin: 18px 0;
}

/* 写真エリア */
.wprocedure-modal-photo-label {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 12px 0 6px;
}

.wprocedure-modal-field-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 12px 0 6px;
}

.wprocedure-field-required,
.wprocedure-modal .mandatory,
.wprocedure-html-editor-preview-box .mandatory,
.wprocedure-html-editor-preview-box .wprocedure-field-required,
.wprocedure-modal-html-user .mandatory,
.wprocedure-modal-html-user .wprocedure-field-required,
.wprocedure-html-report-root .mandatory {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: #c62828;
  border-radius: 3px;
  vertical-align: middle;
}

.wprocedure-modal-photo-label .wprocedure-field-required,
.wprocedure-modal-photo-label .mandatory,
.wprocedure-modal-field-label .wprocedure-field-required,
.wprocedure-modal-field-label .mandatory,
.wconfirm-table th .wprocedure-field-required {
  font-size: 10px;
}

.wprocedure-modal-checkbox-group,
.wprocedure-modal-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  color: #333;
}

.wprocedure-modal-checkbox-group label,
.wprocedure-modal-radio-group label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  cursor: pointer;
}

.wreport-text-field,
.wreport-number-field,
.wreport-date-field,
.wreport-checkbox-field,
.wreport-radio-field {
  margin-bottom: 4px;
}

.wprocedure-html-report-root .meta {
  background: #e8f5e9;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.95em;
  border-left: 4px solid #4caf50;
}

.wprocedure-html-report-root .page-label {
  background: #4caf50;
  color: #fff;
  font-size: 0.8em;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
  display: inline-block;
}

.wprocedure-html-report-root .page-section {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px dashed #c8e6c9;
}

.wprocedure-html-report-root .page-section:last-child {
  border-bottom: none;
}

.wprocedure-html-report-root h1.breakWord,
.wprocedure-html-report-root h2.breakWord,
.wprocedure-html-report-root h3.breakWord {
  color: #333;
  line-height: 1.5;
  margin: 12px 0 8px;
}

.wprocedure-html-report-root h1.breakWord {
  font-size: 1.15em;
  border-bottom: 2px solid #4caf50;
  padding-bottom: 6px;
}

.wprocedure-html-report-root .noDisplay,
.wprocedure-html-report-root .ctrlLoadingImage,
.wprocedure-html-report-root .advLoadingImage,
.wprocedure-html-report-root .sglTrashImg,
.wprocedure-html-report-root .advTrashImg,
.wprocedure-html-report-root .sglChooserCol,
.wprocedure-html-report-root .ctrlUploadWrapper {
  display: none !important;
}

.wprocedure-modal-photo-box {
  position: relative;
  width: 110px;
  height: 90px;
  background: #f0f0f0;
  border: 1px dashed #bbb;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
}

.wprocedure-modal-photo-icon {
  color: #bbb;
}

.wprocedure-modal-photo-badge {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: #4c9e51;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.wprocedure-modal-photo-action {
  font-size: 15px;
  color: #4c9e51;
  text-decoration: underline;
  cursor: pointer;
  margin: 4px 0 8px;
  display: inline-block;
}

/* 日付フィールド */
.wprocedure-modal-date-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: #333;
  margin: 8px 0;
}

.wprocedure-modal-date-select {
  padding: 5px 8px;
  border: 1px solid #86a688;
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
}

/* バッジ */
.wprocedure-modal-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 12px;
  margin-left: 6px;
}

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

.wprocedure-modal-badge--blue {
  background: #0f569f;
  color: #fff;
}

/* テーブル形式 */
.wprocedure-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin: 0 0 12px;
}

.wprocedure-modal-table th,
.wprocedure-modal-table td {
  border: 1px solid #6fb373;
  padding: 7px 10px;
  text-align: left;
  vertical-align: middle;
}

.wprocedure-modal-table th {
  background: #f5f7fa;
  font-weight: 700;
  font-size: 15px;
}

/* ラジオ */
.wprocedure-modal-radios {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 8px 0;
}

.wprocedure-modal-radio-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  cursor: pointer;
}

/* テキスト入力 */
.wprocedure-modal-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #86a688;
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
}

/* 強調ボックス */
.wprocedure-modal-info-box {
  background: #f1faf2;
  border: 1px solid #c8e6c9;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 16px;
  margin: 10px 0 14px;
}

/* 立替金セクション */
.wprocedure-modal-box {
  background: #f5f7fa;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.75;
  margin: 8px 0 16px;
}

/* 業務完了メッセージ */
.wprocedure-modal-finish {
  text-align: center;
  padding: 20px 0 8px;
  font-size: 17px;
  line-height: 1.9;
  color: #222;
}

.wprocedure-modal-finish strong {
  font-size: 18px;
}

/* フッター */
.wprocedure-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 18px;
  border-top: 1px solid #bfe5c1;
  background: #fff;
  border-radius: 0 0 6px 6px;
}

.wprocedure-modal-page-info {
  font-size: 15px;
  color: #999;
}

.wprocedure-modal-start-btn {
  padding: 11px 24px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.wprocedure-modal-start-btn:hover {
  background: #3d8042;
}

/* 報告モード フッターボタン群 */
.wprocedure-modal-alert {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: #856404;
  font-size: 13px;
}

.wprocedure-modal-required-error {
  background: #fff5f5;
  border: 1px solid #f5c6c6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  color: #c0392b;
  font-size: 14px;
  line-height: 1.5;
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.12);
}

.wprocedure-modal-required-error[hidden] {
  display: none !important;
}

.wprocedure-modal-required-error:focus {
  outline: none;
}

.wprocedure-modal-required-error-title {
  font-weight: 700;
  margin: 0 0 8px;
}

.wprocedure-modal-required-error-list {
  margin: 0;
  padding-left: 1.3em;
}

.wprocedure-modal-required-error-list li + li {
  margin-top: 4px;
}

.wprocedure-modal-required-error-jump {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.wprocedure-modal-required-error-jump:hover {
  color: #922b21;
}

.wreport-field--invalid {
  border-radius: 8px;
  background: #fff5f5;
  box-shadow: 0 0 0 2px #c0392b;
  padding: 8px;
}

.wreport-field--invalid .wprocedure-modal-photo-box,
.wreport-field--invalid .wprocedure-modal-input,
.wreport-field--invalid .wprocedure-input,
.wreport-field--invalid .wprocedure-modal-checkbox-group,
.wreport-field--invalid .wprocedure-modal-radio-group,
input.wreport-field--invalid,
textarea.wreport-field--invalid,
select.wreport-field--invalid {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root .wreport-field--invalid .wprocedure-modal-input,
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root .wreport-field--invalid .wprocedure-input,
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root .wreport-field--invalid .wreport-section-date-input,
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root input.wreport-field--invalid,
.wprocedure-modal--report .wprocedure-modal-body .wprocedure-html-report-root textarea.wreport-field--invalid {
  border-color: #c0392b !important;
  background: #fff5f5 !important;
}

.wprocedure-modal-footer-report {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

.wprocedure-modal-btn-secondary {
  padding: 11px 16px;
  background: #eaf6eb;
  color: #555;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.wprocedure-modal-btn-secondary:hover {
  background: #e8e8e8;
}

.wprocedure-modal-btn-outline {
  padding: 11px 16px;
  background: #fff;
  color: #4c9e51;
  border: 1px solid #d6eed7;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.wprocedure-modal-btn-outline:hover {
  background: #eef8ef;
}

/* 作業報告の確認モーダル（入力内容に応じて横幅を広げる） */
.wprocedure-modal--confirm {
  max-width: min(920px, calc(100vw - 32px));
}

#confirm-modal-overlay .wprocedure-modal-body {
  min-width: 0;
  overflow-x: hidden;
}

#confirm-report-summary {
  min-width: 0;
}

/* 確認モーダル テーブル */
.wconfirm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin-bottom: 16px;
  table-layout: fixed;
}

.wconfirm-table th,
.wconfirm-table td {
  padding: 8px 10px;
  border: 1px solid #d6eed7;
  vertical-align: top;
}

.wconfirm-table th {
  background: #f7f7f7;
  color: #555;
  font-weight: 700;
  white-space: normal;
  width: 34%;
  min-width: 7em;
}

.wconfirm-table td {
  color: #333;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wconfirm-table td .wconfirm-thumb {
  max-width: 120px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid #d6eed7;
}

/* 作業報告一覧テーブル */
.wreport-table-wrap {
  margin-top: 20px;
  border: 1px solid #d6eed7;
  border-radius: 16px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .wreport-table-wrap {
    overflow-x: auto;
  }
  .wreport-table {
    min-width: 560px;
  }
}

.wreport-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: #fff;
}

.wreport-table thead tr {
  background: #f7f7f7;
}

.wreport-table th {
  padding: 10px 12px;
  border-bottom: 1px solid #d6eed7;
  color: #555;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.wreport-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #d6eed7;
  color: #333;
  vertical-align: middle;
  white-space: nowrap;
}

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

.wreport-table-actions {
  padding: 10px 12px;
}

.btn-wreport-outline {
  display: inline-block;
  padding: 6px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 14px;
  cursor: pointer;
  margin-right: 8px;
}

.btn-wreport-outline:hover {
  background: #eaf6eb;
}

.btn-wreport-primary {
  display: inline-block;
  padding: 6px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #3d8042;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

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

/* 作業報告途中バナー / 引き受け完了バナー（正デモ worker.css 寄せ） */
.wreport-info-banner,
.wprocedure-info-banner {
  background: #e8f4fd;
  border: 1px solid #b3d7f5;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 17px;
  color: #0f569f;
  margin-bottom: 20px;
}

.wprocedure-info-banner {
  margin-bottom: 32px;
}

/* タブ直下のフラッシュがあるとき、報告中などモード内の同文バナーは出さない */
.wmld-inner > .wprocedure-info-banner + .wprocedure-body > .wreport-info-banner,
.wmld-inner > .wprocedure-info-banner + .wprocedure-body > .wprocedure-info-banner {
  display: none;
}

/* 無効化ボタン（作業報告を追加する・報告中は押せない） */
.btn-wprocedure-disabled {
  padding: 11px 28px;
  background: #b0b0b0;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 仕事引き受け・辞退確認ポップアップ */
.wprocedure-popup {
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px 24px;
  width: 90%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.wprocedure-popup-message {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin: 0 0 24px;
}

.wprocedure-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wprocedure-popup-actions form {
  margin: 0;
  width: 100%;
}

.wprocedure-popup-actions .btn-wprocedure-primary,
.wprocedure-popup-actions .btn-wprocedure-ghost {
  width: 100%;
}

/* 検収確認モーダル */
.kenshu-confirm-row {
  display: flex;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #bfe5c1;
  font-size: 16px;
}

.kenshu-confirm-row:first-of-type {
  border-top: 1px solid #bfe5c1;
}

.kenshu-confirm-label {
  width: 90px;
  flex-shrink: 0;
  color: #555;
  padding-top: 2px;
}

.kenshu-confirm-value {
  color: #222;
}

.kenshu-confirm-billing {
  flex: 1;
}

.kenshu-billing-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #d6eed7;
  font-size: 16px;
  color: #333;
}

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

.kenshu-billing-item--bold {
  font-weight: 700;
}

.kenshu-billing-total {
  text-align: right;
  font-size: 17px;
  font-weight: 700;
  color: #222;
  padding: 10px 0 4px;
}

.kenshu-confirm-survey {
  flex: 1;
}

.kenshu-confirm-survey-intro {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px;
}

.kenshu-confirm-survey-note {
  font-size: 15px;
  color: #4c9e51;
  margin: 0 0 14px;
}

.kenshu-confirm-survey-q {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px;
}

.kenshu-confirm-survey-radios {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 6px 0 16px;
  flex-wrap: wrap;
}

.kenshu-confirm-survey-radios label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  cursor: pointer;
}

.kenshu-confirm-survey-textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid #86a688;
  border-radius: 14px;
  padding: 8px 10px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.kenshu-confirm-footer-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 16px 20px 20px;
}

.kenshu-confirm-footer-btns > button {
  flex: 0 0 auto;
  white-space: nowrap;
  box-sizing: border-box;
}

.kenshu-confirm-cancel-btn {
  padding: 11px 28px;
  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;
}

.kenshu-confirm-cancel-btn:hover {
  background: #eaf6eb;
}

/* 検収モーダル内差し戻し（一覧行ではなく内容確認後に押せるよう配置） */
.kenshu-confirm-reject-btn {
  padding: 11px 28px;
  background: #fff;
  color: #2e7d32;
  border: 1.5px solid #86a688;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.kenshu-confirm-reject-btn:hover {
  background: #eaf6eb;
}

.kenshu-confirm-reject-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* corecara-work デモの承認ボタン相当（一行固定） */
.kenshu-confirm-approve-btn {
  padding: 11px 24px;
  background: #4c9e51;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.kenshu-confirm-approve-btn:hover {
  background: #3d8042;
}

.kenshu-confirm-approve-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kenshu-report-main {
  margin-bottom: 8px;
}

.kenshu-report-photo {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin: 0 0 8px;
}

.kenshu-confirm-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  vertical-align: middle;
}

.kenshu-complete-intro-note {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  margin: 10px 0 0;
}

/* 承認完了モーダル */
.kenshu-complete-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #bfe5c1;
}

.kenshu-complete-header-close {
  flex-shrink: 0;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.kenshu-complete-header-close:hover {
  background: #eaf6eb;
}

.kenshu-complete-title {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin: 0;
  line-height: 1.4;
}

.kenshu-complete-intro {
  padding: 20px 0;
  border-bottom: 1px solid #bfe5c1;
  margin-bottom: 4px;
}

.kenshu-complete-intro p {
  font-size: 16px;
  color: #333;
  margin: 0 0 14px;
  line-height: 1.7;
}

.kenshu-complete-intro p:last-child {
  margin-bottom: 0;
}

.kenshu-complete-survey-answer {
  font-size: 16px;
  color: #333;
  margin: 0 0 14px;
  padding-left: 14px;
}

.kenshu-complete-footer {
  display: flex;
  justify-content: center;
  padding: 16px 20px 24px;
}

.kenshu-complete-footer-btn {
  padding: 12px 80px;
  background: #fff;
  color: #333;
  border: 1px solid #86a688;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.kenshu-complete-footer-btn:hover {
  background: #eaf6eb;
}

/* ===========================
   作業手順・報告（引き受け後）
=========================== */
/* 住所・電話・補足事項をまとめる白背景ボックス */
.wprocedure-info-card {
  background: #fff;
  border: 1px solid #e5ffe6;
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(36,80,40,0.06);
  padding: 22px 26px;
  margin: 24px 0;
}

.wprocedure-info-card > *:first-child { margin-top: 0; }
.wprocedure-info-card > *:last-child { margin-bottom: 0; }

.wprocedure-special-notes {
  margin: 24px 0 20px;
}

.wprocedure-special-notes-title {
  font-size: 14px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.wprocedure-special-notes-contact {
  font-size: 18px;
  color: #1a1a1a;
  white-space: pre-wrap;
}

.wprocedure-address-section {
  margin: 20px 0 24px;
}

.wprocedure-phone-section {
  margin: 20px 0 24px;
}

.wprocedure-phone-label {
  font-size: 14px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.wprocedure-phone-number {
  font-size: 18px;
  color: #1a1a1a;
}

.wprocedure-address-value {
  font-size: 18px;
  color: #1a1a1a;
}

.wprocedure-report-note {
  font-size: 16px;
  color: #555;
  text-align: center;
  margin: 10px 0 24px;
}

/* 完了報告ポップアップ */
.wprocedure-modal--compact {
  max-width: 460px;
}

.wcomplete-modal-text {
  font-size: 17px;
  color: #333;
  line-height: 1.7;
  margin: 0 0 10px;
}

.wcomplete-modal-text:last-child {
  margin-bottom: 0;
}

/* .wprocedure-info-banner は .wreport-info-banner と共通化（上部でグループ定義） */

.wprocedure-out-of-period {
  background: #fff5f5;
  border: 1px solid #f5c6c6;
  border-radius: 8px;
  padding: 12px 16px;
  color: #c0392b;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  margin: 16px 0;
}

.btn-wprocedure-primary--disabled,
.btn-wprocedure-primary--disabled:hover {
  background: #bbb;
  cursor: not-allowed;
}

/* ===========================
   成功アラートバナー
=========================== */
.w-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #e8f4fd;
  border: 1.5px solid #0f569f;
  border-radius: 18px;
  padding: 14px 18px 14px 16px;
  margin-bottom: 20px;
}

.w-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #fff;
  flex-shrink: 0;
}

.w-toast-body {
  flex: 1;
}

.w-toast-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f569f;
  line-height: 1.4;
}

.w-toast-icon svg {
  stroke: #0f569f;
}

.w-toast-sub {
  font-size: 15px;
  color: #555;
  margin-top: 2px;
  line-height: 1.4;
}

/* =========================================================
   レイアウト刷新（カード型・余白広め／受注者）
   ※ HTML/JS は変更せず、主要コンテナ・カード・余白のみ調整
========================================================= */
/* ヘッダー */
.worker-header-inner { height: 64px; }
.worker-header {
  border-bottom: 1px solid #e5ffe6;
  box-shadow: 0 2px 16px rgba(36,80,40,0.05);
}

/* ページ余白を拡大 */
.worker-main  { padding: 56px 24px 80px; }
.wmypage-main { padding: 40px 24px 64px; }
.wlist-main   { padding: 20px 24px 64px; }
.wdetail-main { padding: 20px 24px 56px; }
.wmylist-main { padding: 20px 24px 64px; }

/* フォーム/コンテンツを白カード化 */
.worker-card,
.wwithdrawal-notice {
  background: #fff;
  border: 1px solid #e5ffe6;
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(36,80,40,0.06);
  padding: 48px 48px;
}
.wdetail-inner {
  background: #fff;
  border: 1px solid #e5ffe6;
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(36,80,40,0.06);
  padding: 26px 30px;
}

/* 検索結果パネル: 背景を淡色にして白カードを際立たせる */
.wsearch-list-section { background: #f3f9f4; }

/* 一覧の行を独立カードに */
.wlist-item,
.wsearch-list-item {
  background: #fff;
  border: 1px solid #e5ffe6;
  border-bottom: 1px solid #e5ffe6;
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(36,80,40,0.05);
  padding: 20px 22px;
  margin-bottom: 16px;
  transition: box-shadow 0.18s, transform 0.18s;
}
.wlist-item:hover,
.wsearch-list-item:hover {
  box-shadow: 0 10px 24px rgba(36,80,40,0.12);
  transform: translateY(-3px);
}

/* =========================================================
   一覧アイテムを my-list クリッカブルカードと同様の
   上部バナー型・縦構成カードへ再構築
   ========================================================= */
.wlist-item {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e5ffe6;
  border-radius: 22px;
  box-shadow: 0 6px 22px rgba(36,80,40,0.08);
}

.wlist-item:hover {
  box-shadow: 0 18px 40px rgba(36,80,40,0.18);
  transform: translateY(-5px);
}

/* 画像を上部のワイドバナーへ */
.wlist-item .wlist-item-img {
  width: 100%;
  height: 180px;
  border-radius: 0;
  position: relative;
}

/* バナー下部にグラデーションを重ねて締まりを出す */
.wlist-item .wlist-item-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}

/* 募集期日バッジをバナー右上にフロート */
.wlist-item .wlist-item-deadline,
.wlist-item .wlist-item-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.wlist-item .wlist-item-deadline--soon {
  padding: 5px 13px;
  border-radius: 30px;
}

/* 本文に余白 */
.wlist-item .wlist-item-body {
  padding: 20px 22px 8px;
  gap: 8px;
}

/* 期日をピル型チップに */
.wlist-item .wlist-item-period {
  display: inline-flex;
  align-items: center;
  background: #eef6ef;
  color: #3d8042;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 30px;
}

/* タイトルを大きく・折り返し可能に */
.wlist-item .wlist-item-title {
  font-size: 22px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

.wlist-item .wlist-item-meta-icon,
.wlist-item .wlist-item-tag svg {
  color: #4c9e51;
}

/* アクションを下部のフル幅ピルボタンに */
.wlist-item .wlist-item-action {
  margin-left: 0;
  padding: 6px 22px 20px;
}

.wlist-item .btn-wlist-detail {
  display: flex;
  width: 100%;
  border-radius: 12px;
}

/* マイリストカード */
.wmylist-card {
  border-color: #e5ffe6;
  border-radius: 20px;
  box-shadow: 0 3px 14px rgba(36,80,40,0.06);
  margin-bottom: 18px;
  transition: box-shadow 0.18s, transform 0.18s;
}
.wmylist-card:hover {
  box-shadow: 0 10px 24px rgba(36,80,40,0.12);
  transform: translateY(-3px);
}

/* =========================================================
   共通デザインシステム層（デザイントークン + 横断統一ルール）
   ※ 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;
}

/* =========================================================
   余白設計の全体展開（受注者）: コンテナ所有のスタックスペーシング
   ※ 子の上下マージン依存を解除し、コンテナが要素間の余白を所有。
     block の縦積みコンテナ（各ページ本文ラッパー / フォームカード）に適用。
     worker.css は後読みのため、ここで確実に最終適用される。
========================================================= */
:root { --ds-stack-gap: 20px; }

.wlist-inner > * ,
.wdetail-inner > * ,
.wmylist-inner > * ,
.wreward-inner > * ,
.wmsg-inner > * ,
.wbasic-inner > * ,
.wcontact-inner > * ,
.worker-card > * {
  margin-top: 0;
  margin-bottom: 0;
}
.wlist-inner > * + * ,
.wdetail-inner > * + * ,
.wmylist-inner > * + * ,
.wreward-inner > * + * ,
.wmsg-inner > * + * ,
.wbasic-inner > * + * ,
.wcontact-inner > * + * ,
.worker-card > * + * {
  margin-top: var(--ds-stack-gap);
}

/* =========================================================
   コンテナ幅の統一（PC閲覧時 約1200px／受注者）
   ※ worker.css は後読みのため、ここで確実に最終適用される。
     モーダル(.wmylist-modal)は対象外。
========================================================= */
:root { --ds-container: 1200px; }

.worker-header-inner,
.worker-card,
.worker-card--wide,
.wmypage-content,
.wsearch-controls-inner,
.wlist-inner,
.wdetail-inner,
.wmylist-inner,
.wreward-inner,
.wmsg-inner,
.wth-inner,
.wbasic-inner,
.wcontact-inner,
.wsidebar-layout,
.wmld-inner,
.wprocedure-body {
  max-width: var(--ds-container);
  width: 100%;
}

/* コンテナ幅統一の追補: 全幅だったマニュアル本文(.wmanual-main)を中央1200pxに */
.wmanual-main {
  max-width: var(--ds-container);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* profile-confirm: 角丸テーブルの行区切り線を整える
   （テーブルヘッダー統一ルールが th の border-bottom を none にするため復活させ、
     最終行は下線を消して角丸の下端をきれいに見せる） */
.confirm-th {
  border-bottom: 1px solid #d6eed7;
  background-color: transparent;
  color: #333;
  width: 1%;
  white-space: nowrap;
}
.confirm-row:last-child .confirm-th,
.confirm-row:last-child .confirm-td {
  border-bottom: none;
}

/* reward.html: 表の全セルを文字幅に合わせる
   （.pay-table は width:100%+min-width:2200px で強制的に広がり各列に余白が出るため、
     reward の表に限定して内容幅に縮め、全セルを nowrap で1行に収める） */
.wreward-table-wrap .pay-table {
  width: auto;
  min-width: 0;
}
.wreward-table-wrap .pay-table th,
.wreward-table-wrap .pay-table td {
  white-space: nowrap;
  padding: 16px 20px;
}

/* =========================================================
   レスポンシブ調整（スマホ ~768px／受注者）
   ※ 横長要素をカラム落ち/縦積みさせ、余白を縮小する単純設計。
     worker.css は後読みのため、ここで確実に最終適用。
========================================================= */
@media (max-width: 768px) {
  .worker-header-inner { padding: 0 12px; }

  /* ページ余白を縮小 */
  .worker-main { padding: 28px 12px 48px; }
  .wmypage-main { padding: 24px 12px 40px; }
  .wlist-main,
  .wdetail-main,
  .wbasic-main,
  .wcontact-main,
  .wmanual-main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .wmld-main,
  .wth-main,
  .wreward-main,
  .wmylist-main,
  .wmsg-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* カードの余白を縮小 */
  .worker-card { padding: 20px; }
  .wwithdrawal-notice {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .wdetail-inner { padding: 18px 14px; }

  /* 検索コントロールの子要素はカラム落ち */
  .wsearch-controls-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .wsearch-right {
    flex-shrink: 1;
    width: 100%;
    min-width: 0;
  }

  .wsearch-datepicker-wrap {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .wsearch-datepicker {
    min-width: 0;
    flex: 1 1 auto;
  }

  .wsearch-datepicker-suffix {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
  }

  /* 横長の一覧行はカラム落ち */
  .wlist-item,
  .wsearch-list-item { flex-wrap: wrap; }

  /* マイリストのサイドタブはカラム落ち（横並びのピル） */
  .wmylist-layout { flex-direction: column; }
  .wmylist-sidetabs {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .wmylist-sidetab {
    flex: 1 1 calc(50% - 4px);
    text-align: center;
  }

  /* 地域選択グリッド(3列)を2列に */
  .wregion-grid { grid-template-columns: repeat(2, 1fr); }
}

/* my-list-detail.html: スマホでは表の見出し(th)と値(td)をカラム落ち（縦積み）に */
@media (max-width: 768px) {
  .wmld-table,
  .wmld-table tbody,
  .wmld-row,
  .wmld-label,
  .wmld-value {
    display: block;
    width: 100%;
  }
  .wmld-label {
    padding: 14px 0 0;
    white-space: normal;   /* 全幅になるため長い見出しは折り返す */
    font-weight: 700;
  }
  .wmld-value {
    padding: 4px 0 14px;
  }
}

/* =========================================================
   受注者ヘッダー: モバイルでハンバーガーメニュー化（発注者側と同挙動）
   ※ .wmypage-body のグリッド/contents 指定を解除し、ナビをドロップダウンに。
     ハンバーガー表示(.hamburger)・.site-header position:relative・.is-open表示は
     style.css の既存モバイル指定を流用。
========================================================= */
@media (max-width: 900px) {
  .wmypage-body .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .wmypage-body .header-nav {
    display: none !important;
    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;
    gap: 0;
    z-index: 200;
  }
  .wmypage-body .header-nav.is-open {
    display: flex !important;
  }
  .wmypage-body .nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .wmypage-body .nav-item {
    width: 100%;
  }
  .wmypage-body .nav-item .nav-link {
    width: 100%;
    padding: 12px 8px;
    border-radius: 0;
    border-bottom: 1px solid #eef2ee;
  }
  .wmypage-body .nav-actions {
    display: none;
  }
}

/* profile.html: スマホでは入力行を縦積み（見出しセルと入力セルをカラム落ち） */
@media (max-width: 600px) {
  .profile-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .profile-label-cell {
    width: auto;
  }
}

/* account-basic.html: 入力項目を幅いっぱいに（都道府県・生年月日セレクト） */
.wbasic-field-col > .wbasic-select-wrap {
  display: flex;
  width: 100%;
}
.wbasic-select--pref {
  width: 100%;
}
.wbasic-birth-selects .wbasic-select-wrap {
  flex: 1;
  min-width: 0;
}
.wbasic-birth-selects .wbasic-select {
  flex: 1;
  width: auto;
  min-width: 0;
}

/* account-*-error: エラーバナー上部に余白を追加 */
.wbasic-error-banner {
  margin-top: 16px;
}

/* =========================================================
   transfer-history の表を messages の表と共通化（同じ見た目に）
   ※ messagesは .wmsg-* のセルクラス、transfer-historyは .wth-table 要素セレクタ。
     構造が違うため、共通プロパティをまとめて両方に適用する。
     見出しの緑背景は共通の green-header ルールから継承。
========================================================= */
.wmsg-table-wrap,
.wth-table-area {
  overflow-x: auto;
  border: 1px solid #6fb373;
  border-radius: 14px;
  margin-bottom: 20px;
  background-color: #fff;
}
.wmsg-table,
.wth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background-color: #fff;
}
.wmsg-th,
.wth-table th {
  padding: 12px 14px;
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  white-space: nowrap;
}
.wmsg-td,
.wth-table td {
  padding: 14px;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
  vertical-align: top;
  border-bottom: none;
}
.wmsg-tr,
.wth-table tbody tr {
  border-bottom: 1px solid #eee;
}
.wmsg-tr:last-child,
.wth-table tbody tr:last-child {
  border-bottom: none;
}
.wmsg-tr:hover,
.wth-table tbody tr:hover {
  background: #fafafa;
}
/* wth固有のヘッダー行スタイルを無効化（wmsgに合わせる） */
.wth-table thead tr {
  background: transparent;
  border-bottom: none;
}

/* =========================================================
   テキストリンクの共通スタイル（.wpr-back-login に統一）
========================================================= */
.wpr-back-login,
.worker-text-link,
.worker-login-link,
.btn-confirm-back,
.wprocedure-link,
.wbasic-link,
.wcontact-privacy-link,
.wcontact-notice a {
  color: #0f569f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wpr-back-login:hover,
.worker-text-link:hover,
.worker-login-link:hover,
.btn-confirm-back:hover,
.wprocedure-link:hover,
.wbasic-link:hover,
.wcontact-privacy-link:hover {
  color: #0f569f;
  text-decoration: none;
}
/* .wcontact-notice a はHTML側のinline styleを上書きするため!important */
.wcontact-notice a:hover {
  text-decoration: none !important;
}

/* =========================================================
   案件一覧フィルターピル: デモ準拠（狭い幅は横スクロール）
   ※ LayoutOrder が worker.css を後読みするため、ここでも担保する
========================================================= */
.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.27 受注者・案件詳細（スマホ） */
@media (max-width: 600px) {
  .wdetail-hero {
    flex-direction: column;
  }
}