:root{
  --brand:#ffb443;     
  --accent:#9f4d33;    /* 補助色 */
  --ink:#222;
  --bg:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.nav{max-width:960px;margin:0 auto;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:800;color:var(--brand);text-decoration:none}
.links a{margin-left:16px;text-decoration:none;color:#555}
.hero{max-width:960px;margin:24px auto;padding:0 20px;text-align:center}
.cta{display:inline-block;margin-top:12px;padding:12px 18px;background:#000;color:#fff;text-decoration:none;border-radius:10px}
.badges .badge{display:inline-block;margin:8px 6px;padding:6px 10px;border:1px solid #ddd;border-radius:999px;font-size:12px}
.screenshot{display:block;margin:20px auto;max-width:720px;width:100%;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.site-footer{padding:40px 20px;text-align:center;color:#777}

/* ロゴ画像：画面幅に合わせて自然に縮む */
.brand-mark{
  display:block;
  margin: 12px auto 8px;
  width: clamp(160px, 40vw, 420px); /* 最小160px、通常40vw、最大420px */
  height:auto;
}
.hero p{ /* 読みやすい行長・余白 */
  max-width: 44rem;
  margin: 8px auto 0;
  line-height: 1.7;
  font-size: 1.05rem;
}

.features{
  max-width: 1000px;
  margin: 32px auto;
  padding: 0 20px;
}
.features h2{
  text-align:center;
  margin-bottom: 14px;
}
.feature-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 680px){
  .feature-grid{ grid-template-columns: 1fr 1fr; }
}
.feature-card{
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 16px 16px 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.feature-card .emoji{
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}
.feature-card h3{
  font-size: 1.05rem;
  margin: 4px 0 6px;
}
.feature-card p{
  margin: 0;
  color: #444;
  line-height: 1.7;
}

.store-badge{
  height: 72px;
  margin: 16px auto;
  display: block;
}