/* ============================================================ 実績・事例（works）の本文スタイル ------------------------------------------------------------ the_content() の出力（フロント: .cd-body）と、ブロックエディタの中 （.editor-styles-wrapper）の両方に同じ見た目を当てる。 スフレさんが編集画面で見たものと公開画面が一致するようにするため。 使う側の約束（reports/design/実績事例_本文の書き方.md）: 案件データ … 「テーブル」ブロック（スタイル: 案件データ） 成果 … 「カラム」ブロック（スタイル: 成果ハイライト） 担当者の声 … 「引用」ブロック（既定） 企業概要 … 「引用」ブロック（スタイル: 企業概要） ============================================================ */ /* ---- 見出し・本文 ---- */ :is(.cd-body, .editor-styles-wrapper) > *:first-child{margin-top:0;} :is(.cd-body, .editor-styles-wrapper) h2{position:relative;margin-top:clamp(44px,6vw,72px);padding-left:18px; font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900; font-size:clamp(19px,1.8vw,24px);color:var(--text-primary);line-height:1.3;} :is(.cd-body, .editor-styles-wrapper) h2::before{content:"";position:absolute;left:0;top:.15em;width:4px;height:1em; border-radius:2px;background:var(--accent-secondary);} :is(.cd-body, .editor-styles-wrapper) h3{margin-top:clamp(28px,3.4vw,40px);font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700;font-size:clamp(16px,1.4vw,19px);color:var(--text-primary);line-height:1.5;} :is(.cd-body, .editor-styles-wrapper) h4{margin-top:24px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:16px;color:var(--text-primary);} :is(.cd-body, .editor-styles-wrapper) p{margin-top:20px;font-size:clamp(15.5px,1.15vw,16px);color:var(--text-body);line-height:2;} :is(.cd-body, .editor-styles-wrapper) ul, :is(.cd-body, .editor-styles-wrapper) ol{margin-top:20px;padding-left:1.4em;} :is(.cd-body, .editor-styles-wrapper) li{font-size:clamp(15.5px,1.15vw,16px);color:var(--text-body);line-height:2;} :is(.cd-body, .editor-styles-wrapper) a{color:var(--text-link);text-decoration:underline;} :is(.cd-body, .editor-styles-wrapper) strong{font-weight:700;color:var(--text-primary);} /* Q&A: 見出し3の先頭に「Q.」と書くと、そこだけアンバーになる（別クラス不要） */ :is(.cd-body, .editor-styles-wrapper) h3.is-style-sfre-question{display:flex;gap:10px;font-weight:900;} :is(.cd-body, .editor-styles-wrapper) h3.is-style-sfre-question::before{content:"Q.";color:var(--amber-deep);flex:none;} /* ---- 画像（誌面イメージ） ---- */ :is(.cd-body, .editor-styles-wrapper) img{border-radius:16px;height:auto;} :is(.cd-body, .editor-styles-wrapper) figure{margin-top:24px;} :is(.cd-body, .editor-styles-wrapper) figcaption{margin-top:12px;font-size:12.5px;color:var(--text-caption);line-height:1.8;text-align:left;} /* ---- テーブル ＝ 案件データ（Figma 734:5874）---- 罫線もヘッダ背景も無い、ラベル＋値の縦積み。ベージュの角丸カードに載せる。 既定のテーブルもこの見た目にする（事例本文でそれ以外の表はまず使わない） */ :is(.cd-body, .editor-styles-wrapper) .wp-block-table{display:flex;flex-direction:column; margin-top:26px;border-radius:16px;background:var(--beige-50); padding:22px clamp(24px,3vw,34px) 18px;} :is(.cd-body, .editor-styles-wrapper) .wp-block-table table{width:100%;border-collapse:collapse;font-size:14px;border:0;} :is(.cd-body, .editor-styles-wrapper) .wp-block-table td, :is(.cd-body, .editor-styles-wrapper) .wp-block-table th{border:0;padding:12px 0;text-align:left;vertical-align:top; font-size:14px;color:var(--text-primary);line-height:1.7;background:none;} :is(.cd-body, .editor-styles-wrapper) .wp-block-table td:first-child, :is(.cd-body, .editor-styles-wrapper) .wp-block-table th:first-child{width:110px;padding-right:16px; font-weight:700;font-size:13.5px;color:var(--text-muted);} /* 見出しセルを使わない前提だが、使われても崩れないようにしておく */ :is(.cd-body, .editor-styles-wrapper) .wp-block-table thead th{font-weight:900;color:var(--text-primary);} /* キャプションは「案件データ」の見出しとして上に出す。 figcaption は caption-side が効かないので、figure を縦 flex にして order で上へ */ :is(.cd-body, .editor-styles-wrapper) .wp-block-table figcaption{order:-1;margin:0 0 8px; font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:15px;color:var(--text-primary);} :is(.cd-body, .editor-styles-wrapper) .wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:none;} /* ---- カラム ＝ 成果ハイライト（Figma 734:5912）---- 黄色の1枚カードに指標を横並び。各カラムは「見出し3（数字）＋段落（説明）」で組む。 数字の中の単位（校・部）は「校」「部」をそのまま書けばよい。 */ :is(.cd-body, .editor-styles-wrapper) .wp-block-columns.is-style-sfre-results{margin-top:clamp(48px,6vw,72px); background:var(--yellow-50,#fff9db);border-radius:20px; padding:clamp(28px,3.6vw,40px) clamp(24px,3.4vw,38px);gap:clamp(24px,4vw,56px);} :is(.cd-body, .editor-styles-wrapper) .wp-block-columns.is-style-sfre-results .wp-block-column{flex:1 1 0;min-width:0;} :is(.cd-body, .editor-styles-wrapper) .wp-block-columns.is-style-sfre-results h3{margin-top:0; font-family:'Outfit','Zen Kaku Gothic New',sans-serif;font-weight:700; font-size:clamp(30px,3.4vw,40px);color:var(--amber-deep);line-height:1;} :is(.cd-body, .editor-styles-wrapper) .wp-block-columns.is-style-sfre-results p{margin-top:8px; font-size:12.5px;color:var(--text-body);line-height:1.7;} /* カードの見出し「この取り組みの成果」は、直前の見出し4で書く */ :is(.cd-body, .editor-styles-wrapper) h4 + .wp-block-columns.is-style-sfre-results{margin-top:16px;} /* ---- 引用（既定）＝ ご担当者様の声（Figma 734:5931）---- 塗りカードではなく左ボーダー。cite は「持田製薬株式会社 ご担当者様」など */ :is(.cd-body, .editor-styles-wrapper) .wp-block-quote{margin:clamp(48px,6vw,72px) 0 0;padding:0 0 0 clamp(20px,2.4vw,28px); border:0;border-left:3px solid var(--accent-secondary);background:none;border-radius:0;} :is(.cd-body, .editor-styles-wrapper) .wp-block-quote p{margin-top:0;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:500; font-size:clamp(15px,1.3vw,17px);line-height:1.9;color:var(--text-primary);} :is(.cd-body, .editor-styles-wrapper) .wp-block-quote p + p{margin-top:12px;} :is(.cd-body, .editor-styles-wrapper) .wp-block-quote cite{display:block;margin-top:14px; font-size:13px;font-style:normal;color:var(--text-muted);} /* ---- 引用（スタイル: 企業概要）＝ 会社プロフィール（Figma 734:5939）---- ベージュの枠つきカード。cite に社名を入れると見出しとして上に出る */ :is(.cd-body, .editor-styles-wrapper) .wp-block-quote.is-style-sfre-profile{display:flex;flex-direction:column; align-items:stretch;justify-content:flex-start; margin-top:clamp(44px,6vw,72px);padding:24px clamp(20px,3vw,30px); border:1px solid var(--border-default);border-radius:16px;background:var(--beige-50);} /* 本文が1行でも段落をカード幅いっぱいに伸ばし、左に張り付かせる。 flex の中で段落が縮むと、短い文だけ中央に置かれたように見える（和田さん指摘 2026-09-14） */ :is(.cd-body, .editor-styles-wrapper) .wp-block-quote.is-style-sfre-profile > *, :is(.cd-body, .editor-styles-wrapper) .wp-block-quote.is-style-sfre-profile p{width:100%;max-width:none; align-self:stretch;margin-left:0;margin-right:0;} :is(.cd-body, .editor-styles-wrapper) .wp-block-quote.is-style-sfre-profile cite{order:-1;margin:0 0 8px; font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:16px;color:var(--text-primary);} :is(.cd-body, .editor-styles-wrapper) .wp-block-quote.is-style-sfre-profile p{font-weight:500; font-size:13.5px;line-height:1.8;color:var(--text-body);} /* 引用（担当者の声・企業概要）は文の長短にかかわらず常に左寄せ。 短い文だけ中央にすると記事の中でそこだけ揃え方が変わって目立ち、 投稿ごとにバラつく原因にもなるため、ツールバーの配置設定は効かせない（2026-09-14 判断） */ :is(.cd-body, .editor-styles-wrapper) .wp-block-quote, :is(.cd-body, .editor-styles-wrapper) .wp-block-quote p, :is(.cd-body, .editor-styles-wrapper) .wp-block-quote cite{text-align:left !important;} /* ---- 注記（段落スタイル: 注記）---- */ :is(.cd-body, .editor-styles-wrapper) p.is-style-sfre-note{margin-top:10px;font-size:12px;color:var(--text-caption);line-height:1.8;} /* ---- 旧・直書きHTML（cd-sec 等）との互換。持田製薬の初期投稿など ---- ブロック化が済んだら消してよい */ :is(.cd-body, .editor-styles-wrapper) .cd-profile h4{margin-top:0;} :is(.cd-body, .editor-styles-wrapper) .cd-profile p{margin-top:8px;font-size:13.5px;line-height:1.8;} :is(.cd-body, .editor-styles-wrapper) .cd-voice p{margin-top:0;font-size:clamp(15px,1.3vw,17px);line-height:1.9;color:var(--text-primary);} :is(.cd-body, .editor-styles-wrapper) .cd-voice .cd-note, :is(.cd-body, .editor-styles-wrapper) .cd-results .cd-note{margin-top:10px;font-size:12px;color:var(--text-caption);line-height:1.8;} :is(.cd-body, .editor-styles-wrapper) .cd-qa p{margin-top:14px;} :is(.cd-body, .editor-styles-wrapper) .cd-caption{margin-top:12px;font-size:12.5px;color:var(--text-caption);line-height:1.8;} :is(.cd-body, .editor-styles-wrapper) .cd-details dd, :is(.cd-body, .editor-styles-wrapper) .cd-details dt{margin-top:0;} @media(max-width:840px){ :is(.cd-body, .editor-styles-wrapper) .wp-block-table td:first-child, :is(.cd-body, .editor-styles-wrapper) .wp-block-table th:first-child{width:90px;} :is(.cd-body, .editor-styles-wrapper) .wp-block-columns.is-style-sfre-results{gap:24px;} } /* ---- マーカー（蛍光ペン）---- 本文中で span.marker / span.hl-underline が使われる（和田さんの記事の書き方）。 投稿側に貼られた