@charset "UTF-8";
:root{--paper:#f0ece4;--ink:#302b25;--muted:#777167;--line:#c8c1b6;--soft:#e6e0d6;--accent:#756d4c;color-scheme:light;--gutter:clamp(24px,4.2vw,80px)}
html[data-theme=night]{--paper:#211f1b;--ink:#eee7d8;--muted:#aaa396;--line:#4d483e;--soft:#2b2822;--accent:#c2b18a;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:130px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Klee One","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;transition:background-color .6s,color .6s;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:var(--ink);color:var(--paper)}.skip{position:fixed;left:20px;top:-100px;z-index:20;background:var(--ink);color:var(--paper);padding:15px}.skip:focus{top:15px}.header{position:absolute;top:0;width:100%;z-index:5;display:grid;grid-template-columns:230px 1fr auto auto;align-items:start;gap:32px;padding:32px var(--gutter)}.header>nav{grid-column:3;grid-row:1}.brand{display:flex;align-items:center;gap:18px;width:max-content}.brand-kanji{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:68px;line-height:.95;letter-spacing:-.1em}.brand-dot{font-family:Georgia,serif;margin-left:5px;font-size:45px}.brand-en{font-size:10px;line-height:1.5;letter-spacing:.16em;font-weight:600}nav{display:flex;gap:6px;padding-top:4px}.theme-switch{grid-column:4;grid-row:1;margin-top:6px;display:flex;gap:7px;align-items:center;border:0;background:none;padding:0;font-size:9px;letter-spacing:.08em}.theme-icon{font-size:14px}.switch-track{width:26px;height:14px;border:1px solid var(--line);border-radius:20px;padding:2px}.switch-track span{display:block;width:8px;height:8px;border-radius:50%;background:var(--ink);transition:transform .35s}html[data-theme=night] .switch-track span{transform:translateX(12px)}.hero{min-height:820px;height:100svh;max-height:1200px;padding:160px var(--gutter) 80px;position:relative;display:grid;grid-template-columns:46% 54%;align-items:center;overflow:hidden}.hero-copy{z-index:1;padding-bottom:30px}h1,h2,p{margin:0}h1{font-family:"Klee One","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;font-weight:500;font-size:clamp(38px,4.4vw,77px);line-height:1.65;letter-spacing:.08em;margin:34px 0 26px;white-space:nowrap}.period{letter-spacing:-.3em}.hero-description{font-size:12px;line-height:2.4;letter-spacing:.08em}.text-link{margin-top:34px;display:inline-flex;align-items:center;border-bottom:1px solid currentColor;padding:0 0 5px;font-size:13px;letter-spacing:.05em}.hero-art{position:relative;align-self:stretch;min-height:540px;margin-left:-30px}.hero-art canvas{width:100%;height:100%;display:block}.section{padding:110px var(--gutter);display:grid;grid-template-columns:25% 75%;border-top:1px solid var(--line)}h2{font-family:"Klee One","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;font-weight:500;font-size:clamp(28px,3.1vw,46px);line-height:1.7;letter-spacing:.09em}.about-bottom{margin-top:55px;padding-inline-start:25%}.about-bottom p{font-size:12px;line-height:2.5;letter-spacing:.06em}.about-bottom p+p{margin-top:24px}.section-heading{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:52px}.section-heading>p{font-size:14px;line-height:2.3;letter-spacing:.05em}.bean{border-top:1px solid var(--line)}.bean:last-child{border-bottom:1px solid var(--line)}
.bean summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 16px;
  padding: 27px 0;
  cursor: pointer;
}

.bean summary::-webkit-details-marker { display: none; }
.bean-name { font-size: 20px; letter-spacing: .06em; }
.bean-name small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .1em;
}
.bean-note { font-size: 14px; line-height: 1.6; }

.bean-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px 28px;
  padding: 4px 0 30px;
}
.bean-detail p { font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.9; }
.bean-detail dl { display: grid; align-content: start; gap: 10px; margin: 0; }
.bean-detail dl div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.bean-detail dt { font-size: .8125rem; letter-spacing: .06em; }
.bean-detail dd { margin: 0; font-size: 1rem; line-height: 1.65; }
.bean-detail dl div:first-child dd { font-size: 1.125rem; }

.bean-taste {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.bean-taste-scale {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 104px;
  color: var(--accent);
}
.bean-taste-scale::before {
  content: "";
  position: absolute;
  inset-inline: 4px;
  height: 1px;
  background: var(--line);
}
.bean-taste-scale > span {
  position: relative;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  background: var(--paper);
}
.bean-taste-scale > .is-current::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: currentColor;
  transform: scale(1.3);
}
.coffee .small-note { font-size: 11px; }
.small-note{font-size:9px;color:var(--muted);line-height:1.9;margin-top:20px}.menu{background:var(--soft)}.menu-row{display:flex;align-items:center;justify-content:space-between;padding:25px 0;border-top:1px solid var(--line)}.menu-row:last-child{border-bottom:1px solid var(--line)}.menu-row strong{font-size:14px;font-weight:400;letter-spacing:.06em}.menu-row small{display:block;font-size:8px;letter-spacing:.1em;color:var(--muted);margin-top:9px}.menu-row>span:last-child{font:27px Georgia,serif}.price-from{font-size:12px;margin-left:5px}.visit-content{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.visit-copy > p:not(.small-note) {
  margin-top: 25px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 2;
}

.shop-info { margin: 32px 0 0; }
.shop-info div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
  align-items: baseline;
}
.shop-info dt { font-size: 11px; letter-spacing: .08em; }
.shop-info dd { margin: 0; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6; }
.visit-copy > .small-note { font-size: 12px; }
.map-street{position:absolute;left:calc(26% + 29px);top:73%;font-size:8px;white-space:nowrap;transform-origin:left center;transform:rotate(-90deg);letter-spacing:.1em}.map-shop b{font-family:"Yu Mincho",serif;font-size:40px;font-weight:400}.map-shop small{font-size:6px;letter-spacing:.12em}.map-shop:after{content:"";width:7px;height:7px;background:var(--ink)}.map-turn{position:absolute;left:43%;top:calc(var(--alley-top) + var(--alley-height) + 14px);font-size:10px;letter-spacing:.06em}.map-north{position:absolute;top:20px;right:20px;font-size:10px}.map-caption{position:absolute;bottom:20px;right:20px;font-size:7px;line-height:1.8;letter-spacing:.08em}footer{padding:65px var(--gutter) 25px;background:var(--ink);color:var(--paper)}.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:55px}.footer-logo{font:70px/1 "Yu Mincho",serif;position:relative}.footer-logo span{font-family:Georgia,serif}.footer-logo small{display:block;font:8px Arial,sans-serif;letter-spacing:.15em;margin-top:16px}.footer-top>p{font-family:"Klee One","Yu Mincho",serif;font-size:23px;letter-spacing:.12em}.back-top{font-size:26px;width:50px;height:50px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center}.footer-bottom{border-top:1px solid;color:var(--paper);padding-top:20px;display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:.07em}

.section > :first-child { grid-column: 2; }
@media(min-width:1700px){.hero{grid-template-columns:45% 55%}.hero-art{margin-left:-80px}.hero-copy{padding-left:30px}}
@media(max-width:1000px){.header{grid-template-columns:190px 1fr auto;gap:16px}.header nav{grid-column:3;grid-row:1}.theme-switch{grid-column:3;grid-row:2;justify-self:end;margin-top:-8px}.hero{min-height:760px;padding-top:160px;grid-template-columns:47% 53%}.hero-art{margin-left:-40px;min-height:480px}h1{font-size:42px}.section{grid-template-columns:19% 81%;padding-block:80px}.section-heading{align-items:start;flex-direction:column;gap:20px}.visit-content{gap:30px}.bean-detail{grid-template-columns:1fr}}
@media(max-width:650px){html{scroll-padding-top:25px}.header{padding-top:24px;grid-template-columns:1fr auto;gap:14px}.brand-kanji{font-size:52px}.brand-dot{font-size:34px}.brand-en{font-size:8px;gap:12px}.header nav{grid-column:auto;grid-row:auto;position:fixed;left:50%;bottom:17px;transform:translateX(-50%);padding:7px;background:var(--paper);border:1px solid var(--line);box-shadow:0 5px 20px #0001;border-radius:4px;z-index:8;gap:5px}.header nav a{font-size:9px;padding:10px 18px}.theme-switch{grid-column:2;grid-row:2;margin-top:0;font-size:8px}.hero{display:flex;flex-direction:column;align-items:stretch;min-height:980px;height:auto;max-height:none;padding-top:170px;padding-bottom:80px}.hero-copy{padding:0}h1{font-size:clamp(32px,8.8vw,48px);line-height:1.6;letter-spacing:.06em;margin:24px 0 20px}.hero-description{font-size:11px;line-height:2.3}.text-link{margin-top:22px;font-size:12px}.hero-art{height:390px;min-height:390px;margin:-30px -10px 0 28px}.section{display:block;padding-block:60px}h2{font-size:28px;line-height:1.7}.about-bottom{padding-inline-start:0;margin-top:28px}.about-bottom p{font-size:11px;line-height:2.5}.section-heading{margin-bottom:30px}.small-note{font-size:8px}.menu-row>span:last-child{font-size:23px}.menu-row strong{font-size:12px}.visit-content{grid-template-columns:1fr;gap:32px}footer{padding-top:40px;padding-bottom:95px}.footer-top{padding-bottom:35px;gap:15px}.footer-logo{font-size:50px}.footer-logo small{font-size:6px}.footer-top>p{font-size:15px}.back-top{width:35px;height:35px;font-size:20px}.footer-bottom{font-size:6px;flex-wrap:wrap;line-height:1.8}.footer-bottom span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.text-link.dot-roll {
  --dot-roll-stroke: .65px;
  --dot-roll-dot-size: 1.45px;
  --dot-roll-dot-gap: .65px;
}

@media (min-width: 651px) and (max-height: 820px) {
  .hero { min-height: min(580px, 100svh); padding-top: clamp(110px, 18svh, 160px); }
  .hero-art { min-height: 0; }
}

@media (max-width: 650px) {
  .hero { min-height: 100svh; padding-top: clamp(128px, 18svh, 170px); padding-bottom: 118px; }
  .hero-art { height: clamp(220px, 34.5svh, 390px); min-height: 0; }
  html[data-theme="night"] .hero-art { margin-top: 8px; }
}

.hero-motion {
  position: absolute;
  right: 3%;
  bottom: 17px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
}
.hero-motion:hover, .hero-motion:focus-visible { color: var(--ink); }
.hero-motion:disabled { visibility: hidden; }
.hero-motion-icon {
  width: 8px;
  height: 10px;
  border-inline: 2px solid currentColor;
}
.hero-motion[aria-pressed="true"] .hero-motion-icon {
  width: 0;
  height: 0;
  border: 0;
  border-left: 8px solid currentColor;
  border-block: 5px solid transparent;
}
@media (max-width: 650px) {
  .hero-motion { right: 0; bottom: 0; }
  .bean summary {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 6px 12px;
    padding: 22px 0;
  }
  .bean-name { font-size: 18px; }
  .bean-note { grid-column: 1; grid-row: 2; font-size: 13px; }
  .bean-toggle { grid-column: 2; grid-row: 1 / 3; }
  .bean-detail { gap: 16px; }
  .bean-detail p br { display: none; }
}

nav a {
  padding: 8px 13px;
  border-radius: 2px;
  background-color: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
  font-size: 10px;
  letter-spacing: .04em;
}

.header nav a:focus-visible {
  background-color: var(--paper);
  color: var(--ink);
}

@media (any-hover: hover) {
  .header nav a:hover {
    background-color: var(--paper);
    color: var(--ink);
  }
}

.bean-toggle {
  position: relative;
  justify-self: center;
  width: 13px;
  height: 18px;
  border-radius: 56% 48% 52% 46% / 54% 44% 56% 46%;
  background-color: var(--accent);
  transform: rotate(32deg);
}

.bean-toggle::before {
  content: "";
  position: absolute;
  inset: 2px 3px 2px 5px;
  border-left: 1.5px solid var(--paper);
  border-radius: 55% 0 0 45%;
  transform: rotate(13deg);
}

.bean[open] .bean-toggle {
  background-color: var(--ink);
  transform: rotate(325deg);
}

@media (prefers-reduced-motion: no-preference) {
  .header nav a {
    transition: background-color 160ms ease, color 160ms ease;
  }

  .bean {
    --bean-slide-offset: clamp(1.25rem, 6vw, 3rem);
    --bean-slide: 540ms cubic-bezier(.22, 1, .36, 1);
  }

  .bean-toggle {
    transition: transform var(--bean-slide), background-color 200ms ease;
  }

  .bean[open] .bean-taste-scale > .is-current::after {
    animation: bean-taste-settle 700ms ease-in-out 180ms both;
  }

  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .bean::details-content {
      block-size: 0;
      interpolate-size: allow-keywords;
      overflow: clip;
      transition: block-size var(--bean-slide), content-visibility var(--bean-slide) allow-discrete;
    }

    .bean[open]::details-content { block-size: auto; }

    .bean .bean-detail {
      opacity: 0;
      transform: translateX(var(--bean-slide-offset));
      transition: transform var(--bean-slide), opacity var(--bean-slide);
    }

    .bean[open] .bean-detail {
      opacity: 1;
      transform: none;
    }
  }

  @supports not ((interpolate-size: allow-keywords) and selector(details::details-content)) {
    .bean-list {
      overflow: clip;
      overflow-clip-margin: 8px;
    }

    .bean[open] .bean-detail { animation: bean-slide-in var(--bean-slide); }
  }
}

@keyframes bean-slide-in {
  from { opacity: 0; transform: translateX(var(--bean-slide-offset)); }
  to { opacity: 1; transform: none; }
}

@keyframes bean-taste-settle {
  0% { transform: translateX(-18px) scale(1.3); }
  46% { transform: translateX(9px) scale(1.3); }
  74% { transform: translateX(-4px) scale(1.3); }
  100% { transform: translateX(0) scale(1.3); }
}

.about.section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas: "exterior copy interior";
  align-items: center;
  gap: clamp(22px, 3.2vw, 64px);
}

.about > .about-content { grid-area: copy; }
.about h2 { font-size: clamp(28px, 2.65vw, 46px); }
.about .about-bottom {
  margin-top: clamp(28px, 4vw, 55px);
  padding-inline-start: 0;
}

.about-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.about-photo--exterior {
  grid-area: exterior;
  translate: 0 -24px;
}

.about-photo--interior {
  grid-area: interior;
  translate: 0 24px;
}

.about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-photo[data-photo-reveal-state] img { opacity: 0; }

.photo-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--photo-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--photo-rows), minmax(0, 1fr));
  pointer-events: none;
}

.photo-mosaic > span {
  background-image: var(--photo-source);
  background-repeat: no-repeat;
  background-size: calc(var(--photo-columns) * 100%) calc(var(--photo-rows) * 100%);
}

@media (max-width: 1000px) {
  .about.section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "copy copy" "exterior interior";
    gap: clamp(12px, 3.2vw, 32px);
  }

  .about > .about-content { margin-bottom: 12px; }
  .about-photo { translate: none; }
}

.map-art {
  --road-left: 26%;
  --road-width: 44px;
  --alley-top: 36%;
  --alley-height: 18px;
  --route-start-x: calc(var(--road-left) + 13px);
  --route-start-y: 97%;
  --route-turn-y: calc(var(--alley-top) + var(--alley-height) / 2);
  --route-shop-x: 78%;
  --route-color: #476476;
  --route-duration: 3.8s;
  position: relative;
  min-height: 360px;
  align-self: stretch;
  overflow: hidden;
  background: var(--soft);
}

html[data-theme="night"] .map-art { --route-color: #a5c1ce; }

.map-main-road {
  position: absolute;
  inset-block: 0;
  left: var(--road-left);
  width: var(--road-width);
  border-inline: 1px solid var(--line);
  background: var(--paper);
}

.map-alley {
  position: absolute;
  top: var(--alley-top);
  left: calc(var(--road-left) + var(--road-width));
  right: calc(100% - var(--route-shop-x) - 14px);
  height: var(--alley-height);
  border-block: 1px solid var(--line);
  background: var(--paper);
}

.map-shop {
  position: absolute;
  left: var(--route-shop-x);
  top: var(--route-turn-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  translate: -50% calc(-100% + 3.5px);
  white-space: nowrap;
}

.map-station {
  position: absolute;
  top: var(--route-start-y);
  left: calc(var(--road-left) - 9px);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  translate: -100% -50%;
}

.map-station::after {
  content: "";
  position: absolute;
  left: 100%;
  width: 9px;
  border-top: 1px solid var(--line);
}

.map-station-icon {
  position: relative;
  width: 28px;
  height: 26px;
  border: 2px solid currentColor;
  background: var(--paper);
}

.map-station-icon::before,
.map-station-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.map-station-icon::before {
  top: 4px;
  left: 3px;
  width: 7px;
  height: 6px;
  box-shadow: 11px 0 currentColor;
}

.map-station-icon::after {
  bottom: 5px;
  left: 5px;
  width: 3px;
  height: 3px;
  box-shadow: 11px 0 currentColor;
}

.map-route {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-route > span {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--route-color);
  opacity: 0;
  translate: -50% -50%;
}

.map-route > span:nth-child(2) {
  --route-delay: .13s;
  --route-alpha: .64;
  width: 7px;
  height: 7px;
}

.map-route > span:nth-child(3) {
  --route-delay: .26s;
  --route-alpha: .38;
  width: 5px;
  height: 5px;
}

@media (max-width: 1000px) {
  .map-art { min-height: 340px; }
}

@media (max-width: 650px) {
  .map-art { min-height: 310px; }
}

@media (prefers-reduced-motion: no-preference) {
  .map-art[data-route-active] .map-route > span {
    animation: map-route-step var(--route-duration) steps(11, end) var(--route-delay, 0s) infinite;
  }

  .map-art[data-route-active] .map-shop::after {
    animation: map-route-arrival var(--route-duration) step-end infinite;
  }
}

@keyframes map-route-step {
  0% { left: var(--route-start-x); top: var(--route-start-y); opacity: 0; }
  6% { left: var(--route-start-x); top: var(--route-start-y); opacity: var(--route-alpha, 1); }
  46% { left: var(--route-start-x); top: var(--route-turn-y); opacity: var(--route-alpha, 1); }
  78%, 84% { left: var(--route-shop-x); top: var(--route-turn-y); opacity: var(--route-alpha, 1); }
  92%, 100% { left: var(--route-shop-x); top: var(--route-turn-y); opacity: 0; }
}

@keyframes map-route-arrival {
  0%, 94% { box-shadow: none; }
  79% { box-shadow: 0 0 0 3px var(--route-color); }
  86% { box-shadow: 0 0 0 1px var(--route-color); }
}