/* ═══════════════════════════════════════════════════════════════ nav.css — ヘッダーだけを top.css 系と揃えるための追加スタイル （2026-09-08 髙橋さん「下層ページも整えておいて」／トップは v8 で確定） なぜ要るか：`next/` の中でヘッダーが2系統に割れていた。 ・top.css を読む11ページ … 浮遊ピル＋サイコロnav（SERVICES→事業に回る） ・site.css を読む17ページ … 浮遊ピルだが nav は日本語のべた書き（回らない） ピル自体は site.css:109 も同じ値を持っているので、**足りないのは サイコロnavと、ロゴの縦線の色、page-head の罫線**の3つだけだった。 読み込む順序：tokens.css → site.css → **nav.css** → cta.css site.css の nav 規則は全部 `.nav` スコープなので、markup 側から `class="nav"` を外せば衝突しない。ここでは念のため全部 `header.top` の下にスコープして、下層ページの本文に触れないようにしている。 ═══════════════════════════════════════════════════════════════ */ /* ── ① page-head の上罫線を消す ──────────────────────────────── 🚩 site.css:1025 で「暗い面をやめる」ときに .s-navy/.s-deepest/.s-violet へ `border-top:1px solid var(--line)` を足した。節の区切りとしては正しいが、 **最初の節（page-head）だけは浮遊ピルの真下に来る**ので、 画面幅いっぱいの1px罫がヘッダーの下線に見えて、ピルが浮かなくなる （実測：ピルの下端 y=82 と罫線 y=82 が一致していた）。 top.css:132 の注記「貼り付いていないのに下線があると宙に浮かない」と同じ話。 */ /* 🚩 詳細度に注意。site.css:1121 は `.s-violet, .s-navy:not(:has(.flow,…)), .s-deepest:not(:has(…))` で罫線を引いている。 `:not(:has(…))` は引数の中でいちばん強いもの（クラス）ぶんを足すので **(0,2,0)**。 `.page-head` 単体（0,1,0）では負ける（実測：/services/system-development/ だけ 罫線が残っていた）。面クラスと2枚重ねて (0,2,0) にし、後読みで勝たせる。 */ .page-head, .page-head.s-violet, .page-head.s-navy, .page-head.s-deepest{border-top:0} /* ── ①-2 ピルそのもの ────────────────────────────────────────── 🚩 site.css:109 と top.css:141 が持っている「浮遊ピル」を、ここでも持つ。 トップ（v8.css）は site.css も top.css も読まないので、nav.css が ピルを持っていないと**ヘッダーが平らな帯に戻る**（実測：border-radius 0px・ position relative・高さ77px）。同じ値なので、両方に当たっても結果は変わらない。 */ header.top{ position:sticky;top:clamp(10px,1.4vw,18px);z-index:80; margin:clamp(10px,1.4vw,18px) clamp(12px,2.4vw,28px) 0; border-radius:999px;height:var(--hh,64px); /* 🚩 fallback は必須。1枚もののモックは tokens.css を読まないので、 var(--hh) が無効になって高さが中身なりに潰れる（実測 64→54px） */ background:color-mix(in srgb,var(--paper) 94%,transparent); backdrop-filter:saturate(1.5) blur(12px); -webkit-backdrop-filter:saturate(1.5) blur(12px); box-shadow:0 6px 28px rgba(14,23,48,.14); border-bottom:0} @media (max-width:640px){ header.top{margin:8px 10px 0;top:8px;border-radius:22px} } header.top .wrap{height:100%;display:flex;align-items:center;gap:var(--s4,2em)} header.top .burger{display:none;font-size:1.25rem;line-height:1;margin-left:auto; padding:.35em .2em;background:none;border:0;cursor:pointer;color:var(--ink); min-width:44px;min-height:44px;align-items:center;justify-content:center} /* ── ①-3 ヘッダーだけの基準サイズ ────────────────────────────── 🚩 rem を使わない。site.css / top.css は `html{font-size:110%}` を持つが、 v8.css（トップ）は持たない。同じ `1rem` がトップだけ16px、 他27ページは17.6pxになり、**ロゴもサイコロもボタンも一回り小さく**なっていた （実測：ロゴ 16px ←→ 17.6px、相談するボタン 44px ←→ 48px）。 ヘッダーの中だけ px で基準を決めて、そこからの比で組む。 */ /* 🚩 ヘッダーの高さもここで決める。tokens.css は `--hh:64px` だが、 top.css:25 は `--hh:clamp(58px,6vw,72px)` で上書きしている。 そのままだと **top.css 系のページだけピルの高さが58px**（他は64px）になる （実測・390px。check_header.py に /news/ を入れて初めて出た）。 ヘッダーの中だけ 64px に固定する（畳んだナビの位置もこれを見る）。 */ header.top{--hh:64px;--hf:17.6px} /* 🚩 下線を自分で消す。site.css は `a{text-decoration:none}` を持っているが、 v8.css（トップ）はそうではない。nav.css がここを持っていないと、 **トップだけロゴもナビも下線つき**になる（実測）。 */ header.top a{text-decoration:none} /* ── ② ロゴ ──────────────────────────────────────────────────── 🚩 site.css:121 は `.brand .bar{color:var(--peri)}`。 --peri(#B7B9DC) は**暗い面用**のアクセントで、紙(#F6F5F0)の上では **1.75:1** しかない（実測）。縦線が飛んで「INTE P RAL」に見える。 本番の top.css:154-155 と同じ扱い（Pも縦線も --principle、縦線は不透明度42%）に揃える。 markup 側のクラス名が `.bar`（site.css系）と `.b`（top.css系）で 割れているので、両方に当てる。 */ header.top .brand{font-family:var(--grot);font-weight:700;font-size:var(--hf); letter-spacing:.16em;color:var(--ink);white-space:nowrap} header.top .brand .p{color:var(--principle)} /* 🚩 縦棒は「文字」ではなく「描いた棒」。書体の `|` は大文字より上にも下にも はみ出す字で、ベースラインより下に伸びる（実測78px時：大文字0.724em に対して 縦棒1.122em、上に12.5px・下に18.5px はみ出す）。文字である限り大文字とは揃わない。 ・height:.727em ＝この書体の大文字の高さ（実測 0.724〜0.731em） ・overflow:hidden の inline-block は**箱の下端がベースライン**になる＝大文字と底が揃う ・text-indent は中の `|` を画面外へ送って隠すため */ /* 🚩 ヘッダーだけでなく、**サイト中の縦線すべて**に効かせる。 Chromeで /about/ を見たら、理念の大きな `INTE|P|RAL`（.pr-mark .bar）だけ 文字のままで、ベースラインから大きくはみ出していた（実測：高さ100px）。 ヘッダーだけ直しても、同じ形が他に残る。 */ header.top .brand .b, header.top .brand .bar, .brand .b,.brand .bar, .logotype .bar,.logotype .b, .pr-mark .bar,.pr-mark .b, footer .fm .bar{ display:inline-block;width:max(1px,.075em);height:.727em; vertical-align:baseline;overflow:hidden;text-indent:110%;white-space:nowrap; background:var(--principle);opacity:.42;margin:0 .16em; /* 🚩 色は transparent で固定する。中の `|` は overflow で隠れているが、 site.css:1191 が `.brand .bar{color:var(--principle)}` を持っていて、 site.css を読むページと読まないページ（トップ）で computed の color がずれる。 見た目は background で描いているので変わらないが、 check_header.py が「ちがう」と言い続けることになる。 */ color:transparent} /* ── ③ サイコロnav（top.css:156-253 の実値をそのまま） ────────── 項目をヘッダーいっぱいの高さにする。そうしないと配下メニューが 項目の下端（ヘッダーの内側）から出て、ヘッダーの縁を跨いでしまう。 */ header.top nav{margin-left:auto;display:flex;align-items:stretch;align-self:stretch; gap:clamp(10px,1.4vw,22px)} header.top .item{position:relative;display:flex;align-items:center;height:100%;perspective:760px} header.top .item > a, header.top .item > button{background:none;border:0;cursor:pointer;display:block; font-family:var(--jp);font-size:calc(var(--hf) * .78);font-weight:600;letter-spacing:.08em; color:var(--ink-2);white-space:nowrap;padding:0;transition:color .2s ease} /* 立方体を1面ぶん転がして次の面を出す。平面を裏返すのではない。 1辺は rem で持つ（em にすると面ごとの文字サイズで解決され、立方体にならない）。 面には当たり判定を持たせない（90度回した面が隣の項目まで覆って操作を奪う）。 */ header.top .cube{ --ch:calc(var(--hf) * 2); position:relative;display:grid;transform-style:preserve-3d; transition:transform .46s cubic-bezier(.62,0,.22,1); pointer-events:none} header.top .cube > span{ grid-area:1/1;display:flex;align-items:center;justify-content:center; height:var(--ch);padding:0 .95em;white-space:nowrap; backface-visibility:hidden;pointer-events:none} header.top .cube .f-en{ font-family:var(--grot);font-size:calc(var(--hf) * .66);letter-spacing:.18em;color:var(--ink-2); transform:translateZ(calc(var(--ch) / 2));transition:color .2s ease} header.top .cube .f-ja{ font-family:var(--jp);font-size:calc(var(--hf) * .78);letter-spacing:.08em;font-weight:600; color:var(--paper);background:var(--principle); transform:rotateX(90deg) translateZ(calc(var(--ch) / 2))} header.top .item:hover .cube, header.top .item:focus-within .cube{transform:rotateX(-90deg)} header.top .item:hover .f-en, header.top .item:focus-within .f-en{color:var(--principle)} header.top .item:hover > a,header.top .item:hover > button, header.top .item:focus-within > a,header.top .item:focus-within > button{color:var(--principle)} /* 🚩 タッチ端末にはホバーが無いので反転が一度も起きない。放っておくと 日本語が永久に出ない（2026-09-04にこれで一度撤去された経緯がある）。 あらかじめ回した状態にし、面の色は明るい地に合わせて戻す。 */ @media (hover:none){ header.top .cube{transform:rotateX(-90deg)} header.top .cube .f-ja{color:inherit;background:none;font-weight:500} } /* 配下メニュー。隙間なしで下に貼り付く（間に隙間があると、カーソルを 動かしている途中で閉じてしまう） */ header.top .drop{ position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(-6px); min-width:calc(var(--hf) * 13.5);background:var(--paper);border:1px solid var(--line); padding:.4em 0;opacity:0;pointer-events:none;z-index:90; transition:opacity .18s ease, transform .18s ease} header.top .item:hover .drop, header.top .item:focus-within .drop{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto} header.top .drop a{ display:block;font-family:var(--jp);font-size:calc(var(--hf) * .82);letter-spacing:.01em; color:var(--ink);padding:.62em 1.1em;transition:background .16s ease,color .16s ease} /* 選択＝コーポレートカラー（サイト共通のルール） */ header.top .drop a:hover, header.top .drop a:focus-visible{background:var(--principle);color:var(--paper)} /* 準備中の項目はリンクではないので、ホバーで塗らない */ header.top .drop .off{display:block;font-family:var(--jp);font-size:calc(var(--hf) * .82); color:var(--ink-3);padding:.62em 1.1em;cursor:default} header.top .drop .off .soon{font-style:normal;font-size:calc(var(--hf) * .68);margin-left:.5em; color:var(--principle);letter-spacing:.06em} header.top nav a.cta{ /* サイコロのタイル(2rem)より高くする。主行動なので同じ大きさにしない */ display:flex;align-items:center;align-self:center;height:calc(var(--hf) * 2.75); font-family:var(--jp);font-size:calc(var(--hf) * .8);letter-spacing:.02em;font-weight:600; color:var(--paper);background:var(--principle);padding:0 1.6em; margin-left:.9em;border-radius:999px} header.top nav a.cta:hover, header.top nav a.cta:focus-visible{background:var(--principle-d);color:var(--paper)} /* ── ④ 狭い画面（top.css:440-478 と同じ） ────────────────────── バーガーに切り替わる幅は site.css と同じ1120px。揃える前は 941〜1120px の間だけ挙動が2系統に割れていた。 🚩 bare な nav セレクタにすると footer の