/* トップの営業カレンダーの横に出る、小さな予約フォーム（assets/quick-reserve.js）。
   style.css は触らず、トップページからだけ読みます */
.qr{max-width:420px;}
.qr-form,.qr-done{position:relative;padding:20px 22px 18px;background:var(--paper-2);border:1px solid var(--line);border-radius:2px;font-size:.84rem;letter-spacing:.04em;color:var(--ink);}
.qr-form[hidden],.qr-done[hidden]{display:none;}
.qr-close{position:absolute;top:6px;right:8px;width:36px;height:36px;border:0;background:none;color:var(--ink-soft);font-size:1.4rem;line-height:1;cursor:pointer;}
.qr-close:hover{color:var(--ink);}
.qr-title{margin:0;font-family:var(--serif);font-weight:400;font-size:1.05rem;letter-spacing:.12em;color:var(--ink);}
.qr-title:focus{outline:none;}
.qr-day{color:var(--accent);margin-right:.2em;}
.qr-lead{margin:.3em 0 .9em;font-size:.76rem;color:var(--ink-soft);}
.qr-f{display:block;margin:0 0 .8em;padding:0;border:0;min-width:0;}
.qr-f legend,.qr-f>span,.qr-two span{display:block;margin-bottom:.35em;padding:0;font-size:.76rem;color:var(--ink-mid);}
.qr-req,.qr-any{margin-left:.5em;font-size:.66rem;letter-spacing:.06em;}
.qr-req{color:var(--accent);}
.qr-any{color:var(--ink-soft);}
.qr-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.qr-form input:not([type=radio]):not([type=checkbox]),.qr-form textarea{box-sizing:border-box;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);font:inherit;font-size:.86rem;letter-spacing:.02em;}
.qr-form textarea{resize:vertical;min-height:2.6em;line-height:1.6;}
.qr-form input:focus,.qr-form textarea:focus{outline:none;border-color:var(--ink-soft);}
.qr-form input:disabled{background:var(--paper-3);}
/* 時間の枠とご連絡方法：押せる札 */
.qr-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.qr-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px;}
.qr-slot input,.qr-seg input{position:absolute;opacity:0;width:0;height:0;}
.qr-slot span,.qr-seg span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:40px;padding:4px 2px;border:1px solid var(--line);border-radius:2px;background:#fff;font-size:.78rem;letter-spacing:.02em;text-align:center;cursor:pointer;line-height:1.3;}
.qr-slot small{font-size:.64rem;letter-spacing:.06em;}
.qr-slot input:checked+span,.qr-seg input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff;}
.qr-slot input:focus-visible+span,.qr-seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px;}
.qr-slot.is-off span{background:var(--paper-3);color:var(--ink-soft);cursor:not-allowed;text-decoration:none;}
.qr-slot.is-off small{color:var(--accent);}
.qr-note{grid-column:1/-1;margin:.2em 0 0;font-size:.72rem;color:var(--ink-soft);}
/* 空きを確かめているあいだ、時間帯の右に出すくるくる（2026-11-11） */
.qr-spin{align-self:center;justify-self:start;width:18px;height:18px;margin-left:6px;border:2px solid var(--line);border-top-color:var(--ink-soft);border-radius:50%;animation:qr-spin .8s linear infinite;}
.qr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@keyframes qr-spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.qr-spin{animation-duration:2.4s;}}
.qr-agree{display:flex;align-items:center;gap:.5em;margin:.2em 0 .8em;font-size:.78rem;cursor:pointer;}
.qr-agree input{width:18px;height:18px;margin:0;accent-color:var(--ink);}
.qr-agree a{border-bottom:1px solid currentColor;}
.qr-ts{margin:0 0 .8em;}
/* お時間を選ぶまで、入力の欄と送るボタンを隠す（2026-11-11）。
   「わたしは人間です」の確認（.qr-ts）は、隠したままでも読み込みが進むように display:none にせず、高さを 0 にする */
.qr-form.is-noslot>.qr-two,.qr-form.is-noslot>label.qr-f,.qr-form.is-noslot>fieldset.qr-f~fieldset.qr-f,
.qr-form.is-noslot>.qr-agree,.qr-form.is-noslot>.qr-send{display:none;}
.qr-form.is-noslot>.qr-ts{height:0;margin:0;overflow:hidden;}
.qr-err{margin:0 0 .8em;padding:.6em .8em;border-left:3px solid var(--accent);background:var(--blush);font-size:.78rem;line-height:1.7;}
.qr-err a{border-bottom:1px solid currentColor;}
.qr-send{width:100%;min-height:44px;padding:10px 16px;font-size:.84rem;letter-spacing:.12em;}
.qr-send:disabled{opacity:.5;cursor:not-allowed;}
.qr-sub{display:flex;justify-content:center;gap:.6em;margin:.8em 0 0;font-size:.74rem;color:var(--ink-soft);}
.qr-sub a{color:var(--ink-mid);border-bottom:1px solid var(--line);}
.qr-done p{margin:.6em 0 0;line-height:1.8;}
.qr-done .qr-again{margin-top:1em;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font:inherit;}
.qr-done:focus{outline:none;}
/* 選んだ日 */
.hfc .hfc-day.is-qsel,.hfc a.hfc-day.is-qsel:hover{background:var(--ink);color:var(--paper-2);}
@media(max-width:860px){
  .qr{margin:0 auto;width:100%;}
  /* スマホで入力欄を押したときに、画面が拡大されないように */
  .qr-form input:not([type=radio]):not([type=checkbox]),.qr-form textarea{font-size:16px;}
}

/* 2026-11-10 カレンダーからの受付を止めているあいだのご案内（quick-reserve.js の PAUSED） */
.qr-pause{grid-column:1/-1;margin:.9em 0 .2em;padding:.9em 1em;border-radius:8px;background:var(--paper-3);font-size:.8rem;line-height:1.8;color:var(--ink-soft);opacity:.85;}
.qr-form.is-paused [hidden]{display:none!important;}