.contact-page { background:#17140f; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
.contact-visual { margin:0; position:relative; min-height:760px; }
.contact-visual>img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:56% center; }
.contact-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(23,20,15,.88)); }
.contact-visual-copy { position:absolute; bottom:54px; left:var(--gutter); right:var(--gutter); z-index:2; }
.contact-visual-copy h2 { font-size:clamp(28px,4vw,48px); }
.contact-visual-copy p { letter-spacing:.16em; }
.contact-form-col { padding:clamp(28px,4vw,64px); background:linear-gradient(rgba(23,20,15,.82),rgba(23,20,15,.92)),url('../assets/sumi/blend-b.jpg') center/cover; min-width:0; }
.contact-brand { font-family:var(--mincho); color:var(--akari); margin:0 0 20px; font-size:20px; }
.contact-brand small { display:block; font:11px var(--gothic); letter-spacing:.2em; color:var(--hai); margin-top:6px; }
.contact-form-col h1 { font-size:clamp(26px,3vw,36px); }
.contact-form-col .lead { font-size:14px; color:var(--hai); margin:18px 0 24px; }
.contact-reserve { border-block:1px solid var(--line); padding:16px 0; margin-bottom:24px; font-size:14px; }
.contact-reserve p { margin:0 0 12px; }
#bookingStatus:empty { display:none; }
.tel-box { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; font-size:13px; margin:0 0 24px; }
.tel-box a { display:inline-flex; align-items:center; color:var(--akari); text-decoration:none; font-size:17px; }
.tel-hours,.tel-note { color:var(--hai); }
.tel-note { flex-basis:100%; }
#contactForm { display:grid; gap:22px; }
#contactForm .row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field { min-width:0; }
.field label { display:block; margin-bottom:8px; font-size:13px; }
.req { color:var(--akari); margin-left:6px; }
.field input,.field select,.field textarea { display:block; width:100%; background:rgba(23,20,15,.6); color:var(--kinari); border:1px solid rgba(235,227,211,.35); border-radius:2px; font:16px/1.6 var(--gothic); padding:10px 12px; }
.field select option { background:var(--sumi); }
.field textarea { min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--akari); }
.submit { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
#submitBtn { background:var(--akari); color:#1c1407; border:0; padding:12px 34px; font:inherit; cursor:pointer; }
#submitBtn:disabled { opacity:.65; cursor:wait; }
.note { font-size:12px; color:var(--hai); }
.contact-policy { background:transparent; border:0; color:var(--akari); font:inherit; text-decoration:underline; cursor:pointer; padding:0 4px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.done { display:none; position:fixed; inset:0; z-index:100; background:rgba(23,20,15,.98); align-items:center; justify-content:center; text-align:center; padding:24px; }
.done.show { display:flex; }
.done h3 { font-size:clamp(24px,4vw,36px); }
.done p { color:var(--hai); }
.done a { display:inline-flex; align-items:center; border:1px solid var(--line); padding:10px 24px; }
.contact-page button,.contact-page select,.contact-page input:not([type="hidden"]),.contact-page textarea,.contact-page a { min-width:44px; min-height:44px; }
@media(max-width:880px) { .contact-layout { grid-template-columns:1fr; } .contact-visual { min-height:340px; } .contact-visual-copy { bottom:24px; } #contactForm .row { grid-template-columns:1fr; } }
@media(max-width:480px) { .contact-page .brand-en { display:none; } .contact-page .site-head { gap:8px; } .contact-page .head-tools { margin-left:auto; } .contact-page .brand-name { font-size:16px; white-space:nowrap; } .contact-page #menuToggle { padding-inline:8px; } .contact-form-col { padding:28px 20px; } }