@charset "UTF-8";
/*
Theme Name: 賃料アップ交渉代行 LP（ARROWS）
Description: growth-up-001 固有のCSS（オーナー向け賃料アップLP）
Author: 株式会社アローズ
Version: 1.0.0

命名規則：
- Block:    .c-lp-{component-name}
- Element:  .c-lp-{component-name}__{element-name}
- Modifier: .c-lp-{component-name}--{modifier-name}
- Utility:  .u-{property}-{value}
- Layout:   .l-{layout-name}
*/

/* ===================================================================
 0. カラーパレット / トークン（ARROWSブランド）
 ===================================================================*/
:root {
  /* フォント（variables.css を読み込まないため、このLPで定義。
     未定義だと body の font-family:var(--font-family-base) が無効化され、
     スマホ既定＝明朝にフォールバックするための対策） */
  --font-family-base: "LINE Seed JP", "Yu Gothic UI", "Yu Gothic", YuGothic,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-family-en: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  /* ベース色（base.css の var(--color-*) を上書き） */
  --color-black: #16242b;
  /* ニュートラル900 */
  --color-white: #ffffff;
  --color-yellow: #fff3b0;
  /* base.css の mark 用フォールバック */

  /* ブランド色 */
  --gu-orange: #ff7a45;
  /* オレンジ500（CTA・アクセント） */
  --gu-orange-dark: #f26430;
  --gu-green: #00b386;
  /* グリーン500（数値・ブランド） */
  --gu-green-100: #eaf7f1;
  /* グリーン100（淡背景） */
  --gu-green-50: #f4fbf8;
  --gu-ink: #16242b;
  /* 見出し・本文濃色 */
  --gu-n600: #5a6b72;
  /* ニュートラル600 */
  --gu-n400: #666666;
  /* ニュートラル400 */
  --gu-n300: #8b979d;
  --gu-line: #e3eaea;
  /* 罫線 */

  /* レイアウト */
  --gu-max: 402px;
  /* コンテンツ最大幅（タブレット以上での1カラム幅。スマホは100%） */
  --gu-pad: 16px;
  /* 左右パディング */
  --gu-radius: 16px;

  /* 数字用フォント（DIN Narrow代替：Archivo Narrow） */
  --gu-font-num: "Archivo Narrow", "Oswald", sans-serif;

  /* FVリード1行目と宛先ブロックの間隔（調整用） */
  --gu-fv-lead-gap: 0.5em;

  /* RECOMMENDお悩みリストの下部余白（人物イラストとの間隔・調整用） */
  --gu-recommend-balloon-bottom: 60px;
}

/* マーカー（長文中の大切な部分の強調） */
.is-marker {
  background: linear-gradient(transparent 58%, rgba(255, 199, 89, 0.6) 58%);
  font-weight: 700;
  padding: 0 1px;
}

/* グリーン系マーカー（バリエーション） */
.is-marker--green {
  background: linear-gradient(transparent 58%, rgba(0, 179, 134, 0.28) 58%);
}

/* 金額・数字（FLOWの番号、FVスタッツ、金額系）に数字フォントを適用 */
.c-lp-fv__stat-num,
.c-lp-flow__badge,
.c-lp-results__ach-num,
.c-lp-results__rent-amount,
.c-lp-simulation__hero-num,
.c-lp-simulation__result-row-value,
.c-lp-simulation__summary-total-num {
  font-family: var(--gu-font-num);
}

/* ===================================================================
 1. レイアウト土台
 ===================================================================*/
/* このLP配下は border-box に統一（横オーバーフロー防止） */
.l-growth,
.l-growth *,
.l-growth *::before,
.l-growth *::after {
  box-sizing: border-box;
}

.l-growth img {
  max-width: 100%;
}

.l-growth {
  position: relative;
  /* スマホ：全幅（100%） */
  max-width: 100%;
  margin: 0 auto;
  /* 保険：変数が万一未定義でも明朝にならないよう sans-serif を最終フォールバックに */
  font-family: var(--font-family-base, sans-serif);
  background: var(--color-white);
  color: var(--gu-ink);
  overflow-x: hidden;
  box-shadow: 0 0 40px rgba(22, 36, 43, 0.06);
}

/* タブレット以上：スマホ幅の1カラム（402px）を中央寄せ */
@media (min-width: 768px) {
  .l-growth {
    max-width: var(--gu-max);
  }
}

/* ============================================================
 ヘッダー（Figma: node 1-607）
============================================================ */
.c-lp-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 64px;
  padding-inline: 16px;
}

.c-lp-header__logo {
  display: block;
  width: 110px;
  line-height: 0;
}

.c-lp-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.c-lp-container {
  width: 100%;
  padding-inline: var(--gu-pad);
}

/* セクション共通余白（Figma: py-48px） */
.c-lp-section {
  padding-block: 48px;
}

/* ===================================================================
 2. 共通：見出し（英字ラベル + 手書き風アンダーライン）
 ===================================================================*/
.c-lp-sec__eyebrow {
  display: block;
  font-family: var(--font-family-en);
  font-weight: 700;
  letter-spacing: 0;
  font-size: 16px;
  line-height: 21px;
  color: var(--gu-green);
  text-align: center;
}

.c-lp-sec__heading {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.c-lp-sec__heading-line {
  display: block;
  width: 184px;
  max-width: 60vw;
  height: 12px;
}

.c-lp-sec__title {
  font-weight: 800;
  font-size: 24px;
  line-height: 31.2px;
  color: var(--gu-ink);
  text-align: center;
}

.c-lp-sec__title .is-orange {
  color: var(--gu-orange);
}

.c-lp-sec__title .is-green {
  color: var(--gu-green);
}


/* ===================================================================
 3. 共通：CTAボタン（オレンジのピル）
 ===================================================================*/
.c-lp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 370px;
  margin-inline: auto;
  min-height: 59px;
  padding: 14px 24px;
  border: 0;
  border-radius: 9999px;
  background: var(--gu-orange);
  color: var(--color-white);
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: transform 0.15s ease, background 0.15s ease;
  /* ぷよぷよと弾むCTAアニメーション */
  animation: poyopoyo 2s ease-out infinite;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

/* モーション低減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .c-lp-btn {
    animation: none;
  }
}

/* 未入力時：押せないグレーアウト状態 */
.c-lp-btn:disabled,
.c-lp-btn.is-disabled {
  background: #c3ccd0;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  /* 押下不可の状態では弾ませない */
  animation: none;
}

.c-lp-btn:disabled:hover,
.c-lp-btn.is-disabled:hover {
  background: #c3ccd0;
  transform: none;
  box-shadow: none;
}

.c-lp-btn:hover {
  background: var(--gu-orange-dark);
  color: var(--color-white);
  /* ホバー中は弾みを止めてリフト表現を優先 */
  animation: none;
  transform: translateY(-2px);
  box-shadow: none;
}

.c-lp-btn__arrow {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: currentColor;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.c-lp-btn__arrow i {
  font-size: 24px;
  line-height: 1;
}

/* ボタン上のキャッチ（両端の装飾つき） */
.c-lp-btn-catch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--gu-ink);
}

.c-lp-btn-catch__deco {
  width: 14px;
  height: 14px;
}

.c-lp-btn-catch__deco img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===================================================================
 4. ファーストビュー（c-lp-fv）
 ===================================================================*/
.c-lp-fv {
  position: relative;
  padding: 52px 0 48px;
  overflow: hidden;
  background: linear-gradient(180deg, #dff0fb 0%, #eaf7f1 60%, #eaf7f1 100%);
}

/* 背景ヒーロー画像（ビル・街並み・関西マップ・タブレット） */
.c-lp-fv__bg {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  pointer-events: none;
}

.c-lp-fv__bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* 下部を淡グリーンにフェードさせるオーバーレイ */
.c-lp-fv::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(234, 247, 241, 0) 0%, #eaf7f1 42%);
  pointer-events: none;
}

.c-lp-fv__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* エリアピン（マップ上に重ねる） */
.c-lp-fv__pins {
  position: absolute;
  z-index: 2;
  left: 6%;
  width: 58%;
  top: 327px;
  height: 140px;
  pointer-events: none;
}

.c-lp-fv__pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
}

.c-lp-fv__pin img {
  width: 11px;
  height: 16px;
}

.c-lp-fv__pin span {
  font-size: 10px;
  color: var(--gu-orange);
  white-space: nowrap;
}

.c-lp-fv__pin--kobe {
  left: 21%;
  top: 36%;
}

.c-lp-fv__pin--osaka {
  left: 39%;
  top: 46%;
}

.c-lp-fv__pin--kyoto {
  left: 62%;
  top: 30%;
}

/* リードとスタッツの間に地図/タブレットを見せる帯を作る */
.c-lp-fv__stats {
  margin-top: 84px;
}

/* バッジ（関西の賃料上昇は、過去最高） */
.c-lp-fv__badge {
  margin-top: 8px;
}

.c-lp-fv__badge .c-lp-sec__title {
  margin: 0;
  font-size: 16px;
  color: var(--gu-orange);
  font-weight: 700;
}

.c-lp-fv__badge .is-strong {
  font-weight: 800;
  /* 各文字の上に圏点（ドット） */
  -webkit-text-emphasis: filled dot;
  text-emphasis: filled dot;
  -webkit-text-emphasis-position: over;
  text-emphasis-position: over;
}

/* メイン見出し */
.c-lp-fv__heading {
  margin: 0;
  font-weight: 800;
  font-size: clamp(32px, 10.5vw, 40px);
  line-height: 1.2;
  text-align: center;
  color: var(--gu-ink);
  text-shadow: 0 10px 10px #fff, 0 6px 6px #fff, 0 0 4px #fff;
}

/* リード（賃料アップ交渉、まるごと代行します。…） */
.c-lp-fv__lead {
  align-self: flex-start;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gu-ink);
}

.c-lp-fv__lead-intro {
  display: block;
}

/* 宛先ブロック（大阪・神戸・京都〜オーナー様へ）：行間を詰める */
.c-lp-fv__lead-target {
  display: block;
  line-height: 1.4;
}

.c-lp-fv__lead .is-orange {
  color: var(--gu-orange);
  font-size: 18px;
}

/* 実績スタッツ */
.c-lp-fv__stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.c-lp-fv__stat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.c-lp-fv__stat-label {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--gu-green);
  white-space: nowrap;
}

.c-lp-fv__stat-value {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--gu-green);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.c-lp-fv__stat-num {
  font-size: 40px;
}

.c-lp-fv__stat-unit {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 2px;
}

.c-lp-fv__stat-note {
  font-size: 10px;
  font-weight: 400;
  color: var(--gu-n600);
}

.c-lp-fv__stats-divider {
  width: 1px;
  background: var(--gu-green);
}

.c-lp-fv__footnotes {
  width: 100%;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--gu-n400);
}

.c-lp-fv__footnotes p {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

/* 強みカード（3枚） */
.c-lp-fv__cards {
  display: flex;
  gap: 16px;
  width: 100%;
}

.c-lp-strength-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(22, 36, 43, 0.08);
}

.c-lp-strength-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--gu-green-100);
}

.c-lp-strength-card__icon img {
  width: 20px;
  height: 20px;
}

.c-lp-strength-card__title {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--gu-ink);
}

/* CTAブロック */
.c-lp-fv__cta {
  width: 100%;
}

/* ===================================================================
 （以降のセクションCSSはここに追記）
 ===================================================================*/

/* @@SECTIONS_CSS@@ */

/* ===== c-lp-recommend ===== */
.c-lp-recommend.c-lp-section {
  padding-block: 0;
  overflow: hidden;
  /* イントロ下端の山型クリップで抜ける部分を淡いグリーンで埋める（白抜け防止） */
  background: var(--gu-green-100);
}

.c-lp-recommend__inner {
  position: relative;
  z-index: 1;
}

/* ---- イントロ（グリーン地・下端が山型に尖る） ---- */
.c-lp-recommend__intro {
  position: relative;
  /* 下端に人物イラストを重ねるぶんの余白を確保 */
  padding: 48px 0 150px;
  background: var(--gu-green);
  color: var(--color-white);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 52px), 50% 100%, 0 calc(100% - 52px));
}

/* 見出し */
.c-lp-recommend__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.c-lp-recommend__eyebrow {
  font-family: var(--font-family-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0.04em;
}

.c-lp-recommend__title {
  margin: 0;
  font-weight: 800;
  font-size: 24px;
  line-height: 31.2px;
}

.c-lp-recommend__lead {
  margin: 8px 0 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
}

/* お悩みリスト */
.c-lp-recommend__balloon-list {
  list-style: none;
  margin: 32px 0 var(--gu-recommend-balloon-bottom);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-lp-recommend__balloon {
  display: grid;
  align-items: center;
  column-gap: 12px;
}

.c-lp-recommend__balloon--thumb-left {
  grid-template-columns: 135px minmax(0, 1fr);
}

.c-lp-recommend__balloon--thumb-right {
  grid-template-columns: minmax(0, 1fr) 135px;
}

.c-lp-recommend__balloon-text {
  margin: 0;
  min-width: 0;
  /* 太字/非太字の混在を解消し、全体を統一（バラバラ防止） */
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  text-align: left;
}

.c-lp-recommend__balloon-text b {
  font-weight: 700;
}

.c-lp-recommend__balloon--thumb-left .c-lp-recommend__balloon-text {
  justify-self: end;
}

.c-lp-recommend__balloon--thumb-right .c-lp-recommend__balloon-text {
  justify-self: start;
}

/* サムネイル（丸写真＋名前ピル） */
.c-lp-recommend__thumb {
  position: relative;
  flex-shrink: 0;
  width: 135px;
  height: 135px;
}

.c-lp-recommend__thumb-img {
  display: block;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: var(--gu-green);
  object-fit: cover;
  object-position: top center;
  /* 画像の向きを左右反転 */
  transform: scaleX(-1);
}

.c-lp-recommend__thumb-label {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 9999px;
  background: #000;
  color: var(--color-white);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* 人物イラスト（bg-image方式）：intro（緑パネル）の下端に重ねる。
   intro の clip-path V が人物の下端カットとほぼ一致するように配置。
   ※ 重なり位置は intro の padding-bottom と bottom 値で微調整可能。 */
.c-lp-recommend__bg-image {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  z-index: 0;
}

.c-lp-recommend__bg-image--01 {
  display: block;
  width: 100%;
  max-width: 402px;
  height: auto;
  margin: 0 auto;
}

/* ---- 実績（96%）＋締め ---- */
.c-lp-recommend__achievement {
  position: relative;
  padding: 40px 0 72px;
  background: radial-gradient(120% 90% at 50% 12%, var(--gu-green-50) 0%, var(--gu-green-100) 100%);
  color: var(--gu-ink);
}

.c-lp-recommend__achievement-heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  text-align: center;
}

.c-lp-recommend__achievement-logo-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.c-lp-recommend__achievement-logo {
  display: block;
  width: 176px;
  height: 38px;
}

/* 円グラフ（Figmaデザインを画像化） */
.c-lp-recommend__chart {
  width: 320px;
  max-width: 100%;
  margin: 24px auto 0;
}

.c-lp-recommend__chart-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 締めメッセージ */
.c-lp-recommend__message {
  margin-top: 8px;
  text-align: center;
  color: var(--gu-ink);
  font-weight: 700;
}

.c-lp-recommend__message-line {
  margin: 0;
  line-height: 1.1;
  transform: skewX(-9deg);
}

.c-lp-recommend__message-line--01 {
  font-size: 44px;
}

.c-lp-recommend__message-line--02 {
  margin-top: 16px;
  font-size: 40px;
}

.c-lp-recommend__message-line--03 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.c-lp-recommend__message-big {
  font-size: 88px;
  line-height: 1;
}

.c-lp-recommend__message-rest {
  font-size: 36px;
}

.c-lp-recommend__message-mark {
  display: inline-block;
  margin-left: 2px;
  font-size: 48px;
  transform: skewX(-6deg);
}

.c-lp-recommend__message-mark--sm {
  font-size: 40px;
}

@media (max-width: 359px) {
  .c-lp-recommend__balloon-text { font-size: 21px; }
  .c-lp-recommend__chart { transform: scale(.9); transform-origin: top center; }
}


/* ===== c-lp-why-now ===== */
.c-lp-why-now {
  position: relative;
  background: var(--color-white);
  overflow: hidden;
}

/* 背景の街並み画像（見出し背後に薄く敷く） */
.c-lp-why-now__bg {
  position: absolute;
  top: -46px;
  left: 0;
  z-index: 0;
  width: 100%;
  opacity: 0.4;
  pointer-events: none;
}

.c-lp-why-now__bg img {
  display: block;
  width: 100%;
  height: auto;
}

.c-lp-why-now__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* 見出しブロック */
.c-lp-why-now__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.c-lp-why-now__head .c-lp-sec__title {
  font-size: 24px;
  line-height: 31.2px;
}

.c-lp-why-now__lead {
  margin: 4px 0 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
  text-align: center;
  color: var(--gu-ink);
}

/* カード共通 */
.c-lp-why-now__card {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 8px;
  background: var(--color-white);
}

.c-lp-why-now__card--insight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 6px 16px rgba(22, 36, 43, 0.08), 0 2px 3px var(--gu-green-100);
}

.c-lp-why-now__card--bridge {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--gu-green);
  background: var(--gu-green-100);
}

.c-lp-why-now__card-title {
  margin: 0;
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  color: var(--gu-ink);
}

.c-lp-why-now__card-text {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
  text-align: center;
  color: var(--gu-n600);
}

/* チャート（賃料指数 変動率ランキング） */
.c-lp-why-now__chart {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 16px;
  border-radius: 8px;
  background: #f4f7f7;
}

.c-lp-why-now__ranks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.c-lp-why-now__rank {
  display: grid;
  grid-template-columns: 16px 60px 1fr 40px;
  align-items: center;
  column-gap: 4px;
  font-size: 10px;
  line-height: 1;
}

.c-lp-why-now__rank-no,
.c-lp-why-now__rank-city,
.c-lp-why-now__rank-val {
  white-space: nowrap;
}

.c-lp-why-now__rank-val {
  text-align: right;
}

.c-lp-why-now__rank-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #d9e0e0;
}

.c-lp-why-now__rank-bar {
  position: absolute;
  inset: 0 auto 0 0;
  height: 10px;
  border-radius: 5px;
}

/* 大阪（オレンジ強調） */
.c-lp-why-now__rank--osaka .c-lp-why-now__rank-no,
.c-lp-why-now__rank--osaka .c-lp-why-now__rank-city,
.c-lp-why-now__rank--osaka .c-lp-why-now__rank-val {
  font-weight: 700;
  color: var(--gu-orange);
}

.c-lp-why-now__rank--osaka .c-lp-why-now__rank-bar {
  background: var(--gu-orange);
}

/* ニューヨーク（グリーン強調） */
.c-lp-why-now__rank--ny .c-lp-why-now__rank-no,
.c-lp-why-now__rank--ny .c-lp-why-now__rank-city,
.c-lp-why-now__rank--ny .c-lp-why-now__rank-val {
  font-weight: 700;
  color: var(--gu-green);
}

.c-lp-why-now__rank--ny .c-lp-why-now__rank-bar {
  background: var(--gu-green);
}

/* その他（グレー） */
.c-lp-why-now__rank--sub .c-lp-why-now__rank-no,
.c-lp-why-now__rank--sub .c-lp-why-now__rank-city,
.c-lp-why-now__rank--sub .c-lp-why-now__rank-val {
  font-weight: 400;
  color: #6b7979;
}

.c-lp-why-now__rank--sub .c-lp-why-now__rank-bar {
  background: #b2bfbf;
}

/* X軸目盛り（track 列に揃えて等間隔配置） */
.c-lp-why-now__axis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 左: rank-no(16)+gap(4)+city(60)+gap(4)=84px / 右: gap(4)+rank-val(40)=44px */
  padding: 10px 44px 0 84px;
}

.c-lp-why-now__axis span {
  flex: 0 0 auto;
  font-size: 8px;
  line-height: 1;
  color: #99a6a6;
}

/* 凡例・注釈 */
.c-lp-why-now__meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 11.25px;
}

.c-lp-why-now__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.c-lp-why-now__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  line-height: 16.8px;
  color: var(--gu-ink);
  white-space: nowrap;
}

.c-lp-why-now__legend-mark {
  flex-shrink: 0;
  width: 16px;
  height: 4px;
  border-radius: 9999px;
}

.c-lp-why-now__legend-mark--osaka {
  background: var(--gu-orange);
}

.c-lp-why-now__legend-mark--ny {
  background: var(--gu-green);
}

.c-lp-why-now__notes {
  width: 100%;
}

.c-lp-why-now__notes p {
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: var(--gu-n600);
}

/* ブリッジカード見出し */
.c-lp-why-now__bridge-title {
  margin: 0;
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  color: var(--gu-green);
}

.c-lp-why-now__bridge-num {
  font-weight: 800;
}

/* CTA */
.c-lp-why-now__cta {
  width: 100%;
}


/* ===== c-lp-results ===== */
.c-lp-results {
  background: #f4f7f7;
  /* ニュートラル100 */
}

.c-lp-results__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 見出しブロック */
.c-lp-results__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.c-lp-results__lead {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 22.75px;
  color: var(--gu-n600);
  text-align: center;
}

/* ===== カルーセル ===== */
.c-lp-results__carousel {
  position: relative;
  width: 100%;
}

/* slick 初期化前のちらつき抑制（先頭スライドのみ表示） */
.c-lp-results__carousel:not(.slick-initialized) .c-lp-results__slide {
  display: none;
}
.c-lp-results__carousel:not(.slick-initialized) .c-lp-results__slide:first-child {
  display: block;
}

/* スライドカード
   ※ slickは初期化後 .slick-slide に display:block を当てるため flex gap が無効化される。
   　 flexで戦わず「ブロック＋子要素の margin-top」で確実に間隔を確保する。 */
.c-lp-results__slide {
  display: block;
  box-sizing: border-box;
  padding: 20px 16px;
  background: var(--color-white);
  border: 1px solid var(--gu-green-100);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(22, 36, 43, 0.06);
}

/* 各ブロック間の間隔（slickのdisplay上書きに影響されない） */
.c-lp-results__slide > * + * {
  margin-top: 20px;
}

/* スライドの影がslickの overflow:hidden で切れないよう、上下に余白を確保
   （負マージンでレイアウト位置は変えずに影の描画領域だけ広げる） */
.c-lp-results__carousel .slick-list {
  margin-top: -12px;
  margin-bottom: -28px;
  padding-top: 12px;
  padding-bottom: 28px;
}

/* slickのslide直下ラッパ対策：高さ揃え */
.c-lp-results__carousel .slick-slide {
  height: auto;
}
.c-lp-results__carousel .slick-track {
  display: flex;
}

/* --- 上部：Caseラベル + 顧客 --- */
.c-lp-results__slide-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.c-lp-results__case-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gu-green-100);
  color: var(--gu-green);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
}

.c-lp-results__customer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.c-lp-results__avatar {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.c-lp-results__avatar::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 179, 134, 0.2);
  /* グリーン500 / 20% */
  z-index: 0;
}

.c-lp-results__avatar img {
  position: relative;
  z-index: 1;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-white);
}

.c-lp-results__customer-name {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.c-lp-results__name {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--gu-ink);
}

.c-lp-results__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 属性を1つずつラベル化 */
.c-lp-results__meta-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--gu-green-100);
  color: var(--gu-n600);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}

/* --- 実績ボックス（月額差額） --- */
.c-lp-results__achievement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--gu-orange);
  border-radius: 8px;
  background: rgba(255, 122, 69, 0.1);
  /* オレンジ500 / 10% */
}

.c-lp-results__ach-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gu-orange);
  color: var(--color-white);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

.c-lp-results__ach-hero {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--gu-orange);
  white-space: nowrap;
}

.c-lp-results__ach-num {
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
}

/* 「円」は数字より小さく（数字フォントで円だけ大きく見えるのを抑制） */
.c-lp-results__ach-yen {
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: 700;
  margin-left: 1px;
}

.c-lp-results__ach-unit {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}

.c-lp-results__ach-up {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gu-green-100);
  color: var(--gu-green);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* --- After / Before --- */
.c-lp-results__rent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-lp-results__rent-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-lp-results__rent-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
}

.c-lp-results__rent-badge--after {
  background: var(--gu-green);
  color: var(--color-white);
}

.c-lp-results__rent-badge--before {
  background: var(--gu-green-100);
  color: var(--gu-n600);
}

.c-lp-results__rent-amount {
  margin-left: auto;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.c-lp-results__rent-amount--after {
  color: var(--gu-green);
}

.c-lp-results__rent-amount--before {
  color: var(--gu-n600);
}

.c-lp-results__rent-text {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--gu-n600);
}

/* ===== slick コントロール（矢印・ドット） ===== */
.c-lp-results__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(22, 36, 43, 0.16);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.c-lp-results__arrow:hover {
  box-shadow: 0 6px 16px rgba(22, 36, 43, 0.22);
}

.c-lp-results__arrow i {
  display: block;
  color: var(--gu-green);
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}

.c-lp-results__arrow--prev {
  left: -6px;
}

.c-lp-results__arrow--next {
  right: -6px;
}

.c-lp-results__arrow.slick-disabled {
  opacity: 0.4;
  cursor: default;
}



/* ===== c-lp-simulation ===== */
.c-lp-simulation {
  background: var(--gu-green);
}

.c-lp-simulation__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 見出し（グリーン背景のため白文字・アンダーラインなし） */
.c-lp-simulation__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-lp-simulation__head .c-lp-sec__eyebrow {
  color: var(--color-white);
  margin-bottom: 4px;
}

.c-lp-simulation__head .c-lp-sec__title {
  color: var(--color-white);
  font-size: 24px;
  line-height: 31.2px;
}

/* カード共通 */
.c-lp-simulation__card {
  width: 100%;
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
}

.c-lp-simulation__card--result {
  border: 1px solid var(--gu-green);
}

/* カードヘッダー帯（淡グリーン） */
.c-lp-simulation__card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px;
  background: var(--gu-green-100);
}

.c-lp-simulation__card-title {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  color: var(--gu-ink);
  text-align: center;
}

.c-lp-simulation__card-sub {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
  color: var(--gu-n600);
  text-align: center;
}

.c-lp-simulation__card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

/* <button> に共通クラス .c-lp-btn を使う際の初期化（再定義はしない） */
.c-lp-simulation button.c-lp-btn {
  border: 0;
  cursor: pointer;
  font-family: var(--font-family-base);
}

/* 入力グループ */
.c-lp-simulation__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-lp-simulation__label {
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  color: var(--gu-ink);
}

.c-lp-simulation__label--sm {
  font-size: 12px;
  line-height: 16.8px;
}

/* 賃料 / 部屋数 の横並び */
.c-lp-simulation__row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.c-lp-simulation__group--grow {
  flex: 1 0 0;
  min-width: 0;
}

.c-lp-simulation__group--rooms {
  width: 96px;
  flex-shrink: 0;
}

/* フィールド（プルダウン・入力） */
.c-lp-simulation__field {
  position: relative;
  width: 100%;
}

.c-lp-simulation__select {
  width: 100%;
  height: 42px;
  padding: 0 42px 0 16px;
  border: 1.5px solid var(--gu-green-100);
  border-radius: 9999px;
  background: var(--color-white);
  color: var(--gu-ink);
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 未選択のときのエラー強調 */
.c-lp-simulation__select.is-error {
  border-color: var(--gu-orange);
}

/* 計算の内訳（根拠） */
.c-lp-simulation__breakdown {
  border: 1px solid var(--gu-line);
  border-radius: 8px;
  overflow: hidden;
}

.c-lp-simulation__breakdown-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f4f7f7;
  color: var(--gu-ink);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.c-lp-simulation__breakdown-summary::-webkit-details-marker {
  display: none;
}

.c-lp-simulation__breakdown-summary::after {
  content: "\ea13";
  flex: none;
  width: 1em;
  height: 1em;
  color: var(--gu-green);
  font-family: "remixicon";
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.15s ease;
}

.c-lp-simulation__breakdown[open] .c-lp-simulation__breakdown-summary::after {
  content: "\f1af";
  transform: rotate(180deg);
}

.c-lp-simulation__breakdown-list {
  margin: 0;
  padding: 8px 16px 14px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-lp-simulation__breakdown-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--gu-line);
}

.c-lp-simulation__breakdown-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.c-lp-simulation__breakdown-key {
  font-weight: 700;
  font-size: 12px;
  color: var(--gu-n600);
}

.c-lp-simulation__breakdown-key small {
  display: block;
  font-weight: 400;
  font-size: 10px;
  color: var(--gu-n600);
}

.c-lp-simulation__breakdown-key sup {
  font-size: 0.7em;
}

.c-lp-simulation__breakdown-val {
  font-weight: 700;
  font-size: 13px;
  color: var(--gu-ink);
  word-break: break-all;
}

/* もう一度診断する */
.c-lp-simulation__redo {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px auto 0;
  padding: 8px 4px;
  background: none;
  border: 0;
  color: var(--gu-green);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.c-lp-simulation__redo-icon {
  flex: none;
  font-size: 16px;
  line-height: 1;
}

/* SIMULATIONセクションのボタンだけブルー系（他セクションのCTAはオレンジのまま） */
.c-lp-simulation .c-lp-btn {
  background: #2f80ed;
  box-shadow: none;
}

.c-lp-simulation .c-lp-btn:hover {
  background: #1c68d6;
  box-shadow: none;
}

.c-lp-simulation .c-lp-simulation__toggle-btn.is-active {
  background: rgba(47, 128, 237, 0.1);
  border-color: #2f80ed;
  color: #2f80ed;
}

.c-lp-simulation__redo {
  color: #2f80ed;
}

/* 診断後（結果カード）のCTAはオレンジに戻す */
.c-lp-simulation .c-lp-simulation__card--result .c-lp-btn {
  background: var(--gu-orange);
  box-shadow: none;
}

.c-lp-simulation .c-lp-simulation__card--result .c-lp-btn:hover {
  background: var(--gu-orange-dark);
  box-shadow: none;
}

.c-lp-simulation__field-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  width: 21px;
  height: 21px;
  color: var(--gu-green);
  font-size: 21px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

/* 物件タイプ トグル */
.c-lp-simulation__toggle {
  display: flex;
  gap: 8px;
}

.c-lp-simulation__toggle-btn {
  flex: 1 0 0;
  min-width: 0;
  min-height: 42px;
  padding: 9px 4px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: #f4f7f7;
  color: var(--gu-n600);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.c-lp-simulation__toggle-btn.is-active {
  background: rgba(255, 122, 69, 0.1);
  border-color: var(--gu-orange);
  color: var(--gu-orange);
}

/* 注釈 */
.c-lp-simulation__note {
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: var(--gu-n600);
}

.c-lp-simulation__note--center {
  text-align: center;
}

/* ===== 診断結果 ===== */
.c-lp-simulation__result-lead {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--gu-ink);
  text-align: center;
}

.c-lp-simulation__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  text-align: center;
}

.c-lp-simulation__hero-line {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  color: var(--gu-green);
  white-space: nowrap;
}

.c-lp-simulation__hero-num {
  font-weight: 800;
  font-size: 40px;
  line-height: 44px;
}

.c-lp-simulation__hero-unit {
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
}

.c-lp-simulation__hero-sub {
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  line-height: 16.8px;
  color: #6b7280;
}

/* 現在の賃料 / 相場の行 */
.c-lp-simulation__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-lp-simulation__result-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-lp-simulation__result-row-label {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 16.8px;
  color: var(--gu-n600);
}

.c-lp-simulation__result-row-value {
  margin: 0;
  padding: 10px 12px;
  border-radius: 9999px;
  background: #f4f7f7;
  color: var(--gu-ink);
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
}

.c-lp-simulation__result-row--market .c-lp-simulation__result-row-label {
  color: var(--gu-green);
}

.c-lp-simulation__result-row--market .c-lp-simulation__result-row-value {
  background: var(--gu-green-100);
  color: var(--gu-green);
}

/* 合計サマリー */
.c-lp-simulation__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 1.5px solid var(--gu-green);
  border-radius: 8px;
  background: var(--gu-green-100);
}

.c-lp-simulation__summary-text {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
  color: var(--gu-orange);
  text-align: center;
}

.c-lp-simulation__summary-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--gu-orange);
}

.c-lp-simulation__summary-total-label {
  font-weight: 700;
  font-size: 12px;
  line-height: 16.8px;
}

.c-lp-simulation__summary-total-value {
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
}

.c-lp-simulation__summary-total-num {
  font-weight: 800;
  font-size: 32px;
  line-height: 38.4px;
}

/* アクション（キャッチ + CTA） */
.c-lp-simulation__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.c-lp-simulation__action .c-lp-btn-catch {
  margin-bottom: 0;
}

.c-lp-simulation__action .c-lp-btn {
  max-width: 336px;
}


/* ===== c-lp-why ===== */
.c-lp-why,
.c-lp-why *,
.c-lp-why *::before,
.c-lp-why *::after {
  box-sizing: border-box;
}

.c-lp-why {
  background: var(--color-white);
}

.c-lp-why__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 見出し */
.c-lp-why__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.c-lp-why__head .c-lp-sec__eyebrow {
  font-size: 16px;
  line-height: 21px;
}

.c-lp-why__title {
  margin: 0;
  font-weight: 800;
  font-size: 24px;
  line-height: 31.2px;
  text-align: center;
  color: var(--gu-ink);
}

/* 理由カード（3枚） */
.c-lp-why__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-lp-why__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-white);
  border-radius: 8px;
}

.c-lp-why__card-image {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 56px;
  height: 56px;
  /* overflow:hidden は付けない（下の光彩リングがクリップされるため、角丸は img 側で処理） */
}

/* .c-lp-results__avatar::before と同じ、グリーン500 20% のソフトな光彩リング */
.c-lp-why__card-image::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 179, 134, 0.2);
  z-index: 0;
}

.c-lp-why__card-image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.c-lp-why__card-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c-lp-why__card-title {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gu-ink);
}

.c-lp-why__card-desc {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gu-ink);
}

/* まとめ（グリーン枠） */
.c-lp-why__note {
  padding: 17px;
  background: var(--gu-green-100);
  border: 1px solid var(--gu-green);
  border-radius: 8px;
}

.c-lp-why__note-text {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  color: var(--gu-ink);
}

/* CTA */
.c-lp-why__cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-lp-why__cta .c-lp-btn-catch {
  margin-bottom: 0;
}


/* ===== c-lp-options ===== */
.c-lp-options {
  background: var(--gu-green-100);
}

.c-lp-options__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 見出しブロック（Figma: eyebrow + heading--002 + lead） */
.c-lp-options__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.c-lp-options__eyebrow {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  color: var(--gu-green);
}

.c-lp-options__title {
  margin: 0;
  font-weight: 800;
  font-size: 24px;
  line-height: 31.2px;
  color: var(--gu-ink);
}

.c-lp-options__lead {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
  color: var(--gu-n600);
}

/* カード一覧 */
.c-lp-options__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-lp-options__card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  background: var(--color-white);
}

.c-lp-options__thumb {
  flex-shrink: 0;
  width: 100px;
  height: 87px;
  border-radius: 8px;
  overflow: hidden;
}

.c-lp-options__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-lp-options__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c-lp-options__card-title {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gu-ink);
  word-break: break-word;
}

.c-lp-options__card-desc {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gu-ink);
  word-break: break-word;
}


/* ===== c-lp-flow ===== */
.c-lp-flow {
  background: var(--color-white);
}

.c-lp-flow__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 見出し */
.c-lp-flow__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.c-lp-flow__eyebrow {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  color: var(--gu-green);
}

.c-lp-flow__title {
  margin: 0;
  font-weight: 800;
  font-size: 24px;
  line-height: 31.2px;
  color: var(--gu-ink);
}

.c-lp-flow__subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
  color: var(--gu-n600);
}

/* ステップ一覧 */
.c-lp-flow__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-lp-flow__step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ステップカード */
.c-lp-flow__card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--gu-line);
  border-radius: 8px;
}

.c-lp-flow__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--gu-green);
  color: var(--color-white);
  font-family: var(--gu-font-num);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}

.c-lp-flow__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-lp-flow__step-title {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  color: var(--gu-ink);
}

.c-lp-flow__step-desc {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
  color: var(--gu-n600);
}

/* ステップ間の矢印 */
.c-lp-flow__arrow {
  display: flex;
  justify-content: center;
}

.c-lp-flow__arrow i {
  display: block;
  color: var(--gu-green);
  font-size: 24px;
  line-height: 1;
}


/* ===== c-lp-contact ===== */
.c-lp-contact {
  background: var(--gu-green-100);
}

.c-lp-contact__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.c-lp-contact__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.c-lp-contact__title {
  margin: 0;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
  color: var(--gu-ink);
}

.c-lp-contact__lead {
  margin: 0;
  font-size: 16px;
  line-height: 22.75px;
  text-align: center;
  color: var(--gu-n600);
}

/* 信頼バッジ */
.c-lp-contact__badges {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-white);
  border-radius: 8px;
}

.c-lp-contact__badge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: var(--gu-ink);
}

.c-lp-contact__badge:nth-child(2) {
  border-left: 1px solid var(--gu-line);
  border-right: 1px solid var(--gu-line);
}

.c-lp-contact__badge-icon {
  width: 18px;
  height: 14px;
  color: var(--gu-green);
  font-size: 20px;
  line-height: 1;
}

/* フォームカード */
.c-lp-contact__form,
.c-lp-contact .buf-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(22, 36, 43, 0.08);
}

.c-lp-contact__form .buf-form {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.c-lp-form__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-lp-form__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gu-ink);
}

.c-lp-form__req,
.c-lp-contact .c-form__required {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--gu-orange);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.c-lp-form__label--privacy {
  justify-content: center;
}

/* 任意ラベル（グレー） */
.c-lp-form__req--optional {
  background: var(--gu-n600);
}

/* 必須ラベルの状態連動：エラー（赤）／OK（グリーン） */
.c-lp-form__req.is-error,
.c-lp-form__req.is-invalid,
.c-lp-contact .c-form__required.is-invalid {
  background: #e5484d !important;
}

.c-lp-form__req.is-ok,
.c-lp-form__req.is-valid,
.c-lp-contact .c-form__required.is-valid {
  background: var(--gu-green) !important;
}

/* 入力欄（ピル） */
.c-lp-form__input,
.c-lp-form__control {
  width: 100%;
  height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--gu-green-100);
  border-radius: 9999px;
  background: var(--color-white);
  font-family: inherit;
  font-size: 16px;
  color: var(--gu-ink);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.c-lp-form__input::placeholder {
  color: #6b7280;
}

.c-lp-form__input:focus,
.c-lp-form__control:focus,
.c-lp-form__textarea:focus {
  outline: none;
  border-color: var(--gu-green);
  background: var(--color-white);
}

/* セレクト（シミュレーションと同じく img シェブロンを表示） */
.c-lp-form__select {
  position: relative;
}

.c-lp-form__select-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  width: 18px;
  height: 18px;
  color: var(--gu-green);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.c-lp-form__control {
  padding-right: 44px;
  color: var(--gu-ink);
}

.c-lp-form__control:required:invalid {
  color: #6b7280;
}

/* 物件タイプ トグル（ラジオ：シミュレーションの c-lp-simulation__toggle と同じ見た目） */
.c-lp-form__toggle {
  display: flex;
  gap: 8px;
}

.c-lp-form__toggle-btn,
.c-lp-form__toggle .buf-form__radio {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 4px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: #f4f7f7;
  color: var(--gu-n600);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ネイティブradioは視覚的に隠す（フォーカスはlabelで担保） */
.c-lp-form__toggle-btn input,
.c-lp-form__toggle .buf-form__radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.c-lp-form__toggle-btn.is-active,
.c-lp-form__toggle-btn:has(input:checked),
.c-lp-form__toggle .buf-form__radio:has(input:checked) {
  background: rgba(255, 122, 69, 0.1);
  border-color: var(--gu-orange);
  color: var(--gu-orange);
}

.c-lp-form__toggle-btn:focus-within,
.c-lp-form__toggle .buf-form__radio:focus-within {
  border-color: var(--gu-orange);
}

/* 任意項目 */
.c-lp-form__optional {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--gu-line);
}

.c-lp-form__optional-note {
  margin: 0;
  font-size: 16px;
  line-height: 22.75px;
  color: var(--gu-ink);
}

.c-lp-form__cols {
  display: flex;
  gap: 16px;
}

.c-lp-form__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* テキストエリア */
.c-lp-form__textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--gu-green-100);
  border-radius: 16px;
  background: var(--color-white);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gu-ink);
  resize: vertical;
}

.c-lp-form__textarea::placeholder {
  color: #6b7280;
}

/* プライバシー同意 */
.c-lp-form__privacy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.c-lp-form__check-label,
.c-lp-form__privacy .buf-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.c-lp-form__check-label input,
.c-lp-form__privacy .buf-form__checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.c-lp-form__privacy .buf-form__checkbox-group {
  display: inline-flex;
}

.c-lp-form__check-box {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  /* 未チェック時は目立つようオレンジ枠 */
  border: 2px solid var(--gu-orange);
  background: var(--color-white);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.c-lp-form__check-label input:checked + .c-lp-form__check-box {
  background: var(--gu-green);
  border-color: var(--gu-green);
}

.c-lp-form__check-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

.c-lp-form__check-label input:checked + .c-lp-form__check-box::after {
  transform: rotate(45deg) scale(1);
}

.c-lp-form__check-text {
  font-size: 14px;
  color: var(--gu-ink);
}

.c-lp-form__privacy .buf-form__checkbox-text {
  --gu-form-checkbox-size: 28px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gu-ink);
}

.c-lp-form__privacy .buf-form__checkbox-text::before {
  content: "";
  position: relative;
  flex-shrink: 0;
  width: var(--gu-form-checkbox-size);
  height: var(--gu-form-checkbox-size);
  border: 1px solid var(--gu-orange);
  border-radius: 9999px;
  background: var(--color-white);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.c-lp-form__privacy .buf-form__checkbox-text::after {
  content: "";
  position: absolute;
  left: calc(var(--gu-form-checkbox-size) * 0.36);
  top: calc(var(--gu-form-checkbox-size) * 0.25);
  width: calc(var(--gu-form-checkbox-size) * 0.25);
  height: calc(var(--gu-form-checkbox-size) * 0.43);
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

.c-lp-form__privacy .buf-form__checkbox input:checked + .buf-form__checkbox-text::before {
  background: var(--gu-orange);
  border-color: var(--gu-orange);
}

.c-lp-form__privacy .buf-form__checkbox input:checked + .buf-form__checkbox-text::after {
  transform: rotate(45deg) scale(1);
}

.c-lp-form__policy-link {
  color: var(--gu-orange);
  text-decoration: underline;
}

.c-lp-form__policy {
  width: 100%;
  font-size: 12px;
  color: var(--gu-n600);
}

.c-lp-form__policy summary {
  cursor: pointer;
  color: var(--gu-n600);
  text-align: center;
}

.c-lp-form__policy-body {
  margin-top: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 12px;
  border-radius: 8px;
  background: #f4f7f7;
  line-height: 1.7;
}

.c-lp-form__policy-body p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.7;
}

/* エラー */
.c-lp-form__error {
  display: block;
  color: #e0483d;
  font-size: 12px;
  font-weight: 700;
}

/* エラー状態のフィールド */
.c-lp-form__input.is-error,
.c-lp-form__select.is-error .c-lp-form__control,
.c-lp-form__textarea.is-error {
  border-color: #e0483d;
  background: #fff;
}

.c-lp-form__row.is-error .c-lp-form__input,
.c-lp-form__row.is-error .c-lp-form__control,
.c-lp-form__row.is-error .c-lp-form__textarea {
  border-color: #e0483d;
}

/* 送信ブロック */
.c-lp-form__submit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.c-lp-form__submit .c-lp-btn {
  width: 100%;
  max-width: none;
}

.c-lp-form__submit .buf-form__button.c-lp-btn::after {
  content: "\ea6c";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-family: "remixicon";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.c-lp-contact .buf-form .c-lp-form__input,
.c-lp-contact .buf-form .c-lp-form__control {
  width: 100%;
  max-width: none;
  height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--gu-green-100);
  border-radius: 9999px;
  background: var(--color-white);
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gu-ink);
  appearance: none;
  -webkit-appearance: none;
}

.c-lp-contact .buf-form .c-lp-form__control {
  padding-right: 44px;
}

.c-lp-contact .buf-form .c-lp-form__textarea {
  width: 100%;
  max-width: none;
  min-height: 136px;
  padding: 14px 16px;
  border: 1.5px solid var(--gu-green-100);
  border-radius: 16px;
  background: var(--color-white);
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gu-ink);
}

.c-lp-contact .buf-form .c-lp-form__input:focus,
.c-lp-contact .buf-form .c-lp-form__control:focus,
.c-lp-contact .buf-form .c-lp-form__textarea:focus {
  outline: none;
  border-color: var(--gu-green);
  background: var(--color-white);
}

.c-lp-contact .buf-form .c-lp-form__select {
  position: relative;
}

.c-lp-contact .buf-form .c-lp-form__select::after {
  content: "\ea4e";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  color: var(--gu-green);
  font-family: "remixicon";
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.c-lp-contact .buf-form .c-lp-form__select-icon {
  display: none;
}

.c-lp-contact .buf-form .c-lp-form__submit .c-lp-btn-catch::before,
.c-lp-contact .buf-form .c-lp-form__submit .c-lp-btn-catch::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.c-lp-contact .buf-form .c-lp-form__submit .c-lp-btn-catch::before {
  background-image: url("../../assets/images/lp/growth-up-001/c-lp-fv__deco-left.svg");
}

.c-lp-contact .buf-form .c-lp-form__submit .c-lp-btn-catch::after {
  background-image: url("../../assets/images/lp/growth-up-001/c-lp-fv__deco-right.svg");
}

.c-lp-contact .buf-form .c-lp-form__submit .buf-form__button.c-lp-btn,
.c-lp-contact .buf-form .c-lp-form__submit .buf-form__button.c-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  min-height: 59px;
  margin-inline: auto;
  padding: 14px 24px;
  border: 0;
  border-radius: 9999px;
  background: var(--gu-orange);
  box-shadow: none;
  color: var(--color-white);
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  animation: poyopoyo 2s ease-out infinite;
}

.c-lp-contact .buf-form .c-lp-form__submit .buf-form__button.c-lp-btn:hover,
.c-lp-contact .buf-form .c-lp-form__submit .buf-form__button.c-form__submit:hover {
  border: 0;
  background: var(--gu-orange-dark);
  color: var(--color-white);
  animation: none;
  transform: translateY(-2px);
  box-shadow: none;
}

.c-lp-contact .buf-form .c-lp-form__submit .buf-form__button.c-form__submit::before {
  content: none;
  display: none;
}


/* ===== c-lp-company ===== */
.c-lp-company {
  /* ニュートラル100（Figma: #F4F7F7）※トークン未定義のため実値指定 */
  background: #f4f7f7;
}

.c-lp-company__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}

/* 見出し */
.c-lp-company__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.c-lp-company__head .c-lp-sec__title {
  font-size: 24px;
  line-height: 1.3;
}

/* 会社概要カード */
/* 会社イメージ */
.c-lp-company__image {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.c-lp-company__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.c-lp-company__card {
  width: 100%;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--gu-line);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(22, 36, 43, 0.06);
  overflow: hidden;
}

.c-lp-company__table {
  width: 100%;
  margin: 0;
}

.c-lp-company__row {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--gu-line);
}

.c-lp-company__row:last-child {
  border-bottom: 0;
}

.c-lp-company__label,
.c-lp-company__data {
  margin: 0;
  padding: 18px 12px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  text-align: left;
}

.c-lp-company__label {
  flex: 0 0 96px;
  color: var(--gu-n600);
}

.c-lp-company__data {
  flex: 1 1 0;
  min-width: 0;
  color: var(--gu-ink);
  word-break: break-word;
}

/* ============================================================
 フッター（Figma: node 1-590）
============================================================ */
.c-lp-footer {
  background: var(--gu-ink);
  padding: 48px 16px;
  color: #fff;
}

.c-lp-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 600px;
  margin: 0 auto;
}

.c-lp-footer__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-lp-footer__notes-title {
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
}

.c-lp-footer__notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-lp-footer__notes-list li {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

.c-lp-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 33px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.c-lp-footer__logo {
  display: block;
  width: 114px;
  height: 25px;
}

.c-lp-footer__copyright {
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.l-footer__copyright {
  padding-block: 24px;
}

@media screen and (min-width: 768px) {
  .l-footer__copy {
    text-align: center;
  }
}

/* ============================================================
 STICKY BAR：下部固定CTA（Figma: node 1-613）
============================================================ */
.c-lp-sticky {
  position: fixed;
  left: 50%;
  bottom: 0;
  /* 初期は画面下に隠しておき、FVを過ぎたら .is-visible でせり上げる */
  transform: translate(-50%, 100%);
  transition: transform 0.3s ease;
  z-index: 100;
  display: flex;
  width: 100%;
  /* スマホ：全幅。タブレット以上でページ幅（402px）に合わせる */
  max-width: 100%;
  height: 64px;
  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.05);
}

.c-lp-sticky.is-visible {
  transform: translate(-50%, 0);
}

@media (min-width: 768px) {
  .c-lp-sticky {
    max-width: var(--gu-max);
  }
}

.c-lp-sticky__btn {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--color-white);
  text-decoration: none;
}

.c-lp-sticky__btn--tel {
  background: var(--gu-green);
}

.c-lp-sticky__btn--cta {
  padding-inline: 24px;
  background: var(--gu-orange);
}

.c-lp-sticky__btn--cta:hover {
  background: var(--gu-orange-dark);
}

.c-lp-sticky__label {
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
}

.c-lp-sticky__arrow {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: currentColor;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.c-lp-sticky__arrow i {
  font-size: 24px;
  line-height: 1;
}