/** * nav: ヘッダーナビ「私たちについて」ドロップダウン（2026-08-17新設） * * 背景: * ご挨拶 / 弊社の歴史 / 会社概要 の3項目をカスタムリンク「私たちについて」の * 子項目に束ねた（menu_item 1520）。展開そのものは SWELL 標準の * build/css/modules/submenu-normal.css（acc_submenu = false のとき読み込まれる） * の `.c-gnav > .menu-item:hover > .sub-menu { opacity:1; visibility:visible }` * が担当するため、自前のホバー実装は行わない。 * 本ファイルは SWELL 標準で不足する下記4点だけを最小限で補う。 * * (1) キーボード操作での展開（:focus-within） * SWELL は :hover しか持たないため、Tab で親リンクへ来ても開かず、 * 子3項目が visibility:hidden のまま＝フォーカス不能で到達できなかった（実測済み）。 * (2) ドロップダウンであることの視覚的告知（キャレット） * (3) 白背景ページ上でのパネル輪郭 * SWELL 既定は box-shadow: 0 2px 4px rgba(0,0,0,.1) のみ。トップ最下部（会社概要 * セクション＝白地）にヘッダー再出現機能で重なるとパネルの縁が判別できなかった（実測済み）。 * デザイン規範どおりヘアライン（--scy-line）＋角丸8px（--scy-r-card）で輪郭を作る。 * (4) フォーカスリング（WCAG 2.1 AA「フォーカスの可視化」） * * 制約遵守: * - style.css / inc/*.php / assets/{social,lang,partners}.css には触れない。 * - 新しい色は追加しない。すべて style.css の :root トークンか currentColor を使う。 * - 透過ヘッダー（トップ最上部・header-reveal 再出現時）では親リンクの色を * inc/header-reveal.php が currentColor 経由で white / ink に切り替えるので、 * キャレットとフォーカスリングは currentColor 参照にして自動追随させる。 * 子リストの背景・文字色は SWELL 出力の `.c-gnav .sub-menu{color:#333;background:#fff}` * が効いており透過の影響を受けない（実測済み）ので上書きしない。 */ /* --------------------------------------------------------------- 1. キーボードでの展開（:focus-within） --------------------------------------------------------------- */ /* .c-gnav は SWELL では 960px 未満で非表示のため、メディアクエリ無しで安全。 親リンクにフォーカスが入った時点で子が visible になり、続く Tab で子へ辿れる。 */ .c-gnav > .menu-item:focus-within > .sub-menu, .c-gnav .sub-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; } /* --------------------------------------------------------------- 2. キャレット（▾）— ドロップダウンの存在を示す --------------------------------------------------------------- */ /* a::after は SWELL のホバー下線が使用済みのため .ttl::after に描く。 アイコンフォントに依存しない border 三角で、色は currentColor＝ 透過ヘッダーでは白、通常ヘッダーではインクに自動追随する。 */ .c-gnav > .menu-item-has-children > a .ttl::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; vertical-align: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transform-origin: 60% 60%; opacity: .7; } @media (prefers-reduced-motion: no-preference) { .c-gnav > .menu-item-has-children > a .ttl::after { transition: transform var(--scy-dur-fast, .3s) var(--scy-ease, ease-out), opacity var(--scy-dur-fast, .3s) var(--scy-ease, ease-out); } } /* 開いている間は上向き＝状態が見て分かる */ .c-gnav > .menu-item-has-children:hover > a .ttl::after, .c-gnav > .menu-item-has-children:focus-within > a .ttl::after { transform: rotate(-135deg); opacity: 1; } /* --------------------------------------------------------------- 3. ドロップダウンパネルの輪郭・余白 --------------------------------------------------------------- */ .c-gnav .sub-menu { border: 1px solid var(--scy-line, rgba(20, 40, 55, .14)); /* 上辺は角丸にしない。SWELL の親リンク下線 .c-gnav a::after（2px・幅は親項目ぶん）が パネル上辺に接して描かれるため、上を丸めると下線の両端だけが庇のように はみ出して見える（実測・zoom_transparent_junction.png）。上辺を直線にすると 下線がそのまま「開いている項目」を示すインジケータとして自然に載る。 角丸は規範どおり --scy-r-card（8px）1種のみを使用。 */ border-radius: 0 0 var(--scy-r-card, 8px) var(--scy-r-card, 8px); /* 白地の会社概要セクション上でも面が浮くだけの最小限。グロー・グラデは使わない */ box-shadow: 0 6px 16px rgba(20, 40, 55, .10); padding: 4px; /* SWELL 既定 15em では「弊社の歴史」等に対し余白が過大なので詰める */ width: 13.5em; } /* SWELL の submenu-normal.css が敷く背景レイヤー（background:inherit の擬似要素）を 角丸に追随させる。これが無いと四隅が白い直角で残り、border-radius が潰れる。 */ .c-gnav .sub-menu::before { border-radius: inherit; } .c-gnav .sub-menu a { border-radius: 4px; } /* --------------------------------------------------------------- 4. フォーカスリング（WCAG 2.1 AA） --------------------------------------------------------------- */ /* currentColor 参照なので、透過ヘッダー上（白文字）でも通常ヘッダー上（インク）でも 常に地に対してコントラストが確保される。 */ .c-gnav a:focus-visible, .c-spnav a:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; border-radius: 4px; } .c-gnav .sub-menu a:focus-visible { outline-offset: -2px; } /* --------------------------------------------------------------- 5. SP（スマホ開閉メニュー内） --------------------------------------------------------------- */ /* SWELL は nav_sp_menu 未設定時、ハンバーガーの中身に header_menu を流用する （swell/parts/header/sp_menu.php）。acc_submenu = false のため子項目は アコーディオンではなく「常時展開の入れ子リスト」として出る＝タップ不能にならない。 ここでは階層が目で分かるよう、子リストにインデント罫を足すだけに留める。 */ @media (max-width: 959px) { #sp_menu .c-spnav .sub-menu { border-left: 1px solid var(--scy-line, rgba(20, 40, 55, .14)); margin-left: 1.5em; } #sp_menu .c-spnav .sub-menu a { padding-left: 1.75em; } #sp_menu .c-spnav .sub-menu a::before { left: .25em; } } /* --------------------------------------------------------------- 6. ヘッダー横位置の統一（トップのヒーローに合わせる） --------------------------------------------------------------- */ /* トップは -transparent 指定で l-header__inner が max-width:100% になり全幅、 下層は l-container の 1296px で中央寄せになるため、1296px超の画面で ロゴのx座標が 48px（トップ）/ 156px（下層）とずれていた。 ヒーロー側に揃えて全ページ全幅に統一する。 */ #header .l-header__inner { max-width: 100%; } /* --------------------------------------------------------------- 7. 左端の基準線を1本に揃える（2026-08-17 CEO指摘・タスク3） --------------------------------------------------------------- 【実測した破綻】1512px幅で計測（_scripts/qa/2026-08-17/final/edges_before.json） ヘッダーロゴ x=48 … 6. で l-header__inner を全幅化した結果 パンくず「ホーム」 x=156 … .p-breadcrumb__list.l-container（max-width 1296px）が中央寄せ 本文 h1／段落 x=322 … さらに .l-article（900px）が上記の内側で中央寄せ＋ .post_content の左右16pxパディング 本文 h2 x=306 … SWELL の .post_content>h2{margin-inline:-16px} で16px外へ張り出す 同じページの中に左端が4本あり、ロゴだけが遠く左にいる状態だった。 【原因】ずれるのはビューポートが 1296px を超えたときだけである。 .l-container は max-width:1296px／padding-inline:var(--swl-pad_container) で、 1296px以下では左端＝padding値＝ヘッダーと同値になり既に揃っている。 1296pxを超えた瞬間に margin:auto の中央寄せが効いて右へ流れる。 【方針】ヘッダーに合わせて「左ガター＝var(--swl-pad_container)」を全要素の基準線にする。 中央寄せを解除して左へ寄せる。 - --swl-pad_container は SWELL 側で PC 48px ／ 960〜1200px 32px ／ SP 4vw と定義済み。 この値をそのまま使うので、どのブレークポイントでも header と同一値になる。 【2026-08-18 追記・コンテナ幅の変数化（レイアウト再設計）】 初版はここで幅を 868px に固定していた（＝1行の文字数を変えないため）。 しかしその結果、1512px幅では本文が x=48〜916 に収まり、右に約 600px の 死に領域が縦一列に残った。CEO指摘「右寄せのデザインはないわ、、、これって 読みやすいのであってデザイン性はないよね。」の正体はこれである。 そこで幅の実値をこのファイルから追い出し、変数 --scy-bodyw に逃がした。 - 既定値は 868px。＝ お問い合わせ・免責事項などレイアウト再設計の対象外ページは 今日までと1pxも変わらない（回帰リスクをゼロにする）。 - 再設計対象ページは body.scy-wide で --scy-bodyw を 1600px に上書きする （assets/pages.css）。1512px幅では #content の実幅が上限に達しないため 48px ガター × 2 を引いた 1416px＝キャンバスをほぼ端まで使う。 - 幅を広げても「1行の文字数」は増やさない。走り文の測度（43em）は pages.css 側でカラム幅として担保する（研究レポート P8「40〜46字」）。 960px未満（SPレイアウト）は元から中央寄せが働かないため、対象を960px以上に限定する。 */ @media (min-width: 960px) { /* (1) パンくず・本文コンテナ: 中央寄せを解除して左ガターへ */ .p-breadcrumb__list.l-container, #content.l-container { margin-left: 0; margin-right: auto; } /* (2) 記事カラム（.l-article = max-width:var(--article_size) 900px）も左端へ。 セレクタは #main_content に限定する。SWELL の全幅ブロックの内側コンテナ （.swell-block-fullWide__inner）も .l-article / .l-container を名乗るため、 .l-content .l-article のような広い指定だと (6) の帯まで巻き込んで ビューポート左端（x=0）に貼り付いてしまう（実測で確認済み）。 */ #main_content.l-article { margin-left: 0; margin-right: auto; } /* (3) .post_content の左右パディングと、h2 だけ外へ張り出す負マージンを止める。 いずれも SWELL 側の CSS 変数なので、値を上書きするだけで打ち消せる （!important や個別セレクタの叩き合いをしない）。 */ #content { --swl-pad_post_content: 0px; --swl-h2-margin--x: 0px; } /* (4) 本文カラムの幅。左端は (1)(2)(3) により左ガターに一致する。 --scy-bodyw の既定は 868px（= 900 - 16*2。従来値）。 再設計対象ページのみ pages.css が 1600px に上書きする。 */ .l-mainContent__inner > .post_content { max-width: var(--scy-bodyw, 868px); } /* 上位の器（#content.l-container = 1296px ／ #main_content.l-article = 900px）は ここでは触らない。--scy-bodyw を 868px より広げるページだけ、その2つの上限を assets/pages.css 側（body.scy-wide）で外す。対象外ページの器を1pxも動かさないため。 */ /* (5) alignfull の再アンカー。 SWELL は .alignfull{left:calc(50% - 50vw); width:100vw} で全幅を作る。 これは「.post_content がビューポート中央にある」ことを前提にした式なので、 (2) で左へ寄せた後は帯が左へはみ出してしまう（実測で -274px ずれる）。 基準を「post_content の左端 = 左ガター」に取り直す。 スクロールバー幅の補正は SWELL と同じ変数を使う。 */ .l-mainContent__inner > .post_content > .alignfull { left: calc(-1 * var(--swl-pad_container, 0px) + var(--swl-scrollbar_width, 0px) / 2); } /* (6) SWELL の全幅ブロック（.swell-block-fullWide）の内側コンテナ。 帯そのものは (5) でビューポート全幅になるため、内側コンテナの座標原点は ビューポート左端（x=0）になる。よって左ガターぶんを margin で足し戻し、 幅も本文と同じ 868px に揃える。これをやらないと - .l-article 型（幅900・padding 0）… 帯の中身だけ x=0 に貼り付く - .l-container 型（幅1296・padding 48）… 中身が 48〜1248px に広がり、 中央揃えの見出しの光学中心が本文カラムの中心とずれる という2つのズレが出る（いずれも実測で確認）。 */ .swell-block-fullWide__inner.l-article { /* 2026-08-18 仕上げ: min() を足した。 --scy-bodyw を 1600px に広げた（pages.css §0）あと、ここは 「ビューポート1512 − 左マージン48 ＝ 1464」で止まり、右端が x=1512＝画面の端に 貼り付いていた（弊社の歴史の年表が右ガター48pxを食い潰していた。実測）。 左右のガターを両方引いた幅で頭打ちにして、本文と同じ 48〜1464px に揃える。 */ max-width: min(var(--scy-bodyw, 868px), calc(100% - var(--swl-pad_container, 0px) * 2)); margin-left: var(--swl-pad_container, 0px); margin-right: auto; } .swell-block-fullWide__inner.l-container { max-width: calc(var(--scy-bodyw, 868px) + var(--swl-pad_container, 0px) * 2); margin-left: 0; margin-right: auto; } /* (7) リロケーション支援ページ（/services/global-mobility/）の帯。 style.css の .scy-gm__* は横位置に --scy-gutter（max(24px,5vw)＝1512pxで75.6px）を使い、 さらに .scy-gm__group-inner が max-width:1080px で中央寄せになるため、 同じページの中に 48px（ロゴ・パンくず・本文）／75.6px（ヒーロー）／216px（本文帯）の 3本の左端ができていた。style.css は編集禁止のため、ここで横位置だけを上書きする。 余白・幅・縦組みには触れない（padding-inline と margin-inline のみ）。 */ .scy-gm__hero-copy { left: var(--swl-pad_container, 0px); right: var(--swl-pad_container, 0px); } .scy-gm__group { padding-left: var(--swl-pad_container, 0px); padding-right: var(--swl-pad_container, 0px); } .scy-gm__group-inner { margin-left: 0; margin-right: auto; } }