:root { --ink:#272a26; --green:#657964; --sage:#dfe6d9; --cream:#f8f5ee; --paper:#fcfaf5; --clay:#b88561; --line:#dedbd1; --serif:"Noto Serif JP", serif; --sans:"Zen Kaku Gothic New", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:15px; line-height:2; letter-spacing:.05em; }
a { color:inherit; text-decoration:none; }
.site-header { height:98px; width:100%; padding:0 clamp(24px,5vw,82px); display:flex; align-items:center; justify-content:space-between; position:absolute; z-index:10; background:linear-gradient(to bottom,rgba(252,250,245,.94),rgba(252,250,245,0)); }
.brand { display:inline-flex; flex-direction:column; line-height:1.2; letter-spacing:.16em; min-width:105px; }
.brand span { font-size:10px; color:var(--green); }.brand strong { font-family:var(--serif); font-size:20px; font-weight:500; }
.main-nav { display:flex; align-items:center; gap:clamp(18px,2.2vw,42px); font-size:13px; white-space:nowrap; }.main-nav a:not(.nav-cta) { transition:color .2s; }.main-nav a:not(.nav-cta):hover { color:var(--green); }
.nav-cta,.button { display:inline-flex; align-items:center; justify-content:center; gap:25px; border-radius:999px; font-weight:500; transition:transform .2s, background .2s, color .2s; }.nav-cta { color:white; background:var(--green); padding:12px 25px; }.button { padding:15px 26px; min-width:242px; }.nav-cta:hover,.button:hover { transform:translateY(-2px); }.button b { font-size:24px; font-weight:400; line-height:1; }.button-primary { color:#fff; background:var(--green); }.button-light { color:var(--green); background:#fff; }.button-outline { border:1px solid rgba(255,255,255,.75); color:#fff; }
.menu-button { display:none; }
.hero { min-height:723px; display:grid; grid-template-columns:47% 53%; background:var(--cream); overflow:hidden; }.hero-copy { padding:174px 5vw 78px max(7vw,70px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }.eyebrow,.section-kicker { margin:0 0 14px; font-size:11px; letter-spacing:.16em; color:var(--green); }.hero h1,.section h2,.contact h2 { margin:0; font-family:var(--serif); line-height:1.52; font-size:clamp(31px,3.1vw,52px); letter-spacing:.1em; font-weight:500; }.line { display:block; width:57px; height:1px; margin:29px 0 27px; background:var(--green); }.hero-text { margin:0 0 34px; font-size:15px; }.hero-note { margin:32px 0 0; color:var(--green); font-size:12px; }.hero-image { min-height:723px; background:linear-gradient(90deg,var(--cream) 0%,rgba(248,245,238,0) 17%), url("images/treatment-room-hero.png") center/cover no-repeat; }
.section { padding:108px max(7vw,56px); }.features { text-align:center; background:var(--paper); }.features h2,.menu h2,.faq h2 { font-size:31px; }.feature-grid { max-width:1120px; margin:48px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }.feature-card { text-align:left; padding:14px 28px 22px; display:grid; grid-template-columns:86px 1fr; column-gap:20px; }.feature-icon { width:82px; height:82px; display:grid; place-items:center; grid-row:span 2; border-radius:50%; background:#f3f1ea; color:var(--green); font-family:var(--serif); font-size:43px; line-height:1; }.feature-card:nth-child(3) .feature-icon { color:var(--clay); }.feature-card h3 { margin:10px 0 6px; font-family:var(--serif); font-size:18px; font-weight:500; }.feature-card p { margin:0; font-size:13px; line-height:1.9; }
.message { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,130px); align-items:center; padding-left:0; background:#e9eee4; }.message-photo { min-height:520px; background:linear-gradient(90deg,rgba(81,97,76,.08),rgba(81,97,76,.08)),url("images/treatment-room-hero.png") 65% center/cover no-repeat; }.message-copy { max-width:520px; padding-right:30px; }.message h2 { font-size:clamp(28px,2.6vw,42px); margin-bottom:27px; }.message-copy p:not(.section-kicker) { margin:0 0 16px; font-size:14px; }.text-link { display:inline-flex; align-items:center; gap:20px; margin-top:13px; padding-bottom:8px; border-bottom:1px solid var(--green); color:var(--green); font-size:13px; }.text-link b { font-size:18px; font-weight:400; }
.menu { text-align:center; }.section-lead { margin:9px 0 38px; font-size:14px; }.menu-grid { max-width:1060px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:left; }.menu-card { min-height:252px; padding:30px; background:#f3f0e8; display:flex; flex-direction:column; }.menu-card p { margin:0; color:var(--green); font-size:12px; }.menu-card h3 { margin:22px 0 9px; font-family:var(--serif); font-size:21px; font-weight:500; }.menu-card span { font-size:13px; line-height:1.8; }.menu-card strong { margin-top:auto; padding-top:20px; font-size:14px; font-weight:500; }.price-note { margin:20px 0 0; color:#76746e; font-size:11px; }
.flow { background:#f0eee7; display:grid; grid-template-columns:29% 1fr; gap:48px; }.flow ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }.flow li { min-height:99px; padding:22px 7px; display:grid; grid-template-columns:86px 1fr; border-bottom:1px solid var(--line); }.flow li span { color:var(--green); font-size:13px; }.flow li h3 { margin:0 0 3px; font-family:var(--serif); font-size:18px; font-weight:500; }.flow li p { margin:0; font-size:13px; }
.faq { max-width:1100px; margin:auto; padding-left:0; padding-right:0; }.faq h2 { margin-bottom:35px; }.accordion { border-top:1px solid var(--line); }.accordion details { border-bottom:1px solid var(--line); }.accordion summary { padding:21px 35px 21px 0; cursor:pointer; list-style:none; font-family:var(--serif); font-size:17px; position:relative; }.accordion summary::-webkit-details-marker { display:none; }.accordion summary::after { content:"＋"; position:absolute; right:0; color:var(--green); font-family:var(--sans); }.accordion details[open] summary::after { content:"−"; }.accordion details p { margin:0; padding:0 38px 22px 0; font-size:13px; }
.contact { padding:92px 30px; text-align:center; background:var(--green); color:white; }.contact .section-kicker { color:#d9e0d0; }.contact h2 { font-size:34px; }.contact > p:not(.section-kicker) { margin:10px 0 29px; font-size:14px; }.contact-actions { display:flex; justify-content:center; gap:13px; }.contact small { display:block; margin-top:24px; color:#e4eadf; font-size:10px; }.access { display:grid; grid-template-columns:30% 1fr; gap:45px; max-width:1100px; margin:auto; }.access h2 { font-size:31px; }.access-info { border-top:1px solid var(--line); }.access dl { margin:0; }.access dl div { display:contents; }.access dt,.access dd { margin:0; padding:18px 0; border-bottom:1px solid var(--line); font-size:13px; }.access dt { float:left; width:120px; color:var(--green); }.access dd { padding-left:120px; }.access-info p { margin:20px 0 0; font-size:12px; }
footer { min-height:128px; padding:29px max(7vw,56px); display:flex; align-items:center; justify-content:space-between; background:#edf0e9; }footer p { margin:0; font-size:11px; color:#6d716a; }.floating-cta { display:none; }.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:900px) { .site-header { height:74px; padding:0 24px; position:fixed; background:rgba(252,250,245,.94); backdrop-filter:blur(8px); }.main-nav { position:absolute; top:74px; left:0; width:100%; padding:20px 24px 26px; display:none; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); box-shadow:0 10px 20px rgba(36,39,34,.08); }.main-nav.is-open { display:flex; }.main-nav a { padding:12px 0; border-bottom:1px solid var(--line); }.main-nav .nav-cta { margin-top:15px; border:0; }.menu-button { display:flex; align-items:center; gap:5px; border:0; padding:7px 0 7px 10px; background:transparent; cursor:pointer; flex-wrap:wrap; justify-content:flex-end; width:57px; }.menu-button span { width:24px; height:1px; display:block; background:var(--ink); }.menu-button i { width:100%; font-style:normal; font-size:9px; line-height:1.2; }.hero { min-height:unset; grid-template-columns:1fr; padding-top:74px; }.hero-copy { min-height:545px; padding:75px 8vw 55px; position:relative; z-index:1; background:linear-gradient(90deg,rgba(248,245,238,.98) 0%,rgba(248,245,238,.92) 60%,rgba(248,245,238,.45) 100%); }.hero-image { min-height:290px; margin-top:-115px; background-position:60% center; }.feature-grid,.menu-grid { grid-template-columns:1fr; max-width:540px; }.feature-card { padding:10px 0; }.message { grid-template-columns:1fr; gap:0; padding:0 0 65px; }.message-photo { min-height:330px; }.message-copy { padding:60px 8vw 0; }.flow,.access { grid-template-columns:1fr; gap:30px; }.faq { padding-left:8vw; padding-right:8vw; }.section { padding:76px 8vw; }.contact { padding:75px 7vw; }.access { padding-left:8vw; padding-right:8vw; }.floating-cta { display:grid; place-items:center; position:fixed; z-index:9; bottom:17px; right:17px; width:70px; height:70px; border-radius:50%; color:white; background:var(--green); box-shadow:0 5px 18px rgba(35,47,35,.3); font-size:12px; }.contact-actions { flex-direction:column; align-items:center; }.button { width:min(100%,310px); }.hero h1 { font-size:37px; }.hero-note { font-size:10px; }.menu-card { min-height:210px; }.access dt { width:86px; }.access dd { padding-left:86px; } }
@media (max-width:480px) { .brand strong { font-size:18px; }.hero-copy { min-height:515px; }.hero h1 { font-size:31px; }.hero-text { font-size:13px; }.feature-card { grid-template-columns:70px 1fr; column-gap:16px; }.feature-icon { width:64px; height:64px; font-size:35px; }.flow li { grid-template-columns:57px 1fr; }.contact h2 { font-size:28px; } }