/* A案「ライト」: 明るい青のパネル型（カジュアルゲームのメニュー風） */
:root{
  --bg1:#eaf5ff; --bg2:#d3e8ff; --ink:#17304f; --ink-soft:#4b6584;
  --main:#1a73e0; --main-dark:#1256bd; --main-deep:#0d3f8f; --line:#b5d5fb; --panel:#ffffff;
  --head:#e4f1ff; --accent:#ffb400; --ok:#0f8a6c; --warn:#b85c00; --off:#6b7b8f;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-size:16px;line-height:1.6;
  background:radial-gradient(circle at 1px 1px,rgba(26,115,224,.10) 1.5px,transparent 0) 0 0/22px 22px,linear-gradient(180deg,var(--bg1),var(--bg2))}
a{color:var(--main-dark);font-weight:700}

/* 上のバー */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;height:60px;padding:0 20px;color:#fff;
  background:linear-gradient(180deg,#2a86ee,#1560cc);border-bottom:4px solid var(--main-deep);box-shadow:0 3px 10px rgba(13,63,143,.25)}
.menu-btn{width:44px;height:44px;border-radius:12px;border:2px solid rgba(255,255,255,.75);background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0;border-bottom-width:4px}
.brand{font-weight:800;font-size:19px;letter-spacing:.04em}
.brand small{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;background:var(--accent);color:#3a2a00;font-size:12px;font-weight:800}
.who{margin-left:auto;font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.18)}

/* 左から出るメニュー */
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:40;width:280px;padding:18px 16px;background:#fff;border-right:4px solid var(--main);
  box-shadow:8px 0 30px rgba(13,63,143,.28);transform:translateX(-105%);transition:transform .22s ease}
.drawer.open{transform:none}
.drawer h2{margin:4px 6px 14px;font-size:14px;color:var(--ink-soft);letter-spacing:.12em}
.drawer a,.drawer button{display:flex;align-items:center;gap:12px;width:100%;margin:8px 0;padding:13px 16px;border-radius:14px;text-decoration:none;
  font:inherit;font-weight:800;font-size:16px;color:var(--ink);background:var(--head);border:2px solid var(--line);border-bottom-width:4px;cursor:pointer;text-align:left}
.drawer a.current{background:linear-gradient(180deg,#2a86ee,#1560cc);color:#fff;border-color:var(--main-deep)}
.drawer .ico{width:26px;text-align:center;font-size:18px}
.drawer .logout{margin-top:26px;background:#fff;color:var(--off)}
.scrim{position:fixed;inset:0;z-index:30;background:rgba(13,40,80,.42);opacity:0;pointer-events:none;transition:opacity .22s}
.scrim.open{opacity:1;pointer-events:auto}

main{max-width:1280px;margin:0 auto;padding:22px 28px 60px}
.crumbs{font-size:14px;color:var(--ink-soft);margin:0 0 8px}
.crumbs a{font-weight:700}
h1{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:26px;font-weight:800}
h1::before{content:"";width:14px;height:14px;transform:rotate(45deg);border-radius:3px;background:linear-gradient(135deg,#4fb0ff,var(--main-dark));box-shadow:0 0 0 4px #cfe6ff}
h2{margin:0 0 12px;font-size:20px;font-weight:800;color:var(--main-deep)}
h3{margin:18px 0 8px;font-size:17px;font-weight:800}
h3::before{content:"▶";color:var(--main);margin-right:6px;font-size:.8em}

/* パネル */
section,form,fieldset,.panel,.guide-card{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:18px 20px;margin:16px 0;box-shadow:0 5px 0 #bcd9fb}
fieldset fieldset,section section,form section,form fieldset{box-shadow:none;background:#f5faff}
legend{padding:3px 14px;border-radius:999px;background:var(--main);color:#fff;font-weight:800;font-size:14px}
.tourchip{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:#fff;border:2px solid var(--main);font-weight:800;box-shadow:0 4px 0 #bcd9fb}
.tourchip span{font-size:12px;padding:2px 10px;border-radius:999px;background:var(--main);color:#fff}

/* 入力 */
label{display:block;margin:12px 0;font-weight:700}
input,select,textarea,button{font:inherit;font-size:16px;max-width:100%}
input:not([type=checkbox]),select,textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:#fbfdff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid #8fc4ff;border-color:var(--main)}
textarea{min-height:96px}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;border-radius:999px;border:0;border-bottom:4px solid var(--main-deep);
  background:linear-gradient(180deg,#2a86ee,#1560cc);color:#fff;font-weight:800;cursor:pointer;text-decoration:none}
.btn.sub{background:#fff;color:var(--main-dark);border:2px solid var(--main);border-bottom-width:4px}
.btn.small{padding:5px 14px;font-size:14px;border-bottom-width:3px}

/* 絞り込み（横一列） */
.filterbar{display:flex;align-items:flex-end;gap:14px;padding:12px 18px;flex-wrap:nowrap}
.filterbar label{margin:0;font-size:13px;color:var(--ink-soft);min-width:120px}
.filterbar label.wide{min-width:180px}
.filterbar input:not([type=checkbox]),.filterbar select{padding:7px 10px;margin-top:3px}
.filterbar .check{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 14px;border:2px solid var(--line);border-radius:12px;background:#fbfdff;color:var(--ink);font-size:15px;white-space:nowrap}
.filterbar .check input{width:18px;height:18px;margin:0}
.filterbar .spacer{flex:1}
.filterbar .btn{padding:7px 12px;font-size:14px}

/* 表 */
.scroll{overflow-x:auto}
.count{margin:14px 4px 6px;font-weight:700;color:var(--ink-soft)}
.count b{font-size:22px;color:var(--main-dark)}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:2px solid var(--line);border-radius:14px;overflow:hidden;margin:8px 0}
th{background:var(--head);color:var(--main-deep);font-weight:800;text-align:left;padding:10px 14px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid #dcebfd}
tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:#f7fbff}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:2px 12px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}
.badge.on{background:#dcecff;color:var(--main-deep);border:2px solid #9cc8fb}
.badge.off{background:#eef1f5;color:var(--off);border:2px solid #cfd6df}
.badge.ok{background:#dff5ee;color:var(--ok);border:2px solid #9fd9c8}
.badge.warn{background:#fff0d6;color:var(--warn);border:2px solid #f3c77a}
.badge.none{background:#f3f5f8;color:var(--off);border:2px dashed #c3ccd8}
.ops{display:flex;gap:8px;flex-wrap:wrap}
.message{padding:12px 16px;border-radius:12px;background:#fff0d6;border:2px solid #f3c77a;color:#6b3a00;font-weight:700}
.muted{color:var(--ink-soft)}
.guest-amount{font-weight:800;color:var(--main-deep)}

/* 利用者の申込画面 */
body[data-stage] main{max-width:980px}
body[data-stage] h1{display:block;margin:0 0 20px;padding:22px 26px;border-radius:18px;color:#fff;font-size:28px;
  background:linear-gradient(135deg,#2f8ff5,#1256bd);border-bottom:5px solid var(--main-deep);box-shadow:0 6px 16px rgba(13,63,143,.25)}
body[data-stage] h1::before{display:none}
body[data-stage] main>h2{margin:30px 0 0;padding:10px 20px;display:inline-block;border-radius:14px 14px 0 0;background:var(--main);color:#fff}
body[data-stage] form#booking-form{margin-top:0;border-top-left-radius:0;border-color:var(--main)}
body[data-stage] form#booking-form>button[name=action]{display:flex;width:100%;max-width:420px;margin:22px auto 6px;padding:14px;font-size:18px}
.guide-card-hotel{font-size:1.1em;font-weight:800;margin:0 0 6px;color:var(--main-deep)}
.guide-card p{margin:2px 0}
.guide-cards{display:none}
@media (max-width:640px){
  main{padding:14px 12px 40px}
  .guide-table{display:none}.guide-cards{display:block}
  body[data-stage] h1{font-size:21px;padding:16px 18px}
  section,form,fieldset{padding:14px}
}
.tours td{white-space:nowrap}.tours .ops{flex-wrap:nowrap}
html{background:#d3e8ff}