:root{
  --bg:#f7f5f0; --tint:#efebe2; --ink:#2b2b28; --sub:#6b675e; --line:#dcd6c9;
  --accent:#265434; --accent2:#8a6a3b; --line-green:#06c755;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.9;letter-spacing:.03em;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
.inner{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.center{text-align:center}

.site-header{position:sticky;top:0;z-index:10;background:rgba(247,245,240,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.logo{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:14px;white-space:nowrap}
.logo img{height:46px;width:auto}
.logo-ja{font-size:12px;color:var(--sub);letter-spacing:.14em;padding-left:14px;border-left:1px solid var(--line)}
.gnav{display:flex;gap:22px;font-size:14px}
.gnav a{color:var(--ink);text-decoration:none;white-space:nowrap}
.gnav a:hover{color:var(--accent2)}

.hero{position:relative;background:var(--bg);padding:14px 14px 0}
.hero-grid img{object-position:center}
.hero-grid .h1 img{object-position:70% 30%}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;height:min(76vh,660px);max-width:1440px;margin:0 auto}
.hero-grid figure{margin:0;overflow:hidden;position:relative}
.hero-grid img{width:100%;height:100%;object-fit:cover;filter:brightness(1.04) saturate(1.04)}
.hero-grid figure::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.04)}
.hero-grid .h1{grid-row:1 / span 2}
.hero-grid .h2{grid-column:2 / span 2}
.hero-panel{position:absolute;left:max(40px,calc((100vw - 1440px)/2 + 40px));bottom:32px;max-width:none;padding:22px 32px;background:rgba(255,253,248,.9);backdrop-filter:blur(3px);box-shadow:0 6px 24px rgba(0,0,0,.08);border-left:3px solid var(--accent)}
.hero-lead{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.3vw,30px);line-height:1.55;margin:0 0 12px;color:var(--accent)}
.hero-sub{margin:0;font-size:15px;color:var(--ink);line-height:1.85}
.hero-lead br{display:none}
@media(min-width:1001px){.hero-lead{white-space:nowrap;font-size:28px}}
@media(max-width:1000px){.hero-lead br{display:inline}}

.section{padding:96px 0}
.section-tint{background:var(--tint)}
.eyebrow{font-size:12px;letter-spacing:.24em;color:var(--accent2);margin:0 0 6px}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,32px);letter-spacing:.08em;margin:0 0 36px}
h3{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.05em;margin:0 0 10px}
.section-lead{color:var(--sub);margin:-16px 0 40px}
.note{font-size:13px;color:var(--sub)}

.brand{text-align:center}
.brand-name{font-size:clamp(26px,3.6vw,36px);color:var(--accent);margin-bottom:24px}
.brand p{text-align:left}
@media(min-width:700px){.brand p{text-align:center}}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.brand .btns,.btns.center{justify-content:center}
.btn{display:inline-block;padding:13px 26px;border-radius:2px;background:var(--accent);color:#fff;text-decoration:none;font-size:14px;letter-spacing:.08em;border:1px solid var(--accent);transition:opacity .2s}
.btn:hover{opacity:.85}
.btn-outline{background:transparent;color:var(--accent)}
.btn-line{background:var(--line-green);border-color:var(--line-green)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);padding:28px 24px}
.card .num{font-family:var(--serif);color:var(--accent2);font-size:14px;letter-spacing:.1em}
.card h3{margin-top:6px}
.card p{margin:0;font-size:14px;color:#4a4740;line-height:1.85}

.producer{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;padding:40px 0;border-top:1px solid var(--line)}
.producer:first-of-type{border-top:0;padding-top:0}
.producer-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.producer-photos figure{margin:0}
.producer-photos img{aspect-ratio:4/3;object-fit:cover;width:100%}
.producer-photos figcaption{font-size:12px;color:var(--sub);margin-top:4px}
.producer-body p{margin:0 0 16px}
.items{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.items li{font-size:13px;border:1px solid var(--line);background:#fff;padding:3px 12px;border-radius:999px}
.producer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;padding:40px 0 8px;border-top:1px solid var(--line)}
.producer-mini{background:#fff;border:1px solid var(--line);padding:26px 24px}
.producer-mini p{font-size:14px;margin:0 0 14px}

.timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.timeline li{position:relative;padding:0 0 44px 28px}
.timeline li::before{content:"";position:absolute;left:-5px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--accent2)}
.t-date{margin:0;font-size:13px;color:var(--accent2);letter-spacing:.08em}
.timeline p{margin:0 0 12px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0 8px}
.stats div{background:#fff;border:1px solid var(--line);padding:16px}
.stats dt{font-size:12px;color:var(--sub)}
.stats dd{margin:4px 0 0;font-family:var(--serif);font-size:28px;color:var(--accent)}
.stats dd span{font-size:14px;margin-left:2px}

.profile{width:100%;border-collapse:collapse;background:#fff}
.profile th,.profile td{border-bottom:1px solid var(--line);padding:18px 20px;text-align:left;vertical-align:top;font-size:15px}
.profile th{width:9em;font-weight:500;color:var(--sub);white-space:nowrap}
.plain{margin:0;padding-left:1.1em}
.plain li{margin-bottom:2px}

.mail{font-family:var(--serif);font-size:clamp(18px,3vw,24px);margin:20px 0 0}
.mail a{text-decoration:none}

.site-footer{background:var(--accent);color:#e8e5dc;padding:40px 0;font-size:13px}
.site-footer a{color:#e8e5dc}
.f-name{font-family:var(--serif);font-size:17px;letter-spacing:.1em;margin:0 0 8px}
.f-links{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 16px}
.copy{margin:0;opacity:.7}

@media(max-width:860px){
  .site-header .inner{flex-direction:column;align-items:flex-start;gap:0;padding-top:10px}
  .logo img{height:38px}
  .gnav{width:100%;overflow-x:auto;gap:14px;padding:6px 0 10px;font-size:12.5px;letter-spacing:0;scrollbar-width:none}
  .gnav::-webkit-scrollbar{display:none}
  html{scroll-padding-top:100px}
  .producer{grid-template-columns:1fr;gap:20px}
}
@media(max-width:560px){
  body{font-size:15px}
  .section{padding:64px 0}
  .inner{padding:0 18px}
  .hero{padding:10px 10px 0}
  .hero-grid{grid-template-columns:1fr 1fr;grid-template-rows:1.4fr 1fr;height:62vh;min-height:420px;gap:6px}
  .hero-grid .h1{grid-row:auto;grid-column:1 / span 2}
  .hero-grid .h2{grid-column:auto}
  .hero-grid .h4{display:none}
  .hero-lead br{display:inline}
  .hero-lead{font-size:24px}
  .hero-panel{position:relative;left:auto;bottom:auto;margin:-48px 14px 0;padding:22px 20px;max-width:none}
  .hero-sub{font-size:14px}
  .profile th,.profile td{display:block;width:100%;padding:10px 16px}
  .profile th{padding-bottom:0;border-bottom:0}
  .btn{width:100%;text-align:center}
}
@media(min-width:1000px){.cards{grid-template-columns:repeat(5,1fr)}}