:root{
  --bg:#ECEEEA; --surface:#F8F9F6; --ink:#23262B; --muted:#6B7078;
  --line:#C9CDC6; --ai:#2F3E5C; --kraft:#9C7F55; --onai:#F8F9F6;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16181C; --surface:#1E2126; --ink:#E7E8E4; --muted:#9A9FA6;
    --line:#33373E; --ai:#A9B8D8; --kraft:#C9A877; --onai:#16181C; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16181C; --surface:#1E2126; --ink:#E7E8E4; --muted:#9A9FA6;
  --line:#33373E; --ai:#A9B8D8; --kraft:#C9A877; --onai:#16181C; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  font-weight:400;line-height:1.8;letter-spacing:.02em}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
h1,h2,.mincho{font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ai);outline-offset:3px}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:14px 24px}
.logo{font-family:"Shippori Mincho B1",serif;font-size:1.2rem;font-weight:700;margin-right:auto;letter-spacing:.12em}
.nav{background:none;border:0;padding:4px 0;font-size:.9rem;color:var(--muted)}
.nav:hover{color:var(--ink)}
.cart-btn{background:none;border:1px solid var(--ink);padding:6px 16px;font-size:.9rem}
.cart-btn span{margin-left:6px;font-variant-numeric:tabular-nums}

.hero{max-width:1120px;margin:0 auto;padding:80px 24px 64px;display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:end;border-bottom:1px solid var(--line)}
.hero h1{writing-mode:vertical-rl;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.6;margin:0;letter-spacing:.18em;height:9.5em}
.hero p{margin:0;max-width:30em;color:var(--muted)}
.hero .meta{margin-top:24px;font-size:.85rem;color:var(--ink);border-top:1px solid var(--line);padding-top:12px;max-width:30em}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px 80px}
.tabs{display:flex;gap:28px;flex-wrap:wrap;margin:40px 0 32px}
.tab{border:0;background:none;padding:4px 0;color:var(--muted);border-bottom:1px solid transparent}
.tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:48px 28px}
.item{display:flex;flex-direction:column}
.pkg{aspect-ratio:4/5;display:flex;align-items:flex-end;padding:16px;font-family:"Shippori Mincho B1",serif;font-size:1.05rem;line-height:1.4}
.info{padding-top:14px;display:flex;flex-direction:column;gap:2px;flex:1}
.row{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.info h3{font-weight:500;font-size:.98rem;margin:0}
.price{font-variant-numeric:tabular-nums;white-space:nowrap}
.sub{font-size:.8rem;color:var(--muted)}
.sub .from{color:var(--kraft)}
.add{margin-top:12px;align-self:flex-start;border:0;border-bottom:1px solid var(--ink);background:none;padding:2px 0;font-size:.88rem}
.add:disabled{color:var(--muted);border-color:transparent;cursor:default}

section.req{margin-top:96px;display:grid;grid-template-columns:1fr 1.2fr;gap:56px;border-top:1px solid var(--line);padding-top:48px}
section.req h2{margin:0 0 16px;font-size:1.7rem;line-height:1.5}
section.req p{color:var(--muted);margin:0 0 12px;max-width:26em}
.terms{font-size:.85rem;border-top:1px solid var(--line);padding-top:12px;max-width:26em;color:var(--ink)}
.terms div{display:flex;justify-content:space-between;padding:4px 0}
.form{display:grid;gap:18px}
label{font-size:.85rem;display:grid;gap:6px;color:var(--muted)}
input,textarea{font:inherit;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);border-radius:0}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--ink)}
.primary{border:0;background:var(--ai);color:var(--onai);padding:12px 24px;justify-self:start}
.note{font-size:.8rem;color:var(--muted);margin:0}
.ok{border-left:2px solid var(--ai);padding:4px 0 4px 14px}

.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);
  z-index:20;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;
  padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px))}
.drawer.open{transform:none}
.shade{position:fixed;inset:0;background:rgba(20,22,26,.35);z-index:15;display:none}
.shade.open{display:block}
.drawer h2{margin:0 0 16px;font-size:1.2rem;display:flex;justify-content:space-between;align-items:center}
.close{border:0;background:none;font-size:.9rem;color:var(--muted)}
.lines{flex:1;overflow:auto}
.line{display:grid;grid-template-columns:1fr auto;gap:6px 8px;padding:14px 0;border-bottom:1px solid var(--line)}
.qty{display:flex;align-items:center;gap:12px;font-size:.9rem}
.qty button{width:26px;height:26px;border:1px solid var(--line);background:none}
.sum{padding-top:16px;display:grid;gap:6px;font-size:.92rem}
.sum div{display:flex;justify-content:space-between}
.sum .total{font-size:1.15rem;border-top:1px solid var(--ink);padding-top:10px;margin-top:4px}
.sum .primary{justify-self:stretch;margin-top:12px}
.empty{color:var(--muted);padding:24px 0}
footer{max-width:1120px;margin:0 auto;padding:24px;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line)}
@media (max-width:720px){
  .hero{grid-template-columns:1fr;padding-top:40px;gap:28px}
  .hero h1{writing-mode:horizontal-tb;height:auto;letter-spacing:.08em}
  section.req{grid-template-columns:1fr;gap:24px}
  .grid{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  .nav{display:none}
}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.pkg img{width:100%;height:100%;object-fit:cover;display:block}
.pkg.has-img{padding:0}
.err{color:#B3261E;font-size:.85rem;margin:8px 0 0}
.pay{font-size:.78rem;color:var(--muted);margin:6px 0 0}
footer a,.page a{color:inherit}
footer{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.page{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.page h1{font-size:1.8rem;margin:0 0 24px}
.page table{width:100%;border-collapse:collapse;font-size:.92rem}
.page th,.page td{text-align:left;vertical-align:top;padding:12px 8px;border-bottom:1px solid var(--line)}
.page th{width:34%;font-weight:500;color:var(--muted)}
.hidden{display:none}
.page h2{font-size:1.1rem;margin:36px 0 8px}
.page p{margin:0 0 12px}