:root{
  --teal:#0ABAB5; --teal-dark:#0a827b; --teal-deep:#066f6a;
  --teal-tint:#e4f7f5; --teal-tint2:#c3ecea;
  --ink:#20303f; --sub:#5a6b78; --muted:#93a1ac;
  --line:#e5eaee; --line2:#eef2f5;
  --bg:#f3f6f8; --card:#ffffff;
  --gold:#b9791f; --gold-bg:#fbf1dd; --gold-line:#f0dcae;
  --green:#178a6b; --green-bg:#e5f4ee; --green-line:#cfe9de; --green-dot:#21a97f;
  --orange:#cf7a1f; --orange-bg:#fdeede; --orange-line:#f6d9b0; --orange-dot:#f2923a;
  --red:#cf4a44; --red-bg:#fbe9e8; --red-line:#f2d3d0; --red-dot:#e0574f;
  /* ★ 取り消し・削除の色。var(--danger,#D64545) と書いた箇所が既にあり、
     定義が無いまま var(--danger) と書いた2か所（.rb-lnk.danger / .sb-btn.cancel）は
     宣言ごと無効になって色が付いていなかった。ここで一度だけ決める。 */
  --danger:#D64545;
  --purple:#7256c9; --purple-bg:#efeafb; --purple-line:#ddd3f5; --purple-dot:#8b6ff0;
  --shadow:0 1px 3px rgba(24,52,66,.06),0 6px 20px rgba(24,52,66,.05);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow-x:hidden;max-width:100%}
body{font-family:'Noto Sans JP',system-ui,sans-serif;font-weight:400;background:linear-gradient(160deg,#dfe7ea,#eef2f4 40%,#e4ecee);color:var(--ink);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.01em}
.phone{width:390px;height:844px;background:#000;border-radius:46px;padding:11px;box-shadow:0 40px 80px -20px rgba(16,40,52,.5),0 0 0 2px rgba(0,0,0,.4);position:relative}
.screen{width:100%;height:100%;background:var(--bg);border-radius:36px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:126px;height:30px;background:#000;border-radius:0 0 18px 18px;z-index:200}
.view{display:none;flex-direction:column;height:100%;animation:fade .28s ease}
.view.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:14px}
.scroll::-webkit-scrollbar{width:0}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
b,strong{font-weight:600}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink)}
.btn{width:100%;height:52px;border-radius:14px;font-weight:500;font-size:15.5px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 6px 16px -6px rgba(10,186,181,.7)}
.btn-primary:active{background:var(--teal-dark);transform:translateY(1px)}
.btn-primary:disabled{background:#c3ccd2;box-shadow:none}
.btn-ghost{background:#fff;color:var(--teal);border:1.5px solid var(--teal-tint2)}
.btn-ghost:active{background:var(--teal-tint)}
/* ★ 状態は一覧でいちばん見たいところ。
   ・角丸はやめて四角に（丸いと飾りに見えて、状態を表す札だと伝わりにくい）
   ・薄い地に中間色の文字だと弱いので、枠線を足して文字も濃くする */
.badge{display:inline-flex;align-items:center;height:25px;padding:0 10px;border-radius:0;
  font-size:12.5px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.b-confirmed{background:#E3F3EC;border-color:#93CDB4;color:#0F6B4F}
.b-tentative{background:#FCEFD8;border-color:#E0A94A;color:#8A5A00}
.b-cancelled{background:#F3EDED;border-color:#C9AFAF;color:#8A6060}
.req{color:#d98a3a;font-size:11px;font-weight:500;margin-left:5px}
.opt{color:var(--muted);font-size:11px;font-weight:500;margin-left:5px}

/* ============ APP HEADER + NAV ============ */
.app-header{background:linear-gradient(160deg,#a3e6e0,#7fd4cd);color:#0f3b37;padding:52px 18px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
/* 新規予約は入力が主役。見出し帯とステップを詰めて、
   入力できる範囲をできるだけ広く取る。 */
#new .app-header{padding-bottom:9px}
#new .pad{padding:14px 16px}
.hicon{position:relative;color:#0f3b37;display:flex}
.hicon .dot{position:absolute;top:-2px;right:-2px;width:8px;height:8px;background:#e0574f;border-radius:50%;border:1.5px solid #9fe1da}
.page-title{text-align:center;font-weight:600;font-size:17px;color:#0f3b37}
.tabbar{flex-shrink:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:flex-end;padding:8px 4px 22px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:10px;font-weight:400;padding-top:4px}
.tab svg{width:23px;height:23px}
.tab.active{color:var(--teal)}
.tab.center .fab{width:50px;height:50px;border-radius:16px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-24px;box-shadow:0 8px 18px -4px rgba(10,186,181,.6);border:3px solid #fff}
.tab.center span{margin-top:2px}

/* ============ TOP : LANDING ============ */
#top{background:var(--bg)}
.lhead{background:#fff;padding:46px 15px 12px;display:flex;align-items:center;gap:10px;flex-shrink:0;border-bottom:1px solid var(--line2);box-shadow:0 1px 6px rgba(24,52,66,.04);z-index:5}
.brand-logo{display:flex;align-items:center;gap:7px;flex-shrink:0}
.brand-logo .logo-img{height:34px;width:auto;display:block}
.brand-logo .bl1{font-size:17px;font-weight:700;color:var(--teal-dark);font-family:'DM Sans';letter-spacing:.01em;line-height:1}
.brand-logo .bl2{font-size:6px;font-weight:500;color:var(--teal);letter-spacing:.12em;margin-top:2px}
.lhead-mid{flex:1;min-width:0;border-left:1px solid var(--line);padding-left:10px}
.lhead-mid .lt1{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lhead-mid .lt2{font-size:10.5px;color:var(--sub);font-weight:400;margin-top:1px}
.burger{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0}
.burger:active{background:var(--line2)}

.lhero{position:relative;overflow:hidden;padding:16px 20px 15px;background:linear-gradient(160deg,#a3e6e0,#7fd4cd)}
.lhero .bgart{position:absolute;right:-6px;bottom:0;height:96%;opacity:.4;z-index:1;filter:brightness(0) invert(1)}
.lhero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(150,225,218,.92) 34%,rgba(150,225,218,.5) 62%,rgba(150,225,218,.1))}
.lhero h1,.lhero p{position:relative;z-index:2}
.lhero h1{font-size:21px;font-weight:700;color:#0f3b37;line-height:1.32;letter-spacing:.005em}
.lhero p{font-size:12px;color:#2c625d;margin-top:8px;font-weight:400}
.lhero.user{padding-bottom:20px;border-bottom-left-radius:18px;border-bottom-right-radius:18px}
.hero-greet{color:#0f3b37;position:relative;z-index:2}
.hero-greet .hg-l{font-size:11.5px;font-weight:500;color:#2c625d;letter-spacing:.04em}
.hero-greet .hg-n{font-size:24px;font-weight:700;line-height:1.3;margin-top:4px;letter-spacing:.02em;color:#0f3b37}
.hero-greet .hg-n small{font-size:13.5px;font-weight:600;margin-left:5px;opacity:.92}
.hero-greet .hg-c{font-size:11.5px;font-weight:500;color:#2c625d;margin-top:10px;line-height:1.7}

.pills{display:flex;gap:6px;padding:14px 12px 2px}
.pill{flex:1;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 2px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--ink);box-shadow:0 1px 2px rgba(24,52,66,.05);white-space:nowrap;letter-spacing:-.02em}
.pill .pdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pdot.green{background:var(--green-dot)}.pdot.orange{background:var(--orange-dot)}.pdot.red{background:var(--red-dot)}.pdot.purple{background:var(--purple-dot)}
.notice{margin:14px 14px 0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.notice-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--teal-dark);margin-bottom:5px}
.notice-head svg{width:15px;height:15px}
.notice-body{font-size:13px;font-weight:400;color:var(--ink);line-height:1.6;overflow:hidden;position:relative;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.notice-body .nflow{display:inline-flex;white-space:nowrap;animation:noticeFlow 18s linear infinite;will-change:transform}
.notice-body .nflow .grp{display:inline-flex}
.notice-body .nflow span{padding-right:56px}
.notice-body .nflow .grp span{padding-right:56px}
.notice:hover .notice-body .nflow,.notice:active .notice-body .nflow{animation-play-state:paused}
@keyframes noticeFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.notice-body .nflow{animation:none}}

.cal-card{position:relative;margin:14px;background:#fff;border-radius:16px;padding:4px 8px 6px;overflow:hidden;
  box-shadow:0 10px 24px -16px rgba(18,119,127,.5), 0 2px 8px -4px rgba(24,52,66,.14)}
/* グラデーションの縁取り */
.cal-card::before{content:'';position:absolute;inset:0;border-radius:16px;padding:1.6px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,#43c9bb,#9be3da 35%,#ffd79a 62%,#43c9bb);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background-size:220% 220%;animation:calEdge 7s ease-in-out infinite}
@keyframes calEdge{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion:reduce){.cal-card::before{animation:none}}
.cal-head2{position:relative;height:42px;display:flex;align-items:center}
.cal-head2 .cal-month{position:absolute;left:0;right:0;text-align:center;font-size:16.5px;font-weight:600;pointer-events:none}
.cal-head2 .l{position:absolute;left:4px}
.cal-head2 .r{position:absolute;right:4px;display:flex;align-items:center;gap:6px}
.chip-nav{width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--teal);background:var(--teal-tint)}
.chip-nav:active{background:var(--teal-tint2)}
.today-btn{border:1.5px solid var(--teal-tint2);color:var(--teal);font-size:12px;font-weight:600;padding:7px 12px;border-radius:9px}
.today-btn:active{background:var(--teal-tint)}
.adow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.adow span{text-align:center;font-size:10.5px;font-weight:500;color:var(--sub);padding:5px 0}
.adow .sun{color:#d0655d}.adow .sat{color:#4d86c4}
.agrid{display:grid;grid-template-columns:repeat(7,1fr)}
.acell{min-height:56px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);display:flex;flex-direction:column;align-items:center;padding:5px 2px;gap:3px;position:relative;min-width:0;overflow:hidden}
.acell:nth-child(7n){border-right:none}
.acell .dn{font-size:12px;font-weight:600;color:var(--ink);line-height:1}
.acell.sun .dn{color:#d0655d}.acell.sat .dn{color:#4d86c4}
.acell.hol .dn{color:#d0655d}/* 祝日は日曜と同じ赤（土曜より優先） */
.acell.muted{background:#fbfcfd}
.acell.muted .dn{color:#c6ced4}
.acell.past{background:#fbfcfd}
.acell.past .dn{color:#c6ced4}
.acell.today{background:var(--teal-tint)}
.acell.today .dn{color:var(--teal-dark)}
.acell.tapable:active{background:var(--teal-tint2)}
/* ログイン後：残り人数は数字を大きく、単位を小さく */
.acell .chip{display:flex;align-items:baseline;justify-content:center;gap:1px;font-weight:700;line-height:1;padding:3px 0 4px;border-radius:6px;width:calc(100% - 4px);max-width:100%;box-sizing:border-box;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:clip;border:1px solid transparent}
.acell .chip em{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:-.04em}
.acell .chip b{font-size:14px;font-weight:700;font-family:'DM Sans','Noto Sans JP',sans-serif;letter-spacing:0}
.acell .chip i{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:-.04em}
.acell .chip.word{font-size:10.5px;font-weight:700;letter-spacing:-.02em;padding:6px 0 7px}
.chip.green{background:var(--green-bg);color:#0f6b52;border-color:var(--green-line)}
.chip.orange{background:var(--orange-bg);color:#b3610f;border-color:var(--orange-line)}
.chip.red{background:var(--red-bg);color:#b83c36;border-color:var(--red-line)}
.chip.purple{background:var(--purple-bg);color:#5c42ab;border-color:var(--purple-line)}
/* 残り10名以上（10＋）：青。人数が十分にあることを一目で伝える */
.chip.plus{background:#e8f1fe;color:#1a5fd0;border-color:#bcd6f7}
/* 「＋」は数字より小さく（10＋・日別シートの帯も共通） */
.pl{font-size:.6em;font-weight:700;letter-spacing:-.05em}
.cal-note{display:none;align-items:center;justify-content:center;gap:7px;padding:11px 10px 13px;font-size:11px;color:var(--sub);font-weight:500;border-top:1px solid var(--line2)}
.cal-note .cn-k{display:inline-flex;align-items:baseline;gap:1px;background:var(--green-bg);border:1px solid var(--green-line);color:#0f6b52;border-radius:5px;padding:2px 6px 3px;font-weight:700}
.cal-note .cn-k em{font-style:normal;font-size:8px;font-weight:700}
.cal-note .cn-k b{font-size:13px;font-family:'DM Sans','Noto Sans JP',sans-serif}
.cal-note .cn-k i{font-style:normal;font-size:8px;font-weight:700}
.cal-note .cn-d{width:3px;height:3px;border-radius:50%;background:var(--muted)}
/* ○△✕ は細いと見分けづらいので、太らせて色も濃くする。
   ○△✕ は書体によって太字が用意されていないことがあるため、
   font-weight だけに頼らず text-stroke で線を太くしている。 */
.daysym{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:3px;
  font-size:20px; font-weight:800; line-height:1;
  -webkit-text-stroke:1px currentColor; paint-order:stroke fill;
}
.psym{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; line-height:1; flex-shrink:0;
  -webkit-text-stroke:.7px currentColor; paint-order:stroke fill;
}
.sym-blue  { color:#0F6FBF; }
.sym-yellow{ color:#B57A00; }
.sym-red   { color:#CE2318; }
.sym-purple{ color:#6B5AC4; }   /* 要相談 */
.sym-none  { color:transparent; }

.acell .mine{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--teal)}

.teal-cta{margin:12px 14px 0;background:linear-gradient(160deg,#d6f3f0,#c2ece7);border-radius:15px;padding:12px 14px;color:#0f3b37;box-shadow:0 8px 20px -12px rgba(10,186,181,.4)}
.tc-title{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:10px;text-align:center;color:#0f3b37}
.tc-btn{width:100%;height:46px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--teal-dark);font-weight:600;font-size:14px;box-shadow:0 6px 14px -6px rgba(0,0,0,.35);position:relative}
.tc-btn .chev{position:absolute;right:16px;color:var(--teal)}
.tc-btn:active{transform:translateY(1px)}
.tc-btn-img{display:none;width:100%;padding:0;border:0;background:none;line-height:0;-webkit-tap-highlight-color:transparent}
/* ほわーんほわーん：やわらかい光の明滅＋ゆっくり伸縮（縮膨）を同期 */
.tc-btn-img img{width:100%;height:auto;display:block;transform-origin:center;will-change:filter,transform;animation:tcHowan 2.8s ease-in-out infinite}
.tc-btn-img:active{transform:translateY(1px)}
@keyframes tcHowan{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,201,102,0));transform:scale(.985)}
  50%    {filter:drop-shadow(0 0 13px rgba(255,201,102,.85));transform:scale(1.03)}
}
@media (prefers-reduced-motion:reduce){.tc-btn-img img{animation:none}}

.contract-cta{margin:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 12px 11px;box-shadow:var(--shadow);text-align:left;display:flex;flex-direction:column;gap:8px;min-height:122px}
.ccard .cic{width:38px;height:38px;border-radius:11px;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center}
.ccard .crow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ccard .cttl{font-size:13.5px;font-weight:600;color:var(--ink)}
.ccard .cnew{font-size:9px;font-weight:600;color:#fff;background:var(--teal);padding:2px 6px;border-radius:6px;letter-spacing:.02em}
.ccard .csub{font-size:10.5px;color:var(--sub);font-weight:400;line-height:1.45}
.ccard .cgo{align-self:flex-end;margin-top:auto;color:var(--muted)}
.ccard:active{background:var(--teal-tint)}

.phone-cta{margin:6px 14px 6px;padding:18px;text-align:center}
.phone-cta .pc-t{font-size:13px;color:var(--sub);font-weight:500;margin-bottom:9px}
.phone-cta .pc-num{font-size:27px;font-weight:600;color:var(--teal-dark);font-family:'DM Sans';letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:9px}
.phone-cta .pc-s{font-size:12px;color:var(--muted);margin-top:7px}

.menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 6px;border-bottom:1px solid var(--line2);font-size:15px;font-weight:500;color:var(--ink)}
.menu-item:last-child{border-bottom:none}
.menu-item:active{background:var(--line2)}
.menu-item.danger{color:var(--red)}

/* ============ LOGIN ============ */
#login{background:#0a6e69;position:relative}
#login .bgwrap{position:absolute;inset:0;overflow:hidden}
#login .bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,120,115,.72),rgba(8,101,96,.92)),repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 46px)}
#login .road{position:absolute;bottom:0;left:0;right:0;height:46%;background:linear-gradient(180deg,transparent,rgba(6,80,76,.85))}
#login .lane{position:absolute;bottom:8%;left:50%;width:4px;height:36%;background:repeating-linear-gradient(180deg,rgba(255,220,150,.55) 0 18px,transparent 18px 40px);transform:translateX(-50%) perspective(120px) rotateX(52deg);transform-origin:bottom}
#login .inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 26px}
#login .back-top{position:absolute;top:52px;left:20px;z-index:5;color:#cdf1ef;font-size:13px;font-weight:400;display:flex;align-items:center;gap:4px}
.login-logo{width:220px;max-width:72%;height:auto;display:block;margin:0 auto 4px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}
.brand-h{text-align:center;color:#fff;font-weight:700;font-size:18px;letter-spacing:.13em;margin-bottom:5px}
.brand-s{text-align:center;color:#bdeeeb;font-size:12px;letter-spacing:.05em;margin-bottom:24px}
.login-card{background:rgba(255,255,255,.97);border-radius:20px;padding:22px 20px 24px;box-shadow:0 24px 50px -12px rgba(0,0,0,.4);
  width:100%;max-width:392px;margin-left:auto;margin-right:auto}
.field{margin-bottom:15px}
.field label{display:block;font-size:12px;font-weight:500;color:var(--sub);margin-bottom:7px}
.ipt{width:100%;height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;background:#fbfcfd;transition:.15s}
.ipt:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(10,186,181,.12)}
.pw-wrap{position:relative}
.pw-wrap .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);padding:6px}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub);margin:2px 0 18px}
.remember input{width:17px;height:17px;accent-color:var(--teal)}
.forgot{display:block;text-align:center;margin-top:16px;color:var(--teal);font-size:13px;font-weight:400}

/* ============ LIST ============ */
.seg{display:flex;background:#fff;border-bottom:1px solid var(--line);padding:0 8px}
.seg .s{flex:1;text-align:center;padding:13px 0 11px;font-size:13px;font-weight:500;color:var(--muted);position:relative}
.seg .s.active{color:var(--teal)}
.seg .s.active::after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:3px;border-radius:3px;background:var(--teal)}
.list-tools{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 4px}
.list-tools .sort,.list-tools .filter{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:400;color:var(--sub)}
.list-tools .filter{color:var(--teal)}
.lcard{background:#fff;margin:10px 16px;border-radius:14px;padding:15px;box-shadow:var(--shadow);border-left:4px solid var(--teal);display:flex;justify-content:space-between;align-items:center;gap:10px}
.lcard.tentative{border-left-color:var(--gold)}
.lcard.cancelled{border-left-color:var(--muted);opacity:.72}
.lcard .date{font-size:12px;font-weight:500;color:var(--sub);margin-bottom:5px}
.lcard .time{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:5px}
.lcard .ti{font-size:14.5px;font-weight:500;margin-bottom:3px}
.lcard .site{font-size:12px;color:var(--sub)}
.empty-note{background:#fff;border-radius:14px;padding:26px 16px;text-align:center;color:var(--muted);font-size:13px;box-shadow:var(--shadow)}
.today-card{position:relative;margin:12px 16px 18px;background:linear-gradient(140deg,#0ABAB5,#0a8f8a);border-radius:16px;padding:13px 15px;color:#fff;box-shadow:0 18px 34px -14px rgba(9,120,117,.75), 0 8px 16px -8px rgba(24,52,66,.28), inset 0 1px 0 rgba(255,255,255,.18);transform:translateZ(0)}
.today-card::after{content:'';position:absolute;left:9%;right:9%;bottom:-11px;height:16px;border-radius:50%;background:rgba(10,140,136,.34);filter:blur(9px);z-index:-1}
.today-card .tc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.today-card .tc-tag{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.today-card .tc-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.today-card .tc-badge{background:rgba(255,255,255,.22);font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:20px}
.today-card .tc-date{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.9)}
.today-card .tc-time{font-size:22px;font-weight:700;font-family:'DM Sans';letter-spacing:.01em;margin:0 0 4px}
.today-card .tc-site{font-size:14px;font-weight:600}
.today-card .tc-addr{font-size:11px;color:rgba(255,255,255,.85);margin-top:1px}
.today-card .tc-meta{margin-top:12px;background:#fff;border-radius:13px;padding:4px 12px;display:flex;flex-direction:column;
  box-shadow:0 10px 20px -10px rgba(3,60,58,.55), 0 3px 8px -4px rgba(3,60,58,.35);position:relative;z-index:1}
.today-card .tc-mrow{display:flex;gap:10px;font-size:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line2)}
.today-card .tc-mrow:last-child{border-bottom:none}
.today-card .tc-mi{width:26px;height:26px;border-radius:8px;background:var(--teal-tint);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.today-card .tc-mk{flex-shrink:0;font-weight:500;color:var(--sub);font-size:11px;width:52px}
.today-card .tc-mv{flex:1;min-width:0;font-weight:600;color:var(--ink);font-size:12.5px;text-align:right;word-break:break-all;line-height:1.5}
.today-card .tc-mv.num{font-family:'DM Sans';font-size:15px;font-weight:700;color:var(--teal-dark);letter-spacing:.02em}
.today-card .tc-detail{width:100%;margin-top:10px;height:40px;background:#fff;color:var(--teal-dark);border-radius:11px;font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:6px}
.today-card .tc-detail:active{transform:translateY(1px)}
.mo-summary{margin:12px 16px 2px;background:linear-gradient(135deg,#eafaf8,#dbf3ef);border:1px solid var(--teal-tint2);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.ms-head{font-size:12.5px;font-weight:600;color:var(--teal-dark);margin-bottom:11px;display:flex;align-items:center;gap:6px}
.ms-main{display:flex;align-items:center;gap:14px}
.ms-big{text-align:center;flex-shrink:0;min-width:82px}
.ms-big .mn{font-size:30px;font-weight:700;color:var(--teal-dark);line-height:1;font-family:'DM Sans'}
.ms-big .mn small{font-size:13px;font-weight:600}
.ms-big .ml{font-size:10px;color:var(--sub);font-weight:500;margin-top:4px}
.ms-split{flex:1;display:flex;flex-direction:column;gap:9px;border-left:1px solid var(--teal-tint2);padding-left:14px}
.ms-item{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--ink)}
.ms-item b{font-family:'DM Sans'}
.ms-item small{color:var(--muted);font-weight:400;font-size:10.5px;margin-left:auto}
.ms-item .dotc{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.dotc.confirmed{background:var(--green-dot)}
.dotc.tentative{background:var(--orange-dot)}
.dotc.cancelled{background:var(--muted)}
.sched-top{background:linear-gradient(135deg,#eafaf8,#dbf3ef);border:1px solid var(--teal-tint2);border-radius:14px;padding:14px 16px;display:flex;gap:14px;align-items:center;margin-bottom:16px}
.sched-top .st-big{text-align:center;min-width:84px}
.sched-top .stn{font-size:30px;font-weight:700;color:var(--teal-dark);font-family:'DM Sans';line-height:1}
.sched-top .stn small{font-size:13px;font-weight:600}
.sched-top .stl{font-size:10px;color:var(--sub);font-weight:500;margin-top:4px}
.sched-top .st-rows{flex:1;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--teal-tint2);padding-left:14px}
.st-r{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--ink)}
.st-r b{font-family:'DM Sans';margin-left:2px}
.st-r small{color:var(--muted);font-weight:400;margin-left:auto}
.st-r .dotc{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.sched-list-h{font-size:12.5px;font-weight:600;color:var(--sub);margin-bottom:6px}
.sched-row{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line2)}
.sched-row:last-child{border-bottom:none}
.sched-row:active{background:var(--teal-tint)}
.sched-row .sr-date{font-size:13px;font-weight:600;font-family:'DM Sans';color:var(--ink);width:54px;flex-shrink:0}
.sched-row .sr-date small{font-size:10px;color:var(--sub);font-weight:400;margin-left:1px}
.sched-row .sr-mid{flex:1;min-width:0}
.sched-row .sr-site{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-row .sr-sub{font-size:11px;color:var(--sub);margin-top:1px}
.btn-danger{background:#fff;color:var(--red);border:1.5px solid var(--red-line)}
.btn-danger:active{background:var(--red-bg)}
.btn-danger-solid{background:#d8443d;color:#fff;box-shadow:0 6px 14px -6px rgba(207,74,68,.6)}
.btn-danger-solid:active{background:#c23a34;transform:translateY(1px)}
.policy-note{background:var(--teal-tint);border-radius:11px;padding:11px 13px;font-size:11.5px;color:var(--teal-dark);font-weight:400;line-height:1.6;display:flex;gap:8px}
.policy-note svg{flex-shrink:0;margin-top:1px}
.policy-note.warn{background:var(--red-bg);color:#a53f39}
.policy-note.ok{background:var(--green-bg);color:var(--green)}
/* お待ちいただく系（YSSが訂正中など）。warn は赤で不具合に見えるため別に持つ */
.policy-note.info{background:var(--gold-bg);color:#8A5A00}

/* ============ NEW RESERVATION ============ */
.stepper{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px 7px;background:#fff}
.stepper .st{display:flex;flex-direction:column;align-items:center;gap:3px;width:72px}
.stepper .cir{width:26px;height:26px;border-radius:50%;background:#eef2f4;color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.stepper .st.active .cir{background:var(--teal);color:#fff}
.stepper .st.done .cir{background:var(--green);color:#fff}
.stepper .st .lb{font-size:10.5px;font-weight:500;color:var(--muted)}
.stepper .st.active .lb{color:var(--teal)}
.stepper .lineseg{flex:1;height:2px;background:#e7ecef;margin:0 -6px 18px;max-width:34px}
.stepper .lineseg.done{background:var(--green)}
.form-title{text-align:center;font-size:16.5px;font-weight:600;padding:16px 0 2px}
.pad{padding:16px}
.fg{margin-bottom:16px}
.fg .lab{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:8px;display:flex;align-items:center}
.fld{width:100%;height:50px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;background:#fff}
.fld::placeholder{color:#b7c1c9}
.fld:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,186,181,.1)}
textarea.fld{height:auto;min-height:78px;padding:12px 14px;resize:none;line-height:1.5}
.map-btn{width:100%;height:46px;border:1.5px dashed var(--teal-tint2);border-radius:12px;color:var(--teal);font-weight:500;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:9px;background:var(--teal-tint)}
.loc-seg{display:flex;gap:8px}
.loc-seg .ls{flex:1;height:42px;border:1.5px solid var(--line);border-radius:11px;background:#fff;font-size:12.5px;font-weight:500;color:var(--sub);display:flex;align-items:center;justify-content:center;gap:6px}
.loc-seg .ls.on{border-color:var(--teal);color:var(--teal);background:var(--teal-tint)}
.loc-seg .ls svg{width:15px;height:15px}
/* 地図（Google Maps）。以前のCSSで描いた架空の地図はここで廃止した。 */
/* 地図の検索欄（郵便番号・住所・施設名） */
.map-search{display:flex;gap:6px;margin-bottom:8px}
.map-search .fld{flex:1;min-width:0}
.map-search-btn{flex:none;min-height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--teal-tint2);background:var(--teal-tint);color:var(--teal-dark);font-size:12.5px;font-weight:700}
.map-search-btn:active{background:var(--teal-tint2)}
.map-res{margin-bottom:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;max-height:210px;overflow-y:auto}
.map-res-i{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-bottom:1px solid var(--line2,#eef2f1);background:#fff;font-size:12.5px;line-height:1.5}
.map-res-i:last-child{border-bottom:0}
.map-res-i:active{background:var(--teal-tint)}
.map-res-i b{display:block;color:var(--ink);font-weight:700}
.map-res-i span{color:var(--sub)}
.map-res-msg{padding:10px 12px;font-size:12px;color:var(--sub)}
.map-host{position:relative;height:220px;border-radius:12px;overflow:hidden;border:1.5px solid var(--line);background:#e7ede8}
.map-host .gmap{position:absolute;inset:0}
.map-off{display:flex;align-items:center;justify-content:center;height:100%;padding:16px;text-align:center;color:var(--sub);font-size:12px;line-height:1.7}
.map-addr{margin-top:7px;font-size:11.5px;color:var(--sub);line-height:1.6;word-break:break-all}
.meet-toggle{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.meet-toggle input{width:19px;height:19px;accent-color:var(--teal);flex-shrink:0}
.meet-block{background:#f7fafb;border:1px solid var(--line2);border-radius:12px;padding:12px;margin-top:10px}
.meet-block .lab{font-size:12.5px;font-weight:500;color:var(--ink);margin-bottom:8px}
.date-add{display:flex;gap:8px}
.date-add .fld{flex:1}
.date-add-btn{flex:0 0 84px;height:50px;border-radius:12px;background:var(--teal-tint);color:var(--teal);border:1.5px solid var(--teal-tint2);font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:4px}
.date-add-btn:active{background:var(--teal-tint2)}
.date-chips{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.date-empty{font-size:12px;color:var(--muted);font-weight:400;padding:2px 2px}
.dchip{background:#f7fafb;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.dchip.over{background:var(--red-bg);border-color:var(--red-line)}
.dchip-main{display:flex;align-items:center;gap:8px}
.dchip-sub{display:flex;align-items:center;gap:8px;margin-top:2px}
.dchip .dd{font-size:13px;font-weight:600;color:var(--ink)}
.dchip .da{font-size:11px;font-weight:600}
.dchip .da.green{color:var(--green)}.dchip .da.orange{color:var(--orange)}.dchip .da.red{color:var(--red)}.dchip .da.purple{color:var(--purple)}
.dchip .dx{margin-left:auto;width:44px;height:44px;margin-right:-8px;border-radius:10px;color:var(--muted);font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center}
.dchip .dx:active{background:var(--red-bg);color:var(--red)}
.file-drop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border:1.5px dashed var(--teal-tint2);border-radius:12px;color:var(--teal);font-weight:500;font-size:13px;background:var(--teal-tint);cursor:pointer}
.file-drop:active{background:var(--teal-tint2)}
.file-list{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.fchip{display:flex;align-items:center;gap:9px;background:#f7fafb;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.fchip .fi{width:16px;height:16px;color:var(--teal);flex-shrink:0}
.fchip .fn{font-size:12.5px;font-weight:500;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip .fx{width:24px;height:24px;border-radius:7px;color:var(--muted);flex-shrink:0;font-size:12px}
.fchip .fx:active{background:var(--red-bg);color:var(--red)}
.dt-row{display:flex;gap:8px;align-items:center}
.dt-row .fld{padding:0 10px}
.dt-row .to{color:var(--muted);font-weight:500}
/* 時刻の入力（時：分の選択）。iOS が step を見てくれないので
   <input type="time"> ではなく <select> 2つで5分刻みを作っている。 */
.tsel{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.tsel select{height:50px;min-width:64px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);font-size:16px;font-weight:600;padding:0 8px;
  -webkit-appearance:none;appearance:none;text-align:center;text-align-last:center}
.tsel select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,186,181,.1)}
.tsel-c{color:var(--muted);font-weight:700}

/* 入力欄の下の小さな補足。指定が無く本文と同じ大きさで出ていた */
.fl-help{font-size:11.5px;color:var(--sub);line-height:1.55}
select.fld{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235a6b78' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
/* ---- 日ごとの設定・繰り返し ---- */
.dchip .dedit{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 10px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:11.5px;font-weight:500;color:var(--sub)}
.dchip .dedit:active{background:var(--teal-tint);border-color:var(--teal-tint2);color:var(--teal-dark)}
.dchip .ovtag{margin-left:5px;background:var(--teal-tint);color:var(--teal-dark);font-size:10px;font-weight:600;padding:1px 6px;border-radius:5px}
.dchip .dover{font-size:11px;font-weight:600;color:var(--red)}
.repeat-btn{width:100%;min-height:44px;margin-top:10px;border-radius:11px;border:1.5px dashed var(--teal-tint2);background:var(--teal-tint);color:var(--teal-dark);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px}
.repeat-btn:active{background:var(--teal-tint2)}
.dow-row{display:flex;gap:6px}
.dow{flex:1;min-height:44px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--sub)}
.dow.sun{color:var(--red)}.dow.sat{color:#3f7fb5}
.dow.on{background:var(--teal);border-color:var(--teal);color:#fff}
.rp-sum{background:#f7fafb;border:1px solid var(--line);border-radius:11px;padding:12px 13px;font-size:12.5px;color:var(--ink);line-height:1.7}
.rp-sum b{color:var(--teal-dark);font-size:15px}
.rp-skip{font-size:11.5px;color:var(--sub);font-weight:400;margin-top:3px}
/* ---- 空き超過の警告 ---- */
.cap-warn{margin-top:11px;display:flex;gap:8px;background:var(--red-bg);border:1px solid var(--red-line);border-radius:11px;padding:11px 12px;font-size:11.5px;font-weight:500;color:#a53f39;line-height:1.65}
.cap-warn svg{flex-shrink:0;margin-top:1px}
.cap-warn.info{background:var(--purple-bg);border-color:var(--purple-line);color:var(--purple)}
.cw-sub{color:var(--sub);font-weight:400}
/* ---- 下書き・コピー・現場マスタ ---- */
.draft-bar{background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:12px;padding:12px 13px;margin-bottom:14px}
.db-t{font-size:12.5px;font-weight:600;color:var(--gold);display:flex;align-items:center;gap:6px}
.db-s{font-size:11.5px;color:var(--sub);margin:4px 0 10px}
.db-a{display:flex;gap:8px}
.db-a button{flex:1;min-height:40px;border-radius:9px;border:1px solid var(--gold-line);background:#fff;font-size:12.5px;font-weight:600;color:var(--sub)}
.db-a button.pri{background:var(--gold);border-color:var(--gold);color:#fff}
.copy-past{width:100%;min-height:46px;margin-bottom:16px;border-radius:12px;border:1.5px solid var(--teal-tint2);background:#fff;color:var(--teal-dark);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.copy-past:active{background:var(--teal-tint)}
.copy-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;min-height:56px;padding:11px 13px;margin-bottom:8px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--muted)}
.copy-row:active{background:var(--teal-tint)}
.cr-t{font-size:13.5px;font-weight:600;color:var(--ink)}
.cr-s{font-size:11.5px;color:var(--sub);margin-top:2px}
.site-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.sitechip{min-height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:#f7fafb;font-size:12px;font-weight:500;color:var(--sub)}
.sitechip:active{background:var(--teal-tint);border-color:var(--teal-tint2);color:var(--teal-dark)}
.btn-gps{width:100%;min-height:42px;margin-top:8px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--teal-dark);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-gps:active{background:var(--teal-tint)}
/* ---- キャンセル規定 ---- */
.policy-card{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 15px;box-shadow:var(--shadow)}
.pc-h{font-size:12.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.pc-r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line2);font-size:12px}
.pc-k{color:var(--sub);font-weight:500;flex-shrink:0}
.pc-v{font-weight:600;color:var(--ink);text-align:right}
.pc-v.ok{color:var(--teal-dark)}
.pc-v.fee{color:var(--danger,#D64545)}
.pc-n{margin-top:9px;font-size:11px;color:var(--sub);font-weight:400;line-height:1.6}
.deadline{margin-top:9px;display:flex;align-items:center;gap:7px;background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:10px;padding:10px 12px;font-size:11.5px;font-weight:600;color:var(--gold)}
.btn-weather{margin-top:11px;background:#eaf4fb;border:1.5px solid #c4e0f2;color:#2b6f9e}
.btn-weather:active{background:#d8ebf7}
/* 選んだ日の一覧（左スワイプで削除・選択して削除） */
.dsel-list{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.dsel-row{position:relative;overflow:hidden;border-bottom:1px solid var(--line2,#eef2f1)}
.dsel-row:last-child{border-bottom:0}
.dsel-slide{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;background:#fff;transition:transform .18s ease;will-change:transform;touch-action:pan-y;backface-visibility:hidden}
.dsel-row.open .dsel-slide{transform:translateX(-84px)}
.dsel-row.bad .dsel-slide{background:#FFF6F6}
.dsel-row.picked .dsel-slide{background:var(--teal-tint)}
.dsel-d{font-size:13.5px;font-weight:700;color:var(--ink);min-width:78px}
.dsel-d small{font-size:11px;font-weight:600;color:var(--sub);margin-left:2px}
.dsel-av{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--teal-tint);color:var(--teal-dark)}
.dsel-av.red{background:#FBEAEA;color:#C0392B}
.dsel-av.none{background:#EFEBFA;color:#5B4FA8}
.dsel-av.over{background:#FDF3E3;color:#8A5A00}
.dsel-av.wait{background:var(--line2,#eef2f1);color:var(--sub)}
.dsel-x{margin-left:auto;width:30px;height:30px;border-radius:9px;color:var(--sub);font-size:17px;line-height:1}
.dsel-chk{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center}
.dsel-chk.on{background:var(--teal);border-color:var(--teal)}
/* ★ 触っていない間は見せない。
   出しっぱなしにすると、スクロール中に行のすき間から赤がちらつく
   （とくに日別一覧はスワイプ面が透明なので後ろの赤が透ける）。 */
.dsel-del{position:absolute;top:0;right:0;width:84px;height:100%;border:0;
  background:var(--danger,#D64545);color:#fff;font-size:13px;font-weight:700;
  opacity:0;pointer-events:none;transition:opacity .12s}
.dsel-row.open .dsel-del,.dsel-row.swiping .dsel-del{opacity:1;pointer-events:auto}

.dsel-tools{display:flex;align-items:center;gap:10px;margin:0 0 8px;flex-wrap:wrap}
.dsel-btn{min-height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.dsel-btn.danger{border-color:#E7C3C3;color:var(--danger,#D64545);background:#fff}
.dsel-btn:disabled{opacity:.45}
.dsel-lnk{background:none;border:0;color:var(--teal-dark);font-size:12.5px;font-weight:700;text-decoration:underline;padding:6px 2px}
.dsel-n{font-size:12px;color:var(--sub);font-weight:700}
.dsel-tools .dsel-sp{margin-left:auto}
.dsel-warn{margin:8px 0 10px;padding:9px 12px;border-radius:10px;background:#FFF4E5;border:1px solid #F0B775;color:#7A4A06;font-size:12px;line-height:1.6}
.dsel-hint{margin-top:8px;font-size:11px;color:var(--sub);text-align:center}
/* 一覧の上に出すときは、詰めて右寄せにする（見出しの一部のように見せる） */
.dsel-hint.top{margin:0 0 6px;text-align:right}

/* 報告書のフォルダ整理
   ★ チップの横並びだったが、フォルダが増えるほど横スクロールが伸びて
     探せなくなる（年月の絞り込みと同じ理由）。プルダウンにした。
     高さは年月のプルダウン（40px）にそろえる。 */
.rep-folders{display:flex;gap:8px;padding:0 16px 10px;align-items:center}
.rep-folders .rp-sel{flex:1 1 auto}
.rf-new{flex:0 0 auto;height:40px;padding:0 13px;border-radius:10px;
  border:1px dashed var(--teal-tint2);background:#fff;color:var(--teal-dark);
  font-size:12.5px;font-weight:700;white-space:nowrap;font-family:inherit}
.rf-new:active{background:var(--teal-tint)}

/* フォルダの管理（名前の変更・削除）。行を占有しないよう右寄せの小さなリンク */
.rep-manage{display:flex;justify-content:flex-end;gap:14px;padding:0 16px 10px;margin-top:-4px}

.rep-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 16px 10px}
.rep-bar.sel{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
/* 検索の行では入力と同じ高さ、選択バーの中では少し小さく */
.rb-main{flex:none;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--teal-tint2);background:var(--teal-tint);color:var(--teal-dark);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rep-bar .rb-main{height:36px;border-radius:999px}
.rb-main:disabled{opacity:.45}
.rb-lnk{background:none;border:0;color:var(--teal-dark);font-size:12px;font-weight:700;text-decoration:underline;padding:6px 2px}
.rb-lnk.danger{color:var(--danger)}
.rb-n{font-size:12px;color:var(--sub);font-weight:700;margin-left:auto}

.rr-chk{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;margin-right:2px}
.rr-chk.on{background:var(--teal);border-color:var(--teal)}
.rep-row.picked{background:var(--teal-tint)}
.rr-folder{margin-left:7px;padding:1px 7px;border-radius:8px;background:var(--teal-tint);color:var(--teal-dark);font-size:10.5px;font-weight:700}

.fl-list{display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow-y:auto}
.fl-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:0 14px;border-radius:11px;border:1px solid var(--line);background:#fff}
.fl-item:active{background:var(--teal-tint)}
.fl-n{font-size:13.5px;font-weight:700;color:var(--ink)}
.fl-c{font-size:11.5px;color:var(--sub)}
.fl-empty{padding:14px;text-align:center;font-size:12.5px;color:var(--sub)}

/* 年月を選ぶシート */
.mp-year{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 12px}
.mp-nav{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--teal-dark);display:flex;align-items:center;justify-content:center}
.mp-y{font-size:18px;font-weight:800;color:var(--ink);min-width:5.5em;text-align:center}
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mp-m{height:46px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:700}
.mp-m.now{border-color:var(--teal-tint2);color:var(--teal-dark)}
.mp-m.on{background:var(--teal);border-color:var(--teal);color:#fff}
/* カレンダーの年月（タップできることが分かるように） */
/* ★ 元は pointer-events:none の飾りラベルだった。タップできるようにするが、
   左右いっぱいに広がったままだと前月・次月のボタンを覆ってしまうので、
   中央に必要な幅だけ置く。 */
.cal-head2 .cal-month{position:absolute;left:50%;right:auto;transform:translateX(-50%);
  width:auto;pointer-events:auto;background:none;border:0;font:inherit;color:inherit;
  display:inline-flex;align-items:center;cursor:pointer;padding:2px 8px;border-radius:8px}
.cal-head2 .cal-month:active{background:var(--teal-tint)}
/* 読み込み中のマス（要相談と紛らわしくしない） */
.chip.loading{color:var(--sub);background:transparent;font-weight:700;letter-spacing:1px}

/* 現場カードの中の月送り（半年ぶんなどをまとめて申し込まれたとき） */
.gpager{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);background:#fbfdfd}
.gp-nav{flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--teal-dark);display:flex;align-items:center;justify-content:center}
.gp-nav:disabled{opacity:.35}
.gp-sel{flex:1;min-width:0;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13px;font-weight:700;padding:0 8px}
.gp-n{flex:none;font-size:11px;color:var(--sub);white-space:nowrap}
@media (max-width:380px){ .gp-n{display:none} }

/* 報告書の確認が残っている予約を目立たせる */
/* 報告書の確認待ちはいちばん急ぎたいので、地色を濃くして目を引かせる */
.badge.b-rep{background:#FFE3A6;border-color:#C98A1F;color:#6B4200}
.tc-detail.tc-detail-rep{background:var(--teal-dark,#0A7A75);color:#fff;border-color:var(--teal-dark,#0A7A75)}

/* ---- 隊長への発信 ---- */
.ar-call{width:100%;min-height:42px;margin-top:10px;border-radius:10px;border:1px solid var(--teal-tint2);background:var(--teal-tint);color:var(--teal-dark);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px}
.ar-call:active{background:var(--teal-tint2)}
/* ---- 絞り込み ---- */
.filter.on{color:var(--teal);font-weight:600}
.fcount{display:none;align-items:center;justify-content:center;min-width:17px;height:17px;margin-left:5px;padding:0 5px;border-radius:9px;background:var(--teal);color:#fff;font-size:10px;font-weight:700}
.type-chips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{min-height:40px;padding:0 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:12.5px;font-weight:500;color:var(--sub)}
.tchip.on{background:var(--teal-tint);border-color:var(--teal);color:var(--teal-dark);font-weight:600}
/* ---- 通知設定 ---- */
.nt-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:12px 0;border-bottom:1px solid var(--line2);cursor:pointer}
.nt-t{font-size:13.5px;font-weight:500;color:var(--ink)}
.nt-s{font-size:11px;color:var(--sub);font-weight:400;margin-top:2px}
.sw{flex-shrink:0;width:48px;height:29px;border-radius:15px;background:#d6dee3;position:relative;transition:background .2s}
.sw i{position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.sw.on{background:var(--teal)}
.sw.on i{transform:translateX(19px)}
.avail-tag{margin-top:9px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:10px}
.avail-tag.green{background:var(--green-bg);color:var(--green)}
.avail-tag.orange{background:var(--orange-bg);color:var(--orange)}
.avail-tag.red{background:var(--red-bg);color:var(--red)}
.avail-tag.purple{background:var(--purple-bg);color:var(--purple)}
.stepper-count{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;height:50px}
.stepper-count button{width:52px;height:100%;font-size:22px;color:var(--teal);background:#f7fafb;font-weight:400}
.stepper-count button:active{background:var(--teal-tint)}
.stepper-count .val{flex:1;text-align:center;font-size:18px;font-weight:600}
.stepper-count .unit{padding-right:16px;color:var(--sub);font-weight:400;font-size:14px}
.chk{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line2)}
.chk:last-child{border-bottom:none}
.chk input{width:20px;height:20px;accent-color:var(--teal);flex-shrink:0}
.chk label{font-size:14px;font-weight:400}
.total-box{height:50px;border:1.5px solid var(--teal-tint2);border-radius:12px;background:var(--teal-tint);display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px;font-weight:500;color:var(--teal-dark)}
.total-box b{font-family:'DM Sans';font-size:21px;font-weight:600}
.ppl-grid{display:flex;gap:10px}
.ppl-col{flex:1}
.ppl-lab{font-size:12px;font-weight:500;color:var(--sub);margin-bottom:6px;text-align:center}
.stepper-count.sm{height:48px}
.stepper-count.sm button{width:46px;font-size:20px}
.stepper-count.sm .val{font-size:17px}
.ppl-total{margin-top:12px;text-align:center;font-size:13px;font-weight:500;color:var(--teal-dark);background:var(--teal-tint);border-radius:10px;padding:10px}
.ppl-total b{font-family:'DM Sans';font-size:19px;font-weight:600;margin:0 3px}
.foot{flex-shrink:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px}
.foot .btn{height:50px}
.foot .back{flex:0 0 96px}
.foot .next{flex:1}
.confirm-block{background:#fff;border-radius:14px;margin:0 0 12px;box-shadow:var(--shadow);overflow:hidden}
.cb-head{background:var(--teal-tint);padding:11px 15px;font-size:13px;font-weight:600;color:var(--teal-dark);display:flex;align-items:center;gap:7px}
.cb-row{display:flex;padding:12px 15px;border-bottom:1px solid var(--line2);font-size:13.5px}
.cb-row:last-child{border-bottom:none}
.cb-row .k{width:96px;flex-shrink:0;color:var(--sub);font-weight:400}
.cb-row .v{flex:1;font-weight:400;color:var(--ink)}
.confirm-note{background:var(--gold-bg);border-radius:12px;padding:13px 15px;font-size:12.5px;color:#8a6320;line-height:1.6;display:flex;gap:9px}
/* ★ 文は <span> で1つの塊にすること。素のテキストを直接置くと
   flex アイテムに分かれて、語の途中で折り返す。 */
.confirm-note span{min-width:0}


/* ============ MESSAGES ============ */

/* ============ ACCOUNT ============ */
.acct-hero{margin:14px 16px 2px;background:linear-gradient(160deg,#a3e6e0,#7fd4cd);border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px;color:#0f3b37;box-shadow:var(--shadow)}
.acct-hero .av{width:48px;height:48px;border-radius:50%;background:var(--teal-dark);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acct-hero .ai{flex:1;min-width:0}
.acct-hero .nm{font-weight:600;font-size:16px}
.acct-hero .co{font-size:12px;color:#2c625d;margin-top:2px;line-height:1.5}
.acct-hero .chev{color:rgba(15,59,55,.5);flex-shrink:0}
.acct-hero:active{filter:brightness(.97)}
.acct-list{margin:14px}
.acct-group{background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px}
/* --- 警備報告書控え --- */
.rep-sum{background:linear-gradient(135deg,#eafaf8,#dbf3ef);border:1px solid var(--teal-tint2);border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:14px;margin:0 16px 14px}
.rep-sum .rs-big{text-align:center;min-width:76px}
.rep-sum .rsn{font-size:28px;font-weight:700;color:var(--teal-dark);font-family:'DM Sans';line-height:1}
.rep-sum .rsn small{font-size:12px;font-weight:600}
.rep-sum .rsl{font-size:10px;color:var(--sub);font-weight:500;margin-top:4px}
.rep-sum .rs-rows{flex:1;display:flex;flex-direction:column;gap:7px;border-left:1px solid var(--teal-tint2);padding-left:14px}
.rep-sum .rs-r{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--ink)}
.rep-sum .rs-r b{font-family:'DM Sans';margin-left:auto}
.rep-sum .rs-r .dotc{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.dotc.issued{background:var(--green-dot)}
.dotc.preparing{background:var(--orange-dot)}
.rep-mon{display:flex;gap:7px;overflow-x:auto;padding:2px 16px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rep-mon::-webkit-scrollbar{height:0}
.rep-mon .rm{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.rep-mon .rm.on{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-dark)}
.rep-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.rep-row:last-child{border-bottom:none}
.rep-row:active{background:var(--teal-tint)}
.rep-row .rr-ic{width:36px;height:44px;border-radius:8px;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rep-row .rr-mid{flex:1;min-width:0}
.rep-row .rr-t{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-row .rr-s{font-size:11px;color:var(--sub);font-weight:400;margin-top:2px}
.rep-row .rr-no{font-size:10px;color:var(--muted);font-family:'DM Sans';letter-spacing:.02em;margin-top:2px}
.b-issued{background:#E3F3EC;border-color:#93CDB4;color:#0F6B4F}
.b-preparing{background:#FCEFD8;border-color:#E0A94A;color:#8A5A00}
.rep-empty{color:var(--muted);font-size:13px;font-weight:400;padding:22px 16px;text-align:center}
.rep-acts{display:flex;gap:10px;margin:12px 16px 0}
.rep-acts .btn{height:48px}
.b-approved{background:#E3F3EC;border-color:#93CDB4;color:#0F6B4F}
.b-auto{background:#EDF1F5;border-color:#B4C0CC;color:#46545F}
.b-await{background:#FCEFD8;border-color:#E0A94A;color:#8A5A00}
.b-inq{background:#FDE7D2;border-color:#DE9A55;color:#8A4A00}
.rep-alert{background:linear-gradient(135deg,#fff6e0,#ffeec9);border:1px solid var(--gold-line);border-radius:14px;padding:14px 15px;margin:0 16px 14px;display:flex;gap:11px;align-items:flex-start}
.rep-alert .ra-ic{width:32px;height:32px;border-radius:10px;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rep-alert .ra-t{font-size:13.5px;font-weight:700;color:#8a6100;line-height:1.5}
.rep-alert .ra-s{font-size:11.5px;color:#96712a;font-weight:400;margin-top:4px;line-height:1.65}
.due-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:3px 8px;border-radius:7px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line);margin-top:4px}
.due-chip.urgent{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.rep-row.await{background:#fffdf6}
/* ↓ 報告書の「承認の流れ」用。お知らせのマーキーは .nflow（名前が衝突していた） */
.flow{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:15px 16px 6px;margin-top:14px}
.flow-h{font-size:12px;font-weight:600;color:var(--sub);margin-bottom:13px}
.fl{display:flex;gap:12px;position:relative;padding-bottom:16px}
.fl:last-child{padding-bottom:2px}
.fl::before{content:'';position:absolute;left:10px;top:21px;bottom:0;width:2px;background:var(--line2)}
.fl:last-child::before{display:none}
.fl.done::before{background:var(--teal-tint2)}
.fl .fd{width:22px;height:22px;border-radius:50%;background:var(--line2);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1}
.fl.done .fd{background:var(--teal)}
.fl.now .fd{background:var(--gold);box-shadow:0 0 0 4px var(--gold-bg)}
.fl .ft{flex:1;min-width:0;padding-top:1px}
.fl .ft1{font-size:13px;font-weight:600;color:var(--muted);line-height:1.45}
.fl.done .ft1,.fl.now .ft1{color:var(--ink)}
.fl .ft2{font-size:11px;color:var(--muted);font-weight:400;margin-top:3px;line-height:1.6}
.fl.now .ft2{color:#8a6100;font-weight:500}
.appr-box{background:var(--teal-tint);border:1px solid var(--teal-tint2);border-radius:14px;padding:15px;margin-top:14px}
.appr-box .ab-t{font-size:13.5px;font-weight:700;color:var(--teal-dark);text-align:center}
.appr-box .ab-s{font-size:11.5px;color:var(--sub);font-weight:400;text-align:center;margin:7px 0 13px;line-height:1.7}
.appr-done{display:flex;gap:11px;align-items:flex-start;background:var(--green-bg);border:1px solid var(--green-line);border-radius:14px;padding:14px 15px;margin-top:14px}
.appr-done .ad-ic{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.appr-done .ad-t{font-size:13.5px;font-weight:700;color:var(--green);line-height:1.5}
.appr-done .ad-s{font-size:11.5px;color:#3d7a5f;font-weight:400;margin-top:4px;line-height:1.7}
.cnt-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:600;display:none;align-items:center;justify-content:center;font-family:'DM Sans';margin-left:auto}
.cnt-badge.show{display:inline-flex}
.acct-item .ic.ic-img{background:transparent;padding:0}
.acct-item .ic.ic-img{display:flex;align-items:center;justify-content:center}
.acct-item .ic.ic-img img{width:84%;height:84%;object-fit:contain;display:block}
.acct-item .ic.ic-img.ic-sm{display:flex;align-items:center;justify-content:center}
.acct-item .ic.ic-img.ic-sm img{width:50%;height:50%}
.ccard .cic.cic-img{background:transparent;padding:0}
.ccard .cic.cic-img{display:flex;align-items:center;justify-content:center}
.ccard .cic.cic-img img{width:84%;height:84%;object-fit:contain;display:block}
.acct-hero .av.av-img{background:transparent;box-shadow:none;overflow:visible}
.acct-hero .av.av-img img{width:100%;height:100%;object-fit:contain;display:block}
.prof-top .pav.pav-img{background:transparent;box-shadow:none;overflow:visible}
.prof-top .pav.pav-img img{width:100%;height:100%;object-fit:contain;display:block}
.card-thumb .ct-ic.ct-img{background:transparent;border:none;display:flex;align-items:center;justify-content:center}
.card-thumb .ct-ic.ct-img img{width:100%;height:100%;object-fit:contain;display:block}
.home-alert .ha-ic.ha-img{background:none;box-shadow:none;display:flex;align-items:center;justify-content:center}
.home-alert .ha-ic.ha-img img{width:72%;height:72%;object-fit:contain;display:block}
.nt-ic.nt-img{background:transparent;display:flex;align-items:center;justify-content:center}
.nt-ic.nt-img img{width:80%;height:80%;object-fit:contain;display:block}
/* --- ホーム承認アラート --- */
.home-alert{position:relative;margin:14px 16px 12px;background:#fff;border:1px solid var(--orange-line);border-radius:16px;padding:12px 14px;box-shadow:0 5px 15px -10px rgba(24,52,66,.22)}
.home-alert .ha-ic{position:absolute;top:11px;right:12px;width:36px;height:36px;border-radius:50%;background:linear-gradient(150deg,#f7a13d,#e07c18);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(224,124,24,.75)}
.home-alert .ha-lb{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.08em;margin-bottom:4px}
.home-alert .ha-t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.5;padding-right:46px}
.home-alert .ha-t b{font-size:20px;font-weight:700;font-family:'DM Sans';color:var(--ink);letter-spacing:-.01em;margin:0 1px}
.home-alert .ha-s{font-size:11.5px;color:var(--sub);font-weight:400;margin-top:5px;line-height:1.6}
.home-alert .ha-pill{display:flex;align-items:center;gap:7px;background:#f3f6f7;border-radius:10px;padding:8px 10px;margin-top:9px;font-size:10.5px;font-weight:500;color:var(--sub);line-height:1.5}
.home-alert .ha-pill svg{flex-shrink:0;color:var(--orange)}
.home-alert .ha-pill b{color:var(--ink);font-weight:700}
.home-alert .ha-btn{width:100%;height:42px;margin-top:10px;border-radius:11px;background:linear-gradient(150deg,#f79a2e,#e0790f);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 8px 18px -9px rgba(224,121,15,.85)}
.home-alert .ha-btn:active{filter:brightness(.94)}
/* --- ベル --- */
.bell{position:relative}
.bell-dot{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:600;display:none;align-items:center;justify-content:center;font-family:'DM Sans';border:2px solid #fff}
.bell-dot.show{display:flex}
/* --- お知らせ一覧 --- */
.nt-item{display:flex;gap:12px;padding:14px 15px;border-bottom:1px solid var(--line2);background:#fff;width:100%;text-align:left}
.nt-item:last-child{border-bottom:none}
.nt-item:active{background:var(--teal-tint)}
.nt-item.unread{background:#f6fdfc}
.nt-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nt-ic.report{background:var(--gold-bg);color:var(--gold)}
.nt-ic.resv{background:var(--teal-tint);color:var(--teal-dark)}
.nt-ic.bill{background:#eef2f6;color:#5d6b78}
.nt-ic.info{background:var(--green-bg);color:var(--green)}
.nt-tx{flex:1;min-width:0}
.nt-t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5;display:flex;align-items:flex-start;gap:6px}
.nt-t .dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:6px}
.nt-b{font-size:12px;color:var(--sub);font-weight:400;margin-top:4px;line-height:1.65}
.nt-d{font-size:10.5px;color:var(--muted);font-weight:500;margin-top:5px;font-family:'DM Sans'}
.nt-head{display:flex;align-items:center;margin:0 4px 10px}
.nt-head .nh-t{font-size:12px;font-weight:600;color:var(--sub)}
.nt-head .nh-a{margin-left:auto;font-size:12px;font-weight:600;color:var(--teal)}
/* --- ご請求 --- */
.bill-sum{background:linear-gradient(160deg,#a3e6e0,#7fd4cd);border-radius:16px;padding:18px;color:#0f3b37;margin-bottom:14px;box-shadow:var(--shadow)}
.bill-sum .bl{font-size:11.5px;font-weight:600;opacity:.8}
.bill-sum .bv{font-size:32px;font-weight:700;font-family:'DM Sans';line-height:1.1;margin-top:5px}
.bill-sum .bv small{font-size:15px;font-weight:600;margin-left:3px}
.bill-sum .bd{display:flex;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(15,59,55,.16)}
.bill-sum .bd div{flex:1;font-size:11px;font-weight:500;color:#2c625d}
.bill-sum .bd b{display:block;font-size:14px;font-weight:700;color:#0f3b37;font-family:'DM Sans';margin-top:3px}
.bill-note{background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:12px;padding:11px 13px;font-size:11.5px;color:#8a6100;font-weight:500;line-height:1.7;display:flex;gap:8px;margin-bottom:14px}
.bill-note svg{flex-shrink:0;margin-top:2px}
.bill-row{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line2);background:#fff;width:100%;text-align:left}
.bill-row:last-child{border-bottom:none}
.bill-row .bdate{width:44px;flex-shrink:0;font-family:'DM Sans';font-size:14px;font-weight:600;color:var(--teal-dark);line-height:1.15}
.bill-row .bdate small{display:block;font-size:9.5px;color:var(--muted);font-weight:500}
.bill-row .bmid{flex:1;min-width:0}
.bill-row .bt{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bill-row .bs{font-size:11px;color:var(--sub);font-weight:400;margin-top:2px}
.bill-row .bamt{text-align:right;flex-shrink:0}
.bill-row .ba{font-family:'DM Sans';font-size:14px;font-weight:600;color:var(--ink)}
.bill-row .bst{font-size:9.5px;font-weight:600;margin-top:3px;display:block}
.bill-row .bst.fix{color:var(--green)}
.bill-row .bst.tmp{color:var(--gold)}
.bill-tot{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px 15px;margin-top:12px}
.bill-tot .tr2{display:flex;font-size:13px;font-weight:500;color:var(--sub);padding:7px 0}
.bill-tot .tr2 b{margin-left:auto;font-family:'DM Sans';font-weight:600;color:var(--ink)}
.bill-tot .tr2.big{border-top:1px solid var(--line2);margin-top:5px;padding-top:12px;font-size:14px;color:var(--ink);font-weight:700}
.bill-tot .tr2.big b{font-size:19px;color:var(--teal-dark)}
/* --- 変更・キャンセル --- */
.opt-row{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:9px;background:#fff;width:100%;text-align:left;font-size:13.5px;font-weight:500;color:var(--ink)}
.opt-row.on{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-dark)}
.opt-row .ck{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.opt-row.on .ck{background:var(--teal);border-color:var(--teal)}
.opt-row.radio .ck{border-radius:50%}
.fee-box{background:var(--red-bg);border:1px solid var(--red-line);border-radius:12px;padding:12px 14px;font-size:12px;color:var(--red);font-weight:500;line-height:1.75;display:flex;gap:9px;margin:12px 0}
.fee-box svg{flex-shrink:0;margin-top:2px}
.fee-box.ok{background:var(--green-bg);border-color:var(--green-line);color:var(--green)}
/* --- スプラッシュ --- */
#splash{position:absolute;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(120% 90% at 50% 42%,#ffffff 0%,#f2fbfa 46%,#dff4f1 100%);
  transition:opacity .5s ease, visibility .5s;}
#splash.out{opacity:0;visibility:hidden}
#splash .sp-ring{position:absolute;width:190px;height:190px;border-radius:50%;border:1.5px solid var(--teal-tint2);opacity:0;animation:spRing 1.9s cubic-bezier(.2,.7,.3,1) .18s forwards}
#splash .sp-ring.d2{animation-delay:.42s}
@keyframes spRing{0%{transform:scale(.55);opacity:0}35%{opacity:.85}100%{transform:scale(1.5);opacity:0}}
#splash .sp-logo{width:172px;max-width:56vw;opacity:0;transform:scale(.86) translateY(10px);
  animation:spLogo .82s cubic-bezier(.2,.85,.3,1.05) .1s forwards;filter:drop-shadow(0 10px 22px rgba(24,52,66,.14))}
@keyframes spLogo{to{opacity:1;transform:none}}
#splash.out .sp-logo{transform:scale(.93) translateY(-8px);transition:transform .5s ease}
#splash .sp-sub{font-size:12.5px;font-weight:600;color:var(--teal-dark);letter-spacing:.22em;opacity:0;
  animation:spSub .6s ease .62s forwards}
@keyframes spSub{to{opacity:.9}}
#splash .sp-bar{position:absolute;bottom:64px;width:104px;height:3px;border-radius:2px;background:var(--teal-tint2);overflow:hidden;opacity:0;animation:spSub .4s ease .5s forwards}
#splash .sp-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--teal);animation:spBar 1.15s cubic-bezier(.4,.1,.2,1) .5s forwards}
@keyframes spBar{to{width:100%}}
/* --- 警備報告書（紙面再現） --- */
.rpt{background:#fff;border:1.6px solid #2b2b2b;color:#1a1a1a;font-size:11.5px;line-height:1.5;border-radius:3px;overflow:hidden}
.rpt-title{text-align:center;font-size:17px;font-weight:700;letter-spacing:.34em;padding:11px 0 10px;border-bottom:1.6px solid #2b2b2b;text-indent:.34em}
.rp-r{display:flex;border-bottom:1px solid #2b2b2b}
.rp-r.last{border-bottom:none}
.rp-k{width:74px;flex-shrink:0;border-right:1px solid #2b2b2b;padding:7px 5px;font-weight:600;background:#f7f7f7;display:flex;align-items:center;letter-spacing:.06em}
.rp-v{flex:1;min-width:0;padding:7px 9px;min-height:38px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-weight:500;word-break:break-all}
.rp-num{font-family:'DM Sans';font-weight:600;font-size:13px}
.rp-mark{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 4px;border:1.4px solid #1a1a1a;border-radius:50%;font-size:10.5px;font-weight:600;line-height:1}
.rp-off{color:#9aa2a8;font-weight:500}
.rp-mem{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}
.rp-mem th,.rp-mem td{border:1px solid #2b2b2b;padding:5px 4px;text-align:center;font-weight:500}
.rp-mem tr:first-child th{border-top:none}
.rp-mem tr td:first-child,.rp-mem tr th:first-child{border-left:none}
.rp-mem tr td:last-child,.rp-mem tr th:last-child{border-right:none}
.rp-mem tr:last-child td{border-bottom:none}
.rp-mem th{background:#f7f7f7;font-size:10px;letter-spacing:.04em;font-weight:600}
.rp-mem td.nm{text-align:left;padding-left:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-mem .cnt{background:#f7f7f7;font-weight:600}
.rp-mem td.rp-side{width:104px;padding:0;vertical-align:top;background:#fdfdfd}
.rp-side .sc{border-bottom:1px solid #2b2b2b;padding:9px 7px;text-align:center;font-weight:600;font-size:11px;display:flex;align-items:center;justify-content:center;gap:4px}
.rp-side .sc .rp-num{font-size:15px}
.rp-side .sq{border-bottom:1px dashed #2b2b2b;padding:8px 7px;text-align:left;font-size:10.5px;font-weight:600;line-height:1.5}
.rp-side .sr{padding:8px 7px;text-align:left;font-size:10.5px;font-weight:600;line-height:1.5}
.rp-side .sv{display:block;font-weight:500;font-size:11px;margin-top:3px;word-break:break-all}
.rp-memwrap{flex:1;min-width:0}
.rp-note{padding:10px 11px;font-size:10.5px;line-height:1.75;border-top:1px solid #2b2b2b;font-weight:500}
.rp-note .decl{font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;margin:7px 0 9px;display:block}
.rp-note .rt{font-weight:600;margin-top:2px}
.rp-foot{padding:11px 12px 13px;border-top:1px solid #2b2b2b;font-size:10.5px;line-height:1.7;color:#1a1a1a;font-weight:500;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.rp-foot .co{font-size:14px;font-weight:700;letter-spacing:.06em;margin-bottom:3px}
.rp-foot .ad,.rp-foot .tl2{display:block;white-space:nowrap}
.rp-foot .ad{font-size:10px}
.rp-foot .tl2{font-family:'DM Sans';letter-spacing:.02em;margin-top:1px}
.rp-wm{text-align:center;font-size:10px;color:var(--muted);font-weight:500;padding:8px 0 2px}
.acct-item{display:flex;align-items:center;gap:13px;padding:15px 16px;border-bottom:1px solid var(--line2)}
.acct-item:last-child{border-bottom:none}
.acct-item .ic{width:34px;height:34px;border-radius:10px;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acct-item .tx{flex:1;font-size:14.5px;font-weight:400}
.acct-item .sub{font-size:12px;color:var(--muted);font-weight:500}
.acct-item .chev{color:var(--muted)}
.logout{color:var(--red)}
.logout .ic{background:var(--red-bg);color:var(--red)}
/* --- プロフィール --- */
.prof-top{margin:14px 16px 0;background:linear-gradient(160deg,#a3e6e0,#7fd4cd);border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px;color:#0f3b37;box-shadow:var(--shadow)}
.prof-top .pav{width:66px;height:66px;border-radius:50%;background:var(--teal-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex-shrink:0;box-shadow:0 6px 16px -6px rgba(0,0,0,.35);position:relative}
.prof-top .pav .cam{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--teal-dark);display:flex;align-items:center;justify-content:center;border:2px solid #a3e6e0}
.prof-top .pi{flex:1;min-width:0}
.prof-top .pn{font-size:19px;font-weight:700;line-height:1.25}
.prof-top .pk{font-size:11px;color:#2c625d;font-weight:500;margin-top:2px}
.prof-top .pc{font-size:12.5px;color:#2c625d;font-weight:500;margin-top:6px;line-height:1.5}
.prof-sec{margin:14px 16px 0}
.prof-sh{font-size:12px;font-weight:600;color:var(--sub);margin:0 4px 8px;display:flex;align-items:center;gap:6px}
.prof-card{background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.prof-row{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line2)}
.prof-row:last-child{border-bottom:none}
.prof-row .pk2{width:92px;flex-shrink:0;font-size:12px;font-weight:500;color:var(--sub);padding-top:1px}
.prof-row .pv2{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--ink);word-break:break-all;line-height:1.5}
.prof-row .pv2.empty{color:var(--muted);font-weight:400}
.prof-sw{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line2)}
.prof-sw:last-child{border-bottom:none}
.prof-sw .sw-tx{flex:1;min-width:0}
.prof-sw .sw-t1{font-size:14px;font-weight:500;color:var(--ink)}
.prof-sw .sw-t2{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.prof-sw .switch input:checked + .track{background:var(--teal)}
.prof-edit{padding:16px 14px 4px}
.prof-edit .fg{margin-bottom:14px}
.edit-btn{font-size:13px;font-weight:600;color:#0f3b37;padding:6px 12px;border-radius:9px;background:rgba(255,255,255,.55)}
.edit-btn:active{background:rgba(255,255,255,.85)}
.code-ipt{font-family:'DM Sans';font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.code-hint{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--sub);font-weight:400;margin-top:7px;line-height:1.5}
.code-hint svg{flex-shrink:0}
.lock-h{display:flex;align-items:center;gap:6px}
.lock-tag{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--teal-dark);background:var(--teal-tint);border:1px solid var(--teal-tint2);padding:3px 8px;border-radius:7px}
.prof-card.locked-card{background:#fafbfc}
.prof-card.locked-card .pv2{color:#4a5b68}
.lock-note{display:flex;gap:8px;background:var(--teal-tint);border-radius:11px;padding:11px 13px;font-size:11.5px;color:var(--teal-dark);font-weight:400;line-height:1.6;margin-top:9px}
.lock-note svg{flex-shrink:0;margin-top:1px}
.code-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line2)}
.code-row .pk2{width:92px;flex-shrink:0;font-size:12px;font-weight:500;color:var(--sub)}
.code-row .cv{font-family:'DM Sans';font-size:14.5px;font-weight:600;color:var(--teal-dark);letter-spacing:.06em}
.reg-link{display:block;text-align:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line2);color:var(--teal);font-size:13.5px;font-weight:600}
.reg-intro{background:var(--teal-tint);border-radius:12px;padding:13px 14px;font-size:12.5px;color:var(--teal-dark);line-height:1.65;font-weight:400;margin-bottom:18px}
.reg-steps{display:flex;gap:6px;margin-bottom:18px}
.reg-step{flex:1;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 6px;text-align:center;box-shadow:var(--shadow)}
.reg-step .rn{width:22px;height:22px;border-radius:50%;background:var(--teal-tint);color:var(--teal-dark);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;margin:0 auto 6px}
.reg-step.on .rn{background:var(--teal);color:#fff}
.reg-step .rl{font-size:10px;font-weight:600;color:var(--sub);line-height:1.4;letter-spacing:-.02em}
.reg-step.on .rl{color:var(--teal-dark)}
.card-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;padding:22px 14px;border:1.5px dashed var(--teal-tint2);border-radius:12px;color:var(--teal);font-weight:600;font-size:13px;background:var(--teal-tint);cursor:pointer;text-align:center}
.card-drop:active{background:var(--teal-tint2)}
.card-drop .cd-s{font-size:11px;color:var(--sub);font-weight:400;line-height:1.5}
.agree{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;font-weight:400;color:var(--ink);line-height:1.6;cursor:pointer;padding:2px}
.agree input{width:19px;height:19px;accent-color:var(--teal);flex-shrink:0;margin-top:1px}
.agree a{color:var(--teal);font-weight:600}
.priv-note{background:#f7fafb;border:1px solid var(--line2);border-radius:11px;padding:11px 13px;font-size:11px;color:var(--sub);font-weight:400;line-height:1.7;margin-top:12px}
.pend-badge{display:inline-flex;align-items:center;gap:6px;background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line);font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:20px;margin-bottom:14px}
.req-btn{font-size:12.5px;font-weight:600;color:#0f3b37;padding:6px 11px;border-radius:9px;background:rgba(255,255,255,.55);white-space:nowrap}
.req-btn:active{background:rgba(255,255,255,.85)}
.card-thumb{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line2)}
.card-thumb .ct-ic{width:46px;height:30px;border-radius:5px;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--teal-tint2)}
.card-thumb .ct-tx{flex:1;min-width:0}
.card-thumb .ct-t1{font-size:13.5px;font-weight:500;color:var(--ink)}
.card-thumb .ct-t2{font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}
.co-prev{margin-top:9px;border-radius:11px;padding:11px 13px;font-size:12px;font-weight:500;line-height:1.6;display:flex;gap:8px;align-items:flex-start}
.co-prev svg{flex-shrink:0;margin-top:1px}
.co-prev.ok{background:var(--green-bg);color:var(--green);border:1px solid var(--green-line)}
.co-prev.ng{background:var(--red-bg);color:var(--red);border:1px solid var(--red-line)}
.co-prev b{font-weight:700}
.co-prev .cp-s{font-weight:400;color:var(--sub);font-size:11px;display:block;margin-top:2px}
.reg-sh{font-size:12.5px;font-weight:600;color:var(--teal-dark);margin:22px 0 12px;padding-bottom:7px;border-bottom:1.5px solid var(--teal-tint2);display:flex;align-items:center;gap:7px}
.reg-sh:first-of-type{margin-top:0}
/* --- ヘルプ・規約 --- */
.help-search{position:relative;margin-bottom:14px}
.help-search input{width:100%;height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px 0 42px;font-size:14px;font-weight:400;background:#fff;color:var(--ink);font-family:inherit}
.help-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.help-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.help-cats{display:flex;gap:7px;overflow-x:auto;padding-bottom:14px;-webkit-overflow-scrolling:touch}
.help-cats::-webkit-scrollbar{height:0}
.help-cats .hc{flex-shrink:0;border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:7px 14px;font-size:12.5px;font-weight:500;color:var(--sub);white-space:nowrap}
.help-cats .hc.on{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-dark)}
.faq-card{background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px}
.faq-cat{font-size:11.5px;font-weight:600;color:var(--sub);padding:12px 15px 0;letter-spacing:.04em}
.faq-q{display:flex;align-items:flex-start;gap:11px;padding:14px 15px;width:100%;text-align:left;border-bottom:1px solid var(--line2)}
.faq-item:last-child .faq-q{border-bottom:none}
.faq-item.open .faq-q{border-bottom:none}
.faq-q .qm{width:22px;height:22px;border-radius:7px;background:var(--teal-tint);color:var(--teal-dark);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.faq-q .qt{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.55}
.faq-q .ch{color:var(--muted);flex-shrink:0;transition:transform .22s;margin-top:2px}
.faq-item.open .faq-q .ch{transform:rotate(180deg);color:var(--teal)}
.faq-a{display:none;padding:0 15px 15px 48px;font-size:13px;color:var(--sub);font-weight:400;line-height:1.85;border-bottom:1px solid var(--line2);white-space:pre-line}
.faq-item:last-child .faq-a{border-bottom:none}
.faq-item.open .faq-a{display:block}
.faq-a b{color:var(--ink);font-weight:600}
.help-cta{background:linear-gradient(135deg,#eafaf8,#dbf3ef);border:1px solid var(--teal-tint2);border-radius:14px;padding:16px;text-align:center;margin-top:6px}
.help-cta .ht{font-size:14px;font-weight:600;color:var(--teal-dark)}
.help-cta .hs{font-size:12px;color:var(--sub);font-weight:400;margin:6px 0 13px;line-height:1.6}
.help-cta .hb{display:flex;gap:9px}
.help-cta .hb .btn{height:46px;font-size:13.5px}
.help-empty{text-align:center;color:var(--muted);font-size:13px;font-weight:400;padding:34px 10px;line-height:1.8}
.legal-tabs{display:flex;gap:6px;background:var(--line2);padding:4px;border-radius:12px;margin-bottom:16px}
.legal-tabs button{flex:1;height:38px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--sub)}
.legal-tabs button.on{background:#fff;color:var(--teal-dark);box-shadow:var(--shadow)}
.legal-meta{font-size:11px;color:var(--muted);font-weight:500;margin-bottom:16px;line-height:1.7}
.legal-lead{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:14px 15px;font-size:12.5px;color:var(--sub);font-weight:400;line-height:1.85;margin-bottom:16px}
.legal-art{margin-bottom:20px}
.legal-art h3{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;padding-left:11px;border-left:3.5px solid var(--teal);line-height:1.5}
.legal-art p{font-size:13px;color:var(--sub);font-weight:400;line-height:1.9;white-space:pre-line}
.legal-art ol{margin:8px 0 0 0;padding-left:20px}
.legal-art li{font-size:13px;color:var(--sub);font-weight:400;line-height:1.85;margin-bottom:5px}
.legal-foot{border-top:1px solid var(--line2);padding-top:16px;margin-top:4px;font-size:12px;color:var(--sub);font-weight:500;line-height:1.8}
.legal-foot b{display:block;font-size:13.5px;color:var(--ink);font-weight:700;margin-bottom:3px}
.legal-foot .lf-h{display:block;font-size:11.5px;font-weight:700;color:var(--teal-dark,#0A7A76);letter-spacing:.04em;margin-bottom:6px}
/* 電話は困ったときに真っ先に必要なので、住所より前に大きく出す。タップで発信できる */
.legal-foot .lf-tel{
  display:inline-flex; align-items:center; gap:7px; margin:6px 0 2px;
  font-size:16px; font-weight:800; color:#07726F; text-decoration:none;
  letter-spacing:.01em;
}
.legal-foot .lf-tel svg{ flex:none; }
.legal-foot .lf-tel:active{ opacity:.6; }
.legal-foot .lf-hour{ display:block; font-size:11.5px; color:var(--sub); margin-bottom:8px; }
.legal-foot .lf-addr{ display:block; }

/* new-customer inquiry (form styles) */
.btn-gold{background:#fff;color:#8a5a12;border:1.5px solid var(--gold-line)}
.btn-gold:active{background:#fdf3e0}
.urgent-row{display:flex;align-items:center;gap:12px;background:#fff6e6;border:1px solid var(--gold-line);border-radius:14px;padding:14px}
.urgent-box{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--teal-tint2);border-radius:14px;padding:13px 14px;cursor:pointer}
.urgent-box:active{background:var(--teal-tint)}
.urgent-box .urgent-chk{width:22px;height:22px;accent-color:var(--teal);flex-shrink:0}
.urgent-box .ub-ic{width:44px;height:44px;border-radius:50%;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.urgent-box .ub-tx{flex:1;min-width:0}
.urgent-box .ub-t1{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.35}
.urgent-box .ub-badge{font-size:10px;font-weight:500;color:var(--teal-dark);background:var(--teal-tint);border:1px solid var(--teal-tint2);padding:2px 8px;border-radius:6px}
.urgent-box .ub-t2{font-size:12px;font-weight:500;color:var(--teal-dark);margin-top:5px}
.urgent-box .ub-t3{font-size:11px;color:var(--sub);margin-top:2px;line-height:1.45}
.urgent-row .ic{color:#c98a2e;flex-shrink:0}
.urgent-row .tx{flex:1}
.urgent-row .t1{font-size:13.5px;font-weight:600;color:#6b4410}
.urgent-row .t2{font-size:11px;color:#9a7430;font-weight:400;margin-top:1px}
.switch{position:relative;width:46px;height:27px;flex-shrink:0}
.switch input{display:none}
.switch .track{position:absolute;inset:0;background:#d3dae0;border-radius:20px;transition:.2s}
.switch .knob{position:absolute;top:3px;left:3px;width:21px;height:21px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .track{background:#e6a83c}
.switch input:checked + .track + .knob{transform:translateX(19px)}
.iq-intro{background:var(--teal-tint);border-radius:12px;padding:13px 14px;font-size:12.5px;color:var(--teal-dark);line-height:1.6;font-weight:400;margin-bottom:16px}
.success-wrap{padding:34px 22px;text-align:center;display:flex;flex-direction:column;align-items:center}
.success-wrap .ok{width:76px;height:76px;border-radius:50%;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.success-wrap h2{font-size:19px;font-weight:700;margin-bottom:8px}
.success-wrap p{font-size:13.5px;color:var(--sub);line-height:1.7}
.recv{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px;margin:18px 0;font-size:13px;color:var(--sub);font-weight:400}
.recv b{color:var(--ink);font-family:'DM Sans';letter-spacing:.04em}
.call{background:var(--teal-tint);border-radius:14px;padding:16px;margin-bottom:22px;width:100%}
.call .cl{font-size:11.5px;color:var(--teal-dark);font-weight:500;margin-bottom:6px;text-align:center}
.call a{font-size:22px;font-weight:600;color:var(--teal-dark);font-family:'DM Sans';letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px}

/* ============ TOAST + SHEET ============ */
.toast{position:absolute;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);background:rgba(20,40,50,.95);color:#fff;font-size:13px;font-weight:400;padding:12px 20px;border-radius:12px;z-index:300;opacity:0;transition:.3s;text-align:center;max-width:78%;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sheet-ov{position:absolute;inset:0;background:rgba(15,30,38,.5);z-index:250;opacity:0;pointer-events:none;transition:.25s;display:flex;align-items:flex-end}
.sheet-ov.show{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:100%;background:#fff;border-radius:24px 24px 36px 36px;padding:8px 18px 30px;transform:translateY(100%);transition:.3s cubic-bezier(.2,.8,.25,1);max-height:80%;overflow-y:auto;
  /* ★ 横のはみ出しを止める。中身が少しでも広いとシートが横に動き、
     縦にスクロールしたいだけなのに画面が左右へ揺れる。 */
  overflow-x:hidden;overscroll-behavior:contain}
/* 中の並びが縮めるようにしておく（縮めないと横にあふれる） */
.sheet .dt-row>*{min-width:0}
.sheet .ppl-grid{min-width:0}
.sheet .ppl-col{min-width:0;flex:1}
.sheet-ov.show .sheet{transform:none}
.sheet .grab{width:38px;height:4px;border-radius:4px;background:var(--line);margin:8px auto 14px}
.sheet .sh-ti{font-size:17px;font-weight:600;margin-bottom:2px}
.sheet .sh-sub{font-size:13px;color:var(--sub);margin-bottom:16px}
.avail-big{display:flex;align-items:center;gap:12px;padding:16px;border-radius:14px;margin-bottom:14px}
.avail-big.green{background:var(--green-bg)}.avail-big.orange{background:var(--orange-bg)}.avail-big.red{background:var(--red-bg)}.avail-big.purple{background:var(--purple-bg)}
.avail-big .n{font-size:30px;font-weight:700;line-height:1}
.avail-big.green .n{color:var(--green)}.avail-big.orange .n{color:var(--orange)}.avail-big.red .n{color:var(--red)}.avail-big.purple .n{color:var(--purple)}
.avail-big .tx{font-size:13px;font-weight:500}
/* --- 空き状況バナー --- */
.ab{position:relative;height:86px;border-radius:16px;border:2px solid;background:linear-gradient(135deg,#fdfdfd,#f2f4f5);overflow:hidden;display:flex;align-items:center;box-shadow:0 5px 16px -10px rgba(0,0,0,.45);margin-bottom:10px}
.ab.green{border-color:#26a34e}.ab.orange{border-color:#ef8402}.ab.red{border-color:#d4211f}.ab.purple{border-color:#AA5DE3}
.ab-l{width:40%;padding-left:20px;z-index:2}
.ab-l .lb{font-size:25px;font-weight:700;color:#1c1c1c;letter-spacing:.1em;display:block;line-height:1.1}
.ab-l .ln{display:block;width:74%;height:2.5px;border-radius:2px;margin-top:7px}
.ab.green .ab-l .ln{background:#26a34e}.ab.orange .ab-l .ln{background:#ef8402}
.ab-r{position:absolute;top:0;right:0;bottom:0;width:64%;clip-path:polygon(17% 0,100% 0,100% 100%,0 100%);display:flex;align-items:center;justify-content:center;color:#fff}
.ab-r.wide{width:74%}
.ab.green .ab-r{background:linear-gradient(115deg,#35c268,#0f8a3c)}
.ab.orange .ab-r{background:linear-gradient(115deg,#ffa22b,#ee6d05)}
.ab.red .ab-r{background:linear-gradient(115deg,#e6332f,#b40f12)}
.ab.purple .ab-r{background:linear-gradient(115deg,#9520E3,#630FA7)}
.ab-r .num{font-size:44px;font-weight:700;font-family:'DM Sans';line-height:1;text-shadow:0 2px 5px rgba(0,0,0,.22)}
.ab-r .unit{font-size:24px;font-weight:700;margin-left:3px;text-shadow:0 2px 5px rgba(0,0,0,.22)}
.ab-r .w{font-size:32px;font-weight:700;letter-spacing:.14em;text-indent:.14em;text-shadow:0 2px 5px rgba(0,0,0,.22)}
.ab-r::before,.ab-r::after{content:'';position:absolute;width:36px;height:9px;background:repeating-linear-gradient(114deg,#fff 0 4px,transparent 4px 10px);opacity:.85}
.ab-r::before{top:9px;right:13px}
.ab-r::after{bottom:9px;left:16px}
.ab-sub{font-size:12px;color:var(--sub);font-weight:400;margin:0 2px 14px;line-height:1.6}
.avail-big.green .tx{color:var(--green)}.avail-big.orange .tx{color:var(--orange)}.avail-big.red .tx{color:var(--red)}.avail-big.purple .tx{color:var(--purple)}
.mini-rcard{display:flex;gap:10px;align-items:center;background:#f7fafb;border-radius:11px;padding:11px 13px;margin-bottom:8px}
.mini-rcard .bar{width:3px;align-self:stretch;border-radius:3px;background:var(--teal)}
.mini-rcard.tentative .bar{background:var(--gold)}
.mini-rcard .tt{font-size:13px;font-weight:500}
.mini-rcard .ss{font-size:11.5px;color:var(--sub)}
.locked{background:var(--teal-tint);border:1px dashed var(--teal-tint2);border-radius:12px;padding:14px;text-align:center;font-size:12.5px;color:var(--teal-dark);font-weight:400;line-height:1.6;margin-bottom:14px}

/* =====================================================================
   レスポンシブ層
   ---------------------------------------------------------------------
   この上（_base.css 由来の記述）はモックそのまま。
   ここから下だけで、端末フレームの解体と PC レイアウトを行う。

   ・〜899px  … モックと同じ見た目（下部タブバー・1カラム）
   ・900px〜  … 左サイドバー・センタリング・複数カラム
   ===================================================================== */

:root{ --rail:250px; --maxw:1000px; }

/* ============================ 共通の土台 ============================ */
/* デモ用の端末フレーム（.phone / .notch）を解体し、画面いっぱいに広げる */
body{
  display:block; padding:0; min-height:100dvh;
  background:var(--bg); overflow:hidden;
}
.app{
  width:100%; height:100dvh; height:100svh;
  background:var(--bg); border-radius:0; padding:0; box-shadow:none;
  display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.screen{ flex:1; min-height:0; border-radius:0; }
.notch{ display:none }

/* セーフエリア（ノッチ／ホームバー） */
.app-header{ padding-top:calc(14px + env(safe-area-inset-top)) }
.lhead{ padding-top:calc(12px + env(safe-area-inset-top)) }
#splash{ padding-top:env(safe-area-inset-top) }

/* ======================= ランディングのヒーロー =======================
   未ログイン時の見出しはバナー画像に差し替えている。
   モックの背景グラデーション・装飾SVG・かぶせの半透明レイヤーは、
   画像と重なって濁るので、この状態のときだけ止める。
   ログイン後（.lhero.user）は今まで通りのあいさつ表示。 */
.lhero:not(.user){
  padding:0; background:#9cc4c3;
  /* 装飾SVGを隠すので切り取りは不要。PCではグリッドの行が
     内容に合わせて伸びなくなるため、visible に戻す。 */
  overflow:visible;
}
.lhero:not(.user)::after{ display:none; }
.lhero:not(.user) .bgart{ display:none; }
#heroGuest picture{ display:block; }
.hero-img{
  display:block; width:100%; height:auto;
  position:relative; z-index:2;
}

@media (min-width:900px){
  /* PCでは横に伸びすぎるので、中央で幅を止める。
     左右のすき間は画像の端の色で埋めて、継ぎ目が出ないようにする。 */
  /* PC版では上部のバナー画像は表示しない（不要とのことで非表示）。
     スマホ・タブレットでは従来どおり表示する。 */
  #top .lhero:not(.user){
    display:none;
  }
}

/* ============================ ログイン画面 ============================ */
/* モックは「空き状況にもどる」を position:absolute で浮かせ、.inner を
   justify-content:center で中央に寄せているだけだった。そのため縦に短い端末では
   内容がコンテナからはみ出し、上下に均等にあふれた結果ロゴが押し上げられて
   戻るリンクと重なる（しかも flex の中央寄せは上方向にスクロールできない）。

   戻るリンクを浮かせるのをやめ、#login の縦並びの先頭に置く。
   残りを .inner が占めてスクロールするので、構造的に重ならなくなる。 */
#login .back-top{
  position:static; align-self:flex-start; flex-shrink:0;
  margin:calc(10px + env(safe-area-inset-top)) 0 0 20px;
  min-height:44px; padding:0 12px 0 0;   /* 指で押せる高さを確保する */
}
#login .inner{
  flex:1; min-height:0; height:auto;
  justify-content:flex-start;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-top:14px;
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
}
/* 余白があるときだけ中央に寄る。足りなければ auto が 0 になり上詰めになる */
#login .login-logo{ margin-top:auto }
#login .login-card{ margin-bottom:auto }

/* ============================ 共通ナビ ============================ */
/* スマホでは下部タブバー。モックの .tabbar と同じ見え方を再現する。 */
.mainnav{
  flex-shrink:0; background:#fff; border-top:1px solid var(--line);
  display:flex; justify-content:space-around; align-items:flex-end;
  padding:8px 4px calc(12px + env(safe-area-inset-bottom));
  /* 中央の＋ボタンは margin-top:-24px でタブバーの上にはみ出す。
     .screen が position:relative なので、そのままだと静的配置のこのナビより
     上に描画され、はみ出した部分が隠れてしまう。重なり順を上げて出しきる。
     （シート250・トースト300・スプラッシュ200より下に収める） */
  position:relative; z-index:10;
}
.mainnav.off{ display:none }
.nav-brand, .nav-acct{ display:none }

/* ============================ PC（900px〜） ============================ */
@media (min-width:900px){

  /* ---------- シェル ---------- */
  .app{
    display:grid; grid-template-columns:var(--rail) 1fr;
    grid-template-rows:100%; height:100vh;
  }
  .app.nonav{ grid-template-columns:1fr }
  .screen{ grid-column:2; grid-row:1; min-width:0 }
  .app.nonav .screen{ grid-column:1 }

  /* ---------- サイドバー ---------- */
  .mainnav{
    grid-column:1; grid-row:1;
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    border-top:none; border-right:1px solid var(--line);
    padding:0 12px 14px; overflow-y:auto; gap:2px;
  }
  .nav-brand{
    display:flex; align-items:center; padding:20px 6px 16px;
    border-bottom:1px solid var(--line2); margin-bottom:12px;
    /* 新規予約ボタン(.tab.center)が order:-1 で最上部へ来るため、
       ロゴはそれより上（order:-2）に固定して「ロゴ→新規予約→メニュー」順にする */
    order:-2;
  }
  .nav-brand img{ height:32px; width:auto; display:block }

  /* タブ → 縦並びのリンク */
  .mainnav .tab{
    flex:0 0 auto; flex-direction:row; justify-content:flex-start;
    gap:11px; padding:10px 12px; border-radius:10px; font-size:13.5px;
    font-weight:500; color:var(--sub); transition:.13s;
  }
  .mainnav .tab svg{ width:20px; height:20px }
  .mainnav .tab span{ font-size:13.5px }
  .mainnav .tab:hover{ background:var(--line2); color:var(--ink) }
  .mainnav .tab.active{ background:var(--teal-tint); color:var(--teal-deep); font-weight:600 }

  /* 中央のFAB → 幅いっぱいのボタン */
  .mainnav .tab.center{
    order:-1; margin-bottom:10px; padding:0;
    background:var(--teal); border-radius:12px; height:46px;
    color:#fff; justify-content:center; gap:8px;
    box-shadow:0 6px 16px -6px rgba(10,186,181,.75);
  }
  .mainnav .tab.center:hover{ background:var(--teal-dark) }
  .mainnav .tab.center .fab{
    width:auto; height:auto; margin:0; border:none; background:none;
    box-shadow:none; border-radius:0;
  }
  .mainnav .tab.center .fab svg{ width:19px; height:19px }
  .mainnav .tab.center span{ margin:0; font-size:14.5px; font-weight:600 }

  /* 足元のアカウントチップ */
  .nav-acct{
    display:flex; align-items:center; gap:10px; margin-top:auto;
    padding:10px; border-radius:11px; border-top:1px solid var(--line2);
    padding-top:14px; text-align:left; width:100%; transition:.13s;
  }
  .nav-acct:hover{ background:var(--line2) }
  .na-av{
    width:34px; height:34px; border-radius:50%; flex-shrink:0; overflow:hidden;
    background:var(--teal-tint); display:flex; align-items:center; justify-content:center;
  }
  .na-av img{ width:26px; height:auto }
  .na-tx{ min-width:0; display:block }
  .na-tx b{ display:block; font-size:12.5px; font-weight:600; line-height:1.35;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .na-tx i{ display:block; font-size:10.5px; font-style:normal; color:var(--muted);
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

  /* ---------- ヘッダー（PCでは薄いトップバー） ---------- */
  .app-header{
    padding:16px 26px; background:#fff; color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .app-header .page-title{ color:var(--ink); font-size:17px; text-align:left }
  .app-header .hicon{ color:var(--sub) }
  .lhead{ padding:14px 26px }

  /* サイドバーがある間は、ヘッダー内のロゴとハンバーガーは重複するので隠す */
  .app:not(.nonav) .lhead .brand-logo{ display:none }
  .app:not(.nonav) .lhead .lhead-mid{ border-left:none; padding-left:0 }
  .app:not(.nonav) .lhead .burger:not(.bell){ display:none }
  .lhead-mid .lt1{ font-size:16px }
  .lhead-mid .lt2{ font-size:12px }

  /* ---------- 本文のセンタリング ---------- */
  .scroll{ padding-inline:max(26px, calc((100% - var(--maxw)) / 2)) }
  .scroll > *{ margin-left:0 !important; margin-right:0 !important }

  /* ---------- ランディング／ダッシュボード ---------- */
  #top .scroll{
    display:grid; grid-template-columns:minmax(0,1fr) 372px;
    gap:0 22px; align-content:start; padding-bottom:40px;
    --maxw:1240px;
  }
  #top .lhero{
    grid-column:1/-1;
  }
  #top .lhero h1{ font-size:27px }
  #top .lhero p{ font-size:13.5px }
  #top .pills,
  #top .cal-card    { grid-column:1 }
  /* グリッドの行の高さは右列の要素に合わされるため、放っておくと
     カレンダーカードがその高さに押し縮められて中身が隠れる。
     カード自身の高さ（グリッド＋見出し）を主張させる。 */
  #top .cal-card{ align-self:start; }
  #top #homeAlert,
  #top #noticeBox,
  #top .teal-cta,
  #top #contractCta,
  #top .phone-cta   { grid-column:2 }
  #top .pills{ padding:16px 0 0 }
  #top .cal-card{ margin-top:12px !important }
  #top #homeAlert,
  #top #noticeBox,
  #top .teal-cta{ margin-top:16px !important }
  #top #contractCta{ margin-top:12px !important; grid-template-columns:1fr }
  #top .phone-cta{ margin-top:8px !important }

  /* カレンダーを大きく（PCの主役） */
  .acell{ min-height:78px; padding:7px 5px; gap:5px; justify-content:flex-start }
  .acell .dn{ font-size:14px; font-weight:600 }
  /* 残り人数チップはモックの組み方（em+b+i）のまま、セルに合わせて一段大きく */
  .acell .chip{ padding:5px 0 6px }
  .acell .chip b{ font-size:16px }
  .acell .chip em, .acell .chip i{ font-size:9.5px }
  .acell .chip.word{ font-size:11.5px; padding:8px 0 9px }
  .acell .mine{ width:8px; height:8px; top:6px; right:6px }
  .acell.tapable{ cursor:pointer; transition:.12s }
  .acell.tapable:hover{ background:var(--teal-tint) }
  .adow span{ font-size:12px; padding:9px 0 }
  .cal-month{ font-size:17px }

  /* ---------- 右列パネル（ログイン後） ---------- */
  /* グリッドの自動配置は「前の行に戻らない」ため、右列の要素が DOM 上で
     カレンダーより前にあると、カレンダーがその下まで押し下げられる。
     ログイン後はカレンダーに行を明示して、常に左列の先頭へ置く。 */
  body.is-auth #top .cal-card{ grid-row:1 / span 8; margin-top:16px !important }
  /* 中身が無いときのアラート枠は、グリッドの1マスを食って左右の頭がずれるので畳む */
  #top #homeAlert:empty{ display:none }
  body.is-auth #pcSummary,
  body.is-auth #pcUpcoming{ display:block; grid-column:2; margin-top:16px !important }

  /* PCではお知らせを流さない。400px幅で横スクロールさせると常に文が切れて読めないため、
     アニメーションを止めて全文を縦に並べる。2周目(.dup)は重複なので隠す。 */
  #top .notice-body{ white-space:normal; mask-image:none; -webkit-mask-image:none }
  #top .notice-body .nflow{ display:block; animation:none }
  #top .notice-body .nflow .grp{ display:block }
  #top .notice-body .nflow .grp.dup{ display:none }
  #top .notice-body .nflow .grp span{ display:block; padding-right:0 }
  #top .notice-body .nflow .grp span + span{ margin-top:7px }

  /* ---------- 予約一覧 ---------- */
  .seg{ padding-inline:max(26px, calc((100% - var(--maxw)) / 2)) }
  .seg .s{ flex:0 0 auto; padding:14px 22px 12px; cursor:pointer }
  .list-tools{ padding-inline:max(26px, calc((100% - var(--maxw)) / 2)) }
  /* 予約一覧は現場グループ（.gcard）を全幅で縦に積む。
     以前は .lcard を2列gridにしていたが、grid だと行の高さに
     カードが押し縮められてスクロールできなくなるため、通常フローにする。 */
  #listScroll{ --maxw:820px; padding-block:14px }
  #listScroll > .gcard{ margin-inline:0 }

  /* ---------- 新規予約ウィザード ---------- */
  #new .scroll{ --maxw:760px }
  #new .stepper{ padding:22px 20px 10px }
  #new .stepper .st{ width:110px }
  #new .stepper .lineseg{ max-width:80px }
  #new .foot{ padding-inline:max(26px, calc((100% - 760px) / 2)) }

  /* ---------- メッセージ ---------- */

  /* ---------- アカウント ---------- */
  #account .scroll{ --maxw:900px }
  .acct-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; align-items:start }
  .acct-hero{ cursor:pointer }
  .acct-item{ cursor:pointer; transition:.12s }
  .acct-item:hover{ background:var(--line2) }

  /* ---------- お知らせ・ヘルプ・規約 ---------- */
  #notices .scroll{ --maxw:820px }
  #help .scroll,
  #legal .scroll{ --maxw:820px }

  /* ---------- ボトムシート → 右サイドのドロワー ---------- */
  .sheet-ov{ justify-content:flex-end; align-items:stretch }
  .sheet{
    width:min(560px,46vw); max-height:none; height:100%;
    border-radius:0; transform:translateX(100%);
    transition:transform .26s cubic-bezier(.32,.72,0,1);
    overflow-y:auto; padding-top:26px;
  }
  .sheet-ov.show .sheet{ transform:none }
  .sheet .grab{ display:none }

  /* ---------- トースト ---------- */
  .toast, .toast.show{ left:auto; right:28px; bottom:28px;
                       transform:none; max-width:420px; text-align:left }

  /* ---------- ログイン ---------- */
  /* 横に伸びきると間延びするので、カード幅を止めて中央に置く。
     縦は align-items だけを使い、justify-content:center は入れない。
     中央寄せにすると内容があふれたとき上方向にスクロールできなくなるため、
     上下中央は logo の margin-top:auto / card の margin-bottom:auto に任せる。 */
  #login .inner{ padding:24px 24px 40px }
  #login .login-logo{ width:186px; max-width:none; margin-bottom:6px }
  #login .brand-s{ margin-bottom:20px }
  #login .login-card{ padding:26px 26px 28px }

  /* ---------- 押せる要素にカーソル ---------- */
  .tab, .pill, .ccard, .tc-btn, .btn, .chip-nav, .s, .sort, .filter,
  .tchip, .dow, .sw, .nt-row, .copy-row, .copy-past, .sitechip,
  .repeat-btn, .dedit, .btn-gps, .ar-call, .db-a button{ cursor:pointer }
}

/* ============ PC（1200px〜）：カレンダーを画面の高さに合わせる ============
   月によって行数が5行にも6行にもなるため、セルの高さを固定すると
   下に大きな余白が出たり、逆にはみ出したりする。
   カードの高さを画面に合わせ、行（grid-auto-rows）で等分させる。      */
@media (min-width:1200px){
  /* 高さそのものは JS（syncCalHeight）が右列に合わせて入れる。
     右列のカード枚数が状況で変わるため、CSS だけでは確実にそろわない。
     ここでは「中身を高さに追従させる」土台だけ用意する。 */
  body.is-auth #top .cal-card{
    display:flex; flex-direction:column;
    min-height:470px;
    margin-bottom:0;          /* .cal-card の 14px。高さ計算に含めない */
  }
  body.is-auth #top .agrid{ flex:1; min-height:0; grid-auto-rows:minmax(56px,1fr) }
  body.is-auth #top .acell{ min-height:0 }
  body.is-auth #top .cal-note{ flex:none }
}

/* ================== 狭いPC・タブレット横（900〜1199px） ==================
   右列が固定幅なので、このあたりではカレンダーが 300px 前後まで潰れてしまう。
   2カラムをやめて1カラムに畳み、カレンダーを先頭に置く。               */
@media (min-width:900px) and (max-width:1199px){
  #top .scroll{ grid-template-columns:minmax(0,1fr) }
  #top #homeAlert,
  #top #noticeBox,
  #top .teal-cta,
  #top #contractCta,
  #top .phone-cta,
  body.is-auth #pcSummary,
  body.is-auth #pcUpcoming{ grid-column:1 }
  body.is-auth #top .cal-card{ grid-row:auto; order:-1 }
}

/* ============================ 広い画面 ============================ */
@media (min-width:1500px){
  :root{ --rail:270px }
  #top .scroll{ grid-template-columns:minmax(0,1fr) 400px }
  .acell{ min-height:80px }
}

/* ============================ モーション ============================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ============ 予約：カレンダーで希望日を選ぶ ============ */
.dsel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 8px 12px;margin-top:4px}
.dsel-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 10px}
.dsel-nav{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--teal);cursor:pointer}
.dsel-nav:active{background:var(--teal-tint)}
.dsel-nav:disabled{opacity:.3;cursor:default}
.dsel-ym{font-size:15px;font-weight:700;color:var(--ink)}
.dsel-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px}
.dsel-dow span{text-align:center;font-size:11px;color:var(--sub);padding:4px 0}
.dsel-dow span:first-child{color:#e5736f}
.dsel-dow span:last-child{color:#5a9bd4}
.dsel-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dcell{aspect-ratio:1/1;border:none;background:none;border-radius:10px;cursor:pointer;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;
  font-family:inherit;transition:transform .08s}
.dcell .dn{font-size:14px;font-weight:600;color:var(--ink);line-height:1}
.dcell .dsub{font-size:9px;line-height:1;font-weight:600}
.dcell.other .dn{color:#cfd8dd}
.dcell.past{cursor:default}
.dcell.past .dn{color:#d3dbe0}
.dcell.past .dsub{display:none}
/* 空き状況ドット色 */
.dcell.green .dsub{color:var(--teal)}
.dcell.orange .dsub{color:#d98a2b}
.dcell.purple .dsub{color:#9a83c8}
.dcell.red .dn{color:#e0a0a0}
.dcell.red{cursor:default}
.dcell.red .dsub{color:#e5736f}
.dcell:not(.past):not(.red):not(.other):active{transform:scale(.9)}
.dcell:not(.past):not(.other):hover{background:var(--teal-tint)}
/* 選択中 */
.dcell.on{background:var(--teal)}
.dcell.on .dn,.dcell.on .dsub{color:#fff}
.dcell.on:hover{background:var(--teal)}
/* 今日の枠 */
.dcell.today::after{content:'';position:absolute;inset:3px;border:1.5px solid var(--teal-tint2);border-radius:8px;pointer-events:none}
.dcell.on.today::after{border-color:rgba(255,255,255,.6)}
.dsel-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:11px 4px 2px;
  font-size:10.5px;color:var(--sub)}
.dsel-legend span{display:inline-flex;align-items:center;gap:3px}
.dsel-legend i{font-style:normal;font-weight:700}
.dsel-selected{margin-top:12px;padding:11px;background:var(--teal-tint);border-radius:12px}
.dsel-selected .dst{font-size:12px;font-weight:700;color:var(--teal-dark);margin-bottom:8px;display:flex;align-items:center;gap:6px}
  border-radius:20px;padding:5px 6px 5px 11px;font-size:12.5px;font-weight:600;color:var(--ink)}
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1}
.dsel-none{font-size:12px;color:var(--sub);text-align:center;padding:4px}

/* ★ 新規予約カレンダー：トップ（空き状況）と同じ .acell＋.chip 表示を流用 */
.dsel .adow{ border-bottom:1px solid var(--line); }
.dsel-agrid{ margin-top:0; }
.dsel-agrid .acell{ min-height:54px; }
/* 選択中の日：濃いティール枠＋薄いティール地＋右上に✓（見やすく） */
.acell.sel{ background:var(--teal-tint); box-shadow:inset 0 0 0 2.5px var(--teal); z-index:1; }
.acell.sel .dn{ color:var(--teal-dark); font-weight:800; }
.acell.sel.today{ background:var(--teal-tint); }
.acell .acheck{ position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%;
  background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.22); }
/* ★ 文はかならず <span> で1つの塊にする。素のテキストと <b> を直接置くと
   それぞれが別の flex アイテムになり、語の途中で勝手に折り返す。 */
.dsel-tip{ display:flex; align-items:flex-start; gap:5px; font-size:11.5px; color:var(--sub);
  margin:9px 2px 2px; line-height:1.55; }
.dsel-tip svg{ flex:none; color:var(--teal); margin-top:3px; }
.dsel-tip span{ min-width:0; }
.dsel-tip b{ color:var(--teal-dark); font-weight:700; }

/* ============ 予約フッターの状態表示 ============ */
.foot-hint{flex:1 0 100%;font-size:12px;color:var(--sub);text-align:center;padding:2px 4px 8px;line-height:1.5}
.foot-hint b{color:var(--ink);font-weight:700}
.foot-hint.ok{color:var(--teal);font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px}
.btn.next.is-disabled{background:#c8d4d5;box-shadow:none}
.btn.next.is-disabled:active{transform:none;background:#c8d4d5}

/* ============ 予約フォームのセクション見出し ============ */
.sec-head{display:flex;align-items:flex-start;gap:10px;margin:22px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.sec-head:first-of-type{border-top:none;padding-top:0;margin-top:6px}
.sec-no{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.sec-t{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.sec-d{font-size:11.5px;color:var(--sub);margin-top:2px;line-height:1.5}

/* ============ 予約一覧：現場ごとのグループ ============ */
.gcard{background:#fff;border:1px solid var(--line);border-radius:14px;margin:10px 14px;overflow:hidden;
  box-shadow:0 1px 3px rgba(18,59,56,.05)}
.gcard-head{display:flex;align-items:center;gap:10px;padding:14px 15px;cursor:pointer;user-select:none}
.gcard-head:active{background:#f7fafb}
.gc-left{flex:1;min-width:0}
.gc-site{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-span{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--sub);margin-top:4px;font-weight:600}
.gc-span svg{flex:0 0 auto;opacity:.7}
.gc-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.gb{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:0;border:1px solid transparent}
/* 報告書の確認待ち。勤務日が過ぎているので日付では気づけない。
   カードを畳んだままでも分かるよう、他より強い色にする。 */
.gb-rep{background:#FFE3A6;border-color:#C98A1F;color:#6B4200}
.gb-confirmed{background:#E3F3EC;border-color:#93CDB4;color:#0F6B4F}
/* 昼／夜（開始18:00以降が夜）。一覧でひと目で分かるように色を分ける */
.gb-day{background:#FFF4D6;border-color:#E3C88A;color:#8A5A00}
.gb-chg{background:#FCEFD8;border-color:#E0A94A;color:#8A5A00}
.badge.b-chg{background:#FCEFD8;border-color:#E0A94A;color:#8A5A00;margin-left:5px}
.gb-night{background:#E6E9F5;border-color:#9AA6CC;color:#2F3C68}
.gc-applied{font-size:10.5px;color:var(--muted);margin-top:3px}
.slot-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:0;border:1px solid transparent;margin-right:6px;vertical-align:1px}
.slot-chip.day{background:#FFF4D6;border-color:#E3C88A;color:#8A5A00}
.slot-chip.night{background:#E6E9F5;border-color:#9AA6CC;color:#2F3C68}
.gb-tentative{background:#FCEFD8;border-color:#E0A94A;color:#8A5A00}
.gb-cancelled{background:#F3EDED;border-color:#C9AFAF;color:#8A6060}
.gc-chev{flex:0 0 auto;color:var(--sub);transition:transform .2s}
.gcard.open .gc-chev{transform:rotate(180deg)}
.gcard-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
.gcard.open .gcard-body{max-height:1400px}
.grow{display:flex;align-items:center;gap:11px;padding:12px 15px;border-top:1px solid var(--line);cursor:pointer}
.grow:active{background:#f7fafb}
.gr-date{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--ink);min-width:52px}
.gr-wd{font-size:11px;font-weight:600;color:var(--sub);margin-left:2px}
.gr-mid{flex:1;min-width:0}
.gr-time{font-size:13px;color:var(--ink);font-weight:600}
.gr-ppl{font-size:11.5px;color:var(--sub);margin-top:1px}
.grow .badge{flex:0 0 auto}
.gr-arrow{flex:0 0 auto;color:#c8d4d5}
.grow.cancelled .gr-date,.grow.cancelled .gr-time{color:#aab6b5;text-decoration:line-through}
/* 左端の状態色ライン。★ 順番が効く。あとに書いたものが勝つので、
   夜間 → キャンセル → 報告書の確認待ち の順に強くしている。 */
.grow{position:relative}
.grow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.grow.confirmed::before{background:var(--teal)}
.grow.tentative::before{background:#e0a94a}

/* 夜間：地色を藍に寄せる。左の線は状態のままにして、両方を見えるようにする */
.grow.night{background:#F4F7FD}
.grow.night:active{background:#EBF0FB}

/* キャンセル・予約不成立：終わったものと分かるよう地色も線も落とす */
.grow.cancelled{background:#FBF5F5}
.grow.cancelled:active{background:#F6ECEC}
.grow.cancelled::before{background:#D8A9A9}

/* 報告書の確認待ち：いちばん急ぎたいので最優先で目立たせる */
.grow.needrep{background:#FFFBF0}
.grow.needrep:active{background:#FFF6E2}
.grow.needrep::before{background:#E8A33A}
.grow.needrep .gr-date{color:#8A5A00}

/* ============ ステップ2：日ごとの人数調整 ============ */
.perday-note{font-size:12px;color:var(--sub);line-height:1.6;margin:16px 0 10px;
  padding:10px 12px;background:var(--teal-tint);border-radius:10px}
.perday-note b{color:var(--teal-dark)}
.perday-list{display:flex;flex-direction:column;gap:8px}
/* 日別の行もスワイプで外せるようにする。
   .pd-row はそれ自体がカードなので、スワイプの入れ物には
   背景も余白も持たせない（二重の枠に見えてしまうため）。 */
.pd-wrap{border-radius:12px;overflow:hidden;border:0}
.pd-wrap .dsel-slide{padding:0;background:transparent;min-height:0;gap:8px}
/* 選択モードのチェックは行の外に置く（カードの中に入れると詰まって見える） */
.pd-wrap .pd-chk{flex:none;margin-left:2px}
.pd-wrap .pd-row{flex:1;min-width:0}
.pd-wrap.picked .pd-row{border-color:var(--teal);background:var(--teal-tint)}
.pd-wrap .dsel-del{border-radius:0 12px 12px 0}
.pd-wrap.bad .dsel-slide{background:transparent}
.pd-row{display:flex;align-items:center;gap:11px;width:100%;padding:12px 13px;
  background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer;
  font-family:inherit;text-align:left;transition:border-color .12s}
.pd-row:active{background:#f7fafb}
.pd-row.custom{border-color:var(--teal);background:var(--teal-tint)}
.pd-row.over{border-color:#e6b980;background:#fef7ee}
.pd-date{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--ink);min-width:54px}
.pd-wd{font-size:11px;font-weight:600;color:var(--sub);margin-left:2px}
.pd-mid{flex:1;min-width:0}
.pd-ppl{font-size:14px;font-weight:700;color:var(--ink)}
.pd-q{font-size:11px;font-weight:600;color:var(--sub)}
.pd-av{font-size:11px;font-weight:600;margin-top:1px}
.pd-av.green{color:var(--teal)}
.pd-av.orange{color:#d98a2b}
.pd-av.purple{color:#9a83c8}
.pd-av.red{color:#e5736f}
.pd-badge{flex:0 0 auto;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px}
.pd-row .pd-badge{background:var(--teal);color:#fff}
.pd-row .pd-badge.pd-same{background:#eef3f4;color:#8a9a98}
.pd-arr{flex:0 0 auto;color:#c8d4d5}

/* ============ 予約一覧：一括選択 ============ */
.selbtn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--sub);
  padding:6px 12px;border:1px solid var(--line);border-radius:20px;cursor:pointer}
.selbtn.on{background:var(--teal);border-color:var(--teal);color:#fff}
/* グループのチェック */
.gchk{flex:0 0 auto;width:24px;height:24px;border:2px solid var(--line);border-radius:7px;
  display:flex;align-items:center;justify-content:center;background:#fff;margin-right:2px}
.gchk.on{background:var(--teal);border-color:var(--teal)}
.gchk.part{background:var(--teal);border-color:var(--teal)}
.gchk-dash{width:11px;height:2.5px;background:#fff;border-radius:2px}
/* 行のチェック */
.rchk{flex:0 0 auto;width:20px;height:20px;border:2px solid var(--line);border-radius:6px;
  display:flex;align-items:center;justify-content:center;background:#fff}
.rchk.on{background:var(--teal);border-color:var(--teal)}
.rchk.disabled{opacity:.3}
.gcard.sel{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
/* 選択バー（画面下） */
.selbar{position:sticky;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:none;
  box-shadow:0 -4px 16px rgba(18,59,56,.08);z-index:20}
.selbar.show{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sb-count{font-size:13px;color:var(--ink)}
.sb-count b{color:var(--teal);font-size:16px;font-weight:700}
.sb-actions{margin-left:auto;display:flex;gap:8px}
.sb-btn{padding:10px 16px;border-radius:10px;font-size:13px;font-weight:700;border:none;cursor:pointer;font-family:inherit}
.sb-btn.change{background:var(--teal-tint);color:var(--teal-dark)}
.sb-btn.cancel{background:#fbeaea;color:var(--danger)}
.sb-btn:disabled{opacity:.4;cursor:default}
/* 一括操作シート */
.sheet-wrap{position:fixed;inset:0;background:rgba(18,33,31,.4);z-index:100;display:flex;
  align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.sheet-wrap.show{opacity:1;pointer-events:auto}
.sheet-inner{background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:8px 20px 24px;
  max-height:88vh;overflow-y:auto;transform:translateY(100%);transition:transform .26s}
.sheet-wrap.show .sheet-inner{transform:translateY(0)}
.sheet-inner .grab{width:38px;height:4px;background:#d8e0e0;border-radius:2px;margin:6px auto 14px}
.bs-ti{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px}
.bs-sub{font-size:12.5px;color:var(--sub);line-height:1.6;margin-bottom:4px}
.bulk-warn{background:#fef7ee;border:1px solid #f0d8b8;border-radius:10px;padding:11px 13px;
  font-size:12.5px;color:#a86518;margin-top:10px;line-height:1.6}
.bulk-warn b{color:#8a5010}
.bs-btns{display:flex;gap:10px;margin-top:18px}
.bs-btns .btn{flex:1}

/* ============== 地域（県）の選択・切り替え ============== */
.pref-pick{position:absolute;inset:0;z-index:190;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:28px 26px calc(28px + env(safe-area-inset-bottom));background:linear-gradient(170deg,#f4fbfa,#e2f4f2 62%,#d3eeeb);
  transition:opacity .3s ease,visibility .3s ease}
.pref-pick.out{opacity:0;visibility:hidden}
.pref-pick .pp-logo{width:132px;max-width:44vw;margin-bottom:2px}
.pref-pick .pp-t{font-size:16px;font-weight:700;color:var(--teal-deep);letter-spacing:.02em}
.pref-pick .pp-s{font-size:12.5px;line-height:1.65;color:#41706c;text-align:center;margin-bottom:6px}
.pref-pick .pp-list{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px}
.pref-pick .pp-btn{width:100%;height:56px;padding:0 18px;border:1px solid #bfe4e0;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 16px -10px rgba(6,111,106,.55)}
.pref-pick .pp-btn:active{transform:translateY(1px)}
.pref-pick .pp-nm{font-size:16px;font-weight:700;color:var(--teal-deep)}
.pref-pick .pp-go{display:flex;color:var(--teal)}
.pref-bar{margin:14px 14px 2px;display:flex}
.pref-chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px 0 10px;background:transparent;border-radius:10px}
.pref-chip:active{background:var(--teal-tint)}
.pref-chip .pc-pin{color:var(--teal);flex:none}
.pref-chip .pc-nm{font-size:17px;font-weight:700;color:#232323;letter-spacing:.01em}
.pref-chip .pc-cv{color:#232323;flex:none;margin-left:1px}
.pref-rows{display:flex;flex-direction:column;margin-top:6px}
.pref-row{display:flex;align-items:center;justify-content:space-between;width:100%;height:54px;padding:0 4px;
  border-bottom:1px solid var(--line);background:none}
.pref-row:last-child{border-bottom:0}
.pref-row .pr-nm{font-size:15.5px;font-weight:600;color:var(--ink)}
.pref-row .pr-ck{color:var(--teal)}
.pref-row.on .pr-nm{color:var(--teal-deep)}
.pref-row.soon .pr-nm{color:#9aacab;font-weight:500}
.pref-pick .pp-btn.soon{background:#f2f7f7;border-color:#dbe8e7;box-shadow:none}
.pref-pick .pp-btn.soon .pp-nm{color:#8aa3a1}
.pref-pick .pp-btn.soon:active{transform:none}
.pref-pick .pp-soon{font-size:11.5px;font-weight:700;color:#7d9694;background:#e4eded;border-radius:999px;padding:4px 10px}

/* ============== PC（ログイン後）の右列パネル ============== */
.side-card{display:none;margin:14px 14px 0;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 16px 13px;box-shadow:var(--shadow)}
.side-card .sc-head{display:flex;align-items:baseline;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--teal-dark);letter-spacing:.02em;margin-bottom:11px}
.side-card .sc-sub{font-size:11px;font-weight:500;color:var(--sub)}
.side-card .sched-top{margin-bottom:0}
.side-card .sched-row{cursor:pointer;transition:.12s}
.side-card .sched-row:hover{background:var(--teal-tint)}
.side-card .sc-empty{font-size:12.5px;color:var(--sub);line-height:1.6;padding:6px 2px 10px}
.side-card .sc-more{width:100%;height:40px;margin-top:11px;border:1px solid var(--teal-tint2);
  border-radius:10px;background:var(--teal-tint);color:var(--teal-deep);font-size:12.5px;font-weight:600}
.side-card .sc-more:active{transform:translateY(1px)}

/* ============== 空き状況（トップ）の下に敷くイラスト ==================
   #top は画面いっぱいの器なので、絵は常に画面の下端に貼りつく。
   中身（お知らせ・カレンダー・通知など）はこの上に重なるため、
   内容が増えれば自然に隠れる。スクロールは増えない。
   画面の小さい端末では内容に覆われて見えなくなるが、それでよい。
   画像は 55% の濃さに薄め、上端はアプリの地の色へ溶かしてある。 */
body.is-auth #top{
  background-image:url("img/bg-guard.jpg?v=2");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))){
  body.is-auth #top{ background-image: image-set(url("img/bg-guard.webp?v=2") type("image/webp"),
                                                 url("img/bg-guard.jpg?v=2")  type("image/jpeg")); }
}
/* 画面が広いと絵が大きくなりすぎるので、高さで頭打ちにする（タブレットまで） */
@media (min-width:560px) and (max-width:899px){ body.is-auth #top{ background-size:auto 230px; } }

/* PC（900px〜）は、下端に横幅いっぱいの帯として敷き、上端をページの地色へ
   フェードして溶かす（人物が胸〜腰あたりで自然に消える＝背景的）。
   #top 直貼りの背景だと全面に伸びて巨大化するため、::after の帯に置き換える。 */
@media (min-width:900px){
  body.is-auth #top{ background-image:none; position:relative; }
  body.is-auth #top .scroll{ position:relative; z-index:1; }
  body.is-auth #top::after{
    content:''; position:absolute; left:0; right:0; bottom:0; z-index:0;
    height:320px; pointer-events:none;
    background:url("img/bg-guard.jpg?v=2") center 30% / cover no-repeat;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 60%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 60%);
  }
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))){
  @media (min-width:900px){
    body.is-auth #top::after{
      background-image: image-set(url("img/bg-guard.webp?v=2") type("image/webp"),
                                  url("img/bg-guard.jpg?v=2")  type("image/jpeg"));
    }
  }
}

/* ============== 予約一覧：予約が無いときの表示（2026-07-30 追加）==============
   イラストの地はアプリの地の色（--bg）に合わせてあるので継ぎ目は出ない。 */
.list-empty{
  padding:26px 20px 34px; text-align:center;
}
.list-empty picture{ display:block; }
.list-empty img{
  display:block; width:100%; max-width:230px; height:auto; margin:0 auto 6px;
}
.list-empty h3{
  margin:0 0 10px; font-size:17px; font-weight:800; color:var(--ink); letter-spacing:.01em;
}
.list-empty p{
  margin:0 0 20px; font-size:13px; line-height:2; color:var(--muted);
}
/* 枠線だけの丸いボタン。枠はティファニーブルー #0ABAB5。
   文字は同じ色だと白地とのコントラストが 2.4:1 しかないので、
   少し濃い #07726F にして 5.8:1 を確保している。 */
.list-empty .le-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; max-width:320px; height:52px;
  background:#fff; border:2px solid #0ABAB5; border-radius:999px;
  font-size:15.5px; font-weight:800; letter-spacing:.02em; color:#07726F;
  box-shadow:none;
  transition:background .15s, border-color .15s, color .15s;
}
.list-empty .le-btn:hover{ background:#F1FCFC; border-color:#17C8C2; }
.list-empty .le-btn:active{ background:#E6F8F8; }
.list-empty .le-btn:disabled{ opacity:.55; }

/* 報告書のやり取り（監督さん ⇄ YSS）。
   ★ 角丸は使わない（一覧のタグに合わせる）。誰の発言かは左の線で示す。 */
.thr{ margin:14px 0 0; border:1px solid var(--line); background:#fff; padding:10px 12px; }
.thr-h{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--sub); padding-bottom:8px; border-bottom:1px solid var(--line2); }
.thr-m{ padding:9px 0 9px 10px; border-left:3px solid var(--line); border-bottom:1px solid var(--line2); }
.thr-m:last-child{ border-bottom:0; padding-bottom:2px; }
.thr-m.me{ border-left-color:var(--teal); }
.thr-m.yss{ border-left-color:#8A5A00; background:#FFFBF0; }
.thr-w{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--ink); }
.thr-at{ margin-left:auto; font-weight:500; color:var(--muted); font-size:11px; }
.thr-fix{ font-size:10.5px; font-weight:700; color:#6B4200; background:#FFE3A6;
  border:1px solid #C98A1F; padding:1px 6px; }
.thr-b{ font-size:12.5px; color:var(--ink); line-height:1.7; margin-top:4px; white-space:pre-wrap; }

/* 引っ張って読み込むときの表示 */
.pull-ind{
  height:0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition:height .18s ease;
}
.pull-ind span{
  font-size:12px; font-weight:700; color:var(--muted);
  padding:6px 14px; border-radius:999px; background:#fff; box-shadow:var(--shadow);
}
.pull-ind.ready span{ color:var(--teal-600, #0A9691); }

/* ---- タブの承認待ちバッジ（2026-07-30 追加）---- */
.mainnav .tab .tab-ic{ position:relative; display:inline-flex; }
.mainnav .tab .tab-badge{
  position:absolute; top:-5px; right:-9px;
  min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--danger,#d64545); color:#fff;
  font-size:10px; font-style:normal; font-weight:800; line-height:16px; text-align:center;
  box-shadow:0 0 0 2px var(--card,#fff);
}

/* ============== 報告書：年タブ・月チップ・検索（2026-07-30 追加）============== */
.rep-search{ display:flex; align-items:center; gap:8px; padding:0 16px 10px; }
.rep-search input{
  flex:1; min-width:0; height:42px; padding:0 14px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  font-size:13.5px; font-family:inherit; color:var(--ink);
}
.rep-search input:focus{ outline:none; border-color:#0ABAB5; box-shadow:0 0 0 3px rgba(10,186,181,.15); }

/* 報告書の年月しぼり込み。★ ボタンを横に並べていたが、年が増えるほど
   横スクロールが伸びて探せなくなるのでプルダウンにした。 */
.rep-period{ display:flex; gap:8px; padding:0 16px 10px; }
.rp-sel{
  flex:1 1 0; min-width:0; height:40px; padding:0 10px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  color:var(--ink); font-size:13px; font-weight:700; font-family:inherit;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b78' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}
.rp-sel:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,186,181,.12); }
.rp-sel:disabled{ background-color:#f4f7f7; color:var(--muted); }

.rep-mon .rm i{
  font-style:normal; font-size:10px; font-weight:800; margin-left:5px;
  background:rgba(0,0,0,.06); border-radius:999px; padding:1px 6px;
}
.rep-mon .rm.on i{ background:rgba(255,255,255,.5); }

/* ============== 日勤／夜間の切り替え（2026-07-31 追加）============== */
.slot-tabs{
  display:flex; gap:6px;
  padding:0 14px;
  margin:18px 0 4px;      /* 上：お知らせ・地域との間をあける（下はカレンダー側の14pxが効く） */
}
.slot-tabs .st{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; border-radius:11px; cursor:pointer;
  background:#fff; border:1px solid var(--line); color:var(--sub);
  font-size:13px; font-weight:700; font-family:inherit;
  transition:background .15s, border-color .15s, color .15s;
}
.slot-tabs .st picture{ display:flex; align-items:center; flex:none; }
.slot-tabs .st .si{ display:block; width:auto; height:17px; flex:none; }
.slot-tabs .st.on{
  background:#0ABAB5; border-color:#0ABAB5; color:#04222A; font-weight:800;
  box-shadow:0 2px 10px -3px rgba(10,186,181,.6);
}
/* 夜間を選んでいるときは、選択中の色を夜らしい濃紺にする */
.slot-tabs .st[data-slot="night"].on{
  background:#1E3A6B; border-color:#1E3A6B; color:#fff;
  box-shadow:0 2px 10px -3px rgba(30,58,107,.6);
}

/* ============== 夜間表示（2026-07-31 追加）==============
   夜間に切り替えたことが分かるよう暗くするが、暗くしすぎると読めない。
   地は #2A3B5E（濃紺だが黒すぎない）にし、文字はすべて 4.5:1 以上を確保。
   とくに過去の日付は、以前 2.2:1 しかなく見えづらかった。 */
body.slot-night .cal-card{
  background:linear-gradient(180deg,#32456B 0%, #2A3B5E 55%, #253453 100%);
  border-color:#42598A;
  box-shadow:0 10px 28px -14px rgba(12,24,48,.5);
}
/* 月の見出しと前後の矢印 */
body.slot-night .cal-month{ color:#FFFFFF; }                       /* 11.1:1 */
body.slot-night .chip-nav{ background:rgba(255,255,255,.14); color:#BFF3F0; border-color:rgba(255,255,255,.22); }
body.slot-night .chip-nav:hover{ background:rgba(255,255,255,.24); }

/* 曜日の見出し */
body.slot-night .adow{ color:#C6D5E9; border-color:rgba(255,255,255,.16); }   /* 7.5:1 */
body.slot-night .adow .sun{ color:#FFB0A8; }
body.slot-night .adow .sat{ color:#A9D4FF; }

/* 日付のマス */
body.slot-night .acell{ background:transparent; border-color:rgba(255,255,255,.12); }
body.slot-night .acell .dn{ color:#FFFFFF; }
body.slot-night .acell.sun .dn{ color:#FFB0A8; }
body.slot-night .acell.sat .dn{ color:#A9D4FF; }
body.slot-night .acell.hol .dn{ color:#FFB0A8; }
/* 過去・他の月は控えめにするが、読める明るさは残す（4.6:1） */
body.slot-night .acell.muted .dn,
body.slot-night .acell.past .dn{ color:#93A7C8; }
body.slot-night .acell.muted, body.slot-night .acell.past{ background:rgba(0,0,0,.10); }
body.slot-night .acell.today{ background:rgba(150,240,235,.16); }

/* ○△✕－ */
body.slot-night .sym-blue  { color:#8ACDFF; }   /* 6.5:1 */
body.slot-night .sym-yellow{ color:#FFD98A; }   /* 8.2:1 */
body.slot-night .sym-red   { color:#FFA39B; }   /* 5.8:1 */
body.slot-night .sym-purple{ color:#CFC2FF; }

/* ログイン後の「残りN名」などのチップ。地との差をはっきりさせる */
body.slot-night .chip{ background:#12463F; color:#A5F3EE; border-color:#2E8A80; }
body.slot-night .chip.orange{ background:#4A3612; color:#FFDFA3; border-color:#8A6A22; }
body.slot-night .chip.red{ background:#4C1D28; color:#FFC4BE; border-color:#8E3444; }
body.slot-night .chip.purple{ background:#302754; color:#D6CCFF; border-color:#544785; }
body.slot-night .chip b, body.slot-night .chip em, body.slot-night .chip i{ color:inherit; }

/* 下の説明（残り○名＝その日にご予約できる人数） */
body.slot-night .cal-note{ color:#C6D5E9; border-color:rgba(255,255,255,.16); }
body.slot-night .cn-d{ color:#C6D5E9; }

/* 凡例も合わせて暗くする */
body.slot-night .pills .pill{ background:#32456B; border-color:#42598A; color:#E4ECF7; }

/* ---- ご請求：現場ごとのポケット ---- */
.bill-period{
  font-size:12px; color:var(--sub); margin:0 2px 10px; padding:0 2px;
}
.bill-site{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); margin-bottom:10px; overflow:hidden;
}
.bs-head{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:13px 14px; background:#fff; border:0; cursor:pointer; text-align:left;
  font-family:inherit;
}
.bs-head .bs-nm{ flex:1; min-width:0; font-size:13.5px; font-weight:800; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bs-head .bs-n{ flex:none; font-size:11px; font-weight:700; color:var(--sub);
  background:var(--bg); border-radius:999px; padding:3px 9px; }
.bs-head .bs-t{ flex:none; font-size:14px; font-weight:800; color:var(--teal-dark,#0A7A76); }
.bs-head svg{ color:#0ABAB5; }

.bs-body{ border-top:1px solid var(--line); }
.bs-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px 10px 34px; border-bottom:1px solid #F0F5F6;
}
.bs-row:last-child{ border-bottom:0; }
.bs-row .bs-d{ flex:none; width:44px; font-size:12px; font-weight:700; color:var(--teal-dark,#0A7A76); }
.bs-row .bs-m{ flex:1; min-width:0; font-size:12px; color:var(--sub); }
.bs-row .bs-a{ flex:none; font-size:13px; font-weight:700; color:var(--ink); }