
:root{
  --bg:#f7f2ea;--paper:#fffdf9;--ink:#201c1a;--muted:#6f675f;--line:#ded4c8;
  --purple:#65439b;--deep:#392657;--accent:#9b7bbd;--sand:#e8ddcf;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;line-height:1.9}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 42px));margin:auto}
.header{position:sticky;top:0;z-index:50;background:rgba(255,253,249,.95);backdrop-filter:blur(8px);border-bottom:1px solid rgba(120,100,80,.12)}
.header-inner{height:82px;display:flex;align-items:center;gap:28px}
.brandmark{display:flex;align-items:center;gap:13px;min-width:320px}
.brandmark img{width:48px;height:48px;object-fit:contain}
.brandmark .label{font-size:19px;font-weight:700;letter-spacing:.04em;line-height:1.3}
.brandmark .sub{font-size:11px;color:var(--muted);letter-spacing:.12em}
.nav{margin-left:auto;display:flex;gap:25px;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.nav a:hover{color:var(--purple)}
.menu-btn{display:none;margin-left:auto;border:0;background:transparent;font-size:28px}
.hero{min-height:590px;display:grid;grid-template-columns:42% 58%;background:var(--bg)}
.hero-copy{padding:92px max(40px,calc((100vw - var(--max))/2));padding-right:58px;display:flex;flex-direction:column;justify-content:center}
.hero-copy h1{font-size:clamp(42px,5vw,72px);line-height:1.35;font-weight:500;margin:0 0 24px;letter-spacing:.08em}
.hero-copy p{font-size:16px;margin:0 0 24px}
.hero-media{min-height:590px}
.hero-media img{width:100%;height:100%;object-fit:cover}
.kicker{font-size:12px;letter-spacing:.18em;color:var(--purple);font-family:-apple-system,BlinkMacSystemFont,"Yu Gothic",sans-serif;text-transform:uppercase}
.section{padding:92px 0}
.section.soft{background:var(--bg)}
.section-title{font-size:32px;margin:0 0 16px;font-weight:500;letter-spacing:.08em}
.section-lead{color:var(--muted);max-width:680px;margin:0 0 42px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);overflow:hidden}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-body{padding:22px}
.card h3{margin:0 0 10px;font-size:21px;font-weight:500}
.card p{font-size:13px;color:var(--muted);margin:0}
.btn{display:inline-block;border:1px solid var(--purple);color:var(--deep);padding:10px 22px;font-family:-apple-system,BlinkMacSystemFont,"Yu Gothic",sans-serif;font-size:13px;letter-spacing:.04em}
.btn:hover{background:var(--purple);color:white}
.brand-split{display:grid;grid-template-columns:1fr 1fr}
.brand-panel{min-height:430px;position:relative;overflow:hidden}
.brand-panel img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.brand-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,253,249,.98) 0%,rgba(255,253,249,.88) 44%,rgba(255,253,249,.15) 72%)}
.brand-content{position:relative;z-index:2;padding:62px;max-width:55%}
.brand-content .logo{height:92px;width:auto;object-fit:contain;object-position:left center;margin-bottom:20px}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.process-item img{aspect-ratio:1.18/1;object-fit:cover;width:100%}
.process-item strong{display:block;margin-top:10px;font-size:14px}
.company-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.company{padding:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.company-logo{height:78px;width:auto;margin-bottom:16px;object-fit:contain;object-position:left}
.footer{background:#f0e9e0;padding:45px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.footer h4{margin:0 0 12px}
.footer p,.footer a{font-size:13px;color:#4f4842}
.footer .copyright{margin-top:32px;border-top:1px solid #d8ccc0;padding-top:18px;font-size:11px;color:#786e65}
.page-brand-header{padding:38px 0;background:white;border-bottom:1px solid var(--line)}
.page-brand-header .inner{display:flex;align-items:center;gap:30px}
.page-brand-header .site-logo{height:95px;width:auto;object-fit:contain}
.page-brand-header .subnav{margin-left:auto;display:flex;gap:20px;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,"Yu Gothic",sans-serif}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product-card{background:#fff}
.product-card img{aspect-ratio:1/1;object-fit:cover;width:100%}
.product-card h3{font-size:20px;margin:14px 0 4px}
.product-card p{font-size:12px;color:var(--muted);margin:0}
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--bg)}
.feature.reverse{direction:rtl}.feature.reverse>*{direction:ltr}
.feature img{width:100%;height:100%;min-height:440px;object-fit:cover}
.feature-copy{padding:70px}
.instagram-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.instagram-strip img{aspect-ratio:1/1;object-fit:cover;width:100%}
.seasonal{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.seasonal-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seasonal-cards img{aspect-ratio:4/3;object-fit:cover;width:100%}
.notice{font-size:12px;color:#756b62}
@media (max-width:900px){
  .header-inner{height:68px}.brandmark{min-width:0}.brandmark .label{font-size:15px}.brandmark img{width:38px;height:38px}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;background:white;padding:18px 24px;flex-direction:column;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}.menu-btn{display:block}
  .hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:64px 24px}.hero-media{min-height:340px}
  .grid-2,.grid-3,.grid-4,.brand-split,.company-grid,.footer-grid,.feature,.seasonal{grid-template-columns:1fr}
  .brand-panel{min-height:480px}.brand-content{max-width:70%;padding:42px 28px}
  .process{grid-template-columns:1fr 1fr}.product-grid{grid-template-columns:1fr 1fr}
  .page-brand-header .subnav{display:none}.feature img{min-height:320px}.feature-copy{padding:44px 24px}
  .instagram-strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .section{padding:64px 0}.container{width:min(100% - 28px,var(--max))}
  .brandmark .sub{display:none}.hero-copy h1{font-size:40px}
  .product-grid,.process,.seasonal-cards{grid-template-columns:1fr 1fr}
  .brand-content{max-width:82%}.instagram-strip{grid-template-columns:repeat(2,1fr)}
}

.online-shop{display:grid;grid-template-columns:1.12fr .88fr;background:#f2eaf8;align-items:stretch}
.online-shop-media img{width:100%;height:100%;min-height:430px;object-fit:cover}
.online-shop-copy{padding:72px;display:flex;flex-direction:column;justify-content:center}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn-solid{background:var(--purple);color:#fff}
.btn-solid:hover{background:var(--deep)}
@media (max-width:900px){
  .online-shop{grid-template-columns:1fr}
  .online-shop-media img{min-height:300px}
  .online-shop-copy{padding:44px 24px}
}
