@charset "UTF-8"; /* ========================================================================= OFFICE ABLE — FX レイヤー（2026-08-04 追加） us.css の「後」に読み込む。既存の値は書き換えず、上に足すだけにしてある。 ・ここが読み込まれなくてもサイトは完全に成立する（全部が上乗せの演出） ・新しいCSS機能は必ず @supports で囲む。非対応ブラウザは素の us.css の見た目 ------------------------------------------------------------------------ 目次 01 @property 登録（グラデをアニメさせるための下地） 02 Progressive Blur（段階的ぼかし） 03 OKLCH 補間グラデーション 04 @starting-style / allow-discrete（出現アニメをJSなしで） 05 Popover API + Anchor Positioning（ナビのドロップダウン） 06 View Transitions 要素単位の継承 07 スクロール速度連動（慣性歪み・RGBずらし・可変フォント） 08 text-wrap / その他の細かい最新プロパティ 09 WebGL FXレイヤーの器 10 品質ティア（重い端末で自動的に演出を落とす） ========================================================================= */ /* ========================================================================= 01 @property 登録 カスタムプロパティは既定で「型なしの文字列」なので、値を補間できない＝ アニメーションできない。@property で型を宣言すると数値・色・角度として 扱われ、グラデーションの角度や色停止位置そのものを動かせるようになる。 ========================================================================= */ @property --fx-ang { syntax:''; inherits:false; initial-value:0deg; } @property --fx-sheen { syntax:'';inherits:false; initial-value:-30%; } @property --fx-c1 { syntax:''; inherits:false; initial-value:#1557DA; } @property --fx-c2 { syntax:''; inherits:false; initial-value:#7aa5ff; } @property --fx-glow { syntax:''; inherits:false; initial-value:0; } /* スクロール速度。JS（fx.js）が毎フレーム書き込む。-1〜1／0〜1 */ @property --vel { syntax:''; inherits:true; initial-value:0; } @property --velabs { syntax:''; inherits:true; initial-value:0; } /* ---- 数字バンドの値を「動くグラデ文字」にする ---- @property なしだと background-position しか動かせず、色そのものは静止する。 角度を回すことで、面の中を光が巡っているように見せる。 */ @supports (background:linear-gradient(var(--fx-ang),red,blue)) { .sec.dark .stat .v{ background:linear-gradient(var(--fx-ang), #ffffff 0%, #a9c7ff 38%, #ffffff 62%, #dbe7ff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:fx-ang-spin 9s linear infinite; } /* small（years / pref. 等）まで透明になると読めないので、そこだけ戻す */ .sec.dark .stat .v small{-webkit-text-fill-color:#c9d8ff;color:#c9d8ff;} } @keyframes fx-ang-spin{ to{ --fx-ang:360deg; } } /* ---- セクション見出しをグラデーション文字にする（案2／2026-08-04 採用） ---- 数字バンドで既に使っている手法をそのまま横展開したので、 サイト内で新しい表現を増やさずに見出しへ色が入る。 ⚠️ 2点、外すと壊れる： ① 先に color を置いてから @supports の中でだけ透明化する。 グラデを解決できない環境でいきなり text-fill-color:transparent にすると 見出しが「完全に消える」 ② width:fit-content が要る。h2 は既定で全幅なので、そのままだと グラデが画面幅いっぱいに引き伸ばされ、"Works" の5文字は その端の数%しか通らない＝ほぼ単色に見えて角度も動かない */ .sec-label{color:var(--ink);} @supports (background:linear-gradient(var(--fx-ang),red,blue)) { .sec-label{ width:fit-content; background:linear-gradient(var(--fx-ang), #0b3ea8 0%, #1557DA 38%, #5b90ff 66%, #0b3ea8 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:fx-ang-spin 8s linear infinite; } } /* ---- CTA・数字バンドの上を、ゆっくり光の帯が横切る ---- 従来は radial-gradient を transform で動かしていた（＝面ごと動く）。 @property なら「グラデの停止位置だけ」を動かせるので、面は静止したまま 光沢だけが走る。物体の表面らしさが出る。 */ @supports (background:linear-gradient(90deg,#0 var(--fx-sheen),#0)) { .cta::after,.sec.dark::after{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(104deg, transparent calc(var(--fx-sheen) - 18%), rgba(255,255,255,.10) var(--fx-sheen), transparent calc(var(--fx-sheen) + 18%)); animation:fx-sheen 11s var(--ease) infinite; } .sec.dark::after{animation-duration:14s;animation-delay:-4s;} } @keyframes fx-sheen{ 0% { --fx-sheen:-30%; } 60% { --fx-sheen:130%; } 100%{ --fx-sheen:130%; } } /* ---- pill のホバーを、色の切替から「グラデが湧く」に ---- */ @supports (background:linear-gradient(var(--fx-ang),red,blue)) { .pill{ --fx-glow:0; } .pill::before{ content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1; background:linear-gradient(var(--fx-ang), var(--blue-d), var(--blue) 42%, #5b90ff 78%, var(--blue-l)); opacity:var(--fx-glow); transition:opacity var(--dur) var(--ease); } .pill{position:relative;isolation:isolate;} .pill:hover{ --fx-glow:1; animation:fx-ang-spin 4s linear infinite; } /* ghost / line は自前の地色を持つので、湧かせるグラデを変える */ .pill.line::before{background:linear-gradient(var(--fx-ang), #036c39, var(--line-g) 50%, #12a95c);} /* CTA内の白いpillは、白のままグラデを乗せると汚れるので無効化 */ .cta .pill::before{display:none;} } /* ========================================================================= 02 Progressive Blur（段階的ぼかし） backdrop-filter を強さ違いで6枚重ね、それぞれに「少しずつ下へずれた」 マスクを掛ける。1枚だけだとぼけの境目が直線で出るが、重ねると ぼけ量そのものが連続的に変化し、境目が完全に消える。 2025-26に Apple 系UIが一斉採用した表現。 ------------------------------------------------------------------------ ⚠️ ヘッダーは mix-blend-mode:exclusion。この帯はヘッダーより下（z-index:99） に敷くので、ヘッダーは「ぼけた地」に対して反転する＝文字が常に読める。 ========================================================================= */ .pblur{position:fixed;left:0;right:0;z-index:99;pointer-events:none; opacity:0;transition:opacity .5s var(--ease);} .pblur>span{position:absolute;inset:0;display:block;} .pblur-top{top:0;height:clamp(96px,11vh,148px);} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) { /* 上端：下へ行くほどぼけが弱くなる（＝ヘッダー直下が一番ぼける） */ .pblur-top>span:nth-child(1){-webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); -webkit-mask-image:linear-gradient(#000 0%,#000 12%,transparent 30%); mask-image:linear-gradient(#000 0%,#000 12%,transparent 30%);} .pblur-top>span:nth-child(2){-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); -webkit-mask-image:linear-gradient(#000 0%,#000 24%,transparent 44%); mask-image:linear-gradient(#000 0%,#000 24%,transparent 44%);} .pblur-top>span:nth-child(3){-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); -webkit-mask-image:linear-gradient(#000 0%,#000 38%,transparent 60%); mask-image:linear-gradient(#000 0%,#000 38%,transparent 60%);} .pblur-top>span:nth-child(4){-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(#000 0%,#000 52%,transparent 76%); mask-image:linear-gradient(#000 0%,#000 52%,transparent 76%);} .pblur-top>span:nth-child(5){-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); -webkit-mask-image:linear-gradient(#000 0%,#000 66%,transparent 90%); mask-image:linear-gradient(#000 0%,#000 66%,transparent 90%);} .pblur-top>span:nth-child(6){-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px); -webkit-mask-image:linear-gradient(#000 0%,#000 78%,transparent 100%); mask-image:linear-gradient(#000 0%,#000 78%,transparent 100%);} /* 帯そのものに、ごく淡い地色も乗せて「板」として成立させる。 完全に透明なぼかしだけだと、文字の上でぼけが浮いて見えて気持ちが悪い */ .pblur-top::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(250,251,253,.62),rgba(250,251,253,0));} /* 暗い面（CTA・数字バンド・フッター）に掛かっているときは白い霞を暗く反転する */ body.nav-on-dark .pblur-top::after{ background:linear-gradient(180deg,rgba(8,10,16,.52),rgba(8,10,16,0));} body.is-scrolled .pblur-top{opacity:1;} } /* ========================================================================= 03 OKLCH 補間グラデーション sRGB のまま青→水色を補間すると、途中で必ず彩度が落ちて灰色に沈む （＝「くすんだ帯」が真ん中に出る）。oklch 補間は知覚的に等間隔なので、 同じ2色でも中間が濁らない。対応ブラウザだけ差し替える。 ========================================================================= */ @supports (background:linear-gradient(in oklch,red,blue)) { .cta::before{ background: radial-gradient(44% 58% at 26% 26%, oklch(48% .19 264 / .74), transparent 68%), radial-gradient(46% 60% at 76% 74%, oklch(68% .16 264 / .52), transparent 70%), radial-gradient(34% 44% at 54% 4%, oklch(80% .10 264 / .32), transparent 72%); } .sec.dark::before{ background: radial-gradient(48% 66% at 14% 20%, oklch(48% .19 264 / .82), transparent 68%), radial-gradient(42% 56% at 86% 82%, oklch(74% .13 264 / .48), transparent 70%), radial-gradient(34% 46% at 64% 6%, oklch(66% .17 264 / .36), transparent 72%); } .prog{background:linear-gradient(in oklch 90deg, oklch(48% .19 264), oklch(78% .12 264));} .stage-bg .cta{background:oklch(16% .05 265 / .95);} /* 求人・タグの淡い青も oklch に寄せると、白地の上で濁らない */ .tags span{background:oklch(95% .03 264);color:oklch(38% .16 264);} /* ホバー時の淡い色は color-mix で作る。手で16進を並べるより破綻しない */ .nrow:hover{background:color-mix(in oklab, var(--blue) 4%, #fff);} .chip:hover{border-color:color-mix(in oklab, var(--blue) 60%, #fff);} .access-card .map:hover{background:color-mix(in oklab, var(--blue) 22%, #1d2a47);} } /* ========================================================================= 04 @starting-style / transition-behavior:allow-discrete display や visibility のような「離散値」も遷移できるようになったので、 出現アニメのために visibility を仕込む・JSでクラスを2段階に分ける、 といった小細工が一切いらなくなる。 ========================================================================= */ @supports (transition-behavior:allow-discrete) { /* 全画面メニュー */ .mmenu{ display:none; transition:opacity .45s var(--ease), display .45s allow-discrete; } body.menu-open .mmenu{display:flex;opacity:1;visibility:visible;} @starting-style{ body.menu-open .mmenu{opacity:0;} } /* OAコンシェルジュ */ .oa-chat{ transition:opacity var(--dur), transform var(--dur) var(--ease), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete; } @starting-style{ .oa-chat.open{opacity:0;transform:translateY(16px) scale(.97);} } /* 画像の透かしロゴ */ .wmark{ display:none; transition:opacity .32s var(--ease), transform .5s cubic-bezier(.22,1,.36,1), display .32s allow-discrete; } .wmark.on{display:grid;} @starting-style{ .wmark.on{opacity:0;transform:scale(1.03);} } } /* ========================================================================= 05 Popover API + Anchor Positioning ヘッダーは mix-blend-mode:exclusion で「グループごと」地色に対して反転する。 子要素だけ反転を切ることはできないので、ドロップダウンをヘッダーの中に 入れると必ず色が転ぶ。 → popover でトップレイヤーに出し、anchor-name でナビ項目に紐付ける。 DOM上の親子関係が要らないのがアンカー位置指定の本質的な利点。 ========================================================================= */ .navpop{ margin:0;padding:14px;border:0;overflow:visible; background:rgba(255,255,255,.92);color:var(--ink); border-radius:16px;box-shadow:0 22px 60px rgba(13,25,60,.16); min-width:250px; -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); } .navpop:not(:popover-open){display:none;} .navpop b{display:block;font-family:var(--ff-en);font-weight:600;font-size:11px; letter-spacing:.18em;color:var(--gray);padding:2px 10px 8px;} .navpop a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px; font-size:13px;font-weight:700;letter-spacing:.04em; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);} .navpop a:hover{background:var(--blue-p);color:var(--blue-d);} .navpop a::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--blue); flex:none;opacity:.4;transition:opacity var(--dur), transform var(--dur);} .navpop a:hover::before{opacity:1;transform:scale(1.6);} @supports (anchor-name:--a) { /* ナビ項目をアンカーとして登録 */ header nav a[href="service.html"]{anchor-name:--nav-service;} header nav a[href="about.html"] {anchor-name:--nav-about;} .navpop{position:fixed;position-try-fallbacks:flip-block, flip-inline;} #navpopService{position-anchor:--nav-service;} #navpopAbout {position-anchor:--nav-about;} .navpop{ top:calc(anchor(bottom) + 14px); left:anchor(left); /* アンカー（ナビ項目）が画面外に出たら自動で隠す */ position-visibility:anchors-visible; } /* 右端の項目が画面外へはみ出さないよう、右寄せへ倒す余地を残す */ @media(max-width:1180px){ .navpop{left:auto;right:anchor(right);} } } /* アンカー位置指定に未対応なら、ヘッダー直下に固定で出す（機能は保つ） */ @supports not (anchor-name:--a) { .navpop{position:fixed;top:78px;right:var(--pad);} } @supports (transition-behavior:allow-discrete) { .navpop{opacity:0;transform:translateY(-8px); transition:opacity .26s var(--ease), transform .26s var(--ease), display .26s allow-discrete, overlay .26s allow-discrete;} .navpop:popover-open{opacity:1;transform:none;} @starting-style{ .navpop:popover-open{opacity:0;transform:translateY(-8px);} } } @media(max-width:1000px){ .navpop{display:none!important;} } /* ========================================================================= 06 View Transitions — 要素単位の継承 すでに @view-transition{navigation:auto} でページ全体はクロスフェードする。 ここでは「同じものが両方のページに居る」要素に同じ名前を付けて、 ページを跨いで“同じ物体が動いた”ように見せる。 ⚠️ view-transition-name は1ドキュメント内で一意でないと、遷移が丸ごと 無効化される。src の末尾一致で振っているのはそのため（重複しない）。 ========================================================================= */ @supports (view-transition-name:--x) or (view-transition-name:a) { /* ---- セクション見出し → 下層ページのH1 ---- トップの「Works」の文字が、そのまま works.html の大見出しへ飛んでいく */ #about .sec-label{view-transition-name:vt-t-about;} #service .sec-label{view-transition-name:vt-t-service;} #works .sec-label{view-transition-name:vt-t-works;} #news .sec-label{view-transition-name:vt-t-news;} body[data-page="about"] .ph-in h1{view-transition-name:vt-t-about;} body[data-page="service"] .ph-in h1{view-transition-name:vt-t-service;} body[data-page="works"] .ph-in h1{view-transition-name:vt-t-works;} body[data-page="news"] .ph-in h1{view-transition-name:vt-t-news;} body[data-page="recruit"] .ph-in h1{view-transition-name:vt-t-recruit;} body[data-page="contact"] .ph-in h1{view-transition-name:vt-t-contact;} /* ---- 実績カードの画像 ---- トップのWorks帯と works.html のグリッドに同じ写真が7枚ある。 名前を揃えると、一覧へ飛んだ瞬間に写真がそれぞれの新しい位置へ流れる。 ⚠️ 名前は img ではなく .ph（角丸の器）に付ける。img には animation-timeline のパララックス transform が掛かっていて、 スナップショットに変形が焼き込まれてしまうため。 */ .wcard:has(img[src$="w_own_website.jpg"]) .ph{view-transition-name:vt-w-web;} .wcard:has(img[src$="w_kyocera_crowd.jpg"]) .ph{view-transition-name:vt-w-kyocera;} .wcard:has(img[src$="w_sapporo_garden.jpg"]) .ph{view-transition-name:vt-w-sapporo;} .wcard:has(img[src$="w_narita_room.jpg"]) .ph{view-transition-name:vt-w-narita;} .wcard:has(img[src$="w_store_promo.jpg"]) .ph{view-transition-name:vt-w-store;} .wcard:has(img[src$="web_159363813.jpg"]) .ph{view-transition-name:vt-w-fes;} .wcard:has(img[src$="web_221391556.jpg"]) .ph{view-transition-name:vt-w-expo;} .wcard:has(img[src$="w_hyoshoshiki.jpg"]) .ph{view-transition-name:vt-w-hyosho;} /* 継承する要素は、地のクロスフェードより少し遅く・粘りのある曲線で動かす。 ページ全体は .28s で消えるので、主役だけ残ってから着地する形になる */ ::view-transition-group(vt-w-web), ::view-transition-group(vt-w-kyocera), ::view-transition-group(vt-w-sapporo), ::view-transition-group(vt-w-narita), ::view-transition-group(vt-w-store), ::view-transition-group(vt-w-fes), ::view-transition-group(vt-w-expo), ::view-transition-group(vt-w-hyosho){ animation-duration:.62s; animation-timing-function:cubic-bezier(.22,1,.36,1); } ::view-transition-group(vt-t-about), ::view-transition-group(vt-t-service), ::view-transition-group(vt-t-works), ::view-transition-group(vt-t-news), ::view-transition-group(vt-t-recruit), ::view-transition-group(vt-t-contact){ animation-duration:.52s; animation-timing-function:cubic-bezier(.22,1,.36,1); } /* 見出しは字形もサイズも変わるので、単純な拡大より重ねフェードのほうが自然 */ ::view-transition-old(vt-t-works),::view-transition-new(vt-t-works), ::view-transition-old(vt-t-news), ::view-transition-new(vt-t-news), ::view-transition-old(vt-t-about),::view-transition-new(vt-t-about), ::view-transition-old(vt-t-service),::view-transition-new(vt-t-service){ height:100%;object-fit:contain;object-position:left top; } /* 継承要素は地のフェードに巻き込まれないよう、影を切って輪郭を保つ */ ::view-transition-image-pair(*){isolation:auto;} } /* ========================================================================= 07 スクロール速度連動 fx.js が --vel（-1〜1・符号は向き）と --velabs（0〜1）を :root に書く。 CSS側は「その値をどう見せるか」だけを持つ＝JSはtransformを組み立てない。 ========================================================================= */ body.pointer-fine.fx-on{ /* ---- 慣性歪み：横スクローラの行そのものを、進行方向へわずかに倒す ---- */ } .fx-on .track{ transform:skewY(calc(var(--vel,0) * .55deg)) scaleY(calc(1 + var(--velabs,0) * .012)); transform-origin:50% 0; will-change:transform; } .fx-on .wgrid{ transform:skewY(calc(var(--vel,0) * .35deg)); transform-origin:50% 0; } /* ---- 速く回したときだけ、見出しの縁にRGBがずれる ---- text-shadow を左右に振るだけ。filterを使うと合成コストが跳ね上がる */ .fx-on .sec-label, .fx-on .marquee .row>span{ text-shadow: calc(var(--vel,0) * -2.2px) 0 0 rgba(255,0,80, calc(var(--velabs,0) * .5)), calc(var(--vel,0) * 2.2px) 0 0 rgba(0,180,255,calc(var(--velabs,0) * .5)); } /* ---- 可変フォント：速く回すと文字が痩せ、止まると戻る ---- ⚠️ 効くのは Inter だけ。Poppins（FVの大見出し・マーキー）は Google Fonts に可変版が無く、Noto Sans JP の可変版は日本語ぶん重いので どちらも従来どおり固定ウェイトのまま置く。 → 対象は Inter を使う .sec-label と .stat .v の2つ。 */ @supports (font-variation-settings:'wght' 400) { .fx-on .sec-label{ font-variation-settings:'wght' calc(500 - var(--velabs,0) * 220); } .fx-on .sec.dark .stat .v{ font-variation-settings:'wght' calc(600 - var(--velabs,0) * 260); } } /* ========================================================================= 08 text-wrap / 細かい最新プロパティ ========================================================================= */ /* 見出しは行ごとの長さを揃える。1行目が長く2行目が1単語だけ、が無くなる */ h1,h2,h3,.sec-label,.cta h2,.ph-in h1,.svc h2,.wcard h3,.ncard p{ text-wrap:balance; } /* 本文はぶら下がり1単語（孤立行）だけを防ぐ。balance は本文には重すぎる */ .lead,.lead-en,.msg p,.prose p,.card .dsc,.pos p,.why span,.access-card p{ text-wrap:pretty; } /* 日本語は禁則と行頭約物のぶら下がりを効かせる */ body{ line-break:strict; hanging-punctuation:allow-end; } /* スクロールバーを消さずに細くする（横スクローラは既に非表示） */ html{ scrollbar-gutter:stable; scrollbar-color:var(--gray-l) transparent; } /* フォーカスリングをブランド色に。キーボード操作時だけ出す */ :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; } /* 画像の遅延デコードで、スクロール中にメインスレッドを止めない */ img{ content-visibility:auto; } /* セクション単位でレンダリングを間引く。長いページで効く */ .sec,.svc,.about{ contain-intrinsic-size:auto 600px; } /* ========================================================================= 09 WebGL FX レイヤーの器 ・fxfg … GPGPUパーティクル＋流体カーソル（本文より奥・図形より手前） ⚠️ 以前ここに .fxbg（レイマーチング背景）も置いていたが撤去済み。 下層ページの背景ロゴと重なって「しみ」に見えたため。 ========================================================================= */ .fxfg{position:fixed;inset:0;pointer-events:none;} /* ⚠️ 当サイトの地は白。screen 合成は「白の上に明るい色」＝完全に消えるので 既定は通常合成。暗いパネル（数字バンド／CTA／フッター）に掛かっている間だけ screen へ切り替えて、光として乗せる */ .fxfg{z-index:1;opacity:0;transition:opacity 1.2s var(--ease);} .fxfg canvas{display:block;width:100%;height:100%;} body.nav-on-dark .fxfg{mix-blend-mode:screen;} .fxfg.on{opacity:.62;} /* 画像のリキッド歪み用キャンバス。ホバー中のカードにだけ被せる */ .liquid{position:absolute;inset:0;z-index:2;pointer-events:none; border-radius:inherit;opacity:0;transition:opacity .3s var(--ease);} .liquid.on{opacity:1;} .liquid canvas{display:block;width:100%;height:100%;border-radius:inherit;} /* 歪みキャンバスが出ている間は、元画像を隠して二重に見えないようにする */ .wcard .ph.liq-live img,.card .ph.liq-live img{opacity:0;} .wcard .ph,.card .ph{position:relative;} /* ========================================================================= 画像ホバーで社名ロゴを薄く重ねる（U.S Inc. 型） ------------------------------------------------------------------------ すでに .wmark（画像を掴んだ瞬間に出る透かし）で同じ絵柄を使っているので、 意匠はそちらに合わせる＝サイト内で「写真に重なるロゴ」の見え方を一本化する。 ・リキッド歪みのキャンバス（z-index:2）より前に置く ・指で触る端末では :hover が貼り付いて消えなくなるので hover 環境限定 ========================================================================= */ .phmark{position:absolute;inset:0;z-index:4;pointer-events:none; border-radius:inherit;overflow:hidden; display:grid;place-items:center;align-content:center;gap:10px; opacity:0;transform:scale(1.04); transition:opacity .42s var(--ease), transform .62s cubic-bezier(.22,1,.36,1); /* ロゴ自体を薄くすると明るい写真では消えるので、地を少しだけ沈めて支える。 ベタで暗くはしない（写真が主役のまま「透かし」として乗る濃さに留める） */ background:linear-gradient(180deg,rgba(10,14,26,.13),rgba(10,14,26,.32));} .phmark svg{width:min(34%,104px);height:auto;opacity:.58; filter:drop-shadow(0 2px 12px rgba(0,0,0,.30));} /* 有彩色を持たせると写真の色に負けるので、白1色＋重なりだけ濃度を落とす （ヘッダーのロゴと同じ処理。重なりが残ることで立体が読める） */ .phmark svg *{fill:#fff;} .phmark svg g path{fill-opacity:.45;} .phmark b{font-family:var(--ff-en);font-weight:700;letter-spacing:.3em;text-indent:.3em; font-size:clamp(8px,.72vw,11px);color:rgba(255,255,255,.62);white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.4);} /* 小さいサムネイルでは社名を省いてマークだけにする（.wmark と同じ判断） */ .ncard .phmark b{display:none;} .ncard .phmark svg{width:42%;} @media (hover:hover) and (pointer:fine){ .card:hover .phmark, .wcard:hover .phmark{opacity:1;transform:none;} } @media (prefers-reduced-motion: reduce){ .phmark{transition:opacity .01s;transform:none;} } /* ========================================================================= 10 品質ティア fx.js が実測FPSからティアを決めて body に付ける。 tier-3 = 全部入り／tier-2 = 重いものを外す／tier-1 = CSSだけ ========================================================================= */ body.fx-tier-1 .fxfg{display:none;} body.fx-tier-1 .cta::after,body.fx-tier-1 .sec.dark::after{animation:none;} body.fx-tier-1 .liquid{display:none;} /* ========================================================================= 低モーション設定：追加した演出はすべて止める ========================================================================= */ @media (prefers-reduced-motion: reduce){ .pblur{display:none;} .fxfg,.liquid{display:none!important;} .cta::after,.sec.dark::after{animation:none;display:none;} .sec.dark .stat .v{animation:none;-webkit-text-fill-color:#fff;color:#fff;background:none;} /* グラデ自体は残し、角度が回るのだけ止める（静止画として成立する） */ .sec-label{animation:none;} .pill:hover{animation:none;} .fx-on .track,.fx-on .wgrid{transform:none!important;} .fx-on .sec-label,.fx-on .marquee .row>span{text-shadow:none!important;} .fx-on .marquee .row{animation-duration:34s;} .navpop{transition:none;} }