@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600;700&display=swap');

:root { --teal:#2c7a78; --ink:#294542; --paper:#fbfaf6; --line:#d5e1da; --muted:#667a75; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans JP",sans-serif; }
img { display:block; max-width:100%; height:auto; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.site-header { height:78px; display:flex; align-items:center; gap:2.4rem; padding:0 clamp(1.25rem,6vw,7rem); background:rgba(251,250,246,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:.7rem; min-width:max-content; }
.seal { width:35px; height:35px; border:2px solid var(--teal); border-radius:50%; display:grid; place-items:center; color:var(--teal); font-family:"Noto Serif JP",serif; font-size:.65rem; }
.brand small { display:block; font-size:.52rem; letter-spacing:.16em; color:#66817a; }
.brand strong { display:block; font-family:"Noto Serif JP",serif; font-size:.9rem; letter-spacing:.08em; }
.site-header nav { margin-left:auto; display:flex; gap:1.5rem; font-size:.7rem; color:#526965; }
.header-cta,.primary { border:0; background:var(--teal); color:#fff; padding:.8rem 1.05rem; font-weight:700; font-size:.72rem; }
.hero { display:grid; grid-template-columns:1fr 1fr; min-height:640px; background:#f6f4ed; }
.hero-copy { padding:clamp(5rem,12vw,11rem) clamp(2rem,8vw,8rem); align-self:center; position:relative; }
.eyebrow { margin:0 0:1rem; color:var(--teal); font-size:.62rem; letter-spacing:.14em; font-weight:700; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Noto Serif JP",serif; font-weight:600; }
h1 { font-size:clamp(2.6rem,5vw,4.6rem); line-height:1.27; letter-spacing:.06em; margin-bottom:1.8rem; }
h1 em,h2 em { color:var(--teal); font-style:normal; }
.hero-copy>p:not(.eyebrow) { color:var(--muted); max-width:420px; font-size:.85rem; line-height:2; }
.hero-actions { margin-top:2rem; display:flex; gap:1.2rem; align-items:center; }
.text-link { color:var(--teal); font-size:.75rem; font-weight:700; }
.hero-meta { display:flex; gap:1.6rem; margin-top:3rem; font-size:.65rem; color:#6d817c; }
.hero-meta b { display:block; color:var(--ink); margin-bottom:.25rem; }
.hero-image { min-height:400px; position:relative; overflow:hidden; }
.hero-image img { width:100%; height:100%; object-fit:cover; }
.caption { position:absolute; left:0; bottom:0; padding:1.1rem 1.4rem; background:rgba(37,66,62,.91); color:#fff; font-size:.72rem; line-height:1.7; }
.caption b { color:#b8ddd3; margin-right:1rem; }
.section { padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,8vw,9rem); }
.about { background:#fff; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,9vw,10rem); align-items:end; }
h2 { font-size:clamp(1.8rem,3vw,3rem); line-height:1.45; letter-spacing:.04em; }
.split p { color:var(--muted); font-size:.82rem; line-height:2.1; }
.approach { margin-top:4rem; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.approach article { padding:1.7rem 1.5rem 0 0; min-height:170px; border-right:1px solid var(--line); }
.approach article+article { padding-left:1.5rem; }
.approach article:last-child { border-right:0; }
.approach span { color:var(--teal); font-family:"Noto Serif JP",serif; font-size:1.2rem; }
.approach h3 { font-size:1rem; margin:.7rem 0; }
.approach p { color:var(--muted); font-size:.72rem; line-height:1.8; }
.menus { background:#eff5f1; }
.menu-heading { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:2rem; }
.menu-heading p:not(.eyebrow) { color:var(--muted); font-size:.75rem; line-height:1.9; }
.menu-list { border-top:1px solid #bfcec6; }
.menu-item { width:100%; border:0; border-bottom:1px solid #c7d6ce; background:transparent; padding:1.3rem 0; display:grid; grid-template-columns:60px 1fr auto 140px; align-items:center; text-align:left; gap:1rem; color:var(--ink); }
.menu-item:hover,.menu-item.selected { background:rgba(255,255,255,.62); }
.menu-no { color:var(--teal); font-family:"Noto Serif JP",serif; font-size:1rem; padding-left:.8rem; }
.menu-item h3 { margin:0 0 .4rem; font-size:1rem; }
.menu-item p,.menu-item small { margin:0; color:var(--muted); font-size:.68rem; line-height:1.7; }
.menu-price { display:grid; text-align:right; }
.menu-price strong { font-size:.88rem; }
.menu-item>span:last-child { color:var(--teal); font-size:.7rem; font-weight:700; text-align:right; padding-right:.8rem; }
.care { display:grid; grid-template-columns:1fr 1fr; background:#fff; }
.care img { height:100%; min-height:390px; width:100%; object-fit:cover; }
.care-copy { padding:clamp(3rem,8vw,8rem); align-self:center; }
.care-copy p:not(.eyebrow) { color:var(--muted); font-size:.8rem; line-height:2; }
.assurance { margin-top:2rem; padding:1rem 0; border-top:1px solid var(--line); color:#52716a; font-size:.7rem; line-height:1.8; }
.booking { background:linear-gradient(135deg,#f8faf7,#edf5f1); }
.booking-layout { display:grid; grid-template-columns:.65fr 1.35fr; gap:clamp(2rem,8vw,9rem); }
.booking-intro p:not(.eyebrow) { color:var(--muted); font-size:.8rem; line-height:2; }
.booking-card { background:rgba(255,255,255,.92); border:1px solid var(--line); box-shadow:0 18px 55px rgba(36,67,63,.08); padding:clamp(1.2rem,3vw,2.6rem); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.steps span { color:#91a39e; font-size:.58rem; display:flex; gap:.35rem; align-items:center; }
.steps b { width:20px; height:20px; display:grid; place-items:center; border:1px solid #aebeb8; border-radius:50%; font-size:.6rem; }
.steps span.active { color:var(--teal); }
.steps span.active b { background:var(--teal); color:#fff; border-color:var(--teal); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; padding:1.6rem 0; }
.form-grid label { color:#526a65; display:grid; gap:.4rem; font-size:.7rem; font-weight:700; }
.form-grid input,.form-grid textarea,.form-grid select { width:100%; border:1px solid #cbd9d2; background:#fff; padding:.72rem; color:var(--ink); border-radius:0; font-size:.84rem; }
.form-grid textarea { min-height:86px; resize:vertical; }
.full { grid-column:1/-1; }
.availability { border-top:1px solid var(--line); padding:1rem 0 0; }
.availability p { margin:0 0 .7rem; color:#52716a; font-size:.7rem; }
.slots { display:flex; flex-wrap:wrap; gap:.45rem; }
.slots button { border:1px solid #c8d8d0; background:#fff; color:#46625c; padding:.55rem .65rem; font-size:.68rem; }
.slots button.selected { color:#fff; border-color:var(--teal); background:var(--teal); }
.form-actions { display:flex; justify-content:flex-end; padding-top:1.2rem; border-top:1px solid var(--line); }
.message { display:none; margin-top:1rem; padding:.85rem; border-left:3px solid var(--teal); background:#eef7f3; color:#355f57; font-size:.72rem; line-height:1.8; white-space:pre-line; }
.message.error { border-color:#ad5944; background:#fff2ed; color:#884735; }
.message.show { display:block; }
footer { padding:3rem clamp(1.25rem,8vw,9rem); background:#253f3d; color:#d8e9e4; display:flex; justify-content:space-between; gap:1.5rem; align-items:center; font-size:.72rem; }
footer .brand strong { color:#fff; }
footer .seal { border-color:#9bcabe; color:#9bcabe; }
@media (max-width:760px) { .site-header { height:68px; gap:.8rem; }.site-header nav { display:none; }.header-cta { margin-left:auto; }.hero,.care,.booking-layout,.split { grid-template-columns:1fr; }.hero-copy { padding:4.3rem 1.5rem 3.2rem; }.hero-image { min-height:315px; }.section { padding:4.5rem 1.25rem; }.approach { grid-template-columns:1fr; }.approach article,.approach article+article { min-height:auto; padding:1.25rem 0; border-right:0; border-bottom:1px solid var(--line); }.menu-heading { display:block; }.menu-item { grid-template-columns:35px 1fr auto; gap:.65rem; }.menu-item p { grid-column:2/4; }.menu-price { grid-column:2; text-align:left; display:flex; gap:.6rem; }.menu-item>span:last-child { grid-column:3; grid-row:3; }.care img { min-height:290px; }.form-grid { grid-template-columns:1fr; }.full { grid-column:auto; }.steps span { display:grid; grid-template-columns:20px 1fr; }.steps { gap:.15rem; } footer { align-items:flex-start; flex-direction:column; } }