/*
 * 固定ページ本文 共通コンテンツスタイル（エディタ＝フロント一致の要）
 * --------------------------------------------------------------
 * このCSS 1本を、
 *   (a) フロントの固定ページ本文ラッパー  .entry-content
 *   (b) ブロックエディタ            .editor-styles-wrapper
 * の両方に当てることで「編集画面 ＝ 実ページ」（WYSIWYG）を担保する。
 *
 * 設計トークンの真実源は theme.json。色・サイズは theme.json が
 * 自動生成する CSS 変数（--wp--preset--color--* / --wp--preset--font-size--*）
 * を参照し、二重管理を避ける。Tailwind CDN には依存しない（エディタ
 * iframe 内で Tailwind が読まれないため、素の CSS で一致させる）。
 *
 * 読み込み:
 *   フロント   … wp_enqueue_style('daiichi-content', ...)（page表示時）
 *   エディタ   … add_theme_support('editor-styles') + add_editor_style()
 */

/* ============================================================
 * 1. ベース（本文の地）
 * ============================================================ */
.entry-content,
.editor-styles-wrapper {
  font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP', sans-serif);
  color: var(--wp--preset--color--body, #334155);
  font-size: 1.125rem;          /* text-lg */
  line-height: 1.8;             /* 和文の読みやすさ優先 */
  word-break: break-word;
  overflow-wrap: anywhere;
  line-break: strict;           /* 日本語の禁則処理 */
}

/* エディタの編集領域もフロントの本文幅（contentSize）に合わせる。
 * theme.json の contentSize=56rem と一致させ、行長を同じにする。 */
.editor-styles-wrapper {
  background-color: var(--wp--preset--color--base, #fff);
}

/* ============================================================
 * 2. 見出し（front-page の font-bold / slate-900 系に一致）
 * ============================================================ */
.entry-content :where(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--wp--preset--font-family--noto-sans-jp, 'Noto Sans JP', sans-serif);
  color: var(--wp--preset--color--slate-900, #0f172a);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.entry-content h1,
.editor-styles-wrapper h1 {
  font-size: 2.25rem;   /* text-4xl */
  line-height: 1.3;
}

/* ----------------------------------------------------------------
 * 【blockGap 対応の設計ルール】
 * ブロック間余白（兄弟間 margin）とコンテナ gap の宣言は、セレクタを
 * :where() で包んで詳細度を (0,1,0) に統一する。WP がエディタの
 * 「ブロックの間隔」設定時に footer（core-block-supports-inline-css）へ
 * 出力する .wp-container-* ルールも (0,1,0) のため、後読み込みの WP 側が
 * 設定時のみ後勝ちで上書きでき、未設定時は本ファイルの既定余白が生きる。
 * スコープクラス（.entry-content / .editor-styles-wrapper）は必ず
 * :where の外に1個残す（詳細度ゼロにすると Tailwind CDN preflight の
 * p { margin: 0 } 等 (0,0,1) に読み込み順次第で負けるため）。
 * 同率 (0,1,0) 内の優先順位はソース順（後勝ち）で決まるため、
 * ルールの並び順を変える場合は要注意。
 * ---------------------------------------------------------------- */
.entry-content :where(h1),
.editor-styles-wrapper :where(h1) {
  margin: 0 0 0.75em;
}

.entry-content h2,
.editor-styles-wrapper h2 {
  font-size: 1.875rem;  /* text-3xl */
  line-height: 1.375;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--wp--preset--color--slate-200, #e2e8f0);
}

.entry-content :where(h2),
.editor-styles-wrapper :where(h2) {
  margin: 2em 0 0.75em;
}

.entry-content h3,
.editor-styles-wrapper h3 {
  font-size: 1.5rem;    /* text-2xl */
  line-height: 1.4;
  padding-left: 0.7rem;
  border-left: 4px solid var(--wp--preset--color--accent, #0078E8);
}

.entry-content :where(h3),
.editor-styles-wrapper :where(h3) {
  margin: 1.75em 0 0.6em;
}

.entry-content h4,
.editor-styles-wrapper h4 {
  font-size: 1.25rem;   /* text-xl */
  line-height: 1.4;
}

.entry-content :where(h4),
.editor-styles-wrapper :where(h4) {
  margin: 1.5em 0 0.5em;
}

/* 連続する最初の見出しは上マージンを詰める */
.entry-content > :first-child,
.editor-styles-wrapper .block-editor-block-list__layout > :first-child {
  margin-top: 0;
}

/* ============================================================
 * 3. 段落・テキスト
 * ============================================================ */
.entry-content p,
.editor-styles-wrapper p {
  line-height: 1.8;
}

.entry-content :where(p),
.editor-styles-wrapper :where(p) {
  margin: 0 0 1.4em;
}

.entry-content strong,
.editor-styles-wrapper strong {
  font-weight: 700;
  color: var(--wp--preset--color--slate-900, #0f172a);
}

/* ============================================================
 * 4. リンク（accent #0078E8 / hover で primary）
 * ============================================================ */
.entry-content a,
.editor-styles-wrapper a {
  color: var(--wp--preset--color--accent, #0078E8);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.entry-content a:hover,
.editor-styles-wrapper a:hover {
  color: var(--wp--preset--color--primary, #0E2B79);
}

/* ============================================================
 * 5. リスト
 * ============================================================ */
.entry-content :where(ul, ol),
.editor-styles-wrapper :where(ul, ol) {
  margin: 0 0 1.4em;
  padding-left: 1.5em;
}

.entry-content :where(ul, ol) li,
.editor-styles-wrapper :where(ul, ol) li {
  margin: 0.4em 0;
  line-height: 1.8;
}

.entry-content ul,
.editor-styles-wrapper ul {
  list-style: none;
  padding-left: 0;
}

/* ul は accent の丸ドット風マーカー（front の意匠に寄せる） */
.entry-content ul > li,
.editor-styles-wrapper ul > li {
  position: relative;
  padding-left: 1.6em;
}

.entry-content ul > li::before,
.editor-styles-wrapper ul > li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.75em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 9999px;
  background-color: var(--wp--preset--color--accent, #0078E8);
}

/* ネストした ul はマーカーを小さく */
.entry-content ul ul,
.editor-styles-wrapper ul ul {
  margin: 0.4em 0;
}

.entry-content ol,
.editor-styles-wrapper ol {
  list-style: decimal;
}

/* ============================================================
 * 6. 引用（blockquote）
 * ============================================================ */
.entry-content :where(blockquote, .wp-block-quote),
.editor-styles-wrapper :where(blockquote, .wp-block-quote) {
  margin: 1.6em 0;
}

.entry-content blockquote,
.editor-styles-wrapper blockquote,
.entry-content .wp-block-quote,
.editor-styles-wrapper .wp-block-quote {
  padding: 1em 1.5em;
  border-left: 4px solid var(--wp--preset--color--primary, #0E2B79);
  background-color: var(--wp--preset--color--slate-50, #f8fafc);
  color: var(--wp--preset--color--slate-600, #475569);
  font-style: normal;
  border-radius: 0 0.5rem 0.5rem 0;
}

.entry-content blockquote p:last-child,
.editor-styles-wrapper blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content .wp-block-quote cite,
.editor-styles-wrapper .wp-block-quote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.875rem;
  color: var(--wp--preset--color--slate-500, #64748b);
  font-style: normal;
}

/* ============================================================
 * 7. ボタンブロック（accent / primary の既存ボタン意匠）
 * ============================================================ */
.entry-content .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
  background-color: var(--wp--preset--color--accent, #0078E8);
  color: var(--wp--preset--color--base, #fff);
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.entry-content .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary, #0E2B79);
  color: #fff;
}

/* アウトライン型ボタン（is-style-outline） */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--accent, #0078E8);
  border: 2px solid var(--wp--preset--color--accent, #0078E8);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent, #0078E8);
  color: #fff;
}

/* ============================================================
 * 8. テーブル
 * ============================================================ */
.entry-content table,
.editor-styles-wrapper table,
.entry-content .wp-block-table table,
.editor-styles-wrapper .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.entry-content :where(table),
.editor-styles-wrapper :where(table) {
  margin: 1.6em 0;
}

.entry-content :where(th, td),
.editor-styles-wrapper :where(th, td) {
  border: 1px solid var(--wp--preset--color--slate-200, #e2e8f0);
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
}

.entry-content th,
.editor-styles-wrapper th {
  background-color: var(--wp--preset--color--slate-50, #f8fafc);
  font-weight: 700;
  color: var(--wp--preset--color--slate-900, #0f172a);
}

/* ============================================================
 * 9. 画像・キャプション
 * ============================================================ */
.entry-content img,
.editor-styles-wrapper img {
  max-width: 100%;
  height: auto;
}

.entry-content :where(.wp-block-image),
.editor-styles-wrapper :where(.wp-block-image) {
  margin: 1.6em 0;
}

.entry-content .wp-block-image img,
.editor-styles-wrapper .wp-block-image img {
  border-radius: 0.5rem;
}

.entry-content figcaption,
.editor-styles-wrapper figcaption {
  margin-top: 0.6em;
  font-size: 0.875rem;
  color: var(--wp--preset--color--slate-500, #64748b);
  text-align: center;
}

/* ============================================================
 * 10. カラムブロック・区切り線
 * ============================================================ */
.entry-content :where(.wp-block-columns),
.editor-styles-wrapper :where(.wp-block-columns) {
  margin: 1.6em 0;
  gap: 1.5rem;
}

.entry-content hr,
.editor-styles-wrapper hr,
.entry-content .wp-block-separator,
.editor-styles-wrapper .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--wp--preset--color--slate-200, #e2e8f0);
}

.entry-content :where(hr, .wp-block-separator),
.editor-styles-wrapper :where(hr, .wp-block-separator) {
  margin: 2.5em 0;
}

/* ============================================================
 * 11. コード
 * ============================================================ */
.entry-content :where(code, pre),
.editor-styles-wrapper :where(code, pre) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.entry-content code,
.editor-styles-wrapper code {
  background-color: var(--wp--preset--color--slate-100, #f1f5f9);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

.entry-content pre,
.editor-styles-wrapper pre {
  background-color: var(--wp--preset--color--slate-900, #0f172a);
  color: #f8fafc;
  padding: 1.25rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.entry-content :where(pre),
.editor-styles-wrapper :where(pre) {
  margin: 1.6em 0;
}

/* ============================================================
 * 12. レイアウト幅（is-layout-constrained）
 * ------------------------------------------------------------
 * page.php は .entry-content を手書き wrapper として出力するため、
 * WP はこの wrapper にレイアウトCSSを自動生成しない。よってフロントで
 * 本文幅制約・alignwide / alignfull が効くよう実体ルールを固定する。
 * 幅の真実源は theme.json（contentSize 56rem / wideSize 80rem）。
 * グローバルスタイルの CSS 変数を参照し、未供給時は直値にフォールバック。
 * ============================================================ */
.entry-content.is-layout-constrained > * {
  max-width: var(--wp--style--global--content-size, 56rem);
  margin-left: auto;
  margin-right: auto;
}

.entry-content.is-layout-constrained > .alignwide {
  max-width: var(--wp--style--global--wide-size, 80rem);
}

/* alignfull はビューポート全幅。本文ラッパー（max-width 80rem・中央寄せ）
 * の制約を 100vw の breakout で突き破り、左右端へ寄せて全幅化する。
 * 100vw は縦スクロールバー幅を含むため単体では横ずれを回避できない。
 * その横スクロールは body の overflow-x:hidden（style.css）で抑止している。 */
.entry-content.is-layout-constrained > .alignfull {
  max-width: none;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* エディタ内（iframe）では .alignfull は WP が editor 側で全幅化するため、
 * フロント専用の breakout は .entry-content スコープに限定（上記）。
 * editor-styles-wrapper には breakout を当てない。 */

/* ============================================================
 * 13. サービス特徴セクション（ブロックパターン: daiichi/service-feature-*）
 * ------------------------------------------------------------
 * コアブロック（group / columns / image / heading / list 等）で組んだ
 * 「画像＋特徴リスト」セクションの意匠を、Tailwind 非依存の素CSSで再現する。
 * パターン側は最外 group に className "daiichi-feature"（slate-50 帯は
 * "daiichi-feature--alt"）を付与し align=full で背景を全幅化する。
 * 内側コンテンツは theme.json の contentSize により 56rem 制約・中央寄せ。
 * 色・サイズは theme.json のプリセット変数を参照（二重管理を避ける）。
 * フロント(.entry-content)とエディタ(.editor-styles-wrapper)の両方に適用。
 * ============================================================ */

/* --- セクションの帯（背景・上下パディング） --- */
.entry-content .daiichi-feature,
.editor-styles-wrapper .daiichi-feature {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: var(--wp--preset--color--base, #fff);
}

.entry-content .daiichi-feature--alt,
.editor-styles-wrapper .daiichi-feature--alt {
  background-color: var(--wp--preset--color--slate-50, #f8fafc);
}

@media (min-width: 768px) {
  .entry-content .daiichi-feature,
  .editor-styles-wrapper .daiichi-feature {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* --- セクション見出し（中央寄せのアイラベル＋h2＋下線） --- */
/* アイラベル（accent・小文字 uppercase・字間） */
.entry-content .daiichi-feature__eyebrow,
.editor-styles-wrapper .daiichi-feature__eyebrow {
  text-align: center;
  color: var(--wp--preset--color--accent, #0078E8) !important;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-left: 0;
  border-left: 0;               /* 共通h3の左バー（青い縦バー）を打ち消す */
}

.entry-content :where(.daiichi-feature__eyebrow),
.editor-styles-wrapper :where(.daiichi-feature__eyebrow) {
  margin: 0 0 0.75rem;
}

/* セクション h2（中央寄せ・下線は付けない＝独自アクセントバーで代替） */
.entry-content .daiichi-feature__title,
.editor-styles-wrapper .daiichi-feature__title {
  text-align: center;
  font-size: 1.875rem;          /* text-3xl */
  line-height: 1.375;
  padding-bottom: 0;
  border-bottom: 0;             /* 共通h2の下線を打ち消す */
}

.entry-content :where(.daiichi-feature__title),
.editor-styles-wrapper :where(.daiichi-feature__title) {
  margin: 0 0 1rem;
}

@media (min-width: 768px) {
  .entry-content .daiichi-feature__title,
  .editor-styles-wrapper .daiichi-feature__title {
    font-size: 2.25rem;         /* md:text-4xl */
  }
}

/* タイトル下の accent バー（区切り線ブロックで表現せず擬似要素で中央に） */
.entry-content .daiichi-feature__title::after,
.editor-styles-wrapper .daiichi-feature__title::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.25rem;
  margin: 1.5rem auto 0;
  border-radius: 9999px;
  background-color: var(--wp--preset--color--accent, #0078E8);
}

/* 見出しブロックとカラムブロックの間隔 */
.entry-content .daiichi-feature .wp-block-columns,
.editor-styles-wrapper .daiichi-feature .wp-block-columns {
  align-items: flex-start;
}

/* §14-3 .daiichi-cards の余白・gap（§14 から移設）。
 * 全ルールが同率 (0,1,0) になったため、優先順位はソース順（後勝ち）。
 * 従来の優先関係「cards 単独 (0,2,0) ＜ feature 内 columns (0,3,0)」を
 * 保つため、feature columns の余白ルールより前に置く。
 * → feature 帯の中の cards は従来どおり gap 3rem（直下のルールが後勝ち）。 */
.entry-content :where(.daiichi-cards),
.editor-styles-wrapper :where(.daiichi-cards) {
  margin-top: 3rem;
  gap: 1.5rem;
}

.entry-content :where(.daiichi-feature .wp-block-columns),
.editor-styles-wrapper :where(.daiichi-feature .wp-block-columns) {
  margin-top: 3rem;
  gap: 3rem;
}

@media (min-width: 782px) {
  .entry-content :where(.daiichi-feature .wp-block-columns),
  .editor-styles-wrapper :where(.daiichi-feature .wp-block-columns) {
    gap: 3rem;
  }
}

/* --- 画像（角丸） ---
 * 影は一律で付けない。必要な場合はエディタ標準の
 * 「枠線と影」パネル → 影プリセットで個別に指定する。 */
.entry-content :where(.daiichi-feature .wp-block-image),
.editor-styles-wrapper :where(.daiichi-feature .wp-block-image) {
  margin: 0;
}

.entry-content .daiichi-feature .wp-block-image img,
.editor-styles-wrapper .daiichi-feature .wp-block-image img {
  width: 100%;
  border-radius: 1rem;          /* rounded-2xl 相当 */
}

/* --- テキスト列の見出し（h3）・リード文 --- */
/* テキスト列の h3（左ボーダーの共通装飾を打ち消し、サブ見出しに） */
.entry-content .daiichi-feature__subtitle,
.editor-styles-wrapper .daiichi-feature__subtitle {
  font-size: 1.5rem;            /* text-2xl */
  line-height: 1.4;
  padding-left: 0;
  border-left: 0;               /* 共通h3の左バーを打ち消す */
}

.entry-content :where(.daiichi-feature__subtitle),
.editor-styles-wrapper :where(.daiichi-feature__subtitle) {
  margin: 0 0 1rem;
}

/* リード文（accent・太字の短い導入文） */
.entry-content .daiichi-feature__lead,
.editor-styles-wrapper .daiichi-feature__lead {
  color: var(--wp--preset--color--accent, #0078E8);
  font-weight: 700;
  font-size: 0.9375rem;
}

.entry-content :where(.daiichi-feature__lead),
.editor-styles-wrapper :where(.daiichi-feature__lead) {
  margin: 0 0 1.25rem;
}

/* --- 特徴チェックリスト（ul に check_circle マーカー） --- */
.entry-content ul.daiichi-feature__checks,
.editor-styles-wrapper ul.daiichi-feature__checks {
  list-style: none;
  padding-left: 0;
}

.entry-content :where(ul.daiichi-feature__checks),
.editor-styles-wrapper :where(ul.daiichi-feature__checks) {
  margin: 0;
}

.entry-content ul.daiichi-feature__checks > li,
.editor-styles-wrapper ul.daiichi-feature__checks > li {
  position: relative;
  margin: 0 0 1rem;
  padding-left: 2rem;
  line-height: 1.7;
  color: var(--wp--preset--color--slate-700, #334155);
}

/* 丸ドットの共通マーカーを打ち消し、Material Icons の check_circle を出す */
.entry-content ul.daiichi-feature__checks > li::before,
.editor-styles-wrapper ul.daiichi-feature__checks > li::before {
  content: "check_circle";
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.5rem;          /* 1行目に揃える */
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  position: absolute;
  left: 0;
  top: 0.05em;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--wp--preset--color--accent, #0078E8);
}

/* リスト項目内の太字（特徴の見出し的に使う場合） */
.entry-content ul.daiichi-feature__checks > li strong,
.editor-styles-wrapper ul.daiichi-feature__checks > li strong {
  display: block;
  color: var(--wp--preset--color--slate-900, #0f172a);
  font-weight: 700;
}

/* スマホ: カラムが縦積みになった際、画像→テキストの自然順を保証 */
@media (max-width: 781px) {
  .entry-content :where(.daiichi-feature .wp-block-columns),
  .editor-styles-wrapper :where(.daiichi-feature .wp-block-columns) {
    margin-top: 2rem;
    gap: 2rem;
  }
}

/* --- サービスページ限定: 実効コンテンツ幅を課題解決ページに揃える ---
 * 帯内カラムの最大幅を §15 .daiichi-solution__cols と同じ 72rem に、
 * 帯の左右パディングを §15 .daiichi-solution と同値（1.25rem / md+ 1rem）
 * にし、1280px・375px の両方で実効コンテンツ幅を solution ページと一致
 * させる。.daiichi-feature の帯は事業案内（.business-content）でも使う
 * ため、page-service.php のテンプレ固有クラス .service-content でスコープ
 * し、他ページ種別へは波及させない。中央寄せは WP の constrained
 * レイアウト（wp-container-* の auto margin）に委ねる（§15 と同方式）。
 * max-width / padding は blockGap 系ではないため :where() は使わず、WP の
 * wp-container ルール (0,1,0) に勝つ素の詳細度で当てる。
 * ※ エディタ iframe にはテンプレ固有クラスが無いためフロントのみ。 */
.service-content .daiichi-feature {
  padding-left: 1.25rem;        /* §15 帯のモバイル左右パディングと同値 */
  padding-right: 1.25rem;
}

@media (min-width: 768px) {
  .service-content .daiichi-feature {
    padding-left: 1rem;         /* §15 帯の md+ 左右パディングと同値 */
    padding-right: 1rem;
  }
}

.service-content .daiichi-feature > .wp-block-columns {
  max-width: 72rem;             /* max-w-6xl ＝ .daiichi-solution__cols と同値 */
}

/* ============================================================
 * 14. 事業部ページ向けセクション（ブロックパターン: daiichi/text-section ほか）
 * ------------------------------------------------------------
 * 事業案内（CPT business）の本文を、wp:html の塊からコアブロックへ移行する
 * ためのスタイル群。§13 の daiichi-feature と命名・トークンを揃え、
 * 「アイラベル＋見出し＋本文」だけのテキストセクション、業態タグ群、
 * 色付きカードグリッド、PDCA等のステップカードを Tailwind 非依存で再現する。
 * すべて .daiichi-feature の帯（背景・パディング・見出し）の中で使う前提。
 * 色・サイズは theme.json プリセット変数を参照（二重管理を避ける）。
 * フロント(.entry-content)とエディタ(.editor-styles-wrapper)の両方に適用。
 * ============================================================ */

/* --- 14-1. テキストのみセクション（画像なし・中央寄せの本文） --- */
/* daiichi-feature の帯の中で、見出し下に中央寄せの本文段落を置くケース。
 * 段落に className "daiichi-feature__body" を付けて中央寄せ・最大幅を制御。 */
.entry-content .daiichi-feature__body,
.editor-styles-wrapper .daiichi-feature__body {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--wp--preset--color--slate-600, #475569);
  line-height: 1.8;
}

/* テキストのみセクションで、見出し上に置く装飾アイコン（任意）。
 * 段落に className "daiichi-feature__icon" を付け、本文に Material Icons の
 * リガチャ名（例: eco）をそのまま書く。 */
.entry-content .daiichi-feature__icon,
.editor-styles-wrapper .daiichi-feature__icon {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-align: center;
  color: var(--wp--preset--color--accent, #0078E8);
}

.entry-content :where(.daiichi-feature__icon),
.editor-styles-wrapper :where(.daiichi-feature__icon) {
  margin: 0 0 1.5rem;
}

/* --- 14-2. 業態タグ群（pill 風のラベルを横に並べる） --- */
/* リストブロックに className "daiichi-tags" を付け、li を pill 表示にする。
 * 元の「食品スーパー / 外食産業 …」のタグ群を ul で表現する。 */
/* gap はピル同士の見た目の間隔（リストブロックは WP の blockGap 対象外）
 * のため :where 化せず据え置き。ブロックとしての外側余白のみ :where 化。 */
.entry-content ul.daiichi-tags,
.editor-styles-wrapper ul.daiichi-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 0;
}

.entry-content :where(ul.daiichi-tags),
.editor-styles-wrapper :where(ul.daiichi-tags) {
  margin: 1.25rem 0 0;
}

.entry-content ul.daiichi-tags > li,
.editor-styles-wrapper ul.daiichi-tags > li {
  position: relative;
  margin: 0;
  padding: 0.375rem 0.875rem;
  background-color: var(--wp--preset--color--slate-100, #f1f5f9);
  color: var(--wp--preset--color--slate-700, #334155);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  line-height: 1.5;
}

/* 共通 ul の丸ドットマーカーを打ち消す */
.entry-content ul.daiichi-tags > li::before,
.editor-styles-wrapper ul.daiichi-tags > li::before {
  content: none;
}

/* --- 14-3. アイコン付きカードグリッド（色分けカード） --- */
/* カラムブロックに className "daiichi-cards" を付け、各 column を
 * カード（角丸・薄背景・中央寄せ）にする。元の PDCA / 施設 / ゾーニングの
 * カードグリッドを、配色を accent 基調に統一して再現する。 */
/* .daiichi-cards 自体の margin-top / gap は §13「見出しブロックと
 * カラムブロックの間隔」の直前へ移設（:where 同率時のソース順を保つため）。 */

.entry-content .daiichi-cards > .wp-block-column,
.editor-styles-wrapper .daiichi-cards > .wp-block-column {
  background-color: var(--wp--preset--color--slate-50, #f8fafc);
  border: 1px solid var(--wp--preset--color--slate-200, #e2e8f0);
  border-radius: 1rem;
  padding: 2rem 1.25rem;
  text-align: center;
}

/* カード内見出し（h4）の共通装飾を打ち消し、中央寄せのラベルに */
.entry-content .daiichi-cards .wp-block-column :where(h3, h4),
.editor-styles-wrapper .daiichi-cards .wp-block-column :where(h3, h4) {
  text-align: center;
  font-size: 1.125rem;
  padding-left: 0;
  border-left: 0;
  color: var(--wp--preset--color--accent, #0078E8);
}

.entry-content :where(.daiichi-cards .wp-block-column :is(h3, h4)),
.editor-styles-wrapper :where(.daiichi-cards .wp-block-column :is(h3, h4)) {
  margin: 0.75rem 0 0.5rem;
}

.entry-content .daiichi-cards .wp-block-column p,
.editor-styles-wrapper .daiichi-cards .wp-block-column p {
  text-align: center;
  font-size: 0.875rem;
  color: var(--wp--preset--color--slate-600, #475569);
  line-height: 1.7;
}

.entry-content :where(.daiichi-cards .wp-block-column p),
.editor-styles-wrapper :where(.daiichi-cards .wp-block-column p) {
  margin: 0;
}

/* カード冒頭のアイコン（段落に className "daiichi-card__icon"・Material Icons リガチャ） */
.entry-content .daiichi-card__icon,
.editor-styles-wrapper .daiichi-card__icon {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  display: block;
  text-align: center;
  color: var(--wp--preset--color--accent, #0078E8) !important;
}

/* 旧: margin: 0 0 0.25rem !important（カード内 p の margin: 0 (0,3,1) に
 * 勝つための !important）。余白系を :where (0,1,0) に統一したことで、
 * 直前のカード内 p ルールとはソース順（後勝ち）で勝てるため !important を
 * 撤去。blockGap 設定時は WP のルールが後勝ちで上書きできる。 */
.entry-content :where(.daiichi-card__icon),
.editor-styles-wrapper :where(.daiichi-card__icon) {
  margin: 0 0 0.25rem;
}

/* スマホ: カードグリッドは縦積みにせず2列を保つ（タグ的な短いカード向け）。
 * WP のカラムは 782px 未満で自動縦積みになるが、ここでは2列を維持する。 */
@media (max-width: 781px) {
  .entry-content .daiichi-cards.wp-block-columns:not(.is-not-stacked-on-mobile),
  .editor-styles-wrapper .daiichi-cards.wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap;
  }
  .entry-content .daiichi-cards .wp-block-column,
  .editor-styles-wrapper .daiichi-cards .wp-block-column {
    flex-basis: calc(50% - 0.75rem) !important;
  }
}

/* ============================================================
 * 15. 課題解決ページ向けセクション（ブロックパターン: daiichi/solution-*）
 * ------------------------------------------------------------
 * CPT solution_page の本文を、旧テンプレ（single-solution_page.php の
 * parse_blocks 3分割＋Tailwind 直書き＋inline <style>）からコアブロック＋
 * パターンへ移行するためのスタイル群。旧フロントの見た目（帯・2カラム・
 * チェックリスト・CTA・画像の角丸/影/グラデーション）を Tailwind 非依存で再現する。
 * パターン構成（最外 group に align=full ＋ 下記クラス）:
 *   daiichi/solution-overview   … .daiichi-solution--overview（白帯・画像右）
 *   daiichi/solution-challenges … .daiichi-solution--alt --challenges（グレー帯・画像左・赤アクセント）
 *   daiichi/solution-action     … .daiichi-solution--action（白帯・中央寄せ＋ワイド画像）
 * 余白・gap は §2 の詳細度設計ルールに従い :where() で (0,1,0) に統一する
 * （同率はソース順後勝ち。§2〜§14 の汎用余白ルールより後ろに置くこと）。
 * 色は theme.json プリセット変数を参照。赤（Challenges の eyebrow/バー）は
 * パレット外のため Tailwind red-500 の実値 #ef4444 を直書きする。
 * フロント(.entry-content)とエディタ(.editor-styles-wrapper)の両方に適用。
 * ============================================================ */

/* --- 15-1. セクションの帯（背景・上下パディング・本文サイズ） --- */
/* 旧: <section class="py-16 md:py-24"> + <div class="container px-5 md:px-4">。
 * 左右パディングは旧 container の px-5/px-4 を帯自身に持たせて再現する。
 * font-size 1rem は旧本文の text-base（md 以上は --overview/--action のみ
 * text-lg＝1.125rem に上がる。--challenges は旧マークアップ同様 1rem のまま）。 */
.entry-content .daiichi-solution,
.editor-styles-wrapper .daiichi-solution {
  padding: 4rem 1.25rem;
  background-color: var(--wp--preset--color--base, #fff);
  font-size: 1rem;
}

.entry-content .daiichi-solution--alt,
.editor-styles-wrapper .daiichi-solution--alt {
  background-color: var(--wp--preset--color--slate-50, #f8fafc);
}

@media (min-width: 768px) {
  .entry-content .daiichi-solution,
  .editor-styles-wrapper .daiichi-solution {
    padding: 6rem 1rem;
  }
  .entry-content .daiichi-solution--overview,
  .editor-styles-wrapper .daiichi-solution--overview,
  .entry-content .daiichi-solution--action,
  .editor-styles-wrapper .daiichi-solution--action {
    font-size: 1.125rem;        /* 旧 md:text-lg */
  }
}

/* 本文段落: 旧 .solution-body（leading-relaxed / p { margin-bottom: 1em }） */
.entry-content .daiichi-solution p,
.editor-styles-wrapper .daiichi-solution p {
  line-height: 1.625;
}

.entry-content :where(.daiichi-solution p),
.editor-styles-wrapper :where(.daiichi-solution p) {
  margin: 0 0 1em;
}

.entry-content :where(.daiichi-solution p:last-child),
.editor-styles-wrapper :where(.daiichi-solution p:last-child) {
  margin-bottom: 0;
}

/* --- 15-2. アイラベル（eyebrow: Overview / Challenges / Our Solution） --- */
/* 旧: text-xs font-bold tracking-[0.2em] uppercase mb-3。
 * p 要素のため、直前の .daiichi-solution p（line-height）に勝つよう
 * p 付きセレクタ (0,2,1) ＋ ソース順後置にする。 */
.entry-content p.daiichi-solution__eyebrow,
.editor-styles-wrapper p.daiichi-solution__eyebrow {
  font-size: 0.75rem;
  line-height: 1.334;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent, #0078E8);
}

.entry-content .daiichi-solution--challenges p.daiichi-solution__eyebrow,
.editor-styles-wrapper .daiichi-solution--challenges p.daiichi-solution__eyebrow {
  color: #ef4444;               /* Tailwind red-500（パレット外・課題セクション専用） */
}

.entry-content .daiichi-solution--action p.daiichi-solution__eyebrow,
.editor-styles-wrapper .daiichi-solution--action p.daiichi-solution__eyebrow {
  text-align: center;
}

.entry-content :where(p.daiichi-solution__eyebrow),
.editor-styles-wrapper :where(p.daiichi-solution__eyebrow) {
  margin: 0 0 0.75rem;
}

/* --- 15-3. セクション見出し（title ＋ 下のアクセントバー） --- */
/* 旧: text-2xl md:text-3xl font-bold text-slate-900 leading-snug mb-6 ＋
 * <div class="w-12 h-1 bg-accent mb-6">。バーは ::after で再現する。
 * 共通 h2 の下線・共通 h3 の左バー装飾は打ち消す。 */
.entry-content .daiichi-solution__title,
.editor-styles-wrapper .daiichi-solution__title {
  font-size: 1.5rem;            /* text-2xl */
  line-height: 1.375;           /* leading-snug */
  padding: 0;
  border: 0;                    /* 共通 h2 の下線・共通 h3 の左バーを打ち消す */
}

@media (min-width: 768px) {
  .entry-content .daiichi-solution__title,
  .editor-styles-wrapper .daiichi-solution__title {
    font-size: 1.875rem;        /* md:text-3xl */
  }
}

.entry-content .daiichi-solution__title::after,
.editor-styles-wrapper .daiichi-solution__title::after {
  content: "";
  display: block;
  width: 3rem;                  /* w-12 */
  height: 0.25rem;              /* h-1 */
  margin-top: 1.5rem;           /* 旧 h2 の mb-6（見出し文とバーの間隔） */
  background-color: var(--wp--preset--color--accent, #0078E8);
}

.entry-content .daiichi-solution--challenges .daiichi-solution__title::after,
.editor-styles-wrapper .daiichi-solution--challenges .daiichi-solution__title::after {
  background-color: #ef4444;    /* Tailwind red-500 */
}

.entry-content .daiichi-solution--action .daiichi-solution__title,
.editor-styles-wrapper .daiichi-solution--action .daiichi-solution__title {
  text-align: center;
}

.entry-content .daiichi-solution--action .daiichi-solution__title::after,
.editor-styles-wrapper .daiichi-solution--action .daiichi-solution__title::after {
  margin: 1rem auto 0;          /* 旧 h3 の mb-4 ＋ バー中央寄せ */
}

/* 見出し下マージン: 旧はバー(div)の mb-6（中央寄せ型はラッパーの mb-12）。
 * バーを ::after 化したため見出し自身の margin-bottom で表現する。 */
.entry-content :where(.daiichi-solution__title),
.editor-styles-wrapper :where(.daiichi-solution__title) {
  margin: 0 0 1.5rem;
}

.entry-content :where(.daiichi-solution--action .daiichi-solution__title),
.editor-styles-wrapper :where(.daiichi-solution--action .daiichi-solution__title) {
  margin: 0 0 3rem;             /* 旧 text-center ラッパーの mb-12 */
}

/* --- 15-4. 2カラム（画像＋テキスト） --- */
/* 旧: max-w-6xl mx-auto grid md:grid-cols-2 gap-10 lg:gap-16 items-center。
 * 中央寄せは WP の constrained レイアウト（auto margin）に委ねる。 */
.entry-content .daiichi-solution__cols,
.editor-styles-wrapper .daiichi-solution__cols {
  max-width: 72rem;             /* max-w-6xl */
}

.entry-content :where(.daiichi-solution__cols),
.editor-styles-wrapper :where(.daiichi-solution__cols) {
  gap: 2.5rem;                  /* gap-10 */
}

@media (min-width: 1024px) {
  .entry-content :where(.daiichi-solution__cols),
  .editor-styles-wrapper :where(.daiichi-solution__cols) {
    gap: 4rem;                  /* lg:gap-16 */
  }
}

/* 画像右型（overview）: ソース順は「画像→テキスト」（スマホ縦積みで旧と同じ
 * 画像先頭を保つ）。デスクトップでは order でテキスト左・画像右に入れ替える。
 * 782px は WP コアのカラム縦積みブレークポイントに合わせる。 */
@media (min-width: 782px) {
  .entry-content .daiichi-solution__cols--media-right > .wp-block-column:first-child,
  .editor-styles-wrapper .daiichi-solution__cols--media-right > .wp-block-column:first-child {
    order: 2;
  }
}

/* --- 15-5. セクション画像（角丸・影・グラデーション） --- */
.entry-content .daiichi-solution__media,
.editor-styles-wrapper .daiichi-solution__media {
  position: relative;           /* ::after のグラデーション基準 */
}

.entry-content :where(.daiichi-solution .wp-block-image),
.editor-styles-wrapper :where(.daiichi-solution .wp-block-image) {
  margin: 0;                    /* §9 の汎用 1.6em を打ち消す */
}

/* 旧: rounded-2xl shadow-xl shadow-slate-200（Tailwind shadow-xl の実値） */
.entry-content .daiichi-solution__media img,
.editor-styles-wrapper .daiichi-solution__media img {
  width: 100%;
  border-radius: 1rem;          /* rounded-2xl */
  box-shadow:
    0 20px 25px -5px var(--wp--preset--color--slate-200, #e2e8f0),
    0 8px 10px -6px var(--wp--preset--color--slate-200, #e2e8f0);
}

/* 課題セクションの影は旧 shadow-slate-300/40 */
.entry-content .daiichi-solution--challenges .daiichi-solution__media img,
.editor-styles-wrapper .daiichi-solution--challenges .daiichi-solution__media img {
  box-shadow:
    0 20px 25px -5px rgba(203, 213, 225, 0.4),
    0 8px 10px -6px rgba(203, 213, 225, 0.4);
}

/* グラデーションオーバーレイ（旧 absolute div を ::after で再現） */
.entry-content .daiichi-solution__media--tint::after,
.editor-styles-wrapper .daiichi-solution__media--tint::after,
.entry-content .daiichi-solution__media--tint-strong::after,
.editor-styles-wrapper .daiichi-solution__media--tint-strong::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  pointer-events: none;
}

/* 旧: bg-gradient-to-tr from-primary/20 to-transparent（overview） */
.entry-content .daiichi-solution__media--tint::after,
.editor-styles-wrapper .daiichi-solution__media--tint::after {
  background: linear-gradient(to top right, rgba(14, 43, 121, 0.2), transparent);
}

/* 旧: bg-gradient-to-t from-primary/70 via-primary/20 to-transparent（action） */
.entry-content .daiichi-solution__media--tint-strong::after,
.editor-styles-wrapper .daiichi-solution__media--tint-strong::after {
  background: linear-gradient(to top, rgba(14, 43, 121, 0.7), rgba(14, 43, 121, 0.2) 50%, transparent);
}

/* ワイド画像（action）: 旧 max-w-5xl ラッパー＋ mb-10 */
.entry-content .daiichi-solution__media--wide,
.editor-styles-wrapper .daiichi-solution__media--wide {
  max-width: 64rem;             /* max-w-5xl */
}

.entry-content :where(.daiichi-solution__media--wide),
.editor-styles-wrapper :where(.daiichi-solution__media--wide) {
  margin: 0 auto 2.5rem;        /* mb-10（左右 auto はエディタ用の保険。フロントは WP が auto !important を付与） */
}

/* --- 15-6. 中央寄せ本文（action の max-w-3xl mx-auto） --- */
.entry-content .daiichi-solution__narrow,
.editor-styles-wrapper .daiichi-solution__narrow {
  max-width: 48rem;             /* max-w-3xl */
}

/* --- 15-7. お悩みチェックリスト（旧 .solution-checklist） --- */
.entry-content ul.daiichi-solution__checks,
.editor-styles-wrapper ul.daiichi-solution__checks {
  list-style: none;
  padding-left: 0;
}

.entry-content :where(ul.daiichi-solution__checks),
.editor-styles-wrapper :where(ul.daiichi-solution__checks) {
  margin: 0;
}

/* li は WP blockGap の対象外のため :where 化不要（.daiichi-tags > li と同じ流儀）。
 * §5 の li { margin: 0.4em 0 }（0,1,1）に勝つよう本体（0,2,1）で margin: 0 を当てる。 */
.entry-content ul.daiichi-solution__checks > li,
.editor-styles-wrapper ul.daiichi-solution__checks > li {
  position: relative;
  margin: 0;                    /* §5 の li { margin: 0.4em 0 } を打ち消す */
  padding: 0.5rem 0 0.5rem 2rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  line-height: 1.625;
}

.entry-content ul.daiichi-solution__checks > li:last-child,
.editor-styles-wrapper ul.daiichi-solution__checks > li:last-child {
  border-bottom: 0;
}

/* 共通 ul の丸ドットを打ち消し、白チェック入りの青い丸マーカーにする */
.entry-content ul.daiichi-solution__checks > li::before,
.editor-styles-wrapper ul.daiichi-solution__checks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--wp--preset--color--accent, #0078E8) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/0.85rem no-repeat;
}

/* --- 15-8. CTAボタン（旧 inline <style> の課題解決CTA意匠） --- */
/* §7 の共通ボタン意匠の上に、旧デザインの影・浮き上がりホバーを足す。 */
.entry-content :where(.daiichi-solution .wp-block-buttons),
.editor-styles-wrapper :where(.daiichi-solution .wp-block-buttons) {
  margin-top: 2rem;
}

.entry-content .daiichi-solution .wp-block-button__link,
.editor-styles-wrapper .daiichi-solution .wp-block-button__link {
  padding: 0.875rem 2rem;
  box-shadow: 0 10px 25px rgba(0, 120, 232, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.entry-content .daiichi-solution .wp-block-button__link:hover,
.editor-styles-wrapper .daiichi-solution .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary, #0E2B79);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(14, 43, 121, 0.3);
}