:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#202b2d;background:#f4f7f7;font-size:14px;line-height:1.55;letter-spacing:0;--line:#cbd8d9;--muted:#53676b;--teal:#075e63;--danger:#96382a}
*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}button,input{font:inherit;letter-spacing:0}button{cursor:pointer;border:1px solid #8ca8aa;background:white;color:#075e63;border-radius:4px;min-height:42px;padding:8px 14px;font-weight:650}button:hover{background:#e9f3f1}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:var(--teal);color:white;border-color:var(--teal)}.primary:hover{background:#06494d}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #e98855;outline-offset:2px}h1,h2,p{margin-top:0}h1{font-size:25px;margin-bottom:6px}h2{font-size:18px}a{color:#075e63;overflow-wrap:anywhere}
.topbar{height:68px;background:#203034;color:white;display:flex;align-items:center;gap:14px;padding:0 28px}.topbar strong{font-size:17px}.topbar span{color:#b8d1d0}.topbar button{margin-left:auto;background:transparent;border-color:#789597;color:white}.topbar button:hover{background:#32484a}
main{max-width:1280px;margin:auto;padding:30px 28px 80px}.login-view{max-width:420px;margin:55px auto;background:white;border:1px solid var(--line);padding:30px}.login-view .primary{width:100%}.login-view h1{margin-bottom:25px}.form-stack{display:grid;gap:18px}label{display:grid;gap:6px;font-weight:650}input{min-height:44px;border:1px solid #9fb3b7;background:#fff;padding:8px 11px;border-radius:4px;width:100%;font-size:16px}.error{color:var(--danger);margin-top:15px}.message{padding:12px 14px;background:#e3f2f1;border-left:4px solid var(--teal);margin-bottom:22px}.message.error{background:#faece8;border-color:var(--danger);color:var(--danger)}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:26px}.page-head p{color:var(--muted);margin:0}.page-head span{color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:35px}.layout>section{min-width:0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);margin-bottom:10px}.section-head h2{margin-bottom:12px}.section-head button{margin-bottom:10px}.new-company{border-left:1px solid var(--line);padding-left:34px}.new-company h2{margin-bottom:20px}.company{border-bottom:1px solid var(--line);padding:18px 0}.company-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.company-head strong{font-size:16px}.status{font-size:12px;padding:3px 7px;border-radius:3px;background:#dcece8;color:#12575b}.status.suspended{background:#f2e8e5;color:#94432c}.status.provisioning{background:#fff0e8;color:#8b5535}.company-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);margin:8px 0}.company-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.company-actions button{min-height:38px}.company-actions .danger{color:var(--danger);border-color:#cfa69d}.empty{padding:30px 0;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:6px;max-width:min(480px,calc(100% - 24px));padding:25px;box-shadow:0 20px 55px #18393a30}dialog::backdrop{background:#102a2e80}dialog output{display:block;background:#eef4f3;padding:12px;word-break:break-all;font-family:ui-monospace,monospace}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.activity{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}.event{display:grid;grid-template-columns:155px 1fr 140px 110px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.event span{color:var(--muted)}
@media(max-width:800px){main{padding:22px 16px 64px}.layout{grid-template-columns:1fr;gap:30px}.new-company{border-left:0;border-top:1px solid var(--line);padding:26px 0 0}.topbar{padding:0 16px}.page-head{display:block}.page-head span{display:block;margin-top:10px}.event{grid-template-columns:1fr 1fr}.event span:first-child{grid-column:1/-1}}@media(max-width:390px){.topbar strong{font-size:14px}.topbar span{font-size:12px}.company-meta{display:grid;gap:2px}}

/* ===== 2026-09 デザイン刷新：運営画面は紺系の帯で社内後台と区別 ===== */
:root{--ink:#1B2130;--muted:#667085;--line:#E3E7EF;--teal:#2E5A8C;--teal-dark:#23476F;--band-a:#1F2E48;--band-b:#10151F;
  --accent:#9CC7F2;--soft:#EAF2FC;--go-soft:#E3F4EC;--danger:#B23A48;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;color:var(--ink);background:#F4F6FA}
body{background:#F4F6FA}
button{border-radius:999px;border-color:#CBD6E6;color:var(--teal);padding:8px 18px}button:hover{background:var(--soft)}
.primary{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 6px 14px -8px rgba(46,90,140,.8)}.primary:hover{background:var(--teal-dark)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #6FA6DD}
a{color:var(--teal)}
.topbar{background:linear-gradient(120deg,var(--band-a),var(--band-b));height:68px}
.topbar strong::before{content:"OP";display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;margin-right:12px;
  background:linear-gradient(135deg,var(--accent),#3F6FA0);color:var(--band-b);font-size:13px;font-weight:900;vertical-align:middle}
.topbar span{color:var(--accent)}.topbar button{border-color:#ffffff40}.topbar button:hover{background:#ffffff14}
input{border:1px solid #D3DAE6;border-radius:10px}
.login-view{border:0;border-radius:20px;box-shadow:0 20px 50px -25px rgba(16,21,31,.5)}
.message{background:var(--soft);border-left:0;border:1px solid #CFE0F4;border-radius:10px}
.layout>section,.activity{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:0 1px 2px rgba(16,21,31,.05)}
.new-company{border-left:1px solid var(--line);padding-left:22px}
.activity{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}
.section-head{border-bottom-color:var(--line)}.company,.event{border-bottom-color:#EEF1F6}
.status{border-radius:999px;padding:3px 10px;background:var(--go-soft);color:#1F6B4E;font-weight:700}
.status.suspended{background:#FBEAEC;color:var(--danger)}.status.provisioning{background:#FBF0DD;color:#A86A12}.status.warning{background:#FBF0DD;color:#A86A12}
dialog{border:0;border-radius:18px}dialog output{background:#F1F4F9;border-radius:10px}
@media(max-width:800px){.new-company{border-left:1px solid var(--line);border-top:1px solid var(--line);padding:20px 22px}}
.topbar strong{white-space:nowrap}input::placeholder{font-weight:400;color:#9AA3B5}
@media(max-width:520px){.topbar span{display:none}.topbar strong{font-size:15px}.topbar button{min-height:36px;padding:6px 14px;white-space:nowrap}}

/* ===== 第24・25項：タブ・プラン・請求・お知らせ・二段階認証 ===== */
select,textarea{font:inherit;min-height:44px;border:1px solid #D3DAE6;background:#fff;padding:8px 11px;border-radius:10px;width:100%;font-size:16px}
textarea{resize:vertical}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}.tabs button{min-height:38px}.tabs button.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:0 1px 2px rgba(16,21,31,.05);margin-bottom:22px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-items:end;margin:16px 0}.form-grid .wide{grid-column:1/-1}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #EEF1F6}.row span{color:var(--muted)}
.muted{color:var(--muted)}.overdue{color:var(--danger);font-weight:700}
.company-url{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.payment-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:4px 0;color:var(--muted)}.payment-line button{min-height:32px;padding:4px 12px}
.text-button{border:0;background:transparent;min-height:auto;padding:4px 0;text-decoration:underline;font-weight:600}
.notice-body{white-space:pre-wrap}
dialog output,#dialog-note{white-space:pre-wrap}
.event{grid-template-columns:150px 1fr 120px 90px}.event small{grid-column:1/-1;color:var(--muted);overflow-wrap:anywhere}
#mfa-secret{font-size:18px;letter-spacing:.08em}
@media(max-width:800px){.event{grid-template-columns:1fr 1fr}}
#mfa-secret-area{margin-top:18px;display:grid;gap:12px}

#code-qr svg{width:200px;height:200px;display:block;margin:12px 0}.code-url{word-break:break-all;font-size:13px}
.company-usage{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:4px 0 8px}.company-usage .usage-main{color:var(--ink,#16323a);font-weight:700}

/* Tickwork のマーク（ロゴ）。 */
.topbar .brand{display:inline-flex;align-items:center;gap:10px;color:#fff}
.topbar .brand svg{width:26px;height:26px;flex:none}
.tw-orbit{transform-box:view-box;transform-origin:512px 512px;animation:tw-orbit 2.3s both}
.tw-draw{animation:tw-draw 2.3s both}
.tw-dot{transform-box:fill-box;transform-origin:center;animation:tw-flash 2.3s both}
.tw-halo{transform-box:fill-box;transform-origin:center;opacity:0;animation:tw-halo 2.3s both}
.tw-loop{animation:tw-fade 2.3s infinite}
.tw-loop .tw-orbit,.tw-loop .tw-draw,.tw-loop .tw-dot,.tw-loop .tw-halo{animation-iteration-count:infinite}
@keyframes tw-orbit{0%{transform:rotate(46deg);animation-timing-function:cubic-bezier(.55,0,.35,1)}52%,100%{transform:rotate(360deg)}}
@keyframes tw-draw{0%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.55,0,.35,1)}52%,100%{stroke-dashoffset:0}}
@keyframes tw-flash{0%,52%{transform:scale(1)}65%{transform:scale(1.5)}78%,100%{transform:scale(1)}}
@keyframes tw-halo{0%,51.9%{opacity:0;transform:scale(1)}52%{opacity:.8;transform:scale(1);animation-timing-function:cubic-bezier(0,0,.3,1)}80%,100%{opacity:0;transform:scale(3.2)}}
@keyframes tw-fade{0%,90%{opacity:1}97%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tw-orbit,.tw-draw,.tw-dot,.tw-halo,.tw-loop{animation:none}}
.topbar strong.brand::before{content:none;display:none}

/* パスワードの表示切替 */
.pw-wrap{position:relative;display:block;width:100%}
.pw-wrap input{width:100%;padding-right:46px;box-sizing:border-box}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;min-height:0;min-width:0;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted,#6A6577);cursor:pointer;box-shadow:none}
.pw-toggle:hover{background:rgba(0,0,0,.05);color:var(--ink,#1E1B26)}
.pw-toggle:focus-visible{outline:2px solid var(--focus,#7F8899);outline-offset:1px}
.pw-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ログイン画面の見出し：マークと文字を縦中央にそろえる */
.login-head{align-items:center}
.login-head .mark{margin:0}
.login-head strong{line-height:1.2}
/* 開発・運営会社の表示（小さく控えめに） */
.vendor-footer{max-width:1280px;margin:0 auto;padding:0 28px 28px;color:var(--muted);font-size:11px;line-height:1.5;text-align:center;overflow-wrap:anywhere}
@media(max-width:800px){.vendor-footer{padding:0 16px 24px}}