/*
Theme Name: Planart
Theme URI: https://planart.co.jp/
Author: 株式会社プラナート
Description: 株式会社プラナートのコーポレートサイト（案E）。見た目と文言の正本は Claude Design のキャンバス（案E）。実装の決まりは同梱の CLAUDE.md。
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: planart
*/

/* ==========================================================================
   0. デザイントークン
   --------------------------------------------------------------------------
   出どころ：キャンバス案E（v51・版 1792967842-cfc5）の12ページで使われている実数。
   キャンバスには CSS 変数が無く、要素ごとの style に実数で書かれている。それを役目ごとに名前を付けてここへ集めた。
   回数は 12ページの合計（洗い出し claude/planart-site/canvas-inventory-v51-20261026.md の 1章）。
   色・余白・角丸・影はここだけに書く。テンプレートと下の規則では var(--…) で使う（verify_site.py が見張る）。
   ページの CSS（assets/css/p-*.css）とフォームの CSS（assets/css/forms.css）にも :root を置かない。そのページでしか使わない値も、
   ここに名前を付けて置く（2026-11-03 まとめで、4人の担当がページの CSS に置いていた 47個を、名前はそのまま、ここへ集めた。
   2つのページで同じ名前・同じ値だった --sp-split-gap は1つにした。値が同じでも役目の違う名前は、そのまま別に残した）。
   ========================================================================== */
:root {
  /* ---- 色：文字 ---- */
  --c-ink: #1B1D1C;            /* 818回。文字の基本・黒いボタン・区切りの太線 */
  --c-text: #3B403D;           /* 313回。本文の濃い灰（答え・条文・フッターのリンク・ラベル） */
  --c-sub: #5F6461;            /* 375回。説明・注・表の見出し */
  --c-muted: #858C87;          /* 70回。番号・パンくずの「›」・一時停止ボタンと外枠ボタンの枠 */
  --c-fill-from: #C8CEC9;      /* 塗られる文の塗る前（明るい面） */

  /* ---- 色：面 ---- */
  --c-bg: #FFFFFF;
  --c-surface: #F5F6F4;        /* 193回。交互の段・カード・フッター */
  --c-surface-deep: #EDF0EE;   /* ヒーローの面のグラデーションの下 */
  --c-frame: #EEF1EF;          /* 画像・写真の枠の下地 */
  --c-frame-photo: #E6EAE7;    /* 写真が枠いっぱいのヒーローの下地（工事のページ。キャンバス ConstructionE） */
  --c-chip: #F1F2F0;           /* よくある質問の「＋」の丸ほか */
  --c-biz-hover: #EBEEEA;      /* 会社案内の4つの仕事のカードのホバー */
  --c-dark: #0A0B0B;           /* 83回。黒い段・相談の帯 */
  --c-black: #000000;          /* 黒い段の中の絵の影だけ */
  --c-green-pale: #E8F4EC;     /* 選んだ選択肢・薄い緑の面 */
  --c-green-pale-line: #D3E8DA;
  --c-gantt-track: #F1F3F0;    /* 工程表の棒の下地（工事。--c-chip #F1F2F0 と緑が1だけ違う。キャンバスのまま。2026-11-03 まとめで p-construction.css から） */

  /* ---- 色：線 ---- */
  --c-line: #D5D9D4;           /* 103回。よくある質問・表の見出し・番号の丸 */
  --c-line-soft: #E3E6E2;      /* 86回。表の行の線。フッターの大きな PLANART の文字にも使う */
  --c-line-menu: #ECEEEB;      /* スマホのメニューの行・選ぶボタンの中の線 */
  --c-line-foot: #DDE1DC;      /* フッターの区切り（パンくずの下・© の上） */
  --c-field: #8A918C;          /* 入力欄・選択肢の枠（白地で 3.23:1。文字以外の 3:1 を満たす） */
  --c-pick: #D9DDD9;           /* 選ぶボタンの選ばれていない枠 */
  --c-photo-mark: #B9BFBA;     /* 写真の枠の「Photo」 */
  --c-stepper-line: #C9CECB;   /* 費用の目安の −／＋ の枠 */
  --c-connector: #CFD4CF;      /* 検索とAIの段の、手順をつなぐ縦の線 */
  --c-guide: #CDD2CD;          /* 線の絵の点線（ブランディングの図） */
  --c-grid: #E6E8E5;           /* 線の絵の方眼 */
  --c-window-bar: #FAFAF9;     /* 画面の絵の上の帯（トップのヒーロー） */
  --c-window-dot: #DADDD9;     /* 画面の絵の3つの丸（トップのヒーロー） */
  --c-window-dot-sm: #D7DBD6;  /* 画面の絵の3つの丸（4つの仕事の 01 のカード） */
  --c-price-dash: #9AA19C;     /* 別にかかるものの横線（費用の目安。飾り。2026-11-03 まとめで p-price.css から） */

  /* ---- 色：緑 ---- */
  --c-green: #1E7A52;          /* 423回。アクセント（英字の小見出し・リンク・今いるページ・フォーカスの輪）。白地で 5.30:1 */
  --c-green-bright: #3FB37D;   /* 読んだ位置の線・ボタンの丸い矢印・丸い相談ボタン（文字色には使わない） */
  --c-mint: #8FE3B5;           /* 黒い面の上の緑 */
  --c-glow: #86D6E8;           /* 光のグラデーション */

  /* ---- 色：黒い面の上の文字 ---- */
  --c-on-dark: #FFFFFF;
  --c-on-dark-strong: #E1E6E2; /* 明るい文字 */
  --c-on-dark-sub: #A3AAA6;    /* 説明（トップ・Webサイト・EC の黒い段、相談の帯） */
  --c-on-dark-sub-2: #C9CFCA;  /* 説明（AI・アプリ／ブランディング／SEO／会社案内の黒い段）。ページで値が違う（洗い出し 1-8） */
  --c-phone-frame: #2A2D2B;    /* 検索とAIの段のスマホの縁 */
  --c-scrim: #06140E;          /* 写真の下の暗いぼかし（4つの仕事の 04 のカード） */

  /* ---- 色：入力の誤り（キャンバスに無い色。キャンバスに誤りの見た目が無いため足した。ボスに見てもらう。2026-11-03 まとめで forms.css から） ---- */
  --c-error: #B3261E;          /* 入力の誤りの文・枠（白地 6.54:1・--c-surface の上 6.03:1） */

  /* ---- 色：作業台だけの札（キャンバスの「仮の画像（AI）」の札と同じ色。本番には出ない） ---- */
  --c-kari-bg: #FFF4D6;
  --c-kari: #8A5A00;

  /* ---- 色：透ける色（rgba の代わりに color-mix。元の色を変えれば追随する） ---- */
  --c-header-bg: color-mix(in srgb, var(--c-bg) 80%, transparent);         /* rgba(255,255,255,.8) */
  --c-header-line: color-mix(in srgb, var(--c-ink) 8%, transparent);       /* rgba(27,29,28,.08) */
  --c-menu-bg: color-mix(in srgb, var(--c-bg) 97%, transparent);           /* rgba(255,255,255,.97) */
  --c-dark-line: color-mix(in srgb, var(--c-on-dark) 14%, transparent);    /* 黒い面の上の区切り線 */
  --c-dark-line-2: color-mix(in srgb, var(--c-on-dark) 12%, transparent);
  --c-dark-card: color-mix(in srgb, var(--c-on-dark) 6%, transparent);     /* 黒い面の上の半透明のカード */
  --c-dark-card-line: color-mix(in srgb, var(--c-on-dark) 10%, transparent);
  --c-bar-bg: color-mix(in srgb, var(--c-dark) 92%, transparent);          /* 費用の目安の画面の下の帯 */
  --c-dark-chip-line: color-mix(in srgb, var(--c-on-dark) 24%, transparent); /* 黒いカードの中の小さな札の枠（4つの仕事の 01） */
  --c-dark-card-2: color-mix(in srgb, var(--c-on-dark) 8%, transparent);   /* AIアシスタントの絵の中の面 */
  --c-mint-soft: color-mix(in srgb, var(--c-mint) 16%, transparent);       /* 「出典」の札（検索とAIの段） */
  --c-glow-0: color-mix(in srgb, var(--c-mint) 0%, transparent);           /* スマホのまわりの光（検索とAIの段） */
  --c-glow-1: color-mix(in srgb, var(--c-mint) 50%, transparent);
  --c-glow-2: color-mix(in srgb, var(--c-glow) 40%, transparent);
  --c-plan-line: color-mix(in srgb, var(--c-ink) 10%, transparent);       /* つくり方のカードの中身の上の線（rgba(27,29,28,.1)） */
  --c-price-chip-line: color-mix(in srgb, var(--c-on-dark) 16%, transparent); /* 選んでいるものの札の枠（費用の目安。rgba(255,255,255,.16)。2026-11-03 まとめで p-price.css から） */

  /* ---- グラデーション ---- */
  --grad-hero: linear-gradient(180deg, var(--c-surface) 0%, var(--c-surface-deep) 100%);
  --grad-aio: linear-gradient(90deg, var(--c-mint), var(--c-glow));          /* 「検索でも、AIでも、」の文字 */
  --grad-fill: linear-gradient(var(--c-ink), var(--c-ink));                  /* 塗られる文（明るい面） */
  --grad-fill-on-dark: linear-gradient(var(--c-on-dark), var(--c-on-dark));  /* 塗られる文（黒い面） */
  --grad-grid: linear-gradient(var(--c-grid) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  --grad-photo-scrim: linear-gradient(180deg, color-mix(in srgb, var(--c-scrim) 0%, transparent) 55%, color-mix(in srgb, var(--c-scrim) 55%, transparent) 100%);
  --grad-card-pale: linear-gradient(160deg, var(--c-bg) 0%, var(--c-green-pale) 100%);  /* ヒーローの薄い緑の面（AI・アプリ／SEO） */

  /* ---- 影（洗い出し 1-5） ---- */
  --sh-menu: 0 24px 40px -24px color-mix(in srgb, var(--c-ink) 25%, transparent);
  --sh-consult: 0 30px 60px -30px color-mix(in srgb, var(--c-green-bright) 70%, transparent);
  --sh-tag: 0 16px 30px -16px color-mix(in srgb, var(--c-dark) 50%, transparent);
  --sh-visual: 0 40px 90px -40px color-mix(in srgb, var(--c-ink) 45%, transparent);
  --sh-visual-2: 0 40px 90px -40px color-mix(in srgb, var(--c-ink) 40%, transparent);
  --sh-stack: 0 30px 60px -40px color-mix(in srgb, var(--c-ink) 30%, transparent);
  --sh-stack-first: 0 30px 60px -40px color-mix(in srgb, var(--c-dark) 60%, transparent);
  --sh-panel: 0 30px 60px -34px color-mix(in srgb, var(--c-dark) 55%, transparent);
  --sh-on-dark: 0 50px 90px -40px color-mix(in srgb, var(--c-black) 80%, transparent);
  --sh-phone: 0 36px 60px -30px color-mix(in srgb, var(--c-ink) 45%, transparent);
  --sh-pill: 0 24px 48px -24px color-mix(in srgb, var(--c-ink) 35%, transparent);        /* トップのヒーローの検索窓 */
  --sh-hero-phone: 0 40px 70px -30px color-mix(in srgb, var(--c-ink) 55%, transparent);  /* トップのヒーローのスマホ */
  --sh-on-dark-2: 0 40px 70px -30px color-mix(in srgb, var(--c-black) 70%, transparent); /* 黒いカードの中の画面の絵 */
  --sh-pulse-from: 0 0 0 0 color-mix(in srgb, var(--c-green-bright) 55%, transparent);  /* 見守りの点の輪 */
  --sh-pulse-to: 0 0 0 10px color-mix(in srgb, var(--c-green-bright) 0%, transparent);
  /* 2026-11-03 まとめでページの CSS から移した物（かっこの中は使っているページ） */
  --sh-schedule: 0 36px 60px -30px color-mix(in srgb, var(--c-ink) 35%, transparent);    /* 予約表の絵の影（AI・アプリ。rgba(27,29,28,.35)） */
  --sh-search-pill: 0 10px 24px -18px color-mix(in srgb, var(--c-ink) 40%, transparent); /* ヒーローの検索窓の影（SEO。rgba(27,29,28,.4)） */
  --sh-price-site: 0 20px 40px -28px color-mix(in srgb, var(--c-ink) 35%, transparent);  /* サイトのイメージの影（費用の目安。rgba(27,29,28,.35)） */
  --sh-field-error: inset 0 0 0 1px var(--c-error);    /* 誤りの欄の枠を 2px に見せる（大きさは変えない。フォーム） */

  /* ---- 書体 ---- */
  --ff-base: 'Inter', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --ff-ja: 'Noto Sans JP', sans-serif;      /* 数字のうしろの単位（月・円・年・社以上）だけ */

  /* ---- 文字の大きさ（洗い出し 1-2。cqi は .l-root の幅に対する割合） ---- */
  --fs-root: 17px;
  --lh-root: 1.7;
  --ls-root: 0.01em;
  --fs-h1: clamp(38px, 5.4cqi, 78px);              /* ページの見出し（11ページ） */
  --fs-h1-sm: clamp(34px, 4.6cqi, 66px);           /* プライバシーポリシー・記事など長い見出し */
  --fs-hero-catch: clamp(22px, 2.2cqi, 32px);      /* h1 の下の一言 */
  --fs-hero-lead: clamp(16px, 1.3cqi, 19px);       /* ヒーローの説明 */
  --fs-hero-eyebrow: clamp(14px, 1.1cqi, 16px);    /* ヒーローの英字の行 */
  --fs-eyebrow: 13px;                              /* 段の英字の小見出し */
  --fs-h2: clamp(32px, 4.4cqi, 64px);              /* 段の見出し */
  --fs-h2-cta: clamp(36px, 5.6cqi, 80px);          /* 相談の帯 */
  --fs-h2-search: clamp(34px, 5cqi, 72px);         /* 検索でも、AIでも */
  --fs-h2-diag: clamp(32px, 4cqi, 56px);           /* 今のサイト、大丈夫？ */
  --fs-h2-split: clamp(26px, 2.8cqi, 40px);        /* 左右分けの段・送信後 */
  --fs-h2-label: 15px;                             /* 小さいラベル型の見出し */
  --fs-statement: clamp(24px, 3cqi, 44px);         /* 小さいラベル型の大きな一文 */
  --fs-statement-lg: clamp(30px, 4.2cqi, 60px);
  --fs-h2-step: clamp(22px, 2.2cqi, 30px);         /* 費用の目安の 01〜07 */
  --fs-h2-article: clamp(19px, 1.7cqi, 23px);      /* プライバシーの各項目 */
  --fs-h3: 19px;                                   /* カード・実績・流れ */
  --fs-h3-card: clamp(20px, 1.7cqi, 24px);         /* 線の絵つきカード */
  --fs-h3-lg: clamp(22px, 2cqi, 30px);             /* 大きいカード */
  --fs-h3-biz: clamp(28px, 3cqi, 44px);            /* トップの4つの事業 */
  --fs-lead: clamp(16px, 1.4cqi, 20px);            /* 段の説明文 */
  --fs-faq-q: clamp(17px, 1.4cqi, 20px);
  --fs-faq-a: 16px;
  --fs-band: clamp(48px, 7.2cqi, 116px);           /* 英字の帯 */
  --fs-wordmark: 14cqi;                            /* フッターの PLANART */
  --fs-price: clamp(40px, 4cqi, 56px);
  --fs-price-sm: clamp(32px, 3.2cqi, 44px);
  --fs-figure: clamp(44px, 5cqi, 72px);            /* 2014年・600社以上 */
  --fs-consult: clamp(14px, 1.2cqi, 17px);         /* 丸い相談ボタン */
  --fs-biz-catch: clamp(18px, 1.6cqi, 23px);       /* 4つの仕事のカードの一言 */
  --fs-care-big: clamp(36px, 3.6cqi, 52px);        /* 保守の段の「毎月」「10分ごと」「毎日」 */
  --fs-h3-plan: clamp(24px, 2.4cqi, 34px);         /* 保守プランは、頼める作業の量で3つ。 */
  --fs-diag-lead: clamp(16px, 1.4cqi, 19px);       /* 無料の診断の説明 */
  --fs-quote: clamp(19px, 1.7cqi, 24px);           /* トップの代表の言葉 */
  --fs-est-initial: clamp(30px, 3cqi, 44px);       /* 費用の目安の初期費用 */
  --fs-est-monthly: clamp(24px, 2.2cqi, 30px);     /* 費用の目安の毎月の費用 */
  --fs-line-title: clamp(20px, 1.8cqi, 26px);      /* LINE予約の料金 */
  --fs-line-price: clamp(26px, 2.4cqi, 34px);
  --fs-pill: clamp(13px, 1.2cqi, 17px);            /* トップのヒーローの検索窓 */
  /* 2026-11-03 Webサイト・EC で足した物（共通の部品 22〜27章） */
  --fs-hero-panel: clamp(17px, 1.5cqi, 21px);      /* ヒーローの右のパネルの一文 */
  --fs-plan-name: clamp(24px, 2.2cqi, 32px);       /* つくり方のカードの名前 */
  --fs-plan-price: clamp(28px, 2.8cqi, 42px);      /* つくり方のカードの金額 */
  --fs-price-row: clamp(17px, 1.5cqi, 21px);       /* 料金の表の金額 */
  --fs-price-row-sub: clamp(15px, 1.3cqi, 18px);   /* 料金の表の「Webサイトと一緒」の金額 */
  --fs-card-statement: clamp(22px, 2cqi, 28px);    /* 黒い相談のカードの一文（工事） */
  --fs-flow-num: clamp(40px, 4cqi, 56px);          /* 番号の大きなカード（お問い合わせ・会社案内） */
  --fs-flow-card: clamp(19px, 1.6cqi, 22px);       /* 番号の大きなカードの見出し（お問い合わせ） */
  --fs-statement-dark: clamp(28px, 3.8cqi, 54px);  /* 黒い面の段の塗られる一文（AI・アプリ／ブランディング／SEO） */
  --fs-statement-md: clamp(26px, 3.4cqi, 48px);    /* 同じ（工事の「デザインと一緒に頼むと」） */
  --fs-statement-lead: clamp(16px, 1.3cqi, 18px);  /* 黒い面の段の説明・終わりの文 */
  --fs-dark-card: clamp(19px, 1.7cqi, 24px);       /* 黒い面の段のカードの見出し・問い */
  /* 2026-11-03 まとめでページの CSS から移した物（かっこの中は使っているページ） */
  --fs-line-point: clamp(18px, 1.5cqi, 21px);      /* LINE予約のしくみの見出し（AI・アプリ） */
  --fs-h2-promise: clamp(30px, 3.6cqi, 52px);      /* 「お約束できないこと」の見出し（SEO） */
  --fs-promise: clamp(22px, 2.4cqi, 34px);         /* 同じ段の大きな一文（SEO） */
  --fs-promise-lead: clamp(16px, 1.3cqi, 18px);    /* 同じ段の説明（SEO。値は --fs-statement-lead と同じだが、役目が違う） */
  --fs-ways-title: clamp(20px, 1.8cqi, 26px);      /* 「ご依頼のしかた」のカードの見出し（SEO。値は --fs-line-title と同じ） */
  --fs-price-initial: clamp(28px, 2.6cqi, 38px);   /* 右の黒い面の初期費用（費用の目安） */
  --fs-price-bar-initial: clamp(20px, 1.8cqi, 26px); /* 下の帯の初期費用（費用の目安） */
  --fs-price-bar-monthly: clamp(17px, 1.4cqi, 20px); /* 下の帯の毎月（費用の目安） */
  --fs-contact-big: clamp(26px, 2.4cqi, 34px);     /* 右の3枚の大きな文字（お問い合わせ。電話・2営業日以内。値は --fs-line-price と同じだが、役目が違う） */
  --fs-form-done-sm: clamp(21px, 2cqi, 26px);      /* 費用の目安の送ったあとの一文（フォーム） */
  --ls-eyebrow: 0.16em;

  /* ---- 余白：段・中身（洗い出し 1-3） ---- */
  --sp-inline: clamp(20px, 5cqi, 64px);            /* 段の中身の横（106回） */
  --sp-inline-nav: clamp(16px, 4cqi, 48px);        /* ヘッダー・スマホのメニュー */
  --sp-hero-outer: clamp(8px, 1.1cqi, 16px);       /* ヒーローの面のまわり */
  --sp-section: clamp(64px, 6.4cqi, 104px);        /* ふつうの段の上下（47回） */
  --sp-section-cta: clamp(72px, 7cqi, 112px);      /* 相談の帯 */
  --sp-section-md: clamp(56px, 5.6cqi, 96px);
  --sp-section-sm: clamp(48px, 5cqi, 80px);
  --sp-section-xs: clamp(40px, 4.4cqi, 72px);
  --sp-stack: clamp(28px, 3cqi, 44px);             /* 段の中の間（35回） */
  --sp-card: clamp(24px, 2.6cqi, 36px);            /* カードの内側 */
  --sp-card-2: clamp(22px, 2.6cqi, 34px);
  --sp-card-lg: clamp(24px, 3cqi, 40px);
  --sp-row: clamp(22px, 2.4cqi, 32px);             /* プライバシーの項目の上下 */
  --sp-hero-gap: clamp(14px, 1.3cqi, 18px);        /* ヒーローの文の間 */
  --sp-nav-gap: clamp(12px, 1.9cqi, 30px);         /* PC のメニューの間 */
  --sp-cta-gap: clamp(32px, 5cqi, 80px);
  --sp-foot-gap: clamp(28px, 4cqi, 64px);
  --sp-stack-sm: clamp(24px, 2.6cqi, 36px);        /* 段の中の間（小）：プラナートについて・実績・よくある質問 */
  --sp-card-sm: clamp(20px, 2.6cqi, 36px);         /* 小さめのカードの内側（費用の目安・LINE予約の料金・02 の絵） */
  --sp-plan: clamp(24px, 3cqi, 36px);              /* 保守プランのカードの内側 */
  --sp-biz: clamp(24px, 3.6cqi, 56px);             /* 4つの仕事のカードの内側と、文と絵の間 */
  --sp-biz-inline: clamp(12px, 3cqi, 40px);        /* 4つの仕事の段の横 */
  --sp-biz-head: clamp(8px, 2cqi, 24px);           /* 4つの仕事の見出しの横 */
  --sp-biz-app: clamp(12px, 2cqi, 28px);           /* 02 の絵の中の間 */
  --sp-band-top: clamp(28px, 3.4cqi, 52px);        /* 英字の帯の上（トップだけ 12px） */
  --sp-band-bottom: clamp(12px, 1.6cqi, 24px);     /* 英字の帯の下（トップだけ 44px） */
  --sp-aio-gap: clamp(16px, 1.6cqi, 22px);         /* 検索とAIの段の中の間 */
  --sp-aio-top: clamp(20px, 2.4cqi, 36px);         /* 検索とAIの段の、説明と手順の間 */
  --sp-track-gap: clamp(14px, 1.6cqi, 22px);       /* 実績のカードの間 */
  --sp-section-tail: clamp(8px, 1cqi, 16px);       /* 無料の診断の段の下 */
  --sp-panel: clamp(28px, 4.4cqi, 64px);           /* 無料の診断の黒い面の内側 */
  --sp-panel-gap: clamp(28px, 3cqi, 40px);
  --sp-panel-cols: clamp(28px, 4cqi, 64px);
  --sp-est-result: clamp(24px, 2.8cqi, 40px);      /* 費用の目安の黒い面の内側 */
  --sp-line-gap: clamp(24px, 3cqi, 48px);          /* LINE予約の料金の文と金額の間 */
  --sp-about-card: clamp(20px, 2.8cqi, 40px);      /* トップの代表のカードの内側 */
  --sp-hero-top: clamp(40px, 4cqi, 64px);          /* トップのヒーローの文の上 */
  --sp-hero-bottom: clamp(24px, 2.2cqi, 34px);     /* トップのヒーローの文の下 */
  --sp-hero-gap-top: clamp(16px, 1.4cqi, 20px);    /* トップのヒーローの文の間 */
  --sp-stage-inline: clamp(12px, 4cqi, 64px);      /* トップのヒーローの絵の組の横 */
  --sp-tilt-top: clamp(4px, 0.6cqi, 10px);
  --sp-pill-left: clamp(6px, 3cqi, 48px);          /* トップのヒーローの検索窓の左 */
  --sp-phone-right: clamp(10px, 6cqi, 100px);      /* トップのヒーローのスマホの右 */
  --sp-phone-bottom: clamp(0px, 4cqi, 60px);
  --sp-phone-pad: clamp(4px, 0.5cqi, 7px);
  --sp-sticky-stack: 72px;                         /* 重なるカードの1枚目の止まる高さ（2枚目から 20px ずつ下） */
  /* 2026-11-03 Webサイト・EC で足した物（共通の部品 22〜27章） */
  --sp-hero-stage-bottom: clamp(28px, 2.6cqi, 40px);   /* 型2・3のヒーローの文の組の下（絵の組の上） */
  --sp-hero-panel-bottom: clamp(20px, 3cqi, 44px);     /* 型2・3のヒーローの面の下 */
  --sp-hero-contact-top: clamp(40px, 4.4cqi, 72px);    /* 型5（お問い合わせ）の文の組の上 */
  --sp-hero-contact-bottom: clamp(36px, 4cqi, 60px);   /* 型5の文の組の下 */
  --sp-hero-panel: clamp(18px, 2cqi, 28px);            /* ヒーローの右のパネルの内側 */
  --sp-hero-card-gap: clamp(16px, 2.6cqi, 40px);       /* ヒーローの薄い緑の面の中の間（AI・アプリ） */
  --sp-hero-card-col: clamp(22px, 3cqi, 44px);         /* ヒーローの薄い緑の面の内側（SEO の縦の並び） */
  --sp-card-xl: clamp(24px, 3cqi, 44px);               /* つくり方のカード・ヒーローの薄い緑の面の内側 */
  --sp-feature: clamp(26px, 3cqi, 44px);               /* 線の絵つきカードの上の大きなカードの内側 */
  --sp-feature-gap: clamp(24px, 4cqi, 56px);           /* 大きなカードの絵と文の間 */
  --sp-price-table-block: clamp(4px, 1cqi, 16px);      /* 料金の表の面の上下 */
  --sp-price-table-inline: clamp(20px, 3cqi, 44px);    /* 料金の表の面の左右 */
  --sp-statement-head: clamp(18px, 2cqi, 28px);        /* 黒い面の段の見出し・一文・説明の間 */
  --sp-statement-tail: clamp(20px, 2.2cqi, 30px);      /* 黒い面の段の終わりの文の上 */
  /* 2026-11-03 まとめでページの CSS から移した物（かっこの中は使っているページ） */
  --sp-split-gap: clamp(32px, 5cqi, 72px);             /* 左右に分けた組の間（会社案内の代表メッセージ・モットー、工事の3つの良さと工程表。2つのページの同じ値を1つに） */
  --sp-biz-card: clamp(24px, 2.8cqi, 40px);            /* 4つの仕事のカードの内側（会社案内。--sp-about-card は 20px から。キャンバスは 24px から） */
  --sp-access-gap: clamp(24px, 4cqi, 56px);            /* アクセスの文と地図の間（会社案内） */
  --sp-gantt: clamp(20px, 2.4cqi, 32px);               /* 工程表のカードの内側（工事） */
  --sp-section-partner: clamp(56px, 5.6cqi, 88px);     /* 元請・工務店の段の上下（工事。--sp-section-md は 96px まで。キャンバスは 88px まで） */
  --sp-partner-panel: clamp(24px, 4cqi, 56px);         /* 元請・工務店の薄い緑の面の内側（工事） */
  --sp-line-cols: clamp(24px, 3.4cqi, 56px);           /* LINE予約の段の、絵としくみの間（AI・アプリ） */
  --sp-line-visual-block: clamp(28px, 3.4cqi, 52px);   /* LINE予約の絵の、薄い緑の面の上下（AI・アプリ） */
  --sp-line-visual-inline: clamp(20px, 3cqi, 44px);    /* 同じ面の左右（AI・アプリ） */
  --sp-line-points: clamp(18px, 2cqi, 24px);           /* しくみ3つの間（AI・アプリ） */
  --sp-seo-step: clamp(0px, 3cqi, 40px);               /* ヒーローの「02 検索の結果に出る」の字下げ（SEO） */
  --sp-promise-cols: clamp(32px, 5cqi, 80px);          /* 「お約束できないこと」の左右の間（SEO。値は --sp-cta-gap と同じ） */
  --sp-promise-top: clamp(0px, 0.6cqi, 8px);           /* 同じ段の右の列の上（SEO） */
  --sp-ways-card: clamp(24px, 2.8cqi, 40px);           /* 「ご依頼のしかた」のカードの内側（SEO） */
  --sp-price-calc-top: clamp(40px, 4cqi, 64px);        /* 費用の目安を出す段の上（費用の目安） */
  --sp-price-calc-bottom: clamp(56px, 5.6cqi, 88px);   /* 同じ段の下（費用の目安） */
  --sp-price-steps: clamp(36px, 3.6cqi, 52px);         /* 01〜07 の段の間（費用の目安） */
  --sp-price-side-card: clamp(20px, 2.6cqi, 32px);     /* 内訳の右の2枚のカードの内側（費用の目安） */
  --sp-faq-split: clamp(32px, 5cqi, 80px);             /* 左の見出しと右の問いの間（よくある質問。キャンバスの .pe-split の列の間） */
  --sp-contact-cols: clamp(32px, 5cqi, 72px);          /* フォームと右の3枚の間（お問い合わせ。キャンバスの gap: 40px clamp(32px, 5cqi, 72px) の横） */
  --sp-contact-card: clamp(22px, 2.4cqi, 32px);        /* 右の3枚の内側（お問い合わせ。値は --sp-row と同じだが、役目が違う） */
  --sp-submit-start: 30px;                             /* 送信のボタンの左の内側（フォーム。キャンバスの padding-inline: 30px 9px） */
  --sp-form-card: clamp(20px, 3cqi, 44px);             /* 白い面のフォームの内側（フォーム。EstimateE #consult の form） */
  --sp-form-done: clamp(28px, 3.4cqi, 48px);           /* 送ったあとの画面の内側（フォーム。ContactE・EstimateE） */

  /* ---- 余白：小さい間（キャンバスの px をそのまま。名前の数字＝px） ---- */
  --s-1: 1px;
  --s-2: 2px;
  --s-3: 3px;
  --s-4: 4px;
  --s-5: 5px;
  --s-6: 6px;
  --s-7: 7px;
  --s-8: 8px;
  --s-9: 9px;
  --s-10: 10px;
  --s-11: 11px;
  --s-12: 12px;
  --s-14: 14px;
  --s-16: 16px;
  --s-18: 18px;
  --s-20: 20px;
  --s-22: 22px;
  --s-24: 24px;
  --s-26: 26px;
  --s-28: 28px;
  --s-32: 32px;
  --s-36: 36px;
  --s-40: 40px;
  --s-44: 44px;
  --s-46: 46px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;

  /* ---- 角丸（洗い出し 1-4） ---- */
  --r-pill: 999px;
  --r-circle: 50%;
  --r-card: 28px;              /* カード（82回） */
  --r-card-md: 24px;           /* 実績・施工事例・数字のカード */
  --r-20: 20px;
  --r-18: 18px;
  --r-16: 16px;
  --r-field: 14px;             /* 入力欄 */
  --r-8: 8px;
  --r-32: 32px;
  --r-3: 3px;                  /* 作業台だけの札 */
  --r-4: 4px;
  --r-12: 12px;
  --r-14: 14px;                /* 画面の絵 */
  --r-22: 22px;
  --r-24: 24px;
  --r-30: 30px;                /* スマホの絵 */
  --r-40: 40px;
  --r-50: 50px;
  --r-62: 62px;                /* スマホのまわりの光 */
  --r-phone: clamp(20px, 2.6cqi, 38px);       /* トップのヒーローのスマホ */
  --r-phone-inner: clamp(16px, 2.1cqi, 31px);
  --r-hero: clamp(20px, 2.4cqi, 32px);     /* ヒーローの面 */
  --r-panel: clamp(24px, 2.4cqi, 32px);    /* 無料のサイト診断の黒い面 */
  --r-expand: 48px;                         /* 黒い面が広がる前の角 */
  /* 2026-11-03 まとめでページの CSS から移した物（かっこの中は使っているページ） */
  --r-10: 10px;                             /* 予約表の行（AI・アプリの LINE予約の絵） */
  --r-26: 26px;                             /* ヒーローのスマホの画面の角（AI・アプリ。トップの 02 の絵は 24px） */
  --r-price-thumb: 7px;                     /* サイトのイメージの1枚（費用の目安） */
  --r-price-line: 2px;                      /* サイトのイメージの中の線（費用の目安） */

  /* ---- 動き（洗い出し 1-7） ---- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-num: cubic-bezier(.2, .8, .2, 1);
  --glow-a: 0deg;              /* 光の向き（@property で登録。動きの中で回す） */

  /* ---- 幅・高さ ---- */
  --w-container: 1180px;       /* 中身の最大幅（97回） */
  --w-narrow: 880px;           /* よくある質問の段・プライバシー・記事の本文 */
  --w-visual: 1120px;          /* ヒーローの絵 */
  --w-visual-inner: 1040px;
  --w-wide: 1240px;            /* 4つの仕事の段（ほかの段より少し広い） */
  --w-table: 920px;            /* 料金の表と、その下の注の行（ブランディング・AI・アプリ） */
  --header-h: 52px;
  --scroll-offset: 60px;       /* ページ内リンクの着地（ヘッダーの分） */
  --sticky-top: 76px;          /* ついてくる右の面 */
  --admin-bar-h: 0px;          /* ログイン中の管理バーの分（下の .admin-bar で入れる） */

  /* ---- 区切りの幅（参照用。@container の条件には変数を書けないので、規則には 760px と直接書く） ---- */
  --bp-sp: 760px;
}

/* ==========================================================================
   1. 土台
   ========================================================================== */
/* 箱の大きさの数え方：キャンバスと同じく、ふだんは content-box（max-width の外に左右の余白が付く）。
   キャンバスで box-sizing: border-box を書いている部品（外枠・ボタン・カード・入力欄・よくある質問の行など）だけ、
   その部品の規則に border-box を書く。全体を border-box にすると、段の中身の幅が 1180px より狭くなる
   （2026-11-01、作業台とキャンバスを並べて、フッターの左の端が 65px ずれたのを見つけた）。 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--scroll-offset) + var(--admin-bar-h));
}

body {
  margin: 0;
  background: var(--c-bg);
}

/* キャンバスの #top にあたる外枠。cqi とコンテナクエリの基準になる。 */
.l-root {
  position: relative;
  container-type: inline-size;
  width: 100%;
  box-sizing: border-box;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-base);
  font-size: var(--fs-root);
  line-height: var(--lh-root);
  letter-spacing: var(--ls-root);
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

/* 部品のリストだけ点と字下げを消す。強さ 0（:where）にして、本文（.c-prose）のリストに負けるようにする
   （WordPress のエディタのリストにも class が付くので、ul[class] のままだと記事の点まで消える） */
:where(ul[class], ol[class]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--c-green);
}

img,
svg,
video {
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

.admin-bar {
  --admin-bar-h: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar {
    --admin-bar-h: 46px;
  }
}

/* 600px 以下では管理バーが画面に固定されない（WordPress の仕様） */
@media screen and (max-width: 600px) {
  .admin-bar {
    --admin-bar-h: 0px;
  }
}

/* ==========================================================================
   2. 小さな道具（u-）
   ========================================================================== */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 文節で改行（キャンバスの .pe-ap。AI・アプリ／SEO／よくある質問／費用の目安／プライバシーで使う） */
.u-phrase :is(p, h2, h3, li, dt, dd, summary, th, td) {
  word-break: auto-phrase;
}

/* 折れない箱（文節の配列の1つ分。inc/template-tags.php の planart_keep_html() が付ける。2026-11-05）
   行は箱の切れ目で折れるので、言葉の途中（「差し替｜え」「無料で｜すか？」）で折れない。
   上の auto-phrase は Chrome と Edge だけで、Safari と Firefox には効かないので、短い見出し・ボタン・問いはこちらで折る。
   1行に入りきらない長さの箱は、箱の中でふつうに折り返す（はみ出さない） */
.u-keep {
  display: inline-block;
}

/* 下線が左から伸びるリンク（キャンバスの .pe-ul） */
.u-hover-line {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .3s ease;
}

.u-hover-line:hover {
  background-size: 100% 1px;
}

/* 1文字ずつの見出し（キャンバスの .pe-ch）。遅れは --i（下の .u-i0〜） */
.u-ch {
  display: inline-block;
}

.u-ch-group {
  display: inline-block;
}

.u-i0 { --i: 0; }
.u-i1 { --i: 1; }
.u-i2 { --i: 2; }
.u-i3 { --i: 3; }
.u-i4 { --i: 4; }
.u-i5 { --i: 5; }
.u-i6 { --i: 6; }
.u-i7 { --i: 7; }
.u-i8 { --i: 8; }
.u-i9 { --i: 9; }
.u-i10 { --i: 10; }
.u-i11 { --i: 11; }
.u-i12 { --i: 12; }
.u-i13 { --i: 13; }
.u-i14 { --i: 14; }
.u-i15 { --i: 15; }
.u-i16 { --i: 16; }
.u-i17 { --i: 17; }
.u-i18 { --i: 18; }
.u-i19 { --i: 19; }
.u-i20 { --i: 20; }
.u-i21 { --i: 21; }
.u-i22 { --i: 22; }
.u-i23 { --i: 23; }
.u-i24 { --i: 24; }

/* 3列・2列（キャンバスの .pe-grid3／.pe-grid2）。幅 760px 以下は1列 */
.u-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.u-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (max-width: 760px) {
  .u-grid3,
  .u-grid2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 幅の狭い画面では出さない（キャンバスの .pe-hide-sm） */
  .u-hide-sm {
    display: none;
  }
}

/* 写真にマウスを乗せると少し大きくなる枠（動きは 28章。止めたときは途中でも止まる） */
.u-zoomimg img {
  transition: none;
}

/* 枠いっぱいに敷く画像（枠は position: relative で、縦横の比を決めておく） */
.u-cover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 塗られる文（キャンバスの .pe-fill）。動きが無いときは塗り終わった形。動きはスクロールに合わせて左から塗る（28章「動き」） */
.u-fill {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-color: var(--c-fill-from);
  background-image: var(--grad-fill);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* 黒い面の上の塗られる文（会社案内・AI・アプリ・SEO などの黒い段。まだ使っていない） */
.u-fill--on-dark {
  background-color: var(--c-text);
  background-image: var(--grad-fill-on-dark);
}

/* 作業台だけに出る「仮の画像（AI）」の札（inc/images.php の planart_image() が付ける。本番には仮の画像ごと出ない） */
.c-kari {
  position: absolute;
  top: var(--s-10);
  left: var(--s-10);
  z-index: 1;
  padding-block: var(--s-2);
  padding-inline: var(--s-6);
  border-radius: var(--r-3);
  background: var(--c-kari-bg);
  color: var(--c-kari);
  font-family: var(--ff-ja);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.c-kari--lg {
  top: var(--s-12);
  left: var(--s-12);
}

.c-kari--sm {
  top: var(--s-8);
  left: var(--s-8);
  padding-block: var(--s-1);
  padding-inline: var(--s-5);
  font-size: 11px;
}

.c-kari--phone {
  top: 18%;
  left: var(--s-8);
  padding-block: var(--s-1);
  padding-inline: var(--s-5);
  font-size: 11px;
}

/* ■ 押せる範囲を 44px にする（CLAUDE.md 3章「押せる物は 44px 以上」。見た目＝文字の位置・行の高さ・塗りの大きさは変えない）
   2026-11-03 まとめ：12ページを Playwright で測り、文の中のリンク以外で 44px に足りない物を、次の3つのやり方で広げた。
   1. 文字だけのリンク（電話の数字など）：inline-block にして padding で広げ、同じ量の負の margin で打ち消す
      （行の高さは margin の外形で決まるので変わらない）。上下の量は、隣の押せる物や文字に重ならない側へ寄せる。
      下線が左から伸びるリンク（u-hover-line）は background-origin・clip を content-box にして、下線の位置と長さを前のままにする。
   2. 塗りのあるボタン（ヘッダーの「相談する」など）：透明の border で広げ、background-clip: padding-box で塗りを前の大きさに残す。
      横に足した border は負の margin で打ち消し、フォーカスの輪は outline-offset で前と同じ所に描く。
   3. 隣の押せる物との間が無い所（フッターのメニューの行＝キャンバスで 32px おき）は、広げると隣の行の押せる所を取るので広げない
      （行の間を 44px にするかはボスの答え待ち。CLAUDE.md 10章）。 */

/* ==========================================================================
   3. 本文へ移動（キーボードで最初に止まる。ふだんは見えない）
   ========================================================================== */
/* 押せる範囲：透明の border 3px で 38px → 44px（1章の■の2。塗りの形はそのまま） */
.c-skip {
  position: absolute;
  top: calc(var(--admin-bar-h) + var(--s-8));
  left: var(--s-8);
  z-index: 100;
  margin: calc(-1 * var(--s-3));
  padding-block: var(--s-10);
  padding-inline: var(--s-16);
  border: var(--s-3) solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  background-clip: padding-box;
  color: var(--c-on-dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  translate: 0 -200%;
}

.c-skip:focus-visible {
  outline-offset: calc(var(--s-2) - var(--s-3));
  translate: 0 0;
}

/* 「本文へ移動」の次に止まる「動きを止める」（2026-11-13。4章の終わりの「動きを止めるボタン」）。見た目は「本文へ移動」と同じ */
.c-skip--motion {
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* ==========================================================================
   4. ヘッダー（キャンバスの header.pe-nav・12ページ共通）
   ========================================================================== */
.l-header {
  position: sticky;
  top: var(--admin-bar-h);
  z-index: 50;
  background: var(--c-header-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--c-header-line);
}

.l-header__inner {
  position: relative;
  max-width: var(--w-container);
  min-height: var(--header-h);
  margin: 0 auto;
  padding-inline: var(--sp-inline-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
}

.l-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
}

.l-header__logo-img {
  display: block;
  width: auto;
  height: 30px;
}

.l-header__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.l-header__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--sp-nav-gap);
}

.l-header__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-ink);
  font-size: 13px;
  text-decoration: none;
}

.l-header__nav-link[aria-current="page"] {
  color: var(--c-green);
  font-weight: 600;
  background-size: 100% 1px;
}

/* 名前が短く幅が 44px に足りないリンク（「実績」の2文字＝26px。header.php が planart_is_narrow_label() で付ける）。
   左右に 9px ずつ広げ、負の margin で打ち消す（1章の■の1）。メニューの間（--sp-nav-gap）は 12px より狭くならないので、隣と重ならない */
.l-header__nav-link--narrow {
  margin-inline: calc(-1 * var(--s-9));
  padding-inline: var(--s-9);
  background-origin: content-box;
  background-clip: content-box;
}

.l-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

/* 読んだ位置の線。動きが有効で、スクロールに合わせた動きに対応したブラウザだけ出る */
.l-header__progress {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-green-bright);
  transform-origin: 0 50%;
  scale: 0 1;
}

/* ---- 動きを止めるボタン ----
   2026-11-13 06:15 ボス「①にしてみるか！」で、ヘッダーの「II」の丸いボタン（キャンバスの button.pe-pause）をやめた（header.php の頭のコメント）。
   今は2つ：キーボードで最初に届く所の、ふだんは見えないボタン（3章の .c-skip--motion）と、フッターのいちばん下の行の文字のボタン（11章の .l-footer__motion）。
   どちらも JS が hidden を外す。「動きを減らす」設定の人には出さない（動く物が無いため） */
@media (prefers-reduced-motion: reduce) {
  .c-skip.c-skip--motion,
  .l-footer__bottom .l-footer__motion {
    display: none; /* 11章の .l-footer__link（inline-flex）より後に書いてあっても負けないように、クラスを2つ重ねる */
  }
}

/* ---- スマホのメニュー（キャンバスの details.pe-menu。JS は使わない） ---- */
.c-spmenu {
  display: none;
}

.c-spmenu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  list-style: none;
  color: var(--c-ink);
  cursor: pointer;
}

.c-spmenu__toggle::-webkit-details-marker {
  display: none;
}

.c-spmenu__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-block: var(--s-8) var(--s-20);
  padding-inline: var(--sp-inline-nav);
  display: flex;
  flex-direction: column;
  background: var(--c-menu-bg);
  border-bottom: 1px solid var(--c-header-line);
  box-shadow: var(--sh-menu);
}

.c-spmenu__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--c-line-menu);
  color: var(--c-ink);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.c-spmenu__item:last-child .c-spmenu__link {
  border-bottom: 0;
}

.c-spmenu__link[aria-current="page"] {
  color: var(--c-green);
  font-weight: 700;
}

@container (max-width: 760px) {
  .l-header__nav-list {
    display: none;
  }

  .c-spmenu {
    display: block;
  }
}

/* ==========================================================================
   5. ボタンとリンク（キャンバスの .pe-btn／.pe-link）
   ========================================================================== */
.c-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s ease;
}

.c-btn:hover {
  filter: brightness(.9);
}

/* ヘッダーの「相談する」。黒い塗りはキャンバスの 36px のまま、透明の border 4px で押せる範囲を 44px にした（1章の■の2）。
   ヘッダーの中では上下の真ん中にそろうので、高さが増えても塗りの位置は変わらない。横の border は負の margin で打ち消す */
.c-btn--sm {
  min-height: 44px;
  margin-inline: calc(-1 * var(--s-4));
  padding-inline: var(--s-16);
  border: var(--s-4) solid transparent;
  background-color: var(--c-ink);
  background-clip: padding-box;
  color: var(--c-on-dark);
  font-size: 13px;
}

.c-btn--sm:focus-visible {
  outline-offset: calc(var(--s-2) - var(--s-4));
}

/* 大ボタン（右に丸い矢印）。黒が基本 */
.c-btn--lg {
  gap: var(--s-12);
  min-height: 54px;
  padding-inline: var(--s-26) var(--s-8);
  background-color: var(--c-ink);
  color: var(--c-on-dark);
  font-size: 17px;
}

.c-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-circle);
  background: var(--c-green-bright);
  color: var(--c-dark);
}

.c-btn__arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* 黒い面の上の緑の大ボタン（無料の診断を申し込む・くわしく見積もる など） */
.c-btn--mint {
  background-color: var(--c-mint);
  color: var(--c-dark);
  font-weight: 700;
}

.c-btn--mint .c-btn__arrow {
  background: var(--c-dark);
  color: var(--c-mint);
}

/* 中くらいのボタン（矢印なし。費用の目安の黒い面の「くわしく見積もる」） */
.c-btn--md {
  min-height: 48px;
  padding-inline: var(--s-24);
  font-size: 16px;
}

/* 白の大ボタン（黒いカードの中。工事のページの「できること」の6枚目。キャンバス ConstructionE #scope）。c-btn--lg と一緒に付ける */
.c-btn--white {
  min-height: 50px;
  padding-inline: var(--s-22) var(--s-6);
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
}

.c-btn--white .c-btn__arrow {
  width: 38px;
  height: 38px;
}

/* 外枠つきボタン（Googleマップで開く・案内のリンク） */
.c-btn--outline {
  gap: var(--s-8);
  min-height: 50px;
  padding-inline: var(--s-22);
  border: 1px solid var(--c-muted);
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
}

/* 文のリンク（右に矢印） */
.c-textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 44px;
  color: var(--c-green);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  /* 句読点（、・）と、文節の配列の切れ目（<wbr>。planart_textlink() の label を配列で渡したとき）だけで折る
     （2026-11-13。Safari では「…質問を見｜る」「工｜事について」と折れていた）。1行に入らない長さのときだけ、はみ出さないように折る */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.c-textlink svg {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.c-textlink--lg {
  min-height: 48px;
  font-size: 17px;
}

.c-textlink--lg svg {
  width: 14px;
  height: 14px;
}

.c-textlink--on-dark {
  color: var(--c-mint);
}

/* 黒い面の上の白い文のリンク（費用の目安の「この内容で相談する」） */
.c-textlink--white {
  color: var(--c-on-dark);
}

/* 電話の数字 */
.c-tel {
  color: inherit;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

/* ==========================================================================
   6. ヒーロー（ページの最初の段。キャンバスの section.pe-hero）
   ここでは全ページ共通の外枠と文の組だけ。絵の組（サービス・数字・連絡の型）はページごとの CSS。
   ========================================================================== */
.c-hero {
  position: relative;
  overflow-x: clip;
  padding-inline: var(--sp-hero-outer);
  padding-top: var(--sp-hero-outer);
  background: var(--c-bg);
}

.c-hero__panel {
  position: relative;
  overflow: clip;
  border-radius: var(--r-hero);
  background: var(--grad-hero);
}

.c-hero__text {
  max-width: var(--w-container);
  margin: 0 auto;
  padding-inline: var(--sp-inline);
  padding-block: var(--sp-section-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-hero-gap);
  text-align: center;
}

.c-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-8) var(--s-14);
  color: var(--c-text);
  font-size: var(--fs-hero-eyebrow);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.c-hero__eyebrow-en {
  color: var(--c-green);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.c-hero__eyebrow-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--c-ink);
}

/* 'ja' を文節の配列で渡したときの文節（parts/hero.php）。文節の途中では折らない（2026-11-04 素人の目の見直し P-28。.c-diag__title-part と同じ） */
.c-hero__eyebrow-part {
  display: inline-block;
}

.c-hero__title {
  word-break: auto-phrase; /* 記事の長い題名を、文節の切れ目で折り返す（対応するブラウザだけ） */
  padding-bottom: 0.08em;
  color: var(--c-ink);
  font-size: var(--fs-h1);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-feature-settings: 'palt';
  text-wrap: balance;
}

/* 1文字ずつの見出し（inc/template-tags.php の planart_chars）。段ごとに折り返す */
.c-hero__title .u-ch-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.c-hero__title--sm {
  font-size: var(--fs-h1-sm);
}

.c-hero__catch {
  color: var(--c-ink);
  font-size: var(--fs-hero-catch);
  line-height: 1.45;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.c-hero__catch-em {
  color: var(--c-green);
}

.c-hero__lead {
  max-width: 36em;
  color: var(--c-sub);
  font-size: var(--fs-hero-lead);
  line-height: 1.75;
  text-wrap: pretty;
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-12) var(--s-28);
  margin-top: var(--s-4);
}

/* ==========================================================================
   7. 段の外枠と見出し（キャンバスの section > div・見出しの型A）
   ========================================================================== */
/* ページの中のリンクの着地（ヘッダーの分）は html の scroll-padding-top（1章）だけで取る。
   2026-11-03：ここにあった scroll-margin-top を外した（html の分と足し算になり、着地がキャンバスの 60px ではなく 120px になっていた） */
.l-section {
  background: var(--c-bg);
}

.l-section--surface {
  background: var(--c-surface);
}

/* 横にはみ出す物を段の端で切る（トップの実績の列が流れるとき） */
.l-section--clip {
  overflow-x: clip;
}

.l-section__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding-inline: var(--sp-inline);
  padding-block: var(--sp-section);
  display: flex;
  flex-direction: column;
  gap: var(--sp-stack);
}

.l-section__inner--narrow {
  max-width: var(--w-narrow);
}

/* 記事・プライバシーポリシーの本文の段（上が少し詰まる。キャンバスの PrivacyE の本文と同じ） */
.l-section__inner--article {
  padding-block: var(--sp-section-xs) var(--sp-section);
}

/* 記事のアイキャッチ */
.c-post-thumb img {
  display: block;
  width: 100%;
  border-radius: var(--r-card-md);
  background: var(--c-frame);
}

/* 記事のタグ */
.c-post-tags {
  padding-top: var(--s-24);
  border-top: 1px solid var(--c-line-soft);
}

.c-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-12);
  text-align: center;
}

.c-eyebrow {
  color: var(--c-green);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.c-eyebrow--on-dark {
  color: var(--c-mint);
}

.c-heading__title {
  color: var(--c-ink);
  font-size: var(--fs-h2);
  line-height: 1.18;
  font-weight: 700;
  font-feature-settings: 'palt';
  text-wrap: balance;
}

/* 2026-11-03：text-wrap: pretty を外した（キャンバスの段の説明は9ページとも pretty を付けていない。付けると改行の位置がずれる） */
.c-heading__lead {
  max-width: 34em;
  color: var(--c-sub);
  font-size: var(--fs-lead);
  line-height: 1.8;
}

/* 説明の幅（段によって 30em・32em） */
.c-heading__lead--narrow {
  max-width: 30em;
}

.c-heading__lead--mid {
  max-width: 32em;
}

/* 見出しの型B：小さいラベル（英字の小見出しと小さな h2 を横に並べる。トップの「プラナートについて」） */
.c-heading--label {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-4) var(--s-14);
}

.c-heading__label {
  color: var(--c-text);
  font-size: var(--fs-h2-label);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 段の中の小見出し（h3。段の見出しの下に、もう1つの流れを置くとき。無料のサイト診断のページの「くわしい診断のお申し込み」。2026-11-06 夜）。
   段の見出し（h2）より小さくして、上を少し空ける */
.c-heading--sub {
  padding-top: var(--sp-stack);
}

.c-heading--sub .c-heading__title {
  font-size: var(--fs-h2-split);
  line-height: 1.3;
}

/* 見出しの型C：左寄せの見出しと、右の「すべて見る」（トップ・実績のページの実績の段） */
.c-heading-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-12) var(--s-32);
}

.c-heading--start {
  min-width: 0;
  align-items: flex-start;
  gap: var(--s-10);
  text-align: left;
}

.c-heading--start .c-heading__title {
  line-height: 1.15;
  text-wrap: wrap;
}

.c-heading--start .c-heading__lead {
  max-width: 32em;
}

/* 段の中の間（小）：プラナートについて・実績・よくある質問 */
.l-section__inner--gap-sm {
  gap: var(--sp-stack-sm);
}

/* 英字の小見出しの小さい形（LINE予約の料金・費用の目安の黒い面） */
.c-eyebrow--sm {
  font-size: 12px;
}

/* ==========================================================================
   8. 記事・固定ページの本文（WordPress のエディタで書いた中身）
   キャンバスに記事のページは無い。プライバシーポリシーの本文（幅 880px・16px・行 1.9）を手本に組んだ。
   ========================================================================== */
.c-prose {
  min-width: 0;
  color: var(--c-text);
  font-size: var(--fs-faq-a);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.c-prose > * + * {
  margin-top: var(--s-24);
}

.c-prose :where(h2, h3, h4, h5, h6) {
  color: var(--c-ink);
  font-weight: 700;
  font-feature-settings: 'palt';
  text-wrap: balance;
}

.c-prose h2 {
  margin-top: var(--s-56);
  padding-top: var(--s-24);
  border-top: 1px solid var(--c-ink);
  font-size: var(--fs-h3-lg);
  line-height: 1.4;
}

.c-prose h3 {
  margin-top: var(--s-44);
  font-size: var(--fs-h3-card);
  line-height: 1.45;
}

.c-prose :where(h4, h5, h6) {
  margin-top: var(--s-36);
  font-size: var(--fs-h3);
  line-height: 1.5;
}

.c-prose > :first-child {
  margin-top: 0;
}

.c-prose a {
  color: var(--c-green);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.c-prose :where(ul, ol) {
  padding-left: 1.4em;
}

.c-prose ul {
  list-style: disc;
}

.c-prose ol {
  list-style: decimal;
}

.c-prose li + li {
  margin-top: var(--s-6);
}

.c-prose li::marker {
  color: var(--c-green);
}

.c-prose strong {
  color: var(--c-ink);
}

.c-prose blockquote {
  padding-block: var(--s-16);
  padding-inline: var(--s-24);
  border-left: 2px solid var(--c-green);
  background: var(--c-surface);
  border-radius: 0 var(--r-16) var(--r-16) 0;
}

.c-prose :where(img, video) {
  display: block;
  border-radius: var(--r-20);
}

.c-prose figure {
  margin-inline: 0;
}

.c-prose :where(figcaption, .wp-element-caption) {
  margin-top: var(--s-8);
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.7;
}

.c-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.8;
}

.c-prose :where(th, td) {
  padding-block: var(--s-14);
  padding-inline: var(--s-12);
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  vertical-align: top;
}

.c-prose th {
  color: var(--c-sub);
  font-weight: 700;
}

.c-prose thead th {
  border-bottom-color: var(--c-line);
}

/* WordPress の表のブロックは四方に線を引く。キャンバスの表と同じく、横の線だけにする */
.c-prose .wp-block-table :is(th, td) {
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--c-line-soft);
}

.c-prose .wp-block-table thead {
  border-bottom: 0;
}

.c-prose .wp-block-table thead th {
  border-bottom-color: var(--c-line);
}

.c-prose :where(pre, code) {
  border-radius: var(--r-8);
  background: var(--c-surface);
  font-size: 14px;
}

.c-prose code {
  padding-inline: var(--s-4);
}

.c-prose pre {
  padding: var(--s-16);
  overflow-x: auto;
}

.c-prose pre code {
  padding: 0;
}

.c-prose hr {
  border: 0;
  border-top: 1px solid var(--c-line-soft);
}

.c-prose .aligncenter {
  margin-inline: auto;
}

.c-prose .alignleft {
  float: left;
  margin-right: var(--s-24);
}

.c-prose .alignright {
  float: right;
  margin-left: var(--s-24);
}

.c-prose::after {
  content: "";
  display: block;
  clear: both;
}

/* 表やコードが本文より広いときは、その中だけ横に動く */
.c-prose .wp-block-table {
  overflow-x: auto;
}

/* 表の文字が言葉の途中で折れないように（2026-11-12。公開のあとに直す＝ボス 17:28「公開後に直してもらってOK」）
   スマホの幅で、列の多い表が細くなりすぎて「セールの告｜知」のように折れていた。わけは2つ：
   ①WordPress の表のブロックは「固定幅のセル」（has-fixed-layout）が既定で、列を均等に割る
   ②本文の overflow-wrap: anywhere が、セルの一番細い幅を1文字にする
   → 列の幅は中身に合わせ、3列以上の表は最小の幅を決めて、狭い画面ではその表の中だけ横に動かす。
   日本語の文は文節で折る（word-break: auto-phrase は Chrome と Edge だけ。Safari と Firefox は今までどおり文字の間で折れる） */
.c-prose .wp-block-table table {
  table-layout: auto;
}

.c-prose .wp-block-table table:has(tr > :nth-child(3)) {
  min-width: 36em;
}

.c-prose .wp-block-table :is(th, td) {
  overflow-wrap: break-word;
  word-break: auto-phrase;
}

/* 本文の見出しも、文節で折る（Chrome と Edge。言葉の途中で折れない） */
.c-prose :where(h2, h3) {
  word-break: auto-phrase;
}

/* ==========================================================================
   9. 記事の一覧（カテゴリー・タグ・年月・検索の結果。キャンバスに一覧のページは無い。よくある質問の行を手本にした）
   ========================================================================== */
.c-postlist {
  border-top: 1px solid var(--c-ink);
}

.c-postlist__item {
  border-bottom: 1px solid var(--c-line);
}

.c-postlist__link {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4) var(--s-20);
  min-height: 72px;
  padding-block: var(--s-18);
  color: var(--c-ink);
  text-decoration: none;
}

.c-postlist__date {
  color: var(--c-sub);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.c-postlist__title {
  font-size: var(--fs-faq-q);
  line-height: 1.6;
  font-weight: 700;
  text-wrap: pretty;
}

.c-postlist__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-circle);
  background: var(--c-chip);
  color: var(--c-green);
  transition: translate .25s ease;
}

.c-postlist__arrow svg {
  width: 14px;
  height: 14px;
}

.c-postlist__link:hover .c-postlist__title {
  color: var(--c-green);
}

.c-postlist__empty {
  color: var(--c-text);
  font-size: var(--fs-faq-a);
  line-height: 1.9;
}

@container (max-width: 760px) {
  .c-postlist__link {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .c-postlist__date {
    grid-column: 1 / -1;
  }
}

/* ---- ページ送り ---- */
.c-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-8);
}

.c-pagination__list > li > :is(a, span),
.c-pagination__list > :is(a, span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--s-14);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.c-pagination__list a:hover,
.c-pagination__list > li > a:hover {
  border-color: var(--c-ink);
}

.c-pagination__list .current {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-on-dark);
}

.c-pagination__list .dots {
  border-color: transparent;
}

/* ---- タグ・案内のリンク（キャンバスの FaqE の a.pe-chip を手本にした） ---- */
.c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}

.c-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-18);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.c-chip:hover {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-on-dark);
}

/* 真ん中にそろえた札の列と、小さめの札（よくある質問のヒーローの「質問の種類」。キャンバス FaqE の a.pe-chip。parts/hero-text.php の 'chips'） */
.c-chips--center {
  justify-content: center;
}

.c-chip--sm {
  padding-inline: var(--s-16);
  font-size: 14px;
}

/* ---- 記事の送り（前の記事・次の記事） ---- */
.c-postnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-12);
}

.c-postnav__link {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-height: 100%;
  padding: var(--sp-card-2);
  border-radius: var(--r-card-md);
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color .2s ease;
}

.c-postnav__link:hover {
  background: var(--c-biz-hover);
}

.c-postnav__link--next {
  grid-column: 2;
  text-align: right;
}

.c-postnav__label {
  color: var(--c-green);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.c-postnav__title {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  text-wrap: pretty;
}

@container (max-width: 760px) {
  .c-postnav {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-postnav__link--next {
    grid-column: auto;
  }
}

/* ---- 検索の欄 ---- */
.c-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}

.c-search__field {
  box-sizing: border-box;
  flex: 1 1 280px;
  min-width: 0;
  min-height: 56px;
  padding-block: var(--s-14);
  padding-inline: var(--s-18);
  border: 1px solid var(--c-field);
  border-radius: var(--r-field);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
}

.c-search__field:hover {
  border-color: var(--c-sub);
}

.c-search__field:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 0;
}

/* ==========================================================================
   10. 相談の帯（ページの最後の黒い面。キャンバスの section.pe-reveal）
   ========================================================================== */
.c-contact-band-wrap {
  background: var(--c-bg);
}

.c-contact-band-wrap--surface {
  background: var(--c-surface);
}

.c-contact-band {
  position: relative;
  overflow: clip;
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.c-contact-band__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding-inline: var(--sp-inline);
  padding-block: var(--sp-section-cta);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-40) var(--sp-cta-gap);
}

.c-contact-band__body {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-18);
}

.c-contact-band__title {
  color: var(--c-on-dark);
  font-size: var(--fs-h2-cta);
  line-height: 1.15;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.c-contact-band__title-line {
  display: block;
}

.c-contact-band__lead {
  max-width: 30em;
  color: var(--c-on-dark-sub);
  font-size: var(--fs-lead);
  line-height: 1.8;
}

.c-contact-band__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-24);
}

/* .c-contact-band__tel は 2026-11-07 から使っていない（相談の帯から電話を外した。parts/contact-band.php）。戻すときのために残す */
.c-contact-band__tel {
  color: var(--c-on-dark-strong);
  font-size: 15px;
  line-height: 1.6;
}

/* 電話の数字の押せる範囲：行（24px）の上に 8px・下に 12px 広げて 44px（1章の■の1）。
   狭い幅で「費用の目安を見る」（44px）の下の行に回ると、間は 8px なので、上は 8px までにして重ねない */
.c-contact-band__tel .c-tel {
  display: inline-block;
  margin-block: calc(-1 * var(--s-8)) calc(-1 * var(--s-12));
  padding-block: var(--s-8) var(--s-12);
  color: var(--c-on-dark);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.c-contact-band__consult {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 15cqi, 230px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.c-contact-band__ring {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.c-contact-band__ring-text {
  fill: var(--c-mint);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 3px;
}

.c-contact-band__button {
  position: absolute;
  inset: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  border-radius: var(--r-circle);
  background: var(--c-green-bright);
  color: var(--c-dark);
  font-size: var(--fs-consult);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--sh-consult);
}

.c-contact-band__button svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   11. フッター（キャンバスの footer・12ページ共通）
   ========================================================================== */
.l-footer {
  overflow: clip;
  background: var(--c-surface);
  color: var(--c-ink);
}

.l-footer__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding-inline: var(--sp-inline);
  padding-block: var(--s-20) var(--s-24);
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  font-size: 13px;
  line-height: 1.7;
}

/* パンくず（フッターのいちばん上。トップには無い） */
.c-breadcrumb {
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--c-line-foot);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-10);
  color: var(--c-sub);
}

.c-breadcrumb__sep {
  color: var(--c-muted);
}

/* 押せる範囲：上下に 6px（32px → 44px）、左右に 3px（「トップ」39.5px → 45.5px）広げ、負の margin で打ち消す（1章の■の1）。
   上はフッターの内側の余白、下は区切りの線までの余白、左右は「›」との間（10px）に収まる */
.c-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-3));
  padding: var(--s-6) var(--s-3);
  background-origin: content-box;
  background-clip: content-box;
  color: var(--c-text);
  text-decoration: none;
}

.c-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--c-ink);
  font-weight: 600;
}

.l-footer__main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-28) var(--sp-foot-gap);
}

.l-footer__company {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.l-footer__logo {
  display: block;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  height: 34px;
}

.l-footer__dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4) var(--s-16);
}

.l-footer__dt {
  color: var(--c-sub);
  font-weight: 700;
}

/* 電話の数字の押せる範囲：行（22.1px）の上に 4px（上の行との間）・下に 18px（会社の情報の下の空き）広げて 44px（1章の■の1）。
   上の「代表」の行の文字には重ねない。下は、どの幅でも 24px 以上の空き（PC は © の行の上の余白、スマホはメニューの段との間） */
.l-footer__dl .c-tel {
  display: inline-block;
  margin-block: calc(-1 * var(--s-4)) calc(-1 * var(--s-18));
  padding-block: var(--s-4) var(--s-18);
}

.l-footer__nav {
  flex: 1 1 180px;
  min-width: 0;
}

.l-footer__nav-title {
  margin-bottom: var(--s-6);
  font-weight: 700;
}

.l-footer__nav-list {
  display: flex;
  flex-direction: column;
}

.l-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--c-text);
  text-decoration: none;
}

.l-footer__link[aria-current="page"] {
  color: var(--c-ink);
  font-weight: 600;
}

/* 押せる範囲（1章の■の1・3）。メニューの行はキャンバスで 32px おきに並び、隣の行との間が無いので、上下は広げない
   （広げると隣の行の押せる所を取る。44px にするなら行の間を変える＝見た目が変わるので、ボスの答え待ち）。
   名前が短い「実績」（26px）だけ、左右に 9px ずつ広げる（右と左は空いている。footer.php が planart_is_narrow_label() で付ける） */
.l-footer__link--narrow {
  margin-inline: calc(-1 * var(--s-9));
  padding-inline: var(--s-9);
  background-origin: content-box;
  background-clip: content-box;
}

/* いちばん下の行の「プライバシーポリシー」は上下が空いている（上は線までの 16px、下はフッターの内側の 24px）。上下に 6px ずつ広げて 44px */
.l-footer__bottom .l-footer__link {
  margin-block: calc(-1 * var(--s-6));
  padding-block: var(--s-6);
  background-origin: content-box;
  background-clip: content-box;
}

.l-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8) var(--s-24);
  padding-top: var(--s-16);
  border-top: 1px solid var(--c-line-foot);
  color: var(--c-sub);
  font-size: 12px;
}

/* いちばん下の行の右：プライバシーポリシーと「動きを止める」（2026-11-13 にヘッダーから移した。4章の終わり） */
.l-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-20);
}

/* 文字のボタン。見た目はとなりのリンクと同じ（押せる範囲も同じ形で 44px。button はふだん border-box なので、リンクと同じ content-box に戻す） */
.l-footer__motion {
  box-sizing: content-box;
  padding-inline: 0;
  border: 0;
  background-color: transparent;
  font: inherit;
  cursor: pointer;
}

.l-footer__motion[hidden] {
  display: none;
}

.l-footer__wordmark {
  padding-inline: var(--sp-inline);
  color: var(--c-line-soft);
  font-size: var(--fs-wordmark);
  line-height: 0.8;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-align: center;
  white-space: nowrap;
}

.l-footer__wordmark span {
  display: inline-block;
}

.l-footer__wordmark span:nth-child(2) { --i: 1; }
.l-footer__wordmark span:nth-child(3) { --i: 2; }
.l-footer__wordmark span:nth-child(4) { --i: 3; }
.l-footer__wordmark span:nth-child(5) { --i: 4; }
.l-footer__wordmark span:nth-child(6) { --i: 5; }
.l-footer__wordmark span:nth-child(7) { --i: 6; }

/* ==========================================================================
   12. 英字の帯（キャンバスの div.pe-band。9ページにある。parts/band.php）
   2段の大きな英字が横に流れる。文は data-text から CSS で出す（同じ文が HTML に何度も並ばないように）。
   ========================================================================== */
.c-band {
  overflow: hidden;
  padding-block: var(--sp-band-top) var(--sp-band-bottom);
  background: var(--c-bg);
  font-size: var(--fs-band);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.c-band__line {
  width: max-content;
  color: var(--c-ink);
}

.c-band__line--sub {
  color: var(--c-line);
}

.c-band__line::before,
.c-band__line::after {
  content: attr(data-text) "\00A0";
}

/* ==========================================================================
   13. 4つの仕事の重なるカード（キャンバスのトップの #service。parts/service-stack.php）
   動きがあるときは、カードが上に止まって重なり、下になったカードが少し小さく暗くなる（28章と assets/js/motion.js）。
   ========================================================================== */
.c-stack__inner {
  max-width: var(--w-wide);
  padding-inline: var(--sp-biz-inline);
}

.c-stack__head {
  padding-inline: var(--sp-biz-head);
}

.c-stack__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}

.c-stack__card {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-biz);
  min-height: 380px;
  padding: var(--sp-biz);
  border-radius: var(--r-32);
  background: var(--c-bg);
  box-shadow: var(--sh-stack);
}

.c-stack__card--dark {
  background: var(--c-dark);
  color: var(--c-on-dark);
  box-shadow: var(--sh-stack-first);
}

.c-stack__card--pale {
  border: 1px solid var(--c-green-pale-line);
  background: var(--c-green-pale);
}

.c-stack__card--line {
  border: 1px solid var(--c-line-soft);
}

.c-stack__body {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.c-stack__meta {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.c-stack__meta--wrap {
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-12);
}

.c-stack__num {
  color: var(--c-green);
  font-variant-numeric: tabular-nums;
}

.c-stack__rule {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--c-sub);
}

.c-stack__en {
  color: var(--c-sub);
}

.c-stack__new {
  padding-block: var(--s-2);
  padding-inline: var(--s-8);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-green);
  letter-spacing: 0.08em;
}

.c-stack__title {
  color: var(--c-ink);
  font-size: var(--fs-h3-biz);
  line-height: 1.2;
  font-weight: 700;
  font-feature-settings: 'palt';
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.c-stack__catch {
  color: var(--c-ink);
  font-size: var(--fs-biz-catch);
  line-height: 1.5;
  font-weight: 600;
}

.c-stack__text {
  max-width: 30em;
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.85;
}

.c-stack__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}

.c-stack__tag {
  padding-block: var(--s-5);
  padding-inline: var(--s-12);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.5;
}

.c-stack__price {
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 600;
}

.c-stack__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-24);
}

.c-stack__body > .c-textlink {
  align-self: flex-start;
}

/* 01 の黒いカード */
.c-stack__card--dark .c-stack__num {
  color: var(--c-mint);
}

.c-stack__card--dark .c-stack__rule {
  background: var(--c-on-dark-sub);
}

.c-stack__card--dark :is(.c-stack__en, .c-stack__text) {
  color: var(--c-on-dark-sub);
}

.c-stack__card--dark :is(.c-stack__title, .c-stack__catch) {
  color: var(--c-on-dark);
}

.c-stack__card--dark .c-stack__tag {
  border-color: var(--c-dark-chip-line);
  color: var(--c-on-dark-strong);
}

/* ---- カードの右の絵（どれも飾り。読み上げない） ---- */
.c-stack__visual {
  flex: 1 1 380px;
  min-width: 0;
}

/* 01：サイトの画面と「SEO」「AI検索」の札 */
.c-stack__visual--web {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--s-12);
}

.c-stack__window {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: var(--r-14);
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: var(--sh-on-dark-2);
}

.c-stack__window-bar {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-9);
  padding-inline: var(--s-12);
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-chip);
}

.c-stack__window-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--c-window-dot-sm);
}

.c-stack__window-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-frame);
}

.c-stack__badge {
  position: absolute;
  padding-block: var(--s-7);
  padding-inline: var(--s-14);
  border-radius: var(--r-pill);
  background: var(--c-mint);
  color: var(--c-dark);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

.c-stack__badge--seo {
  left: 0;
  bottom: 6%;
}

.c-stack__badge--ai {
  right: 0;
  top: 4%;
  background: var(--c-bg);
}

/* 02：LINE予約のスマホと、AIアシスタント */
.c-stack__visual--app {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-biz-app);
  padding: var(--sp-card-sm);
  border-radius: var(--r-20);
  background: var(--c-bg);
}

.c-booking {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: clamp(148px, 14cqi, 196px);
  padding: var(--s-6);
  border-radius: var(--r-30);
  background: var(--c-ink);
  box-shadow: var(--sh-phone);
}

.c-booking__screen {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding-block: var(--s-18) var(--s-14);
  padding-inline: var(--s-12);
  border-radius: var(--r-24);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 11px;
  line-height: 1.4;
}

.c-booking__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 700;
}

.c-booking__month {
  color: var(--c-sub);
  font-size: 10px;
  font-weight: 500;
}

.c-booking__days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  text-align: center;
}

.c-booking__day {
  padding-block: var(--s-5);
  border-radius: var(--r-8);
  background: var(--c-chip);
}

.c-booking__day--on {
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-weight: 700;
}

.c-booking__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.c-booking__time {
  padding-block: var(--s-6);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-8);
}

.c-booking__time--on {
  border-color: var(--c-green);
  background: var(--c-green-pale);
  color: var(--c-green);
  font-weight: 700;
}

.c-booking__button {
  display: block;
  padding-block: var(--s-8);
  border-radius: var(--r-pill);
  background: var(--c-green);
  color: var(--c-on-dark);
  font-weight: 700;
  text-align: center;
}

.c-stack__assist {
  flex: 0 1 220px;
  min-width: 0;
  align-self: flex-end;
}

.c-assist {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding: var(--s-14);
  border-radius: var(--r-18);
  background: var(--c-dark);
  color: var(--c-on-dark);
  font-size: 11px;
  line-height: 1.5;
  box-shadow: var(--sh-panel);
}

.c-assist__label {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  color: var(--c-mint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.c-assist__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--c-green-bright);
}

.c-assist__text {
  color: var(--c-on-dark-strong);
}

.c-assist__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-10);
  border-radius: var(--r-12);
  background: var(--c-dark-card-2);
  color: var(--c-on-dark);
}

.c-assist__chip {
  align-self: flex-start;
  padding-block: var(--s-4);
  padding-inline: var(--s-10);
  border-radius: var(--r-pill);
  background: var(--c-mint);
  color: var(--c-dark);
  font-weight: 700;
}

/* 03：方眼の上の線の絵（色は線ごとのクラスで付ける。テンプレートに色を書かない） */
.c-stack__visual--design {
  border-radius: var(--r-20);
  overflow: hidden;
  background-color: var(--c-surface);
  background-image: var(--grad-grid);
  background-size: 20px 20px;
}

.c-blueprint {
  display: block;
  width: 100%;
  height: auto;
}

.c-blueprint__guide {
  stroke: var(--c-guide);
}

.c-blueprint__ink {
  stroke: var(--c-ink);
}

.c-blueprint__green {
  stroke: var(--c-green-bright);
}

.c-blueprint__dot {
  fill: var(--c-green-bright);
}

.c-blueprint__label {
  fill: var(--c-sub);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.c-blueprint__aa {
  fill: var(--c-ink);
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
}

/* 04：工事の写真と、下の英字の線 */
.c-stack__visual--store {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  border-radius: var(--r-20);
  overflow: hidden;
  background: var(--c-frame);
}

.c-stack__scrim {
  position: absolute;
  inset: 0;
  background-image: var(--grad-photo-scrim);
}

.c-stack__caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: var(--s-14);
  display: flex;
  align-items: center;
  gap: var(--s-10);
  color: var(--c-on-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.c-stack__tick {
  display: block;
  flex: 0 0 auto;
  width: 1px;
  height: 12px;
  background: var(--c-on-dark);
}

.c-stack__hairline {
  display: block;
  flex: 1 1 0;
  height: 1px;
  background: var(--c-on-dark);
}

.c-stack__caption-text {
  flex: 0 0 auto;
}

/* 04：写真が無いときの、お店の平面図の絵（parts/drawing-store.php。2026-11-09）。
   明るい方眼の面（03 の線の図と同じ面）。図は下の英字の線の上の箱に入れる（縦横の比は保ったまま、箱の真ん中）。写真があれば上の写真の形のまま。
   はじめは黒い面だったが、12:34 ボス「黒が重たく感じる」で明るい面にした（ヒーローも同じ） */
.c-stack__visual--plan {
  background-color: var(--c-surface);
  background-image: var(--grad-grid);
  background-size: 20px 20px;
}

/* 明るい面の上の英字の線（写真のときの白を、黒と灰色に） */
.c-stack__visual--plan .c-stack__caption {
  color: var(--c-ink);
}

.c-stack__visual--plan :is(.c-stack__tick, .c-stack__hairline) {
  background: var(--c-muted);
}

.c-stack__drawing {
  position: absolute;
  inset: 6% 6% 15%;
}

/* お店の平面図の線と文字（ヒーローの図と 04 のカードで同じ。色は線ごとのクラスで付ける） */
.c-floorplan {
  display: block;
  width: 100%;
  height: 100%;
}

.c-floorplan__wall {
  stroke: var(--c-ink);
}

.c-floorplan__part {
  stroke: var(--c-sub);
}

.c-floorplan__dim {
  stroke: var(--c-muted);
}

.c-floorplan__furniture {
  fill: var(--c-bg);
  stroke: var(--c-sub);
}

.c-floorplan__rule {
  stroke: var(--c-line);
}

.c-floorplan__ac {
  fill: var(--c-bg);
  stroke: var(--c-green-bright);
}

.c-floorplan__air {
  stroke: var(--c-green-bright);
}

.c-floorplan__air--soft {
  opacity: 0.55;
}

.c-floorplan__lan,
.c-floorplan__signal {
  stroke: var(--c-green);
}

.c-floorplan__hub,
.c-floorplan__sign {
  fill: var(--c-green-pale);
  stroke: var(--c-green);
}

.c-floorplan__device {
  fill: var(--c-bg);
  stroke: var(--c-green);
}

.c-floorplan__dot {
  fill: var(--c-green);
}

.c-floorplan__mark {
  fill: var(--c-sub);
}

.c-floorplan__num,
.c-floorplan__room,
.c-floorplan__legend,
.c-floorplan__legend-title {
  font-family: var(--ff-base);
}

.c-floorplan__num {
  fill: var(--c-sub);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.c-floorplan__room {
  fill: var(--c-text);
  font-size: 10px;
  font-weight: 500;
}

.c-floorplan__legend-title {
  fill: var(--c-sub);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
}

.c-floorplan__legend {
  fill: var(--c-ink);
  font-size: 11px;
  font-weight: 500;
}

/* ==========================================================================
   14. 検索とAIの段（キャンバスの #search-ai。トップ・Webサイト・EC。parts/search-ai.php）
   黒い面が広がって現れ、スマホの中で「検索する → 検索の結果に出る → AIの答えに出る」を順に再生する（28章）。
   ========================================================================== */
.c-aio-wrap {
  background: var(--c-bg);
}

.c-aio-wrap--surface {
  background: var(--c-surface);
}

.c-aio {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.c-aio__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding-inline: var(--sp-inline);
  padding-block: var(--sp-section);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-aio-gap);
  text-align: center;
}

.c-aio__title {
  color: var(--c-on-dark);
  font-size: var(--fs-h2-search);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0;
  font-feature-settings: 'palt';
}

.c-aio__title-grad {
  display: block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-color: var(--c-mint);
  background-image: var(--grad-aio);
  -webkit-background-clip: text;
  background-clip: text;
}

.c-aio__title-line {
  display: block;
}

.c-aio__lead {
  max-width: 32em;
  color: var(--c-on-dark-sub);
  font-size: var(--fs-lead);
  line-height: 1.8;
  text-wrap: pretty;
}

.c-aio__body {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-cta-gap);
  margin-top: var(--sp-aio-top);
}

.c-aio__col {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
  text-align: left;
}

.c-aio__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-dark-line);
}

.c-aio__item {
  display: flex;
  align-items: baseline;
  gap: var(--s-20);
  padding-block: var(--s-22);
  border-bottom: 1px solid var(--c-dark-line);
}

.c-aio__num {
  flex: 0 0 auto;
  color: var(--c-mint);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.c-aio__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-on-dark-strong);
  font-size: var(--fs-faq-q);
  line-height: 1.6;
  font-weight: 600;
}

.c-aio__col > .c-textlink {
  align-self: flex-start;
}

.c-aio__glow {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: min(100%, 330px);
}

/* スマホのまわりの光（向き --glow-a を動きの中で回す。トークンにすると :root で角度が固まるので、ここに書く） */
.c-aio__glow::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: var(--r-62);
  background: conic-gradient(from var(--glow-a), var(--c-glow-0), var(--c-glow-1), var(--c-glow-2), var(--c-glow-0) 72%);
  filter: blur(30px);
  opacity: .55;
}

.c-aio__phone {
  box-sizing: border-box;
  width: 100%;
  padding: var(--s-11);
  border: 1px solid var(--c-dark-line-2);
  border-radius: var(--r-50);
  background: var(--c-phone-frame);
  box-shadow: var(--sh-on-dark);
}

.c-aio__screen {
  box-sizing: border-box;
  aspect-ratio: 9 / 17.5;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding-block: var(--s-48) var(--s-18);
  padding-inline: var(--s-16);
  border-radius: var(--r-40);
  overflow: hidden;
  background: var(--c-bg);
  text-align: left;
}

.c-aio__step {
  color: var(--c-sub);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.c-aio__search {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  padding-block: var(--s-11);
  padding-inline: var(--s-14);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
}

.c-aio__search svg {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--c-green);
}

.c-aio__connector {
  display: block;
  width: 1px;
  height: 14px;
  margin-left: var(--s-20);
  background: var(--c-connector);
}

.c-aio__stage {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.c-aio__result {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-block: var(--s-12);
  padding-inline: var(--s-14);
  border-radius: var(--r-16);
  background: var(--c-green-pale);
  color: var(--c-ink);
}

.c-aio__url {
  color: var(--c-green);
  font-size: 12px;
  line-height: 1.4;
}

.c-aio__result-title {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.c-aio__answer {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--s-12);
  padding-inline: var(--s-14);
  border-radius: var(--r-16) var(--r-16) var(--r-16) var(--r-4);
  background: var(--c-dark);
}

.c-aio__answer-text {
  color: var(--c-on-dark-strong);
  font-size: 14px;
  line-height: 1.7;
}

.c-aio__answer-em {
  color: var(--c-mint);
  font-weight: 700;
}

.c-aio__source {
  align-self: flex-start;
  padding-block: var(--s-2);
  padding-inline: var(--s-10);
  border-radius: var(--r-pill);
  background: var(--c-mint-soft);
  color: var(--c-mint);
  font-size: 12px;
  line-height: 1.5;
}

/* 打ち込まれる文字と、点滅する棒（キャンバスの .pe-type／.pe-caret。トップのヒーローの検索窓・検索とAIの段・SEO のページ） */
.c-type {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.c-type__text {
  display: inline-block;
  width: 9em;
  overflow: hidden;
  white-space: nowrap;
}

.c-type__caret {
  display: inline-block;
  flex: 0 0 auto;
  width: 2px;
  height: 1.1em;
  margin-left: var(--s-2);
  background: var(--c-green);
}

/* ==========================================================================
   15. 数字の組（2014年・600社以上。トップの実績の段・実績・会社案内のヒーロー。parts/figures.php）
   「600」は、動きがあるときだけスクロールに合わせて 0 から数え上がる（28章と assets/js/motion.js）。
   ========================================================================== */
.c-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
}

.c-figures__item {
  box-sizing: border-box;
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--sp-card-2);
  border-radius: var(--r-card-md);
  background: var(--c-surface);
}

.c-figures__label {
  order: 2;
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
}

.c-figures__label--flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6) var(--s-10);
}

.c-figures__mark {
  font-size: 11px;
}

.c-figures__value {
  order: 1;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  color: var(--c-ink);
  font-size: var(--fs-figure);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.c-figures__unit {
  font-family: var(--ff-ja);
  font-size: 0.36em;
  letter-spacing: 0;
}

/* 明るい組（トップ）：2つ目は薄い緑の面に緑の数字 */
.c-figures__item--accent {
  border: 1px solid var(--c-green-pale-line);
  background: var(--c-green-pale);
}

.c-figures__item--accent .c-figures__value {
  color: var(--c-green);
}

.c-figures__item--accent .c-figures__unit {
  color: var(--c-ink);
}

/* 白と黒の組（実績・会社案内のヒーロー。2列。まだ使っていない＝キャンバスとの照合はそのページで） */
.c-figures--contrast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-figures--contrast .c-figures__item {
  background: var(--c-bg);
  text-align: left;
}

.c-figures--contrast .c-figures__item--accent {
  border: 0;
  background: var(--c-dark);
}

.c-figures--contrast .c-figures__item--accent .c-figures__label {
  color: var(--c-on-dark-strong);
}

.c-figures--contrast .c-figures__item--accent .c-figures__value {
  color: var(--c-mint);
}

.c-figures--contrast .c-figures__item--accent .c-figures__unit {
  color: var(--c-on-dark);
}

/* 3つ並べるとき（会社案内のヒーロー：創業・設立・600社以上。2026-11-03 足した） */
.c-figures--contrast.c-figures--cols3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@container (max-width: 760px) {
  .c-figures--contrast,
  .c-figures--contrast.c-figures--cols3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   16. 実績のカード（トップ・Webサイト・EC・実績。parts/works.php。中身は inc/works.php）
   トップは横に並べて、動きがあるときはスクロールに合わせて横に流す（幅 760px 以下とキーボードで動かすときは指・矢印で横へ）。
   ========================================================================== */
.c-works__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card-md);
  overflow: hidden;
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
}

.c-works__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  background: var(--c-frame);
}

.c-works__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-18) var(--s-22);
  padding-inline: var(--s-22);
}

.c-works__category {
  color: var(--c-green);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.c-works__name {
  font-size: var(--fs-h3);
  line-height: 1.5;
  font-weight: 700;
}

.c-works__made {
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.6;
}

/* 横に並べる形（トップ） */
.c-works--track {
  scroll-padding-inline: var(--sp-inline);
  margin-inline: calc(-1 * var(--sp-inline));
  padding-inline: var(--sp-inline);
  padding-block: var(--s-4) var(--s-18);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.c-works--track .c-works__list {
  display: flex;
  gap: var(--sp-track-gap);
  width: max-content;
}

.c-works--track .c-works__item {
  flex: 0 0 auto;
  width: clamp(280px, 33cqi, 470px);
  scroll-snap-align: start;
}

/* 3列の形（Webサイト・EC・実績のページ。まだ使っていない） */
.c-works--grid .c-works__list {
  gap: var(--sp-track-gap);
}

.c-works--grid .c-works__item {
  min-width: 0;
}

.c-works--grid .c-works__card {
  height: 100%;
}

/* 3列の下の「実績をすべて見る」は真ん中（キャンバス WebE #works の align-self: center。2026-11-03） */
.c-works + .c-textlink {
  align-self: center;
}

/* お手伝いしている業種 */
.c-works__industries {
  padding-top: var(--s-20);
  border-top: 1px solid var(--c-line-soft);
  color: var(--c-text);
  font-size: 14px;
  line-height: 2;
}

.c-works__industries-label {
  margin-right: var(--s-14);
  color: var(--c-ink);
  font-weight: 700;
}

/* 制作した年（ある物だけ。「制作：Webサイト・ロゴ（2023年）」。2026-11-09） */
.c-works__year::before {
  content: "（";
}

.c-works__year::after {
  content: "）";
}

/* 画像の無い実績の枠（実績のページだけ。parts/works.php の 'more'。2026-11-09 は下に名前だけの一覧 →
   2026-11-13 06:32 ボス「実績は出るだけ視覚的に見せるようにして欲しい！」で、同じ並びのカードにした）。
   作った物の線の絵（planart_work_icon()）と、作った物の札。名前は下の本文にあるので、枠は読み上げない（aria-hidden）。
   枠の大きさを画像のカードとそろえるため、この枠だけ border-box（余白を 16:10 の中に入れる） */
.c-works__frame--drawn {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-16);
  padding: var(--s-24);
  background: var(--c-green-pale);
  color: var(--c-green);
}

.c-works__frame-made {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-6);
}

.c-works__frame-chip {
  padding-block: var(--s-4);
  padding-inline: var(--s-12);
  border: 1px solid var(--c-green-pale-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.5;
}

/* ==========================================================================
   17. 保守の段（トップ・Webサイト・EC の #care。parts/care.php。料金は inc/pricing.php）
   ========================================================================== */
.c-care__points,
.c-care__plan-list,
.c-care__boxes {
  gap: var(--s-12);
}

.c-care__point {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  min-height: 220px;
  padding: var(--sp-card-lg);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

.c-care__big {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  color: var(--c-ink);
  font-size: var(--fs-care-big);
  line-height: 1.1;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.c-care__title {
  color: var(--c-ink);
  font-size: var(--fs-h3);
  line-height: 1.5;
  font-weight: 700;
}

.c-care__text {
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.8;
}

/* 見守りの点（動きがあるときは輪が広がる。28章） */
.c-pulse {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: var(--r-circle);
  background: var(--c-green-bright);
}

.c-care__plans {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.c-care__plans-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-8) var(--s-24);
}

.c-care__plans-title {
  color: var(--c-ink);
  font-size: var(--fs-h3-plan);
  line-height: 1.3;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.c-care__plans-note {
  flex: 0 1 34em;
  min-width: 0;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.8;
}

.c-care__plan {
  box-sizing: border-box;
  padding: var(--sp-plan);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

.c-care__plan {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

/* 保守プランの4枚（無料・ライト・スタンダード・アドバンス。2026-11-04 に無料を足した）。
   4列では1枚の中が狭いので、幅 960px 以下は2列（費用の目安と同じ区切り）、760px 以下は1列（2章の .u-grid3 と同じ） */
.c-care__plan-list--4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@container (max-width: 960px) {
  .c-care__plan-list--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 760px) {
  .c-care__plan-list--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 無料のカード。白い面にせず線で囲み、有料の3枚より控えめに見せる（2026-11-04） */
.c-care__plan--free {
  border: 1px solid var(--c-line);
  background: none;
}

/* 無料のカードは面が無い（段の灰色が見える）ので、作業の例の箱は白にする（灰色のままだと箱が見えない） */
.c-care__plan--free .c-care__example {
  background: var(--c-bg);
}

/* カードの印つきの行（2026-11-04）。--minus＝入らないもの（灰色の横線。下の「プランに入っていないもの」の一覧と同じ印）。
   --plus＝そのプランで入ること（緑のチェック）。2026-11-04 のポイントの行（太字）は 2026-11-06 にポイントと一緒に外し、
   同じ日の保守プランの差別化で、太字にしない形で戻した（parts/care.php の 'marks'） */
.c-care__mark {
  display: flex;
  align-items: flex-start;
  gap: var(--s-10);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.7;
}

.c-care__mark svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: var(--s-2);
}

.c-care__mark--minus svg {
  color: var(--c-muted);
}

.c-care__mark--plus svg {
  color: var(--c-green);
}

.c-care__plan-name {
  color: var(--c-green);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.c-care__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--c-ink);
  font-size: var(--fs-price);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.c-care__price--sm {
  font-size: var(--fs-price-sm);
}

.c-care__unit {
  font-family: var(--ff-ja);
  font-size: 0.36em;
  letter-spacing: 0;
  font-weight: 700;
}

.c-care__price--sm .c-care__unit {
  font-size: 0.42em;
}

.c-care__work {
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
}

/* 2026-11-06 から使っていない（アドバンスの月1回の報告の行は、カードのチェックの行 .c-care__mark--plus にした）。月1回の報告の準備ができたときに見直す */
.c-care__extra {
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.7;
}

/* 作業の例（目安）。分のままだと何ができるか思い浮かばないので、頼む作業の形で添える（2026-11-04 ボス） */
.c-care__example {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-10) var(--s-14);
  border-radius: var(--r-12);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.7;
}

.c-care__example-label {
  color: var(--c-green);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.c-care__fit {
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.7;
}

/* カードの下の箱（.c-care__option。キャンバスの「リニューアル付き」→ リニューアル込み → ポイントの箱）は、2026-11-06 にポイントと一緒に外した */

/* トップの「表で比べる」のリンク（Webサイト・EC の比べる表へ。2026-11-06） */
.c-care__more {
  display: flex;
  justify-content: flex-end;
}

/* 要約の表の下の「保守プランを、くわしく見る」（保守プランのページへ。2026-11-06 11:31） */
.c-care__more--center {
  justify-content: center;
}

/* 保守プランの比べる表（Webサイト・EC。parts/care-compare.php。2026-11-06 ボス「アップルとかの比較表ってよくあるよね」）。
   キャンバスの CareCompareE（.pe-cmp）の形：白い面の上の表。プランの名前と月額の行は、ヘッダーの下でついてくる。
   ●＝入っています・—＝入っていません（形で分ける。読み上げの文は parts/care-compare.php）。
   760px 以下は、項目の名前を上に1行、その下に4つのプランの値を並べる（行を grid にする。表の role は parts/care-compare.php で付けた） */
.c-care-compare {
  box-sizing: border-box;
  padding: var(--sp-plan);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

.c-care-compare__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-6) var(--s-20);
  margin: 0 0 var(--s-8);
  padding: 0;
  list-style: none;
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.6;
}

.c-care-compare__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
}

.c-care-compare__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* 見出しの行（左の角とプランの4つ）。ヘッダーの下でついてくる */
.c-care-compare__corner,
.c-care-compare__plan {
  position: sticky;
  top: calc(var(--admin-bar-h) + var(--header-h));
  z-index: 2;
  border-bottom: 1px solid var(--c-ink);
  background: var(--c-bg);
}

.c-care-compare__corner {
  width: 32%;
}

.c-care-compare__plan {
  padding: var(--s-20) var(--s-8) var(--s-16);
  text-align: center;
  vertical-align: bottom;
}

/* 名前と金額は折らない（4つの列の幅に入る大きさにする。幅 768px で列は約 108px） */
.c-care-compare__plan-name {
  display: block;
  color: var(--c-ink);
  font-size: clamp(15px, 1.6cqi, 20px);
  line-height: 1.35;
  font-weight: 700;
  font-feature-settings: 'palt';
  white-space: nowrap;
}

.c-care-compare__price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-6);
  color: var(--c-ink);
  font-size: clamp(20px, 2.2cqi, 28px);
  white-space: nowrap;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.c-care-compare__unit {
  font-size: 0.46em;
  letter-spacing: 0;
}

/* 項目（左の列）と値 */
.c-care-compare__rh {
  padding: var(--s-18) var(--s-16) var(--s-18) 0;
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}

.c-care-compare__label {
  display: block;
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 700;
}

.c-care-compare__sub {
  display: block;
  margin-top: var(--s-4);
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.7;
}

.c-care-compare__c,
.c-care-compare__fit {
  padding: var(--s-18) var(--s-8);
  border-bottom: 1px solid var(--c-line-soft);
  text-align: center;
  vertical-align: middle;
}

.c-care-compare__fit {
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.7;
  vertical-align: top;
}

.c-care-compare__row--fit .c-care-compare__rh {
  vertical-align: top;
}

.c-care-compare__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--r-circle);
  background: var(--c-ink);
  vertical-align: middle;
}

/* —（入っていません）。灰色は白地で 3.44:1（形で伝える物の 3:1 は満たす） */
.c-care-compare__dash {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--c-muted);
  vertical-align: middle;
}

.c-care-compare__val {
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 段の区切り（直す・守る・そのほか） */
.c-care-compare__gh {
  padding: var(--s-40) 0 var(--s-12);
  border-bottom: 1px solid var(--c-ink);
  text-align: left;
}

.c-care-compare__gname {
  display: inline-block;
  margin-right: var(--s-14);
  color: var(--c-ink);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

.c-care-compare__gsub {
  display: inline-block;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}

/* 向いているサイトの一覧（760px 以下だけ。表の中の行の代わり） */
.c-care-compare__fitlist {
  display: none;
}

@container (max-width: 760px) {
  /* 狭い幅では4つの列に名前と金額を入れるため、白い面の内側と見出しの字を小さくする（360px でも「スタンダード」「月10,000円」が1行に入る） */
  .c-care-compare {
    padding: var(--s-20) var(--s-12);
  }

  .c-care-compare__table,
  .c-care-compare__head,
  .c-care-compare__body {
    display: block;
  }

  .c-care-compare__head {
    position: sticky;
    top: calc(var(--admin-bar-h) + var(--header-h));
    z-index: 2;
    border-bottom: 1px solid var(--c-ink);
    background: var(--c-bg);
  }

  .c-care-compare__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 左の角は、見えなくしても読み上げの表には残す（display: none にすると、プランの名前が1つ左の列の見出しになってしまう） */
  .c-care-compare__corner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
  }

  .c-care-compare__plan {
    position: static;
    padding: var(--s-12) 0 var(--s-10);
    border-bottom: 0;
  }

  .c-care-compare__plan-name {
    font-size: clamp(11px, 3.3cqi, 13px);
    letter-spacing: -0.02em;
  }

  .c-care-compare__price {
    margin-top: var(--s-2);
    font-size: clamp(13px, 4cqi, 18px);
  }

  .c-care-compare__rh {
    grid-column: 1 / -1;
    padding: var(--s-14) 0 0;
    border-bottom: 0;
  }

  .c-care-compare__label {
    font-size: 15px;
  }

  .c-care-compare__sub {
    font-size: 13px;
    line-height: 1.65;
  }

  .c-care-compare__c {
    padding: var(--s-8) var(--s-2) var(--s-14);
  }

  .c-care-compare__val {
    font-size: 14px;
  }

  .c-care-compare__gh {
    grid-column: 1 / -1;
    padding: var(--s-32) 0 var(--s-10);
  }

  .c-care-compare__gname {
    display: block;
    margin-right: 0;
    font-size: 18px;
  }

  .c-care-compare__gsub {
    display: block;
    font-size: 13px;
  }

  .c-care-compare__row--fit {
    display: none;
  }

  .c-care-compare__fitlist {
    display: block;
    margin-top: var(--s-20);
  }

  .c-care-compare__fitlist-title {
    margin-bottom: var(--s-6);
    color: var(--c-ink);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 700;
  }

  .c-care-compare__fitlist-items {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-care-compare__fitlist-item {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: var(--s-8);
    color: var(--c-text);
    font-size: 13px;
    line-height: 1.65;
  }

  .c-care-compare__fitlist-name {
    color: var(--c-ink);
    font-weight: 700;
  }

  .c-care-compare__legend {
    justify-content: flex-start;
    gap: var(--s-4) var(--s-14);
    font-size: 12px;
  }
}

.c-care__box {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-14);
  padding: var(--sp-card-lg);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

.c-care__box-note {
  padding-top: var(--s-6);
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.8;
}

.c-care__note {
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

/* 印つきの行（入っていること＝緑のチェック／外になるもの＝灰色の横線） */
.c-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.c-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-10);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.75;
}

.c-checklist__item svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: var(--s-4);
  color: var(--c-green);
}

.c-checklist--minus .c-checklist__item svg {
  color: var(--c-muted);
}

.c-checklist__text {
  min-width: 0;
}

/* ==========================================================================
   18. 無料の診断の段（トップ・Webサイト・EC の #diagnosis。parts/diagnosis.php）
   2026-11-09：黒い面から、薄い緑の面（ヒーローの薄い緑の面と同じ --grad-card-pale）に白いカードへ変えた。
   13:03 ボス「OK」（12:4x の話：黒は全部なくさず、大きな黒い面は1ページ2つまで＝見せ場の段と最後の相談の帯。
   この段は高さ 1,200px を超える3つ目の黒い面だった）。申し込みのボタンは黒（.c-btn--lg）のまま＝黒は点で残す
   ========================================================================== */
.c-diag__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding-inline: var(--sp-inline);
  padding-block: var(--sp-section-md) var(--sp-section-tail);
}

.c-diag__panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--sp-panel-gap);
  padding: var(--sp-panel);
  border: 1px solid var(--c-green-pale-line);
  border-radius: var(--r-panel);
  background: var(--grad-card-pale);
  color: var(--c-ink);
}

.c-diag__cols {
  gap: var(--sp-panel-cols);
  align-items: center;
}

.c-diag__intro {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-16);
}

.c-diag__title {
  color: var(--c-ink);
  font-size: var(--fs-h2-diag);
  line-height: 1.2;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.c-diag__title-part {
  display: inline-block;
}

.c-diag__lead {
  max-width: 30em;
  color: var(--c-sub);
  font-size: var(--fs-diag-lead);
  line-height: 1.8;
  text-wrap: pretty;
}

.c-diag__intro .c-btn {
  margin-top: var(--s-4);
}

.c-diag__checks {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.c-diag__check {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--s-16);
  padding-block: var(--s-18);
  padding-inline: var(--s-20);
  border: 1px solid var(--c-green-pale-line);
  border-radius: var(--r-20);
  background: var(--c-bg);
}

.c-diag__check svg {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: var(--s-2);
  color: var(--c-green);
}

.c-diag__check-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.c-diag__check-title {
  color: var(--c-ink);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}

.c-diag__check-text {
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.75;
  text-wrap: pretty;
}

/* 簡易診断（無料）・くわしい診断（有料）の2つ（2026-11-03 ボス「有料の詳細診断も公開のときに出す」。キャンバスに無いので、上の3つのカードと同じ面で組んだ） */
.c-diag__tiers {
  gap: var(--s-16);
}

.c-diag__tier {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-8);
  padding-block: var(--s-20);
  padding-inline: var(--s-22);
  border: 1px solid var(--c-green-pale-line);
  border-radius: var(--r-20);
  background: var(--c-bg);
}

.c-diag__tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4) var(--s-16);
}

.c-diag__tier-name {
  color: var(--c-ink);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}

.c-diag__tier-price {
  color: var(--c-green);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.c-diag__tier-unit {
  margin-left: var(--s-2);
  font-size: 13px;
  font-weight: 500;
}

.c-diag__tier-text {
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.75;
  text-wrap: pretty;
}

.c-diag__tier-note {
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.7;
  text-wrap: pretty;
}

.c-diag__tier-link {
  margin-top: auto;
}

/* 無料のサイト診断のページへのリンク（トップと Webサイト・EC。2026-11-06。parts/diagnosis.php の 'more'） */
.c-diag__more {
  display: flex;
  justify-content: flex-end;
}

.c-diag__rules {
  gap: var(--s-8) var(--s-28);
  padding-top: var(--s-22);
  border-top: 1px solid var(--c-green-pale-line);
}

.c-diag__rule {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s-10);
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.7;
}

.c-diag__rule-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 0.62em;
  border-radius: var(--r-circle);
  background: var(--c-green);
}

.c-diag__rule-text {
  min-width: 0;
  text-wrap: pretty;
}

/* 直す料金（無料のサイト診断のページの #fix。parts/fix-price.php。料金は inc/pricing.php の 'diagnosis'。2026-11-06）
   灰色の面の段に、白い箱の2列（保守の段の「入っていること」の箱 .c-care__box と同じ形）。印つきの行は .c-checklist（17章） */
.c-fix {
  gap: var(--s-12);
}

.c-fix__box {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-14);
  padding: var(--sp-card-lg);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

.c-fix__name {
  color: var(--c-ink);
  font-size: var(--fs-h3);
  line-height: 1.5;
  font-weight: 700;
}

.c-fix__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--c-ink);
  font-size: var(--fs-price-sm);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.c-fix__unit {
  font-family: var(--ff-ja);
  font-size: 0.42em;
  letter-spacing: 0;
  font-weight: 700;
}

.c-fix__text {
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.8;
  text-wrap: pretty;
}

/* 右の箱の下の入口（左の箱と高さがそろうので、箱の下にそろえる） */
.c-fix__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-8);
  padding-top: var(--s-18);
  border-top: 1px solid var(--c-line-soft);
}

/* ==========================================================================
   19. 費用の目安の部品（選ぶボタン・ページ数の −／＋・1けたずつ回る数字。トップの簡易版。費用の目安のページでも使う予定）
   計算と文の入れ替えは assets/js/estimate.js、単価は inc/pricing.php。
   ========================================================================== */
.c-choice {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  min-height: 64px;
  padding-block: var(--s-14);
  padding-inline: var(--s-18);
  border: 2px solid var(--c-pick);
  border-radius: var(--r-16);
  background: var(--c-bg);
  color: var(--c-ink);
  font: inherit;
  letter-spacing: normal; /* キャンバスのボタンは字間を受け継がない（ブラウザの決まりのまま）。土台の button は inherit なので、ここで戻す */
  text-align: left;
  cursor: pointer;
  transition: none; /* 動きは 28章（止めたときは途中でも止まる） */
}

.c-choice[aria-pressed="true"] {
  border-color: var(--c-green);
}

.c-choice__names {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.c-choice__name {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}

.c-choice__note {
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.5;
}

.c-choice__check {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.c-choice__check-bg {
  fill: var(--c-green);
}

.c-choice__check-mark {
  stroke: var(--c-on-dark);
}

.c-choice[aria-pressed="false"] .c-choice__check {
  display: none;
}

/* 大きい選ぶボタン（つくり方） */
.c-choice--lg {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--s-6);
  min-height: 132px;
  padding-block: var(--s-18);
  padding-inline: var(--s-20);
  border-radius: var(--r-18);
}

.c-choice__head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
}

.c-choice--lg .c-choice__name {
  font-size: 19px;
  line-height: 1.4;
}

.c-choice__price {
  color: var(--c-green);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}

.c-choice--lg .c-choice__note {
  font-size: 14px;
  line-height: 1.6;
}

/* ページ数の −／＋ */
.c-stepper {
  display: flex;
  align-items: center;
  gap: var(--s-14);
  padding: var(--s-6);
  border-radius: var(--r-pill);
  background: var(--c-bg);
}

.c-stepper__button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-stepper-line);
  border-radius: var(--r-circle);
  background: var(--c-bg);
  color: var(--c-ink);
  cursor: pointer;
}

.c-stepper__button svg {
  display: block;
  width: 18px;
  height: 18px;
}

.c-stepper__button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.c-stepper__value {
  min-width: 5.4em;
  color: var(--c-ink);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.c-stepper__unit {
  margin-left: var(--s-4);
  font-size: 15px;
  font-weight: 600;
}

/* 1けたずつ回る数字（キャンバスの .pe-dig／.pe-strip）。けたの中に 0〜9 の帯があり、数字のぶん上へずらす */
.c-digits__dig {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  vertical-align: top;
}

.c-digits__strip {
  display: block;
  transition: none; /* 動きを止めたとき、回っている途中の帯もその場で止める（transition-property を none にしないと、走っている途中の動きが最後まで続く） */
}

.c-digits__strip::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  display: block;
  white-space: pre;
  line-height: 1.2em;
}

/* 数字でない字（, 円 約 万 〜）。字は data-c から出す（2026-11-13。HTML に字を書かない＝inc/pricing.php の planart_digits_html()） */
.c-digits__char::before {
  content: attr(data-c);
}

.c-digits__strip--v1 { transform: translateY(-1.2em); }
.c-digits__strip--v2 { transform: translateY(-2.4em); }
.c-digits__strip--v3 { transform: translateY(-3.6em); }
.c-digits__strip--v4 { transform: translateY(-4.8em); }
.c-digits__strip--v5 { transform: translateY(-6em); }
.c-digits__strip--v6 { transform: translateY(-7.2em); }
.c-digits__strip--v7 { transform: translateY(-8.4em); }
.c-digits__strip--v8 { transform: translateY(-9.6em); }
.c-digits__strip--v9 { transform: translateY(-10.8em); }

/* ==========================================================================
   20. LINE予約の料金（トップの費用の目安の段の下。parts/line-price.php。料金は inc/pricing.php）
   ========================================================================== */
.c-line-price {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-20) var(--sp-line-gap);
  padding: var(--sp-card-sm);
  border-radius: var(--r-card);
  background: var(--c-surface);
}

.c-line-price__head {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.c-line-price__title {
  color: var(--c-ink);
  font-size: var(--fs-line-title);
  line-height: 1.4;
  font-weight: 700;
}

.c-line-price__text {
  max-width: 34em;
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.8;
}

.c-line-price__list {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12) var(--s-40);
}

.c-line-price__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.c-line-price__label {
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.5;
}

.c-line-price__value {
  color: var(--c-ink);
  font-size: var(--fs-line-price);
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.c-line-price__note {
  flex: 1 1 100%;
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.7;
}

/* ==========================================================================
   21. よくある質問（キャンバスの details.pe-faq。トップ・各ページ・よくある質問。parts/faq.php。中身は inc/faq.php）
   開く・閉じるは details と summary だけ（JS なし）。構造化データ（FAQPage）は出さない。
   ========================================================================== */
.c-faq {
  border-top: 1px solid var(--c-ink);
}

.c-faq__item {
  border-bottom: 1px solid var(--c-line);
}

.c-faq__q {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--s-16);
  min-height: 72px;
  padding-block: var(--s-16);
  list-style: none;
  cursor: pointer;
  color: var(--c-ink);
  font-size: var(--fs-faq-q);
  line-height: 1.6;
  font-weight: 700;
}

.c-faq__q::-webkit-details-marker {
  display: none;
}

.c-faq__mark {
  flex: 0 0 auto;
  width: 30px;
  color: var(--c-green);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

.c-faq__text {
  flex: 1 1 auto;
  min-width: 0;
}

.c-faq__plus {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-circle);
  background: var(--c-chip);
  color: var(--c-ink);
  transition: none; /* 動きは 28章（止めたときは途中でも止まる） */
}

/* 灰色の面の段では、＋の丸を白に（キャンバスと同じ） */
.l-section--surface .c-faq__plus {
  background: var(--c-bg);
}

.c-faq__plus svg {
  display: block;
  width: 16px;
  height: 16px;
}

.c-faq__item[open] .c-faq__plus {
  rotate: 45deg;
}

.c-faq__a {
  padding-bottom: var(--s-24);
  padding-left: var(--s-46);
  color: var(--c-text);
  font-size: var(--fs-faq-a);
  line-height: 1.9;
}

.c-faq + .c-textlink {
  align-self: center;
}

/* ==========================================================================
   22. ヒーローの型2・3・5（parts/hero.php）と、型4の足し（parts/hero-text.php の 'note'・'chips'）
   --------------------------------------------------------------------------
   2026-11-03 Webサイト・EC の担当が、12ページの板のヒーローを見て型を決めた（parts/hero.php の頭に一覧）。
   型2＝文＋絵と札＋右の2枚のパネル（4つの仕事と SEO のページ）／型3＝文＋数字の組（実績・会社案内）／型5＝文＋連絡の札（お問い合わせ）。
   文の組（6章の .c-hero__text）は全部の型で同じ。違うのは上下の余白と、文の下に置く物だけ。
   ========================================================================== */
/* 型2・3：絵の組の分、文の組の下が狭く、面の下に余白がある */
.c-hero__panel--stage {
  padding-bottom: var(--sp-hero-panel-bottom);
}

.c-hero__text--stage {
  padding-block: var(--sp-hero-top) var(--sp-hero-stage-bottom);
}

/* 型5：お問い合わせ */
.c-hero__text--contact {
  padding-block: var(--sp-hero-contact-top) var(--sp-hero-contact-bottom);
}

/* 英字の右の白い「New」の札（AI・アプリ） */
.c-hero__new {
  padding-block: var(--s-2);
  padding-inline: var(--s-8);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 塗った丸のチェック（パネル・つくり方のカード。inc/template-tags.php の 'check-fill'） */
.c-check-fill {
  color: var(--c-green);
}

.c-check-fill__bg {
  fill: currentColor;
}

.c-check-fill__mark {
  stroke: var(--c-on-dark);
}

/* ---- 絵の組の外枠（型2・型3。キャンバスの .pe-stagein の div） ---- */
.c-hero__stage {
  max-width: var(--w-visual);
  margin-inline: auto;
  padding-inline: var(--sp-stage-inline);
}

.c-hero__stage--figures {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.c-hero__tilt {
  position: relative;
  padding-top: var(--sp-tilt-top);
}

/* 左の絵と右のパネル（キャンバスの .pe-collage。1.55 : 1）。幅 760px 以下は1列で、パネルは出さない（.u-hide-sm） */
.c-hero__collage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--s-12);
  max-width: var(--w-visual-inner);
  margin: 0 auto;
}

@container (max-width: 760px) {
  .c-hero__collage {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 左の絵の枠（札はこの枠の端から少しはみ出す） */
.c-hero__visual {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  padding-block: var(--s-18);
}

/* 画面の枠（上の帯と3つの丸。WebE）と、写真の枠（BrandingE） */
.c-hero__window,
.c-hero__photo {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: var(--sh-visual);
}

.c-hero__window {
  border-radius: var(--r-16);
}

.c-hero__photo {
  border-radius: var(--r-20);
}

.c-hero__window-bar {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-10);
  padding-inline: var(--s-14);
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-chip);
}

.c-hero__window-dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: var(--r-circle);
  background: var(--c-window-dot-sm);
}

.c-hero__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  background: var(--c-frame);
}

/* 薄い緑の面（中身はページのひな形。'row'＝AI・アプリのスマホと AI、'column'＝SEO の検索の流れ） */
.c-hero__card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  border-radius: var(--r-20);
  background: var(--grad-card-pale);
  box-shadow: var(--sh-visual);
}

.c-hero__card--row {
  align-items: center;
  justify-content: center;
  gap: var(--sp-hero-card-gap);
  padding: var(--sp-card-xl);
}

.c-hero__card--column {
  flex-direction: column;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--sp-hero-card-col);
  text-align: left;
}

/* 'fill'＝図が面いっぱい（ブランディング・デザインのブランドの見本。parts/drawing-brand.php。2026-11-09） */
.c-hero__card--fill {
  overflow: hidden;
}

/* ブランドの見本の図の線と面（色は線と面ごとのクラスで付ける） */
.c-brandboard {
  display: block;
  width: 100%;
  height: 100%;
}

.c-brandboard__tile {
  fill: var(--c-bg);
  stroke: var(--c-green-pale-line);
  stroke-width: 1;
}

.c-brandboard__guide {
  stroke: var(--c-guide);
}

.c-brandboard__ink {
  stroke: var(--c-ink);
}

.c-brandboard__leaf {
  fill: var(--c-green);
}

.c-brandboard__leaf--light {
  fill: var(--c-green-bright);
}

.c-brandboard__aa,
.c-brandboard__kana {
  font-feature-settings: 'palt';
}

.c-brandboard__aa {
  fill: var(--c-ink);
  font-family: var(--ff-base);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.c-brandboard__kana {
  fill: var(--c-green);
  font-family: var(--ff-ja);
  font-size: 40px;
  font-weight: 700;
}

.c-brandboard__swatch--ink {
  fill: var(--c-ink);
}

.c-brandboard__swatch--green {
  fill: var(--c-green);
}

.c-brandboard__swatch--mint {
  fill: var(--c-mint);
}

.c-brandboard__swatch--base {
  fill: var(--c-surface);
  stroke: var(--c-line);
  stroke-width: 1;
}

.c-brandboard__bar {
  fill: var(--c-ink);
}

.c-brandboard__bar--sub {
  fill: var(--c-muted);
}

.c-brandboard__bar--line {
  fill: var(--c-line);
}

.c-brandboard__bar--green {
  fill: var(--c-green);
}

.c-brandboard__bar--pale {
  fill: var(--c-green-pale);
}

.c-brandboard__chrome {
  fill: var(--c-chip);
}

.c-brandboard__dot {
  fill: var(--c-window-dot);
}

/* 写真が枠いっぱい＋下の英字の線（工事。札は無い） */
.c-hero__visual--caption {
  display: block;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  padding-block: 0;
  border-radius: var(--r-20);
  overflow: hidden;
  background: var(--c-frame-photo);
  box-shadow: var(--sh-visual-2);
}

.c-hero__scrim {
  position: absolute;
  inset: 0;
  background-image: var(--grad-photo-scrim);
}

.c-hero__caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-10);
  color: var(--c-on-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.c-hero__tick {
  display: block;
  flex: 0 0 auto;
  width: 1px;
  height: 12px;
  background: var(--c-on-dark);
}

.c-hero__hairline {
  display: block;
  flex: 1 1 0;
  height: 1px;
  background: var(--c-on-dark);
}

.c-hero__caption-text {
  flex: 0 0 auto;
}

/* 写真が無いときの図（工事のページ。parts/hero.php の 'caption' の型に 'part' があるとき。2026-11-09）。
   明るい方眼の面（トップの 03 の線の図と同じ面）。図は下の英字の線の上の箱に入れる。暗いぼかしは敷かず、英字の線は黒と灰色。
   はじめは黒い面だったが、12:34 ボス「黒が重たく感じる」で明るい面にした */
.c-hero__visual--drawing {
  background-color: var(--c-surface);
  background-image: var(--grad-grid);
  background-size: 24px 24px;
}

.c-hero__visual--drawing .c-hero__caption {
  color: var(--c-ink);
}

.c-hero__visual--drawing :is(.c-hero__tick, .c-hero__hairline) {
  background: var(--c-muted);
}

.c-hero__drawing {
  position: absolute;
  inset: 7% 6% 16%;
}

/* 札（1つ目＝左下の緑、2つ目＝右上の黒。読み上げない飾り） */
.c-hero__badge {
  position: absolute;
  padding-block: var(--s-8);
  padding-inline: var(--s-16);
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  box-shadow: var(--sh-tag);
}

.c-hero__badge--1 {
  left: -6px;
  bottom: 6%;
  background: var(--c-mint);
  color: var(--c-dark);
}

.c-hero__badge--2 {
  right: -6px;
  top: 4%;
  background: var(--c-dark);
  color: var(--c-on-dark);
}

/* ---- 右の2枚のパネル（高さは左の絵に合わせて2等分） ----
   2026-11-09：左の絵より中身が高いときは、中身の高さまで伸ばす（行ごと高くなり、左の絵は真ん中に寄る）。
   前は絵の高さに固定していたので、幅 761〜830px ほど（iPad mini の縦など）で、文が枠の外にはみ出していた
   （Webサイト・EC・AI・アプリ・ブランディング・工事・SEO の5ページ）。中身が絵より低い幅（PC など）は、前と同じ形。 */
.c-hero__side {
  position: relative;
  min-width: 0;
}

.c-hero__side-inner {
  height: 100%;
  display: grid;
  grid-template-rows: repeat(2, minmax(min-content, 1fr));
  gap: var(--s-12);
}

.c-hero-panel {
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-10);
  padding: var(--sp-hero-panel);
  border-radius: var(--r-20);
  text-align: left;
}

.c-hero-panel--pale {
  border: 1px solid var(--c-green-pale-line);
  background: var(--c-green-pale);
}

.c-hero-panel--dark {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.c-hero-panel--tight {
  gap: var(--s-8);
}

.c-hero-panel__en {
  color: var(--c-green);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.c-hero-panel--dark .c-hero-panel__en,
.c-hero-panel__icon {
  color: var(--c-mint);
}

.c-hero-panel__icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.c-hero-panel__title {
  color: var(--c-ink);
  font-size: var(--fs-hero-panel);
  line-height: 1.45;
  font-weight: 700;
  font-feature-settings: 'palt';
  /* 句読点と空白のところだけで折る（2026-11-13。Safari では「10,000｜円から」「ひとつの窓口｜で。」と折れていた。27章の .c-statement__text と同じ）。
     1行に入らない長さのときだけ、はみ出さないように折る（break-word） */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.c-hero-panel--dark .c-hero-panel__title {
  color: var(--c-on-dark);
  line-height: 1.5;
}

/* 料金の行は字詰めをせず、数字の幅をそろえる（AI・アプリ） */
.c-hero-panel__title--num {
  font-feature-settings: normal;
  font-variant-numeric: tabular-nums;
}

.c-hero-panel__checks {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.c-hero-panel__check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}

.c-hero-panel--center .c-hero-panel__check {
  align-items: center;
}

.c-hero-panel__check svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.c-hero-panel__check-text {
  min-width: 0;
}

.c-hero-panel__note {
  color: var(--c-on-dark-sub);
  font-size: 14px;
  line-height: 1.6;
}

/* ---- 型3：数字の組の下の注 ---- */
.c-hero__note {
  padding-inline: var(--s-4);
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
}

/* ---- 型5：電話と受付時間の札 ---- */
.c-hero__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-10);
  margin-top: var(--s-4);
}

.c-hero__contact {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  min-height: 44px;
  padding-inline: var(--s-18);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
}

.c-hero__contact--hours {
  gap: var(--s-8);
}

.c-hero__contact svg {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--c-green);
}

.c-hero__contact-value {
  color: var(--c-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 電話の数字は押せるので、札の高さ（44px）いっぱいを押せる所にする。札の枠の上下 1px に重ねて、札の高さはキャンバスと同じ 44px のまま */
.c-hero__contact .c-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: calc(-1 * var(--s-1));
  letter-spacing: 0.02em;
}

/* ---- 型4（parts/hero-text.php）の足し：説明の下の1行（費用の目安）と、案内の札（よくある質問） ---- */
.c-hero__note-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4) var(--s-12);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.7;
}

.c-hero__note-line .c-textlink {
  font-size: inherit;
}

.c-hero__chips {
  margin-top: var(--s-6);
}

/* ==========================================================================
   23. 線の絵つきカード（parts/cards.php。キャンバスの li.pe-card と svg.pe-draw）
   WebE #make・BrandingE #make・AppE #what・ConstructionE #scope・SeoE #do。3列（幅 960px 以下は2列・760px 以下は1列。2026-11-13 に2列を足した）。
   線の絵が描かれる動きは 28章（スクロールに合わせて動くブラウザだけ）。
   ========================================================================== */
.c-cards {
  gap: var(--s-12);
}

.c-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  min-height: 250px;
  padding: var(--sp-card);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

.c-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-12);
}

/* 線の絵（inc/template-tags.php の planart_line_icon()） */
.c-line-icon {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--c-green);
}

.c-line-icon--lg {
  width: 64px;
  height: 64px;
}

/* 右上の番号（読み上げない飾り。--c-muted のまま。CLAUDE.md 4章） */
.c-card__num {
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.c-card__title {
  margin-top: var(--s-8);
  color: var(--c-ink);
  font-size: var(--fs-h3-card);
  line-height: 1.45;
  font-weight: 700;
}

.c-card__text {
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.8;
}

/* カードの下のリンク（いちばん下にそろえる） */
.c-card__link {
  align-self: flex-start;
  margin-top: auto;
}

/* 黒いカード（工事の相談のカード・SEO のリンクのカード） */
.c-card--dark {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.c-card--dark .c-card__title {
  color: var(--c-on-dark);
}

.c-card--dark .c-card__text {
  color: var(--c-on-dark-sub-2);
}

.c-card--cta {
  justify-content: space-between;
  gap: var(--s-24);
}

.c-card__cta-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.c-card__statement {
  color: var(--c-on-dark);
  font-size: var(--fs-card-statement);
  line-height: 1.5;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.c-card--cta .c-btn {
  align-self: flex-start;
}

/* 上の大きな薄い緑のカード（ブランディングの CI・VI／AI・アプリの AI の導入） */
.c-card--feature {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-20) var(--sp-feature-gap);
  padding: var(--sp-feature);
  border: 1px solid var(--c-green-pale-line);
  background: var(--c-green-pale);
}

.c-card__feature-icon {
  flex: 0 0 auto;
}

/* キャンバスでは、この絵は div の中のふつうの（行の中の）svg。行の下の空きぶん（約 9px）、幅の狭い画面でカードが高くなるのも同じにする */
.c-card__feature-icon > .c-line-icon {
  display: inline-block;
}

.c-card__feature-body {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.c-card__feature-body--roomy {
  gap: var(--s-10);
}

.c-card__feature-title {
  color: var(--c-ink);
  font-size: var(--fs-h3-lg);
  line-height: 1.4;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.c-card__feature-text {
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.8;
}

.c-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}

.c-card__chip {
  padding-block: var(--s-5);
  padding-inline: var(--s-12);
  border: 1px solid var(--c-green-pale-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.5;
}

/* カードの最小の高さは板で違う：250px（WebE・ConstructionE）／230px（AppE・BrandingE・SeoE。'min' => 230） */
.c-card--min-230 {
  min-height: 230px;
}

/* 幅 960px 以下は2列（2026-11-13。幅 768 の3列では1枚の中が 174px しかなく、黒い相談のカードの「お見積りしま｜す。」
   「無料で相談｜する」が言葉の途中で折れていた。保守の4枚のカードと同じ区切り）。760px 以下は1列（2章の .u-grid3 と同じ） */
@container (max-width: 960px) {
  .c-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 760px) {
  .c-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-card,
  .c-card--min-230 {
    min-height: 0;
  }
}

/* ==========================================================================
   24. 流れ（parts/flow.php）
   'line'＝番号の丸を線でつなぐ（5段・6段。幅 760px 以下は丸を左に置いて縦に並べ、線は出さない）／
   'cards'＝番号の大きな白いカード（お問い合わせ・会社案内）。線が伸びる動きは 28章。
   ========================================================================== */
.c-flow--line {
  position: relative;
}

/* 線（1つ目と最後の丸の真ん中まで。5段は 10%・6段は 8.4%。キャンバスの値） */
.c-flow__track {
  position: absolute;
  top: 27px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--c-line);
}

.c-flow--6 .c-flow__track {
  left: 8.4%;
  right: 8.4%;
}

.c-flow__track--fill {
  background: none;
}

.c-flow__fill {
  position: absolute;
  inset: 0;
  background: var(--c-green);
  transform-origin: 0 50%;
}

.c-flow__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-24) var(--s-14);
}

.c-flow--6 .c-flow__list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.c-flow--wide .c-flow__list {
  column-gap: var(--s-16);
}

.c-flow__step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  text-align: center;
}

.c-flow__num {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-circle);
  background: var(--c-bg);
  color: var(--c-green);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.c-flow__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.c-flow__title {
  color: var(--c-ink);
  font-size: var(--fs-h3);
  line-height: 1.5;
  font-weight: 700;
}

/* 見出しの文節（parts/flow.php で見出しを配列で渡したとき）。文節の途中では折らない（2026-11-04 素人の目の見直し P-30。.c-diag__title-part と同じ） */
.c-flow__title-part {
  display: inline-block;
}

.c-flow__text {
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.8;
}

@container (max-width: 760px) {
  .c-flow__list,
  .c-flow--6 .c-flow__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-flow__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  /* 丸どうしを縦の線でつなぐ（2026-11-13 06:19 ボス「番号から番号への距離感は均等の方が良くない？逆に違和感出るかな？」→
     均等にはしない（いちばん長い段に高さをそろえると、短い段の下に大きな空きができる）。PC の横の線と同じく丸をつなぎ、段の長さが違っても流れに見せる）。
     線は丸（56px）の下から、次の段の丸の上（段の間＝上の .c-flow__list の行の gap）まで。左は丸の真ん中 */
  .c-flow--line .c-flow__step {
    position: relative;
  }

  .c-flow--line .c-flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 56px;
    bottom: calc(-1 * var(--s-24));
    left: 27px;
    width: 2px;
    background: var(--c-line);
  }
}

/* 番号の大きなカード */
.c-flow--cards {
  gap: var(--s-12);
}

.c-flow__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--sp-card);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

.c-flow__card-num {
  color: var(--c-green);
  font-size: var(--fs-flow-num);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.c-flow__card-title {
  color: var(--c-ink);
  font-size: var(--fs-flow-card);
  line-height: 1.5;
  font-weight: 700;
}

/* 会社案内の「大切にしていること」は、見出しが線の絵つきカードと同じ大きさ */
.c-flow__card-title--card {
  font-size: var(--fs-h3-card);
  line-height: 1.45;
  font-feature-settings: 'palt';
}

/* ==========================================================================
   25. つくり方と料金（parts/plans.php・price-table.php・compare.php・action-note.php）
   金額はすべて inc/pricing.php から（税別）。ここには見た目だけを書く。
   ========================================================================== */
/* ---- つくり方のカード（WebE #plans） ---- */
.c-plans {
  gap: var(--s-12);
}

.c-plan {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-18);
  padding: var(--sp-card-xl);
  border-radius: var(--r-card);
}

.c-plan--pale {
  border: 1px solid var(--c-green-pale-line);
  background: var(--c-green-pale);
}

.c-plan--surface {
  background: var(--c-surface);
}

.c-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-14);
}

.c-plan__name {
  color: var(--c-ink);
  font-size: var(--fs-plan-name);
  line-height: 1.3;
  font-weight: 700;
}

.c-plan__badge {
  padding-inline: var(--s-10);
  border-radius: var(--r-pill);
  background: var(--c-green);
  color: var(--c-on-dark);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.c-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-8);
  color: var(--c-ink);
  font-size: var(--fs-plan-price);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.c-plan__unit {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0;
}

.c-plan__plus {
  color: var(--c-muted);
  font-size: 0.6em;
}

.c-plan__tax {
  color: var(--c-sub);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

.c-plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding-top: var(--s-16);
  border-top: 1px solid var(--c-plan-line);
}

.c-plan__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s-10);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.7;
}

.c-plan__feature svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: var(--s-3);
}

.c-plan__feature-text {
  min-width: 0;
}

/* ---- 注と大きなボタンの行（WebE #plans・BrandingE #price・AppE #line-yoyaku） ---- */
.c-action-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16) var(--s-32);
  padding-top: var(--s-4);
}

/* 料金の表の下に置くとき（表と同じ幅・真ん中） */
.c-action-note--narrow {
  width: 100%;
  max-width: var(--w-table);
  margin-inline: auto;
  padding-top: 0;
}

.c-action-note__text {
  flex: 1 1 420px;
  min-width: 0;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.8;
}

.c-action-note__button {
  flex: 0 0 auto;
  font-size: 16px;
}

/* ---- 料金の表（BrandingE #price・AppE #line-yoyaku） ---- */
.c-price-table {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--w-table);
  margin-inline: auto;
  padding-block: var(--sp-price-table-block);
  padding-inline: var(--sp-price-table-inline);
  border-radius: var(--r-card);
  background: var(--c-surface);
}

.c-price-table__table {
  width: 100%;
  border-collapse: collapse;
  color: var(--c-ink);
  font-size: 17px;
  line-height: 1.6;
}

.c-price-table__head-row {
  border-bottom: 1px solid var(--c-line);
}

.c-price-table__col {
  padding-block: var(--s-14) var(--s-10);
  padding-inline: 0 var(--s-16);
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
}

.c-price-table__col--price {
  padding-inline: var(--s-12) 0;
  text-align: right;
}

.c-price-table__row {
  border-bottom: 1px solid var(--c-line-soft);
}

.c-price-table__row:last-child {
  border-bottom: 0;
}

.c-price-table__name {
  padding-block: var(--s-18);
  padding-inline: 0 var(--s-16);
  color: var(--c-ink);
  font-weight: 700;
  text-align: left;
  vertical-align: top;
}

.c-price-table__note {
  display: block;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}

.c-price-table__price {
  padding-block: var(--s-18);
  padding-inline: var(--s-12) 0;
  text-align: right;
  vertical-align: top;
}

/* 名前つきの料金の行（「単体」と「Webサイトと一緒」） */
.c-price-table__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 var(--s-10);
  white-space: nowrap;
}

.c-price-table__label {
  color: var(--c-sub);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

.c-price-table__value {
  color: var(--c-ink);
  font-size: var(--fs-price-row);
  line-height: 1.5;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.c-price-table__value--single {
  display: block;
  white-space: nowrap;
}

.c-price-table__pair--accent :is(.c-price-table__label, .c-price-table__value) {
  color: var(--c-green);
}

.c-price-table__pair--accent .c-price-table__value {
  font-size: var(--fs-price-row-sub);
}

/* ---- 比べる表（EstimateE。幅の狭い画面では表の中だけ横に動く） ---- */
.c-compare {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.c-compare__scroll {
  overflow-x: auto;
}

.c-compare__table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.c-compare__corner,
.c-compare__col {
  padding-block: var(--s-14);
  padding-inline: var(--s-8);
  border-bottom: 2px solid var(--c-ink);
  text-align: left;
}

.c-compare__corner {
  width: 22%;
}

.c-compare__col {
  color: var(--c-ink);
  font-size: 19px;
  font-weight: 700;
}

.c-compare__row-label,
.c-compare__cell {
  padding-block: var(--s-14);
  padding-inline: var(--s-8);
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
}

.c-compare__row-label {
  color: var(--c-sub);
  font-weight: 700;
}

/* 行の名前の文節の箱は、箱の中で折らない（2026-11-05）。Safari は文節の改行（auto-phrase）が効かないので、
   表が名前の列を狭くして、箱の中で「ブロ｜グ」と折れていた。表は横に動く枠の中（最小 600px）なので、はみ出さない */
.c-compare__row-label .u-keep {
  white-space: nowrap;
}

.c-compare__cell--strong {
  font-weight: 700;
}

.c-compare__note {
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.8;
}

/* ==========================================================================
   26. 施工事例のカード（parts/cases.php。中身は inc/cases.php）
   ConstructionE #cases（白い段に灰色のカード）・WorksE #cases（灰色の段に白いカード）。
   ========================================================================== */
.c-cases {
  gap: var(--sp-track-gap);
}

.c-cases__item {
  min-width: 0;
}

.c-cases__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card-md);
  overflow: hidden;
  background: var(--c-surface);
  color: var(--c-ink);
}

.l-section--surface .c-cases__card {
  background: var(--c-bg);
}

/* 施工の写真の枠（4：3）。写真が無い事例は、枠ごと出さない（作業台も本番も。2026-11-09。parts/cases.php） */
.c-cases__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-frame);
}

.c-cases__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding-block: var(--s-18) var(--s-22);
  padding-inline: var(--s-22);
}

.c-cases__year {
  color: var(--c-green);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.c-cases__title {
  font-size: var(--fs-h3);
  line-height: 1.5;
  font-weight: 700;
}

.c-cases__dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2) var(--s-12);
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.6;
}

.c-cases__dt {
  color: var(--c-text);
  font-weight: 700;
}

/* ==========================================================================
   27. 黒い面の段（parts/statement.php。キャンバスの .pe-expand の段：AppE #approach・BrandingE #approach・SeoE #aio、
   AboutE #motto と ConstructionE #with-design の頭）。黒い面が広がる・一文が塗られる動きは 28章（.u-expand・.u-fill）。
   ========================================================================== */
.c-statement-wrap {
  background: var(--c-bg);
}

.c-statement-wrap--surface {
  background: var(--c-surface);
}

.c-statement {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.c-statement__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding-inline: var(--sp-inline);
  padding-block: var(--sp-section);
  display: flex;
  flex-direction: column;
  gap: var(--sp-stack);
}

.c-statement__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-statement-head);
}

/* 見出しの型B（7章）を左寄せ・黒い面の色で */
.c-statement__heading {
  justify-content: flex-start;
  text-align: left;
}

.c-statement__title {
  color: var(--c-on-dark-strong);
}

.c-statement__text {
  max-width: 20em;
  font-size: var(--fs-statement-dark);
  line-height: 1.45;
  font-weight: 700;
  font-feature-settings: 'palt';
  text-wrap: balance;
  /* 句読点のあとと、文節の配列の切れ目（<wbr>）だけで折る（2026-11-13 ボス「モットーのキャッチの改行ポイント悪くない？」。
     Safari には auto-phrase が無く「よく考｜えて」と折れていた）。overflow-wrap: anywhere は付けない
     （text-wrap: balance が行を短く組み直すとき、文節の途中で折ってしまう。文節は1行に入る長さに切ってある） */
  word-break: keep-all;
}

.c-statement__text--lg {
  max-width: 18em;
  font-size: var(--fs-statement-lg);
}

.c-statement__text--md {
  max-width: 22em;
  font-size: var(--fs-statement-md);
  line-height: 1.5;
}

.c-statement__lead {
  max-width: 40em;
  color: var(--c-on-dark-sub-2);
  font-size: var(--fs-statement-lead);
  line-height: 1.9;
}

.c-statement__cards {
  gap: var(--s-12);
}

.c-statement__card {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--sp-card-2);
  border: 1px solid var(--c-dark-line-2);
  border-radius: var(--r-card-md);
  background: var(--c-dark-card);
}

.c-statement__cards--quote .c-statement__card {
  gap: var(--s-14);
}

.c-statement__num {
  color: var(--c-mint);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.c-statement__card-title {
  color: var(--c-on-dark);
  font-size: var(--fs-dark-card);
  line-height: 1.5;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.c-statement__quote {
  color: var(--c-on-dark);
  font-size: var(--fs-dark-card);
  line-height: 1.55;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.c-statement__card-text {
  color: var(--c-on-dark-sub-2);
  font-size: 15px;
  line-height: 1.85;
}

.c-statement__tail {
  max-width: 40em;
  padding-top: var(--sp-statement-tail);
  border-top: 1px solid var(--c-dark-line);
  color: var(--c-on-dark-sub-2);
  font-size: var(--fs-statement-lead);
  line-height: 1.9;
}

/* ==========================================================================
   28. 動き（いつも最後の章。2026-11-03 のトップで 12章→22章、同じ日の Webサイト・EC で 22章→28章に動かした）
   --------------------------------------------------------------------------
   キャンバスと同じ決まり：
   - 動きはすべて「動きを減らす」設定でない人だけ（prefers-reduced-motion: no-preference の中）。
   - さらに <html> に .is-motion が付いているときだけ。付けるのは head の短いスクリプト（inc/assets.php）で、
     「動きを止める」ボタンを押すと外れる。スクリプトが動かないときは付かない＝最後の形のまま止まって見える。
   - スクロールに合わせて動く物は、対応したブラウザ（animation-timeline）だけ。
   ========================================================================== */
@keyframes pa-in {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes pa-blur-in {
  from { opacity: 0; filter: blur(14px); translate: 0 .28em; }
  to { opacity: 1; filter: blur(0); translate: 0 0; }
}

@keyframes pa-hero-out {
  to { opacity: 0; translate: 0 -48px; scale: .96; }
}

@keyframes pa-up {
  from { opacity: 0; translate: 0 48px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes pa-letter {
  from { opacity: 0; translate: 0 70%; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes pa-prog {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@keyframes pa-spin {
  to { rotate: 360deg; }
}

@keyframes pa-expand {
  from { clip-path: inset(0 7% round var(--r-expand)); }
  to { clip-path: inset(0 0 round 0px); }
}

/* ---- 2026-11-03 トップで足した動き（キャンバス TopE の helmet の keyframes と同じ値） ---- */
/* 回す角度と数え上がる数は、型を登録して、途中の値をなめらかにつなぐ */
@property --glow-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes pa-rise-in {
  from { opacity: 0; translate: 0 64px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes pa-zoom {
  to { scale: 1.06; }
}

@keyframes pa-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

@keyframes pa-marquee {
  from { translate: 0 0; }
  to { translate: -50% 0; }
}

@keyframes pa-type {
  0% { width: 0; }
  35%, 100% { width: 9em; }
}

@keyframes pa-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes pa-step2 {
  0%, 38% { opacity: 0; translate: 0 10px; }
  46%, 90% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes pa-step3 {
  0%, 56% { opacity: 0; translate: 0 10px; }
  64%, 90% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes pa-fill {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}

@keyframes pa-pulse {
  0% { box-shadow: var(--sh-pulse-from); }
  75%, 100% { box-shadow: var(--sh-pulse-to); }
}

@keyframes pa-ping {
  from { scale: 1; opacity: .5; }
  to { scale: 2.8; opacity: 0; }
}

@keyframes pa-angle {
  to { --glow-a: 360deg; }
}

/* 実績の列を、右の端が段の中身の右にそろう所まで流す（キャンバスの peDrift と同じ式） */
@keyframes pa-drift {
  from { translate: 4% 0; }
  to { translate: calc(100cqi - 100% - (100cqi - min(var(--w-container), 100cqi)) / 2 - 2 * var(--sp-inline)) 0; }
}


/* ---- 2026-11-03 Webサイト・EC で足した動き（キャンバス WebE の helmet の peGrow・peDraw と同じ値） ---- */
/* 流れの線が左から伸びる（24章の .c-flow__fill） */
@keyframes pa-grow {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

/* 線の絵が描かれる（23章の .c-line-icon。path に pathLength="1" が付いている） */
@keyframes pa-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .is-motion .u-ch {
    animation: pa-blur-in .95s var(--ease-out) both;
    animation-delay: calc(.1s + var(--i, 0) * .045s);
  }

  .is-motion .u-fadein {
    animation: pa-in .9s var(--ease-out) .6s both;
  }

  .is-motion .u-fadein.u-d1 { animation-delay: .1s; }
  .is-motion .u-fadein.u-d2 { animation-delay: .72s; }
  .is-motion .u-fadein.u-d3 { animation-delay: .85s; }
  .is-motion .u-fadein.u-d4 { animation-delay: 1.35s; }
  .is-motion .u-fadein.u-d5 { animation-delay: 1.55s; }
  .is-motion .u-fadein.u-d6 { animation-delay: 1.75s; }

  .is-motion .c-contact-band__ring {
    animation: pa-spin 30s linear infinite;
  }

  /* 矢印が右へ少し動く（キャンバスの .pe-link:hover svg） */
  .is-motion :is(.c-textlink, .c-btn--lg, .c-contact-band__button) svg {
    transition: translate .25s ease;
  }

  .is-motion :is(.c-textlink, .c-btn--lg, .c-contact-band__button):hover svg {
    translate: 3px 0;
  }

  .is-motion .c-postlist__link:hover .c-postlist__arrow {
    translate: 3px 0;
  }

  /* マウスに少し寄るボタン（--tx/--ty は assets/js/motion.js が入れる） */
  .is-motion [data-magnet] {
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  }

  /* ---- 2026-11-03 トップで足した動き ---- */
  /* ヒーローの絵の組が下からせり上がる（キャンバスの .pe-stagein） */
  .is-motion .u-stagein {
    animation: pa-rise-in 1.3s var(--ease-out) .45s both;
  }

  /* マウスに合わせて、絵の組をわずかに傾ける（--mx/--my は motion.js が .c-hero に入れる。キャンバスの .pe-mtilt） */
  .is-motion .u-mouse-tilt {
    transform: perspective(1600px) rotateX(calc(var(--my, 0) * -2.5deg)) rotateY(calc(var(--mx, 0) * 3.5deg));
  }

  /* ゆっくり浮く（キャンバスの .pe-float／.pe-f2） */
  .is-motion .u-float {
    animation: pa-float 7s ease-in-out infinite;
  }

  .is-motion .u-float.u-float--slow {
    animation-duration: 8.5s;
    animation-delay: -3s;
  }

  /* 写真にマウスを乗せると少し大きくなる（キャンバスの .pe-zoomimg） */
  .is-motion .u-zoomimg img {
    transition: scale .8s var(--ease-out);
  }

  .is-motion .u-zoomimg:hover img {
    scale: 1.04;
  }

  /* 英字の帯が流れる（スクロール中は motion.js が少し速くする。逆には流れない） */
  .is-motion .c-band__line {
    animation: pa-marquee 90s linear infinite;
  }

  .is-motion .c-band__line--sub {
    animation: pa-marquee 76s linear infinite reverse;
  }

  /* 4つの仕事のカードが上に止まって重なる。下になったカードは --stack（0〜1。motion.js）のぶん小さく暗く */
  .is-motion .c-stack__card {
    position: sticky;
    top: calc(var(--admin-bar-h) + var(--sp-sticky-stack));
    transform-origin: 50% 0;
    transform: scale(calc(1 - var(--stack, 0) * .05));
    filter: brightness(calc(1 - var(--stack, 0) * .18));
  }

  .is-motion .c-stack__card:nth-child(2) { top: calc(var(--admin-bar-h) + var(--sp-sticky-stack) + var(--s-20)); }
  .is-motion .c-stack__card:nth-child(3) { top: calc(var(--admin-bar-h) + var(--sp-sticky-stack) + var(--s-20) * 2); }
  .is-motion .c-stack__card:nth-child(4) { top: calc(var(--admin-bar-h) + var(--sp-sticky-stack) + var(--s-20) * 3); }

  /* 打ち込まれる文字と、点滅する棒 */
  .is-motion .c-type__text {
    animation: pa-type 9s steps(9) infinite;
  }

  .is-motion .c-type__caret {
    animation: pa-blink 1.05s steps(1) infinite;
  }

  /* 検索とAIの段：「検索の結果に出る」「AIの答えに出る」が順に出る */
  .is-motion .c-aio__stage--2 {
    animation: pa-step2 9s ease infinite;
  }

  .is-motion .c-aio__stage--3 {
    animation: pa-step3 9s ease infinite;
  }

  .is-motion .c-aio__glow::before {
    animation: pa-angle 8s linear infinite;
  }

  /* 見守りの点から輪が広がる（輪は動くときだけ作る） */
  .is-motion .c-pulse {
    animation: pa-pulse 2.4s ease-out infinite;
  }

  .is-motion .c-pulse::before,
  .is-motion .c-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--c-green-bright);
    border-radius: var(--r-circle);
    animation: pa-ping 2.8s var(--ease-out) infinite;
  }

  .is-motion .c-pulse::after {
    animation-delay: 1.4s;
  }

  /* 費用の目安：選んだ枠の色が変わる・数字が1けたずつ回る・よくある質問の＋が回る */
  .is-motion .c-choice {
    transition: border-color .2s ease;
  }

  .is-motion .c-digits__strip {
    transition: transform .9s var(--ease-num);
  }

  .is-motion .c-digits__strip--j1 { transition-delay: .03s; }
  .is-motion .c-digits__strip--j2 { transition-delay: .06s; }
  .is-motion .c-digits__strip--j3 { transition-delay: .09s; }
  .is-motion .c-digits__strip--j4 { transition-delay: .12s; }
  .is-motion .c-digits__strip--j5 { transition-delay: .15s; }
  .is-motion .c-digits__strip--j6 { transition-delay: .18s; }
  .is-motion .c-digits__strip--j7 { transition-delay: .21s; }
  .is-motion .c-digits__strip--j8 { transition-delay: .24s; }
  .is-motion .c-digits__strip--j9 { transition-delay: .27s; }

  .is-motion .c-faq__plus {
    transition: rotate .3s ease;
  }

  /* 数字の組の「600」の数え上がり（2026-11-13：数えるのは motion.js。画面に入ったら 1.5 秒。前は CSS だけでスクロールの量に合わせていた）。
     数えている間だけ、本当の数字（.c-figures__digits）は場所を取ったまま透明にし、その上に ::after で数えている数（data-n）を右に寄せて重ねる
     （けたが増えても「社以上」の位置が動かない）。::after は読み上げない（content の「/ ""」。効かないブラウザでも本当の数字は残る） */
  .is-motion .c-figures__num.is-counting {
    position: relative;
  }

  .is-motion .c-figures__num.is-counting .c-figures__digits {
    color: transparent;
  }

  .is-motion .c-figures__num.is-counting::after {
    content: attr(data-n);
    content: attr(data-n) / "";
    position: absolute;
    inset: 0;
    text-align: end;
  }

  @supports (animation-timeline: view()) {
    /* スクロールすると、ヒーローの絵の組が少し大きくなる（キャンバスの .pe-tilt） */
    .is-motion .u-scroll-zoom {
      transform-origin: 50% 100%;
      animation: pa-zoom linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 560px;
    }

    .is-motion .u-fill {
      animation: pa-fill linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%;
    }

    /* 黒い面が広がって現れる（キャンバスの .pe-expand。検索とAIの段など） */
    .is-motion .u-expand {
      animation: pa-expand linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 28%;
    }

    /* 実績の列：スクロールに合わせて横に流す。キーボードで中のリンクに来たら、流すのをやめて横に動かせるようにする */
    .is-motion .c-works--track {
      overflow-x: visible;
      scroll-snap-type: none;
    }

    .is-motion .c-works--track .c-works__list {
      animation: pa-drift linear both;
      animation-timeline: view();
      animation-range: cover 12% cover 88%;
    }

    .is-motion .c-works--track:has(:focus-visible) {
      overflow-x: auto;
    }

    .is-motion .c-works--track:has(:focus-visible) .c-works__list {
      animation: none;
    }

    .is-motion .u-reveal {
      animation: pa-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    .is-motion .l-header__progress {
      display: block;
      animation: pa-prog linear both;
      animation-timeline: scroll(nearest block);
    }

    .is-motion .l-footer__wordmark span {
      animation: pa-letter linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 7%) entry calc(52% + var(--i, 0) * 7%);
    }

    .is-motion .c-hero__text {
      animation: pa-hero-out linear both;
      animation-timeline: scroll(root block);
      animation-range: 40px 480px;
    }

    .is-motion .c-contact-band {
      animation: pa-expand linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 30%;
    }

    /* ---- 2026-11-03 Webサイト・EC で足した動き ---- */
    /* 流れの線が、段が見えてくるのに合わせて左から伸びる（キャンバスの .pe-grow。--i: 0 の値） */
    .is-motion .c-flow__fill {
      animation: pa-grow linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 48%;
    }

    /* 線の絵が、カードが見えてくるのに合わせて描かれる（キャンバスの .pe-card の view-timeline と .pe-draw path） */
    .is-motion .c-card {
      view-timeline-name: --pa-card;
    }

    .is-motion .c-card .c-line-icon path {
      stroke-dasharray: 1 1;
      animation: pa-draw linear both;
      animation-timeline: --pa-card;
      animation-range: entry 35% cover 50%;
    }
  }
}

@container (max-width: 760px) {
  .is-motion .c-contact-band {
    animation: none;
  }

  /* 幅の狭い画面では、重ねない・広げない・流さない・傾けない（キャンバスと同じ） */
  .is-motion .c-stack__card {
    position: static;
    transform: none;
    filter: none;
  }

  .is-motion .u-expand {
    animation: none;
  }

  .is-motion .c-works--track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .is-motion .c-works--track .c-works__list {
    animation: none;
  }

  .is-motion .u-mouse-tilt {
    transform: none;
  }
}