/* ============================================================================= RUBICON9 コーポレートサイト 共通スタイル デザインの狙い: 古典彫刻（ギリシャ・ローマ）を思わせるエディトリアル。 石のような沈んだ地色に、ローマ碑文体（Cinzel）の欧文と明朝の和文を合わせ、 彫り込んだ罫と余白で誌面のように組む。節の切れ目は線を引くのではなく、 陰と光の1px2本で「紙に彫った溝」として見せる（→ 1. トークンの --groove-*）。 美術館の照明のようなヴィネットで陰影をつける。 コーポレートブルーは「差し色」に徹し、面では使わない。 全ページがこの1枚を読み込む。ページ固有の見た目もここに書く（ページごとに CSSを分けると、どこを直せばよいか分からなくなるため意図的に1枚にしている）。 ブラウザにキャッシュされるので、ページ間を移動しても読み直しは発生しない。 目次: 1. トークン（色・彫り込みの罫・幅と余白・文字の大きさ） ※ 色と大きさの数値は、原則ここ以外に書かない。 各セクションでは var(--fs-body) のように名前で指定する 2. 土台（body・地色・粒状感・ヴィネット） 3. ヘッダー（ナビゲーションとドロップダウン） 4. フッター 5. セクションの型（全ページ共通の組み方） 6. 部品（リンク・図版・表・セクションの絵） 7. トップページ固有（ヒーロー・索引・登場アニメーション・事業モジュール・お知らせ一覧） 8. 下層ページ固有（ページ見出し・パン屑・役員紹介・事業内容・事例紹介・お問い合わせ） 9. お知らせ詳細（本文） 10. レスポンシブ ============================================================================= */ /* --- 1. トークン ------------------------------------------------------------ */ /* ローマ碑文体（SIL Open Font License）。欧文のみ自ホストし、和文は明朝にフォールバックさせる。 和文Webフォントは数MB規模になるため採用しない。 */ @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/cinzel-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* 石膏・大理石を思わせる、彩度を落とした温かいグレー */ --paper: #cfcabf; --stone: #bdb7a9; --ink: #1c1916; /* 本文の色。真っ黒（--ink）にはせず、地色に沈めたまま少しだけ濃くしてある。 以前の #4d463c は明朝の細い線と小さめの字が重なって読みづらかった。 地色とのコントラスト比は 6.0 → 7.6。 */ --muted: #3d372d; --line: #a49c8d; /* 正式なコーポレートブルー。src/lib/logo.tsx の BRAND_BLUE と同じ値。 どちらかを変えるときは両方直すこと */ --blue: #0071bc; /* 文字に使うときのブルー。コーポレートブルー（--blue）は地色の上ではコントラスト比が 3.1しかなく、大きな見出し（24px以上）にしか使えない。リンクの :hover・必須の印など **小さい文字の色はこちらを使う**（地色に対して 5.8、:hover の --stone の上でも 4.7）。 --blue は罫・面・フォーカスの枠と、大きな見出しの差し色にだけ使う */ --blue-text: #00497a; /* ---- 彫り込みの罫（節の切れ目）---- 節と節の境目は「線を引く」のではなく「紙に溝を彫る」見せ方にしている。 照明が左上から当たっている前提で、溝の上の壁が陰になり（--groove-dark）、 下の壁が光を受ける（--groove-light）。この濃淡2本を上下に並べるだけで、 境目がへこんで見える。 地色に対する割合（rgba）で持たせている。ヒーローのように地の色が 場所によって変わるところでも、同じ深さの溝に見せるため。 使い方 — 罫を引きたい辺に、陰の1pxと光の1pxを組で置く。 下辺: border-bottom: 1px solid var(--groove-dark); box-shadow: 0 1px 0 var(--groove-light); （光は箱の外） 上辺: border-top: 1px solid var(--groove-dark); box-shadow: inset 0 1px 0 var(--groove-light); （光は箱の中） 左辺: border-left: 1px solid var(--groove-dark); box-shadow: inset 1px 0 0 var(--groove-light); どの辺でも「陰が上（左）、光が下（右）」の順は変えない。逆にすると へこみではなく盛り上がりに見える。 溝を消すときは border と box-shadow の両方を none にすること （border だけ消すと光の線が1本だけ残る）。 濃さを変えたいときはこの3行の透明度だけを直す。 */ /* **線の意味（全ページ共通。新しく線を引くときもこの3種から選ぶ）** 溝（--groove-dark ＋ --groove-light）… 面の境目だけ。節と節、ヘッダー・フッター、 ページ内の大きな区切り（事業ページの3領域など）。ドロップダウンと引き出しの縁は --groove-dark-strong 影（--header-shadow）… 固定ヘッダーの下端だけ（スクロールすると出る） 濃い実線（1px var(--ink)）… 表・一覧の頭の罫。現在地・リンクの下線 細い実線（1px var(--line)）… 表・一覧の中の行や列の仕切り、小見出しの下線、 部品の枠（画像・ラベル・ドロップダウン・注意書き） 一覧の中の1件だけを強調したいときも線の種類は変えず、字の大きさや余白で差をつける */ --groove-dark: rgba(28, 25, 22, 0.28); --groove-light: rgba(255, 252, 244, 0.3); /* ヘッダーとドロップダウンだけは、面の境目として他より深く彫る */ --groove-dark-strong: rgba(28, 25, 22, 0.55); /* 固定ヘッダーの下端の影。ごく薄い輪郭1本と、下へ柔らかく落ちる影の2層。 none 側は同じ形で透明にしたもの（形を揃えないと影の出入りがなめらかに補間されない） */ --header-shadow: 0 1px 0 rgba(28, 25, 22, 0.06), 0 10px 24px -14px rgba(28, 25, 22, 0.35); /* ドロップダウンの板が浮いて見える落ち影 */ --menu-shadow: 0 18px 32px rgba(28, 25, 22, 0.22); --header-shadow-none: 0 1px 0 rgba(28, 25, 22, 0), 0 10px 24px -14px rgba(28, 25, 22, 0); /* ---- 地の質感 ---- 石の目（粒状感）。body 全面に敷くほか（→ 2. 土台）、トップページの 登場アニメーションの板にも同じものを敷いている（→ 7. ヒーローの登場）。 板が「つるりとした別の材質」に見えないようにするため。 **2か所で使うので、値はここで持つ。** 粒の濃さは使う側の opacity で決める （body も板も 0.06）。 */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* ヘッダーの実測高さ。ロゴ24px＋上下padding（1.35rem×2）＋下罫1px。 ヒーローの高さ計算とアンカー移動先のオフセットに使う。 **src/lib/layout.tsx の を変えたら、ここも足し直すこと。** ずれるとヒーローが一画面に収まらなくなり、ページ内リンクの着地点も狂う。 下罫の光の線（1px）はヘッダーの箱の外に出るので、この高さには含めない */ --header-h: 68px; --header-pad-y: 1.35rem; /* ---- 幅と左右の余白 ---- このサイトは「余白で魅せる」ことを狙いにしているので、中身は画面いっぱいに 広げず、--max-w の幅で中央に置く。 ただし罫線・地色・ヘッダーの下罫は画面の端から端まで通す。中身だけを 揃えて枠線は通す、という組み方にするため、囲みの
は足さず 「左右のpaddingを自動で増やす」やり方にしている（--pad-x）。 --max-w を 1280px にしている理由: ・本文（.text）は 46em ≒ 660px で折り返す設計なので、容れ物を広げても 本文は伸びず、右に空きが残るだけになる ・1480pxにすると、1440〜1536pxのノートPCではほとんど効かず、 「余白で魅せる」効果が出ない ・1280pxなら、その画面幅でも左右にはっきり余白が出る 広げたい / 狭めたいときは、この1行だけを直せばよい。 */ --max-w: 1280px; --gutter: 2rem; --pad-x: max(var(--gutter), (100% - var(--max-w)) / 2); /* 上と同じものの画面幅版。中身の箱の中から画面の端まで戻したいとき （ヒーロー下端の索引の罫線）にだけ使う。100% だと親の内寸を指してしまい、 計算が合わないため。スクロールバーの幅ぶん数pxずれるが、 はみ出した分は overflow: hidden で切れるので見た目には出ない */ --pad-x-vw: max(var(--gutter), (100vw - var(--max-w)) / 2); /* 飾り（ヒーローに沈めた9・セクションの絵）をそろえる右端。 別々に指定すると必ずずれるので、必ずこの1つを使う。 9は文字なので、字形の左右に空き（サイドベアリング）があるぶんだけ 右へ多く出してある（0.06em）。 */ --art-right: var(--pad-x); /* ---- 文字の大きさ ---- ページやセクションごとに数値を書かず、必ずここの名前を使う。 数値を直に書くと、同じ役割の文字がページごとに 0.86rem / 0.88rem / 0.9rem と ばらついていき、直すときに全部を探し回ることになる。 名前は「大・中・小」ではなく役割で付けている。保守する人が 「本文」「注記」「節ラベル」と考えたまま選べるようにするため。 新しい大きさが要るときは、まずこの表のどれかで済まないかを疑う。 */ --fs-display: clamp(2rem, 5.5vw, 4.25rem); /* 下層ページの欧文大見出し */ --fs-hero: clamp(1.7rem, 4.9vw, 4.7rem); /* トップの Aspire to Inspire */ --fs-hero-sub: clamp(1.35rem, 2.9vw, 2.5rem); /* その下の和文 */ --fs-h1: clamp(1.6rem, 3.2vw, 2.3rem); /* 氏名など、節の中の最大 */ --fs-h2: clamp(1.5rem, 2.9vw, 2.15rem); /* 節の見出し */ --fs-statement: clamp(1.5rem, 3.6vw, 2.7rem); /* 碑文体で大きく組む一文 */ --fs-h3: 1.2rem; /* 記事タイトルなど */ --fs-h4: 1.05rem; /* 小見出し */ --fs-lead: 1rem; /* リード文 */ /* 和文は明朝なので、欧文と同じ感覚で小さくすると線が細って読みづらい。 本文まわりは 0.9rem から一段上げてある */ --fs-body: 0.95rem; /* 標準の本文 */ --fs-body-s: 0.88rem; /* カード・一覧の中の本文 */ --fs-note: 0.8rem; /* 補足・キャプション・表の見出し */ --fs-label: 0.7rem; /* 欧文の小ラベル（Cinzel）・ナビ */ --fs-label-s: 0.64rem; /* 小さいラベル・通し番号 */ --fs-micro: 0.6rem; /* 最小。注記の添え字 */ /* 碑文体のラベルに使う字間。大きく組むほど詰め、小さく組むほど開く */ --ls-label: 0.22em; --ls-label-wide: 0.26em; } /* --- 2. 土台 --------------------------------------------------------------- */ * { box-sizing: border-box; } /* ページ内リンクをなめらかに動かす（トップの索引、事業ページの3領域の目次など）。 JavaScriptは使わず、CSSの1行だけで済ませている。 移動先が固定ヘッダーに隠れないための余白は、各要素の scroll-margin-top で取っている。 動きを減らす設定の人には効かせない（10. レスポンシブの末尾で戻している）。 */ html { scroll-behavior: smooth; } /* 慣性スクロール（Lenis。public/scripts/smooth-scroll.js）が動いているときの指定。 Lenis 1.3.26 に同梱の lenis.css から、このサイトで使う分だけを写したもの。 Lenis が html に class="lenis" を付けたときだけ効くので、スクリプトが動かない 環境では何も変わらない。CSSのなめらかスクロールは Lenis と競合するので外す */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } body { margin: 0; color: var(--ink); background: var(--paper); /* 和文は明朝。欧文の本文も明朝が持つセリフのラテン字形で受けて、書体の系統を揃える */ font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; position: relative; /* 中身が1画面に満たないページ（お問い合わせなど）でも、フッターを画面の下端まで送る。 入れないと、内容の短いページだけフッターが画面の途中で終わり、その下に紙の地が 残って「フッターの帯だけ間延びして見える」状態になる。 1画面を超えるページには影響しない（min-height なので自然に伸びる）。 1行目は svh に未対応のブラウザ用の控え。 */ min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } /* 余った高さは本文が受け持つ。フッターは常に最後の節のすぐ下に続く */ main { flex: 1 0 auto; } a { color: inherit; text-decoration: none; } /* 石の目のような粒状感 */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.06; background-image: var(--grain); } /* 美術館の照明のようなヴィネット。中央が明るく、四隅が落ちる。 トップの登場アニメーションの板には**敷いていない**。板と一緒に動くと、 上がり切る最後に「四隅の暗いところ」が画面に居残って気持ち悪く見えるため */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient( 120% 80% at 50% 18%, rgba(255, 252, 244, 0.38), rgba(28, 25, 22, 0) 46%, rgba(28, 25, 22, 0.26) 100% ); } /* 読み上げ専用。見た目には出さないがフォーカスは受ける */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 本文へ飛ぶリンク。キーボードで最初に Tab を押したときだけ左上に出る。 固定ヘッダーのメニューを毎ページ通り抜けずに本文へ入れるようにするため。 マークアップは src/lib/layout.tsx の の先頭 */ .skip-link { position: absolute; top: 0; left: var(--gutter); z-index: 5; padding: 0.75rem 1.1rem; background: var(--paper); border: 1px solid var(--ink); font-size: var(--fs-note); letter-spacing: 0.08em; transform: translateY(-120%); } .skip-link:focus { transform: none; outline: 2px solid var(--blue); outline-offset: 2px; } /* --- 3. ヘッダー ----------------------------------------------------------- */ /* フッターにサイト内リンクを置かない構成なので、スクロール中も常にメニューが 見えるよう固定する */ .site-header { position: sticky; top: 0; background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: var(--header-pad-y) var(--pad-x); /* 下端は線ではなく薄い影で分ける。透明な1pxの下罫は、高さ（--header-h）を変えないために残している */ border-bottom: 1px solid transparent; box-shadow: var(--header-shadow); z-index: 4; } /* スクロールし始めたら影を出す（ページの一番上では影なしで地とつながって見せる）。 CSS の scroll-driven animations で動かしていて JavaScript は使わない。 対応していないブラウザでは上の指定のまま、常に薄い影が出る */ @supports (animation-timeline: scroll()) { .site-header { animation: header-shadow linear both; animation-timeline: scroll(root); animation-range: 0 96px; } } @keyframes header-shadow { from { box-shadow: var(--header-shadow-none); } to { box-shadow: var(--header-shadow); } } .site-nav { /* ドロップダウンの垂直位置をヘッダーの下罫に揃えるため、 ナビ自体をヘッダーの内容領域いっぱいに伸ばしておく */ align-self: stretch; /* 右端に言語の切り替え（.lang-switch）が続くので、ナビはその左に寄せる。 space-between のままだと、ロゴ・ナビ・切り替えの3つが等間隔に散ってナビが中央に来る */ margin-left: auto; display: flex; align-items: center; gap: 1.75rem; font-size: var(--fs-label); letter-spacing: 0.2em; font-weight: 600; } .site-nav > * { display: flex; align-items: center; /* 横並びのときにメニュー名を語の途中で折らない。入りきらない幅では 三本線の引き出しに切り替える（→ 10. レスポンシブの 760px） */ white-space: nowrap; } .site-nav a:hover { color: var(--blue-text); } /* いま見ているページを示す下線。 **ヘッダーに直接並ぶリンクだけに当てる（`>` を外さないこと）。** 子孫まで当ててしまうと、ドロップダウンの中の項目は幅いっぱいの箱なので、 下線が「行の区切りの罫が1本だけ濃い」ようにしか見えず、 さらに padding-bottom のぶんその行だけ背が高くなって並びが崩れる。 ドロップダウンの中の現在地は、下の .nav-menu a[aria-current] で示す */ .site-nav > a[aria-current="page"] { border-bottom: 1px solid var(--ink); padding-bottom: 0.15em; } /* ---- ドロップダウン ---- 「私たちについて」は行き先を持たない見出しで、押すと下の項目が開く。 JSは使わず、隠しチェックボックスと label で開閉している。 マウス（:hover）、キーボード（:focus-within）、タッチ（:checked）の 3通りすべてで開くようにしている。 */ .nav-group { position: relative; align-self: stretch; } .nav-group-toggle { /* キーボードで開けるよう display:none にはしない。 見えないが、Tabキーでフォーカスは受ける */ position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .nav-group-label { cursor: pointer; display: inline-flex; align-items: center; gap: 0.6em; height: 100%; } .nav-group-label:hover { color: var(--blue-text); } .nav-group-toggle:focus-visible ~ .nav-group-label { outline: 2px solid var(--blue); outline-offset: 4px; } /* 開閉を示す小さな山形。開いているときは上を向く */ .nav-group-label::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; } .nav-group:hover .nav-group-label::after, .nav-group:focus-within .nav-group-label::after, .nav-group-toggle:checked ~ .nav-group-label::after { transform: translateY(1px) rotate(-135deg); } .nav-menu { position: absolute; /* ヘッダーの下罫のすぐ下から始める。100% はラベル行の下端なので、 ヘッダーの下padding（--header-pad-y）と溝2px（陰1px＋光1px）を足して押し下げる */ top: calc(100% + var(--header-pad-y) + 2px); left: 50%; transform: translateX(-50%) translateY(-4px); min-width: 16rem; margin: 0; padding: 0; list-style: none; background: var(--paper); border: 1px solid var(--line); border-top: 1px solid var(--groove-dark-strong); /* 1本目は上辺の溝の光、2本目は板が浮いて見せるための影 */ box-shadow: inset 0 1px 0 var(--groove-light), var(--menu-shadow); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group-toggle:checked ~ .nav-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ラベルとメニューの間の隙間を透明な板で埋める。 これが無いと、マウスを下へ動かす途中で hover が切れて閉じてしまう */ .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * (var(--header-pad-y) + 2px)); height: calc(var(--header-pad-y) + 2px); } .nav-menu li + li { border-top: 1px solid var(--line); } .nav-menu a { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 1.1rem; font-size: var(--fs-label); letter-spacing: 0.14em; line-height: 1.5; } .nav-menu a:hover { background: var(--stone); color: var(--blue-text); } /* ドロップダウンの中の現在地。 横の罫は行の区切りに使っているので、現在地は左端の縦の彫り込みで示す。 box-shadow だけで描いて border は使わない — border を足すと、その行の 文字だけ1px右にずれて並びが崩れるため。高さも幅も他の行と変わらない */ .nav-menu a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--ink); } .nav-menu a span { font-family: "Cinzel", serif; font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); flex: none; } /* ---- 言語の切り替え（JA / EN） ---- ヘッダーの右端。ナビとは縦の罫1本で区切り、メニューの項目とは別物に見せる。 見ている言語は濃く（aria-current）、もう一方はリンクとして沈めておく。 狭い画面では三本線の引き出しにしまわず、三本線の左に出したままにする（→ 10. レスポンシブ） */ .lang-switch { margin: 0; display: flex; align-items: center; gap: 0.55em; padding-left: 1.5rem; border-left: 1px solid var(--line); font-family: "Cinzel", serif; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; line-height: 1; color: var(--muted); flex: none; } /* 2つの間の斜線。文字として置くと読み上げで「スラッシュ」と読まれるので、飾りとして出す */ .lang-switch > * + *::before { content: "/"; margin-right: 0.55em; color: var(--line); font-weight: 400; } .lang-switch a:hover { color: var(--blue-text); } /* 押せる範囲を上下に広げる。文字は約11pxしかなく、そのままでは指で押しにくい。 ::before は区切りの斜線に使っているので、こちらは ::after */ .lang-switch a { position: relative; } .lang-switch a::after { content: ""; position: absolute; inset: -1rem -0.5rem; } .lang-switch [aria-current] { color: var(--ink); } /* ---- 開閉ボタン（狭い画面用） ---- 760px以下でヘッダー右端に出る三本線。ドロップダウンと同じくJSは使わない */ .nav-drawer-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .nav-drawer-button { display: none; cursor: pointer; width: 26px; height: 18px; position: relative; flex: none; } /* 押せる範囲を見た目（26×18px）より広げて 44×44px にする。指で押し損ねないように */ .nav-drawer-button::before { content: ""; position: absolute; inset: -13px -9px; } .nav-drawer-button i { position: absolute; left: 0; width: 100%; height: 1px; background: var(--ink); transition: transform 0.24s ease, opacity 0.24s ease; } .nav-drawer-button i:nth-child(1) { top: 0; } .nav-drawer-button i:nth-child(2) { top: 50%; } .nav-drawer-button i:nth-child(3) { top: 100%; } .nav-drawer-toggle:focus-visible ~ .nav-drawer-button { outline: 2px solid var(--blue); outline-offset: 6px; } /* 開いているときは×に変える */ .nav-drawer-toggle:checked ~ .nav-drawer-button i:nth-child(1) { transform: translateY(9px) rotate(45deg); } .nav-drawer-toggle:checked ~ .nav-drawer-button i:nth-child(2) { opacity: 0; } .nav-drawer-toggle:checked ~ .nav-drawer-button i:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* --- 4. フッター ----------------------------------------------------------- */ /* 奥付。主要なサイト内リンクは固定ヘッダー側に集約しているので、 ここに置くのは表記と、ヘッダーには載せない規程ページへのリンクだけ */ .site-footer { border-top: 1px solid var(--groove-dark); box-shadow: inset 0 1px 0 var(--groove-light); padding: 1.75rem var(--pad-x) 2.5rem; position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1.25rem 2.5rem; color: var(--muted); } /* コピーライト。欧文だけなので碑文体で組む */ .site-footer-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-family: "Cinzel", serif; font-size: var(--fs-label-s); letter-spacing: 0.18em; text-transform: uppercase; } /* 規程とLinkedInの組。フッターの左右2分割を保ちたいので、 この2つは1つの箱にまとめて右側に置いている */ .site-footer-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; } /* 規程へのリンク。和文なので碑文体・大文字化・広い字間は使わない （0.62remの和文だと小さすぎて読めないため、少し大きくしている） */ .site-footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; font-size: var(--fs-label); letter-spacing: 0.08em; } /* 押せる範囲を上下に広げる（見た目の位置は変えない）。広げる量は行の間隔の半分までに とどめ、折り返したときに上下の行どうしで押せる範囲が重ならないようにしている */ .site-footer-links a { padding-block: 0.375rem; margin-block: -0.375rem; } /* LinkedIn。マークが塗りつぶしの角丸四角で、細い罫線で組んだ紙面の中では そこだけ黒く沈んで見えるため、既定は少し薄くして :hover で戻す */ .site-footer-social { display: inline-flex; position: relative; color: var(--muted); opacity: 0.75; } /* マークは約17pxなので、押せる範囲だけ 44px 四方に広げる */ .site-footer-social::after { content: ""; position: absolute; inset: -0.85rem; } .site-footer-social svg { display: block; width: 1.05rem; height: 1.05rem; } .site-footer a:hover { color: var(--blue-text); } .site-footer-social:hover { opacity: 1; } /* --- 5. セクションの型 ----------------------------------------------------- */ .section { /* 固定ヘッダーの高さぶん、アンカー移動先を下げる */ scroll-margin-top: calc(var(--header-h) + 1px); padding: 4.5rem var(--pad-x); border-bottom: 1px solid var(--groove-dark); box-shadow: 0 1px 0 var(--groove-light); position: relative; z-index: 3; /* 地に敷いた絵（.motif）を、この節の外へはみ出させない。 端で切れることで、絵が画面の外へ続いているように見える。 hidden ではなく clip にしている。hidden だと節がスクロールの容れ物になり、 中の sticky（事業ページの目次）が効かなくなるため */ overflow: clip; } /* 最後の節の下はフッターの溝が受けるので、こちらは消す。 border だけ消すと光の線が1本残るため box-shadow も一緒に消す */ .section:last-of-type { border-bottom: none; box-shadow: none; } /* ---- 罫を本文の幅で止める節 ---- 節の切れ目の罫は画面の端から端まで通すのが既定（上の .section）。 この class を付けた節だけ、罫を本文の箱の左右の端で止める。 /people の1人ずつの区切りや /offerings の領域の区切りと同じ幅になり、 ページの中で縦の線が1本に見える。 罫は border ではなく ::after で引く。border だと節そのものの幅で引かれ、 端まで通ってしまうため。左右を --pad-x ぶん空けると、中身と同じ位置に来る （--pad-x は画面が広いほど増えるので、中身が --max-w で中央に来るときも揃う）。 */ .section-rule-inset { border-bottom: none; box-shadow: none; } /* 溝そのものを高さ2pxの板として置く。陰を上辺の border で、 光をその内側1pxに inset の影で引く（節の中に収めたいので外に出す影は使わない） */ .section-rule-inset::after { content: ""; position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 0; height: 2px; border-top: 1px solid var(--groove-dark); box-shadow: inset 0 1px 0 var(--groove-light); } /* ---- 高さを揃えた節 ---- 節の高さを1画面ぶんに揃え、中身をその中で上下中央に置く。 節ごとの分量の差は、上下の余白の差として現れる。同じ高さの面が続くことで スクロールの刻みが一定になり、余白が効く。 いまはトップページの5つの節だけに付けている。下層ページは分量の差が大きく、 短い節が空白だらけになるため（付けたい節に class を足せば同じように効く）。 高さを変えたいときはこの2行を直す。1行目は svh に未対応のブラウザ用の控え。 min-height なので、中身が1画面を超える節は自然に伸びる。 */ .section-screen { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); } .section.section-screen { display: flex; flex-direction: column; justify-content: center; } /* リード帯（Overview）は2列のグリッドなので、flex にせず行ごと中央に置く */ .lead.section-screen { align-content: center; } /* 左に欧文ラベル、右に本文。全ページで共通の組み方 */ .split { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.5rem; /* 既定の stretch だと左のラベルが行全体の高さに広がり、 内側の align-items:center で上下中央に落ちてしまう */ align-items: start; } /* ラベルを置かない節。左のラベル列は空けたまま、内容の位置を他のページと揃える。 空の要素を置かずに済むよう、内容を2列目に寄せている。 （狭い画面で1列になるときの戻しはレスポンシブの節にある） */ .split-indent > * { grid-column: 2; } .section-label { font-family: "Cinzel", serif; font-size: var(--fs-label); letter-spacing: var(--ls-label-wide); text-transform: uppercase; font-weight: 700; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 0.6em; } /* 黒のソリッドブロックを記号として使う */ .section-label::before { content: ""; width: 7px; height: 7px; background: var(--ink); flex: none; } .heading { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; margin: 0 0 1.5rem; } .subheading { font-size: var(--fs-h4); font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; margin: 2.5rem 0 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); } /* 本文。行長は約46em（660px）で止める。1行が長すぎると、行末から次の行頭へ 視線を戻すときに位置を見失いやすいため。 */ .text { font-size: var(--fs-body); line-height: 2.05; color: var(--muted); max-width: 46em; margin: 0 0 1.1rem; } /* 行長の上限を外して列の幅いっぱいまで伸ばす。 いまは /people の代表の節（メッセージと経歴）だけで使っている */ .text-wide { max-width: none; } .text:last-child { margin-bottom: 0; } /* 碑文体で大きく組む一文。面ではなく語で効かせる */ .statement { font-family: "Cinzel", serif; font-size: var(--fs-statement); font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; margin: 2.5rem 0; } .statement .accent, .heading .accent { color: var(--blue); } /* --- 6. 部品 --------------------------------------------------------------- */ .arrow-link { font-family: "Cinzel", serif; display: inline-flex; align-items: center; gap: 0.7em; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 0.35rem; } .arrow-link:hover { color: var(--blue-text); border-bottom-color: var(--blue); } /* 矢印リンクだけを入れた段落（各ページの「〜を見る →」）。 ふつうの段落のままだと、本文の行の高さ（line-height）がリンクの上に余白として 足されて約5px下がる。行の箱を作らせず、リンクの高さぴったりにする */ p:has(> .arrow-link:only-child) { display: flex; } /* 矢印リンクの段の上の余白。以前は各ページに style="margin:…" で直書きしていたが、 CSP で style 属性を許すと 'unsafe-inline' が要るので、ここに集めた（src/worker.ts の CSP）。 値は直書きしていたときのまま。揃えたくなったら、ここの数値だけを直せばよい */ .link-row { margin: 1.75rem 0 0; /* トップの各節の末尾 */ } .link-row-s { margin-top: 1.5rem; /* 404 */ } .link-row-m { margin-top: 2rem; /* /company の Business */ } .link-row-l { margin-top: 2.25rem; /* /offerings の各領域から事例へ */ } .link-row-back { margin-top: 3rem; /* 一覧へ戻る（/people/{slug}・お知らせ詳細） */ } .link-row-back-l { margin-top: 3.5rem; /* /offerings/cases から概要へ戻る */ } /* ロゴの SVG。インラインの既定（baseline 揃え）だと下に隙間ができるので block にする */ .logo { display: block; } /* 原稿待ちなど、社内向けの注意書きを囲む枠。 本文と同じ色のまま枠で囲むだけに留める（黄色い帯のような警告色は使わない — 誌面の組みから浮くうえ、公開前に外し忘れたときに目立ちすぎる）。 いまは /offerings の原稿待ちの領域と /offerings/cases で使っている。 **公開までに中身が埋まれば、この class を使う箇所は無くなる。** */ .notice { font-size: var(--fs-note); line-height: 1.9; color: var(--muted); border: 1px solid var(--line); padding: 0.9rem 1.1rem; margin: 0 0 1.1rem; max-width: 46em; } /* 罫線で組んだ定義リスト。会社概要とお問い合わせで使う */ .info-table { margin: 0; border-top: 1px solid var(--ink); } .info-table > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); } .info-table dt { font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.1em; line-height: 1.8; } .info-table dd { margin: 0; font-size: var(--fs-body); line-height: 1.9; color: var(--muted); } /* 箇条書き。行頭にブルーの小さな四角を置く */ .marker-list { list-style: none; margin: 0; padding: 0; } .marker-list li { font-size: var(--fs-body-s); line-height: 1.9; color: var(--muted); display: flex; gap: 0.8em; padding: 0.3rem 0; } .marker-list li::before { content: ""; width: 4px; height: 4px; background: var(--blue); flex: none; margin-top: 0.75em; } /* ---- セクションの絵（モチーフ）---- 画像は public/images/motifs/*.jpg、差し込みは src/lib/motifs.tsx。 ここでは「どこに・どれだけの大きさで・どう沈めるか」だけを決める。 置き方の決まり: ・本文の後ろに沈める（z-index: -1）。.section が重なりの基準なので、 ほかのセクションへはみ出さない ・写真としては見せない。色を抜き、少しぼかし、四辺を溶かして、 面そのものに彫られているように見せる ・本文が乗っていない側に置く。文字の配置を動かさずに済ませるため ・トリミングは object-fit: cover に任せる。元画像を切り直さなくてよい ・**大きさと位置を画面サイズ（vw / vh / %）だけに預けない。** 見出しは clamp で上限が決まっているので、絵だけを画面比で伸ばすと、 画面を広げたときに絵だけが巨大化して文字から取り残される。 右端は中身の右端（--pad-x）に、上下は中身と同じく中央（top:50%）に そろえる。大きさは節の高さいっぱい（height: 86%前後）に取りつつ、 min() で rem の上限を付けて頭打ちにしてある。 幅は aspect-ratio まかせ（元画像の比率をそのまま書く） ・狭い画面では本文と重なりやすいので、さらに薄くするか消す（10. レスポンシブ） ・お知らせの節には置かない。日付・見出し・要約が並ぶ密度の高い面で、 後ろに絵を入れると読みにくくなるため ------------------------------------------------------------------------- */ .motif { position: absolute; z-index: -1; pointer-events: none; /* 元画像の縦横比に関わらず、この箱の形に切り取る */ overflow: hidden; } /* レリーフを地に沈めるための加工。 1. 色を抜いて石の地色に寄せる（grayscale で抜き、sepia で暖色の石に戻す） 2. **階調をつぶして明るい側へ寄せる**（contrast を大きく下げ brightness で持ち上げる） 3. わずかにぼかし、輪郭を主張させない 4. 四辺を円形に溶かす。四角い輪郭が残ると、とたんに「貼った写真」に見える 2 が読みやすさの要。石の彫りの影をそのまま敷くと、文字の裏に濃い画素が来て 本文が読めなくなる。影を潰して明るい側に寄せてから薄く重ねることで、 絵は見えたまま、文字との明暗差（コントラスト比）は 4.9 以上を保っている。 **opacity を上げるとすぐ読みにくくなるので、上げるなら 0.5 まで。** */ .motif img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; filter: grayscale(1) sepia(0.3) contrast(0.38) brightness(1.6) blur(0.8px); /* 四辺の溶かし方。右端だけはほとんど溶かさない。 以前は真円のぼかしで右端も大きく消していたため、絵の実体が左へ寄って見え、 同じ右端にそろえたはずの9とずれて見えていた。 横は左からゆっくり現れて右端の直前まで残し、縦は上下を均等に溶かす。 2枚のマスクの重なりを取る（intersect）ことで、この2方向を両立させている。 */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 40%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; } /* 川・火・列柱は背景を抜いた透過画像で、濃い画素をあらかじめ落としてある。 影を潰す必要がないので階調はそのまま使い、切り抜いた形を切らずに収める */ .motif-river img, .motif-flame img, .motif-column img { object-fit: contain; opacity: 0.7; filter: grayscale(1) sepia(0.2) blur(0.4px); } /* 川（Overview） */ .motif-river { right: var(--art-right); top: 50%; transform: translateY(-50%); height: min(86%, 52rem); aspect-ratio: 900 / 728; } /* 火（会社理念）。縦に長い絵なので、他より少しだけ高くまで伸ばす */ .motif-flame { right: var(--art-right); top: 50%; transform: translateY(-50%); height: min(90%, 56rem); aspect-ratio: 820 / 982; } /* 列柱（事業・サービス）。中身の右端にそろえ、上下中央。 事業カードの背景を透明にしてあるので、3本の柱が3枚のカードの後ろに透ける */ .motif-column { right: var(--art-right); top: 50%; transform: translateY(-50%); height: min(86%, 52rem); aspect-ratio: 1000 / 949; } /* 月桂冠。いまはどのセクションにも置いていない（メッセージの節は顔写真が 絵の役割を果たすため外した）。下層ページに入れるとき用に置き場所だけ残す。 冠は画面の中央にあり、切ると葉先が欠けるので、箱の比率を元画像（900:801）に 合わせて切らずに収める */ .motif-laurel { right: var(--art-right); top: 50%; transform: translateY(-50%); height: min(86%, 52rem); aspect-ratio: 900 / 801; } /* 光。いまはどのセクションにも置いていない。 下層ページに入れるとき用に置き場所だけ決めてある */ .motif-rays { right: var(--art-right); top: 50%; transform: translateY(-50%); height: min(86%, 52rem); aspect-ratio: 900 / 615; } /* --- 7. トップページ固有 --------------------------------------------------- */ /* 最初の一画面は「見出し＋大きなビジュアル」で構成する。本文とリンクは ヒーローの下のリード帯に降ろした。下端の索引はこの先に続く章立てを示す */ .hero { position: relative; overflow: hidden; z-index: 3; border-bottom: 1px solid var(--groove-dark); box-shadow: 0 1px 0 var(--groove-light); padding: 4.5rem var(--pad-x) 0; /* 見出しの面と9の面を分けず、上から下へ一続きの石として敷く */ background: linear-gradient(172deg, var(--paper) 0%, #c6bfb1 38%, #b5ac9b 72%, #a49b89 100%); /* 固定ヘッダーの高さを引いて、下端の索引まで含めてちょうど一画面に収める */ min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; } /* 写真を差し込む前提の場所。帯として区切らず、ヒーロー全面に敷いて 見出しごと1枚の絵にしている。写真に差し替えるときはこの層を入れ替える */ .hero-plate { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* 面に沈めた9。輪郭を主張させず、右下に寄せて端を画面の外へ逃がす。 大きさも位置も、画面の端ではなく**中身（見出し）**を基準にする。そうしないと、 画面を広げた（＝ブラウザを縮小表示した）ときに9だけが離れていって取り残される。 ・大きさ: 画面幅に比例させつつ、中身の最大幅（--max-w）で頭打ちにする。 見出しは clamp で上限が決まっているので、9だけ vw のまま伸ばすと巨大化する ・左右: 画面の右端ではなく、**中身の右端**（--pad-x）にそろえる ・上下: ヒーローの下端ではなく、見出しと同じ**上下中央**を基準にする はみ出した分は .hero-plate の overflow: hidden で切れる。 */ .hero-plate-nine { position: absolute; right: calc(var(--art-right) - 0.06em); top: 50%; /* 中央からどれだけ下げるか。下げすぎると9の足が索引の帯に切られる。 少しだけ下へはみ出させて「面から続いている」ように見せるのが狙いなので、 切れ具合を調整したいときはこの1行を触る */ transform: translateY(-30%); font-size: min(88vw, calc(var(--max-w) * 0.88)); font-weight: 900; line-height: 0.72; letter-spacing: -0.04em; margin: 0; color: rgba(22, 24, 26, 0.06); user-select: none; } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: start; width: 100%; /* 上下 auto で、索引を除いた残りの高さの中央に置く */ margin: auto 0; } /* 碑文体（Cinzel）のスローガンを主にして大きく組み、和文はその下に添える。 Cinzelは大文字前提の書体なので、大きく使うほど字間は詰め気味にする */ .hero-eyebrow { font-family: "Cinzel", serif; font-size: var(--fs-hero); font-weight: 700; letter-spacing: 0.04em; line-height: 1.06; text-transform: uppercase; color: var(--ink); margin: 0; } .hero-headline { font-size: var(--fs-hero-sub); font-weight: 600; letter-spacing: 0.06em; line-height: 1.7; margin: 1.1rem 0 0; max-width: 28ch; color: var(--muted); } .hero-headline .accent { color: var(--blue); } /* 縦組みの和文 */ .hero-vertical { writing-mode: vertical-rl; font-size: var(--fs-lead); font-weight: 600; letter-spacing: 0.32em; color: var(--ink); border-right: 1px solid var(--line); padding-right: 1.1rem; margin: 0; max-height: 22em; } /* ヒーロー下端の索引（誌面の目次）。ヘッダーの和文ナビとは別に、 欧文・番号付きで組む */ .hero-index { position: relative; z-index: 1; margin: 0 calc(-1 * var(--pad-x-vw)); padding: 1.1rem var(--pad-x-vw) 1.35rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 2.5rem; } .hero-index a { font-family: "Cinzel", serif; display: flex; align-items: center; gap: 0.9rem; /* 押せる範囲を上下に広げる（見た目の位置は変えない）。文字だけだと高さ15pxしかない */ padding-block: 0.35rem; margin-block: -0.35rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink); } .hero-index a:hover { color: var(--blue-text); } .hero-scroll { font-family: "Cinzel", serif; margin: 0 0 0 auto; display: flex; align-items: center; gap: 0.7em; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--muted); } /* 細い罫の上を明部が流れるだけの、静かなスクロール誘導 */ .hero-scroll i { display: block; width: 40px; height: 1px; background-color: var(--line); background-image: linear-gradient(90deg, transparent, var(--blue), transparent); background-size: 60% 100%; background-repeat: no-repeat; animation: scroll-sweep 2.4s ease-in-out infinite; } @keyframes scroll-sweep { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } } /* ---- ヒーローの登場（トップページを開いた瞬間の1回だけ）-------------------- ロゴを載せた石の面が1枚かぶさっていて、それが溶けて消えてページが現れる。 ロゴが先に消え、無地の面だけの間をはさんでから面が溶ける。2.5秒で終わる。 **すべて html[data-intro] の下に書くこと。** この属性は src/lib/layout.tsx のインラインスクリプトが、トップページを 「直接開いた」「リロードした」ときにだけ に付ける。 サイト内の他ページから遷移してきたときは付かない＝この節は丸ごと効かない。 動きを嫌う設定（prefers-reduced-motion: reduce）でも付かないので、 ここに @media の打ち消しは書いていない（判定はスクリプト側の1か所だけ）。 属性が付かなければ下の指定は一切当たらず、ページは完成形のまま出る。 板も出ない（既定が display: none）。 つまり **スクリプトが動かなくても中身が消えることはない。** 新しく animation を足すときも、この性質（初期値＝完成形）を壊さないこと。 時間の設計: 0.00s 面の上でロゴが浮かび上がる（0.25s で出そろう） 0.62s ロゴがわずかに上へ動きながら消える（0.90s で消え切る） 0.90s **無地の面だけの間**（0.3秒） 1.20s 面が溶け始める（0.9秒かけて透ける。2.10s で消え切る） 1.50s 面に沈んだ9が濃くなり始める（面が消えたあとも続く） 1.90s 索引の上罫が引かれる（2.40s で引き終わる） **一度に起きることを1つに保つ。** ロゴ → 無地 → 面が溶ける → 罫、と順に1つずつ。 重ねると、それぞれは弱い動きでも全体が騒がしくなる。 とくにロゴの消えぎわと面の溶け始めは重ねないこと（→ 無地の0.3秒）。 全体を短くしたいときは、まずロゴを見せている時間（0.62s の位置）を詰める。 次に面の duration。**無地の0.3秒と、面が溶ける0.9秒は詰めない** （どちらも実機で見て決めた値）。 **src/lib/layout.tsx の setTimeout（3000ms）より後ろに演出をはみ出させないこと。** もとは「石板が上へ引き上がる」動きだったが、フェードに変えた。 ヒーロー上端の色は面と同じ --paper なので、**動かすと境目が見えないのに 境目が無いと動きが読めない**という矛盾が起きる。溝や落ち影で境目を作ると、 こんどはそれが最後まで画面に残って暗く見えた。溶かすなら境目が要らない。 索引の罫を引く時刻を「板の下端が索引を通り過ぎる時刻」に合わせる必要も無くなった。 **消え方は ease-in にすること（ease-out にしない）。** 薄い幕が最後まで うっすら残ると、上の「最後が暗い」と同じ気持ち悪さになる。 不透明のまま持たせて、最後に一気に抜く。 **ヒーローの文字には animation を当てていない。** 面が透けるまでは見えず、 透けてくる途中で下の文字が動くと二重写しになって濁るため。 面が消えた時点で完成形が現れる＝面そのものが「起きる」役をやっている。 索引の罫だけは、締めとして最後に1本引いている。 */ /* かぶせる面。ヘッダーごと画面全部を覆う。 **markup は src/lib/layout.tsx にあり、 の直下に置いてある。** .hero の中に入れてはいけない — .hero 自身が z-index: 3 で重なりの文脈を 作るので、中に入れると z-index をいくら上げてもヘッダーの下から出られず、 ロゴが大小2つ同時に見えてしまう。 既定は display: none。data-intro が付いたときだけ出る。 消えたあとも（属性が外れる2.4秒まで）箱そのものは画面に残るが、 pointer-events: none なのでクリックを塞がない。 */ .hero-blind { display: none; } html[data-intro] .hero-blind { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; /* .site-header が 4。それより上に出してヘッダーごと覆う */ z-index: 5; /* 飾りなので、出ている間もクリックを吸わせない */ pointer-events: none; background: var(--paper); color: var(--ink); animation: intro-blind 0.9s ease-in 1.2s both; } /* **ease-in にすること。** 不透明のまま持たせて最後に一気に抜く。 ease-out にすると薄い幕が最後までうっすら残り、 「全体がぼんやり暗い時間」ができて気持ち悪くなる。 溶ける速さを変えたいのは duration（0.9s）だけ。 **ただしここを変えたら、この下の索引の罫の遅延（1.9s）も直すこと。** 遅延の 1.2s には意味がある。ロゴが消え終わるのが 0.9s なので、 **0.3秒ぶん「ロゴが無い無地の面」だけの間が空く。** ここを詰めてロゴの消えぎわと重ねると、ロゴが薄くなる途中でもう下の文字が 透けはじめ、2つのことが同時に起きて騒がしくなる。この0.3秒は詰めないこと。 */ @keyframes intro-blind { from { opacity: 1; } to { opacity: 0; } } /* 面に body と同じ石の目を敷く。無地のままだと別の材質に見えてしまう。 position: absolute にしているのは、flex の子（＝ロゴの隣）になるのを防ぐため。 ヴィネット（照明の陰影）は敷いていない。四隅が暗いので、 溶けていく途中で「暗い四隅だけが最後まで残る」ように見えるため。 */ html[data-intro] .hero-blind::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.06; } /* 面に載せたロゴ。大きさは実データのSVGの height 属性より CSS が優先される */ html[data-intro] .hero-blind svg { /* 石の目より前に出す */ position: relative; width: min(46vw, 380px); height: auto; animation: intro-blind-logo 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes intro-blind-logo { 0% { opacity: 0; transform: translateY(10px); } 28% { opacity: 1; transform: translateY(0); } /* しばらく見せて止める（0.25s〜0.62s の約0.4秒）。ここから消える。 動きはごくわずかに上へ（18px）。面がフェードで消えるので、 ロゴだけ大きく動かすと2つの別の動きに見えてしまう。 消える区間だけ加速させたいので、この行でタイミングを差し替える （キーフレームごとに指定できる） */ 69% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.75, 0.2); } 100% { opacity: 0; transform: translateY(-18px); } } /* 面に沈んだ9。透明度だけを動かす。 **transform は使わない** — .hero-plate-nine の transform は位置決め （translateY(-30%)）に使われていて、ここで上書きすると9が飛ぶ */ html[data-intro] .hero-plate-nine { animation: intro-carve 1s ease-out 1.5s both; } @keyframes intro-carve { from { opacity: 0; } to { opacity: 1; } } /* 索引の上罫を左から引く。 本物の border-top は引き終わるまで透明にしておき、時間が来たら戻す （steps(1, end) なので途中で薄く見えることはない）。 戻ったあとは、この線と下の ::before が同じ位置・同じ色で重なる */ html[data-intro] .hero-index { animation: intro-rule-hold 2.4s steps(1, end) both; } @keyframes intro-rule-hold { from { border-top-color: transparent; } to { border-top-color: var(--line); } } html[data-intro] .hero-index::before { content: ""; position: absolute; /* 親の padding ボックスの外側1px＝border-top の位置 */ top: -1px; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left center; /* 面が薄くなり切るころに引き始める（面のフェードは 1.2s + 0.9s = 2.1s で終わる）。 ease-in なので終盤はほとんど透けていて、線が濁ることはない。 **面の duration / delay を変えたら、この 1.9s も合わせて直す** */ animation: intro-draw 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1.9s both; } @keyframes intro-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* 01・02・03 と Scroll には animation を当てていない。 以前は順に灯らせていたが、**面が消えたあとに次々と何かが光るのは騒がしい。** 面が消えた時点でページは完成形で出ていて、そこに罫が1本引かれるだけにしてある。 索引に動きを足したくなったら、まずここを読むこと。 */ /* ヒーローから降ろした本文とリンク */ .lead { position: relative; z-index: 3; /* 地に敷いた川（.motif-river）を、この帯の外へはみ出させない */ overflow: hidden; padding: 3rem var(--pad-x) 3.25rem; border-bottom: 1px solid var(--groove-dark); box-shadow: 0 1px 0 var(--groove-light); display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 2.5rem; align-items: start; } /* Overviewの導入文。中の

は「段落」ではなく「行」で、 home.ts の hero.body の1要素がそのまま1行になる。 他の本文（.text）より幅を広く取っているのは、1行を折り返させないため。 折り返すと行の切れ目が読み取れなくなり、ただの長文に戻ってしまう。 行の間隔は margin ではなく行送り（line-height）で作っている。 marginだと行が折り返した狭い画面で間隔が変わってしまうため。 広い画面の「行と行の間」と、狭い画面の「折り返した行の間」を 同じ息づかいに保つ、という狙い。 */ .lead-body { font-size: var(--fs-body); line-height: 2.4; color: var(--muted); max-width: 50em; margin: 0 0 2rem; } .lead-body p { margin: 0; } /* 英語版の導入文は1行ずつではなく段落で組む（英文は行を意味の切れ目で揃えられないため）。 狭い画面で行をつなぐ指定（→ 10. レスポンシブの .lead-body p）も当てない。 当てると、英文には句読点の後ろの空白が無いので単語がくっつく */ html[lang="en"] .lead-body p { display: block; } html[lang="en"] .lead-body p + p { margin-top: 1em; } /* 本文の下の矢印リンク。段落に包んでいないので、そのままだと行の高さ（line-height）が リンクの上に余白として足される（→ 6. 部品の「矢印リンクだけを入れた段落」と同じ理由）。 行の箱を作らせず、リンクの高さぴったりにする */ .lead-body + .arrow-link { display: flex; width: fit-content; } /* 事業内容: 3列のモジュール。外枠では囲まず、上の濃い罫と下の細い罫で挟み、 列の間だけを彫った溝の縦線で仕切る（目次・表と同じ「線で区切る」組み方）。 以前は外枠＋各セルの枠で囲んでいたが、カード型のUIに見えて誌面から浮いていた */ .modules { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); } /* カード全体が /offerings へのリンク（トップページ）。 下端に引いた罫とその右端の矢（.module-foot / .module-arrow）が、 リンクであることの目印 */ .module { /* 背景を敷かない。地に置いた列柱のレリーフをカードごしに透かすため。 仕切りは各セルの左と上の罫で引き、1pxぶん手前へずらして外周の枠に重ねている （以前は gap 1px と親の地色で線を作っていたが、その方法だとセルを 透明にできない） */ position: relative; padding: 1.75rem 1.75rem 1.5rem; display: flex; flex-direction: column; min-height: 210px; transition: background 0.24s ease; } /* 両端の列は上下の罫の端に文字を揃える（内側に寄せると罫と文字の端がずれて見える） */ .module:first-child { padding-left: 0; } .module:last-child { padding-right: 0; } /* 列の間の仕切り。一覧の中の仕切りなので細い実線（→ 1. トークンの「線の意味」）。 上下の罫に突き当てるとT字の継ぎ目が目立つので、上下を空けて罫から離している */ .module + .module::before { content: ""; position: absolute; left: 0; top: 1.75rem; bottom: 1.5rem; border-left: 1px solid var(--line); } /* 触れたときは面を塗らず、見出しの色と矢の伸びだけで示す（両端の列は余白が片側しかなく、 面を塗ると左右で形がそろわないため） */ a.module:hover h3 { color: var(--blue-text); } /* 連番（01・02・03）。トップの索引・事業の3枚組、事業ページの目次・見出しの4か所で使う。 **どこでも同じ見た目・同じ置き方にする:** 碑文体の小ラベル・沈んだ色で、言葉の左に置き、 縦の中央で揃え、間は 0.9rem（置く側の要素を flex・align-items: center・gap: 0.9rem にする） */ .num { flex: none; font-family: "Cinzel", serif; font-size: var(--fs-label-s); letter-spacing: var(--ls-label); font-weight: 700; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; } .module h3 { display: flex; align-items: center; gap: 0.9rem; font-size: var(--fs-h4); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 1rem; line-height: 1.5; } .module-summary { font-size: var(--fs-body-s); line-height: 1.9; color: var(--muted); margin: 0; } /* カードの下端。誌面の「続きはこちら」の罫のように、カードの幅いっぱいに 彫った溝を1本引き、その右端に矢の穂を置く。 以前は22px角の枠にシェブロンを入れていたが、UIのボタンに見えて 誌面の組みから浮いていた */ .module-foot { margin-top: auto; padding-top: 1.4rem; display: flex; align-items: center; gap: 0.65rem; } /* 矢は本文の左端に揃えて置くだけにする（以前は矢の左に罫を伸ばしていたが、 列ごとに横線が増えて騒がしかったのでやめた） */ /* 矢。軸（この要素の上罫）と穂（::after）の細い線だけで描く */ .module-arrow { position: relative; flex: none; height: 0; width: 26px; border-top: 1px solid var(--ink); transition: width 0.28s ease, border-color 0.28s ease; } /* 穂は正方形の上辺と右辺だけを残して45度回す。回転の軸を右上角＝2辺の 交点に置くことで、穂の先が軸の右端にぴたりと乗る。 top を -1px にしているのは、軸が引かれている1pxの行に穂の付け根を重ねるため （0 だと軸の1pxぶん下にずれて、継ぎ目が段になる） */ .module-arrow::after { content: ""; position: absolute; right: 0; top: -1px; width: 7px; height: 7px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform-origin: 100% 0; transform: rotate(45deg); transition: border-color 0.28s ease; } /* リンクになっているカードでは、矢が罫を食べて伸び、色が差し色に変わる */ a.module:hover .module-arrow { width: 40px; border-top-color: var(--blue); } a.module:hover .module-arrow::after { border-top-color: var(--blue); border-right-color: var(--blue); } /* お知らせ一覧 */ .news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .news-list li { border-bottom: 1px solid var(--line); } .news-list a { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 2em; gap: 1.5rem; align-items: baseline; padding: 1.25rem 0; } .news-list a:hover { color: var(--blue-text); } .news-list a:hover .news-mark { color: var(--blue-text); transform: translateX(4px); } .news-date { font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; } .news-list :is(h2, h3) { font-size: var(--fs-body); font-weight: 700; line-height: 1.6; margin: 0 0 0.3rem; } .news-list p { font-size: var(--fs-note); line-height: 1.75; color: var(--muted); margin: 0; } .news-mark { font-size: var(--fs-note); color: var(--muted); text-align: right; transition: transform 0.2s ease; } /* サムネイル付きの一覧。/news だけで使い、トップページのお知らせには付けない。 記事ページ本体には画像を出していない（画面いっぱいに出て本文が遠くなったため）。 並びは「日付・画像・タイトル・矢印」。画像があると文字の基準線で揃えられないので、 上端で揃える */ .news-list-thumbs a { grid-template-columns: 8.5em 10rem minmax(0, 1fr) 2em; grid-template-areas: "date thumb body mark"; align-items: start; } .news-list-thumbs .news-date { grid-area: date; padding-top: 0.2rem; } .news-list-thumbs .news-thumb { grid-area: thumb; } .news-list-thumbs .news-body { grid-area: body; } .news-list-thumbs .news-mark { grid-area: mark; } /* 枠は 16:10。切り抜きは src/index.tsx で画像を取るときに済ませてある */ .news-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--line); /* 写真は地色（石の面）より明るく浮きやすいので、明るさを落として地に沈める */ filter: sepia(0.12) contrast(1.02) brightness(0.8) saturate(0.85); } /* --- 8. 下層ページ固有 ----------------------------------------------------- */ /* 下層ページの冒頭。トップのヒーローほど大きく取らず、一画面は使わない。 **地色は敷かない。罫線も引かない。** このサイトの地は、粒状感とヴィネットで作ったマットな石の面で、面全体が均一に 沈んでいることで質感が成り立っている。ここだけ背景を持たせると、 グラデーションでも単色でも、その1枚だけが上に載った板のように浮いてしまう。 区切りは、大きな碑文体の見出しと、下の節が持つ4.5remの余白だけで足りている。 */ .page-head { position: relative; z-index: 3; padding: 4.5rem var(--pad-x) 3.5rem; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.5rem; align-items: start; } .page-title { font-family: "Cinzel", serif; font-size: var(--fs-display); font-weight: 700; letter-spacing: 0.03em; line-height: 1.05; text-transform: uppercase; margin: 0; } .page-title-ja { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.24em; color: var(--ink); margin: 0; } /* パン屑は2段組みの上に横いっぱいで置く。狭い左列に入れると折り返しが汚くなる */ .page-head .breadcrumb { grid-column: 1 / -1; } .page-lead { font-size: var(--fs-body); line-height: 2.05; color: var(--muted); max-width: 46em; margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); } /* パン屑。現在地の把握と検索エンジン向けに、全下層ページに置く */ .breadcrumb { margin: 0 0 1.25rem; font-family: "Cinzel", serif; /* --fs-micro（9.6px）では明朝の和文（「会社概要」など）が潰れて読めないので、一段上げている */ font-size: var(--fs-label-s); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6em; } /* 押せる範囲を上下に広げる（見た目の位置は変えない） */ .breadcrumb a { display: inline-block; padding-block: 0.5rem; margin-block: -0.5rem; } .breadcrumb li { display: flex; align-items: baseline; gap: 0.6em; } .breadcrumb li + li::before { content: "/"; color: var(--line); } .breadcrumb a:hover { color: var(--blue-text); } /* ---- 役員紹介 ---- 1人1行の組み。経歴が長いので2段組みにはしない。 顔写真は置かず（代表だけが上の節で写真を持つ）、左の列に氏名と肩書、 右の列に経歴を流す。左列の幅は「取締役エグゼクティブパートナー」が 1行に収まる値にしてある。 囲みは作らず、上端の太い罫と1人ずつの下罫だけで区切る。 会社概要の .info-table・お知らせの .news-list と同じ組み方で、 地色も左右の余白も持たせない。そうすると各行の左端が 節の見出しと同じ位置に揃い、ページ全体で縦の線が1本に見える */ .members { display: grid; border-top: 1px solid var(--ink); } .member { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; padding: 2rem 0; align-items: start; border-bottom: 1px solid var(--line); } /* 代表の行だけ、他の4人より大きく組んで先頭に立たせる。 囲みは作らず、写真・欧文の肩書・氏名の大きさ・下の彫り込み罫の4つで差をつける。 左の列の幅は他の行と変えていない。変えると経歴の左端が代表の行だけずれて、 5人を貫く縦の線が折れてしまうため。 ふつうの行は「左に氏名、右に経歴」だが、代表は左を写真だけにして、 氏名と経歴を右の列に積む。写真の下に氏名をぶら下げると、 右の列の経歴が先に終わって右下に大きな空白が残るため。 */ .member-lead { padding: 2.5rem 0 2.75rem; row-gap: 1.6rem; } .member-lead .member-photo { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; } .member-lead .member-id { grid-column: 2; grid-row: 1; } .member-lead .member-bio { grid-column: 2; grid-row: 2; } /* 欧文の肩書。代表にだけ付く。Cinzelの小ラベルは、このサイトでは .section-label と同じく「ここが顔である」ことを示す印として使っている */ .member-position-en { font-family: "Cinzel", serif; font-size: var(--fs-label); letter-spacing: var(--ls-label-wide); text-transform: uppercase; font-weight: 700; color: var(--ink); margin: 0 0 0.6rem; } /* 節の中で氏名が最大になる大きさ（--fs-h1）は、もともとこの用途のトークン。 代表だけでなく全員をこの大きさで組む（表記を揃えるため。代表との差は写真と行の余白でつける） */ .members .member-name { font-size: var(--fs-h1); letter-spacing: 0.06em; line-height: 1.25; margin-bottom: 0.5rem; } /* 顔写真。写真を持つのは代表だけなので、他の4人の行は氏名から始まる。 枠も台紙も付けず、写真そのものを置く。細い罫で囲うと額縁に見えて、 囲みをやめて罫線だけで組んだこのページの中で1か所だけ浮くため。 地の色との境目は、下の filter で写真を紙の色味に寄せることで馴染ませている */ .member-photo { display: block; margin-bottom: 1.35rem; } .member-photo img { display: block; width: 100%; /* の height 属性（CLS 防止のため付けている）が効いて縦に伸びないよう、高さは比率に任せる */ height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; /* 石の色味に寄せるため、画像にごくわずかな暖色を足す */ filter: sepia(0.18) contrast(1.02); } .member-name { font-size: var(--fs-h3); font-weight: 700; letter-spacing: 0.1em; margin: 0 0 0.35rem; } /* 一覧では氏名が個人ページ（/people/{slug}）へのリンクになる。 見た目は氏名のままにして、触れたときだけ他のリンクと同じ青と下線で示す */ .member-name a:hover, .member-name a:focus-visible { color: var(--blue-text); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; } /* 個人ページは1人だけなので、行の下の罫は引かない（下の「一覧へ戻る」と線が重なって見えるため） */ .members-single .member { border-bottom: none; box-shadow: none; } .member-name-en { font-family: "Cinzel", serif; font-size: var(--fs-label-s); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; } /* 氏名との区切りに罫線は引かない。1人ずつの下罫と近い太さの線が すぐ内側にもう1本入ると、どこが人の切れ目か読み取りにくくなるため。 氏名（太い和文）と肩書（小さい和文）は字面の差で十分見分けがつく。 ユニット名は人によって有る・無いがあるので、余白は下の要素側で持たせる */ .member-position { font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.14em; margin: 0; } .member-unit { font-family: "Cinzel", serif; font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0.45rem 0 0; } /* 右の列の先頭。氏名の1行目と高さを揃えたいので上の余白は持たせない （1列に畳む狭い画面でだけ、下のレスポンシブ側で余白を戻す） */ .member-bio { font-size: var(--fs-body-s); line-height: 2; color: var(--muted); margin: 0; } /* ---- 会社概要の集合写真 ---- 会社情報の表の下に、表と同じ右の列の幅で置く（ラベル列までは広げない。 広げるとPCでは高さが1画面の大半を占めて大きすぎた）。 画像は 2:1 で切り出してあるので、ここでは比率を決めずに幅だけ合わせる */ .company-photo { margin: 3.5rem 0 0; } .company-photo img { display: block; width: 100%; height: auto; } /* ---- 事業内容の詳細（3領域）---- */ /* .split を兼ねる（左に英語名のラベル、右に本文）。 区切り線はラベル列も含めた幅いっぱいに引く。/offerings の3領域で使う */ .offering { scroll-margin-top: calc(var(--header-h) + 1px); } .offering + .offering { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--groove-dark); box-shadow: inset 0 1px 0 var(--groove-light); } /* 領域の英語名は左のラベル（.section-label）にだけ出す。 他ページのラベルは1語だが、ここは General Enterprise のように長く2行になるため、 折り返しても記号が1行目の高さに残るよう上揃えにする */ .offering-title { display: flex; align-items: center; gap: 0.9rem; font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.01em; line-height: 1.4; margin: 0 0 1.25rem; } /* 3領域の目次。左の列に縦に並べ、スクロールに付いてくる（sticky）。 いま読んでいる領域には aria-current が付き（src/pages/Offerings.tsx の OFFERING_NAV_SCRIPT）、 節の欧文ラベル（.section-label）と同じ四角の印と濃い色で示す。 狭い画面ではヘッダーの下に横並びで固定する（→ 10. レスポンシブ） */ .offering-nav { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; } .offering-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; } .offering-nav a { font-family: "Cinzel", serif; display: flex; align-items: center; gap: 0.9rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); line-height: 1.5; text-transform: uppercase; color: var(--muted); transition: color 0.2s ease; } .offering-nav a:hover { color: var(--blue-text); } .offering-nav a[aria-current="true"] { color: var(--ink); } .offering-nav a[aria-current="true"] .num { color: var(--ink); } /* 現在地の印。節の欧文ラベル（.section-label）と同じ四角。場所は常に取っておき、 見えるかどうかだけを切り替える（現在地が移るたびに文字が左右に動かないように） */ .offering-nav a::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--ink); opacity: 0; transition: opacity 0.2s ease; } .offering-nav a[aria-current="true"]::before { opacity: 1; } /* ---- 事例紹介（/offerings/cases）---- */ /* 事例を1つの一覧に枠で並べ、上の語（.case-filter）で事業領域ごとに絞り込む。 1件はサマリ程度に留める。 列数は幅に応じて自動で決める（auto-fill）。事例は今後増える見込みで、 件数も画面幅もこちらで決められないため、@media で列数を切り替える書き方にしていない。 左のラベル列を持たない全幅の組みにしてあり、1枠の下限を21remにすると、 --max-w 1280px いっぱいでは3列、狭い画面では2列・1列と自然に減る。 **奇数個でも、絞り込んで件数が減っても組みが崩れない。** 1件ずつ細い実線の枠で囲む（部品の枠。→ 1. トークンの「線の意味」）。枠の中には線を引かず、 余白だけで段を分ける（枠の中にも横線を足すと線だらけに見えるため）。 枠を1件ずつ閉じているので、奇数個でも絞り込みで件数が減っても組みが崩れない。 */ .case-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 1.5rem; } .case { border: 1px solid var(--line); padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column; } /* ---- 枠の中の罫を、横に並ぶ枠どうしで揃える ---- 枠の中には罫が2本ある（上端の下と、成果の上）。要約の行数は事例ごとに違うので、 枠を独立した箱として組むと、隣り合う枠で2本目の罫の高さがずれる。 subgrid を使って、**枠の中身を一覧（.case-list）側の行に載せる。** 行の高さは同じ段に並ぶ枠どうしで共有されるので、要約が2行の枠と4行の枠が 隣り合っても、成果の上の罫は同じ高さに来る。 **枠の中身がちょうど5つであることが前提**（上端 / 見出し / 要約 / 成果 / 支援内容の語）。 要素を増減したら span の数も直すこと。src/pages/Cases.tsx にも同じ注意書きがある。 行の間隔は一覧側の row-gap ではなく枠の margin-bottom で作る。subgrid は 親の間隔をそのまま受け継ぐため、row-gap を残すと枠の中の5行にも同じ間隔が入る。 最後の段のぶんは、一覧側の負の margin で打ち消している。 subgrid が使えないブラウザでは、上の flex のまま（罫の高さが枠ごとに変わるだけで、 他は何も変わらない）。 */ @supports (grid-template-rows: subgrid) { .case-list { row-gap: 0; margin-bottom: -1.5rem; } .case { display: grid; grid-template-rows: subgrid; grid-row: span 5; margin-bottom: 1.5rem; } /* 行が揃うので、下端へ押し下げる必要が無くなる */ .case-tags { margin-top: 0; } } /* ---- 絞り込み ---- JavaScript は使わない。絞り込みの語はページ内リンクで、リンク先は語の段の前に 置いた見えない目印（