:root{
  --bg:#ffffff; --surface:#f6f5f2; --ink:#1a1a1a; --muted:#5f5c56;
  --line:#e2ded6; --accent:#8a6d3b; --accent-ink:#6b5430; --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;
  line-height:1.9; font-size:16px; letter-spacing:.02em;
}
a{color:var(--accent-ink)}
img{max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

header.site{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:10}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; flex-wrap:wrap}
.brand{font-size:1.05rem; font-weight:700; letter-spacing:.14em; text-decoration:none; color:var(--ink); white-space:nowrap}
.brand small{display:block; font-size:.62rem; letter-spacing:.22em; color:var(--muted); font-weight:400; margin-top:2px}
nav.site ul{list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap}
nav.site a{text-decoration:none; color:var(--muted); font-size:.9rem}
nav.site a:hover,nav.site a[aria-current=page]{color:var(--ink)}

.hero{background:var(--surface); border-bottom:1px solid var(--line)}
.hero .wrap{padding-top:76px; padding-bottom:76px}
.hero h1{font-size:1.9rem; line-height:1.6; margin:0 0 18px; font-weight:700; letter-spacing:.06em}
.hero p{margin:0; max-width:44em; color:var(--muted)}

main .wrap{padding-top:64px; padding-bottom:72px}
h2{font-size:1.32rem; letter-spacing:.08em; margin:0 0 8px; font-weight:700}
h2 + .lead{color:var(--muted); margin:0 0 34px}
h3{font-size:1.02rem; letter-spacing:.05em; margin:0 0 8px}
section + section{margin-top:64px; padding-top:56px; border-top:1px solid var(--line)}

.cards{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin:0; padding:0; list-style:none}
.card{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:26px}
.card p{margin:0; color:var(--muted); font-size:.94rem}

table.spec{width:100%; border-collapse:collapse; font-size:.95rem}
table.spec th,table.spec td{text-align:left; vertical-align:top; padding:16px 8px; border-bottom:1px solid var(--line)}
table.spec th{width:11em; font-weight:700; color:var(--muted); white-space:nowrap}
.scroll{overflow-x:auto}

dl.policy dt{font-weight:700; margin-top:26px}
dl.policy dd{margin:6px 0 0; color:var(--muted)}
ol.policy,ul.policy{color:var(--muted); padding-left:1.3em}

footer.site{border-top:1px solid var(--line); background:var(--surface)}
footer.site .wrap{padding:40px 24px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.85rem; color:var(--muted)}
footer.site a{color:var(--muted)}

@media (max-width:640px){
  .hero .wrap{padding-top:52px; padding-bottom:52px}
  .hero h1{font-size:1.45rem}
  header.site .wrap{min-height:auto; padding-top:14px; padding-bottom:14px}
  table.spec th{width:auto; display:block; border-bottom:none; padding-bottom:0}
  table.spec td{display:block; padding-top:4px}
}