:root{
  --navy:#17345b;--navy2:#224b7a;--orange:#e56f2f;--orange2:#fff1e7;
  --bg:#f4f6f8;--card:#fff;--line:#dce2e8;--text:#263442;--muted:#697887;
  --green:#26845b;--green-bg:#e8f5ee;--red:#c64b45;--red-bg:#fff0ef;
  --yellow:#a66a00;--yellow-bg:#fff6db;--shadow:0 7px 24px rgba(24,48,77,.075);
}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:linear-gradient(180deg,#f7f9fb 0,#f3f5f7 260px);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.6}
button,input,select{font:inherit}.app{min-height:100vh}.topbar{height:66px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:11px;color:var(--navy);font-weight:900;letter-spacing:.02em}.product-logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,var(--navy),#2e5e90);position:relative;box-shadow:0 4px 10px rgba(23,52,91,.2);overflow:hidden}.product-logo:before,.product-logo:after{content:"";position:absolute;background:#fff;border-radius:5px}.product-logo.hr:before{width:7px;height:7px;left:9px;top:9px;box-shadow:13px 0 #f39a62,0 13px #fff,13px 13px #fff}.product-logo.bill:before{width:18px;height:3px;left:10px;top:11px;box-shadow:0 7px #fff,0 14px #f39a62}.product-logo.learn:before{width:11px;height:19px;left:7px;top:9px;border-radius:2px 7px 7px 2px;transform:skewY(7deg)}.product-logo.learn:after{width:11px;height:19px;right:7px;top:9px;border-radius:7px 2px 2px 7px;transform:skewY(-7deg);background:#f39a62}.brand small{display:block;color:var(--muted);font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.03em}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.help{color:var(--navy);text-decoration:none;font-size:13px;font-weight:700}.top-icon{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--navy);background:#fff;cursor:pointer}.avatar{width:36px;height:36px;border-radius:50%;background:#e8eef5;color:var(--navy);display:grid;place-items:center;font-weight:800;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.sidebar{position:fixed;left:0;top:66px;bottom:0;width:232px;background:var(--navy);padding:20px 14px;color:#fff}.company{padding:10px 12px 19px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:14px}.company b{font-size:14px}.company small{display:block;color:#cbd6e3;font-size:12px}
.nav-item{display:flex;gap:12px;align-items:center;padding:11px 13px;margin:4px 0;border-radius:7px;color:#d8e2ee;text-decoration:none;font-size:14px;font-weight:700;cursor:pointer}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.13);color:#fff}.nav-icon{width:21px;height:21px;display:grid;place-items:center}
.ico{display:inline-block;width:19px;height:19px;position:relative;color:currentColor;flex:none}.ico:before,.ico:after{content:"";position:absolute;box-sizing:border-box}
.ico-dashboard:before{width:6px;height:6px;left:1px;top:1px;border:1.7px solid currentColor;border-radius:2px;box-shadow:10px 0 0 -1.7px transparent,10px 0 0 0 currentColor,0 10px 0 -1.7px transparent,0 10px 0 0 currentColor,10px 10px 0 -1.7px transparent,10px 10px 0 0 currentColor}
.ico-users:before{width:7px;height:7px;border:1.7px solid currentColor;border-radius:50%;left:6px;top:1px}.ico-users:after{width:15px;height:8px;border:1.7px solid currentColor;border-bottom:0;border-radius:10px 10px 0 0;left:2px;bottom:1px}
.ico-calendar:before{inset:3px 1px 1px;border:1.7px solid currentColor;border-radius:3px;background:linear-gradient(currentColor,currentColor) 0 4px/100% 1.5px no-repeat}.ico-calendar:after{width:9px;height:4px;left:5px;top:1px;border-left:1.7px solid currentColor;border-right:1.7px solid currentColor}
.ico-leave:before{width:15px;height:8px;left:2px;top:3px;border:1.7px solid currentColor;border-bottom:0;border-radius:12px 12px 0 0;transform:rotate(-2deg)}.ico-leave:after{width:8px;height:10px;left:9px;top:9px;border-left:1.7px solid currentColor;border-bottom:1.7px solid currentColor;border-radius:0 0 0 7px}
.ico-chat:before{inset:2px 1px 4px;border:1.7px solid currentColor;border-radius:5px}.ico-chat:after{width:6px;height:6px;left:4px;bottom:1px;border-left:1.7px solid currentColor;transform:skew(-30deg)}
.ico-settings:before{width:15px;height:15px;left:2px;top:2px;border:2px dotted currentColor;border-radius:50%}.ico-settings:after{width:6px;height:6px;left:6.5px;top:6.5px;border:1.7px solid currentColor;border-radius:50%}
.ico-document:before{inset:1px 3px;border:1.7px solid currentColor;border-radius:2px;background:linear-gradient(currentColor,currentColor) 4px 5px/7px 1.4px no-repeat,linear-gradient(currentColor,currentColor) 4px 9px/7px 1.4px no-repeat,linear-gradient(currentColor,currentColor) 4px 13px/5px 1.4px no-repeat}.ico-invoice:before{inset:1px 3px;border:1.7px solid currentColor;border-radius:2px}.ico-invoice:after{content:"¥";font-size:11px;font-weight:900;left:6px;top:1px}.ico-payment:before{inset:3px 1px;border:1.7px solid currentColor;border-radius:3px;background:linear-gradient(currentColor,currentColor) 0 4px/100% 2px no-repeat}.ico-payment:after{width:6px;height:1.7px;background:currentColor;left:4px;bottom:5px}.ico-clients:before{width:6px;height:6px;border:1.7px solid currentColor;border-radius:50%;left:2px;top:3px;box-shadow:9px 0 0 -1.7px transparent,9px 0 0 0 currentColor}.ico-clients:after{width:18px;height:7px;left:0;bottom:2px;border:1.7px solid currentColor;border-bottom:0;border-radius:10px 10px 0 0}
.ico-book:before{width:8px;height:15px;left:1px;top:2px;border:1.7px solid currentColor;border-radius:2px 5px 5px 2px}.ico-book:after{width:8px;height:15px;right:1px;top:2px;border:1.7px solid currentColor;border-radius:5px 2px 2px 5px}.ico-course:before{inset:2px;border:1.7px solid currentColor;border-radius:50%}.ico-course:after{left:8px;top:6px;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}.ico-progress:before{inset:2px 1px;border-left:1.7px solid currentColor;border-bottom:1.7px solid currentColor}.ico-progress:after{width:13px;height:8px;left:4px;top:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:skewY(-28deg)}.ico-quiz:before{inset:1px 3px;border:1.7px solid currentColor;border-radius:3px}.ico-quiz:after{width:8px;height:4px;left:6px;top:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.main{margin-left:232px;padding:30px 32px 60px;max-width:1500px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px}.page-head h1{font-size:25px;line-height:1.3;color:var(--navy);margin:0 0 4px;letter-spacing:.01em}.page-head p{margin:0;color:var(--muted);font-size:13px}.breadcrumb{font-size:11px;color:#82909d;margin-bottom:7px;font-weight:700;letter-spacing:.03em}
.btn{border:0;border-radius:7px;padding:10px 18px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px;justify-content:center}.btn-primary{background:var(--orange);color:#fff;box-shadow:0 3px 8px rgba(229,111,47,.23)}.btn-primary:hover{background:#d96124}.btn-secondary{background:#fff;border:1px solid var(--line);color:var(--navy)}.btn-small{padding:7px 12px;font-size:13px}.btn:focus{outline:3px solid rgba(229,111,47,.25)}
.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,1fr);margin-bottom:20px}.card{background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow)}.stat{padding:18px 20px;position:relative;overflow:hidden}.stat:after{content:"";position:absolute;right:-19px;top:-22px;width:75px;height:75px;border-radius:50%;background:rgba(23,52,91,.035)}.stat-label{font-size:12px;color:var(--muted);font-weight:800}.stat-value{font-size:27px;font-weight:900;color:var(--navy);margin-top:4px;letter-spacing:-.025em}.stat-note{font-size:11px;color:var(--muted)}.stat.warn{border-left:4px solid var(--orange)}.stat.danger{border-left:4px solid var(--red)}.stat.good{border-left:4px solid var(--green)}
.section{padding:21px 22px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}.section-head h2{margin:0;color:var(--navy);font-size:18px}.section-head a{color:var(--navy2);font-size:13px;font-weight:700;text-decoration:none}
.two-col{grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr)}.three-col{grid-template-columns:repeat(3,1fr)}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:15px;flex-wrap:wrap}.search{min-width:250px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:9px 12px}.select{background:#fff;border:1px solid var(--line);border-radius:7px;padding:9px 12px;color:var(--text)}
table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;padding:10px 12px;background:#f5f7f9;color:#5c6d7c;font-size:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap}td{padding:12px;border-bottom:1px solid #e8edf1;vertical-align:middle}tbody tr:hover{background:#fbfcfd}.name{font-weight:800;color:var(--navy)}.sub{font-size:12px;color:var(--muted)}
.badge{display:inline-block;border-radius:20px;padding:3px 9px;font-size:11px;font-weight:800;white-space:nowrap}.badge.green{background:var(--green-bg);color:var(--green)}.badge.red{background:var(--red-bg);color:var(--red)}.badge.yellow{background:var(--yellow-bg);color:var(--yellow)}.badge.blue{background:#eaf1fa;color:var(--navy2)}.badge.gray{background:#edf0f2;color:#65727d}
.notice{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid #e8edf1}.notice:last-child{border-bottom:0}.notice-icon{flex:0 0 31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--orange2);color:var(--orange);font-weight:900}.notice p{margin:0;font-size:13px}.notice time{font-size:11px;color:var(--muted)}
.progress{height:8px;background:#e8edf1;border-radius:9px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--green);border-radius:9px}.progress.orange>i{background:var(--orange)}.money{font-weight:800;font-variant-numeric:tabular-nums}.link-btn{border:0;background:none;color:var(--navy2);font-weight:800;cursor:pointer;padding:5px}
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(16,31,49,.5);z-index:50;align-items:center;justify-content:center;padding:20px}.modal-backdrop.show{display:flex}.modal{background:#fff;border-radius:12px;width:min(560px,100%);box-shadow:0 20px 60px rgba(0,0,0,.2);overflow:hidden}.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.modal-head h2{margin:0;color:var(--navy);font-size:19px}.close{border:0;background:none;font-size:24px;color:var(--muted);cursor:pointer}.modal-body{padding:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field.full{grid-column:1/-1}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:5px;color:#465767}.field input,.field select{width:100%;border:1px solid #cdd5dc;border-radius:6px;padding:10px}.modal-foot{padding:15px 22px;background:#f7f8fa;display:flex;justify-content:flex-end;gap:10px}
.toast{position:fixed;right:25px;bottom:25px;background:#203b5c;color:#fff;padding:13px 18px;border-radius:8px;box-shadow:0 8px 25px rgba(0,0,0,.2);z-index:80;transform:translateY(100px);opacity:0;transition:.25s}.toast.show{transform:none;opacity:1}.empty{padding:35px;text-align:center;color:var(--muted)}
.demo-ribbon{position:fixed;right:0;top:90px;background:#fff;color:#6b7480;border:1px solid var(--line);border-right:0;padding:6px 12px;border-radius:6px 0 0 6px;font-size:10px;font-weight:800;z-index:15;box-shadow:var(--shadow)}
.activity-strip{display:flex;align-items:center;gap:10px;background:#edf6f1;color:#27674b;border:1px solid #d3eadc;border-radius:8px;padding:9px 13px;font-size:12px;margin-bottom:18px}.activity-strip b{font-size:13px}.status-dot{width:8px;height:8px;border-radius:50%;background:#2e9c69;box-shadow:0 0 0 4px rgba(46,156,105,.12)}
.view-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}.view-tab{border:0;background:none;padding:10px 15px;color:var(--muted);font-size:13px;font-weight:800;cursor:pointer;border-bottom:3px solid transparent}.view-tab.active{color:var(--navy);border-bottom-color:var(--orange)}.record-head{display:flex;align-items:center;gap:12px}.record-icon{width:38px;height:38px;border-radius:9px;background:#eaf0f6;color:var(--navy);display:grid;place-items:center;font-weight:900}.summary-box{background:#f7f9fb;border:1px solid var(--line);border-radius:8px;padding:15px}.summary-box dt{font-size:11px;color:var(--muted);font-weight:800}.summary-box dd{margin:3px 0 0;color:var(--navy);font-weight:800}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.filter-count{margin-left:auto;color:var(--muted);font-size:12px}.table-action{border:1px solid #cfd8e1;background:#fff;border-radius:6px;color:var(--navy);font-weight:800;padding:6px 10px;cursor:pointer;font-size:12px}.table-action:hover{background:#f1f5f8}
@media(max-width:1000px){.sidebar{width:76px}.company,.nav-label{display:none}.nav-item{justify-content:center}.main{margin-left:76px}.stats{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}
@media(max-width:700px){.topbar{padding:0 14px}.brand small,.help{display:none}.sidebar{display:none}.main{margin-left:0;padding:20px 14px 85px}.page-head{align-items:flex-start;flex-direction:column}.page-head .btn{width:100%}.stats,.three-col{grid-template-columns:1fr 1fr}.section{padding:17px 14px}.table-wrap{overflow-x:auto}.toolbar .search{min-width:100%;width:100%}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.demo-ribbon{top:auto;bottom:0}.mobile-nav{display:flex!important}.top-actions{gap:8px}}
@media(max-width:450px){.stats,.three-col{grid-template-columns:1fr}.stat{padding:14px 16px}}
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);height:63px;z-index:30;justify-content:space-around}.mobile-nav a{flex:1;text-align:center;text-decoration:none;color:#647484;font-size:10px;padding:7px 2px}.mobile-nav .ico{display:block;margin:0 auto 3px}.mobile-nav a.active{color:var(--orange)}

/* 実務用ソフトを想定した、装飾を抑えた画面設計 */
body.app-hr,body.app-billing,body.app-training{background:#f1f3f5;font-family:"Yu Gothic",Meiryo,-apple-system,BlinkMacSystemFont,sans-serif}
body.app-hr .topbar,body.app-billing .topbar,body.app-training .topbar{height:58px;padding:0 22px;box-shadow:none}
body.app-hr .sidebar,body.app-billing .sidebar,body.app-training .sidebar{top:58px;width:220px;padding:12px 10px}
body.app-hr .main,body.app-billing .main,body.app-training .main{margin-left:220px;padding:24px 28px 55px}
body.app-hr .product-logo,body.app-billing .product-logo,body.app-training .product-logo{width:32px;height:32px;border-radius:3px;box-shadow:none;background:var(--navy)}
body.app-hr .brand,body.app-billing .brand,body.app-training .brand{font-size:15px;letter-spacing:0}
body.app-hr .brand small,body.app-billing .brand small,body.app-training .brand small{font-size:9px;letter-spacing:0}
body.app-hr .top-icon,body.app-billing .top-icon,body.app-training .top-icon{width:auto;height:30px;padding:0 10px;border-radius:3px;font-size:11px}
body.app-hr .avatar,body.app-billing .avatar,body.app-training .avatar{width:31px;height:31px;border-radius:3px;box-shadow:none;font-size:12px}
body.app-hr .company,body.app-billing .company,body.app-training .company{padding:8px 10px 14px;margin-bottom:8px}
body.app-hr .nav-item,body.app-billing .nav-item,body.app-training .nav-item{margin:1px 0;padding:9px 11px;border-radius:2px;font-size:13px;font-weight:600}
body.app-hr .card,body.app-billing .card,body.app-training .card{border-radius:3px;box-shadow:none}
body.app-hr .stat:after,body.app-billing .stat:after,body.app-training .stat:after{display:none}
body.app-hr .stat,body.app-billing .stat,body.app-training .stat{padding:15px 17px}
body.app-hr .stat-value,body.app-billing .stat-value,body.app-training .stat-value{font-size:24px}
body.app-hr .btn,body.app-billing .btn,body.app-training .btn{border-radius:3px;box-shadow:none;font-weight:700}
body.app-hr .search,body.app-hr .select,body.app-billing .search,body.app-billing .select,body.app-training .search,body.app-training .select{border-radius:2px}
body.app-hr .badge,body.app-billing .badge,body.app-training .badge{border-radius:2px;padding:2px 7px}
body.app-hr .activity-strip,body.app-billing .activity-strip,body.app-training .activity-strip{border-radius:2px;background:#f7f8f9;color:#506273;border-color:#d8dee4}
body.app-hr .status-dot,body.app-billing .status-dot,body.app-training .status-dot{box-shadow:none}
body.app-hr .demo-ribbon,body.app-billing .demo-ribbon,body.app-training .demo-ribbon{top:70px;border-radius:2px 0 0 2px;box-shadow:none}
body.app-hr th,body.app-billing th,body.app-training th{background:#e9edf1;color:#475665;font-weight:700}
body.app-hr td,body.app-billing td,body.app-training td{padding:10px 12px}
body.app-hr .modal,body.app-billing .modal,body.app-training .modal{border-radius:4px}

/* A社：堅実な社内基幹システム */
body.app-hr{--navy:#30465d;--navy2:#355f7f;--orange:#39749a;--orange2:#edf3f7;--bg:#eef1f4;--line:#cfd7de;--shadow:none}
body.app-hr .sidebar{background:#344b62}
body.app-hr .nav-item.active{background:#fff;color:#30465d;border-left:3px solid #39749a}
body.app-hr .stat{border-left:3px solid #8294a4}

/* B社：帳票と金額を中心にした経理ソフト */
body.app-billing{--navy:#154f75;--navy2:#155d8b;--orange:#1874a7;--orange2:#e8f3f8;--bg:#eef3f6;--line:#ccd8df;--shadow:none}
body.app-billing .topbar{background:#155477;border-color:#0f405f}
body.app-billing .brand,body.app-billing .help{color:#fff}
body.app-billing .brand small{color:#cbdde8}
body.app-billing .top-icon{color:#fff;background:#1d6389;border-color:#75a0b8}
body.app-billing .avatar{color:#154f75;background:#fff;border:0}
body.app-billing .product-logo{background:#fff}
body.app-billing .product-logo:before{background:#155477;box-shadow:0 7px #155477,0 14px #155477}
body.app-billing .sidebar{background:#fff;color:#354a59;border-right:1px solid #ccd8df}
body.app-billing .company{border-color:#d8e0e5}
body.app-billing .company small{color:#74838e}
body.app-billing .nav-item{color:#465d6c}
body.app-billing .nav-item:hover,body.app-billing .nav-item.active{color:#155477;background:#e8f1f6}
body.app-billing .stat{border-top:3px solid #6f91a6}
body.app-billing .money{font-family:Arial,sans-serif}

/* C社：現場で読みやすい教育ポータル */
body.app-training{--navy:#365b4c;--navy2:#3d6b58;--orange:#b06d2d;--orange2:#f8efe6;--bg:#f4f2ed;--line:#d7d6ce;--shadow:none;background:#f4f2ed}
body.app-training .sidebar{background:#385f50}
body.app-training .nav-item.active{background:#f2eee5;color:#315545}
body.app-training .card{border-color:#d8d5ca}
body.app-training .section-head{border-bottom:2px solid #e5e1d6;padding-bottom:10px}
body.app-training th{background:#ece9e1}
body.app-training .progress{height:10px;border-radius:1px}
body.app-training .progress>i{border-radius:0;background:#4f7d68}
body.app-training .stat{border-bottom:3px solid #789989}

@media(max-width:1000px){
  body.app-hr .sidebar,body.app-billing .sidebar,body.app-training .sidebar{width:68px}
  body.app-hr .main,body.app-billing .main,body.app-training .main{margin-left:68px}
}
@media(max-width:700px){
  body.app-hr .main,body.app-billing .main,body.app-training .main{margin-left:0;padding:18px 12px 80px}
  body.app-hr .topbar,body.app-billing .topbar,body.app-training .topbar{padding:0 12px}
  body.app-hr .brand,body.app-billing .brand,body.app-training .brand{font-size:13px}
}