/* ============================================================ PuRuth site-brand.css v0.6 (2026-09-16・宮地さん裁定 A／v0.3 二層ルール／v0.4 モジュール色グラデ／v0.5 金もグラデ／v0.6 独自シェル頁アダプタ) 基調＝紺＋金／見出し＝Shippori Antique B1（アンチック体） 欧文ラベル＝Cinzel／本文＝Noto Sans JP 読み込み順: lp.css → lp-dark.css → site-navigation.css → site-brand.css（最後） フォント: ============================================================ */ :root{ --paper:#050a10; /* 地色（紺） */ --white:#0b1622; /* パネル */ --ink:#f2f6fa; /* 文字 */ --muted:#9fb0bf; /* 補助文字 */ --line:#1c2c3a; /* 罫線 */ --accent:#c5a45b; /* 金 */ --accent-soft:#e2cf9a; /* 金（明） */ --accent-line:#6d5a2e; /* 金（罫） */ --accent-ink:#0a1420; /* 金の上の文字 */ --green:var(--accent);--mint:var(--accent); /* lp.css / lp-dark.css の旧トークンを金へ */ --sans:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic',Meiryo,sans-serif; --serif:'Cinzel','Times New Roman',serif; --display:'Shippori Antique B1','Hiragino Sans',serif; } body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-feature-settings:"palt" 1} h1,h2,h3,.h1,.h2{font-family:var(--display);font-weight:400;letter-spacing:.01em;word-break:auto-phrase;text-wrap:balance} h1{line-height:1.28}h2{line-height:1.45} .ph{display:inline-block} /* 文節単位の改行ヒント */ /* ラベル（英字小見出し）＝Cinzel */ .eyebrow,.slider-cap,.hero-scroll,.value-card h3 small,.value-sum h3 small,.purpose h3 small,.news-list time,.news-list .tag,.spec dt,.footer-bottom,.global-footer-column h2,.value-card .q,details.en-more summary,.en .en-title,.msg-title small,.sign span{font-family:var(--serif)} .eyebrow{color:var(--accent);letter-spacing:.2em;font-weight:600} .ink-accent{color:var(--accent-soft)} .rule,.small-rule{background:var(--accent)} /* ボタン */ .button{border-radius:3px;letter-spacing:.04em} .button-primary{background:var(--accent);color:var(--accent-ink)} .button-primary:hover{background:var(--accent-soft);color:var(--accent-ink)} .button-ghost{border-color:var(--accent-line);color:var(--accent-soft)} .button-ghost:hover{border-color:var(--accent);color:var(--accent-soft)} .text-link{border-bottom-color:var(--accent-line)}.text-link:hover{color:var(--accent-soft)} /* ヘッダー／フッター（site-navigation.css の水色を金へ） */ .site-header{background:#050a10f5;border-color:var(--line)} .site-header .brand{color:var(--accent-soft)} .site-header nav a:hover,.site-header nav>a:hover{color:var(--accent-soft)} .service-menu summary{color:#f0f4f7}.service-menu summary:hover{color:var(--accent-soft)} .service-links{background:#0b1622;border-color:var(--line)} .site-header .service-links a:hover,.service-links a[aria-current=page]{background:#132131;color:var(--accent-soft)} .service-links small{color:var(--muted)} .service-links .release-label{border-color:var(--accent-line);color:var(--accent-soft);background:#141f14} .global-footer-column a:hover{color:var(--accent-soft)} .nav-badge{color:var(--accent-soft);border-color:var(--accent-line)}.nav-badge.pending{color:#8295a3;border-color:#334653} .site-header a:focus-visible,.site-header summary:focus-visible,.site-footer a:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px} .site-footer{background:var(--paper);border-top-color:var(--line)} /* 装飾（ヒーロー背景のグリッド／光は金へ） */ .hero:before{background:radial-gradient(ellipse at 78% 36%,#c5a45b14,transparent 53%)} /* ------------------------------------------------------------ v0.3 二層ルール（2026-09-15 宮地さん承認） ① サイトの外装（ヘッダー／フッター／見出し書体／英字ラベル／CTA／罫／選択色）＝ブランドの金 ② モジュールの識別（ヒーロー強調語・自モジュールのタイル・タブ/棒/比較などモジュール固有のデータ表現・ プラットフォーム図の全タイル）＝ --mod-*（正本: SPEC_ZTT_PLATFORM_SKELETON.md §9.8） ページ側は で自モジュールを宣言する（未宣言＝金）。 データ色（Google カレンダーのイベント色）は触らない。 ------------------------------------------------------------ */ :root{--mod-e:#00d4ff;--mod-h:#E078B0;--mod-s:#E07850;--mod-a:#DEB055;--mod-w:#8878D0;--mod-p:#50B080; --mod:var(--accent);--mod-soft:var(--accent-soft);--mod-ink:var(--accent-ink); --accent-dim:#8f7d4b;--accent-ink-deep:#3a2e10;--panel-warm:#141a22;--panel-warm-2:#1a1f28;--panel-gold:#1e1a12} /* v0.4 モジュール色はグラデーション（明→基調→濃）。明/濃の値は各 LP の --color-accent-light/-dark と service 図の SVG gradient から【実測】 */ :root{--mod-e-l:#7fe6ff;--mod-e-d:#008fea;--mod-h-l:#f0a8d0;--mod-h-d:#b9619a;--mod-a-l:#f8d878;--mod-a-d:#a05808;--mod-s-l:#ffa840;--mod-s-d:#c82808;--mod-w-l:#a898e8;--mod-w-d:#5848a0;--mod-p-l:#70e8c0;--mod-p-d:#308868; --grad-e:linear-gradient(135deg,var(--mod-e-l),var(--mod-e) 55%,var(--mod-e-d));--grad-h:linear-gradient(135deg,var(--mod-h-l),var(--mod-h) 55%,var(--mod-h-d)); --grad-a:linear-gradient(135deg,var(--mod-a-l),var(--mod-a) 55%,var(--mod-a-d));--grad-s:linear-gradient(135deg,var(--mod-s-l),var(--mod-s) 55%,var(--mod-s-d)); --grad-w:linear-gradient(135deg,var(--mod-w-l),var(--mod-w) 55%,var(--mod-w-d));--grad-p:linear-gradient(135deg,var(--mod-p-l),var(--mod-p) 55%,var(--mod-p-d)); --grad-gold:linear-gradient(135deg,#ecdcac,var(--accent) 55%,#8f7d4b);--grad-gold-hover:linear-gradient(135deg,#f4e8c6,#d9bc74 55%,#a6925a);--mod-grad:var(--grad-gold)} html[data-module=e]{--mod:var(--mod-e);--mod-soft:#7fe6ff;--mod-ink:#031621;--mod-grad:var(--grad-e)} html[data-module=h]{--mod:var(--mod-h);--mod-soft:#f1b5d6;--mod-ink:#1b1020;--mod-grad:var(--grad-h)} html[data-module=s]{--mod:var(--mod-s);--mod-soft:#f0aa8a;--mod-ink:#1c1008;--mod-grad:var(--grad-s)} html[data-module=a]{--mod:var(--mod-a);--mod-soft:#eed3a0;--mod-ink:#1a1408;--mod-grad:var(--grad-a)} html[data-module=w]{--mod:var(--mod-w);--mod-soft:#b9aee6;--mod-ink:#14101f;--mod-grad:var(--grad-w)} html[data-module=p]{--mod:var(--mod-p);--mod-soft:#9ad8b8;--mod-ink:#0a1a12;--mod-grad:var(--grad-p)} /* ① 外装（lp-dark.css / lp-theme.css の旧アクセントを金へ） */ .hero h1{font-weight:400;letter-spacing:.01em} .hero:before{background:radial-gradient(ellipse at 78% 36%,#c5a45b14,transparent 53%),linear-gradient(#c5a45b07 1px,transparent 1px),linear-gradient(90deg,#c5a45b07 1px,transparent 1px);background-size:auto,64px 64px,64px 64px} @media(max-width:767px){.hero:before{background-size:auto,48px 48px,48px 48px}} .brand{color:var(--accent-soft)} .nav-cta,.site-header nav .nav-cta{border-color:var(--accent-line);color:var(--accent-soft)} .service-menu summary{border-bottom-color:var(--accent)} .edition{border-color:var(--accent-line);background:#c5a45b0f} .button-primary,.button-light{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 28px #c5a45b1f} .button-primary:hover,.button-light:hover{background:var(--accent-soft);color:var(--accent-ink);box-shadow:0 6px 32px #c5a45b38} .text-link{border-color:var(--accent-line)} .platform-explanation .text-link,.paper-icon{color:var(--accent-soft)} .checkmark{border-color:var(--accent-line);background:#c5a45b12;color:var(--accent-soft)} .film-chapters button:hover{color:var(--accent-soft)} .film-play>span:first-child{background:var(--accent);color:var(--accent-ink)} .work-flow li>span,.step-no,.fit-index,.faq-list summary span,.closing-signature>span,.platform-section .eyebrow{color:var(--accent)} .map-connector{color:var(--accent-dim)} .platform-core{border-color:var(--accent-line)} .closing{background:radial-gradient(ellipse at 80% 60%,#c5a45b10,transparent 60%),#0a1925} ::selection{background:var(--accent);color:var(--accent-ink)} /* ② 自モジュールの識別（--mod） */ .ink-accent{background:var(--mod-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .weekdays .today,.record-date,.record-time>span,.record-result strong,.actual-event small{color:var(--mod-soft)} .today b{background:var(--mod-grad);color:var(--mod-ink)} .actual-event{background:color-mix(in srgb,var(--mod) 26%,#0b1622);border-left-color:var(--mod);color:#f4f8fc} .compare-switch button[aria-pressed=true]{background:var(--mod-grad);color:var(--mod-ink)} .work-flow em{background:color-mix(in srgb,var(--mod) 10%,transparent);color:var(--mod-soft);border-color:color-mix(in srgb,var(--mod) 30%,transparent)} .fit-status{background:color-mix(in srgb,var(--mod) 12%,transparent);color:var(--mod-soft)} /* ② プラットフォーム図＝全タイルを SSOT 色（DOM 順 E,H,A,S,P／横断 W）・自モジュールは塗り */ .module-row .module:nth-child(1){color:var(--mod-e);border-color:color-mix(in srgb,var(--mod-e) 40%,#0b1c29)} .module-row .module:nth-child(2){color:var(--mod-h);border-color:color-mix(in srgb,var(--mod-h) 40%,#0b1c29)} .module-row .module:nth-child(3){color:var(--mod-a);border-color:color-mix(in srgb,var(--mod-a) 40%,#0b1c29)} .module-row .module:nth-child(4){color:var(--mod-s);border-color:color-mix(in srgb,var(--mod-s) 40%,#0b1c29)} .module-row .module:nth-child(5){color:var(--mod-p);border-color:color-mix(in srgb,var(--mod-p) 40%,#0b1c29)} .module-row .module span,#platform .module:not(.module-first) span{color:var(--muted)} .module-row .module strong,#platform .module:not(.module-first) strong{color:inherit} /* lp-theme の #platform … strong{#f4f8fc} を無効化しタイル色を継承 */ /* タイル名・W 帯名はモジュールのグラデーション文字（自モジュールは塗りの上なので単色） */ .module-row .module:not(.module-first) strong,#platform .module:not(.module-first) strong,.platform-wide strong,#platform .platform-wide strong{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .module-row .module:nth-child(1):not(.module-first) strong{background-image:var(--grad-e)} .module-row .module:nth-child(2):not(.module-first) strong{background-image:var(--grad-h)} .module-row .module:nth-child(3):not(.module-first) strong{background-image:var(--grad-a)} .module-row .module:nth-child(4):not(.module-first) strong{background-image:var(--grad-s)} .module-row .module:nth-child(5):not(.module-first) strong{background-image:var(--grad-p)} .platform-wide strong,#platform .platform-wide strong{background-image:var(--grad-w)} .module-row .module.module-first,#platform .module.module-first{background:var(--mod-grad);color:var(--mod-ink);border-color:var(--mod);box-shadow:0 0 35px color-mix(in srgb,var(--mod) 14%,transparent)} .module-row .module.module-first span,.module-first strong,#platform .module.module-first strong,#platform .module.module-first span{color:var(--mod-ink)} .platform-wide,#platform .platform-wide{background:#0d1a26;border-color:color-mix(in srgb,var(--mod-w) 40%,#0d1a26)} .platform-wide strong,#platform .platform-wide strong{color:var(--mod-w)} .platform-source{border-color:#2a3a4a} .record-tags span{background:#16222e;color:#c9d1da} /* ② ZTT-H 固有（lp-theme.css の桃色直書き → --mod） */ .h-day-result,.h-stat>strong,.h-extension small,.h-people small,.h-people>div,.h-cost h3 span:last-child,.work-after .work-label,.work-views strong,.work-after .work-conclusion strong,.story-totals,.day-outputs,.kept-context,.cost-legend span:last-child,.record-bridge>span,.record-lenses strong,.kept-link,.shared-core,.shared-lenses b,.asset-flow b,.day-scene #day-symbol,.day-scene #day-clock,.day-insight strong,.work-events em,.work-engine small,.h-contrast article>div{color:var(--mod-soft)} @media(max-width:767px){.day-calendar button[aria-pressed=true] .day-inline{color:var(--mod-soft);border-top-color:var(--line)}.record-lenses>div{border-top-color:var(--line)}} .h-tabs button[aria-pressed=true]{background:var(--mod-grad);border-color:var(--mod);color:var(--mod-ink)} .h-bar span:nth-child(1),.cost-ratio span:last-child{background:var(--mod-grad)} .h-contrast article:last-child{border-color:var(--mod);background:color-mix(in srgb,var(--mod) 5%,transparent)} .h-interpretations .h-people{border-top-color:var(--mod)} .work-arrow{color:var(--mod)} .work-events>span,.record-bridge:before,.work-engine{border-color:color-mix(in srgb,var(--mod) 45%,#0b1622)} .work-after{border-color:color-mix(in srgb,var(--mod) 45%,#0b1622)!important} .simple-comparison article+article,.shared-record{border-color:color-mix(in srgb,var(--mod) 45%,#0b1622)} .cost-inputs>div+div{border-color:var(--mod);background:color-mix(in srgb,var(--mod) 6%,transparent);color:var(--mod-soft)} /* ZTT-H 固有・低彩度の紫寄り面／罫／補助文字 → 紺の面・--muted（モジュール色は上の識別箇所だけに絞る） */ .platform-section,#platform.platform-section{background:radial-gradient(ellipse at 50% 45%,#1b1912 0%,#081723 70%)} .platform-core,#platform .platform-core{background:linear-gradient(110deg,#221e14,#141a24)} .h-day{border-color:var(--line);background:linear-gradient(145deg,#111c2a,#0b1622)} .h-day-top,.h-extension article,.work-distribution,.work-conclusion,.story-totals>span,.shared-lenses,.shared-lenses b,.record-lenses:before,.record-lenses:after,.record-lenses>div:before{border-color:var(--line)} .h-day-top small,.h-timeline time,.h-timeline small,.h-stat>small,.work-engine p,.comparison-arrow,.record-bridge small,.shared-core span,.cost-inputs:before,.cost-inputs:after{color:var(--muted)} .h-tabs button{border-color:var(--line);color:#c9d1da} .record-label{color:var(--ink)} .work-systems>div,.work-views>div,.comparison-source,.day-calendar,.hero-record{border-color:var(--line)} .work-review{border-top-color:var(--line)} .shared-record{background:var(--panel-gold)} .work-engine{background:var(--panel-warm-2)} .day-calendar button{background:var(--panel-warm)} .day-calendar button[aria-pressed=true]{background:var(--panel-gold)} .day-outputs>div{background:var(--panel-warm);border-color:var(--line)} .hero-record{background:linear-gradient(145deg,#171c25,#0e1d28)} .h-cost{background:linear-gradient(110deg,#0d2934,#1e1a12)} /* ------------------------------------------------------------ v0.5 金の外装もグラデーション（2026-09-16 宮地さん指示）＝明 #ecdcac → 基調 #c5a45b → 濃 #8f7d4b（135deg） 塗り＝CTA・再生ボタン・罫・今日マーク（モジュール未宣言ページ）／文字＝英字ラベル・番号・FAQ 印・署名 ------------------------------------------------------------ */ .button-primary,.button-light{background:var(--grad-gold);color:var(--accent-ink)} .button-primary:hover,.button-light:hover{background:var(--grad-gold-hover);color:var(--accent-ink)} .rule,.small-rule,.film-play>span:first-child{background:var(--grad-gold)} .eyebrow,.platform-section .eyebrow,.step-no,.fit-index,.work-flow li>span,.faq-list summary span,.closing-signature>span,.value-card .q,.value-sum h3 small,.purpose h3 small,.value-card h3 small{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} /* ------------------------------------------------------------ v0.6 独自シェルのページ（系統 B/C＝lp.css を読まない）へのアダプタ（2026-09-16） 方針＝ページ本体の CSS は書き換えず、ページの :root トークンをここで再結線する。 ページは で宣言し、 ページ固有CSS → site-shell.css → site-navigation.css → site-brand.css の順で読む。 二層ルールは v0.3 のまま＝外装（CTA/英字ラベル/番号/罫/ヘッダー/フッター）＝金、 自モジュールの識別（ヒーロー強調語・統計数字・中核強調・アイコンの光）＝ --mod。 ------------------------------------------------------------ */ html[data-page] body{background:var(--paper);color:var(--ink);font-family:var(--sans)} html[data-page] h1,html[data-page] h2,html[data-page] h3,html[data-page] .hero-title,html[data-page] .section-title,html[data-page] .core-headline,html[data-page] .cta-title,html[data-page] .step-title,html[data-page] .pain-title,html[data-page] .domain-title,html[data-page] .feature-title,html[data-page] .flow-title{font-family:var(--display);font-weight:400;letter-spacing:.01em;word-break:auto-phrase;text-wrap:balance} /* 系統C＝ZTT-A/S/W/P の LP（インライン CSS・--color-accent がモジュール色で外装まで塗られていた） */ html[data-page=module]{--color-primary:var(--paper);--color-primary-light:#0b1622;--color-primary-dark:#03070c; --color-accent:var(--accent);--color-accent-light:var(--accent-soft);--color-accent-dark:var(--accent-dim);--color-accent-glow:color-mix(in srgb,var(--accent) 35%,transparent); --color-secondary:var(--accent-soft);--color-secondary-dark:var(--accent-dim); --gradient-neon:var(--grad-gold);--gradient-neon-subtle:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent) 5%,transparent)); --gradient-dark:linear-gradient(180deg,var(--paper) 0%,#0b1420 50%,var(--paper) 100%); --gradient-glow:radial-gradient(ellipse at center,color-mix(in srgb,var(--mod) 8%,transparent) 0%,transparent 70%); --color-text-primary:var(--ink);--color-text-secondary:#c3cfd9;--color-text-muted:var(--muted); --font-primary:var(--sans);--font-accent:var(--sans)} /* ② 自モジュールの識別 */ html[data-page=module] .title-accent,html[data-page=module] .stat-number{background:var(--mod-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none} html[data-page=module] .core-highlight{color:var(--mod-soft);text-shadow:none} html[data-page=module] .glow-effect{background:radial-gradient(ellipse,color-mix(in srgb,var(--mod) 7%,transparent) 0%,transparent 70%)} /* ① 外装 */ html[data-page=module] .grid-overlay{background-image:linear-gradient(#c5a45b08 1px,transparent 1px),linear-gradient(90deg,#c5a45b08 1px,transparent 1px)} html[data-page=module] .badge-text,html[data-page=module] .section-number,html[data-page=module] .domain-id,html[data-page=module] .feature-number,html[data-page=module] .layer-label,html[data-page=module] .scroll-text{font-family:var(--serif);font-weight:600;letter-spacing:.18em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} html[data-page=module] .hero-badge{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent) 6%,transparent)} html[data-page=module] .btn{border-radius:3px} html[data-page=module] .btn-cta-primary{background:var(--grad-gold);color:var(--accent-ink);box-shadow:0 6px 28px #c5a45b1f} html[data-page=module] .btn-cta-primary:hover{background:var(--grad-gold-hover);box-shadow:0 6px 32px #c5a45b38} html[data-page=module] .btn-cta-secondary{border-color:var(--accent-line);color:var(--accent-soft)} html[data-page=module] .btn-cta-secondary:hover{border-color:var(--accent);color:var(--accent-soft)} html[data-page=module] .coming-soon-badge{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--accent-soft)} html[data-page=module] .domain-card{background:color-mix(in srgb,var(--accent) 2%,transparent);border-color:color-mix(in srgb,var(--accent) 10%,transparent)} html[data-page=module] .domain-card:hover{border-color:color-mix(in srgb,var(--accent) 22%,transparent);background:color-mix(in srgb,var(--accent) 4%,transparent)} html[data-page=module] .problem-item:hover{border-color:color-mix(in srgb,var(--accent) 18%,transparent);background:color-mix(in srgb,var(--accent) 3%,transparent)} html[data-page=module] .problem-icon{background:color-mix(in srgb,var(--accent) 6%,transparent);border-color:color-mix(in srgb,var(--accent) 18%,transparent)} html[data-page=module] .stat-divider{background:var(--line)} /* 旧シェルは固定ナビ前提で hero 上部に 120px の余白を取っていた → 共通ヘッダー（sticky・90px）に合わせる */ html[data-page=module] .hero{min-height:calc(100svh - 90px);padding-top:64px} @media(max-width:1000px){html[data-page=module] .hero{min-height:calc(100svh - 74px)}} @media(max-width:640px){html[data-page=module] .hero{padding-top:48px;min-height:calc(100svh - 74px)}} /* 系統B＝シミュレーター（index.html と terms/privacy/legal/cancel/security/data-deletion-request の同シェル・style.css 共有） */ html[data-page=simulator]{--color-primary:var(--paper);--color-primary-light:#0b1622;--color-primary-dark:#03070c;--color-secondary:#0f1a28; --color-gold:var(--accent);--color-gold-light:var(--accent-soft);--color-gold-dark:var(--accent-dim);--color-gold-muted:color-mix(in srgb,var(--accent) 14%,transparent); --gradient-gold:var(--grad-gold);--shadow-gold:0 4px 20px color-mix(in srgb,var(--accent) 25%,transparent); --gradient-dark:linear-gradient(180deg,var(--paper) 0%,#0b1622 50%,var(--paper) 100%); --color-text-primary:var(--ink);--color-text-secondary:#c3cfd9;--color-text-muted:var(--muted); --font-heading:var(--display);--font-body:var(--sans);--font-accent:var(--sans); --color-mod-e:var(--mod-e);--color-mod-a:var(--mod-a);--color-mod-h:var(--mod-h);--color-mod-w:var(--mod-w);--color-mod-s:var(--mod-s)} html[data-page=simulator] .step-number,html[data-page=simulator] .badge-text{font-family:var(--serif);letter-spacing:.16em} html[data-page=simulator] .step-number{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-soft)} html[data-page=simulator] .btn,html[data-page=simulator] .btn-large{border-radius:3px} html[data-page=simulator] .btn-primary{color:var(--accent-ink)} html[data-page=simulator] .btn-large{background:var(--grad-gold);color:var(--accent-ink);border-color:var(--accent-line);box-shadow:0 6px 28px #c5a45b2a} html[data-page=simulator] .btn-large:hover{background:var(--grad-gold-hover);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 6px 32px #c5a45b38} html[data-page=simulator] .hero{padding-top:72px} html[data-page=simulator] .hero-fullscreen{min-height:calc(100svh - 90px)} /* ② プラットフォーム統合の帯・CCS タグ（ZTT-S LP 等）＝全タイルを SSOT 色（自タイルの --color-accent 参照は金に化けるので明示） */ html[data-page=module] .integration-module-e,html[data-page=module] .ccs-tag-e{color:var(--mod-e);border-color:color-mix(in srgb,var(--mod-e) 30%,transparent);background:color-mix(in srgb,var(--mod-e) 6%,transparent)} html[data-page=module] .integration-module-h{color:var(--mod-h);border-color:color-mix(in srgb,var(--mod-h) 30%,transparent);background:color-mix(in srgb,var(--mod-h) 6%,transparent)} html[data-page=module] .integration-module-a,html[data-page=module] .ccs-tag-a{color:var(--mod-a);border-color:color-mix(in srgb,var(--mod-a) 30%,transparent);background:color-mix(in srgb,var(--mod-a) 6%,transparent)} html[data-page=module] .integration-module-s,html[data-page=module] .ccs-tag-s{color:var(--mod-s);border-color:color-mix(in srgb,var(--mod-s) 30%,transparent);background:color-mix(in srgb,var(--mod-s) 6%,transparent)} html[data-page=module] .integration-module-w{color:var(--mod-w);border-color:color-mix(in srgb,var(--mod-w) 30%,transparent);background:color-mix(in srgb,var(--mod-w) 6%,transparent)} html[data-page=module] .integration-module-p{color:var(--mod-p);border-color:color-mix(in srgb,var(--mod-p) 30%,transparent);background:color-mix(in srgb,var(--mod-p) 6%,transparent)}