:root{--paper:#f5f3ee;--ink:#303832;--muted:#646c63;--line:#d7dbd1;--accent:#485749;--serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;--sans:"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:35px}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
figure,h1,h2,h3,p{margin:0}
a:focus-visible,summary:focus-visible,button:focus-visible,.style-gallery:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:20px;z-index:20;padding:12px;background:var(--ink);color:white}
.skip-link:focus{top:10px}
.page-width{width:88%;max-width:1200px;margin-inline:auto}
.content-width{width:80%;max-width:880px;margin-inline:auto}
.text-width{width:80%;max-width:730px;margin-inline:auto}
.header{height:112px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.brand{font:600 36px/1 Arial,sans-serif;letter-spacing:.22em}
.site-menu summary{display:flex;align-items:center;gap:20px;min-height:44px;cursor:pointer;list-style:none;font-size:11px;letter-spacing:.06em}
.site-menu summary::-webkit-details-marker{display:none}
.menu-mark{font-size:20px;font-weight:300;transition:transform .15s}
.site-menu[open] .menu-mark{transform:rotate(45deg)}
.site-menu nav{position:absolute;top:85px;right:0;width:245px;padding:14px 25px;display:grid;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 22px #30383208}
.site-menu nav a{padding:15px 0;font-size:12px;line-height:1.7}
.site-menu nav a:hover{text-decoration:underline;text-underline-offset:6px}
.hero{display:grid;grid-template-columns:1fr 1.1fr;grid-template-areas:"copy photo";gap:6%;align-items:center}
.hero-photo{grid-area:photo;height:580px;background:#e7e9e6;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.hero-photo.hero-film{position:relative;height:auto;aspect-ratio:16/9}
.hero-film video,.hero-film img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.hero-film [hidden]{display:none}
.hero-copy{grid-area:copy;padding-bottom:8px}
.hero h1{font:400 clamp(30px,3.1vw,45px)/1.85 var(--serif);letter-spacing:.035em;white-space:nowrap}
.hero-copy p{font-size:13px;line-height:2.1;letter-spacing:.07em;color:var(--muted);margin-top:26px}
.booking{display:flex;align-items:center;justify-content:center;width:226px;min-height:55px;padding:16px 22px;background:var(--accent);color:white;font-size:12px;letter-spacing:.1em;transition:background .15s}
.booking:hover{background:#334436}
.hero-copy .booking{margin-top:34px}
h2{font:400 28px/1.8 var(--serif);letter-spacing:.07em}
.concept{padding:125px 0 110px;text-align:center}
.concept h2{margin-bottom:29px}
.concept p{color:var(--muted);font-size:12px;line-height:2.25;letter-spacing:.04em}
.concept p+p{margin-top:17px}
.styles{padding-bottom:100px}
.styles-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.styles h2{font-size:24px}
.gallery-controls{display:flex;gap:7px}
.gallery-controls[hidden]{display:none}
.gallery-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);background:transparent;color:var(--ink);font:20px/1 var(--sans);cursor:pointer}
.gallery-controls button:hover:not(:disabled){border-color:var(--accent)}
.gallery-controls button:disabled{opacity:.3;cursor:default}
.style-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3.2);gap:20px;list-style:none;margin:0;padding:5px 3px 18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#a6afa0 #e5e7df}
.style-gallery::-webkit-scrollbar{height:3px}
.style-gallery::-webkit-scrollbar-track{background:#e5e7df}
.style-gallery::-webkit-scrollbar-thumb{background:#a6afa0}
.style-gallery li{min-width:0;scroll-snap-align:start}
.style-card{display:block}
.style-card img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#e7e9e6}
.style-caption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:14px;font-size:11px;line-height:1.7;letter-spacing:.025em}
.style-detail{white-space:nowrap;color:var(--muted);font-size:9px}
.style-card:hover .style-detail{text-decoration:underline;text-underline-offset:4px}
.gallery-hint{margin-top:13px;font-size:10px;line-height:1.7;color:var(--muted);letter-spacing:.04em}
.quiet-link{display:inline-block;border-bottom:1px solid #a6afa0;padding-bottom:6px;font-size:11px;line-height:1.8;letter-spacing:.04em}
.quiet-link:hover{border-color:var(--ink)}
.styles>.quiet-link{margin-top:29px}
.salon{padding:65px 0 75px;display:grid;grid-template-columns:1fr 1.45fr;gap:45px;border-top:1px solid var(--line)}
.salon h2{font-size:24px}
.salon-name{font:28px Arial,sans-serif;letter-spacing:.13em}
.salon-name span{margin-left:10px;font:10px var(--sans);letter-spacing:.05em}
address,.salon-details>p:not(.salon-name){font-style:normal;color:var(--muted);font-size:11px;line-height:2.15;letter-spacing:.035em;margin-top:20px}
.salon .quiet-link{margin-top:23px}
.salon .booking{margin-top:34px}
.footer{padding:26px 0 40px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}
.footer small{font:10px Arial,sans-serif}
@media(min-width:1500px){.header{height:125px}.hero-photo{height:640px}}
@media(max-width:1000px) and (min-width:761px){.hero-photo{height:490px}.hero h1{font-size:28px}.hero-copy p{font-size:12px}.hero{gap:4%}}
@media(max-width:760px){
.page-width,.content-width,.text-width{width:calc(100% - 48px);max-width:480px}
.header{height:79px}.brand{font-size:30px}
.site-menu summary{font-size:10px;gap:15px}.site-menu nav{top:64px;width:225px}
.hero{grid-template-columns:1fr;grid-template-areas:"photo" "copy";gap:0}
.hero-photo.hero-film{aspect-ratio:9/16}
.hero-photo{height:auto;aspect-ratio:.95}.hero-photo img{object-position:50% 25%}
.hero-copy{padding:25px 0 0}
.hero h1{font-size:clamp(22px,6.8vw,32px);line-height:1.85;letter-spacing:.025em}
.hero-copy p{font-size:11px;line-height:2;margin-top:16px}
.hero-copy .booking{width:100%;margin-top:24px;min-height:53px}
.concept{padding:78px 0 70px;text-align:left}h2{font-size:25px}
.concept h2{margin-bottom:23px}.concept p{font-size:11px;line-height:2.25}.desktop-break{display:none}
.styles{padding-bottom:67px}.styles h2{font-size:22px}
.styles-heading{margin-bottom:18px;gap:12px}
.style-gallery{grid-auto-columns:78%;gap:14px;padding-bottom:16px}
.style-caption{margin-top:12px}
.styles>.quiet-link{margin-top:25px}
.salon{grid-template-columns:1fr;gap:27px;padding:42px 0 51px}
.salon h2{font-size:22px}.salon-name{font-size:25px}.salon .booking{width:100%}
.footer{padding:23px 0 29px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}