/* plan-5 — 個別対応（外部サイト連携） 「デザインシステム ＋ 個別対応 ＝ 運用サイト」の、個別対応の側。 このページは現行UCLサイト（www.ucl-group.co.jp）のヘッダー配下に差し込む前提のため、 本体サイトと見た目を揃えるための定義がいる。それらは汎用のデザインシステムには 持ち込まず、このファイルに閉じる。 ここに置くもの : 本体サイト由来の色・タイトル帯・共通フッターなど、本体に依存するもの ここに置かないもの: 他のページでも成立する汎用のコンポーネント（→ design-system/ 側へ） 読み込み順（design-system の後）: */ /* ========================================================= UCL 本体サイト由来の色 値は本体サイト（Tailwind テーマ）から採ったもの。 it-purple(#7c3aed) は --p1、it-cyan(#06b6d4) は --p4 と同値。 ========================================================= */ :root { --ucl-navy: #0f172a; /* slate-900。タイトル帯の地色 */ --ucl-navy-deep: #020617; /* slate-950。フッターの地色 */ --ucl-line-dark: #1e293b; /* slate-800。暗色面の区切り線 */ --ucl-txt-dark: #cbd5e1; /* slate-300。暗色面の本文 */ --ucl-muted-dark: #94a3b8; /* slate-400。暗色面の補助テキスト */ --ucl-faint-dark: #64748b; /* slate-500。社名補記・コピーライト */ --ucl-cyan: #06b6d4; /* it-cyan。「企業情報」列のアクセント */ --ucl-lime: #65a30d; /* energy-lime。「事業領域」列のアクセント */ --ucl-purple: #7c3aed; /* it-purple。「その他」列のアクセント */ --ucl-blue: #2563eb; /* blue-600。タイトル帯グラデーションの終端 */ } /* ========================================================= Sub header（サブヘッダー化した nav） 本体サイトのヘッダー配下に置くため、デザインシステムの nav（70px）より 高さを詰め、右のCTAボタンは持たせない（問い合わせ導線は本体ヘッダー側にある）。 ========================================================= */ /* --------------------------------------------------------- 単体で開くときと、本体サイトに差し込むときの両方で成立させる デザインシステムの nav は position:sticky; top:0 なので、素のまま差し込むと 本体サイトのヘッダー（こちらも sticky）と同じ位置を取り合って重なる。 本体ヘッダーの高さを --host-header-height の1か所に持たせ、 このページの sticky はすべてそこから積み上げる形にしてある。 素のまま開く : --host-header-height:0px（既定）→ 従来どおり最上段に貼り付く 本体に差し込む : 実際のヘッダー高に変えるだけ。nav も .cat-nav も アンカーの着地点（.cat-group の scroll-margin-top）も追従する 差し込み側での指定例（どちらでもよい）: :root{--host-header-height:80px} ← 埋め込み先のCSSで上書き --------------------------------------------------------- */ :root{ --host-header-height:0px; --sub-nav-height:52px; /* sticky な要素（.cat-nav）は、本体ヘッダー＋このサブヘッダーの下に張り付く */ --sticky-top:calc(var(--host-header-height) + var(--sub-nav-height)); } /* nav{top:0} を上書きする（クラスなのでデザインシステム側の要素セレクタより強い） */ .nav-sub{top:var(--host-header-height)} .nav-sub .nav-in{height:var(--sub-nav-height)} .nav-sub .logo{font-size:17px} .nav-sub .nav-links{gap:24px;font-size:14px} /* ========================================================= Hero の大見出し h1 はページタイトル帯が持つため、ヒーロー側は h2（.hero-h）にする。 見た目はデザインシステムの h1 と同じ。 ========================================================= */ .hero-h{font-size:clamp(42px,8vw,88px);line-height:var(--line-height-h1);font-weight:900;letter-spacing:-2px} /* ========================================================= Page head（ページタイトル帯） 本体サイトの各事業ページ（例: /ict-solutions）と同じ体裁。 本体ヘッダーの配下に置いたときに、そのまま1ページとして繋がって見える。 ========================================================= */ .page-head{position:relative;overflow:hidden;background:var(--ucl-navy);padding:64px 0 68px} /* 左シアン→右ブルーの薄いオーバーレイ（本体サイトと同じ 20% 濃度） */ .page-head::before{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, rgba(6,182,212,.20), rgba(37,99,235,.20)); } .page-head-in{position:relative;z-index:1;text-align:center} /* バッジだけは左寄せ（width:fit-content なので親の text-align に影響されない）。 帯はシアン→ブルーのグラデーションなので、ベタ塗りのピルだと色が喧嘩する。 帯の色をそのまま透かすガラス調にして、左端の光る点で「新しさ」を出す。 マークアップ: 2026年 新設 */ .page-head-badge{ /* flex + fit-content で、中央寄せの親（.page-head-in）の中でも左端に置かれる */ display:flex;align-items:center;gap:10px;width:fit-content;margin:0 0 30px; padding:8px 18px 8px 15px;border-radius:var(--radius-pill); color:#eaf6ff;font-size:13px;font-weight:900;letter-spacing:.06em;line-height:1; background:linear-gradient(115deg, rgba(6,182,212,.28), rgba(37,99,235,.20)); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(8px); /* 外に落ちるシアンの光と、上辺の白いハイライト（ガラスの厚みを出す） */ box-shadow:0 10px 26px -14px rgba(6,182,212,.9), inset 0 1px 0 rgba(255,255,255,.22); } /* 左端の光点。✦ の絵文字的な記号より作りが締まる。 ゆっくり明滅させて「稼働中のランプ」に見せる（点滅ではなく呼吸のリズム） */ .page-head-badge .badge-dot{ flex:none;width:7px;height:7px;border-radius:50%; background:var(--ucl-cyan); box-shadow:0 0 0 4px rgba(6,182,212,.16), 0 0 14px rgba(6,182,212,.95); animation:badge-dot-blink 2.6s ease-in-out infinite; } /* 明るさだけでなく色も動かす。点灯側は明るいシアン（--p4-light 相当）、 減光側は帯の終端と同じブルー（--ucl-blue）に寄せて、帯の中で色が呼吸して見えるようにする */ @keyframes badge-dot-blink{ 0%,100%{ background:#22d3ee; opacity:1; box-shadow:0 0 0 4px rgba(34,211,238,.18), 0 0 14px rgba(34,211,238,.95); } 50%{ background:var(--ucl-blue); opacity:.6; box-shadow:0 0 0 7px rgba(37,99,235,.05), 0 0 6px rgba(37,99,235,.55); } } @media(prefers-reduced-motion:reduce){ .page-head-badge .badge-dot{animation:none} } /* 数字と単位はひとかたまり（親の gap を挟ませない） */ .page-head-badge .badge-year{display:inline-flex;align-items:baseline} /* 「年」だけ一段小さく落として、数字を主役にする */ .page-head-badge .badge-unit{font-size:.82em;font-weight:800;opacity:.75;margin-left:2px} /* 数字と語句を分ける縦罫 */ .page-head-badge .badge-sep{flex:none;width:1px;height:12px;background:rgba(255,255,255,.28)} /* 素の h1（ヒーロー用の 88px）を上書きする */ .page-head h1{ font-size:clamp(28px,4.4vw,48px);line-height:1.25;letter-spacing:-.5px; font-weight:800;color:var(--txt-on-accent); } .page-head-en{margin-top:14px;color:var(--ucl-muted-dark);font-size:15px;font-weight:600;letter-spacing:.06em} /* ========================================================= Site footer（本体サイトと共通のフッター） 本体サイトのフッターを移植したもの。列見出しの左罫線と リンクのホバー色を列ごとに変える（企業情報=cyan / 事業領域=lime / その他=purple）。 アイコンは本体と同じ lucide の SVG を HTML にインラインで置き、 ここではサイズと色だけを与える。 ========================================================= */ .site-foot{ background:var(--ucl-navy-deep);color:var(--ucl-txt-dark); border-top:1px solid var(--ucl-line-dark); padding:64px 0 32px;font-size:14px; } .foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px} /* ブランド列 */ .foot-logo{font-size:24px;font-weight:900;letter-spacing:-.5px;color:var(--txt-on-accent)} .foot-corp{margin-top:4px;font-size:12px;color:var(--ucl-faint-dark)} .foot-info{display:flex;align-items:flex-start;gap:12px;margin-top:20px;line-height:1.7} /* lucide の map-pin / phone。色は currentColor 経由で渡る */ .foot-ico{flex:none;width:20px;height:20px;color:var(--ucl-cyan)} .foot-ico-top{margin-top:2px} /* 複数行の住所では1行目の中心に合わせる */ /* リンク列 */ .foot-h{ color:var(--txt-on-accent);font-size:15px;font-weight:900; border-left:4px solid var(--ucl-cyan);padding-left:12px;margin-bottom:22px; } .foot-col-2 .foot-h{border-left-color:var(--ucl-lime)} .foot-col-3 .foot-h{border-left-color:var(--ucl-purple)} .foot-links{display:flex;flex-direction:column;gap:12px;list-style:none} .foot-links a{display:inline-flex;align-items:center;gap:8px;transition:color var(--transition-fast)} /* リンク頭の lucide chevron-right。stroke="currentColor" なのでホバー色にも追従する */ .foot-chev{flex:none;width:12px;height:12px} .foot-col-1 .foot-links a:hover{color:var(--ucl-cyan)} .foot-col-2 .foot-links a:hover{color:var(--ucl-lime)} .foot-col-3 .foot-links a:hover{color:var(--ucl-purple)} /* コピーライト */ .foot-btm{border-top:1px solid var(--ucl-line-dark);padding-top:28px;color:var(--ucl-faint-dark);font-size:12px} /* ========================================================= SDD-Kit モーダル（外部ページの取り込み） モーダルで開く docs/assets/SDD-Kit/index.html はダークなページのため、 デザインシステムの白いモーダル枠のままだと帯の色が食い違って見える。 そこで枠ごと SDD-Kit の配色に寄せる。値は SDD-Kit 側の :root から採ったもの。 **セレクタは必ず #sddkit-modal に閉じること。** ページには他のモーダル （#agile-modal＝白い文書モーダル）もあり、.modal で当てると巻き添えになる。 ========================================================= */ :root { --sdd-bg: #0b0f14; /* SDD-Kit の --bg。ページ地色 */ --sdd-line: #233246; /* SDD-Kit の --line。区切り線 */ --sdd-txt: #e8eef5; /* SDD-Kit の --text */ --sdd-accent: #3ddc97; /* SDD-Kit の --accent（グリーン） */ } #sddkit-modal{background:var(--sdd-bg);color:var(--sdd-txt)} #sddkit-modal .modal-head{border-bottom-color:var(--sdd-line)} #sddkit-modal .modal-link{color:var(--sdd-accent)} #sddkit-modal .modal-close{background:transparent;border:1px solid var(--sdd-line);color:var(--sdd-txt)} #sddkit-modal .modal-close:hover{background:var(--sdd-txt);color:var(--sdd-bg)} #sddkit-modal .modal-close:focus-visible{outline-color:var(--sdd-accent)} /* モーダル下端の角丸（--radius-lg）が iframe の右下を斜めに切るため、 スクロールバーの末端が欠けて見える。角丸の分だけ iframe を上げて逃がす。 空いた帯はモーダルの地色（SDD-Kit と同色）なので継ぎ目は出ない */ #sddkit-modal .modal-body{background:var(--sdd-bg);padding-bottom:var(--radius-lg)} /* color-scheme は iframe 要素から中の文書へ伝わる（中の文書が自分で指定していない場合）。 これで SDD-Kit 側を編集せずに、スクロールバーだけをダークにできる。 SDD-Kit は他の案とも共用しているため、あちらには手を入れない */ #sddkit-modal .modal-frame{background:var(--sdd-bg);color-scheme:dark} /* ========================================================= Breakpoint — md (max-width:820px) デザインシステムと同じ単一ブレークポイント ========================================================= */ @media(max-width:820px){ /* ------------------------------------------------------- Sub header — 2段組み（1段目=ロゴ／2段目=リンク） デザインシステムの nav は md でリンクを display:none にする（右にCTAボタンを 持つ前提で、その分の幅が無くなるため）。このページのサブヘッダーはCTAを持たず、 ロゴだけが残ってナビゲーションが消えてしまうので、折り返して2段目に出す。 ■ 2段でも高さは固定する .cat-nav（2つ目の sticky）の張り付き位置は --sub-nav-height の数値を そのまま使う。CSSに「1つ前の sticky の下」を表す書き方は無く、 上の高さを人間が数えて渡すしかないため、**高さが動くと目次の位置がずれる**。 そこでモバイルでは文字を一段小さくし、2段でも決まった高さに収める。 （モバイルで小さくなるのは自然なので、デザイン側で吸収する） ------------------------------------------------------- */ /* 2段ぶんの高さ。最も大きくなるとき（リンク14px）の内訳は 上パディング 8 ＋ ロゴ 13px×1.4 ＋ 段間 8 ＋ リンク 14px×1.5 ＋ 下パディング 10 ≒ 65px 文字・余白を触ったらこの値も合わせて見直すこと（.cat-nav の位置がこれで決まる） */ :root{--sub-nav-height:66px} /* height ではなく min-height。リンクが縮んだ幅でも帯の高さは 66px で一定になり、 万一さらに折り返しても文字が切れるのではなく帯が伸びるだけで済む。 align-content:flex-start で、余った分は下に落として1段目を上に寄せる */ .nav-sub .nav-in{ height:auto;min-height:var(--sub-nav-height); flex-wrap:wrap;align-content:flex-start;row-gap:8px;padding-top:8px;padding-bottom:10px; } /* 幅100%で1行を占有させ、リンクを2段目に送る。 1段目は左上の小さな見出し扱いで、ナビより一段小さく。 行間は本文用の1.7ではなく詰める（帯なので行送りは要らない） */ .nav-sub .logo{width:100%;font-size:13px;line-height:1.4} /* components.css の .nav-links{display:none} を打ち消す。 **文字と間隔を幅に追従させて、常に1行に収める。** 5つのラベルは合計23文字ぶんの幅を要求する（「AIを搭載するシステム」だけで その4割強）。固定サイズだと、大きくすれば狭い端末で折り返し、折り返さない 大きさにすると広い端末で小さすぎる。clamp で下限・上限を決めて間を伸縮させる。 上限14pxは、その下のカテゴリ目次（.cat-nav）より小さくならない大きさ。 ラベルの途中で改行させない（日本語は文字間で折り返せてしまうため） */ .nav-sub .nav-links{ display:flex;width:100%;justify-content:flex-end;flex-wrap:wrap; gap:6px clamp(8px,2.2vw,14px); font-size:clamp(11px,3.15vw,14px);line-height:1.5; } .nav-sub .nav-links a{white-space:nowrap} .page-head{padding:44px 0 48px} .foot-cols{grid-template-columns:1fr;gap:40px;margin-bottom:40px} /* 全画面化して角丸が無くなるため、下端の逃げも不要 */ #sddkit-modal .modal-body{padding-bottom:0} }