/* 社内稟議システム Web版 */
:root{
  --line:#d7dae0; --bg:#f4f5f7; --card:#fff; --ink:#1f2328; --sub:#6b7280;
  --blue:#1d4ed8; --green:#15803d; --orange:#b45309; --red:#b91c1c;
  --shu:#c8102e;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Meiryo UI","Yu Gothic UI",Meiryo,sans-serif; font-size:14px;
  line-height:1.7;
}
a{color:var(--blue)}
header{
  background:#fff; border-bottom:1px solid var(--line); padding:10px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
header .brand{font-size:17px; font-weight:bold}
header .ver{color:var(--sub); font-size:12px}
nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
nav a{
  padding:6px 12px; border-radius:6px; text-decoration:none; color:var(--ink);
}
nav a:hover{background:#eef1f6}
nav a.on{background:var(--blue); color:#fff}
nav .who{color:var(--sub); padding:6px 4px; font-size:12px}
.badge{
  background:var(--blue); color:#fff; border-radius:10px; padding:0 7px;
  font-size:12px; margin-left:4px;
}
main{max-width:1180px; margin:0 auto; padding:20px}
h1{font-size:20px; margin:0 0 4px}
h2{font-size:16px; margin:24px 0 8px}
.sub{color:var(--sub); font-size:13px; margin:0 0 14px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:16px; margin-bottom:16px;
}
table{width:100%; border-collapse:collapse; background:#fff}
th,td{border:1px solid var(--line); padding:7px 9px; text-align:left;
      vertical-align:top}
th{background:#eef1f6; font-weight:bold; white-space:nowrap}
td.num,th.num{text-align:right}
td.mid,th.mid{text-align:center}
tr:hover td{background:#fbfcfe}
.right{text-align:right}
.muted{color:var(--sub)}
.small{font-size:12px}
label{display:block; margin:10px 0 3px; font-size:13px}
input[type=text],input[type=password],input[type=date],input[type=number],
select,textarea{
  width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:5px;
  font:inherit; background:#fff;
}
textarea{min-height:120px; resize:vertical}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row>*{flex:1; min-width:180px}
.btn{
  display:inline-block; padding:8px 16px; border:1px solid var(--line);
  border-radius:6px; background:#fff; cursor:pointer; font:inherit;
  text-decoration:none; color:var(--ink);
}
.btn:hover{background:#f0f3f8}
.btn.primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.warn{color:var(--orange)}
.btn.danger{color:var(--red)}
.btn.small{padding:4px 10px; font-size:12px}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.flash{padding:10px 14px; border-radius:6px; margin-bottom:12px;
       white-space:pre-wrap}
.flash.ok{background:#e7f6ec; border:1px solid #a9d9ba; color:var(--green)}
.flash.error{background:#fdecec; border:1px solid #f0b4b4; color:var(--red)}
.tag{padding:1px 8px; border-radius:10px; font-size:12px; white-space:nowrap}
.s下書き,.s取下げ{background:#eceef1; color:#4b5563}
.s申請中{background:#e5edff; color:var(--blue)}
.s承認済,.s承認,.s確認済{background:#e7f6ec; color:var(--green)}
.s差戻し{background:#fdf0dd; color:var(--orange)}
.s却下{background:#fdecec; color:var(--red)}
.s承認待ち{background:#e5edff; color:var(--blue)}
.s未着手{background:#f2f3f5; color:#9ca3af}
.stamp{vertical-align:middle}
.stamprow{display:flex; gap:10px; flex-wrap:wrap}
.stampcell{
  border:1px solid var(--line); border-radius:6px; padding:6px 8px;
  text-align:center; min-width:92px; background:#fff;
}
.stampcell .cap{font-size:11px; color:var(--sub)}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line);
      margin-bottom:14px; flex-wrap:wrap}
.tabs a{
  padding:8px 16px; text-decoration:none; color:var(--ink);
  border:1px solid transparent; border-bottom:none; border-radius:6px 6px 0 0;
}
.tabs a.on{background:#fff; border-color:var(--line); font-weight:bold}
/* 書類の押印 */
.doc{position:relative; display:inline-block; border:1px solid var(--line);
     background:#fff; max-width:100%}
.doc img{display:block; max-width:100%; height:auto; cursor:crosshair}
.doc .pin{position:absolute; transform:translate(-50%,-50%);
          pointer-events:none}
.doc .pin.pending{outline:2px dashed var(--blue); outline-offset:3px}
.docbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap;
        margin-bottom:8px}
.hint{color:var(--blue); font-size:13px}
.hint.done{color:var(--green)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.stampopts{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.stampopts>div{min-width:120px}
.preview{
  border:1px solid var(--line); border-radius:6px; padding:10px;
  background:#fff; display:inline-block;
}
ul.plain{list-style:none; padding:0; margin:0}
ul.plain li{padding:3px 0}

/* ---------------------------------------------- 社外の方まわり */
/* 一覧やルートの中で「この人は社外」とひと目で分かるようにする印 */
.ext{
  display:inline-block; background:#fff3e6; color:var(--orange);
  border:1px solid #f0c48a; border-radius:4px; padding:0 6px;
  font-size:11px; font-weight:bold; margin-right:4px; white-space:nowrap;
}
/* 「次に何をすればいいか」だけを大きく出す枠 */
.todo{
  background:#fffaf2; border:2px solid var(--orange); border-radius:8px;
  padding:16px; margin-bottom:16px;
}
.todo h2{margin:0 0 4px; color:var(--orange); font-size:17px}
.todo .step{
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:12px; margin-top:10px;
}
.todo .step .no{
  display:inline-block; background:var(--orange); color:#fff;
  border-radius:50%; width:22px; height:22px; text-align:center;
  line-height:22px; font-size:12px; font-weight:bold; margin-right:6px;
}
/* ログインのいらない、社外の方むけの画面 */
.guest{max-width:880px; margin:0 auto; padding:24px 20px}
.guest .head{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:18px 20px; margin-bottom:16px;
}
.guest .head h1{font-size:19px; margin:0 0 6px}
.guest .lead{font-size:15px; margin:0 0 4px}
.guest .big{
  display:block; width:100%; padding:16px; font-size:17px; font-weight:bold;
  border-radius:8px; border:1px solid transparent; cursor:pointer;
}
.guest .big.ok{background:var(--green); color:#fff}
.guest .big.no{background:#fff; color:var(--ink); border-color:var(--line)}
.guest .foot{color:var(--sub); font-size:12px; text-align:center;
             margin:24px 0 40px}
/* 手順の番号。何をどの順でやるのかを、読まなくても分かるように */
.stepno{
  display:inline-block; background:var(--blue); color:#fff; border-radius:50%;
  width:24px; height:24px; text-align:center; line-height:24px;
  font-size:13px; margin-right:8px;
}
.kindcard{display:block}
.kindcard b{margin-left:6px}
/* 選ぶだけの欄。選んだものが目で分かるように色を変える */
.routepick{display:block; border:1px solid var(--line)}
.routepick b{margin-left:6px}

/* ---------------------------------------------- 回付の順番を組む欄 */
/* 「1番目に回す」「2番目に回す」…の箱。ひとつの箱の中の人には
   同時に回る。段という言い方も、チェックボックスも出さない。 */
.rgroup{
  border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:12px 14px; margin-bottom:10px;
}
.rhead{
  display:flex; align-items:center; gap:8px;
  font-weight:bold; font-size:14px; margin-bottom:8px;
}
.rno{
  display:inline-grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:var(--blue); color:#fff;
  font-size:13px; font-weight:bold;
}
.rlabel{font-weight:normal; color:var(--sub); font-size:13px}
.rmembers{display:grid; gap:6px}
.rrow{display:flex; gap:8px; align-items:center}
.rrow select{max-width:360px; margin:0}
/* 2人目から先は、同時に回ることが目で分かるように少し下げる */
.rrow.same{padding-left:22px; position:relative}
.rrow.same::before{
  content:"同時"; position:absolute; left:0; top:50%;
  transform:translateY(-50%); font-size:11px; color:var(--sub);
}
.btn.ghost{
  background:none; border:1px dashed var(--line); color:var(--sub);
  margin-top:8px;
}
.btn.ghost:hover{border-color:var(--blue); color:var(--blue)}