/* =========================================================
   ネット予約(/reserve/)固有 ── 元:reserve/reserve-v4.html(院長 OK 済み・第13回)
   見本の .rv-〜 は .oc-rv-〜、.off は .is-off、.wait は .is-wait、.hint / .tap は .oc-rv-hint / .oc-rv-tap
   アイコンは base.css の .oc-ic(SVG は inc/icons.php)。演出なし
   ========================================================= */

/* ネットで予約できないもの(選ぶ前に一行で) */
.oc-rv-pre{display:flex; align-items:flex-start; gap:8px; max-width:38em; margin:14px 0 0; padding:10px 14px; border-radius:8px; background:var(--blue-pale); color:var(--ink); font-size:.88rem; line-height:1.75}
.oc-rv-pre svg{flex:none; width:18px; height:18px; margin-top:3px; fill:none; stroke:var(--blue); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
/* .oc-rv-pre の中の「お電話」「LINE」は、第18回 C1 で文の中のリンクの形(.oc-prose a)に */

/* ① 内容 ② 時間 */
.oc-rv-flow{margin-top:clamp(28px,4vw,40px); display:grid; gap:clamp(28px,4vw,40px)}
.oc-rv-q{margin:0; padding:0; border:0; min-width:0}
.oc-rv-q legend{scroll-margin-top:calc(var(--oc-header-h) + env(safe-area-inset-top,0px) + 16px); display:flex; align-items:center; gap:12px; padding:0; font-family:var(--mincho); font-weight:500; font-size:clamp(1.08rem,1rem + .4vw,1.25rem); letter-spacing:.06em}
.oc-rv-q legend .n{flex:none; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--blue); color:var(--blue); font-family:var(--gothic); font-size:.88rem; font-weight:500; letter-spacing:0}
.oc-rv-hint{margin:8px 0 0 42px; font-size:.86rem; color:var(--ink-soft); line-height:1.8}
.oc-rv-tap{margin:8px 0 0 42px; font-size:.86rem; color:var(--blue); line-height:1.8}
.oc-rv-opts{margin-top:16px; display:grid; gap:12px}
.oc-rv-type,.oc-rv-time{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){ .oc-rv-type{grid-template-columns:1fr} }
.oc-rv-q.is-wait .oc-rv-opts{opacity:.45; pointer-events:none}

/* 選ぶカード:選ぶ前から白い丸の印(押して選ぶものと分かるように)・押すとわずかに縮む・選ぶと紺のチェック */
.oc-rv-opt{position:relative; display:block; cursor:pointer; -webkit-tap-highlight-color:transparent}
.oc-rv-opt input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.oc-rv-card{position:relative; display:flex; flex-direction:column; gap:6px; height:100%; padding:18px 20px; border:1.5px solid rgba(27,32,135,.34); border-radius:10px; background:#fff; box-shadow:0 2px 6px rgba(27,32,135,.08); transition:border-color .2s, background-color .2s, box-shadow .2s, transform .12s}
.oc-rv-opt:active .oc-rv-card{transform:scale(.98)}
@media (hover:hover){ .oc-rv-opt:hover .oc-rv-card{border-color:var(--blue); box-shadow:0 4px 12px rgba(27,32,135,.14)} }
.oc-rv-card::after{content:""; position:absolute; width:24px; height:24px; border-radius:50%; border:2px solid rgba(27,32,135,.45); background:#fff; box-sizing:border-box}
.oc-rv-card .t{font-size:1.05rem; font-weight:500; letter-spacing:.06em; line-height:1.5}
.oc-rv-card .c{font-size:.84rem; color:var(--ink-soft); line-height:1.7}
.oc-rv-badge{display:inline-block; align-self:flex-start; margin-bottom:2px; padding:1px 10px; border-radius:999px; background:var(--red-pale); color:#B8352B; font-size:.72rem; letter-spacing:.06em; line-height:1.9}
.oc-rv-badge[hidden]{display:none}
.oc-rv-opt input:checked + .oc-rv-card{border:2px solid var(--blue); background:#DFE2F4; box-shadow:0 3px 10px rgba(27,32,135,.14)}
.oc-rv-opt input:checked + .oc-rv-card .t{color:var(--blue)}
.oc-rv-opt input:checked + .oc-rv-card::after{border:0; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") center/14px no-repeat}
.oc-rv-opt input:focus-visible + .oc-rv-card{outline:2px solid var(--blue); outline-offset:3px}
/* 内容のカード:アイコンは左。丸の印はスマホで右端の真ん中、PC の3列では右上 */
.oc-rv-type .oc-rv-card{justify-content:center; min-height:96px; padding-left:66px; padding-right:54px}
.oc-rv-card > .oc-ic{position:absolute; left:16px; top:50%; transform:translateY(-50%)}
.oc-rv-type .oc-rv-card::after{right:16px; top:50%; margin-top:-12px}
@media (min-width:821px){
  .oc-rv-type .oc-rv-card{justify-content:flex-start; padding-top:44px; padding-right:20px}
  .oc-rv-type .oc-rv-card::after{top:14px; right:14px; margin-top:0}
}
/* 時間のカード:丸の印は上の真ん中 */
.oc-rv-time .oc-rv-card{align-items:center; gap:2px; padding:38px 8px 14px; text-align:center}
.oc-rv-time .oc-rv-card::after{left:50%; top:10px; width:22px; height:22px; margin-left:-11px}
.oc-rv-time .t{font-size:1.2rem}
.oc-rv-time .p{font-size:.8rem; color:var(--ink-soft); line-height:1.6}
.oc-rv-time .p b{font-weight:500; color:var(--ink)}
.oc-rv-time .oc-rv-badge{align-self:center; margin:4px 0 0}
/* その内容にない時間(整体＋パーソナルトレーニングの 60分):点線の枠・灰色・押せない */
.oc-rv-opt.is-off{cursor:not-allowed}
.oc-rv-opt.is-off .oc-rv-card{border-style:dashed; border-color:rgba(33,33,33,.18); background:#F4F4F4; color:#9a9a9a; box-shadow:none}
.oc-rv-opt.is-off .oc-rv-card .p,.oc-rv-opt.is-off .p b{color:#9a9a9a}
.oc-rv-opt.is-off .oc-rv-card::after{border-style:dashed; border-color:rgba(33,33,33,.2); background:transparent}
@media (max-width:420px){
  .oc-rv-time{gap:8px}
  .oc-rv-time .oc-rv-card{padding:36px 4px 12px}
  .oc-rv-time .p{font-size:.74rem}
}

/* 選んだメニュー */
.oc-rv-sum{padding:clamp(20px,3vw,30px); border:1.5px solid rgba(27,32,135,.22); border-radius:12px; background:#fff; box-shadow:0 6px 22px rgba(27,32,135,.07)}
.oc-rv-sum .lbl{font-size:.8rem; letter-spacing:.12em; color:var(--ink-soft)}
.oc-rv-sum .name{margin:4px 0 0; font-size:clamp(1.15rem,1rem + .6vw,1.4rem); font-weight:500; letter-spacing:.04em; color:var(--blue)}
.oc-rv-sum .empty{margin:6px 0 0; font-size:.95rem; color:var(--ink-soft)}
.oc-rv-price{display:grid; gap:4px; margin:14px 0 0; padding:0; list-style:none; font-size:.92rem}
.oc-rv-price li{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dotted rgba(27,32,135,.2)}
.oc-rv-price li b{font-weight:500; white-space:nowrap}
.oc-rv-price li.first b{color:#B8352B}
.oc-rv-sum .pay{margin:12px 0 0; font-size:.84rem; line-height:1.8; color:var(--ink-soft)}
.oc-rv-go{display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:60px; margin-top:20px; padding:14px 20px; border:1px solid var(--red-soft); border-radius:6px; background:var(--red-soft); color:#fff; font-size:1.02rem; font-weight:500; letter-spacing:.1em; text-decoration:none; box-shadow:0 2px 4px -1px rgba(218,74,63,.25); transition:transform .3s, box-shadow .3s}
.oc-rv-go svg{flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.oc-rv-go:hover{transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(218,74,63,.55)}
.oc-rv-go:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
@media (max-width:420px){ .oc-rv-go{gap:10px; padding:14px 12px; letter-spacing:.05em} } /* 狭い画面で「内容と時間を選んでください」が折り返さないように */
.oc-rv-go[aria-disabled="true"]{border-color:#EDEDED; background:#EDEDED; color:#8a8a8a; box-shadow:none; transform:none; pointer-events:none}
.oc-rv-sum .after{margin:12px 0 0; font-size:.84rem; line-height:1.8; color:var(--ink-soft); text-align:center}
.oc-rv-sum .after b{font-weight:500; color:var(--ink)}
.oc-rv-reset{display:block; min-height:44px; margin:4px auto 0; padding:6px 12px; appearance:none; border:0; background:none; font:inherit; font-size:.86rem; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.oc-rv-reset:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ご予約の前に */
.oc-rv-notes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:clamp(24px,3vw,32px)}
@media (max-width:820px){ .oc-rv-notes{grid-template-columns:1fr} }
.oc-rv-notes > div{padding:22px 22px 20px; border:1px solid rgba(27,32,135,.14); border-radius:10px; background:#fff}
.oc-psec .oc-rv-notes h3{display:flex; align-items:center; gap:12px; margin:0 0 10px; font-size:1.05rem}
.oc-rv-notes p,.oc-rv-notes li{font-size:.9rem; line-height:1.9}
.oc-rv-notes p{margin:0}
.oc-rv-notes ul{margin:0; padding-left:1.2em}
.oc-rv-notes .tel{display:inline-block; margin-top:8px; font-size:1.05rem; font-weight:500; letter-spacing:.06em; color:var(--blue); text-decoration:none}

/* 8つのメニューから直接(折りたたみ) */
.oc-rv-all{margin-top:clamp(28px,4vw,40px); padding-top:18px; border-top:1px solid rgba(27,32,135,.14)}
.oc-rv-all summary{display:flex; align-items:center; gap:10px; min-height:44px; list-style:none; font-size:.95rem; letter-spacing:.04em; color:var(--blue); cursor:pointer}
.oc-rv-all summary::-webkit-details-marker{display:none}
.oc-rv-all summary::before{content:"+"; flex:none; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--blue); font-size:.9rem; line-height:1}
.oc-rv-all[open] summary::before{content:"−"}
.oc-rv-all summary:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.oc-rv-all ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0 0; padding:0; list-style:none}
@media (max-width:620px){ .oc-rv-all ul{grid-template-columns:1fr} }
.oc-rv-all a{display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:44px; padding:12px 14px; border:1px solid rgba(27,32,135,.16); border-radius:8px; background:#fff; color:var(--ink); font-size:.92rem; text-decoration:none}
.oc-rv-all a svg{flex:none; width:16px; height:16px; fill:none; stroke:var(--blue); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.oc-rv-all a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.oc-rv-all .note{margin-top:10px}
/* 第20回 作業B(A-1):hidden の欄は、display の指定より優先して隠す */
.oc-rv-sum [hidden]{display:none!important}
/* 第20回 作業B(B-22):押せないあいだは「↗」を出さない */
.oc-rv-go[aria-disabled="true"] svg{display:none}
/* 第20回 作業B(B-26):注意書きの箱の幅を本文と同じ約 600px に(最後の「す。」だけが次の行に落ちていた) */
.oc-rv-pre{max-width:600px; box-sizing:border-box}
/* 第20回 作業B(B-16):320px 前後で札「はじめての方におすすめ」が折れないよう、文字を小さく */
@media (max-width:360px){ .oc-rv-badge{padding:1px 8px; font-size:.64rem; letter-spacing:.02em; white-space:nowrap} }
/* 320px 前後で押せないボタンの「内容と時間を選んでください」が「い」だけ次の行に落ちないよう */
@media (max-width:360px){ .oc-rv-go{font-size:.86rem; letter-spacing:.02em} #oc-rv-go-t{white-space:nowrap} }