/* ==========================================================================
   🌹 目次｜コックピット全体図 🧭
   --------------------------------------------------------------------------
   00. 🧠 親玉コンソール
       …… サイト全体の「基準中の基準」
           （ここが変わると全部変わる）

   01. 🎨 色の親玉
       …… ブランドカラー／UIカラーの基準

   02. 🔤 文字の親玉
       …… フォントサイズ・行間・字間の基準

   03. 📏 余白の親玉
       …… 全体リズム・呼吸感を決める余白基準

   04. 🧱 質感の親玉
       …… 角丸・影・立体感の基準

   05. 📐 画面幅の境界
       …… レスポンシブ切替の基準（任意）
   --------------------------------------------------------------------------
   10. 🧩 部品ごとの調整ツマミ
       …… 各CSSが参照する「接続口」

       10-1. 🧢 ヘッダー
             …… components-header.css

       10-2. 🎀 帯（バンド）
             …… components-band.css

       10-3. 🧭 パンくず
             …… components-breadcrumb.css

       10-4. 🧿 スライダー
             …… components-slider.css

       10-5. 🪧 見出し
             …… components-heading.css

       10-6. 📣 CTA（問い合わせ）
             …… components-cta.css

       10-7. 🧱 フッター
             …… components-footer.css

       10-8. 👀 TOC（目次）
             …… components-toc.css
   --------------------------------------------------------------------------

   20. 🗺 レイアウト基準ツマミ
       …… layout.css が参照する「全体配置の基準値」

   30. 🏠 ページごとの差分ツマミ

       30-1. TOPページ
             …… pages-home.css が参照する「ページ固有の調整」
       30-2. LESSONページ
             …… pages-lesson.css が参照する「ページ固有の調整」
       30-3. COMPANYページ
             …… pages-company.css が参照する「ページ固有の調整」
       30-4. 投稿ページ
             …… pages-single.css が参照する「投稿ページの調整」
       30-5. 投稿（一覧）ページ
             …… pages-archive.css が参照する「アーカイブページの調整」

   90. 🧯 緊急用（最後の手段）
       …… 使わないのが勝ち 🏆
   ==========================================================================
*/

/* ==========================================================================
   00) 🧠 親玉コンソール
   ========================================================================== */

:root {
  /* [moves] サイト横幅の唯一の基準（.l-container / .l-header__inner / Lesson等のmax-width） */
  --site-max: 1010px;
  /* [moves] サイト左右の基準余白（.l-container padding-inline 等の基準） */
  --site-pad-x: 50px;
}

/* ==========================================================================
   01) 🎨 色の親玉
   ========================================================================== */

:root {
  /* [moves] ブランド主色（見出し/ロゴ/主要UIの色参照元） */
  --brand-primary: #1c3b58;
  /* [moves] 補助色（英字・線などの参照元） */
  --brand-accent: #8fa3b8;
  /* [moves] 感情色（Lesson等の固有アクセント参照元） */
  --brand-accent-soft: #e6a4b4;

  /* [moves] 本文の基準色（--text-bodyの参照元） */
  --text-main: #515c67;
  /* [moves] 強調文字色（ナビ等の参照元） */
  --text-strong: #333;
  /* [moves] 反転文字色（暗背景上の文字） */
  --text-invert: #fff;

  /* [moves] 汎用境界線色（Breadcrumb等） */
  --ui-border: #eee;
  /* [moves] 薄線（枠線・区切り線の参照元） */
  --ui-border-soft: rgba(28, 59, 88, 0.18);
  /* [moves] 面背景（枠内の薄い背景の参照元） */
  --ui-surface-soft: rgba(28, 59, 88, 0.04);

  /* [moves] 画像上オーバーレイ（Slider矢印背景など） */
  --ui-overlay: rgba(0, 0, 0, 0.35);
  /* [moves] 暗背景hover（Footerリンクhoverなど） */
  --ui-link-hover-invert: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   02) 🔤 文字の親玉
   ========================================================================== */

:root {
  /* [moves] 本文色の参照元（body / .c-content p 等） */
  --text-body: var(--text-main);
}

/* ==========================================================================
   03) 📏 余白の親玉
   ========================================================================== */

/* ==========================================================================
   04) 🧱 質感の親玉
   ========================================================================== */

/* ==========================================================================
   05) 📐 画面幅の境界
   ========================================================================== */

/* ==========================================================================
   10) 🧩 部品ごとの調整ツマミ
   ========================================================================== */

/* 10-1) 🧢 Header ……………………components-header.css */
:root {
  /* [moves] ヘッダーの重なり順 */
  --header-z: 1000;
  /* 🌹 ヘッダー下影 */
  --header-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* [moves] ヘッダー row 上余白 */
  --header-row-pad-top: 12px;
  /* [moves] ヘッダー row 下余白 */
  --header-row-pad-bottom: 12px;

  /* [moves] ロゴ高さ（SVG height） */
  --logo-height: 45px;
  /* [moves] ロゴ横微調整（transform X） */
  --logo-offset-x: 0px;
  /* [moves] ロゴ縦微調整（ロゴの縦位置） */
  --logo-offset-y: 6px;
  /* [moves] ロゴ色（linkのcolor） */
  --logo-color: var(--brand-primary);
  /* [moves] SVG塗り（path fill） */
  --logo-fill: currentColor;

  /* [moves] ナビ文字サイズ */
  --nav-font-size: 14px;
  /* [moves] ナビ太さ */
  --nav-font-weight: 500;
  /* [moves] 通常色 */
  --nav-color: var(--text-strong);
  /* [moves] hover色 */
  --nav-hover-color: var(--brand-primary);

  /* [moves] ナビ項目間の間隔 */
  --nav-gap: 24px;
  /* [moves] ナビリンクの上下余白 */
  --nav-link-pad-y: 8px;
  /* [moves] ナビリンクの左右余白 */
  --nav-link-pad-x: 8px;

  /* [moves] 下線太さ */
  --nav-underline-height: 1px;
  /* [moves] 下線速度 */
  --nav-underline-duration: 0.35s;
}

/* 10-2) 🎀 Band ………………………components-band.css */
:root {
  /* [moves] 帯の高さ */
  --band-min-height: 160px;
  /* [moves] タイトル色 */
  --band-title-color: var(--text-invert);
  /* [moves] 行間 */
  --band-title-line: 1;

  --band-title-size: 32px; /* 🌹 タイトル文字サイズ */
  --band-title-weight: 700; /* 🌹 タイトル太さ */

  --band-img-page: url("/wp/wp-content/themes/TeamPOCs_01/assets/img/page_header.jpg"); /* 🌹 帯画像（固定ページ） */
  --band-img-single: url("/wp/wp-content/themes/TeamPOCs_01/assets/img/single_header.jpg"); /* 🌹 帯画像（投稿ページ） */
  --band-img-archive: url("/wp/wp-content/themes/TeamPOCs_01/assets/img/single_header.jpg"); /* 🌹 帯画像（アーカイブ） */
}

/* 10-3) 🧭 Breadcrumb ………………components-breadcrumb.css */
:root {
  /* [moves] 下線色 */
  --breadcrumb-border-color: var(--ui-border);
  /* [moves] 表示幅（breadcrumbコンテナのmax-width） */
  --breadcrumb-max-width: 1100px;
  /* [moves] 上下余白 */
  --breadcrumb-pad-y: 12px;
  /* [moves] 左右余白（Xオフセット） */
  --breadcrumb-pad-x: 10px; /* Xオフセット */
  /* [moves] 文字サイズ */
  --breadcrumb-font-size: 12px;
  /* [moves] 文字色 */
  --breadcrumb-text-color: var(--text-strong);
  /* [moves] 区切り間隔 */
  --breadcrumb-sep-x: 6px;
  /* [moves] 現在地の太さ */
  --breadcrumb-current-weight: 500;
}

/* 10-4) 🧿 Slider ……………………components-slider.css */
:root {
  /* [moves] 高さ */
  --slider-h: 450px;

  /* [moves] 矢印ボタンのサイズ */
  --slider-arrow-size: 44px;
  /* [moves] 矢印ボタンの左右位置 */
  --slider-arrow-x: 16px;
  /* [moves] 矢印ボタン背景 */
  --slider-arrow-bg: var(--ui-overlay);
  /* [moves] 矢印文字サイズ */
  --slider-arrow-font: 28px;

  /* [moves] prevアイコンX微調整 */
  --slider-prev-icon-x: -1px;
  /* [moves] prevアイコンY微調整 */
  --slider-prev-icon-y: -2px;
  /* [moves] nextアイコンX微調整 */
  --slider-next-icon-x: 1px;
  /* [moves] nextアイコンY微調整 */
  --slider-next-icon-y: -2px;

  /* [moves] キャプション左位置 */
  --slider-cap-x: 175px;
  /* [moves] キャプション下位置 */
  --slider-cap-bottom: 120px;

  /* [moves] タイトル文字サイズ */
  --slider-title-size: 34px;
  /* [moves] タイトル下余白 */
  --slider-title-mb: 8px;
  /* [moves] タイトル行間 */
  --slider-title-line: 1.3;
  /* [moves] タイトル字間 */
  --slider-title-letter: 0.18em;
  /* [moves] タイトル太さ */
  --slider-title-weight: 600;

  /* [moves] 本文文字サイズ */
  --slider-text-size: 18px;
  /* [moves] 本文行間 */
  --slider-text-line: 1.6;
  /* [moves] 本文字間 */
  --slider-text-letter: 0.12em;
  /* [moves] 本文上余白 */
  --slider-text-mt: 20px;
  /* [moves] 本文下余白 */
  --slider-text-mb: 16px;

  /* [moves] CTA上余白 */
  --slider-cta-mt: 16px;
}

/* 10-5) 🪧 Heading …………………components-heading.css */
:root {
  /* [moves] 見出し主色 */
  --brand: var(--brand-primary);
  /* [moves] 装飾色 */
  --accent: var(--brand-accent);

  /* [moves] 英字字間（H2共通） */
  --h2-en-letter: 0.08em;
  /* [moves] 日本語行間（H2共通） */
  --h2-jp-line: 1.3;

  /* [moves] 見出し全体の下余白（H2-LG） */
  --h2-lg-block-bottom: 40px;
  /* [moves] 羊サイズ（H2-LG） */
  --h2-lg-icon: 120px;
  /* [moves] 英字サイズ（H2-LG） */
  --h2-lg-en-size: 28px;
  /* [moves] 英字行間（H2-LG） */
  --h2-lg-en-line: 1;
  /* [moves] 日本語サイズ（H2-LG） */
  --h2-lg-jp-size: 36px;
  /* [moves] 日本語開始位置（H2-LG） */
  --h2-lg-jp-x: 16px;
  /* [moves] 羊＋英字ブロック下余白（H2-LG） */
  --h2-lg-center-bottom: 24px;
  /* [moves] 羊と英字の間（H2-LG） */
  --h2-lg-center-gap: 0px;

  /* [moves] 縦線X位置（H2-LG） */
  --h2-lg-line-x: 0px;
  /* [moves] 縦線上（H2-LG） */
  --h2-lg-line-top: 4px;
  /* [moves] 縦線下（H2-LG） */
  --h2-lg-line-bottom: 10px;
  /* [moves] 縦線太さ（H2-LG） */
  --h2-lg-line-width: 4px;

  /* [moves] 下線太さ（H2-LG） */
  --h2-lg-underline-h: 1px;
  /* [moves] 日本語→下線距離（H2-LG） */
  --h2-lg-underline-top: 4px;

  /* [moves] 見出し全体の下余白（H2-SM） */
  --h2-sm-block-bottom: 24px;
  /* [moves] 羊と文字ブロック間（H2-SM） */
  --h2-sm-row-gap: 24px;

  /* [moves] 羊サイズ（H2-SM） */
  --h2-sm-icon: 80px;

  /* [moves] 英字サイズ（H2-SM） */
  --h2-sm-en-size: 24px;
  /* [moves] 英字行間（H2-SM） */
  --h2-sm-en-line: 1;
  /* [moves] 英字開始位置（H2-SM） */
  --h2-sm-en-x: 3px;

  /* [moves] 日本語サイズ（H2-SM） */
  --h2-sm-jp-size: 28px;
  /* [moves] 日本語上余白（H2-SM） */
  --h2-sm-jp-top: 18px;

  /* [moves] 下線太さ（H2-SM） */
  --h2-sm-line-h: 1px;
  /* [moves] 下線位置（H2-SM） */
  --h2-sm-line-top: 0px;

  /* [moves] H3サイズ */
  --h3-size: 1.25em;
  /* [moves] H3太さ */
  --h3-weight: 600;
  /* [moves] H3色 */
  --h3-color: var(--text-body);
  /* [moves] H3上余白 */
  --h3-mt: 2em;
  /* [moves] H3下余白 */
  --h3-mb: 1.25em;
  /* [moves] H3左位置 */
  --h3-x: 22px;

  /* [moves] H3ドット内容 */
  --h3-dot-content: "● ● ●";
  /* [moves] H3ドット上位置 */
  --h3-dot-top: 0.4em;
  /* [moves] H3ドットX位置 */
  --h3-dot-x: 8px;
  /* [moves] H3ドットサイズ */
  --h3-dot-size: 0.45em;
  /* [moves] H3ドット字間 */
  --h3-dot-letter: 0.4em;
  /* [moves] H3ドット色 */
  --h3-dot-color: var(--accent);
}

/* 10-6) 📣 CTA ………………………components-cta.css */
:root {
  --flow-incta-mt: 16px; /* 💕 上余白（Flow） */
  --flow-incta-x: 220px; /* 💕 左位置（Flow） */
  --flow-outcta-mt: 0px; /* 💕 初期値は必ず0 */

  /* [moves] CTA上下padding */
  --cta-pad-y: 10px;
  /* [moves] CTA左右padding */
  --cta-pad-x: 28px;
  /* [moves] CTA角丸 */
  --cta-radius: 4px;
  /* [moves] CTA線太さ */
  --cta-border-w: 1px;
  /* [moves] CTA transition */
  --cta-tr: 0.2s;

  /* [moves] CTA通常色 */
  --cta-base-color: var(--brand-primary);
  /* [moves] CTA通常背景 */
  --cta-base-bg: transparent;
  /* [moves] CTA hover背景 */
  --cta-base-hover-bg: var(--brand-primary);
  /* [moves] CTA hover文字色 */
  --cta-base-hover-color: var(--text-invert);
  /* [moves] CTA hover線色 */
  --cta-base-hover-border: var(--brand-primary);

  /* [moves] Slider CTA文字色 */
  --cta-slider-color: var(--text-invert);
  /* [moves] Slider CTA線色 */
  --cta-slider-border: var(--text-invert);
  /* [moves] Slider CTA背景 */
  --cta-slider-bg: transparent;
  /* [moves] Slider CTA hover背景 */
  --cta-slider-hover-bg: var(--brand-primary);
  /* [moves] Slider CTA hover文字色 */
  --cta-slider-hover-color: var(--text-invert);
  /* [moves] Slider CTA hover線色 */
  --cta-slider-hover-border: var(--brand-primary);
}

/* 10-7) 🧱 Footer ……………………components-footer.css */
:root {
  /* [moves] Footer背景 */
  --footer-bg: var(--brand-primary);
  /* [moves] Footer文字色 */
  --footer-text: var(--text-invert);
  /* [moves] Footerリンクhover */
  --footer-link-hover: var(--ui-link-hover-invert);

  /* [moves] row下余白 */
  --footer-row-bottom: 24px;
  /* [moves] links上余白 */
  --footer-links-top: 10px;

  /* [moves] 会社ブロック上余白 */
  --footer-company-top: 24px;
  /* [moves] 会社ブロック上padding */
  --footer-company-pad-top: 10px;
  /* [moves] 会社ブロック下padding */
  --footer-company-pad-bottom: 14px;

  /* [moves] メニュータイトルサイズ */
  --footer-menu-title-size: 14px;
  /* [moves] タイトル下ギャップ */
  --footer-menu-title-gap: 12px;
  /* [moves] メニュー行ギャップ */
  --footer-menu-row-gap: 8px;

  /* [moves] 店名サイズ */
  --footer-shop-size: 30px;
  /* [moves] 店名上余白 */
  --footer-shop-top: 40px;
  /* [moves] 店名下余白 */
  --footer-shop-bottom: 20px;
  /* [moves] 会社行間 */
  --footer-company-line: 1.6;
  /* [moves] 会社行ギャップ */
  --footer-company-row-gap: 6px;
  /* [moves] アクセス文字サイズ */
  --footer-access-size: 12px;

  /* [moves] TEL上余白 */
  --footer-tel-top: 20px;
  /* [moves] TELサイズ */
  --footer-tel-size: 18px;
  /* [moves] TEL太さ */
  --footer-tel-weight: 600;
  /* [moves] TEL字間 */
  --footer-tel-letter: 0.15em;

  /* [moves] copyright下余白 */
  --footer-copyright-bottom: 18px;

  /* [moves] map上余白 */
  --footer-map-top: 24px;
  /* [moves] map下余白 */
  --footer-map-bottom: 12px;
  /* [moves] map枠padding */
  --footer-map-frame-pad: 8px;
  /* [moves] map枠角丸 */
  --footer-map-frame-radius: 10px;
  /* [moves] map角丸 */
  --footer-map-radius: 6px;
  /* [moves] mapアスペクト */
  --footer-map-aspect: 4 / 3;
}

/* 10-8) 👀 TOC（目次） ……………………components-toc.css 🌹*/
:root {
  --toc-mt: 0px; /* 目次 上余白 */
  --toc-mb: 48px; /* 目次 下余白 */

  --toc-indent: 1.75em; /* 第1階層 インデント */
  --toc-sub-indent: 1.25em; /* 第2階層以降 インデント */
  --toc-sub-mt: 6px; /* 第2階層 上余白 */

  --toc-item-gap: 12px; /* 行間（li間） */
  --toc-fz: 16px; /* 文字サイズ */
  --toc-color: var(--text-main); /* 文字色 */

  --toc-underline: rgba(0, 0, 0, 0.1); /* 下線色 */
  --toc-underline-pb: 4px; /* 下線までの距離 */

  --toc-hover-opacity: 0.7; /* hover */

  --toc-pad: 18px; /* 枠内余白 */
  --toc-border: rgba(0, 0, 0, 0.1); /* 枠線 */
  --toc-radius: 10px; /* 角丸 */
  --toc-bg: rgba(28, 59, 88, 0.04); /* 枠背景（Lessonと統一） */

  --toc-title-fz: 22px; /* タイトルサイズ */
  --toc-title-weight: 700; /* タイトル太さ */
  --toc-title-color: var(--brand-primary); /* タイトル色（ブランド） */
  --toc-title-mb: 12px; /* タイトル下余白 */
}

/* ==========================================================================
   20) 🗺 レイアウト基準ツマミ
   ========================================================================== */

:root {
  /* [moves] コンテナ幅 */
  --container-max: var(--site-max);
  /* [moves] コンテナ左右padding */
  --container-pad-x: var(--site-pad-x);

  /* [moves] main上余白 */
  --main-pad-top: 40px;
  /* [moves] main下余白 */
  --main-pad-bottom: 40px;

  /* [moves] section上下padding */
  --section-pad-y: 40px;
  /* [moves] 見出し下余白 */
  --section-head-bottom: 24px;

  /* [moves] 本文インデント（is-indent用） */
  --body-indent-x: 0px;
  /* [moves] center幅 */
  --body-center-width: 88%;
  /* [moves] center最大幅 */
  --body-center-max: 960px;

  /* [moves] about上余白 */
  --about-pad-top: 20px;
  /* [moves] about下余白 */
  --about-pad-bottom: 10px;
}

/* ==========================================================================
   30) 🏠 ページごとの差分ツマミ
   ========================================================================== */

:root {
  /* 30-1) 🏠 TOPページ ……………………pages-home.css */
  --prose-max: 940px; /* 💕 文章の箱の最大幅（読み幅） */
  --prose-mt: 0px; /* prose上余白 */
  --prose-mb: 0px; /* prose下余白 */
  --prose-size: 18px; /* 💕 prose文字サイズ */
  --prose-line: 2; /* 💕 prose行間 */
  --prose-letter: 0.02em; /* 💕 prose字間 */
  --prose-gap: 24px; /* 💕 prose段落間隔 */
  --prose-high-size: 24px; /* [moves] prose-high文字サイズ */
  --prose-high-line: 1.7; /* [moves] prose-high行間 */
  --prose-high-mt: 40px; /* [moves] prose-high上余白 */
  --prose-high-mb: 32px; /* [moves] prose-high下余白 */
  --prose-low-opacity: 0.78; /* [moves] prose-low不透明度 */

  --home-feature-p-shift: 50px; /* 💕 p 横ズレ（-で左） */
}

:root {
  /* 30-2) 🏠 LESSONページ ……………………pages-lesson.css */
  --pricing-max: 900px; /* 💕 BOXの最大幅 */
  /* [moves] Lesson：pricing/flowの左オフセット */
  --pricing-x: 0px; /* ✅ .l-container 内なので追加オフセット不要 */
  /* [moves] Lesson：pricing/flowの縦ギャップ */
  --pricing-gap: 28px;
  --price-flow-gap: 24px; /* 💕 Price→Flowの間隔 */

  /* [moves] Lesson：枠線色（group/flowカード等） */
  --line: var(--ui-border-soft);

  /* [moves] Lesson：グループ背景 */
  --group-bg: var(--ui-surface-soft);
  /* [moves] Lesson：グループ枠線太さ */
  --group-border: 1px;
  /* [moves] Lesson：グループ角丸 */
  --group-radius: 10px;
  /* [moves] Lesson：グループ上下padding */
  --group-pad-y: 18px;
  /* [moves] Lesson：グループ左右padding */
  --group-pad-x: 18px;
  /* [moves] Lesson：H3下ギャップ */
  --group-title-gap: 14px;

  /* [moves] Lesson：ブロック間隔 */
  --block-gap: 18px;
  /* [moves] Lesson：H4下の内側ギャップ */
  --block-inner-gap: 10px;

  /* [moves] Lesson：H4サイズ */
  --h4-size: 16px;
  /* [moves] Lesson：H4太さ */
  --h4-weight: 700;
  /* [moves] Lesson：H4左位置 */
  --h4-x: 20px;

  /* [moves] Lesson：価格列幅（value列） */
  --price-w: 160px;
  /* [moves] Lesson：label/value列のギャップ */
  --row-gap: 16px;
  /* [moves] Lesson：価格行（label含む）左位置 */
  --row-x: 35px;
  /* [moves] Lesson：価格行の最大幅 */
  --row-max: 860px;
  /* [moves] Lesson：価格行の右padding */
  --row-pad-right: 0px;

  /* [moves] Lesson：リスト上余白 */
  --list-mt: 10px;
  /* [moves] Lesson：リストインデント */
  --list-x: 35px;
  /* [moves] Lesson：リスト行間 */
  --list-line: 1.7;
  /* [moves] Lesson：リスト文字サイズ */
  --list-size: 14px;
  /* [moves] Lesson：リスト色 */
  --list-color: rgba(28, 59, 88, 0.75);

  /* [moves] Lesson：H3サイズ */
  --h3-lsn-size: 1.25em;
  /* [moves] Lesson：H3太さ */
  --h3-lsn-weight: 600;
  /* [moves] Lesson：H3左インデント */
  --h3-lsn-x: 22px;
  /* [moves] Lesson：H3ドット内容 */
  --h3-lsn-dot-content: "● ● ●";
  /* [moves] Lesson：H3ドット上余白 */
  --h3-lsn-dot-top: 0.4em;
  /* [moves] Lesson：H3ドット左位置 */
  --h3-lsn-dot-x: 8px;
  /* [moves] Lesson：H3ドットサイズ */
  --h3-lsn-dot-size: 0.45em;
  /* [moves] Lesson：H3ドット字間 */
  --h3-lsn-dot-letter: 0.4em;
  /* [moves] Lesson：H3ドット色（ピンク固定） */
  --h3-lsn-dot-color: var(--brand-accent-soft); /* ✅ ピンク固定 */

  /* [moves] Lesson：Flowのステップ間隔 */
  --flow-step-gap: 18px;
  /* [moves] Lesson：Flowカード内ギャップ */
  --flow-gap: 18px;

  /* [moves] Lesson：Flowカード背景 */
  --flow-card-bg: var(--ui-surface-soft);
  /* [moves] Lesson：Flowカード枠線太さ */
  --flow-card-border: 1px;
  /* [moves] Lesson：Flowカード角丸 */
  --flow-card-radius: 10px;
  /* [moves] Lesson：Flowカード上下padding */
  --flow-card-pad-y: 18px;
  /* [moves] Lesson：Flowカード左右padding */
  --flow-card-pad-x: 18px;

  /* [moves] Lesson：Flowアイコン列幅 */
  --flow-icon-col: 110px;
  /* [moves] Lesson：羊のサイズ */
  --flow-icon-size: 74px;
  /* [moves] Lesson：羊のX位置 */
  --flow-icon-x: 0px;

  /* [moves] Lesson：羊の中の数字X微調整 */
  --flow-num-x: 8px;
  /* [moves] Lesson：羊の中の数字Y微調整 */
  --flow-num-y: 0px;
  /* [moves] Lesson：数字サイズ */
  --flow-num-size: 16px;
  /* [moves] Lesson：数字太さ */
  --flow-num-weight: 600;

  /* [moves] Lesson：本文X */
  --flow-text-x: 0px;
  /* [moves] Lesson：タイトルX */
  --flow-title-x: 0px;
  /* [moves] Lesson：タイトル色 */
  --flow-title-color: var(--brand);

  /* [moves] Lesson：カード内CTA上余白 */
  --flow-incta-mt: 12px;
  /* [moves] Lesson：外CTA上余白 */
  --flow-outcta-mt: 28px;

  /* [moves] Lesson：本文/リスト等の基準インデント（H3に揃える） */
  --lesson-indent-x: var(--h3-lsn-x);
}

:root {
  /* 30-3) 🏠 Companyページ ……………………pages-company.css */
  --company-max: 760px; /* 表ブロックの最大幅（中央で止める） */
  --company-mt: 40px; /* ブロック上余白 */
  --company-row-py: 14px; /* 1行の上下余白 */
  --company-col-gap: 24px; /* dt と dd の間 */
  --company-dt-w: 140px; /* 左列幅 */
  --company-border: rgba(0, 0, 0, 0.05); /* 罫線 */
  --company-fz: 16px; /* 💕 全体文字サイズ */
  --company-lh: 1.9; /* 行間 */

  --company-dt-color: var(--brand-primary); /* dt 色 */
  --company-dt-weight: 700; /* 💕 dt 太さ */

  --company-dd-indent: 0.25em; /* 💕 dd 左インデント */
}

:root {
  /* 30-4) 📝 投稿ページ ………………………pages-single.css 🌹 */
  --single-mt: 0px; /* 上下余白（上） */
  --single-mb: 80px; /* 上下余白（下） */
  --single-side-w: 300px; /* サイド幅 */
  --single-gap: 40px; /* カラム間gap */
  --single-title-size: 28px; /* 記事タイトルサイズ */
}

:root {
  /* 30-5) 📚 Archive ……………………… pages-archive.css 🌹 */

  /* レイアウト */
  --archive-mt: 0px;
  --archive-mb: 80px;
  --archive-side-w: 300px;
  --archive-gap: 40px;

  /* 一覧の密度（サイズ感） */
  --archive-list-gap: 14px;
  --archive-card-pad-y: 14px;
  --archive-card-pad-x: 16px;
  --archive-card-radius: 12px;
  --archive-card-minh: 65px;

  /* タイポ（サイズ感） */
  --archive-date-size: 13px;
  --archive-title-size: 18px;
}

/* ==========================================================================
   90) 🧯 Emergency（最後の手段）………使わないのが勝ち🏆
   ========================================================================== */