/**
 * Task40（仮）v4：CMU AIマーケティングサポート（/cmu/の紹介枠・商品ページ・実務コラム一覧・記事詳細）専用CSS。
 * 既存の assets/css/cmu.css（.cmu-page）を土台にし、追加分だけを置く。指定はすべて .cmu-page 内に限定。
 * 色：白・ネイビー（--cmu-ink）・ティール（--cmu-accent）。ブレークポイントは既存（1000／860／700px）。
 */
.cmu-page { --cmu-teal-soft: #e8f2f2; --cmu-panel: #f6f8f9; }

/* ---------- 共通部品 ---------- */
.cmu-page .cmu-ai-icon { flex: none; width: 22px; height: 22px; color: var(--cmu-accent); vertical-align: -5px; }
.cmu-page .cmu-ai-icon--lg { width: 34px; height: 34px; }
.cmu-page .cmu-ai-logo { display: block; }
.cmu-page .cmu-ai-logo img { display: block; width: 100%; height: auto; }
.cmu-page .cmu-ai-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--cmu-teal-soft); color: #1f5f63; font-size: 11px; font-weight: 600; line-height: 1.8; letter-spacing: .04em; }
.cmu-page .cmu-ai-small { margin-top: 12px !important; color: var(--cmu-muted); font-size: 13px; line-height: 1.85; }
.cmu-page .cmu-ai-sub { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 17px; font-weight: 600; line-height: 1.6; }
.cmu-page .cmu-ai-more { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; }
.cmu-page .cmu-ai-more a { border-bottom: 1px solid currentColor; text-decoration: none; }
.cmu-page .cmu-ai-more span { margin-left: 6px; }
.cmu-page .cmu-button { word-break: auto-phrase; }
.cmu-page .cmu-ai-hero__lead { max-width: 820px; margin-top: 24px; font-size: 16px; line-height: 2; }

/* 使用するAI／連携・操作するサービス（テキスト表示） */
.cmu-page .cmu-ai-tools { display: grid; gap: 8px; margin: 14px 0 0; }
.cmu-page .cmu-ai-tools div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cmu-page .cmu-ai-tools dt { display: inline-flex; align-items: center; gap: 4px; color: var(--cmu-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cmu-page .cmu-ai-tools dt .cmu-ai-icon { width: 16px; height: 16px; vertical-align: 0; }
.cmu-page .cmu-ai-tools dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cmu-page .cmu-ai-chip { display: inline-block; padding: 1px 9px; border: 1px solid var(--cmu-line-strong); border-radius: 4px; background: #fff; font-size: 12px; line-height: 1.8; }
.cmu-page .cmu-ai-chip--ai { border-color: var(--cmu-ink); font-weight: 600; }
.cmu-page .cmu-ai-tools--compact dt { font-size: 11px; }

/* ---------- /cmu/ 06内：新商品の紹介枠（ロゴ・短い紹介・入口） ---------- */
.cmu-page .cmu-ai-intro { margin: 0 0 56px; padding: 36px 44px 40px; border: 1px solid var(--cmu-line-strong); border-top: 2px solid var(--cmu-ink); background: #fff; }
.cmu-page .cmu-ai-intro__label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; color: var(--cmu-muted); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.cmu-page .cmu-ai-intro__label span { color: var(--cmu-accent); }
.cmu-page .cmu-ai-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 56px; align-items: center; }
.cmu-page .cmu-ai-logo--intro { width: min(100%, 400px); }
.cmu-page .cmu-ai-intro .cmu-actions { margin-top: 22px; }

/* ---------- 商品ページ ---------- */
.cmu-page .cmu-ai-hero { max-width: 980px; margin-top: 56px; }
.cmu-page .cmu-ai-hero__logo { width: min(100%, 520px); margin-bottom: 40px; }
.cmu-page .cmu-ai-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.cmu-page .cmu-ai-points li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 18px 18px 20px; border: 1px solid var(--cmu-line); background: #fff; }
.cmu-page .cmu-ai-points .cmu-ai-icon { grid-row: span 2; width: 28px; height: 28px; }
.cmu-page .cmu-ai-points strong { font-size: 15px; font-weight: 600; }
.cmu-page .cmu-ai-points span { color: #3c4c5a; font-size: 13px; line-height: 1.8; }
.cmu-page .cmu-ai-hero__scale { margin-top: 18px; color: var(--cmu-muted); font-size: 13px; }

/* ② 課題 */
.cmu-page .cmu-ai-issues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cmu-page .cmu-ai-issues li { display: flex; gap: 14px; padding: 22px 20px; border: 1px solid var(--cmu-line); background: #fff; }
.cmu-page .cmu-ai-issues h3 { font-size: 15px; font-weight: 600; line-height: 1.7; }
.cmu-page .cmu-ai-issues p { margin-top: 6px; color: #3c4c5a; font-size: 13px; line-height: 1.85; }

/* ③ 支援メニュー */
.cmu-page .cmu-ai-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cmu-page .cmu-ai-menu__card { display: flex; flex-direction: column; padding: 24px 24px 22px; border: 1px solid var(--cmu-line); border-top: 2px solid var(--cmu-accent); background: #fff; }
.cmu-page .cmu-ai-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cmu-page .cmu-ai-menu__head span { color: var(--cmu-muted); font-size: 12px; letter-spacing: .1em; }
.cmu-page .cmu-ai-menu__card h3 { font-size: 16px; font-weight: 600; line-height: 1.6; }
.cmu-page .cmu-ai-menu__card > p:not(.cmu-ai-menu__head):not(.cmu-ai-more) { margin-top: 8px; color: #3c4c5a; font-size: 13px; line-height: 1.85; }

/* ステップ図（商品ページ④・記事の作業の流れ） */
.cmu-page .cmu-ai-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: none; }
.cmu-page .cmu-ai-steps li { position: relative; padding: 0 18px 0 0; }
.cmu-page .cmu-ai-steps li::after { content: ""; position: absolute; top: 17px; left: 44px; right: 8px; height: 1px; background: var(--cmu-line-strong); }
.cmu-page .cmu-ai-steps li:last-child::after { display: none; }
.cmu-page .cmu-ai-steps__num { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--cmu-ink); color: #fff; font-size: 14px; font-weight: 600; }
.cmu-page .cmu-ai-steps h3 { font-size: 15px; font-weight: 600; line-height: 1.6; }
.cmu-page .cmu-ai-steps p { margin-top: 6px; color: #3c4c5a; font-size: 13px; line-height: 1.85; }
.cmu-page .cmu-ai-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 56px; margin-top: 56px; }

/* AIと人の役割（比較表） */
.cmu-page .cmu-ai-table-wrap { overflow-x: auto; }
.cmu-page .cmu-ai-roles { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; line-height: 1.8; }
.cmu-page .cmu-ai-roles th, .cmu-page .cmu-ai-roles td { padding: 11px 14px; border: 1px solid var(--cmu-line); text-align: left; vertical-align: top; }
.cmu-page .cmu-ai-roles thead th { background: var(--cmu-ink); color: #fff; font-weight: 600; white-space: nowrap; }
.cmu-page .cmu-ai-roles thead .cmu-ai-icon { width: 16px; height: 16px; margin-right: 4px; color: #9fd0d1; vertical-align: -3px; }
.cmu-page .cmu-ai-roles tbody th { width: 34%; font-weight: 600; }
.cmu-page .cmu-ai-deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cmu-page .cmu-ai-deliverables li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--cmu-line); background: #fff; font-size: 13px; line-height: 1.6; }
.cmu-page .cmu-ai-deliverables .cmu-ai-icon { width: 18px; height: 18px; }

/* ⑤ 実務例 */
.cmu-page .cmu-ai-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cmu-page .cmu-ai-example { display: flex; flex-direction: column; padding: 26px 26px 24px; border: 1px solid var(--cmu-line); background: #fff; }
.cmu-page .cmu-ai-example__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cmu-page .cmu-ai-example h3 { margin-bottom: 8px; font-size: 17px; font-weight: 600; line-height: 1.6; }
.cmu-page .cmu-ai-example > p { color: #3c4c5a; font-size: 14px; line-height: 1.9; }
.cmu-page .cmu-ai-example--video { grid-column: 1 / -1; }
.cmu-page .cmu-ai-videos { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 14px auto 4px; max-width: 360px; }
@media (min-width: 768px) { .cmu-page .cmu-ai-videos { grid-template-columns: repeat(2, minmax(0, 300px)); max-width: none; justify-content: start; gap: 24px; } }
.cmu-page .cmu-ai-video { margin: 0; }
.cmu-page .cmu-ai-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; object-fit: contain; }
.cmu-page .cmu-ai-video figcaption { margin-top: 6px; color: var(--cmu-muted, #5b6573); font-size: 12px; line-height: 1.6; }
.cmu-page .cmu-ai-linklist { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cmu-line); font-size: 13px; }
.cmu-page .cmu-ai-linklist li + li { margin-top: 4px; }
.cmu-page .cmu-ai-linklist a::before { content: "→ "; color: var(--cmu-accent); }

/* ⑥ 効果検証（検証サイクル）：PCは「1→2→3→4 ↓ 5←6←7 ← 再検証 ↑1」の循環配置、それ以下は縦に1→7→再検証 */
.cmu-page .cmu-ai-cycle { display: grid; grid-template-columns: 1fr; gap: 30px; }
.cmu-page .cmu-ai-cycle li { position: relative; padding: 18px 18px 18px 56px; border: 1px solid var(--cmu-line); background: #fff; }
.cmu-page .cmu-ai-cycle__num { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--cmu-accent); border-radius: 50%; color: var(--cmu-accent); font-size: 13px; font-weight: 700; }
.cmu-page .cmu-ai-cycle li > p { font-size: 14px; font-weight: 600; line-height: 1.7; }
.cmu-page .cmu-ai-cycle__link { margin-top: 8px; font-size: 12px !important; font-weight: 400 !important; }
.cmu-page .cmu-ai-cycle li::after { position: absolute; z-index: 1; color: var(--cmu-accent); font-size: 20px; font-weight: 700; line-height: 1; }
.cmu-page .cmu-ai-cycle li:not(:last-child)::after { content: "↓"; left: 50%; bottom: -26px; transform: translateX(-50%); }
.cmu-page .cmu-ai-cycle__return { display: flex; align-items: center; gap: 10px; padding: 16px 18px !important; border: 1.5px dashed var(--cmu-accent) !important; background: var(--cmu-teal-soft) !important; color: #1f5f63; }
.cmu-page .cmu-ai-cycle__return p { font-size: 13px !important; }
.cmu-page .cmu-ai-cycle__return::after { content: "↺" !important; position: static !important; transform: none !important; margin-left: auto; font-size: 22px !important; }
@media (min-width: 1001px) {
  .cmu-page .cmu-ai-cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 34px; }
  .cmu-page .cmu-ai-cycle li:nth-child(1) { grid-area: 1 / 1; } .cmu-page .cmu-ai-cycle li:nth-child(2) { grid-area: 1 / 2; }
  .cmu-page .cmu-ai-cycle li:nth-child(3) { grid-area: 1 / 3; } .cmu-page .cmu-ai-cycle li:nth-child(4) { grid-area: 1 / 4; }
  .cmu-page .cmu-ai-cycle li:nth-child(5) { grid-area: 2 / 4; } .cmu-page .cmu-ai-cycle li:nth-child(6) { grid-area: 2 / 3; }
  .cmu-page .cmu-ai-cycle li:nth-child(7) { grid-area: 2 / 2; } .cmu-page .cmu-ai-cycle li:nth-child(8) { grid-area: 2 / 1; }
  /* 矢印：1〜3は右、4は下、5〜7は左、再検証は上（1へ戻る） */
  .cmu-page .cmu-ai-cycle li:nth-child(-n+3)::after { content: "→"; left: auto; right: -28px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .cmu-page .cmu-ai-cycle li:nth-child(4)::after { content: "↓"; left: 50%; bottom: -30px; top: auto; transform: translateX(-50%); }
  .cmu-page .cmu-ai-cycle li:nth-child(n+5):nth-child(-n+7)::after { content: "←"; left: -28px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
  .cmu-page .cmu-ai-cycle__return { flex-direction: column; justify-content: center; text-align: center; }
  .cmu-page .cmu-ai-cycle__return::after { content: "↑" !important; position: absolute !important; top: -30px; left: 50%; transform: translateX(-50%) !important; margin: 0; font-size: 20px !important; }
}

/* ⑧ コラム案内のカテゴリカード */
.cmu-page .cmu-ai-catcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cmu-page .cmu-ai-catcards a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--cmu-line); background: #fff; text-decoration: none; }
.cmu-page .cmu-ai-catcards a:hover, .cmu-page .cmu-ai-catcards a:focus-visible { border-color: var(--cmu-ink); }
.cmu-page .cmu-ai-catcards__name { font-size: 14px; font-weight: 600; line-height: 1.6; }
.cmu-page .cmu-ai-catcards__count { color: var(--cmu-muted); font-size: 12px; white-space: nowrap; }

/* ⑨ 料金 */
.cmu-page .cmu-ai-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px !important; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; line-height: 1.4; letter-spacing: .04em; }
.cmu-page .cmu-ai-price span { color: var(--cmu-muted); font-size: 13px; letter-spacing: .1em; }
.cmu-page #ai-price .cmu-split__body > p + p { margin-top: 10px; }

/* ⑩ 問い合わせ・締め */
.cmu-page .cmu-ai-closing-msg { max-width: 820px; margin-bottom: 48px; }
.cmu-page .cmu-ai-closing-msg .cmu-closing__catch { margin-bottom: 10px; font-size: 19px; font-weight: 600; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.cmu-page .cmu-ai-closing-msg p + p { margin-top: 8px; }
.cmu-page .cmu-contact__body p + p { margin-top: 12px; }
.cmu-page .cmu-ai-asklist { margin-top: 12px; border-top: 1px solid var(--cmu-line); }
.cmu-page .cmu-ai-asklist li { position: relative; padding: 9px 0 9px 20px; border-bottom: 1px solid var(--cmu-line); font-size: 14px; line-height: 1.8; }
.cmu-page .cmu-ai-asklist li::before { content: ""; position: absolute; left: 3px; top: 21px; width: 6px; height: 6px; border-radius: 50%; background: var(--cmu-ink); }
.cmu-page .cmu-ai-closing__logo { width: min(100%, 340px); margin-bottom: 22px; }

/* ---------- コラム一覧 ---------- */
.cmu-page .cmu-col__hero { padding-bottom: 48px; }
.cmu-page .cmu-col-filter { padding: 36px 0 28px; border-top: 1px solid var(--cmu-line); border-bottom: 1px solid var(--cmu-line); background: var(--cmu-panel); }
.cmu-page .cmu-col-filter__title { margin-bottom: 16px; font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.cmu-page .cmu-col-filter__select { display: none; }
.cmu-page .cmu-col-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cmu-page .cmu-col-cats__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--cmu-line); border-radius: 4px; background: #fff; text-decoration: none; transition: border-color .15s ease; }
.cmu-page .cmu-col-cats__item:hover { border-color: var(--cmu-ink); }
.cmu-page .cmu-col-cats__item[aria-current="true"] { border-color: var(--cmu-ink); box-shadow: inset 0 0 0 1px var(--cmu-ink); background: var(--cmu-teal-soft); }
.cmu-page .cmu-col-cats__item[aria-disabled="true"] { opacity: .45; cursor: default; }
.cmu-page .cmu-col-cats__name { font-size: 14px; font-weight: 600; line-height: 1.6; }
.cmu-page .cmu-col-cats__count { color: var(--cmu-muted); font-size: 12px; white-space: nowrap; }
.cmu-page .cmu-col-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; }
.cmu-page .cmu-col-tools__label { color: var(--cmu-muted); font-size: 12px; font-weight: 600; }
.cmu-page .cmu-col-tools__list { display: flex; flex-wrap: wrap; gap: 6px; }
.cmu-page .cmu-col-tool { min-height: 32px; padding: 3px 12px; border: 1px solid var(--cmu-line-strong); border-radius: 999px; background: #fff; color: var(--cmu-ink); font: inherit; font-size: 12px; cursor: pointer; }
.cmu-page .cmu-col-tool[aria-pressed="true"] { border-color: var(--cmu-ink); background: var(--cmu-ink); color: #fff; }
.cmu-page .cmu-col-status { margin-top: 16px; font-size: 13px; font-weight: 600; }
.cmu-page .cmu-col-status:empty { display: none; }
.cmu-page .cmu-col-reset { margin-top: 8px; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--cmu-ink); font: inherit; font-size: 13px; cursor: pointer; }
.cmu-page .cmu-col-cat { padding: 56px 0 8px; }
.cmu-page .cmu-col-cat:last-of-type { padding-bottom: 72px; }
.cmu-page .cmu-col-cat__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.cmu-page .cmu-col-cat__head h2 { font-size: 21px; font-weight: 600; line-height: 1.5; }
.cmu-page .cmu-col-cat__count { margin-left: 12px; color: var(--cmu-muted); font-size: 13px; font-weight: 500; }
.cmu-page .cmu-col-cat__head p { margin-top: 4px; color: #3c4c5a; font-size: 13px; line-height: 1.85; }
.cmu-page .cmu-col-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cmu-page .cmu-col-card { display: flex; flex-direction: column; padding: 20px 20px 18px; border: 1px solid var(--cmu-line); background: #fff; }
.cmu-page .cmu-col-card[hidden] { display: none; }
.cmu-page .cmu-col-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.cmu-page .cmu-col-card__cat { color: var(--cmu-muted); font-size: 11px; font-weight: 600; }
.cmu-page .cmu-col-card h3 { font-size: 15px; font-weight: 600; line-height: 1.7; }
.cmu-page .cmu-col-card h3 a { text-decoration: none; }
.cmu-page .cmu-col-card h3 a:hover { text-decoration: underline; }
.cmu-page .cmu-col-card h3 a::after { content: ""; position: absolute; inset: 0; } /* カード全体をクリック可能に */
.cmu-page .cmu-col-card { position: relative; }
.cmu-page .cmu-col-card:focus-within { outline: 2px solid var(--cmu-accent); outline-offset: 2px; }
.cmu-page .cmu-col-card__can { margin-top: 8px; color: #3c4c5a; font-size: 13px; line-height: 1.85; }
.cmu-page .cmu-col-card .cmu-ai-tools { margin-top: auto; padding-top: 12px; }
.cmu-page .cmu-col-step { display: inline-block; min-width: 3.4em; padding: 0 7px; border: 1px solid var(--cmu-line-strong); color: var(--cmu-muted); font-size: 11px; font-weight: 600; line-height: 1.8; letter-spacing: .06em; text-align: center; }
.cmu-page .cmu-col-step--setup { border-color: var(--cmu-accent); color: var(--cmu-accent); }
.cmu-page .cmu-col-more { display: block; margin: 16px auto 0; padding: 10px 22px; border: 1px solid var(--cmu-ink); border-radius: 999px; background: #fff; color: var(--cmu-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cmu-page .cmu-col-more[hidden] { display: none; }
.cmu-page .cmu-col-empty { color: var(--cmu-muted); }

/* ---------- 記事詳細 ---------- */
.cmu-page .cmu-art__head { padding-bottom: 40px; border-bottom: 1px solid var(--cmu-line); }
.cmu-page .cmu-art__head .cmu-wrap, .cmu-page .cmu-art__body { max-width: 900px; }
.cmu-page .cmu-art__cat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 48px; color: var(--cmu-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.cmu-page .cmu-art__cat a { text-decoration: none; border-bottom: 1px solid var(--cmu-line-strong); }
.cmu-page .cmu-art__head h1 { margin-top: 14px; font-size: clamp(22px, 2.3vw, 29px); font-weight: 600; line-height: 1.6; letter-spacing: .02em; }
.cmu-page .cmu-art__summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; margin-top: 26px; padding: 22px 24px; border-left: 3px solid var(--cmu-accent); background: var(--cmu-panel); }
.cmu-page .cmu-art__summary-can { grid-column: 1 / -1; }
.cmu-page .cmu-art__summary-can p:last-child { font-size: 15px; line-height: 1.95; }
.cmu-page .cmu-art__summary-label { display: flex; align-items: center; gap: 6px; margin-bottom: 4px !important; color: #1f5f63; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.cmu-page .cmu-art__summary-label .cmu-ai-icon { width: 16px; height: 16px; }
.cmu-page .cmu-art__summary-out li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.85; }
.cmu-page .cmu-art__summary-out li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; background: var(--cmu-accent); }
.cmu-page .cmu-art__summary-tools .cmu-ai-tools { margin-top: 0; }
.cmu-page .cmu-art__date { margin-top: 16px; color: var(--cmu-muted); font-size: 12px; }
.cmu-page .cmu-art__body { padding-top: 48px; padding-bottom: 72px; }
.cmu-page .cmu-art__body section + section { margin-top: 48px; }
.cmu-page .cmu-art__body h2 { margin-bottom: 14px; padding-left: 12px; border-left: 3px solid var(--cmu-ink); font-size: 19px; font-weight: 600; line-height: 1.5; }
.cmu-page .cmu-art__checks { display: grid; gap: 6px; }
.cmu-page .cmu-art__checks li { position: relative; padding: 8px 12px 8px 34px; border: 1px solid var(--cmu-line); background: #fff; font-size: 14px; line-height: 1.8; }
.cmu-page .cmu-art__checks li::before { content: ""; position: absolute; left: 13px; top: 15px; width: 10px; height: 6px; border-left: 1.6px solid var(--cmu-accent); border-bottom: 1.6px solid var(--cmu-accent); transform: rotate(-45deg); }
.cmu-page .cmu-ai-steps--art { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.cmu-page .cmu-ai-steps--art p { margin-top: 0; color: var(--cmu-ink); font-size: 14px; }
.cmu-page .cmu-art__acc { margin-top: 14px; border: 1px solid var(--cmu-line-strong); background: #fff; }
.cmu-page .cmu-art__acc summary { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 13px 48px 13px 16px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.cmu-page .cmu-art__acc summary::-webkit-details-marker { display: none; }
.cmu-page .cmu-art__acc summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; }
.cmu-page .cmu-art__acc[open] summary::after { content: "−"; }
.cmu-page .cmu-art__acc summary:focus-visible { outline: 2px solid var(--cmu-accent); outline-offset: -2px; }
.cmu-page .cmu-art__acc-note { color: #1f5f63; font-size: 12px; font-weight: 600; }
.cmu-page .cmu-art__acc-body { padding: 0 16px 16px; font-size: 14px; line-height: 1.9; }
.cmu-page .cmu-art__acc-lead { margin-bottom: 8px; color: var(--cmu-muted); font-size: 12px; }
.cmu-page .cmu-art__prompt { margin: 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--cmu-line); background: var(--cmu-panel); font-family: inherit; font-size: 13px; line-height: 1.9; white-space: pre-wrap; }
.cmu-page .cmu-ai-roles--art { margin-bottom: 26px; }
.cmu-page .cmu-art__checks--human li::before { border-color: var(--cmu-ink); }
.cmu-page .cmu-art__result p { padding: 18px 20px; border: 1px solid var(--cmu-accent); background: var(--cmu-teal-soft); font-size: 15px; line-height: 1.95; }
.cmu-page .cmu-art__after { padding: 56px 0 72px; }
.cmu-page .cmu-art__back { margin-bottom: 28px; font-size: 14px; font-weight: 600; }
.cmu-page .cmu-art__back a { text-decoration: none; border-bottom: 1px solid currentColor; }
.cmu-page .cmu-art__back span { margin-right: 6px; }
.cmu-page .cmu-col-cards--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmu-page .cmu-art__service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 40px; align-items: start; margin-top: 40px; padding: 28px 30px; border: 1px solid var(--cmu-line); background: #fff; }
.cmu-page .cmu-art__service .cmu-ai-closing__logo { margin: 4px 0 0; }
.cmu-page .cmu-art__service-label { color: var(--cmu-muted); font-size: 12px; font-weight: 600; }
.cmu-page .cmu-art__service-name { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px !important; font-size: 16px; font-weight: 600; }
.cmu-page .cmu-art__service .cmu-actions { margin-top: 18px; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1000px) {
  .cmu-page .cmu-ai-intro__grid { grid-template-columns: 1fr; gap: 20px; }
  .cmu-page .cmu-ai-menu, .cmu-page .cmu-ai-issues, .cmu-page .cmu-col-cards, .cmu-page .cmu-ai-catcards, .cmu-page .cmu-col-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmu-page .cmu-ai-steps { grid-template-columns: 1fr; gap: 14px; }
  .cmu-page .cmu-ai-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 0 14px; padding: 0; }
  .cmu-page .cmu-ai-steps li::after { top: 40px; bottom: -14px; left: 17px; right: auto; width: 1px; height: auto; }
  .cmu-page .cmu-ai-steps__num { grid-row: span 2; margin: 0; }
  .cmu-page .cmu-ai-steps--art li { grid-template-columns: 36px 1fr; align-items: center; }
  .cmu-page .cmu-ai-two { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  .cmu-page .cmu-ai-points { grid-template-columns: 1fr; }
  .cmu-page .cmu-ai-examples { grid-template-columns: 1fr; }
  .cmu-page .cmu-art__service { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 700px) {
  .cmu-page .cmu-ai-intro { padding: 26px 18px 28px; }
  .cmu-page .cmu-ai-logo--intro, .cmu-page .cmu-ai-hero__logo, .cmu-page .cmu-ai-closing__logo { width: 100%; max-width: 420px; }
  .cmu-page .cmu-ai-hero { margin-top: 40px; }
  .cmu-page .cmu-ai-hero__logo { margin-bottom: 28px; }
  .cmu-page .cmu-ai-menu, .cmu-page .cmu-ai-issues, .cmu-page .cmu-col-cards, .cmu-page .cmu-col-cards--related, .cmu-page .cmu-ai-catcards, .cmu-page .cmu-ai-deliverables { grid-template-columns: 1fr; }
  /* 一覧：スマートフォンはカテゴリをプルダウンで選ぶ（カードは隠す） */
  .cmu-page .cmu-col-filter__select { display: grid; gap: 6px; }
  .cmu-page .cmu-col-filter__select label { font-size: 12px; font-weight: 600; color: var(--cmu-muted); }
  .cmu-page .cmu-col-filter__select select { width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--cmu-ink); border-radius: 4px; background: #fff; color: var(--cmu-ink); font: inherit; font-size: 15px; }
  .cmu-page .cmu-col-cats { display: none; }
  .cmu-page .cmu-col-tools { margin-top: 16px; }
  .cmu-page .cmu-col-tool { min-height: 36px; }
  .cmu-page .cmu-col-cat { padding-top: 44px; }
  .cmu-page .cmu-col-cat__head h2 { font-size: 18px; }
  .cmu-page .cmu-art__cat { margin-top: 36px; }
  .cmu-page .cmu-art__summary { grid-template-columns: 1fr; padding: 18px 16px; }
  .cmu-page .cmu-ai-roles th, .cmu-page .cmu-ai-roles td { padding: 9px 10px; }
  .cmu-page .cmu-art__service { padding: 22px 18px; }
}

/* パンくず：項目の途中で折り返さない（長いページ名は省略表示） */
.cmu-page.cmu-ai .cmu-breadcrumb { flex-wrap: wrap; row-gap: 2px; }
.cmu-page.cmu-ai .cmu-breadcrumb > a, .cmu-page.cmu-ai .cmu-breadcrumb > span:not([aria-hidden]) { white-space: nowrap; }
.cmu-page.cmu-ai .cmu-breadcrumb > [aria-current] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .cmu-page.cmu-ai .cmu-breadcrumb > [aria-current] { max-width: 14em; }
  /* ツールの絞り込みは横スクロールの1行に */
  .cmu-page .cmu-col-tools { display: block; }
  .cmu-page .cmu-col-tools__label { margin-bottom: 6px; }
  .cmu-page .cmu-col-tools__list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .cmu-page .cmu-col-tool { flex: none; }
}

.cmu-page .cmu-art__steps-note { margin: -6px 0 14px; color: var(--cmu-muted); font-size: 12px; }
.cmu-page .cmu-ai-chip--logo { display: inline-flex; align-items: center; gap: 5px; }
.cmu-page .cmu-ai-chip--logo img { width: 16px; height: 16px; object-fit: contain; }
.cmu-page .cmu-ai-note { margin-top: 10px; color: var(--cmu-muted, #5b6573); font-size: 13px; line-height: 1.8; }
/* 記事の記入例（説明用サンプル） */
.cmu-page .cmu-art__sample { margin: 22px 0 6px; }
.cmu-page .cmu-art__sample-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 600; line-height: 1.6; }
.cmu-page .cmu-art__sample-table { min-width: 560px; }
.cmu-page .cmu-art__sample-table tbody th { white-space: nowrap; }
.cmu-page .cmu-art__sample-table th, .cmu-page .cmu-art__sample-table td { font-size: 13px; }
/* 記事冒頭の結論 */
.cmu-page .cmu-art__answer { margin: 18px 0 0; padding: 16px 20px; border-left: 3px solid var(--cmu-accent); background: #f4f9f9; }
.cmu-page .cmu-art__answer-label { margin-bottom: 4px; color: var(--cmu-accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.cmu-page .cmu-art__answer p:last-child { font-size: 15px; line-height: 1.9; }
/* 活用したAIと役割（記事冒頭・商品ページ） */
.cmu-page .cmu-art__ai-roles, .cmu-page .cmu-ai-models { margin: 6px 0 0; }
.cmu-page .cmu-art__ai-roles > div, .cmu-page .cmu-ai-models > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px dashed var(--cmu-line); }
.cmu-page .cmu-art__ai-roles > div:first-child, .cmu-page .cmu-ai-models > div:first-child { border-top: 0; }
.cmu-page .cmu-art__ai-roles dt, .cmu-page .cmu-ai-models dt { font-weight: 700; font-size: 14px; }
.cmu-page .cmu-art__ai-roles dd, .cmu-page .cmu-ai-models dd { margin: 0; font-size: 14px; line-height: 1.8; }
.cmu-page .cmu-ai-models { margin: 0 0 32px; padding: 6px 20px; border: 1px solid var(--cmu-line); background: #fff; }
.cmu-page .cmu-art__summary-ai { margin-top: 14px; }
@media (max-width: 560px) { .cmu-page .cmu-art__ai-roles > div, .cmu-page .cmu-ai-models > div { grid-template-columns: 1fr; gap: 2px; } }
.cmu-page .cmu-art__summary-ai { grid-column: 1 / -1; }