/* =============================================================
   予約画面UI v2  (data-ui="v2" のときだけ読み込まれる独立スタイル)
   - すべて .fpsv2 配下にスコープし、サイト既存CSSと衝突させない
   - 値は共通デザインシステム(fps-unified-ui.php)と一致(オリーブ#86866C/クリーム等)
   - 検証済みモック v2 を本番用に整形(デモ用ツールバー/表示切替/完了オーバーレイは除外)
   ============================================================= */
.fpsv2{
  --olive:#86866C; --olive-dark:#5C5C4A; --olive-darker:#4a4a3a; --olive-light:#A8A890;
  --cream:#FAF8F5; --white:#fff; --dark:#1A1A17; --text-light:#6B6B5C; --text-muted:#6F6F60;
  --gold:#C9A96E; --gold-light:#E8D5A8;
  --line:rgba(134,134,108,.18); --line-soft:rgba(134,134,108,.08);
  --tint4:rgba(134,134,108,.04); --tint8:rgba(134,134,108,.08); --tint12:rgba(134,134,108,.12);
  --radius:16px; --radius-md:12px; --radius-sm:8px;
  --font-body:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  --font-display:'Cormorant Garamond','Noto Serif JP',serif;
  --shadow-card:0 4px 24px rgba(26,26,23,.04);
  --shadow-soft:0 6px 18px rgba(26,26,23,.08);
  --shadow-pop:0 14px 40px rgba(134,134,108,.18);

  font-family:var(--font-body);color:var(--dark);line-height:1.6;-webkit-font-smoothing:antialiased;
  max-width:1180px;margin:0 auto;padding:6px 0 12px;
}
.fpsv2 *{box-sizing:border-box}
.fpsv2 button{font-family:var(--font-body);-webkit-appearance:none;appearance:none}
/* キーボードフォーカスの可視化(WCAG 2.4.7) */
.fpsv2 :focus-visible{outline:3px solid var(--olive-dark);outline-offset:2px}
.fpsv2 .bldg:focus-visible,.fpsv2 .course:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.fpsv2 .page-title{font-family:var(--font-display);font-size:clamp(28px,4vw,38px);font-weight:500;letter-spacing:2px;text-align:center;margin-bottom:4px}
.fpsv2 .page-sub{text-align:center;color:var(--text-light);font-size:13px;letter-spacing:1px;margin-bottom:8px}

/* ===== 大ステップ表示（.flow-steps）は 2026-07-19 ウィザード化で撤去 =====
   4ステップ・サークル列は sc_grid（fps-booking-core.php）がサーバー側で
   fps_flow_steps_html(1)（fps-unified-ui.php）を出力する。 */

/* ===== レイアウト：PC左右分割 ===== */
.fpsv2 .layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.fpsv2 .main{min-width:0}

/* ===== メインカラム ===== */
.fpsv2 .panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:22px 24px;margin-bottom:18px}
.fpsv2 .sec-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
/* サブ見出しの丸数字バッジ（①②③）は 2026-07-19 に撤去（ページ全体ステップの数字との紛れ対策・設計書 §1） */
.fpsv2 .sec-head h3{font-size:clamp(15px,1.8vw,17px);font-weight:600;letter-spacing:.5px;margin:0}
.fpsv2 .sec-head .hint{margin-left:auto;font-size:11.5px;color:var(--text-muted)}

/* 棟カード */
.fpsv2 .bldg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fpsv2 .bldg{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .25s ease;background:#fff;box-shadow:var(--shadow-soft);text-align:left;padding:0;display:flex;flex-direction:column}
.fpsv2 .bldg:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(26,26,23,.14)}
.fpsv2 .bldg.sel{outline:3px solid var(--olive);outline-offset:2px;box-shadow:var(--shadow-pop)}
.fpsv2 .bldg .ph{flex:none;width:100%;aspect-ratio:3/2;background:transparent;color:#fff;font-family:var(--font-display);font-size:30px;letter-spacing:2px;line-height:1;position:relative;display:block;overflow:hidden}
.fpsv2 .bldg .ph small{font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:3px;opacity:.85}
/* 棟色はカード背景に塗る(白帯防止の保険)。写真は下の <img> が枠いっぱいに敷く */
.fpsv2 .bldg.s{background:linear-gradient(160deg,#788565,#647159)}
.fpsv2 .bldg.z{background:linear-gradient(160deg,#787a61,#656753)}
.fpsv2 .bldg.m{background:linear-gradient(160deg,#857f63,#6e6953)}
.fpsv2 .bldg .ph.has-img{text-shadow:0 1px 6px rgba(0,0,0,.45)}
/* 写真は本物の <img>+object-fit:cover で敷く。img が高さを確定させるので iOS/WebKit の aspect-ratio 枠への敷き込み不具合(オリーブ透け)を回避 */
.fpsv2 .bldg .ph .bgimg{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
/* 文字は写真の上に重ねて中央寄せ */
.fpsv2 .bldg .ph .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;z-index:2}
/* 写真の上の暗幕(コントラスト確保)。文字より下・写真より上 */
.fpsv2 .bldg .ph.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.28));z-index:1}
/* 棟名漢字は落ち着いたグレー調、英語名は鮮明な白(small) */
.fpsv2 .bldg .ph .bn{color:rgba(255,255,255,.72)}
/* width:100% を明示(WebKit/iOS は flex 列の align-items:stretch を効かせず、未指定だと白欄が文字幅になり右側に下地olが透ける) */
.fpsv2 .bldg .meta{flex:1 1 auto;width:100%;box-sizing:border-box;padding:10px 12px;background:#fff;position:relative}
.fpsv2 .bldg .meta .nm{font-weight:700;font-size:14px;color:var(--dark)}
.fpsv2 .bldg .meta .ds{font-size:11px;color:var(--text-light);margin-top:2px}
.fpsv2 .bldg .chk{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--olive);color:#fff;display:none;place-items:center;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:2}
.fpsv2 .bldg.sel .chk{display:grid}

/* コースボタン(横一列) */
.fpsv2 .course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fpsv2 .course{position:relative;border:1px solid var(--line);background:#fff;border-radius:var(--radius-md);min-height:64px;cursor:pointer;font-weight:600;font-size:clamp(15px,1.7vw,18px);color:var(--dark);transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.fpsv2 .course .sub{font-size:11px;font-weight:500;color:var(--text-light)}
.fpsv2 .course:hover{border-color:var(--olive);background:var(--tint4);transform:translateY(-1px);box-shadow:0 4px 14px rgba(134,134,108,.12)}
.fpsv2 .course.sel{background:var(--olive);border-color:var(--olive);color:#fff;box-shadow:0 4px 14px rgba(134,134,108,.22)}
.fpsv2 .course.sel .sub{color:rgba(255,255,255,.85)}
.fpsv2 .course[hidden]{display:none}
.fpsv2 .course .rec{position:absolute;top:-9px;right:6px;background:var(--olive-dark);color:#fff;font-size:10px;font-weight:600;line-height:1.5;white-space:nowrap;pointer-events:none;border-radius:10px;padding:1px 8px;box-shadow:0 2px 6px rgba(26,26,23,.18)}

/* コース料金ノート */
.fpsv2 .course-note{margin-top:14px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px 16px;animation:fpsv2fade .25s ease}
.fpsv2 .course-note .cn-title{font-size:15px;font-weight:800;margin-bottom:6px}
.fpsv2 .course-note .cn-prices{font-size:13.5px;color:#444;line-height:1.9}
.fpsv2 .course-note .cn-pp{margin-top:6px;font-size:13px;font-weight:700;color:var(--olive-dark)}
.fpsv2 .course-note .cn-foot{margin-top:6px;font-size:11px;color:var(--text-muted)}
@keyframes fpsv2fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* キャンペーン割引表示（取り消し線＋割引後価格。データはサーバー同梱 PRICES[m].camp） */
.fpsv2 s.camp-org{color:var(--text-muted);font-weight:500;font-size:.85em;margin-right:4px;text-decoration:line-through}
.fpsv2 .camp-tag{display:inline-block;background:#B85450;color:#fff;font-size:10.5px;font-weight:700;line-height:1.6;padding:1px 8px;border-radius:9px;margin-left:6px;vertical-align:2px;letter-spacing:.4px;white-space:nowrap}

/* 週ナビ */
.fpsv2 .grid-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.fpsv2 .grid-top .gt-l{min-width:0}
.fpsv2 .grid-top .month{font-size:17px;font-weight:700;letter-spacing:1px}
.fpsv2 .grid-top .wk-range{font-size:12px;color:var(--text-light);white-space:nowrap}
.fpsv2 .wk-nav{display:flex;gap:8px;flex:0 0 auto}
.fpsv2 .wk-nav button{border:1px solid var(--line);background:#fff;border-radius:50px;padding:9px 0;width:92px;text-align:center;font-weight:600;font-size:13px;cursor:pointer;color:var(--dark);transition:.2s;min-height:42px;white-space:nowrap}
.fpsv2 .wk-nav button:hover{background:var(--tint4);border-color:var(--olive);color:var(--olive-dark)}
.fpsv2 .wk-nav button:disabled{opacity:.4;cursor:not-allowed}

/* ①②未選択時プレースホルダ */
.fpsv2 .grid-ph{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 20px;text-align:center;color:var(--text-muted);font-size:13.5px;line-height:1.8;background:var(--cream);border:1px dashed var(--line);border-radius:12px}
.fpsv2 .grid-ph b{color:var(--olive-dark);font-weight:700}

/* グリッド本体 */
.fpsv2 .grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.fpsv2 .grid{border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0}
.fpsv2 .g-head,.fpsv2 .g-row{display:grid;grid-template-columns:54px repeat(7,minmax(0,1fr))}
.fpsv2 .g-head{background:var(--tint12);border-bottom:1px solid var(--line)}
.fpsv2 .g-head .hc{padding:8px 2px;text-align:center;border-left:1px solid var(--line-soft)}
.fpsv2 .g-head .hc:first-child{border-left:0}
.fpsv2 .g-head .hc .dn{font-size:14px;font-weight:700}
.fpsv2 .g-head .hc .dw{font-size:10px;color:var(--text-light)}
.fpsv2 .g-head .hc.sat .dw,.fpsv2 .g-head .hc.sat .dn{color:#46688a}
.fpsv2 .g-head .hc.sun .dw,.fpsv2 .g-head .hc.sun .dn{color:#a8554d}
.fpsv2 .g-row{border-top:1px solid var(--line-soft)}
.fpsv2 .g-row:first-child{border-top:0}
.fpsv2 .g-time{background:var(--tint12);color:var(--text-light);font-size:12px;font-weight:600;display:grid;place-items:center;padding:6px 2px}
.fpsv2 .g-cell{border-left:1px solid var(--line-soft);min-height:44px;display:grid;place-items:center;padding:3px}
.fpsv2 .g-cell button{width:100%;height:100%;min-height:40px;border:0;background:#fff;border-radius:6px;color:var(--olive-dark);font-size:15px;cursor:pointer;transition:.15s}
.fpsv2 .g-cell button:hover{background:var(--tint12);box-shadow:inset 0 0 0 2px var(--olive)}
.fpsv2 .g-cell.sel button{background:var(--olive);color:#fff;font-weight:700;box-shadow:0 2px 10px rgba(134,134,108,.4)}
.fpsv2 .g-cell.disabled{background:var(--cream)}
.fpsv2 .g-cell.disabled::after{content:"×";color:var(--text-muted);opacity:.7;font-size:16px}

/* ③出現時フェード＋ハイライト */
.fpsv2 #fpsv2-grid-area{animation:fpsv2fade .3s ease}
.fpsv2 .panel.flash{animation:fpsv2panelflash 1.3s ease}
@keyframes fpsv2panelflash{0%,100%{box-shadow:var(--shadow-card)}25%{box-shadow:0 0 0 3px var(--tint12),var(--shadow-card)}}

/* ===== 右サイドパネル ===== */
.fpsv2 .side{position:sticky;top:calc(64px + 12px)}
.fpsv2 .summary{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}
.fpsv2 .summary .sm-head{background:var(--olive-darker);color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.fpsv2 .summary .sm-head .t{font-weight:700;font-size:14px;letter-spacing:1px}
.fpsv2 .summary .sm-head .badge2{background:var(--gold);color:var(--olive-darker);font-size:11px;font-weight:700;border-radius:50px;padding:3px 10px}
.fpsv2 .sm-body{padding:16px 18px}
.fpsv2 .sm-row{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px dashed var(--line)}
.fpsv2 .sm-row .ic{width:34px;height:34px;border-radius:10px;background:var(--tint8);color:var(--olive-dark);display:grid;place-items:center;flex:0 0 auto;transition:.2s}
.fpsv2 .sm-row .ic svg{width:18px;height:18px;display:block}
.fpsv2 .sm-row.done .ic{background:var(--olive);color:#fff}
.fpsv2 .sm-row .lab{font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:.5px}
.fpsv2 .sm-row .val{font-size:15px;font-weight:700;color:var(--text-muted);margin-top:1px}
.fpsv2 .sm-row.done .val{color:var(--dark)}
.fpsv2 .sm-row .val.empty{font-weight:500;font-size:13px;color:var(--text-muted)}

/* 料金表示 */
.fpsv2 .sm-total{margin:4px 0 0;padding:14px 16px;background:linear-gradient(135deg,var(--cream),#fff);border:1px solid var(--line);border-radius:12px}
.fpsv2 .sm-total .tt{font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.5px}
.fpsv2 .sm-total .amt{font-size:24px;font-weight:800;color:var(--olive-dark);margin-top:2px}
.fpsv2 .sm-total .amt small{font-size:13px;font-weight:600;color:var(--text-light)}
.fpsv2 .sm-total .pp{font-size:12.5px;font-weight:700;color:var(--dark);margin-top:3px}
.fpsv2 .sm-total .tag{display:inline-block;font-size:10px;font-weight:700;border-radius:50px;padding:2px 9px;margin-top:6px;background:var(--tint12);color:var(--olive-dark)}

/* ミニカレンダー */
.fpsv2 .minical{padding:14px 18px;border-top:1px solid var(--line-soft)}
.fpsv2 .minical .mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fpsv2 .minical .mc-head .mlab{font-weight:700;font-size:14px;letter-spacing:.5px}
.fpsv2 .minical .mc-head button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--olive-dark);font-size:14px;transition:.2s}
.fpsv2 .minical .mc-head button:hover{background:var(--tint4);border-color:var(--olive)}
.fpsv2 .minical .mc-head button:disabled{opacity:.35;cursor:not-allowed}
.fpsv2 .mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.fpsv2 .mc-grid .dow{font-size:10px;color:var(--text-light);padding:3px 0;font-weight:600}
.fpsv2 .mc-grid .dow.sat{color:#46688a}.fpsv2 .mc-grid .dow.sun{color:#a8554d}
.fpsv2 .mc-grid .day{font-size:12px;padding:6px 0 11px;border:0;background:none;color:var(--dark);border-radius:6px;cursor:pointer;position:relative;transition:.15s}
.fpsv2 .mc-grid .day.empty{visibility:hidden}
.fpsv2 .mc-grid .day:not(:disabled):hover{background:var(--tint8)}
.fpsv2 .mc-grid .day.in-week{background:var(--tint12);font-weight:700}
.fpsv2 .mc-grid .day.sat{color:#46688a}
.fpsv2 .mc-grid .day.sun{color:#a8554d}
.fpsv2 .mc-grid .day:disabled{color:var(--text-muted);opacity:.45;cursor:not-allowed}
.fpsv2 .mc-grid .day.today{box-shadow:inset 0 0 0 1.5px var(--gold)}
.fpsv2 .mc-grid .day .av{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%}
.fpsv2 .mc-grid .day .av.many{background:#5f8033}
.fpsv2 .mc-grid .day .av.few{background:#e08a2b;box-shadow:0 0 0 1.5px rgba(224,138,43,.3)}
.fpsv2 .minical .mc-legend{font-size:10.5px;color:var(--text-muted);margin-top:8px;text-align:center}
.fpsv2 .minical .mc-legend2{display:flex;justify-content:center;gap:14px;font-size:10px;color:var(--text-muted);margin-top:5px}
.fpsv2 .minical .mc-legend2 i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle}

/* 次へボタン */
.fpsv2 .next-wrap{padding:16px 18px;border-top:1px solid var(--line-soft)}
.fpsv2 .btn-next{width:100%;border:0;border-radius:50px;padding:15px;font-weight:700;font-size:15px;letter-spacing:.5px;cursor:pointer;transition:.25s;display:flex;align-items:center;justify-content:center;gap:8px}
.fpsv2 .btn-next:disabled{background:var(--tint8);color:var(--text-muted);cursor:not-allowed}
/* 有効化時は見落とし防止のため少し大きく＋金色パルスリングで注目を促す（PCで右サイドにあるため） */
/* 2026-07-19 ボタン配色ルール: ゴールド＝各画面に1つだけの「次へ進む」ボタン（全ステップ統一） */
.fpsv2 .btn-next:not(:disabled){background:linear-gradient(135deg,var(--gold),#A8834C);color:#fff;font-size:16px;box-shadow:0 6px 18px rgba(201,169,110,.4);animation:fpsv2-next-attn 1.8s ease-in-out infinite}
.fpsv2 .btn-next:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(201,169,110,.5);animation:none}
@keyframes fpsv2-next-attn{0%,100%{box-shadow:0 6px 18px rgba(134,134,108,.34),0 0 0 0 rgba(201,169,110,0)}50%{box-shadow:0 8px 22px rgba(134,134,108,.45),0 0 0 6px rgba(201,169,110,.35)}}
@media(prefers-reduced-motion:reduce){.fpsv2 .btn-next:not(:disabled){animation:none}}
.fpsv2 .next-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:8px;min-height:14px}

/* ===== モバイル下部固定バー ===== */
.fpsv2 .mobile-cta{display:none;position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));z-index:9989;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(44,44,37,.1);padding:12px 12px 12px}
.fpsv2 .mc-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.fpsv2 .mc-pill{display:inline-flex;align-items:center;gap:5px;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--text-light);font-weight:600}
.fpsv2 .mc-pill.done{background:var(--olive);color:#fff;border-color:var(--olive)}
.fpsv2 .mc-pill .pn{font-size:10px;opacity:.8}
.fpsv2 .mc-amt{margin-left:auto;font-size:14px;font-weight:800;color:var(--olive-dark)}
.fpsv2 .mc-btn{width:100%;border:0;border-radius:50px;padding:11px;font-weight:700;font-size:15px;cursor:pointer;transition:.2s}
.fpsv2 .mc-btn:disabled{background:var(--tint8);color:var(--text-muted)}
.fpsv2 .mc-btn:not(:disabled){background:linear-gradient(135deg,var(--gold),#A8834C);color:#fff}
body #fps-mobile-cta{display:none!important}
body.fps-booking-cta-active{padding-bottom:0!important}

@media(max-width:960px){
  .fpsv2 .layout{grid-template-columns:minmax(0,1fr)}
  .fpsv2 .side{display:none}
  .fpsv2 .mobile-cta{display:block}
}
@media(max-width:600px){
  .fpsv2 .grid-top{gap:8px}
  .fpsv2 .wk-nav{width:100%;flex:1 1 100%}
  .fpsv2 .wk-nav button{flex:1;width:auto;min-width:0;padding:9px 4px}
}
@media(max-width:480px){
  .fpsv2 .panel{padding:18px 16px}
  .fpsv2 .course{min-height:54px;font-size:15px;gap:0}
  .fpsv2 .course .sub{font-size:10px}
  .fpsv2 .course .rec{font-size:9px;padding:1px 6px;right:4px}
  .fpsv2 .course-grid{gap:6px}
}