/* ============================================================================ components.css — 意匠の実装本体 出典: ../corporate-site/phase1_design_system.md（正本） 2026-07-28 / dev-web-coding skeleton.css（骨格用の最小限CSS）を置き換える、本実装のスタイルシート。 tokens.css の --ws- 変数だけを使い、色・余白・フォントサイズの直値は書かない （phase1_design_system.md 8-1のガードレール）。 ============================================================================ */ /* --------------------------------------------------------------------------- 0. リセット・ベース ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* ページ内リンクの着地位置（2026-08-05 籠谷さんの指摘）。 募集要項の左メニューから「雇用形態」等へ飛ぶと、着地点が固定ヘッダーの真下に潜り、 その項目名が隠れて何の欄に飛んだのか分からない状態だった。 id を持つ要素すべてに「スクロールで着地するときに上に確保する余白」を与える。 ヘッダーの高さ＋見出し上の余白。ヘッダー高が変わっても変数経由で自動追従する。 */ [id] { scroll-margin-top: calc(var(--ws-header-h, 72px) + var(--ws-space-6, 32px)); } /* 横スクロール抑止（2026-07-30 COO追加・実機計測で発見）。 `.ws-scrub--depth` 等のスクロール連動演出はセクション全体を scale() で拡大するため、 拡大した分だけ画面幅をはみ出し、375px幅で41pxの横スクロールが発生していた （/ と /about/ で実測）。演出の数値を削ると奥行き感が消えるので、はみ出しは 親側で切り落として吸収する。 ⚠️ `overflow-x: hidden` を使ってはいけない。hidden はこの要素をスクロールコンテナに 変えてしまい、下層ページ（/about/ /interview// 等）のstickyレールが ページ全体ではなくこの要素の内側で止まるようになる。`clip` はスクロールコンテナを 作らないため、sticky を壊さずにはみ出しだけを消せる。 */ main { overflow-x: clip; } body { margin: 0; font-family: var(--ws-font-text); font-size: var(--ws-fs-body); line-height: var(--ws-lh-body); color: var(--ws-text); background: var(--ws-bg); /* 日本語の改行品質（2026-07-30 COO改定・大﨑さん指摘「改行が気持ち悪い」）。 全14ページ×2画面幅を実測したところ、不自然な改行が111件あり、その110件が 「カタカナ語の途中で割れている」だった（例: 「ウェルス／ペック」と社名が2行に割れる）。 原因は2つ: ① overflow-wrap: anywhere — 語の途中を含め「どこでも切ってよい」という指定 ② 日本語の既定の改行規則 — 禁則文字以外なら文字と文字の間はどこでも切れる ①は break-word に落とす（はみ出す時だけ切る）。②は下の auto-phrase で文節単位にする。 */ word-break: normal; overflow-wrap: break-word; line-break: strict; /* SP固定CTAバー分の余白（受入B-7）。バー非表示時（lg以上）は0にする。 */ padding-bottom: calc(var(--ws-fixedbar-h) + env(safe-area-inset-bottom) + var(--ws-space-4)); } @media (min-width: 1024px) { body { padding-bottom: 0; } } /* 日本語を「文節単位」で折り返す（2026-07-30 COO追加）。 word-break: auto-phrase はブラウザが日本語の文節を判定し、その境目でだけ改行する。 これにより「ウェルス／ペック」「エンジ／ニア」のような語中の分断が消える。 ⚠️ 必ず上の body ルールより後ろに置くこと。同じ詳細度なので、前に置くと body の `word-break: normal` に上書きされて無効になる（一度やらかした）。 @supports で囲うのは、未対応ブラウザ（現時点のSafari/Firefox）に無効な値を渡さないため。 未対応環境では従来どおりの改行に戻るだけで、文章が読めなくなることはない。 */ /* ⚠️ `word-break: auto-phrase`（文節の切れ目でだけ改行する設定）は2026-08-05に外した。 2026-07-30に「カタカナ語が語中で割れる」対策として入れたが、**副作用のほうが目立った**。 実測（1行41字入る枠での本文3行）: auto-phrase あり … 40字 / 36字 / 38字 → 行末が最大5字空く（＝右端がガタつく） auto-phrase なし … 40字 / 40字 / 41字 → ほぼ埋まる 下の両端揃えと組み合わせたとき、この差が字間の広がりに直結する: ありのとき 最大2.63px（文字幅17pxに対して15%）＝間延びして見える なしのとき 0.17〜0.62px＝ほぼ見えない 語中割れは「なし」でも7ページ合計で12件まで減っている（旧 overflow-wrap: anywhere 時代は111件）。 右端の揃いは下の `text-align: justify` が担保するので、この設定は不要になった。 再導入するときは、必ず両端揃えとの組み合わせで字間の広がりを実測すること。 */ /* 行末に1語だけ取り残される「泣き別れ」を減らす。 見出しは行の長さを揃え（balance）、本文は最終行が極端に短くならないようにする（pretty）。 どちらも未対応ブラウザでは単に無視される。 */ /* ⚠️ `text-wrap: balance`（各行の長さを揃える）と `text-align: justify`（両端揃え）は**併用禁止**。 balance はわざと行を短く切って揃えるため、そこへ両端揃えを掛けると 「短く切った行を枠いっぱいまで引き伸ばす」ことになり、字間が極端に開く （2026-08-05 大﨑さん指摘。/question/ のリード文が「で す が 、 ウ ェ ル ス ペ ッ ク は」と間延びした）。 balance は両端揃えを掛けない見出しだけに限定する。リード文は本文と同じ扱い（pretty）にする。 */ h1, h2, h3, .ws-h1, .ws-h2, .ws-h3 { text-wrap: balance; } p, li, dd, .ws-lead { text-wrap: pretty; } /* 見出しだけは「文節の切れ目でだけ改行する」（2026-08-05 大﨑さん指摘）。 スマホで見出しが「ウェルスペッ／クで、踊れ。」「ウェルスペッ／クの働き方」と社名の途中で割れていた。 見出しは1〜2行しかなく、本文と違って**行を最後まで埋める必要がない**ので、 行末が多少空いても実害がない。逆に語が割れると読みづらさが目立つ。 本文側は行の埋まり具合が字間の広がりに直結するため、この設定は掛けない（上の注記参照）。 */ @supports (word-break: auto-phrase) { h1, h2, h3, h4, .ws-h1, .ws-h2, .ws-h3, .ws-sec__rail > h2, .ws-card__title, .ws-dl__dt, .ws-stat__label, .ws-manifesto__fact-label, .ws-toc a, .ws-jobtabs__item, .ws-nav a { word-break: auto-phrase; } } /* 読ませる文章は両端揃えにする（2026-08-05 大﨑さん指摘「改行がやっぱり変」）。 原因は上の `word-break: auto-phrase`（文節の切れ目でだけ改行する設定）だった。 語の途中で割れなくなる代わりに、文節ごと次の行へ送られるため**行末が5文字ほど空く**。 実測: 各行の埋まり具合 96% / 87% / 88%（＝右端がガタつく）。 では文節折返しを外せばよいかというと、そうすると7ページで**カタカナ語の途中割れが12件**戻る （「エンジニ／ア」「キャリアパ／ス」等）。これは2026-07-30に大﨑さんの指摘で直した問題。 両端揃えなら両立する。実測で**埋まり具合100%・字間の広がりは1%**（ほぼ見えない）で、 そもそも日本語の組版では両端揃えが標準。 ⚠️ カードなど1行が短い場所には掛けない。文字数が少ないほど1文字あたりの広がりが大きくなり、 字間が間延びして見えるため（1行13字のカード等）。対象は下の「読ませる文章」だけに限る。 */ /* ⚠️ 両端揃えは**PC幅だけ**に掛ける（2026-08-05 実測して確定）。 両端揃えは「行が自然にほぼ埋まる」ときだけ成立する。埋まらない分を字間で埋めるため、 1行の文字数が少ないほど1文字あたりの広がりが大きくなる。 PC（1行38〜41字）… 2字足りない → 字間 +0.6px（気づかない） SP（1行15〜19字）… 2字足りない → 字間 +2.3〜3.8px（はっきり間延びして見える） 日本語は禁則処理で行末に1〜2字の余りが普通に出るため、狭い画面では避けられない。 SPは左揃えのままにする（余りは1〜2字なので右端のガタつきも小さい）。 */ @media (min-width: 1024px) { .ws-w-text p, .ws-measure p, /* ⚠️ `.ws-measure p` は「.ws-measure の中の p」しか拾わない。テンプレートには `

`（p 自身に付ける書き方）も混在しており、そちらが漏れて **同じページの中で節ごとに両端揃えのON/OFFが入れ替わっていた** （2026-08-05 Web制作部の指摘→COOが実測で確認: /about/ の01節=justify・03節=start）。 */ p.ws-measure, p.ws-w-text, .ws-block-gap > p, .ws-dl__dd, .ws-dl__dd li, .ws-qa__answer p, .ws-note, .ws-note li { text-align: justify; text-justify: inter-character; /* 単語間ではなく字間で調整する（日本語向け） */ } /* リード文は対象外。本文より文字が大きく（19px）、置かれる列も狭いため1行26〜33字しか入らず、 2字余っただけで字間が1.6〜2.2px広がる（PCでも見える）。短い導入文なので左揃えで十分。 `inherit` にするのは、中央揃えの中に置かれたリード文（CTA・完了画面など）の中央揃えを 壊さないため。`left` と書くと中央揃えが解除されてしまう。 */ p.ws-lead, .ws-lead p { text-align: inherit; } } img, svg { max-width: 100%; display: block; } a { color: inherit; } /* フォーカスリング。outline:none の単独指定はしない（8-2）。 */ :focus-visible { outline: 3px solid var(--ws-focus); outline-offset: 2px; } /* --------------------------------------------------------------------------- 1. アクセシビリティ共通 ------------------------------------------------------------------------- */ .ws-skip-link { position: absolute; left: -999px; top: 0; z-index: 100; } .ws-skip-link:focus { left: var(--ws-space-3); top: var(--ws-space-3); background: var(--ws-bg); color: var(--ws-text); padding: var(--ws-space-2) var(--ws-space-4); border-radius: var(--ws-radius-input); } .ws-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 2. レイアウト（コンテナ・セクション） 出典: visual_spec.md 7-1（2026-07-29全面改訂）。旧 `--ws-container: 1120px` 固定 （1920px画面で中央58%しか使わない＝V-5違反）を廃止し、4段階の幅トークンに置換した。 `.ws-container` は既存ページ（about/information/question/detail/interview等・未着手） との互換のため残し、値だけ `--ws-w-main`（本文レイアウト用・7-1の用途表に一致）に 差し替える。TOP新セクションは `.ws-bleed` / `.ws-w-wide` / `.ws-w-main` を直接使う。 ------------------------------------------------------------------------- */ .ws-container { max-width: var(--ws-w-main); margin-inline: auto; padding-inline: var(--ws-gutter); } .ws-w-text { max-width: var(--ws-w-text); margin-inline: auto; padding-inline: var(--ws-gutter); } /* 読み物カラム（プライバシーポリシー・エントリー）の大見出しは、カラム幅に収まる字送りにする （2026-07-30 COO追加）。実測でカラムは544px、--ws-fs-h1 は56px。 「プライバシーポリシー」10文字＝560pxで16pxだけ足りず、「プライバシーポリ／シー」と 語中で割れていた。1語がカラムより広ければ改行規則では救えないため字送り側で解く。 上限48pxなら10文字＝480pxで収まる。 下限28pxはスマホ基準。375px幅からスクロールバー15pxと左右の余白48pxを引くと 実効312pxしかなく、32pxだと10文字＝320pxで再び割れた（実測）。28pxなら280pxで収まる。 */ .ws-w-text > .ws-h1, .ws-w-text > h1 { font-size: clamp(1.75rem, 5vw, 3rem); } .ws-w-narrow { max-width: var(--ws-w-narrow); margin-inline: auto; padding-inline: var(--ws-gutter); } .ws-w-main { max-width: var(--ws-w-main); margin-inline: auto; padding-inline: var(--ws-gutter); } .ws-w-wide { max-width: var(--ws-w-wide); margin-inline: auto; padding-inline: var(--ws-gutter); } .ws-bleed { max-width: 100%; margin-inline: 0; padding-inline: 0; } .ws-measure { max-width: var(--ws-measure); } /* ★グリッド共通の規律（2026-07-31 dev-web-design・不具合A/B/Cの再発防止） このファイルで `grid-template-columns` に素の `1fr` を書かない。必ず `minmax(0, 1fr)` にする。 `1fr` は `minmax(auto, 1fr)` と等価で、トラックの下限が「中身のmin-content幅」になるため、 折り返せない中身（white-space:nowrap／日本語の1文節／固定幅の画像／flexの入れ子）が 1つでも入るとトラックが親幅を超え、画面外へはみ出す。`minmax(0, 1fr)` は下限を0にするだけで、 中身が収まっている限り計算結果は `1fr` と完全に同一＝既存の見た目は変わらない。 flexの子には同じ理由で `min-width: 0` を当てる（.ws-qa__answer 参照）。 */ /* 12カラムグリッド（7-2）。TOP新セクションで使用。 */ @media (min-width: 1024px) { .ws-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; } } @media (min-width: 1440px) { .ws-grid { gap: 32px; } } /* PCの骨格＝「stickyレール＋本文」の2カラム（7-3）。 スクロールジャックを一切使わず `position: sticky` のみ・追加JS 0行。 レールに載せるもの: セクション番号（明朝）／縦の罫（.ws-rule--rail）／見出し／CTA。 */ @media (min-width: 1024px) { .ws-sec { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); gap: 48px; } .ws-sec__rail { position: sticky; top: calc(var(--ws-header-h, 72px) + 40px); align-self: start; height: max-content; } /* レール内の見出しは、レール幅に収まる字送りまで落とす（2026-07-30 COO追加）。 レールは1440px幅で実測272px。そこに --ws-fs-h2（48px）の見出しを入れると 「ウェルスペック」7文字＝336pxで物理的に入らず、社名が「ウェルス／ペック」と 2行に割れていた（/about/ で4件実測）。文節単位の改行（auto-phrase）を入れても、 1語が枠より広ければ割るしかないので、これは字送り側で解く。 36px なら 7文字＝252px でレールに収まる。1024px幅では 2.5vw が効いてさらに縮む。 */ .ws-sec__rail > h2, .ws-sec__rail > .ws-h2 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); } } @media (min-width: 1440px) { .ws-sec { gap: 64px; } } /* --------------------------------------------------------------------------- 2-b. 下層ページのレール（lower_pages_design.md 1-3。visual_spec 8-1「SPではレールを使わない」の実装） PCのDOM順（番号 → 縦罫 → 見出し → 付随物）を変えずに、SPだけ 「番号 ＋ 見出し」を1行に組み替え、縦罫を落とす。順序入れ替え（order）は使わない。 ------------------------------------------------------------------------- */ @media (max-width: 1023px) { .ws-sec__rail { display: grid; /* 2列目は必ず minmax(0, 1fr)（2026-07-31 dev-web-design・不具合B）。 `1fr`（＝minmax(auto,1fr)）だと見出しのmin-content幅がトラックを押し広げる。 body の `word-break: auto-phrase` はブラウザに文節単位で改行させる指定だが、 その副作用として「1文節＝分割不可の塊」と見なされ、min-content幅が文節の幅まで 跳ね上がる。/about/ の「ウェルスペック独自通貨制度」は分割点の無い一続きの 複合語なので min-content ＝ 13文字ぶん＝327px（実測・25.05px×13）になり、 グリッド幅280pxのレールを右へ突き破って画面外（右端x=415／画面360）へ出ていた。 0を下限にすればトラックは 280 - 40(番号) - 12(gap) = 228px に確定し、 行に収まらない文節はブラウザが通常の日本語改行にフォールバックして折り返す （228px ÷ 25.05px ＝ 9文字。「ウェルスペック独自／通貨制度」と自然な位置で割れる）。 この折り返しはPCのレール（幅272px・36px＝7.5文字）で既に起きている挙動と同じ。 ⚠️ 番号の字下げ（見出しがレール左端から52px下がる）は意図した意匠なので残す。 詰めても1行あたり2文字強しか増えず、番号と見出しの対の関係を失う方が損。 */ grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; column-gap: var(--ws-space-3); row-gap: var(--ws-space-4); } .ws-sec__rail > * { grid-column: 1 / -1; } /* 既定は全幅 */ .ws-sec__rail > .ws-sec__no { grid-column: 1; font-size: 2rem; } .ws-sec__rail > h2 { grid-column: 2; } /* 番号と同じ行に並ぶ */ .ws-sec__rail > .ws-rule--rail { display: none; } /* 縦罫はPC専用 */ /* /interview// のレール: SPでは縦写真だけを残す（番号・氏名・［一覧へ戻る］は ②タイトル部のパンくず・h1・肩書氏名と重複するため）。lower_pages_design.md 4-2のSP構成そのもの。 */ .ws-sec__rail--person > :not(.ws-figure) { display: none; } } /* レールが画面高に収まらない場合は sticky をやめる（lower_pages_uiux.md 4-2「レール高の逃げ道」のCSS版）。 DOMを動かさずに済み、sticky内でレール下端（＝［一覧へ戻る］）が切れる事故が起きない。 */ @media (min-width: 1024px) and (max-height: 700px) { .ws-sec__rail { position: static; } } .ws-sec__no { font-family: var(--ws-font-display); font-weight: 400; font-size: 3.5rem; color: var(--ws-ink-3); line-height: 1; } .ws-rule--rail { width: 3px; height: 56px; background: var(--ws-line-strong); margin-block: var(--ws-space-3); transform-origin: top center; } @media (prefers-reduced-motion: no-preference) { /* M-08 RAIL（9-1）: 縦罫が伸びる。scroll-timelineの追加実装コストを避け、既存の IntersectionObserver（.ws-reveal系）で1回だけ scaleY(0)→1 に伸ばす簡易版で実装した （実装順4章の範囲外である本格的なscroll連動版は今回見送り。報告に明記）。 */ .ws-rule--rail.ws-reveal { transform: scaleY(0); transition-property: transform; } .ws-rule--rail.ws-reveal.is-in { transform: scaleY(1); } } .ws-section { padding-block: var(--ws-section-gap); /* 既定のセクション担当色（.ws-section--* で上書き） */ --ws-section: var(--ws-blue-600); --ws-section-vivid: var(--ws-blue-500); --ws-section-tint: var(--ws-blue-050); } .ws-section--lg-gap { padding-block: var(--ws-section-gap-lg); } .ws-section--magenta { --ws-section: var(--ws-magenta-600); --ws-section-vivid: var(--ws-magenta-500); --ws-section-tint: var(--ws-magenta-050); } .ws-section--cyan { --ws-section: var(--ws-cyan-600); --ws-section-vivid: var(--ws-cyan-500); --ws-section-tint: var(--ws-cyan-050); } .ws-section--blue { --ws-section: var(--ws-blue-600); --ws-section-vivid: var(--ws-blue-500); --ws-section-tint: var(--ws-blue-050); } .ws-section--orange { --ws-section: var(--ws-orange-600); --ws-section-vivid: var(--ws-orange-500); --ws-section-tint: var(--ws-orange-050); } .ws-section--purple { --ws-section: var(--ws-purple-600); --ws-section-vivid: var(--ws-purple-500); --ws-section-tint: var(--ws-purple-050); } .ws-section--neutral { --ws-section: var(--ws-ink-3); --ws-section-vivid: var(--ws-line); --ws-section-tint: var(--ws-bg-subtle); } .ws-section--bg-subtle { background: var(--ws-bg-subtle); } .ws-section--bg-tint { background: var(--ws-section-tint); } .ws-section--bg-ink { background: var(--ws-bg-ink); color: var(--ws-bg); } .ws-block-gap > * + * { margin-top: var(--ws-block-gap); } .ws-item-gap > * + * { margin-top: var(--ws-item-gap); } /* 段落どうしの間だけは、ブロック間（見出し・表・図との間）より詰める。 2026-08-05 籠谷さんの指摘「文字の行間がばらばらで少し読みづらい」。 本文の行送りは約31pxだが、続けて読む段落の間まで --ws-block-gap（PC 48px）空いていたため、 1〜2行の短い段落が続く箇所で「行間が詰まった帯」と「大きく空いた帯」が交互に現れ、 ひと続きの文章に見えなくなっていた。段落間は行送りの1本分程度に留める。 */ .ws-block-gap > p + p { margin-top: var(--ws-space-5); } /* ドット（方針2の中核。画像0KB。5-3） */ .ws-dots { background-image: radial-gradient(circle at center, color-mix(in srgb, var(--ws-section-vivid) calc(var(--ws-dot-opacity) * 100%), transparent) var(--ws-dot-size), transparent calc(var(--ws-dot-size) + 1%)); background-size: var(--ws-dot-grid) var(--ws-dot-grid); } .ws-dots--text-safe { --ws-dot-opacity: 0.15; } /* --------------------------------------------------------------------------- 3. タイポグラフィ ------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--ws-font-text); line-height: var(--ws-lh-heading); letter-spacing: var(--ws-ls-heading); color: var(--ws-text); margin: 0; } .ws-h1, h1.ws-page-title { font-size: var(--ws-fs-h1); font-weight: 700; } .ws-h2 { font-size: var(--ws-fs-h2); font-weight: 700; } .ws-h3 { font-size: var(--ws-fs-h3); font-weight: 700; } .ws-display { font-family: var(--ws-font-display); font-weight: 700; line-height: var(--ws-lh-display); letter-spacing: var(--ws-ls-display); color: var(--ws-ink); } .ws-lead { font-size: var(--ws-fs-lead); line-height: var(--ws-lh-body); color: var(--ws-text); } .ws-note { font-size: var(--ws-fs-note); line-height: var(--ws-lh-body); /* 注記も読ませる文章。囲みの幅なりに流すと1行47字になっていた（2026-08-05 実測）。 */ max-width: var(--ws-measure-read); color: var(--ws-ink); background: var(--ws-bg-subtle); border-left: 4px solid var(--ws-warning); padding: var(--ws-space-4); /* 左辺だけに罫を引いた要素を全周 border-radius: 8px で丸めると、上下の角で罫が 角丸に沿って内側へ回り込み、両端が尖って「線が斜めに傾いている」ように見える （2026-08-05 籠谷さんの指摘）。罫を引く左側は角を落とさず、右側だけ丸める。 */ border-radius: 0 8px 8px 0; } .ws-overline-script { display: block; font-family: var(--ws-font-script); letter-spacing: var(--ws-ls-script); font-size: var(--ws-fs-h3); color: var(--ws-section); margin-bottom: var(--ws-space-2); } .ws-rule { width: 48px; height: 4px; background: var(--ws-section); border-radius: 2px; margin-bottom: var(--ws-space-3); } p { margin: 0 0 var(--ws-space-4); } p:last-child { margin-bottom: 0; } a.ws-link { color: var(--ws-section); text-decoration: underline; text-underline-offset: 0.2em; } a.ws-link:hover { color: color-mix(in srgb, var(--ws-section) 80%, black); text-decoration-thickness: 2px; } /* --------------------------------------------------------------------------- 4. ヘッダー・ナビゲーション ------------------------------------------------------------------------- */ .ws-header { position: sticky; top: 0; z-index: 50; background: var(--ws-bg); border-bottom: 1px solid var(--ws-line); } .ws-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ws-space-4); padding-block: var(--ws-space-3); } .ws-logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; } .ws-logo__main { font-family: var(--ws-font-display); font-weight: 700; font-size: 1.25rem; color: var(--ws-ink); } .ws-logo__sub { font-family: var(--ws-font-script); font-size: 0.6875rem; color: var(--ws-ink-3); letter-spacing: var(--ws-ls-script); } .ws-header__actions { display: flex; align-items: center; gap: var(--ws-space-3); } /* ハンバーガー: によるCSSのみの開閉（JS不要・受入C-17） */ .ws-nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; } .ws-nav-toggle-label { display: inline-flex; align-items: center; justify-content: center; width: var(--ws-tapmin); height: var(--ws-tapmin); cursor: pointer; border-radius: var(--ws-radius-input); } .ws-nav-toggle-label:focus-visible { outline: 3px solid var(--ws-focus); outline-offset: 2px; } .ws-nav-toggle-icon, .ws-nav-toggle-icon::before, .ws-nav-toggle-icon::after { display: block; width: 22px; height: 2px; background: var(--ws-ink); border-radius: 2px; position: relative; transition: background var(--ws-t-4th) var(--ws-ease); } .ws-nav-toggle-icon::before { content: ""; position: absolute; top: -7px; } .ws-nav-toggle-icon::after { content: ""; position: absolute; top: 7px; } @media (max-width: 1023px) { .ws-nav { position: fixed; inset: 0; top: 0; background: var(--ws-bg); padding: var(--ws-space-9) var(--ws-gutter) var(--ws-space-9); overflow-y: auto; transform: translateX(100%); transition: transform var(--ws-t-2nd) var(--ws-ease); z-index: 60; } .ws-nav-toggle-input:checked ~ .ws-nav { transform: translateX(0); } .ws-nav__close { display: flex; justify-content: flex-end; margin-bottom: var(--ws-space-6); } /* ⚠️ リストの初期化（点を消す・字下げを消す）とリンクの下線消しは、もともと `@media (min-width: 1024px)` の中にしか書かれておらず、**SPでは効いていなかった**。 そのためスマホのメニューだけブラウザ既定のままで、箇条書きの点（・と○）と下線が出ていた （2026-08-05 大﨑さん指摘）。ここで同じ初期化をSPにも掛ける。 */ .ws-nav ul { list-style: none; margin: 0; padding: 0; flex-direction: column; align-items: stretch; gap: 0; } .ws-nav a { text-decoration: none; color: var(--ws-ink); } .ws-nav li { border-bottom: 1px solid var(--ws-line); } .ws-nav a, .ws-nav .ws-nav__group-label { display: flex; align-items: center; min-height: var(--ws-tapmin); padding: var(--ws-space-3) 0; font-size: var(--ws-fs-lead); } .ws-nav .ws-nav__children { padding-left: var(--ws-space-4); } .ws-nav .ws-nav__children a { min-height: 40px; font-size: var(--ws-fs-body); color: var(--ws-ink-2); } /* ENTRYはメニューの一項目ではなく行動を促すボタン。他の項目と同じ区切り線の中に 詰めると押しにくく、見た目も窮屈になる（2026-08-05 大﨑さん指摘）。 区切り線を外して上下に余白を取り、ボタンとして独立させる。 */ .ws-nav__cta-item { border-bottom: 0 !important; margin-block: var(--ws-space-6); } .ws-nav__cta-item .ws-nav__cta { justify-content: center; width: 100%; min-height: var(--ws-btn-h-lg); color: var(--ws-bg); font-size: var(--ws-fs-body); } } @media (min-width: 1024px) { .ws-nav-toggle-label, .ws-nav__close { display: none; } .ws-nav ul { display: flex; align-items: center; gap: var(--ws-space-5); list-style: none; margin: 0; padding: 0; } .ws-nav a { text-decoration: none; color: var(--ws-ink); font-weight: 700; font-size: 0.9375rem; } .ws-nav a:hover { color: var(--ws-primary); } .ws-nav__group { position: relative; } .ws-nav__group-label { cursor: default; color: var(--ws-ink); font-weight: 700; font-size: 0.9375rem; } /* `ul` セレクタを含めているのは詳細度のため（2026-07-29 COO修正）。 直前の `.ws-nav ul { display: flex }` は詳細度 0,1,1 で、 `.ws-nav__children`（0,1,0）より強い。記述順では勝てないので 隠す側にも `ul` を含めて 0,2,1 にしないと display:none が効かず、 ドロップダウンが常時開いたまま本文に重なる。 */ .ws-nav ul.ws-nav__children { display: none; position: absolute; top: 100%; left: 0; background: var(--ws-bg); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-input); padding: var(--ws-space-2); min-width: 220px; box-shadow: none; } .ws-nav__group:hover ul.ws-nav__children, .ws-nav__group:focus-within ul.ws-nav__children { display: block; } /* 「情報社会で、踊れ。」を途中で折り返させない（2026-07-29 COO） */ .ws-nav__children a { display: block; padding: var(--ws-space-2) var(--ws-space-3); font-weight: 400; white-space: nowrap; } } .ws-nav__cta { flex-shrink: 0; } /* --------------------------------------------------------------------------- 5. ボタン（4-1） ------------------------------------------------------------------------- */ .ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ws-space-2); border-radius: var(--ws-radius-pill); font-family: var(--ws-font-text); font-weight: 700; font-size: var(--ws-fs-ui); line-height: var(--ws-lh-ui); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background var(--ws-t-4th) var(--ws-ease), color var(--ws-t-4th) var(--ws-ease), transform var(--ws-t-4th) var(--ws-ease); width: 100%; max-width: 400px; } @media (min-width: 600px) { .ws-btn { width: auto; min-width: var(--ws-btn-min-w); } } .ws-btn--lg { min-height: var(--ws-btn-h-lg); padding-inline: 32px; font-size: 1.0625rem; } .ws-btn--md { min-height: var(--ws-btn-h-md); padding-inline: 28px; } .ws-btn--sm { min-height: var(--ws-btn-h-sm); padding-inline: 20px; font-size: 0.9375rem; width: auto; min-width: 0; } .ws-btn--primary { background: var(--ws-primary); color: #fff; } @media (hover: hover) and (pointer: fine) { .ws-btn--primary:hover { background: var(--ws-primary-hover); } } .ws-btn--primary:active { background: var(--ws-primary-hover); transform: translateY(1px); } .ws-btn--secondary { background: var(--ws-bg); color: var(--ws-section); border-color: var(--ws-section); } @media (hover: hover) and (pointer: fine) { .ws-btn--secondary:hover { background: var(--ws-section); color: #fff; } } /* 黒面上のプライマリボタン（visual_spec.md 附録・デザインシステムに定義が無いため本書で追加）。 黒地に --ws-magenta-600 を置くとコントラストが足りないため、白地反転で組む。 */ .ws-btn--primary-invert { background: var(--ws-bg); color: var(--ws-ink); } @media (hover: hover) and (pointer: fine) { .ws-btn--primary-invert:hover { background: var(--ws-magenta-050); } } /* 黒面上のセカンダリボタン（lower_pages_uiux.md N-b）。黒面に2つ以上のボタンが載るページ （/about/ の nextGuide 3リンク・/interview// の2リンク）があるため、 --primary-invert と対になる「線だけ」の反転ボタンを用意する。白 on #1A1A1A ＝ 15.9:1。 */ .ws-btn--secondary-invert { background: transparent; color: var(--ws-bg); border-color: var(--ws-bg); } @media (hover: hover) and (pointer: fine) { .ws-btn--secondary-invert:hover { background: color-mix(in srgb, var(--ws-bg) 12%, transparent); } } .ws-btn--secondary-invert:active { background: color-mix(in srgb, var(--ws-bg) 20%, transparent); } .ws-btn--text { background: none; border: none; color: var(--ws-section); text-decoration: underline; text-underline-offset: 0.2em; min-height: var(--ws-tapmin); width: auto; min-width: 0; padding-inline: var(--ws-space-2); } .ws-btn--text::after { content: "›"; margin-left: var(--ws-space-1); } .ws-btn-row { display: flex; flex-wrap: wrap; gap: var(--ws-space-3); } /* --------------------------------------------------------------------------- 6. カード（4-2） ------------------------------------------------------------------------- */ .ws-cardgrid { display: grid; gap: var(--ws-item-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .ws-card { position: relative; display: block; border-radius: var(--ws-radius-card); border: 1px solid var(--ws-line); padding: var(--ws-space-5); padding-left: calc(var(--ws-space-5) + 6px); text-decoration: none; color: var(--ws-text); background: var(--ws-bg); --ws-card-bar: var(--ws-section); overflow: hidden; transition: background var(--ws-t-4th) var(--ws-ease); } @media (min-width: 1024px) { .ws-card { padding: var(--ws-space-6); padding-left: calc(var(--ws-space-6) + 6px); } } /* モーション修正（motion_spec.md 7-1⑦・禁止7）: border-left-width の直接アニメはレイアウト 再計算を伴いM4違反。左バーは疑似要素にして transform: scaleX() で「太くする」体を作る。 */ .ws-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ws-card-bar); transform: scaleX(1); transform-origin: left center; transition: transform var(--ws-t-4th) var(--ws-ease); } .ws-card:hover::before, .ws-card:focus-within::before { transform: scaleX(1.6667); } /* 見た目上 6px→10px */ .ws-card:hover, .ws-card:focus-within { background: var(--ws-section-tint); } .ws-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .ws-card--neutral { --ws-card-bar: var(--ws-line-strong); background: var(--ws-bg-subtle); } .ws-card--neutral:hover, .ws-card--neutral:focus-within { background: var(--ws-line); } .ws-card__title { font-size: var(--ws-fs-h3); font-weight: 700; line-height: var(--ws-lh-heading); margin-bottom: var(--ws-space-2); } /* カードの説明文は、カードが広いときだけ読ませる文章になる（幅の広いカードで1行45字だった）。 カードが狭いときは max-width が効かず、これまでどおり枠に流し込まれる。 */ .ws-card__desc { color: var(--ws-ink-2); font-size: var(--ws-fs-body); max-width: var(--ws-measure-read); } .ws-card__arrow { position: absolute; right: var(--ws-space-4); bottom: var(--ws-space-4); width: 32px; height: 32px; border-radius: 999px; background: var(--ws-section-tint); color: var(--ws-section); display: flex; align-items: center; justify-content: center; font-weight: 700; } /* インタビューカード（6色ローテーション・4-2-3。写真の実装はmotion_spec.md 6章） */ .ws-people-card { position: relative; border-radius: var(--ws-radius-card); overflow: hidden; text-decoration: none; color: var(--ws-ink); display: block; border: 1px solid var(--ws-line); } /* 枠（aspect-ratio・object-fit）は .ws-figure--person が持つ（lower_pages_design.md 1-2・1-4）。 6色の色面は下辺4pxの罫に置き換えた（下記 .ws-people-card::after）。 */ .ws-people-card__photo { position: relative; overflow: hidden; } .ws-people-card__img { position: absolute; inset: 0; width: 100%; height: 100%; } .ws-people-card__img--back { opacity: 0; } /* 担当色はカード下辺の4px罫だけに出す（面積を絞ったときだけ色は効く・2-4） */ .ws-people-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ws-people-accent, var(--ws-line-strong)); } .ws-people-card__body { background: var(--ws-bg); padding: var(--ws-space-5); } .ws-people-card__title { font-size: var(--ws-fs-h3); font-weight: 700; line-height: var(--ws-lh-heading); margin-bottom: var(--ws-space-2); } .ws-people-card__meta { font-size: var(--ws-fs-note); color: var(--ws-ink-2); } .ws-people-card:hover .ws-people-card__body, .ws-people-card:focus-within .ws-people-card__body { background: var(--ws-bg-subtle); } /* SPの初回クロスフェード（motion_spec.md 6-4）: 入場と同時にbackが一瞬見えてfrontに切り替わる。 .is-in が付くまではbackを見せ、付いた瞬間にopacity:0へ落とす。1回だけ。 */ @media (prefers-reduced-motion: no-preference) { .ws-people-card__img--back { opacity: 1; transition: opacity var(--ws-t-1) var(--ws-ease); transition-delay: calc(var(--ws-i, 0) * var(--ws-stagger)); } .ws-people-card.is-in .ws-people-card__img--back { opacity: 0; } .ws-people-card { transition: transform var(--ws-t-2nd) var(--ws-ease); } } /* ポインタ機（hoverできる端末）: 写真の入れ替え＋カードが浮く（motion_spec.md 6-4）。 */ @media (hover: hover) and (pointer: fine) { .ws-people-card:hover, .ws-people-card:focus-within { transform: translateY(var(--ws-lift)); } .ws-people-card:hover .ws-people-card__img--back, .ws-people-card:focus-within .ws-people-card__img--back { opacity: 1; } } .ws-people-card--magenta { --ws-people-accent: var(--ws-magenta-500); } .ws-people-card--cyan { --ws-people-accent: var(--ws-cyan-500); } .ws-people-card--orange { --ws-people-accent: var(--ws-orange-500); } .ws-people-card--blue { --ws-people-accent: var(--ws-blue-500); } .ws-people-card--purple { --ws-people-accent: var(--ws-purple-500); } .ws-people-card--magenta-deep { --ws-people-accent: var(--ws-magenta-700); } /* PC3列×2段（TOP③FORMATIONの6人と同じ隊列で着地する・I-1）。 .ws-cardgrid の auto-fit だと1120px幅で4列になるため、列数だけ固定する。 */ @media (min-width: 1024px) { .ws-cardgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --------------------------------------------------------------------------- 7. タグ・注記・データ数値 ------------------------------------------------------------------------- */ .ws-tag { display: inline-flex; align-items: center; border-radius: 999px; font-size: var(--ws-fs-note); padding: 2px var(--ws-space-3); background: var(--ws-section-tint); color: var(--ws-section); } .ws-tag--required { color: var(--ws-error); background: #fff; border: 1px solid var(--ws-error); } .ws-tag--optional { color: var(--ws-ink-3); background: #fff; border: 1px solid var(--ws-line); } .ws-stat { padding: var(--ws-space-5); border-radius: var(--ws-radius-card); background: var(--ws-section-tint); } /* バグ修正: 「3000社以上」が「3000社以」「上」に改行される事故対策（motion_spec.md 5-2で必須化 されている tabular-nums と合わせて対応）。値は短い語のため折り返さない。 */ .ws-stat__value { font-family: var(--ws-font-display); font-size: var(--ws-fs-h1); color: var(--ws-section); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; } /* 値の字送りに「カードの内容幅」由来の上限を持たせる（2026-07-31 dev-web-design・不具合A後半）。 grid側を minmax(0,1fr) にしただけでは、nowrap の値がカードの外へ視覚的にあふれる （トラックが縮んでも文字は縮まないため）。字送り側にも上限を入れて初めて収まる。 基準にした実測値（COO 2026-07-31）: 375px幅（実効360px）の / で col1 = 203.391px。 ここから .ws-stat の padding 24px×2 を引くと 155.391px。同幅の --ws-fs-h1 は 1.1rem + 3.2vw = 17.6 + 12 = 29.6px なので、最長の値「3000社以上」の幅は 155.391 ÷ 29.6 ＝ 5.25em。つまり「内容幅 ÷ 5.25」以下なら必ず収まる。 18cqw ＝ 内容幅 ÷ 5.56 なので 5.7% の安全余裕を持って収まる（フォント差分の保険）。 各幅での結果（TOP＝.ws-w-wide の場合。内容幅 → 適用される字送り／必要幅）: SP 375px 1列 232px → 29.6px（--ws-fs-h1側が小さいので従来どおり）／155px 600px 2列 180px → 32.4px ／170px 1024px 4列 150px → 27.0px ／142px 1440px 4列 230px → 41.4px ／217px 1920px 4列 314px → 56.0px（＝--ws-fs-h1の上限。従来と1pxも変わらない）／294px /about/ は器が .ws-w-main（1280px上限）なので1920pxでも内容幅214px→38.5px。 カード幅が違えば数字の大きさも変わるが、同一グリッド内では常に全カード同寸になる。 ⚠️ container-type を付けると .ws-stat 自身のmin-content寄与も0になるため、 grid側の minmax(0,1fr) と二重の保険になっている。 ⚠️ @supports で囲うのは、cqw非対応環境で min() が計算時無効になり font-size が 継承値（＝本文サイズ）まで落ちる事故を防ぐため。非対応環境では従来の --ws-fs-h1 がそのまま効く（＝従来の見た目に戻るだけ）。 */ @supports (font-size: 1cqw) { .ws-stat { container-type: inline-size; } .ws-stat__value { font-size: min(var(--ws-fs-h1), 18cqw); } } .ws-stat__label { font-size: var(--ws-fs-body); font-weight: 700; margin-top: var(--ws-space-2); } .ws-stat__asof { font-size: var(--ws-fs-note); color: var(--ws-ink-3); margin-top: var(--ws-space-1); } .ws-stat__text { margin-top: var(--ws-space-3); } .ws-pending { color: var(--ws-ink-3); border: 1px dashed var(--ws-line-strong); border-radius: var(--ws-radius-input); padding: var(--ws-space-3) var(--ws-space-4); font-size: var(--ws-fs-note); } /* --------------------------------------------------------------------------- 8. 定義リスト（募集要項・4-6） ------------------------------------------------------------------------- */ .ws-dl { display: grid; gap: var(--ws-space-6); } .ws-dl__row { border-top: 1px solid var(--ws-line); padding-top: var(--ws-space-5); } .ws-dl__row:first-child { border-top: none; padding-top: 0; } /* ⑤CONDITIONS（visual_spec.md 7-4）: PCは2列×2行の定義リストで一望させる。 */ @media (min-width: 1024px) { .ws-dl--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ws-space-8); } .ws-dl--2col .ws-dl__row:nth-child(2) { border-top: none; padding-top: 0; } } /* ④NUMBERS（7-4）: PCは4列×1行の固定グリッド（4項目しかなく折り返す必要が無いため）。 SPは1列（2026-07-31 dev-web-design改定。旧: 8-2の「2列×2行」）。 ■ なぜ `1fr` ではなく `minmax(0, 1fr)` なのか（不具合A・COO実測 2026-07-31） CSSの `1fr` は `minmax(auto, 1fr)` と等価で、トラックの最小幅は中身のmin-content幅になる。 `.ws-stat__value` は `white-space: nowrap`（「3000社以」「上」と割れる事故対策）で、 オドメーター（.ws-odo の数字リール）も構造上折り返せない。この「折り返せない中身」が トラックの最小幅を押し上げ、375px幅（実効360px）で / → 列 203.391px + 141.188px = 344.6px（グリッド幅280pxに対し右へ41pxはみ出し） /about/ → 列 238.391px + 191.516px = 429.9px（同・右へ126pxはみ出し） になっていた（main{overflow-x:clip} が隠していただけで、2列目は画面外にあった）。 `minmax(0, 1fr)` で最小幅を auto→0 にすると、グリッドは必ず親幅の中で等分される。 ※ 中身がトラックに収まっている限り `1fr` と計算結果は同一なので、収まっている PC幅のレイアウトはこの変更では1pxも動かない。 ■ なぜSPは1列なのか 実効360px＝グリッド幅280px。2列だとカード1枚の内容幅は (280 - 16gap)/2 - 24padding*2 = 84px しかない。最長の値「3000社以上」は --ws-fs-h1（375px幅で29.6px）で155px必要＝物理的に入らない。 値を84pxに収めるには16pxまで字送りを落とすことになり、NUMBERSの主役である数字が 本文と同じ大きさになって意味を失う。1列なら内容幅232pxで、数字は29.6pxのまま置ける。 （/about/ はカードに説明文 .ws-stat__text も入るため、2列＝1行5文字では読めない。 1列化により「5枚目が余る」問題も同時に消える。） */ .ws-numbers-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ws-item-gap); } @media (min-width: 600px) { .ws-numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .ws-numbers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ws-dl__dt { font-weight: 700; font-size: var(--ws-fs-h3); margin-bottom: var(--ws-space-2); color: var(--ws-section); } /* 募集要項の各欄は「読ませる文章」。欄の幅いっぱいに流すと1行47〜48字になり、 行を追うときに次の行頭を見失いやすい（2026-08-05 実測。籠谷さんの指摘を受けた調査）。 40字で頭打ちにする。欄そのものの幅は変えないので、表としての揃いは崩れない。 */ .ws-dl__dd { margin: 0; max-width: var(--ws-measure-read); } .ws-dl__dd ul { margin: 0; padding-left: 1.2em; } .ws-dl__dd li { margin-bottom: var(--ws-space-2); } /* --------------------------------------------------------------------------- 9. 単価表カード（/information/・D-6） ------------------------------------------------------------------------- */ .ws-rate-card { border: 1px solid var(--ws-line); border-radius: var(--ws-radius-card); padding: var(--ws-space-5); background: var(--ws-bg); } .ws-rate-card + .ws-rate-card { margin-top: var(--ws-space-4); } /* 単価カードをグリッドに入れたときの縦マージンを打ち消す（隣接兄弟の margin-top が グリッドのgapと二重に効くため。lower_pages_design.md 1-6）。カード自体の定義は変更しない。 */ .ws-cardgrid > .ws-rate-card + .ws-rate-card { margin-top: 0; } .ws-rate-card__name { font-weight: 700; font-size: var(--ws-fs-h3); } .ws-rate-card__note { color: var(--ws-ink-2); font-size: var(--ws-fs-note); margin-bottom: var(--ws-space-3); } /* 左（等級名）は縮んでよい／右（金額）は縮めない。左を minmax(0,1fr) にしないと、 等級名の長い文節がトラックを押し広げてカードからはみ出す（不具合Cと同型・先回り対応）。 */ .ws-rate-card dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ws-space-2) var(--ws-space-4); margin: 0; } .ws-rate-card dt { color: var(--ws-ink-2); } .ws-rate-card dd { margin: 0; font-weight: 700; text-align: right; } .ws-rate-card .ws-rate-card__average { border-top: 1px solid var(--ws-line); margin-top: var(--ws-space-3); padding-top: var(--ws-space-3); } details.ws-rate-more > summary { cursor: pointer; font-weight: 700; color: var(--ws-section); padding: var(--ws-space-3) 0; min-height: var(--ws-tapmin); display: flex; align-items: center; } details.ws-rate-more[open] > summary { margin-bottom: var(--ws-space-3); } /* --------------------------------------------------------------------------- 10. Q&A（/question/・D-5） ------------------------------------------------------------------------- */ details.ws-qa { border: 1px solid var(--ws-line); border-radius: var(--ws-radius-card); padding: var(--ws-space-4) var(--ws-space-5); } details.ws-qa + details.ws-qa { margin-top: var(--ws-space-3); } details.ws-qa > summary { cursor: pointer; list-style: none; font-weight: 700; font-size: var(--ws-fs-lead); min-height: var(--ws-tapmin); display: flex; align-items: center; gap: var(--ws-space-2); padding-block: var(--ws-space-2); } details.ws-qa > summary::-webkit-details-marker { display: none; } details.ws-qa > summary::before { content: "Q"; color: var(--ws-section); font-family: var(--ws-font-display); } details.ws-qa[open] > summary { margin-bottom: var(--ws-space-3); border-bottom: 1px solid var(--ws-line); padding-bottom: var(--ws-space-3); } .ws-qa__answer { display: flex; gap: var(--ws-space-4); align-items: flex-start; } /* 不具合C（2026-07-31 dev-web-design。COO実測: SPで回答ブロックが右へ8〜9pxはみ出し）。 原因はA・Bと同種で「flexアイテムの min-width: auto」。回答本文側のdivは既定で min-width:auto ＝ min-content幅（auto-phraseで1塊と見なされた長い文節）を下回れないため、 アイコン64px + gap16px と合わせて .ws-qa の内容幅（375px幅で230px）を超えていた。 min-width:0 にすると本文divは与えられた幅まで縮み、文節は通常の改行で折り返す。 .ws-qa__answerer は flex-shrink:0 ＋ width:64px 固定なので、この指定では縮まない。 */ .ws-qa__answer > * { min-width: 0; } @media (max-width: 599px) { /* ただし縮めるだけだと本文の幅が 230 - 64 - 16 ＝ 150px（＝1行9文字）になり、 Q&Aとして読めない。SPだけ縦積みにして本文に全幅（230px＝約14文字/行）を渡す。 アイコン→肩書氏名→本文の順は変わらないため、意味の並びは崩れない。 */ /* align-items は stretch に戻す。縦積みでは flex-start＝「幅は中身なり」になり、 本文ブロックの幅が文章量で変わってしまうため。アイコンは width:64px 指定があるので stretch でも伸びない。 */ .ws-qa__answer { flex-direction: column; align-items: stretch; gap: var(--ws-space-3); } } .ws-qa__answerer { flex-shrink: 0; width: 64px; height: 64px; border-radius: 999px; background: var(--ws-section-tint); color: var(--ws-section); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--ws-fs-note); text-align: center; overflow: hidden; } .ws-qa__answerer img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .ws-qa__meta { font-size: var(--ws-fs-note); color: var(--ws-ink-2); margin-bottom: var(--ws-space-2); } /* --------------------------------------------------------------------------- 11. フッター ------------------------------------------------------------------------- */ .ws-footer { background: var(--ws-bg-ink); color: var(--ws-bg); } .ws-footer a { color: var(--ws-bg); text-decoration: none; } .ws-footer a:hover { text-decoration: underline; } .ws-footer__inner { padding-block: var(--ws-space-11); display: grid; gap: var(--ws-space-8); } @media (min-width: 1024px) { .ws-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ws-footer__heading { font-size: var(--ws-fs-note); color: color-mix(in srgb, var(--ws-bg) 60%, transparent); margin-bottom: var(--ws-space-3); } .ws-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ws-space-2); } .ws-footer__office + .ws-footer__office { margin-top: var(--ws-space-4); } .ws-footer__office-name { font-weight: 700; } .ws-footer__media { display: flex; flex-wrap: wrap; gap: var(--ws-space-3); margin-top: var(--ws-space-4); } .ws-footer__media a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--ws-space-3); border: 1px solid color-mix(in srgb, var(--ws-bg) 30%, transparent); border-radius: 999px; font-size: var(--ws-fs-note); } .ws-footer__media img { height: 20px; filter: grayscale(1) invert(1) opacity(0.85); } .ws-footer__bottom { border-top: 1px solid color-mix(in srgb, var(--ws-bg) 20%, transparent); padding-block: var(--ws-space-4); text-align: center; font-size: var(--ws-fs-note); color: color-mix(in srgb, var(--ws-bg) 70%, transparent); } /* --------------------------------------------------------------------------- 12. SP固定CTAバー（受入B-7） ------------------------------------------------------------------------- */ .ws-fixed-cta { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--ws-fixedbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--ws-bg); border-top: 1px solid var(--ws-line); display: flex; align-items: center; padding-inline: var(--ws-gutter); z-index: 40; } .ws-fixed-cta .ws-btn { width: 100%; max-width: none; } @media (min-width: 1024px) { .ws-fixed-cta { display: none; } } /* --------------------------------------------------------------------------- 13. 巨大タイポ（決定B・cqw方式・2-5） ------------------------------------------------------------------------- */ .ws-display-wrap { container-type: inline-size; padding-inline: var(--ws-gutter); } .ws-display-full { --ws-chars: 7; font-family: var(--ws-font-display); font-weight: 700; font-size: calc(100cqw / var(--ws-chars)); line-height: var(--ws-lh-display); letter-spacing: 0; color: var(--ws-ink); margin: 0; } @supports not (container-type: inline-size) { .ws-display-full { font-size: clamp(2.5rem, 1rem + 7.5vw, 6.5rem); } } @media (min-width: 1024px) { .ws-display-full { --ws-chars: 10.4; } .ws-display-full .ws-display-full__break { display: none; } } /* --------------------------------------------------------------------------- 14. モーション — 出典: motion_spec.md（設計の正本） ここから先の規律（守らないと差し戻し対象）: ・モーション用の初期状態（opacity:0 / transform / clip-path）は必ず `@media (prefers-reduced-motion: no-preference)` の内側に書く（9-1）。 ここを外に書くと reduce 環境で要素が永久に消える。 ・transform と opacity 以外をアニメーションさせない（M4）。 ------------------------------------------------------------------------- */ /* --- 14-1. .ws-reveal — スクロール連動の入場（3-1・全ページの土台） ------- */ @media (prefers-reduced-motion: no-preference) { .ws-reveal { opacity: 0; transform: translateY(var(--ws-move-enter)); transition: opacity var(--ws-t-1) var(--ws-ease-dance), transform var(--ws-t-1) var(--ws-ease-dance); transition-delay: calc(var(--ws-i, 0) * var(--ws-stagger)); will-change: opacity, transform; } .ws-reveal.is-in { opacity: 1; transform: none; } .ws-reveal.is-done { will-change: auto; } .ws-reveal--left { transform: translateX(calc(var(--ws-move-enter) * -1)); } .ws-reveal--scale { transform: scale(.94); } .ws-reveal--bar { transform: scaleX(0); transform-origin: left center; } /* 数字「設立」用（跳ね上がりのみ・カウントアップしない。motion_spec.md 5-1） */ .ws-reveal--beat { transform: translateY(20px); transition-timing-function: var(--ws-ease-beat); } /* ⑨フィナーレのタイポ用（下からせり上がる。motion_spec.md 4-9） */ .ws-reveal--riseup { transform: translateY(var(--ws-move-enter)); clip-path: inset(100% 0 0 0); transition: opacity var(--ws-t-1h) var(--ws-ease-dance), transform var(--ws-t-1h) var(--ws-ease-dance), clip-path var(--ws-t-1h) var(--ws-ease-dance); transition-delay: calc(var(--ws-i, 0) * var(--ws-stagger-loose)); } .ws-reveal--riseup.is-in { clip-path: inset(0 0 0 0); } } .ws-rule.ws-reveal--bar { width: 48px; } /* scaleX(0)の基準幅を明示 */ /* --- 14-2. ルール（.ws-rule）が伸びる装飾罫 ------------------------------- */ @media (prefers-reduced-motion: no-preference) { .ws-rule.ws-reveal { transition-property: transform; } /* 帯自体は不透明のまま伸びるだけでよい */ .ws-rule.ws-reveal { opacity: 1; } } /* --- 14-3. 数字のカウントアップ（5章） ------------------------------------ */ .ws-stat__value[data-ws-count] { font-variant-numeric: tabular-nums; } /* .ws-stat__value 自体にも .ws-reveal を付ける（IntersectionObserverでカウント開始を検知するため）が、 親の .ws-stat が既に同じフェード＋移動をしているため、値の側は二重に動かさず「見た目は最初から 静止」にしておく（カウントアップという動き自体が既に十分な演出のため）。 */ @media (prefers-reduced-motion: no-preference) { .ws-stat__value.ws-reveal { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------------------------- 14-4. ①STAGE（KV。visual_spec.md 5章・9-2〜9-3。2026-07-29全面書き換え） 旧KV（水彩背景・ダンサーイラスト4体・tit07.svg）は廃止（V-8・6-5・10-1）。 「踊らされるな、」はライブテキスト（K-2 COO承認）。写真を敷かないため見切れが構造的に起きない。 ------------------------------------------------------------------------- */ .ws-stage { position: relative; overflow: hidden; min-height: min(100svh, 1080px); } .ws-stage__grid { min-height: inherit; display: flex; flex-direction: column; justify-content: center; padding-block: var(--ws-space-9); } @media (max-width: 1023px) { .ws-stage { min-height: calc(100svh - var(--ws-fixedbar-h)); } .ws-stage__grid { align-items: center; text-align: center; } } @media (min-width: 1024px) { .ws-stage__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: 24px; row-gap: var(--ws-space-6); padding-block: var(--ws-space-11); } .ws-stage__typo { grid-column: 1 / 13; } .ws-stage__body { grid-column: 1 / 6; } .ws-stage__scroll { grid-column: 11 / 13; justify-self: end; } } .ws-stage__overline { color: var(--ws-magenta-600); margin: 0 0 var(--ws-space-4); } .ws-stage__h1 { margin: 0; } .ws-stage__swept { display: block; font-family: var(--ws-font-display); font-weight: 400; color: var(--ws-ink-3); font-size: clamp(1.75rem, 4.2vw, 5rem); letter-spacing: .08em; line-height: 1.3; } @media (max-width: 599px) { .ws-stage__swept { font-size: 7.5vw; } } .ws-stage__swept .ws-char { display: inline-block; transform: translateY(var(--ws-char-y, 0)) rotate(var(--ws-char-rot, 0deg)); } @media (max-width: 599px) { /* SPは傾きを±2degに抑える（8-3。狭い幅では同じ角度でも大きく見えるため） */ .ws-stage__swept .ws-char { transform: translateY(var(--ws-char-y, 0)) rotate(calc(var(--ws-char-rot, 0deg) * 0.66)); } } .ws-stage__standing { display: inline-block; font-family: var(--ws-font-display); font-weight: 400; color: var(--ws-ink); font-size: clamp(4.5rem, 30vw, 20rem); line-height: 1.0; letter-spacing: 0; margin-top: var(--ws-space-2); } @media (max-width: 599px) { .ws-stage__standing { font-size: 30vw; } } /* 「点」＝サイトのメトロノーム（2-3）。KVの句点とプログレスの先端の2箇所で共有する。 */ .ws-beat-dot { display: inline-block; width: .18em; height: .18em; margin-left: .12em; border-radius: 50%; background: var(--ws-magenta-500); vertical-align: baseline; } .ws-stage__lead { max-width: 32rem; margin: 0; } .ws-stage__cta { margin-top: var(--ws-space-5); } @media (min-width: 1024px) { .ws-stage__lead { max-width: none; } } .ws-stage__scroll { display: flex; flex-direction: column; align-items: center; gap: var(--ws-space-2); margin-top: var(--ws-space-8); color: var(--ws-magenta-600); font-size: var(--ws-fs-note); } @media (min-width: 1024px) { .ws-stage__scroll { margin-top: 0; } } .ws-stage__ruler { display: flex; flex-direction: column; gap: 4px; } .ws-stage__tick { width: 3px; height: 14px; border-radius: 2px; background: currentColor; opacity: .25; } /* ★M-01 OVERTURE / M-03 STANDING（開幕・総尺3拍=1440ms・9-2）。時間駆動＝@supportsの外。 */ @media (prefers-reduced-motion: no-preference) { /* 1拍目 0→480ms: 「踊らされるな、」7文字が着地（stagger 1/8拍=60ms） */ .ws-stage__swept .ws-char { opacity: 0; animation: ws-overture-in var(--ws-t-1) var(--ws-ease-dance) both; animation-delay: calc(var(--ws-i, 0) * var(--ws-t-8th)); } @keyframes ws-overture-in { from { opacity: 0; transform: translateY(var(--ws-char-y, 0)) translateX(.6em) rotate(var(--ws-char-rot, 0deg)); } to { opacity: 1; transform: translateY(var(--ws-char-y, 0)) translateX(0) rotate(var(--ws-char-rot, 0deg)); } } /* 2拍目 480→960ms: 「踊れ」が下から一体で起き上がる（clip-path） */ .ws-stage__standing { clip-path: inset(100% 0 0 0); transform: translateY(.12em); animation: ws-standing-in var(--ws-t-1) var(--ws-ease-beat) both; animation-delay: var(--ws-t-1); } @keyframes ws-standing-in { from { clip-path: inset(100% 0 0 0); transform: translateY(.12em); } to { clip-path: inset(0 0 0 0); transform: translateY(0); } } /* 3拍目 960→1440ms: 点がscale(0)→(1)。同時にリード・CTA・スクロール指標がfade up（stagger 120ms）。 1440ms〜: 点は--ws-t-4（4拍）周期で脈打ち続ける＝待機中の唯一の動き。 セレクタは `.ws-stage__standing .ws-beat-dot` に限定する（KVの句点だけに適用する）。 `.ws-progress__dot` も `.ws-beat-dot` を共有しているため、ここを裸の `.ws-beat-dot` にすると プログレスの点までopacity:0で止まってしまう（19-1で別のanimationに上書きされ、2度と1に 戻らない事故になる）。 */ .ws-stage__standing .ws-beat-dot { opacity: 0; animation: ws-dot-in var(--ws-t-1) var(--ws-ease-beat) both, ws-beat-pulse var(--ws-t-4) var(--ws-ease-loop) infinite; animation-delay: var(--ws-t-2), var(--ws-t-3); } @keyframes ws-dot-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @keyframes ws-beat-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .ws-stage__lead, .ws-stage__cta, .ws-stage__scroll { opacity: 0; animation: ws-kv-fade-up var(--ws-t-1) var(--ws-ease-dance) both; } .ws-stage__lead { animation-delay: var(--ws-t-2); } .ws-stage__cta { animation-delay: calc(var(--ws-t-2) + var(--ws-stagger)); } .ws-stage__scroll { animation-delay: calc(var(--ws-t-2) + var(--ws-stagger) * 2); } @keyframes ws-kv-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* スクロール指標: 8本のうち1本が拍ごとに点灯（1小節=8拍=--ws-t-8で1周） */ .ws-stage__tick { animation: ws-tick-pulse var(--ws-t-8) var(--ws-ease-loop) infinite; animation-delay: calc(var(--ws-i, 0) * var(--ws-t-1) * -1); } @keyframes ws-tick-pulse { 0%, 87.5%, 100% { opacity: .25; } 6.25% { opacity: 1; } } /* ★M-02 SWEPT（9-3。scroll連動。読んでいる最中は動かない＝exitレンジのみ）。@supportsの内側のみ。 */ @supports (animation-timeline: view()) { .ws-stage__swept .ws-char { animation-name: ws-overture-in, ws-swept; animation-duration: var(--ws-t-1), auto; animation-timing-function: var(--ws-ease-dance), linear; animation-fill-mode: both, both; animation-timeline: auto, view(); animation-range: normal, exit calc(0% + var(--ws-i, 0) * 4%) exit calc(60% + var(--ws-i, 0) * 4%); } @keyframes ws-swept { from { transform: translateY(var(--ws-char-y, 0)) translateX(0) rotate(var(--ws-char-rot, 0deg)); opacity: 1; } to { transform: translateY(var(--ws-char-y, 0)) translateX(-2.4em) rotate(-14deg); opacity: 0; } } } } /* --- 14-6. 「Shall we dance?」（4-10・文字が一つずつ立ち上がる。10-2でFORMATION1箇所のみ使用） -- */ .ws-script-beat { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .ws-script-beat__c { display: inline-block; opacity: 0; transform: translateY(.28em) rotate(-6deg); transition: opacity var(--ws-t-2nd) var(--ws-ease-dance), transform var(--ws-t-2nd) var(--ws-ease-beat); transition-delay: calc(var(--ws-i, 0) * var(--ws-stagger-tight)); } .is-in .ws-script-beat__c { opacity: 1; transform: none; } } /* --- 14-7. ドット背景の「流れ」（4-6。background-positionアニメの唯一の例外） ---- */ @media (prefers-reduced-motion: no-preference) { .ws-dots--drift { animation: ws-dot-drift var(--ws-t-12) linear infinite; } } @keyframes ws-dot-drift { from { background-position: 0 0; } to { background-position: var(--ws-dot-grid) var(--ws-dot-grid); } } /* --- 14-8. CTAの鼓動（4-8・⑥エントリーの1個だけ） ------------------------- */ @media (prefers-reduced-motion: no-preference) { .ws-entry-cta .ws-btn--primary { animation: ws-pulse var(--ws-t-6) var(--ws-ease-beat) infinite; } .ws-entry-cta .ws-btn--primary:hover, .ws-entry-cta .ws-btn--primary:focus-visible { animation-play-state: paused; } } @keyframes ws-pulse { 0%, 82%, 100% { transform: scale(1); } 88% { transform: scale(1.035); } } /* --- 14-9. ヘッダーのスクロール状態・SP固定CTAバー（7-3） ------------------ */ .ws-scroll-sentinel { position: absolute; top: 0; height: 1px; width: 1px; } .ws-header { transition: border-color var(--ws-t-4th) var(--ws-ease); } .ws-header__inner { transition: padding-block var(--ws-t-4th) var(--ws-ease); } .ws-header.is-scrolled .ws-header__inner { padding-block: var(--ws-space-2); } .ws-header.is-scrolled { border-bottom-color: var(--ws-line-strong); } @media (prefers-reduced-motion: no-preference) { .ws-fixed-cta { transform: translateY(100%); transition: transform var(--ws-t-1) var(--ws-ease-dance); } .ws-fixed-cta.is-visible { transform: translateY(0); } } /* --- 14-10. reduced motion（保険。9-1の打ち消し型フォールバック） --------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: var(--ws-t-kill) !important; animation-iteration-count: 1 !important; transition-duration: var(--ws-t-kill) !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- 15. その他ユーティリティ ------------------------------------------------------------------------- */ .ws-media-row { display: flex; flex-wrap: wrap; gap: var(--ws-space-3); } @media (max-width: 599px) { /* /entry/ の媒体リンク（.ws-tag）。ラベル「X（旧Twitter）」は括弧の禁則で分割できず min-content ≒ 96px（+左右padding 24px）まで上がる。実効360pxではトラック134pxに ぎりぎり収まっているが、ラベルが1文字でも増えると即はみ出すため下限を0にしておく。 */ .ws-media-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ws-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ws-space-2); } .ws-toc a { text-decoration: none; color: var(--ws-section); font-weight: 700; } .ws-toc a:hover { text-decoration: underline; } /* 募集要項の職種切り替え（2026-08-05 営業幹部候補の追加で新設）。 いま見ている職種は塗り、他はアウトライン。タップ領域は --ws-tapmin を下回らないようにする。 */ .ws-jobtabs { display: flex; flex-wrap: wrap; gap: var(--ws-space-3); margin-top: var(--ws-space-6); } .ws-jobtabs__item { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ws-tapmin); padding-inline: var(--ws-space-5); border: 2px solid currentColor; border-radius: var(--ws-radius-pill); font-weight: 700; text-decoration: none; color: var(--ws-section); } .ws-jobtabs__item:hover { background: var(--ws-bg-subtle); } .ws-jobtabs__item.is-current { background: var(--ws-section); border-color: var(--ws-section); color: var(--ws-bg); cursor: default; } .ws-jobtabs__item.is-current:hover { background: var(--ws-section); } .ws-breadcrumb-back { display: inline-flex; align-items: center; gap: var(--ws-space-1); text-decoration: none; color: var(--ws-ink-2); font-size: var(--ws-fs-note); } table.ws-plain-table { width: 100%; border-collapse: collapse; } table.ws-plain-table th, table.ws-plain-table td { border: 1px solid var(--ws-line); padding: var(--ws-space-2) var(--ws-space-3); text-align: left; font-size: var(--ws-fs-note); } /* --------------------------------------------------------------------------- 15-1. 写真（下層ページ全ページの置換完了に伴い、.ws-photo/.ws-band-photoは削除済み・2026-07-30。 lower_pages_design.md 6章 論点3。.ws-photo--gray のみ TOP⑥INDUSTRYで使用中のため残す（X-4）。 ------------------------------------------------------------------------- */ .ws-photo--gray { filter: grayscale(1); } /* 静的な無彩加工のみ（アニメーションしない・M4/禁止6） */ /* --------------------------------------------------------------------------- 15-2. 写真の枠（visual_spec.md 6章。枠は5種類だけ・実測に基づく。V-0/V-1/V-2/P-1〜P-5） `.ws-figure` は「枠を先に決めて cover で押し込む」（V-1違反）を避けるための共通枠。 実寸をそのまま aspect-ratio に書く（P-1）。TOPの新セクション（⑥INDUSTRY・⑧帯写真）で使用。 ------------------------------------------------------------------------- */ .ws-figure { display: block; width: 100%; overflow: hidden; border-radius: var(--ws-radius-card); } .ws-figure > img, .ws-figure > picture > img { display: block; width: 100%; height: 100%; } /* ⑥INDUSTRY ゲートウェイカード写真。PC=A(1600/700) / SP=D2(750/860・実測どおり)。P-3: 横方向は切らない。 */ .ws-figure--gateway { aspect-ratio: var(--ws-ar-D2); } .ws-figure--gateway > img { object-fit: cover; object-position: center center; } @media (min-width: 600px) { .ws-figure--gateway { aspect-ratio: var(--ws-ar-A); } } /* ⑧ENTRY直前のフルブリード帯写真。PC=A（max-height 80svhで高さのみ制限。P-2で横は切らない）／SP=D2。 全幅ベタ付けの帯のため角丸は付けない。 */ .ws-figure--band { aspect-ratio: var(--ws-ar-D2); border-radius: 0; } .ws-figure--band > img { object-fit: cover; object-position: center 28%; } @media (min-width: 600px) { .ws-figure--band { aspect-ratio: var(--ws-ar-A); max-height: 80svh; } } /* --------------------------------------------------------------------------- 15-3. 下層ページの写真枠（lower_pages_uiux.md §1-5 の P1〜P10 をそのまま実装） 枠の aspect-ratio は素材の実寸（P-1）。全て「素材比＝枠比」なので cover でも切られる量は 0%（P7/P9のみ誤差0.1%未満）。object-fit は必ず明示する（P-5）。 SP素材が別比率の枠だけ、呼び出し側が --ws-ar-sp を渡す（渡さなければPCと同比率）。 ------------------------------------------------------------------------- */ /* P4: /interview/ 一覧カードの透過切り抜き（480×630）。 上下1pxも切らない＝contain 一択（V-3）。背景は6色の色面をやめて無彩（12-2）。 */ .ws-figure--person { aspect-ratio: var(--ws-ar-B); border-radius: 0; /* 角丸は親カードの overflow:hidden が担当する */ background: var(--ws-bg-subtle); } .ws-figure--person > img { object-fit: contain; object-position: bottom center; } @media (max-width: 599px) { /* SP1列でカードが縦に伸びすぎるのを抑える。contain なので高さを詰めても1pxも切れない。 */ .ws-figure--person { max-height: 46svh; } } /* P2: /interview// の縦位置写真（670×800）。顔を残すため上寄せ（center 30%）。 */ .ws-figure--portrait { aspect-ratio: var(--ws-ar-C); } .ws-figure--portrait > img, .ws-figure--portrait > picture > img { object-fit: cover; object-position: center 30%; } /* P1・P5: 全幅の帯写真（PC 1600×703）。/about/ だけ SP素材がDなので --ws-ar-sp: var(--ws-ar-D) を渡す。 */ .ws-figure--band-a { aspect-ratio: var(--ws-ar-sp, 1600 / 703); border-radius: 0; } .ws-figure--band-a > img, .ws-figure--band-a > picture > img { object-fit: cover; object-position: center center; } @media (min-width: 600px) { .ws-figure--band-a { aspect-ratio: 1600 / 703; } } /* P8・P9: /question/ の超横長の帯（1600×488 / 1920×586）。 Aの枠に入れると上下30%が消えるため専用枠が必須（V-0の「実測で示したときだけ新設可」に該当）。 375px幅で高さ約114pxの帯になるが、文字を載せないので成立する。 */ .ws-figure--band-e { aspect-ratio: var(--ws-ar-E); border-radius: 0; } .ws-figure--band-e > img, .ws-figure--band-e > picture > img { object-fit: cover; object-position: center center; } /* P3・P6・P7: 本文カラム全幅の横写真（PC A2）。 SPの比が違う枠だけ --ws-ar-sp を渡す（/about/ = var(--ws-ar-D) ／ /information/ = 1 / 1）。 /interview/ の 05〜09_pic は SP素材が無いので渡さない（＝SPでもA2のまま）。 */ .ws-figure--wide { aspect-ratio: var(--ws-ar-sp, var(--ws-ar-A2)); } .ws-figure--wide > img, .ws-figure--wide > picture > img { object-fit: cover; object-position: center center; } @media (min-width: 600px) { .ws-figure--wide { aspect-ratio: var(--ws-ar-A2); } } /* .ws-photo-hero / __bg / __bg::after / __inner は削除済み（2026-07-30。C-3・V-6・G-2）。 参照していた about.ejs / interview.ejs は帯写真（.ws-figure--band-a）へ解体済み。 */ /* --------------------------------------------------------------------------- 16. フォーム（/entry/・要件6章・受入D群） ------------------------------------------------------------------------- */ .ws-field { margin-top: var(--ws-space-6); } .ws-field:first-child { margin-top: 0; } .ws-field__label { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ws-space-2); font-weight: 700; margin-bottom: var(--ws-space-2); } .ws-field-group-title { display: flex; align-items: center; gap: var(--ws-space-2); font-weight: 700; margin: 0 0 var(--ws-space-3); } .ws-input { display: block; width: 100%; /* 入力欄・セレクトは「既定の内在幅」（type=date や長い選択肢の文字列）を持つ。 flex/grid の子として置かれた場合に min-width:auto がそれを下限にしてしまい、 狭い画面で親からはみ出すため明示的に0にする（2026-07-31 先回り対応）。 */ min-width: 0; min-height: 48px; font-size: var(--ws-fs-ui); font-family: var(--ws-font-text); color: var(--ws-text); background: var(--ws-bg); border: 1px solid var(--ws-line-strong); border-radius: var(--ws-radius-input); padding: var(--ws-space-3) var(--ws-space-4); } textarea.ws-input { min-height: 120px; resize: vertical; } .ws-input--select { appearance: auto; } .ws-input:focus-visible { border-color: var(--ws-focus); outline: 2px solid var(--ws-focus); outline-offset: 1px; } /* エラー: 枠線太さ変更＋テキスト併記。色（--ws-error）だけに頼らない（8-1・受入D-6）。 */ .ws-input[aria-invalid="true"], fieldset.ws-radio-group[aria-invalid="true"] { border: 2px solid var(--ws-error); } fieldset.ws-radio-group[aria-invalid="true"] { border-radius: var(--ws-radius-input); padding: var(--ws-space-3); } .ws-field-error { margin-top: var(--ws-space-2); color: var(--ws-error); font-size: var(--ws-fs-note); font-weight: 700; } .ws-radio-group { border: none; padding: 0; margin: var(--ws-space-6) 0 0; } .ws-radio-group legend.ws-field__label { padding: 0; width: 100%; } .ws-radio-row { display: flex; align-items: center; gap: var(--ws-space-3); min-height: 48px; padding: var(--ws-space-2) var(--ws-space-3); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-input); cursor: pointer; } .ws-radio-row + .ws-radio-row { margin-top: var(--ws-space-2); } /* 選択肢ラベル側は縮んでよい（長い選択肢が行を押し広げて画面外に出るのを防ぐ）。 チェックボックスは flex-shrink:0 ＋ 24px固定なのでこの指定では縮まない。 */ .ws-radio-row > * { min-width: 0; } /* 個人情報同意のチェック行（2026-08-05 神吉さんの指摘で「…コチラから ・同意する」の中黒をやめた際に新設）。 ⚠️ テンプレートに span を足しただけでCSSを書いていなかった（Web制作部の指摘→COOが実測で確認）。 span は既定 inline のままなので、いまは文が長くて偶然2行になっているだけで、 文言を短くすると1行に戻る。行を分けるのは見た目の都合ではなく、 「何に同意するのか」と「同意する」という行為を読み分けられるようにするためなので、明示する。 */ .ws-consent__lead, .ws-consent__agree { display: block; } .ws-consent__lead { font-size: var(--ws-fs-note); color: var(--ws-ink-2); } .ws-consent__agree { margin-top: var(--ws-space-1); font-weight: 700; } .ws-consent__agree .ws-tag { margin-left: var(--ws-space-2); } .ws-radio-row input[type="radio"], /* 24px はWCAG 2.2 の最小タップ領域（SC 2.5.8 Target Size (Minimum)・AA）。 2026-07-30 COOの実測で20pxだったため2px不足していた。ラベルをタップしても 反応するので実害は小さいが、チェックボックス自体を直接押す人がいるため基準に合わせる。 */ .ws-radio-row input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; } /* 選択行のハイライト。:has()未対応ブラウザではハイライトなしに留まるだけで機能は失われない。 */ .ws-radio-row:has(input:checked) { background: var(--ws-magenta-050); border-left: 4px solid var(--ws-magenta-600); } /* 入力欄は min-width:auto だと「テキスト入力の既定サイズ（約170px）」を下回れない。 グリッドの下限を0にして、必ず親幅の中で等分されるようにする。 */ .ws-date-group { display: grid; gap: var(--ws-space-3); grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .ws-date-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --------------------------------------------------------------------------- 17. アラート（エラー・警告の共通表示。色だけに頼らない・8-1） ------------------------------------------------------------------------- */ .ws-alert { border: 2px solid var(--ws-error); background: #fff; color: var(--ws-error); border-radius: var(--ws-radius-input); padding: var(--ws-space-4) var(--ws-space-5); } .ws-alert p { margin: 0; font-weight: 700; } .ws-alert ul { margin: var(--ws-space-2) 0 0; padding-left: 1.2em; font-weight: 400; } .ws-alert a.ws-link { color: var(--ws-error); } /* --------------------------------------------------------------------------- 18. 確認画面（/entry/confirm） ------------------------------------------------------------------------- */ .ws-confirm-dl { display: grid; gap: var(--ws-space-5); } .ws-confirm-dl__row { border-top: 1px solid var(--ws-line); padding-top: var(--ws-space-4); } .ws-confirm-dl__row:first-child { border-top: none; padding-top: 0; } .ws-confirm-dl dt { font-weight: 700; color: var(--ws-ink-2); font-size: var(--ws-fs-note); } .ws-confirm-dl dd { margin: var(--ws-space-1) 0 0; white-space: pre-wrap; } /* --------------------------------------------------------------------------- 19. モーション v2 — 出典: motion_spec.md（v2・スクロール連動。設計の正本） ここから先の規律（14章の規律に加えて・守らないと差し戻し対象）: ・v2のCSSは必ず `@media (prefers-reduced-motion: no-preference)` の内側、かつ `@supports (animation-timeline: view()) / (animation-timeline: scroll())` の内側に書く （禁止18）。この2つの外に書くと reduce環境・非対応環境の両方で壊れる。 ・v1のCSS（14章）は削除しない。ここで同名プロパティを再宣言して「後勝ち」で上書きする。 ・.ws-scrub を付ける要素には必ず .ws-reveal も併記されていること（14-3の必須規律）。 ここのCSSは .ws-reveal の transition を animation で上書きするだけで、要素側の クラス併記自体はテンプレート側（top.ejs等）の責務。 ------------------------------------------------------------------------- */ /* --- 19-1. M-06 BEAT RULER（スクロールプログレス。visual_spec.md 9-5で見た目を刷新） 5色グラデーションは廃止（2-4）。マゼンタ単色のフィル＋先端に「点」（.ws-beat-dot＝KVの 句点と共有）。トラックは薄いグレー、フィルは--ws-magenta-600一色。 --------------------- */ .ws-progress { display: none; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .ws-progress { display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; /* .ws-header(50) と .ws-nav(60) より上 */ pointer-events: none; /* 上端のタップを奪わない */ background: color-mix(in srgb, var(--ws-ink) 12%, transparent); } .ws-progress__fill { display: block; position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--ws-magenta-600); animation: ws-progress-fill linear both; animation-timeline: scroll(root block); } .ws-progress__dot { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin: 0; transform: translate(0, -50%); animation: ws-progress-dot linear both; animation-timeline: scroll(root block); } @keyframes ws-progress-fill { to { transform: scaleX(1); } } @keyframes ws-progress-dot { to { transform: translate(calc(100vw - 7px), -50%); } } } } /* --------------------------------------------------------------------------- 19-2. ③FORMATION（visual_spec.md 9-4。本サイトの中心演出。2026-07-29新設） 社員6人の切り抜き写真（480×630・Bグループ）が黒いステージ上で隊列を組み替える。 RANK（整列＝踊らされる）→BREAK（散開＝踊り出す）→ARC（弧＝自分たちで選んだ隊列）。 非対応/reduce時は通常グリッド（PC6列/SP3列×2段）に自動的に落ちる（M6・情報は失われない）。 ------------------------------------------------------------------------- */ /* overflow-x: clip は必須（2026-07-30 COO追加）。 隊列の振り付けは vw 単位で中央から左右へ人物を配置するため、端のメンバー（6人目）が 画面幅を数px超えて横スクロールバーを発生させていた（実機で1438px vs 1425pxを確認）。 振り付けの数値を削ると隊列が窮屈になるので、はみ出しは切り落とす方で吸収する。 `hidden` ではなく `clip` を使うのは、`hidden` だとこの要素がスクロールコンテナになり、 内側の `position: sticky` が親の境界で止まってしまうため。 */ .ws-formation { background: var(--ws-bg-ink); color: var(--ws-bg); overflow-x: clip; } .ws-formation__track { position: relative; } .ws-formation__head { grid-column: 1 / -1; padding-inline: var(--ws-gutter); padding-top: var(--ws-space-9); margin-bottom: var(--ws-space-8); position: relative; z-index: 2; } .ws-formation__script { color: var(--ws-magenta-500); } .ws-formation__heading { color: var(--ws-bg); } .ws-formation__cta { margin-top: var(--ws-space-4); } /* フォールバック（既定・非対応/reduce時に見える形）: 通常グリッド。9-4「実装上限とフォールバック」。 .ws-formation__head は`.ws-formation__stage`の直前・通常フロー内に置かれるため、この状態では フルワイドの見出し行としてそのまま積まれる（グリッドの1マスに潰れない）。 */ .ws-formation__stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ws-space-7) var(--ws-space-4); padding-inline: var(--ws-gutter); padding-block: 0 var(--ws-space-9); } @media (min-width: 1024px) { .ws-formation__stage { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .ws-member { position: relative; display: block; text-decoration: none; color: var(--ws-bg); text-align: center; } .ws-member__ground { position: absolute; left: 50%; bottom: 4%; width: 56%; height: 12%; transform: translateX(-50%); border-radius: 50%; /* 55% → var(--ws-ground-ink, 55%) （mobile_formation_design.md 6-1 C-1）。 既定値が55%のまま同一なのでPC/フォールバックの計算結果・見た目は1pxも変わらない。 SP専用ブロックで .ws-member--1/2/3 に --ws-ground-ink: 40% を上書きし、奥列だけ薄くする。 */ background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ws-member-color, var(--ws-line-strong)) var(--ws-ground-ink, 55%), transparent), transparent 72%); } .ws-member__photo { position: relative; display: block; aspect-ratio: var(--ws-ar-B); width: 100%; } .ws-member__pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; } .ws-member__pose--b { opacity: 0; } .ws-member__name { display: block; margin-top: var(--ws-space-2); font-weight: 700; font-size: var(--ws-fs-note); } .ws-member__name small { display: block; font-weight: 400; color: color-mix(in srgb, var(--ws-bg) 65%, transparent); } /* フォールバック時のポーズ切替: hoverで表裏（旧サイトの挙動そのまま。9-4） */ @media (hover: hover) and (pointer: fine) { .ws-member:hover .ws-member__pose--a { opacity: 0; } .ws-member:hover .ws-member__pose--b { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { /* M-14 BREATH（待機中もメンバーが微かに上下する。8拍3840ms・時間駆動＝@supportsの外） */ .ws-member__photo { animation: ws-breath var(--ws-t-8) var(--ws-ease-loop) infinite; animation-delay: calc(var(--ws-i, 0) * var(--ws-t-8th) * -1); } @keyframes ws-breath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @supports (animation-timeline: view()) { /* sticky要素の子に view() を直接当てると進行度が取れない。必ずトラック側に 名前付きタイムラインを置く（実装時の最大の落とし穴・9-4注記）。 */ .ws-formation__track { /* K-5改定（2026-07-30 大﨑さん指示「もう少しスクロール回数を減らしたい」）。 300svh → 200svh。sticky が 100svh なので、振り付けが流れるスクロール量 （contain range）は 200svh → 100svh へ半減する＝画面1つ分で隊列が完成する。 下限はポーズ切替の終了位置（contain 49% ≒ 半分）で決まっており、 200svh でも切替は範囲内に収まる（下げすぎると6人目の切替が間に合わない）。 */ height: 200svh; view-timeline-name: --ws-stage; view-timeline-axis: block; } .ws-formation__stage { position: sticky; top: 0; height: 100svh; display: block; padding-block: 0; } /* ステージ全幅の絵の中で、見出し・script・CTAはステージ左上に絶対配置する（7-4）。 */ .ws-formation__head { position: absolute; top: 0; left: 0; padding-block: var(--ws-space-9) 0; margin-bottom: 0; max-width: min(60vw, 480px); } .ws-member__photo { animation: none; } /* BREATHはstatic時のみ。ステージ中はM-04の動きに一本化 */ .ws-member { position: absolute; top: 50%; left: 50%; width: min(20vw, 220px); margin: 0; animation: linear both; animation-timeline: --ws-stage; animation-range: contain 0% contain 100%; } .ws-member--1 { animation-name: ws-form-1; } .ws-member--2 { animation-name: ws-form-2; } .ws-member--3 { animation-name: ws-form-3; } .ws-member--4 { animation-name: ws-form-4; } .ws-member--5 { animation-name: ws-form-5; } .ws-member--6 { animation-name: ws-form-6; } /* RANK(0%・整列＝踊らされる) → BREAK(35%・散開＝踊り出す) → ARC(100%・弧＝自分たちで選んだ隊列)。 値は9-4の振り付け表そのもの（x/yは視点幅・高さ基準のvw/svh、ランダム禁止＝index由来の固定値）。 */ @keyframes ws-form-1 { 0% { transform: translate(-50%, -50%) translate(-41.5vw, 0) scale(.62) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(-41vw, -6svh) scale(.78) rotate(-5deg); } 100% { transform: translate(-50%, -50%) translate(-41.5vw, -8svh) scale(.855) rotate(0deg); } } @keyframes ws-form-2 { 0% { transform: translate(-50%, -50%) translate(-24.9vw, 0) scale(.62) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(-22vw, 4svh) scale(.66) rotate(3deg); } 100% { transform: translate(-50%, -50%) translate(-24.9vw, -4.8svh) scale(.785) rotate(0deg); } } @keyframes ws-form-3 { 0% { transform: translate(-50%, -50%) translate(-8.3vw, 0) scale(.62) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(-4vw, -10svh) scale(.88) rotate(-2deg); } 100% { transform: translate(-50%, -50%) translate(-8.3vw, -1.6svh) scale(.715) rotate(0deg); } } @keyframes ws-form-4 { 0% { transform: translate(-50%, -50%) translate(8.3vw, 0) scale(.62) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(14vw, 2svh) scale(.72) rotate(6deg); } 100% { transform: translate(-50%, -50%) translate(8.3vw, -1.6svh) scale(.715) rotate(0deg); } } @keyframes ws-form-5 { 0% { transform: translate(-50%, -50%) translate(24.9vw, 0) scale(.62) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(31vw, -4svh) scale(.82) rotate(-4deg); } 100% { transform: translate(-50%, -50%) translate(24.9vw, -4.8svh) scale(.785) rotate(0deg); } } @keyframes ws-form-6 { 0% { transform: translate(-50%, -50%) translate(41.5vw, 0) scale(.62) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(46vw, 7svh) scale(.64) rotate(2deg); } 100% { transform: translate(-50%, -50%) translate(41.5vw, -8svh) scale(.855) rotate(0deg); } } /* M-04b POSE CHANGE: 1人ずつ3%ずつ遅らせてポーズA→Bへ（群舞の正体。9-4） ⚠️ AとBは必ず対で書くこと（2026-07-30 COO修正）。 Bをフェードインさせるだけだと、Aが消えないまま両方 opacity:1 で残り、 全員が二重像になる（実機で確認済みの不具合）。`both` で範囲通過後も 値が保持されるため、Aにも同じ範囲の逆アニメーションが要る。 */ .ws-member__pose--a, .ws-member__pose--b { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --ws-stage; animation-range: contain calc(28% + var(--ws-i, 0) * 3%) contain calc(34% + var(--ws-i, 0) * 3%); } .ws-member__pose--a { animation-name: ws-form-pose-a; } .ws-member__pose--b { animation-name: ws-form-pose-b; } @keyframes ws-form-pose-a { from { opacity: 1; } to { opacity: 0; } } @keyframes ws-form-pose-b { from { opacity: 0; } to { opacity: 1; } } } } /* --------------------------------------------------------------------------- 19-2b. ③FORMATION スマホ専用隊列（RANK→BREAK→ARC・2026-07-30 dev-web-coding新設） 出典（正本）: mobile_formation_uiux.md 2〜6章（座標・段構成・受入基準） / mobile_formation_design.md 6章（色・影・質感の実装対応表） 767px以下のみ。PC振り付け（ws-form-1〜6・上のブロック）は1文字も変更しない。 二重ガード（prefers-reduced-motion: no-preference ＋ @supports(animation-timeline: view())） をここで書き直し、その内側に @media (max-width: 767px) をもう1段ネストする（uiux 6-2）。 メディアクエリは詳細度を上げないため、.ws-member--N の animation-name 上書きは 「PC振り付けブロックより後ろに置く」ことだけで勝つ（同じ理由で共通の animation-timeline / animation-range は再宣言不要＝上のブロックの値がそのまま効く＝ E-2/E-3のトラック共有はここでは何も書かないことで担保される）。 ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { @media (max-width: 767px) { /* --- 2-2. ステージの高さと位置（uiux 2-2）。トラック高200svh・タイムラインは触らない --- */ .ws-formation__stage { top: var(--ws-header-h); height: calc(100svh - var(--ws-header-h) - var(--ws-fixedbar-h) - env(safe-area-inset-bottom)); } /* --- 5-1. 頭（script 1行 → 見出し+CTAを1行に圧縮。uiux 5-1 / design 8-4） --- マークアップに h2+CTA 専用のラッパが無いため（views/pages/top.ejs）、 .ws-formation__head 自体をflexコンテナにし、.ws-formation__script に flex-basis:100% を与えて1行目を独占させる（CSSのみで2行構成を実現）。 row-gap は明示的に指定しない: .ws-overline-script の margin-bottom（8px）が 既に行間を作っており、gap を足すと二重に加算されて5-1の余白計算（8px前提）を 超えてしまうため。 */ .ws-formation__head { padding-block: 20px 0; /* uiux 5-1 実測値。60vw上限（PC用）は撤廃 */ max-width: none; display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--ws-space-3); /* 12px。見出しとCTAの間隔（design 8-4 5-1） */ } .ws-formation__script { flex-basis: 100%; } .ws-formation__cta { margin-top: 0; } /* 共通部のmargin-top(16px)はflex行内では使わない */ /* --- 3章. 寸法の基準（U = --ws-mb-w）。x/yはすべて calc(var(--ws-mb-w) * n) で書く --- */ .ws-member { --ws-mb-w: min(36vw, 168px); width: var(--ws-mb-w); top: 60%; left: 50%; /* uiux 5-2: 頭の下に重心を落とすため50%ではなく60% */ } .ws-member--1 { animation-name: ws-form-sp-1; } .ws-member--2 { animation-name: ws-form-sp-2; } .ws-member--3 { animation-name: ws-form-sp-3; } .ws-member--4 { animation-name: ws-form-sp-4; } .ws-member--5 { animation-name: ws-form-sp-5; } .ws-member--6 { animation-name: ws-form-sp-6; } /* RANK(0%・整列) → BREAK(35%・散開) → ARC(100%・円陣)。値は uiux 4-1/4-2/4-3 の表そのもの。 奥列＝1・2・3／手前列＝4・5・6（DOM順＝重なり順。z-index不要）。 */ @keyframes ws-form-sp-1 { 0% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * -0.62), calc(var(--ws-mb-w) * -0.58)) scale(.90) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * -0.70), calc(var(--ws-mb-w) * -0.36)) scale(.98) rotate(-5deg); } 100% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * -0.60), calc(var(--ws-mb-w) * -0.28)) scale(.92) rotate(0deg); } } @keyframes ws-form-sp-2 { 0% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0), calc(var(--ws-mb-w) * -0.58)) scale(.90) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * -0.40), calc(var(--ws-mb-w) * 0.34)) scale(.92) rotate(3deg); } 100% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * -0.10), calc(var(--ws-mb-w) * -0.40)) scale(.90) rotate(0deg); } } @keyframes ws-form-sp-3 { 0% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0.62), calc(var(--ws-mb-w) * -0.58)) scale(.90) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0.58), calc(var(--ws-mb-w) * -0.30)) scale(1.06) rotate(-2deg); } 100% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0.52), calc(var(--ws-mb-w) * -0.26)) scale(.92) rotate(0deg); } } @keyframes ws-form-sp-4 { 0% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * -0.62), calc(var(--ws-mb-w) * 0.60)) scale(.90) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * -0.90), calc(var(--ws-mb-w) * 0.30)) scale(.96) rotate(5deg); } 100% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * -0.94), calc(var(--ws-mb-w) * 0.26)) scale(1.06) rotate(0deg); } } @keyframes ws-form-sp-5 { 0% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0), calc(var(--ws-mb-w) * 0.60)) scale(.90) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0.16), calc(var(--ws-mb-w) * 0.44)) scale(1.10) rotate(-3deg); } 100% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0.16), calc(var(--ws-mb-w) * 0.42)) scale(1.08) rotate(0deg); } } @keyframes ws-form-sp-6 { 0% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0.62), calc(var(--ws-mb-w) * 0.60)) scale(.90) rotate(0deg); } 35% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0.96), calc(var(--ws-mb-w) * -0.06)) scale(.90) rotate(2deg); } 100% { transform: translate(-50%, -50%) translate(calc(var(--ws-mb-w) * 0.90), calc(var(--ws-mb-w) * 0.24)) scale(1.06) rotate(0deg); } } /* --- design 6-1 D-1/D-2: 奥列（1/2/3）だけ輝度と接地光を落として奥行きを補強 --- */ .ws-member--1 .ws-member__photo, .ws-member--2 .ws-member__photo, .ws-member--3 .ws-member__photo { filter: brightness(.86); } .ws-member--1, .ws-member--2, .ws-member--3 { --ws-ground-ink: 40%; } /* --- uiux 4-4 / design 6-2 D-3〜D-13: 名前ラベル。通常フローから抜いて絶対配置し、 奥列＝頭上・手前列＝足元。RANKでopacity 0→BREAK前後で1人ずつフェードイン。 --- */ .ws-member__name { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; margin: 0; white-space: nowrap; line-height: var(--ws-lh-ui); color: var(--ws-bg); text-shadow: 0 1px 3px color-mix(in srgb, var(--ws-bg-ink) 92%, transparent), 0 0 10px color-mix(in srgb, var(--ws-bg-ink) 78%, transparent); animation-name: ws-form-sp-name; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --ws-stage; animation-range: contain calc(34% + var(--ws-i, 0) * 3%) contain calc(40% + var(--ws-i, 0) * 3%); } @keyframes ws-form-sp-name { from { opacity: 0; } to { opacity: 1; } } .ws-member--1 .ws-member__name, .ws-member--2 .ws-member__name, .ws-member--3 .ws-member__name { bottom: 100%; margin-bottom: var(--ws-space-1); } .ws-member--4 .ws-member__name, .ws-member--5 .ws-member__name, .ws-member--6 .ws-member__name { top: 100%; margin-top: var(--ws-space-1); } /* design 3-2: 肩書はSPの隊列では視覚的にのみ隠す（DOM・アクセシブルネームには残す） */ .ws-member__name small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* uiux 9章 未決事項1（既定の実装方針として実装）: 短い端末（CSS高さ<700px）でのみ Uをさらに落とし、頭・固定CTAに食われる帯を確保する。他の指定は変えない。 */ @media (max-width: 767px) and (max-height: 700px) { .ws-member { --ws-mb-w: min(32vw, 150px); } } } } /* --- 19-3. 「Shall we dance?」の一文字ずつをスクロール連動に（9章） --------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .ws-script-beat--scrub .ws-script-beat__c { transition: none; /* v1の一斉transitionを無効化（二重に効かせない） */ animation: ws-beat-scrub linear both; animation-timeline: view(); /* 1文字あたり3%ずつズラす。15文字なら entry 20%→93% の幅に収まる */ animation-range: entry calc(20% + var(--ws-i) * 3%) entry calc(48% + var(--ws-i) * 3%); } @keyframes ws-beat-scrub { from { opacity: 0; transform: translateY(.28em) rotate(-6deg); } to { opacity: 1; transform: none; } } } } /* --- 19-4. .ws-scrub 共通クラス（3章。「装飾・写真・カード・数字・タイポ・背景」専用。 本文・見出し・リストには絶対に付けない＝M7） -------------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .ws-scrub { animation: ws-scrub-in linear both; animation-timeline: view(); animation-range: var(--ws-range-in-start) var(--ws-range-in-end); } @keyframes ws-scrub-in { from { opacity: 0; transform: translateY(var(--ws-move-enter)) scale(var(--ws-depth-in)); } to { opacity: 1; transform: none; } } /* グループ内で --ws-i（v1のmain.jsが .ws-reveal-group の子に既に振っている）を使って レンジをズラす＝群舞（M2）。カードが同時に出るのは「群舞」ではなく「霧」。 */ .ws-reveal-group > .ws-scrub, .ws-reveal-group > * > .ws-scrub { animation-range: entry calc(10% + var(--ws-i, 0) * 4%) entry calc(85% + var(--ws-i, 0) * 4%); } } } /* --- 19-5. セクション間の奥行き（7章。三菱ケミカル／みさとと。相当） -------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .ws-scrub--depth { animation: ws-depth-in linear both, ws-depth-out linear both; animation-timeline: view(), view(); animation-range: var(--ws-range-in-start) var(--ws-range-in-end), var(--ws-range-out-start) var(--ws-range-out-end); transform-origin: center 30%; /* 上寄りを軸に。下端が跳ねて見えない */ } @keyframes ws-depth-in { from { opacity: .35; transform: scale(var(--ws-depth-in)) translateY(var(--ws-move-enter)); } to { opacity: 1; transform: none; } } @keyframes ws-depth-out { from { opacity: 1; transform: none; } to { opacity: var(--ws-depth-fade-out); transform: scale(var(--ws-depth-out)); } } } } /* --- 19-6. 写真の軽いパララックス（11章。移動量は要素高の10%以内＝酔い対策の上限） --- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .ws-scrub--parallax { overflow: hidden; } .ws-scrub--parallax > img, .ws-scrub--parallax > picture > img { height: calc(100% + var(--ws-parallax) * 2); /* 動く分だけ余白を持たせる */ object-fit: cover; animation: ws-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } @keyframes ws-parallax { from { transform: translateY(calc(var(--ws-parallax) * -1)); } to { transform: translateY(var(--ws-parallax)); } } /* .ws-people-card__photo は例外: 人物切り抜き写真のため object-fit は contain のまま 維持する必要がある（上の汎用ルールの cover を打ち消す。cover にすると被写体が 意図せずクロップされる）。動く量・タイミングは汎用ルールと同じにする。 */ .ws-people-card__photo.ws-scrub--parallax > .ws-people-card__img { object-fit: contain; } } } /* 19-7（旧: フィナーレの2層化）は削除した。visual_spec.md 4-1で旧TOP⑨フィナーレ相当の セクションは廃止され、巨大タイポの表示はKV（①STAGE・14-4）のみに一本化されている （10-1・12-2「捨てる」）。partials/dance-typo.ejs・dance-typo-use.ejs も不使用になった （テンプレート側でincludeを削除済み。物理ファイル削除は本エージェントの権限外＝COOに申し送り）。 */ /* --- 19-8. 数字のオドメーター（8章。0〜9のリールをtranslateYでスクラブ・JSゼロ） --- */ .ws-odo { display: none; } /* 既定は非表示＝フォールバックが見える */ .ws-odo-fallback { display: inline; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .ws-odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; } .ws-odo-fallback { display: none; } /* 不具合D（2026-07-31 COO実測: スクロールしても .ws-odo__reel の桁が中途半端な translateY位置で固定され数字が読めない。DevTools実測でcurrentTime/progressが スクロール量に関わらず固定値のまま）。 .ws-odo__reel の直接の祖先 .ws-stat は .ws-reveal を持ち、表示直後は transform(translateY)がCSS transitionで変化し続け、その間 will-change: transform も掛かる（14-1・main.js 102-108「1400ms後に is-done で will-change を戻す」）。 .ws-odo__reel に view() を直接当てると、この「祖先が変形中の一瞬」の参照ジオメトリ を掴んだまま以後の変化に追随できなくなる（19-2 FORMATIONの「sticky要素の子に view() を直接当てると進行度が取れない」と同系統の不具合。原因はstickyに限らず 「祖先のtransform/will-changeが変化すること」全般と考えられる）。 対策も19-2と同じ発想: 変形しない安定した祖先 .ws-numbers-grid （.ws-reveal/.ws-scrubの類を持たない・7章のグリッド定義そのまま）側に 名前付きタイムライン --ws-numbers を宣言し、.ws-odo__reel はそれを animation-timeline: --ws-numbers; で参照する（view() 直付けをやめる）。 .ws-stat.ws-reveal の transform/will-change 自体は変更していない（カードの フェードイン演出は維持）。 ⚠ 基準が「.ws-numbers-grid 自身の可視性」に変わるため、桁ごとの --ws-i オフセット （4%刻み）とanimation-rangeの考え方はそのまま維持しつつも、SPの1列積みレイアウト （7章）のように .ws-numbers-grid が縦に長い場合、後方のカードは自分が画面に入る 前にグリッド全体の進行度が閾値を超え、先に数字が確定してしまいうる （＝そのカードだけロールインの演出が見えなくなる）。ただし fill-mode: both により 最終的に止まる位置は常に整数（＝正しい数字）になるため、「読める数字で止まる」 という最優先条件はどのカードでも満たされる。 */ .ws-numbers-grid { view-timeline-name: --ws-numbers; view-timeline-axis: block; } .ws-odo__col { display: inline-block; height: 1em; line-height: 1; overflow: hidden; /* 1桁ぶんの窓 */ vertical-align: baseline; } .ws-odo__reel { display: block; white-space: pre; line-height: 1; /* 0〜9を縦に10行積む */ animation: ws-odo-roll linear both; animation-timeline: --ws-numbers; /* 桁ごとに4%ずつ遅らせる＝左から順に確定していく（M2の拍）。数値・考え方は不変 （基準が.ws-numbers-grid自身の可視性になった点のみが変更点。上の注記参照）。 */ animation-range: entry calc(25% + var(--ws-i) * 4%) cover calc(35% + var(--ws-i) * 4%); } @keyframes ws-odo-roll { from { transform: translateY(0); } to { transform: translateY(calc(var(--ws-digit) * -1em)); } } } } /* --------------------------------------------------------------------------- 19-9. M-09 CROSSFADE ON SCROLL（visual_spec.md 9-6。/interview/ 一覧の6枚。lower_pages_design.md 1-5） スクロールで表（ポーズA）→裏（ポーズB）が入れ替わる。カードごとに --ws-i で5%ずつズラす。 ⚠️ 19-2（FORMATION）と同じ落とし穴があるので、A と B は必ず対で書く。Bをフェードイン させるだけだと both でAが opacity:1 のまま残り、全員が二重像になる。 @keyframes は 19-2 の ws-form-pose-a / -b をそのまま流用する（新規キーフレームを増やさない）。 ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .ws-people-card__img--front, .ws-people-card__img--back { transition: none; /* 14-6の「入場時1回だけのクロスフェード」を無効化（二重掛け防止） */ animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: entry calc(40% + var(--ws-i, 0) * 5%) entry calc(70% + var(--ws-i, 0) * 5%); } .ws-people-card__img--front { animation-name: ws-form-pose-a; } .ws-people-card__img--back { animation-name: ws-form-pose-b; } } } /* hoverも併存させる（N-8: hoverでしか出ない情報は作らないが、hoverで出ないのも退化）。 animation を外してから opacity を当てるのが要点。animation-fill-mode: both は 宣言値より強いので、`animation: none` にしない限り hover が効かない。 セレクタ特異度(0,3,0)が上のブロック(0,1,0)より高いので、記述順は問わない。 */ @media (hover: hover) and (pointer: fine) { .ws-people-card:hover .ws-people-card__img--front, .ws-people-card:focus-within .ws-people-card__img--front { animation: none; opacity: 0; transition: opacity var(--ws-t-1) var(--ws-ease); } .ws-people-card:hover .ws-people-card__img--back, .ws-people-card:focus-within .ws-people-card__img--back { animation: none; opacity: 1; transition: opacity var(--ws-t-1) var(--ws-ease); } } /* --------------------------------------------------------------------------- 20. TOP新セクション（visual_spec.md 4-1・7-4・8-2。2026-07-29新設） ②MANIFESTO・⑦FLOW・⑧ENTRY（黒面化）のレイアウト固有スタイル。 ------------------------------------------------------------------------- */ /* ②MANIFESTO: PC=本文col1-7＋事実3点をcol9-12にsticky／SP=事実3点を横並びピルで本文の前に（8-2）。 DOM順は本文が先だが、SPだけ視覚順を`order`で入れ替える（読み始める前に会社の輪郭を渡すため）。 */ .ws-manifesto__grid { display: grid; gap: var(--ws-space-6); } /* SPは1列にする（2026-08-05 大﨑さん指摘）。 もとは3列（1トラック85px＝約5文字）で、事業を4領域に増やした時点で 「AI・／DX導入／支援」「受託・／ラボ型／開発」「人材教／育事業」のように語が細切れになり読めなくなった。 列を減らして幅を確保するのが本筋（文字を小さくして詰め込む対処はしない）。 ⚠️ カード内部（.ws-manifesto__fact / __fact-list）の指定は**このファイルの後ろ**にまとめてある。 ここに書くと、後方にある同名・同詳細度の規則に打ち消される（一度やらかした）。 */ .ws-manifesto__facts { order: -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ws-space-3); } @media (min-width: 1024px) { .ws-manifesto__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr); } .ws-manifesto__body { grid-column: 1; } .ws-manifesto__facts { /* 根本原因（2026-08-04・大﨑さん実測で発覚）: 上でSP用に付けた`order:-1`はメディアクエリの 外にあるためPCでも生き続ける。CSS Gridの自動配置は「order適用後の順序」でカーソルを進めるので、 facts（order:-1→body より先に処理）がcol3・row autoで先に置かれてカーソルがcol3の先へ進み、 その後に処理されるbody（col1・row auto）は「カーソルより手前の列」に戻れず次の行へ弾かれる （CSS Grid仕様8.5節の自動配置カーソルは後戻りしない）。結果、body だけが2行目に落ち、 1行目の左側（本来bodyがいる場所）が丸ごと空白になっていた。 固定はPCではgrid-columnで視覚位置を確定させているのでorderは不要→ここで0に戻し、 auto-placementの処理順をDOM順（body→facts）に戻すのが根治（`grid-row:1`等の対症療法にしない）。 */ order: 0; grid-column: 3; grid-template-columns: minmax(0, 1fr); position: sticky; top: calc(var(--ws-header-h, 72px) + 40px); align-self: start; height: max-content; } } /* SP: ラベルを左、値を右に横並びにする。1列になったぶん横幅に余裕があるので、 縦に積むより行数が減って読みやすい。 */ .ws-manifesto__fact { border: 1px solid var(--ws-line); border-radius: var(--ws-radius-card); padding: var(--ws-space-4); display: grid; grid-template-columns: 4rem minmax(0, 1fr); /* ラベル｜値 */ align-items: baseline; gap: var(--ws-space-4); text-align: left; } .ws-manifesto__fact-label { font-size: var(--ws-fs-note); color: var(--ws-ink-2); } .ws-manifesto__fact-value { font-family: var(--ws-font-display); font-weight: 400; font-size: var(--ws-fs-h3); } /* 事業のように値が複数あるものは箇条書きにする（2026-08-05 事業を4領域に変更）。 1つ値のカード（設立・拠点）と大きさが揃うよう、見出し級ではなく本文サイズで組む。 */ .ws-manifesto__fact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ws-space-1); font-family: var(--ws-font-display); font-weight: 400; font-size: var(--ws-fs-body); } @media (min-width: 1024px) { /* PCは従来どおり、ラベルの下に値を置く中央揃えのカード。 */ .ws-manifesto__fact { grid-template-columns: minmax(0, 1fr); gap: var(--ws-space-1); text-align: center; } } /* ⑦FLOW（新設）: PC=横3列＋矢印／SP=縦3段＋矢印（8-2）。numbered railはCONDITIONSと共通の.ws-sec。 */ .ws-flow__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ws-space-6); } @media (min-width: 1024px) { .ws-flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } } .ws-flow__step { text-align: center; position: relative; } .ws-flow__step-no { font-family: var(--ws-font-display); font-weight: 400; font-size: var(--ws-fs-h1); color: var(--ws-section); } /* M-12（矢印のscaleXスクロール連動）は今回の実装順の範囲外のため、静的な罫のみで区切りを示す。 */ .ws-flow__step:not(:first-child)::before { content: ""; position: absolute; background: var(--ws-line-strong); top: 50%; left: calc(var(--ws-space-6) * -1); width: var(--ws-space-5); height: 2px; transform: translateY(-50%); } @media (max-width: 1023px) { .ws-flow__step:not(:first-child)::before { top: calc(var(--ws-space-6) * -1); left: 50%; width: 2px; height: var(--ws-space-5); transform: translateX(-50%); } } .ws-flow__patterns { margin-top: var(--ws-space-8); display: grid; gap: var(--ws-item-gap); } /* ⑧ENTRY: K-1（COO承認）でステージ（黒）を2箇所目として作る。CTAはprimary-invertで組む。 */ .ws-entry-cta.ws-section--bg-ink { --ws-section-tint: transparent; } .ws-entry-cta.ws-section--bg-ink .ws-lead, .ws-entry-cta.ws-section--bg-ink p { color: var(--ws-bg); } .ws-entry-cta.ws-section--bg-ink .ws-h2 { color: var(--ws-bg); }