:root { color-scheme: light; --paper:#f2eee4; --ink:#102638; --accent:#ef5b2a; --line:rgba(16,38,56,.28); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
main { width:min(1080px,calc(100% - 40px)); margin:auto; }
a { color:inherit; }
.masthead { display:flex; justify-content:space-between; padding:24px 0 18px; border-bottom:2px solid var(--ink); font:800 .76rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.masthead a { text-decoration:none; }
.hero { display:grid; grid-template-columns:1.45fr .55fr; gap:clamp(36px,8vw,100px); align-items:end; padding:70px 0 90px; }
.eyebrow { color:var(--accent); font:800 .76rem/1 ui-monospace,monospace; letter-spacing:.13em; }
h1 { margin:22px 0; font-size:clamp(3.2rem,8vw,7rem); line-height:.9; letter-spacing:-.065em; }
.lede { max-width:650px; font-size:1.12rem; line-height:1.9; }
.price-card { padding:24px; color:var(--paper); background:var(--ink); border-top:8px solid var(--accent); }
.price-card p,.price-card span { display:block; margin:0; }
.price-card strong { display:block; margin:18px 0 2px; font:800 clamp(3.5rem,7vw,5.6rem)/1 ui-monospace,monospace; }
.price-card small { font-size:.9rem; }
.price-card a { display:flex; justify-content:space-between; margin:26px -24px -24px; padding:20px 24px; color:var(--ink); background:var(--accent); font-weight:800; text-decoration:none; }
.product-preview { margin:0 0 90px; border:2px solid var(--ink); background:#eae4d8; }
.product-preview img { display:block; width:100%; height:auto; }
.product-preview figcaption { display:flex; justify-content:space-between; gap:20px; padding:14px 18px; border-top:2px solid var(--ink); font-size:.82rem; line-height:1.6; }
.product-preview figcaption span { color:var(--accent); font:800 .75rem/1.6 ui-monospace,monospace; letter-spacing:.1em; white-space:nowrap; }
.contents,.delivery,.order { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(32px,8vw,100px); padding:70px 0; border-top:2px solid var(--ink); }
h2 { margin:14px 0; font-size:clamp(2.2rem,5vw,4.4rem); line-height:.98; letter-spacing:-.045em; }
.contents > ol { list-style:none; margin:0; padding:0; }
.contents > ol > li { display:grid; grid-template-columns:48px 1fr; gap:18px; padding:24px 0; border-bottom:1px solid var(--line); }
.contents h3,.delivery h3 { margin:0 0 8px; font-size:1.25rem; }
.contents p,.delivery li,.order p,.legal dd { line-height:1.8; }
.delivery-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.delivery article { padding:24px; border:1px solid var(--line); }
.delivery ul,.delivery ol { padding-left:1.3rem; }
.notice { grid-column:2; margin:0; padding:18px; background:rgba(239,91,42,.1); }
.purchase-panel { padding:28px; color:var(--paper); background:var(--ink); }
.purchase-panel > p:first-child { margin-top:0; }
.purchase-panel strong { font-size:1.5rem; }
.purchase-button { display:flex; justify-content:space-between; margin-top:24px; padding:18px; color:var(--ink); background:var(--accent); font-weight:800; text-decoration:none; }
label { display:grid; gap:8px; margin-bottom:20px; font-weight:800; }
input,textarea { width:100%; border:1px solid rgba(242,238,228,.55); border-radius:0; padding:13px; color:var(--paper); background:transparent; font:inherit; }
textarea { resize:vertical; }
.agreement { grid-template-columns:auto 1fr; align-items:start; font-weight:400; line-height:1.6; }
.agreement input { width:20px; height:20px; margin:2px 0 0; accent-color:var(--accent); }
.form-trap { position:absolute; left:-10000px; }
button { width:100%; display:flex; justify-content:space-between; border:0; border-radius:0; padding:18px; color:var(--ink); background:var(--accent); font:inherit; font-weight:800; cursor:pointer; }
button:disabled { opacity:.65; cursor:wait; }
.charge-note { margin:10px 0 0; text-align:center; font-size:.8rem; }
.form-status { min-height:1.6em; margin:16px 0 0; color:#ffd08a; font-weight:800; }
.legal { padding:70px 0; border-top:2px solid var(--ink); }
.legal h2 { font-size:clamp(1.8rem,4vw,3rem); }
.legal dl { border-top:1px solid var(--line); }
.legal dl div { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:17px 0; border-bottom:1px solid var(--line); }
.legal dt { font-weight:800; }
.legal dd { margin:0; }
footer { display:flex; justify-content:space-between; padding:28px 0 42px; border-top:2px solid var(--ink); font:700 .72rem/1.6 ui-monospace,monospace; }
@media (max-width:720px) { main{width:calc(100% - 28px)} .masthead span{display:none} .hero,.contents,.delivery,.order{grid-template-columns:1fr} .product-preview figcaption{flex-direction:column;gap:4px} .notice{grid-column:1} .delivery-grid{grid-template-columns:1fr} .legal dl div{grid-template-columns:1fr;gap:4px} footer{gap:20px;align-items:flex-start;flex-direction:column} }