:root{--primary:#1db954;--primary-light:#1ed760;--primary-bg:#1db95414;--primary-border:#1db95466;--text:#1f2328;--text-muted:#6a7280;--bg:#fff;--bg-alt:#f7f8fa;--border:#e1e4e8;--measure:960px;--measure-narrow:720px;--gap:16px}@media (prefers-color-scheme:dark){:root{--text:#e6e6e6;--text-muted:#9ba3af;--bg:#16181d;--bg-alt:#1e2127;--border:#2d3138}}*{box-sizing:border-box}html{scrollbar-gutter:stable}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}body{color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0;font-family:Hiragino Kaku Gothic ProN,Yu Gothic UI,Meiryo,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.7}.shell{flex-direction:column;min-height:100vh;display:flex}.inner{max-width:var(--measure);width:100%;margin:0 auto;padding-inline:20px}.skip-link{z-index:100;background:var(--bg);color:var(--primary);border:1px solid var(--primary);border-radius:0 0 6px;padding:10px 16px;position:absolute;top:0;left:-9999px}.skip-link:focus{left:0}:where(a,button,summary):focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px}.site-header{border-bottom:1px solid var(--border);background:var(--bg);z-index:10;position:sticky;top:0}.site-header .inner{flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:12px;display:flex}.site-header .brand{color:var(--primary);margin-right:auto;font-size:1.1em;font-weight:600;text-decoration:none}.header-nav{align-items:center;gap:16px;font-size:.92em;display:flex}.header-nav a{color:var(--text-muted);text-decoration:none}.header-nav a:hover{color:var(--text)}.header-nav .nav-app{color:var(--primary);border:1px solid var(--primary-border);border-radius:4px;padding:5px 12px}.header-nav .nav-app:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-bg)}.lang-switch{align-items:center;gap:6px;font-size:.85em;display:flex}.lang-switch a{color:var(--text-muted);border-radius:3px;padding:2px 6px;text-decoration:none}.lang-switch a:hover{color:var(--text);background:var(--bg-alt)}.lang-switch [aria-current=true]{color:var(--primary);font-weight:600}main{flex:1}.section{border-top:1px solid var(--border);padding-block:56px}.section:first-of-type{border-top:none}.section.alt{background:var(--bg-alt)}.section h2{letter-spacing:.01em;margin:0 0 8px;font-size:1.5em;line-height:1.4}.section .lead{color:var(--text-muted);max-width:var(--measure-narrow);margin:0 0 28px}.section>.inner>p:not(.lead){max-width:var(--measure-narrow)}.subheading{color:var(--text);margin:28px 0 0;font-size:1em}.section .grid,.section .steps{margin-top:24px}.hero{padding-block:72px 64px}.hero h1{letter-spacing:.01em;max-width:15ch;margin:0 0 20px;font-size:clamp(1.9em,5vw,2.6em);line-height:1.35}.hero .hero-lead{color:var(--text-muted);max-width:52ch;margin:0 0 32px;font-size:1.05em}.cta-row{flex-wrap:wrap;gap:12px;margin-bottom:20px;display:flex}.btn{border:1px solid #0000;border-radius:6px;padding:12px 24px;font-weight:600;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;display:inline-block}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-light)}.btn-secondary{border-color:var(--border);color:var(--text)}.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}.hero-points{color:var(--text-muted);flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;font-size:.88em;list-style:none;display:flex}.hero-points li:before{content:"・";margin-right:2px}.grid{gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.card{border:1px solid var(--border);background:var(--bg);border-radius:6px;padding:20px}.card h3{color:var(--primary);margin:0 0 8px;font-size:1.02em}.card p{color:var(--text-muted);margin:0;font-size:.93em}.audience{max-width:var(--measure-narrow);gap:8px;margin:24px 0 0;padding:0;list-style:none;display:grid}.audience li{color:var(--text-muted);padding-left:22px;position:relative}.audience li:before{content:"";border:2px solid var(--primary);border-radius:50%;width:8px;height:8px;position:absolute;top:.72em;left:4px}.mode-list{border:1px solid var(--border);background:var(--bg);border-radius:6px;gap:0;display:grid;overflow:hidden}.mode-row{border-top:1px solid var(--border);grid-template-columns:150px 1fr;gap:20px;padding:18px 20px;display:grid}.mode-row:first-child{border-top:none}.mode-name{color:var(--primary);font-weight:600}.mode-row p{color:var(--text-muted);margin:0;font-size:.94em}.steps{counter-reset:step;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0;padding:0;list-style:none;display:grid}.step{counter-increment:step;border:1px solid var(--border);background:var(--bg);border-radius:6px;padding:20px}.step h3{align-items:center;gap:10px;margin:0 0 8px;font-size:1em;display:flex}.step h3:before{content:counter(step);background:var(--primary-bg);border:1px solid var(--primary-border);width:24px;height:24px;color:var(--primary);border-radius:50%;flex:none;place-items:center;font-size:.8em;display:grid}.step p{color:var(--text-muted);margin:0;font-size:.93em}.step-note{color:var(--text-muted);margin-top:24px;font-size:.9em}.step-note a{color:var(--primary)}.privacy-notes{max-width:var(--measure-narrow);color:var(--text-muted);gap:10px;margin:20px 0 0;padding:0;font-size:.9em;list-style:none;display:grid}.privacy-notes li{padding-left:16px;position:relative}.privacy-notes li:before{content:"※";position:absolute;left:0}.site-footer{border-top:1px solid var(--border);color:var(--text-muted);padding-block:24px 32px;font-size:.85em}.site-footer .inner{flex-wrap:wrap;align-items:baseline;gap:16px 32px;display:flex}.footer-brand{flex-direction:column;gap:2px;margin-right:auto;display:flex}.footer-brand strong{color:var(--text)}.footer-links{flex-wrap:wrap;gap:16px;display:flex}.footer-links a{color:var(--text-muted)}.footer-links a:hover{color:var(--primary)}@media (width<=640px){.inner{padding-inline:16px}.section{padding-block:40px}.hero{padding-block:48px 40px}.hero h1{max-width:none}.mode-row{grid-template-columns:1fr;gap:4px}.cta-row .btn{text-align:center;flex:100%}.site-header .inner{gap:8px 10px}.site-header .brand{font-size:1em}.header-nav{font-size:.85em}.header-nav .nav-app{padding:5px 10px}.lang-switch{gap:2px;font-size:.78em}}