/* reserve.rentalcycle.cotaru.co 共有スタイル — ミニマル版（Owner 承認 2026-06-11）
   デザイン言語: 白背景 / 墨＋緑1色 / 1px 実線・破線罫線 / 影・グラデなし / 等幅数字
   参照: agents.cloudflare.com（色数と罫線の使い方）。クラス名は旧版から変更しない。 */
:root{
  --brand:#157a52; --brand-d:#116243; --accent:#157a52; --ink:#1c2420;
  --muted:#6e7d76; --line:#c9d8d0; --bg:#fff; --card:#fff; --ok:#157a52;
  --err:#b3401f; --radius:6px; --shadow:none;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.tnum,.price,.summary,.code{font-variant-numeric:tabular-nums}
.phone{max-width:460px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:96px;border-left:1px dashed var(--line);border-right:1px dashed var(--line)}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.logo .mark{width:26px;height:26px;border-radius:6px;border:1px solid var(--brand);color:var(--brand);background:#fff;display:grid;place-items:center;font-size:14px}
.logo small{display:block;font-weight:400;font-size:10px;color:var(--muted);letter-spacing:.06em}
.steps{display:flex;gap:4px;padding:14px 16px 4px}
.steps .s{flex:1;height:3px;background:var(--line)}
.steps .s.done{background:var(--brand)} .steps .s.cur{background:var(--brand);opacity:.45}
.steptitle{padding:6px 16px 0;font-size:12px;color:var(--muted)} .steptitle b{color:var(--brand);font-size:12.5px;font-weight:600}
main{padding:8px 16px}
.h{font-size:18px;font-weight:600;margin:12px 2px 4px}
.sub{font-size:12.5px;color:var(--muted);margin:0 2px 14px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.12s}
.plan:active{background:#fafcfb}
.plan.sel{border-color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
.plan .ico{display:none}
.plan .body{flex:1;min-width:0} .plan .body .pn{font-weight:600;font-size:14.5px} .plan .body .pd{font-size:11.5px;color:var(--muted)}
.plan .price{text-align:right;flex:none} .plan .price .y{font-weight:600;font-size:16px;color:var(--ink)} .plan .price .web{font-size:10px;color:var(--brand);font-weight:600}
.badge{display:inline-block;font-size:10px;background:#fff;color:var(--brand);border:1px solid var(--line);border-radius:4px;padding:0 6px;margin-left:6px;font-weight:600}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.field label .req{color:var(--err);font-size:11px;margin-left:4px;font-weight:400}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-size:15px;background:#fff;font-family:inherit;color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand)}
.field.invalid input{border-color:var(--err)}
.num{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;width:fit-content;background:#fff}
.num button{width:46px;height:46px;border:none;background:#fff;font-size:20px;color:var(--brand);cursor:pointer}
.num input{width:54px;text-align:center;border:none;border-left:1px dashed var(--line);border-right:1px dashed var(--line);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.opt{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:11px 14px;margin-bottom:8px}
.opt .l{font-size:13.5px;font-weight:500} .opt .l small{display:block;color:var(--muted);font-weight:400;font-size:11px}
.opt .pp{font-size:12px;color:var(--ink);font-weight:600;margin-right:8px;font-variant-numeric:tabular-nums} .opt .pp.free{color:var(--brand)}
.chk{width:22px;height:22px;accent-color:var(--brand)}
.consent{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;font-size:12.5px;align-items:flex-start}
.consent a{color:var(--brand);font-weight:600;text-underline-offset:3px}
.promo{display:flex;gap:8px} .promo input{flex:1}
.promo button{flex:none;background:#fff;color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius);padding:0 16px;font-weight:600;font-size:13px;cursor:pointer}
.promomsg{font-size:12px;margin-top:6px;font-weight:600;display:none}
.note{font-size:11.5px;color:var(--muted);margin-top:8px;border-left:2px solid var(--line);padding:2px 10px}
.note.warn{color:var(--err);border-left-color:var(--err)}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.summary .line{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;border-bottom:1px dashed var(--line);gap:12px}
.summary .line b{text-align:right;font-weight:600} .summary .line:last-child{border:none}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:10px;border-top:1px solid var(--ink)}
.summary .total .t{font-weight:600} .summary .total .v{font-weight:600;font-size:22px;color:var(--brand)}
.done-wrap{text-align:center;padding:40px 16px}
.done-wrap .big{width:72px;height:72px;border-radius:50%;border:1px solid var(--brand);background:#fff;color:var(--brand);font-size:34px;display:grid;place-items:center;margin:0 auto 18px}
.done-wrap .big.err{border-color:var(--err);color:var(--err)}
.done-wrap h2{font-size:20px;font-weight:600;margin-bottom:6px}
.code{font-size:14px;letter-spacing:.08em;background:#fff;border:1px dashed var(--brand);border-radius:4px;padding:10px 14px;display:inline-block;margin:12px 0;font-weight:600;color:var(--brand);font-family:ui-monospace,'SF Mono',Menlo,monospace}
.cta{position:fixed;left:0;right:0;bottom:0;max-width:460px;margin:0 auto;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:10px;align-items:center}
.cta .est{flex:none;font-size:11px;color:var(--muted);line-height:1.2;font-variant-numeric:tabular-nums} .cta .est b{display:block;font-size:17px;color:var(--ink);font-weight:600}
.cta button.main{flex:1;background:var(--brand);color:#fff;border:none;border-radius:var(--radius);padding:14px;font-size:15px;font-weight:600;cursor:pointer}
.cta button.main:disabled{background:#fff;color:var(--muted);border:1px solid var(--line);cursor:not-allowed}
.cta button.back{flex:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-size:13px;cursor:pointer;color:var(--muted)}
/* 画面の表示切替は hidden 属性で行う（reserve.js が hidden をトグル）。
   旧 .screen{display:none}+.on 方式は hidden 属性と二重管理になり全画面非表示になる不具合があったため統一。 */
.screen[hidden]{display:none}
.screen:not([hidden]){display:block;animation:in .2s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.loading{text-align:center;padding:60px 16px;color:var(--muted)}
.btn-line{display:inline-block;margin-top:8px;color:var(--brand);font-weight:600;text-decoration:none;border:1px solid var(--brand);border-radius:var(--radius);padding:10px 18px}
.btn-danger{background:#fff;border:1px solid var(--err);color:var(--err);border-radius:var(--radius);padding:13px;font-size:15px;font-weight:600;cursor:pointer;width:100%}
.foot{font-size:10.5px;color:var(--muted);text-align:center;padding:14px;border-top:1px solid var(--line)}