:root{color-scheme:light;--ink:#1b1917;--paper:#f8f6f0;--white:#fffdf8;--muted:#625b50;--gold:#775b32;--rule:#ded7ca;--serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;--sans:"Hiragino Sans","Yu Gothic","Meiryo","Noto Sans CJK JP",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.85}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #bd8b44;outline-offset:5px}
.shell{width:min(1180px,calc(100% - 112px));margin-inline:auto}
.skip{position:fixed;top:8px;left:8px;padding:8px 16px;z-index:5;background:white;transform:translateY(-160%)}
.skip:focus{transform:translateY(0)}
.header{position:relative;z-index:2;background:#171614;color:#fff}
.home .header{position:absolute;inset:0 0 auto;background:linear-gradient(#000d,#0008 50%,transparent)}
.header-row,.footer-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-row{min-height:95px}
.brand{display:inline-flex;flex:none;align-items:center;width:214px}
.brand img{display:block;width:100%;height:auto;filter:invert(1)}
nav{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
nav a{font-size:.84rem;letter-spacing:.08em;padding-block:8px;white-space:nowrap;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current]{border-color:#be9e6a}
.hero{position:relative;isolation:isolate;display:flex;align-items:end;min-height:100vh;min-height:100svh;background:#1e1510;color:white}
.hero-image,.hero::after{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-image{object-fit:cover;object-position:center;}
.hero{overflow:hidden}
.hero::after{content:"";background:linear-gradient(0deg,#0b0908ed,transparent 60%),linear-gradient(90deg,#100b0755,transparent 65%)}
.hero-bottom{padding:145px 0 55px;display:flex;justify-content:space-between;align-items:end;gap:24px}
.eyebrow{margin:0 0 14px;font-size:.74rem;font-weight:700;letter-spacing:.18em;color:var(--gold)}
.hero .eyebrow{color:#f1d4a6}
h1,h2,h3,p{margin-top:0}
h1,h2,.profile h3{font-family:var(--serif);font-weight:600}
h1{font-size:clamp(2.3rem,6vw,5.8rem);letter-spacing:.075em;line-height:1.27;margin-bottom:18px}
.hero-lead{font-size:clamp(.94rem,1.6vw,1.18rem);letter-spacing:.09em;margin-bottom:22px}
.hero-link,.text-link{display:inline-flex;gap:22px;align-items:center;font-size:.85rem;border-bottom:1px solid currentColor;padding-bottom:4px}
h2{font-size:clamp(1.55rem,3.15vw,2.65rem);line-height:1.55;letter-spacing:.06em;margin-bottom:14px}
.introduction{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding-block:105px}
.intro-copy{padding-top:29px;color:var(--muted)}
.text-link{color:var(--ink)}
.service-band{background:#eee9df;border-block:1px solid var(--rule)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding-block:40px}
.service-grid div{border-top:1px solid #beae95;padding-top:15px}
.service-grid small{color:var(--gold);letter-spacing:.15em}
.service-grid h3{margin:9px 0 5px;font-size:1rem}
.service-grid p{margin:0;font-size:.87rem;color:var(--muted)}
.callout{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-block:50px}
.callout h2{margin:0}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid #2c261f;background:#2c261f;color:white;padding:12px 22px;white-space:nowrap;font-size:.9rem}
.button:hover{background:#4a3825}
footer{padding:32px 0;background:#171614;color:#fff}
footer .brand{width:155px}
footer p{margin:7px 0 0;color:#d1c9bc;font-size:.77rem}
.page-banner{background:linear-gradient(115deg,#232938,#39465f);color:white;padding-block:70px 64px}
.page-banner h1{font-size:clamp(2rem,5vw,4.1rem)}
.page-banner p:last-child{margin:0;color:#eee5d9}
.page-banner .eyebrow{color:#edcf9f}
.about-content{max-width:920px;padding-top:30px}
.about-section{padding:40px 0;border-bottom:1px solid var(--rule)}
.about-section h2{font-size:clamp(1.45rem,3vw,2.15rem)}
.profile{display:grid;grid-template-columns:minmax(150px,240px) 1fr;align-items:center;gap:clamp(20px,5vw,58px)}
.profile h3{font-size:1.85rem;margin-bottom:9px}
.profile p:last-child{max-width:31em;color:var(--muted)}
.portrait{background:#ede7da;aspect-ratio:5/4;display:grid;place-items:center;color:#715d42;font-family:var(--serif);letter-spacing:.22em;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.facts{margin:0}
.facts div{display:grid;grid-template-columns:155px 1fr;gap:16px;border-top:1px solid var(--rule);padding:14px 0}
.facts dt{font-weight:700}
.facts dd{margin:0;color:var(--muted)}
.contact-layout{padding-block:65px;display:grid;grid-template-columns:1fr 1.8fr;gap:7%}
.contact-layout aside p{color:var(--muted)}
form{background:var(--white);padding:clamp(20px,4vw,48px);border:1px solid var(--rule)}
form label{display:block;font-weight:700;font-size:.9rem;margin-bottom:18px}
input,select,textarea{display:block;width:100%;color:var(--ink);background:#fff;border:1px solid #bcb2a4;padding:9px 11px;margin-top:7px;border-radius:0;font-size:1rem}
textarea{resize:vertical}
.required{margin-left:7px;background:#f4e8db;color:#6e4228;padding:1px 5px;font-size:.7rem}
.fine{font-size:.8rem;color:var(--muted)}
@media(max-width:740px){
.shell{width:calc(100% - 40px)}
.header-row{flex-direction:column;justify-content:center;gap:5px;min-height:108px;padding-block:13px}
.brand{width:174px}
nav{gap:20px}
nav a{font-size:.75rem;letter-spacing:.03em}
.hero-bottom{flex-wrap:wrap;padding-bottom:30px}
.hero-image{object-position:54% center}
.introduction,.service-grid,.contact-layout{grid-template-columns:1fr;gap:20px}
.introduction{padding-block:55px}
.intro-copy{padding:0}
.callout,.footer-row{align-items:flex-start;flex-direction:column}
.page-banner{padding-block:41px}
.contact-layout{padding-block:40px}
.profile{grid-template-columns:1fr}
.portrait{max-width:240px}
.facts div{grid-template-columns:90px 1fr;gap:10px;font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){.hero-image{transition:none}}
.registry{text-decoration:underline;text-underline-offset:3px}
.hero h1{font-size:clamp(2.3rem,5.1vw,4.8rem);font-weight:500}
@media(max-width:360px){nav{gap:12px}.hero-bottom{padding-top:125px}.hero h1{letter-spacing:.015em}}
.portrait{aspect-ratio:1145/1374}

.sapporo > p{max-width:42em;color:var(--muted)}
.sapporo-photos{display:grid;grid-template-columns:1.45fr 1fr;gap:18px;margin-top:24px}
.sapporo-photos figure{margin:0}
.sapporo-photos img{display:block;width:100%;height:clamp(180px,27vw,300px);object-fit:cover}
.sapporo-photos figcaption{margin-top:7px;color:var(--muted);font-size:.8rem}
@media(max-width:640px){
  .sapporo-photos{grid-template-columns:1fr}
  .sapporo-photos img{height:auto}
}