/* かけるくんシリーズ 共通スタイル（スマホの下メニュー・シート・カード） */
.topbar{display:none}
.tabbar{display:none}
.switch{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px dashed var(--border);border-radius:10px;color:var(--text);text-decoration:none;font-size:13px;margin-top:8px}
.switch:hover{border-color:var(--accent)}
.switch svg.chara{margin:-6px 0}
.install{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:2px solid var(--accent);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.install ol{margin:6px 0 10px;padding-left:1.3em;font-size:14px}
.install li{margin:3px 0}
.trial{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;border:1px dashed var(--accent);background:var(--soft);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:13px}
.cards{display:flex;flex-direction:column;gap:10px}
.jcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}
.jcard .top{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.jcard .top .grow{flex:1;min-width:0}
.jcard .t{font-weight:700;font-size:15px;line-height:1.4}
.jcard .amt{font-weight:800;font-size:17px;white-space:nowrap;text-align:right}
.jcard .acts{display:flex;flex-wrap:wrap;gap:6px}
.jcard .acts .btn{min-height:38px;font-size:13px}
.daylist{display:flex;flex-direction:column;gap:14px}
.day h3{margin:0 0 6px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
.day .items{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.day .it{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--border);cursor:pointer;width:100%;background:transparent;border-left:0;border-right:0;border-bottom:0;text-align:left;font:inherit;color:inherit}
.day .it:first-child{border-top:0}
.day .it:hover{background:var(--soft)}
.day .it .grow{flex:1;min-width:0}
.day .it .m{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day .it .a{font-weight:800;white-space:nowrap}
.catgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;grid-column:1/-1}
.catgrid button{min-height:52px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;font-size:12px;cursor:pointer;padding:4px;line-height:1.3}
.catgrid button.on{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:700}
.bigamt{grid-column:1/-1;display:flex;align-items:baseline;gap:6px;border-bottom:2px solid var(--accent);padding:4px 2px}
.bigamt input{flex:1;min-width:0;border:0;background:transparent;font-size:34px;font-weight:800;color:var(--text);outline:none;padding:0}
.bigamt span{font-size:18px;font-weight:700}
details.more{grid-column:1/-1;border:1px solid var(--border);border-radius:12px;padding:0 12px}
details.more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:14px;font-weight:700;color:var(--muted)}
details.more[open]{padding-bottom:12px}
details.more .form{margin-top:4px}
.sheetlist{display:flex;flex-direction:column;gap:8px}
.sheetlist .btn{justify-content:flex-start;min-height:52px;font-size:15px}
.desk-only{}
.mob-only{display:none}
@media (max-width:860px){
  .side{display:none!important}
  .app{flex-direction:column}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:15;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top))}
  .topbar b{font-size:16px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar a{display:flex;align-items:center;gap:4px;min-height:40px;padding:0 10px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--text);text-decoration:none;white-space:nowrap}
  .main{padding:16px 14px calc(96px + env(safe-area-inset-bottom))!important}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:18;background:var(--surface);border-top:1px solid var(--border);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:10.5px;cursor:pointer}
  .tabbar button svg{width:22px;height:22px}
  .tabbar button.on{color:var(--accent);font-weight:700}
  .tabbar .fab{position:relative}
  .tabbar .fab span.circle{width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;margin-top:-22px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
  .tabbar .fab span.circle svg{width:26px;height:26px}
  .modal-bg{align-items:flex-end!important;padding:0!important}
  .modal{border-radius:20px 20px 0 0!important;max-height:92vh;overflow-y:auto;padding:20px 16px calc(20px + env(safe-area-inset-bottom))!important}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))!important;max-width:calc(100% - 32px)}
  .head h1{font-size:21px}
  .head .btn.primary{display:none}
  .desk-only{display:none!important}
  .mob-only{display:block}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .kpi{padding:14px!important}
  .kpi .val{font-size:20px!important}
  .install{flex-direction:column;align-items:center;text-align:left}
  .toolbar>label{flex:1 1 100%!important;max-width:none!important;min-width:0!important}
  .search{min-width:0!important;width:100%;max-width:none!important}
  .day .it{padding:10px 12px}
}
@media (display-mode: standalone){.install{display:none!important}}
/* 長い選択肢や表で画面が横に広がらないようにする */
.form>*,.field{min-width:0}
.field select,.field input,.field textarea{width:100%;max-width:100%;min-width:0;text-overflow:ellipsis}
html,body{overflow-x:hidden}@supports (overflow-x:clip){html,body{overflow-x:clip}}
.main{min-width:0}
a.btn{color:inherit;text-decoration:none}
a.btn.primary{color:var(--ink)}