:root{
  --sumi:#0E1620;--sumi2:#16212E;--ai:#1B3A5C;--ai2:#27507A;--washi:#F4EFE5;--washi2:#EAE3D5;--kinu:#FFFFFF;
  --ake:#A4342C;--kin:#C0A15A;--ink:#22201C;--nezumi:#7A7267;--line:#E0D8C8;--midori:#2F6B52;--ki:#B7791F;
  --sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ctl:42px;  /* 入力欄とボタンの高さ */
  --r:14px;--sh:0 1px 2px rgba(20,16,10,.06),0 8px 24px rgba(20,16,10,.06);
}

/* ── 製品の既定の色（モックのプラットフォーム画面に合わせた寒色）
      会社ごとに「見た目」を club にすると、日本クラブの金・和紙色になる ── */
body.theme-product{
  --sumi:#14181D;--sumi2:#1F2630;--ai:#23456B;--ai2:#2E5888;
  --washi:#F4F6F8;--washi2:#F0F2F5;--kinu:#FFFFFF;
  --ake:#A5432B;--kin:#9FB2C8;--ink:#14181D;--nezumi:#5C6773;--line:#DEE3E9;
  --midori:#1F6B3E;--ki:#7A5A12;
  --serif:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  --sh:0 1px 2px rgba(16,24,32,.05),0 8px 24px rgba(16,24,32,.06);
}
body.theme-product h1,body.theme-product h2,body.theme-product h3{letter-spacing:0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--washi);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
a{color:var(--ai);text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:.01em;margin:0}
h1{font-size:22px}h2{font-size:18px}h3{font-size:16px}
p{margin:0 0 8px}
.muted{color:var(--nezumi);font-size:13px}
.mono{font-family:var(--mono)}
.wrap{max-width:720px;margin:0 auto;padding:16px}
.wide{max-width:1180px}

/* header */
.top{background:var(--sumi);color:var(--washi);padding:0;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(14,22,32,.25)}
.top .in{max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px}
.top .brand{display:flex;align-items:center;gap:10px}
.top .brand b{font-family:var(--serif);font-size:17px;letter-spacing:.04em}
.top .brand small{color:var(--kin);font-size:10px;letter-spacing:.18em;text-transform:uppercase;display:block;line-height:1}
.top .who{font-size:12px;color:#c8c2b6}
.top a{color:var(--washi)}
.wide .top .in{max-width:1180px}

/* cards */
.card{background:var(--kinu);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh);margin:0 0 14px}
.card.tight{padding:12px 14px}
.card h2{margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card h2 a{font-family:var(--sans);font-size:13px;font-weight:500}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.list{list-style:none;margin:0;padding:0}
.list li{padding:10px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0;padding-top:0}
.list li:last-child{padding-bottom:0}
.item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.item .t{font-weight:700}
.item .s{color:var(--nezumi);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:var(--washi);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat b{font-size:24px;font-family:var(--serif);display:block;line-height:1.2}
.stat span{font-size:12px;color:var(--nezumi)}
.stat b small{font-size:13px;font-family:var(--sans);font-weight:400;color:var(--nezumi);margin-left:3px}

/* badges */
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--nezumi);background:var(--washi);white-space:nowrap}
.badge.ok{background:#e6f1eb;color:var(--midori);border-color:#c9e0d3}
.badge.warn{background:#fbf0d9;color:var(--ki);border-color:#f0dcae}
.badge.bad{background:#f7e3e1;color:var(--ake);border-color:#ecc7c3}
.badge.ai{background:#e5ecf4;color:var(--ai);border-color:#c9d6e6}
.badge.kin{background:#f6efdd;color:#8a6d2b;border-color:#e5d4a6}

/* buttons/forms */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ai);background:var(--ai);color:#fff;
  padding:10px 16px;min-height:var(--ctl);border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.2;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.gh{background:transparent;color:var(--ai)}
.btn.ake{background:var(--ake);border-color:var(--ake)}
.btn.gh.ake{background:transparent;color:var(--ake)}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:10px}
.btn.block{width:100%}
.btn[disabled]{background:#e9edf2;border-color:#dfe4ea;color:#6f7882;cursor:not-allowed;opacity:1}
.btn.gh[disabled]{background:transparent;color:#8b95a0;border-color:#dfe4ea}
label{display:block;font-size:13px;color:var(--nezumi);margin:10px 0 4px}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:not([type=checkbox]):not([type=radio]),select{min-height:var(--ctl)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;flex:none;margin:0;padding:0;accent-color:var(--ai);cursor:pointer}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ai2);outline-offset:0;border-color:var(--ai2)}
textarea{min-height:80px;resize:vertical}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chk{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.5}
.chk input{margin-top:3px}
/* 入力欄やボタンと同じ行に並ぶチェックは、縮んで折り返さない・同じ高さで上下中央にそろえる */
.bar .chk,.btnrow .chk,.formrow .chk,.inline > .chk,td > .chk{flex:0 0 auto;max-width:100%;align-items:center;min-height:var(--ctl)}
.bar .chk{white-space:nowrap}
.bar .chk input,.btnrow .chk input,.formrow .chk input,.inline > .chk input,td > .chk input{margin-top:0}
.bar form > .btn,.bar form > .chk{flex:none}
label.inline{flex:0 0 auto;max-width:100%}
label.inline > input[type=checkbox],label.inline > input[type=radio]{flex:none}
.inline > *{width:auto}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
/* 2 列の欄で片方のラベルだけ 2 行になっても、入力欄の高さをそろえる（欄の下に説明などが続く段は対象外） */
.f2:not(:has(> div > :is(input,select,textarea) + *)){align-items:end}
.msg{background:#e6f1eb;border:1px solid #c9e0d3;color:var(--midori);padding:10px 14px;border-radius:10px;margin:0 0 14px;font-size:14px}
.msg.err{background:#f7e3e1;border-color:#ecc7c3;color:var(--ake)}
.code{font-family:var(--mono);font-size:28px;letter-spacing:.3em;text-align:center}
.center{text-align:center}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--nezumi);font-weight:500;background:var(--washi)}
tr:hover td{background:#faf7f1}
.num{text-align:right;font-variant-numeric:tabular-nums}
/* 表の見出しをスクロールしても貼り付けるため、広い画面では横スクロールにしない（overflow があると sticky が効かない） */
.tablewrap{overflow:visible}
@media(max-width:860px){.tablewrap{overflow-x:auto;margin:0 -16px;padding:0 16px}}
/* 長い表：見出しを画面の上に貼り付け、行を縞にして、スクロールしてもどの列・どの行か分かるように。
   .tw は広い画面では横スクロールにしない（overflow があると sticky が効かない） */
.tw{overflow:visible}
.tw thead th,.tablewrap thead th,table.sticky-head thead th{white-space:nowrap}   /* 表の見出し（使っている会社・止めた会社…）を 2 行に折らない */
@media(max-width:860px){.tw{overflow-x:auto;margin:0 -16px;padding:0 16px}}
table.sticky-head thead th{position:-webkit-sticky;position:sticky;top:var(--stick2,0px);background:#fff;z-index:2;box-shadow:inset 0 -2px 0 var(--line)}   /* --stick2 = 上に貼り付いているもの（帯・タブ）の下 */
.card table.sticky-head thead th{background:var(--kinu)}   /* カードの中の表は、カードの色で貼る（下の行が透けない） */
.scrollbox{max-height:420px;overflow:auto}
.scrollbox table.sticky-head thead th{top:0}   /* 枠の中でスクロールする表は枠の上端に貼る（ページの帯の高さぶん下がって行を隠さない） */
table.zebra tbody tr:nth-child(even){background:#f7f8fa}
table.zebra tbody tr:hover{background:#eef2f7}
table.sticky-head td{border-bottom:1px solid #e6e9ee}

/* member top menu (sticky with the header) */
.mnav{background:var(--sumi2);border-top:1px solid rgba(255,255,255,.08)}
.mnav .in{display:flex;gap:0;padding:0 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mnav .in::-webkit-scrollbar{display:none}
.mnav a{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;font-size:14px;font-weight:600;color:#c8c2b6;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s}
.mnav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mnav a:hover{color:#fff}
.mnav a.on{color:#fff;border-bottom-color:var(--kin)}
@media(max-width:520px){.mnav .in{padding:0 2px}.mnav a{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:8px 2px 7px;font-size:11px;font-weight:500;letter-spacing:-.01em}.mnav a svg{width:20px;height:20px}.mnav a.on{font-weight:700}}
@media(max-width:380px){.mnav a{font-size:10px}}

/* bottom tabs (member) */
.tabs{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:30;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs a{flex:1;text-align:center;padding:8px 0 6px;font-size:10px;color:var(--nezumi);display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs a.on{color:var(--ai);font-weight:700}
@media(min-width:760px){body{padding-bottom:24px}.tabs{position:static;border:0;background:transparent;max-width:720px;margin:0 auto;padding:0 16px}
  .tabs a{flex:0 0 auto;flex-direction:row;font-size:13px;padding:8px 12px;border-radius:999px}.tabs a.on{background:#e5ecf4}}

/* member card */
.mcard{background:linear-gradient(135deg,#132238 0%,#0E1620 60%,#1B3A5C 100%);color:var(--washi);border-radius:18px;padding:22px 22px 18px;
  position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(14,22,32,.35)}
.mcard:before{content:"";position:absolute;inset:auto -40px -60px auto;width:220px;height:220px;border-radius:50%;border:1px solid rgba(192,161,90,.35)}
.mcard .club{font-size:10px;letter-spacing:.22em;color:var(--kin);text-transform:uppercase}
.mcard .name{font-family:var(--serif);font-size:26px;margin:14px 0 2px}
.mcard .no{font-family:var(--mono);font-size:20px;letter-spacing:.12em;color:#fff;margin-top:14px}
.mcard .meta{display:flex;gap:18px;margin-top:12px;font-size:12px;color:#c8c2b6}
.mcard .meta b{display:block;color:#fff;font-weight:500;font-size:14px}

/* event */
.date-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:var(--sumi);color:#fff;line-height:1.1;flex:0 0 auto}
.date-chip b{font-size:20px;font-family:var(--serif)}
.date-chip small{font-size:10px;color:var(--kin)}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg label{flex:1;margin:0;padding:10px;text-align:center;color:var(--ink);cursor:pointer;font-size:14px}
.seg input{display:none}
.seg input:checked + span{background:var(--ai);color:#fff;display:block;margin:-10px;padding:10px;font-weight:700}

/* order/cart */
.mi{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.mi:first-child{border-top:0}
.mi .n{font-weight:700}.mi .d{font-size:12px;color:var(--nezumi)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer;color:var(--ai);font-family:inherit}
.qty span{min-width:20px;text-align:center;font-weight:700}
.cartbar{position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0px));z-index:29;padding:0 16px}
.cartbar .in{max-width:688px;margin:0 auto;background:var(--sumi);color:#fff;border-radius:14px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.cartbar .in b{font-size:18px}
@media(min-width:760px){.cartbar{bottom:16px}}
.steps{display:flex;gap:6px;margin:12px 0}
.steps span{flex:1;height:6px;border-radius:3px;background:var(--line)}
.steps span.on{background:var(--midori)}

/* admin layout */
.adm{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.adm .side{background:var(--sumi);color:#c8c2b6;padding:18px 14px;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}  /* アプリが増えても本文を押し下げない。長くなったらメニューだけが動く */
.adm .side .brand{color:#fff;font-family:var(--serif);font-size:16px;margin:4px 8px 18px}
.adm .side .brand small{display:block;color:var(--kin);font-size:10px;letter-spacing:.18em;font-family:var(--sans)}
.adm .side a{display:block;color:#c8c2b6;padding:9px 10px;border-radius:8px;font-size:14px}
.adm .side a.on,.adm .side a:hover{background:rgba(255,255,255,.08);color:#fff}
/* サイドバーの中でフォームを使うボタン（リンクと同じ見た目にする） */
.adm .side .sidelink{margin:0}
.adm .side .sidelink button{display:block;width:100%;text-align:left;background:none;border:0;min-height:0;color:#c8c2b6;padding:9px 10px;border-radius:8px;font:inherit;font-size:14px;font-weight:400;cursor:pointer}
.adm .side .sidelink button:hover{background:rgba(255,255,255,.08);color:#fff}
.adm .side .sec{margin:10px 0 2px}
.adm .side .sec > summary{font-size:10px;letter-spacing:.14em;color:var(--kin);margin:4px 10px;text-transform:uppercase;
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:3px 0;-webkit-tap-highlight-color:transparent}
.adm .side .sec > summary::-webkit-details-marker{display:none}
.adm .side .sec > summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);margin-left:auto;margin-right:2px;opacity:.7;transition:transform .12s}
.adm .side .sec[open] > summary::after{transform:rotate(45deg)}
.adm .side .sec > summary:hover{color:#fff}
.adm .side .sec > summary .n{background:rgba(255,255,255,.12);color:#c8c2b6;border-radius:999px;padding:0 6px;font-size:9px;letter-spacing:0}
.adm .side .foot{margin-top:14px;padding-top:8px;border-top:1px solid rgba(255,255,255,.10)}
/* 左メニューの検索（全体の検索 /admin/search） */
.adm .side .sidesearch{margin:0 6px 10px}
.adm .side .sidesearch input{width:100%;margin:0;padding:7px 10px;font-size:13px;border-radius:9px;border:1px solid #3a4a5e;background:rgba(255,255,255,.07);color:#fff;min-height:0}
.adm .side .sidesearch input::placeholder{color:#8f99a8}
.adm .side .sidesearch input:focus{outline:none;border-color:var(--kin);background:rgba(255,255,255,.12)}
/* 左メニューの「ログイン中」：誰でログインしているかを常に出す */
.adm .side .who{display:block;margin:0 0 10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);color:#c8c2b6;line-height:1.35;text-decoration:none}
.adm .side .who small{display:block;font-size:11px;color:#8f99a8;letter-spacing:.02em}
.adm .side .who b{display:block;color:#fff;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm .side .who span{display:block;font-size:11.5px;color:#a8b0bc;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.who:hover{background:rgba(255,255,255,.12)}
/* 会社名・ログイン中・店舗は左メニューの上に固定（メニューを下へ動かしても、どの会社を見ているか分かるように） */
.adm .side .sidehead{position:sticky;top:-18px;z-index:5;background:var(--sumi);margin:-18px -14px 8px;padding:18px 14px 2px;box-shadow:0 8px 10px -10px rgba(0,0,0,.7)}
.adm .side .whobox.sp-only{display:none}
.adm .main{padding:22px 26px;max-width:1180px;min-width:0}
.adm .main > h1{margin-bottom:14px}
.adm .side .navbtn{display:none}
.adm .side .navt{position:absolute;opacity:0;width:1px;height:1px}
/* 狭い画面：行を auto と 1fr に。こうしないと min-height:100vh の余りが
   ヘッダー（黒い帯）にも配られて、中身が短いページで黒帯が伸びる */
@media(max-width:860px){.adm{grid-template-columns:1fr;grid-template-rows:auto 1fr}

  .adm .side{padding:8px 12px;position:sticky;top:0;z-index:30;height:auto;max-height:none;overflow:visible}
  .adm .side .sidehead{position:static;margin:0;padding:0;box-shadow:none;background:none}
  .adm .side .whobox.pc-only{display:none}.adm .side .whobox.sp-only{display:block}
  .adm .side .sidetop{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .adm .side .brand{margin:0;font-size:14px;line-height:1.2}
  .adm .side .navbtn{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
    border:1px solid #3a4a5e;border-radius:10px;padding:10px 14px;font-size:14px;color:#e8e2d6;
    cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
  .adm .side .navt:focus-visible ~ .sidehead .navbtn{outline:2px solid var(--kin);outline-offset:2px}
  .adm .side .links{display:none;margin-top:10px;padding-top:6px;max-height:72vh;overflow-y:auto;
    border-top:1px solid rgba(255,255,255,.14)}
  .adm .side .navt:checked ~ .links{display:block}
  .adm .side .sec{display:block;margin:14px 10px 4px}
  .adm .side a{padding:11px 10px;font-size:15px}
  .adm .main{padding:14px;min-width:0}}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bar form{display:flex;gap:8px;align-items:center}
.bar input,.bar select{width:auto}
/* 日付＋ボタンは1つのまとまり。折り返すならまとまりごと下へ（ボタンだけ落ちない） */
.bar form{flex-wrap:nowrap}
.meter{height:14px;border-radius:7px;background:var(--line);position:relative;overflow:hidden}
.meter > i{position:absolute;left:0;top:0;bottom:0;background:var(--midori);border-radius:7px}
.meter > s{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ake)}

/* kitchen */
.kit{background:#0b1118;color:#f1ede4;min-height:100vh;padding:12px}
.kit h1{color:#fff;font-size:18px;display:flex;justify-content:space-between;align-items:center}
.kit .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.kit .col h2{font-size:14px;color:var(--kin);letter-spacing:.1em;margin-bottom:8px;display:flex;justify-content:space-between}
.kit .oc{background:#15202b;border:1px solid #243244;border-radius:14px;padding:12px 14px;margin-bottom:10px;cursor:pointer;user-select:none}
.kit .oc.new{border-color:var(--kin);box-shadow:0 0 0 1px rgba(192,161,90,.5)}
.kit .oc .h{display:flex;justify-content:space-between;align-items:baseline}
.kit .oc .h b{font-size:20px;font-family:var(--mono)}
.kit .oc .h span{font-size:12px;color:#9aa5b3}
.kit .oc ul{list-style:none;margin:8px 0 0;padding:0}
.kit .oc li{display:flex;justify-content:space-between;font-size:16px;padding:3px 0;border-top:1px dashed #2b3a4d}
.kit .oc li small{color:#c8c2b6;display:block;font-size:12px}
.kit .oc .al{color:#ffb4a8;font-size:12px;margin-top:6px}
.kit .oc .act{margin-top:10px;display:flex;gap:8px}
.kit .btn{border-color:var(--kin);background:var(--kin);color:#111;padding:12px;font-size:16px;flex:1}
.kit .btn.gh{background:transparent;color:#c8c2b6;border-color:#3a4a5e;flex:0 0 auto}
.kit .live{font-size:12px;color:#9aa5b3}.kit .live.on{color:#7fd1a5}
@media(max-width:900px){.kit .cols{grid-template-columns:1fr}}

/* 言語切替（JP | EN） */
.langsw{display:inline-flex;margin-left:10px;border:1px solid rgba(255,255,255,.32);border-radius:999px;overflow:hidden;vertical-align:middle}
.langsw button{background:none;border:0;color:#c8c2b6;padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.06em;cursor:pointer;line-height:1.4}
.langsw button.on{background:var(--kin);color:var(--sumi)}
.langsw button:not(.on):hover{color:#fff}

/* 管理画面の中のサブタブ（勤怠など）。下部固定の .tabs とは別物 */
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.subnav .btn{flex:0 0 auto}
/* スクロールしても見失わないように：アプリのタブ（.subnav）と、その画面が「常に見せたいもの」（.stick）を上に貼り付ける。
   狭い画面（アプリ）は場所を取るので貼り付けない。.stick の中に .subnav を入れると、ひとかたまりで貼り付く */
@media(min-width:700px){
  .stick,.subnav{position:-webkit-sticky;position:sticky;top:var(--stick,0px);z-index:12;background:var(--washi);margin:0 -16px 16px;padding:8px 16px 6px;box-shadow:0 8px 8px -8px rgba(0,0,0,.10)}
  .stick .subnav{position:static;margin:0 0 10px;padding:0;background:transparent;box-shadow:none}   /* 貼り付く塊の中でも、タブの下に続くもの（年度の選択・進み具合…）とは 10px 空ける */
  .stick .bar{margin-bottom:8px}.stick .bar:last-child{margin-bottom:0}
  .stick > h1{margin:0 0 6px}.stick > h1:last-child{margin-bottom:0}.stick > .subnav:last-child{margin-bottom:0}
  .stick > p{margin:0 0 8px}.stick > form{margin-bottom:8px}.stick > :last-child{margin-bottom:0}
  .adm .main .stick,.adm .main .subnav{margin-left:-26px;margin-right:-26px;padding-left:26px;padding-right:26px}
  .adm .main .stick .subnav{margin:0 0 10px;padding:0}
}
/* 休暇の残り（申請画面）：タブの下に貼り付く 1 行。狭い画面（アプリ）でもこの 1 行だけは貼り付ける */
.balbar{position:sticky;top:var(--stick2,0px);z-index:13;display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;
  margin:-16px -16px 16px;padding:4px 16px 8px;background:var(--washi);box-shadow:0 8px 8px -8px rgba(0,0,0,.10);font-size:13px;color:var(--nezumi)}
.balbar b{color:var(--ink);font-size:15px;font-family:var(--mono);font-weight:600}
.balbar .badge{align-self:center}
@media(min-width:700px){.adm .main .balbar{margin-left:-26px;margin-right:-26px;padding-left:26px;padding-right:26px}}
@media(max-width:699px){.balbar{margin-top:-6px;font-size:12.5px}.balbar b{font-size:14px}}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btnrow.bottom{align-items:flex-end}
.btnrow.bottom label{margin-top:0}

.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.formrow > *{min-width:0}
/* 見た目はリンク、中身はボタン（POST が要る切り替え用） */
.linkish{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--kin);text-decoration:underline;cursor:pointer}

/* ─────────────── 会員画面：パソコンで開いたときは Web の見た目に ───────────────
   スマホ（〜899px）はこれまでどおりアプリと同じ体裁のまま。
   900px 以上では、黒帯を1本にして「ロゴ｜メニュー｜名前」を横一列に並べ、本文を広げる。 */
@media(min-width:900px){
  .top{display:flex;align-items:center;gap:26px;padding:0 max(24px,calc((100% - 1080px) / 2))}
  .top > .in{display:contents}
  .top .brand{order:1;padding:13px 0;flex:0 0 auto}
  .top .brand b{white-space:nowrap}
  .top .brand b{font-size:19px}
  .mnav{order:2;flex:1 1 auto;min-width:0;border-top:0;background:transparent}
  .mnav .in{max-width:none;margin:0;padding:0;justify-content:flex-start;gap:2px;
    flex-wrap:wrap;overflow:visible}          /* 入りきらないときは折り返す（横スクロールで隠さない） */
  .mnav a{flex:0 0 auto;border-bottom:0;border-radius:999px;padding:7px 11px;font-size:13.5px}
  .mnav a svg{width:16px;height:16px}
  .mnav a.on{background:rgba(255,255,255,.10);color:#fff}
  .top .who{order:3;margin-left:auto;white-space:nowrap;display:flex;align-items:center;gap:10px}
  body > .wrap{max-width:1128px;padding:26px 24px 40px}   /* 中身は 1080px。黒帯と左端を揃える */
  .wrap > h1{font-size:28px;margin-bottom:18px}
  .mcard{max-width:420px}           /* 会員証は横に伸ばさない */
  /* 入力欄も横いっぱいには広げない（読みやすい幅で止める） */
  .wrap .card input:not([type=checkbox]):not([type=radio]),
  .wrap .card select, .wrap .card textarea{max-width:560px}
}
/* ログインなど、1枚だけのページは広げない */
@media(min-width:900px){ body.narrow > .wrap{max-width:660px} }
/* 一覧が並ぶページは2段に流す（テンプレートで body に cols を付けたページだけ） */
@media(min-width:900px){
  body.cols > .wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  body.cols > .wrap > h1,
  body.cols > .wrap > .msg,
  body.cols > .wrap > .mcard{grid-column:1 / -1}
  body.cols > .wrap > .card{margin:0}
}

/* ── シフトの時間帯（1日1行。重なった分は段を足す） ── */
.gantt{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.grow{display:grid;grid-template-columns:132px 1fr;align-items:stretch;border-top:1px solid var(--line)}
.grow:first-child{border-top:0}
.ghead{background:var(--washi2)}
.gday{padding:8px 10px;font-size:13px;line-height:1.35;border-right:1px solid var(--line);background:var(--washi2)}
.gday b{font-size:14px}
.gday .gsum{display:block;font-size:11px}
.gticks{position:relative;height:26px}
.gticks b{position:absolute;top:6px;transform:translateX(-50%);font-size:11px;font-weight:400;color:var(--nezumi);white-space:nowrap}
.gticks b:first-child{transform:none}
.gticks b:last-child{transform:translateX(-100%)}
.gtrack{position:relative;padding:6px 0;background:
  repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px var(--gstep,12.5%))}
.gtrack.gempty{min-height:34px;background:none}
.glane{position:relative;height:26px;margin:2px 0}
.gbar{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:4px;min-width:14px;
  padding:0 8px;border-radius:6px;font-size:12px;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px var(--kinu);overflow:hidden;white-space:nowrap}
.gbar .gt{font-weight:400;opacity:.85}
.glegend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:13px;color:var(--nezumi)}
.glegend span{display:inline-flex;align-items:center;gap:6px}
.glegend i{width:12px;height:12px;border-radius:4px;flex:none}
@media (max-width:700px){
  .grow{grid-template-columns:92px 1fr}
  .gbar{font-size:11px;padding:0 6px}
  .gbar .gt{display:none}
}

/* ── アプリのしるし ── */
/* 並べて見せる小さな札 */
ul.plain,ol.plain{margin:8px 0 10px;padding-left:1.3em;line-height:1.9;font-size:14px}
ul.plain{list-style:none;padding-left:0}
ul.plain li{padding:6px 0;border-top:1px solid var(--line)}
ul.plain li:first-child{border-top:0}
ol.plain li{padding:4px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.chip2{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--washi2);border:1px solid var(--line);font-size:13px}
.badge.kin{background:#f6efdd;color:#8a6d2b;border-color:#e5d4a6}
.approw{display:flex;align-items:flex-start;gap:10px}
.approw > div{min-width:0}
.aicon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;background:var(--washi2);color:var(--ai);border:1px solid var(--line)}
.adm .side a.navico{display:flex;align-items:center;gap:8px}
.adm .side a.navico .ico{flex:none;opacity:.8}
.adm .side a.navico.on .ico,.adm .side a.navico:hover .ico{opacity:1}

/* ── 会員メニューの「ほか」（アプリが増えても一段に収める） ── */
.mnav .more{position:relative;flex:0 0 auto}
.mnav .more > summary{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;
  font-size:14px;font-weight:600;color:#c8c2b6;white-space:nowrap;cursor:pointer;list-style:none;
  border-bottom:3px solid transparent;-webkit-tap-highlight-color:transparent}
.mnav .more > summary::-webkit-details-marker{display:none}
.mnav .more > summary:hover{color:#fff}
.mnav .more > summary.on{color:#fff;border-bottom-color:var(--kin)}
.mnav .more[open] > summary{color:#fff}
.mnav .more .pop{position:absolute;z-index:30;top:100%;right:0;min-width:12rem;padding:6px;
  background:var(--sumi2);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.mnav .more .pop a{display:flex;justify-content:flex-start;padding:10px 12px;border-radius:8px;border-bottom:0}
.mnav .more .pop a:hover{background:rgba(255,255,255,.10);color:#fff}
.mnav .more .pop a.on{background:rgba(255,255,255,.10);color:#fff}
/* 名前からもマイページへ */
.top .who a.me{color:inherit;text-decoration:none}
.top .who a.me:hover{text-decoration:underline}
@media(max-width:520px){
  .mnav .more{flex:1 1 0;min-width:0}
  .mnav .more > summary{flex-direction:column;gap:2px;padding:8px 2px 7px;font-size:11px;font-weight:500}
  .mnav .more .pop{right:2px;left:2px;min-width:0}
}
@media(min-width:900px){
  .mnav .more > summary{border-bottom:0;border-radius:999px;padding:7px 11px;font-size:13.5px}
  .mnav .more > summary.on{background:rgba(255,255,255,.10)}
}

/* ── 会社を選ぶ（同じメールで複数の会社に入っている人） ── */
.coy{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;margin-bottom:10px;font:inherit;color:inherit;min-height:0}
.coy:hover{border-color:var(--ai)}
.coy[disabled]{cursor:default;opacity:1;background:var(--washi2)}
.coy .n{flex:none;width:42px;height:42px;border-radius:12px;background:var(--washi2);color:var(--ai);
  display:grid;place-items:center;font-weight:700;font-size:17px}
.coy[disabled] .n{background:#fff}
.coy .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.coy .t b{font-size:15px}
.coy .t .muted{font-size:12px}
.coy .go{margin-left:auto;color:var(--nezumi);font-size:20px}

/* 宛先ピッカー：入力欄をクリックすると候補が出て、選ぶとチップになる（勤怠の申請の通知先など） */
.pick{position:relative}
.pick .box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:var(--ctl);padding:5px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:text}
.pick .box:focus-within{outline:2px solid var(--ai2);outline-offset:0;border-color:var(--ai2)}
.pick .tag{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;border-radius:999px;background:var(--washi2);border:1px solid var(--line);font-size:13px;line-height:1.4;max-width:100%}
.pick .tag b{font-weight:600}.pick .tag small{color:var(--nezumi)}
.pick .tag button{border:0;background:transparent;color:var(--nezumi);cursor:pointer;font-size:16px;line-height:1;padding:0 3px;font-family:inherit;min-height:0}
.pick .tag button:hover{color:var(--ake)}
.pick .box input[type=text]{flex:1 1 160px;min-width:120px;width:auto;border:0;outline:0;min-height:28px;padding:2px 4px;background:transparent}
.pick .box input[type=text]:focus{outline:0;border:0}
.pick .menu{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);max-height:260px;overflow:auto;display:none}
.pick .menu.open{display:block}
.pick .menu div{padding:8px 12px;cursor:pointer;font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pick .menu div:hover,.pick .menu div.hi{background:var(--washi)}
.pick .menu .e{color:var(--nezumi);font-size:13px}
.pick .menu .none{color:var(--nezumi);cursor:default;font-size:13px}
.pick .menu .none:hover{background:transparent}
/* 勤怠：期間の早選びと CSV ダウンロード */
a.chip2{color:inherit;text-decoration:none}
a.chip2:hover{border-color:var(--ai2)}
a.chip2.on{background:var(--ai);border-color:var(--ai);color:#fff}
.csvdl{margin-top:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;background:var(--washi)}

/* アプリ（CLT Members）の中で開く会員画面：上のバーはアプリ側にあるので出さない。メニュー（.mnav）は上に貼りつける */
body.in-app header.top{display:none}
body.in-app .mnav{position:sticky;top:0;z-index:20}

/* 左メニューの店舗の切り替え（店舗が 2 つ以上あるとき） */
.adm .side .storesw{display:block;margin:-4px 0 10px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.06);color:#c8c2b6;font-size:12px}
.adm .side .storesw label{display:flex;align-items:center;gap:8px;margin:0}
.adm .side .storesw select{flex:1;margin:0;padding:4px 8px;min-height:30px;font-size:13px;background:#fff;color:#222}
.top .storesw-m select{margin:0 8px 0 0;padding:3px 8px;min-height:28px;font-size:12px;width:auto;background:#fff;color:#222;border-radius:8px}

/* ───────────── 携帯（〜640px）で管理画面・アプリを見やすく（2026-09-24） ─────────────
   1) 横に並べたカード（.f2／.grid の中に .card）は縦に 1 列
   2) 入力欄の 2〜4 列（.f2）は 1 列
   3) 一覧の表は「1 行 = 1 枚のカード」（見出しをラベルにする。_mobile.html が data-label を付けて .rt を足す）
   4) 日付＋ボタンなどの横並び（.bar form）は折り返す
   5) 横にスクロールする表の見出しは貼り付けない（枠の中で途中に浮いて見えていた） */
@media(max-width:700px){
  .main .f2:has(> .card), .main .grid:has(> .card){grid-template-columns:1fr !important}
}
@media(max-width:860px){
  .tablewrap table.sticky-head thead th, .tw table.sticky-head thead th{position:static}
  .adm .main .man .man-back{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .adm .main .balbar{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
}
@media(max-width:640px){
  .main .f2{grid-template-columns:1fr !important}
  .bar form{flex-wrap:wrap}
  .main .card h2{flex-wrap:wrap}
  .bar form > input, .bar form > select{max-width:100%}
  .main .grid.tiles4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;min-width:0 !important;flex:1 1 100% !important}
  .main .grid.tiles4 .stat b{font-size:16px !important}
  .main table.rt{display:block;width:100%;min-width:0;border-collapse:separate;border-spacing:0}
  .main table.rt thead, .main table.rt tr.rt-head{display:none}
  .main table.rt tbody, .main table.rt tfoot{display:block}
  .main table.rt tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:3px 12px;margin:0 0 10px}
  .main table.rt tfoot tr{background:var(--washi2)}
  /* セル：左に見出し（浮かせる）、右に中身。中身が複数の要素でもそのまま右寄せで折り返す */
  .main table.rt td, .main table.rt th{display:flow-root;padding:6px 0;border:0;border-top:1px solid #eef0f3;text-align:right;white-space:normal;
    min-width:0;width:auto;max-width:none;position:static;background:transparent;box-shadow:none;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
  .main table.rt tr > :first-child{border-top:0}
  .main table.rt td::before, .main table.rt th::before{content:attr(data-label);float:left;max-width:44%;margin-right:12px;text-align:left;color:var(--nezumi);
    font-size:12px;font-weight:500;white-space:normal;line-height:1.5;padding-top:1px;overflow-wrap:normal}
  .main table.rt [data-label=""]::before{content:none}
  .main table.rt tr > .rt-blank{display:none}
  .main table.rt td :is(input,select,textarea):not([type=checkbox]):not([type=radio]){width:auto;max-width:56%;min-width:0;display:inline-block;margin:0;vertical-align:middle}
  .main table.rt td .inline, .main table.rt td .btnrow, .main table.rt td form{justify-content:flex-end}
  .main table.rt td form{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
  .main table.rt td.rt-empty{text-align:center;color:var(--nezumi)}
  /* 数字の並ぶ表（keep-table）は表のまま横スクロール。1 列目（日付・名前）は左に貼り付け */
  .main table.keep-table{font-size:12.5px}
  .main table.keep-table th, .main table.keep-table td{padding:6px 8px;white-space:nowrap}
  .main table.keep-table tr > :first-child{position:sticky;left:0;top:auto;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line)}
  .main table.keep-table thead tr > :first-child{z-index:3;background:var(--washi2)}
  .main .tablewrap:has(> table.rt), .main .tw:has(> table.rt), .main .scrollbox:has(> table.rt){overflow:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0;max-height:none}
  .main .card:has(> .tablewrap > table.rt), .main .card:has(> .tw > table.rt){padding-left:12px;padding-right:12px}
  .main .rt-wrap{overflow-x:auto;margin:0 -14px;padding:0 14px}
}
/* 「〜として見ています」の帯：スクロールしても上に貼り付ける（いまの見え方を見失わない）。
   その下に貼り付くもの（.stick・.man-back）は --stick にこの帯の高さを足して、帯の下に並ぶ */
.viewas{position:-webkit-sticky;position:sticky;top:var(--stickva,0px);z-index:25;background:var(--washi);padding:8px 0 10px;margin:-8px 0 4px}
.viewas .msg{margin:0;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.n.lv[hidden]{display:none!important}
.adm .side a .n.lv,.adm .side a .n[style*="--ake"]{display:inline-block;min-width:18px;height:18px;padding:0 6px;border-radius:999px;font-size:11px;line-height:18px;text-align:center;font-weight:700;margin-left:4px;vertical-align:1px}