:root { --ink:#4c3934; --muted:#806962; --rose:#c96d7b; --rose-dark:#ae5364; --paper:#fffaf8; --blush:#faece9; --line:#ebcbc9; --white:#fffdfc; --serif:"Noto Serif JP",serif; --display:"DM Serif Display",serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(135deg,#fffaf8,#fff2ef); font-family:var(--serif); font-size:14px; letter-spacing:.04em; line-height:1.75; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.booking-header { display:flex; min-height:70px; padding:16px max(22px,calc((100% - 980px)/2)); align-items:center; justify-content:space-between; border-bottom:1px solid rgba(201,109,123,.2); background:rgba(255,253,252,.88); }
.booking-logo { color:var(--rose-dark); font-family:var(--display); font-size:33px; line-height:1; text-decoration:none; }.booking-logo span { margin-left:9px; font-family:var(--serif); font-size:10px; letter-spacing:.13em; }.back-link { color:var(--muted); font-size:11px; text-decoration:none; }.back-link:hover { color:var(--rose-dark); }
.booking-hero { position:relative; overflow:hidden; padding:68px 22px 78px; background:radial-gradient(circle at 80% 20%,#f8dadd 0,rgba(248,218,221,0) 32%),linear-gradient(135deg,#fffdfc,#fbe8e7); text-align:center; }.booking-hero::before,.booking-hero::after { position:absolute; width:260px; height:260px; border:1px solid rgba(201,109,123,.22); border-radius:50%; content:""; }.booking-hero::before { top:-160px; left:-90px; }.booking-hero::after { right:-100px; bottom:-180px; }.eyebrow { position:relative; margin:0; color:var(--rose-dark); font-family:var(--display); font-size:11px; letter-spacing:.2em; }.booking-hero h1 { position:relative; margin:8px 0 13px; font-size:31px; font-weight:500; letter-spacing:.12em; }.booking-hero>p:not(.eyebrow) { position:relative; margin:0; color:#715952; font-size:13px; }.notice { position:relative; display:inline-flex; margin-top:23px; padding:8px 14px; align-items:center; gap:9px; border:1px solid rgba(201,109,123,.42); background:rgba(255,253,252,.75); font-size:11px; }.notice strong { color:var(--rose-dark); font-weight:500; }
.booking-panel { width:min(100% - 30px,760px); margin:-31px auto 54px; padding:24px 18px 28px; position:relative; border:1px solid rgba(201,109,123,.25); background:var(--white); box-shadow:0 18px 50px rgba(124,73,75,.1); }.steps { display:flex; margin:0 0 30px; padding:0; justify-content:center; gap:15px; list-style:none; color:#a58a82; font-size:10px; }.steps li { display:flex; align-items:center; gap:5px; }.steps span { display:grid; width:21px; height:21px; place-items:center; border:1px solid #dcc1bb; border-radius:50%; font-family:var(--display); font-size:12px; }.steps .is-current { color:var(--rose-dark); }.steps .is-current span { border-color:var(--rose-dark); color:#fff; background:var(--rose-dark); }
form { max-width:620px; margin:auto; } fieldset { margin:0; padding:24px 0 25px; border:0; border-top:1px solid var(--line); } fieldset:first-of-type { padding-top:0; border-top:0; } legend { padding:0; color:var(--rose-dark); font-size:17px; font-weight:500; letter-spacing:.09em; }.fieldset-note { margin:4px 0 17px; color:var(--muted); font-size:11px; }.field-grid { display:grid; gap:14px; }.field { min-width:0; }.field label { display:flex; margin-bottom:6px; align-items:center; gap:6px; color:#59443e; font-size:12px; }.field label b,.date-request b,.agreement b { display:inline-block; padding:1px 5px; color:#fff; background:var(--rose-dark); font-size:9px; font-weight:400; letter-spacing:.04em; line-height:1.55; }.field label span,.date-request span { color:#9d8179; font-size:10px; }.field input,.field select,.field textarea { width:100%; min-height:45px; padding:9px 11px; border:1px solid #dcc3bd; border-radius:0; outline:none; color:var(--ink); background:#fff; font-size:14px; }.field textarea { min-height:105px; resize:vertical; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--rose-dark); box-shadow:0 0 0 3px rgba(201,109,123,.12); }.field small { display:block; margin-top:4px; color:#9c827b; font-size:10px; }.conditional-fields { margin-top:15px; padding:15px; border-left:3px solid var(--rose); background:#fff8f6; }.conditional-title { margin:0 0 8px; color:var(--rose-dark); font-size:12px; }.date-request { padding:17px 0; border-top:1px dashed var(--line); }.date-request:first-of-type { padding-top:0; border-top:0; }.date-request>p { margin:0 0 10px; color:#684f48; font-size:13px; }.agreement { display:flex; margin:0 0 18px; padding:13px; align-items:flex-start; gap:9px; border:1px solid var(--line); background:#fff9f7; color:#634c45; font-size:11px; line-height:1.7; }.agreement input { width:16px; height:16px; margin:2px 0 0; accent-color:var(--rose-dark); }.form-message { min-height:1.75em; margin:0 0 10px; color:var(--rose-dark); font-size:12px; text-align:center; }.form-message.is-error { color:#a94747; }.submit-button { display:flex; width:100%; min-height:57px; padding:0 19px; align-items:center; justify-content:center; gap:18px; border:0; color:#fff; background:linear-gradient(135deg,#d67281,#b95165); box-shadow:0 8px 18px rgba(176,75,94,.2); font-size:15px; letter-spacing:.08em; transition:transform .2s ease,filter .2s ease; }.submit-button:hover:not(:disabled) { filter:brightness(.97); transform:translateY(-2px); }.submit-button:disabled { cursor:wait; opacity:.65; }.submit-button span { font-size:21px; }.privacy-note { margin:11px 0 0; color:#9d8179; font-size:10px; text-align:center; }.booking-help { display:flex; margin:30px auto 0; padding:16px; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px 13px; border-top:1px solid var(--line); color:#765e56; font-size:11px; text-align:center; }.booking-help strong { color:var(--rose-dark); font-weight:500; }.booking-help a { color:var(--rose-dark); text-decoration:underline; text-underline-offset:3px; }.honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
footer { padding:28px 20px; color:#9d8179; background:#fff8f6; font-family:var(--display); font-size:10px; letter-spacing:.1em; text-align:center; }
.time-picker { margin-top:14px; }.time-picker>p { display:flex; margin:0 0 7px; align-items:center; gap:6px; color:#59443e; font-size:12px; }.time-picker>p span { color:#9d8179; font-size:10px; }.time-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.time-option { position:relative; display:grid; min-height:38px; place-items:center; cursor:pointer; }.time-option input { position:absolute; opacity:0; }.time-option span { display:grid; width:100%; min-height:38px; place-items:center; border:1px solid #dcc3bd; color:#765e56; background:#fff; font-family:var(--display); font-size:15px; transition:background .16s ease,border-color .16s ease,color .16s ease; }.time-option input:checked+span { border-color:var(--rose-dark); color:#fff; background:var(--rose-dark); }.time-option input:focus-visible+span { outline:3px solid rgba(201,109,123,.25); outline-offset:2px; }
@media (min-width:620px) { .booking-header { min-height:82px; }.booking-hero { padding:83px 30px 100px; }.booking-hero h1 { font-size:38px; }.booking-panel { margin-top:-42px; padding:34px 44px 36px; }.steps { gap:30px; }.field-grid { grid-template-columns:1fr 1fr; }.field-wide { grid-column:1 / -1; } }
@media (min-width:620px) { .time-options { grid-template-columns:repeat(5,1fr); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }