:root{--bg:#f5f4f1;--sf:#fff;--sub:#faf9f7;--ln:#e4e2dc;--ln2:#eeece8;--ink:#1b1f1e;--ink2:#3a403e;--mu:#646b68;--fa:#7a817e;
--ac:#1f6b5c;--ac-bg:#e8f2ef;--pri:#1f2a27;--pri-h:#33413d;--ok:#1f6b5c;--ok-bg:#e8f2ef;--info:#2f5d9a;--info-bg:#edf2f9;--gray-bg:#f1f0ec;
--cut:#1f6b5c;--color:#a35a12;--perm:#2f5d9a;--tr:#5f6b2a}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100%}
.side{position:sticky;top:0;align-self:start;height:100vh;background:#1f2a27;color:#d8ded9;display:flex;flex-direction:column;padding:14px 12px}
.brand{display:flex;gap:10px;align-items:center;padding:4px 6px 16px;border-bottom:1px solid #34413d}
.brand .mark{background:#2d7a69}
.brand b{display:block;color:#fff;font-size:14px}.brand span{font-size:11.5px;color:#a3aea9}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.nav button{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border:0;background:none;color:#c4ccc8;border-radius:6px;font-size:13px;font-weight:600;text-align:left}
.nav button span{flex:1}
.nav button:hover{background:#2a3733;color:#fff}
.nav button[aria-pressed="true"]{background:#2f3d39;color:#fff;box-shadow:inset 2px 0 0 #6fc2ad}
.nav .c{background:#3a4a45;color:#cfe3dc}
.side-foot{margin-top:auto;border:1px solid #34413d;border-radius:7px;padding:11px 12px;font-size:12px}
.sf-l{color:#a3aea9}.sf-v{color:#fff;margin:2px 0 8px}.sf-v b{font-size:18px}
.side-foot .meter{background:#34413d;height:4px}.side-foot .meter b{background:#6fc2ad}
.sf-n{color:#a3aea9;margin-top:8px;font-size:11.5px}
.body{min-width:0}
.top-in{max-width:none}
main{max-width:none}
.when{display:flex;align-items:center;gap:4px;font-size:15px}
.when b{padding:0 6px;white-space:nowrap}
.search{display:flex;align-items:center;gap:7px;height:34px;border:1px solid var(--ln);border-radius:7px;padding:0 10px;color:var(--fa);font-size:12.5px;width:240px;background:var(--sub)}

/* カレンダー */
.calwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}
.cal{overflow:hidden}
.grid{margin-top:12px;border-top:1px solid var(--ln)}
.gh,.gb{display:grid;grid-template-columns:56px repeat(4,1fr)}
.gh{border-bottom:1px solid var(--ln);background:var(--sub)}
.gs{display:flex;align-items:center;gap:9px;padding:9px 10px;border-left:1px solid var(--ln2);min-width:0}
.gs b{display:block;font-size:13px;white-space:nowrap}.gs span{font-size:11.5px;color:var(--mu);white-space:nowrap}
.gb{position:relative;height:780px}
.gt{display:flex;flex-direction:column}
.gb .gt .hr{flex:1;font-size:11px;color:var(--fa);text-align:right;padding:0 8px;transform:translateY(-7px)}
.gb .gt .hr:first-child{transform:none;padding-top:2px}
.col{position:relative;border-left:1px solid var(--ln2);display:flex;flex-direction:column}
.cell{flex:1;border-bottom:1px solid var(--ln2)}
.cell:nth-child(odd){background:linear-gradient(transparent 49.5%,#f4f3ef 49.5%,#f4f3ef 50.5%,transparent 50.5%)}
.ev{position:absolute;left:4px;right:4px;border:0;border-radius:5px;padding:5px 8px;text-align:left;display:flex;flex-direction:column;gap:0;overflow:hidden;font-size:12px;line-height:1.35;border-left:3px solid;transition:box-shadow .12s}
.ev:hover{box-shadow:var(--sh2)}
.ev .et{font-size:11px;color:var(--mu)}
.ev b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .em{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .eic{position:absolute;right:6px;top:5px;display:flex;gap:3px;color:var(--mu)}
.ev .eic .warn{color:var(--color)}
.m-cut.ev{background:#e9f2ef;border-color:var(--cut)}.m-color.ev{background:#f8efe4;border-color:var(--color)}.m-perm.ev{background:#ebf0f8;border-color:var(--perm)}.m-tr.ev{background:#f0f2e5;border-color:var(--tr)}
.legend .m-cut{color:var(--cut)}.legend .m-color{color:var(--color)}.legend .m-perm{color:var(--perm)}.legend .m-tr{color:var(--tr)}
.legend span{color:var(--mu)}.legend span i{background:currentColor}
.legend .m-cut i{background:var(--cut)}.legend .m-color i{background:var(--color)}.legend .m-perm i{background:var(--perm)}.legend .m-tr i{background:var(--tr)}
.ev.st-done{opacity:.82}
.ev.st-now{box-shadow:inset 0 0 0 1px var(--ac)}
.ev.on{box-shadow:0 0 0 2px var(--ink);opacity:1;z-index:2}
.now{position:absolute;left:56px;right:0;height:0;border-top:1.5px solid #c2410c;z-index:3;pointer-events:none}
.now span{position:absolute;left:-52px;top:-9px;background:#c2410c;color:#fff;font-size:10.5px;font-weight:600;border-radius:4px;padding:0 5px;line-height:17px}
.now::before{content:"";position:absolute;left:-4px;top:-4.5px;width:7px;height:7px;border-radius:50%;background:#c2410c}

.detail{position:sticky;top:70px}
.who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.who b{font-size:15px}
.avatar{background:#5b6476}
.avatar.a-s1{background:#1f6b5c}.avatar.a-s2{background:#2f5d9a}.avatar.a-s3{background:#a35a12}.avatar.a-s4{background:#5b6476}
.avatar.big{width:42px;height:42px;font-size:16px;background:var(--ac)}
.detail .kv{padding:12px 0;border-top:1px solid var(--ln2);border-bottom:1px solid var(--ln2)}
.kv dd.jp{font-family:inherit}
.sec{margin-top:14px}
.sec-h{font-size:12px;font-weight:700;color:var(--mu);margin-bottom:8px}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:10px;position:relative;padding-bottom:10px}
.tl li:not(:last-child)::after{content:"";position:absolute;left:5px;top:14px;bottom:0;border-left:1px solid var(--ln)}
.tl-d{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--fa);margin-top:4px;flex:none;background:var(--sf)}
.tl li.ok .tl-d{background:var(--ac);border-color:var(--ac)}
.tl li.next .tl-d{border-color:var(--ac)}
.tl b{display:block;font-size:13px}.tl span{font-size:12px;color:var(--mu)}
.memo{margin:0;font-size:13px;color:var(--ink2);background:var(--sub);border:1px solid var(--ln2);border-radius:6px;padding:9px 11px;line-height:1.75}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}

/* カルテ */
.custwrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;align-items:start}
.clist .list{border-top:0}
.cl{width:100%;border:0;background:none;text-align:left}
.cl:hover{background:var(--sub)}
.cl.on{background:var(--ac-bg);box-shadow:inset 3px 0 0 var(--ac)}
.cn{flex:1;min-width:0}.cn b{display:block}.cn span{font-size:12px;color:var(--mu)}
.cdet{display:flex;flex-direction:column;gap:12px;min-width:0}
.cdet .g{margin:0}
.prof .who{margin-bottom:0}.prof .nm{font-size:17px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border:1px solid var(--ln2);border-radius:7px}
.stats>div{padding:10px 14px}.stats>div+div{border-left:1px solid var(--ln2)}
.stats span{display:block;font-size:12px;color:var(--mu)}.stats b{font:700 20px/1.3 var(--num)}.stats small{font-size:12px;margin-left:2px;color:var(--ink2)}
svg.plot .b0{fill:#c9dcd6}svg.plot .b0.hi{fill:var(--ac)}
.memo2{display:flex;gap:6px;align-items:center;margin:8px 0 0;font-size:12.5px;color:var(--mu)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* 回数券 */
.tgrid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
.rem{display:inline-flex;align-items:center;gap:6px}
.pips{display:inline-flex;gap:2px}.pips i{width:8px;height:12px;border-radius:2px;background:var(--ln)}.pips i.on{background:var(--ac)}
.warnc{color:var(--warn)}
.rules{border:1px solid var(--ln2);border-radius:7px}
.rule{display:flex;align-items:center;gap:12px;padding:10px 12px}
.rule+.rule{border-top:1px solid var(--ln2)}
.rule b{display:block;font-size:13px}.rule span{font-size:12px;color:var(--mu)}
.rule>div{flex:1}
.rt{font-size:12px;color:var(--ink2);white-space:nowrap}
.sw{width:32px;height:18px;border-radius:9px;background:#cfd3d1;position:relative;flex:none;cursor:pointer;transition:background .15s}
.sw i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.sw.on{background:var(--ac)}.sw.on i{left:16px}
.sw:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.msg{margin-top:12px;border:1px solid var(--ln2);border-radius:7px;overflow:hidden}
.msg-h{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--sub);border-bottom:1px solid var(--ln2);font-size:12px;font-weight:600;color:var(--ink2)}
.msg-h span{display:inline-flex;gap:6px;align-items:center}
.msg-b{padding:10px 12px;font-size:13px;line-height:1.7}
.msg-b p{margin:0 0 6px}.msg-b .lk{color:var(--info);display:flex;gap:5px;align-items:center;margin:0}
.chart-h{display:flex;justify-content:space-between;align-items:center;margin:16px 0 6px;font-size:12.5px}
.cs1{color:#9cc5ba}.cs2{color:var(--ac)}
svg.plot .s1{stroke:#9cc5ba}svg.plot .s1.ar{fill:#9cc5ba;opacity:.25}svg.plot .s2{stroke:var(--ac)}svg.plot .s2.dt{fill:var(--ac)}
svg.plot .s2.dt{stroke:#fff;stroke-width:1}

@media (max-width:1240px){.calwrap{grid-template-columns:minmax(0,1fr)}.detail{position:static}.tgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1000px){.app{grid-template-columns:1fr}.side{position:static;height:auto;padding:10px 12px}.brand{border:0;padding:0 2px 8px}.nav{flex-direction:row;margin:0;overflow-x:auto}.nav button{flex:none}.custwrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .nav{display:grid;grid-template-columns:auto auto 1fr;overflow:visible;gap:2px}.nav button{height:34px;padding:0 9px;font-size:12px;gap:6px;justify-content:center}.nav button svg.i{display:none}.nav .c{display:none}
  .when{font-size:14px}
  .top .btn.pri span{display:none}.top .btn.pri{width:34px;padding:0}
  .agenda{margin-top:12px;border-top:1px solid var(--ln)}
  .ag{display:flex;width:100%;align-items:center;gap:12px;border:0;border-bottom:1px solid var(--ln2);background:none;padding:10px 14px;text-align:left;border-left:3px solid}
  .ag.m-cut{border-left-color:var(--cut)}.ag.m-color{border-left-color:var(--color)}.ag.m-perm{border-left-color:var(--perm)}.ag.m-tr{border-left-color:var(--tr)}
  .ag.on{background:var(--ac-bg)}
  .at{font-size:13px;font-weight:600;width:40px}.at em{display:block;font-style:normal;font-weight:400;color:var(--fa);font-size:11.5px}
  .ab{flex:1;min-width:0}.ab b{display:block;font-size:13.5px}.ab span{font-size:12px;color:var(--mu);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stats{grid-template-columns:1fr 1fr}.stats>div:nth-child(3){border-left:0}.stats>div:nth-child(n+3){border-top:1px solid var(--ln2)}
  .clist{max-height:none}
  .legend{gap:10px}
}
.gs .avatar{color:#fff;font-size:12px}
@media (min-width:1001px){.app{background:linear-gradient(90deg,#1f2a27 232px,transparent 232px)}}

/* /services/ に iframe で埋め込んだとき（is-embedded）は vh を使わない */
.is-embedded .side{height:auto}