/* ココスポーツ デモ：見た目（UI基本ルール v01・見本v2 で確定した値） */
:root{
  --navy:#16213e; --sky:#0284c7; --sky-weak:#f0f9ff;
  --bg:#f8fafc; --band:#f1f5f9; --surface:#fff; --line:#e2e8f0; --line2:#cbd5e1;
  --t1:#1e293b; --t2:#475569; --t3:#94a3b8;
  --ok:#15803d; --ok-weak:#f0fdf4; --warn:#b45309; --warn-weak:#fffbeb; --ng:#b91c1c; --ng-weak:#fef2f2;
  --r-lg:12px; --r:8px; --r-sm:6px;
  --shadow:0 1px 3px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#e5e7eb;color:var(--t1);font:13px/1.55 "Noto Sans JP","Hiragino Sans","Yu Gothic","YuGothic",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;flex:0 0 auto}

/* ===== デモの切り替え帯 ===== */
.demobar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:8px 14px;flex-wrap:wrap}
.demobar .brand{font-weight:500;color:var(--navy);letter-spacing:.08em;font-size:14px}
.demobar .tag{font-size:11px;color:var(--t2);border:1px solid var(--line2);border-radius:999px;padding:0 8px}
.demobar nav{display:flex;gap:4px}
.demobar nav a{padding:5px 12px;border-radius:var(--r);border:1px solid transparent;color:var(--t2);font-size:13px}
.demobar nav a.on{border-color:var(--line2);background:var(--band);color:var(--t1)}
.demobar .now{margin-left:auto;font-size:12px;color:var(--t2)}
.demobar .now b{font-weight:500;color:var(--t1)}
.linkbtn{background:none;border:0;color:var(--t2);font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}

/* ===== お客様の画面（スマホの枠） ===== */
.custwrap{display:flex;gap:24px;justify-content:center;align-items:flex-start;padding:20px 16px 40px}
.phone{width:390px;flex:0 0 390px;height:820px;background:#fff;border-radius:28px;border:1px solid #cbd5e1;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(15,23,42,.08)}
.phone .scr{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;font-size:15px;line-height:1.75}
.side{width:360px;flex:0 0 360px;display:flex;flex-direction:column;gap:12px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.panel h3{margin:0 0 6px;font-size:13px;font-weight:500}
.panel p{margin:0 0 6px;color:var(--t2);font-size:12px}
.log{list-style:none;margin:0;padding:0;max-height:330px;overflow:auto;font-size:12px}
.log li{padding:6px 0;border-bottom:1px solid var(--line);color:var(--t2)}
.log li b{font-weight:500;color:var(--t1)}
.log li .t{color:var(--t3);margin-right:6px}
.entry{display:flex;flex-direction:column;gap:6px}
.entry a{display:block;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:12px;color:var(--t1)}
.entry a small{display:block;color:var(--t3);font-size:11px}

/* お客様サイトの部品 */
.c-hd{position:sticky;top:0;z-index:5;background:#fff}
.c-hd .in{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px}
.c-logo small{display:block;font-size:11px;color:var(--t2);line-height:1.2}
.c-logo b{font-weight:500;font-size:18px;color:var(--navy);letter-spacing:.12em;line-height:1.3}
.lines{height:6px;background:linear-gradient(to bottom,var(--navy) 0 2px,#fff 2px 3px,var(--sky) 3px 5px,#fff 5px 6px)}
.c-body{padding:16px 16px 96px;display:flex;flex-direction:column;gap:14px}
.c-hero{height:300px;background:#cbd5e1 center 35%/cover no-repeat;position:relative}
.c-hero .plate{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.95);padding:16px 18px;border-radius:2px}
.en{font-family:"Cormorant Garamond",serif;letter-spacing:.2em;color:var(--sky);font-size:13px}
.mincho{font-family:"Shippori Mincho","Yu Mincho",serif;font-weight:500;color:var(--navy)}
.c-hero h1{font-size:22px;line-height:1.5;margin:4px 0 6px}
.c-hero p{margin:0;font-size:13px;color:var(--t2)}
.c-hero2{display:grid;grid-template-columns:40% 1fr;background:var(--sky-weak);border-bottom:1px solid var(--line)}
.c-hero2 .ph{background:#cbd5e1 center/cover no-repeat;min-height:178px}
.c-hero2 .tx{padding:14px 14px 14px 16px;display:flex;flex-direction:column;gap:4px}
.c-hero2 h2{font-size:17px;line-height:1.5;margin:0}
.c-hero2 p{margin:0;font-size:12px;color:var(--t2);line-height:1.6}
.c-hero2 .btn{margin-top:auto;align-self:flex-start}
.quick{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quick a{display:flex;gap:10px;align-items:center;padding:14px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-size:14px;line-height:1.4}
.quick a:nth-child(2n){border-right:0}.quick a:nth-last-child(-n+2){border-bottom:0}
.quick a small{display:block;font-size:11px;color:var(--t2)}
.quick .ico{width:26px;height:26px;stroke:var(--navy);stroke-width:1.4}
.ttl{text-align:center;margin:10px 0 4px}
.ttl .e{font-family:"Cormorant Garamond",serif;font-size:28px;color:var(--navy);letter-spacing:.06em;line-height:1.1}
.ttl .j{font-size:12px;color:var(--t2);letter-spacing:.12em}
.band-sky{background:var(--sky-weak);margin:0 -16px;padding:20px 16px}
.band{background:var(--band);margin:0 -16px;padding:20px 16px}
.photo{border-radius:2px;background:#cbd5e1 center/cover no-repeat}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 18px;border-radius:var(--r);font-size:15px;font-weight:500;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;white-space:nowrap}
.btn.pri{background:var(--navy);color:#fff}
.btn.block{display:flex;width:100%}
.btn.sm{height:36px;font-size:13px;padding:0 12px}
.btn[disabled]{background:var(--line);border-color:var(--line);color:var(--t3);cursor:default}
.steps{display:flex;gap:6px;font-size:12px;color:var(--t3)}
.steps span{flex:1;border-top:2px solid var(--line);padding-top:4px}
.steps span.on{border-color:var(--navy);color:var(--navy)}
.menu{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;justify-content:space-between;gap:10px;cursor:pointer;background:#fff;text-align:left;width:100%}
.menu.sel{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.menu .n{font-size:15px}.menu .m{font-size:12px;color:var(--t2);margin-top:2px}.menu .p{white-space:nowrap;text-align:right}
.menu .p s{display:block;font-size:12px;color:var(--t3)}
.first{font-size:11px;color:var(--sky);border:1px solid var(--sky);border-radius:2px;padding:0 6px;margin-left:6px;white-space:nowrap}
.camp{font-size:11px;color:var(--warn);margin-left:6px}
.wk{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.wk button{background:none;border:1px solid var(--line2);border-radius:var(--r);height:32px;padding:0 10px;cursor:pointer;color:var(--t2)}
.slots{display:grid;gap:3px;font-size:13px;text-align:center}
.slots .h{color:var(--t3);font-size:11px;padding:3px 0}
.slots .h.sat{color:var(--sky)}
.slot{border:1px solid var(--line2);border-radius:var(--r-sm);padding:5px 0;background:#fff;cursor:pointer;color:var(--t1);min-height:32px}
.slot.x{background:var(--band);border-color:var(--band);color:var(--t3);cursor:default}
.slot.off{background:transparent;border-color:transparent;color:var(--line2);cursor:default;font-size:11px}
.slot.sel{background:var(--navy);border-color:var(--navy);color:#fff}
.legend{font-size:12px;color:var(--t2)}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:13px}
.req{font-size:11px;color:var(--t2);margin-left:6px}
.inp{height:46px;border:1px solid var(--line2);border-radius:var(--r-sm);padding:0 12px;font-size:16px;color:var(--t1);background:#fff;width:100%}
textarea.inp{height:88px;padding:10px 12px;resize:vertical}
.inp.err{border-color:var(--ng)}
.errtxt{font-size:12px;color:var(--ng)}
.help{font-size:12px;color:var(--t2)}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.chk input{margin-top:5px;width:18px;height:18px;flex:0 0 auto}
.notice{border-radius:var(--r);padding:10px 12px;font-size:13px;background:var(--bg);border:1px solid var(--line);color:#334155}
.notice.warn{background:var(--warn-weak);border-color:#fde68a;color:#78350f}
.notice.ng{background:var(--ng-weak);border-color:#fecaca;color:#7f1d1d}
.notice.ok{background:var(--ok-weak);border-color:#bbf7d0;color:#14532d}
.sumtable{width:100%;border-collapse:collapse;font-size:14px}
.sumtable td{padding:10px 2px;border-bottom:1px solid var(--line);vertical-align:top}
.sumtable td:first-child{color:var(--t2);width:30%;font-size:13px}
.actionbar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -1px 3px rgba(15,23,42,.08);padding:10px 14px;display:flex;gap:10px;align-items:center;z-index:5}
.actionbar .s{flex:1;font-size:12px;color:var(--t2);line-height:1.4}
.fixbar{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr 1.4fr;background:#fff;border-top:1px solid var(--line);z-index:5}
.fixbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 0 9px;font-size:11px;color:var(--navy);gap:2px}
.fixbar a.pri{background:var(--navy);color:#fff}
.fixbar .ico{width:20px;height:20px}
.stars{display:flex;justify-content:center;gap:6px}
.stars button{background:none;border:0;font-size:32px;color:var(--line2);cursor:pointer;line-height:1;padding:2px}
.stars button.on{color:var(--navy)}
.schools a{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);font-size:14px}
.schools a span{font-size:12px;color:var(--t2)}
.schools .g{font-size:11px;color:var(--t2);padding:10px 0 4px;letter-spacing:.08em}
.pricelist{width:100%;border-collapse:collapse;font-size:14px}
.pricelist td{padding:9px 2px;border-bottom:1px dotted var(--line2)}
.pricelist td:last-child{text-align:right;white-space:nowrap}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prod a{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;font-size:13px}
.prod a .im{aspect-ratio:1/1;background:#e2e8f0 center/cover no-repeat}
.prod a .b{padding:8px 10px}
.prod a .sc{font-size:11px;color:var(--t2)}
.sizes{display:flex;flex-wrap:wrap;gap:6px}
.sizes button{min-width:52px;height:40px;border:1px solid var(--line2);border-radius:var(--r-sm);background:#fff;cursor:pointer;font-size:14px}
.sizes button.sel{background:var(--navy);color:#fff;border-color:var(--navy)}
.sizes button[disabled]{color:var(--t3);background:var(--band);border-color:var(--band);cursor:default;text-decoration:line-through}
.sizetable{width:100%;border-collapse:collapse;font-size:12px}
.sizetable th,.sizetable td{border-bottom:1px solid var(--line);padding:5px 4px;text-align:center}
.sizetable th{font-weight:400;color:var(--t2)}

/* ===== 店の画面・運営ボード（業務画面） ===== */
.biz{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 47px);background:var(--bg)}
.bnav{background:#fff;border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.bnav .g{font-size:11px;color:var(--t3);padding:10px 10px 4px}
.bnav a{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 10px;border-radius:var(--r);color:var(--t2);font-size:13px}
.bnav a.on{background:var(--band);color:var(--t1)}
.bnav a .badge{margin-left:auto;font-size:11px;color:var(--warn)}
.bmain{padding:14px 18px 80px;display:flex;flex-direction:column;gap:12px;min-width:0}
.bbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bbar h1{margin:0;font-size:15px;font-weight:500}
.bbar .sub{color:var(--t2);font-size:12px}
.bbar .r{margin-left:auto;display:flex;gap:6px}
.sumline{color:var(--t2)}.sumline b{font-weight:500;color:var(--t1);font-size:15px;margin:0 2px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.card h2{margin:0 0 8px;font-size:13px;font-weight:500}
.card .h2r{display:flex;justify-content:space-between;align-items:baseline}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px}
.kpi .l{font-size:11px;color:var(--t2)}.kpi .v{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4}.kpi .d{font-size:11px;color:var(--t3)}
.bbtn{height:34px;border-radius:var(--r);font-size:13px;font-weight:500;padding:0 12px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bbtn.pri{background:var(--navy);color:#fff}
.bbtn.sm{height:28px;font-size:12px;padding:0 10px;font-weight:400}
table.t{width:100%;border-collapse:collapse;background:#fff}
table.t th{font-weight:400;color:var(--t2);font-size:11px;text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:9px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t td.n{text-align:right}
.st{font-size:12px;color:var(--t2)}
.st.warn{color:var(--warn)}.st.ng{color:var(--ng)}.st.ok{color:var(--ok)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-right:5px;vertical-align:1px}
.mute{color:var(--t3)}
.cal{display:grid;font-size:11px;border-left:1px solid var(--line);border-top:1px solid var(--line);background:#fff}
.cal>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:3px 4px;min-height:24px;position:relative}
.cal .hh{background:var(--bg);color:var(--t2);text-align:center}
.cal .tm{color:var(--t3);text-align:right}
.cal .b{background:#eef2ff;color:var(--navy);overflow:hidden;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
.cal .b.blk{background:var(--band);color:var(--t2)}
.cal .b.prep{background:#f8fafc;color:var(--t3)}
.cal .b.closed{background:repeating-linear-gradient(45deg,#f8fafc 0 6px,#f1f5f9 6px 12px);color:var(--t3)}
.bars{display:flex;flex-direction:column;gap:6px}
.bars .row{display:grid;grid-template-columns:150px 1fr 70px;gap:8px;align-items:center;font-size:12px}
.bars .track{height:10px;background:var(--band);border-radius:999px;overflow:hidden}
.bars .fill{height:100%;background:var(--navy);border-radius:999px}
.bars .fill.sky{background:var(--sky)}
.bars .v{text-align:right;color:var(--t2);font-variant-numeric:tabular-nums}
.cols{display:flex;align-items:flex-end;gap:14px;height:150px;padding:6px 4px 0;border-bottom:1px solid var(--line2)}
.cols .c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.cols .c i{display:block;width:100%;max-width:46px;background:var(--navy);border-radius:4px 4px 0 0}
.cols .c i.part{background:repeating-linear-gradient(45deg,var(--navy) 0 4px,#33426e 4px 8px)}
.cols .c i.sky{background:var(--sky)}
.cols .c span{font-size:11px;color:var(--t2);font-variant-numeric:tabular-nums}
.colx{display:flex;gap:14px;padding:4px}
.colx span{flex:1;text-align:center;font-size:11px;color:var(--t2)}
details.rules{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:6px 10px;font-size:12px;color:var(--t2)}
details.rules summary{cursor:pointer;color:var(--t1)}
details.rules ul{margin:6px 0 2px;padding-left:18px}
.empty{min-height:80px;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:13px}
.formgrid{display:grid;grid-template-columns:140px 1fr;gap:10px 14px;align-items:center}
.formgrid label{color:var(--t2);font-size:12px}
.bin{height:34px;border:1px solid var(--line2);border-radius:var(--r-sm);padding:0 10px;font-size:13px;background:#fff;color:var(--t1)}
.submitbar{position:sticky;bottom:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:10px 12px;display:flex;gap:10px;align-items:center}
.submitbar .what{font-size:12px;color:var(--t2)}
.toast{position:fixed;left:50%;top:60px;transform:translateX(-50%);background:var(--t1);color:#fff;padding:8px 16px;border-radius:var(--r);font-size:13px;z-index:100;opacity:0;transition:opacity .2s}
.toast.on{opacity:1}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs a{padding:5px 12px;border-radius:var(--r);border:1px solid transparent;color:var(--t2);font-size:13px}
.tabs a.on{border-color:var(--line2);background:#fff;color:var(--t1)}
.chk2{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.chk2:last-child{border-bottom:0}
.chk2 input{margin-top:3px}
.chk2 .who{margin-left:auto;font-size:11px;color:var(--t3);white-space:nowrap}
.note-ex{font-size:11px;color:var(--t3)}
@media (max-width:900px){
  .side{display:none}
  .biz{grid-template-columns:1fr}.bnav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.bnav .g{display:none}
  .kpis,.grid2,.grid3{grid-template-columns:1fr 1fr}
}

/* 受け取り方・支払い方の選択（ラジオの代わり） */
.choice{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 6px;font:inherit;color:var(--t1);cursor:pointer}
.choice b{display:block;font-weight:500;font-size:14px}.choice small{display:block;font-size:12px;color:var(--t2);margin-top:2px}
.choice .r{flex:none;width:16px;height:16px;border:1px solid var(--line2,#cbd5e1);border-radius:50%;margin-top:2px}
.choice.sel{border-color:var(--navy)}.choice.sel .r{border:5px solid var(--navy)}
.paybox{border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;background:#fff}

/* ココスポーツ 本番：画面の枠（base.css はデモから引き継いだ見た目の決まり。UI基本ルール v01） */
body{background:var(--bg)}
.boot,.loading{padding:40px 16px;text-align:center;color:var(--t2);font-size:14px}
body.busy{cursor:progress}
body.busy .btn.pri{opacity:.7}
.t3{color:var(--t3)}
.toast{position:fixed;left:50%;top:auto;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r);font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:100;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* お客様：スマホ1列。PCで開いたときは真ん中に細く */
.custwrap{display:flex;justify-content:center;align-items:flex-start;gap:20px;padding:0;min-height:100vh}
.cust{width:100%;max-width:480px;min-height:100vh;background:#fff;font-size:15px;line-height:1.75;position:relative}
@media (min-width:600px){.cust{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* 店・ボード */
.bizwrap{min-height:100vh}

/* 試しの道具 */
.custwrap.withdev{padding:0 0 0 0}
.devpanel{width:330px;flex:0 0 330px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;font-size:12px;position:sticky;top:12px;margin-top:12px;max-height:calc(100vh - 24px);overflow:auto}
.devpanel.shut{width:auto;flex:0 0 auto;padding:6px 8px}
.devtoggle{background:none;border:0;color:var(--t2);font-size:12px;cursor:pointer;text-decoration:underline}
.devhd{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:6px}
.devhd span{color:var(--t3);flex:1}
.devsec{padding:6px 0;border-bottom:1px solid var(--line)}
.devsec:last-child{border-bottom:0}
.devsec h4{margin:0 0 4px;font-size:12px;font-weight:500}
.devsec h4 small{font-weight:400;color:var(--t3)}
.devnav{display:flex;gap:4px}
.devnav a{padding:3px 10px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--t2)}
.devnav a.on{background:var(--band);color:var(--t1);border-color:var(--line2)}
.devrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:3px 0}
.devlinks{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.devlinks a{color:var(--sky)}
.inp.sm{height:32px;font-size:12px;padding:0 6px;margin-bottom:4px}
.devbox{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto}
.devbox li{padding:6px 0;border-bottom:1px dashed var(--line)}
.devbox .mt{display:flex;gap:6px;align-items:center;color:var(--t2)}
.devbox .mt .t3{margin-left:auto}
.devbox .via{font-size:10px;border-radius:999px;padding:0 6px;color:#fff}
.devbox .via.ln{background:#06c755}.devbox .via.ml{background:var(--t2)}
.devbox .tx{margin-top:2px;color:var(--t1);line-height:1.5}
.devdock{position:fixed;right:12px;bottom:12px;z-index:60}
.devdock .devpanel{position:static;margin:0;box-shadow:0 2px 8px rgba(15,23,42,.15);max-height:70vh}
@media (max-width:860px){.custwrap.withdev{flex-direction:column;align-items:stretch}.custwrap .devpanel{width:auto;flex:none;position:static;margin:12px}}

/* ココスポーツ 本番：お客様の画面（C00〜C90）の見た目
   base.css の決まり（白地＋淡い青灰、紺は文字とボタン、水素だけ淡い水色、体操服の2本線、角丸 12/8/6）に足す分だけ */

.cust{display:flex;flex-direction:column}
.cust>.c-body{flex:1 0 auto;padding:16px 16px 28px;gap:16px}
.cust .t2{color:var(--t2)}
.cust .c-body>p.help,.cust .c-sec p.help{margin:0}
.ico.lg{width:26px;height:26px;stroke-width:1.4}
.ico.xl{width:40px;height:40px;stroke-width:1.2}

/* 見出しの帯 */
.c-hd .in{gap:8px}
.c-back,.c-home,.c-tel{display:flex;align-items:center;gap:4px;color:var(--t2);font-size:13px;min-width:56px;height:44px}
.c-home{justify-content:flex-end}
.c-tel{justify-content:flex-end;color:var(--navy)}
.c-ttl{flex:1;text-align:center;font-size:14px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 足もと */
.c-foot{border-top:1px solid var(--line);background:var(--bg);padding:16px 16px 28px;font-size:12px;color:var(--t2)}
.c-foot nav{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:8px}
.c-foot nav a{color:var(--t1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.c-foot p{margin:0;line-height:1.7}

/* まとまり */
.c-sec{display:flex;flex-direction:column;gap:8px}
.c-sec h2{margin:0;font-size:13px;font-weight:500;color:var(--t2);letter-spacing:.06em}
.c-lead{margin:0;font-size:14px;color:var(--t2)}
.c-link{color:var(--sky);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:3px}
.c-pagehd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.c-pagehd h1{margin:0;font-size:18px;font-weight:500;line-height:1.4}
.c-pagehd .c-link{font-size:13px;white-space:nowrap}
.c-mini{font-size:13px;color:var(--t2);border-bottom:1px solid var(--line);padding-bottom:8px}
.c-center{text-align:center}
.c-points{margin:0;padding-left:18px;font-size:13px;color:var(--t2);line-height:1.7}
.c-rule{margin:0;font-size:13px;color:#334155;line-height:1.75}
.c-addr{margin:0;font-size:14px}
.cust .sumtable{background:none;border:0;border-radius:0;border-collapse:collapse;padding:0}
.cust .sumtable tr:last-child td{border-bottom:1px solid var(--line)}
.cust .sumtable td:last-child{word-break:break-word}

/* C00 はじめの画面 */
.c-intro{margin:-16px -16px 0;padding:22px 16px 18px;border-bottom:1px solid var(--line)}
.c-intro.sky{background:var(--sky-weak)}
.c-intro h1{font-size:22px;line-height:1.5;margin:4px 0 8px}
.c-intro p{margin:0;font-size:13px;color:var(--t2)}
.c-tasks{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.c-tasks a{display:grid;grid-template-columns:30px 1fr 16px;gap:12px;align-items:center;padding:14px 14px;border-bottom:1px solid var(--line)}
.c-tasks a:last-child{border-bottom:0}
.c-tasks a:active{background:var(--bg)}
.c-tasks .ico.lg{stroke:var(--navy)}
.c-tasks b{display:block;font-weight:500;font-size:16px;color:var(--navy);line-height:1.4}
.c-tasks small{display:block;font-size:12px;color:var(--t2);line-height:1.5}
.c-tasks a>.ico:last-child{color:var(--t3)}
.c-sublink{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--navy);padding:2px 2px}
.c-sublink .ico:last-child{margin-left:auto;color:var(--t3)}

/* C01 */
.c-lineguide{text-align:center;padding:12px 0 4px;color:var(--navy)}
.c-lineguide h1{font-size:20px;line-height:1.5;margin:8px 0 12px}
.c-lineguide ul{text-align:left;margin:0;padding-left:20px;font-size:14px;color:var(--t1);line-height:1.8}

/* 学校・品物・予約の一覧 */
.schools a{gap:10px}
.schools a span{display:flex;align-items:center;gap:4px;white-space:nowrap}
.schools a .ico{color:var(--t3)}
.c-items{border-top:1px solid var(--line)}
.c-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line)}
.c-item .n{font-size:15px;line-height:1.45;min-width:0}
.c-item .n small{display:block;font-size:12px;color:var(--t2)}
.c-item .r{display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap;font-size:14px}
.c-item .r .ico{color:var(--t3)}
.c-items .c-item .r:has(.ico){flex-direction:row;align-items:center;gap:6px}
.mk{font-size:12px;color:var(--t2)}
.mk.low{color:var(--warn)}
.mk.out{color:var(--t3)}
.c-box{display:grid;grid-template-columns:30px 1fr;gap:10px;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;background:var(--bg)}
.c-box .ico.lg{stroke:var(--navy)}
.c-box b{font-weight:500;font-size:15px;color:var(--navy)}
.c-box p{margin:2px 0 8px;font-size:13px;color:var(--t2)}

/* C12 品物とサイズ */
.c-photo{height:200px;margin:-16px -16px 0;border-radius:0}
.c-prod .sc{font-size:12px;color:var(--t2)}
.c-prod h1{margin:2px 0 2px;font-size:19px;font-weight:500;line-height:1.45}
.c-prod .pr{font-size:17px}
.c-prod .pr small{font-size:12px;color:var(--t2);margin-left:2px}
.c-prod .help{margin:4px 0 0}
.c-sizes button{min-width:60px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;color:var(--t1)}
.c-sizes button small{font-size:10px;color:var(--t2);margin-top:2px}
.c-sizes button.low small{color:var(--warn)}
.c-sizes button.out{background:var(--band);border-color:var(--band);color:var(--t3)}
.c-sizes button.out small{color:var(--t3)}
.c-sizes button.sel,.c-sizes button.sel small{background:var(--navy);border-color:var(--navy);color:#fff}
/* サイズで価格が違う品：ボタンに表示名・価格・在庫の3段 */
.c-sizes.priced{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.c-sizes.priced button{height:auto;min-height:62px;padding:6px 4px}
.c-sizes button em{font-style:normal;font-size:12px;color:var(--t2);margin-top:2px}
.c-sizes button.out em{color:var(--t3)}
.c-sizes button.sel em{color:#fff}
/* 体操服のお買い上げプレゼントの案内（C11） */
.c-gift{margin:0 0 12px}
.c-gift .ico.lg{stroke:var(--navy)}
.c-gift ul{margin:4px 0 0;padding:0;list-style:none;font-size:13px;color:var(--t2);line-height:1.6}
.c-gift li+li{margin-top:2px}
.c-state{font-size:14px}
.c-qtyrow{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--t2)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.qty button{width:36px;height:34px;border:0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.qty button[disabled]{color:var(--line2);cursor:default}
.qty span{min-width:30px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:34px}
.c-guide{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font-size:13px}
.c-guide summary{cursor:pointer;color:var(--t1)}
.c-guide table{margin-top:6px}
.c-guide td:first-child{width:30%}
.c-guide .help{margin:6px 0 0}
.c-cartlink{display:flex;align-items:center;gap:8px;font-size:14px;border-top:1px solid var(--line);padding-top:12px}
.c-cartlink span{margin-left:auto;color:var(--sky);display:flex;align-items:center}

/* C13 かご */
.c-timer{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#334155;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:9px 12px}
.c-timer .ico{margin-top:3px;color:var(--t2)}
.c-timer b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--t1)}
.c-lines{border-top:1px solid var(--line)}
.c-line{display:flex;justify-content:space-between;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line)}
.c-line .n{font-size:15px;line-height:1.45;min-width:0}
.c-line .n small{display:block;font-size:12px;color:var(--t2)}
.c-line .r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
.c-line .r b{font-weight:500}
.c-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--t2);text-align:center;font-size:14px}
.c-empty .ico{color:var(--t3)}
.c-empty p{margin:0}

/* C14 受け取りの日 */
.c-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.c-days .wd{font-size:11px;color:var(--t3);padding:2px 0}
.c-days .wd.sat{color:var(--sky)}
.c-days .wd.sun{color:var(--ng)}
.c-days button{height:40px;border:1px solid var(--line2);border-radius:var(--r-sm);background:#fff;cursor:pointer;font-size:13px;color:var(--t1);padding:0;font-variant-numeric:tabular-nums}
.c-days button.sel{background:var(--navy);border-color:var(--navy);color:#fff}
.c-days .off{height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--t3);background:var(--band);border-radius:var(--r-sm);line-height:1.2}
.c-days .off small{font-size:10px}
.choice{margin:0}
.choice[disabled]{opacity:.5;cursor:default}

/* C16・C17 */
.c-amount{font-size:26px;font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
.c-done{text-align:center;padding:8px 0 2px;color:var(--navy)}
.c-done h1{font-size:20px;line-height:1.5;margin:6px 0 8px}
.c-done .no{display:inline-flex;flex-direction:column;border:1px solid var(--line2);border-radius:var(--r);padding:6px 18px;font-size:20px;letter-spacing:.06em;color:var(--t1);font-variant-numeric:tabular-nums}
.c-done .no small{font-size:11px;color:var(--t2);letter-spacing:0}
.c-done .help{margin:0}

/* C25 採寸の枠 */
.c-mslots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.c-mslots button{height:52px;border:1px solid var(--line2);border-radius:var(--r-sm);background:#fff;cursor:pointer;font-size:14px;color:var(--t1);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.3;font-variant-numeric:tabular-nums}
.c-mslots button small{font-size:10px;color:var(--t2)}
.c-mslots button[disabled]{background:var(--band);border-color:var(--band);color:var(--t3);cursor:default}

/* C30・C31 水素サロン */
.c-menus{display:flex;flex-direction:column;gap:8px}
.menu[disabled]{opacity:.55;cursor:default}
.menu .p{font-variant-numeric:tabular-nums}
.c-weekwrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.c-week{min-width:320px}
.c-week .h{line-height:1.3}
.c-week .h.sun{color:var(--ng)}
.c-week .h.tm{text-align:right;padding-right:4px;font-variant-numeric:tabular-nums;align-self:center}
.wk span{font-size:13px}
.wk button{display:inline-flex;align-items:center;gap:2px;font-size:12px}
.wk button[disabled]{opacity:.4;cursor:default}

/* C41・C50・C60・C90 */
.btn.c-danger{color:var(--ng);border-color:#fecaca}
.c-stars button{color:var(--line2);font-size:0;padding:4px}
.c-stars .ico{width:36px;height:36px;stroke-width:1.2}
.c-stars button.on{color:var(--navy)}
.c-stars button.on .ico{fill:var(--navy)}
.c-toc{display:flex;flex-direction:column;gap:2px;font-size:13px}
.c-toc a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}
.c-trouble{padding:20px 0 4px}
.c-trouble h1{margin:0 0 6px;font-size:20px;font-weight:500;color:var(--t1)}
.c-trouble p{margin:0;font-size:14px;color:var(--t2)}

/* 下の帯（スマホの幅でも2つが並ぶように） */
.cust .actionbar{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.cust .actionbar .btn{flex:0 0 auto}
.cust .actionbar .s{min-width:0}
@media (max-width:380px){
  .cust .actionbar .btn{padding:0 14px;font-size:14px}
  .c-sizes button{min-width:54px}
}
.cust .sumtable b,.cust .c-item b{font-weight:500}

/* 予約の2つの道（C11：すぐ予約／来店して試着） */
.c-routes{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:12px}
.c-routes a{display:grid;grid-template-columns:30px 1fr 16px;gap:12px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}
.c-routes a:last-child{border-bottom:0}
.c-routes a:active{background:var(--bg)}
.c-routes .ico.lg{stroke:var(--navy)}
.c-routes b{display:block;font-weight:500;font-size:16px;color:var(--navy);line-height:1.4}
.c-routes small{display:block;font-size:12px;color:var(--t2);line-height:1.5}
.c-routes a>.ico:last-child{color:var(--t3)}

/* ココスポーツ 本番：店の画面（S00〜S08）・運営ボード（B01〜B07）
   スマホ（お母さん）が先。900px より広いと左に一覧を出す。角丸は大12・中8・小6（base.css の --r-lg / --r / --r-sm）
   色は紺（--navy）と淡い青（--sky）だけ。注意は文字の色（--warn）と、行をごく薄く塗る（--warn-weak）だけ */
.area-s,.area-b{background:var(--bg);min-height:100vh}
.sp{display:block;min-height:100vh}
.snav{display:none}
.smain{padding:0 12px 92px;display:flex;flex-direction:column;gap:12px;min-width:0;font-size:14px;line-height:1.6}
.shd{position:sticky;top:0;z-index:20;background:var(--bg);margin:0 -12px;padding:10px 12px 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.shd h1{margin:0;font-size:17px;font-weight:500;color:var(--t1)}
.shd .sub{font-size:12px;color:var(--t2)}
.shd .r{margin-left:auto}
.sbrand{font-size:14px;color:var(--navy);letter-spacing:.08em;padding:4px 10px 10px;font-weight:500}
.sbrand small{display:block;font-size:11px;color:var(--t3);letter-spacing:0;font-weight:400}

/* 下に固定の切り替え（スマホ） */
.stab{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.stab a{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0 8px;font-size:11px;color:var(--t2);position:relative}
.stab a .ico{width:22px;height:22px;stroke-width:1.6}
.stab a.on{color:var(--navy)}
.stab a.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;background:var(--navy);border-radius:0 0 2px 2px}
.area-s~.devdock,.area-b~.devdock{bottom:68px}

/* ボードの上の切り替え（スマホ） */
.btabs{display:flex;gap:4px;overflow-x:auto;margin:0 -12px;padding:0 12px 2px;scrollbar-width:none}
.btabs::-webkit-scrollbar{display:none}
.btabs a{flex:0 0 auto;padding:6px 12px;border-radius:var(--r);border:1px solid transparent;color:var(--t2);font-size:13px;white-space:nowrap}
.btabs a.on{border-color:var(--line2);background:#fff;color:var(--t1)}
.bd .smain{padding-bottom:40px}

@media (min-width:900px){
  .sp{display:grid;grid-template-columns:208px 1fr}
  .snav{display:flex;flex-direction:column;gap:2px;background:#fff;border-right:1px solid var(--line);padding:14px 8px;position:sticky;top:0;height:100vh;overflow:auto}
  .snav .g{font-size:11px;color:var(--t3);padding:12px 10px 4px}
  .snav a{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 10px;border-radius:var(--r);color:var(--t2);font-size:13px}
  .snav a.on{background:var(--band);color:var(--t1)}
  .stab,.btabs,.only-sp{display:none}
  .smain{padding:0 24px 48px;font-size:13px}
  .shd{margin:0 -24px;padding:14px 24px 10px}
  .shd h1{font-size:18px}
  .area-s~.devdock,.area-b~.devdock{bottom:12px}
  .fgrid{grid-template-columns:1fr 1fr}
}

/* ログイン（S00） */
.slogin{max-width:420px;margin:0 auto;padding:56px 20px;display:flex;flex-direction:column;gap:14px;font-size:14px}
.slogin .sbrand{padding:0;font-size:16px}
.slogin h1{margin:0;font-size:18px;font-weight:500}
.gbtn{min-height:44px}

/* 一覧の行 */
.card h2 .cnt{font-weight:400;color:var(--t3);margin-left:6px;font-size:12px}
.card .h2r{gap:8px}
.card .h2r h2{flex:1}
.li{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li:first-child{padding-top:2px}
.li.click{cursor:pointer}
.li.click:hover .nm,.li.click.on .nm{color:var(--navy)}
.li.bad{background:var(--warn-weak);margin:0 -14px;padding-left:14px;padding-right:14px}
.li.sat .nm{color:var(--sky)}
.lm{flex:1;min-width:0}
.lm .nm{color:var(--t1)}
.lm .tm{font-variant-numeric:tabular-nums;color:var(--t1);margin-right:8px}
.lm .idx{font-size:11px;color:var(--t3);margin-left:8px}
.ls{font-size:12px;color:var(--t2);margin-top:2px;line-height:1.55}
.la{flex:0 0 auto;display:flex;gap:6px;align-items:center}
.t2s{font-size:12px;color:var(--t2);margin-left:6px}
p.t2s,div.t2s{margin:0}
.lm>.t2s:first-child{margin-left:0}
.ul{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.ul.sm{font-size:12px;margin-left:6px}
.ul .ico{vertical-align:-3px}
.chev{color:var(--t3)}
.empty{min-height:56px}
.sumline b{font-size:16px}

/* ボタン（スマホで押しやすく） */
.smain .bbtn{height:40px}
.smain .bbtn.sm{height:34px}
.bbtn[disabled]{background:var(--line);border-color:var(--line);color:var(--t3);cursor:default}
.bbtn .ico{width:15px;height:15px}
.row-r{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:4px}
.smain .submitbar{bottom:66px;z-index:10;flex-wrap:wrap}
.smain .submitbar .what{flex:1;min-width:120px}
.smain .submitbar .grow{flex:1 1 180px}
.bd .smain .submitbar{bottom:12px}
@media (min-width:900px){.smain .submitbar{bottom:12px}}

/* 日付の行き来 */
.dnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dnav b{font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}
.dnav .bbtn.sm{width:34px;padding:0;justify-content:center}
.tabs.xs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tabs.xs::-webkit-scrollbar{display:none}
.tabs a{white-space:nowrap}
.tabs a .cnt{color:var(--t3);font-size:11px;margin-left:2px}

/* 入力 */
.frm{display:flex;flex-direction:column;gap:12px}
.fgrid{display:grid;grid-template-columns:1fr;gap:12px}
.fgrid .field:has(textarea){grid-column:1/-1}
.sbox{display:flex;gap:8px;align-items:center}
.sbox .inp{flex:1}
.sbox .bbtn{height:46px}
.wdays{display:flex;gap:4px 14px;flex-wrap:wrap;margin-bottom:10px}
.wdays .chk{font-size:14px}
.chkrow{padding:8px 0;border-bottom:1px solid var(--line)}
.chkrow:last-child{border-bottom:0}
.addrow{margin-top:10px}
details.rules{padding:8px 12px}
details.rules[open]{padding-bottom:12px}
details.rules.frm{gap:0}
details.rules.frm[open]>summary{margin-bottom:10px}
details.rules.frm>*+*:not(summary){margin-top:10px}
details.rules summary{font-size:13px}
details.txt summary{cursor:pointer;color:var(--t2);font-size:12px}
details.txt div{margin-top:4px;padding:8px 10px;background:var(--bg);border-radius:var(--r-sm);color:var(--t1);font-size:12px}
.bizwrap .sumtable{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);border-collapse:separate;border-spacing:0;padding:2px 14px}
.bizwrap .sumtable tr:last-child td{border-bottom:0}
.bizwrap .sumtable td{font-size:14px}
.bizwrap .sumtable .t2s{margin-left:0;margin-top:2px}

/* サロンの時刻（S03） */
.sslots{grid-template-columns:repeat(4,1fr);margin-top:8px}
.sslots .slot{display:flex;flex-direction:column;align-items:center;line-height:1.25;padding:5px 0}
.sslots .slot small{font-size:11px;color:var(--t2)}
.sslots .slot.sel small{color:#fff}
.sslots .slot.x small{color:var(--t3)}
@media (min-width:600px){.sslots{grid-template-columns:repeat(6,1fr)}}

/* カレンダー（S02） */
.scal{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.scal>a.b,.scal>div.b{display:block;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:3px 5px;font-size:11px;white-space:normal;overflow:hidden;line-height:1.35}
.scal>a.b{background:var(--sky-weak);color:var(--navy);border-left:2px solid var(--navy)}
.scal>a.b.done{background:#fff;color:var(--t2);border-left-color:var(--line2)}
.scal>a.b.blk{background:var(--band);color:var(--t2);border-left:2px solid var(--line2)}
.scal .b .mn{color:var(--t2)}
.scal .b.closed{display:flex;align-items:center;justify-content:center}
.scal .hh{padding:5px 4px}

/* 在庫（S05） */
.pcard{padding:10px 12px}
.pcard h2{font-size:14px}
table.t.mini th,table.t.mini td{padding:7px 6px}
table.t.mini th{font-size:11px}
table.t th.n{text-align:right}
table.stk tr[data-act]{cursor:pointer}
table.stk tr[data-act]:hover td{background:var(--bg)}
table.stk tr.sel td{background:var(--sky-weak)}
table.stk td b{font-weight:500;color:var(--navy)}
.sedit{border-color:var(--navy)}
.pv{display:grid;grid-template-columns:1fr;gap:4px;background:var(--bg);border-radius:var(--r);padding:10px 12px;font-size:14px}
.pv b{font-weight:500;font-size:18px;margin:0 4px;font-variant-numeric:tabular-nums}
.pv .t2s{margin-left:2px}

/* お知らせの残り（S07） */
.qbox .l{font-size:12px;color:var(--t2)}
.big{font-size:40px;font-weight:500;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--t1)}
.big small{font-size:14px;color:var(--t2);margin-left:4px;font-weight:400}
.meter{height:6px;background:var(--band);border-radius:999px;overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;background:var(--navy);border-radius:999px}

/* そのほか・設定の入口 */
.mlist{padding:0 14px}
.mlist a{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);color:var(--t1);font-size:14px}
.mlist a:last-child{border-bottom:0}
.mlist a>span{flex:1;min-width:0}
.mlist a small{display:block;font-size:12px;color:var(--t2)}
.mlist a>.ico:first-child{width:20px;height:20px;color:var(--navy)}

/* 運営ボード */
.bd .kpi .v{font-size:20px}
.bd .kpi .d{font-size:11px;color:var(--t2)}
.stkbar{width:100%;max-width:46px;display:flex;flex-direction:column;border-radius:4px 4px 0 0;overflow:hidden}
.stkbar i{display:block;width:100%;background:var(--navy)}
.stkbar i.sky{background:var(--sky)}
.lg{display:flex;gap:14px;font-size:11px;color:var(--t2);margin-top:6px}
.lg i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--navy);margin-right:4px;vertical-align:-1px}
.lg i.sky{background:var(--sky)}
.cols .c span,.colx span{white-space:nowrap}
.v3{font-size:20px;font-weight:500;margin-right:2px;font-variant-numeric:tabular-nums}
.three{display:grid;grid-template-columns:1fr;gap:12px}
.three .l{font-size:13px;color:var(--t2)}
ul.plain{margin:0;padding-left:18px;color:var(--t2);font-size:13px}
.note-ex{margin:6px 0 0;font-size:11px;color:var(--t2)}
@media (min-width:900px){.three{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){
  .bars .row{grid-template-columns:96px 1fr 44px}
  .bd .kpis{grid-template-columns:1fr 1fr}
  .bd .grid2{grid-template-columns:1fr}
  .cols{gap:6px}.colx{gap:6px}
  table.t th,table.t td{padding-left:5px;padding-right:5px}
}


/* 予約の記録（S03 変える） */
.hist{list-style:none;margin:8px 0 0;padding:0;font-size:12px;color:var(--t2)}
.hist li{padding:4px 0;border-bottom:1px solid var(--line)}
/* S08 お買い上げプレゼントの案内：文が数行あるので欄を高く */
#cpf textarea{min-height:150px}

/* ココスポーツ 本番：試しのLINEのトーク画面（#/l。試しの形だけ）
   LINEのトークの見え方に寄せる（淡い青の地、店は白・自分は緑の吹き出し、下にリッチメニュー大・6分割） */
.cust.ln{height:100vh;height:100dvh;min-height:0;overflow:hidden;background:#a9bfd9;line-height:1.6}
.ln-hd{display:flex;align-items:center;gap:6px;padding:0 10px;height:52px;background:#26324a;color:#fff;flex:0 0 auto}
.ln-back{display:flex;align-items:center;justify-content:center;width:36px;height:44px;color:#fff}
.ln-back .ico{width:20px;height:20px}
.ln-name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ln-name b{font-weight:500;font-size:15px}
.ln-name small{font-size:11px;color:#c7d0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-clear{color:#c7d0e0;font-size:11px;white-space:nowrap}

.ln-talk{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 10px 16px;display:flex;flex-direction:column;gap:10px}
.ln-sys,.ln-day{align-self:center;max-width:90%;background:rgba(30,41,59,.28);color:#fff;font-size:11px;border-radius:999px;padding:2px 12px;text-align:center}
.ln-sys{border-radius:var(--r);padding:4px 12px}
.ln-row{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.ln-row.me{justify-content:flex-end}
.ln-av{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;align-self:flex-start}
.ln-bub{max-width:76%;padding:8px 12px;border-radius:16px;font-size:14px;word-break:break-word;overflow-wrap:anywhere;color:#111827}
.ln-bub.shop{background:#fff;border-top-left-radius:4px}
.ln-bub.me{background:#a3e39b;border-top-right-radius:4px}
.ln-bub a{color:#0b63c5;text-decoration:underline;text-underline-offset:2px}
.ln-tm{font-size:10px;color:#3b4a63;flex:0 0 auto}
.ln-tag{font-size:10px;color:#3b4a63;flex:0 0 auto;align-self:flex-end;white-space:nowrap}
.ln-row.shop .ln-tm+.ln-tag{margin-left:-2px}
.ln-row.shop{flex-wrap:nowrap}

.ln-foot{flex:0 0 auto;background:#fff;border-top:1px solid var(--line)}
.ln-hint{font-size:11px;color:var(--t2);padding:6px 10px 0;line-height:1.5}
.ln-input{display:flex;gap:6px;padding:6px 10px 8px}
.ln-input .inp{flex:1;min-width:0;height:40px;margin:0;border-radius:999px;padding:0 14px}
.ln-input .btn{height:40px;flex:0 0 auto}

/* リッチメニュー（2500×1686 と同じ比率、3列×2段） */
.ln-menu{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);aspect-ratio:2500/1686;border-top:1px solid var(--line);background:var(--line);gap:1px}
.ln-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fff;color:var(--navy);border:0;padding:4px 2px;text-align:center;cursor:pointer;min-width:0}
.ln-tile .ico.lg{width:30px;height:30px;stroke-width:1.5;margin-bottom:4px}
.ln-tile b{font-weight:500;font-size:14px;line-height:1.3}
.ln-tile small{font-size:9.5px;color:var(--t2);line-height:1.3;letter-spacing:-.02em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ln-tile.pink{background:#fdf0f4}
.ln-tile.navy{background:#0c1e46;color:#fff}
.ln-tile.navy small{color:#c8d2e6}
.ln-tile:active{filter:brightness(.95)}
.ln-bar{display:block;width:100%;height:36px;border:0;border-top:1px solid var(--line);background:#fff;color:var(--t2);font-size:13px;cursor:pointer}
@media (max-width:360px){.ln-tile b{font-size:12px}.ln-tile small{display:none}}