/* youtemi LP (クローズドβ) — claude design から静的 HTML 化 */
body {
  margin: 0;
  background: #F8FAF8;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

a {
  color: #059669;
  text-decoration: none;
}

a:hover {
  color: #047857;
}

img {
  display: block;
  max-width: 100%;
}

/* CTA ボタン */
.btn-cta {
  background: #10B981;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  text-align: center;
}

.btn-cta:hover {
  background: #059669;
  color: #fff;
}

/* セカンダリボタン(お問い合わせページ) */
.btn-secondary {
  background: #fff;
  color: #1B2A26;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid #DCE7E0;
  text-align: center;
}

.btn-secondary:hover {
  border-color: #10B981;
  color: #059669;
}

/* フッターリンク */
.footer-link {
  color: #55665F;
}

.footer-link:hover {
  color: #10B981;
}

/* 実際の画面セクションの横スクロールレール
   3枚(260px×3 + gap 32px×2 = 844px)が収まる幅なら全体をセンター表示、
   収まらなければ1枚センターのスナップスクロール */
.screens-rail {
  padding: 4px max(16px, calc(50vw - 130px)) 16px;
  scrollbar-width: none;
}

.screens-rail::-webkit-scrollbar {
  display: none;
}

@media (min-width: 884px) {
  .screens-rail {
    padding: 4px calc(50vw - 422px) 16px;
  }
}