/* ═══ SASHITE 本体の CSS（tehai-app.css を同じフォルダの 8 枚に分けたうちの 8/8・工程2 CSS・2026-09-28）═══
   保存の衝突・見張りの知らせ・保存バー（dockbar）・職人手配へ反映する箱・下のメニュー・再現率・吹き出し・つなぐ案内（shokunin-link）・以降の追加分
   ★中身は tehai-app.css の 4293〜5598 行目を **そのまま** 移したもの（1 文字も変えていない）。
   ★順番が大事（カスケード）：functions.php が 00 → 07 の順に読む（deps で固定）。@import はしない。モックも同じ順（tehai/tests/harness/render_*.php）。
   ★1 枚でも欠けると functions.php は旧 tehai-app.css（1 枚）に戻して読む（fallback）。旧ファイルは 1 週間置いてから、fallback の行と一緒に消す。 ═══ */
/* ── ここから本文（tehai-app.css の 4293〜5598 行目・移しただけ）── */
/* ── 保存の衝突（2026-09-14）── */
.confirm-modal.conflict-modal { max-width: 620px; width: calc(100% - 32px); text-align: left; }
.conflict-title { font-size: 16px; font-weight: 700; color: #c0392b; margin-bottom: 8px; }
.conflict-lead { font-size: 13px; color: #333; line-height: 1.7; margin: 0 0 10px; }
.conflict-sec { font-size: 12px; font-weight: 700; color: #6b7684; margin: 12px 0 4px; }
.conflict-log { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow: auto; border: 1px solid #e3e8ee; border-radius: 6px; scrollbar-width: thin; }
.conflict-log li { font-size: 12px; padding: 5px 8px; border-bottom: 1px solid #eef1f5; }
.conflict-log li:last-child { border-bottom: none; }
.conflict-when { color: #8a94a6; margin-right: 6px; font-variant-numeric: tabular-nums; }
.conflict-dev { color: #2980b9; margin-right: 6px; }
.conflict-diff { font-size: 12px; line-height: 1.6; background: #f6f8fa; border: 1px solid #e3e8ee; border-radius: 6px; padding: 8px 10px; max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; scrollbar-width: thin; font-family: inherit; }
.conflict-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.conflict-btn { border: none; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.conflict-btn--reload { background: #2c6fad; color: #fff; }
.conflict-btn--force { background: #fff; color: #c0392b; border: 1px solid #c0392b; }
.conflict-btn--close { background: #eef1f5; color: #555; margin-left: auto; }
/* 開いている間の見張りの帯 */
.tehai-stale-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10050; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff3cd; color: #7a5200; border-bottom: 1px solid #f0d27a; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.tehai-stale-bar[hidden] { display: none; }
.tehai-stale-text { flex: 1; min-width: 0; }
.tehai-stale-reload { border: none; border-radius: 6px; background: #2c6fad; color: #fff; padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tehai-stale-close { border: none; background: none; color: #7a5200; font-size: 18px; cursor: pointer; padding: 0 4px; }
/* 2026-09-27 N1：見張りの知らせは窓（.stale-modal）で出し、「このまま続ける」のあとは保存バーのすぐ上に小さな印。
   帯は .tehai-dockbar の中に入れてあるので、バーが隠れれば一緒に隠れる（スマホでヘッダーやステータスバーに被らない） */
.tehai-stale-bar { top: env(safe-area-inset-top, 0px); }   /* 保存バーが無いページでの保険（ステータスバーの下に） */
.tehai-dockbar .tehai-stale-bar { position: absolute; left: 12px; right: 12px; bottom: 100%; top: auto; margin: 0 auto 6px; width: fit-content; max-width: calc(100% - 24px); border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
.confirm-modal.stale-modal { max-width: 460px; }
.stale-modal .conflict-title { color: #7a5200; }
.stale-modal .conflict-btn--close { background: #eef1f5; color: #333; margin-left: 0; }
@media (max-width: 660px) { .conflict-btn--close { margin-left: 0; } }

/* ══════════════════════════════════════════════════════════════
   ボタン配置の見直し（2026-09-15）
   ・保存・出力：画面下の固定バー（PC は右の縦置きも選べる）。保存と出力は同じ高さ・同じ幅
   ・未保存の印：保存ボタンの中に横並びの小さな印
   ・職人手配系3本：畳める箱（details）。見出しに直近の結果
   ══════════════════════════════════════════════════════════════ */
.tehai-app-page { padding-bottom: 104px; }   /* バーの分だけ足元を空ける（下のページ移動や記録が隠れないように） */

.tehai-dockbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-top: 1px solid rgba(30,58,95,0.14);
    box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    margin: 0; gap: 0; flex-direction: row;               /* .action-row-save の縦積みを打ち消す */
    transition: transform .22s ease;
}
.tehai-dockbar .dockbar-inner {
    max-width: 76vw; margin: 0 auto; width: 100%;
    display: flex; align-items: stretch; gap: 10px;
}
.tehai-app-page .tehai-dockbar .saveButton,
.tehai-app-page .tehai-dockbar .sendEmail {
    flex: 1 1 0; width: auto; height: 54px; padding: 0 16px; margin: 0;   /* 縦幅はマサさん指定で 54px（2026-09-15） */
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 15px; line-height: 1; white-space: nowrap;
}
/* 出力は白抜き（枠線）、保存は赤の面。役割の差を色で見せる（マサさん選定 2026-09-15） */
.tehai-app-page .tehai-dockbar .sendEmail {
    background: #fff; color: #8a4200; border: 2px solid #b85800; box-shadow: none; font-weight: 700;
}
.tehai-app-page .tehai-dockbar .sendEmail:hover { background: #fff4e8; color: #6a2c00; transform: none; filter: none; box-shadow: none; }
.tehai-app-page .tehai-dockbar .sendEmail:disabled { opacity: .6; }
.tehai-app-page .tehai-dockbar .saveButton { flex-grow: 1.4; }
.tehai-app-page .tehai-dockbar .saveButton.is-dirty { filter: saturate(1.25) brightness(1.06); box-shadow: 0 0 0 3px rgba(192,57,43,0.22), 0 4px 14px rgba(139,26,26,0.32); }
/* 保存中（2026-09-18）：押せない・少し沈む・回る印。連打しても保存は1回（JS の _saveInFlight） */
.tehai-app-page .tehai-dockbar .saveButton.is-saving,
.tehai-app-page .tehai-dockbar .saveButton.is-saving:disabled { opacity: .82; cursor: progress; filter: none; transform: none; box-shadow: 0 2px 8px rgba(139,26,26,0.25); animation: none; }
.tehai-dockbar .dockbar-spin { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: dockbar-spin 0.8s linear infinite; margin-right: 8px; }
@keyframes dockbar-spin { to { transform: rotate(360deg); } }
/* 状態の1行：「● 未保存の変更があります（最後の保存 21:05）」「● 保存済み 21:12　変更なし」 */
.tehai-dockbar .dockbar-status {
    display: flex; align-items: center; gap: 7px; min-height: 18px;
    font-size: 12px; line-height: 1.4; color: #5a6b7c; white-space: nowrap;
}
.tehai-dockbar .dockbar-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #1d9e75; flex: 0 0 8px; }
.tehai-dockbar .dockbar-status.is-dirty { color: #8b1a1a; font-weight: 700; }
.tehai-dockbar .dockbar-status.is-dirty .dot { background: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,0.18); animation: dockbar-pulse 1.6s ease-in-out infinite; }
@keyframes dockbar-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* 下置き（PC）：状態は左、出力、保存、小ボタンの順 */
.tehai-dockbar .dockbar-status { order: -1; flex: 0 0 auto; min-width: 200px; padding-right: 6px; }
.tehai-dockbar .dockbar-tools { display: flex; flex-direction: column; gap: 4px; }
.tehai-dockbar .dockbar-tools button {
    width: 30px; height: 24px; padding: 0; border: 1px solid rgba(30,58,95,0.16); border-radius: 7px;
    background: #fff; color: #6b7a8a; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.tehai-dockbar .dockbar-tools button:hover { background: #eef2f6; color: #1e3a5f; }
.tehai-dockbar .dockbar-tools .ico { display: block; }
.tehai-dockbar .ico-chev { transition: transform .18s ease; }              /* 下置き：下向き。畳むと上向き */
body.dockbar-folded .tehai-dockbar .ico-chev { transform: rotate(180deg); }
.tehai-dockbar .dockbar-tools .ico-bottom { display: none; }                 /* 置き場所の印：ふだんは「右に置く」図だけ */
/* 取っ手（畳んだとき・スマホで引っ込んだとき）。指でも押せる大きさに（マサさん指摘 2026-09-15） */
.tehai-dockbar .dockbar-handle {
    display: none; position: absolute; left: 50%; top: -38px; transform: translateX(-50%);
    height: 38px; padding: 0 22px 0 16px; border: 1px solid rgba(30,58,95,0.2); border-bottom: none; border-radius: 12px 12px 0 0;
    background: rgba(255,255,255,0.97); color: #1e3a5f; font-size: 13px; font-weight: 700; line-height: 36px; cursor: pointer;
    align-items: center; gap: 10px; box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
}
.tehai-dockbar .dockbar-handle:hover { background: #eef2f6; }
.tehai-dockbar .dockbar-handle span { width: 30px; height: 5px; border-radius: 3px; background: rgba(30,58,95,0.4); }

/* 畳む（PC）：バーを下へ逃がして取っ手だけ残す */
body.dockbar-folded .tehai-dockbar { transform: translateY(100%); box-shadow: none; }
body.dockbar-folded .tehai-dockbar .dockbar-handle { display: inline-flex; }
body.dockbar-folded .tehai-app-page { padding-bottom: 40px; }

/* スマホ：下へスクロール中は引っ込む（未保存のときは JS が引っ込ませない） */
body.dockbar-hidden .tehai-dockbar { transform: translateY(100%); box-shadow: none; }
body.dockbar-hidden .tehai-dockbar .dockbar-handle { display: inline-flex; }
/* スマホ：枠を選んでいる間・長押しメニューの間も引っ込む（body.dockbar-tuck。JS が付け外し。PC では付かない。2026-09-23） */
body.dockbar-tuck .tehai-dockbar { transform: translateY(100%); box-shadow: none; }
body.dockbar-tuck .tehai-dockbar .dockbar-handle { display: inline-flex; }

/* 右の縦置き（PC・幅が十分なときだけ効く。狭ければ自動で下端に戻る） */
@media (min-width: 1500px) {
    body.dockbar-right .tehai-dockbar {
        left: auto; right: 12px; bottom: auto; top: 50%; transform: translateY(-50%);
        width: calc(12vw - 24px); min-width: 150px;   /* 中身の右余白（12vw）に収める＝夜間の列に重ならない */
        padding: 10px; border: 1px solid rgba(30,58,95,0.16); border-radius: 14px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    }
    body.dockbar-right .tehai-dockbar .dockbar-inner { flex-direction: column; max-width: none; }
    /* 縦置きのボタンは真四角に近い大きさ（マサさん指定 2026-09-15）。幅に合わせて高さが決まる。文字は折り返してよい */
    body.dockbar-right .tehai-app-page .tehai-dockbar .saveButton,
    body.dockbar-right .tehai-app-page .tehai-dockbar .sendEmail {
        flex: 0 0 auto; height: auto;
        flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 10px 8px;
        line-height: 1.35; white-space: normal; text-align: center;
        word-break: normal; overflow-wrap: anywhere;   /* 日本語はどこでも折り返してよい（keep-all で右にはみ出していた 2026-09-15） */
    }
    /* スマホと同じ縦3段（マサさん選定 2026-09-15）：出力は細い白抜き → 保存は大きく（5:4） → 状態の1行 */
    body.dockbar-right .tehai-app-page .tehai-dockbar .sendEmail  { height: 44px; min-height: 0; font-size: 14px; padding: 0 8px; flex-direction: row; }
    body.dockbar-right .tehai-app-page .tehai-dockbar .saveButton { aspect-ratio: 5 / 4; min-height: 100px; font-size: 19px; }
    body.dockbar-right .tehai-app-page .tehai-dockbar .saveButton .dockbar-label { display: block; width: 100%; text-align: center; }
    body.dockbar-right .tehai-app-page .tehai-dockbar .saveButton .dockbar-label > span { display: block; }   /* 「検討内容を」／「保存する」で折り返す */
    body.dockbar-right .tehai-dockbar .dockbar-status { order: 3; min-width: 0; padding: 2px 2px 0; font-size: 11px; white-space: normal; }
    body.dockbar-right .tehai-dockbar .dockbar-tools { order: 4; }
    body.dockbar-right .tehai-dockbar .dockbar-tools { flex-direction: row; justify-content: flex-end; }
    body.dockbar-right .tehai-dockbar .ico-chev { transform: rotate(-90deg); }          /* 右置き：右向き（右へ畳む） */
    body.dockbar-right.dockbar-folded .tehai-dockbar .ico-chev { transform: rotate(90deg); }
    body.dockbar-right .tehai-dockbar .dockbar-tools .ico-right { display: none; }       /* 右置き中は「下に戻す」図だけ */
    body.dockbar-right .tehai-dockbar .dockbar-tools .ico-bottom { display: block; }
    body.dockbar-right .tehai-app-page { padding-bottom: 70px; }
    /* 右置きで畳む：バーは画面の右外へ。取っ手は画面右端に縦書きで残す（回転は使わない。前はここが崩れていた） */
    body.dockbar-right.dockbar-folded .tehai-dockbar { left: 100%; right: auto; transform: translateY(-50%); box-shadow: none; }
    body.dockbar-right.dockbar-folded .tehai-dockbar .dockbar-handle {
        left: auto; right: 100%; top: 50%; transform: translateY(-50%);
        width: 38px; height: auto; padding: 18px 0 14px; margin: 0;
        writing-mode: vertical-rl; flex-direction: column; line-height: 36px;
        border: 1px solid rgba(30,58,95,0.2); border-right: none; border-radius: 12px 0 0 12px;
        box-shadow: -4px 0 14px rgba(0,0,0,0.08);
    }
    body.dockbar-right.dockbar-folded .tehai-dockbar .dockbar-handle span { width: 5px; height: 30px; }
}
@media (max-width: 1499px) { .tehai-dockbar .dockbar-pos { display: none; } }

/* 職人手配オンラインへ反映する（畳める箱）。見出しは左に紺の帯＋矢印のアイコン、右端に丸い山形（開くと回る）。開くときは中身がふわっと出る */
.tehai-relay {
    margin: 18px 0 0; border: 1px solid rgba(30,58,95,0.16); border-radius: 12px; background: #fff;
    box-shadow: 0 2px 10px rgba(30,58,95,0.06); overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.tehai-relay .relay-summary {
    position: relative; list-style: none; display: flex; align-items: center; gap: 12px; padding: 13px 14px 13px 18px; cursor: pointer;
    font-size: 15px; font-weight: 700; color: #1e3a5f; user-select: none;
    background: linear-gradient(90deg, rgba(30,58,95,0.06) 0%, rgba(30,58,95,0) 60%);
    transition: background .18s ease;
}
.tehai-relay .relay-summary::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #1e3a5f, #2f5d8f); }
.tehai-relay[open] .relay-summary { border-bottom: 1px solid rgba(30,58,95,0.12); }
.tehai-relay .relay-summary::-webkit-details-marker { display: none; }
.tehai-relay .relay-icon { display: inline-flex; width: 32px; height: 32px; border-radius: 9px; align-items: center; justify-content: center; background: #1e3a5f; color: #fff; flex: 0 0 32px; box-shadow: 0 2px 6px rgba(30,58,95,0.3); }
.tehai-relay .relay-chev {
    display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; flex: 0 0 28px;
    border: 1px solid rgba(30,58,95,0.2); color: #1e3a5f; background: #fff; transition: transform .22s ease, background .18s ease;
}
.tehai-relay[open] .relay-chev { transform: rotate(180deg); }
.tehai-relay .relay-title small { margin-left: 8px; font-size: 11px; font-weight: 600; color: #fff; background: #1e3a5f; padding: 2px 8px; border-radius: 999px; vertical-align: 1px; }
.tehai-relay .relay-status { margin-left: auto; font-size: 12px; font-weight: 600; color: #5a6b7c; text-align: right; }
.tehai-relay .relay-status b { color: #1d9e75; font-weight: 700; }
.tehai-relay .relay-body { padding: 16px 14px 16px; counter-reset: relay; background: #fbfcfe; }   /* 上を空けて ❶ が見出しに被らないように（2026-09-15） */
.tehai-relay[open] .relay-body { animation: relay-open .22s ease both; }
@keyframes relay-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tehai-relay .relay-body .action-row-writeback { position: relative; margin-top: 12px; counter-increment: relay; }
.tehai-relay .relay-body .action-row-writeback::before {
    content: counter(relay); position: absolute; left: -6px; top: -8px; z-index: 1;
    width: 22px; height: 22px; border-radius: 50%; background: #1e3a5f; color: #fff;
    font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.tehai-relay .relay-body .action-row-writeback:first-child { margin-top: 6px; }
/* 番号の色はそのボタンの枠の色に合わせる（マサさん指定 2026-09-15）：自動割当＝赤、一斉送信＝オレンジ、登録完了＝紺 */
.tehai-relay .relay-body .action-row-writeback:has(.writeback-btn)::before { background: #c0392b; }
.tehai-relay .relay-body .action-row-writeback:has(.writeback-btn--mail)::before { background: #b45309; }
.tehai-relay .relay-body .action-row-writeback:has(.writeback-btn--notice)::before { background: #1e3a5f; }

/* ルールの一覧（tehai/parts/sashite-rules.php・2026-09-19）：いまの点を見出しの横に小さく */
.sashite-rule-pts { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e8f5f2; color: #1f6f64; font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.scoring-rule-item--negative .sashite-rule-pts, .info-rule--negative .sashite-rule-pts { background: #fdf0ee; color: #a5281b; }
.sashite-rule-lead { margin: 0 0 8px; font-size: 12px; color: #6b7a8c; line-height: 1.6; }

/* ================================================================
   下のページ間メニューのボタン：ロゴの色味にそろえる（2026-09-19）
   各ページの CSS（master／report／api-usage）にも同じ名前の指定があるので、ここは1段強い書き方（.report-back-links .report-back-btn）で全ページそろえる
   ================================================================ */
.report-back-links .report-back-btn {
    border: 1px solid rgba(0,109,98,0.28); border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%); color: #1e3a5f;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.report-back-links .report-back-btn:hover { border-color: rgba(0,109,98,0.55); background: #eef8f5; color: #1f6f64; box-shadow: 0 2px 8px rgba(0,109,98,0.10); }
.report-back-links .report-back-btn--active,
.report-back-links .report-back-btn--active:hover { background: #1f6f64; border-color: #1f6f64; color: #fff; box-shadow: none; }
.report-back-links .report-back-btn--active:hover { background: #2d8c7f; border-color: #2d8c7f; }

/* 下のメニューの「SASHITE」だけはロゴで出す（2026-09-19 マサさん指定）
   ・白地のとき＝正式色のロゴ／そのページに居るとき（濃い緑の地）＝反転ロゴ（濃いグレー→白、緑→ミント。images/sashite-logo-btn-light.png）
   ・字（SASHITE）は読み上げ用に残し、見た目だけ画像に。行き先が /spot-tehai/（2026-10-03 から /sashite/ も）のボタンを対象にするので、PHP は触らない */
.report-back-links .report-back-btn:is([href="/spot-tehai/"], [href="/sashite/"]),
.report-back-links .report-back-btn:is([href="/spot-tehai/"], [href="/sashite/"]):hover {
    box-sizing: border-box; min-width: 142px; color: transparent; overflow: hidden;   /* ロゴ94px＋左右の余白。テーマ側は border-box なので、余白込みの幅で指定する（100px だと左右3pxしか残らず詰まっていた） */
    background-image: url(../../images/sashite-logo-btn.png), linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
    background-repeat: no-repeat; background-position: center; background-size: auto 16px, auto;
}
.report-back-links .report-back-btn:is([href="/spot-tehai/"], [href="/sashite/"]):hover { background-image: url(../../images/sashite-logo-btn.png), linear-gradient(#eef8f5, #eef8f5); }
.report-back-links .report-back-btn--active:is([href="/spot-tehai/"], [href="/sashite/"]) { background-image: url(../../images/sashite-logo-btn-light.png), linear-gradient(#1f6f64, #1f6f64); }
.report-back-links .report-back-btn--active:is([href="/spot-tehai/"], [href="/sashite/"]):hover { background-image: url(../../images/sashite-logo-btn-light.png), linear-gradient(#2d8c7f, #2d8c7f); }

/* ── 自動手配の再現率（ミニ）（2026-09-19）：移動チェックの左。スマホは移動チェックの上 ──
   数字は手配データ傾向の「ひと目で」と同じ。色味は「残りを自動で割り当てる」ボタンの青（#1460b0→#1e90ff）に寄せる。塗りつぶさず、枠・字・ボタンで */
.match-mini {
    flex: 0 0 auto; min-width: 200px; box-sizing: border-box; padding: 9px 13px; align-self: stretch;   /* 隣の移動チェックと高さをそろえる */
    border: 1.5px solid rgba(20,96,176,0.34); border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}
.match-mini[hidden] { display: none; }
.mm-label { font-size: 11px; font-weight: 700; color: #1460b0; }
.mm-detail-btn {
    font-size: 11px; font-weight: 600; color: #fff; text-decoration: none; background: linear-gradient(135deg, #1460b0 0%, #1e90ff 100%); border: none; border-radius: 20px; padding: 3px 10px; flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(20,96,176,0.30); transition: opacity 0.15s; cursor: pointer; font-family: inherit; line-height: inherit;
}
.mm-detail-btn:hover { opacity: 0.85; color: #fff; }
.mm-nums { display: flex; gap: 16px; margin: 2px 0 3px; }
.mm-num { display: flex; align-items: baseline; gap: 1px; color: #9aa5b1; white-space: nowrap; }
.mm-num b { font-size: 21px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mm-num small { font-size: 11px; font-weight: 700; }
.mm-num span { margin-left: 5px; font-size: 10.5px; font-weight: 600; color: #6b7a8c; }
@media (max-width: 660px) {
    .match-mini { width: 100%; min-width: 0; order: -2; }   /* 移動チェック（order:-1）の上 */
    .mm-nums { gap: 22px; }
}

/* 再現率のモーダル（枠は移動チェックのモーダル .cs-modal-* を共用。ここは中身だけ） */
.mm-modal .cs-card-title { color: #7d8ea3; text-transform: none; letter-spacing: .02em; font-size: 12px; }
.mm-hint { margin: 0; font-size: 12.5px; color: #8a94a6; line-height: 1.7; }
.mm-hero { border: 1px solid rgba(20,96,176,0.22); background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%); }
.mm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mm-big-num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.mm-big-num small { font-size: 18px; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.mm-big-label { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #1e3a5f; line-height: 1.5; }
.mm-big-label span { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: #6b7a8c; line-height: 1.6; }
.mm-foot { margin: 10px 0 0; font-size: 11.5px; color: #8a94a6; line-height: 1.6; }
.mm-strict { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; padding: 9px 12px; border-radius: 10px; background: #f3f5f8; }   /* 1位ぴったり（2026-09-23 脇へ） */
.mm-strict b { flex: 0 0 auto; font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mm-strict span { font-size: 11.5px; color: #5a6b7c; line-height: 1.55; }
.mm-bar { margin: 0 0 10px; }
.mm-bar-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: #3b4a5a; }
.mm-bar-head b { font-size: 14px; font-variant-numeric: tabular-nums; }
.mm-bar.is-main .mm-bar-head { font-weight: 700; color: #1e3a5f; }
.mm-bar.is-main .mm-bar-head b { font-size: 17px; }
.mm-bar-track { height: 7px; margin-top: 4px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.mm-bar-track > span { display: block; height: 100%; border-radius: 999px; }
.mm-bar-note { margin: 4px 0 0; font-size: 11px; color: #8a94a6; line-height: 1.5; }
.mm-w { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(40px, 1fr) 44px; align-items: center; gap: 10px; margin: 8px 0; font-size: 12.5px; color: #3b4a5a; }
.mm-w-track { height: 7px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.mm-w-track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1460b0, #1e90ff); }
.mm-w-num { text-align: right; font-weight: 700; color: #1e3a5f; font-variant-numeric: tabular-nums; }
.mm-stance { margin: 4px 2px 14px; font-size: 12px; color: #5a6b7c; line-height: 1.7; }
.mm-more-btn {
    display: block; text-align: center; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #1460b0 0%, #1e90ff 100%); box-shadow: 0 4px 14px rgba(20,96,176,0.28); transition: opacity .15s;
}
.mm-more-btn:hover { opacity: .88; color: #fff; }
@media (max-width: 420px) { .mm-big-num { font-size: 38px; } .mm-two { gap: 10px; } }

/* ── 灰色（割当済み）の出勤スタッフの「どこに入っているか」（tehai/js/tehai-where.js・2026-09-19） ──
   名前の札から出る**吹き出し**。白いカード＋札を指すしっぽ。しっぽの根元（--tail-x）からほわんと広がって出て、消えるときはすっとしぼむ。
   行は時間帯の色（左の帯と札）で見分ける。PC のカーソル合わせは押せない／タップ・クリックは押せる形（.is-pinned）で、行を押すとその割当欄へ動く。
   z-index は点の内訳（10040）と同じ段。タップのメニュー（10050）やモーダルより下 */
.where-pop {
    --tail-x: 50%;
    position: fixed; z-index: 10040; box-sizing: border-box; min-width: 232px; max-width: min(330px, calc(100vw - 16px)); padding: 12px 12px 10px;
    border: 1px solid rgba(30,58,95,0.10); border-radius: 16px; background: #fff; color: #26374a; font-size: 12.5px; line-height: 1.5;
    box-shadow: 0 14px 36px rgba(30,58,95,0.20), 0 3px 10px rgba(30,58,95,0.10); pointer-events: none;
    transform-origin: var(--tail-x) -8px; animation: wherePopIn .26s cubic-bezier(.2,.9,.25,1.25) both;
}
.where-pop[data-side="above"] { transform-origin: var(--tail-x) calc(100% + 8px); }
.where-pop.is-pinned { pointer-events: auto; }
.where-pop.is-leaving { animation: wherePopOut .16s ease-in both; }
body:has(.tapmove-menu) .where-pop, body:has(.confirm-modal-overlay) .where-pop { display: none; }   /* タップのメニュー・削除の確認が出ている間は出さない */
/* 吹き出しの字の上で、文字入力の縦線（Ｉ型のカーソル／キャレット）を出さない。字は選べなくてよい */
.where-pop, .where-pop * { cursor: default; -webkit-user-select: none; user-select: none; caret-color: transparent; -webkit-tap-highlight-color: transparent; }
.where-pop button.where-pop-row, .where-pop button.where-pop-row * { cursor: pointer; }
.where-pop button.where-pop-row:focus { outline: none; }
.where-pop button.where-pop-row:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
@keyframes wherePopIn  { 0% { opacity: 0; transform: translateY(6px) scale(.86); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes wherePopOut { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(3px) scale(.94); } }
.where-pop[data-side="above"] { animation-name: wherePopInUp; }
.where-pop[data-side="above"].is-leaving { animation-name: wherePopOut; }
@keyframes wherePopInUp { 0% { opacity: 0; transform: translateY(-6px) scale(.86); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* しっぽ：白い角を45度。枠線は見える2辺だけ */
.where-pop-tail {
    position: absolute; left: var(--tail-x); top: -7px; width: 13px; height: 13px; margin-left: -6.5px; transform: rotate(45deg);
    background: #fff; border-left: 1px solid rgba(30,58,95,0.10); border-top: 1px solid rgba(30,58,95,0.10); border-radius: 3px 0 0 0;
}
.where-pop[data-side="above"] .where-pop-tail { top: auto; bottom: -7px; border: none; border-right: 1px solid rgba(30,58,95,0.10); border-bottom: 1px solid rgba(30,58,95,0.10); border-radius: 0 0 3px 0; }
.where-pop-head { display: flex; align-items: baseline; gap: 5px; margin: 0 2px 8px; color: #6b7a8c; font-size: 11.5px; }
.where-pop-head b { font-size: 14.5px; font-weight: 800; color: #1e3a5f; letter-spacing: .02em; }
.where-pop-head em { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #eef3f8; color: #4a5d73; font-size: 11px; font-weight: 700; font-style: normal; }
.where-pop-list { display: flex; flex-direction: column; gap: 6px; }
.where-pop-row {
    --c: #5a6b7c; --cl: #eef1f5;
    position: relative; display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 10px 8px 13px; overflow: hidden;
    border: 1px solid #e3e8ee; border-radius: 11px; background: #f7f9fb; color: inherit; font: inherit; text-align: left;   /* ↓ color-mix が使えない古いブラウザはこの色のまま */
    border-color: color-mix(in srgb, var(--c) 22%, #fff); background: color-mix(in srgb, var(--cl) 45%, #fff);
    animation: whereRowIn .3s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i, 0) * 45ms + 70ms);
}
.where-pop-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
@keyframes whereRowIn { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
.where-pop-row--allday    { --c: var(--allday, #2c867d);    --cl: var(--allday-light, #dff0ed); }
.where-pop-row--morning   { --c: var(--morning, #1e90ff);   --cl: var(--morning-light, #ddf3ff); }
.where-pop-row--afternoon { --c: var(--afternoon, #ff8c00); --cl: var(--afternoon-light, #fff4e0); }
.where-pop-row--evening   { --c: var(--evening, #d9481c);   --cl: var(--evening-light, #fde6de); }
.where-pop-row--night     { --c: var(--night, #8b008b);     --cl: var(--night-light, #f3e5f5); }
.where-pop-row--midnight  { --c: var(--midnight, #1f2a5a);  --cl: var(--midnight-light, #e3e6f2); }
button.where-pop-row { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
button.where-pop-row:hover { background: color-mix(in srgb, var(--cl) 80%, #fff); box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 22%, transparent); }
button.where-pop-row:active { transform: scale(.98); }
.where-pop-shift { flex: 0 0 auto; min-width: 36px; padding: 2px 8px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.where-pop-text { flex: 1 1 auto; min-width: 0; }
.where-pop-text b { display: block; font-size: 13px; font-weight: 700; color: #1e3a5f; overflow-wrap: anywhere; line-height: 1.4; }
.where-pop-text small { display: block; margin-top: 1px; font-size: 11px; color: #6b7a8c; }
.where-pop-row:not(.is-here) .where-pop-text b { font-weight: 600; }
.where-pop-row.is-here { border-color: color-mix(in srgb, var(--c) 45%, #fff); }
.where-pop-go { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(30,58,95,0.18); position: relative; }
.where-pop-go::before { content: ""; position: absolute; left: 7px; top: 7px; width: 6px; height: 6px; border-right: 2px solid var(--c); border-top: 2px solid var(--c); transform: rotate(45deg); }
.where-pop-foot { margin: 8px 2px 0; font-size: 10.5px; color: #8a94a6; text-align: center; }
/* 入っている割当欄：時間帯の色に関係なく見つけやすい金色の輪。吹き出しが出ている間はゆっくり息をする／行を押して移動した先は少しの間だけ光って消える */
.projectList-container input.where-hit { outline: 3px solid #f5b800; outline-offset: 2px; animation: whereHit 1.4s ease-in-out infinite; }
@keyframes whereHit { 0%, 100% { outline-color: #f5b800; box-shadow: 0 0 0 0 rgba(245,184,0,0.0); } 50% { outline-color: #ffd54a; box-shadow: 0 0 0 6px rgba(245,184,0,0.22); } }
.projectList-container input.where-flash { animation: whereFlash 1.8s ease-out 1; }
@keyframes whereFlash { 0% { outline: 3px solid #f5b800; outline-offset: 2px; box-shadow: 0 0 0 10px rgba(245,184,0,0.30); } 50% { outline: 3px solid #f5b800; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(245,184,0,0.15); } 100% { outline: 3px solid rgba(245,184,0,0); outline-offset: 2px; box-shadow: 0 0 0 0 rgba(245,184,0,0); } }
@media (prefers-reduced-motion: reduce) {
    .where-pop, .where-pop.is-leaving, .where-pop-row, .projectList-container input.where-hit { animation: none; }
    .projectList-container input.where-flash { animation-duration: 0.01s; }
}

/* ── 「職人手配オンラインを開く」（tehai/parts/shokunin-link.php・2026-09-19） ──
   主役は「反映する」の3つのボタンなので、こちらは控えめな線のボタン。未登録（.is-off）は破線で薄く、押すと下に案内が開く */
.shokunin-link-row { margin-top: 14px; }
.shokunin-link-row--dock { margin: 0 0 18px; }
.shokunin-link {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1.5px solid rgba(30,58,95,0.28); border-radius: 12px;
    background: #fff; color: #1e3a5f; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.shokunin-link-row--dock .shokunin-link { width: auto; display: inline-flex; border-color: rgba(0,109,98,0.35); }
.shokunin-link:hover { border-color: #1e3a5f; background: #f7fafd; box-shadow: 0 2px 10px rgba(30,58,95,0.10); color: #1e3a5f; }
.shokunin-link-row--dock .shokunin-link:hover { border-color: #1f6f64; background: #f6fbfa; }
.shokunin-link-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #eef3f8; color: #1e3a5f; }
.shokunin-link-row--dock .shokunin-link-icon { background: #e8f5f2; color: #1f6f64; }
.shokunin-link-text b { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; }
.shokunin-link-text small { display: block; font-size: 11.5px; color: #6b7a8c; line-height: 1.5; }
.shokunin-link-note { display: block; font-size: 10.5px; color: #8a96a3; line-height: 1.5; word-break: auto-phrase; }   /* ※ 当日のページが開きます（2026-09-20）：日付までは渡せないので、先に伝えておく */
.shokunin-link.is-off { border-style: dashed; border-color: #c3ccd8; background: #fafbfc; color: #7d8a9a; }
.shokunin-link.is-off .shokunin-link-icon { background: #eef1f4; color: #8a94a6; }
.shokunin-link.is-off:hover { border-color: #8a94a6; background: #f5f7f9; box-shadow: none; color: #5a6b7c; }
@keyframes shokuninGuideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.shokunin-guide-go { display: inline-block; padding: 8px 16px; border-radius: 10px; background: #1f6f64; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.shokunin-guide-go:hover { background: #2d8c7f; color: #fff; }
@media (max-width: 660px) { .shokunin-link-row--dock .shokunin-link { display: flex; width: 100%; } }

/* ── 移動チェックのカードを、再現率カードと同じ作りの「緑版」に（2026-09-19 マサさん指定） ──
   色は「移動時間チェック」ボタンの緑（#1e7a3a→#27ae60）。塗りつぶさず、枠・字・ボタン・帯で。
   カードはいつでも緑。残りが少ないとき（30%未満）に橙〜赤へ変わるのはメーター（帯）だけ（page-spot-tehai.php の renderCreditGaugeMini が帯の色だけ当てる） */
.credit-gauge-mini { box-sizing: border-box; align-self: stretch; border: 1.5px solid rgba(30,122,58,0.34); background: linear-gradient(180deg, #ffffff 0%, #f2faf5 100%); }
.credit-gauge-mini .cgm-label { color: #1e7a3a; }
.credit-gauge-mini .cgm-num { color: #1e7a3a; font-variant-numeric: tabular-nums; }
.credit-gauge-mini .cgm-detail-btn { background: linear-gradient(135deg, #1e7a3a 0%, #27ae60 100%); box-shadow: 0 1px 4px rgba(30,122,58,0.30); }
.credit-gauge-mini .cgm-bar { background: #e6f2ea; }
.credit-gauge-mini .cgm-bar-fill { background: linear-gradient(90deg, #1e7a3a, #27ae60); }
.credit-gauge-mini .cgm-unit, .credit-gauge-mini .cgm-sub { color: #6b7a8c; }

/* 移動チェックのモーダル：最後に読んだ職人手配オンラインの契約／案内モーダルの下の小さなリンク（2026-09-20） */
.cs-plan-contract { margin: 8px 0 0; font-size: 11.5px; color: #6b7a8c; line-height: 1.6; }
.prm-foot { margin: 10px 0 0; text-align: center; font-size: 11.5px; }
.prm-foot a { color: #6b7a8c; text-decoration: underline; }

/* 出勤スタッフの札：長押し（スマホの削除の確認）で、文字の範囲選択や OS のコピーのメニューが出ないようにする（2026-09-20 マサさん指摘）。
   割当欄（tehai-tap-move.css の input[data-shift]）と同じ扱い。札の名前は選べても得るものが無い。
   touch-action は触らない（札のドラッグ・一覧のスクロールは今までどおり） */
.staffList li.staff-item,
.staffList li.staff-item * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.staffList li.staff-item { -webkit-tap-highlight-color: transparent; }

/* ── つなぐ案内（tehai/parts/shokunin-link.php・2026-09-20／同日作り直し）──
   未登録の会員が取り込み系を押した瞬間に出す。手配マスター管理のログイン情報タブの上（.connect-intro）も同じ部品（.cx-*）で組む。
   上の帯は「職人手配オンライン ⇄ SASHITE」。荷物が流れる線は、本体の取り込みアニメーション（.sync-flow）と同じ言い方 */
body.connect-guide-open { overflow: hidden; }
.connect-guide-overlay { position: fixed; inset: 0; z-index: 10080; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(9,30,34,0.58); backdrop-filter: blur(3px); animation: connectGuideFade .2s ease both; }
.connect-guide-overlay[hidden] { display: none; }
.connect-guide { position: relative; box-sizing: border-box; width: 100%; max-width: 600px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgba(9,30,34,0.40); animation: connectGuideIn .34s cubic-bezier(.2,.9,.25,1.12) both; }
@keyframes connectGuideFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes connectGuideIn { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
/* 形は説明のモーダル（.info-modal-*）にそろえる（2026-09-20 マサさん指定）：
   まんなかに置いて四方に余白・四隅とも角丸・上は白い題の帯（題＋灰色の ✕・下に区切り線）で固定・中身だけが動く・下は区切り線つきの固定の帯に登録ボタン */
.connect-guide-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; background: #fff; border-bottom: 1px solid #e0e7ef; }
.connect-guide-head-title { font-size: 16px; font-weight: bold; color: #1f6f64; }
.connect-guide-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.connect-guide-close { flex: 0 0 auto; background: none; border: none; font-size: 18px; color: #888; cursor: pointer; padding: 0 4px; line-height: 1; }
.connect-guide-close:hover { color: #333; }
.connect-guide-foot { flex: 0 0 auto; padding: 14px 20px 16px; background: #fff; border-top: 1px solid #e0e7ef; box-shadow: 0 -6px 16px rgba(30,58,95,0.06); }
.connect-guide-foot .connect-guide-btns { margin: 0; }

/* 上の帯 */
.cx-hero {
    position: relative; overflow: hidden; padding: 30px 28px 26px; color: #fff; text-align: center;
    background: radial-gradient(120% 140% at 0% 0%, #2f9d8e 0%, rgba(47,157,142,0) 55%), radial-gradient(90% 120% at 100% 100%, #17544c 0%, rgba(23,84,76,0) 60%), linear-gradient(135deg, #1f6f64 0%, #154a44 100%);
}
.cx-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px); background-size: 18px 18px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.cx-flow { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 20px; max-width: 460px; }
.cx-flow-end { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: 14px; background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 6px 18px rgba(0,0,0,0.14); backdrop-filter: blur(2px); }
.cx-flow-end img { display: block; height: 17px; width: auto; }
.cx-flow-end--sashite img { height: 20px; }
.cx-flow-line { position: relative; flex: 1 1 auto; min-width: 46px; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 6px, transparent 6px 12px); }
.cx-flow-line i { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #9fe3d4; box-shadow: 0 0 0 4px rgba(159,227,212,0.22); animation: cxFlow 2.4s linear infinite; }
.cx-flow-line i:nth-child(2) { animation-delay: .8s; }
.cx-flow-line i:nth-child(3) { animation-delay: 1.6s; }
@keyframes cxFlow { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } }
.cx-kicker { position: relative; z-index: 1; display: inline-block; margin: 0 0 10px; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,0.16); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: #d6f5ee; }
.cx-title { position: relative; z-index: 1; margin: 0 0 8px; font-size: 25px; font-weight: 800; line-height: 1.45; letter-spacing: .02em; color: #fff; text-wrap: balance; }
.cx-sub { position: relative; z-index: 1; margin: 0; font-size: 13.5px; line-height: 1.8; color: rgba(255,255,255,0.86); }

/* 本文 */
.cx-body { padding: 22px 24px 22px; }
.cx-compare { display: grid; grid-template-columns: 1fr auto 1.15fr; align-items: stretch; gap: 10px; margin: 0 0 18px; }
.cx-col { padding: 12px 14px; border-radius: 14px; }
.cx-col-head { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.cx-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-col li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.6; }
.cx-col li svg { flex: 0 0 auto; margin-top: 4px; }
.cx-col--before { background: #f4f5f7; color: #7d8a9a; }
.cx-col--before .cx-col-head { color: #8a94a6; }
.cx-col--before li svg { color: #b3bcc8; }
.cx-col--after { background: linear-gradient(160deg, #e8f7f3 0%, #f4fbf9 100%); color: #1e3a5f; box-shadow: inset 0 0 0 1.5px rgba(45,140,127,0.35), 0 6px 16px rgba(0,109,98,0.10); }
.cx-col--after .cx-col-head { color: #1f6f64; }
.cx-col--after li svg { color: #fff; background: #2d8c7f; border-radius: 50%; padding: 2px; box-sizing: content-box; margin-top: 2px; }
.cx-col--after b { color: #1f6f64; }
.cx-compare-arrow { align-self: center; font-size: 20px; font-weight: 800; color: #2d8c7f; }

.cx-cards { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cx-cards li { padding: 14px 12px 13px; border: 1px solid rgba(0,109,98,0.16); border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(30,58,95,0.06); transition: transform .18s ease, box-shadow .18s ease; animation: cxRise .45s cubic-bezier(.2,.8,.3,1) both; }
.cx-cards li:nth-child(1) { animation-delay: .10s; } .cx-cards li:nth-child(2) { animation-delay: .17s; } .cx-cards li:nth-child(3) { animation-delay: .24s; }
.cx-cards li:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,109,98,0.14); }
@keyframes cxRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cx-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 9px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #2d8c7f 0%, #1f6f64 100%); box-shadow: 0 6px 14px rgba(0,109,98,0.28); }
.cx-cards b { display: block; font-size: 13.5px; line-height: 1.5; color: #1e3a5f; }
.cx-cards small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.65; color: #6b7a8c; }
/* 学習が積み上がる（現場ID で覚える）。2026-09-20：取り込み・反映・通知の3枚の下に、幅いっぱいの1枚で */
.cx-learn { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #eaf3ff 0%, #f4f9ff 100%); box-shadow: inset 0 0 0 1px rgba(20,96,176,0.20); animation: cxRise .45s cubic-bezier(.2,.8,.3,1) .31s both; }
.cx-learn-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #1e90ff 0%, #1460b0 100%); box-shadow: 0 6px 14px rgba(20,96,176,0.28); }
.cx-learn b { display: block; font-size: 14px; line-height: 1.5; color: #1e3a5f; }
.cx-learn small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.75; color: #4a5d73; }
.cx-learn small strong { color: #1460b0; }
.cx-perk { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(90deg, #fff8e8 0%, #fffdf6 100%); box-shadow: inset 0 0 0 1px #f3dca6; font-size: 13px; color: #1e3a5f; line-height: 1.5; }
.cx-perk-badge { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #e0a526 0%, #c98a0c 100%); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.cx-perk-icon { flex: 0 0 auto; color: #b97f0a; display: inline-flex; }
.cx-perk small { display: block; margin-top: 1px; font-size: 11.5px; color: #8a7a55; }

.cx-section { margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: #1f6f64; display: flex; align-items: center; gap: 10px; }
.cx-section::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(45,140,127,0.35), transparent); }
.cx-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.cx-steps li { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 10px 10px 10px 0; }
/* ②③の左上に出していた短いつなぎ線は、ごみに見えるのでやめた（2026-09-20 マサさん指摘） */
.cx-steps li > span { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #e8f5f2; color: #1f6f64; font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(45,140,127,0.45); }
.cx-steps b { display: block; font-size: 13px; color: #1e3a5f; line-height: 1.5; }
.cx-steps small { display: block; margin-top: 2px; font-size: 11.5px; color: #6b7a8c; line-height: 1.6; }

.connect-guide-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.connect-guide-go { flex: 1 1 260px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 18px; border-radius: 14px; color: #fff; font-size: 15.5px; font-weight: 800; letter-spacing: .02em; text-decoration: none;
    background: linear-gradient(135deg, #2d8c7f 0%, #1f6f64 100%); box-shadow: 0 10px 24px rgba(0,109,98,0.32); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.connect-guide-go span { display: inline-block; transition: transform .2s ease; }
.connect-guide-go:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,109,98,0.40); filter: brightness(1.05); }
.connect-guide-go:hover span { transform: translateX(4px); }
.connect-guide-about { flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; border: 1.5px solid rgba(0,109,98,0.30); border-radius: 14px; background: #fff; color: #1f6f64; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background .15s, border-color .15s; }
.connect-guide-about:hover { background: #eef8f5; border-color: #1f6f64; color: #1f6f64; }
.cx-trust { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 6px; font-size: 11.5px; line-height: 1.7; color: #5a6b7c; }
.cx-trust svg { flex: 0 0 auto; margin-top: 3px; color: #2d8c7f; }
.connect-guide-note { margin: 0; font-size: 11.5px; color: #8a94a6; line-height: 1.7; }
.connect-guide-note a { color: #1f6f64; font-weight: 700; }

/* サイトの共通スタイルが、アプリのページの中の p の余白と内側の余白を消している（ログイン情報タブの上で詰まって見えた）。
   この部品の段落は、ここで強めに指定し直す（案内のモーダルは body 直下なので元から効いていた） */
.cx p.cx-kicker { margin: 0 0 10px; padding: 3px 12px; }
.cx p.cx-sub { margin: 0; }
.cx p.cx-perk { margin: 0 0 20px; padding: 10px 14px; }
.cx p.cx-section { margin: 0 0 10px; }
.cx p.cx-trust { margin: 0 0 6px; }
.cx p.connect-guide-note { margin: 0; }
.cx .cx-col p.cx-col-head { margin: 0 0 8px; }

/* 見出しの決め言葉（ボタンひとつ）：ミントの色で一段大きく。PC・スマホ共通 */
.cx-title em { font-style: normal; color: #9fe3d4; font-size: 1.16em; letter-spacing: .04em; white-space: nowrap; }
.cx-br-sp { display: none; }
.cx-flow-step { display: none; }   /* スマホ用の段になった線（下の @media で出す）。PC は横一本の線のまま */

/* ── スマホ（2026-09-20 マサさん「文字やロゴをもっと大きく。メリハリを」）──
   下からせり上がる大きな紙にして、ロゴは縦に2段で大きく。大事な所（見出し・つないだ後・番号・登録ボタン）は思い切り大きく、
   説明や注意書きは小さいまま、で強弱をつける */
@media (max-width: 600px) {
    .connect-guide-overlay { padding: 16px; align-items: center; }
    .connect-guide { max-height: 85vh; max-height: 85dvh; }
    .connect-guide-head { padding: 14px 16px 12px; }

    .cx-hero { padding: 26px 22px 30px; }
    /* ロゴは左上と右下にずらして置き、あいだを「下→右→下」の段になった線でつなぐ（2026-09-20 マサさん案）。
       ・職人手配は帯の左端ぎりぎり、SASHITE は右端ぎりぎり（案内の枠から14px）。帯の左右の余白（22px）の外まで広げている
       ・線は**職人手配のロゴの真ん中の下から出て、SASHITE のロゴの真ん中の上に入る**。点は大きめ（半径4.8）＋まわりにもや。SVG の animateMotion で線の上を流す
       ・大きさはぜんぶ em。1em ＝（画面の幅 − 60px）÷ 36.5（案内は画面の端から16px内側、その中で札は14px内側）なので、どの幅のスマホでも札と線が同じ比率で伸び縮みし、ずれない（393px で約9.1px。上限 11px）
       ★札の大きさ（22.7em／19.9em）を変えたら、部品の SVG の path（113.5 と 265.5。10倍した値）も直すこと */
    .cx-flow { display: block; font-size: min(11px, calc((100vw - 60px) / 36.5)); width: 36.5em; max-width: none; margin: 0.6em 0 2.6em calc(50% - 18.25em); }
    .cx-flow-end { display: flex; box-sizing: border-box; height: 5.6em; padding: 0 2em; border-radius: 1.8em; }
    .cx-flow-end--shokunin { width: 22.7em; margin-right: auto; } .cx-flow-end--sashite { width: 19.9em; margin-left: auto; }
    .cx-flow-end img { height: 1.9em; } .cx-flow-end--sashite img { height: 2.7em; }
    .cx-flow-line { display: none; }
    .cx-flow-step { display: block; width: 36.5em; height: 6em; overflow: visible; }
    .cx-flow-haze { opacity: .38; filter: blur(3.5px); }
    /* ログイン情報タブの上は、画面いっぱいではなくページの余白の内側にあるので、そのぶん小さく */
    .connect-intro .cx-flow { font-size: min(11px, calc((100vw - 92px) / 36.5)); }   /* 枠の内側に14pxずつ残す（ページの余白16px×2＋14px×2） */
    .connect-intro .cx-title { font-size: 25px; } .connect-intro .cx-hero { padding: 30px 14px 26px; }   /* 枠が狭いので見出しは一段小さく（「職人手配オンラインと、」が1行に収まる大きさ） */
    .cx p.cx-kicker, .cx-kicker { font-size: 12.5px; padding: 4px 14px; margin-bottom: 14px; }
    .cx-title { font-size: clamp(22px, calc((100vw - 76px) / 11.6), 30px); font-weight: 900; line-height: 1.4; margin-bottom: 12px; }   /* 「つなぐと、手配の準備が」（11字）が1行に収まる大きさを、画面の幅から決める */
    .cx-title em { font-size: 1.2em; }
    .cx-br-sp { display: inline; }
    .cx-sub { font-size: 14.5px; line-height: 1.85; }

    .cx-body { padding: 22px 18px 20px; }
    .cx-compare { grid-template-columns: 1fr; gap: 6px; margin-bottom: 22px; }
    .cx-compare-arrow { justify-self: center; transform: rotate(90deg); font-size: 24px; line-height: 1; }
    .cx-col--before { padding: 10px 14px; } .cx-col--before li { font-size: 12.5px; } .cx-col--before .cx-col-head, .cx .cx-col--before p.cx-col-head { font-size: 11.5px; margin-bottom: 5px; }
    .cx-col--after { padding: 18px 18px 20px; border-radius: 18px; }
    .cx-col--after .cx-col-head, .cx .cx-col--after p.cx-col-head { font-size: 14px; margin-bottom: 12px; }
    .cx-col--after ul { gap: 12px; }
    .cx-col--after li { font-size: 16.5px; font-weight: 700; line-height: 1.55; gap: 10px; }
    .cx-col--after li svg { width: 15px; height: 15px; padding: 4px; margin-top: 1px; }
    .cx-col--after b { font-size: 1.08em; background: linear-gradient(transparent 62%, rgba(159,227,212,0.75) 62%); }

    .cx-cards, .cx-steps { grid-template-columns: 1fr; }
    .cx-cards { gap: 10px; margin-bottom: 14px; }
    .cx-cards li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 16px 16px; border-radius: 18px; }
    .cx-card-icon { grid-row: span 2; margin-bottom: 0; width: 54px; height: 54px; border-radius: 17px; } .cx-card-icon svg { width: 27px; height: 27px; }
    .cx-cards b { font-size: 17px; } .cx-cards small { font-size: 13px; margin-top: 3px; }
    .cx-learn { padding: 16px; border-radius: 18px; margin-bottom: 14px; } .cx-learn-icon { width: 54px; height: 54px; border-radius: 17px; } .cx-learn-icon svg { width: 27px; height: 27px; } .cx-learn b { font-size: 17px; } .cx-learn small { font-size: 13px; }
    .cx-perk, .cx p.cx-perk { flex-wrap: wrap; gap: 8px 10px; padding: 14px 16px; font-size: 15px; font-weight: 700; margin-bottom: 26px; }
    .cx-perk-badge { font-size: 12px; padding: 4px 12px; } .cx-perk small { font-size: 12.5px; font-weight: 400; margin-top: 3px; }

    .cx-section, .cx p.cx-section { font-size: 15px; margin-bottom: 14px; }
    .cx-steps { gap: 4px; margin-bottom: 22px; }
    .cx-steps li { align-items: center; gap: 14px; padding: 8px 0; }
    .cx-steps li > span { width: 44px; height: 44px; font-size: 20px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #2d8c7f 0%, #1f6f64 100%); box-shadow: 0 6px 14px rgba(0,109,98,0.28); }
    .cx-steps b { font-size: 17px; } .cx-steps small { font-size: 13px; }

    /* 下に張り付く登録ボタン：大きく。2つ目は小さな文字のリンクにして、場所を取らせない */
    .connect-guide-foot { padding: 12px 16px 12px; }
    .connect-guide .connect-guide-go { padding: 18px 12px; font-size: min(17.5px, calc((100vw - 96px) / 17.5)); border-radius: 16px; white-space: nowrap; gap: 8px; }   /* 「ログイン情報を登録して、つなぐ →」が「つな／ぐ」と割れないよう、幅に合わせて字を少し縮めて1行に（2026-09-21） */
    .connect-guide .connect-guide-about { flex: 1 1 100%; padding: 6px 8px 0; border: none; background: none; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
    .cx-trust, .cx p.cx-trust { font-size: 12.5px; } .connect-guide-note { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .cx-flow-step circle { display: none; } .connect-guide-overlay, .connect-guide, .cx-cards li, .cx-learn, .cx-flow-line i { animation: none; } .cx-flow-line i { opacity: 1; left: 45%; } .cx-flow-line i:nth-child(n+2) { display: none; } }

/* 「職人手配オンラインを開く」の右上の「？」（2026-09-20）：つないだ後も、同じ案内をいつでも見られる。
   形はほかの「？」（.info-help-btn：自動割当・移動時間チェックのボタンの右上の丸）と同じ＝26pxの丸・太字の？・上に光の映り込み。
   あちらは色つきのボタンの上なので白いガラス、こちらは白いボタンの上なので緑のガラスにしてある */
/* ★2026-09-20 マサさん指定：？は「職人手配オンラインを開く」の**外側**（右隣）に置く。そのぶん、開くボタンの幅を狭める */
.shokunin-link-row { display: flex; align-items: center; gap: 10px; }
.shokunin-link-row .shokunin-link { flex: 1 1 auto; min-width: 0; }
.shokunin-link-row--dock { display: inline-flex; max-width: 100%; }
.shokunin-link-info {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font: inherit; font-size: 12px; font-weight: bold; line-height: 1; color: rgba(255,255,255,0.97); cursor: pointer;
    background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #2d8c7f 0%, #1f6f64 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -1px 2px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.10);
    transition: filter .15s ease, box-shadow .15s ease;
}
.shokunin-link-info:hover { filter: brightness(1.12); box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -1px 2px rgba(0,0,0,0.14), 0 3px 8px rgba(0,109,98,0.30); }
/* つないだ後の案内：連携済みの札／はじめ方は出さない（部品側で出し分け） */
.cx p.cx-kicker--linked, .cx-kicker--linked { background: #9fe3d4; color: #0f3d37; }
.connect-guide.is-linked .cx-col--before { opacity: .75; }
@media (max-width: 660px) { .shokunin-link-row--dock { display: flex; } }   /* ？の大きさは、ほかの？と同じ 26px のまま */

/* ── 職人手配オンラインのイメージカラー＝オレンジ（2026-09-20 マサさん指定）──
   決まり：**押すと職人手配オンラインへ行くもの**はオレンジ（ロゴの #fc9c00 系）。SASHITE の中で完結するもの（ログイン情報の登録など）は緑のまま。
   対象：「職人手配オンラインを開く」のボタンとその「？」、案内の中の「職人手配オンラインを開く ↗」「職人手配オンラインとは ↗」 */
.shokunin-link-row .shokunin-link:not(.is-off) { border-color: rgba(240,140,0,0.45); color: #1e3a5f; }
.shokunin-link-row .shokunin-link:not(.is-off):hover { border-color: #f08c00; background: #fffaf2; box-shadow: 0 2px 10px rgba(240,140,0,0.16); }
.shokunin-link-row .shokunin-link:not(.is-off) .shokunin-link-icon { background: #fff1dc; color: #d97700; }
.shokunin-link-info {
    background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #ffb02e 0%, #f08c00 100%);
}
.shokunin-link-info:hover { box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -1px 2px rgba(0,0,0,0.14), 0 3px 8px rgba(240,140,0,0.35); }
.connect-guide .connect-guide-go[target="_blank"] { background: linear-gradient(135deg, #ffab24 0%, #ec8500 100%); box-shadow: 0 10px 24px rgba(236,133,0,0.32); }
.connect-guide .connect-guide-go[target="_blank"]:hover { box-shadow: 0 14px 30px rgba(236,133,0,0.42); }
.connect-guide .connect-guide-about[target="_blank"], .connect-guide-note a[target="_blank"] { border-color: rgba(240,140,0,0.45); color: #c46a00; }
.connect-guide .connect-guide-about[target="_blank"]:hover { background: #fff7ea; border-color: #f08c00; color: #c46a00; }

/* ── 「職人手配オンラインへ反映する」の箱を、職人手配オンラインの色（黒＋オレンジ）に（2026-09-20 マサさん指定）──
   畳んだ状態でも「ここは職人手配オンラインの話」とひと目で分かるように：見出しはロゴ（images/shokunin-logo-yoko-dark.png＝横組みロゴの白い字を黒にしたもの）、
   左の帯・絵の四角・「3ステップ」の札・開閉の丸をオレンジに、地はごく薄いオレンジ。中の ❶❷❸ のボタンの色は変えない */
.tehai-relay { border-color: rgba(240,140,0,0.38); box-shadow: 0 2px 10px rgba(240,140,0,0.08); }
.tehai-relay:hover { border-color: rgba(240,140,0,0.65); }
.tehai-relay[open] { box-shadow: 0 6px 22px rgba(240,140,0,0.14); }
.tehai-relay .relay-summary { color: #1a1a1a; background: linear-gradient(90deg, #fff1da 0%, #fffaf1 55%, #ffffff 100%); }
.tehai-relay .relay-summary:hover { background: linear-gradient(90deg, #ffe9c6 0%, #fff6e6 55%, #ffffff 100%); }
.tehai-relay .relay-summary::before { width: 6px; background: linear-gradient(180deg, #ffab24 0%, #ec8500 100%); }
.tehai-relay[open] .relay-summary { border-bottom-color: rgba(240,140,0,0.25); }
.tehai-relay .relay-icon { background: linear-gradient(135deg, #ffab24 0%, #ec8500 100%); box-shadow: 0 2px 8px rgba(236,133,0,0.35); }
.tehai-relay .relay-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.tehai-relay .relay-logo { display: block; height: 19px; width: auto; flex: 0 0 auto; }
.tehai-relay .relay-title-text { font-size: 15px; font-weight: 800; color: #1a1a1a; white-space: nowrap; }
.tehai-relay .relay-title small { margin-left: 4px; background: #fff1dc; color: #c46a00; box-shadow: inset 0 0 0 1px rgba(240,140,0,0.55); letter-spacing: .04em; }   /* 黒い地だと濃かった（2026-09-20 マサさん）→ 薄いオレンジ */
.tehai-relay .relay-chev { border-color: rgba(240,140,0,0.45); color: #d97700; }
.tehai-relay .relay-summary:hover .relay-chev { background: #fff1dc; }
@media (max-width: 660px) { .tehai-relay .relay-logo { height: 16px; } .tehai-relay .relay-title-text { font-size: 14px; } }

/* 削除・クリアの確認に添える「安心のひとこと」（2026-09-20）：SASHITE の中だけの話で、職人手配オンライン上のデータは変わらない、と毎回見せる。
   色は職人手配オンラインのオレンジ。確認の文より一段小さく。左の帯はやめて、全周のうすい線に（同日 マサさん指定） */
.confirm-modal__msg { word-break: auto-phrase; }   /* 文節で折り返す（「移動しま／す。」のような切れ方を防ぐ。対応していないブラウザは今までどおり） */
.confirm-modal__msg.has-note { margin-bottom: 12px; }
.confirm-modal__sub { display: inline-block; margin-top: 3px; font-size: 13px; line-height: 1.6; color: #5f6b76; }   /* 確認の文の（…）の行：改行して一段小さく */
.confirm-modal__note {
    margin: 0 0 20px; padding: 11px 14px 10px; border-radius: 12px; text-align: left; font-size: 12.5px; line-height: 1.75; color: #5a4a2f;
    background: #fff8ec; border: 1px solid rgba(240,140,0,0.32);
}
.confirm-modal__note b { display: block; margin-bottom: 2px; font-size: 14.5px; font-weight: 800; line-height: 1.6; color: #e06a00; }   /* 「SASHITE の中だけで…」をいちばん目立たせる（2026-09-20 マサさん指定） */
.confirm-modal__note small { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(240,140,0,0.4); font-size: 11.5px; line-height: 1.7; color: #7a6a4f; }
.confirm-modal__note, .confirm-modal__note small { word-break: auto-phrase; }   /* 日本語を文節で折り返す（対応していないブラウザは今までどおり） */
.confirm-modal.confirm-modal--note { width: min(372px, 92vw); }   /* 注記つきのときだけ、箱を少し広げる */
.confirm-modal.confirm-modal--left .confirm-modal__msg { text-align: left; }   /* 案件の削除・クリアの確認：案件名が長いと中央寄せは読みづらい（2026-09-27 マサさん。下の注記ももともと左寄せ） */

/* 未保存の確認の3択（2026-09-20）：保存して進む（緑＝SASHITE の主ボタン）／保存せずに進む（赤い字）／やめる（灰）。
   ボタンの名前と小さな説明で、押したらどうなるかが分かるように。縦に並べる */
.confirm-modal.confirm-modal--choice { width: min(360px, 92vw); padding: 26px 20px 18px; }
.confirm-modal--choice .confirm-modal__msg { margin-bottom: 16px; font-weight: 700; color: #1a1a1a; }
.confirm-modal--choice .confirm-modal__sub { font-weight: 400; }
.confirm-modal__choices { display: flex; flex-direction: column; gap: 8px; }
.confirm-modal__choice {
    display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; min-height: 54px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid transparent;
    font: inherit; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; word-break: auto-phrase;
}
.confirm-modal__choice b { font-size: 15px; font-weight: 800; line-height: 1.4; }
.confirm-modal__choice small { font-size: 11.5px; line-height: 1.5; opacity: .85; }
.confirm-modal__choice--save { background: linear-gradient(180deg, #35a291 0%, #1f7f71 100%); color: #fff; box-shadow: 0 2px 8px rgba(0,109,98,0.25); }
.confirm-modal__choice--save:hover { background: linear-gradient(180deg, #2f9484 0%, #1a6f63 100%); }
.confirm-modal__choice--discard { background: #fff; border-color: rgba(192,57,43,0.45); color: #c0392b; }
.confirm-modal__choice--discard:hover { background: #fdf0ee; border-color: #c0392b; }
.confirm-modal__choice--cancel { background: #eef1f3; color: #4a5560; min-height: 46px; }
/* もう 1 つの選択肢（白地・紺の枠）。出勤スタッフ一覧の灰色の名前を押したときの「重複して入れる」など（2026-10-02） */
.confirm-modal__choice--plain { background: #fff; border-color: rgba(44,111,173,0.55); color: #1e3a5f; }
.confirm-modal__choice--plain:hover { background: #f1f6fc; border-color: #2c6fad; }
/* 選ぶ窓の上の「○○さんの配置」（2026-10-02）。行の見た目は「この人どこ？」の吹き出し（.where-pop-row）をそのまま使う。
   下の文（選んでいる枠には、どうしますか？）は、一覧より一段小さく左寄せ */
.confirm-modal--where .where-pop-head { margin: 0 2px 10px; font-size: 13px; }
.confirm-modal--where .where-pop-head b { font-size: 17px; }
.confirm-modal--where .where-pop-list { max-height: 34vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.confirm-modal--where .where-pop-row { flex: 0 0 auto; animation: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.confirm-modal--where .where-pop-row * { cursor: pointer; }
.confirm-modal--where .where-pop-row:focus { outline: none; }
.confirm-modal--where .where-pop-row:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.confirm-modal__wherefoot { margin: 6px 2px 16px; font-size: 11.5px; line-height: 1.5; color: #8a94a6; text-align: left; }
.confirm-modal--where .confirm-modal__msg { margin: 0 2px 8px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #4a5560; text-align: left; }
.confirm-modal__choice--cancel:hover { background: #e2e6e9; }
.confirm-modal__choice:focus-visible { outline: 3px solid rgba(45,140,127,0.45); outline-offset: 2px; }

/* 縮んだヘッダーの手配検討日（2026-09-20 マサさん指定・本体だけ）：スクロールしても、いまどの日を検討しているかが分かるように。
   姉妹ページのページ名と同じ場所（小さいロゴの下）。全部見えているとき（--p:0）は高さ 0＝ヘッダーの高さの計算に影響しない。
   出方は --p に連動（後半 0.45→1 でふわっと）。時間のアニメは使わない */
.sashite-hero-date {
    display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: rgb(32, 28, 24); cursor: pointer; text-align: left;
    overflow: hidden; white-space: nowrap; line-height: 1.3;
    max-height: calc(var(--p) * 22px); margin-top: calc(var(--p) * 2px);
    opacity: clamp(0, (var(--p) - 0.45) * 1.9, 1);
    -webkit-tap-highlight-color: transparent;
}
.sashite-hero-date[hidden] { display: none; }
.sashite-hero:not(.is-compact) .sashite-hero-date { pointer-events: none; }
.sashite-hero-date-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #1f6f64; }
.sashite-hero-date-value { font-size: 14px; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.sashite-hero-date-today { font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 999px; background: #e3f3ef; color: #1f6f64; }
.sashite-hero-date-today[hidden] { display: none; }
.sashite-hero-date:hover .sashite-hero-date-value { text-decoration: underline; text-underline-offset: 3px; }
.sashite-hero-date:focus-visible { outline: 2px solid rgba(45,140,127,0.55); outline-offset: 2px; border-radius: 4px; }

/* 会員情報の「職人手配オンライン：未登録／確認中／無料／◯◯プラン」（2026-09-20 マサさん指定）。会員情報と一緒に、スクロールで消える。
   色のルール：オレンジ＝職人手配オンライン。契約中はオレンジの地、無料・確認中はうすい地、未登録は点線の枠（押せる） */
.sashite-meta-sk { margin: 6px 0 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 7px; line-height: 1.3; }
.sashite-meta-sk-label { font-size: 11px; letter-spacing: .04em; color: rgba(32, 28, 24, 0.6); }
.sashite-meta-sk-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.sashite-meta-sk-chip.is-paid { background: linear-gradient(180deg, #ffab24 0%, #ec8500 100%); color: #fff; box-shadow: 0 1px 4px rgba(236,133,0,0.3); }
.sashite-meta-sk-chip.is-free { background: #fff1dc; color: #c46a00; box-shadow: inset 0 0 0 1px rgba(240,140,0,0.45); }
.sashite-meta-sk-chip.is-wait { background: rgba(255,255,255,0.7); color: rgba(32,28,24,0.6); box-shadow: inset 0 0 0 1px rgba(32,28,24,0.2); }
.sashite-meta-sk-chip.is-none { background: rgba(255,255,255,0.7); color: #c46a00; border: 1.5px dashed rgba(240,140,0,0.7); padding: 2px 10px; transition: background .15s; }
.sashite-meta-sk-chip.is-none:hover { background: #fff1dc; }
.sashite-meta-sk-chip.is-fresh { animation: sk-chip-fresh 1.4s ease-out 1; }   /* 取得のあとに札が変わった瞬間（読み直しなしで変わるので、気づけるように） */
@keyframes sk-chip-fresh { 0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(240,140,0,.55); } 35% { transform: scale(1.06); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(240,140,0,0); } }
/* スマホ：会員情報は格子（3列×2段）なので、この行は3段目に左寄せで置く。置き場所を決めないと1段目に割り込んで、名前とログアウトが重なる */
@media (max-width: 767px) { .sashite-hero-meta .sashite-meta-sk { grid-column: 1 / span 3; grid-row: 3; justify-content: flex-start; margin-top: 4px; } }

/* 手入力の箱：お試しの会員（職人手配オンラインとまだつないでいない）向けの見せ方（2026-09-20 マサさん決定）。
   「お試し」の札は SASHITE 側の話なので緑。「つなぐと…」の案内は職人手配オンラインへ向かう話なのでオレンジ（左の帯は使わない） */
.entry-trial-badge { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; background: #e3f3ef; color: #1f6f64; font-size: 11px; font-weight: 800; letter-spacing: .06em; vertical-align: 1px; }
.entry-panel.is-open .entry-trial-badge { background: rgba(255,255,255,0.92); color: #1f6f64; }
.entry-trial-guide { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 12px 14px 4px; padding: 11px 14px; border-radius: 12px; background: #fff8ec; border: 1px solid rgba(240,140,0,0.32); }
.entry-trial-guide p.entry-trial-guide-text, .entry-trial-guide-text { flex: 1 1 320px; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.7; color: #5a4a2f; word-break: auto-phrase; }
.entry-trial-guide-text b { display: block; font-size: 14px; font-weight: 800; color: #c46a00; }
.entry-trial-guide-btn { flex: 0 0 auto; padding: 9px 16px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffab24 0%, #ec8500 100%); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(236,133,0,0.3); transition: filter .15s, box-shadow .15s; white-space: nowrap; }
.entry-trial-guide-btn:hover { filter: brightness(1.04); box-shadow: 0 3px 12px rgba(236,133,0,0.4); }
@media (max-width: 660px) { .entry-trial-guide { margin: 10px 10px 2px; } .entry-trial-guide-btn { width: 100%; } }

/* カレンダーの月送り（2026-09-21 マサさん指定）：文字の ‹ › だと安っぽいので、横長のピル形のボタン＋線で描いた矢印に（丸も試したが、ピル形に決定）。
   ほかの丸いボタン（反映の箱の開閉・？）と同じ作り。文字は隠す（font-size:0）ので、PHP を上げなくても見た目は変わる。
   ★2026-10-01：iPhone の Safari は小さすぎる文字を勝手に拡大するので、font-size:0 だけだと「‹」が矢印の脇に小さく出て崩れて見えた（マサさん）。
     文字を左の外へ追い出して切り取る（text-indent＋overflow:hidden）＝文字の大きさに頼らない。矢印は ::before の絶対配置なので影響なし */
.saved-cal-header { margin-bottom: 12px; font-size: 15px; letter-spacing: .04em; }
.saved-cal-nav {
    position: relative; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; color: #1e3a5f;
    text-indent: -9999px; overflow: hidden; white-space: nowrap; -webkit-text-size-adjust: none;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5fa 100%); border: 1px solid #cfd9e6; box-shadow: 0 1px 2px rgba(30,58,95,0.10);
    transition: background .15s, border-color .15s, box-shadow .15s, transform .08s, color .15s; -webkit-tap-highlight-color: transparent;
}
.saved-cal-nav::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px;
}
#savedCalPopover .saved-cal-nav { width: 66px; min-width: 66px; max-width: 66px; height: 32px; border-radius: 999px; }   /* 横長のピル形（マサさん：丸よりこちらが良い）。日付の行のボタン向けの幅指定に左右されないよう、id つきで幅を決める */
#savedCalPrev::before { transform: translate(-30%, -50%) rotate(135deg); }
#savedCalNext::before { transform: translate(-70%, -50%) rotate(-45deg); }
.saved-cal-nav:hover { color: #fff; background: linear-gradient(180deg, #2c6fad 0%, #1e3a5f 100%); border-color: #1e3a5f; box-shadow: 0 2px 8px rgba(30,58,95,0.28); }
.saved-cal-nav:active { transform: scale(0.94); }
.saved-cal-nav:focus-visible { outline: 3px solid rgba(44,111,173,0.4); outline-offset: 2px; }
@media (hover: none) { #savedCalPopover .saved-cal-nav { width: 66px; min-width: 66px; max-width: 66px; height: 38px; } .saved-cal-nav:hover { color: #1e3a5f; background: linear-gradient(180deg, #ffffff 0%, #f1f5fa 100%); border-color: #cfd9e6; box-shadow: 0 1px 2px rgba(30,58,95,0.10); } .saved-cal-nav:active { color: #fff; background: #1e3a5f; border-color: #1e3a5f; } }

/* サンプルデータでのお試し（2026-09-21）。お試し・サンプルは SASHITE 側の話なので緑。職人手配オンラインへ向かうボタンだけオレンジ（左の帯は使わない） */
.entry-sample { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 8px 14px 4px; padding: 11px 14px; border-radius: 12px; background: #f1faf7; border: 1px solid rgba(45,140,127,0.30); }
.entry-sample p.entry-sample-text, .entry-sample-text { flex: 1 1 320px; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.7; color: #33524c; word-break: auto-phrase; }
.entry-sample-text b { display: block; font-size: 14px; font-weight: 800; color: #1f6f64; }
.entry-sample-btn { flex: 0 0 auto; padding: 9px 16px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #35a291 0%, #1f7f71 100%); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0,109,98,0.25); transition: filter .15s, box-shadow .15s; white-space: nowrap; }
.entry-sample-btn:hover { filter: brightness(1.05); box-shadow: 0 3px 12px rgba(0,109,98,0.35); }
.sample-bar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 14px 0 6px; padding: 10px 14px; border-radius: 12px; background: #f1faf7; border: 1.5px dashed rgba(45,140,127,0.55); }
.sample-bar-badge { flex: 0 0 auto; padding: 4px 11px; border-radius: 999px; background: #1f7f71; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.sample-bar-text { flex: 1 1 300px; min-width: 0; font-size: 12.5px; line-height: 1.65; color: #33524c; word-break: auto-phrase; }
.sample-bar-text b { display: block; font-size: 13.5px; color: #1a4f47; }
.sample-bar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sample-bar-btn { padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: filter .15s, background .15s; }
.sample-bar-btn--guide { border: 0; background: linear-gradient(180deg, #ffab24 0%, #ec8500 100%); color: #fff; box-shadow: 0 2px 8px rgba(236,133,0,0.3); }
.sample-bar-btn--guide:hover { filter: brightness(1.04); }
.sample-bar-btn--clear { border: 1.5px solid rgba(45,140,127,0.5); background: #fff; color: #1f6f64; }
.sample-bar-btn--clear:hover { background: #e3f3ef; }
body.is-sample-mode #saveButton { opacity: .45; }   /* 保存は押せるが、押すと理由が出て止まる。見た目でも「いまは保存するものではない」と伝える */
@media (max-width: 660px) { .entry-sample { margin: 8px 10px 2px; } .entry-sample-btn { width: 100%; } .sample-bar-btns { width: 100%; } .sample-bar-btn { flex: 1 1 auto; } }

/* 役割のちがい（2026-09-21 マサさん指定）：SASHITE＝考えて決める（緑）／職人手配オンライン＝ためて共有する（オレンジ）。枠の色だけで分ける（左の帯は使わない） */
.cx-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
.cx-role { display: flex; flex-direction: column; gap: 4px; padding: 14px 15px 13px; border-radius: 14px; background: #fff; }
.cx-role--sashite { box-shadow: inset 0 0 0 1.5px rgba(45,140,127,0.45); }
.cx-role--shokunin { box-shadow: inset 0 0 0 1.5px rgba(240,140,0,0.5); }
.cx-role-verb { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.cx-role--sashite .cx-role-verb { background: #e3f3ef; color: #1f6f64; }
.cx-role--shokunin .cx-role-verb { background: #fff1dc; color: #c46a00; }
.cx-role b { font-size: 15.5px; font-weight: 900; line-height: 1.4; color: #1a1a1a; }
/* 見出しはロゴで（2026-09-21 マサさん指定）。2つのロゴは縦横の比が違うので、見た目の大きさがそろうよう高さを別々に決める。ロゴは先頭、動詞の札はその下 */
.cx-role-logo { display: block; width: auto; max-width: 100%; align-self: flex-start; order: -1; margin: 2px 0 6px; }
.cx-role-logo--sashite { height: 26px; }
.cx-role-logo--shokunin { height: 19px; margin-top: 6px; margin-bottom: 9px; }
.cx-role-text { font-size: 12.5px; line-height: 1.7; color: #4a5560; word-break: auto-phrase; }
.cx-role--sashite .cx-role-text strong { color: #1f6f64; } .cx-role--shokunin .cx-role-text strong { color: #c46a00; }
.cx p.cx-roles-sum, .cx-roles-sum { margin: 0 0 18px; font-size: 12.5px; line-height: 1.7; color: #4a5560; text-align: center; word-break: auto-phrase; }
.cx-roles-sum .o { color: #c46a00; } .cx-roles-sum .t { color: #1f6f64; }
@media (max-width: 660px) { .cx-role-logo--sashite { height: 30px; } .cx-role-logo--shokunin { height: 22px; } .cx-roles { grid-template-columns: 1fr; } .cx-role b { font-size: 16.5px; } .cx-role-text { font-size: 13.5px; } .cx p.cx-roles-sum, .cx-roles-sum { font-size: 13px; text-align: left; } }

/* 移動系の機能の案内（有料プランの特典）を、職人手配オンラインへの誘導として作り直し（2026-09-21 マサさん指定）。色はオレンジ＝職人手配オンライン。左の帯は使わない */
.prm-modal .ccm-header { background: linear-gradient(90deg, #fff1da 0%, #fffaf1 70%, #ffffff 100%); border-bottom: 1px solid rgba(240,140,0,0.25); }
.prm-modal .prm-logo { display: block; height: 18px; width: auto; margin: 0 auto 7px; }
.prm-modal .ccm-title { color: #c46a00; font-size: 16px; font-weight: 800; }
.prm-modal .prm-plan { background: #fff8ec; border: 1px solid rgba(240,140,0,0.32); }
.prm-modal .prm-plan-name { color: #c46a00; }
.prm-steps { margin: 12px 0 10px; padding: 12px 14px 10px; border-radius: 12px; background: #f7f9fb; border: 1px solid #e3e8ee; }
.prm-steps p.prm-steps-title, .prm-steps-title { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #55606b; }
.prm-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: prm; display: grid; gap: 8px; }
.prm-steps li { counter-increment: prm; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.65; color: #2a3440; word-break: auto-phrase; }
.prm-steps li::before { content: counter(prm); flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ffab24 0%, #ec8500 100%); }
.prm-steps li b { color: #1a1a1a; }
.prm-modal .ccm-btn-exec.prm-go { flex: 1.6 1 0; background: linear-gradient(180deg, #ffab24 0%, #ec8500 100%); box-shadow: 0 4px 12px rgba(236,133,0,0.3); font-weight: 800; }
.prm-modal .ccm-btn-exec.prm-go:hover { background: linear-gradient(180deg, #ffab24 0%, #ec8500 100%); filter: brightness(1.05); color: #fff; }
.prm-modal .ccm-btn-exec.prm-go--connect { background: linear-gradient(135deg, #2f9484 0%, #17594f 100%); box-shadow: 0 4px 12px rgba(0,109,98,0.3); }   /* 「つなぐ」は SASHITE の中の話なので緑 */
.prm-modal .ccm-btn-exec.prm-go--connect:hover { background: linear-gradient(135deg, #2f9484 0%, #17594f 100%); }
/* 背の低い画面でも上が切れないように、中で縦に流す。ボタンは縦に積む（主ボタンを上・「閉じる」を下）＝文字が折り返さない */
.prm-modal { max-height: 88vh; max-height: 88dvh; overflow-y: auto; scrollbar-width: none; }   /* 再現率のモーダル（.cs-modal-window）と同じ 88%。前は画面いっぱいで、iPhone のステータスバーにかかっていた */
.credit-confirm-modal.prm-modal { max-width: 440px; }   /* スマホ・小さい画面の幅も、再現率のモーダルと同じ 440px まで（PC は下の @media で 740px） */
#planRequiredOverlay { padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); box-sizing: border-box; }
.prm-modal .ccm-header { position: relative; padding-right: 44px; padding-left: 44px; }
.prm-modal .prm-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #9a7a4a; font-size: 17px; line-height: 1; cursor: pointer; }
.prm-modal .prm-close:hover { background: rgba(240,140,0,0.12); color: #c46a00; }
/* スマホ：中身が長くて下へ流れても、主ボタンはいつも見えるように下に貼り付ける（上の端はふわっと白く） */
@media (max-width: 759px) { .prm-modal .ccm-btns { position: sticky; bottom: 0; z-index: 1; margin: 0 -16px; padding: 16px 16px 12px; background: linear-gradient(to top, #fff 80%, rgba(255,255,255,0)); } .prm-modal .ccm-hint { margin-bottom: 4px; } }
.prm-modal .ccm-btns { flex-direction: column-reverse; gap: 8px; }
.prm-modal .ccm-btns > * { flex: 0 0 auto; width: 100%; }
.prm-modal .ccm-btn-exec.prm-go { flex: 0 0 auto; padding-top: 13px; padding-bottom: 13px; font-size: 15px; white-space: nowrap; }
.prm-modal .ccm-btn-cancel { padding-top: 10px; padding-bottom: 10px; }
.prm-sub-link { margin: 10px 0 0; text-align: center; font-size: 12px; }
.prm-sub-link a { color: #c46a00; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 移動チェックのカード：無料の会員には、残り回数のメーターの代わりに「特典」の案内（2026-09-21）。札はオレンジ＝職人手配オンライン。カードの緑はそのまま */
.cgm-locked { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 6px; }
.cgm-locked[hidden] { display: none; }
.cgm-locked-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff1dc; color: #c46a00; box-shadow: inset 0 0 0 1px rgba(240,140,0,0.5); font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1.4; }
.cgm-locked-text { font-size: 11.5px; line-height: 1.5; color: #33524c; }
.credit-gauge-mini.is-locked .cgm-num, .credit-gauge-mini.is-locked .cgm-bar, .credit-gauge-mini.is-locked .cgm-sub { display: none; }

/* 有料プランの案内：PC の横長レイアウト（2026-09-21）。スマホ（760px 未満）は上の縦1列のまま */
@media (min-width: 760px) {
    .credit-confirm-modal.prm-modal { max-width: 740px; border-radius: 20px; }
    .prm-modal .ccm-header { padding: 22px 56px 18px 28px; text-align: left; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .prm-modal .prm-close { top: 14px; right: 14px; }
    .prm-modal .prm-logo { height: 22px; margin: 0; }
    .prm-modal .ccm-title { font-size: 19px; }
    .prm-modal .ccm-sub { margin: 0 0 0 auto; font-size: 12px; }
    .prm-modal .ccm-body { padding: 22px 28px 22px; }
    .prm-modal .prm-lead { font-size: 15px; line-height: 1.8; margin-bottom: 18px; }
    .prm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; margin-bottom: 14px; }
    .prm-grid > div { min-width: 0; display: flex; flex-direction: column; }
    .prm-modal .ccm-breakdown { margin-bottom: 12px; }
    .prm-modal .ccm-bd-row { padding: 13px 14px; gap: 10px; }
    .prm-modal .ccm-bd-icon { font-size: 18px; width: 24px; }
    .prm-modal .ccm-bd-name { font-size: 13.5px; line-height: 1.5; }
    .prm-modal .ccm-bd-sub { font-size: 11.5px; line-height: 1.6; color: #8a96a3; margin-top: 2px; }
    .prm-modal .prm-plan { margin-bottom: 0; margin-top: auto; }
    .prm-modal .prm-steps { margin: 0; padding: 16px 18px 14px; flex: 1 1 auto; }
    .prm-modal .prm-steps-title { font-size: 12.5px; margin-bottom: 12px; }
    .prm-modal .prm-steps ol { gap: 12px; }
    .prm-modal .prm-steps li { font-size: 14px; line-height: 1.7; gap: 12px; }
    .prm-modal .prm-steps li::before { flex-basis: 26px; width: 26px; height: 26px; font-size: 13px; }
    .prm-modal .ccm-hint { font-size: 12px; line-height: 1.7; text-align: left; margin-bottom: 16px; }
    .prm-modal .ccm-btns { flex-direction: row; align-items: stretch; gap: 10px; }
    .prm-modal .ccm-btns > * { width: auto; }
    .prm-modal .ccm-btn-cancel { flex: 0 0 150px; font-size: 14px; }
    .prm-modal .ccm-btn-exec.prm-go { flex: 1 1 auto; font-size: 16px; padding-top: 15px; padding-bottom: 15px; border-radius: 12px; }
    .prm-modal .prm-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
    .prm-modal .prm-foot-row .prm-sub-link, .prm-modal .prm-foot-row .prm-foot { margin: 0; font-size: 12.5px; }
}

/* 手で割り当てるときの「おすすめ」（2026-09-23）：枠を押すと、欄の下に吹き出し（.where-pop と同じ作り）。押せる候補が3人まで。色はモノクロ（墨色）＝一覧の名札の色だけが立つように。青は自動割当・割当済みと紛れるのでやめた */
.where-pop.rec-pop { pointer-events: auto; min-width: 250px; max-width: min(360px, calc(100vw - 16px)); border-color: rgba(31,41,55,0.16); }
.rec-pop .where-pop-head b { color: #1f2937; }
.rec-pop .where-pop-head em { background: #eceef2; color: #3a4452; }
/* 配置が変わった直後（新しい点数を取りに行っている間）：薄くして押せない。2026-09-29 */
.rec-pop.is-stale { opacity: .6; }
.rec-pop.is-stale .rec-pop-row { pointer-events: none; }
.rec-pop.is-stale .where-pop-head em { background: #fff1dc; color: #a85a00; }
.rec-pop-list { display: flex; flex-direction: column; gap: 6px; }
.rec-pop-row {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 10px 8px 8px;
    border: 1px solid #e1e4ea; border-radius: 11px; background: #f6f7f9; color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.rec-pop-row:hover { background: #eceef2; border-color: #b8bec9; }
.rec-pop-row:active { transform: scale(.985); }
.rec-pop-row:focus-visible { outline: 3px solid rgba(31,41,55,0.3); outline-offset: 1px; }
.rec-pop-rank { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #4b5563 0%, #1f2937 100%); }
.rec-pop-row:first-child .rec-pop-rank { width: 24px; height: 24px; flex-basis: 24px; font-size: 13px; box-shadow: 0 2px 6px rgba(31,41,55,0.35); }
.rec-pop-card { flex: 0 0 auto; display: block; }   /* 一覧の名札の写し（幅・高さ・色は tehai-recommend.js が元の札から写す。形は .staff-ghost と同じ） */
.rec-pop-card > li .staff-marks { pointer-events: none; }
.rec-pop-why { flex: 1 1 60px; min-width: 0; font-size: 11px; line-height: 1.35; color: #5b6572; text-align: right; word-break: auto-phrase; }
.rec-pop-note { margin: 8px 2px 0; font-size: 11px; color: #b45309; }
.rec-pop-foot { margin: 8px 2px 0; font-size: 10.5px; line-height: 1.5; color: #8a94a6; }
/* 吹き出しの中の「この吹き出しを出さない」（2026-10-02）。小さな文字のリンク。押したら確かめてから止める */
.rec-pop .rec-pop-off { display: block; width: auto; min-height: 0; margin: 6px 0 0 auto; padding: 6px 2px 2px; background: none; border: 0; box-shadow: none; font-size: 10.5px; font-weight: 400; line-height: 1.4; color: #8a94a6; text-decoration: underline; cursor: pointer; }
.rec-pop .rec-pop-off:hover { color: #4a5560; }
body:has(.tapmove-menu) .rec-pop, body:has(.confirm-modal-overlay) .rec-pop { display: none; }
.rec-pop .where-pop-tail { transition: left .12s; }   /* 四角は動かず △ だけ欄に合わせて動く */
@media (max-width: 660px) { .rec-pop-row { padding: 10px 10px 10px 8px; } .rec-pop-name { font-size: 15px; } }

/* 割当状況の札：スマホも一覧の札と同じ寄せ方（上の @media の padding: 0 5px を上書き。2026-09-26） */
/* 大きさも一覧の札とそろえる（2026-09-26 マサさん指定）：PC は元から 110×25。スマホは一覧の札（tehai-app-responsive.css）と同じ 90×32 に固定。
   前は列の幅に合わせて伸び縮みしていた（4人並ぶと 73px で名前が切れ、2人だと 152px に伸びる）。90px にすると 375px の画面で1行3人・右に少し余白 */
.avail-pill { line-height: 1.5; }   /* 一覧の札と同じ行の高さ（13px × 1.5） */
@media (max-width: 660px) {
    .avail-col-body { grid-template-columns: repeat(auto-fill, 90px); }
    .avail-pill { width: 90px; max-width: 90px; padding: 0 var(--chip-edge, 3px) 0 var(--name-pad-x, 5px); gap: 3px; }
}

/* ── 割当状況の窓から「案件対応可能日を編集する」（tehai/js/tehai-avail-cal.js・2026-09-26） ── */
.avail-cal-entry { margin: 12px 20px 16px; padding-top: 12px; border-top: 1px solid #eef0f5; container-type: inline-size; }   /* 幅は表が決める（注記の長さで窓が広がらない）。中の並べ方はこの幅で切り替える */
.avail-cal-entry-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }   /* 狭いとき：ボタンは幅いっぱい、注記は下 */
.avail-cal-entry-row .avail-cal-open { width: 100%; }
@container (min-width: 520px) {   /* 広いとき（PC で表が広い日）：ボタン｜注記 を横に並べ、右に空白を残さない（2026-09-26 マサさん） */
    .avail-cal-entry-row { flex-direction: row; align-items: center; gap: 14px; }
    .avail-cal-entry-row .avail-cal-open { width: auto; flex: 0 0 auto; }
    .avail-cal-entry-row .avail-cal-entry-note { flex: 1 1 auto; min-width: 0; }
}
.avail-cal-entry[hidden] { display: none; }
/* 「職人手配オンラインを開く」（.shokunin-link）と同じ作り：白地・オレンジの枠・オレンジの丸い印・ロゴ（押した先で職人手配オンラインへ行くもの＝オレンジ。2026-09-26） */
.avail-cal-open {
    display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 12px; box-sizing: border-box;
    border: 1.5px solid rgba(240,140,0,0.45); background: #fff; color: #1e3a5f; font: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.avail-cal-open:hover { border-color: #f08c00; background: #fffaf2; box-shadow: 0 2px 10px rgba(240,140,0,0.16); }
.avail-cal-open-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff1dc; color: #d97700; }
.avail-cal-open-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.avail-cal-open-logo { display: block; height: 14px; width: auto; }
.avail-cal-open-brand { font-size: 10.5px; font-weight: 700; color: #c46a00; }
.avail-cal-open-text b { font-size: 14px; font-weight: 700; line-height: 1.3; color: #1e3a5f; }
.avail-cal-open-chev { flex: 0 0 auto; margin-left: auto; padding-left: 8px; font-size: 20px; line-height: 1; color: #d97700; }
/* 重ねて開く窓：見出しにもロゴ。カレンダー（押すと職人手配へ）もオレンジ */
.avail-cal-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.avail-cal-title-logo { display: block; height: 14px; width: auto; }
.avail-cal-title-brand { font-size: 11px; font-weight: 700; color: #c46a00; }
.avail-cal-entry-note { margin: 0; font-size: 11px; line-height: 1.65; color: #8a94a6; }

/* 重ねて開く窓（枠は .cs-modal-* を共用。見出しと道具は固定、一覧だけスクロール） */
.avail-cal-window { max-width: 480px; max-height: 88vh; max-height: 88dvh; overflow: hidden; }
/* 2026-09-28 マサさん指定：検索で人数が変わっても窓の縦幅は変えない（一覧の中だけスクロール）。
   PC は 720px（画面が低ければ 88dvh に収める）。スマホ（〜660px）は 88dvh で固定し、幅も画面いっぱい近くに */
.avail-cal-window { height: min(720px, 88vh); height: min(720px, 88dvh); }
@media (max-width: 660px) {
    .avail-cal-window { height: 88vh; height: 88dvh; max-width: none; width: calc(100vw - 24px); }
}
.avail-cal-head { padding: 8px 20px 10px; flex-shrink: 0; }
.avail-cal-lead { margin: 0 0 10px; font-size: 12px; line-height: 1.65; color: #5a6b7c; }
.avail-cal-search { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.avail-cal-q { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 8px 12px; border: 1.5px solid #d0d7e2; border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.avail-cal-q:focus { outline: none; border-color: #2c6fad; box-shadow: 0 0 0 3px rgba(44,111,173,0.15); }
.avail-cal-count { flex: 0 0 auto; font-size: 11.5px; color: #8a94a6; }
.avail-cal-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.avail-cal-sort-label { font-size: 12px; font-weight: 700; color: #6b7785; margin-right: 2px; }
.avail-cal-sort-btn { padding: 5px 12px; border: 1.5px solid #d0d7e2; border-radius: 999px; background: #fff; color: #3a4a5c; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.4; cursor: pointer; }
.avail-cal-sort-btn:hover { background: #f3f6fa; }
.avail-cal-sort-btn.is-on { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.avail-cal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px 6px; overscroll-behavior: contain; }
.avail-cal-list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(30,58,95,0.08); }
.avail-cal-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid #eef1f4; }
.avail-cal-row:first-child { border-top: none; }
.avail-cal-row[hidden] { display: none; }
.avail-cal-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.avail-cal-name b { font-size: 14px; font-weight: 700; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avail-cal-alias { font-size: 11px; font-weight: 400; color: #888; }   /* 手配マスター管理の一覧と同じ3段（表示名は薄字） */
.avail-cal-kana  { font-size: 10px; font-weight: 400; color: #888; letter-spacing: 0.02em; }   /* フリガナは同じ色で一回り小さく */
.avail-cal-level { flex: 0 0 auto; font-size: 11px; color: #d98a1f; letter-spacing: -0.5px; white-space: nowrap; }
.avail-cal-link {
    flex: 0 0 auto; width: 38px; height: 38px; box-sizing: border-box; border-radius: 10px; display: grid; place-items: center;
    color: #d97700; background: #fff1dc; border: 1px solid rgba(240,140,0,0.45); text-decoration: none; transition: background .15s, color .15s;
}
a.avail-cal-link:hover { background: linear-gradient(135deg, #ffab24 0%, #ec8500 100%); border-color: #ec8500; color: #fff; }
.avail-cal-link.is-off { color: #c3cad3; background: #f5f6f8; border-color: #eceef1; cursor: not-allowed; }
.avail-cal-msg { margin: 0; padding: 18px 8px; font-size: 13px; line-height: 1.7; color: #8a94a6; text-align: center; }
.avail-cal-msg.is-error { color: #c0392b; }
.avail-cal-foot { flex-shrink: 0; padding: 8px 20px 16px; max-height: 45%; overflow-y: auto; box-sizing: border-box; }   /* 下が伸びすぎて一覧が潰れないように */
.avail-cal-foot.is-after .avail-cal-foot-note { display: none; }   /* 取得の案内が出たら、未登録の注記は畳む */
.avail-cal-after-why { flex: 1 1 100%; margin: 0; font-size: 11.5px; line-height: 1.6; color: #b45309; }
.avail-cal-after-why[hidden] { display: none; }
.avail-cal-foot-note { margin: 0; font-size: 11px; line-height: 1.6; color: #8a94a6; }
.avail-cal-foot-note:empty { display: none; }
.avail-cal-after { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #f1d2c9; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avail-cal-after[hidden] { display: none; }
.avail-cal-after p { flex: 1 1 100%; margin: 0; font-size: 12px; line-height: 1.6; color: #5a3a33; }   /* 文は1段目いっぱい、ボタンは2段目の右 */
.avail-cal-after .avail-cal-sync { margin-left: auto; }
.avail-cal-after p b { display: block; color: #8b1a1a; }
.avail-cal-sync { flex: 0 0 auto; padding: 8px 14px; border-radius: 8px; border: 1.5px solid #c0392b; background: #fff; color: #c0392b; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.avail-cal-sync:hover { background: #c0392b; color: #fff; }
@media (max-width: 660px) {
    .avail-cal-entry { margin: 10px 16px 14px; }
    .avail-cal-open { width: 100%; }
    .avail-cal-head { padding: 6px 16px 8px; }
    .avail-cal-body { padding: 0 10px 6px; }
    .avail-cal-foot { padding: 8px 16px 14px; }
    .avail-cal-row { padding: 9px 10px; }
}

/* 割当状況の窓：見出し（青い帯）は動かさず、下の中身（表・凡例・案件対応可能日のボタン）だけスクロール（ほかの窓と同じ。2026-09-26 マサさん指定）。
   高さはほかの窓（.cs-modal-window）と同じ画面の 88% まで。人数の多い日でも ✕ と下のボタンに届く（点検の指摘もこれで解消）。
   ★スマホは前から「表だけスクロール・凡例は下に固定」だったのを、PC と同じ「見出しの下ぜんぶがスクロール」にそろえた */
.avail-card { max-height: 88vh; max-height: 88dvh; }
.avail-header { flex-shrink: 0; }
.avail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (max-width: 660px) {
    .avail-card { max-height: 88vh; max-height: 88dvh; }   /* ほかの窓と同じ「いま見えている画面」の 88%（前は 88svh＝ツールバーが引っ込むと割当状況だけ低かった。2026-09-26） */
    .avail-scroll .avail-body { flex: none; min-height: auto; overflow-y: visible; }   /* 表だけのスクロールはやめて、.avail-scroll に任せる */
    /* 表の左右の余白を詰めて、iPhone の Max 系（幅 428〜430px）で1行に4人（90px×4＋すき間）入るように（2026-09-26 マサさん指定）。
       並べる人数は今までどおり「入るだけ」＝機種の横幅に合わせて自動（それより狭い機種は3人）。窓の外側の余白（16px）はほかの窓と同じまま */
    .avail-scroll .avail-body { margin: 0 4px; }
    .avail-scroll .avail-col-body { padding: 6px 4px; }
}

/* 割当状況の窓（PC）：1列の人数を画面の高さに合わせたとき（tehai-app.js fitAvailBody・2026-09-26）
   ・列が増えて窓の横幅（96vw）に収まらない → 表を横に動かせる（is-wide）
   ・枠が4つ以上（is-many）で1つの枠が2列以上になった → その枠の幅は中身に合わせる（26% の固定幅だと札がはみ出す） */
.avail-body.is-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.avail-body.is-many .avail-col.has-multi { flex: 0 0 auto; }

/* 窓の置き方をそろえる（2026-09-26 マサさん「案件対応可能日の窓がほかより上すぎ。ほかの窓と同じルールに」）。
   基準＝有料プランの案内（#planRequiredOverlay・2026-09-21）：外側の余白に画面の縁（ステータスバー・ホームバー・ノッチ）の分を足す（最低 16px）、
   窓の高さは「いま見えている画面」（dvh）の 88% まで。ホーム画面から開いたアプリ表示では SASHITE がステータスバーの下まで描くので、
   縁の分を空けないと背の高い窓（スタッフの多い日の案件対応可能日・割当状況）が帯にかかって上に寄って見える。
   対象：再現率・移動チェックのクレジット・案件対応可能日（.cs-modal-overlay）、割当状況（.avail-overlay）。PC では縁が 0 なので見た目は変わらない */
.cs-modal-overlay, .avail-overlay {
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}
.cs-modal-window { max-height: 88vh; max-height: 88dvh; }

/* 案件対応可能日の窓：名前の長押し（PC は右クリック）メニュー（2026-09-26）。見た目は割当欄の長押しメニュー（.tapmove-menu）と同じ */
.avail-cal-lead-sub { display: block; margin-top: 2px; font-size: 11px; color: #8a94a6; }
.avail-cal-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }   /* 長押しで文字の選択・コピーのメニューが出ないように */
.avail-cal-menu { position: fixed; z-index: 10050; min-width: 180px; padding: 8px; border: 1px solid rgba(32,28,24,0.14); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.18); font-size: 13px; }
.avail-cal-menu[hidden] { display: none; }
.avail-cal-menu-name { margin: 2px 6px 8px; color: rgba(32,28,24,0.55); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avail-cal-menu-btn { display: block; box-sizing: border-box; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid #2c5282; border-radius: 8px; background: #f4f7fb; color: #1e3a5f; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer; }
.avail-cal-menu-btn:hover { background: #e6eefa; color: #1e3a5f; }
.avail-cal-menu-btn--cancel { border-color: rgba(32,28,24,0.2); background: #fff; color: rgba(32,28,24,0.6); font-weight: 400; }
@media (max-width: 660px) { .avail-cal-menu-btn { padding: 11px 10px; font-size: 14px; } }

/* 案件対応可能日の窓から開く「スタッフ編集」（tehai-avail-cal.js openEdit・2026-09-26）：画面いっぱいの暗い幕＋透明な窓枠（手配マスター管理の編集の窓だけが見える）。
   窓枠は画面の縁（ステータスバー・ホームバー）の内側に置く（窓枠の中では画面の縁が 0 になるため、ここで空ける） */
/* ★窓枠は画面いっぱいに置く（縁の内側に小さく置くと、中の編集の窓がほかの窓より低くなる）。画面の縁の大きさは、窓枠の中の手配マスター管理が
   親（ここ）で測って自分の余白に使う（tehai-master.js の「はめ込み」→ --sashite-safe-*）。2026-09-26 */
.avail-cal-edit { position: fixed; inset: 0; z-index: 10060; box-sizing: border-box; background: rgba(15,23,42,0.42); }
.avail-cal-edit-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity .15s; }
.avail-cal-edit.is-ready .avail-cal-edit-frame { opacity: 1; }
.avail-cal-edit-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; max-width: calc(100% - 32px); margin: 0; padding: 14px 18px;
    border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.18); font-size: 13px; line-height: 1.7; color: #3a4a5c; text-align: center; }
.avail-cal-edit.is-ready .avail-cal-edit-msg { display: none; }
.avail-cal-edit-actions { display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.avail-cal-edit-actions a, .avail-cal-edit-actions button { padding: 8px 14px; border-radius: 8px; border: 1.5px solid #1e3a5f; background: #fff; color: #1e3a5f; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }

/* 窓が開いている間は後ろのページを止める（tehai/js/tehai-scroll-lock.js が html に .sashite-scroll-lock を付ける・2026-09-26）。
   純正のスクロールバーはサイト共通（css/base.css）で出していないので、止めても中身は横にずれない */
html.sashite-scroll-lock { overflow: hidden !important; }
html.sashite-scroll-lock body { overflow: hidden !important; overscroll-behavior: none; }

/* 窓が開いている間は、サイト共通の「細いスクロールの印」（js/script.js の .tk-element-scroll-indicator）を窓の上に出す
   （2026-09-26 マサさん「マスタの窓のスクロールバーも本体と同じ見せ方に」）。9/18 に保存の札の下（z-index 890）へ回したため、
   窓の中をスクロールしても印が窓の幕の裏に隠れて見えていなかった。窓が開いている間に動かせるのは一番上の窓の中だけ
   （tehai-scroll-lock.js）＝印は窓の中のもの。保存の札は幕の裏なので、札の上に乗る心配もない。
   2つに分けて書く（:has を知らない古いブラウザでも、上の1つは効くように） */
html.sashite-scroll-lock .tk-element-scroll-indicator { z-index: 2147483000; }
html.sashite-scroll-lock body:has(#tehaiDockBar) .tk-element-scroll-indicator { z-index: 2147483000; }

/* PC：下に出力・保存の帯が出ているときは、トーストを帯の上に出す（2026-09-26 マサさん指定。9/17 の「PC は今のまま」から変更）。
   帯の高さ＝ボタン 54px＋上下 8px＋上の線 1px＝71px（＋画面の下端）。その 16px 上。
   畳んだとき（取っ手だけ）・右に縦置きのとき（1500px 以上）は、今までどおり右下 24px。
   :has を知らない古いブラウザでは今までの位置のまま（重なるだけで壊れない） */
@media (min-width: 661px) {
    #toast-container { transition: bottom .22s ease; }
    body:has(#tehaiDockBar) #toast-container { bottom: calc(87px + env(safe-area-inset-bottom, 0px)); }
    body.dockbar-folded:has(#tehaiDockBar) #toast-container,
    body.dockbar-hidden:has(#tehaiDockBar) #toast-container,
    body.dockbar-tuck:has(#tehaiDockBar) #toast-container { bottom: 24px; }
}
@media (min-width: 1500px) {
    body.dockbar-right:has(#tehaiDockBar) #toast-container { bottom: 24px; }
}

/* ── NG業者・相性の悪いスタッフの確認（tehai/js/tehai-assign-guard.js・2026-09-26）──
   土台は確認の窓（.confirm-modal）。窓の決まり（外側の余白＝16px＋画面の縁・高さは画面の 88% まで・角丸 18px・スマホも真ん中）にそろえる。
   z-index は長押しメニュー（10050）・持ち上げの案内（10045）・掴んだ影（10000）より上 */
.assign-warn-overlay {
    z-index: 10070; box-sizing: border-box; overflow: hidden;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.assign-warn {
    width: 100%; max-width: 420px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    box-sizing: border-box; border-radius: 18px; padding: 22px 22px 16px; text-align: left;
}
/* 色は控えめに（2026-09-26 マサさん「仰々しくしたくない」）：赤は使わない。注意の色は ⚠ の薄いオレンジと、理由の言葉の下線だけ。
   動きは「窓がふわっと出る → ⚠ から波紋が1回 → 理由の言葉に下線がスッと引かれる」で1秒弱。そのあとは動かない */
.assign-warn { animation: assign-warn-in .2s ease-out both; }
.assign-warn__title { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 700; line-height: 1.6; color: #2c3e50; }
.assign-warn__icon { position: relative; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: #fdf0dc; color: #b86a00; display: inline-flex; align-items: center; justify-content: center; }
.assign-warn__icon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ef9f27; opacity: 0; animation: assign-warn-ping .9s .2s ease-out both; }
.assign-warn__item { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #f3f5f8; }
.assign-warn__who { margin: 0 0 4px; font-size: 14px; line-height: 1.6; color: #2c3e50; }
.assign-warn__where { display: block; font-size: 12px; font-weight: 400; color: #8a94a6; }
.assign-warn__list { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.8; color: #4a5a6c; }
.assign-warn__mark {
    color: #2c3e50; font-weight: 700; padding: 0 1px 2px;
    background: linear-gradient(#ef9f27, #ef9f27) no-repeat 0 100% / 100% 3px;
    animation: assign-warn-line .5s .45s ease-out both;
}
.assign-warn__ask { margin: 14px 0 14px; font-size: 15px; font-weight: 700; line-height: 1.6; color: #333; text-align: center; }
.assign-warn .confirm-modal__btn { padding: 12px 6px; white-space: nowrap; }
/* 「このまま割り当てる」は赤（消す操作の色）ではなく、SASHITE の落ち着いた紺。「やめる」は白地に細い枠 */
.assign-warn .confirm-modal__btn--yes { background: #1e3a5f; color: #fff; }
.assign-warn .confirm-modal__btn--yes:hover { background: #16304f; }
.assign-warn .confirm-modal__btn--no { background: #fff; color: #4a5a6c; border: 1px solid #d0d7e2; }
.assign-warn .confirm-modal__btn--no:hover { background: #f3f5f8; }
@keyframes assign-warn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes assign-warn-ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes assign-warn-line { from { background-size: 0% 3px; } to { background-size: 100% 3px; } }
@media (prefers-reduced-motion: reduce) {
    .assign-warn, .assign-warn__icon::after, .assign-warn__mark { animation: none; }
}
@media (max-width: 380px) {
    /* 幅の狭いスマホ（iPhone SE など）は2つを縦に並べる（「このまま割り当てる」が途中で折り返さないように） */
    .assign-warn .confirm-modal__btns { flex-direction: column; gap: 8px; }
}
.assign-warn__note { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: #8a94a6; text-align: center; }

/* ── 案件カードの「案件情報」「職人手配で開く」（tehai-app.js fillProjectUrlBlock）── 2026-09-27 マサさん選定「D」
   PC   ：時間（メモ）の行の右端に、文字だけの小さなリンク「⧉ 案件情報 ｜ 職人手配で開く ↗」。案件名の行は圧迫しない（案件名は1行まるごと）
   スマホ：この箱ごと隠す。MAP の場所の「☰」から、同じものを選ぶ窓で出す（下の「☰」の決まり・2026-09-27 マサさん）
           （その前は、時間の下／カードの一番下に左右半々のボタン。カードが縦に長くなるのでやめた）
   ★カードの中の要素の並び（DOM）は変えない。カードを「折り返す横並び」にして、見た目の順番だけ order で入れ替える
     （tehai-app-responsive.css の 1050px 以下の縦並びより強い書き方）。元の .project-url（tehai-sync.css の下線の青い文字）はクラスを重ねて上書き */
#projectList .project-item { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; }
#projectList .project-item > * { flex: 1 0 100%; order: 10; min-width: 0; }
#projectList .project-item > .project-header-buttons { order: 0; }
#projectList .project-item > .project-name { order: 1; }
#projectList .project-item > .customer-name-container { order: 2; }
#projectList .project-item > .project-memo-container { order: 3; flex: 1 1 auto; }
#projectList .project-item > .project-url-container { order: 4; flex: 0 0 auto; margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 0; font-size: 12px; }
.project-item .project-url.project-url-btn,
.project-item .project-info-btn {
    display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; margin: 0; padding: 0 8px;
    border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer;
    font: inherit; font-size: 11.5px; line-height: 1.6; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.project-item .project-info-btn { color: #1e3a5f; }
.project-item .project-url.project-url-btn { color: #c46a00; flex-direction: row-reverse; }   /* 「職人手配で開く ↗」の並び */
.project-item .project-url.project-url-btn.is-other { color: #4a5a6c; }
.project-item .project-url.project-url-btn:hover { color: #a55a00; background: none; box-shadow: none; }
.project-item .project-url.project-url-btn.is-other:hover { color: #2c3e50; }
.project-item .project-url-container > * + * { border-left: 1px solid #d0d7e2; }   /* 2つのリンクの間の細い縦線 */
.project-item .project-url-container > *:last-child { padding-right: 0; }
.project-item .project-info-btn:hover .project-url-label,
.project-item .project-url.project-url-btn:hover .project-url-label { text-decoration: underline; text-underline-offset: 2px; }
.project-item .project-url-mark { display: inline-flex; align-items: center; justify-content: center; }
.project-item .project-url-ico { display: block; width: 12px; height: 12px; }

/* ── スマホの「☰」と、この案件でできることを選ぶ窓（tehai-app.js showCardMenu・2026-09-27 マサさん）──
   スマホ（660px 以下）：MAP の場所に「☰」。押すと「職人手配で開く・マップを開く・案件情報を出力」を選ぶ窓。
   MAP と時間の行のリンクの箱は隠す（DOM は残す：読み手は MAP の data-address・リンクの href を読むので、見えなくても変わらない）。
   PC・タブレットでは ☰ を出さない（今までどおり MAP と時間の行のリンク） */
.project-item .card-menu-btn { display: none; }
@media (max-width: 660px) {
    #projectList .project-item .project-header-buttons .map-button { display: none; }
    #projectList .project-item > .project-url-container { display: none; }
    /* 編集・クリア・削除もメニューへ（2026-09-28 マサさん「混同しないように 2 段に」）。DOM は残す＝メニューがこのボタンを押す */
    #projectList .project-item .project-header-buttons .edit-button,
    #projectList .project-item .project-header-buttons .clear-staff,
    #projectList .project-item .project-header-buttons .delete-project { display: none; }
    /* ☰ の下に小さく「メニュー」（2026-09-27 マサさん・案②：☰ だけだと何のボタンか伝わりにくい） */
    #projectList .project-item .project-header-buttons .card-menu-btn {
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex-shrink: 0;
        width: 40px; height: 30px; margin: 0 0 0 auto; padding: 0; box-sizing: border-box;
        border: 1px solid #cfd9e6; border-radius: 7px; background: #fff; color: #1e3a5f; cursor: pointer;
        box-shadow: 0 1px 2px rgba(30,58,95,0.08);
    }
    #projectList .project-item .project-header-buttons .card-menu-btn:active { background: #eef2f6; }
    #projectList .project-item .project-header-buttons .card-menu-btn svg { display: block; width: 14px; height: 14px; }
    #projectList .project-item .project-header-buttons .card-menu-btn__label { font-size: 8.5px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; }
}
.card-menu-overlay {
    z-index: 10070; box-sizing: border-box; overflow: hidden;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.confirm-modal.card-menu {
    width: 100%; max-width: 400px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    box-sizing: border-box; border-radius: 18px; padding: 16px 14px 14px; text-align: left;
}
.card-menu .card-menu__name { margin: 0 4px 2px; font-size: 16px; font-weight: 800; line-height: 1.45; color: #1e3a5f; word-break: auto-phrase; }
.card-menu .card-menu__meta { margin: 0 4px 4px; font-size: 12px; line-height: 1.5; color: #8a94a6; }
.card-menu .card-menu__list { display: flex; flex-direction: column; gap: 6px; }
/* 2 段（2026-09-28 マサさん「区別を見易く」）：段ごとに色の下地（上＝SASHITE のロゴの「A」のティール #2a8478 を薄く・下＝職人手配のオレンジ）。見出し＝色の印＋太字＋小さな札＋注記 */
.card-menu .card-menu__group { margin: 10px 0 0; padding: 10px 9px 9px; border-radius: 14px; }
.card-menu .card-menu__group.is-inner { background: #e6f3f0; }
.card-menu .card-menu__group.is-ext { background: #fff1de; }
.card-menu .card-menu__sec { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin: 0 3px 8px; }
.card-menu .card-menu__sec-mark { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.card-menu .card-menu__sec b { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; line-height: 1.3; }
.card-menu .card-menu__sec em { font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px; margin-left: auto; white-space: nowrap; }
.card-menu .card-menu__sec small { flex: 1 0 100%; font-size: 11px; line-height: 1.5; margin-top: 1px; }
.card-menu .is-inner .card-menu__sec-mark { background: #2a8478; }
.card-menu .is-inner .card-menu__sec b { color: #1f6b61; }
.card-menu .is-inner .card-menu__sec em { background: #cfe8e3; color: #1f6b61; }
.card-menu .is-inner .card-menu__sec small { color: #4f7a72; }
.card-menu .is-inner .card-menu__item { border-color: #c9e1dc; }
.card-menu .is-ext .card-menu__sec-mark { background: #ec8500; }
.card-menu .is-ext .card-menu__sec b { color: #a85a00; }
.card-menu .is-ext .card-menu__sec em { background: #ffdcae; color: #8f4b00; }
.card-menu .is-ext .card-menu__sec small { color: #8a6a45; }
.card-menu .is-ext .card-menu__item { border-color: #f1d9b8; }
.card-menu .card-menu__item.is-edit .card-menu__ico { background: #dff0ec; color: #1f6b61; }
.card-menu .card-menu__item.is-clear .card-menu__ico { background: #fff4e5; color: #b26a00; }
.card-menu .card-menu__item.is-delete .card-menu__ico { background: #fdecec; color: #c0392b; }
.card-menu .card-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 8px 10px 8px 9px; box-sizing: border-box;
    border: 1px solid #e3e8ee; border-radius: 11px; background: #fff; color: #2c3e50; font: inherit; text-align: left; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.card-menu .card-menu__item:active { background: #f5f7fa; }
.card-menu .card-menu__item:focus-visible { outline: 2px solid #5a8fc8; outline-offset: 2px; }
.card-menu .card-menu__ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.card-menu .card-menu__ico svg { display: block; width: 16px; height: 16px; }
.card-menu .card-menu__item.is-open .card-menu__ico { background: #fff1dc; color: #d97700; }      /* 職人手配へ行くもの＝オレンジ（今までの決まり） */
.card-menu .card-menu__item.is-open.is-other .card-menu__ico { background: #eef2f6; color: #6b7a8a; }
.card-menu .card-menu__item.is-map .card-menu__ico { background: #e8f1fb; color: #2c6fad; }       /* MAP ボタンの青 */
.card-menu .card-menu__item.is-info .card-menu__ico { background: #eef2f6; color: #4a5a6c; }
.card-menu .card-menu__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.card-menu .card-menu__txt b { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #2c3e50; }
.card-menu .card-menu__txt small { font-size: 11.5px; line-height: 1.45; color: #7d8794; overflow-wrap: anywhere; }
.card-menu .card-menu__go { flex: 0 0 auto; font-size: 20px; line-height: 1; color: #b8c2cf; }
.card-menu .card-menu__item:disabled { cursor: default; background: rgba(255,255,255,0.55); border-style: dashed; }
.card-menu .card-menu__item:disabled .card-menu__ico { background: #f1f3f6; color: #b8c2cf; }
.card-menu .card-menu__item:disabled .card-menu__txt b { color: #9aa5b3; }
.card-menu .confirm-modal__btns { margin: 12px 0 0; }
.card-menu .confirm-modal__btn--no { background: #fff; color: #4a5a6c; border: 1px solid #d0d7e2; }

/* 枠の見出し「［午前］必要人数 2人」（createMemberInputs・2026-09-27 マサさん「メリハリを」「予定人数→必要人数」）
   枠名は枠の色の枠線だけの小さな札、「必要人数」は控えめ、人数だけ太く。色は枠の入れ物（data-frame）が持つ --frame-color */
.project-item h4.frame-head { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.project-item h4.frame-head .frame-tag {
    display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px;
    background: #fff; color: var(--frame-color, #6b7a8a); border: 1px solid var(--frame-color, #6b7a8a);
    font-size: 10.5px; font-weight: 700; line-height: 1.55; letter-spacing: .02em;
}
/* 札は枠線だけ（塗りつぶさない）。割当欄の人の札も枠の色で塗られているので、見出しまで塗ると色がダブってうるさい（2026-09-27 マサさん） */
.project-item h4.frame-head .frame-need { font-size: 11.5px; font-weight: 500; color: #6b7a8a; }
.project-item h4.frame-head .frame-need b { margin: 0 2px; font-size: 13px; font-weight: 800; color: #1e3a5f; }
@media (max-width: 660px) {
    .project-item h4.frame-head .frame-tag { font-size: 11px; }
    .project-item h4.frame-head .frame-need { font-size: 12px; }
    .project-item h4.frame-head .frame-need b { font-size: 14px; }
}

/* ── 案件カードの中の間（2026-09-27 マサさん「情報ごとの上下のすき間がなくて窮屈」）──
   上から：ボタンの列 → 案件名 → 顧客名 → 時間（PC は右端にリンク・スマホはリンクなし＝☰ の窓）→ 細い線 → 枠ごと（見出し＋割当欄）
   情報のまとまりの中は詰め気味、まとまりの間はひと呼吸。案件の情報と配置の間には細い線で区切りを入れる */
#projectList .project-item { padding: 12px 14px; }
#projectList .project-item > .project-header-buttons { margin: 0 0 8px; }
#projectList .project-item > .project-name { margin: 0 0 6px; line-height: 1.35; }
#projectList .project-item > .customer-name-container { margin: 0 0 2px; }
#projectList .project-item > .project-memo-container { margin: 0; }
/* 枠の入れ物：最初の1つの上に細い線（DOM ではリンクの箱のすぐ後ろ＝最初の枠）。枠と枠の間もひと呼吸。人数0の枠（中身が空）は間を取らない */
#projectList .project-item > .project-url-container + [data-frame] { margin-top: 9px; padding-top: 9px; border-top: 1px solid #eef1f5; }
#projectList .project-item > [data-frame]:not(:empty) ~ [data-frame]:not(:empty) { margin-top: 8px; }
#projectList .project-item h4.frame-head { margin: 0 0 5px; }
@media (max-width: 1050px) {
    /* 上のボタンの列（▲▼・編集・クリア・削除・MAP／スマホは ☰）：狭いカードでも折れずに1行に（2026-09-27 マサさん）
       もとは文字12px（スマホ）＋ボタンの間が gap と margin-left の二重で、スマホ（390px 前後）やタブレット（661〜800px 前後）では
       入りきらずにボタンが縮められ、「クリ／ア」「削／除」と2行に折れて2行目が切れていた。
       文字は11px・ボタンの幅は文字に合わせる・間は gap 3px だけ・▲▼は22px。ボタンの中の文字は折らない。
       それでも入らない幅では、文字が切れる代わりに右端のもの（MAP・状態の札／☰）が次の行の右端へ回る。
       1051px 以上（PC）は今までどおり */
    #projectList .project-item > .project-header-buttons { flex-wrap: wrap; gap: 3px; row-gap: 4px; }
    #projectList .project-item .project-header-buttons button { margin-left: 0; }
    #projectList .project-item .project-header-buttons .move-down { margin-left: 2px; }
    #projectList .project-item .project-header-buttons > * { flex-shrink: 0; }
    #projectList .project-item .project-header-buttons .move-up,
    #projectList .project-item .project-header-buttons .move-down { width: 22px; }
    #projectList .project-item .project-header-buttons .edit-button,
    #projectList .project-item .project-header-buttons .clear-staff,
    #projectList .project-item .project-header-buttons .delete-project {
        width: auto; padding: 0 4px; font-size: 11px; line-height: 1; white-space: nowrap; letter-spacing: 0;
    }
    #projectList .project-item .project-header-buttons .map-button { padding: 0 5px; letter-spacing: .02em; }
    /* 状態の札＋MAP のカードで MAP だけ2行目に回ったとき、左端（▲▼の真下）に落ちないように（点検の指摘・661〜735px 前後）。
       もとは「札が右寄せ（margin-left:auto）＋札のすぐ後ろの MAP は auto を打ち消す（margin-left:0）」＝1行に並ぶ前提の決まり。
       札の箱が空いた幅を吸って中で右寄せ、MAP は auto に戻す：1行に並ぶときの見た目は今と同じ、MAP だけ折れたら2行目の右端 */
    #projectList .project-item .project-header-buttons .dock-status--pc { flex: 1 0 auto; justify-content: flex-end; margin-left: 0; margin-right: 9px; }   /* 9px＋列のすき間3px＝12px（PC と同じ札と MAP の間） */
    #projectList .project-item .project-header-buttons .dock-status--pc + .map-button { margin-left: auto; }
}
@media (max-width: 660px) {
    #projectList .project-item { padding: 12px; }
    #projectList .project-item > .project-name { margin-bottom: 5px; }
    #projectList .project-item > .project-url-container + [data-frame] { margin-top: 8px; padding-top: 8px; }
    /* スマホの上のボタン列（2026-09-27 マサさん「詰めたら指で押しづらい。☰ で空いた分できる限り広げて」）
       高さ30px・文字12px。編集・削除・クリアは残りの幅を分け合って広がる（393px で 編集≒33・削除≒33・クリア≒46px）。
       並びは ▲▼ 編集 削除 クリア ☰：☰ の隣が削除だと誤って押しそうなので、クリアと削除の左右を入れ替え（マサさん）。
       見た目だけ order で入れ替える（DOM と PC の並びは今までどおり 編集 クリア 削除） */
    #projectList .project-item .project-header-buttons .move-up,
    #projectList .project-item .project-header-buttons .move-down { width: 36px; height: 30px; font-size: 12px; }   /* 2026-10-02：26 → 36px（マサさん「もう少し横幅を」。編集・クリア・削除がメニューへ入って空いたぶん） */
    #projectList .project-item .project-header-buttons .edit-button,
    #projectList .project-item .project-header-buttons .clear-staff,
    #projectList .project-item .project-header-buttons .delete-project { flex: 1 0 auto; height: 30px; padding: 0 3px; font-size: 12px; border-radius: 7px; }
    #projectList .project-item .project-header-buttons > .move-button-group { order: 0; }
    #projectList .project-item .project-header-buttons > .edit-button { order: 1; }
    #projectList .project-item .project-header-buttons > .delete-project { order: 2; }
    #projectList .project-item .project-header-buttons > .clear-staff { order: 3; }
    #projectList .project-item .project-header-buttons > .dock-status { order: 4; }
    #projectList .project-item .project-header-buttons > .card-menu-btn,
    #projectList .project-item .project-header-buttons > .map-button { order: 5; }
    /* 状態の札は、メニューのすぐ左（2026-10-02 マサさん：PC の「MAP のすぐ左」と同じ並び）。
       札の箱が空いた幅を吸って中で右寄せ＝メニューの margin-left:auto と取り合わない（札の無いカードは、メニューが今までどおり右端）。
       9px＋列のすき間 3px＝12px（PC の札と MAP の間と同じ） */
    #projectList .project-item .project-header-buttons > .dock-status--pc { flex: 1 0 auto; justify-content: flex-end; align-items: center; margin: 0 9px 0 0; }
    #projectList .project-item h4.frame-head { margin: 0 0 6px; }
}
@media (max-width: 380px) {
    /* 幅の狭いスマホ（iPhone SE・mini＝375px、Android の 360px）は、もうひと詰め（高さ30pxはそのまま） */
    #projectList .project-item .project-header-buttons .move-up,
    #projectList .project-item .project-header-buttons .move-down { width: 30px; }   /* 2026-10-02：24 → 30px。360px の画面で、状態の札（未受注・未確）との間が 8px 残る幅 */
    #projectList .project-item .project-header-buttons .edit-button,
    #projectList .project-item .project-header-buttons .clear-staff,
    #projectList .project-item .project-header-buttons .delete-project { padding: 0 2px; font-size: 11px; }
    #projectList .project-item .project-header-buttons .card-menu-btn { width: 38px; }
}
/* 職人手配の案件をはじめて開くときの案内（showShokuninTabHint）。窓の決まり（余白・88%・角丸18px・真ん中）にそろえる。
   上に職人手配オンラインのロゴ、説明は2行（×・閉じるは使えない／タブを閉じて戻る）、「職人手配で開く」はオレンジ */
.url-open-overlay {
    z-index: 10070; box-sizing: border-box; overflow: hidden;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.url-open {
    width: 100%; max-width: 400px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    box-sizing: border-box; border-radius: 18px; padding: 0 0 18px; text-align: left;
}
.url-open__brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 14px; border-bottom: 1px solid #f6e3c6; background: #fffaf2; border-radius: 18px 18px 0 0; }
.url-open__logo { display: block; height: 18px; width: auto; max-width: 70%; }
.url-open__logo-text { font-size: 15px; font-weight: 800; color: #2c2c2c; }
.url-open__chip { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(240,140,0,0.45); font-size: 11px; font-weight: 700; color: #c46a00; white-space: nowrap; }
.url-open__title { margin: 16px 20px 10px; font-size: 16px; font-weight: 700; line-height: 1.5; color: #2c3e50; }
.url-open__points { list-style: none; margin: 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.url-open__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.65; color: #3a4a5c; }
.url-open__points small { display: block; font-size: 11.5px; color: #8a94a6; }
.url-open__points b { color: #2c3e50; }
.url-open__pt { flex: 0 0 26px; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.url-open__pt--no { background: #f1f3f6; color: #8a94a6; }
.url-open__pt--tab { background: #fff1dc; color: #d97700; }
.url-open__never { display: flex; align-items: center; gap: 6px; margin: 16px 20px 12px; font-size: 12.5px; color: #6b7a8a; cursor: pointer; }
/* ログインの画面が出たときの案内（2026-09-27 マサさん「説明的になるけど大事」）。控えめなグレーの箱 */
/* ログインの画面が出たら（2026-09-28 マサさん「すっと入ってくる書き方に」）：事業者＝オレンジ／スタッフ＝青の箱に、番号つきの手順 */
.url-open__help { margin: 14px 20px 0; padding: 12px 12px 10px; border-radius: 12px; background: #f5f7fa; border: 1px solid #e6eaf0; }
.url-open__help-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #2c3e50; }
.url-open__help b { color: #2c3e50; }
.url-open__case { border-radius: 10px; padding: 9px 10px 9px; }
.url-open__case + .url-open__case { margin-top: 8px; }
.url-open__case--company { background: #fff3e2; }
.url-open__case--staff { background: #eaf2fb; }
.url-open__case-head { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #3a4a5c; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.url-open__case-tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; line-height: 1.2; }
.url-open__case--company .url-open__case-tag { background: #e07800; }
.url-open__case--staff .url-open__case-tag { background: #2c6fad; }
.url-open__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 4px; }
.url-open__steps li { counter-increment: step; display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.6; color: #3a4a5c; }
.url-open__steps li > span { flex: 1 1 auto; min-width: 0; }   /* 文は <span> ひとつ＝強調の部分ごと自然に折り返す */
.url-open__steps li::before { content: counter(step); flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; line-height: 1; transform: translateY(2px); }
.url-open__case--company .url-open__steps li::before { background: #e07800; }
.url-open__case--staff .url-open__steps li::before { background: #2c6fad; }
.url-open__help-why { margin: 9px 2px 0; font-size: 11.5px; line-height: 1.6; color: #6b7a8a; }
.url-open .confirm-modal__btns { margin: 18px 20px 0; }
.url-open .confirm-modal__btn { padding: 12px 6px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.url-open .confirm-modal__btn--yes { flex: 1.6; background: #e07800; color: #fff; }
.url-open .confirm-modal__btn--yes:hover { background: #c96b00; }
.url-open .confirm-modal__btn--no { background: #fff; color: #4a5a6c; border: 1px solid #d0d7e2; }
.url-open .confirm-modal__btn--no:hover { background: #f3f5f8; }
.url-open__go { display: inline-flex; }
.url-open__go .project-url-ico { width: 14px; height: 14px; }

/* 「案件情報」の窓：検討した内容の窓（.out-window）と同じ。読み込み中・取れなかったときの一言だけ足す */
.caseinfo-note { margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: #6b7a8a; }
.caseinfo-note.is-loading { color: #8a94a6; }
.caseinfo-note.is-warn { color: #9a5b00; }
/* つないでいない会員への一言（2026-09-28）：文字だけ＋押せる一行（entry-hint と同じ調子） */
.caseinfo-note.is-info { color: #7a6a52; }
.caseinfo-note .caseinfo-note-go { appearance: none; -webkit-appearance: none; display: inline; width: auto; min-width: 0; height: auto; border: 0; border-radius: 0; margin: 0 0 0 6px; padding: 0; background: none; box-shadow: none; font: inherit; font-size: 12px; font-weight: 700; color: #a86500; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.caseinfo-note .caseinfo-note-go:hover { color: #7f4c00; text-decoration-style: solid; background: none; box-shadow: none; }

/* ── 手入力の人へのさりげないヒント（2026-09-28）。まだつないでいない会員（お試し）にだけ出す。帯や箱にせず文字だけ。押すと連携の案内 ── */
.entry-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.6; text-align: left; color: #7a6a52; }
.entry-hint .entry-hint-btn { appearance: none; -webkit-appearance: none; display: inline; width: auto; min-width: 0; height: auto; border: 0; border-radius: 0; margin: 0; padding: 0; background: none; box-shadow: none; font: inherit; font-size: 12px; font-weight: 600; color: #a86500; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; text-align: left; white-space: normal; line-height: 1.6; }
.entry-hint .entry-hint-btn:hover { color: #7f4c00; text-decoration-style: solid; background: none; box-shadow: none; }
.master-form .entry-hint { margin: 0 0 12px; }

/* ── 長押し／右クリックの「重複して入れる」（2026-09-29） ── */
.tapmove-menu-btn--dup small { display: block; font-size: 10.5px; font-weight: 500; opacity: .75; line-height: 1.3; }
.tapmove-dup-dst { outline: 3px dashed #5b7fa6 !important; outline-offset: 0; }
.tapmove-dupnote { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 10065; display: flex; align-items: center; gap: 10px;
    max-width: calc(100vw - 24px); padding: 9px 12px 9px 14px; border-radius: 12px; background: #1e3a5f; color: #fff; font-size: 13px; line-height: 1.5; box-shadow: 0 8px 24px rgba(30,58,95,.3); }
.tapmove-dupnote b { color: #ffd23f; }
.tapmove-dupnote .tapmove-dupnote-cancel { flex: 0 0 auto; appearance: none; -webkit-appearance: none; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.1); color: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; }
body.tapmove-dup-picking .staffList li.staff-item { cursor: pointer; }