/* ============================================================ SIMONE AURA100 / ATLAS — v5 統合スタイルシート（Plan D 適用版） ------------------------------------------------------------ v5 = v4 の機能そのまま + SIMONE 支給の「Plan D」デザインシステム （2026-09-03 AURA_design_20260903 / v5/design/HANDOFF.md）。 DOM 構造・クラス名は v4 と同一。Plan D 側にセレクタがあるものは Plan D の規則をそのまま採用し、v4 で増えた部品（課題カード・実行プラン・ 優先順位マップ・ヒアリング・PDFボタン等）は Plan D のトークンで組み直した。 ■ Plan D の設計規範 書体 Jost（欧文・数字）＋ Noto Sans JP（和文）。ウェイトは 200/300/400/500 の4段のみ 地 グレージュ #EBE8E4。白は使わない（白箱は --raised #FAF9F8） 幾何 角丸ゼロ（丸ドットのみ例外）。影なし。罫はヘアライン 色 3つの軸を混ぜない。判定色は支給パッケージが指定した箇所（次元スコアの数字・項目スコア・ 出典の強さ・エラー表示）にだけ使い、それ以外に広げない（2026-09-04 山本さん指示） ① 判定（0–20点・0–100点の高低） … 日本の伝統色5段 --t-* 文字は必ず --t-*-deep（AA 4.5:1 以上）。無印は塗り専用 ② チャネル（自社Web / SNS / News）… 無彩の3階調 --c-* ③ 非判定のアフォーダンス … 金茶 --accent リンク・フォーカス・レーダー・進捗バー・強調罫 構成: 1. トークン（ライト／ダーク） 2. リセット・基本 3. レイアウト（3ペイン・折りたたみ） 4. 左サイドバー 5. ヘッダー・タブ 6. 共通部品 7. 診断結果タブ 8. 課題カードタブ 9. AURA100タブ 10. 出典タブ 11. 実行プラン（ATLAS統合）タブ 12. 進行中・エラー・モーダル 13. 右エージェントパネル 14. レスポンシブ 15. v5.1 追加（実行プラン=課題→施策・競合比較・対パネル） ルール: 修正の「層」を積まない。直すときは該当セクションを直接編集する。 変更したら index.html の ?v= を上げる。 ============================================================ */ /* ============================================================ 1. トークン ── LIGHT（既定） ============================================================ */ :root{ /* ---------- 地とインク ---------- */ --bg:#EBE8E4; /* グレージュの紙。simone.jp 実測 */ --surface:#F4F2F0; /* 1段明るい面（サイドバー・エージェント） */ --raised:#FAF9F8; /* さらに上の面（内容の器）。白は使わない */ --surface-2:#DDD9D5; /* 沈めた面（トラック等） */ --ink:#312C26; /* ink-900 対地 11.32:1 */ --ink2:#5C5247; /* ink-700 対地 6.25:1 */ --ink3:#948877; /* ink-400 対地 2.84:1（本文には使わない） */ --ink4:#796C5C; /* ink-500 対地 4.18:1（小さい補助文字の下限） */ --hair:rgba(49,44,38,.14); --hair2:rgba(49,44,38,.08); --track:rgba(49,44,38,.10); /* ---------- ① 判定色：日本の伝統色5段 ---------- */ /* -deep = 文字用 ／ 無印 = 塗り用 ／ -soft = 淡塗り */ --t-vh:#3F9FB5; --t-vh-deep:#134F5C; --t-vh-soft:#D5E9EB; /* 錆浅葱 17–20 / 非常に高い */ --t-h:#40A577; --t-h-deep:#146043; --t-h-soft:#D6EBDC; /* 松葉 13–16 / 高い */ --t-m:#DCA524; --t-m-deep:#6D5109; --t-m-soft:#F8E7C4; /* 芥子 9–12 / 中程度 */ --t-l:#E07C2E; --t-l-deep:#853C0C; --t-l-soft:#FAE1CA; /* 黄丹 5–8 / 低い */ --t-vl:#C24432; --t-vl-deep:#7E2318; --t-vl-soft:#FAD7D0; /* 弁柄 0–4 / 非常に低い */ /* 旧 --d1〜--d5 の互換（未使用。無彩） */ --d1:#312C26; --d2:#5C5247; --d3:#796C5C; --d4:#948877; --d5:#B9B1A6; /* ---------- ② チャネル：無彩の3階調 ---------- */ --c-web:#312C26; --c-sns:#948877; --c-news:#C3BCB1; /* ---------- ③ 非判定アクセント：金茶 ---------- */ --accent:#8C7853; --accent-soft:rgba(140,120,83,.14); --accent-ink:#6E5C3C; /* ---------- 書体 ---------- 順序が重要。Noto Sans JP を Jost の直後に置くと欧文字形を Noto が横取りするため、Helvetica Neue / Arial を中間に挟む。 */ --font:'Jost','Helvetica Neue',Arial,'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif; --font-num:'Jost','Helvetica Neue',Arial,sans-serif; /* ---------- ウェイト（4段のみ。600以上は使わない） ---------- */ --w-thin:200; --w-light:300; --w-reg:400; --w-emph:500; /* ---------- タイプスケール ---------- */ --fs-hero:76px; /* 総合スコア */ --fs-disp:44px; /* 空状態の見出し */ --fs-h1:30px; /* ブランド名 */ --fs-h2:23px; /* ステップ見出し */ --fs-h3:19px; /* 次元スコア */ --fs-lead:15px; /* リード文・看板 */ --fs-num:22px; /* 項目スコア・番号 */ --fs-body:12.5px; /* 本文 */ --fs-sm:11.5px; /* 小 */ --fs-cap:11px; /* キャプション */ --fs-micro:10px; /* 極小 */ --fs-nano:9px; /* ラベル・オールキャプス */ /* ---------- 字間 ---------- */ --ls-hero:-.045em; --ls-disp:-.03em; --ls-h1:-.01em; --ls-num:-.02em; --ls-body:.03em; --ls-cap:.06em; --ls-label:.2em; --ls-caps:.1em; /* ---------- 行送り ---------- */ --lh-body:1.95; --lh-tight:1.3; --lh-prose:2.05; /* ---------- スペーシング（4px基準） ---------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:30px; --sp-8:36px; --sp-9:44px; --sp-10:56px; --sp-11:72px; --sp-12:96px; /* ---------- 幾何 ---------- */ --radius:0; /* 角丸は 0px か真円のみ */ --bar-h:3px; /* バーではなく「寸法線」として引く */ --bar-h-thin:2px; /* 項目単位のチャネル比 */ /* ---------- レイアウト ---------- */ --sidew:240px; --agentw:392px; } /* ============================================================ 1b. トークン ── DARK 単に反転させず、地の温度を保つ。ライトの紙 #EBE8E4 をダークのインクに使う。 判定色は弁柄だけ地に沈むため +22% 明るく（3.28→4.73:1）。 ============================================================ */ :root[data-theme="dark"]{ --bg:#1A1714; --surface:#221E1A; --raised:#2A2521; --surface-2:#332E28; --ink:#EBE8E4; /* 対地 14.61:1 */ --ink2:#B3AA9C; /* 対地 7.77:1 */ --ink3:#857B6D; /* 対地 4.29:1 */ --ink4:#9C9284; --hair:rgba(235,232,228,.14); --hair2:rgba(235,232,228,.07); --track:rgba(235,232,228,.10); /* ダークでは vivid がそのまま文字として通る（5.4:1 以上） */ --t-vh:#3F9FB5; --t-vh-deep:#3F9FB5; --t-vh-soft:#283A3C; --t-h:#40A577; --t-h-deep:#40A577; --t-h-soft:#293C2E; --t-m:#DCA524; --t-m-deep:#DCA524; --t-m-soft:#4B3C1C; --t-l:#E07C2E; --t-l-deep:#E07C2E; --t-l-soft:#4C331E; --t-vl:#CF6D5F; --t-vl-deep:#CF6D5F; --t-vl-soft:#45261F; --d1:#EBE8E4; --d2:#C5BFB4; --d3:#9C958A; --d4:#756E65; --d5:#524C45; --c-web:#EBE8E4; --c-sns:#9C9995; --c-news:#615E5B; --accent:#988664; --accent-soft:rgba(152,134,100,.16); --accent-ink:#B8A47C; } /* ============================================================ 2. リセット・基本 ============================================================ */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font); font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body); font-weight:var(--w-reg); -webkit-font-smoothing:antialiased; /* これがないと / が Bold(700) に偽造され、ウェイト設計が崩れる */ font-synthesis:none; } button,input,textarea,select{font-family:inherit;letter-spacing:var(--ls-body)} button{cursor:pointer;border-radius:var(--radius)} /* 素の / は既定 700。上限 500 に丸めて階層を守る */ b,strong,th{font-weight:var(--w-emph)} a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--hair)} a:hover{border-bottom-color:currentColor} code{background:var(--hair2);padding:1px 5px;border-radius:var(--radius); font-size:var(--fs-cap);letter-spacing:0} :focus-visible{outline:1px solid var(--accent);outline-offset:3px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--hair)} ::-webkit-scrollbar-thumb:hover{background:var(--ink3)} ::-webkit-scrollbar-track{background:transparent} .eyebrow{font-size:var(--fs-nano);letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--ink3);font-weight:var(--w-reg)} .num{font-family:var(--font-num);font-variant-numeric:tabular-nums} .note{font-size:var(--fs-micro);color:var(--ink3);line-height:1.95; margin-top:var(--sp-4);letter-spacing:var(--ls-body);max-width:820px} /* ============================================================ 3. レイアウト grid-template-columns には transition をかけないこと（Chromium が minmax(0,1fr) を補間できず折りたたみが効かなくなる）。 ============================================================ */ .app{display:grid;grid-template-columns:var(--sidew) minmax(0,1fr) var(--agentw); height:100vh;overflow:hidden} .app.agent-collapsed{grid-template-columns:var(--sidew) minmax(0,1fr) 44px} .app.side-collapsed{grid-template-columns:44px minmax(0,1fr) var(--agentw)} .app.side-collapsed.agent-collapsed{grid-template-columns:44px minmax(0,1fr) 44px} .pane{overflow-y:auto;height:100vh} #main{padding:var(--sp-6) var(--sp-9) var(--sp-12)} #content{max-width:960px;margin:0 auto} /* ============================================================ 4. 左サイドバー ============================================================ */ #sidebar{background:var(--surface);border-right:1px solid var(--hair);padding:0} .sidehead{padding:var(--sp-6) var(--sp-5) var(--sp-5);border-bottom:1px solid var(--hair)} .brandmark{display:flex;align-items:center;gap:11px} .brandmark .mk{width:19px;height:19px;flex:0 0 19px} .brandmark b{font-size:13.5px;letter-spacing:.24em;font-weight:var(--w-reg)} .brandmark span{display:block;font-size:8.5px;color:var(--ink3);letter-spacing:.16em;margin-top:1px} .verrow{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-3)} .verpill{font-size:var(--fs-nano);letter-spacing:.16em;color:var(--ink3)} .sidetoggle{width:22px;height:22px;border:1px solid var(--hair);background:transparent; color:var(--ink3);font-size:var(--fs-cap);padding:0;transition:.16s} .sidetoggle:hover{border-color:var(--ink);color:var(--ink)} .sidebody{padding:var(--sp-5) var(--sp-4)} .btn-new{ width:100%;padding:var(--sp-3);border:1px solid var(--ink); background:var(--ink);color:var(--bg); font-weight:var(--w-reg);font-size:var(--fs-sm);letter-spacing:var(--ls-caps); transition:.18s; } .btn-new:hover{background:transparent;color:var(--ink)} .btn-new:disabled{opacity:.35;cursor:not-allowed} .seclabel{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3); margin:var(--sp-7) 2px var(--sp-3);text-transform:uppercase} .hist{list-style:none;padding:0;margin:0} .hist li{padding:var(--sp-3) 2px;cursor:pointer;border-bottom:1px solid var(--hair2);transition:.15s} .hist li:hover{padding-left:6px} .hist li.sel{padding-left:var(--sp-2);border-left:1px solid var(--accent); margin-left:-11px;padding-right:2px} .hist .hb{font-size:var(--fs-body);font-weight:var(--w-reg); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hist li.sel .hb{color:var(--ink);font-weight:var(--w-emph)} .hist .hm{display:flex;justify-content:space-between;align-items:baseline; font-size:var(--fs-nano);color:var(--ink3);margin-top:2px;letter-spacing:var(--ls-cap)} .hist .sc{color:var(--ink);font-size:13px;font-family:var(--font-num); font-variant-numeric:tabular-nums;font-weight:var(--w-light)} .dot{width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle} .dot.running{background:var(--accent);animation:pulse 1.2s infinite} .dot.error{background:var(--t-vl)} .dot.done{background:var(--ink3)} .dot.queued{background:var(--ink3)} @keyframes pulse{50%{opacity:.2}} .userbox{margin:var(--sp-5) 0 var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--hair2);font-size:var(--fs-cap)} .userbox .un{color:var(--ink);font-weight:var(--w-emph)} .userbox .ur{color:var(--ink3);font-size:var(--fs-nano);letter-spacing:var(--ls-cap);margin-top:2px} .userbox .ua{margin-top:6px;display:flex;gap:var(--sp-3)} .userbox .ua a{color:var(--ink2);font-size:var(--fs-nano);letter-spacing:var(--ls-cap);border-bottom:1px solid var(--hair)} .themerow{margin-top:var(--sp-8);padding-top:var(--sp-4); border-top:1px solid var(--hair);display:flex;gap:0} .themerow button{flex:1;padding:var(--sp-2);border:1px solid var(--hair);background:transparent; color:var(--ink3);font-size:var(--fs-micro);letter-spacing:.14em} .themerow button+button{border-left:0} .themerow button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} /* 折りたたみレール（左右共通の型） */ @keyframes agfade{from{opacity:0}to{opacity:1}} .sidefull,.agfull,.agrail{animation:agfade .26s ease both} .siderail,.agrail{display:none} .app.side-collapsed .sidefull{display:none} .app.side-collapsed .siderail{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4); height:100%;padding:var(--sp-5) 0;width:100%;animation:agfade .26s ease both} .app.agent-collapsed #agent{background:var(--surface)} .app.agent-collapsed .agfull{display:none} .app.agent-collapsed .agrail{display:flex;flex-direction:column;align-items:center; gap:var(--sp-4);height:100%;padding:var(--sp-5) 0;width:100%} .siderail .rbtn,.agrail .rbtn{width:26px;height:26px;border:1px solid var(--hair);background:transparent; color:var(--ink3);display:flex;align-items:center;justify-content:center; font-size:var(--fs-cap);transition:.16s;padding:0} .siderail .rbtn:hover,.agrail .rbtn:hover{border-color:var(--ink);color:var(--ink)} .siderail .vlabel,.agrail .vlabel{writing-mode:vertical-rl;font-size:var(--fs-nano);letter-spacing:.28em; color:var(--ink3);text-transform:uppercase;user-select:none} .agrail .badge{writing-mode:vertical-rl;font-size:var(--fs-nano); letter-spacing:.16em;color:var(--accent-ink)} /* ============================================================ 5. ヘッダー・タブ ============================================================ */ .head{margin-bottom:var(--sp-2)} .headrow{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-7)} .hleft{display:flex;align-items:baseline;gap:var(--sp-5);min-width:0;flex-wrap:wrap} .head h1{margin:0;font-size:var(--fs-h1);font-weight:var(--w-light); letter-spacing:var(--ls-h1);line-height:var(--lh-tight)} .head h1 a{color:inherit;border-bottom:1px solid var(--hair);padding-bottom:1px;transition:.15s} .head h1 a:hover{border-bottom-color:var(--accent);color:var(--accent-ink)} .head .sub{color:var(--ink2);font-size:var(--fs-micro);letter-spacing:var(--ls-cap); display:flex;flex-wrap:wrap;align-items:baseline} .head .sub span{margin-right:var(--sp-4);white-space:nowrap} .head .sub a{border:0;color:var(--ink2)} .head .sub a:hover{color:var(--accent-ink)} .profinline{white-space:nowrap;color:var(--ink3);font-size:var(--fs-nano);letter-spacing:.14em} .profinline .pop{margin-left:6px} /* PDFボタン群: ラベルは文字だけ、押せるものだけ黒塗り */ .repbtns{display:flex;align-items:center;gap:0;flex:0 0 auto} .replb2{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3); font-weight:var(--w-reg);margin-right:var(--sp-3);white-space:nowrap;text-transform:uppercase} .repbtn,.repbtns a.repbtn{ display:inline-flex;align-items:center;gap:7px; background:var(--ink);color:var(--bg);border:1px solid var(--ink); padding:6px var(--sp-4);font-size:var(--fs-cap);font-weight:var(--w-reg);letter-spacing:var(--ls-caps); white-space:nowrap;transition:.15s;cursor:pointer; } .repbtn+.repbtn{margin-left:var(--sp-2)} .repbtn:hover,.repbtns a.repbtn:hover{background:transparent;color:var(--ink)} .repbtn svg{width:12px;height:12px;flex:0 0 12px} .repbtns .pop{margin-left:var(--sp-3)} .tabs{display:flex;gap:0;border-bottom:1px solid var(--hair); margin-bottom:var(--sp-7);overflow-x:auto} .tabs::-webkit-scrollbar{height:0} .tabs button{background:none;border:0;border-bottom:1px solid transparent;color:var(--ink3); padding:var(--sp-3) var(--sp-4) 11px;font-size:var(--fs-cap); letter-spacing:var(--ls-caps);white-space:nowrap;margin-bottom:-1px;transition:.15s} .tabs button.on{color:var(--ink);border-bottom-color:var(--ink)} .tabs button:hover{color:var(--ink2)} .tabs .sep{width:1px;background:var(--hair);margin:11px var(--sp-3);flex:0 0 1px} /* サブタブ（AURA100・出典）: 深掘り用は控えめに */ .tabs button.subtab{font-size:var(--fs-micro)} .tabs button.subtab.on{border-bottom-color:var(--ink3)} /* ============================================================ 6. 共通部品 ============================================================ */ /* セクション＝面ではなく、上罫と余白。見出しは箱の外 */ .card{background:transparent;border:0;border-top:1px solid var(--hair); padding:var(--sp-6) 0 var(--sp-7);margin:0} .card:first-child{border-top:0;padding-top:0} .card h3{margin:0 0 var(--sp-5);font-size:var(--fs-nano);letter-spacing:var(--ls-label); color:var(--ink3);font-weight:var(--w-reg);text-transform:uppercase} .card h3 .costchip{float:right;font-size:var(--fs-cap);letter-spacing:var(--ls-cap);color:var(--ink2);text-transform:none;font-weight:var(--w-reg);display:inline-flex;align-items:center;gap:4px} .card h3 .costchip .popbody{min-width:560px;left:auto;right:-6px} .costtbl-wrap{overflow-x:auto} .card h3 .costchip b{color:var(--ink);font-weight:var(--w-emph)} .card h3 .costchip small{color:var(--ink3)} .costtbl{border-collapse:collapse;width:100%;font-size:var(--fs-micro);margin-top:6px} .costtbl th{text-align:right;font-weight:var(--w-reg);color:var(--ink3);border-bottom:1px solid var(--hair);padding:2px 6px;white-space:nowrap} .costtbl th:first-child,.costtbl td:first-child{text-align:left} .costtbl td{padding:3px 6px;border-bottom:1px solid var(--hair2);white-space:nowrap} .costtbl td.num{text-align:right;font-variant-numeric:tabular-nums} .card h3 em{font-style:normal;color:var(--ink2);text-transform:none; letter-spacing:var(--ls-cap);font-size:var(--fs-micro);margin-left:var(--sp-3)} /* 内容の器（白箱→ raised 面）。左端は全部品で揃う */ .panelbox{border:1px solid var(--hair);background:var(--raised);padding:var(--sp-6) var(--sp-7)} /* ?ポップオーバー: 注釈・免責・基準の置き場（真円は角丸の例外） */ .pop{position:relative;display:inline-block;vertical-align:1px;margin-left:var(--sp-2)} .pop summary{ list-style:none;width:17px;height:17px;border:1px solid var(--ink3);border-radius:50%; display:inline-flex;align-items:center;justify-content:center; font-size:var(--fs-cap);color:var(--ink3);cursor:pointer;user-select:none;line-height:1; letter-spacing:0;text-transform:none;font-weight:var(--w-reg);font-family:var(--font-num); } .pop summary::-webkit-details-marker{display:none} .pop summary:hover,.pop[open] summary{color:var(--ink);border-color:var(--ink)} .popbody{ position:absolute;z-index:80;top:24px;left:-12px;width:min(360px,72vw); background:var(--raised);border:1px solid var(--hair);padding:var(--sp-4) var(--sp-4); font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2);letter-spacing:var(--ls-body); text-transform:none;white-space:normal;font-weight:var(--w-reg);text-align:left; } .popbody b{display:block;color:var(--ink);font-size:var(--fs-sm);letter-spacing:var(--ls-caps); margin-bottom:var(--sp-2);font-weight:var(--w-emph)} .popbody p{margin:0 0 var(--sp-2)} .popbody p:last-child{margin-bottom:0} .pop.up .popbody{top:auto;bottom:24px;left:auto;right:-6px} /* 画面右端に近い?は右揃えで開く（はみ出し防止） */ .repbtns .pop .popbody,.dighead .pop .popbody{left:auto;right:-6px} /* チップ: ヘアライン枠の読める箱（押せるものは hover で枠が締まる） */ .chips{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap} .chip{border:1px solid var(--hair);background:var(--raised);color:var(--ink2); padding:2px var(--sp-2);font-size:var(--fs-micro);letter-spacing:var(--ls-cap);line-height:1.7;white-space:nowrap} .chip.ev{cursor:pointer;transition:.15s} .chip.ev:hover{color:var(--ink);border-color:var(--ink)} .chip.stp{border-color:var(--accent);color:var(--accent-ink)} /* 1文=1行（文章の壁の解体）。行頭の短い線は強調罫＝金茶 */ .slines{list-style:none;margin:0;padding:0} .slines li{position:relative;padding:7px 0 7px var(--sp-5);border-bottom:1px solid var(--hair2); font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);font-weight:var(--w-reg)} .slines li:last-child{border-bottom:0;padding-bottom:0} .slines li:first-child{padding-top:0} .slines li::before{content:"";position:absolute;left:0;top:1.15em;width:10px;height:1px;background:var(--accent)} .slines li:first-child::before{top:.6em} /* ★5段階（見え方の判定ではなく強調＝金茶） */ .stars{margin-left:var(--sp-3);font-size:13px;letter-spacing:.18em;color:var(--hair);white-space:nowrap;vertical-align:1px} .stars i{font-style:normal;color:var(--accent)} /* 1行サマリー（グラフ・表の上の結論）＝リード文 */ .dqcall{font-size:var(--fs-lead);font-weight:var(--w-light);letter-spacing:.02em; line-height:1.9;margin-bottom:var(--sp-3)} /* 警告（アクション可能なものだけ表示してよい） */ .warnbox{margin-top:var(--sp-4);border:1px solid var(--accent); padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)} .warnbox b{color:var(--accent-ink);letter-spacing:var(--ls-cap)} /* ============================================================ 7. 診断結果タブ ============================================================ */ /* ヒーロー: 器の中に 看板1行 → レーダー+表 */ .herobox{border:1px solid var(--hair);background:var(--raised);padding:var(--sp-6) var(--sp-7) var(--sp-5)} .verdict2{margin:0 0 var(--sp-5);padding:0 0 var(--sp-5);border-bottom:1px solid var(--hair)} .verdict2 div{font-size:var(--fs-lead);font-weight:var(--w-light);line-height:2;letter-spacing:.02em} .hero3{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--sp-8);align-items:center} .herotot{display:flex;align-items:baseline;gap:6px;padding:0 0 0 8px;line-height:1} .herotot .num{font-size:42px;font-weight:var(--w-thin);letter-spacing:var(--ls-num);font-family:var(--font-num);color:var(--ink)} .herotot small{color:var(--ink3);font-size:var(--fs-cap);font-weight:var(--w-thin)} @media(max-width:1200px){.hero3{grid-template-columns:1fr;justify-items:center}} .dimtable{width:100%;border-collapse:collapse} .dimtable th{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);text-align:left; font-weight:var(--w-reg);padding:0 var(--sp-3) var(--sp-2) 0;border-bottom:1px solid var(--hair); white-space:nowrap;text-transform:uppercase} .dimtable th .mk{width:11px;height:var(--bar-h);display:inline-block;margin-right:6px;vertical-align:2px} .dimtable td{padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;border-bottom:1px solid var(--hair2);vertical-align:baseline} .dimtable tr:last-child td{border-bottom:0} .dimtable .dn{font-size:var(--fs-sm);font-weight:var(--w-emph);white-space:nowrap;letter-spacing:.04em} .dimtable .dn .code{color:var(--ink3);font-size:var(--fs-micro);margin-right:9px; font-weight:var(--w-reg);font-family:var(--font-num);letter-spacing:var(--ls-caps)} /* 次元スコア（/100）: 色は app.js の toneInk() が判定色 deep を返す（支給パッケージの指定箇所）。 レーダーと同じ情報なのでバーは置かない */ .dimtable th.r,.dimtable td.ds{text-align:right;padding-right:var(--sp-5)} .dimtable td.ds.pm{color:var(--ink2);font-size:20px} .dimtable td.ds.pm small{display:block;font-size:var(--fs-nano);color:var(--ink3);letter-spacing:var(--ls-cap);font-family:var(--font-num)} .iscore .pd{display:block;font-size:var(--fs-nano);color:var(--ink3);letter-spacing:var(--ls-cap);margin-top:2px;white-space:nowrap} .dimtable .ds{font-size:var(--fs-h3);font-weight:var(--w-thin);letter-spacing:var(--ls-num);white-space:nowrap; font-family:var(--font-num);font-variant-numeric:tabular-nums} .dimtable .dhi,.dimtable .dlo{font-size:var(--fs-cap);color:var(--ink2);line-height:1.8} .dimtable .dhi b,.dimtable .dlo b{color:var(--ink);font-weight:var(--w-emph); font-family:var(--font-num);font-variant-numeric:tabular-nums} .mk{display:inline-block} /* 列の目印。判定ではないので伝統色は使わない（金茶＝道しるべ／グレー） */ .mk.hi{background:var(--accent)} .mk.lo{background:var(--ink3)} /* 次の一手: h3は箱の外、表は器の中 */ .digestbox{border:1px solid var(--hair);background:var(--raised);padding:2px var(--sp-7) var(--sp-4)} .dighead{display:grid;grid-template-columns:36px 1fr 1.3fr 60px 52px;gap:var(--sp-4); padding:var(--sp-4) 0 var(--sp-2);border-bottom:1px solid var(--hair)} .dighead span{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3); font-weight:var(--w-reg);text-transform:uppercase} .dighead span:nth-child(4),.dighead span:nth-child(5){text-align:center} .digrow2c{display:grid;grid-template-columns:36px 1fr 1.3fr 60px 52px;gap:var(--sp-4); padding:var(--sp-4) 0;border-bottom:1px solid var(--hair2);align-items:baseline} .digrow2c:last-of-type{border-bottom:0} .digrow2c .no{font-size:var(--fs-num);color:var(--ink3);font-weight:var(--w-thin);line-height:1; font-family:var(--font-num);font-variant-numeric:tabular-nums} .digrow2c .dgl{font-size:var(--fs-body);font-weight:var(--w-emph);letter-spacing:var(--ls-body);color:var(--ink);line-height:1.85} .digrow2c .dgr{font-size:var(--fs-body);font-weight:var(--w-reg);color:var(--ink);line-height:var(--lh-body)} .digrow2c .dgr b{display:block;font-weight:var(--w-emph);font-size:14px;line-height:1.5} .digrow2c .dgr small{display:block;color:var(--ink2);font-size:var(--fs-nano);letter-spacing:var(--ls-cap);margin-top:3px} .digrow2c .dgi.marks,.digrow2c .dgd.marks{display:flex;justify-content:center;align-items:center;gap:0} .gantt .gname{flex-wrap:wrap} .gantt .gname>span:not(.no):not(.marks){flex:1 1 0;min-width:0} .gantt .gname .marks{flex:0 0 100%;margin-left:30px;margin-top:2px} .sthead .marks{margin-left:auto} .dgi{font-size:17px;font-weight:var(--w-thin);letter-spacing:var(--ls-num);text-align:center; font-family:var(--font-num);font-variant-numeric:tabular-nums} .dgd{font-size:var(--fs-body);font-weight:var(--w-reg);text-align:center} .digrow{display:grid;grid-template-columns:36px 1fr;gap:var(--sp-4);padding:15px 0;border-top:1px solid var(--hair2)} .digrow .no{font-size:var(--fs-num);color:var(--ink3);font-weight:var(--w-thin);line-height:1;font-family:var(--font-num)} .digrow .t{font-size:var(--fs-lead);font-weight:var(--w-light);letter-spacing:.02em} .digrow .d{font-size:var(--fs-body);color:var(--ink);margin-top:5px;line-height:var(--lh-body);font-weight:var(--w-reg)} .digmore{margin-top:6px;padding-top:var(--sp-3);border-top:1px solid var(--hair2); font-size:var(--fs-cap);color:var(--ink2);cursor:pointer;letter-spacing:var(--ls-cap);font-weight:var(--w-reg)} .digmore:hover{color:var(--accent-ink)} @media(max-width:1200px){ .dighead{display:none} .digrow2c{grid-template-columns:36px 1fr 60px 52px} .digrow2c .dgr{grid-column:2 / 5} } /* 一核二面: 2×2（人×AI・強み×弱み） */ .quad{display:grid;grid-template-columns:5.5em 1fr 1fr;border:1px solid var(--hair);background:var(--raised)} .qcorner{border-bottom:1px solid var(--hair)} .qhead{padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--hair);border-left:1px solid var(--hair2); font-size:var(--fs-nano);letter-spacing:var(--ls-label);font-weight:var(--w-reg);color:var(--ink3);text-transform:uppercase} .qlab{padding:var(--sp-4) 0 var(--sp-4) var(--sp-5);font-size:var(--fs-nano);letter-spacing:var(--ls-label); font-weight:var(--w-reg);color:var(--ink3);border-bottom:1px solid var(--hair2)} /* 強み／弱みのラベル。判定色は使わない（v4 と同じ金茶／グレー） */ .qlab.plus{color:var(--accent-ink)} .quad > .qcell{padding:var(--sp-3) var(--sp-5);border-left:1px solid var(--hair2);border-bottom:1px solid var(--hair2)} .quad > div:nth-last-child(-n+3){border-bottom:0} .qrow{padding:7px 0;border-bottom:1px solid var(--hair2)} .qrow:first-child{padding-top:0} .qrow:last-child{border-bottom:0;padding-bottom:0} .qrow .t{font-size:var(--fs-body);font-weight:var(--w-emph);letter-spacing:var(--ls-body)} .qrow .d{font-size:var(--fs-cap);color:var(--ink2);line-height:var(--lh-body);margin-top:2px;font-weight:var(--w-reg)} @media(max-width:1100px){.quad{grid-template-columns:4em 1fr 1fr}} /* 旧データ用フォールバック（上下積み） */ .gapbox{border:1px solid var(--hair);background:var(--raised)} .gaptop{display:block;padding:var(--sp-4) var(--sp-7);border-bottom:1px solid var(--hair)} .gaptop .gt{display:block;margin-bottom:var(--sp-2)} .gaptop p{margin:0;font-size:var(--fs-body);line-height:var(--lh-prose)} .gapai{padding:var(--sp-4) var(--sp-7)} .gapai .gt{margin-bottom:var(--sp-3);color:var(--accent-ink)} .gt{font-size:var(--fs-nano);letter-spacing:var(--ls-label);font-weight:var(--w-reg);color:var(--ink3);text-transform:uppercase} .gt.ai{color:var(--accent-ink)} .gt .verdict{margin-left:var(--sp-3);font-size:var(--fs-body);font-weight:var(--w-emph);color:var(--ink); letter-spacing:var(--ls-body);text-transform:none} .gp2row{display:grid;grid-template-columns:26px 15em 1fr;gap:var(--sp-3); padding:11px 0;border-bottom:1px solid var(--hair2);align-items:baseline} .gp2row:last-child{border-bottom:0;padding-bottom:0} .gp2row:first-child{padding-top:0} .gp2row .no{font-size:var(--fs-body);font-weight:var(--w-reg);color:var(--ink3); font-family:var(--font-num);font-variant-numeric:tabular-nums} .gp2row .t{font-size:var(--fs-body);font-weight:var(--w-emph);letter-spacing:var(--ls-body)} .gp2row .d{font-size:var(--fs-cap);color:var(--ink2);line-height:var(--lh-body);font-weight:var(--w-reg)} @media(max-width:1100px){ .gp2row{grid-template-columns:26px 1fr} .gp2row .d{grid-column:2} } .gpoints{margin:0;padding:0;list-style:none;counter-reset:gp} .gpoints li{counter-increment:gp;position:relative;padding:9px 0 9px 32px;border-bottom:1px solid var(--hair2); font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);font-weight:var(--w-reg)} .gpoints li:last-child{border-bottom:0;padding-bottom:0} .gpoints li:first-child{padding-top:0} .gpoints li::before{content:counter(gp);position:absolute;left:0;top:9px; font-size:var(--fs-body);font-weight:var(--w-reg);color:var(--ink3); font-family:var(--font-num);font-variant-numeric:tabular-nums} .gpoints li:first-child::before{top:0} /* 根拠（チャネル別・1行） */ .evcompact{margin-top:var(--sp-2);font-size:var(--fs-micro);color:var(--ink3);letter-spacing:var(--ls-cap); display:flex;flex-wrap:wrap;gap:6px var(--sp-5);align-items:baseline} .evcompact .evg{white-space:nowrap} .evglb{font-size:var(--fs-nano);letter-spacing:.14em;color:var(--ink3);font-weight:var(--w-reg);margin-right:var(--sp-2)} .evglb.main{margin-right:0} .evlink{cursor:pointer;color:var(--ink2);border-bottom:1px solid var(--hair);margin-right:var(--sp-2); font-family:var(--font-num);font-variant-numeric:tabular-nums} .evlink:hover{color:var(--ink);border-bottom-color:var(--ink)} /* 文中の引用（[O3 U5] 形式）: 控えめな小さいリンク列 */ .cite{font-size:var(--fs-nano);color:var(--ink3);letter-spacing:var(--ls-cap);white-space:nowrap;margin-left:4px} .cite .evlink{font-size:var(--fs-nano);color:var(--ink3);margin-right:4px;border-bottom-color:var(--hair2)} .cite .evlink:hover{color:var(--ink)} /* メディア別の評価: 凡例 + 縦棒6組×3本（②チャネル＝無彩） */ .medlegend{display:flex;gap:var(--sp-7);flex-wrap:wrap;margin:2px 0 var(--sp-4);font-size:var(--fs-micro); color:var(--ink2);letter-spacing:.04em} .medlegend i{width:18px;height:var(--bar-h-thin);display:inline-block;margin-right:9px;vertical-align:middle} .medchart{display:flex;gap:var(--sp-4);align-items:flex-end} .mgroup{flex:1;min-width:0;text-align:center} .mbars{display:flex;gap:7px;align-items:flex-end;justify-content:center;height:130px} .mcol{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;width:30px;height:100%} .mval{font-size:var(--fs-cap);font-weight:var(--w-reg);margin-bottom:4px; font-family:var(--font-num);font-variant-numeric:tabular-nums} .mcol i{width:100%;display:block} .mglb{font-size:var(--fs-cap);font-weight:var(--w-emph);margin-top:var(--sp-2);letter-spacing:.04em;white-space:nowrap} /* ============================================================ 8. 課題カードタブ ============================================================ */ .tabhead{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-cap);color:var(--ink2);margin:0 0 var(--sp-5)} .genbtn{padding:var(--sp-3) var(--sp-8);border:1px solid var(--ink);background:var(--ink);color:var(--bg); font-size:var(--fs-sm);letter-spacing:var(--ls-caps);font-weight:var(--w-reg);transition:.18s} .genbtn:hover{background:transparent;color:var(--ink)} .imatrix{display:flex;gap:var(--sp-2);align-items:stretch} .imatrix .ylab{writing-mode:vertical-rl;text-orientation:mixed;font-size:var(--fs-nano); letter-spacing:.24em;color:var(--ink3);text-align:center;text-transform:uppercase} .mgrid2{flex:1;display:grid;grid-template-columns:2em repeat(3,1fr);gap:0} .mgrid2 .mrowlab{display:flex;align-items:center;justify-content:center;font-size:var(--fs-micro); color:var(--ink2);border-bottom:1px solid var(--hair2)} .mgrid2 .mcell{min-height:52px;border-left:1px solid var(--hair2);border-bottom:1px solid var(--hair2); padding:6px;display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;background:var(--raised)} .mgrid2 .mcollab{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3); text-align:center;padding-top:var(--sp-2);text-transform:uppercase} /* 課題番号（押せる） */ .mdot{width:30px;height:30px;display:flex;align-items:center;justify-content:center; border:1px solid var(--accent);color:var(--accent-ink);font-size:var(--fs-sm);font-weight:var(--w-reg);cursor:pointer; font-family:var(--font-num);font-variant-numeric:tabular-nums;transition:.15s;background:var(--bg)} .mdot:hover{background:var(--accent);color:var(--bg)} .icard{border:1px solid var(--hair);margin-bottom:var(--sp-4);background:var(--raised);transition:border-color .3s} .icard.hl{border-color:var(--accent)} .ichead{display:flex;align-items:baseline;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--hair2)} .ichead .no{font-size:var(--fs-num);color:var(--ink3);font-weight:var(--w-thin);letter-spacing:var(--ls-num); font-family:var(--font-num);font-variant-numeric:tabular-nums} .ichead .tt{font-size:13px;font-weight:var(--w-emph);flex:1;letter-spacing:var(--ls-body)} .ipill{font-size:var(--fs-nano);letter-spacing:var(--ls-caps);color:var(--ink2);border:1px solid var(--hair); padding:1px var(--sp-2);white-space:nowrap;font-weight:var(--w-reg)} /* 2026-09-08（指示書 05）: 見るカード。頭＝番号・題・目印、体＝左「いま低いもの」3 本のバー／右「だから」施策名を最大の文字、足＝くわしく */ .icard.v2 .ichead{padding:10px var(--sp-5)} .icard.v2 .ichead .tt{font-size:14px;min-width:0} .marks{display:inline-flex;gap:14px;align-items:center;flex:0 0 auto;white-space:nowrap} .marks .imp i{display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);margin-left:3px;vertical-align:middle} .marks .imp i.on{background:var(--ink)} .marks .dif i{display:inline-block;width:5px;height:11px;border:1px solid var(--ink);margin-left:2px;vertical-align:middle} .marks .dif i.on{background:var(--ink)} .icgrid{display:grid;grid-template-columns:minmax(300px,38%) 1fr} .icgrid>div{padding:12px var(--sp-5) 14px} .icgrid>div+div{border-left:1px solid var(--hair2)} .icgrid .k{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);text-transform:uppercase;margin-bottom:8px} .icgrid .k small{letter-spacing:0;text-transform:none;margin-left:4px} .lo{display:grid;grid-template-columns:minmax(0,12em) 1fr 2em;gap:10px;align-items:center;padding:4px 0;font-size:13px} .lo .ln{line-height:1.4} .lo .lb{height:6px;background:var(--hair2);position:relative} .lo .lb i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)} .lo .ls{text-align:right;font-variant-numeric:tabular-nums} .sobox .big{font-size:20px;font-weight:var(--w-emph);line-height:1.4;letter-spacing:var(--ls-body)} .sobox .one{font-size:13px;line-height:1.7;margin-top:6px} .sobox .tail{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px} .sobox .meta{font-size:var(--fs-nano);letter-spacing:var(--ls-cap);color:var(--accent-ink);margin-right:6px;white-space:nowrap} .icard.v2 details.more{border-top:1px solid var(--hair2)} .icard.v2 details.more summary{list-style:none;cursor:pointer;padding:8px var(--sp-5);font-size:var(--fs-cap);color:var(--ink2);letter-spacing:var(--ls-cap)} .icard.v2 details.more summary::-webkit-details-marker{display:none} .icard.v2 details.more summary::before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s} .icard.v2 details.more[open] summary::before{transform:rotate(90deg)} .icard.v2 .mbody{padding:4px var(--sp-5) 14px} .icard.v2 .mbody .row{display:grid;grid-template-columns:10.5em 1fr;gap:12px;padding:6px 0;border-top:1px solid var(--hair2);font-size:var(--fs-body);line-height:var(--lh-body)} .icard.v2 .mbody .row .k{margin:0;padding-top:3px;font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);text-transform:uppercase} .icard.v2 .mbody .slines{margin:0} .icard.v2 .mbody .evlink{margin-right:6px} /* ============================================================ 9. AURA100タブ ============================================================ */ .sorttog{display:inline-flex;border:1px solid var(--hair);margin-left:auto} .sorttog button{border:0;background:var(--raised);color:var(--ink2);padding:6px var(--sp-3); font-size:var(--fs-micro);letter-spacing:.08em} .sorttog button+button{border-left:1px solid var(--hair)} .sorttog button.on{background:var(--ink);color:var(--bg);font-weight:var(--w-reg)} .dimblock{margin-bottom:0;border-top:1px solid var(--hair)} .dimblock:last-child{border-bottom:1px solid var(--hair)} .dimhead{display:flex;align-items:baseline;gap:var(--sp-3);padding:var(--sp-4) 2px;cursor:pointer} .dimhead .c{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);color:var(--ink3);width:22px;font-family:var(--font-num)} .dimhead .n{font-size:14px;font-weight:var(--w-reg);flex:1;letter-spacing:.04em} .dimhead .n small{color:var(--ink3);font-weight:var(--w-reg);margin-left:var(--sp-3); font-size:var(--fs-micro);letter-spacing:var(--ls-body)} /* 次元スコア: 色は app.js の toneInk() */ .dimhead .s{font-size:var(--fs-h3);font-weight:var(--w-thin); font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-num)} .dimhead .s small{font-size:var(--fs-nano);color:var(--ink3);letter-spacing:0;font-weight:var(--w-reg)} .dimhead .ar{color:var(--ink3);font-size:8px;transition:transform .2s} .dimblock.open .dimhead .ar{transform:rotate(90deg)} .itemlist{display:none;padding:0 0 var(--sp-5)} .dimblock.open .itemlist{display:block} .itembox{border:1px solid var(--hair);background:var(--raised);padding:4px var(--sp-5)} .item{display:grid;grid-template-columns:52px 1fr;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--hair2)} .item:last-child{border-bottom:0} .iscore{text-align:left} /* 項目スコアの色は app.js の scoreColor() が判定色 deep を返す */ .iscore .n{font-size:var(--fs-num);font-weight:var(--w-thin); font-family:var(--font-num);font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.03em} .iscore .b{font-size:8.5px;color:var(--ink3);display:block;letter-spacing:.08em;margin-top:2px;font-weight:var(--w-reg)} .iname{font-size:var(--fs-body);font-weight:var(--w-emph);letter-spacing:.04em} .iname .cd{color:var(--ink3);font-weight:var(--w-reg);margin-right:9px;font-size:var(--fs-micro); font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-cap)} .iname .pop{margin-left:var(--sp-2);vertical-align:0} .irat{font-size:var(--fs-cap);color:var(--ink2);line-height:1.95;letter-spacing:var(--ls-body);margin-top:5px;font-weight:var(--w-reg)} .igap{font-size:var(--fs-micro);color:var(--ink2);margin-top:var(--sp-2); padding-left:var(--sp-3);border-left:1px solid var(--accent)} .imix{display:flex;height:var(--bar-h-thin);overflow:hidden;width:150px;margin-top:11px;background:var(--track)} .imix div{height:100%} .imeta{display:flex;gap:var(--sp-4);align-items:center;margin-top:var(--sp-2); font-size:var(--fs-nano);color:var(--ink3);flex-wrap:wrap;letter-spacing:var(--ls-cap)} .star{color:var(--accent);font-size:var(--fs-nano);margin-left:6px} /* ============================================================ 10. 出典タブ ============================================================ */ .evgroup{margin-bottom:var(--sp-8)} .evhead{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)} .evhead i{width:18px;height:var(--bar-h-thin)} .evhead b{font-size:var(--fs-cap);font-weight:var(--w-emph);letter-spacing:.12em} .evhead span{font-size:var(--fs-nano);color:var(--ink3);letter-spacing:.08em} .evbox2{border:1px solid var(--hair);background:var(--raised);padding:4px var(--sp-6)} .ev{padding:var(--sp-4) 0;border-bottom:1px solid var(--hair2)} .ev:last-child{border-bottom:0} .ev .top{display:flex;gap:var(--sp-3);align-items:baseline} .ev .id{font-size:var(--fs-nano);color:var(--ink3);flex:0 0 auto; font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.08em} .ev .ti{font-size:var(--fs-body);font-weight:var(--w-emph);flex:1;letter-spacing:var(--ls-body);line-height:1.8} .ev .ti a{color:inherit;border-bottom:1px solid var(--hair)} .ev .ti a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)} .ev .st{font-size:var(--fs-nano);color:var(--ink3);white-space:nowrap;letter-spacing:.08em;flex:0 0 auto} /* 出典の強さは「判定」の一種。錆浅葱＝一次検証済／芥子＝公式の主張 */ .ev .st.strong{color:var(--t-vh-deep)} .ev .st.medium{color:var(--t-m-deep)} .ev .su{font-size:var(--fs-cap);color:var(--ink2);line-height:1.95;margin-top:7px;letter-spacing:var(--ls-body)} .ev .meta2{font-size:var(--fs-nano);color:var(--ink3);margin-top:5px;letter-spacing:var(--ls-cap)} /* ============================================================ 11. 実行プラン（ATLAS統合）タブ ============================================================ */ .planbar{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-6);flex-wrap:wrap} .planbar .pstep{flex:1;min-width:120px;border:1px solid var(--hair);background:var(--raised); padding:var(--sp-2) var(--sp-3);cursor:pointer;transition:.15s} .planbar .pstep:hover{border-color:var(--accent)} .planbar .pstep .pn{font-size:var(--fs-cap);font-weight:var(--w-emph);letter-spacing:var(--ls-body);white-space:nowrap} .planbar .pstep .pw{font-size:var(--fs-nano);color:var(--ink3);margin-top:2px;letter-spacing:var(--ls-cap)} /* 優先度バー＝進捗系の表現。判定ではないので金茶 */ .planbar .pstep .pbar{height:var(--bar-h-thin);background:var(--track);margin-top:7px} .planbar .pstep .pbar i{display:block;height:100%;background:var(--accent)} .stepsec{border:1px solid var(--hair);background:var(--raised);margin-bottom:var(--sp-4);padding:var(--sp-5) var(--sp-7)} .stepsec .shead{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap} .stepsec .srank{font-size:var(--fs-num);font-weight:var(--w-thin);color:var(--ink3);letter-spacing:var(--ls-num); font-family:var(--font-num);font-variant-numeric:tabular-nums} .stepsec .snm{font-size:var(--fs-h3);font-weight:var(--w-light);letter-spacing:.01em} .stepsec .shl{font-size:var(--fs-body);font-weight:var(--w-reg);color:var(--ink);margin-top:var(--sp-2);line-height:var(--lh-body)} .stepsec .sdiag{font-size:var(--fs-cap);color:var(--ink2);line-height:1.95;margin-top:6px;max-width:860px} .smeta{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-left:auto} .sxtra{font-size:var(--fs-cap);color:var(--ink2);margin-top:var(--sp-3);line-height:1.95} .sxtra b{color:var(--ink);font-weight:var(--w-emph)} .act{display:grid;grid-template-columns:22px 1fr;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--hair2)} .act:last-child{border-bottom:0} .act .no{font-size:var(--fs-cap);color:var(--ink3);font-family:var(--font-num);font-variant-numeric:tabular-nums;padding-top:2px} .act .t{font-size:13px;font-weight:var(--w-emph);letter-spacing:var(--ls-body)} .act .d{font-size:var(--fs-cap);color:var(--ink2);line-height:2;margin-top:5px;letter-spacing:var(--ls-body)} .pbadge{font-size:8.5px;margin-left:var(--sp-3);vertical-align:middle;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase} .pbadge.high{color:var(--accent-ink)} .pill{display:inline-block;font-size:var(--fs-nano);letter-spacing:var(--ls-caps);color:var(--ink3);white-space:nowrap} .pill b{color:var(--ink);font-weight:var(--w-emph)} .pill.hi b{color:var(--accent-ink)} /* ============================================================ 12. 進行中・エラー・モーダル ============================================================ */ .empty{display:flex;flex-direction:column;align-items:center;justify-content:center; height:76vh;text-align:center;color:var(--ink3);max-width:960px;margin:0 auto} .empty h1{font-size:var(--fs-disp);color:var(--ink);letter-spacing:var(--ls-disp); margin:0 0 var(--sp-3);font-weight:var(--w-thin)} .empty h1 b{font-weight:var(--w-reg);letter-spacing:.02em;font-size:34px} .empty p{max-width:440px;line-height:2.1;font-size:var(--fs-sm);color:var(--ink2);letter-spacing:.04em} .prog-view{max-width:660px} .prog-view .ttl{font-size:20px;margin-bottom:6px;font-weight:var(--w-light);letter-spacing:.01em} .prog-view .ph{color:var(--accent-ink);font-size:var(--fs-sm);margin-bottom:var(--sp-6);letter-spacing:var(--ls-cap)} .loader{height:1px;background:var(--track);overflow:hidden;margin-bottom:var(--sp-6)} .loader i{display:block;height:100%;width:34%;background:var(--accent);animation:slide 1.6s ease-in-out infinite} @keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}} /* 進行チェックリスト */ .stagechk{list-style:none;margin:0 0 var(--sp-5);padding:0} .stagechk li{display:flex;align-items:baseline;gap:var(--sp-3);padding:9px 0;border-bottom:1px solid var(--hair2); font-size:var(--fs-body);color:var(--ink3)} .stagechk li .ic{flex:0 0 18px;text-align:center;font-size:var(--fs-cap)} .stagechk li.done{color:var(--ink2)} .stagechk li.done .ic{color:var(--accent)} .stagechk li.now{color:var(--ink);font-weight:var(--w-emph)} .stagechk li.now .ic{color:var(--accent-ink)} .loglink{font-size:var(--fs-sm);color:var(--ink3);cursor:pointer} .logl{list-style:none;padding:0;margin:var(--sp-2) 0 0;font-size:var(--fs-cap)} .logl li{padding:9px 0;color:var(--ink2);border-bottom:1px solid var(--hair2);display:flex;gap:var(--sp-5);letter-spacing:var(--ls-body)} .logl li b{color:var(--ink3);font-weight:var(--w-reg);font-family:var(--font-num);font-variant-numeric:tabular-nums;flex:0 0 52px} .errbox{border-left:1px solid var(--t-vl);padding:var(--sp-3) 0 var(--sp-3) var(--sp-4); font-size:var(--fs-cap);color:var(--ink2);white-space:pre-wrap;margin-top:var(--sp-5);line-height:1.9} /* モーダル（新規診断・出典） */ .modal{position:fixed;inset:0;background:rgba(49,44,38,.42);z-index:60;display:flex;align-items:center;justify-content:center;padding:var(--sp-6)} .modal[hidden]{display:none} .mbox{background:var(--bg);border:1px solid var(--hair);width:640px;max-width:100%;max-height:92vh;overflow-y:auto; padding:var(--sp-7) var(--sp-7) var(--sp-6)} .mhead{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3)} .mhead b{font-size:var(--fs-body);letter-spacing:.14em;font-weight:var(--w-emph)} .mhead .mtime{font-size:var(--fs-nano);color:var(--ink3);letter-spacing:.08em;flex:1} .mhead button{border:0;background:transparent;color:var(--ink3);font-size:17px;padding:0 2px;line-height:1} .mhead button:hover{color:var(--ink)} .mnote{font-size:var(--fs-cap);line-height:1.9;color:var(--ink);border-left:1px solid var(--accent); padding:var(--sp-2) var(--sp-3);background:var(--accent-soft);margin-bottom:var(--sp-4)} .mbox label{display:block;font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink2); margin:var(--sp-4) 0 4px;font-weight:var(--w-reg)} .mbox label em.req{font-style:normal;color:var(--accent-ink);border:1px solid var(--accent);font-size:8.5px; padding:0 5px;margin-left:6px;letter-spacing:var(--ls-caps)} .mbox label small{font-size:var(--fs-nano);color:var(--ink3);letter-spacing:.04em;margin-left:6px;font-weight:var(--w-reg)} .mbox input,.mbox select{width:100%;padding:var(--sp-2) 2px;border:0;border-bottom:1px solid var(--hair); border-radius:var(--radius);background:transparent;color:var(--ink);font-size:var(--fs-body);letter-spacing:var(--ls-body)} .mbox select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 49%,var(--ink3) 50%,transparent 61%), linear-gradient(135deg,transparent 49%,var(--ink3) 50%,transparent 61%); background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%; background-size:5px 5px;background-repeat:no-repeat;padding-right:24px} .mbox select option{background:var(--bg);color:var(--ink)} .mbox input:focus,.mbox select:focus{outline:none;border-bottom-color:var(--accent)} .mgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-5)} .mrow{display:flex;gap:var(--sp-2);margin-top:var(--sp-7);position:sticky;bottom:calc(-1 * var(--sp-7));background:var(--bg);padding:var(--sp-3) 0;border-top:1px solid var(--hair2)} /* D7: 開始ボタンはスクロールしなくても押せる */ .mrow button{flex:1;padding:var(--sp-3);border:1px solid var(--hair);background:transparent;color:var(--ink2); font-size:var(--fs-micro);letter-spacing:.08em} .mrow button:hover{border-color:var(--ink3)} .mrow button.go{background:var(--ink);color:var(--bg);border-color:var(--ink);flex:2} .mrow button.go:hover{background:transparent;color:var(--ink)} .mrow button:disabled{opacity:.4;cursor:not-allowed} /* 出典モーダル */ .evbox{width:580px;max-width:94vw} .evm-title{font-size:var(--fs-lead);font-weight:var(--w-light);line-height:1.7;margin-bottom:6px} .evm-meta{font-size:var(--fs-nano);color:var(--ink3);letter-spacing:var(--ls-cap);margin-bottom:var(--sp-3)} .evm-sum{font-size:var(--fs-body);line-height:var(--lh-prose);margin:0 0 var(--sp-3);color:var(--ink)} .evm-link{display:inline-block;margin-top:var(--sp-3);border:1px solid var(--ink);padding:var(--sp-2) var(--sp-4); font-size:var(--fs-cap);letter-spacing:var(--ls-caps);font-weight:var(--w-reg);color:var(--ink);transition:.15s} .evm-link:hover{background:var(--ink);color:var(--bg)} /* ============================================================ 13. 右エージェントパネル ============================================================ */ #agent{background:var(--surface);border-left:1px solid var(--hair);display:flex;flex-direction:column; height:100vh;position:relative;overflow:hidden;width:100%;min-width:0} .agfull{display:flex;flex-direction:column;height:100%;min-height:0;width:var(--agentw);flex:0 0 auto} .aghead{padding:var(--sp-6) var(--sp-5) var(--sp-4);border-bottom:1px solid var(--hair); display:flex;align-items:flex-start;gap:var(--sp-3)} .aghead .tt{flex:1;min-width:0} .aghead b{font-size:var(--fs-micro);letter-spacing:var(--ls-label);font-weight:var(--w-reg);display:block; white-space:nowrap;text-transform:uppercase} .aghead .m{font-size:var(--fs-nano);color:var(--ink3);margin-top:4px;letter-spacing:.08em;white-space:nowrap} .agtoggle{flex:0 0 26px;width:26px;height:26px;border:1px solid var(--hair);background:transparent;color:var(--ink3); display:flex;align-items:center;justify-content:center;font-size:var(--fs-cap);line-height:1;transition:.16s;padding:0} .agtoggle:hover{border-color:var(--ink3);color:var(--ink)} .agbody{flex:1;overflow-y:auto;padding:var(--sp-5)} .agempty{color:var(--ink3);font-size:var(--fs-cap);line-height:2;text-align:center;margin-top:var(--sp-9);letter-spacing:var(--ls-body)} .sugg{display:flex;flex-direction:column;gap:0;margin-top:var(--sp-6);text-align:left} .sugg button{text-align:left;background:transparent;border:0;border-top:1px solid var(--hair2);color:var(--ink2); padding:var(--sp-3) 0;font-size:var(--fs-cap);line-height:1.8;letter-spacing:var(--ls-body);transition:.15s} .sugg button:last-child{border-bottom:1px solid var(--hair2)} .sugg button:hover{color:var(--ink);padding-left:6px} .msg{margin-bottom:var(--sp-5)} .msg .who{font-size:8.5px;letter-spacing:var(--ls-label);color:var(--ink3);margin-bottom:var(--sp-2);text-transform:uppercase} .msg .bd{font-size:var(--fs-sm);line-height:var(--lh-prose);white-space:pre-wrap;word-wrap:break-word;letter-spacing:var(--ls-body)} .msg.u .bd{color:var(--ink2);padding-left:var(--sp-3);border-left:1px solid var(--hair)} .msg .bd b{color:var(--ink);font-weight:var(--w-emph)} .agfoot{padding:var(--sp-4) var(--sp-5) var(--sp-4);border-top:1px solid var(--hair)} .agfoot .box{display:flex;gap:var(--sp-2);align-items:flex-end} .agfoot textarea{flex:1;resize:none;background:transparent;border:0;border-bottom:1px solid var(--hair);color:var(--ink); padding:var(--sp-2) 0;font-size:var(--fs-sm);line-height:1.7;max-height:130px;letter-spacing:var(--ls-body)} .agfoot textarea:focus{outline:none;border-bottom-color:var(--accent)} .agfoot button{background:transparent;border:1px solid var(--hair);color:var(--ink2);padding:var(--sp-2) var(--sp-3); font-size:var(--fs-micro);letter-spacing:var(--ls-caps);transition:.16s} .agfoot button:hover:not(:disabled){background:var(--ink);color:var(--bg);border-color:var(--ink)} .agfoot button:disabled{opacity:.3;cursor:not-allowed} .agfoot .dis{font-size:var(--fs-nano);color:var(--ink3);margin-top:var(--sp-3);line-height:1.8;letter-spacing:var(--ls-body)} .blink::after{content:"▏";animation:bl .9s steps(1) infinite;color:var(--accent)} @keyframes bl{50%{opacity:0}} /* ============================================================ 15. v5.1 追加 — 実行プラン（課題→施策）・競合比較・共通の対パネル トークンは §1 のまま。判定色は使わない（金茶＝道しるべ／無彩）。 ============================================================ */ /* 競合として診断したときの案内 */ .compbanner{margin-top:var(--sp-3);border-left:1px solid var(--accent);background:var(--accent-soft); padding:var(--sp-2) var(--sp-3);font-size:var(--fs-cap);line-height:1.9;color:var(--ink)} .compbanner .lnk{margin-left:var(--sp-3)} .lnk{cursor:pointer;color:var(--accent-ink);border-bottom:1px solid var(--hair);font-size:var(--fs-cap);letter-spacing:var(--ls-cap)} .lnk:hover{border-bottom-color:currentColor} .lnk.del{color:var(--ink3);margin-left:var(--sp-3)} /* 対パネル（左右）と3列 */ .pairgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)} .pair3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-3)} .gpanel{border:1px solid var(--hair);background:var(--raised);padding:var(--sp-3) var(--sp-5) var(--sp-4)} .gpanel .gt{margin-bottom:var(--sp-2)} .gpanel .gt small{margin-left:var(--sp-2);letter-spacing:.04em;text-transform:none;color:var(--ink3)} .crow{display:flex;justify-content:space-between;gap:var(--sp-3);padding:7px 0;border-bottom:1px solid var(--hair2); font-size:var(--fs-body);align-items:baseline} .crow:last-child{border-bottom:0} .crow .cn small{display:block;font-size:var(--fs-nano);color:var(--ink3);letter-spacing:var(--ls-cap)} .crow .cv{white-space:nowrap} .crow .cv b{font-weight:var(--w-emph);font-size:14px} .crow .cv em{font-style:normal;color:var(--ink3);font-size:var(--fs-cap);margin-left:6px} @media(max-width:1100px){.pairgrid,.pair3{grid-template-columns:1fr}} /* ---- 実行プラン: ロードマップ ---- */ .stp90{font-size:var(--fs-body);line-height:var(--lh-body);margin:0 0 var(--sp-4);color:var(--ink)} .roadmap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-3)} .rcol{border:1px solid var(--hair);background:var(--bg);padding:var(--sp-2) var(--sp-3) var(--sp-3)} .rh{font-size:var(--fs-body);font-weight:var(--w-emph);padding-bottom:6px;border-bottom:1px solid var(--ink);margin-bottom:4px;letter-spacing:.04em} .rh small{font-weight:var(--w-reg);color:var(--ink3);margin-left:var(--sp-2);font-size:var(--fs-nano);letter-spacing:var(--ls-cap)} .rm{display:grid;grid-template-columns:24px 1fr;gap:6px;padding:7px 0;border-bottom:1px solid var(--hair2);cursor:pointer;transition:.15s} .rm:last-child{border-bottom:0} .rm:hover .rt{color:var(--accent-ink)} .rm .rno{color:var(--ink3);font-size:var(--fs-cap)} .rm .rt{font-size:var(--fs-body);line-height:1.7} .rm .ro{grid-column:2;font-size:var(--fs-nano);color:var(--accent-ink);letter-spacing:var(--ls-cap)} @media(max-width:1100px){.roadmap{grid-template-columns:1fr}} /* ---- 実行プラン: 課題ごとの筋（story） ---- */ .story{border:1px solid var(--hair);background:var(--raised);margin-bottom:var(--sp-4);transition:border-color .3s} .story.hl{border-color:var(--accent)} .sthead{display:flex;align-items:baseline;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--hair2)} .sthead .no{font-size:var(--fs-num);color:var(--ink3);font-weight:var(--w-thin);letter-spacing:var(--ls-num)} .sthead .tt{font-size:14px;font-weight:var(--w-emph);flex:1;letter-spacing:var(--ls-body)} .stcols{display:grid;grid-template-columns:1fr 1.2fr} .stcols > div{padding:var(--sp-4) var(--sp-5) var(--sp-5)} .stcols > .str{border-left:1px solid var(--hair2)} .stlab{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);text-transform:uppercase;margin-bottom:6px} .stp{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)} .stl .slines li{font-size:var(--fs-body)} .stl .evcompact{margin-top:var(--sp-2)} .meas{padding:var(--sp-3) 0 var(--sp-4);border-bottom:1px solid var(--hair2)} .meas:first-of-type{padding-top:0} .meas:last-child{border-bottom:0;padding-bottom:0} .meas .mt{font-size:14px;font-weight:var(--w-emph);letter-spacing:var(--ls-body);line-height:1.6} .meas .mmeta{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin:4px 0 var(--sp-2); font-size:var(--fs-nano);color:var(--accent-ink);letter-spacing:var(--ls-cap)} .meas .mmeta .chip{margin-left:auto} .meas .mw{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)} .meas .mwhy{font-size:var(--fs-cap);line-height:1.9;color:var(--ink2);margin-top:4px;padding-left:var(--sp-3);border-left:1px solid var(--accent)} .meas .mex{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-2);font-size:var(--fs-cap);color:var(--ink2);line-height:1.8} .meas .mex .k{display:block;font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);text-transform:uppercase;margin-bottom:2px} .meas .mex .chip{margin-right:4px} @media(max-width:1100px){.stcols{grid-template-columns:1fr}.stcols > .str{border-left:0;border-top:1px solid var(--hair2)}} /* ---- 実行プラン: 進め方の表 ---- */ .steptbl{width:100%;border-collapse:collapse;font-size:var(--fs-body)} .steptbl th{text-align:left;font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);font-weight:var(--w-reg); text-transform:uppercase;padding:0 var(--sp-3) var(--sp-2) 0;border-bottom:1px solid var(--hair);white-space:nowrap} .steptbl td{padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;border-bottom:1px solid var(--hair2);vertical-align:baseline;line-height:1.8} .steptbl tr:last-child td{border-bottom:0} .steptbl .sn{font-weight:var(--w-emph);white-space:nowrap} .steptbl td.num{text-align:right;white-space:nowrap;color:var(--ink2)} .steptbl td:last-child{white-space:nowrap} /* ---- 競合比較 ---- */ .hero3.cmp{align-items:start} .medlegend.rl{margin:0 0 var(--sp-3)} .cmptbl{width:100%;border-collapse:collapse;font-size:var(--fs-body)} .cmptbl th{text-align:right;font-size:var(--fs-nano);letter-spacing:var(--ls-cap);color:var(--ink3);font-weight:var(--w-reg); padding:0 0 var(--sp-2) var(--sp-3);border-bottom:1px solid var(--hair);white-space:nowrap;max-width:9em;overflow:hidden;text-overflow:ellipsis} .cmptbl th:first-child{text-align:left;padding-left:0} .cmptbl th.base{color:var(--ink)} .cmptbl td{padding:var(--sp-2) 0 var(--sp-2) var(--sp-3);border-bottom:1px solid var(--hair2);text-align:right;vertical-align:baseline} .cmptbl td.dn{text-align:left;padding-left:0;font-weight:var(--w-emph);white-space:nowrap} .cmptbl td.base{font-weight:var(--w-emph);font-size:14px} .cmptbl td.diff{color:var(--ink2)} .cmptbl tr.tot td{border-bottom:1px solid var(--ink)} .cmptbl tr:last-child td{border-bottom:0} .cmptbl.items{font-size:var(--fs-cap)} .cmptbl.items td{padding-top:6px;padding-bottom:6px} .cmptbl.items td.dn{font-weight:var(--w-reg)} .cmptbl.items td.base{font-size:var(--fs-body)} .crow2{display:grid;grid-template-columns:18px 1fr auto auto;gap:var(--sp-3);align-items:baseline;padding:var(--sp-2) 0;border-bottom:1px solid var(--hair2);font-size:var(--fs-body)} .crow2:last-of-type{border-bottom:0} .crow2 .cnm{font-weight:var(--w-emph)} .crow2 .cnm small{font-weight:var(--w-reg);color:var(--ink3);font-size:var(--fs-nano);margin-left:var(--sp-2);letter-spacing:var(--ls-cap)} .crow2 .cph{color:var(--ink2);font-size:var(--fs-cap);white-space:nowrap} .crow2 .cph b{font-size:14px;color:var(--ink)} .addcomp{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--hair2);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)} .addcomp .af label{display:block;font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink2);text-transform:uppercase;margin-bottom:4px} .addcomp .af label small{text-transform:none;letter-spacing:.04em;color:var(--ink3);margin-left:var(--sp-2)} .afrow{display:flex;gap:var(--sp-2);align-items:flex-end} .afrow input,.afrow select{flex:1;min-width:0;padding:var(--sp-2) 2px;border:0;border-bottom:1px solid var(--hair);background:transparent; color:var(--ink);font-size:var(--fs-body);letter-spacing:var(--ls-body)} .afrow input:focus,.afrow select:focus{outline:none;border-bottom-color:var(--accent)} .afrow select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 49%,var(--ink3) 50%,transparent 61%),linear-gradient(135deg,transparent 49%,var(--ink3) 50%,transparent 61%); background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:24px} .genbtn.sm{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-micro);white-space:nowrap} .genbtn.ghost{background:var(--ink);color:var(--bg);border-color:var(--ink)} .genbtn.ghost:hover{background:transparent;color:var(--ink)} @media(max-width:1100px){.addcomp{grid-template-columns:1fr}} /* ============================================================ 14. レスポンシブ ============================================================ */ @media(max-width:1440px){ :root{--sidew:212px;--agentw:352px} #main{padding:var(--sp-6) var(--sp-7) var(--sp-11)} } /* ============================================================ 16. v6 追加 — 相手（誰に伝わっているか）・伝わり方タブ・ガント・内部資料・アイコン トークンは §1 のまま。判定色は使わない（ある／薄い／ない は無彩の塗り量で表す）。 ============================================================ */ /* アイコン（インラインSVG）共通 */ .ico{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px} .ico.lg{width:22px;height:22px;flex-basis:22px} /* ---- ヒアリング: 相手を選ぶタイル ---- */ .audpick{margin:var(--sp-2) 0 var(--sp-4)} .agrp+.agrp{margin-top:var(--sp-3)} .aglab{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);text-transform:uppercase;margin-bottom:6px} .atiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .atile{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--hair);background:var(--raised); color:var(--ink2);font-family:inherit;font-size:var(--fs-body);letter-spacing:var(--ls-body);cursor:pointer;text-align:left;transition:.15s} .atile:hover{border-color:var(--ink3);color:var(--ink)} .atile.on{border-color:var(--ink);color:var(--ink);background:var(--bg)} .atile.on .ico{color:var(--accent-ink)} .atile span{line-height:1.4} /* ---- ヘッダーの相手チップ ---- */ .audchip{display:inline-flex;align-items:center;gap:6px;color:var(--ink2)} .audchip .ico{color:var(--accent-ink)} /* ---- 伝わり方タブ ---- */ .gaphead{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap} .gaphead select{padding:6px 26px 6px 8px;border:1px solid var(--hair);background:var(--raised);color:var(--ink);font-family:inherit; font-size:var(--fs-body);letter-spacing:var(--ls-body);appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 49%,var(--ink3) 50%,transparent 61%),linear-gradient(135deg,transparent 49%,var(--ink3) 50%,transparent 61%); background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat} .gaphead select:focus{outline:none;border-color:var(--accent)} .gcount{display:inline-flex;gap:var(--sp-4);margin-left:auto;font-size:var(--fs-cap);color:var(--ink2)} .gcount b{font-weight:var(--w-emph);color:var(--ink);margin-left:4px} /* 状態のピクトグラム: ある=塗り／薄い=半分／ない=枠だけ */ .pict{width:14px;height:14px;flex:0 0 14px;display:inline-block;vertical-align:-2px} .pict circle,.pict path{stroke:var(--ink);stroke-width:1.3} .pict.yes circle{fill:var(--ink)} .pict.thin circle{fill:none} .pict.thin path{fill:var(--ink);stroke:none} .pict.unknown circle{fill:none;stroke:var(--ink3);stroke-dasharray:1.5 2} .pict.unknown text{font-family:var(--font-num);fill:var(--ink3)} .gtile.unknown{border-style:dotted;background:var(--bg)} .gtile.unknown .gst{color:var(--ink3)} .pict.no circle{fill:none;stroke:var(--ink3);stroke-dasharray:2 2} /* 10個のタイル */ .gtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2)} .gtile{border:1px solid var(--hair);background:var(--bg);padding:var(--sp-3) var(--sp-3) var(--sp-2);min-height:112px;display:flex;flex-direction:column;gap:6px;transition:.15s} .gtile.no{background:var(--raised);border-style:dashed} .gtile.quick{border-color:var(--accent)} .gtile .gt{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-body);line-height:1.5;color:var(--ink);min-height:38px} .gtile.no .gt,.gtile.thin .gt{color:var(--ink)} .gtile .gst{font-size:var(--fs-nano);letter-spacing:var(--ls-cap);color:var(--ink3)} .gtile .peer{margin-top:auto} .peer .pl{display:flex;justify-content:space-between;font-size:var(--fs-nano);color:var(--ink3);letter-spacing:.04em;margin-bottom:3px} .peer .pl b{color:var(--ink2);font-weight:var(--w-reg)} .peer .pb{height:3px;background:var(--track);position:relative} .peer .pb i{position:absolute;left:0;top:0;bottom:0;background:var(--ink3)} .gtile.quick .peer .pb i{background:var(--accent)} .gtile .gup{font-size:var(--fs-nano);color:var(--accent-ink);letter-spacing:.04em;margin-top:2px} .gtile .gup b{font-weight:var(--w-emph)} .gnote{margin-top:var(--sp-3);font-size:var(--fs-cap);color:var(--ink2);line-height:1.8} .gnote a{color:var(--accent-ink);border-bottom:1px solid var(--hair)} .gkey{display:flex;gap:var(--sp-5);font-size:var(--fs-nano);color:var(--ink3);letter-spacing:var(--ls-cap);margin:0 0 var(--sp-3);align-items:center} .gkey span{display:inline-flex;align-items:center;gap:5px} .gkey .sw{width:10px;height:10px;border:1px solid var(--accent);display:inline-block} @media(max-width:1300px){.gtiles{grid-template-columns:repeat(2,1fr)}.gtile{min-height:0}} /* 相手別の点: 標準との差 */ .viewrow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3)} .vcell{border-top:1px solid var(--hair);padding-top:var(--sp-2)} .vcell .vn{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);text-transform:uppercase} .vcell .vs{font-size:var(--fs-num);font-weight:var(--w-thin);letter-spacing:var(--ls-num);line-height:1.2;margin-top:2px} .vcell .vs small{font-size:var(--fs-nano);color:var(--ink3);font-weight:var(--w-reg);margin-left:6px;letter-spacing:.04em} .vcell .vd{font-size:var(--fs-nano);color:var(--ink2);letter-spacing:.04em} .bignum{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3)} .bignum .bn{font-size:44px;font-weight:var(--w-thin);letter-spacing:-.03em;line-height:1} .bignum .bl{font-size:var(--fs-cap);color:var(--ink2);line-height:1.6} .bignum .bl b{display:block;color:var(--ink);font-weight:var(--w-emph)} /* 内部資料 */ .frow{display:grid;grid-template-columns:20px 1fr auto auto;gap:var(--sp-3);align-items:center;padding:8px 0;border-bottom:1px solid var(--hair2);font-size:var(--fs-body)} .frow:last-of-type{border-bottom:0} .frow .fn small{display:block;font-size:var(--fs-nano);color:var(--ink3);letter-spacing:.04em} .frow .fc{font-size:var(--fs-cap);color:var(--ink2);white-space:nowrap} .fadd{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--hair2)} .fadd input[type=text]{flex:1;min-width:200px;padding:var(--sp-2) 2px;border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--ink);font-size:var(--fs-body);letter-spacing:var(--ls-body)} .fadd input[type=text]:focus{outline:none;border-bottom-color:var(--accent)} .fadd input[type=file]{display:none} .upl{display:grid;grid-template-columns:1fr auto;gap:var(--sp-3) var(--sp-5);align-items:center;padding:9px 0;border-bottom:1px solid var(--hair2)} .upl:last-of-type{border-bottom:0} .upl .ut{font-size:var(--fs-body);font-weight:var(--w-emph)} .upl .uf{font-size:var(--fs-cap);color:var(--ink2);line-height:1.7;margin-top:2px} .upl .uw{font-size:var(--fs-cap);color:var(--accent-ink);margin-top:2px} .upl .ub{width:170px} .upbar{position:relative;height:6px;background:var(--track)} .upbar .cur{position:absolute;left:0;top:0;bottom:0;background:var(--ink)} .upbar .pot{position:absolute;top:0;bottom:0;background:var(--accent)} .upnum{display:flex;justify-content:space-between;font-size:var(--fs-nano);color:var(--ink3);margin-top:3px;letter-spacing:.04em} .upnum b{color:var(--accent-ink);font-weight:var(--w-emph)} /* ---- 実行プラン: ガント ---- */ .gantt{display:grid;grid-template-columns:minmax(220px,1.1fr) repeat(3,1fr);gap:0 var(--sp-2)} .gantt .gh{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);text-transform:uppercase;padding:0 0 8px;border-bottom:1px solid var(--ink)} .gantt .gh small{text-transform:none;letter-spacing:.04em;margin-left:6px} .gantt .gh.first{color:var(--ink2)} .gantt .gr{display:contents} .gantt .gname{display:flex;align-items:flex-start;gap:8px;padding:10px var(--sp-2) 10px 0;border-bottom:1px solid var(--hair2);font-size:var(--fs-body);line-height:1.5;cursor:pointer} .gantt .gname:hover{color:var(--accent-ink)} .gantt .gname .no{color:var(--ink3);font-size:var(--fs-cap);flex:0 0 22px;padding-top:1px} .gantt .gname .ipill{margin-left:auto;flex:0 0 auto} .gantt .gcell{padding:10px 0;border-bottom:1px solid var(--hair2);border-left:1px solid var(--hair2);display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:44px} .gantt .gcell:first-of-type{border-left:0} .gbar{display:flex;align-items:center;gap:6px;padding:3px 8px;background:var(--surface-2);font-size:var(--fs-cap);line-height:1.5;color:var(--ink);cursor:pointer;border-left:3px solid var(--ink3);margin:0 4px} .gbar.simone{border-left-color:var(--accent);background:var(--accent-soft)} .gbar:hover{background:var(--raised)} .gbar .ico{width:12px;height:12px;flex-basis:12px;color:var(--ink2)} .gantt .gsum{grid-column:1/-1;display:flex;gap:var(--sp-5);padding:var(--sp-3) 0 0;font-size:var(--fs-nano);color:var(--ink3);letter-spacing:var(--ls-cap);align-items:center} .gantt .gsum i{display:inline-block;width:14px;height:8px;border-left:3px solid var(--ink3);background:var(--surface-2);vertical-align:-1px;margin-right:4px} .gantt .gsum i.simone{border-left-color:var(--accent);background:var(--accent-soft)} .cmptbl th.pend small{display:block;font-weight:var(--w-reg);color:var(--ink3);letter-spacing:var(--ls-cap)} .cmptbl td.pend{color:var(--ink3)} .gantt .gsum>span{white-space:nowrap} .gantt .gsum>span.g90{white-space:normal;flex:1 1 12em;min-width:0;text-align:right} @media(max-width:1100px){.gantt{grid-template-columns:1fr 1fr 1fr 1fr}} /* 実行プラン: 課題の筋は畳んで、頭だけ見せる */ details.story>summary{list-style:none;cursor:pointer} details.story>summary::-webkit-details-marker{display:none} details.story>summary .sthead{border-bottom:0;flex-wrap:wrap} details.story>summary .sthead .tt{flex:1 1 auto;min-width:16em} details.story[open]>summary .sthead{border-bottom:1px solid var(--hair2)} .sthead .mtitles{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;padding-left:34px} .sthead .mtitles .chip{color:var(--ink)} .sthead .caret{color:var(--ink3);font-size:var(--fs-cap);margin-left:var(--sp-2);transition:transform .15s} details.story[open] .sthead .caret{transform:rotate(90deg)} /* ============================================================ 17. v7 追加（2026-09-10・指示書 01）— ログイン・共有リンク・削除・環境名 黒塗り＝押せる（.repbtn）。二番手の押せるものは白地＋枠のチップ（.chipbtn）。枠なし文字＝押せない ============================================================ */ .userbox a.un{display:inline-block;color:var(--ink);font-weight:var(--w-emph);border-bottom:1px solid var(--hair)} .userbox a.un:hover{border-bottom-color:var(--ink)} .envtag{margin-top:var(--sp-4);font-size:var(--fs-nano);letter-spacing:.24em;color:var(--ink3);text-transform:uppercase} .hsep{display:inline-block;width:1px;height:18px;background:var(--hair);margin:0 var(--sp-3) 0 var(--sp-4)} .repbtns button.repbtn{font-family:inherit;cursor:pointer} .chipbtn{border:1px solid var(--hair);background:var(--raised);color:var(--ink2);padding:3px 10px;font-size:var(--fs-micro); letter-spacing:.06em;font-family:inherit;cursor:pointer;transition:.15s;line-height:1.6} .chipbtn:hover{border-color:var(--ink);color:var(--ink)} .chipbtn.on{border-color:var(--ink);color:var(--ink);background:var(--bg)} .chipbtn:disabled{opacity:.4;cursor:default} .repbtns .chipbtn{margin-left:var(--sp-3)} /* 共有リンクのモーダル */ .sharebox{width:600px} .sharetbl td:first-child{word-break:break-all} .sharebox .mrow{position:static;margin-top:var(--sp-4);border-top:0;padding:0} .daypick{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)} .urlbox{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);padding:var(--sp-2) var(--sp-3); border:1px solid var(--hair);background:var(--raised)} .urlbox .u{flex:1;font-size:var(--fs-sm);color:var(--ink);word-break:break-all;font-family:var(--font-num);letter-spacing:0} .urlbox[hidden]{display:none} .sharebox .msg{margin-top:var(--sp-2);font-size:var(--fs-cap);color:var(--ink2);min-height:1.4em} .sharebox .note{font-size:var(--fs-cap);color:var(--ink3);margin-top:var(--sp-2)} .sharetbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-top:var(--sp-2);background:var(--raised);border:1px solid var(--hair)} .sharetbl td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--hair2);vertical-align:middle;color:var(--ink)} .sharetbl tr:last-child td{border-bottom:0} .sharetbl td.st{color:var(--ink2);white-space:nowrap} .sharetbl td.num{text-align:right;white-space:nowrap;font-family:var(--font-num)} .sharetbl td.ops{text-align:right;white-space:nowrap} .sharetbl tr.off td{color:var(--ink3)} /* ============================================================ 18. v7 追加（2026-09-10・指示書 02）— 人の訂正を覚える（伝わり方タブ） 直す・取り消す＝白地＋枠のチップ（二番手の操作）。保存＝黒塗り。人が確認した印は金茶の下線 ============================================================ */ .gtile .gops{display:flex;gap:var(--sp-2);justify-content:flex-end;margin-top:4px} .lnkbtn{border:1px solid var(--hair);background:var(--raised);color:var(--ink2);padding:1px 8px;font-size:var(--fs-nano);letter-spacing:.06em; font-family:inherit;cursor:pointer;line-height:1.7;transition:.15s} .lnkbtn:hover{border-color:var(--ink);color:var(--ink)} .gtile.editing{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset} .gst .hm,.gkey i.hm{font-style:normal;color:var(--accent-ink);border-bottom:1px solid var(--accent);margin-left:6px;white-space:nowrap;letter-spacing:.04em} .gkey i.hm{margin:0 4px 0 0} .gst .pop{margin-left:2px;vertical-align:0} .gst .pop .popbody{min-width:300px;text-transform:none;letter-spacing:0;font-size:var(--fs-cap);line-height:1.8} .gst .pop .popbody a{color:var(--accent-ink);border-bottom:1px solid var(--hair)} /* 前回の人の判定と今回の AI が違う行 */ .gconf{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4); border-left:2px solid var(--accent);background:var(--raised);font-size:var(--fs-cap);line-height:1.7;color:var(--ink)} .gconf .gct{flex:1 1 320px} .gconf .gct small{display:block;color:var(--ink3);font-size:var(--fs-nano);letter-spacing:.04em} .gconf .gct a{color:var(--accent-ink);border-bottom:1px solid var(--hair)} .gconf .gcops{display:flex;gap:var(--sp-2);flex-wrap:wrap} /* 直すフォーム（タイルの下に開く） */ .corrform{margin-top:var(--sp-3);padding:var(--sp-4) var(--sp-5);border:1px solid var(--ink);background:var(--raised)} .corrform .cfh{font-size:var(--fs-body);color:var(--ink);margin-bottom:var(--sp-3);display:flex;gap:var(--sp-3);align-items:baseline;flex-wrap:wrap} .corrform .cfh b{font-weight:var(--w-emph)} .corrform .cfh span{font-size:var(--fs-cap);color:var(--ink2)} .corrform .cfrow{margin-top:var(--sp-3)} .corrform label{display:block;font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink2);text-transform:uppercase;margin-bottom:4px} .corrform label em.req{font-style:normal;color:var(--accent-ink);border:1px solid var(--accent);font-size:8.5px;padding:0 4px;margin-left:4px;letter-spacing:.06em} .corrform label small{font-size:var(--fs-nano);color:var(--ink3);letter-spacing:.04em;margin-left:6px;text-transform:none} .corrform input[type=text],.corrform input[type=url]{width:100%;padding:var(--sp-2) 2px;border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--ink); font-size:var(--fs-body);letter-spacing:var(--ls-body);font-family:inherit} .corrform input:focus{outline:none;border-bottom-color:var(--accent)} .corrform .daypick{margin-top:0} .corrform .daypick .chipbtn{display:inline-flex;align-items:center;gap:5px} .corrform .cfchk{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);text-transform:none;letter-spacing:0;font-size:var(--fs-cap);color:var(--ink);cursor:pointer} .corrform .cfchk input{width:auto;margin:0} .corrform .cfrow.ops{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap} .corrform .msg{font-size:var(--fs-cap);color:var(--ink2);min-height:1.4em} .corrform .cfnote{font-size:var(--fs-nano);color:var(--ink3);letter-spacing:.04em;margin-left:auto} /* ============================================================ 19. v7 追加（2026-09-10・指示書 03）— 測り直しと前回との差・2 回採点 点は変えない。差は「読み方」。上がった＝金茶（アクセント）、下がった＝インク。判定色は使わない ============================================================ */ /* 見出しの右のボタンが増えた（前回との差・測り直す）。窓が狭いときはボタン列を折り返し、ブランド名を縦に割らない */ .headrow{flex-wrap:wrap} .hleft{flex:1 1 360px} .repbtns{flex-wrap:wrap;row-gap:var(--sp-2)} /* 履歴: 系列を 1 つにまとめた印（◯回目） */ .hist .hr{display:inline-flex;align-items:center;gap:var(--sp-2)} .serchip{border:1px solid var(--accent);background:transparent;color:var(--accent-ink);padding:0 6px;font-size:var(--fs-nano);letter-spacing:.06em; font-family:inherit;cursor:pointer;line-height:1.7;transition:.15s} .serchip:hover{background:var(--accent);color:var(--bg)} /* 系列の一覧（モーダル） */ .serbox{width:520px} .sertbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--raised);border:1px solid var(--hair)} .sertbl td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--hair2);vertical-align:middle;color:var(--ink);cursor:pointer} .sertbl tr:last-child td{border-bottom:0} .sertbl tr:hover td{background:var(--bg)} .sertbl tr.cur td{background:var(--bg)} .sertbl td.no{color:var(--ink2);white-space:nowrap;letter-spacing:.06em} .sertbl td.st{color:var(--ink2);white-space:nowrap} .sertbl td.num{text-align:right;white-space:nowrap;font-family:var(--font-num);font-variant-numeric:tabular-nums} .sertbl td.df{color:var(--ink3);width:4em} .sertbl td.ops{text-align:right;white-space:nowrap} .sertbl .here{font-size:var(--fs-nano);letter-spacing:.1em;color:var(--ink3)} /* 診断結果: 総合の下の 1 行 */ .dline{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-2) 0 var(--sp-2) 8px;font-size:var(--fs-cap);color:var(--ink2);letter-spacing:var(--ls-cap)} .dline b{color:var(--ink);font-weight:var(--w-emph);font-size:var(--fs-body)} .dline b.up{color:var(--accent-ink)} /* 右パネル（前回との差） */ .dpanel{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:100%;background:var(--surface);border-left:1px solid var(--hair);z-index:55; display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(49,44,38,.10)} .dpanel[hidden]{display:none} .dphead{display:flex;align-items:baseline;gap:var(--sp-3);padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--hair);background:var(--raised)} .dphead b{font-size:var(--fs-body);letter-spacing:.14em;font-weight:var(--w-emph)} .dphead span{flex:1;font-size:var(--fs-nano);color:var(--ink3);letter-spacing:.08em} .dphead button{border:0;background:transparent;color:var(--ink3);font-size:17px;padding:0 2px;line-height:1;cursor:pointer} .dphead button:hover{color:var(--ink)} .dpbody{padding:var(--sp-5) var(--sp-6) var(--sp-8);overflow-y:auto;flex:1} .dpbody .dhl{font-size:var(--fs-lead);font-weight:var(--w-light);line-height:1.8;margin:0 0 var(--sp-5);color:var(--ink)} .dtbl{width:100%;border-collapse:collapse;background:var(--raised);border:1px solid var(--hair)} .dtbl th{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);text-align:left;text-transform:uppercase;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--ink)} .dtbl th.r{text-align:right} .dtbl td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--hair2);color:var(--ink);font-size:var(--fs-body)} .dtbl td.dn{font-weight:var(--w-emph);white-space:nowrap} .dtbl td.num{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap} .dtbl td.prev{color:var(--ink2);font-weight:var(--w-light)} .dtbl td.cur{font-size:var(--fs-h3);font-weight:var(--w-thin);letter-spacing:var(--ls-num)} .dtbl td.df{color:var(--ink3);font-weight:var(--w-emph)} .dtbl td.df.up{color:var(--accent-ink)} .dtbl td.df.dn{color:var(--ink)} .dtbl tr.tot td{border-top:1px solid var(--ink);border-bottom:0} .dtbl tr.tot td.cur{font-size:var(--fs-num)} .dsec{margin-top:var(--sp-6)} .dsec .dh{font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink2);text-transform:uppercase;margin-bottom:var(--sp-2);padding-bottom:4px;border-bottom:1px solid var(--hair)} .dsec .dh small{text-transform:none;letter-spacing:.04em;color:var(--ink3);margin-left:var(--sp-2)} .dmrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:2px var(--sp-3);align-items:baseline;padding:var(--sp-2) 0;border-bottom:1px solid var(--hair2);font-size:var(--fs-sm);color:var(--ink)} .dmrow:last-child{border-bottom:0} .dmrow .mn{font-weight:var(--w-emph)} .dmrow .mn small{display:block;font-weight:var(--w-reg);color:var(--ink3);font-size:var(--fs-nano);letter-spacing:.06em} .dmrow .ms{color:var(--ink2);white-space:nowrap} .dmrow .ms b{color:var(--ink);font-weight:var(--w-emph)} .dmrow .md{font-weight:var(--w-emph);white-space:nowrap;color:var(--ink3)} .dmrow .md.up{color:var(--accent-ink)}.dmrow .md.dn{color:var(--ink)} .dmrow .mr{grid-column:1 / -1;color:var(--ink2);font-size:var(--fs-cap);line-height:1.7} .dgrow{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--hair2);font-size:var(--fs-sm);color:var(--ink)} .dgrow:last-child{border-bottom:0} .dgrow b{font-weight:var(--w-emph)} .dgrow .pict{margin:0 2px;vertical-align:-1px} .dgrow .pp{display:block;font-size:var(--fs-nano);color:var(--ink3);text-decoration:underline;text-underline-offset:2px;margin-top:2px} /* 直し 2: 前回「ある」→今回「ない／薄い」の行。前回の判定で見たページ */ .dpbody .note{margin-top:var(--sp-3);color:var(--ink2)} .dpbody .lnk{margin-left:var(--sp-2)} /* 測り直すモーダル */ .rembox{width:560px} .remset{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-4);font-size:var(--fs-sm)} .remset .u{color:var(--ink);font-family:var(--font-num);letter-spacing:0;word-break:break-all;margin-right:var(--sp-2)} .remset .chip small{color:var(--ink3);margin-right:5px;letter-spacing:.06em} .remcost{margin-top:var(--sp-4);font-size:var(--fs-body);color:var(--ink)} .remcost b{font-size:var(--fs-num);font-weight:var(--w-light);font-family:var(--font-num);letter-spacing:var(--ls-num)} .rembox .msg{margin-top:var(--sp-2);font-size:var(--fs-cap);color:var(--ink2);min-height:1.4em} .rembox .mrow{position:static;margin-top:var(--sp-5)} /* チェック（新しい診断・測り直し共通。ラベルは小文字のまま） */ .mbox label.chk{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5);text-transform:none;letter-spacing:0;font-size:var(--fs-body);color:var(--ink);cursor:pointer} .mbox label.chk input{width:auto;margin:0;accent-color:var(--ink)} .mbox label.chk small{font-size:var(--fs-cap);color:var(--ink3);letter-spacing:.04em;margin-left:0} .mbox label.chk[hidden],#fRunsRow[hidden]{display:none} /* ============================================================ 20. v7 追加（2026-09-10・指示書 04）— 相手の目で採点し直した点（別の数字） 標準の点は変えない。相手の目の点は表の 1 列（グレー）とレーダーの破線。判定色は使わない ============================================================ */ .gaphead .lensbtn{margin-left:var(--sp-2)} .lensnote{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-cap);color:var(--ink2);letter-spacing:var(--ls-cap);margin-left:var(--sp-2)} .lensnote.err{color:var(--t-vl-deep,var(--ink))} .lensnote .loader.sm{display:inline-block;width:56px;height:2px;margin:0} .dimtable td.ds.lz{color:var(--ink2);font-size:20px} .lenstbl{width:100%;border-collapse:collapse;margin-top:var(--sp-3);font-size:var(--fs-cap)} .lenstbl td{padding:4px 0;border-bottom:1px solid var(--hair2);vertical-align:top;color:var(--ink)} .lenstbl td:first-child{white-space:nowrap;font-weight:var(--w-emph);padding-right:var(--sp-3);color:var(--ink2)} /* 相手の目の列の ? は右端に近いので右揃えで開く（DESIGN §3）。中の表は小さく */ .dimtable th.lzh .popbody{left:auto;right:-6px;min-width:420px;text-transform:none;letter-spacing:0} /* ============================================================ 21. v7 追加（2026-09-10・指示書 05）— 予算・稼働の配分（単価表 × 稼働の機械計算） 帯の右に金額（千円）。表は 施策｜担当｜稼働｜金額。時期の小計は区切り行（列の色ではなく） ============================================================ */ .gbar .gamt{margin-left:auto;flex:0 0 auto;font-style:normal;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-nano);color:var(--ink2);white-space:nowrap;letter-spacing:.02em} .gbar>span{min-width:0} .budtbl{width:100%;border-collapse:collapse;font-size:var(--fs-body)} .budtbl th{text-align:left;font-size:var(--fs-nano);letter-spacing:var(--ls-label);color:var(--ink3);font-weight:var(--w-reg);text-transform:uppercase;padding:0 var(--sp-3) 8px 0;border-bottom:1px solid var(--ink)} .budtbl th.num,.budtbl td.num{text-align:right;padding-right:0;white-space:nowrap;font-family:var(--font-num);font-variant-numeric:tabular-nums} .budtbl td{padding:var(--sp-2) var(--sp-3) var(--sp-2) 0;border-bottom:1px solid var(--hair2);vertical-align:baseline;line-height:1.7;color:var(--ink)} .budtbl tr[data-story]{cursor:pointer} .budtbl tr[data-story]:hover td.mt{color:var(--accent-ink)} .budtbl td.mt .no{color:var(--ink3);font-size:var(--fs-cap);margin-right:8px} .budtbl td.ow{white-space:nowrap;color:var(--ink2)} .budtbl td.ow .ico{width:12px;height:12px;margin-right:4px;vertical-align:-1px;color:var(--ink2)} .budtbl td.ef{color:var(--ink2);font-size:var(--fs-sm)} .budtbl td.ef.pend{color:var(--ink3)} .budtbl tr.sep td{font-weight:var(--w-emph);color:var(--ink);padding-top:var(--sp-4);border-bottom:1px solid var(--ink)} .budtbl tr.sep td small{font-weight:var(--w-reg);color:var(--ink3);margin-left:var(--sp-2);letter-spacing:var(--ls-cap);font-size:var(--fs-nano)} .budtbl tr.tot td{border-bottom:0;border-top:1px solid var(--ink);padding-top:var(--sp-3);font-weight:var(--w-emph)} .budtbl tr.tot td small{font-weight:var(--w-reg);color:var(--ink3);margin-left:var(--sp-2);letter-spacing:var(--ls-cap);font-size:var(--fs-nano)} .budtbl tr.tot td.num{font-size:var(--fs-h3);font-weight:var(--w-light);letter-spacing:var(--ls-num)} .sharebox label.chk{margin-top:var(--sp-4)} .mbox label[hidden]{display:none}