/* =====================================================================================
   J Claw Studio TOP — デザイン v6 の層（決裁 I-5・I-8〜I-10・2026-09-26 着手・提案中）
   v5（top-v5.css）＋ v4+／v5+ の層（top-plus.css）の上に重ねる。文字組みの規則は v5 のまま（新井さん「タイポの雰囲気はOK」）。
   変えるのはレイアウト:
     I-8  セクション見出しの型 … 冒頭で「何のセクションか」をピルで示し、下に大きな見出し
          （digitalgrid.com の [ エネルギー課題へのアプローチ ] Our Approach ／ jitter.video の pill tag）
     I-9  J Claw           … 声明を全幅 96px（1440 幅）に上げ、スクロールに合わせて単語ごとにはっきりさせる（js/top-v6.js）
     I-10 フッター          … 大きなロゴはそのまま。I-40 で Apple の型に（現在地のパンくず＋サイトマップどおりの 7 列のディレクトリ＋コピーと資料請求）
     I-12 J Claw の境界の図 … 本文と注記の語だけの線の図（境界の線は白 50%）、本文の強弱を入れ替え（他社の話を灰、J Claw の話を白のリード）
     I-13 承認ゲートの名前 … Pack の部品（ツアー 02）だけに残す。#uishowcase のピルは「特徴」（I-22。当初「プロダクト」）、ツアーと同じ小さな画面 3 枚は隠す
     I-14 ガラスとアウトライン … v6 で足した装飾をヘッダー（.gnav・.hd-box）と同じ作りに揃える（半透明の面・1px の輪郭・上端の光・影・角丸 8）
     I-21・I-25 J Claw の声明と結び … 冒頭は「JClaw — Make any AI action-safe.」（大）とその下の「自由に考えるAIを、安全に働くAIへ。」、
          最後の落としは「Intelligence can be probabilistic. Actions must be safe.」（HTML は v6 用の .v6-lead-wrap・.v6-end、元の .jc-state・.jc-tag は隠す）
     I-24 「特徴」をユースケースに … 特徴 3 つ × 業種 3 つ（J Claw のデモ）。写真は撮影するまで仮の枠。大きな画面・3 つの説明は v6 では出さない
     I-22・I-23 名前 … #uishowcase のピルは「特徴」、ホワイトペーパーの大きな見出しは「ホワイトペーパー」（ディレクター確認）
     I-26・I-27 J Claw の一文は「Make any AI action-safe.」、テキストスタイルは 11 段（display・h1〜h6・lead・body・small・caption。下の「テキストスタイル」）
     I-15〜I-20 色の役割 … 色は役割の名前（下の「色の役割」）で持つ。CV の赤 #d91200（I-16）・二番手の灰 #586174（I-17）・
          ブランドの赤は #FF1500（I-18）・グラデーションは 4 か所だけ（I-19）・ガラスの元色は #0d0d1a（I-20）
   切替は index.html の <link id="design-v6"> と ?design=v6（既定）。?design=v5plus で 1 つ前に戻る

   色の規則（決裁 I-15）
   1. 部品は役割の名前だけを使う。暗い面（下の一覧）では同じ名前の値が入れ替わる。部品が --d-* や旧トークンを直接使わない
   2. 直値（#…・rgba(…)）は :root の宣言の中だけに書く（build/_meta/check_colors.py が 0 件を確かめる）
   3. 文字は 3 段。--text-3 は白い面とパネルの上だけ（ガラスの面の上は 4.5 に届かないので --text-2）
   4. 赤は CV と「いまここ」の印（選んでいる手順・進捗・ホバーの縦線・フォーカス）だけ。24px 未満の赤い文字は --brand-text、
      白い文字をのせる赤い面は --brand-bg（どちらも明るい面で #d91200。#FF1500 は白い文字・白地で 3.92）
   5. グラデーションはロゴ・ヒーローの強調語・J Claw の声明・フッターの大きなロゴ（SVG）の 4 か所だけ
   ===================================================================================== */

/* ---------- I-15 色の役割（直値はここに書く） ---------- */
:root{
  /* 文字 */
  --text-1:#0f172a;                 /* 見出し・本文 */
  --text-2:#586174;                 /* リード・説明（I-17） */
  --text-3:#64748b;                 /* 注記・分類名・日付（白い面とパネルの上だけ） */
  --text-inverse:#fff;              /* 赤・黒の面にのせる文字 */
  /* 面と線 */
  --surface-0:#fff;                 /* 地 */
  --surface-1:#f8fafc;              /* パネル */
  --line:#e2e8f0;                   /* 区切りの線 */
  --line-strong:#cbd5e1;            /* 部品の輪郭 */
  /* ガラス（ヘッダーの .gnav・.hd-box と同じ作り。元色は #0d0d1a、I-20） */
  --fill:rgba(13,13,26,.04);
  --fill-hover:rgba(13,13,26,.07);
  --glass-line:rgba(13,13,26,.1);
  --glass-line-hover:rgba(13,13,26,.16);
  --glass-sh:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px rgba(13,13,26,.08);
  --glass-blur:blur(28px) saturate(165%);
  --raised:rgba(255,255,255,.7);    /* ガラスの上の白い部品（丸い矢印・タグ） */
  --raised-sh:0 1px 2px rgba(13,13,26,.08),0 0 0 1px rgba(13,13,26,.06);
  /* ブランド（I-16・I-18・I-19） */
  --brand:var(--g1);                /* #FF1500 印（文字以外） */
  --brand-bg:#d91200;               /* 白い文字をのせる赤い面（CV） */
  --brand-bg-hover:#b80f00;
  --on-brand:#fff;                  /* 赤い面（--brand-bg）の上の文字（I-43 フッターのパンくず） */
  --brand-text:var(--brand-bg);     /* 赤い文字（白い面の上。5.20） */
  --brand-text-strong:var(--brand-bg-hover);   /* ガラスなど白より暗い面の上の赤い文字（明るいヘッダーのガラスの上で 5.2。#d91200 は 4.0） */
  --brand-grad:var(--grad);         /* 4 か所だけ */
  --focus:var(--brand-text);        /* フォーカスの輪（白の上で 5.20） */
  --ok:#0a7d45;                     /* 準備済み・公開中 */
  --ok-line:rgba(10,125,69,.5);
  /* メガメニューの板（I-30。ヘッダーのガラスと同じ元色 #0d0d1a。暗いヘッダーの中では下の暗い面の値に入れ替わる） */
  --panel:rgba(255,255,255,.92);
  --panel-sh:0 24px 64px rgba(13,13,26,.14),0 0 0 1px rgba(13,13,26,.05);
  /* 写真の上のラベル（写真が地なので、明るいヘッダーでも暗いヘッダーでも同じ） */
  --on-photo:rgba(255,255,255,.88);
  --on-photo-text:#0f172a;
  --on-photo-text-hover:var(--brand-bg-hover);   /* I-54 写真の上のラベルのホバーの赤（白 88% の上で 5.4。写真が地なので明暗で変えない） */
  /* 暗い面の値（部品は直接使わない。下の「暗い面」で役割の名前に入る） */
  --d-text-1:#fff;
  --d-text-2:rgba(255,255,255,.66);
  --d-text-3:rgba(255,255,255,.56);
  --d-surface-0:#080c16;            /* WebGL の地（top.js の 0x080c16）と同じ */
  --d-surface-1:#141a2c;
  --d-line:rgba(255,255,255,.12);
  --d-line-strong:rgba(255,255,255,.32);
  --d-fill:rgba(255,255,255,.07);
  --d-fill-hover:rgba(255,255,255,.13);
  --d-glass-line:rgba(255,255,255,.12);
  --d-glass-line-hover:rgba(255,255,255,.2);
  --d-glass-sh:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.28);
  --d-raised:rgba(255,255,255,.13);
  --d-raised-sh:0 1px 2px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.12);
  --d-brand-text:var(--g1);         /* 暗い面の赤い文字は #FF1500（4.99。#d91200 は 3.76） */
  --d-brand-text-strong:#FF6A57;    /* I-54 暗いガラス（ホバーで明るくなる面・メガの板・暗いヘッダーのナビ）の上の赤い文字（4.5〜5.0。#FF1500 は 3.2〜3.6） */
  --d-ok:#16a34a;                   /* 暗い面の緑（5.93。#0a7d45 は 3.75） */
  --d-ok-line:rgba(22,163,74,.5);
  --d-panel:rgba(10,13,22,.88);      /* I-54 .84 → .88（白い中身の上で板のリンクの赤 #FF6A57 が 4.42 → 5.0） */
  --d-panel-sh:0 24px 64px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);
  /* 旧トークンは v6 では役割の別名（下の層の部品が使う。:root で値が決まる） */
  --ink:var(--text-1); --v5-ink:var(--text-1);
  --muted:var(--text-2); --v5-2nd:var(--text-2);          /* #475569 → #586174（I-17） */
  --subtle:var(--text-3); --v5-3rd:var(--text-3);         /* #7b8494 → #64748b（白地 3.77 → 4.76） */
  --canvas:var(--surface-0); --bg-muted:var(--surface-1);
  --border:var(--line); --border-strong:var(--line-strong);
  --ink-deep:var(--d-surface-0);
  --v5-ink-d:var(--d-text-1); --v5-2nd-d:var(--d-text-2);   /* 暗い面の文字 #f4f6fb → #fff、rgba(244,246,251,.66) → 白 66% */
  --w-muted:var(--d-text-2); --w-subtle:var(--d-text-3); --w-line:var(--d-line);   /* 二番手 白 62% → 66% */
  /* 部品の値 */
  --cta-bg:#0d0d1a;                                                            /* 黒いボタンの面（すべてのニュース・すべてのホワイトペーパー。ガラスの元色と同じ） */
  --cta-line:rgba(255,255,255,.08);                                            /* 黒いボタン（すべてのニュース）の輪郭と光 */
  --cta-sh:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px rgba(13,13,26,.18);
  --cta-bg-hover:#1e293b;                                                      /* I-54 黒いボタンのホバーの面（top-plus.css の「すべてのニュース」と同じ） */
}
/* ---------- I-27 テキストスタイル（1440→390 の間は直線。Apple の製品ページの段を参考に、見出しは J Claw の書体 800） ---------- */
:root{
  --t-display:clamp(40px, 25.14px + 3.81vw, 80px);   /* ヒーロー・J Claw の見出し */
  --t-h1:clamp(36px, 28.57px + 1.905vw, 56px);        /* ヒーローの章・下層のページ名 */
  --t-h2:clamp(32px, 26.06px + 1.524vw, 48px);        /* セクション見出し（言いたいこと） */
  --t-h3:clamp(24px, 18.06px + 1.524vw, 40px);        /* 小節の見出し（I-31: 1440 幅 32→40） */
  --t-h4:clamp(20px, 18.51px + .381vw, 24px);         /* カード見出し */
  --t-h5:clamp(18px, 17.26px + .19vw, 20px);          /* 小さな見出し */
  --t-h6:clamp(16px, 14.51px + .381vw, 20px);        /* ピル・分類名（I-31: 1440 幅 16→20、390 幅 16） */
  --t-lead:clamp(17px, 15.51px + .381vw, 21px);       /* リード */
  --t-body:clamp(16px, 15.63px + .095vw, 17px);       /* 本文 */
  --t-small:14px;                                     /* 補足・日付・チップ */
  --t-caption:12px;                                   /* 注記・バッジ */
  /* v5 の層の文字の変数は段に寄せる（--v5-h3 の「小見出し 24」は v6 では h4） */
  --v5-hero:var(--t-display); --v5-h2:var(--t-h2); --v5-h3:var(--t-h4); --v5-lead:var(--t-lead); --v5-label:var(--t-h6);
}
/* 暗い面: 同じ名前に暗い面の値を入れる（section.dark＝J Claw・採用、ヒーロー、特集のカード、暗いヘッダー、メガメニュー、SP メニュー、本文へ飛ぶリンク）。
   900px 以下の Pack ツアーは暗い手順の帯の中に明るい説明の面があるので一覧に入れず、使う役割（フォーカス）だけ下で入れ替える */
:root :is(section.dark,.chapter,.wp-card.featured,.header:not(.on-light),.m-nav,.skip-link){
  --text-1:var(--d-text-1); --text-2:var(--d-text-2); --text-3:var(--d-text-3);
  --surface-0:var(--d-surface-0); --surface-1:var(--d-surface-1);
  --line:var(--d-line); --line-strong:var(--d-line-strong);
  --fill:var(--d-fill); --fill-hover:var(--d-fill-hover);
  --glass-line:var(--d-glass-line); --glass-line-hover:var(--d-glass-line-hover); --glass-sh:var(--d-glass-sh);
  --raised:var(--d-raised); --raised-sh:var(--d-raised-sh);
  --brand-text:var(--d-brand-text); --brand-text-strong:var(--d-brand-text-strong); --focus:var(--d-brand-text); --ok:var(--d-ok); --ok-line:var(--d-ok-line);
  --panel:var(--d-panel); --panel-sh:var(--d-panel-sh);
}

/* ---------- I-8 セクション見出しの型: 何のセクションかをピルで示す ---------- */
:root :is(.jc-title,#packs .pkw-head .ed-title,#uishowcase .ed-title,#whitepaper .ed-title,.v5-mq-label,.v6-tag){
  display:flex; width:max-content; max-width:100%; align-items:center; box-sizing:border-box;
  font-family:var(--disp); font-weight:800; font-size:var(--t-h6); line-height:1.5; letter-spacing:.02em;
  color:var(--text-1); margin:0 0 24px; text-align:left; font-feature-settings:"palt" 1;
}
:root #openinnovation .v5-eyebrow{display:none}             /* 「Recruit」は v6 では「採用・パートナー募集」のピルに */
:root #packs .marquee-sec .v5-mq-label{margin-left:auto; margin-right:auto}
/* ホワイトペーパーは見出しをピルに下げ、大きな見出しは「ホワイトペーパー」（I-23。ピルと同じ語でよい。元のリードは v6 では出さない） */
:root #whitepaper .ed-title+.ed-lead{display:none}
:root #whitepaper .v6-wp-h[hidden]{display:block}
:root #whitepaper .v6-wp-h{
  font-family:var(--disp); font-weight:800; font-size:var(--v5-h2); line-height:1.25; letter-spacing:0; color:var(--text-1);
  margin-top:0; max-width:18em; font-feature-settings:"palt" 1; word-break:auto-phrase; text-wrap:balance;
}

/* ---------- I-9 J Claw: 大きな声明をスクロールではっきりさせる ---------- */
:root .jc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:clamp(56px,7vw,112px); margin-top:clamp(16px,2.2vw,32px)}
:root .jc-state,:root .jc-tag{display:none}               /* I-21: v6 では冒頭に英文と和文（.v6-lead-wrap）、最後の落としに英語の声明（.v6-end） */
:root .jc-foot .jc-en{display:none}                        /* I-25: 「JClaw — Make any AI action-safe.」は v6 では冒頭（.v6-lead-en）に出す。版で外すのではない */
:root .v6-lead-wrap[hidden],:root .v6-end[hidden]{display:block}
:root .v6-lead-wrap{grid-column:1/-1}
:root :is(.v6-lead-en,.v6-lead){--v6-reveal:1; margin:0; max-width:none; font-family:var(--disp); font-weight:800; color:var(--text-1)}   /* js/top-v6.js は --v6-reveal:1 の要素だけを分割する */
:root .v6-lead-en{font-size:var(--t-display); line-height:1.05; letter-spacing:-.035em; text-wrap:balance}   /* 見出し＝display（1440 幅で 1 行。I-26・I-27） */
:root .v6-lead-name{margin:0 0 12px; font-family:var(--disp); font-weight:800; font-size:var(--t-h3); line-height:1.2; letter-spacing:0; color:var(--text-1)}   /* I-36: 見出しの上に「J Claw」（製品名の段＝h3） */
:root .v6-lead{margin-top:clamp(16px,2vw,24px); font-size:var(--t-h3); line-height:1.35; letter-spacing:0;
  font-feature-settings:"palt" 1; word-break:auto-phrase; line-break:strict}               /* その下の副題（和文） */
:root .jc-body{grid-column:2}
:root .jc-foot{margin-top:clamp(80px,10vw,160px); padding-top:40px; align-items:flex-end}
:root .v6-end{--v6-reveal:1; margin:0; font-family:var(--disp); font-weight:800; font-size:var(--t-h2); line-height:1.15; letter-spacing:-.025em; color:var(--text-1)}   /* 最後の落とし＝h2 */
:root .v6-end .g{background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent}   /* JS が無いとき */
/* 単語ごとの淡色→はっきり（--a は JS がスクロール量から 0〜1 で入れる。JS が無ければ 1＝はっきり） */
:root .v6-w{opacity:calc(.16 + .84 * var(--a,1))}
/* グラデーションの語は、語ごとに同じ帯を位置をずらして敷く（--gw・--gx は JS が入れる） */
:root .v6-end[data-v6-split] .g{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit}
:root .v6-end[data-v6-split] .g .v6-w{
  background-image:var(--brand-grad); background-repeat:no-repeat; background-size:var(--gw,100%) 100%; background-position:calc(var(--gx,0px) * -1) 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media(max-width:900px){
  :root .jc-grid{grid-template-columns:1fr}
  :root .jc-body{grid-column:1}
}

/* ---------- I-12 J Claw: 境界の図（本文と注記の語だけ）と本文の強弱 ---------- */
/* 図の線は図の値で持つ（文字の灰を直しても、新井さんが決めた線は動かない）。境界の線は白 50%（2026-09-26「白を50％で」。グラデーションは使わない） */
:root{--v6-bd-frame:rgba(255,255,255,.2); --v6-bd-path:rgba(255,255,255,.32); --v6-bd-glow:rgba(255,255,255,.12); --v6-bd-line:rgba(255,255,255,.5); --v6-bd-corner:rgba(255,255,255,.56)}
:root .jc-body>p:first-child{font-size:var(--t-body); line-height:1.75; color:var(--text-2)}
:root .jc-body>p:nth-child(2){font-size:var(--v5-lead); line-height:1.8; color:var(--text-1); word-break:auto-phrase; text-spacing-trim:trim-start}

:root .v6-bd[hidden]{display:block}
:root .v6-bd{--v6-reveal:1; --p:1; --ax:52px; --h:232px; grid-column:1; align-self:start; width:100%; max-width:548px; margin:0; padding-top:12px;
  font-family:var(--font); color:var(--text-1); font-feature-settings:"palt" 1}
:root .v6-bd :is(.v6-bd-ft,.v6-bd-fl,.v6-bd-fr,.v6-bd-c,.v6-bd-rt,.v6-bd-zn,.v6-bd-ai,.v6-bd-wd,.v6-bd-bd,.v6-bd-gt,.v6-bd-bl,.v6-bd-ac,.v6-bd-ch li){
  --t:clamp(0,calc((var(--p) - var(--s,0)) / var(--d,.12)),1)}
:root .v6-bd-sp{position:relative; height:var(--h)}
:root :is(.v6-bd-ft,.v6-bd-fl,.v6-bd-fr){position:absolute; background:var(--v6-bd-frame)}
:root .v6-bd-ft{--s:0; left:0; right:0; top:0; height:1px; transform-origin:0 50%; scale:var(--t) 1}
:root :is(.v6-bd-fl,.v6-bd-fr){--s:.08; --d:.14; top:0; bottom:0; width:1px; transform-origin:50% 0; scale:1 var(--t)}
:root .v6-bd-fl{left:0} :root .v6-bd-fr{right:0}
:root .v6-bd-c{--s:.02; position:absolute; top:-.5px; width:32px; height:32px; border:0 solid var(--v6-bd-corner); border-top-width:1.5px; opacity:var(--t)}
:root .v6-bd-c-l{left:-.5px; border-left-width:1.5px} :root .v6-bd-c-r{right:-.5px; border-right-width:1.5px}
:root .v6-bd-rt{--s:0; --d:.1; position:absolute; top:-12px; left:40px; display:flex; align-items:baseline; gap:6px; padding:0 10px; background:var(--surface-0); line-height:24px; white-space:nowrap; opacity:var(--t)}
:root :is(.v6-bd-rt,.v6-bd-bl,.v6-bd-ac) b{font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:0}
:root :is(.v6-bd-rt,.v6-bd-bl,.v6-bd-ai) span,:root .v6-bd-zn{font-size:14px; font-weight:500; line-height:24px; letter-spacing:.02em; color:var(--text-2)}
:root .v6-bd-zn{position:absolute; right:20px; white-space:nowrap; opacity:var(--t)}
:root .v6-bd-zn-in{--s:.24; --d:.1; top:16px} :root .v6-bd-zn-out{--s:.68; --d:.1; top:52px}
:root .v6-bd-ai{--s:.22; position:absolute; left:24px; top:calc(var(--h) * .383 - 24px); height:48px; display:flex; align-items:center; gap:10px; padding:0 18px;
  border:1px solid var(--glass-line); border-radius:999px; background:var(--fill); opacity:var(--t); translate:0 calc((1 - var(--t)) * 8px)}
:root .v6-bd-ai b{font-family:var(--disp); font-weight:800; font-size:20px; line-height:1}
:root .v6-bd-svg{position:absolute; left:0; top:0; overflow:visible; pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 60%,transparent 92%); mask-image:linear-gradient(#000 60%,transparent 92%)}
:root .v6-bd-wd{fill:none; stroke:var(--v6-bd-path); stroke-width:1.25; stroke-dasharray:3 5; opacity:var(--t)}
:root .v6-bd-k1{--s:.3; --d:.1} :root .v6-bd-k2{--s:.36; --d:.1}
:root .v6-bd-sp::after{content:""; position:absolute; left:var(--ax); top:calc(var(--h) * .383 + 24px); bottom:0; width:1.5px; margin-left:-.75px;
  background:var(--text-1); transform-origin:50% 0; scale:1 clamp(0,calc((var(--p) - .42) / .14),1)}
:root .v6-bd-bd{--s:.16; --d:.08; position:relative; height:2px; background:var(--v6-bd-frame); opacity:var(--t)}
:root .v6-bd-bd::before{content:""; position:absolute; inset:0; background:var(--v6-bd-line); transform-origin:var(--ax) 50%; scale:clamp(0,calc((var(--p) - .54) / .14),1) 1}
:root .v6-bd-gt{--s:.54; --d:.08; position:absolute; left:var(--ax); top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:var(--text-1); box-shadow:0 0 0 6px var(--v6-bd-glow); scale:var(--t)}
:root .v6-bd-bl{--s:.58; --d:.1; position:absolute; right:0; top:-12px; display:flex; align-items:baseline; gap:8px; padding:0 0 0 12px;
  background:var(--surface-0); line-height:24px; white-space:nowrap; opacity:var(--t)}
:root .v6-bd-out{position:relative; padding:52px 0 0 24px}
:root .v6-bd-out::before{content:""; position:absolute; left:var(--ax); top:0; height:40px; width:1.5px; margin-left:-.75px; background:var(--text-1);
  transform-origin:50% 0; scale:1 clamp(0,calc((var(--p) - .62) / .08),1)}
:root .v6-bd-out::after{content:""; position:absolute; left:var(--ax); top:38px; margin-left:-5px; border:5px solid transparent; border-top:7px solid var(--text-1);
  border-bottom:0; opacity:clamp(0,calc((var(--p) - .68) / .04),1)}
:root .v6-bd-ac{--s:.68; --d:.1; line-height:24px; opacity:var(--t)}
:root .v6-bd-ch{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px}
:root .v6-bd-ch li{--s:calc(.72 + var(--i) * .025); --d:.08; font-size:16px; font-weight:500; line-height:24px; letter-spacing:.02em; white-space:nowrap;
  opacity:var(--t); translate:0 calc((1 - var(--t)) * 6px)}
@media(max-width:900px){:root .v6-bd{max-width:none}}
@media(max-width:700px){:root .v6-bd-rt{left:32px} :root .v6-bd-zn{right:14px}}
@media(prefers-reduced-motion:reduce){:root .v6-bd{--p:1 !important}}

/* ---------- I-13 「承認ゲート」は Pack の部品（ツアー 02）の名前にだけ使う ---------- */
:root #uishowcase .reveal>.ed-title{display:none}                    /* ピルは v6 用の見出し「特徴」（h2.v6-tag。I-22） */
:root #uishowcase .ui-grid{display:none}                             /* Pack ツアーと同じ画面 3 枚（重複） */

/* ---------- I-24 「特徴」をユースケースに（特徴 3 つ × 業種 3 つ。3 業種は J Claw のデモ。写真は撮影するまで仮の枠） ---------- */
:root #uishowcase :is(.ui-frame,.ui-notes,.form-note){display:none}        /* 画面は Pack ツアーにある。説明はユースケースの中へ */
:root .v6-uc[hidden]{display:grid}
:root .v6-uc{grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 32px; margin-top:80px; text-align:left}
:root .v6-uc-card{display:flex; flex-direction:column; min-width:0}
:root .v6-uc-ph{aspect-ratio:4/3; margin:0 0 24px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:8px;
  padding:20px; border:1px dashed var(--line-strong); border-radius:12px; background:var(--surface-1)}   /* 撮影するまでの仮の枠（構図メモつき） */
:root .v6-uc-ph-k{padding:2px 10px 3px; border:1px solid var(--glass-line); border-radius:6px; background:var(--raised); font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--text-2)}
:root .v6-uc-ph-t{font-size:var(--t-caption); line-height:1.7; color:var(--text-2)}
:root .v6-uc-f{display:flex; align-items:baseline; gap:10px; margin:0 0 10px; font-size:var(--t-small); font-weight:700; letter-spacing:.02em; color:var(--text-1)}
:root .v6-uc-f span{font-family:var(--font); font-weight:600; color:var(--text-3)}
:root .v6-uc-t{margin:0; font-family:var(--disp); font-weight:800; font-size:var(--t-h4); line-height:1.4; letter-spacing:0; color:var(--text-1); font-feature-settings:"palt" 1}
:root .v6-uc-s{margin:12px 0 0; font-size:var(--t-body); font-weight:600; line-height:1.6; color:var(--text-1); font-feature-settings:"palt" 1}
:root .v6-uc-d{margin:8px 0 0; font-size:var(--t-body); line-height:1.75; color:var(--text-2); text-wrap:pretty}
:root .v6-uc-a{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:20px; padding:8px 14px; border:1px solid var(--glass-line); border-radius:8px;
  background:var(--fill); box-shadow:var(--glass-sh); font-size:var(--t-small); font-weight:600; color:var(--text-1); transition:background .2s,border-color .2s,color .2s}
:root .v6-uc-a:hover{background:var(--fill-hover); border-color:var(--glass-line-hover)}
:root .v6-uc-note{grid-column:1/-1; margin:0; font-size:var(--t-caption); letter-spacing:.02em; color:var(--text-3)}
@media(max-width:900px){:root .v6-uc{grid-template-columns:1fr; gap:56px; margin-top:56px}}

/* ---------- I-14 v6 の装飾をヘッダーのガラス・アウトラインに揃える ---------- */
/* ヘッダー（top.css の .gnav・.hd-box と .on-light）と同じ元色・同じ作り（色の役割の「ガラス」。面はヘッダーの 5% に対して 4%）。明るい面は #0d0d1a の 4%＋輪郭 10%＋上端の白 55%、
   暗い面（J Claw・採用のピル、境界の図の AI の箱）は白 7%＋輪郭 12%＋上端の白 12%。明・暗の切り替えは役割の名前の入れ替わりで起きる */
/* セクションのピル: 角丸 8・輪郭・上端の光（ヘッダーの箱と同じ） */
:root :is(.jc-title,#packs .pkw-head .ed-title,#uishowcase .ed-title,#whitepaper .ed-title,.v5-mq-label,.v6-tag){
  border-radius:8px; padding:5px 14px 6px; background:var(--fill); border:1px solid var(--glass-line); box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
/* Pack の手順: ヘッダーのナビと同じ入れ物の中の区切り。選んでいる手順は白い面 */
@media(min-width:901px){
  :root .pkt-tabs{gap:2px; padding:5px; border:1px solid var(--glass-line); border-radius:10px; background:var(--fill); box-shadow:var(--glass-sh);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur)}
  :root .pkt-tab{justify-content:center; padding:4px 10px; border-radius:6px}
  :root .pkt-tab::after{display:none}
  :root .pkt-tab:hover{background:var(--fill-hover); color:var(--text-1)}
  :root .pkt-tab[aria-selected="true"]{background:var(--surface-0); color:var(--text-1); box-shadow:var(--raised-sh)}
  :root .pkt-arrow{background:var(--raised); border-color:var(--glass-line); box-shadow:var(--glass-sh)}
  :root .pkt-arrow:hover{background:var(--text-1); border-color:var(--text-1); color:var(--text-inverse)}   /* 上の面の指定がホバー（top.css）を上書きしないように */
}
/* ニュース: カードは面＋輪郭＋上端の光、丸い矢印とタグも輪郭で。ボタンはヘッダーの箱と同じ角丸 8・内側の光 */
:root .news-bar{background:var(--fill); border:1px solid var(--glass-line); box-shadow:var(--glass-sh)}
:root a.news-bar:hover{background:var(--fill-hover); border-color:var(--glass-line-hover)}
:root .news-bar .n-cir{background:var(--raised); border-color:var(--glass-line); box-shadow:var(--glass-sh)}
:root .news-bar .n-tag{border-radius:6px; border-color:var(--glass-line); background:var(--raised)}
:root #news .btn-line{border-radius:8px; min-height:52px; padding:6px 6px 6px 22px; border:1px solid var(--cta-line); box-shadow:var(--cta-sh)}
:root #news .btn-line .ar{border-radius:6px; background:var(--brand-bg)}   /* 白い矢印をのせる赤い面（#FF1500 では 3.92） */
/* I-37 ホワイトペーパーにも下層の一覧（White Paper）へのボタン。ニュースの「すべてのニュース」と同じ部品（top-plus.css の #news .btn-line ＋ 上の 2 行） */
:root #whitepaper .v6-wp-all[hidden]{display:flex}
:root #whitepaper .v6-wp-all{justify-content:flex-end; margin-top:40px}
:root #whitepaper .v6-wp-all .btn-line{display:inline-flex; align-items:center; justify-content:space-between; gap:40px; min-width:min(100%,360px); min-height:52px; padding:6px 6px 6px 22px;
  background:var(--cta-bg); color:var(--text-inverse); border:1px solid var(--cta-line); border-radius:8px; box-shadow:var(--cta-sh);
  font-weight:700; font-size:var(--t-small); transition:background .25s,color .25s,transform .2s,opacity .2s}
:root #whitepaper .v6-wp-all .btn-line .ar{display:grid; place-items:center; width:40px; height:40px; border-radius:6px; background:var(--brand-bg); color:var(--text-inverse); font-size:14px}
@media(max-width:900px){:root #whitepaper .v6-wp-all .btn-line{width:100%}}
/* 文字のコントラスト（AA 4.5）: ガラスの面（#f5f5f6 相当）の上の小さな灰は --text-3 だと 4.38 で足りない → --text-2（2026-09-26 のカラー監査で検出） */
:root .news-bar .n-date{color:var(--text-2)}
@media(min-width:901px){:root .pkt-tab{color:var(--text-2)}}
@media(max-width:900px){:root .pkt-tab .k{color:inherit}}   /* 900px 以下の暗いタブの番号（白 40% は 3.8）は名前と同じ濃さに（901px 以上と同じ） */
/* J Claw の境界の図: AI の箱はヘッダーの暗い箱と同じ作り */
:root .v6-bd-ai{border-radius:8px; border-color:var(--glass-line); background:var(--fill); box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur)}

/* ---------- I-10 フッター: ナビを整理（大きなロゴの演出はそのまま） ---------- */
/* I-40（2026-09-28）: 大きなロゴの下を Apple のフッターの型に。①現在地のパンくず（.v6-fcrumb）②サイトマップどおりのディレクトリ（.v6-fnav・7 列）
   ③キャッチコピーと資料請求（.foot-brand）④最下段の帯。今いるページは太字＋赤い点（I-19 の「いまここ」の印）。分類名はリンクにしない（I-10） */
:root .foot-nav2{display:none}
:root .v6-fcrumb[hidden]{display:block}
:root .v6-fnav[hidden]{display:grid}   /* [hidden] 付きの方が強いので、ここで grid にする */
/* ① パンくず */
/* I-43（2026-09-28・参考 MOTEX）: 線で挟む → 本文の幅いっぱいのベタの帯。パンくずは「いまここ」なのでブランドの赤の面（I-19 の範囲）に白い文字 */
:root .v6-fcrumb{margin-top:clamp(32px,4vw,56px); padding:12px 20px; border-radius:8px; background:var(--brand-bg); color:var(--on-brand);
  font-family:var(--font); font-size:var(--t-small); line-height:1.5; letter-spacing:.02em}
:root .v6-fcrumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; row-gap:4px}
:root .v6-fcrumb li{display:inline-flex; align-items:center; color:var(--on-brand)}
:root .v6-fcrumb li+li::before{content:"／"; margin:0 10px; color:var(--on-brand); opacity:.6}
:root .v6-fcrumb a{color:var(--on-brand); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color .2s}
:root .v6-fcrumb a:hover{text-decoration-color:currentColor}
:root .v6-fcrumb a:focus-visible{outline:2px solid var(--on-brand); outline-offset:2px; border-radius:2px}
:root .v6-fcrumb [aria-current="page"]{color:var(--on-brand); font-family:var(--disp); font-weight:800}   /* 本文の和文は 500 だけ読むので、太字は Display 800 で出す */
/* ② ディレクトリ（先頭）→ ③ コピーと資料請求 */
:root .foot-top{display:flex; flex-direction:column; flex-wrap:nowrap; gap:0; padding-bottom:0; border-bottom:0}   /* 決裁 I-67①（I-43）: 下の層（top.css・各ページの CSS）の .foot-top の下線が、最下段の帯の上の線（.foot-btm）と重なって 2 本（2px）になっていた */
:root .v6-fnav{order:1; display:grid; grid-template-columns:repeat(7,auto); justify-content:space-between; gap:40px 24px; max-width:none; margin:0; padding:48px 0 40px}   /* 下の線は外して余白で分ける（I-43） */
:root .v6-fnav .fg{min-width:0}
:root .v6-fnav .fg-t{font-family:var(--font); font-weight:700; font-size:var(--t-small); line-height:1.5; letter-spacing:.02em; color:var(--text-1)}
:root .v6-fnav .fg-c{margin-top:12px; display:flex; flex-direction:column; align-items:flex-start}
:root .v6-fnav .fg-c a{position:relative; padding:5px 0; font-size:var(--t-small); font-weight:500; line-height:1.5; letter-spacing:.02em; color:var(--text-2); transition:color .2s}
:root .v6-fnav .fg-c a::before{content:none}
@media(hover:hover){:root .v6-fnav .fg-c a:where(:not(.is-locked,.is-locked-quiet)):hover{color:var(--brand-text)}}   /* I-66（I-54 の直し）: 赤はマウスのある環境だけ（タップのあとに赤が残らない）。今いるページ・準備中の規則より前のまま包む */
/* I-42（2026-09-28）: 一覧は親子が縦の線でわかる入れ子（ul.v6-tree＞li＞ul）。まとまりの名前の下に 1 本の線、子は親の文字の左端から下ろした線（└ の印はやめた） */
:root .v6-tree,:root .v6-tree ul{list-style:none; margin:0; padding:0}
:root .v6-tree li{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
/* I-43: フッターでは列の縦の線（まとまりの名前の下の 1 本）を外し、縦の線は親の下の子にだけ（親の文字の左端から下ろす） */
:root .v6-fnav .v6-tree{display:flex; flex-direction:column; align-items:flex-start}
:root .v6-fnav .v6-tree ul{margin:2px 0 6px; padding-left:16px; border-left:1px solid var(--line-strong)}
:root .v6-fnav .fg-c a{line-break:strict; word-break:auto-phrase; overflow-wrap:anywhere}   /* 列が細いとき「ー」から始まる行・1 字だけの行を作らない */
/* 今いるページ＝太字＋赤い点、祖先（記事・LP のとき）＝太字＋赤い輪。太字は Display 800（本文の和文は 500 だけ読むので 700 は効かない） */
:root .v6-fnav .fg-c a:is(.is-current,.is-ancestor){color:var(--text-1); font-family:var(--disp); font-weight:800}
:root .v6-fnav .fg-c a.is-current::after{content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-radius:50%; vertical-align:.15em; background:var(--brand)}
:root .v6-fnav .fg-c a.is-ancestor::after{content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-radius:50%; vertical-align:.15em; border:1.5px solid var(--brand); box-sizing:border-box}
/* 準備中は class（.is-soon）で見る。部分公開のゲートが href="#" を data-locked-href に移すため */
:root .v6-fnav .fg-c a.is-soon{color:var(--text-3); cursor:default}
:root .v6-fnav .fg-c a.is-soon::after{content:"準備中"; margin-left:8px; font-size:var(--t-caption); color:var(--text-3)}
:root .v6-fnav .fg-c a.is-soon:hover{color:var(--text-3)}
:root .v6-fnav .ex{font-family:var(--font); font-size:var(--t-caption); margin-left:4px; color:var(--text-3)}
:root .foot-brand{order:2; flex:none; max-width:none; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 40px; padding:32px 0 36px}
:root .foot-brand>*{grid-column:1; margin:0}
:root .foot-brand>a{grid-column:2; grid-row:1 / span 2}
:root .foot-copy{font-family:var(--disp); font-weight:800; font-size:var(--t-h5); line-height:1.5; color:var(--text-1); margin-top:0;
  font-feature-settings:"palt" 1; word-break:auto-phrase; text-wrap:balance}
:root .foot-lead{font-size:var(--t-small); line-height:1.75; color:var(--text-2)}
:root .foot-btm{font-family:var(--font); font-size:var(--t-caption); letter-spacing:.02em; color:var(--text-2); padding-top:20px; border-top:1px solid var(--line)}   /* #7b8494 は白の上で 3.77（12px には不足）→ --text-2（6.22） */
@media(max-width:1180px) and (min-width:701px){
  :root .v6-fnav{grid-template-columns:repeat(4,minmax(0,1fr)); justify-content:stretch}
}
@media(max-width:820px) and (min-width:701px){
  :root .v6-fnav{grid-template-columns:repeat(3,minmax(0,1fr))}   /* 4 列だと 1 列が 150px 前後になり、名前が折れて列からはみ出す */
}
/* SP は従来どおりアコーディオン（top-mega.js の .fg の開閉がそのまま効く）。今いるページの列は開いた状態で出す */
@media(max-width:700px){
  :root .foot-top{display:flex}
  :root .foot-brand{grid-template-columns:1fr; padding:28px 0}
  :root .foot-brand>a{grid-column:1; grid-row:auto; justify-self:start; margin-top:12px}
  :root .v6-fnav,:root .v6-fnav[hidden]{display:block; padding:0; border-bottom:0}
  :root .v6-fnav .fg{min-width:0; border-bottom:1px solid var(--line)}
  :root .v6-fnav .fg-h{position:relative; min-height:58px}
  :root .v6-fnav .fg-t{flex:1; display:flex; align-items:center; min-height:58px; pointer-events:none;
    font-family:var(--disp); font-weight:800; font-size:var(--t-h5); letter-spacing:0; color:var(--text-1)}
  :root .v6-fnav .fg-x{display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line-strong); border-radius:50%;
    background:var(--surface-0); color:var(--text-1); font-size:16px; cursor:pointer; transition:transform .25s,border-color .2s}
  :root .v6-fnav .fg-x::before{content:""; position:absolute; inset:0}
  :root .v6-fnav .fg.open .fg-x{transform:rotate(45deg); border-color:var(--text-1)}
  :root .v6-fnav .fg-c{overflow:hidden; max-height:0; margin:0; visibility:hidden; align-items:stretch;
    transition:max-height .38s cubic-bezier(.22,.61,.36,1),visibility .38s}
  :root .v6-fnav .fg.open .fg-c{max-height:520px; visibility:visible}
  :root .v6-fnav .v6-tree{align-items:stretch; margin:0 0 16px}
  :root .v6-fnav .v6-tree li{align-items:stretch}
  :root .v6-fnav .v6-tree ul{margin:0 0 4px; padding-left:16px}
  :root .v6-fnav .fg-c a{display:flex; align-items:center; min-height:44px; padding:2px 0; font-size:var(--t-small)}   /* 行ごとの区切り線は外す（I-43）。まとまりの区切りだけ残す */
  :root .v6-fcrumb{margin-top:28px; margin-bottom:12px; padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){:root .v6-fnav .fg-c{transition:none}}

/* ---------- I-30 メガメニュー: v6 の面（ヘッダーの明暗に合わせる）とサイトマップの形 ---------- */
/* 板: 暗いガラス（v4）→ ヘッダーと同じ元色の面。明るいヘッダーでは白、暗いヘッダー（TOP のヒーローの上）では暗い面の値 */
:root .header .mega{width:min(1120px,calc(100vw - 48px)); grid-template-columns:minmax(0,1fr) 300px;
  background:var(--panel); border:1px solid var(--glass-line); border-radius:16px; box-shadow:var(--panel-sh);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur)}
:root .header .mg-main{padding:28px}
:root .header .mg-head{margin-bottom:20px}
:root .header .mg-title{font-family:var(--disp); font-weight:800; font-size:var(--t-h5); line-height:1.4; letter-spacing:0; color:var(--text-1)}
/* 英字の番号（ABOUT-01・E-01・WP-01・レールの 01 など）は出さない（v5 のルール 5 と同じ。名前だけで読む） */
:root .header :is(.mg-code,.mg-tile .tc,.mg-feat .tc,.mc){display:none}
/* タイル: 写真の上の暗い帯をやめ、名前は写真の上の白いラベル（ヘッダーのピルと同じ形） */
:root .header .mg-tiles{gap:12px}
:root .header .mg-tile{aspect-ratio:4/3; border-radius:12px; border:1px solid var(--glass-line); background-color:var(--fill)}
:root .header .mg-tile::after,:root .header .mg-feat::after{content:none}
:root .header :is(.mg-tile,.mg-feat) .tk{left:10px; bottom:10px; max-width:calc(100% - 20px); padding:5px 12px; border-radius:999px;
  background:var(--on-photo); color:var(--on-photo-text); font-family:var(--font); font-size:var(--t-small); font-weight:700; line-height:1.45;
  box-shadow:0 1px 2px var(--line); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur)}
:root .header .mg-tile .tick{top:12px; right:12px; bottom:auto}
:root .header :is(.mg-tile,.mg-feat):hover{border-color:var(--glass-line-hover)}
:root .header .mg-tile.mg-logo{background-color:var(--surface-1)}
:root .header .mg-feat{height:120px; border-radius:12px; border:1px solid var(--glass-line); margin-bottom:16px}
:root .header .mg-list{gap:0 24px}
:root .header .mg-list a{font-size:var(--t-small); line-height:1.5; color:var(--text-1); padding:10px 0; border-bottom:1px solid var(--line)}
@media(hover:hover){:root .header .mg-list a:where(:not(.is-locked,.is-locked-quiet)):hover{color:var(--brand-text-strong)}}   /* I-66（I-54 の直し）: マウスのある環境だけ */
/* About: Products と重なる X Company・X Concierge のタイルを外し、About J Claw Studio を先頭に（3 枚） */
:root .header .mega[data-mega="about"] .mg-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
:root .header .mega[data-mega="about"] :is(.mg-tile[href="x-company.html"],.mg-tile.mg-logo){display:none}
:root .header .v6-mt[hidden]{display:block; order:-1}
/* I-51（2026-09-28）: 左の面＝ディレクトリ（v6_directory.py）。第二階層はサムネイルのタイル、第三階層はタイルの下の文字のリンク（縦の線）。
   準備中はグレーで押せない。v4 のタイル・特集・一覧は v6 で隠す。右の列はページの一覧をやめ、「関連」・説明・資料請求だけ */
:root .header .mega :is(.mg-tiles,.mg-feat,.mg-list){display:none}
:root .header .v6-mg-dir[hidden]{display:block}
:root .header .v6-mg-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px 16px; align-items:start}
:root .header .v6-mg-grid[data-n="2"]{grid-template-columns:repeat(2, minmax(0,1fr))}
:root .header .v6-mg-grid[data-n="1"]{grid-template-columns:minmax(0,1fr)}
:root .header .v6-mg-grid[data-n="1"] .v6-mg-item{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start}   /* タイルが 1 枚なら子はタイルの右 */
:root .header .v6-mg-item{min-width:0}
:root .header .v6-mg-item .mg-tile{display:block; width:100%}
:root .header .mg-tile:is(.is-current,.is-ancestor) .tk::after{content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-radius:50%; vertical-align:.15em; box-sizing:border-box}
:root .header .mg-tile.is-current .tk::after{background:var(--brand)}
:root .header .mg-tile.is-ancestor .tk::after{border:1.5px solid var(--brand)}
:root .header .mg-tile.is-soon{filter:grayscale(1); opacity:.45; cursor:default}
:root .header .mg-tile.is-soon:hover{border-color:var(--glass-line)}
:root .header .v6-mg-soon{position:absolute; top:10px; right:10px; padding:3px 10px; border-radius:999px; background:var(--panel); font-family:var(--font); font-size:var(--t-caption); line-height:1.5; color:var(--text-2)}
:root .header .v6-mg-kids{list-style:none; margin:10px 0 0 2px; padding:2px 0 2px 14px; border-left:1px solid var(--line-strong); display:flex; flex-direction:column; align-items:flex-start; gap:0}
:root .header .v6-mg-grid[data-n="1"] .v6-mg-kids{margin-top:0}
:root .header .v6-mg-grid[data-n="1"] .mg-tile{aspect-ratio:16/10}
:root .header .v6-mg-kids a{display:inline-flex; align-items:center; padding:4px 0; font-size:var(--t-small); line-height:1.5; color:var(--text-2); transition:color .2s}
@media(hover:hover){:root .header .v6-mg-kids a:where(:not(.is-locked,.is-locked-quiet)):hover{color:var(--brand-text-strong)}}   /* I-66（I-54 の直し）: マウスのある環境だけ */
:root .header .v6-mg-kids .ex{margin-left:4px; font-size:var(--t-caption); color:var(--text-3)}
:root .header .v6-mg-kids a.is-soon{color:var(--text-3); cursor:default}
:root .header .v6-mg-kids a.is-soon::after{content:"準備中"; margin-left:8px; font-size:var(--t-caption); color:var(--text-3)}
:root .header .v6-mg-kids a:is(.is-current,.is-ancestor){color:var(--text-1); font-family:var(--disp); font-weight:800}
:root .header .v6-mg-kids a:is(.is-current,.is-ancestor)::after{content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-radius:50%; box-sizing:border-box}
:root .header .v6-mg-kids a.is-current::after{background:var(--brand)}
:root .header .v6-mg-kids a.is-ancestor::after{border:1.5px solid var(--brand)}
/* 右の列: 「関連」・説明・資料請求 */
:root .header .mg-rail{border-left:1px solid var(--line); padding:28px 24px; gap:2px}
:root .header .v6-mg-h,:root .header .mg-rail h5{font-family:var(--font); font-size:var(--t-caption); font-weight:700; line-height:1.5; letter-spacing:.04em; color:var(--text-3); margin:0 0 6px}
:root .header .mg-rail h5{margin-top:8px}
:root .header .v6-mg-rel .ex{font-family:var(--font); font-size:var(--t-caption); margin-left:4px; color:var(--text-3)}
/* 「関連」: v4 のレール（MORE・LIVE DEMO・NEXT・RESOURCES）は TOP のセクションへのリンクを含み、ディレクトリのページと同じ名前で行き先が 2 つになるので、
   v6 ではレールの見出しとリンクを隠し、ページへのリンクに置き換えた一覧（.v6-mg-rel）を出す（説明と資料請求はそのまま） */
:root .header .mg-rail>h5,:root .header .mg-rail>.mg-l{display:none}
:root .header .v6-mg-rel[hidden]{display:flex; flex-direction:column; align-items:flex-start; order:-1; gap:0; padding-bottom:14px; margin-bottom:8px; border-bottom:1px solid var(--line)}
:root .header .mega.open .v6-mg-rel{transition-delay:.12s}
:root .header .v6-mg-rel a{font-size:var(--t-small); line-height:1.5; color:var(--text-1); padding:4px 0; transition:color .2s}
@media(hover:hover){:root .header .v6-mg-rel a:where(:not(.is-locked,.is-locked-quiet)):hover{color:var(--brand-text-strong)}}   /* I-66（I-54 の直し）: マウスのある環境だけ */
:root .header .v6-mg-rel .soon{font-size:var(--t-small); line-height:1.5; color:var(--text-3); padding:4px 0}
/* I-42 SP メニュー: まとまりの並び・見た目はそのまま、一覧だけディレクトリのツリー（ul.v6-tree・v6 用の要素）に。v4 の一覧は隠す */
:root .m-nav .fg-c>a{display:none}
:root .m-nav .v6-tree[hidden]{display:flex}
:root .m-nav .v6-tree{flex-direction:column; margin:0 0 14px; border-left:1px solid var(--line-strong)}   /* 線は見出しの左端から下ろす */
:root .m-nav .v6-tree li{align-items:stretch}
:root .m-nav .v6-tree ul{margin-left:16px; border-left:1px solid var(--line-strong)}
:root .m-nav .v6-tree a{font-weight:500}   /* v4 の 800 は和文では 500 で出ていた（見た目は同じ）。今いるページを太字にするための基準 */
:root .m-nav .v6-tree a::before{content:none}
:root .m-nav .fg.open .fg-c{max-height:560px}
:root .m-nav .v6-tree a:is(.is-current,.is-ancestor,.is-soon){justify-content:flex-start}   /* 印と「準備中」は名前のすぐ後ろ（フッター・メガと同じ）。↗ は v4 のまま右端 */
:root .m-nav .v6-tree a:is(.is-current,.is-ancestor){color:var(--text-1); font-family:var(--disp); font-weight:800}
:root .m-nav .v6-tree a.is-current::after{content:""; width:6px; height:6px; margin-left:8px; border-radius:50%; background:var(--brand)}
:root .m-nav .v6-tree a.is-ancestor::after{content:""; width:6px; height:6px; margin-left:8px; border-radius:50%; border:1.5px solid var(--brand); box-sizing:border-box}
:root .m-nav .v6-tree a.is-soon{color:var(--text-3)}
/* 一覧の無い 1 行のまとまり（White Paper・News）の現在地: fg-t の aria-current（apply_v6_nav.py が付ける）に赤い点／輪 */
:root .m-nav .fg-t[aria-current]{justify-content:flex-start}
:root .m-nav .fg-t[aria-current]::after{content:""; flex:none; width:6px; height:6px; margin-left:10px; border-radius:50%; box-sizing:border-box}
:root .m-nav .fg-t[aria-current="page"]::after{background:var(--brand)}
:root .m-nav .fg-t[aria-current="true"]::after{border:1.5px solid var(--brand)}
:root .m-nav .v6-tree a.is-soon::after{content:"準備中"; margin-left:8px; font-size:var(--t-caption); color:var(--text-3)}
:root .header .mg-l{font-size:var(--t-small); line-height:1.5; color:var(--text-1); padding:5px 0}
@media(hover:hover){:root .header .mg-l:where(:not(.is-locked,.is-locked-quiet)):hover{color:var(--brand-text-strong)}}   /* I-66（I-54 の直し）: マウスのある環境だけ */
:root .header .mg-desc{font-size:var(--t-caption); line-height:1.8; color:var(--text-2); border-top:0; padding-top:6px; margin-top:0}   /* I-51: 関連のすぐ下に（下へ押しやると間が空く）。関連の下の線と 2 本にならないよう上の線は外す */
:root .header .mg-cta{margin-top:14px}
/* 961〜1200px: ナビとボタンの文字が 2 行に折れていた（v4 から。1024 幅で「About J Claw / Studio」「ログイ / ン」「資料請 / 求」）。詰めて 1 行に */
@media(max-width:1200px) and (min-width:961px){
  :root .gnav a,:root .hd-box{white-space:nowrap}
  :root .gnav a{padding:0 9px}
  :root .hd-box{padding:0 12px; gap:6px}
}
/* 決裁 I-70①: 961〜999px では右端の J Claw Academy の箱が画面からはみ出していた（961 で 14px。中身に約 1000px 要る）→ 961〜1023px だけさらに詰める */
@media(max-width:1023px) and (min-width:961px){
  :root .gnav a{padding:0 6px}
  :root .hd-box{padding:0 10px}
}

/* ---------- I-15〜I-19 下の層の部品に色の役割を当てる（v6 で表示されるものだけ） ---------- */
/* I-16 資料請求（CV）: 面は #d91200、ホバーは #b80f00（ヘッダーの明・暗と SP メニュー） */
:root :is(.hd-cv,.header.on-light .hd-cv){background:var(--brand-bg)}
:root :is(.hd-cv,.header.on-light .hd-cv):hover{background:var(--brand-bg-hover)}
/* 359px 以下: ロゴと MENU の間が 75px しかなく、ヘッダーの資料請求が「料／請」と 1 字ずつ折れていた（v4 から）。矢印を外して 1 行に */
@media(max-width:359px){:root .header .hd-cv{padding:0 12px; white-space:nowrap} :root .header .hd-cv .ar{display:none}}
:root .m-cta .btn{background:var(--brand-bg) !important}    /* index.html の style 属性（var(--g1)）より強くするため */
/* 白い文字をのせる赤い面（ホバー）: #FF1500 では白い文字が 3.92 */
:root .hd-box.hd-acad:hover{background:var(--brand-bg)!important; border-color:var(--brand-bg)!important}   /* top.css の同じ規則が !important（var(--g1)）のため */
:root :is(.btn-w,.btn-dark):hover{background:var(--brand-bg)}
:root a.news-bar:hover .n-cir{background:var(--brand-bg); border-color:var(--brand-bg); color:var(--text-inverse)}   /* ニュースのカードの丸い矢印 */
/* 明るい面の赤い文字（Pack の手順の分類名・明るいヘッダーのナビのホバー） */
:root .pkt-s{color:var(--brand-text)}
:root .header.on-light .rl::after{color:var(--brand-text-strong)}   /* ガラス＋ホバーの面（#e2e2e2 前後）の上なので #b80f00 */
:root .header:not(.on-light) .rl::after{color:var(--brand-text-strong)}   /* I-54 暗いヘッダー: ナビのガラスのホバーの面（rgb(45,50,64) 前後）の上なので #FF6A57（#FF1500 は 3.1〜3.4） */
/* I-19 グラデーションは 4 か所だけ。ほかの印は単色（赤は「いまここ」の印、チップの点は灰） */
:root .news-bar::before,:root .pbar,:root :is(.tick,.mg-tile .tick){background:var(--brand)}
:root .mq-chip .dot{background:var(--text-3)}
/* フォーカスの輪（--g2 #FF50EA は白の上で 2.77）: 明るい面 #d91200・暗い面 #FF1500 */
:root :is(a,button):focus-visible,:root :is(.pkt-tab,.pkt-arrow):focus-visible{outline-color:var(--focus)}
:root .gnav a:focus-visible{opacity:1}   /* ナビは不透明度 .78 で輪も淡くなる（暗いヘッダーで 2.95）。ホバーと同じく 1 に */
@media(max-width:900px){:root .pkt-tabs{--focus:var(--d-brand-text); --brand-text-strong:var(--d-brand-text-strong)}}   /* 900px 以下の暗い手順の帯（#d91200 は 3.2）。ホバーの赤（I-54）も */
/* 準備済みのバッジ（「PDFあり」）: 暗い特集のカードの上では明るい緑 */
:root .wp-badge.ready{color:var(--ok); border-color:var(--ok-line)}
/* I-52（2026-09-28・参考 Goodpatch の IR の PDF のボタン）: 「PDFあり」＝丸い面に PDF の書類のアイコン＋文字。緑の枠の札はやめる。
   アイコンは pdf.svg を mask にして文字の色で塗る（赤は CV といまここだけ。暗いカードの上では白）。カードのホバーで面が濃くなり 2px 浮く */
:root .wp-badge.ready{position:relative; display:inline-flex; align-items:center; min-height:32px; padding:0 0 0 40px; border:0; border-radius:0; background:none;
  font-family:var(--font); font-weight:700; letter-spacing:.04em; color:var(--text-1)}
:root .wp-badge.ready::before{content:""; position:absolute; left:0; top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%; background:var(--fill-hover);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), background-color .25s}
:root .wp-badge.ready::after{content:""; position:absolute; left:9px; top:50%; width:14px; height:18px; margin-top:-9px; background:currentColor;
  -webkit-mask:url(/assets/images/icons/pdf.svg) center / contain no-repeat; mask:url(/assets/images/icons/pdf.svg) center / contain no-repeat;
  transition:transform .25s cubic-bezier(.22,.61,.36,1)}
:root :is(a.wp-card,.wp-card):hover .wp-badge.ready::before{background:var(--line); transform:translateY(-2px)}
:root :is(a.wp-card,.wp-card):hover .wp-badge.ready::after{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){:root .wp-badge.ready::before,:root .wp-badge.ready::after{transition:none} :root :is(a.wp-card,.wp-card):hover .wp-badge.ready::before,:root :is(a.wp-card,.wp-card):hover .wp-badge.ready::after{transform:none}   /* 決裁 I-67②: 疑似要素は :is() の中では効かないので並べて書く（動きを減らす設定でアイコンを浮かせない・I-52） */}

/* ---------- I-54 ホバーの文字を赤に（2026-09-28。I-19 の「いまここ」に「ホバー中の文字＝指している所」を足す） ----------
   色だけを 0.2 秒で変える（ヘッダーのナビ・ログインの入れ替わる動き .rl は 1 行の短い語が前提なので、折り返す題には使わない）。
   マウスのある環境だけ（hover:hover。スマホで押したあとに赤が残らない）。カードは題だけ。
   赤くしない: 赤い面・塗りの面の上の文字（資料請求・赤いパンくず・Academy・白と黒のボタン・選んでいるタブ／絞り込み）、押せないもの（準備中・ロック）、今いるページ、ロゴ。
   赤は面で選ぶ: 白い面 --brand-text（#d91200）、ホバーで濃くなるガラスの面 --brand-text-strong（#b80f00）、写真の上の白いラベル --on-photo-text-hover。
   暗い面では --brand-text が #FF1500、--brand-text-strong が #FF6A57（--d-brand-text-strong。暗いガラスの上）に入れ替わる。ここは TOP と下層の共通の部品。TOP だけ・下層だけの部品は各層の I-54 */
:root :is(a.wp-card .wp-t,a.news-bar .n-t,.header a.mg-tile .tk){transition:color .2s}
:root .btn-line{transition:transform .2s,opacity .2s,color .2s}   /* 下の層の .btn の transform・opacity に色を足す（黒いボタン 2 つは ID つきの規則で自分の一覧のまま） */
/* SP メニューの一覧の無いまとまり（White Paper・News）の見出しは、v4 の pointer-events:none で押せなかった（全版の不具合）。v6 では押せるように */
:root .m-nav .fg.noacc a.fg-t:not(.is-locked,.is-locked-quiet){pointer-events:auto}
:root .m-nav .fg.noacc a.fg-t:hover{color:var(--text-1)}   /* 下の層の a.fg-t:hover{color:var(--g1)} を打ち消す（押せるようにしたので、今いるページも赤くなり、タッチでは赤が残っていた）。赤は下の @media(hover:hover) の中だけ（決裁 I-66） */
@media(hover:hover){
  /* 輪郭のボタン（〜 →）: 文字と矢印 */
  :root .btn-line:not(.is-locked,.is-locked-quiet):hover{color:var(--brand-text-strong)}
  /* 黒いボタン（すべてのニュース・すべてのホワイトペーパー）は塗りの面: 文字は白のまま。面は「すべてのニュース」と同じに */
  :root :is(#news,#whitepaper .v6-wp-all) .btn-line:hover{color:var(--text-inverse)}
  :root #whitepaper .v6-wp-all .btn-line:hover{background:var(--cta-bg-hover)}
  /* カードは題だけ（ホワイトペーパーは白い面、ニュースはホバーでガラスが濃くなる） */
  :root a.wp-card:not(.is-locked,.is-locked-quiet):hover .wp-t{color:var(--brand-text)}
  :root a.news-bar:not(.is-locked,.is-locked-quiet):hover .n-t{color:var(--brand-text-strong)}
  /* メガメニューの第二階層のタイル: 写真の上の白いラベルの名前（準備中は span なので対象外） */
  :root .header a.mg-tile:not([aria-current="page"],.is-locked,.is-locked-quiet):hover .tk{color:var(--on-photo-text-hover)}
  /* SP メニューのツリーとまとまりの見出し（暗い面） */
  :root .m-nav .v6-tree a:not(.is-soon,.is-current,.is-locked,.is-locked-quiet):hover,
  :root .m-nav .fg.noacc a.fg-t:not([aria-current="page"],.is-locked,.is-locked-quiet):hover{color:var(--brand-text)}   /* 見出しで赤くなるのはリンクの見出しだけ（開閉の見出しは ＋ のボタンが押す場所） */
  /* 親のページ（記事・LP のときの祖先）へのリンクも赤く（太字の印はそのまま）。今いるページは赤くしない */
  :root .v6-fnav .fg-c a.is-ancestor:where(:not(.is-locked,.is-locked-quiet)):hover{color:var(--brand-text)}
  :root .header .v6-mg-kids a.is-ancestor:where(:not(.is-locked,.is-locked-quiet)):hover{color:var(--brand-text-strong)}
}
/* J Claw Academy: ホバーの赤い面の上の文字は白（X Company・X Concierge・サービス詳細では下の層の規則で黒のまま＝3.45 だった） */
:root .hd-box.hd-acad:hover{color:var(--on-brand)!important}
/* ---------- I-32 Pack Market の小節の見出し（2 行）とリード（4 行）の改行位置: 1280px 以上だけ切る ---------- */
@media(min-width:1280px){
  :root .pkw-old .pk-intro .v6-br{display:block}
  :root .pkw-old .pk-intro .ed-lead{max-width:none}
  :root .pkw-old .pk-intro .ed-lead .v5-h3{max-width:none; text-wrap:initial; word-break:normal}
}

/* ---------- I-27 テキストスタイル: 下の層（top.css・top-v5.css・top-plus.css）の文字を段に当てる ----------
   :is() の指定の強さは中で最も強い引数になるので、元の規則と同じ強さで 1 つずつ書く */
:root #ch0 .jp{font-size:var(--t-h4)}                                   /* ヒーローの和文の添え＝h4 */
:root #ch0 .sub{font-size:var(--t-lead)}                                /* ヒーローの説明＝lead */
:root :is(#ch1,#ch2) h2{font-size:var(--t-h1); line-height:1.25}         /* ヒーローの章＝h1 */
:root .pkt-t{font-size:var(--t-h3); line-height:1.35}                   /* Pack ツアーの手順の名前＝h3（top-plus.css の 44px をやめる） */
:root .pkw-old .v5-h3{font-size:var(--t-h3); line-height:1.35; margin-bottom:16px}   /* Pack Market の小節の見出し＝h3（24px は弱すぎた） */
:root .jc-body p{font-size:var(--t-body)}
:root .pkt-d{font-size:var(--t-body)}
:root .pkw-old .pk-intro .ed-lead{font-size:var(--t-body)}
:root .pk-card .pd{font-size:var(--t-body)}
:root .oi-card p{font-size:var(--t-body)}
:root .oi-card .ol{font-size:var(--t-body)}
:root .wp-t{font-size:var(--t-h5)}                                      /* ホワイトペーパーのカード＝h5（特集は --v5-h3＝h4） */
:root .news-bar .n-t{font-size:var(--t-body); font-weight:600}          /* ニュースの見出し＝本文の太字 */
:root #news .btn-line{font-size:var(--t-small)}
:root .news-bar .n-cir{font-size:var(--t-small)}                        /* 丸い矢印の記号も small に */

/* ---------- I-31 の点検（2026-09-28。h3 32→40・h6 16→20 のあとで TOP を 1920〜390 の各幅で測り直した） ----------
   段が上がっても見出しの行数・はみ出し・横スクロールは増えていない（Pack Market の小節の見出し 2 行・リード 4 行＝I-32 も 1280px 以上で保たれる）。
   ここで直すのは、大きくなった見出しの周りの間合いと、同じ Pack Market の中で前から折れていたカードの名前 */
/* Pack Market の小節の見出し: 見出しが 32→40 になった分、下のリードとの間を見出しの大きさに比例させる（1440 幅 20px、390 幅は今までどおり 16px） */
:root .pkw-old .v5-h3{margin-bottom:max(16px, .5em)}
/* その下のリード: v5 の「長い段落は通常の折り返し」（top-v5.css の .pkw-old .pk-intro .ed-lead{word-break:normal}）が、
   :is(.ed-lead,…,#ch1 .jp,…) の文節改行（:is() の強さは中の #ch1 で ID 1 つ分）に負けていた（I-31 の前から）。そのため 390 幅で「判断ルール・AIスキルが」の
   短い行が出る・768〜1279px で最後に「使い始められます。」だけの行が残る。ID を足して通常の折り返しに戻す（1280px 以上は I-32 の改行で 4 行のまま） */
:root #packs .pkw-old .pk-intro .ed-lead{word-break:normal}
/* Pack Market のカードの名前: 右上の画像の分の余白（170px）が大きく、1100px 以下で「社内 / Pack / Market」「Pack / Market」と折れていた（I-31 の前から。h4）。
   名前は 1 行に保ち、「構想中」は入りきらなければ次の行へ。画像は幅に合わせて小さくする */
:root .pk-card .pt{flex-wrap:wrap; row-gap:6px; align-content:flex-start}
@media(max-width:1100px){
  :root .pk-card .pk-im{width:112px}
  :root .pk-card .pt{padding-right:124px}
}
@media(max-width:900px){
  :root .pk-card .pk-im{width:96px}
  :root .pk-card .pt{padding-right:108px}
}

/* ---------- I-54 ホバーの文字を赤に: TOP だけの部品（共通の部品は「I-15〜I-19 下の層」の節の最後の I-54） ---------- */
:root :is(a.wp-dl,.oi-card a.ol){transition:color .2s}
@media(hover:hover){
  :root .pkt-tab:not([aria-selected="true"]):hover{color:var(--brand-text-strong)}                     /* Pack ツアーの手順（選んでいない手順。900px 以下の暗い帯では #FF6A57） */
  :root .v6-uc-a:hover{color:var(--brand-text-strong)}                                                 /* 特徴の「デモを見る ↗」（ガラス） */
  :root a.wp-dl:not(.is-locked,.is-locked-quiet):hover{color:var(--brand-text)}                        /* ホワイトペーパーの「DL →」 */
  :root .oi-card a.ol:not(.is-locked,.is-locked-quiet):hover{color:var(--brand-text)}                  /* 採用・パートナー募集の「応募について →」（暗い面なので #FF1500） */
}
/* 決裁 I-62 の追記: Pack Market のカードの名前（「Pack／Market」と 320・360 幅で折れていた）を v6 だけ折らない。v4〜v5+ の .pt は折り返さない flex なので、&nbsp; にすると「構想中」の札が画像の下に押し出される → 無装飾の span.v6-nw にして v6 だけ nowrap */
:root .pk-card .pt .v6-nw{white-space:nowrap}