/* WHIP SPA ネット予約（yoyaku.js）… 予約の窓の中の 日にち → 時間 → お名前 → 確認 → 完了
   色と形は v8.css に合わせる（クリームの地・白い札・墨の黒・キャラメル）。 */

.rsv.is-yk{width:min(600px,calc(100% - 24px))}
.yk{position:relative}
.yk .nw{white-space:nowrap}
.yk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-10px 48px 6px 0;min-height:44px}
.yk-top .rsv-back{margin:0;min-height:44px}
.yk-bar{display:flex;gap:4px;margin:0;padding:0;list-style:none;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.yk-bar li{display:grid;justify-items:center;gap:4px;min-width:40px}
.yk-bar i{display:block;width:100%;height:4px;border-radius:4px;background:var(--latte);transition:background .4s var(--ease)}
.yk-bar li.done i{background:var(--cara-l)}
.yk-bar li.now{color:var(--ink)}
.yk-bar li.now i{background:var(--ink)}
.yk-top[hidden] + .rsv-h.yk-h{padding-right:52px}
.rsv-h.yk-h{margin-bottom:12px;padding-right:0;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.yk-h:focus{outline:none}

/* 選んだコース */
.yk-chip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);margin-bottom:16px}
.yk-cn{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.yk-cn small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.yk-when{display:inline-block;white-space:nowrap;margin-top:4px;padding:2px 10px;border-radius:999px;background:var(--milk);font-size:12.5px;color:var(--cara)}
.yk-cp{font-family:var(--en);font-weight:500;font-size:19px;color:var(--ink);white-space:nowrap}

/* お知らせ */
.yk-note{padding:12px 16px;border-radius:14px;background:var(--sky-pale);color:var(--sky-d);font-size:13px;line-height:1.75;margin-bottom:14px}
.yk-note b{display:block;color:var(--ink)}
.yk-msg{font-size:13px;line-height:1.7;margin:-4px 0 14px;text-align:center}
.yk-msg:empty{display:none}
.yk-msg.warn{padding:10px 14px;border-radius:12px;background:#fbefe7;color:#8a3b17;text-align:left}
.yk-fine{font-size:12px;line-height:1.8;color:var(--muted);text-align:center;margin-top:14px}
.yk-fine a{color:var(--ink);font-weight:700;white-space:nowrap}

/* ① 日にち */
.yk-cal{border-radius:18px;background:#fff;padding:10px 10px 12px;box-shadow:var(--sh-s)}
.yk-wk,.yk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.yk-wk{margin-bottom:2px}
.yk-wk span{text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);padding:4px 0}
.yk-wk .w0,.yk-day.w0 b{color:#b5523b}
.yk-wk .w6,.yk-day.w6 b{color:var(--sky-ink)}
.yk-mon{grid-column:1/-1;font-family:var(--en);font-weight:600;font-size:13px;color:var(--ink);letter-spacing:.06em;padding:8px 4px 2px}
.yk-mon:first-of-type{padding-top:0}
.yk-day{position:relative;display:grid;justify-items:center;align-content:center;gap:1px;min-height:52px;padding:4px 0;border:0;border-radius:12px;background:none;line-height:1.2;transition:background .2s,transform .2s var(--ease)}
.yk-day b{font-family:var(--en);font-weight:500;font-size:16.5px;color:var(--ink)}
.yk-day i{display:block;height:13px;font-style:normal;font-size:11px;font-weight:700}
.yk-day.s-o,.yk-day.s-t{background:var(--cream)}
.yk-day.s-o i::before{content:"◯";color:var(--cara)}
.yk-day.s-t i::before{content:"△";color:#b0782f}
.yk-day.s-x i::before{content:"×";color:var(--sand)}
.yk-day.s-x b,.yk-day.s-na b,.yk-day:disabled b{color:var(--sand)!important}
.yk-day:not([disabled]):hover{background:var(--milk);transform:translateY(-1px)}
.yk-day.today::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--cara)}
.yk-day.sel{background:var(--ink)!important}
.yk-day.sel b,.yk-day.sel i::before{color:#fff!important}
.yk-day:disabled{cursor:default}
.yk-cal[aria-busy="true"] .yk-day:not(.s-na){background:linear-gradient(100deg,var(--cream) 30%,var(--milk) 50%,var(--cream) 70%);background-size:300% 100%;animation:ykShine 1.3s linear infinite}
@keyframes ykShine{from{background-position:100% 0}to{background-position:0 0}}
.yk-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:10px;font-size:11.5px;color:var(--muted)}
.yk-legend i{font-style:normal;font-weight:700;margin-right:4px}
.yk-legend .o::before{content:"◯";color:var(--cara)}
.yk-legend .t::before{content:"△";color:#b0782f}
.yk-legend .x::before{content:"×";color:var(--sand)}

/* ② 時間 */
.yk-day-sel{font-weight:700;font-size:15px;color:var(--ink);margin-bottom:4px}
.yk-tg{font-size:12px;font-weight:700;color:var(--muted);margin:12px 0 6px;letter-spacing:.08em}
.yk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.yk-t{display:grid;justify-items:center;gap:0;min-height:62px;padding:8px 6px;border:0;border-radius:14px;background:#fff;box-shadow:var(--sh-s);line-height:1.25;transition:transform .25s var(--ease),background .2s}
.yk-t b{font-family:var(--en);font-weight:500;font-size:20px;color:var(--ink)}
.yk-t small{font-size:11px;color:var(--muted)}
.yk-t:hover{transform:translateY(-2px)}
.yk-t.sel{background:var(--ink)}
.yk-t.sel b,.yk-t.sel small{color:#fff}

/* ③ お名前とご連絡先 */
.yk-form{display:grid;gap:14px}
.yk-f{display:grid;gap:6px}
.yk-l{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--ink)}
.yk-l em{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--ink);color:#fff;letter-spacing:.06em}
.yk-l em.opt{background:var(--milk);color:var(--muted)}
.yk-f input,.yk-f textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;font:inherit;font-size:16px;color:var(--text);letter-spacing:.02em;transition:border-color .2s,box-shadow .2s}
.yk-f textarea{min-height:88px;resize:vertical;line-height:1.7}
.yk-f input::placeholder,.yk-f textarea::placeholder{color:#a79d92}
.yk-f input:focus,.yk-f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(138,91,55,.14)}
.yk-f input[aria-invalid="true"]{border-color:#b5523b}
.yk-hint{font-size:11.5px;color:var(--muted)}
.yk-err{font-size:12px;font-weight:700;color:#b5523b}
.yk-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.yk-go{margin-top:6px}

/* ④ 確認・⑤ 完了 */
.yk-sum{border-radius:18px;background:#fff;padding:4px 18px;box-shadow:var(--sh-s);margin-bottom:16px}
.yk-sum > div{display:grid;grid-template-columns:5.5em 1fr;gap:12px;padding:12px 0;font-size:14.5px;line-height:1.6}
.yk-sum > div + div{border-top:1px solid var(--line)}
.yk-sum dt{font-size:12.5px;font-weight:700;color:var(--muted);padding-top:2px}
.yk-sum dd{color:var(--ink);font-weight:700;word-break:keep-all;overflow-wrap:anywhere}
.yk-sum dd small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.yk-no{font-family:var(--en);font-size:19px!important;letter-spacing:.08em;white-space:nowrap}
.yk-book.wait{opacity:.7;pointer-events:none}
.yk-alt{display:grid;justify-items:center;gap:8px;margin-top:14px}
.yk-tel{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:700;color:var(--ink)}
.yk-lead{word-break:keep-all;overflow-wrap:anywhere;text-align:center;font-size:14.5px;line-height:1.9;color:var(--text);margin:4px 0 16px}
.yk-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 24px;margin-top:18px}
.yk-end .btn{min-width:160px}

/* 完了の印（泡がのぼる。押した後に一度だけ） */
.yk-ok{position:relative;width:84px;height:84px;margin:6px auto 8px}
.yk-ok svg{width:100%;height:100%}
.yk-ok circle{fill:var(--ink)}
.yk-ok path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:ykTick .6s .25s var(--ease) forwards}
.yk-ok .bb{position:absolute;bottom:20%;border-radius:50%;border:1.5px solid var(--cara-l);background:rgba(255,255,255,.6);opacity:0;animation:ykBub 1.8s var(--ease) forwards}
.yk-ok .b1{left:-6px;width:12px;height:12px;animation-delay:.3s}
.yk-ok .b2{left:14px;width:7px;height:7px;animation-delay:.5s}
.yk-ok .b3{right:-10px;width:14px;height:14px;animation-delay:.42s}
.yk-ok .b4{right:12px;width:8px;height:8px;animation-delay:.66s}
.yk-ok .b5{left:50%;width:6px;height:6px;animation-delay:.8s}
@keyframes ykTick{to{stroke-dashoffset:0}}
@keyframes ykBub{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.1)}}

@media (max-width:559px){
  .yk-top{margin-right:46px;flex-wrap:wrap}
  .yk-bar{width:100%;order:2}
  .yk-bar li{flex:1;min-width:0}
  .rsv-h.yk-h{font-size:18px;line-height:1.55}
  .yk-cal{padding:8px 6px 10px}
  .yk-wk,.yk-grid{gap:3px}
  .yk-day{min-height:48px;border-radius:10px}
  .yk-day b{font-size:15.5px}
  .yk-times{grid-template-columns:repeat(3,1fr)}
  .yk-t b{font-size:18px}
  .yk-chip{padding:12px 14px}
  .yk-sum{padding:2px 14px}
  .yk-sum > div{grid-template-columns:4.8em 1fr;gap:10px;font-size:14px}
}
@media (max-width:520px){
  .rsv.is-yk{width:100%}
}
@media (max-width:359px){
  .yk-times{grid-template-columns:repeat(2,1fr)}
  .yk-chip{flex-wrap:wrap;row-gap:4px}
  .yk-cp{font-size:17px}
  .yk-sum > div{grid-template-columns:1fr;gap:2px}
  .yk-no{font-size:17px!important}
}
/* 確認の画面の見出し（お支払い方法 など）を語の途中で折らない（2026-10-18） */
.yk-sum dt{word-break:keep-all;overflow-wrap:anywhere}