/* ============================================================ 複眼道場 — 共有デザイン基盤 (design.css) 単一の色/フォント/余白/部品の定義元。全ページはこれをする。方針: - トークン（--fk-*）はロゴのティール #1A807F を基準に統一。 - トークンと .fk-* クラスは「参照するまで無害」。linkしただけでは既存の見た目を壊さない。 - 各ページはローカルCSSを段階的に var(--fk-*) と .fk-* に置き換えて寄せていく。 ============================================================ */ /* ---- Webfont（1箇所で管理）---- */ @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Shippori+Mincho:wght@600;700;800&display=swap'); :root { /* --- ブランド（ロゴのティール）--- */ --fk-teal: #1A807F; --fk-teal-deep: #136463; --fk-teal-light: #4A9E97; --fk-teal-soft: #E4F0EE; /* --- カテゴリ・アクセント（各診断/記事の色分け）--- */ --fk-gold: #B8862D; --fk-gold-soft: #F6E8C2; --fk-blue: #3D5A80; --fk-blue-soft: #EDF1F7; --fk-purple: #7B5EA0; --fk-purple-soft: #F3EFF8; --fk-terra: #C65D2E; --fk-terra-soft: #FBF0E8; --fk-green: #2E7D5B; --fk-green-soft: #EAF3EE; --fk-rust: #A85A3D; --fk-rust-soft: #F8EFEA; /* --- ニュートラル --- */ --fk-ink: #28322E; /* 本文 */ --fk-sub: #6E7772; /* 補足テキスト */ --fk-bg: #F7F5EF; /* 背景（温かい紙色）*/ --fk-card: #FFFFFF; --fk-line: #E6E2D6; /* 罫線・カード境界 */ /* --- 状態色 --- */ --fk-beta: #9AA1A8; --fk-beta-soft: #EEF0F2; /* --- タイポグラフィ --- */ --fk-font: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; --fk-font-mincho: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; --fk-lh: 1.75; /* --- 角丸 --- */ --fk-r-sm: 8px; --fk-r: 12px; --fk-r-lg: 16px; --fk-r-xl: 20px; --fk-r-pill: 999px; /* --- 影 --- */ --fk-shadow: 0 2px 12px rgba(26, 64, 60, .06); --fk-shadow-hover: 0 12px 32px rgba(26, 64, 60, .10); /* --- 余白スケール（8pxグリッド）--- */ --fk-s1: 4px; --fk-s2: 8px; --fk-s3: 12px; --fk-s4: 16px; --fk-s5: 24px; --fk-s6: 32px; --fk-s7: 48px; --fk-s8: 64px; /* --- レイアウト --- */ --fk-maxw: 600px; --fk-nav-h: 56px; /* --- 後方互換エイリアス（既存ページの --primary 等を段階移行するとき用）--- */ --fk-primary: var(--fk-teal); --fk-primary-bg: var(--fk-teal-soft); --fk-text: var(--fk-ink); --fk-text-light: var(--fk-sub); --fk-border: var(--fk-line); } /* ============================================================ 以下はオプトイン部品（.fk-* を付けたときだけ効く） ============================================================ */ /* ページ全体に基盤を効かせたいときはを付ける */ .fk { background: var(--fk-bg); color: var(--fk-ink); font-family: var(--fk-font); line-height: var(--fk-lh); letter-spacing: .01em; -webkit-font-smoothing: antialiased; } /* --- 中央寄せの本文ラッパ --- */ .fk-wrap { width: 100%; max-width: var(--fk-maxw); margin-inline: auto; } /* --- セクション見出し（罫線つき）--- */ .fk-section { width: 100%; max-width: var(--fk-maxw); margin: var(--fk-s7) auto var(--fk-s4); display: flex; align-items: baseline; gap: var(--fk-s3); } .fk-section__title { font-size: 15px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; color: var(--fk-ink); } .fk-section__line { flex: 1; height: 1px; background: var(--fk-line); } .fk-section__desc { width: 100%; max-width: var(--fk-maxw); margin: calc(var(--fk-s2) * -1) auto var(--fk-s4); font-size: 12.5px; color: var(--fk-sub); } /* --- カード --- */ .fk-card { display: block; background: var(--fk-card); border: 1px solid var(--fk-line); border-radius: var(--fk-r-lg); padding: var(--fk-s5); text-decoration: none; color: inherit; box-shadow: var(--fk-shadow); transition: transform .2s, box-shadow .25s, border-color .2s; } .fk-card:hover { transform: translateY(-2px); box-shadow: var(--fk-shadow-hover); border-color: var(--fk-teal-light); } /* --- ページ先頭ヘッダー（全ページ共通のブランド帯：複眼道場＋タグライン＋ページ名）--- */ .fk-pagehead { width: 100%; max-width: var(--fk-maxw); margin: 0 auto; padding: 22px 16px 12px; text-align: center; box-sizing: border-box; } .fk-pagehead__brand { font-size: 14px; font-weight: 900; letter-spacing: .14em; color: var(--fk-teal); } .fk-pagehead__brand a { color: inherit; text-decoration: none; } .fk-pagehead__tag { margin-top: 3px; font-size: 11.5px; color: var(--fk-sub); letter-spacing: .08em; } .fk-pagehead__label { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--fk-ink); } .fk-pagehead__label::before, .fk-pagehead__label::after { content: ""; width: 18px; height: 1px; background: var(--fk-line); } /* --- アイコンチップ（カテゴリ色の背景に24pxアイコン）--- */ .fk-chip { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--fk-r); display: flex; align-items: center; justify-content: center; background: var(--fk-teal-soft); color: var(--fk-teal); } .fk-chip svg { width: 26px; height: 26px; } /* --- ボタン --- */ .fk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fk-s2); padding: 12px 22px; border-radius: var(--fk-r-pill); border: 0; cursor: pointer; background: var(--fk-teal); color: #fff; font-family: var(--fk-font); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s, transform .15s; } .fk-btn:hover { background: var(--fk-teal-deep); transform: translateY(-1px); } .fk-btn--ghost { background: transparent; color: var(--fk-teal); border: 1px solid var(--fk-line); } .fk-btn--ghost:hover { background: var(--fk-teal-soft); border-color: var(--fk-teal); } /* --- ラベル/バッジ（pill）--- */ .fk-label { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .06em; padding: 2px 10px; border-radius: var(--fk-r-pill); background: var(--fk-teal-soft); color: var(--fk-teal-deep); } .fk-badge-beta { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .08em; padding: 1px 8px; border-radius: var(--fk-r-pill); background: var(--fk-beta); color: #fff; } /* --- スクリーンリーダー専用（SEO用の静的h1などに）--- */ .fk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* --- カテゴリ別アクセントの適用ヘルパ（.fk-accent-gold などを親に付けると chip/label がその色に）--- */ .fk-accent-teal { --fk-a: var(--fk-teal); --fk-a-soft: var(--fk-teal-soft); } .fk-accent-gold { --fk-a: var(--fk-gold); --fk-a-soft: var(--fk-gold-soft); } .fk-accent-blue { --fk-a: var(--fk-blue); --fk-a-soft: var(--fk-blue-soft); } .fk-accent-purple { --fk-a: var(--fk-purple); --fk-a-soft: var(--fk-purple-soft); } .fk-accent-terra { --fk-a: var(--fk-terra); --fk-a-soft: var(--fk-terra-soft); } .fk-accent-green { --fk-a: var(--fk-green); --fk-a-soft: var(--fk-green-soft); } [class*="fk-accent-"] .fk-chip { background: var(--fk-a-soft); color: var(--fk-a); } [class*="fk-accent-"] .fk-label { background: var(--fk-a-soft); color: var(--fk-a); }