/* 予約申込・お問い合わせページ：ガラスのパネルのフォーム。予約申込は背景写真、お問い合わせは陽の光が差す海（.deep）。
   予約申込の項目は Figma Make の「予約申込」と同じ。見出し・ヘッダー・登場アニメーションは sub.css と共通。 */

.reserve{background:#06304f}

/* ---------- 背景（index の .warp と同じ見た目＝切れ目なく入れ替わる） ---------- */
.bg{position:fixed;inset:0;z-index:-2;background:url("../assets/reserve-bg.jpg") center 32%/cover no-repeat;transform-origin:62% 40%;animation:drift2 28s ease-in-out infinite alternate}
/* drift2：背景を 28 秒かけて 1 → 1.08 倍に（ease-in-out の緩急）。見た目は from{scale:1} to{scale:1.08} と同じだが、
   毎フレーム少しずつ動かすと、上に重なるすりガラスのパネル（backdrop-filter: blur + saturate）が毎フレームぼかしを描き直して重くなる（頭のない Chrome の PC 幅で約 33fps）。
   そこで ease-in-out の曲線を 20 区間に分け、各区間を倍率 0.001 ずつの段（steps）で進める＝画面の端でも 1 回 1px 未満しか動かない。
   描き直しは 1 秒に数回で済む（約 57fps）。区間の値は ease-in-out = cubic-bezier(.42,0,.58,1) から計算した（2026-10-27） */
@keyframes drift2{0%{scale:1.00000;animation-timing-function:steps(1)}5%{scale:1.00039;animation-timing-function:steps(1)}10%{scale:1.00158;animation-timing-function:steps(2)}15%{scale:1.00362;animation-timing-function:steps(3)}20%{scale:1.00653;animation-timing-function:steps(4)}25%{scale:1.01033;animation-timing-function:steps(5)}30%{scale:1.01499;animation-timing-function:steps(5)}35%{scale:1.02044;animation-timing-function:steps(6)}40%{scale:1.02655;animation-timing-function:steps(7)}45%{scale:1.03315;animation-timing-function:steps(7)}50%{scale:1.04000;animation-timing-function:steps(7)}55%{scale:1.04685;animation-timing-function:steps(7)}60%{scale:1.05345;animation-timing-function:steps(6)}65%{scale:1.05956;animation-timing-function:steps(5)}70%{scale:1.06501;animation-timing-function:steps(5)}75%{scale:1.06967;animation-timing-function:steps(4)}80%{scale:1.07347;animation-timing-function:steps(3)}85%{scale:1.07638;animation-timing-function:steps(2)}90%{scale:1.07842;animation-timing-function:steps(1)}95%{scale:1.07961;animation-timing-function:steps(1)}100%{scale:1.08000}}
.shade{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,26,44,.45),rgba(2,26,44,.25) 40%,rgba(2,26,44,.62)),linear-gradient(90deg,rgba(2,26,44,.5),transparent 62%)}

.wrap{min-height:100vh;min-height:100svh;display:grid;justify-items:center;align-items:start;padding:clamp(104px,15vh,150px) var(--pad) 72px}
.rform{width:min(100%,640px)}
.rhead{display:grid;justify-items:center;gap:14px;text-align:center}

/* ---------- フォーム ---------- */
form{display:grid;gap:18px;margin-top:28px}
.field{display:grid;gap:8px}
.field>label{font:500 13px/1.4 var(--ff-ui);letter-spacing:.08em}
.req{color:#ffb4a2}
input[type=text],input[type=email],input[type=tel],input[type=datetime-local],input[type=date],input[type=number],select,textarea{
  width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.42);background-color:rgba(255,255,255,.12);
  color:#fff;font:400 16px/1.5 var(--ff-ui);color-scheme:dark;transition:border-color .25s,background-color .25s,box-shadow .25s;
}
::placeholder{color:rgba(255,255,255,.58)}
select{
  -webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
}
select option{color:#08354f;background:#fff}
textarea{resize:vertical;min-height:110px}
input:focus,select:focus,textarea:focus{outline:none;border-color:#fff;background-color:rgba(255,255,255,.18);box-shadow:0 0 0 3px rgba(255,255,255,.28)}
[aria-invalid="true"]{border-color:#ffb4a2!important}
.ferr{font-size:13px;color:#ffd7cc}
.ferr:empty{display:none}
.ferr:not(:empty)::before{content:"⚠ "}
.demo{font-size:13px;opacity:.85}
form .xcta{margin-top:6px}
form .xcta:disabled{opacity:.6;cursor:progress}   /* 送っている間（受け口の返事待ち）は押せない */
.hint{font-size:13px;opacity:.8}

/* ---------- 予約申込：REDUX の「予約の前に」とそろえて足した部品（2026-10-27）。仮の見た目で、仲村さんに整えてもらう候補 ---------- */
/* 日にち・人数を横に並べる（狭い画面では縦に） */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* 選ぶボタン（泳ぎ・経験は 1 つ、心配なことはいくつでも）。入力欄と同じ白い線・ガラスの色の丸いボタン。本物の radio / checkbox を下に重ねて、キーボードと読み上げはそのまま使う */
.choice{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.choice>legend{padding:0;margin-bottom:8px;font:500 13px/1.4 var(--ff-ui);letter-spacing:.08em}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.12);font:400 15px/1.4 var(--ff-ui);transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s}
.opt:hover span{background:rgba(255,255,255,.2)}
.opt input:checked+span{background:#fff;border-color:#fff;color:#08354f;font-weight:500}
.opt input:focus-visible+span{box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.dives{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;font-size:14px}
.dives input{width:7.5em}
/* 受け付けの画面：REDUX に渡す JSON（畳んでおき、開くと見える） */
.dev{width:100%;text-align:left}
.dev summary{cursor:pointer;font-size:13px;opacity:.85}
.dev summary:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.json{margin:10px 0 0;padding:14px 16px;border-radius:14px;background:rgba(0,20,36,.55);font:400 12.5px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left}

/* ---------- お問い合わせ：よくあるご質問への案内と、お電話でのご相談 ---------- */
.faqlink{font-size:14px}
.faqlink a{color:#9fe3f0;text-underline-offset:3px}
.ctel{display:flex;align-items:center;gap:16px;margin-top:26px;padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
.ctel .ico{flex:none;width:30px;height:30px;color:#9fe3f0}
.ctel__k{font-size:13px;letter-spacing:.06em;opacity:.85}
.ctel__num{margin-top:2px;font:600 22px/1.3 var(--ff-ui);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ctel__num small{font:400 12px/1 var(--ff-ui);letter-spacing:0;opacity:.7}
.ctel__hours{font-size:13px;opacity:.85}

/* ---------- 完了 ---------- */
.thanks{display:grid;justify-items:center;gap:16px;margin-top:18px;text-align:center}
.check{width:76px;height:76px}
.check circle{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:176;stroke-dashoffset:176;animation:draw .9s var(--ease) forwards}
.check path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .6s var(--ease) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
html[data-motion="off"] .check circle,html[data-motion="off"] .check path{stroke-dashoffset:0}
.review{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;width:100%;margin:6px 0 0;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.08);text-align:left}
.review dt{padding-top:.2em;font-size:13px;letter-spacing:.06em;opacity:.78}
.review dd{margin:0;font-weight:500;overflow-wrap:anywhere;white-space:pre-line}

/* ---------- アラビア語（右から左に書く）：選ぶ欄の矢印は左へ。メールアドレス・電話番号は左から右に書き（数字とハイフンの並びが崩れないように）、
   日時の欄（ブラウザが左から右に固定する）とともに、ほかの欄にそろえて右に寄せる ---------- */
html[dir="rtl"] select{padding-right:16px;padding-left:44px;background-position:left 16px center}
html[dir="rtl"] input[type=email],html[dir="rtl"] input[type=tel],html[dir="rtl"] input[type=datetime-local],html[dir="rtl"] input[type=date],html[dir="rtl"] input[type=number]{direction:ltr;text-align:right}
html[dir="rtl"] .ctel__num span{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .review{text-align:right}
html[dir="rtl"] .dev{text-align:right}

@media (max-width:640px){
  .row2{grid-template-columns:1fr}
  .wrap{padding-top:120px}
  .review{grid-template-columns:1fr;gap:2px}
  .review dd{margin-bottom:10px}
}