@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=Noto+Sans+JP:wght@400;500;600;700&display=swap";:root{color:#19314a;background:#f7fafc;font-family:Noto Sans JP,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}.app{min-height:100vh;display:flex}aside{color:#c5d3df;background:#142b44;flex-direction:column;width:230px;padding:28px 16px;display:flex;position:fixed;inset:0 auto 0 0}.brand{color:#fff;align-items:center;gap:10px;margin:0 10px 33px;font-size:19px;font-weight:700;display:flex}.mode{background:#0e2035;border-radius:8px;margin-bottom:25px;padding:4px;display:flex}.mode button{color:#9eb0c0;background:0 0;border:0;border-radius:6px;flex:1;padding:8px;font-size:12px}.mode .on{color:#fff;background:#2b4964}nav{gap:5px;display:grid}nav button{color:#bdcad5;text-align:left;background:0 0;border:0;border-radius:7px;gap:12px;padding:11px;display:flex}.active{color:#fff;background:#294762}.cut{border-top:1px solid #3a5570;margin-top:auto;padding:18px 9px;font-size:11px}.cut b{color:#fff;font-size:15px}main{width:calc(100% - 230px);max-width:1600px;margin-left:230px;padding:38px 52px}h1,h2,p{margin:0}h1{letter-spacing:-.04em;font-size:29px}.over{color:#129286;margin-bottom:6px;font-size:12px;font-weight:700}header{margin-bottom:29px}header p:last-child{color:#7c8fa0;margin-top:6px;font-size:13px}.punch{text-align:center;background:#fff;border:1px solid #e3ebf1;border-radius:14px;max-width:720px;padding:34px}.punch label{color:#607589;font-size:13px}.punch select,.setup select{background:#fff;border:1px solid #d6e1e9;border-radius:7px;padding:8px}.time{letter-spacing:-.09em;margin:38px 0 8px;font-family:DM Mono;font-size:78px;line-height:1}.punch p{color:#74879a;font-size:13px}.punchbtn,.primary{color:#fff;background:#149d91;border:0;border-radius:7px;align-items:center;gap:9px;margin:27px 0 15px;padding:14px 27px;font-weight:700;display:inline-flex}.navy{background:#1b4f72}.working{color:#127b73;background:#eaf8f6;border-radius:7px;margin:25px auto 0;padding:10px;font-size:13px}.punch>small{color:#8798a7;border-top:1px solid #ebf0f3;padding-top:17px;font-size:11px;display:block}.modal{background:#10294380;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal>div{background:#fff;border-radius:14px;width:min(460px,100%);padding:28px;position:relative}.close{color:#687b8d;background:0 0;border:0;font-size:25px;position:absolute;top:9px;right:14px}.modal h2{margin-bottom:18px}.modal dl{border-top:1px solid #e5ebef;grid-template-columns:130px 1fr;margin:0;display:grid}.modal dt,.modal dd{border-bottom:1px solid #e5ebef;margin:0;padding:11px 0;font-size:13px}.modal dt{color:#788a9b}.modal small{color:#8798a7;font-weight:400;display:block}.modal .primary{float:right;margin-bottom:0}.panel{background:#fff;border:1px solid #e1e9ef;border-radius:12px;overflow:auto}.phead{justify-content:space-between;padding:21px 24px;display:flex}.phead h2,.form h2,.setup h2{font-size:17px}.phead span{color:#8293a2;font-size:11px}table{border-collapse:collapse;width:100%;font-size:13px}th,td{white-space:nowrap;text-align:left;border-top:1px solid #e8eef2;padding:14px 18px}th{color:#8091a0;background:#f9fbfc;font-weight:500}.ok,.warn{border-radius:11px;padding:4px 8px;font-size:11px}.ok{color:#08776d;background:#e6f6f2}.warn{color:#c75f3d;background:#fff1e9}.two{grid-template-columns:1.4fr .8fr;gap:22px;display:grid}.row{border-top:1px solid #e8eef2;justify-content:space-between;align-items:center;padding:13px 20px;display:flex}.row b,.row small{display:block}.row small{color:#7d8e9e;margin-top:4px;font-size:11px}.row button{color:#627588;background:#fff;border:1px solid #dbe4ea;border-radius:6px;padding:6px 9px;font-size:12px}.form,.setup{padding:25px}.form label,.setup label{color:#52677b;gap:7px;margin-top:16px;font-size:13px;font-weight:600;display:grid}.form input{border:1px solid #d6e1e9;border-radius:7px;padding:10px}.form .primary{margin-bottom:0}.setup{max-width:760px}.setup hr{border:0;border-top:1px solid #e8eef1;margin:27px 0}.grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.call{color:#42687a;background:#edf8f7;border-left:3px solid #159d91;margin-top:24px;padding:13px;font-size:13px}.total{color:#fff;background:#173a59;border-radius:12px;gap:7px;max-width:650px;margin-bottom:20px;padding:26px;font-size:12px;display:grid}.total strong{letter-spacing:-.05em;font-family:DM Mono;font-size:34px}.total small{color:#c0d2df}@media (width<=800px){aside{width:64px;padding:24px 8px}.brand{margin:0 11px 30px;font-size:0}.mode,.cut{display:none}nav button{justify-content:center;padding:12px;font-size:0}main{width:calc(100% - 64px);margin-left:64px;padding:25px 16px}.two,.grid{grid-template-columns:1fr}.time{font-size:56px}.punch{padding:25px 15px}}