:root{
    --line:#2a2f36; /* 罫線 */
    --brand:#cbb889; /* 控えめな金 */
    --brand-ink:#9f8d61;
    --container:1120px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{
    margin:0; font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
    color:var(--fg); background:var(--bg);
    }
    img,video{max-width:100%; display:block}
    .container{width:100%; max-width:var(--container); margin:0 auto; padding:0 20px}
    .container.narrow{max-width:760px}
    
    
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.1rem; border-radius:14px; border:1px solid var(--line); text-decoration:none; color:var(--fg); background:transparent}
    .btn:hover{border-color:var(--brand)}
    .btn-primary{background:var(--brand); color:#111; border-color:var(--brand)}
    .btn-primary:hover{filter:brightness(1.05)}
    .btn-secondary{background:#1b1f24; border-color:#39414d}
    .btn-ghost{background:transparent}
    .btn-lg{padding:1.05rem 1.4rem; font-weight:600}
    .btn-block{width:100%}
    
    
    .section{padding:72px 0; border-top:1px solid var(--line)}
    .sec-title{font-size:1.4rem; letter-spacing:.08em; color:var(--muted); margin:0 0 16px}
    .lead{font-size:1.3rem; line-height:1.8; margin:.4rem 0 1rem}
    
    
    /* cards */
    .card{background:#14171b; border:1px solid var(--line); border-radius:18px; padding:24px}
    .card.plan h3{margin:0 0 .25rem}
    .card.plan .price{font-size:1.8rem; margin:.1rem 0 .6rem}
    .card.plan .price small{font-size:.8rem; color:var(--muted)}
    .card.plan .note{color:var(--muted)}
    .card.plan.alt{opacity:.92}
    .card.plan.highlight{border-color:var(--brand)}
    .card.plan .flag{display:inline-block; font-size:.72rem; letter-spacing:.06em; color:#111; background:var(--brand); padding:.2rem .5rem; border-radius:999px; margin-bottom:.5rem}
    
    
    /* lists */
    .bullets{list-style:none; padding-left:1.2rem; margin:.6rem 0 1rem}
    .bullets li{position:relative; margin:.3rem 0; line-height:1.7}
    .bullets li::before{content:"•"; position:absolute; left:-1.2rem; color:var(--brand)}
    
    
    /* flow */
    .flow-steps{list-style:none; padding:0; margin:0}
    .flow-steps li{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px dashed var(--line)}
    .flow-steps .step{width:28px; height:28px; border-radius:999px; background:#1c2127; color:var(--fg); display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; border:1px solid var(--line)}
    
    
    /* footer */
    .site-footer{border-top:1px solid var(--line); padding:36px 0 64px; color:var(--muted)}
    .site-footer .brandline{color:var(--fg); margin:0 0 .3rem}
    
    
    /* utils */
    .nudge{margin-top:12px}
    
    
    @media (max-width: 760px){
    .section{padding:56px 0}
    }