:root{
  --bg:#ffffff;
  --fg:#0f0f10;
  --muted:#5a5f66;
  --line:#e7e8ea;
  --soft:#f6f7f8;
  --card:#ffffff;
  --shadow: 0 8px 22px rgba(0,0,0,.06);
  --radius: 16px;
  --radius-sm: 12px;
  --max: 1040px;
  --pad: 20px;
  --focus: 0 0 0 4px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
a:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}
p{margin:0 0 14px}
ul,ol{margin:0;padding-left:1.2em}
li{margin:.35em 0}
strong{font-weight:800}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}

.site-header{
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 65%, #fafafa 100%);
}

.site-kicker{
  margin:18px 0 6px;
  color:var(--muted);
  font-size:.92rem;
}

h1{
  margin:0 0 10px;
  font-size: clamp(1.65rem, 1.15rem + 1.4vw, 2.35rem);
  line-height:1.25;
  letter-spacing:-.01em;
}

.lead{
  margin:0 0 14px;
  color:var(--muted);
  font-size:1.02rem;
}

.subnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 0 22px;
}
.subnav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.8);
  color:#1a1a1c;
  font-size:.92rem;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.subnav a:hover{
  background:var(--soft);
  border-color:#d7d9dd;
  transform:translateY(-1px);
}

.section{padding:34px 0}
.section.alt{
  background: var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
h2{
  margin:0 0 12px;
  font-size: clamp(1.22rem, 1.05rem + .7vw, 1.6rem);
  line-height:1.3;
  letter-spacing:-.01em;
}
.section-lead{margin:0 0 18px;color:var(--muted)}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.panel{
  grid-column: span 6;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.panel h3{margin:0 0 8px;font-size:1.05rem}
.panel p{color:var(--muted)}
.list{margin:0;padding-left:1.15em}
.list li{color:#1a1a1c}

.cards{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.card{
  grid-column: span 4;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 16px 14px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.card h3{margin:6px 0 8px;font-size:1.15rem}
.card .desc{margin:0 0 12px;color:var(--muted)}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.02em;
}
.rank1{border-color:#d9dadd}
.rank1::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(800px 260px at 15% 0%, rgba(0,0,0,.06), transparent 55%);
  pointer-events:none;
}

.points{margin:0 0 12px;padding-left:1.15em}
.points li{color:#1a1a1c}
.points strong{font-weight:800}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  font-size:.98rem;
  line-height:1;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  border-color:#d7d9dd;
}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.primary{background:#0f0f10;color:#fff;border-color:#0f0f10}
.btn.primary:hover{background:#000;border-color:#000}
.btn.ghost{background:transparent}

.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cta-wide{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:16px;
  box-shadow: 0 2px 0 rgba(0,0,0,.02);
}
.cta-title{margin:0 0 10px;font-weight:800;letter-spacing:-.01em}
.cta-buttons{display:flex;gap:10px;flex-wrap:wrap}

.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.02);
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  min-width:740px;
}
.compare-table th,
.compare-table td{
  padding:14px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  text-align:left;
}
.compare-table th{
  font-weight:900;
  background:#fafafa;
  position:sticky;
  top:0;
  z-index:1;
}
.compare-table tr:last-child td{border-bottom:none}
.text-link{text-decoration:underline;text-underline-offset:3px}
.text-link:hover{opacity:.85}

.faq{margin:0;padding:0}
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 14px;
  background:#fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.02);
  margin-bottom:12px;
}
.faq dt{font-weight:900;margin:0 0 6px}
.faq dd{margin:0;color:var(--muted)}

.steps{margin:0;padding-left:1.2em}
.steps li{
  margin:0 0 12px;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.02);
  list-style: decimal;
}
.steps h3{margin:0 0 6px;font-size:1.05rem}
.steps p{margin:0;color:var(--muted)}

.site-footer{
  border-top:1px solid var(--line);
  padding:26px 0;
  background:#fff;
}
.site-footer p{margin:0;color:var(--muted);font-size:.92rem}

header h1, main, footer{word-break:keep-all}

@media (max-width: 980px){
  .card{grid-column: span 6}
  .panel{grid-column: span 12}
}
@media (max-width: 640px){
  :root{--pad:16px}
  .subnav a{padding:9px 11px}
  .section{padding:28px 0}
  .card{grid-column: span 12}
  .btn{width:100%}
  .cta-buttons .btn{width:100%}
}