:root { --ink:#14181d; --muted:#5d6772; --line:#dfe3e8; --accent:#8a5300; --accent-ink:#ffffff; --bg:#fbfbfa; --card:#ffffff; --hero:#263238; --hero-ink:#ffffff; --hero-muted:#c3ccd1; --star:#fbbc04; }
@media (prefers-color-scheme: dark) { :root { --ink:#e8ebee; --muted:#a3adb7; --line:#2d333a; --accent:#fdd663; --accent-ink:#1a1405; --bg:#121518; --card:#1a1e22; --hero:#1a2226; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.75 -apple-system,"Hiragino Sans","Noto Sans JP","Segoe UI",system-ui,sans-serif; }
a { color:var(--accent); }
.wrap { max-width:960px; margin:0 auto; padding:0 16px; }
header.hero { background:var(--hero); color:var(--hero-ink); padding:56px 0 0; overflow:hidden; }
.lang { display:flex; justify-content:flex-end; gap:6px; margin-bottom:24px; }
.lang a { font-size:13px; color:var(--hero-muted); text-decoration:none; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:2px 12px; }
.lang a[aria-current="page"] { color:var(--hero-ink); border-color:var(--hero-ink); }
.brand { display:flex; align-items:center; gap:12px; margin:0 0 14px; font-weight:700; font-size:18px; }
.brand img { width:40px; height:40px; }
h1 { font-size:clamp(28px,5vw,44px); line-height:1.25; margin:0; max-width:20em; }
.tagline { color:var(--hero-muted); font-size:clamp(17px,2.4vw,20px); margin:14px 0 26px; max-width:40em; }
.cta { display:inline-block; background:#ffffff; color:#263238; font-weight:700; text-decoration:none; padding:12px 22px; border-radius:10px; }
.cta:focus-visible { outline:3px solid var(--star); outline-offset:3px; }
.cta[aria-disabled="true"] { background:rgba(255,255,255,.14); color:var(--hero-ink); cursor:default; }
.note { color:var(--hero-muted); font-size:13px; margin:10px 0 36px; }
.shot img { display:block; width:100%; height:auto; border-radius:12px 12px 0 0; box-shadow:0 20px 60px rgba(0,0,0,.35); }
section { padding:48px 0 8px; }
h2 { font-size:22px; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
.swatches { display:flex; flex-wrap:wrap; gap:10px 18px; margin:4px 0 12px; padding:0; list-style:none; }
.swatches li { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; }
.swatches i { width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.2); flex:none; }
.why { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--star); border-radius:12px; padding:18px 20px; }
.why p { margin:0 0 8px; }
.why p:last-child { margin:0; }
ol, ul { padding-left:1.4em; margin:0; }
li { margin-bottom:6px; }
.muted { color:var(--muted); font-size:15px; }
footer { border-top:1px solid var(--line); margin-top:56px; padding:24px 0 48px; color:var(--muted); font-size:14px; }
footer a { margin-right:16px; }
.shot { display:block; }
h3 { font-size:17px; }
.steps li { margin-bottom:10px; }
details { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 20px; margin-bottom:10px; }
summary { font-weight:700; cursor:pointer; }
details p { color:var(--muted); margin:8px 0 0; }