/* SP限定改行 — デスクトップでは非表示 */
.sp-br { display: none; }
@media (max-width: 767px) { .sp-br { display: inline; } }


/* ═══════════════════════════════════════════════════════════
   本文タイポグラフィ（pokewaku.com 完全実測準拠）
   ───────────────────────────────────────────────────────────
   全詳細ページ + TOP ページの本文クラスに統一適用。
   !important で HTML 内インライン <style> ブロックの上書きを防止。

   pokewaku.com 実測値：
   - color           #5D5D5D
   - font-size       1.095rem（≒14.78px、html 13.5px 換算）
   - font-weight     350（Variable軸の細身）
   - line-height     2.2（広い行間）
   - letter-spacing  0.02em
   - text-align      justify（両端揃え）

   注: text-align: center を維持したい subtitle / caption は
       下のフォローアップルールで !important 付きで center に戻す。
═══════════════════════════════════════════════════════════ */

/* ─── TOP ページ本文 ─── */
.myth-ad-body p,
.myth-ad-quote__sub,
.myth-ad-stat__caption,
.mech-body p,
.zero__body p,
.wave-lead,
.style-card__desc,
.safety-pillar__desc,
.voice__sub,
.sup-lead,
.sup-item__desc,
.benefit-banner__desc,
.howto-step__note,
.req-eligibility__sub,
.req-ng-note,
.req-ids-note,
.req-reason-note,
.req-footer__safe-text,
.faq-item__a-inner,
.cert-section__lead,
.cert-supplement__p,
.rw-plan__subtitle,
.rw-reward-block__formula p,

/* ─── 詳細ページ FV lead（全 18 ページ）─── */
.guarW-lead,          /* guarantee.html */
.ab-lead,             /* about.html */
.nu-lead, .zw-lead, .cb-lead, .sf-lead, .an-lead, .sp-lead,
.hts-lead, .rq-lead, .ic-lead, .nv-lead, .hw-lead, .st-lead,
.sj-lead, .eq-lead, .rw-lead, .fq-lead,

/* ─── 詳細ページ本文（全クラス網羅）─── */
.detail-narrative__text,
.phone-mini__body,
.phone-section__text,
/* dn-shared components（複数ページ共通） */
.dn-trio__desc,
/* guarantee.html */
.guarW-item__txt,
/* equipment.html */
.eq-rules__item p,
.eq-rules__dd,
.eq-timeline__desc,
.eq-device__spec,
/* reward.html */
.rw-style__desc,
.rw-style__formula,
.rw-info__val,
/* safety.html */
.sf-section__body,
.sf-section__list li,
.sf-triple__desc,
/* support.html */
.sp-staff__bio,
.sp-service__desc,
.sp-mental__desc,
/* anonymity.html */
.an-scenario__answer,
.an-layer__desc,
.an-zero__caption,
/* no-undress.html */
.nu-chapter__body,
.nu-system__step-desc,
.nu-benefits li,
/* zero-waiting.html */
.zw-chapter__body,
.zw-compare__desc,
.zw-stress li,
/* cafe-broadcast.html */
.cb-chapter__body,
.cb-rule__body,
/* how-to-start.html */
.hts-step__desc,
.hts-step__list li,
.hts-notes__list li,
.hts-ng__list li,
/* requirements.html */
.rq-detail__val,
.rq-check__list li,
.rq-ng__list li,
/* idcard.html */
.ic-banner__caption,
.ic-item__body,
.ic-worries__a,
/* inexperienced.html */
.nv-banner__caption,
.nv-worries__a,
.nv-steps__desc,
.nv-voice__body,
/* housewife.html */
.hw-slot__desc,
.hw-tax__text,
.hw-voice__body,
/* student.html */
.st-slot__desc,
.st-id__text,
.st-worries__a,
.st-voice__body,
/* side-job.html */
.sj-slot__desc,
.sj-tax__text,
.sj-worries__a,
.sj-voice__body,
/* guarantee.html FAQ + 注記 */
.gp-faq__a,
.guarW-notes,
/* faq.html */
.fq-item__body,
/* about.html */
.ab-mission__text {
  color:          var(--text-body)  !important;   /* #5D5D5D */
  font-size:      1.095rem          !important;   /* pokewaku 実測値（例外 raw 値） */
  font-weight:    var(--fw-light)   !important;   /* 350 */
  line-height:    var(--lh-loose)   !important;   /* 2.2 */
  letter-spacing: var(--ls-body)    !important;   /* 0.02em */
  text-align:     justify           !important;
}

/* ─── 中央揃えに戻す例外（FV lead 以外で center が必要なもの）─── */
.rw-plan__subtitle,
.myth-ad-quote__sub,
.myth-ad-stat__caption,
.rw-reward-block__formula p {
  text-align: center !important;
}

/* ─── 詳細ページ FAQ Q 見出し ─── */
.gp-faq__q {
  font-size:      var(--fs-xl)     !important;  /* 18px（↑fs-lg 16px から拡大） */
  font-weight:    var(--fw-bold)   !important;
  color:          var(--text)      !important;
  letter-spacing: var(--ls-body)   !important;
  line-height:    var(--lh-normal) !important;
}
.gp-faq__q::before {
  color:       var(--accent);
  font-family: var(--font-num);
  font-size:   var(--fs-3xl);     /* 26px（↑fs-2xl 22px から拡大） */
  font-weight: var(--fw-bold);
}

/* ─── 詳細ページ H3 サブ見出し ─── */
.detail-narrative__title--sub {
  font-size:      var(--fs-lg)      !important;
  letter-spacing: var(--ls-heading) !important;
  line-height:    var(--lh-snug)    !important;
}

/* ─── 詳細ページ FV hero — 全サイズ共通の水平余白 ───────────────
   TOP page 本文（.myth-ad-body / .wave-lead）は max-width: 86% + margin: auto で
   SP / PC ともに約 40〜44px の余白を確保している。
   詳細ページ hero も同等の余白を持つよう、hero に 20px の内側 padding を設定。

   余白の合計：
     SP（375px）: --section-px 20px + hero 20px = 40px
     SP（430px）: --section-px 20px + hero 20px = 40px
     PC（480px）: --section-px 24px + hero 20px = 44px（TOP FV の 44px と一致）
──────────────────────────────────────────────────────────────── */
.ab-hero, .guarW-hero, .rw-hero, .eq-hero, .sf-hero, .sp-hero,
.hts-hero, .rq-hero, .nu-hero, .zw-hero, .cb-hero, .nv-hero,
.hw-hero, .st-hero, .sj-hero, .an-hero, .ic-hero, .fq-hero,
.pp-hero, .tm-hero {
  padding-left: 20px;
  padding-right: 20px;
}


/* ─── 詳細ページ本文 横余白（TOP ページ準拠 max-width:86% + margin:auto）─── */
/* TOP: .wave-lead/.zero__body → max-width:86% + margin:0 auto（sections.css）  */
/* 詳細ページは従来 margin: 0 0 Npx; のみ → 左右 auto を追加して同等余白を確保  */
.guarW-lead, .ab-lead, .nu-lead, .zw-lead, .cb-lead, .sf-lead,
.an-lead, .sp-lead, .hts-lead, .rq-lead, .ic-lead, .nv-lead,
.hw-lead, .st-lead, .sj-lead, .eq-lead, .rw-lead, .fq-lead,
.guarW-notes,
/* .gp-faq__q / .gp-faq__a は .gp-faq コンテナ(86%)で一括制御 → 個別指定なし */
.sf-section__body,
.nu-chapter__body,
.zw-chapter__body,
.cb-chapter__body {
  max-width:    86% !important;
  margin-left:  auto !important;
  margin-right: auto !important;
}
/* ※ .detail-narrative__text / .ab-mission__text はカード内（padding:20px）のため除外
      カード自体の padding が横余白を担保（SP: 20+20=40px で TOP と一致）          */


/* ─── カード内本文 PC 補正（単一カラムカード各種）──────────────────────────
   PC col=480px、--section-px=24px での目標左余白 = 24 + 30.25 = 54.25px
   カード padding 別に max-width を調整し auto margin で左右を補正する。

   95%（20px card / border-left4+pad16 effective）:
     sec(24) + card(20) + auto(9.8)  = 53.8px  ≈ 54.25px ✓
   94%（18px card）:
     sec(24) + card(18) + auto(11.9) = 53.9px  ≈ 54.25px ✓
   96%（22px card / border-left4+pad18 effective）:
     sec(24) + card(22) + auto(7.75) = 53.75px ≈ 54.25px ✓
──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* ── 20px padding カード（95%）── */
  .detail-narrative__text,   /* components.css .detail-narrative: padding 22px 20px */
  .ab-mission__text,         /* about.html .ab-mission card */
  .rw-style__desc,           /* reward.html .rw-style: padding 20px 20px 22px */
  .rq-detail__val {          /* requirements.html .rq-detail__item: border-left4+pad16 */
    max-width:    95% !important;
    margin-left:  auto !important;
    margin-right: auto !important;
  }

  /* ── 18px padding カード（94%）── */
  .zw-compare__desc,         /* zero-waiting.html .zw-compare__row: padding 16px 18px */
  .an-scenario__answer,      /* anonymity.html .an-scenario: padding 16px 18px */
  .sp-mental__desc,          /* support.html .sp-mental: padding 20px 18px */
  .ic-item__body,            /* idcard.html .ic-item: padding 16px 18px */
  .an-zero__caption,         /* anonymity.html .an-zero: padding 24px 18px */
  .hw-tax__text,             /* housewife.html .hw-tax: padding 20px 18px */
  .st-id__text,              /* student.html .st-id: padding 20px 18px */
  .sj-tax__text,             /* side-job.html .sj-tax: padding 20px 18px */
  .ic-worries__a,            /* idcard.html .ic-worries li: padding 16px 18px */
  .nv-worries__a,            /* inexperienced.html .nv-worries li: padding 16px 18px */
  .st-worries__a,            /* student.html .st-worries li: padding 16px 18px */
  .sj-worries__a {           /* side-job.html .sj-worries li: padding 16px 18px */
    max-width:    94% !important;
    margin-left:  auto !important;
    margin-right: auto !important;
  }

  /* ── 22px padding カード（96%）── */
  .sp-staff__bio,            /* support.html .sp-staff: padding 26px 22px */
  .guarW-item__txt,          /* guarantee.html .guarW-block: padding 26px 22px 22px */
  .cb-rule__body {           /* cafe-broadcast.html .cb-rule: border-left4+pad18 */
    max-width:    96% !important;
    margin-left:  auto !important;
    margin-right: auto !important;
  }

}


/* ═══════════════════════════════════════
   TABLET — 768px〜1023px
   (single column already, just padding)
═══════════════════════════════════════ */
@media (max-width: 1023px) {
  :root {
    --section-px: 28px;
  }
}


/* ═══════════════════════════════════════
   MOBILE — max 767px
═══════════════════════════════════════ */
@media (max-width: 767px) {
  /* pokewaku.com 完全一致 — html を viewport 連動に切替 */
  html { font-size: 3.125vw; }

  :root {
    --section-py: 44px;
    --section-px: 20px;     /* TOP ページ FV と統一（全 16 詳細ページも自動的に同値に） */
    --floating-h: 56px;
  }

  /* body needs bottom padding for floating CTA */
  body { padding-bottom: var(--floating-h); }

  /* header */
  .site-header__inner { padding: 0 16px; }
  .site-header__logo  { font-size: var(--fs-sm); }

  /* FV */
  .sec--fv .sec__inner { padding: 28px 20px 44px; }
  .fv__h1  { font-size: var(--fs-5xl); }
  .fv__h1-sub { font-size: var(--fs-xl); }
  .fv__sub { font-size: var(--fs-base); }
  .fv__badge { font-size: var(--fs-2xs); padding: 6px 11px; }
  .fv__trust-badges { font-size: var(--fs-2xs); gap: 4px 10px; }

  .fv__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 14px 12px;
  }
  .fv__stat-div { display: none; }
  .fv__stat-num { font-size: var(--fs-2xl); }
  .fv__stat-label { font-size: var(--fs-3xs); }

  /* Myth (SEC 02) — 旧クラスは削除済み（HTMLで未使用） */

  /* Style grid → single column */
  .style-grid { grid-template-columns: 1fr; }
  .style-card:first-child { grid-column: auto; }

  /* Style tab — SP（iPhone SE 375px で "必要な機材は3点" の "点" 改行を防止） */
  .style-tab { padding: 11px 6px 9px; }
  .style-tab__label {
    font-size: var(--fs-2xs);
    white-space: nowrap;
    letter-spacing: var(--ls-default);
  }

  /* Compare table SP（cmp-cell は 11px に統一 + nowrap で SP 狭幅でも改行抑止） */
  .compare-table thead th    { font-size: var(--fs-2xs); padding: 12px 6px 10px; }
  .cmp-th-label              { width: 22%; }
  .cmp-th-ripple             { width: 42%; }
  .cmp-th-other              { width: 36%; }
  .cmp-row-label             { font-size: var(--fs-2xs); padding: 14px 8px; }
  .cmp-cell                  { font-size: var(--fs-2xs); padding: 14px 6px; white-space: nowrap; }
  .cmp-mark                  { width: 22px; height: 22px; font-size: var(--fs-2xs); }

  /* Rate section SP */
  .rate-row__pt { font-size: var(--fs-sm); }
  .rate-row__dots { letter-spacing: var(--ls-heading); }

  /* Simulator */
  .simulator { padding: 22px 16px 20px; }
  .sim-result__box { font-size: var(--fs-xl); }

  /* Conditions SP */
  .cond-docs__grid { grid-template-columns: repeat(2, 1fr); }
  .cond-reason__num { font-size: var(--fs-2xl); width: 32px; }

  /* Safety pillars → single column */
  .safety-pillars { grid-template-columns: 1fr; }
  .safety-pillar__visual { height: 160px; }

  /* Benefits → single column */
  .benefit-cards { grid-template-columns: 1fr; }

  /* Benefit banner SP（font-size / line-height は responsive.css 先頭のグローバル本文ルールを継承） */
  .benefit-banner { padding: 20px 16px; }
  .benefit-banner__phone { height: 150px; }

  /* Voice grid → horizontal swipe, card = 84cqw shows peek of next（PC でもカラム基準でスケール） */
  .voice-grid { gap: 12px; }
  .voice-card { flex: 0 0 84cqw; }

  /* Step blocks SP */
  .step-block__imgwrap { flex: 0 0 100px; width: 100px; }
  .step-block__img { width: 100%; height: auto; }
  .step-block__wm { font-size: var(--fs-num-md); }
  .step-block__main { font-size: var(--fs-lg); }
  .step-block__sep { margin-top: 120px; padding: 8px 0 6px; }
  .step-block + .step-block .step-block__head { margin-top: -92px; }
  /* Tail SP: left: 6px → x=74, rotate(22deg) → tip x=74+sin22°×40≈89≈img-center(90) */
  .step-block__bubble::before { left: 6px; }
  .step-block__bubble::after  { left: 7px; }
  /* Reduce slide distance on SP */
  .step-block--from-left  { transform: translateX(-24px); }
  .step-block--from-right { transform: translateX( 24px); }

  /* CTA pair → SP でも横並び維持・はみ出さないテキストサイズ */
  .cta-pair { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .cta-pair .btn { flex: 1 1 0; min-width: 0; padding: 14px 8px; font-size: var(--fs-xs); }
  .cta-pair .btn--lg { font-size: var(--fs-sm); padding: 16px 8px; }

  /* Inline CTA */
  .inline-cta { padding: 24px var(--section-px); }

  /* Floating CTA text size */
  .floating-cta__line,
  .floating-cta__form { font-size: var(--fs-sm); gap: 5px; }

  /* Footer */
  .footer__top { flex-direction: column; gap: 16px; }
  .footer__links { flex-direction: column; gap: 8px; }

  /* HOW TO START steps (Pattern B)（.howto-step__note は本文ルールを継承） */
  .howto-step { margin-bottom: 64px; }
  .howto-step__header-label { font-size: var(--fs-xl); }
  .howto-step__title { font-size: var(--fs-lg); }
  .howto-step__txt { padding-right: 32px; }
  /* SP では photo 列を狭めて txt 列を広げ、STEP 01〜02 の元の幅で 4 ステップ統一
     min-height は sections.css の base ルールから継承（PC/SP 共通の 220px） */
  .howto-step__row {
    grid-template-columns: 27% minmax(0, 1fr);
  }

  /* WAVE 本文 max-width 統一（font-size は responsive.css 先頭のグローバル本文ルール=1.095rem を継承）*/
  .wave-lead           { max-width: 88%; }
  .zero__body          { max-width: 88%; }
  .voice__sub          { max-width: 88%; }
  .sup-lead            { max-width: 88%; }
  .style-card__desc--lead { max-width: 88%; }

  /* 詳細ページ本文 max-width SP 上書き（TOP 同様 88% に拡張）*/
  .guarW-lead, .ab-lead, .nu-lead, .zw-lead, .cb-lead, .sf-lead,
  .an-lead, .sp-lead, .hts-lead, .rq-lead, .ic-lead, .nv-lead,
  .hw-lead, .st-lead, .sj-lead, .eq-lead, .rw-lead, .fq-lead,
  .guarW-notes,
  .sf-section__body,
  .nu-chapter__body,
  .zw-chapter__body,
  .cb-chapter__body { max-width: 88% !important; }

  /* WAVE H2 — SP では max-width: 92% に拡張＋font-size を 19px に縮小
     （iPhone SE 375px で「稼ぎ方」「働き方」等の漢字熟語が改行されないよう調整）
     ※ .req-title は sections.css の `.sec--req-h .req-title` と特異度を合わせるため
       同等の親付き形式（.sec--req-h .req-title）で記述する */
  .myth-ad-headline,
  .mech-title,
  .lovetip__h2,
  .zero__h2,
  .reward__h2,
  .voice__h2,
  .safety__h2,
  .style__h2,
  .sup-h2,
  .benefit__h2,
  .faq__h2,
  .step__h2,
  .sec--req-h .req-title,
  .cert-section__h2 {
    max-width: 92%;
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
  }

  /* REWARD RATE Pattern K — SP（padding は base の --section-py: 44px を継承） */
  .rwk-title { font-size: var(--fs-xl); }
  .rwk-rate__num { font-size: var(--fs-num-md); }

  /* SUPPORT カード — SP 専用 min-height（03 の3行desc含む全カード統一）
     縦中央配置は sections.css 側に移動済み（PC/SP 共通） */
  .sup-item__body {
    min-height: 150px;          /* 120 → 150 */
  }

  /* WAVE 03 REWARD — SP コンパクト化（無料/有料パーティーチャットを1画面に収める） */
  .rw-plan                     { padding: 16px 0 20px; }
  .rw-plan__title              { margin-bottom: 4px; }
  .rw-plan__subtitle           { margin-bottom: 10px; }
  .rw-host-section             { padding: 4px 12px 6px; }
  .rw-host-iphone              { max-width: 220px; }       /* 290→220 (24% small) */
  .rw-flow-arrow               { height: 28px; }           /* 80→28 (65% small) */
  .rw-flow-arrow::after        { top: 50%; font-size: var(--fs-base); }
  .rw-viewers-section          { margin-bottom: 14px; }    /* 48→14 */
  .rw-viewers-wrap             { max-width: 55%; }         /* 72%→55% (4枚スマホ小型化) */
  .rw-reward-block             { padding: 12px 14px 14px; }/* タイト化 */
  .rw-reward-block__title      { margin-bottom: 8px; }
  .rw-reward-block__formula    { margin-bottom: 10px; padding: 8px 12px; }
  .rw-reward-block__arrow      { margin-bottom: 6px; }
  .rw-income-num,
  .rw-income-num--paid         { font-size: var(--fs-4xl); }  /* 48→32 */
  .rw-income-unit,
  .rw-income-unit--paid        { font-size: var(--fs-lg); }   /* 22→16 */

  /* THE MECHANISM Pattern AF — SP（padding は base の --section-py: 44px を継承） */
  .mech-title { font-size: var(--fs-2xl); }
  .mech-body { max-width: 88%; }

  /* COMMON MYTH Pattern AD — SP（padding は base の --section-py: 44px を継承） */
  /* font-size は base の clamp(20px, 3.5vw, 26px) を使用（H2 統一） */
  .myth-ad-tag { font-size: var(--fs-xs); padding: 5px 11px; }
  .myth-ad-quote__main { font-size: var(--fs-xl); }
  .myth-ad-stat__num { font-size: var(--fs-num-md); }
  .myth-ad-body { max-width: 88%; }
  .lovetip__body { font-size: var(--fs-sm); max-width: 88%; }

  /* REQUIREMENTS Pattern H — SP */
  /* margin-bottom も base の 24px を使用（H2 統一） */
  .req-block { margin-bottom: 44px; }
  .req-block__title { margin-bottom: 24px; }
  .req-eligibility__title { font-size: var(--fs-lg); }
  .req-id__label { font-size: var(--fs-xs); }
  .req-cert { padding: 18px 16px 16px; }
  .req-cert__title { font-size: var(--fs-base); }
  /* 3カラム → 1カラム + 左ピンクボーダー */
  .req-reason__num { font-size: var(--fs-3xl); margin-bottom: 6px; }

  /* SEC GUARANTEE — 在宅時給保証 SP（padding は base の --section-py / --section-px を継承）*/
  .guarW-title { font-size: var(--fs-2xl); }   /* 他詳細ページ（nv/zw/cb/sf 等）と統一 */
  .guarW-block { padding: 22px 18px 18px; }
}


/* ═══════════════════════════════════════
   VERY SMALL — max 374px
═══════════════════════════════════════ */
@media (max-width: 374px) {
  :root {
    --section-px: 20px;
    --section-py: 36px;
  }
  .fv__h1 { font-size: var(--fs-num-md); }
  .fv__h1-sub { font-size: var(--fs-lg); }
}


/* ═══════════════════════════════════════
   PC / TABLET — 768px+
   固定280pxサイドバー型レイアウト
   左280px固定サイドバー ＋ SP同幅(440px)メインコンテンツ
   ── メインコンテンツはサイドバー右側に配置、広い画面ではビューポート中央寄り
═══════════════════════════════════════ */
@media (min-width: 768px) {
  body {
    background: var(--bg1);   /* #FAF8F5 オフホワイト（サイドバー＋main周辺の背景） */
  }

  /* PC レイアウト用変数
     --main-left: メインコンテンツの左マージン
                  = max(サイドバー幅, ビューポート中央 - main幅/2)
                  狭い画面ではサイドバー直後、広い画面では中央寄りに */
  :root {
    --sidebar-w:   280px;     /* 固定サイドバー幅 */
    --section-px:  24px;      /* SPと同じ横余白 */
    --main-left:   max(var(--sidebar-w), calc(50vw - var(--col-w) / 2));
  }

  /* LP本体 — SPと同じ440px幅・サイドバー右側に配置 */
  .lp-main {
    width: var(--col-w);              /* 440px（SPと同じ） */
    max-width: var(--col-w);
    margin-left: var(--main-left);
    margin-right: auto;
    background: var(--bg-white);
    box-shadow: 0 0 24px rgba(0,0,0,0.06);  /* 周囲との境界 */
    position: relative;
    z-index: 1;
  }

  /* ロゴ：サイドバー内（左上固定） */
  .site-header__logo {
    left: 12px;
    top: 12px;
  }
  /* ハンバーガー：メインコンテンツ右上に追従 */
  .hamburger {
    right: calc(100vw - var(--main-left) - var(--col-w) + 14px);
  }

  /* フローティングCTA：メインコンテンツ位置・幅に合わせる */
  .floating-cta {
    left: var(--main-left);
    right: auto;
    width: var(--col-w);
    max-width: var(--col-w);
  }
  /* TOPボタン：メインコンテンツ右内側に追従 */
  .floating-top {
    right: calc(100vw - var(--main-left) - var(--col-w) + 14px);
  }

  /* ═══════════════════════════════════════
     PC専用 左固定サイドバー（仕様書 E-4）
     - width: 280px 固定
     - position: fixed で常時表示
     - 背景: --bg1（#FAF8F5 オフホワイト）
     ═══════════════════════════════════════ */
  .lp-sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    padding: 48px 20px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    z-index: 2;
    background: var(--bg1);
    border-right: 1px solid var(--color-deco);
  }
  .lp-sidebar__inner {
    width: 100%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  .lp-sidebar__brand {
    text-decoration: none;
    color: var(--text);
    line-height: var(--lh-tight);
  }
  .lp-sidebar__brand-eyebrow {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-sub);
    letter-spacing: var(--ls-heading);
    margin-bottom: 6px;
  }
  .lp-sidebar__brand-name {
    display: block;
    font-family: var(--font-num);       /* DM Sans（英字ロゴ用・仕様書 E-3） */
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);        /* DM Sans は black なし → bold（700） */
    color: var(--primary);              /* コーラル */
    letter-spacing: var(--ls-snug);
  }
  .lp-sidebar__tagline {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text);
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-snug);
    margin: 0;
  }
  .lp-sidebar__cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 280px;
  }
  .lp-sidebar__cta .btn {
    width: 100%;
  }
  .lp-sidebar__desc {
    font-size: var(--fs-sm);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: var(--text-body);
    text-align: justify;
    letter-spacing: var(--ls-body);
    margin: 0;
  }
  .lp-sidebar__links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    padding: 0;
    margin: 0;
  }
  .lp-sidebar__links a {
    font-size: var(--fs-xs);
    color: var(--text-sub);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .lp-sidebar__links a:hover {
    color: var(--primary);
  }

  /* ナビドロワーは元の挙動（viewport右端から slide-in）を維持。
     PC では column 外側からスライドしてくる形になる */

}


/* ═══════════════════════════════════════
   LARGE DESKTOP — 1200px+
═══════════════════════════════════════ */
@media (min-width: 1200px) {
  /* PC ではカラムが既に 440px に固定されているため
     特別な調整は不要（768pxのルールがそのまま継承される） */
}