:root{
  --ink:#22282b; --sub:#5c6b73; --line:#e3e8ea; --bg:#f7f9f9; --card:#fff;
  --sage:#6b8f89; --sage-d:#4f716c; --sage-bg:#eef3f2;
  --warn-bg:#fdf3ef; --warn-line:#e6b8a3; --warn-ink:#8a4b32;
}
*{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.85; -webkit-font-smoothing:antialiased;
}
.wrapper{max-width:840px; margin:0 auto; padding:0 22px}

/* ── Hero ── */
.hero{
  background:linear-gradient(135deg,var(--sage) 0%,var(--sage-d) 100%);
  color:#fff; text-align:center; padding:58px 24px 50px; border-radius:0 0 28px 28px;
}
.badge{
  display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
  border-radius:100px; font-size:12px; letter-spacing:.08em; padding:5px 15px; margin-bottom:18px;
}
.hero h1{font-size:clamp(26px,4.6vw,40px); font-weight:800; letter-spacing:-.01em; margin-bottom:14px}
.hero .lead{font-size:15.5px; opacity:.92; max-width:640px; margin:0 auto}

/* ── Section ── */
section{padding:42px 0}
.section-label{
  font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--sage-d);
  text-transform:uppercase; margin-bottom:8px;
}
h2{font-size:clamp(21px,3.2vw,27px); font-weight:800; margin-bottom:8px}
.section-note{font-size:14.5px; color:var(--sub); margin-bottom:18px}

/* ── ガイドカード ── */
.guides{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.guide{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px;
}
.guide h3{font-size:16px; font-weight:800; margin-bottom:4px; color:var(--sage-d)}
.guide .sub{font-size:13px; color:var(--sub); margin-bottom:14px}
.guide ol{list-style:none; counter-reset:g}
.guide li{position:relative; padding:9px 0 9px 34px; border-top:1px solid var(--line)}
.guide li:first-child{border-top:none}
.guide li::before{
  counter-increment:g; content:counter(g,decimal-leading-zero);
  position:absolute; left:0; top:11px; font-size:11px; font-weight:800;
  color:#fff; background:var(--sage); border-radius:6px; padding:2px 6px;
}
.guide a{color:var(--ink); text-decoration:none; font-weight:700; font-size:14.5px}
.guide a:hover{color:var(--sage-d); text-decoration:underline}
.guide .opt{display:block; font-size:12.5px; color:var(--sub); font-weight:400}

/* ── 必要なもの ── */
.reqs{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.req{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.req h3{font-size:14.5px; font-weight:800; margin-bottom:4px}
.req p{font-size:13px; color:var(--sub)}
.req .price{font-size:13px; font-weight:800; color:var(--sage-d); margin:2px 0 4px}

/* ── Contract ── */
.contract-box{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; max-height:360px; overflow-y:auto; font-size:13.5px; line-height:1.9;
}
.contract-box h3{font-size:14.5px; font-weight:800; margin:18px 0 6px; color:var(--sage-d)}
.contract-box h3:first-of-type{margin-top:14px}
.contract-box ul{margin:4px 0 4px 20px}
.contract-box li{margin:3px 0}
.contract-box .fine{margin-top:18px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--sub)}
.scroll-hint{font-size:12.5px; color:var(--sub); margin-top:8px; text-align:right}

/* ── 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:3px; flex:none; accent-color:var(--sage)}
.agree-wrap .t{font-size:14px}
.agree-wrap .t strong{font-weight:800}
.dl-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px}
.dl-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center}
.dl-card h3{font-size:15px; font-weight:800; margin-bottom:10px}
.btn-dl{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--sage-d); color:#fff; text-decoration:none; font-size:15px; font-weight:800;
  padding:14px 22px; border-radius:12px; border:none; cursor:pointer; width:100%;
  transition:transform .12s, background .2s, box-shadow .2s;
  box-shadow:0 8px 20px rgba(79,113,108,.26);
}
.btn-dl:hover{background:var(--sage); transform:translateY(-1px)}
.btn-dl[aria-disabled="true"], .btn-dl.disabled{
  background:#cbd5d3; color:#fff; box-shadow:none; cursor:not-allowed; pointer-events:none; transform:none;
}
.dl-note{font-size:12.5px; color:var(--sub); margin-top:10px}
.dl-lead{font-size:13.5px; color:var(--sub); text-align:center; margin-top:16px}

/* ── 注意ボックス ── */
.warn{
  background:var(--warn-bg); border:1px solid var(--warn-line);
  border-radius:14px; padding:20px 22px; margin-top:24px;
}
.warn h3{font-size:15px; font-weight:800; color:var(--warn-ink); margin-bottom:8px}
.warn ul{padding-left:20px}
.warn li{margin:8px 0; color:#6e4a3a; font-size:14px}

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

@media(max-width:640px){
  .guides, .dl-grid{grid-template-columns:1fr}
}