/* GOOD CYCLE FES 予約フォーム 見た目レイヤー v1（2026-10-25 くろちゃん）
   送信・項目名・受付メールの仕組みには触れない。見た目と操作感だけ。 */
:root{--rp-y:#f6c945;--rp-ink:#121714;--rp-g:#2c7d48;--rp-g2:#389b5a;--rp-cream:#f4f1e8;--rp-coral:#ff6a3d;--rp-sp:cubic-bezier(.34,1.56,.64,1)}
body.rp{background:var(--rp-cream);background-image:radial-gradient(rgba(18,23,20,.07) 1px,transparent 1.2px);background-size:22px 22px}
body.rp .hero{position:relative;padding-right:120px}
body.rp .hero h1 em{position:relative;display:inline-block;font-style:normal}
body.rp .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.32em;background:var(--rp-y);z-index:-1;border-radius:6px;transform-origin:0 50%;animation:rpUl 1s .3s var(--rp-sp) both}
@keyframes rpUl{from{transform:scaleX(0)}}
.rp-mascot{position:absolute;right:0;top:6px;width:104px;animation:rpBob 3.2s ease-in-out infinite;filter:drop-shadow(0 12px 14px rgba(18,23,20,.18));pointer-events:none}
@keyframes rpBob{50%{transform:translateY(-8px) rotate(-3deg)}}
@media(max-width:600px){body.rp .hero{padding-right:84px}.rp-mascot{width:76px}}
/* ステップ */
.rp-steps{position:sticky;top:0;z-index:20;display:flex;gap:6px;padding:10px 0;margin:0 0 6px;background:linear-gradient(var(--rp-cream) 70%,rgba(244,241,232,0))}
.rp-steps .rp-st{border:0!important;background:none!important;padding:0!important;margin:0!important;box-shadow:none!important;border-radius:0!important;flex:1;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;color:#8b928d;white-space:nowrap}
.rp-steps .rp-st i{padding:0;margin:0;flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:#fff;border:2px solid #d9d6cc;color:#8b928d;transition:all .35s var(--rp-sp)}
.rp-steps .rp-st b{flex:1;height:4px;border-radius:9px;background:#e3e0d6;overflow:hidden;position:relative}
.rp-steps .rp-st b::after{content:"";position:absolute;inset:0;background:var(--rp-g);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s ease}
.rp-steps .rp-st.done{color:var(--rp-g)}
.rp-steps .rp-st.done i{background:var(--rp-g);border-color:var(--rp-g);color:#fff;transform:scale(1.08)}
.rp-steps .rp-st.done b::after{transform:none}
.rp-steps .rp-st:last-child b{display:none}
@media(max-width:520px){.rp-steps .rp-st em{display:none}}
.rp-steps .rp-st em{font-style:normal}
/* カード */
body.rp .blk,body.rp .info{background:#fff;border-radius:24px;border:1.5px solid rgba(18,23,20,.1);box-shadow:0 18px 40px -30px rgba(18,23,20,.45);padding:22px 20px;margin-bottom:16px;transition:transform .5s ease,opacity .5s ease}
body.rp .blk.rp-hide,body.rp .rsv.rp-hide{opacity:0;transform:translateY(26px)}
/* チップ */
body.rp .chip{position:relative;transition:transform .25s var(--rp-sp),box-shadow .25s,background .2s,border-color .2s}
body.rp .chip>span{border-radius:16px!important;border-width:2px!important;padding:14px 12px!important;font-weight:900!important;font-size:15px;transition:background .2s,border-color .2s,color .2s}
body.rp .chip:hover>span{border-color:var(--rp-ink)!important}
body.rp .chip:hover{transform:translateY(-2px)}

body.rp .chip.on>span,body.rp .chip:has(input:checked)>span{background:var(--rp-y)!important;border-color:var(--rp-ink)!important;color:var(--rp-ink)!important;box-shadow:4px 4px 0 var(--rp-ink)}
body.rp .chip.on{animation:rpPop .45s var(--rp-sp)}
body.rp .chip.on::after{content:"✓";position:absolute;right:-6px;top:-8px;width:24px;height:24px;border-radius:50%;background:var(--rp-ink);color:#fff;font-size:13px;font-weight:900;display:grid;place-items:center;animation:rpPop .4s var(--rp-sp)}
body.rp .chip.full::after{display:none}
@keyframes rpPop{0%{transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:none}}
/* 人数カウンター */
.rp-cnt{display:flex;align-items:center;gap:14px;background:var(--rp-cream);border-radius:20px;padding:14px 16px;margin:6px 0 4px;flex-wrap:wrap}
.rp-cnt button{width:52px;height:52px;border-radius:50%;border:2.5px solid var(--rp-ink);background:#fff;font-size:24px;font-weight:900;line-height:1;cursor:pointer;transition:transform .2s var(--rp-sp),background .2s;font-family:inherit;color:var(--rp-ink)}
.rp-cnt button:hover{background:var(--rp-ink);color:#fff}
.rp-cnt button:active{transform:scale(.88)}
.rp-cnt button:disabled{opacity:.3;cursor:not-allowed;background:#fff;color:var(--rp-ink)}
.rp-cnt output{font-size:40px;font-weight:900;min-width:2.2ch;text-align:center;font-family:Montserrat,sans-serif;display:inline-block}
.rp-cnt output small{font-size:15px;margin-left:2px;font-family:inherit}
.rp-cnt output.bump{animation:rpBump .35s var(--rp-sp)}
@keyframes rpBump{40%{transform:scale(1.3)}}
.rp-ppl{display:flex;gap:3px;flex:1 1 100%;min-height:30px;align-items:flex-end}
.rp-ppl img{width:30px;height:30px;object-fit:contain;animation:rpIn .4s var(--rp-sp) both}
@keyframes rpIn{from{transform:translateY(12px) scale(.4);opacity:0}}
body.rp .rp-numchips{display:none!important}
/* 下のバー：合計 */
body.rp .bar{background:rgba(18,23,20,.96)!important;color:#fff}
body.rp .bar .in{gap:12px}
.rp-sum{display:flex;flex-direction:column;line-height:1.25;font-size:12px;font-weight:700;color:rgba(255,255,255,.78);margin-right:auto;min-width:0}
.rp-sum b{color:#fff;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-sum b em{font-style:normal;color:var(--rp-y)}
body.rp .bar #remain{color:var(--rp-y)}
body.rp #go{background:var(--rp-y)!important;color:var(--rp-ink)!important;border-radius:999px!important;font-weight:900!important;transition:transform .25s var(--rp-sp)}
body.rp #go:not(:disabled){animation:rpGo 2s ease-in-out infinite}
@keyframes rpGo{0%,100%{box-shadow:0 0 0 0 rgba(246,201,69,.6)}50%{box-shadow:0 0 0 10px rgba(246,201,69,0)}}
body.rp #go:disabled{background:#4a524d!important;color:#aab1ac!important;animation:none}
/* 確認画面：チケット風 */
body.rp #confirm:not([hidden]){position:relative;background:#fff;border-radius:24px;border:2.5px solid var(--rp-ink);box-shadow:8px 8px 0 var(--rp-ink);padding:22px 20px;animation:rpTk .55s var(--rp-sp)}
body.rp #confirm::before{content:"YOUR RESERVATION";display:block;font:800 11px/1 Montserrat,sans-serif;letter-spacing:.2em;color:var(--rp-g);margin-bottom:8px}
body.rp #confirm dl{border-top:2px dashed #d9d6cc;border-bottom:2px dashed #d9d6cc;padding:12px 0}
@keyframes rpTk{from{transform:translateY(30px) rotate(-2deg);opacity:0}}
/* 完了 */
body.rp section.done{text-align:center;animation:rpTk .6s var(--rp-sp)}
body.rp section.done .done-mark{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;background:var(--rp-g);color:#fff;font-size:52px;font-weight:900;display:grid;place-items:center;animation:rpMark .7s var(--rp-sp) both}
@keyframes rpMark{0%{transform:scale(0) rotate(-40deg)}100%{transform:none}}
.rp-chars{display:flex;justify-content:center;gap:4px;margin:10px 0 4px}
.rp-chars img{width:58px;animation:rpBob 2.4s ease-in-out infinite}
.rp-chars img:nth-child(2){animation-delay:-.6s}.rp-chars img:nth-child(3){animation-delay:-1.2s}
#rpCf{position:fixed;inset:0;pointer-events:none;z-index:99}
.rp-demo{position:fixed;left:50%;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 104px);transform:translateX(-50%);opacity:.92;z-index:100;background:var(--rp-coral);color:#fff;font-size:12px;font-weight:900;padding:6px 12px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(0,0,0,.4);pointer-events:none;white-space:nowrap}
/* 予約のご案内（reservation/） */
body.rp .rsv{transition:box-shadow .35s}
body.rp .rsv .rsv-img{overflow:hidden;border-radius:18px}
body.rp .rsv .rsv-img img{transition:transform .6s ease}
body.rp .rsv:hover .rsv-img img{transform:scale(1.05)}
body.rp .rsv-btn{border-radius:999px!important;background:var(--rp-y)!important;color:var(--rp-ink)!important;border:2.5px solid var(--rp-ink)!important;box-shadow:4px 4px 0 var(--rp-ink);font-weight:900!important;transition:transform .2s var(--rp-sp),box-shadow .2s}
body.rp .rsv-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rp-ink)}
body.rp .rsv-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--rp-ink)}
@media(prefers-reduced-motion:reduce){body.rp *,body.rp *::before,body.rp *::after{animation:none!important;transition:none!important}body.rp .blk.rp-hide{opacity:1;transform:none}}

@media(max-width:600px){body.rp .bar .in{flex-wrap:wrap;row-gap:6px}.rp-sum{flex:1 1 100%;flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}.rp-sum b{font-size:14px}.rp-sum span{font-size:11px}body.rp .bar #remain{font-size:12px}}

/* 2026-10-25 社長：カードごと浮き上がって傾く動きだけ止める（写真の拡大・スクロールで出てくる・確認/完了の登場・選択肢の浮き上がりは残す） */