@charset "UTF-8"; /* ==================================================== 　common_first.css 　リニューアル版：ページ全体の基本構造（リセット・CSS変数・a11y・.pc/.spトグル）・ 　共通ボタン（.button） 　（ヘッダーは header.css、トップページ固有のスタイルは pageIndex_first.css を参照） ==================================================== */ /* ====================================================== 　ヘッダー：共通カスタムプロパティ 　スクロール時（.isScrolled）に高さ・余白が変わって見える不具合を防ぐため、 　通常時とスクロール時で同じ変数を共有する。スクロール時背景色もPC/SPで 　別々の固定値にせず、この1つの変数（PC実装値#005bacを流用）に統一する。 ====================================================== */ :root{ --header-height-pc:10rem; /* Figma実測(node 6123:17)：ヘッダー枠自体の高さは64px(閉じた状態)。ロゴ(top17.5/height29)・ menu-icon(top14/height36)ともこの64pxに対して上下均等に中央揃えされている */ --header-height-sp:16.4103vw; --header-scrolled-bg:#005bac; /* 指示によりPC最小幅は1200px（--pc-site-width）とする（以前指示していた1210pxから変更、 混在させないこと）。--pc-content-width（1500px）はFigma基準のコンテンツ幅。 hero／SERVICE／CATALOG／RECRUITは「1500px時点の要素サイズ・配置関係を縮小せず、 画面幅1500〜1200pxでは画面中央を基準に左右へ均等にはみ出させ、はみ出した分だけを セクション自身のoverflow:hiddenでクリップする」設計にする（要素を縮小・折り返しさせる のではなく、1500px幅のまま据え置いて中央寄せし、画面外にはみ出た左右分だけを均等に 見せなくする＝「フチが均等に見切れる」動き）。具体的な計算式は calc(50% - var(--pc-content-width) / 2)（各セクションのCSSで直接使用、pageIndex_first.css ／pageIndex_body.css参照）。1200px未満はhtml自体の実幅が1200px未満にならないため （--pc-site-widthがhtmlのmin-widthとして効く）、この計算式のみでは対応せず、 ページ全体の横スクロールで1200px幅を維持する。 */ --pc-site-width:120rem; --pc-content-width:150rem; } /* ###################################################################################### 　基本設定・リセット ###################################################################################### */ /* 不具合修正：以前は.pageIndex（トップページ判定用class）を起点にしていたが、 このファイル自体がHeader2026.html経由でトップページ・下層ページ問わず 共通で読み込まれる（common_first.css自体の役割）ため、ファイルの読み込み条件が 既に適用範囲を決めており、ここで重ねてページ種別を判定する必要はない。 box-sizing・bodyの基本設定は素の`*`／`body`を起点にする */ *, *::before, *::after{ box-sizing:border-box; } body{ margin:0; padding:0; /* index_2026.htmlのでNoto Sans JP(400/700/900)をGoogle Fontsから読み込み済みだが、 このフォントスタック自体には含まれていなかったため実際には常にシステムフォント （游ゴシック/Meiryo等）側で描画されていた。これらのシステムフォントは900(Black)相当の 実ウェイトを持たないため、font-weight:900指定箇所（hero__copy等）がブラウザ側で クランプ／擬似ボールド表示となり、Figma実測のNoto Sans JP Blackより細く見える原因になっていた。 スタック先頭にNoto Sans JPを追加し、実際に読み込み済みのウェイトが使われるようにする */ font-family:"Noto Sans JP","游ゴシック体","Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; line-height:1.75; color:#111111; -webkit-text-size-adjust:100%; } /* 不具合修正：下層ページの本文レイアウト（.columnBase/.mainColumn/.contents/.pageNav/ .contactFooter、および#pageTitleBox/#topicPath。Header2026.html内のコメント参照）は 今も旧common/css/（common.css・widget.css等）が受け持っている。旧CSS側は同じタグに対して 既に固有の値を持っており（例：common.cssのp{margin:0 0 1em}、a{color:#000099}）、 このリセットを無条件に適用すると旧CSS側の素のタグ指定を詳細度で上回ってしまい、 下層ページで段落の行間が詰まる・リンクの色が消えるといった表示不具合の原因になっていた （実機で確認済み：company/works配下のページで再現）。 このファイル自体はHeader2026.html経由の全ページ（トップ・下層問わず）でのみ読み込まれる ため、ページ種別のclassで重ねて絞り込む必要はなく、旧CSSが受け持つ下層ページ本文の 既知の旧レイアウトclass/idの配下だけを明示的に除外すればよい（:not()による除外リストは Header2026.htmlのコメントに列挙された既知の旧class/idそのもので、新規に増減しない 限り変更不要）。.contentsは`.header .contents`（新ヘッダーのflex行）と同名のため、 #main配下に限定して除外し、ヘッダー側を巻き込まないようにする。 不具合修正：上記の[id="main"] .contents *（属性+class=詳細度2）が:not()引数の中で 最も詳細度が高いため、そのまま書くとリセット全体の詳細度が(0,2,1)（例：p:not(...)）まで 上がってしまい、トップページ側のpageIndex_body.css/pageIndex_first.cssにある 「.pageIndex .xxx{margin-top:...}」のような2class止まりのコンポーネント上書き（詳細度 (0,2,0)）に対してリセットの方が勝ってしまい、margin-top等が0に巻き戻る不具合が 発生していた（ABOUT/SERVICE/CATALOG/RECRUIT/COMPANY各所の見出し〜本文間隔で実機確認）。 [id="main"]側だけ:where()で包み、この1引数が持つ詳細度をtitleSection等と同じ1class分 （0,1,0）まで下げることで、リセット全体の詳細度を意図していた本来の値(0,1,1) （旧`.pageIndex h1`等と同じ値）へ戻す。マッチする要素の範囲（#main配下の.contents）は :where()の前後で変化しないため、除外の効き目自体はそのまま維持される */ :is(h1, h2, h3, p, dl, dt, dd, ul, li):not( [id="pageTitleBox"] *, [id="topicPath"] *, .columnBase *, .mainColumn *, .pageNav *, .contactFooter *, :where([id="main"]) .contents * ){ margin:0; padding:0; } ul:not( [id="pageTitleBox"] *, [id="topicPath"] *, .columnBase *, .mainColumn *, .pageNav *, .contactFooter *, :where([id="main"]) .contents * ){ list-style:none; } a:not( [id="pageTitleBox"] *, [id="topicPath"] *, .columnBase *, .mainColumn *, .pageNav *, .contactFooter *, :where([id="main"]) .contents * ){ color:inherit; text-decoration:none; } img:not( [id="pageTitleBox"] *, [id="topicPath"] *, .columnBase *, .mainColumn *, .pageNav *, .contactFooter *, :where([id="main"]) .contents * ){ display:block; max-width:100%; height:auto; } button:not( [id="pageTitleBox"] *, [id="topicPath"] *, .columnBase *, .mainColumn *, .pageNav *, .contactFooter *, :where([id="main"]) .contents * ){ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } html{ font-size:10px; } /* PCのサイト最小幅：指示によりサイトの最小幅は1200px（--pc-site-width）とする （前回指示の1210pxから変更。旧common/css/common.cssのbody{min-width:1210px}とは 無関係）。1200px以上ではhtmlの実幅がそのままビューポート幅に追従する。hero／SERVICE／ CATALOG／RECRUITは画面幅に応じて縮まず、1500px時点のサイズのまま画面中央基準で 左右へ均等にはみ出し、各セクション自身のoverflow:hiddenがそのはみ出し分だけをクリップする （pageIndex_first.css／pageIndex_body.css参照）ため、htmlの実幅が1500px未満になっても 横スクロールは発生しない。1200px未満のPC画面のみ、vw/clampによる縮小を行わず 横スクロールで閲覧できるようにする。 スマートフォン表示（max-width:767px）には適用しない。 横スクロールはhtml側のoverflow-x:autoのみで実現し、body側には重ねて overflow-xを指定しない。bodyにoverflow-x:autoを指定すると、CSSの仕様により overflow-yが指定なし(visible)でも自動的にauto相当へ計算され、bodyが独自のスクロール コンテナ（＝position:stickyの基準）になってしまう。bodyの高さは中身に合わせて伸びるだけで 実際にはbody自身が縦方向にスクロールしないため、bodyを基準にsticky計算された.header は 「スクロール量に応じて一切固定されず、ページと一緒に流れていく」という不具合になっていた。 */ @media print, screen and (min-width:768px){ html{ min-width:var(--pc-site-width); overflow-x:auto; } } /* 不具合修正：ドロワーを開くとhtml/body.isDrawerOpen(overflow:hidden)によってルート 自身の縦スクロールが不要になり、縦スクロールバーの分だけビューポート実効幅が 広がっていた。ハンバーガーボタンのright:%はこの実効幅（.mean-bar{width:100%}の 基準幅）に依存するため、開閉のたびに横位置がズレて見える原因になっていた。 scrollbar-gutter:stableでスクロールバー用の余白を開閉に関わらず常時確保し、 実効幅を固定する（PCには影響させない）。 副作用の注記：この指定はvw単位の基準幅も縮める（393px幅で1vwが3.93pxではなく 実測約3.78px相当になる）。SP側のvw値は実測でこの縮んだ基準に合わせて キャリブレーションしており（例：61px相当は61/393ではなく61/378で算出）、 他のCSSファイルも含めSP用vw値を新規に追加・変更する際はこの縮小基準を 踏まえること */ @media screen and (max-width:767px){ html{ scrollbar-gutter:stable; } } /* ==================================================== 　English/数字用フォント ==================================================== */ .fontEn{ font-family:"Oswald", sans-serif; font-weight:500; } /* ==================================================== 　アクセシビリティ共通 ==================================================== */ .sr-only{ position:absolute; overflow:hidden; clip:rect(0,0,0,0); width:1px; height:1px; margin:-1px; padding:0; white-space:nowrap; border:0; } /* 不具合修正：top:-40pxで画面外へ退避させていたが、実際の要素高さ（padding:0.8em 1.6em＋ 1行分のline-height）が40pxを超えており、下端が数px画面内にはみ出して常時表示されていた （左上に background:#001c4c の帯が見えていた不具合の直接原因）。要素自身の高さに関わらず 常に完全に画面外へ出るよう、固定pxの負のtopではなくtransform:translateY(-100%)で 「自分の高さ分だけ上へ」退避させる方式に変更する */ .skipLink{ position:absolute; top:0; left:0; transform:translateY(-100%); z-index:1000; padding:0.8em 1.6em; background:#001c4c; color:#fff; transition:transform 0.2s; } .skipLink:focus{ transform:translateY(0); } a:focus-visible, button:focus-visible{ outline:2px solid #1381d6; outline-offset:2px; } @media (prefers-reduced-motion:reduce){ *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* ==================================================== 　PC/SP 表示切り替え 　.pc/.spは「他のどのコンポーネントのdisplay指定より必ず優先される」ことが前提の 　表示切り替え専用ユーティリティクラスであるため、ここだけ例外的に!importantを使用する。 　.xxx{display:...} という形の単一class・同じ詳細度のルールはプロジェクト内に多数あり 　（例：.button{display:inline-flex}、.titleSection{display:inline-flex}、 　.hbg{display:flex}）、!importantなしではCSSの記述順（後に書かれた方が勝つ）に依存してしまい、 　新しいコンポーネントを追記するたびに.pc/.spが無効化される事故が起きやすい。 　実際に.button・.titleSection・.hbgがこの詳細度の衝突でPC幅でも両方表示される不具合が発生した。 ==================================================== */ .sp{ display:none !important; } @media screen and (max-width:767px){ .pc{ display:none !important; } .sp{ display:block !important; } span.sp, a.sp{ display:inline !important; } } /* ###################################################################################### 　共通ボタン（button） ###################################################################################### */ /* Figma実寸(get_design_context実測、node 6035:505/506・6079:33/34等)： ボタンは角丸を持たない矩形。塗りはグラデーション＋薄い白半透明の縁取り(1px)＋ 下端1pxの落ち影で構成される。角丸999pxのカプセル型はFigma上に存在しないため廃止する。 不具合修正：以前は.pageIndex（トップページ判定用class）を起点にしていたが、 トップページ判定とは無関係のため.buttonそのものを起点にしたい。ただし gnav_megamenu.css側に同名の無scope.button{background:#ccc;color:#111;position:relative;} が存在し、単純に素の.buttonへ変更すると詳細度が同点になり、後から読み込まれる gnav_megamenu.css側の値に競り負ける（background/colorが意図せず変わる）。 bodyは単一要素で「トップページかどうか」を判定するものではないため、 ページ種別に依存せず詳細度だけをgnav_megamenu.css側より確実に高くする目的で body要素を前置する（新しいpage判定classを作らない） */ body .button{ display:inline-flex; align-items:center; justify-content:center; gap:0.6em; overflow:hidden; border:1px solid rgba(255,255,255,0.3); white-space:nowrap; font-weight:bold; transition:opacity 0.2s, transform 0.2s; } body .button:hover{ opacity:0.85; } /* 矢印は装飾のため疑似要素で実装する（HTML側に空のspanを置かない）。 見積依頼フォームボタン（.button--outline）のみFigma上で矢印を伴わないため個別に打ち消す */ body .button::after{ content:"→"; transition:transform 0.2s; } body .button:hover::after{ transform:translateX(0.2em); } body .button--outline::after{ content:none; } body .button--primary{ background:linear-gradient(108deg, rgba(0,91,172,0.85) 12.5%, rgba(19,129,214,0.85) 97.5%); box-shadow:0 1px 0 #001c4c; color:#fff; } body .button--light{ background:linear-gradient(-72.5deg, rgba(229,229,229,0.8) 4.6%, rgba(255,255,255,0.8) 77.5%); box-shadow:0 1px 0 #707070; color:#111111; } body .button--gray{ background:linear-gradient(-69deg, rgba(180,180,180,0.85) 4.6%, rgba(96,96,96,0.85) 77.5%); box-shadow:0 1px 0 #707070; color:#fff; } body .button--yellow{ background:linear-gradient(90deg, #ffff27 43%, #3c97b8 94%, #1381d6 100%); color:#001c4c; } body .button--yellowSolid{ background:#ffff27; color:#001c4c; } body .button--outline{ border-color:#ffffff; color:#fff; background:transparent; } @media print, screen and (min-width:768px){ body .button{ padding:1.2em 2em; font-size:1.5rem; } } @media screen and (max-width:767px){ body .button{ width:100%; max-width:29.2308em; padding:1.2308em 1.6em; font-size:3.3333vw; } }