/* =================================================================== block.css ── ブロックグループ(8つの消火群) 固有スタイル base は /css/group-base.css に統一。ここでは色トークンと固有 コンポーネント (8群カラー、相性相関図、代謝サイクルSVG) のみ。 wrapper:
=================================================================== */ #block-page { /* 8 ブロックグループ色 */ --blk-bg1: #6f7d52; /* 論壇 Forum α/−α 非合理 */ --blk-bg2: #2f4f7a; /* 評議 Council α/−α 合理 */ --blk-bg3: #3a3f86; /* 信条 Doctrine β/−β 合理 */ --blk-bg4: #c2742a; /* 市 Bazaar β/−β 非合理 */ --blk-bg5: #9e2b35; /* 舞台 Stage γ/−γ 非合理 */ --blk-bg6: #1f8a8a; /* 事業 Venture γ/−γ 合理 */ --blk-bg7: #b5842f; /* 熟成 Maturation δ/−δ 合理 */ --blk-bg8: #1f8f86; /* 流派 Movement δ/−δ 非合理 */ /* 2 軸色 (cycle phase) */ --blk-irrational: #a8593a; --blk-rational: #4a6878; } /* === 8カードグリッド (概論) ── group-grid を 4×2 で再構成 === */ #block-page .group-grid.blk-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 720px) { #block-page .group-grid.blk-grid { grid-template-columns: repeat(4, 1fr); } } #block-page .group-grid.blk-grid .group-card.bgc-1 .group-card-body { border-top-color: var(--blk-bg1); } #block-page .group-grid.blk-grid .group-card.bgc-2 .group-card-body { border-top-color: var(--blk-bg2); } #block-page .group-grid.blk-grid .group-card.bgc-3 .group-card-body { border-top-color: var(--blk-bg3); } #block-page .group-grid.blk-grid .group-card.bgc-4 .group-card-body { border-top-color: var(--blk-bg4); } #block-page .group-grid.blk-grid .group-card.bgc-5 .group-card-body { border-top-color: var(--blk-bg5); } #block-page .group-grid.blk-grid .group-card.bgc-6 .group-card-body { border-top-color: var(--blk-bg6); } #block-page .group-grid.blk-grid .group-card.bgc-7 .group-card-body { border-top-color: var(--blk-bg7); } #block-page .group-grid.blk-grid .group-card.bgc-8 .group-card-body { border-top-color: var(--blk-bg8); } /* === bg ページ ヒーロー: hero-title に群アクセント色を適用 === */ #block-page .hero-title.bgc-1 { color: var(--blk-bg1); } #block-page .hero-title.bgc-2 { color: var(--blk-bg2); } #block-page .hero-title.bgc-3 { color: var(--blk-bg3); } #block-page .hero-title.bgc-4 { color: var(--blk-bg4); } #block-page .hero-title.bgc-5 { color: var(--blk-bg5); } #block-page .hero-title.bgc-6 { color: var(--blk-bg6); } #block-page .hero-title.bgc-7 { color: var(--blk-bg7); } #block-page .hero-title.bgc-8 { color: var(--blk-bg8); } /* === メンバーグリッド (4タイプ) ── octad の oct-member-grid と同等 === */ #block-page .blk-member-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 28px; } @media (min-width: 560px) { #block-page .blk-member-grid { grid-template-columns: repeat(4, 1fr); } } #block-page .blk-member { display: block; padding: 14px 12px 12px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 8px; text-align: center; text-decoration: none; color: var(--text); transition: all .15s; position: relative; } #block-page .blk-member:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); } #block-page .blk-member img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 8px; border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,.1); } #block-page .blk-member .bm-role { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; } #block-page .blk-member .bm-type { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .04em; margin: 2px 0; } #block-page .blk-member .bm-jname { font-family: var(--serif); font-size: 14px; color: var(--text); font-weight: 500; } #block-page .blk-member .bm-quadra { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-top: 4px; } /* === 2つの価値世界ボックス === */ #block-page .blk-worldbox { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; margin: 24px 0 28px; border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; background: white; } @media (max-width: 640px) { #block-page .blk-worldbox { grid-template-columns: 1fr; } } #block-page .blk-worldbox .bwb-w { padding: 18px 20px; } #block-page .blk-worldbox .bwb-a { background: var(--bg-quote); } #block-page .blk-worldbox .bwb-b { background: var(--bg-soft); } #block-page .blk-worldbox .bwb-vs { display: flex; align-items: center; justify-content: center; background: var(--text); color: white; font-family: var(--serif); font-size: 18px; padding: 0 14px; } @media (max-width: 640px) { #block-page .blk-worldbox .bwb-vs { padding: 8px; } } #block-page .blk-worldbox .bwb-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; } #block-page .blk-worldbox .bwb-poles { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--text); display: block; margin-bottom: 6px; } #block-page .blk-worldbox .bwb-body { font-size: 13px; color: var(--text-light); line-height: 1.75; } /* === L5 機能テーブル === */ #block-page .blk-fn-table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 13.5px; } #block-page .blk-fn-table th, #block-page .blk-fn-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; } #block-page .blk-fn-table th { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; color: var(--text-muted); background: var(--bg-soft); text-transform: uppercase; } #block-page .blk-fn-table td.bft-type { font-family: var(--mono); font-weight: 700; color: var(--text); white-space: nowrap; } #block-page .blk-fn-table td.bft-code { font-family: var(--mono); color: var(--text-light); font-size: 12.5px; white-space: nowrap; } #block-page .blk-fn-table td.bft-name { font-family: var(--serif); color: var(--text); } /* === 代謝サイクル SVG ラッパ === */ #block-page .blk-cycle { text-align: center; margin: 22px 0 18px; } #block-page .blk-cycle svg { max-width: 520px; width: 100%; height: auto; } #block-page .blk-cycle-legend { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-light); } #block-page .blk-cycle-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; } /* === ★ 相性相関図 (群内4タイプ・正方形+6関係) === */ #block-page .blk-relmatrix { text-align: center; margin: 24px 0 12px; } #block-page .blk-relmatrix svg { max-width: 600px; width: 100%; height: auto; } #block-page .blk-relmatrix-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--text-light); padding: 12px 16px; background: var(--bg-soft); border-radius: 6px; } #block-page .blk-relmatrix-legend i { width: 22px; height: 3px; display: inline-block; vertical-align: middle; margin-right: 6px; border-radius: 2px; } /* === 内部6関係リスト === */ #block-page .blk-rels { margin: 16px 0 24px; } #block-page .blk-rel { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); align-items: start; } @media (max-width: 580px) { #block-page .blk-rel { grid-template-columns: 1fr; gap: 4px; } } #block-page .blk-rel-label { font-family: var(--serif); color: var(--text); font-size: 15px; font-weight: 600; } #block-page .blk-rel-label small { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--text-muted); letter-spacing: .08em; margin-top: 2px; } #block-page .blk-rel-body { font-size: 14px; color: var(--text); line-height: 1.85; } #block-page .blk-rel-body .pin { font-family: var(--mono); font-size: 10.5px; background: var(--bg-tag); color: var(--text-light); border-radius: 3px; padding: 2px 7px; margin-right: 8px; letter-spacing: .04em; }