@charset "UTF-8"; /* ========================================================================= OFFICE ABLE — modern.css（2026-08-05 追加） 最後に読み込む。us.css / fx.css / figs.css の「後」に置いて上書きする。 ここに入れているもの 1. ダークモード（color-scheme ＋ light-dark()） 2. コンテナクエリ … カードの中身を「画面幅」ではなく「カード自身の幅」で決める 3. subgrid … 3枚のカードの写真と本文の高さを揃える 4. details/summary のアコーディオン（interpolate-size ＋ ::details-content） 5. field-sizing … 入力欄が中身に合わせて伸びる 6. @scope … 素の要素セレクタを書いても外へ漏らさない 7. text-box-trim … 欧文見出しの上下の余白を「実際の文字の高さ」で測る 8. 名前付き view-timeline / scroll-timeline … 別要素の進捗で動かす 9. prefers-reduced-transparency / prefers-contrast ========================================================================= */ /* ========================================================================= 1. ダークモード ------------------------------------------------------------------------- ⚠️ --ink は「文字色」であると同時に、pill・チップ・タグの「地色」でもある。 単純に反転させるとボタンが白地に白文字になる。トークンの反転だけで 済ませず、地色として使っている箇所は個別に直している（後半のブロック）。 ========================================================================= */ :root{ /* ⚠️ 明暗は で決める。 のインラインスクリプトが ページ描画前に「OS設定 or 保存された選択」を解決して属性を書き込むので、 切り替えボタンでOSと違う配色にもできる（ちらつきも出ない）。 color-scheme を data-theme と一致させておくことで light-dark() が正しく解決する。 ⚠️ JSを切っている環境では属性が付かない＝明るい配色のまま。 このサイトは3D・メニュー・チャットがJS前提なので、そこは割り切っている。 */ color-scheme:light dark; --blue :light-dark(#1557DA, #5a90ff); --blue-d :light-dark(#0b3ea8, #2f63d8); --blue-l :light-dark(#7aa5ff, #9dc0ff); --blue-p :light-dark(#e8f0ff, #16233c); --ink :light-dark(#101625, #e9edf4); --gray :light-dark(#5d6675, #98a2b3); --gray-l :light-dark(#8b95a6, #6d7787); --line :light-dark(#e3e5e9, #242b3a); --bg :light-dark(#eef0f3, #080c16); --panel :light-dark(#f2f4f7, #121a2a); --white :light-dark(#ffffff, #121a2a); /* カード等の「面」の色 */ /* us.css 内で #39414f / #3d434f / #565f70 と直に書かれていた本文グレー。 ここで一本化して、暗い地の上では明るい側へ振る */ --body :light-dark(#39414f, #aab3c2); --surface-2:light-dark(#f4f6f8, #0e1524); /* 入力欄・淡い面 */ --shadow :light-dark(rgba(13,25,60,.09), rgba(0,0,0,.55)); --shadow-s:light-dark(rgba(13,25,60,.07), rgba(0,0,0,.45)); } :root[data-theme="light"]{color-scheme:light;} :root[data-theme="dark"] {color-scheme:dark;} /* 本文グレーの一本化（元は各所にハードコードされていた） */ .lead-body,.c-table dd,.msg p,.svc .txt,.faq-a p,.access-card p,.side-card p, .why span,.pos p,.prose p,.prose li,.card .dsc{color:var(--body);} /* ---- 面 ---------------------------------------------------------- */ :root[data-theme="dark"] body.stage-bg{background:linear-gradient(180deg,#0a1020 0%,#080c16 42%,#060a12 100%);} :root[data-theme="dark"] .stage-bg .about{background:rgba(14,20,33,.62);} :root[data-theme="dark"] .stage-bg #service{background:rgba(10,15,26,.60);} :root[data-theme="dark"] .stage-bg .sec.white{background:rgba(14,20,33,.80);} :root[data-theme="dark"] .stage-bg .sec.gray{background:linear-gradient(180deg,rgba(12,18,30,.72),rgba(8,12,22,.82));} :root[data-theme="dark"] .stage-bg .foot-box{background:rgba(9,12,20,.94);} :root[data-theme="dark"] .about{background:var(--white);} :root[data-theme="dark"] .sec.gray{background:linear-gradient(180deg,#0d1422,var(--bg));} :root[data-theme="dark"] .fv{background:linear-gradient(160deg,#0b1120 0%,#080d18 55%,#060a12 100%);} :root[data-theme="dark"] .ph-panel{background:linear-gradient(120deg,#111a2b,var(--panel));} :root[data-theme="dark"] .card, :root[data-theme="dark"] .ncard, :root[data-theme="dark"] .step, :root[data-theme="dark"] .why div, :root[data-theme="dark"] .pos article, :root[data-theme="dark"] .side-card, :root[data-theme="dark"] .access-card, :root[data-theme="dark"] .menu-detail div, :root[data-theme="dark"] .chip{background:var(--white);} :root[data-theme="dark"] .card .ph, :root[data-theme="dark"] .wcard .ph{background:#1a2233;} :root[data-theme="dark"] .marquee{background:rgba(14,20,33,.5);} :root[data-theme="dark"] .nrow:hover{background:rgba(255,255,255,.04);} :root[data-theme="dark"] .mmenu{background:rgba(8,12,22,.97);} :root[data-theme="dark"] .foot{background:var(--bg);} :root[data-theme="dark"] .foot-box{background:#0b0f18;} /* 下層ページ（.mark-page）は全画面に社ロゴを敷き、その上に半透明の面を 重ねる作り。地色はトップ（body.estrela の #050505・us.css）と同じ黒に 統一する（2026-08-09 ユーザー指示。旧は濃紺グラデ #0a1020→#060a12） */ :root[data-theme="dark"] body.mark-page{background:#050505;} :root[data-theme="dark"] .mark-bg{opacity:.44;} /* 本文カラム背後のスクリム（us.css .mark-bg::after）は明色地用の白グラデ。 ダークで白のまま残すと左半分だけ灰色に浮くので、地色と同じ黒で敷き直す */ :root[data-theme="dark"] .mark-bg::after{background:linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.84) 24%, rgba(5,5,5,.40) 40%, transparent 56%);} :root[data-theme="dark"] .mark-page .sec.white{background:linear-gradient(180deg, transparent 0%,rgba(14,20,33,.72) 12%,rgba(14,20,33,.72) 88%,transparent 100%);} :root[data-theme="dark"] .mark-page .sec.gray{background:linear-gradient(180deg, transparent 0%,rgba(10,15,26,.76) 12%,rgba(8,12,22,.82) 88%,transparent 100%);} /* ---- ヘッダーの反転合成をやめる ---- mix-blend-mode:exclusion は「地が白なら黒、黒なら白」に転ぶ仕組みで、 地が中間グレーのときだけ文字も中間グレーになって消える。明るい配色では 地の大半が白なので破綻しなかったが、暗い配色では背景ロゴの淡い部分が ちょうど中間グレーになり、ロゴと一部のナビが読めなくなる（実測）。 暗い側では地が常に暗いと分かっているので、素直に白で固定する。 */ :root[data-theme="dark"] header{mix-blend-mode:normal;color:#fff;} /* ---- 明るい地を前提にしていたベール（本文を読ませるための白いグラデ）---- */ :root[data-theme="dark"] .sec>.ribbon::after{background:linear-gradient(100deg,rgba(8,12,22,.94) 0%,rgba(8,12,22,.72) 30%, rgba(8,12,22,.22) 52%,transparent 68%);} :root[data-theme="dark"] .fv .ribbon::after{background:linear-gradient(102deg,rgba(7,11,20,.90) 0%,rgba(7,11,20,.62) 26%, rgba(7,11,20,.16) 46%,transparent 60%);} /* ---- --ink を「地色」として使っている箇所（反転すると読めなくなる）---- */ :root[data-theme="dark"] .pill{color:#080c16;} :root[data-theme="dark"] .pill i{background:#080c16;} :root[data-theme="dark"] .pill i svg{stroke:var(--ink);} :root[data-theme="dark"] .pill.ghost{background:var(--white);color:var(--ink);} :root[data-theme="dark"] .pill.ghost i{background:var(--ink);} :root[data-theme="dark"] .pill.ghost i svg{stroke:#080c16;} :root[data-theme="dark"] .pill:hover, :root[data-theme="dark"] .pill.ghost:hover{background:var(--blue);color:#fff;} :root[data-theme="dark"] .pill:hover i, :root[data-theme="dark"] .pill.ghost:hover i{background:#fff;} :root[data-theme="dark"] .pill:hover i svg{stroke:var(--blue);} :root[data-theme="dark"] .chip.on{color:#080c16;} :root[data-theme="dark"] .fv-news .tagn{color:#080c16;} :root[data-theme="dark"] .card .arw svg, :root[data-theme="dark"] .nrow .go svg{stroke:var(--ink);} :root[data-theme="dark"] .faq-q::after{border-color:var(--ink);} /* ヒーロー右下のバナーも地色が --ink。反転させると白地に白文字になる */ :root[data-theme="dark"] .oa-chat{background:var(--white);color:var(--ink);} /* CTAは明るい青のままなので、その中のボタンは明配色を保つ */ /* ⚠️ :not(.line) を必ず付けること。付けないとCTA内のLINEボタンまで 白地になり、そこへ白文字が乗って完全に読めなくなる（実測 1.00:1）。 */ :root[data-theme="dark"] .cta .pill:not(.line){background:#fff;color:#101625;} :root[data-theme="dark"] .cta .pill:not(.line) i{background:#101625;} :root[data-theme="dark"] .cta .pill:not(.line) i svg{stroke:#fff;} /* ---- 入力欄 ---- */ :root[data-theme="dark"] .frow input, :root[data-theme="dark"] .frow select, :root[data-theme="dark"] .frow textarea{background:var(--surface-2);color:var(--ink);} :root[data-theme="dark"] .frow input:focus, :root[data-theme="dark"] .frow select:focus, :root[data-theme="dark"] .frow textarea:focus{background:#0a1020;} :root[data-theme="dark"] .frow input::placeholder, :root[data-theme="dark"] .frow textarea::placeholder{color:var(--gray-l);} /* ---- 影は暗い地では効かないので、代わりに枠線で面を立てる ---- */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .ncard, :root[data-theme="dark"] .step, :root[data-theme="dark"] .why div, :root[data-theme="dark"] .pos article, :root[data-theme="dark"] .side-card, :root[data-theme="dark"] .access-card{box-shadow:0 18px 44px rgba(0,0,0,.5);border:1px solid var(--line);} /* ========================================================================= 2. コンテナクエリ ------------------------------------------------------------------------- 同じ .wcard が、トップでは横スクローラの中で幅400px、実績一覧では 3カラムグリッドで幅33vw になる。画面幅で分岐すると「画面は広いのに カードは狭い」場面を拾えない。カード自身の幅で決める。 ⚠️ container-type は containment を伴う。containment の掛かった要素では subgrid が grid に降格する（CSS Grid Level 2 の規定）。つまり 「同じ要素にコンテナクエリとサブグリッドの両方」は成立しない。 → 器の幅で中身を変えたい .wcard / .ncard 系にコンテナクエリを、 3枚の高さを揃えたい .card / .pos article / .why div にサブグリッドを、 と担当を分けている。 ========================================================================= */ .wcard,.ncard,.step,.side-card,.access-card{ container-type:inline-size; } @container (max-width: 330px){ .wcard h3{font-size:15px;line-height:1.65;} .wcard .meta{font-size:11.5px;} .wcard .cat{font-size:10.5px;margin-top:14px;} .ncard{padding:18px;} .ncard p{font-size:13.5px;} .ncard time{margin-top:14px;} .step{padding:20px 14px 22px;} .step b{font-size:14px;} .side-card{padding:20px;} .side-card .tel{font-size:22px;} } @container (min-width: 520px){ /* 器に余裕があるときだけ内側の余白を広げる。画面幅ではなく器の幅で決めるので、 2カラムでも1カラムでも「その場の見え方」に対して正しい値になる */ .access-card .body{padding:30px 30px 34px;} .side-card{padding:30px;} .ncard p{font-size:15.5px;} } /* ========================================================================= 3. subgrid ------------------------------------------------------------------------- 横並びのカードは見出しや説明文の行数がばらばらで、写真の上端や タグの位置が1枚ずつずれていた。カード内部のトラックを親グリッドと 共有させると、行の高さが列をまたいで揃う。JSで高さを測る必要がない。 ========================================================================= */ @supports (grid-template-rows: subgrid){ /* .card の中身は .hd / .ph / .dsc の3つ（.gloss は absolute なので数えない）*/ .cards{grid-template-rows:auto auto 1fr;} .cards>.card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;} /* .pos の中身は .en / h3 / p / .tags の4つ。段数は記事数で変わるので grid-auto-rows にパターンを持たせ、暗黙の行にも同じ並びを繰り返させる。 これで2段でも3段でも、各段の中でタグの位置が揃う */ .pos{grid-auto-rows:auto auto 1fr auto;} .pos>article{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;} /* ⚠️ 採用ページのカードは中身が6つ（.en / h3 / .pay / p / .tags / .pos-more）。 span 4 のままだと5つ目以降が最終行に重なって描画される（実際に踏んだ）。 カードの構成要素を増やしたら、必ずここの行数も合わせること。 grid-auto-rows はパターンを繰り返すので、カードが2枚でも4枚でも 各段の中でタグと詳細リンクの位置が揃う。 */ .pos.two{grid-auto-rows:auto auto auto 1fr auto auto;} .pos.two>article{grid-row:span 6;} /* .why の中身は .n / b / span の3つ */ .why{grid-template-rows:auto auto 1fr;} .why>div{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;} } /* ========================================================================= 4. FAQ —
/ のアコーディオン ------------------------------------------------------------------------- markup をネイティブの details に変えたので、開閉のJSは不要になった。 高さのアニメーションは ::details-content ＋ interpolate-size で行う。 副産物: 閉じている項目もページ内検索でヒットし、ブラウザが自動で開く。 ⚠️ 機能に関わるルールは @scope の外にクラスで書くこと。 当初これらを @scope の中に入れていたが、@scope 未対応のブラウザでは ブロックごと無視される。us.css 側に `.faq-a{grid-template-rows:0fr}` が 残っているため、それを打ち消す `.faq-a{display:block}` が効かないと 「回答が永久に開かないFAQ」になる。@scope は“無くても壊れない装飾”専用にする。 ========================================================================= */ :root{interpolate-size:allow-keywords;} .faq-item{border-bottom:1px solid var(--line);} /* summary の三角マーカーを消す。details/summary の既定表示なので必須 */ .faq-q{list-style:none;cursor:pointer;} .faq-q::-webkit-details-marker{display:none;} .faq-q::marker{content:'';} .faq-item[open] .faq-q::after{transform:rotate(-135deg);} /* us.css の grid-template-rows による高さアニメは details に置き換えたので戻す。 ⚠️ これが効かないと回答が 0fr のまま＝開いても何も見えない */ .faq-a{display:block;} .faq-a>div{overflow:visible;} @supports (interpolate-size: allow-keywords){ .faq-item::details-content{ block-size:0;overflow:hidden; /* content-visibility も一緒に補間しないと、閉じ切る前に中身が消えて 最後だけカクッと落ちる（allow-discrete で最後まで持たせる） */ transition:block-size .42s cubic-bezier(.22,1,.36,1), content-visibility .42s allow-discrete; } .faq-item[open]::details-content{block-size:auto;} } /* ---- @scope ---------------------------------------------------------- FAQの中でだけ素の要素セレクタを書きたいときのための囲い。 ここに置くのは「無くても開閉も可読性も損なわれない」装飾だけに限る。 */ @scope (.faq){ summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px;} /* 回答文中のリンクは、本文と区別が付くように下線を明示する */ a{color:var(--blue);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;} a:hover{text-decoration-thickness:2px;} } /* ========================================================================= 5. field-sizing — 入力欄が中身に追従する ------------------------------------------------------------------------- お問い合わせの本文欄は、これまで min-height:170px 固定でスクロールだった。 書いた量に合わせて伸びるほうが、何を書いたか見渡せる。 上限を付けないと画面から溢れるので max-height で止める。 ========================================================================= */ @supports (field-sizing: content){ .frow textarea{field-sizing:content;min-height:170px;max-height:70vh;} .frow select{field-sizing:content;} } /* ========================================================================= 7. text-box-trim — 欧文見出しの余白を「文字の高さ」で測る ------------------------------------------------------------------------- フォントは字面の上下に余白（レディング）を内包している。見出しに margin を指定しても、実際は「余白＋margin」ぶん空く。文字の上端＝ キャップハイト、下端＝ベースラインで測るように切り替えると、 指定した数値がそのまま見た目の間隔になる。和欧混植のこのサイトでは、 欧文見出しと和文サブの間の空きが特に安定する。 ⚠️ 和文（Noto Sans JP）の本文には掛けない。日本語は文字の高さが 仮想ボディいっぱいで、トリムすると行間の設計が崩れる。 ========================================================================= */ /* ⚠️ background-clip:text でグラデ塗りしている見出し（.sec-label と 数字バンドの .stat .v）には掛けないこと。グラデを塗る面はコンテンツボックス なので、トリムで箱が cap 高さに縮むと p や y のディセンダだけ塗りが載らず、 文字が途中で切れて見える（2026-08-05 実測で確認）。 */ @supports (text-box-trim: trim-both){ .card .ttl,.svc h2,.fmain,.access-card h3, .ph-in h1,.cta h2,.mmenu nav a,.pos h3,.wcard h3{ text-box:trim-both cap alphabetic; } /* 下に和文サブが付く見出しは、そのぶん間隔を足し直す */ .card .ttl small,.svc h2 small,.ph-in .jp{margin-top:14px;} .mmenu nav a small{margin-top:8px;} } /* ========================================================================= 8. 名前付きタイムライン — 横スクローラの進捗バー ------------------------------------------------------------------------- 実績・ニュースの横スクローラは「まだ右に続いている」ことが分かりにくい。 スクロール量をそのままバーに出す。JSは1行も使わない。 ⚠️ animation-timeline は「自分か祖先、およびその前の兄弟」で宣言された 名前しか見えない。バーはスクローラの“後ろの兄弟”なので、そのままでは 見えない。timeline-scope をセクションに置いて、その中で名前を通す。 セクションごとに scope を切るので、実績用とニュース用が混ざらない。 ========================================================================= */ .sec:has(> .track){timeline-scope:--trk;} .track{scroll-timeline:--trk x;} .track-bar{position:relative;height:2px;margin:6px var(--pad) 0; background:var(--line);border-radius:2px;overflow:hidden;} .track-bar span{position:absolute;inset:0;width:22%;border-radius:2px; background:var(--blue);transform-origin:left;} @supports (animation-timeline: scroll()){ .track-bar span{animation:trk-move linear both;animation-timeline:--trk;} @keyframes trk-move{to{translate:355% 0;}} } /* タイムラインが効かない環境ではバー全体を薄く見せて、誤解を与えない */ @supports not (animation-timeline: scroll()){ .track-bar span{width:100%;opacity:.25;} } /* ========================================================================= 9. アクセシビリティの環境設定 ========================================================================= */ /* ---- 透明・ぼかしを減らす設定 ---- 重なりとぼかしは、目の状態によっては「にじんで読めない」原因になる。 装飾レイヤーを外し、面を不透明に戻す。情報は一切減らさない。 */ @media (prefers-reduced-transparency: reduce){ .stage,.grain,.spot,.pblur-top{display:none;} .mmenu{background:var(--white);backdrop-filter:none;} body.stage-bg{background:var(--bg);} .stage-bg .about,.about{background:var(--white);} .stage-bg #service{background:var(--panel);} .stage-bg .sec.white,.sec.white{background:var(--white);} .stage-bg .sec.dark{background:#0c1120;} .stage-bg .foot-box,.foot-box{background:#111318;} .marquee{background:var(--white);} .ribbon{opacity:.35;} .sec>.ribbon::after,.fv .ribbon::after{background:none;} .about .veil{display:none;} /* 反転合成も「地が透けて見える」種類の効果なので、素の配色に戻す */ header{mix-blend-mode:normal;color:var(--ink);} body.nav-on-dark header{color:#fff;} } /* ---- コントラストを上げる設定 ---- 薄いグレー・細い罫線・反転合成のヘッダーはいずれもコントラストが読めない。 文字を濃く、線をはっきりさせ、ヘッダーは固定色にする。 */ @media (prefers-contrast: more){ :root{ --gray :light-dark(#3a4250, #c2cad6); --gray-l:light-dark(#4a5464, #aab3c0); --line :light-dark(#9aa1ac, #4b5568); --body :light-dark(#1a2030, #e3e8f0); } header{mix-blend-mode:normal;color:var(--ink); background:light-dark(rgba(255,255,255,.92),rgba(8,12,22,.92));} body.nav-on-dark header{background:transparent;color:#fff;} .sec>.ribbon::after{ background:linear-gradient(100deg, light-dark(rgba(244,246,249,.99),rgba(8,12,22,.99)) 0%, light-dark(rgba(244,246,249,.92),rgba(8,12,22,.92)) 44%, light-dark(rgba(244,246,249,.55),rgba(8,12,22,.55)) 72%,transparent 92%);} .ribbon{opacity:.5;} .card,.ncard,.step,.why div,.pos article,.side-card,.access-card,.chip{ border:1px solid var(--line);} .lead em,.stat .v,.wcard .cat{color:light-dark(#0f47b8,#8fb6ff);} a:focus-visible,button:focus-visible,summary:focus-visible{ outline:3px solid var(--blue);outline-offset:2px;} } /* 既定でもキーボード操作の可視化は入れておく（マウス操作では出さない） */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible{ outline:2px solid var(--blue);outline-offset:2px;border-radius:4px; } /* ========================================================================= 10. 配色の切り替えボタン（2026-08-05） ------------------------------------------------------------------------- ヘッダーのハンバーガーの手前に小さく置く。3状態を1つのボタンで回す: 自動（OS設定に追従・既定） → ライト → ダーク → 自動 … ⚠️ ヘッダーは mix-blend-mode:exclusion なので、アイコンは currentColor の 線と面だけで組む（有彩色を入れると地の色で補色に転ぶ）。 ========================================================================= */ .theme-tg{margin-left:clamp(10px,1.4vw,20px);width:30px;height:30px;flex:none; display:grid;place-items:center;border-radius:50%; transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);} .theme-tg:hover{opacity:.55;transform:rotate(-18deg);} .theme-tg svg{width:19px;height:19px;overflow:visible;} .theme-tg svg *{fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;} /* 自動＝半分だけ塗った円（OSに委ねている状態を一目で示す） */ .tg-half{fill:currentColor;stroke:none;} .tg-rays,.tg-moon{display:none;} /* ライト＝太陽 */ :root[data-theme-pref="light"] .tg-half{display:none;} :root[data-theme-pref="light"] .tg-ring{r:5.2;} :root[data-theme-pref="light"] .tg-rays{display:block;} /* ダーク＝月 */ :root[data-theme-pref="dark"] .tg-ring, :root[data-theme-pref="dark"] .tg-half{display:none;} :root[data-theme-pref="dark"] .tg-moon{display:block;fill:currentColor;stroke:none;} @media(max-width:1000px){ /* ナビが畳まれる幅ではハンバーガーの左に残す（押しやすさのため少し大きく） */ .theme-tg{width:34px;height:34px;margin-left:auto;} .burger{margin-left:14px;} } /* ========================================================================= 11. オープニング演出「EXPOSURE（露光）」（2026-08-07） ------------------------------------------------------------------------- FIX版（blender-3dcg/logo3d/proposal/standalone_v3.html）の採用案から移植。 D案「組版」は退役。沈んでいた見出しが左から順にフレアで光って定着し、 ヘアラインが直上を一度だけ走る。3DCGの破片は同じ開幕の中で組み上がる。 ⚠️ WebGL に依存しない。3Dが出ない端末でも露光そのものは100%再現される。 --spring / --spring-soft は起動時に JS がばねの運動方程式を解いて linear() を流し込む。ここに書いてある cubic-bezier は流し込む前に 一度でも描画された場合の保険。 ========================================================================= */ :root{--spring:cubic-bezier(.16,1,.3,1);--spring-soft:cubic-bezier(.16,1,.3,1); --strong:cubic-bezier(.16,1,.3,1); /* ヘアラインの色＝ヒーローの強調色（デイ:グラファイト／ナイト:プラチナ、v3と同値） */ --op-acc:light-dark(oklch(33.83% .0276 259.14), oklch(92.29% .0167 259.42));} .fv h1 .ln>span i{display:inline-block;white-space:pre;font-style:normal; transform-origin:50% 100%;will-change:transform,opacity,filter;} /* 演出が終わったら will-change を降ろす（合成レイヤーを持ち続けさせない） */ .fv h1[data-split="done"] .ln>span i{will-change:auto;filter:none;} /* 開幕前に素の文字が一瞬見えるのを防ぐ。ready が付くのと同じフレームで WAAPI の backwards fill が効き始めるので、隙間はできない */ .fv.op-exp:not(.ready) h1 .ln>span i{opacity:0;} /* 露光の合図。見出しの直上をヘアラインが一度だけ走り抜ける */ .fv-copy::before{content:'';position:absolute;left:0;top:clamp(-28px,-2.2vw,-14px); height:1.5px;width:min(100%,880px);transform:scaleX(0);transform-origin:0 50%; opacity:0;pointer-events:none; background:linear-gradient(90deg,var(--op-acc) 0%,var(--op-acc) 58%,transparent 100%);} /* 尺は v3 の1.25sから1.6sへ（開幕全体を約1.3倍ゆっくりにしたのに合わせる） */ .fv.op-exp.ready .fv-copy::before{animation:oa-hairline 1.6s var(--strong) 30ms both;} @keyframes oa-hairline{ 0% {transform:scaleX(0);opacity:0} 10% {opacity:1} 46% {transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:0} } /* 本文・News はばねで下から起き上がる。待ち時間は JS が --d-* に流し込む （素の .fv .jp / .fv-news のフェードより詳細度が高く、こちらが勝つ） */ .fv.op-exp .jp{transform:translate3d(0,18px,0); transition:opacity .5s var(--ease) var(--d-jp,.45s),transform .8s var(--spring-soft) var(--d-jp,.45s);} .fv.op-exp .fv-news{transform:translate3d(0,14px,0); transition:opacity .5s var(--ease) var(--d-news,.62s),transform .8s var(--spring-soft) var(--d-news,.62s);} .fv.op-exp.ready .jp, .fv.op-exp.ready .fv-news{transform:none;} /* 粒状ノイズ。開幕中だけ一段濃くして「感度を上げて撮っている」画にする */ body.op-live .grain{opacity:.34;transition:opacity .28s var(--ease);} @media (prefers-reduced-motion: reduce){ .fv h1 .ln>span i{transform:none!important;filter:none!important; opacity:1!important;letter-spacing:normal!important;} .fv-copy::before{animation:none!important;} .fv.op-exp .jp,.fv.op-exp .fv-news{transform:none!important;} } /* ========================================================================= 12. 支援技術向けの調整（2026-08-05） ========================================================================= */ /* 視覚的には隠すが読み上げには残す。 display:none や visibility:hidden だと読み上げからも消えるので使えない */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;} /* ⚠️ 暗い配色で「選択中」のチップが読めなくなっていた（実測コントラスト1.12）。 :root[data-theme="dark"] .chip の地色指定のほうが .chip.on より詳細度が高く、 選択中の反転が打ち消されていたため。選択中は明示的に上書きする。 */ :root[data-theme="dark"] .chip.on{ background:var(--ink);border-color:var(--ink);color:#080c16;} /* ========================================================================= 13. 明側の「文脈付き指定」を潰さないための取り戻し（2026-08-05） ------------------------------------------------------------------------- ⚠️ ダークの指定を @media(prefers-color-scheme) から :root[data-theme="dark"] へ移した際に詳細度が (0,1,0) → (0,3,0) に上がり、 us.css 側の `.stage-bg .fv{background:transparent}`（3Dステージを透かす指定） などを打ち消してしまっていた。実際にトップの星型八面体が ダークで見えなくなっていた（2026-08-05 実測）。 文脈クラス付きの指定は、ダーク側でも同じ文脈を付けて書き直す。 ========================================================================= */ :root[data-theme="dark"] .stage-bg .fv{background:transparent;} /* 3Dを透かす */ :root[data-theme="dark"] .stage-bg .foot{background:transparent;} :root[data-theme="dark"] .mark-page .ph-panel{background:transparent;} /* ========================================================================= 14. 暗い配色での可読性の作り込み（2026-08-05・実測ベース） ------------------------------------------------------------------------- ダークモードで各オーバーレイを開き、文字と実効背景のコントラストを 実測して洗い出した箇所（scratchpad/contrast.py）。 ⚠️ JSが後から生成する要素（ナビのドロップダウン、チャット）は CSSを目で追っても抜ける。開いた状態で測ること。 ========================================================================= */ /* ---- ナビのドロップダウン ---- ⚠️ 白ベタ(rgba(255,255,255,.92))に color:var(--ink) で組んでいたため、 暗い配色では --ink が明るい色に反転し「白地に白文字」になっていた （ユーザー報告 2026-08-05）。地の側を暗くする。 */ :root[data-theme="dark"] .navpop{ background:rgba(18,26,42,.94); box-shadow:0 22px 60px rgba(0,0,0,.6); outline:1px solid var(--line);} :root[data-theme="dark"] .navpop a:hover{background:rgba(90,144,255,.16);color:#cfe0ff;} /* ---- OAコンシェルジュ ---- */ :root[data-theme="dark"] .oa-msg.bot{background:var(--panel);color:var(--ink);} :root[data-theme="dark"] .oa-chat-head{background:#0b1220;color:var(--ink);} :root[data-theme="dark"] .oa-chat-input{background:var(--panel);} :root[data-theme="dark"] .oa-chat-input input{background:var(--surface-2);color:var(--ink);} :root[data-theme="dark"] .oa-chat-chips button{background:var(--surface-2);color:var(--ink); border-color:var(--line);} /* ---- 求人のタグ ---- 明側は「淡い青地 × 濃い青文字」。暗側で同じ組にすると 紺地に中間青で 2.6:1 まで落ちる。地を暗く・文字を明るくして反転させる。 */ :root[data-theme="dark"] .tags span{background:rgba(90,144,255,.18);color:#bfd4ff;} /* ---- 「必須」バッジ ---- 白文字 × 明るい青(--blue) は暗側で 3.06:1。小さい文字なので 4.5 必要。 地を濃い青に振って白文字を活かす。 */ :root[data-theme="dark"] .req{background:#1b4fd0;color:#fff;} /* ---- 薄いグレーの補足文 ---- --gray-l をそのまま使うと 4.2〜4.3 で基準(4.5)にわずかに足りない。 */ :root[data-theme="dark"]{--gray-l:#828d9f;} :root[data-theme="dark"] .foot-addr .en{color:#8d96a6;} /* ---- LINEボタン ---- ⚠️ 暗側の .pill{color:#080c16}（黒文字化）が .pill.line にも効いてしまい、 緑地に黒文字で 4.13:1 になっていた。LINEの緑は白文字が正。 */ :root[data-theme="dark"] .pill.line, :root[data-theme="dark"] .pill.line:hover{color:#fff;} :root[data-theme="dark"] .pill.line i{background:#fff;} :root[data-theme="dark"] .pill.line i svg{stroke:var(--line-g);} /* ---- 明るい配色でも足りていなかった2箇所（2026-08-05 実測）-------------- いずれも「あえて薄く置いた補足文」だが、WCAGの本文基準(4.5:1)に届いて いなかった。薄さの印象は保ったまま基準を満たす濃さへ寄せる。 .lead-en 英文サブ #8b95a6 → 2.79〜3.02:1（白／淡いグレー地） .foot-addr .en フッターの英文住所 #6f7784 → 4.11:1（黒い角丸ボックス地） */ .lead-en{color:light-dark(#67707e, #828d9f);} .foot-addr .en{color:#8d96a6;} /* ---- 図版カード（暗い配色）------------------------------------------------ ⚠️ 図版は canvas も SVG も「明るい地の上」の前提で描いている （figs.js は #1557DA / #07276f / #cfe0ff と白の塗りを直に指定）。 カードごと暗くすると図が沈んで読めなくなるので、明るい面のまま残す。 ただし純白のままだと暗いページの中で光って浮くので、少し落として 枠線を足し、「図を置くための面」として意図的に見せる。 */ :root[data-theme="dark"] .fig-card, :root[data-theme="dark"] .ph-card, :root[data-theme="dark"] .fig-band, :root[data-theme="dark"] .ai-row .fig-card{ background:#e6eaf1; border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 44px rgba(0,0,0,.5);} :root[data-theme="dark"] .stat-map .fig-card{background:rgba(230,234,241,.94);} /* 図版の下のキャプションは、明るい面の上なので暗い文字に戻す */ :root[data-theme="dark"] .fig-card figcaption, :root[data-theme="dark"] .ph-card figcaption{color:#4b5464;} /* 理念のとなりの循環図だけは地を持たない（元から transparent） */ :root[data-theme="dark"] .lead-fig .fig-card{background:transparent;border:0;box-shadow:none;} /* 入力欄の文字色。指定が無いとブラウザ既定の純黒になり、 サイトの寒色ブラック（--ink）と並んだときに一段冷たさが違って見える */ .frow input,.frow select,.frow textarea{color:var(--ink);} /* ========================================================================= スキップリンク（2026-08-05 追加） ------------------------------------------------------------------------- キーボードだけで操作する人は、ページを開くたびにナビ6項目＋配色ボタン＋ ハンバーガーを Tab で抜けてから本文に着いていた。それを1回で飛ばす。 ⚠️ display:none や visibility:hidden で隠さないこと。フォーカスを受け取れなくなり、 リンクとして機能しない。画面外に置いて :focus で引き出すのが定石。 ⚠️ ヘッダーは mix-blend-mode:exclusion で合成しているので、その上に重ねるには ヘッダーより大きい z-index が要る。 */ .skip{position:fixed;left:calc(var(--gut) + 8px);top:-72px;z-index:120; padding:13px 22px;border-radius:0 0 12px 12px; background:var(--blue);color:#fff;font-weight:700;font-size:14px;letter-spacing:.04em; box-shadow:0 10px 30px rgba(13,15,20,.28); transition:top .18s var(--ease);} .skip:focus{top:0;outline:2px solid #fff;outline-offset:-5px;} @media (prefers-reduced-motion: reduce){ .skip{transition:none;} } /* ========================================================================= JSが動かなかったときの保険（2026-08-05 追加） ------------------------------------------------------------------------- このサイトは本文の大半を .rv（opacity:0 で待機し、IntersectionObserver が .on を付けて現す）で組んでいる。ヒーローも .fv.ready 待ちで隠してある。 つまり「us.js が1行も動かない」と、ページ全体が真っ白になる。 us.js は ESM + importmap で、先頭が import 文。importmap 非対応のブラウザや、 ネットワークの取りこぼしで lenis の解決に失敗した場合、モジュール本体は 1行も実行されない ＝ .rv も .ready も永久に付かない。演出のための初期状態が、 そのままコンテンツの消失に直結する構造だった。 対策は のインラインスクリプト側にある: ・同期実行で に .js を付ける ・3秒経っても us.js から「動いた」合図(data-oa-ready)が来なければ .js を外す ここはその外れた状態を受けて、隠していたものを全部見せる。 ⚠️ 新しく「JSが付けるクラス待ちで隠す」要素を足したら、この一覧にも足すこと。 足し忘れると、その要素だけがJS失敗時に消える。 ========================================================================= */ :root:not(.js) .rv, :root:not(.js) .flow, :root:not(.js) .fv h1 .ln>span, :root:not(.js) .fv .jp, :root:not(.js) .fv-news, /* 行マスクも解除する。translateY を戻しても overflow:hidden が残っていると ディセンダ（gやy）が切れたままになる */ :root:not(.js) .fv h1 .ln{overflow:visible;} /* ========================================================================= OAコンシェルジュ（AIチャット） ========================================================================= */ /* ハニーポット。人間には見えないがボットは埋める欄。 ⚠️ display:none / visibility:hidden にしないこと。自動入力する側も それくらいは見ており、隠された欄を避けるものがある。画面外に置いて 「見えないが存在はする」状態にするのが定石。 ⚠️ tabindex="-1" が無いとキーボード操作の人がここに入ってしまう。 */ .oa-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px; opacity:0;pointer-events:none;} /* 応答待ちの「…」。数秒の無音は不具合に見えるので必ず出す */ .oa-typing{display:flex;gap:5px;align-items:center;min-height:1.4em;} .oa-typing i{width:6px;height:6px;border-radius:50%;background:currentColor; opacity:.35;animation:oa-dot 1.1s ease-in-out infinite;} .oa-typing i:nth-child(2){animation-delay:.15s;} .oa-typing i:nth-child(3){animation-delay:.3s;} @keyframes oa-dot{0%,60%,100%{opacity:.25;transform:translateY(0);} 30%{opacity:.9;transform:translateY(-3px);}} /* 動きを減らす設定では点滅だけにする（上下動は前庭系に負担がかかる） */ @media (prefers-reduced-motion: reduce){ .oa-typing i{animation:oa-dot-still 1.4s ease-in-out infinite;} @keyframes oa-dot-still{0%,100%{opacity:.25;}50%{opacity:.8;}} } /* 送信中の入力欄。押せないことが見て分かるようにする */ .oa-chat-input input:disabled, .oa-chat-input button:disabled{opacity:.5;cursor:default;} /* ========================================================================= ⚠️ クロスドキュメント View Transitions は撤去した（v2.3.0で導入 → v2.4.1で削除） ------------------------------------------------------------------------- このサイトの構造とは両立しなかった。実ブラウザ（CDP・実マウス入力）で 計測したところ、遷移そのものは 0.2〜0.3秒で完了しているのに、 **前ページのスナップショットが残り、ヘッダーとナビが二重に描画される**。 NEWS一覧→記事では前ページの巨大見出し「NEWS」まで重なって残り、 「リンクを押しても飛ばない」ように見えていた（ユーザー報告・2026-08-08）。 原因は、このサイトが持つ以下と View Transitions の合成が噛み合わないこと： ・position:fixed の3DCGステージ（.stage / .markwrap）が常時載っている ・lenis の慣性スクロールがスクロール位置を自前で持つ ・#header に view-transition-name を与えると別レイヤーで合成され二重化する Speculation Rules の prerender だけで体感は十分に速いので、演出は足さない。 ⚠️ 再導入するなら、まず 3DCGステージを遷移中だけ隠す設計から始めること。 入れて表示を確認せずに出荷しない（今回それで事故にした）。 ========================================================================= */ /* ========================================================================= ページ送り（NEWS一覧・アーカイブ）v2.3.2 the_posts_pagination() が出す .pagination > .nav-links > a/span.page-numbers 用。 ボタンはピル型で本文の書体に合わせる。1ページしか無いときは出力自体が無い。 ========================================================================= */ .pagination { margin: 34px 0 0; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid var(--line, #d8dde4); border-radius: 999px; font: 500 14px/1 var(--ff-ui, Inter, sans-serif); color: var(--ink); text-decoration: none; transition: background .2s, border-color .2s, color .2s; } .pagination a.page-numbers:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); } .pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--bg); } .pagination .page-numbers.dots { border-color: transparent; } /* 読み上げ用の見出しは隠す（視覚的には不要） */ .pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ========================================================================= 開幕「刷り上がる」＋ 紙 ＋ 落ち影（2026-08-08 採用） 材質を A-2（スタジオ環境＋網点＋輪郭のインク）にしたのに合わせ、 ヒーローの語彙を写真（露光）から印刷へ統一した。 ⚠️ 露光時代の規則（.fv h1 .ln>span i / oa-hairline 等）は残してある。 文字を割らなくなったので i の規則は当たらないが、露光へ戻すときに要る。 ========================================================================= */ /* ---- 紙。ページの表面にごく薄い網点を敷く ---- マークだけが網点で穴だけ無地、という対比が消えるので、Oの内側が 「白い抜き板」に見えなくなる。 ⚠️ 敷く場所は必ずマークより下。上に置くとマークのシェーダーの網（4px・45度）と 二重になってモアレる。body の擬似要素なら .stage（z-index:0の固定要素）より 先に塗られるので確実に下に来る。 下層ページ（.mark-page）にも同じ紙を敷く（2026-08-08）。あちらは背景ロゴ （.mark-bg・z-index:0）が同じ層に居るが、擬似要素の方が先に塗られるので 紙 → ロゴ → 本文（main は z-index:2）の順になる。 本文の面が半透明（.sec.white / .sec.gray）なので、紙は全面で効く。 */ body.stage-bg::before, body.mark-page::before{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background-image: radial-gradient(circle at 25% 25%, rgba(16,22,37,.13) .75px, transparent .85px), radial-gradient(circle at 75% 75%, rgba(16,22,37,.13) .75px, transparent .85px); background-size:5.66px 5.66px; } html[data-theme="dark"] body.stage-bg::before, html[data-theme="dark"] body.mark-page::before{ background-image: radial-gradient(circle at 25% 25%, rgba(233,237,244,.10) .75px, transparent .85px), radial-gradient(circle at 75% 75%, rgba(233,237,244,.10) .75px, transparent .85px); } /* ---- 落ち影。キャンバスのアルファに沿うので、マークの穴には影が落ちない ＝「板に穴が空いている」と読める。描画側は無改造 ---- */ .stage canvas{filter:drop-shadow(0 22px 30px rgba(16,22,37,.22));} html[data-theme="dark"] .stage canvas{filter:drop-shadow(0 22px 34px rgba(0,0,0,.55));} /* ---- インクの端。見出しの各行を、細線が先行して送り出す ---- */ .fv h1 .ln{position:relative;} .fv h1 .ln>.pedge{position:absolute;left:0;right:0;top:100%;height:1.6px; background:var(--op-acc);opacity:0;pointer-events:none; will-change:top,opacity;} /* ---- 見当（トンボ）とインクの帯。刷る前に版を合わせる印 ---- 「LOADING 000→100」は読み込みの語彙なので使わない。刷り終わりに引き上げる。 */ .fv .press{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;} .fv .press.on{opacity:1;} .fv .press .tm{position:absolute;width:34px;height:34px;} .fv .press .tm::before,.fv .press .tm::after{content:'';position:absolute; background:var(--op-acc);opacity:.5;transform:scale(0);} .fv .press .tm::before{left:0;right:0;height:1px;} .fv .press .tm::after{top:0;bottom:0;width:1px;} .fv .press .tl{left:0;top:0;} .fv .press .tr{right:0;top:0;} .fv .press .bl{left:0;bottom:0;} .fv .press .br{right:0;bottom:0;} .fv .press .tl::before,.fv .press .bl::before{transform-origin:0 50%;} .fv .press .tr::before,.fv .press .br::before{transform-origin:100% 50%;} .fv .press .tl::after,.fv .press .tr::after{transform-origin:50% 0;} .fv .press .bl::after,.fv .press .br::after{transform-origin:50% 100%;} .fv .press.on .tm::before,.fv .press.on .tm::after{animation:oa-tombo .46s var(--strong) both;} .fv .press.on .tr::before,.fv .press.on .tr::after{animation-delay:.05s;} .fv .press.on .bl::before,.fv .press.on .bl::after{animation-delay:.10s;} .fv .press.on .br::before,.fv .press.on .br::after{animation-delay:.15s;} @keyframes oa-tombo{from{transform:scale(0)}to{transform:scale(1)}} .fv .press .inkbar{position:absolute;left:0;right:0;bottom:0;height:1.5px; background:color-mix(in srgb, var(--op-acc) 16%, transparent);overflow:hidden;} .fv .press .inkbar b{display:block;height:100%;width:100%;background:var(--op-acc); transform:scaleX(0);transform-origin:0 50%;} @media (prefers-reduced-motion: reduce){ /* 動きを減らす設定では見当も刷りも出さない（完成形が即出る） */ .fv .press{display:none!important;} .fv h1 .ln>.pedge{display:none!important;} .stage canvas{filter:none!important;} }