/* ============================================================= ブランドデザイントークン v1.1（2026-07-12 更新）福岡シニアサポート／ Ai-biz行政書士事務所運用ルール：--brand-primary の差し替えのみでブランド切替。他のトークンは両ブランド共通・変更禁止。 v1.1：A4書類レイヤー（.doc-*）追加。正本＝ブランドガイドライン v1.6 §16 ============================================================= */ :root { /* ---- 共通基盤（両ブランド固定） ---- */ --base-bg: #FAF6F0; /* 温かいオフホワイト（米糠色）。真っ白は使わない */ --text-main: #333333; /* 墨色。#000 は使わない */ --text-sub: #6B6258; /* 補足テキスト用の温かいグレー */ --neutral: #A89B8C; /* グレージュ。罫線・背景の区切りに */ --accent: #E08E45; /* 柿色。強調・CTA周辺の共通アクセント */ /* ---- LINE専用色（変更・流用禁止） ---- */ --line-green: #06C755; /* 公式LINEボタン専用。他用途で緑ボタンを作らない */ /* ---- タイポグラフィ ---- */ --font-heading: "Noto Sans JP", sans-serif; /* 見出し：weight 700 */ --font-body: "BIZ UDPGothic", "Noto Sans JP", sans-serif; /* 本文：UD対応 */ /* 書体はこの2つで打ち止め。追加禁止 */ /* ---- 文字サイズ下限（シニア向け印刷物） ---- */ --min-body-print: 12pt; /* チラシ本文の下限 */ --line-height: 1.7; /* 本文行間 */ /* ---- 形状 ---- */ --radius: 10px; /* 角丸は8〜12pxの範囲。柔らかく */ --spacing-unit: 8px; /* 余白は8の倍数。詰め込まない */ } /* ============ 福岡シニアサポート（シニア・家族・ケアマネ向け） ============ */ .brand-senior { --brand-primary: #5F7454; /* モスグリーン（枯れない緑にトーン調整済み） */ --brand-primary-dark: #4A5C42; /* 見出し・フッター用の深緑 */ --brand-tint: #EEF2EA; /* 淡い緑がかった背景。セクション区切りに */ } /* ============ Ai-biz行政書士事務所（AI・補助金・許認可／B2B） ============ */ .brand-aibiz { --brand-primary: #1F3A5F; /* ディープネイビー（士業王道の信頼色） */ --brand-primary-dark: #16293F; --brand-tint: #EBF0F6; /* 淡いネイビーがかった背景 */ } /* ============ 共通コンポーネント例 ============ */ /* CTAボタン（LINE誘導）：緑はLINE専用 */ .btn-line { background: var(--line-green); color: #FFFFFF; border-radius: var(--radius); font-family: var(--font-heading); font-weight: 700; /* 文言は「公式LINEで無料相談」で統一 */ } /* サブCTA（電話・フォームなど）：ブランド色を使用 */ .btn-primary { background: var(--brand-primary); color: #FFFFFF; border-radius: var(--radius); } /* 実績帯（現在は保留。実績蓄積後に有効化する将来スロット） .stats-band { background: var(--brand-tint); ここに「相談件数◯件」「許可件数◯件」等を横並びで配置 } */ /* ============================================================= A4書類レイヤー v1.1（ガイドライン §16 準拠）使い方：のようにブランドクラス＋ .doc ＋クラス濃度（.doc-a / .doc-b / .doc-c）を併用。クラスA＝営業・提案（フル適用）／B＝実務・報告（控えめ）／ C＝法務・金銭（装飾なし。契約書・見積書・請求書・委任状） ============================================================= */ /* ---- ページ設定（Chrome印刷/PDF化前提） ---- */ @page { size: A4; margin: 20mm 18mm; } @page legal { margin: 20mm 18mm 20mm 22mm; } /* 契約書：綴じ代を左に */ .doc { background: var(--base-bg); color: var(--text-main); font-family: var(--font-body); line-height: 1.7; } /* ---- 本文サイズ：B2C（シニア向け）は12pt下限、B2B/法務は10.5〜11pt ---- */ .doc { font-size: 12pt; } /* 既定＝シニア可読性優先 */ .doc-b2b { font-size: 10.5pt; line-height: 1.6; } .doc-c { font-size: 10.5pt; line-height: 1.6; page: legal; } /* ---- 見出し ---- */ .doc h1, .doc .doc-h1 { font-family: var(--font-heading); font-weight: 700; font-size: 16pt; color: var(--brand-primary-dark); margin: calc(var(--spacing-unit) * 3) 0 var(--spacing-unit); } .doc h2, .doc .doc-h2 { font-family: var(--font-heading); font-weight: 700; font-size: 13pt; color: var(--text-main); border-left: 3px solid var(--brand-primary); padding-left: var(--spacing-unit); margin: calc(var(--spacing-unit) * 2) 0 var(--spacing-unit); } .doc small, .doc .doc-note { font-size: 9pt; color: var(--text-sub); } /* ---- 表紙（クラスA専用） ---- */ .doc-cover { min-height: 257mm; position: relative; display: flex; flex-direction: column; } .doc-cover .doc-title { font-family: var(--font-heading); font-weight: 700; font-size: 26pt; color: var(--brand-primary-dark); line-height: 1.4; } .doc-cover .doc-issuer { position: absolute; right: 0; bottom: 18mm; text-align: right; } .doc-cover::after { /* 下端のブランド細帯（高さ6mm） */ content: ""; position: absolute; left: -18mm; right: -18mm; bottom: -20mm; height: 6mm; background: var(--brand-primary); } /* ---- ヘッダー／フッター ---- */ .doc-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--spacing-unit); border-bottom: 0.5pt solid var(--neutral); margin-bottom: calc(var(--spacing-unit) * 3); } .doc-footer { font-size: 8.5pt; color: var(--text-sub); border-top: 0.5pt solid var(--neutral); padding-top: calc(var(--spacing-unit) / 2); display: flex; justify-content: space-between; } /* ---- 4連ドット（§9-1：色順固定。クラスA/Bのヘッダー左肩用） ---- */ .dots4 { display: inline-flex; gap: 0.9em; } .dots4 i { width: 1em; height: 1em; border-radius: 50%; display: inline-block; } .brand-senior .dots4 i:nth-child(1) { background: #5F7454; } .brand-senior .dots4 i:nth-child(2) { background: #E08E45; } .brand-senior .dots4 i:nth-child(3) { background: #A89B8C; } .brand-senior .dots4 i:nth-child(4) { background: #4A5C42; } .brand-aibiz .dots4 i:nth-child(1) { background: #1F3A5F; } .brand-aibiz .dots4 i:nth-child(2) { background: #E08E45; } .brand-aibiz .dots4 i:nth-child(3) { background: #A89B8C; } .brand-aibiz .dots4 i:nth-child(4) { background: #16293F; } .doc-c .dots4 { display: none; } /* 法務書類にドットは置かない */ /* ---- 表 ---- */ .doc table { border-collapse: collapse; width: 100%; font-size: inherit; } .doc th { background: var(--brand-tint); color: var(--brand-primary-dark); font-family: var(--font-heading); font-weight: 700; border: 0.5pt solid var(--neutral); padding: calc(var(--spacing-unit) * 0.75); } .doc td { border: 0.5pt solid var(--neutral); padding: calc(var(--spacing-unit) * 0.75); } .doc table { border: 1pt solid var(--neutral); } .doc-c th { background: transparent; color: var(--text-main); } /* 法務書類はtintも外す */ /* ---- 囲み（コールアウト。クラスA/Bのみ） ---- */ .doc-callout { background: var(--brand-tint); border-radius: 8px; padding: calc(var(--spacing-unit) * 2); margin: calc(var(--spacing-unit) * 2) 0; } .doc-c .doc-callout { background: transparent; border: 0.5pt solid var(--neutral); border-radius: 0; } /* ---- 柿色1語装飾（§8：1紙面1箇所まで。クラスAのみ使用可） ---- */ .kaki-quote { color: var(--accent); font-weight: 700; } .kaki-quote::before { content: "\201C"; } .kaki-quote::after { content: "\201D"; } /* ---- 署名・押印欄（クラスC） ---- */ .doc-sign { margin-top: calc(var(--spacing-unit) * 4); } .doc-sign .party { margin-bottom: calc(var(--spacing-unit) * 3); } .doc-sign .line { border-bottom: 1pt solid var(--text-main); min-width: 60mm; display: inline-block; } .doc-sign .seal { width: 18mm; height: 18mm; border: 0.5pt solid var(--neutral); border-radius: 50%; display: inline-block; vertical-align: middle; color: var(--text-sub); font-size: 8pt; text-align: center; line-height: 18mm; }