:root { --paper:#faf8f3; --ink:#282722; --forest:#172018; --green:#5a743d; --red:#b9382f; --line:#ddd8cf; --white:#fffdf7; --sans:"Hiragino Sans", "Yu Gothic", sans-serif; --serif:"Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--serif); font-size:16px; line-height:1.9; }
body.menu-open { overflow:hidden; }
img, video { display:block; max-width:100%; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { color:var(--red); text-decoration-thickness:2px; }
a:focus-visible, button:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nowrap { white-space:nowrap; }
.eyebrow { margin:0 0 16px; color:var(--green); font:600 11px/1.4 var(--sans); letter-spacing:.16em; }
h1,h2,p { margin-top:0; }
h2 { margin-bottom:20px; font-size:clamp(30px,4vw,44px); font-weight:400; line-height:1.45; letter-spacing:.04em; }
.accent-line { display:block; width:34px; height:2px; margin:0 0 30px; background:var(--red); }
.accent-line--green { background:var(--green); }

.site-header { position:fixed; z-index:50; top:0; right:0; left:0; display:flex; align-items:flex-start; justify-content:space-between; padding:16px 12px; pointer-events:none; }
.site-header > * { pointer-events:auto; }
.brand { color:var(--white); text-decoration:none; line-height:1; text-shadow:0 1px 10px rgb(0 0 0 / .25); }
.brand span { display:block; font-size:30px; letter-spacing:.12em; }
.brand small { display:block; margin-top:9px; font:600 10px/1 var(--sans); letter-spacing:.16em; }
.site-header:not(.site-header--light).is-scrolled .brand { margin:-8px -10px; padding:8px 10px; color:var(--forest); background:rgb(250 248 243 / .92); text-shadow:none; }
.menu-button { display:grid; width:56px; height:56px; padding:16px 14px; border:0; background:var(--white); cursor:pointer; gap:5px; }
.menu-button i { display:block; height:1px; background:var(--ink); transition:transform .24s ease, opacity .24s ease; }
.menu-button[aria-expanded="true"] i:first-of-type { transform:translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"] i:nth-of-type(2) { opacity:0; }
.menu-button[aria-expanded="true"] i:last-of-type { transform:translateY(-6px) rotate(-45deg); }
.site-menu { position:fixed; z-index:18; inset:0; display:grid; justify-items:end; visibility:hidden; background:rgb(23 32 24 / .2); opacity:0; transition:opacity .28s ease, visibility 0s linear .28s; }
.site-menu.is-open { visibility:visible; opacity:1; transition-delay:0s; }
.site-menu__panel { width:min(100%, 410px); min-height:100%; padding:130px 48px 60px; background:var(--white); transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.site-menu.is-open .site-menu__panel { transform:none; }
.site-menu__panel a { display:block; min-height:48px; padding:12px 0; border-bottom:1px solid var(--line); font-size:20px; text-decoration:none; }
.no-script-nav { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:12px 20px; padding:12px 24px; background:var(--white); font-family:var(--sans); }

.hero { position:relative; isolation:isolate; min-height:720px; height:100svh; max-height:960px; overflow:hidden; color:var(--white); background:var(--forest); }
.hero__fallback, [data-hero-fallback], .hero__media, .hero__slide { position:absolute; inset:0; }
.hero__fallback { z-index:-2; }
.hero__fallback img { width:100%; height:100%; object-fit:cover; object-position:50% 48%; }
.hero__media { z-index:-1; }
.hero__slide { opacity:0; transition:opacity 400ms cubic-bezier(.4,0,.2,1); }
.hero__slide.is-active { opacity:1; }
.hero__slide img, .hero__slide video { width:100%; height:100%; object-fit:cover; }
.hero__slide video { object-position:50% 48%; }
.hero__slide[data-hero-slide="curry"] img { object-position:52% 48%; }
.hero__slide[data-hero-slide="cats"] img { object-position:50% 54%; }
.hero__slide[data-hero-slide="curry"] img { transform:scale(1.06) translate3d(-1.5%,0,0); }
.hero__slide[data-hero-slide="cats"] img { transform:scale(1.06) translate3d(1.5%,0,0); }
.hero__slide[data-hero-slide="curry"].is-active img { animation:hero-photo-pan-left 1.5s cubic-bezier(.25,.46,.45,.94) both; }
.hero__slide[data-hero-slide="cats"].is-active img { animation:hero-photo-pan-right 1.5s cubic-bezier(.25,.46,.45,.94) both; }
@keyframes hero-photo-pan-left { from { transform:scale(1.06) translate3d(1.5%,0,0); } to { transform:scale(1.06) translate3d(-1.5%,0,0); } }
@keyframes hero-photo-pan-right { from { transform:scale(1.06) translate3d(-1.5%,0,0); } to { transform:scale(1.06) translate3d(1.5%,0,0); } }
.hero__video-fallback { display:none; object-position:50% 50%; }
.js .hero__fallback { opacity:0; transition:opacity 1200ms cubic-bezier(.4,0,.2,1); }
.hero.is-static .hero__fallback { z-index:1; opacity:1; }
.hero.is-static .hero__slide[data-hero-slide="journey"] video { display:none; }
.hero.is-static .hero__slide[data-hero-slide="journey"] .hero__video-fallback { display:block; }
.hero.is-interior-fallback .hero__slide[data-hero-slide="journey"] video { display:none; }
.hero.is-interior-fallback .hero__slide[data-hero-slide="journey"] .hero__video-fallback { display:block; }
html:not(.js) .hero__media { display:none; }
html:not(.js) .hero__fallback { z-index:-1; opacity:1; }
.hero::after { position:absolute; z-index:0; inset:0; content:""; pointer-events:none; background:linear-gradient(90deg, rgb(12 18 13 / .62), rgb(12 18 13 / .10) 55%, transparent); }
.hero__copy { position:absolute; z-index:1; top:25%; left:22px; width:58%; max-width:420px; }
.hero__copy p { margin-bottom:22px; font-size:18px; line-height:1.65; letter-spacing:.08em; }
.hero h1 { margin:0; font-size:clamp(38px,11vw,50px); font-weight:400; line-height:1.55; letter-spacing:.08em; white-space:nowrap; }
.hero__scroll { position:absolute; z-index:1; bottom:30px; left:22px; color:var(--white); font:600 10px/1 var(--sans); letter-spacing:.16em; text-decoration:none; }
.hero__scroll span { margin-left:8px; color:var(--red); }

.feature { background:var(--paper); }
#soup, #interior, #cats, #pets, #pet-rules, #access { scroll-margin-top:96px; }
.feature__copy { padding:64px 24px 72px; }
.feature__copy > p:last-of-type { max-width:32em; margin-bottom:30px; }
.feature__image { width:100%; margin:0; background:var(--white); }
.feature__image img { width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; object-position:50% 50%; }
.feature--interior .feature__image img { object-position:50% 50%; }
.feature--pets .feature__image img { object-position:52% 54%; }
.detail-image { display:none; height:auto; }
.text-link { display:inline-flex; min-height:44px; align-items:center; gap:10px; color:var(--red); font-family:var(--sans); text-decoration:none; border-bottom:1px solid currentColor; }
.cat-preview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding:0 24px 72px; background:var(--paper); }
.cat-preview img { width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; object-position:center; }
.cat-preview img:first-child { grid-column:1 / -1; width:min(78vw,336px); justify-self:center; aspect-ratio:4 / 3; }
.dogrun-image { width:min(100%,320px); height:auto; margin:36px 0 0; }

.rules { display:grid; gap:30px; padding:72px 24px; border-top:1px solid var(--line); background:var(--white); }
.rules h2 { margin:0; }
.rules ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.rules li { padding:16px 0 16px 24px; border-bottom:1px solid var(--line); position:relative; }
.rules li::before { position:absolute; left:2px; content:"—"; color:var(--red); }
.info-grid { display:grid; background:var(--paper); }
.instagram, .access { padding:64px 24px; }
.instagram { border-bottom:1px solid var(--line); }
.instagram h2, .access h2 { font-size:28px; }
.button { display:flex; align-items:center; justify-content:space-between; min-height:50px; max-width:340px; margin-top:14px; padding:10px 18px; border:1px solid var(--ink); font:14px/1.4 var(--sans); letter-spacing:.05em; text-decoration:none; }
.button--red { color:var(--red); border-color:var(--red); }
.map-wrap { overflow:hidden; height:240px; margin-top:24px; border:1px solid var(--line); background:#e8ede5; }
#access-map { width:100%; height:100%; }
.map-link { display:block; margin-top:12px; font:13px var(--sans); text-align:right; }
.map-attribution { margin:12px 0 0; font:11px/1.5 var(--sans); }
.leaflet-marker-icon { border-radius:50%; border:2px solid var(--white); box-shadow:0 1px 6px rgb(0 0 0 / .25); }
.visit-info { display:grid; gap:0; padding:0 24px; background:var(--white); border-top:1px solid var(--line); }
.visit-info div { display:grid; grid-template-columns:74px 1fr; gap:12px; padding:22px 0; border-bottom:1px solid var(--line); font-family:var(--sans); font-size:13px; line-height:1.7; }
.visit-info strong { color:var(--green); }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:32px 24px; color:var(--white); background:var(--forest); font:12px var(--sans); }
.site-footer p { margin:0; letter-spacing:.12em; }.site-footer p span { font-family:var(--serif); font-size:18px; }.site-footer a { color:var(--white); }

.site-header--light { position:relative; padding:22px 24px; background:var(--paper); }.site-header--light .brand { color:var(--forest); text-shadow:none; }.return-mini { min-height:44px; color:var(--ink); font:13px var(--sans); }
.gallery-hero { padding:88px 24px 60px; background:var(--paper); }.gallery-hero h1 { margin-bottom:20px; font-size:clamp(42px,10vw,72px); font-weight:400; line-height:1.45; }.gallery-hero > p:last-child { max-width:28em; }
.cat-gallery { display:grid; gap:28px; padding:0 24px 72px; }.cat-gallery figure { max-width:640px; margin:0 auto; }.cat-gallery img { width:100%; height:auto; max-height:600px; object-fit:contain; background:var(--white); }.cat-gallery figcaption { padding-top:8px; color:var(--green); font:12px var(--sans); letter-spacing:.12em; }.gallery-links { display:grid; gap:14px; padding:0 24px 72px; }.gallery-links .button { width:100%; max-width:none; }
.cat-gallery figure:nth-child(-n+4) { max-width:336px; }

@media (min-width: 768px) {
  .site-header { padding:24px; }.brand span { font-size:34px; }.menu-button { width:64px; height:64px; padding:19px 16px; }.hero__copy { left:48px; }.hero__scroll { left:48px; }
  .feature__copy { padding:80px 8vw; }.feature__image img { aspect-ratio:3 / 2; }.cat-preview { max-width:720px; margin:auto; padding:0 0 96px; }.rules { padding:88px 8vw; }.info-grid { grid-template-columns:1fr 1fr; }.instagram, .access { padding:80px 5vw; }.instagram { border-right:1px solid var(--line); border-bottom:0; }.visit-info { grid-template-columns:1fr 1fr 1fr; padding:0 5vw; }.visit-info div { grid-template-columns:1fr; padding:28px 20px; }.visit-info div + div { border-left:1px solid var(--line); }.gallery-hero { padding:120px 8vw 72px; }.cat-gallery { grid-template-columns:1fr 1fr; gap:48px 28px; padding:0 8vw 96px; }.gallery-links { grid-template-columns:1fr 1fr; padding:0 8vw 96px; }.gallery-links .button { max-width:420px; }
}

@media (min-width: 960px) {
  .site-header { padding:24px; }.menu-button { width:72px; height:72px; padding:22px 18px; }.site-menu__panel { padding-top:150px; }
  .hero { display:grid; grid-template-columns:minmax(42%,48%) 1fr; }.js .hero:not(.is-static) .hero__fallback { display:none; }.hero__media { grid-column:2; position:relative; inset:auto; width:min(52vw, calc(100svh * .5625), 720px); justify-self:start; background:var(--forest); }.hero__slide { position:absolute; }.hero::after { display:none; }.hero__copy { top:26%; left:clamp(40px,6vw,96px); width:auto; right:auto; }.hero__copy p { font-size:20px; }.hero h1 { font-size:clamp(52px,5vw,76px); }.hero__scroll { left:clamp(40px,6vw,96px); bottom:44px; }
  .feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:620px; max-width:1440px; margin:0 auto; }.feature__copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(56px,7vw,112px); }.feature__image { min-height:520px; }.feature__image img { height:100%; min-height:520px; aspect-ratio:auto; }.feature--soup .feature__copy { grid-column:1; grid-row:1; }.feature--soup .feature__image { grid-column:2; grid-row:1; }.feature--interior .feature__image { grid-column:1; }.feature--interior .feature__image img { aspect-ratio:4 / 5; }.feature--interior .feature__copy { grid-column:2; }.feature--pets .feature__image { grid-column:1; }.feature--pets .feature__copy { grid-column:2; }.detail-image { display:block; width:min(100%,280px); margin-top:22px; }.cat-preview { display:grid; align-content:center; grid-template-columns:220px 84px; justify-content:center; gap:12px; max-width:none; margin:0; padding:clamp(56px,7vw,112px); }.cat-preview img:first-child { grid-column:1; grid-row:1 / span 2; width:220px; height:300px; aspect-ratio:auto; }.cat-preview img:not(:first-child) { width:84px; height:144px; }.dogrun-image { width:min(100%,450px); }.rules { grid-template-columns:minmax(280px,1fr) minmax(0,1.4fr); gap:10vw; padding:110px max(8vw,calc((100vw - 1180px)/2)); }.info-grid { max-width:1180px; margin:0 auto; }.instagram, .access { padding:80px clamp(40px,5vw,72px); }.map-wrap { height:300px; }.visit-info { padding:0 max(8vw,calc((100vw - 1180px)/2)); }.gallery-hero { padding:150px max(8vw,calc((100vw - 1180px)/2)) 90px; }.cat-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px 32px; padding:0 max(8vw,calc((100vw - 1180px)/2)) 120px; }.cats-page .site-footer { padding-right:max(8vw,calc((100vw - 1180px)/2)); padding-left:max(8vw,calc((100vw - 1180px)/2)); }
}

@media (max-width: 360px) { .feature__copy, .rules, .instagram, .access, .visit-info, .gallery-hero, .cat-gallery, .gallery-links { padding-right:20px; padding-left:20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.hero__slide { transition:none; }.hero__slide[data-hero-slide="curry"] img, .hero__slide[data-hero-slide="cats"] img { animation:none; transform:none; }.hero__media { display:none; }.hero__fallback { display:block; opacity:1; } }