/* ==========================================================================
   提携オプション業者（パートナー）の画面。2026-09-09 小田さん承認のモック
   not_wordpress/mock-vendor/index.html の見た目をそのまま本体に。
   テーマ既定（app.css: html 18px・大きい表）に負けないよう .hr-vendor の中だけ上書きする。
   ========================================================================== */
html:has(.hr-vendor) { font-size: 14px; }
.hr-vendor { --bg:#fbfaf7; --card:#fff; --fg:#1d1d1b; --mut:#6b6a66; --sub:#8a8985; --bd:#e7e4dd; --bds:#d8d4ca; --gold:#c8a046; --green:#2f7d4f; --red:#b4433a; --blue:#3b6ea5;
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif; background:var(--bg); color:var(--fg); font-size:14px; line-height:1.6; min-height:100vh; }
.hr-vendor *, .hr-vendor *::before, .hr-vendor *::after { box-sizing:border-box; }
.hr-vendor a { color:inherit; text-decoration:none; }
.hr-vendor h1 { font-size:22px; font-weight:600; margin:0 0 4px; }
.hr-vendor h2 { font-size:16px; font-weight:600; margin:0; }
.hr-vendor .lead { color:var(--mut); font-size:13.5px; margin:0 0 18px; }
.hr-vendor p { margin:0; }
/* 上のバー */
.hr-vendor .top { height:56px; background:#fff; border-bottom:1px solid var(--bd); display:flex; align-items:center; padding:0 22px; gap:18px; position:sticky; top:0; z-index:5; }
.hr-vendor .top .brand { font-family:Raleway,"Noto Serif JP",serif; letter-spacing:.08em; font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px; }
.hr-vendor .top .brand img { width:24px; height:24px; object-fit:contain; }
.hr-vendor .top .shop { font-size:15px; font-weight:600; padding:5px 14px; background:var(--fg); color:#fff; border-radius:20px; white-space:nowrap; }
.hr-vendor .top .preview { border:1px solid var(--bds); padding:6px 12px; border-radius:4px; font-size:13px; background:#fff; white-space:nowrap; }
.hr-vendor .top .preview:hover { background:#f7f4ee; }
.hr-vendor .top .me { margin-left:auto; color:var(--mut); font-size:13px; white-space:nowrap; }
.hr-vendor .top .me a { margin-left:14px; color:var(--mut); }
/* 左のナビ */
.hr-vendor .wrap { display:flex; min-height:calc(100vh - 56px); }
.hr-vendor .nav { width:220px; flex:0 0 220px; background:#fff; border-right:1px solid var(--bd); padding:14px 0; }
.hr-vendor .nav a { display:flex; align-items:center; gap:10px; padding:11px 22px; font-size:15px; color:#333; }
.hr-vendor .nav a:hover { background:#f7f4ee; }
.hr-vendor .nav a.on { background:var(--fg); color:#fff; }
.hr-vendor .nav a .b { margin-left:auto; background:#e05a00; color:#fff; font-size:12px; padding:0 8px; border-radius:10px; }
.hr-vendor .nav .g { font-size:11.5px; color:var(--sub); padding:14px 22px 4px; letter-spacing:.06em; }
.hr-vendor .vmain { flex:1; padding:26px 30px 60px; min-width:0; }
/* 共通の部品 */
.hr-vendor .card { background:var(--card); border:1px solid var(--bd); padding:16px 18px; border-radius:0; box-shadow:none; }
.hr-vendor .sec { font-size:13.5px; font-weight:700; margin:22px 0 8px; padding-left:10px; border-left:4px solid var(--fg); }
.hr-vendor .sec:first-of-type { margin-top:0; }
.hr-vendor .badge { display:inline-block; font-size:12px; padding:2px 9px; border-radius:12px; background:#eee; color:#555; font-weight:400; line-height:1.6; }
.hr-vendor .badge.wait, .hr-vendor .badge-orange { background:#fdecc8; color:#8a5a00; }
.hr-vendor .badge.ok, .hr-vendor .badge-green { background:#e3f2e8; color:var(--green); }
.hr-vendor .badge.off, .hr-vendor .badge-gray { background:#e9e6df; color:#777; }
.hr-vendor .badge.today, .hr-vendor .badge-blue { background:#e6eef7; color:var(--blue); }
.hr-vendor .badge-main { background:#e6eef7; color:#2f5b87; }
.hr-vendor .btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:1px solid var(--bds); background:#fff; border-radius:4px; font-size:14px; cursor:pointer; color:var(--fg); font-family:inherit; line-height:1.4; text-decoration:none; }
.hr-vendor .btn:hover { background:#f7f4ee; }
.hr-vendor .btn.p, .hr-vendor .btn-primary { background:var(--fg); color:#fff; border-color:var(--fg); }
.hr-vendor .btn.p:hover, .hr-vendor .btn-primary:hover { background:#000; }
.hr-vendor .btn.sm, .hr-vendor .btn-sm { padding:5px 11px; font-size:13px; }
.hr-vendor .btn.danger, .hr-vendor .btn-danger { color:var(--red); border-color:#e4bcbc; background:#fff; }
.hr-vendor .ok { background:#e3f2e8; border-left:4px solid var(--green); padding:10px 14px; font-size:14px; margin-bottom:14px; }
.hr-vendor .err { background:#fbecec; border-left:4px solid var(--red); padding:10px 14px; font-size:14px; margin-bottom:10px; }
.hr-vendor .note { font-size:12.5px; color:var(--sub); line-height:1.6; }
.hr-vendor .alert { border:1px solid #e4bcbc; border-left:4px solid var(--red); background:#fbecec; padding:12px 16px; margin-bottom:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hr-vendor .alert b { font-size:15px; }
.hr-vendor .alert.info { border-color:#d9c9a3; border-left-color:var(--gold); background:#faf6ec; }
.hr-vendor .alert.mute { border-color:var(--bd); border-left-color:#b8b3a8; background:#f5f4f1; }
.hr-vendor .ro { background:#f7f6f2; border:1px solid var(--bd); padding:10px 14px; font-size:13.5px; line-height:1.8; }
.hr-vendor .ro .k { display:inline-block; min-width:110px; color:#777; }
.hr-vendor table { font-size:14px; }
/* 入力欄 */
.hr-vendor .f { margin-bottom:12px; }
.hr-vendor .f label { display:block; font-size:12.5px; font-weight:600; margin-bottom:4px; color:#444; }
.hr-vendor .f input[type=text], .hr-vendor .f input[type=email], .hr-vendor .f input[type=url], .hr-vendor .f input[type=number], .hr-vendor .f input[type=time], .hr-vendor .f input[type=date], .hr-vendor .f textarea, .hr-vendor .f select { width:100%; font-size:14px; padding:8px 10px; border:1px solid var(--bds); border-radius:4px; font-family:inherit; background:#fff; color:var(--fg); }
.hr-vendor .f input:disabled { background:#f4f2ed; color:#666; }
.hr-vendor .f textarea { min-height:64px; }
.hr-vendor .f .h { font-size:11.5px; color:var(--sub); margin-top:3px; line-height:1.5; }
.hr-vendor .f2 { display:flex; gap:10px; } .hr-vendor .f2 .f { flex:1; min-width:0; } .hr-vendor .f2 .w2 { flex:2; }
.hr-vendor .pics { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.hr-vendor .pics .p { position:relative; }
.hr-vendor .pics img { width:76px; height:56px; object-fit:cover; border-radius:3px; display:block; }
.hr-vendor .pics .tag { position:absolute; left:3px; top:3px; background:rgba(29,29,27,.8); color:#fff; font-size:10px; padding:1px 5px; }
.hr-vendor .pics .x { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:#fff; border:1px solid #ccc; color:var(--red); font-size:13px; line-height:18px; text-align:center; cursor:pointer; padding:0; }
.hr-vendor .seg { display:flex; border:1px solid var(--bds); border-radius:4px; overflow:hidden; }
.hr-vendor .seg label { flex:1; text-align:center; padding:7px 0; font-size:13px; cursor:pointer; margin:0; font-weight:400; }
.hr-vendor .seg label:has(input:checked) { background:var(--fg); color:#fff; }
.hr-vendor .seg input { display:none; }
.hr-vendor .chk { border:1px solid var(--bd); padding:8px 10px; font-size:13.5px; line-height:2; }
.hr-vendor .chk label { display:block; cursor:pointer; font-weight:400; font-size:13.5px; margin:0; }
.hr-vendor .periods { border:1px solid var(--bd); font-size:13px; }
.hr-vendor .periods .r { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; border-bottom:1px solid #eee; }
.hr-vendor .periods .r:last-child { border-bottom:0; }
.hr-vendor .periods .r button { background:none; border:0; color:var(--sub); cursor:pointer; font-size:12.5px; }
/* 予約 */
.hr-vendor .kpi { display:flex; gap:12px; margin-bottom:18px; }
.hr-vendor .kpi .k { flex:1; background:#fff; border:1px solid var(--bd); padding:12px 16px; }
.hr-vendor .kpi .k .l { font-size:12px; color:var(--sub); } .hr-vendor .kpi .k .v { font-size:24px; font-weight:700; } .hr-vendor .kpi .k .v small { font-size:12px; font-weight:400; color:var(--sub); margin-left:4px; }
.hr-vendor .bk { display:grid; grid-template-columns:120px 1fr 110px 120px; gap:12px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--bd); cursor:pointer; }
.hr-vendor .bk:hover { background:#f7f4ee; }
.hr-vendor .bk.wait { background:#fff7ea; box-shadow:inset 4px 0 0 #c8a046; }
.hr-vendor .bk.wait .btn { background:var(--fg); color:#fff; border-color:var(--fg); }
.hr-vendor .bk:last-child { border-bottom:0; }
.hr-vendor .bk .t { font-weight:700; font-variant-numeric:tabular-nums; } .hr-vendor .bk .t small { display:block; font-weight:400; color:var(--sub); font-size:12px; }
.hr-vendor .bk .m { font-size:14px; } .hr-vendor .bk .m small { display:block; color:var(--sub); font-size:12px; }
.hr-vendor .bk .act { text-align:right; }
.hr-vendor .empty2 { padding:14px; color:#888; font-size:13.5px; background:#faf9f6; border:1px dashed var(--bd); margin-bottom:6px; }
/* メニュー */
.hr-vendor .menu-wrap { display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:18px; align-items:start; }
@media (max-width:1180px) { .hr-vendor .menu-wrap { grid-template-columns:1fr; } }
.hr-vendor .mlist .cat { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--sub); margin:18px 0 6px; }
.hr-vendor .mlist .cat:first-child { margin-top:0; }
.hr-vendor .mlist .cat b { color:var(--fg); font-size:14.5px; }
.hr-vendor .mi { display:grid; grid-template-columns:64px 1fr 150px 90px; gap:14px; align-items:center; background:#fff; border:1px solid var(--bd); padding:10px 14px; margin-bottom:6px; cursor:pointer; }
.hr-vendor .mi:hover { background:#f7f4ee; }
.hr-vendor .mi.on { box-shadow:inset 3px 0 0 var(--fg); background:#f7f4ee; }
.hr-vendor .mi.off { opacity:.6; }
.hr-vendor .mi img, .hr-vendor .mi .noimg { width:64px; height:48px; object-fit:cover; border-radius:3px; display:block; background:#efece5; }
.hr-vendor .mi .n { font-weight:600; font-size:15px; min-width:0; } .hr-vendor .mi .n small { display:block; font-weight:400; color:var(--sub); font-size:12px; line-height:1.5; }
.hr-vendor .mi .chips { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:5px; }
.hr-vendor .mi .chips .lb { font-size:11px; color:var(--sub); margin-right:2px; }
.hr-vendor .mi .chip { display:inline-block; font-size:11.5px; padding:1px 8px; border-radius:10px; background:#eee7d8; color:#6b5427; font-weight:500; }
.hr-vendor .mi .chip.main { background:#e6eef7; color:#2f5b87; }
.hr-vendor .mi .chip.none { background:#efece5; color:#999; }
.hr-vendor .mi .chip.warn { background:#fbecec; color:var(--red); }
.hr-vendor .mi .pr { text-align:right; font-weight:700; } .hr-vendor .mi .pr small { display:block; font-weight:400; color:var(--sub); font-size:11px; }
.hr-vendor .mi .st { text-align:right; }
.hr-vendor .panel { background:#fff; border:1px solid var(--bd); position:sticky; top:76px; }
.hr-vendor .panel .ph { padding:14px 18px; border-bottom:1px solid var(--bd); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hr-vendor .panel .ph b { font-size:16px; }
.hr-vendor .panel .pb { padding:14px 18px; max-height:calc(100vh - 220px); overflow-y:auto; }
.hr-vendor .panel .pf { padding:12px 18px; border-top:1px solid var(--bd); display:flex; gap:10px; align-items:center; background:#fcfbf9; }
.hr-vendor .panel .pf .sp { margin-left:auto; }
.hr-vendor .panel.idle .pb { color:#777; font-size:14px; line-height:1.8; }
/* 受付時間・休業日 */
.hr-vendor .hours { display:grid; grid-template-columns:130px 1fr; gap:10px 16px; align-items:center; max-width:760px; }
.hr-vendor .hours .k { font-size:13.5px; color:#444; font-weight:600; }
.hr-vendor .hours input, .hr-vendor .hours select { font-size:14px; padding:7px 9px; border:1px solid var(--bds); border-radius:4px; font-family:inherit; background:#fff; }
.hr-vendor .hours .in { display:flex; align-items:center; gap:8px; }
.hr-vendor .slots { background:#f7f4ee; padding:10px 14px; font-size:13.5px; margin:10px 0 0; max-width:760px; line-height:1.7; }
.hr-vendor .slots b { font-size:15px; }
.hr-vendor .place { display:flex; gap:26px; font-size:15px; flex-wrap:wrap; }
.hr-vendor .place label { cursor:pointer; }
.hr-vendor .sub-opts { margin-top:10px; padding:10px 12px; background:#f7f4ee; font-size:14px; line-height:2; }
.hr-vendor .sub-opts.off { opacity:.45; }
.hr-vendor .cal { width:100%; border-collapse:collapse; table-layout:fixed; }
.hr-vendor .cal th { font-size:12.5px; color:var(--sub); padding:6px 0; text-align:center; border-bottom:2px solid var(--bd); font-weight:600; }
.hr-vendor .cal th.sun { color:var(--red); } .hr-vendor .cal th.sat { color:var(--blue); }
.hr-vendor .cal td { height:66px; border:1px solid #eeebe4; vertical-align:top; padding:5px 7px; font-size:13.5px; cursor:pointer; background:#fff; }
.hr-vendor .cal td:hover { background:#f7f4ee; }
.hr-vendor .cal td.blank { background:#faf9f6; cursor:default; }
.hr-vendor .cal td.sel { box-shadow:inset 0 0 0 2px var(--fg); }
.hr-vendor .cal td.closed { background:#fbecec; } .hr-vendor .cal td.closed .x { color:var(--red); font-size:11.5px; font-weight:700; }
.hr-vendor .cal td.past { color:#aaa; }
.hr-vendor .cal td .today { display:inline-block; font-size:10.5px; color:#fff; background:var(--fg); padding:1px 6px; margin-left:4px; vertical-align:middle; }
.hr-vendor .cal td .c { display:inline-block; background:var(--green); color:#fff; font-size:11px; padding:1px 6px; border-radius:9px; margin-top:3px; }
.hr-vendor .legend { font-size:12.5px; color:var(--sub); margin-top:8px; display:flex; gap:16px; flex-wrap:wrap; }
.hr-vendor .legend i { display:inline-block; width:11px; height:11px; margin-right:5px; vertical-align:-1px; }
.hr-vendor .cal-wrap { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
@media (max-width:1100px) { .hr-vendor .cal-wrap { grid-template-columns:1fr; } }
.hr-vendor .daybox { border:1px solid var(--bd); background:#fff; padding:12px 14px; font-size:14px; }
.hr-vendor .daybox b { font-size:15px; }
.hr-vendor .daybox label { display:block; margin:6px 0; cursor:pointer; }
.hr-vendor .daybox input[type=date], .hr-vendor .daybox input[type=text] { font-size:13.5px; padding:5px 8px; border:1px solid var(--bds); border-radius:4px; font-family:inherit; }
.hr-vendor .daybox .orders { font-size:12.5px; color:#555; background:#f7f4ee; padding:6px 8px; margin:6px 0; }
/* お店の紹介 */
.hr-vendor .intro { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:18px; align-items:start; }
@media (max-width:1180px) { .hr-vendor .intro { grid-template-columns:1fr; } }
.hr-vendor .side { position:sticky; top:76px; }
.hr-vendor .cpv { padding:12px 14px; }

/* ---- 写真の登録（ドロップ → 切り抜き → 登録）2026-09-09 ---- */
.hr-vendor .vp-zone { border:2px dashed #cfc8b8; background:#fbfaf6; padding:16px; text-align:center; cursor:pointer; color:#555; font-size:13px; line-height:1.6; transition:background .15s, border-color .15s; }
.hr-vendor .vp-zone:hover, .hr-vendor .vp-zone.over { background:#f2efe6; border-color:#8a6d3b; }
.hr-vendor .vp-zone b { display:block; font-size:14px; color:var(--ink); }
.hr-vendor .vp-zone input[type=file] { display:none; }
.hr-vendor .vp-ov { position:fixed; inset:0; background:rgba(20,18,14,.55); z-index:200; display:flex; align-items:center; justify-content:center; }
.hr-vendor .vp-box { background:#fff; width:540px; max-width:calc(100vw - 32px); padding:18px 20px 16px; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.hr-vendor .vp-h b { display:block; font-size:15px; margin-bottom:2px; }
.hr-vendor .vp-h span { font-size:12.5px; color:var(--sub); }
.hr-vendor .vp-stage { position:relative; margin:12px auto 0; width:480px; max-width:100%; }
.hr-vendor .vp-stage canvas { display:block; width:100%; height:auto; border:1px solid #333; cursor:grab; touch-action:none; background:#ddd; }
.hr-vendor .vp-stage canvas.grab { cursor:grabbing; }
.hr-vendor .vp-hint { position:absolute; left:8px; bottom:8px; font-size:11px; background:rgba(0,0,0,.55); color:#fff; padding:2px 8px; pointer-events:none; }
.hr-vendor .vp-zoom { display:flex; align-items:center; gap:10px; margin:12px auto 0; width:480px; max-width:100%; font-size:12px; color:var(--sub); }
.hr-vendor .vp-zoom input { flex:1; }
.hr-vendor .vp-err { margin-top:10px; color:var(--red); font-size:13px; }
.hr-vendor .vp-act { display:flex; justify-content:space-between; gap:10px; margin-top:14px; }
.hr-vendor .pics .p .tag { position:absolute; left:4px; bottom:4px; font-size:10px; background:rgba(0,0,0,.6); color:#fff; padding:1px 6px; }
.hr-vendor .rowx { display:flex; gap:8px; align-items:flex-start; }
.hr-vendor .rowx .f { margin-bottom:8px; }
.hr-vendor .rowx .del { flex:0 0 auto; margin-top:1px; width:30px; height:34px; border:1px solid var(--border); background:#fff; color:#999; cursor:pointer; font-size:16px; line-height:1; }
.hr-vendor .rowx .del:hover { color:var(--red); border-color:var(--red); }
.hr-vendor .btn-addrow { font-size:12.5px; padding:5px 12px; }
/* お店の紹介の右：お客様の画面そのものを縮小して入れる（2026-09-09） */
.hr-vendor .intro { grid-template-columns:minmax(0,1fr) 520px; }
.hr-vendor .pvw { border:1px solid var(--border); background:#fff; }
.hr-vendor .pvw-h { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); font-size:12.5px; }
.hr-vendor .pvw-h b { font-size:13.5px; }
.hr-vendor .pvw-h span { color:var(--sub); flex:1; min-width:0; }
.hr-vendor .pvw-h a { white-space:nowrap; }
.hr-vendor .pvw-frame { position:relative; overflow:hidden; background:#fff; }
.hr-vendor .pvw-frame iframe { position:absolute; left:0; top:0; width:1000px; height:100%; border:0; transform-origin:0 0; pointer-events:auto; }