/* =========================================================
   ご予約フォーム (reserve.html) と、send.php が返す結果のページ。
   色と角丸は style.css の変数だけで組む
   ========================================================= */

/* フォームは最初から見える。.reveal は掛けない（JS が付くまで透明になる） */
.rv-section{padding-top:clamp(1.5rem,4vw,2.5rem)}
.rv-wrap{max-width:760px}

.rv-notes{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.5rem;margin-bottom:1.8rem;color:var(--ink-soft);font-size:.9rem;box-shadow:var(--shadow)}
.rv-notes li{position:relative;padding-left:1.2em;line-height:1.8}
.rv-notes li+li{margin-top:.35rem}
.rv-notes li::before{content:"※";position:absolute;left:0}
.rv-notes a{color:var(--aqua-deep);font-weight:700;white-space:nowrap}

.rv-form,.rv-confirm,.rv-done{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,4vw,2.6rem);box-shadow:var(--shadow)}

.rv-field{border:0;margin:0 0 1.9rem;padding:0;min-width:0}
.rv-field legend,.rv-legend{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink);font-size:1rem;margin-bottom:.5rem;padding:0}
.rv-req,.rv-opt{display:inline-block;font-size:.7rem;font-weight:700;line-height:1;padding:.32rem .55rem;border-radius:1rem;letter-spacing:.04em}
.rv-req{background:var(--coral-deep);color:#fff}
.rv-opt{background:var(--foam-2);color:var(--ink-soft)}
.rv-hint{color:var(--ink-soft);font-size:.84rem;line-height:1.75;margin:-.1rem 0 .7rem}
.rv-hint b{color:var(--ink);font-weight:500;word-break:break-all}

/* 入力欄。iOS が 16px 未満の欄で画面を拡大しないよう、文字は 16px 以上 */
.rv-form input[type=text],.rv-form input[type=email],.rv-form input[type=tel],.rv-form input[type=date],.rv-form select,.rv-form textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--foam);
  border:1.5px solid rgba(28,149,206,.28);border-radius:.8rem;padding:.75rem .9rem;line-height:1.5;
  transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none;
}
.rv-form select{background-image:linear-gradient(45deg,transparent 50%,var(--aqua-deep) 50%),linear-gradient(135deg,var(--aqua-deep) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4rem}
/* iOS の日付欄は中身が無いと高さが潰れる */
.rv-form input[type=date]{min-height:3.1rem}
.rv-form input:focus,.rv-form select:focus,.rv-form textarea:focus{outline:none;border-color:var(--aqua-deep);background:#fff;box-shadow:0 0 0 4px rgba(62,189,227,.18)}
.rv-form textarea{resize:vertical;min-height:8rem}
.rv-form ::placeholder{color:#9db5c2}
.rv-form input[aria-invalid=true],.rv-form select[aria-invalid=true],.rv-form textarea[aria-invalid=true]{border-color:var(--coral-deep);background:#fff7f4}

.rv-row{display:flex;gap:.8rem;align-items:center}
.rv-row>span{color:var(--ink-soft)}
.rv-sub{display:block;flex:1;min-width:0}
.rv-sub>span:not(.sr-only){display:block;font-size:.8rem;color:var(--ink-soft);margin-bottom:.25rem}
.rv-sub+.rv-sub{margin-top:.7rem}
.rv-row .rv-sub+.rv-sub{margin-top:0}
.rv-tel input{flex:1;min-width:0;text-align:center}
.rv-zip{max-width:15rem;margin-bottom:.7rem}
.rv-zip input{text-align:center}
.rv-zip input[name=zip1]{flex:3}
.rv-zip input[name=zip2]{flex:4}

/* コース */
.rv-choices{display:grid;gap:.55rem}
.rv-choice{position:relative;display:block;cursor:pointer}
.rv-choice input{position:absolute;opacity:0;width:1px;height:1px}
.rv-choice>span{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border:1.5px solid rgba(28,149,206,.22);border-radius:.9rem;padding:.8rem 1rem .8rem 3rem;background:var(--foam);
  transition:border-color .2s,background .2s,box-shadow .2s;position:relative;line-height:1.55}
.rv-choice>span::before{content:"";position:absolute;left:1rem;top:50%;width:1.25rem;height:1.25rem;margin-top:-.625rem;border-radius:.35rem;border:1.5px solid rgba(28,149,206,.5);background:#fff;transition:background .2s,border-color .2s}
.rv-choice>span::after{content:"";position:absolute;left:1.42rem;top:50%;width:.4rem;height:.7rem;margin-top:-.45rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .15s}
.rv-choice b{font-weight:500;color:var(--ink);font-size:.95rem}
.rv-choice em{font-style:normal;color:var(--aqua-deep);font-weight:700;font-size:.9rem;white-space:nowrap}
.rv-choice input:checked+span{border-color:var(--aqua-deep);background:#eef8fd;box-shadow:0 6px 16px rgba(28,149,206,.12)}
.rv-choice input:checked+span::before{background:var(--aqua-deep);border-color:var(--aqua-deep)}
.rv-choice input:checked+span::after{opacity:1}
.rv-choice input:focus-visible+span{outline:2px solid var(--aqua-deep);outline-offset:2px}
/* ご来店（1つだけ選ぶ）。丸い印にして、2つを横に並べる */
.rv-choices--row{grid-template-columns:1fr 1fr}
.rv-choice--radio>span::before{border-radius:50%}
.rv-choice--radio>span::after{left:1.4rem;width:.45rem;height:.45rem;margin-top:-.225rem;border:0;border-radius:50%;background:#fff;transform:none}
.rv-choice--option{margin-top:.4rem}
.rv-choice--option>span{border-style:dashed;background:var(--sand)}
.rv-choice--option em{color:var(--coral-deep)}
.rv-field[aria-invalid=true] .rv-choice>span{border-color:rgba(245,123,87,.6)}

/* 希望日 */
.rv-date{display:grid;grid-template-columns:7.5rem minmax(0,15rem) auto;align-items:center;gap:.4rem .9rem}
.rv-date+.rv-date{margin-top:.8rem}
.rv-date label{display:flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:500}
.rv-dow{font-size:.88rem;color:var(--aqua-deep);font-weight:700;min-width:2.5em}
.rv-date .rv-err{grid-column:2/-1}
@media(max-width:520px){
  .rv-date{grid-template-columns:minmax(0,1fr) auto}
  .rv-date label{grid-column:1/-1}
  .rv-date .rv-err{grid-column:1/-1}
}

/* 誤り */
.rv-err{color:#c2462a;font-size:.84rem;font-weight:700;margin-top:.4rem;line-height:1.6}
.rv-err:empty{display:none}
.rv-alert{margin:0 0 1.4rem;padding:1rem 1.2rem;border-radius:.9rem;background:#fff4ef;border:1px solid rgba(245,123,87,.4);color:#a33d22;font-weight:500;font-size:.92rem;line-height:1.8}
.rv-alert:empty{display:none}
.rv-alert a{color:inherit;font-weight:700}

/* 罠の欄。display:none だと埋めない機械もいるので、画面の外に出す */
.rv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 送信 */
.rv-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.rv-btn{min-width:16rem;justify-content:center;font-size:1rem;padding-block:1.05rem}
.rv-btn[disabled]{opacity:.65;cursor:progress;transform:none}
.rv-label-js{display:none}
.js .rv-label-js{display:inline}
.js .rv-label-nojs{display:none}
.rv-spin{display:none;width:1em;height:1em;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:rv-spin .8s linear infinite}
.rv-btn[disabled] .rv-spin{display:inline-block}
@keyframes rv-spin{to{transform:rotate(360deg)}}
.rv-actions--confirm{flex-direction:row-reverse}
.rv-back{padding-inline:1rem}
.rv-back::after{content:none}
.rv-back::before{content:"←";transition:transform .3s}
.rv-back:hover::before{transform:translateX(-4px)}
@media(max-width:560px){
  .rv-btn{width:100%;min-width:0}
  .rv-actions--confirm{flex-direction:column}
}

/* 確認画面 */
.rv-h2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:clamp(1.2rem,3.4vw,1.45rem);color:var(--lagoon);margin-bottom:.6rem;line-height:1.6}
.rv-summary{margin:1.2rem 0 1.6rem;border-top:1px solid var(--line)}
.rv-summary>div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.3rem 1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.rv-summary dt{font-weight:700;color:var(--lagoon);font-size:.88rem}
.rv-summary dd{color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;font-size:.95rem}
.rv-summary dd.rv-empty{color:var(--ink-soft)}
@media(max-width:560px){.rv-summary>div{grid-template-columns:1fr}}

/* 送れたあと */
.rv-done{text-align:center}
.rv-done p{max-width:34em;margin:0 auto 1rem}
.rv-done__ic{font-size:2.4rem;color:var(--aqua-deep);margin-bottom:.8rem}
.rv-ref{font-size:1rem;color:var(--ink-soft)}
.rv-ref strong{display:inline-block;font-family:"Fraunces",serif;font-size:1.7rem;font-weight:500;color:var(--ink);letter-spacing:.04em;margin-left:.4rem}

.rv-tel-alt{text-align:center;margin-top:2rem;color:var(--ink-soft);font-size:.9rem;line-height:1.9}
.rv-tel-alt a{color:var(--aqua-deep);font-weight:700;margin-left:.3rem;white-space:nowrap}

/* JS が無いときに send.php が返すページ */
.rv-result{max-width:640px;padding-top:2rem}
.rv-result h1{font-size:clamp(1.3rem,4vw,1.7rem);color:var(--lagoon);margin-bottom:1.2rem;line-height:1.6}
.rv-result p,.rv-result ul{margin-bottom:1rem;color:var(--ink)}
.rv-result ul{padding-left:1.4rem}
.rv-result a{color:var(--aqua-deep)}

@media(max-width:900px){
  /* 下の電話のバーが1つだけなので、幅いっぱいに */
  .reserve-bar a{flex:1}
}