/* ===== tokens.css ===== */
/* ============================================================

   志師塾グループ Web デザインシステム — デザイントークン（原子）

   ------------------------------------------------------------

   ここが唯一の原本。色・文字・余白を変えるときはこのファイルだけを直す。

   コンポーネントは必ず var(--sj-*) 経由で参照し、生の色コードを書かない。



   【v0.2 の考え方 ★2026-08-23】

   v0.1 は「ネイビー＋オレンジ＋無彩色」の2色構成で、色を置ける場所が

   申込ボタンしかなく、差し色が弱かった。実測した4サイトのうち上質だった

   2本（AI業務自動化診断・3DAYSチャレンジ）に共通するのは

   **深い紺 ＋ ゴールド ＋ ベージュ ＋ 明朝** だったので、これを骨格に採る。



   値の出どころ＝実測（2026-08-20 取得）

     ug.exwill.jp/p/ai-shindan … 青みグレー8段・ゴールド4段・ベージュ5段

     ug.44jyuku.com/p/3days-entry … ベージュ・明朝

     44jyuku.com … 志師塾のネイビーとオレンジ

   ============================================================ */



:root {



  /* ============================================================

     A. ブランド色（テーマで上書きされる）

     既定値は志師塾。AI伴走士・エクスウィルは themes/*.css が差し替える。

     ============================================================ */

  /* ★2026-09-02：ここは「どのブランドでもない灰色」。テーマが必ず上書きする。

     以前は志師塾テーマと一字一句同じ値が入っていて、志師塾だけが

     『既定値』と『テーマの1つ』を兼ねていた（＝主色を変える日に2箇所直すことになる）。

     テーマの読み込みを忘れると灰色で出るので、間違いにすぐ気づける。 */

  --sj-brand-900: #2b2f36;

  --sj-brand-800: #3c424b;   /* ★主色。見出し・リンク・図の要素 */

  --sj-brand-600: #565e6a;

  --sj-brand-400: #7c848f;

  --sj-brand-100: #e8eaed;   /* 淡い面（この上は黒文字） */

  --sj-brand-50:  #f5f6f8;   /* セクション背景 */



  /* ============================================================

     申込ボタンの色 ★2026-08-23 全面見直し

     ------------------------------------------------------------

     【文字色の決め方】

     原則は「濃い地＋白文字」。世の中のCTAはこの形が圧倒的多数で、

     利用者はそれを学習している。慣行から外れると押せることが伝わりにくい。

     明るい地に濃い文字を置くのは、**白文字が物理的に使えない色のときだけ**

     （金・黄など。Amazonのカートボタンが黄＋黒なのはこの理由）。



     実測：白文字で 4.5 を満たせる最も明るいオレンジは #c55329（4.52）。

     それより明るくすると白文字は使えないので、「明るい朱＋白文字」は成立しない。



     目立たせるのは色の明るさではなく、**大きさ・立体感・周囲の余白**で行う。

     ページ全体は抑制的なまま、CTAだけ彩度を上げる。全部を派手にすると、

     どれも目立たなくなる。

     ============================================================ */

  /* 申込ボタンもテーマが決める。ここは中立の灰。 */

  --sj-action-700: #3c424b;  /* 押下時（沈める） */

  --sj-action-600: #565e6a;  /* ★ボタンの地。テーマが色を入れる */

  --sj-action-500: #7c848f;  /* 線・アイコン */

  --sj-action-50:  #f2f3f5;  /* CTAボックスの地 */

  --sj-action-ink: #ffffff;  /* ボタンの文字色。金テーマだけ濃紺に切り替わる */



  /* ============================================================

     B. 深い地（全ブランド共通）

     ヒーロー・フッター・引き締めたいセクションの背景。

     ブランド色より濃く青みが少ないので、どのブランドに敷いても喧嘩しない。

     出どころ＝ai-shindan 実測の最頻色 #0f2340（53回）

     ============================================================ */

  /* 濃い地。ブランドの色相に合わせるのでテーマが上書きする（既定は中立の暗い灰）。 */

  --sj-deep:      #23262b;

  /* 濃い地（deep）の上に置く申込ボタン。

     既定は「白地＋ブランド色の文字」。理由＝朱・緑のような濃いCTA色は

     紺の上だと沈んで見えなくなるため。

     ただしCTA色そのものが明るい（金など）テーマは、紺の上でも十分に目立つので

     テーマ側でこの2つを上書きして、ブランドの色のまま出す。 */

  --sj-btn-on-deep:     #ffffff;

  --sj-btn-on-deep-ink: var(--sj-brand-900);

  --sj-deep-soft: #33373d;

  /* 濃い地のグラデーションの両端。ベタ塗りだと面積が大きいとき重く見えるので、

     ごく浅い明暗を付けている。部品に直書きしていたのをトークンに戻した。 */

  --sj-deep-hi:   #2e3238;

  --sj-deep-lo:   #1a1d21;   /* deep の上に置くカード・枠 */



  /* ============================================================

     C. 金（格・実績・特別感）★v0.2 新設

     「高級感」を担う色。装飾でなく "格" を示すために使う。

     ★載せる文字色を必ず守ること：

       --sj-gold-400 の上 → 濃紺文字（コントラスト 8.13 / AAA）

       白地の上の金文字 → --sj-gold-700（7.65 / AAA）

       ※金の上に白文字は全段で不足する。使わない。

     ============================================================ */

  --sj-gold-700: #6f4d0f;   /* 白地に置く金の文字（7.35 / AAA） */

  /* ★2026-09-02：#c9973f は白地 2.63・砂色地 2.30 で、線としての基準3.0を

     割っていた（全部品検査で発覚。AI伴走士のミントと同じ問題が金でも起きていた）。

     色相はほぼ変えずに濃くして、白地 4.03・砂色地 3.52 を確保する。 */

  --sj-gold-500: #a5761d;   /* 線・枠（白地 4.03 / 砂色地 3.52） */

  --sj-gold-400: #e0b458;   /* 濃紺の上の文字・ボタンの地（AAA 8.13） */

  --sj-gold-100: #f5ecd8;



  /* --- ミントの階調（AI伴走士の装飾）。PPTテンプレの章扉・アジェンダで

         実際に使われている色（#00CC99 の面・#00A87A の文字・#0F3B2E の見出し）。

         ※ design.md の「旧値は使わない」は"方向矢印の色として"の話で、

            装飾としては現役。テンプレ全頁を実測して確認した（2026-09-01）。 --- */

  --sj-mint-700: #0f3b2e;   /* 白地に置く文字（12.46） */

  --sj-mint-500: #00916a;   /* 線・枠（緑み地の上で 3.69） */

  --sj-mint-400: #00cc99;   /* 面／濃い地の上の文字（濃紺地 7.56） */

  --sj-mint-100: #e6f7f2;



  /* --- 装飾の差し色（役割）。部品はこちらを見る。

         どのパレットを充てるかはテーマが決める＝既定は金、AI伴走士はミント。

         「格」を出したいブランドは金、「軽さ」を出したいブランドはミント。 --- */

  --sj-deco-ink:  var(--sj-gold-700);   /* 白地に置く文字 */

  --sj-deco-line: var(--sj-gold-500);   /* 線・枠 */

  --sj-deco-face: var(--sj-gold-400);   /* 面／濃い地の上の文字 */

  --sj-deco-pale: var(--sj-gold-100);   /* 淡い地 */   /* ごく淡い面 */



  /* ============================================================

     D. 砂色（暖かいニュートラル）★v0.2 新設

     白とグレーだけだと硬く冷たくなる。紙の質感を出してセクションを分ける。

     明朝と相性がよい。出どころ＝ai-shindan / 3days 実測

     ============================================================ */

  --sj-sand-300: #d8d2c6;   /* 罫線・境界 */

  --sj-sand-200: #e5ded2;   /* カードの地 */

  --sj-sand-100: #efe9de;   /* セクションの地 */

  --sj-sand-50:  #f3efe8;

  --sj-sand-25:  #faf8f4;   /* ほぼ白。ページ全体の地にも使える */



  /* ============================================================

     E. 文字・線・面（無彩色〜青みグレー）

     design.md「原則モノトーン。色は強調したい箇所だけ」を Web に踏襲。

     ============================================================ */

  --sj-ink:            #1c2430;  /* 本文（白地 15.6 / AAA） */

  --sj-ink-muted:      #4c586a;  /* 補足・キャプション（7.21 / AAA） */

  /* ★2026-08-23：旧 --sj-ink-faint (#8b95a3) は白地 3.03 で、

     主要読者（50代・男性6割）には読めないため廃止し muted に統合した。

     「薄いグレーの注記」という段階を持たない ＝ 読ませない文字は置かない、が方針。

     ★2026-09-01：互換のため名前だけ残していたが、参照ゼロの死んだ名前になったので削除。

     宣言を消すのが筋で、同じ値の別名を残すのは「解決」ではない。 */

  --sj-ink-inverse:    #ffffff;  /* 濃い地の上の文字 */

  --sj-ink-200:        #cfd6df;  /* 濃い地の上の補足文字（白より一段落とす） */

  --sj-line:           #cfd6df;  /* 罫線 */

  --sj-line-strong:    #b9c3d1;  /* 表の外枠 */

  --sj-surface:        #ffffff;  /* 地 */

  --sj-surface-subtle: #f7f9fc;  /* 引用・交互背景 */

  --sj-surface-gray:   #eef2f6;  /* 表ヘッダー */



  /* ============================================================

     F. 意味を持つ色

     ============================================================ */

  /* 面・枠・アイコン用の赤。design.md §4 の確定色（ビビッドさで注意を引く役）。

     白地 4.80 なので**文字色には使わない**。 */

  --sj-alert:      #e60012;

  --sj-alert-pale: #fff0f0;

  /* 読ませる赤（エラー文・注意文）。白地 8.06 / AAA。

     ★色だけで意味を伝えないこと。色覚特性のある方は日本人男性の約5%＝

     男性6割の媒体では実数として無視できない。文言でも分かるように書く。 */

  --sj-alert-ink:  #a5000d;



  /* ============================================================

     G. 書体

     本文＝ゴシック1種。見出しに限り明朝を使ってよい（2026-08-23 五十嵐さん判断）。

     明朝は「格を出したいLPの見出し・キャッチ」に限定し、本文には使わない。

     ============================================================ */

  /* ★2026-08-23：Webフォントを読み込まず「システムフォント前提」で設計する。

     理由＝日本語Webフォントは容量が大きく（1書体で数MB）、表示速度が落ちる。

     セミナーLPの流入は実測でスマホ7〜9割なので、速度低下は申込率に直接響く。

     Noto Sans JP を先頭に置いていた頃は、実際には Windows＝游ゴシック、

     Mac＝ヒラギノで表示されており、「設計した書体で見えていない」状態だった。

     それなら最初から各OSの標準書体を正として設計する。



     Windows: Yu Gothic Medium（游ゴシックは Regular が細すぎるので Medium を先に）

     Mac/iOS: Hiragino Sans

     Android: Noto Sans JP（端末に入っている） */

  --sj-font-sans:  "Hiragino Sans", "Hiragino Kaku Gothic ProN",

                   "Yu Gothic Medium", "YuGothic", "Yu Gothic",

                   "Noto Sans JP", "Meiryo", system-ui, sans-serif;

  /* 明朝も同様にOS標準を使う。Windowsの游明朝は細いので、

     見出しに使うときは font-weight で補う（.sj-display は 700 を当てている）。 */

  --sj-font-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro",

                   "Yu Mincho", "YuMincho", "Noto Serif JP",

                   "MS PMincho", serif;

  /* 見出しの書体。テーマが sans か serif を選ぶ（ブランドの性格差の1つ）。

     ここを serif にすると、見出しがまとめて明朝になる。 */

  --sj-font-heading: var(--sj-font-sans);



  /* ============================================================

     H. 文字サイズ（8段だけ。中間値を足さない）

     基準は 17px。スマホの入力欄は16px未満だと自動ズームが起きる（17pxなので満たす）。

     ============================================================ */

  /* ★2026-08-23：主要読者が50代（男性6割）なので一段上げた。

     老眼が始まる年代では 16px は小さい側。入力欄も17pxになるので

     iPhone の自動ズーム回避（16px以上）は引き続き満たす。 */

  /* 最小サイズ。★2026-09-02：旧 --sj-fs-xs(13px) はここへ統合した。

     読み手に55歳以降が入るので、日本語の注記として13pxは読まれない。

     15px を下限とし、それより小さい段は持たない。 */

  --sj-fs-sm:  15px;

  --sj-fs-md:  17px;

  --sj-fs-lg:  19px;

  --sj-fs-xl:  22px;

  /* 大きい3段は画面幅に応じて縮める。★2026-08-23

     セミナーLPの流入は実測でスマホ7〜9割（GA4・直近30日）。

     40px固定だとスマホでヒーローが縦に伸び、申込フォームが画面に入らなくなる。 */

  --sj-fs-2xl: clamp(23px, 4.6vw, 26px);  /* 下限は fs-xl(22px) より大きく */

  --sj-fs-3xl: clamp(25px, 5.6vw, 34px);

  --sj-fs-4xl: clamp(28px, 7vw, 40px);



  /* ---- 行間 ---- */

  --sj-lh-body:    1.8;

  --sj-lh-heading: 1.4;

  --sj-lh-tight:   1.2;



  /* ---- 字間（明朝の大見出しは少し詰めると締まる） ---- */

  --sj-ls-tight: -.01em;

  --sj-ls-wide:  .12em;   /* 英字の小見出し・ラベル */



  /* ============================================================

     I. 余白（4の倍数のみ。5px・15px・28px のような半端を作らない）

     ============================================================ */

  --sj-space-1:  4px;

  --sj-space-2:  8px;

  --sj-space-3: 12px;

  --sj-space-4: 16px;

  --sj-space-5: 24px;

  --sj-space-6: 32px;

  --sj-space-7: 48px;

  /* セクション間の大きい余白もスマホで詰める（同上の理由）。

     4の倍数の原則は最大値側で守る（スマホでは端数になるが、目視で分からない差）。 */

  --sj-space-8: clamp(52px, 8vw, 64px);   /* 下限は space-7(48px) より大きく */

  --sj-space-9: clamp(68px, 12vw, 96px);  /* 下限は space-8 の下限より大きく */



  /* ---- 角丸（3種だけ）----

     テーマが上書きする。硬さの印象はここでほぼ決まる：

     2px＝硬質・格式／5px＝標準／10px＝やわらかい・先進 */

  --sj-radius-sm:   4px;   /* テーマが決める。ここは中立 */

  --sj-radius-md:   8px;

  --sj-radius-pill: 999px;



  /* ---- セクションの交互背景 ----

     白ばかりを避けるための「2色目の地」。テーマごとに性格が変わる

     （淡い青＝軽い／砂色＝重く上質）。 */

  --sj-section-alt: var(--sj-brand-50);



  /* ---- 影（Webのみ2種。PPTは design.md 通り影禁止） ---- */

  --sj-shadow:        0 2px  8px rgba(15, 35, 64, .10);

  --sj-shadow-lifted: 0 4px 16px rgba(15, 35, 64, .16);



  /* ---- 線幅・レイアウト幅 ---- */

  --sj-border-width: 2px;

  --sj-width-text: 720px;

  --sj-width-page: 1120px;



  /* ---- 動き（1種だけ） ---- */

  --sj-transition: .18s ease-out;

}

/* ===== base.css ===== */
/* ============================================================
   志師塾 Web デザインシステム — 地の設定
   ------------------------------------------------------------
   ページ全体にかかる最小限だけ。ここでレイアウトは組まない。
   ============================================================ */

.sj-root,
body {
  font-family: var(--sj-font-sans);
  font-size: var(--sj-fs-md);
  line-height: var(--sj-lh-body);
  color: var(--sj-ink);
  background: var(--sj-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 志師塾は極太を重ねない方針（design.md §4）。
   Web は Noto Sans JP なので Bold は使えるが、700 までに抑え 900 は使わない。 */
.sj-root strong,
.sj-root b {
  font-weight: 700;
}

/* 読み物の1行幅。長すぎる行は目が戻れなくなる。 */
.sj-prose {
  max-width: var(--sj-width-text);
}

/* ページの最大幅 */
.sj-container {
  max-width: var(--sj-width-page);
  margin-inline: auto;
  padding-inline: var(--sj-space-5);
}

/* キーボード操作の人に、今どこにいるかを必ず見せる */
.sj-root :focus-visible {
  outline: 3px solid var(--sj-brand-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sj-root *,
  .sj-root *::before,
  .sj-root *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ===== components.css ===== */
/* ============================================================

   志師塾 Web デザインシステム — 部品のスタイル

   ------------------------------------------------------------

   すべて var(--sj-*) 経由。ここに生の色コードを書かない。

   クラス名ベースで作ってあるので、React を通さず素の HTML に

   貼っても同じ見た目になる（UTAGE へ移すときのため）。

   ============================================================ */



/* ------------------------------------------------------------

   ボタン

   ------------------------------------------------------------ */

.sj-btn {

  display: inline-block;

  font-family: var(--sj-font-sans);

  font-size: var(--sj-fs-md);

  font-weight: 700;

  line-height: 1.5;

  text-align: center;

  text-decoration: none;

  padding: var(--sj-space-3) var(--sj-space-6);

  /* min-height を「外形の高さ」として効かせる。

     これが無いと padding が上乗せされ、指定より一回り大きいボタンになる。 */

  box-sizing: border-box;

  border: var(--sj-border-width) solid transparent;

  border-radius: var(--sj-radius-sm);

  cursor: pointer;

  transition: background var(--sj-transition), box-shadow var(--sj-transition);

}



/* 申込ボタン ★2026-08-23 強化

   この色は CTA だけに使う（他で使うと申込が埋もれる）。

   - 原則「濃い地＋白文字」。金テーマだけ濃紺文字（金に白は物理的に不可のため）

   - 下辺に濃い影を1本入れて「押せる面」に見せる（板が浮いている表現）

   - ホバーで濃くしつつ1px浮かせ、押下で沈める

   - 高さは最低56px。指で押す前提のサイズ（44pxは下限であって目標ではない）

   - 主要読者は50代（男性6割）。指の精度も落ちる年代なので、

     小さいボタンや近接した並びを作らない */

.sj-btn--primary {

  background: var(--sj-action-600);

  color: var(--sj-action-ink);

  /* ★2026-09-02：地が明るい色（金など）だと、白地との差が 1.94 しかなく

     ボタンの輪郭が見えない（非文字UIの基準3.0を割る）。

     テーマが --sj-btn-edge を持つ場合だけ、輪郭線を引く。 */

  border-color: var(--sj-btn-edge, transparent);

  /* 下辺の影は黒の透過にする。ブランド色に依存しないので、

     ホバーで地の色が変わっても影が消えない。 */

  box-shadow: 0 3px 0 rgba(0, 0, 0, .22), var(--sj-shadow);

  transition: background var(--sj-transition), transform var(--sj-transition),

              box-shadow var(--sj-transition);

}

/* ホバーは「濃くする」。明るい側（--sj-action-500）に振ると

   白文字のコントラストが 3.59 まで落ちて基準を割るため使わない。 */

.sj-btn--primary:hover {

  background: var(--sj-action-700);

  transform: translateY(-1px);

  box-shadow: 0 4px 0 rgba(0, 0, 0, .24), var(--sj-shadow-lifted);

}

.sj-btn--primary:active {

  transform: translateY(2px);

  box-shadow: 0 1px 0 rgba(0, 0, 0, .22);

}

/* 視線を「次に進む」方へ向ける。文言に矢印を書かなくてよいようにする */

.sj-btn--primary::after {

  content: "›";

  margin-left: .55em;

  font-weight: 700;

  opacity: .8;

}



/* 副次＝ネイビー。資料を見る・詳細を読む等、申込より優先度の低い行動 */

.sj-btn--secondary { background: var(--sj-brand-800); color: var(--sj-ink-inverse); }

.sj-btn--secondary:hover { background: var(--sj-brand-900); }



/* 枠線＝3番目の選択肢。並列に置くときだけ使う */

.sj-btn--ghost { background: transparent; color: var(--sj-brand-800); border-color: var(--sj-brand-800); }

.sj-btn--ghost:hover { background: var(--sj-brand-50); }



.sj-btn--sm { font-size: var(--sj-fs-sm); padding: var(--sj-space-2) var(--sj-space-4); }

/* 主CTAは lg を使う。指で押せる下限44pxは守りつつ、縦は詰める。

   ★2026-08-24：縦に大きいとボタンの圧が強すぎてページの印象が変わる、

   という指摘を受けて 92px → 48px に。存在感は「高さ」ではなく

   横幅（左右の余白 space-8）・文字の大きさ・前後の空きで作る。 */

.sj-btn--lg {

  font-size: var(--sj-fs-lg);

  padding: var(--sj-space-2) var(--sj-space-8);

  min-height: 48px;

  line-height: 1.5;

}

.sj-btn--block { display: block; width: 100%; box-sizing: border-box; }



/* CTAの前後は必ず空ける。周りが詰まっているとボタンは見つけてもらえない

   （色を強くするより、孤立させる方が効く） */

.sj-btn--lg.sj-btn--block { margin-block: var(--sj-space-2); }



.sj-btn[aria-disabled="true"],

.sj-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }



/* テキストリンク

   ★2026-08-23 修正：brand-600 だと AI伴走士（#4a94d6）で白地 3.23 と基準を割った。

   brand-900 なら3テーマとも 6.99 以上。下線があるので、濃くてもリンクだと分かる。 */

.sj-link {

  color: var(--sj-brand-900);

  font-weight: 700;

  text-decoration: underline;

  text-underline-offset: 3px;

}

.sj-link:hover { color: var(--sj-brand-800); text-decoration-thickness: 2px; }



/* ------------------------------------------------------------

   CTAボックス（記事末尾の主CTA）

   ------------------------------------------------------------ */

.sj-cta {

  background: var(--sj-action-50);

  border: var(--sj-border-width) solid var(--sj-action-600);

  border-radius: var(--sj-radius-md);

  padding: var(--sj-space-6);

  margin: var(--sj-space-7) 0;

  text-align: center;

}

.sj-cta__title {

  font-size: var(--sj-fs-xl);

  font-weight: 700;

  line-height: var(--sj-lh-heading);

  color: var(--sj-brand-800);

  margin: 0 0 var(--sj-space-2);

}

.sj-cta__body { margin: 0 0 var(--sj-space-5); font-size: var(--sj-fs-md); }

.sj-cta__note { margin: var(--sj-space-3) 0 0; font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); }



/* 本文前半の軽量CTA。ここはオレンジを使わずネイविーにして、主CTAと強さの差をつける */

.sj-cta-lite {

  border-left: 4px solid var(--sj-brand-800);

  background: var(--sj-brand-50);

  padding: var(--sj-space-4) var(--sj-space-5);

  margin: var(--sj-space-6) 0;

  border-radius: 0 var(--sj-radius-sm) var(--sj-radius-sm) 0;

}

.sj-cta-lite__body { margin: 0 0 var(--sj-space-3); font-size: var(--sj-fs-md); }

.sj-cta-lite .sj-btn {

  background: var(--sj-brand-800);

  color: var(--sj-ink-inverse);

  font-size: var(--sj-fs-sm);

  padding: var(--sj-space-2) var(--sj-space-5);

  box-shadow: none;

}

.sj-cta-lite .sj-btn:hover { background: var(--sj-brand-900); }



/* 注意ボックス（1ページ1つ） */

.sj-alert-box {

  border-left: 4px solid var(--sj-alert);

  background: var(--sj-alert-pale);

  padding: var(--sj-space-4) var(--sj-space-5);

  margin: var(--sj-space-6) 0;

  border-radius: 0 var(--sj-radius-sm) var(--sj-radius-sm) 0;

}

.sj-alert-box__body { margin: 0; font-size: var(--sj-fs-md); }



/* ------------------------------------------------------------

   見出し

   ------------------------------------------------------------ */

.sj-h2 {

  font-size: var(--sj-fs-3xl);

  line-height: var(--sj-lh-heading);

  font-weight: 700;

  color: var(--sj-brand-800);

  margin: var(--sj-space-8) 0 var(--sj-space-4);

  padding-bottom: var(--sj-space-3);

  border-bottom: var(--sj-border-width) solid var(--sj-brand-800);

  text-wrap: balance;

}

.sj-h3 {

  font-size: var(--sj-fs-2xl);

  line-height: var(--sj-lh-heading);

  font-weight: 700;

  color: var(--sj-ink);

  margin: var(--sj-space-7) 0 var(--sj-space-3);

  padding-bottom: var(--sj-space-2);

  border-bottom: 1px solid var(--sj-line);

  text-wrap: balance;

}

.sj-h4 {

  font-size: var(--sj-fs-xl);

  line-height: var(--sj-lh-heading);

  font-weight: 700;

  color: var(--sj-brand-800);

  margin: var(--sj-space-6) 0 var(--sj-space-3);

}



/* LPのセクション見出し（中央・番号付き） */

.sj-sec-head { text-align: center; margin: 0 0 var(--sj-space-7); }

.sj-sec-head__num {

  display: inline-block;

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  letter-spacing: .12em;

  /* ★2026-08-23 修正：--sj-action-600 を使っていたため、金がCTA色になる

     エクスウィルで「白地に金文字＝コントラスト1.94」となり読めなかった。

     金は濃い側（--sj-gold-700／全テーマ 7.65）に固定する。 */

  color: var(--sj-deco-ink);

}

.sj-section--deep .sj-sec-head__num,

.sj-hero--deep .sj-sec-head__num { color: var(--sj-deco-face); }

.sj-sec-head__title {

  font-size: var(--sj-fs-3xl);

  line-height: var(--sj-lh-heading);

  font-weight: 700;

  color: var(--sj-brand-800);

  margin: var(--sj-space-2) 0 0;

  text-wrap: balance;

}

.sj-sec-head__sub { font-size: var(--sj-fs-md); color: var(--sj-ink-muted); margin: var(--sj-space-2) 0 0; }



/* ------------------------------------------------------------

   カード

   ------------------------------------------------------------ */

.sj-cards {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: var(--sj-space-5);

}

/* ★2026-08-24：砂色の地（エクスウィル）の上に白カードを置くと、

   枠線だけでは浮き上がらず、面が沈んで見えるという指摘を受けて影を追加。

   暖色ニュートラルが重なる場面で効く。白地の上でも邪魔にならない浅さにする。 */

.sj-card {

  border: 1px solid var(--sj-line);

  border-radius: var(--sj-radius-md);

  padding: var(--sj-space-5);

  background: var(--sj-surface);

  box-shadow: var(--sj-shadow);

}

.sj-card__label {

  display: inline-block;

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  color: var(--sj-ink-inverse);

  /* ★2026-08-23 修正：brand-800 だと AI伴走士（#3181cd）で白文字 4.08 と

     基準を割った。小さい文字（13px）なので brand-900 まで濃くする。 */

  background: var(--sj-brand-900);

  padding: var(--sj-space-1) var(--sj-space-3);

  border-radius: var(--sj-radius-pill);

}

.sj-card__title {

  font-size: var(--sj-fs-lg);

  font-weight: 700;

  line-height: var(--sj-lh-heading);

  margin: var(--sj-space-3) 0 var(--sj-space-2);

}

.sj-card__body { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin: 0; }



/* ------------------------------------------------------------

   数字を見せる

   ------------------------------------------------------------ */

.sj-stats {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: var(--sj-space-5);

  background: var(--sj-brand-50);

  padding: var(--sj-space-6);

  border-radius: var(--sj-radius-md);

}

.sj-stat { text-align: center; }

.sj-stat__num {

  font-size: var(--sj-fs-4xl);

  font-weight: 700;

  line-height: var(--sj-lh-tight);

  color: var(--sj-brand-800);

  font-variant-numeric: tabular-nums;

}

.sj-stat__unit { font-size: var(--sj-fs-lg); margin-left: 2px; }

.sj-stat__label { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin-top: var(--sj-space-1); }



/* ------------------------------------------------------------

   表

   ------------------------------------------------------------ */

.sj-table-wrap { overflow-x: auto; }

.sj-table { width: 100%; border-collapse: collapse; font-size: var(--sj-fs-sm); }

.sj-table th,

.sj-table td {

  border: 1px solid var(--sj-line-strong);

  padding: var(--sj-space-3) var(--sj-space-4);

  vertical-align: middle;

}

/* ★2026-08-23：淡い青（#e3edf7）だと地の色（#f4f8fc）と近く、

   見出し行が見分けられなかった。濃紺＋白文字にして境目をはっきりさせる。

   主要読者が50代なので、淡い色どうしの差では足りない。 */

.sj-table thead th {

  background: var(--sj-brand-800);

  color: var(--sj-ink-inverse);

  text-align: center;

  font-weight: 700;

}

.sj-table tbody th { background: var(--sj-brand-100); text-align: left; font-weight: 700; }

.sj-table__good { color: var(--sj-brand-800); font-weight: 700; }

.sj-table__weak { color: var(--sj-ink-muted); }



/* ------------------------------------------------------------

   引用・受講生の声

   ------------------------------------------------------------ */

.sj-quote {

  border-left: 4px solid var(--sj-brand-400);

  background: var(--sj-surface-subtle);

  padding: var(--sj-space-4) var(--sj-space-5);

  margin: var(--sj-space-6) 0;

  border-radius: 0 var(--sj-radius-sm) var(--sj-radius-sm) 0;

}

.sj-quote__body { margin: 0 0 var(--sj-space-2); }

.sj-quote__cite { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); font-style: normal; }



/* ------------------------------------------------------------

   フォーム

   ------------------------------------------------------------ */

.sj-form {

  border: 1px solid var(--sj-line);

  border-radius: var(--sj-radius-md);

  padding: var(--sj-space-6);

  background: var(--sj-surface);

}

.sj-form--tinted { background: var(--sj-brand-50); border-color: var(--sj-brand-100); }

.sj-form__head { text-align: center; margin: 0 0 var(--sj-space-5); }

.sj-form__title {

  font-size: var(--sj-fs-xl);

  font-weight: 700;

  line-height: var(--sj-lh-heading);

  color: var(--sj-brand-800);

  margin: 0 0 var(--sj-space-2);

}

.sj-form__sub { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin: 0; }

.sj-form__privacy {

  font-size: var(--sj-fs-sm);

  color: var(--sj-ink-muted);

  text-align: center;

  margin: var(--sj-space-4) 0 0;

  line-height: 1.8;

}



.sj-field { margin: 0 0 var(--sj-space-5); }

.sj-label {

  display: block;

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  color: var(--sj-ink);

  margin: 0 0 var(--sj-space-2);

}

.sj-req,

.sj-opt {

  display: inline-block;

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  padding: 1px var(--sj-space-2);

  border-radius: 2px;

  margin-left: var(--sj-space-2);

  vertical-align: 2px;

}

.sj-req { color: var(--sj-ink-inverse); background: var(--sj-alert); }

.sj-opt { color: var(--sj-ink-muted); background: var(--sj-surface-gray); }



/* 入力欄の文字は必ず 16px 以上。15px 以下だと iPhone がタップ時に自動ズームする */

.sj-input,

.sj-select,

.sj-textarea {

  width: 100%;

  box-sizing: border-box;

  font-family: var(--sj-font-sans);

  font-size: var(--sj-fs-md);

  line-height: 1.5;

  color: var(--sj-ink);

  padding: var(--sj-space-3) var(--sj-space-4);

  border: 1px solid var(--sj-line-input);

  border-radius: var(--sj-radius-sm);

  background: var(--sj-surface);

  transition: border-color var(--sj-transition), box-shadow var(--sj-transition);

}

.sj-input:focus,

.sj-select:focus,

.sj-textarea:focus {

  outline: none;

  border-color: var(--sj-brand-800);

  box-shadow: 0 0 0 3px var(--sj-focus-ring);

}

.sj-input::placeholder { color: var(--sj-ink-muted); }

.sj-input--error,

.sj-select--error,

.sj-textarea--error { border-color: var(--sj-alert); background: var(--sj-alert-pale); }



.sj-help  { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin: var(--sj-space-2) 0 0; }

.sj-error { font-size: var(--sj-fs-sm); color: var(--sj-alert-ink); font-weight: 700; margin: var(--sj-space-2) 0 0; }



.sj-check { display: flex; align-items: flex-start; gap: var(--sj-space-3); font-size: var(--sj-fs-sm); }

.sj-check__input {

  width: 18px;

  height: 18px;

  margin-top: 5px;

  flex-shrink: 0;

  accent-color: var(--sj-brand-800);

}



/* ============================================================

   ここから v0.2 追加分 ★2026-08-23

   「差し色が弱い」への対処。金・砂色・明朝を使う場所を用意する。

   ============================================================ */



/* ------------------------------------------------------------

   セクションの地

   白一辺倒をやめる。3種を交互に置くとページにリズムが出る。

   ------------------------------------------------------------ */

.sj-section        { padding: var(--sj-space-9) 0; }

.sj-section--tint  { background: var(--sj-brand-50); }   /* 淡いブランド色 */

.sj-section--sand  { background: var(--sj-sand-50); }    /* 砂色。紙の質感 */

/* ベタ塗りは面積が大きいと重く見えるので、ごく浅い明暗を入れて平板さを消す。

   （design.md の「背景にグラデを敷かない」はPPTの話。Webの大面積では逆に効く） */

.sj-section--deep  {

  background: linear-gradient(165deg, var(--sj-deep-hi) 0%, var(--sj-deep) 62%, var(--sj-deep-lo) 100%);

  color: var(--sj-ink-inverse);

}



/* 深い地の上では、文字と線を反転させる */

.sj-section--deep .sj-h2,

.sj-section--deep .sj-h3,

.sj-section--deep .sj-h4,

.sj-section--deep .sj-sec-head__title,

.sj-section--deep .sj-display { color: var(--sj-ink-inverse); }

.sj-section--deep .sj-h2 { border-bottom-color: var(--sj-deco-face); }

.sj-section--deep .sj-sec-head__sub,

.sj-section--deep .sj-card__body { color: var(--sj-ink-200, var(--sj-line)); }

.sj-section--deep .sj-sec-head__num { color: var(--sj-deco-face); }

.sj-section--deep .sj-card {

  background: var(--sj-deep-soft);

  border-color: rgba(255, 255, 255, .14);

  color: var(--sj-ink-inverse);

}

.sj-section--deep .sj-link { color: var(--sj-deco-face); }



/* ★2026-08-23：濃い地の上の申込ボタンは「白地＋ブランド色の文字」にする。

   理由＝濃紺の上では、どんな色より白が際立つ。

   特に AI伴走士は主色（青208°）とボタン（ティール189°）の色相差が19°しかなく、

   同系色でまとまって沈んで見えていた。白なら色相の問題自体が消える。

   白地に濃い文字は、暗い背景で使われる定番の形でもある。 */

.sj-section--deep .sj-btn--primary,

.sj-hero--deep .sj-btn--primary {

  background: var(--sj-btn-on-deep);

  color: var(--sj-btn-on-deep-ink);

  box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 6px 18px rgba(0, 0, 0, .28);

}

.sj-section--deep .sj-btn--primary:hover,

.sj-hero--deep .sj-btn--primary:hover {

  background: var(--sj-btn-on-deep-hover, var(--sj-sand-25));

  box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .32);

}



/* ★2026-08-23 重要：濃い地のセクションの中に「淡い面」を置くと、

   親から継承した白文字がそのまま乗って**読めなくなる**。

   面ごとに文字色を戻す。これを忘れると文字が消えたように見える。

   （.sj-card と .sj-price は濃い地に合わせて面自体を暗くしてあるので対象外） */

.sj-section--deep .sj-cta,

.sj-section--deep .sj-cta-lite,

.sj-section--deep .sj-form,

.sj-section--deep .sj-gold-panel,

.sj-section--deep .sj-alert-box,

.sj-section--deep .sj-quote,

.sj-section--deep .sj-table,

.sj-hero--deep .sj-cta,

.sj-hero--deep .sj-cta-lite,

.sj-hero--deep .sj-form,

.sj-hero--deep .sj-gold-panel,

.sj-hero--deep .sj-alert-box,

.sj-hero--deep .sj-quote,

.sj-hero--deep .sj-table {

  color: var(--sj-ink);

}



/* ★2026-08-27：上のリストは「文字色を戻す」だけだった。

   面を持つ部品（CTA・フォーム・金パネル・警告）はそれで足りるが、

   表と引用は背景が透明なので、濃紺の上に濃い墨が乗って 1.01 になっていた。

   面を持たない部品には、面も与える。 */

.sj-section--deep .sj-table,

.sj-hero--deep .sj-table,

.sj-section--deep .sj-quote,

.sj-hero--deep .sj-quote {

  background: var(--sj-surface);

  border-radius: var(--sj-radius-md);

}

.sj-section--deep .sj-quote,

.sj-hero--deep .sj-quote {

  padding: var(--sj-space-5);

}



/* 表の見出し行だけは濃紺地＋白文字のままにする */

.sj-section--deep .sj-table thead th,

.sj-hero--deep .sj-table thead th { color: var(--sj-ink-inverse); }



/* ------------------------------------------------------------

   明朝の大見出し（格を出したいLPのキャッチ）

   本文には使わない。見出し・キャッチだけ。

   ------------------------------------------------------------ */

.sj-display {

  font-family: var(--sj-font-serif);

  font-size: var(--sj-fs-4xl);

  line-height: var(--sj-lh-tight);

  letter-spacing: var(--sj-ls-tight);

  font-weight: 700;

  color: var(--sj-brand-800);

  margin: 0 0 var(--sj-space-5);

  text-wrap: balance;

}

.sj-display--sm { font-size: var(--sj-fs-3xl); }



/* 見出しを明朝にしたいときは .sj-serif を足す（h2/h3/セクション見出しに併用可） */

.sj-serif { font-family: var(--sj-font-serif); }



/* ------------------------------------------------------------

   小見出しラベル（英字・ゴールド）

   セクションの上に置く小さな見出し。番号でなく分類を示す。

   ------------------------------------------------------------ */

.sj-eyebrow {

  display: inline-block;

  /* 金の文字は細く見えるので、注記サイズではなく補足サイズを使う */

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  letter-spacing: var(--sj-ls-wide);

  color: var(--sj-deco-ink);

  margin: 0 0 var(--sj-space-3);

}

.sj-section--deep .sj-eyebrow { color: var(--sj-deco-face); }



/* ------------------------------------------------------------

   バッジ（限定・特典・格を示す小さなラベル）

   ------------------------------------------------------------ */

.sj-badge {

  display: inline-block;

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  line-height: 1.6;

  padding: var(--sj-space-1) var(--sj-space-4);

  border-radius: var(--sj-radius-pill);

  background: var(--sj-deco-face);

  color: var(--sj-deep);           /* 金の上は濃紺文字（8.13 / AAA） */

}

.sj-badge--outline {

  background: transparent;

  color: var(--sj-deco-ink);

  border: 1px solid var(--sj-deco-ink);

}

.sj-section--deep .sj-badge--outline { color: var(--sj-deco-face); border-color: var(--sj-deco-face); }

.sj-badge--brand { background: var(--sj-brand-800); color: var(--sj-ink-inverse); }



/* ------------------------------------------------------------

   区切り線（金の細い線。セクションの締めに1本だけ）

   ------------------------------------------------------------ */

.sj-divider {

  border: 0;

  height: 1px;

  background: var(--sj-deco-ink);

  width: 56px;

  margin: var(--sj-space-5) 0;

}

.sj-divider--center { margin-inline: auto; }



/* ------------------------------------------------------------

   価格の見せ方

   「通常◯◯円 → 0円」のように、取り消し線と結果を並べる。

   ------------------------------------------------------------ */

.sj-price {

  border: 1px solid var(--sj-deco-ink);

  border-radius: var(--sj-radius-md);

  padding: var(--sj-space-6);

  text-align: center;

  background: var(--sj-surface);

}

.sj-section--deep .sj-price { background: var(--sj-deep-soft); }

.sj-price__label { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin: 0 0 var(--sj-space-2); }

.sj-section--deep .sj-price__label { color: var(--sj-ink-200, var(--sj-line)); }

.sj-price__was {

  font-size: var(--sj-fs-lg);

  color: var(--sj-ink-muted);

  text-decoration: line-through;

  margin: 0 0 var(--sj-space-2);

}

.sj-price__now {

  font-size: var(--sj-fs-4xl);

  font-weight: 700;

  line-height: var(--sj-lh-tight);

  color: var(--sj-deco-ink);

  font-variant-numeric: tabular-nums;

  margin: 0;

}

.sj-section--deep .sj-price__now { color: var(--sj-deco-face); }

.sj-price__unit { font-size: var(--sj-fs-xl); margin-left: 2px; }

.sj-price__note { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin: var(--sj-space-3) 0 0; line-height: 1.7; }

.sj-section--deep .sj-price__note { color: var(--sj-ink-200, var(--sj-line)); }



/* ------------------------------------------------------------

   金の面（実績・権威を1点だけ見せたいとき）

   多用しない。1ページに1〜2回まで。

   ------------------------------------------------------------ */

.sj-gold-panel {

  background: var(--sj-deco-pale);

  border-left: 4px solid var(--sj-deco-ink);

  border-radius: 0 var(--sj-radius-sm) var(--sj-radius-sm) 0;

  padding: var(--sj-space-5) var(--sj-space-6);

  margin: var(--sj-space-6) 0;

}

.sj-gold-panel__title {

  font-size: var(--sj-fs-lg);

  font-weight: 700;

  color: var(--sj-deco-ink);

  margin: 0 0 var(--sj-space-2);

}

.sj-gold-panel__body { margin: 0; font-size: var(--sj-fs-md); }



/* ============================================================

   ファーストビュー ★2026-08-23 新設

   ------------------------------------------------------------

   LPで申込率を最も左右する場所。実測した2本（Web集客セミナー／AI業務自動化診断）

   を分解すると、どちらも同じ順番で組まれていた：



     ① 誰向けか（eyebrow）

     ② キャッチ（title）… 問題提起 か ベネフィット

     ③ 補足1〜2文（lead）

     ④ 信じられる根拠（proof）… 実績・肩書・受賞

     ⑤ CTA

     ⑥ 障壁を下げる情報（facts）… 無料・所要時間・顔出し不要



   ★スマホでは必ずCTAをこの画面に入れる。

     流入は実測でスマホ7〜9割。申込フォームは1画面に入らないので、

     ファーストビューにはボタンを置き、フォームは下のセクションに置く。

   ============================================================ */

.sj-hero { padding: var(--sj-space-9) 0; }

.sj-hero--deep {

  background: linear-gradient(165deg, var(--sj-deep-hi) 0%, var(--sj-deep) 62%, var(--sj-deep-lo) 100%);

  color: var(--sj-ink-inverse);

}

.sj-hero--sand { background: var(--sj-section-alt); }



.sj-hero__inner { display: grid; gap: var(--sj-space-7); align-items: start; }

.sj-hero--split .sj-hero__inner { grid-template-columns: 1.1fr .9fr; }



.sj-hero__eyebrow {

  display: inline-block;

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  padding: var(--sj-space-1) var(--sj-space-4);

  border-radius: var(--sj-radius-pill);

  border: 1px solid currentColor;

  margin: 0 0 var(--sj-space-5);

  opacity: .9;

}

.sj-hero__title {

  font-family: var(--sj-font-heading);

  font-size: var(--sj-fs-4xl);

  line-height: var(--sj-lh-tight);

  letter-spacing: var(--sj-ls-tight);

  font-weight: 700;

  margin: 0 0 var(--sj-space-5);

  text-wrap: balance;

}

.sj-hero--deep .sj-hero__title { color: var(--sj-ink-inverse); }

.sj-hero__title--serif { font-family: var(--sj-font-serif); }

.sj-hero__lead {

  font-size: var(--sj-fs-lg);

  line-height: var(--sj-lh-body);

  margin: 0 0 var(--sj-space-6);

  max-width: 40em;

}

.sj-hero--deep .sj-hero__lead { color: var(--sj-ink-200); }



/* 信じられる根拠。数字・受賞・肩書を短く並べる。盛らない（3つまで） */

.sj-hero__proof {

  display: flex;

  flex-wrap: wrap;

  gap: var(--sj-space-2);

  margin: 0 0 var(--sj-space-6);

  padding: 0;

  list-style: none;

}

/* 実績バッジ＝金の細枠。塗りつぶさない。

   ★2026-08-24：エクスウィルはCTAも金（#e0b458）なので、

   ここを金で塗ると申込ボタンと同じ色の面が2つ並び、どちらが主役か分からなくなる。

   ファーストビューで「塗りつぶす面」は申込ボタンだけにする。

   金は枠線と文字で残すので、格は落ちない。 */

.sj-hero__proof li {

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  padding: var(--sj-space-1) var(--sj-space-4);

  border-radius: var(--sj-radius-sm);

  background: transparent;

  border: 1px solid var(--sj-deco-line);

  color: var(--sj-deco-ink);

}

/* 濃い地の上では、暗い金は沈むので明るい金に切り替える */

.sj-hero--deep .sj-hero__proof li,

.lp-hero--deep .sj-hero__proof li {

  border-color: var(--sj-deco-face);

  color: var(--sj-deco-face);

}



.sj-hero__cta { margin: 0 0 var(--sj-space-5); }

.sj-hero__cta-note {

  font-size: var(--sj-fs-sm);

  margin: var(--sj-space-3) 0 0;

  opacity: .85;

}



/* 障壁を下げる情報。「無料」「顔出し不要」など、断る理由を先に潰す */

.sj-hero__facts {

  display: flex;

  flex-wrap: wrap;

  gap: var(--sj-space-5);

  margin: 0;

  padding: 0;

  list-style: none;

  font-size: var(--sj-fs-sm);

}

.sj-hero__facts li {

  border-left: 2px solid var(--sj-deco-face);

  padding-left: var(--sj-space-3);

  line-height: 1.6;

}

.sj-hero--deep .sj-hero__facts li { color: var(--sj-ink-200); }



/* 右側（価格・画像など）。フォームはここに置かない＝スマホで下に落ちるため */

.sj-hero__aside { min-width: 0; }



@media (max-width: 860px) {

  .sj-hero--split .sj-hero__inner { grid-template-columns: 1fr; }

  .sj-hero__facts { gap: var(--sj-space-4); }

}



/* ------------------------------------------------------------

   スマホの下部固定CTA ★2026-08-23

   ------------------------------------------------------------

   セミナーLPの流入は実測でスマホ7〜9割（GA4・直近30日）。

   スマホではヒーローの申込フォームが1画面に収まらないため、

   スクロール中どこにいても押せるボタンを下端に固定する。

   実際に最も流入のある web_syukyaku_121a が同じ作りになっている（実測から採用）。



   PCでは邪魔なので隠す。iPhoneのホームバーに被らないよう safe-area を見る。

   ------------------------------------------------------------ */

.sj-sticky-cta {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 40;

  background: rgba(255, 255, 255, .96);

  backdrop-filter: blur(6px);

  border-top: 1px solid var(--sj-line);

  box-shadow: 0 -2px 12px rgba(15, 35, 64, .10);

  padding: var(--sj-space-3) var(--sj-space-4);

  padding-bottom: calc(var(--sj-space-3) + env(safe-area-inset-bottom, 0px));

}

.sj-sticky-cta .sj-btn { display: block; width: 100%; box-sizing: border-box; }

.sj-sticky-cta__note {

  font-size: var(--sj-fs-sm);

  color: var(--sj-ink-muted);

  text-align: center;

  margin: var(--sj-space-2) 0 0;

}

/* 固定バーの高さぶん、ページ末尾に余白を作る（フッターが隠れないように）。

   実測でバーは note ありで約106px。余白が足りないと末尾が隠れるので余裕を持たせる。 */

.sj-root:has(.sj-sticky-cta) { padding-bottom: 120px; }



@media (min-width: 861px) {

  .sj-sticky-cta { display: none; }

  .sj-root:has(.sj-sticky-cta) { padding-bottom: 0; }

}



/* ------------------------------------------------------------

   開催日程 ★2026-08-23 新設

   ------------------------------------------------------------

   セミナーLPで最も見られる情報の一つ。「いつやるのか」が分からないと

   申し込めない。志師塾には日程を近い順6件に自動更新する仕組みが既にあるので、

   その出力先としてこの部品を使う。



   ★残席の状態は色だけで伝えない。「残りわずか」「満席」と文字で書く

     （主要読者は50代・男性6割。色覚特性のある方が実数として含まれる）。

   ------------------------------------------------------------ */

.sj-schedule { display: grid; gap: var(--sj-space-3); margin: var(--sj-space-6) 0; }

.sj-schedule__item {

  display: grid;

  grid-template-columns: 1fr auto;

  gap: var(--sj-space-4);

  align-items: center;

  border: 1px solid var(--sj-line);

  border-radius: var(--sj-radius-md);

  padding: var(--sj-space-4) var(--sj-space-5);

  background: var(--sj-surface);

}

.sj-schedule__item--closed { opacity: .6; }

.sj-schedule__main { min-width: 0; }

.sj-schedule__date {

  font-size: var(--sj-fs-lg);

  font-weight: 700;

  line-height: var(--sj-lh-heading);

  color: var(--sj-brand-800);

}

.sj-schedule__time { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin-top: var(--sj-space-1); }

.sj-schedule__note { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin-top: var(--sj-space-1); }

.sj-schedule__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sj-space-2); }

.sj-schedule__status {

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  padding: var(--sj-space-1) var(--sj-space-3);

  border-radius: var(--sj-radius-sm);

  white-space: nowrap;

}

.sj-schedule__status--open   { background: var(--sj-brand-100); color: var(--sj-brand-900); }

.sj-schedule__status--few    { background: var(--sj-alert-pale); color: var(--sj-alert-ink); }

.sj-schedule__status--closed { background: var(--sj-surface-gray); color: var(--sj-ink-muted); }



@media (max-width: 560px) {

  .sj-schedule__item { grid-template-columns: 1fr; }

  .sj-schedule__side { align-items: stretch; }

  .sj-schedule__side .sj-btn { display: block; text-align: center; }

}



/* ------------------------------------------------------------

   画像 ★2026-08-23 新設

   ------------------------------------------------------------

   width / height を必ず指定させるための部品。

   指定がないと、読み込みが終わった瞬間に下の要素が押し下げられ、

   **押そうとしたボタンが動く**（Core Web Vitals の CLS）。SEO評価にも響く。

   ------------------------------------------------------------ */

.sj-figure { margin: var(--sj-space-6) 0; }

.sj-figure img {

  display: block;

  width: 100%;

  height: auto;

  border-radius: var(--sj-radius-md);

  background: var(--sj-surface-gray); /* 読み込み中の面。真っ白でチラつかせない */

}

.sj-figure__caption {

  font-size: var(--sj-fs-sm);

  color: var(--sj-ink-muted);

  line-height: 1.7;

  margin: var(--sj-space-3) 0 0;

}



/* ============================================================

   テーマが性格を決める部分 ★2026-08-23

   ------------------------------------------------------------

   3ブランドの違いを「主色の濃さ」だけにしないための仕掛け。

   ここを差し替えると、同じ部品でも受ける印象が変わる。

   ============================================================ */



/* 見出しの書体（sans＝実務的・平明／serif＝格式・重厚） */

.sj-h2,

.sj-h3,

.sj-h4,

.sj-sec-head__title,

.sj-card__title,

.sj-cta__title,

.sj-form__title,

.sj-gold-panel__title { font-family: var(--sj-font-heading); }



/* セクションの2色目の地（淡い青＝軽い／砂色＝重く上質） */

.sj-section--tint { background: var(--sj-section-alt); }



/* ------------------------------------------------------------

   サイト用の部品（HP向け）★2026-09-02 追加

   LPは1ページで完結するが、HPは複数ページを行き来する。

   そのための「全ページ共通の枠」＝ヘッダーとフッター。



   ★JavaScriptを使わない。開閉はチェックボックスと <details> で作る。

     理由＝UTAGE等のページビルダーに貼るとき、JSが動く保証がないため。

   ------------------------------------------------------------ */



/* ===== サイトヘッダー ===== */

.sj-site-header {

  position: sticky;

  top: 0;

  z-index: 40;

  background: var(--sj-surface);

  border-bottom: 1px solid var(--sj-line);

}

.sj-site-header__inner {

  display: flex;

  align-items: center;

  gap: var(--sj-space-5);

  min-height: 64px;

}

.sj-site-header__brand {

  display: flex;

  align-items: baseline;

  gap: var(--sj-space-3);

  text-decoration: none;

  flex-shrink: 0;

}

.sj-site-header__name {

  font-family: var(--sj-font-heading);

  font-size: var(--sj-fs-lg);

  font-weight: 700;

  color: var(--sj-brand-900);

  letter-spacing: .02em;

  white-space: nowrap;

}

.sj-site-header__tag {

  font-size: var(--sj-fs-sm);

  color: var(--sj-ink-muted);

  white-space: nowrap;

}



/* ナビ本体 */

.sj-site-nav {

  display: flex;

  align-items: center;

  gap: var(--sj-space-5);

  margin-left: auto;

}

.sj-site-nav__list {

  display: flex;

  align-items: center;

  gap: var(--sj-space-5);

  margin: 0;

  padding: 0;

  list-style: none;

}

.sj-site-nav__link {

  display: inline-block;

  padding-block: var(--sj-space-2);

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  color: var(--sj-ink);

  text-decoration: none;

  border-bottom: 2px solid transparent;

}

.sj-site-nav__link:hover { color: var(--sj-brand-800); border-bottom-color: var(--sj-brand-800); }

/* 現在地。読み上げにも伝わるよう aria-current を持たせる前提 */

.sj-site-nav__link[aria-current="page"] {

  color: var(--sj-brand-800);

  border-bottom-color: var(--sj-brand-800);

}



/* 開閉ボタン（スマホ）。チェックボックスで状態を持つのでJSが要らない */

.sj-site-header__toggle { display: none; }

.sj-site-header__burger {

  display: none;

  width: 44px; height: 44px;      /* 指で押せる下限 */

  flex: 0 0 44px;                 /* flexアイテムとして潰れないよう固定（無いと17pxまで縮む） */

  box-sizing: border-box;

  margin-left: auto;

  border: 1px solid var(--sj-line-input);

  border-radius: var(--sj-radius-sm);

  background: var(--sj-surface);

  cursor: pointer;

  position: relative;

}

.sj-site-header__burger::before,

.sj-site-header__burger::after,

.sj-site-header__burger span {

  content: "";

  position: absolute;

  left: 12px; right: 12px;

  height: 2px;

  background: var(--sj-ink);

  transition: transform var(--sj-transition), opacity var(--sj-transition);

}

.sj-site-header__burger::before { top: 14px; }

.sj-site-header__burger span    { top: 21px; }

.sj-site-header__burger::after  { top: 28px; }



@media (max-width: 900px) {

  .sj-site-header__burger { display: block; }

  .sj-site-nav {

    position: fixed;

    inset: 64px 0 auto 0;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    margin-left: 0;

    padding: var(--sj-space-4) var(--sj-space-5) var(--sj-space-6);

    background: var(--sj-surface);

    border-bottom: 1px solid var(--sj-line);

    box-shadow: var(--sj-shadow-lifted);

    max-height: calc(100dvh - 64px);

    overflow-y: auto;

    /* 閉じているとき。display:none にせず高さで畳むと、読み上げの順序が保てる */

    visibility: hidden;

    opacity: 0;

    transform: translateY(-8px);

    transition: opacity var(--sj-transition), transform var(--sj-transition), visibility var(--sj-transition);

  }

  .sj-site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  /* リンクは行いっぱいに広げる。inline-block のままだと文字幅で止まり、

     現在地の地色や左線が途中で切れて見える。 */

  .sj-site-nav__list li { display: block; }

  .sj-site-nav__link {

    display: block;

    padding: var(--sj-space-4) 0;

    border-bottom: 1px solid var(--sj-line);

    border-left: 3px solid transparent;

    padding-left: var(--sj-space-3);

  }

  .sj-site-nav__link:hover,

  .sj-site-nav__link[aria-current="page"] {

    border-bottom-color: var(--sj-line);

    border-left-color: var(--sj-brand-800);

    background: var(--sj-brand-50);

  }

  .sj-site-nav .sj-btn { margin-top: var(--sj-space-4); }



  /* チェックが入ったら開く */

  .sj-site-header__toggle:checked ~ .sj-site-header__inner .sj-site-nav {

    visibility: visible;

    opacity: 1;

    transform: none;

  }

  .sj-site-header__toggle:checked ~ .sj-site-header__inner .sj-site-header__burger::before {

    transform: translateY(7px) rotate(45deg);

  }

  .sj-site-header__toggle:checked ~ .sj-site-header__inner .sj-site-header__burger span { opacity: 0; }

  .sj-site-header__toggle:checked ~ .sj-site-header__inner .sj-site-header__burger::after {

    transform: translateY(-7px) rotate(-45deg);

  }

}



/* キーボードで開閉ボタンに来たとき、見えるようにする */

.sj-site-header__toggle:focus-visible ~ .sj-site-header__inner .sj-site-header__burger {

  outline: 3px solid var(--sj-brand-600);   /* base.css の :focus-visible と同じ書き方にそろえる */

  outline-offset: 2px;

}



/* ===== サイトフッター ===== */

.sj-site-footer {

  background: var(--sj-deep);

  color: var(--sj-ink-200);

  padding-block: var(--sj-space-8) var(--sj-space-6);

  font-size: var(--sj-fs-sm);

}

.sj-site-footer__cols {

  display: grid;

  grid-template-columns: minmax(220px, 1fr) 2fr;

  gap: var(--sj-space-7);

  padding-bottom: var(--sj-space-6);

  border-bottom: 1px solid rgba(255, 255, 255, .16);

}

.sj-site-footer__brand {

  font-family: var(--sj-font-heading);

  font-size: var(--sj-fs-lg);

  font-weight: 700;

  color: var(--sj-ink-inverse);

  margin: 0 0 var(--sj-space-3);

}

.sj-site-footer__about { margin: 0; line-height: var(--sj-lh-body); }



/* サイトマップ。列数は中身に合わせて自動で増える */

.sj-site-footer__map {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  gap: var(--sj-space-6);

}

.sj-site-footer__group-title {

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  color: var(--sj-ink-inverse);

  margin: 0 0 var(--sj-space-3);

  padding-bottom: var(--sj-space-2);

  border-bottom: 1px solid rgba(255, 255, 255, .16);

}

.sj-site-footer__links { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sj-space-2); }

.sj-site-footer a { color: var(--sj-ink-200); text-decoration: none; }

.sj-site-footer a:hover { color: var(--sj-ink-inverse); text-decoration: underline; text-underline-offset: 3px; }



.sj-site-footer__bottom {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--sj-space-4) var(--sj-space-5);

  padding-top: var(--sj-space-5);

}

.sj-site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sj-space-4); margin: 0; padding: 0; list-style: none; }

.sj-site-footer__copyright { margin: 0 0 0 auto; opacity: .8; }



@media (max-width: 760px) {

  .sj-site-footer__cols { grid-template-columns: 1fr; gap: var(--sj-space-6); }

  .sj-site-footer__copyright { margin-left: 0; }

}



/* ===== パンくず ===== */

.sj-breadcrumb {

  padding-block: var(--sj-space-3);

  font-size: var(--sj-fs-sm);

  color: var(--sj-ink-muted);

}

.sj-breadcrumb__list {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--sj-space-2);

  margin: 0; padding: 0; list-style: none;

}

.sj-breadcrumb__item { display: flex; align-items: center; gap: var(--sj-space-2); }

.sj-breadcrumb__item + .sj-breadcrumb__item::before {

  content: "›";

  color: var(--sj-ink-muted);

  opacity: .6;

}

.sj-breadcrumb a { color: var(--sj-brand-900); text-decoration: none; }

.sj-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sj-breadcrumb__current { color: var(--sj-ink-muted); }



/* ------------------------------------------------------------

   サイト用の部品（その2）★2026-09-02 追加

   記事カード一覧 ／ FAQ（開閉） ／ 問い合わせフォーム



   ★ここもJavaScriptを使わない。開閉は <details>/<summary> で作る。

   ------------------------------------------------------------ */



/* ===== 記事カード一覧 ===== */

.sj-posts {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: var(--sj-space-5);

}

.sj-post {

  display: flex;

  flex-direction: column;

  background: var(--sj-surface);

  border: 1px solid var(--sj-line);

  border-radius: var(--sj-radius-md);

  overflow: hidden;

  text-decoration: none;

  color: inherit;

  box-shadow: var(--sj-shadow);

  transition: box-shadow var(--sj-transition), transform var(--sj-transition);

}

.sj-post:hover { box-shadow: var(--sj-shadow-lifted); transform: translateY(-2px); }

.sj-post:hover .sj-post__title { color: var(--sj-brand-800); }



/* 画像の枠。比率を固定して、読み込み前後で行がずれないようにする */

.sj-post__thumb {

  aspect-ratio: 16 / 9;

  background: var(--sj-surface-gray);

  overflow: hidden;

}

.sj-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }



.sj-post__body { padding: var(--sj-space-5); display: flex; flex-direction: column; gap: var(--sj-space-3); flex: 1; }

.sj-post__meta { display: flex; align-items: center; gap: var(--sj-space-3); font-size: var(--sj-fs-sm); }

.sj-post__cat {

  font-weight: 700;

  color: var(--sj-brand-900);

  background: var(--sj-brand-100);

  padding: 2px var(--sj-space-3);

  border-radius: var(--sj-radius-sm);

}

.sj-post__date { color: var(--sj-ink-muted); font-variant-numeric: tabular-nums; }

.sj-post__title {

  font-family: var(--sj-font-heading);

  font-size: var(--sj-fs-lg);

  font-weight: 700;

  line-height: var(--sj-lh-heading);

  color: var(--sj-ink);

  margin: 0;

  text-wrap: pretty;

}

.sj-post__excerpt { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin: 0; }

/* 「続きを読む」は下端にそろえる（カードの高さが違っても位置が揃う） */

.sj-post__more {

  margin-top: auto;

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  color: var(--sj-brand-900);

}

.sj-post__more::after { content: "›"; margin-left: .4em; }



/* ===== FAQ（開閉） =====

   <details>/<summary> で作る＝JavaScriptなしで開閉し、

   ブラウザの検索（Ctrl+F）でも閉じた中身が見つかる。 */

.sj-faq { display: grid; gap: var(--sj-space-3); }

.sj-faq__item {

  background: var(--sj-surface);

  border: 1px solid var(--sj-line);

  border-radius: var(--sj-radius-md);

  overflow: hidden;

}

.sj-faq__q {

  display: flex;

  align-items: flex-start;

  gap: var(--sj-space-4);

  padding: var(--sj-space-4) var(--sj-space-5);

  font-weight: 700;

  line-height: var(--sj-lh-body);

  cursor: pointer;

  list-style: none;            /* 既定の三角を消す */

  min-height: 44px;            /* 指で押せる下限 */

  box-sizing: border-box;

}

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

.sj-faq__q:hover { background: var(--sj-surface-subtle); }

/* Qの印 */

.sj-faq__q::before {

  content: "Q";

  flex-shrink: 0;

  width: 24px; height: 24px;

  display: grid; place-items: center;

  border-radius: 50%;

  background: var(--sj-brand-900);

  color: var(--sj-ink-inverse);

  font-size: var(--sj-fs-sm);

  line-height: 1;

}

/* 開閉の印。開くと回る */

.sj-faq__q::after {

  content: "";

  flex-shrink: 0;

  width: 10px; height: 10px;

  margin-left: auto;

  margin-top: 6px;

  border-right: 2px solid var(--sj-ink-muted);

  border-bottom: 2px solid var(--sj-ink-muted);

  transform: rotate(45deg);

  transition: transform var(--sj-transition);

}

.sj-faq__item[open] > .sj-faq__q::after { transform: rotate(-135deg); margin-top: 10px; }

.sj-faq__item[open] > .sj-faq__q { background: var(--sj-surface-subtle); }



.sj-faq__a {

  display: flex;

  align-items: flex-start;

  gap: var(--sj-space-4);

  padding: var(--sj-space-4) var(--sj-space-5) var(--sj-space-5);

  border-top: 1px solid var(--sj-line);

  line-height: var(--sj-lh-body);

}

.sj-faq__a::before {

  content: "A";

  flex-shrink: 0;

  width: 24px; height: 24px;

  display: grid; place-items: center;

  border-radius: 50%;

  background: var(--sj-deco-face);

  color: var(--sj-deep);

  font-size: var(--sj-fs-sm);

  font-weight: 700;

  line-height: 1;

}

.sj-faq__a > * { margin: 0; }

.sj-faq__a > * + * { margin-top: var(--sj-space-3); }



/* 動きを減らす設定の人には、回転もアニメも出さない */

@media (prefers-reduced-motion: reduce) {

  .sj-faq__q::after { transition: none; }

}



/* ===== 問い合わせフォーム =====

   申込用の .sj-form とは項目が違う（会社名・電話・種別・本文）。

   横並びにできる欄を2列にして、縦を短くする。 */

.sj-contact {

  background: var(--sj-surface);

  border: 1px solid var(--sj-line);

  border-radius: var(--sj-radius-md);

  padding: var(--sj-space-6);

  box-shadow: var(--sj-shadow);

}

.sj-contact__head { margin-bottom: var(--sj-space-5); }

.sj-contact__title {

  font-family: var(--sj-font-heading);

  font-size: var(--sj-fs-xl);

  font-weight: 700;

  color: var(--sj-brand-800);

  margin: 0 0 var(--sj-space-2);

}

.sj-contact__sub { font-size: var(--sj-fs-sm); color: var(--sj-ink-muted); margin: 0; }



.sj-contact__row {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: var(--sj-space-4);

}

.sj-contact .sj-field { margin-bottom: var(--sj-space-4); }

.sj-contact__note {

  font-size: var(--sj-fs-sm);

  color: var(--sj-ink-muted);

  line-height: var(--sj-lh-body);

  margin: var(--sj-space-4) 0 0;

  padding-top: var(--sj-space-4);

  border-top: 1px solid var(--sj-line);

}

@media (max-width: 640px) {

  .sj-contact { padding: var(--sj-space-5); }

  .sj-contact__row { grid-template-columns: 1fr; gap: 0; }

}

/* ===== themes\shishijuku.css ===== */
/* ============================================================

   テーマ：志師塾  ── 印象3語＝信頼・実務的・志

   ------------------------------------------------------------

   先生業のためのビジネススクール。受講を検討している個人が読む。

   性格＝「まじめで頼れる学校」。飾らず、はっきり、読みやすく。



   【他ブランドとの差の付け方】

   - 書体：見出しもゴシック（明朝は使わない）＝実務的・平明

   - 角丸：5px（標準）＝硬すぎず柔らかすぎず

   - 地の2色目：淡いネイビー＝清潔・軽い

   - アクセント：朱（オレンジ）＝行動を促す暖色。3ブランドで唯一の暖色系

   - 金は実績・特典のラベル（Badge / Hero の proof）に限って使う。CTAや面には広げない

     ＝格を前面に出さず、実務で信頼を得るブランドのため

   ============================================================ */



:root {

  /* ★2026-09-02：主色の色相を 219° → 240° に変更（B案）。

     PPTの #3333CC と同じ色相にそろえた。理由は3つ。

       ・3ブランドの主色が 9〜11° の中に固まっていて「同じ青」に見えていた

         （240°にすると AI伴走士と30°・エクスウィルと32°離れる）

       ・6段すべて240°でランプの色相ブレが 0° になる（旧219°系は11°ブレていた）

       ・PPT側と色相が一致し、媒体をまたいで説明が要らなくなる

     PPTの #3333CC そのものはWebでは明るすぎるので、色相だけ引き継いで

     明度はWebのコントラスト基準に合わせている（白地 900=17.34 / 800=15.03）。 */

  --sj-brand-900: #0a0a5c;

  --sj-brand-800: #0d0d82;

  --sj-brand-600: #2323b8;

  --sj-brand-400: #4d4db8;

  --sj-brand-100: #e6e6f7;

  --sj-brand-50:  #f5f5fc;



  /* 申込＝朱。白文字でコントラスト 4.61（AA合格）。

     ★2026-08-23：一度 #ff6b35＋濃紺文字（5.55）に変えたが、慣行から外れるため戻した。

     世の中のCTAは「濃い地＋白文字」が圧倒的多数で、利用者はその形を学習している。

     オレンジ地に濃い文字は工事標識・危険表示の配色でもあり、申込ボタンには不向き。

     また白文字で4.5を満たせる最も明るいオレンジは #c55329（4.52）＝これより

     明るくすると白文字は使えない。つまり「明るい朱＋白文字」は物理的に不可能。

     目立たせるのは色の明るさでなく、大きさ・立体感・周囲の余白で行う。 */

  --sj-action-700: #a83f10;

  --sj-action-600: #c94d15;

  --sj-action-500: #e45c1e;

  --sj-action-50:  #fff6ec;

  --sj-action-ink: #ffffff;



  /* 性格を決める3点 */

  --sj-font-heading: var(--sj-font-sans);  /* 見出しもゴシック */

  --sj-radius-sm: 5px;

  --sj-radius-md: 10px;

  --sj-section-alt: var(--sj-brand-50);    /* 2色目は淡い青 */

  /* 濃い地も主色と同じ240°に。216°のままだと見出し(240°)と24°ねじれて濁る。 */

  --sj-deep:           #0f0f40;

  --sj-deep-soft:      #1a1a50;

  --sj-deep-hi:        #16165a;

  --sj-deep-lo:        #0b0b32;

  --sj-line-input:     #5c6a7d;   /* 入力欄の枠。淡い青の地に合う、青みのグレー */

  --sj-focus-ring:     rgba(13, 13, 130, .16);   /* 新しい主色 #0d0d82 から */

}

/* ===== theme: aib（Claude Design 用。.theme-aib を外側に当てる） ===== */
/* ===== themes\aib.css ===== */
/* ============================================================

   テーマ：AI伴走士協会  ── 印象3語＝先進・伴走・洗練

   ------------------------------------------------------------

   一般社団法人AI伴走士協会。AIを商品にしたい先生業が読む。

   性格＝「軽やかで新しい」。重くせず、風通しよく。



   【他ブランドとの差の付け方】

   - 書体：見出しもゴシック（明朝は使わない）＝先進・現代的

   - 角丸：10px（3ブランドで最も丸い）＝やわらかく、とっつきやすい

   - 地の2色目：淡い青。白の分量を多くして軽さを出す

   - アクセント：**志師塾と同じ朱**。CTAはブランド表現の場ではなく行動させる装置なので、

     兄弟ブランド（読者が同じ）では揃えた方が「申込ボタンはこの色」という学習が働く

   - 金は実績ラベルだけ。砂色は使わない（重くなるため。格より新しさを取る）



   【申込ボタンを志師塾と同じ朱にした理由 ★2026-08-23 ゼロベースで再検討】

   design.md §2-2 は「オレンジ・黄・紫・紺は禁止色」と定めているが、これはPPTの規定で、

   Webの申込ボタンを想定したものではない。五十嵐さんの了解を得てWeb側は外して考える。



   主色が青（208°）なので、理論上の補色は28〜42°＝オレンジ〜琥珀。

   寒色で代替できないかを数値で潰した：

     明るいターコイズ #0e8fa3 … 白文字 3.84（基準割れ）

     ティール       #0d7a8c … 5.02 だが主色と色相差19°で沈む

     深緑           #15662b … 7.08 だが暗くてくすむ

   → 明るい寒色は白文字が使えず、濃い寒色は沈む。寒色では原理的に解決しない。



   そのうえで、志師塾と別の暖色にするのではなく**同じ朱**にした。

   志師塾とAI伴走士は読者がほぼ同じ（先生業・50代男性6割）で、

   AI伴走士LPは志師塾のドメイン配下にある＝同じ人が両方を見る。

   その状況で申込ボタンの色を変える理由がない。むしろ揃えると

   「志師塾グループの申込ボタンはこの色」という学習が働く。

   ブランドの違いは書体・角丸・地・主色で出ている。

   ============================================================ */



.theme-aib {

  /* ブランド色＝青（design.md §2-2 の確定色。淡色も design.md 実測値） */

  --sj-brand-900: #1b5c94;

  /* ★2026-08-27 #3181cd から。白地 4.08 で、表のセル・副次ボタン・枠線ボタンなど

     小さい文字にも使われる色なのに 4.5 を満たしていなかった（全部品検査で発覚）。

     #2264a5 なら白地 6.02・淡い青の地 4.99 で、どちらも余裕がある。 */

  --sj-brand-800: #2264a5;

  --sj-brand-600: #4a94d6;

  --sj-brand-400: #7fb3e0;

  --sj-brand-100: #cddcea;

  --sj-brand-50:  #e3ebf2;



  /* 申込＝緑。PPTテンプレでいちばん多く使われている差し色 #2E9E5B に合わせる。

     ただし #2E9E5B そのままだと白文字が 3.41 で読めないので、

     色相(144°)を保ったまま濃くして 4.92 を確保した。見た目の印象は変わらない。

     ★2026-09-01：赤橙から戻した。赤橙は原本のどこにも無い色だった。 */

  --sj-action-700: #1d6b3c;

  --sj-action-600: #26804a;

  --sj-action-500: #2e9e5b;   /* PPT原本の色そのもの。面・アイコン用 */

  --sj-action-50:  #eaf6ef;

  --sj-action-ink: #ffffff;



  /* 性格を決める3点 */

  --sj-font-heading: var(--sj-font-sans);  /* 見出しもゴシック */

  --sj-radius-sm: 12px;                    /* PPTの角丸（幅の16.7%）に寄せる。3ブランドで最も丸い */

  --sj-radius-md: 20px;

  --sj-section-alt: #f2f7f4;               /* 2色目は緑みの淡い地。PPTの #F5F7F6 系 */



  /* 線を薄くして軽さを出す */

  --sj-line: #dbe4ec;

  /* 装飾の差し色にミントを充てる（他テーマは金）。

     金は「格」を出す色でエクスウィルの署名色。AI伴走士は「軽さ」を担当させたいので

     パレットごと差し替える。値の上書きでなく、どのパレットを使うかの指定にしている。 */

  --sj-deco-ink:  var(--sj-mint-700);

  --sj-deco-line: var(--sj-mint-500);

  --sj-deco-face: var(--sj-mint-400);

  --sj-deco-pale: var(--sj-mint-100);

  /* 濃い地を主色と同じ色相(210°)にそろえる */

  --sj-deep:           #0f2740;

  --sj-deep-soft:      #1a3550;

  --sj-deep-hi:        #16385a;

  --sj-deep-lo:        #0b1e32;

  --sj-line-input:     #5c6a7d;   /* 入力欄の枠。志師塾と同じ。青系の地なので共通で足りる */

  --sj-focus-ring:     rgba(27, 92, 148, .16);

}

/* ===== theme: exwill（Claude Design 用。.theme-exwill を外側に当てる） ===== */
/* ===== themes\exwill.css ===== */
/* ============================================================

   テーマ：エクスウィルパートナーズ  ── 印象3語＝硬質・信頼（＋格）

   ------------------------------------------------------------

   法人向け。中小企業の経営者が読む。決裁する人が見る媒体。

   性格＝「重厚な法人」。軽さより落ち着き、親しみより格。



   【他ブランドとの差の付け方 ★ここが3ブランドで最も違う】

   - 書体：**見出しを明朝**にする（志師塾・AI伴走士はゴシック）＝格式

   - 角丸：**2px（ほぼ直角）**＝硬質。丸みは親しみを生むので、ここでは削る

   - 地の2色目：**砂色**（他2つは淡い青）＝紙の質感・重み

   - アクセント：**金をCTAにも使う**（他2つは実績ラベルのみ）＝格を前面に出す

   - 余白は広め（--sj-space-9 を積極的に使う）



   【新しい主色 #16456f の提案理由】

   1. 現行CI #20579D は中間明度の紺青。大きな面に敷くと役所的に見えやすく、

      経営者向けに求められる重厚さが出にくい。

   2. AI業務自動化診断LP（ug.exwill.jp/p/ai-shindan）は実際には CI を使わず

      #0f2340（ほぼ黒に近い紺）＋金＋ベージュで組まれていて、

      実測した4サイトの中で最も完成度が高かった。答えは実物に出ている。

   3. そこで CI と同じ紺青の系統を保ったまま明度を落とした #16456f を主色にする。

      白背景コントラスト 9.93（AAA）。金と並べても金が沈まない濃さ。



   ※PPT側（exwill_ppt_design）も追って揃える必要がある。

     Web だけ変えると媒体間でズレるため、承認後に PPT テンプレも更新する。

   ============================================================ */



.theme-exwill {

  /* ブランド色＝深い紺青 */

  --sj-brand-900: #0f2f4d;

  --sj-brand-800: #16456f;   /* ★新CI候補 */

  --sj-brand-600: #2a6ba3;

  --sj-brand-400: #6b9bc4;

  --sj-brand-100: #d9e5ef;

  --sj-brand-50:  #eef4f9;



  /* 申込＝金。文字は濃紺（金の上に白文字は全段でコントラスト不足） */

  --sj-action-700: #b8912f;

  --sj-action-600: #e0b458;

  --sj-action-500: #f0cb7d;

  --sj-action-50:  #fdf6e7;

  /* 紺の上でも金のボタンをそのまま使う。

     金は明るいので紺に沈まず、白ボタンより「エクスウィルらしさ」が残る。

     文字は濃紺のまま（金地に白文字は 1.9 で読めない）。 */

  --sj-btn-on-deep:       #e0b458;

  --sj-btn-on-deep-ink:   #10243d;

  --sj-btn-on-deep-hover: #eac36f;

  --sj-action-ink: #0f2340;

  /* 金の地は白地との差が 1.94 でボタンの輪郭が見えないので、濃い金の線を引く（4.03） */

  --sj-btn-edge:   #a5761d;



  /* 性格を決める3点 */

  --sj-font-heading: var(--sj-font-serif); /* ★見出しは明朝 */

  --sj-radius-sm: 2px;                     /* ★ほぼ直角＝硬質 */

  --sj-radius-md: 3px;

  --sj-section-alt: var(--sj-sand-50);     /* ★2色目は砂色 */



  /* 地そのものを少し暖色に寄せる（紙の質感） */

  --sj-surface-subtle: #f3efe8;

  --sj-surface-gray:   #efe9de;

  /* 警告の赤。共通の #e60012 は彩度が高く、濃紺・金・砂色という

     統一された色の中で1色だけ浮く、という指摘を受けてレンガに落とす。

     白文字で 6.71（共通色の 4.80 より読みやすい）。 */

  --sj-alert:     #a03a28;

  --sj-alert-ink:  #8c2b2b;

  /* 地も暖色に。共通の #fff0f0 は青みのピンクで、砂色の中で色相が浮く */

  --sj-alert-pale: #f9efe9;

  --sj-line:           #d8d2c6;

  --sj-line-strong:    #c4bcab;

  /* 濃い地を主色と同じ色相(208°)にそろえる */

  --sj-deep:           #0f2940;

  --sj-deep-soft:      #1a3750;

  --sj-deep-hi:        #163a5a;

  --sj-deep-lo:        #0b2032;

  --sj-line-input:     #7a7060;   /* 入力欄の枠。砂色の地に合う、暖色のグレー */

  --sj-focus-ring:     rgba(22, 69, 111, .16);

}