:root{
  --green:#2e8b3c; --green-d:#1f6a2b; --ink:#33292a; --sub:#6a5f5c;
  --paper:#ffffff; --sage:#eef3ea; --kraft:#e3c99a; --kraft-d:#b8945d; --wood:#5b3f2b;
  --maru:"Zen Maru Gothic",sans-serif; --kaku:"Zen Kaku Gothic New",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--kaku);font-size:16px;line-height:1.9;letter-spacing:.02em;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-d)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.nb{display:inline-block;max-width:100%}
a .nb{display:inline}
h1,h2,h3{font-family:var(--maru);font-weight:900;line-height:1.4;margin:0 0 .6em;letter-spacing:.04em}
h2{font-size:clamp(1.5rem,4.2vw,2.2rem)}
h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em}
figure{margin:0}
figcaption{font-size:.88rem;color:var(--sub);margin-top:.6em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px}
.center{text-align:center}
.sub{color:var(--sub)}
.note{font-size:.88rem;color:var(--sub)}
section{padding:clamp(56px,9vw,104px) 0}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid #e7e2dc}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--maru);font-weight:900;font-size:1.25rem;line-height:1.1}
.brand small{display:block;font-size:.68rem;font-weight:500;color:var(--sub);letter-spacing:.08em}
.top nav{display:flex;gap:18px;font-size:.92rem}
.top nav a{color:var(--ink);text-decoration:none;font-weight:500}
.top nav a:hover{color:var(--green)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;padding:0;background:var(--sage);min-height:min(88vh,860px)}
.hero-text{padding:clamp(40px,6vw,88px) clamp(20px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.hero .logo{width:min(230px,52vw);margin-bottom:28px}
.hero h1{font-size:clamp(2.3rem,6.4vw,4.4rem);color:var(--green-d);margin-bottom:.5em;letter-spacing:.06em}
.hero .lead{max-width:30em}
.facts{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{border:1.5px solid var(--green);color:var(--green-d);border-radius:999px;padding:2px 14px;font-size:.88rem;font-weight:700;background:#fff}
.hero-photo{position:relative;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}

/* about */
.about{text-align:left}
.about h2{color:var(--ink)}

/* inside + hanging tags */
.inside{background:var(--sage)}
.inside h2,.inside .sub{text-align:center}
.tags{list-style:none;margin:44px auto 56px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:40px 16px;max-width:900px;position:relative}
.tags li{position:relative;padding-top:26px;transform:rotate(var(--r));transform-origin:50% 0;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.tags li::before{content:"";position:absolute;top:0;left:50%;width:1.5px;height:30px;background:var(--wood);transform:translateX(-50%)}
.tags span{display:block;position:relative;background:var(--kraft);color:var(--wood);font-family:var(--maru);font-weight:700;font-size:1rem;padding:22px 18px 12px;min-width:104px;text-align:center;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px);box-shadow:inset 0 -3px 0 rgba(91,63,43,.12)}
.tags span::before{content:"";position:absolute;top:8px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 2px var(--kraft-d)}
.tags li:hover{transform:rotate(calc(var(--r) * -1))}
.shelf{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,48px);align-items:start}
.shelf img{border-radius:6px}
.shelf-side{display:grid;gap:32px}
.points h3{color:var(--green-d);margin-top:1.2em}
.points h3:first-child{margin-top:0}
.points h3::before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:.5em;background:var(--green);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);vertical-align:-.02em}

/* season */
.season{background:var(--ink);color:#f3eee9}
.season-in{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.season img{border-radius:6px}
.season h2{color:#fff}
.season .note{color:#cbbfb8}
.kicker{display:inline-block;background:var(--kraft);color:var(--wood);font-family:var(--maru);font-weight:700;font-size:.85rem;padding:2px 12px;border-radius:3px;margin-bottom:14px}

/* news */
.news h2,.news .sub{text-align:center}
.ig{list-style:none;padding:0;margin:32px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:760px}
.ig img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}

/* buttons */
.btn{display:inline-block;text-align:center;line-height:1.6;background:var(--green);color:#fff;text-decoration:none;font-weight:700;padding:13px 30px;border-radius:999px;min-height:52px}
.btn:hover{background:var(--green-d)}
.btn.line{background:#06c755}
.btn.line:hover{background:#05a647}

/* access */
.access{background:var(--sage)}
.access-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);align-items:start}
.hours{width:100%;border-collapse:collapse;margin-bottom:12px;background:#fff;border-radius:6px;overflow:hidden}
.hours th,.hours td{padding:10px 16px;border-bottom:1px solid #e6ece2;text-align:left;font-weight:500}
.hours th{width:8.5em;white-space:nowrap;font-family:var(--maru)}
.hours tr.off td{color:#b0413e;font-weight:700}
.hours tr.today{background:#fff6dc}
.hours tr.today th::after{content:"今日";margin-left:.5em;font-size:.72rem;background:var(--green);color:#fff;padding:1px 7px;border-radius:999px;vertical-align:.1em}
.addr{display:grid;grid-template-columns:5em 1fr;gap:6px 12px;margin:22px 0 0}
.addr dt{font-weight:700;color:var(--green-d)}
.addr dd{margin:0}
.map{border-radius:6px;overflow:hidden;background:#dfe6da;aspect-ratio:4/3.4}
.map iframe{width:100%;height:100%;border:0;display:block}

/* contact */
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:24px 0}
.btn.big{font-size:1.1rem}
.sns a{margin:0 12px;font-weight:700}

footer{background:#fff;border-top:1px solid #e7e2dc;text-align:center;padding:40px 20px 32px;font-size:.9rem}
footer img{width:150px;margin:0 auto 14px}
footer small{color:var(--sub)}
footer .sample{margin-top:14px;font-size:.78rem;color:var(--sub)}

@media (max-width:820px){
  .top nav{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:-1;aspect-ratio:1/1;max-height:72vh}
  .hero-text{padding:28px 20px 44px}
  .hero .logo{display:none}
  .shelf,.access-in,.season-in{grid-template-columns:1fr}
  .season figure{max-width:260px}
  .tags{gap:34px 10px}
  .tags span{min-width:0;padding:20px 14px 10px;font-size:.94rem}
}
@media (max-width:420px){
  .ig{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tags li{transition:none}
}