/* ============================================================ STOCK VISION — Design System Master CSS パークフィールド株式会社 Version: 0.8.0 (Color Palette + Typography + Buttons + Cards + Tables + Lists + FAQ + Badges) Updated: 2026-05-03 ============================================================ */ /* ------------------------------------------------------------ 1. COLOR PALETTE — カラーパレット ------------------------------------------------------------ */ :root { /* ---------------------------------------------------------- 1-1. Brand Orange — オレンジファミリー 背景色として使用可能（Brand Orangeのみ部分的に許可） Brand Orange背景上のテキストは必ず White を使用すること ---------------------------------------------------------- */ --color-orange: #FF5B0A; /* Brand Orange · Primary · 背景・強調に使用可 */ --color-orange-light: #FF722B; /* Orange Light · Hover / グラデーション補助 */ --color-orange-tint: #FFF3E3; /* Orange Tint · 背景・ハイライト */ /* ---------------------------------------------------------- 1-2. Brand Navy — ネイビーファミリー ---------------------------------------------------------- */ --color-navy: #104071; /* Brand Navy · Secondary · 見出し・強調テキスト */ --color-navy-light: #1A5A9A; /* Navy Light · リンク・アクセント */ --color-navy-tint: #E8F0F8; /* Navy Tint · 背景・カード */ /* ---------------------------------------------------------- 1-3. Neutral — ニュートラル ---------------------------------------------------------- */ /* テキスト */ --color-text-primary: #0A0A0A; /* Text Primary · 本文・見出し */ --color-text-secondary: #434343; /* Text Secondary · サブテキスト・補足 */ --color-text-muted: #999999; /* Text Muted · キャプション・無効状態 */ /* サーフェス・背景 */ --color-white: #FFFFFF; /* White · ベース背景・カード */ --color-surface-1: #F3F3F3; /* Surface 1 · セクション背景 */ --color-surface-2: #EFEFEF; /* Surface 2 · カード・テーブル背景 */ /* ボーダー */ --color-border: #D9D9D9; /* Border · 区切り線・ボーダー */ /* ---------------------------------------------------------- 1-4. 使用ルール（コメントで明記） - 背景色として使えるもの： --color-white / --color-surface-1 / --color-surface-2 --color-orange-tint / --color-navy-tint --color-orange（部分的に可） - 禁止：黒・ダークグレー・ネイビーなど濃い背景色 （印刷時のプリンター負荷を考慮） - --color-orange 背景上のテキストは必ず --color-white - 本文テキストはWCAG AA（コントラスト比4.5:1）以上を確保 ---------------------------------------------------------- */ } /* ------------------------------------------------------------ 2. TYPOGRAPHY — タイポグラフィ ------------------------------------------------------------ */ /* * Google Fonts 読み込み * HTMLの 内に下記を記述すること： * * * * */ :root { /* ---------------------------------------------------------- 2-1. Font Family ---------------------------------------------------------- */ --font-base: 'Murecho', sans-serif; /* ---------------------------------------------------------- 2-2. Font Weight ---------------------------------------------------------- */ --font-weight-regular: 400; /* 本文・キャプション */ --font-weight-bold: 700; /* サブ見出し・強調 */ --font-weight-black: 900; /* メイン見出し */ /* ---------------------------------------------------------- 2-3. Font Size Scale ---------------------------------------------------------- */ --font-size-xs: 12px; /* キャプション・注釈 */ --font-size-sm: 14px; /* 補足テキスト・ラベル */ --font-size-base: 16px; /* 本文（基準） */ --font-size-md: 18px; /* リード文・強調本文 */ --font-size-lg: 24px; /* 小見出し（H3相当） */ --font-size-xl: 32px; /* 中見出し（H2相当） */ --font-size-2xl: 48px; /* 大見出し（H1相当） */ --font-size-3xl: 64px; /* ヒーロー見出し */ /* ---------------------------------------------------------- 2-4. Line Height ---------------------------------------------------------- */ --line-height-tight: 1.3; /* 見出し */ --line-height-normal: 1.7; /* 本文 */ --line-height-loose: 1.9; /* リード文・読みやすさ優先 */ /* ---------------------------------------------------------- 2-5. Letter Spacing ---------------------------------------------------------- */ --letter-spacing-tight: -0.01em; /* 大見出し（詰め気味） */ --letter-spacing-normal: 0.02em; /* 本文（標準） */ --letter-spacing-wide: 0.08em; /* ラベル・キャプション */ } /* ---------------------------------------------------------- 2-6. Base Styles — ベーススタイル ---------------------------------------------------------- */ body { font-family: var(--font-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-base); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); color: var(--color-text-primary); background: var(--color-white); -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------- 2-7. Heading Styles — 見出しスタイル ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { word-break: auto-phrase; } h1 { font-size: var(--font-size-2xl); /* 48px */ font-weight: var(--font-weight-black); /* 900 */ line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-navy); } h2 { font-size: var(--font-size-xl); /* 32px */ font-weight: var(--font-weight-black); /* 900 */ line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-navy); } h3 { font-size: var(--font-size-lg); /* 24px */ font-weight: var(--font-weight-bold); /* 700 */ line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-normal); color: var(--color-text-primary); } h4 { font-size: var(--font-size-md); /* 18px */ font-weight: var(--font-weight-bold); /* 700 */ line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-normal); color: var(--color-text-primary); } /* ---------------------------------------------------------- 2-8. Body & Utility Styles — 本文・ユーティリティ ---------------------------------------------------------- */ p { font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); color: var(--color-text-primary); } /* リード文（ファーストビュー直下などに使用） */ .text-lead { font-size: var(--font-size-md); /* 18px */ line-height: var(--line-height-loose); color: var(--color-text-secondary); } /* キャプション・注釈 */ .text-caption { font-size: var(--font-size-xs); /* 12px */ letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); } /* ラベル・タグ */ .text-label { font-size: var(--font-size-sm); /* 14px */ font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wide); } /* ヒーロー見出し（ファーストビュー専用） */ .text-hero { font-size: clamp(24px, 5vw, 32px); font-weight: var(--font-weight-black); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-navy); } /* オレンジ強調（見出し内の一部ワードに使用） 用途：ヒーロー・大見出し内で特定ワードを Brand Orange で強調する 使い方：

売れる理由がわかる。

注意：必ず太ウェイト（700以上）の見出し内で使うこと。本文中での使用は不可。 */ .text-accent { color: var(--color-orange); } /* ---------------------------------------------------------- 2-9. 背景色別テキストカラールール 背景クラスをブロックに付けるだけで、内部の見出し・本文カラーが 自動的に切り替わる。個別にcolorを指定する必要はない。 使い方：

...

...

┌─────────────────┬──────────────┬──────────────────┐ │ 背景クラス │ 見出し色 │ 本文色 │ ├─────────────────┼──────────────┼──────────────────┤ │ .bg-orange │ White │ White │ │ .bg-orange-tint │ Brand Navy │ Text Primary │ │ .bg-navy-tint │ Brand Navy │ Text Primary │ │ .bg-surface-1 │ Brand Navy │ Text Primary │ └─────────────────┴──────────────┴──────────────────┘ コントラスト比（WCAG AA 4.5:1 以上） · .bg-orange 見出し/本文 White : 約 4.7:1 ✓ · .bg-orange-tint 見出し Navy : 約 7.0:1 ✓ · .bg-navy-tint 見出し Navy : 約 7.2:1 ✓ · .bg-surface-1 見出し Navy : 約 8.1:1 ✓ ---------------------------------------------------------- */ /* Brand Orange 背景（テキストはすべてWhite） */ .bg-orange { background: var(--color-orange); } .bg-orange h1, .bg-orange h2, .bg-orange h3, .bg-orange h4 { color: var(--color-white); } .bg-orange p { color: var(--color-white); } /* Orange Tint 背景 */ .bg-orange-tint { background: var(--color-orange-tint); } .bg-orange-tint h1, .bg-orange-tint h2, .bg-orange-tint h3, .bg-orange-tint h4 { color: var(--color-navy); } .bg-orange-tint p { color: var(--color-text-primary); } /* Navy Tint 背景 */ .bg-navy-tint { background: var(--color-navy-tint); } .bg-navy-tint h1, .bg-navy-tint h2, .bg-navy-tint h3, .bg-navy-tint h4 { color: var(--color-navy); } .bg-navy-tint p { color: var(--color-text-primary); } /* Surface 1 背景 */ .bg-surface-1 { background: var(--color-surface-1); } .bg-surface-1 h1, .bg-surface-1 h2, .bg-surface-1 h3, .bg-surface-1 h4 { color: var(--color-navy); } .bg-surface-1 p { color: var(--color-text-primary); } /* ------------------------------------------------------------ 3. COMPONENTS — コンポーネント ------------------------------------------------------------ */ /* ---------------------------------------------------------- 3-1. Button — ボタン マークアップ例： サイズ修飾子： .btn-lg → 大（ヒーロー・CTAセクション用） （なし） → 中（標準） .btn-sm → 小（テキスト周辺・補助ボタン用） Brand Orange 背景上での使用： Primary → background: White / color: Orange / border: White Secondary→ background: transparent / color: White / border: White ---------------------------------------------------------- */ .btn { font-family: var(--font-base); font-weight: var(--font-weight-bold); /* 700 */ font-size: var(--font-size-base); /* 16px */ letter-spacing: 0.03em; line-height: 1.3; padding: 14px 32px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; display: inline-block; text-decoration: none; transition: opacity 0.15s, background 0.15s, border-color 0.15s; white-space: nowrap; } /* Primary（強）: Brand Orange 背景 + White テキスト */ .btn-primary { background: var(--color-orange); color: var(--color-white); border-color: var(--color-orange); } .btn-primary:hover { background: var(--color-orange-light); border-color: var(--color-orange-light); } /* Secondary（弱）: White 背景 + Orange ボーダー + Black テキスト */ .btn-secondary { background: var(--color-white); color: var(--color-text-primary); border-color: var(--color-orange); } .btn-secondary:hover { background: var(--color-orange-tint); } /* Brand Orange 背景上での上書き .bg-orange セクション内に置くだけで自動的に適切なスタイルに切り替わる Primary → White 背景 + Orange テキスト + White ボーダー Secondary→ 透明背景 + White テキスト + White ボーダー */ .bg-orange .btn-primary { background: var(--color-white); color: var(--color-orange); border-color: var(--color-white); } .bg-orange .btn-primary:hover { background: var(--color-orange-tint); border-color: var(--color-orange-tint); } .bg-orange .btn-secondary { background: transparent; color: var(--color-white); border-color: var(--color-white); } .bg-orange .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); } /* Large */ .btn-lg { font-size: var(--font-size-md); /* 18px */ padding: 18px 40px; } /* Small */ .btn-sm { font-size: var(--font-size-sm); /* 14px */ padding: 9px 22px; border-radius: 6px; } /* ---------------------------------------------------------- 3-2. Card — カード マークアップ例（アイコンパターン）：
何を発注すべきか
最適発注レコメンド （5月リリース予定）
説明テキスト。強調は自動提案
マークアップ例（番号パターン）：
1
タイトル
説明テキスト
レイアウト： .card-grid に flex-wrap: wrap を使用。 メディアクエリによるブレイクポイント切替は行わない。 カラム数はコンテナ幅と flex: 1 1 200px により自動調整される。 高さ揃え： .card が flex-direction: column、 .card-body が flex: 1、 .card-desc が margin-top: auto により、 説明文の開始位置が自動的に揃う。 ---------------------------------------------------------- */ .card-grid { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 1 1 200px; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-white); display: flex; flex-direction: column; } .card-header { background: var(--color-orange); color: var(--color-white); font-weight: var(--font-weight-bold); /* 700 */ font-size: var(--font-size-base); /* 16px */ line-height: var(--line-height-tight); padding: 14px 18px; text-align: center; } .card-body { padding: 24px 18px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; } /* アイコン（SVG画像を差し込む） */ .card-icon { width: 56px; height: 56px; } /* 番号バッジ */ .card-number { width: 40px; height: 40px; border-radius: 50%; background: var(--color-orange); color: var(--color-white); font-size: 18px; font-weight: var(--font-weight-black); /* 900 */ display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* カード内見出し */ .card-title { color: var(--color-orange); font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-bold); /* 700 */ text-align: center; line-height: var(--line-height-tight); } /* カード内見出しのサブノート（括弧書きなど） */ .card-title-note { display: block; font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-regular); color: var(--color-text-muted); margin-top: 2px; } /* カード内説明文：margin-top: auto で説明文開始位置を揃える */ .card-desc { color: var(--color-text-primary); font-size: var(--font-size-sm); /* 14px */ line-height: var(--line-height-normal); text-align: left; width: 100%; margin-top: auto; } /* ---------------------------------------------------------- Card — Header カラーバリアント デフォルトは .card-header（Brand Orange）。 以下の修飾クラスで上書きする。 ---------------------------------------------------------- */ /* Navy ヘッダー（.card--navy と組み合わせて使う） */ .card--navy .card-header { background: var(--color-navy); } /* Gray ヘッダー（対比・比較カードなどで使用） */ .card-header--gray { background: var(--color-surface-2); color: var(--color-text-secondary); } .card--navy .card-number { background: var(--color-navy); } .card--navy .card-title { color: var(--color-navy); } /* リンクカード（）*/ a.card { text-decoration: none; color: inherit; transition: background 0.15s, box-shadow 0.15s, transform 0.15s; } a.card:hover { background: var(--color-orange-tint); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } /* ---------------------------------------------------------- 3-3. Table — テーブル マークアップ例：
項目 優先順位
カート周辺パネルでCVRを改善 ① 即効性最高
見出しセルの色： .th-orange → Brand Orange 背景 + White テキスト .th-navy → Brand Navy 背景 + White テキスト 列ごとに自由に組み合わせ可能。thead全体への指定は行わない。 データ行：Surface 2（#EFEFEF）背景 + Text Primary テキスト 強調セル（tbody内）： .cell-accent → Brand Orange テキスト + Bold .cell-accent-navy → Brand Navy テキスト + Bold ---------------------------------------------------------- */ .sv-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); /* 14px */ font-family: var(--font-base); } .sv-table th, .sv-table td { padding: 12px 16px; text-align: left; line-height: var(--line-height-normal); } /* 見出しセル — Orange */ .sv-table th.th-orange { background: var(--color-orange); color: var(--color-white); font-weight: var(--font-weight-bold); } /* 見出しセル — Navy */ .sv-table th.th-navy { background: var(--color-navy); color: var(--color-white); font-weight: var(--font-weight-bold); } /* データ行 */ .sv-table tbody tr { background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); } .sv-table tbody tr:last-child { border-bottom: none; } .sv-table tbody td { color: var(--color-text-primary); } /* 強調セル */ .sv-table td.cell-accent { color: var(--color-orange); font-weight: var(--font-weight-bold); } .sv-table td.cell-accent-navy { color: var(--color-navy); font-weight: var(--font-weight-bold); } /* ---------------------------------------------------------- 3-4. Ordered List — 順番リスト マークアップ例： バリアント： .list-orange → 番号バッジが Brand Orange .list-navy → 番号バッジが Brand Navy .list-desc は省略可能。タイトルのみでも成立する。 ---------------------------------------------------------- */ .sv-list { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; } .sv-list li { display: flex; align-items: center; gap: 20px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 6px; padding: 18px 20px; } /* 番号バッジ */ .sv-list .list-number { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: var(--font-weight-black); /* 900 */ flex-shrink: 0; } /* Orange バリアント */ .sv-list.list-orange .list-number { background: var(--color-orange); color: var(--color-white); } /* Navy バリアント */ .sv-list.list-navy .list-number { background: var(--color-navy); color: var(--color-white); } /* タイトル */ .sv-list .list-title { font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-bold); /* 700 */ line-height: var(--line-height-tight); color: var(--color-text-primary); } /* 説明文（省略可） */ .sv-list .list-desc { font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-secondary); line-height: var(--line-height-normal); margin-top: 4px; } /* ---------------------------------------------------------- 3-5. FAQ — よくある質問（折り畳み式） 実装：CSSのみで動作する
/ を使用。 JavaScriptは不要。 マークアップ例：
Q 質問テキスト

回答テキスト

最初から展開した状態にする場合は
と記述する。 回答内リンクは タグで記述し、色は自動でorangeが適用される。 ---------------------------------------------------------- */ .sv-faq { display: flex; flex-direction: column; } .sv-faq-item, .sv-faq details { border-bottom: 1px solid var(--color-border); background: var(--color-white); } .sv-faq details:first-child { border-top: 1px solid var(--color-border); } /* 質問行 */ .sv-faq-question { display: flex; align-items: center; gap: 16px; padding: 20px; cursor: pointer; user-select: none; list-style: none; } .sv-faq-question::-webkit-details-marker { display: none; } /* Q マーク */ .sv-faq-q { font-size: 18px; font-weight: var(--font-weight-black); /* 900 */ color: var(--color-orange); flex-shrink: 0; width: 20px; } /* 質問テキスト */ .sv-faq-question-text { font-size: var(--font-size-base); /* 16px */ font-weight: var(--font-weight-bold); /* 700 */ color: var(--color-text-primary); flex: 1; line-height: var(--line-height-tight); } /* ＋／× トグルボタン */ .sv-faq-toggle { width: 32px; height: 32px; border-radius: 50%; background: var(--color-orange); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; flex-shrink: 0; transition: background 0.15s; } .sv-faq-toggle::before { content: '+'; } details[open] .sv-faq-toggle { background: var(--color-orange-light); } details[open] .sv-faq-toggle::before { content: '×'; } /* 回答エリア */ .sv-faq-answer { padding: 0 20px 20px 56px; } .sv-faq-answer p { font-size: var(--font-size-sm); /* 14px */ color: var(--color-text-secondary); line-height: var(--line-height-loose); margin-top: 10px; } .sv-faq-answer p:first-child { margin-top: 0; } /* 回答内リンク */ .sv-faq-answer a { color: var(--color-orange); font-weight: var(--font-weight-bold); text-decoration: none; } .sv-faq-answer a:hover { text-decoration: underline; } /* ---------------------------------------------------------- 3-6. Badge — バッジ・ラベル マークアップ例： ✓ デジタル化・AI導入補助金2026 認定ツール 14日間無料 makeshop公式アプリ バリアント： .badge-outline-orange 枠線のみ Orange（白背景・フッター向け） .badge-outline-navy 枠線のみ Navy .badge-filled-orange 塗りつぶし Orange（強調・CTA向け） .badge-filled-navy 塗りつぶし Navy .badge-tint-orange 薄い背景 Orange（カード内・淡い強調向け） .badge-tint-navy 薄い背景 Navy Brand Orange / Navy 背景上での使用： color: White / border: White / background: transparent → Outline White color: Orange or Navy / border: White / background: White → Filled White ---------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-base); font-size: var(--font-size-sm); /* 14px */ font-weight: var(--font-weight-bold); line-height: 1; padding: 6px 12px; border-radius: 4px; white-space: nowrap; } /* Outline Orange — 枠線のみ */ .badge-outline-orange { color: var(--color-orange); border: 1.5px solid var(--color-orange); background: transparent; } /* Outline Navy — 枠線のみ */ .badge-outline-navy { color: var(--color-navy); border: 1.5px solid var(--color-navy); background: transparent; } /* Filled Orange — 塗りつぶし */ .badge-filled-orange { color: var(--color-white); background: var(--color-orange); border: 1.5px solid var(--color-orange); } /* Filled Navy — 塗りつぶし */ .badge-filled-navy { color: var(--color-white); background: var(--color-navy); border: 1.5px solid var(--color-navy); } /* Tint Orange — 薄い背景 */ .badge-tint-orange { color: var(--color-orange); background: var(--color-orange-tint); border: 1.5px solid var(--color-orange-tint); } /* Tint Navy — 薄い背景 */ .badge-tint-navy { color: var(--color-navy); background: var(--color-navy-tint); border: 1.5px solid var(--color-navy-tint); } /* ------------------------------------------------------------ 4. LAYOUT — 共通レイアウト ------------------------------------------------------------ */ /* コンテナ（最大幅・中央揃え） */ .sv-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } /* セクション余白 */ .sv-section { padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 40px); } /* セクション見出し中央揃えブロック */ .sv-section-header { text-align: center; margin-bottom: clamp(20px, 3vw, 36px); } .sv-section-header h2 { margin-bottom: 8px; } .sv-section-header p { color: var(--color-text-secondary); font-size: var(--font-size-md); } /* ------------------------------------------------------------ 5. HEADER — 共通ヘッダー ------------------------------------------------------------ */ .sv-header { position: sticky; top: 0; z-index: 100; background: var(--color-white); border-bottom: 1px solid var(--color-border); } .sv-header-inner { max-width: 1200px; margin: 0 auto; padding: 10px clamp(16px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; } .sv-header-logo img { height: 36px; width: auto; display: block; } .sv-header-nav { flex: 1; display: flex; justify-content: center; } .sv-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 8px; } .sv-hamburger-bar { display: block; width: 22px; height: 2px; background: var(--color-navy); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } .sv-hamburger.is-open .sv-hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sv-hamburger.is-open .sv-hamburger-bar:nth-child(2) { opacity: 0; } .sv-hamburger.is-open .sv-hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .sv-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 32px); list-style: none; margin: 0; padding: 0; } .sv-nav-link { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-primary); text-decoration: none; transition: color 0.15s; } .sv-nav-link:hover { color: var(--color-orange); } @media (max-width: 900px) { .sv-hamburger { display: flex; } .sv-header-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); border-top: 1px solid var(--color-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 8px 0 16px; } .sv-header-nav.is-open { display: block; } .sv-header-nav .sv-nav { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 clamp(16px, 4vw, 40px); } .sv-header-nav .sv-nav li { width: 100%; } .sv-header-nav .sv-nav-link { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-border); } .sv-header-nav .sv-nav li:last-child .sv-nav-link { border-bottom: none; } } /* ------------------------------------------------------------ 6. FOOTER — 共通フッター ------------------------------------------------------------ */ .sv-footer { background: var(--color-surface-1); border-top: 1px solid var(--color-border); padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 40px); } .sv-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); justify-content: space-between; align-items: flex-start; } .sv-footer-brand { display: flex; flex-direction: column; gap: 12px; flex: 1 1 260px; } .sv-footer-logo { height: 32px; width: auto; display: block; } .sv-footer-company { font-size: var(--font-size-sm); font-style: normal; color: var(--color-text-secondary); line-height: var(--line-height-loose); } .sv-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; } .sv-footer-link { font-size: var(--font-size-sm); color: var(--color-text-secondary); text-decoration: none; transition: color 0.15s; } .sv-footer-link:hover { color: var(--color-orange); } .sv-footer-bottom { max-width: 1200px; margin: clamp(24px, 3vw, 36px) auto 0; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; } .sv-footer-bottom a { color: var(--color-text-muted); text-decoration: none; } .sv-footer-bottom a:hover { color: var(--color-orange); text-decoration: underline; }