/* ------------------------------------------------------------
   クリエイター向けのLP（/creator）だけで使う部品
   ※ 共通の部品は lp-style.css、他業種と同じ部品は business-style.css
   ------------------------------------------------------------ */

/* ファーストビュー：料金の下の小さな注意書き */
.lp-hero__note-sub {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.75em;
  opacity: 0.8;
}

/* ファーストビュー：コピーが長いので、狭いスマホでは少し小さく */
.lp--creator .lp-hero__title {
  font-size: clamp(28px, 8.4vw, 38px);
}
@media (min-width: 768px) {
  .lp--creator .lp-hero__title { font-size: 52px; }
}

/* クリエイター向けだけ、ピンク〜オレンジの色に */
.lp--creator {
  --lp-primary: #C93B74;
  --lp-primary-dark: #B03267;
  --lp-primary-light: #FCEBF2;
  --lp-accent: #F5A25D;
}
/* ヒーローの背景：右上にオレンジ、左下にうすい紫 */
.lp--creator .lp-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(245, 162, 93, 0.35) 0, rgba(245, 162, 93, 0) 40%),
    radial-gradient(circle at 0% 90%, rgba(150, 90, 200, 0.12) 0, rgba(150, 90, 200, 0) 45%),
    linear-gradient(180deg, var(--lp-primary-light) 0%, #ffffff 100%);
}
/* ヘッダーのログイン（サイト共通の色を使っているので、ここで上書き） */
.lp--creator .site-head__login {
  border-color: var(--lp-primary-dark);
  color: var(--lp-primary-dark);
}
.lp-worry__icon,
.lp-scene__icon {
  color: var(--lp-primary-dark);
}
/* お悩みのアイコンの丸：差し色（オレンジ）のうすい色に */
.lp--creator .lp-worry__icon {
  background: #FFF0E3;
}