/* * レイアウト/コンポーネントCSS。 * 色・書体・余白は必ず tokens.css の var(--token名) を参照し、直接HEX値は書かない。 * * Phase 6v(frontend-engineer)にて、レスポンシブ対応(モバイル用ハンバーガーメニュー、 * フルイドタイポグラフィ、ブレークポイント調整)を追加した。ブレークポイントは * design/wireframes/preview.html の `@media (max-width: 720px)` と揃えて 720px を採用する。 */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font-sans); font-size: var(--font-size-body); line-height: 1.8; } img { max-width: 100%; display: block; } a { color: var(--navy); } .container { max-width: var(--max-content-width); margin: 0 auto; padding: 0 var(--space-6); } /* * 見出しはゴシック体(--font-sans)を標準とする(2026-08発注者確定の全体方針: 明朝体は * 「とげとげしい」硬い印象になるため、見出しに明朝体を使用しない。以前は明朝体が標準で * 英語見出しのみ個別にゴシック体へ上書きしていたが、この方針転換によりデフォルト自体を * ゴシック体に変更した。--font-serif自体は削除せず、本文中の格式を出したい単発の箇所 * (代表挨拶の署名等)でのみ限定的に使う)。 */ h1, h2, h3 { font-family: var(--font-sans); font-weight: 600; line-height: 1.4; text-wrap: balance; } /* * H1/H2はフルイドタイポグラフィ(clamp)でモバイル時に縮小する。 * 上限は tokens.css のタイプスケール(--font-size-h1/h2)を厳守し、 * デザインシステムが定めた「見出しは大きく」という意図を最大幅では変えない。 */ h1 { font-size: clamp(1.75rem, 1.35rem + 3vw, var(--font-size-h1)); } h2 { font-size: clamp(1.375rem, 1.15rem + 1.6vw, var(--font-size-h2)); } h3 { font-size: var(--font-size-h3); } @media (max-width: 720px) { .container { padding: 0 var(--space-4); } } .caption { font-size: var(--font-size-caption); letter-spacing: 0.08em; color: var(--slate); } /* * セクション見出しの上に小さく添える英語ラベル(design-system.md「英語アクセント」参照)。 * ヒーローeyebrow(.hero-lead以前のマークアップでは使っていないが将来的な展開も想定)や * コンテンツナビゲーションセクションの "Quick Links" ラベル等、主要セクションで共通利用する。 */ .eyebrow { display: inline-block; font-size: var(--font-size-caption); font-weight: 600; letter-spacing: 0.14em; color: var(--navy); text-transform: uppercase; } /* --- ヘッダー --- */ .site-header { background: var(--navy); color: var(--on-navy-text); } /* * 透過ヘッダー(hero_pageのページのみ、templates/partials/header.html 参照)。 * position: absolute でドキュメントフローから外し、ヒーローセクションの上に重ねる。 * ヒーロー側の .hero-overlay(紺のグラデーション)が可読性を担保する前提のため、 * ここでは背景を透明にするだけでよい。z-indexは .hero-content(2)より大きくして * 常にヒーローの上に表示されるようにする。 */ .site-header--transparent { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; transition: background-color 0.3s ease; } /* * 最初の1画面分を超えてスクロールしたら(partials/header.html のJSが付け外しする)、 * 紺の帯に戻す。以降のコンテンツ(白背景セクション等)の上でもナビの文字が読めるようにする。 */ .site-header--transparent.is-scrolled { background-color: var(--navy); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); } .site-header .logo { color: var(--on-navy-text); /* フッターのコピーライト(© INVEST ONLINE、bodyの--font-sansを継承)と書体を揃える。 */ font-family: var(--font-sans); font-size: 1.25rem; font-weight: 700; text-decoration: none; display: block; } .logo-stack { position: relative; display: block; height: 32px; width: 134px; /* 300:67のアスペクト比を高さ32pxで換算した幅 */ } .logo-image { display: block; height: 32px; width: auto; transition: opacity 0.3s ease; } /* * 2026-08発注者フィードバック: 「ロゴの赤い部分だけ半透明にして、白い文字はそのまま」 * という指示のため、単純なCSS opacityではなく、赤ピクセルだけアルファ値を落とした * logo-translucent.png(header.html参照)を重ねてクロスフェードする。 * 既定(他ページの紺背景ヘッダー、またはトップページでスクロール後)は不透明版のみ表示、 * トップページのメインビジュアル上(透過ヘッダー、スクロール前)だけ半透明版に切り替える。 */ .logo-image--translucent { position: absolute; inset: 0; opacity: 0; } .site-header--transparent .logo-image--opaque { opacity: 0; } .site-header--transparent .logo-image--translucent { opacity: 1; } .site-header--transparent.is-scrolled .logo-image--opaque { opacity: 1; } .site-header--transparent.is-scrolled .logo-image--translucent { opacity: 0; } .site-header nav ul { list-style: none; display: flex; gap: var(--space-6); margin: 0; padding: 0; } .site-header nav a { text-decoration: none; } /* * ナビ項目の英語主(nav-en)/日本語従(nav-ja)2段組み(2026-08発注者フィードバック、 * ロボットホームHP参照)。.qc-en/.qc-labelと同じ考え方(太字の英語見出し+小さい * 日本語キャプション)を踏襲する。spanをdisplay:blockにするだけで縦積みになるため、 * 親のdisplay(デスクトップ=inline、モバイル=block)を変更する必要がなく、 * 既存のモバイル用メディアクエリ(.site-nav a { display: block; })と競合しない。 */ .nav-en { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em; color: var(--on-navy-text); } .nav-ja { display: block; margin-top: 2px; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--on-navy-text); } .site-header nav a:hover .nav-ja { color: var(--on-navy-text); } .site-header nav a:focus-visible { outline: 2px solid var(--on-navy-text); outline-offset: 2px; } /* --- ハンバーガーメニューボタン(モバイルのみ表示) --- */ .nav-toggle { display: none; flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle-bar { display: block; width: 22px; height: 2px; background: var(--on-navy-text); border-radius: 1px; transition: transform 0.15s ease, opacity 0.15s ease; } .nav-toggle:focus-visible { outline: 2px solid var(--on-navy-text); outline-offset: 2px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- モバイル幅: ヘッダーを折り返し、ナビをハンバーガー開閉のドロップダウンにする --- */ @media (max-width: 720px) { .site-header .container { flex-wrap: wrap; } .site-header .logo { min-width: 0; } .nav-toggle { display: flex; } .site-nav { display: none; flex-basis: 100%; width: 100%; } .site-nav.is-open { display: block; padding-top: var(--space-2); padding-bottom: var(--space-4); } .site-nav ul { flex-direction: column; gap: 0; } .site-nav li { border-top: 1px solid var(--navy-deep); } .site-nav a { display: block; padding: var(--space-3) 0; } } /* * --- フッター(2026-08 発注者フィードバックで再設計) --- * ロボットホーム準拠の「ロゴ+ナビ2層構成」から離れ、法務・企業情報に特化した * シンプルな構成に変更(発注者確定の掲載内容: 親会社に関する一文／財務報告の基本方針／ * プライバシーポリシー／事業内容／個人情報の取扱いについて／会社名のクレジット)。 * 紺配色(--navy-deep)は維持。ロゴ画像・年号入りコピーライトは持たない(既存方針を継続)。 * SNSアイコンは公式アカウント未確定のため実装しない(架空のリンクを作らない)。 */ .site-footer { background: var(--navy-deep); color: var(--canvas); /* 直前セクション(.page-main / .news-section 等)の下パディングと合算すると余白が 過大になる、というフィードバックを受け、128px(--space-32)から64pxへ縮小した。 */ margin-top: var(--space-16); } .site-footer .container { padding-top: var(--space-16); padding-bottom: 0; } .footer-group { color: var(--on-navy-text); font-size: var(--font-size-caption); margin: 0 0 var(--space-6); } .footer-nav { display: flex; flex-wrap: wrap; column-gap: var(--space-6); row-gap: var(--space-3); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(174, 187, 199, 0.28); font-size: var(--font-size-caption); } .footer-nav a { color: var(--on-navy-text); text-decoration: none; } .footer-nav a:hover, .footer-nav a:focus-visible { color: var(--crimson); opacity: 1; } .footer-bottom { padding: var(--space-4) 0 var(--space-8); font-size: var(--font-size-caption); color: var(--on-navy-muted); } /* --- 汎用ページ --- */ .page-main { padding: var(--space-16) 0; } /* * ヒーロー(.hero-section / .service-hero)がページ直下の最初の要素になる場合、 * .page-main の上パディングと二重に空いてしまう(canvas色の隙間 → 紺の帯、の順で見える)ため * 上側だけ相殺する。下側のパディングはCTA等の後の余白として残す。 */ .page-main:has(> .hero-section:first-child), .page-main:has(> .service-hero:first-child) { padding-top: 0; } /* * 事業内容トップの末尾(.business-links-section、紺背景)がそのままフッター(同じ紺背景)に * 続く場合、.page-mainの下パディングと.site-footerのmargin-topがどちらもcanvas色(明るい灰)の * 帯として間に挟まり、紺→薄灰→紺という不自然な切れ目になってしまう。両方をゼロにして * 紺が途切れないようにする。 */ .page-main:has(> .business-links-section:last-child) { padding-bottom: 0; } .page-main:has(> .business-links-section:last-child) + .site-footer { margin-top: 0; } .page-main .lead { color: var(--slate); } /* * --- 汎用ページ(templates/page.html): 主にプライバシーポリシー系のページ --- * 実サイト(invest-online.co.jp/privacy-policy/)のCSS(privacy-policy.css)を確認して * 移植した構成(2026-08発注者フィードバック): タイトルを英語主見出し/日本語副題の2段構成にし * (title_en front matterがあるページのみ)、本文全体を .container--narrow の中央カラムに * 収め、見出し・表のフォントサイズを実サイト相当に縮小した。 */ .page-title-block { text-align: center; margin-bottom: var(--space-8); } .page-title-en { font-size: var(--font-size-h2); color: var(--navy); letter-spacing: 0.04em; } .page-title-ja { margin: var(--space-2) 0 0; font-size: var(--font-size-caption); letter-spacing: 0.08em; color: var(--slate); } /* 実サイトは本文を .sec{text-align:justify} で両端揃えにし、見出し(.section-title2)は 22px・左揃えでその中に置く。表は14px相当に縮小し、見出し(th)に網掛けを付けている。 本文フォントサイズは発注者フィードバックにより実サイト相当までさらに縮小(15px)、 見出しと直前の本文との間隔も広げた(見出しmargin-top側で確保し、段落側にも明示的な margin-bottomを持たせて、ブラウザ既定のマージン相殺に依存しないようにしている)。 */ .page-body { font-size: 0.9375rem; } .page-body h2 { font-size: 1.375rem; text-align: left; margin-top: var(--space-12); margin-bottom: var(--space-3); } .page-body h3 { font-size: 1.125rem; text-align: left; margin-top: var(--space-8); margin-bottom: var(--space-2); } .page-body p, .page-body li { text-align: justify; } .page-body p { margin: 0 0 var(--space-4); } .page-body img { display: block; width: 100%; height: auto; margin: var(--space-6) 0; border-radius: var(--radius-sm); } .page-body table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0 var(--space-8); font-size: 0.875rem; background: var(--panel); } .page-body th, .page-body td { border: 1px solid var(--line); padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; } .page-body th { background: var(--canvas); font-weight: 600; } .page-body th:first-child, .page-body td:first-child { width: 30%; } /* * 2026-08-27発注者フィードバック: プライバシーマークのロゴが実サイト(invest-online.co.jp/privacy-policy/) * より大幅に大きく表示されていた。原因は `.page-body img`(width:100%、詳細度0,1,1)の方が * このセレクタ単体(詳細度0,1,0)より詳細度が高く、意図していた width:90px が無視されて * 親要素の幅いっぱいに引き伸ばされていたため。`.page-body img.privacy-mark-badge`と * 詳細度を上げることで確実に上書きする(!importantは使わない)。 */ .page-body img.privacy-mark-badge { display: block; width: 90px; height: auto; margin: var(--space-4) 0; } /* * --- ヒーロー背景画像(トップページ/サービス詳細で共用) --- * 各テンプレート側で要素に `style="--hero-bg-image: url('...');"` を指定し、 * このクラスを付けたときだけ画像+紺のオーバーレイ(グラデーション)を重ねる。 * オーバーレイの色は tokens.css のトークンのみを使用し(直接HEX値は書かない)、 * color-mix() で半透明化することで、画像の上でも文字の可読性を確保する。 */ .hero-bg-image { background-image: linear-gradient( 180deg, color-mix(in srgb, var(--navy) 30%, transparent) 0%, color-mix(in srgb, var(--navy-deep) 60%, transparent) 100% ), var(--hero-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; } /* --- トップページ ヒーロー --- */ .hero-section { /* JSでのカルーセル切り替え前(または無効時)のフォールバックは1枚目のスライドが担う。 */ background-color: var(--navy); color: var(--on-navy-text); padding: var(--space-24) 0 var(--space-16); position: relative; overflow: hidden; /* * PCで下に余白(canvas色の隙間)ができ没入感がないという指摘を受け、最低でも * ビューポート1画面分の高さを確保する。内容がそれより長い場合は min-height なので * 素直に伸びる(高さを固定するとテキストが多いときにはみ出すため height は使わない)。 * 100dvh対応ブラウザではアドレスバー等を考慮した実際の可視高さになるよう、 * 100vh(フォールバック)を先に書き、対応ブラウザ向けに100dvhで上書きする。 */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; /* * 唯一のflexアイテムである .hero-content を縦方向中央寄せにする。 * 上下パディングが非対称(上96px/下64px)なぶん、中央寄せでも見た目はやや上寄りになり、 * 従来の見た目(paddingだけで高さが決まっていた頃)に近い配置を保てる。 * (下寄せ(flex-end)を一度試したが、発注者の指示で中央寄せに戻した) */ justify-content: center; } .hero-section h1 { color: var(--on-navy-text); max-width: 18ch; /* 見出し標準(h1,h2,h3)は既にゴシック体だが、ヒーローは他の見出しよりさらに太くして キーメッセージ("Invest on evidence")の存在感を出す。 */ font-weight: 700; letter-spacing: 0.01em; } /* * --- トップページ ヒーロー: 自動クロスフェード + ケンバーンズのカルーセル --- * .hero-carousel は .hero-section の全面(paddingを含む領域)を覆う絶対配置レイヤーで、 * 16枚の .hero-slide を重ねて配置する。表示中のスライドだけ opacity:1(is-active)にし、 * transition: opacity で切り替え時にクロスフェードする。 */ .hero-carousel { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; /* テンプレート側のJS(FADE_DURATION_MS)と必ず一致させること。カットごとの表示秒数が 0.8秒程度まで短くなったため、旧来の1.2秒だとフェードが重なりすぎて間延びして見える。 */ transition: opacity .5s ease; } .hero-slide.is-active { opacity: 1; z-index: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; /* 既定は中央。写真自体に文字(看板等)が写っているカットだけ、--hero-focus/ --hero-brightnessを個別に上書きして、ヒーロー文字(h1/リード)と被らない 位置にずらしたり暗くしたりできるようにしている(下の.hero-slide:nth-child(9) 参照。hero-v2-09の「GRANQUAL」看板対応)。インラインstyleではなくここで nth-childとして定義しているのは、メディアクエリでブレークポイントごとに 上書きできるようにするため(インラインstyleは同一要素の通常の stylesheet ルールに優先してしまい、メディアクエリでの出し分けができない)。 */ object-position: var(--hero-focus, center); filter: brightness(var(--hero-brightness, 1)); display: block; transform: scale(1); transform-origin: center; } /* hero-v2-09(「GRANQUAL」看板の写真)専用の調整。看板の文字が大きく、 「Invest on evidence」と重なって読みづらいという発注者フィードバックへの対応。 デスクトップ(横長)は元のhero-v2-09.webpのまま、十分クロップの余白があるため、 ズーム+下寄せのクロップで看板の文字をヒーロー文字より上に逃がし、GRANQUALを フルで読めるようにしている。 スマホは当初、元画像(横長)のままだと看板の文字を逃がす余白が無く、発注者から 縦長構図の別カット(hero-v2-09-mobile.webp、看板が上部1/3・下2/3は空白の壁面)を もらったため、(本ファイルの<= 900pxのsourceタグ参照)でそちらに 差し替えている。縦長カットは看板が画像の左寄りにあるため、object-positionは 左上寄りにして看板が切れないようにしている。 */ .hero-slide:nth-child(9) { --kb-scale-from: 1.3; --kb-scale-to: 1.3; --hero-focus: center 100%; } @media (max-width: 900px) { .hero-slide:nth-child(9) { --kb-scale-from: 1; --kb-scale-to: 1; --hero-focus: 25% 15%; } } /* * ケンバーンズ効果: 全カットが同じ「中央からゆっくりズーム」だけだと単調に感じるため、 * 6パターン(a/b/c/static/out/up)を用意しカットごとに割り当てる(テンプレート側の * `data-kb` を参照)。アニメーション時間はJSが各カットの表示秒数(data-duration)に * 合わせて上書きするため、ここでは動きの質(拡大率・パン方向)だけを定義する。 */ .hero-slide.is-kenburns.kb-a img { animation-name: hero-kenburns-a; } .hero-slide.is-kenburns.kb-b img { animation-name: hero-kenburns-b; } .hero-slide.is-kenburns.kb-c img { animation-name: hero-kenburns-c; } .hero-slide.is-kenburns.kb-static img { animation-name: hero-kenburns-static; } .hero-slide.is-kenburns.kb-out img { animation-name: hero-kenburns-out; } .hero-slide.is-kenburns.kb-up img { animation-name: hero-kenburns-up; } .hero-slide.is-kenburns img { animation-timing-function: ease-out; animation-fill-mode: forwards; } /* * 2026-08-XX デザイナー確定版: 「パララックスが速くて疲れる」「切り替わりが速くて * 落ち着かない」というフィードバックを受け、変化量を全面的に控えめへ調整した。 * カットごとに微妙に異なる数値(表参照)を、共通のキーフレーム構造(scaleのみ/ * translateXのみ/translateYのみ)+ CSSカスタムプロパティのデフォルト値で表現し、 * デフォルトと異なる値が必要なカットだけ templates/home.html 側で * `style="--kb-scale-to: 1.035;"` のようにインラインで上書きする * (`.hero-slide` に付けたカスタムプロパティは子要素の img に継承される)。 * パン系(b/c/up)は今回の確定版でスケール変化を伴わなくなったため、scale(1)固定にした。 */ /* a: 中央からゆっくりズームイン。既定値は#7(hero-v2-07)用、#1は --kb-scale-to で上書き */ @keyframes hero-kenburns-a { from { transform: scale(var(--kb-scale-from, 1)) translate(0, 0); } to { transform: scale(var(--kb-scale-to, 1.04)) translate(0, 0); } } /* b: 左→右パン(スケールは1のまま)。既定値は#2(hero-v2-02)用(唯一の割り当て) */ @keyframes hero-kenburns-b { from { transform: scale(1) translateX(var(--kb-x-from, -0.8%)); } to { transform: scale(1) translateX(var(--kb-x-to, 0.8%)); } } /* c: 右→左パン(スケールは1のまま)。既定値は#10(hero-v2-13)用(唯一の割り当て) */ @keyframes hero-kenburns-c { from { transform: scale(1) translateX(var(--kb-x-from, 0.9%)); } to { transform: scale(1) translateX(var(--kb-x-to, -0.9%)); } } /* * static: ごくわずかな動き(ほぼ静止として見せるためのカット用)。 * 既定値は#3/#4/#11(hero-v2-03/04/14)用、#8は1.02、#9は1.01に --kb-scale-to で上書きする。 */ @keyframes hero-kenburns-static { from { transform: scale(var(--kb-scale-from, 1)) translate(0, 0); } to { transform: scale(var(--kb-scale-to, 1.015)) translate(0, 0); } } /* out: kb-aの逆方向。既定値は#5(hero-v2-05)用、#12(hero-v2-15)は --kb-scale-from で上書き */ @keyframes hero-kenburns-out { from { transform: scale(var(--kb-scale-from, 1.04)) translate(0, 0); } to { transform: scale(var(--kb-scale-to, 1)) translate(0, 0); } } /* up: 下→上パン(スケールは1のまま)。既定値は#6(hero-v2-06)用(唯一の割り当て) */ @keyframes hero-kenburns-up { from { transform: scale(1) translateY(var(--kb-y-from, 1%)); } to { transform: scale(1) translateY(var(--kb-y-to, 0%)); } } /* * オーバーレイはカルーセル全体の上に1枚だけ重ねる(スライドごとに重ねると * クロスフェード中に濃さがちらつくため)。トップページは「メインビジュアルを見せる」 * 比重が高いため、サービス詳細の .hero-bg-image より薄いオーバーレイにする。 * 色は tokens.css のトークンのみを使用し、color-mix() で半透明化する。 */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( 180deg, color-mix(in srgb, var(--navy) 12%, transparent) 0%, color-mix(in srgb, var(--navy-deep) 38%, transparent) 100% ); } .hero-content { position: relative; z-index: 2; } /* * 2026-08発注者フィードバック: トップページヒーロー右側中央に「INVEST ONLINE BIZ」への * 外部リンクバッジを設置(ロボットホームHPの「owner platform site」を参考)。 * 白背景の丸ピル型、英語主(太字)/日本語従(小さいキャプション)の2段テキスト+ * 右端に紺の丸矢印アイコン。 * モバイル幅ではヒーローの見出し・リード文と重なってしまうため非表示にする * (同じ行き先へのリンクはトップページ下部のコンテンツナビゲーションカードにもあるため、 * モバイルでの導線は失われない)。 * * 2026-08追加フィードバック: 「スクロールしても画面に残り続けるように」との指示により * position: absolute(ヒーロー内のみ)から position: fixed(ビューポート基準)に変更。 * ヘッダー(.site-header--transparentのz-index:20)より前面に出るようz-index:25にする。 */ .hero-biz-badge { position: fixed; z-index: 25; right: var(--space-6); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: var(--space-3); /* 2026-08発注者フィードバック: クリムゾン塗りつぶしから、以前の半透明ガラス調に戻す (フローティング/常時表示の挙動はそのまま維持)。目立たせる役割はテキスト自体の 色分け(英語=クリムゾン、日本語=白)に持たせる。 */ background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 999px; padding: var(--space-3) var(--space-4); text-decoration: none; box-shadow: 0 12px 28px rgba(11, 21, 36, 0.22); transition: background-color 0.2s ease, border-color 0.2s ease; } .hero-biz-badge:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.6); } /* * 2026-08発注者フィードバック: position:fixedで常時表示にした結果、ヒーロー(紺の写真)を * 過ぎて背景がグレー(--canvas)のセクションに入ると、半透明ガラス+白文字のコントラストが * 不足し視認しづらくなっていた。ヘッダーが同じスクロール位置(1画面分を超えたら)で * 透過→紺の帯に切り替える`.is-scrolled`と同じタイミング・同じクラス名を、 * partials/header.html の既存スクロールリスナーからこのバッジにも適用し、 * 背景を不透明な紺(--navy)に切り替える。文字色(クリムゾン/白)はそのままで、 * 紺地の上では他のヘッダー・フッターと同じ配色のためコントラストは確保済み。 */ .hero-biz-badge.is-scrolled { background: var(--navy); border-color: var(--navy); } .hero-biz-badge.is-scrolled:hover { background: var(--navy-deep); border-color: var(--navy-deep); } .hero-biz-badge-text { text-align: left; line-height: 1.4; } .hero-biz-badge-en { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.01em; color: var(--crimson); text-shadow: 0 1px 4px rgba(11, 21, 36, 0.5); } .hero-biz-badge-ja { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 4px rgba(11, 21, 36, 0.5); } .hero-biz-badge-arrow { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; } .hero-biz-badge-arrow svg { width: 14px; height: 14px; } @media (max-width: 900px) { .hero-biz-badge { display: none; } } /* 動きを抑えたい環境では、クロスフェード・ケンバーンズとも完全に止める(JS側の早期returnと二重の安全策)。 */ @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } .hero-slide.is-kenburns img { animation: none; transform: none; } } /* h1のブラウザ既定のmargin-bottom(フォントサイズ依存、約29px)が.hero-leadの margin-top:0と合わさってもまだ間延びして見えていたため、ヒーロー内のh1だけ 余白をリセットする(他ページの見出しには影響させないようスコープしている)。 */ .hero-content h1 { margin-bottom: 0; } .hero-lead { margin-top: 0; } .hero-lead p { color: var(--on-navy-text); max-width: 46em; } .hero-lead a { color: var(--on-navy-text); } /* * --- コンテンツナビゲーションセクション(トップページ、ヒーロー直下) --- * design/wireframes/preview.html の `.quicklink-section`(v0.2.2)をベースに、 * 発注者フィードバック(2026-08)を反映して調整した。 * 「会社情報」だけ独立した横長バナー(.quicklink-banner)、それ以外の5項目は * 固定幅カード(.quicklink-card)を横一列に並べ overflow-x: auto で横スクロールさせる * (モバイル幅でも縦積みにせず、固定幅を保ったまま横スクロールする)。 * カード背景画像は各テンプレート側で `style="--qc-bg-image: url('...');"` を指定し、 * .qc-overlay(紺のグラデーション、color-mix()でトークンから半透明化)を重ねて可読性を確保する。 * * 2026-08 発注者フィードバックによる調整: * 1. 導入テキスト(.quicklink-intro)は廃止(テンプレート側でマークアップごと削除済み)。 * 2. カードの横幅を280px→400px程度に拡大し、画像がしっかり見える比率(約16:11)にした。 * 3. qc-cta(CTA文言+矢印)は完全に削除。qc-en(英語)をメインの見出し扱いに、 * qc-label(日本語)を小さいキャプション扱いに、スタイルを入れ替えた * (HTML側のクラス名・要素の並び順は変更していない)。 * 4. セクション背景をページ標準の canvas(白系)から var(--navy-deep) に変更し、 * カード間の隙間に白が見えないようにした。 */ .quicklink-section { padding: var(--space-24) 0 var(--space-12); background-color: var(--navy-deep); color: var(--on-navy-text); } /* 「会社情報」専用の横長バナー(単独1行) */ .quicklink-banner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; padding: var(--space-8); margin-bottom: var(--space-1); color: var(--on-navy-text); text-decoration: none; overflow: hidden; border-radius: var(--radius-sm); } /* 横スクロール行(会社情報以外の5項目、ロボットホームの「topics」行と同じ挙動) */ .quicklink-scroll-wrap { position: relative; padding-bottom: var(--space-6); } .quicklink-scroll { display: flex; gap: var(--space-2); overflow-x: auto; /* * scroll-snap-type/scroll-behavior は意図的に付けていない。どちらもブラウザが * 独自にスクロール位置を動かす機能で、templates/home.html のJS(requestAnimationFrameで * 完全に自前制御しているアニメーション、および複製セットに入った瞬間の瞬時な巻き戻し)と * 競合する。特にscroll-snap-type: proximityは、JSが目標位置へ近づけている最中に * ブラウザが独自に一気に吸着させてしまい、「2秒かけてゆっくり動かしているつもりが * 一瞬で終わる」不具合の原因になっていた。 */ -webkit-overflow-scrolling: touch; /* * 自動スクロール(templates/home.html の {% block scripts %} 参照)に合わせて * ブラウザ標準のスクロールバーは非表示にする。手動のドラッグ/スワイプ操作自体は * (scrollbarが見えないだけで)引き続き機能する。 */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* 旧Edge/IE */ } .quicklink-scroll::-webkit-scrollbar { display: none; /* Chrome/Safari/新Edge */ } /*