* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Yu Gothic", "YuGothic", "Meiryo", sans-serif; color: #18212c; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* 端末の枠 */
.pw { flex: none; padding: 9px; }
.ph { position: relative; width: 390px; height: 844px; border-radius: 40px; overflow: hidden; box-shadow: 0 0 0 9px #20242a, 0 12px 30px rgba(0,0,0,.18); font-size: 15px; display: flex; flex-direction: column; background: #f3f6fa; font-weight: 500; }
.ph.ml { font-size: 19.5px; }
.sb { height: 34px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 26px; font-size: 13px; font-weight: 700; background: #1f5fa8; color: #fff; }

/* 上部 */
.a-top { background: #1f5fa8; color: #fff; padding: .55em 1em .8em; display: flex; align-items: center; gap: .55em; font-size: 1.15em; flex: none; }
.a-top b { flex: 1; min-width: 0; }
.a-back { font-size: 1.4em; line-height: 1; cursor: pointer; }
.a-badge { background: #ffcf4d; color: #3d2f00; font-size: .68em; font-weight: 700; padding: .2em .7em; border-radius: 999px; white-space: nowrap; }
.a-disp { display: flex; align-items: center; gap: .25em; font-size: .62em; font-weight: 700; background: rgba(255,255,255,.16); padding: .35em .6em; border-radius: .5em; cursor: pointer; white-space: nowrap; }
.a-disp svg { width: 1.25em; height: 1.25em; }

/* 本体 */
.a-body { flex: 1; padding: .8em 1em 1em; overflow: hidden; position: relative; }
.proto .a-body { overflow-y: auto; }
.a-cap { font-size: .82em; font-weight: 700; color: #5a6676; margin: .85em 0 .35em; }
.a-cap:first-child { margin-top: .1em; }
.a-head { background: #fff; border-radius: .7em; padding: .7em .9em; display: flex; flex-direction: column; gap: .15em; font-size: .92em; color: #44505e; margin-bottom: .4em; }
.a-head b { font-size: 1.15em; color: #18212c; }
.a-list { background: #fff; border-radius: .7em; overflow: hidden; }
.a-item { display: flex; align-items: center; gap: .6em; padding: .75em .9em; border-bottom: 1px solid #edf0f4; font-size: .98em; }
.a-item:last-child { border-bottom: 0; }
.a-item > b { flex: 1 1 6em; min-width: 6em; }
.a-item > b small { display: block; font-size: .78em; color: #5a6676; font-weight: 500; margin-top: .1em; }
.a-item em { color: #9aa4b1; font-style: normal; font-size: 1.2em; }
.a-item > span { flex: 0 1 auto; min-width: 0; font-size: .85em; color: #4b5562; text-align: right; }
.a-item .lnk { color: #1f5fa8; font-weight: 700; font-size: .85em; white-space: nowrap; }
[data-go], [data-act] { cursor: pointer; }
.chip { font-size: .78em !important; font-weight: 700; padding: .2em .65em; border-radius: 999px; white-space: nowrap; display: inline-block; }
.chip.todo { background: #fde3e1; color: #a52a1f !important; }
.chip.draft { background: #fff1c9; color: #7a5a00 !important; }
.chip.done { background: #dff3e7; color: #1e6b3d !important; }
.chip.away { background: #e9ecf0; color: #4b5562 !important; }
.chip.info { background: #e3edf9; color: #1f5fa8 !important; }

/* 入力 */
.ph label { display: block; font-size: .8em; font-weight: 700; color: #5a6676; margin: .75em 0 .3em; }
.ph label:first-child { margin-top: .1em; }
.a-in { background: #fff; border-radius: .5em; padding: .62em .8em; box-shadow: inset 0 0 0 1.5px #d3dae3; font-size: .95em; line-height: 1.5; min-height: 2.6em; }
.a-in.multi { min-height: 3.4em; }
.a-in.ro { background: #eef1f5; box-shadow: none; color: #44505e; }
.a-in .phd { color: #9aa4b1; }
.a-in[contenteditable="true"]:focus { outline: none; box-shadow: inset 0 0 0 2px #1f5fa8; }
.a-in.warn { box-shadow: inset 0 0 0 2px #d0392b; }
.unit { color: #5a6676; font-size: .85em; margin-left: .3em; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.seg { display: flex; flex-wrap: wrap; gap: .35em; }
.seg > span { background: #fff; box-shadow: inset 0 0 0 1.5px #c3ccd7; padding: .38em .8em; border-radius: 999px; font-size: .85em; white-space: nowrap; }
.seg > .on { background: #1f5fa8; color: #fff; box-shadow: none; }
.seg > .on.ng { background: #c0392b; }
.seg > .on.gray { background: #6b7684; }
.chk { display: flex; align-items: center; gap: .6em; padding: .65em .9em; border-bottom: 1px solid #edf0f4; }
.chk:last-child { border-bottom: 0; }
.chk i { width: 1.2em; height: 1.2em; border-radius: .3em; box-shadow: inset 0 0 0 2px #9aa4b1; flex: none; }
.chk.on i { background: #1f5fa8; box-shadow: none; position: relative; }
.chk.on i::after { content: ""; position: absolute; left: .38em; top: .15em; width: .3em; height: .6em; border: solid #fff; border-width: 0 .14em .14em 0; transform: rotate(45deg); }
.chk.dis { color: #9aa4b1; }
.chk > b { flex: 1; font-weight: 600; }
.chk > span { font-size: .82em; color: #5a6676; }
.mrow { display: flex; align-items: center; gap: .5em; padding: .6em .9em; border-bottom: 1px solid #edf0f4; }
.mrow:last-child { border-bottom: 0; }
.mrow > b { width: 5.2em; flex: none; font-size: .92em; }
.mrow .seg > span { padding: .3em .6em; font-size: .78em; }
.photo { height: 7.5em; border-radius: .6em; background: repeating-linear-gradient(45deg, #dfe7f1, #dfe7f1 10px, #e9eff6 10px, #e9eff6 20px); display: flex; align-items: center; justify-content: center; color: #44505e; font-size: .85em; font-weight: 700; }
.photo.none { background: #fff; box-shadow: inset 0 0 0 2px dashed #c3ccd7; border: 2px dashed #c3ccd7; }
.mic { margin-top: .8em; font-size: .78em; color: #6b7684; background: #e9edf2; padding: .5em .7em; border-radius: .5em; }
.steps { display: flex; gap: .25em; margin-bottom: .6em; }
.steps > span { flex: 1; text-align: center; font-size: .66em; padding: .35em 0; border-radius: .3em; background: #e3e8ee; color: #5a6676; white-space: nowrap; overflow: hidden; }
.steps > .d { background: #b9d0ea; color: #1f3f66; } .steps > .c { background: #1f5fa8; color: #fff; font-weight: 700; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.pair div { background: #fff; border-radius: .5em; padding: .55em .7em; font-size: .88em; line-height: 1.5; box-shadow: inset 0 0 0 1.5px #d3dae3; }
.pair small { display: block; font-size: .78em; color: #5a6676; font-weight: 700; margin-bottom: .2em; }
.ok-line { font-size: .82em; color: #1e6b3d; font-weight: 700; margin-top: .4em; }
.mark { background: #fff1c9; border-radius: .2em; padding: 0 .15em; }

/* 帯・知らせ */
.bn { border-radius: .6em; padding: .6em .8em; margin-bottom: .6em; font-size: .88em; line-height: 1.5; border-left: .35em solid; background: #fff; }
.bn b { display: block; }
.bn.ng { border-color: #d0392b; background: #fdeceb; color: #8e2318; }
.bn.warn { border-color: #e0a100; background: #fff6dc; color: #6b4f00; }
.bn.ok { border-color: #2e9a5a; background: #e3f5ea; color: #1e5a35; }
.bn.info { border-color: #1f5fa8; background: #e8f0fa; color: #1f3f66; }
.bn .lnk { color: inherit; text-decoration: underline; font-weight: 700; }
.a-sec { background: #fff; border-radius: .7em; margin-bottom: .7em; overflow: hidden; border-left: .4em solid; }
.a-sec > p { font-weight: 700; padding: .7em .9em .2em; }
.a-sec.ng { border-color: #d0392b; } .a-sec.ng > p { color: #a52a1f; }
.a-sec.wait { border-color: #e0a100; } .a-sec.wait > p { color: #7a5a00; }
.a-sec.ok { border-color: #2e9a5a; } .a-sec.ok > p { color: #1e6b3d; }
.a-sec.info { border-color: #1f5fa8; } .a-sec.info > p { color: #1f5fa8; }
.empty { text-align: center; color: #5a6676; padding: 3.2em 1.2em; line-height: 1.7; font-size: .95em; }
.empty i { display: block; width: 3.2em; height: 3.2em; border-radius: 50%; background: #e3e8ee; margin: 0 auto .8em; }
.skel { background: #fff; border-radius: .7em; padding: .9em; margin-bottom: .6em; }
.skel i { display: block; height: .8em; border-radius: .4em; background: linear-gradient(90deg, #e6ebf1, #f2f5f9, #e6ebf1); margin: .5em 0; }
.skel i:nth-child(2) { width: 70%; } .skel i:nth-child(3) { width: 45%; }
.loadmsg { text-align: center; color: #5a6676; font-size: .88em; margin-top: 1em; }

/* 下部 */
.a-foot { padding: .7em 1em .9em; background: #fff; border-top: 1px solid #e3e8ee; display: flex; flex-direction: column; gap: .4em; flex: none; }
.a-foot .row { display: flex; gap: .6em; }
.a-btn { flex: 1; text-align: center; background: #1f5fa8; color: #fff; font-weight: 700; padding: .82em .4em; border-radius: .6em; white-space: nowrap; overflow: hidden; display: block; }
.a-btn.sub { background: #fff; color: #1f5fa8; box-shadow: inset 0 0 0 2px #1f5fa8; }
.a-btn.off { background: #c8d0da; color: #fff; cursor: default; }
.a-btn.ng { background: #c0392b; }
.a-hint { font-size: .78em; color: #5a6676; text-align: center; }
.a-hint.ng { color: #a52a1f; font-weight: 700; }
.a-tab { display: flex; background: #fff; border-top: 1px solid #e3e8ee; flex: none; }
.a-tab > span { flex: 1; text-align: center; padding: .7em 0 1em; font-size: .82em; color: #7a8594; }
.a-tab > .on { color: #1f5fa8; font-weight: 700; box-shadow: inset 0 3px 0 #1f5fa8; }

/* ログイン */
.a-row { display: flex; align-items: center; gap: .7em; background: #fff; padding: .72em .9em; border-radius: .6em; margin-bottom: .4em; }
.a-row b { flex: 1; } .a-row small { color: #5a6676; font-size: .8em; }
.a-row.sel { box-shadow: inset 0 0 0 2px #1f5fa8; background: #eef4fc; }
.a-radio { width: 1.1em; height: 1.1em; border-radius: 50%; box-shadow: inset 0 0 0 2px #9aa4b1; flex: none; }
.a-row.sel .a-radio { box-shadow: inset 0 0 0 5px #1f5fa8; }
.a-pin { display: flex; gap: .35em; justify-content: center; margin: .2em 0 .5em; }
.a-pin i { width: 2.1em; height: 2.6em; background: #fff; border-radius: .4em; box-shadow: inset 0 0 0 1.5px #b9c2cd; display: flex; align-items: center; justify-content: center; }
.a-pin i.f::after { content: ""; width: .7em; height: .7em; border-radius: 50%; background: #18212c; }
.a-pin.ng i { box-shadow: inset 0 0 0 2px #d0392b; }
.a-note { font-size: .78em; color: #5a6676; text-align: center; margin-bottom: .5em; }
.a-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.a-keys > span { background: #fff; text-align: center; padding: .62em 0; border-radius: .5em; font-size: 1.1em; font-weight: 700; user-select: none; }
.a-keys.off > span { color: #b9c2cd; }

/* 暦 */
.cal { background: #fff; border-radius: .7em; padding: .6em; }
.cal-h { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .72em; font-weight: 700; color: #5a6676; margin-bottom: .2em; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15em; }
.cal-g div { min-height: 2.6em; border-radius: .3em; padding: .15em .2em; font-size: .78em; font-weight: 700; background: #f5f7fa; overflow: hidden; }
.cal-g div small { display: block; font-size: .62em; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.cal-g .sat { background: #e3edf9; color: #1f4f8f; }
.cal-g .sun, .cal-g .hol { background: #fde3e1; color: #a52a1f; }
.cal-g .ny { background: #fde3e1; color: #a52a1f; }
.cal-g .x { background: transparent; }
.legend { display: flex; flex-wrap: wrap; gap: .3em .8em; font-size: .72em; color: #44505e; margin-top: .45em; }
.legend i { display: inline-block; width: .8em; height: .8em; border-radius: .2em; margin-right: .25em; vertical-align: -.05em; }

/* 重ねて出す画面 */
.dim { position: absolute; inset: 34px 0 0 0; background: rgba(15,25,40,.45); display: flex; flex-direction: column; justify-content: flex-end; z-index: 5; }
.sheet { background: #fff; border-radius: 1.2em 1.2em 0 0; padding: 1.1em 1.1em 1em; display: flex; flex-direction: column; gap: .55em; }
.sheet h3 { font-size: 1.08em; line-height: 1.45; }
.sheet p { font-size: .9em; line-height: 1.6; color: #333d49; }
.sheet .a-list { box-shadow: inset 0 0 0 1px #e3e8ee; }
.sheet .row { display: flex; gap: .6em; margin-top: .3em; }
.toast { position: absolute; left: 1em; right: 1em; bottom: 6.2em; background: #1e5a35; color: #fff; border-radius: .7em; padding: .75em .9em; font-size: .9em; line-height: 1.5; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 4; }
.toast span.sub { display: block; font-weight: 500; font-size: .88em; opacity: .9; }
.watermark { position: relative; background: #c0392b; color: #fff; text-align: center; font-weight: 700; font-size: .85em; padding: .2em; z-index: 3; }

.mrow.stack { flex-direction: column; align-items: stretch; gap: .35em; }
.mrow.stack > b { width: auto; font-weight: 600; }
.a-note.pad { margin-top: .5em; }
.seg.scale { flex-wrap: nowrap; gap: .2em; }
.seg.scale > span { flex: 1; text-align: center; padding: .4em 0; font-size: .8em; }
.a-in[data-unit]::after { content: attr(data-unit); color: #5a6676; font-size: .85em; }
.a-in { position: relative; }

/* 2つ並ぶボタンが入りきらないときは、2段に分ける */
.row { flex-wrap: wrap; }
.row > .a-btn { flex: 1 1 0; min-width: max-content; }

/* 意匠v1.2：押す所の大きさ（監査F22）。指で押す所は、高さ40px以上にする */
.a-back { min-width: 32px; min-height: 40px; display: inline-flex; align-items: center; padding-right: .2em; }
.a-disp { min-height: 40px; }
.lnk { display: inline-flex; align-items: center; min-height: 40px; }
.a-item .lnk { padding: 0 .3em; }
.seg > span { min-height: 40px; display: inline-flex; align-items: center; }
.seg.scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3em; }
.seg.scale > span { justify-content: center; }
.chk { min-height: 44px; }
.a-top .a-badge[data-go] { padding: .55em .8em; }
/* 知らせは上に出し、下のボタンを覆わない（監査F13） */
.toast { top: 6.4em; bottom: auto; }
/* 承認者のパソコンの幅（仕様SP153）：一覧と内容を左右に並べる */
.pcw { display: flex; width: 1180px; height: 760px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 9px #20242a, 0 12px 30px rgba(0,0,0,.18); background: #f3f6fa; }
.pcw > .ph { box-shadow: none; border-radius: 0; height: 100%; }
.pcw > .ph.pl { width: 430px; flex: none; border-right: 1px solid #c9d1db; }
.pcw > .ph.pr { flex: 1; width: auto; }
.pcw .sb { display: none; }
.pcw .dim { inset: 0; }
.pcw .ph.pr .a-body { padding: 1em 1.6em; }
.wide-ph { padding: 9px; }
.pc-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #5a6676; font-size: 1em; }

/* 意匠v1.2：戻る印は左の余白へ広げ、押す所の大きさを保ったまま見出しの幅を取る。長い状態の札は折り返す */
.a-back { margin-left: -.55em; padding-left: .3em; }
.ml .a-item > .chip { white-space: normal; border-radius: .8em; text-align: center; }

/* 意匠v1.3：選んでいる行、開いた中身、変えられない選択肢、通信がないときの知らせ */
.a-item.sel { background: #e9f1fb; box-shadow: inset .25em 0 0 #1f5fa8; }
.a-detail { padding: .5em .9em .7em 1.6em; background: #f7f9fc; border-bottom: 1px solid #edf0f4; font-size: .85em; line-height: 1.6; color: #3d4855; }
.a-detail p { margin: .15em 0; }
.seg.ro span { cursor: default; opacity: .75; }
.toast.warn { background: #8a5a00; }

/* 案Aを保ち、操作する部品と照合する記録を明確にする。 */
button.a-btn{font:inherit;line-height:1.4;cursor:pointer;text-align:center;appearance:none}
button.a-btn:disabled{cursor:default} .a-btn.sub{border:1.5px solid #1f5fa8}
.a-detail{overflow-wrap:anywhere;padding:.8em;background:white;border-left:3px solid #1f5fa8}
.record{padding:.65em 0;border-bottom:1px solid #ccd5df}.record p{margin:.3em 0}
.record small{display:block;color:#425169} [role=button]:focus-visible,[role=checkbox]:focus-visible,button:focus-visible,[contenteditable]:focus-visible{outline:3px solid #a85f00;outline-offset:2px}
.sheet{max-height:85%;overflow-y:auto}.sheet .row{flex-wrap:wrap}.v14-select{font:inherit;padding:.7em;width:100%;border:1px solid #8998ab;border-radius:6px;background:#fff}.datepick{margin:.3em 0}.a-back{min-width:24px}

/* 第4段階：管理の画面 */
.a-gap{margin:.6em 0}.a-pad{padding:.7em .9em;line-height:1.7}.a-big{font-size:1.9em;font-weight:700;letter-spacing:.12em;text-align:center;margin:.4em 0}
.a-body > .row{display:flex;gap:.5em;margin:.4em 0}.a-body > .row .a-btn{flex:1}