:root{
  --navy:#0f172a; --navy2:#1e3a5f; --blue:#1d4ed8; --blue-soft:#2563eb;
  --ink:#1a1a1a; --muted:#64748b; --line:#e2e8f0; --bg:#f5f7fb; --card:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.75; -webkit-font-smoothing:antialiased;
}
.wrapper{max-width:840px; margin:0 auto; padding:0 20px}

/* ── Hero ── */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 60%,var(--blue) 100%);
  color:#fff; text-align:center; padding:60px 24px 52px; border-radius:0 0 28px 28px;
}
.badge{
  display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  border-radius:100px; font-size:12px; letter-spacing:.08em; padding:5px 15px; margin-bottom:20px;
}
.hero h1{font-size:clamp(28px,5vw,46px); font-weight:800; letter-spacing:-.02em; margin-bottom:14px}
.hero .lead{font-size:16px; opacity:.85; max-width:620px; margin:0 auto}
.hero .lead strong{color:#fff; font-weight:700}

/* ── Section ── */
section{padding:44px 0}
.section-label{
  font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--blue);
  text-transform:uppercase; margin-bottom:8px;
}
h2{font-size:clamp(22px,3.5vw,30px); font-weight:800; letter-spacing:-.01em; margin-bottom:20px}

/* ── Feature grid ── */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.feat{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
}
.feat .k{font-size:14px; font-weight:800; color:var(--navy); margin-bottom:6px; display:flex; align-items:center; gap:8px}
.feat .v{font-size:13.5px; color:var(--muted); line-height:1.7}

/* ── Requirement / step cards ── */
.reqs{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.req{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px}
.req h3{font-size:15px; font-weight:800; margin-bottom:6px}
.req p{font-size:13.5px; color:var(--muted)}
.req .price{font-size:20px; font-weight:800; color:var(--navy); margin:2px 0 4px}
.steps{counter-reset:s; display:grid; gap:12px}
.step{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px 16px 56px; position:relative}
.step::before{
  counter-increment:s; content:counter(s); position:absolute; left:16px; top:16px;
  width:28px; height:28px; border-radius:8px; background:var(--blue); color:#fff;
  font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center;
}
.step b{display:block; font-size:15px; margin-bottom:2px}
.step span{font-size:13.5px; color:var(--muted)}
.step code{background:#eef2ff; color:var(--blue); padding:2px 7px; border-radius:6px; font-size:13px}

/* ── Contract ── */
.contract-box{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; max-height:340px; overflow-y:auto; font-size:13.5px; line-height:1.85;
}
.contract-box h3{font-size:15px; font-weight:800; margin:18px 0 6px; color:var(--navy)}
.contract-box h3:first-child{margin-top:0}
.contract-box ul{margin:4px 0 4px 20px}
.contract-box li{margin:2px 0}
.contract-box .fine{margin-top:16px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted)}

/* ── Agree + download ── */
.agree-wrap{
  display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:18px 20px; margin-top:16px; cursor:pointer;
}
.agree-wrap input{width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--blue)}
.agree-wrap .t{font-size:14px}
.agree-wrap .t strong{font-weight:800}
.dl-area{text-align:center; margin-top:22px}
.btn-dl{
  display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff;
  text-decoration:none; font-size:17px; font-weight:800; padding:16px 40px; border-radius:12px;
  border:none; cursor:pointer; transition:transform .12s, background .2s, box-shadow .2s;
  box-shadow:0 8px 22px rgba(29,78,216,.28);
}
.btn-dl:hover{background:var(--blue-soft); transform:translateY(-1px)}
.btn-dl[aria-disabled="true"],.btn-dl.disabled{
  background:#cbd5e1; color:#fff; box-shadow:none; cursor:not-allowed; pointer-events:none; transform:none;
}
.dl-note{font-size:12.5px; color:var(--muted); margin-top:12px}
.dl-sub{margin-top:14px}
.dl-sub a{color:var(--blue); font-weight:700; text-decoration:none; font-size:14px}
.dl-sub a:hover{text-decoration:underline}

/* ── Footer ── */
.footer{text-align:center; color:var(--muted); font-size:12.5px; padding:36px 20px 48px; border-top:1px solid var(--line); margin-top:24px}

@media(max-width:560px){
  .reqs{grid-template-columns:1fr}
}