@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   page-webform.css — ご予約・お問い合わせ（/webform/）とお申し込みフォーム（/webform/form/）
   下層ページの器（.page:not(.ska-flush)）が上余白・中央寄せ・本文幅を持つ。
   罫線と余白で組み、色は theme.css の変数のみ。白基調・明朝。
   ══════════════════════════════════════════════════════════════════════ */

.wf{width:100%}
.wf-in{padding-inline:clamp(20px,3.4vw,52px)}

/* ── 節（見出し＋内容）。上に細い罫で区切る ── */
.wf-sec{margin:clamp(34px,4.4vw,56px) 0 0;padding-top:clamp(22px,2.8vw,32px);border-top:1px solid var(--keisen)}
.wf-sec:first-of-type{border-top:0;margin-top:clamp(18px,2.4vw,28px)}
.wf-h{margin:0 0 clamp(12px,1.6vw,18px);display:flex;align-items:baseline;gap:.8em;flex-wrap:wrap;
 font-family:var(--f-disp);font-weight:600;font-size:clamp(18px,2.2vw,23px);letter-spacing:.05em;color:var(--midashi)}
.wf-h-en{font-family:var(--f-lat);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--kogane)}
.wf-lead{margin:0 0 clamp(16px,2vw,22px);font-family:var(--f-body);font-size:13.5px;line-height:2.05;letter-spacing:.03em;color:var(--moji);max-width:46em}
.wf-lead b{color:var(--midashi);font-weight:600}

/* ── オンライン予約の埋め込み ── */
.wf-embed{position:relative;width:100%;aspect-ratio:4/3;max-width:760px;border:1px solid var(--keisen);background:var(--ji-2);overflow:hidden}
.wf-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wf-embed-btn{margin:clamp(14px,2vw,20px) 0 0}

/* ── 箇条書き・注意 ── */
.wf-note,.wf-cases{list-style:none;margin:clamp(14px,2vw,20px) 0 0;padding:0;max-width:46em}
.wf-note li,.wf-cases li{position:relative;padding:7px 0 7px 18px;font-family:var(--f-body);font-size:12.5px;line-height:1.95;color:var(--moji-2);border-bottom:1px solid var(--keisen)}
.wf-note li:last-child,.wf-cases li:last-child{border-bottom:0}
.wf-note li::before{content:"※";position:absolute;left:0;top:7px;color:var(--enji);font-size:11px}
.wf-cases li::before{content:"";position:absolute;left:0;top:1.05em;width:8px;height:1px;background:var(--kogane)}
.wf-note a,.wf-cases a{color:var(--kogane-moji)}

/* ── 連絡先 ── */
.wf-contact{margin:clamp(6px,1vw,12px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(14px,2vw,22px)}
.wf-cc{display:flex;flex-direction:column;gap:5px;padding:clamp(18px,2.4vw,26px);border:1px solid var(--keisen);background:var(--ji);text-decoration:none;transition:border-color .35s var(--ease),background .35s var(--ease)}
.wf-cc:hover{border-color:var(--kogane);background:var(--ji-2)}
.wf-cc-k{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--kogane)}
.wf-cc-v{font-family:var(--f-disp);font-weight:600;font-size:clamp(16px,2vw,20px);letter-spacing:.04em;color:var(--midashi)}
.wf-cc-s{font-family:var(--f-body);font-size:11.5px;line-height:1.7;color:var(--moji-2)}
.wf-mailnote{margin:clamp(14px,2vw,20px) 0 0;font-size:11.5px;line-height:1.9;color:var(--moji-3);max-width:48em}
.wf-privacy{margin:14px 0 0;font-size:12.5px;letter-spacing:.06em}
.wf-privacy a{color:var(--kogane-moji)}

/* ══════════════════════════════════════════════════════════════════════
   お申し込みフォーム（.rf-*）
   ══════════════════════════════════════════════════════════════════════ */
.rf-lead{margin:clamp(14px,2vw,22px) 0 0;font-family:var(--f-body);font-size:13.5px;line-height:2.05;letter-spacing:.03em;color:var(--moji);max-width:48em}
.rf-lead b{color:var(--midashi);font-weight:600}
.rf-lead a.u,.rf-lead a{color:var(--kogane-moji)}

/* 送信結果メッセージ */
.rf-msg{margin:clamp(18px,2.4vw,26px) 0 0;padding:16px 20px;font-family:var(--f-body);font-size:13px;line-height:1.95;border:1px solid var(--keisen)}
.rf-msg--ok{border-left:3px solid var(--kogane);color:var(--moji)}
.rf-msg--err{border-left:3px solid var(--enji);color:var(--moji)}
.rf-no{color:var(--enji)}

/* ハニーポット（人には見せない） */
.ska-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.rf{margin:clamp(22px,3vw,34px) 0 0}
.rf-req{margin:0 0 clamp(14px,2vw,20px);font-size:12px;color:var(--enji);letter-spacing:.04em}

.rf-sec{margin:clamp(30px,4vw,48px) 0 0;padding-top:clamp(22px,2.8vw,32px);border-top:1px solid var(--keisen)}
.rf-sec:first-of-type{border-top:0;margin-top:0}
.rf-h2{margin:0 0 clamp(16px,2.2vw,24px);display:flex;align-items:center;gap:.6em;
 font-family:var(--f-disp);font-weight:600;font-size:clamp(16px,1.9vw,20px);letter-spacing:.06em;color:var(--midashi)}
.rf-h2 span{display:inline-grid;place-content:center;width:1.9em;height:1.9em;font-family:var(--f-lat);font-size:.72em;color:var(--enji);border:1px solid var(--enji);border-radius:50%}

.rf-field{margin:0 0 clamp(16px,2vw,22px)}
.rf-label{display:block;margin:0 0 8px;font-family:var(--f-disp);font-weight:600;font-size:13.5px;letter-spacing:.04em;color:var(--midashi)}
.rf-sub{display:block;margin-top:3px;font-family:var(--f-body);font-weight:400;font-size:11px;line-height:1.7;letter-spacing:.02em;color:var(--moji-3)}
.rf-hint{margin:8px 0 0;font-size:11px;line-height:1.85;color:var(--moji-3)}

.rf-input,.rf-select,.rf-textarea{width:100%;padding:11px 13px;font-family:var(--f-body);font-size:14px;letter-spacing:.02em;color:var(--moji);
 background:var(--ji);border:1px solid var(--keisen);border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .3s var(--ease)}
.rf-input:focus,.rf-select:focus,.rf-textarea:focus{outline:none;border-color:var(--kogane)}
.rf-input::placeholder,.rf-textarea::placeholder{color:var(--moji-3)}
.rf-textarea{line-height:1.9;resize:vertical;min-height:5.5em}
.rf-select{background-image:linear-gradient(45deg,transparent 50%,var(--kogane) 50%),linear-gradient(135deg,var(--kogane) 50%,transparent 50%);
 background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px;cursor:pointer}

/* 2列・3列 */
.rf-row2,.rf-row3{display:grid;gap:clamp(12px,1.8vw,20px)}
.rf-row2{grid-template-columns:1fr 1fr}
.rf-row3{grid-template-columns:1fr 1fr 1fr}
.rf-row2 .rf-field,.rf-row3 .rf-field{margin:0}
.rf-row2,.rf-row3{margin:0 0 clamp(16px,2vw,22px)}

/* プランごとのカテゴリ（手入力せず選ぶだけで済むよう網羅） */
.rf-cat-note{margin:0 0 clamp(14px,2vw,20px);font-family:var(--f-body);font-size:12px;line-height:1.85;color:var(--moji-2)}
.rf-cat{margin:0 0 clamp(16px,2.2vw,24px);padding:clamp(16px,2vw,22px);border:1px solid var(--keisen);background:var(--ji-2)}
.rf-cat:last-of-type{margin-bottom:0}
.rf-h3{margin:0 0 clamp(18px,2.4vw,26px);padding-left:12px;border-left:2px solid var(--kogane);
 font-family:var(--f-disp);font-weight:600;font-size:14.5px;letter-spacing:.05em;color:var(--midashi)}
.rf-cat .rf-field{margin-bottom:clamp(12px,1.6vw,16px)}
.rf-cat .rf-field:last-child{margin-bottom:0}

/* チェックボックス群 */
.rf-checks{display:flex;flex-wrap:wrap;gap:8px 10px}
.rf-check{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--keisen);background:var(--ji);cursor:pointer;
 font-family:var(--f-body);font-size:12.5px;letter-spacing:.02em;color:var(--moji);transition:border-color .3s var(--ease),background .3s var(--ease)}
.rf-check input{accent-color:var(--ebicha);width:15px;height:15px;flex:0 0 auto}
.rf-check:hover{border-color:var(--kogane)}
.rf-check:has(input:checked){border-color:var(--ebicha);background:rgba(var(--enji-rgb),.05)}

/* 規約同意 */
.rf-agree{margin:clamp(26px,3.4vw,40px) 0 0;padding-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--keisen)}
.rf-check--agree{border:0;background:none;padding:0;font-size:13.5px;color:var(--moji)}
.rf-check--agree a{color:var(--kogane-moji)}

/* 送信ボタン */
.rf-submit-wrap{margin:clamp(24px,3vw,36px) 0 0;display:flex;justify-content:center}
.rf-submit{appearance:none;cursor:pointer;min-width:min(340px,100%);padding:16px 32px;
 font-family:var(--f-disp);font-weight:600;font-size:14.5px;letter-spacing:.14em;color:var(--shironeri);
 background:var(--ebicha);border:1px solid var(--ebicha);transition:background .35s var(--ease),transform .35s var(--ease)}
.rf-submit:hover{background:var(--enji);border-color:var(--kogane);transform:translateY(-1px)}

@media (max-width:640px){
	.wf-contact{grid-template-columns:1fr}
	.rf-row2,.rf-row3{grid-template-columns:1fr}
}
