/* =====================================================================================
   J Claw Studio 下層 — デザイン v6 の層（決裁 I-28・2026-09-27「v6 で進行するのが決定」）
   各ページの CSS（v4＝今の公開版）の上に重ねる。ページ独自の v6 は css/<page>-v6.css（決裁 I-29: About・Packs・
   Products 配下・Recruit は量産の型ではなく、それぞれ独自に）。?design=v4 で外れる（head の切替スクリプト）。
   規則は TOP の v6 と同じ:
     ・色は役割の名前（直値は :root の宣言だけ。build/_meta/check_colors.py）
     ・文字は 11 段（display・h1〜h6・lead・body・small・caption。build/_meta/check_type.py）
     ・グラデーションは 4 か所だけ（ロゴ・TOP のヒーローの強調語・J Claw の声明・フッターの大きなロゴ）
     ・v4 の動き・インタラクションはすべて残す（build/_meta/check_motion.py）。版で文言を外さない（ラベルも消さずにピルにする）
   下の <v6-shared> は TOP の top-v6.css から build/_meta/sync_v6_shared.py で写した共通部分（手で直さない）
   ===================================================================================== */

/* <v6-shared> TOP の top-v6.css から sync_v6_shared.py で写した部分。ここは手で直さない */
/* ---------- 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-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}
}
/* </v6-shared> */

/* ---------- 下層の地と余白（Apple の製品ページのように、セクションの間を広く取る） ---------- */
:root body.subpage{background:var(--surface-0); color:var(--text-1)}
:root .header:not(.on-light){color:var(--text-1)}   /* 暗いヘッダー（GL 帯・暗い面の上）の文字は暗い面の --text-1（白）。body の紺を継いでいた */
:root .sub-hero{padding:clamp(112px,10vw,152px) 0 clamp(56px,6vw,96px)}
:root .sub-sec{padding:clamp(80px,8.4vw,128px) 0}
:root .sub-sec+.sub-sec{border-top:1px solid var(--line)}

/* ---------- パンくず・ページの見出し（h1）・リード ---------- */
:root .crumb{font-family:var(--font); font-size:var(--t-caption); letter-spacing:.02em; color:var(--text-3)}
:root .crumb a{color:var(--text-2)}
:root .crumb a:hover{color:var(--text-2)}   /* タッチ（hover:none）では下の層の .crumb a:hover{color:var(--g1)} を打ち消す（決裁 I-66） */
@media(hover:hover){:root .crumb a:where(:not(.is-locked,.is-locked-quiet)):hover{color:var(--brand-text)}}   /* v4 は #FF1500（白の上で 3.9） */
:root .crumb b{font-weight:600; color:var(--text-1)}
:root :is(.kv-sub,.sub-h1){font-family:var(--disp); font-weight:800; font-size:var(--t-h1); line-height:1.2; letter-spacing:0; color:var(--text-1);
  font-feature-settings:"palt" 1; word-break:auto-phrase; text-wrap:balance; line-break:strict}
:root .sub-lead{font-size:var(--t-lead); line-height:1.8; letter-spacing:.02em; color:var(--text-2); max-width:40em; margin-top:24px;
  word-break:auto-phrase; text-wrap:pretty; text-spacing-trim:trim-start}
:root .sub-ctas{margin-top:40px}

/* ---------- 何のセクションかのピル（英字のラベルも文言なので消さずにピルに。TOP のピルと同じガラスの作り） ---------- */
:root .idx{display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:0; box-sizing:border-box; margin:0 0 24px; padding:5px 14px 6px;
  border:1px solid var(--glass-line); border-radius:8px; background:var(--fill); box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  font-family:var(--disp); font-weight:800; font-size:var(--t-h6); line-height:1.5; letter-spacing:.02em; color:var(--text-1); text-transform:none;
  font-feature-settings:"palt" 1}   /* TOP のピル（I-8）と同じ書体・太さ・字間 */
:root .idx::before{content:none}                            /* グラデーションの短線は 4 か所の外なので出さない（I-19） */

/* ---------- セクション見出し（h2）・リード ---------- */
:root .ed-title{font-family:var(--disp); font-weight:800; font-size:var(--t-h2); line-height:1.25; letter-spacing:0; color:var(--text-1);
  font-feature-settings:"palt" 1; word-break:auto-phrase; text-wrap:balance; line-break:strict}
:root .idx+.ed-title{margin-top:0 !important}               /* ページの style 属性の margin-top:12px より、ピルの下 0 で揃える */
:root .ed-lead{font-size:var(--t-lead); line-height:1.8; letter-spacing:.02em; color:var(--text-2)}
:root .mincho{font-family:inherit; font-style:normal}

/* ---------- 行組み（ラベル＋説明の行） ---------- */
:root .core-rows{margin-top:48px; border-top:1px solid var(--line)}
:root .core-row{border-bottom:1px solid var(--line); padding:20px 0; gap:24px}
:root .core-row .k{font-family:var(--font); font-weight:700; font-size:var(--t-small); letter-spacing:.02em; color:var(--text-1)}
:root .core-row>span:not(.k){font-size:var(--t-body); line-height:1.75; color:var(--text-2)}

/* ---------- カード（仕組み・分類）: ヘッダーと同じガラスの作り ---------- */
:root .mech-grid{gap:16px; margin-top:48px}
:root .mech{border:1px solid var(--glass-line); border-radius:12px; background:var(--fill); box-shadow:var(--glass-sh); padding:28px}
:root .mech .mk2{display:block; font-family:var(--font); font-weight:700; font-size:var(--t-caption); letter-spacing:.04em; color:var(--text-2); margin-bottom:12px;
  background:none; -webkit-background-clip:border-box; background-clip:border-box}   /* v4 のグラデーションの字をやめる（I-19）。ガラスの面の上なので --text-2（--text-3 は 4.5 に届かない） */
:root .mech b{display:block; font-family:var(--disp); font-weight:800; font-size:var(--t-h5); line-height:1.5; color:var(--text-1)}
:root .mech p{font-size:var(--t-body); line-height:1.75; color:var(--text-2); margin-top:8px}

/* ---------- ボタン ---------- */
:root .btn{font-family:var(--font); font-weight:700; font-size:var(--t-small); border-radius:8px}
:root .btn-line{border:1px solid var(--glass-line); background:var(--fill); box-shadow:var(--glass-sh); color:var(--text-1)}
:root .btn-line:hover{background:var(--fill-hover); border-color:var(--glass-line-hover); color:var(--text-1)}

/* ---------- 注記・図の添え ---------- */
:root main .hd-box.hd-cv{height:auto; padding:11px 22px; font-size:var(--t-small); font-weight:700; line-height:inherit}   /* 本文の資料請求はヘッダーの箱と同じ 12px・44px だった → 隣の .btn（14px・48px）とそろえる */
:root .form-note{font-size:var(--t-caption); line-height:1.6; color:var(--text-3)}
:root .fig-cap{font-family:var(--font); font-size:var(--t-caption); letter-spacing:.02em; color:var(--text-3)}
:root :is(.cd,.slot){display:none}                          /* 画像の差し替え番号（制作用の記号。文言ではない） */
/* ---------- 小さなバッジ・透かし（段に当てる） ---------- */
:root :is(.req,.req2,.ok2,.mini-l){font-family:var(--font); font-size:var(--t-caption); letter-spacing:.02em}
:root .news-bar .n-cir{font-size:var(--t-small)}
:root .kv-wm{font-size:var(--t-h2)}                         /* ページの見出しの横の透かし文字 */

/* ---------- I-31（h3 40・h6 20）の手当て: ピルが 20 になって並びが崩れたところ ---------- */
/* 資料請求の送信後の面（contact の .thanks）: ピル 20 と見出し 24（v4 の直値）がほぼ同じ大きさで並び、見出しが立たなくなった。
   見出しを小節の段 h3（1440 幅 40・390 幅は今と同じ 24）に上げ、本文は 14 → 本文の段。ピルの下は .idx+.ed-title と同じく 0（style 属性の 10px に勝つ） */
:root .thanks .idx+h2{margin-top:0 !important}
:root .thanks h2{font-family:var(--disp); font-weight:800; font-size:var(--t-h3); line-height:1.3; letter-spacing:0; color:var(--text-1);
  font-feature-settings:"palt" 1; word-break:auto-phrase; text-wrap:balance; line-break:strict}
:root .thanks p{font-size:var(--t-body); line-height:1.8; color:var(--text-2); margin-top:16px; word-break:auto-phrase; text-wrap:pretty}
:root .thanks .nx{margin-top:32px}
/* 記事の「NEXT」（news-article）: ピルのすぐ下がボタンの列。ピルの下 24 ＋ボタンの列の上 40 で、ピルがボタンから離れて浮いていた → ピルの下 24 だけに */
:root .idx+.sub-ctas{margin-top:0}

/* ---------- I-38 プライバシーポリシー（運営会社のポリシーの要点）・I-39 フォームのプライバシーポリシーへのリンク ---------- */
/* I-53（2026-09-28）: 原文をそのまま（src/_data/privacy_assetcom.txt → build/_meta/apply_privacy_i53.py）。題・前文・1〜8・窓口・日付。文言は変えず組みだけ */
:root .pp-doc{max-width:880px}
:root .pp-title{margin:0; font-family:var(--disp); font-weight:800; font-size:var(--t-h3); line-height:1.2; letter-spacing:.02em; color:var(--text-1)}
:root .pp-lead{margin-top:24px; font-size:var(--t-body); line-height:1.9; color:var(--text-1)}
:root .pp-items{list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--line)}
:root .pp-items li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:0 16px; padding:20px 0; border-bottom:1px solid var(--line)}
:root .pp-n{font-family:var(--disp); font-weight:800; font-size:var(--t-body); line-height:1.9; color:var(--text-3)}
:root .pp-items p{margin:0; font-size:var(--t-body); line-height:1.9; color:var(--text-1)}
:root .pp-contact{margin-top:48px; padding:24px 28px; border-radius:12px; background:var(--surface-1)}
:root .pp-contact p{margin:0; font-size:var(--t-body); line-height:1.9; color:var(--text-2)}
:root .pp-contact .pp-contact-t{margin-bottom:8px; font-family:var(--disp); font-weight:800; font-size:var(--t-h5); line-height:1.5; color:var(--text-1)}
:root .pp-contact a,:root .pp-src a{color:var(--text-1); text-decoration:underline; text-underline-offset:3px}
@media(hover:hover){:root .pp-contact a:hover,:root .pp-src a:hover{color:var(--brand-text)}}   /* I-66（I-54 の直し）: マウスのある環境だけ */
:root .pp-dates{margin-top:24px; font-size:var(--t-small); line-height:1.9; color:var(--text-2)}
:root .pp-src{margin-top:16px; font-size:var(--t-small)}
@media(max-width:700px){
  :root .pp-items li{grid-template-columns:28px minmax(0,1fr); gap:0 10px}
  :root .pp-contact{padding:20px}
}
:root .core-row a{color:var(--text-1); text-decoration:underline; text-underline-offset:3px}
@media(hover:hover){:root .core-row a:where(:not(.is-locked,.is-locked-quiet)):hover{color:var(--brand-text)}}   /* I-66（I-54 の直し）: マウスのある環境だけ */
:root .form-privacy{margin:8px 0 16px; font-size:var(--t-small); line-height:1.6}
:root .form-privacy a{color:var(--text-1); text-decoration:underline; text-underline-offset:3px}
@media(hover:hover){:root .form-privacy a:hover{color:var(--brand-text)}}   /* I-66（I-54 の直し）: マウスのある環境だけ */

/* ---------- I-49 ホワイトペーパーのカード（White Paper の一覧と記事型の「ほかのホワイトペーパー」で共通。TOP の v6 のカードと同じ組み） ---------- */
:root .v6-wp-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:40px}
:root .v6-wp-cards .wp-card{position:relative; display:flex; flex-direction:column; gap:12px; min-height:0; padding:24px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-0); color:var(--text-1); text-decoration:none; transition:border-color .2s,transform .2s,box-shadow .2s}
:root .v6-wp-cards .wp-card:hover{border-color:var(--line-strong); box-shadow:var(--raised-sh)}
:root .v6-wp-cards .wp-card[hidden]{display:none}
:root .v6-wp-cards .wp-th{height:160px; aspect-ratio:auto; margin:0 0 4px;   /* I-50: 画像は 160px */  border-radius:8px; background-size:cover; background-position:center; background-color:var(--surface-1)}
:root .v6-wp-cards .wp-no{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; font-family:var(--font); font-size:var(--t-small); letter-spacing:.04em; color:var(--text-3)}
:root .v6-wp-cards .wp-badge{flex:none; padding:3px 9px; border:1px solid var(--line-strong); border-radius:4px; font-family:var(--font); font-size:var(--t-caption); line-height:1.5; letter-spacing:.04em; color:var(--text-2)}
:root .v6-wp-cards .wp-badge.ready{padding:0 0 0 40px; border:0; color:var(--text-1)}   /* 「PDFあり」は共通の I-52（丸い面＋アイコン） */
:root .v6-wp-cards .wp-t{flex:1; font-family:var(--disp); font-weight:800; font-size:var(--t-h5); line-height:1.5; color:var(--text-1); word-break:auto-phrase; text-wrap:pretty}
:root .v6-wp-cards .wp-dl{display:inline-flex; align-items:center; gap:8px; font-size:var(--t-small); font-weight:700; color:var(--text-1)}
:root .v6-wp-cards .wp-dl .ar{transition:transform .25s}
:root .v6-wp-cards .wp-card:hover .wp-dl .ar{transform:translateX(4px)}
/* 特集（WP-00）: 本文の幅いっぱいの暗いカード（.wp-card.featured は暗い面の一覧に入っている）。左にサムネイル・中に番号と題名・右にボタン */
:root .v6-wp-cards .wp-card.featured{grid-column:1 / -1; flex-direction:row; align-items:center; gap:32px; padding:28px; border-color:var(--line); background:var(--surface-0)}
:root .v6-wp-cards .wp-card.featured .wp-th{flex:none; width:240px; height:160px; aspect-ratio:auto; margin:0}
:root .v6-wp-cards .wp-card.featured .wp-fb{flex:1; min-width:0}
:root .v6-wp-cards .wp-card.featured .wp-t{margin-top:12px; font-size:var(--t-h4)}
:root .v6-wp-cards .wp-card.featured .btn{flex:none}
@media(max-width:1100px){:root .v6-wp-cards{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media(max-width:700px){
  :root .v6-wp-cards{grid-template-columns:minmax(0,1fr); gap:12px; margin-top:28px}
  :root .v6-wp-cards .wp-card.featured{flex-direction:column; align-items:stretch; gap:16px; padding:24px}
  :root .v6-wp-cards .wp-card.featured .wp-th{width:100%; height:160px}
  :root .v6-wp-cards .wp-card.featured .btn{align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){:root .v6-wp-cards .wp-card,:root .v6-wp-cards .wp-dl .ar{transition:none}}

/* ---------- I-54 ホバーの文字を赤に: 下層だけの部品（共通の部品は上の <v6-shared> の I-54） ---------- */
:root #open .cat a{transition:color .2s}
@media(hover:hover){
  :root .nf:not(.on):hover{color:var(--brand-text)}          /* ニュースの絞り込み（選んでいないもの。白い面） */
  :root #open .cat a:hover{color:var(--brand-text)}          /* デモの「OPEN DEMO ↗」 */
}