:root { --brand:#087563; --dark:#075b4e; --lime:#b9f26b; --ink:#15362f; --muted:#65756f; --paper:#f3f9f6; --line:#d8e8e2; --yellow:#fff2a6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Yu Gothic",Meiryo,sans-serif; }
a { color:var(--brand); }
.guide-header { align-items:center; background:#fff; border-bottom:1px solid var(--line); display:flex; font-size:12px; font-weight:800; gap:12px; justify-content:space-between; padding:10px max(16px,calc((100vw - 880px)/2)); position:sticky; top:0; z-index:10; }
.guide-brand { flex:0 0 auto; }
.guide-logo { display:block; width:140px; height:auto; }
/* 「← ひとつ前の画面に戻る」（店舗管理から来たときだけ出る。2026-10-15）が加わると3つ並ぶので、狭い幅では折り返す。 */
.guide-meta { align-items:center; display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:flex-end; min-width:0; }
.guide-header span { color:var(--muted); }
main { margin:0 auto; max-width:880px; padding:24px 16px 70px; }
.hero { background:linear-gradient(135deg,var(--dark),var(--brand)); border-radius:24px; color:#fff; overflow:hidden; padding:42px; position:relative; }
.hero::after { background:var(--lime); border-radius:50%; content:""; height:180px; opacity:.24; position:absolute; right:-45px; top:-60px; width:180px; }
.eyebrow { color:var(--lime); font-size:11px; font-weight:900; letter-spacing:.15em; margin:0; }
.hero h1 { font-size:clamp(30px,6vw,50px); line-height:1.18; margin:10px 0; }
.hero>p:not(.eyebrow) { line-height:1.8; max-width:620px; }
.hero nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; position:relative; z-index:1; }
.hero nav a { background:#fff; border-radius:999px; color:var(--dark); font-size:12px; font-weight:900; padding:9px 12px; text-decoration:none; }
.security { background:#fff4f4; border:1px solid #e6bcbc; border-radius:14px; color:#852e2e; margin:18px 0; padding:16px 18px; }
.security p { font-size:12px; line-height:1.75; margin:5px 0 0; }
.guide-section { background:#fff; border:1px solid var(--line); border-radius:20px; margin:18px 0; padding:26px; scroll-margin-top:70px; }
.section-title { align-items:center; display:flex; gap:13px; }
.section-title>span { align-items:center; background:var(--brand); border-radius:50%; color:#fff; display:flex; flex:0 0 44px; font-weight:900; height:44px; justify-content:center; }
.section-title p { color:var(--brand); font-size:11px; font-weight:900; margin:0; }
.section-title h2 { font-size:25px; margin:2px 0 0; }
ol { counter-reset:steps; display:grid; gap:10px; grid-template-columns:minmax(0,1fr); list-style:none; padding:0; }
ol li { background:#f5faf8; border-radius:12px; display:grid; gap:4px; grid-template-columns:minmax(0,1fr); padding:14px 14px 14px 48px; position:relative; }
ol li::before { align-items:center; background:var(--lime); border-radius:50%; color:var(--dark); content:counter(steps); counter-increment:steps; display:flex; font-size:12px; font-weight:900; height:26px; justify-content:center; left:13px; position:absolute; top:13px; width:26px; }
ol strong { font-size:14px; }
ol span { color:var(--muted); font-size:12px; line-height:1.7; }
ol code { overflow-wrap:anywhere; }
.tip { background:var(--yellow); border-radius:10px; color:#574d08; font-size:13px; line-height:1.75; padding:13px 15px; }
.difference { align-items:center; display:grid; gap:10px; grid-template-columns:1fr auto 1fr; margin:18px 0; text-align:center; }
.difference div { background:#eaf6f2; border-radius:12px; display:grid; gap:5px; padding:14px; }
.difference span { color:var(--muted); font-size:11px; line-height:1.5; }
.difference b { color:var(--brand); }
.link-row { display:flex; flex-wrap:wrap; gap:10px; }
.official { border:1px solid var(--brand); border-radius:8px; display:inline-block; font-size:12px; font-weight:900; padding:10px 13px; text-decoration:none; }
details { border-top:1px solid var(--line); padding:14px 0; }
details summary { cursor:pointer; font-weight:900; }
details p { color:var(--muted); font-size:13px; line-height:1.8; }
.support { background:#e9f5f1; border-radius:12px; margin-top:14px; padding:15px; }
.support p { color:var(--muted); font-size:12px; line-height:1.7; margin-bottom:0; }
footer { align-items:center; background:var(--dark); color:#fff; display:flex; font-size:12px; justify-content:space-between; padding:22px max(16px,calc((100vw - 880px)/2)); }
footer a { color:var(--lime); font-weight:900; }
@media(max-width:600px){ .hero { border-radius:18px; padding:28px 20px; } .guide-section { border-radius:16px; padding:20px 16px; } .difference { grid-template-columns:1fr; } .guide-header span { display:none; } .guide-logo { width:116px; } footer { align-items:flex-start; display:grid; gap:8px; } }
@media(prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }