/* ============================================================
   service-newsletter.html 専用スタイル
   style.css は編集せず、このファイルで hero-simple 等を追加する
   ============================================================ */

/* ---------- シンプルヒーロー(FV) ---------- */
.hero-simple {
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 56px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sb-50) 100%);
}
.hero-simple__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 460px);
  gap: 44px;
  align-items: center;
}
.hero-simple h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .01em;
}
.hero-simple__lead {
  margin-top: 20px;
  color: var(--text-mid);
  font-size: 16px;
  max-width: 42em;
}
.hero-simple__cta {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-simple__fig img {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  animation: float 7s ease-in-out infinite;
}
@media (max-width: 860px) {
  .hero-simple__inner { grid-template-columns: 1fr; gap: 24px; }
  .hero-simple__fig { order: -1; }
  .hero-simple__fig img { max-width: 300px; }
}

/* ---------- 配信サンプル(見出しチップ) ---------- */
.sample-topics { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sample-topics li {
  background: var(--sb-50); border: 1px solid var(--sb-100); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--sb-900);
}