/* ===========================================================
   予約販売システム デモ（施設向け）
   reset.css の後に読み込むこと
   デザイン方針：角丸は一切使わない（すべて直角）／1pxの罫線と面で構成する
   =========================================================== */

:root{
  --navy:#0d3b4f;
  --navy-dark:#072634;
  --teal:#12708c;
  --teal-pale:#e7eff2;
  --accent:#e2600d;
  --accent-dark:#bd4f08;
  --accent-pale:#fbeee3;
  --sand:#f5f2ec;
  --bg-muted:#f2f4f5;
  --line:#dcd8d0;
  --line-strong:#b4aea3;
  --text:#17222b;
  --muted:#65727c;
  --ok:#1c7a58;
  --ok-pale:#e6f2ed;
  --danger:#b3261e;
  --danger-pale:#fbeceb;
  --max:1180px;
  --max-narrow:860px;
  --font-jp:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body{
  font-family:var(--font-jp);
  color:var(--text);
  background:#fff;
  line-height:1.85;
  font-size:15px;
  font-weight:400;
}

a{transition:.15s opacity}
a:hover{opacity:.75}

/* display を持つ要素にも hidden 属性を効かせる（検索タブ・返金パネルの出し入れで使用） */
[hidden]{display:none !important}

.container{width:min(var(--max), 92vw); margin-inline:auto}
.container--narrow{width:min(var(--max-narrow), 92vw); margin-inline:auto}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--navy-dark); color:#fff; padding:.6rem 1rem; z-index:100}
.skip-link:focus{left:1rem; top:1rem}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.6rem;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  line-height:1.4;
  text-align:center;
  transition:.15s background, .15s color, .15s border-color;
}
.btn:hover{background:var(--navy-dark); border-color:var(--navy-dark); opacity:1}
.btn--accent{background:var(--accent); border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-dark); border-color:var(--accent-dark)}
.btn--line{background:#fff; color:var(--navy); border-color:var(--line-strong)}
.btn--line:hover{background:var(--bg-muted); color:var(--navy); border-color:var(--navy)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{background:rgba(255,255,255,.14); border-color:#fff}
.btn--sm{padding:.5rem .9rem; font-size:.84rem}
.btn--block{width:100%}
.btn--danger{background:#fff; color:var(--danger); border-color:var(--danger)}
.btn--danger:hover{background:var(--danger); color:#fff}
.btn:disabled,
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}

/* ========== Text parts ========== */
.eyebrow{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--accent);
  margin-bottom:.7rem;
}
.sec{padding:5rem 0}
.sec--muted{background:var(--bg-muted)}
.sec--sand{background:var(--sand)}
.sec--tight{padding:3.2rem 0}
.sec-head{margin-bottom:2.6rem; max-width:760px}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-ttl{
  font-size:clamp(1.5rem, 3vw, 2.05rem);
  font-weight:700;
  line-height:1.5;
  color:var(--navy);
  letter-spacing:.02em;
}
.sec-lead{margin-top:1rem; color:var(--muted); font-size:.95rem}
.h-bar{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:1.15rem;
  font-weight:700;
  color:var(--navy);
  padding-bottom:.7rem;
  margin-bottom:1.4rem;
  border-bottom:2px solid var(--navy);
}
.h-bar::before{content:""; width:5px; height:1.1rem; background:var(--accent); flex-shrink:0}
.txt-muted{color:var(--muted)}
.txt-sm{font-size:.86rem}
.mt-1{margin-top:.6rem}
.mt-2{margin-top:1.2rem}
.mt-3{margin-top:2rem}

/* ========== デモ告知バー ========== */
.demobar{
  background:var(--navy-dark);
  color:rgba(255,255,255,.82);
  font-size:.78rem;
  letter-spacing:.02em;
}
.demobar__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:.5rem 0;
}
.demobar__tag{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  padding:.1rem .55rem;
  margin-right:.6rem;
  letter-spacing:.12em;
}
.demobar a{border-bottom:1px solid rgba(255,255,255,.45); font-weight:700; color:#fff}

/* ===========================================================
   説明ページ（TOP）
   =========================================================== */
.lp-head{border-bottom:1px solid var(--line); background:#fff}
.lp-head__in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.1rem 0}
.lp-logo{font-weight:700; color:var(--navy); font-size:1.02rem; letter-spacing:.02em; line-height:1.4}
.lp-logo span{display:block; font-size:.68rem; letter-spacing:.2em; color:var(--accent)}
.lp-head__nav{display:flex; align-items:center; gap:1.6rem; font-size:.9rem; font-weight:500}

.lp-hero{position:relative; overflow:hidden; color:#fff}
.lp-hero__bg{position:absolute; inset:0; background:url("../images/reservation-hero-marine-park.webp") center/cover no-repeat}
.lp-hero__dim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,38,52,.92) 0%, rgba(7,38,52,.78) 55%, rgba(7,38,52,.45) 100%)}
.lp-hero__in{position:relative; z-index:1; padding:5.5rem 0}
.lp-hero__ttl{font-size:clamp(1.8rem, 4vw, 2.9rem); font-weight:700; line-height:1.45; letter-spacing:.02em}
.lp-hero__txt{margin-top:1.6rem; max-width:640px; color:rgba(255,255,255,.9)}
.lp-hero__btns{margin-top:2.4rem; display:flex; gap:.9rem; flex-wrap:wrap}
.lp-hero__meta{
  margin-top:2.6rem;
  display:flex;
  gap:2.4rem;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.25);
  padding-top:1.4rem;
  font-size:.85rem;
  color:rgba(255,255,255,.82);
}
.lp-hero__meta b{display:block; color:#fff; font-size:1.02rem}

/* 機能ブロック */
.fgrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.fcard{background:#fff; padding:2rem 1.7rem}
.fcard__num{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  color:#fff;
  background:var(--teal);
  padding:.15rem .6rem;
  margin-bottom:.9rem;
}
.fcard__ttl{font-size:1.12rem; font-weight:700; color:var(--navy); margin-bottom:.7rem}
.fcard__txt{font-size:.88rem; color:var(--muted); margin-bottom:1.1rem}
.fcard__list{display:grid; gap:.45rem; font-size:.88rem}
.fcard__list li{display:flex; gap:.6rem; align-items:flex-start}
.fcard__list li::before{content:""; width:7px; height:7px; background:var(--accent); margin-top:.62rem; flex-shrink:0}

/* 画面デモへの導線 */
.screens{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem}
.scard{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column}
.scard__img{aspect-ratio:16/9; object-fit:cover; width:100%; border-bottom:1px solid var(--line)}
.scard__body{padding:1.5rem; display:flex; flex-direction:column; flex:1}
.scard__label{font-size:.72rem; font-weight:700; letter-spacing:.16em; color:var(--accent); margin-bottom:.5rem}
.scard__ttl{font-size:1.08rem; font-weight:700; color:var(--navy); margin-bottom:.6rem}
.scard__txt{font-size:.87rem; color:var(--muted); flex:1}
.scard__btn{margin-top:1.3rem}

/* 開発できること */
.plus{display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.plus__item{background:#fff; padding:1.5rem 1.6rem; display:flex; gap:1.1rem; align-items:flex-start}
.plus__no{
  flex-shrink:0;
  width:2.2rem; height:2.2rem;
  display:grid; place-items:center;
  background:var(--navy);
  color:#fff;
  font-size:.8rem;
  font-weight:700;
}
.plus__ttl{font-weight:700; color:var(--navy); margin-bottom:.3rem}
.plus__txt{font-size:.86rem; color:var(--muted)}
.tagline{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem}
.tagline li{border:1px solid var(--line-strong); padding:.35rem .8rem; font-size:.82rem; color:var(--navy); background:#fff}

.cta-band{background:var(--navy); color:#fff; padding:3.4rem 0}
.cta-band__in{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.cta-band__ttl{font-size:1.35rem; font-weight:700}
.cta-band__txt{margin-top:.6rem; color:rgba(255,255,255,.82); font-size:.9rem}

/* ===========================================================
   施設サイト（お客様が見る画面）
   =========================================================== */
.fac-head{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line)}
.fac-head__in{display:flex; align-items:center; gap:1.5rem; padding:.9rem 0}
.fac-logo{font-weight:700; color:var(--navy); font-size:1.05rem; letter-spacing:.04em; line-height:1.35}
.fac-logo span{display:block; font-size:.62rem; letter-spacing:.22em; color:var(--teal)}
.fac-nav{margin-left:auto}
.fac-nav ul{display:flex; gap:1.5rem; font-size:.9rem; font-weight:500}
.fac-head__cta{display:flex; align-items:center; gap:.7rem; margin-left:1rem}
.hamburger{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--line-strong);
  background:#fff;
  align-items:center; justify-content:center;
  flex-shrink:0;
}
.hamburger span{width:18px; height:2px; background:var(--navy); display:block; position:relative}
.hamburger span::before,
.hamburger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--navy)}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.mobile-nav{display:none; border-top:1px solid var(--line); background:#fff; padding:.6rem 0 1rem}
.mobile-nav.is-open{display:block}
.mobile-nav ul{width:min(var(--max), 92vw); margin-inline:auto; display:grid; gap:.4rem; font-weight:700}
.mobile-nav a{display:block; padding:.75rem .9rem; border:1px solid var(--line)}

.fac-hero{position:relative; overflow:hidden; color:#fff}
.fac-hero__bg{position:absolute; inset:0; background:url("../images/reservation-hero-marine-park.webp") center/cover no-repeat}
.fac-hero__dim{position:absolute; inset:0; background:rgba(7,38,52,.5)}
.fac-hero__in{position:relative; z-index:1; padding:4.6rem 0; text-align:center}
.fac-hero__ttl{font-size:clamp(1.6rem, 3.6vw, 2.5rem); font-weight:700; line-height:1.5; text-shadow:0 2px 14px rgba(0,0,0,.3)}
.fac-hero__txt{margin-top:1.1rem; color:rgba(255,255,255,.92); font-size:.95rem}
.fac-hero__note{
  display:inline-block;
  margin-top:1.8rem;
  border:1px solid rgba(255,255,255,.6);
  padding:.5rem 1.1rem;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
}

/* チケット一覧 */
.tickets{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.6rem}
.tcard{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column}
.tcard__thumb{position:relative}
.tcard__img{width:100%; aspect-ratio:16/9; object-fit:cover}
.tcard__badges{position:absolute; left:0; top:0; display:flex}
.tcard__body{padding:1.6rem; display:flex; flex-direction:column; flex:1}
.tcard__ttl{font-size:1.18rem; font-weight:700; color:var(--navy); margin-bottom:.6rem}
.tcard__txt{font-size:.88rem; color:var(--muted); margin-bottom:1.2rem}
.tcard__meta{display:grid; gap:.35rem; font-size:.85rem; border-top:1px solid var(--line); padding-top:1rem; margin-bottom:1.2rem}
.tcard__meta dt{color:var(--muted); float:left; width:6.5rem}
.tcard__row{display:flex; gap:.8rem}
.tcard__row dt{color:var(--muted); width:6.5rem; flex-shrink:0}
.tcard__price{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.price{font-size:1.5rem; font-weight:700; color:var(--navy); line-height:1.2}
.price small{font-size:.8rem; font-weight:500; color:var(--muted); margin-left:.3rem}
.price__label{font-size:.78rem; color:var(--muted); display:block; margin-bottom:.15rem}

.badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:.3rem .7rem;
  border:1px solid transparent;
}
.badge--advance{background:var(--accent); color:#fff}
.badge--today{background:var(--teal); color:#fff}
.badge--few{background:#fff; color:var(--danger); border-color:var(--danger)}
.badge--soldout{background:var(--muted); color:#fff}
.badge--ok{background:var(--ok-pale); color:var(--ok); border-color:var(--ok)}
.badge--wait{background:var(--accent-pale); color:var(--accent-dark); border-color:var(--accent)}
.badge--cancel{background:var(--danger-pale); color:var(--danger); border-color:var(--danger)}
.badge--muted{background:var(--bg-muted); color:var(--muted); border-color:var(--line-strong)}

/* 料金表 */
.ptable{border:1px solid var(--line); background:#fff}
.ptable th, .ptable td{border-bottom:1px solid var(--line); padding:.9rem 1.1rem; font-size:.9rem}
.ptable thead th{background:var(--navy); color:#fff; font-size:.82rem; letter-spacing:.06em; border-bottom:none}
.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td{border-bottom:none}
.ptable td{text-align:right; font-variant-numeric:tabular-nums}
.ptable th[scope="row"]{color:var(--navy)}
.ptable .is-advance{color:var(--accent-dark); font-weight:700}

.infolist{display:grid; gap:0; border-top:1px solid var(--line)}
.infolist__row{display:grid; grid-template-columns:11rem 1fr; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--line); font-size:.9rem}
.infolist__row dt{font-weight:700; color:var(--navy)}
.infolist__row dd{color:var(--muted)}

/* 購入フロー */
.flow-head{background:var(--navy); color:#fff; padding:1.8rem 0}
.flow-head__ttl{font-size:1.2rem; font-weight:700}
.steps{display:flex; margin:2.4rem 0; border:1px solid var(--line); background:#fff}
.steps li{
  flex:1;
  text-align:center;
  padding:.85rem .5rem;
  font-size:.85rem;
  font-weight:700;
  color:var(--muted);
  border-right:1px solid var(--line);
  position:relative;
}
.steps li:last-child{border-right:none}
.steps li.is-current{background:var(--navy); color:#fff}
.steps li.is-done{color:var(--navy)}
.steps li.is-done::after{content:"✓"; margin-left:.4rem; color:var(--ok)}

.layout2{display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:start}
.panel{border:1px solid var(--line); background:#fff; margin-bottom:1.6rem}
.panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--line);
  background:var(--bg-muted);
  font-weight:700;
  color:var(--navy);
  font-size:.98rem;
}
.panel__body{padding:1.6rem 1.4rem}
.panel__foot{padding:1.2rem 1.4rem; border-top:1px solid var(--line); background:var(--bg-muted)}

/* 日程・時間選択 */
.calendar{display:grid; grid-template-columns:repeat(7, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.calendar__dow{background:var(--navy); color:#fff; text-align:center; font-size:.76rem; font-weight:700; padding:.5rem 0}
.calendar__dow--sat{background:#1b5f80}
.calendar__dow--sun{background:#8c3a2a}
.day{background:#fff; min-height:82px; padding:.5rem; display:flex; flex-direction:column; gap:.3rem; text-align:left; width:100%}
.day:disabled{background:var(--bg-muted); color:#b7bfc5; cursor:not-allowed}
.day__n{font-size:.86rem; font-weight:700}
.day__stock{font-size:.72rem; color:var(--muted); margin-top:auto}
.day__stock--few{color:var(--danger); font-weight:700}
.day.is-selected{background:var(--navy); color:#fff; outline:3px solid var(--accent); outline-offset:-3px}
.day.is-selected .day__stock{color:rgba(255,255,255,.85)}

.slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:.8rem}
.slot{border:1px solid var(--line-strong); background:#fff; padding:.9rem; text-align:left}
.slot__time{font-weight:700; color:var(--navy)}
.slot__stock{font-size:.78rem; color:var(--muted)}
.slot.is-selected{border-color:var(--navy); background:var(--teal-pale); outline:2px solid var(--navy); outline-offset:-2px}
.slot:disabled{background:var(--bg-muted); color:#a9b2b8; cursor:not-allowed; border-color:var(--line)}

/* 枚数選択 */
.qty{border-top:1px solid var(--line)}
.qty__row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.qty__label{font-weight:700; color:var(--navy)}
.qty__note{display:block; font-size:.8rem; color:var(--muted); font-weight:400}
.qty__price{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.9rem; margin-left:auto; margin-right:1.2rem}
.stepper{display:flex; border:1px solid var(--line-strong)}
.stepper button{width:40px; height:40px; font-size:1.1rem; font-weight:700; color:var(--navy); background:#fff}
.stepper button:hover{background:var(--bg-muted)}
.stepper button:disabled{color:#c3cad0; cursor:not-allowed}
.stepper input{
  width:56px; height:40px; text-align:center; border:none;
  border-left:1px solid var(--line-strong); border-right:1px solid var(--line-strong);
  font-weight:700; font-variant-numeric:tabular-nums;
}

/* フォーム */
.field{display:grid; gap:.4rem; margin-bottom:1.3rem}
.field label{font-weight:700; font-size:.88rem; color:var(--navy)}
.field input, .field select, .field textarea{
  width:100%;
  padding:.75rem .9rem;
  border:1px solid var(--line-strong);
  background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:-1px}
.field__note{font-size:.8rem; color:var(--muted)}
.req{display:inline-block; background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; padding:.05rem .4rem; margin-left:.5rem; vertical-align:middle}
.req--any{background:var(--muted)}
.field-2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.checkline{display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem}

/* 注文サマリー */
.summary{position:sticky; top:88px; border:1px solid var(--navy); background:#fff}
.summary__head{background:var(--navy); color:#fff; padding:.9rem 1.2rem; font-weight:700; font-size:.95rem}
.summary__body{padding:1.3rem 1.2rem}
.summary__item{font-size:.88rem; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--line)}
.summary__row{display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; font-size:.89rem}
.summary__row span:last-child{font-variant-numeric:tabular-nums}
.summary__total{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-top:2px solid var(--navy); margin-top:.8rem; padding-top:.9rem}
.summary__total b{font-size:1.45rem; color:var(--navy); font-variant-numeric:tabular-nums}
.summary__foot{padding:0 1.2rem 1.3rem}

/* 確認画面の内訳 */
.recap{border:1px solid var(--line)}
.recap__row{display:grid; grid-template-columns:11rem 1fr; gap:1rem; padding:.9rem 1.2rem; border-bottom:1px solid var(--line); font-size:.9rem}
.recap__row:last-child{border-bottom:none}
.recap__row dt{font-weight:700; color:var(--navy)}
.recap__row dd{font-variant-numeric:tabular-nums}

/* Stripe決済ブロック */
.stripe{border:1px solid var(--navy); background:#fff}
.stripe__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1rem 1.4rem;
  background:var(--navy);
  color:#fff;
}
.stripe__ttl{font-weight:700; font-size:.98rem}
.stripe__by{font-size:.76rem; color:rgba(255,255,255,.75); letter-spacing:.08em}
.stripe__body{padding:1.6rem 1.4rem}
.stripe__demo{
  background:var(--accent-pale);
  border:1px solid var(--accent);
  color:var(--accent-dark);
  padding:.8rem 1rem;
  font-size:.84rem;
  font-weight:700;
  margin-bottom:1.4rem;
}
.stripe__cards{display:flex; gap:.4rem; margin-left:auto}
.stripe__card{border:1px solid var(--line-strong); background:#fff; color:var(--navy); font-size:.66rem; font-weight:700; letter-spacing:.04em; padding:.2rem .45rem}
.stripe__secure{display:flex; gap:.5rem; align-items:center; font-size:.8rem; color:var(--muted); margin-top:1rem}
.pay-total{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:2px solid var(--navy);
  margin-top:1.4rem; padding-top:1rem;
}
.pay-total b{font-size:1.5rem; color:var(--navy); font-variant-numeric:tabular-nums}

/* 完了画面 */
.done{border:2px solid var(--navy); background:#fff; text-align:center; padding:3rem 1.5rem}
.done__mark{width:64px; height:64px; margin:0 auto 1.4rem; background:var(--ok); color:#fff; display:grid; place-items:center; font-size:1.8rem}
.done__ttl{font-size:1.4rem; font-weight:700; color:var(--navy)}
.done__txt{margin-top:.9rem; color:var(--muted); font-size:.92rem}
.code{
  display:inline-block;
  margin:1.8rem auto 0;
  border:1px solid var(--line-strong);
  background:var(--bg-muted);
  padding:1.1rem 2.2rem;
}
.code__label{display:block; font-size:.75rem; letter-spacing:.16em; color:var(--muted); margin-bottom:.3rem}
.code__value{font-size:1.8rem; font-weight:700; letter-spacing:.14em; color:var(--navy); font-variant-numeric:tabular-nums}
.done__btns{margin-top:2.2rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

.mailcard{border:1px solid var(--line); background:#fff; margin-top:2.4rem; text-align:left}
.mailcard__head{background:var(--bg-muted); border-bottom:1px solid var(--line); padding:.8rem 1.2rem; font-size:.85rem; font-weight:700; color:var(--navy)}
.mailcard__body{padding:1.3rem 1.2rem; font-size:.85rem; color:var(--muted); white-space:pre-wrap; line-height:1.9}

/* ===========================================================
   受付端末
   =========================================================== */
.rec-head{background:var(--navy); color:#fff; padding:1rem 0}
.rec-head__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.rec-head__ttl{font-weight:700; letter-spacing:.04em}
.rec-head__meta{font-size:.82rem; color:rgba(255,255,255,.75)}
.searchbox{border:1px solid var(--line); background:#fff; padding:1.6rem}
.searchbox__tabs{display:flex; gap:0; border:1px solid var(--line-strong); margin-bottom:1.4rem; width:fit-content}
.searchbox__tab{padding:.6rem 1.4rem; font-weight:700; font-size:.88rem; color:var(--muted); border-right:1px solid var(--line-strong); background:#fff}
.searchbox__tab:last-child{border-right:none}
.searchbox__tab.is-active{background:var(--navy); color:#fff}
.searchbox__row{display:flex; gap:.8rem; flex-wrap:wrap}
.searchbox__row input{flex:1; min-width:220px; padding:.9rem 1rem; border:1px solid var(--line-strong); font-size:1.05rem}
.rec-result{border:1px solid var(--navy); background:#fff; margin-top:1.8rem}
.rec-result__head{background:var(--navy); color:#fff; padding:1rem 1.4rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap}
.rec-result__code{font-size:1.2rem; font-weight:700; letter-spacing:.1em}
.rec-result__body{padding:1.6rem 1.4rem}
.rec-people{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:1.4rem 0}
.rec-people__cell{background:#fff; padding:1rem; text-align:center}
.rec-people__label{font-size:.78rem; color:var(--muted)}
.rec-people__num{font-size:1.6rem; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums}
.rec-people__cell--total{background:var(--teal-pale)}

/* ===========================================================
   管理画面
   =========================================================== */
.app{display:grid; grid-template-columns:232px 1fr; min-height:100vh}
.app-side{background:var(--navy-dark); color:#fff; padding:1.4rem 0}
.app-side__logo{padding:0 1.3rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.15); font-weight:700; line-height:1.4}
.app-side__logo span{display:block; font-size:.66rem; letter-spacing:.2em; color:var(--accent)}
.app-nav{padding:1rem 0; display:grid}
.app-nav a{padding:.8rem 1.3rem; font-size:.9rem; color:rgba(255,255,255,.78); border-left:3px solid transparent}
.app-nav a:hover{background:rgba(255,255,255,.06); color:#fff; opacity:1}
.app-nav a.is-active{background:rgba(255,255,255,.1); color:#fff; border-left-color:var(--accent); font-weight:700}
.app-side__foot{padding:1.2rem 1.3rem; border-top:1px solid rgba(255,255,255,.15); font-size:.76rem; color:rgba(255,255,255,.5)}
.app-main{background:var(--bg-muted); min-width:0}
.app-head{background:#fff; border-bottom:1px solid var(--line); padding:1.1rem 1.8rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.app-head__ttl{font-size:1.15rem; font-weight:700; color:var(--navy)}
.app-head__sub{font-size:.82rem; color:var(--muted)}
.app-body{padding:1.8rem}

.stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem; margin-bottom:1.8rem}
.stat{background:#fff; border:1px solid var(--line); padding:1.3rem 1.4rem; border-top:3px solid var(--navy)}
.stat--accent{border-top-color:var(--accent)}
.stat--ok{border-top-color:var(--ok)}
.stat--teal{border-top-color:var(--teal)}
.stat__label{font-size:.8rem; color:var(--muted)}
.stat__num{font-size:1.75rem; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.3}
.stat__num small{font-size:.9rem; margin-left:.2rem}
.stat__sub{font-size:.78rem; color:var(--muted)}

.card{background:#fff; border:1px solid var(--line); margin-bottom:1.8rem}
.card__head{padding:1rem 1.4rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.card__ttl{font-weight:700; color:var(--navy); font-size:1rem}
.card__body{padding:1.4rem}
.card__body--flush{padding:0}

.toolbar{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}
.toolbar input, .toolbar select{padding:.55rem .8rem; border:1px solid var(--line-strong); background:#fff; font-size:.88rem}

.tablewrap{overflow-x:auto}
.table{font-size:.88rem; min-width:720px}
.table th, .table td{padding:.85rem 1.1rem; border-bottom:1px solid var(--line); white-space:nowrap}
.table thead th{background:var(--bg-muted); color:var(--navy); font-size:.8rem; letter-spacing:.04em; border-bottom:2px solid var(--line-strong)}
.table tbody tr:hover{background:var(--teal-pale)}
.table .num{text-align:right; font-variant-numeric:tabular-nums}
.table__link{color:var(--teal); font-weight:700; border-bottom:1px solid var(--teal)}

.bar{display:flex; align-items:center; gap:.7rem}
.bar__track{display:block; flex:1; height:10px; background:var(--bg-muted); border:1px solid var(--line); min-width:90px}
.bar__fill{display:block; height:100%; background:var(--teal)}
.bar__fill--warn{background:var(--accent)}
.bar__fill--full{background:var(--danger)}
.bar__num{font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}

.pager{display:flex; gap:.4rem; justify-content:center; padding:1.2rem}
.pager a, .pager span{border:1px solid var(--line-strong); padding:.45rem .8rem; font-size:.85rem; background:#fff}
.pager .is-current{background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700}

.detail{display:grid; grid-template-columns:1fr 320px; gap:1.6rem; align-items:start}
.deflist__row{display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); font-size:.9rem}
.deflist__row:last-child{border-bottom:none}
.deflist__row dt{color:var(--muted)}
.deflist__row dd{font-weight:500}
.actionlist{display:grid; gap:.7rem}
.alert{border:1px solid var(--line-strong); background:var(--bg-muted); padding:1rem 1.2rem; font-size:.86rem; color:var(--muted)}
.alert--danger{background:var(--danger-pale); border-color:var(--danger); color:var(--danger)}

/* ===========================================================
   フッター
   =========================================================== */
.foot{background:var(--navy-dark); color:rgba(255,255,255,.7); padding:2.6rem 0 1.6rem; font-size:.85rem}
.foot__grid{display:flex; gap:2rem; justify-content:space-between; flex-wrap:wrap}
.foot__nav{display:flex; gap:1.4rem; flex-wrap:wrap}
.foot__bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:1.8rem; padding-top:1.2rem; font-size:.76rem; color:rgba(255,255,255,.5); line-height:1.9}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:980px){
  .fgrid{grid-template-columns:repeat(2, 1fr)}
  .screens{grid-template-columns:1fr 1fr}
  .fac-nav{display:none}
  .hamburger{display:inline-flex}
  .fac-head__cta{margin-left:auto}
  .layout2{grid-template-columns:1fr}
  .summary{position:static}
  .stats{grid-template-columns:repeat(2, 1fr)}
  .detail{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .app-side{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.9rem 1rem}
  .app-side__logo{padding:0 1rem 0 0; border-bottom:none}
  .app-nav{display:flex; flex-wrap:wrap; padding:0}
  .app-nav a{padding:.45rem .8rem; border-left:none; border-bottom:3px solid transparent}
  .app-nav a.is-active{border-left:none; border-bottom-color:var(--accent)}
  .app-side__foot{display:none}
  .app-body{padding:1.2rem}
}

@media (max-width:640px){
  body{font-size:14.5px}
  .sec{padding:3.4rem 0}
  .fgrid{grid-template-columns:1fr}
  .screens{grid-template-columns:1fr}
  .plus{grid-template-columns:1fr}
  .tickets{grid-template-columns:1fr}
  .field-2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .rec-people{grid-template-columns:repeat(2, 1fr)}
  .steps{flex-direction:column}
  .steps li{border-right:none; border-bottom:1px solid var(--line); text-align:left; padding-left:1rem}
  .steps li:last-child{border-bottom:none}
  .infolist__row, .recap__row, .deflist__row{grid-template-columns:1fr; gap:.2rem}
  .calendar__dow{font-size:.68rem}
  .day{min-height:64px; padding:.35rem}
  .day__stock{font-size:.66rem}
  .lp-hero__in{padding:3.6rem 0}
  .lp-hero__meta{gap:1.4rem}
  .code__value{font-size:1.4rem}
}

/* ===========================================================
   ログイン画面
   =========================================================== */
.login{
  min-height:calc(100vh - 40px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 1rem;
  background:var(--bg-muted);
}
.login__box{width:min(420px, 100%)}
.login__head{
  background:var(--navy);
  color:#fff;
  padding:1.8rem 1.6rem 1.6rem;
  text-align:center;
  border:1px solid var(--navy);
  border-bottom:none;
}
.login__eyebrow{font-size:.7rem; font-weight:700; letter-spacing:.22em; color:var(--accent)}
.login__site{font-size:.85rem; color:rgba(255,255,255,.75); margin-top:.35rem}
.login__ttl{font-size:1.2rem; font-weight:700; margin-top:.5rem}
.login__body{
  background:#fff;
  border:1px solid var(--line);
  border-top:none;
  padding:1.8rem 1.6rem;
}
.login__demo{
  margin-top:1.6rem;
  padding:1rem 1.1rem;
  border:1px dashed var(--line-strong);
  background:var(--bg-muted);
  font-size:.85rem;
  color:var(--muted);
}
.login__demo code{
  background:#fff;
  border:1px solid var(--line);
  padding:.05rem .35rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--navy);
}
.login__back{margin-top:1.2rem; text-align:center; font-size:.85rem}
.login__back a{color:var(--navy); font-weight:700}