/* BRIDGE subpage shared CSS — v1.1 / 2026-07-24
 * Used by: medboard / hire-board / consult-simulator / him-quiz / study-board /
 *          english-trainer / rehaboard / interview-kit / starter-kits
 * hub.css はこのファイルのトークンに依存する(自前の :root を持たない)。
 * 配色は憲法第22条の4系統(生成り・藍・砂・炭)のみ。砂は「選択の瞬間」だけに使う。
 */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:light;
  /* 生成り — 基調。面の明度スケール */
  --paper:#FBFAF7;--paper-2:#F4EFE6;--paper-3:#EAE2D3;
  /* カード面 — 頁の地から分離した「板」。canon --card と同値 */
  --card:#FFFFFF;
  /* 炭 — 文字 */
  --ink:#1B1B1E;--ink-2:#45464C;--ink-3:#63646B;--ink-4:#B6B3AB;
  --line:rgba(27,27,30,0.08);
  /* ベタ塗り(--ink/--navy/--dawn-deep)の上に乗る文字 */
  --on-fill:#FBFAF7;
  /* 両テーマとも暗いままの面と、その上の文字 */
  --ink-solid:#1B1B1E;--on-solid:#FBFAF7;
  --grain-blend:multiply;--grain-opacity:0.025;
  /* 藍 — 骨格。意味の強弱はこの1本のスケールで表す */
  --navy:#16233E;--blue:#24365C;--blue-soft:#8B9BBC;
  /* 砂 — 温度。「選択の瞬間」にだけ使う(選択・現在地・到達・句点)。
   * --dawn は面・線・句点(装飾)用。文字に使うと生成りの上で2.96:1でAA未達。
   * --dawn-deep は「文字として使える砂」(--paper 5.11:1 / --paper-2 4.66:1)。
   * 同色相・同彩度で明度のみ操作しており、砂の系統から外れていない。
 * ※いずれもライトの値。ダークでは --dawn-deep は --dawn と同値(#C2A97E)で --paper 7.56:1 */
  --dawn:#A98F63;--dawn-deep:#7D6845;
  --serif-jp:'Shippori Mincho B1','Noto Serif JP',serif;
  --sans-jp:'Noto Sans JP',sans-serif;
  --serif-en:'Shippori Mincho B1','Noto Serif JP',serif;
  --sans-en:'Inter',sans-serif;
  --max:1180px;
  --pad-x:clamp(20px,5vw,80px);
  --shadow-1:0 1px 2px rgba(15,20,36,0.04),0 4px 12px rgba(15,20,36,0.05);
  --shadow-2:0 2px 8px rgba(15,20,36,0.06),0 16px 40px rgba(15,20,36,0.10);
}
/* ダーク — 2ブロックは同値を保つこと(片方だけ直さない)。
 * 生成りスケールは奥行き(明るい方が手前)を保つため canon の値を順序を変えて借りている。
 * --line は canon の0.10ではなく0.12(subpage は構造を罫線で持たせており細線が食われるため。意図的乖離) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#161B2B;--paper-2:#111521;--paper-3:#0B0F1A;--card:#1D2436;
    --ink:#EDEAE2;--ink-2:#C2BFB6;--ink-3:#8A8D98;--ink-4:#565A68;
    --line:rgba(237,234,226,0.12);
    --navy:#D8DEEB;--blue:#9FB1D4;--blue-soft:#5A6C92;
    --dawn:#C2A97E;--dawn-deep:#C2A97E;
    --on-fill:#111521;--ink-solid:#0B0F1A;--on-solid:#EDEAE2;
    --grain-blend:screen;--grain-opacity:0.035;
    --shadow-1:0 1px 2px rgba(0,0,0,0.20),0 4px 12px rgba(0,0,0,0.26);
    --shadow-2:0 2px 8px rgba(0,0,0,0.25),0 16px 40px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#161B2B;--paper-2:#111521;--paper-3:#0B0F1A;--card:#1D2436;
  --ink:#EDEAE2;--ink-2:#C2BFB6;--ink-3:#8A8D98;--ink-4:#565A68;
  --line:rgba(237,234,226,0.12);
  --navy:#D8DEEB;--blue:#9FB1D4;--blue-soft:#5A6C92;
  --dawn:#C2A97E;--dawn-deep:#C2A97E;
  --on-fill:#111521;--ink-solid:#0B0F1A;--on-solid:#EDEAE2;
  --grain-blend:screen;--grain-opacity:0.035;
  --shadow-1:0 1px 2px rgba(0,0,0,0.20),0 4px 12px rgba(0,0,0,0.26);
  --shadow-2:0 2px 8px rgba(0,0,0,0.25),0 16px 40px rgba(0,0,0,0.35);
}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:var(--sans-jp);background:var(--paper);color:var(--ink);overflow-x:hidden;line-height:1.85;font-feature-settings:"palt" 1}
h1,h2,h3,.hero-h{text-wrap:balance;word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
p{text-wrap:pretty;word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
.nowrap{white-space:nowrap}
.br-pc{display:none}
@media(min-width:720px){.br-pc{display:inline}}
.br-sp{display:inline}
@media(min-width:720px){.br-sp{display:none}}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:200;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");mix-blend-mode:var(--grain-blend)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
/* 砂: テキストを選んでいる瞬間 */
::selection{background:var(--dawn);color:var(--ink-solid)}

.eyebrow{font:800 10px/1 var(--sans-en);letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3)}
.kicker{display:inline-flex;align-items:center;gap:8px}
.kicker::before{content:'';width:18px;height:1px;background:var(--ink-3)}
.em{color:var(--navy);font-family:var(--serif-en);font-style:normal;font-weight:700}

/* progress bar */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--navy);z-index:200;transition:width .1s linear;width:0;box-shadow:0 0 8px color-mix(in srgb,var(--navy) 35%,transparent)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad-x);transition:all .3s;background:transparent}
.nav.scrolled{background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:12px var(--pad-x)}
.nav-logo{font:700 14px/1 var(--serif-en);letter-spacing:0.2em;color:var(--ink)}
/* 砂: 署名としての句点 */
.nav-logo .dot{color:var(--dawn)}
.nav-logo .small{font:500 9px/1 var(--sans-en);letter-spacing:0.16em;color:var(--ink-3);margin-left:8px;text-transform:uppercase}
.nav-actions{display:flex;gap:10px;align-items:center}
.nav-actions a{font:600 11px/1 var(--sans-jp);letter-spacing:0.04em;padding:9px 14px;border-radius:2px;transition:all .15s}
.nav-actions a.back{color:var(--ink-3)}
.nav-actions a.back:hover{color:var(--ink)}
.nav-actions a.cta{background:var(--ink);color:var(--on-fill)}
.nav-actions a.cta:hover{background:var(--navy)}
/* モバイル: 製品名はheroが名乗るためロゴ側を畳み、CTAは1行を保つ。
 * さらに狭い画面では文字を潰さず行ごと折り返す */
@media(max-width:640px){
  .nav{flex-wrap:wrap;row-gap:8px;padding:14px var(--pad-x)}
  .nav.scrolled{padding:10px var(--pad-x)}
  .nav-logo .small{display:none}
  .nav-actions{gap:6px}
  .nav-actions a{white-space:nowrap;padding:9px 10px;position:relative}
  /* 見た目29px高のまま、タップ領域だけ縦に44px超へ(round-note .row-check前例) */
  .nav-actions a::before{content:'';position:absolute;inset:-8px 0}
}
/* 320〜360px: emの一息が入りきらないときだけ、文節で折ることを許す(折れ位置はBudouXが決める) */
@media(max-width:360px){.s-head h2 .em.nowrap{white-space:normal}}

/* hero */
.hero{padding:160px var(--pad-x) 100px;position:relative;background:var(--paper);text-align:left;border-bottom:1px solid var(--line)}
.hero-inner{max-width:var(--max);margin:0 auto}
.hero-eyebrow{font:700 11px/1 var(--sans-en);letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:24px}
.hero-h{font:700 clamp(32px,5.4vw,64px)/1.18 var(--serif-jp);letter-spacing:-0.02em;color:var(--ink);max-width:880px;margin-bottom:28px}
.hero-h .em{font-family:var(--serif-en);font-style:normal;color:var(--navy)}
.hero-sub{font:500 16px/1.95 var(--sans-jp);color:var(--ink-2);max-width:680px;margin-bottom:36px}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px;font:500 11px/1 var(--sans-en);letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3)}
.hero-meta span::before{content:'·';margin-right:18px;color:var(--ink-4)}
.hero-meta span:first-child::before{display:none}

/* sections */
section{padding:120px var(--pad-x);position:relative}
section.alt{background:var(--paper-2)}
.s-inner{max-width:var(--max);margin:0 auto}
.s-head{margin-bottom:60px;max-width:780px}
.s-head h2{font:700 clamp(26px,4vw,44px)/1.3 var(--serif-jp);letter-spacing:-0.02em;color:var(--ink);margin-top:14px}
.s-head h2 .em{font-family:var(--serif-en);font-style:normal;color:var(--navy)}
.s-head p{font:500 14px/1.95 var(--sans-jp);color:var(--ink-2);margin-top:16px;max-width:640px}

/* problems */
.problems{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.problems{grid-template-columns:1fr}}
.problem-item{background:var(--card);padding:36px 32px;display:flex;gap:22px}
.problem-num{font:700 28px/1 var(--serif-en);font-style:normal;color:var(--navy);flex-shrink:0;width:46px}
.problem-content h3{font:700 16px/1.45 var(--serif-jp);color:var(--ink);margin-bottom:10px;letter-spacing:-0.01em}
.problem-content p{font:500 12.5px/1.85 var(--sans-jp);color:var(--ink-2)}

/* before/after — 対比は面の明度(生成り)と枠の有無(藍)で表す */
.ba-grid{display:grid;grid-template-columns:1fr 60px 1fr;gap:0;align-items:stretch}
@media(max-width:880px){.ba-grid{grid-template-columns:1fr;gap:14px}.ba-arrow{transform:rotate(90deg);height:60px}}
.ba-col{background:var(--card);border:1px solid var(--line);padding:32px;border-radius:2px}
.ba-col.before{background:var(--paper-3)}
.ba-col.after{background:var(--card);border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.ba-tag{font:800 10px/1 var(--sans-en);letter-spacing:0.18em;text-transform:uppercase;display:inline-block;padding:5px 10px;border-radius:2px;margin-bottom:16px}
.ba-col.before .ba-tag{background:var(--ink-3);color:var(--on-fill)}
.ba-col.after .ba-tag{background:var(--navy);color:var(--on-fill)}
.ba-col h3{font:700 18px/1.4 var(--serif-jp);color:var(--ink);margin-bottom:14px;letter-spacing:-0.01em}
.ba-col ul{list-style:none}
.ba-col li{font:500 12.5px/1.7 var(--sans-jp);color:var(--ink-2);padding:8px 0 8px 22px;position:relative;border-bottom:1px dashed var(--line)}
.ba-col li:last-child{border-bottom:0}
.ba-col li::before{position:absolute;left:0;top:10px;font:700 10px/1 var(--sans-en);letter-spacing:0;color:var(--ink-3)}
.ba-col.before li::before{content:'×';color:var(--ink-2);font-size:14px;top:8px}
.ba-col.after li::before{content:'○';color:var(--navy);font-size:13px;top:8px}
.ba-arrow{display:flex;align-items:center;justify-content:center}
.ba-arrow svg{width:36px;height:36px;color:var(--ink-3)}

/* mock */
.mock-wrap{background:var(--card);border:1px solid var(--line);padding:0;border-radius:4px;overflow:hidden;box-shadow:var(--shadow-2);margin-top:24px}
.mock-bar{background:var(--paper-3);padding:8px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--ink-4);display:inline-block}
.mock-title{font:600 11px/1 var(--sans-jp);color:var(--ink-3);margin-left:auto}
.mock-content{padding:30px;background:var(--card)}

/* CTA shared */
.buy{background:var(--paper-2);padding:120px var(--pad-x);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-h{font:700 clamp(24px,3.6vw,40px)/1.3 var(--serif-jp);color:var(--ink);margin-bottom:14px;letter-spacing:-0.02em}
.buy-btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 22px;font:700 13px/1 var(--sans-jp);letter-spacing:0.06em;border-radius:2px;transition:all .18s;border:1px solid transparent}
.buy-btn.primary{background:var(--ink);color:var(--on-fill)}
.buy-btn.primary:hover{background:var(--navy)}
.buy-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.buy-btn.ghost:hover{border-color:var(--ink)}
.cta-actions-c{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.buy-note{font:500 11px/1.7 var(--sans-jp);color:var(--ink-3);max-width:780px;margin:0 auto;text-align:center}

/* founder */
.founder{padding:120px var(--pad-x);background:var(--paper)}
.founder-inner{max-width:760px;margin:0 auto}
.founder-quote{font:500 18px/2 var(--serif-jp);color:var(--ink-2);padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0}
.founder-quote::before{content:'\201C';font:700 64px/0.7 var(--serif-en);color:var(--ink-4);font-style:normal;display:block;margin-bottom:14px}
.founder-meta{font:600 11px/1.7 var(--sans-jp);color:var(--ink-3);letter-spacing:0.04em}
.founder-meta strong{display:block;font:700 14px/1.5 var(--serif-jp);color:var(--ink);margin-bottom:6px;font-style:normal}

/* footer — 両テーマとも暗い帯(--ink-solid)。文字は --on-solid との color-mix で段階を出す */
.foot{padding:48px var(--pad-x);background:var(--ink-solid);color:color-mix(in srgb,var(--on-solid) 72%,var(--ink-solid));text-align:center;border-top:1px solid var(--line)}
.foot a{color:color-mix(in srgb,var(--on-solid) 88%,var(--ink-solid))}
.foot-brand{font:700 13px/1 var(--serif-en);letter-spacing:0.2em;color:var(--on-solid);margin-bottom:12px}
/* 砂: 署名としての句点 */
.foot-brand .dot{color:var(--dawn)}
.foot-tag{font:500 11px/1.7 var(--sans-jp);color:color-mix(in srgb,var(--on-solid) 58%,var(--ink-solid));margin-bottom:18px}
.foot-links{display:flex;gap:18px;justify-content:center;font:600 11px/1 var(--sans-en);letter-spacing:0.12em;text-transform:uppercase}
/* 著作権表記。旧実装は各ページの inline style に color:rgba(255,255,255,0.4) を
 * 直書きしており、藍地で3.59:1(AA未達)かつトークン非経由でダークから到達できなかった */
.foot-copy{margin-top:24px;font:500 10px/1.5 var(--sans-jp);color:color-mix(in srgb,var(--on-solid) 52%,var(--ink-solid))}

/* 「次はどこへ歩く?」— 各ページ末尾の3分岐(第26条・ia.md「行き止まりなし」)。
 * bridge.css の .walk をトークン適応して移植:
 *   --mincho→--serif-jp / --en→--sans-en / --sec-y→120px 固定。
 *   角丸2px・面は --card。2026-07-27のダークスプリントで bridge.css 側と同値に揃えた。
 *   .p は --ink-2。11.5px の補助文には一段濃い方が読みやすいという判断であって、
 *   --ink-3 を避けているのではない(--ink-3 は #63646B へ改訂、生成り3段すべてAA合格:
 *   --paper 5.64 / --paper-2 5.14 / --paper-3 4.58)。
 * 砂: .en ラベルは「分岐点」の印(第22条の明示例) */
.walk{padding:120px var(--pad-x);border-top:1px solid var(--line);background:var(--paper)}
.walk-inner{max-width:var(--max);margin:0 auto}
.walk-h{font-family:var(--serif-jp);font-weight:600;font-size:clamp(19px,2.6vw,26px);line-height:1.7;color:var(--ink);margin:18px 0 34px}
.walk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.walk-grid{grid-template-columns:1fr}}
.walk-card{border:1px solid var(--line);border-radius:2px;padding:24px;transition:transform .3s cubic-bezier(0.16,1,0.3,1),border-color .3s cubic-bezier(0.16,1,0.3,1);background:var(--card);display:block}
.walk-card:hover{transform:translateY(-3px);border-color:var(--blue-soft)}
.walk-card .en{font:600 9px/1 var(--sans-en);letter-spacing:0.2em;text-transform:uppercase;color:var(--dawn-deep);display:block;margin-bottom:10px}
.walk-card .t{font-family:var(--serif-jp);font-weight:600;font-size:16px;margin-bottom:6px;color:var(--ink);display:block}
.walk-card .p{font-size:11.5px;color:var(--ink-2);line-height:1.9;margin:0}
/* 砂: 分岐点の印(第22条・第24条)。本体 bridge.css の .eyebrow::before と同じ読み。
 * subpage の .eyebrow は ::before を持たないため walk スコープで補う */
.walk .eyebrow{display:inline-flex;align-items:center;gap:10px}
.walk .eyebrow::before{content:'';width:18px;height:1px;background:var(--dawn);flex-shrink:0}
/* 第29条「何もしなくても十分」の一行。三択の後に置く(先に言うと三択が値引きされて見える)。
 * 思想の言葉なので明朝(第23条)。600の見出しに対する400で静けさを出す(サイズで縮めない)。
 * 文字色は --ink-2 で確定(designer照合 2026-07-27)。
 * 幅はフォント解決に依存する ch を避けて em で確定 */
.walk-note{max-width:34em;margin:34px 0 0;font:400 14px/2.1 var(--serif-jp);color:var(--ink-2)}

/* 写し(実物スクリーンショット) — 照合の錨(憲法第22条 写しの但し書き・ia.md 11節)。
 * mock-wrapに入れない(枠は「表現です」と言う装置で、写しの「実物です」を打ち消す) */
.shot{max-width:960px;margin:56px auto 0}
.shot img{width:100%;height:auto;border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow-1)}
.shot-cap{font:500 12px/1.85 var(--sans-jp);color:var(--ink-2);margin-top:10px;text-align:center}

/* 交差する二本の線(第24条)。inline の stroke 属性より CSS が勝つ。
 * 藍は地の明暗で反転させる — subpage の --navy はダークで #D8DEEB に反転済み。 */
.nav-logo .mark path:first-child{stroke:var(--navy)}
.nav-logo .mark path:last-child{stroke:var(--dawn)}
/* .foot は両テーマとも暗い帯。藍は常に淡い側を取る */
.foot-brand{display:inline-flex;align-items:center;gap:10px}
.foot-brand .mark{width:36px;height:16px;flex-shrink:0}
.foot-brand .mark path{fill:none;stroke-linecap:round}
.foot-brand .mark path:first-child{stroke:var(--blue-soft)}
.foot-brand .mark path:last-child{stroke:var(--dawn)}

/* reveal — JSが付与する html.js 配下でだけ隠す。JS無効環境では最初から見える */
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(0.2,0.7,0.2,1),transform .8s cubic-bezier(0.2,0.7,0.2,1)}
html.js [data-reveal].vis{opacity:1;transform:translateY(0)}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============ MedBoard 専用 ============ */
.six-fig{background:var(--card);border:1px solid var(--line);padding:40px 36px;border-radius:2px;margin-top:24px}
.six-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.six-grid{grid-template-columns:1fr}}
.six-item{background:var(--card);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.six-n{font:700 28px/1 var(--serif-en);font-style:normal;color:var(--navy)}
.six-h{font:700 14px/1.4 var(--serif-jp);color:var(--ink);letter-spacing:-0.01em}
.six-d{font:500 11.5px/1.7 var(--sans-jp);color:var(--ink-3)}
.six-foot{margin-top:24px;padding-top:20px;border-top:1px dashed var(--line);font:500 11.5px/1.85 var(--sans-jp);color:var(--ink-3)}

/* alert view — 段階は面の明度(生成り)と左罫の濃さ(藍→炭)で表す */
.alert-view{display:flex;flex-direction:column;gap:14px}
.alert-item{display:flex;gap:18px;padding:20px 22px;border-radius:2px;align-items:flex-start;border:1px solid var(--line);border-left-width:3px;border-left-style:solid}
.alert-item.warn{background:var(--paper-3);border-left-color:var(--navy)}
.alert-item.info{background:var(--paper-2);border-left-color:var(--blue)}
.alert-item.ok{background:var(--card);border-left-color:var(--ink-4)}
.alert-tag{font:800 10px/1 var(--sans-jp);letter-spacing:0.04em;padding:5px 10px;border-radius:2px;flex-shrink:0;color:var(--on-fill)}
.alert-item.warn .alert-tag{background:var(--navy)}
.alert-item.info .alert-tag{background:var(--blue)}
.alert-item.ok .alert-tag{background:var(--ink-4);color:var(--ink)}
.alert-body{font:500 12px/1.85 var(--sans-jp);color:var(--ink-2)}
.alert-body strong{color:var(--ink);font-weight:900} /* Noto Sans JPは800未読込。実描画の900を明示 */

/* compare table */
.cmp-table{width:100%;border-collapse:collapse;font:500 12px/1.5 var(--sans-jp)}
.cmp-table th{background:var(--paper-3);padding:12px 14px;text-align:left;font:700 10px/1 var(--sans-en);letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
.cmp-table th:not(:first-child){text-align:right}
.cmp-table td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.cmp-table td.num{font:600 12.5px/1 var(--serif-en);color:var(--navy);font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
/* 注目すべき数値は「太さ」で立てる。方向や理由は数値そのものが語る
 * (色だけに意味を持たせない。旧 delta-down / delta-up は色で方向を分けていたが、
 *  実際の用法はどちらも強調であり、名前が嘘をついていた) */
.cmp-table td.num.mark{font-weight:700}
.cmp-table tr.hl{background:var(--paper-2)}
.cmp-note{font:500 11px/1.7 var(--sans-jp);color:var(--ink-3);margin-top:18px}

/* philosophy */
.phil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media(max-width:760px){.phil-grid{grid-template-columns:1fr}}
.phil-card{background:var(--card);border:1px solid var(--line);padding:30px 28px;border-radius:2px}
.phil-card h3{font:700 16px/1.4 var(--serif-jp);color:var(--ink);margin-bottom:14px;letter-spacing:-0.01em}
.phil-card h3::before{content:'';display:block;width:24px;height:2px;background:var(--navy);margin-bottom:12px}
.phil-card p{font:500 12px/1.85 var(--sans-jp);color:var(--ink-2)}

/* ============ HireBoard / ConsultSim 共通の追加 ============ */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:24px}
@media(max-width:760px){.feat-grid{grid-template-columns:1fr}}
.feat-item{background:var(--card);padding:32px 28px}
.feat-h{font:700 16px/1.4 var(--serif-jp);color:var(--ink);margin-bottom:10px}
.feat-h .ic{display:inline-block;width:28px;height:28px;border-radius:50%;background:var(--paper-2);font:800 11px/28px var(--sans-en);text-align:center;color:var(--navy);margin-right:10px;letter-spacing:0;vertical-align:middle}
.feat-d{font:500 12px/1.8 var(--sans-jp);color:var(--ink-2)}

/* kanban mock for HireBoard */
.kanban-mock{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;font:500 11px/1.5 var(--sans-jp)}
@media(max-width:760px){.kanban-mock{grid-template-columns:repeat(2,1fr)}}
.kanban-col{background:var(--paper-2);padding:14px;border-radius:2px;min-height:200px}
.kanban-col-h{font:800 10px/1 var(--sans-en);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px;display:flex;justify-content:space-between}
.kanban-card{background:var(--card);border:1px solid var(--line);padding:10px 12px;margin-bottom:8px;border-radius:2px;font-size:11px}
.kanban-card .role{font:700 10px/1.3 var(--sans-jp);color:var(--ink);margin-bottom:4px}
.kanban-card .ag{font:600 9px/1 var(--sans-en);color:var(--ink-3);letter-spacing:0.06em}

/* schedule mock for ConsultSim — 混雑の段階は生成りの明度1本で表す */
.sched-mock{font:500 11px/1.4 var(--sans-jp)}
.sched-table{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.sched-table th,.sched-table td{padding:10px;text-align:center;border:1px solid var(--line);font-size:11px}
.sched-table th{background:var(--paper-3);font:700 10px/1 var(--sans-en);letter-spacing:0.1em;color:var(--ink-3);text-transform:uppercase}
.sched-table td.busy{background:var(--paper-3);color:var(--navy);font-weight:900} /* 同上: 800→実描画の900 */
.sched-table td.med{background:var(--paper-2);color:var(--blue);font-weight:700}
.sched-table td.calm{background:var(--card);color:var(--ink-2)}
.sched-leg{display:flex;gap:14px;margin-top:14px;font:600 10px/1 var(--sans-en);letter-spacing:0.08em;color:var(--ink-3);text-transform:uppercase}
.sched-leg span{display:inline-flex;align-items:center;gap:6px}
.sched-leg span::before{content:'';display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid var(--ink-4)}
.sched-leg .l-busy::before{background:var(--paper-3)}
.sched-leg .l-med::before{background:var(--paper-2)}
.sched-leg .l-calm::before{background:var(--card)}

/* HIM Quiz / StudyBoard / English: 学習系 */
.lrn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
@media(max-width:760px){.lrn-grid{grid-template-columns:1fr}}
.lrn-card{background:var(--card);border:1px solid var(--line);padding:32px 30px;border-radius:2px;display:flex;flex-direction:column;gap:14px}
.lrn-card .num{font:700 28px/1 var(--serif-en);font-style:normal;color:var(--navy)}
.lrn-card h3{font:700 16px/1.45 var(--serif-jp);color:var(--ink);letter-spacing:-0.01em}
.lrn-card p{font:500 12px/1.85 var(--sans-jp);color:var(--ink-2)}
/* 科目の識別は色相を増やさず、藍→炭の明度1本スケールで表す */
.lrn-card.t-1{border-top:3px solid var(--navy)}
.lrn-card.t-2{border-top:3px solid var(--blue)}
.lrn-card.t-3{border-top:3px solid var(--blue-soft)}
.lrn-card.t-4{border-top:3px solid var(--ink-4)}
.lrn-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
@media(max-width:760px){.lrn-stat{grid-template-columns:1fr}}
.lrn-stat-cell{background:var(--card);border:1px solid var(--line);padding:24px 22px;text-align:center}
.lrn-stat-cell .label{font:700 9px/1 var(--sans-en);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.lrn-stat-cell .num{font:700 28px/1 var(--serif-en);color:var(--navy);font-style:normal}
.lrn-stat-cell .sub{font:500 10px/1.4 var(--sans-jp);color:var(--ink-3);margin-top:6px}

/* v2 rebrand: ロゴシンボル */
.nav-logo{display:inline-flex;align-items:center;gap:10px}
.nav-logo .mark{width:36px;height:16px;flex-shrink:0}
.nav-logo .mark path{fill:none;stroke-linecap:round}