/* ランディングページ */

/* ── 余白リズム ─────────────────────────────
   セクション間とセクション内（見出し→コンテンツ）の2階層で定義し、LP全体で共有する。
   メディアクエリの条件式にはCSS変数を使えないため、境界値は直値で書く（base.cssと同じ方針）。
   remではなくpxで持つのは、root font-sizeが帯ごとに14/15/16pxと変わり（common.css）、
   同じrem値でも帯をまたいだ段差が意図した比率にならないため。px固定にする分、
   文字サイズ拡大時に余白は追従せず文字との比率は詰まるが、余白はレイアウトの
   骨格として文字サイズと独立に扱う。 */
:root {
  --lp-section-gap: 64px;
  --lp-heading-gap: 24px;
}

/* タブレット */
@media (min-width: 768px) {
  :root {
    --lp-section-gap: 80px;
    --lp-heading-gap: 32px;
  }
}

/* PC */
@media (min-width: 1200px) {
  :root {
    --lp-section-gap: 112px;
    --lp-heading-gap: 40px;
  }
}

/* セクション間の余白はpadding-top側へ一本化する。上下の両方に持たせると
   隣接セクションで二重になるため。
   例外: ヒーロー直後の「活用事例」だけは、ヒーロー内側の下padding（.hero-content）
   とこのpadding-topが重なり他のセクション間より広くなる。ヒーロー画像が区切りの
   役割を持つため意図的に許容している。リズム統一の趣旨に反すると誤解して
   .hero-contentの下paddingを詰めないこと。 */
.lp-section {
  padding-top: var(--lp-section-gap);
  padding-bottom: 0;
}

/* padding-bottomが0だと末尾要素のmargin-bottomがセクション外へ抜け（マージン相殺）、
   セクション間の余白がpadding-topだけで決まらなくなるため打ち消す。 */
.lp-section > .container > :last-child {
  margin-bottom: 0;
}

/* 見出し（またはアイブロウまで含む見出しブロック）からコンテンツまでの間隔。
   .lp-sectionを持たない.cta-section内の見出しにも使うため、LP全セクション共通の
   見出し→コンテンツ間隔として扱う。 */
.lp-section-heading {
  margin-bottom: var(--lp-heading-gap);
}

/* ── 共通テキストスタイル ────────────────── */
.section-title {
  font-weight: 700;
  font-size: var(--font-size-title);
}

.section-body {
  font-size: var(--font-size-nav);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

.section-eyebrow {
  font-size: var(--font-size-eyebrow);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* PC */
@media (min-width: 768px) {
  .section-title {
    max-width: none;
    font-size: 1.5rem;
  }

  .section-body {
    font-size: 1.1rem;
    line-height: 1.5;
  }
}

.how-it-works-eyebrow {
  margin-top: 0.5rem;
  text-transform: none;
  letter-spacing: var(--letter-spacing-wide);
}

/* ── ヒーローセクション ───────────────────── */
.hero-section {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-warm);
}

.hero-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.hero-media picture,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── ヒーローテキスト ───────────────────── */
.hero-content {
  /* 577〜1199pxの.hero-brandが画像下端（.hero-mediaとの境界＝.hero-contentの上端）を
     基準に配置するためのcontaining block。.hero-mediaと.hero-contentはmarginを
     持たない隣接ブロックなので、この上端は常に画像の下端と一致する。
     1200px以上は@media側で改めてposition: relativeを宣言している（Gridレイアウトの
     文脈で明示するため）が、値は同じなので競合しない。 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-3) var(--space-5);
  text-align: center;
}

.hero-brand {
  /* ブランド名は欧文ワードマークであり、日本語コピー側のNoto Sans JPとは別扱い。
     ヘッダーの.header-logo-wordmark（common.css）と同じブランドフォント・ウェイトに揃える */
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: clamp(var(--font-size-hero), 8.6vw, 3rem);
  letter-spacing: 0;
  margin: 0;
  color: var(--color-text-brand);
  line-height: 1;
  /* 577〜1199pxはテキスト列から外し、ヒーロー画像の下部中央（下端が平坦なクリーム色の
     帯）へ重ねて、真下の中央揃えのコピーとひとまとまりに見せる。基準は
     position: relativeの.hero-content。.hero-mediaと.hero-contentはmarginを
     持たない隣接ブロックのため、bottom: 100%で要素の下端（下線込み）が
     ちょうど画像の下端に揃う。576px以下と1200px以上は@media側でテキスト列内へ置く。
     水平中央はleft: 0; right: 0; margin-inline: autoで取るが、それだけだと
     絶対配置要素は利用可能幅いっぱいに伸びてしまい、下の.hero-brand::afterが
     文字幅の70%で描けなくなるため、width: fit-contentで文字幅へ戻す。
     ロゴはcolor: var(--color-text-brand)のみで背景・影を持たないため、画像を
     差し替える際は下部中央領域とロゴのコントラストを再確認すること */
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  width: fit-content;
  margin-inline: auto;
  /* .hero-media::after（画像下端のフェード、z-index: 1）より前面に置く。
     576px以下の.hero-brandが同じ理由でz-index: 2にしているのと同じ。 */
  z-index: 2;
}

/* アプリアイコン（resources/brand/lc-icon.svg）・ヘッダーワードマーク
   （.header-logo-wordmark::after、common.css）と同じ「文字幅の70%・水平中央」に揃える。
   577〜1199pxは.hero-brandがposition: absoluteでleft: 0; right: 0を両方指定するため、
   widthを明示しないと利用可能幅いっぱいに伸びる。width: fit-contentで文字幅へ戻して
   いるため、ここでも幅は文字幅のまま。576px以下と1200px以上は.hero-contentのflex
   アイテムに戻り、align-itemsがstretch以外のためshrink-to-fitで幅が文字幅に縮む。
   いずれもwidth: 70%がそのまま文字幅の70%になる。
   heightはpx固定にせずem基準にしたうえで下限2pxを置く。
   ヒーローの文字サイズはclampで変動幅が大きく、px固定では大きい表示で線が細すぎ、
   小さい表示では下限が無いと1px台に潰れるため。margin-topはベースラインから下線
   上端までの間隔がcap heightの約37%になる値。ヘッダーのワードマーク
   （.header-logo-wordmark::after、bottom: -4px）が同じ比率で約37%であり、同じ画面に
   並ぶヘッダーロゴと見た目の締まり方を揃えるためこの値にしている。
   この比率はfont-family（--font-family-base）のascent/descentに依存するため、
   ブランドフォントを変更する場合はmargin-topの再調整が必要 */
.hero-brand::after {
  content: "";
  display: block;
  width: 70%;
  height: max(2px, 0.05em);
  margin-top: 0.12em;
  margin-left: auto;
  margin-right: auto;
  background: var(--color-accent);
  border-radius: 999px;
}

.hero-title {
  font-weight: 700;
  font-size: var(--font-size-title-sm);
  line-height: 1.45;
  color: var(--color-text-primary);
  /* 577〜1199pxは.hero-brandがテキスト列から外れて直前要素が無くなるためmargin無し。
     576px以下と1200px以上は@media側でmargin-topを戻す */
  margin: 0;
  text-wrap: balance;
}

/* 画像の白／クリームへのフェードとテキスト列のクリーム色の境目をなじませる。576px以下
   （人物写真）は顔がある上側には掛けず下端の約3割だけを覆う。577〜1199px
   （タブレット用画像）は下部中央がもともと平坦なクリーム色で、そこに.hero-brandを
   重ねるため、同じフェードでテキスト列との境目をなじませる。1200px以上は画像が
   全面背景でテキスト列を右へ重ねる構成のため、このフェードは効かせない。 */
@media (max-width: 1199px) {
  .hero-media::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 30%;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--color-bg-warm));
  }
}

/* モバイル専用イラストは人物を切らずに低く収める8:5の構図。ロゴは画像に重ねず、
   下のテキスト列の先頭へ戻して、下線・キャッチコピーとひと続きに見せる。 */
@media (max-width: 576px) {
  .hero-media {
    aspect-ratio: 8 / 5;
  }

  .hero-brand {
    position: relative;
    top: auto;
    right: auto;
    /* 577〜1199px用に追加したプロパティが残ると、position: relativeでも
       オフセットとして効いてしまう（bottom）か、幅・中央寄せの指定が
       意図せず残る（left/margin-inline/width）ため、ここで揃ってリセットする。 */
    bottom: auto;
    left: auto;
    margin-inline: 0;
    width: auto;
    /* 画像下端のフェード（.hero-media::after）より前面に置く。 */
    z-index: 2;
    /* 画像下端のフェード部分へ入れ、ロゴを人物の上へ重ねずにテキスト列全体も詰める。 */
    margin-top: calc(-1 * (var(--space-4) + var(--space-1)));
  }

  .hero-title {
    /* .hero-brand::after の下線からキャッチコピーまでの間隔。この帯（576px以下、root 14px）では21px。 */
    margin-top: var(--space-4);
  }
}

.hero-subcopy {
  margin: var(--space-3) 0 0;
  font-size: clamp(0.78rem, 3.8vw, 1rem);
  /* 1200px以上でも上書きせず、この値のまま使う */
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
}

.hero-subcopy span {
  /* 2文をそれぞれブロックにして句点位置で改行する。white-space: nowrap は使わない。
     文字拡大時に文の途中で折り返せず、右へはみ出すため */
  display: block;
}

.feature-list {
  display: flex;
  flex-direction: row;
  /* 収まらないときだけ折り返す。nowrapだと文字拡大時に3語目が枠外へ出て
     overflow: hiddenで消えるため。通常サイズは280px〜2560pxの全幅で1行に収まる */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: var(--space-2) 0 0;
  font-size: clamp(0.72rem, 3.4vw, 0.9rem);
  color: var(--color-text-secondary);
  text-align: center;
}

.feature-list li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.feature-list i {
  color: var(--color-accent);
}

/* タブレット：画像の下にテキストを縦積み */
@media (min-width: 577px) {
  /* 縦積みでは横長画像を切らずに元の比率で出す。イラスト本体だけを切り出すと
     幅の広いタブレットで画像が高くなりすぎ、CTAが折り返しの外へ出る。 */
  .hero-media {
    aspect-ratio: 12 / 5;
  }
}

/* 577〜1199px：ブランド名を表示幅に比例させる。直上の.hero-mediaがaspect-ratio: 12 / 5
   で幅に比例して高さが伸びるのに対し、ベースの.hero-brand（font-size: clamp(...)）は
   489px以上で上限の3remに張り付き実質固定サイズになる。そのためワードマークの幅が
   表示幅に占める割合が577pxで32.4%、1199pxで16.7%と半減し、イラストとの余白が
   帯の中で不均一になる（577pxで詰まりすぎ、1199pxで空きすぎ）。font-sizeも幅に比例させれば
   この割合が帯を通して一定になる。5.2vwは577pxで30.004px、1199pxで62.348pxとなる。
   5.6vwではなく5.2vwにしているのは、
   577px側でキャッチコピー（16.8px）に対し30px＝1.79倍を保ってブランド名がコピーに
   埋もれないようにしつつ、1199px側は1200px以上のclamp(2rem, 5.4vw, 6.5rem)
   （1200pxで64.8px）との差を2.45pxに収め、境界でサイズが飛ばないようにするため。 */
@media (min-width: 577px) and (max-width: 1199px) {
  .hero-brand {
    font-size: 5.2vw;
  }
}

/* 577pxのメディアクエリはヒーロー画像を縦積みにするためのもので、
   文字サイズの切替境界ではない。577pxに合わせると577〜767pxの
   モバイル帯まで本文が縮んでしまうため、768pxを境界にする。 */
@media (min-width: 768px) {
  .use-cases-section .card-text {
    font-size: 0.95rem;
  }
}

/* PC：画像の右余白へテキストを重ねる */
@media (min-width: 1200px) {
  /* テキストは通常フローに残し、親をGridにして中央へ寄せる。テキストも絶対配置に
     すると本文の高さが親に伝わらず、高さの低い画面（例: 1440×500）で
     min-height: 70svh と overflow: hidden により上下が切り落とされるため */
  .hero-section {
    display: grid;
    align-content: center;
    min-height: 70svh;
  }

  .hero-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  /* 横長画像 luxucom-fan-community-hero-wide.webp は、イラスト本体（人物・植物・家具）
     が幅1920pxのうち1211px＝63.07%までで終わり、その右は背景色と薄い曲線だけ。
     この位置をobject-positionの基準点にすると、coverの拡大率がビューポートの縦横比で
     変わってもイラストの右端が常に枠の63.07%に来る。下の.hero-contentのleftをそれより
     右に置くことで、どの画面比率でも文字がイラストに重ならない。
     画像を差し替えるときはイラスト本体が終わる位置を測り直し、この値と
     .hero-contentのleftを合わせて更新すること */
  .hero-media img {
    object-position: 63.07% center;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    align-items: flex-start;
    width: auto;
    /* イラスト本体は63.07%で終わる（.hero-media imgのobject-position参照）。
       その右の余白に対してテキスト列が左端へ寄りすぎて窮屈に見えるため、
       66%の基準位置からさらに40〜60px右へ寄せる。clampの下限/上限がその振れ幅。
       右マージンはテキスト列の幅が目減りしないよう同時に詰める。
       この40〜60pxはイラストとの距離を取るためのレイアウト上のオフセットであり、
       文字サイズに追従させる性質のものではないためpxで持つ。remにすると、
       root font-sizeだけが変わる環境（ページズームではなく文字サイズのみを
       拡大する設定。対象ブラウザのChromiumでは再現しない）でclampの下限が効き、
       マージンだけが膨らんでテキスト列が狭くなる。対象ブラウザの範囲で実害が
       出ているわけではなく、意図を素直に表した指定としてpxにしている。 */
    margin-right: clamp(24px, 2vw, 48px);
    margin-left: calc(66% + clamp(40px, 3vw, 60px));
    padding: var(--space-4) 0;
    text-align: left;
  }

  /* .cta-btnは基底でwhite-space: nowrap、paddingと文字がrem基準のため、
     root font-sizeが大きい環境ではテキスト列より広くなりうる。.hero-sectionは
     overflow: hiddenのため、はみ出すと主要導線が見えなくなる。対象ブラウザ
     （Chromium）の通常表示・ページズームでは列幅に収まるため、これは将来
     root font-sizeやコピーの長さが変わったときの保険。 */
  .hero-content .cta-btn {
    max-width: 100%;
    white-space: normal;
  }

  .hero-brand {
    position: relative;
    top: auto;
    right: auto;
    /* 577〜1199px用に追加したプロパティのリセット。576px以下と同じ理由
       （position: relativeでもオフセットとして効いてしまうbottom、幅・中央寄せの
       指定が残るleft/margin-inline/width）。 */
    bottom: auto;
    left: auto;
    margin-inline: 0;
    width: auto;
    z-index: auto;
    font-size: clamp(2rem, 5.4vw, 6.5rem);
  }

  .hero-title {
    margin-top: var(--space-5);
    font-size: clamp(1.25rem, 2.25vw, 2.1rem);
    line-height: var(--line-height-tight);
  }

  .hero-subcopy {
    font-size: clamp(0.75rem, 1.2vw, 1.1rem);
  }

  .feature-list {
    justify-content: flex-start;
  }
}

/* ── CTAボタン ───────────────────────────── */
/* 主操作の暗色塗りに統一（アプリアイコンの配色に合わせ、アクセントの金は差し色として温存）。
   色は生の color/background/border ではなく --btn-* トークンで指定する。.btn基底
   （components.css）の:hover/:active/:disabledは--btn-hover-*等（未設定時は--btn-*へ
   フォールバック）で色を解決するため、トークンで統一しておけば状態が変わっても
   塗りが透明化・暗色文字化しない（AGENTS.md § ホバースタイルの方針） */
.cta-btn {
  --btn-color: var(--color-bg-white);
  --btn-bg: var(--color-primary-fill);
  --btn-border-color: var(--color-primary-fill);
  box-shadow: var(--shadow-cta);
  letter-spacing: var(--letter-spacing-tight);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 1rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-btn);
}

.hero-content .cta-btn {
  margin-top: var(--space-4);
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
  border-radius: var(--radius-btn-lg);
}

/* ホバーは他の塗りボタン（.btn-primary）と同じくopacityで表現し、塗りの色は変えない */
@media (hover: hover) {
  .cta-btn:hover {
    opacity: var(--opacity-hover);
  }
}

.cta-btn:focus-visible {
  outline: 3px solid var(--color-accent-text);
  outline-offset: 2px;
}

/* PC */
@media (min-width: 768px) {
  .cta-btn {
    font-size: 1.15rem;
    padding: 0.9rem 2.4rem;
    border-radius: var(--radius-btn-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-btn {
    transition: none;
  }

  .cta-btn:hover {
    transform: none;
  }
}

/* ── 活用事例セクション ────────────────────── */
.use-case-img {
  background: var(--color-bg-warm);
  object-fit: cover;
}

/* ── LPカード共通タイトル ───────────────────
   活用事例・3つの空間セクションで共用 */
.lp-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-primary);
}

/* ── 3つの空間セクション ─────────────────── */
/* 3カードすべてのコピーテキストに適用 */
.space-card-copy {
  font-size: 0.95rem;
}

/* スマホ：Open Salonカードの左右パディングを縮小 */
@media (max-width: 576px) {
  .three-spaces-section .space-card-body {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* PC・タブレット：カード本文を揃えて1行表示 */
@media (min-width: 768px) {
  .three-spaces-section .card-body {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

.three-spaces-link-btn {
  font-size: 0.9rem;
  padding: 0.56rem 1.05rem;
  border-radius: 10px;
}

/* PC */
@media (min-width: 768px) {
  .three-spaces-link-btn {
    font-size: 1rem;
    padding: 0.65rem 1.35rem;
  }
}

/* ── アイコンバッジ ──────────────────────── */
.icon-badge {
  --icon-size: 56px;
  --badge-size: 18px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--color-accent);
}

.icon-badge .base {
  font-size: calc(var(--icon-size) * 0.78);
  line-height: 1;
}

.icon-badge .lock-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: var(--badge-size);
  height: var(--badge-size);
  display: inline-grid;
  place-items: center;
  font-size: calc(var(--badge-size) * 0.7);
  background: var(--color-bg-white);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.fa-duotone {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
  --fa-secondary-opacity: 0.35;
}

/* PC */
@media (min-width: 768px) {
  .icon-badge {
    --icon-size: 64px;
    --badge-size: 20px;
  }
}

/* ── NFT仕組み説明 ステップリスト ───────── */
/* .steps-list はolの既定マージンを消すためmargin: 0にしており、utilities.cssの.rowが
   持つ行gutter相殺用のネガティブな上マージン（margin-top: calc(-1 * var(--gutter-y))）
   まで一緒に消えている。そのため.g-4の行gutter（--space-4）が見出しとの間に
   そのまま積み増しされ、他セクションより広く見える。他セクションと見た目の間隔を
   揃えるため、積み増し分を見出し側のmargin-bottomから差し引く。
   なお、.steps-list { margin: 0 } が.rowのネガティブマージンを打ち消せているのは
   詳細度の勝敗ではなく、landing_page.cssがutilities.cssより後に読み込まれる
   （同じ詳細度なら読み込み順で後勝ち）ためである。 */
.how-it-works-section .lp-section-heading {
  /* --lp-heading-gapは--space-4の実効値（モバイルで21px）より大きく保つこと。
     両者は別ファイル（landing_page.cssとcommon.cssのroot font-size）で
     独立に決まるため、max()で下限を守る。 */
  margin-bottom: max(0px, calc(var(--lp-heading-gap) - var(--space-4)));
}

.steps-list {
  margin: 0;
  padding: 0;
}

.step-card {
  border-radius: var(--radius-btn-lg);
  padding: 0.9rem 0.9rem 1.1rem;
  background: var(--color-bg-white);
  position: relative;
}

.step-icon {
  display: flex;
  justify-content: center;
  color: var(--color-accent);
}

/* 見出しは金の差し色ではなく本文色にする（同ブロックの.step-iconの金はアイコンの
   差し色として維持）。16.8px相当の太字はWCAGの「大きな文字」（太字18.66px以上）に
   該当しないため通常文字扱いとなるが、--color-text-primary（白背景に対し約14.2:1）
   は4.5:1を大きく上回る */
.step-title {
  color: var(--color-text-primary);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.75rem 0 0.25rem;
}

.step-caption {
  font-weight: 600;
  margin: 0.75rem 0 0.25rem;
}

/* PC */
@media (min-width: 768px) {
  .step-card {
    padding: 1rem 1rem 1.25rem;
  }

  .step-title {
    font-size: 1.5rem;
  }
}

/* 矢印区切り */
.step-sep {
  flex: 0 0 auto;
  width: auto;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.step-sep i {
  font-size: 1.2rem;
  color: var(--color-accent-muted);
  line-height: 1;
  display: inline-block;
  padding: 0.125rem;
  transform: rotate(90deg);
}

/* PC：矢印を横向きに */
@media (min-width: 768px) {
  .step-sep i {
    transform: rotate(0deg);
  }
}

/* ── コミュニティ説明文 ──────────────────── */
.community-description {
  max-width: 68ch;
  line-height: var(--line-height-relaxed);
}

/* ── クロージング CTAセクション ─────────── */
/* LPではバナー分の退避をmain（白背景）ではなく締めセクションの内側（padding-bottom）で
   取り、ベージュのグラデーションを画面下端まで続かせる。mainで取ると背景がそこまで
   伸びず、白い帯として見える。landing_page.cssはcommon.cssの後に読まれるため、
   共通ルール（common.cssのmain）は変更せずLPだけ上書きできる。
   考え方はchat.cssの「各ペイン内側のpadding-bottomで退避を取る」と同じ。
   padding-topは共通ルールの固定ヘッダー分をそのまま使う。 */
main {
  padding-bottom: 0;
}

.cta-section {
  background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-warm) 100%);
  /* 上は他のセクション間と同値。背景色の切り替わりが区切りになるため、これより広げない。
     下はバナー分の退避を背景の内側で取る（詳細は下の main の項）。 */
  padding-top: var(--lp-section-gap);
  padding-right: var(--space-3);
  padding-bottom: calc(var(--lp-section-gap) + var(--mobile-footer-main-offset));
  padding-left: var(--space-3);
  color: var(--color-text-primary);
}

/* タブレット以上はモバイルのフッターナビが無いため、バナー分だけを退避する
   （common.cssの768px以上のmainと同じ式） */
@media (min-width: 768px) {
  .cta-section {
    padding-bottom: calc(var(--lp-section-gap) + var(--pwa-banner-offset, 0px) + var(--pwa-banner-card-gap, 0px));
  }
}

.cta-section .section-title {
  line-height: var(--line-height-tight);
  font-size: var(--font-size-title-sm);
  font-weight: 600;
}