/* ===================================================================== Front Journal — article.css 記事本文コンポーネントの共通CSS（正本／単一ソース） --------------------------------------------------------------------- ■ 使い方： 内の tokens.css の直後に1行追加 ■ 対象：コラム（column/*）・ニュース（news/*）・求人サンプル等の記事本文 ■ 含むもの：パンくず／カード（card-wrap）／章見出し（h2.chapter・h3.sub・h4）／ 本文（p・ul・li・def-list）／図版（article-thumb・fig-inline・banner）／ 表（fj-table・cmp-table）／コールアウト（example-block・takeaway）／FAQ／関連記事 ■ 含まないもの：body base・ヘッダー・フッター（= 各ページ既定／site-chrome.css） ■ ルール：記事本文のデザイン変更は必ずこのファイルだけを編集する（全記事へ即反映） 確定値＝角丸4px・カード間24px・区切り線 前後20px・箇条書き ul下12px/li 0 ===================================================================== */ /* ---------- パンくず ---------- */ .breadcrumb { max-width: 920px; margin: 0 auto; padding: 20px 24px 0; font-size: 13px; color: var(--text-soft); letter-spacing: 0.06em; } .breadcrumb a:hover { color: var(--navy); } .breadcrumb .sep { margin: 0 8px; color: var(--muted); } .breadcrumb .current { color: var(--navy); font-weight: 700; } /* ---------- タイトル・メタ ---------- */ .card-wrap .article-title { font-size: 34px; font-weight: 900; color: var(--navy); margin: 0 0 16px; line-height: 1.4; letter-spacing: 0.02em; } .card-wrap .article-meta { display: flex; align-items: center; gap: 16px; font-size: 16px; margin: 0 0 28px; letter-spacing: 0.02em; } .card-wrap .article-meta .author { color: var(--accent); font-weight: 700; } .card-wrap .article-meta .date { color: var(--text); } /* ---------- 蛍光マーカー ---------- */ .mk { background: linear-gradient(transparent 60%, #e8f5fc 60%); padding: 0 2px; } /* ---------- サムネ・図版・バナー ---------- */ .article-thumb { max-width: 920px; margin: 24px auto 0; padding: 0; } .article-thumb + .card-wrap { margin-top: 18px; } .article-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 10px; box-shadow: var(--shadow-sm); } .banner-link { display: block; width: 80%; max-width: 640px; margin: 24px auto 8px; transition: opacity 0.2s var(--ease); } .banner-link:hover { opacity: 0.85; } .banner-link img { width: 100%; height: auto; display: block; border-radius: 8px; } .fig-inline { margin: 28px 0 32px; } .fig-inline img { width: 100%; height: auto; display: block; border-radius: 8px; } .fig-inline figcaption { display: none; } /* ---------- 署名・編集後記 ---------- */ .article-signature { color: var(--accent); font-weight: 700; text-align: left; margin-top: 32px; } h2.chapter.author-chapter { background: var(--text-soft); } .author-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .author-link:hover { opacity: 0.8; } /* ---------- Material Symbols（インライン・アイコン） ---------- */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; font-size: 22px; vertical-align: -5px; margin-right: 6px; line-height: 1; } /* ---------- 本文カード（card-wrap） ---------- */ .card-wrap { background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(11,26,51,0.10); padding: 36px 40px; margin: 24px auto; max-width: 920px; } .card-wrap > article { background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 auto !important; max-width: none !important; } .card-wrap > article > h2.chapter:first-child { margin: -36px -40px 16px !important; border-radius: 4px 4px 0 0; padding: 18px 40px; } .card-wrap > *:last-child > *:last-child { margin-bottom: 0; } /* ---------- 本文テキスト・箇条書き ---------- */ article { max-width: 920px; margin: 0 auto; padding: 24px; } article p { font-size: 16px; line-height: 1.8; margin: 0 0 20px; color: var(--text); letter-spacing: 0.02em; } article ul { padding-left: 22px; margin: 0 0 12px; } article ul li { font-size: 16px; line-height: 1.80; padding: 0; } article li::marker { color: var(--accent); } ul.def-list { padding-left: 24px; margin: 0 0 24px; } ul.def-list > li { color: var(--text); padding: 6px 0 12px; } ul.def-list > li::marker { color: var(--accent); } ul.def-list > li > strong { color: var(--text); font-weight: 900; } ul.def-list .d { display: block; margin-top: 4px; } /* 用語解説（FrontJournalの解説）＝緑「・」＋単語を別行・解説をインデント改行 */ .glossary, article ul.glossary { list-style: none; padding-left: 0; margin: 6px 0 2px; } .glossary > li { padding: 7px 0; line-height: 1.8; } .glossary > li::marker { content: none; } .glossary > li strong { display: block; color: var(--navy); font-size: 16px; font-weight: 700; } .glossary > li strong::before { content: "・"; color: var(--accent); margin-right: 2px; } .glossary > li .def { display: block; padding-left: 1.4em; color: var(--text); font-size: 16px; font-weight: 400; line-height: 1.8; letter-spacing: 0.02em; } /* ---------- 見出し ---------- */ h2.chapter { margin: var(--section-gap) 0 12px; padding: 14px 22px; background: var(--navy); color: #fff; font-size: 26px; line-height: 1.4; font-weight: 900; letter-spacing: 0.04em; border-radius: 8px; } h2.lead { margin: 18px 0 12px; padding: 0; background: none; color: var(--accent); font-size: 22px; line-height: 1.45; font-weight: 900; letter-spacing: 0.02em; border: 0; border-radius: 0; } h3.sub { font-size: 24px; color: var(--accent); margin: 32px 0 14px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.45; } .card-wrap article :is(p, ul, table, div, figure, a, section) + h3.sub { border-top: 1px solid var(--navy-line); padding-top: 20px; margin-top: 20px; } .card-wrap article table.fj-table + h3.sub { border-top: none; padding-top: 0; margin-top: 32px; } h4.sub-sm { font-size: 16px; color: var(--navy); margin: 22px 0 10px; font-weight: 700; } /* ---------- 標準テーブル（fj-table） ---------- */ table.fj-table { width: 100%; border-collapse: collapse; margin: 24px 0 28px; font-size: 16px; table-layout: fixed; } table.fj-table th, table.fj-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid transparent; vertical-align: top; line-height: 1.33; } table.fj-table th { background: var(--text-soft); color: #fff; font-weight: 700; letter-spacing: 0.05em; } table.fj-table.col2 th:first-child, table.fj-table.col2 td:first-child { width: 40%; } table.fj-table tbody tr:nth-child(even) td { background: var(--bg-soft); } /* ヘッダー無し（行見出し）テンプレ：左列=濃グレー白文字／水平罫線は透明／縞なし */ table.fj-table.rowhead th { width: 140px; white-space: nowrap; } table.fj-table.rowhead th, table.fj-table.rowhead td { border-bottom: 1px solid transparent; } table.fj-table.rowhead tbody tr:nth-child(even) td { background: transparent; } /* ---------- 比較表（cmp-table・2列カラーヘッダー） ---------- */ .cmp-table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 24px 0 28px; font-size: 13px; line-height: 1.5; text-align: left; color: var(--text); table-layout: fixed; } .cmp-table th, .cmp-table td { border: 3px solid #fff; padding: 10px; background: var(--bg-soft); vertical-align: middle; } .cmp-table thead th:nth-child(1) { background: #fff; border: 1px solid transparent; } .cmp-table thead th:nth-child(2) { background: var(--navy); color: #fff; font-weight: 700; } .cmp-table thead th:nth-child(3) { background: var(--navy-soft); color: #fff; font-weight: 700; } /* 行ラベル列（左端）＝淡青+紺太字。td/th どちらでも適用（rowhead廃止に伴い th 始まりにも対応） */ .cmp-table tbody tr > th:first-child, .cmp-table tbody tr > td:first-child { background: var(--bg-blue); color: var(--navy); font-weight: 700; border: 3px solid #fff; padding: 10px; vertical-align: middle; } /* 2列・3列データ表テンプレ：ヘッダーは全列 紺(navy)＋白文字（A案・統一）。先頭「領域/ポジション」も紺 */ .cmp-table.cmp2 thead th { background: var(--navy); color: #fff; font-weight: 700; border: 3px solid #fff; } .cmp-table.cmp3 thead th { background: var(--navy); color: #fff; font-weight: 700; border: 3px solid #fff; } /* 左列（行ラベル）の幅を全テンプレで 30% 固定。残りは table-layout:fixed が均等割（cmp3 は 30/35/35） */ .cmp-table.cmp2 thead th:first-child, .cmp-table.cmp2 tbody tr > :first-child, .cmp-table.cmp3 thead th:first-child, .cmp-table.cmp3 tbody tr > :first-child { width: 30%; } .cmp-table.cmp-compact th, .cmp-table.cmp-compact td { padding: 12px 10px; overflow-wrap: anywhere; } .cmp-table.cmp-compact thead th { text-align: center; } /* ---------- コールアウト（example-block・takeaway） ---------- */ .example-block, .takeaway-box { background: var(--bg-blue); border-radius: 10px; padding: 0 28px 22px; margin: 40px 0 28px; overflow: hidden; } .example-block .ex-label, .takeaway-box .label { display: inline-flex; align-items: center; background: var(--navy); color: #fff; padding: 8px 20px; font-size: 16px; font-weight: 900; letter-spacing: 0.08em; border-radius: 8px 0 8px 0; margin: 0 0 18px -28px; line-height: 1.5; max-width: 100%; } .example-block .ex-label .label-doc, .takeaway-box .label .label-doc { height: 22px; width: 22px; margin-right: 9px; display: inline-block; } .example-block p, .takeaway-box p { margin: 0 0 12px; color: var(--text); font-size: 16px; line-height: 1.8; letter-spacing: 0.02em; } .example-block p:last-child, .takeaway-box p:last-child { margin-bottom: 0; } .example-block ul, .takeaway-box ul { padding-left: 22px; margin: 6px 0 10px; } .example-block li, .takeaway-box li { font-size: 16px; line-height: 1.80; padding: 3px 0; } /* ---------- FAQ ---------- */ .faq-item { margin: 32px 0; padding: 0; background: transparent; } .faq-item .q { font-size: 24px; color: var(--accent); margin: 32px 0 14px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; } .faq-item + .faq-item .q { border-top: 1px solid var(--navy-line); padding-top: 20px; margin-top: 20px; } .faq-item .a { font-size: 16px; line-height: 1.8; margin: 0; color: var(--text); letter-spacing: 0.02em; } /* ---------- 関連記事（other-columns） ---------- */ .other-columns { max-width: 1180px; margin: var(--section-gap) auto 0; padding: 0 24px; } .other-columns-label { font-size: 22px; color: var(--navy); font-weight: 900; margin: 0 0 22px; letter-spacing: 0.04em; } .other-columns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .other-columns .article-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.2s var(--ease); display: flex; flex-direction: column; text-decoration: none; color: inherit; } .other-columns .article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } .other-columns .thumb-image { aspect-ratio: 16/9; position: relative; overflow: hidden; } .other-columns .thumb-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .other-columns .thumb-date { position: absolute; left: 12px; bottom: 12px; background: rgba(11,26,51,0.85); color: #fff; padding: 4px 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; border-radius: 8px; } .other-columns .article-card .body { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; } .other-columns .article-card h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 12px; line-height: 1.55; letter-spacing: 0.02em; } .other-columns .article-card .meta { font-size: 13px; color: var(--accent); font-weight: 700; letter-spacing: 0.04em; } .other-columns-foot { text-align: center; margin-top: 36px; padding-bottom: 16px; } .more-btn { display: inline-block; padding: 12px 28px; background: var(--navy); color: #fff !important; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; transition: background 0.2s ease; } .more-btn:hover { background: var(--accent); } /* ---------- レスポンシブ（記事本文） ---------- */ @media (max-width: 1180px) { .other-columns-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .card-wrap .article-title { font-size: 28px; } .card-wrap .article-meta { font-size: 16px; gap: 12px; } .card-wrap { padding: 24px 20px !important; margin: 24px 16px; } .card-wrap > article > h2.chapter:first-child { margin: -24px -20px 12px !important; padding: 14px 20px; } table.fj-table th, table.fj-table td { padding: 10px 12px; font-size: 16px; } table.fj-table.rowhead th { width: 96px; } .cmp-table th, .cmp-table td { padding: 8px; font-size: 13px; } .glossary > li .def { padding-left: 1em; } h2.chapter { font-size: 21px; padding: 12px 16px; } h2.lead { font-size: 19px; } h3.sub { font-size: 19px; } .faq-item .q { font-size: 19px; } .banner-link { width: 100%; } .other-columns-grid { grid-template-columns: 1fr; } }