/* ラクジム店舗内装。色・文字の大きさはラクジムと同じ（読みやすさ点検 2026-10-13 済みの値） */
:root{
  --navy:#00406C; --blue:#1BA3D5; --blue-d:#0B78A5; --blue-l:#E8F5FB;
  --orange:#F39700; --orange-l:#FEF3E0; --orange-t:#A65800; --on-orange:#1f2a33;
  --ink:#333B40; --sub:#5f6d7c; --line:#d8e6ee; --bg:#f7fbfd; --card:#fff;
  --ok:#1d8a4e; --ok-l:#e7f5ec; --ng:#c43d3d; --ng-l:#fdecec; --gray-l:#eef2f6;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{background:var(--bg);}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif; color:var(--ink); font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%;}
button{font:inherit; color:inherit; cursor:pointer;}
a{color:var(--blue-d);}
.hidden{display:none !important;}

/* ヘッダー */
.appbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; background:#fff; border-bottom:3px solid var(--navy); padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top));}
.brand{display:flex; align-items:baseline; gap:6px; background:none; border:none; flex:1; min-width:0; text-align:left;}
.brand .mark{font-weight:900; color:var(--navy); font-size:19px; letter-spacing:.02em; white-space:nowrap;}
.brand .sub{font-weight:800; color:var(--blue-d); font-size:13px; white-space:nowrap;}
.brand .ttl{font-weight:700; font-size:13.5px; color:var(--ink); margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.hbtn{background:var(--blue-l); border:none; border-radius:10px; padding:8px 12px; font-weight:700; color:var(--navy); font-size:14px; white-space:nowrap;}
.syncdot{width:10px; height:10px; border-radius:50%; background:#c9d3dc; flex:none;}
.syncdot.ok{background:var(--ok);} .syncdot.busy{background:var(--orange);} .syncdot.ng{background:var(--ng);}

/* タブ */
.tabs{position:sticky; top:56px; z-index:15; display:flex; gap:4px; overflow-x:auto; background:#fff; border-bottom:1px solid var(--line); padding:6px 10px; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs button{flex:none; border:none; background:none; padding:8px 12px; border-radius:999px; font-weight:700; font-size:14px; color:var(--sub); white-space:nowrap;}
.tabs button.on{background:var(--navy); color:#fff;}
.tabs button .cnt{display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:var(--orange-l); color:var(--orange-t); font-size:11.5px; line-height:18px;}
.tabs button.on .cnt{background:#fff; color:var(--navy);}

main{max-width:1100px; margin:0 auto; padding:14px 14px 120px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px;}
.card h2{font-size:16.5px; color:var(--navy); margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.card h2 .act{margin-left:auto;}
.card h3{font-size:14.5px; color:var(--navy); margin:14px 0 6px;}
.hint{font-size:12.5px; color:var(--sub); line-height:1.6;}
.muted{color:var(--sub);}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.row > *{flex:1 1 140px; min-width:0;}

/* ボタン */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:12px; padding:13px 16px; font-size:15.5px; font-weight:700; background:var(--gray-l); color:var(--navy);}
.btn.primary{background:var(--blue-d); color:#fff;}
.btn.accent{background:var(--orange); color:var(--on-orange);}
.btn.ghost{background:#fff; border:1.5px solid var(--line);}
.btn.danger{background:#fff; border:1.5px solid #f0c4c4; color:var(--ng);}
.btn.small{padding:8px 12px; font-size:13.5px; border-radius:10px;}
.btn.block{display:flex; width:100%;}
.btn:disabled{opacity:.5;}
.linkbtn{background:none; border:none; color:var(--blue-d); font-weight:700; font-size:14px; padding:6px 0; text-decoration:underline;}

/* 入力 */
label.fl{display:block; font-size:13px; font-weight:700; color:var(--navy); margin:12px 0 5px;}
label.fl .opt{font-weight:400; color:var(--sub); font-size:12px; margin-left:4px;}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:11px 12px; font-size:16px; background:#fff; color:var(--ink); appearance:none; -webkit-appearance:none; font-family:inherit;}
textarea{min-height:76px; line-height:1.6; resize:vertical;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue-d);}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6d7c' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;}
.checkline{display:flex; align-items:center; gap:10px; padding:10px 0; font-size:15px;}
.checkline input{width:22px; height:22px; flex:none; accent-color:var(--blue-d);}
.seg{display:flex; border:1.5px solid var(--line); border-radius:10px; overflow:hidden;}
.seg button{flex:1; border:none; background:#fff; padding:10px 6px; font-weight:700; font-size:14px; color:var(--sub);}
.seg button.on{background:var(--navy); color:#fff;}

/* チップ */
.chip{display:inline-flex; align-items:center; gap:3px; padding:2px 9px; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--gray-l); color:var(--sub); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;}
.chip.ok{background:var(--ok-l); color:#146a37;} .chip.warn{background:var(--orange-l); color:var(--orange-t);} .chip.ng{background:var(--ng-l); color:var(--ng);} .chip.blue{background:var(--blue-l); color:#0a6690;}
.chips{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px;}

/* 案件一覧 */
.pcard{display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px;}
.pcard .nm{font-size:17px; font-weight:800; color:var(--navy);}
.pcard .cl{font-size:13px; color:var(--sub); margin-top:2px;}
.pbar{height:8px; border-radius:4px; background:var(--gray-l); overflow:hidden; margin-top:10px;}
.pbar i{display:block; height:100%; background:var(--blue-d);}

/* 数字のタイル */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media (max-width:560px){ .kpis{grid-template-columns:repeat(2,1fr);} }
.kpi{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:left; width:100%;}
.kpi .lab{font-size:12.5px; color:var(--sub); font-weight:700;}
.kpi .val{font-size:24px; font-weight:800; color:var(--navy); line-height:1.25; margin-top:2px;}
.kpi .val small{font-size:13px; font-weight:700; margin-left:2px;}
.kpi.ng .val{color:var(--ng);} .kpi.ok .val{color:#146a37;} .kpi.warn .val{color:var(--orange-t);}
.kpi.hero{background:linear-gradient(140deg,#00406C,#0B78A5); border:none;}
.kpi.hero .lab,.kpi.hero .val{color:#fff;}

/* やること */
.todo{display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--gray-l); width:100%; background:none; border-left:none; border-right:none; border-bottom:none; text-align:left;}
.todo:first-child{border-top:none;}
.todo .ic{flex:none; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; background:var(--gray-l);}
.todo .tx{flex:1; min-width:0; font-size:14.5px;}
.todo .tx .s{font-size:12.5px; color:var(--sub);}

/* 一覧のカード */
.item{display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; position:relative;}
.item .t{font-weight:700; font-size:15px; line-height:1.5; padding-right:40px; white-space:pre-wrap; word-break:break-word;}
.item .d{font-size:13px; color:var(--sub); margin-top:3px; white-space:pre-wrap; word-break:break-word;}
.item .no{color:var(--sub); font-weight:700; margin-right:4px;}
.item .quick{position:absolute; right:10px; top:10px; width:34px; height:34px; border-radius:50%; border:2px solid var(--line); background:#fff; font-size:16px; font-weight:800; color:var(--line); display:flex; align-items:center; justify-content:center;}
.item .quick.on{border-color:var(--ok); background:var(--ok); color:#fff;}
.item.done .t{color:var(--sub); text-decoration:line-through;}
.item.over{border-left:4px solid var(--ng);}
.grp{font-size:13px; font-weight:800; color:var(--navy); margin:16px 2px 6px; display:flex; align-items:center; gap:8px;}
.grp .sum{margin-left:auto; font-weight:700; color:var(--sub);}
.filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.filters button{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:6px 12px; font-size:13.5px; font-weight:700; color:var(--sub);}
.filters button.on{background:var(--navy); border-color:var(--navy); color:#fff;}
.addbar{display:flex; gap:8px; margin:6px 0 14px; flex-wrap:wrap;}

/* 明細 */
.line .amt{position:absolute; right:14px; top:12px; font-weight:800; color:var(--navy); font-size:15px;}
.line .t{padding-right:96px;}
.totals{display:grid; grid-template-columns:auto auto; gap:4px 16px; justify-content:end; font-size:15px;}
.totals b{text-align:right;}
.totals .big{font-size:18px; color:var(--navy);}

/* 工程表 */
.gantt{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff; -webkit-overflow-scrolling:touch;}
.gantt .g{position:relative; width:max-content; min-width:100%;}
.gantt .gh, .gantt .gr{display:flex; min-height:34px; border-bottom:1px solid var(--gray-l);}
.gantt .gname{position:sticky; left:0; z-index:2; flex:none; width:140px; background:#fff; border-right:1px solid var(--line); padding:6px 8px; font-size:12.5px; line-height:1.35; font-weight:700; text-align:left; border-top:none; border-bottom:none; border-left:none;}
.gantt .gname .ph{display:block; font-size:10.5px; color:var(--sub); font-weight:700;}
.gantt .gdays{position:relative; flex:none;}
.gantt .gh .gname{background:#f3f7fa;}
.gantt .dcell{position:absolute; top:0; bottom:0; border-left:1px solid #f0f3f6; font-size:10.5px; color:var(--sub); text-align:center;}
.gantt .dcell.we{background:#fafbfc;}
.gantt .dcell.mon{border-left:1px solid #cfd9e5;}
.gantt .bar{position:absolute; top:8px; height:18px; border-radius:5px; background:#bfe3f2; overflow:hidden;}
.gantt .bar i{display:block; height:100%; background:var(--blue-d);}
.gantt .bar.over{background:#f6c9c9;} .gantt .bar.over i{background:var(--ng);}
.gantt .bar.done{background:#bfe0cb;} .gantt .bar.done i{background:var(--ok);}
.gantt .today{position:absolute; top:0; bottom:0; width:2px; background:var(--orange); z-index:1;}
.gantt .open{position:absolute; top:0; bottom:0; width:2px; background:var(--ng); z-index:1;}
.gantt .nodate{position:absolute; top:9px; font-size:11.5px; color:var(--sub);}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--sub); margin:8px 2px;}
.legend i{display:inline-block; width:14px; height:8px; border-radius:2px; margin-right:4px; vertical-align:middle;}

/* 下から出る編集画面 */
.sheet{position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;}
.sheet-bg{position:absolute; inset:0; background:rgba(0,30,50,.4);}
.sheet-body{position:relative; background:#fff; width:100%; max-width:640px; max-height:92vh; overflow-y:auto; border-radius:18px 18px 0 0; padding:18px 16px calc(20px + env(safe-area-inset-bottom));}
@media (min-width:700px){ .sheet{align-items:center;} .sheet-body{border-radius:18px;} }
.sheet-body h2{font-size:17px; color:var(--navy); margin-bottom:4px; padding-right:60px;}
.sheet-close{position:absolute; right:12px; top:12px; border:none; background:var(--gray-l); border-radius:10px; padding:8px 12px; font-weight:700; color:var(--navy);}
.sheet-foot{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap;}
.sheet-foot .btn{flex:1;}

/* 表 */
table.tb{width:100%; border-collapse:collapse; font-size:14px;}
table.tb th, table.tb td{border-bottom:1px solid var(--gray-l); padding:8px 6px; text-align:left; vertical-align:top;}
table.tb th{font-size:12.5px; color:var(--sub);}
table.tb td.r, table.tb th.r{text-align:right; white-space:nowrap;}
.neg{color:var(--ng); font-weight:700;}
.pos{color:var(--ok); font-weight:700;}
.scrollx{overflow-x:auto;}

/* A4（書類） */
.a4wrap{background:#e9eef2; border-radius:12px; padding:10px; overflow:hidden;}
.a4holder{transform-origin:top left;}
.a4{width:794px; min-height:1123px; background:#fff; padding:46px 48px 40px; color:#222; font-size:12px; line-height:1.55; font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;}
.a4 h1{text-align:center; font-size:24px; letter-spacing:.5em; margin:0 0 18px; color:#1b2733;}
.a4 .hd{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;}
.a4 .to{font-size:16px; font-weight:700; border-bottom:1.5px solid #333; padding-bottom:3px; display:inline-block; min-width:260px;}
.a4 .to2{font-size:14px; margin-top:6px;}
.a4 .meta{margin-left:auto; border-collapse:collapse; font-size:11.5px;}
.a4 .meta td{padding:2px 6px;} .a4 .meta td:first-child{color:#555;}
.a4 .iss{margin-top:8px; font-size:11.5px; line-height:1.6; text-align:left; margin-left:auto; width:fit-content;}
.a4 .iss b{font-size:13.5px;}
.a4 .subj{margin-top:14px; font-size:13px;}
.a4 .total{margin-top:10px; display:flex; align-items:baseline; gap:16px; border:2px solid #1b2733; padding:8px 14px; width:fit-content;}
.a4 .total .l{font-weight:700;} .a4 .total .v{font-size:22px; font-weight:800;} .a4 .total .x{font-size:11px; color:#444;}
.a4 table.lines{width:100%; border-collapse:collapse; margin-top:14px; font-size:11px;}
.a4 table.lines th{background:#1b2733; color:#fff; font-weight:700; padding:5px 4px; font-size:10.5px;}
.a4 table.lines td{border-bottom:1px solid #d5dbe0; padding:4px 4px; vertical-align:top;}
.a4 table.lines td.n{text-align:right; white-space:nowrap;}
.a4 table.lines td.c{text-align:center;}
.a4 table.lines tr.sec td{background:#eef2f5; font-weight:700; color:#1b2733;}
.a4 table.lines td .nt{font-size:9.5px; color:#555;}
.a4 .sums{margin-left:auto; margin-top:6px; border-collapse:collapse; font-size:12px;}
.a4 .sums td{padding:3px 10px; border-bottom:1px solid #d5dbe0;} .a4 .sums td.n{text-align:right; min-width:110px;}
.a4 .sums tr.g td{font-weight:800; font-size:13.5px; border-bottom:2px solid #1b2733;}
.a4 .inc{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; font-size:11px;}
.a4 .inc h4{font-size:11.5px; margin-bottom:3px;}
.a4 .notes{margin-top:12px; font-size:10.5px; color:#333;}
.a4 .bank{margin-top:12px; border:1px solid #bbb; padding:8px 12px; font-size:11.5px; white-space:pre-wrap;}

.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); background:#1f2a33; color:#fff; padding:11px 18px; border-radius:12px; font-size:14px; font-weight:700; opacity:0; pointer-events:none; transition:.25s; z-index:60; max-width:90vw;}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0);}
.empty{text-align:center; color:var(--sub); padding:22px 10px; font-size:14px;}
.ro-note{background:var(--blue-l); color:var(--navy); border-radius:12px; padding:10px 14px; font-size:13.5px; margin-bottom:12px;}
@media (min-width:900px){
  .cols2{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
}

/* 幅の狭いスマホで案件名を出すときは「店舗内装」を省いて、ラクジムが折れないようにする */
@media (max-width:480px){ body.inproj .brand .sub{display:none;} .brand .ttl{margin-left:2px;} }
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.item:focus-within{outline:2px solid var(--blue-d); outline-offset:1px;}

/* 工事請負契約書 */
.a4.ct{font-size:12.5px; line-height:1.75;}
.a4.ct h1{letter-spacing:.4em;}
.a4.ct .lead{margin:6px 0 14px;}
.a4 table.ctt{width:100%; border-collapse:collapse; font-size:12.5px;}
.a4 table.ctt > tbody > tr > th, .a4 table.ctt > tr > th{width:190px; text-align:left; vertical-align:top; padding:9px 8px; border:1px solid #9aa6b1; background:#f3f6f8; font-weight:700;}
.a4 table.ctt > tbody > tr > td, .a4 table.ctt > tr > td{padding:9px 10px; border:1px solid #9aa6b1; vertical-align:top;}
.a4 .ctsub{border-collapse:collapse; margin-top:6px; font-size:11.5px;}
.a4 .ctsub td{padding:2px 10px 2px 0;} .a4 .ctsub td.n{text-align:right;}
.a4.ct .big{font-size:17px;}
.a4.ct .sm{font-size:11px; color:#444;}
.a4.ct .blank{display:inline-block; min-width:300px; border-bottom:1px solid #999;}
.a4.ct .date{margin-top:18px;}
.a4.ct .sign{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:14px;}
.a4.ct .sign > div{border-top:1.5px solid #333; padding-top:6px; line-height:2;}
.a4.ct .sign .who{font-weight:800;}
.a4.ct .seal{display:inline-block; margin-left:16px; width:30px; height:30px; border:1px solid #999; border-radius:50%; text-align:center; line-height:28px; font-size:11px; color:#888;}
.a4.ct .stamp{margin-top:16px; width:90px; height:110px; border:1px dashed #999; color:#888; font-size:11px; display:flex; align-items:center; justify-content:center;}
.a4.ct .cls{font-size:11.5px; line-height:1.7;}
.a4.ct .cls p{margin-bottom:7px;}